SCSAI PLM 前端集成方案 — Shim 架构

概述

将 SCSAI agent PLM 的前端能力集成到任意 Web 应用中，无需加载 SCSAI 原生的 30+ 个 JS 文件（~2MB），只需一个 5KB 的存根（shim） + 一个 Node.js 代理路由。

架构

``

┌────────────────────────────────────────────────────────┐

│ 你的 Web 应用 │

│ │

│ Vue 视图 │

│ ┌─────────────────────┐ 直接调用 │

│ │ CustomerManagement │ ───→ window._bomService │

│ │ InventoryManagement │ ._SCSAIApiRequest() │

│ │ OrderManagement │ ↓ │

│ │ Dashboard │ fetch(/SCSAI-api/) │

│ └─────────────────────┘ ↓ │

│ ┌────────────────┐ │

│ index.html │ Node.js 服务端 │ │

│ ┌──────────────┐ │ (你的后端) │ │

│ │ SCSAI-shim │ │ │ │

│ │ (inline) │ │ /SCSAI-api/ │────→ SCSAI │

│ │ │ │ → agent │ Server │

│ │ Sciot 存根 │ │ Server.aspx │ │

│ │ MD5Util │ │ │ │

│ │ IomFactory │ │ AuthHeaders: │ │

│ │ CacheUtil │ │ AUTHUSER │ │

│ └──────┬───────┘ │ AUTHPASSWORD │ │

│ │ │ DATABASE │ │

│ ↓ └────────────────┘ │

│ index.js │

│ (SCSAIBomService) │

│ 4005行 · 保留不变 │

└────────────────────────────────────────────────────────┘

`

数据流

`

Vue 组件

→ window._bomService._SCSAIApiRequest('ApplyItem', aml)

→ fetch('/SCSAI-api/', {

method: 'POST',

headers: { AUTHUSER, AUTHPASSWORD (MD5), DATABASE },

body: aml

})

→ 你的 Node.js 服务端 /SCSAI-api/ 路由

→ http.request → http://SCSAI-server/agentServer.aspx

→ XML 响应

→ _parseAMLResponse() 解析为 JSON

→ 返回给 Vue 组件

`

整条链路不经过任何 SCSAI 浏览器端 JS 文件。

集成步骤（5 分钟）

1. 复制以下文件到你的项目

`

你的项目/

├── index.html # 入口（只需 4 个 script）

├── index.js # SCSAIBomService（4005 行，不动）

├── utils/

│ └── md5.js # MD5 哈希（242 行）

├── src/

│ ├── SCSAI-shim.js # Vue 模块加载的额外存根（后备）

│ └── main.js # import './SCSAI-shim.js'

└── server.js (或你的后端) # 需要 /SCSAI-api/ 代理路由

`

2. index.html 模板

`html

`

3. Node.js 服务端 — /SCSAI-api/ 代理

在你的后端（Express / Fastify / Node http）中添加：

`js

// /SCSAI-api/ 代理 — 转发 AML 到 SCSAI agentServer.aspx

app.post('/SCSAI-api/', async (req, res) => {

const username = req.headers['authuser'];

const password = req.headers['authpassword']; // MD5 哈希

const database = req.headers['database'] || 'SCPLM';

const aml = req.body;

const SCSAIUrl = new URL('https://ylxt.chat/scplm/server/agentServer.aspx');

const options = {

hostname: SCSAIUrl.hostname,

port: SCSAIUrl.port || 80,

path: SCSAIUrl.pathname,

method: 'POST',

headers: {

'Content-Type': 'text/xml',

'Content-Length': Buffer.byteLength(aml),

'SOAPAction': 'ApplyItem',

'AUTHUSER': username,

'AUTHPASSWORD': password,

'DATABASE': database

},

timeout: 30000

};

const proxyReq = http.request(options, (proxyRes) => {

let body = '';

proxyRes.on('data', chunk => body += chunk);

proxyRes.on('end', () => {

res.writeHead(proxyRes.statusCode, {

'Content-Type': 'text/xml; charset=UTF-8'

});

res.end(body);

});

});

proxyReq.on('error', (e) => {

res.status(500).json({ error: e.message });

});

proxyReq.write(aml);

proxyReq.end();

});

