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

refactor(mp): CSS 变量主题 + 登录页改造 — UI 优化 Phase 0-2

Browse Source 
Phase 0: 建立 design token 体系
- tokens.scss 新增 --tk-pri/--tk-pri-l/--tk-pri-d/--tk-shadow-btn/--tk-shadow-tab
- .doctor-mode 覆盖为靛蓝色系，.elder-mode 非线性放大字号
- variables.scss 新增医生端色彩 + 阴影变量

Phase 1: 组件库 + 页面全局替换
- 75 个页面 SCSS $pri → var(--tk-pri) 全量替换
- 11 个新 UI 组件（PrimaryButton/TabFilter/FormInput/ProgressRing 等）
- 8 个现有组件 SCSS 更新
- 18 个医生端页面 useElderClass → useDoctorClass
- PageHeader 匹配原型 NavBar 规格

Phase 2: 登录页重写
- Logo: 方形+ → 圆形渐变 H
- 登录方式: 纯微信 → 账号密码 + 微信一键登录
- 新增 credentialLogin API + store action
- 字号/间距严格匹配原型 mp-01-login.html
This commit is contained in:
iven
2026-05-16 21:29:13 +08:00
parent 1786f0d707
commit 95e219ad5a
124 changed files with 2306 additions and 1142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/miniprogram/src/pages/pkg-health/alerts/index.scss
View File

