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 方法调用
This commit is contained in:
IanShaw
@@ -326,7 +326,12 @@
|
||||
<label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ t('admin.settings.site.siteName') }}
|
||||
</label>
|
||||
<input v-model="form.site_name" type="text" class="input" placeholder="Sub2API" />
|
||||
<input
|
||||
v-model="form.site_name"
|
||||
type="text"
|
||||
class="input"
|
||||
:placeholder="t('admin.settings.site.siteNamePlaceholder')"
|
||||
/>
|
||||
<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.settings.site.siteNameHint') }}
|
||||
</p>
|
||||
@@ -339,7 +344,7 @@
|
||||
v-model="form.site_subtitle"
|
||||
type="text"
|
||||
class="input"
|
||||
placeholder="Subscription to API Conversion Platform"
|
||||
:placeholder="t('admin.settings.site.siteSubtitlePlaceholder')"
|
||||
/>
|
||||
<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.settings.site.siteSubtitleHint') }}
|
||||
@@ -356,7 +361,7 @@
|
||||
v-model="form.api_base_url"
|
||||
type="text"
|
||||
class="input font-mono text-sm"
|
||||
placeholder="https://api.example.com"
|
||||
:placeholder="t('admin.settings.site.apiBaseUrlPlaceholder')"
|
||||
/>
|
||||
<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.settings.site.apiBaseUrlHint') }}
|
||||
@@ -388,7 +393,7 @@
|
||||
v-model="form.doc_url"
|
||||
type="url"
|
||||
class="input font-mono text-sm"
|
||||
placeholder="https://docs.example.com"
|
||||
:placeholder="t('admin.settings.site.docUrlPlaceholder')"
|
||||
/>
|
||||
<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.settings.site.docUrlHint') }}
|
||||
@@ -537,7 +542,7 @@
|
||||
v-model="form.smtp_host"
|
||||
type="text"
|
||||
class="input"
|
||||
placeholder="smtp.gmail.com"
|
||||
:placeholder="t('admin.settings.smtp.hostPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -550,7 +555,7 @@
|
||||
min="1"
|
||||
max="65535"
|
||||
class="input"
|
||||
placeholder="587"
|
||||
:placeholder="t('admin.settings.smtp.portPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -561,7 +566,7 @@
|
||||
v-model="form.smtp_username"
|
||||
type="text"
|
||||
class="input"
|
||||
placeholder="your-email@gmail.com"
|
||||
:placeholder="t('admin.settings.smtp.usernamePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -572,7 +577,7 @@
|
||||
v-model="form.smtp_password"
|
||||
type="password"
|
||||
class="input"
|
||||
placeholder="********"
|
||||
:placeholder="t('admin.settings.smtp.passwordPlaceholder')"
|
||||
/>
|
||||
<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ t('admin.settings.smtp.passwordHint') }}
|
||||
@@ -586,7 +591,7 @@
|
||||
v-model="form.smtp_from_email"
|
||||
type="email"
|
||||
class="input"
|
||||
placeholder="noreply@example.com"
|
||||
:placeholder="t('admin.settings.smtp.fromEmailPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -597,7 +602,7 @@
|
||||
v-model="form.smtp_from_name"
|
||||
type="text"
|
||||
class="input"
|
||||
placeholder="Sub2API"
|
||||
:placeholder="t('admin.settings.smtp.fromNamePlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -639,7 +644,7 @@
|
||||
v-model="testEmailAddress"
|
||||
type="email"
|
||||
class="input"
|
||||
placeholder="test@example.com"
|
||||
:placeholder="t('admin.settings.testEmail.recipientEmailPlaceholder')"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user