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

feat: 收口移动端侧栏与创作拆解页布局

Browse Source
This commit is contained in:
GJ
2026-09-04 19:41:17 +08:00
parent c483b1912e
commit 542ec296c7
12 changed files with 250 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/breakdown/BreakdownPage.vue
+74 -6
View File
@@ -137,6 +137,7 @@ function exportResult() {
<template>
<WorkspacePage split compact class="breakdown-workspace-page">
<template #header>
<!-- 以下是拆解状态与设置 -->
<div class="workspace-toolbar">
<h2 class="font-semibold">剧本拆解</h2>
<div v-if="snapshot" class="toolbar-summary">
@@ -144,7 +145,10 @@ function exportResult() {
>抽取 {{ summary.completed }} / {{ summary.total }} · 失败 {{ summary.failed }}</span
>
<span>主体 {{ subjects.length }} · 分镜剧集 {{ shots.length }} / {{ plans.length }}</span>
</div>
<div v-if="snapshot || project?.episodes.length" class="toolbar-actions">
<StatusBadge
v-if="snapshot"
:status="execution?.status || 'unknown'"
:label="
execution?.status === 'completed'
@@ -154,9 +158,12 @@ function exportResult() {
: '执行状态待确认'
"
/>
</div>
<div v-if="project?.episodes.length" class="toolbar-actions">
<WorkspaceTools v-model:open="toolsOpen" title="拆解设置与恢复" label="拆解设置与恢复">
<WorkspaceTools
v-if="project?.episodes.length"
v-model:open="toolsOpen"
title="拆解设置与恢复"
label="拆解设置与恢复"
>
<section class="panel breakdown-settings-panel p-5 lg:p-6">
<div class="mb-5 flex flex-wrap items-start justify-between gap-3">
<div>
@@ -491,6 +498,7 @@ function exportResult() {
:project-id="project?.id"
:checkpoints="checkpoints"
workflow="breakdown"
@close="showHistory = false"
/>
</div>
</section>
@@ -583,9 +591,69 @@ function exportResult() {
.breakdown-results-section > .content-with-history.history-hidden {
@apply grid-cols-[minmax(0,_1fr)] grid-rows-[minmax(0,_1fr)];
}
@media (max-width: 760px) {
.breakdown-results-section > .content-with-history {
@apply grid-rows-[minmax(0,_1fr)_min(25%,_130px)];
@media (max-width: 800px) {
.breakdown-workspace-page .workspace-heading {
@apply py-2 px-3;
}
.breakdown-workspace-page .workspace-toolbar {
@apply min-h-0 flex-nowrap gap-2;
}
.breakdown-workspace-page .workspace-toolbar h2 {
@apply hidden;
}
.breakdown-workspace-page .toolbar-summary {
@apply min-w-0 flex-1 flex-nowrap overflow-x-auto overflow-y-hidden overscroll-x-contain;
scrollbar-width: none;
mask-image: linear-gradient(to right, #000 calc(100% - 12px), transparent);
}
.breakdown-workspace-page .toolbar-summary::-webkit-scrollbar {
display: none;
}
.breakdown-workspace-page .toolbar-summary > * {
@apply shrink-0;
}
.breakdown-workspace-page .toolbar-actions {
@apply ml-0 shrink-0;
}
.breakdown-workspace-page .toolbar-actions > * {
@apply shrink-0;
}
.breakdown-workspace-page .toolbar-actions .n-tag {
@apply hidden;
}
.breakdown-workspace-page .workspace-tools-label {
@apply hidden;
}
.breakdown-workspace-page .workspace-tools-trigger {
@apply h-8 w-8 p-0;
min-width: 32px;
}
.breakdown-workspace-page .workspace-tools-trigger .n-button__icon {
@apply m-0;
}
.breakdown-results-section .tabs-toolbar {
container-type: normal;
}
.breakdown-results-section .workspace-tabs > .n-tabs-nav {
@apply flex-nowrap;
}
.breakdown-results-section .workspace-tabs .n-tabs-nav-scroll-wrapper {
@apply min-w-0 flex-1;
flex-basis: auto;
}
.breakdown-results-section .workspace-tabs .n-tabs-nav__suffix {
@apply w-auto pl-2;
}
.breakdown-results-section .tabs-toolbar-actions {
@apply min-h-0 flex-nowrap;
}
.breakdown-results-section .content-with-history:not(.history-hidden) {
@apply relative;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
}
.breakdown-results-section .content-with-history:not(.history-hidden) .history-panel {
@apply absolute inset-0 z-30;
}
}
</style>
src/features/breakdown/components/SubjectList.vue
+21 -1
View File
@@ -24,7 +24,8 @@ const filtered = computed(() =>
</script>
<template>
<div class="p-5 lg:p-7">
<div class="subject-list">
<!-- 以下是主体搜索 -->
<div class="subject-list-toolbar">
<NInput
class="subject-list-search"
@@ -139,6 +140,14 @@ const filtered = computed(() =>
.subject-details[open] summary svg {
@apply rotate-180;
}
.subject-list {
@apply p-5;
}
@media (min-width: 1024px) {
.subject-list {
@apply p-7;
}
}
.subject-list-toolbar {
@apply flex flex-wrap items-center justify-start gap-y-2.5 gap-x-3 mb-5;
}
@@ -148,4 +157,15 @@ const filtered = computed(() =>
.subject-list-count {
@apply shrink-0 text-muted text-xs whitespace-nowrap;
}
@media (max-width: 800px) {
.subject-list {
@apply p-3;
}
.subject-list-toolbar {
@apply flex-nowrap gap-2 mb-3;
}
.subject-list-search.n-input {
@apply flex-1 max-w-none;
}
}
</style>
src/features/create-drama/CreateDramaPage.vue
+13 -1
View File
@@ -137,7 +137,7 @@ function exportScript() {
/>
<RouterLink
v-if="complete"
class="text-button text-accent"
class="text-button text-accent script-next-link"
:to="`/projects/${project?.id}/breakdown`"
>进入拆解<ArrowRight :size="14"
/></RouterLink>
@@ -248,6 +248,7 @@ function exportScript() {
:project-id="project?.id"
:checkpoints="checkpoints"
workflow="create-drama"
@close="showHistory = false"
/>
</div></div
></WorkspacePage>
@@ -308,6 +309,17 @@ function exportScript() {
.script-section .tabs-toolbar-actions {
@apply min-h-0 flex-nowrap;
}
.script-section .tabs-toolbar-actions .script-next-link {
@apply hidden;
}
.script-section .content-with-history:not(.history-hidden) {
@apply relative;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
}
.script-section .content-with-history:not(.history-hidden) .history-panel {
@apply absolute inset-0 z-30;
}
}
.script-section {
@apply flex-1 flex flex-col min-h-0;
src/features/create-drama/EpisodeReader.vue
+16 -4
View File
@@ -254,15 +254,27 @@ onBeforeUnmount(() => observer?.disconnect())
@apply grid-cols-[180px_minmax(0,_1fr)];
}
}
@media (max-width: 600px) {
@media (max-width: 800px) {
.episode-reader {
@apply grid-cols-[112px_minmax(0,_1fr)];
@apply grid-cols-[72px_minmax(0,_1fr)];
}
.reader-directory-heading {
@apply pt-4 px-3 pb-3 flex-wrap;
@apply flex-col items-start gap-0 pt-2.5 px-1.5 pb-2;
}
.reader-directory-heading h3 {
@apply hidden;
}
.n-button.reader-episode-link {
@apply py-3 px-2.5;
@apply min-h-11 py-2 px-1;
}
.n-button.reader-episode-link .n-button__content {
@apply items-center text-center;
}
.reader-episode-title {
@apply hidden;
}
.reader-episode-label {
@apply text-[11px];
}
.reader-content {
@apply px-[18px];
src/features/workflows/HistoryPanel.vue
+19 -3
View File
@@ -9,6 +9,10 @@ import WorkflowDiagnosticsDialog from './WorkflowDiagnosticsDialog.vue'
/** 时间线只说明 checkpoint 已保存，不把每条记录误标为工作流成功。 */
const props = defineProps<{ checkpoints: Checkpoint[]; workflow: string; projectId?: string }>()
const emit = defineEmits<{
/** 关闭覆盖层中的执行记录 */
close: []
}>()
const diagnosticsOpen = ref(false)
const history = computed(() => workflowCheckpoints(props.checkpoints, props.workflow).slice(-18).toReversed())
</script>
@@ -16,7 +20,10 @@ const history = computed(() => workflowCheckpoints(props.checkpoints, props.work
<template>
<aside class="history-panel">
<NScrollbar class="panel-scroll" content-class="history-content">
<h3 class="mb-1 flex items-center gap-2 text-sm font-semibold"><Clock3 :size="15" />执行记录</h3>
<div class="history-heading">
<h3 class="mb-1 flex items-center gap-2 text-sm font-semibold"><Clock3 :size="15" />执行记录</h3>
<NButton class="history-close" text size="small" @click="emit('close')">关闭</NButton>
</div>
<p class="mb-6 text-xs leading-5 text-muted">最近 18 个 checkpoint · 自动刷新</p>
<NButton v-if="projectId" text size="small" class="mb-4" @click="diagnosticsOpen = true"
>查看完整运行诊断</NButton
@@ -72,9 +79,18 @@ const history = computed(() => workflowCheckpoints(props.checkpoints, props.work
.history-content {
@apply py-[23px] px-[21px];
}
@media (max-width: 760px) {
.history-heading {
@apply flex items-start justify-between gap-3;
}
.history-close {
@apply hidden;
}
@media (max-width: 800px) {
.history-panel {
@apply overflow-hidden min-h-0;
@apply overflow-hidden min-h-0 bg-(--app-subtle);
}
.history-close {
@apply inline-flex shrink-0;
}
}
</style>