From 96f6169a6ca70e935422d772f95f7eebd7420d13 Mon Sep 17 00:00:00 2001
From: Megghy <yhggeM@gmail.com>
Date: Tue, 7 Oct 2025 14:40:25 +0800
Subject: [PATCH] feat: Enhance HistoryView with Guard List and Stats

- Added guard member model and statistics interface.
- Implemented loading functionality for guard list and statistics.
- Introduced a data table to display current guard members with pagination.
- Enhanced error handling and loading states for guard data.
- Updated UI components to include refresh button and statistics display.

feat: Update PointManage and PointGoodsView for Improved User Experience

- Added management flag to PointGoodsItem for better handling in PointManage.
- Enhanced PointGoodsView with improved tooltip logic for purchase status.
- Implemented detailed purchase history alerts and restrictions based on user actions.
- Improved visual feedback for purchased and non-purchasable items.

docs: Add comprehensive API integration documentation

- Documented API modules, data models, and request types.
- Included details on live platform integration and data storage mechanisms.

docs: Establish development workflow guidelines

- Outlined project configuration, environment setup, and code style practices.
- Provided deployment process using Docker.

docs: Create detailed documentation for the live request system

- Described the functionality and data flow of the song request system.
- Included main files and features related to the song request functionality.

docs: Define project structure and UI components

- Documented the overall project structure and key directories.
- Listed main UI components and their usage within the project.

chore: Analyze and document improvements in AnalyzeView

- Detailed enhancements made to the AnalyzeView for better user experience.
- Included visual comparisons and technical highlights of the optimizations.
---
 .kiro/steering/api-integration.md        |   36 +
 .kiro/steering/development-workflow.md   |   35 +
 .kiro/steering/live-request-system.md    |   28 +
 .kiro/steering/project-struction.md      |    3 +
 .kiro/steering/project-structure.md      |   29 +
 .kiro/steering/ui-components.md          |   50 +
 src/api/account.ts                       |    4 +
 src/api/api-models.ts                    |    6 +
 src/components.d.ts                      |    7 +-
 src/components/manage/PointGoodsItem.vue |  208 ++++-
 src/views/IndexView.vue                  | 1067 +++++++++++++++-------
 src/views/ManageLayout.vue               |    2 +-
 src/views/manage/AnalyzeView.vue         |  763 +++++++++++-----
 src/views/manage/HistoryView.vue         |  170 +++-
 src/views/manage/point/PointManage.vue   |    2 +
 src/views/pointViews/PointGoodsView.vue  |  162 +++-
 16 files changed, 1953 insertions(+), 619 deletions(-)
 create mode 100644 .kiro/steering/api-integration.md
 create mode 100644 .kiro/steering/development-workflow.md
 create mode 100644 .kiro/steering/live-request-system.md
 create mode 100644 .kiro/steering/project-struction.md
 create mode 100644 .kiro/steering/project-structure.md
 create mode 100644 .kiro/steering/ui-components.md

