2910410219
b6b2dfa2d9
- 在技能 API 中新增 `getUserSkillDetail` 和 `updateUserSkill` 函数，支持获取和更新用户技能。 - 更新技能列表页面，改进搜索栏和技能表格展示，提升用户体验。 - 修改文件上传提示，明确支持的文件格式和要求。
593 lines
18 KiB
Markdown
593 lines
18 KiB
Markdown
# src 目录结构说明
|
||
|
||
> 本文档详细说明了项目 src 目录下所有文件和文件夹的作用
|
||
|
||
## 📁 目录结构总览
|
||
|
||
```
|
||
src/
|
||
├── api/ # API 接口层
|
||
├── assets/ # 静态资源
|
||
├── components/ # 公共组件
|
||
├── directives/ # 自定义指令
|
||
├── i18n/ # 国际化
|
||
├── layout/ # 布局组件
|
||
├── router/ # 路由配置
|
||
├── stores/ # 状态管理（Pinia）
|
||
├── theme/ # 样式主题
|
||
├── types/ # TypeScript 类型定义
|
||
├── utils/ # 工具函数
|
||
├── views/ # 页面视图
|
||
├── App.vue # 根组件
|
||
└── main.ts # 应用入口
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 核心文件
|
||
|
||
### App.vue
|
||
- **作用**: Vue 应用根组件
|
||
- **功能**: 定义应用的最外层结构
|
||
|
||
### main.ts
|
||
- **作用**: 应用入口文件
|
||
- **功能**:
|
||
- 初始化 Vue 实例
|
||
- 注册全局插件（Router、Store、i18n）
|
||
- 挂载应用到 DOM
|
||
|
||
---
|
||
|
||
## 📡 API 接口层 (`/api`)
|
||
|
||
统一管理所有后端接口调用
|
||
|
||
```
|
||
api/
|
||
├── assets/ # 资产管理接口
|
||
├── cid/ # CID 相关接口
|
||
├── common/ # 公共接口（文件上传等）
|
||
├── customerService/ # 客服系统接口
|
||
├── digitalHuman/ # 数字人相关接口
|
||
│ ├── audioAssets/ # 音频资产接口
|
||
│ ├── avatar/ # 数字人形象接口
|
||
│ ├── creation/ # 内容创作接口
|
||
│ ├── modelConfig/ # 模型配置接口
|
||
│ ├── skill/ # 技能管理接口 ⭐
|
||
│ └── videoAssets/ # 视频资产接口
|
||
├── knowledge/ # 知识库接口
|
||
│ ├── dataset/ # 数据集接口
|
||
│ ├── document/ # 文档接口
|
||
│ └── model/ # 模型接口
|
||
├── login/ # 登录认证接口
|
||
├── menu/ # 菜单接口
|
||
├── system/ # 系统管理接口
|
||
│ ├── cache/ # 缓存管理
|
||
│ ├── config/ # 系统配置
|
||
│ ├── dept/ # 部门管理
|
||
│ ├── dict/ # 字典管理
|
||
│ ├── menu/ # 菜单管理
|
||
│ ├── monitor/ # 系统监控
|
||
│ ├── personal/ # 个人中心
|
||
│ ├── post/ # 岗位管理
|
||
│ ├── role/ # 角色管理
|
||
│ ├── tenant/ # 租户管理
|
||
│ └── user/ # 用户管理
|
||
└── trade/ # 交易运营接口
|
||
└── operation/ # 运营数据
|
||
├── analysis/ # 数据分析
|
||
├── distribution/# 分销数据
|
||
├── setting/ # 运营设置
|
||
└── stats/ # 统计数据
|
||
```
|
||
|
||
**关键文件**:
|
||
- 每个模块的 `index.ts` 包含该模块的所有接口定义
|
||
- 使用 TypeScript 定义接口参数和返回值类型
|
||
|
||
---
|
||
|
||
## 🎨 静态资源 (`/assets`)
|
||
|
||
存放项目静态资源文件
|
||
|
||
```
|
||
assets/
|
||
├── 401.png # 401 无权限页面图片
|
||
├── 404.png # 404 页面未找到图片
|
||
├── bg.jpg # 背景图
|
||
├── login-icon-two.svg # 登录页图标
|
||
└── logo-mini.svg # 小尺寸 Logo
|
||
```
|
||
|
||
---
|
||
|
||
## 🧩 公共组件 (`/components`)
|
||
|
||
可复用的 Vue 组件
|
||
|
||
```
|
||
components/
|
||
├── auth/ # 权限控制组件
|
||
│ ├── auth.vue # 单个权限控制
|
||
│ ├── authAll.vue # 全部权限控制
|
||
│ └── auths.vue # 多权限控制
|
||
├── cropper/ # 图片裁剪组件
|
||
│ └── index.vue
|
||
├── editor/ # 富文本编辑器
|
||
│ ├── index.vue
|
||
│ └── toolbar.ts # 工具栏配置
|
||
├── iconSelector/ # 图标选择器
|
||
│ └── index.vue
|
||
├── model/ # 模型选择器 ⭐
|
||
│ └── ModelSelector.vue
|
||
├── myCodeMirror/ # 代码编辑器
|
||
│ └── index.vue
|
||
├── noticeBar/ # 通知栏组件
|
||
│ └── index.vue
|
||
├── pagination/ # 分页组件
|
||
│ └── index.vue
|
||
├── skill/ # 技能选择器 ⭐
|
||
│ ├── NodeSkillSelector.vue # 节点技能选择器
|
||
│ └── SkillSelector.vue # 技能选择器
|
||
└── svgIcon/ # SVG 图标组件
|
||
└── index.vue
|
||
```
|
||
|
||
**使用说明**:
|
||
- 组件可在任何页面中导入使用
|
||
- 部分组件已注册为全局组件
|
||
|
||
---
|
||
|
||
## 📜 自定义指令 (`/directives`)
|
||
|
||
Vue 自定义指令
|
||
|
||
```
|
||
directives/
|
||
└── debounce.ts # 防抖指令
|
||
```
|
||
|
||
**使用示例**:
|
||
```vue
|
||
<el-button v-debounce="handleClick">点击</el-button>
|
||
```
|
||
|
||
---
|
||
|
||
## 🌍 国际化 (`/i18n`)
|
||
|
||
多语言支持
|
||
|
||
```
|
||
i18n/
|
||
├── lang/ # 语言包
|
||
│ ├── en.ts # 英文
|
||
│ ├── zh-cn.ts # 简体中文
|
||
│ └── zh-tw.ts # 繁体中文
|
||
├── pages/ # 页面级国际化
|
||
│ ├── formI18n/ # 表单国际化
|
||
│ └── login/ # 登录页国际化
|
||
└── index.ts # 国际化配置入口
|
||
```
|
||
|
||
**支持语言**:
|
||
- 简体中文 (zh-cn)
|
||
- 繁体中文 (zh-tw)
|
||
- 英文 (en)
|
||
|
||
---
|
||
|
||
## 🏗️ 布局组件 (`/layout`)
|
||
|
||
应用整体布局结构
|
||
|
||
```
|
||
layout/
|
||
├── component/ # 布局基础组件
|
||
│ ├── aside.vue # 侧边栏
|
||
│ ├── columnsAside.vue # 分栏侧边栏
|
||
│ ├── header.vue # 头部
|
||
│ └── main.vue # 主体内容区
|
||
├── footer/ # 页脚
|
||
│ └── index.vue
|
||
├── lockScreen/ # 锁屏功能
|
||
│ └── index.vue
|
||
├── logo/ # Logo 组件
|
||
│ └── index.vue
|
||
├── main/ # 主布局模式
|
||
│ ├── classic.vue # 经典布局
|
||
│ ├── columns.vue # 分栏布局
|
||
│ ├── defaults.vue # 默认布局
|
||
│ └── transverse.vue # 横向布局
|
||
├── navBars/ # 导航栏
|
||
│ ├── breadcrumb/ # 面包屑导航
|
||
│ │ ├── breadcrumb.vue # 面包屑
|
||
│ │ ├── closeFull.vue # 全屏切换
|
||
│ │ ├── index.vue # 导航栏入口
|
||
│ │ ├── search.vue # 搜索
|
||
│ │ ├── setings.vue # 设置
|
||
│ │ ├── user.vue # 用户信息
|
||
│ │ └── userNews.vue # 用户消息
|
||
│ └── tagsView/ # 标签页视图
|
||
│ ├── contextmenu.vue # 右键菜单
|
||
│ └── tagsView.vue # 标签页
|
||
├── navMenu/ # 导航菜单
|
||
│ ├── horizontal.vue # 横向菜单
|
||
│ ├── subItem.vue # 子菜单项
|
||
│ └── vertical.vue # 纵向菜单
|
||
├── routerView/ # 路由视图
|
||
│ ├── iframes.vue # iframe 视图
|
||
│ ├── link.vue # 外链视图
|
||
│ └── parent.vue # 父级视图
|
||
└── index.vue # 布局入口
|
||
```
|
||
|
||
**布局模式**:
|
||
- 经典布局 (classic)
|
||
- 分栏布局 (columns)
|
||
- 默认布局 (defaults)
|
||
- 横向布局 (transverse)
|
||
|
||
---
|
||
|
||
## 🛣️ 路由配置 (`/router`)
|
||
|
||
Vue Router 路由管理
|
||
|
||
```
|
||
router/
|
||
├── backEnd.ts # 后端动态路由
|
||
├── frontEnd.ts # 前端静态路由
|
||
├── index.ts # 路由入口
|
||
└── route.ts # 路由工具函数
|
||
```
|
||
|
||
**路由模式**:
|
||
- 前端路由: 静态配置，适合固定菜单
|
||
- 后端路由: 动态加载，根据权限生成
|
||
|
||
---
|
||
|
||
## 🗄️ 状态管理 (`/stores`)
|
||
|
||
Pinia 状态管理
|
||
|
||
```
|
||
stores/
|
||
├── interface/ # Store 接口定义
|
||
│ └── index.ts
|
||
├── bigUpload.ts # 大文件上传状态
|
||
├── index.ts # Store 入口
|
||
├── keepAliveNames.ts # 页面缓存名称
|
||
├── requestOldRoutes.ts # 旧路由请求
|
||
├── routesList.ts # 路由列表状态
|
||
├── tagsViewRoutes.ts # 标签页路由状态
|
||
├── themeConfig.ts # 主题配置状态
|
||
└── userInfo.ts # 用户信息状态
|
||
```
|
||
|
||
**主要 Store**:
|
||
- `userInfo`: 用户登录信息、权限
|
||
- `themeConfig`: 主题、布局配置
|
||
- `routesList`: 动态路由列表
|
||
- `tagsViewRoutes`: 标签页历史记录
|
||
|
||
---
|
||
|
||
## 🎨 样式主题 (`/theme`)
|
||
|
||
全局样式和主题配置
|
||
|
||
```
|
||
theme/
|
||
├── common/ # 公共样式
|
||
│ └── transition.scss # 过渡动画
|
||
├── media/ # 响应式样式
|
||
│ ├── chart.scss # 图表样式
|
||
│ ├── cityLinkage.scss # 城市联动
|
||
│ ├── date.scss # 日期选择器
|
||
│ ├── dialog.scss # 对话框
|
||
│ ├── error.scss # 错误页
|
||
│ ├── form.scss # 表单
|
||
│ ├── home.scss # 首页
|
||
│ ├── index.scss # 媒体查询入口
|
||
│ ├── layout.scss # 布局
|
||
│ ├── login.scss # 登录页
|
||
│ ├── media.scss # 响应式断点
|
||
│ ├── pagination.scss # 分页
|
||
│ ├── personal.scss # 个人中心
|
||
│ ├── scrollbar.scss # 滚动条
|
||
│ └── tagsView.scss # 标签页
|
||
├── mixins/ # SCSS 混入
|
||
│ ├── button-text.scss # 按钮文本混入
|
||
│ └── index.scss # 混入入口
|
||
├── app.scss # 应用主样式
|
||
├── dark.scss # 暗黑主题
|
||
├── element.scss # Element Plus 样式覆盖
|
||
├── iconSelector.scss # 图标选择器样式
|
||
├── index.scss # 样式入口
|
||
├── loading.scss # 加载动画
|
||
├── other.scss # 其他样式
|
||
└── waves.scss # 波纹效果
|
||
```
|
||
|
||
**主题功能**:
|
||
- 支持亮色/暗色主题切换
|
||
- 响应式布局适配
|
||
- Element Plus 组件样式定制
|
||
|
||
---
|
||
|
||
## 📝 类型定义 (`/types`)
|
||
|
||
TypeScript 类型声明
|
||
|
||
```
|
||
types/
|
||
└── file-saver.d.ts # file-saver 库类型定义
|
||
```
|
||
|
||
**说明**: 为第三方库提供 TypeScript 类型支持
|
||
|
||
---
|
||
|
||
## 🛠️ 工具函数 (`/utils`)
|
||
|
||
通用工具函数库
|
||
|
||
```
|
||
utils/
|
||
├── arrayOperation.ts # 数组操作工具
|
||
├── assetSubscribe.ts # 资产订阅工具
|
||
├── authDirective.ts # 权限指令工具
|
||
├── authFunction.ts # 权限判断函数
|
||
├── build.ts # 构建相关工具
|
||
├── commonFunction.ts # 公共函数
|
||
├── customDirective.ts # 自定义指令注册
|
||
├── debounce.ts # 防抖函数
|
||
├── diffUtils.ts # 差异对比工具
|
||
├── directive.ts # 指令工具
|
||
├── formatTime.ts # 时间格式化
|
||
├── getStyleSheets.ts # 获取样式表
|
||
├── gfast.ts # GFast 框架工具
|
||
├── loading.ts # 加载状态工具
|
||
├── other.ts # 其他工具函数
|
||
├── request.ts # HTTP 请求封装 ⭐
|
||
├── setIconfont.ts # 设置图标字体
|
||
├── storage.ts # 本地存储封装
|
||
├── theme.ts # 主题切换工具
|
||
├── toolsValidate.ts # 表单验证规则
|
||
└── wartermark.ts # 水印工具
|
||
```
|
||
|
||
**核心工具**:
|
||
- `request.ts`: Axios 封装，统一处理 HTTP 请求、错误拦截
|
||
- `storage.ts`: localStorage/sessionStorage 封装
|
||
- `authFunction.ts`: 权限判断函数
|
||
- `formatTime.ts`: 日期时间格式化
|
||
|
||
---
|
||
|
||
## 📄 页面视图 (`/views`)
|
||
|
||
所有页面组件
|
||
|
||
### 核心业务模块
|
||
|
||
#### 数字人模块 (`/digitalHuman`) ⭐
|
||
|
||
```
|
||
digitalHuman/
|
||
├── audioAssets/ # 音频资产管理
|
||
│ ├── component/
|
||
│ │ └── ttsDialog.vue # TTS 对话框
|
||
│ └── index.vue
|
||
├── avatar/ # 数字人形象管理
|
||
│ └── index.vue
|
||
├── creation/ # 内容创作
|
||
│ └── index.vue
|
||
├── modelConfig/ # 模型配置
|
||
│ ├── modelModule/ # 模型模块管理
|
||
│ │ ├── component/
|
||
│ │ │ └── editModule.vue # 编辑模型
|
||
│ │ └── index.vue
|
||
│ └── modelType/ # 模型类型管理
|
||
│ └── index.vue
|
||
├── skill/ # 技能管理 ⭐
|
||
│ └── index.vue
|
||
└── videoAssets/ # 视频资产管理
|
||
└── index.vue
|
||
```
|
||
|
||
**功能说明**:
|
||
- **音频资产**: 管理 TTS 音频文件
|
||
- **数字人形象**: 配置数字人外观
|
||
- **内容创作**: 创建数字人内容
|
||
- **模型配置**: 管理 AI 模型（推理、图片、音频）
|
||
- **技能管理**: 管理技能模板（zip 格式，包含 .md 文件）
|
||
- **视频资产**: 管理视频素材
|
||
|
||
#### 知识库模块 (`/knowledge`)
|
||
|
||
```
|
||
knowledge/
|
||
├── component/
|
||
│ └── documentDetailDialog.vue # 文档详情对话框
|
||
├── dataset/ # 数据集管理
|
||
│ ├── component/
|
||
│ │ └── editDataset.vue
|
||
│ └── index.vue
|
||
├── document/ # 文档管理
|
||
│ ├── component/
|
||
│ │ ├── documentChunks.vue # 文档分块
|
||
│ │ ├── previewDocument.vue # 文档预览
|
||
│ │ └── uploadDocument.vue # 上传文档
|
||
│ ├── detail.vue # 文档详情
|
||
│ └── index.vue
|
||
└── index.vue
|
||
```
|
||
|
||
#### 客服系统 (`/customerService`)
|
||
|
||
```
|
||
customerService/
|
||
├── account/ # 客服账号管理
|
||
├── product/ # 产品管理
|
||
├── report/ # 报表统计
|
||
└── script/ # 话术管理
|
||
```
|
||
|
||
#### 资产管理 (`/assets`)
|
||
|
||
```
|
||
assets/
|
||
├── asset/ # 资产管理
|
||
├── category/ # 资产分类
|
||
├── location/ # 库位管理
|
||
├── operation/ # 资产操作
|
||
│ └── count/ # 盘点管理
|
||
├── warehouse/ # 仓库管理
|
||
└── zone/ # 库区管理
|
||
```
|
||
|
||
#### 交易运营 (`/trade`)
|
||
|
||
```
|
||
trade/
|
||
└── operation/
|
||
├── analysis/ # 数据分析
|
||
│ ├── product/ # 产品分析
|
||
│ ├── region/ # 区域分析
|
||
│ └── shop/ # 店铺分析
|
||
├── distribution/ # 分销管理
|
||
│ ├── effect/ # 分销效果
|
||
│ └── order/ # 分销订单
|
||
├── order/ # 订单管理
|
||
├── setting/ # 运营设置
|
||
│ ├── anchor/ # 主播管理
|
||
│ ├── live-account/# 直播账号
|
||
│ └── scheduling/ # 排期管理
|
||
└── stats/ # 统计数据
|
||
├── anchor/ # 主播统计
|
||
└── shop/ # 店铺统计
|
||
```
|
||
|
||
### 系统管理模块 (`/system`)
|
||
|
||
```
|
||
system/
|
||
├── config/ # 系统配置
|
||
├── dept/ # 部门管理
|
||
├── dict/ # 字典管理
|
||
├── menu/ # 菜单管理
|
||
├── monitor/ # 系统监控
|
||
│ ├── loginLog/ # 登录日志
|
||
│ ├── operLog/ # 操作日志
|
||
│ ├── server/ # 服务器监控
|
||
│ └── userOnline/ # 在线用户
|
||
├── personal/ # 个人中心
|
||
├── post/ # 岗位管理
|
||
├── role/ # 角色管理
|
||
├── tenant/ # 租户管理
|
||
└── user/ # 用户管理
|
||
```
|
||
|
||
### 其他模块
|
||
|
||
```
|
||
views/
|
||
├── ads/ # 广告数据分析
|
||
├── chart/ # 图表示例
|
||
├── error/ # 错误页（401, 404）
|
||
├── fun/ # 功能演示
|
||
│ ├── clipboard/ # 剪贴板
|
||
│ ├── codemirror/ # 代码编辑器
|
||
│ ├── countup/ # 数字滚动
|
||
│ ├── cropper/ # 图片裁剪
|
||
│ ├── echartsMap/ # 地图
|
||
│ ├── gridLayout/ # 网格布局
|
||
│ ├── printJs/ # 打印
|
||
│ ├── qrcode/ # 二维码
|
||
│ ├── splitpanes/ # 分割面板
|
||
│ └── tagsView/ # 标签页
|
||
├── home/ # 首页
|
||
├── login/ # 登录页
|
||
├── make/ # 组件制作
|
||
├── menu/ # 菜单示例
|
||
├── pages/ # 页面示例
|
||
│ ├── awesome/ # 精选组件
|
||
│ ├── drag/ # 拖拽
|
||
│ ├── dynamicForm/ # 动态表单
|
||
│ ├── element/ # Element 组件
|
||
│ ├── filtering/ # 筛选
|
||
│ ├── formAdapt/ # 表单适配
|
||
│ ├── formI18n/ # 表单国际化
|
||
│ ├── formRules/ # 表单验证
|
||
│ ├── iocnfont/ # 图标字体
|
||
│ ├── lazyImg/ # 图片懒加载
|
||
│ ├── listAdapt/ # 列表适配
|
||
│ ├── preview/ # 预览
|
||
│ ├── steps/ # 步骤条
|
||
│ ├── tableRules/ # 表格验证
|
||
│ ├── tree/ # 树形控件
|
||
│ ├── waterfall/ # 瀑布流
|
||
│ ├── waves/ # 波纹效果
|
||
│ └── workflow/ # 工作流
|
||
├── params/ # 参数传递
|
||
├── personal/ # 个人中心
|
||
├── report-engine/ # 报表引擎
|
||
├── tools/ # 工具页
|
||
└── visualizing/ # 数据可视化
|
||
```
|
||
|
||
---
|
||
|
||
## 🔑 关键文件说明
|
||
|
||
| 文件 | 作用 | 重要性 |
|
||
|------|------|--------|
|
||
| `main.ts` | 应用入口，初始化 Vue、Router、Store | ⭐⭐⭐ |
|
||
| `utils/request.ts` | HTTP 请求封装，统一错误处理 | ⭐⭐⭐ |
|
||
| `router/index.ts` | 路由配置，权限控制 | ⭐⭐⭐ |
|
||
| `stores/userInfo.ts` | 用户信息状态管理 | ⭐⭐⭐ |
|
||
| `stores/themeConfig.ts` | 主题配置状态管理 | ⭐⭐ |
|
||
| `components/model/ModelSelector.vue` | 模型选择器组件 | ⭐⭐ |
|
||
| `components/skill/SkillSelector.vue` | 技能选择器组件 | ⭐⭐ |
|
||
| `views/digitalHuman/` | 数字人核心业务模块 | ⭐⭐⭐ |
|
||
|
||
---
|
||
|
||
## 📚 开发规范
|
||
|
||
### 文件命名
|
||
- 组件文件: PascalCase (如 `ModelSelector.vue`)
|
||
- 工具文件: camelCase (如 `request.ts`)
|
||
- 样式文件: kebab-case (如 `login.scss`)
|
||
|
||
### 目录组织
|
||
- 每个业务模块独立目录
|
||
- 组件相关文件放在 `component/` 子目录
|
||
- 接口定义放在对应的 `api/` 目录
|
||
|
||
### 代码风格
|
||
- 使用 TypeScript
|
||
- 遵循 ESLint 规则
|
||
- 使用 Prettier 格式化
|
||
|
||
---
|
||
|
||
## 🔄 更新日志
|
||
|
||
- 2024-XX-XX: 创建文档
|
||
- 添加数字人模块说明
|
||
- 添加技能管理功能说明
|
||
|
||
---
|
||
|
||
## 📞 联系方式
|
||
|
||
如有问题，请联系开发团队。
|