From 7a29374c2e4705ae6d55adf96bd0bbcb3b42a85f Mon Sep 17 00:00:00 2001
From: pany <939630029@qq.com>
Date: Thu, 21 Nov 2024 20:41:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20hook=20=E5=85=B3=E9=94=AE=E5=AD=97?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E4=B8=BA=20composable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/hook.code-snippets                         |  8 ++++----
 README.md                                          |  2 +-
 README.zh-CN.md                                    |  2 +-
 src/App.vue                                        |  4 ++--
 .../use-fetch-select.ts                            |  0
 .../use-fullscreen-loading.ts                      |  0
 src/components/SearchMenu/SearchFooter.vue         |  2 +-
 src/components/SearchMenu/SearchModal.vue          |  2 +-
 src/components/ThemeSwitch/index.vue               |  4 ++--
 src/{hooks => composables}/useDevice.ts            |  0
 src/{hooks => composables}/useFetchSelect.ts       |  0
 src/{hooks => composables}/useFullscreenLoading.ts |  0
 .../useGreyAndColorWeakness.ts                     |  2 +-
 src/{hooks => composables}/useLayoutMode.ts        |  0
 src/{hooks => composables}/usePagination.ts        |  0
 src/{hooks => composables}/useRouteListener.ts     |  0
 src/{hooks => composables}/useTheme.ts             |  2 +-
 src/{hooks => composables}/useTitle.ts             |  0
 src/{hooks => composables}/useWatermark.ts         |  0
 src/layouts/LeftMode.vue                           |  4 ++--
 src/layouts/components/Breadcrumb/index.vue        |  2 +-
 src/layouts/components/Logo/index.vue              |  2 +-
 src/layouts/components/NavigationBar/index.vue     |  4 ++--
 .../components/Settings/SelectLayoutMode.vue       |  2 +-
 src/layouts/components/Settings/index.vue          |  2 +-
 src/layouts/components/Sidebar/index.vue           |  4 ++--
 src/layouts/components/TagsView/ScrollPane.vue     |  2 +-
 src/layouts/components/TagsView/index.vue          |  2 +-
 src/layouts/{hooks => composables}/useResize.ts    |  2 +-
 src/layouts/index.vue                              |  8 ++++----
 src/router/index.ts                                | 14 +++++++-------
 src/router/permission.ts                           | 12 ++++++------
 src/store/modules/app.ts                           |  2 +-
 src/store/modules/permission.ts                    |  2 +-
 src/store/modules/settings.ts                      |  2 +-
 src/store/modules/tags-view.ts                     |  2 +-
 src/store/modules/user.ts                          |  2 +-
 src/utils/cache/local-storage.ts                   |  2 +-
 .../use-fetch-select.vue                           |  6 +++---
 .../use-fullscreen-loading.vue                     |  6 +++---
 .../use-watermark.vue                              |  4 ++--
 src/views/login/{hooks => composables}/useFocus.ts |  0
 src/views/login/index.vue                          |  2 +-
 src/views/table/element-plus/index.vue             |  2 +-
 44 files changed, 60 insertions(+), 60 deletions(-)
 rename src/api/{hook-demo => composable-demo}/use-fetch-select.ts (100%)
 rename src/api/{hook-demo => composable-demo}/use-fullscreen-loading.ts (100%)
 rename src/{hooks => composables}/useDevice.ts (100%)
 rename src/{hooks => composables}/useFetchSelect.ts (100%)
 rename src/{hooks => composables}/useFullscreenLoading.ts (100%)
 rename src/{hooks => composables}/useGreyAndColorWeakness.ts (92%)
 rename src/{hooks => composables}/useLayoutMode.ts (100%)
 rename src/{hooks => composables}/usePagination.ts (100%)
 rename src/{hooks => composables}/useRouteListener.ts (100%)
 rename src/{hooks => composables}/useTheme.ts (98%)
 rename src/{hooks => composables}/useTitle.ts (100%)
 rename src/{hooks => composables}/useWatermark.ts (100%)
 rename src/layouts/{hooks => composables}/useResize.ts (96%)
 rename src/views/{hook-demo => composable-demo}/use-fetch-select.vue (68%)
 rename src/views/{hook-demo => composable-demo}/use-fullscreen-loading.vue (82%)
 rename src/views/{hook-demo => composable-demo}/use-watermark.vue (92%)
 rename src/views/login/{hooks => composables}/useFocus.ts (100%)

