init: 数字员工平台初始代码

包含前端(Vue3 + VueFlow 画布)、后端(Go)、文档体系。
- 工作台画布:节点拖放、连线模式、右键菜单、AI 助手
- 后端:连接器 API、专员种子数据
- 导航:左侧导航、工坊、市场、控制台
This commit is contained in:
eaiadmin
2026-08-18 20:19:58 +08:00
commit 4e8817d768
239 changed files with 48631 additions and 0 deletions
+379
View File
@@ -0,0 +1,379 @@
# PL01 — 全局布局设计
> **版本:V1.1 | 左导航 + 中间工作区 + 右 AI 侧栏 | Vue3 + Element Plus**
> **参考:pj006-zhilianyuan2 frontend-orgadmin 三栏布局模式**
---
## 1. 布局结构
全站统一三栏布局:
```
┌──────┬───────────────────────────────────────┬────────────────┐
│ 导航 │ │ │
│ ───── │ 主工作区 │ AI PathCoach │
│ 🏠 │ │ ──────────── │
│ 首页 │ <router-view /> │ 你好,我是 │
│ │ │ PathCoach... │
│ 📄 │ │ │
│ 公司 │ │ ┌──────────┐ │
│ 介绍 │ │ │ 输入消息 │ │
│ │ │ └──────────┘ │
│ 📦 │ │ │
│ 产品 │ │ [情景演练] │
│ 知识 │ │ [查佣金] │
│ │ │ [产品对比] │
│ 🎯 │ │ │
│ 销售 │ │ │
│ 培训 │ │ │
│ │ │ │
│ 📝 │ │ │
│ 考试 │ │ │
│ ├ 自测│ │ │
│ ├ 正式│ │ │
│ ├ 记录│ │ │
│ ├ 题库│ │ │ ← admin only
│ │ │ │
│ ⚙️ │ │ │ ← admin only
│ 知识 │ │ │
│ 管理 │ │ │
│ ├ 素材│ │ │
│ ├ 审批│ │ │
│ │ │ │
│ 🔧 │ │ │ ← admin only
│ 系统 │ │ │
│ 管理 │ │ │
│ ├ 用户│ │ │
│ ├ 成绩│ │ │
│ ├ 配置│ │ │
└──────┴───────────────────────────────────────┴────────────────┘
```
收起 AI 面板状态:
```
┌──────┬─────────────────────────────────────────────────────────┐
│ 导航 │ │
│ │ 主工作区(占满剩余宽度) │
│ │ │
│ │ [🤖 展开AI] │
└──────┴─────────────────────────────────────────────────────────┘
```
## 2. 组件树
```
App.vue
└── MainLayout.vue
├── SideNav.vue # 左边导航栏
│ ├── logo + 品牌名 # 顶部品牌标识
│ ├── NavMenu.vue # el-menu 纵向导航
│ │ ├── employee-menus # 员工可见菜单 × 5
│ │ │ ├── 首页 → /
│ │ │ ├── 公司介绍培训 → /company-train
│ │ │ ├── 产品知识 → /products
│ │ │ ├── 产品销售培训 → /courses
│ │ │ └── 考试(展开项) → /exam/*
│ │ └── admin-menus (v-if) # 管理员专属菜单 × 2
│ │ ├── 知识管理(展开项) → /knowledge/*
│ │ └── 系统管理(展开项) → /system/*
│ └── user-info # 底部用户信息
│ ├── full_name
│ └── [退出]
│
├── <router-view /> # 中间主内容区
│ ├── HomeView.vue
│ ├── CompanyTrainView.vue
│ ├── ProductList/Detail.vue
│ ├── CourseList/Detail.vue
│ ├── ExamSelfTest/Formal/MyRecord/QuestionBank.vue
│ ├── MaterialManage/AuditList.vue (admin)
│ ├── UserManage/ExamRecordManage/SystemConfig.vue (admin)
│ └── Login.vue # 独立全屏,不含布局
│
└── PathCoachPanel.vue # 右侧 AI 侧栏
├── ChatHeader # (标题 + 收起按钮)
├── ChatMessages # (消息列表,流式渲染)
├── ChatInput # (输入框 + 发送)
└── QuickActions # (3个快捷按钮)
```
## 3. 组件职责与模板
### MainLayout.vue
```vue
<template>
<div class="app-layout">
<SideNav />
<div class="main-container">
<div class="content-area">
<router-view />
</div>
<PathCoachPanel v-if="aiChatStore.visible" />
</div>
</div>
</template>
```
### SideNav.vue
```vue
<template>
<aside class="side-nav">
<!-- 品牌 -->
<div class="side-nav__brand">
<span class="brand-text">博昇培训</span>
</div>
<!-- 导航菜单 -->
<el-menu :default-active="route.path" :router="true" class="side-nav__menu">
<!-- 员工通用菜单 -->
<el-menu-item index="/">
<el-icon><HomeFilled /></el-icon><span>首页</span>
</el-menu-item>
<el-menu-item index="/company-train">
<el-icon><Reading /></el-icon><span>公司介绍培训</span>
</el-menu-item>
<el-menu-item index="/products">
<el-icon><Goods /></el-icon><span>产品知识</span>
</el-menu-item>
<el-menu-item index="/courses">
<el-icon><Notebook /></el-icon><span>产品销售培训</span>
</el-menu-item>
<el-sub-menu index="exam">
<template #title>
<el-icon><EditPen /></el-icon><span>考试</span>
</template>
<el-menu-item index="/exam/self-test">自测练习</el-menu-item>
<el-menu-item index="/exam/formal">正式结业考试</el-menu-item>
<el-menu-item index="/exam/my-records">我的考试记录</el-menu-item>
<el-menu-item v-if="isAdmin" index="/exam/questions">题库管理</el-menu-item>
</el-sub-menu>
<!-- 管理员专属菜单 -->
<template v-if="isAdmin">
<el-divider />
<el-sub-menu index="knowledge">
<template #title>
<el-icon><Collection /></el-icon><span>知识管理</span>
</template>
<el-menu-item index="/knowledge/materials">课件素材管理</el-menu-item>
<el-menu-item index="/knowledge/audit">素材审批列表</el-menu-item>
</el-sub-menu>
<el-sub-menu index="system">
<template #title>
<el-icon><Setting /></el-icon><span>系统管理</span>
</template>
<el-menu-item index="/system/users">用户账号管理</el-menu-item>
<el-menu-item index="/system/exam-records">全部考试成绩</el-menu-item>
<el-menu-item index="/system/config">系统参数配置</el-menu-item>
</el-sub-menu>
</template>
</el-menu>
<!-- 底部用户信息 -->
<div class="side-nav__footer">
<el-divider />
<div class="user-info">
<span>{{ user.full_name }}</span>
<el-button text type="primary" @click="logout">退出</el-button>
</div>
</div>
</aside>
</template>
```
### PathCoachPanel.vue
```vue
<template>
<div class="ai-panel">
<div class="ai-header">
<span class="ai-title">🤖 PathCoach</span>
<el-button text @click="aiChatStore.toggle()">✕</el-button>
</div>
<div class="ai-messages" ref="messageList">
<div v-for="msg in messages" :key="msg.id"
:class="['message', msg.role]">
<div class="bubble">{{ msg.content }}</div>
</div>
</div>
<div class="ai-input">
<el-input v-model="inputText" placeholder="向 PathCoach 提问..."
@keyup.enter="sendMessage" />
<el-button type="primary" @click="sendMessage">发送</el-button>
</div>
<div class="ai-quick-actions">
<el-button size="small" @click="quickAction('scenario')">客户情景演练</el-button>
<el-button size="small" @click="quickAction('commission')">查询佣金/规则</el-button>
<el-button size="small" @click="quickAction('compare')">产品对比</el-button>
</div>
</div>
</template>
```
## 4. 布局样式
```css
/* ========== 外层容器 ========== */
.app-layout {
height: 100vh;
display: flex;
}
/* ========== 左边导航 ========== */
.side-nav {
width: 220px;
min-width: 220px;
background: #fff;
border-right: 1px solid #e4e7ed;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.side-nav__brand {
height: 60px;
display: flex;
align-items: center;
padding: 0 20px;
border-bottom: 1px solid #e4e7ed;
}
.brand-text {
font-size: 18px;
font-weight: 700;
color: #1677ff;
}
.side-nav__menu {
flex: 1;
border-right: none !important;
}
.side-nav__footer {
padding: 12px 16px;
}
.user-info {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #606266;
}
/* ========== 中间容器 ========== */
.main-container {
flex: 1;
display: flex;
overflow: hidden;
}
.content-area {
flex: 1;
overflow-y: auto;
padding: 24px;
background: #f5f7fa;
}
/* ========== AI 面板 ========== */
.ai-panel {
width: 360px;
min-width: 360px;
border-left: 1px solid #e4e7ed;
display: flex;
flex-direction: column;
background: #fff;
}
.ai-header {
padding: 14px 16px;
border-bottom: 1px solid #e4e7ed;
display: flex;
justify-content: space-between;
align-items: center;
}
.ai-title {
font-weight: 600;
font-size: 15px;
}
.ai-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.ai-messages .message {
margin-bottom: 12px;
}
.ai-messages .message.user {
text-align: right;
}
.ai-messages .message.user .bubble {
display: inline-block;
background: #1677ff;
color: #fff;
border-radius: 8px 8px 0 8px;
padding: 8px 14px;
max-width: 80%;
text-align: left;
}
.ai-messages .message.assistant .bubble {
display: inline-block;
background: #f5f7fa;
color: #303133;
border-radius: 8px 8px 8px 0;
padding: 8px 14px;
max-width: 80%;
}
.ai-input {
padding: 12px 16px;
border-top: 1px solid #e4e7ed;
display: flex;
gap: 8px;
}
.ai-quick-actions {
padding: 8px 16px 12px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.ai-quick-actions .el-button {
font-size: 12px;
}
/* ========== 展开 AI 按钮(收起时显示) ========== */
.ai-trigger {
position: fixed;
right: 0;
bottom: 80px;
z-index: 100;
padding: 8px 12px;
background: #1677ff;
color: #fff;
border-radius: 4px 0 0 4px;
cursor: pointer;
font-size: 13px;
}
```
## 5. 响应式说明
- 左边导航固定 **220px**,不响应
- AI 面板固定 **360px**,可收起(收起后主内容区占满)
- 主内容区自适应剩余宽度,最小宽度 800px
- 登录页独立全屏,不包含此布局
@@ -0,0 +1,266 @@
# PL02 — 员工端视图设计
> **版本:V1.1 | 框架:Vue3 + Element Plus**
---
## 1. 首页(HomeView.vue)
```
┌─────────────────────────────────────────┐
│ 欢迎回来,张三 │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 公司介绍 │ │ 产品知识 │ │ 销售培训 │ │
│ │ 培训 │ │ 手册 │ │ 课程 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ ┌─────────────────────────────────────┐│
│ │ 最新培训通知 / 快捷入口 ││
│ │ • 点击进入公司介绍培训 ││
│ │ • 查看最新产品手册更新 ││
│ │ • 进入自测练习 ││
│ └─────────────────────────────────────┘│
└─────────────────────────────────────────┘
```
## 2. 公司介绍培训(CompanyTrainView.vue)
```
┌─────────────────────────────────────────┐
│ 公司介绍培训 │
│ │
│ ┌─────────────────────────────────────┐│
│ │ [纯阅读内容区域] ││
│ │ 企业简介 (HTML/富文本) ││
│ │ 双主营业务介绍 ││
│ │ 对外统一口径 ││
│ └─────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────┐│
│ │ 相关课件 ││
│ │ [公司简介.pptx] [公司宣传.mp4] ││
│ │ [点击预览] ││
│ └─────────────────────────────────────┘│
│ │
│ [提交素材建议] │
└─────────────────────────────────────────┘
```
**素材建议弹窗(MaterialSuggestUpload.vue):**
```vue
<el-dialog title="提交素材建议" v-model="visible">
<el-form>
<el-form-item label="文件">
<el-upload :action="uploadUrl" ... />
</el-form-item>
<el-form-item label="备注说明">
<el-input type="textarea" v-model="remark" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="visible=false">取消</el-button>
<el-button type="primary" @click="submit">提交</el-button>
</template>
</el-dialog>
```
## 3. 产品知识(ProductView.vue)
### 产品列表
```
┌─────────────────────────────────────────┐
│ 产品知识 │
│ │
│ [全部] [资本咨询类] [资质认定] [AI...] │ ← 分类标签页
│ │
│ ┌─────────────────────────────────────┐│
│ │ 产品卡片1 ││
│ │ 编号:ZQ-001 ││
│ │ 名称:资本运作咨询服务 ││
│ │ 标签:资本咨询 / 战略 ││
│ │ [查看详情] [前往培训课程] [向AI提问] ││
│ ├─────────────────────────────────────┤│
│ │ 产品卡片2 ││
│ │ ... ││
│ └─────────────────────────────────────┘│
└─────────────────────────────────────────┘
```
### 产品详情
```
┌─────────────────────────────────────────┐
│ 资本运作咨询服务 │
│ 编号:ZQ-001 分类:资本咨询类 │
│ 标签:资本咨询 / 战略 │
│ │
│ ┌─────────────────────────────────────┐│
│ │ 业务内容说明 ││
│ │ 为企业提供资本运作全流程咨询服务... ││
│ └─────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────┐│
│ │ 收费结构 ││
│ │ 基础咨询费 ¥XXX + 成功佣金 XX% ││
│ └─────────────────────────────────────┘│
│ │
│ ┌──────┬──────────────────────────────┐│
│ │ 佣金 │ 推荐:XX% 谈单参与:XX% ││
│ │ │ ⚠️ 公开课超额分成:XX% ││
│ └──────┴──────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────┐│
│ │ 版本风险:... ││
│ │ 报备规则:... ││
│ └─────────────────────────────────────┘│
│ │
│ [前往对应销售培训课程] [向 AI 提问] │
└─────────────────────────────────────────┘
```
## 4. 产品销售培训(CourseView.vue)
### 课程列表
```
┌─────────────────────────────────────────┐
│ 产品销售培训 │
│ │
│ [全部] [资本话术] [资质逻辑] [AI技巧] │ ← 分类标签页
│ │
│ ┌─────────────────────────────────────┐│
│ │ 课程卡片1:资本产品谈单话术 ││
│ │ 关联产品:资本运作咨询服务 ││
│ │ [查看详情] [查看对应产品] ││
│ ├─────────────────────────────────────┤│
│ │ 课程卡片2:资质辅导销售逻辑 ││
│ │ ... ││
│ └─────────────────────────────────────┘│
└─────────────────────────────────────────┘
```
### 课程详情
```
┌─────────────────────────────────────────┐
│ 资本产品谈单话术 │
│ 关联产品:资本运作咨询服务 │
│ │
│ ┌─────────────────────────────────────┐│
│ │ 适配客户 & 禁接客户 ││
│ │ 适配:... 禁接:... ││
│ └─────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────┐│
│ │ 标准话术 ││
│ │ (HTML/富文本内容) ││
│ └─────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────┐│
│ │ 谈单流程 ││
│ └─────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────┐│
│ │ 异议处理 ││
│ └─────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────┐│
│ │ 交付避坑 / 报备规范 ││
│ └─────────────────────────────────────┘│
│ │
│ [查看对应产品] │
└─────────────────────────────────────────┘
```
## 5. 考试(ExamView.vue)
### 自测练习(ExamSelfTest.vue)
```
┌─────────────────────────────────────────┐
│ 自测练习 │
│ │
│ ┌─────────────────────────────────────┐│
│ │ 选择考试配置 → 随机抽题 ││
│ │ [开始自测] ││
│ └─────────────────────────────────────┘│
│ │
│ (答题界面) │
│ ┌─────────────────────────────────────┐│
│ │ 第1题(单选题) ││
│ │ 博昇的主营业务包括? ││
│ │ ○ 资本咨询 ○ AI产业落地 ││
│ │ ○ 房地产 ○ 以上都是 ││
│ │ ││
│ │ ✅ 答案:D ││ ← 即时显示
│ │ 解析:博昇双主营业务... ││
│ └─────────────────────────────────────┘│
│ │
│ [上一题] [下一题] [交卷] │
└─────────────────────────────────────────┘
```
### 正式结业考试(ExamFormal.vue)
```
┌─────────────────────────────────────────┐
│ 正式结业考试 │
│ │
│ ┌─────────────────────────────────────┐│
│ │ 考试封面 ││
│ │ 考试名称:公司介绍正式考试 ││
│ │ 题量:20题 时长:30分钟 ││
│ │ 合格线:60分 ││
│ │ ││
│ │ [开始考试] ││
│ └─────────────────────────────────────┘│
│ │
│ (答题界面 — 计时器倒计时) │
│ ┌─────────────────────────────────────┐│
│ │ 剩余时间:25:30 ││
│ │ ││
│ │ 第1题(判断题) ││
│ │ 博昇同时从事资本咨询和AI产业落地。 ││
│ │ ○ 正确 ○ 错误 ││
│ │ ││
│ │ 题号导航: ││
│ │ [1] [2] [3] ... [20] ││
│ └─────────────────────────────────────┘│
│ │
│ [上一题] [下一题] [交卷] │
└─────────────────────────────────────────┘
```
### 交卷结果
```
正式考试交卷后:
┌─────────────────────────────────────────┐
│ 考试结果 │
│ 考试名称:公司介绍正式考试 │
│ 得分:85 / 100 是否通过:✅ 通过 │
│ 答对:17题 答错:3题 │
│ │
│ ┌─────────────────────────────────────┐│
│ │ 答题明细 ││
│ │ 第1题 ✅ 正确答案:D ││
│ │ 第2题 ❌ 你的答案:A 正确答案:C ││
│ │ ... ││
│ └─────────────────────────────────────┘│
│ │
│ [返回考试列表] │
└─────────────────────────────────────────┘
```
### 我的考试记录(ExamMyRecord.vue)
```
┌─────────────────────────────────────────┐
│ 我的考试记录 │
│ │
│ ┌─────┬──────┬────┬────┬────┬────────┐│
│ │ 考试 │ 得分 │ 结果│ 时间│ 操作 │ ││
│ ├─────┼──────┼────┼────┼────┼────────┤│
│ │公司介│ 85 │ ✅ │2026-│ [查看 ││
│ │绍正式│ │ 通过│08-10│ 详情] ││
│ │考试 │ │ │ │ ││
│ ├─────┼──────┼────┼────┼────┼────────┤│
│ │产品知│ 60 │ ✅ │2026-│ [查看 ││
│ │识考试│ │ 通过│08-05│ 详情] ││
│ └─────┴──────┴────┴────┴────┴────────┘│
└─────────────────────────────────────────┘
```
+266
View File
@@ -0,0 +1,266 @@
# PL03 — 管理员端视图设计
> **版本:V1.1 | 框架:Vue3 + Element Plus**
> **参考:pj006-zhilianyuan2 frontend-orgadmin 的 CRUD 页面模式**
---
## 1. 知识管理 — 课件素材管理(MaterialManage.vue)
```
┌─────────────────────────────────────────┐
│ 课件素材管理 [+新增素材] │
│ │
│ ┌─筛选──────────────────────────────┐ │
│ │ 状态:[全部] [待审批] [已通过] [驳回]│ │
│ │ 搜索: [输入文件名...] [查询] │ │
│ └────────────────────────────────────┘ │
│ │
│ ┌─────┬──────┬────┬────┬────┬────────┐│
│ │ 文件名│ 类型 │ 状态│ 提交│ 绑定│ 操作 ││
│ ├─────┼──────┼────┼────┼────┼────────┤│
│ │公司介│ pptx │ ✅ │ 张三│ 公司│ [预览]││
│ │绍.pptx│ │ 通过│ │ │ [删除]││
│ ├─────┼──────┼────┼────┼────┼────────┤│
│ │产品知│ mp4 │ ⏳ │ 李四│ 产品│ [审批]││
│ │识.mp4│ │ 待审│ │ │ ││
│ ├─────┼──────┼────┼────┼────┼────────┤│
│ │话术文│ doc │ ❌ │ 王五│ 课程│ [编辑]││
│ │档.docx│ │ 驳回│ │ │ ││
│ └─────┴──────┴────┴────┴────┴────────┘│
│ │
│ 分页:< 1 2 3 ... 10 > │
└─────────────────────────────────────────┘
```
**新增素材弹窗:**
```vue
<el-dialog title="新增素材" v-model="visible">
<el-form>
<el-form-item label="文件" required>
<el-upload drag :action="uploadUrl" ...>
<el-icon class="el-icon--upload">upload</el-icon>
<div>拖拽或点击上传</div>
<template #tip>支持 ppt/pptx/pdf/doc/docx/mp4/png/jpg/jpeg</template>
</el-upload>
</el-form-item>
<el-form-item label="绑定类型">
<el-select v-model="bindType">
<el-option label="无绑定" value="none" />
<el-option label="公司介绍" value="company" />
<el-option label="产品" value="product" />
<el-option label="课程" value="course" />
</el-select>
</el-form-item>
<el-form-item label="绑定实体" v-if="bindType !== 'none'">
<el-select v-model="bindId">
<!-- 动态加载产品/课程列表 -->
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="visible=false">取消</el-button>
<el-button type="primary" @click="submit">上传</el-button>
</template>
</el-dialog>
```
## 2. 知识管理 — 素材审批列表(MaterialAuditList.vue)
```
┌─────────────────────────────────────────┐
│ 素材审批列表 │
│ │
│ ┌─────┬──────┬────┬────┬────┬────────┐│
│ │ 文件名│ 提交人│ 类型│ 时间│ 预览│ 操作 ││
│ ├─────┼──────┼────┼────┼────┼────────┤│
│ │产品话│ 李四 │ doc │08-15│[查看]│ [通过]││
│ │术.docx│ │ │ │ │ [驳回]││
│ ├─────┼──────┼────┼────┼────┼────────┤│
│ │销售技│ 王五 │ mp4 │08-14│[查看]│ [通过]││
│ │巧.mp4│ │ │ │ │ [驳回]││
│ └─────┴──────┴────┴────┴────┴────────┘│
│ │
│ 分页:< 1 2 3 > │
└─────────────────────────────────────────┘
```
**驳回弹窗:**
```vue
<el-dialog title="驳回理由" v-model="rejectVisible">
<el-form>
<el-form-item label="驳回理由" required>
<el-input type="textarea" v-model="rejectReason"
placeholder="请说明驳回原因" :rows="4" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="rejectVisible=false">取消</el-button>
<el-button type="danger" @click="confirmReject">确认驳回</el-button>
</template>
</el-dialog>
```
## 3. 系统管理 — 用户账号管理(UserManage.vue)
```
┌─────────────────────────────────────────┐
│ 用户账号管理 [+新增用户] │
│ │
│ ┌─────┬──────┬──────┬─────┬───────────┐│
│ │ 用户名│ 姓名 │ 角色 │ 状态 │ 操作 ││
│ ├─────┼──────┼──────┼─────┼───────────┤│
│ │ admin│ 管理员│ 管理│ ✅ │ [编辑] [禁用] ││
│ │ │ │ 员 │ 启用 │ ││
│ ├─────┼──────┼──────┼─────┼───────────┤│
│ │ zhangs│ 张三 │ 员工 │ ✅ │ [编辑] [禁用] ││
│ │ an │ │ │ 启用 │ ││
│ ├─────┼──────┼──────┼─────┼───────────┤│
│ │ lisi │ 李四 │ 员工 │ ⛔ │ [编辑] [启用] ││
│ │ │ │ │ 禁用 │ ││
│ └─────┴──────┴──────┴─────┴───────────┘│
└─────────────────────────────────────────┘
```
**新增/编辑用户弹窗:**
```vue
<el-dialog :title="isEdit ? '编辑用户' : '新增用户'" v-model="visible">
<el-form :model="form" :rules="rules">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" :disabled="isEdit" />
</el-form-item>
<el-form-item label="姓名" prop="fullName">
<el-input v-model="form.fullName" />
</el-form-item>
<el-form-item label="密码" prop="password" v-if="!isEdit">
<el-input type="password" v-model="form.password" />
<div class="el-form-item__tip">初始密码,用户首次登录后自行修改</div>
</el-form-item>
<el-form-item label="角色">
<el-radio-group v-model="form.role">
<el-radio label="employee">员工</el-radio>
<el-radio label="admin">管理员</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="状态" v-if="isEdit">
<el-switch v-model="form.status"
active-value="active" inactive-value="disabled" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="visible=false">取消</el-button>
<el-button type="primary" @click="submit">保存</el-button>
</template>
</el-dialog>
```
## 4. 系统管理 — 全部考试成绩(ExamRecordManage.vue)
```
┌─────────────────────────────────────────┐
│ 全部考试成绩 │
│ │
│ ┌─筛选──────────────────────────────┐ │
│ │ 用户:[全部] 考试:[全部] 结果:[全部]│ │
│ │ 日期: [开始] ~ [结束] [查询] │ │
│ └────────────────────────────────────┘ │
│ │
│ ┌─────┬──────┬──────┬────┬────┬───────┐│
│ │ 用户 │ 考试 │ 得分 │ 结果│ 时间│ 操作 ││
│ ├─────┼──────┼──────┼────┼────┼───────┤│
│ │ 张三 │公司介│ 85 │ ✅ │08-10│ [查看] ││
│ │ │绍正式│ │ 通过│ │ [详情]││
│ ├─────┼──────┼──────┼────┼────┼───────┤│
│ │ 李四 │产品知│ 45 │ ❌ │08-09│ [查看] ││
│ │ │识考试│ │ 未过│ │ [详情]││
│ ├─────┼──────┼──────┼────┼────┼───────┤│
│ │ ... │ ... │ ... │ ...│ ...│ ││
│ └─────┴──────┴──────┴────┴────┴───────┘│
│ │
│ 分页:< 1 2 3 ... 20 > │
│ 导出: [导出全部] [导出筛选结果] │
└─────────────────────────────────────────┘
```
## 5. 系统管理 — 系统参数配置(SystemConfig.vue)
```
┌─────────────────────────────────────────┐
│ 系统参数配置 [保存配置] │
│ │
│ ┌─────────────────────────────────────┐│
│ │ AI / LLM 配置 ││
│ │ ││
│ │ LLM 服务地址:[http://192.168.1.100 ││
│ │ :11434/v1 ] ││
│ │ API Key: [sk-xxx ] ││
│ │ 模型名称: [qwen2.5:7b ] ││
│ └─────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────┐│
│ │ JWT 认证配置 ││
│ │ ││
│ │ Token 过期时间(分):[480 ] ││
│ └─────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────┐│
│ │ 文件上传配置 ││
│ │ ││
│ │ 文档最大字节(200MB):[209715200 ]││
│ │ 视频最大字节(2GB): [2147483648 ]││
│ │ 分片阈值(100MB): [104857600 ]││
│ └─────────────────────────────────────┘│
└─────────────────────────────────────────┘
```
## 6. 管理员 — 题库管理(ExamQuestionBank.vue)
```
┌─────────────────────────────────────────┐
│ 题库管理 [+新增题目] │
│ │
│ ┌─筛选──────────────────────────────┐ │
│ │ 知识域:[全部] [公司] [产品] [销售] │ │
│ │ 题型:[全部] [单选] [多选] [判断] │ │
│ │ 搜索: [输入题干...] [查询] │ │
│ └────────────────────────────────────┘ │
│ │
│ ┌─────┬──────┬──────┬────┬────────────┐│
│ │ 题干 │ 类型 │ 知识域│ 状态│ 操作 ││
│ ├─────┼──────┼──────┼────┼────────────┤│
│ │博昇的│ 单选 │ 公司 │ 启用│ [编辑] [停用]││
│ │主营..│ │ │ │ ││
│ ├─────┼──────┼──────┼────┼────────────┤│
│ │以下哪│ 多选 │ 产品 │ 启用│ [编辑] [停用]││
│ │些...│ │ │ │ ││
│ └─────┴──────┴──────┴────┴────────────┘│
│ │
│ 分页:< 1 2 3 ... 15 > │
│ │
│ 考试配置: [+新增考试] │
│ ┌─────────────────────────────────────┐│
│ │ 考试名称 │ 类型 │ 题量 │ 合格线 │ 操作 ││
│ ├─────────┼──────┼─────┼───────┼──────┤│
│ │公司考试 │ 正式 │ 20 │ 60 │ [编辑]││
│ │自测练习 │ 自测 │ 10 │ -- │ [编辑]││
│ └─────────┴──────┴─────┴───────┴──────┘│
└─────────────────────────────────────────┘
```
## 7. 各页面通用 CRUD 模式
所有管理员 CRUD 页面遵循统一的模式(参考 zhilianyuan2 frontend-orgadmin):
```
┌─ 页面标题 ───────────── [+ 新增按钮] ─┐
├─ 筛选栏 (表单) ───────────────────────┤
├─ 数据表格 (el-table) ─────────────────┤
│ 操作列: [编辑] [删除/停用] │
├─ 分页栏 (el-pagination) ─────────────┤
└──────────────────────────────────────┘
弹窗操作:
- 新增/编辑:el-dialog + el-form
- 删除确认:el-message-box.confirm
- 状态变更:el-switch 或 el-select
```
+15
View File
@@ -0,0 +1,15 @@
# 06_Product_Lines — 产品线与前端设计
> **命名规则:** `PL{NN}_{描述}.md`
> **用途:** 前端视图设计、页面流程、组件设计
>
> **⚠️ 本目录 PL 文档为 V1 培训平台视图基线(首页/公司/产品/课程/考试 + 右侧 PathCoach)。** 平台升级后一级导航与工作台形态见 `SY03`(新导航)与 `SY17`(工作台线框图)。
## 文件清单
| 文件 | 说明 |
|------|------|
| `README.md` | 本索引文件 |
| `PL01_Global_Layout.md` | 全局布局设计(顶部导航 + AI 侧栏) |
| `PL02_Employee_Views.md` | 员工端视图(首页/公司/产品/课程/考试) |
| `PL03_Admin_Views.md` | 管理员端视图(知识管理/系统管理) |