# 医梦门诊助手 — 统一入口客户端 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       # 应用入口
```