侧边栏切换调整

src/components/layout/AppSidebar.vue

@@ -14,7 +14,8 @@
         :class="{ 'is-active': item.key === activeKey }"
         @click="handleClick(item)"
       >
-        {{ item.label }}
+        <span class="app-sidebar-icon" aria-hidden="true"></span>
+        <span class="app-sidebar-label">{{ item.label }}</span>
       </button>
     </div>
   </aside>
@@ -71,33 +72,73 @@ const handleClick = (item) => {
   box-sizing: border-box;
   flex-shrink: 0;
   width: 220px;
-  background: #e8edf3;
-  color: #16213a;
+  padding: 16px 0;
+  background: #ffffff;
+  border-radius: 0;
 }
 
 .app-sidebar-group {
   display: flex;
   flex-direction: column;
+
+  & + .app-sidebar-group {
+    margin-top: 16px;
+  }
 }
 
 .app-sidebar-group-title {
-  padding: 16px 16px 8px;
+  padding: 5px 16px;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 400;
   font-size: 12px;
-  color: #808695;
+  color: #9aa5b8;
+  line-height: 17px;
+  text-align: left;
 }
 
 .app-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
   margin: 0;
-  padding: 12px 16px;
+  padding: 14px 16px;
   border: none;
+  border-left: 4px solid transparent;
+  border-radius: 0;
   background: transparent;
-  text-align: left;
   cursor: pointer;
-  color: inherit;
+  outline: none;
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
 
   &.is-active {
-    background: #d6e6f8;
-    color: #2382e7;
+    background: #edf7ff;
+    border-left: 4px solid #2382e7;
+
+    .app-sidebar-label {
+      font-weight: 600;
+      color: #2382e7;
+    }
   }
 }
+
+.app-sidebar-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.app-sidebar-label {
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #16213a;
+  line-height: 20px;
+  text-align: left;
+  font-style: normal;
+}
 </style>