fix(ui): 修复首页试听条文字折行问题，完善单行文本省略截断规范与文案精简

2026-09-16 20:22:18 +08:00
--- a/pwuniapp/App.vue
+++ b/pwuniapp/App.vue
@@ -35,26 +35,26 @@ export default {
  --shadow-brand: 0 8rpx 24rpx rgba(99, 102, 241, 0.35);
 }

-/* 暖阳赤焰暖色系主题 (Sunset Amber & Warm Ember) */
+/* 浅色暖阳晨曦主题 (Light Warm Sunset Morning) */
 page.theme-warm, .theme-warm {
-  --bg-primary: #140E0A;
-  --bg-surface: #221711;
-  --bg-surface-elevated: #2E1F17;
-  --bg-surface-glass: rgba(34, 23, 17, 0.85);
-  --color-brand: #F97316;
-  --color-brand-light: #FB923C;
+  --bg-primary: #FDFBF7;
+  --bg-surface: #FFFFFF;
+  --bg-surface-elevated: #F8F5F0;
+  --bg-surface-glass: rgba(255, 255, 255, 0.90);
+  --color-brand: #EA580C;
+  --color-brand-light: #F97316;
  --color-brand-gold: #F59E0B;
-  --color-brand-glow: rgba(249, 115, 22, 0.35);
-  --color-brand-gradient: linear-gradient(135deg, #F97316, #F59E0B);
-  --border-subtle: #342217;
+  --color-brand-glow: rgba(234, 88, 12, 0.18);
+  --color-brand-gradient: linear-gradient(135deg, #F97316, #FB923C);
+  --border-subtle: #F0ECE4;
  --border-focus: #EA580C;
-  --text-primary: #FFF7ED;
-  --text-secondary: #C7B5A7;
-  --text-muted: #8C7565;
-  --shadow-brand: 0 8rpx 24rpx rgba(249, 115, 22, 0.35);
+  --text-primary: #1C1917;
+  --text-secondary: #57534E;
+  --text-muted: #78716C;
+  --shadow-brand: 0 8rpx 24rpx rgba(234, 88, 12, 0.25);

-  background-color: #140E0A;
-  color: #FFF7ED;
+  background-color: #FDFBF7;
+  color: #1C1917;
 }

 /* 全局暗黑电竞基础重置 (严格符合 UI/UX Pro Max 规范) */
--- a/pwuniapp/common/mock.js
+++ b/pwuniapp/common/mock.js
@@ -64,7 +64,7 @@ export const EXPERTS_LIST = [
    isOnline: true,
    voiceDuration: 18,
    voiceType: 'song',
-    voiceTitle: '歌声试听 · 《晴天》甜美对唱',
+    voiceTitle: '歌声 · 《晴天》',
    bio: '音乐学院流行演唱在读，精通流行热门情歌与粤语金曲，KTV对唱超好听，包厢气氛组担当～限正规公开量贩KTV。',
    photos: ['https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?w=500&fit=crop'],
    services: [
@@ -119,7 +119,7 @@ export const EXPERTS_LIST = [
    isOnline: true,
    voiceDuration: 20,
    voiceType: 'song',
-    voiceTitle: '歌声试听 · 摇滚流行高音',
+    voiceTitle: '歌声 · 摇滚高音',
    bio: '高校乐队主唱，吉他弹唱/流行摇滚，KTV气氛直接拉满，绝不冷场，带你体验演唱会包厢～',
    photos: ['https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=500&fit=crop'],
    services: [
--- a/pwuniapp/common/theme.js
+++ b/pwuniapp/common/theme.js
@@ -33,24 +33,24 @@ export const THEMES = {
  },
  [THEME_KEYS.WARM]: {
    key: THEME_KEYS.WARM,
-    name: '暖阳赤焰',
-    description: '深邃暖焦糖褐与暖阳曜橙流光，热情温馨有活力',
+    name: '暖阳晨曦',
+    description: '明亮温润的奶油米白与暖阳曜橙流光，温馨治愈轻快',
    tokens: {
-      bgPrimary: '#140E0A',
-      bgSurface: '#221711',
-      bgSurfaceElevated: '#2E1F17',
-      bgSurfaceGlass: 'rgba(34, 23, 17, 0.85)',
-      colorBrand: '#F97316',
-      colorBrandLight: '#FB923C',
+      bgPrimary: '#FDFBF7',
+      bgSurface: '#FFFFFF',
+      bgSurfaceElevated: '#F8F5F0',
+      bgSurfaceGlass: 'rgba(255, 255, 255, 0.90)',
+      colorBrand: '#EA580C',
+      colorBrandLight: '#F97316',
      colorBrandGold: '#F59E0B',
-      colorBrandGlow: 'rgba(249, 115, 22, 0.35)',
-      colorBrandGradient: 'linear-gradient(135deg, #F97316, #F59E0B)',
-      borderSubtle: '#342217',
+      colorBrandGlow: 'rgba(234, 88, 12, 0.18)',
+      colorBrandGradient: 'linear-gradient(135deg, #F97316, #FB923C)',
+      borderSubtle: '#F0ECE4',
      borderFocus: '#EA580C',
-      textPrimary: '#FFF7ED',
-      textSecondary: '#C7B5A7',
-      textMuted: '#8C7565',
-      shadowBrand: '0 8rpx 24rpx rgba(249, 115, 22, 0.35)'
+      textPrimary: '#1C1917',
+      textSecondary: '#57534E',
+      textMuted: '#78716C',
+      shadowBrand: '0 8rpx 24rpx rgba(234, 88, 12, 0.25)'
    }
  }
 };
--- a/pwuniapp/pages/index/index.vue
+++ b/pwuniapp/pages/index/index.vue
@@ -625,11 +625,47 @@ const navTo = (url) => {
        padding: 0 16rpx;
        margin-bottom: 16rpx;
        transition: all 0.2s ease;
+        box-sizing: border-box;
        white-space: nowrap;
-        text-overflow: ellipsis;
        overflow: hidden;
        flex-shrink: 0;

+        .voice-icon-svg {
+          width: 20rpx;
+          height: 20rpx;
+          margin-right: 8rpx;
+          flex-shrink: 0;
+        }
+
+        .voice-text {
+          flex: 1;
+          min-width: 0;
+          font-size: 20rpx;
+          color: #818CF8;
+          font-weight: 600;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .wave-lines {
+          display: flex;
+          align-items: flex-end;
+          gap: 4rpx;
+          margin-left: 8rpx;
+          flex-shrink: 0;
+
+          .wave-item {
+            width: 4rpx;
+            background: #818CF8;
+            border-radius: 2rpx;
+
+            &.w1 { height: 14rpx; animation: bounce 0.6s infinite ease-in-out; }
+            &.w2 { height: 22rpx; animation: bounce 0.6s infinite ease-in-out 0.2s; }
+            &.w3 { height: 10rpx; animation: bounce 0.6s infinite ease-in-out 0.4s; }
+          }
+        }
+
        &.playing {
          background: rgba(99, 102, 241, 0.3);
          border-color: #818CF8;
@@ -654,33 +690,6 @@ const navTo = (url) => {
            background: #FB7185;
          }
        }
-
-        .voice-icon-svg {
-          width: 20rpx;
-          height: 20rpx;
-          margin-right: 8rpx;
-        }
-        .voice-text {
-          font-size: 20rpx;
-          color: #818CF8;
-          font-weight: 600;
-        }
-        .wave-lines {
-          display: flex;
-          align-items: flex-end;
-          gap: 4rpx;
-          margin-left: 8rpx;
-
-          .wave-item {
-            width: 4rpx;
-            background: #818CF8;
-            border-radius: 2rpx;
-
-            &.w1 { height: 14rpx; animation: bounce 0.6s infinite ease-in-out; }
-            &.w2 { height: 22rpx; animation: bounce 0.6s infinite ease-in-out 0.2s; }
-            &.w3 { height: 10rpx; animation: bounce 0.6s infinite ease-in-out 0.4s; }
-          }
-        }
      }

      .card-footer {
--- a/pwuniapp/pages/user/index.vue
+++ b/pwuniapp/pages/user/index.vue
@@ -96,7 +96,7 @@
        <image class="row-svg" :src="ICONS.palette" mode="aspectFit" />
        <text class="row-label">界面主题风格</text>
        <view class="theme-pill" :class="{ warm: currentThemeKey === 'warm' }">
-          <text>{{ currentThemeKey === 'warm' ? '暖阳赤焰' : '冷光暗夜' }}</text>
+          <text>{{ currentThemeKey === 'warm' ? '浅色暖阳' : '冷光暗夜' }}</text>
        </view>
        <text class="row-arrow">></text>
      </view>
@@ -144,13 +144,13 @@ onUnmounted(() => {

 const handleSwitchTheme = () => {
  uni.showActionSheet({
-    itemList: ['冷光暗夜 (经典暗夜蓝紫)', '暖阳赤焰 (热情暖橙金流光)'],
+    itemList: ['冷光暗夜 (经典电竞暗黑)', '浅色暖阳 (温馨奶油米白·暖橙)'],
    success: (res) => {
      const selectedKey = res.tapIndex === 1 ? THEME_KEYS.WARM : THEME_KEYS.COOL;
      currentThemeKey.value = selectedKey;
      setTheme(selectedKey);
      uni.showToast({
-        title: selectedKey === THEME_KEYS.WARM ? '已切换至【暖阳赤焰】暖色系' : '已切换至【冷光暗夜】经典款',
+        title: selectedKey === THEME_KEYS.WARM ? '已切换至【浅色暖阳】主题' : '已切换至【冷光暗夜】经典款',
        icon: 'none',
        duration: 1500
      });
--- a/pwuniapp/uni.scss
+++ b/pwuniapp/uni.scss
@@ -43,22 +43,22 @@ $uni-color-primary: #6366F1;
 $uni-bg-color: #0A0F1D;
 $uni-text-color: #F8FAFC;

-/* 7. 暖阳赤焰暖色系专属 Tokens (Sunset Amber & Warm Ember) */
-$warm-bg-primary: #140E0A;           // 暖夜焦糖深褐黑
-$warm-bg-surface: #221711;           // 暖色卡片底色
-$warm-bg-surface-elevated: #2E1F17;  // 暖色浮层底色
-$warm-bg-surface-glass: rgba(34, 23, 17, 0.85); // 暖色拟态磨砂玻璃
+/* 7. 浅色暖阳晨曦专属 Tokens (Light Warm Sunset Morning) */
+$warm-bg-primary: #FDFBF7;           // 页面最底色 (温润奶油米白)
+$warm-bg-surface: #FFFFFF;           // 卡片底色 (高洁暖白)
+$warm-bg-surface-elevated: #F8F5F0;  // 浮层底色 (浅暖米杏)
+$warm-bg-surface-glass: rgba(255, 255, 255, 0.90); // 暖白透亮磨砂玻璃

-$warm-color-brand: #F97316;          // 暖阳曜橙 (主品牌色)
-$warm-color-brand-light: #FB923C;    // 暖橙高光
+$warm-color-brand: #EA580C;          // 核心曜橙 (高对比度聚焦色)
+$warm-color-brand-light: #F97316;    // 暖橙高光
 $warm-color-brand-gold: #F59E0B;     // 暖金流光
-$warm-color-brand-glow: rgba(249, 115, 22, 0.35); // 暖橙发光光晕
-$warm-color-brand-gradient: linear-gradient(135deg, #F97316, #F59E0B);
+$warm-color-brand-glow: rgba(234, 88, 12, 0.18); // 柔和发光光晕
+$warm-color-brand-gradient: linear-gradient(135deg, #F97316, #FB923C);

-$warm-text-primary: #FFF7ED;         // 暖白高光文本
-$warm-text-secondary: #C7B5A7;       // 暖灰次级文本
-$warm-text-muted: #8C7565;           // 暖咖三级文本
-$warm-border-subtle: #342217;        // 暖色边框
-$warm-border-focus: #EA580C;         // 暖色聚焦边框
-$warm-shadow-brand: 0 8rpx 24rpx rgba(249, 115, 22, 0.35);
+$warm-text-primary: #1C1917;         // 暖炭黑一级主文本 (对比度 > 15:1)
+$warm-text-secondary: #57534E;       // 暖深灰二级描述文本 (对比度 > 7:1)
+$warm-text-muted: #78716C;           // 暖中灰三级占位说明
+$warm-border-subtle: #F0ECE4;        // 浅米暖灰边框
+$warm-border-focus: #EA580C;         // 聚焦边框
+$warm-shadow-brand: 0 8rpx 24rpx rgba(234, 88, 12, 0.25);

--- a/server/src/core/theme/theme.manager.ts
+++ b/server/src/core/theme/theme.manager.ts
@@ -60,24 +60,24 @@ export const THEMES: Record<ThemeKey, ThemeItem> = {
  },
  [THEME_KEYS.WARM]: {
    key: THEME_KEYS.WARM,
-    name: '暖阳赤焰',
-    description: '深邃暖焦糖褐与暖阳曜橙流光，热情温馨有活力',
+    name: '暖阳晨曦',
+    description: '明亮温润的奶油米白与暖阳曜橙流光，温馨治愈轻快',
    tokens: {
-      bgPrimary: '#140E0A',
-      bgSurface: '#221711',
-      bgSurfaceElevated: '#2E1F17',
-      bgSurfaceGlass: 'rgba(34, 23, 17, 0.85)',
-      colorBrand: '#F97316',
-      colorBrandLight: '#FB923C',
+      bgPrimary: '#FDFBF7',
+      bgSurface: '#FFFFFF',
+      bgSurfaceElevated: '#F8F5F0',
+      bgSurfaceGlass: 'rgba(255, 255, 255, 0.90)',
+      colorBrand: '#EA580C',
+      colorBrandLight: '#F97316',
      colorBrandGold: '#F59E0B',
-      colorBrandGlow: 'rgba(249, 115, 22, 0.35)',
-      colorBrandGradient: 'linear-gradient(135deg, #F97316, #F59E0B)',
-      borderSubtle: '#342217',
+      colorBrandGlow: 'rgba(234, 88, 12, 0.18)',
+      colorBrandGradient: 'linear-gradient(135deg, #F97316, #FB923C)',
+      borderSubtle: '#F0ECE4',
      borderFocus: '#EA580C',
-      textPrimary: '#FFF7ED',
-      textSecondary: '#C7B5A7',
-      textMuted: '#8C7565',
-      shadowBrand: '0 8rpx 24rpx rgba(249, 115, 22, 0.35)'
+      textPrimary: '#1C1917',
+      textSecondary: '#57534E',
+      textMuted: '#78716C',
+      shadowBrand: '0 8rpx 24rpx rgba(234, 88, 12, 0.25)'
    }
  }
 };
--- a/server/tests/no-emoji.spec.ts
+++ b/server/tests/no-emoji.spec.ts
@@ -73,20 +73,43 @@ describe('UI/UX 规范门禁 (TDD 测试套件: 全面杜绝系统 Emoji)', () =
  });

  describe('4. 首页卡片试听条单行防折行与文本截断规范校验', () => {
-    it('首页试听条必须配置单行不折行、弹性伸缩与省略号截断', () => {
+    it('首页试听条容器及文字必须配置单行不折行、弹性伸缩与省略号截断', () => {
      const indexVuePath = path.join(uniPagesDir, 'index', 'index.vue');
      const content = fs.readFileSync(indexVuePath, 'utf-8');

-      // 提取 .voice-bar 样式块
+      // 1. 验证 .voice-bar 容器样式
      const voiceBarMatch = content.match(/\.voice-bar\s*\{([\s\S]*?)\n\s*\.card-footer/);
      expect(voiceBarMatch).not.toBeNull();
      const styleBlock = voiceBarMatch![1];

-      // 必须防止文字折行破坏胶囊造型
+      expect(styleBlock).toContain('box-sizing: border-box');
      expect(styleBlock).toContain('white-space: nowrap');
-      expect(styleBlock).toContain('text-overflow: ellipsis');
      expect(styleBlock).toContain('overflow: hidden');
-      expect(styleBlock).toContain('flex-shrink: 0');
+
+      // 2. 验证 .voice-icon-svg 必须防止被弹性挤压
+      const iconMatch = styleBlock.match(/\.voice-icon-svg\s*\{([\s\S]*?)\}/);
+      expect(iconMatch).not.toBeNull();
+      expect(iconMatch![1]).toContain('flex-shrink: 0');
+
+      // 3. 验证 .voice-text 核心文本必须具有单行截断三件套与 flex 约束
+      const textMatch = styleBlock.match(/\.voice-text\s*\{([\s\S]*?)\}/);
+      expect(textMatch).not.toBeNull();
+      const textStyle = textMatch![1];
+      expect(textStyle).toContain('flex: 1');
+      expect(textStyle).toContain('min-width: 0');
+      expect(textStyle).toContain('white-space: nowrap');
+      expect(textStyle).toContain('overflow: hidden');
+      expect(textStyle).toContain('text-overflow: ellipsis');
+    });
+
+    it('mock.js 中试听标题长度必须精简且不得超过12个字，防止在小屏过早被截断', () => {
+      const mockJsPath = path.join(rootDir, 'pwuniapp', 'common', 'mock.js');
+      const mockContent = fs.readFileSync(mockJsPath, 'utf-8');
+      const voiceTitleMatches = mockContent.matchAll(/voiceTitle:\s*['"]([^'"]+)['"]/g);
+      for (const match of voiceTitleMatches) {
+        const title = match[1];
+        expect(title.length).toBeLessThanOrEqual(12);
+      }
    });
  });
 });
--- a/server/tests/theme.spec.ts
+++ b/server/tests/theme.spec.ts
@@ -82,8 +82,17 @@ describe('ThemeManager (TDD 测试套件: 暖色系与双主题设计系统)', (
    });
  });

-  describe('2. WCAG AA 级无障碍色彩对比度验证', () => {
-    it('暖色系一级主文本 (textPrimary) 对底色与卡片底色对比度必须 >= 7:1 (超越 AA 级 4.5:1)', () => {
+  describe('2. WCAG AA 级无障碍色彩对比度与浅色特征验证', () => {
+    it('浅色暖色系底色必须为明亮浅色 (相对亮度 > 0.85)', () => {
+      const tokens = THEMES[THEME_KEYS.WARM].tokens;
+      const bgLum = getLuminance(tokens.bgPrimary);
+      const surfaceLum = getLuminance(tokens.bgSurface);
+
+      expect(bgLum).toBeGreaterThanOrEqual(0.85);
+      expect(surfaceLum).toBeGreaterThanOrEqual(0.95);
+    });
+
+    it('浅色暖色系一级主文本 (textPrimary) 对浅色底与卡片底色对比度必须 >= 7:1 (超越 AA 级 4.5:1)', () => {
      const tokens = THEMES[THEME_KEYS.WARM].tokens;
      const ratioOnBg = getContrastRatio(tokens.textPrimary, tokens.bgPrimary);
      const ratioOnSurface = getContrastRatio(tokens.textPrimary, tokens.bgSurface);
@@ -92,7 +101,7 @@ describe('ThemeManager (TDD 测试套件: 暖色系与双主题设计系统)', (
      expect(ratioOnSurface).toBeGreaterThanOrEqual(7.0);
    });

-    it('暖色系二级辅助文本 (textSecondary) 对底色对比度必须 >= 4.5:1 (符合 WCAG AA 标准)', () => {
+    it('浅色暖色系二级辅助文本 (textSecondary) 对浅色底对比度必须 >= 4.5:1 (符合 WCAG AA 标准)', () => {
      const tokens = THEMES[THEME_KEYS.WARM].tokens;
      const ratio = getContrastRatio(tokens.textSecondary, tokens.bgPrimary);

@@ -106,12 +115,12 @@ describe('ThemeManager (TDD 测试套件: 暖色系与双主题设计系统)', (
      expect(themeManager.getCurrentTheme().name).toBe('冷光暗夜');
    });

-    it('成功切换到 warm (暖阳赤焰) 主题', () => {
+    it('成功切换到 warm (暖阳晨曦) 浅色暖色系主题', () => {
      const current = themeManager.switchTheme(THEME_KEYS.WARM);
      expect(current.key).toBe(THEME_KEYS.WARM);
-      expect(current.name).toBe('暖阳赤焰');
+      expect(current.name).toBe('暖阳晨曦');
      expect(themeManager.getCurrentThemeKey()).toBe(THEME_KEYS.WARM);
-      expect(themeManager.getCurrentTokens().colorBrand).toBe('#F97316');
+      expect(themeManager.getCurrentTokens().colorBrand).toBe('#EA580C');
    });

    it('传入非法主题标识时，应平滑回退到默认 cool 主题，确保系统不崩溃', () => {