diff --git a/README.md b/README.md
index dfd02c2..cc69a65 100644
--- a/README.md
+++ b/README.md
@@ -95,6 +95,7 @@ Oxfmt 不负责代码质量,Oxlint 不负责 Vue 的完整类型推导;Vue S
- 剧集正文按编号连续展示全部已写入剧集;点击目录定位正文,滚动正文同步高亮并保持当前目录项可见。目录分行显示集数和完整标题,执行记录可按需展开。切换角色/世界观等标签不会销毁阅读器或重置位置。
- 主体身份、分镜设计和镜头生产共用 `DirectoryItem`:编号、完整标题和状态分层展示,桌面目录为 240–280px,窄屏改为可横向滚动的条目。目录标题与筛选固定,只有列表滚动。拆解结果的导出按钮与标签同排右对齐;形态图片筛选按内容区宽度自动排成一行或两列网格。
- 侧栏导航与主体/剧集/镜头目录采用直角满行背景,移除列表两侧的内缩,悬停和选中态都铺满所在列。条目内部保留文字间距;窄屏横向目录仍保持独立滚动,不影响表单与弹窗的圆角。
+- 主体目录以母版缩略图搭配名称、编号与状态,默认保留行背景和细分隔线。人物优先复用选角接口的母版;缺少地址的条目进入可视区域后才读取正式身份图库,不为整份目录轮询。无母版或加载失败显示人物/场景/道具图标,候选与形态图不会替代母版;点击缩略图只切换主体,刷新目录可重试读取。
- 身份、分镜、生产与图库的批量配置、说明和诊断统一放入 `WorkspaceTools`(Naive UI Drawer),按需覆盖当前工作区,不挤压列表。面板支持 Esc 或关闭按钮;关闭不会取消任务或清除配置。历史回执可从入口查看,新回执主动打开诊断;查询错误始终在外层可见。
- 生产步骤的操作按钮保留上下间距;`ConfirmAction` 用稳定根元素承接外部间距,避免多根弹窗组件吞掉 `class`。
- 右上角提供浅色、暗黑、跟随系统三种模式,默认跟随系统,选择保存在本机浏览器。存储被禁用时仍可在当前会话切换。
diff --git a/src/admin.css b/src/admin.css
index 461e381..e1a8232 100644
--- a/src/admin.css
+++ b/src/admin.css
@@ -494,6 +494,74 @@ body {
gap: 7px;
min-width: 0;
}
+/* 可选前导内容用于主体母版,不改变剧集与镜头目录的原有排版。 */
+.n-button.directory-item.has-leading .n-button__content {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+.directory-item-leading {
+ display: flex;
+ flex-shrink: 0;
+}
+.directory-item.has-leading .directory-item-body {
+ flex: 1;
+}
+.identity-subject-list-content {
+ gap: 0;
+ padding: 0 0 8px;
+}
+.n-button.identity-subject-item {
+ min-height: 86px;
+ padding: 10px 14px;
+ border-bottom: 1px solid var(--app-border);
+}
+.n-button.identity-subject-item:not(.selected) {
+ background: var(--app-surface);
+}
+.n-button.identity-subject-item:not(.selected):hover {
+ background: var(--app-subtle);
+}
+.identity-subject-item .directory-item-body {
+ gap: 3px;
+}
+.identity-subject-item .directory-item-title {
+ order: 0;
+ font-size: 14px;
+ font-weight: 600;
+}
+.identity-subject-item .directory-item-eyebrow {
+ order: 1;
+ font-size: 10px;
+}
+.identity-subject-item .directory-item-meta {
+ order: 2;
+ gap: 4px 6px;
+ font-size: 10px;
+}
+.identity-thumbnail {
+ display: flex;
+ width: 48px;
+ height: 64px;
+ overflow: hidden;
+ background: var(--app-subtle);
+}
+.identity-thumbnail .n-image,
+.identity-thumbnail .n-image img {
+ width: 100%;
+ height: 100%;
+}
+.identity-thumbnail-placeholder {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ gap: 5px;
+ color: var(--app-muted);
+ font-size: 10px;
+}
.directory-item-eyebrow {
font:
11px/1.5 ui-monospace,
diff --git a/src/components/ui/DirectoryItem.test.ts b/src/components/ui/DirectoryItem.test.ts
index 3da6e56..50d7b51 100644
--- a/src/components/ui/DirectoryItem.test.ts
+++ b/src/components/ui/DirectoryItem.test.ts
@@ -8,6 +8,17 @@ let wrapper: VueWrapper | undefined
afterEach(() => wrapper?.unmount())
describe('统一目录条目', () => {
+ it('主体缩略图使用可选前导槽位,与标题一起保留满行点击区域', () => {
+ wrapper = mount(DirectoryItem, {
+ props: { active: true },
+ slots: { leading: '母版缩略图', default: '林默', eyebrow: '@CH0001' }
+ })
+ expect(wrapper.classes()).toContain('has-leading')
+ expect(wrapper.get('.directory-item-leading').text()).toBe('母版缩略图')
+ expect(wrapper.get('.directory-item-title').text()).toBe('林默')
+ expect(wrapper.get('.directory-item-leading').element.closest('button')).toBe(wrapper.element)
+ })
+
it('编号、长标题和多项状态各占独立层级,沿用 Naive 按钮', () => {
const title = '雨夜霓虹街全景与记忆当铺外的人群和闪烁灯牌'
wrapper = mount(DirectoryItem, {
@@ -48,6 +59,10 @@ describe('统一目录条目', () => {
expect(css).toMatch(/\.directory-item-title\s*\{[^}]*overflow-wrap:\s*anywhere/)
expect(css).toMatch(/\.directory-list-content\s*\{[^}]*flex-direction:\s*row;[^}]*width:\s*max-content/)
expect(css).toContain('grid-template-columns: clamp(240px, 22%, 280px) minmax(0, 1fr)')
+ expect(css).toMatch(/\.identity-subject-list-content\s*\{[^}]*gap:\s*0;[^}]*padding:\s*0 0 8px/)
+ expect(css).toMatch(/\.n-button\.identity-subject-item\s*\{[^}]*min-height:\s*86px;[^}]*border-bottom:/)
+ expect(css).toMatch(/\.identity-thumbnail\s*\{[^}]*width:\s*48px;[^}]*height:\s*64px/)
+ expect(css).toMatch(/\.n-button\.identity-subject-item:not\(\.selected\)\s*\{[^}]*var\(--app-surface\)/)
})
it('侧栏与主体、镜头、剧集目录统一直角满行,保留文字内边距和移动端滚动', () => {
diff --git a/src/components/ui/DirectoryItem.vue b/src/components/ui/DirectoryItem.vue
index 28c332e..1690a0b 100644
--- a/src/components/ui/DirectoryItem.vue
+++ b/src/components/ui/DirectoryItem.vue
@@ -10,9 +10,10 @@ defineProps<{ active: boolean }>()
quaternary
block
class="directory-item"
- :class="{ selected: active }"
+ :class="{ selected: active, 'has-leading': !!$slots.leading }"
:aria-current="active ? 'true' : undefined"
>
+
diff --git a/src/features/subject-identity/SubjectIdentityPage.vue b/src/features/subject-identity/SubjectIdentityPage.vue
index 3acc3e2..e137850 100644
--- a/src/features/subject-identity/SubjectIdentityPage.vue
+++ b/src/features/subject-identity/SubjectIdentityPage.vue
@@ -25,6 +25,8 @@ import IdentityEditor from './components/IdentityEditor.vue'
import IdentityGallery from './components/IdentityGallery.vue'
import IdentityImageDialog from './components/IdentityImageDialog.vue'
import CastingCandidateDialog from './components/CastingCandidateDialog.vue'
+import IdentityThumbnail from './components/IdentityThumbnail.vue'
+import type { IdentitySubject } from './types'
/** 主体身份工作区按正式主体聚合,不把同一主体的多个 Form 当成不同身份。 */
const route = useRoute()
@@ -71,10 +73,21 @@ const imageOpen = ref(false)
const castingOpen = ref(false)
const pendingSelection = ref('')
const anchor = computed(() => currentAnchor(images.value))
+const thumbnailRefreshKey = ref(0)
const casting = computed(() => {
const value = castingQuery.data.value
return value && Array.isArray(value.items) ? value : null
})
+const castingBySubject = computed(() => new Map(casting.value?.items.map(item => [item.subjectId, item]) ?? []))
+
+/** 详情与选角数据已有母版地址时直接复用,避免对每个角色重复查询。 */
+function thumbnailSource(item: IdentitySubject): string | null | undefined {
+ if (item.id === selectedId.value && detail.data.value) return anchor.value?.imageUrl ?? null
+ const row = castingBySubject.value.get(item.id)
+ if (row) return row.anchorImageUrl || (row.anchorImageId ? undefined : null)
+ if (item.id === selectedId.value) return null
+ return undefined
+}
const filtered = computed(() =>
subjects.value.filter(
item =>
@@ -121,6 +134,7 @@ function exportReceipt() {
/** 目录刷新同时读取正式形态和 Character Casting,避免无形态角色状态滞后。 */
function refreshDirectory() {
+ thumbnailRefreshKey.value++
void Promise.all([catalog.refresh(), castingQuery.refresh()])
}
@@ -438,16 +452,22 @@ watch(
@click="select(item.id)"
class="identity-subject-item"
>{{ item.name }}
+
+
+
{{ item.ref }}
{{ item.forms.length }} 个形态
- {{
- castingStatusLabel(casting.items.find(row => row.subjectId === item.id)!.status)
- }}
+ {{ castingStatusLabel(castingBySubject.get(item.id)!.status) }}
diff --git a/src/features/subject-identity/components/IdentityThumbnail.vue b/src/features/subject-identity/components/IdentityThumbnail.vue
new file mode 100644
index 0000000..024b929
--- /dev/null
+++ b/src/features/subject-identity/components/IdentityThumbnail.vue
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+ {{ kind }}
+
+
+
diff --git a/src/features/subject-identity/thumbnail.test.ts b/src/features/subject-identity/thumbnail.test.ts
new file mode 100644
index 0000000..c7abf97
--- /dev/null
+++ b/src/features/subject-identity/thumbnail.test.ts
@@ -0,0 +1,182 @@
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { NImage } from 'naive-ui'
+import IdentityThumbnail from './components/IdentityThumbnail.vue'
+import { identityFixture, identityImageFixture } from './testing/fixtures'
+
+let wrapper: VueWrapper | undefined
+let observers: {
+ callback: IntersectionObserverCallback
+ observe: ReturnType void>>
+ disconnect: ReturnType void>>
+}[] = []
+const props = {
+ projectId: 'project',
+ subjectId: 'subject-db-1',
+ name: '书店',
+ module: 'scene',
+ identityId: 'identity-db-1',
+ refreshKey: 0
+}
+
+beforeEach(() => {
+ observers = []
+ vi.stubGlobal(
+ 'IntersectionObserver',
+ class {
+ observe = vi.fn<(element: Element) => void>()
+ disconnect = vi.fn<() => void>()
+ unobserve = vi.fn<(element: Element) => void>()
+ constructor(callback: IntersectionObserverCallback) {
+ observers.push({ callback, observe: this.observe, disconnect: this.disconnect })
+ }
+ }
+ )
+})
+afterEach(() => {
+ wrapper?.unmount()
+ wrapper = undefined
+ document.body.innerHTML = ''
+ vi.unstubAllGlobals()
+})
+
+/** 仅触发主体缩略图的可见事件,不触发 NImage 内部图片懒加载观察器。 */
+async function reveal() {
+ const observer = observers.find(item => item.observe.mock.calls.some(([element]) => element === wrapper!.element))!
+ observer.callback([{ isIntersecting: true } as IntersectionObserverEntry], {} as IntersectionObserver)
+ await flushPromises()
+ expect(observer.disconnect).toHaveBeenCalled()
+}
+
+/** 测试接口返回独立 Response,读取图片元数据不消耗生成额度。 */
+function response(data: unknown) {
+ return new Response(JSON.stringify({ data }))
+}
+
+describe('主体目录母版缩略图', () => {
+ it.each([
+ ['character', '人物'],
+ ['scene', '场景'],
+ ['prop', '道具']
+ ])('没有母版的 %s 显示类型占位,不补查或生成图片', async (module, label) => {
+ const fetcher = vi.fn()
+ vi.stubGlobal('fetch', fetcher)
+ wrapper = mount(IdentityThumbnail, { props: { ...props, module, source: null } })
+ await reveal()
+ expect(wrapper.text()).toBe(label)
+ expect(wrapper.get('[role="img"]').attributes('aria-label')).toContain('暂无母版')
+ expect(wrapper.findComponent(NImage).exists()).toBe(false)
+ expect(fetcher).not.toHaveBeenCalled()
+ })
+
+ it('直接复用目录母版地址,图片不抢占选择点击,加载失败显示默认占位', async () => {
+ const fetcher = vi.fn()
+ vi.stubGlobal('fetch', fetcher)
+ wrapper = mount(IdentityThumbnail, {
+ attachTo: document.body,
+ props: { ...props, source: '/storage/anchor.png' }
+ })
+ await reveal()
+ expect(wrapper.getComponent(NImage).props()).toMatchObject({ objectFit: 'cover', previewDisabled: true })
+ await wrapper.get('img').trigger('click')
+ expect(document.querySelector('.n-image-preview-container')).toBeNull()
+ await wrapper.get('img').trigger('error')
+ expect(wrapper.get('[role="img"]').attributes('aria-label')).toContain('母版暂不可用')
+ await wrapper.setProps({ source: '/storage/new-anchor.png' })
+ expect(wrapper.get('img').attributes('src')).toContain('/storage/new-anchor.png')
+ expect(fetcher).not.toHaveBeenCalled()
+ })
+
+ it('进入可视区域后才 GET 图库,仅选择权威母版,刷新时重新读取', async () => {
+ const fetcher = vi.fn().mockImplementation(async () =>
+ response([
+ identityImageFixture({
+ id: 'candidate',
+ isAnchor: false,
+ enabled: false,
+ imageUrl: '/storage/candidate.png'
+ }),
+ identityImageFixture({
+ id: 'front',
+ isAnchor: false,
+ viewType: 'front',
+ imageUrl: '/storage/front.png'
+ }),
+ identityImageFixture({ imageUrl: '/storage/anchor.png' })
+ ])
+ )
+ vi.stubGlobal('fetch', fetcher)
+ wrapper = mount(IdentityThumbnail, { props })
+ await flushPromises()
+ expect(fetcher).not.toHaveBeenCalled()
+ await reveal()
+ expect(fetcher).toHaveBeenCalledOnce()
+ expect(fetcher.mock.calls[0]?.[0]).toBe('/api/subjects/subject-db-1/identity/images')
+ expect(wrapper.get('img').attributes('src')).toContain('/storage/anchor.png')
+ await wrapper.setProps({ refreshKey: 1 })
+ await flushPromises()
+ expect(fetcher).toHaveBeenCalledTimes(2)
+ expect(fetcher.mock.calls.every(([, init]) => init?.method === 'GET')).toBe(true)
+ })
+
+ it('目录未附带身份摘要时先校验正式身份,再读取母版', async () => {
+ const fetcher = vi
+ .fn()
+ .mockImplementation(async url =>
+ response(String(url).endsWith('/images') ? [identityImageFixture()] : identityFixture())
+ )
+ vi.stubGlobal('fetch', fetcher)
+ wrapper = mount(IdentityThumbnail, { props: { ...props, identityId: undefined } })
+ await reveal()
+ expect(fetcher.mock.calls.map(([url]) => url)).toEqual([
+ '/api/subjects/subject-db-1/identity',
+ '/api/subjects/subject-db-1/identity/images'
+ ])
+ expect(wrapper.find('img').exists()).toBe(true)
+ })
+
+ it('切项目中止旧请求,即使迟到也不能覆盖新主体占位', async () => {
+ let finish!: (response: Response) => void
+ const fetcher = vi.fn().mockImplementation(
+ () =>
+ new Promise(resolve => {
+ finish = resolve
+ })
+ )
+ vi.stubGlobal('fetch', fetcher)
+ wrapper = mount(IdentityThumbnail, { props })
+ await reveal()
+ await wrapper.setProps({
+ projectId: 'other-project',
+ subjectId: 'other-subject',
+ name: '另一主体',
+ source: null
+ })
+ expect(fetcher.mock.calls[0]?.[1]?.signal?.aborted).toBe(true)
+ finish(response([identityImageFixture()]))
+ await flushPromises()
+ expect(wrapper.find('img').exists()).toBe(false)
+ expect(wrapper.get('[role="img"]').attributes('aria-label')).toBe('另一主体 · 暂无母版')
+ })
+
+ it('候选与辅助视角不能冒充母版,跨身份图片返回错误占位', async () => {
+ const fetcher = vi
+ .fn()
+ .mockResolvedValueOnce(response([identityImageFixture({ isAnchor: false })]))
+ .mockResolvedValueOnce(response([identityImageFixture({ identityId: 'wrong-identity' })]))
+ vi.stubGlobal('fetch', fetcher)
+ wrapper = mount(IdentityThumbnail, { props })
+ await reveal()
+ expect(wrapper.get('[role="img"]').attributes('aria-label')).toContain('暂无母版')
+ await wrapper.setProps({ refreshKey: 1 })
+ await flushPromises()
+ expect(wrapper.get('[role="img"]').attributes('aria-label')).toContain('母版暂不可用')
+ expect(wrapper.find('img').exists()).toBe(false)
+ })
+
+ it('危险地址不写入图片,无效图片也不会触发生图', () => {
+ wrapper = mount(IdentityThumbnail, { props: { ...props, source: 'javascript:alert(1)' } })
+ expect(wrapper.find('img').exists()).toBe(false)
+ expect(wrapper.get('[role="img"]').attributes('aria-label')).toContain('母版暂不可用')
+ })
+})
diff --git a/src/features/workflows/pages.test.ts b/src/features/workflows/pages.test.ts
index 4c7a505..398723b 100644
--- a/src/features/workflows/pages.test.ts
+++ b/src/features/workflows/pages.test.ts
@@ -220,6 +220,74 @@ describe('内容级滚动下的生产反馈', () => {
})
describe('视觉风格与主体身份工作区', () => {
+ it('主体目录显示已确认母版和默认占位,点缩略图只切换主体,不重复读取所有角色图库', async () => {
+ const first = formFixture()
+ const forms = [
+ first,
+ ...[2, 3].map(index => ({
+ ...first,
+ id: `form-${index}`,
+ subjectId: `subject-${index}`,
+ images: [],
+ subject: { ...first.subject, id: `subject-${index}`, ref: `@CH000${index}`, name: `角色${index}` }
+ }))
+ ]
+ const fetcher = vi.fn().mockImplementation(async url => {
+ const path = String(url)
+ if (path.endsWith('/subject-forms')) return jsonResponse(forms)
+ if (path.endsWith('/visual-style')) return jsonResponse(styleFixture())
+ if (path.endsWith('/character-casting/readiness'))
+ return jsonResponse({
+ total: 3,
+ ready: 2,
+ missingIdentity: 0,
+ missingAnchor: 1,
+ candidatePending: 0,
+ unlocked: 0,
+ locked: 2,
+ items: forms.map((form, index) => ({
+ subjectId: form.subjectId,
+ subjectRef: form.subject.ref,
+ subjectName: form.subject.name,
+ status: index === 2 ? 'missing_anchor' : 'ready',
+ isLocked: index !== 2,
+ anchorImageId: index === 2 ? undefined : `anchor-${index}`,
+ anchorImageUrl: index === 2 ? undefined : `/storage/anchor-${index}.png`,
+ candidateImages: [{ id: 'candidate', imageUrl: '/storage/candidate.png' }]
+ }))
+ })
+ const second = path.includes('/subject-2/')
+ if (path.endsWith('/identity/images'))
+ return jsonResponse([
+ identityImageFixture({
+ identityId: second ? 'identity-2' : 'identity-db-1',
+ imageUrl: `/storage/anchor-${second ? 1 : 0}.png`
+ })
+ ])
+ return jsonResponse(
+ identityFixture({
+ subjectId: second ? 'subject-2' : first.subjectId,
+ id: second ? 'identity-2' : 'identity-db-1'
+ })
+ )
+ })
+ vi.stubGlobal('fetch', fetcher)
+ await mountAssets('identity')
+ await wrapper!.get('[aria-label="关闭操作面板"]').trigger('click')
+ await flushPromises()
+ const items = wrapper!.findAll('.identity-subject-item')
+ expect(items).toHaveLength(3)
+ expect(items[0]!.get('.identity-thumbnail img').attributes('src')).toContain('/storage/anchor-0.png')
+ expect(items[1]!.get('.identity-thumbnail img').attributes('src')).toContain('/storage/anchor-1.png')
+ expect(items[2]!.get('.identity-thumbnail [role="img"]').attributes('aria-label')).toContain('暂无母版')
+ expect(fetcher.mock.calls.filter(([url]) => String(url).endsWith('/identity/images'))).toHaveLength(1)
+ await items[1]!.get('.identity-thumbnail img').trigger('click')
+ await flushPromises()
+ expect(items[1]!.attributes('aria-pressed')).toBe('true')
+ expect(document.querySelector('.n-image-preview-container')).toBeNull()
+ expect(fetcher.mock.calls.every(([, init]) => init?.method === 'GET')).toBe(true)
+ })
+
it('从形态深链接进入后,手动切换主体不会被目录刷新切回', async () => {
const form = formFixture()
const second = {