feat(ui): add responsive mobile design tokens

2026-06-25 10:50:46 +08:00
parent cc065f7781
commit 038b207964
8 changed files with 63 additions and 26 deletions
@@ -0,0 +1,31 @@
+/**
+ * 响应式 token
+ *
+ * 设计稿基准：1080x1920 @2x，因此 CSS 设计宽度为 540px。
+ * 原则：
+ * - 桌面调试最大宽度使用 --shell-max-width / --app-max-width。
+ * - 组件尺寸使用 clamp(min, design-ratio vw, design-value)，在 360-540px
+ *   之间平滑缩放，并避免小屏过度压缩。
+ */
+:root {
+  --app-design-width: 540px;
+  --app-max-width: var(--shell-max-width, 540px);
+
+  /* 56px @2x = 28px；小屏保留至少 22px，避免内容贴边。 */
+  --page-padding-x: clamp(22px, 5.185vw, 28px);
+
+  /* Sidebar 专用响应式尺寸 */
+  --sidebar-user-padding-y: clamp(18px, 3.704vw, 20px);
+  --sidebar-card-gap-y: clamp(6px, 1.481vw, 8px);
+  --sidebar-card-padding-x: clamp(18px, 5.185vw, 28px);
+  --sidebar-card-padding-y: clamp(16px, 3.333vw, 18px);
+  --sidebar-card-padding-right: clamp(10px, 2.222vw, 12px);
+  --sidebar-avatar-size: clamp(48px, 10.37vw, 56px);
+  --sidebar-voice-image-size: clamp(84px, 18.519vw, 100px);
+
+  /* 响应式字体：按 540px 设计宽度换算，并给小屏设置可读下限。 */
+  --font-responsive-md: clamp(14px, 2.963vw, 16px);
+  --font-responsive-lg: clamp(16px, 3.333vw, 18px);
+  --font-responsive-xl: clamp(18px, 3.704vw, 20px);
+  --font-responsive-number-lg: clamp(24px, 5.556vw, 30px);
+}