diff --git a/Yi.Ai.Vue3/src/App.vue b/Yi.Ai.Vue3/src/App.vue
index e1bab0c5..ac1b0a53 100644
--- a/Yi.Ai.Vue3/src/App.vue
+++ b/Yi.Ai.Vue3/src/App.vue
@@ -1,28 +1,58 @@
 <script setup lang="ts">
+import type { AnnouncementLogDto } from '@/api';
+import { getSystemAnnouncements } from '@/api';
 import SystemAnnouncementDialog from '@/components/SystemAnnouncementDialog/index.vue';
-import { getMockSystemAnnouncements } from '@/data/mockAnnouncementData.ts';
 import { useAnnouncementStore } from '@/stores';
 
 const announcementStore = useAnnouncementStore();
 
+// 模拟数据（当后端接口未就绪时使用）
+const mockData: AnnouncementLogDto[] = [
+  {
+    title: 'v2.3.0',
+    content: [
+      '重大更新',
+      '1：优化整体',
+      '2: 还有谁',
+    ],
+    imageUrl: 'https://ccnetcore.com/prod-api/wwwroot/logo.png',
+    startTime: '2025-11-10 14:58:58',
+    endTime: null,
+    type: 'System',
+  },
+  {
+    title: 'KFC翻牌活动',
+    content: [
+      '666',
+      '777',
+      '2: 还有谁',
+    ],
+    imageUrl: 'https://ccnetcore.com/prod-api/wwwroot/logo.png',
+    startTime: '2025-11-10 14:58:58',
+    endTime: '2025-11-15 14:59:49',
+    type: 'Activity',
+  },
+];
+
 // 应用加载时检查是否需要显示公告弹窗
 onMounted(async () => {
+  console.log('announcementStore.shouldShowDialog--', announcementStore.shouldShowDialog);
   // 检查是否应该显示弹窗
   if (announcementStore.shouldShowDialog) {
     try {
       // 获取公告数据
-      // const res = await getSystemAnnouncements();
-      // 使用模拟数据进行测试
-      const res = await getMockSystemAnnouncements();
-      if (res.data) {
+      const res = await getSystemAnnouncements();
+      if (res && res.data && Array.isArray(res.data) && res.data.length > 0) {
         announcementStore.setAnnouncementData(res.data);
         // 显示弹窗
         announcementStore.openDialog();
       }
     }
     catch (error) {
-      console.error('获取系统公告失败:', error);
-      // 静默失败，不影响用户体验
+      console.error('获取系统公告失败，使用模拟数据:', error);
+      // 使用模拟数据作为降级方案
+      announcementStore.setAnnouncementData(mockData);
+      announcementStore.openDialog();
     }
   }
 });
diff --git a/Yi.Ai.Vue3/src/api/announcement/index.ts b/Yi.Ai.Vue3/src/api/announcement/index.ts
index 25b7b76c..a8ae2870 100644
--- a/Yi.Ai.Vue3/src/api/announcement/index.ts
+++ b/Yi.Ai.Vue3/src/api/announcement/index.ts
@@ -1,31 +1,12 @@
-import { get } from '@/utils/request'
-import type {
-  ActivityDetailResponse,
-  AnnouncementDetailResponse,
-  SystemAnnouncementResponse,
-} from './types'
+import type { AnnouncementLogDto } from './types';
+import { get } from '@/utils/request';
 
 /**
  * 获取系统公告和活动数据
+ * 后端接口: GET /api/app/announcement
+ * 返回格式: AnnouncementLogDto[]
  */
 export function getSystemAnnouncements() {
-  return get<SystemAnnouncementResponse>('/announcement/system').json()
+  return get<AnnouncementLogDto[]>('/announcement').json();
 }
-
-/**
- * 获取活动详情
- * @param id 活动ID
- */
-export function getActivityDetail(id: string | number) {
-  return get<ActivityDetailResponse>(`/announcement/activity/${id}`).json()
-}
-
-/**
- * 获取公告详情
- * @param id 公告ID
- */
-export function getAnnouncementDetail(id: string | number) {
-  return get<AnnouncementDetailResponse>(`/announcement/detail/${id}`).json()
-}
-
-export * from './types'
+export * from './types';
diff --git a/Yi.Ai.Vue3/src/api/announcement/types.ts b/Yi.Ai.Vue3/src/api/announcement/types.ts
index 576cee6f..c05a030a 100644
--- a/Yi.Ai.Vue3/src/api/announcement/types.ts
+++ b/Yi.Ai.Vue3/src/api/announcement/types.ts
@@ -1,51 +1,18 @@
-// 轮播图类型
-export interface CarouselItem {
-  id: number | string
-  imageUrl: string
-  link?: string
-  title?: string
-}
+// 公告类型（对应后端 AnnouncementTypeEnum）
+export type AnnouncementType = 'Activity' | 'System'
 
-// 活动类型
-export interface Activity {
-  id: number | string
+// 公告DTO（对应后端 AnnouncementLogDto）
+export interface AnnouncementLogDto {
+  /** 标题 */
   title: string
-  description: string
-  content: string
-  coverImage?: string
-  startTime?: string
-  endTime?: string
-  status: 'active' | 'inactive' | 'expired'
-  createdAt: string
-  updatedAt?: string
-}
-
-// 公告类型
-export interface Announcement {
-  id: number | string
-  title: string
-  content: string
-  type: 'latest' | 'history'
-  isImportant?: boolean
-  publishTime: string
-  createdAt: string
-  updatedAt?: string
-}
-
-// 系统公告响应类型
-export interface SystemAnnouncementResponse {
-  carousels: CarouselItem[]
-  activities: Activity[]
-  announcements: Announcement[]
-}
-
-// 公告详情响应类型
-export interface AnnouncementDetailResponse extends Announcement {
-  views?: number
-}
-
-// 活动详情响应类型
-export interface ActivityDetailResponse extends Activity {
-  views?: number
-  participantCount?: number
+  /** 内容列表 */
+  content: string[]
+  /** 图片url */
+  imageUrl?: string | null
+  /** 开始时间（系统公告时间、活动开始时间） */
+  startTime: string
+  /** 活动结束时间 */
+  endTime?: string | null
+  /** 公告类型（系统、活动） */
+  type: AnnouncementType
 }
diff --git a/Yi.Ai.Vue3/src/api/user/index.ts b/Yi.Ai.Vue3/src/api/user/index.ts
index 2c1db1b7..a19f0073 100644
--- a/Yi.Ai.Vue3/src/api/user/index.ts
+++ b/Yi.Ai.Vue3/src/api/user/index.ts
@@ -1,5 +1,53 @@
 import { get, post } from '@/utils/request';
 
+// 尊享包用量明细DTO
+export interface PremiumTokenUsageDto {
+  /** id */
+  id: string;
+  /** 用户ID */
+  userId: string;
+  /** 包名称 */
+  packageName: string;
+  /** 总用量（总token数） */
+  totalTokens: number;
+  /** 剩余用量（剩余token数） */
+  remainingTokens: number;
+  /** 已使用token数 */
+  usedTokens: number;
+  /** 到期时间 */
+  expireDateTime?: string;
+  /** 是否激活 */
+  isActive: boolean;
+  /** 购买金额 */
+  purchaseAmount: number;
+  /** 备注 */
+  remark?: string;
+}
+
+// 查询参数接口 - 匹配后端 PagedAllResultRequestDto
+export interface PremiumTokenUsageQueryParams {
+  /** 查询开始时间 */
+  startTime?: string;
+  /** 查询结束时间 */
+  endTime?: string;
+  /** 排序列名 */
+  orderByColumn?: string;
+  /** 排序方向（ascending/descending） */
+  isAsc?: string;
+  /** 跳过数量（分页） */
+  skipCount?: number;
+  /** 最大返回数量（分页） */
+  maxResultCount?: number;
+}
+
+// 分页响应接口
+export interface PagedResult<T> {
+  /** 数据列表 */
+  items: T[];
+  /** 总数量 */
+  totalCount: number;
+}
+
 // 获取用户信息
 export function getUserInfo() {
   return get<any>('/account/ai').json();
@@ -24,3 +72,63 @@ export function getWechatAuth(data: any) {
 export function getPremiumTokenPackage() {
   return get<any>('/usage-statistics/premium-token-usage').json();
 }
+
+// 获取尊享包用量明细列表
+export function getPremiumTokenUsageList(params?: PremiumTokenUsageQueryParams) {
+  return get<PagedResult<PremiumTokenUsageDto>>('/usage-statistics/premium-token-usage/list', params).json();
+}
+
+// 查询条件的后端dto,其他查询或者排序由前端自己实现：
+// using Volo.Abp.Application.Dtos;
+//
+// namespace Yi.Framework.Ddd.Application.Contracts
+// {
+//   /// <summary>
+//   /// 分页查询请求DTO，包含时间范围和自定义排序功能
+//   /// </summary>
+//   public class PagedAllResultRequestDto : PagedAndSortedResultRequestDto, IPagedAllResultRequestDto
+//   {
+//     /// <summary>
+//     /// 查询开始时间
+//     /// </summary>
+//   public DateTime? StartTime { get; set; }
+//
+//     /// <summary>
+//     /// 查询结束时间
+//     /// </summary>
+//   public DateTime? EndTime { get; set; }
+//
+//     /// <summary>
+//     /// 排序列名
+//     /// </summary>
+//   public string? OrderByColumn { get; set; }
+//
+//     /// <summary>
+//     /// 排序方向（ascending/descending）
+//     /// </summary>
+//   public string? IsAsc { get; set; }
+//
+//     /// <summary>
+//     /// 是否为升序排序
+//     /// </summary>
+//   public bool IsAscending => string.Equals(IsAsc, "ascending", StringComparison.OrdinalIgnoreCase);
+//
+//   private string? _sorting;
+//
+//     /// <summary>
+//     /// 排序表达式
+//     /// </summary>
+//   public override string? Sorting
+//     {
+//       get
+//     {
+//       if (!string.IsNullOrWhiteSpace(OrderByColumn))
+//       {
+//         return $"{OrderByColumn} {(IsAscending ? "ASC" : "DESC")}";
+//       }
+//       return _sorting;
+//     }
+//     set => _sorting = value;
+//   }
+//   }
+// }
diff --git a/Yi.Ai.Vue3/src/components/ModelSelect/index.vue b/Yi.Ai.Vue3/src/components/ModelSelect/index.vue
index ddadb148..f3b482aa 100644
--- a/Yi.Ai.Vue3/src/components/ModelSelect/index.vue
+++ b/Yi.Ai.Vue3/src/components/ModelSelect/index.vue
@@ -110,6 +110,9 @@ function handleModelClick(item: GetSessionListVO) {
    规则3：彩色流光（尊享/高级）
 -------------------------------- */
 function getModelStyleClass(modelName: any) {
+  if (!modelName) {
+    return;
+  }
   const name = modelName.toLowerCase();
 
   // 规则3：彩色流光
diff --git a/Yi.Ai.Vue3/src/components/SystemAnnouncementDialog/index.vue b/Yi.Ai.Vue3/src/components/SystemAnnouncementDialog/index.vue
index f73bcdb0..13fedee7 100644
--- a/Yi.Ai.Vue3/src/components/SystemAnnouncementDialog/index.vue
+++ b/Yi.Ai.Vue3/src/components/SystemAnnouncementDialog/index.vue
@@ -1,83 +1,77 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
-import { ElMessage } from 'element-plus'
-import { useRouter } from 'vue-router'
-import type { Activity, Announcement } from '@/api'
-import { useAnnouncementStore } from '@/stores'
-import type { CloseType } from '@/stores/modules/announcement'
+import type { AnnouncementLogDto } from '@/api';
+import type { CloseType } from '@/stores/modules/announcement';
+import { ElMessage } from 'element-plus';
+import { storeToRefs } from 'pinia';
+import { useAnnouncementStore } from '@/stores';
 
-const router = useRouter()
-const announcementStore = useAnnouncementStore()
+const announcementStore = useAnnouncementStore();
 
-const activeTab = ref('activity')
+const activeTab = ref('activity');
 
 // 窗口宽度响应式状态
-const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1920)
+const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1920);
 
 // 监听窗口大小变化
 onMounted(() => {
   const handleResize = () => {
-    windowWidth.value = window.innerWidth
-  }
-  window.addEventListener('resize', handleResize)
+    windowWidth.value = window.innerWidth;
+  };
+  window.addEventListener('resize', handleResize);
   onUnmounted(() => {
-    window.removeEventListener('resize', handleResize)
-  })
-})
+    window.removeEventListener('resize', handleResize);
+  });
+});
 
 // 响应式弹窗宽度
 const dialogWidth = computed(() => {
-  if (windowWidth.value < 768) return '95%'
-  if (windowWidth.value < 1024) return '90%'
-  return '700px'
-})
+  if (windowWidth.value < 768)
+    return '95%';
+  if (windowWidth.value < 1024)
+    return '90%';
+  return '700px';
+});
 
 // 从store获取数据
-const { carousels, activities, announcements, isDialogVisible } = storeToRefs(announcementStore)
+const { announcements, isDialogVisible } = storeToRefs(announcementStore);
 
-// 分离最新公告和历史公告
-const latestAnnouncements = computed(() =>
-  announcements.value.filter(a => a.type === 'latest'),
-)
-const historyAnnouncements = computed(() =>
-  announcements.value.filter(a => a.type === 'history'),
-)
+// 分离活动和系统公告
+const activities = computed(() => {
+  if (!Array.isArray(announcements.value))
+    return [];
+  return announcements.value.filter(a => a.type === 'Activity');
+});
+const systemAnnouncements = computed(() => {
+  if (!Array.isArray(announcements.value))
+    return [];
+  return announcements.value.filter(a => a.type === 'System');
+});
 
 // 处理关闭弹窗
 function handleClose(type: CloseType) {
-  announcementStore.closeDialog(type)
+  announcementStore.closeDialog(type);
 
   const messages = {
     today: '今日内不再显示',
-    week: '本周内不再显示',
     permanent: '公告已关闭',
-  }
+  };
 
