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/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