diff --git a/.vscode/hook.code-snippets b/.vscode/hook.code-snippets
index 158d9ce9..0a4f2b4e 100644
--- a/.vscode/hook.code-snippets
+++ b/.vscode/hook.code-snippets
@@ -1,16 +1,16 @@
 {
-  "Vue3 Hook 代码结构一键生成": {
-    "prefix": "Vue3 Hook",
+  "Vue3 Composable 代码结构一键生成": {
+    "prefix": "Vue3 Composable",
     "body": [
       "import { ref } from \"vue\"\n",
       "const refName1 = ref<string>(\"这是一个响应式变量\")\n",
-      "export function useHookName() {",
+      "export function useName() {",
       "\tconst refName2 = ref<string>(\"这是一个响应式变量\")\n",
       "\tconst fnName = () => {}\n",
       "\treturn { refName1, refName2, fnName }",
       "}",
       "$1"
     ],
-    "description": "Vue3 Hook"
+    "description": "Vue3 Composable"
   }
 }
diff --git a/README.md b/README.md
index aab275d7..e9ef1921 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@ China repository: [Gitee](https://gitee.com/un-pany/v3-admin-vite)
 - **Multiple layouts**：Left, Top, Left Top, three layout modes
 - **Error page**: 403, 404
 - **Dashboard**: Display different Dashboard pages according to different users
-- **Other functions**：SVG, Dynamic Sidebar, Dynamic Breadcrumb Navigation, Tabbed Navigation, Screenfull, Adaptive Shrink Sidebar, Hook (Composables)
+- **Other functions**：SVG, Dynamic Sidebar, Dynamic Breadcrumb Navigation, Tabbed Navigation, Screenfull, Adaptive Shrink Sidebar, Composable
 
 ## 🚀 Development
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 1f4ef962..eae93265 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -57,7 +57,7 @@ V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案，
 - **多布局**：左侧、顶部、混合, 三种布局模式
 - **错误页面**: 403、404
 - **Dashboard**：根据不同用户显示不同的 Dashboard 页面
-- **其他内置功能**：SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏、Hook（Composables）
+- **其他内置功能**：SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏、Composable
 
 ## 🚀 开发
 
diff --git a/src/App.vue b/src/App.vue
index 8f995ea8..21348635 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useGreyAndColorWeakness } from "@/hooks/useGreyAndColorWeakness"
-import { useTheme } from "@/hooks/useTheme"
+import { useGreyAndColorWeakness } from "@/composables/useGreyAndColorWeakness"
+import { useTheme } from "@/composables/useTheme"
 import { ElNotification } from "element-plus"
 import zhCn from "element-plus/es/locale/lang/zh-cn" // Element Plus 中文包
 
diff --git a/src/api/hook-demo/use-fetch-select.ts b/src/api/composable-demo/use-fetch-select.ts
similarity index 100%
rename from src/api/hook-demo/use-fetch-select.ts
rename to src/api/composable-demo/use-fetch-select.ts
diff --git a/src/api/hook-demo/use-fullscreen-loading.ts b/src/api/composable-demo/use-fullscreen-loading.ts
similarity index 100%
rename from src/api/hook-demo/use-fullscreen-loading.ts
rename to src/api/composable-demo/use-fullscreen-loading.ts
diff --git a/src/components/SearchMenu/SearchFooter.vue b/src/components/SearchMenu/SearchFooter.vue
index 3326057c..3e6828e9 100644
--- a/src/components/SearchMenu/SearchFooter.vue
+++ b/src/components/SearchMenu/SearchFooter.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useDevice } from "@/hooks/useDevice"
+import { useDevice } from "@/composables/useDevice"
 
 interface Props {
   total: number
diff --git a/src/components/SearchMenu/SearchModal.vue b/src/components/SearchMenu/SearchModal.vue
index d8869c59..e39ab1b5 100644
--- a/src/components/SearchMenu/SearchModal.vue
+++ b/src/components/SearchMenu/SearchModal.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ElScrollbar } from "element-plus"
 import type { RouteRecordName, RouteRecordRaw } from "vue-router"
