BossAgents 微信小程序 — 统一架构设计方案

BossAgents 微信小程序 — 统一架构设计方案

版本: v1.0 | 日期: 2026-06-01 | 基于: SCSAI PLM BossAgents 系统分析


目录

  1. 设计原则与目标
  2. 整体架构设计
  3. 后端适配方案
  4. 小程序页面结构
  5. API复用与新建方案
  6. UI/UX适配策略
  7. 技术选型与项目结构
  8. 开发路线图
  9. 风险与注意事项

1. 设计原则与目标

1.1 核心原则

原则说明
后端统一复用现有 Node.js 后端,不新建独立后端。Web端和小程序共享同一套 API
渐进增强先做核心高频功能,再逐步扩展。不追求功能对等
移动优先针对手机屏幕重新设计交互,而非简单缩放
离线友好关键数据支持缓存,弱网环境可降级使用
微信生态利用微信登录、消息推送、分享等原生能力

1.2 目标用户场景

场景用户角色核心需求
移动审批管理者审批ECR/ECO变更请求,查看变更状态
快速查询工程师查询BOM结构、零件信息、供应商信息
AI助手所有人自然语言查询和创建PLM对象
状态监控运维查看数字员工运行状态、系统健康
通知接收所有人接收变更通知、审批提醒、异常告警

1.3 不做(MVP阶段)

  • ❌ 复杂的BOM树形编辑(交互太重)
  • ❌ 文件上传/导入(受小程序限制)
  • ❌ 系统配置管理(低频且复杂)
  • ❌ 数据大屏/Dashboard图表(屏幕太小)
  • ❌ 多语言切换
  • ❌ 深色模式

2. 整体架构设计

2.1 架构总览

┌─────────────────────────────────────────────────────────────────────┐
│                        客户端层                                     │
│                                                                     │
│  ┌─────────────────────┐        ┌──────────────────────────────┐   │
│  │   Web前端 (Vue 3)    │        │   微信小程序 (原生 / Taro)     │   │
│  │   localhost:5173     │        │   微信客户端运行              │   │
│  │   28个路由页面        │        │   4-5个核心Tab页面            │   │
│  │   SCSAI AML直接调用    │        │   仅RESTful JSON API         │   │
│  └──────────┬──────────┘        └──────────────┬───────────────┘   │
│             │                                   │                   │
│             │  HTTP/HTTPS                       │  HTTPS (wx.req)   │
│             │                                   │                   │
└─────────────┼───────────────────────────────────┼───────────────────┘
              │                                   │
              ▼                                   ▼
