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.

src/App.vue

@@ -9,10 +9,10 @@ import AppNaiveUIProvider from './AppNaiveUIProvider.vue';
   <Toast style="z-index: 5000" />
 
   <AppNaiveUIProvider>
-    <router-view v-slot="{ Component }">
-      <transition name="fade" mode="out-in">
+    <RouterView v-slot="{ Component }">
+      <Transition name="fade" mode="out-in">
         <component :is="Component" />
-      </transition>
-    </router-view>
+      </Transition>
+    </RouterView>
   </AppNaiveUIProvider>
 </template>

src/AppNaiveUIProvider.vue

@@ -42,17 +42,17 @@ declare global {
     :theme="appStore.isDark ? darkTheme : null"
     abstract
   >
-    <n-loading-bar-provider>
-      <n-message-provider>
-        <n-notification-provider>
-          <n-modal-provider>
-            <n-dialog-provider>
+    <NLoadingBarProvider>
+      <NMessageProvider>
+        <NNotificationProvider>
+          <NModalProvider>
+            <NDialogProvider>
               <slot></slot>
               <ContextHolder />
-            </n-dialog-provider>
-          </n-modal-provider>
-        </n-notification-provider>
-      </n-message-provider>
-    </n-loading-bar-provider>
+            </NDialogProvider>
+          </NModalProvider>
+        </NNotificationProvider>
+      </NMessageProvider>
+    </NLoadingBarProvider>
   </NConfigProvider>
 </template>

src/layouts/base-layout/base-layout-header/components/LanguageSwitchButton.vue

@@ -25,7 +25,7 @@ function handleSelect(key: string) {
   <NDropdown trigger="hover" placement="bottom-end" :options="options" @select="handleSelect">
     <NButton quaternary class="flex items-center gap-1">
       <template #icon>
-        <icon-clarity-language-line w-4.5 h-4.5 />
+        <IconClarityLanguageLine w-4.5 h-4.5 />
       </template>
       <span>{{ languageLabels[locale] }}</span>
     </NButton>

src/layouts/base-layout/base-layout-header/components/ThemeSwitchButton.vue

@@ -13,17 +13,17 @@ const themeLabels: Record<AppThemeMode, string> = {
     {{ themeLabels[appStore.themeMode] }}
     <template #trigger>
       <NButton quaternary @click="appStore.cycleTheme()">
-        <icon-line-md-sunny-filled-loop-to-moon-filled-loop-transition
+        <IconLineMdSunnyFilledLoopToMoonFilledLoopTransition
           v-if="appStore.themeMode === 'light'"
           w-4.5
           h-4.5
         />
-        <icon-line-md-moon-filled-to-sunny-filled-loop-transition
+        <IconLineMdMoonFilledToSunnyFilledLoopTransition
           v-else-if="appStore.themeMode === 'dark'"
           w-4.5
           h-4.5
         />
-        <icon-line-md-computer v-else w-4.5 h-4.5 />
+        <IconLineMdComputer v-else w-4.5 h-4.5 />
       </NButton>
     </template>
   </NTooltip>

src/layouts/base-layout/base-layout-header/components/ToggleSiderButton.vue

@@ -15,8 +15,8 @@ function toggleCollapsed() {
     {{ appStore.sidebarCollapsed ? '展开菜单' : '收起菜单' }}
     <template #trigger>
       <NButton ref="buttonRef" quaternary @click="toggleCollapsed">
-        <icon-line-md-menu-fold-right v-if="appStore.sidebarCollapsed" w-4.5 h-4.5 />
-        <icon-line-md-menu-fold-left v-else w-4.5 h-4.5 />
+        <IconLineMdMenuFoldRight v-if="appStore.sidebarCollapsed" w-4.5 h-4.5 />
+        <IconLineMdMenuFoldLeft v-else w-4.5 h-4.5 />
       </NButton>
     </template>
   </NTooltip>

src/layouts/base-layout/base-layout-header/components/UserDropdown.vue

@@ -39,7 +39,7 @@ function handleSelect(key: string) {
 <template>
   <NDropdown :options="options" placement="bottom-end" @select="handleSelect">
     <NButton quaternary circle>
-      <icon-material-symbols-account-circle w-5 h-5 />
+      <IconMaterialSymbolsAccountCircle w-5 h-5 />
     </NButton>
   </NDropdown>
 </template>

src/layouts/base-layout/the-base-layout.vue

@@ -29,11 +29,11 @@ const appStore = useAppStore();
       <BaseLayoutSider />
     </template>
     <!-- <div>GlobalContent</div> -->
-    <router-view v-slot="{ Component }">
-      <transition name="fade" mode="out-in">
+    <RouterView v-slot="{ Component }">
+      <Transition name="fade" mode="out-in">
         <component :is="Component" />
-      </transition>
-    </router-view>
+      </Transition>
+    </RouterView>
     <!-- <div>ThemeDrawer</div> -->
     <template #footer>
       <div

src/locales-utils/route-messages/en-US.ts

@@ -1,9 +1,12 @@
-/*eslint sort-keys: "error"*/
+/*eslint perfectionist/sort-objects: "error"*/
 /**
- * 启用 sort-keys 规则以强制对象键按字母顺序排序
+ * 启用 perfectionist/sort-objects 规则以强制对象键按字母顺序排序
  * 原因：
  * 1. 减少多人协作时的合并冲突
  * 2. 保持代码一致性，提高可维护性
+ *
+ * 运行以下命令自动修复排序：
+ * pnpm exec eslint --fix --no-ignore src/locales-utils/route-messages/
  */
 
 export default {

src/locales-utils/route-messages/zh-CN.ts

@@ -1,9 +1,12 @@
-/*eslint sort-keys: "error"*/
+/*eslint perfectionist/sort-objects: "error"*/
 /**
- * 启用 sort-keys 规则以强制对象键按字母顺序排序
+ * 启用 perfectionist/sort-objects 规则以强制对象键按字母顺序排序
  * 原因：
  * 1. 减少多人协作时的合并冲突
  * 2. 保持代码一致性，提高可维护性
+ *
+ * 运行以下命令自动修复排序：
+ * pnpm exec eslint --fix --no-ignore src/locales-utils/route-messages/
  */
 
 export default {

src/pages/demos/counter-demo.page.vue

@@ -128,7 +128,7 @@ const resetCount = () => {
             </button>
 
             <!-- Naive UI 按钮 -->
-            <n-button
+            <NButton
               type="warning"
               size="large"
               block
@@ -148,7 +148,7 @@ const resetCount = () => {
                 </svg>
               </template>
               点击 +1 (Naive UI)
-            </n-button>
+            </NButton>
 
             <!-- 重置按钮 -->
             <button

src/pages/demos/i18n-demo.page.vue

@@ -9,29 +9,29 @@ function setLocale(newLocale: 'en-US' | 'zh-CN') {
 
 <template>
   <div class="p-4">
-    <n-h1>{{ t('page.i18n-demo.title') }}</n-h1>
+    <NH1>{{ t('page.i18n-demo.title') }}</NH1>
 
-    <n-card :title="t('page.i18n-demo.change-language')">
-      <n-p>
+    <NCard :title="t('page.i18n-demo.change-language')">
+      <NP>
         {{ t('page.i18n-demo.current-language') }}:
         <span class="font-bold">{{ locale }}</span>
-      </n-p>
+      </NP>
 
-      <n-p>
+      <NP>
         {{ t('page.i18n-demo.hello', { name: 'Kilo' }) }}
-      </n-p>
+      </NP>
 
-      <n-space>
-        <n-button type="primary" @click="setLocale('en-US')"> English </n-button>
-        <n-button type="success" @click="setLocale('zh-CN')"> 简体中文 </n-button>
-      </n-space>
-    </n-card>
+      <NSpace>
+        <NButton type="primary" @click="setLocale('en-US')"> English </NButton>
+        <NButton type="success" @click="setLocale('zh-CN')"> 简体中文 </NButton>
+      </NSpace>
+    </NCard>
 
     <!-- 这里响应式有问题: -->
-    <n-p> $route.meta.title: {{ $route.meta.title }} </n-p>
+    <NP> $route.meta.title: {{ $route.meta.title }} </NP>
     <!-- 这样才正常 -->
-    <n-p>
+    <NP>
       routeI18nInstance.global.t($route.name): {{ routeI18nInstance.global.t($route.name) }}
-    </n-p>
+    </NP>
   </div>
 </template>

src/pages/index.page.vue

@@ -2,6 +2,6 @@
 
 <template>
   <div>
-    <n-button @click="$router.push({ name: 'DemosCreate' })">DemosCreate</n-button>
+    <NButton @click="$router.push({ name: 'DemosCreate' })">DemosCreate</NButton>
   </div>
 </template>