-import { useDevice } from "@/hooks/useDevice"
+import { useDevice } from "@/composables/useDevice"
 import { usePermissionStore } from "@/store/modules/permission"
 import { isExternal } from "@/utils/validate"
 import { ElMessage } from "element-plus"
diff --git a/src/components/ThemeSwitch/index.vue b/src/components/ThemeSwitch/index.vue
index 656da7a1..1c65d009 100644
--- a/src/components/ThemeSwitch/index.vue
+++ b/src/components/ThemeSwitch/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { ThemeName } from "@/hooks/useTheme"
-import { useTheme } from "@/hooks/useTheme"
+import type { ThemeName } from "@/composables/useTheme"
+import { useTheme } from "@/composables/useTheme"
 import { MagicStick } from "@element-plus/icons-vue"
 
 const { themeList, activeThemeName, setTheme } = useTheme()
diff --git a/src/hooks/useDevice.ts b/src/composables/useDevice.ts
similarity index 100%
rename from src/hooks/useDevice.ts
rename to src/composables/useDevice.ts
diff --git a/src/hooks/useFetchSelect.ts b/src/composables/useFetchSelect.ts
similarity index 100%
rename from src/hooks/useFetchSelect.ts
rename to src/composables/useFetchSelect.ts
diff --git a/src/hooks/useFullscreenLoading.ts b/src/composables/useFullscreenLoading.ts
similarity index 100%
rename from src/hooks/useFullscreenLoading.ts
rename to src/composables/useFullscreenLoading.ts
diff --git a/src/hooks/useGreyAndColorWeakness.ts b/src/composables/useGreyAndColorWeakness.ts
similarity index 92%
rename from src/hooks/useGreyAndColorWeakness.ts
rename to src/composables/useGreyAndColorWeakness.ts
index 6c40d225..54d37b2f 100644
--- a/src/hooks/useGreyAndColorWeakness.ts
+++ b/src/composables/useGreyAndColorWeakness.ts
@@ -14,7 +14,7 @@ function initGreyAndColorWeakness() {
   })
 }
 
-/** 灰色模式和色弱模式 hook */
+/** 灰色模式和色弱模式 Composable */
 export function useGreyAndColorWeakness() {
   return { initGreyAndColorWeakness }
 }
diff --git a/src/hooks/useLayoutMode.ts b/src/composables/useLayoutMode.ts
similarity index 100%
rename from src/hooks/useLayoutMode.ts
rename to src/composables/useLayoutMode.ts
diff --git a/src/hooks/usePagination.ts b/src/composables/usePagination.ts
similarity index 100%
rename from src/hooks/usePagination.ts
rename to src/composables/usePagination.ts
diff --git a/src/hooks/useRouteListener.ts b/src/composables/useRouteListener.ts
similarity index 100%
rename from src/hooks/useRouteListener.ts
rename to src/composables/useRouteListener.ts
diff --git a/src/hooks/useTheme.ts b/src/composables/useTheme.ts
similarity index 98%
rename from src/hooks/useTheme.ts
rename to src/composables/useTheme.ts
index ef0acf1e..8901a852 100644
--- a/src/hooks/useTheme.ts
+++ b/src/composables/useTheme.ts
@@ -58,7 +58,7 @@ function initTheme() {
   })
 }
 
