style: 优化前端 UI 布局和样式

- MainLayout 增加间距优化，改善页面布局
- ModelDetailDrawer 调整样式细节，提升用户体验

frontend/src/features/models/components/ModelDetailDrawer.vue

@@ -21,19 +21,20 @@
                     {{ model.is_active ? '活跃' : '停用' }}
                   </Badge>
                 </div>
-                <div class="flex items-center gap-2">
+                <div class="flex items-center gap-2 text-sm text-muted-foreground min-w-0">
-                  <span class="text-sm text-muted-foreground font-mono">{{ model.name }}</span>
+                  <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="编辑模型">

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