fix(ui): 修复首页试听条文字折行问题,完善单行文本省略截断规范与文案精简
这个提交包含在:
@@ -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)'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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 主题,确保系统不崩溃', () => {
|
||||
|
||||
在新工单中引用
屏蔽一个用户