iven/hms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(miniprogram): 全面接入 Design Token — 68 SCSS 文件 px→var(--tk-*)
Some checks failed
CI / security-audit (push) Has been cancelled
Details
CI / rust-check (push) Has been cancelled
Details
CI / rust-test (push) Has been cancelled
Details
CI / frontend-build (push) Has been cancelled
Details

Browse Source 
- 重写 tokens.scss：校准 10 级字号 + 4 结构 token 匹配实际设计值
- 更新 mixins.scss：4 个 mixin 引用 token 替代硬编码
- 68 SCSS 文件全面迁移：font-size px → var(--tk-font-*)，辅助文字色 → var(--tk-text-secondary)
- 清理 12 个页面的本地 mixin 重复定义
- elder-mode.scss 从 530 行缩减至 ~120 行：删除所有字号/颜色覆写，仅保留结构布局
- Token 覆盖率：634 引用 / 仅 3 个特殊硬编码值（72px/80px/21px）

关怀模式通过 CSS 变量级联自动生效，消除"打地鼠"问题。
This commit is contained in:
iven
2026-05-09 23:53:07 +08:00
parent 257ca94a25
commit 890c132890
74 changed files with 1127 additions and 1688 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/miniprogram/src/pages/pkg-profile/consents/index.scss
View File

@@ -1,23 +1,5 @@
@import '../../../styles/variables.scss';
@mixin section-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-weight: bold;
color: $tx;
margin-bottom: 20px;
display: block;
}
@mixin tag($bg, $color) {
display: inline-block;
padding: 4px 12px;
border-radius: 8px;
font-size: 22px;
font-weight: 500;
background: $bg;
color: $color;
}
@import '../../../styles/mixins.scss';
.consents-page {
min-height: 100vh;
@@ -52,7 +34,7 @@
}
.consent-card__type {
font-size: 28px;
font-size: var(--tk-font-body-lg);
font-weight: bold;
color: $tx;
}
@@ -72,7 +54,7 @@
.consent-card__scope,
.consent-card__date,
.consent-card__expiry {
font-size: 24px;
font-size: var(--tk-font-h2);
color: $tx2;
display: block;
margin-bottom: 4px;
@@ -96,7 +78,7 @@
}
.revoke-btn__text {
font-size: 24px;
font-size: var(--tk-font-h2);
color: $dan;
font-weight: 500;
}

23
apps/miniprogram/src/pages/pkg-profile/diagnoses/index.scss
View File

@@ -1,14 +1,5 @@
@import '../../../styles/variables.scss';
@mixin tag($bg, $color) {
display: inline-block;
padding: 4px 12px;
border-radius: 8px;
font-size: 22px;
font-weight: 500;
background: $bg;
color: $color;
}
@import '../../../styles/mixins.scss';
.diagnoses-page {
min-height: 100vh;
@@ -19,7 +10,7 @@
.page-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-size: var(--tk-font-num);
font-weight: bold;
color: $tx;
margin-bottom: 20px;
@@ -48,7 +39,7 @@
}
.diagnosis-card__name {
font-size: 28px;
font-size: var(--tk-font-body-lg);
font-weight: bold;
color: $tx;
flex: 1;
@@ -91,19 +82,19 @@
}
.diagnosis-card__code {
font-size: 22px;
color: $tx3;
font-size: var(--tk-font-body);
color: var(--tk-text-secondary);
font-variant-numeric: tabular-nums;
}
.diagnosis-card__date {
font-size: 22px;
font-size: var(--tk-font-body);
color: $tx2;
display: block;
}
.diagnosis-card__notes {
font-size: 22px;
font-size: var(--tk-font-body);
color: $tx2;
display: block;
margin-top: 8px;

22
apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/detail/index.scss
View File

@@ -1,9 +1,5 @@
@import '../../../../styles/variables.scss';
@mixin serif-number {
font-family: 'Georgia', 'Times New Roman', serif;
font-variant-numeric: tabular-nums;
}
@import '../../../../styles/mixins.scss';
.detail-page {
min-height: 100vh;
@@ -31,7 +27,7 @@
.detail-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 34px;
font-size: var(--tk-font-num-lg);
font-weight: bold;
color: $tx;
}
@@ -40,7 +36,7 @@
display: inline-block;
padding: 4px 12px;
border-radius: 8px;
font-size: 22px;
font-size: var(--tk-font-body);
font-weight: 500;
background: $bd-l;
color: $tx3;
@@ -57,7 +53,7 @@
}
.header-sub {
font-size: 26px;
font-size: var(--tk-font-h1);
color: $tx2;
display: block;
@include serif-number;
@@ -65,7 +61,7 @@
.section-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-size: var(--tk-font-num);
font-weight: bold;
color: $tx;
display: block;
@@ -85,13 +81,13 @@
}
.detail-label {
font-size: 26px;
font-size: var(--tk-font-h1);
color: $tx2;
flex-shrink: 0;
}
.detail-value {
font-size: 26px;
font-size: var(--tk-font-h1);
color: $tx;
text-align: right;
flex: 1;
@@ -100,7 +96,7 @@
}
.notes-text {
font-size: 26px;
font-size: var(--tk-font-h1);
color: $tx;
line-height: 1.6;
}
@@ -113,6 +109,6 @@
}
.empty-text {
font-size: 28px;
font-size: var(--tk-font-body-lg);
color: $tx3;
}

