@alanwang-merit/meritdata-platform-skill-package 1.0.9 → 1.0.11

package/skills/meritdata-platform-ui-components/SKILL.md

@@ -1,43 +1,71 @@
 ---
 name: meritdata-platform-ui-components
-description: |
-  平台 UI 组件库。人员选择器 / 组织树 / 字典下拉 / 上传组件 / 富文本 / 流程设计器。
-  触发场景：二开页面需要"选择人员" / "组织树" / "下拉字典项" / "文件上传" 等平台通用组件。
-  何时不用：纯通用组件（antd/element）→ 直接用 antd；纯业务组件（自定义表格）→ 业务自己封装。
+description: 平台前端组件库（CloudDialog/UserSelect/DeptSelect/RoleSelect/ImportButton/MenuAuth 等），仅处理 cloud-module-base 业务组件的具体使用，不涉及页面布局。
 metadata:
   version: "1.0.0"
-  author: petroleum+rd
-  source: petroleum+rd
-  date_added: "2026-09-07"
-  last_modified: "2026-09-07"
+  author: 技术平台部门架构组
+  source: company
+  date_added: "2026-09-01"
+  last_updated: "2026-09-01"
   risk: low
-  layer: L3
-  sub-layer: L3-F
-  stack: frontend
-allowed-tools: Read, Grep, Glob, Bash
+  allowed-tools: Read, Grep, Glob
 ---
 
-# 平台 UI 组件（ui-components）
-
-## 触发
-- 业务页面需要"选择人员" → UserPicker
-- 业务页面需要"组织树" → OrgTreeSelect
-- 业务页面需要"字典下拉" → LookupSelect
-- 业务页面需要"文件上传" → Upload
-- 业务页面需要"流程设计器" → BpmnDesigner
-
-## 不触发
-- 通用 UI 组件（Button/Table/Form）→ 直接用 antd
-- 业务特定组件（自定义表格）→ 业务自己封装
-- 前端部署 → 用 `meritdata-platform-frontend-deploy`
-
-## 前置约束
-- 平台组件基于 antd，二开**必须**复用平台组件而非自实现
-- 组件 props 必须与平台 API 一致（人员选择器接 userClient）
-- 组件主题样式遵循平台 design token
-
-## 路由
-- 组件清单 + 基础用法 → [references/guide.md](references/guide.md)
-- 业务组件封装示例 → [references/business-wrappers.md](references/business-wrappers.md)
-- 主题定制 + 国际化 → [references/theme-and-i18n.md](references/theme-and-i18n.md)
-- [SKILL.md](../SKILL.md)
+## ⭐ MUST DO
+
+**使用 cloud-module-base 提供的语义化组件，组件 props/events 沿用平台约定；禁止重复造轮子。**
+
+## 触发条件 / 不适用
+
+**适用**：
+- CloudDialog（业务对话框）
+- UserSelect / UserSelectMulti（人员选择）
+- DeptSelect（部门选择）
+- RoleSelect（角色选择）
+- ImportButton（导入按钮）
+- MenuAuth（菜单授权）
+- ResourceCodeAuth（资源码授权）
+
+**不适用**：
+- 页面级布局 → `meritdata-platform-frontend`
+- Vue 工程配置 → `meritdata-platform-frontend`
+
+## 主题路由
+
+| 任务 | 优先读取 |
+| --- | --- |
+
+## 工作方式（Step 1/2/3）
+
+### Step 1：识别组件需求
+
+- 需要选人/选部门/选角色 → UserSelect / DeptSelect / RoleSelect
+- 需要导入 Excel → ImportButton
+- 需要对话框 → CloudDialog
+
+### Step 2：参考组件目录
+
+从 `components-catalog.md` 找到组件的 props、events、slots。
+
+### Step 3：使用组件
+
+```vue
+<template>
+  <UserSelect v-model="selectedUser" :multiple="true" />
+</template>
+```
+
+## 🚨 常见错误
+
+| 错误 | 后果 | 正确做法 |
+| --- | --- | --- |
+| 重复实现选人组件 | 工作量浪费 | 使用 UserSelect |
+| 不传 props 导致默认值不符 | 组件异常 | 查阅 components-catalog.md |
+
+## 边界
+
+- **不在本 skill 范围的**：
+  - 页面布局 → `meritdata-platform-frontend`
+  - Vue 工程配置 → `meritdata-platform-frontend`
+  - 自定义组件（无 cloud-module-base 对应）
+- **强制要求**：能复用 cloud-module-base 组件的场景必须复用

package/skills/meritdata-platform-ui-components/agents/openai.yaml

