style: 将工作区操作移入标签页后缀并增强浅色分隔线
This commit is contained in:
GouJ
@@ -108,6 +108,7 @@ Oxfmt 不负责代码质量，Oxlint 不负责 Vue 的完整类型推导；Vue S
|
||||
- 采用微信风格配色：浅色为浅灰背景与白色内容，暗色为近黑背景与深灰内容；绿色用于主操作、选中态和进度。按钮文字、目录文字与主绿色分别配置以保证对比度，错误／警告仍使用独立语义色。Naive UI 和业务内容共用主题，浏览器主题色随之切换；加载前应用偏好，减少主题闪烁。
|
||||
- 全站采用低边框、直角样式：面板、提示框、标签、图片卡片和表单用背景层次代替静态描边；表格与长记录列表使用交替底色，抽屉用灰底承托内容。保留输入框聚焦／校验反馈、复选框、选中指示和必要的浮层阴影；开关、加载等功能图形不强制改形状。
|
||||
- Tabs 例外保留底部分隔线，浅色和暗黑模式均区分导航与正文；选中下划线仍使用绿色。视觉风格工具栏将“图标＋状态说明”与等高操作按钮分组，读取失败不再显示为“尚未创建”，锁定与未保存草稿的生成限制不变。
|
||||
- 剧本正文的执行记录／导出／进入拆解，以及拆解结果的 JSON 导出统一放在 `NTabs` 的 `suffix` 插槽，与标签垂直居中并共用底线。浅色 Tabs 分隔线单独加深，不影响其它组件的低边框风格；窄内容区由容器断点把操作放到下一行，标签仍使用内置横向滚动。
|
||||
- 窄屏默认收起侧栏，目录与正文改用紧凑布局；执行记录仍可查看。长弹窗在自身内部滚动。
|
||||
|
||||
布局样式集中在 `src/admin.css`，业务排版保留在 `src/styles.css`。新增页面应使用 `WorkspacePage`（内容优先页开启 `compact`），低频操作使用 `WorkspaceTools`；避免通过 `body` 或 `window.scrollTo` 管理滚动。
|
||||
|
||||
+51
-15
@@ -431,11 +431,6 @@ body {
|
||||
.script-section > :first-child {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.script-section > :first-child .n-tabs {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
width: auto;
|
||||
}
|
||||
.script-section .content-with-history {
|
||||
flex: 1;
|
||||
height: auto;
|
||||
@@ -724,20 +719,61 @@ body {
|
||||
outline: 2px solid var(--app-accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
/* Tabs 的默认整行宽度限制在左侧网格内，导出按钮始终处于同一行右端。 */
|
||||
.result-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.result-toolbar > .n-tabs {
|
||||
/* 标签与操作由同一 NTabs 导航行管理，suffix 共享底线及垂直中心。 */
|
||||
.tabs-toolbar {
|
||||
container: tabs-toolbar / inline-size;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.result-toolbar > .n-button {
|
||||
justify-self: end;
|
||||
.workspace-tabs.n-tabs {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.workspace-tabs > .n-tabs-nav {
|
||||
align-items: stretch;
|
||||
}
|
||||
.workspace-tabs .n-tabs-tab {
|
||||
min-height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.workspace-tabs .n-tabs-nav-scroll-wrapper {
|
||||
min-width: 0;
|
||||
}
|
||||
.workspace-tabs .n-tabs-nav__suffix {
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.tabs-toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 14px;
|
||||
min-height: 40px;
|
||||
}
|
||||
.tabs-toolbar-actions .n-button,
|
||||
.tabs-toolbar-actions .text-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 窄内容区允许 suffix 独占一行；Tabs 本身继续使用组件内置横向滚动。 */
|
||||
@container tabs-toolbar (max-width: 600px) {
|
||||
.workspace-tabs > .n-tabs-nav {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.workspace-tabs .n-tabs-nav-scroll-wrapper {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.workspace-tabs .n-tabs-nav__suffix {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.result-toolbar .n-tabs-tab__label {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
|
||||
@@ -86,9 +86,10 @@ describe('统一目录条目', () => {
|
||||
expect(css).toMatch(/\.directory-list-content\s*\{[^}]*flex-direction:\s*row;[^}]*width:\s*max-content/)
|
||||
})
|
||||
|
||||
it('导出工具栏与筛选器使用受约束的网格，不让 Tabs 和 Select 默认宽度强制换行', () => {
|
||||
it('Tabs 工具栏与筛选网格限制最小宽度，不让组件默认宽度挤压内容', () => {
|
||||
const css = readFileSync('src/admin.css', 'utf8')
|
||||
expect(css).toMatch(/\.result-toolbar\s*\{[^}]*grid-template-columns:\s*minmax\(0, 1fr\) auto/)
|
||||
expect(css).toMatch(/\.workspace-tabs\.n-tabs\s*\{[^}]*width:\s*100%;[^}]*min-width:\s*0/)
|
||||
expect(css).toMatch(/\.workspace-tabs \.n-tabs-nav-scroll-wrapper\s*\{[^}]*min-width:\s*0/)
|
||||
expect(css).toMatch(
|
||||
/\.form-image-filters\s*\{[^}]*grid-template-columns:\s*minmax\(200px, 360px\) 152px minmax\(260px, 1fr\) auto/
|
||||
)
|
||||
|
||||
@@ -119,7 +119,7 @@ describe('全站平面主题', () => {
|
||||
expect(theme.common?.borderColor).not.toBe('transparent')
|
||||
expect(theme.Checkbox).not.toHaveProperty('border')
|
||||
expect(theme.Tabs?.barColor).toBe('#07c160')
|
||||
expect(value('.n-tabs', '--n-tab-border-color')).toBe(dark ? '#333333' : '#e5e5e5')
|
||||
expect(value('.n-tabs', '--n-tab-border-color')).toBe(dark ? '#333333' : '#bfbfbf')
|
||||
})
|
||||
|
||||
it('单图标按钮以当前控件高度为边长，尺寸与内容按钮互不影响', () => {
|
||||
|
||||
@@ -22,6 +22,16 @@ afterEach(() => {
|
||||
})
|
||||
|
||||
describe('管理后台组件边界', () => {
|
||||
it('Tabs suffix 与标签共用导航行，窄屏换行但不产生外层滚动', () => {
|
||||
// DOM 测试不计算坐标；保护对齐尺寸与容器断点，视觉验收仍需浏览器。
|
||||
const css = readFileSync('src/admin.css', 'utf8')
|
||||
expect(css).toMatch(/\.workspace-tabs > \.n-tabs-nav\s*\{[^}]*align-items:\s*stretch;/)
|
||||
expect(css).toMatch(/\.workspace-tabs \.n-tabs-nav__suffix\s*\{[^}]*align-items:\s*center;/)
|
||||
expect(css).toMatch(/\.tabs-toolbar-actions\s*\{[^}]*align-items:\s*center;[^}]*min-height:\s*40px;/)
|
||||
expect(css).toContain('@container tabs-toolbar (max-width: 600px)')
|
||||
expect(css).not.toContain('.result-toolbar > .n-button')
|
||||
})
|
||||
|
||||
it('滚动边界样式包含 document 锁定和工作区收缩约束', () => {
|
||||
// happy-dom 不计算视口几何；这里只保护 CSS 契约，真实滚动仍需浏览器验收。
|
||||
const adminCss = readFileSync('src/admin.css', 'utf8')
|
||||
|
||||
@@ -47,6 +47,15 @@ function contrast(foreground: string, background: string) {
|
||||
}
|
||||
|
||||
describe('微信风格明暗主题', () => {
|
||||
it('浅色 Tabs 分隔线与页面、内容表面保持可辨识的灰阶差异', () => {
|
||||
const { overrides } = setup()
|
||||
const color = overrides.value.Tabs!.tabBorderColor!
|
||||
if (typeof color !== 'string') throw new Error('Tabs 分隔线颜色必须为字符串')
|
||||
expect(color).toBe('#bfbfbf')
|
||||
expect(contrast(color, '#ededed')).toBeGreaterThan(1.5)
|
||||
expect(contrast(color, '#ffffff')).toBeGreaterThan(1.5)
|
||||
})
|
||||
|
||||
it('默认跟随系统并实时响应，销毁时移除监听', async () => {
|
||||
const state = setup()
|
||||
expect(state.preference.value).toBe('system')
|
||||
|
||||
@@ -216,7 +216,7 @@ export function useTheme() {
|
||||
tabTextColorHoverLine: accentText,
|
||||
barColor: primary,
|
||||
// Tabs 保留横向分隔线，明确导航与内容边界；选中下划线仍使用主绿色。
|
||||
tabBorderColor: dark ? '#333333' : '#e5e5e5'
|
||||
tabBorderColor: dark ? '#333333' : '#bfbfbf'
|
||||
},
|
||||
Tag: {
|
||||
textColorPrimary: accentText,
|
||||
|
||||
@@ -382,15 +382,20 @@ function exportResult() {
|
||||
</NAlert>
|
||||
</NScrollbar>
|
||||
<section class="breakdown-results-section">
|
||||
<div class="result-toolbar">
|
||||
<NTabs v-model:value="tab" type="line" size="small" aria-label="拆解结果"
|
||||
<div class="result-toolbar tabs-toolbar">
|
||||
<NTabs v-model:value="tab" class="workspace-tabs" type="line" size="small" aria-label="拆解结果"
|
||||
><NTab v-for="option in moduleOptions" :key="option.value" :name="option.value"
|
||||
>{{ option.label
|
||||
}}<span>{{ subjects.filter(item => item.module === option.value).length }}</span></NTab
|
||||
><NTab name="storyboard">分镜</NTab><NTab name="tasks">任务明细</NTab></NTabs
|
||||
><NButton :disabled="!snapshot" @click="exportResult" text size="small"
|
||||
><Download :size="14" />导出 JSON
|
||||
</NButton>
|
||||
><NTab name="storyboard">分镜</NTab><NTab name="tasks">任务明细</NTab>
|
||||
<template #suffix
|
||||
><div class="tabs-toolbar-actions">
|
||||
<NButton :disabled="!snapshot" @click="exportResult" text size="small"
|
||||
><Download :size="14" />导出 JSON
|
||||
</NButton>
|
||||
</div></template
|
||||
>
|
||||
</NTabs>
|
||||
</div>
|
||||
<div class="content-with-history panel">
|
||||
<main class="min-w-0">
|
||||
|
||||
@@ -115,26 +115,28 @@ function exportScript() {
|
||||
class="mt-4"
|
||||
></NProgress>
|
||||
<div class="script-section">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<NTabs v-model:value="tab" type="line" size="small" aria-label="剧本内容"
|
||||
<div class="tabs-toolbar">
|
||||
<NTabs v-model:value="tab" class="workspace-tabs" type="line" size="small" aria-label="剧本内容"
|
||||
><NTab name="episodes"
|
||||
>剧集正文 <span>{{ episodes.length }}</span></NTab
|
||||
><NTab name="characters">角色设定</NTab><NTab name="world">世界观</NTab
|
||||
><NTab name="review">审核记录</NTab></NTabs
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<NButton text size="small" :aria-expanded="showHistory" @click="showHistory = !showHistory"
|
||||
><History :size="14" />{{ showHistory ? '收起执行记录' : '执行记录' }}</NButton
|
||||
>
|
||||
<NButton :disabled="!episodes.length" @click="exportScript" text size="small"
|
||||
><Download :size="14" />导出剧本</NButton
|
||||
><RouterLink
|
||||
v-if="complete"
|
||||
class="text-button text-accent"
|
||||
:to="`/projects/${project?.id}/breakdown`"
|
||||
>进入拆解<ArrowRight :size="14"
|
||||
/></RouterLink>
|
||||
</div>
|
||||
><NTab name="review">审核记录</NTab>
|
||||
<template #suffix>
|
||||
<div class="tabs-toolbar-actions">
|
||||
<NButton text size="small" :aria-expanded="showHistory" @click="showHistory = !showHistory"
|
||||
><History :size="14" />{{ showHistory ? '收起执行记录' : '执行记录' }}</NButton
|
||||
>
|
||||
<NButton :disabled="!episodes.length" @click="exportScript" text size="small"
|
||||
><Download :size="14" />导出剧本</NButton
|
||||
><RouterLink
|
||||
v-if="complete"
|
||||
class="text-button text-accent"
|
||||
:to="`/projects/${project?.id}/breakdown`"
|
||||
>进入拆解<ArrowRight :size="14"
|
||||
/></RouterLink>
|
||||
</div>
|
||||
</template>
|
||||
</NTabs>
|
||||
</div>
|
||||
<div class="content-with-history panel mt-4" :class="{ 'history-hidden': !showHistory }">
|
||||
<main class="min-w-0">
|
||||
|
||||
@@ -829,14 +829,15 @@ describe('工作台页面交互', () => {
|
||||
expect(fetcher.mock.calls.every(([, init]) => init?.method === 'GET')).toBe(true)
|
||||
})
|
||||
|
||||
it('拆解导出按钮紧邻标签栏且保持空快照禁用状态', () => {
|
||||
it('拆解导出按钮位于 Tabs suffix，且保持空快照禁用状态', () => {
|
||||
wrapper = mount(BreakdownPage, {
|
||||
attachTo: document.body,
|
||||
global: { provide: { [projectContextKey as symbol]: context() }, stubs: { RouterLink: true } }
|
||||
})
|
||||
const toolbar = wrapper.get('.result-toolbar')
|
||||
expect(toolbar.find('[aria-label="拆解结果"]').exists()).toBe(true)
|
||||
const exportButton = toolbar.get<HTMLButtonElement>(':scope > button')
|
||||
expect(toolbar.find(':scope > button').exists()).toBe(false)
|
||||
const exportButton = toolbar.get<HTMLButtonElement>('.n-tabs-nav__suffix button')
|
||||
expect(exportButton.text()).toBe('导出 JSON')
|
||||
expect(exportButton.element.disabled).toBe(true)
|
||||
})
|
||||
@@ -1422,6 +1423,9 @@ describe('工作台页面交互', () => {
|
||||
attachTo: document.body,
|
||||
global: { provide: { [projectContextKey as symbol]: context() }, stubs: { RouterLink: true } }
|
||||
})
|
||||
const suffix = wrapper.get('.script-section .n-tabs-nav__suffix')
|
||||
expect(suffix.findAll('button').map(item => item.text())).toEqual(['执行记录', '导出剧本'])
|
||||
expect(suffix.get('router-link-stub').attributes('to')).toBe(`/projects/${fixture.id}/breakdown`)
|
||||
const reader = wrapper.get<HTMLElement>('.reader-scroll .n-scrollbar-container').element
|
||||
reader.scrollTop = 120
|
||||
expect(wrapper.find('.history-panel').exists()).toBe(false)
|
||||
|
||||
Reference in New Issue
Block a user