-  ElMessage.success(messages[type])
-}
-
-// 查看活动详情
-function viewActivityDetail(activity: Activity) {
-  router.push({
-    name: 'activityDetail',
-    params: { id: activity.id },
-  })
-  announcementStore.isDialogVisible = false
-}
-
-// 查看公告详情
-function viewAnnouncementDetail(announcement: Announcement) {
-  router.push({
-    name: 'announcementDetail',
-    params: { id: announcement.id },
-  })
-  announcementStore.isDialogVisible = false
+  ElMessage.success(messages[type]);
 }
 
 // 格式化时间
 function formatTime(time: string) {
-  const date = new Date(time)
-  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+  const date = new Date(time);
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+}
+
+// 判断活动状态
+function getActivityStatus(activity: AnnouncementLogDto): 'active' | 'expired' {
+  if (!activity.endTime)
+    return 'active';
+  const now = new Date();
+  const endTime = new Date(activity.endTime);
+  return now > endTime ? 'expired' : 'active';
 }
 </script>
 
@@ -86,7 +80,7 @@ function formatTime(time: string) {
     v-model="isDialogVisible"
     title="系统公告"
     :width="dialogWidth"
-    :close-on-click-modal="false"
+    :close-on-click-modal="true"
     class="announcement-dialog"
   >
     <div class="announcement-dialog-content">
@@ -95,61 +89,71 @@ function formatTime(time: string) {
         <el-tab-pane label="活动" name="activity">
           <div class="tab-content-wrapper">
             <div class="activity-content">
-              <!-- 轮播图 -->
-              <el-carousel
-                v-if="carousels.length > 0"
-                height="250px"
-                class="carousel-container"
-              >
-                <el-carousel-item v-for="item in carousels" :key="item.id">
-                  <img
-                    :src="item.imageUrl"
-                    :alt="item.title"
-                    class="carousel-image"
-                  >
-                  <div v-if="item.title" class="carousel-title">
-                    {{ item.title }}
-                  </div>
-                </el-carousel-item>
-              </el-carousel>
-
               <!-- 活动列表 -->
-              <div class="activity-list">
+              <div v-if="activities.length > 0" class="activity-list">
                 <div
-                  v-for="activity in activities"
-                  :key="activity.id"
+                  v-for="(activity, index) in activities"
+                  :key="index"
                   class="activity-item"
                 >
-                  <div class="activity-header">
-                    <h3 class="activity-title">{{ activity.title }}</h3>
-                    <el-tag
-                      v-if="activity.status === 'active'"
-                      type="success"
-                      size="small"
-                    >
-                      进行中
-                    </el-tag>
-                    <el-tag
-                      v-else-if="activity.status === 'expired'"
-                      type="info"
-                      size="small"
-                    >
-                      已结束
-                    </el-tag>
+                  <!-- 活动图片 -->
+                  <div v-if="activity.imageUrl" class="activity-image-wrapper">
+                    <img :src="activity.imageUrl" :alt="activity.title" class="activity-image">
+                    <!-- 图片上的状态标签 -->
+                    <div class="activity-status-badge">
+                      <el-tag
+                        v-if="getActivityStatus(activity) === 'active'"
+                        type="success"
+                        size="small"
+                        effect="dark"
+                      >
+                        进行中
+                      </el-tag>
+                      <el-tag
+                        v-else
+                        type="info"
+                        size="small"
+                        effect="dark"
+                      >
+                        已结束
+                      </el-tag>
+                    </div>
                   </div>
-                  <p class="activity-description">{{ activity.description }}</p>
-                  <div class="activity-footer">
-                    <span class="activity-time">{{ formatTime(activity.createdAt) }}</span>
-                    <el-button
-                      type="primary"
-                      link
-                      @click="viewActivityDetail(activity)"
-                    >
-                      查看详情
-                    </el-button>
+
+                  <div class="activity-body">
+                    <div class="activity-header">
+                      <h3 class="activity-title">
+                        {{ activity.title }}
+                      </h3>
+                    </div>
+
+                    <!-- 活动内容 -->
+                    <div class="activity-content-list">
+                      <p v-for="(line, idx) in activity.content" :key="idx" class="content-line">
+                        {{ line }}
+                      </p>
+                    </div>
+
+                    <div class="activity-footer">
+                      <div class="activity-time-range">
+                        <span class="activity-time">{{ formatTime(activity.startTime) }}</span>
+                        <span v-if="activity.endTime" class="activity-time">至 {{ formatTime(activity.endTime) }}</span>
+                      </div>
+                      <!-- 查看详情按钮 -->
+                      <a
+                        v-if="activity.url"
+                        :href="activity.url"
+                        target="_blank"
+                        class="detail-link"
+                      >
+                        查看详情
+                        <span class="detail-icon">→</span>
+                      </a>
+                    </div>
                   </div>
                 </div>
               </div>
+              <el-empty v-else description="暂无活动" />
             </div>
           </div>
         </el-tab-pane>
@@ -158,70 +162,45 @@ function formatTime(time: string) {
         <el-tab-pane label="公告" name="announcement">
           <div class="tab-content-wrapper">
             <div class="announcement-content">
-              <!-- 最新公告 -->
-              <div v-if="latestAnnouncements.length > 0" class="latest-section">
-                <h3 class="section-title">最新公告</h3>
-                <div
-                  v-for="announcement in latestAnnouncements"
-                  :key="announcement.id"
-                  class="announcement-item latest"
-                >
-                  <div class="announcement-header">
-                    <h4 class="announcement-title">
-                      <el-icon v-if="announcement.isImportant" color="#f56c6c">
-                        <i-ep-warning />
-                      </el-icon>
-                      {{ announcement.title }}
-                    </h4>
-                    <span class="announcement-time">{{ formatTime(announcement.publishTime) }}</span>
-                  </div>
-                  <p class="announcement-summary">{{ announcement.content.substring(0, 100) }}...</p>
-                  <el-button
-                    type="primary"
-                    link
-                    @click="viewAnnouncementDetail(announcement)"
-                  >
-                    查看详情
-                  </el-button>
-                </div>
-              </div>
-
-              <!-- 历史公告（时间线） -->
-              <div v-if="historyAnnouncements.length > 0" class="history-section">
-                <h3 class="section-title">历史公告</h3>
+              <!-- 系统公告列表 -->
+              <div v-if="systemAnnouncements.length > 0">
                 <el-timeline>
                   <el-timeline-item
-                    v-for="announcement in historyAnnouncements"
-                    :key="announcement.id"
-                    :timestamp="formatTime(announcement.publishTime)"
+                    v-for="(announcement, index) in systemAnnouncements"
+                    :key="index"
+                    :timestamp="formatTime(announcement.startTime)"
                     placement="top"
                   >
-                    <div class="timeline-item-content">
-                      <h4 class="timeline-title">{{ announcement.title }}</h4>
-                      <p class="timeline-summary">{{ announcement.content.substring(0, 80) }}...</p>
-                      <el-button
-                        type="primary"
-                        link
-                        size="small"
-                        @click="viewAnnouncementDetail(announcement)"
-                      >
-                        查看详情
-                      </el-button>
+                    <div class="announcement-item">
+                      <div class="announcement-header">
+                        <h4 class="announcement-title">
+                          {{ announcement.title }}
+                        </h4>
+                      </div>
+
+                      <!-- 公告内容 -->
+                      <div class="announcement-content-list">
+                        <p v-for="(line, idx) in announcement.content" :key="idx" class="content-line">
+                          {{ line }}
+                        </p>
+                      </div>
                     </div>
                   </el-timeline-item>
                 </el-timeline>
               </div>
+              <el-empty v-else description="暂无公告" />
             </div>
           </div>
         </el-tab-pane>
-    </el-tabs>
+      </el-tabs>
     </div>
 
     <!-- 底部按钮 -->
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="handleClose('week')">本周关闭</el-button>
-        <el-button @click="handleClose('today')">今日关闭</el-button>
+        <el-button @click="handleClose('today')">
+          今日关闭
+        </el-button>
         <el-button type="primary" @click="handleClose('permanent')">
           关闭公告
         </el-button>
@@ -231,6 +210,21 @@ function formatTime(time: string) {
 </template>
 
 <style scoped lang="scss">
+// 弹窗遮罩动画
+:deep(.el-overlay) {
+  backdrop-filter: blur(4px);
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 // 确保弹窗本身不会溢出
 :deep(.el-dialog) {
   margin-top: 5vh !important;
@@ -238,6 +232,101 @@ function formatTime(time: string) {
   max-height: 90vh;
   display: flex;
   flex-direction: column;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
+  animation: slideInDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+:deep(.el-dialog__header) {
+  padding: 24px 28px;
+  border-bottom: none;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -5%;
+    width: 200px;
+    height: 200px;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
+    border-radius: 50%;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -20%;
+    left: -3%;
+    width: 150px;
+    height: 150px;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+    border-radius: 50%;
+  }
+
+  .el-dialog__title {
+    color: #fff;
+    font-size: 20px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    &::before {
+      content: '📣';
+      font-size: 24px;
+      animation: bounce 2s infinite;
+    }
+  }
+
+  .el-dialog__headerbtn {
+    top: 24px;
+    right: 24px;
+    z-index: 1;
+
+    .el-dialog__close {
+      color: #fff;
+      font-size: 22px;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.15);
+      backdrop-filter: blur(10px);
+      transition: all 0.3s;
+
+      &:hover {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.25);
+        transform: rotate(90deg);
+      }
+    }
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
 }
 
 :deep(.el-dialog__body) {
@@ -246,6 +335,36 @@ function formatTime(time: string) {
   display: flex;
   flex-direction: column;
   padding: 0 !important;
+  background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
+    background-size: 200% 100%;
+    animation: shimmer 3s linear infinite;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+:deep(.el-dialog__footer) {
+  padding: 20px 28px;
+  border-top: 1px solid #e4e7ed;
+  background: linear-gradient(to top, #fafbfc 0%, #ffffff 100%);
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03);
 }
 
 .announcement-dialog-content {
@@ -264,6 +383,31 @@ function formatTime(time: string) {
   :deep(.el-tabs__header) {
     flex-shrink: 0;
     margin: 0 20px;
+    padding-top: 16px;
+    background-color: #f8f9fa;
+  }
+
+  :deep(.el-tabs__nav-wrap::after) {
+    display: none;
+  }
+
+  :deep(.el-tabs__active-bar) {
+    background-color: #667eea;
+    height: 3px;
+  }
+
+  :deep(.el-tabs__item) {
+    font-size: 15px;
+    font-weight: 500;
+    color: #606266;
+
+    &:hover {
+      color: #667eea;
+    }
+
+    &.is-active {
+      color: #667eea;
+    }
   }
 
   :deep(.el-tabs__content) {
@@ -283,25 +427,26 @@ function formatTime(time: string) {
   max-height: 60vh;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 0 20px 20px;
+  padding: 20px 24px 24px;
   flex-shrink: 0;
 
-  // 确保滚动条样式
+  // 自定义滚动条样式
   &::-webkit-scrollbar {
-    width: 6px;
+    width: 8px;
   }
 
   &::-webkit-scrollbar-track {
-    background: #f1f1f1;
-    border-radius: 3px;
+    background: #f1f3f5;
+    border-radius: 4px;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #c1c1c1;
-    border-radius: 3px;
+    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+    border-radius: 4px;
+    transition: background 0.3s;
 
     &:hover {
-      background: #a8a8a8;
+      background: linear-gradient(180deg, #5568d3 0%, #65408b 100%);
     }
   }
 }
@@ -309,112 +454,409 @@ function formatTime(time: string) {
 .activity-content {
   min-height: min-content;
 
-  .carousel-container {
-    margin-bottom: 24px;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-
-  .carousel-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .carousel-title {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 12px 16px;
-    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
-    color: #fff;
-    font-size: 16px;
-    font-weight: 500;
-  }
-
   .activity-list {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: 20px;
   }
 
   .activity-item {
-    padding: 16px;
-    background: #f5f7fa;
-    border-radius: 8px;
-    transition: all 0.3s;
+    position: relative;
+    padding: 0;
+    background: #fff;
+    border-radius: 16px;
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    border: 2px solid transparent;
+    background-clip: padding-box;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 16px;
+      padding: 2px;
+      background: linear-gradient(135deg, transparent 0%, transparent 100%);
+      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      opacity: 0;
+      transition: opacity 0.4s;
+    }
 
     &:hover {
-      background: #e8eaed;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      transform: translateY(-8px) scale(1.01);
+      box-shadow: 0 16px 40px rgba(102, 126, 234, 0.25);
+      border-color: #667eea;
+
+      &::before {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        opacity: 1;
+      }
+
+      .activity-image {
+        transform: scale(1.1);
+        filter: brightness(1.05);
+      }
+
+      .detail-link {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #fff;
+        padding-right: 16px;
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+
+        .detail-icon {
+          transform: translateX(6px) scale(1.2);
+        }
+      }
     }
   }
 
+  .activity-image-wrapper {
+    position: relative;
+    width: 100%;
+    height: 220px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+      z-index: 1;
+      animation: shine 3s infinite;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 100px;
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  @keyframes shine {
+    0% {
+      left: -100%;
+    }
+    50%, 100% {
+      left: 100%;
+    }
+  }
+
+  .activity-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .activity-status-badge {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    z-index: 2;
+    animation: fadeInScale 0.5s ease-out 0.3s both;
+
+    :deep(.el-tag) {
+      border-radius: 20px;
+      padding: 7px 18px;
+      font-weight: 700;
+      font-size: 13px;
+      border: none;
+      backdrop-filter: blur(12px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+      transition: all 0.3s;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+
+      &.el-tag--success.el-tag--dark {
+        background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
+        color: #fff;
+        animation: pulse 2s ease-in-out infinite;
+      }
+
+      &.el-tag--info.el-tag--dark {
+        background: rgba(148, 163, 184, 0.95);
+        color: #fff;
+      }
+
+      &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
+      }
+    }
+  }
+
+  @keyframes fadeInScale {
+    from {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
+    }
+    50% {
+      box-shadow: 0 4px 20px rgba(16, 185, 129, 0.6);
+    }
+  }
+
+  .activity-body {
+    padding: 20px;
+  }
+
   .activity-header {
     display: flex;
     align-items: center;
     gap: 12px;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
   }
 
   .activity-title {
     margin: 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #303133;
+    font-size: 18px;
+    font-weight: 700;
+    color: #1a1a1a;
     flex: 1;
+    line-height: 1.4;
+    background: linear-gradient(135deg, #1a1a1a 0%, #4a5568 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    transition: all 0.3s;
+
+    .activity-item:hover & {
+      letter-spacing: 0.3px;
+    }
   }
 
-  .activity-description {
-    margin: 0 0 12px 0;
-    color: #606266;
+  .activity-content-list {
+    padding: 0;
+    margin: 0 0 16px 0;
+    color: #4a5568;
     font-size: 14px;
-    line-height: 1.5;
+    line-height: 1.8;
+
+    .content-line {
+      margin: 8px 0;
+      padding-left: 18px;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 11px;
+        width: 6px;
+        height: 6px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 50%;
+      }
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 
   .activity-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 16px;
+    padding-top: 16px;
+    border-top: 1px dashed #e8e9eb;
+  }
+
+  .activity-time-range {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
   }
 
   .activity-time {
-    font-size: 12px;
-    color: #909399;
+    font-size: 13px;
+    color: #718096;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    &:first-child::before {
+      content: '🕐';
+      font-size: 14px;
+    }
+  }
+
+  .detail-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 18px;
+    background: linear-gradient(135deg, #f0f1f3 0%, #e8eaed 100%);
+    color: #667eea;
+    border-radius: 24px;
+    font-size: 13px;
+    font-weight: 700;
+    text-decoration: none;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.3);
+      transform: translate(-50%, -50%);
+      transition: width 0.6s, height 0.6s;
+    }
+
+    &:hover::before {
+      width: 300px;
+      height: 300px;
+    }
+
+    &:hover {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: #fff;
+      transform: translateX(4px) scale(1.05);
+      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+    }
+
+    .detail-icon {
+      font-size: 18px;
+      font-weight: bold;
+      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+      position: relative;
+      z-index: 1;
+    }
+
+    span:not(.detail-icon) {
+      position: relative;
+      z-index: 1;
+    }
   }
 }
 
 .announcement-content {
   min-height: min-content;
 
-  .section-title {
-    margin: 0 0 16px 0;
-    font-size: 16px;
-    font-weight: 600;
-    color: #303133;
-    padding-bottom: 8px;
-    border-bottom: 2px solid #409eff;
+  :deep(.el-timeline) {
+    padding-left: 20px;
   }
 
-  .latest-section {
-    margin-bottom: 32px;
+  :deep(.el-timeline-item__node) {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: 3px solid #fff;
+    box-shadow: 0 0 0 2px #e8e9eb;
+    width: 16px;
+    height: 16px;
+  }
+
+  :deep(.el-timeline-item__tail) {
+    border-left: 2px dashed #d1d5db;
+  }
+
+  :deep(.el-timeline-item__timestamp) {
+    color: #718096;
+    font-size: 13px;
+    font-weight: 500;
+    margin-bottom: 10px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+
+    &::before {
+      content: '📅';
+      font-size: 14px;
+    }
   }
 
   .announcement-item {
-    padding: 16px;
-    background: #f5f7fa;
-    border-radius: 8px;
-    margin-bottom: 12px;
-    transition: all 0.3s;
+    position: relative;
+    padding: 24px;
+    background: #fff;
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 16px;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e8e9eb;
+    border-left: 4px solid #e8e9eb;
 
-    &:hover {
-      background: #e8eaed;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      transform: scaleY(0);
+      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
-    &.latest {
-      border-left: 3px solid #409eff;
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.05), transparent);
+      transform: translateY(-50%);
+      transition: left 0.6s;
+    }
+
+    &:hover {
+      transform: translateX(8px) scale(1.02);
+      box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
+      border-color: transparent;
+      background: linear-gradient(to right, rgba(102, 126, 234, 0.03), #fff);
+
+      &::before {
+        transform: scaleY(1);
+      }
+
+      &::after {
+        left: 100%;
+      }
+
+      .announcement-title {
+        color: #667eea;
+        transform: translateX(4px);
+      }
     }
   }
 
@@ -422,52 +864,73 @@ function formatTime(time: string) {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
   }
 
   .announcement-title {
     margin: 0;
-    font-size: 15px;
-    font-weight: 600;
-    color: #303133;
+    font-size: 16px;
+    font-weight: 700;
+    color: #1a1a1a;
+    line-height: 1.4;
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 10px;
+    transition: all 0.3s;
+
+    &::before {
+      content: '📢';
+      font-size: 20px;
+      animation: swing 2s ease-in-out infinite;
+      transform-origin: top center;
+    }
   }
 
-  .announcement-time {
-    font-size: 12px;
-    color: #909399;
+  @keyframes swing {
+    0%, 100% {
+      transform: rotate(0deg);
+    }
+    10%, 30% {
+      transform: rotate(-10deg);
+    }
+    20%, 40% {
+      transform: rotate(10deg);
+    }
+    50% {
+      transform: rotate(0deg);
+    }
   }
 
-  .announcement-summary {
-    margin: 0 0 12px 0;
-    color: #606266;
+  .announcement-content-list {
+    padding: 0;
+    margin: 0;
+    color: #4a5568;
     font-size: 14px;
-    line-height: 1.5;
-  }
+    line-height: 1.8;
 
-  .history-section {
-    :deep(.el-timeline) {
-      padding-left: 0;
-    }
+    .content-line {
+      margin: 8px 0;
+      padding-left: 18px;
+      position: relative;
 
-    .timeline-item-content {
-      padding-left: 8px;
-    }
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 11px;
+        width: 6px;
+        height: 6px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 50%;
+      }
 
-    .timeline-title {
-      margin: 0 0 8px 0;
-      font-size: 14px;
-      font-weight: 600;
-      color: #303133;
-    }
+      &:first-child {
+        margin-top: 0;
+      }
 
-    .timeline-summary {
-      margin: 0 0 8px 0;
-      color: #606266;
-      font-size: 13px;
-      line-height: 1.5;
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }
@@ -476,6 +939,83 @@ function formatTime(time: string) {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
+
+  :deep(.el-button) {
+    border-radius: 24px;
+    padding: 12px 28px;
+    font-weight: 600;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.3);
+      transform: translate(-50%, -50%);
+      transition: width 0.6s, height 0.6s;
+    }
+
+    &:active::before {
+      width: 300px;
+      height: 300px;
+    }
+
+    &:not(.el-button--primary) {
+      border: 2px solid #d1d5db;
+      color: #4a5568;
+      background: #fff;
+
+      &:hover {
+        border-color: #667eea;
+        color: #667eea;
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+      }
+    }
+
+    &.el-button--primary {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+
+      &:hover {
+        background: linear-gradient(135deg, #5568d3 0%, #65408b 100%);
+        transform: translateY(-3px) scale(1.02);
+        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);
+      }
+
+      &:active {
+        transform: translateY(-1px) scale(0.98);
+      }
+    }
+
+    span {
+      position: relative;
+      z-index: 1;
+    }
+  }
+}
+
+// 空状态样式优化
+:deep(.el-empty) {
+  padding: 60px 0;
+
+  .el-empty__image {
+    width: 120px;
+  }
+
+  .el-empty__description {
+    color: #9ca3af;
+    font-size: 14px;
+    margin-top: 16px;
+  }
 }
 
 // 移动端适配
@@ -483,93 +1023,111 @@ function formatTime(time: string) {
   :deep(.el-dialog) {
     margin: 5vh auto !important;
     max-height: 90vh;
+    border-radius: 10px;
   }
 
   :deep(.el-dialog__header) {
-    padding: 16px;
-    flex-shrink: 0;
+    padding: 16px 20px;
+
+    .el-dialog__title {
+      font-size: 16px;
+    }
   }
 
   :deep(.el-dialog__footer) {
-    padding: 12px;
-    flex-shrink: 0;
+    padding: 12px 16px;
   }
 
   .announcement-tabs {
     :deep(.el-tabs__header) {
       margin: 0 12px;
+      padding-top: 12px;
+    }
+
+    :deep(.el-tabs__item) {
+      font-size: 14px;
+      padding: 0 16px;
     }
   }
 
   .tab-content-wrapper {
     height: calc(90vh - 230px);
     max-height: calc(90vh - 230px);
-    padding: 0 12px 12px;
-    flex-shrink: 0;
+    padding: 16px 16px 20px;
     -webkit-overflow-scrolling: touch;
 
-    // 移动端滚动条样式
     &::-webkit-scrollbar {
       width: 4px;
     }
   }
 
   .activity-content {
-    .carousel-container {
-      margin-bottom: 16px;
-    }
-
-    .carousel-title {
-      padding: 8px 12px;
-      font-size: 14px;
+    .activity-list {
+      gap: 16px;
     }
 
     .activity-item {
-      padding: 12px;
+      border-radius: 10px;
+    }
+
+    .activity-image-wrapper {
+      height: 180px;
+    }
+
+    .activity-body {
+      padding: 16px;
+    }
+
+    .activity-header {
+      margin-bottom: 10px;
     }
 
     .activity-title {
-      font-size: 14px;
+      font-size: 16px;
     }
 
-    .activity-description {
+    .activity-content-list {
+      margin-bottom: 12px;
       font-size: 13px;
+      line-height: 1.7;
     }
 
     .activity-footer {
+      padding-top: 12px;
       flex-direction: column;
       align-items: flex-start;
-      gap: 8px;
+      gap: 12px;
+    }
+
+    .detail-link {
+      width: 100%;
+      justify-content: center;
+      padding: 10px 16px;
     }
   }
 
   .announcement-content {
-    .section-title {
-      font-size: 14px;
-      margin-bottom: 12px;
+    :deep(.el-timeline) {
+      padding-left: 16px;
     }
 
     .announcement-item {
-      padding: 12px;
-      margin-bottom: 8px;
+      padding: 16px;
+      border-radius: 10px;
+      margin-bottom: 12px;
     }
 
     .announcement-title {
-      font-size: 14px;
+      font-size: 15px;
+
+      &::before {
+        font-size: 16px;
+      }
     }
 
-    .announcement-summary {
+    .announcement-content-list {
       font-size: 13px;
-    }
-
-    .history-section {
-      .timeline-title {
-        font-size: 13px;
-      }
-
-      .timeline-summary {
-        font-size: 12px;
-      }
+      line-height: 1.7;
     }
   }
 
@@ -577,9 +1135,10 @@ function formatTime(time: string) {
     flex-direction: column;
     gap: 8px;
 
-    .el-button {
+    :deep(.el-button) {
       width: 100%;
       margin: 0;
+      padding: 11px 24px;
     }
   }
 }
@@ -594,5 +1153,82 @@ function formatTime(time: string) {
   .announcement-tabs {
     max-height: calc(90vh - 200px);
   }
+
+  .activity-content {
+    .activity-image-wrapper {
+      height: 200px;
+    }
+  }
+
+  .announcement-content {
+    .announcement-item {
+      padding: 18px;
+    }
+  }
+}
+
+// 添加入场动画
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.activity-item {
+  animation: slideInUp 0.5s ease-out both;
+
+  @for $i from 1 through 10 {
+    &:nth-child(#{$i}) {
+      animation-delay: #{$i * 0.08}s;
+    }
+  }
+}
+
+.announcement-item {
+  animation: slideInUp 0.5s ease-out both;
+}
+
+// 滚动条美化
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f3f5;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+  border-radius: 4px;
+  transition: background 0.3s;
+
+  &:hover {
+    background: linear-gradient(180deg, #5568d3 0%, #65408b 100%);
+  }
+}
+
+// 添加标签页切换动画
+:deep(.el-tabs__content) {
+  .el-tab-pane {
+    animation: fadeInContent 0.4s ease-out;
+  }
+}
+
+@keyframes fadeInContent {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 </style>
diff --git a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumPackageInfo.vue b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumPackageInfo.vue
new file mode 100644
index 00000000..5dff94eb
--- /dev/null
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumPackageInfo.vue
@@ -0,0 +1,590 @@
+<script lang="ts" setup>
+import { Clock, Coin, TrophyBase, WarningFilled } from '@element-plus/icons-vue';
+import { showProductPackage } from '@/utils/product-package.ts';
+
+// Props
+interface Props {
+  packageData: {
+    totalQuota: number;
+    usedQuota: number;
+    remainingQuota: number;
+    usagePercentage: number;
+    packageName: string;
+    expireDate: string;
+  };
+  loading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+});
+
+// Emits
+const emit = defineEmits<{
+  refresh: [];
+}>();
+
+// 计算属性
+const usagePercent = computed(() => {
+  if (props.packageData.totalQuota === 0)
+    return 0;
+  return Number(((props.packageData.usedQuota / props.packageData.totalQuota) * 100).toFixed(2));
+});
+
+const remainingPercent = computed(() => {
+  if (props.packageData.totalQuota === 0)
+    return 0;
+  return Number(((props.packageData.remainingQuota / props.packageData.totalQuota) * 100).toFixed(2));
+});
+
+// 获取进度条颜色（基于剩余百分比）
+const progressColor = computed(() => {
+  const percent = remainingPercent.value;
+  if (percent <= 10)
+    return '#f56c6c'; // 红色 - 剩余很少
+  if (percent <= 30)
+    return '#e6a23c'; // 橙色 - 剩余较少
+  return '#67c23a'; // 绿色 - 剩余充足
+});
+
+// 格式化数字 - 转换为万为单位
+function formatNumber(num: number): string {
+  if (num === 0)
+    return '0';
+  const wan = num / 10000;
+  // 保留2位小数，去掉末尾的0
+  return wan.toFixed(2).replace(/\.?0+$/, '');
+}
+
+// 格式化原始数字（带千分位）
+function formatRawNumber(num: number): string {
+  return num.toLocaleString();
+}
+
+function onProductPackage() {
+  showProductPackage();
+}
+</script>
+
+<template>
+  <div v-loading="loading" class="premium-package-info">
+    <div class="header">
+      <div class="header-left">
+        <el-icon class="header-main-icon">
+          <TrophyBase />
+        </el-icon>
+        <div class="header-titles">
+          <h2 class="main-title">
+            尊享服务
+          </h2>
+          <p class="sub-title">
+            Premium Service
+          </p>
+        </div>
+      </div>
+      <el-button
+        type="primary"
+        size="default"
+        @click="emit('refresh')"
+      >
+        <el-icon><i-ep-refresh /></el-icon>
+        刷新数据
+      </el-button>
+    </div>
+
+    <!-- 套餐信息卡片 -->
+    <el-card class="package-card" shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <div class="card-header-left">
+            <el-icon class="header-icon">
+              <Coin />
+            </el-icon>
+            <div class="header-text">
+              <span class="header-title">尊享TOKEN包总览</span>
+              <span class="header-subtitle">{{ packageData.packageName }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <div class="package-content">
+        <!-- 统计数据 -->
+        <div class="stats-grid">
+          <div class="stat-item total">
+            <div class="stat-label">
+              购买总额度
+            </div>
+            <div class="stat-value">
+              {{ formatNumber(packageData.totalQuota) }}
+            </div>
+            <div class="stat-unit">
+              万 Tokens
+            </div>
+            <div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.totalQuota)} Tokens`">
+              ({{ formatRawNumber(packageData.totalQuota) }})
+            </div>
+          </div>
+
+          <div class="stat-item used">
+            <div class="stat-label">
+              已用额度
+            </div>
+            <div class="stat-value">
+              {{ formatNumber(packageData.usedQuota) }}
+            </div>
+            <div class="stat-unit">
+              万 Tokens
+            </div>
+            <div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.usedQuota)} Tokens`">
+              ({{ formatRawNumber(packageData.usedQuota) }})
+            </div>
+          </div>
+
+          <div class="stat-item remaining">
+            <div class="stat-label">
+              剩余额度
+            </div>
+            <div class="stat-value">
+              {{ formatNumber(packageData.remainingQuota) }}
+            </div>
+            <div class="stat-unit">
+              万 Tokens
+            </div>
+            <div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.remainingQuota)} Tokens`">
+              ({{ formatRawNumber(packageData.remainingQuota) }})
+            </div>
+          </div>
+        </div>
+
+        <!-- 进度条 -->
+        <div class="progress-section">
+          <div class="progress-header">
+            <span class="progress-label">剩余进度</span>
+            <span class="progress-percent" :style="{ color: progressColor }">
+              {{ remainingPercent }}%
+            </span>
+          </div>
+
+          <el-progress
+            :percentage="remainingPercent"
+            :color="progressColor"
+            :stroke-width="20"
+            :show-text="false"
+          />
+
+          <div class="progress-legend">
+            <div class="legend-item">
+              <span class="legend-dot " :style="{ background: progressColor }" />
+              <span class="legend-text">剩余: {{ remainingPercent }}%</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-dot used-dot" />
+              <span class="legend-text">已使用: {{ usagePercent }}%</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 购买提示卡片（额度不足时显示） -->
+        <el-card
+          v-if="remainingPercent < 20"
+          class="warning-card"
+          shadow="hover"
+        >
+          <div class="warning-content">
+            <el-icon class="warning-icon" color="#e6a23c">
+              <WarningFilled />
+            </el-icon>
+            <div class="warning-text">
+              <h3>额度即将用完</h3>
+              <p>您的Token额度已使用{{ usagePercent }}%，剩余额度较少，建议及时充值。</p>
+            </div>
+            <el-button type="warning" @click="onProductPackage()">
+              立即充值
+            </el-button>
+          </div>
+        </el-card>
+
+        <!-- 过期时间 -->
+        <div v-if="packageData.expireDate" class="expire-info">
+          <el-icon><Clock /></el-icon>
+          <span>有效期至: {{ packageData.expireDate }}</span>
+        </div>
+
+        <!-- 温馨提示 -->
+        <el-alert
+          class="tips-alert"
+          type="info"
+          :closable="false"
+          show-icon
+        >
+          <template #title>
+            <div class="tips-content">
+              <p>温馨提示：</p>
+              <ul>
+                <li>Token额度根据不同模型消耗速率不同</li>
+                <li>建议合理使用，避免额度过快消耗</li>
+                <li>额度不足时请及时充值，避免影响使用</li>
+              </ul>
+            </div>
+          </template>
+        </el-alert>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.premium-package-info {
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid #f0f2f5;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.header-main-icon {
+  font-size: 36px;
+  color: #f59e0b;
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  padding: 12px;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
+}
+
+.header-titles {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.main-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: #1a1a1a;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.sub-title {
+  margin: 0;
+  font-size: 13px;
+  color: #909399;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+/* 套餐卡片 */
+.package-card {
+  border-radius: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  border: 1px solid #f0f2f5;
+  transition: all 0.3s;
+
+  &:hover {
+    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
+    border-color: #667eea;
+  }
+
+  :deep(.el-card__header) {
+    background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%);
+    border-bottom: 2px solid #f0f2f5;
+  }
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-icon {
+  font-size: 24px;
+  color: #f59e0b;
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+.header-subtitle {
+  font-size: 13px;
+  color: #909399;
+}
+
+.package-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* 统计数据网格 */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.stat-item {
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+  transition: transform 0.2s;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.stat-item:hover {
+  transform: translateY(-4px);
+}
+
+.stat-item.total {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.stat-item.used {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.stat-item.remaining {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.stat-label {
+  font-size: 14px;
+  opacity: 0.9;
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.stat-unit {
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+.stat-raw {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-top: 4px;
+  cursor: help;
+  transition: opacity 0.2s;
+}
+
+.stat-raw:hover {
+  opacity: 1;
+}
+
+/* 进度条部分 */
+.progress-section {
+  padding: 20px;
+  background: #f7f8fa;
+  border-radius: 8px;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.progress-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.progress-percent {
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.progress-legend {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  margin-top: 12px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.used-dot {
+  background: #409eff;
+}
+
+.legend-text {
+  font-size: 14px;
+  color: #606266;
+}
+
+/* 过期信息 */
+.expire-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #f0f9ff;
+  border-radius: 6px;
+  color: #0369a1;
+  font-size: 14px;
+}
+
+/* 温馨提示 */
+.tips-alert {
+  border-radius: 8px;
+}
+
+.tips-content p {
+  margin: 0 0 8px 0;
+  font-weight: 600;
+}
+
+.tips-content ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.tips-content li {
+  margin: 4px 0;
+  font-size: 13px;
+}
+
+/* 警告卡片 */
+.warning-card {
+  border-radius: 12px;
+  border: 2px solid #e6a23c;
+  background: #fef3e9;
+}
+
+.warning-content {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.warning-icon {
+  font-size: 40px;
+  flex-shrink: 0;
+}
+
+.warning-text {
+  flex: 1;
+}
+
+.warning-text h3 {
+  margin: 0 0 8px 0;
+  color: #e6a23c;
+  font-size: 18px;
+}
+
+.warning-text p {
+  margin: 0;
+  color: #606266;
+  font-size: 14px;
+}
+
+/* 响应式布局 */
+@media (max-width: 768px) {
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    padding-bottom: 16px;
+  }
+
+  .header-main-icon {
+    font-size: 28px;
+    padding: 10px;
+  }
+
+  .main-title {
+    font-size: 20px;
+  }
+
+  .sub-title {
+    font-size: 12px;
+  }
+
+  .stats-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .stat-value {
+    font-size: 24px;
+  }
+
+  .progress-legend {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .warning-content {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .card-header-left {
+    gap: 10px;
+  }
+
+  .header-icon {
+    font-size: 20px;
+    padding: 6px;
+  }
+
+  .header-title {
+    font-size: 16px;
+  }
+
+  .header-subtitle {
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumService.vue b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumService.vue
index 7032219d..70828b77 100644
--- a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumService.vue
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumService.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { Clock, Coin, TrophyBase, WarningFilled } from '@element-plus/icons-vue';
 import { getPremiumTokenPackage } from '@/api/user';
-import { showProductPackage } from '@/utils/product-package.ts';
+import PremiumPackageInfo from './PremiumPackageInfo.vue';
+import PremiumUsageList from './PremiumUsageList.vue';
 
 // 尊享服务数据
 const loading = ref(false);
@@ -14,59 +14,8 @@ const packageData = ref<any>({
   expireDate: '', // 过期时间
 });
 
-// 计算属性
-const usagePercent = computed(() => {
-  if (packageData.value.totalQuota === 0)
-    return 0;
-  return Number(((packageData.value.usedQuota / packageData.value.totalQuota) * 100).toFixed(2));
-});
-
-const remainingPercent = computed(() => {
-  if (packageData.value.totalQuota === 0)
-    return 0;
-  return Number(((packageData.value.remainingQuota / packageData.value.totalQuota) * 100).toFixed(2));
-});
-
-// 获取进度条颜色（基于剩余百分比）
-const progressColor = computed(() => {
-  const percent = remainingPercent.value;
-  if (percent <= 10)
-    return '#f56c6c'; // 红色 - 剩余很少
-  if (percent <= 30)
-    return '#e6a23c'; // 橙色 - 剩余较少
-  return '#67c23a'; // 绿色 - 剩余充足
-});
-
-// 格式化数字 - 转换为万为单位
-function formatNumber(num: number): string {
-  if (num === 0)
-    return '0';
-  const wan = num / 10000;
-  // 保留2位小数，去掉末尾的0
-  return wan.toFixed(2).replace(/\.?0+$/, '');
-}
-
-// 格式化原始数字（带千分位）
-function formatRawNumber(num: number): string {
-  return num.toLocaleString();
-}
-/*
-前端已准备好，后端需要提供以下API：
-
-  接口地址: GET /account/premium/token-package
-
-返回数据格式:
-{
-  "success": true,
-  "data": {
-  "totalQuota": 1000000,       // 购买总额度
-    "usedQuota": 350000,          // 已使用额度
-    "remainingQuota": 650000,     // 剩余额度（可选，前端会自动计算）
-    "usagePercentage": 35,        // 使用百分比（可选）
-    "packageName": "尊享VIP套餐",  // 套餐名称（可选）
-    "expireDate": "2024-12-31"    // 过期时间（可选）
-}
-} */
+// 子组件引用
+const usageListRef = ref<InstanceType<typeof PremiumUsageList>>();
 
 // 获取尊享服务Token包数据
 async function fetchPremiumTokenPackage() {
@@ -103,434 +52,84 @@ async function fetchPremiumTokenPackage() {
   }
 }
 
-// 刷新数据
+// 刷新所有数据
 function refreshData() {
   fetchPremiumTokenPackage();
+  usageListRef.value?.refresh();
 }
 
 onMounted(() => {
   fetchPremiumTokenPackage();
 });
-
-function onProductPackage() {
-  showProductPackage();
-}
 </script>
 
 <template>
-  <div v-loading="loading" class="premium-service">
-    <div class="header">
-      <h2>
-        <el-icon><TrophyBase /></el-icon>
-        尊享服务
-      </h2>
-      <el-button
-        type="primary"
-        size="small"
-        @click="refreshData"
-      >
-        刷新数据
-      </el-button>
+  <div class="premium-service">
+    <!-- 套餐信息 -->
+    <PremiumPackageInfo
+      :package-data="packageData"
+      :loading="loading"
+      @refresh="refreshData"
+    />
+
+    <!-- 额度明细列表 -->
+    <div class="usage-list-wrapper">
+      <PremiumUsageList ref="usageListRef" />
     </div>
-
-    <!-- 套餐信息卡片 -->
-    <el-card class="package-card" shadow="hover">
-      <template #header>
-        <div class="card-header">
-          <el-icon class="header-icon">
-            <Coin />
-          </el-icon>
-          <span class="header-title">{{ packageData.packageName }}</span>
-        </div>
-      </template>
-
-      <div class="package-content">
-        <!-- 统计数据 -->
-        <div class="stats-grid">
-          <div class="stat-item total">
-            <div class="stat-label">
-              购买总额度
-            </div>
-            <div class="stat-value">
-              {{ formatNumber(packageData.totalQuota) }}
-            </div>
-            <div class="stat-unit">
-              万 Tokens
-            </div>
-            <div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.totalQuota)} Tokens`">
-              ({{ formatRawNumber(packageData.totalQuota) }})
-            </div>
-          </div>
-
-          <div class="stat-item used">
-            <div class="stat-label">
-              已用额度
-            </div>
-            <div class="stat-value">
-              {{ formatNumber(packageData.usedQuota) }}
-            </div>
-            <div class="stat-unit">
-              万 Tokens
-            </div>
-            <div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.usedQuota)} Tokens`">
-              ({{ formatRawNumber(packageData.usedQuota) }})
-            </div>
-          </div>
-
-          <div class="stat-item remaining">
-            <div class="stat-label">
-              剩余额度
-            </div>
-            <div class="stat-value">
-              {{ formatNumber(packageData.remainingQuota) }}
-            </div>
-            <div class="stat-unit">
-              万 Tokens
-            </div>
-            <div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.remainingQuota)} Tokens`">
-              ({{ formatRawNumber(packageData.remainingQuota) }})
-            </div>
-          </div>
-        </div>
-
-        <!-- 进度条 -->
-        <div class="progress-section">
-          <div class="progress-header">
-            <span class="progress-label">剩余进度</span>
-            <span class="progress-percent" :style="{ color: progressColor }">
-              {{ remainingPercent }}%
-            </span>
-          </div>
-
-          <el-progress
-            :percentage="remainingPercent"
-            :color="progressColor"
-            :stroke-width="20"
-            :show-text="false"
-          />
-
-          <div class="progress-legend">
-            <div class="legend-item">
-              <span class="legend-dot " :style="{ background: progressColor }" />
-              <span class="legend-text">剩余: {{ remainingPercent }}%</span>
-            </div>
-            <div class="legend-item">
-              <span class="legend-dot used-dot" />
-              <span class="legend-text">已使用: {{ usagePercent }}%</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 购买提示卡片（额度不足时显示） -->
-        <el-card
-          v-if="remainingPercent < 20"
-          class="warning-card"
-          shadow="hover"
-        >
-          <div class="warning-content">
-            <el-icon class="warning-icon" color="#e6a23c">
-              <WarningFilled />
-            </el-icon>
-            <div class="warning-text">
-              <h3>额度即将用完</h3>
-              <p>您的Token额度已使用{{ usagePercent }}%，剩余额度较少，建议及时充值。</p>
-            </div>
-            <el-button type="warning" @click="onProductPackage()">
-              立即充值
-            </el-button>
-          </div>
-        </el-card>
-        <!-- 过期时间 -->
-        <div v-if="packageData.expireDate" class="expire-info">
-          <el-icon><Clock /></el-icon>
-          <span>有效期至: {{ packageData.expireDate }}</span>
-        </div>
-
-        <!-- 温馨提示 -->
-        <el-alert
-          class="tips-alert"
-          type="info"
-          :closable="false"
-          show-icon
-        >
-          <template #title>
-            <div class="tips-content">
-              <p>温馨提示：</p>
-              <ul>
-                <li>Token额度根据不同模型消耗速率不同</li>
-                <li>建议合理使用，避免额度过快消耗</li>
-                <li>额度不足时请及时充值，避免影响使用</li>
-              </ul>
-            </div>
-          </template>
-        </el-alert>
-      </div>
-    </el-card>
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .premium-service {
-  padding: 20px;
-  position: relative;
+  padding: 24px;
   height: 100%;
   overflow-y: auto;
+  background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
+
+  // 美化滚动条
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f3f5;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
+    border-radius: 4px;
+
+    &:hover {
+      background: linear-gradient(180deg, #5568d3 0%, #65408b 100%);
+    }
+  }
 }
 
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
+.usage-list-wrapper {
+  margin-top: 24px;
+  animation: slideInUp 0.4s ease-out;
 }
 
-.header h2 {
-  display: flex;
-  align-items: center;
-  margin: 0;
-  font-size: 20px;
-  color: #333;
-}
-
-.header .el-icon {
-  margin-right: 8px;
-  color: #f59e0b;
-}
-
-/* 套餐卡片 */
-.package-card {
-  margin-bottom: 20px;
-  border-radius: 12px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
-.header-icon {
-  font-size: 20px;
-  color: #f59e0b;
-}
-
-.package-content {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
-/* 统计数据网格 */
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-}
-
-.stat-item {
-  padding: 20px;
-  border-radius: 8px;
-  text-align: center;
-  transition: transform 0.2s;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-}
-
-.stat-item:hover {
-  transform: translateY(-4px);
-}
-
-.stat-item.total {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-.stat-item.used {
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-}
-
-.stat-item.remaining {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-}
-
-.stat-label {
-  font-size: 14px;
-  opacity: 0.9;
-  margin-bottom: 8px;
-}
-
-.stat-value {
-  font-size: 28px;
-  font-weight: 700;
-  margin-bottom: 4px;
-}
-
-.stat-unit {
-  font-size: 12px;
-  opacity: 0.8;
-}
-
-.stat-raw {
-  font-size: 11px;
-  opacity: 0.7;
-  margin-top: 4px;
-  cursor: help;
-  transition: opacity 0.2s;
-}
-
-.stat-raw:hover {
-  opacity: 1;
-}
-
-/* 进度条部分 */
-.progress-section {
-  padding: 20px;
-  background: #f7f8fa;
-  border-radius: 8px;
-}
-
-.progress-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.progress-label {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.progress-percent {
-  font-size: 20px;
-  font-weight: 700;
-}
-
-.progress-legend {
-  display: flex;
-  justify-content: center;
-  gap: 24px;
-  margin-top: 12px;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.legend-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-}
-
-.used-dot {
-  background: #409eff;
-}
-
-.remaining-dot {
-  background: #e4e7ed;
-}
-
-.legend-text {
-  font-size: 14px;
-  color: #606266;
-}
-
-/* 过期信息 */
-.expire-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: #f0f9ff;
-  border-radius: 6px;
-  color: #0369a1;
-  font-size: 14px;
-}
-
-/* 温馨提示 */
-.tips-alert {
-  border-radius: 8px;
-}
-
-.tips-content p {
-  margin: 0 0 8px 0;
-  font-weight: 600;
-}
-
-.tips-content ul {
-  margin: 0;
-  padding-left: 20px;
-}
-
-.tips-content li {
-  margin: 4px 0;
-  font-size: 13px;
-}
-
-/* 警告卡片 */
-.warning-card {
-  border-radius: 12px;
-  border: 2px solid #e6a23c;
-  background: #fef3e9;
-}
-
-.warning-content {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.warning-icon {
-  font-size: 40px;
-  flex-shrink: 0;
-}
-
-.warning-text {
-  flex: 1;
-}
-
-.warning-text h3 {
-  margin: 0 0 8px 0;
-  color: #e6a23c;
-  font-size: 18px;
-}
-
-.warning-text p {
-  margin: 0;
-  color: #606266;
-  font-size: 14px;
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* 响应式布局 */
 @media (max-width: 768px) {
   .premium-service {
-    padding: 10px;
+    padding: 12px;
   }
 
-  .stats-grid {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-
-  .stat-value {
-    font-size: 24px;
-  }
-
-  .progress-legend {
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .warning-content {
-    flex-direction: column;
-    text-align: center;
+  .usage-list-wrapper {
+    margin-top: 16px;
   }
 }
 </style>
diff --git a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumUsageList.vue b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumUsageList.vue
new file mode 100644
index 00000000..f3b21e3a
--- /dev/null
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumUsageList.vue
@@ -0,0 +1,948 @@
+<script lang="ts" setup>
+import type { PremiumTokenUsageDto, PremiumTokenUsageQueryParams } from '@/api/user';
+import { Clock, Refresh, Search } from '@element-plus/icons-vue';
+import { debounce } from 'lodash-es';
+import { getPremiumTokenUsageList } from '@/api/user';
+
+// 额度明细列表
+const usageList = ref<PremiumTokenUsageDto[]>([]); // 后端返回的原始数据
+const filteredList = ref<PremiumTokenUsageDto[]>([]); // 前端过滤后的数据
+const displayList = ref<PremiumTokenUsageDto[]>([]); // 最终显示的数据（前端分页后）
+const listLoading = ref(false);
+const totalCount = ref(0); // 后端总数
+const filteredTotalCount = ref(0); // 前端过滤后的总数
+
+// 是否有前端筛选条件
+const hasClientFilter = computed(() => {
+  return !!searchKeyword.value || statusFilter.value !== null;
+});
+
+// 查询参数
+const queryParams = ref<PremiumTokenUsageQueryParams>({
+  skipCount: 0,
+  maxResultCount: 10,
+});
+
+// 当前页码
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+// 筛选条件
+const dateRange = ref<[Date, Date] | null>(null);
+const searchKeyword = ref('');
+const statusFilter = ref<boolean | null>(null);
+
+// 快捷时间选择
+const shortcuts = [
+  {
+    text: '最近一周',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    },
+  },
+  {
+    text: '最近一个月',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    },
+  },
+  {
+    text: '最近三个月',
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    },
+  },
+];
+
+// 格式化数字 - 转换为万为单位
+function formatNumber(num: number): string {
+  if (num === 0)
+    return '0';
+  const wan = num / 10000;
+  return wan.toFixed(2).replace(/\.?0+$/, '');
+}
+
+// 格式化日期时间
+function formatDateTime(dateTime: string): string {
+  return new Date(dateTime).toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+// 获取使用率颜色
+function getUsageColor(used: number, total: number): string {
+  if (total === 0)
+    return '#e4e7ed';
+  const percent = (used / total) * 100;
+  if (percent >= 90)
+    return '#f56c6c'; // 红色
+  if (percent >= 70)
+    return '#e6a23c'; // 橙色
+  return '#409eff'; // 蓝色
+}
+
+// 获取额度明细列表
+async function fetchUsageList(resetPage = false) {
+  if (resetPage) {
+    currentPage.value = 1;
+    queryParams.value.skipCount = 0;
+  }
+
+  listLoading.value = true;
+  try {
+    // 如果有前端筛选条件，获取所有数据；否则使用正常分页
+    const params: PremiumTokenUsageQueryParams = {
+      skipCount: hasClientFilter.value ? 0 : queryParams.value.skipCount,
+      maxResultCount: hasClientFilter.value ? 1000 : queryParams.value.maxResultCount,
+      startTime: queryParams.value.startTime,
+      endTime: queryParams.value.endTime,
+      orderByColumn: queryParams.value.orderByColumn,
+      isAsc: queryParams.value.isAsc,
+    };
+
+    console.log('发送到后端的参数:', params);
+    console.log('是否有前端筛选:', hasClientFilter.value);
+
+    const res = await getPremiumTokenUsageList(params);
+    console.log('后端返回结果:', res);
+
+    if (res.data) {
+      usageList.value = res.data.items || [];
+      totalCount.value = res.data.totalCount || 0;
+
+      // 应用前端过滤和分页
+      applyClientFilters();
+    }
+  }
+  catch (error) {
+    console.error('获取额度明细列表失败:', error);
+    ElMessage.error('获取额度明细列表失败');
+    usageList.value = [];
+    filteredList.value = [];
+    displayList.value = [];
+    totalCount.value = 0;
+    filteredTotalCount.value = 0;
+  }
+  finally {
+    listLoading.value = false;
+  }
+}
+
+// 前端过滤和分页
+function applyClientFilters() {
+  let filtered = [...usageList.value];
+
+  // 包名称搜索
+  if (searchKeyword.value) {
+    const keyword = searchKeyword.value.toLowerCase();
+    filtered = filtered.filter(item =>
+      item.packageName.toLowerCase().includes(keyword),
+    );
+  }
+
+  // 状态筛选
+  if (statusFilter.value !== null) {
+    filtered = filtered.filter(item => item.isActive === statusFilter.value);
+  }
+
+  filteredList.value = filtered;
+  filteredTotalCount.value = filtered.length;
+
+  // 如果有前端筛选，进行前端分页
+  if (hasClientFilter.value) {
+    const start = (currentPage.value - 1) * pageSize.value;
+    const end = start + pageSize.value;
+    displayList.value = filtered.slice(start, end);
+  }
+  else {
+    // 无前端筛选，直接使用过滤后的数据（实际就是原始数据）
+    displayList.value = filtered;
+  }
+
+  console.log('前端过滤和分页:', {
+    原始数量: usageList.value.length,
+    过滤后数量: filtered.length,
+    当前页显示: displayList.value.length,
+    搜索关键字: searchKeyword.value,
+    状态筛选: statusFilter.value,
+    当前页码: currentPage.value,
+    每页大小: pageSize.value,
+  });
+}
+
+// 防抖搜索
+const debouncedSearch = debounce(() => {
+  currentPage.value = 1; // 重置到第一页
+  applyClientFilters(); // 只应用前端过滤，不重新请求接口
+}, 300);
+
+// 处理分页
+function handlePageChange(page: number) {
+  console.log('切换页码:', page);
+  currentPage.value = page;
+
+  if (hasClientFilter.value) {
+    // 有前端筛选，只需重新分页
+    applyClientFilters();
+  }
+  else {
+    // 无前端筛选，后端分页
+    queryParams.value.skipCount = (page - 1) * pageSize.value;
+    fetchUsageList();
+  }
+}
+
+// 处理每页大小变化
+function handleSizeChange(size: number) {
+  console.log('修改每页大小:', size);
+  pageSize.value = size;
+  queryParams.value.maxResultCount = size;
+  currentPage.value = 1;
+  queryParams.value.skipCount = 0;
+
+  if (hasClientFilter.value) {
+    // 有前端筛选，只需重新分页
+    applyClientFilters();
+  }
+  else {
+    // 无前端筛选，重新获取数据
+    fetchUsageList();
+  }
+}
+
+// 处理排序（使用 OrderByColumn 和 IsAsc）
+function handleSortChange({ prop, order }: { prop: string; order: string | null }) {
+  console.log('排序变化:', { prop, order });
+  if (order) {
+    // 后端DTO使用 OrderByColumn 和 IsAsc
+    queryParams.value.orderByColumn = prop;
+    // 转换为布尔值：ascending -> true, descending -> false
+    queryParams.value.isAsc = order === 'ascending' ? 'ascending' : 'descending';
+  }
+  else {
+    queryParams.value.orderByColumn = undefined;
+    queryParams.value.isAsc = undefined;
+  }
+  currentPage.value = 1;
+  queryParams.value.skipCount = 0;
+  fetchUsageList();
+}
+
+// 处理时间筛选
+function handleDateChange(value: [Date, Date] | null) {
+  console.log('时间筛选变化:', value);
+  if (value && value.length === 2) {
+    // 设置开始时间为当天00:00:00
+    const startDate = new Date(value[0]);
+    startDate.setHours(0, 0, 0, 0);
+
+    // 设置结束时间为当天23:59:59
+    const endDate = new Date(value[1]);
+    endDate.setHours(23, 59, 59, 999);
+
+    queryParams.value.startTime = startDate.toISOString();
+    queryParams.value.endTime = endDate.toISOString();
+    console.log('时间范围:', {
+      start: queryParams.value.startTime,
+      end: queryParams.value.endTime,
+    });
+  }
+  else {
+    queryParams.value.startTime = undefined;
+    queryParams.value.endTime = undefined;
+  }
+  fetchUsageList(true); // 重置到第一页并获取数据
+}
+
+// 重置筛选
+function resetFilters() {
+  console.log('重置所有筛选条件');
+  // 重置所有筛选条件
+  dateRange.value = null;
+  searchKeyword.value = '';
+  statusFilter.value = null;
+  currentPage.value = 1;
+
+  // 重置后端查询参数
+  queryParams.value = {
+    skipCount: 0,
+    maxResultCount: pageSize.value,
+    orderByColumn: undefined,
+    isAsc: undefined,
+    startTime: undefined,
+    endTime: undefined,
+  };
+
+  // 重新获取数据
+  fetchUsageList();
+}
+
+// 处理搜索
+function handleSearch() {
+  console.log('搜索关键字:', searchKeyword.value);
+
+  // 如果已经有全量数据（之前获取过），直接过滤
+  if (usageList.value.length > 0 && hasClientFilter.value) {
+    debouncedSearch();
+  }
+  else {
+    // 否则需要重新获取数据
+    currentPage.value = 1;
+    fetchUsageList();
+  }
+}
+
+// 处理状态筛选
+function handleStatusChange(value: boolean | null) {
+  console.log('状态筛选:', value);
+
+  // 如果是清除操作（value 为 null），重置筛选
+  if (value === null) {
+    statusFilter.value = null;
+  }
+
+  currentPage.value = 1; // 重置到第一页
+
+  // 状态筛选需要重新获取数据（因为后端不支持状态筛选）
+  fetchUsageList();
+}
+
+// 判断是否有活动的筛选条件
+const hasActiveFilters = computed(() => {
+  return !!dateRange.value || !!searchKeyword.value || statusFilter.value !== null;
+});
+
+// 对外暴露刷新方法
+defineExpose({
+  refresh: fetchUsageList,
+});
+
+onMounted(() => {
+  fetchUsageList();
+});
+</script>
+
+<template>
+  <el-card v-loading="listLoading" class="usage-list-card" shadow="hover">
+    <template #header>
+      <div class="list-header">
+        <div class="header-left">
+          <el-icon class="header-icon">
+            <i-ep-document />
+          </el-icon>
+          <div class="header-text">
+            <span class="header-title">尊享包额度明细</span>
+            <!--            <span class="header-subtitle">Premium Package Usage Details</span> -->
+          </div>
+        </div>
+        <div v-if="false" class="header-right">
+          <el-tag v-if="hasClientFilter && filteredTotalCount > 0" type="warning" size="default" class="count-tag">
+            <el-icon><i-ep-filter /></el-icon>
+            筛选后 {{ filteredTotalCount }} 条
+          </el-tag>
+          <el-tag v-else-if="totalCount > 0" type="primary" size="default" class="count-tag" effect="plain">
+            <el-icon><i-ep-data-line /></el-icon>
+            共 {{ totalCount }} 条记录
+          </el-tag>
+        </div>
+      </div>
+    </template>
+
+    <!-- 筛选工具栏 -->
+    <div class="filter-toolbar">
+      <div class="filter-row">
+        <div class="filter-item">
+          <el-input
+            v-model="searchKeyword"
+            placeholder="搜索包名称"
+            clearable
+            size="default"
+            class="search-input"
+            @input="handleSearch"
+          >
+            <template #prefix>
+              <el-icon><Search /></el-icon>
+            </template>
+          </el-input>
+        </div>
+
+        <div class="filter-item">
+          <el-date-picker
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            size="default"
+            :shortcuts="shortcuts"
+            class="date-picker"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            :editable="false"
+            @change="handleDateChange"
+          />
+        </div>
+
+        <div class="filter-item">
+          <el-select
+            v-model="statusFilter"
+            placeholder="全部状态"
+            clearable
+            size="default"
+            class="status-select"
+            @change="handleStatusChange"
+          >
+            <el-option label="激活" :value="true" />
+            <el-option label="未激活" :value="false" />
+          </el-select>
+        </div>
+
+        <div class="filter-actions">
+          <el-button
+            v-if="hasActiveFilters"
+            size="default"
+            @click="resetFilters"
+          >
+            <el-icon><i-ep-refresh-left /></el-icon>
+            重置
+          </el-button>
+          <el-button
+            type="primary"
+            size="default"
+            :icon="Refresh"
+            @click="fetchUsageList"
+          >
+            刷新
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 筛选提示 -->
+      <!--      <div v-if="searchKeyword || statusFilter !== null" class="filter-tip"> -->
+      <!--        <el-icon color="#409eff"> -->
+      <!--          <i-ep-info-filled /> -->
+      <!--        </el-icon> -->
+      <!--        <span>启用包名称或状态筛选时，将从当前时间范围内获取更多数据进行过滤（最多1000条）</span> -->
+      <!--      </div> -->
+    </div>
+
+    <!-- 数据表格 -->
+    <el-table
+      :data="displayList"
+      stripe
+      class="usage-table"
+      empty-text="暂无数据"
+      @sort-change="handleSortChange"
+    >
+      <el-table-column prop="packageName" label="包名称" min-width="140" sortable="custom" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div class="package-name-cell">
+            <el-icon class="package-icon" color="#409eff">
+              <i-ep-box />
+            </el-icon>
+            <span>{{ row.packageName }}</span>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="总额度" min-width="130" prop="totalTokens" sortable="custom" align="right">
+        <template #default="{ row }">
+          <div class="token-cell">
+            <span class="token-value">{{ formatNumber(row.totalTokens) }}</span>
+            <span class="token-unit">万</span>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="已使用" min-width="130" prop="usedTokens" sortable="custom" align="right">
+        <template #default="{ row }">
+          <div class="token-cell used">
+            <span class="token-value">{{ formatNumber(row.usedTokens) }}</span>
+            <span class="token-unit">万</span>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="剩余" min-width="130" prop="remainingTokens" sortable="custom" align="right">
+        <template #default="{ row }">
+          <div class="token-cell remaining">
+            <span
+              class="token-value"
+              :style="{ color: row.remainingTokens > 0 ? '#67c23a' : '#f56c6c', fontWeight: '600' }"
+            >
+              {{ formatNumber(row.remainingTokens) }}
+            </span>
+            <span class="token-unit">万</span>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="使用率" min-width="130" align="center">
+        <template #default="{ row }">
+          <div class="usage-progress-cell">
+            <el-progress
+              :percentage="row.totalTokens > 0 ? Number(((row.usedTokens / row.totalTokens) * 100).toFixed(1)) : 0"
+              :color="getUsageColor(row.usedTokens, row.totalTokens)"
+              :stroke-width="8"
+              :show-text="true"
+              :text-inside="false"
+            >
+              <template #default="{ percentage }">
+                <span class="percentage-text">{{ percentage }}%</span>
+              </template>
+            </el-progress>
+          </div>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="购买金额" min-width="110" prop="purchaseAmount" sortable="custom" align="right">
+        <template #default="{ row }">
+          <span class="amount-cell">¥{{ row.purchaseAmount.toFixed(2) }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="状态" min-width="90" prop="isActive" sortable="custom" align="center">
+        <template #default="{ row }">
+          <el-tag :type="row.isActive ? 'success' : 'info'" size="small" effect="dark">
+            {{ row.isActive ? '激活' : '未激活' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="到期时间" min-width="170" prop="expireDateTime" sortable="custom">
+        <template #default="{ row }">
+          <div v-if="row.expireDateTime" class="expire-cell">
+            <el-icon class="expire-icon">
+              <Clock />
+            </el-icon>
+            <span>{{ formatDateTime(row.expireDateTime) }}</span>
+          </div>
+          <span v-else class="no-data">-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
+        <template #default="{ row }">
+          <span class="remark-cell">{{ row.remark || '-' }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 空状态 -->
+    <div v-if="!displayList.length && !listLoading" class="empty-container">
+      <el-empty :description="hasActiveFilters ? '当前筛选条件下无数据' : '暂无明细记录'">
+        <el-button v-if="hasActiveFilters" type="primary" @click="resetFilters">
+          清除筛选
+        </el-button>
+      </el-empty>
+    </div>
+
+    <!-- 分页 -->
+    <div v-if="(hasClientFilter ? filteredTotalCount : totalCount) > 0" class="pagination-container">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="hasClientFilter ? filteredTotalCount : totalCount"
+        layout="total, sizes, prev, pager, next, jumper"
+        prev-text="上一页"
+        next-text="下一页"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+      />
+    </div>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+/* 额度明细列表卡片 */
+.usage-list-card {
+  border-radius: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  border: 1px solid #f0f2f5;
+  transition: all 0.3s;
+
+  &:hover {
+    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
+    border-color: #667eea;
+  }
+
+  :deep(.el-card__header) {
+    background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%);
+    border-bottom: 2px solid #f0f2f5;
+  }
+}
+
+.list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.list-header .header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-icon {
+  font-size: 24px;
+  color: #f59e0b;
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+.header-subtitle {
+  font-size: 13px;
+  color: #909399;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.count-tag {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 16px;
+  font-weight: 600;
+  border-radius: 20px;
+
+  .el-icon {
+    font-size: 14px;
+  }
+}
+
+/* 筛选工具栏 */
+.filter-toolbar {
+  margin-bottom: 20px;
+  padding: 20px;
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border-radius: 12px;
+  border: 1px solid #e8eaed;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.filter-tip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 8px 12px;
+  background: #fff;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #606266;
+  border-left: 3px solid #409eff;
+}
+
+.filter-item {
+  flex: 0 0 auto;
+}
+
+.search-input {
+  width: 220px;
+}
+
+.date-picker {
+  width: 320px;
+}
+
+.status-select {
+  width: 140px;
+}
+
+.filter-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+}
+
+/* 表格样式 */
+.usage-table {
+  width: 100%;
+}
+
+.package-name-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.package-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.usage-progress-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+}
+
+.usage-progress-cell :deep(.el-progress) {
+  flex: 1;
+}
+
+.usage-progress-cell :deep(.el-progress__text) {
+  font-size: 13px !important;
+  font-weight: 600;
+  min-width: 45px;
+  text-align: right;
+}
+
+.percentage-text {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.token-cell {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  justify-content: flex-end;
+}
+
+.token-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.token-unit {
+  font-size: 12px;
+  color: #909399;
+}
+
+.amount-cell {
+  font-weight: 600;
+  color: #f56c6c;
+}
+
+.expire-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #606266;
+}
+
+.expire-icon {
+  font-size: 14px;
+  color: #909399;
+}
+
+.remark-cell {
+  color: #606266;
+  font-size: 13px;
+}
+
+.no-data {
+  color: #c0c4cc;
+}
+
+/* 空状态 */
+.empty-container {
+  padding: 40px 0;
+}
+
+/* 分页容器 */
+.pagination-container {
+  margin-top: 20px;
+  padding: 20px 0;
+  display: flex;
+  justify-content: center;
+  border-top: 2px solid #f0f2f5;
+
+  :deep(.el-pagination) {
+    gap: 8px;
+
+    .btn-prev,
+    .btn-next {
+      border-radius: 8px;
+      padding: 0 16px;
+      border: 1px solid #dcdfe6;
+      background: #fff;
+      font-weight: 500;
+
+      &:hover {
+        color: #667eea;
+        border-color: #667eea;
+        background: #f5f7fa;
+      }
+    }
+
+    .el-pager li {
+      border-radius: 8px;
+      min-width: 36px;
+      height: 36px;
+      line-height: 36px;
+      border: 1px solid transparent;
+      transition: all 0.3s;
+
+      &:hover {
+        color: #667eea;
+        background: #f5f7fa;
+      }
+
+      &.is-active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: #fff;
+        border-color: transparent;
+      }
+    }
+
+    .el-pagination__sizes {
+      .el-select {
+        .el-input__wrapper {
+          border-radius: 8px;
+        }
+      }
+    }
+
+    .el-pagination__jump {
+      .el-input__wrapper {
+        border-radius: 8px;
+      }
+    }
+  }
+}
+
+/* 响应式布局 */
+@media (max-width: 768px) {
+  .list-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .header-icon {
+    font-size: 20px;
+    padding: 6px;
+  }
+
+  .header-title {
+    font-size: 16px;
+  }
+
+  .header-subtitle {
+    font-size: 12px;
+  }
+
+  .header-right {
+    width: 100%;
+  }
+
+  .count-tag {
+    width: 100%;
+    justify-content: center;
+  }
+
+  /* 移动端筛选工具栏 */
+  .filter-toolbar {
+    padding: 16px;
+  }
+
+  .filter-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .filter-item {
+    width: 100%;
+  }
+
+  .search-input,
+  .date-picker,
+  .status-select {
+    width: 100%;
+  }
+
+  .filter-actions {
+    margin-left: 0;
+    display: flex;
+    gap: 8px;
+  }
+
+  .filter-actions .el-button {
+    flex: 1;
+  }
+
+  /* 移动端分页 */
+  .pagination-container {
+    padding: 16px 0;
+  }
+
+  .pagination-container :deep(.el-pagination) {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 6px;
+
+    .btn-prev,
+    .btn-next {
+      padding: 0 12px;
+      font-size: 13px;
+    }
+
+    .el-pager li {
+      min-width: 32px;
+      height: 32px;
+      line-height: 32px;
+      font-size: 13px;
+    }
+  }
+}
+
+/* 平板适配 */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .filter-row {
+    gap: 10px;
+  }
+
+  .search-input {
+    width: 180px;
+  }
+
+  .date-picker {
+    width: 280px;
+  }
+}
+</style>
diff --git a/Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue b/Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue
index 5502fddc..37ae05a7 100644
--- a/Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue
@@ -1,30 +1,33 @@
 <script setup lang="ts">
-import { Bell } from '@element-plus/icons-vue'
-import { storeToRefs } from 'pinia'
-import { useAnnouncementStore } from '@/stores'
+import { Bell } from '@element-plus/icons-vue';
+import { storeToRefs } from 'pinia';
+import { useAnnouncementStore } from '@/stores';
 
-const announcementStore = useAnnouncementStore()
-const { announcements } = storeToRefs(announcementStore)
+const announcementStore = useAnnouncementStore();
+const { announcements } = storeToRefs(announcementStore);
 
-// 计算未读公告数量（最新公告）
+// 计算未读公告数量（系统公告数量）
 const unreadCount = computed(() => {
-  return announcements.value.filter(a => a.type === 'latest').length
-})
+  if (!Array.isArray(announcements.value))
+    return 0;
+  return announcements.value.filter(a => a.type === 'System').length;
+});
 
 // 打开公告弹窗
 function openAnnouncement() {
-  announcementStore.openDialog()
+  announcementStore.openDialog();
 }
 </script>
 
 <template>
   <div class="announcement-btn-container">
     <el-badge
-      :value="unreadCount"
-      :hidden="unreadCount === 0"
-      :max="99"
+      is-dot
       class="announcement-badge"
     >
+      <!--      :value="unreadCount" -->
+      <!--      :hidden="unreadCount === 0" -->
+      <!--      :max="99" -->
       <div
         class="announcement-btn"
         @click="openAnnouncement"
@@ -47,10 +50,10 @@ function openAnnouncement() {
     :deep(.el-badge__content) {
       background-color: #f56c6c;
       border: none;
-      font-size: 12px;
-      height: 18px;
-      line-height: 18px;
-      padding: 0 6px;
+      //font-size: 12px;
+      //height: 18px;
+      //line-height: 18px;
+      //padding: 0 6px;
     }
   }
 
@@ -96,10 +99,10 @@ function openAnnouncement() {
 
     .announcement-badge {
       :deep(.el-badge__content) {
-        font-size: 10px;
-        height: 16px;
-        line-height: 16px;
-        padding: 0 4px;
+        //font-size: 10px;
+        //height: 16px;
+        //line-height: 16px;
+        //padding: 0 4px;
       }
     }
   }
diff --git a/Yi.Ai.Vue3/src/stores/modules/announcement.ts b/Yi.Ai.Vue3/src/stores/modules/announcement.ts
index b30583a0..0d81d849 100644
--- a/Yi.Ai.Vue3/src/stores/modules/announcement.ts
+++ b/Yi.Ai.Vue3/src/stores/modules/announcement.ts
@@ -1,80 +1,65 @@
-import { defineStore } from 'pinia'
-import type { Activity, Announcement, CarouselItem } from '@/api'
+import type { AnnouncementLogDto } from '@/api';
+import { defineStore } from 'pinia';
 
-export type CloseType = 'today' | 'week' | 'permanent'
+export type CloseType = 'today' | 'permanent';
 
 export const useAnnouncementStore = defineStore(
   'announcement',
   () => {
     // 弹窗显示状态
-    const isDialogVisible = ref(false)
+    const isDialogVisible = ref(false);
 
-    // 公告数据
-    const carousels = ref<CarouselItem[]>([])
-    const activities = ref<Activity[]>([])
-    const announcements = ref<Announcement[]>([])
+    // 公告数据（统一存储所有公告）
+    const announcements = ref<AnnouncementLogDto[]>([]);
 
     // 关闭记录
-    const closeType = ref<CloseType | null>(null)
-    const closedAt = ref<number | null>(null)
+    const closeType = ref<CloseType | null>(null);
+    const closedAt = ref<number | null>(null);
 
     // 打开弹窗
     const openDialog = () => {
-      isDialogVisible.value = true
-    }
+      isDialogVisible.value = true;
+    };
 
     // 关闭弹窗
     const closeDialog = (type: CloseType) => {
-      isDialogVisible.value = false
-      closeType.value = type
-      closedAt.value = Date.now()
-    }
+      isDialogVisible.value = false;
+      closeType.value = type;
+      closedAt.value = Date.now();
+    };
 
     // 检查是否应该显示弹窗
     const shouldShowDialog = computed(() => {
       if (!closedAt.value || !closeType.value)
-        return true
+        return true;
 
-      const now = Date.now()
-      const elapsed = now - closedAt.value
+      const now = Date.now();
+      const elapsed = now - closedAt.value;
 
       if (closeType.value === 'permanent')
-        return false
+        return false;
 
       if (closeType.value === 'today') {
         // 检查是否已过去一天（24小时）
-        return elapsed > 24 * 60 * 60 * 1000
+        return elapsed > 24 * 60 * 60 * 1000;
       }
 
-      if (closeType.value === 'week') {
-        // 检查是否已过去一周（7天）
-        return elapsed > 7 * 24 * 60 * 60 * 1000
-      }
-
-      return true
-    })
+      return true;
+    });
 
     // 设置公告数据
-    const setAnnouncementData = (data: {
-      carousels: CarouselItem[]
-      activities: Activity[]
-      announcements: Announcement[]
-    }) => {
-      carousels.value = data.carousels
-      activities.value = data.activities
-      announcements.value = data.announcements
-    }
+    const setAnnouncementData = (data: AnnouncementLogDto[]) => {
+      announcements.value = data;
+    };
 
     // 重置关闭状态（用于测试或管理员重置）
     const resetCloseStatus = () => {
-      closeType.value = null
-      closedAt.value = null
-    }
+      closeType.value = null;
+      closedAt.value = null;
+    };
 
     return {
       isDialogVisible,
-      carousels,
-      activities,
       announcements,
       closeType,
       closedAt,
@@ -83,7 +68,7 @@ export const useAnnouncementStore = defineStore(
       closeDialog,
       setAnnouncementData,
       resetCloseStatus,
-    }
+    };
   },
   {
     persist: {
@@ -91,4 +76,4 @@ export const useAnnouncementStore = defineStore(
       paths: ['closeType', 'closedAt'],
     },
   },
-)
+);
diff --git a/Yi.Ai.Vue3/types/components.d.ts b/Yi.Ai.Vue3/types/components.d.ts
index f3d68c9b..6d8d2d60 100644
--- a/Yi.Ai.Vue3/types/components.d.ts
+++ b/Yi.Ai.Vue3/types/components.d.ts
@@ -26,6 +26,9 @@ declare module 'vue' {
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
@@ -38,8 +41,10 @@ declare module 'vue' {
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
@@ -56,7 +61,9 @@ declare module 'vue' {
     ModelSelect: typeof import('./../src/components/ModelSelect/index.vue')['default']
     NavDialog: typeof import('./../src/components/userPersonalCenter/NavDialog.vue')['default']
     Popover: typeof import('./../src/components/Popover/index.vue')['default']
+    PremiumPackageInfo: typeof import('./../src/components/userPersonalCenter/components/PremiumPackageInfo.vue')['default']
     PremiumService: typeof import('./../src/components/userPersonalCenter/components/PremiumService.vue')['default']
+    PremiumUsageList: typeof import('./../src/components/userPersonalCenter/components/PremiumUsageList.vue')['default']
     ProductPackage: typeof import('./../src/components/ProductPackage/index.vue')['default']
     QrCodeLogin: typeof import('./../src/components/LoginDialog/components/QrCodeLogin/index.vue')['default']
     RechargeLog: typeof import('./../src/components/userPersonalCenter/components/RechargeLog.vue')['default']
diff --git a/Yi.Ai.Vue3/系统公告API接口文档.md b/Yi.Ai.Vue3/系统公告API接口文档.md
deleted file mode 100644
index 416276b7..00000000
--- a/Yi.Ai.Vue3/系统公告API接口文档.md
+++ /dev/null
@@ -1,232 +0,0 @@
-# 系统公告 API 接口文档
-
-## 概述
-
-本文档定义了系统公告和活动功能所需的后端API接口。包括公告弹窗数据、活动详情、公告详情三个主要接口。
-
----
-
-## 1. 获取系统公告和活动数据
-
-### 接口信息
-
-- **路径**: `GET /announcement/system`
-- **描述**: 获取系统公告弹窗所需的所有数据，包括轮播图、活动列表、公告列表
-- **权限**: 无需登录即可访问
-
-### 响应数据结构
-
-```typescript
-{
-  "success": true,
-  "data": {
-    "carousels": [
-      {
-        "id": 1,
-        "imageUrl": "https://example.com/carousel/1.jpg",
-        "link": "https://example.com/activity/1",
-        "title": "新年活动"
-      }
-    ],
-    "activities": [
-      {
-        "id": 1,
-        "title": "新年特惠活动",
-        "description": "参与活动即可获得丰厚奖励",
-        "content": "<p>活动详细内容HTML格式</p>",
-        "coverImage": "https://example.com/activity/cover1.jpg",
-        "startTime": "2025-01-01T00:00:00Z",
-        "endTime": "2025-01-31T23:59:59Z",
-        "status": "active",
-        "createdAt": "2025-01-01T00:00:00Z",
-        "updatedAt": "2025-01-02T00:00:00Z"
-      }
-    ],
-    "announcements": [
-      {
-        "id": 1,
-        "title": "系统升级公告",
-        "content": "<p>系统将于今晚进行维护升级</p>",
-        "type": "latest",
-        "isImportant": true,
-        "publishTime": "2025-01-05T10:00:00Z",
-        "createdAt": "2025-01-05T09:00:00Z",
-        "updatedAt": "2025-01-05T10:00:00Z"
-      }
-    ]
-  },
-  "message": "获取成功"
-}
-```
-
-### 字段说明
-
-#### carousels（轮播图）
-
-| 字段 | 类型 | 必填 | 说明 |
-|------|------|------|------|
-| id | number/string | 是 | 轮播图ID |
-| imageUrl | string | 是 | 图片URL |
-| link | string | 否 | 点击跳转链接 |
-| title | string | 否 | 轮播图标题 |
-
-#### activities（活动）
-
-| 字段 | 类型 | 必填 | 说明 |
-|------|------|------|------|
-| id | number/string | 是 | 活动ID |
-| title | string | 是 | 活动标题 |
-| description | string | 是 | 活动简介 |
-| content | string | 是 | 活动详细内容（HTML格式） |
-| coverImage | string | 否 | 封面图URL |
-| startTime | string | 否 | 开始时间（ISO 8601格式） |
-| endTime | string | 否 | 结束时间（ISO 8601格式） |
-| status | string | 是 | 状态：active(进行中), inactive(未开始), expired(已结束) |
-| createdAt | string | 是 | 创建时间（ISO 8601格式） |
-| updatedAt | string | 否 | 更新时间（ISO 8601格式） |
-
-#### announcements（公告）
-
-| 字段 | 类型 | 必填 | 说明 |
-|------|------|------|------|
-| id | number/string | 是 | 公告ID |
-| title | string | 是 | 公告标题 |
-| content | string | 是 | 公告内容（HTML格式） |
-| type | string | 是 | 类型：latest(最新公告), history(历史公告) |
-| isImportant | boolean | 否 | 是否重要公告（显示警告图标） |
-| publishTime | string | 是 | 发布时间（ISO 8601格式） |
-| createdAt | string | 是 | 创建时间（ISO 8601格式） |
-| updatedAt | string | 否 | 更新时间（ISO 8601格式） |
-
----
-
-## 2. 获取活动详情
-
-### 接口信息
-
-- **路径**: `GET /announcement/activity/{id}`
-- **描述**: 获取单个活动的详细信息
-- **权限**: 无需登录即可访问
-
-### 请求参数
-
-| 参数 | 位置 | 类型 | 必填 | 说明 |
-|------|------|------|------|------|
-| id | path | string/number | 是 | 活动ID |
-
-### 响应数据结构
-
-```typescript
-{
-  "success": true,
-  "data": {
-    "id": 1,
-    "title": "新年特惠活动",
-    "description": "参与活动即可获得丰厚奖励",
-    "content": "<p>活动详细内容HTML格式...</p>",
-    "coverImage": "https://example.com/activity/cover1.jpg",
-    "startTime": "2025-01-01T00:00:00Z",
-    "endTime": "2025-01-31T23:59:59Z",
-    "status": "active",
-    "createdAt": "2025-01-01T00:00:00Z",
-    "updatedAt": "2025-01-02T00:00:00Z",
-    "views": 1234,
-    "participantCount": 567
-  },
-  "message": "获取成功"
-}
-```
-
-### 额外字段说明
-
-| 字段 | 类型 | 必填 | 说明 |
-|------|------|------|------|
-| views | number | 否 | 浏览次数 |
-| participantCount | number | 否 | 参与人数 |
-
----
-
-## 3. 获取公告详情
-
-### 接口信息
-
-- **路径**: `GET /announcement/detail/{id}`
-- **描述**: 获取单个公告的详细信息
-- **权限**: 无需登录即可访问
-
-### 请求参数
-
-| 参数 | 位置 | 类型 | 必填 | 说明 |
-|------|------|------|------|------|
-| id | path | string/number | 是 | 公告ID |
-
-### 响应数据结构
-
-```typescript
-{
-  "success": true,
-  "data": {
-    "id": 1,
-    "title": "系统升级公告",
-    "content": "<p>系统将于今晚进行维护升级，预计时间为晚上10点至次日凌晨2点...</p>",
-    "type": "latest",
-    "isImportant": true,
-    "publishTime": "2025-01-05T10:00:00Z",
-    "createdAt": "2025-01-05T09:00:00Z",
-    "updatedAt": "2025-01-05T10:00:00Z",
-    "views": 5678
-  },
-  "message": "获取成功"
-}
-```
-
-### 额外字段说明
-
-| 字段 | 类型 | 必填 | 说明 |
-|------|------|------|------|
-| views | number | 否 | 浏览次数 |
-
----
-
-## 错误响应
-
-所有接口在出错时应返回统一的错误格式：
-
-```typescript
-{
-  "success": false,
-  "data": null,
-  "message": "错误描述信息",
-  "errorCode": "ERROR_CODE" // 可选的错误码
-}
-```
-
-### 常见错误码
-
-| 状态码 | 说明 |
-|--------|------|
-| 404 | 资源不存在 |
-| 500 | 服务器内部错误 |
-
----
-
-## 注意事项
-
-1. **时间格式**: 所有时间字段使用 ISO 8601 格式（如：`2025-01-05T10:00:00Z`）
-2. **HTML内容**: content 字段包含HTML格式的内容，前端会进行渲染，请确保内容安全，防止XSS攻击
-3. **图片URL**: 所有图片URL应该是完整的可访问地址
-4. **状态管理**: 活动状态（active/inactive/expired）应该根据当前时间和活动时间自动判断
-5. **公告分类**: 公告的 type 字段（latest/history）可以根据发布时间自动分类，或由管理员手动指定
-6. **浏览统计**: views 字段建议在每次访问详情页时自动递增
-
----
-
-## 前端状态管理
-
-前端使用 Pinia 管理公告弹窗的显示状态：
-
-- **今日关闭**: 24小时内不再显示
-- **本周关闭**: 7天内不再显示
-- **关闭公告**: 永久不再显示（除非用户清除浏览器缓存）
-
-这些状态存储在浏览器的 localStorage 中，不需要后端接口支持。
diff --git a/Yi.Ai.Vue3/系统公告功能使用说明.md b/Yi.Ai.Vue3/系统公告功能使用说明.md
deleted file mode 100644
index 0d832488..00000000
--- a/Yi.Ai.Vue3/系统公告功能使用说明.md
+++ /dev/null
@@ -1,337 +0,0 @@
-# 系统公告功能使用说明
-
-## 功能概述
-
-本次更新为项目添加了完整的系统公告弹窗功能，包括活动展示、公告通知、轮播图等。用户可以通过不同的关闭选项来控制弹窗的显示频率。
-
----
-
-## 已实现的功能
-
-### 1. 系统公告弹窗
-
-- **自动弹出**: 用户进入应用时自动检测并显示公告弹窗
-- **手动打开**: 右上角有公告按钮（铃铛图标），随时可以点击打开公告弹窗
-- **未读提示**: 公告按钮上显示红色徽章，标识最新公告数量
-- **Tab切换**: 支持"活动"和"公告"两个Tab页面
-- **关闭选项**: 提供三种关闭方式
-  - 今日关闭：24小时内不再自动弹出，但仍可通过按钮手动打开
-  - 本周关闭：7天内不再自动弹出，但仍可通过按钮手动打开
-  - 关闭公告：永久不再自动弹出（除非清除浏览器缓存），但仍可通过按钮手动打开
-
-### 2. 活动页面
-
-- **轮播图**: 顶部展示活动轮播图，支持自动播放
-- **活动列表**: 显示所有活动，包含标题、简介、状态标签
-- **状态标识**:
-  - 进行中：绿色标签
-  - 已结束：灰色标签
-- **查看详情**: 点击可跳转到活动详情页面
-
-### 3. 公告页面
-
-- **最新公告**: 顶部显示最新发布的公告，带蓝色边框高亮
-- **重要标识**: 重要公告显示警告图标
-- **历史公告**: 使用时间线形式展示历史公告
-- **查看详情**: 点击可跳转到公告详情页面
-
-### 4. 详情页面
-
-#### 活动详情页面
-- 活动标题和状态
-- 浏览次数和参与人数
-- 活动封面图
-- 活动简介
-- 活动时间信息（开始、结束、发布、更新时间）
-- 完整的活动内容（支持HTML格式）
-
-#### 公告详情页面
-- 公告标题和类型
-- 重要公告标识（带动画效果）
-- 浏览次数
-- 发布时间
-- 完整的公告内容（支持HTML格式）
-- 创建和更新时间
-
----
-
-## 文件结构
-
-```
-Yi.Ai.Vue3/
-├── src/
-│   ├── api/
-│   │   └── announcement/
-│   │       ├── index.ts          # API接口定义
-│   │       └── types.ts          # TypeScript类型定义
-│   ├── components/
-│   │   └── SystemAnnouncementDialog/
-│   │       └── index.vue         # 系统公告弹窗组件
-│   ├── layouts/
-│   │   └── components/
-│   │       └── Header/
-│   │           ├── components/
-│   │           │   └── AnnouncementBtn.vue  # 公告按钮组件（新增）
-│   │           └── index.vue     # Header组件（已更新）
-│   ├── pages/
-│   │   ├── activity/
-│   │   │   └── detail.vue        # 活动详情页面
-│   │   └── announcement/
-│   │       └── detail.vue        # 公告详情页面
-│   ├── stores/
-│   │   └── modules/
-│   │       └── announcement.ts   # 公告状态管理
-│   ├── data/
-│   │   └── mockAnnouncementData.ts  # 模拟数据
-│   ├── routers/
-│   │   └── modules/
-│   │       └── staticRouter.ts   # 路由配置（已更新）
-│   ├── utils/
-│   │   └── request.ts            # HTTP请求工具（已修复Pinia初始化问题）
-│   └── App.vue                   # 主应用文件（已更新）
-├── 系统公告API接口文档.md          # API接口文档
-└── 系统公告功能使用说明.md          # 本文档
-```
-
----
-
-## 如何使用
-
-### 开发环境测试（使用模拟数据）
-
-1. **导入模拟数据**
-
-在 `src/App.vue` 中临时替换API调用：
-
-```typescript
-// 导入模拟数据函数
-import { getMockSystemAnnouncements } from '@/data/mockAnnouncementData'
-
-// 替换 getSystemAnnouncements() 为 getMockSystemAnnouncements()
-onMounted(async () => {
-  if (announcementStore.shouldShowDialog) {
-    try {
-      // 使用模拟数据
-      const res = await getMockSystemAnnouncements()
-      if (res.data) {
-        announcementStore.setAnnouncementData(res.data)
-        announcementStore.openDialog()
-      }
-    }
-    catch (error) {
-      console.error('获取系统公告失败:', error)
-    }
-  }
-})
-```
-
-2. **同样的方式更新详情页面**
-
-在 `src/pages/activity/detail.vue` 和 `src/pages/announcement/detail.vue` 中也可以使用模拟数据函数进行测试。
-
-3. **启动开发服务器**
-
-```bash
-npm run dev
-```
-
-4. **测试功能**
-
-- 打开浏览器访问应用
-- 应该会自动弹出系统公告弹窗
-- 测试不同的关闭选项
-- 点击"查看详情"按钮测试跳转
-
-### 生产环境部署（使用真实API）
-
-1. **后端实现API接口**
-
-参考 `系统公告API接口文档.md` 实现以下三个接口：
-- `GET /announcement/system` - 获取系统公告数据
-- `GET /announcement/activity/{id}` - 获取活动详情
-- `GET /announcement/detail/{id}` - 获取公告详情
-
-2. **确认API调用**
-
-确保 `src/App.vue` 和详情页面使用的是真实的API函数（默认配置）：
-- `getSystemAnnouncements()`
-- `getActivityDetail(id)`
-- `getAnnouncementDetail(id)`
-
-3. **构建部署**
-
-```bash
-npm run build
-```
-
----
-
-## 自定义配置
-
-### 修改关闭时间
-
-在 `src/stores/modules/announcement.ts` 中修改时间计算逻辑：
-
-```typescript
-const shouldShowDialog = computed(() => {
-  // ... 现有代码
-
-  if (closeType.value === 'today') {
-    // 修改为其他时间，如12小时
-    return elapsed > 12 * 60 * 60 * 1000
-  }
-
-  if (closeType.value === 'week') {
-    // 修改为其他时间，如3天
-    return elapsed > 3 * 24 * 60 * 60 * 1000
-  }
-
-  // ... 现有代码
-})
-```
-
-### 修改弹窗样式
-
-在 `src/components/SystemAnnouncementDialog/index.vue` 中修改样式：
-
-- 修改弹窗宽度：`width="700px"` 改为其他值
-- 修改轮播图高度：`height="250px"` 改为其他值
-- 修改CSS样式：在 `<style>` 部分进行调整
-
-### 添加新的Tab页
-
-1. 在弹窗组件中添加新的 `<el-tab-pane>`
-2. 添加对应的数据类型定义
-3. 更新API接口和store
-
----
-
-## 管理功能
-
-### 手动触发弹窗
-
-用户可以通过以下方式打开公告弹窗：
-
-1. **点击右上角公告按钮**（推荐）
-   - 位于Header右侧的铃铛图标
-   - 显示未读公告数量的红色徽章
-   - 点击即可打开公告弹窗
-
-2. **在代码中手动调用**
-
-在任何组件中可以手动打开公告弹窗：
-
-```typescript
-import { useAnnouncementStore } from '@/stores'
-
-const announcementStore = useAnnouncementStore()
-
-// 打开弹窗
-announcementStore.openDialog()
-```
-
-### 重置关闭状态
-
-如果需要重置用户的关闭状态（例如有重要公告需要强制显示）：
-
-```typescript
-// 重置关闭状态
-announcementStore.resetCloseStatus()
-
-// 然后重新打开弹窗
-announcementStore.openDialog()
-```
-
-### 查看当前状态
-
-```typescript
-const announcementStore = useAnnouncementStore()
-
-// 查看是否应该显示弹窗
-console.log(announcementStore.shouldShowDialog)
-
-// 查看关闭类型
-console.log(announcementStore.closeType)
-
-// 查看关闭时间
-console.log(announcementStore.closedAt)
-```
-
----
-
-## 注意事项
-
-1. **XSS防护**: 公告和活动内容使用 `v-html` 渲染，请确保后端返回的HTML内容是安全的，建议进行内容过滤和转义。
-
-2. **图片资源**: 轮播图和封面图需要可访问的URL地址，建议使用CDN。
-
-3. **性能优化**:
-   - 弹窗数据会在应用启动时加载，确保接口响应快速
-   - 考虑添加加载状态和错误处理
-
-4. **响应式设计**: 当前设计主要针对PC端，如需移动端适配，需要调整样式和布局。
-
-5. **浏览器兼容**: 使用了现代CSS特性，建议在主流现代浏览器中使用。
-
-6. **状态持久化**: 关闭状态存储在 localStorage 中，清除浏览器缓存会重置状态。
-
----
-
-## 后续优化建议
-
-1. **数据统计**: 添加打点统计，记录用户查看公告的行为
-2. **推送通知**: 对重要公告支持浏览器推送通知
-3. **多语言支持**: 支持国际化（i18n）
-4. **个性化推荐**: 根据用户兴趣推荐相关活动
-5. **评论功能**: 允许用户对活动和公告进行评论
-6. **分享功能**: 支持将活动和公告分享到社交媒体
-7. **搜索功能**: 添加公告和活动的搜索功能
-8. **管理后台**: 开发管理后台用于创建和管理公告活动
-
----
-
-## 技术栈
-
-- **Vue 3.5.17**: 核心框架，使用 Composition API
-- **TypeScript**: 类型安全
-- **Element Plus**: UI组件库
-- **Pinia**: 状态管理，支持持久化
-- **Vue Router 4**: 路由管理
-- **Vite**: 构建工具
-
----
-
-## 问题排查
-
-### 弹窗不显示
-
-1. 检查 `announcementStore.shouldShowDialog` 的值
-2. 检查API是否返回数据
-3. 查看浏览器控制台是否有错误
-4. 尝试调用 `announcementStore.resetCloseStatus()` 重置状态
-
-### 详情页面404
-
-1. 确认路由配置是否正确
-2. 检查路由名称是否匹配
-3. 确认ID参数是否正确传递
-
-### 样式显示异常
-
-1. 检查Element Plus是否正确安装
-2. 确认 SCSS 预处理器是否配置
-3. 清除浏览器缓存重试
-
----
-
-## 联系支持
-
-如有问题或建议，请通过以下方式联系：
-
-- GitHub Issues
-- 项目文档
-- 技术支持团队
-
----
-
-**祝使用愉快！**
diff --git a/Yi.Ai.Vue3/系统公告功能更新日志.md b/Yi.Ai.Vue3/系统公告功能更新日志.md
deleted file mode 100644
index 05f10f85..00000000
--- a/Yi.Ai.Vue3/系统公告功能更新日志.md
+++ /dev/null
@@ -1,177 +0,0 @@
-# 系统公告功能更新日志
-
-## 2025-01-05 - 完整功能实现
-
-### 新增功能
-
-#### 1. 系统公告弹窗
-- ✅ 自动弹出机制：应用启动时自动检测并显示
-- ✅ 双Tab设计：活动页和公告页分离展示
-- ✅ 三种关闭模式：今日关闭、本周关闭、永久关闭
-- ✅ 状态持久化：关闭状态保存到localStorage
-
-#### 2. 活动展示
-- ✅ 轮播图组件：支持多图轮播、自动播放
-- ✅ 活动列表：展示活动标题、简介、状态
-- ✅ 状态标签：进行中（绿色）、已结束（灰色）
-- ✅ 活动详情页：完整的活动信息展示
-
-#### 3. 公告展示
-- ✅ 最新公告区：高亮显示最新发布的公告
-- ✅ 重要标识：重要公告显示警告图标（带动画）
-- ✅ 历史公告：时间线形式展示历史公告
-- ✅ 公告详情页：完整的公告内容展示
-
-#### 4. 右上角公告入口（新增）
-- ✅ 铃铛图标按钮：位于Header右侧
-- ✅ 未读徽章：显示最新公告数量的红色徽章
-- ✅ 随时可访问：即使关闭自动弹窗后也能手动打开
-- ✅ 悬停效果：鼠标悬停时图标变色
-
-### 技术实现
-
-#### API接口（3个）
-1. `GET /announcement/system` - 获取系统公告数据
-2. `GET /announcement/activity/{id}` - 获取活动详情
-3. `GET /announcement/detail/{id}` - 获取公告详情
-
-#### 核心组件（3个）
-1. `SystemAnnouncementDialog` - 系统公告弹窗
-2. `AnnouncementBtn` - 公告按钮
-3. 活动和公告详情页
-
-#### 状态管理
-- Pinia Store：`announcementStore`
-- 持久化：localStorage（仅存储关闭状态）
-- 响应式数据：轮播图、活动、公告列表
-
-#### 路由配置
-- `/activity/:id` - 活动详情
-- `/announcement/:id` - 公告详情
-
-### 文件变更
-
-#### 新增文件（11个）
-```
-src/api/announcement/index.ts
-src/api/announcement/types.ts
-src/stores/modules/announcement.ts
-src/components/SystemAnnouncementDialog/index.vue
-src/layouts/components/Header/components/AnnouncementBtn.vue
-src/pages/activity/detail.vue
-src/pages/announcement/detail.vue
-src/data/mockAnnouncementData.ts
-系统公告API接口文档.md
-系统公告功能使用说明.md
-系统公告功能更新日志.md (本文件)
-```
-
-#### 修改文件（5个）
-```
-src/api/index.ts - 导出announcement模块
-src/stores/index.ts - 导出announcementStore
-src/routers/modules/staticRouter.ts - 添加详情页路由
-src/layouts/components/Header/index.vue - 添加公告按钮
-src/utils/request.ts - 修复Pinia初始化问题
-src/App.vue - 集成系统公告弹窗
-```
-
-### 问题修复
-
-#### 1. Pinia初始化错误
-**问题**：`getActivePinia() was called but there was no active Pinia`
-
-**原因**：在 `request.ts` 的 `jwtPlugin()` 函数中，在模块加载时就调用了 `useUserStore()`，此时 Pinia 还未初始化。
-
-**解决方案**：将 `useUserStore()` 的调用从函数开始移到各个钩子函数内部（`beforeRequest`、`afterResponse`、`onError`），确保只在实际请求时才调用 store。
-
-#### 2. storeToRefs未定义
-**问题**：`storeToRefs is not defined`
-
-**原因**：在 `SystemAnnouncementDialog/index.vue` 中使用了 `storeToRefs` 但忘记导入。
-
-**解决方案**：添加 `import { storeToRefs } from 'pinia'`
-
-### 功能亮点
-
-1. **智能弹窗机制**
-   - 首次访问自动弹出
-   - 支持三种关闭模式
-   - 即使关闭后仍可通过按钮手动打开
-
-2. **优雅的UI设计**
-   - 响应式布局
-   - 平滑过渡动画
-   - Element Plus组件库
-   - SCSS样式编写
-
-3. **完善的类型定义**
-   - TypeScript类型安全
-   - 接口类型定义完整
-   - IDE智能提示友好
-
-4. **灵活的数据来源**
-   - 支持真实API接口
-   - 提供模拟数据用于测试
-   - 易于切换
-
-5. **用户友好**
-   - 右上角固定入口
-   - 未读徽章提示
-   - 查看详情便捷
-
-### 待优化项
-
-1. **移动端适配**
-   - 当前主要针对PC端设计
-   - 需要优化移动端显示效果
-
-2. **国际化支持**
-   - 添加i18n多语言支持
-
-3. **性能优化**
-   - 图片懒加载
-   - 虚拟滚动（公告列表很长时）
-
-4. **功能扩展**
-   - 公告搜索功能
-   - 评论功能
-   - 分享到社交媒体
-   - 推送通知
-
-5. **数据统计**
-   - 浏览量统计
-   - 用户行为分析
-   - 点击率跟踪
-
-### 使用指南
-
-详细使用说明请查看：
-- 📖 [系统公告功能使用说明.md](./系统公告功能使用说明.md)
-- 📝 [系统公告API接口文档.md](./系统公告API接口文档.md)
-
-### 开发测试
-
-使用模拟数据进行测试：
-
-```typescript
-// 在 src/App.vue 中
-import { getMockSystemAnnouncements } from '@/data/mockAnnouncementData'
-
-// 使用模拟数据
-const res = await getMockSystemAnnouncements()
-```
-
-### 生产部署
-
-1. 后端实现三个API接口
-2. 确认前端使用真实API（默认配置）
-3. 执行构建命令：`npm run build`
-4. 部署dist目录
-
----
-
-**开发团队**：Claude Code
-**版本**：v1.0.0
-**日期**：2025-01-05
-**状态**：✅ 已完成并测试