## Manus是什么？

最近两天无论是外网还是内网，Manus突然像一颗流星一样，冲入人们的视野，而且就落在你的面前，让你不看到他都难。

所以老狗也勉强去了解一下这个Manus是什么玩意。

相信大家看到Manus时，都看到了“`邀请码五万！`”类似的字眼，不知道你看到这种文字是什么感觉，反正老狗看到时就100%确定这是假的！不知道为什么这种文字的标题为什么有人会有兴趣点进去，这不赤裸裸的诈骗吗？@黑皮叔叔的心情都有了，不知道会不会以造谣/寻衅滋事来逮捕作者呢？大概率不会吧~

扯远了，那么Manus是什么呢？

结合现有资料，老狗将其看作和钢铁侠的贾维斯类似的东西，也就是一个具有实际操作能力的AI机器人，只不过是软件版，目前只能操作电脑中的一些软件。比如打开软件、编写文件、发送邮件、查询资料等等白领工作者的常见工作内容，大都可以去通过对话的形式让Manus去完成。当然完成的结果是好是坏咱们另当别论。

不知道这么说你明白了没有？



## Manus是如何出现的？

Manus这种类型的AI产品，其实并不是由Manus开创的，早在几年前就有了这个产品概念，一般称作“**AI Agent**”，那么什么是AI Agent呢？

AI Agent (人工智能代理) 是一种**智能程序**，能像虚拟“代理人”一样**自主行动**，完成特定**目标**。

核心特点：

- **自主性**:  无需人一步步指示，能独立行动。
- **目标导向**:  为了达成预设的目标而工作。
- **智能**:  具备感知、思考、决策能力。

AI Agent 可以感知环境，理解信息，做出决策并执行行动。 它们被设计用来帮助人类处理各种任务，提高效率和自动化水平。 简单来说，AI Agent 就是能独立思考和行动的智能助手。

其实宽泛意义上来说，**AI Agent** 早就有类似的产品落地了，比如：智能音响、AI自动驾驶等等，都属于**AI Agent** 概念范畴的产品。

所以 Manus 并不是什么高深的东西！

## Manus为什么这么火？

以老狗主观思想，老狗认为Manus爆火的原因，纯粹是资本运作 + 广告 + 自媒体跟风炒作！

说的阴谋论一些，老狗甚至认为有洗钱的可能性！TM的什么产品一个邀请码能卖到5W？而且你要知道，邀请码也必然是官方放出来的！如果真的这么值钱，官方为什么自己不去卖服务呢？而是靠发邀请码的方式去营销？

总之，老狗认为Manus的爆火，起初一定是有人为了自己的利益有意为之，可能是投广告，可能是造谣，再加上这些煞笔营销号的推波助澜，然后就有了现在的爆火。说点题外话：`以老狗的性格和脾气，看到这种营销手段，简直气到骂娘！`

## Manus（Ai Agent）会改变什么吗？

短期不会有什么巨大变化，即便是技术上可行，那么安全性上呢？

你个人的隐私数据，企业的保密数据，敢直接使用其它厂商的联网AI服务吗？

因此，大家不必太过担心，需要联网才能用的AI Agent，也只能用在一些表面的工作罢了，什么时候私有部署的`AI Agent` 普及了，再担忧吧！

不过，你可以现在就考虑：当私有部署的`AI Agent` 普及之后，你有哪些应对之举？！

Manus是什么？为什么这么火？

一个构建环境，一个运行环境，在构建环境中完成包含`prisma`的编译，然后将编译后的 `node_modules` 及相关环境`COPY`到运行环境中，并把 prisma 自动生成的数据库更新脚本拷贝到容器中，以便实现数据库结构自动更新！

> 不知道时候可以优化掉 `node_modules` 的拷贝，没尝试过，抽空可以试试。



详情如下：

