Initial commit: X-Server Mobile enterprise tool system

- Frontend: React 18 + TypeScript + Vite + Ant Design Mobile
- Backend: PHP 8.5 + Webman 2.x + MySQL + Redis
- i18n support: Chinese, English, Russian, Spanish, French
- Approval workflow engine
- Docker development environment
- Feishu integration

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/apps/apps.module.css

@@ -0,0 +1,80 @@
+.apps {
+  min-height: 100vh;
+  padding: 16px;
+  padding-bottom: calc(16px + env(safe-area-inset-bottom));
+  background: #f5f5f5;
+}
+
+.header {
+  margin-bottom: 20px;
+  padding: 16px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  color: #fff;
+}
+
+.header h1 {
+  margin: 0 0 4px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.header p {
+  margin: 0;
+  font-size: 13px;
+  opacity: 0.9;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.appCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 16px 8px;
+  background: #fff;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.appCard:active {
+  transform: scale(0.95);
+  background: #fafafa;
+}
+
+.appIcon {
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.appInfo {
+  text-align: center;
+}
+
+.appLabel {
+  display: block;
+  font-size: 13px;
+  color: #262626;
+  font-weight: 500;
+}
+
+.appDesc {
+  display: block;
+  font-size: 11px;
+  color: #8c8c8c;
+  margin-top: 2px;
+}
+
+.safeArea {
+  height: 16px;
+}

frontend/src/pages/apps/index.tsx

@@ -0,0 +1,64 @@
+import styles from './apps.module.css'
+
+interface AppItem {
+  id: string
+  icon: string
+  label: string
+  path: string
+  color: string
+  description?: string
+}
+
+const apps: AppItem[] = [
+  { id: '1', icon: '✈️', label: '出差申请', path: '/business-trip/apply', color: '#1677ff', description: '提交出差申请' },
+  { id: '2', icon: '📝', label: '采购申请', path: '/purchase/apply', color: '#52c41a', description: '物品采购审批' },
+  { id: '3', icon: '🏠', label: '会议室', path: '/meeting-room', color: '#faad14', description: '会议室预定' },
+  { id: '4', icon: '📅', label: '日程管理', path: '/schedule', color: '#722ed1', description: '个人日程安排' },
+  { id: '5', icon: '💰', label: '报销申请', path: '/expense/apply', color: '#eb2f96', description: '费用报销审批' },
+  { id: '6', icon: '📋', label: '请假申请', path: '/leave/apply', color: '#13c2c2', description: '请假审批' },
+  { id: '7', icon: '🚗', label: '用车申请', path: '/car/apply', color: '#f759ab', description: '公车使用申请' },
+  { id: '8', icon: '🎁', label: '礼品申请', path: '/gift/apply', color: '#ff7a45', description: '礼品采购申请' },
+  { id: '9', icon: '📊', label: '数据报表', path: '/reports', color: '#1890ff', description: '业务数据统计' },
+  { id: '10', icon: '👥', label: '通讯录', path: '/contacts', color: '#096dd9', description: '内部通讯录' },
+  { id: '11', icon: '📁', label: '文件中心', path: '/files', color: '#595959', description: '文件共享管理' },
+  { id: '12', icon: '⚙️', label: '系统设置', path: '/settings', color: '#8c8c8c', description: '系统偏好设置' },
+]
+
+export default function Apps() {
+  const handleAppClick = (app: AppItem) => {
+    // TODO: 跳转到应用页面
+    console.log('点击应用:', app)
+  }
+
+  return (
+    <div className={styles.apps}>
+      <div className={styles.header}>
+        <h1>应用中心</h1>
+        <p>选择你需要的功能</p>
+      </div>
+
+      <div className={styles.grid}>
+        {apps.map((app) => (
+          <div
+            key={app.id}
+            className={styles.appCard}
+            onClick={() => handleAppClick(app)}
+          >
+            <div className={styles.appIcon} style={{ backgroundColor: `${app.color}15` }}>
+              <span style={{ fontSize: 32, color: app.color }}>{app.icon}</span>
+            </div>
+            <div className={styles.appInfo}>
+              <span className={styles.appLabel}>{app.label}</span>
+              {app.description && (
+                <span className={styles.appDesc}>{app.description}</span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* 底部安全区域 */}
+      <div className={styles.safeArea} />
+    </div>
+  )
+}

frontend/src/pages/business-trip/apply.module.css

@@ -0,0 +1,40 @@
+.apply {
+  padding: 16px;
+}
+
+.form {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.group {
+  margin-bottom: 16px;
+}
+
+.group label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #333;
+}
+
+.group input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.submitBtn {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 6px;
+  background: #1677ff;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+}

frontend/src/pages/business-trip/apply.tsx

@@ -0,0 +1,23 @@
+import styles from './apply.module.css'
+
+export default function BusinessTripApply() {
+  return (
+    <div className={styles.apply}>
+      <form className={styles.form}>
+        <div className={styles.group}>
+          <label>出差事由</label>
+          <input type="text" placeholder="请输入出差事由" />
+        </div>
+        <div className={styles.group}>
+          <label>出差时间</label>
+          <input type="text" placeholder="请选择出差时间" />
+        </div>
+        <div className={styles.group}>
+          <label>出差地点</label>
+          <input type="text" placeholder="请输入出差地点" />
+        </div>
+        <button type="button" className={styles.submitBtn}>提交申请</button>
+      </form>
+    </div>
+  )
+}

frontend/src/pages/business-trip/detail.module.css

@@ -0,0 +1,39 @@
+.detail {
+  padding: 16px;
+}
+
+.card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.card h2 {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+}
+
+.actions button {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.approveBtn {
+  background: #52c41a;
+  color: #fff;
+}
+
+.rejectBtn {
+  background: #ff4d4f;
+  color: #fff;
+}

frontend/src/pages/business-trip/detail.tsx

@@ -0,0 +1,16 @@
+import styles from './detail.module.css'
+
+export default function BusinessTripDetail() {
+  return (
+    <div className={styles.detail}>
+      <div className={styles.card}>
+        <h2>出差申请详情</h2>
+        <p>详情内容...</p>
+      </div>
+      <div className={styles.actions}>
+        <button className={styles.approveBtn}>通过</button>
+        <button className={styles.rejectBtn}>拒绝</button>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/business-trip/list.module.css

@@ -0,0 +1,32 @@
+.list {
+  padding: 16px;
+}
+
+.tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.tab {
+  flex: 1;
+  padding: 8px 12px;
+  border: none;
+  background: #f5f5f5;
+  border-radius: 6px;
+  font-size: 14px;
+  color: #666;
+  cursor: pointer;
+}
+
+.tab.active {
+  background: #1677ff;
+  color: #fff;
+}
+
+.empty {
+  padding: 60px 0;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}

frontend/src/pages/business-trip/list.tsx

@@ -0,0 +1,14 @@
+import styles from './list.module.css'
+
+export default function BusinessTripList() {
+  return (
+    <div className={styles.list}>
+      <div className={styles.tabs}>
+        <button className={`${styles.tab} ${styles.active}`}>我发起的</button>
+        <button className={styles.tab}>待我审批</button>
+        <button className={styles.tab}>我已审批</button>
+      </div>
+      <div className={styles.empty}>暂无出差申请</div>
+    </div>
+  )
+}

frontend/src/pages/dashboard/dashboard.module.css

@@ -0,0 +1,284 @@
+.dashboard {
+  min-height: 100vh;
+  padding: 16px;
+  padding-bottom: calc(16px + env(safe-area-inset-bottom));
+  background: #f5f5f5;
+}
+
+/* 顶部欢迎区 */
+.welcome {
+  margin-bottom: 16px;
+  padding: 20px;
+  background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
+  border-radius: 16px;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.userInfo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.greetingText {
+  flex: 1;
+}
+
+.langBtn {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s;
+}
+
+.langBtn:active {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.greeting {
+  margin: 0 0 4px 0;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.date {
+  margin: 0;
+  font-size: 13px;
+  opacity: 0.9;
+}
+
+/* 通用区块 */
+.section {
+  margin-bottom: 16px;
+}
+
+.sectionTitle {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.sectionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.more {
+  font-size: 13px;
+  color: #999;
+}
+
+/* 统计卡片 */
+.statsGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.statCard {
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px 12px;
+  text-align: center;
+}
+
+.statValue {
+  font-size: 24px;
+  font-weight: 600;
+  color: #262626;
+  margin-bottom: 4px;
+}
+
+.statTitle {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+/* 待办事项 */
+.todoList {
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.todoItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-bottom: 1px solid #f5f5f5;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.todoItem:last-child {
+  border-bottom: none;
+}
+
+.todoItem:active {
+  background: #f5f5f5;
+}
+
+.todoIcon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.todoContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.todoTitle {
+  font-size: 14px;
+  color: #262626;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.todoTime {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+.todoArrow {
+  font-size: 18px;
+  color: #bfbfbf;
+}
+
+.empty {
+  padding: 40px 20px;
+  text-align: center;
+  background: #fff;
+  border-radius: 12px;
+  color: #8c8c8c;
+  font-size: 14px;
+}
+
+/* 快捷入口 */
+.actionGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.actionCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 8px;
+  background: #fff;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.actionCard:active {
+  transform: scale(0.95);
+}
+
+.actionIcon {
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.actionLabel {
+  font-size: 12px;
+  color: #595959;
+  text-align: center;
+}
+
+/* 最新动态 */
+.activityList {
+  background: #fff;
+  border-radius: 12px;
+  padding: 12px 16px;
+}
+
+.activityItem {
+  display: flex;
+  gap: 12px;
+  padding: 12px 0;
+  position: relative;
+}
+
+.activityItem:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  top: 32px;
+  bottom: -12px;
+  width: 2px;
+  background: #f0f0f0;
+}
+
+.activityDot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #1677ff;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 2px #e6f4ff;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.activityContent {
+  flex: 1;
+}
+
+.activityContent > div:first-child {
+  font-size: 14px;
+  color: #262626;
+  margin-bottom: 4px;
+}
+
+.activityTime {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+/* 底部安全区域 */
+.safeArea {
+  height: 16px;
+}

frontend/src/pages/dashboard/index.tsx

@@ -0,0 +1,174 @@
+import { useNavigate } from 'react-router-dom'
+import { useUserStore } from '@/stores/user'
+import { useTranslation } from 'react-i18next'
+import { showLanguageSwitcher } from '@/components/LanguageSwitcher'
+import styles from './dashboard.module.css'
+
+interface QuickAction {
+  id: string
+  icon: string
+  label: string
+  path: string
+  color: string
+}
+
+const quickActions: QuickAction[] = [
+  { id: '1', icon: '✈️', label: '出差申请', path: '/business-trip/apply', color: '#1677ff' },
+  { id: '2', icon: '📝', label: '采购申请', path: '/purchase/apply', color: '#52c41a' },
+  { id: '3', icon: '🏠', label: '会议室', path: '/meeting-room', color: '#faad14' },
+  { id: '4', icon: '📅', label: '日程管理', path: '/schedule', color: '#722ed1' },
+  { id: '5', icon: '💰', label: '报销申请', path: '/expense/apply', color: '#eb2f96' },
+  { id: '6', icon: '📋', label: '请假申请', path: '/leave/apply', color: '#13c2c2' },
+]
+
+interface TodoItem {
+  id: string
+  title: string
+  type: 'approval' | 'notice' | 'task'
+  time: string
+}
+
+const mockTodos: TodoItem[] = [
+  { id: '1', title: '张三的出差申请待审批', type: 'approval', time: '10分钟前' },
+  { id: '2', title: '本周部门会议', type: 'task', time: '今天 14:00' },
+]
+
+interface StatCard {
+  title: string
+  value: number
+  unit: string
+  color: string
+}
+
+const mockStats: StatCard[] = [
+  { title: '待审批', value: 5, unit: '条', color: '#ff4d4f' },
+  { title: '已审批', value: 12, unit: '条', color: '#52c41a' },
+  { title: '我发起', value: 8, unit: '条', color: '#1677ff' },
+]
+
+export default function Dashboard() {
+  const navigate = useNavigate()
+  const { user } = useUserStore()
+  const { t } = useTranslation()
+
+  const handleQuickAction = (action: QuickAction) => {
+    navigate(action.path)
+  }
+
+  const getCurrentLanguage = () => {
+    const lang = localStorage.getItem('i18nextLng') || 'zh'
+    const langMap: Record<string, string> = {
+      zh: '🇨🇳',
+      en: '🇬🇧',
+      ru: '🇷🇺',
+      es: '🇪🇸',
+      fr: '🇫🇷',
+    }
+    return langMap[lang] || '🇨🇳'
+  }
+
+  return (
+    <div className={styles.dashboard}>
+      {/* 顶部欢迎区 */}
+      <div className={styles.welcome}>
+        <div className={styles.userInfo}>
+          <div className={styles.avatar}>{user?.name?.[0] || 'U'}</div>
+          <div className={styles.greetingText}>
+            <h2 className={styles.greeting}>{t('dashboard.greeting', { name: user?.name || t('login.username') })}</h2>
+            <p className={styles.date}>{new Date().toLocaleDateString('zh-CN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</p>
+          </div>
+        </div>
+        <button className={styles.langBtn} onClick={() => showLanguageSwitcher()}>
+          {getCurrentLanguage()}
+        </button>
+      </div>
+
+      {/* 数据统计卡片 */}
+      <div className={styles.section}>
+        <h3 className={styles.sectionTitle}>数据概览</h3>
+        <div className={styles.statsGrid}>
+          {mockStats.map((stat) => (
+            <div key={stat.title} className={styles.statCard} style={{ borderTop: `3px solid ${stat.color}` }}>
+              <div className={styles.statValue}>{stat.value}</div>
+              <div className={styles.statTitle}>{stat.title}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* 待办事项 */}
+      <div className={styles.section}>
+        <div className={styles.sectionHeader}>
+          <h3 className={styles.sectionTitle}>待办事项</h3>
+          <span className={styles.more}>查看全部 {'>'}</span>
+        </div>
+        {mockTodos.length > 0 ? (
+          <div className={styles.todoList}>
+            {mockTodos.map((todo) => (
+              <div key={todo.id} className={styles.todoItem} onClick={() => navigate('/approval/pending')}>
+                <div className={styles.todoIcon}>
+                  {todo.type === 'approval' && '📋'}
+                  {todo.type === 'notice' && '🔔'}
+                  {todo.type === 'task' && '✓'}
+                </div>
+                <div className={styles.todoContent}>
+                  <div className={styles.todoTitle}>{todo.title}</div>
+                  <div className={styles.todoTime}>{todo.time}</div>
+                </div>
+                <div className={styles.todoArrow}>{'>'}</div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className={styles.empty}>暂无待办事项</div>
+        )}
+      </div>
+
+      {/* 快捷入口 */}
+      <div className={styles.section}>
+        <h3 className={styles.sectionTitle}>快捷入口</h3>
+        <div className={styles.actionGrid}>
+          {quickActions.map((action) => (
+            <div
+              key={action.id}
+              className={styles.actionCard}
+              onClick={() => handleQuickAction(action)}
+            >
+              <div className={styles.actionIcon} style={{ backgroundColor: `${action.color}15` }}>
+                <span style={{ fontSize: 28 }}>{action.icon}</span>
+              </div>
+              <span className={styles.actionLabel}>{action.label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* 最新动态 */}
+      <div className={styles.section}>
+        <div className={styles.sectionHeader}>
+          <h3 className={styles.sectionTitle}>最新动态</h3>
+          <span className={styles.more}>更多 {'>'}</span>
+        </div>
+        <div className={styles.activityList}>
+          <div className={styles.activityItem}>
+            <div className={styles.activityDot}></div>
+            <div className={styles.activityContent}>
+              <div>张三 提交了出差申请</div>
+              <div className={styles.activityTime}>10分钟前</div>
+            </div>
+          </div>
+          <div className={styles.activityItem}>
+            <div className={styles.activityDot}></div>
+            <div className={styles.activityContent}>
+              <div>李四 审批通过了采购申请</div>
+              <div className={styles.activityTime}>1小时前</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 底部安全区域 */}
+      <div className={styles.safeArea} />
+    </div>
+  )
+}

frontend/src/pages/login/index.tsx

@@ -0,0 +1,12 @@
+import styles from './login.module.css'
+
+export default function Login() {
+  return (
+    <div className={styles.login}>
+      <div className={styles.container}>
+        <h1>企业工具台</h1>
+        <button className={styles.feishuBtn}>飞书授权登录</button>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/login/login.module.css

@@ -0,0 +1,30 @@
+.login {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.container {
+  padding: 40px;
+  text-align: center;
+}
+
+.container h1 {
+  margin: 0 0 40px 0;
+  color: #fff;
+  font-size: 28px;
+}
+
+.feishuBtn {
+  width: 240px;
+  padding: 14px;
+  border: none;
+  border-radius: 6px;
+  background: #fff;
+  color: #1677ff;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+}

frontend/src/pages/profile/index.tsx

@@ -0,0 +1,113 @@
+import { useNavigate } from 'react-router-dom'
+import { useUserStore } from '@/stores/user'
+import { useTranslation } from 'react-i18next'
+import { showLanguageSwitcher } from '@/components/LanguageSwitcher'
+import styles from './profile.module.css'
+
+interface MenuItem {
+  id: string
+  icon: string
+  label: string
+  path?: string
+  onClick?: () => void
+  badge?: number
+}
+
+export default function Profile() {
+  const navigate = useNavigate()
+  const { user, logout } = useUserStore()
+  const { t } = useTranslation()
+
+  const menuItems: MenuItem[] = [
+    {
+      id: 'messages',
+      icon: '💬',
+      label: t('profile.myMessages'),
+      path: '/messages',
+      badge: 5,
+    },
+    {
+      id: 'language',
+      icon: '🌐',
+      label: t('profile.language'),
+      onClick: () => showLanguageSwitcher(),
+    },
+    {
+      id: 'settings',
+      icon: '⚙️',
+      label: t('profile.settings'),
+      path: '/settings',
+    },
+    {
+      id: 'about',
+      icon: 'ℹ️',
+      label: t('profile.about'),
+      path: '/about',
+    },
+  ]
+
+  const handleMenuClick = (item: MenuItem) => {
+    if (item.path) {
+      navigate(item.path)
+    } else if (item.onClick) {
+      item.onClick()
+    }
+  }
+
+  return (
+    <div className={styles.profile}>
+      {/* 用户信息卡片 */}
+      <div className={styles.userCard}>
+        <div className={styles.avatar}>{user?.name?.[0] || 'U'}</div>
+        <div className={styles.userInfo}>
+          <div className={styles.userName}>{user?.name || t('login.username')}</div>
+          {user?.email && <div className={styles.userEmail}>{user.email}</div>}
+        </div>
+      </div>
+
+      {/* 统计数据 */}
+      <div className={styles.stats}>
+        <div className={styles.statItem}>
+          <div className={styles.statValue}>5</div>
+          <div className={styles.statLabel}>{t('approval.pending')}</div>
+        </div>
+        <div className={styles.statItem}>
+          <div className={styles.statValue}>12</div>
+          <div className={styles.statLabel}>{t('approval.approved')}</div>
+        </div>
+        <div className={styles.statItem}>
+          <div className={styles.statValue}>8</div>
+          <div className={styles.statLabel}>{t('businessTrip.myTrips')}</div>
+        </div>
+      </div>
+
+      {/* 功能菜单 */}
+      <div className={styles.menu}>
+        {menuItems.map((item) => (
+          <div
+            key={item.id}
+            className={styles.menuItem}
+            onClick={() => handleMenuClick(item)}
+          >
+            <div className={styles.menuLeft}>
+              <span className={styles.menuIcon}>{item.icon}</span>
+              <span className={styles.menuLabel}>{item.label}</span>
+              {item.badge && item.badge > 0 && (
+                <span className={styles.badge}>{item.badge > 99 ? '99+' : item.badge}</span>
+              )}
+            </div>
+            {item.path && <span className={styles.menuArrow}>›</span>}
+          </div>
+        ))}
+      </div>
+
+      {/* 退出登录按钮 */}
+      <button className={styles.logoutBtn} onClick={logout}>
+        {t('profile.logout')}
+      </button>
+
+      {/* 底部安全区域 */}
+      <div className={styles.safeArea} />
+    </div>
+  )
+}

frontend/src/pages/profile/profile.module.css

@@ -0,0 +1,154 @@
+.profile {
+  min-height: 100vh;
+  padding: 16px;
+  padding-bottom: calc(16px + env(safe-area-inset-bottom));
+  background: #f5f5f5;
+}
+
+/* 用户信息卡片 */
+.userCard {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
+  border-radius: 16px;
+  color: #fff;
+  margin-bottom: 16px;
+}
+
+.avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.userInfo {
+  flex: 1;
+}
+
+.userName {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.userEmail {
+  font-size: 13px;
+  opacity: 0.8;
+}
+
+/* 统计数据 */
+.stats {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.statItem {
+  flex: 1;
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+}
+
+.statValue {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1677ff;
+  margin-bottom: 4px;
+}
+
+.statLabel {
+  font-size: 12px;
+  color: #8c8c8c;
+}
+
+/* 功能菜单 */
+.menu {
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid #f5f5f5;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.menuItem:last-child {
+  border-bottom: none;
+}
+
+.menuItem:active {
+  background: #f5f5f5;
+}
+
+.menuLeft {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.menuIcon {
+  font-size: 20px;
+  color: #1677ff;
+}
+
+.menuLabel {
+  font-size: 15px;
+  color: #262626;
+}
+
+.badge {
+  margin-left: auto;
+  padding: 2px 8px;
+  background: #ff4d4f;
+  color: #fff;
+  font-size: 11px;
+  border-radius: 10px;
+  min-width: 18px;
+  text-align: center;
+}
+
+.menuArrow {
+  font-size: 14px;
+  color: #bfbfbf;
+}
+
+/* 退出登录按钮 */
+.logoutBtn {
+  width: 100%;
+  padding: 14px;
+  border: none;
+  border-radius: 12px;
+  background: #fff;
+  color: #ff4d4f;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.logoutBtn:active {
+  background: #f5f5f5;
+}
+
+/* 底部安全区域 */
+.safeArea {
+  height: 16px;
+}