refactor: update component names to PascalCase and improve structure

- Changed component names from kebab-case to PascalCase in various files for consistency. - Updated `<router-view>` and `<transition>` to `<RouterView>` and `<Transition>` respectively in App.vue and base-layout.vue. - Refactored AppNaiveUIProvider.vue to use PascalCase for Naive UI providers. - Adjusted language and theme switch buttons to use PascalCase for icon components. - Updated button components in demo pages to use PascalCase for Naive UI buttons. - Modified ESLint rules in route message files to use perfectionist/sort-objects for better key sorting. - Enhanced Vite plugin files to export loadPlugin functions for better plugin management. - Improved plugin loading logic to handle errors and warnings more effectively.
2025-12-10 22:52:23 +08:00
parent 3828f12a2d
commit 86920da611
28 changed files with 334 additions and 181 deletions
--- a/vite-plugins/00.vue-macros.ts
+++ b/vite-plugins/00.vue-macros.ts
@@ -2,25 +2,27 @@ import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import { getPascalCaseRouteName } from 'unplugin-vue-router';
 import vueRouter from 'unplugin-vue-router/vite';
-import type { PluginOption } from 'vite';
+import type { ConfigEnv, PluginOption } from 'vite';
 import VueMacros from 'vue-macros/vite';

-export default [
-  VueMacros({
-    plugins: {
-      vue: vue({ include: [/\.vue$/, /\.md$/] }),
-      vueJsx: vueJsx(),
+export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
+  return [
+    VueMacros({
+      plugins: {
+        vue: vue({ include: [/\.vue$/, /\.md$/] }),
+        vueJsx: vueJsx(),

-      // https://uvr.esm.is/guide/configuration.html
-      // https://github.com/posva/unplugin-vue-router
-      // ⚠️ Vue must be placed after VueRouter()
-      vueRouter: vueRouter({
-        exclude: ['**/__*', '**/__*/**/*'],
-        extensions: ['.page.vue', '.page.md'],
-        getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
-        logs: false,
-        routesFolder: 'src/pages',
-      }),
-    },
-  }),
-] satisfies PluginOption;
+        // https://uvr.esm.is/guide/configuration.html
+        // https://github.com/posva/unplugin-vue-router
+        // ⚠️ Vue must be placed after VueRouter()
+        vueRouter: vueRouter({
+          exclude: ['**/__*', '**/__*/**/*'],
+          extensions: ['.page.vue', '.page.md'],
+          getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
+          logs: false,
+          routesFolder: 'src/pages',
+        }),
+      },
+    }),
+  ];
+}
--- a/vite-plugins/01.unocss.ts
+++ b/vite-plugins/01.unocss.ts
@@ -1,10 +1,12 @@
-import type { PluginOption } from 'vite';
+import type { ConfigEnv, PluginOption } from 'vite';
 import UnoCSS from 'unocss/vite';

-export default [
-  // https://github.com/antfu/unocss
-  // see uno.config.ts for config
-  UnoCSS({
-    checkImport: true,
-  }),
-] satisfies PluginOption;
+export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
+  return [
+    // https://github.com/antfu/unocss
+    // see uno.config.ts for config
+    UnoCSS({
+      checkImport: true,
+    }),
+  ];
+}
--- a/vite-plugins/01.unplugin-vue-i18n.ts
+++ b/vite-plugins/01.unplugin-vue-i18n.ts
@@ -1,18 +1,20 @@
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
-import type { PluginOption } from 'vite';
+import type { ConfigEnv, PluginOption } from 'vite';

-export default [
-  // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
-  VueI18nPlugin({
-    /* options */
-    // locale messages resource pre-compile option
-    include: ['src/locales/**'],
+export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
+  return [
+    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
+    VueI18nPlugin({
+      /* options */
+      // locale messages resource pre-compile option
+      include: ['src/locales/**'],

-    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#transformi18nblock
-    // transformI18nBlock(src) {
-    //   console.debug(`src :>> `, src);
-    //   console.debug(`typeof src :>> `, typeof src);
-    //   return src as string;
-    // },
-  }),
-] satisfies PluginOption;
+      // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#transformi18nblock
+      // transformI18nBlock(src) {
+      //   console.debug(`src :>> `, src);
+      //   console.debug(`typeof src :>> `, typeof src);
+      //   return src as string;
+      // },
+    }),
+  ];
+}
--- a/vite-plugins/01.unplugin-vue-markdown.ts
+++ b/vite-plugins/01.unplugin-vue-markdown.ts
@@ -1,9 +1,11 @@
-import type { PluginOption } from 'vite';
+import type { ConfigEnv, PluginOption } from 'vite';
 import Markdown from 'unplugin-vue-markdown/vite';

-export default [
-  // https://github.com/unplugin/unplugin-vue-markdown
-  Markdown({
-    headEnabled: true,
-  }),
-] satisfies PluginOption;
+export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
+  return [
+    // https://github.com/unplugin/unplugin-vue-markdown
+    Markdown({
+      headEnabled: true,
+    }),
+  ];
+}
--- a/vite-plugins/01.vite-plugin-vue-meta-layouts.ts
+++ b/vite-plugins/01.vite-plugin-vue-meta-layouts.ts
@@ -1,17 +1,19 @@
-import type { PluginOption } from 'vite';
+import type { ConfigEnv, PluginOption } from 'vite';
 import MetaLayouts from 'vite-plugin-vue-meta-layouts';

