feat: 顶部栏新增使用文档入口

AppHeader 增加使用文档按钮，新窗口打开 /guide 路由，补充响应式窄屏适配。

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>