33
apps/miniprogram/src/pages/pkg-profile/dialysis-prescriptions/index.scss
View File

@@ -1,28 +1,5 @@
@import '../../../styles/variables.scss';
@mixin section-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-weight: bold;
color: $tx;
margin-bottom: 20px;
display: block;
}
@mixin tag($bg, $color) {
display: inline-block;
padding: 4px 12px;
border-radius: 8px;
font-size: 22px;
font-weight: 500;
background: $bg;
color: $color;
}
@mixin serif-number {
font-family: 'Georgia', 'Times New Roman', serif;
font-variant-numeric: tabular-nums;
}
@import '../../../styles/mixins.scss';
.dialysis-prescriptions-page {
min-height: 100vh;
@@ -61,7 +38,7 @@
}
.prescription-model {
font-size: 28px;
font-size: var(--tk-font-body-lg);
font-weight: bold;
color: $tx;
}
@@ -85,14 +62,14 @@
}
.meta-item {
font-size: 24px;
font-size: var(--tk-font-h2);
color: $tx2;
@include serif-number;
}
.prescription-date {
font-size: 24px;
color: $tx3;
font-size: var(--tk-font-h2);
color: var(--tk-text-secondary);
display: block;
@include serif-number;
}

24
apps/miniprogram/src/pages/pkg-profile/dialysis-records/detail/index.scss
View File

@@ -1,9 +1,5 @@
@import '../../../../styles/variables.scss';
@mixin serif-number {
font-family: 'Georgia', 'Times New Roman', serif;
font-variant-numeric: tabular-nums;
}
@import '../../../../styles/mixins.scss';
.detail-page {
min-height: 100vh;
@@ -31,7 +27,7 @@
.detail-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 34px;
font-size: var(--tk-font-num-lg);
font-weight: bold;
color: $tx;
}
@@ -40,7 +36,7 @@
display: inline-block;
padding: 4px 12px;
border-radius: 8px;
font-size: 22px;
font-size: var(--tk-font-body);
font-weight: 500;
background: $bd-l;
color: $tx3;
@@ -57,14 +53,14 @@
}
.header-sub {
font-size: 26px;
font-size: var(--tk-font-h1);
color: $tx2;
display: block;
}
.review-info {
font-size: 24px;
color: $tx3;
font-size: var(--tk-font-h2);
color: var(--tk-text-secondary);
display: block;
margin-top: 8px;
@include serif-number;
@@ -72,7 +68,7 @@
.section-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-size: var(--tk-font-num);
font-weight: bold;
color: $tx;
display: block;
@@ -92,13 +88,13 @@
}
.detail-label {
font-size: 26px;
font-size: var(--tk-font-h1);
color: $tx2;
flex-shrink: 0;
}
.detail-value {
font-size: 26px;
font-size: var(--tk-font-h1);
color: $tx;
text-align: right;
flex: 1;
@@ -114,6 +110,6 @@
}
.empty-text {
font-size: 28px;
font-size: var(--tk-font-body-lg);
color: $tx3;
}

33
apps/miniprogram/src/pages/pkg-profile/dialysis-records/index.scss
View File

