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

package/skills/meritdata-platform-frontend/SKILL.md

@@ -1,45 +1,80 @@
 ---
 name: meritdata-platform-frontend
-description: |
-  前端组件与工程。平台提供的 Vue/React 组件（人员弹框/部门树/字典下拉/资源选择）；前端工程结构、构建、路由、权限点接入、API 调用约定。
-  触发场景：新二开前端模块启动；引入平台 UI 组件；前端打包/部署。
-  何时不用：纯后端代码 → 用 code-spec；接口设计 → 用 rules/api-design-rules.md。
+description: 平台 Vue 2 页面、cloud-module-base 组件、BaseApi 请求和 Vue CLI/Webpack 代理。用于多页面路由与访问地址、Element UI 表单、CloudDialog/人员部门角色选择、页面工具模块、业务接口路径及网关代理配置。
 metadata:
   version: "1.0.0"
-  author: petroleum+rd
-  source: petroleum+rd
-  date_added: "2026-09-07"
-  last_modified: "2026-09-08"
+  author: 技术平台部门架构组
+  source: company
+  date_added: "2026-09-01"
+  last_updated: "2026-09-01"
   risk: low
-  layer: L2
-  sub-layer: L2-F
-  stack: frontend
-allowed-tools: Read, Grep, Glob, Bash
+  allowed-tools: Read, Grep, Glob
 ---
 
-# 前端组件与工程（frontend）
-
-## 触发
-- 新二开前端模块冷启动
-- 需要平台 UI 组件（人员弹框/部门树/字典下拉/资源树）
-- 前端权限点接入（按钮级/菜单级）
-- 前端 API 调用规范
-- **前端多服务 HTTP 客户端**（业务 + 人员 + BPM + 附件跨 service 调用）🆕 v2.6.0
-
-## 不触发
-- 纯后端代码 → 用 `meritdata-platform-code-spec`
-- REST API 设计 → 用 `rules/api-design-rules.md`
-- 前端部署/Docker → L3 部署（待建）
-- 对外 WebApi（外部系统调平台）→ 用 `meritdata-platform-data-access/references/outbound/webapi.md`
-
-## 前置约束
-- URL 必须遵守 [rules/api-design-rules.md](../../rules/api-design-rules.md)（复数/小写/连字符）
-- 响应包装 `{ code, data, message }`
-- 组件按需引入，不全量打包
-- **HTTP 客户端必须用平台 plugin**（`@cloud-module-base/httpConfig/http-plugin`），禁止自建 axios / `Axios.defaults.headers.*`（v2.6.0 新增）
-
-## 路由
-- 平台组件清单 + props → [references/components.md](references/components.md)
-- 工程结构 + 路由约定 → [references/project-structure.md](references/project-structure.md)
-- 权限点接入 + API 调用 → [references/auth-and-api.md](references/auth-and-api.md)
-- **前端多服务 HTTP 客户端**（registry / plugin / 路径 / 验收）🆕 → [references/http-client/INDEX.md](references/http-client/INDEX.md)
+## ⭐ MUST DO
+
+**默认按平台形态生成或修改：Vue CLI 多页面工程、Vue 2、Element UI、cloud-module-base，不默认创建 Vite/Vue 3 项目。**
+
+## 触发条件 / 不适用
+
+**适用**：
+- Vue 2 + Element UI + `cloud-module-base` 页面开发
+- `CloudDialog` / `UserSelect` / `DeptSelect` / `RoleSelect` 等业务组件
+- 网关代理配置
+- 页面访问地址
+
+**不适用**：
+- 后端 API → `meritdata-platform-integration`
+- Vue 3 / Vite 项目（不兼容）
+
+## 主题路由
+
+| 任务 | 优先读取 |
+| --- | --- |
+| Vue CLI 多页面工程、页面路由与访问地址 | 本文件"标准前端工程规则" |
+| BaseApi 业务请求、Vue CLI/Webpack 网关代理 | 本文件"前后端联调规则" |
+| CloudDialog、UserSelect、UserSelectMulti、DeptSelect、RoleSelect、ImportButton、MenuAuth、ResourceCodeAuth、ThreeMemberAuth、TableHeadSearch、VerifiyPassword、CommonHeader | [`references/components.md`](references/components.md) |
+| 日期、表单校验、防重复点击和访问审计工具 | [`references/utils.md`](references/utils.md) |
+
+## 工作方式（Step 1/2/3/4）
+
+### Step 1：确认目标工程形态
+
+- 美林开发平台前端优先按平台默认形态生成或修改
+- 不要默认创建 Vite/Vue 3 项目
+- 标准技术栈：Vue CLI 4、Vue 2、Vue Router 3、Vuex 3、Element UI、`cloud-module-base`
+
+### Step 2：读取 reference
+
+按主题路由读取 components.md 和 utils.md。
+
+### Step 3：标准前端工程规则
+
+- `vue.config.js` 中的 `outputDir` 是前端部署包名，记为 `{frontPackage}`
+- `vue.config.js` 中的 `pages` 定义多页面入口；每个 page 的 `filename` 决定页面 HTML 路径，记为 `{pageFilename}`
+- 页面访问地址：`/{frontPackage}/{pageFilename}#/{routePath}`
+- `{routePath}` 来自 Vue Router 配置
+
+### Step 4：前后端联调
+
+- 前端默认经网关访问业务服务
+- 路径拆成五段：`gatewayOrigin` / `gatewayPrefix` / `serviceName` / `contextPath` / `controllerPath`
+- 完整路径：`{gatewayOrigin}{gatewayPrefix}/{serviceName}{contextPath}{controllerPath}`
+- 代理的 `target` 仅为 `gatewayOrigin`，请求保留 `gatewayPrefix`
+
+## 🚨 常见错误
+
+| 错误 | 后果 | 正确做法 |
+| --- | --- | --- |
+| 默认创建 Vite/Vue 3 项目 | 与平台不一致 | 强制 Vue CLI + Vue 2 |
+| 直连服务端口 | 绕过网关 | 经 gatewayProxy |
+| 凭据写在示例 | 安全风险 | 占位符 + 配置中心 |
+| 不核对 gatewayPrefix 重复 | 请求失败 | 五段路径逐一核验 |
+
+## 边界
+
+- **不在本 skill 范围的**：
+  - 后端代码 → `meritdata-platform-cloud-dev`
+  - 开放接口 → `meritdata-platform-integration`
+  - BPM 组件 → `meritdata-platform-bpm`
+- **强制要求**：使用 Vue 2.6 + Element UI + cloud-module-base

