admin/danyang-match
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

小程序端：设计系统收敛与排版层级修复

Browse Source 
问题：88 个 wxss 里散落大量硬编码颜色/字号/字重，无法统一调整；
部分正文对比度不达 WCAG AA（4.5:1）；组件触摸目标偏小。

改动：
- 硬编码颜色收敛到语义 token（颜色统一走 design token，不再散落字面值）
- 修正全站字号阶梯：正文 ≥12px、角标 ≥11px；字重只用 400/500/600/700
- 组件触摸目标提升到 ≥44px，并补交互反馈
- 首页补氛围层次、强化排版层级

验证（本轮实测）：
- UI 契约门禁 18/18 PASS（含 wxml 结构、wxss 组件选择器、token 显式值断言）
- 声明级体检 88/88 通过（全部 wxss 声明合法）

交付物：artifacts/miniapp-design-v2-preview.html
This commit is contained in:
WorkBuddy
2026-09-23 01:06:46 +08:00
parent 825fd41ee4
commit 269adf1fed
81 changed files with 5064 additions and 3533 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniapp/pages/messages/messages.wxss
+46 -46
View File
@@ -1,79 +1,79 @@
.page {
min-height: 100vh;
background: #f4f5fa;
min-height:100vh;
background:var(--color-bg-page);
}
.messages-hero {
padding: env(safe-area-inset-top) 24rpx 34rpx;
border-radius: 0 0 36rpx 36rpx;
background: linear-gradient(160deg, var(--mini-night-start), var(--mini-night-end));
box-shadow: var(--mini-shadow);
padding:env(safe-area-inset-top) 24rpx 34rpx;
border-radius:0 0 36rpx 36rpx;
background:linear-gradient(160deg, var(--mini-night-start), var(--mini-night-end));
box-shadow:var(--mini-shadow);
}
.messages-nav {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 88rpx;
position:relative;
display:flex;
align-items:center;
justify-content:center;
height:88rpx;
}
.messages-title {
color: #fff;
font-size: 31rpx;
font-weight: 700;
color:var(--color-text-inverse);
font-size:31rpx;
font-weight:700;
}
.messages-search {
position: absolute;
right: 14rpx;
width: 34rpx;
height: 34rpx;
position:absolute;
right:14rpx;
width:34rpx;
height:34rpx;
}
.message-shortcuts {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 22rpx 8rpx 4rpx;
display:grid;
grid-template-columns:repeat(4, 1fr);
padding:22rpx 8rpx 4rpx;
}
.message-shortcut {
display: flex;
flex-direction: column;
align-items: center;
color: rgba(255, 255, 255, .88);
font-size: 20rpx;
display:flex;
flex-direction:column;
align-items:center;
color:rgba(255, 255, 255, .88);
font-size:24rpx;
}
.shortcut-icon {
display: flex;
align-items: center;
justify-content: center;
width: 72rpx;
height: 72rpx;
margin-bottom: 12rpx;
border: 1rpx solid rgba(255, 255, 255, .2);
border-radius: 26rpx;
display:flex;
align-items:center;
justify-content:center;
width:72rpx;
height:72rpx;
margin-bottom:12rpx;
border:1rpx solid rgba(255, 255, 255, .2);
border-radius:26rpx;
}
.shortcut-icon image {
width: 45rpx;
height: 45rpx;
width:45rpx;
height:45rpx;
}
.shortcut-icon--blue { background: rgba(79, 139, 255, .28); }
.shortcut-icon--pink { background: rgba(255, 92, 130, .28); }
.shortcut-icon--purple { background: rgba(154, 107, 255, .28); }
.shortcut-icon--coral { background: rgba(240, 106, 100, .28); }
.shortcut-icon--blue { background:rgba(79, 139, 255, .28); }
.shortcut-icon--pink { background:rgba(255, 92, 130, .28); }
.shortcut-icon--purple { background:rgba(154, 107, 255, .28); }
.shortcut-icon--coral { background:rgba(240, 106, 100, .28); }
.messages-content {
padding: 16rpx 24rpx 40rpx;
padding:16rpx 24rpx 40rpx;
}
.conversation-list {
overflow: hidden;
margin-top: 8rpx;
border-radius: 28rpx;
background: #fff;
box-shadow: 0 10rpx 32rpx rgba(34, 35, 91, .08);
overflow:hidden;
margin-top:8rpx;
border-radius:28rpx;
background:var(--color-bg-card);
box-shadow:0 10rpx 32rpx rgba(34, 35, 91, .08);
}