v4.2.0

CHANGELOG.md

@@ -1,5 +1,20 @@
 # CHANGE LOG
 
+## 4.2.0
+
+针对分包，做了全局的重新设计、调整。让包的名称更加语义化；最重要的是，重新抽离了一些全局可能常用的方法，例如：useI18n、useDayjs 等，在以前这些方法存放于对应的包中，其实这样很不合理，所以现在统一存放于 `src/hooks` 包中。并且该包以后统一存放 `hooks` 方法，并不是 `utils` 方法，做了一个本质的区分，所以 `xxxCopilot.ts` 文件中的方法并不会移动，维持存放在原有的模块下。
+
+引入 `useGlobalVariable` 来管理全局变量。与 `pinia` `的使用场景不同，useGlobalVariable` 是用于引入一些全局的响应式变量，这些变量不需要缓存，也不依赖任何插件。一个典型的应用是实现 `GlobalSpin`。使用该方法时，请谨慎使用，避免滥用，因为这些变量会被全局缓存且无法被回收。该方法存放的值，暂不支持缓存（如果有需要，可能后期会增加该功能）。
+
+当项目插件或者需要配置项过多时候，会导致 `vite.config.ts` 文件变得异常臃肿。所以，在本次更新中，将插件的配置单独提出维护（`vite.plugin.confit.ts`）。系统的常用配置依旧在 `cfg.ts` 文件中。所以默认情况下，一般不需要修改 `vite.config.ts` 文件。
+
+### Feats
+
+- 新增 `useGlobalVariable` 管理全局变量（该变量可以是在注册插件之前被调用）
+- `v-disbaled` 指令现在会尝试给元素添加 `disabled` 属性，如果该属性生效的话
+- 注册指令操作现在不会中断程序执行，但是会抛出错误警告
+- 抽离 `vite.plugin.confit.ts` 维护项目启动所需插件
+
 ## 4.1.9
 
 ### Feats

README.md

@@ -1,5 +1,6 @@
-<div align="center"> <a href="https://github.com/XiaoDaiGua-Ray/ray-template"> <img alt="Ray Template" width="200" height="200" src="https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:alist/ray/ray.svg?sign=ZklU9Bh5b6oKp1X0LOhGwkx4g5mW4wk_w9Jt5zlZ5EQ=:0"> </a> <br> <br>
-
+<div align="center">
+ <a href="https://github.com/XiaoDaiGua-Ray/ray-template"> <img alt="Ray Template" width="200" height="200" src="https://usc1.contabostorage.com/c2e495d7890844d392e8ec0c6e5d77eb:alist/ray/ray.svg?sign=ZklU9Bh5b6oKp1X0LOhGwkx4g5mW4wk_w9Jt5zlZ5EQ=:0"> </a> <br> <br>
+ <a href="https://github.com/XiaoDaiGua-Ray/ray-template/blob/main/LICENSE"><img src="https://img.shields.io/github/license/XiaoDaiGua-Ray/ray-template" alt="LICENSE"></a>
 </div>
 
 <div align="center">

cfg.ts

@@ -38,15 +38,12 @@
 
 import path from 'node:path'
 
-import {
-  HTMLTitlePlugin,
-  buildOptions,
-  mixinCSSPlugin,
-} from './vite-plugin/index'
+import { htmlTitlePlugin, mixinCSSPlugin } from './vite-plugins/index'
 import { APP_THEME } from './src/app-config/designConfig'
 import { PRE_LOADING_CONFIG, SIDE_BAR_LOGO } from './src/app-config/appConfig'
 
 import type { AppConfigExport } from '@/types/modules/cfg'
