npmapps 1.1.6 → 1.3.1

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

@@ -1,427 +0,0 @@
-# 项目记忆文件 - 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

@@ -1,5 +0,0 @@
-# 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

@@ -1,13 +0,0 @@
-<!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>