npmapps 1.1.4 → 1.1.6

package/app/wujie-wk/wujie-vue3-child/PROJECT_MEMORY.md

@@ -0,0 +1,427 @@
+# 项目记忆文件 - wujie-vue3-child
+
+## 项目概述
+
+**项目名称**: wujie-vue3-child
+**项目类型**: Vue 3 微前端子应用
+**构建工具**: Vite 6.0.5
+**开发端口**: 3001
+
+这是一个基于 Vue3 + Vite 的微前端子应用，使用无界(wujie)框架集成到主应用中。项目采用现代化技术栈，实现了智能教练业务系统。
+
+---
+
+## 核心技术栈
+
+### 框架与构建
+- **Vue 3.5.13** - Composition API
+- **Vite 6.0.5** - 现代化构建工具
+- **Vue Router 4.5.0** - 路由管理
+- **Pinia 2.3.0** - 状态管理
+- **Element Plus 2.9.1** - UI 组件库
+
+### 工具库
+- **ECharts 6.0.0** - 数据可视化
+- **Day.js 1.11.13** - 日期处理
+- **Lodash 4.17.21** - 工具函数
+- **vuedraggable 4.1.0** - 拖拽功能
+- **Sass 1.83.0** - CSS 预处理器
+
+### 特色能力
+- **JSX 支持** - 通过 @vitejs/plugin-vue-jsx
+- **CSS Modules** - 样式模块化隔离
+- **微前端通信** - 基于 wujie 事件总线
+
+---
+
+## 项目结构
+
+```
+src/
+├── assets/                 # 资源文件
+├── components/            # 公共组件
+│   └── tags-view.vue     # 标签页管理(可拖拽)
+├── hooks/                # 组合式 API 钩子
+│   ├── useClickOutside.js     # 点击外部检测
+│   └── useTableDragSort.js    # 表格拖拽排序
+├── router/               # 路由配置
+├── store/                # Pinia 状态管理
+│   └── tagsViewStroe.js  # 标签页状态
+├── views/                # 页面视图
+│   ├── aiCoach/         # 🎯 智能教练核心模块
+│   │   ├── collapseExpand/    # 可拖拽折叠列表
+│   │   ├── dialogueSegment/   # 对话环节管理
+│   │   ├── practiceStatus/    # 练习情况统计
+│   │   │   └── components/    # 细粒度组件
+│   │   │       ├── ChartsPanel/      # 图表面板
+│   │   │       ├── DonutChart/       # 环形图
+│   │   │       ├── echarts/          # ECharts 图表
+│   │   │       ├── PracticeTable/    # 练习表格
+│   │   │       ├── RankingList/      # 排名列表
+│   │   │       └── StatCardsRow/     # 统计卡片
+│   │   ├── reportDetail/      # ✨ 报告详情（新增）
+│   │   │   ├── components/
+│   │   │   │   ├── ScoreBadge/          # 分数徽章
+│   │   │   │   ├── ReportHeader/        # 报告头部
+│   │   │   │   ├── DimensionScores/     # 维度评分
+│   │   │   │   ├── ComprehensiveEvaluation/  # 综合评价
+│   │   │   │   ├── RoleInfo/            # 角色信息
+│   │   │   │   ├── DialogueBubble/      # 对话气泡
+│   │   │   │   ├── SubDimensionItem/    # 子维度项
+│   │   │   │   └── DimensionDetail/     # 维度详情
+│   │   │   ├── index.jsx
+│   │   │   └── index.module.scss
+│   │   └── scriptTable/       # 脚本表格
+│   ├── jsx/                   # JSX 示例
+│   ├── child-to-parent.vue   # 子→父通信
+│   ├── parent-to-child.vue   # 父→子通信
+│   ├── router-jump.vue       # 路由跳转
+│   ├── phone-code.vue        # 验证码组件
+│   └── home.vue              # 首页
+├── App.vue
+└── main.js
+```
+
+---
+
+## 核心功能模块
+
+### 1. 智能教练 (aiCoach)
+
+**入口**: `/ai-coach`
+**文件**: `src/views/aiCoach/index.jsx`
+
+#### 对话环节 (dialogueSegment)
+- 管理多个对话环节，每个环节包含：
+  - 环节标题和目标描述
+  - 问答脚本 (qaScripts)
+  - 主动脚本 (proactiveScript)
+- 支持拖拽排序、添加/删除、AI 生成话术
+
+#### 练习情况 (practiceStatus)
+**计划统计标签页**:
+- 6 个统计卡片：总学员、完成率、平均练习次数等
+- 进度环形图 + 时长/分数排名图
+- 学员练习明细表格（分页）
+- 支持部门和职务筛选
+
+**剧本统计标签页**:
+- 展示剧本相关统计
+
+**技术特点**:
+- 同时支持 CSS 和 ECharts 两种图表渲染方式
+- 高度模块化组件设计，每个 UI 区块对应一个组件
+- 使用 CSS Modules 实现样式隔离
+
+#### 报告详情 (reportDetail) ✨ 新增
+
+**入口**: `/ai-coach` → "报告详情" 标签页
+**文件**: `src/views/aiCoach/reportDetail/index.jsx`
+
+**页面结构**（垂直滚动布局）:
+
+1. **报告头部区域**:
+   - 左侧：报告标题、时间、轮次、时长
+   - 右侧：六边形分数徽章（显示得分和达标状态）
+   - 支持"中途退出"标签显示
+
+2. **总览区域**（左右两栏）:
+   - 左侧：陪练报告
+     - 5个维度评分进度条（话术准确度、语言组织、需求倾听记录、产品介绍解答、产品推荐促成）
+     - 进度条颜色根据得分自动分级（绿色/橙色/红色）
+     - 底部显示"0分-通过-满分"标注
+     - 陪练角色信息卡片
+   - 右侧：综合评价文字
+
+3. **话术准确度详情**:
+   - 维度标题栏（icon + 名称 + 得分）
+   - 高分话术示例
+   - 对话气泡（客户问题 + AI回答）
+   - 得分卡片：
+     - 总分显示（带表情）
+     - 得分明细（关键词、语义准确等）
+     - 关键词标签展示
+     - 指导建议
+
+4. **语言组织详情**:
+   - 维度标题栏
+   - 说明文字
+   - 3个子维度评分：
+     - 易于理解（进度条 + 评价）
+     - 逻辑性（进度条 + 评价）
+     - 亲和力（进度条 + 评价）
+
+**组件列表**（8个子组件）:
+- `ScoreBadge` - 六边形分数徽章，支持达标/未达标状态
+- `ReportHeader` - 报告头部，橙色渐变背景
+- `DimensionScores` - 维度评分进度条列表
+- `ComprehensiveEvaluation` - 综合评价文字区域
+- `RoleInfo` - 陪练角色信息卡片
+- `DialogueBubble` - 对话气泡（含得分卡片）
+- `SubDimensionItem` - 子维度评分项
+- `DimensionDetail` - 维度详情容器（支持对话和子维度两种类型）
+
+**数据结构**:
+```javascript
+// 头部数据
+{ title, isQuit, practiceTime, rounds, duration, score, isPassed }
+
+// 维度数据
+{ name, score, total, color } // color: green|orange|red
+
+// 对话数据
+{ question, answer, score }
+
+// 子维度数据
+{ name, score, total, comment }
+```
+
+**设计特点**:
+- 完整还原UI设计，垂直滚动布局
+- 所有组件使用 CSS Modules 样式隔离
+- 完整的模拟数据，方便开发和调试
+- 高度组件化，易于复用和维护
+
+### 2. 微前端通信
+
+#### 全局事件总线
+```javascript
+window.$wujie?.bus
+```
+
+#### 通信方式
+1. **子→父通信**: `$emit('child-event', data)`
+2. **父→子通信**: `$on('vue3-child-message', callback)`
+3. **跨应用路由跳转**: `$emit('router-jump', { app, path, query })`
+
+### 3. 其他功能
+- **标签页管理**: 可拖拽的多标签页系统
+- **验证码输入**: 6 位验证码组件，支持自动跳转
+- **JSX 示例**: 按钮下拉框、对话框等
+
+---
+
+## 路由配置
+
+| 路径 | 名称 | 组件 | 说明 |
+|------|------|------|------|
+| `/` | home | Home | 首页 |
+| `/contact/child-to-parent` | child-to-parent | ChildToParent | 子通知父 |
+| `/contact/parent-to-child` | parent-to-child | ParentToChild | 父通知子 |
+| `/phone-code` | phone-code | PhoneCode | 验证码 |
+| `/router-jump` | router-jump | RouterJump | 路由跳转 |
+| `/jsx` | jsx | index.vue | JSX示例 |
+| `/ai-coach` | ai-coach | index.jsx | 智能教练 |
+| `/test` | test | Test | 测试页面 |
+
+**路由模式**: History 模式
+
+---
+
+## 状态管理
+
+### tagsViewStore
+
+**文件**: `src/store/tagsViewStroe.js`
+
+**State**:
+- `tagsViewList`: 标签页列表
+
+**Actions**:
+- `addTagsView(tag)` - 添加标签页
+- `removeTagsView(tag)` - 移除标签页
+- `removeOtherTagsView(tag)` - 移除其他标签页
+- `clearTagsView()` - 清空所有标签页
+- `setTagsViewList(tagsList)` - 设置标签页列表
+
+---
+
+## 核心组件
+
+### 1. tags-view.vue
+**路径**: `src/components/tags-view.vue`
+
+**功能**:
+- 标签页视图管理
+- 使用 vuedraggable 实现拖拽排序
+- 支持右键菜单（关闭标签/关闭其他/关闭所有）
+- 监听路由变化自动添加标签
+- 使用 lodash throttle 优化性能
+
+### 2. CollapseExpand
+**路径**: `src/views/aiCoach/collapseExpand/index.jsx`
+
+**功能**:
+- 可拖拽的折叠展开列表组件
+- 基于 Element Plus el-collapse 封装
+- 支持自定义标题和内容插槽
+- 支持删除操作（带确认）
+
+### 3. ScriptTable
+**路径**: `src/views/aiCoach/scriptTable/index.jsx`
+
+**功能**:
+- 脚本表格组件
+- 支持问答脚本和主动脚本切换
+- 使用 Sortable.js 实现表格行拖拽排序
+- 包含 InputColumn 子组件用于单元格编辑
+
+### 4. PracticeStatus 组件群
+**路径**: `src/views/aiCoach/practiceStatus/components/`
+
+**设计原则**: 高度模块化，单一职责
+
+**组件列表**:
+- `StatCardsRow` - 统计卡片行
+- `ChartsPanel` - 图表面板容器
+- `DonutChart` / `EchartsDonut` - 环形图（CSS/ECharts双实现）
+- `RankBarChart` / `EchartsRankBar` - 排名柱状图（CSS/ECharts双实现）
+- `RankingGroup` - 排名组容器
+- `RankingList` - 排名列表
+- `PracticeTable` - 练习明细表格
+- `ScriptStatsPanel` - 剧本统计面板
+
+---
+
+## 自定义 Hooks
+
+### useClickOutside
+**路径**: `src/hooks/useClickOutside.js`
+
+**功能**: 检测点击元素外部区域
+
+**参数**:
+- `elRef` - 目标元素引用
+- `handler` - 点击外部时的回调函数
+
+**特点**: 自动管理事件监听器的添加和移除
+
+### useTableDragSort
+**路径**: `src/hooks/useTableDragSort.js`
+
+**功能**: Element Plus 表格拖拽排序
+
+**特点**:
+- 基于 Sortable.js 封装
+- 支持指定拖拽手柄
+- 自动管理实例销毁
+- 响应式数据同步
+
+---
+
+## 代码组织方式
+
+### 组件编写风格
+- **SFC (`.vue`)**: 简单页面和表单类组件，使用 `<script setup>`
+- **JSX (`.jsx`)**: 复杂动态组件和条件渲染多的组件
+
+### 样式组织
+- **全局样式**: `src/style.css`（极简，仅重置）
+- **SFC组件**: 使用 `<style scoped>`
+- **JSX组件**: 使用 CSS Modules (`.module.scss`)
+
+### 模块化设计
+- 按功能模块划分目录
+- 单一职责原则：每个组件只负责一个 UI 区块
+- 通用组件放在 `components/`，业务组件放在 `views/` 对应模块下
+
+### 数据流
+- **Props Down, Events Up** 原则
+- 使用 Pinia 管理跨组件状态
+- 父组件准备数据，子组件通过 props 接收
+
+---
+
+## 技术亮点
+
+1. ✅ **Vue3 Composition API** - 全面使用组合式 API
+2. ✅ **JSX 支持** - 复杂组件使用 JSX 提高开发效率
+3. ✅ **CSS Modules** - 样式模块化和命名空间隔离
+4. ✅ **拖拽功能** - vuedraggable + Sortable.js
+5. ✅ **微前端通信** - 基于 wujie 事件总线
+6. ✅ **图表双模式** - 同时支持 CSS 和 ECharts
+7. ✅ **组件化设计** - 高度模块化，职责清晰
+8. ✅ **自定义 Hooks** - 封装可复用的组合式逻辑
+9. ✅ **Pinia 状态管理** - Vue3 官方推荐方案
+10. ✅ **Element Plus** - 成熟 UI 组件库
+
+---
+
+## 最近更新
+
+根据 Git 提交记录：
+
+1. **重构练习状态页面** - 将组件拆分为独立模块
+2. **支持隐藏图例** - 优化图表按钮样式
+3. **调整环形图** - 半径和标签显示样式优化
+4. **添加 ECharts 图表** - 支持切换显示
+
+---
+
+## 关键文件路径
+
+**配置文件**:
+- `package.json` - 项目依赖配置
+- `vite.config.js` - Vite 构建配置
+- `index.html` - HTML 入口
+
+**核心文件**:
+- `src/main.js` - 应用入口
+- `src/App.vue` - 根组件
+- `src/router/index.js` - 路由配置
+- `src/store/tagsViewStroe.js` - 状态管理
+
+**核心业务**:
+- `src/views/aiCoach/index.jsx` - 智能教练主入口
+- `src/views/aiCoach/dialogueSegment/index.jsx` - 对话环节
+- `src/views/aiCoach/practiceStatus/index.jsx` - 练习情况
+
+**公共组件**:
+- `src/components/tags-view.vue` - 标签页管理
+- `src/hooks/useClickOutside.js` - 点击外部检测
+- `src/hooks/useTableDragSort.js` - 表格拖拽
+
+---
+
+## 开发建议
+
+### 添加新功能时
+1. 确定功能属于哪个模块，放在对应的 `views/` 子目录
+2. 如果是复杂的动态组件，考虑使用 JSX
+3. 如果组件较复杂，拆分为多个子组件，放在 `components/` 子目录
+4. 使用 CSS Modules 避免样式冲突
+5. 跨组件状态考虑在 `store/` 中添加新的 store
+
+### 组件设计原则
+- **单一职责**: 每个组件只负责一个功能
+- **Props 类型定义**: 使用 PropTypes 或 TypeScript 定义 props
+- **事件命名**: 使用 kebab-case，如 `update:modelValue`
+- **样式隔离**: JSX 组件使用 CSS Modules，SFC 使用 scoped
+
+### 性能优化
+- 列表渲染使用 `:key`
+- 大数据表格考虑虚拟滚动
+- 复杂计算使用 `computed`
+- 防抖节流使用 lodash 的 `debounce` / `throttle`
+
+---
+
+## 常见问题
+
+### 微前端通信不生效
+检查 `window.$wujie` 是否存在，确保在主应用中正确加载子应用
+
+### 拖拽功能异常
+检查是否正确引入 `vuedraggable` 和 `Sortable.js`，确保数据使用 `v-model` 双向绑定
+
+### 路由跳转 404
+确认路由配置中的 path 和 name 正确，检查是否使用 History 模式
+
+### 样式不生效
+- SFC: 检查是否添加 `scoped` 属性
+- JSX: 检查 CSS Modules 导入和类名使用是否正确
+
+---
+
+**最后更新**: 2026-01-10
+**维护者**: AI Assistant

package/app/wujie-wk/wujie-vue3-child/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

package/app/wujie-wk/wujie-vue3-child/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>