emoon-portal

医梦门诊助手 — 统一入口客户端 Web Demo

基于 Vue 3 + TypeScript + Vite 构建的自助终端前端演示应用。

环境要求

• Node.js >= 20
• pnpm >= 9

快速启动

# 安装依赖
pnpm install

# 启动开发服务器（默认 http://127.0.0.1:5173）
pnpm dev

# 生产构建
pnpm build

# 预览生产构建
pnpm preview

测试

# 单元测试（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       # 应用入口