diff --git a/.kiro/steering/api-integration.md b/.kiro/steering/api-integration.md
new file mode 100644
index 0000000..c4cad90
--- /dev/null
+++ b/.kiro/steering/api-integration.md
@@ -0,0 +1,36 @@
+---
+inclusion: manual
+---
+# API集成
+
+该项目使用多个API接口与后端服务和直播平台进行交互。
+
+## 主要API模块
+
+- [src/api/api-models.ts](mdc:src/api/api-models.ts): 定义了系统中使用的数据模型
+- [src/api/query.ts](mdc:src/api/query.ts): 提供了API请求的基础函数
+- [src/api/account.ts](mdc:src/api/account.ts): 账户管理相关API
+
+## 数据模型
+
+- `SongRequestInfo`: 点歌请求信息
+- `DanmakuUserInfo`: 弹幕用户信息
+- `EventModel`: 事件数据模型，用于处理弹幕、SC等事件
+- `Setting_LiveRequest`: 点歌系统设置
+
+## API请求类型
+
+- `QueryGetAPI`: GET请求
+- `QueryPostAPI`: POST请求
+- `QueryPostAPIWithParams`: 带参数的POST请求
+
+## 直播平台集成
+
+系统集成了直播平台（如B站）的API，通过`useDanmakuClient()`获取直播间的弹幕、SC等数据。主要事件类型：
+
+- `danmaku`: 弹幕事件
+- `sc`: SuperChat事件
+
+## 数据存储
+
+系统使用`useStorage`进行本地数据存储，`useAccount`获取账户信息。远程数据通过API请求获取和更新。
diff --git a/.kiro/steering/development-workflow.md b/.kiro/steering/development-workflow.md
new file mode 100644
index 0000000..7b34685
--- /dev/null
+++ b/.kiro/steering/development-workflow.md
@@ -0,0 +1,35 @@
+---
+inclusion: always
+---
+# 开发工作流
+
+## 项目配置
+
+- TypeScript: 项目使用TypeScript进行类型检查
+- Vite: 使用Vite作为构建工具
+- ESLint: 代码质量检查
+- Prettier: 代码格式化
+
+## 主要配置文件
+
+- [package.json](mdc:package.json): 项目依赖和脚本
+- [tsconfig.json](mdc:tsconfig.json): TypeScript配置
+- [vite.config.mts](mdc:vite.config.mts): Vite构建配置
+- [.prettierrc.json](mdc:.prettierrc.json): Prettier格式化配置
+- [eslint.config.mjs](mdc:eslint.config.mjs): ESLint配置
+
+## 开发环境
+
+项目运行在Windows环境中，使用PowerShell作为默认shell。
+
+## 代码风格
+
+- 使用中文作为用户界面和日志语言
+- 注释应尽量简短，必要时使用中文
+- 遵循Vue 3组合式API的最佳实践
+
+## 部署流程
+
+项目包含Docker配置，可以使用Docker进行部署：
+
+- [Dockerfile](mdc:Dockerfile): Docker构建配置
diff --git a/.kiro/steering/live-request-system.md b/.kiro/steering/live-request-system.md
new file mode 100644
index 0000000..ccee12b
--- /dev/null
+++ b/.kiro/steering/live-request-system.md
@@ -0,0 +1,28 @@
+---
+inclusion: manual
+---
+# 点歌系统
+
+点歌系统是主要功能之一，允许观众在直播过程中通过弹幕、SuperChat或网页界面请求歌曲。
+
+## 主要文件
+
+- [src/views/open_live/LiveRequest.vue](mdc:src/views/open_live/LiveRequest.vue): 点歌系统的主要界面组件
+- [src/views/obs/LiveRequestOBS.vue](mdc:src/views/obs/LiveRequestOBS.vue): 用于OBS的点歌系统显示组件
+
+## 主要功能
+
+- 支持多种点歌方式：弹幕、SuperChat、网页、手动添加
+- 歌曲队列管理：等待、演唱中、已完成、已取消等状态管理
+- 权限控制：可配置只允许舰长、提督、总督或粉丝牌用户点歌
+- 冷却时间：可设置不同用户类型的点歌冷却时间
+- OBS集成：提供适用于OBS的显示组件，可展示当前点歌队列
+- 黑名单：可将特定用户加入黑名单
+
+## 数据流
+
+1. 接收来自直播平台的弹幕或SuperChat
+2. 通过前缀识别点歌请求（如"点播"）
+3. 根据规则验证请求是否有效
+4. 将有效请求添加到点歌队列
+5. 主播可以管理队列：开始演唱、标记完成、取消请求等
diff --git a/.kiro/steering/project-struction.md b/.kiro/steering/project-struction.md
new file mode 100644
index 0000000..a1df89d
--- /dev/null
+++ b/.kiro/steering/project-struction.md
@@ -0,0 +1,3 @@
+---
+inclusion: always
+---
diff --git a/.kiro/steering/project-structure.md b/.kiro/steering/project-structure.md
new file mode 100644
index 0000000..ffb2ac1
--- /dev/null
+++ b/.kiro/steering/project-structure.md
@@ -0,0 +1,29 @@
+---
+inclusion: manual
+---
+# 项目结构
+
+该项目是一个基于Vue的直播辅助工具，主要用于管理直播相关功能，如点歌系统、弹幕互动等。
+
+## 主要目录结构
+
+- `src/`: 源代码目录
+  - `api/`: API调用和模型定义
+  - `assets/`: 静态资源文件
+  - `client/`: 客户端相关组件和服务
+  - `components/`: Vue组件
+  - `composables/`: Vue组合式API函数
+  - `data/`: 数据相关模块，包括聊天和弹幕客户端
+  - `router/`: 路由配置
+  - `store/`: 状态管理
+  - `views/`: 页面视图组件
+    - `open_live/`: 直播相关视图，包括点歌系统
+    - `obs/`: OBS相关视图组件
+- `public/`: 公共静态资源
+- `plugins/`: 插件目录
+
+## 主要功能模块
+
+- 点歌系统：允许观众通过弹幕或SuperChat点歌
+- 直播互动：弹幕互动和自动化操作
+- OBS集成：为OBS提供overlays和组件
diff --git a/.kiro/steering/ui-components.md b/.kiro/steering/ui-components.md
new file mode 100644
index 0000000..92d6040
--- /dev/null
+++ b/.kiro/steering/ui-components.md
@@ -0,0 +1,50 @@
+---
+inclusion: fileMatch
+fileMatchPattern: ['*.vue']
+---
+# UI组件
+
+项目使用Vue 3和Naive UI作为主要UI框架，采用组件化设计。
+
+## 主要UI框架
+
+- Vue 3: 使用`<script setup>`语法和组合式API
+- Naive UI: 提供各种预设UI组件
+- VueUse: 提供实用的组合式函数，如`useStorage`
+
+## 常用组件
+
+### Naive UI组件
+
+项目广泛使用Naive UI组件：
+
+- `NCard`: 卡片容器
+- `NSpace`: 间距布局
+- `NButton`: 按钮
+- `NInput`: 输入框
+- `NTabs`: 标签页
+- `NDataTable`: 数据表格
+- `NModal`: 模态框
+- `NAlert`: 警告提示
+- `NTag`: 标签
+- `NIcon`: 图标容器
+
+### 自定义组件
+
+- [SongPlayer.vue](mdc:src/components/SongPlayer.vue): 歌曲播放器组件
+- [LiveRequestOBS.vue](mdc:src/views/obs/LiveRequestOBS.vue): OBS点歌显示组件
+
+## 状态管理
+
+项目使用组合式API和本地存储管理状态：
+
+- `ref`/`computed`: 响应式状态
+- `useStorage`: 持久化存储
+- `useAccount`: 账户状态管理
+
+## UI设计模式
+
+- 使用`NFlex`和`NCard`进行布局
+- 通过`NTabs`组织不同功能区域
+- 使用状态颜色区分不同状态（如等待中、处理中、已完成）
+- 响应式设计适应不同屏幕尺寸
diff --git a/src/api/account.ts b/src/api/account.ts
index 2c5d055..6686f42 100644
--- a/src/api/account.ts
+++ b/src/api/account.ts
@@ -51,6 +51,10 @@ export async function GetSelfAccount(token?: string) {
 
 export function UpdateAccountLoop() {
   setInterval(() => {
+    const urlParams = new URLSearchParams(window.location.search)
+    if (urlParams.get('as')) {
+      return
+    }
     if (ACCOUNT.value && window.$route?.name != 'question-display') {
       // 防止在问题详情页刷新
       GetSelfAccount()
diff --git a/src/api/api-models.ts b/src/api/api-models.ts
index 3bb31e9..78f3688 100644
--- a/src/api/api-models.ts
+++ b/src/api/api-models.ts
@@ -715,6 +715,12 @@ export interface ResponsePointGoodModel {
   allowGuardLevel: GuardLevel
   setting: PointGoodsSetting
 
+  // 购买状态信息
+  purchasedCount: number
+  hasPurchased: boolean
+  canPurchase: boolean
+  cannotPurchaseReason?: string
+
   // 添加虚拟礼物多Key支持
   virtualKeys?: string[]
   keySelectionMode?: KeySelectionMode
diff --git a/src/components.d.ts b/src/components.d.ts
index 382f8ff..e0226fc 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,19 +19,14 @@ declare module 'vue' {
     LiveInfoContainer: typeof import('./components/LiveInfoContainer.vue')['default']
     MonacoEditorComponent: typeof import('./components/MonacoEditorComponent.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
-    NAvatar: typeof import('naive-ui')['NAvatar']
-    NButton: typeof import('naive-ui')['NButton']
-    NCard: typeof import('naive-ui')['NCard']
+    NDataTable: typeof import('naive-ui')['NDataTable']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NFlex: typeof import('naive-ui')['NFlex']
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGridItem: typeof import('naive-ui')['NGridItem']
     NIcon: typeof import('naive-ui')['NIcon']
-    NImage: typeof import('naive-ui')['NImage']
-    NPopconfirm: typeof import('naive-ui')['NPopconfirm']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSpace: typeof import('naive-ui')['NSpace']
     NTag: typeof import('naive-ui')['NTag']
     NText: typeof import('naive-ui')['NText']
     NTime: typeof import('naive-ui')['NTime']
diff --git a/src/components/manage/PointGoodsItem.vue b/src/components/manage/PointGoodsItem.vue
index 5a2a2da..7403422 100644
--- a/src/components/manage/PointGoodsItem.vue
+++ b/src/components/manage/PointGoodsItem.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
   goods: ResponsePointGoodModel | undefined
   contentStyle?: string | undefined
   size?: 'small' | 'default'
+  isManage?: boolean
 }>()
 
 // 默认封面图片
@@ -62,16 +63,16 @@ const emptyCover = `${IMGUR_URL}None.png`
             :bordered="true"
             style="background-color: transparent;"
             :style="{
-              color: goods.type == GoodsTypes.Physical ? '#006633' : '#0066cc',
-              borderColor: goods.type == GoodsTypes.Physical ? '#009966' : '#3399ff',
-              backgroundColor: goods.type == GoodsTypes.Physical ? '#c2e6d290' : '#c2d6eb90',
+              color: goods.type === GoodsTypes.Physical ? '#006633' : '#0066cc',
+              borderColor: goods.type === GoodsTypes.Physical ? '#009966' : '#3399ff',
+              backgroundColor: goods.type === GoodsTypes.Physical ? '#c2e6d290' : '#c2d6eb90',
             }"
           >
-            {{ goods.type == GoodsTypes.Physical ? '实物' : '虚拟' }}
+            {{ goods.type === GoodsTypes.Physical ? '实物' : '虚拟' }}
           </NTag>
           <!-- 状态标签 -->
           <NTag
-            v-if="goods.count == 0"
+            v-if="goods.count === 0"
             size="small"
             type="error"
             :bordered="false"
@@ -133,7 +134,7 @@ const emptyCover = `${IMGUR_URL}None.png`
               {{ goods.count }}
             </NText>
             <NText
-              v-else-if="goods.count == 0"
+              v-else-if="goods.count === 0"
               size="small"
               type="error"
             >
@@ -174,12 +175,152 @@ const emptyCover = `${IMGUR_URL}None.png`
         </NText>
       </NEllipsis>
 
+      <!-- 礼物信息卡片 - 仅在后台管理页面显示 -->
+      <div
+        v-if="isManage"
+        class="info-cards"
+      >
+        <!-- 兑换数量限制 -->
+        <div
+          v-if="goods.type === GoodsTypes.Physical && goods.maxBuyCount"
+          class="info-item"
+        >
+          <NText
+            depth="3"
+            class="info-label"
+          >
+            📦 限购
+          </NText>
+          <NText class="info-value">
+            {{ goods.maxBuyCount }}件
+          </NText>
+        </div>
+
+        <!-- 是否允许重复兑换 -->
+        <div class="info-item">
+          <NText
+            depth="3"
+            class="info-label"
+          >
+            🔄 重购
+          </NText>
+          <NText
+            class="info-value"
+            :type="goods.isAllowRebuy ? 'success' : 'error'"
+          >
+            {{ goods.isAllowRebuy ? '允许' : '禁止' }}
+          </NText>
+        </div>
+
+        <!-- 舰长等级限制 -->
+        <div
+          v-if="goods.setting?.allowGuardLevel && goods.setting.allowGuardLevel > 0"
+          class="info-item"
+        >
+          <NText
+            depth="3"
+            class="info-label"
+          >
+            ⚓ 等级
+          </NText>
+          <NText
+            class="info-value"
+            type="warning"
+          >
+            {{ goods.setting.allowGuardLevel === 1 ? '总督' : goods.setting.allowGuardLevel === 2 ? '提督' : '舰长' }}+
+          </NText>
+        </div>
+
+        <!-- 舰长免费 -->
+        <div
+          v-if="goods.setting?.guardFree"
+          class="info-item"
+        >
+          <NText
+            depth="3"
+            class="info-label"
+          >
+            ⭐ 舰长
+          </NText>
+          <NText
+            class="info-value"
+            type="success"
+          >
+            免费
+          </NText>
+        </div>
+
+        <!-- 虚拟礼物密钥数量 -->
+        <div
+          v-if="goods.type === GoodsTypes.Virtual && goods.virtualKeys && goods.virtualKeys.length > 0"
+          class="info-item"
+        >
+          <NText
+            depth="3"
+            class="info-label"
+          >
+            🔑 密钥
+          </NText>
+          <NText class="info-value">
+            {{ goods.virtualKeys.length }}个
+          </NText>
+        </div>
+
+        <!-- 收集地址方式 -->
+        <div
+          v-if="goods.type === GoodsTypes.Physical"
+          class="info-item"
+        >
+          <NText
+            depth="3"
+            class="info-label"
+          >
+            📮 地址
+          </NText>
+          <NText class="info-value">
+            {{ goods.collectUrl ? '站外' : '本站' }}
+          </NText>
+        </div>
+      </div>
+
       <!-- 用户自定义标签展示 -->
       <div
-        v-if="goods.tags && goods.tags.length > 0"
+        v-if="(goods.tags && goods.tags.length > 0) || (!isManage && ((goods.setting?.allowGuardLevel ?? 0) > 0 || goods.setting?.guardFree || !goods.isAllowRebuy))"
         class="tags-container"
       >
         <div class="tags-wrapper">
+          <!-- 用户页面：显示重要信息标签 -->
+          <template v-if="!isManage">
+            <NTag
+              v-if="goods.setting?.allowGuardLevel && goods.setting.allowGuardLevel > 0"
+              :bordered="false"
+              size="tiny"
+              class="user-tag important-tag"
+              style="color: #fff; background-color: rgba(255, 170, 0, 0.85);"
+            >
+              ⚓ {{ goods.setting.allowGuardLevel === 1 ? '总督' : goods.setting.allowGuardLevel === 2 ? '提督' : '舰长' }}+
+            </NTag>
+            <NTag
+              v-if="goods.setting?.guardFree"
+              :bordered="false"
+              size="tiny"
+              class="user-tag important-tag"
+              style="color: #fff; background-color: rgba(24, 160, 88, 0.85);"
+            >
+              ⭐ 舰长免费
+            </NTag>
+            <NTag
+              v-if="!goods.isAllowRebuy"
+              :bordered="false"
+              size="tiny"
+              class="user-tag important-tag"
+              style="color: #fff; background-color: rgba(208, 48, 80, 0.85);"
+            >
+              🔒 限购一次
+            </NTag>
+          </template>
+
+          <!-- 用户自定义标签 -->
           <NTag
             v-for="tag in goods.tags"
             :key="tag"
@@ -399,6 +540,18 @@ const emptyCover = `${IMGUR_URL}None.png`
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
+/* 重要信息标签样式 */
+.important-tag {
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.important-tag:hover {
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
+  transform: translateY(-2px) scale(1.08);
+}
+
 .stock-info {
   font-size: 0.85em;
   color: var(--text-color-3);
@@ -408,4 +561,45 @@ const emptyCover = `${IMGUR_URL}None.png`
   border-radius: 4px;
   font-weight: 500;
 }
+
+/* 信息卡片样式 */
+.info-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 8px 0;
+  padding: 8px;
+  background-color: var(--action-color);
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background-color: var(--card-color);
+  border-radius: 4px;
+  border: 1px solid var(--divider-color);
+  transition: all 0.2s ease;
+  font-size: 0.85em;
+}
+
+.info-item:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-color: var(--primary-color-hover);
+}
+
+.info-label {
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+
+.info-value {
+  font-weight: 600;
+  font-size: 0.95em;
+  white-space: nowrap;
+}
 </style>
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 6239392..a07dd4b 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -13,93 +13,112 @@ import {
 import { AnalyticsSharp, Calendar, Chatbox, ListCircle, MusicalNote } from '@vicons/ionicons5'
 import { useWindowSize } from '@vueuse/core'
 import { NButton, NCard, NFlex, NGradientText, NIcon, NNumberAnimation, NSpace, NText, NTooltip } from 'naive-ui'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import { QueryGetAPI } from '@/api/query'
 import { VTSURU_API_URL } from '@/data/constants'
+import { isDarkMode } from '@/Utils'
 import vtb from '@/svgs/ic_vtuber.svg'
 
 const { width } = useWindowSize()
+const $router = useRouter()
 
 const functions = [
   {
     name: '直播事件记录',
     desc: '能够记录并查询上舰和SC记录',
     icon: VehicleShip24Filled,
+    route: 'manage-event',
   },
   {
     name: '积分兑换',
     desc: '通过上舰, Superchat, 赠送礼物等操作可以获取积分, 并通过积分兑换虚拟或者实体礼物',
     icon: BookCoins20Filled,
+    route: 'manage-point',
   },
   {
     name: '弹幕机 (OBS',
     desc: '在OBS上显示直播间弹幕、礼物和互动内容，兼容blivechat样式 (开发中',
     icon: Chat24Filled,
+    route: 'manage-danmuji',
   },
   {
     name: '日程表',
     desc: '提供多种样式的日程表',
     icon: Calendar,
+    route: 'manage-schedule',
   },
   {
     name: '歌单',
     desc: '可以放自己的歌单或者能唱的歌, 支持多种样式',
     icon: MusicalNote,
+    route: 'manage-songList',
   },
   {
     name: '棉花糖 (提问箱',
     desc: '一个简单易用的提问箱',
     icon: Chatbox,
+    route: 'manage-questionBox',
   },
   {
     name: '动态抽奖',
     desc: '从动态评论区抽取评论或者转发的用户',
     icon: Lottery24Filled,
+    route: 'manage-lottery',
   },
   {
     name: '直播抽奖',
     desc: '从直播间弹幕或礼物抽取用户',
     icon: Lottery24Filled,
+    route: 'manage-liveLottery',
   },
   {
     name: '弹幕点歌 (歌势)',
     desc: '可以让弹幕进行点歌, 然后自己唱',
     icon: ListCircle,
+    route: 'manage-musicRequest',
   },
   {
     name: '弹幕点歌 (点播)',
     desc: '可以让弹幕进行点歌, 进行搜索后直接播放',
     icon: ListCircle,
+    route: 'manage-liveRequest',
   },
   {
     name: '弹幕排队',
     desc: '通过发送弹幕和礼物加入队列, 允许设置多种条件',
     icon: ListCircle,
+    route: 'manage-liveQueue',
   },
   {
     name: '读弹幕',
     desc: '通过浏览器自带的tts服务念出弹幕 (此功能需要 Chrome, Edge 等现代浏览器!)',
     icon: TabletSpeaker24Filled,
+    route: 'manage-speech',
   },
   {
     name: '视频征集',
     desc: '创建用来收集视频链接的页面, 可以从动态爬取(画饼), 也可以提前对视频进行筛选',
     icon: VideoAdd20Filled,
+    route: 'manage-videoCollect',
   },
   {
     name: '直播场次记录',
     desc: '记录每场直播的数据以及弹幕等内容',
     icon: VehicleShip24Filled,
+    route: 'manage-live',
   },
   {
     name: '数据跟踪',
     desc: '绑定账号后查看粉丝 舰长 观看数 等数据的历史记录',
     icon: AnalyticsSharp,
+    route: 'manage-history',
   },
   {
     name: '还有更多',
     desc: '更多功能仍在开发中. 有其他合理需求或者建议, 或者有想要添加的样式? 向我提出!',
     icon: MoreHorizontal24Filled,
+    route: 'manage-tools-dashboard',
   },
 ]
 interface IndexDataType {
@@ -107,9 +126,125 @@ interface IndexDataType {
   streamers: { name: string, uname: string, avatar: string, uid: number, roomId: number }[]
 }
 
-const iconColor = 'white'
 const indexData = ref<IndexDataType>()
 
+// 动态计算卡片背景色
+const cardBgLight = computed(() => isDarkMode.value
+  ? 'rgba(255, 255, 255, 0.08)'
+  : 'rgba(255, 255, 255, 0.15)')
+
+const cardBgMedium = computed(() => isDarkMode.value
+  ? 'rgba(255, 255, 255, 0.12)'
+  : 'rgba(255, 255, 255, 0.2)')
+
+const textColor = computed(() => isDarkMode.value
+  ? 'rgba(255, 255, 255, 0.95)'
+  : 'white')
+
+const textColorSecondary = computed(() => isDarkMode.value
+  ? 'rgba(255, 255, 255, 0.75)'
+  : 'rgba(255, 255, 255, 0.9)')
+
+const gradientColors = computed(() => isDarkMode.value
+  ? { from: '#f0f0f0', to: '#b8e6e6' }
+  : { from: '#e5e5e5', to: '#c2ebeb' })
+
+// 统一的圆角设计系统
+const borderRadius = {
+  small: '8px',
+  medium: '12px',
+  large: '16px',
+  xlarge: '20px',
+  round: '50%',
+}
+
+// 统一的阴影系统
+const shadowSystem = computed(() => ({
+  light: isDarkMode.value
+    ? '0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2)'
+    : '0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.12)',
+  medium: isDarkMode.value
+    ? '0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3)'
+    : '0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.16)',
+  heavy: isDarkMode.value
+    ? '0 8px 32px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4)'
+    : '0 8px 32px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.20)',
+  hover: isDarkMode.value
+    ? '0 12px 48px rgba(0, 0, 0, 0.7), 0 6px 16px rgba(0, 0, 0, 0.5)'
+    : '0 12px 48px rgba(0, 0, 0, 0.20), 0 6px 16px rgba(0, 0, 0, 0.24)'
+}))
+
+// 统一的边框系统
+const borderSystem = computed(() => ({
+  light: isDarkMode.value
+    ? '1px solid rgba(255, 255, 255, 0.08)'
+    : '1px solid rgba(255, 255, 255, 0.15)',
+  medium: isDarkMode.value
+    ? '1px solid rgba(255, 255, 255, 0.12)'
+    : '1px solid rgba(255, 255, 255, 0.25)',
+  accent: isDarkMode.value
+    ? '2px solid rgba(255, 255, 255, 0.15)'
+    : '2px solid rgba(255, 255, 255, 0.3)'
+}))
+
+// 功能图标颜色映射 - 优化为统一的色系，与背景渐变协调
+const iconColors = computed(() => {
+  // 基于背景渐变色调的统一色板
+  const baseColors = isDarkMode.value ? {
+    // 暗色模式：更柔和的色调，降低饱和度
+    teal: '#4ECDC4',      // 青绿色 - 接近背景起始色
+    purple: '#9B7EDE',    // 紫色 - 接近背景结束色
+    blue: '#6BB6FF',      // 蓝色
+    green: '#7ED321',     // 绿色
+    orange: '#F5A623',    // 橙色
+    pink: '#D63384',      // 粉色
+    indigo: '#6F42C1',    // 靛蓝
+    cyan: '#17A2B8',      // 青色
+    mint: '#20C997',      // 薄荷绿
+    lavender: '#B794F6',  // 薰衣草紫
+    coral: '#FF6B6B',     // 珊瑚色
+    sage: '#8FBC8F'       // 鼠尾草绿
+  } : {
+    // 亮色模式：更鲜艳的色调，保持活力
+    teal: '#2EBFA5',      // 青绿色 - 与背景起始色呼应
+    purple: '#8B5CF6',    // 紫色 - 与背景结束色呼应
+    blue: '#3B82F6',      // 蓝色
+    green: '#10B981',     // 绿色
+    orange: '#F59E0B',    // 橙色
+    pink: '#EC4899',      // 粉色
+    indigo: '#6366F1',    // 靛蓝
+    cyan: '#06B6D4',      // 青色
+    mint: '#14B8A6',      // 薄荷绿
+    lavender: '#A855F7',  // 薰衣草紫
+    coral: '#EF4444',     // 珊瑚色
+    sage: '#22C55E'       // 鼠尾草绿
+  }
+
+  return {
+    VehicleShip24Filled: baseColors.teal,        // 直播事件记录 - 青绿色
+    BookCoins20Filled: baseColors.orange,        // 积分兑换 - 橙色
+    Chat24Filled: baseColors.green,              // 弹幕机 - 绿色
+    Calendar: baseColors.pink,                   // 日程表 - 粉色
+    MusicalNote: baseColors.purple,              // 歌单 - 紫色
+    Chatbox: baseColors.blue,                    // 棉花糖 - 蓝色
+    Lottery24Filled: baseColors.coral,           // 抽奖功能 - 珊瑚色
+    ListCircle: baseColors.sage,                 // 点歌/排队功能 - 鼠尾草绿
+    TabletSpeaker24Filled: baseColors.cyan,     // 读弹幕 - 青色
+    VideoAdd20Filled: baseColors.lavender,      // 视频征集 - 薰衣草紫
+    AnalyticsSharp: baseColors.mint,             // 数据跟踪 - 薄荷绿
+    MoreHorizontal24Filled: baseColors.indigo,  // 更多功能 - 靛蓝
+    PersonFeedback24Filled: baseColors.coral,   // 自动操作 - 珊瑚色
+  }
+})
+
+// 处理功能卡片点击
+const handleFunctionClick = (item: typeof functions[0]) => {
+  if (item.route) {
+    // 跳转到对应的管理页面
+    $router.push({ name: item.route })
+  }
+}
+
 onMounted(async () => {
   const data = await QueryGetAPI<IndexDataType>(`${VTSURU_API_URL}get-index-data`)
   if (data.code == 200) {
@@ -120,214 +255,175 @@ onMounted(async () => {
 
 <template>
   <div class="index-background">
-    <NSpace
-      vertical
-      justify="center"
-      align="center"
-      style="padding-top: 30px; padding-bottom: 30px;"
-    >
+    <NSpace vertical justify="center" align="center" class="main-container">
       <!-- 顶部标题部分 -->
-      <NCard style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: none; width: 90vw; max-width: 1400px; ">
-        <NSpace
-          justify="center"
-          align="center"
-          :size="width > 700 ? 50 : 0"
-        >
-          <vtb />
-          <NSpace
-            vertical
-            justify="center"
-          >
-            <NGradientText
-              size="3rem"
-              :gradient="{
-                deg: 180,
-                from: '#e5e5e5',
-                to: '#c2ebeb',
-              }"
-              style="font-weight: 700"
-            >
+      <NCard :style="{
+        background: cardBgLight,
+        backdropFilter: 'blur(10px)',
+        border: 'none',
+        width: '90vw',
+        maxWidth: '1400px',
+        borderRadius: borderRadius.xlarge,
+      }" class="hero-card">
+        <NSpace justify="center" align="center" :size="width > 700 ? 50 : 0" :vertical="width <= 700">
+          <vtb class="hero-icon" />
+          <NSpace vertical justify="center" :align="width <= 700 ? 'center' : 'start'">
+            <NGradientText :size="width > 700 ? '3rem' : '2.5rem'" :gradient="{
+              deg: 180,
+              ...gradientColors,
+            }" style="font-weight: 700">
               VTSURU.LIVE
             </NGradientText>
-            <NText style="font-size: 1.5em; font-weight: 500; color: white">
+            <NText :style="{
+              fontSize: width > 700 ? '1.5em' : '1.2em',
+              fontWeight: 500,
+              color: textColor,
+              textAlign: width <= 700 ? 'center' : 'left',
+            }">
               一个给主播提供便利功能的网站 😊
             </NText>
-            <span />
             <!-- 主播 / 观众入口 -->
-            <NSpace
-              justify="center"
-              align="center"
-            >
-              <NFlex
-                :wrap="false"
-                justify="center"
-                align="center"
-                style="gap: 24px; margin-top: 10px;"
-              >
-                <!-- 主播入口 -->
-                <NTooltip placement="bottom">
-                  <template #trigger>
-                    <NCard
-                      hoverable
-                      style="width: 240px; background: rgba(255, 255, 255, 0.15); cursor: pointer; border: none;"
-                      @click="$router.push({ name: 'manage-index' })"
-                    >
-                      <NFlex
-                        vertical
-                        align="center"
-                        justify="center"
-                        :size="8"
-                      >
-                        <NIcon
-                          :component="PersonFeedback24Filled"
-                          size="36"
-                          color="white"
-                        />
-                        <NText style="font-size: 1.2rem; font-weight: 500; color: white;">
-                          我是主播
-                        </NText>
-                        <NButton
-                          type="primary"
-                          secondary
-                          size="small"
-                        >
-                          开始使用
-                        </NButton>
-                      </NFlex>
-                    </NCard>
-                  </template>
-                  进入主播后台，管理直播相关工具与设置
-                </NTooltip>
+            <NFlex :wrap="width <= 700" justify="center" align="center"
+              :style="{ gap: width > 700 ? '24px' : '16px', marginTop: '20px' }">
+              <!-- 主播入口 -->
+              <NTooltip placement="bottom">
+                <template #trigger>
+                  <NCard hoverable :style="{
+                    width: width > 700 ? '240px' : '100%',
+                    minWidth: '200px',
+                    background: cardBgMedium,
+                    cursor: 'pointer',
+                    border: 'none',
+                    borderRadius: borderRadius.large,
+                    transition: 'all 0.3s ease',
+                  }" class="entry-card" @click="$router.push({ name: 'manage-index' })">
+                    <NFlex vertical align="center" justify="center" :size="8">
+                      <NIcon :component="PersonFeedback24Filled" size="36" :color="textColor" />
+                      <NText :style="{ fontSize: '1.2rem', fontWeight: 500, color: textColor }">
+                        我是主播
+                      </NText>
+                      <NButton type="primary" secondary size="small" :style="{ borderRadius: borderRadius.medium }">
+                        开始使用
+                      </NButton>
+                    </NFlex>
+                  </NCard>
+                </template>
+                进入主播后台，管理直播相关工具与设置
+              </NTooltip>
 
-                <!-- 观众入口 -->
-                <NTooltip placement="bottom">
-                  <template #trigger>
-                    <NCard
-                      hoverable
-                      style="width: 240px; background: rgba(255, 255, 255, 0.15); cursor: pointer; border: none;"
-                      @click="$router.push({ name: 'bili-user' })"
-                    >
-                      <NFlex
-                        vertical
-                        align="center"
-                        justify="center"
-                        :size="8"
-                      >
-                        <NIcon
-                          :component="Chat24Filled"
-                          size="36"
-                          color="white"
-                        />
-                        <NText style="font-size: 1.2rem; font-weight: 500; color: white;">
-                          我是观众
-                        </NText>
-                        <NButton
-                          type="info"
-                          secondary
-                          size="small"
-                        >
-                          用户主页
-                        </NButton>
-                      </NFlex>
-                    </NCard>
-                  </template>
-                  进入个人主页，查看积分与互动记录
-                </NTooltip>
-              </NFlex>
-            </NSpace>
+              <!-- 观众入口 -->
+              <NTooltip placement="bottom">
+                <template #trigger>
+                  <NCard hoverable :style="{
+                    width: width > 700 ? '240px' : '100%',
+                    minWidth: '200px',
+                    background: cardBgMedium,
+                    cursor: 'pointer',
+                    border: 'none',
+                    borderRadius: borderRadius.large,
+                    transition: 'all 0.3s ease',
+                  }" class="entry-card" @click="$router.push({ name: 'bili-user' })">
+                    <NFlex vertical align="center" justify="center" :size="8">
+                      <NIcon :component="Chat24Filled" size="36" :color="textColor" />
+                      <NText :style="{ fontSize: '1.2rem', fontWeight: 500, color: textColor }">
+                        我是观众
+                      </NText>
+                      <NButton type="info" secondary size="small" :style="{ borderRadius: borderRadius.medium }">
+                        用户主页
+                      </NButton>
+                    </NFlex>
+                  </NCard>
+                </template>
+                进入个人主页，查看积分与互动记录
+              </NTooltip>
+            </NFlex>
 
             <!-- 其他操作按钮 -->
-            <NSpace
-              justify="center"
-              align="center"
-              style="margin-top: 20px;"
-            >
-              <NButton
-                size="large"
-                @click="$router.push('/@Megghy')"
-              >
+            <NFlex justify="center" align="center" :wrap="width <= 700" :style="{ marginTop: '20px', gap: '12px' }">
+              <NButton size="large" secondary :style="{ borderRadius: borderRadius.large }"
+                @click="$router.push('/@Megghy')">
                 展示
               </NButton>
-              <NButton
-                size="large"
-                tag="a"
-                href="https://play-live.bilibili.com/details/1698742711771"
-                target="_blank"
-                color="#ff778f"
-              >
+              <NButton size="large" tag="a" href="https://play-live.bilibili.com/details/1698742711771" target="_blank"
+                color="#ff778f" :style="{ borderRadius: borderRadius.large }">
                 幻星平台
               </NButton>
-              <NButton
-                type="info"
-                size="large"
-                @click="$router.push({ name: 'about' })"
-              >
+              <NButton type="info" size="large" :style="{ borderRadius: borderRadius.large }"
+                @click="$router.push({ name: 'about' })">
                 关于
               </NButton>
-            </NSpace>
+            </NFlex>
           </NSpace>
         </NSpace>
       </NCard>
 
       <!-- 用户统计部分 -->
-      <NCard
-        style="background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px);
-        border: none; width: 90vw; max-width: 1400px;"
-        size="small"
-      >
-        <NFlex
-          justify="center"
-          align="center"
-        >
-          <NText style="font-size: 0.9rem; color: rgba(255,255,255,0.7);">
-            本站用户: <NNumberAnimation
-              :from="0"
-              :to="indexData?.userCount"
-              show-separator
-            />
-          </NText>
+      <NCard :style="{
+        background: isDarkMode ? 'rgba(255, 255, 255, 0.03)' : 'rgba(255, 255, 255, 0.08)',
+        backdropFilter: 'blur(10px)',
+        border: 'none',
+        width: '90vw',
+        maxWidth: '1400px',
+        borderRadius: borderRadius.medium,
+      }" size="small">
+        <NFlex justify="center" align="center">
+          <div class="stats-item">
+            <NText :style="{ fontSize: '0.8rem', color: textColorSecondary, display: 'block', textAlign: 'center' }">
+              注册用户
+            </NText>
+            <NText
+              :style="{ fontSize: '1.2rem', fontWeight: 600, color: textColor, display: 'block', textAlign: 'center' }">
+              <NNumberAnimation :from="0" :to="indexData?.userCount" show-separator />
+            </NText>
+          </div>
         </NFlex>
       </NCard>
 
       <!-- 功能列表部分 -->
-      <NCard style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: none; width: 90vw; max-width: 1400px; margin-bottom: 20px;">
+      <NCard :style="{
+        background: cardBgLight,
+        backdropFilter: 'blur(10px)',
+        border: 'none',
+        width: '90vw',
+        maxWidth: '1400px',
+        marginBottom: '20px',
+        borderRadius: borderRadius.xlarge,
+      }">
         <NFlex vertical>
-          <NFlex
-            justify="center"
-            align="center"
-            style="margin-bottom: 20px;"
-          >
-            <NText style="font-size: 1.2rem; font-weight: 500; background-image: linear-gradient(to right, #e5e5e5, #c2ebeb); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
-              网站功能
-            </NText>
+          <NFlex justify="center" align="center" style="margin-bottom: 30px;">
+            <div class="section-header">
+              <NText class="section-title">
+                🌟 网站功能
+              </NText>
+              <div class="section-subtitle">
+                <NText :style="{ color: textColorSecondary, fontSize: '0.9rem' }">
+                  为主播和观众提供丰富的互动工具
+                </NText>
+              </div>
+            </div>
           </NFlex>
 
-          <NFlex
-            :wrap="true"
-            justify="center"
-            style="gap: 15px;"
-          >
-            <NCard
-              v-for="item in functions"
-              :key="item.name"
-              style="width: 300px; max-width: 100%; background: rgba(255, 255, 255, 0.2); border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);"
-              hoverable
-            >
+          <NFlex :wrap="true" justify="center" style="gap: 15px;">
+            <NCard v-for="item in functions" :key="item.name" :style="{
+              width: '300px',
+              maxWidth: '100%',
+              background: cardBgMedium,
+              border: borderSystem.medium,
+              borderRadius: borderRadius.large,
+              boxShadow: shadowSystem.light,
+              cursor: item.route ? 'pointer' : 'default',
+            }" hoverable class="feature-card" @click="handleFunctionClick(item)">
               <NFlex vertical>
-                <NFlex
-                  align="center"
-                  style="margin-bottom: 10px;"
-                >
-                  <NIcon
-                    :component="item.icon"
-                    size="24"
-                    color="white"
-                  />
-                  <NText style="font-size: 1.1rem; font-weight: 500; margin-left: 10px; color: white;">
+                <NFlex align="center" style="margin-bottom: 10px;">
+                  <div class="icon-wrapper">
+                    <NIcon :component="item.icon" size="24"
+                      :color="iconColors[item.icon.name as keyof typeof iconColors] || textColor" />
+                  </div>
+                  <NText :style="{ fontSize: '1.1rem', fontWeight: 500, marginLeft: '12px', color: textColor }">
                     {{ item.name }}
                   </NText>
                 </NFlex>
-                <NText style="line-height: 1.6; color: rgba(255, 255, 255, 0.9);">
+                <NText :style="{ lineHeight: 1.6, color: textColorSecondary }">
                   {{ item.desc }}
                 </NText>
               </NFlex>
@@ -337,104 +433,92 @@ onMounted(async () => {
       </NCard>
 
       <!-- 客户端专属功能部分 -->
-      <NCard style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: none; width: 90vw; max-width: 1400px; margin-bottom: 20px;">
+      <NCard :style="{
+        background: cardBgLight,
+        backdropFilter: 'blur(10px)',
+        border: 'none',
+        width: '90vw',
+        maxWidth: '1400px',
+        marginBottom: '20px',
+        borderRadius: borderRadius.xlarge,
+      }">
         <NFlex vertical>
-          <NFlex
-            justify="center"
-            align="center"
-            style="margin-bottom: 20px;"
-          >
-            <NText style="font-size: 1.2rem; font-weight: 500; background-image: linear-gradient(to right, #e5e5e5, #c2ebeb); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
-              客户端功能
-            </NText>
+          <NFlex justify="center" align="center" style="margin-bottom: 30px;">
+            <div class="section-header">
+              <NText class="section-title">
+                💻 客户端功能
+              </NText>
+              <div class="section-subtitle">
+                <NText :style="{ color: textColorSecondary, fontSize: '0.9rem' }">
+                  本地运行的强大自动化工具
+                </NText>
+              </div>
+            </div>
           </NFlex>
 
-          <NFlex
-            :wrap="true"
-            justify="center"
-            style="gap: 20px;"
-          >
-            <NCard
-              style="width: 380px; max-width: 100%; background: rgba(255, 255, 255, 0.2); border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);"
-              hoverable
-            >
+          <NFlex :wrap="true" justify="center" style="gap: 20px;">
+            <NCard :style="{
+              width: '380px',
+              maxWidth: '100%',
+              background: cardBgMedium,
+              border: borderSystem.light,
+              borderRadius: borderRadius.large,
+              boxShadow: shadowSystem.light,
+            }" hoverable class="feature-card">
               <NFlex vertical>
-                <NFlex
-                  align="center"
-                  style="margin-bottom: 10px;"
-                >
-                  <NIcon
-                    :component="PersonFeedback24Filled"
-                    size="24"
-                    color="white"
-                  />
-                  <NText style="font-size: 1.1rem; font-weight: 500; margin-left: 10px; color: white;">
+                <NFlex align="center" style="margin-bottom: 10px;">
+                  <div class="icon-wrapper">
+                    <NIcon :component="PersonFeedback24Filled" size="24" :color="iconColors.PersonFeedback24Filled" />
+                  </div>
+                  <NText :style="{ fontSize: '1.1rem', fontWeight: 500, marginLeft: '12px', color: textColor }">
                     自动操作
                   </NText>
                 </NFlex>
-                <NText style="line-height: 1.6; color: rgba(255, 255, 255, 0.9);">
+                <NText :style="{ lineHeight: 1.6, color: textColorSecondary }">
                   支持弹幕自动回复、礼物感谢、上舰私信、关注感谢、入场欢迎、定时发送和SC感谢等功能，使用模板系统和JS执行环境，可定制化程度挺高
                 </NText>
               </NFlex>
             </NCard>
 
-            <NCard
-              style="width: 380px; max-width: 100%; background: rgba(255, 255, 255, 0.2); border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);"
-              hoverable
-            >
+            <NCard :style="{
+              width: '380px',
+              maxWidth: '100%',
+              background: cardBgMedium,
+              border: borderSystem.light,
+              borderRadius: borderRadius.large,
+              boxShadow: shadowSystem.light,
+            }" hoverable class="feature-card">
               <NFlex vertical>
-                <NFlex
-                  align="center"
-                  style="margin-bottom: 10px;"
-                >
-                  <NIcon
-                    :component="Chat24Filled"
-                    size="24"
-                    color="white"
-                  />
-                  <NText style="font-size: 1.1rem; font-weight: 500; margin-left: 10px; color: white;">
+                <NFlex align="center" style="margin-bottom: 10px;">
+                  <div class="icon-wrapper">
+                    <NIcon :component="Chat24Filled" size="24" :color="iconColors.Chat24Filled" />
+                  </div>
+                  <NText :style="{ fontSize: '1.1rem', fontWeight: 500, marginLeft: '12px', color: textColor }">
                     弹幕机 (客户端)
                   </NText>
                 </NFlex>
-                <NText style="line-height: 1.6; color: rgba(255, 255, 255, 0.9);">
+                <NText :style="{ lineHeight: 1.6, color: textColorSecondary }">
                   在自己电脑上显示直播间弹幕、礼物和互动内容
                 </NText>
               </NFlex>
             </NCard>
           </NFlex>
 
-          <NFlex
-            justify="center"
-            style="margin-top: 20px;"
-          >
+          <NFlex justify="center" style="margin-top: 20px;">
             <NSpace>
-              <NButton
-                type="primary"
-                tag="a"
-                href="https://www.wolai.com/carN6qvUm3FErze9Xo53ii"
-                target="_blank"
-              >
+              <NButton type="primary" tag="a" href="https://www.wolai.com/carN6qvUm3FErze9Xo53ii" target="_blank"
+                :style="{ borderRadius: borderRadius.medium }">
                 <template #icon>
                   <NIcon :component="Info24Filled" />
                 </template>
                 客户端安装说明
               </NButton>
-              <NButton
-                ghost
-                tag="a"
-                href="https://github.com/Megghy/vtsuru-fetvher-client"
-                target="_blank"
-                color="white"
-              >
+              <NButton ghost tag="a" href="https://github.com/Megghy/vtsuru-fetvher-client" target="_blank"
+                color="white" :style="{ borderRadius: borderRadius.medium }">
                 客户端代码
               </NButton>
-              <NButton
-                ghost
-                tag="a"
-                href="https://github.com/Megghy/vtsuru.live/tree/master/src/client"
-                target="_blank"
-                color="white"
-              >
+              <NButton ghost tag="a" href="https://github.com/Megghy/vtsuru.live/tree/master/src/client" target="_blank"
+                color="white" :style="{ borderRadius: borderRadius.medium }">
                 逻辑代码
               </NButton>
             </NSpace>
@@ -443,108 +527,429 @@ onMounted(async () => {
       </NCard>
 
       <!-- 使用本站的主播部分 -->
-      <NCard style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: none; width: 90vw; max-width: 1400px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);">
+      <NCard :style="{
+        background: cardBgLight,
+        backdropFilter: 'blur(10px)',
+        border: borderSystem.light,
+        width: '90vw',
+        maxWidth: '1400px',
+        borderRadius: borderRadius.xlarge,
+        boxShadow: shadowSystem.light,
+      }">
         <NFlex vertical>
-          <NFlex
-            justify="center"
-            align="center"
-            style="margin-bottom: 20px;"
-          >
-            <NText style="font-size: 1.2rem; font-weight: 500; background-image: linear-gradient(to right, #e5e5e5, #c2ebeb); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
-              正在使用本站的主播们
-              <NTooltip>
-                <template #trigger>
-                  <NIcon :component="Info24Filled" />
-                </template>
-                随机展示不分先后, 仅粉丝数大于500的主播
-              </NTooltip>
-            </NText>
+          <NFlex justify="center" align="center" style="margin-bottom: 30px;">
+            <div class="section-header">
+              <NText class="section-title">
+                👥 正在使用本站的主播们
+                <NTooltip>
+                  <template #trigger>
+                    <NIcon :component="Info24Filled" :color="textColor" size="16" style="margin-left: 8px;" />
+                  </template>
+                  随机展示不分先后, 仅粉丝数大于500的主播
+                </NTooltip>
+              </NText>
+              <div class="section-subtitle">
+                <NText :style="{ color: textColorSecondary, fontSize: '0.9rem' }">
+                  感谢信任与支持
+                </NText>
+              </div>
+            </div>
           </NFlex>
 
-          <NFlex
-            v-if="indexData"
-            vertical
-            style="max-width: 90vw;"
-          >
-            <NFlex
-              align="center"
-              justify="center"
-              :size="32"
-              :wrap="true"
-              style="gap: 10px;"
-            >
-              <NFlex
-                v-for="streamer in indexData?.streamers"
-                :key="streamer.name"
-                style="display: flex;"
-                align="center"
-                justify="center"
-              >
-                <div>
-                  <img
-                    :src="`${streamer.avatar}@64w`"
-                    referrerpolicy="no-referrer"
-                    height="32"
-                    style="border-radius: 50%;"
-                  >
+          <div v-if="indexData" class="streamers-section">
+            <!-- 主播卡片网格 -->
+            <div class="streamers-grid-modern">
+              <div v-for="streamer in indexData?.streamers" :key="streamer.name" class="streamer-card-modern"
+                @click="$router.push(`/@${streamer.name}`)">
+                <div class="streamer-avatar-wrapper">
+                  <img :src="`${streamer.avatar}@96w`" referrerpolicy="no-referrer" alt="主播头像">
                 </div>
-                <NButton
-                  tag="a"
-                  :href="`@${streamer.name}`"
-                  text
-                >
+                <NTooltip :disabled="(streamer.uname || streamer.name).length <= 7">
+                  <template #trigger>
+                    <div class="streamer-name">
+                      {{ streamer.uname || streamer.name }}
+                    </div>
+                  </template>
                   {{ streamer.uname || streamer.name }}
-                </NButton>
+                </NTooltip>
+              </div>
+            </div>
+
+            <!-- 底部信息 -->
+            <div class="streamers-footer">
+              <NFlex vertical align="center" :size="16" style="margin-top: 32px;">
+                <div class="more-indicator">
+                  <div class="dots-container">
+                    <div class="dot"></div>
+                    <div class="dot"></div>
+                    <div class="dot"></div>
+                  </div>
+                  <NText :style="{ color: textColor, fontSize: '0.9rem', fontWeight: 500 }">
+                    还有更多主播正在使用
+                  </NText>
+                </div>
+
+                <NCard :style="{
+                  background: 'rgba(255, 255, 255, 0.03)',
+                  border: borderSystem.light,
+                  borderRadius: borderRadius.medium,
+                  padding: '12px 20px',
+                  maxWidth: '400px'
+                }" size="small">
+                  <NFlex align="center" justify="center" :size="8">
+                    <NIcon :component="Info24Filled" size="14" :color="textColorSecondary" />
+                    <NText :style="{ color: textColorSecondary, fontSize: '0.8rem', textAlign: 'center' }">
+                      不想被展示？前往
+                      <NButton text size="tiny" :style="{
+                        color: textColor,
+                        fontSize: '0.8rem',
+                        padding: '0 4px',
+                        textDecoration: 'underline'
+                      }" @click="$router.push({ name: 'manage-index', query: { tab: 'setting', setting: 'index' } })">
+                        设置页面
+                      </NButton>
+                      关闭展示
+                    </NText>
+                  </NFlex>
+                </NCard>
               </NFlex>
-            </NFlex>
-            <NText style="text-align: center; margin-top: 10px; color: white;">
-              还有更多...
-            </NText>
-            <NText
-              depth="3"
-              style="text-align: center; margin-top: 5px;"
-            >
-              如果你不想要被展示在主页, 请前往
-              <NButton
-                text
-                @click="$router.push({ name: 'manage-index', query: { tab: 'setting', setting: 'index' } })"
-              >
-                这里
-              </NButton>
-              进行设置
-            </NText>
-          </NFlex>
+            </div>
+          </div>
         </NFlex>
       </NCard>
     </NSpace>
-    <NSpace
-      style="position: absolute; bottom: 0; margin: 0 auto; width: 100vw"
-      justify="center"
-    >
-      <span style="color: white">
+    <NFlex justify="center" class="footer">
+      <span :style="{ color: textColor }">
         BY
-        <NButton
-          tag="a"
-          href="https://space.bilibili.com/10021741"
-          target="_blank"
-          text
-          style="color: rgb(215, 245, 230)"
-        >
+        <NButton tag="a" href="https://space.bilibili.com/10021741" target="_blank" text :style="{
+          color: isDarkMode ? 'rgb(200, 235, 220)' : 'rgb(215, 245, 230)',
+          borderRadius: borderRadius.small
+        }">
           Megghy
         </NButton>
       </span>
