feat(frontend): 前端界面优化与使用统计功能增强 (#46)

* feat(frontend): 前端界面优化与使用统计功能增强主要改动: 1. 表格布局统一优化 - 新增 TablePageLayout 通用布局组件 - 统一所有管理页面的表格样式和交互 - 优化 DataTable、Pagination、Select 等通用组件 2. 使用统计功能增强 - 管理端: 添加完整的筛选和显示功能 - 用户端: 完善 API Key 列显示 - 后端: 优化使用统计数据结构和查询 3. 账户组件优化 - 优化 AccountStatsModal、AccountUsageCell 等组件 - 统一进度条和统计显示样式 4. 其他改进 - 完善中英文国际化 - 统一页面样式和交互体验 - 优化各视图页面的响应式布局 * fix(test): 修复 stubUsageLogRepo.ListWithFilters 测试 stub 测试用例 GET /api/v1/usage 返回 500 是因为 stub 方法未实现，现在正确返回基于 UserID 过滤的日志数据。 * feat(frontend): 统一日期时间显示格式 **主要改动**: 1. 增强 utils/format.ts: - 新增 formatDateOnly() - 格式: YYYY-MM-DD - 新增 formatDateTime() - 格式: YYYY-MM-DD HH:mm:ss 2. 全局替换视图中的格式化函数: - 移除各视图中的自定义 formatDate 函数 - 统一导入使用 @/utils/format 中的函数 - created_at/updated_at 使用 formatDateTime - expires_at 使用 formatDateOnly 3. 受影响的视图 (8个): - frontend/src/views/user/KeysView.vue - frontend/src/views/user/DashboardView.vue - frontend/src/views/user/UsageView.vue - frontend/src/views/user/RedeemView.vue - frontend/src/views/admin/UsersView.vue - frontend/src/views/admin/UsageView.vue - frontend/src/views/admin/RedeemView.vue - frontend/src/views/admin/SubscriptionsView.vue **效果**: - 日期统一显示为 YYYY-MM-DD - 时间统一显示为 YYYY-MM-DD HH:mm:ss - 提升可维护性，避免格式不一致 * fix(frontend): 补充遗漏的时间格式化统一 **补充修复**（基于 code review 发现的遗漏）: 1. 增强 utils/format.ts: - 新增 formatTime() - 格式: HH:mm 2. 修复 4 个遗漏的文件: - src/views/admin/UsersView.vue * 删除 formatExpiresAt()，改用 formatDateTime() * 修复订阅过期时间 tooltip 显示格式不一致问题 - src/views/user/ProfileView.vue * 删除 formatMemberSince()，改用 formatDate(date, 'YYYY-MM') * 统一会员起始时间显示格式 - src/views/user/SubscriptionsView.vue * 修改 formatExpirationDate() 使用 formatDateOnly() * 保留天数计算逻辑 - src/components/account/AccountStatusIndicator.vue * 删除本地 formatTime()，改用 utils/format 中的统一函数 * 修复 rate limit 和 overload 重置时间显示 **验证**: - TypeScript 类型检查通过 ✓ - 前端构建成功 ✓ - 所有剩余的 toLocaleString() 都是数字格式化，属于正确用法 ✓ **效果**: - 订阅过期时间统一为 YYYY-MM-DD HH:mm:ss - 会员起始时间统一为 YYYY-MM - 重置时间统一为 HH:mm - 消除所有不规范的原生 locale 方法调用
2025-12-27 10:50:25 +08:00
parent cf8a64528c
commit 254f12543c
43 changed files with 1673 additions and 692 deletions
--- a/frontend/src/views/user/DashboardView.vue
+++ b/frontend/src/views/user/DashboardView.vue
@@ -452,16 +452,16 @@
                          {{ log.model }}
                        </p>
                        <p class="text-xs text-gray-500 dark:text-dark-400">
-                          {{ formatDate(log.created_at) }}
+                          {{ formatDateTime(log.created_at) }}
                        </p>
                      </div>
                    </div>
                    <div class="text-right">
                      <p class="text-sm font-semibold">
-                        <span class="text-green-600 dark:text-green-400" title="实际扣除"
+                        <span class="text-green-600 dark:text-green-400" :title="t('dashboard.actual')"
                          >${{ formatCost(log.actual_cost) }}</span
                        >
-                        <span class="font-normal text-gray-400 dark:text-gray-500" title="标准计费">
+                        <span class="font-normal text-gray-400 dark:text-gray-500" :title="t('dashboard.standard')">
                          / ${{ formatCost(log.total_cost) }}</span
                        >
                      </p>
@@ -649,6 +649,7 @@ import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useAuthStore } from '@/stores/auth'
+import { formatDateTime } from '@/utils/format'

 const { t } = useI18n()
 import { usageAPI, type UserDashboardStats } from '@/api/usage'
@@ -914,16 +915,6 @@ const formatDuration = (ms: number): string => {
  return `${Math.round(ms)}ms`
 }