┌─────────────────────────────────────────────────────────────────────┐
│                       Nginx 反向代理                                 │
│           /api/*  → Node.js Backend (统一)                          │
│           静态资源 → dist/ (Web端)                                   │
└─────────────────────────────────┬───────────────────────────────────┘
                                  │
                                  ▼
┌─────────────────────────────────────────────────────────────────────┐
│                   Node.js Backend (server.js)                       │
│                                                                     │
│  ┌──────────────────────────────────────────────────────────────┐  │
│  │  统一API层 (80+ RESTful端点)                                   │  │
│  │  /api/bom/*  /api/change/*  /api/vendor/*  /api/ai-agent/*   │  │
│  │  /api/rule-engine/*  /api/digital-staff/*  /api/system/*     │  │
│  │  /api/aml/*  /api/feishu/*  /api/llm/*                      │  │
│  └──────────────────────────────────────────────────────────────┘  │
│                                                                     │
│  ┌──────────────────────────────────────────────────────────────┐  │
│  │  ★ 新增:小程序代理层 /api/miniapp/*                          │  │
│  │  · /api/miniapp/login        — 微信登录 (wx.login + code2session)│
│  │  · /api/miniapp/subscribe    — 消息订阅                        │  │
│  │  · /api/miniapp/notify       — 发送模板消息                    │  │
│  │  · /api/miniapp/proxy/SCSAI   — SCSAI AML透明代理                │  │
│  └──────────────────────────────────────────────────────────────┘  │
│                                                                     │
│  ┌──────────┐  ┌──────────────┐  ┌─────────────────────────────┐  │
│  │ SQLite   │  │ SCSAI Agent│  │ 外部服务                     │  │
│  │ (本地DB) │  │ (SOAP/AML)   │  │ LLM/飞书/邮件               │  │
│  └──────────┘  └──────────────┘  └─────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────┘

2.2 关键架构决策

| 决策点 | 选择 | 理由 |

|--------|------|------|

| 后端策略 | 复用现有 Node.js 后端 | 避免维护两套后端,API已较完善 |

| 小程序框架 | uni-app (Vue 3) | 团队熟悉Vue,可复用部分前端代码和Composable逻辑 |

| SCSAI调用 | 后端代理 | 小程序无法直接调用SOAP/XML |

| 认证方式 | 微信登录 + JWT | 利用微信生态,绑定现有用户体系 |

| 状态管理 | Pinia(与Web端一致) | 复用现有Store结构和API调用模式 |

| UI组件 | uni-ui + 自定义 | uni-ui提供微信原生体验 |


3. 后端适配方案

3.1 新增路由:/api/miniapp/*

需要在 server.js 中新增以下端点:

#### 认证

| 方法 | 路由 | 功能 | 说明 |

|------|------|------|------|

| POST | /api/miniapp/login | 微信登录 | wx.login() → code → code2session → openid → JWT |

| POST | /api/miniapp/bind-user | 绑定现有账号 | 将微信openid与现有用户账号绑定 |

| GET | /api/miniapp/user-info | 获取用户信息 | 返回绑定状态、权限等 |

#### SCSAI代理(关键)

小程序无法直接调用SCSAI SOAP/XML API,需要通过后端代理:

| 方法 | 路由 | 功能 | 说明 |

|------|------|------|------|

| POST | /api/miniapp/proxy/SCSAI | SCSAI通用代理 | 接收JSON参数,后端转换为SOAP/AML请求 |

| POST | /api/miniapp/proxy/SCSAI/query | SCSAI查询代理 | 简化查询接口 |

#### 消息通知

| 方法 | 路由 | 功能 | 说明 |

|------|------|------|------|

| POST | /api/miniapp/subscribe | 订阅消息模板 | 用户授权订阅 |

| POST | /api/miniapp/send-template-msg | 发送模板消息 | 审批通知、变更提醒等 |

3.2 现有API直接复用(无需修改)

以下现有 RESTful JSON API 可直接被小程序使用:

| API组 | 复用端点 | 用途 |

|-------|----------|------|

| 变更管理 | GET /api/change/ecrs, GET /api/change/ecos, PUT /api/change/ecr/:id | 审批变更请求 |

| 数字员工 | GET /api/digital-staff/status, GET /api/digital-staff/tasks | 查看员工状态 |

| 系统健康 | GET /api/system/health | 系统状态监控 |

| AI助手 | POST /api/ai-agent/chat, POST /api/ai-agent/execute | AI对话 |

| BOM查询 | GET /api/bom/items, GET /api/bom/structure/:id | BOM查看 |

| 供应商 | GET /api/vendor/list, GET /api/vendor/:id | 供应商查询 |

| 零件 | GET /api/aml/sciot/types, GET /api/aml/sciot/templates/:type | 对象类查询 |

| LLM | POST /api/llm/chat | LLM对话代理 |

| 规则引擎 | GET /api/rule-engine/rules, POST /api/rule-engine/identify | 规则查询和识别 |

3.3 需要适配的API

现有API问题适配方案
GET /api/bom/structure/:id返回完整BOM树,数据量大增加 ?depth=1&compact=true 参数,分页返回子节点
POST /api/aml/assemble响应时间可能较长(5-15s)改为异步模式:提交→返回taskId→轮询结果
POST /api/ai-agent/chat流式响应增加 ?stream=false 模式,返回完整响应

4. 小程序页面结构

4.1 TabBar导航(4个Tab)

┌──────────────────────────────────────────────────────┐
│  TabBar                                               │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐│
│  │ 🏠 首页   │ │ 💬 AI助手 │ │ 📋 工作台 │ │ 👤 我的  ││
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘│
└──────────────────────────────────────────────────────┘

4.2 完整页面树

pages/
├── index/                    # Tab1: 首页
│   └── index.vue             # 数据概览卡片 + 快捷入口
│
├── ai-chat/                  # Tab2: AI助手
│   ├── index.vue             # 对话界面(聊天式)
│   └── detail.vue            # 对话结果详情(创建/查询结果)
│
├── workbench/                # Tab3: 工作台
│   ├── index.vue             # 工作台首页(功能入口列表)
│   ├── change-list.vue       # 变更请求列表(ECR/ECO)
│   ├── change-detail.vue     # 变更详情 + 审批操作
│   ├── change-create.vue     # AI自然语言创建ECO
│   ├── bom-structure.vue     # BOM结构查看
│   ├── item-detail.vue       # 零件/对象详情
│   └── search.vue            # 全局搜索
│
├── profile/                  # Tab4: 我的
│   ├── index.vue             # 个人信息 + 设置入口
│   ├── staff-status.vue      # 数字员工状态监控
│   └── notifications.vue     # 通知消息列表
│
└── subpackages/              # 分包(按需加载)
    ├── vendor/               # 供应商管理分包
    │   ├── list.vue
    │   └── detail.vue
    └── approval/             # 审批分包
        ├── pending.vue       # 待审批列表
        └── history.vue       # 审批历史

4.3 各页面功能详述

#### Tab1: 首页

┌──────────────────────────────┐
│  BossAgents                   │
│  ┌──────────┐ ┌──────────┐   │
│  │ 待审批    │ │ 变更请求  │   │
│  │   3 笔    │ │  12 笔   │   │
│  └──────────┘ └──────────┘   │
│  ┌──────────┐ ┌──────────┐   │
│  │ 活跃员工  │ │ BOM总数  │   │
│  │   4/6    │ │  2,341   │   │
│  └──────────┘ └──────────┘   │
│                               │
│  快捷操作                      │
│  ┌──────┐ ┌──────┐ ┌──────┐  │
│  │查询零件│ │创建ECO│ │AI助手 │  │
│  └──────┘ └──────┘ └──────┘  │
│                               │
│  最近动态                      │
│  · ECO-2026-001 已审批通过    │
│  · 数字员工 DataClerk 任务完成 │
│  · Part-1024 已创建           │
└──────────────────────────────┘
  • 数据来源:GET /api/system/health + GET /api/change/ecrs?status=pending + GET /api/digital-staff/status
  • 适配要点:数字卡片替代Web端大图表;快捷入口替代Web端侧边栏导航

#### Tab2: AI助手

┌──────────────────────────────┐
│  AI 助手                      │
│                               │
│  ┌─────────────────────────┐ │
│  │ 💬 我能帮你做什么?       │ │
│  │                         │ │
│  │ 查询:帮我查零件 P-001   │ │
│  │ 创建:创建一个新零件     │ │
│  │ 变更:生成ECO变更请求    │ │
│  │ 分析:分析BOM成本        │ │
│  └─────────────────────────┘ │
│                               │
│  ┌─────────────────────────┐ │
│  │ 快捷指令                 │ │
│  │ [查BOM] [建零件] [ECO]  │ │
│  │ [查库存] [供应商] [报告] │ │
│  └─────────────────────────┘ │
│                               │
│  ┌─────────────────────────┐ │
│  │ 输入你的问题...     📎 🎤│ │
│  └─────────────────────────┘ │
└──────────────────────────────┘
  • 数据来源:POST /api/ai-agent/chat(复用Web端AiWorkbench的后端)
  • 适配要点:简化为单页面聊天式界面;快捷指令按钮替代Web端6个功能卡片;增加语音输入(微信原生能力)

#### Tab3: 工作台

┌──────────────────────────────┐
│  工作台                       │
│                               │
│  ┌─────────────────────────┐ │
│  │ 🔍 搜索零件/BOM/供应商   │ │
│  └─────────────────────────┘ │
│                               │
│  功能入口                      │
│  ┌──────────┐ ┌──────────┐   │
│  │ 📝 变更管理│ │ 🔧 BOM查看│  │
│  │ ECR/ECO  │ │ 零件结构  │   │
│  └──────────┘ └──────────┘   │
│  ┌──────────┐ ┌──────────┐   │
│  │ 🤖 数字员工│ │ 📊 审批中心│  │
│  │ 运行状态  │ │ 待审批列表 │   │
│  └──────────┘ └──────────┘   │
│  ┌──────────┐ ┌──────────┐   │
│  │ 🏭 供应商  │ │ ⚙️ 系统状态│  │
│  │ 信息查询  │ │ 健康检查  │   │
│  └──────────┘ └──────────┘   │
│                               │
│  最近访问                      │
│  · ECO-2026-001               │
│  · Part P-1024                │
│  · Vendor V-008               │
└──────────────────────────────┘
  • 数据来源:各业务模块API
  • 适配要点:卡片式功能入口替代Web端多Tab页面;搜索入口置于顶部

#### Tab4: 我的

┌──────────────────────────────┐
│  我的                         │
│                               │
│  ┌─────────────────────────┐ │
│  │ 👤 张三                  │ │
│  │ 工程师 · PLM系统         │ │
│  └─────────────────────────┘ │
│                               │
│  · 我的审批 (3笔待处理)       │
│  · 我的变更 (12笔)            │
│  · 数字员工状态               │
│  · 消息通知 (5条未读)         │
│  · 设置                       │
│  · 关于                       │
└──────────────────────────────┘
  • 适配要点:简洁个人中心;集成审批待办;数字员工状态轻量查看

5. API复用与新建方案

5.1 API分类复用表

| Web端API | 小程序是否复用 | 小程序页面 | 适配说明 |

|-----------|:---:|-----------|----------|

| POST /api/ai-agent/chat | ✅ | ai-chat/index | 直接复用 |

| POST /api/ai-agent/execute | ✅ | ai-chat/index | 直接复用 |

| GET /api/change/ecrs | ✅ | workbench/change-list | 直接复用 |

| GET /api/change/ecos | ✅ | workbench/change-list | 直接复用 |

| PUT /api/change/ecr/:id | ✅ | workbench/change-detail | 增加审批状态变更 |

| POST /api/change/eco/generate | ✅ | workbench/change-create | AI生成ECO |

| GET /api/bom/items | ✅ | workbench/search | 直接复用 |

| GET /api/bom/structure/:id | ⚠️ | workbench/bom-structure | 需增加depth参数 |

| GET /api/vendor/list | ✅ | subpackages/vendor/list | 直接复用 |

| GET /api/vendor/:id | ✅ | subpackages/vendor/detail | 直接复用 |

| GET /api/digital-staff/status | ✅ | profile/staff-status | 直接复用 |

| GET /api/digital-staff/tasks | ✅ | profile/staff-status | 直接复用 |

| GET /api/system/health | ✅ | index/index | 直接复用 |

| GET /api/aml/sciot/types | ✅ | workbench/search | 直接复用 |

| POST /api/llm/chat | ✅ | ai-chat/index | 直接复用 |

| POST /api/aml/assemble | ⚠️ | - | 改为异步模式 |

| POST /api/rule-engine/identify | ✅ | workbench/search | 直接复用 |

| GET /api/rule-engine/rules | ✅ | - | 后台使用 |

5.2 需新建的API端点

方法路由用途优先级
POST/api/miniapp/login微信登录P0
GET/api/miniapp/user-info用户信息P0
POST/api/miniapp/proxy/SCSAISCSAI代理P0
GET/api/bom/structure/:id?depth=1浅层BOM结构P1
POST/api/change/approve/:id统一审批接口P1
GET/api/dashboard/summary首页摘要数据(聚合)P1
POST/api/miniapp/subscribe消息订阅P2
POST/api/miniapp/send-template-msg发送模板消息P2

5.3 首页摘要API设计

GET /api/dashboard/summary

Response:
{
  "pendingApprovals": 3,
  "changeRequests": 12,
  "activeStaff": 4,
  "totalStaff": 6,
  "bomTotal": 2341,
  "recentActivities": [
    { "type": "approval", "title": "ECO-2026-001 已审批通过", "time": "2分钟前" },
    { "type": "staff", "title": "数字员工 DataClerk 任务完成", "time": "10分钟前" },
    { "type": "create", "title": "Part-1024 已创建", "time": "1小时前" }
  ]
}

6. UI/UX适配策略

6.1 核心交互模式转换

| Web端模式 | 小程序替代方案 | 适用页面 |

|-----------|---------------|----------|

| 侧边栏导航 | TabBar + 页面内导航 | 全局 |

| 数据表格 | 卡片列表 + 筛选标签 | change-list, vendor-list |

| 多Tab页切换 | 页面内 Tab/Segment | change-detail |

| 4列Kanban看板 | 单列 + Tab切换(待处理/进行中/已完成/失败) | staff-status |

| 树形组件(BOM) | 折叠卡片 + 层级缩进 | bom-structure |

| 模态框(Modal) | 新页面导航 | change-create, item-detail |

| 分页器 | 无限滚动 (scroll-view) | change-list, vendor-list |

| HTML5 Drag & Drop | 长按 + 操作菜单 | staff-status (任务排序) |

| 右键菜单 | 长按弹出操作菜单 | 列表项 |

| 文件上传 | 微信选择文件/图片 | - (MVP不做) |

| 导出CSV/Excel | 分享到微信/复制文本 | - (MVP不做) |

| document.title | uni.setNavigationBarTitle() | 全局 |

6.2 组件适配对照

Web端组件小程序实现
(树形结构)+ 递归折叠卡片
(数据表格)卡片列表 +
(模态框)跳转新页面
(分页)触底加载
(标签页)
(下拉选择)原生选择器
(日期选择)原生日期
(输入框)原生输入
(按钮)原生按钮
(标签)自定义标签

6.3 响应式断点

手机竖屏: 375px - 414px (主要目标)
手机横屏: 568px - 812px (兼容)
平板:     768px+ (后续考虑)

6.4 加载与空状态

加载中:  骨架屏 (skeleton screen) 替代 Web端 spinner
空数据:  友好的空状态插画 + 操作引导
错误:    toast提示 + 重试按钮
网络断开: 离线提示 + 缓存数据标识

7. 技术选型与项目结构

7.1 推荐技术栈

| 层级 | 技术 | 说明 |

|------|------|------|

| 框架 | uni-app (Vue 3) | 一套代码多端运行,团队Vue经验可复用 |

| UI库 | uni-ui | uni-app官方组件库,微信原生风格 |

| 状态管理 | Pinia | 与Web端一致 |

| HTTP请求 | uni.request (封装) | 基于wx.request |

| 构建工具 | HBuilderX / Vue CLI | uni-app标准工具链 |

| 代码风格 | ESLint + Prettier | 与Web端一致 |

为什么选 uni-app 而非原生微信小程序

  1. 团队熟悉Vue 3,学习成本低
  2. 可复用部分前端代码(Composable、工具函数、类型定义)
  3. Pinia Store 结构可部分复用
  4. 未来可扩展到支付宝/字节小程序

7.2 项目结构

bossagents-miniapp/
├── pages/                    # 主包页面
│   ├── index/
│   │   └── index.vue
│   ├── ai-chat/
│   │   ├── index.vue
│   │   └── detail.vue
│   ├── workbench/
│   │   ├── index.vue
│   │   ├── change-list.vue
│   │   ├── change-detail.vue
│   │   ├── change-create.vue
│   │   ├── bom-structure.vue
│   │   ├── item-detail.vue
│   │   └── search.vue
│   └── profile/
│       ├── index.vue
│       ├── staff-status.vue
│       └── notifications.vue
│
├── subpackages/              # 分包(按需加载)
│   ├── vendor/
│   │   ├── list.vue
│   │   └── detail.vue
│   └── approval/
│       ├── pending.vue
│       └── history.vue
│
├── api/                      # API封装(可复用Web端模式)
│   ├── request.js            # uni.request 封装(含JWT拦截器)
│   ├── change.js             # 变更管理API
│   ├── bom.js                # BOM API
│   ├── ai-agent.js           # AI助手API
│   ├── digital-staff.js      # 数字员工API
│   ├── system.js             # 系统API
│   └── miniapp.js            # 小程序专用API(登录/代理)
│
├── store/                    # Pinia Store
│   ├── user.js               # 用户状态(token, openid, 权限)
│   ├── change.js             # 变更状态
│   └── chat.js               # 对话状态
│
├── composables/              # 可复用逻辑(部分从Web端迁移)
│   ├── useRequest.js         # 请求hook
│   ├── usePagination.js      # 分页/infinite scroll hook
│   └── useChat.js            # 对话管理hook
│
├── components/               # 业务组件
│   ├── StatCard.vue          # 统计卡片
│   ├── ChangeCard.vue        # 变更卡片
│   ├── BomNode.vue           # BOM节点(递归组件)
│   ├── StaffCard.vue         # 数字员工状态卡片
│   ├── ChatBubble.vue        # 对话气泡
│   ├── QuickActions.vue      # 快捷指令按钮组
│   ├── EmptyState.vue        # 空状态组件
│   └── Skeleton.vue          # 骨架屏组件
│
├── utils/
│   ├── constants.js          # 常量定义
│   ├── formatters.js         # 格式化工具(复用Web端)
│   └── validators.js         # 校验工具
│
├── static/                   # 静态资源
│   ├── images/
│   └── icons/
│
├── App.vue
├── main.js
├── pages.json                # 页面路由配置
├── manifest.json             # 应用配置
├── uni.scss                  # 全局样式变量
└── package.json

7.3 可复用的Web端代码

| Web端文件 | 复用方式 | 复用内容 |

|-----------|----------|----------|

| src/composables/useRuleEngine.js | 部分迁移 | API调用逻辑、错误处理模式 |

| src/utils/SCSAI.js (safeStr等) | 直接复用 | 纯工具函数 |

| src/utils/rule-validator.js | 部分迁移 | 校验逻辑 |

| Store结构 | 参考设计 | Store模块划分 |


8. 开发路线图

Phase 1: MVP核心功能(4周)

目标:可用的小程序,覆盖最高频场景

| 周次 | 任务 | 产出 |

|------|------|------|

| W1 | 项目初始化 + 后端适配 | uni-app项目搭建、/api/miniapp/login、SCSAI代理、首页API |

| W2 | Tab1首页 + Tab4我的 | 首页卡片、快捷入口、个人中心、数字员工状态 |

| W3 | Tab2 AI助手 | 聊天界面、快捷指令、对话历史、LLM对接 |

| W4 | Tab3工作台(变更管理) | 变更列表、变更详情、审批操作、AI生成ECO |

Phase 1 交付功能

  • ✅ 微信登录
  • ✅ 首页数据概览
  • ✅ AI对话助手
  • ✅ 变更管理(查看+审批)
  • ✅ 数字员工状态查看
  • ✅ 个人中心

Phase 2: 增强功能(4周)

| 周次 | 任务 | 产出 |

|------|------|------|

| W5 | BOM结构查看 | BOM树形折叠查看、零件详情、搜索 |

| W6 | 供应商管理分包 | 供应商列表、供应商详情 |

| W7 | 消息通知 | 模板消息订阅、审批通知推送 |

| W8 | 审批中心 | 待审批列表、审批历史、批量审批 |

Phase 2 交付功能

  • ✅ BOM结构浏览
  • ✅ 全局搜索
  • ✅ 供应商查询
  • ✅ 消息推送通知
  • ✅ 审批工作流

Phase 3: 高级功能(4周)

| 周次 | 任务 | 产出 |

|------|------|------|

| W9 | AI自然语言创建对象 | 前端自组装AML + SCSAI代理提交 |

| W10 | 离线缓存 | 关键数据本地缓存、弱网降级 |

| W11 | 分享与协作 | 分享变更/BOM到微信群 |

| W12 | 性能优化 + 测试 | 分包优化、首屏加载、自动化测试 |

Phase 3 交付功能

  • ✅ AI创建PLM对象
  • ✅ 离线缓存
  • ✅ 分享到微信
  • ✅ 性能优化

9. 风险与注意事项

9.1 技术风险

风险影响缓解措施
SCSAI代理响应时间过长小程序超时(默认60s)异步模式 + 轮询;增加超时配置
LLM响应流式传输uni.request不支持SSE改为非流式模式(stream=false)
小程序包大小限制(2MB主包)功能受限分包加载;图片CDN化
sql.js在服务端内存占用多用户并发时内存增长已有Map缓存单例,问题可控

9.2 业务风险

风险影响缓解措施
微信审核不通过(PLM工具类)上线延迟准备完整的功能说明和测试账号
用户习惯差异使用率低保持Web端功能完整,小程序作为移动补充
数据安全PLM数据泄露微信登录+JWT双重认证;敏感数据脱敏

9.3 不做清单(明确边界)

  • 不做独立后端:必须复用现有 Node.js 后端
  • 不做离线编辑:小程序仅做查看和简单操作
  • 不做复杂表单:创建复杂对象仍建议用Web端
  • 不做数据导出:导出操作在Web端完成
  • 不做SCSAI直连:全部通过后端代理
  • 不做系统配置:规则引擎配置等管理功能仅在Web端

附录A:Web端功能 → 小程序适配评估表

Web端功能页面适配可行性优先级说明
AI对话助手AiWorkbench✅ 高P0核心功能,聊天式天然适合移动端
数字员工仪表盘DigitalStaff✅ 中P0简化Kanban为Tab切换
变更管理ChangeManagement✅ 高P0审批流程天然适合移动端
首页概览Dashboard✅ 高P0卡片式数据展示
BOM结构查看BomAssistant⚠️ 中P1需改造树形交互
产品列表ProductList⚠️ 低P2表格→卡片,数据量大时性能需关注
供应商管理VendorManagement✅ 中P1列表+详情模式
基础能力中心StaffCapabilities⚠️ 低P2仅保留Create简化版
规则模板管理RulesAndTemplates-管理功能,仅Web端
API文档ApiDocs-仅Web端
系统架构Architecture-仅Web端
客户管理CustomerManagement-低频,仅Web端
订单管理OrderManagement-低频,仅Web端
项目管理ProjectManagement-低频,仅Web端
文档中心DocumentCenter-文件操作受限
质量管理QualityManagement-低频,仅Web端
库存管理InventoryManagement-低频,仅Web端
工作流管理WorkflowManagement-管理功能,仅Web端
LLM配置LLMConfig-管理功能,仅Web端
飞书配置FeishuConfig-管理功能,仅Web端
系统日志SystemLog-管理功能,仅Web端
方法管理MethodManagement-管理功能,仅Web端
对象类管理ItemTypeManagement-管理功能,仅Web端
1688采购SupplierSourcing1688-低频,仅Web端

附录B:关键代码示例

B.1 小程序登录流程

// api/miniapp.js
export async function login() {
  // 1. 获取微信code
  const { code } = await uni.login({ provider: 'weixin' })
  
  // 2. 后端验证code,获取openid + JWT
  const res = await uni.request({
    url: `${BASE_URL}/api/miniapp/login`,
    method: 'POST',
    data: { code }
  })
  
  // 3. 存储token
  const { token, user } = res.data
  uni.setStorageSync('token', token)
  
  return user
}

B.2 SCSAI代理调用

// api/request.js — 封装的请求函数
export async function SCSAIProxy(action, params) {
  return request({
    url: '/api/miniapp/proxy/SCSAI',
    method: 'POST',
    data: {
      action,      // 'query' | 'create' | 'update'
      itemType: params.itemType,
      aml: params.aml,        // 对于create/update操作
      query: params.query     // 对于query操作
    }
  })
}

B.3 后端SCSAI代理实现(server.js新增)

// POST /api/miniapp/proxy/SCSAI
app.post('/api/miniapp/proxy/SCSAI', authenticateMiniapp, async (req, res) => {
  const { action, itemType, aml, query } = req.body
  
  try {
    // 复用现有SCSAI工具
    const SCSAITools = require('./server/utils/SCSAI-tools')
    
    let result
    switch (action) {
      case 'query':
        result = await SCSAITools.queryItems(itemType, query)
        break
      case 'create':
        result = await SCSAITools.applyAML(aml)
        break
      case 'update':
        result = await SCSAITools.applyAML(aml)
        break
      default:
        return res.status(400).json({ error: 'Unknown action' })
    }
    
    res.json({ success: true, data: result })
  } catch (err) {
    res.status(500).json({ error: err.message })
  }
})

B.4 小程序BOM树组件设计

<!-- components/BomNode.vue — 递归折叠组件 -->
<template>
  <view class="bom-node">
    <view class="bom-node-header" @tap="toggleExpand">
      <text class="expand-icon">{{ expanded ? '▼' : '▶' }}</text>
      <text class="item-number">{{ node.item_number }}</text>
      <text class="item-name">{{ node.name }}</text>
      <text class="quantity">x{{ node.quantity }}</text>
    </view>
    <view v-if="expanded && node.children" class="bom-node-children">
      <BomNode 
        v-for="child in node.children" 
        :key="child.id" 
        :node="child" 
      />
    </view>
  </view>
</template>

文档维护:本方案随小程序开发进展同步更新。Phase 1 完成后更新实际API路径和组件清单。

← 返回案例列表
分享:
🤖 Try Now →
🤖
🎁