```sh
FROM node:20-alpine3.21 AS BUILDER

WORKDIR /app
COPY package*.json ./

# 安装依赖并生成 Prisma Client
RUN npm install

COPY . .

RUN npx prisma generate 
RUN npm run build

FROM node:20-alpine3.21 AS RUNNER

LABEL author.name="月上老狗"
LABEL author.email="dddogx@qq.com"
LABEL project.name="wechatbot"
LABEL project.version="0.0.3"

WORKDIR /app
COPY ./prisma/ ./prisma/
COPY --from=builder /app/.output/ ./ 
COPY --from=builder /app/.output/server/node_modules/ ./node_modules/
COPY --from=builder /app/.output/server/node_modules/.prisma/ ./.prisma/
# COPY ./data/ /app/data
COPY ./entrypoint.sh ./entrypoint.sh
RUN chmod +x entrypoint.sh

ENV NUXT_APP_VERSION="0.0.3"

ENV DATABASE_URL="/app/data/wechatbot.db"
ENV NUXT_ADMIN_USERNAME=""
ENV NUXT_ADMIN_PASSWORD=""

ENV NUXT_WXPUBLIC_SECRET=""
ENV NUXT_WXPUBLIC_TOKEN=""
ENV NUXT_WXPUBLIC_AESKEY=""

VOLUME /app/data/

ENV PORT="3001"
EXPOSE 3001
ENTRYPOINT ["/app/entrypoint.sh"]
```

Nuxt3+prisma构建docker镜像的Dockerfile

经常使用 `Nuxt3` 的朋友们，一定经常遇到很多库与SSR不兼容的问题，这不 `CroppingJS` 就算一个。

最近 `CroppingJS` 发布了 `2.0` 版本，使用TS完全重构了代码，并封装了很多HTML自定义标签，但很遗憾，仍然与SSR有冲突！



## 请看解决方案

```html
<script setup lang="ts">
import type { CropperCanvas, CropperViewer, CropperSelection, CropperImage } from 'cropperjs';

onMounted(async () => {
  // 动态导入 Cropper.js，确保只在客户端加载
  const Cropper = (await import("cropperjs")).default;

  await import("cropperjs");
});
</script>
```

*此时，你可以拿着这段代码关闭本页面了，但你如果想要深造一下，可以往下看！*

> 前排提示，这段代码是 `Grok3` 告诉我的，我不懂，那只能让 `Grok3` 给我讲讲了！


## 解决 SSR 问题的核心思路

这段代码的核心思路是通过 **延迟执行** 和 **动态导入**，将依赖浏览器环境的代码（如 Cropper.js）限制在客户端运行，从而避免服务器端渲染时因缺少 DOM 环境而产生的错误。以下是详细的拆解：

### 1. 使用 onMounted 延迟执行

- **onMounted 的作用**：onMounted 是 Vue 的生命周期钩子，只有在组件挂载到 DOM 后才会触发。而在 SSR（服务器端渲染）环境中，服务器只负责生成初始 HTML，不会执行组件的挂载逻辑。因此，onMounted 内的代码不会在服务器端运行，只会在客户端执行。
- **为什么重要**：Cropper.js 是一个依赖浏览器 DOM API 的库（例如操作 `<img>` 元素），而在服务器端（如 Node.js 环境）没有 document 或 window 对象。如果直接在服务器端加载或使用 Cropper.js，会抛出类似 document is not defined 的错误。通过将代码放入 onMounted，确保它只在客户端的浏览器环境中运行，规避了服务器端的问题。

### 2. 动态导入 import("cropperjs")

- **动态导入的机制**：`await import("cropperjs")` 是一种动态导入方式，返回一个 Promise，仅在运行时加载指定的模块。与传统的静态导入（如 `import Cropper from 'cropperjs'`）不同，动态导入不会在代码加载时立即引入模块，而是推迟到代码执行时。
   
- 在 SSR 中的行为：

  - 在服务器端渲染阶段，Nuxt 3（或其他 SSR 框架）不会执行 `onMounted` 内的代码，因此动态导入不会触发。
  - 在客户端接管页面后，`onMounted` 触发，动态导入才开始执行，加载 Cropper.js。
  - 此外，动态导入的模块通常会被打包成单独的 chunk，仅在客户端需要时按需加载，避免服务器端接触到这些代码。
  
- **为什么能解决问题**：通过动态导入，`Cropper.js` 的加载被推迟到客户端环境，确保服务器端渲染时不会尝试解析或执行依赖 DOM 的代码，从而避免错误。

### 3. 类型安全与 import type

- **import type 的作用**：`import type { ... } from 'cropperjs'` 只导入 Cropper.js 的类型定义，用于 `TypeScript `的类型检查。这种导入不会引入实际的模块代码，仅在编译时生效。
- **为什么重要**：在服务器端渲染时，静态导入（如 import Cropper from 'cropperjs'）会尝试加载整个模块，导致错误。而 import type 避免了运行时加载模块，保证了服务器端的安全性，同时保留了 TypeScript 的类型支持。

