写作台适配手机:列表与章节工作区分屏切换
- 手机上章节列表与工作区分两屏,点章节进入工作区,左上角返回 - 列表页顶部提供「继续下一章」与流程说明;工作区顶栏使用紧凑版控制按钮 - 在列表页启动写作后自动进入即将处理的章节 - 精简标签页文字、正文留白与版本信息,避免小屏截断 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -143,10 +143,10 @@ async function saveSummary() {
|
||||
|
||||
const tab = ref('text')
|
||||
const tabs = computed<TabsItem[]>(() => [
|
||||
{ label: '正文', value: 'text', icon: 'i-lucide-file-text' },
|
||||
{ label: '简报', value: 'brief', icon: 'i-lucide-clipboard-list', badge: chapter.value?.brief ? undefined : { label: '空', color: 'neutral', variant: 'subtle' } },
|
||||
{ label: `版本 (${chapter.value?.versions.length ?? 0})`, value: 'versions', icon: 'i-lucide-history' },
|
||||
{ label: '审稿与摘要', value: 'review', icon: 'i-lucide-message-square-text' }
|
||||
{ label: '正文', value: 'text' },
|
||||
{ label: '简报', value: 'brief', badge: chapter.value?.brief ? undefined : { label: '空', color: 'neutral', variant: 'subtle' } },
|
||||
{ label: `版本 ${chapter.value?.versions.length ?? 0}`, value: 'versions' },
|
||||
{ label: '审稿·摘要', value: 'review' }
|
||||
])
|
||||
|
||||
// 没有正文时默认显示简报
|
||||
@@ -243,8 +243,8 @@ const VERSION_STATUS: Record<string, { label: string, color: 'success' | 'warnin
|
||||
<!-- 正文 -->
|
||||
<div v-if="tab === 'text'" class="flex-1 min-h-0 flex flex-col gap-2">
|
||||
<div v-if="activeVersion && !isWriting" class="flex items-center gap-2 text-xs text-muted">
|
||||
<span>v{{ activeVersion.version }} · {{ activeVersion.writerName }} · {{ activeVersion.modelLabel }} · {{ activeVersion.wordCount }} 字</span>
|
||||
<code class="truncate">{{ activeVersion.filePath }}</code>
|
||||
<span>v{{ activeVersion.version }} · {{ activeVersion.writerName }}<span class="hidden sm:inline"> · {{ activeVersion.modelLabel }}</span> · {{ activeVersion.wordCount }} 字</span>
|
||||
<code class="truncate hidden sm:inline">{{ activeVersion.filePath }}</code>
|
||||
<div class="ms-auto flex gap-1">
|
||||
<template v-if="editing">
|
||||
<UButton label="取消" size="xs" color="neutral" variant="ghost" @click="editing = false" />
|
||||
@@ -257,7 +257,7 @@ const VERSION_STATUS: Record<string, { label: string, color: 'success' | 'warnin
|
||||
<div
|
||||
v-else-if="displayText"
|
||||
ref="textBox"
|
||||
class="overflow-y-auto rounded-lg border border-default bg-default px-8 py-6 max-h-[calc(100vh-18rem)]"
|
||||
class="overflow-y-auto rounded-lg border border-default bg-default px-4 py-4 sm:px-8 sm:py-6 max-h-[calc(100vh-18rem)]"
|
||||
@scroll="onScroll"
|
||||
>
|
||||
<NovelText :text="displayText" :writing="isWriting" class="max-w-3xl mx-auto" />
|
||||
@@ -276,7 +276,7 @@ const VERSION_STATUS: Record<string, { label: string, color: 'success' | 'warnin
|
||||
<h3 class="font-medium">
|
||||
章节简报
|
||||
</h3>
|
||||
<span class="text-xs text-muted">主编写给作家的执行指令,作家会严格按此写作</span>
|
||||
<span class="text-xs text-muted hidden sm:inline">主编写给作家的执行指令,作家会严格按此写作</span>
|
||||
<div class="ms-auto flex gap-1">
|
||||
<template v-if="editingBrief">
|
||||
<UButton label="取消" size="xs" color="neutral" variant="ghost" @click="editingBrief = false" />
|
||||
@@ -343,7 +343,7 @@ const VERSION_STATUS: Record<string, { label: string, color: 'success' | 'warnin
|
||||
<h3 class="font-medium">
|
||||
本章摘要
|
||||
</h3>
|
||||
<span class="text-xs text-muted">确认章节时自动生成;主编和后续作家只会看到摘要而不是全文</span>
|
||||
<span class="text-xs text-muted hidden sm:inline">确认章节时自动生成;主编和后续作家只会看到摘要而不是全文</span>
|
||||
<UButton class="ms-auto" label="保存" icon="i-lucide-save" size="xs" variant="soft" :disabled="summaryDraft === chapter.summary" @click="saveSummary" />
|
||||
</div>
|
||||
<UTextarea v-model="summaryDraft" autoresize :rows="6" class="w-full" placeholder="确认章节后自动生成" />
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
/** 流水线控制:继续写作 / 停止 / 模式切换 */
|
||||
/** 流水线控制:继续写作 / 停止 / 模式切换。compact 用于手机端顶栏,只保留主按钮 */
|
||||
defineProps<{ compact?: boolean }>()
|
||||
const store = useProjectStore()
|
||||
const { project, running, runningLabel, connected } = store
|
||||
|
||||
@@ -19,24 +20,26 @@ async function run() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center gap-2">
|
||||
<UTooltip :text="connected ? '实时连接正常' : '实时连接断开,正在重连…'">
|
||||
<span class="size-2 rounded-full" :class="connected ? 'bg-success' : 'bg-error animate-pulse'" />
|
||||
</UTooltip>
|
||||
<USwitch
|
||||
:model-value="settings.autoMode"
|
||||
label="自动模式"
|
||||
:disabled="running"
|
||||
size="sm"
|
||||
@update:model-value="toggleAuto"
|
||||
/>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<template v-if="!compact">
|
||||
<UTooltip :text="connected ? '实时连接正常' : '实时连接断开,正在重连…'">
|
||||
<span class="size-2 rounded-full" :class="connected ? 'bg-success' : 'bg-error animate-pulse'" />
|
||||
</UTooltip>
|
||||
<USwitch
|
||||
:model-value="settings.autoMode"
|
||||
label="自动模式"
|
||||
:disabled="running"
|
||||
size="sm"
|
||||
@update:model-value="toggleAuto"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="running">
|
||||
<UBadge color="warning" variant="subtle" icon="i-lucide-loader-circle" :ui="{ leadingIcon: 'animate-spin' }" class="max-w-64 truncate">
|
||||
<UBadge v-if="!compact" color="warning" variant="subtle" icon="i-lucide-loader-circle" :ui="{ leadingIcon: 'animate-spin' }" class="max-w-56 truncate">
|
||||
{{ runningLabel || '运行中' }}
|
||||
</UBadge>
|
||||
<UButton icon="i-lucide-square" label="停止" color="error" variant="soft" size="sm" @click="store.stop()" />
|
||||
</template>
|
||||
<UTooltip v-else :text="pendingChapter ? `第${pendingChapter.index}章待确认,请先在章节中确认` : (settings.autoMode ? `自动连续写作,最多 ${settings.autoChapterLimit} 章` : '主编规划/写简报 → 作家写下一章,写完后暂停等你确认')">
|
||||
<UTooltip v-else :text="pendingChapter ? `第${pendingChapter.index}章待确认,请先在章节中确认` : (settings.autoMode ? `自动连续写作,最多 ${settings.autoChapterLimit} 章` : '主编写简报 → 作家写下一章,写完后暂停等你确认')">
|
||||
<UButton
|
||||
icon="i-lucide-play"
|
||||
:label="settings.autoMode ? '开始自动写作' : '继续下一章'"
|
||||
@@ -46,5 +49,8 @@ async function run() {
|
||||
@click="run"
|
||||
/>
|
||||
</UTooltip>
|
||||
<p v-if="!compact && !running && pendingChapter && !settings.autoMode" class="basis-full text-xs text-primary lg:hidden">
|
||||
第{{ pendingChapter.index }}章已写完,点进去阅读并确认后才能继续
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user