⚡️ 调整 wiki 样式

src/components/app/t-sidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <v-navigation-drawer :permanent="true" :rail="rail" class="tsb-box">
-    <v-list v-model:opened="open" class="side-list" density="compact" :nav="true">
+    <v-list class="side-list" density="compact" :nav="true">
       <!-- 负责收缩侧边栏 -->
       <v-list-item @click="collapse()">
         <template v-if="rail" #prepend>
@@ -68,7 +68,7 @@
         </template>
       </v-list-item>
       <v-divider v-show="isDevEnv" />
-      <v-list-group value="wiki" :fluid="true">
+      <v-menu :open-on-click="true" location="end">
         <template #activator="{ props }">
           <v-list-item title="图鉴" v-bind="props">
             <template #prepend>
@@ -76,27 +76,53 @@
             </template>
           </v-list-item>
         </template>
-        <v-list-item title="深渊数据库" value="wiki-abyss" :link="true" href="/wiki/abyss">
+        <v-list class="side-list-menu wiki" density="compact" :nav="true">
+          <v-list-item
+            class="side-item-menu"
+            title="深渊数据库"
+            value="wiki-abyss"
+            :link="true"
+            href="/wiki/abyss"
+          >
             <template #prepend>
-            <img src="/source/UI/wikiAbyss.webp" alt="abyssIcon" class="side-icon" />
+              <img src="/source/UI/wikiAbyss.webp" alt="abyssIcon" class="side-icon-menu" />
             </template>
           </v-list-item>
-        <v-list-item title="角色图鉴" value="wiki-character" :link="true" href="/wiki/character">
+          <v-list-item
+            class="side-item-menu"
+            title="角色图鉴"
+            value="wiki-character"
+            :link="true"
+            href="/wiki/character"
+          >
             <template #prepend>
-            <img src="/source/UI/wikiAvatar.webp" alt="characterIcon" class="side-icon" />
+              <img src="/source/UI/wikiAvatar.webp" alt="characterIcon" class="side-icon-menu" />
             </template>
           </v-list-item>
-        <v-list-item title="武器图鉴" value="wiki-weapon" :link="true" href="/wiki/weapon">
+          <v-list-item
+            class="side-item-menu"
+            title="武器图鉴"
+            value="wiki-weapon"
+            :link="true"
+            href="/wiki/weapon"
+          >
             <template #prepend>
-            <img src="/source/UI/wikiWeapon.webp" alt="weaponIcon" class="side-icon" />
+              <img src="/source/UI/wikiWeapon.webp" alt="weaponIcon" class="side-icon-menu" />
             </template>
           </v-list-item>
-        <v-list-item title="GCG" value="wiki-GCG" :link="true" href="/wiki/GCG">
+          <v-list-item
+            class="side-item-menu"
+            title="GCG"
+            value="wiki-GCG"
+            :link="true"
+            href="/wiki/GCG"
+          >
             <template #prepend>
-            <img src="/source/UI/wikiGCG.webp" alt="gcgIcon" class="side-icon" />
+              <img src="/source/UI/wikiGCG.webp" alt="gcgIcon" class="side-icon-menu" />
             </template>
           </v-list-item>
-      </v-list-group>
+        </v-list>
+      </v-menu>
       <div class="bottom-menu">
         <v-menu :open-on-click="true" location="end">
           <template #activator="{ props }">
@@ -106,35 +132,35 @@
               </template>
             </v-list-item>
           </template>
-          <v-list class="side-list-user" density="compact" :nav="true">
+          <v-list class="side-list-menu" density="compact" :nav="true">
-            <v-list-item class="side-item-user" title="签到" @click="openClient('sign_in')">
+            <v-list-item class="side-item-menu" title="签到" @click="openClient('sign_in')">
               <template #prepend>
-                <img src="/source/UI/userGacha.webp" class="side-icon-user" alt="sing_in" />
+                <img src="/source/UI/userGacha.webp" class="side-icon-menu" alt="sing_in" />
               </template>
             </v-list-item>
