Initial commit: HealthCarePregnant project documentation and platform
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
selfrelease
@@ -0,0 +1,9 @@
|
||||
node_modules
|
||||
dist
|
||||
.env
|
||||
.env.local
|
||||
*.log
|
||||
.git
|
||||
.DS_Store
|
||||
Dockerfile
|
||||
.dockerignore
|
||||
@@ -0,0 +1,16 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs', 'vite.config.ts'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
|
||||
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,6 @@
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
.DS_Store
|
||||
.vite
|
||||
@@ -0,0 +1,12 @@
|
||||
# PCM 孕妇端静态镜像：Vite 构建 → nginx 托管
|
||||
FROM node:20-alpine AS build
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm ci
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:1.27-alpine AS runtime
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
EXPOSE 80
|
||||
@@ -0,0 +1,64 @@
|
||||
# PCM 孕妇端 (patient-app · T-8.1)
|
||||
|
||||
孕产个案管理平台 **孕妇/家属端**。移动优先 Web 应用，**AI 对话优先**，对接 `backend` 已完成的 REST API。
|
||||
|
||||
UI 依据 `../../3-ui-style-PCM.md`（温暖、柔和、低焦虑），功能映射 `../../1-prd-PCM.md` §3.2 / REQ-7、REQ-1、REQ-9 等。
|
||||
|
||||
## 技术栈
|
||||
|
||||
- Vite + React 18 + TypeScript
|
||||
- react-router-dom 路由
|
||||
- 原生 CSS + Design Tokens（`src/styles/tokens.css`，双端可共享品牌色）
|
||||
|
||||
## 目录
|
||||
|
||||
```
|
||||
src/
|
||||
├── api/ # 后端契约类型 + fetch 客户端
|
||||
├── auth/ # 会话/鉴权上下文与持久化
|
||||
├── components/ # 底部导航、Toast、建档表单
|
||||
├── lib/ # usePatient 钩子、格式化工具
|
||||
├── pages/ # 登录/首页/聊天/数据/任务/我/知情同意
|
||||
└── styles/ # 设计令牌与全局样式
|
||||
```
|
||||
|
||||
## 开发
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev # http://localhost:5173 ，/api 代理到后端 (默认 http://localhost:3000)
|
||||
```
|
||||
|
||||
先启动后端：在 `../backend` 执行 `npm run start`。
|
||||
|
||||
可用环境变量 `PCM_API_TARGET` 覆盖代理目标，生产构建用 `VITE_API_BASE` 指定网关地址。
|
||||
|
||||
## 脚本
|
||||
|
||||
- `npm run dev`：开发服务器
|
||||
- `npm run build`：类型检查 + 生产构建
|
||||
- `npm run lint`：ESLint（零警告门槛）
|
||||
- `npm run preview`：预览构建产物
|
||||
|
||||
## 已实现页面（T-8.1）
|
||||
|
||||
| 页面 | 说明 | 映射 |
|
||||
|------|------|------|
|
||||
| 登录/注册 | 含孕妇/家属知情同意签署（未签拒绝注册） | NFR-1、T-1.1 |
|
||||
| 首页(助手) | 问候+孕周、聊天主入口、今日健康、意图卡片、更多功能 | REQ-7/10.1、UI §5 |
|
||||
| 聊天页 | RAG 问答，气泡 + 强制溯源 citations，无依据明确提示就医 | REQ-7.2/7.3 |
|
||||
| 数据页 | 手动录入指标 + 观测列表 + 可解释预警（含规则溯源） | REQ-1.1、REQ-3 |
|
||||
| 任务/打卡页 | 提醒列表 + 打卡，高风险运动→休息自动调整提示 | REQ-9.1/9.2 |
|
||||
| 我的页 | 档案/孕周/风险分层、知情同意与隐私、退出 | REQ-2、NFR-1 |
|
||||
|
||||
## 与后端对接的接口
|
||||
|
||||
`POST /auth/register`、`/auth/login`、`POST/GET /patients`、`/patients/:id`、
|
||||
`POST/GET /patients/:id/observations`、`GET /patients/:id/alerts`、
|
||||
`GET /ai/ask`、`GET/POST /patients/:id/reminders`。
|
||||
|
||||
## 迁移到微信小程序
|
||||
|
||||
本端按 `4-arch-PCM.md` 定位最终目标为微信小程序。当前以可运行、可验证的移动 Web 实现核心交互与设计；
|
||||
生产可经 **Taro**（React 语法编译到小程序 + H5）迁移，复用本项目的 Design Token 与组件结构，
|
||||
API 客户端 (`src/api`) 与领域类型可直接沿用。
|
||||
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<meta name="theme-color" content="#fff7f3" />
|
||||
<title>孕期助手</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
# 孕妇端 nginx：SPA 客户端路由回退 + /api 反向代理到后端
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# 后端 API 反代（容器内服务名 backend）
|
||||
location /api/ {
|
||||
proxy_pass http://backend:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
|
||||
# SPA 路由回退
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
+3570
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "pcm-patient-app",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"description": "PCM 孕产个案管理平台 · 孕妇/家属端（移动优先 Web，AI 对话优先）。可经 Taro 移植为微信小程序。",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext ts,tsx --max-warnings 0",
|
||||
"typecheck": "tsc -b --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.456.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.11",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
||||
"@typescript-eslint/parser": "^7.18.0",
|
||||
"@vitejs/plugin-react": "^4.3.2",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-plugin-react-hooks": "^4.6.2",
|
||||
"eslint-plugin-react-refresh": "^0.4.12",
|
||||
"typescript": "^5.5.4",
|
||||
"vite": "^5.4.8"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { BrowserRouter, Navigate, Outlet, Route, Routes } from 'react-router-dom';
|
||||
import { AuthProvider, useAuth } from './auth/AuthContext';
|
||||
import { ToastProvider } from './components/Toast';
|
||||
import { BottomNav } from './components/BottomNav';
|
||||
import { LoginPage } from './pages/LoginPage';
|
||||
import { HomePage } from './pages/HomePage';
|
||||
import { ChatPage } from './pages/ChatPage';
|
||||
import { DataPage } from './pages/DataPage';
|
||||
import { TasksPage } from './pages/TasksPage';
|
||||
import { MePage } from './pages/MePage';
|
||||
import { OnboardingPage } from './pages/OnboardingPage';
|
||||
|
||||
function ProtectedLayout(): JSX.Element {
|
||||
const { user, ready } = useAuth();
|
||||
if (!ready) return <FullScreenLoading />;
|
||||
if (!user) return <Navigate to="/login" replace />;
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<Outlet />
|
||||
<BottomNav />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProtectedFull(): JSX.Element {
|
||||
const { user, ready } = useAuth();
|
||||
if (!ready) return <FullScreenLoading />;
|
||||
if (!user) return <Navigate to="/login" replace />;
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<Outlet />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FullScreenLoading(): JSX.Element {
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<div className="page center" style={{ paddingTop: '40%' }}>
|
||||
<p className="muted">加载中…</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PublicOnly({ children }: { children: JSX.Element }): JSX.Element {
|
||||
const { user, ready } = useAuth();
|
||||
if (!ready) return <FullScreenLoading />;
|
||||
if (user) return <Navigate to="/home" replace />;
|
||||
return children;
|
||||
}
|
||||
|
||||
export function App(): JSX.Element {
|
||||
return (
|
||||
<AuthProvider>
|
||||
<ToastProvider>
|
||||
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
|
||||
<Routes>
|
||||
<Route
|
||||
path="/login"
|
||||
element={
|
||||
<PublicOnly>
|
||||
<LoginPage />
|
||||
</PublicOnly>
|
||||
}
|
||||
/>
|
||||
<Route path="/onboarding" element={<OnboardingPage />} />
|
||||
<Route element={<ProtectedLayout />}>
|
||||
<Route path="/home" element={<HomePage />} />
|
||||
<Route path="/data" element={<DataPage />} />
|
||||
<Route path="/tasks" element={<TasksPage />} />
|
||||
<Route path="/me" element={<MePage />} />
|
||||
</Route>
|
||||
<Route element={<ProtectedFull />}>
|
||||
<Route path="/chat" element={<ChatPage />} />
|
||||
</Route>
|
||||
<Route path="*" element={<Navigate to="/home" replace />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</ToastProvider>
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
// 轻量 fetch 客户端：统一前缀、令牌注入、错误处理。
|
||||
// dev 环境经 Vite proxy 转发到后端；生产可用 VITE_API_BASE 覆盖。
|
||||
|
||||
import type {
|
||||
Alert,
|
||||
AuthResult,
|
||||
CreatePatientDto,
|
||||
Observation,
|
||||
PatientSummary,
|
||||
QaAnswer,
|
||||
RecordObservationResult,
|
||||
Reminder,
|
||||
ReminderType,
|
||||
Role,
|
||||
EmotionCheckin,
|
||||
} from './types';
|
||||
|
||||
const API_BASE = (import.meta.env.VITE_API_BASE as string | undefined) ?? '/api';
|
||||
|
||||
let authToken: string | null = null;
|
||||
|
||||
export function setAuthToken(token: string | null): void {
|
||||
authToken = token;
|
||||
}
|
||||
|
||||
export class ApiError extends Error {
|
||||
constructor(
|
||||
public status: number,
|
||||
message: string,
|
||||
) {
|
||||
super(message);
|
||||
this.name = 'ApiError';
|
||||
}
|
||||
}
|
||||
|
||||
async function request<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
const headers = new Headers(init?.headers);
|
||||
headers.set('Content-Type', 'application/json');
|
||||
if (authToken) {
|
||||
headers.set('Authorization', `Bearer ${authToken}`);
|
||||
}
|
||||
|
||||
let res: Response;
|
||||
try {
|
||||
res = await fetch(`${API_BASE}${path}`, { ...init, headers });
|
||||
} catch {
|
||||
throw new ApiError(0, '无法连接服务器，请稍后再试');
|
||||
}
|
||||
|
||||
if (!res.ok) {
|
||||
let message = `请求失败 (${res.status})`;
|
||||
try {
|
||||
const body = (await res.json()) as { message?: string | string[] };
|
||||
if (body?.message) {
|
||||
message = Array.isArray(body.message) ? body.message.join('；') : body.message;
|
||||
}
|
||||
} catch {
|
||||
// 忽略非 JSON 响应体
|
||||
}
|
||||
throw new ApiError(res.status, message);
|
||||
}
|
||||
|
||||
if (res.status === 204) {
|
||||
return undefined as T;
|
||||
}
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
|
||||
function qs(params: Record<string, string>): string {
|
||||
return new URLSearchParams(params).toString();
|
||||
}
|
||||
|
||||
export const api = {
|
||||
// 鉴权
|
||||
register: (body: {
|
||||
username: string;
|
||||
password: string;
|
||||
role: Role;
|
||||
consent?: boolean;
|
||||
}): Promise<AuthResult> =>
|
||||
request('/auth/register', { method: 'POST', body: JSON.stringify(body) }),
|
||||
|
||||
login: (username: string, password: string): Promise<AuthResult> =>
|
||||
request('/auth/login', { method: 'POST', body: JSON.stringify({ username, password }) }),
|
||||
|
||||
// 档案
|
||||
createPatient: (dto: CreatePatientDto): Promise<PatientSummary> =>
|
||||
request('/patients', { method: 'POST', body: JSON.stringify(dto) }),
|
||||
|
||||
getPatient: (id: string): Promise<PatientSummary> => request(`/patients/${id}`),
|
||||
|
||||
listPatients: (): Promise<PatientSummary[]> => request('/patients'),
|
||||
|
||||
// 观测值
|
||||
recordObservation: (
|
||||
patientId: string,
|
||||
body: { indicator: string; value: number; measuredAt?: string; source?: 'manual' | 'device' },
|
||||
): Promise<RecordObservationResult> =>
|
||||
request(`/patients/${patientId}/observations`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(body),
|
||||
}),
|
||||
|
||||
listObservations: (patientId: string): Promise<Observation[]> =>
|
||||
request(`/patients/${patientId}/observations`),
|
||||
|
||||
// 预警
|
||||
listAlerts: (patientId: string): Promise<Alert[]> => request(`/patients/${patientId}/alerts`),
|
||||
|
||||
// 知识问答（孕妇端聊天主入口）
|
||||
ask: (q: string): Promise<QaAnswer> => request(`/ai/ask?${qs({ q })}`),
|
||||
|
||||
// 提醒
|
||||
listReminders: (patientId: string): Promise<Reminder[]> =>
|
||||
request(`/patients/${patientId}/reminders`),
|
||||
|
||||
dispatchReminder: (
|
||||
patientId: string,
|
||||
body: { type: ReminderType; message?: string; scheduledAt?: string },
|
||||
): Promise<Reminder> =>
|
||||
request(`/patients/${patientId}/reminders`, { method: 'POST', body: JSON.stringify(body) }),
|
||||
|
||||
// 情绪打卡 (T-D.9)
|
||||
createEmotion: (body: { score: number; note: string }): Promise<EmotionCheckin> =>
|
||||
request('/emotions', { method: 'POST', body: JSON.stringify(body) }),
|
||||
listEmotions: (patientId: string): Promise<EmotionCheckin[]> =>
|
||||
request(`/emotions/patient/${patientId}`),
|
||||
};
|
||||
@@ -0,0 +1,157 @@
|
||||
// 与后端契约一致的类型定义（镜像 backend/src/modules/*/*.types.ts）。
|
||||
// 仅包含孕妇端使用到的部分。
|
||||
|
||||
export type Role = 'patient' | 'family' | 'case_manager' | 'physician' | 'operator' | 'admin';
|
||||
export type RiskLevel = 'low' | 'medium' | 'high';
|
||||
export type Trimester = 'first' | 'second' | 'third';
|
||||
|
||||
export interface AuthUser {
|
||||
id: string;
|
||||
username: string;
|
||||
role: Role;
|
||||
consentSigned: boolean;
|
||||
}
|
||||
|
||||
export interface AuthResult {
|
||||
token: string;
|
||||
user: AuthUser;
|
||||
}
|
||||
|
||||
export interface CreatePatientDto {
|
||||
name: string;
|
||||
age: number;
|
||||
heightCm?: number;
|
||||
prePregnancyWeightKg?: number;
|
||||
lmp?: string;
|
||||
edd?: string;
|
||||
multipleGestation?: boolean;
|
||||
historyGdm?: boolean;
|
||||
historyPih?: boolean;
|
||||
adversePregnancyHistory?: boolean;
|
||||
chronicConditions?: boolean;
|
||||
}
|
||||
|
||||
export interface PatientSummary {
|
||||
id: string;
|
||||
patientNo: string;
|
||||
name: string;
|
||||
age: number;
|
||||
heightCm?: number;
|
||||
prePregnancyWeightKg?: number;
|
||||
prePregnancyBmi?: number;
|
||||
lmp: string;
|
||||
edd: string;
|
||||
multipleGestation: boolean;
|
||||
historyGdm: boolean;
|
||||
historyPih: boolean;
|
||||
adversePregnancyHistory: boolean;
|
||||
chronicConditions: boolean;
|
||||
initialRiskLevel: RiskLevel;
|
||||
initialRiskFactors: string[];
|
||||
createdAt: string;
|
||||
gestationalWeeks: number;
|
||||
gestationalDays: number;
|
||||
trimester: Trimester;
|
||||
}
|
||||
|
||||
export type ObservationSource = 'manual' | 'device';
|
||||
export type QcStatus = 'accepted' | 'rejected';
|
||||
|
||||
export interface Observation {
|
||||
id: string;
|
||||
patientId: string;
|
||||
indicator: string;
|
||||
value: number;
|
||||
unit: string;
|
||||
measuredAt: string;
|
||||
source: ObservationSource;
|
||||
qcStatus: QcStatus;
|
||||
qcFlags: string[];
|
||||
gestationalWeeks: number;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface RecordObservationResult {
|
||||
observation: Observation;
|
||||
/** 质控拒绝时为 null；接受时可能产生一条预警 */
|
||||
alert: Alert | null;
|
||||
}
|
||||
|
||||
export type AlertStatus = 'open' | 'acknowledged' | 'resolved';
|
||||
|
||||
export interface Alert {
|
||||
id: string;
|
||||
patientId: string;
|
||||
observationId: string;
|
||||
indicator: string;
|
||||
value: number;
|
||||
level: RiskLevel;
|
||||
ruleIds: string[];
|
||||
messages: string[];
|
||||
status: AlertStatus;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export type AuthorityLevel = 'authoritative' | 'reference' | 'self';
|
||||
|
||||
export interface KnowledgeCitation {
|
||||
id: string;
|
||||
title: string;
|
||||
source: string;
|
||||
authority: AuthorityLevel;
|
||||
}
|
||||
|
||||
export interface QaAnswer {
|
||||
grounded: boolean;
|
||||
answer: string;
|
||||
citations: KnowledgeCitation[];
|
||||
}
|
||||
|
||||
export interface IndicatorOption {
|
||||
type: string;
|
||||
label: string;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
// 与 backend/src/modules/analysis/indicator.ts 对齐
|
||||
export const INDICATOR_OPTIONS: IndicatorOption[] = [
|
||||
{ type: 'fasting_glucose', label: '空腹血糖', unit: 'mmol/L' },
|
||||
{ type: 'postprandial_glucose', label: '餐后血糖', unit: 'mmol/L' },
|
||||
{ type: 'ogtt_1h', label: 'OGTT 1小时血糖', unit: 'mmol/L' },
|
||||
{ type: 'ogtt_2h', label: 'OGTT 2小时血糖', unit: 'mmol/L' },
|
||||
{ type: 'systolic_bp', label: '收缩压', unit: 'mmHg' },
|
||||
{ type: 'diastolic_bp', label: '舒张压', unit: 'mmHg' },
|
||||
{ type: 'weight', label: '体重', unit: 'kg' },
|
||||
{ type: 'heart_rate', label: '心率', unit: 'bpm' },
|
||||
];
|
||||
|
||||
export type ReminderType =
|
||||
| 'exercise'
|
||||
| 'rest'
|
||||
| 'water'
|
||||
| 'medication'
|
||||
| 'checkup'
|
||||
| 'measurement';
|
||||
|
||||
export interface Reminder {
|
||||
id: string;
|
||||
patientId: string;
|
||||
type: ReminderType;
|
||||
effectiveType: ReminderType;
|
||||
message: string;
|
||||
adjustedForRisk: boolean;
|
||||
scheduledAt: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
// 情绪自评打卡 (T-D.9 / D.4)
|
||||
export type EmotionStatus = 'normal' | 'concerning' | 'crisis';
|
||||
|
||||
export interface EmotionCheckin {
|
||||
id: string;
|
||||
patientId: string;
|
||||
score: number;
|
||||
status: EmotionStatus;
|
||||
note: string;
|
||||
createdAt: string;
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from 'react';
|
||||
import { api, setAuthToken } from '../api/client';
|
||||
import type { AuthUser, Role } from '../api/types';
|
||||
import { clearSession, loadSession, saveSession, type Session } from './session';
|
||||
|
||||
interface AuthContextValue {
|
||||
user: AuthUser | null;
|
||||
token: string | null;
|
||||
patientId: string | null;
|
||||
ready: boolean;
|
||||
login: (username: string, password: string) => Promise<void>;
|
||||
register: (input: {
|
||||
username: string;
|
||||
password: string;
|
||||
role: Role;
|
||||
consent: boolean;
|
||||
}) => Promise<void>;
|
||||
logout: () => void;
|
||||
bindPatient: (patientId: string) => void;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||
|
||||
export function AuthProvider({ children }: { children: ReactNode }): JSX.Element {
|
||||
const [session, setSession] = useState<Session | null>(null);
|
||||
const [ready, setReady] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const existing = loadSession();
|
||||
if (existing) {
|
||||
setAuthToken(existing.token);
|
||||
setSession(existing);
|
||||
}
|
||||
setReady(true);
|
||||
}, []);
|
||||
|
||||
const persist = useCallback((next: Session) => {
|
||||
setAuthToken(next.token);
|
||||
saveSession(next);
|
||||
setSession(next);
|
||||
}, []);
|
||||
|
||||
const login = useCallback(
|
||||
async (username: string, password: string) => {
|
||||
const result = await api.login(username, password);
|
||||
persist({ token: result.token, user: result.user, patientId: null });
|
||||
},
|
||||
[persist],
|
||||
);
|
||||
|
||||
const register = useCallback(
|
||||
async (input: { username: string; password: string; role: Role; consent: boolean }) => {
|
||||
const result = await api.register(input);
|
||||
persist({ token: result.token, user: result.user, patientId: null });
|
||||
},
|
||||
[persist],
|
||||
);
|
||||
|
||||
const logout = useCallback(() => {
|
||||
setAuthToken(null);
|
||||
clearSession();
|
||||
setSession(null);
|
||||
}, []);
|
||||
|
||||
const bindPatient = useCallback(
|
||||
(patientId: string) => {
|
||||
setSession((prev) => {
|
||||
if (!prev) return prev;
|
||||
const next = { ...prev, patientId };
|
||||
saveSession(next);
|
||||
return next;
|
||||
});
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const value = useMemo<AuthContextValue>(
|
||||
() => ({
|
||||
user: session?.user ?? null,
|
||||
token: session?.token ?? null,
|
||||
patientId: session?.patientId ?? null,
|
||||
ready,
|
||||
login,
|
||||
register,
|
||||
logout,
|
||||
bindPatient,
|
||||
}),
|
||||
[session, ready, login, register, logout, bindPatient],
|
||||
);
|
||||
|
||||
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-refresh/only-export-components
|
||||
export function useAuth(): AuthContextValue {
|
||||
const ctx = useContext(AuthContext);
|
||||
if (!ctx) throw new Error('useAuth must be used within AuthProvider');
|
||||
return ctx;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
// 会话持久化（localStorage）。包含令牌、用户、绑定的孕妇档案 ID。
|
||||
import type { AuthUser } from '../api/types';
|
||||
|
||||
const KEY = 'pcm.patient.session';
|
||||
|
||||
export interface Session {
|
||||
token: string;
|
||||
user: AuthUser;
|
||||
/** 绑定的孕妇档案 ID（建档后写入；家属端可绑定被照护孕妇） */
|
||||
patientId: string | null;
|
||||
}
|
||||
|
||||
export function loadSession(): Session | null {
|
||||
try {
|
||||
const raw = localStorage.getItem(KEY);
|
||||
if (!raw) return null;
|
||||
return JSON.parse(raw) as Session;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export function saveSession(session: Session): void {
|
||||
localStorage.setItem(KEY, JSON.stringify(session));
|
||||
}
|
||||
|
||||
export function clearSession(): void {
|
||||
localStorage.removeItem(KEY);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: var(--max-width);
|
||||
height: var(--nav-height);
|
||||
background: var(--color-surface);
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
box-shadow: 0 -2px 12px rgba(214, 158, 138, 0.08);
|
||||
z-index: 40;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.bottom-nav__item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
color: var(--color-text-soft);
|
||||
font-size: var(--font-xs);
|
||||
}
|
||||
|
||||
.bottom-nav__item.is-active {
|
||||
color: var(--color-primary-strong);
|
||||
}
|
||||
|
||||
.bottom-nav__icon {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* SVG 图标对齐 */
|
||||
.bottom-nav__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { Activity, ListChecks, MessageCircle, UserRound, type LucideIcon } from 'lucide-react';
|
||||
import './BottomNav.css';
|
||||
|
||||
const TABS: { to: string; label: string; icon: LucideIcon }[] = [
|
||||
{ to: '/home', label: '首页', icon: MessageCircle },
|
||||
{ to: '/data', label: '数据', icon: Activity },
|
||||
{ to: '/tasks', label: '任务', icon: ListChecks },
|
||||
{ to: '/me', label: '我', icon: UserRound },
|
||||
];
|
||||
|
||||
export function BottomNav(): JSX.Element {
|
||||
return (
|
||||
<nav className="bottom-nav">
|
||||
{TABS.map((t) => (
|
||||
<NavLink
|
||||
key={t.to}
|
||||
to={t.to}
|
||||
className={({ isActive }) => `bottom-nav__item${isActive ? ' is-active' : ''}`}
|
||||
>
|
||||
<span className="bottom-nav__icon" aria-hidden>
|
||||
<t.icon size={22} strokeWidth={1.75} />
|
||||
</span>
|
||||
<span className="bottom-nav__label">{t.label}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import { useState } from 'react';
|
||||
import { api, ApiError } from '../api/client';
|
||||
import { useAuth } from '../auth/AuthContext';
|
||||
import { useToast } from './Toast';
|
||||
import type { CreatePatientDto } from '../api/types';
|
||||
|
||||
/** 建档表单（REQ-2.2）。建档成功后绑定到当前会话。 */
|
||||
export function BuildArchive({ onDone }: { onDone?: () => void }): JSX.Element {
|
||||
const { bindPatient } = useAuth();
|
||||
const { show } = useToast();
|
||||
|
||||
const [name, setName] = useState('');
|
||||
const [age, setAge] = useState('');
|
||||
const [heightCm, setHeightCm] = useState('');
|
||||
const [weightKg, setWeightKg] = useState('');
|
||||
const [lmp, setLmp] = useState('');
|
||||
const [multipleGestation, setMultiple] = useState(false);
|
||||
const [historyGdm, setHistoryGdm] = useState(false);
|
||||
const [historyPih, setHistoryPih] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
async function submit(e: React.FormEvent): Promise<void> {
|
||||
e.preventDefault();
|
||||
if (!name.trim() || !age || !lmp) {
|
||||
show('请填写姓名、年龄和末次月经日期');
|
||||
return;
|
||||
}
|
||||
const dto: CreatePatientDto = {
|
||||
name: name.trim(),
|
||||
age: Number(age),
|
||||
heightCm: heightCm ? Number(heightCm) : undefined,
|
||||
prePregnancyWeightKg: weightKg ? Number(weightKg) : undefined,
|
||||
lmp,
|
||||
multipleGestation,
|
||||
historyGdm,
|
||||
historyPih,
|
||||
};
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const summary = await api.createPatient(dto);
|
||||
bindPatient(summary.id);
|
||||
show('建档成功，欢迎你～');
|
||||
onDone?.();
|
||||
} catch (err) {
|
||||
show(err instanceof ApiError ? err.message : '建档失败，请重试');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="card" onSubmit={submit}>
|
||||
<h2 className="section-title" style={{ marginTop: 0 }}>
|
||||
建立我的孕期档案
|
||||
</h2>
|
||||
<p className="muted" style={{ marginBottom: 16 }}>
|
||||
填写基础信息，我们将为你计算孕周并提供个性化陪伴。
|
||||
</p>
|
||||
<div className="field">
|
||||
<label>姓名 / 昵称</label>
|
||||
<input value={name} onChange={(e) => setName(e.target.value)} placeholder="如：小美" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>年龄</label>
|
||||
<input
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
value={age}
|
||||
onChange={(e) => setAge(e.target.value)}
|
||||
placeholder="如：29"
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>末次月经日期（用于计算孕周）</label>
|
||||
<input type="date" value={lmp} onChange={(e) => setLmp(e.target.value)} />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>身高 (cm，选填)</label>
|
||||
<input
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
value={heightCm}
|
||||
onChange={(e) => setHeightCm(e.target.value)}
|
||||
placeholder="如：162"
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>孕前体重 (kg，选填)</label>
|
||||
<input
|
||||
type="number"
|
||||
inputMode="numeric"
|
||||
value={weightKg}
|
||||
onChange={(e) => setWeightKg(e.target.value)}
|
||||
placeholder="如：55"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label className="check-row">
|
||||
<input type="checkbox" checked={multipleGestation} onChange={(e) => setMultiple(e.target.checked)} />
|
||||
<span>多胎妊娠</span>
|
||||
</label>
|
||||
<label className="check-row">
|
||||
<input type="checkbox" checked={historyGdm} onChange={(e) => setHistoryGdm(e.target.checked)} />
|
||||
<span>既往妊娠期糖尿病史</span>
|
||||
</label>
|
||||
<label className="check-row">
|
||||
<input type="checkbox" checked={historyPih} onChange={(e) => setHistoryPih(e.target.checked)} />
|
||||
<span>既往妊娠期高血压史</span>
|
||||
</label>
|
||||
|
||||
<button
|
||||
className="btn btn-primary btn-block"
|
||||
style={{ marginTop: 16 }}
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
>
|
||||
{submitting ? '提交中…' : '完成建档'}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { createContext, useCallback, useContext, useState, type ReactNode } from 'react';
|
||||
|
||||
interface ToastContextValue {
|
||||
show: (message: string) => void;
|
||||
}
|
||||
|
||||
const ToastContext = createContext<ToastContextValue | null>(null);
|
||||
|
||||
export function ToastProvider({ children }: { children: ReactNode }): JSX.Element {
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
|
||||
const show = useCallback((msg: string) => {
|
||||
setMessage(msg);
|
||||
window.setTimeout(() => setMessage(null), 2600);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ show }}>
|
||||
{children}
|
||||
{message && <div className="toast">{message}</div>}
|
||||
</ToastContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-refresh/only-export-components
|
||||
export function useToast(): ToastContextValue {
|
||||
const ctx = useContext(ToastContext);
|
||||
if (!ctx) throw new Error('useToast must be used within ToastProvider');
|
||||
return ctx;
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import type { RiskLevel } from '../api/types';
|
||||
import { INDICATOR_OPTIONS } from '../api/types';
|
||||
|
||||
export function riskLabel(level: RiskLevel): string {
|
||||
return { low: '低风险', medium: '中风险', high: '高风险' }[level];
|
||||
}
|
||||
|
||||
export function riskBadgeClass(level: RiskLevel): string {
|
||||
return { low: 'badge-ok', medium: 'badge-warn', high: 'badge-danger' }[level];
|
||||
}
|
||||
|
||||
const REMINDER_LABELS: Record<string, string> = {
|
||||
exercise: '运动',
|
||||
rest: '休息',
|
||||
water: '喝水',
|
||||
medication: '服药',
|
||||
checkup: '产检',
|
||||
measurement: '监测打卡',
|
||||
};
|
||||
|
||||
export function reminderLabel(type: string): string {
|
||||
return REMINDER_LABELS[type] ?? type;
|
||||
}
|
||||
|
||||
const INDICATOR_LABELS: Record<string, string> = Object.fromEntries(
|
||||
INDICATOR_OPTIONS.map((o) => [o.type, o.label]),
|
||||
);
|
||||
|
||||
export function indicatorLabel(indicator: string): string {
|
||||
return INDICATOR_LABELS[indicator] ?? indicator;
|
||||
}
|
||||
|
||||
export function formatTime(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
if (Number.isNaN(d.getTime())) return iso;
|
||||
const pad = (n: number): string => String(n).padStart(2, '0');
|
||||
return `${d.getMonth() + 1}月${d.getDate()}日 ${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
||||
}
|
||||
|
||||
export function greeting(): string {
|
||||
const h = new Date().getHours();
|
||||
if (h < 6) return '夜深了';
|
||||
if (h < 11) return '早上好';
|
||||
if (h < 14) return '中午好';
|
||||
if (h < 18) return '下午好';
|
||||
return '晚上好';
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
interface Options {
|
||||
/** 轮询间隔（毫秒）。默认 20s。 */
|
||||
intervalMs?: number;
|
||||
/** 是否启用。默认 true。 */
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 多端数据一致同步（T-8.5）：以单一后端为真源，前端通过
|
||||
* - 窗口 focus / 标签可见（visibilitychange）
|
||||
* - 可见时定时轮询
|
||||
* 触发静默刷新，使本端近实时收敛到其他端（孕妇/家属/医护/运营）的改动。
|
||||
*
|
||||
* 注：V1 为"拉取式"近实时；实时推送（WebSocket/SSE）列入 V2。
|
||||
* 仅在页面可见时轮询，避免后台无谓请求。
|
||||
*/
|
||||
export function useAutoRefresh(refresh: () => void, options?: Options): void {
|
||||
const intervalMs = options?.intervalMs ?? 20000;
|
||||
const enabled = options?.enabled ?? true;
|
||||
const saved = useRef(refresh);
|
||||
|
||||
useEffect(() => {
|
||||
saved.current = refresh;
|
||||
}, [refresh]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!enabled) return;
|
||||
const refreshIfVisible = (): void => {
|
||||
if (document.visibilityState === 'visible') saved.current();
|
||||
};
|
||||
const onFocus = (): void => saved.current();
|
||||
window.addEventListener('focus', onFocus);
|
||||
document.addEventListener('visibilitychange', refreshIfVisible);
|
||||
const id = window.setInterval(refreshIfVisible, intervalMs);
|
||||
return () => {
|
||||
window.removeEventListener('focus', onFocus);
|
||||
document.removeEventListener('visibilitychange', refreshIfVisible);
|
||||
window.clearInterval(id);
|
||||
};
|
||||
}, [intervalMs, enabled]);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { api, ApiError } from '../api/client';
|
||||
import type { PatientSummary } from '../api/types';
|
||||
import { useAuth } from '../auth/AuthContext';
|
||||
|
||||
interface UsePatientResult {
|
||||
patient: PatientSummary | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
reload: () => void;
|
||||
}
|
||||
|
||||
/** 加载当前会话绑定的孕妇档案。未建档时 patient 为 null。 */
|
||||
export function usePatient(): UsePatientResult {
|
||||
const { patientId } = useAuth();
|
||||
const [patient, setPatient] = useState<PatientSummary | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const reload = useCallback(() => {
|
||||
if (!patientId) {
|
||||
setPatient(null);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
api
|
||||
.getPatient(patientId)
|
||||
.then(setPatient)
|
||||
.catch((err) => setError(err instanceof ApiError ? err.message : '加载档案失败'))
|
||||
.finally(() => setLoading(false));
|
||||
}, [patientId]);
|
||||
|
||||
useEffect(() => {
|
||||
reload();
|
||||
}, [reload]);
|
||||
|
||||
return { patient, loading, error, reload };
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { App } from './App';
|
||||
import './styles/global.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,126 @@
|
||||
.chat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
}
|
||||
|
||||
.chat__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-weight: 700;
|
||||
font-size: var(--font-lg);
|
||||
}
|
||||
.chat__back {
|
||||
font-size: 22px;
|
||||
width: 32px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.chat__list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.chat__row {
|
||||
display: flex;
|
||||
}
|
||||
.chat__row--user {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.chat__row--assistant {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.chat__bubble {
|
||||
max-width: 82%;
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--font-md);
|
||||
line-height: 1.6;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.chat__bubble--user {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
.chat__bubble--assistant {
|
||||
background: var(--color-surface);
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
.chat__typing {
|
||||
color: var(--color-text-soft);
|
||||
}
|
||||
|
||||
.chat__nogrounded {
|
||||
margin-top: 8px;
|
||||
padding: 8px 10px;
|
||||
background: var(--color-warn-soft);
|
||||
color: var(--color-warn);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.chat__citations {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed var(--color-border);
|
||||
}
|
||||
.chat__citations-title {
|
||||
font-size: var(--font-xs);
|
||||
color: var(--color-text-soft);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.chat__citation {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.chat__citation-text {
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.chat__input {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
|
||||
background: var(--color-surface);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
.chat__input input {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-pill);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
.chat__input input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* SVG 图标对齐 */
|
||||
.chat__back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.chat__nogrounded {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.chat__nogrounded svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { ArrowLeft, AlertTriangle } from 'lucide-react';
|
||||
import { api, ApiError } from '../api/client';
|
||||
import type { KnowledgeCitation } from '../api/types';
|
||||
import './ChatPage.css';
|
||||
|
||||
interface Message {
|
||||
id: string;
|
||||
role: 'user' | 'assistant';
|
||||
text: string;
|
||||
grounded?: boolean;
|
||||
citations?: KnowledgeCitation[];
|
||||
}
|
||||
|
||||
const AUTHORITY_LABEL: Record<string, string> = {
|
||||
authoritative: '权威',
|
||||
reference: '参考',
|
||||
self: '自建',
|
||||
};
|
||||
|
||||
const WELCOME: Message = {
|
||||
id: 'welcome',
|
||||
role: 'assistant',
|
||||
text: '你好呀～我是你的孕期助手。关于孕期饮食、监测、不适或注意事项，都可以问我。我会附上知识来源，遇到拿不准的会建议你及时就医。',
|
||||
};
|
||||
|
||||
export function ChatPage(): JSX.Element {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const initialQuestion = (location.state as { initialQuestion?: string } | null)?.initialQuestion;
|
||||
|
||||
const [messages, setMessages] = useState<Message[]>([WELCOME]);
|
||||
const [input, setInput] = useState('');
|
||||
const [sending, setSending] = useState(false);
|
||||
const listRef = useRef<HTMLDivElement>(null);
|
||||
const askedInitial = useRef(false);
|
||||
|
||||
async function send(question: string): Promise<void> {
|
||||
const q = question.trim();
|
||||
if (!q || sending) return;
|
||||
const userMsg: Message = { id: `u-${Date.now()}`, role: 'user', text: q };
|
||||
setMessages((prev) => [...prev, userMsg]);
|
||||
setInput('');
|
||||
setSending(true);
|
||||
try {
|
||||
const answer = await api.ask(q);
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id: `a-${Date.now()}`,
|
||||
role: 'assistant',
|
||||
text: answer.answer,
|
||||
grounded: answer.grounded,
|
||||
citations: answer.citations,
|
||||
},
|
||||
]);
|
||||
} catch (err) {
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id: `e-${Date.now()}`,
|
||||
role: 'assistant',
|
||||
text: err instanceof ApiError ? err.message : '抱歉，我暂时没能回答，请稍后再试。',
|
||||
},
|
||||
]);
|
||||
} finally {
|
||||
setSending(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (initialQuestion && !askedInitial.current) {
|
||||
askedInitial.current = true;
|
||||
void send(initialQuestion);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [initialQuestion]);
|
||||
|
||||
useEffect(() => {
|
||||
listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: 'smooth' });
|
||||
}, [messages]);
|
||||
|
||||
return (
|
||||
<div className="chat">
|
||||
<header className="chat__header">
|
||||
<button className="chat__back" onClick={() => navigate(-1)} type="button" aria-label="返回">
|
||||
<ArrowLeft size={22} strokeWidth={1.75} />
|
||||
</button>
|
||||
<span>孕期助手</span>
|
||||
</header>
|
||||
|
||||
<div className="chat__list" ref={listRef}>
|
||||
{messages.map((m) => (
|
||||
<div key={m.id} className={`chat__row chat__row--${m.role}`}>
|
||||
<div className={`chat__bubble chat__bubble--${m.role}`}>
|
||||
<p>{m.text}</p>
|
||||
{m.role === 'assistant' && m.grounded === false && (
|
||||
<p className="chat__nogrounded">
|
||||
<AlertTriangle size={15} strokeWidth={1.9} /> 这个问题我暂时没有权威依据，建议你咨询医生或管理师。
|
||||
</p>
|
||||
)}
|
||||
{m.citations && m.citations.length > 0 && (
|
||||
<div className="chat__citations">
|
||||
<p className="chat__citations-title">来源</p>
|
||||
{m.citations.map((c) => (
|
||||
<div key={c.id} className="chat__citation">
|
||||
<span className="badge badge-ok">{AUTHORITY_LABEL[c.authority] ?? c.authority}</span>
|
||||
<span className="chat__citation-text">
|
||||
{c.title}
|
||||
<span className="muted"> · {c.source}</span>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{sending && (
|
||||
<div className="chat__row chat__row--assistant">
|
||||
<div className="chat__bubble chat__bubble--assistant chat__typing">正在思考…</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<form
|
||||
className="chat__input"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
void send(input);
|
||||
}}
|
||||
>
|
||||
<input
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="问问孕期助手…"
|
||||
/>
|
||||
<button className="btn btn-primary" type="submit" disabled={sending || !input.trim()}>
|
||||
发送
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
.data-alert {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
border-left: 4px solid var(--color-border);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.data-alert--medium {
|
||||
border-left-color: var(--color-warn);
|
||||
}
|
||||
.data-alert--high {
|
||||
border-left-color: var(--color-danger);
|
||||
}
|
||||
.data-alert__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--space-2);
|
||||
font-size: var(--font-xs);
|
||||
}
|
||||
.data-alert__indicator {
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.data-alert__msg {
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
.data-alert__trace {
|
||||
font-size: var(--font-xs);
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-3) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.data-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.data-row__name {
|
||||
font-weight: 600;
|
||||
}
|
||||
.data-row__time {
|
||||
font-size: var(--font-xs);
|
||||
}
|
||||
.data-row__value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { api, ApiError } from '../api/client';
|
||||
import { useAuth } from '../auth/AuthContext';
|
||||
import { useToast } from '../components/Toast';
|
||||
import { usePatient } from '../lib/usePatient';
|
||||
import { useAutoRefresh } from '../lib/useAutoRefresh';
|
||||
import { BuildArchive } from '../components/BuildArchive';
|
||||
import { INDICATOR_OPTIONS } from '../api/types';
|
||||
import type { Alert, Observation } from '../api/types';
|
||||
import { formatTime, indicatorLabel, riskBadgeClass, riskLabel } from '../lib/format';
|
||||
import './DataPage.css';
|
||||
|
||||
export function DataPage(): JSX.Element {
|
||||
const { patientId } = useAuth();
|
||||
const { patient, loading: patientLoading, reload: reloadPatient } = usePatient();
|
||||
const { show } = useToast();
|
||||
|
||||
const [indicator, setIndicator] = useState(INDICATOR_OPTIONS[0].type);
|
||||
const [value, setValue] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [observations, setObservations] = useState<Observation[]>([]);
|
||||
const [alerts, setAlerts] = useState<Alert[]>([]);
|
||||
|
||||
const unit = INDICATOR_OPTIONS.find((o) => o.type === indicator)?.unit ?? '';
|
||||
|
||||
const load = useCallback(() => {
|
||||
if (!patientId) return;
|
||||
void Promise.all([api.listObservations(patientId), api.listAlerts(patientId)]).then(
|
||||
([obs, al]) => {
|
||||
setObservations([...obs].reverse());
|
||||
setAlerts([...al].reverse());
|
||||
},
|
||||
);
|
||||
}, [patientId]);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
// 多端一致：跨端（医护录入/预警）变更近实时收敛
|
||||
useAutoRefresh(load);
|
||||
|
||||
async function record(e: React.FormEvent): Promise<void> {
|
||||
e.preventDefault();
|
||||
if (!patientId || value === '') {
|
||||
show('请输入数值');
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const result = await api.recordObservation(patientId, {
|
||||
indicator,
|
||||
value: Number(value),
|
||||
source: 'manual',
|
||||
});
|
||||
setValue('');
|
||||
if (result.observation.qcStatus === 'rejected') {
|
||||
show('数值看起来不太合理，已标记但不参与分析');
|
||||
} else if (result.alert) {
|
||||
show(`已记录，发现${riskLabel(result.alert.level)}信号，请留意`);
|
||||
} else {
|
||||
show('记录成功，数值正常，真棒～');
|
||||
}
|
||||
load();
|
||||
} catch (err) {
|
||||
show(err instanceof ApiError ? err.message : '记录失败，请重试');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!patient && !patientLoading) {
|
||||
return (
|
||||
<div className="page">
|
||||
<h1 className="section-title" style={{ marginTop: 0 }}>
|
||||
先建立档案
|
||||
</h1>
|
||||
<BuildArchive onDone={reloadPatient} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<h1 className="section-title" style={{ marginTop: 0 }}>
|
||||
记录我的指标
|
||||
</h1>
|
||||
|
||||
<form className="card" onSubmit={record}>
|
||||
<div className="field">
|
||||
<label>指标</label>
|
||||
<select value={indicator} onChange={(e) => setIndicator(e.target.value)}>
|
||||
{INDICATOR_OPTIONS.map((o) => (
|
||||
<option key={o.type} value={o.type}>
|
||||
{o.label}（{o.unit}）
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>数值（{unit}）</label>
|
||||
<input
|
||||
type="number"
|
||||
inputMode="decimal"
|
||||
step="0.1"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
placeholder={`请输入${indicatorLabel(indicator)}`}
|
||||
/>
|
||||
</div>
|
||||
<button className="btn btn-primary btn-block" type="submit" disabled={submitting}>
|
||||
{submitting ? '记录中…' : '记录'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{alerts.length > 0 && (
|
||||
<>
|
||||
<h2 className="section-title">健康提醒</h2>
|
||||
{alerts.map((a) => (
|
||||
<div key={a.id} className={`data-alert data-alert--${a.level}`}>
|
||||
<div className="data-alert__head">
|
||||
<span className={`badge ${riskBadgeClass(a.level)}`}>{riskLabel(a.level)}</span>
|
||||
<span className="muted">{formatTime(a.createdAt)}</span>
|
||||
</div>
|
||||
<p className="data-alert__indicator">
|
||||
{indicatorLabel(a.indicator)}：{a.value}
|
||||
</p>
|
||||
{a.messages.map((m, i) => (
|
||||
<p key={i} className="data-alert__msg">
|
||||
{m}
|
||||
</p>
|
||||
))}
|
||||
<p className="data-alert__trace muted">
|
||||
依据规则：{a.ruleIds.join('、') || '—'}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
<h2 className="section-title">最近记录</h2>
|
||||
{observations.length === 0 ? (
|
||||
<p className="muted">还没有记录，录入第一条吧～</p>
|
||||
) : (
|
||||
<div className="card">
|
||||
{observations.slice(0, 20).map((o) => (
|
||||
<div key={o.id} className="data-row">
|
||||
<div>
|
||||
<p className="data-row__name">{indicatorLabel(o.indicator)}</p>
|
||||
<p className="muted data-row__time">
|
||||
{formatTime(o.measuredAt)} · 孕{o.gestationalWeeks}周
|
||||
</p>
|
||||
</div>
|
||||
<div className="data-row__value">
|
||||
<span>
|
||||
{o.value} {o.unit}
|
||||
</span>
|
||||
{o.qcStatus === 'rejected' && <span className="badge badge-warn">存疑</span>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
.home__greet {
|
||||
margin-top: var(--space-2);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.home__hello {
|
||||
font-size: var(--font-xl);
|
||||
font-weight: 600;
|
||||
}
|
||||
.home__week {
|
||||
font-size: var(--font-md);
|
||||
color: var(--color-text-soft);
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* ===== 渐变 Hero ===== */
|
||||
.home__hero {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: 20px 22px;
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--gradient-hero);
|
||||
box-shadow: var(--shadow-hero);
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.home__hero-glow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(120px 120px at 88% -10%, rgba(255, 255, 255, 0.45), transparent 70%),
|
||||
radial-gradient(140px 140px at 10% 120%, rgba(255, 255, 255, 0.22), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.home__hero-body {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
.home__hero-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: var(--font-xs);
|
||||
font-weight: 600;
|
||||
opacity: 0.92;
|
||||
}
|
||||
.home__hero-title {
|
||||
font-size: var(--font-xl);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.home__hero-sub {
|
||||
font-size: var(--font-sm);
|
||||
opacity: 0.9;
|
||||
}
|
||||
.home__hero-cta {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ===== 柔彩色调（暖系，复用于多处） ===== */
|
||||
[data-tone='peach'] {
|
||||
--tone-bg: var(--c-peach);
|
||||
--tone-ink: var(--c-peach-ink);
|
||||
}
|
||||
[data-tone='rose'] {
|
||||
--tone-bg: var(--c-rose);
|
||||
--tone-ink: var(--c-rose-ink);
|
||||
}
|
||||
[data-tone='mint'] {
|
||||
--tone-bg: var(--c-mint);
|
||||
--tone-ink: var(--c-mint-ink);
|
||||
}
|
||||
[data-tone='lilac'] {
|
||||
--tone-bg: var(--c-lilac);
|
||||
--tone-ink: var(--c-lilac-ink);
|
||||
}
|
||||
|
||||
/* ===== 今日健康 Quick ===== */
|
||||
.home__quick {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.home__quick-card {
|
||||
background: var(--tone-bg, var(--color-surface));
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4) var(--space-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--font-sm);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home__quick-chip {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--tone-ink, var(--color-primary-strong));
|
||||
}
|
||||
|
||||
/* ===== 意图卡片 2x2 柔彩 ===== */
|
||||
.home__intents {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.home__intent {
|
||||
background: var(--tone-bg, var(--color-surface));
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-size: var(--font-md);
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home__intent-chip {
|
||||
flex-shrink: 0;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--tone-ink, var(--color-primary-strong));
|
||||
}
|
||||
.home__intent-label {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* ===== 更多功能 ===== */
|
||||
.home__more {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.home__more button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--font-xs);
|
||||
color: var(--color-text-soft);
|
||||
padding: var(--space-2) 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home__more-chip {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 14px;
|
||||
background: var(--color-surface);
|
||||
box-shadow: var(--shadow-card);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-primary-strong);
|
||||
}
|
||||
|
||||
/* ===== 情绪自评打卡 (T-D.9) ===== */
|
||||
.home__emotion-card {
|
||||
background: linear-gradient(135deg, rgba(255, 123, 137, 0.08) 0%, rgba(255, 171, 142, 0.08) 100%);
|
||||
border: 1px solid rgba(255, 123, 137, 0.15);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.emotion-card__title {
|
||||
font-size: var(--font-md);
|
||||
font-weight: 700;
|
||||
color: var(--color-text-strong);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.emotion-card__box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.emotion-card__desc {
|
||||
font-size: var(--font-sm);
|
||||
color: var(--color-text-soft);
|
||||
margin: 0;
|
||||
}
|
||||
.emotion-card__selectors {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
gap: 4px;
|
||||
}
|
||||
.emotion-score-btn {
|
||||
height: 32px;
|
||||
border: 1px solid rgba(255, 123, 137, 0.15);
|
||||
background: #fff;
|
||||
color: var(--color-text-soft);
|
||||
font-weight: 600;
|
||||
font-size: var(--font-sm);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.emotion-score-btn:hover {
|
||||
background: rgba(255, 123, 137, 0.05);
|
||||
border-color: rgba(255, 123, 137, 0.3);
|
||||
}
|
||||
.emotion-score-btn.active {
|
||||
background: linear-gradient(135deg, #ff7b89 0%, #ffab8e 100%);
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
box-shadow: 0 2px 8px rgba(255, 123, 137, 0.25);
|
||||
}
|
||||
.emotion-card__textarea {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(255, 123, 137, 0.15);
|
||||
border-radius: var(--radius-md);
|
||||
background: #fff;
|
||||
font-size: var(--font-sm);
|
||||
line-height: 1.5;
|
||||
color: var(--color-text);
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.emotion-card__textarea:focus {
|
||||
border-color: rgba(255, 123, 137, 0.4);
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(255, 123, 137, 0.05);
|
||||
}
|
||||
.emotion-card__submit-btn {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #ff7b89 0%, #ffab8e 100%);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: var(--font-md);
|
||||
border-radius: var(--radius-md);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 10px rgba(255, 123, 137, 0.2);
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.emotion-card__submit-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.emotion-card__result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
font-size: var(--font-sm);
|
||||
line-height: 1.5;
|
||||
color: var(--color-text-soft);
|
||||
background: #fff;
|
||||
border: 1px solid rgba(59, 201, 219, 0.15);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.emotion-card__result strong {
|
||||
color: var(--color-text-strong);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,242 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Apple,
|
||||
ArrowRight,
|
||||
BarChart3,
|
||||
CalendarCheck,
|
||||
ClipboardCheck,
|
||||
Droplet,
|
||||
FileText,
|
||||
HeartHandshake,
|
||||
Leaf,
|
||||
LineChart,
|
||||
PencilLine,
|
||||
Sparkles,
|
||||
Sprout,
|
||||
Heart,
|
||||
Smile,
|
||||
CheckCircle2,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
import { api } from '../api/client';
|
||||
import { useToast } from '../components/Toast';
|
||||
import { usePatient } from '../lib/usePatient';
|
||||
import { BuildArchive } from '../components/BuildArchive';
|
||||
import { greeting, riskBadgeClass, riskLabel } from '../lib/format';
|
||||
import './HomePage.css';
|
||||
|
||||
type Tone = 'peach' | 'rose' | 'mint' | 'lilac';
|
||||
|
||||
interface Intent {
|
||||
label: string;
|
||||
q?: string;
|
||||
to?: string;
|
||||
icon: LucideIcon;
|
||||
tone: Tone;
|
||||
}
|
||||
|
||||
const INTENTS: Intent[] = [
|
||||
{ label: '我能吃这个吗？', q: '孕期可以吃西瓜吗', icon: Apple, tone: 'peach' },
|
||||
{ label: '记录今天的血糖', to: '/data', icon: Droplet, tone: 'rose' },
|
||||
{ label: '今天该注意什么？', q: '孕期日常需要注意什么', icon: Leaf, tone: 'mint' },
|
||||
{ label: '孕期不适怎么办', q: '孕期恶心想吐怎么办', icon: HeartHandshake, tone: 'lilac' },
|
||||
];
|
||||
|
||||
const QUICK: { label: string; to: string; icon: LucideIcon; tone: Tone }[] = [
|
||||
{ label: '今日打卡', to: '/data', icon: ClipboardCheck, tone: 'peach' },
|
||||
{ label: '血糖趋势', to: '/data', icon: LineChart, tone: 'rose' },
|
||||
{ label: '产检提醒', to: '/tasks', icon: CalendarCheck, tone: 'mint' },
|
||||
];
|
||||
|
||||
export function HomePage(): JSX.Element {
|
||||
const navigate = useNavigate();
|
||||
const { patient, loading, reload } = usePatient();
|
||||
const { show } = useToast();
|
||||
|
||||
const [emotionScore, setEmotionScore] = useState<number | null>(null);
|
||||
const [emotionNote, setEmotionNote] = useState('');
|
||||
const [hasSubmittedEmotion, setHasSubmittedEmotion] = useState(false);
|
||||
const [submittingEmotion, setSubmittingEmotion] = useState(false);
|
||||
|
||||
async function submitEmotion(): Promise<void> {
|
||||
if (!emotionScore) {
|
||||
show('请选择一个情绪分值哦～');
|
||||
return;
|
||||
}
|
||||
setSubmittingEmotion(true);
|
||||
try {
|
||||
await api.createEmotion({ score: emotionScore, note: emotionNote || '今日情绪状况良好' });
|
||||
show('打卡成功！AI 已过滤异常信号并同步至管理师，祝您好心情🌸');
|
||||
setHasSubmittedEmotion(true);
|
||||
setEmotionNote('');
|
||||
} catch (err) {
|
||||
show('心情记录失败，请稍后重试');
|
||||
} finally {
|
||||
setSubmittingEmotion(false);
|
||||
}
|
||||
}
|
||||
|
||||
function goChat(q?: string): void {
|
||||
navigate('/chat', q ? { state: { initialQuestion: q } } : undefined);
|
||||
}
|
||||
|
||||
if (!patient && !loading) {
|
||||
return (
|
||||
<div className="page">
|
||||
<h1 className="section-title" style={{ marginTop: 0 }}>
|
||||
你好，欢迎～
|
||||
</h1>
|
||||
<BuildArchive onDone={reload} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page home">
|
||||
<header className="home__greet">
|
||||
<p className="home__hello">
|
||||
{greeting()}，{patient?.name ?? ''}
|
||||
</p>
|
||||
{patient && (
|
||||
<p className="home__week">
|
||||
孕 {patient.gestationalWeeks} 周
|
||||
{patient.gestationalDays ? ` ${patient.gestationalDays} 天` : ''}
|
||||
<span className={`badge ${riskBadgeClass(patient.initialRiskLevel)}`} style={{ marginLeft: 8 }}>
|
||||
{riskLabel(patient.initialRiskLevel)}
|
||||
</span>
|
||||
</p>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{/* 渐变 Hero 聊天主入口（AI-first） */}
|
||||
<button className="home__hero" onClick={() => goChat()} type="button">
|
||||
<div className="home__hero-glow" aria-hidden />
|
||||
<div className="home__hero-body">
|
||||
<span className="home__hero-eyebrow">
|
||||
<Sparkles size={14} strokeWidth={2} /> 孕期 AI 助手
|
||||
</span>
|
||||
<span className="home__hero-title">和孕期助手聊聊</span>
|
||||
<span className="home__hero-sub">饮食、监测、不适，随时问我～</span>
|
||||
</div>
|
||||
<span className="home__hero-cta" aria-hidden>
|
||||
<ArrowRight size={22} strokeWidth={2.2} />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* 暖色暖系低焦虑今日心情自评打卡（T-D.9） */}
|
||||
<div className="home__emotion-card">
|
||||
<h3 className="emotion-card__title">
|
||||
<Heart size={16} fill="var(--color-destructive)" stroke="none" />
|
||||
记录今日心情，倾听身体信号
|
||||
</h3>
|
||||
{!hasSubmittedEmotion ? (
|
||||
<div className="emotion-card__box">
|
||||
<p className="emotion-card__desc">你今天的心情几分？(1-10分，分低代表压抑或焦虑)</p>
|
||||
<div className="emotion-card__selectors">
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((score) => (
|
||||
<button
|
||||
key={score}
|
||||
type="button"
|
||||
className={`emotion-score-btn ${emotionScore === score ? 'active' : ''}`}
|
||||
onClick={() => setEmotionScore(score)}
|
||||
>
|
||||
{score === 10 ? <Smile size={14} /> : score}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
className="emotion-card__textarea"
|
||||
placeholder="今天有什么烦心事，或者身体上有什么不舒服吗？我们会实时保护您的私密信息，若有剧烈焦虑，个案管理师将主动为您致电疏导..."
|
||||
value={emotionNote}
|
||||
onChange={(e) => setEmotionNote(e.target.value)}
|
||||
rows={2}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="emotion-card__submit-btn"
|
||||
onClick={submitEmotion}
|
||||
disabled={submittingEmotion}
|
||||
>
|
||||
{submittingEmotion ? '心情记录中…' : '提交今日自评'}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="emotion-card__result animate-fade-in">
|
||||
<CheckCircle2 size={18} style={{ color: 'var(--color-calm)' }} />
|
||||
<span>今日心情已打卡：<strong>{emotionScore}分</strong> · 感谢您的分享，AI 助手已自动保护并为您分析身心信号，祝您孕期好心情🌸</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 今日健康 */}
|
||||
<h2 className="section-title">今日健康</h2>
|
||||
<div className="home__quick">
|
||||
{QUICK.map((q) => (
|
||||
<button
|
||||
key={q.label}
|
||||
className="home__quick-card"
|
||||
data-tone={q.tone}
|
||||
onClick={() => navigate(q.to)}
|
||||
type="button"
|
||||
>
|
||||
<span className="home__quick-chip">
|
||||
<q.icon size={22} strokeWidth={1.9} />
|
||||
</span>
|
||||
{q.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 意图卡片 */}
|
||||
<h2 className="section-title">你可能想问 / 想做</h2>
|
||||
<div className="home__intents">
|
||||
{INTENTS.map((it) => (
|
||||
<button
|
||||
key={it.label}
|
||||
className="home__intent"
|
||||
data-tone={it.tone}
|
||||
onClick={() => (it.to ? navigate(it.to) : goChat(it.q))}
|
||||
type="button"
|
||||
>
|
||||
<span className="home__intent-chip">
|
||||
<it.icon size={20} strokeWidth={1.9} />
|
||||
</span>
|
||||
<span className="home__intent-label">{it.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 更多功能 */}
|
||||
<h2 className="section-title">更多功能</h2>
|
||||
<div className="home__more">
|
||||
<button onClick={() => navigate('/data')} type="button">
|
||||
<span className="home__more-chip">
|
||||
<PencilLine size={22} strokeWidth={1.8} />
|
||||
</span>
|
||||
手动录入
|
||||
</button>
|
||||
<button onClick={() => navigate('/me')} type="button">
|
||||
<span className="home__more-chip">
|
||||
<FileText size={22} strokeWidth={1.8} />
|
||||
</span>
|
||||
健康档案
|
||||
</button>
|
||||
<button onClick={() => navigate('/data')} type="button">
|
||||
<span className="home__more-chip">
|
||||
<BarChart3 size={22} strokeWidth={1.8} />
|
||||
</span>
|
||||
我的报告
|
||||
</button>
|
||||
<button onClick={() => goChat('孕期可以做哪些调养')} type="button">
|
||||
<span className="home__more-chip">
|
||||
<Sprout size={22} strokeWidth={1.8} />
|
||||
</span>
|
||||
调养建议
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
.login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: var(--space-6);
|
||||
}
|
||||
|
||||
.login__hero {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.login__logo {
|
||||
font-size: 56px;
|
||||
line-height: 1;
|
||||
}
|
||||
.login__hero h1 {
|
||||
font-size: var(--font-xxl);
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.login__tabs {
|
||||
display: flex;
|
||||
background: var(--color-surface-soft);
|
||||
border-radius: var(--radius-pill);
|
||||
padding: 4px;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.login__tabs button {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-soft);
|
||||
}
|
||||
.login__tabs button.is-active {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-primary-strong);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.login__consent {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--font-sm);
|
||||
color: var(--color-text-soft);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.login__consent input {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.login__consent a {
|
||||
color: var(--color-primary-strong);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.login__hint {
|
||||
margin-top: var(--space-4);
|
||||
font-size: var(--font-xs);
|
||||
}
|
||||
|
||||
.login__demo-panel {
|
||||
margin-top: var(--space-4);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border: 1px dashed var(--color-primary-light, #ffd3e0);
|
||||
background-color: var(--color-surface-soft, #fff5f7);
|
||||
}
|
||||
|
||||
.login__demo-title {
|
||||
font-size: var(--font-sm);
|
||||
font-weight: 600;
|
||||
color: var(--color-primary-strong, #c2185b);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.login__demo-buttons {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.login__demo-buttons .btn {
|
||||
flex: 1;
|
||||
padding: 6px 12px;
|
||||
font-size: var(--font-xs);
|
||||
border-radius: var(--radius-md, 8px);
|
||||
}
|
||||
|
||||
.login__demo-desc {
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
color: var(--color-text-muted, #757575);
|
||||
}
|
||||
|
||||
|
||||
/* SVG 图标 */
|
||||
.login__logo {
|
||||
color: var(--color-primary-strong);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.login__demo-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Flower2, Lightbulb } from 'lucide-react';
|
||||
import { useAuth } from '../auth/AuthContext';
|
||||
import { useToast } from '../components/Toast';
|
||||
import { ApiError } from '../api/client';
|
||||
import type { Role } from '../api/types';
|
||||
import './LoginPage.css';
|
||||
|
||||
type Mode = 'login' | 'register';
|
||||
|
||||
export function LoginPage(): JSX.Element {
|
||||
const { login, register } = useAuth();
|
||||
const { show } = useToast();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [mode, setMode] = useState<Mode>('login');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [role, setRole] = useState<Role>('patient');
|
||||
const [consent, setConsent] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const needConsent = role === 'patient' || role === 'family';
|
||||
|
||||
async function handleSubmit(e: React.FormEvent): Promise<void> {
|
||||
e.preventDefault();
|
||||
if (!username.trim() || !password) {
|
||||
show('请填写用户名和密码');
|
||||
return;
|
||||
}
|
||||
if (mode === 'register' && needConsent && !consent) {
|
||||
show('请先阅读并签署知情同意');
|
||||
return;
|
||||
}
|
||||
setSubmitting(true);
|
||||
try {
|
||||
if (mode === 'login') {
|
||||
await login(username.trim(), password);
|
||||
} else {
|
||||
await register({ username: username.trim(), password, role, consent });
|
||||
}
|
||||
navigate('/home', { replace: true });
|
||||
} catch (err) {
|
||||
show(err instanceof ApiError ? err.message : '操作失败，请重试');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
function fillDemoUser(usernameVal: string, passwordVal: string, roleVal: Role) {
|
||||
setUsername(usernameVal);
|
||||
setPassword(passwordVal);
|
||||
setRole(roleVal);
|
||||
setConsent(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<div className="page login">
|
||||
<div className="login__hero">
|
||||
<div className="login__logo" aria-hidden>
|
||||
<Flower2 size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h1>孕期助手</h1>
|
||||
<p className="muted">温柔陪伴，安心孕育</p>
|
||||
</div>
|
||||
|
||||
<div className="login__tabs">
|
||||
<button
|
||||
className={mode === 'login' ? 'is-active' : ''}
|
||||
onClick={() => setMode('login')}
|
||||
type="button"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
<button
|
||||
className={mode === 'register' ? 'is-active' : ''}
|
||||
onClick={() => setMode('register')}
|
||||
type="button"
|
||||
>
|
||||
注册
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form className="card" onSubmit={handleSubmit}>
|
||||
<div className="field">
|
||||
<label>用户名</label>
|
||||
<input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="请输入用户名"
|
||||
autoComplete="username"
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>密码</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{mode === 'register' && (
|
||||
<>
|
||||
<div className="field">
|
||||
<label>身份</label>
|
||||
<select value={role} onChange={(e) => setRole(e.target.value as Role)}>
|
||||
<option value="patient">孕妇</option>
|
||||
<option value="family">家属</option>
|
||||
</select>
|
||||
</div>
|
||||
{needConsent && (
|
||||
<label className="login__consent">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={consent}
|
||||
onChange={(e) => setConsent(e.target.checked)}
|
||||
/>
|
||||
<span>
|
||||
我已阅读并同意
|
||||
<a href="/onboarding" onClick={(e) => e.stopPropagation()}>
|
||||
《知情同意与隐私政策》
|
||||
</a>
|
||||
</span>
|
||||
</label>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<button className="btn btn-primary btn-block" type="submit" disabled={submitting}>
|
||||
{submitting ? '请稍候…' : mode === 'login' ? '登录' : '注册并开始'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="login__demo-panel card">
|
||||
<p className="login__demo-title">
|
||||
<Lightbulb size={16} strokeWidth={1.75} /> 测试快捷填充
|
||||
</p>
|
||||
<div className="login__demo-buttons">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline btn-sm"
|
||||
onClick={() => fillDemoUser('test_pregnant_01', '12345678', 'patient')}
|
||||
>
|
||||
一键填充孕妇 01
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline btn-sm"
|
||||
onClick={() => fillDemoUser('test_pregnant_02', '12345678', 'patient')}
|
||||
>
|
||||
一键填充孕妇 02
|
||||
</button>
|
||||
</div>
|
||||
<p className="login__demo-desc muted">
|
||||
* 数据库为本地内存存储，重启后数据将清空。若提示用户名不存在，请在上方切换到「注册」页点击填充注册后即可登录。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="muted center login__hint">
|
||||
孕妇与家属注册需先签署知情同意，方可使用（合规要求）。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
/* ===== 渐变 Profile Hero ===== */
|
||||
.me__hero {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-5);
|
||||
margin: var(--space-2) 0 var(--space-5);
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--gradient-hero);
|
||||
box-shadow: var(--shadow-hero);
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
.me__hero-glow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(130px 130px at 90% -20%, rgba(255, 255, 255, 0.4), transparent 70%),
|
||||
radial-gradient(150px 150px at 5% 130%, rgba(255, 255, 255, 0.2), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.me__hero-info {
|
||||
position: relative;
|
||||
}
|
||||
.me__hero-meta {
|
||||
font-size: var(--font-sm);
|
||||
opacity: 0.92;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.me__avatar {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.me__name {
|
||||
font-size: var(--font-xl);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.me__archive .me__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.me__archive .me__row:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
.me__factors {
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.me__factor {
|
||||
margin: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
.me__list {
|
||||
padding: 0;
|
||||
}
|
||||
.me__list-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: var(--font-md);
|
||||
}
|
||||
.me__list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.me__list-right {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* 关怀码 */
|
||||
.me__copy {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-pill);
|
||||
background: var(--color-primary-soft);
|
||||
color: var(--color-primary-strong);
|
||||
font-size: var(--font-sm);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.me__code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.me__codehint {
|
||||
font-size: var(--font-xs);
|
||||
margin: 4px 0 var(--space-2);
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { ChevronRight, Copy, UserRound } from 'lucide-react';
|
||||
import { useAuth } from '../auth/AuthContext';
|
||||
import { usePatient } from '../lib/usePatient';
|
||||
import { useToast } from '../components/Toast';
|
||||
import { BuildArchive } from '../components/BuildArchive';
|
||||
import { riskBadgeClass, riskLabel } from '../lib/format';
|
||||
import './MePage.css';
|
||||
|
||||
const ROLE_LABEL: Record<string, string> = {
|
||||
patient: '孕妇',
|
||||
family: '家属',
|
||||
case_manager: '个案管理师',
|
||||
physician: '医生',
|
||||
operator: '运营',
|
||||
admin: '管理员',
|
||||
};
|
||||
|
||||
export function MePage(): JSX.Element {
|
||||
const { user, logout } = useAuth();
|
||||
const { patient, loading, reload } = usePatient();
|
||||
const { show } = useToast();
|
||||
const navigate = useNavigate();
|
||||
|
||||
async function copyCareCode(): Promise<void> {
|
||||
if (!patient) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(patient.patientNo);
|
||||
show('关怀码已复制，发给家属即可绑定');
|
||||
} catch {
|
||||
show(`复制失败，请手动复制：${patient.patientNo}`);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<header className="me__hero">
|
||||
<div className="me__hero-glow" aria-hidden />
|
||||
<div className="me__avatar" aria-hidden>
|
||||
<UserRound size={34} strokeWidth={1.5} />
|
||||
</div>
|
||||
<div className="me__hero-info">
|
||||
<p className="me__name">{patient?.name ?? user?.username}</p>
|
||||
<p className="me__hero-meta">
|
||||
{ROLE_LABEL[user?.role ?? ''] ?? user?.role}
|
||||
{patient ? ` · 孕 ${patient.gestationalWeeks} 周` : ''}
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{!patient && !loading ? (
|
||||
<BuildArchive onDone={reload} />
|
||||
) : (
|
||||
patient && (
|
||||
<div className="card me__archive">
|
||||
<h2 className="section-title" style={{ marginTop: 0 }}>
|
||||
我的孕期档案
|
||||
</h2>
|
||||
<div className="me__row">
|
||||
<span className="muted">关怀码（编号）</span>
|
||||
<button className="me__copy" onClick={copyCareCode} type="button">
|
||||
<span className="me__code">{patient.patientNo}</span>
|
||||
<Copy size={14} strokeWidth={1.9} />
|
||||
复制
|
||||
</button>
|
||||
</div>
|
||||
<p className="me__codehint muted">把「关怀码」发给家属，TA 在家属端即可绑定、查看你的状态与提醒。</p>
|
||||
<div className="me__row">
|
||||
<span className="muted">当前孕周</span>
|
||||
<span>
|
||||
孕 {patient.gestationalWeeks} 周 {patient.gestationalDays} 天
|
||||
</span>
|
||||
</div>
|
||||
<div className="me__row">
|
||||
<span className="muted">预产期</span>
|
||||
<span>{patient.edd?.slice(0, 10)}</span>
|
||||
</div>
|
||||
<div className="me__row">
|
||||
<span className="muted">初始风险分层</span>
|
||||
<span className={`badge ${riskBadgeClass(patient.initialRiskLevel)}`}>
|
||||
{riskLabel(patient.initialRiskLevel)}
|
||||
</span>
|
||||
</div>
|
||||
{patient.prePregnancyBmi != null && (
|
||||
<div className="me__row">
|
||||
<span className="muted">孕前 BMI</span>
|
||||
<span>{patient.prePregnancyBmi.toFixed(1)}</span>
|
||||
</div>
|
||||
)}
|
||||
{patient.initialRiskFactors.length > 0 && (
|
||||
<div className="me__factors">
|
||||
<p className="muted" style={{ marginBottom: 6 }}>
|
||||
风险因素
|
||||
</p>
|
||||
{patient.initialRiskFactors.map((f, i) => (
|
||||
<span key={i} className="badge badge-warn me__factor">
|
||||
{f}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
<h2 className="section-title">设置</h2>
|
||||
<div className="card me__list">
|
||||
<button className="me__list-item" onClick={() => navigate('/onboarding')} type="button">
|
||||
<span>知情同意与隐私政策</span>
|
||||
<span className="me__list-right muted">
|
||||
{user?.consentSigned ? '已签署' : '未签署'}
|
||||
<ChevronRight size={16} strokeWidth={1.75} />
|
||||
</span>
|
||||
</button>
|
||||
<button className="me__list-item" onClick={() => navigate('/chat')} type="button">
|
||||
<span>联系孕期助手</span>
|
||||
<span className="me__list-right muted">
|
||||
<ChevronRight size={16} strokeWidth={1.75} />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn btn-ghost btn-block"
|
||||
style={{ marginTop: 24 }}
|
||||
onClick={logout}
|
||||
type="button"
|
||||
>
|
||||
退出登录
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
|
||||
export function OnboardingPage(): JSX.Element {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<div className="page">
|
||||
<button className="btn btn-ghost" onClick={() => navigate(-1)} type="button">
|
||||
<ArrowLeft size={18} strokeWidth={1.75} /> 返回
|
||||
</button>
|
||||
<h1 className="section-title">知情同意与隐私政策</h1>
|
||||
<div className="card" style={{ lineHeight: 1.8 }}>
|
||||
<p>
|
||||
欢迎使用孕期助手。为了给您提供孕期健康陪伴与个案管理服务，我们需要收集并处理与您孕期健康相关的信息（如基本信息、孕产史、监测指标等）。
|
||||
</p>
|
||||
<p style={{ marginTop: 12 }}>我们承诺：</p>
|
||||
<ul style={{ paddingLeft: 20, marginTop: 8 }}>
|
||||
<li>仅在为您提供健康服务所必需的范围内收集和使用数据。</li>
|
||||
<li>敏感数据加密存储、分级访问，并对关键操作留痕审计。</li>
|
||||
<li>本服务提供健康陪伴与信息参考，不替代医生的诊断与治疗。</li>
|
||||
<li>遇紧急或高风险情况，我们会提示您及时就医并通知您的管理师。</li>
|
||||
</ul>
|
||||
<p style={{ marginTop: 12 }} className="muted">
|
||||
勾选同意即表示您已阅读并理解以上内容。您可随时在「我 - 隐私设置」中查看。
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary btn-block"
|
||||
style={{ marginTop: 16 }}
|
||||
onClick={() => navigate(-1)}
|
||||
type="button"
|
||||
>
|
||||
我已了解
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
.tasks__quick {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.tasks__quick button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: var(--space-3) 0;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface-soft);
|
||||
font-size: var(--font-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
.tasks__quick button span {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-3);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.task-card.is-done {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.task-card__icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
.task-card__body {
|
||||
flex: 1;
|
||||
}
|
||||
.task-card__title {
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.task-card__msg {
|
||||
font-size: var(--font-sm);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.task-card__time {
|
||||
font-size: var(--font-xs);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.task-card__check {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--color-border);
|
||||
color: var(--color-text-inverse);
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.task-card__check.is-done {
|
||||
background: var(--color-ok);
|
||||
border-color: var(--color-ok);
|
||||
}
|
||||
|
||||
/* SVG 图标：品牌色 + 对齐 */
|
||||
.tasks__quick button svg {
|
||||
color: var(--color-primary-strong);
|
||||
}
|
||||
.task-card__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-primary-strong);
|
||||
}
|
||||
.task-card__check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
Activity,
|
||||
Armchair,
|
||||
Bell,
|
||||
CalendarCheck,
|
||||
Check,
|
||||
Droplet,
|
||||
Footprints,
|
||||
Pill,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
import { api, ApiError } from '../api/client';
|
||||
import { useAuth } from '../auth/AuthContext';
|
||||
import { useToast } from '../components/Toast';
|
||||
import { usePatient } from '../lib/usePatient';
|
||||
import { useAutoRefresh } from '../lib/useAutoRefresh';
|
||||
import { BuildArchive } from '../components/BuildArchive';
|
||||
import type { Reminder, ReminderType } from '../api/types';
|
||||
import { formatTime, reminderLabel } from '../lib/format';
|
||||
import './TasksPage.css';
|
||||
|
||||
const QUICK_TYPES: { type: ReminderType; label: string; icon: LucideIcon }[] = [
|
||||
{ type: 'measurement', label: '监测打卡', icon: Activity },
|
||||
{ type: 'water', label: '喝水', icon: Droplet },
|
||||
{ type: 'exercise', label: '运动', icon: Footprints },
|
||||
{ type: 'checkup', label: '产检', icon: CalendarCheck },
|
||||
{ type: 'medication', label: '服药', icon: Pill },
|
||||
];
|
||||
|
||||
const TYPE_ICON: Record<string, LucideIcon> = {
|
||||
measurement: Activity,
|
||||
water: Droplet,
|
||||
exercise: Footprints,
|
||||
rest: Armchair,
|
||||
checkup: CalendarCheck,
|
||||
medication: Pill,
|
||||
};
|
||||
|
||||
export function TasksPage(): JSX.Element {
|
||||
const { patientId } = useAuth();
|
||||
const { patient, loading: patientLoading, reload: reloadPatient } = usePatient();
|
||||
const { show } = useToast();
|
||||
|
||||
const [reminders, setReminders] = useState<Reminder[]>([]);
|
||||
const [done, setDone] = useState<Set<string>>(new Set());
|
||||
|
||||
const load = useCallback(() => {
|
||||
if (!patientId) return;
|
||||
void api.listReminders(patientId).then((list) => setReminders([...list].reverse()));
|
||||
}, [patientId]);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
// 多端一致：管理师下发的提醒近实时出现
|
||||
useAutoRefresh(load);
|
||||
|
||||
async function addReminder(type: ReminderType): Promise<void> {
|
||||
if (!patientId) return;
|
||||
try {
|
||||
const r = await api.dispatchReminder(patientId, { type });
|
||||
if (r.adjustedForRisk) {
|
||||
show('考虑到你的健康状况，已把运动调整为休息提醒');
|
||||
} else {
|
||||
show('已添加提醒');
|
||||
}
|
||||
load();
|
||||
} catch (err) {
|
||||
show(err instanceof ApiError ? err.message : '添加失败，请重试');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDone(id: string): void {
|
||||
setDone((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
if (!patient && !patientLoading) {
|
||||
return (
|
||||
<div className="page">
|
||||
<h1 className="section-title" style={{ marginTop: 0 }}>
|
||||
先建立档案
|
||||
</h1>
|
||||
<BuildArchive onDone={reloadPatient} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<h1 className="section-title" style={{ marginTop: 0 }}>
|
||||
今日任务 / 打卡
|
||||
</h1>
|
||||
|
||||
<div className="card">
|
||||
<p className="muted" style={{ marginBottom: 12 }}>
|
||||
需要我提醒你什么？
|
||||
</p>
|
||||
<div className="tasks__quick">
|
||||
{QUICK_TYPES.map((q) => (
|
||||
<button key={q.type} onClick={() => addReminder(q.type)} type="button">
|
||||
<q.icon size={24} strokeWidth={1.75} />
|
||||
{q.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="section-title">我的提醒</h2>
|
||||
{reminders.length === 0 ? (
|
||||
<p className="muted">还没有提醒，点上面的按钮添加吧～</p>
|
||||
) : (
|
||||
reminders.map((r) => {
|
||||
const isDone = done.has(r.id);
|
||||
const Icon = TYPE_ICON[r.effectiveType] ?? Bell;
|
||||
return (
|
||||
<div key={r.id} className={`task-card${isDone ? ' is-done' : ''}`}>
|
||||
<span className="task-card__icon">
|
||||
<Icon size={26} strokeWidth={1.75} />
|
||||
</span>
|
||||
<div className="task-card__body">
|
||||
<p className="task-card__title">
|
||||
{reminderLabel(r.effectiveType)}
|
||||
{r.adjustedForRisk && <span className="badge badge-warn">已为你调整</span>}
|
||||
</p>
|
||||
<p className="task-card__msg muted">{r.message}</p>
|
||||
<p className="task-card__time muted">{formatTime(r.scheduledAt)}</p>
|
||||
</div>
|
||||
<button
|
||||
className={`task-card__check${isDone ? ' is-done' : ''}`}
|
||||
onClick={() => toggleDone(r.id)}
|
||||
type="button"
|
||||
aria-label="打卡"
|
||||
>
|
||||
{isDone ? <Check size={18} strokeWidth={2.5} /> : null}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,194 @@
|
||||
@import './tokens.css';
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Yuanti SC', 'YuanTi SC', '圆体-简', 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft YaHei', system-ui, -apple-system, sans-serif;
|
||||
color: var(--color-text);
|
||||
background: var(--color-bg);
|
||||
line-height: 1.65;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.2px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: var(--font-md);
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 移动优先：限制宽度居中，模拟手机视窗 */
|
||||
.app-shell {
|
||||
max-width: var(--max-width);
|
||||
margin: 0 auto;
|
||||
min-height: 100%;
|
||||
background: var(--color-bg);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
padding: var(--space-4);
|
||||
padding-bottom: calc(var(--nav-height) + var(--space-5));
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.card {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.card-soft {
|
||||
background: var(--color-surface-soft);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
/* 按钮 */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
padding: 12px 18px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--font-md);
|
||||
font-weight: 600;
|
||||
transition: transform 0.08s ease, opacity 0.2s ease;
|
||||
}
|
||||
.btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
.btn-ghost {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-primary-strong);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 表单 */
|
||||
.field {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.field label {
|
||||
display: block;
|
||||
font-size: var(--font-sm);
|
||||
color: var(--color-text-soft);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
.field input,
|
||||
.field select {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
.field input:focus,
|
||||
.field select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* 文本辅助 */
|
||||
.muted {
|
||||
color: var(--color-text-soft);
|
||||
}
|
||||
.section-title {
|
||||
font-size: var(--font-lg);
|
||||
font-weight: 600;
|
||||
margin: var(--space-5) 0 var(--space-3);
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 标签/徽章 */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 10px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--font-xs);
|
||||
font-weight: 600;
|
||||
}
|
||||
.badge-ok {
|
||||
background: var(--color-ok-soft);
|
||||
color: var(--color-ok);
|
||||
}
|
||||
.badge-warn {
|
||||
background: var(--color-warn-soft);
|
||||
color: var(--color-warn);
|
||||
}
|
||||
.badge-danger {
|
||||
background: var(--color-danger-soft);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: calc(var(--nav-height) + 16px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(74, 64, 57, 0.92);
|
||||
color: #fff;
|
||||
padding: 10px 18px;
|
||||
border-radius: var(--radius-pill);
|
||||
font-size: var(--font-sm);
|
||||
z-index: 50;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
/* 勾选行 */
|
||||
.check-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: 10px 0;
|
||||
font-size: var(--font-md);
|
||||
}
|
||||
.check-row input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
/*
|
||||
* PCM Design Tokens · 孕妇端（暖而柔和、低焦虑）
|
||||
* 依据 3-ui-style-PCM.md §3 视觉语言。双端共享，PC 端复用品牌色。
|
||||
*/
|
||||
:root {
|
||||
/* 基调：明亮温暖 */
|
||||
--color-bg: #fff7f3;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-soft: #fff1ea;
|
||||
|
||||
/* 主色：温柔暖色系 */
|
||||
--color-primary: #f48fb1; /* 温柔粉 */
|
||||
--color-primary-strong: #ec6f9e;
|
||||
--color-primary-soft: #ffe4ee;
|
||||
--color-accent: #7fc8a9; /* 奶绿 */
|
||||
--color-accent-soft: #e3f5ec;
|
||||
--color-calm: #8ec5e8; /* 安心蓝 */
|
||||
|
||||
/* 语义色 */
|
||||
--color-ok: #5bb98c; /* 正常/安心 */
|
||||
--color-ok-soft: #e3f5ec;
|
||||
--color-warn: #e8a13a; /* 注意/提醒（暖黄，非刺眼） */
|
||||
--color-warn-soft: #fbf0db;
|
||||
--color-danger: #e3725b; /* 高风险/红旗（克制） */
|
||||
--color-danger-soft: #fbe3dd;
|
||||
|
||||
/* 文本 */
|
||||
--color-text: #4a4039;
|
||||
--color-text-soft: #8a7e76;
|
||||
--color-text-inverse: #ffffff;
|
||||
--color-border: #f1e4dc;
|
||||
|
||||
/* 圆角（大圆角传达柔和） */
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 16px;
|
||||
--radius-lg: 22px;
|
||||
--radius-pill: 999px;
|
||||
|
||||
/* 间距 */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 24px;
|
||||
--space-6: 32px;
|
||||
|
||||
/* 字号（偏大，宽松行距） */
|
||||
--font-xs: 12px;
|
||||
--font-sm: 14px;
|
||||
--font-md: 16px;
|
||||
--font-lg: 19px;
|
||||
--font-xl: 24px;
|
||||
--font-xxl: 30px;
|
||||
|
||||
--shadow-soft: 0 6px 20px rgba(214, 158, 138, 0.16);
|
||||
--shadow-card: 0 2px 12px rgba(214, 158, 138, 0.1);
|
||||
|
||||
/* 炫酷暖色：渐变与柔和彩色卡（保持暖、稳，不刺眼） */
|
||||
--radius-xl: 26px;
|
||||
--gradient-hero: linear-gradient(135deg, #ff9e7a 0%, #ff7ba6 52%, #f368a6 100%);
|
||||
--gradient-primary: linear-gradient(135deg, #ffb38a 0%, #f48fb1 100%);
|
||||
--gradient-soft: linear-gradient(135deg, #ffe9d9 0%, #ffd9e6 100%);
|
||||
--shadow-hero: 0 14px 30px rgba(243, 104, 166, 0.28);
|
||||
|
||||
/* 暖系柔彩卡背景 + 对应图标色 */
|
||||
--c-peach: #fff0e4;
|
||||
--c-peach-ink: #e07a45;
|
||||
--c-rose: #ffe4ee;
|
||||
--c-rose-ink: #db5e8e;
|
||||
--c-honey: #fff4d6;
|
||||
--c-honey-ink: #c2901f;
|
||||
--c-mint: #e6f4ec;
|
||||
--c-mint-ink: #3fa777;
|
||||
--c-lilac: #f1e9fb;
|
||||
--c-lilac-ink: #9a6fc9;
|
||||
--c-sky: #e6f1fb;
|
||||
--c-sky-ink: #5b91c4;
|
||||
|
||||
--nav-height: 64px;
|
||||
--max-width: 480px;
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_BASE?: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/api/client.ts","./src/api/types.ts","./src/auth/authcontext.tsx","./src/auth/session.ts","./src/components/bottomnav.tsx","./src/components/buildarchive.tsx","./src/components/toast.tsx","./src/lib/format.ts","./src/lib/useautorefresh.ts","./src/lib/usepatient.ts","./src/pages/chatpage.tsx","./src/pages/datapage.tsx","./src/pages/homepage.tsx","./src/pages/loginpage.tsx","./src/pages/mepage.tsx","./src/pages/onboardingpage.tsx","./src/pages/taskspage.tsx"],"version":"5.9.3"}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{"root":["./vite.config.ts"],"version":"5.9.3"}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
// 孕妇端开发服务器：将 /api 代理到本地 NestJS 后端（默认 3000）。
|
||||
// 生产环境可改为环境变量配置的网关地址。
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: process.env.PCM_API_TARGET ?? 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user