mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-22 16:43:35 +00:00
Merge PR #541: 添加账户订阅到期时间管理功能 + 修复核心过期检查逻辑
## 原PR功能 - ✅ 后端添加subscriptionExpiresAt字段支持 - ✅ 前端提供到期时间设置界面(快捷选项 + 自定义日期) - ✅ 账户列表显示到期状态(已过期🔴/即将过期🟠/永不过期⚪) - ✅ 新增AccountExpiryEditModal.vue编辑弹窗组件 - ✅ 支持创建和更新账户时设置到期时间 - ✅ 完整支持暗黑模式 ## 🔧 关键修复(本次提交) 原PR缺少核心过期检查逻辑,过期账户仍会被调度使用。本次合并时添加了: 1. **新增isAccountNotExpired()方法**: - 检查账户subscriptionExpiresAt字段 - 未设置过期时间视为永不过期 - 添加debug日志记录过期账户 2. **在selectAvailableAccount()中添加过期检查**: - 过滤逻辑中集成this.isAccountNotExpired(account) - 确保过期账户不被选择 3. **在selectAccountForApiKey()中添加过期检查**: - 绑定账户检查中添加过期验证 - 共享池过滤中添加过期验证 ## 🗑️ 清理工作 - 移除了不应提交的account_expire_feature.md评审文档(756行) ## 技术细节 - API层使用expiresAt,存储层使用subscriptionExpiresAt - 存储格式:ISO 8601 (UTC) - 空值表示:null表示永不过期 - 时区处理:后端UTC,前端自动转换本地时区 作者: mrlitong (原PR) + Claude Code (修复) PR: https://github.com/Wei-Shaw/claude-relay-service/pull/541
This commit is contained in:
416
web/admin-spa/src/components/accounts/AccountExpiryEditModal.vue
Normal file
416
web/admin-spa/src/components/accounts/AccountExpiryEditModal.vue
Normal file
@@ -0,0 +1,416 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="show" class="modal fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<!-- 背景遮罩 -->
|
||||
<div
|
||||
class="fixed inset-0 bg-gray-900 bg-opacity-50 backdrop-blur-sm"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
|
||||
<!-- 模态框内容 -->
|
||||
<div class="modal-content relative mx-auto w-full max-w-lg p-8">
|
||||
<!-- 头部 -->
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-amber-500 to-orange-600"
|
||||
>
|
||||
<i class="fas fa-clock text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">修改到期时间</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
为 "{{ account.name || 'Account' }}" 设置新的到期时间
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="text-gray-400 transition-colors hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<i class="fas fa-times text-xl" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- 当前状态显示 -->
|
||||
<div
|
||||
class="rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-gray-100 p-4 dark:border-gray-600 dark:from-gray-700 dark:to-gray-800"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="mb-1 text-xs font-medium text-gray-600 dark:text-gray-400">当前状态</p>
|
||||
<p class="text-sm font-semibold text-gray-800 dark:text-gray-200">
|
||||
<!-- 已设置过期时间 -->
|
||||
<template v-if="account.expiresAt">
|
||||
{{ formatFullExpireDate(account.expiresAt) }}
|
||||
<span
|
||||
v-if="getExpiryStatus(account.expiresAt)"
|
||||
class="ml-2 text-xs font-normal"
|
||||
:class="getExpiryStatus(account.expiresAt).class"
|
||||
>
|
||||
({{ getExpiryStatus(account.expiresAt).text }})
|
||||
</span>
|
||||
</template>
|
||||
<!-- 永不过期 -->
|
||||
<template v-else>
|
||||
<i class="fas fa-infinity mr-1 text-gray-500" />
|
||||
永不过期
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex h-12 w-12 items-center justify-center rounded-lg bg-white shadow-sm dark:bg-gray-700"
|
||||
>
|
||||
<i
|
||||
:class="[
|
||||
'fas fa-hourglass-half text-lg',
|
||||
account.expiresAt && isExpired(account.expiresAt)
|
||||
? 'text-red-500'
|
||||
: 'text-gray-400'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快捷选项 -->
|
||||
<div>
|
||||
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
>选择新的期限</label
|
||||
>
|
||||
<div class="mb-3 grid grid-cols-3 gap-2">
|
||||
<button
|
||||
v-for="option in quickOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'rounded-lg px-3 py-2 text-sm font-medium transition-all',
|
||||
localForm.expireDuration === option.value
|
||||
? 'bg-blue-500 text-white shadow-md'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
|
||||
]"
|
||||
@click="selectQuickOption(option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
<button
|
||||
:class="[
|
||||
'rounded-lg px-3 py-2 text-sm font-medium transition-all',
|
||||
localForm.expireDuration === 'custom'
|
||||
? 'bg-blue-500 text-white shadow-md'
|
||||
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
|
||||
]"
|
||||
@click="selectQuickOption('custom')"
|
||||
>
|
||||
<i class="fas fa-calendar-alt mr-1" />
|
||||
自定义
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 自定义日期选择 -->
|
||||
<div v-if="localForm.expireDuration === 'custom'" class="animate-fadeIn">
|
||||
<label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
>选择日期和时间</label
|
||||
>
|
||||
<input
|
||||
v-model="localForm.customExpireDate"
|
||||
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
|
||||
:min="minDateTime"
|
||||
type="datetime-local"
|
||||
@change="updateCustomExpiryPreview"
|
||||
/>
|
||||
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
选择一个未来的日期和时间作为到期时间
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 预览新的过期时间 -->
|
||||
<div
|
||||
v-if="localForm.expiresAt !== account.expiresAt"
|
||||
class="rounded-lg border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-4 dark:border-blue-700 dark:from-blue-900/20 dark:to-indigo-900/20"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="mb-1 text-xs font-medium text-blue-700 dark:text-blue-400">
|
||||
<i class="fas fa-arrow-right mr-1" />
|
||||
新的到期时间
|
||||
</p>
|
||||
<p class="text-sm font-semibold text-blue-900 dark:text-blue-200">
|
||||
<template v-if="localForm.expiresAt">
|
||||
{{ formatFullExpireDate(localForm.expiresAt) }}
|
||||
<span
|
||||
v-if="getExpiryStatus(localForm.expiresAt)"
|
||||
class="ml-2 text-xs font-normal"
|
||||
:class="getExpiryStatus(localForm.expiresAt).class"
|
||||
>
|
||||
({{ getExpiryStatus(localForm.expiresAt).text }})
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<i class="fas fa-infinity mr-1" />
|
||||
永不过期
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="flex h-12 w-12 items-center justify-center rounded-lg bg-white shadow-sm dark:bg-gray-700"
|
||||
>
|
||||
<i class="fas fa-check text-lg text-green-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="flex gap-3 pt-2">
|
||||
<button
|
||||
class="flex-1 rounded-lg bg-gray-100 px-4 py-2.5 font-semibold text-gray-700 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary flex-1 px-4 py-2.5 font-semibold"
|
||||
:disabled="saving || localForm.expiresAt === account.expiresAt"
|
||||
@click="handleSave"
|
||||
>
|
||||
<div v-if="saving" class="loading-spinner mr-2" />
|
||||
<i v-else class="fas fa-save mr-2" />
|
||||
{{ saving ? '保存中...' : '保存更改' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
account: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close', 'save'])
|
||||
|
||||
const saving = ref(false)
|
||||
|
||||
// 表单数据
|
||||
const localForm = reactive({
|
||||
expireDuration: '',
|
||||
customExpireDate: '',
|
||||
expiresAt: null
|
||||
})
|
||||
|
||||
// 快捷选项
|
||||
const quickOptions = [
|
||||
{ value: '', label: '永不过期' },
|
||||
{ value: '30d', label: '30 天' },
|
||||
{ value: '90d', label: '90 天' },
|
||||
{ value: '180d', label: '180 天' },
|
||||
{ value: '365d', label: '1 年' },
|
||||
{ value: '730d', label: '2 年' }
|
||||
]
|
||||
|
||||
// 计算最小日期时间
|
||||
const minDateTime = computed(() => {
|
||||
const now = new Date()
|
||||
now.setMinutes(now.getMinutes() + 1)
|
||||
return now.toISOString().slice(0, 16)
|
||||
})
|
||||
|
||||
// 监听显示状态,初始化表单
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
initializeForm()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 监听 account 变化,重新初始化
|
||||
watch(
|
||||
() => props.account?.id,
|
||||
(newId) => {
|
||||
if (newId && props.show) {
|
||||
initializeForm()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 初始化表单
|
||||
const initializeForm = () => {
|
||||
saving.value = false
|
||||
|
||||
if (props.account.expiresAt) {
|
||||
localForm.expireDuration = 'custom'
|
||||
localForm.customExpireDate = new Date(props.account.expiresAt).toISOString().slice(0, 16)
|
||||
localForm.expiresAt = props.account.expiresAt
|
||||
} else {
|
||||
localForm.expireDuration = ''
|
||||
localForm.customExpireDate = ''
|
||||
localForm.expiresAt = null
|
||||
}
|
||||
}
|
||||
|
||||
// 选择快捷选项
|
||||
const selectQuickOption = (value) => {
|
||||
localForm.expireDuration = value
|
||||
|
||||
if (!value) {
|
||||
localForm.expiresAt = null
|
||||
return
|
||||
}
|
||||
|
||||
if (value === 'custom') {
|
||||
return
|
||||
}
|
||||
|
||||
const now = new Date()
|
||||
const match = value.match(/(\d+)([dhmy])/)
|
||||
|
||||
if (match) {
|
||||
const [, num, unit] = match
|
||||
const amount = parseInt(num)
|
||||
|
||||
switch (unit) {
|
||||
case 'd':
|
||||
now.setDate(now.getDate() + amount)
|
||||
break
|
||||
case 'h':
|
||||
now.setHours(now.getHours() + amount)
|
||||
break
|
||||
case 'm':
|
||||
now.setMonth(now.getMonth() + amount)
|
||||
break
|
||||
case 'y':
|
||||
now.setFullYear(now.getFullYear() + amount)
|
||||
break
|
||||
}
|
||||
|
||||
localForm.expiresAt = now.toISOString()
|
||||
}
|
||||
}
|
||||
|
||||
// 更新自定义过期时间
|
||||
const updateCustomExpiryPreview = () => {
|
||||
if (localForm.customExpireDate) {
|
||||
localForm.expiresAt = new Date(localForm.customExpireDate).toISOString()
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化完整过期日期(包含时分)
|
||||
const formatFullExpireDate = (dateString) => {
|
||||
if (!dateString) return ''
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
// 检查是否已过期
|
||||
const isExpired = (dateString) => {
|
||||
if (!dateString) return false
|
||||
return new Date(dateString) < new Date()
|
||||
}
|
||||
|
||||
// 获取过期状态
|
||||
const getExpiryStatus = (expiresAt) => {
|
||||
if (!expiresAt) return null
|
||||
|
||||
const now = new Date()
|
||||
const expiryDate = new Date(expiresAt)
|
||||
const diffMs = expiryDate - now
|
||||
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24))
|
||||
|
||||
if (diffMs < 0) {
|
||||
return {
|
||||
text: '已过期',
|
||||
class: 'text-red-600'
|
||||
}
|
||||
} else if (diffDays <= 7) {
|
||||
return {
|
||||
text: `${diffDays} 天后过期`,
|
||||
class: 'text-orange-600'
|
||||
}
|
||||
} else if (diffDays <= 30) {
|
||||
return {
|
||||
text: `${diffDays} 天后过期`,
|
||||
class: 'text-yellow-600'
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
text: `${Math.ceil(diffDays / 30)} 个月后过期`,
|
||||
class: 'text-green-600'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 保存
|
||||
const handleSave = () => {
|
||||
saving.value = true
|
||||
emit('save', {
|
||||
accountId: props.account.id,
|
||||
expiresAt: localForm.expiresAt
|
||||
})
|
||||
}
|
||||
|
||||
// 重置保存状态
|
||||
const resetSaving = () => {
|
||||
saving.value = false
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
resetSaving
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 2px solid white;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -641,6 +641,49 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 到期时间 -->
|
||||
<div>
|
||||
<label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
>到期时间 (可选)</label
|
||||
>
|
||||
<div
|
||||
class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<select
|
||||
v-model="form.expireDuration"
|
||||
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
|
||||
@change="updateAccountExpireAt"
|
||||
>
|
||||
<option value="">永不过期</option>
|
||||
<option value="30d">30 天</option>
|
||||
<option value="90d">90 天</option>
|
||||
<option value="180d">180 天</option>
|
||||
<option value="365d">365 天</option>
|
||||
<option value="custom">自定义日期</option>
|
||||
</select>
|
||||
<div v-if="form.expireDuration === 'custom'" class="mt-3">
|
||||
<input
|
||||
v-model="form.customExpireDate"
|
||||
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
|
||||
:min="minDateTime"
|
||||
type="datetime-local"
|
||||
@change="updateAccountCustomExpireAt"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="form.expiresAt" class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<i class="fas fa-calendar-alt mr-1" />
|
||||
将于 {{ formatExpireDate(form.expiresAt) }} 过期
|
||||
</p>
|
||||
<p v-else class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<i class="fas fa-infinity mr-1" />
|
||||
账户永不过期
|
||||
</p>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
设置 Claude Max/Pro 订阅的到期时间,到期后将停止调度此账户
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 分组选择器 -->
|
||||
<div v-if="form.accountType === 'group'">
|
||||
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
@@ -2069,6 +2112,49 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 到期时间 -->
|
||||
<div>
|
||||
<label class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
>到期时间 (可选)</label
|
||||
>
|
||||
<div
|
||||
class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<select
|
||||
v-model="form.expireDuration"
|
||||
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
|
||||
@change="updateAccountExpireAt"
|
||||
>
|
||||
<option value="">永不过期</option>
|
||||
<option value="30d">30 天</option>
|
||||
<option value="90d">90 天</option>
|
||||
<option value="180d">180 天</option>
|
||||
<option value="365d">365 天</option>
|
||||
<option value="custom">自定义日期</option>
|
||||
</select>
|
||||
<div v-if="form.expireDuration === 'custom'" class="mt-3">
|
||||
<input
|
||||
v-model="form.customExpireDate"
|
||||
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200"
|
||||
:min="minDateTime"
|
||||
type="datetime-local"
|
||||
@change="updateAccountCustomExpireAt"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="form.expiresAt" class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<i class="fas fa-calendar-alt mr-1" />
|
||||
将于 {{ formatExpireDate(form.expiresAt) }} 过期
|
||||
</p>
|
||||
<p v-else class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<i class="fas fa-infinity mr-1" />
|
||||
账户永不过期
|
||||
</p>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
设置 Claude Max/Pro 订阅的到期时间,到期后将停止调度此账户
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 分组选择器 -->
|
||||
<div v-if="form.accountType === 'group'">
|
||||
<label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
|
||||
@@ -3352,7 +3438,11 @@ const form = ref({
|
||||
// Azure OpenAI 特定字段
|
||||
azureEndpoint: props.account?.azureEndpoint || '',
|
||||
apiVersion: props.account?.apiVersion || '',
|
||||
deploymentName: props.account?.deploymentName || ''
|
||||
deploymentName: props.account?.deploymentName || '',
|
||||
// 到期时间字段
|
||||
expireDuration: '',
|
||||
customExpireDate: '',
|
||||
expiresAt: props.account?.expiresAt || null
|
||||
})
|
||||
|
||||
// 模型限制配置
|
||||
@@ -3778,6 +3868,7 @@ const handleOAuthSuccess = async (tokenInfo) => {
|
||||
accountType: form.value.accountType,
|
||||
groupId: form.value.accountType === 'group' ? form.value.groupId : undefined,
|
||||
groupIds: form.value.accountType === 'group' ? form.value.groupIds : undefined,
|
||||
expiresAt: form.value.expiresAt || undefined,
|
||||
proxy: proxyPayload
|
||||
}
|
||||
|
||||
@@ -4069,6 +4160,7 @@ const createAccount = async () => {
|
||||
accountType: form.value.accountType,
|
||||
groupId: form.value.accountType === 'group' ? form.value.groupId : undefined,
|
||||
groupIds: form.value.accountType === 'group' ? form.value.groupIds : undefined,
|
||||
expiresAt: form.value.expiresAt || undefined,
|
||||
proxy: proxyPayload
|
||||
}
|
||||
|
||||
@@ -4328,6 +4420,7 @@ const updateAccount = async () => {
|
||||
accountType: form.value.accountType,
|
||||
groupId: form.value.accountType === 'group' ? form.value.groupId : undefined,
|
||||
groupIds: form.value.accountType === 'group' ? form.value.groupIds : undefined,
|
||||
expiresAt: form.value.expiresAt || undefined,
|
||||
proxy: proxyPayload
|
||||
}
|
||||
|
||||
@@ -5171,6 +5264,61 @@ const handleUnifiedClientIdChange = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 到期时间相关方法
|
||||
// 计算最小日期时间
|
||||
const minDateTime = computed(() => {
|
||||
const now = new Date()
|
||||
now.setMinutes(now.getMinutes() + 1)
|
||||
return now.toISOString().slice(0, 16)
|
||||
})
|
||||
|
||||
// 更新账户过期时间
|
||||
const updateAccountExpireAt = () => {
|
||||
if (!form.value.expireDuration) {
|
||||
form.value.expiresAt = null
|
||||
return
|
||||
}
|
||||
|
||||
if (form.value.expireDuration === 'custom') {
|
||||
return
|
||||
}
|
||||
|
||||
const now = new Date()
|
||||
const duration = form.value.expireDuration
|
||||
const match = duration.match(/(\d+)([d])/)
|
||||
|
||||
if (match) {
|
||||
const [, value, unit] = match
|
||||
const num = parseInt(value)
|
||||
|
||||
if (unit === 'd') {
|
||||
now.setDate(now.getDate() + num)
|
||||
}
|
||||
|
||||
form.value.expiresAt = now.toISOString()
|
||||
}
|
||||
}
|
||||
|
||||
// 更新自定义过期时间
|
||||
const updateAccountCustomExpireAt = () => {
|
||||
if (form.value.customExpireDate) {
|
||||
form.value.expiresAt = new Date(form.value.customExpireDate).toISOString()
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化过期日期
|
||||
const formatExpireDate = (dateString) => {
|
||||
if (!dateString) return ''
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
// 组件挂载时获取统一 User-Agent 信息
|
||||
onMounted(() => {
|
||||
// 初始化平台分组
|
||||
|
||||
@@ -206,6 +206,21 @@
|
||||
/>
|
||||
<i v-else class="fas fa-sort ml-1 text-gray-400" />
|
||||
</th>
|
||||
<th
|
||||
class="w-[12%] min-w-[110px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
@click="sortAccounts('expiresAt')"
|
||||
>
|
||||
到期时间
|
||||
<i
|
||||
v-if="accountsSortBy === 'expiresAt'"
|
||||
:class="[
|
||||
'fas',
|
||||
accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down',
|
||||
'ml-1'
|
||||
]"
|
||||
/>
|
||||
<i v-else class="fas fa-sort ml-1 text-gray-400" />
|
||||
</th>
|
||||
<th
|
||||
class="w-[12%] min-w-[100px] cursor-pointer px-3 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
@click="sortAccounts('status')"
|
||||
@@ -566,6 +581,49 @@
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<!-- 已设置过期时间 -->
|
||||
<span v-if="account.expiresAt">
|
||||
<span
|
||||
v-if="isExpired(account.expiresAt)"
|
||||
class="inline-flex cursor-pointer items-center text-red-600 hover:underline"
|
||||
style="font-size: 13px"
|
||||
@click.stop="startEditAccountExpiry(account)"
|
||||
>
|
||||
<i class="fas fa-exclamation-circle mr-1 text-xs" />
|
||||
已过期
|
||||
</span>
|
||||
<span
|
||||
v-else-if="isExpiringSoon(account.expiresAt)"
|
||||
class="inline-flex cursor-pointer items-center text-orange-600 hover:underline"
|
||||
style="font-size: 13px"
|
||||
@click.stop="startEditAccountExpiry(account)"
|
||||
>
|
||||
<i class="fas fa-clock mr-1 text-xs" />
|
||||
{{ formatExpireDate(account.expiresAt) }}
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="cursor-pointer text-gray-600 hover:underline dark:text-gray-400"
|
||||
style="font-size: 13px"
|
||||
@click.stop="startEditAccountExpiry(account)"
|
||||
>
|
||||
{{ formatExpireDate(account.expiresAt) }}
|
||||
</span>
|
||||
</span>
|
||||
<!-- 永不过期 -->
|
||||
<span
|
||||
v-else
|
||||
class="inline-flex cursor-pointer items-center text-gray-400 hover:underline dark:text-gray-500"
|
||||
style="font-size: 13px"
|
||||
@click.stop="startEditAccountExpiry(account)"
|
||||
>
|
||||
<i class="fas fa-infinity mr-1 text-xs" />
|
||||
永不过期
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-3 py-4">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span
|
||||
@@ -1653,6 +1711,15 @@
|
||||
:summary="accountUsageSummary"
|
||||
@close="closeAccountUsageModal"
|
||||
/>
|
||||
|
||||
<!-- 账户过期时间编辑弹窗 -->
|
||||
<AccountExpiryEditModal
|
||||
ref="expiryEditModalRef"
|
||||
:account="editingExpiryAccount || { id: null, expiresAt: null, name: '' }"
|
||||
:show="!!editingExpiryAccount"
|
||||
@close="closeAccountExpiryEdit"
|
||||
@save="handleSaveAccountExpiry"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1664,6 +1731,7 @@ import { useConfirm } from '@/composables/useConfirm'
|
||||
import AccountForm from '@/components/accounts/AccountForm.vue'
|
||||
import CcrAccountForm from '@/components/accounts/CcrAccountForm.vue'
|
||||
import AccountUsageDetailModal from '@/components/accounts/AccountUsageDetailModal.vue'
|
||||
import AccountExpiryEditModal from '@/components/accounts/AccountExpiryEditModal.vue'
|
||||
import ConfirmModal from '@/components/common/ConfirmModal.vue'
|
||||
import CustomDropdown from '@/components/common/CustomDropdown.vue'
|
||||
|
||||
@@ -1720,6 +1788,10 @@ const supportedUsagePlatforms = [
|
||||
'droid'
|
||||
]
|
||||
|
||||
// 过期时间编辑弹窗状态
|
||||
const editingExpiryAccount = ref(null)
|
||||
const expiryEditModalRef = ref(null)
|
||||
|
||||
// 缓存状态标志
|
||||
const apiKeysLoaded = ref(false)
|
||||
const groupsLoaded = ref(false)
|
||||
@@ -3618,6 +3690,70 @@ watch(paginatedAccounts, () => {
|
||||
watch(accounts, () => {
|
||||
cleanupSelectedAccounts()
|
||||
})
|
||||
// 到期时间相关方法
|
||||
const formatExpireDate = (dateString) => {
|
||||
if (!dateString) return ''
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
const isExpired = (expiresAt) => {
|
||||
if (!expiresAt) return false
|
||||
return new Date(expiresAt) < new Date()
|
||||
}
|
||||
|
||||
const isExpiringSoon = (expiresAt) => {
|
||||
if (!expiresAt) return false
|
||||
const now = new Date()
|
||||
const expireDate = new Date(expiresAt)
|
||||
const daysUntilExpire = (expireDate - now) / (1000 * 60 * 60 * 24)
|
||||
return daysUntilExpire > 0 && daysUntilExpire <= 7
|
||||
}
|
||||
|
||||
// 开始编辑账户过期时间
|
||||
const startEditAccountExpiry = (account) => {
|
||||
editingExpiryAccount.value = account
|
||||
}
|
||||
|
||||
// 关闭账户过期时间编辑
|
||||
const closeAccountExpiryEdit = () => {
|
||||
editingExpiryAccount.value = null
|
||||
}
|
||||
|
||||
// 保存账户过期时间
|
||||
const handleSaveAccountExpiry = async ({ accountId, expiresAt }) => {
|
||||
try {
|
||||
const data = await apiClient.put(`/admin/claude-accounts/${accountId}`, {
|
||||
expiresAt: expiresAt || null
|
||||
})
|
||||
|
||||
if (data.success) {
|
||||
showToast('账户到期时间已更新', 'success')
|
||||
// 更新本地数据
|
||||
const account = accounts.value.find((acc) => acc.id === accountId)
|
||||
if (account) {
|
||||
account.expiresAt = expiresAt || null
|
||||
}
|
||||
closeAccountExpiryEdit()
|
||||
} else {
|
||||
showToast(data.message || '更新失败', 'error')
|
||||
// 重置保存状态
|
||||
if (expiryEditModalRef.value) {
|
||||
expiryEditModalRef.value.resetSaving()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
showToast('更新失败', 'error')
|
||||
// 重置保存状态
|
||||
if (expiryEditModalRef.value) {
|
||||
expiryEditModalRef.value.resetSaving()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 首次加载时强制刷新所有数据
|
||||
|
||||
Reference in New Issue
Block a user