@@ -19,7 +19,7 @@
}
.alerts-tab.active {
background: $pri;
background: var(--tk-pri);
}
.alerts-tab-text {

50
apps/miniprogram/src/pages/pkg-health/daily-monitoring/index.scss
View File

@@ -6,7 +6,7 @@
/* ── hero ── */
.dm-hero {
padding: 48px 32px 36px;
padding: var(--tk-gap-2xl) var(--tk-gap-xl) 36px;
display: flex;
flex-direction: column;
align-items: center;
@@ -17,21 +17,21 @@
width: 88px;
height: 88px;
border-radius: $r-lg;
background: $pri-l;
margin-bottom: 20px;
background: var(--tk-pri-l);
margin-bottom: var(--tk-section-gap);
}
.dm-hero-icon-text {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: var(--tk-font-hero);
font-weight: bold;
color: $pri;
color: var(--tk-pri);
}
.dm-hero-title {
@include section-title;
font-size: var(--tk-font-num-lg);
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
}
.dm-hero-sub {
@@ -41,14 +41,14 @@
/* ── card (standalone, used for date picker) ── */
.dm-card {
margin: 0 24px 20px;
margin: 0 var(--tk-gap-lg) var(--tk-section-gap);
}
.dm-card-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
margin-bottom: var(--tk-section-gap);
}
.dm-card-title {
@@ -71,12 +71,12 @@
align-items: center;
background: $bg;
border-radius: $r-sm;
padding: 22px 24px;
padding: 22px var(--tk-gap-lg);
}
.dm-date-value {
font-size: var(--tk-font-body-lg);
color: $pri;
color: var(--tk-pri);
@include serif-number;
font-weight: bold;
}
@@ -91,7 +91,7 @@
/* ── collapsible group ── */
.dm-group {
margin: 0 24px 20px;
margin: 0 var(--tk-gap-lg) var(--tk-section-gap);
overflow: hidden;
}
@@ -99,10 +99,10 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px;
padding: var(--tk-gap-lg) var(--tk-card-padding-lg);
&:active {
background: $bd-l;
opacity: var(--tk-touch-feedback-opacity);
}
}
@@ -125,7 +125,7 @@
}
.dm-group-body {
padding: 0 28px 28px;
padding: 0 var(--tk-card-padding-lg) var(--tk-card-padding-lg);
}
.dm-group-collapsed .dm-group-body {
@@ -134,7 +134,7 @@
/* ── inner field spacing (within groups) ── */
.dm-inner-field {
margin-bottom: 24px;
margin-bottom: var(--tk-gap-lg);
&:last-child {
margin-bottom: 0;
@@ -145,7 +145,7 @@
.dm-bp-group {
display: flex;
align-items: flex-end;
gap: 12px;
gap: var(--tk-gap-sm);
}
.dm-bp-field {
@@ -156,14 +156,14 @@
font-size: var(--tk-font-body);
color: $tx2;
display: block;
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
}
.dm-bp-divider {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 20px;
padding-bottom: var(--tk-section-gap);
gap: 6px;
}
@@ -192,7 +192,7 @@
.dm-single-row {
display: flex;
align-items: center;
gap: 16px;
gap: var(--tk-gap-md);
}
.dm-input-flex {
@@ -210,7 +210,7 @@
.dm-input-box {
background: $bg;
border-radius: $r-sm;
padding: 20px 24px;
padding: var(--tk-section-gap) var(--tk-gap-lg);
font-size: var(--tk-font-body-lg);
color: $tx;
@include serif-number;
@@ -230,7 +230,7 @@
.dm-field-warning {
font-size: var(--tk-font-body);
color: $wrn;
margin-top: 8px;
margin-top: var(--tk-gap-xs);
display: block;
}
@@ -240,16 +240,16 @@
/* ── submit ── */
.dm-submit {
background: $pri;
background: var(--tk-pri);
border-radius: $r;
padding: 26px;
text-align: center;
margin: 40px 24px 0;
margin: 40px var(--tk-gap-lg) 0;
box-shadow: $shadow-md;
transition: opacity 0.2s;
&:active {
opacity: 0.85;
opacity: var(--tk-touch-feedback-opacity);
}
}
@@ -268,8 +268,8 @@
/* ── reset ── */
.dm-reset {
text-align: center;
padding: 24px;
margin-top: 12px;
padding: var(--tk-gap-lg);
margin-top: var(--tk-gap-sm);
}
.dm-reset-text {

62
apps/miniprogram/src/pages/pkg-health/device-sync/index.scss
View File

@@ -5,8 +5,8 @@
// ContentCard 已接管：sync-status-card/sync-result-card 背景/圆角/阴影
.sync-header {
background: $pri;
padding: 48px 32px 32px;
background: var(--tk-pri);
padding: var(--tk-gap-2xl) var(--tk-gap-xl) var(--tk-gap-xl);
color: $card;
}
@@ -16,17 +16,17 @@
}
.sync-section {
padding: 24px;
padding: var(--tk-gap-lg);
}
.sync-hero {
display: flex;
flex-direction: column;
align-items: center;
padding: 48px 24px;
padding: var(--tk-gap-2xl) var(--tk-gap-lg);
background: $card;
border-radius: $r;
margin-bottom: 24px;
margin-bottom: var(--tk-gap-lg);
box-shadow: $shadow-sm;
}
@@ -34,10 +34,10 @@
width: 80px;
height: 80px;
border-radius: 50%;
background: $pri-l;
background: var(--tk-pri-l);
@include flex-center;
margin-bottom: 20px;
color: $pri;
margin-bottom: var(--tk-section-gap);
color: var(--tk-pri);
font-family: 'Georgia', 'Times New Roman', serif;
font-size: var(--tk-font-num-lg);
font-weight: bold;
@@ -45,7 +45,7 @@
.sync-hero-title {
@include section-title;
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
}
.sync-hero-desc {
@@ -55,20 +55,20 @@
.sync-action {
@include flex-center;
background: $pri;
background: var(--tk-pri);
border-radius: $r-sm;
padding: 20px 40px;
margin: 12px 0;
padding: var(--tk-section-gap) var(--tk-gap-2xl);
margin: var(--tk-gap-sm) 0;
&--primary {
flex: 1;
background: $pri;
background: var(--tk-pri);
}
&--danger {
flex: 1;
background: $dan;
margin-left: 16px;
margin-left: var(--tk-gap-md);
}
}
@@ -79,7 +79,7 @@
}
.sync-device-list {
margin-top: 16px;
margin-top: var(--tk-gap-md);
}
.sync-section-title {
@@ -87,7 +87,7 @@
font-size: var(--tk-font-body-lg);
font-weight: bold;
color: $tx;
margin-bottom: 12px;
margin-bottom: var(--tk-gap-sm);
display: block;
}
@@ -97,8 +97,8 @@
align-items: center;
background: $card;
border-radius: $r-sm;
padding: 24px;
margin-bottom: 12px;
padding: var(--tk-gap-lg);
margin-bottom: var(--tk-gap-sm);
box-shadow: $shadow-sm;
}
@@ -127,14 +127,14 @@
.sync-status-card {
display: flex;
align-items: center;
margin-bottom: 16px;
margin-bottom: var(--tk-gap-md);
}
.sync-status-dot {
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 16px;
margin-right: var(--tk-gap-md);
background: $tx3;
&--connected {
@@ -150,8 +150,8 @@
.sync-readings-panel {
background: $card;
border-radius: $r-sm;
padding: 24px;
margin-bottom: 16px;
padding: var(--tk-gap-lg);
margin-bottom: var(--tk-gap-md);
box-shadow: $shadow-sm;
}
@@ -159,7 +159,7 @@
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
padding: var(--tk-gap-sm) 0;
border-bottom: 1px solid $bd-l;
&:last-child {
@@ -175,13 +175,13 @@
.sync-reading-value {
font-size: var(--tk-font-body-lg);
font-weight: bold;
color: $pri;
color: var(--tk-pri);
@include serif-number;
}
.sync-readings-count {
display: block;
margin-top: 12px;
margin-top: var(--tk-gap-sm);
font-size: var(--tk-font-body);
color: var(--tk-text-secondary);
text-align: center;
@@ -189,12 +189,12 @@
.sync-actions-row {
display: flex;
gap: 12px;
gap: var(--tk-gap-sm);
}
.sync-error {
margin: 24px;
padding: 20px 24px;
margin: var(--tk-gap-lg);
padding: var(--tk-section-gap) var(--tk-gap-lg);
background: $dan-l;
border-radius: $r-sm;
}
@@ -218,7 +218,7 @@
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 24px;
margin-bottom: var(--tk-gap-lg);
box-shadow: $shadow-sm;
}
@@ -232,12 +232,12 @@
font-family: 'Georgia', 'Times New Roman', serif;
font-size: var(--tk-font-num-lg);
font-weight: bold;
margin-bottom: 16px;
margin-bottom: var(--tk-gap-md);
}
.sync-result-title {
@include section-title;
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
}
.sync-result-count {

40
apps/miniprogram/src/pages/pkg-health/input/index.scss
View File

@@ -6,7 +6,7 @@
/* ── hero ── */
.input-hero {
padding: 48px 32px 36px;
padding: var(--tk-gap-2xl) var(--tk-gap-xl) 36px;
display: flex;
flex-direction: column;
align-items: center;
@@ -17,21 +17,21 @@
width: 88px;
height: 88px;
border-radius: $r-lg;
background: $pri-l;
margin-bottom: 20px;
background: var(--tk-pri-l);
margin-bottom: var(--tk-section-gap);
}
.input-hero-icon-text {
font-family: 'Georgia', 'Times New Roman', serif;
font-size: var(--tk-font-hero);
font-weight: bold;
color: $pri;
color: var(--tk-pri);
}
.input-hero-title {
@include section-title;
font-size: var(--tk-font-num-lg);
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
}
.input-hero-sub {
@@ -44,18 +44,18 @@
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 24px 20px;
border: 1px dashed $pri;
margin: 0 var(--tk-gap-lg) var(--tk-section-gap);
border: 1px dashed var(--tk-pri);
&:active {
opacity: 0.7;
opacity: var(--tk-touch-feedback-opacity);
}
}
.input-sync-entry-text {
font-size: var(--tk-font-body-lg);
font-weight: 600;
color: $pri;
color: var(--tk-pri);
}
.input-sync-entry-hint {
@@ -65,14 +65,14 @@
/* ── card ── */
.input-card {
margin: 0 24px 20px;
margin: 0 var(--tk-gap-lg) var(--tk-section-gap);
}
.input-card-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
margin-bottom: var(--tk-section-gap);
}
.input-card-indicator {
@@ -104,7 +104,7 @@
align-items: center;
background: $bg;
border-radius: $r-sm;
padding: 22px 24px;
padding: 22px var(--tk-gap-lg);
}
.input-picker-value {
@@ -127,7 +127,7 @@
font-size: var(--tk-font-body-lg);
font-weight: bold;
color: $tx;
margin-bottom: 16px;
margin-bottom: var(--tk-gap-md);
display: block;
}
@@ -135,7 +135,7 @@
.input-bp-group {
display: flex;
align-items: flex-end;
gap: 12px;
gap: var(--tk-gap-sm);
}
.input-bp-field {
@@ -146,14 +146,14 @@
font-size: var(--tk-font-body);
color: $tx2;
display: block;
margin-bottom: 8px;
margin-bottom: var(--tk-gap-xs);
}
.input-bp-divider {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 20px;
padding-bottom: var(--tk-section-gap);
gap: 6px;
}
@@ -174,7 +174,7 @@
.input-field-box {
background: $bg;
border-radius: $r-sm;
padding: 20px 24px;
padding: var(--tk-section-gap) var(--tk-gap-lg);
font-size: var(--tk-font-body-lg);
color: $tx;
@include serif-number;
@@ -195,16 +195,16 @@
/* ── submit ── */
.input-submit {
background: $pri;
background: var(--tk-pri);
border-radius: $r;
padding: 26px;
text-align: center;
margin: 48px 24px 0;
margin: var(--tk-gap-2xl) var(--tk-gap-lg) 0;
box-shadow: $shadow-md;
transition: opacity 0.2s;
&:active {
opacity: 0.85;
opacity: var(--tk-touch-feedback-opacity);
}
}

6
apps/miniprogram/src/pages/pkg-health/trend/index.scss
View File

@@ -21,7 +21,7 @@
width: 88px;
height: 88px;
border-radius: $r-lg;
background: $pri-l;
background: var(--tk-pri-l);
margin-bottom: 20px;
}
@@ -29,7 +29,7 @@
font-family: 'Georgia', 'Times New Roman', serif;
font-size: var(--tk-font-hero);
font-weight: bold;
color: $pri;
color: var(--tk-pri);
}
.trend-hero-title {
@@ -131,7 +131,7 @@
.trend-item-value {
font-size: var(--tk-font-body-lg);
color: $pri;
color: var(--tk-pri);
@include serif-number;
font-weight: bold;
}