chore: bump version to 3.2.8

Co-authored-by: Codex <noreply@openai.com>

frontend/src/components/base/BaseIconButton.vue

@@ -75,7 +75,11 @@ const classes = computed(() => [
     :aria-busy="loading || undefined"
     :title="label"
   >
-    <span v-if="loading" class="inline-grid place-items-center" aria-hidden="true">
+    <span
+      v-if="loading"
+      class="inline-grid place-items-center [&>svg]:block [&>svg]:origin-center [&>svg]:transform-view [&>svg]:will-change-transform"
+      aria-hidden="true"
+    >
       <slot name="loading">
         <LoaderCircle
           class="animate-spin motion-reduce:animate-none"

frontend/src/components/base/BaseTable/columns.ts

@@ -14,7 +14,7 @@ export type TableColumnKind
     | 'actions'
     | 'custom'
 
-export type TableColumnSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+export type TableColumnSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
 
 export type TableColumnAlign = 'left' | 'right' | 'center'
 type TableColumnSticky = 'left' | 'right'
@@ -65,6 +65,7 @@ const columnWidths: Record<TableColumnSize, number> = {
   'xl': 184,
   '2xl': 240,
   '3xl': 288,
+  '4xl': 352,
 }
 
 const columnRecipes: Record<TableColumnKind, ColumnRecipe> = {

frontend/src/styles/base.css

@@ -1,5 +1,4 @@
 html {
-  min-width: 360px;
   background: var(--cp-bg-page);
   color: var(--cp-text-primary);
   font-family: var(--font-sans);

frontend/src/views/accounts/components/AccountUsagePanel.vue

@@ -1,10 +1,26 @@
 <script setup lang="ts">
 import type { AccountRow } from '../constants'
+import { defineTableColumns } from '@/components/base/BaseTable/columns'
+import BaseTable from '@/components/base/BaseTable/index.vue'
 import { modelSuccessRateTextClass } from '../constants'
 
 defineProps<{
   account: AccountRow
 }>()
+
+type AccountModelUsage = AccountRow['usage']['models'][number]
+
+const modelUsageColumns = defineTableColumns<AccountModelUsage>([
+  { key: 'model', label: '模型', kind: 'text', size: 'lg' },
+  { key: 'requestCountDisplay', label: '调用', kind: 'numeric', size: 'xs' },
+  { key: 'successRateDisplay', label: '成功率', kind: 'numeric', size: 'sm' },
+  { key: 'inputTokensDisplay', label: '输入', kind: 'numeric', size: 'xs' },
+  { key: 'outputTokensDisplay', label: '输出', kind: 'numeric', size: 'xs' },
+  { key: 'cachedTokensDisplay', label: '缓存', kind: 'numeric', size: 'xs' },
+  { key: 'totalTokensDisplay', label: '总计', kind: 'numeric', size: 'xs' },
+  { key: 'billingAmountUsdDisplay', label: '计费', kind: 'numeric', size: 'sm' },
+  { key: 'lastUsedAtDisplay', label: '最近请求', kind: 'datetime', size: 'sm' },
+])
 </script>
 
 <template>
@@ -62,44 +78,21 @@ defineProps<{
         <span class="text-[11px] font-emphasis text-cp-muted-text">当前额度窗口</span>
       </div>
 
-      <div
-        class="grid grid-cols-[1.5fr_0.7fr_0.8fr_1fr_1fr_1fr_1fr_1fr_1.2fr] gap-3 pb-2 text-[11px] font-heavy text-cp-secondary shadow-[inset_0_-1px_0_var(--cp-divider-subtle)]"
-      >
-        <span>模型</span>
-        <span>调用</span>
-        <span>成功率</span>
-        <span>输入</span>
-        <span>输出</span>
-        <span>缓存</span>
-        <span>总计</span>
-        <span>计费</span>
-        <span>最近请求</span>
-      </div>
-      <div
-        v-if="account.usage.models.length === 0"
-        class="pt-3 text-[12px] font-emphasis text-cp-muted-text"
-      >
-        -
-      </div>
-      <template v-else>
-        <div
-          v-for="model in account.usage.models"
-          :key="model.model"
-          class="grid grid-cols-[1.5fr_0.7fr_0.8fr_1fr_1fr_1fr_1fr_1fr_1.2fr] gap-3 pt-3 text-[12px] font-emphasis text-cp-primary"
+      <div class="h-52 min-w-0">
+        <BaseTable
+          :columns="modelUsageColumns"
+          :rows="account.usage.models"
+          row-key="model"
+          density="compact"
+          empty-text="暂无模型用量"
         >
-          <span class="truncate">{{ model.model }}</span>
-          <span>{{ model.requestCountDisplay }}</span>
-          <span :class="modelSuccessRateTextClass(model.successRate)">
-            {{ model.successRateDisplay }}
-          </span>
-          <span>{{ model.inputTokensDisplay }}</span>
-          <span>{{ model.outputTokensDisplay }}</span>
-          <span>{{ model.cachedTokensDisplay }}</span>
-          <span>{{ model.totalTokensDisplay }}</span>
-          <span>{{ model.billingAmountUsdDisplay }}</span>
-          <span>{{ model.lastUsedAtDisplay }}</span>
-        </div>
-      </template>
+          <template #successRateDisplay="{ row }">
+            <span :class="modelSuccessRateTextClass(row.successRate)">
+              {{ row.successRateDisplay }}
+            </span>
+          </template>
+        </BaseTable>
+      </div>
     </div>
   </section>
 </template>

frontend/src/views/login/components/LoginPanel.vue

@@ -157,6 +157,7 @@ function togglePasswordVisible(): void {
 
       <div class="min-w-0 mb-2">
         <BaseButton
+          variant="primary"
           size="lg"
           type="submit"
           class="login-submit"
@@ -179,6 +180,11 @@ function togglePasswordVisible(): void {
   --cp-text-primary: var(--login-title);
   --cp-text-secondary: var(--login-description);
   --cp-text-muted: var(--login-placeholder);
+  --cp-accent: var(--login-button);
+  --cp-accent-hover: var(--login-button-hover);
+  --cp-accent-pressed: var(--login-button-active);
+  --cp-accent-border: var(--login-input-icon);
+  --cp-accent-on: var(--cp-white);
   --cp-info: var(--login-button);
   --cp-info-hover: var(--login-button-hover);
   --cp-info-pressed: var(--login-button-active);

frontend/src/views/usage/components/UsageRecordsTable.vue

@@ -10,6 +10,7 @@ import {
   usageIsCompact,
   usageRecordType,
   usageRecordTypeClass,
+  usageUserAgent,
 } from '../utils/records'
 import UsageBillingCell from './UsageBillingCell.vue'
 import UsageClientIpCell from './UsageClientIpCell.vue'
@@ -60,6 +61,12 @@ withDefaults(
       <UsageClientIpCell :record="row" />
     </template>
 
+    <template #userAgent="{ row }">
+      <span class="block max-w-full wrap-break-word whitespace-normal font-mono text-[12px] leading-[1.4] font-emphasis text-cp-secondary">
+        {{ usageUserAgent(row) }}
+      </span>
+    </template>
+
     <template #model="{ row }">
       <UsageModelCell :record="row" />
     </template>

frontend/src/views/usage/constants.ts

@@ -28,7 +28,7 @@ export const usageRecordColumns = defineTableColumns<UsageDisplayRecord>([
   { key: 'latency', label: '延迟', kind: 'numeric', size: 'lg' },
   { key: 'createdAtDisplay', label: '时间', kind: 'datetime' },
   { key: 'clientIp', label: 'IP', kind: 'custom', size: '2xl' },
-  { key: 'userAgent', label: 'User-Agent', kind: 'text', size: '3xl' },
+  { key: 'userAgent', label: 'User-Agent', kind: 'custom', size: '4xl' },
   { key: 'actions', label: '操作', kind: 'actions', size: 'sm' },
 ])
 

release/version.yaml

@@ -1 +1 @@
-version: "3.2.7"
+version: "3.2.8"