perf: optimize initial load by implementing lazy loading for modules and fine-tuning authentication/resource initialization logic.

src/components/cards/FilterRuleGroupCard.vue

@@ -1,10 +1,8 @@
 <script lang="ts" setup>
-import draggable from 'vuedraggable'
 import { copyToClipboard } from '@/@core/utils/navigator'
 import { CustomRule, FilterRuleGroup } from '@/api/types'
 import FilterRuleCard from '@/components/cards/FilterRuleCard.vue'
 import { useToast } from 'vue-toastification'
-import ImportCodeDialog from '@/components/dialog/ImportCodeDialog.vue'
 import filter_group_svg from '@images/svg/filter-group.svg'
 import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
@@ -16,6 +14,10 @@ const display = useDisplay()
 // 获取i18n实例
 const { t } = useI18n()
 
+// 规则组详情弹窗内才需要拖拽和导入代码，避免规则组卡片列表首屏带入重交互依赖。
+const Draggable = defineAsyncComponent(() => import('vuedraggable').then(module => module.default))
+const ImportCodeDialog = defineAsyncComponent(() => import('@/components/dialog/ImportCodeDialog.vue'))
+
 // 输入参数
 const props = defineProps({
   // 单个规则组
@@ -273,7 +275,7 @@ function onClose() {
           </VRow>
         </VCardItem>
         <VCardText>
-          <draggable
+          <Draggable
             v-model="filterRuleCards"
             handle=".cursor-move"
             item-key="pri"
@@ -291,7 +293,7 @@ function onClose() {
                 @close="filterCardClose(element.pri)"
               />
             </template>
-          </draggable>
+          </Draggable>
           <div class="text-center" v-if="filterRuleCards.length == 0">{{ t('filterRule.add') }}</div>
         </VCardText>
         <VCardActions class="pt-3">

src/components/cards/PluginCard.vue

@@ -11,13 +11,15 @@ import VersionHistory from '@/components/misc/VersionHistory.vue'
 import ProgressDialog from '../dialog/ProgressDialog.vue'
 import PluginConfigDialog from '../dialog/PluginConfigDialog.vue'
 import PluginDataDialog from '../dialog/PluginDataDialog.vue'
-import LoggingView from '@/views/system/LoggingView.vue'
 import { useI18n } from 'vue-i18n'
 import { useDisplay } from 'vuetify'
 
 // 显示器宽度
 const display = useDisplay()
 
+// 插件日志面板只有点击“查看日志”时才需要，延后加载可减轻插件列表首屏。
+const LoggingView = defineAsyncComponent(() => import('@/views/system/LoggingView.vue'))
+
 // 输入参数
 const props = defineProps({
   plugin: Object as PropType<Plugin>,

src/components/cards/UserCard.vue

@@ -123,10 +123,10 @@ onMounted(() => {
       'transition-transform duration-300 hover:-translate-y-1',
       !props.user.is_active ? 'opacity-85 bg-surface-lighten-1' : '',
     ]"
-    class="flex flex-column"
+    class="user-card flex flex-column h-full"
     @click="userEditDialog = true"
   >
-    <div class="flex-grow">
+    <div class="user-card__body flex-grow flex-grow-1">
       <!-- 用户头像和基本信息 -->
       <VCardItem :class="[user.is_superuser ? 'admin-header' : '']">
         <template v-slot:prepend>
@@ -247,7 +247,7 @@ onMounted(() => {
     </div>
     <!-- 独立的邮箱显示 -->
     <VDivider class="mx-4" />
-    <div>
+    <div class="user-card__footer">
       <VCardText class="d-flex align-center py-2 px-4 text-medium-emphasis">
         <VIcon icon="mdi-email-outline" size="small" color="primary" class="mr-2 opacity-70" />
         <span class="text-body-2 truncate">{{ user.email || t('user.noEmail') }}</span>
@@ -308,6 +308,16 @@ onMounted(() => {
 </template>
 
 <style scoped>
+.user-card {
+  block-size: 100%;
+}
+
+/* 让邮箱和订阅统计固定在卡片底部，保证同一行用户卡片视觉等高。 */
+.user-card__footer {
+  flex-shrink: 0;
+  margin-block-start: auto;
+}
+
 .admin-decoration {
   position: absolute;
   z-index: 1;

src/components/misc/DashboardElement.vue

@@ -1,21 +1,70 @@
 <script setup lang="ts">
+import { h, resolveComponent } from 'vue'
 import api from '@/api'
 import { DashboardItem } from '@/api/types'
-import AnalyticsMediaStatistic from '@/views/dashboard/AnalyticsMediaStatistic.vue'
-import AnalyticsScheduler from '@/views/dashboard/AnalyticsScheduler.vue'
-import AnalyticsSpeed from '@/views/dashboard/AnalyticsSpeed.vue'
-import AnalyticsStorage from '@/views/dashboard/AnalyticsStorage.vue'
-import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue'
-import AnalyticsCpu from '@/views/dashboard/AnalyticsCpu.vue'
-import AnalyticsMemory from '@/views/dashboard/AnalyticsMemory.vue'
-import AnalyticsNetwork from '@/views/dashboard/AnalyticsNetwork.vue'
-import MediaServerLatest from '@/views/dashboard/MediaServerLatest.vue'
-import MediaServerLibrary from '@/views/dashboard/MediaServerLibrary.vue'
-import MediaServerPlaying from '@/views/dashboard/MediaServerPlaying.vue'
 import DashboardRender from '@/components/render/DashboardRender.vue'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { loadRemoteComponent } from '@/utils/federationLoader'
 
+const DashboardSkeleton = {
+  setup() {
+    const SkeletonLoader = resolveComponent('VSkeletonLoader')
+
+    // 用 render 函数避免 runtime-only Vue 为异步 loadingComponent 解析模板。
+    return () => h(SkeletonLoader, { type: 'card' })
+  },
+}
+
+const asyncDashboardOptions = {
+  loadingComponent: DashboardSkeleton,
+}
+
+// 内置仪表盘按需加载，关闭的卡片不再挤进 dashboard 首屏 chunk。
+const AnalyticsStorage = defineAsyncComponent({
+  loader: () => import('@/views/dashboard/AnalyticsStorage.vue'),
+  ...asyncDashboardOptions,
+})
+const AnalyticsMediaStatistic = defineAsyncComponent({
+  loader: () => import('@/views/dashboard/AnalyticsMediaStatistic.vue'),
+  ...asyncDashboardOptions,
+})
+const AnalyticsWeeklyOverview = defineAsyncComponent({
+  loader: () => import('@/views/dashboard/AnalyticsWeeklyOverview.vue'),
+  ...asyncDashboardOptions,
+})
+const AnalyticsSpeed = defineAsyncComponent({
+  loader: () => import('@/views/dashboard/AnalyticsSpeed.vue'),
+  ...asyncDashboardOptions,
+})
+const AnalyticsScheduler = defineAsyncComponent({
+  loader: () => import('@/views/dashboard/AnalyticsScheduler.vue'),
+  ...asyncDashboardOptions,
+})
+const AnalyticsCpu = defineAsyncComponent({
+  loader: () => import('@/views/dashboard/AnalyticsCpu.vue'),
+  ...asyncDashboardOptions,
+})
+const AnalyticsMemory = defineAsyncComponent({
+  loader: () => import('@/views/dashboard/AnalyticsMemory.vue'),
+  ...asyncDashboardOptions,
+})
+const AnalyticsNetwork = defineAsyncComponent({
+  loader: () => import('@/views/dashboard/AnalyticsNetwork.vue'),
+  ...asyncDashboardOptions,
+})
+const MediaServerLibrary = defineAsyncComponent({
+  loader: () => import('@/views/dashboard/MediaServerLibrary.vue'),
+  ...asyncDashboardOptions,
+})
+const MediaServerPlaying = defineAsyncComponent({
+  loader: () => import('@/views/dashboard/MediaServerPlaying.vue'),
+  ...asyncDashboardOptions,
+})
+const MediaServerLatest = defineAsyncComponent({
+  loader: () => import('@/views/dashboard/MediaServerLatest.vue'),
+  ...asyncDashboardOptions,
+})
+
 // 输入参数
 const props = defineProps({
   // 仪表板配置
@@ -53,9 +102,7 @@ const dynamicPluginComponent = defineAsyncComponent({
     }
   },
   // 加载中显示的组件
-  loadingComponent: {
-    template: '<VSkeletonLoader type="card"></VSkeletonLoader>',
-  },
+  loadingComponent: DashboardSkeleton,
   // 添加错误处理
   errorComponent: {
     template: `