init: 数字员工平台初始代码
包含前端(Vue3 + VueFlow 画布)、后端(Go)、文档体系。 - 工作台画布:节点拖放、连线模式、右键菜单、AI 助手 - 后端:连接器 API、专员种子数据 - 导航:左侧导航、工坊、市场、控制台
This commit is contained in:
@@ -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│ 详情] ││
|
||||
│ └─────┴──────┴────┴────┴────┴────────┘│
|
||||
└─────────────────────────────────────────┘
|
||||
```
|
||||
@@ -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
|
||||
```
|
||||
@@ -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` | 管理员端视图(知识管理/系统管理) |
|
||||
Reference in New Issue
Block a user