fix: 合并图库镜头定位与筛选工具栏并统一对齐

This commit is contained in:
GouJ
2026-09-04 10:40:19 +08:00
parent 37f11911b1
commit 543c85ff43
5 changed files with 81 additions and 33 deletions
@@ -379,13 +379,10 @@ async function showStaleForms() {
>镜头影响检查失败暂时无法确认有无过期首帧{{ impact.query.error.value }}
<NButton text size="small" @click="impact.query.refresh">重试检查</NButton></NAlert
>
<div
v-if="impactOptions.length || sourceShotId"
class="asset-impact-context mt-3"
aria-label="镜头与素材定位"
>
<div class="flex flex-wrap items-center gap-3">
<div class="form-image-filter-region">
<div class="form-image-toolbar" :class="{ 'has-impact-picker': impactOptions.length || sourceShotId }">
<NSelect
v-if="impactOptions.length || sourceShotId"
:value="sourceShot?.shotId ?? null"
:options="impactOptions"
placeholder="选择过期镜头,查看关联素材"
@@ -394,6 +391,34 @@ async function showStaleForms() {
class="asset-impact-select"
@update:value="selectImpactShot"
/>
<div class="form-image-filters" role="group" aria-label="形态图片筛选">
<NInput
placeholder="搜索主体、引用或形态"
:input-props="{ 'aria-label': '搜索形态图片' }"
v-model:value="search"
clearable
><template #prefix><Search :size="14" /></template
></NInput>
<NSelect
aria-label="筛选主体类型"
v-model:value="module"
:options="[
{ label: String('全部类型'), value: 'all' },
{ label: String('人物'), value: 'character' },
{ label: String('场景'), value: 'scene' },
{ label: String('道具'), value: 'prop' }
]"
></NSelect>
<div class="filter-toggles">
<NCheckbox v-model:checked="onlyMissing">仅看缺少主图</NCheckbox>
<NCheckbox v-model:checked="onlyStale">仅看身份过期</NCheckbox>
</div>
<span class="filter-result-count">{{ filtered.length }} 个形态</span>
</div>
</div>
</div>
<div v-if="sourceShotId" class="asset-impact-context mt-3" aria-label="镜头与素材定位">
<div class="flex flex-wrap items-center gap-3">
<RouterLink v-if="sourceLocation" :to="sourceLocation" class="text-button"
>返回第 {{ sourceShot?.episodeNo }} · 镜头 {{ sourceShot?.shotNo }} </RouterLink
>
@@ -470,32 +495,6 @@ async function showStaleForms() {
}}</template>
<NButton text size="small" @click="resetFilters">清除定位</NButton>
</NAlert>
<div class="form-image-filter-region">
<div class="form-image-filters" role="group" aria-label="形态图片筛选">
<NInput
placeholder="搜索主体、引用或形态"
:input-props="{ 'aria-label': '搜索形态图片' }"
v-model:value="search"
clearable
><template #prefix><Search :size="14" /></template
></NInput>
<NSelect
aria-label="筛选主体类型"
v-model:value="module"
:options="[
{ label: String('全部类型'), value: 'all' },
{ label: String('人物'), value: 'character' },
{ label: String('场景'), value: 'scene' },
{ label: String('道具'), value: 'prop' }
]"
></NSelect>
<div class="filter-toggles">
<NCheckbox v-model:checked="onlyMissing">仅看缺少主图</NCheckbox>
<NCheckbox v-model:checked="onlyStale">仅看身份过期</NCheckbox>
</div>
<span class="filter-result-count">{{ filtered.length }} 个形态</span>
</div>
</div>
<NAlert v-if="query.error.value" role="alert" type="error" :show-icon="false" class="mt-4"
>{{ query.error.value }}<span v-if="forms.length"> 当前展示上次读取的数据。</span></NAlert
><NAlert v-if="running" role="status" type="info" :show-icon="false" class="mt-4">