refactor: hook 关键字替换为 composable

.vscode/hook.code-snippets

@@ -1,16 +1,16 @@
 {
-  "Vue3 Hook 代码结构一键生成": {
+  "Vue3 Composable 代码结构一键生成": {
-    "prefix": "Vue3 Hook",
+    "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"
   }
 }

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
 

README.zh-CN.md

@@ -57,7 +57,7 @@ V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案，
 - **多布局**：左侧、顶部、混合, 三种布局模式
 - **错误页面**: 403、404
 - **Dashboard**：根据不同用户显示不同的 Dashboard 页面
-- **其他内置功能**：SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏、Hook（Composables）
+- **其他内置功能**：SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏、Composable
 
 ## 🚀 开发
 

src/App.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useGreyAndColorWeakness } from "@/hooks/useGreyAndColorWeakness"
+import { useGreyAndColorWeakness } from "@/composables/useGreyAndColorWeakness"
-import { useTheme } from "@/hooks/useTheme"
+import { useTheme } from "@/composables/useTheme"
 import { ElNotification } from "element-plus"
 import zhCn from "element-plus/es/locale/lang/zh-cn" // Element Plus 中文包
 

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

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"

src/components/ThemeSwitch/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { ThemeName } from "@/hooks/useTheme"
+import type { ThemeName } from "@/composables/useTheme"
-import { useTheme } from "@/hooks/useTheme"
+import { useTheme } from "@/composables/useTheme"
 import { MagicStick } from "@element-plus/icons-vue"
 
 const { themeList, activeThemeName, setTheme } = useTheme()

src/composables/useGreyAndColorWeakness.ts

@@ -14,7 +14,7 @@ function initGreyAndColorWeakness() {
   })
 }
 
-/** 灰色模式和色弱模式 hook */
+/** 灰色模式和色弱模式 Composable */
 export function useGreyAndColorWeakness() {
   return { initGreyAndColorWeakness }
 }

src/composables/useTheme.ts

@@ -58,7 +58,7 @@ function initTheme() {
   })
 }
 
-/** 主题 hook */
+/** 主题 Composable */
 export function useTheme() {
   return { themeList, activeThemeName, initTheme, setTheme }
 }

src/layouts/LeftMode.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useDevice } from "@/hooks/useDevice"
+import { useDevice } from "@/composables/useDevice"
-import { useLayoutMode } from "@/hooks/useLayoutMode"
+import { useLayoutMode } from "@/composables/useLayoutMode"
 import { useAppStore } from "@/store/modules/app"
 import { useSettingsStore } from "@/store/modules/settings"
 import { storeToRefs } from "pinia"

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"

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

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 { useDevice } from "@/composables/useDevice"
-import { useLayoutMode } from "@/hooks/useLayoutMode"
+import { useLayoutMode } from "@/composables/useLayoutMode"
 import { useAppStore } from "@/store/modules/app"
 import { useSettingsStore } from "@/store/modules/settings"
 import { useUserStore } from "@/store/modules/user"

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>

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"

src/layouts/components/Sidebar/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useDevice } from "@/hooks/useDevice"
+import { useDevice } from "@/composables/useDevice"
-import { useLayoutMode } from "@/hooks/useLayoutMode"
+import { useLayoutMode } from "@/composables/useLayoutMode"
 import { useAppStore } from "@/store/modules/app"
 import { usePermissionStore } from "@/store/modules/permission"
 import { useSettingsStore } from "@/store/modules/settings"

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"

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"

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"
 

src/layouts/index.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { useDevice } from "@/hooks/useDevice"
+import { useDevice } from "@/composables/useDevice"
-import { useLayoutMode } from "@/hooks/useLayoutMode"
+import { useLayoutMode } from "@/composables/useLayoutMode"
-import { useWatermark } from "@/hooks/useWatermark"
+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"

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",
+    redirect: "/composable-demo/use-fetch-select",
-    name: "HookDemo",
+    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"

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 { usePermissionStoreOutside } from "@/store/modules/permission"
-import { useUserStoreHook } from "@/store/modules/user"
+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 userStore = useUserStoreOutside()
-const permissionStore = usePermissionStoreHook()
+const permissionStore = usePermissionStoreOutside()
 
 router.beforeEach(async (to, _from, next) => {
   NProgress.start()

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)
 }

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)
 }

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)
 }

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)
 }

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)
 }

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"
 

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 { getSelectDataApi } from "@/api/composable-demo/use-fetch-select"
-import { useFetchSelect } from "@/hooks/useFetchSelect"
+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="请选择" />

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 { getErrorApi, getSuccessApi } from "@/api/composable-demo/use-fullscreen-loading"
-import { useFullscreenLoading } from "@/hooks/useFullscreenLoading"
+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>

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" />

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()

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"