v3.0.2发布，新增文档，优化一些结构

.eslintignore

@@ -8,4 +8,5 @@ public
 yarn.*
 vite-env.*
 .prettierrc.*
-.eslintrc
+.eslintrc
+visualizer.*

.gitignore

@@ -13,6 +13,7 @@ dist-ssr
 dist
 dist/
 *.local
+visualizer.*
 
 # Editor directories and files
 .vscode

cfg.ts

@@ -0,0 +1,80 @@
+import path from 'node:path'
+
+import { HTMLTitlePlugin, buildOptions } from './vite-plugin/index'
+
+import type { ServerOptions, BuildOptions, AliasOptions } from 'vite'
+
+export interface HTMLTitle {
+  name: string
+  transformIndexHtml: (title: string) => string
+}
+
+export interface Config {
+  server: ServerOptions
+  buildOptions: (mode: string) => BuildOptions
+  alias: AliasOptions
+  title: HTMLTitle
+}
+
+const config: Config = {
+  /**
+   *
+   * 浏览器标题
+   */
+  title: HTMLTitlePlugin('ray template'),
+  /**
+   *
+   * 配置 HMR 特定选项（端口、主机、路径和协议）
+   */
+  server: {
+    host: '0.0.0.0',
+    port: 9527,
+    open: false,
+    https: false,
+    strictPort: false,
+    fs: {
+      strict: false,
+      allow: [],
+    },
+    proxy: {
+      '/api': {
+        target: 'url',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
+  /**
+   *
+   * 打包相关配置
+   */
+  buildOptions: buildOptions,
+  /**
+   *
+   * 预设别名
+   * - `@`: `src` 根目录
+   * - `@use-utils`: `src/utils` 根目录
+   * - `@use-api`: `src/axios/api` 根目录
+   * - `@use-images`: `src/assets/images` 根目录
+   */
+  alias: [
+    {
+      find: '@',
+      replacement: path.resolve(__dirname, './src'),
+    },
+    {
+      find: '@use-utils',
+      replacement: path.resolve(__dirname, './src/utils'),
+    },
+    {
+      find: '@use-api',
+      replacement: path.resolve(__dirname, './src/axios/api'),
+    },
+    {
+      find: '@use-images',
+      replacement: path.resolve(__dirname, './src/assets/images'),
+    },
+  ],
+}
+
+export default config

package.json

@@ -8,7 +8,8 @@
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
     "test": "vue-tsc --noEmit && vite build --mode test",
-    "dev-build": "vue-tsc --noEmit && vite build --mode development"
+    "dev-build": "vue-tsc --noEmit && vite build --mode development",
+    "report": "vue-tsc --noEmit && vite build"
   },
   "dependencies": {
     "@vueuse/core": "^9.1.0",
@@ -54,6 +55,7 @@
     "postcss": "^8.1.0",
     "postcss-pxtorem": "^6.0.0",
     "prettier": "^2.7.1",
+    "rollup-plugin-visualizer": "^5.8.3",
     "svg-sprite-loader": "^6.0.11",
     "typescript": "*",
     "unplugin-auto-import": "^0.11.0",

src/axios/api/test.ts

@@ -1,4 +1,4 @@
-import useRequest from '../index'
+import useRequest from '@/axios/index'
 
 /**
  *

src/components/RayChart/index.tsx

@@ -24,6 +24,7 @@ import { cloneDeep } from 'lodash-es'
 import { on, off } from '@/utils/element'
 
 import type { PropType } from 'vue'
+import type {} from 'echarts'
 
 export type AutoResize =
   | boolean
@@ -150,6 +151,16 @@ const RayChart = defineComponent({
       type: Boolean,
       default: false,
     },
+    use: {
+      /**
+       *
+       * 拓展 `echarts` 图表
+       *
+       * 由于官方并没有提供该类型, 手动去复刻成本过高, 故而采用 `any`
+       */
+      type: Array,
+      default: () => [],
+    },
   },
   setup(props) {
     const settingStore = useSetting()
@@ -194,6 +205,15 @@ const RayChart = defineComponent({
       echarts.use([LabelLayout, UniversalTransition]) // 注册布局, 过度效果
 
       echarts.use([props.canvasRender ? CanvasRenderer : SVGRenderer]) // 注册渲染器
+
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        echarts.use(props.use as any[])
+      } catch (e) {
+        console.error(
+          'Error: wrong property and method passed in extend attribute',
+        )
+      }
     }
 
     /**

src/components/RayTransitionComponent/index.vue

@@ -12,13 +12,15 @@
   </router-view>
 </template>
 <script lang="ts" setup>
+import type { PropType } from 'vue'
+
 defineProps({
   transitionPropName: {
     type: String,
     default: 'fade',
   },
   transitionMode: {
-    type: String,
+    type: String as PropType<'default' | 'out-in' | 'in-out' | undefined>,
     default: 'out-in',
   },
   transitionAppear: {

src/views/echart/index.tsx

@@ -202,8 +202,8 @@ const Echart = defineComponent({
       <div class="echart">
         <NCard title="RayChart组件使用">
           在使用该组件时, 一定要注意根组件的高度初始化问题,
-          如果需要使用其余的图例, 需要自己手动去注册.
+          如果需要使用其余的图例, 只需要从 echarts 中导入对应组件, 并且使用 use
-          该组件实现了自动跟随模板主题切换功能, 但是动态切换损耗较大,
+          方法注册. 该组件实现了自动跟随模板主题切换功能, 但是动态切换损耗较大,
           所以默认不启用
         </NCard>
         <NCard title="基础使用">

tsconfig.node.json

@@ -9,6 +9,6 @@
     "vite.config.ts",
     "vite-plugin/index.ts",
     "vite-plugin/type.ts",
-    "package.ts"
+    "cfg.ts"
   ]
 }

vite-plugin/index.ts

@@ -29,46 +29,6 @@ export const useSVGIcon = (options?: ViteSvgIconsPlugin) => {
   return createSvgIconsPlugin(Object.assign(defaultOptions, options))
 }
 
-/**
- *
- * @param options 别名
- *
- * 使用别名
- * 使用时, 必须以 `vite-plugin` 作为起始位置
- * 配置后, 需要在 `tsconfig.json` 中配置对应的 `paths`
- */
-export const useAliasOptions = (
-  options?: { find: string; replacement: string }[],
-) => {
-  const alias = [
-    {
-      find: '@',
-      replacement: path.resolve(__dirname, '../src'),
-    },
-    {
-      find: '@use-utils',
-      replacement: path.resolve(__dirname, '../src/utils'),
-    },
-    {
-      find: '@use-api',
-      replacement: path.resolve(__dirname, '../src/axios/api'),
-    },
-    {
-      find: '@use-images',
-      replacement: path.resolve(__dirname, '../src/assets/images'),
-    },
-  ]
-
-  options?.forEach((curr) =>
-    alias.push({
-      find: curr.find,
-      replacement: path.resolve(__dirname, curr.replacement),
-    }),
-  )
-
-  return alias
-}
-
 /**
  *
  * @param imp 自动导入依赖
@@ -133,7 +93,7 @@ export const useVueI18nPlugin = () =>
  *
  * @param title 浏览器 title 名称
  */
-export const useHTMLTitlePlugin = (title = 'ray template') => {
+export const HTMLTitlePlugin = (title = 'ray template') => {
   return {
     name: 'html-transform',
     transformIndexHtml: (html: string) => {
@@ -142,6 +102,76 @@ export const useHTMLTitlePlugin = (title = 'ray template') => {
   }
 }
 
+/**
+ *
+ * @param mode 打包环境
+ *
+ * @remark 打包输出文件配置
+ */
+export const buildOptions = (mode: string): BuildOptions => {
+  switch (mode) {
+    case 'test':
+      return {
+        outDir: 'dist/test-dist',
+        sourcemap: true,
+        terserOptions: {
+          compress: {
+            drop_console: false,
+            drop_debugger: false,
+          },
+        },
+      }
+
+    case 'development':
+      return {
+        outDir: 'dist/development-dist',
+        sourcemap: true,
+        terserOptions: {
+          compress: {
+            drop_console: false,
+            drop_debugger: false,
+          },
+        },
+      }
+
+    case 'production':
+      return {
+        outDir: 'dist/production-dist',
+        sourcemap: false,
+        terserOptions: {
+          compress: {
+            drop_console: true,
+            drop_debugger: true,
+          },
+        },
+      }
+
+    case 'report':
+      return {
+        outDir: 'dist/report-dist',
+        sourcemap: true,
+        terserOptions: {
+          compress: {
+            drop_console: false,
+            drop_debugger: false,
+          },
+        },
+      }
+
+    default:
+      return {
+        outDir: 'dist/test-dist',
+        sourcemap: false,
+        terserOptions: {
+          compress: {
+            drop_console: true, // 打包后移除 `console`
+            drop_debugger: true, // 打包后移除 `debugger`
+          },
+        },
+      }
+  }
+}
+
 /**
  *
  * @param options 自定义打包配置参数
@@ -164,93 +194,3 @@ export const useViteBuildPlugin = (options?: BuildOptions) => {
 
   return Object.assign(defaultPlugin, options)
 }
-
-/**
- *
- * @param options 自定义项目启动参数
- */
-export const useViteServerPlugin = (options?: ServerOptions) => {
-  const server: ServerOptions = {
-    host: '0.0.0.0',
-    port: 9527,
-    open: false,
-    https: false,
-    strictPort: false,
-    fs: {
-      strict: false,
-      allow: [],
-    },
-    proxy: {
-      '/api': {
-        target: 'url',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ''),
-      },
-    },
-  }
-
-  return Object.assign(server, options)
-}
-
-export const useEnvBuildOutput = (mode: string) => {
-  const buildOptions: BuildOptions = {
-    outDir: 'dist/test-dist',
-    sourcemap: false,
-    terserOptions: {
-      compress: {
-        drop_console: true, // 打包后移除 `console`
-        drop_debugger: true, // 打包后移除 `debugger`
-      },
-    },
-  }
-
-  switch (mode) {
-    case 'test':
-      Object.assign(buildOptions, {
-        outDir: 'dist/test-dist',
-        sourcemap: true,
-        terserOptions: {
-          compress: {
-            drop_console: false,
-            drop_debugger: false,
-          },
-        },
-      })
-
-      break
-
-    case 'development':
-      Object.assign(buildOptions, {
-        outDir: 'dist/development-dist',
-        sourcemap: true,
-        terserOptions: {
-          compress: {
-            drop_console: false,
-            drop_debugger: false,
-          },
-        },
-      })
-
-      break
-
-    case 'production':
-      Object.assign(buildOptions, {
-        outDir: 'dist/production-dist',
-        sourcemap: false,
-        terserOptions: {
-          compress: {
-            drop_console: true,
-            drop_debugger: true,
-          },
-        },
-      })
-      break
-
-    default:
-      break
-  }
-
-  return {
-    buildOptions,
-  }
-}

vite.config.ts

@@ -1,5 +1,6 @@
 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
@@ -9,15 +10,10 @@ const __APP_INFO__ = {
 }
 
 import {
-  useAliasOptions,
-  useViteBuildPlugin,
-  useViteServerPlugin,
-  useEnvBuildOutput,
   useAutoImport,
   useViteComponents,
   useViteCompression,
   useVueI18nPlugin,
-  useHTMLTitlePlugin,
   useSVGIcon,
 } from './vite-plugin/index'
 import vueJsx from '@vitejs/plugin-vue-jsx'
@@ -26,23 +22,25 @@ 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 { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig(async ({ mode }) => {
-  const { buildOptions } = useEnvBuildOutput(mode)
+  const { server, buildOptions, alias, title } = config
 
   return {
     define: {
       __APP_INFO__: JSON.stringify(__APP_INFO__),
     },
     resolve: {
-      alias: useAliasOptions(),
+      alias: alias,
     },
     plugins: [
       vue({ reactivityTransform: true }),
       vueJsx(),
+      title,
       ViteInspect(), // 仅适用于开发模式(检查 `Vite` 插件的中间状态)
       VueI18nPlugin(),
       await useAutoImport([
@@ -58,7 +56,6 @@ export default defineConfig(async ({ mode }) => {
       await useViteComponents([NaiveUiResolver()]),
       useViteCompression(),
       useVueI18nPlugin(),
-      useHTMLTitlePlugin(),
       viteSvgLoader({
         defaultImport: 'component', // 默认以 `componetn` 形式导入 `svg`
       }),
@@ -76,6 +73,11 @@ export default defineConfig(async ({ mode }) => {
             libDirectory: '',
             camel2DashComponentName: false,
           },
+          {
+            libName: '@vueuse',
+            libDirectory: '',
+            camel2DashComponentName: false,
+          },
         ],
       }),
       {
@@ -88,12 +90,19 @@ export default defineConfig(async ({ mode }) => {
           'src/*.vue',
         ],
       },
+      visualizer({
+        gzipSize: true, // 搜集 `gzip` 压缩包
+        brotliSize: true, // 搜集 `brotli` 压缩包
+        emitFile: false, // 生成文件在根目录下
+        filename: 'visualizer.html',
+        open: true, // 以默认服务器代理打开文件
+      }),
     ],
     optimizeDeps: {
       include: ['vue', 'vue-router', 'pinia', 'vue-i18n', '@vueuse/core'],
     },
     build: {
-      ...useViteBuildPlugin(buildOptions),
+      ...buildOptions(mode),
     },
     css: {
       preprocessorOptions: {
@@ -104,7 +113,7 @@ export default defineConfig(async ({ mode }) => {
       },
     },
     server: {
-      ...useViteServerPlugin(),
+      ...server,
     },
   }
 })