侧边栏

Anvil-Dev · May 3, 2024 · 4e2289f · 4e2289f
1 parent 66a49a7
commit 4e2289f
Showing 1 changed file with 37 additions and 34 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,6 @@
 @ -1,68 +1,98 @@
 <script setup lang="ts">
-import {h, reactive, ref} from 'vue';
+import { h, reactive, ref } from 'vue';
 import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
@@ -10,14 +10,14 @@ import {
   RedEnvelopeOutlined,
   GithubOutlined
 } from '@ant-design/icons-vue';
-import Icon from "./assets/icon.svg";
-import Curseforge from "./assets/curseforge.svg";
-import Modrinth from "./assets/modrinth.svg";
-import BiliBili from "./assets/bilibili.svg";
-import Mcmod from "./assets/mcmod.svg";
-import QQ from "./assets/QQ.svg";
-import KOOK from "./assets/kook.svg";
-import router from "./router/index.ts";
+import Icon from './assets/icon.svg';
+import Curseforge from './assets/curseforge.svg';
+import Modrinth from './assets/modrinth.svg';
+import BiliBili from './assets/bilibili.svg';
+import Mcmod from './assets/mcmod.svg';
+import QQ from './assets/QQ.svg';
+import KOOK from './assets/kook.svg';
+import router from './router/index.ts';
 
 const items = ref([
   {
@@ -57,6 +57,7 @@ const state = reactive({
 router.push('/');
 
 function toggleCollapsed() {
+  console.log(state.collapsed);
   state.collapsed = !state.collapsed;
 }
 
@@ -67,58 +68,60 @@ function select(page: any) {
 
 <template>
   <a-page-header
-      class="app-header"
-      title="铁砧工艺"
-      sub-title="一个原版风科技模组"
-      @back="toggleCollapsed"
-      :avatar="{ src: Icon }">
+    class="app-header"
+    title="铁砧工艺"
+    sub-title="一个原版风科技模组"
+    @back="toggleCollapsed"
+    :avatar="{ src: Icon }">
     <template #backIcon>
-      <MenuUnfoldOutlined v-if="state.collapsed"/>
-      <MenuFoldOutlined v-else/>
+      <MenuUnfoldOutlined v-if="state.collapsed" />
+      <MenuFoldOutlined v-else />
     </template>
     <template #extra>
       <a href="https://www.curseforge.com/minecraft/mc-mods/anvilcraft" target="_blank">
-        <a-image :src="Curseforge" style="height: 32px; width: 32px" :preview="false"/>
+        <a-image :src="Curseforge" style="height: 32px; width: 32px" :preview="false" />
       </a>
       <a href="https://modrinth.com/mod/anvilcraft" target="_blank">
-        <a-image :src="Modrinth" style="height: 32px; width: 32px" :preview="false"/>
+        <a-image :src="Modrinth" style="height: 32px; width: 32px" :preview="false" />
       </a>
       <a
-          href="https://space.bilibili.com/5930630/channel/collectiondetail?sid=2530932"
-          target="_blank">
-        <a-image :src="BiliBili" style="height: 32px; width: 32px" :preview="false"/>
+        href="https://space.bilibili.com/5930630/channel/collectiondetail?sid=2530932"
+        target="_blank">
+        <a-image :src="BiliBili" style="height: 32px; width: 32px" :preview="false" />
       </a>
       <a href="https://www.mcmod.cn/class/14068.html" target="_blank">
-        <a-image :src="Mcmod" style="height: 32px; width: 32px" :preview="false"/>
+        <a-image :src="Mcmod" style="height: 32px; width: 32px" :preview="false" />
       </a>
       <a href="https://github.com/Anvil-Dev/AnvilCraft" target="_blank">
-        <GithubOutlined style="font-size: 30px; color: black"/>
+        <GithubOutlined style="font-size: 30px; color: black" />
       </a>
       <a href="https://qm.qq.com/q/OO9MeRbPIm" target="_blank">
-        <a-image :src="QQ" style="height: 32px; width: 32px" :preview="false"/>
+        <a-image :src="QQ" style="height: 32px; width: 32px" :preview="false" />
       </a>
       <a href="https://www.kookapp.cn/app/invite/mFBCbM" target="_blank">
-        <a-image :src="KOOK" style="height: 32px; width: 32px" :preview="false"/>
+        <a-image :src="KOOK" style="height: 32px; width: 32px" :preview="false" />
       </a>
     </template>
   </a-page-header>
   <a-layout>
-    <a-layout-sider class="app-sider">
+    <a-layout-sider class="app-sider" :collapsed="state.collapsed" collapsible>
       <a-menu
-          v-model:selectedKeys="state.selectedKeys"
-          mode="inline"
-          class="app-menu"
-          :inline-collapsed="state.collapsed"
-          :items="items"
-          @select="select"/>
+        v-model:selectedKeys="state.selectedKeys"
+        mode="inline"
+        class="app-menu"
+        :items="items"
+        @select="select" />
     </a-layout-sider>
     <a-layout-content>
       <div class="app-scrollbar">
         <div class="app-content">
-          <router-view/>
+          <router-view />
         </div>
         <div class="app-footer">
-          <span>©<a href="https://github.com/Anvil-Dev" target="_blank">Anvil-Dev</a></span>
+          <span>
+            ©
+            <a href="https://github.com/Anvil-Dev" target="_blank">Anvil-Dev</a>
+          </span>
         </div>
       </div>
     </a-layout-content>