-            <v-list-item class="side-item-user" title="战绩" @click="openClient('game_record')">
+            <v-list-item class="side-item-menu" title="战绩" @click="openClient('game_record')">
               <template #prepend>
-                <img src="/source/UI/userRecord.webp" class="side-icon-user" alt="game_record" />
+                <img src="/source/UI/userRecord.webp" class="side-icon-menu" alt="game_record" />
               </template>
             </v-list-item>
-            <v-list-item class="side-item-user" title="便笺" @click="openClient('daily_note')">
+            <v-list-item class="side-item-menu" title="便笺" @click="openClient('daily_note')">
               <template #prepend>
-                <img src="/icon/material/210.webp" class="side-icon-user" alt="daily_note" />
+                <img src="/icon/material/210.webp" class="side-icon-menu" alt="daily_note" />
               </template>
             </v-list-item>
-            <v-list-item class="side-item-user" title="酒馆" @click="openClient('tavern')">
+            <v-list-item class="side-item-menu" title="酒馆" @click="openClient('tavern')">
               <template #prepend>
-                <img src="/platforms/mhy/mys.webp" alt="酒馆" class="side-icon-user" />
+                <img src="/platforms/mhy/mys.webp" alt="酒馆" class="side-icon-menu" />
               </template>
             </v-list-item>
             <v-list-item
-              class="side-item-user"
+              class="side-item-menu"
               title="登录"
               @click="login"
               v-show="userStore.cookie.value?.game_token === ''"
             >
               <template #prepend>
-                <img src="/source/UI/defaultUser.webp" class="side-icon-user" alt="login" />
+                <img src="/source/UI/defaultUser.webp" class="side-icon-menu" alt="login" />
               </template>
             </v-list-item>
           </v-list>
@@ -193,15 +219,6 @@ const themeTitle = computed(() => {
   return themeGet.value === "default" ? "夜间模式" : "日间模式";
 });
 
-const open = computed({
-  get() {
-    return appStore.getSubmenu();
-  },
-  set(value: string[]) {
-    appStore.sidebar.submenu.wiki = value.includes("wiki");
-  },
-});
-
 function collapse(): void {
   rail.value = !rail.value;
   appStore.sidebar.collapse = rail.value;
@@ -264,18 +281,22 @@ function login(): void {
   margin-right: 32px;
 }
 
-.side-list-user {
+.side-list-menu {
   background: var(--app-side-bg) !important;
   color: var(--app-side-content) !important;
   font-family: var(--font-title);
 }
 
-.side-item-user {
+.side-list-menu.wiki {
+  margin-left: 10px;
+}
+
+.side-item-menu {
   border: 1px solid var(--common-shadow-2);
   background: var(--box-bg-1);
 }
 
-.side-icon-user {
+.side-icon-menu {
   width: 20px;
   height: 20px;
   border-radius: 5px;

src/store/modules/app.ts

@@ -1,7 +1,7 @@
 /**
  * @file store/modules/app.ts
  * @description App store module
- * @since Beta v0.3.6
+ * @since Beta v0.3.9
  */
 
 import { path } from "@tauri-apps/api";
@@ -26,11 +26,6 @@ export const useAppStore = defineStore(
     const sidebar = reactive({
       // 是否折叠
       collapse: true,
-      // 是否显示
-      submenu: {
-        // 数据库
-        wiki: false,
-      },
     });
     // 开发者模式
     const devMode = ref(false);
@@ -54,20 +49,11 @@ export const useAppStore = defineStore(
     function init(): void {
       loading.value = false;
       devMode.value = false;
-      sidebar.submenu = {
-        wiki: false,
-      };
       theme.value = "default";
       isLogin.value = false;
       initDevice();
     }
 
-    function getSubmenu(): string[] {
-      const open = [];
-      if (sidebar.submenu.wiki) open.push("wiki");
-      return open;
-    }
-
     function changeTheme(): void {
       if (theme.value === "default") theme.value = "dark";
       else theme.value = "default";
@@ -88,7 +74,6 @@ export const useAppStore = defineStore(
       deviceInfo,
       isLogin,
       init,
-      getSubmenu,
       changeTheme,
     };
   },