refactor(app): 修改本地储存数据处理逻辑，统一管理

src/assets/js/local-storage.js

@@ -0,0 +1,28 @@
+// 本地储存
+
+import { useLocalStorage } from '@vueuse/core';
+
+/** 本地储存 key 前缀 */
+const PREFIX = 'frost-navigation/';
+
+/** NavView 模块 */
+export const storeNavView = {
+
+  /** 导航链接侧边栏折叠状态 */
+  isAsideCollapsed: useLocalStorage(PREFIX + 'nav-view/is-aside-collapsed', false),
+
+  /** 导航链接当前选中分类 */
+  currentCategory: useLocalStorage(PREFIX + 'nav-view/current-category', ''),
+
+  /** 导航链接搜索类型 */
+  searchType: useLocalStorage(PREFIX + 'nav-view/search-type', 'all'),
+
+};
+
+/** SearchView 模块 */
+export const storeSearchView = {
+
+  /** 当前使用的搜索引擎名称 */
+  searchEngineName: useLocalStorage(PREFIX + 'search-view/search-engine-name', '必应'),
+
+};

src/assets/js/search-engine.js

@@ -5,12 +5,8 @@ import {
 } from 'vue';
 
 import {
-  SKEY_SEARCH_ENGINE_NAME,
-} from '@/config/storage';
-
-import {
-  useLocalStorage,
-} from '@vueuse/core';
+  storeSearchView,
+} from './local-storage';
 
 import {
   $message,
@@ -37,7 +33,7 @@ import icon_zhihu from '@/assets/website-icon/zhihu.svg';
 /** 打开搜索结果页面 */
 export function openSearchResult() {
 
-  let engine = searchEngineName.value;
+  let engine = storeSearchView.searchEngineName.value;
   let keyword = searchKeyword.value;
   let baseURL = '';
   let useURL = '';
@@ -221,8 +217,5 @@ export const searchEngineList = [
   },
 ];
 
-/** 搜索引擎名称 */
-export const searchEngineName = useLocalStorage(SKEY_SEARCH_ENGINE_NAME, '必应');
-
 /** 搜索关键词 */
 export const searchKeyword = ref('');

src/config/storage.js

@@ -1,16 +0,0 @@
-// 本地储存 key 信息
-
-/** 储存 key 前缀 */
-const PREFIX = 'frost-navigation/';
-
-/** 导航链接侧边栏折叠状态 */
-export const SKEY_NAV_LINK_ASIDE_COLLAPSED = PREFIX + 'nav-link-aside-collapsed';
-
-/** 导航链接当前选中分类 */
-export const SKEY_NAV_LINK_CATEGORY = PREFIX + 'nav-link-category';
-
-/** 导航链接搜索类型 */
-export const SKEY_NAV_LINK_SEARCH_TYPE = PREFIX + 'nav-link-search-type';
-
-/** 当前使用的搜索引擎名称 */
-export const SKEY_SEARCH_ENGINE_NAME = PREFIX + 'search-engine-name';

src/views/NavView/NavView.vue

@@ -27,18 +27,18 @@
           collapse-mode="width"
           show-trigger="arrow-circle"
           :bordered="true"
-          :collapsed="isCollapsed"
+          :collapsed="storeNavView.isAsideCollapsed.value"
           :collapsed-width="64"
           :native-scrollbar="false"
           :scrollbar-props="{ trigger: 'hover' }"
           :width="240"
-          @collapse="isCollapsed = true"
-          @expand="isCollapsed = false"
+          @collapse="storeNavView.isAsideCollapsed.value = true"
+          @expand="storeNavView.isAsideCollapsed.value = false"
         >
           <n-menu
             v-model:value="navLinksTitle"
             mode="vertical"
-            :collapsed="isCollapsed"
+            :collapsed="storeNavView.isAsideCollapsed.value"
             :collapsed-icon-size="24"
             :collapsed-width="64"
             :icon-size="24"
@@ -53,7 +53,7 @@
           <div class="right-content-header">
             <n-input-group>
               <n-select
-                v-model:value="searchType"
+                v-model:value="storeNavView.searchType.value"
                 class="search-type"
                 :options="searchTypes"
               />
@@ -144,10 +144,8 @@ import {
 } from '@/config/modules';
 
 import {
-  SKEY_NAV_LINK_ASIDE_COLLAPSED,
-  SKEY_NAV_LINK_CATEGORY,
-  SKEY_NAV_LINK_SEARCH_TYPE,
-} from '@/config/storage';
+  storeNavView,
+} from '@/assets/js/local-storage';
 
 import {
   $dialog, $message,
@@ -172,12 +170,6 @@ const detailDrawer = reactive({
 
 });
 
-/** 分类列表是否折叠 */
-const isCollapsed = useLocalStorage(
-  SKEY_NAV_LINK_ASIDE_COLLAPSED,
-  false
-);
-
 /** 完整的链接列表 */
 const navLinksAll = formatNavLinks(true);
 
@@ -206,12 +198,6 @@ const navLinksTitle = shallowRef('');
 /** 搜索关键词 */
 const searchKeyword = shallowRef('');
 
-/** 搜索类型 */
-const searchType = useLocalStorage(
-  SKEY_NAV_LINK_SEARCH_TYPE,
-  'all'
-);
-
 /**
  * @desc 搜索类型列表
  * @type { import('naive-ui').SelectOption[] }
@@ -235,7 +221,7 @@ function changeList(data = null) {
   if (data) {
     useData = data;
   } else {
-    storedKey = localStorage.getItem(SKEY_NAV_LINK_CATEGORY)
+    storedKey = storeNavView.currentCategory.value;
   }
 
   if (storedKey) {
@@ -249,17 +235,15 @@ function changeList(data = null) {
   }
 
   if (useData) {
-    localStorage.setItem(SKEY_NAV_LINK_CATEGORY, useData.title);
+    storeNavView.currentCategory.value = useData.title;
     navLinksCurr.value = useData.children;
     navLinksTitle.value = useData.title;
   } else {
-    localStorage.setItem(SKEY_NAV_LINK_CATEGORY, '');
+    storeNavView.currentCategory.value = '';
     navLinksCurr.value = [];
     navLinksTitle.value = '';
   }
 
-
-
 }
 
 /**
@@ -344,7 +328,7 @@ function treeDataFilter(pattern = '', node = null) {
     pattern = pattern.toLowerCase();
   }
 
-  let type = searchType.value;
+  let type = storeNavView.searchType.value;
 
   let desc = String(node.desc).toLowerCase();
   let title = String(node.title).toLowerCase();

src/views/SearchView/SearchView.vue

@@ -27,7 +27,7 @@
       <!-- 搜索引擎列表 -->
       <div class="search-engines-wrapper">
         <n-radio-group
-          v-model:value="searchEngineName"
+          v-model:value="storeSearchView.searchEngineName.value"
           class="search-engines-list"
         >
           <!-- 搜索引擎分类 -->
@@ -68,9 +68,14 @@ import {
   NInput, NRadio, NRadioGroup,
 } from 'naive-ui';
 
+import {
+  storeSearchView,
+} from '@/assets/js/local-storage';
+
 import {
   openSearchResult,
-  searchEngineList, searchEngineName, searchKeyword,
+  searchEngineList,
+  searchKeyword,
 } from '@/assets/js/search-engine';
 
 import {