|
|
@@ -0,0 +1,76 @@
|
|
|
+# 医梦门诊助手 — 统一入口客户端 Web Demo
|
|
|
+
|
|
|
+基于 Vue 3 + TypeScript + Vite 构建的自助终端前端演示应用。
|
|
|
+
|
|
|
+## 环境要求
|
|
|
+
|
|
|
+- Node.js >= 20
|
|
|
+- pnpm >= 9
|
|
|
+
|
|
|
+## 快速启动
|
|
|
+
|
|
|
+```bash
|
|
|
+# 安装依赖
|
|
|
+pnpm install
|
|
|
+
|
|
|
+# 启动开发服务器（默认 http://127.0.0.1:5173）
|
|
|
+pnpm dev
|
|
|
+
|
|
|
+# 生产构建
|
|
|
+pnpm build
|
|
|
+
|
|
|
+# 预览生产构建
|
|
|
+pnpm preview
|
|
|
+```
|
|
|
+
|
|
|
+## 测试
|
|
|
+
|
|
|
+```bash
|
|
|
+# 单元测试（Vitest）
|
|
|
+pnpm test:unit
|
|
|
+
|
|
|
+# E2E 测试（Playwright，需先安装浏览器）
|
|
|
+npx playwright install chromium
|
|
|
+pnpm test:e2e
|
|
|
+
|
|
|
+# 全部测试
|
|
|
+pnpm test
|
|
|
+```
|
|
|
+
|
|
|
+## Demo 模式
|
|
|
+
|
|
|
+默认开启 Demo 模式（`VITE_DEMO_MODE !== 'false'`），无需后端即可体验完整挂号流程：
|
|
|
+
|
|
|
+1. 在中间对话区输入任意文字并发送
|
|
|
+2. 右侧依次选择：科室 → 医生 → 时间 → 确认挂号 → Mock 支付
|
|
|
+3. 挂号进度条随卡片切换同步推进
|
|
|
+
|
|
|
+关闭 Demo 模式需配置环境变量 `VITE_DEMO_MODE=false` 并指定后端地址 `VITE_API_BASE_URL`。
|
|
|
+
|
|
|
+## 技术栈
|
|
|
+
|
|
|
+| 类别 | 方案 |
|
|
|
+|------|------|
|
|
|
+| 框架 | Vue 3 (Composition API) |
|
|
|
+| 语言 | TypeScript |
|
|
|
+| 构建 | Vite 6 |
|
|
|
+| 状态管理 | Pinia |
|
|
|
+| 单元测试 | Vitest + @vue/test-utils |
|
|
|
+| E2E 测试 | Playwright |
|
|
|
+| 类型检查 | vue-tsc |
|
|
|
+
|
|
|
+## 目录结构
|
|
|
+
|
|
|
+```
|
|
|
+src/
|
|
|
+├── api/ # SSE 解析器、API 客户端、类型定义、Demo 数据
|
|
|
+├── cards/ # 6 种挂号卡片 + CardRenderer 路由
|
|
|
+├── chat/ # 对话面板、输入框、消息气泡
|
|
|
+├── demo/ # Demo 模式开关
|
|
|
+├── layouts/ # AppShell 三栏布局、ContextPanel 状态机、医生形象
|
|
|
+├── state/ # Pinia 全局状态 store
|
|
|
+├── theme/ # 设计令牌 CSS 变量
|
|
|
+├── assets/ # 静态资源
|
|
|
+├── App.vue # 根组件
|
|
|
+└── main.ts # 应用入口
|
|
|
+```
|