-/** 主题 hook */
+/** 主题 Composable */
 export function useTheme() {
   return { themeList, activeThemeName, initTheme, setTheme }
 }
diff --git a/src/hooks/useTitle.ts b/src/composables/useTitle.ts
similarity index 100%
rename from src/hooks/useTitle.ts
rename to src/composables/useTitle.ts
diff --git a/src/hooks/useWatermark.ts b/src/composables/useWatermark.ts
similarity index 100%
rename from src/hooks/useWatermark.ts
rename to src/composables/useWatermark.ts
diff --git a/src/layouts/LeftMode.vue b/src/layouts/LeftMode.vue
index 16a8af3f..9a1a31a0 100644
--- a/src/layouts/LeftMode.vue
+++ b/src/layouts/LeftMode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useDevice } from "@/hooks/useDevice"
-import { useLayoutMode } from "@/hooks/useLayoutMode"
+import { useDevice } from "@/composables/useDevice"
+import { useLayoutMode } from "@/composables/useLayoutMode"
 import { useAppStore } from "@/store/modules/app"
 import { useSettingsStore } from "@/store/modules/settings"
 import { storeToRefs } from "pinia"
diff --git a/src/layouts/components/Breadcrumb/index.vue b/src/layouts/components/Breadcrumb/index.vue
index 09c5358a..205453b0 100644
--- a/src/layouts/components/Breadcrumb/index.vue
+++ b/src/layouts/components/Breadcrumb/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { RouteLocationMatched } from "vue-router"
-import { useRouteListener } from "@/hooks/useRouteListener"
+import { useRouteListener } from "@/composables/useRouteListener"
 import { compile } from "path-to-regexp"
 import { ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
diff --git a/src/layouts/components/Logo/index.vue b/src/layouts/components/Logo/index.vue
index e7cbe37c..d6dec347 100644
--- a/src/layouts/components/Logo/index.vue
+++ b/src/layouts/components/Logo/index.vue
@@ -2,7 +2,7 @@
 import logo from "@/assets/layouts/logo.png?url"
 import logoText1 from "@/assets/layouts/logo-text-1.png?url"
 import logoText2 from "@/assets/layouts/logo-text-2.png?url"
-import { useLayoutMode } from "@/hooks/useLayoutMode"
+import { useLayoutMode } from "@/composables/useLayoutMode"
 
 interface Props {
   collapse?: boolean
diff --git a/src/layouts/components/NavigationBar/index.vue b/src/layouts/components/NavigationBar/index.vue
index 158bd9a1..44dc6a48 100644
--- a/src/layouts/components/NavigationBar/index.vue
+++ b/src/layouts/components/NavigationBar/index.vue
@@ -3,8 +3,8 @@ import Notify from "@/components/Notify/index.vue"
 import Screenfull from "@/components/Screenfull/index.vue"
 import SearchMenu from "@/components/SearchMenu/index.vue"
 import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
-import { useDevice } from "@/hooks/useDevice"
-import { useLayoutMode } from "@/hooks/useLayoutMode"
+import { useDevice } from "@/composables/useDevice"
+import { useLayoutMode } from "@/composables/useLayoutMode"
 import { useAppStore } from "@/store/modules/app"
 import { useSettingsStore } from "@/store/modules/settings"
 import { useUserStore } from "@/store/modules/user"
diff --git a/src/layouts/components/Settings/SelectLayoutMode.vue b/src/layouts/components/Settings/SelectLayoutMode.vue
index 666b25d5..1c3957fc 100644
--- a/src/layouts/components/Settings/SelectLayoutMode.vue
+++ b/src/layouts/components/Settings/SelectLayoutMode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import { useLayoutMode } from "@/composables/useLayoutMode"
 import { LayoutModeEnum } from "@/constants/app-key"
-import { useLayoutMode } from "@/hooks/useLayoutMode"
 
 const { isLeft, isTop, isLeftTop, setLayoutMode } = useLayoutMode()
 </script>
diff --git a/src/layouts/components/Settings/index.vue b/src/layouts/components/Settings/index.vue
index b7869c7d..99f45db0 100644
--- a/src/layouts/components/Settings/index.vue
+++ b/src/layouts/components/Settings/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useLayoutMode } from "@/hooks/useLayoutMode"
+import { useLayoutMode } from "@/composables/useLayoutMode"
 import { useSettingsStore } from "@/store/modules/settings"
 import { removeConfigLayout } from "@/utils/cache/local-storage"
 import { Refresh } from "@element-plus/icons-vue"
diff --git a/src/layouts/components/Sidebar/index.vue b/src/layouts/components/Sidebar/index.vue
index b235b1bf..27c34148 100644
--- a/src/layouts/components/Sidebar/index.vue
+++ b/src/layouts/components/Sidebar/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useDevice } from "@/hooks/useDevice"
-import { useLayoutMode } from "@/hooks/useLayoutMode"
+import { useDevice } from "@/composables/useDevice"
+import { useLayoutMode } from "@/composables/useLayoutMode"
 import { useAppStore } from "@/store/modules/app"
 import { usePermissionStore } from "@/store/modules/permission"
 import { useSettingsStore } from "@/store/modules/settings"
