diff --git a/README.md b/README.md index ba12d99..6366b81 100644 --- a/README.md +++ b/README.md @@ -86,16 +86,18 @@ Oxfmt 不负责代码质量,Oxlint 不负责 Vue 的完整类型推导;Vue S ## 后台布局与主题 - 外层应用固定为视口高度;侧栏、顶栏、项目标题和工作流导航不会随正文滚动。 +- 工作流只保留左侧导航,项目标题下不再重复展示相同标签。主体身份、分镜设计、镜头生产和图库采用内容优先布局:常用筛选/剧集选择/刷新在固定的紧凑工具栏,列表占据剩余高度。 - 项目列表采用固定表头表格;剧本、分镜、身份与生产页的目录和详情独立滚动,其他工作区只滚动内容区。 - 目录、详情、执行记录、折叠操作区、图片历史和 JSON 查看区统一使用 Naive UI `NScrollbar`;外层只负责尺寸与裁切,不再设置原生 `overflow: auto`。内边距与横向排列放在 `content-class` 内容层,避免双滚动条。 - 剧集正文按编号连续展示全部已写入剧集;点击目录定位正文,滚动正文同步高亮并保持当前目录项可见。目录分行显示集数和完整标题,执行记录可按需展开。切换角色/世界观等标签不会销毁阅读器或重置位置。 - 主体身份、分镜设计和镜头生产共用 `DirectoryItem`:编号、完整标题和状态分层展示,桌面目录为 240–280px,窄屏改为可横向滚动的条目。目录标题与筛选固定,只有列表滚动。拆解结果的导出按钮与标签同排右对齐;形态图片筛选按内容区宽度自动排成一行或两列网格。 -- 生成配置与批量操作放在可折叠区域,回执到达后自动展开;查询错误始终可见,不隐藏在折叠内容中。 +- 身份、分镜、生产与图库的批量配置、说明和诊断统一放入 `WorkspaceTools`(Naive UI Drawer),按需覆盖当前工作区,不挤压列表。面板支持 Esc 或关闭按钮;关闭不会取消任务或清除配置。历史回执可从入口查看,新回执主动打开诊断;查询错误始终在外层可见。 +- 生产步骤的操作按钮保留上下间距;`ConfirmAction` 用稳定根元素承接外部间距,避免多根弹窗组件吞掉 `class`。 - 右上角提供浅色、暗黑、跟随系统三种模式,默认跟随系统,选择保存在本机浏览器。存储被禁用时仍可在当前会话切换。 - 以黑白灰为主,仅错误、警告、成功等语义状态保留辅助色。Naive UI 和业务内容共用主题;加载前应用偏好,减少主题闪烁。 - 窄屏默认收起侧栏,目录与正文改用紧凑布局;执行记录仍可查看。长弹窗在自身内部滚动。 -布局样式集中在 `src/admin.css`,业务排版保留在 `src/styles.css`。新增页面应使用 `WorkspacePage`,避免通过 `body` 或 `window.scrollTo` 管理滚动。 +布局样式集中在 `src/admin.css`,业务排版保留在 `src/styles.css`。新增页面应使用 `WorkspacePage`(内容优先页开启 `compact`),低频操作使用 `WorkspaceTools`;避免通过 `body` 或 `window.scrollTo` 管理滚动。 本次 UI 重构保留前端 `dev@5551653` 的业务更新,包括过期形态图、主首帧和主视频的提示与更新入口。首帧默认只补当前剧集;存在过期主首帧时优先更新全项目过期项。非覆盖模式下的过期主视频重建完成后,会接替旧主视频;普通新增候选不自动替换主资产。 diff --git a/src/admin.css b/src/admin.css index a9c5c37..2de9cbf 100644 --- a/src/admin.css +++ b/src/admin.css @@ -81,7 +81,7 @@ body { align-items: center; justify-content: space-between; flex-shrink: 0; - height: 56px; + height: 44px; padding: 0 20px; gap: 12px; } @@ -104,7 +104,7 @@ body { } .project-header { flex-shrink: 0; - padding: 14px 24px 0; + padding: 9px 20px; background: var(--app-surface); border-bottom: 1px solid var(--app-border); } @@ -117,12 +117,6 @@ body { font-size: 16px; font-weight: 600; } -.project-tabs { - margin-top: 8px; -} -.project-tabs .n-tabs-nav { - border: 0; -} .project-notices.n-scrollbar { flex-shrink: 0; height: auto; @@ -144,6 +138,7 @@ body { overflow: hidden; } .workspace-page { + position: relative; height: 100%; display: flex; flex-direction: column; @@ -159,6 +154,116 @@ body { .workspace-heading { padding: 16px 24px 12px; } +/* 常用工具固定在滚动区外;低频操作使用局部抽屉,不叠加占高面板。 */ +.content-first-workspace .workspace-heading { + padding: 8px 20px; +} +.content-first-workspace .workspace-split { + padding: 0 20px 12px; + gap: 8px; +} +.content-first-workspace .workspace-scroll-content { + padding: 0 20px 16px; +} +.workspace-toolbar { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 8px 16px; + min-height: 34px; +} +.toolbar-episode { + display: flex; + align-items: center; + gap: 8px; + flex: 0 1 340px; + min-width: 180px; + font-size: 12px; +} +.toolbar-episode > span { + flex-shrink: 0; + color: var(--app-muted); +} +.toolbar-episode .n-select { + min-width: 0; +} +.toolbar-metrics, +.toolbar-summary { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 8px 16px; + color: var(--app-muted); + font-size: 12px; + line-height: 1.6; +} +.toolbar-actions { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 10px; + margin-left: auto; +} +.toolbar-type-filter { + width: 152px; +} +.workspace-tools-drawer { + max-width: 100%; +} +.workspace-tools-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + width: 100%; + font-size: 15px; +} +.workspace-tools-body { + padding: 20px; +} +.workspace-tools-body .storyboard-controls, +.workspace-tools-body .production-controls { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 16px; + margin-block: 20px; +} +.workspace-tools-body .storyboard-coverage { + margin-block: 20px; +} +.workspace-tools-body .generation-row { + display: block; +} +.workspace-tools-body .generation-row > div + div { + margin-top: 14px; +} +.workspace-tools-body .production-pipeline { + grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); +} +.workspace-inline-status { + display: flex; + align-items: center; + flex-wrap: wrap; + justify-content: space-between; + gap: 8px 16px; + padding: 7px 12px; + flex-shrink: 0; + border: 1px solid var(--app-border); + border-radius: 4px; + background: var(--app-subtle); + font-size: 12px; +} +.confirm-action { + display: inline-flex; + align-items: center; + max-width: 100%; +} +.production-pipeline-card > .confirm-action { + margin-block: 16px 4px; +} +.gallery-workspace-page .form-image-filter-region { + margin-block: 10px 0; +} .workspace-heading h2 { font-size: 16px; } @@ -194,18 +299,6 @@ body { margin: 0; flex-shrink: 0; } -.workspace-overview.n-scrollbar { - flex-shrink: 0; - height: auto; - max-height: min(36dvh, 420px); - overflow: hidden; - background: var(--app-surface); - border: 1px solid var(--app-border); - border-radius: 6px; -} -.overview-scroll-content { - padding: 10px 14px; -} .workspace-feedback.n-scrollbar { flex-shrink: 0; height: auto; @@ -845,13 +938,13 @@ body { } .admin-sider:not(.n-layout-sider--collapsed) { position: absolute; - top: 56px; + top: 44px; bottom: 0; z-index: 20; box-shadow: 6px 0 24px var(--app-shadow); } .project-header { - padding: 10px 12px 0; + padding: 8px 12px; } .project-title { max-width: 37vw; @@ -866,6 +959,22 @@ body { .workspace-heading { padding: 12px; } + .content-first-workspace .workspace-heading { + padding: 8px 12px; + } + .content-first-workspace .workspace-split, + .content-first-workspace .workspace-scroll-content { + padding: 0 12px 12px; + } + .toolbar-episode { + flex: 1; + } + .toolbar-actions { + gap: 8px; + } + .workspace-tools-body { + padding: 14px; + } .workspace-scroll-content, .workspace-split { padding: 0 12px 12px; diff --git a/src/components/ui/WorkspacePage.vue b/src/components/ui/WorkspacePage.vue index 59cbd72..192dd6f 100644 --- a/src/components/ui/WorkspacePage.vue +++ b/src/components/ui/WorkspacePage.vue @@ -1,10 +1,14 @@