@@ -0,0 +1,33 @@
+display_name: "MeritData 前端组件库"
+short_description: "cloud-module-base 业务组件（CloudDialog/UserSelect/DeptSelect 等）"
+default_prompt: |
+  meritdata-platform-ui-components 处理 cloud-module-base 业务组件。
+
+  适用场景：
+  - CloudDialog 业务对话框
+  - UserSelect / UserSelectMulti 人员选择
+  - DeptSelect 部门选择
+  - RoleSelect 角色选择
+  - ImportButton 导入按钮
+  - MenuAuth 菜单授权
+
+  使用方式：
+  ```
+  meritdata-platform-ui-components <组件使用需求>
+  ```
+
+  工作方式：
+  1. 识别组件需求（选人/选部门/对话框/导入）
+  2. 查阅 references/components-catalog.md 中的 props/events
+  3. 按 cloud-module-base 约定使用组件
+  4. 沿用现有项目的组件注册方式
+
+  references/components-catalog.md 提供：
+  - 组件 props 列表
+  - events 事件
+  - slots 插槽
+  - 使用示例
+
+  强制约束：
+  - 能复用 cloud-module-base 组件的场景必须复用
+  - 不重复造轮子（除非有明确理由）

package/skills/meritdata-platform-ui-components/references/components-api.md

@@ -0,0 +1,166 @@
+# 15 组件 API 速查（含 user-select-multi）
+
+## 选择器类（3）
+
+### UserSelect
+
+```vue
+<UserSelect
+  v-model="selectedIds"
+  :multiple="true"
+  :showDept="true"
+  :placeholder="'请选择审批人'"
+  @change="onChange"
+/>
+```
+
+| Prop | 类型 | 默认 |
+|------|------|------|
+| `v-model` | String / String[] | - |
+| `multiple` | Boolean | false |
+| `showDept` | Boolean | false |
+
+### DeptSelect / RoleSelect（同结构）
+
+## 弹框类（1）
+
+### CloudDialog
+
+```vue
+<CloudDialog
+  v-model="visible"
+  title="编辑合同"
+  width="800px"
+  @confirm="onConfirm"
+  @cancel="onCancel"
+>
+  <!-- 自定义内容 -->
+</CloudDialog>
+```
+
+## 选人弹框类（1）
+
+### UserSelectMulti（弹框式人员选择器，与 cloud-system-bpm 实际页面一致）
+
+```vue
+<user-select-multi
+  :dialogVisible.sync="visible"
+  :options="{
+    multiple: true,
+    showDept: true,
+    selectedUserIds: selectedIds,
+    excludeUserIds: excludeIds
+  }"
+  @dialog-save="onSave"
+  @dialog-cancel="onCancel"
+/>
+```
+
+| Prop | 类型 | 默认 | 说明 |
+|------|------|------|------|
+| dialogVisible | Boolean | false | 控制弹框显示（.sync 双向）|
+| options.multiple | Boolean | false | 是否多选 |
+| options.showDept | Boolean | true | 是否显示部门树 |
+| options.selectedUserIds | String[] | [] | 初始选中人员 ID |
+| options.excludeUserIds | String[] | [] | 排除的人员 ID |
+
+| Event | 说明 |
+|-------|------|
+| @dialog-save | 确认选择（回传选中的人员 ID 数组）|
+| @dialog-cancel | 取消选择 |
+
+> 与上文 UserSelect 的区别：UserSelect 是下拉嵌入式选择器，user-select-multi 是弹框式选择器。**实际项目中使用的是弹框版**（参考 references/catalog/15_五前端资产-5.1UI组件库-上半.md 与 cloud-system-bpm 实际页面一致）。两套 API 不能混用。
+
+## 按钮类（1）
+
+### ImportButton
+
+```vue
+<ImportButton
+  :template-code="'CONTRACT_IMPORT'"
+  :biz-type="'contract'"
+  @success="onImportSuccess"
+/>
+```
+
+## 授权类（3）
+
+### MenuAuth / ResourceCodeAuth / ThreeMemberAuth
+
+```vue
+<MenuAuth :menu-id="'contract_menu'" @change="onAuthChange" />
+<ResourceCodeAuth :resource-code="'contract_add'" />
+<ThreeMemberAuth :resource-code="'contract_admin'" />
+```
+
+## 表头 / 表格类（1）
+
+### TableHeadSearch
+
+```vue
+<el-table :data="list">
+  <el-table-column prop="name" label="姓名">
+    <template #header><TableHeadSearch field="name" v-model="searchForm" /></template>
+  </el-table-column>
+</el-table>
+```
+
+## 流程类（2）
+
+### BpmGridButtonsNew
+
+```vue
+<BpmGridButtonsNew
+  :proc-inst-id="procInstId"
+  :task-id="taskId"
+  @approve="onApprove"
+  @reject="onReject"
+/>
+```
+
+### BpmFormTools
+
+```vue
+<BpmFormTools
+  :form-data="formData"
+  :form-rules="rules"
+  :business-key="bizKey"
+/>
+```
+
+## 通用类（2）
+
+### CommonHeader
+
+```vue
+<CommonHeader :title="'合同管理'" :show-back="true" />
+```
+
+### VerifiyPassword（二次密码验证）
+
+```vue
+<VerifiyPassword
+  :visible.sync="verifyVisible"
+  @success="onVerified"
+/>
+```
+
+## 完整 14 组件
+
+| 组件 | 类别 |
+|------|------|
+| UserSelect | 选择器 |
+| DeptSelect | 选择器 |
+| RoleSelect | 选择器 |
+| CloudDialog | 弹框 |
+| ImportButton | 按钮 |
+| MenuAuth | 授权 |
+| ResourceCodeAuth | 授权 |
+| ThreeMemberAuth | 授权 |
+| TableHeadSearch | 表格 |
+| BpmGridButtonsNew | 流程 |
+| BpmFormTools | 流程 |
+| CommonHeader | 通用 |
+| VerifiyPassword | 通用 |
+| user-select-multi | 选人弹框 |
+| (platform 还有平台自带 el-dialog 扩展) | - |