+import type { BuildOptions } from 'vite'
 
 const config: AppConfigExport = {
   /** 公共基础路径配置, 如果为空则会默认以 '/' 填充 */
@@ -82,7 +79,7 @@ const config: AppConfigExport = {
    *
    * 浏览器标题
    */
-  title: HTMLTitlePlugin('Ray Template'),
+  title: htmlTitlePlugin(PRE_LOADING_CONFIG.title || 'Ray Template'),
   /**
    *
    * 配置 HMR 特定选项(端口、主机、路径和协议)
@@ -109,7 +106,39 @@ const config: AppConfigExport = {
    *
    * 打包相关配置
    */
-  buildOptions: buildOptions,
+  buildOptions: (mode: string): BuildOptions => {
+    const outDirMap = {
+      test: 'dist/test-dist',
+      development: 'dist/development-dist',
+      production: 'dist/production-dist',
+      report: 'dist/report-dist',
+    }
+    const dirPath = outDirMap[mode] || 'dist/test-dist'
+
+    if (mode === 'production') {
+      return {
+        outDir: dirPath,
+        sourcemap: false,
+        terserOptions: {
+          compress: {
+            drop_console: true,
+            drop_debugger: true,
+          },
+        },
+      }
+    } else {
+      return {
+        outDir: dirPath,
+        sourcemap: true,
+        terserOptions: {
+          compress: {
+            drop_console: false,
+            drop_debugger: false,
+          },
+        },
+      }
+    }
+  },
   /**
    *
    * 预设别名

src/app-config/appConfig.ts

@@ -33,7 +33,11 @@ export const APP_KEEP_ALIVE: Readonly<AppKeepAlive> = {
   maxKeepAliveLength: 5,
 }
 
-/** 首屏加载信息配置 */
+/**
+ *
+ * 首屏加载信息配置
+ * 其中 title 属性会是默认的浏览器标题（初始化时）
+ */
 export const PRE_LOADING_CONFIG: PreloadingConfig = {
   title: 'Ray Template',
   tagColor: '#ff6700',

src/axios/index.ts

@@ -35,7 +35,10 @@ import type { AppRawRequestConfig } from '@/axios/type'
  * 非 vue effect 中使用
  * @example
  *
+ * // 请求函数
  * const getUser = () => request({ url: 'http://localhost:3000/user' })
+ *
+ * // effect 中使用
  * const { data } = useHookPlusRequest(getUser)
  */
 function useRequest<

src/components/RChart/helper.ts

@@ -13,7 +13,7 @@ import type {
   ChartThemeRawArray,
   ChartThemeRawModules,
   LoadingOptions,
-} from '@/components/RayChart/type'
+} from '@/components/RChart/type'
 
 /**
  *

src/components/RChart/index.tsx

@@ -55,7 +55,7 @@ import type {
   LoadingOptions,
   AutoResize,
   ChartTheme,
-} from '@/components/RayChart/type'
+} from '@/components/RChart/type'
 import type {
   UseResizeObserverReturn,
   MaybeComputedElementRef,

src/components/RCollapseGrid/src/index.tsx

@@ -24,7 +24,7 @@ import './index.scss'
 import { collapseGridProps } from './props'
 
 import { NCard, NGrid, NGridItem, NSpace } from 'naive-ui'
-import RayIcon from '@/components/RayIcon'
+import RayIcon from '@/components/RIcon'
 
 import { call } from '@/utils/vue/index'
 

src/components/RQRCode/src/index.tsx

@@ -12,7 +12,7 @@
 import './index.scss'
 
 import { NButton, NSpin } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 import props from './props'
 import { AwesomeQR } from 'awesome-qr'

src/components/RTable/src/components/TableAction/index.tsx

@@ -10,7 +10,7 @@
  */
 
 import { NPopconfirm, NSpace, NButton, NPopover } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 export type EmitterType = 'positive' | 'negative'
 

src/components/RTable/src/components/TableScreenfull/index.tsx

@@ -12,11 +12,11 @@
 import './index.scss'
 
 import { NPopover } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 import screenfull from 'screenfull'
 
-import type { TableSettingProvider } from '@/components/RayTable/src/type'
+import type { TableSettingProvider } from '@/components/RTable/src/type'
 
 const TableScreenfull = defineComponent({
   name: 'TableScreenfull',

src/components/RTable/src/components/TableSetting/hook.ts

@@ -1,4 +1,4 @@
-import type { ActionOptions } from '@/components/RayTable/src/type'
+import type { ActionOptions } from '@/components/RTable/src/type'
 
 export const setupSettingOptions = (options: ActionOptions[]) => {
   const arr = options.map((curr) => {

src/components/RTable/src/components/TableSetting/index.tsx

@@ -19,7 +19,7 @@
 import './index.scss'
 
 import { NCard, NPopover, NEllipsis } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 import VueDraggable from 'vuedraggable'
 
 import { setupSettingOptions } from './hook'
@@ -30,7 +30,7 @@ import type {
   ActionOptions,
   FixedType,
   TableSettingFixedPopoverIcon,
-} from '@/components/RayTable/src/type'
+} from '@/components/RTable/src/type'
 
 const TableSetting = defineComponent({
   name: 'TableSetting',

src/components/RTable/src/components/TableSize/index.tsx

@@ -12,11 +12,11 @@
 import './index.scss'
 
 import { NPopover, NCard } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 import { call } from '@/utils/vue/index'
 
-import type { TableSettingProvider } from '@/components/RayTable/src/type'
+import type { TableSettingProvider } from '@/components/RTable/src/type'
 import type { ComponentSize } from '@/types/modules/component'
 import type { MaybeArray } from '@/types/modules/utils'
 

src/dayjs/index.ts

@@ -10,30 +10,9 @@
  */
 
 import dayjs from 'dayjs'
-import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config/localConfig'
+import { DEFAULT_DAYJS_LOCAL } from '@/app-config/localConfig'
 import 'dayjs/locale/zh-cn'
 
-import type { DayjsLocal } from './type'
-
 export const setupDayjs = () => {
   dayjs.locale(DEFAULT_DAYJS_LOCAL)
 }
-
-/**
- *
- * dayjs hook
- *
- * 说明:
- *   - locale: 切换 dayjs 语言配置
- */
-export const useDayjs = () => {
-  const locale = (key: DayjsLocal) => {
-    const mapkey = DAYJS_LOCAL_MAP[key]
-
-    mapkey ? dayjs.locale(mapkey) : dayjs.locale(DEFAULT_DAYJS_LOCAL)
-  }
-
-  return {
-    locale,
-  }
-}

src/directives/index.ts

@@ -33,17 +33,20 @@ export const setupDirectives = (app: App<Element>) => {
   // 将所有的包提取出来(./modules/[file-name]/index.ts)
   const directivesModules = combineDirective(directiveRawModules)
   // 提取文件名(./modules/copy/index.ts => copy)
-  const reg = /(?<=modules\/).*(?=\/index\.ts)/
+  const regexExtractDirectiveName = /(?<=modules\/).*(?=\/index\.ts)/
+  // 匹配合法指令名称
+  const regexDirectiveName = /^([^-]+-)*[^-]+$/
 
   forIn(directivesModules, (value, key) => {
-    const dname = key.match(reg)?.[0]
+    const dname = key.match(regexExtractDirectiveName)?.[0]
 
-    if (isValueType<string>(dname, 'String')) {
+    if (
+      isValueType<string>(dname, 'String') &&
+      regexDirectiveName.test(dname)
+    ) {
       app.directive(dname, value?.())
     } else {
-      throw new Error(
-        'directiveName is not string, please check your directive file name',
-      )
+      console.error(`[setupDirectives] ${dname} is not a valid directive name`)
     }
   })
 }

src/directives/modules/debounce/index.ts

@@ -17,7 +17,6 @@
 import { debounce } from 'lodash-es'
 import { on, off } from '@use-utils/element'
 
-import type { Directive } from 'vue'
 import type { DebounceBindingOptions } from './type'
 import type { AnyFC } from '@/types/modules/utils'
 import type { DebouncedFunc } from 'lodash-es'

src/directives/modules/disabled/index.ts

@@ -22,7 +22,16 @@ const updateElementDisabledType = (el: HTMLElement, value: boolean) => {
   if (el) {
     const classes = 'ray-template__directive--disabled'
 
-    value ? addClass(el, classes) : removeClass(el, classes)
+    if (value) {
+      el.setAttribute('disabled', 'disabled')
+
+      addClass(el, classes)
+    } else {
+      el.removeAttribute('disabled')
+
+      removeClass(el, classes)
+    }
+
     el?.setAttribute('disabled', value ? 'disabled' : '')
   }
 }

src/directives/modules/throttle/index.ts

@@ -17,7 +17,6 @@
 import { throttle } from 'lodash-es'
 import { on, off } from '@use-utils/element'
 
-import type { Directive } from 'vue'
 import type { ThrottleBindingOptions } from './type'
 import type { AnyFC } from '@/types/modules/utils'
 import type { DebouncedFunc } from 'lodash-es'

src/hooks/variable/index.ts

@@ -0,0 +1,18 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-09-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import {
+  setVariable,
+  getVariable,
+  globalVariableToRefs,
+} from './useGlobalVariable'
+
+export { setVariable, getVariable, globalVariableToRefs }

src/hooks/variable/useGlobalVariable.ts

@@ -0,0 +1,40 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-09-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+/**
+ *
+ * 存放全局临时变量，脱离 pinia 使用的变量
+ * 简单的全局变量，并不需要复杂的控制流程
+ *
+ * 但不建议滥用
+ */
+
+/** 全局响应式变量 */
+const variableState = reactive({
+  globalSpinning: false,
+})
+
+type VariableStateKey = keyof typeof variableState
+
+export function setVariable(
+  key: VariableStateKey,
+  value: (typeof variableState)[VariableStateKey],
+) {
+  variableState[key] = value
+}
+
+export function getVariable(key: VariableStateKey) {
+  return variableState[key] as (typeof variableState)[VariableStateKey]
+}
+
+export function globalVariableToRefs<K extends VariableStateKey>(key: K) {
+  return toRef<typeof variableState, K>(variableState, key)
+}

src/hooks/web/index.ts

@@ -0,0 +1,16 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-09-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { useI18n, t } from './useI18n'
+import { useVueRouter } from '../web/useVueRouter'
+import { useDayjs } from '../web/useDayjs'
+
+export { useI18n, useVueRouter, useDayjs, t }

src/hooks/web/useDayjs.ts

@@ -0,0 +1,34 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-09-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import dayjs from 'dayjs'
+import { DEFAULT_DAYJS_LOCAL, DAYJS_LOCAL_MAP } from '@/app-config/localConfig'
+
+import type { DayjsLocal } from '@/dayjs/type'
+
+/**
+ *
+ * dayjs hook
+ *
+ * 说明:
+ *   - locale: 切换 dayjs 语言配置
+ */
+export const useDayjs = () => {
+  const locale = (key: DayjsLocal) => {
+    const mapkey = DAYJS_LOCAL_MAP[key]
+
+    mapkey ? dayjs.locale(mapkey) : dayjs.locale(DEFAULT_DAYJS_LOCAL)
+  }
+
+  return {
+    locale,
+  }
+}

src/hooks/web/useI18n.ts

@@ -1,4 +1,15 @@
-import { i18n } from './index'
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-09-11
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import { i18n } from '@/locales/index'
 
 import type { WritableComputedRef } from 'vue'
 

src/layout/components/Menu/components/SiderBarLogo/index.tsx

@@ -11,8 +11,8 @@
 
 import './index.scss'
 
-import { NEllipsis } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import { NEllipsis, NPopover } from 'naive-ui'
+import RayIcon from '@/components/RIcon/index'
 
 const SiderBarLogo = defineComponent({
   name: 'SiderBarLogo',
@@ -37,9 +37,14 @@ const SiderBarLogo = defineComponent({
       }
     }
 
+    const TemplateLogo = ({ cursor }: { cursor: string }) => (
+      <RayIcon name={sideBarLogo!.icon as string} size="30" cursor={cursor} />
+    )
+
     return {
       sideBarLogo,
       handleSideBarLogoClick,
+      TemplateLogo,
     }
   },
   render() {
@@ -47,27 +52,32 @@ const SiderBarLogo = defineComponent({
       <div
         class={[
           'ray-menu__logo',
-          this.sideBarLogo?.url ? 'ray-menu__logo-url' : '',
+          this.sideBarLogo?.url ? 'ray-menu__logo-url' : null,
         ]}
         onClick={this.handleSideBarLogoClick.bind(this)}
       >
         {this.sideBarLogo?.icon ? (
-          <RayIcon name={this.sideBarLogo.icon} size="30" />
-        ) : (
-          ''
-        )}
+          this.collapsed ? (
+            <NPopover placement="right">
+              {{
+                trigger: () => <this.TemplateLogo cursor="pointer" />,
+                default: () => this.sideBarLogo?.title,
+              }}
+            </NPopover>
+          ) : (
+            <this.TemplateLogo cursor="pointer" />
+          )
+        ) : null}
         <h1
           class={[
-            !this.collapsed ? 'ray-menu__logo-title--open' : '',
+            !this.collapsed ? 'ray-menu__logo-title--open' : null,
             'ray-menu__logo-title',
           ]}
         >
           <NEllipsis>{this.sideBarLogo?.title}</NEllipsis>
         </h1>
       </div>
-    ) : (
-      ''
-    )
+    ) : null
   },
 })
 

src/layout/components/MenuTag/index.tsx

@@ -26,7 +26,7 @@
 import './index.scss'
 
 import { NScrollbar, NTag, NSpace, NLayoutHeader, NDropdown } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 import { useMenu, useSetting } from '@/store'
 import { uuid } from '@/utils/hook'

src/layout/components/SiderBar/components/GlobalSeach/index.tsx

@@ -12,7 +12,7 @@
 import './index.scss'
 
 import { NInput, NModal, NResult, NScrollbar, NSpace } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 import { on, off, queryElements, addClass, removeClass } from '@/utils/element'
 import { debounce } from 'lodash-es'

src/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index.tsx

@@ -10,10 +10,10 @@
  */
 
 import { NSpace, NSwitch, NTooltip } from 'naive-ui'
-import RayIcon from '@/components/RayIcon'
+import RayIcon from '@/components/RIcon'
 
 import { useSetting } from '@/store'
-import { useI18n } from '@/locales/useI18n'
+import { useI18n } from '@/hooks/web/index'
 
 const ThemeSwitch = defineComponent({
   name: 'ThemeSwitch',

src/layout/components/SiderBar/components/SettingDrawer/index.tsx

@@ -15,7 +15,7 @@ import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/c
 
 import { APP_THEME } from '@/app-config/designConfig'
 import { useSetting } from '@/store'
-import { useI18n } from '@/locales/useI18n'
+import { useI18n } from '@/hooks/web/index'
 
 import type { PropType } from 'vue'
 import type { Placement } from '@/types/modules/component'

src/layout/components/SiderBar/components/TooltipIcon/index.tsx

@@ -12,7 +12,7 @@
 import './index.scss'
 
 import { NTooltip } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 import { tooltipProps } from 'naive-ui'
 

src/layout/components/SiderBar/index.tsx

@@ -20,7 +20,7 @@
 import './index.scss'
 
 import { NLayoutHeader, NSpace, NTooltip, NDropdown } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 import TootipIcon from '@/layout/components/SiderBar/components/TooltipIcon/index'
 import SettingDrawer from './components/SettingDrawer/index'
 import Breadcrumb from './components/Breadcrumb/index'
@@ -31,7 +31,7 @@ import { useSetting } from '@/store'
 import { LOCAL_OPTIONS } from '@/app-config/localConfig'
 import { useAvatarOptions, avatarDropdownClick } from './hook'
 import screenfull from 'screenfull'
-import { useI18n } from '@/locales/useI18n'
+import { useI18n } from '@/hooks/web/index'
 
 import type { IconEventMapOptions, IconEventMap } from './type'
 

src/layout/default/ContentWrapper/index.tsx

@@ -18,7 +18,7 @@
 import './index.scss'
 
 import { NSpin } from 'naive-ui'
-import RayTransitionComponent from '@/components/RayTransitionComponent/index.vue'
+import RTransitionComponent from '@/components/RTransitionComponent/index.vue'
 import AppRequestCancelerProvider from '@/app-components/provider/AppRequestCancelerProvider/index'
 
 import { useSetting } from '@/store'
@@ -66,7 +66,7 @@ const ContentWrapper = defineComponent({
       >
         <AppRequestCancelerProvider />
         {this.reloadRouteSwitch ? (
-          <RayTransitionComponent
+          <RTransitionComponent
             class="content-wrapper"
             transitionPropName={this.contentTransition + '-transform'}
           />

src/layout/index.tsx

@@ -60,9 +60,7 @@ const RLayout = defineComponent({
           <HeaderWrapper ref="layoutSiderBarRef" />
           {this.modelMenuTagSwitch ? (
             <FeatureWrapper ref="layoutMenuTagRef" />
-          ) : (
-            ''
-          )}
+          ) : null}
           <NLayoutContent
             ref="LAYOUT_CONTENT_REF"
             class="r-layout-full__viewer-content"
@@ -73,9 +71,7 @@ const RLayout = defineComponent({
           {this.footerSwitch ? <FooterWrapper ref="layoutFooterRef" /> : ''}
         </NLayoutContent>
       </NLayout>
-    ) : (
-      ''
-    )
+    ) : null
   },
 })
 

src/router/README.md

@@ -5,7 +5,7 @@
 > router modules 包中的路由模块会与菜单一一映射，也就是说，路由模块的配置结构会影响菜单的展示。当你有子菜单需要配置时，你需要使用该组件。
 
 ```ts
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/helper/routerCopilot.ts

@@ -12,7 +12,7 @@
 import { permissionRouter } from './permission'
 import { SETUP_ROUTER_ACTION, SUPER_ADMIN } from '@/app-config/routerConfig'
 import { useSignin } from '@/store'
-import { useVueRouter } from '@/router/helper/useVueRouter'
+import { useVueRouter } from '@/hooks/web/index'
 import { ROOT_ROUTE } from '@/app-config/appConfig'
 import { setStorage } from '@/utils/cache'
 import { getAppEnvironment } from '@/utils/hook'

src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { scrollViewToTop } from '@/router/helper/helper'
 import { vueRouterRegister } from '@/router/helper/routerCopilot'
-import { useVueRouter } from '@/router/helper/useVueRouter'
+import { useVueRouter } from '@/hooks/web/index'
 
 import constantRoutes from './routes'
 

src/router/modules/dashboard.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/axios.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/directive.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/doc.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/echart.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/iframe.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'
 

src/router/modules/demo/mock.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/multi-menu.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/precision.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/qrcode.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/rely.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/router-demo.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/scroll-reveal.ts

@@ -4,7 +4,7 @@
  * 所以暂时隐藏该页面
  */
 
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/svg-icons.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/demo/table.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/modules/error404.ts

@@ -1,4 +1,4 @@
-import { t } from '@/locales/useI18n'
+import { t } from '@/hooks/web/index'
 import { LAYOUT } from '@/router/constant/index'
 
 import type { AppRouteRecordRaw } from '@/router/type'

src/router/routes.ts

@@ -1,5 +1,5 @@
 import Layout from '@/layout/index'
-import { getAppRawRoutes } from './routeModules'
+import { getAppRawRoutes } from './appRouteModules'
 import { ROOT_ROUTE } from '@/app-config/appConfig'
 import { expandRoutes } from '@/router/helper/expandRoutes'
 

src/spin/hook.ts

@@ -1,9 +0,0 @@
-export const spinValue = ref(false)
-
-/**
- *
- * @param bool has spin
- *
- * @remark 使用 spin 全屏加载效果工具函数
- */
-export const setSpin = (bool: boolean) => (spinValue.value = bool)

src/spin/index.tsx

@@ -16,8 +16,8 @@
  * 基于 Naive UI Spin 组件
  *
  * 使用方法
- *   1. import { setSpin } from '@/spin'
- *   2. setSpin(true) | setSpin(false)
+ *   1. import { setVariable } from '@/hooks/variable/index'
+ *   2. setVariable('globalSpinning', true) | setVariable('globalSpinning', false)
  *
  * 仅需按照上述步骤实现全屏加载动画
  *
@@ -29,9 +29,7 @@
 import { NSpin } from 'naive-ui'
 
 import { spinProps } from 'naive-ui'
-import { spinValue } from './hook'
-
-export { setSpin } from './hook'
+import { globalVariableToRefs } from '@/hooks/variable/index'
 
 const GlobalSpin = defineComponent({
   name: 'GlobalSpin',
@@ -42,6 +40,7 @@ const GlobalSpin = defineComponent({
     const overrides = {
       opacitySpinning: '0.3',
     }
+    const spinValue = globalVariableToRefs('globalSpinning')
 
     return {
       spinValue,

src/store/modules/menu/helper.ts

@@ -12,7 +12,7 @@
 /** 本方法感谢 <https://yunkuangao.me/> 的支持 */
 
 import { APP_MENU_CONFIG, ROOT_ROUTE } from '@/app-config/appConfig'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 import { isValueType } from '@/utils/hook'
 import { getStorage, setStorage } from '@/utils/cache'
 
@@ -164,6 +164,7 @@ export const hasMenuIcon = (option: AppMenuOption) => {
     {
       name: meta!.icon as string,
       size: APP_MENU_CONFIG.MENU_COLLAPSED_ICON_SIZE,
+      cursor: 'pointer',
     },
     {},
   )

src/store/modules/menu/index.ts

@@ -32,10 +32,10 @@ import {
   hasMenuIcon,
   getCatchMenuKey,
 } from './helper'
-import { useI18n } from '@/locales/useI18n'
-import { getAppRawRoutes } from '@/router/routeModules'
+import { useI18n } from '@/hooks/web/index'
+import { getAppRawRoutes } from '@/router/appRouteModules'
 import { useKeepAlive } from '@/store'
-import { useVueRouter } from '@/router/helper/useVueRouter'
+import { useVueRouter } from '@/hooks/web/index'
 
 import type { AppRouteMeta, AppRouteRecordRaw } from '@/router/type'
 import type {

src/store/modules/setting/index.ts

@@ -2,9 +2,9 @@ import { getAppDefaultLanguage } from '@/locales/helper'
 import { setStorage } from '@use-utils/cache'
 import { set } from 'lodash-es'
 import { addClass, removeClass, colorToRgba } from '@/utils/element'
-import { useI18n } from '@/locales/useI18n'
+import { useI18n } from '@/hooks/web/index'
 import { APP_THEME } from '@/app-config/designConfig'
-import { useDayjs } from '@/dayjs/index'
+import { useDayjs } from '@/hooks/web/index'
 
 import type { ConditionalPick } from '@/types/modules/helper'
 import type { SettingState } from '@/store/modules/setting/type'

src/views/dashboard/index.tsx

@@ -9,7 +9,7 @@ import {
   NP,
   NH6,
 } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 import RayLink from '@/app-components/app/RayLink/index'
 
 const Dashboard = defineComponent({

src/views/demo/doc/index.tsx

@@ -9,7 +9,7 @@
  * @remark 今天也是元气满满撸代码的一天
  */
 
-import RayIframe from '@/components/RayIframe/index'
+import RayIframe from '@/components/RIframe/index'
 
 const RTemplateDoc = defineComponent({
   name: 'RTemplateDoc',

src/views/demo/echart/index.tsx

@@ -1,12 +1,12 @@
 import './index.scss'
 
 import { NCard, NSwitch, NSpace, NP, NH2, NButton } from 'naive-ui'
-import RayChart from '@/components/RayChart/index'
+import RayChart from '@/components/RChart/index'
 
 import dayjs from 'dayjs'
 
 import type { ECharts } from 'echarts/core'
-import type { RayChartInst } from '@/components/RayChart/index'
+import type { RayChartInst } from '@/components/RChart/index'
 
 const Echart = defineComponent({
   name: 'REchart',

src/views/demo/iframe/index.tsx

@@ -18,7 +18,7 @@
  */
 
 import { NCard, NSpace } from 'naive-ui'
-import RayIframe from '@/components/RayIframe/index'
+import RayIframe from '@/components/RIframe/index'
 
 const IframeDemo = defineComponent({
   name: 'IframeDemo',

src/views/demo/mock-demo/index.tsx

@@ -10,8 +10,8 @@
  */
 
 import { NSpace, NCard, NButton, NFormItemGi, NInput, NForm } from 'naive-ui'
-import RayTable from '@/components/RayTable/index'
-import RayCollapseGrid from '@/components/RayCollapseGrid/index'
+import RayTable from '@/components/RTable/index'
+import RayCollapseGrid from '@/components/RCollapseGrid/index'
 
 import { useHookPlusRequest } from '@/axios/index'
 import { getPersonList } from '@/axios/api/demo/mock/person'

src/views/demo/qrcode/index.tsx

@@ -10,11 +10,11 @@
  */
 
 import { NSpace, NCard, NButton } from 'naive-ui'
-import RayQRcode from '@/components/RayQRCode/index'
+import RayQRcode from '@/components/RQRCode/index'
 
 import LOGO from '@/assets/images/ray.svg'
 
-import type { QRCodeStatus, QRCodeInst } from '@/components/RayQRCode/index'
+import type { QRCodeStatus, QRCodeInst } from '@/components/RQRCode/index'
 
 const RQRCode = defineComponent({
   name: 'RQRCode',

src/views/demo/router-demo/router-demo-home/index.tsx

@@ -10,7 +10,7 @@
  */
 
 import { NSpace, NDataTable, NButton } from 'naive-ui'
-import RayTable from '@/components/RayTable/index'
+import RayTable from '@/components/RTable/index'
 
 import type { DataTableColumns } from 'naive-ui'
 

src/views/demo/svg-icons/index.tsx

@@ -12,7 +12,7 @@
 import './index.scss'
 
 import { NSpace, NCard, NPopover } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 const PreviewSVGIcons = defineComponent({
   name: 'PreviewSVGIcons',

src/views/demo/table/index.tsx

@@ -24,11 +24,11 @@ import {
   NLi,
   NSpace,
 } from 'naive-ui'
-import RayTable from '@/components/RayTable/index'
-import RayCollapseGrid from '@/components/RayCollapseGrid/index'
+import RayTable from '@/components/RTable/index'
+import RayCollapseGrid from '@/components/RCollapseGrid/index'
 
 import type { DataTableColumns } from 'naive-ui'
-import type { RayTableInst } from '@/components/RayTable/index'
+import type { RayTableInst } from '@/components/RTable/index'
 
 type RowData = {
   key: number

src/views/login/components/QRCodeSignin/index.tsx

@@ -11,7 +11,7 @@
 
 import './index.scss'
 
-import RayQRcode from '@/components/RayQRCode/index'
+import RayQRcode from '@/components/RQRCode/index'
 
 import LOGO from '@/assets/images/ray.svg'
 

src/views/login/components/SSOSignin/index.tsx

@@ -19,7 +19,7 @@
 import './index.scss'
 
 import { NSpace, NPopover } from 'naive-ui'
-import RayIcon from '@/components/RayIcon/index'
+import RayIcon from '@/components/RIcon/index'
 
 interface SSOSigninOptions {
   icon: string

src/views/login/components/Signin/index.tsx

@@ -1,11 +1,11 @@
 import { NForm, NFormItem, NInput, NButton, NSpace, NDivider } from 'naive-ui'
 
 import { setStorage } from '@/utils/cache'
-import { setSpin } from '@/spin'
 import { useSignin } from '@/store'
-import { useI18n } from '@/locales/useI18n'
+import { useI18n } from '@/hooks/web/index'
 import { APP_CATCH_KEY, ROOT_ROUTE } from '@/app-config/appConfig'
-import { useVueRouter } from '@/router/helper/useVueRouter'
+import { useVueRouter } from '@/hooks/web/index'
+import { setVariable } from '@/hooks/variable/index'
 
 import type { FormInst } from 'naive-ui'
 
@@ -45,13 +45,13 @@ const Signin = defineComponent({
     const handleLogin = () => {
       loginFormRef.value?.validate((valid) => {
         if (!valid) {
-          setSpin(true)
+          setVariable('globalSpinning', true)
 
           signin(signinForm.value)
             .then((res) => {
               if (res.code === 0) {
                 setTimeout(() => {
-                  setSpin(false)
+                  setVariable('globalSpinning', false)
 
                   window.$message.success(`欢迎${signinForm.value.name}登陆~`)
 

src/views/login/index.scss

@@ -2,6 +2,7 @@ $positionX: 24px;
 $positionY: 24px;
 
 .login {
+  width: 100%;
   display: flex;
 
   & .login-wrapper {

src/views/login/index.tsx

@@ -15,13 +15,13 @@ import Signin from './components/Signin/index'
 import Register from './components/Register/index'
 import QRCodeSignin from './components/QRCodeSignin/index'
 import SSOSignin from './components/SSOSignin/index'
-import RayIcon from '@/components/RayIcon'
+import RayIcon from '@/components/RIcon'
 import RayLink from '@/app-components/app/RayLink/index'
 import ThemeSwitch from '@/layout/components/SiderBar/components/SettingDrawer/components/ThemeSwitch/index'
 
 import { useSetting } from '@/store'
 import { LOCAL_OPTIONS } from '@/app-config/localConfig'
-import { useI18n } from '@/locales/useI18n'
+import { useI18n } from '@/hooks/web/index'
 
 const Login = defineComponent({
   name: 'RLogin',
@@ -88,6 +88,7 @@ const Login = defineComponent({
                   customClassName="login-icon"
                   name="language"
                   size="18"
+                  cursor="pointer"
                 />
               </NDropdown>
             </NSpace>