------

## 为什么能解决 SSR 问题？

这段代码能解决 SSR 问题的根本原因在于以下几点：

1. **服务器端不执行客户端逻辑**：SSR 框架（如 Nuxt 3）在服务器端渲染时，只处理初始 HTML 的生成，不执行 onMounted 钩子。因此，依赖 DOM 的 Cropper.js 代码不会在服务器端运行，避免了因缺少浏览器环境而抛出的错误。
2. **动态导入的隔离性**：`await import("cropperjs") `确保 Cropper.js 只在客户端加载。服务器端渲染时，Nuxt 不会将动态导入的模块包含在初始 JavaScript 包中，而是交给客户端按需加载。这种隔离性防止了服务器端接触到不兼容的代码。
3. **类型导入的无运行时影响**：使用 import type 仅引入类型信息，不会在服务器端或客户端引入 Cropper.js 的实际实现。这样既保持了代码的类型安全，又避免了 SSR 过程中的运行时错误。

------

## 对比静态导入的效果

为了更清楚地理解，我们可以对比静态导入和动态导入的区别：

- 静态导入（会导致问题）：

  ```ts
  `import Cropper from 'cropperjs';`
  ```

  - 在 SSR 中，服务器端会立即尝试加载 cropperjs 模块。
  - 由于 Cropper.js 依赖 DOM API，服务器端会抛出错误（如 document is not defined）。

- 动态导入（解决问题） ：

  ```ts
  onMounted(async () => {
    const Cropper = (await import("cropperjs")).default;
  });
  ```

  - 服务器端跳过 onMounted，不会加载 Cropper.js。
  - 客户端执行时，动态加载 Cropper.js，运行在浏览器环境中，没有问题。

------

## 代码优化建议

你的代码中存在冗余：

- const Cropper = (await import("cropperjs")).default; 已经加载并获取了 Cropper.js 的默认导出。
- 紧接着的 await import("cropperjs"); 是多余的，因为模块已被加载。

优化后的代码如下：

```ts
<script setup lang="ts">
import type { CropperCanvas, CropperViewer, CropperSelection, CropperImage } from 'cropperjs';

onMounted(async () => {
  const Cropper = (await import("cropperjs")).default;
  // 示例：初始化 Cropper
  const image = document.getElementById('image');
  if (image) {
    const cropper = new Cropper(image, { /* 配置项 */ });
  }
});
</script>
```

## 总结

这段代码通过以下方式解决 SSR 问题：

- **利用 onMounted**：将 Cropper.js 的加载和初始化限制在客户端执行，避开服务器端渲染。
- **动态导入 import("cropperjs")**：确保模块只在客户端加载，避免服务器端接触 DOM 相关代码。
- **类型安全**：使用 import type 提供类型支持，不影响运行时行为。

这种方法是处理 SSR 与客户端库（如 Cropper.js）兼容性的常见且有效策略，确保了服务器端渲染的稳定性，同时保证客户端功能的正常运行。

Nuxt3使用Cropperjs2.0如何实现SSR，内有方案？

首先，预设好你的广告位 `class`，比如我使用的div：

```html

<div class="article-ads"></div>
```

所有js重点操作就是找出页面中的这个div并渲染！




## 客制化脚本

- 在自定义Script中填入下面的代码，如果有其他自己的客制化脚本，请自行合并！

