wip: 开发中，学习中

build/plugins/autoimport.ts

@@ -0,0 +1,35 @@
+import AutoImport from 'unplugin-auto-import/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+
+export default () => {
+  // https://github.com/antfu/unplugin-auto-import
+  return AutoImport({
+    imports: [
+      'vue',
+      'vue-router',
+      'vue-i18n',
+      'vue/macros',
+      '@vueuse/head',
+      '@vueuse/core',
+      {
+        'naive-ui': [
+          'useDialog',
+          'useMessage',
+          'useNotification',
+          'useLoadingBar',
+        ],
+      },
+    ],
+    dts: 'src/auto-imports.d.ts',
+    dirs: [
+      'src/composables',
+      'src/stores',
+      'src/types',
+      'src/api/**',
+    ],
+    vueTemplate: true,
+    resolvers: [
+      NaiveUiResolver(),
+    ],
+  })
+}

build/plugins/compress.ts

@@ -0,0 +1,6 @@
+import ViteCompression from 'vite-plugin-compression'
+
+export default (viteEnv: ImportMetaEnv) => {
+  const { VITE_COMPRESS_TYPE = 'gzip' } = viteEnv
+  return ViteCompression({ algorithm: VITE_COMPRESS_TYPE })
+}

build/plugins/index.ts

@@ -0,0 +1,60 @@
+import type { PluginOption } from 'vite'
+import Layouts from 'vite-plugin-vue-layouts'
+import Pages from 'vite-plugin-pages'
+import WebfontDownload from 'vite-plugin-webfont-dl'
+import VueDevTools from 'vite-plugin-vue-devtools'
+import Unocss from 'unocss/vite'
+import VueI18n from '@intlify/unplugin-vue-i18n/vite'
+
+// must
+import { getRootPath } from 'build/utils'
+import vueMacros from './vuemacros'
+import autoImport from './autoimport'
+import unplugins from './unplugins'
+
+// select
+import visualizer from './visualizer'
+import compress from './compress'
+import pwa from './pwa'
+import markdown from './markdown'
+
+export function setupVitePlugins(viteEnv: ImportMetaEnv): (PluginOption | PluginOption[])[] {
+  const plugins = [
+    vueMacros(),
+    autoImport(),
+    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
+    Layouts(),
+    // https://github.com/hannoeru/vite-plugin-pages
+    Pages({
+      extensions: ['vue', 'md'],
+    }),
+    // https://github.com/feat-agency/vite-plugin-webfont-dl
+    WebfontDownload(),
+    // https://github.com/webfansplz/vite-plugin-vue-devtools
+    VueDevTools(),
+    // https://github.com/antfu/unocss
+    // see uno.config.ts for config
+    Unocss(),
+    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
+    VueI18n({
+      runtimeOnly: true,
+      compositionOnly: true,
+      fullInstall: true,
+      include: [`${getRootPath()}/locales/**`],
+    }),
+    ...unplugins(viteEnv),
+  ]
+  if (viteEnv.VITE_VISUALIZER)
+    plugins.push(visualizer as PluginOption)
+
+  if (viteEnv.VITE_COMPRESS)
+    plugins.push(compress(viteEnv))
+
+  if (viteEnv.VITE_PWA)
+    plugins.push(pwa())
+
+  if (viteEnv.VITE_MARKDOWN)
+    plugins.push(markdown(viteEnv))
+
+  return plugins
+}

build/plugins/markdown.ts

@@ -0,0 +1,28 @@
+import Markdown from 'vite-plugin-vue-markdown'
+import LinkAttributes from 'markdown-it-link-attributes'
+import Shiki from 'markdown-it-shiki'
+
+export default (viteEnv: ImportMetaEnv) => {
+  // https://github.com/antfu/vite-plugin-vue-markdown
+  // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
+  return Markdown({
+    wrapperClasses: 'prose prose-sm m-auto text-left',
+    headEnabled: true,
+    markdownItSetup(md) {
+      // https://prismjs.com/
+      md.use(Shiki, {
+        theme: {
+          light: 'vitesse-light',
+          dark: 'vitesse-dark',
+        },
+      })
+      md.use(LinkAttributes, {
+        matcher: (link: string) => /^https?:\/\//.test(link),
+        attrs: {
+          target: '_blank',
+          rel: 'noopener',
+        },
+      })
+    },
+  })
+}

