SYSTEM DESIGN

DMTX Desktop Workspace 桌面客户端技术方案

基于现有 DMTX 后端、Vue 主应用和多个遗留编辑器，规划 macOS / Windows 桌面工作区，并逐步叠加 AI Copilot、任务、工件、审批和审计能力。

solution.md 2026-06-04 ~12 分钟阅读

方案概览#

要点

推荐将 DMTX 打造成 DMTX Desktop Workspace：以 Electron 桌面壳复用现有 Vue 主应用和编辑器，先完成 macOS / Windows 工作台化，再通过 desktop-bff、AI Copilot、任务、工件、审批和审计能力逐步演进到 Claude Cowork-like 的营销运营协同客户端。

方案 C — AI 协同客户端

Electron + 现有 Web 复用 + 编辑器兼容 + AI Copilot + 工作区/会话/任务/工件/审批/审计。建议作为产品化主线。

方案 A — 简单套壳

仅做安装包、登录、主前端加载和基础自动更新，适合演示但产品价值不足。

方案 D — 企业级 Workspace

加入多 Agent、私有化、设备管理、管理员策略和编辑器现代化，适合作为后续战略阶段。

需求与验收#

用户原始需求是：基于 DMTX 后端、主前端、拖拽编辑器、表单编辑器和 H5/CKEditor，评估如何将 DMTX 做成类似 Claude Cowork 的 macOS / Windows 多端客户端，并明确开发路径与工时。

项目	路径	当前定位	桌面化策略
DMTX 后端	`/Users/jack/IdeaProjects/dmtx/biz-projects`	Java 17 + Maven 多模块 Spring Boot	不本地打包；通过 gateway / desktop-bff 访问
主前端	`/Users/jack/IdeaProjects/dmtx/dmtxfront/app`	Vue 3 + Vite + Pinia + Qiankun	最大化复用，增加 runtime config 与 desktop bridge
拖拽编辑器	`draggable-editor`	Vue 2 + webpack 3 邮件编辑器	MVP 兼容 iframe；补 origin 校验和 typed message
表单编辑器	`form-editor`	Vue 2 + Vue CLI 表单/问卷编辑器	去掉 `Ato` query token，改宿主 bridge 注入
H5 编辑器	`Dmartech-CKEditor`	CKEditor 4 分叉静态资源	MVP 兼容，中期重封装，长期替换或升级

竞品调研#

竞品 / 参考产品	实现方式	优点	缺点	DMTX 可借鉴点
HubSpot Breeze	Assistant、Agents 和 100+ AI 功能嵌入 CRM、Marketing、Sales、Service 流程。	AI 深度绑定 CRM 数据和业务流程。	企业级权限和配置复杂。	AI 要理解联系人、素材、旅程、表单和活动数据。
Mailchimp Intuit Assist / Analytics AI	Analytics AI、AI Segment Builder、自动化流程邮件生成、活动表现分析。	面向营销人员高频任务，确认机制清晰。	高级能力受套餐、地区和 beta 状态限制。	采用“生成草稿 + 人工确认”，先提升素材和分群效率。
ActiveCampaign Active Intelligence	自然语言创建 campaign、automation、segmentation，并探索 AI agents / MCP。	接近 Autonomous Marketing。	自动化能力越强，权限和审计要求越高。	必须提供稳定、可控、可审计的 AI 工具接口。
Claude Code Desktop / Cowork	Chat / Cowork / Code、多 pane、任务面板、后台任务、subagents、permission modes、artifacts。	工作区、会话、任务、工件、审批、权限对象模型清晰。	偏研发和本地文件场景。	借鉴对象模型，但工具对象换成联系人、素材、旅程、表单、报表。

用户体验设计#

第一版聚焦运营人员和实施/交付人员。管理员只保留账号、权限、环境、设备和审计的必要入口。

选择工作区

选择企业、环境和业务模块，例如“某客户 - 生产环境 - 邮件营销”。默认使用最近登录环境。

workspace≤1 step

提出营销目标

例如“帮我为 90 天未购买用户生成召回邮件，并保存为素材草稿”。AI 读取当前页面上下文和用户权限。

copilotdraft-first

审核并保存

AI 生成文案、表单、H5 或旅程建议，用户确认后保存为草稿；发布、删除、批量修改必须进入审批中心。

approvalaudit

配置项	默认值	说明
AI 操作权限	只读 + 生成草稿	默认不允许直接发布或批量修改。
高风险动作	必须人工确认	发布、删除、批量改数据、导出敏感数据都需要确认。
本地文件访问	默认关闭	用户明确授权后才允许读取本地文件。
桌面通知	仅关键事件通知	任务完成、失败、需要确认时通知。
生成内容保存	保存为草稿	草稿由用户确认后再应用到 DMTX。

技术架构#

推荐架构：Electron 负责桌面能力和安全 bridge，现有 Vue 主应用作为业务主界面，desktop-bff 聚合 DMTX API 与 AI 工具调用。

✓ 优点

现有 Vue 主应用和多个 Web 编辑器复用成本最低。
Electron 多窗口、通知、更新、后台进程生态成熟。
适合工作台类产品，便于加入任务、工件、审批面板。

✕ 缺点

包体和内存高于 Tauri。
必须严格设计 preload / IPC / 自动更新签名。
需要持续升级 Electron 以处理 Chromium 安全更新。

数据模型#

建议新增桌面设备、AI 工作区、会话、任务、工件、审批和审计 7 类核心对象。

