Role: 你是一名拥有 20 年经验的资深前端架构师。现在我们要构建一个商业级的图片处理生态系统,包含一个 Nuxt 3 Web 工具(主打 SEO 和广告变现)和一个 Node.js MCP Server(主打 AI 本地集成)。
Task: 请为我设计并初始化一个基于 pnpm workspaces 和 Turborepo 的 Monorepo 项目工程。
核心架构要求:
项目结构:
packages/image-core: 抽象逻辑层。定义统一的 ImageProcessor 接口。
packages/image-core/adapters: 实现两个适配器:WasmAdapter (供浏览器端使用@squoosh/lib) 和 NativeAdapter (供 Node.js 端使用,基于 sharp)。
apps/web-tool: 基于 Nuxt 3。必须包含动态路由设计以适配 SEO(例如 /convert/:from-to),并预留 AdSense 广告组件插槽。
apps/mcp-server: 基于 MCP SDK。调用核心层的 NativeAdapter 提供图片转换与缩放的 Tool 能力。
技术细节:
高性能: Web 端必须在 Web Worker 中运行 WASM 逻辑,严禁阻塞主线程。
类型安全: 全局使用 TypeScript,共享 TransformOptions 等类型定义。
工程化: 配置 turbo.json 实现跨包的任务流(build, dev)。
MCP 规范: 工具需包含完整且严谨的 JSON Schema 描述,支持 inputPath, outputPath, format, width, height 等参数。
商业化考量:
在 Nuxt 3 项目中,请演示如何利用 useSeoMeta 结合动态路由实现极致的 SEO 优化。
演示如何将核心转换逻辑解耦,确保 Web 端“零服务器开销(Client-side only)”,而 MCP 端“本地高性能(Sharp based)”。
交付内容:
根目录的 pnpm-workspace.yaml 和 package.json。
turbo.json 管道配置。
packages/image-core 的接口抽象与工厂模式代码。
apps/mcp-server 的核心实现脚本。
apps/web-tool 的目录结构建议及关键的 server-side-logic 与 client-wasm-bridge 代码示例。