mirror of
https://gitee.com/wanwujie/sub2api
synced 2026-04-03 15:02:13 +08:00
* 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 方法调用
144 lines
4.0 KiB
TypeScript
144 lines
4.0 KiB
TypeScript
/**
|
|
* 格式化工具函数
|
|
* 参考 CRS 项目的 format.js 实现
|
|
*/
|
|
|
|
/**
|
|
* 格式化相对时间
|
|
* @param date 日期字符串或 Date 对象
|
|
* @returns 相对时间字符串,如 "5m ago", "2h ago", "3d ago"
|
|
*/
|
|
export function formatRelativeTime(date: string | Date | null | undefined): string {
|
|
if (!date) return 'Never'
|
|
|
|
const now = new Date()
|
|
const past = new Date(date)
|
|
const diffMs = now.getTime() - past.getTime()
|
|
|
|
// 处理未来时间或无效日期
|
|
if (diffMs < 0 || isNaN(diffMs)) return 'Never'
|
|
|
|
const diffSecs = Math.floor(diffMs / 1000)
|
|
const diffMins = Math.floor(diffSecs / 60)
|
|
const diffHours = Math.floor(diffMins / 60)
|
|
const diffDays = Math.floor(diffHours / 24)
|
|
|
|
if (diffDays > 0) return `${diffDays}d ago`
|
|
if (diffHours > 0) return `${diffHours}h ago`
|
|
if (diffMins > 0) return `${diffMins}m ago`
|
|
return 'Just now'
|
|
}
|
|
|
|
/**
|
|
* 格式化数字(支持 K/M/B 单位)
|
|
* @param num 数字
|
|
* @returns 格式化后的字符串,如 "1.2K", "3.5M"
|
|
*/
|
|
export function formatNumber(num: number | null | undefined): string {
|
|
if (num === null || num === undefined) return '0'
|
|
|
|
const absNum = Math.abs(num)
|
|
|
|
if (absNum >= 1e9) {
|
|
return (num / 1e9).toFixed(2) + 'B'
|
|
} else if (absNum >= 1e6) {
|
|
return (num / 1e6).toFixed(2) + 'M'
|
|
} else if (absNum >= 1e3) {
|
|
return (num / 1e3).toFixed(1) + 'K'
|
|
}
|
|
|
|
return num.toLocaleString()
|
|
}
|
|
|
|
/**
|
|
* 格式化货币金额
|
|
* @param amount 金额
|
|
* @returns 格式化后的字符串,如 "$1.25" 或 "$0.000123"
|
|
*/
|
|
export function formatCurrency(amount: number | null | undefined): string {
|
|
if (amount === null || amount === undefined) return '$0.00'
|
|
|
|
// 小于 0.01 时显示更多小数位
|
|
if (amount > 0 && amount < 0.01) {
|
|
return '$' + amount.toFixed(6)
|
|
}
|
|
|
|
return '$' + amount.toFixed(2)
|
|
}
|
|
|
|
/**
|
|
* 格式化字节大小
|
|
* @param bytes 字节数
|
|
* @param decimals 小数位数
|
|
* @returns 格式化后的字符串,如 "1.5 MB"
|
|
*/
|
|
export function formatBytes(bytes: number, decimals: number = 2): string {
|
|
if (bytes === 0) return '0 Bytes'
|
|
|
|
const k = 1024
|
|
const dm = decimals < 0 ? 0 : decimals
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
|
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
|
|
}
|
|
|
|
/**
|
|
* 格式化日期
|
|
* @param date 日期字符串或 Date 对象
|
|
* @param format 格式字符串,支持 YYYY, MM, DD, HH, mm, ss
|
|
* @returns 格式化后的日期字符串
|
|
*/
|
|
export function formatDate(
|
|
date: string | Date | null | undefined,
|
|
format: string = 'YYYY-MM-DD HH:mm:ss'
|
|
): string {
|
|
if (!date) return ''
|
|
|
|
const d = new Date(date)
|
|
if (isNaN(d.getTime())) return ''
|
|
|
|
const year = d.getFullYear()
|
|
const month = String(d.getMonth() + 1).padStart(2, '0')
|
|
const day = String(d.getDate()).padStart(2, '0')
|
|
const hours = String(d.getHours()).padStart(2, '0')
|
|
const minutes = String(d.getMinutes()).padStart(2, '0')
|
|
const seconds = String(d.getSeconds()).padStart(2, '0')
|
|
|
|
return format
|
|
.replace('YYYY', String(year))
|
|
.replace('MM', month)
|
|
.replace('DD', day)
|
|
.replace('HH', hours)
|
|
.replace('mm', minutes)
|
|
.replace('ss', seconds)
|
|
}
|
|
|
|
/**
|
|
* 格式化日期(只显示日期部分)
|
|
* @param date 日期字符串或 Date 对象
|
|
* @returns 格式化后的日期字符串,格式为 YYYY-MM-DD
|
|
*/
|
|
export function formatDateOnly(date: string | Date | null | undefined): string {
|
|
return formatDate(date, 'YYYY-MM-DD')
|
|
}
|
|
|
|
/**
|
|
* 格式化日期时间(完整格式)
|
|
* @param date 日期字符串或 Date 对象
|
|
* @returns 格式化后的日期时间字符串,格式为 YYYY-MM-DD HH:mm:ss
|
|
*/
|
|
export function formatDateTime(date: string | Date | null | undefined): string {
|
|
return formatDate(date, 'YYYY-MM-DD HH:mm:ss')
|
|
}
|
|
|
|
/**
|
|
* 格式化时间(只显示时分)
|
|
* @param date 日期字符串或 Date 对象
|
|
* @returns 格式化后的时间字符串,格式为 HH:mm
|
|
*/
|
|
export function formatTime(date: string | Date | null | undefined): string {
|
|
return formatDate(date, 'HH:mm')
|
|
}
|