diff --git a/README.md b/README.md index dddf678..cd62eef 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,7 @@ Oxfmt 不负责代码质量，Oxlint 不负责 Vue 的完整类型推导；Vue S - 项目标题栏只显示返回入口和名称，不再放置状态标签与刷新按钮；项目仍每 6 秒自动刷新，读取失败时在错误提示内提供重试入口。 - 只有当前项目正式状态为 `completed` 才解锁下游工作区；草稿、生成中、待审核、失败和读取期间默认禁用下游导航。直接访问下游链接只显示返回剧本创作的引导，不挂载操作组件；轮询确认完成后自动解锁，切换项目立即重新判定。页面内提交守卫同步检查完成状态；这是前端交互限制，不代替后端权限与业务校验。 - 项目列表采用固定表头表格；剧本、分镜、身份与生产页的目录和详情独立滚动，其他工作区只滚动内容区。 +- “我的剧本”状态筛选采用中号控件，与搜索框等高并扩大点击区域；刷新、主题、折叠和关闭等单图标按钮统一使用直角正方形，加载时保持尺寸不变，保留可访问名称。 - 目录、详情、执行记录、折叠操作区、图片历史和 JSON 查看区统一使用 Naive UI `NScrollbar`；外层只负责尺寸与裁切，不再设置原生 `overflow: auto`。内边距与横向排列放在 `content-class` 内容层，避免双滚动条。 - 身份与形态图库采用限高预览及紧邻其下的横向历史栏；缩略图固定宽度，保留全部候选、辅助视图、失败及进行中记录。点击仅切换预览，不自动切换母版或主图；图片尺寸规则放在非分层组件覆盖样式中，避免被 Naive 按钮默认宽度覆盖。 - 图片统一使用 `NImage`：身份／形态图库的详情大图采用 `contain`，完整显示人物与画面；母版小图、历史缩略图及形态／风格／分镜卡片、首帧缩略图保留 `cover`。母版与展示图片可点击原生预览查看原图；历史缩略图只切换记录，再点击大图查看原图。“查看图片与记录”仍单独打开历史管理。 @@ -106,6 +107,7 @@ Oxfmt 不负责代码质量，Oxlint 不负责 Vue 的完整类型推导；Vue S - 绿色选中复选框使用白色对勾；批量配置中的复选框与中号输入框共用 34px 控件行并垂直居中。浅色输入框按所在区域使用白底或浅灰底，与页面／抽屉或白色面板区分；聚焦与禁用反馈继续保留。 - 采用微信风格配色：浅色为浅灰背景与白色内容，暗色为近黑背景与深灰内容；绿色用于主操作、选中态和进度。按钮文字、目录文字与主绿色分别配置以保证对比度，错误／警告仍使用独立语义色。Naive UI 和业务内容共用主题，浏览器主题色随之切换；加载前应用偏好，减少主题闪烁。 - 全站采用低边框、直角样式：面板、提示框、标签、图片卡片和表单用背景层次代替静态描边；表格与长记录列表使用交替底色，抽屉用灰底承托内容。保留输入框聚焦／校验反馈、复选框、选中指示和必要的浮层阴影；开关、加载等功能图形不强制改形状。 +- Tabs 例外保留底部分隔线，浅色和暗黑模式均区分导航与正文；选中下划线仍使用绿色。视觉风格工具栏将“图标＋状态说明”与等高操作按钮分组，读取失败不再显示为“尚未创建”，锁定与未保存草稿的生成限制不变。 - 窄屏默认收起侧栏，目录与正文改用紧凑布局；执行记录仍可查看。长弹窗在自身内部滚动。 布局样式集中在 `src/admin.css`，业务排版保留在 `src/styles.css`。新增页面应使用 `WorkspacePage`（内容优先页开启 `compact`），低频操作使用 `WorkspaceTools`；避免通过 `body` 或 `window.scrollTo` 管理滚动。 diff --git a/src/App.vue b/src/App.vue index dbdd636..a04de8e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -122,7 +122,7 @@ const menuOptions = computed(() => [ quaternary block class="admin-settings-button" - :class="{ 'is-collapsed': collapsed }" + :class="{ 'is-collapsed': collapsed, 'icon-button': collapsed }" aria-label="后端连接" @click="settingsOpen = true" > @@ -139,11 +139,14 @@ const menuOptions = computed(() => [
- + {{ route.meta.title || '工作空间' }}
diff --git a/src/admin.css b/src/admin.css index 58c18b5..4ae3a25 100644 --- a/src/admin.css +++ b/src/admin.css @@ -100,6 +100,10 @@ body { .n-button.admin-settings-button.is-collapsed { justify-content: center; padding-inline: 0; + width: 44px; + min-width: 44px; + height: 44px; + margin-inline: auto; } .admin-settings-button.is-collapsed .n-button__icon { margin: 0; @@ -144,10 +148,20 @@ body { padding: 0 20px; gap: 12px; } -/* 图标按钮保留原有方形点击热区；仅取消 circle 属性产生的圆形外观。 */ +/* 按钮保持直角，单图标按钮以 Naive 当前尺寸为边长，加载时也不改变宽度。 */ .n-button { border-radius: 0; } +.n-button.icon-button { + width: var(--n-height); + min-width: var(--n-height); + height: var(--n-height); + padding: 0; + flex: 0 0 auto; +} +.n-button.icon-button .n-button__icon { + margin: 0; +} .n-button:focus-visible { outline: 2px solid var(--app-accent-text); outline-offset: 2px; @@ -1037,6 +1051,60 @@ body { .project-search { width: 240px; } +/* 项目筛选与搜索框同高，保留更宽的点击区；窄屏可自然换行。 */ +.project-status-filters.n-radio-group { + display: flex; + flex-wrap: wrap; + height: auto; + min-height: var(--n-height); + gap: 4px 1px; +} +.project-status-filters .n-radio-group__splitor { + display: none; +} +.project-status-filters .n-radio-button { + min-width: 76px; + padding-inline: 18px; + text-align: center; +} +/* 状态说明与操作各自成组，避免小标签夹在不同尺寸的按钮之间。 */ +.visual-style-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 16px 24px; + margin-block: 20px; + padding: 14px 16px; + background: var(--app-subtle); +} +.visual-style-status { + display: flex; + align-items: center; + gap: 12px; + min-width: 0; +} +.visual-style-status > svg { + flex-shrink: 0; + color: var(--app-muted); +} +.visual-style-status strong { + font-size: 14px; + font-weight: 500; +} +.visual-style-status p { + margin: 4px 0 0; + color: var(--app-muted); + font-size: 12px; + line-height: 1.6; +} +.visual-style-actions { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 10px; + margin-left: auto; +} .project-name-cell { display: block; min-width: 0; diff --git a/src/components/ui/ThemeToggle.vue b/src/components/ui/ThemeToggle.vue index a536ca9..46c87f5 100644 --- a/src/components/ui/ThemeToggle.vue +++ b/src/components/ui/ThemeToggle.vue @@ -27,13 +27,12 @@ function selectTheme(key: string | number) { {{ current.label }} · 切换主题 diff --git a/src/components/ui/WorkspaceTools.vue b/src/components/ui/WorkspaceTools.vue index c703308..33988dc 100644 --- a/src/components/ui/WorkspaceTools.vue +++ b/src/components/ui/WorkspaceTools.vue @@ -35,9 +35,14 @@ const host = inject(workspaceHostKey, undefined) diff --git a/src/components/ui/flatTheme.test.ts b/src/components/ui/flatTheme.test.ts index c33a428..d3d6ab8 100644 --- a/src/components/ui/flatTheme.test.ts +++ b/src/components/ui/flatTheme.test.ts @@ -1,7 +1,19 @@ import { h } from 'vue' import { mount, type VueWrapper } from '@vue/test-utils' import { afterEach, describe, expect, it, vi } from 'vitest' -import { NAlert, NButton, NCard, NCheckbox, NConfigProvider, NInput, NSelect, NTable, NTag } from 'naive-ui' +import { + NAlert, + NButton, + NCard, + NCheckbox, + NConfigProvider, + NInput, + NSelect, + NTable, + NTag, + NTabPane, + NTabs +} from 'naive-ui' import { readFileSync, readdirSync } from 'node:fs' import { useTheme } from '../../composables/useTheme' @@ -74,6 +86,10 @@ describe('全站平面主题', () => { h(NAlert, { type: 'error' }, () => '生成失败'), h(NCard, {}, () => '内容'), h(NTag, {}, () => '待设计'), + h(NTabs, { type: 'line', value: 'one' }, () => [ + h(NTabPane, { name: 'one', tab: '人物' }, () => '人物内容'), + h(NTabPane, { name: 'two', tab: '场景' }, () => '场景内容') + ]), h(NTable, { striped: true }, () => h('tbody', [h('tr', [h('td', '记录')])])) ]) } @@ -103,6 +119,31 @@ 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') + }) + + it('单图标按钮以当前控件高度为边长，尺寸与内容按钮互不影响', () => { + // happy-dom 不计算几何尺寸，此项约束共用样式和调用方，实际布局仍需浏览器验收。 + const css = readFileSync('src/admin.css', 'utf8') + expect(css).toMatch( + /\.n-button\.icon-button\s*\{[^}]*width:\s*var\(--n-height\);[^}]*min-width:\s*var\(--n-height\);[^}]*height:\s*var\(--n-height\);[^}]*padding:\s*0/ + ) + expect(css).toMatch( + /\.project-status-filters \.n-radio-button\s*\{[^}]*min-width:\s*76px;[^}]*padding-inline:\s*18px/ + ) + expect(css).toMatch(/\.project-status-filters\.n-radio-group\s*\{[^}]*flex-wrap:\s*wrap;[^}]*height:\s*auto;/) + for (const file of [ + 'src/App.vue', + 'src/components/ui/ThemeToggle.vue', + 'src/components/ui/WorkspaceTools.vue', + 'src/features/projects/ProjectsPage.vue', + 'src/features/subject-identity/SubjectIdentityPage.vue' + ]) { + const source = readFileSync(file, 'utf8') + expect(source).toContain('icon-button') + expect(source).not.toMatch(/]*\bcircle\b/) + } + expect(readFileSync('src/components/ui/DirectoryItem.vue', 'utf8')).not.toContain('icon-button') }) it('业务面板、列表分组和标签以背景区分，保留键盘焦点与选中指示', () => { diff --git a/src/composables/useTheme.ts b/src/composables/useTheme.ts index 9762345..4e208b8 100644 --- a/src/composables/useTheme.ts +++ b/src/composables/useTheme.ts @@ -215,7 +215,8 @@ export function useTheme() { tabTextColorActiveLine: accentText, tabTextColorHoverLine: accentText, barColor: primary, - tabBorderColor: 'transparent' + // Tabs 保留横向分隔线，明确导航与内容边界；选中下划线仍使用主绿色。 + tabBorderColor: dark ? '#333333' : '#e5e5e5' }, Tag: { textColorPrimary: accentText, diff --git a/src/features/projects/ProjectsPage.vue b/src/features/projects/ProjectsPage.vue index a98d2eb..c3c634c 100644 --- a/src/features/projects/ProjectsPage.vue +++ b/src/features/projects/ProjectsPage.vue @@ -75,7 +75,7 @@ function clearFilters() {
- {{ item.label }} - +
+ >
import WorkspacePage from '../../components/ui/WorkspacePage.vue' -import { NAlert, NButton, NTag } from 'naive-ui' +import { NAlert, NButton } from 'naive-ui' +import { LoaderCircle, LockKeyhole, LockKeyholeOpen, Palette, RefreshCw, TriangleAlert } from '@lucide/vue' import { computed, ref } from 'vue' import { usePolling } from '../../composables/usePolling' import { runOperation } from '../workflows/operations' @@ -24,6 +25,16 @@ const editorRevision = ref(0) const imageRevision = ref(0) const dirty = ref(false) +/** 状态是只读说明，与操作按钮分组；读取失败不能被误报成尚未创建。 */ +const statusInfo = computed(() => { + if (query.error.value) return { label: '读取失败', hint: '请刷新重试，现有内容不会被覆盖', icon: TriangleAlert } + if (!query.data.value) return { label: '正在读取', hint: '正在获取项目视觉风格', icon: LoaderCircle } + if (!style.value) return { label: '尚未创建', hint: '可使用 AI 生成，或在下方手动填写', icon: Palette } + return style.value.isLocked + ? { label: '已锁定', hint: 'AI 不会覆盖，仍可在下方手动编辑', icon: LockKeyhole } + : { label: '未锁定', hint: '定稿后可在下方锁定，避免 AI 覆盖', icon: LockKeyholeOpen } +}) + /** 防止错误项目的数据进入编辑器；空风格是正常的首次使用状态。 */ function assertProject(value: VisualStyle | null, id: string) { if (value && (value.projectId !== id || value.images.some(image => image.visualStyleId !== value.id))) @@ -101,18 +112,26 @@ function removeImage(image: VisualStyleImage) { >
-
- {{ - style ? (style.isLocked ? '已锁定' : '未锁定') : '尚未创建' - }} - - 刷新风格 +
+
+
+
+ + 刷新风格 +
{{ query.error.value }} 请确认后端 dev 已更新并重启；查询失败不等同于尚未创建。 diff --git a/src/features/workflows/pages.test.ts b/src/features/workflows/pages.test.ts index c37a55a..155ca18 100644 --- a/src/features/workflows/pages.test.ts +++ b/src/features/workflows/pages.test.ts @@ -1,5 +1,5 @@ import { computed, nextTick, ref } from 'vue' -import { NImage, NScrollbar } from 'naive-ui' +import { NImage, NRadioGroup, NScrollbar } from 'naive-ui' import { createMemoryHistory, createRouter } from 'vue-router' import { flushPromises, mount, type VueWrapper } from '@vue/test-utils' import { afterEach, describe, expect, it, vi } from 'vitest' @@ -223,6 +223,28 @@ describe('内容级滚动下的生产反馈', () => { }) describe('视觉风格与主体身份工作区', () => { + it.each([ + { locked: null, label: '尚未创建', action: 'AI 生成风格', disabled: false }, + { locked: false, label: '未锁定', action: 'AI 重新生成风格', disabled: false }, + { locked: true, label: '已锁定', action: 'AI 重新生成风格', disabled: true } + ])('视觉风格 $label 使用独立状态说明与等高操作按钮，保留锁定限制', async ({ locked, label, action, disabled }) => { + const fetcher = vi + .fn() + .mockImplementation(async () => jsonResponse(locked === null ? null : styleFixture({ isLocked: locked }))) + vi.stubGlobal('fetch', fetcher) + await mountAssets('style') + const status = wrapper!.get('.visual-style-status') + expect(status.attributes('role')).toBe('status') + expect(status.get('strong').text()).toBe(label) + expect(status.find('button').exists()).toBe(false) + expect(wrapper!.find('.visual-style-toolbar .n-tag').exists()).toBe(false) + expect(wrapper!.get('.visual-style-actions').findAll('button')).toHaveLength(2) + expect(button(action).disabled).toBe(disabled) + expect(button(action).style.getPropertyValue('--n-height')).toBe('34px') + expect(button('刷新风格').style.getPropertyValue('--n-height')).toBe('34px') + expect(fetcher.mock.calls.every(([, options]) => !options?.method || options.method === 'GET')).toBe(true) + }) + it('主体目录显示已确认母版和默认占位，点缩略图只切换主体，不重复读取所有角色图库', async () => { const first = formFixture() const forms = [ @@ -1326,6 +1348,11 @@ describe('工作台页面交互', () => { await router.push('/') wrapper = mount(ProjectsPage, { attachTo: document.body, global: { plugins: [router] } }) await flushPromises() + expect(wrapper.getComponent(NRadioGroup).props('size')).toBe('medium') + const refresh = wrapper.get('[aria-label="刷新项目"]') + expect(refresh.classes()).toContain('icon-button') + expect(refresh.find('.n-button__icon svg').exists()).toBe(true) + expect(refresh.text()).toBe('') expect(wrapper.text()).toContain('雨夜来信') await wrapper.get('input[aria-label="搜索项目"]').setValue('不存在的关键词') expect(wrapper.text()).toContain('没有匹配的剧本')