oadmin/sub2api
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 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 方法调用
This commit is contained in:
IanShaw
2025-12-27 10:50:25 +08:00
committed by GitHub
parent cf8a64528c
commit 254f12543c
43 changed files with 1673 additions and 692 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/src/views/setup/SetupWizardView.vue
View File

@@ -27,8 +27,8 @@
/>
</svg>
</div>
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Sub2API Setup</h1>
<p class="mt-2 text-gray-500 dark:text-dark-400">Configure your Sub2API instance</p>
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ t('setup.title') }}</h1>
<p class="mt-2 text-gray-500 dark:text-dark-400">{{ t('setup.description') }}</p>
</div>
<!-- Progress Steps -->
@@ -84,7 +84,7 @@
<div v-if="currentStep === 0" class="space-y-6">
<div class="mb-6 text-center">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">
Database Configuration
{{ t('setup.database.title') }}
</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
Connect to your PostgreSQL database
@@ -93,7 +93,7 @@
<div class="grid grid-cols-2 gap-4">
<div>
<label class="input-label">Host</label>
<label class="input-label">{{ t('setup.database.host') }}</label>
<input
v-model="formData.database.host"
type="text"
@@ -102,7 +102,7 @@
/>
</div>
<div>
<label class="input-label">Port</label>
<label class="input-label">{{ t('setup.database.port') }}</label>
<input
v-model.number="formData.database.port"
type="number"
@@ -114,7 +114,7 @@
<div class="grid grid-cols-2 gap-4">
<div>
<label class="input-label">Username</label>
<label class="input-label">{{ t('setup.database.username') }}</label>
<input
v-model="formData.database.user"
type="text"
@@ -123,7 +123,7 @@
/>
</div>
<div>
<label class="input-label">Password</label>
<label class="input-label">{{ t('setup.database.password') }}</label>
<input
v-model="formData.database.password"
type="password"
@@ -135,7 +135,7 @@
<div class="grid grid-cols-2 gap-4">
<div>
<label class="input-label">Database Name</label>
<label class="input-label">{{ t('setup.database.databaseName') }}</label>
<input
v-model="formData.database.dbname"
type="text"
@@ -144,12 +144,12 @@
/>
</div>
<div>
<label class="input-label">SSL Mode</label>
<label class="input-label">{{ t('setup.database.sslMode') }}</label>
<select v-model="formData.database.sslmode" class="input">
<option value="disable">Disable</option>
<option value="require">Require</option>
<option value="verify-ca">Verify CA</option>
<option value="verify-full">Verify Full</option>
<option value="disable">{{ t('setup.database.ssl.disable') }}</option>
<option value="require">{{ t('setup.database.ssl.require') }}</option>
<option value="verify-ca">{{ t('setup.database.ssl.verifyCa') }}</option>
<option value="verify-full">{{ t('setup.database.ssl.verifyFull') }}</option>
</select>
</div>
</div>
@@ -198,7 +198,9 @@
<!-- Step 2: Redis -->
<div v-if="currentStep === 1" class="space-y-6">
<div class="mb-6 text-center">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Redis Configuration</h2>
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">
{{ t('setup.redis.title') }}
</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
Connect to your Redis server
</p>
@@ -206,7 +208,7 @@
<div class="grid grid-cols-2 gap-4">
<div>
<label class="input-label">Host</label>
<label class="input-label">{{ t('setup.redis.host') }}</label>
<input
v-model="formData.redis.host"
type="text"
@@ -215,7 +217,7 @@
/>
</div>
<div>
<label class="input-label">Port</label>
<label class="input-label">{{ t('setup.redis.port') }}</label>
<input
v-model.number="formData.redis.port"
type="number"
@@ -227,7 +229,7 @@
<div class="grid grid-cols-2 gap-4">
<div>
<label class="input-label">Password (optional)</label>
<label class="input-label">{{ t('setup.redis.password') }}</label>
<input
v-model="formData.redis.password"
type="password"
@@ -236,7 +238,7 @@
/>
</div>
<div>
<label class="input-label">Database</label>
<label class="input-label">{{ t('setup.redis.database') }}</label>
<input
v-model.number="formData.redis.db"
type="number"
@@ -294,14 +296,16 @@
<!-- Step 3: Admin -->
<div v-if="currentStep === 2" class="space-y-6">
<div class="mb-6 text-center">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Admin Account</h2>
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">
{{ t('setup.admin.title') }}
</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
Create your administrator account
</p>
</div>
<div>
<label class="input-label">Email</label>
<label class="input-label">{{ t('setup.admin.email') }}</label>
<input
v-model="formData.admin.email"
type="email"
@@ -311,7 +315,7 @@
</div>
<div>
<label class="input-label">Password</label>
<label class="input-label">{{ t('setup.admin.password') }}</label>
<input
v-model="formData.admin.password"
type="password"
@@ -321,7 +325,7 @@
</div>
<div>
<label class="input-label">Confirm Password</label>
<label class="input-label">{{ t('setup.admin.confirmPassword') }}</label>
<input
v-model="confirmPassword"
type="password"
@@ -340,7 +344,9 @@
<!-- Step 4: Complete -->
<div v-if="currentStep === 3" class="space-y-6">
<div class="mb-6 text-center">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Ready to Install</h2>
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">
{{ t('setup.ready.title') }}
</h2>
<p class="mt-1 text-sm text-gray-500 dark:text-dark-400">
Review your configuration and complete setup
</p>
@@ -348,7 +354,9 @@
<div class="space-y-4">
<div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
<h3 class="mb-2 text-sm font-medium text-gray-500 dark:text-dark-400">Database</h3>
<h3 class="mb-2 text-sm font-medium text-gray-500 dark:text-dark-400">
{{ t('setup.ready.database') }}
</h3>
<p class="text-gray-900 dark:text-white">
{{ formData.database.user }}@{{ formData.database.host }}:{{
formData.database.port
@@ -357,14 +365,18 @@
</div>
<div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
<h3 class="mb-2 text-sm font-medium text-gray-500 dark:text-dark-400">Redis</h3>
<h3 class="mb-2 text-sm font-medium text-gray-500 dark:text-dark-400">
{{ t('setup.ready.redis') }}
</h3>
<p class="text-gray-900 dark:text-white">
{{ formData.redis.host }}:{{ formData.redis.port }}
</p>
</div>
<div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
<h3 class="mb-2 text-sm font-medium text-gray-500 dark:text-dark-400">Admin Email</h3>
<h3 class="mb-2 text-sm font-medium text-gray-500 dark:text-dark-400">
{{ t('setup.ready.adminEmail') }}
</h3>
<p class="text-gray-900 dark:text-white">{{ formData.admin.email }}</p>
</div>
</div>
@@ -526,8 +538,11 @@
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { testDatabase, testRedis, install, type InstallRequest } from '@/api/setup'
const { t } = useI18n()
const steps = [
{ id: 'database', title: 'Database' },
{ id: 'redis', title: 'Redis' },