feat: 部分Loading统一

packages/chart-message/MessageView.vue

@@ -3,7 +3,7 @@ import { ref, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { EChartPie, EChartBar, EChartHeatmap, EChartCalendar } from '@/components/charts'
 import type { EChartPieData, EChartBarData, EChartHeatmapData, EChartCalendarData } from '@/components/charts'
-import { SectionCard } from '@/components/UI'
+import { SectionCard, LoadingState } from '@/components/UI'
 import {
   queryMessageTypes,
   queryHourlyActivity,
@@ -266,15 +266,13 @@ watch(
 </script>
 
 <template>
-  <div class="main-content mx-auto max-w-[920px] space-y-6 p-6">
+  <div :class="isLoading ? 'h-full' : ''">
     <!-- 加载状态 -->
-    <div v-if="isLoading" class="flex h-64 items-center justify-center">
-      <UIcon name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin text-gray-400" />
-    </div>
+    <LoadingState v-if="isLoading" variant="page" :text="t('common.loading')" />
 
-    <template v-else>
+    <div v-else class="main-content mx-auto max-w-[920px] space-y-6 p-6">
       <!-- 消息画像卡 -->
-      <MessageProfileCard
+    <MessageProfileCard
         v-if="messageTypes.length > 0"
         :session-id="sessionId"
         :session-name="sessionName || ''"
@@ -426,6 +424,6 @@ watch(
           </div>
         </div>
       </SectionCard>
-    </template>
+    </div>
   </div>
 </template>

src/pages/private-chat/components/view/RelationshipView.vue

@@ -294,12 +294,12 @@ function formatDuration(seconds: number): string {
 </script>
 
 <template>
-  <div class="main-content mx-auto max-w-[920px] space-y-6 p-6">
-    <LoadingState v-if="isLoading" :text="t('views.relationship.loading')" />
-
-    <!-- 无会话索引 -->
-    <EmptyState
-      v-else-if="stats && !stats.hasSessionIndex"
+  <div :class="isLoading ? 'h-full' : ''">
+    <LoadingState v-if="isLoading" variant="page" :text="t('common.loading')" />
+    <div v-else class="main-content mx-auto max-w-[920px] space-y-6 p-6">
+      <!-- 无会话索引 -->
+      <EmptyState
+        v-if="stats && !stats.hasSessionIndex"
       icon="i-heroicons-clock"
       :title="t('views.relationship.noIndex.title')"
       :description="t('views.relationship.noIndex.description')"
@@ -742,5 +742,6 @@ function formatDuration(seconds: number): string {
         </div>
       </SectionCard>
     </template>
+    </div>
   </div>
 </template>

src/pages/private-chat/index.vue

@@ -183,7 +183,7 @@ const otherMemberAvatar = computed(() => {
       <!-- Tab Content -->
       <div class="relative flex-1 overflow-y-auto">
         <!-- Loading Overlay -->
-        <LoadingState v-if="isLoading" variant="overlay" />
+        <LoadingState v-if="isLoading" variant="overlay" :text="t('common.loading')" />
 
         <div class="h-full">
           <Transition name="tab-slide" mode="out-in">