@@ -1,28 +1,5 @@
@import '../../../styles/variables.scss';
@mixin section-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-weight: bold;
color: $tx;
margin-bottom: 20px;
display: block;
}
@mixin tag($bg, $color) {
display: inline-block;
padding: 4px 12px;
border-radius: 8px;
font-size: 22px;
font-weight: 500;
background: $bg;
color: $color;
}
@mixin serif-number {
font-family: 'Georgia', 'Times New Roman', serif;
font-variant-numeric: tabular-nums;
}
@import '../../../styles/mixins.scss';
.dialysis-records-page {
min-height: 100vh;
@@ -86,7 +63,7 @@
.record-date {
@include serif-number;
font-size: 26px;
font-size: var(--tk-font-h1);
color: $tx2;
display: block;
margin-bottom: 8px;
@@ -99,13 +76,13 @@
}
.weight-item {
font-size: 24px;
font-size: var(--tk-font-h2);
color: $tx2;
@include serif-number;
}
.record-meta {
font-size: 24px;
color: $tx3;
font-size: var(--tk-font-h2);
color: var(--tk-text-secondary);
@include serif-number;
}

20
apps/miniprogram/src/pages/pkg-profile/elder-mode/index.scss
View File

@@ -28,7 +28,7 @@
border-radius: $r-sm;
background: $acc-l;
@include flex-center;
font-size: 22px;
font-size: var(--tk-font-body);
font-weight: 700;
color: $acc;
flex-shrink: 0;
@@ -39,7 +39,7 @@
}
.elder-mode-title {
font-size: 18px;
font-size: var(--tk-font-body-sm);
font-weight: 700;
color: $tx;
display: block;
@@ -47,8 +47,8 @@
}
.elder-mode-desc {
font-size: 13px;
color: $tx3;
font-size: var(--tk-font-cap);
color: var(--tk-text-secondary);
}
.elder-mode-status {
@@ -60,7 +60,7 @@
}
.elder-mode-status-text {
font-size: 15px;
font-size: var(--tk-font-cap);
color: $tx2;
}
@@ -93,13 +93,13 @@
}
}
/* ─── 效果预览 ─── */
/* --- 效果预览 --- */
.elder-mode-preview {
margin-top: 4px;
}
.elder-mode-preview-title {
font-size: 14px;
font-size: var(--tk-font-cap);
font-weight: 600;
color: $tx2;
display: block;
@@ -115,7 +115,7 @@
}
.elder-mode-preview-sample {
font-size: 16px;
font-size: var(--tk-font-body-sm);
color: $tx;
display: block;
margin-bottom: 8px;
@@ -127,6 +127,6 @@
}
.elder-mode-preview-note {
font-size: 13px;
color: $tx3;
font-size: var(--tk-font-cap);
color: var(--tk-text-secondary);
}

26
apps/miniprogram/src/pages/pkg-profile/family-add/index.scss
View File