```js
var url;
window.onload = async function () {
    url = window.location.href;
    // 加载广告组件
    await loadGoogleAdsJs();

    // 监听网站主体部分，在页面变化时重新渲染广告
    listener_body();
}

/**
 * 谷歌广告js加载
 */
async function loadGoogleAdsJs() {
    let script = document.createElement("script");
    script.setAttribute("async", "");
    script.setAttribute("crossorigin", "anonymous");
    // 记得修改你的脚本参数哦！！！
    script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8842635629279684";
    document.body.appendChild(script);
    // console.log('loadGoogleAds');
}

/**
 * 监听body变化，实现页内刷新广告
 */
async function listener_body() {
    // 首次初始化广告
    show_ads();

    var footers = document.getElementsByClassName("footer-icp-number");
    var height = footers[0].offsetTop;
    // console.log(height);
    // 选择要观察的目标节点
    const body = document.body;

    // 观察器的配置（需要观察什么变动）
    var config = { childList: true };

    // 当观察到变动时执行的回调函数
    var callback = function (mutationsList, observer) {
        let footer = document.getElementsByClassName("footer-icp-number");
        var new_height = footer[0].offsetTop;
        if (height != new_height) {
            height = new_height;
            // 页面变化时，重新渲染星空背景，1效果不对，2很卡
            // clear_stars();
            // show_stars();
            // 页面变动时重新加载广告
            if (url != window.location.href) {
                url = window.location.href;
                show_ads();
            }
        }
    };

    // 创建一个观察器实例并传入回调函数
    var observer = new MutationObserver(callback);

    // 用配置文件初始化观察器实例
    observer.observe(body, config);
    // console.log('listener_body');
}

/**
 * 显示广告
 */
async function show_ads() {
    initAds = 0;
    // 1.文章内广告位设置
    let article_ads = document.getElementsByClassName("article-ads");
    for (var ad = 0; ad < article_ads.length; ad++) {
        article_ads[ad].innerHTML = "<ins class=\"adsbygoogle ads-custome\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8842635629279684\" data-ad-slot=\"4336551477\"></ins>";
    }

    // 2.读取所有自定义的广告位
    let adsbygoogles = document.getElementsByClassName("ads-custome");
    console.log(adsbygoogles.length);
    // 3.给所有广告位拉取一遍广告
    for (var ad = 0; ad < adsbygoogles.length; ad++) {
        (adsbygoogle = window.adsbygoogle || []).push({});
    }

    // console.log('show_ads');
}

```

Vanblog基于客制化实现文章内嵌广告位

> 前排提示：使用Cloudflare自动的https，可能出现连接不稳定的问题，因为现在很多网站都嵌入了Cloudflare的人机拦截，可能自家产品有冲突？总之，用了之后有好有坏吧，建议自行体验后决定。

## 前提条件

1. 有Cloudflare账号；
2. 有托管在Cloudflare上的域名；
3. 有可以安装 Hysteria2 服务端的主机。
 
> 搭建服务端可参考我的文章：[Hysteria2代理：服务端及客户端搭建](https://www.oldmoon.top/post/144)

## Cloudflare配置

1. 登录到Cloudflare；

2. 按照下图操作进入Api Token设置页面，开始创建Token；

> ![image](https://images.oldmoon.top/images/dingdangdog/1740758151189-1-.jpg)

3. 按照下图配置项，配置Token权限；

> ![image](https://images.oldmoon.top/images/dingdangdog/1740758151189-2-.jpg)

4. 很重要！获得Token并激活Token！

按照前三步设置完成后，点击继续，你将获得一个token（**token只会显示这一次，请务必保存！**），以及**激活Token的一段命令**

**请复制那段命令，然后在服务器上运行它，以激活token！！**

激活后即可进行后续Hysteria2配置。



## Hysteria2服务端配置示例

```yaml
# 本文只关注注释部分配置项即可，其他部分为基础配置，请自行学习了解！
listen: :24443 

acme:
  domains:
    - hys.baidu.com 
  email: hys@baidu.com
  type: dns # 重点
  dns:
    name: cloudflare # 重点：新增dns自动配置
    config:
      cloudflare_api_token: #你的cloudflare api token 需要权限：区域-所有域-dns-编辑（害怕风险可以限制客户端IP）


auth:
  type: password
  password: hyspassword 

masquerade: 
  type: proxy
  proxy:
    url: https://baidu.com/ 
    rewriteHost: true

```

如上所示配置完成后，即可启动hysteria服务，如果一切正常，查看服务状态你将会看到启动成功并显示端口的日志！

### 常用命令

假如你是使用 官方自动安装脚本 来安装的hysteria，你可以直接使用下面的命令(Linux)：

```sh
# 启动服务
sudo systemctl start hysteria-server.service

# 开机自启服务
sudo systemctl enable hysteria-server.service

# 查看服务状态
sudo systemctl status hysteria-server.service

# 查看服务全部运行日志
sudo journalctl --no-pager -e -u hysteria-server.service
```



<div class="article-ads"></div>

Hysteria2 + Cloudfalre自动配置https证书和域名

twitter:card

twitter:title

twitter:site

twitter:image

努力做一只帅气、有才、豁达的老狗！

twitter:description

程序员,笔记,Bug记录,编程技术,AI,Java,Node,Golang,个人博客,资源分享,月上老狗,dingdangdog