-    </NSpace>
+    </NFlex>
   </div>
 </template>
 
 <style lang="stylus" scoped>
 .index-background
     position: relative;
-    /* 保证全屏高度，避免底部留白 */
     min-height: 100vh;
-    background: #8360c3;  /* fallback for old browsers */
-    background: -webkit-linear-gradient(to right, #2ebf91, #8360c3);  /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to right, #2ebf91, #8360c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-    overflow: auto
-    padding-bottom: 50px;
+    background: #8360c3;
+    background: -webkit-linear-gradient(135deg, #2ebf91 0%, #8360c3 100%);
+    background: linear-gradient(135deg, #2ebf91 0%, #8360c3 100%);
+    background-attachment: fixed;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-bottom: 60px;
+    
+    &::before
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+                    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
+                    radial-gradient(circle at 40% 40%, rgba(120, 219, 226, 0.1) 0%, transparent 50%);
+        pointer-events: none;
+
+.main-container
+    padding-top: 30px;
+    padding-bottom: 30px;
+
+.hero-card
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    
+    &::before
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+        transition: left 0.6s;
+    
+    &:hover
+        transform: translateY(-4px);
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+        
+        &::before
+            left: 100%;
+
+.hero-icon
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    &:hover
+        transform: scale(1.05);
+
+.section-title
+    font-size: 1.2rem;
+    font-weight: 500;
+    background-image: linear-gradient(to right, #e5e5e5, #c2ebeb);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+.feature-card
+    transition: all 0.2s ease;
+    
+    &:hover
+        transform: translateY(-2px);
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+
+.entry-card
+    transition: all 0.2s ease;
+    
+    &:hover
+        transform: translateY(-2px);
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+
+.streamer-avatar
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    &:hover
+        transform: scale(1.1);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+
+.streamer-button
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    &:hover
+        transform: translateY(-1px);
+
+.footer
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    width: 100%;
+    padding: 16px 0;
+
+/* 统一的圆角设计系统 */
+:deep(.n-card)
+    border-radius: 16px;
+
+:deep(.n-button)
+    border-radius: 12px;
+    transition: all 0.2s ease;
+    
+    &:hover
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+:deep(.n-button--small)
+    border-radius: 8px;
+
+:deep(.n-button--large)
+    border-radius: 16px;
+
+/* 响应式设计 */
+@media (max-width: 700px)
+    .main-container
+        padding-top: 20px;
+        padding-bottom: 20px;
+    
+    .section-title
+        font-size: 1.1rem;
+    
+    .feature-card:hover
+        transform: translateY(-1px);
+    
+    .entry-card:hover
+        transform: translateY(-1px);
+
+/* 增强的动画效果 */
+@keyframes float
+    0%, 100%
+        transform: translateY(0px);
+    50%
+        transform: translateY(-10px);
+
+@keyframes pulse
+    0%, 100%
+        opacity: 1;
+    50%
+        opacity: 0.8;
+
+@keyframes shimmer
+    0%
+        background-position: -200px 0;
+    100%
+        background-position: calc(200px + 100%) 0;
+
+.hero-icon
+    animation: float 6s ease-in-out infinite;
+
+.pulse-animation
+    animation: pulse 2s ease-in-out infinite;
+
+.shimmer-effect
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    background-size: 200px 100%;
+    animation: shimmer 2s infinite;
+
+/* 新增样式 */
+.section-header
+    text-align: center;
+    
+.section-subtitle
+    margin-top: 8px;
+
+.icon-wrapper
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.1);
+
+
+
+.stats-item
+    padding: 8px 16px;
+
+/* 现代化主播展示区域 */
+.streamers-section
+    width: 100%;
+    margin: 0 auto;
+
+.streamers-grid-modern
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 0 4px;
+
+.streamer-card-modern
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 8px;
+    background: rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    min-width: 85px;
+    max-width: 95px;
+    backdrop-filter: blur(10px);
+    
+    &:hover
+        transform: translateY(-3px);
+        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
+        border-color: rgba(255, 255, 255, 0.25);
+        background: rgba(255, 255, 255, 0.15);
+        
+        .streamer-avatar-wrapper img
+            transform: scale(1.08);
+
+.streamer-avatar-wrapper
+    position: relative;
+    width: 50px;
+    height: 50px;
+    flex-shrink: 0;
+    
+    img
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        object-fit: cover;
+        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        display: block;
+
+.streamer-name
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.95);
+    text-align: center;
+    line-height: 1.3;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 0 4px;
+
+.streamers-footer
+    margin-top: 24px;
+
+.more-indicator
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+
+.dots-container
+    display: flex;
+    gap: 5px;
+    align-items: center;
+
+.dot
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.5);
+    animation: pulse-dot 1.8s ease-in-out infinite;
+    
+    &:nth-child(2)
+        animation-delay: 0.3s;
+    
+    &:nth-child(3)
+        animation-delay: 0.6s;
+
+@keyframes pulse-dot
+    0%, 100%
+        opacity: 0.5;
+        transform: scale(1);
+    50%
+        opacity: 1;
+        transform: scale(1.3);
+
+/* 响应式优化 */
+@media (max-width: 768px)
+    .streamers-grid-modern
+        gap: 8px;
+        padding: 0 4px;
+    
+    .streamer-card-modern
+        min-width: 80px;
+        max-width: 90px;
+        padding: 8px 6px;
+        
+        &:hover
+            transform: translateY(-2px);
+
+@media (max-width: 480px)
+    .streamers-grid-modern
+        gap: 6px;
+        padding: 0 4px;
+    
+    .streamer-card-modern
+        min-width: 75px;
+        max-width: 85px;
+        padding: 8px 6px;
+    
+    .streamer-avatar-wrapper
+        width: 45px;
+        height: 45px;
+    
+    .streamer-name
+        font-size: 0.8rem;
+
+/* 优化的阴影系统 */
+.card-shadow-light
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
+
+.card-shadow-medium
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.15);
+
+.card-shadow-heavy
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.2);
 </style>