-const formatDate = (dateString: string): string => {
-  const date = new Date(dateString)
-  return date.toLocaleString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
-
 const navigateTo = (path: string) => {
  router.push(path)
 }
--- a/frontend/src/views/user/KeysView.vue
+++ b/frontend/src/views/user/KeysView.vue
@@ -1,8 +1,8 @@
 <template>
  <AppLayout>
-    <div class="space-y-6">
-      <!-- Page Header Actions -->
-      <div class="flex justify-end gap-3">
+    <TablePageLayout>
+      <template #actions>
+        <div class="flex justify-end gap-3">
        <button
          @click="loadApiKeys"
          :disabled="loading"
@@ -36,9 +36,9 @@
          {{ t('keys.createKey') }}
        </button>
      </div>
+      </template>

-      <!-- API Keys Table -->
-      <div class="card overflow-hidden">
+      <template #table>
        <DataTable :columns="columns" :data="apiKeys" :loading="loading">
          <template #cell-key="{ value, row }">
            <div class="flex items-center gap-2">
@@ -146,7 +146,7 @@
          </template>

          <template #cell-created_at="{ value }">
-            <span class="text-sm text-gray-500 dark:text-dark-400">{{ formatDate(value) }}</span>
+            <span class="text-sm text-gray-500 dark:text-dark-400">{{ formatDateTime(value) }}</span>
          </template>

          <template #cell-actions="{ row }">
@@ -235,7 +235,7 @@
              <button
                @click="editKey(row)"
                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-primary-600 dark:hover:bg-dark-700 dark:hover:text-primary-400"
-                title="Edit"
+                :title="t('common.edit')"
              >
                <svg
                  class="h-4 w-4"
@@ -255,7 +255,7 @@
              <button
                @click="confirmDelete(row)"
                class="rounded-lg p-2 text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 dark:hover:text-red-400"
-                title="Delete"
+                :title="t('common.delete')"
              >
                <svg
                  class="h-4 w-4"
@@ -283,17 +283,18 @@
            />
          </template>
        </DataTable>
-      </div>
+      </template>

-      <!-- Pagination -->
-      <Pagination
-        v-if="pagination.total > 0"
-        :page="pagination.page"
-        :total="pagination.total"
-        :page-size="pagination.page_size"
-        @update:page="handlePageChange"
-      />
-    </div>
+      <template #pagination>
+        <Pagination
+          v-if="pagination.total > 0"
+          :page="pagination.page"
+          :total="pagination.total"
+          :page-size="pagination.page_size"
+          @update:page="handlePageChange"
+        />
+      </template>
+    </TablePageLayout>

    <!-- Create/Edit Modal -->
    <Modal
@@ -496,6 +497,7 @@ import { useAppStore } from '@/stores/app'
 const { t } = useI18n()
 import { keysAPI, authAPI, usageAPI, userGroupsAPI } from '@/api'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 import DataTable from '@/components/common/DataTable.vue'
 import Pagination from '@/components/common/Pagination.vue'
 import Modal from '@/components/common/Modal.vue'
@@ -507,6 +509,7 @@ import GroupBadge from '@/components/common/GroupBadge.vue'
 import type { ApiKey, Group, PublicSettings, SubscriptionType, GroupPlatform } from '@/types'
 import type { Column } from '@/components/common/types'
 import type { BatchApiKeyUsageStats } from '@/api/usage'
+import { formatDateTime } from '@/utils/format'

 interface GroupOption {
  value: number
@@ -624,15 +627,6 @@ const copyToClipboard = async (text: string, keyId: number) => {
  }
 }

-const formatDate = (dateString: string): string => {
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-  })
-}
-
 const loadApiKeys = async () => {
  loading.value = true
  try {
--- a/frontend/src/views/user/ProfileView.vue
+++ b/frontend/src/views/user/ProfileView.vue
@@ -17,7 +17,7 @@
        />
        <StatCard
          :title="t('profile.memberSince')"
-          :value="formatMemberSince(user?.created_at || '')"
+          :value="formatDate(user?.created_at || '', 'YYYY-MM')"
          :icon="CalendarIcon"
          icon-variant="primary"
        />
@@ -267,6 +267,7 @@ import { ref, computed, h, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAuthStore } from '@/stores/auth'
 import { useAppStore } from '@/stores/app'
+import { formatDate } from '@/utils/format'

 const { t } = useI18n()
 import { userAPI, authAPI } from '@/api'
@@ -358,15 +359,6 @@ const formatCurrency = (value: number): string => {
  return `$${value.toFixed(2)}`
 }

-const formatMemberSince = (dateString: string): string => {
-  if (!dateString) return 'N/A'
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short'
-  })
-}
-
 const handleChangePassword = async () => {
  // Validate password match
  if (passwordForm.value.new_password !== passwordForm.value.confirm_password) {
--- a/frontend/src/views/user/RedeemView.vue
+++ b/frontend/src/views/user/RedeemView.vue
@@ -377,7 +377,7 @@
                    {{ getHistoryItemTitle(item) }}
                  </p>
                  <p class="text-xs text-gray-500 dark:text-dark-400">
-                    {{ formatDate(item.used_at) }}
+                    {{ formatDateTime(item.used_at) }}
                  </p>
                </div>
              </div>
@@ -447,6 +447,7 @@ import { useAuthStore } from '@/stores/auth'
 import { useAppStore } from '@/stores/app'
 import { redeemAPI, authAPI, type RedeemHistoryItem } from '@/api'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import { formatDateTime } from '@/utils/format'

 const { t } = useI18n()
 const authStore = useAuthStore()
@@ -472,18 +473,6 @@ const history = ref<RedeemHistoryItem[]>([])
 const loadingHistory = ref(false)
 const contactInfo = ref('')

-const formatDate = (dateString: string) => {
-  if (!dateString) return '-'
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
-
 // Helper functions for history display
 const isBalanceType = (type: string) => {
  return type === 'balance' || type === 'admin_balance'
--- a/frontend/src/views/user/SubscriptionsView.vue
+++ b/frontend/src/views/user/SubscriptionsView.vue
@@ -257,6 +257,7 @@ import { useAppStore } from '@/stores/app'
 import subscriptionsAPI from '@/api/subscriptions'
 import type { UserSubscription } from '@/types'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import { formatDateOnly } from '@/utils/format'

 const { t } = useI18n()
 const appStore = useAppStore()
@@ -300,11 +301,7 @@ function formatExpirationDate(expiresAt: string): string {
    return t('userSubscriptions.status.expired')
  }

-  const dateStr = expires.toLocaleDateString(undefined, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-  })
+  const dateStr = formatDateOnly(expires)

  if (days === 0) {
    return `${dateStr} (Today)`
--- a/frontend/src/views/user/UsageView.vue
+++ b/frontend/src/views/user/UsageView.vue
@@ -1,10 +1,10 @@
 <template>
  <AppLayout>
-    <div class="space-y-6">
-      <!-- Summary Stats Cards -->
-      <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
-        <!-- Total Requests -->
-        <div class="card p-4">
+    <TablePageLayout>
+      <template #actions>
+        <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+          <!-- Total Requests -->
+          <div class="card p-4">
          <div class="flex items-center gap-3">
            <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
              <svg
@@ -131,11 +131,12 @@
            </div>
          </div>
        </div>
-      </div>
+        </div>
+      </template>

-      <!-- Filters -->
-      <div class="card">
-        <div class="px-6 py-4">
+      <template #filters>
+        <div class="card">
+          <div class="px-6 py-4">
          <div class="flex flex-wrap items-end gap-4">
            <!-- API Key Filter -->
            <div class="min-w-[180px]">
@@ -169,11 +170,17 @@
            </div>
          </div>
        </div>
-      </div>
+        </div>
+      </template>

-      <!-- Usage Table -->
-      <div class="card overflow-hidden">
+      <template #table>
        <DataTable :columns="columns" :data="usageLogs" :loading="loading">
+          <template #cell-api_key="{ row }">
+            <span class="text-sm text-gray-900 dark:text-white">{{
+              row.api_key?.name || '-'
+            }}</span>
+          </template>
+
          <template #cell-model="{ value }">
            <span class="font-medium text-gray-900 dark:text-white">{{ value }}</span>
          </template>
@@ -379,17 +386,18 @@
            <EmptyState :message="t('usage.noRecords')" />
          </template>
        </DataTable>
-      </div>
+      </template>

-      <!-- Pagination -->
-      <Pagination
-        v-if="pagination.total > 0"
-        :page="pagination.page"
-        :total="pagination.total"
-        :page-size="pagination.page_size"
-        @update:page="handlePageChange"
-      />
-    </div>
+      <template #pagination>
+        <Pagination
+          v-if="pagination.total > 0"
+          :page="pagination.page"
+          :total="pagination.total"
+          :page-size="pagination.page_size"
+          @update:page="handlePageChange"
+        />
+      </template>
+    </TablePageLayout>
  </AppLayout>
 </template>

@@ -399,6 +407,7 @@ import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { usageAPI, keysAPI } from '@/api'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 import DataTable from '@/components/common/DataTable.vue'
 import Pagination from '@/components/common/Pagination.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
@@ -406,6 +415,7 @@ import Select from '@/components/common/Select.vue'
 import DateRangePicker from '@/components/common/DateRangePicker.vue'
 import type { UsageLog, ApiKey, UsageQueryParams, UsageStatsResponse } from '@/types'
 import type { Column } from '@/components/common/types'
+import { formatDateTime } from '@/utils/format'

 const { t } = useI18n()
 const appStore = useAppStore()
@@ -414,6 +424,7 @@ const appStore = useAppStore()
 const usageStats = ref<UsageStatsResponse | null>(null)

 const columns = computed<Column[]>(() => [
+  { key: 'api_key', label: t('usage.apiKeyFilter'), sortable: false },
  { key: 'model', label: t('usage.model'), sortable: true },
  { key: 'stream', label: t('usage.type'), sortable: false },
  { key: 'tokens', label: t('usage.tokens'), sortable: false },
@@ -505,17 +516,6 @@ const formatCacheTokens = (value: number): string => {
  return value.toLocaleString()
 }

-const formatDateTime = (dateString: string): string => {
-  const date = new Date(dateString)
-  return date.toLocaleString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
-
 const loadUsageLogs = async () => {
  loading.value = true
  try {