package/skills/meritdata-platform-frontend/agents/openai.yaml

@@ -0,0 +1,31 @@
+display_name: "MeritData 平台前端"
+short_description: "Vue 2 + Element UI + cloud-module-base 平台前端工程"
+default_prompt: |
+  meritdata-platform-frontend 处理 MeritData 平台前端工程。
+
+  适用场景：
+  - Vue 2.6 + Element UI 页面开发
+  - Vue CLI 多页面工程（outputDir / pages / filename）
+  - cloud-module-base 业务组件（CloudDialog/UserSelect/DeptSelect/RoleSelect/ImportButton）
+  - BaseApi 网关代理（五段路径）
+
+  使用方式：
+  ```
+  meritdata-platform-frontend <前端需求>
+  ```
+
+  工作方式：
+  1. 确认目标项目为 Vue CLI + Vue 2 工程
+  2. 识别页面访问地址 = /{frontPackage}/{pageFilename}#/{routePath}
+  3. 按主题路由读取 references/ 中的 components.md 和 utils.md
+  4. 联调时按五段路径（gatewayOrigin/gatewayPrefix/serviceName/contextPath/controllerPath）拼接
+  5. 沿用现有 import、props、events、i18n、异常处理风格
+
+  2 个 references：
+  - components.md（CloudDialog/UserSelect 等 12 个组件）
+  - utils.md（日期/校验/防重复点击/审计）
+
+  强制约束：
+  - 不默认创建 Vite/Vue 3 项目
+  - 凭据必须通过配置中心
+  - 沿用项目现有 Vue 版本、组件注册方式、vue.config.js

