写作台适配手机:列表与章节工作区分屏切换
- 手机上章节列表与工作区分两屏,点章节进入工作区,左上角返回 - 列表页顶部提供「继续下一章」与流程说明;工作区顶栏使用紧凑版控制按钮 - 在列表页启动写作后自动进入即将处理的章节 - 精简标签页文字、正文留白与版本信息,避免小屏截断 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -17,6 +17,20 @@ watch(() => chapters.value.find(c => c.status === 'writing')?.id, (id) => {
|
||||
if (id) selectedId.value = id
|
||||
})
|
||||
|
||||
// 手机上列表和工作区分两屏:URL 带 ?c= 时显示章节工作区
|
||||
const showDetail = computed(() => Boolean(route.query.c))
|
||||
function backToList() {
|
||||
const { c: _c, ...rest } = route.query
|
||||
router.replace({ query: rest })
|
||||
}
|
||||
// 在列表页点「继续下一章」后,直接进入即将处理的章节
|
||||
watch(running, (v) => {
|
||||
if (!v || route.query.c) return
|
||||
const next = chapters.value.find(c => c.status !== 'approved')
|
||||
if (next) selectedId.value = next.id
|
||||
})
|
||||
const nextChapter = computed(() => chapters.value.find(c => c.status !== 'approved'))
|
||||
|
||||
const totalWords = computed(() => chapters.value.reduce((s, c) => s + c.wordCount, 0))
|
||||
const approvedCount = computed(() => chapters.value.filter(c => c.status === 'approved').length)
|
||||
|
||||
@@ -48,7 +62,7 @@ function liveWords(chapterId: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardPanel id="chapter-list" :default-size="22" :min-size="16" :max-size="35" resizable>
|
||||
<UDashboardPanel id="chapter-list" :default-size="22" :min-size="16" :max-size="35" resizable :class="showDetail ? 'hidden lg:flex' : ''">
|
||||
<template #header>
|
||||
<UDashboardNavbar title="章节">
|
||||
<template #right>
|
||||
@@ -65,6 +79,18 @@ function liveWords(chapterId: string) {
|
||||
</UDashboardNavbar>
|
||||
</template>
|
||||
<template #body>
|
||||
<!-- 手机端:写作入口与说明(桌面端在右侧顶部) -->
|
||||
<div class="lg:hidden rounded-lg border border-default bg-elevated/40 p-3 mb-3 space-y-2">
|
||||
<RunControls />
|
||||
<p class="text-xs text-muted leading-relaxed">
|
||||
<template v-if="nextChapter">
|
||||
点「继续下一章」:主编为第{{ nextChapter.index }}章写简报 → 作家写正文 → 写完暂停等你确认。也可以点下面任意一章,手动生成简报、指定作家后再写。
|
||||
</template>
|
||||
<template v-else>
|
||||
点「继续下一章」,主编会先规划后续章节。
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
<div class="text-xs text-muted flex gap-3 px-1 -mt-1 mb-2">
|
||||
<span>{{ approvedCount }}/{{ chapters.length }} 章已确认</span>
|
||||
<span>{{ formatWords(totalWords) }}</span>
|
||||
@@ -88,6 +114,7 @@ function liveWords(chapterId: string) {
|
||||
<span class="text-xs text-muted tabular-nums w-10 shrink-0">第{{ c.index }}章</span>
|
||||
<span class="truncate text-sm font-medium flex-1">{{ c.title || '(未命名)' }}</span>
|
||||
<UIcon v-if="c.status === 'writing'" name="i-lucide-loader-circle" class="size-3.5 animate-spin text-warning" />
|
||||
<UIcon name="i-lucide-chevron-right" class="size-4 text-muted lg:hidden" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-1 ps-12">
|
||||
<UBadge :color="CHAPTER_STATUS_COLOR[c.status]" variant="subtle" size="sm">
|
||||
@@ -101,11 +128,19 @@ function liveWords(chapterId: string) {
|
||||
</template>
|
||||
</UDashboardPanel>
|
||||
|
||||
<UDashboardPanel id="chapter-main">
|
||||
<UDashboardPanel id="chapter-main" :class="showDetail ? '' : 'hidden lg:flex'">
|
||||
<template #header>
|
||||
<UDashboardNavbar :title="store.project.value?.title">
|
||||
<UDashboardNavbar :title="store.project.value?.title" :ui="{ title: 'truncate' }">
|
||||
<template #leading>
|
||||
<UButton icon="i-lucide-arrow-left" label="章节" color="neutral" variant="ghost" size="sm" class="lg:hidden -ms-1.5" @click="backToList" />
|
||||
</template>
|
||||
<template #right>
|
||||
<RunControls />
|
||||
<div class="hidden lg:block">
|
||||
<RunControls />
|
||||
</div>
|
||||
<div class="lg:hidden">
|
||||
<RunControls compact />
|
||||
</div>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user