style: 为拆解主体斑马纹空白行补充悬停背景
This commit is contained in:
@@ -140,6 +140,29 @@ async function selectTab(label: string) {
|
||||
}
|
||||
|
||||
describe('拆解页内容滚动', () => {
|
||||
it.each(['人物', '场景', '道具'])('%s 使用共用斑马纹悬停样式,搜索后保持列表条目结构', async label => {
|
||||
mountPage()
|
||||
await selectTab(label)
|
||||
const list = wrapper!.get('.subject-record-list')
|
||||
expect(list.classes()).toContain('record-list')
|
||||
expect(list.findAll(':scope > article')).toHaveLength(30)
|
||||
await wrapper!.get('input[aria-label="搜索主体"]').setValue('主体 30')
|
||||
expect(list.findAll(':scope > article')).toHaveLength(1)
|
||||
expect(list.get(':scope > article h3').text()).toContain('主体 30')
|
||||
})
|
||||
|
||||
it('只为主体斑马纹空白行添加主题化悬停底色,不覆盖已有条纹和操作状态', () => {
|
||||
// DOM 环境无法模拟浏览器 :hover 命中;此项检查状态选择器与主题变量契约。
|
||||
const css = readFileSync('src/styles.css', 'utf8')
|
||||
expect(css).toMatch(/\.record-list > article:nth-child\(even\)\s*\{\s*background:\s*var\(--app-subtle\);/)
|
||||
expect(css).toMatch(
|
||||
/@media \(hover: hover\)\s*\{\s*\.subject-record-list > article:nth-child\(odd\):hover\s*\{\s*background:\s*var\(--app-control\);/
|
||||
)
|
||||
expect(css).toMatch(
|
||||
/\.subject-record-list > article:nth-child\(odd\):focus-within\s*\{\s*background:\s*var\(--app-control\);/
|
||||
)
|
||||
})
|
||||
|
||||
it('分镜选择与计数、入口同排,默认显示实际剧集,切换后内容和统计同步', async () => {
|
||||
const record = checkpoint()
|
||||
const result = record.state.breakdownResult!
|
||||
|
||||
@@ -30,7 +30,7 @@ const filtered = computed(() =>
|
||||
></NInput>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="filtered.length" class="record-list">
|
||||
<div v-if="filtered.length" class="record-list subject-record-list">
|
||||
<article v-for="subject in filtered" :key="subject.profileId" class="py-5 first:pt-0">
|
||||
<div class="mb-3 flex flex-wrap items-center gap-3">
|
||||
<h3 class="font-semibold">{{ subject.name }}</h3>
|
||||
|
||||
@@ -204,6 +204,15 @@
|
||||
.record-list > article:nth-child(even) {
|
||||
background: var(--app-subtle);
|
||||
}
|
||||
/* 主体斑马纹的空白行补充悬停/键盘焦点底色,不改变有底色行和其它列表。 */
|
||||
.subject-record-list > article:nth-child(odd):focus-within {
|
||||
background: var(--app-control);
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.subject-record-list > article:nth-child(odd):hover {
|
||||
background: var(--app-control);
|
||||
}
|
||||
}
|
||||
|
||||
.search-field {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user