Initial commit: HealthManager full-stack health management platform

Backend: .NET 10 + PostgreSQL + EF Core + JWT + SignalR
Frontend patient: React 19 + TypeScript + Vite (mobile H5)
Frontend doctor: React 19 + TypeScript + Vite (desktop web)

frontend-patient/src/components/layout/AppLayout.module.css

@@ -0,0 +1,7 @@
+.layout {
+  min-height: 100vh;
+}
+
+.main {
+  padding-bottom: var(--tab-bar-height);
+}

frontend-patient/src/components/layout/AppLayout.tsx

@@ -0,0 +1,14 @@
+import { Outlet } from 'react-router-dom';
+import { TabBar } from './TabBar';
+import styles from './AppLayout.module.css';
+
+export function AppLayout() {
+  return (
+    <div className={styles.layout}>
+      <main className={styles.main}>
+        <Outlet />
+      </main>
+      <TabBar />
+    </div>
+  );
+}

frontend-patient/src/components/layout/PageHeader.module.css

@@ -0,0 +1,49 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: var(--max-content-width);
+  height: var(--header-height);
+  background: var(--color-white);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--spacing-lg);
+  z-index: var(--z-header);
+}
+
+.left,
+.right {
+  width: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.right {
+  justify-content: flex-end;
+}
+
+.backBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  margin-left: -8px;
+  border-radius: var(--radius-full);
+  color: var(--color-text-primary);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.title {
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  text-align: center;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

frontend-patient/src/components/layout/PageHeader.tsx

@@ -0,0 +1,34 @@
+import { useNavigate } from 'react-router-dom';
+import styles from './PageHeader.module.css';
+
+interface PageHeaderProps {
+  title: string;
+  showBack?: boolean;
+  rightAction?: React.ReactNode;
+}
+
+export function PageHeader({ title, showBack = true, rightAction }: PageHeaderProps) {
+  const navigate = useNavigate();
+
+  return (
+    <header className={styles.header}>
+      <div className={styles.left}>
+        {showBack && (
+          <button className={styles.backBtn} onClick={() => navigate(-1)}>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M15 18L9 12L15 6"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+        )}
+      </div>
+      <h1 className={styles.title}>{title}</h1>
+      <div className={styles.right}>{rightAction}</div>
+    </header>
+  );
+}

frontend-patient/src/components/layout/StackLayout.tsx

@@ -0,0 +1,5 @@
+import { Outlet } from 'react-router-dom';
+
+export function StackLayout() {
+  return <Outlet />;
+}

frontend-patient/src/components/layout/TabBar.module.css

@@ -0,0 +1,44 @@
+.tabBar {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: var(--max-content-width);
+  height: var(--tab-bar-height);
+  background: var(--color-white);
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  z-index: var(--z-tab-bar);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tab {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: var(--spacing-xs) var(--spacing-md);
+  min-width: 56px;
+  min-height: 44px;
+  color: var(--color-text-tertiary);
+  transition: color 0.2s;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.tabActive {
+  color: var(--color-primary);
+}
+
+.tabIcon {
+  font-size: 22px;
+  line-height: 1;
+}
+
+.tabLabel {
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+}

frontend-patient/src/components/layout/TabBar.tsx

@@ -0,0 +1,26 @@
+import { useNavigate, useLocation } from 'react-router-dom';
+import { NAV_ITEMS } from '@/utils/constants';
+import styles from './TabBar.module.css';
+
+export function TabBar() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return (
+    <nav className={styles.tabBar}>
+      {NAV_ITEMS.map((item) => {
+        const isActive = location.pathname.startsWith(item.path);
+        return (
+          <button
+            key={item.path}
+            className={`${styles.tab} ${isActive ? styles.tabActive : ''}`}
+            onClick={() => navigate(item.path)}
+          >
+            <span className={styles.tabIcon}>{item.icon}</span>
+            <span className={styles.tabLabel}>{item.label}</span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}