style: 样式优化

src/layouts/LayoutIndex.vue

@@ -1,26 +1,55 @@
 <script setup lang="ts">
 import { HeaderBar, NavigationMenu } from './components'
 import { RouterView } from 'vue-router'
+import { Github } from '@/icons'
 
 const collapse = ref(false)
 </script>
 
 <template>
   <div
-    class="relative w-full h-full overflow-hidden pt-16 transition-[padding]"
+    class="
+      relative w-full h-full overflow-hidden pt-16
+      bg-bg-solidBase
+      text-sm text-text-primary
+      transition-[padding]
+    "
     :class="collapse ? '' : 'pl-[200px]'"
   >
     <HeaderBar
       v-model:collapse="collapse"
       class="h-16 transition-[left_width]"
-      :class="collapse ? 'left-0 w-full' : 'left-[200px] w-[calc(100%_-_200px)]'"
+      :class="collapse ? 'left-0 w-full' : 'pl-0 left-[200px] w-[calc(100%_-_200px)]'"
     />
 
     <NavigationMenu
       class="w-[200px] transition-[transform]"
-      :class="collapse ? '-translate-x-[200px]' : ''"
-    />
+      :class="collapse ? '-translate-x-full' : ''"
+    >
+      <template #logo>
+        <div class="h-16 px-4 flex-shrink-0 flex items-center">
+          <img class="w-10 h-10" src="/favicon.png" alt="favicon" />
+          <div class="flex-1 pl-4 flex flex-col">
+            <div>夕云葛城</div>
+            <div class="h-5 flex items-center gap-1">
+              <a href="https://github.com/Altermoe" target="_blank" rel="noreferrer">
+                <Github class="w-4 h-4" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </template>
+    </NavigationMenu>
 
-    <RouterView />
+    <div
+      class="
+        w-full h-full overflow-hidden
+        border-t-[1px] border-stroke-cardDefault
+        bg-bg-layerDefault
+      "
+      :class="collapse ? '' : 'border-l-[1px] rounded-[8px_0_0_0]'"
+    >
+      <RouterView />
+    </div>
   </div>
 </template>

src/layouts/components/HeaderBar.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { WinButton } from '@/components'
+import { isDark } from '@/shared'
+
 const collapse = defineModel<boolean>('collapse', {
   required: true,
 })
@@ -7,24 +10,17 @@ const collapse = defineModel<boolean>('collapse', {
 <template>
   <div
     class="
-      px-4
-      absolute top-0 z-10 overflow-hidden flex items-center
-      text-sm
+      px-3 overflow-hidden
+      absolute top-0 z-10
+      flex items-center gap-2
     "
   >
-    <div
-      class="
-        w-8 p-1 px-2
-        grid place-content-center
-        border rounded
-        hover:bg-[skyblue]
-        active:bg-[gold]
-        font-mono
-        select-none cursor-pointer
-      "
-      @click="collapse = !collapse"
-    >
-      {{ collapse ? '>' : '<' }}
-    </div>
+    <WinButton square @click="collapse = !collapse">
+      {{ collapse ? '' : '' }}
+    </WinButton>
+
+    <WinButton circle @click="isDark = !isDark">
+      {{ isDark ? '' : '' }}
+    </WinButton>
   </div>
 </template>

src/layouts/components/NavigationMenu.vue

@@ -2,38 +2,64 @@
 import { RouterLink } from 'vue-router'
 
 const router = useRouter()
-const currentRoute = useRoute()
 </script>
 
 <template>
   <div
     class="
-      h-full p-2
+      h-full
       absolute left-0 top-0 z-10
-      border-r-[1px]
-      flex flex-col gap-2
-      text-sm
+      flex flex-col
     "
   >
-    <RouterLink
-      v-for="route in router.getRoutes()"
-      :key="route.path"
-      :to="route.path"
+    <slot name="logo" />
+
+    <div
       class="
-        p-2
-        border rounded
-        select-none
-        hover:bg-[skyblue]
-        active:bg-[gold]
-        cursor-pointer
-        overflow-hidden
-        whitespace-nowrap text-ellipsis
+        flex-1 px-2 overflow-auto
+        flex flex-col gap-2
       "
-      :class="{
-        'is-actived': route.path === currentRoute.path,
-      }"
     >
-      {{ route.name }}
-    </RouterLink>
+      <RouterLink
+        v-for="route in router.getRoutes()"
+        :key="route.path"
+        :to="route.path"
+        active-class="is-actived"
+        exact-active-class="is-exact-actived"
+        class="nav-router-link"
+        draggable="false"
+      >
+      <div v-if="route.meta.icon" class="w-5 h-5 font-[SegoeIcons]">
+        {{ route.meta.icon }}
+      </div>
+      <span>{{ route.name }}</span>
+      </RouterLink>
+    </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.nav-router-link {
+  @apply
+    p-2 overflow-hidden
+    flex items-center gap-2
+    rounded
+    bg-fill-subtleTransparent
+    cursor-pointer
+    select-none
+    whitespace-nowrap text-ellipsis
+  ;
+
+  &:hover {
+    @apply bg-fill-subtleSecondary;
+  }
+
+  &:active {
+    @apply bg-fill-subtleTertiary;
+  }
+
+  &.is-actived {
+    @apply bg-fill-subtleSecondary;
+  }
+}
+</style>