feat: 收口组件样式并调整移动端侧栏
This commit is contained in:
GJ
@@ -0,0 +1,192 @@
|
||||
import { effectScope, nextTick, type EffectScope } from 'vue'
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import { useTheme } from '@/composables/useTheme'
|
||||
import { readFileSync } from 'node:fs'
|
||||
|
||||
let scope: EffectScope | undefined
|
||||
afterEach(() => {
|
||||
scope?.stop()
|
||||
scope = undefined
|
||||
localStorage.clear()
|
||||
delete document.documentElement.dataset.theme
|
||||
document.documentElement.style.colorScheme = ''
|
||||
vi.unstubAllGlobals()
|
||||
vi.restoreAllMocks()
|
||||
})
|
||||
|
||||
/** 可控系统主题，验证跟随模式与事件清理，不依赖测试机器偏好。 */
|
||||
function setup(dark = false) {
|
||||
const listeners = new Set<(event: MediaQueryListEvent) => void>()
|
||||
vi.stubGlobal('matchMedia', () => ({
|
||||
matches: dark,
|
||||
addEventListener: (_: string, listener: (event: MediaQueryListEvent) => void) => listeners.add(listener),
|
||||
removeEventListener: (_: string, listener: (event: MediaQueryListEvent) => void) => listeners.delete(listener)
|
||||
}))
|
||||
scope = effectScope()
|
||||
const state = scope.run(useTheme)!
|
||||
return {
|
||||
...state,
|
||||
listeners,
|
||||
change: (matches: boolean) => listeners.forEach(listener => listener({ matches } as MediaQueryListEvent))
|
||||
}
|
||||
}
|
||||
|
||||
/** 将十六进制颜色换算为 sRGB 相对亮度。 */
|
||||
function luminance(hex: string) {
|
||||
const channels = [1, 3, 5].map(index => {
|
||||
const value = parseInt(hex.slice(index, index + 2), 16) / 255
|
||||
return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4
|
||||
})
|
||||
return channels[0]! * 0.2126 + channels[1]! * 0.7152 + channels[2]! * 0.0722
|
||||
}
|
||||
|
||||
/** 检查主题文字对比度，避免绿色按钮和浅色选中项难以辨认。 */
|
||||
function contrast(foreground: string, background: string) {
|
||||
const values = [luminance(foreground), luminance(background)]
|
||||
return (Math.max(...values) + 0.05) / (Math.min(...values) + 0.05)
|
||||
}
|
||||
|
||||
describe('微信风格明暗主题', () => {
|
||||
it('浅色 Tabs 分隔线使用约定的 #dadada，与页面和内容表面保留灰阶差异', () => {
|
||||
const { overrides } = setup()
|
||||
const color = overrides.value.Tabs!.tabBorderColor!
|
||||
if (typeof color !== 'string') throw new Error('Tabs 分隔线颜色必须为字符串')
|
||||
expect(color).toBe('#dadada')
|
||||
expect(contrast(color, '#ededed')).toBeGreaterThan(1.15)
|
||||
expect(contrast(color, '#ffffff')).toBeGreaterThan(1.15)
|
||||
})
|
||||
|
||||
it('默认跟随系统并实时响应，销毁时移除监听', async () => {
|
||||
const state = setup()
|
||||
expect(state.preference.value).toBe('system')
|
||||
expect(document.documentElement.dataset.theme).toBe('light')
|
||||
state.change(true)
|
||||
await nextTick()
|
||||
expect(state.isDark.value).toBe(true)
|
||||
expect(document.documentElement.style.colorScheme).toBe('dark')
|
||||
expect(state.listeners.size).toBe(1)
|
||||
scope!.stop()
|
||||
expect(state.listeners.size).toBe(0)
|
||||
})
|
||||
|
||||
it('手动选择优先于系统，并持久化到下一次挂载', async () => {
|
||||
const state = setup(true)
|
||||
state.preference.value = 'light'
|
||||
await nextTick()
|
||||
state.change(true)
|
||||
await nextTick()
|
||||
expect(state.isDark.value).toBe(false)
|
||||
expect(localStorage.getItem('drama-studio-theme')).toBe('light')
|
||||
scope!.stop()
|
||||
const restored = setup(true)
|
||||
expect(restored.preference.value).toBe('light')
|
||||
expect(restored.theme.value).toBeNull()
|
||||
})
|
||||
|
||||
it('深浅模式同时更新 Naive 主题和业务颜色标记', async () => {
|
||||
const state = setup()
|
||||
expect(state.overrides.value.common?.primaryColor).toBe('#07c160')
|
||||
expect(state.overrides.value.common?.bodyColor).toBe('#ededed')
|
||||
state.preference.value = 'dark'
|
||||
await nextTick()
|
||||
expect(state.theme.value?.name).toBe('dark')
|
||||
expect(state.overrides.value.common?.primaryColor).toBe('#07c160')
|
||||
expect(state.overrides.value.common?.bodyColor).toBe('#111111')
|
||||
expect(state.overrides.value.Button?.textColorPrimary).toBe('#ffffff')
|
||||
expect(document.documentElement.dataset.theme).toBe('dark')
|
||||
})
|
||||
|
||||
it.each([false, true])('明暗模式 %s 的组件表面、语义色与业务 CSS 一致，主要文字保持可读', dark => {
|
||||
const state = setup(dark)
|
||||
const { common, Menu, Button, Layout, Input, Select } = state.overrides.value
|
||||
const css = readFileSync('src/styles/admin.css', 'utf8')
|
||||
const lightTokens = css.match(/:root\s*\{([^}]+)\}/)![1]!
|
||||
const darkTokens = css.match(/:root\[data-theme='dark'\]\s*\{([^}]+)\}/)![1]!
|
||||
const tokens = Object.fromEntries(
|
||||
[...(lightTokens + (dark ? darkTokens : '')).matchAll(/--app-([\w-]+):\s*(#[\da-f]+);/g)].map(match => [
|
||||
match[1],
|
||||
match[2]
|
||||
])
|
||||
)
|
||||
expect(common).toMatchObject({
|
||||
bodyColor: tokens.body,
|
||||
cardColor: tokens.surface,
|
||||
modalColor: tokens.surface,
|
||||
tableColor: tokens.surface,
|
||||
inputColor: tokens.surface,
|
||||
borderColor: tokens.border,
|
||||
textColor1: tokens.ink,
|
||||
textColor3: tokens.muted,
|
||||
primaryColor: tokens.accent,
|
||||
successColor: tokens.success,
|
||||
errorColor: tokens.danger
|
||||
})
|
||||
expect(Layout).toMatchObject({ color: tokens.body, headerColor: tokens.surface, siderColor: tokens.subtle })
|
||||
expect(Menu).toMatchObject({
|
||||
borderRadius: '0px',
|
||||
itemColorActive: tokens.selected,
|
||||
itemColorActiveCollapsed: tokens.selected,
|
||||
itemTextColorActive: tokens['accent-text']
|
||||
})
|
||||
// 全站直角；输入区域与普通按钮共享底色，保持明暗模式一致。
|
||||
expect(common?.borderRadius).toBe('0px')
|
||||
expect(common?.borderRadiusSmall).toBe('0px')
|
||||
expect(Input?.color).toBe('var(--app-field)')
|
||||
expect(Button?.color).toBe(tokens.control)
|
||||
expect(Button?.colorHover).toBe(tokens['control-hover'])
|
||||
expect(Select?.peers?.InternalSelection?.color).toBe('var(--app-field)')
|
||||
expect(contrast(tokens.field!, tokens.body!)).toBeGreaterThan(1.1)
|
||||
expect(contrast(tokens.control!, tokens.surface!)).toBeGreaterThan(1.1)
|
||||
expect(state.overrides.value.Checkbox?.checkMarkColor).toBe('#ffffff')
|
||||
expect(Button?.textColorPrimary).toBe(tokens['on-accent'])
|
||||
expect(Button?.colorPrimary).toBe(tokens['button-primary'])
|
||||
expect(Button?.colorHoverPrimary).toBe(tokens['button-hover'])
|
||||
expect(Button?.colorPressedPrimary).toBe(tokens['button-pressed'])
|
||||
expect(Button?.colorDisabledPrimary).toBe(tokens['disabled-bg'])
|
||||
expect(Button?.textColorDisabledPrimary).toBe(tokens['disabled-text'])
|
||||
for (const background of [Button!.colorPrimary!, Button!.colorHoverPrimary!, Button!.colorPressedPrimary!]) {
|
||||
expect(contrast(String(Button!.textColorPrimary), String(background))).toBeGreaterThanOrEqual(4.5)
|
||||
}
|
||||
expect(contrast(tokens.ink!, tokens.surface!)).toBeGreaterThanOrEqual(4.5)
|
||||
expect(contrast(tokens.muted!, tokens.subtle!)).toBeGreaterThanOrEqual(4.5)
|
||||
expect(contrast(tokens['accent-text']!, tokens.selected!)).toBeGreaterThanOrEqual(4.5)
|
||||
})
|
||||
|
||||
it('系统切换时浏览器主题色与页面同步', async () => {
|
||||
const meta = document.createElement('meta')
|
||||
meta.name = 'theme-color'
|
||||
document.head.appendChild(meta)
|
||||
try {
|
||||
const state = setup()
|
||||
expect(meta.content).toBe('#ededed')
|
||||
state.change(true)
|
||||
await nextTick()
|
||||
expect(meta.content).toBe('#111111')
|
||||
state.preference.value = 'light'
|
||||
await nextTick()
|
||||
expect(meta.content).toBe('#ededed')
|
||||
} finally {
|
||||
meta.remove()
|
||||
}
|
||||
})
|
||||
|
||||
it('无效存储回退系统模式', () => {
|
||||
localStorage.setItem('drama-studio-theme', 'unexpected')
|
||||
const state = setup(true)
|
||||
expect(state.preference.value).toBe('system')
|
||||
expect(state.isDark.value).toBe(true)
|
||||
})
|
||||
|
||||
it('禁用存储仍能切换当前会话的主题', async () => {
|
||||
vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
|
||||
throw new Error('storage blocked')
|
||||
})
|
||||
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
|
||||
throw new Error('storage blocked')
|
||||
})
|
||||
const state = setup()
|
||||
state.preference.value = 'dark'
|
||||
await nextTick()
|
||||
expect(document.documentElement.dataset.theme).toBe('dark')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user