package/skills/meritdata-platform-ui-components/references/utils-and-meritbpm.md

@@ -0,0 +1,98 @@
+# 6 工具函数 + MeritBPM 5 方法
+
+## 6 工具函数
+
+### sm4-utils.js（国密 SM4）
+
+```javascript
+import { sm4Encrypt, sm4Decrypt } from 'cloud-module-base/utils/sm4-utils'
+
+const cipher = sm4Encrypt('plaintext', '0123456789abcdef')
+const plain = sm4Decrypt(cipher, '0123456789abcdef')
+```
+
+### sm2.js（国密 SM2）
+
+```javascript
+import { sm2Encrypt, sm2Decrypt, sm2Sign, sm2Verify } from 'cloud-module-base/utils/sm2'
+
+const cipher = sm2Encrypt(plaintext, publicKey)
+const ok = sm2Verify(data, sign, publicKey)
+```
+
+### accessLogs.js（操作日志）
+
+```javascript
+import { logAccess } from 'cloud-module-base/utils/accessLogs'
+
+logAccess({ module: '合同管理', operation: '新增', result: 'SUCCESS' })
+```
+
+### dataFormat.js（数据格式化）
+
+```javascript
+import { dataFormat } from 'cloud-module-base/utils/dataFormat'
+
+dataFormat.date(new Date(), 'yyyy-MM-dd')
+dataFormat.money(1234567.89)  // "1,234,567.89"
+```
+
+### form-rules.js（表单校验）
+
+```javascript
+import formRules from 'cloud-module-base/utils/form-rules'
+
+export default {
+  rules: {
+    name: [formRules.required(), formRules.maxLength(50)],
+    phone: [formRules.phone()],
+    email: [formRules.email()]
+  }
+}
+```
+
+### globalValitor.js（全局校验）
+
+```javascript
+import { validator } from 'cloud-module-base/utils/globalValitor'
+
+validator.isIdCard('110101199001011234')  // true
+validator.isPhone('13812341234')          // true
+```
+
+## MeritBPM（5 方法）
+
+```javascript
+import { MeritBPM } from 'cloud-module-base/merit-bpm'
+
+// 1. 发起流程
+await MeritBPM.startProcess({
+  processKey: 'contract_approval',
+  businessKey: contractId,
+  variables: { amount: 100000 }
+})
+
+// 2. 完成任务
+await MeritBPM.complete({
+  taskId: task.id,
+  variables: { approved: true },
+  comment: '同意'
+})
+
+// 3. 待办列表
+const todoPage = await MeritBPM.getTodoPage({ page: 1, size: 20 })
+
+// 4. 流程意见
+const opinions = await MeritBPM.getOpinions({ procInstId })
+
+// 5. 流程图
+const graph = await MeritBPM.getGraphTrack({ procInstId })
+```
+
+| 方法 | 对应后端 BpmEngine |
+|------|------------------|
+| `startProcess` | `startProcess` |
+| `complete` | `complete` |
+| `getTodoPage` | `getUndoPage` |
+| `getOpinions` | `getOpinions` |
+| `getGraphTrack` | `getGraphTrack` |