-export default [
-  // https://github.com/dishait/vite-plugin-vue-meta-layouts
-  MetaLayouts({
-    target: 'src/layouts',
-    excludes: ['**/!(the-)*.vue'], // 排除非 the- 开头的文件。
-    metaName: 'layout',
-    // defaultLayout: 'sakai-vue/AppLayout',
-    // defaultLayout: 'naive-ui/AppLayout',
-    defaultLayout: 'base-layout/the-base-layout',
-    // !⬇️: 当设置为 `sync` 时，注意`import 'virtual:uno.css'`的顺序问题。
-    // importMode: 'sync', // 默认为自动处理，SSG 时为 sync，非 SSG 时为 async
-    skipTopLevelRouteLayout: true, // 打开修复 https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134，默认为 false 关闭
-  }),
-] satisfies PluginOption;
+export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
+  return [
+    // https://github.com/dishait/vite-plugin-vue-meta-layouts
+    MetaLayouts({
+      target: 'src/layouts',
+      excludes: ['**/!(the-)*.vue'], // 排除非 the- 开头的文件。
+      metaName: 'layout',
+      // defaultLayout: 'sakai-vue/AppLayout',
+      // defaultLayout: 'naive-ui/AppLayout',
+      defaultLayout: 'base-layout/the-base-layout',
+      // !⬇️: 当设置为 `sync` 时，注意`import 'virtual:uno.css'`的顺序问题。
+      // importMode: 'sync', // 默认为自动处理，SSG 时为 sync，非 SSG 时为 async
+      skipTopLevelRouteLayout: true, // 打开修复 https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134，默认为 false 关闭
+    }),
+  ];
+}
--- a/vite-plugins/02.unplugin-auto-import.ts
+++ b/vite-plugins/02.unplugin-auto-import.ts
@@ -76,7 +76,7 @@ export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
        createUtils4uAutoImports(['primevue']),
        {
          'consola/browser': ['consola'],
-          'vue-router/auto': ['useLink'],
+          'unplugin-vue-router/data-loaders/basic': ['defineBasicLoader'],
          'naive-ui': [
            'useModal',
            'useDialog',
--- a/vite-plugins/09.vite-plugin-image-optimizer.ts
+++ b/vite-plugins/09.vite-plugin-image-optimizer.ts
@@ -1,9 +1,11 @@
-import type { PluginOption } from 'vite';
+import type { ConfigEnv, PluginOption } from 'vite';
 import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';

-export default [
-  // https://github.com/FatehAK/vite-plugin-image-optimizer?tab=readme-ov-file#default-configuration
-  ViteImageOptimizer({
-    /* pass your config */
-  }),
-] satisfies PluginOption;
+export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
+  return [
+    // https://github.com/FatehAK/vite-plugin-image-optimizer?tab=readme-ov-file#default-configuration
+    ViteImageOptimizer({
+      /* pass your config */
+    }),
+  ];
+}
--- a/vite-plugins/_loadPlugins.ts
+++ b/vite-plugins/_loadPlugins.ts
@@ -18,6 +18,8 @@ export async function loadPlugins(configEnv: ConfigEnv): Promise<PluginOption[]>
      '**/*.d.ts',
      '**/*.disabled.ts',
      '**/x-*.ts', // 禁用以 x- 开头的插件文件
+      '**/*-x.ts', // 禁用以 -x 结尾的插件文件
+      '**/*-X.ts', // 禁用以 -X 结尾的插件文件
      '**/_*',
    ],
  });
@@ -33,32 +35,22 @@ export async function loadPlugins(configEnv: ConfigEnv): Promise<PluginOption[]>
    const imported = await import(pathToFileURL(entry).href);

    const loadPlugin = imported.loadPlugin as LoadPluginFunction | undefined;
-    let plugin: PluginOption | undefined;
-    let loadMethod = '';

-    // 优先使用 loadPlugin 函数（接收 configEnv 参数）
-    if (loadPlugin && typeof loadPlugin === 'function') {
-      plugin = loadPlugin(configEnv);
-      loadMethod = 'loadPlugin';
-    } else if (imported.default) {
-      plugin = imported.default;
-      loadMethod = 'default';
-    } else {
-      consola.warn(`插件未导出有效内容: ${paddedName}`);
-      continue; // 跳过无效插件
+    if (!loadPlugin || typeof loadPlugin !== 'function') {
+      consola.warn(`插件未导出 loadPlugin 函数: ${paddedName}`);
+      continue;
    }

-    if (plugin) {
-      const pluginArray = Array.isArray(plugin) ? plugin : [plugin];
-      const validPlugins = pluginArray.filter(Boolean); // 过滤掉 null/undefined
-      const pluginCount = validPlugins.length;
+    const plugin = loadPlugin(configEnv);
+    const pluginArray = Array.isArray(plugin) ? plugin : [plugin];
+    const validPlugins = pluginArray.filter(Boolean);
+    const pluginCount = validPlugins.length;

-      if (pluginCount > 0) {
-        plugins.push(...validPlugins);
-        consola.success(`${paddedName} → ${pluginCount} 个实例 (${loadMethod})`);
-      } else {
-        consola.info(`${paddedName} 返回了空数组或无效值`);
-      }
+    if (pluginCount > 0) {
+      plugins.push(...validPlugins);
+      consola.success(`${paddedName} → ${pluginCount} 个实例`);
+    } else {
+      consola.info(`${paddedName} 返回了空数组或无效值`);
    }
  }