style: 调整导航菜单样式，优化尺寸和交互效果

docs/intro/quick-start.md

@@ -16,13 +16,13 @@
 
 ```bash
 # 克隆稳定版本
-git clone --branch v0.2.2 --depth 1 https://github.com/xerrors/Yuxi-Know.git
+git clone --branch v0.3.0-beta2 --depth 1 https://github.com/xerrors/Yuxi-Know.git
 cd Yuxi-Know
 ```
 
 ::: warning 版本说明
-- `v0.2.2`: 当前稳定版本（推荐）
-- `v0.3.0-beta`：最新的 Beta 测试版
+- `v0.2.2`: 稳定版本
+- `v0.3.0-beta2`：最新的 Beta 测试版
 - `main`: 最新开发版本（不稳定，新特性可能会导致新 bug）
 :::
 

web/src/layouts/AppLayout.vue

@@ -332,11 +332,11 @@ div.header, #app-router-view {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 44px;
-    height: 44px;
-    padding: 10px;
+    width: 40px;
+    height: 40px;
+    padding: 4px;
     border: 1px solid transparent;
-    border-radius: 8px;
+    border-radius: 12px;
     background-color: transparent;
     color: #222;
     font-size: 20px;
@@ -344,6 +344,28 @@ div.header, #app-router-view {
     margin: 0;
     text-decoration: none;
     cursor: pointer;
+    outline: none;
+
+    & > svg:focus {
+      outline: none;
+    }
+    & > svg:focus-visible {
+      outline: none;
+    }
+
+    &.active {
+      background-color: var(--gray-150);
+      font-weight: bold;
+      color: var(--main-color);
+    }
+
+    &.warning {
+      color: red;
+    }
+
+    &:hover {
+      color: var(--main-color);
+    }
 
     &.github {
       padding: 10px 12px;
@@ -399,32 +421,15 @@ div.header, #app-router-view {
       }
     }
 
-    &.active {
-      text-shadow: 0 0 15px var(--main-300);
-      font-weight: bold;
-      color: var(--main-color);
-    }
+    &.setting {
+      margin: 8px 0;
 
-    &.warning {
-      color: red;
-    }
-
-    &:hover {
-      color: var(--main-color);
+      &:hover {
+        cursor: pointer;
+      }
     }
   }
 
-  .setting {
-    width: auto;
-    font-size: 20px;
-    color: #333;
-    margin-bottom: 8px;
-    padding: 16px 12px;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
 }