fixed: 一些小的细节改动

.eslintrc.cjs

@@ -56,7 +56,6 @@ module.exports = {
     ],
     'accessor-pairs': 2, // 强制同时存在 `get` 与 `set`
     'constructor-super': 0, // 强制子类构造函数中使用 `super` 调用父类的构造函数
-    curly: [2, 'all'], // `if`、`else` 强制使用 `{}` 包裹
     'default-case': 2, // `switch` 中强制含有 `default`
     eqeqeq: [2, 'allow-null'], // 强制使用严格判断 `===`
     'no-alert': 0, // 禁止使用 `alert`、`confirm`
@@ -113,6 +112,7 @@ module.exports = {
     'use-isnan': 2, // 强制使用 isNaN 判断 NaN
     'no-multi-assign': 2, // 禁止连续声明变量
     'prefer-arrow-callback': 2, // 强制使用箭头函数作为回调
+    curly: ['error', 'all'],
     'vue/multi-word-component-names': [
       'error',
       {
@@ -166,5 +166,21 @@ module.exports = {
       },
     ],
     'vue/no-unused-refs': ['error'],
+    'vue/prop-name-casing': ['error', 'camelCase'],
+    'vue/component-options-name-casing': ['error', 'camelCase'],
+    'vue/attribute-hyphenation': [
+      'error',
+      'never',
+      {
+        ignore: [],
+      },
+    ],
+    'vue/no-restricted-static-attribute': [
+      'error',
+      {
+        key: 'key',
+        message: 'Disallow using key as a custom attribute',
+      },
+    ],
   },
 }

src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx

@@ -84,8 +84,6 @@ const UnlockScreen = defineComponent({
       })
     }
 
