v3.0.5，做了一些小的优化

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ray-template",
   "private": true,
-  "version": "3.0.4",
+  "version": "3.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/axios/index.ts

@@ -9,7 +9,7 @@ const useRequest = (config: AxiosRequestConfig) => {
 
   controller = new AbortController() // 实例化控制器对象(可以中止一个或多个 `Web` 请求)
 
-  const cfg = Object.assign(config, {
+  const cfg = Object.assign({}, config, {
     signal: controller.signal, // 取消请求信号
   })
 

src/components/RayChart/index.scss

@@ -1,4 +1,6 @@
 .ray-chart {
   width: var(--ray-chart-width);
   height: var(--ray-chart-height);
+  border: none;
+  outline: none;
 }

src/components/RayChart/index.tsx

@@ -1,4 +1,5 @@
 import './index.scss'
+
 import * as echarts from 'echarts/core' // `echarts` 核心模块
 import {
   TitleComponent,
@@ -18,13 +19,13 @@ import {
   ScatterChart,
 } from 'echarts/charts' // 系列类型(后缀都为 `SeriesOption`)
 import { LabelLayout, UniversalTransition } from 'echarts/features' // 标签自动布局, 全局过渡动画等特性
-import { CanvasRenderer, SVGRenderer } from 'echarts/renderers' // `echarts` 渲染器
+import { CanvasRenderer } from 'echarts/renderers' // `echarts` 渲染器
+
 import { useSetting } from '@/store'
 import { cloneDeep } from 'lodash-es'
-import { on, off } from '@/utils/element'
+import { on, off, addStyle } from '@/utils/element'
 
 import type { PropType } from 'vue'
-import type {} from 'echarts'
 
 export type AutoResize =
   | boolean
@@ -58,6 +59,7 @@ export type ChartTheme = 'dark' | '' | object
  */
 export const loadingOptions = (options: LoadingOptions) =>
   Object.assign(
+    {},
     {
       text: 'loading',
       color: '#c23531',
@@ -99,7 +101,12 @@ const RayChart = defineComponent({
       default: true,
     },
     canvasRender: {
-      /* `chart` 渲染器, 默认使用 `canvas` */
+      /**
+       *
+       * `chart` 渲染器, 默认使用 `canvas`
+       *
+       * 考虑到打包体积与大多数业务场景缘故, 暂时移除 `SVGRenderer` 渲染器的默认导入
+       */
       type: Boolean,
       default: true,
     },
@@ -181,6 +188,10 @@ const RayChart = defineComponent({
     /**
      *
      * 注册 `echart` 组件, 图利, 渲染器等
+     *
+     * 会自动合并拓展 `echart` 组件
+     *
+     * 该方法必须在注册图表之前调用
      */
     const registerChartCore = async () => {
       echarts.use([
@@ -204,7 +215,9 @@ const RayChart = defineComponent({
 
       echarts.use([LabelLayout, UniversalTransition]) // 注册布局, 过度效果
 
-      echarts.use([props.canvasRender ? CanvasRenderer : SVGRenderer]) // 注册渲染器
+      // 如果业务场景中需要 `svg` 渲染器, 手动导入渲染器后使用该行代码即可
+      // echarts.use([props.canvasRender ? CanvasRenderer : SVGRenderer])
+      echarts.use([CanvasRenderer]) // 注册渲染器
 
       try {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -227,7 +240,7 @@ const RayChart = defineComponent({
     const useMergeOptions = () => {
       let options = cloneDeep(props.options)
 
-      const merge = (opts: object) => Object.assign(options, opts)
+      const merge = (opts: object) => Object.assign({}, options, opts)
 
       if (props.showAria) {
         options = merge({
@@ -254,6 +267,19 @@ const RayChart = defineComponent({
     const renderChart = (theme: ChartTheme) => {
       const element = rayChartRef.value as HTMLElement
       const options = useMergeOptions()
+      const { height, width } = element.getBoundingClientRect()
+
+      if (height === 0) {
+        addStyle(element, {
+          height: '200px',
+        })
+      }
+
+      if (width === 0) {
+        addStyle(element, {
+          width: '200px',
+        })
+      }
 
       try {
         echartInstance = echarts.init(element, theme)

src/components/RayIcon/index.scss

@@ -0,0 +1,5 @@
+.ray-icon {
+  border: none;
+  outline: none;
+  @include flexCenter;
+}

src/components/RayIcon/index.tsx

@@ -1,4 +1,15 @@
-import { defineComponent } from 'vue'
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-01-04
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
+import './index.scss'
 
 const RayIcon = defineComponent({
   name: 'RayIcon',
@@ -43,16 +54,17 @@ const RayIcon = defineComponent({
   },
   render() {
     return (
-      <svg
-        ariaHidden={true}
-        class={`ray-icon ${this.customClassName}`}
-        style={{
-          width: `${this.width ? this.width : this.size}px`,
-          height: `${this.height ? this.height : this.size}px`,
-        }}
-      >
-        <use xlink:href={this.symbolId} fill={this.modelColor} />
-      </svg>
+      <div class={`ray-icon ${this.customClassName}`}>
+        <svg
+          ariaHidden={true}
+          style={{
+            width: `${this.width ? this.width : this.size}px`,
+            height: `${this.height ? this.height : this.size}px`,
+          }}
+        >
+          <use xlink:href={this.symbolId} fill={this.modelColor} />
+        </svg>
+      </div>
     )
   },
 })

src/components/RayTable/src/index.scss

@@ -9,4 +9,10 @@
   & .n-card-header .n-card-header__main {
     padding-right: var(--ray-table-header-space);
   }
+
+  & .ray-table-header-extra__space {
+    display: flex;
+    gap: 0 1px;
+    align-items: center;
+  }
 }

src/components/RayTable/src/index.tsx

@@ -10,7 +10,7 @@
  */
 
 import './index.scss'
-import { NDataTable, NCard, NDropdown, NSpace } from 'naive-ui'
+import { NDataTable, NCard, NDropdown, NDivider } from 'naive-ui'
 import TableSetting from './components/TableSetting/index'
 import TableAction from './components/TableAction/index'
 
@@ -167,13 +167,13 @@ const RayTable = defineComponent({
      * 受到 `print-js` 限制有些样式是无法打印输出的
      */
     const handlePrintPositive = () => {
-      const options = Object.assign(
-        {
-          printable: tableUUID,
-          type: props.printType,
-        },
-        props.printOptions,
-      )
+      const options = Object.assign({}, props.printOptions, {
+        printable: tableUUID,
+        type: props.printType,
+        documentTitle: props.printOptions.documentTitle
+          ? props.printOptions.documentTitle
+          : '表格',
+      })
 
       print(options)
     }
@@ -225,7 +225,7 @@ const RayTable = defineComponent({
           header: () => this.title,
           'header-extra': () =>
             this.action ? (
-              <NSpace align="center">
+              <div class="ray-table-header-extra__space">
                 {/* 打印输出操作 */}
                 <TableAction
                   icon={this.printIcon}
@@ -234,6 +234,7 @@ const RayTable = defineComponent({
                   negativeText={this.printNegativeText}
                   onPositive={this.handlePrintPositive.bind(this)}
                 />
+                <NDivider vertical />
                 {/* 输出为Excel表格 */}
                 <TableAction
                   icon={this.exportExcelIcon}
@@ -242,11 +243,12 @@ const RayTable = defineComponent({
                   negativeText={this.exportNegativeText}
                   onPositive={this.handleExportPositive.bind(this)}
                 />
+                <NDivider vertical />
                 {/* 表格列操作 */}
                 <TableSetting
                   onColumnsUpdate={this.handleColumnsUpdate.bind(this)}
                 />
-              </NSpace>
+              </div>
             ) : (
               ''
             ),

src/layout/components/Menu/index.scss

@@ -1,3 +1,14 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-01-06
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
 .ray-menu__logo {
   height: 50px;
   padding: 0 18px 0 24px;
@@ -10,7 +21,11 @@
   overflow: hidden;
 
   &.ray-menu__logo-url {
+    position: sticky;
+    top: 0;
     cursor: pointer;
+    background-color: var(--n-color);
+    z-index: 20;
   }
 
   & .ray-menu__logo-title {

src/layout/components/SiderBar/index.tsx

@@ -1,6 +1,17 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-Ray>
+ *
+ * @date 2023-01-04
+ *
+ * @workspace ray-template
+ *
+ * @remark 今天也是元气满满撸代码的一天
+ */
+
 import './index.scss'
 
-import { NLayoutHeader, NSpace, NTooltip, NDropdown } from 'naive-ui'
+import { NLayoutHeader, NSpace, NTooltip, NDropdown, NTag } from 'naive-ui'
 import RayIcon from '@/components/RayIcon/index'
 import RayTooltipIcon from '@/components/RayTooltipIcon/index'
 import SettingDrawer from './components/SettingDrawer/index'
@@ -8,14 +19,15 @@ import SettingDrawer from './components/SettingDrawer/index'
 import { useSetting } from '@/store'
 import { useLanguageOptions } from '@/language/index'
 import { useAvatarOptions } from './hook'
-import { removeCache } from '@/utils/cache'
+import { removeCache, getCache } from '@/utils/cache'
 import screenfull from 'screenfull'
 
-import type { IconEventMapOptions, IconEventMap, IconOptions } from './type'
+import type { IconEventMapOptions, IconEventMap } from './type'
 
 /**
  *
  * 本来想通过写数据配置化的方式实现顶部的功能小按钮, 结果事实发现...
+ *
  * 但是我又不想改, 就这样吧
  */
 
@@ -28,6 +40,7 @@ const SiderBar = defineComponent({
     const { updateLocale, changeSwitcher } = settingStore
     const modelDrawerPlacement = ref(settingStore.drawerPlacement)
     const showSettings = ref(false)
+    const person = getCache('person')
 
     /**
      *
@@ -64,50 +77,6 @@ const SiderBar = defineComponent({
         eventKey: 'setting',
       },
     ]
-    /**
-     *
-     * 顶部右边下拉框操作栏
-     */
-    const rightDropdownIconOptions = [
-      {
-        name: 'language',
-        size: 18,
-        tooltip: '',
-        dropdown: {
-          eventKey: 'handleSelect', // 默认为 `handleSelect`
-          switch: true,
-          options: useLanguageOptions(),
-          handleSelect: (key: string | number) => updateLocale(String(key)),
-        },
-      },
-      {
-        name: 'ray',
-        size: 18,
-        tooltip: '',
-        dropdown: {
-          eventKey: 'handleSelect', // 默认为 `handleSelect`
-          switch: true,
-          options: useAvatarOptions(),
-          handleSelect: (key: string | number) => {
-            if (key === 'logout') {
-              window.$dialog.warning({
-                title: '提示',
-                content: '您确定要退出登录吗',
-                positiveText: '确定',
-                negativeText: '不确定',
-                onPositiveClick: () => {
-                  window.$message.info('账号退出中...')
-                  removeCache('all-sessionStorage')
-                  setTimeout(() => window.location.reload(), 300)
-                },
-              })
-            } else {
-              window.$message.info('这个人很懒, 没做这个功能~')
-            }
-          },
-        },
-      },
-    ]
     const iconEventMap: IconEventMapOptions = {
       reload: () => {
         changeSwitcher(false, 'reloadRouteSwitch')
@@ -133,6 +102,24 @@ const SiderBar = defineComponent({
       iconEventMap[key]?.()
     }
 
+    const handlePersonSelect = (key: string | number) => {
+      if (key === 'logout') {
+        window.$dialog.warning({
+          title: '提示',
+          content: '您确定要退出登录吗',
+          positiveText: '确定',
+          negativeText: '不确定',
+          onPositiveClick: () => {
+            window.$message.info('账号退出中...')
+            removeCache('all-sessionStorage')
+            setTimeout(() => window.location.reload(), 300)
+          },
+        })
+      } else {
+        window.$message.info('这个人很懒, 没做这个功能~')
+      }
+    }
+
     return {
       leftIconOptions,
       rightTooltipIconOptions,
@@ -140,7 +127,9 @@ const SiderBar = defineComponent({
       handleIconClick,
       modelDrawerPlacement,
       showSettings,
-      rightDropdownIconOptions,
+      updateLocale,
+      handlePersonSelect,
+      person,
     }
   },
   render() {
@@ -176,20 +165,37 @@ const SiderBar = defineComponent({
                 onClick={this.handleIconClick.bind(this, curr.name)}
               />
             ))}
-            {this.rightDropdownIconOptions.map((curr) => (
-              <NDropdown
-                options={curr.dropdown.options}
-                onSelect={
-                  curr.dropdown[curr.dropdown.eventKey ?? 'handleSelect']
-                }
-              >
-                <RayIcon
-                  customClassName="layout-header__method--icon"
-                  name={curr.name}
-                  size={curr.size}
-                />
-              </NDropdown>
-            ))}
+            <NDropdown
+              options={useLanguageOptions()}
+              onSelect={(key: string | number) =>
+                this.updateLocale(String(key))
+              }
+              trigger="click"
+            >
+              <RayIcon
+                customClassName="layout-header__method--icon"
+                name="language"
+                size="18"
+              />
+            </NDropdown>
+            <NDropdown
+              options={useAvatarOptions()}
+              onSelect={this.handlePersonSelect.bind(this)}
+              trigger="click"
+            >
+              <NTag checkable size="large">
+                {{
+                  icon: () => (
+                    <RayIcon
+                      customClassName="layout-header__method--icon"
+                      name="ray"
+                      size="18"
+                    />
+                  ),
+                  default: () => this.person.name,
+                }}
+              </NTag>
+            </NDropdown>
           </NSpace>
         </NSpace>
         <SettingDrawer

src/store/modules/menu.ts

@@ -115,7 +115,9 @@ export const useMenu = defineStore('menu', () => {
             ),
         }
 
-        const attr = curr.meta?.icon ? Object.assign(route, expandIcon) : route
+        const attr = curr.meta?.icon
+          ? Object.assign({}, route, expandIcon)
+          : route
 
         // 初始化 `menu tag`
         if (curr.path === cacheMenuKey) {

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

@@ -9,7 +9,7 @@ const Signin = defineComponent({
     const { t } = useI18n()
 
     const useSigninForm = () => ({
-      name: 'admin',
+      name: 'ray',
       pwd: '123456',
     })
 
@@ -30,7 +30,6 @@ const Signin = defineComponent({
         trigger: ['blur', 'input'],
       },
     }
-
     const handleLogin = () => {
       loginFormRef.value?.validate((valid) => {
         if (!valid) {
@@ -42,6 +41,7 @@ const Signin = defineComponent({
             router.push('/dashboard')
 
             setCache('token', 'tokenValue')
+            setCache('person', signinForm.value)
           }, 2 * 1000)
         } else {
           window.$message.error('不可以这样哟, 不可以哟')

vite-plugin/index.ts

@@ -1,13 +1,11 @@
 import path from 'node:path'
 
-import viteCompression from 'vite-plugin-compression' // 压缩打包
 import autoImport from 'unplugin-auto-import/vite' // 自动导入
 import viteComponents from 'unplugin-vue-components/vite' // 自动按需导入
 import vueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' // i18n
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // `svg icon`
 
 import type { ComponentResolver, TypeImport } from 'unplugin-vue-components'
-import type { VitePluginCompression } from './type'
 import type { ImportsMap, PresetName } from 'unplugin-auto-import/types'
 import type { BuildOptions } from 'vite'
 import type { ViteSvgIconsPlugin } from 'vite-plugin-svg-icons'
@@ -26,7 +24,7 @@ export const useSVGIcon = (options?: ViteSvgIconsPlugin) => {
     customDomId: '__svg__icons__dom__',
   }
 
-  return createSvgIconsPlugin(Object.assign(defaultOptions, options))
+  return createSvgIconsPlugin(Object.assign({}, defaultOptions, options))
 }
 
 /**
@@ -71,15 +69,6 @@ export const useViteComponents = async (
     ],
   })
 
-/**
- *
- * @param options
- *
- * 压缩打包
- */
-export const useViteCompression = (options?: VitePluginCompression) =>
-  viteCompression(Object.assign(options ?? {}))
-
 export const useVueI18nPlugin = () =>
   vueI18nPlugin({
     runtimeOnly: true,
@@ -192,5 +181,5 @@ export const useViteBuildPlugin = (options?: BuildOptions) => {
     },
   }
 
-  return Object.assign(defaultPlugin, options)
+  return Object.assign({}, defaultPlugin, options)
 }

vite.config.ts

@@ -1,26 +1,13 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import config from './cfg'
-const pkg = require('./package.json')
-
-const { dependencies, devDependencies, name, version } = pkg
-const { server, buildOptions, alias, title, copyright, sideBarLogo } = config
-
-const __APP_CFG__ = {
-  pkg: { dependencies, devDependencies, name, version },
-  layout: {
-    copyright,
-    sideBarLogo,
-  },
-}
 
 import {
   useAutoImport,
   useViteComponents,
-  useViteCompression,
   useVueI18nPlugin,
   useSVGIcon,
 } from './vite-plugin/index'
+
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import ViteInspect from 'vite-plugin-inspect'
@@ -28,8 +15,33 @@ 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 { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' // 模板自动导入组件并且按需打包
+
+import config from './cfg'
+const pkg = require('./package.json')
+
+const { dependencies, devDependencies, name, version } = pkg
+const { server, buildOptions, alias, title, copyright, sideBarLogo } = config
+
+/**
+ *
+ * 全局注入 `__APP_CFG__` 变量
+ *
+ * 可以在 `views` 页面使用
+ *
+ * 使用方法 `const { pkg, layout } = __APP_CFG__`
+ *
+ * 如果有新的补充, 需要自己手动补充类型 `src/types/cfg.ts AppConfig`
+ */
+const __APP_CFG__ = {
+  pkg: { dependencies, devDependencies, name, version },
+  layout: {
+    copyright,
+    sideBarLogo,
+  },
+}
 
 // https://vitejs.dev/config/
 export default defineConfig(async ({ mode }) => {
@@ -57,7 +69,7 @@ export default defineConfig(async ({ mode }) => {
         },
       ]),
       await useViteComponents([NaiveUiResolver()]),
-      useViteCompression(),
+      viteCompression(),
       useVueI18nPlugin(),
       viteSvgLoader({
         defaultImport: 'component', // 默认以 `componetn` 形式导入 `svg`
@@ -106,6 +118,19 @@ export default defineConfig(async ({ mode }) => {
     },
     build: {
       ...buildOptions(mode),
+      rollupOptions: {
+        output: {
+          manualChunks: (id) => {
+            if (id.includes('node_modules')) {
+              return id
+                .toString()
+                .split('node_modules/')[1]
+                .split('/')[0]
+                .toString()
+            }
+          },
+        },
+      },
     },
     css: {
       preprocessorOptions: {
@@ -114,6 +139,9 @@ export default defineConfig(async ({ mode }) => {
             '@import "./src/styles/mixins.scss"; @import "./src/styles/setting.scss";', // 全局 `mixin`
         },
       },
+      modules: {
+        localsConvention: 'camelCaseOnly',
+      },
     },
     server: {
       ...server,