style: 恢复标签页分隔线并统一工具栏与图标按钮

src/features/visual-style/VisualStylePage.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import WorkspacePage from '../../components/ui/WorkspacePage.vue'
-import { NAlert, NButton, NTag } from 'naive-ui'
+import { NAlert, NButton } from 'naive-ui'
+import { LoaderCircle, LockKeyhole, LockKeyholeOpen, Palette, RefreshCw, TriangleAlert } from '@lucide/vue'
 import { computed, ref } from 'vue'
 import { usePolling } from '../../composables/usePolling'
 import { runOperation } from '../workflows/operations'
@@ -24,6 +25,16 @@ const editorRevision = ref(0)
 const imageRevision = ref(0)
 const dirty = ref(false)
 
+/** 状态是只读说明，与操作按钮分组；读取失败不能被误报成尚未创建。 */
+const statusInfo = computed(() => {
+    if (query.error.value) return { label: '读取失败', hint: '请刷新重试，现有内容不会被覆盖', icon: TriangleAlert }
+    if (!query.data.value) return { label: '正在读取', hint: '正在获取项目视觉风格', icon: LoaderCircle }
+    if (!style.value) return { label: '尚未创建', hint: '可使用 AI 生成，或在下方手动填写', icon: Palette }
+    return style.value.isLocked
+        ? { label: '已锁定', hint: 'AI 不会覆盖，仍可在下方手动编辑', icon: LockKeyhole }
+        : { label: '未锁定', hint: '定稿后可在下方锁定，避免 AI 覆盖', icon: LockKeyholeOpen }
+})
+
 /** 防止错误项目的数据进入编辑器；空风格是正常的首次使用状态。 */
 function assertProject(value: VisualStyle | null, id: string) {
     if (value && (value.projectId !== id || value.images.some(image => image.visualStyleId !== value.id)))
@@ -101,18 +112,26 @@ function removeImage(image: VisualStyleImage) {
                 >
             </div></template
         >
-        <div class="my-5 flex flex-wrap items-center gap-3">
-            <NTag size="small" :bordered="false">{{
-                style ? (style.isLocked ? '已锁定' : '未锁定') : '尚未创建'
-            }}</NTag>
-            <ConfirmAction
-                :label="style ? 'AI 重新生成风格' : 'AI 生成风格'"
-                :disabled="disabled || !!style?.isLocked || dirty"
-                acknowledgement
-                description="调用文本模型生成整体及分类风格。重新生成会覆盖已保存的文本与硬约束；旧身份、旧图片和已有提示词不会自动更新。"
-                @confirm="generate"
-            />
-            <NButton :disabled="query.loading.value" @click="query.refresh" text size="small">刷新风格</NButton>
+        <div class="visual-style-toolbar">
+            <div class="visual-style-status" role="status">
+                <component :is="statusInfo.icon" :size="18" aria-hidden="true" />
+                <div>
+                    <strong>{{ statusInfo.label }}</strong>
+                    <p>{{ statusInfo.hint }}</p>
+                </div>
+            </div>
+            <div class="visual-style-actions">
+                <ConfirmAction
+                    :label="style ? 'AI 重新生成风格' : 'AI 生成风格'"
+                    :disabled="disabled || !!style?.isLocked || dirty"
+                    acknowledgement
+                    description="调用文本模型生成整体及分类风格。重新生成会覆盖已保存的文本与硬约束；旧身份、旧图片和已有提示词不会自动更新。"
+                    @confirm="generate"
+                />
+                <NButton :loading="query.loading.value" @click="query.refresh"
+                    ><template #icon><RefreshCw :size="16" /></template>刷新风格</NButton
+                >
+            </div>
         </div>
         <NAlert v-if="query.error.value" role="alert" type="error" :show-icon="false" class="mb-4"
             >{{ query.error.value }} 请确认后端 dev 已更新并重启；查询失败不等同于尚未创建。