From d95c14c9035c8580f69d30bfb6c9f6882e1138ff Mon Sep 17 00:00:00 2001
From: Gsh <15170702455@163.com>
Date: Sun, 16 Nov 2025 21:30:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=B0=8A=E4=BA=AB?=
 =?UTF-8?q?=E5=8C=85=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Yi.Ai.Vue3/.eslintrc-auto-import.json         |   2 +
 Yi.Ai.Vue3/src/api/user/index.ts              |   8 +
 .../components/PremiumUsageList.vue           | 257 +++++-------------
 3 files changed, 77 insertions(+), 190 deletions(-)

diff --git a/Yi.Ai.Vue3/.eslintrc-auto-import.json b/Yi.Ai.Vue3/.eslintrc-auto-import.json
index af1083b7..313e6711 100644
--- a/Yi.Ai.Vue3/.eslintrc-auto-import.json
+++ b/Yi.Ai.Vue3/.eslintrc-auto-import.json
@@ -5,6 +5,8 @@
     "ComputedRef": true,
     "DirectiveBinding": true,
     "EffectScope": true,
+    "ElMessage": true,
+    "ElMessageBox": true,
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,
diff --git a/Yi.Ai.Vue3/src/api/user/index.ts b/Yi.Ai.Vue3/src/api/user/index.ts
index a19f0073..6b9d6b8d 100644
--- a/Yi.Ai.Vue3/src/api/user/index.ts
+++ b/Yi.Ai.Vue3/src/api/user/index.ts
@@ -22,6 +22,10 @@ export interface PremiumTokenUsageDto {
   purchaseAmount: number;
   /** 备注 */
   remark?: string;
+  /** 创建时间 */
+  creationTime?: string;
+  /** 创建者ID */
+  creatorId?: string;
 }
 
 // 查询参数接口 - 匹配后端 PagedAllResultRequestDto
@@ -38,6 +42,10 @@ export interface PremiumTokenUsageQueryParams {
   skipCount?: number;
   /** 最大返回数量（分页） */
   maxResultCount?: number;
+  /** 是否免费 */
+  isFree?: boolean;
+  // 是否为升序排序
+  isAscending?: boolean;
 }
 
 // 分页响应接口
diff --git a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumUsageList.vue b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumUsageList.vue
index f3b21e3a..341e608d 100644
--- a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumUsageList.vue
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/PremiumUsageList.vue
@@ -1,21 +1,12 @@
 <script lang="ts" setup>
 import type { PremiumTokenUsageDto, PremiumTokenUsageQueryParams } from '@/api/user';
-import { Clock, Refresh, Search } from '@element-plus/icons-vue';
-import { debounce } from 'lodash-es';
+import { Clock, Refresh } from '@element-plus/icons-vue';
 import { getPremiumTokenUsageList } from '@/api/user';
 
 // 额度明细列表
-const usageList = ref<PremiumTokenUsageDto[]>([]); // 后端返回的原始数据
-const filteredList = ref<PremiumTokenUsageDto[]>([]); // 前端过滤后的数据
-const displayList = ref<PremiumTokenUsageDto[]>([]); // 最终显示的数据（前端分页后）
+const usageList = ref<PremiumTokenUsageDto[]>([]);
 const listLoading = ref(false);
