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>

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'),