package/skills/meritdata-platform-frontend/examples/user-list-page/README.md

@@ -0,0 +1,331 @@
+# Frontend 示例：用户列表页面
+
+## 场景
+
+基于 Vue 2 + Element UI + cloud-module-base 实现用户列表页面。
+
+## 用户输入
+
+```text
+$meritdata-platform-frontend 做一个人事管理页面，包含列表、新增、编辑、删除、人员选择器
+```
+
+## 完整页面结构
+
+```
+src/pages/user-list/
+├── main.js               ← 入口
+├── App.vue               ← 根组件
+├── router.js             ← 路由
+├── store/                ← Vuex
+│   ├── index.js
+│   └── modules/user.js
+├── views/
+│   ├── UserList.vue      ← 列表页
+│   └── UserEditDialog.vue ← 编辑对话框
+├── api/
+│   └── user.js           ← BaseApi 封装
+├── components/
+│   └── UserSearchForm.vue
+└── i18n.js               ← 国际化
+```
+
+## 完整代码示例
+
+### 1. main.js（页面入口）
+
+```javascript
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import i18n from './i18n'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  i18n,
+  render: h => h(App)
+}).$mount('#app')
+```
+
+### 2. router.js（页面路由）
+
+```javascript
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import UserList from './views/UserList.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  { path: '/index', component: UserList }
+]
+
+export default new VueRouter({
+  mode: 'hash',
+  routes
+})
+```
+
+### 3. api/user.js（BaseApi 封装）
+
+```javascript
+import BaseApi from '@/http-config/http'
+
+export function listUsers(params) {
+  return BaseApi.get('/meritdata-platform-user{contextPath}/api/users', params)
+}
+
+export function createUser(data) {
+  return BaseApi.post('/meritdata-platform-user{contextPath}/api/users', data)
+}
+
+export function updateUser(id, data) {
+  return BaseApi.put(`/meritdata-platform-user{contextPath}/api/users/${id}`, data)
+}
+
+export function deleteUser(id) {
+  return BaseApi.delete(`/meritdata-platform-user{contextPath}/api/users/${id}`)
+}
+```
+
+### 4. views/UserList.vue（列表页）
+
+```vue
+<template>
+  <div class="user-list">
+    <UserSearchForm v-model="searchParams" @search="handleSearch" />
+
+    <el-button type="primary" @click="handleCreate">
+      <i class="el-icon-plus"></i> 新增用户
+    </el-button>
+
+    <el-table :data="users" v-loading="loading" border>
+      <el-table-column prop="name" label="姓名" />
+      <el-table-column prop="deptName" label="部门">
+        <template slot-scope="scope">
+          <DeptSelect :value="scope.row.deptId" readonly />
+        </template>
+      </el-table-column>
+      <el-table-column prop="roleNames" label="角色">
+        <template slot-scope="scope">
+          <RoleSelect :value="scope.row.roleIds" :multiple="true" readonly />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :current-page.sync="pagination.page"
+      :page-size.sync="pagination.size"
+      :total="pagination.total"
+      @current-change="loadUsers" />
+
+    <UserEditDialog
+      v-if="dialogVisible"
+      :user="editingUser"
+      :visible.sync="dialogVisible"
+      @saved="handleSaved" />
+  </div>
+</template>
+
+<script>
+import { listUsers, createUser, updateUser, deleteUser } from '../api/user'
+import UserSearchForm from '../components/UserSearchForm.vue'
+import UserEditDialog from './UserEditDialog.vue'
+
+export default {
+  components: { UserSearchForm, UserEditDialog },
+
+  data() {
+    return {
+      searchParams: {},
+      users: [],
+      loading: false,
+      pagination: { page: 1, size: 20, total: 0 },
+      dialogVisible: false,
+      editingUser: null
+    }
+  },
+
+  mounted() {
+    this.loadUsers()
+  },
+
+  methods: {
+    async loadUsers() {
+      this.loading = true
+      try {
+        const result = await listUsers({
+          ...this.searchParams,
+          page: this.pagination.page,
+          size: this.pagination.size
+        })
+        if (result.code === 200) {
+          this.users = result.data.records
+          this.pagination.total = result.data.total
+        }
+      } finally {
+        this.loading = false
+      }
+    },
+
+    handleSearch() {
+      this.pagination.page = 1
+      this.loadUsers()
+    },
+
+    handleCreate() {
+      this.editingUser = null
+      this.dialogVisible = true
+    },
+
+    handleEdit(user) {
+      this.editingUser = user
+      this.dialogVisible = true
+    },
+
+    async handleDelete(user) {
+      await this.$confirm('确定删除吗？', '提示')
+      const result = await deleteUser(user.id)
+      if (result.code === 200) {
+        this.$message.success('删除成功')
+        this.loadUsers()
+      }
+    },
+
+    handleSaved() {
+      this.dialogVisible = false
+      this.loadUsers()
+    }
+  }
+}
+</script>
+```
+
+### 5. views/UserEditDialog.vue（编辑对话框）
+
+```vue
+<template>
+  <CloudDialog
+    :title="user ? '编辑用户' : '新增用户'"
+    :visible.sync="visible"
+    @confirm="handleSubmit">
+
+    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+      <el-form-item label="姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+
+      <el-form-item label="部门" prop="deptId">
+        <DeptSelect v-model="form.deptId" />
+      </el-form-item>
+
+      <el-form-item label="角色" prop="roleIds">
+        <RoleSelect v-model="form.roleIds" :multiple="true" />
+      </el-form-item>
+
+      <el-form-item label="负责人" prop="managerId">
+        <UserSelect v-model="form.managerId" />
+      </el-form-item>
+
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" :rows="3" />
+      </el-form-item>
+    </el-form>
+  </CloudDialog>
+</template>
+
+<script>
+import { createUser, updateUser } from '../api/user'
+
+export default {
+  props: ['user', 'visible'],
+
+  data() {
+    return {
+      form: {
+        name: '',
+        deptId: null,
+        roleIds: [],
+        managerId: null,
+        remark: ''
+      },
+      rules: {
+        name: [{ required: true, message: '请输入姓名' }],
+        deptId: [{ required: true, message: '请选择部门' }],
+        roleIds: [{ required: true, type: 'array', min: 1, message: '请选择角色' }]
+      }
+    }
+  },
+
+  watch: {
+    user(val) {
+      if (val) {
+        this.form = { ...val }
+      } else {
+        this.form = {
+          name: '',
+          deptId: null,
+          roleIds: [],
+          managerId: null,
+          remark: ''
+        }
+      }
+    },
+
+    visible(val) {
+      this.$emit('update:visible', val)
+    }
+  },
+
+  methods: {
+    async handleSubmit() {
+      await this.$refs.form.validate()
+
+      const action = this.user ? updateUser : createUser
+      const args = this.user ? [this.user.id, this.form] : [this.form]
+
+      const result = await action(...args)
+      if (result.code === 200) {
+        this.$message.success(this.user ? '更新成功' : '创建成功')
+        this.$emit('saved')
+      } else {
+        this.$message.error(result.message)
+      }
+    }
+  }
+}
+</script>
+```
+
+## 关键决策
+
+1. **使用 cloud-module-base 组件**：UserSelect / DeptSelect / RoleSelect
+2. **使用 BaseApi 封装请求**：遵循五段路径规则
+3. **使用 CloudDialog 替代自定义 Dialog**：语义化组件
+4. **不使用 Vite**：Vue CLI 多页面架构
+
+## 页面访问地址
+
+```
+http://gateway/{frontPackage}/user-list/#/index
+```
+
+- `frontPackage`：vue.config.js 中的 outputDir
+- `user-list`：pages.user-list.filename
+- `index`：Vue Router path
+
+## 相关 References
+
+- [`components.md`](../../references/components.md)（12 个 cloud-module-base 组件）
+- [`utils.md`](../../references/utils.md)（日期/校验/防重复点击工具）
+- Excel 导入导出 → 参考公司其他 `meritdata-platform-*` skill