style: 将主体列表悬停底色改为固定斑马纹
This commit is contained in:
@@ -111,7 +111,7 @@ Oxfmt 不负责代码质量,Oxlint 不负责 Vue 的完整类型推导;Vue S
|
||||
- Tabs 例外保留底部分隔线,浅色和暗黑模式均区分导航与正文;选中下划线仍使用绿色。视觉风格工具栏将“图标+状态说明”与等高操作按钮分组,读取失败不再显示为“尚未创建”,锁定与未保存草稿的生成限制不变。
|
||||
- 剧本正文的执行记录/导出/进入拆解,以及拆解结果的 JSON 导出统一放在 `NTabs` 的 `suffix` 插槽,与标签垂直居中并共用底线。浅色 Tabs 分隔线单独加深,不影响其它组件的低边框风格;窄内容区由容器断点把操作放到下一行,标签仍使用内置横向滚动。
|
||||
- 拆解分镜区的剧集选择、节拍/镜头统计与“进入分镜设计”共用一条紧凑工具栏;“选择剧集”不拆行。选择器默认显示正文对应的真实剧集,轮询移除当前剧集时同步回退;没有剧情目标与情绪弧线时不保留空信息面板。
|
||||
- 拆解人物、场景、道具共用斑马纹列表:无底色行在鼠标悬停或内部控件获得键盘焦点时显示主题化灰底,已有条纹保持原样;触屏不启用悬停态,搜索后的条纹顺序按可见列表重新计算。此类记录(含剧本角色设定)首项同样保留 20px 内边距,背景色使用 160ms 过渡,并遵循系统减少动态效果设置。
|
||||
- 拆解人物、场景、道具共用固定斑马纹列表:奇数行常驻原悬停灰底,偶数行保留次级底色,整行不随鼠标或键盘焦点变色;内部控件仍保留交互与焦点反馈,搜索后的条纹顺序按可见列表重新计算。此类记录(含剧本角色设定)首项同样保留 20px 内边距,主题切换时背景色使用 160ms 过渡,并遵循系统减少动态效果设置。
|
||||
- 拆解主体列表的搜索框统一靠左,图标使用 `NInput` 的 `prefix` 插槽;统计紧随输入框弱化显示,搜索时显示匹配数/总数,清空后恢复总数。搜索与统计垂直居中,窄内容区允许换行,不再左右分散。
|
||||
- 窄屏默认收起侧栏,目录与正文改用紧凑布局;执行记录仍可查看。长弹窗在自身内部滚动。
|
||||
|
||||
|
||||
@@ -140,7 +140,7 @@ async function selectTab(label: string) {
|
||||
}
|
||||
|
||||
describe('拆解页内容滚动', () => {
|
||||
it.each(['人物', '场景', '道具'])('%s 使用共用斑马纹悬停样式,搜索后保持列表条目结构', async label => {
|
||||
it.each(['人物', '场景', '道具'])('%s 使用共用固定斑马纹样式,搜索后保持列表条目结构', async label => {
|
||||
mountPage()
|
||||
await selectTab(label)
|
||||
const list = wrapper!.get('.subject-record-list')
|
||||
@@ -178,16 +178,18 @@ describe('拆解页内容滚动', () => {
|
||||
expect(css + readFileSync('src/styles.css', 'utf8')).not.toContain('.search-field')
|
||||
})
|
||||
|
||||
it('只为主体斑马纹空白行添加主题化悬停底色,不覆盖已有条纹和操作状态', () => {
|
||||
// DOM 环境无法模拟浏览器 :hover 命中;此项检查状态选择器与主题变量契约。
|
||||
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\);/
|
||||
/\.subject-record-list > article:nth-child\(odd\)\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\);/
|
||||
expect(css + readFileSync('src/admin.css', 'utf8')).not.toMatch(
|
||||
/\.subject-record-list[^{}]*(?::hover|:focus-within)/
|
||||
)
|
||||
// 仅移除整行变色,不影响内部链接、折叠等控件的键盘焦点提示。
|
||||
expect(css).toMatch(/:focus-visible\s*\{[^}]*outline:\s*2px solid var\(--color-accent\);/)
|
||||
})
|
||||
|
||||
it('分镜选择与计数、入口同排,默认显示实际剧集,切换后内容和统计同步', async () => {
|
||||
|
||||
+3
-8
@@ -198,7 +198,7 @@
|
||||
--app-field-hover: var(--app-surface);
|
||||
background: var(--app-subtle);
|
||||
}
|
||||
/* 首项与其它条目统一内边距;只过渡背景,避免展开内容和文字发生位移动画。 */
|
||||
/* 首项与其它条目统一内边距;背景过渡仅用于主题切换,不随鼠标或焦点变化。 */
|
||||
.record-list > article {
|
||||
padding: 20px;
|
||||
transition: background-color 160ms ease;
|
||||
@@ -206,15 +206,10 @@
|
||||
.record-list > article:nth-child(even) {
|
||||
background: var(--app-subtle);
|
||||
}
|
||||
/* 主体斑马纹的空白行补充悬停/键盘焦点底色,不改变有底色行和其它列表。 */
|
||||
.subject-record-list > article:nth-child(odd):focus-within {
|
||||
/* 主体奇数行常驻原悬停底色,与偶数行形成固定斑马纹;内部控件仍保留交互反馈。 */
|
||||
.subject-record-list > article:nth-child(odd) {
|
||||
background: var(--app-control);
|
||||
}
|
||||
@media (hover: hover) {
|
||||
.subject-record-list > article:nth-child(odd):hover {
|
||||
background: var(--app-control);
|
||||
}
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
overflow: hidden;
|
||||
|
||||
Reference in New Issue
Block a user