feat: 新增多token用量查看

Yi.Ai.Vue3/src/api/model/index.ts

@@ -3,7 +3,6 @@ import { del, get, post, put } from '@/utils/request';
 
 // 获取当前用户的模型列表
 export function getModelList() {
-  // return get<GetSessionListVO[]>('/system/model/modelList');
   return get<GetSessionListVO[]>('/ai-chat/model').json();
 }
 // 申请ApiKey
@@ -21,72 +20,36 @@ export function getRechargeLog() {
 }
 
 // 查询用户近7天token消耗
-export function getLast7DaysTokenUsage() {
+// tokenId: 可选，传入则查询该token的用量，不传则查询全部
-  return get<any>('/usage-statistics/last7Days-token-usage').json();
+export function getLast7DaysTokenUsage(tokenId?: string) {
+  const url = tokenId
+    ? `/usage-statistics/last7Days-token-usage?tokenId=${tokenId}`
+    : '/usage-statistics/last7Days-token-usage';
+  return get<any>(url).json();
 }
 // 查询用户token消耗各模型占比
-export function getModelTokenUsage() {
+// tokenId: 可选，传入则查询该token的用量，不传则查询全部
-  return get<any>('/usage-statistics/model-token-usage').json();
+export function getModelTokenUsage(tokenId?: string) {
+  const url = tokenId
+    ? `/usage-statistics/model-token-usage?tokenId=${tokenId}`
+    : '/usage-statistics/model-token-usage';
+  return get<any>(url).json();
 }
 
-// 以下为新增接口
-
 // 获取当前用户得token列表
 export function getTokenList() {
   return get<any>('/token/list').json();
 }
-/*
-返回数据：
-[
-  {
-    "id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-    "name": "string",
-    "apiKey": "string",
-    "expireTime": "2025-11-29T07:34:23.850Z",
-    "premiumQuotaLimit": 0,
-    "premiumUsedQuota": 0,
-    "isDisabled": true,
-    "creationTime": "2025-11-29T07:34:23.850Z"
-  }
-] */
 
 // 创建token
 export function createToken(data: any) {
   return post<any>('/token', data).json();
 }
-/*
-data:
-{
-  "name": "string",
-  "expireTime": "2025-11-29T07:35:10.458Z",
-  "premiumQuotaLimit": 0
-} */
-/*
-返回：
-{
-  "id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-  "name": "string",
-  "apiKey": "string",
-  "expireTime": "2025-11-29T07:35:10.459Z",
-  "premiumQuotaLimit": 0,
-  "premiumUsedQuota": 0,
-  "isDisabled": true,
-  "creationTime": "2025-11-29T07:35:10.459Z"
-} */
 
 // 编辑token
 export function editToken(data: any) {
   return put('/token', data).json();
 }
-/*
-data:
-{
-  "id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
-  "name": "string",
-  "expireTime": "2025-11-29T07:36:49.589Z",
-  "premiumQuotaLimit": 0
-}
-*/
 
 // 删除token
 export function deleteToken(id: string) {
@@ -102,3 +65,31 @@ export function enableToken(id: string) {
 export function disableToken(id: string) {
   return post(`/token/${id}/disable`).json();
 }
+
+// 新增接口2
+// 获取可选择的token信息
+export function getSelectableTokenInfo() {
+  return get<any>('/token/select-list').json();
+}
+/*
+返回数据
+  [
+  {
+    "tokenId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+    "name": "string",
+    "isDisabled": true
+  }
+  ] */
+// 获取当前用户尊享包不同token用量占比（饼图）
+export function getPremiumPackageTokenUsage() {
+  return get<any>('/usage-statistics/premium-token-usage/by-token').json();
+}
+/* 返回数据
+  [
+  {
+    "tokenId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+    "tokenName": "string",
+    "tokens": 0,
+    "percentage": 0
+  }
+  ] */

Yi.Ai.Vue3/src/components/userPersonalCenter/components/APIKeyManagement.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { Plus, Refresh, Delete, Edit, View, Hide, DocumentCopy, Check, Close, Key } from '@element-plus/icons-vue';
+import { Check, Close, Delete, DocumentCopy, Edit, Hide, Key, Plus, Refresh, View } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { onMounted, ref, computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import {
-  getTokenList,
   createToken,
-  editToken,
   deleteToken,
+  disableToken,
+  editToken,
   enableToken,
-  disableToken
+  getTokenList,
 } from '@/api/model/index.ts';
 import { isUserVip } from '@/utils/user';
 import TokenFormDialog from './TokenFormDialog.vue';
@@ -42,7 +42,7 @@ const currentFormData = ref<TokenFormData>({
   name: '',
   expireTime: '',
   premiumQuotaLimit: 0,
-  quotaUnit: '万'
+  quotaUnit: '万',
 });
 const router = useRouter();
 
@@ -55,15 +55,17 @@ async function fetchTokenList() {
     loading.value = true;
     const res = await getTokenList();
     if (res.data) {
-      tokenList.value = res.data.map((item: TokenItem) => ({
+      tokenList.value = res.data.items.map((item: TokenItem) => ({
         ...item,
-        showKey: false
+        showKey: false,
       }));
     }
-  } catch (error) {
+  }
+  catch (error) {
     console.error('获取Token列表失败:', error);
     ElMessage.error('获取Token列表失败');
-  } finally {
+  }
+  finally {
     loading.value = false;
   }
 }
@@ -106,7 +108,7 @@ function showCreateDialog() {
     name: '',
     expireTime: '',
     premiumQuotaLimit: 0,
-    quotaUnit: '万'
+    quotaUnit: '万',
   };
   showFormDialog.value = true;
 }
@@ -119,14 +121,15 @@ function showEditDialog(token: TokenItem) {
     name: token.name,
     expireTime: token.expireTime,
     premiumQuotaLimit: token.premiumQuotaLimit,
-    quotaUnit: '万'
+    quotaUnit: '万',
   };
   showFormDialog.value = true;
 }
 
 // 处理表单提交（带防抖）
 async function handleFormSubmit(data: TokenFormData) {
-  if (loading.value) return;
+  if (loading.value)
+    return;
 
   try {
     loading.value = true;
@@ -134,30 +137,34 @@ async function handleFormSubmit(data: TokenFormData) {
       id: data.id,
       name: data.name,
       expireTime: data.expireTime || null,
-      premiumQuotaLimit: data.premiumQuotaLimit || 0
+      premiumQuotaLimit: data.premiumQuotaLimit || 0,
     };
 
     if (formMode.value === 'create') {
       await createToken(submitData);
       ElMessage.success('Token创建成功');
-    } else {
+    }
+    else {
       await editToken(submitData);
       ElMessage.success('Token更新成功');
     }
 
     showFormDialog.value = false;
     await fetchTokenList();
-  } catch (error) {
+  }
+  catch (error) {
     console.error('操作失败:', error);
     ElMessage.error(formMode.value === 'create' ? '创建Token失败' : '编辑Token失败');
-  } finally {
+  }
+  finally {
     loading.value = false;
   }
 }
 
 // 删除Token（带防抖）
 async function handleDelete(row: TokenItem) {
-  if (operatingTokenId.value === row.id) return;
+  if (operatingTokenId.value === row.id)
+    return;
 
   try {
     await ElMessageBox.confirm(
@@ -167,41 +174,47 @@ async function handleDelete(row: TokenItem) {
         confirmButtonText: '确定删除',
         cancelButtonText: '取消',
         type: 'warning',
-        confirmButtonClass: 'el-button--danger'
+        confirmButtonClass: 'el-button--danger',
-      }
+      },
     );
 
     operatingTokenId.value = row.id;
     await deleteToken(row.id);
     ElMessage.success('Token已删除');
     await fetchTokenList();
-  } catch (error) {
+  }
+  catch (error) {
     if (error !== 'cancel') {
       ElMessage.error('删除失败');
     }
-  } finally {
+  }
+  finally {
     operatingTokenId.value = '';
   }
 }
 
 // 启用/禁用Token（带防抖）
 async function handleToggle(row: TokenItem) {
-  if (operatingTokenId.value === row.id) return;
+  if (operatingTokenId.value === row.id)
+    return;
 
   try {
     operatingTokenId.value = row.id;
     if (row.isDisabled) {
       await enableToken(row.id);
       ElMessage.success(`Token "${row.name}" 已启用`);
-    } else {
+    }
+    else {
       await disableToken(row.id);
       ElMessage.success(`Token "${row.name}" 已禁用`);
     }
     await fetchTokenList();
-  } catch (error) {
+  }
+  catch (error) {
     console.error('操作失败:', error);
     ElMessage.error('操作失败');
-  } finally {
+  }
+  finally {
     operatingTokenId.value = '';
   }
 }
@@ -220,20 +233,22 @@ function copyApiKey(apiKey: string, name: string) {
 
 // 格式化日期
 function formatDateTime(dateStr: string | null | undefined) {
-  if (!dateStr) return '-';
+  if (!dateStr)
+    return '-';
   const date = new Date(dateStr);
   return date.toLocaleString('zh-CN', {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
     hour: '2-digit',
-    minute: '2-digit'
+    minute: '2-digit',
   });
 }
 
 // 格式化配额数字
 function formatQuota(num: number | null | undefined): string {
-  if (num == null || num === 0) return '0';
+  if (num == null || num === 0)
+    return '0';
   if (num >= 100000000) {
     return `${(num / 100000000).toFixed(2).replace(/\.?0+$/, '')} 亿`;
   }
@@ -248,14 +263,17 @@ function formatQuota(num: number | null | undefined): string {
 
 // 计算配额使用百分比
 function getQuotaPercentage(used: number | null | undefined, limit: number | null | undefined) {
-  if (limit == null || limit === 0 || used == null) return 0;
+  if (limit == null || limit === 0 || used == null)
+    return 0;
   return Math.min((used / limit) * 100, 100);
 }
 
 // 获取配额状态颜色
 function getQuotaColor(percentage: number) {
-  if (percentage >= 90) return '#f56c6c';
+  if (percentage >= 90)
-  if (percentage >= 70) return '#e6a23c';
+    return '#f56c6c';
+  if (percentage >= 70)
+    return '#e6a23c';
   return '#67c23a';
 }
 
@@ -359,7 +377,9 @@ onMounted(async () => {
           <template #default="{ row }">
             <div class="key-cell">
               <div class="key-content">
-                <el-icon class="key-icon"><i-ep-key /></el-icon>
+                <el-icon class="key-icon">
+                  <i-ep-key />
+                </el-icon>
                 <span class="key-text">
                   {{ row.showKey ? row.apiKey : '••••••••••••••••••••••••••••••••' }}
                 </span>
@@ -426,7 +446,9 @@ onMounted(async () => {
         >
           <template #default="{ row }">
             <div v-if="row.expireTime" class="time-cell">
-              <el-icon class="time-icon"><i-ep-timer /></el-icon>
+              <el-icon class="time-icon">
+                <i-ep-timer />
+              </el-icon>
               <span>{{ formatDateTime(row.expireTime) }}</span>
             </div>
             <el-tag v-else type="success" size="default" effect="light" class="never-expire-tag">
@@ -472,7 +494,9 @@ onMounted(async () => {
         >
           <template #default="{ row }">
             <div class="time-cell">
-              <el-icon class="time-icon"><i-ep-clock /></el-icon>
+              <el-icon class="time-icon">
+                <i-ep-clock />
+              </el-icon>
               <span>{{ formatDateTime(row.creationTime) }}</span>
             </div>
           </template>

Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumPackageInfo.vue

@@ -1,7 +1,27 @@
 <script lang="ts" setup>
 import { Clock, Coin, TrophyBase, WarningFilled } from '@element-plus/icons-vue';
+import { PieChart as EPieChart } from 'echarts/charts';
+import {
+  GraphicComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { getPremiumPackageTokenUsage } from '@/api';
 import { showProductPackage } from '@/utils/product-package.ts';
 
+// 注册必要的组件
+echarts.use([
+  EPieChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GraphicComponent,
+  CanvasRenderer,
+]);
+
 // Props
 interface Props {
   packageData: {
@@ -24,6 +44,12 @@ const emit = defineEmits<{
   refresh: [];
 }>();
 
+// 饼图相关
+const tokenPieChart = ref(null);
+let tokenPieChartInstance: any = null;
+const tokenUsageData = ref<any[]>([]);
+const tokenUsageLoading = ref(false);
+
 // 计算属性
 const usagePercent = computed(() => {
   if (props.packageData.totalQuota === 0)
@@ -64,6 +90,193 @@ function formatRawNumber(num: number): string {
 function onProductPackage() {
   showProductPackage();
 }
+
+// 获取Token用量数据
+async function fetchTokenUsageData() {
+  try {
+    tokenUsageLoading.value = true;
+    const res = await getPremiumPackageTokenUsage();
+    if (res.data) {
+      tokenUsageData.value = res.data;
+      updateTokenPieChart();
+    }
+  }
+  catch (error) {
+    console.error('获取Token用量数据失败:', error);
+  }
+  finally {
+    tokenUsageLoading.value = false;
+  }
+}
+
+// 初始化Token饼图
+function initTokenPieChart() {
+  if (tokenPieChart.value) {
+    tokenPieChartInstance = echarts.init(tokenPieChart.value);
+  }
+  window.addEventListener('resize', resizeTokenPieChart);
+}
+
+// 更新Token饼图
+function updateTokenPieChart() {
+  if (!tokenPieChartInstance)
+    return;
+
+  // 空数据状态
+  if (tokenUsageData.value.length === 0) {
+    const emptyOption = {
+      graphic: [
+        {
+          type: 'group',
+          left: 'center',
+          top: 'center',
+          children: [
+            {
+              type: 'circle',
+              shape: {
+                r: 80,
+              },
+              style: {
+                fill: '#f5f7fa',
+                stroke: '#e9ecef',
+                lineWidth: 2,
+              },
+            },
+            {
+              type: 'text',
+              style: {
+                text: '📊',
+                fontSize: 48,
+                x: -24,
+                y: -40,
+              },
+            },
+            {
+              type: 'text',
+              style: {
+                text: '暂无数据',
+                fontSize: 18,
+                fontWeight: 'bold',
+                fill: '#909399',
+                x: -36,
+                y: 20,
+              },
+            },
+            {
+              type: 'text',
+              style: {
+                text: '还没有Token使用记录',
+                fontSize: 14,
+                fill: '#c0c4cc',
+                x: -70,
+                y: 50,
+              },
+            },
+          ],
+        },
+      ],
+    };
+    tokenPieChartInstance.setOption(emptyOption, true);
+    return;
+  }
+
+  const data = tokenUsageData.value.map(item => ({
+    name: item.tokenName,
+    value: item.tokens,
+  }));
+
+  const option = {
+    graphic: [],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} tokens ({d}%)',
+    },
+    legend: {
+      show: false, // 隐藏图例，使用标签线代替
+    },
+    series: [
+      {
+        name: 'Token用量',
+        type: 'pie',
+        radius: ['50%', '70%'],
+        center: ['50%', '50%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          formatter: (params: any) => {
+            const item = tokenUsageData.value.find(d => d.tokenName === params.name);
+            const percentage = item?.percentage || 0;
+            return `${params.name}: ${percentage.toFixed(1)}%`;
+          },
+          fontSize: 13,
+          fontWeight: 600,
+          color: '#333',
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 16,
+            fontWeight: 'bold',
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.3)',
+          },
+        },
+        labelLine: {
+          show: true,
+          length: 15,
+          length2: 10,
+          lineStyle: {
+            width: 1.5,
+          },
+        },
+        data,
+      },
+    ],
+  };
+
+  tokenPieChartInstance.setOption(option, true);
+}
+
+// 调整饼图大小
+function resizeTokenPieChart() {
+  tokenPieChartInstance?.resize();
+}
+
+// 根据索引获取Token颜色
+function getTokenColor(index: number) {
+  const colors = [
+    '#667eea',
+    '#764ba2',
+    '#f093fb',
+    '#f5576c',
+    '#4facfe',
+    '#00f2fe',
+    '#43e97b',
+    '#38f9d7',
+    '#fa709a',
+    '#fee140',
+  ];
+  return colors[index % colors.length];
+}
+
+onMounted(() => {
+  initTokenPieChart();
+  fetchTokenUsageData();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', resizeTokenPieChart);
+  tokenPieChartInstance?.dispose();
+});
 </script>
 
 <template>
@@ -231,6 +444,92 @@ function onProductPackage() {
         </el-alert>
       </div>
     </el-card>
+
+    <!-- Token用量占比卡片 -->
+    <el-card v-loading="tokenUsageLoading" class="package-card token-usage-card" shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <div class="card-header-left">
+            <el-icon class="header-icon token-icon">
+              <i-ep-pie-chart />
+            </el-icon>
+            <div class="header-text">
+              <span class="header-title">各Token用量占比</span>
+              <span class="header-subtitle">Premium Token Usage Distribution</span>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <div class="token-usage-content">
+        <div class="chart-container-wrapper">
+          <div ref="tokenPieChart" class="token-pie-chart" />
+        </div>
+
+        <!-- Token统计列表 -->
+        <div v-if="tokenUsageData.length > 0" class="token-stats-list">
+          <div
+            v-for="(item, index) in tokenUsageData"
+            :key="item.tokenId"
+            class="token-stat-item"
+          >
+            <div class="token-stat-header">
+              <div class="token-rank">
+                <span class="rank-badge" :class="`rank-${index + 1}`">#{{ index + 1 }}</span>
+              </div>
+              <div class="token-name">
+                <el-icon><i-ep-key /></el-icon>
+                <span>{{ item.tokenName }}</span>
+              </div>
+            </div>
+            <div class="token-stat-data">
+              <div class="stat-tokens">
+                <span class="label">用量:</span>
+                <span class="value">{{ item.tokens.toLocaleString() }}</span>
+                <span class="unit">tokens</span>
+              </div>
+              <div class="stat-percentage">
+                <el-progress
+                  :percentage="item.percentage"
+                  :color="getTokenColor(index)"
+                  :stroke-width="8"
+                  :show-text="true"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 空状态 -->
+        <el-empty
+          v-else
+          description="暂无Token使用数据"
+          class="token-empty-state"
+          :image-size="120"
+        >
+          <template #image>
+            <div class="custom-empty-image">
+              <el-icon class="empty-main-icon"><i-ep-pie-chart /></el-icon>
+              <div class="empty-decoration">
+                <div class="decoration-circle" />
+                <div class="decoration-circle" />
+                <div class="decoration-circle" />
+              </div>
+            </div>
+          </template>
+          <template #description>
+            <div class="empty-description">
+              <h3 class="empty-title">暂无Token使用数据</h3>
+              <p class="empty-text">当您开始使用Token后，这里将展示各Token的用量占比统计</p>
+              <div class="empty-tips">
+                <el-icon><i-ep-info-filled /></el-icon>
+                <span>创建并使用Token后即可查看详细的用量分析</span>
+              </div>
+            </div>
+          </template>
+        </el-empty>
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -495,6 +794,270 @@ function onProductPackage() {
   font-size: 13px;
 }
 
+/* Token用量占比卡片 */
+.token-usage-card {
+  margin-top: 24px;
+}
+
+.token-icon {
+  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
+  color: #0284c7;
+}
+
+.token-usage-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.chart-container-wrapper {
+  width: 100%;
+  background: linear-gradient(135deg, #fafbfc 0%, #f5f6f8 100%);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.token-pie-chart {
+  width: 100%;
+  height: 400px;
+}
+
+/* Token统计列表 */
+.token-stats-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.token-stat-item {
+  padding: 16px;
+  background: linear-gradient(135deg, #fafbfc 0%, #ffffff 100%);
+  border-radius: 12px;
+  border: 1px solid #f0f2f5;
+  transition: all 0.3s;
+
+  &:hover {
+    border-color: #667eea;
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
+    transform: translateY(-2px);
+  }
+}
+
+.token-stat-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.token-rank {
+  flex-shrink: 0;
+}
+
+.rank-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  color: white;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+  &.rank-1 {
+    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  }
+
+  &.rank-2 {
+    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
+  }
+
+  &.rank-3 {
+    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
+  }
+}
+
+.token-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a1a;
+
+  .el-icon {
+    color: #667eea;
+    font-size: 18px;
+  }
+}
+
+.token-stat-data {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.stat-tokens {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 14px;
+
+  .label {
+    color: #909399;
+  }
+
+  .value {
+    font-size: 20px;
+    font-weight: 700;
+    color: #667eea;
+  }
+
+  .unit {
+    color: #909399;
+    font-size: 12px;
+  }
+}
+
+.stat-percentage {
+  :deep(.el-progress__text) {
+    font-size: 14px !important;
+    font-weight: 700;
+  }
+}
+
+/* 空状态 */
+.token-empty-state {
+  padding: 60px 20px;
+
+  :deep(.el-empty__image) {
+    width: auto;
+  }
+}
+
+.custom-empty-image {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 140px;
+  height: 140px;
+  margin: 0 auto;
+}
+
+.empty-main-icon {
+  font-size: 80px;
+  color: #667eea;
+  position: relative;
+  z-index: 2;
+  animation: float 3s ease-in-out infinite;
+}
+
+.empty-decoration {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.decoration-circle {
+  position: absolute;
+  border-radius: 50%;
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+
+  &:nth-child(1) {
+    width: 60px;
+    height: 60px;
+    top: 10%;
+    left: 10%;
+    animation: pulse 2s ease-in-out infinite;
+  }
+
+  &:nth-child(2) {
+    width: 40px;
+    height: 40px;
+    bottom: 20%;
+    right: 15%;
+    animation: pulse 2s ease-in-out infinite 0.5s;
+  }
+
+  &:nth-child(3) {
+    width: 30px;
+    height: 30px;
+    top: 60%;
+    right: 5%;
+    animation: pulse 2s ease-in-out infinite 1s;
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.3;
+  }
+}
+
+.empty-description {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.empty-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.empty-text {
+  margin: 0;
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.6;
+  max-width: 360px;
+}
+
+.empty-tips {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 16px;
+  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
+  border-radius: 8px;
+  font-size: 13px;
+  color: #667eea;
+  margin-top: 8px;
+
+  .el-icon {
+    font-size: 16px;
+    flex-shrink: 0;
+  }
+}
+
 /* 警告卡片 */
 .warning-card {
   border-radius: 12px;

Yi.Ai.Vue3/src/components/userPersonalCenter/components/UsageStatistics.vue

@@ -11,7 +11,7 @@ import {
 } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import { getLast7DaysTokenUsage, getModelTokenUsage } from '@/api';
+import { getLast7DaysTokenUsage, getModelTokenUsage, getSelectableTokenInfo } from '@/api';
 
 // 注册必要的组件
 echarts.use([
@@ -48,16 +48,53 @@ const totalTokens = ref(0);
 const usageData = ref<any[]>([]);
 const modelUsageData = ref<any[]>([]);
 
+// Token选择相关
+const selectedTokenId = ref<string>(''); // 空字符串表示查询全部
+const tokenOptions = ref<any[]>([]);
+const tokenOptionsLoading = ref(false);
+
 // 计算属性：是否有模型数据
 const hasModelData = computed(() => modelUsageData.value.length > 0);
 
+// 计算属性：当前选择的token名称
+const selectedTokenName = computed(() => {
+  if (!selectedTokenId.value) return '全部Token';
+  const token = tokenOptions.value.find(t => t.tokenId === selectedTokenId.value);
+  return token?.name || '未知Token';
+});
+
+// 获取可选择的Token列表
+async function fetchTokenOptions() {
+  try {
+    tokenOptionsLoading.value = true;
+    const res = await getSelectableTokenInfo();
+    if (res.data) {
+      // 不再过滤禁用的token，全部显示
+      tokenOptions.value = res.data;
+    }
+  }
+  catch (error) {
+    console.error('获取Token列表失败:', error);
+    ElMessage.error('获取Token列表失败');
+  }
+  finally {
+    tokenOptionsLoading.value = false;
+  }
+}
+
+// Token选择变化
+function handleTokenChange() {
+  fetchUsageData();
+}
+
 // 获取用量数据
 async function fetchUsageData() {
   loading.value = true;
   try {
+    const tokenId = selectedTokenId.value || undefined;
     const [res, res2] = await Promise.all([
-      getLast7DaysTokenUsage(),
+      getLast7DaysTokenUsage(tokenId),
-      getModelTokenUsage(),
+      getModelTokenUsage(tokenId),
     ]);
 
     usageData.value = res.data || [];
@@ -235,49 +272,47 @@ function updatePieChart() {
       formatter: '{a} <br/>{b}: {c} tokens ({d}%)',
     },
     legend: {
-      orient: isManyItems ? 'vertical' : 'horizontal',
+      show: false, // 隐藏图例，使用标签线代替
-      right: isManyItems ? 10 : 'auto',
-      bottom: isManyItems ? 0 : 10,
-      type: isManyItems ? 'scroll' : 'plain',
-      pageIconColor: '#3a4de9',
-      pageIconInactiveColor: '#ccc',
-      pageTextStyle: { color: '#333' },
-      itemGap: isSmallContainer ? 5 : 10,
-      itemWidth: isSmallContainer ? 15 : 25,
-      itemHeight: isSmallContainer ? 10 : 14,
-      textStyle: {
-        fontSize: isSmallContainer ? 10 : 12,
-      },
-      formatter(name: string) {
-        return name.length > 15 ? `${name.substring(0, 12)}...` : name;
-      },
-      data: data.map(item => item.name),
     },
     series: [
       {
         name: '模型用量',
         type: 'pie',
         radius: ['50%', '70%'],
-        center: isManyItems ? ['40%', '50%'] : ['50%', '50%'],
+        center: ['50%', '50%'],
-        avoidLabelOverlap: false,
+        avoidLabelOverlap: true,
         itemStyle: {
           borderRadius: 10,
           borderColor: '#fff',
           borderWidth: 2,
         },
         label: {
-          show: false,
+          show: true,
-          position: 'center',
+          position: 'outside',
+          formatter: '{b}: {d}%',
+          fontSize: 13,
+          fontWeight: 600,
+          color: '#333',
         },
         emphasis: {
           label: {
             show: true,
-            fontSize: '18',
+            fontSize: 16,
             fontWeight: 'bold',
           },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.3)',
+          },
         },
         labelLine: {
-          show: false,
+          show: true,
+          length: 15,
+          length2: 10,
+          lineStyle: {
+            width: 1.5,
+          },
         },
         data,
       },
@@ -453,6 +488,7 @@ watch([pieContainerSize.width, barContainerSize.width], () => {
 
 onMounted(() => {
   initCharts();
+  fetchTokenOptions();
   fetchUsageData();
 });
 
@@ -475,19 +511,54 @@ onBeforeUnmount(() => {
         <el-icon><PieChart /></el-icon>
         Token用量统计
       </h2>
-      <el-button
+      <div class="header-actions">
-        :icon="FullScreen"
+        <el-select
-        circle
+          v-model="selectedTokenId"
-        plain
+          placeholder="选择Token"
-        size="small"
+          clearable
-        @click="toggleFullscreen"
+          filterable
-      />
+          :loading="tokenOptionsLoading"
+          class="token-selector"
+          @change="handleTokenChange"
+        >
+          <el-option label="全部Token" value="">
+            <div class="token-option">
+              <el-icon class="option-icon all-icon"><i-ep-folder-opened /></el-icon>
+              <span class="option-label">全部Token</span>
+            </div>
+          </el-option>
+          <el-option
+            v-for="token in tokenOptions"
+            :key="token.tokenId"
+            :label="token.name"
+            :value="token.tokenId"
+            :disabled="token.isDisabled"
+          >
+            <div class="token-option" :class="{ 'disabled-token': token.isDisabled }">
+              <el-icon class="option-icon" :class="{ 'disabled-icon': token.isDisabled }">
+                <i-ep-key />
+              </el-icon>
+              <span class="option-label">{{ token.name }}</span>
+              <el-tag v-if="token.isDisabled" type="info" size="small" effect="plain" class="disabled-tag">
+                已禁用
+              </el-tag>
+            </div>
+          </el-option>
+        </el-select>
+        <el-button
+          :icon="FullScreen"
+          circle
+          plain
+          size="small"
+          @click="toggleFullscreen"
+        />
+      </div>
     </div>
 
     <el-card v-loading="loading" class="chart-card">
       <template #header>
         <div class="card-header">
-          <span class="card-title">📊 近七天每日Token消耗量</span>
+          <span class="card-title">📊 近七天每日Token消耗量{{ selectedTokenId ? ` (${selectedTokenName})` : '' }}</span>
           <el-tag type="primary" size="large" effect="dark">
             近七日总计: {{ totalTokens }} tokens
           </el-tag>
@@ -501,7 +572,7 @@ onBeforeUnmount(() => {
     <el-card v-loading="loading" class="chart-card">
       <template #header>
         <div class="card-header">
-          <span class="card-title">🥧 各模型Token消耗占比</span>
+          <span class="card-title">🥧 各模型Token消耗占比{{ selectedTokenId ? ` (${selectedTokenName})` : '' }}</span>
         </div>
       </template>
       <div class="chart-container">
@@ -512,7 +583,7 @@ onBeforeUnmount(() => {
     <el-card v-loading="loading" class="chart-card">
       <template #header>
         <div class="card-header">
-          <span class="card-title">📈 各模型总Token消耗量</span>
+          <span class="card-title">📈 各模型总Token消耗量{{ selectedTokenId ? ` (${selectedTokenName})` : '' }}</span>
         </div>
       </template>
       <div class="chart-container">
@@ -560,6 +631,62 @@ onBeforeUnmount(() => {
   border-bottom: 2px solid #e9ecef;
 }
 
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.token-selector {
+  width: 240px;
+}
+
+.token-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+
+  &.disabled-token {
+    opacity: 0.6;
+
+    .option-label {
+      text-decoration: line-through;
+      color: #909399;
+    }
+  }
+}
+
+.option-icon {
+  color: #667eea;
+  font-size: 16px;
+  flex-shrink: 0;
+
+  &.all-icon {
+    color: #409eff;
+  }
+
+  &.disabled-icon {
+    color: #c0c4cc;
+  }
+}
+
+.option-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.disabled-tag {
+  margin-left: auto;
+  flex-shrink: 0;
+  font-size: 11px;
+  padding: 0 6px;
+  height: 18px;
+  line-height: 18px;
+}
+
 .header h2 {
   display: flex;
   align-items: center;