From ee8614919eebd7013aadcfc4542510515a89c4ca Mon Sep 17 00:00:00 2001
From: fawney19 <elky0401@gmail.com>
Date: Thu, 11 Dec 2025 10:05:53 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=20UI=20=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MainLayout 增加间距优化，改善页面布局
- ModelDetailDrawer 调整样式细节，提升用户体验
---
 .../models/components/ModelDetailDrawer.vue       | 15 ++++++++-------
 frontend/src/layouts/MainLayout.vue               |  8 ++++++++
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/features/models/components/ModelDetailDrawer.vue b/frontend/src/features/models/components/ModelDetailDrawer.vue
index 177fa8c..631bb72 100644
--- a/frontend/src/features/models/components/ModelDetailDrawer.vue
+++ b/frontend/src/features/models/components/ModelDetailDrawer.vue
@@ -21,19 +21,20 @@
                     {{ model.is_active ? '活跃' : '停用' }}
                   </Badge>
                 </div>
-                <div class="flex items-center gap-2">
-                  <span class="text-sm text-muted-foreground font-mono">{{ model.name }}</span>
+                <div class="flex items-center gap-2 text-sm text-muted-foreground min-w-0">
+                  <span class="font-mono shrink-0">{{ model.name }}</span>
                   <button
-                    class="p-0.5 rounded hover:bg-muted transition-colors"
+                    class="p-0.5 rounded hover:bg-muted transition-colors shrink-0"
                     title="复制模型 ID"
                     @click="copyToClipboard(model.name)"
                   >
-                    <Copy class="w-3 h-3 text-muted-foreground" />
+                    <Copy class="w-3 h-3" />
                   </button>
+                  <template v-if="model.description">
+                    <span class="shrink-0">·</span>
+                    <span class="text-xs truncate" :title="model.description">{{ model.description }}</span>
+                  </template>
                 </div>
-                <p v-if="model.description" class="text-xs text-muted-foreground">
-                  {{ model.description }}
-                </p>
               </div>
               <div class="flex items-center gap-1 shrink-0">
                 <Button variant="ghost" size="icon" @click="$emit('edit-model', model)" title="编辑模型">
diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 395f564..954cc93 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -101,6 +101,12 @@
              </div>
           </div>
 
+          <!-- Demo Mode Badge (center) -->
+          <div v-if="isDemo" class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-xs font-medium">
+            <AlertTriangle class="w-3.5 h-3.5" />
+            <span>演示模式</span>
+          </div>
+
           <div class="flex items-center gap-2">
                <!-- Theme Toggle -->
                <button
@@ -125,6 +131,7 @@ import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { useDarkMode } from '@/composables/useDarkMode'
+import { isDemoMode } from '@/config/demo'
 import Button from '@/components/ui/button.vue'
 import AppShell from '@/components/layout/AppShell.vue'
 import SidebarNav from '@/components/layout/SidebarNav.vue'
@@ -157,6 +164,7 @@ const router = useRouter()
 const route = useRoute()
 const authStore = useAuthStore()
 const { isDark, themeMode, toggleDarkMode } = useDarkMode()
+const isDemo = computed(() => isDemoMode())
 
 const showAuthError = ref(false)
 let authCheckInterval: number | null = null