diff --git a/src/layouts/components/TagsView/ScrollPane.vue b/src/layouts/components/TagsView/ScrollPane.vue
index 4d6e4b07..2250e602 100644
--- a/src/layouts/components/TagsView/ScrollPane.vue
+++ b/src/layouts/components/TagsView/ScrollPane.vue
@@ -2,7 +2,7 @@
 import type { ElScrollbar } from "element-plus"
 import type { RouterLink } from "vue-router"
 import Screenfull from "@/components/Screenfull/index.vue"
-import { useRouteListener } from "@/hooks/useRouteListener"
+import { useRouteListener } from "@/composables/useRouteListener"
 import { useSettingsStore } from "@/store/modules/settings"
 import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue"
 import { nextTick, ref } from "vue"
diff --git a/src/layouts/components/TagsView/index.vue b/src/layouts/components/TagsView/index.vue
index 8f75e26b..af9426d9 100644
--- a/src/layouts/components/TagsView/index.vue
+++ b/src/layouts/components/TagsView/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { TagView } from "@/store/modules/tags-view"
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw, RouterLink } from "vue-router"
-import { useRouteListener } from "@/hooks/useRouteListener"
+import { useRouteListener } from "@/composables/useRouteListener"
 import { usePermissionStore } from "@/store/modules/permission"
 import { useTagsViewStore } from "@/store/modules/tags-view"
 import { Close } from "@element-plus/icons-vue"
diff --git a/src/layouts/hooks/useResize.ts b/src/layouts/composables/useResize.ts
similarity index 96%
rename from src/layouts/hooks/useResize.ts
rename to src/layouts/composables/useResize.ts
index 69e011a8..06167e6a 100644
--- a/src/layouts/hooks/useResize.ts
+++ b/src/layouts/composables/useResize.ts
@@ -1,5 +1,5 @@
+import { useRouteListener } from "@/composables/useRouteListener"
 import { DeviceEnum } from "@/constants/app-key"
-import { useRouteListener } from "@/hooks/useRouteListener"
 import { useAppStore } from "@/store/modules/app"
 import { onBeforeMount, onBeforeUnmount, onMounted } from "vue"
 
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 06ce3565..473a72fa 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { useDevice } from "@/hooks/useDevice"
-import { useLayoutMode } from "@/hooks/useLayoutMode"
-import { useWatermark } from "@/hooks/useWatermark"
+import { useDevice } from "@/composables/useDevice"
+import { useLayoutMode } from "@/composables/useLayoutMode"
+import { useWatermark } from "@/composables/useWatermark"
 import { useSettingsStore } from "@/store/modules/settings"
 import { getCssVar, setCssVar } from "@/utils/css"
 import { storeToRefs } from "pinia"
 import { watchEffect } from "vue"
 import { RightPanel, Settings } from "./components"