表	关键字段	用途
`desktop_device`	`company_id`, `user_id`, `device_id`, `platform`, `app_version`, `status`	记录桌面设备、版本、平台和吊销状态。
`ai_workspace`	`company_id`, `user_id`, `name`, `env`, `region`, `default_module`	保存企业/环境/模块级工作区。
`ai_session`	`workspace_id`, `title`, `module`, `context_snapshot`, `status`	保存一次 AI 协作会话和上下文快照。
`ai_task`	`session_id`, `task_type`, `status`, `input`, `output`, `error_message`	记录 AI 任务、后台任务、失败和输出。
`ai_artifact`	`artifact_type`, `title`, `content`, `version`, `status`	保存邮件文案、表单 schema、旅程方案、HTML/Markdown 等工件。
`ai_action_approval`	`task_id`, `action_type`, `risk_level`, `request_payload`, `approval_status`	保存高风险操作审批记录。
`ai_audit_log`	`company_id`, `user_id`, `action`, `target_module`, `request_summary`, `result_summary`	保存 AI 操作和桌面端关键动作审计。

API 设计#

建议新增 /api/desktop/v1/** 和 /api/copilot/v1/**，由 desktop-bff 屏蔽现有 DMTX API 版本差异。

接口	方法	用途	关键入参
`/api/desktop/v1/devices/register`	POST	设备注册	`deviceId`, `platform`, `appVersion`
`/api/desktop/v1/runtime-config`	GET	获取环境配置	`env`, `region`
`/api/copilot/v1/sessions`	POST	创建 AI 会话	`workspaceId`, `module`, `contextSnapshot`
`/api/copilot/v1/tasks`	POST	发起 AI 任务	`sessionId`, `taskType`, `input`
`/api/copilot/v1/tasks/{taskId}`	GET	查询任务状态	`taskId`
`/api/copilot/v1/artifacts`	POST	创建工件草稿	`sessionId`, `artifactType`, `content`
`/api/copilot/v1/approvals`	POST	请求高风险操作审批	`taskId`, `actionType`, `riskLevel`
`/api/copilot/v1/approvals/{approvalId}/approve`	POST	审批并执行	`confirmText`, `dryRunPassed`

示例：发起 AI 邮件文案任务

POST /api/copilot/v1/tasks
{
  "sessionId": 90001,
  "taskType": "generate_email_copy",
  "input": {
    "goal": "为 90 天未购买用户生成召回邮件",
    "tone": "专业、温和、有优惠引导",
    "language": "zh-CN",
    "targetModule": "material"
  }
}

前后端实现#

主前端适配桌面运行时

将 LINKS.js 硬编码地址迁移到 runtime config；新增 webAuthProvider / desktopAuthProvider 双实现；增加 Copilot、任务、工件和审批挂载点。

Vue 3runtime config

标准化编辑器 bridge

为 draggable-editor、form-editor、CKEditor 统一 editor.ready、editor.save、editor.preview、editor.ai.insert 等消息；去掉 query token。

editor bridgesecurity

新增 desktop-bff / copilot-api

聚合 Contact、Material、Journey、Questionnaire API，落库 workspace/session/task/artifact/approval/audit，并封装 AI 工具调用。

JavaBFF

实现桌面壳安全能力

Electron 禁用任意 Node 集成，通过 preload + contextBridge 暴露最小能力；token 放系统安全存储；自动更新签名。

ElectronIPC whitelist

阶段路线图#

路线图以 2026-06-10 作为示例启动日；正式排期需结合人员和客户交付窗口确认。

工作量评估#

方案 / 阶段	范围	人天	日历周期	建议
方案 A：简单桌面套壳	Electron 壳、登录、主前端、打包、基础自动更新	30-50	3-6 周	可做演示，不作为最终目标
方案 B：桌面工作台	方案 A + runtime config + 统一认证 + 三个编辑器 + 日志通知	60-100	6-10 周	可作为 MVP 基础
方案 C：AI 协同客户端	方案 B + AI Copilot + 工作区/会话/任务/工件/审批/审计 + desktop-bff	120-220	3-5 个月	推荐主线
方案 D：企业级 AI Workspace	方案 C + 多 Agent + 私有化 + 设备管理 + 管理员策略 + 编辑器现代化	220-400+	6-9 个月+	后续战略阶段

Phase 1 MVP 模块	工作项	预估人天
Electron Shell	窗口、菜单、托盘、安装包、自动更新	20-35
Runtime Config	beta/prod/eu/private 环境运行时切换	8-15
统一认证	secure token、SSO/2FA 兼容、退出登录	12-20
主前端适配	desktop bridge、布局、Copilot 挂载点	12-20
编辑器兼容	draggable/form/CKEditor 桌面运行和桥接	15-25
AI Copilot	文案、表单、H5、旅程说明生成	20-35
Desktop BFF	会话、任务、工件、审批、审计初版	20-35
测试/发布	E2E、兼容测试、安装包验证、文档	15-25

风险与安全#

质量自检#

维度	满分	得分	说明
A. 需求理解	4	3	已记录用户原始需求和验收标准；外部客户名称/交付日期未确认。
B. 竞品调研	4	4	覆盖 HubSpot、Mailchimp、ActiveCampaign、Claude Code/Cowork。
C. 用户体验	6	6	有核心流程、默认值、空状态、批量操作和撤销设计。
D. 技术完整度	6	6	数据模型、API、前后端、编辑器、AI 边界均已覆盖。
E. 可行性	4	4	分阶段工时、风险、兼容策略已给出。
F. 附加分	2	2	有多方案对比和后续扩展路线。

要点

总分：25 / 26。达到 ≥20 分评审门槛，可提交产品/研发评审。若转为客户交付方案，需要补充客户名称、客户原始业务场景、明确交付日期和合同边界。