美化

src/layouts/BasicLayout.vue

@@ -26,6 +26,16 @@ const { theme, toggleTheme } = useTheme()
 
 const selectedKeys = computed(() => [route.path])
 
+const pageTitle = computed(() => {
+  const titles: Record<string, string> = {
+    '/dashboard': '仪表盘',
+    '/server': '服务端配置',
+    '/ble-device': '设备配置',
+    '/setup': '安装指南'
+  }
+  return titles[route.path] || 'AI状态监控'
+})
+
 function onMenuClick({ key }: { key: string }) {
   router.push(key)
   if (isMobile.value) drawerOpen.value = false
@@ -134,7 +144,7 @@ onUnmounted(() => window.removeEventListener('resize', onResize))
           >
             <MenuOutlined />
           </a-button>
-          <span class="header-title">AI状态监控</span>
+          <span class="header-title">{{ pageTitle }}</span>
         </div>
         <div class="header-actions">
           <a-tooltip :title="isFullscreen ? '退出全屏' : '全屏显示'">

src/views/SetupGuide.vue

@@ -322,13 +322,15 @@ async function copyPrompt() {
         </div>
       </template>
       <div class="tab-content">
-        <a-tag :color="tabDescriptions[activeTab].color">{{ tabDescriptions[activeTab].tag }}</a-tag>
-        <p>{{ tabDescriptions[activeTab].desc }}</p>
+        <a-alert :message="tabDescriptions[activeTab].desc" show-icon style="margin-bottom: 0" type="success"/>
       </div>
 
       <div class="prompt-section">
         <div class="prompt-header">
-          <span>提示词</span>
+          <div class="prompt-title">
+            <img alt="提示词" class="prompt-icon" src="/prompt.svg"/>
+            <span>提示词</span>
+          </div>
           <a-button type="primary" @click="copyPrompt">
             <template #icon>
               <CheckOutlined v-if="copied"/>
@@ -376,7 +378,7 @@ async function copyPrompt() {
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-bottom: 24px;
+  margin-bottom: 10px;
   padding: 16px;
   background: var(--card-bg);
   border: 1px solid var(--border-color);
@@ -389,7 +391,7 @@ async function copyPrompt() {
 }
 
 .tool-tabs {
-  margin-bottom: 24px;
+  margin-bottom: 0;
 }
 
 .tab-icon-wrapper {
@@ -406,12 +408,7 @@ async function copyPrompt() {
 }
 
 .tab-content {
-  padding: 16px 0;
-}
-
-.tab-content p {
-  margin: 8px 0 0 0;
-  color: var(--text-secondary);
+  padding: 0;
 }
 
 .prompt-section {
@@ -419,7 +416,7 @@ async function copyPrompt() {
   border: 1px solid var(--border-color);
   border-radius: 8px;
   overflow: hidden;
-  margin-top: 16px;
+  margin-top: 10px;
 }
 
 .prompt-header {
@@ -431,6 +428,18 @@ async function copyPrompt() {
   font-weight: 500;
 }
 
+.prompt-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.prompt-icon {
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+}
+
 .prompt-content {
   padding: 16px;
   max-height: 500px;
@@ -447,7 +456,7 @@ async function copyPrompt() {
 }
 
 .usage-tip {
-  margin-top: 24px;
+  margin-top: 10px;
 }
 
 @media (max-width: 767px) {