@@ -1,19 +1,5 @@
@import '../../../styles/variables.scss';
@mixin section-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-weight: bold;
color: $tx;
margin-bottom: 20px;
display: block;
}
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@import '../../../styles/mixins.scss';
.family-add-page {
min-height: 100vh;
@@ -48,7 +34,7 @@
.form-label {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 28px;
font-size: var(--tk-font-body-lg);
color: $tx;
flex-shrink: 0;
width: 140px;
@@ -57,7 +43,7 @@
.form-input {
flex: 1;
font-size: 28px;
font-size: var(--tk-font-body-lg);
color: $tx;
text-align: right;
border: none;
@@ -77,7 +63,7 @@
}
.form-picker-text {
font-size: 28px;
font-size: var(--tk-font-body-lg);
color: $tx;
margin-right: 10px;
@@ -87,7 +73,7 @@
}
.form-picker-arrow {
font-size: 24px;
font-size: var(--tk-font-h2);
color: $tx3;
font-family: 'Georgia', 'Times New Roman', serif;
}
@@ -109,7 +95,7 @@
.submit-text {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 32px;
font-size: var(--tk-font-num);
color: #fff;
font-weight: bold;
letter-spacing: 2px;

45
apps/miniprogram/src/pages/pkg-profile/family/index.scss
View File

@@ -1,34 +1,5 @@
@import '../../../styles/variables.scss';
@mixin serif-number {
font-family: 'Georgia', 'Times New Roman', serif;
font-variant-numeric: tabular-nums;
}
@mixin section-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-weight: bold;
color: $tx;
margin-bottom: 20px;
display: block;
}
@mixin tag($bg, $color) {
display: inline-block;
padding: 4px 12px;
border-radius: 8px;
font-size: 22px;
font-weight: 500;
background: $bg;
color: $color;
}
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@import '../../../styles/mixins.scss';
.family-page {
min-height: 100vh;
@@ -78,7 +49,7 @@
.family-avatar-text {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 36px;
font-size: var(--tk-font-num-lg);
font-weight: bold;
color: $pri-d;
}
@@ -98,14 +69,14 @@
}
.family-name {
font-size: 30px;
font-size: var(--tk-font-num);
font-weight: bold;
color: $tx;
}
.family-current-tag {
@include tag($pri, #fff);
font-size: 18px;
font-size: var(--tk-font-body-sm);
padding: 2px 10px;
}
@@ -117,12 +88,12 @@
.family-relation-tag {
@include tag($pri-l, $pri-d);
font-size: 22px;
font-size: var(--tk-font-body);
padding: 2px 12px;
}
.family-gender {
font-size: 24px;
font-size: var(--tk-font-h2);
color: $tx2;
}
@@ -135,7 +106,7 @@
}
.family-edit-text {
font-size: 24px;
font-size: var(--tk-font-h2);
color: $tx2;
}
@@ -152,7 +123,7 @@
.family-add-text {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 32px;
font-size: var(--tk-font-num);
color: #fff;
font-weight: bold;
letter-spacing: 2px;

26
apps/miniprogram/src/pages/pkg-profile/followups/index.scss
View File

@@ -1,19 +1,5 @@
@import '../../../styles/variables.scss';
@mixin tag($bg, $color) {
display: inline-block;
padding: 4px 12px;
border-radius: 8px;
font-size: 22px;
font-weight: 500;
background: $bg;
color: $color;
}
@mixin serif-number {
font-family: 'Georgia', 'Times New Roman', serif;
font-variant-numeric: tabular-nums;
}
@import '../../../styles/mixins.scss';
.my-followups-page {
min-height: 100vh;
@@ -38,7 +24,7 @@
}
.tab-text {
font-size: 28px;
font-size: var(--tk-font-body-lg);
color: $tx2;
margin-bottom: 8px;
@@ -82,7 +68,7 @@
.task-name {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-size: var(--tk-font-num);
font-weight: bold;
color: $tx;
}
@@ -104,7 +90,7 @@
}
.task-desc {
font-size: 26px;
font-size: var(--tk-font-h1);
color: $tx2;
display: block;
margin-bottom: 8px;
@@ -115,7 +101,7 @@
.task-due {
@include serif-number;
font-size: 24px;
color: $tx3;
font-size: var(--tk-font-h2);
color: var(--tk-text-secondary);
display: block;
}

15
apps/miniprogram/src/pages/pkg-profile/health-records/index.scss
View File

@@ -1,4 +1,5 @@
@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';
.health-records-page {
min-height: 100vh;
@@ -9,7 +10,7 @@
.page-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-size: var(--tk-font-num);
font-weight: bold;
color: $tx;
margin-bottom: 20px;
@@ -38,33 +39,33 @@
}
.record-card__type {
font-size: 28px;
font-size: var(--tk-font-body-lg);
font-weight: bold;
color: $tx;
}
.record-card__date {
font-size: 24px;
font-size: var(--tk-font-h2);
color: $tx2;
font-variant-numeric: tabular-nums;
}
.record-card__assessment {
font-size: 24px;
font-size: var(--tk-font-h2);
color: $tx;
display: block;
margin-bottom: 4px;
}
.record-card__source {
font-size: 22px;
color: $tx3;
font-size: var(--tk-font-body);
color: var(--tk-text-secondary);
display: block;
margin-bottom: 4px;
}
.record-card__notes {
font-size: 22px;
font-size: var(--tk-font-body);
color: $tx2;
display: block;
margin-top: 8px;

45
apps/miniprogram/src/pages/pkg-profile/medication/index.scss
View File

@@ -1,24 +1,5 @@
@import '../../../styles/variables.scss';
@mixin section-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-weight: bold;
color: $tx;
margin-bottom: 20px;
display: block;
}
@mixin serif-number {
font-family: 'Georgia', 'Times New Roman', serif;
font-variant-numeric: tabular-nums;
}
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@import '../../../styles/mixins.scss';
.medication-page {
min-height: 100vh;
@@ -63,7 +44,7 @@
.reminder-avatar-text {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 32px;
font-size: var(--tk-font-num);
font-weight: bold;
color: $acc;
}
@@ -77,7 +58,7 @@
.reminder-name {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-size: var(--tk-font-num);
font-weight: bold;
color: $tx;
margin-bottom: 4px;
@@ -85,7 +66,7 @@
.reminder-dosage {
@include serif-number;
font-size: 24px;
font-size: var(--tk-font-h2);
color: $tx2;
}
@@ -133,7 +114,7 @@
}
.delete-btn {
font-size: 24px;
font-size: var(--tk-font-h2);
color: $dan;
padding: 4px 12px;
}
@@ -148,7 +129,7 @@
.form-card-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 28px;
font-size: var(--tk-font-body-lg);
font-weight: bold;
color: $tx;
margin-bottom: 20px;
@@ -168,7 +149,7 @@
}
.form-label {
font-size: 28px;
font-size: var(--tk-font-body-lg);
color: $tx;
flex-shrink: 0;
width: 160px;
@@ -176,7 +157,7 @@
.form-input {
flex: 1;
font-size: 28px;
font-size: var(--tk-font-body-lg);
color: $tx;
text-align: right;
border: none;
@@ -198,12 +179,12 @@
.time-value {
@include serif-number;
font-size: 28px;
font-size: var(--tk-font-body-lg);
color: $tx;
}
.time-modify {
font-size: 24px;
font-size: var(--tk-font-h2);
color: $pri;
}
@@ -222,7 +203,7 @@
}
.form-cancel-text {
font-size: 28px;
font-size: var(--tk-font-body-lg);
color: $tx2;
}
@@ -235,7 +216,7 @@
}
.form-confirm-text {
font-size: 28px;
font-size: var(--tk-font-body-lg);
color: #fff;
font-weight: bold;
}
@@ -253,7 +234,7 @@
.add-text {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 32px;
font-size: var(--tk-font-num);
color: #fff;
font-weight: bold;
letter-spacing: 2px;

37
apps/miniprogram/src/pages/pkg-profile/reports/index.scss
View File

@@ -1,34 +1,5 @@
@import '../../../styles/variables.scss';
@mixin section-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-weight: bold;
color: $tx;
margin-bottom: 20px;
display: block;
}
@mixin serif-number {
font-family: 'Georgia', 'Times New Roman', serif;
font-variant-numeric: tabular-nums;
}
@mixin tag($bg, $color) {
display: inline-block;
padding: 4px 12px;
border-radius: 8px;
font-size: 22px;
font-weight: 500;
background: $bg;
color: $color;
}
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@import '../../../styles/mixins.scss';
.my-reports-page {
min-height: 100vh;
@@ -83,14 +54,14 @@
.report-avatar-text {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 28px;
font-size: var(--tk-font-body-lg);
font-weight: bold;
color: $pri-d;
}
.report-type {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-size: var(--tk-font-num);
font-weight: bold;
color: $tx;
}
@@ -109,7 +80,7 @@
.report-date {
@include serif-number;
font-size: 26px;
font-size: var(--tk-font-h1);
color: $tx2;
display: block;
padding-left: 72px;

22
apps/miniprogram/src/pages/pkg-profile/settings/index.scss
View File

@@ -1,19 +1,5 @@
@import '../../../styles/variables.scss';
@mixin section-title {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 30px;
font-weight: bold;
color: $tx;
margin-bottom: 20px;
display: block;
}
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@import '../../../styles/mixins.scss';
.settings-page {
min-height: 100vh;
@@ -61,14 +47,14 @@
.settings-icon-text {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 24px;
font-size: var(--tk-font-h2);
font-weight: bold;
color: $pri-d;
}
.settings-label {
flex: 1;
font-size: 30px;
font-size: var(--tk-font-num);
color: $tx;
}
@@ -78,7 +64,7 @@
}
.settings-arrow {
font-size: 24px;
font-size: var(--tk-font-h2);
color: $tx3;
font-family: 'Georgia', 'Times New Roman', serif;
flex-shrink: 0;