fix(miniprogram): 对齐设计原型 — 移除渐变头部+体征数值内联+卡片布局

- 首页：移除渐变头部改为平铺背景，铃铛图标替代消息按钮 - 首页：体征数值与单位内联显示（同一行 baseline 对齐） - 健康页：标题改为"健康数据"，整体样式贴近原型紧凑风格 - 我的页：移除渐变头部改为平铺卡片，积分/打卡分两个独立卡片 - 我的页：菜单使用 emoji 图标替代文字图标，间距更紧凑
2026-04-30 23:04:36 +08:00
parent 50772878da
commit 63d8b7a65d
6 changed files with 280 additions and 272 deletions
--- a/apps/miniprogram/src/pages/profile/index.tsx
+++ b/apps/miniprogram/src/pages/profile/index.tsx
@@ -6,21 +6,37 @@ import { usePointsStore } from '../../stores/points';
 import './index.scss';

 const MENU_ITEMS = [
-  { label: '积分商城', char: '商', path: '/pages/mall/index' },
-  { label: '我的订单', char: '单', path: '/pages/pkg-mall/orders/index' },
-  { label: '积分明细', char: '明', path: '/pages/pkg-mall/detail/index' },
-  { label: '就诊人管理', char: '人', path: '/pages/pkg-profile/family/index' },
-  { label: '我的报告', char: '报', path: '/pages/pkg-profile/reports/index' },
-  { label: '健康记录', char: '健', path: '/pages/pkg-profile/health-records/index' },
-  { label: '诊断记录', char: '诊', path: '/pages/pkg-profile/diagnoses/index' },
-  { label: '我的随访', char: '随', path: '/pages/pkg-profile/followups/index' },
-  { label: '用药提醒', char: '药', path: '/pages/pkg-profile/medication/index' },
-  { label: '透析记录', char: '透', path: '/pages/pkg-profile/dialysis-records/index' },
-  { label: '透析处方', char: '方', path: '/pages/pkg-profile/dialysis-prescriptions/index' },
-  { label: '知情同意', char: '知', path: '/pages/pkg-profile/consents/index' },
-  { label: '设置', char: '设', path: '/pages/pkg-profile/settings/index' },
+  { label: '积分商城', icon: '🎁', bg: '#FDEAEA' },
+  { label: '我的订单', icon: '📦', bg: '#E8F0F8' },
+  { label: '就诊人管理', icon: '👨‍👩‍👧', bg: '#F0DDD4' },
+  { label: '我的报告', icon: '📄', bg: '#E8F0E8' },
+  { label: '健康记录', icon: '📝', bg: '#E8F0F8' },
+  { label: '诊断记录', icon: '📋', bg: '#E8F0E8' },
+  { label: '我的随访', icon: '🏥', bg: '#F3E8F8' },
+  { label: '用药提醒', icon: '💊', bg: '#FFF3E0' },
+  { label: '透析记录', icon: '💉', bg: '#E8F0F8' },
+  { label: '透析处方', icon: '💊', bg: '#E8F0E8' },
+  { label: '知情同意', icon: '📋', bg: '#F3E8F8' },
+  { label: '积分明细', icon: '📊', bg: '#F0DDD4' },
+  { label: '设置', icon: '⚙️', bg: '#f0f0f0' },
 ];

+const MENU_PATHS: Record<string, string> = {
+  '积分商城': '/pages/mall/index',
+  '我的订单': '/pages/pkg-mall/orders/index',
+  '积分明细': '/pages/pkg-mall/detail/index',
+  '就诊人管理': '/pages/pkg-profile/family/index',
+  '我的报告': '/pages/pkg-profile/reports/index',
+  '健康记录': '/pages/pkg-profile/health-records/index',
+  '诊断记录': '/pages/pkg-profile/diagnoses/index',
+  '我的随访': '/pages/pkg-profile/followups/index',
+  '用药提醒': '/pages/pkg-profile/medication/index',
+  '透析记录': '/pages/pkg-profile/dialysis-records/index',
+  '透析处方': '/pages/pkg-profile/dialysis-prescriptions/index',
+  '知情同意': '/pages/pkg-profile/consents/index',
+  '设置': '/pages/pkg-profile/settings/index',
+};
+
 export default function Profile() {
  const { user, logout } = useAuthStore();
  const { account: pointsAccount, checkinStatus: checkinInfo, refresh: refreshPoints } = usePointsStore();
@@ -29,8 +45,9 @@ export default function Profile() {
    refreshPoints();
  });

-  const handleMenuClick = (path: string) => {
-    Taro.navigateTo({ url: path });
+  const handleMenuClick = (label: string) => {
+    const path = MENU_PATHS[label];
+    if (path) Taro.navigateTo({ url: path });
  };

  const handleLogout = () => {
@@ -46,30 +63,26 @@ export default function Profile() {

  return (
    <View className='profile-page'>
-      {/* 用户信息区 */}
-      <View className='profile-header'>
+      {/* 用户信息卡片 */}
+      <View className='profile-user-card'>
        <View className='profile-avatar'>
-          <Text className='profile-avatar-text'>
-            {user?.display_name?.[0] || '?'}
-          </Text>
+          <Text className='profile-avatar-icon'>👤</Text>
        </View>
-        <Text className='profile-name'>{user?.display_name || '未登录'}</Text>
-        <Text className='profile-phone'>{user?.phone || ''}</Text>
+        <View className='profile-user-info'>
+          <Text className='profile-name'>{user?.display_name || '未登录'}</Text>
+          <Text className='profile-phone'>{user?.phone || ''}</Text>
+        </View>
+      </View>

-        {/* 积分 + 连续打卡横排 */}
-        <View className='profile-stats'>
-          <View
-            className='stat-card'
-            onClick={() => Taro.navigateTo({ url: '/pages/pkg-mall/detail/index' })}
-          >
-            <Text className='stat-value stat-value-pri'>{(pointsAccount?.balance ?? 0).toLocaleString()}</Text>
-            <Text className='stat-label'>积分</Text>
-          </View>
-          <View className='stat-divider' />
-          <View className='stat-card'>
-            <Text className='stat-value stat-value-acc'>{checkinInfo?.consecutive_days ?? 0}</Text>
-            <Text className='stat-label'>连续打卡(天)</Text>
-          </View>
+      {/* 积分 + 打卡 — 两个独立卡片并排 */}
+      <View className='profile-stats-row'>
+        <View className='stat-card'>
+          <Text className='stat-value stat-pri'>{(pointsAccount?.balance ?? 0).toLocaleString()}</Text>
+          <Text className='stat-label'>健康积分</Text>
+        </View>
+        <View className='stat-card'>
+          <Text className='stat-value stat-acc'>{checkinInfo?.consecutive_days ?? 0}天</Text>
+          <Text className='stat-label'>连续打卡</Text>
        </View>
      </View>

@@ -79,10 +92,10 @@ export default function Profile() {
          <View
            className='menu-item'
            key={item.label}
-            onClick={() => handleMenuClick(item.path)}
+            onClick={() => handleMenuClick(item.label)}
          >
-            <View className='menu-icon'>
-              <Text className='menu-icon-char'>{item.char}</Text>
+            <View className='menu-icon' style={`background:${item.bg};`}>
+              <Text className='menu-icon-text'>{item.icon}</Text>
            </View>
            <Text className='menu-label'>{item.label}</Text>
            <Text className='menu-arrow'>›</Text>