-const totalCount = ref(0); // 后端总数
-const filteredTotalCount = ref(0); // 前端过滤后的总数
-
-// 是否有前端筛选条件
-const hasClientFilter = computed(() => {
-  return !!searchKeyword.value || statusFilter.value !== null;
-});
+const totalCount = ref(0);
 
 // 查询参数
 const queryParams = ref<PremiumTokenUsageQueryParams>({
@@ -29,8 +20,7 @@ const pageSize = ref(10);
 
 // 筛选条件
 const dateRange = ref<[Date, Date] | null>(null);
-const searchKeyword = ref('');
-const statusFilter = ref<boolean | null>(null);
+const freeFilter = ref<boolean | null>(null);
 
 // 快捷时间选择
 const shortcuts = [
@@ -98,23 +88,21 @@ function getUsageColor(used: number, total: number): string {
 async function fetchUsageList(resetPage = false) {
   if (resetPage) {
     currentPage.value = 1;
-    queryParams.value.skipCount = 0;
   }
 
   listLoading.value = true;
   try {
-    // 如果有前端筛选条件，获取所有数据；否则使用正常分页
     const params: PremiumTokenUsageQueryParams = {
-      skipCount: hasClientFilter.value ? 0 : queryParams.value.skipCount,
-      maxResultCount: hasClientFilter.value ? 1000 : queryParams.value.maxResultCount,
+      skipCount: currentPage.value,
+      maxResultCount: queryParams.value.maxResultCount,
       startTime: queryParams.value.startTime,
       endTime: queryParams.value.endTime,
       orderByColumn: queryParams.value.orderByColumn,
       isAsc: queryParams.value.isAsc,
+      isFree: queryParams.value.isFree,
     };
 
     console.log('发送到后端的参数:', params);
-    console.log('是否有前端筛选:', hasClientFilter.value);
 
     const res = await getPremiumTokenUsageList(params);
     console.log('后端返回结果:', res);
@@ -122,87 +110,24 @@ async function fetchUsageList(resetPage = false) {
     if (res.data) {
       usageList.value = res.data.items || [];
       totalCount.value = res.data.totalCount || 0;
-
-      // 应用前端过滤和分页
-      applyClientFilters();
     }
   }
   catch (error) {
     console.error('获取额度明细列表失败:', error);
     ElMessage.error('获取额度明细列表失败');
     usageList.value = [];
-    filteredList.value = [];
-    displayList.value = [];
     totalCount.value = 0;
-    filteredTotalCount.value = 0;
   }
   finally {
     listLoading.value = false;
   }
 }
 
-// 前端过滤和分页
-function applyClientFilters() {
-  let filtered = [...usageList.value];
-
-  // 包名称搜索
-  if (searchKeyword.value) {
-    const keyword = searchKeyword.value.toLowerCase();
-    filtered = filtered.filter(item =>
-      item.packageName.toLowerCase().includes(keyword),
-    );
-  }
-
-  // 状态筛选
-  if (statusFilter.value !== null) {
-    filtered = filtered.filter(item => item.isActive === statusFilter.value);
-  }
-
-  filteredList.value = filtered;
-  filteredTotalCount.value = filtered.length;
-
-  // 如果有前端筛选，进行前端分页
-  if (hasClientFilter.value) {
-    const start = (currentPage.value - 1) * pageSize.value;
-    const end = start + pageSize.value;
-    displayList.value = filtered.slice(start, end);
-  }
-  else {
-    // 无前端筛选，直接使用过滤后的数据（实际就是原始数据）
-    displayList.value = filtered;
-  }
-
-  console.log('前端过滤和分页:', {
-    原始数量: usageList.value.length,
-    过滤后数量: filtered.length,
-    当前页显示: displayList.value.length,
-    搜索关键字: searchKeyword.value,
-    状态筛选: statusFilter.value,
-    当前页码: currentPage.value,
-    每页大小: pageSize.value,
-  });
-}
-
-// 防抖搜索
-const debouncedSearch = debounce(() => {
-  currentPage.value = 1; // 重置到第一页
-  applyClientFilters(); // 只应用前端过滤，不重新请求接口
-}, 300);
-
 // 处理分页
 function handlePageChange(page: number) {
   console.log('切换页码:', page);
   currentPage.value = page;
-
-  if (hasClientFilter.value) {
-    // 有前端筛选，只需重新分页
-    applyClientFilters();
-  }
-  else {
-    // 无前端筛选，后端分页
-    queryParams.value.skipCount = (page - 1) * pageSize.value;
-    fetchUsageList();
-  }
+  fetchUsageList();
 }
 
 // 处理每页大小变化
@@ -211,34 +136,21 @@ function handleSizeChange(size: number) {
   pageSize.value = size;
   queryParams.value.maxResultCount = size;
   currentPage.value = 1;
-  queryParams.value.skipCount = 0;
-
-  if (hasClientFilter.value) {
-    // 有前端筛选，只需重新分页
-    applyClientFilters();
-  }
-  else {
-    // 无前端筛选，重新获取数据
-    fetchUsageList();
-  }
+  fetchUsageList();
 }
 
 // 处理排序（使用 OrderByColumn 和 IsAsc）
 function handleSortChange({ prop, order }: { prop: string; order: string | null }) {
   console.log('排序变化:', { prop, order });
   if (order) {
-    // 后端DTO使用 OrderByColumn 和 IsAsc
     queryParams.value.orderByColumn = prop;
-    // 转换为布尔值：ascending -> true, descending -> false
     queryParams.value.isAsc = order === 'ascending' ? 'ascending' : 'descending';
   }
   else {
     queryParams.value.orderByColumn = undefined;
     queryParams.value.isAsc = undefined;
   }
-  currentPage.value = 1;
-  queryParams.value.skipCount = 0;
-  fetchUsageList();
+  fetchUsageList(true);
 }
 
 // 处理时间筛选
@@ -270,59 +182,32 @@ function handleDateChange(value: [Date, Date] | null) {
 // 重置筛选
 function resetFilters() {
   console.log('重置所有筛选条件');
-  // 重置所有筛选条件
   dateRange.value = null;
-  searchKeyword.value = '';
-  statusFilter.value = null;
-  currentPage.value = 1;
+  freeFilter.value = null;
 
   // 重置后端查询参数
   queryParams.value = {
-    skipCount: 0,
     maxResultCount: pageSize.value,
     orderByColumn: undefined,
     isAsc: undefined,
     startTime: undefined,
     endTime: undefined,
+    isFree: undefined,
   };
 
-  // 重新获取数据
-  fetchUsageList();
+  fetchUsageList(true);
 }
 
-// 处理搜索
-function handleSearch() {
-  console.log('搜索关键字:', searchKeyword.value);
-
-  // 如果已经有全量数据（之前获取过），直接过滤
-  if (usageList.value.length > 0 && hasClientFilter.value) {
-    debouncedSearch();
-  }
-  else {
-    // 否则需要重新获取数据
-    currentPage.value = 1;
-    fetchUsageList();
-  }
-}
-
-// 处理状态筛选
-function handleStatusChange(value: boolean | null) {
-  console.log('状态筛选:', value);
-
-  // 如果是清除操作（value 为 null），重置筛选
-  if (value === null) {
-    statusFilter.value = null;
-  }
-
-  currentPage.value = 1; // 重置到第一页
-
-  // 状态筛选需要重新获取数据（因为后端不支持状态筛选）
-  fetchUsageList();
+// 处理是否免费筛选
+function handleFreeFilterChange(value: boolean | null) {
+  console.log('是否免费筛选:', value);
+  queryParams.value.isFree = value === null ? undefined : value;
+  fetchUsageList(true);
 }
 
 // 判断是否有活动的筛选条件
 const hasActiveFilters = computed(() => {
-  return !!dateRange.value || !!searchKeyword.value || statusFilter.value !== null;
+  return !!dateRange.value || freeFilter.value !== null;
 });
 
 // 对外暴露刷新方法
@@ -348,12 +233,8 @@ onMounted(() => {
             <!--            <span class="header-subtitle">Premium Package Usage Details</span> -->
           </div>
         </div>
-        <div v-if="false" class="header-right">
-          <el-tag v-if="hasClientFilter && filteredTotalCount > 0" type="warning" size="default" class="count-tag">
-            <el-icon><i-ep-filter /></el-icon>
-            筛选后 {{ filteredTotalCount }} 条
-          </el-tag>
-          <el-tag v-else-if="totalCount > 0" type="primary" size="default" class="count-tag" effect="plain">
+        <div class="header-right">
+          <el-tag v-if="totalCount > 0" type="primary" size="default" class="count-tag" effect="plain">
             <el-icon><i-ep-data-line /></el-icon>
             共 {{ totalCount }} 条记录
           </el-tag>
@@ -364,21 +245,6 @@ onMounted(() => {
     <!-- 筛选工具栏 -->
     <div class="filter-toolbar">
       <div class="filter-row">
-        <div class="filter-item">
-          <el-input
-            v-model="searchKeyword"
-            placeholder="搜索包名称"
-            clearable
-            size="default"
-            class="search-input"
-            @input="handleSearch"
-          >
-            <template #prefix>
-              <el-icon><Search /></el-icon>
-            </template>
-          </el-input>
-        </div>
-
         <div class="filter-item">
           <el-date-picker
             v-model="dateRange"
@@ -398,15 +264,15 @@ onMounted(() => {
 
         <div class="filter-item">
           <el-select
-            v-model="statusFilter"
-            placeholder="全部状态"
+            v-model="freeFilter"
+            placeholder="全部类型"
             clearable
             size="default"
-            class="status-select"
-            @change="handleStatusChange"
+            class="free-select"
+            @change="handleFreeFilterChange"
           >
-            <el-option label="激活" :value="true" />
-            <el-option label="未激活" :value="false" />
+            <el-option label="免费" :value="true" />
+            <el-option label="付费" :value="false" />
           </el-select>
         </div>
 
@@ -429,25 +295,17 @@ onMounted(() => {
           </el-button>
         </div>
       </div>
-
-      <!-- 筛选提示 -->
-      <!--      <div v-if="searchKeyword || statusFilter !== null" class="filter-tip"> -->
-      <!--        <el-icon color="#409eff"> -->
-      <!--          <i-ep-info-filled /> -->
-      <!--        </el-icon> -->
-      <!--        <span>启用包名称或状态筛选时，将从当前时间范围内获取更多数据进行过滤（最多1000条）</span> -->
-      <!--      </div> -->
     </div>
 
     <!-- 数据表格 -->
     <el-table
-      :data="displayList"
+      :data="usageList"
       stripe
       class="usage-table"
       empty-text="暂无数据"
       @sort-change="handleSortChange"
     >
-      <el-table-column prop="packageName" label="包名称" min-width="140" sortable="custom" show-overflow-tooltip>
+      <el-table-column prop="packageName" label="包名称" min-width="200" sortable="custom" show-overflow-tooltip align="center" header-align="center" resizable>
         <template #default="{ row }">
           <div class="package-name-cell">
             <el-icon class="package-icon" color="#409eff">
@@ -458,7 +316,7 @@ onMounted(() => {
         </template>
       </el-table-column>
 
-      <el-table-column label="总额度" min-width="130" prop="totalTokens" sortable="custom" align="right">
+      <el-table-column label="总额度" min-width="130" prop="totalTokens" sortable="custom" align="center" header-align="center" resizable>
         <template #default="{ row }">
           <div class="token-cell">
             <span class="token-value">{{ formatNumber(row.totalTokens) }}</span>
@@ -467,7 +325,7 @@ onMounted(() => {
         </template>
       </el-table-column>
 
-      <el-table-column label="已使用" min-width="130" prop="usedTokens" sortable="custom" align="right">
+      <el-table-column label="已使用" min-width="130" prop="usedTokens" sortable="custom" align="center" header-align="center" resizable>
         <template #default="{ row }">
           <div class="token-cell used">
             <span class="token-value">{{ formatNumber(row.usedTokens) }}</span>
@@ -476,7 +334,7 @@ onMounted(() => {
         </template>
       </el-table-column>
 
-      <el-table-column label="剩余" min-width="130" prop="remainingTokens" sortable="custom" align="right">
+      <el-table-column label="剩余" min-width="130" prop="remainingTokens" sortable="custom" align="center" header-align="center" resizable>
         <template #default="{ row }">
           <div class="token-cell remaining">
             <span
@@ -490,7 +348,7 @@ onMounted(() => {
         </template>
       </el-table-column>
 
-      <el-table-column label="使用率" min-width="130" align="center">
+      <el-table-column label="使用率" min-width="130" align="center" header-align="center" resizable>
         <template #default="{ row }">
           <div class="usage-progress-cell">
             <el-progress
@@ -508,13 +366,13 @@ onMounted(() => {
         </template>
       </el-table-column>
 
-      <el-table-column label="购买金额" min-width="110" prop="purchaseAmount" sortable="custom" align="right">
+      <el-table-column label="购买金额" min-width="110" prop="purchaseAmount" sortable="custom" align="center" header-align="center" resizable>
         <template #default="{ row }">
           <span class="amount-cell">¥{{ row.purchaseAmount.toFixed(2) }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column label="状态" min-width="90" prop="isActive" sortable="custom" align="center">
+      <el-table-column label="状态" min-width="90" prop="isActive" sortable="custom" align="center" header-align="center" resizable>
         <template #default="{ row }">
           <el-tag :type="row.isActive ? 'success' : 'info'" size="small" effect="dark">
             {{ row.isActive ? '激活' : '未激活' }}
@@ -522,7 +380,19 @@ onMounted(() => {
         </template>
       </el-table-column>
 
-      <el-table-column label="到期时间" min-width="170" prop="expireDateTime" sortable="custom">
+      <el-table-column label="创建时间" min-width="170" prop="creationTime" sortable="custom" align="center" header-align="center" resizable>
+        <template #default="{ row }">
+          <div v-if="row.creationTime" class="creation-cell">
+            <el-icon class="creation-icon">
+              <Clock />
+            </el-icon>
+            <span>{{ formatDateTime(row.creationTime) }}</span>
+          </div>
+          <span v-else class="no-data">-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="到期时间" min-width="170" prop="expireDateTime" sortable="custom" align="center" header-align="center" resizable>
         <template #default="{ row }">
           <div v-if="row.expireDateTime" class="expire-cell">
             <el-icon class="expire-icon">
@@ -534,7 +404,7 @@ onMounted(() => {
         </template>
       </el-table-column>
 
-      <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip>
+      <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip align="center" header-align="center" resizable>
         <template #default="{ row }">
           <span class="remark-cell">{{ row.remark || '-' }}</span>
         </template>
@@ -542,7 +412,7 @@ onMounted(() => {
     </el-table>
 
     <!-- 空状态 -->
-    <div v-if="!displayList.length && !listLoading" class="empty-container">
+    <div v-if="!usageList.length && !listLoading" class="empty-container">
       <el-empty :description="hasActiveFilters ? '当前筛选条件下无数据' : '暂无明细记录'">
         <el-button v-if="hasActiveFilters" type="primary" @click="resetFilters">
           清除筛选
@@ -551,12 +421,12 @@ onMounted(() => {
     </div>
 
     <!-- 分页 -->
-    <div v-if="(hasClientFilter ? filteredTotalCount : totalCount) > 0" class="pagination-container">
+    <div v-if="totalCount > 0" class="pagination-container">
       <el-pagination
         v-model:current-page="currentPage"
         v-model:page-size="pageSize"
         :page-sizes="[10, 20, 50, 100]"
-        :total="hasClientFilter ? filteredTotalCount : totalCount"
+        :total="totalCount"
         layout="total, sizes, prev, pager, next, jumper"
         prev-text="上一页"
         next-text="下一页"
@@ -677,15 +547,11 @@ onMounted(() => {
   flex: 0 0 auto;
 }
 
-.search-input {
-  width: 220px;
-}
-
 .date-picker {
   width: 320px;
 }
 
-.status-select {
+.free-select {
   width: 140px;
 }
 
@@ -738,7 +604,7 @@ onMounted(() => {
   display: flex;
   align-items: baseline;
   gap: 4px;
-  justify-content: flex-end;
+  justify-content: center;
 }
 
 .token-value {
@@ -757,6 +623,18 @@ onMounted(() => {
   color: #f56c6c;
 }
 
+.creation-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #606266;
+}
+
+.creation-icon {
+  font-size: 14px;
+  color: #67c23a;
+}
+
 .expire-cell {
   display: flex;
   align-items: center;
@@ -890,9 +768,8 @@ onMounted(() => {
     width: 100%;
   }
 
-  .search-input,
   .date-picker,
-  .status-select {
+  .free-select {
     width: 100%;
   }