-import useResize from "./hooks/useResize"
+import useResize from "./composables/useResize"
 import LeftMode from "./LeftMode.vue"
 import LeftTopMode from "./LeftTopMode.vue"
 import TopMode from "./TopMode.vue"
diff --git a/src/router/index.ts b/src/router/index.ts
index f3a028e7..24995c3c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -213,19 +213,19 @@ export const constantRoutes: RouteRecordRaw[] = [
     ]
   },
   {
-    path: "/hook-demo",
+    path: "/composable-demo",
     component: Layouts,
-    redirect: "/hook-demo/use-fetch-select",
-    name: "HookDemo",
+    redirect: "/composable-demo/use-fetch-select",
+    name: "ComposableDemo",
     meta: {
-      title: "Hook",
+      title: "组合式函数",
       elIcon: "Menu",
       alwaysShow: true
     },
     children: [
       {
         path: "use-fetch-select",
-        component: () => import("@/views/hook-demo/use-fetch-select.vue"),
+        component: () => import("@/views/composable-demo/use-fetch-select.vue"),
         name: "UseFetchSelect",
         meta: {
           title: "useFetchSelect"
@@ -233,7 +233,7 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
       {
         path: "use-fullscreen-loading",
-        component: () => import("@/views/hook-demo/use-fullscreen-loading.vue"),
+        component: () => import("@/views/composable-demo/use-fullscreen-loading.vue"),
         name: "UseFullscreenLoading",
         meta: {
           title: "useFullscreenLoading"
@@ -241,7 +241,7 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
       {
         path: "use-watermark",
-        component: () => import("@/views/hook-demo/use-watermark.vue"),
+        component: () => import("@/views/composable-demo/use-watermark.vue"),
         name: "UseWatermark",
         meta: {
           title: "useWatermark"
diff --git a/src/router/permission.ts b/src/router/permission.ts
index 79b0914c..11c65c1e 100644
--- a/src/router/permission.ts
+++ b/src/router/permission.ts
@@ -1,10 +1,10 @@
+import { setRouteChange } from "@/composables/useRouteListener"
+import { useTitle } from "@/composables/useTitle"
 import routeSettings from "@/config/route"
 import isWhiteList from "@/config/white-list"
-import { setRouteChange } from "@/hooks/useRouteListener"
-import { useTitle } from "@/hooks/useTitle"
 import { router } from "@/router"
-import { usePermissionStoreHook } from "@/store/modules/permission"
-import { useUserStoreHook } from "@/store/modules/user"
+import { usePermissionStoreOutside } from "@/store/modules/permission"
+import { useUserStoreOutside } from "@/store/modules/user"
 import { getToken } from "@/utils/cache/cookies"
 import { ElMessage } from "element-plus"
 import NProgress from "nprogress"
@@ -12,8 +12,8 @@ import "nprogress/nprogress.css"
 
 NProgress.configure({ showSpinner: false })
 const { setTitle } = useTitle()
-const userStore = useUserStoreHook()
-const permissionStore = usePermissionStoreHook()
+const userStore = useUserStoreOutside()
+const permissionStore = usePermissionStoreOutside()
 
 router.beforeEach(async (to, _from, next) => {
   NProgress.start()
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 98e1c222..876a954c 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -51,6 +51,6 @@ export const useAppStore = defineStore("app", () => {
  * 在 SPA 应用中可用于在 pinia 实例被激活前使用 store
  * 在 SSR 应用中可用于在 setup 外使用 store
  */
-export function useAppStoreHook() {
+export function useAppStoreOutside() {
   return useAppStore(pinia)
 }
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 0bdc23c8..856a27f9 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -54,6 +54,6 @@ export const usePermissionStore = defineStore("permission", () => {
  * 在 SPA 应用中可用于在 pinia 实例被激活前使用 store
  * 在 SSR 应用中可用于在 setup 外使用 store
  */
-export function usePermissionStoreHook() {
+export function usePermissionStoreOutside() {
   return usePermissionStore(pinia)
 }
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 0d330919..99c6393c 100644
--- a/src/store/modules/settings.ts
+++ b/src/store/modules/settings.ts
@@ -46,6 +46,6 @@ export const useSettingsStore = defineStore("settings", () => {
  * 在 SPA 应用中可用于在 pinia 实例被激活前使用 store
  * 在 SSR 应用中可用于在 setup 外使用 store
  */
-export function useSettingsStoreHook() {
+export function useSettingsStoreOutside() {
   return useSettingsStore(pinia)
 }
diff --git a/src/store/modules/tags-view.ts b/src/store/modules/tags-view.ts
index 95a72679..22273913 100644
--- a/src/store/modules/tags-view.ts
+++ b/src/store/modules/tags-view.ts
@@ -99,6 +99,6 @@ export const useTagsViewStore = defineStore("tags-view", () => {
  * 在 SPA 应用中可用于在 pinia 实例被激活前使用 store
  * 在 SSR 应用中可用于在 setup 外使用 store
  */
-export function useTagsViewStoreHook() {
+export function useTagsViewStoreOutside() {
   return useTagsViewStore(pinia)
 }
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index b81a9b50..e26063a8 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -67,6 +67,6 @@ export const useUserStore = defineStore("user", () => {
  * 在 SPA 应用中可用于在 pinia 实例被激活前使用 store
  * 在 SSR 应用中可用于在 setup 外使用 store
  */
-export function useUserStoreHook() {
+export function useUserStoreOutside() {
   return useUserStore(pinia)
 }
diff --git a/src/utils/cache/local-storage.ts b/src/utils/cache/local-storage.ts
index b4ec7069..ad532b21 100644
--- a/src/utils/cache/local-storage.ts
+++ b/src/utils/cache/local-storage.ts
@@ -1,8 +1,8 @@
 // 统一处理 localStorage
 
+import type { ThemeName } from "@/composables/useTheme"
 import type { LayoutSettings } from "@/config/layouts"
 import type { SidebarClosed, SidebarOpened } from "@/constants/app-key"
-import type { ThemeName } from "@/hooks/useTheme"
 import type { TagView } from "@/store/modules/tags-view"
 import CacheKey from "@/constants/cache-key"
 
diff --git a/src/views/hook-demo/use-fetch-select.vue b/src/views/composable-demo/use-fetch-select.vue
similarity index 68%
rename from src/views/hook-demo/use-fetch-select.vue
rename to src/views/composable-demo/use-fetch-select.vue
index 323b3ef0..ab8d198e 100644
--- a/src/views/hook-demo/use-fetch-select.vue
+++ b/src/views/composable-demo/use-fetch-select.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { getSelectDataApi } from "@/api/hook-demo/use-fetch-select"
-import { useFetchSelect } from "@/hooks/useFetchSelect"
+import { getSelectDataApi } from "@/api/composable-demo/use-fetch-select"
+import { useFetchSelect } from "@/composables/useFetchSelect"
 
 const { loading, options, value } = useFetchSelect({
   api: getSelectDataApi
@@ -9,7 +9,7 @@ const { loading, options, value } = useFetchSelect({
 
 <template>
   <div class="app-container">
-    <h4>该示例是演示：通过 hook 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件</h4>
+    <h4>该示例是演示：通过 composable 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件</h4>
     <h5>Select 示例</h5>
     <el-select v-model="value" :loading="loading" filterable>
       <el-option v-for="(item, index) in options" v-bind="item" :key="index" placeholder="请选择" />
diff --git a/src/views/hook-demo/use-fullscreen-loading.vue b/src/views/composable-demo/use-fullscreen-loading.vue
similarity index 82%
rename from src/views/hook-demo/use-fullscreen-loading.vue
rename to src/views/composable-demo/use-fullscreen-loading.vue
index de6dd62a..36d0e032 100644
--- a/src/views/hook-demo/use-fullscreen-loading.vue
+++ b/src/views/composable-demo/use-fullscreen-loading.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { getErrorApi, getSuccessApi } from "@/api/hook-demo/use-fullscreen-loading"
-import { useFullscreenLoading } from "@/hooks/useFullscreenLoading"
+import { getErrorApi, getSuccessApi } from "@/api/composable-demo/use-fullscreen-loading"
+import { useFullscreenLoading } from "@/composables/useFullscreenLoading"
 import { ElMessage } from "element-plus"
 
 const svg = `
@@ -40,7 +40,7 @@ async function queryError() {
 
 <template>
   <div class="app-container">
-    <h4>该示例是演示：通过将要执行的函数传递给 hook，让 hook 自动开启全屏 loading，函数执行结束后自动关闭 loading</h4>
+    <h4>该示例是演示：通过将要执行的函数传递给 composable，让 composable 自动开启全屏 loading，函数执行结束后自动关闭 loading</h4>
     <el-button type="primary" @click="querySuccess">
       查询成功
     </el-button>
diff --git a/src/views/hook-demo/use-watermark.vue b/src/views/composable-demo/use-watermark.vue
similarity index 92%
rename from src/views/hook-demo/use-watermark.vue
rename to src/views/composable-demo/use-watermark.vue
index ec051830..6b805755 100644
--- a/src/views/hook-demo/use-watermark.vue
+++ b/src/views/composable-demo/use-watermark.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useWatermark } from "@/hooks/useWatermark"
+import { useWatermark } from "@/composables/useWatermark"
 import { ref } from "vue"
 
 const localRef = ref<HTMLElement | null>(null)
@@ -10,7 +10,7 @@ const { setWatermark: setGlobalWatermark, clearWatermark: clearGlobalWatermark }
 <template>
   <div class="app-container">
     <h4>
-      该示例是演示：通过调用 hook，开启或关闭水印，
+      该示例是演示：通过调用 composable 开启或关闭水印，
       支持局部、全局、自定义样式（颜色、透明度、字体大小、字体、倾斜角度等），并自带防御（防删、防隐藏）和自适应功能
     </h4>
     <div ref="localRef" class="local" />
diff --git a/src/views/login/hooks/useFocus.ts b/src/views/login/composables/useFocus.ts
similarity index 100%
rename from src/views/login/hooks/useFocus.ts
rename to src/views/login/composables/useFocus.ts
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 82d4535b..f307fce2 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -8,7 +8,7 @@ import { Key, Loading, Lock, Picture, User } from "@element-plus/icons-vue"
 import { reactive, ref } from "vue"
 import { useRouter } from "vue-router"
 import Owl from "./components/Owl.vue"
-import { useFocus } from "./hooks/useFocus"
+import { useFocus } from "./composables/useFocus"
 
 const router = useRouter()
 const { isFocus, handleBlur, handleFocus } = useFocus()
diff --git a/src/views/table/element-plus/index.vue b/src/views/table/element-plus/index.vue
index b230e073..15e93d41 100644
--- a/src/views/table/element-plus/index.vue
+++ b/src/views/table/element-plus/index.vue
@@ -2,7 +2,7 @@
 import type { CreateOrUpdateTableRequestData, TableData } from "@/api/table/types/table"
 import type { FormInstance, FormRules } from "element-plus"
 import { createTableDataApi, deleteTableDataApi, getTableDataApi, updateTableDataApi } from "@/api/table"
-import { usePagination } from "@/hooks/usePagination"
+import { usePagination } from "@/composables/usePagination"
 import { CirclePlus, Delete, Download, Refresh, RefreshRight, Search } from "@element-plus/icons-vue"
 import { ElMessage, ElMessageBox } from "element-plus"
 import { cloneDeep } from "lodash-es"