build/plugins/pwa.ts

@@ -0,0 +1,32 @@
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default function setupVitePwa() {
+  // https://github.com/antfu/vite-plugin-pwa
+  return VitePWA({
+    registerType: 'autoUpdate',
+    includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'],
+    manifest: {
+      name: 'N-Admin',
+      short_name: 'N-Admin',
+      theme_color: '#ffffff',
+      icons: [
+        {
+          src: '/pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
+        },
+        {
+          src: '/pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+        },
+        {
+          src: '/pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any maskable',
+        },
+      ],
+    },
+  })
+}

build/plugins/unplugins.ts

@@ -0,0 +1,18 @@
+import Components from 'unplugin-vue-components/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+
+export default (viteEnv: ImportMetaEnv) => {
+  return [
+    // https://github.com/antfu/unplugin-vue-components
+    Components({
+      // allow auto load markdown components under `./src/components/`
+      extensions: ['vue', 'md'],
+      // allow auto import and register components used in markdown
+      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+      dts: 'src/components.d.ts',
+      resolvers: [
+        NaiveUiResolver(),
+      ],
+    }),
+  ]
+}

build/plugins/visualizer.ts

@@ -0,0 +1,7 @@
+import { visualizer } from 'rollup-plugin-visualizer'
+
+export default visualizer({
+  gzipSize: true,
+  brotliSize: true,
+  open: true,
+})

build/plugins/vuemacros.ts

@@ -0,0 +1,23 @@
+import { transformShortVmodel } from '@vue-macros/short-vmodel'
+import Vue from '@vitejs/plugin-vue'
+
+// @ts-expect-error failed to resolve types
+import VueMacros from 'unplugin-vue-macros/vite'
+
+export default () => {
+  return VueMacros({
+    plugins: {
+      vue: Vue({
+        include: [/\.vue$/, /\.md$/],
+        reactivityTransform: true,
+        template: {
+          compilerOptions: {
+            nodeTransforms: [
+              transformShortVmodel({ prefix: '::' }),
+            ],
+          },
+        },
+      }),
+    },
+  })
+}

build/utils/index.ts

@@ -0,0 +1,15 @@
+import path from 'node:path'
+
+/**
+ * 获取项目根路径，不包括末尾斜杠
+ */
+export function getRootPath() {
+  return path.resolve(process.cwd())
+}
+
+/**
+ * 获取项目src路径
+ */
+export function getSrcPath(srcName = 'src') {
+  return `${getRootPath()}/${srcName}`
+}

package.json

@@ -1,7 +1,13 @@
 {
+  "name": "n-admin-ui",
   "type": "module",
+  "version": "1.0.0",
   "private": true,
   "packageManager": "pnpm@8.5.1",
+  "engines": {
+    "node": ">=16.15.1",
+    "pnpm": ">=8.1.0"
+  },
   "scripts": {
     "build": "vite build",
     "build:ssg": "vite-ssg build",
@@ -54,6 +60,7 @@
     "markdown-it-shiki": "^0.9.0",
     "naive-ui": "^2.34.4",
     "pnpm": "^8.5.1",
+    "rollup-plugin-visualizer": "^5.9.0",
     "shiki": "^0.14.2",
     "simple-git-hooks": "^2.8.1",
     "taze": "^0.10.1",
@@ -64,6 +71,7 @@
     "unplugin-vue-macros": "^2.1.7",
     "vite": "^4.3.8",
     "vite-bundle-visualizer": "^0.7.0",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-inspect": "^0.7.28",
     "vite-plugin-pages": "^0.30.1",
     "vite-plugin-pwa": "^0.15.0",

src/auto-imports.d.ts

@@ -50,6 +50,7 @@ declare global {
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
+  const login: typeof import('./api/auth/auth')['login']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
   const markRaw: typeof import('vue')['markRaw']
   const nextTick: typeof import('vue')['nextTick']
@@ -359,6 +360,7 @@ declare module 'vue' {
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly login: UnwrapRef<typeof import('./api/auth/auth')['login']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
@@ -662,6 +664,7 @@ declare module '@vue/runtime-core' {
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly login: UnwrapRef<typeof import('./api/auth/auth')['login']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>

src/types/env.d.ts

@@ -1,26 +1,36 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
+        /** 项目基本地址 */
+    readonly VITE_BASE_URL: string;
+    /** 项目名称 */
+    readonly VITE_APP_NAME: string;
+    /** 项目标题 */
+    readonly VITE_APP_TITLE: string;
+    /** 项目描述 */
+    readonly VITE_APP_DESC: string;
+
+    /** API访问地址 */
+    readonly VITE_API_URL: string
+    /** 上传地址 */
+    readonly VITE_UPLOAD_URL: string
+    /** API前缀 */
+    readonly VITE_API_URL_PREFIX: string;
+
+    /** 开启请求代理 */
+    readonly VITE_HTTP_PROXY: boolean;
+    /** 是否开启打包文件大小结果分析 */
+    readonly VITE_VISUALIZER: boolean;
+    /** 是否开启打包压缩 */
+    readonly VITE_COMPRESS: boolean;
+    /** 压缩算法类型 */
+    readonly VITE_COMPRESS_TYPE: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw';
+    /** 是否应用pwa */
+    readonly VITE_PWA: boolean;
+    /** 是否启用Markdown插件,markdown生成html */
+    readonly VITE_MARKDOWN: boolean;
     // 是否开启Mock
-    readonly VITE_USE_MOCK:boolean
+    readonly VITE_OPEN_MOCK: boolean
-    // public path
-    readonly VITE_PUBLIC_PATH:string
-    // 全局项目标题
-    readonly VITE_TITLE:string
-    // API访问地址
-    readonly VITE_API_URL:string
-    // 上传地址
-    readonly VITE_UPLOAD_URL:string
-    // API前缀
-    readonly VITE_API_URL_PREFIX:string
-    // 项目描述
-    readonly VITE_DESCRIPTION:string
 }
 
 interface ImportMeta {readonly env: ImportMetaEnv} 
-
-declare module "*.vue" {
-    import type { DefineComponent } from "vue"
-    const component: DefineComponent<{}, {}, any>
-    export default component
-}

src/types/global.d.ts

@@ -1,12 +1,55 @@
+/**
+ * 字符串类型对象
+ */
 declare type Recordable<T = any> = Record<string, T>;
+
+/**
+ * 字符串类型对象（只读）
+ */
 declare type ReadonlyRecordable<T = any> = {
     readonly [key: string]: T;
 };
 
+/**
+ *  T | null 包装
+ */
 declare type Nullable<T> = T | null;
+
+/**
+ * T | Not null 包装
+ */
 declare type NonNullable<T> = T extends null | undefined ? never : T;
+
 declare type Indexable<T = any> = {
     [key: string]: T;
+  };
+
+declare type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
 };
+/**
+ * 任意类型的异步函数
+ */
+declare type AnyPromiseFunction = (...arg: any[]) => PromiseLike<any>;
+
+/**
+ * 任意类型的普通函数
+ */
+declare type AnyNormalFunction = (...arg: any[]) => any;
+
+/**
+ * 任意类型的函数
+ */
+declare type AnyFunction = AnyNormalFunction | AnyPromiseFunction;
+
+/**
+ * setTimeout 返回值类型
+ */
+type TimeoutHandle = ReturnType<typeof setTimeout>;
+
+/**
+ * setInterval 返回值类型
+ */
+type IntervalHandle = ReturnType<typeof setInterval>;
 
 declare type FormType = 'create' | 'update'

tsconfig.json

@@ -6,10 +6,11 @@
     "lib": ["DOM", "ESNext"],
     "strict": true,
     "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "jsx": "preserve",
+    "moduleResolution": "node",
     "skipLibCheck": true,
     "isolatedModules": true,
-    "moduleResolution": "node",
     "resolveJsonModule": true,
     "noUnusedLocals": true,
     "strictNullChecks": true,
@@ -23,7 +24,8 @@
       "vite-plugin-vue-component-preview/client",
       "vite-plugin-vue-layouts/client",
       "vite-plugin-pwa/client",
-      "unplugin-vue-macros/macros-global"
+      "unplugin-vue-macros/macros-global",
+      "naive-ui/volar"
     ],
     "paths": {
       "~/*": ["src/*"],
@@ -39,9 +41,16 @@
   },
   "exclude": ["dist", "node_modules", "cypress"],
   "include": [
-    "src/**/*",
+    "tests/**/*.ts",
+    "src/**/*.ts",
     "src/**/*.d.ts",
-    "src/types/**/*.d.ts",
+    "src/**/*.tsx",
-    "src/**/types/**/*.d.ts"
+    "src/**/*.vue",
+    "types/**/*.d.ts",
+    "types/**/*.ts",
+    "build/**/*.ts",
+    "build/**/*.d.ts",
+    "mock/**/*.ts",
+    "vite.config.ts"
   ]
 }

vite.config.ts

@@ -1,195 +1,64 @@
 import path from 'node:path'
-import { defineConfig } from 'vite'
+import { setupVitePlugins } from 'build/plugins'
-import Vue from '@vitejs/plugin-vue'
+import type { ConfigEnv } from 'vite'
-import Pages from 'vite-plugin-pages'
+import { defineConfig, loadEnv } from 'vite'
-import generateSitemap from 'vite-ssg-sitemap'
-import Layouts from 'vite-plugin-vue-layouts'
-import Components from 'unplugin-vue-components/vite'
-import AutoImport from 'unplugin-auto-import/vite'
-import Markdown from 'vite-plugin-vue-markdown'
-import { VitePWA } from 'vite-plugin-pwa'
-import VueI18n from '@intlify/unplugin-vue-i18n/vite'
-import VueDevTools from 'vite-plugin-vue-devtools'
-import LinkAttributes from 'markdown-it-link-attributes'
-import Unocss from 'unocss/vite'
-import Shiki from 'markdown-it-shiki'
-import { transformShortVmodel } from '@vue-macros/short-vmodel'
-import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
-
-// @ts-expect-error failed to resolve types
-import VueMacros from 'unplugin-vue-macros/vite'
-import WebfontDownload from 'vite-plugin-webfont-dl'
 
-export default defineConfig({
+import generateSitemap from 'vite-ssg-sitemap'
-  resolve: {
-    alias: {
-      '~/': `${path.resolve(__dirname, 'src')}/`,
-      '#/': `${path.resolve(__dirname, 'src/types')}/`,
-    },
-  },
 
-  plugins: [
+export default defineConfig(({ command, mode }: ConfigEnv) => {
-    VueMacros({
+  const viteEnv = loadEnv(mode, process.cwd()) as unknown as ImportMetaEnv
-      plugins: {
+  return {
-        vue: Vue({
+    base: viteEnv.VITE_BASE_URL,
-          include: [/\.vue$/, /\.md$/],
+    resolve: {
-          reactivityTransform: true,
+      alias: {
-          template: {
+        '~/': `${path.resolve(__dirname, 'src')}/`,
-            compilerOptions: {
+        '#/': `${path.resolve(__dirname, 'src/types')}/`,
-              nodeTransforms: [
-                transformShortVmodel({ prefix: '::' }),
-              ],
-            },
-          },
-        }),
       },
-    }),
+    },
-
-    // https://github.com/hannoeru/vite-plugin-pages
-    Pages({
-      extensions: ['vue', 'md'],
-    }),
-
-    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
-    Layouts(),
 
-    // https://github.com/antfu/unplugin-auto-import
+    plugins: setupVitePlugins(viteEnv),
-    AutoImport({
-      imports: [
-        'vue',
-        'vue-router',
-        'vue-i18n',
-        'vue/macros',
-        '@vueuse/head',
-        '@vueuse/core',
-        {
-          'naive-ui': [
-            'useDialog',
-            'useMessage',
-            'useNotification',
-            'useLoadingBar',
-          ],
-        },
-      ],
-      dts: 'src/auto-imports.d.ts',
-      dirs: [
-        'src/composables',
-        'src/stores',
-        'src/types',
-        'src/api/**',
-      ],
-      vueTemplate: true,
-      resolvers: [
-        NaiveUiResolver(),
-      ],
-    }),
 
-    // https://github.com/antfu/unplugin-vue-components
+    server: {
-    Components({
+      host: '0.0.0.0',
-      // allow auto load markdown components under `./src/components/`
+      port: 3200,
-      extensions: ['vue', 'md'],
+    },
-      // allow auto import and register components used in markdown
-      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
-      dts: 'src/components.d.ts',
-      resolvers: [
-        NaiveUiResolver(),
-      ],
-    }),
 
-    // https://github.com/antfu/unocss
+    optimizeDeps: {
-    // see uno.config.ts for config
+      include: [],
-    Unocss(),
+    },
 
-    // https://github.com/antfu/vite-plugin-vue-markdown
+    // https://github.com/vitest-dev/vitest
-    // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
+    test: {
-    Markdown({
+      include: ['test/**/*.test.ts'],
-      wrapperClasses: 'prose prose-sm m-auto text-left',
+      environment: 'jsdom',
-      headEnabled: true,
+      deps: {
-      markdownItSetup(md) {
+        inline: ['@vue', '@vueuse', 'vue-demi'],
-        // https://prismjs.com/
-        md.use(Shiki, {
-          theme: {
-            light: 'vitesse-light',
-            dark: 'vitesse-dark',
-          },
-        })
-        md.use(LinkAttributes, {
-          matcher: (link: string) => /^https?:\/\//.test(link),
-          attrs: {
-            target: '_blank',
-            rel: 'noopener',
-          },
-        })
       },
-    }),
+    },
 
-    // https://github.com/antfu/vite-plugin-pwa
+    // https://github.com/antfu/vite-ssg
-    VitePWA({
+    ssgOptions: {
-      registerType: 'autoUpdate',
+      script: 'async',
-      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'],
+      formatting: 'minify',
-      manifest: {
+      crittersOptions: {
-        name: 'Vitesse',
+        reduceInlineStyles: false,
-        short_name: 'Vitesse',
+      },
-        theme_color: '#ffffff',
+      onFinished() {
-        icons: [
+        generateSitemap()
-          {
-            src: '/pwa-192x192.png',
-            sizes: '192x192',
-            type: 'image/png',
-          },
-          {
-            src: '/pwa-512x512.png',
-            sizes: '512x512',
-            type: 'image/png',
-          },
-          {
-            src: '/pwa-512x512.png',
-            sizes: '512x512',
-            type: 'image/png',
-            purpose: 'any maskable',
-          },
-        ],
       },
-    }),
-
-    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
-    VueI18n({
-      runtimeOnly: true,
-      compositionOnly: true,
-      fullInstall: true,
-      include: [path.resolve(__dirname, 'locales/**')],
-    }),
-
-    // https://github.com/feat-agency/vite-plugin-webfont-dl
-    WebfontDownload(),
-
-    // https://github.com/webfansplz/vite-plugin-vue-devtools
-    VueDevTools(),
-  ],
-
-  // https://github.com/vitest-dev/vitest
-  test: {
-    include: ['test/**/*.test.ts'],
-    environment: 'jsdom',
-    deps: {
-      inline: ['@vue', '@vueuse', 'vue-demi'],
     },
-  },
 
-  // https://github.com/antfu/vite-ssg
+    ssr: {
-  ssgOptions: {
+      // TODO: workaround until they support native ESM
-    script: 'async',
+      noExternal: ['workbox-window', /vue-i18n/],
-    formatting: 'minify',
-    crittersOptions: {
-      reduceInlineStyles: false,
-    },
-    onFinished() {
-      generateSitemap()
     },
-  },
 
-  ssr: {
+    build: {
-    // TODO: workaround until they support native ESM
+      reportCompressedSize: false,
-    noExternal: ['workbox-window', /vue-i18n/],
+      sourcemap: false,
-  },
+      commonjsOptions: {
+        ignoreTryCatch: false,
+      },
+    },
+  }
 })