short-drama-agent/short-drama-agent-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化移动端工作台筛选与工具栏

Browse Source 
将形态图片状态筛选合并为下拉框，统一筛选容器内边距并调整背景。重新排列分镜与镜头生产移动端工具栏，隐藏重复统计并补充交互测试。
This commit is contained in:
GouJ
2026-09-08 09:59:05 +08:00
committed by GitHub
parent 4edb0ff6cc
commit 769407cb14
8 changed files with 102 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/production/ProductionPage.vue
+15 -1
View File
@@ -167,7 +167,7 @@ watch(
</script>
<template>
<WorkspacePage split compact
<WorkspacePage split compact class="production-workspace-page"
><template #header
><div class="workspace-toolbar">
<div class="toolbar-episode">
@@ -733,6 +733,20 @@ watch(
}
}
@media (max-width: 760px) {
/* 移动端隐藏可由镜头目录获知的重复统计，并让操作从左侧连续排列。 */
.production-workspace-page .workspace-toolbar {
@apply grid grid-cols-[minmax(0,_1fr)] gap-2;
}
.production-workspace-page .toolbar-episode,
.production-workspace-page .toolbar-actions {
@apply w-full min-w-0 m-0;
}
.production-workspace-page .toolbar-summary {
@apply hidden;
}
.production-workspace-page .toolbar-actions {
@apply justify-start;
}
.production-workspace {
@apply grid-cols-[minmax(0,_1fr)] grid-rows-[184px_minmax(0,_1fr)];
}
src/features/storyboard/StoryboardPage.vue
+15
View File
@@ -468,6 +468,21 @@ watch(
@apply p-0;
}
@media (max-width: 760px) {
/* 移动端按整行排列剧集、统计和操作，避免 flex 自动换行留下不规则空白。 */
.storyboard-workspace-page .workspace-toolbar {
@apply grid grid-cols-[minmax(0,_1fr)] gap-2;
}
.storyboard-workspace-page .toolbar-episode,
.storyboard-workspace-page .toolbar-metrics,
.storyboard-workspace-page .toolbar-actions {
@apply w-full min-w-0 m-0;
}
.storyboard-workspace-page .toolbar-metrics {
@apply justify-between;
}
.storyboard-workspace-page .toolbar-actions {
@apply justify-start;
}
.storyboard-workspace {
@apply grid-cols-[minmax(0,_1fr)] grid-rows-[184px_minmax(0,_1fr)];
}
src/features/subject-images/SubjectImagesPage.vue
+29 -23
View File
@@ -137,8 +137,14 @@ const search = ref('')
/** 切换排版复用同一份卡片和查询结果，不重新读取图库或清空筛选。 */
const layout = ref<GalleryLayout>('grid')
const module = ref('all')
const onlyMissing = ref(false)
const onlyStale = ref(false)
/** 形态图片状态筛选；单选下拉避免移动端复选项占据两行。 */
type ImageStatusFilter = 'all' | 'missing' | 'stale'
const statusFilter = ref<ImageStatusFilter>('all')
const statusFilterOptions: Array<{ label: string; value: ImageStatusFilter }> = [
{ label: '全部状态', value: 'all' },
{ label: '缺少主图', value: 'missing' },
{ label: '身份过期', value: 'stale' }
]
/** 保存每张卡片的尺寸观察器，切换回网格时及时释放。 */
const masonryCardObservers = new WeakMap<HTMLElement, ResizeObserver>()
@@ -223,8 +229,8 @@ const filtered = computed(() =>
form =>
(!targetFormId.value || form.id === targetFormId.value) &&
(module.value === 'all' || form.subject.module === module.value) &&
(!onlyMissing.value || !primaryImage(form.images)) &&
(!onlyStale.value || isPrimaryIdentityStale(form)) &&
(statusFilter.value !== 'missing' || !primaryImage(form.images)) &&
(statusFilter.value !== 'stale' || isPrimaryIdentityStale(form)) &&
`${form.subject.name} ${form.subject.ref} ${form.name}`
.toLowerCase()
.includes(search.value.trim().toLowerCase())
@@ -235,8 +241,7 @@ watch(
() => {
search.value = targetFormId.value ? '' : queryText(route.query.subjectRef)
module.value = 'all'
onlyMissing.value = false
onlyStale.value = false
statusFilter.value = 'all'
galleryOpen.value = false
generateOpen.value = false
promptOpen.value = false
@@ -272,8 +277,7 @@ function exportReceipt() {
function resetFilters() {
search.value = ''
module.value = 'all'
onlyMissing.value = false
onlyStale.value = false
statusFilter.value = 'all'
void router.replace({
query: { ...route.query, subjectFormId: undefined, subjectRef: undefined, sourceShotId: undefined }
})
@@ -298,8 +302,7 @@ async function showStaleForms() {
})
search.value = ''
module.value = 'all'
onlyMissing.value = false
onlyStale.value = true
statusFilter.value = 'stale'
}
</script>
@@ -571,10 +574,12 @@ async function showStaleForms() {
{ label: String('道具'), value: 'prop' }
]"
></NSelect>
<div class="filter-toggles">
<NCheckbox v-model:checked="onlyMissing">仅看缺少主图</NCheckbox>
<NCheckbox v-model:checked="onlyStale">仅看身份过期</NCheckbox>
</div>
<NSelect
v-model:value="statusFilter"
:options="statusFilterOptions"
aria-label="筛选图片状态"
class="status-filter"
/>
<div class="form-image-display-controls">
<span class="filter-result-count">{{ filtered.length }} 个形态</span>
<div class="gallery-layout-switch" role="group" aria-label="图库显示方式">
@@ -853,7 +858,8 @@ async function showStaleForms() {
@apply [overflow-anchor:none];
}
.form-image-filter-region {
@apply my-4 py-[5px] px-4 bg-(--app-subtle);
@apply my-4 p-3;
background: color-mix(in srgb, var(--app-subtle) 96%, white);
container-type: inline-size;
}
.form-image-toolbar {
@@ -875,17 +881,11 @@ async function showStaleForms() {
@apply min-w-0;
}
.form-image-filters {
@apply grid grid-cols-[minmax(200px,_360px)_152px_minmax(260px,_1fr)_auto] items-center gap-y-3 gap-x-4;
@apply grid grid-cols-[minmax(200px,_360px)_152px_160px_auto] items-center gap-y-3 gap-x-4;
}
.form-image-filters > * {
@apply min-w-0;
}
.filter-toggles {
@apply flex items-center flex-wrap gap-y-2.5 gap-x-4 text-xs;
}
.filter-toggles .n-checkbox__label {
@apply whitespace-nowrap;
}
.filter-result-count {
@apply justify-self-end text-muted text-xs whitespace-nowrap;
}
@@ -905,14 +905,20 @@ async function showStaleForms() {
.form-image-filters {
@apply grid-cols-[minmax(0,_1fr)_152px];
}
.status-filter {
@apply col-start-1 row-start-2;
}
.form-image-display-controls {
@apply col-[1/-1];
@apply col-start-2 row-start-2;
}
}
@container (max-width: 460px) {
.form-image-filters {
@apply grid-cols-[minmax(0,_1fr)_120px] gap-x-2.5;
}
.filter-result-count {
@apply hidden;
}
}
.asset-impact-context {
@apply flex flex-col gap-2.5 py-[5px] px-4 bg-(--app-subtle) m-0 min-w-0;