-    autoFouceInput(inputInstRef)
-
     onBeforeUnmount(() => {
       clearInterval(dayInterval)
       clearInterval(yearInterval)

src/components/AppComponents/AppLockScreen/index.tsx

@@ -41,7 +41,7 @@ const AppLockScreen = defineComponent({
     return (
       <NModal
         v-model:show={this.lockScreenSwitch}
-        transform-origin="center"
+        transformOrigin="center"
         show
         maskClosable={false}
         closeOnEsc={false}

src/components/RayIcon/index.scss

@@ -11,8 +11,9 @@
   fill: currentColor;
   transform: translateZ(0);
   opacity: var(--ray-icon-depth);
+  cursor: var(--ray-icon-cursor);
 
-  & svg[rayIconAttribute="ray-icon"] {
+  & svg[RayIconAttribute="ray-icon"] {
     width: var(--ray-icon-width);
     height: var(--ray-icon-height);
   }

src/components/RayIcon/index.tsx

@@ -48,10 +48,10 @@ const RayIcon = defineComponent({
       type: Number,
       default: 1,
     },
-    cursorPointer: {
-      /** 是否启用小手鼠标类型 */
-      type: Boolean,
-      default: false,
+    cursor: {
+      /** 鼠标指针样式 */
+      type: String,
+      default: 'default',
     },
   },
   emits: ['click'],
@@ -69,10 +69,7 @@ const RayIcon = defineComponent({
           ? props.height + 'px'
           : props.size + 'px',
         '--ray-icon-depth': props.depth,
-      }
-
-      if (props.cursorPointer) {
-        cssVar['cursor'] = 'pointer'
+        '--ray-icon-cursor': props.cursor,
       }
 
       return cssVar
@@ -97,7 +94,7 @@ const RayIcon = defineComponent({
         onClick={this.handleClick.bind(this)}
       >
         <svg
-          {...({ rayIconAttribute: 'ray-icon', ariaHidden: true } as object)}
+          {...({ RayIconAttribute: 'ray-icon', ariaHidden: true } as object)}
         >
           <use {...{ 'xlink:href': this.symbolId }} fill={this.modelColor} />
         </svg>

src/layout/components/SiderBar/Components/TooltipIcon/index.scss

@@ -1,4 +1,4 @@
-.ray-tooltip-text__icon {
+.tooltip-text__icon {
   cursor: pointer;
   outline: none;
   border: none;

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

@@ -16,8 +16,8 @@ import RayIcon from '@/components/RayIcon/index'
 
 import { tooltipProps } from 'naive-ui'
 
-const RayTooltipIcon = defineComponent({
-  name: 'RayTooltipIcon',
+const TooltipIcon = defineComponent({
+  name: 'TooltipIcon',
   props: {
     ...tooltipProps,
     iconName: {
@@ -38,7 +38,6 @@ const RayTooltipIcon = defineComponent({
     const handleClick = (e?: MouseEvent) => {
       emit('click', e)
     }
-
     return {
       handleClick,
     }
@@ -51,7 +50,7 @@ const RayTooltipIcon = defineComponent({
             <RayIcon
               name={this.iconName}
               size="18"
-              customClassName={`ray-tooltip-text__icon ${this.customClassName}`}
+              customClassName={`tooltip-text__icon ${this.customClassName}`}
               onClick={this.handleClick.bind(this)}
             />
           ),
@@ -62,4 +61,4 @@ const RayTooltipIcon = defineComponent({
   },
 })
 
-export default RayTooltipIcon
+export default TooltipIcon

src/layout/components/SiderBar/index.tsx

@@ -11,15 +11,16 @@
 
 /**
  *
- * 该页面使用了 RayTooltipIcon 组件, 这个组件其实并不合理
- * 所以在后续的小版本中会舍弃这个组件
+ * 本来想通过写数据配置化的方式实现顶部的功能小按钮, 结果事实发现...
+ *
+ * 但是我又不想改, 就这样吧
  */
 
 import './index.scss'
 
 import { NLayoutHeader, NSpace, NTooltip, NDropdown } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
-import RayTooltipIcon from '@/components/RayTooltipIcon/index'
+import TootipIcon from '@/layout/components/SiderBar/components/TooltipIcon/index'
 import SettingDrawer from './components/SettingDrawer/index'
 import Breadcrumb from './components/Breadcrumb/index'
 import GlobalSeach from './components/GlobalSeach/index'
@@ -35,13 +36,6 @@ import { APP_CATCH_KEY } from '@/appConfig/appConfig'
 
 import type { IconEventMapOptions, IconEventMap } from './type'
 
-/**
- *
- * 本来想通过写数据配置化的方式实现顶部的功能小按钮, 结果事实发现...
- *
- * 但是我又不想改, 就这样吧
- */
-
 const SiderBar = defineComponent({
   name: 'SiderBar',
   setup() {
@@ -130,8 +124,6 @@ const SiderBar = defineComponent({
       iconEventMap[key]?.()
     }
 
-    // expose({})
-
     return {
       leftIconOptions,
       rightTooltipIconOptions,
@@ -183,7 +175,7 @@ const SiderBar = defineComponent({
             itemStyle={this.spaceItemStyle}
           >
             {this.rightTooltipIconOptions.map((curr) => (
-              <RayTooltipIcon
+              <TootipIcon
                 iconName={curr.name}
                 tooltipText={curr.tooltip}
                 onClick={this.handleIconClick.bind(this, curr.name)}

src/locales/README.md

@@ -12,7 +12,7 @@
 
 #### 注意
 
-> 该项目语言包使用 json 格式作为语言包管理格式
+> 该项目语言包使用 json 格式作为语言包管理格式，为了配合 `@intlify/unplugin-vue-i18n/vite` 插件，故而采用 json。
 
 #### 拓展方法
 
@@ -22,7 +22,7 @@
 
 ### helper 文件说明
 
-- `getAppLocales` 获取系统所有语言包
+- `getAppLocales` 获取系统所有语言包（该方法强制依赖 LOCAL_OPTIONS key 配置，意味着你在配置语言包的时候，key 必须与 `src/locales/lang/xxx.ts` 一一对应匹配）
 - `naiveLocales` 获取 `naive-ui` 组件库对应语言包文件
 - `getDefaultLocal` 获取系统当前默认语言包
 

src/store/modules/setting/index.ts

@@ -16,11 +16,11 @@ export const useSetting = defineStore(
     const {
       appPrimaryColor: { primaryColor },
     } = __APP_CFG__ // 默认主题色
-    const { t, locale } = useI18n()
+    const { locale } = useI18n()
     const { locale: dayjsLocal } = useDayjs()
 
     const settingState = reactive<SettingState>({
-      drawerPlacement: 'right' as NaiveDrawerPlacement,
+      drawerPlacement: 'right',
       primaryColorOverride: {
         ...APP_NAIVE_UI_THEME_OVERRIDES,
         common: {

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

@@ -67,7 +67,7 @@ const SSOSignin = defineComponent({
                 <RayIcon
                   name={curr.icon}
                   size="24"
-                  cursorPointer
+                  cursor="pointer"
                   onClick={this.handleSSOSigninClick.bind(this, curr)}
                 />
               ),

vite-plugin/index.ts

@@ -16,7 +16,7 @@ import type { ViteSvgIconsPlugin } from 'vite-plugin-svg-icons'
  *
  * 使用 `svg` 作为图标
  */
-export const useSVGIcon = (options?: ViteSvgIconsPlugin) => {
+export const viteSVGIcon = (options?: ViteSvgIconsPlugin) => {
   const defaultOptions = {
     iconDirs: [path.resolve(process.cwd(), 'src/icons')],
     symbolId: 'icon-[dir]-[name]',
@@ -34,7 +34,7 @@ export const useSVGIcon = (options?: ViteSvgIconsPlugin) => {
  *
  * 自动导入
  */
-export const useAutoImport = async (imp: (ImportsMap | PresetName)[] = []) =>
+export const viteAutoImport = async (imp: (ImportsMap | PresetName)[] = []) =>
   autoImport({
     include: [
       /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
@@ -53,7 +53,7 @@ export const useAutoImport = async (imp: (ImportsMap | PresetName)[] = []) =>
  *
  * 按需加载
  */
-export const useViteComponents = async (
+export const viteComponents = async (
   resolvers: (ComponentResolver | ComponentResolver[])[] = [],
   types: TypeImport[] = [],
 ) =>
@@ -69,7 +69,7 @@ export const useViteComponents = async (
     ],
   })
 
-export const useVueI18nPlugin = () =>
+export const viteVueI18nPlugin = () =>
   vueI18nPlugin({
     runtimeOnly: true,
     compositionOnly: true,

vite.config.ts

@@ -2,21 +2,21 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 import {
-  useAutoImport,
-  useViteComponents,
-  useVueI18nPlugin,
-  useSVGIcon,
+  viteAutoImport,
+  viteComponents,
+  viteVueI18nPlugin,
+  viteSVGIcon,
 } from './vite-plugin/index'
 
-import ViteVueJSX from '@vitejs/plugin-vue-jsx'
-import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
-import ViteInspect from 'vite-plugin-inspect'
+import viteVueJSX from '@vitejs/plugin-vue-jsx'
+import viteVeI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+import viteInspect from 'vite-plugin-inspect'
 import viteSvgLoader from 'vite-svg-loader'
 import viteEslintPlugin from 'vite-plugin-eslint'
 import vitePluginImp from 'vite-plugin-imp' // 按需打包工具
 import { visualizer } from 'rollup-plugin-visualizer' // 打包体积分析工具
 import viteCompression from 'vite-plugin-compression' // 压缩打包
-import { ViteEjsPlugin } from 'vite-plugin-ejs'
+import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs'
 
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' // 模板自动导入组件并且按需打包
 
@@ -68,11 +68,11 @@ export default defineConfig(async ({ mode }) => {
     },
     plugins: [
       vue({ reactivityTransform: true }),
-      ViteVueJSX(),
+      viteVueJSX(),
       title,
-      ViteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态)
-      VueI18nPlugin(),
-      await useAutoImport([
+      viteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态)
+      viteVeI18nPlugin(),
+      await viteAutoImport([
         {
           'naive-ui': [
             'useDialog',
@@ -82,13 +82,13 @@ export default defineConfig(async ({ mode }) => {
           ],
         },
       ]),
-      await useViteComponents([NaiveUiResolver()]),
+      await viteComponents([NaiveUiResolver()]),
       viteCompression(),
-      useVueI18nPlugin(),
+      viteVueI18nPlugin(),
       viteSvgLoader({
         defaultImport: 'component', // 默认以 `componetn` 形式导入 `svg`
       }),
-      useSVGIcon(),
+      viteSVGIcon(),
       viteEslintPlugin({
         lintOnStart: true, // 构建时自动检查
         failOnWarning: true, // 如果含有警告则构建失败
@@ -128,7 +128,7 @@ export default defineConfig(async ({ mode }) => {
         filename: 'visualizer.html',
         open: mode === 'report' ? true : false, // 以默认服务器代理打开文件
       }),
-      ViteEjsPlugin({
+      viteEjsPlugin({
         preloadingConfig,
         appPrimaryColor,
       }),