From e70538e64d7d1a9bc35a09aed5bf8aef0f9cd6f8 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <leocaoxiaozhu@gmail.com>
Date: Thu, 16 Jul 2026 09:36:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B6=E9=83=A8=E6=A0=8F=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E4=BD=BF=E7=94=A8=E6=96=87=E6=A1=A3=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AppHeader 增加使用文档按钮，新窗口打开 /guide 路由，补充响应式窄屏适配。
---
 frontend/src/components/AppHeader.vue | 64 +++++++++++++++++++++++++++
 frontend/src/router/index.ts          |  6 +++
 2 files changed, 70 insertions(+)

diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue
index 2eb5f43..109db06 100644
--- a/frontend/src/components/AppHeader.vue
+++ b/frontend/src/components/AppHeader.vue
@@ -27,6 +27,11 @@ function updateTime() {
   currentDate.value = now.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')
 }
 
+function openGuide() {
+  const guideUrl = router.resolve({ name: 'guide' }).href
+  window.open(guideUrl, '_blank', 'noopener,noreferrer')
+}
+
 const serverIp = ref(window.location.hostname)
 
 onMounted(() => {
@@ -103,6 +108,19 @@ onUnmounted(() => {
           <span>{{ currentTime }}</span>
         </div>
       </div>
+
+      <div class="divider document-divider"></div>
+
+      <el-tooltip content="使用文档" placement="bottom">
+        <button
+          type="button"
+          class="documentation-btn"
+          aria-label="打开使用文档"
+          @click="openGuide"
+        >
+          <i class="fa fa-book" aria-hidden="true" />
+        </button>
+      </el-tooltip>
     </div>
   </header>
 </template>
@@ -261,4 +279,50 @@ onUnmounted(() => {
     }
   }
 }
+
+.documentation-btn {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  background: #fff;
+  color: #64748b;
+  cursor: pointer;
+  font-size: 17px;
+  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
+
+  &:hover {
+    border-color: rgba(79, 70, 229, 0.28);
+    background: #eef2ff;
+    color: var(--primary-color);
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1);
+  }
+
+  &:focus-visible {
+    outline: 3px solid rgba(79, 70, 229, 0.2);
+    outline-offset: 2px;
+  }
+}
+
+@media (max-width: 1280px) {
+  .header-right {
+    gap: 12px;
+  }
+
+  .system-info .info-item:first-child {
+    display: none;
+  }
+}
+
+@media (max-width: 1040px) {
+  .system-info,
+  .header-right > .divider:not(.document-divider) {
+    display: none;
+  }
+}
 </style>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 778e8eb..a51b5f3 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -9,6 +9,12 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/views/login/LoginView.vue'),
     meta: { title: '登录', public: true },
   },
+  {
+    path: '/guide',
+    name: 'guide',
+    component: () => import('@/views/guide/GuideView.vue'),
+    meta: { title: '使用文档', skipPermission: true },
+  },
   {
     path: '/',
     component: () => import('@/layouts/MainLayout.vue'),