From 551d19d921f9390ea11b1045fe02f3404e8f55ad Mon Sep 17 00:00:00 2001 From: iven Date: Sun, 17 May 2026 12:48:38 +0800 Subject: [PATCH] =?UTF-8?q?fix(mp):=20=E4=BF=AE=E6=AD=A3=20design=20token?= =?UTF-8?q?=20=E5=AD=97=E5=8F=B7=E5=AF=B9=E9=BD=90=E5=8E=9F=E5=9E=8B=20+?= =?UTF-8?q?=20ContentCard=20margin=20prop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - tokens.scss: 修正字号 token 对齐 18 份原型稿 fontSize 统计 --tk-font-h1: 26→28px, --tk-font-h2: 24→22px --tk-font-body-lg: 28→18px, --tk-font-body: 22→16px --tk-font-body-sm: 16→14px elder-mode 同步重新计算比例系数 - ContentCard: 新增 margin prop ('none'|'md')，margin-bottom 从 CSS 类移至 inline style，支持列表容器内无间距模式 - Profile 页: 用户卡片添加 profile-user-card flex 布局 菜单组/积分卡片使用 margin="none"，修复布局对齐 - Login 页: SCSS 全部改为 design token 引用 --- .../src/components/ui/ContentCard/index.scss | 1 - .../src/components/ui/ContentCard/index.tsx | 10 ++- apps/miniprogram/src/pages/login/index.scss | 39 ++++++----- apps/miniprogram/src/pages/profile/index.scss | 57 +++++++++------- apps/miniprogram/src/pages/profile/index.tsx | 23 ++++--- apps/miniprogram/src/styles/tokens.scss | 67 ++++++++++--------- 6 files changed, 107 insertions(+), 90 deletions(-) diff --git a/apps/miniprogram/src/components/ui/ContentCard/index.scss b/apps/miniprogram/src/components/ui/ContentCard/index.scss index 38fb933..9c8c6e4 100644 --- a/apps/miniprogram/src/components/ui/ContentCard/index.scss +++ b/apps/miniprogram/src/components/ui/ContentCard/index.scss @@ -4,7 +4,6 @@ background: var(--tk-card-bg); border-radius: var(--tk-card-radius); box-shadow: $shadow-sm; - margin-bottom: var(--tk-gap-md); transition: background 0.15s, opacity 0.15s, transform 0.15s; &--outlined { diff --git a/apps/miniprogram/src/components/ui/ContentCard/index.tsx b/apps/miniprogram/src/components/ui/ContentCard/index.tsx index c3c4a38..e0b83f2 100644 --- a/apps/miniprogram/src/components/ui/ContentCard/index.tsx +++ b/apps/miniprogram/src/components/ui/ContentCard/index.tsx @@ -7,6 +7,7 @@ interface ContentCardProps { variant?: 'default' | 'outlined' | 'elevated'; onPress?: () => void; padding?: 'none' | 'sm' | 'md' | 'lg'; + margin?: 'none' | 'md'; activeFeedback?: 'bg' | 'opacity' | 'scale' | 'none'; className?: string; style?: CSSProperties; @@ -20,10 +21,16 @@ const PADDING_MAP = { lg: 'var(--tk-card-padding-lg)', } as const; +const MARGIN_MAP = { + none: '0', + md: 'var(--tk-gap-md)', +} as const; + const ContentCard: React.FC = ({ variant = 'default', onPress, padding = 'md', + margin = 'md', activeFeedback = 'bg', className, style, @@ -31,8 +38,9 @@ const ContentCard: React.FC = ({ }) => { const innerStyle = useMemo(() => ({ padding: PADDING_MAP[padding], + marginBottom: MARGIN_MAP[margin], ...style, - }), [padding, style]); + }), [padding, margin, style]); const hasPress = !!onPress; const cls = [ diff --git a/apps/miniprogram/src/pages/login/index.scss b/apps/miniprogram/src/pages/login/index.scss index 6a01e33..46f9679 100644 --- a/apps/miniprogram/src/pages/login/index.scss +++ b/apps/miniprogram/src/pages/login/index.scss @@ -1,8 +1,7 @@ @import '../../styles/variables.scss'; @import '../../styles/mixins.scss'; -// 登录页使用原型精确数值，不走 design token -// 原型参考：docs/design/mp-01-login.html +// 登录页 — 全部使用 design token，原型参考 docs/design/mp-01-login.html .login-page { min-height: 100vh; @@ -40,14 +39,14 @@ .login-title { font-family: 'Georgia', 'Times New Roman', serif; - font-size: 28px; + font-size: var(--tk-font-h1); font-weight: 700; color: $tx; margin-bottom: 8px; } .login-subtitle { - font-size: 14px; + font-size: var(--tk-font-body-sm); color: $tx3; } @@ -56,7 +55,7 @@ height: 56px; background: $card; border: 1.5px solid $bd; - border-radius: 16px; + border-radius: $r; display: flex; align-items: center; padding: 0 16px; @@ -66,17 +65,17 @@ .login-input { flex: 1; height: 100%; - font-size: 16px; + font-size: var(--tk-font-body); color: $tx; } .login-placeholder { color: $tx3; - font-size: 16px; + font-size: var(--tk-font-body); } .login-eye { - font-size: 14px; + font-size: var(--tk-font-body-sm); color: var(--tk-pri); font-weight: 500; padding: 6px 0; @@ -86,7 +85,7 @@ /* ─── 登录按钮 ─── */ .login-submit { height: 54px; - border-radius: 16px; + border-radius: $r; background: var(--tk-pri); @include flex-center; margin-top: 12px; @@ -99,7 +98,7 @@ } .login-submit-text { - font-size: 18px; + font-size: var(--tk-font-body-lg); font-weight: 600; color: $white; } @@ -119,14 +118,14 @@ } .login-divider-text { - font-size: 12px; + font-size: var(--tk-font-cap); color: $tx3; } /* ─── 微信登录 ─── */ .login-wechat-btn { height: 54px; - border-radius: 16px; + border-radius: $r; background: $wechat; display: flex; align-items: center; @@ -140,13 +139,13 @@ } .login-wechat-icon { - font-size: 16px; + font-size: var(--tk-font-body); color: $white; font-weight: bold; } .login-wechat-text { - font-size: 18px; + font-size: var(--tk-font-body-lg); font-weight: 600; color: $white; } @@ -161,9 +160,9 @@ height: 54px; background: var(--tk-pri); color: $white; - font-size: 18px; + font-size: var(--tk-font-body-lg); font-weight: 600; - border-radius: 16px; + border-radius: $r; border: none; @include flex-center; box-shadow: 0 4px 16px rgba($pri, 0.25); @@ -198,14 +197,14 @@ } .agreement-check-mark { - font-size: 14px; + font-size: var(--tk-font-body-sm); color: $white; font-weight: bold; line-height: 1; } .agreement-text { - font-size: 12px; + font-size: var(--tk-font-cap); color: $tx3; line-height: 1.8; } @@ -220,7 +219,7 @@ text-align: center; padding: 12px; border: 1px dashed $bd; - border-radius: 12px; + border-radius: $r-sm; margin-top: 16px; &:active { @@ -229,6 +228,6 @@ } .login-dev-btn-text { - font-size: 13px; + font-size: var(--tk-font-cap); color: $tx3; } diff --git a/apps/miniprogram/src/pages/profile/index.scss b/apps/miniprogram/src/pages/profile/index.scss index 8ce177e..cc2300f 100644 --- a/apps/miniprogram/src/pages/profile/index.scss +++ b/apps/miniprogram/src/pages/profile/index.scss @@ -1,6 +1,8 @@ @import '../../styles/variables.scss'; @import '../../styles/mixins.scss'; +// 个人中心页 — 全部使用 design token，原型参考 docs/design/mp-redesign-home.html → ProfileA + .profile-page { padding-bottom: calc(var(--tk-tabbar-space) + env(safe-area-inset-bottom)); } @@ -16,7 +18,7 @@ .profile-avatar { width: 60px; height: 60px; - border-radius: $r-pill; + border-radius: 30px; background: linear-gradient(135deg, var(--tk-pri-l) 0%, var(--tk-pri) 100%); @include flex-center; flex-shrink: 0; @@ -24,9 +26,10 @@ .profile-avatar-char { font-family: Georgia, 'Times New Roman', serif; - font-size: var(--tk-font-body-lg); + font-size: var(--tk-font-h1); font-weight: 700; color: $white; + line-height: 1; } .profile-user-info { @@ -35,8 +38,8 @@ } .profile-name { - @include serif-number; - font-size: var(--tk-font-body); + font-family: Georgia, 'Times New Roman', serif; + font-size: var(--tk-font-h2); font-weight: 700; color: $tx; display: block; @@ -44,20 +47,20 @@ } .profile-phone { - font-size: var(--tk-font-cap); - color: var(--tk-text-secondary); + font-size: var(--tk-font-body-sm); + color: $tx3; } .profile-arrow { - font-size: var(--tk-font-body-sm); - color: var(--tk-text-secondary); + font-size: var(--tk-font-body); + color: $tx3; flex-shrink: 0; } /* ─── 积分 + 打卡 ─── */ .profile-stats-row { display: flex; - gap: var(--tk-gap-sm); + gap: 10px; margin-bottom: var(--tk-gap-lg); } @@ -67,8 +70,8 @@ } .stat-value { - @include serif-number; - font-size: var(--tk-font-body-lg); + font-family: Georgia, 'Times New Roman', serif; + font-size: var(--tk-font-h1); font-weight: 700; display: block; margin-bottom: 2px; @@ -83,27 +86,29 @@ } .stat-unit { - font-size: var(--tk-font-body-sm); + font-size: var(--tk-font-body); font-weight: 400; } .stat-label { font-size: var(--tk-font-cap); - color: var(--tk-text-secondary); + color: $tx3; + margin-top: 2px; + display: block; } /* ─── 分组菜单 ─── */ .menu-group { - margin-bottom: var(--tk-gap-sm); + margin-bottom: 14px; } .menu-group-title { - font-size: var(--tk-font-cap); + font-size: var(--tk-font-body-sm); font-weight: 600; color: $tx2; display: block; margin-bottom: var(--tk-gap-xs); - padding-left: var(--tk-gap-2xs); + padding-left: 4px; } .menu-group-card { @@ -113,9 +118,9 @@ .menu-item { display: flex; align-items: center; - gap: var(--tk-gap-sm); - padding: var(--tk-gap-md); - min-height: 48px; + gap: 14px; + padding: 14px var(--tk-gap-md); + min-height: var(--tk-touch-min); position: relative; &:active { @@ -153,8 +158,8 @@ } .menu-icon-text { - @include serif-number; - font-size: var(--tk-font-body-sm); + font-family: Georgia, 'Times New Roman', serif; + font-size: var(--tk-font-body); font-weight: 700; &.menu-icon-text--pri { @@ -172,13 +177,13 @@ .menu-label { flex: 1; - font-size: var(--tk-font-cap); + font-size: var(--tk-font-body); color: $tx; } .menu-arrow { - font-size: var(--tk-font-cap); - color: var(--tk-text-secondary); + font-size: var(--tk-font-body-sm); + color: $tx3; flex-shrink: 0; } @@ -207,6 +212,6 @@ } .logout-text { - font-size: var(--tk-font-cap); - color: var(--tk-text-secondary); + font-size: var(--tk-font-body-sm); + color: $tx3; } diff --git a/apps/miniprogram/src/pages/profile/index.tsx b/apps/miniprogram/src/pages/profile/index.tsx index 55e014a..060b044 100644 --- a/apps/miniprogram/src/pages/profile/index.tsx +++ b/apps/miniprogram/src/pages/profile/index.tsx @@ -135,7 +135,7 @@ export default function Profile() { {/* 用户信息卡片 */} {isGuest ? ( - + ? @@ -147,7 +147,7 @@ export default function Profile() { ) : ( <> - + {displayInitial} @@ -165,13 +165,17 @@ export default function Profile() { ) : ( - - {(pointsAccount?.balance ?? 0).toLocaleString()} - 健康积分 + + + {(pointsAccount?.balance ?? 0).toLocaleString()} + 健康积分 + - - {checkinInfo?.consecutive_days ?? 0}天 - 连续打卡 + + + {checkinInfo?.consecutive_days ?? 0}天 + 连续打卡 + )} @@ -183,6 +187,7 @@ export default function Profile() { Taro.navigateTo({ url: '/pages/pkg-profile/notifications/index' })} > @@ -205,7 +210,7 @@ export default function Profile() { {groups.map((group) => ( {group.title} - + {group.items.map((item, idx) => (