diff --git a/src/views/ManageLayout.vue b/src/views/ManageLayout.vue
index 7b6f156..b5bc31c 100644
--- a/src/views/ManageLayout.vue
+++ b/src/views/ManageLayout.vue
@@ -764,7 +764,7 @@ onMounted(() => {
       <NLayout>
         <!-- 主内容区域 -->
         <NScrollbar :style="`height: calc(100vh - var(--vtsuru-header-height) - ${aplayerHeight}px)`">
-          <NLayoutContent content-style="margin: var(--vtsuru-content-padding); margin-right: calc(var(--vtsuru-content-padding) + 4px)">
+          <NLayoutContent content-style="margin: var(--vtsuru-content-padding); margin-right: calc(var(--vtsuru-content-padding) + 4px); padding-bottom: 32px;">
             <NElement>
               <!-- 已验证邮箱的用户显示内容 -->
               <RouterView
diff --git a/src/views/manage/AnalyzeView.vue b/src/views/manage/AnalyzeView.vue
index 647f376..98be65d 100644
--- a/src/views/manage/AnalyzeView.vue
+++ b/src/views/manage/AnalyzeView.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { TrendingDown, TrendingUp } from '@vicons/ionicons5'
+import { RefreshOutline, TrendingDown, TrendingUp } from '@vicons/ionicons5'
 import { BarChart, LineChart } from 'echarts/charts'
 import {
   DataZoomComponent,
@@ -12,7 +12,7 @@ import {
 } from 'echarts/components'
 import * as echarts from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
-import { NCard, NDivider, NGrid, NGridItem, NIcon, NSpace, NSpin, NStatistic, NTabPane, NTabs, NTag, useMessage, useThemeVars } from 'naive-ui'
+import { NButton, NCard, NDivider, NEmpty, NGrid, NGridItem, NIcon, NSpace, NSpin, NStatistic, NTabPane, NTabs, NTag, NTime, NTooltip, useMessage, useThemeVars } from 'naive-ui'
 
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { QueryGetAPI } from '@/api/query'
@@ -83,14 +83,17 @@ interface AnalyzeData {
 
 // 状态管理
 const loading = ref(true)
+const refreshing = ref(false)
 const message = useMessage()
 const analyzeData = ref<AnalyzeData>()
 const summaryData = computed(() => analyzeData.value?.summary)
 const activeChart = ref('income')
 const themeVars = useThemeVars()
+const lastUpdateTime = ref<number>(0)
+const hasData = computed(() => analyzeData.value && Object.keys(analyzeData.value.chartData || {}).length > 0)
 
 // 处理标签页变化
-function onTabChange(value: string) {
+function onTabChange(_value: string) {
   nextTick(() => {
     handleResize()
   })
@@ -212,7 +215,7 @@ function initCharts() {
     grid: {
       left: '3%',
       right: '4%',
-      bottom: '3%',
+      bottom: '15%',
       top: '60px',
       containLabel: true,
     },
@@ -418,14 +421,22 @@ function updateChartTheme() {
 }
 
 // 获取分析数据
-async function fetchAnalyzeData() {
+async function fetchAnalyzeData(isRefresh = false) {
   try {
-    loading.value = true
+    if (isRefresh) {
+      refreshing.value = true
+    } else {
+      loading.value = true
+    }
     const data = await QueryGetAPI<AnalyzeData>(`${ANALYZE_API_URL}all`)
 
     if (data.code === 200) {
       analyzeData.value = data.data
+      lastUpdateTime.value = Date.now()
       nextTick(() => initCharts())
+      if (isRefresh) {
+        message.success('数据已刷新')
+      }
     } else {
       message.error(`获取数据失败: ${data.message}`)
     }
@@ -434,9 +445,15 @@ async function fetchAnalyzeData() {
     console.error('获取数据出错:', error)
   } finally {
     loading.value = false
+    refreshing.value = false
   }
 }
 
+// 刷新数据
+function handleRefresh() {
+  fetchAnalyzeData(true)
+}
+
 // 窗口大小变化时重绘图表
 function handleResize() {
   incomeChart?.resize()
@@ -465,246 +482,395 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="analyze-container">
+    <!-- 顶部操作栏 -->
     <NSpace
       align="center"
+      justify="space-between"
+      class="header-actions"
     >
-      <EventFetcherAlert />
-      <EventFetcherStatusCard />
+      <NSpace align="center">
+        <EventFetcherAlert />
+        <EventFetcherStatusCard />
+      </NSpace>
+      <NSpace align="center">
+        <NTooltip v-if="lastUpdateTime > 0">
+          <template #trigger>
+            <NTag size="small" :bordered="false">
+              <NIcon :component="TrendingUp" style="margin-right: 4px;" />
+              <NTime :time="lastUpdateTime" type="relative" />更新
+            </NTag>
+          </template>
+          <NTime :time="lastUpdateTime" />
+        </NTooltip>
+        <NButton
+          :loading="refreshing"
+          :disabled="loading"
+          @click="handleRefresh"
+        >
+          <template #icon>
+            <NIcon :component="RefreshOutline" />
+          </template>
+          刷新数据
+        </NButton>
+      </NSpace>
     </NSpace>
     <NDivider />
+    
     <NSpin :show="loading">
-      <!-- 数据概览卡片 -->
-      <div class="summary-cards">
-        <NGrid
-          cols="1 800:2 1200:3"
-          :x-gap="12"
-          :y-gap="12"
-        >
-          <NGridItem>
-            <NCard
-              title="近7天统计"
-              size="small"
-              class="summary-card"
-            >
-              <div class="stat-grid">
-                <NStatistic
-                  label="总收入"
-                  :value="formatCurrency(summaryData?.last7Days?.totalIncome || 0)"
-                />
-                <NStatistic
-                  label="总互动数"
-                  :value="summaryData?.last7Days?.totalInteractions || 0"
-                />
-                <NStatistic
-                  label="弹幕数"
-                  :value="summaryData?.last7Days?.totalDanmakuCount || 0"
-                />
-                <NStatistic
-                  label="直播时长(小时)"
-                  :value="((summaryData?.last7Days?.totalLiveMinutes || 0) / 60).toFixed(1)"
-                />
-                <NStatistic
-                  label="互动人数"
-                  :value="summaryData?.last7Days?.interactionUsers || 0"
-                >
-                  <template #suffix>
-                    <NTag
-                      :type="getTrendType(summaryData?.last7Days?.interactionUsersTrend || 0)"
-                      size="small"
-                    >
-                      {{ formatTrend(summaryData?.last7Days?.interactionUsersTrend || 0) }}
-                    </NTag>
-                  </template>
-                </NStatistic>
-                <NStatistic
-                  label="付费人数"
-                  :value="summaryData?.last7Days?.payingUsers || 0"
-                >
-                  <template #suffix>
-                    <NTag
-                      :type="getTrendType(summaryData?.last7Days?.payingUsersTrend || 0)"
-                      size="small"
-                    >
-                      {{ formatTrend(summaryData?.last7Days?.payingUsersTrend || 0) }}
-                    </NTag>
-                  </template>
-                </NStatistic>
-                <NStatistic
-                  label="日均收入"
-                  :value="formatCurrency(summaryData?.last7Days?.dailyAvgIncome || 0)"
-                />
-                <NStatistic
-                  label="日均弹幕"
-                  :value="summaryData?.last7Days?.dailyAvgDanmaku || 0"
-                />
-                <NStatistic
-                  label="活跃直播天数"
-                  :value="summaryData?.last7Days?.activeLiveDays || 0"
-                />
-              </div>
-            </NCard>
-          </NGridItem>
-          <NGridItem>
-            <NCard
-              title="近30天统计"
-              size="small"
-              class="summary-card"
-            >
-              <div class="stat-grid">
-                <NStatistic
-                  label="总收入"
-                  :value="formatCurrency(summaryData?.last30Days?.totalIncome || 0)"
-                />
-                <NStatistic
-                  label="总互动数"
-                  :value="summaryData?.last30Days?.totalInteractions || 0"
-                />
-                <NStatistic
-                  label="弹幕数"
-                  :value="summaryData?.last30Days?.totalDanmakuCount || 0"
-                />
-                <NStatistic
-                  label="直播时长(小时)"
-                  :value="((summaryData?.last30Days?.totalLiveMinutes || 0) / 60).toFixed(1)"
-                />
-                <NStatistic
-                  label="互动人数"
-                  :value="summaryData?.last30Days?.interactionUsers || 0"
-                >
-                  <template #suffix>
-                    <NTag
-                      :type="getTrendType(summaryData?.last30Days?.interactionTrend || 0)"
-                      size="small"
-                    >
-                      {{ formatTrend(summaryData?.last30Days?.interactionTrend || 0) }}
-                    </NTag>
-                  </template>
-                </NStatistic>
-                <NStatistic
-                  label="付费人数"
-                  :value="summaryData?.last30Days?.payingUsers || 0"
-                >
-                  <template #suffix>
-                    <NTag
-                      :type="getTrendType(summaryData?.last30Days?.incomeTrend || 0)"
-                      size="small"
-                    >
-                      {{ formatTrend(summaryData?.last30Days?.incomeTrend || 0) }}
-                    </NTag>
-                  </template>
-                </NStatistic>
-                <NStatistic
-                  label="日均收入"
-                  :value="formatCurrency(summaryData?.last30Days?.dailyAvgIncome || 0)"
-                />
-                <NStatistic
-                  label="日均弹幕"
-                  :value="summaryData?.last30Days?.dailyAvgDanmaku || 0"
-                />
-                <NStatistic
-                  label="活跃直播天数"
-                  :value="summaryData?.last30Days?.activeLiveDays || 0"
-                />
-              </div>
-            </NCard>
-          </NGridItem>
-          <NGridItem>
-            <NCard
-              title="关键指标"
-              size="small"
-              class="summary-card"
-            >
-              <div class="stat-grid">
-                <NStatistic
-                  label="月收入增长"
-                  :value="formatTrend(summaryData?.last30Days?.incomeTrend || 0)"
-                >
-                  <template #prefix>
-                    <NIcon :color="(summaryData?.last30Days?.incomeTrend || 0) >= 0 ? '#18A058' : '#D03050'">
-                      <TrendingUp v-if="(summaryData?.last30Days?.incomeTrend || 0) >= 0" />
-                      <TrendingDown v-else />
-                    </NIcon>
-                  </template>
-                </NStatistic>
-                <NStatistic
-                  label="月互动增长"
-                  :value="formatTrend(summaryData?.last30Days?.interactionTrend || 0)"
-                >
-                  <template #prefix>
-                    <NIcon
-                      :component="(summaryData?.last30Days?.interactionTrend || 0) >= 0 ? TrendingUp : TrendingDown"
-                      :color="(summaryData?.last30Days?.interactionTrend || 0) >= 0 ? '#18A058' : '#D03050'"
-                    >
-                      <TrendingUp v-if="(summaryData?.last30Days?.interactionTrend || 0) >= 0" />
-                      <TrendingDown v-else />
-                    </NIcon>
-                  </template>
-                </NStatistic>
-                <NStatistic
-                  label="单次直播平均时长"
-                  :value="`${((summaryData?.last30Days?.totalLiveMinutes || 0) / (summaryData?.last30Days?.activeLiveDays || 1) / 60).toFixed(1)}小时`"
-                />
-                <NStatistic
-                  label="互动转化率"
-                  :value="`${((summaryData?.last30Days?.payingUsers || 0) / (summaryData?.last30Days?.interactionUsers || 1) * 100).toFixed(1)}%`"
-                />
-                <NStatistic
-                  label="每付费用户平均打米"
-                  :value="formatCurrency((summaryData?.last30Days?.totalIncome || 0) / (summaryData?.last30Days?.payingUsers || 1))"
-                />
-              </div>
-            </NCard>
-          </NGridItem>
-        </NGrid>
-      </div>
-      <NDivider />
-      <!-- 图表选择器 -->
-      <div class="chart-selector">
-        <NTabs
-          v-model:value="activeChart"
-          type="line"
-          animated
-          @update:value="onTabChange"
-        >
-          <NTabPane
-            name="income"
-            tab="收入分析"
-            display-directive="show"
+      <!-- 空状态 -->
+      <NEmpty
+        v-if="!loading && !hasData"
+        description="暂无数据"
+        size="large"
+        style="margin: 60px 0"
+      >
+        <template #extra>
+          <NButton @click="() => fetchAnalyzeData()">
+            重新加载
+          </NButton>
+        </template>
+      </NEmpty>
+
+      <!-- 数据展示 -->
+      <template v-else>
+        <!-- 数据概览卡片 -->
+        <div class="summary-cards">
+          <NGrid
+            cols="1 800:2 1200:3"
+            :x-gap="16"
+            :y-gap="16"
           >
-            <div
-              ref="incomeChartRef"
-              class="chart"
-            />
-          </NTabPane>
-          <NTabPane
-            name="interaction"
-            tab="互动分析"
-            display-directive="show"
+            <NGridItem>
+              <NCard
+                title="近7天统计"
+                size="small"
+                class="summary-card"
+                hoverable
+              >
+                <template #header-extra>
+                  <NTag :bordered="false" size="small" type="info">
+                    最近一周
+                  </NTag>
+                </template>
+                <div class="stat-grid">
+                  <NStatistic
+                    label="总收入"
+                    tabular-nums
+                  >
+                    <template #default>
+                      <span class="stat-value-primary">
+                        {{ formatCurrency(summaryData?.last7Days?.totalIncome || 0) }}
+                      </span>
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="总互动数"
+                    :value="summaryData?.last7Days?.totalInteractions || 0"
+                    tabular-nums
+                  />
+                  <NStatistic
+                    label="弹幕数"
+                    :value="summaryData?.last7Days?.totalDanmakuCount || 0"
+                    tabular-nums
+                  />
+                  <NStatistic
+                    label="直播时长"
+                    tabular-nums
+                  >
+                    <template #default>
+                      {{ ((summaryData?.last7Days?.totalLiveMinutes || 0) / 60).toFixed(1) }} 小时
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="互动人数"
+                    :value="summaryData?.last7Days?.interactionUsers || 0"
+                    tabular-nums
+                  >
+                    <template #suffix>
+                      <NTag
+                        :type="getTrendType(summaryData?.last7Days?.interactionUsersTrend || 0)"
+                        size="small"
+                        :bordered="false"
+                      >
+                        <NIcon v-if="(summaryData?.last7Days?.interactionUsersTrend || 0) > 0" :component="TrendingUp" style="vertical-align: -0.15em; margin-right: 2px;" />
+                        <NIcon v-else-if="(summaryData?.last7Days?.interactionUsersTrend || 0) < 0" :component="TrendingDown" style="vertical-align: -0.15em; margin-right: 2px;" />
+                        {{ formatTrend(summaryData?.last7Days?.interactionUsersTrend || 0) }}
+                      </NTag>
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="付费人数"
+                    :value="summaryData?.last7Days?.payingUsers || 0"
+                    tabular-nums
+                  >
+                    <template #suffix>
+                      <NTag
+                        :type="getTrendType(summaryData?.last7Days?.payingUsersTrend || 0)"
+                        size="small"
+                        :bordered="false"
+                      >
+                        <NIcon v-if="(summaryData?.last7Days?.payingUsersTrend || 0) > 0" :component="TrendingUp" style="vertical-align: -0.15em; margin-right: 2px;" />
+                        <NIcon v-else-if="(summaryData?.last7Days?.payingUsersTrend || 0) < 0" :component="TrendingDown" style="vertical-align: -0.15em; margin-right: 2px;" />
+                        {{ formatTrend(summaryData?.last7Days?.payingUsersTrend || 0) }}
+                      </NTag>
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="日均收入"
+                    tabular-nums
+                  >
+                    <template #default>
+                      {{ formatCurrency(summaryData?.last7Days?.dailyAvgIncome || 0) }}
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="日均弹幕"
+                    :value="(summaryData?.last7Days?.dailyAvgDanmaku || 0).toFixed(0)"
+                    tabular-nums
+                  />
+                  <NStatistic
+                    label="活跃直播天数"
+                    :value="summaryData?.last7Days?.activeLiveDays || 0"
+                    tabular-nums
+                  />
+                </div>
+              </NCard>
+            </NGridItem>
+            
+            <NGridItem>
+              <NCard
+                title="近30天统计"
+                size="small"
+                class="summary-card"
+                hoverable
+              >
+                <template #header-extra>
+                  <NTag :bordered="false" size="small" type="warning">
+                    最近一月
+                  </NTag>
+                </template>
+                <div class="stat-grid">
+                  <NStatistic
+                    label="总收入"
+                    tabular-nums
+                  >
+                    <template #default>
+                      <span class="stat-value-primary">
+                        {{ formatCurrency(summaryData?.last30Days?.totalIncome || 0) }}
+                      </span>
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="总互动数"
+                    :value="summaryData?.last30Days?.totalInteractions || 0"
+                    tabular-nums
+                  />
+                  <NStatistic
+                    label="弹幕数"
+                    :value="summaryData?.last30Days?.totalDanmakuCount || 0"
+                    tabular-nums
+                  />
+                  <NStatistic
+                    label="直播时长"
+                    tabular-nums
+                  >
+                    <template #default>
+                      {{ ((summaryData?.last30Days?.totalLiveMinutes || 0) / 60).toFixed(1) }} 小时
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="互动人数"
+                    :value="summaryData?.last30Days?.interactionUsers || 0"
+                    tabular-nums
+                  >
+                    <template #suffix>
+                      <NTag
+                        :type="getTrendType(summaryData?.last30Days?.interactionTrend || 0)"
+                        size="small"
+                        :bordered="false"
+                      >
+                        <NIcon v-if="(summaryData?.last30Days?.interactionTrend || 0) > 0" :component="TrendingUp" style="vertical-align: -0.15em; margin-right: 2px;" />
+                        <NIcon v-else-if="(summaryData?.last30Days?.interactionTrend || 0) < 0" :component="TrendingDown" style="vertical-align: -0.15em; margin-right: 2px;" />
+                        {{ formatTrend(summaryData?.last30Days?.interactionTrend || 0) }}
+                      </NTag>
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="付费人数"
+                    :value="summaryData?.last30Days?.payingUsers || 0"
+                    tabular-nums
+                  >
+                    <template #suffix>
+                      <NTag
+                        :type="getTrendType(summaryData?.last30Days?.incomeTrend || 0)"
+                        size="small"
+                        :bordered="false"
+                      >
+                        <NIcon v-if="(summaryData?.last30Days?.incomeTrend || 0) > 0" :component="TrendingUp" style="vertical-align: -0.15em; margin-right: 2px;" />
+                        <NIcon v-else-if="(summaryData?.last30Days?.incomeTrend || 0) < 0" :component="TrendingDown" style="vertical-align: -0.15em; margin-right: 2px;" />
+                        {{ formatTrend(summaryData?.last30Days?.incomeTrend || 0) }}
+                      </NTag>
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="日均收入"
+                    tabular-nums
+                  >
+                    <template #default>
+                      {{ formatCurrency(summaryData?.last30Days?.dailyAvgIncome || 0) }}
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="日均弹幕"
+                    :value="(summaryData?.last30Days?.dailyAvgDanmaku || 0).toFixed(0)"
+                    tabular-nums
+                  />
+                  <NStatistic
+                    label="活跃直播天数"
+                    :value="summaryData?.last30Days?.activeLiveDays || 0"
+                    tabular-nums
+                  />
+                </div>
+              </NCard>
+            </NGridItem>
+            
+            <NGridItem>
+              <NCard
+                title="关键指标"
+                size="small"
+                class="summary-card summary-card-highlight"
+                hoverable
+              >
+                <template #header-extra>
+                  <NTag :bordered="false" size="small" type="success">
+                    核心数据
+                  </NTag>
+                </template>
+                <div class="stat-grid">
+                  <NStatistic
+                    label="月收入增长"
+                    tabular-nums
+                  >
+                    <template #default>
+                      <span class="trend-value" :class="(summaryData?.last30Days?.incomeTrend || 0) >= 0 ? 'trend-up' : 'trend-down'">
+                        {{ formatTrend(summaryData?.last30Days?.incomeTrend || 0) }}
+                      </span>
+                    </template>
+                    <template #prefix>
+                      <NIcon :color="(summaryData?.last30Days?.incomeTrend || 0) >= 0 ? '#18A058' : '#D03050'">
+                        <TrendingUp v-if="(summaryData?.last30Days?.incomeTrend || 0) >= 0" />
+                        <TrendingDown v-else />
+                      </NIcon>
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="月互动增长"
+                    tabular-nums
+                  >
+                    <template #default>
+                      <span class="trend-value" :class="(summaryData?.last30Days?.interactionTrend || 0) >= 0 ? 'trend-up' : 'trend-down'">
+                        {{ formatTrend(summaryData?.last30Days?.interactionTrend || 0) }}
+                      </span>
+                    </template>
+                    <template #prefix>
+                      <NIcon
+                        :component="(summaryData?.last30Days?.interactionTrend || 0) >= 0 ? TrendingUp : TrendingDown"
+                        :color="(summaryData?.last30Days?.interactionTrend || 0) >= 0 ? '#18A058' : '#D03050'"
+                      />
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="单次直播平均时长"
+                    tabular-nums
+                  >
+                    <template #default>
+                      {{ ((summaryData?.last30Days?.totalLiveMinutes || 0) / (summaryData?.last30Days?.activeLiveDays || 1) / 60).toFixed(1) }} 小时
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="互动转化率"
+                    tabular-nums
+                  >
+                    <template #default>
+                      {{ ((summaryData?.last30Days?.payingUsers || 0) / (summaryData?.last30Days?.interactionUsers || 1) * 100).toFixed(1) }}%
+                    </template>
+                  </NStatistic>
+                  <NStatistic
+                    label="每付费用户平均收入"
+                    tabular-nums
+                  >
+                    <template #default>
+                      {{ formatCurrency((summaryData?.last30Days?.totalIncome || 0) / (summaryData?.last30Days?.payingUsers || 1)) }}
+                    </template>
+                  </NStatistic>
+                </div>
+              </NCard>
+            </NGridItem>
+          </NGrid>
+        </div>
+        
+        <NDivider />
+        
+        <!-- 图表选择器 -->
+        <div class="chart-selector">
+          <NTabs
+            v-model:value="activeChart"
+            type="line"
+            animated
+            @update:value="onTabChange"
           >
-            <div
-              ref="interactionChartRef"
-              class="chart"
-            />
-          </NTabPane>
-          <NTabPane
-            name="users"
-            tab="用户分析"
-            display-directive="show"
-          >
-            <div
-              ref="usersChartRef"
-              class="chart"
-            />
-          </NTabPane>
-        </NTabs>
-      </div>
-      <NDivider />
+            <NTabPane
+              name="income"
+              tab="收入分析"
+              display-directive="show"
+            >
+              <div
+                ref="incomeChartRef"
+                class="chart"
+              />
+            </NTabPane>
+            <NTabPane
+              name="interaction"
+              tab="互动分析"
+              display-directive="show"
+            >
+              <div
+                ref="interactionChartRef"
+                class="chart"
+              />
+            </NTabPane>
+            <NTabPane
+              name="users"
+              tab="用户分析"
+              display-directive="show"
+            >
+              <div
+                ref="usersChartRef"
+                class="chart"
+              />
+            </NTabPane>
+          </NTabs>
+        </div>
+      </template>
     </NSpin>
   </div>
 </template>
 
 <style scoped>
+.analyze-container {
+  width: 100%;
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 0 4px;
+}
+
+.header-actions {
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
 .analyze-card {
   margin-bottom: 20px;
 }
@@ -715,33 +881,154 @@ onUnmounted(() => {
 
 .summary-card {
   height: 100%;
-  transition: all 0.3s;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 8px;
 }
 
 .summary-card:hover {
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  transform: translateY(-4px);
+}
+
+.summary-card-highlight {
+  background: linear-gradient(135deg, rgba(24, 160, 88, 0.03) 0%, rgba(24, 160, 88, 0.01) 100%);
 }
 
 .stat-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
+  gap: 16px;
+}
+
+.stat-value-primary {
+  font-size: 1.2em;
+  font-weight: 600;
+  color: var(--n-text-color);
+}
+
+.trend-value {
+  font-weight: 600;
+  font-size: 1.1em;
+  transition: all 0.3s;
+}
+
+.trend-up {
+  color: #18A058;
+}
+
+.trend-down {
+  color: #D03050;
 }
 
 .chart-selector {
   margin-top: 20px;
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .chart {
-  height: 450px;
+  height: 500px;
   width: 100%;
   margin-top: 10px;
+  transition: height 0.3s ease;
+}
+
+/* 响应式设计 */
+@media (max-width: 1400px) {
+  .chart {
+    height: 450px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .chart {
+    height: 400px;
+  }
 }
 
 @media (max-width: 768px) {
+  .analyze-container {
+    padding: 0;
+  }
+
   .stat-grid {
     grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .chart {
+    height: 350px;
+  }
+
+  .header-actions {
+    flex-direction: column;
+    align-items: stretch !important;
+  }
+
+  .header-actions :deep(.n-space) {
+    width: 100%;
+    justify-content: space-between;
   }
 }
+
+@media (max-width: 480px) {
+  .chart {
+    height: 300px;
+  }
+
+  .stat-value-primary {
+    font-size: 1.1em;
+  }
+
+  .trend-value {
+    font-size: 1em;
+  }
+}
+
+/* 骨架屏动画 */
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s ease-in-out infinite;
+}
+
+/* 标签优化 */
+:deep(.n-statistic-value__prefix) {
+  margin-right: 8px;
+  display: inline-flex;
+  align-items: center;
+}
+
+:deep(.n-statistic-value__suffix) {
+  margin-left: 8px;
+}
+
+/* 图表容器优化 */
+:deep(.n-tabs-nav) {
+  padding: 0 12px;
+}
+
+/* 卡片标题优化 */
+:deep(.n-card-header__main) {
+  font-weight: 600;
+  font-size: 1.05em;
+}
+
+/* Hover效果 */
+.summary-card :deep(.n-statistic) {
+  transition: transform 0.2s;
+}
+
+.summary-card:hover :deep(.n-statistic) {
+  transform: scale(1.02);
+}
 </style>
diff --git a/src/views/manage/HistoryView.vue b/src/views/manage/HistoryView.vue
index 6486bd5..7626cb5 100644
--- a/src/views/manage/HistoryView.vue
+++ b/src/views/manage/HistoryView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { DataTableColumns } from 'naive-ui'
 import { Info24Filled } from '@vicons/fluent'
 import { addDays, endOfDay, format, startOfDay } from 'date-fns'
 import { BarChart, LineChart } from 'echarts/charts'
@@ -12,8 +13,8 @@ import {
 } from 'echarts/components'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
-import { NAlert, NButton, NCard, NDatePicker, NDivider, NIcon, NSpace, NSpin, NText, NTime, NTooltip, useMessage } from 'naive-ui'
-import { computed, onMounted, ref, watch } from 'vue'
+import { NAlert, NButton, NCard, NDataTable, NDatePicker, NDivider, NEmpty, NIcon, NSpace, NSpin, NText, NTime, NTooltip, useMessage } from 'naive-ui'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import VChart from 'vue-echarts'
 import { useAccount } from '@/api/account'
 import { QueryGetAPI } from '@/api/query'
@@ -62,6 +63,25 @@ interface HistoryUpstatRecordModel {
   }
 }
 
+interface GuardMemberModel {
+  guardUid: number
+  username: string
+  guardLevel: string
+  accompanyDays: number
+  isActive: boolean
+  lastUpdateTime: string
+}
+
+interface GuardStatsModel {
+  totalCount: number
+  governorCount: number
+  admiralCount: number
+  captainCount: number
+  avgAccompanyDays: number
+  maxAccompanyDays: number
+  lastUpdateTime: string
+}
+
 const accountInfo = useAccount()
 const message = useMessage()
 
@@ -83,6 +103,66 @@ const upstatLikeOption = ref()
 
 const isLoading = ref(true)
 
+// 舰长列表相关
+const guardList = ref<GuardMemberModel[]>([])
+const guardStats = ref<GuardStatsModel | null>(null)
+const guardListLoading = ref(false)
+const guardPaginationPage = ref(1)
+const guardPaginationPageSize = ref(30)
+const guardPagination = computed(() => ({
+  page: guardPaginationPage.value,
+  pageSize: guardPaginationPageSize.value,
+  itemCount: guardList.value.length,
+  showSizePicker: true,
+  pageSizes: [10, 20, 30, 50],
+  onChange: (page: number) => {
+    guardPaginationPage.value = page
+  },
+  onUpdatePageSize: (pageSize: number) => {
+    guardPaginationPageSize.value = pageSize
+    guardPaginationPage.value = 1
+  },
+}))
+
+// 舰长列表表格列定义
+const guardColumns: DataTableColumns<GuardMemberModel> = [
+  {
+    title: 'UID',
+    key: 'guardUid',
+    width: 100,
+  },
+  {
+    title: '用户名',
+    key: 'username',
+    ellipsis: {
+      tooltip: true,
+    },
+  },
+  {
+    title: '等级',
+    key: 'guardLevel',
+    width: 80,
+    render: (row) => {
+      const colorMap: Record<string, string> = {
+        总督: '#FF6B9D',
+        提督: '#C59AFF',
+        舰长: '#00D1FF',
+      }
+      return h(
+        'span',
+        { style: { color: colorMap[row.guardLevel] || '#333', fontWeight: 'bold' } },
+        row.guardLevel,
+      )
+    },
+  },
+  {
+    title: '陪伴天数',
+    key: 'accompanyDays',
+    width: 100,
+    sorter: (a, b) => a.accompanyDays - b.accompanyDays,
+  },
+]
+
 // 统计开始日期
 const statisticStartDate = new Date(2023, 10, 4)
 const statisticStartDateTime = statisticStartDate.getTime()
@@ -119,7 +199,7 @@ const chartHeight = computed(() => {
 async function getHistory() {
   try {
     const response = await QueryGetAPI<HistoryModel>(`${HISTORY_API_URL}get-all`)
-    if (response.code == 200) {
+    if (response.code === 200) {
       fansHistory.value = response.data.fan.records
       guardHistory.value = response.data.guard.records
       upstatHistory.value = response.data.upstat.records
@@ -129,7 +209,7 @@ async function getHistory() {
     } else {
       message.error(`加载失败: ${response.message}`)
     }
-  } catch (err) {
+  } catch {
     message.error('加载失败')
   }
 }
@@ -200,7 +280,7 @@ function generateTimeSeries(
       }
 
       if ((historyData[lastTimeIndex + 1]?.time ?? Number.MAX_VALUE) > dayEndTime) {
-        const changed = data.count !== lastDayCount
+        const _changed = data.count !== lastDayCount
         lastDayCount = data.count
         dayExist = true
         break
@@ -267,8 +347,8 @@ function processFansChartOptions() {
         let str = ''
         for (let i = 0; i < param.length; i++) {
           const status
-            = param[i].seriesName == '粉丝数' ? (completeTimeSeries[param[i].dataIndex].exist ? '' : '(未获取)') : ''
-          const statusHtml = status == '' ? '' : `&nbsp;<span style="color:gray">${status}</span>`
+            = param[i].seriesName === '粉丝数' ? (completeTimeSeries[param[i].dataIndex].exist ? '' : '(未获取)') : ''
+          const statusHtml = status === '' ? '' : `&nbsp;<span style="color:gray">${status}</span>`
           str += `${param[i].marker + param[i].seriesName}：${param[i].data}${statusHtml}<br>`
         }
         return name + str
@@ -467,6 +547,38 @@ function processUpstatLikeChartOptions() {
   upstatLikeOption.value = processUpstatChartOptions('likes', '点赞数')
 }
 
+/**
+ * 加载舰长列表
+ */
+async function loadGuardList() {
+  guardListLoading.value = true
+  try {
+    const [listResponse, statsResponse] = await Promise.all([
+      QueryGetAPI<GuardMemberModel[]>(
+        `${HISTORY_API_URL}guards-list?activeOnly=true`,
+      ),
+      QueryGetAPI<GuardStatsModel>(`${HISTORY_API_URL}guards/stats`),
+    ])
+
+    if (listResponse.code === 200) {
+      guardList.value = listResponse.data
+    } else {
+      message.error(`加载舰长列表失败: ${listResponse.message}`)
+    }
+
+    if (statsResponse.code === 200) {
+      guardStats.value = statsResponse.data
+    } else {
+      message.error(`加载舰长统计失败: ${statsResponse.message}`)
+    }
+  } catch (err) {
+    message.error('加载舰长数据失败')
+    console.error(err)
+  } finally {
+    guardListLoading.value = false
+  }
+}
+
 /**
  * 处理所有图表选项
  */
@@ -478,9 +590,10 @@ function processAllChartOptions() {
 }
 
 onMounted(async () => {
-  if (accountInfo.value?.isBiliVerified == true) {
+  if (accountInfo.value?.isBiliVerified === true) {
     await getHistory()
     processAllChartOptions()
+    await loadGuardList() // 加载舰长列表
     isLoading.value = false
   }
 })
@@ -496,7 +609,7 @@ watch(
 
 <template>
   <NAlert
-    v-if="accountInfo?.isBiliVerified != true"
+    v-if="accountInfo?.isBiliVerified !== true"
     type="info"
   >
     尚未进行Bilibili认证
@@ -622,6 +735,45 @@ watch(
         :style="{ height: chartHeight }"
         class="chart"
       />
+
+      <!-- 舰长列表 -->
+      <NCard
+        title="当前在舰用户"
+        size="small"
+        style="margin-top: 16px"
+      >
+        <NSpace
+          vertical
+          size="small"
+        >
+          <NSpace align="center">
+            <NButton
+              type="primary"
+              :loading="guardListLoading"
+              @click="loadGuardList"
+            >
+              刷新列表
+            </NButton>
+            <NText v-if="guardStats">
+              总计: {{ guardStats.totalCount }} (总督: {{ guardStats.governorCount }}, 提督: {{ guardStats.admiralCount }}, 舰长: {{ guardStats.captainCount }})
+            </NText>
+          </NSpace>
+
+          <NDataTable
+            v-if="guardList?.length > 0"
+            :columns="guardColumns"
+            :data="guardList"
+            :pagination="guardPagination"
+            :bordered="false"
+            size="small"
+          />
+          <NEmpty
+            v-else-if="!guardListLoading"
+            description="暂无在舰用户"
+          />
+        </NSpace>
+      </NCard>
+
       <NDivider />
       <!-- <NDivider>
         投稿播放量
diff --git a/src/views/manage/point/PointManage.vue b/src/views/manage/point/PointManage.vue
index df24699..6be67ea 100644
--- a/src/views/manage/point/PointManage.vue
+++ b/src/views/manage/point/PointManage.vue
@@ -562,6 +562,7 @@ onMounted(() => { })
         >
           <PointGoodsItem
             :goods="item"
+            :is-manage="true"
             class="point-goods-card"
           >
             <template #footer>
@@ -641,6 +642,7 @@ onMounted(() => { })
         >
           <PointGoodsItem
             :goods="item"
+            :is-manage="true"
             class="point-goods-card"
           >
             <template #footer>
diff --git a/src/views/pointViews/PointGoodsView.vue b/src/views/pointViews/PointGoodsView.vue
index 19a7df5..40954cb 100644
--- a/src/views/pointViews/PointGoodsView.vue
+++ b/src/views/pointViews/PointGoodsView.vue
@@ -101,13 +101,24 @@ const addressOptions = computed(() => {
 // 判断是否可以执行购买操作
 const canDoBuy = computed(() => {
   if (!currentGoods.value) return false
+
+  // 优先使用后端返回的购买状态
+  if (!currentGoods.value.canPurchase) return false
+
+  // 额外的前端检查
+  // 检查购买数量是否超出限制
+  const totalCount = (currentGoods.value.purchasedCount ?? 0) + buyCount.value
+  if (totalCount > (currentGoods.value.maxBuyCount ?? Number.MAX_VALUE)) return false
+
   // 检查积分是否足够
   const pointCheck = currentGoods.value.price * buyCount.value <= currentPoint.value
+
   // 如果是实物礼物且没有外部收集链接，则必须选择地址
   const addressCheck
     = currentGoods.value.type !== GoodsTypes.Physical
       || currentGoods.value.collectUrl
       || !!selectedAddress.value
+
   return pointCheck && addressCheck
 })
 
@@ -177,18 +188,26 @@ const selectedItems = computed(() => {
 // --- 方法 ---
 
 // 获取礼物兑换按钮的提示文本
-function getTooltip(goods: ResponsePointGoodModel): '开始兑换' | '当前积分不足' | '请先进行账号认证' | '库存不足' | '舰长等级不足' | '兑换时间未到' | '已达兑换上限' | '需要设置地址' {
-  if (!biliAuth.value.id) return '请先进行账号认证' // 未认证
-  if ((goods?.count ?? Number.MAX_VALUE) <= 0) return '库存不足' // 库存不足
-  if ((currentPoint.value ?? 0) < goods.price && !goods.canFreeBuy) return '当前积分不足' // 积分不足且不能免费兑换
+function getTooltip(goods: ResponsePointGoodModel): string {
+  // 优先使用后端返回的购买状态信息
+  if (!goods.canPurchase && goods.cannotPurchaseReason) {
+    return goods.cannotPurchaseReason
+  }
+
+  // 后备检查逻辑
+  if (!biliAuth.value.id) return '请先进行账号认证'
+  if ((goods?.count ?? Number.MAX_VALUE) <= 0) return '库存不足'
+  if (!goods.isAllowRebuy && goods.hasPurchased) return '该礼物不允许重复兑换'
+  if (goods.purchasedCount >= (goods.maxBuyCount ?? Number.MAX_VALUE)) return `已达兑换上限(${goods.maxBuyCount})`
+  if ((currentPoint.value ?? 0) < goods.price && !goods.canFreeBuy) return '当前积分不足'
+
   // 检查舰长等级要求
-  // 使用 guardInfo 判断用户在当前主播房间的舰长等级
   const currentGuardLevel = biliAuth.value.guardInfo?.[props.userInfo.id] ?? 0
   if (goods.allowGuardLevel > 0 && currentGuardLevel < goods.allowGuardLevel) {
     return '舰长等级不足'
   }
 
-  return '开始兑换' // 可以兑换
+  return '开始兑换'
 }
 
 // 重置购买模态框状态
@@ -219,6 +238,20 @@ async function buyGoods() {
     message.error('兑换数量必须为整数')
     return
   }
+
+  // 检查后端购买状态
+  if (!currentGoods.value?.canPurchase) {
+    message.error(currentGoods.value?.cannotPurchaseReason || '无法兑换该礼物')
+    return
+  }
+
+  // 检查是否超出兑换次数限制
+  const totalCount = (currentGoods.value.purchasedCount ?? 0) + buyCount.value
+  if (totalCount > (currentGoods.value.maxBuyCount ?? Number.MAX_VALUE)) {
+    message.error(`超出最大兑换次数限制(${currentGoods.value.maxBuyCount})`)
+    return
+  }
+
   if (
     currentGoods.value?.type === GoodsTypes.Physical // 是实物
     && !currentGoods.value.collectUrl // 没有外部收集链接
@@ -559,28 +592,59 @@ onMounted(async () => {
             :goods="item"
             content-style="max-width: 300px; min-width: 250px; height: 380px;"
             class="goods-item"
-            :class="{ 'pinned-item': item.isPinned }"
+            :class="{
+              'pinned-item': item.isPinned,
+              'purchased-item': item.hasPurchased,
+              'cannot-purchase-item': !item.canPurchase,
+            }"
           >
             <template #footer>
               <NFlex
-                justify="space-between"
-                align="center"
-                class="goods-footer"
+                vertical
+                :size="8"
               >
-                <NTooltip placement="bottom">
-                  <template #trigger>
-                    <NButton
-                      :disabled="getTooltip(item) !== '开始兑换'"
-                      size="small"
-                      type="primary"
-                      class="exchange-btn"
-                      @click="onBuyClick(item)"
-                    >
-                      {{ item.isPinned ? '🔥 兑换' : '兑换' }}
-                    </NButton>
-                  </template>
-                  {{ getTooltip(item) }}
-                </NTooltip>
+                <NFlex
+                  v-if="item.hasPurchased || !item.canPurchase"
+                  :size="4"
+                  wrap
+                >
+                  <NTag
+                    v-if="item.hasPurchased"
+                    :type="item.isAllowRebuy ? 'info' : 'warning'"
+                    size="small"
+                    :bordered="false"
+                  >
+                    {{ item.isAllowRebuy ? `已兑换 ${item.purchasedCount} 次` : '已兑换' }}
+                  </NTag>
+                  <NTag
+                    v-if="!item.canPurchase && item.cannotPurchaseReason"
+                    type="error"
+                    size="small"
+                    :bordered="false"
+                  >
+                    {{ item.cannotPurchaseReason }}
+                  </NTag>
+                </NFlex>
+                <NFlex
+                  justify="space-between"
+                  align="center"
+                  class="goods-footer"
+                >
+                  <NTooltip placement="bottom">
+                    <template #trigger>
+                      <NButton
+                        :disabled="getTooltip(item) !== '开始兑换'"
+                        size="small"
+                        type="primary"
+                        class="exchange-btn"
+                        @click="onBuyClick(item)"
+                      >
+                        {{ item.isPinned ? '🔥 兑换' : '兑换' }}
+                      </NButton>
+                    </template>
+                    {{ getTooltip(item) }}
+                  </NTooltip>
+                </NFlex>
               </NFlex>
             </template>
           </PointGoodsItem>
@@ -620,6 +684,23 @@ onMounted(async () => {
         content-style="height: auto;"
       />
 
+      <!-- 购买历史提示 -->
+      <NAlert
+        v-if="currentGoods.hasPurchased"
+        :type="currentGoods.isAllowRebuy ? 'info' : 'warning'"
+        style="margin-top: 12px;"
+      >
+        <template #header>
+          {{ currentGoods.isAllowRebuy ? '购买记录' : '重要提示' }}
+        </template>
+        你已兑换过此礼物 <strong>{{ currentGoods.purchasedCount }}</strong> 次
+        <span v-if="!currentGoods.isAllowRebuy">，该礼物不允许重复兑换</span>
+        <span v-else-if="currentGoods.maxBuyCount">
+          ，最多可兑换 <strong>{{ currentGoods.maxBuyCount }}</strong> 次
+          (剩余 <strong>{{ currentGoods.maxBuyCount - currentGoods.purchasedCount }}</strong> 次)
+        </span>
+      </NAlert>
+
       <!-- 兑换选项 (仅对实物或需要数量选择的礼物显示) -->
       <template v-if="currentGoods.type === GoodsTypes.Physical || (currentGoods.maxBuyCount ?? 1) > 1 || true">
         <NDivider style="margin-top: 12px; margin-bottom: 12px;">
@@ -636,7 +717,10 @@ onMounted(async () => {
             <NInputNumber
               v-model:value="buyCount"
               :min="1"
-              :max="currentGoods.maxBuyCount ?? 100000"
+              :max="Math.min(
+                currentGoods.maxBuyCount ?? 100000,
+                (currentGoods.maxBuyCount ?? 100000) - (currentGoods.purchasedCount ?? 0),
+              )"
               style="max-width: 120px"
               step="1"
               :precision="0"
@@ -645,7 +729,13 @@ onMounted(async () => {
               depth="3"
               style="margin-left: 8px;"
             >
-              (最多可兑换 {{ currentGoods.maxBuyCount ?? '无限' }} 个)
+              ({{
+                currentGoods.hasPurchased
+                  ? `已兑换 ${currentGoods.purchasedCount} 个，还可兑换 ${
+                    (currentGoods.maxBuyCount ?? 100000) - (currentGoods.purchasedCount ?? 0)
+                  } 个`
+                  : `最多可兑换 ${currentGoods.maxBuyCount ?? '无限'} 个`
+              }})
             </NText>
           </NFormItem>
           <!-- 地址选择 (仅对无外部收集链接的实物礼物显示) -->
@@ -688,7 +778,11 @@ onMounted(async () => {
 
       <NDivider style="margin-top: 16px; margin-bottom: 16px;">
         <NTag :type="!canDoBuy ? 'error' : 'success'">
-          {{ !canDoBuy ? (currentGoods.price * buyCount > currentPoint ? '积分不足' : '信息不完整') : '可兑换' }}
+          {{
+            !canDoBuy
+              ? (currentGoods.cannotPurchaseReason || (currentGoods.price * buyCount > currentPoint ? '积分不足' : '信息不完整'))
+              : '可兑换'
+          }}
         </NTag>
       </NDivider>
 
@@ -879,6 +973,20 @@ onMounted(async () => {
   content: none;
 }
 
+.purchased-item {
+  opacity: 0.92;
+}
+
+.cannot-purchase-item {
+  opacity: 0.7;
+  filter: grayscale(0.3);
+}
+
+.cannot-purchase-item:hover {
+  opacity: 0.85;
+  filter: grayscale(0.15);
+}
+
 .pin-icon {
   display: inline-flex;
   align-items: center;