`

4. 前端登录流程

Vue 组件中调用登录：

`js

const credentials = {

username: 'root',

password: 'gyc123456;',

database: 'SCPLM',

serverUrl: 'https://ylxt.chat/scplm/server'

};

// 方式一：使用 SCSAIBomService（推荐）

const result = await window._bomService.login(credentials);

// 方式二：直接 AML 调用

const aml = '';

const data = await window._bomService._SCSAIApiRequest('ApplyItem', aml);

`

文件职责

原始文件 vs Shim 对照

关键约束

加载顺序（必须严格遵守）

`

1. utils/md5.js ← 提供 window.MD5Util
2. inline shim ← 提供 window.Sciot / IomFactory 等
3. index.js ← window.SCSAIBomSkill = new SCSAIBomService()
4. /src/main.js ← Vue 挂载（import SCSAI-shim.js 作为后备）

`

MD5 哈希必须与 SCSAI 兼容

SCSAI agent 使用 MD5 对密码进行哈希后通过 AUTHPASSWORD 头发送。必须使用与 utils/md5.js 一致的实现：

`js

// 正确（项目已验证）

MD5Util.hash('gyc123456;') === '0d1d076e1b9baa7a04f7ad9b315296f9'

// 错误（字节序不对的 MD5 会产生错误的哈希，认证会失败）

`

SCSAIBomService 不变

index.js 是一个 4005 行的自包含类，定义 window.SCSAIBomService 和 window.SCSAIBomSkill。不要修改它。它的 _ensureSciotMethods() 会在 Sciot.prototype 上补丁 login/getPassword/getLoginName 等方法，前提是 window.Sciot 已定义。

在数字员工平台中集成

推荐目录结构

`

数字员工平台项目/

├── plm/

│ ├── index.html # PLM 模块入口（含 inline shim）

│ ├── index.js # SCSAIBomService（从 bossagents 复制）

│ ├── utils/

│ │ └── md5.js # 从 bossagents 复制

│ ├── src/

│ │ ├── SCSAI-shim.js # 后备存根

│ │ ├── plm-router.js # PLM 相关路由

│ │ └── views/ # PLM 视图（CustomerManagement 等）

│ └── server/

│ └── SCSAI-proxy.js # /SCSAI-api/ 代理路由

├── digital-staff/ # 你现有的数字员工模块

└── package.json

`

PLM 功能清单（可复用的 Vue 视图）

| 视图 | SCSAI ItemType | 功能 |

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

| CustomerManagement.vue | Customer | 客户 CRUD |

| VendorManagement.vue | Vendor | 供应商 CRUD |

| OrderManagement.vue | Order | 订单 CRUD |

| InventoryManagement.vue | Inventory | 库存管理 |

| ChangeManagement.vue | ECR/ECO | 变更管理 |

| QualityManagement.vue | Quality | 质量管理 |

| ProjectManagement.vue | Project | 项目管理 |

| BomAssistant.vue | Part / BOM | BOM 对比、分析 |

| Dashboard.vue | 多类型 | 聚合看板 |

所有视图统一使用：

`js

const result = await window._bomService._SCSAIApiRequest('ApplyItem', aml);

`

排错

性能对比

| 指标 | 原生 SCSAI JS 加载 | Shim 方案 |

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

| HTML script 标签数 | 40 个 | 4 个 |

| JS 传输量 | ~2.1 MB | ~12 KB |

| 首屏阻塞时间 | 500-1500ms（同步 script 阻塞） | 几乎为 0 |

| 构建警告 | 40 条（Vite 无法处理非模块 script） | 0 或极小 |

| 可维护性 | 依赖 SCSAI 版本，升级困难 | 纯 JS 存根，可控 |