Merge branch 'Wei-Shaw:main' into main

web/admin-spa/src/components/accounts/AccountExpiryEditModal.vue

@@ -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>

web/admin-spa/src/components/accounts/AccountForm.vue

@@ -641,6 +641,49 @@
               </p>
             </div>
 
+            <!-- 到期时间 - 仅在创建账户时显示，编辑时使用独立的过期时间编辑弹窗 -->
+            <div v-if="!isEdit">
+              <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 v-if="!isEdit">
+            <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,24 @@ const form = ref({
   // Azure OpenAI 特定字段
   azureEndpoint: props.account?.azureEndpoint || '',
   apiVersion: props.account?.apiVersion || '',
-  deploymentName: props.account?.deploymentName || ''
+  deploymentName: props.account?.deploymentName || '',
+  // 到期时间字段
+  expireDuration: (() => {
+    // 编辑时根据expiresAt初始化expireDuration
+    if (props.account?.expiresAt) {
+      return 'custom' // 如果有过期时间，默认显示为自定义
+    }
+    return ''
+  })(),
+  customExpireDate: (() => {
+    // 编辑时根据expiresAt初始化customExpireDate
+    if (props.account?.expiresAt) {
+      // 转换ISO时间为datetime-local格式 (YYYY-MM-DDTHH:mm)
+      return new Date(props.account.expiresAt).toISOString().slice(0, 16)
+    }
+    return ''
+  })(),
+  expiresAt: props.account?.expiresAt || null
 })
 
 // 模型限制配置
@@ -3370,7 +3473,8 @@ const commonModels = [
   { value: 'claude-sonnet-4-5-20250929', label: 'Claude Sonnet 4.5', color: 'indigo' },
   { value: 'claude-3-5-haiku-20241022', label: 'Claude 3.5 Haiku', color: 'green' },
   { value: 'claude-opus-4-20250514', label: 'Claude Opus 4', color: 'purple' },
-  { value: 'claude-opus-4-1-20250805', label: 'Claude Opus 4.1', color: 'purple' }
+  { value: 'claude-opus-4-1-20250805', label: 'Claude Opus 4.1', color: 'purple' },
+  { value: 'deepseek-chat', label: 'DeepSeek Chat', color: 'cyan' }
 ]
 
 // 模型映射表数据
@@ -3385,25 +3489,31 @@ const initModelMappings = () => {
       !Array.isArray(props.account.supportedModels)
     ) {
       const entries = Object.entries(props.account.supportedModels)
-      modelMappings.value = entries.map(([from, to]) => ({ from, to }))
 
       // 判断是白名单模式还是映射模式
       // 如果所有映射都是"映射到自己"，则视为白名单模式
       const isWhitelist = entries.every(([from, to]) => from === to)
       if (isWhitelist) {
         modelRestrictionMode.value = 'whitelist'
+        // 白名单模式：设置 allowedModels（显示勾选的模型）
         allowedModels.value = entries.map(([from]) => from)
+        // 同时保留 modelMappings（以便用户切换到映射模式时有初始数据）
+        modelMappings.value = entries.map(([from, to]) => ({ from, to }))
       } else {
         modelRestrictionMode.value = 'mapping'
+        // 映射模式：设置 modelMappings（显示映射表）
+        modelMappings.value = entries.map(([from, to]) => ({ from, to }))
+        // 不填充 allowedModels，因为映射模式不使用白名单复选框
       }
     } else if (Array.isArray(props.account.supportedModels)) {
       // 如果是数组格式（旧格式），转换为白名单模式
+      modelRestrictionMode.value = 'whitelist'
+      allowedModels.value = props.account.supportedModels
+      // 同时设置 modelMappings 为自映射
       modelMappings.value = props.account.supportedModels.map((model) => ({
         from: model,
         to: model
       }))
-      modelRestrictionMode.value = 'whitelist'
-      allowedModels.value = props.account.supportedModels
     }
   }
 }
@@ -3771,6 +3881,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
     }
 
@@ -4062,6 +4173,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
     }
 
@@ -4321,6 +4433,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
     }
 
@@ -5164,6 +5277,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(() => {
   // 初始化平台分组

web/admin-spa/src/components/apikeys/NewApiKeyModal.vue

@@ -99,18 +99,28 @@
         </div>
 
         <!-- 操作按钮 -->
-        <div class="flex gap-3">
+        <div class="flex flex-col gap-3 sm:gap-4">
+          <div class="flex flex-col gap-3 sm:flex-row sm:gap-4">
+            <button
+              class="flex w-full items-center justify-center gap-2 rounded-xl border border-blue-200 bg-blue-50 px-5 py-3 text-sm font-semibold text-blue-700 transition-colors hover:border-blue-300 hover:bg-blue-100 dark:border-blue-500/50 dark:bg-blue-500/10 dark:text-blue-200 dark:hover:bg-blue-500/20 sm:flex-1 sm:text-base"
+              @click="copyKeyOnly"
+            >
+              <i class="fas fa-key" />
+              仅复制密钥
+            </button>
+            <button
+              class="btn btn-primary flex w-full items-center justify-center gap-2 px-5 py-3 text-sm font-semibold sm:flex-1 sm:text-base"
+              @click="copyFullConfig"
+            >
+              <i class="fas fa-copy" />
+              复制Claude配置
+            </button>
+          </div>
           <button
-            class="btn btn-primary flex flex-1 items-center justify-center gap-2 px-6 py-3 font-semibold"
-            @click="copyApiKey"
-          >
-            <i class="fas fa-copy" />
-            复制配置信息
-          </button>
-          <button
-            class="rounded-xl border border-gray-300 bg-gray-200 px-6 py-3 font-semibold text-gray-800 transition-colors hover:bg-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+            class="flex w-full items-center justify-center gap-2 rounded-xl border border-gray-300 bg-gray-200 px-5 py-3 text-sm font-semibold text-gray-800 transition-colors hover:border-gray-400 hover:bg-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 sm:text-base"
             @click="handleClose"
           >
+            <i class="fas fa-check-circle" />
             我已保存
           </button>
         </div>
@@ -190,8 +200,33 @@ const getDisplayedApiKey = () => {
   }
 }
 
-// 复制配置信息（环境变量格式）
-const copyApiKey = async () => {
+const droidEndpoint = computed(() => {
+  return getBaseUrlPrefix() + '/droid/claude'
+})
+
+// 通用复制工具，包含降级处理
+const copyTextWithFallback = async (text, successMessage) => {
+  try {
+    await navigator.clipboard.writeText(text)
+    showToast(successMessage, 'success')
+  } catch (error) {
+    const textArea = document.createElement('textarea')
+    textArea.value = text
+    document.body.appendChild(textArea)
+    textArea.select()
+    try {
+      document.execCommand('copy')
+      showToast(successMessage, 'success')
+    } catch (fallbackError) {
+      showToast('复制失败，请手动复制', 'error')
+    } finally {
+      document.body.removeChild(textArea)
+    }
+  }
+}
+
+// 复制完整配置（包含提示信息）
+const copyFullConfig = async () => {
   const key = props.apiKey.apiKey || props.apiKey.key || ''
   if (!key) {
     showToast('API Key 不存在', 'error')
@@ -200,27 +235,22 @@ const copyApiKey = async () => {
 
   // 构建环境变量配置格式
   const configText = `ANTHROPIC_BASE_URL="${currentBaseUrl.value}"
-ANTHROPIC_AUTH_TOKEN="${key}"`
+ANTHROPIC_AUTH_TOKEN="${key}"
 
-  try {
-    await navigator.clipboard.writeText(configText)
-    showToast('配置信息已复制到剪贴板', 'success')
-  } catch (error) {
-    // console.error('Failed to copy:', error)
-    // 降级方案：创建一个临时文本区域
-    const textArea = document.createElement('textarea')
-    textArea.value = configText
-    document.body.appendChild(textArea)
-    textArea.select()
-    try {
-      document.execCommand('copy')
-      showToast('配置信息已复制到剪贴板', 'success')
-    } catch (fallbackError) {
-      showToast('复制失败，请手动复制', 'error')
-    } finally {
-      document.body.removeChild(textArea)
-    }
+# 提示：如需调用 /droid/claude 端点（已在后台添加 Droid 账号），请将 ANTHROPIC_BASE_URL 改为 "${droidEndpoint.value}" 或根据实际环境调整。`
+
+  await copyTextWithFallback(configText, '配置信息已复制到剪贴板')
+}
+
+// 仅复制密钥
+const copyKeyOnly = async () => {
+  const key = props.apiKey.apiKey || props.apiKey.key || ''
+  if (!key) {
+    showToast('API Key 不存在', 'error')
+    return
   }
+
+  await copyTextWithFallback(key, 'API Key 已复制')
 }
 
 // 关闭弹窗（带确认）

web/admin-spa/src/views/AccountsView.vue

@@ -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
@@ -626,19 +684,9 @@
                       >({{ formatRateLimitTime(account.rateLimitStatus.minutesRemaining) }})</span
                     >
                   </span>
-                  <span
-                    v-if="isOpusRateLimited(account)"
-                    class="inline-flex items-center whitespace-nowrap rounded-full bg-orange-100 px-3 py-1 text-xs font-semibold text-orange-800 dark:bg-orange-900/30 dark:text-orange-300"
-                  >
-                    <i class="fas fa-gem mr-1 flex-shrink-0" />
-                    <span class="flex-shrink-0">Opus限流</span>
-                    <span v-if="account.opusRateLimitEndAt" class="ml-1 flex-shrink-0">
-                      ({{ formatOpusLimitEndTime(account.opusRateLimitEndAt) }})
-                    </span>
-                  </span>
                   <span
                     v-if="account.schedulable === false"
-                    class="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700 dark:bg-gray-700 dark:text-gray-300"
+                    class="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700"
                   >
                     <i class="fas fa-pause-circle mr-1" />
                     不可调度
@@ -1663,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>
 
@@ -1674,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'
 
@@ -1730,6 +1788,10 @@ const supportedUsagePlatforms = [
   'droid'
 ]
 
+// 过期时间编辑弹窗状态
+const editingExpiryAccount = ref(null)
+const expiryEditModalRef = ref(null)
+
 // 缓存状态标志
 const apiKeysLoaded = ref(false)
 const groupsLoaded = ref(false)
@@ -2651,54 +2713,6 @@ const formatRateLimitTime = (minutes) => {
   }
 }
 
-// 检查账户是否处于 Opus 限流状态
-const isOpusRateLimited = (account) => {
-  if (!account.opusRateLimitEndAt) {
-    return false
-  }
-  const endTime = new Date(account.opusRateLimitEndAt)
-  const now = new Date()
-  return endTime > now
-}
-
-// 格式化 Opus 限流结束时间
-const formatOpusLimitEndTime = (endTimeStr) => {
-  if (!endTimeStr) return ''
-
-  const endTime = new Date(endTimeStr)
-  const now = new Date()
-
-  // 如果已经过期，返回"已解除"
-  if (endTime <= now) {
-    return '已解除'
-  }
-
-  // 计算剩余时间（毫秒）
-  const remainingMs = endTime - now
-  const remainingMinutes = Math.floor(remainingMs / (1000 * 60))
-
-  // 计算天数、小时和分钟
-  const days = Math.floor(remainingMinutes / 1440)
-  const remainingAfterDays = remainingMinutes % 1440
-  const hours = Math.floor(remainingAfterDays / 60)
-  const mins = remainingAfterDays % 60
-
-  // 格式化显示
-  const parts = []
-  if (days > 0) {
-    parts.push(`${days}天`)
-  }
-  if (hours > 0) {
-    parts.push(`${hours}小时`)
-  }
-  if (mins > 0 && days === 0) {
-    // 只有在天数为0时才显示分钟
-    parts.push(`${mins}分钟`)
-  }
-
-  return parts.join('')
-}
-
 // 打开创建账户模态框
 const openCreateAccountModal = () => {
   newAccountPlatform.value = null // 重置选择的平台
@@ -3676,6 +3690,105 @@ 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 resolveAccountUpdateEndpoint = (account) => {
+  switch (account.platform) {
+    case 'claude':
+      return `/admin/claude-accounts/${account.id}`
+    case 'claude-console':
+      return `/admin/claude-console-accounts/${account.id}`
+    case 'bedrock':
+      return `/admin/bedrock-accounts/${account.id}`
+    case 'openai':
+      return `/admin/openai-accounts/${account.id}`
+    case 'azure_openai':
+      return `/admin/azure-openai-accounts/${account.id}`
+    case 'openai-responses':
+      return `/admin/openai-responses-accounts/${account.id}`
+    case 'ccr':
+      return `/admin/ccr-accounts/${account.id}`
+    case 'gemini':
+      return `/admin/gemini-accounts/${account.id}`
+    case 'droid':
+      return `/admin/droid-accounts/${account.id}`
+    default:
+      throw new Error(`Unsupported platform: ${account.platform}`)
+  }
+}
+
+// 保存账户过期时间
+const handleSaveAccountExpiry = async ({ accountId, expiresAt }) => {
+  try {
+    // 找到对应的账户以获取平台信息
+    const account = accounts.value.find((acc) => acc.id === accountId)
+    if (!account) {
+      showToast('账户不存在', 'error')
+      if (expiryEditModalRef.value) {
+        expiryEditModalRef.value.resetSaving()
+      }
+      return
+    }
+
+    // 根据平台动态选择端点
+    const endpoint = resolveAccountUpdateEndpoint(account)
+    const data = await apiClient.put(endpoint, {
+      expiresAt: expiresAt || null
+    })
+
+    if (data.success) {
+      showToast('账户到期时间已更新', 'success')
+      // 更新本地数据
+      account.expiresAt = expiresAt || null
+      closeAccountExpiryEdit()
+    } else {
+      showToast(data.message || '更新失败', 'error')
+      // 重置保存状态
+      if (expiryEditModalRef.value) {
+        expiryEditModalRef.value.resetSaving()
+      }
+    }
+  } catch (error) {
+    showToast(error.message || '更新失败', 'error')
+    // 重置保存状态
+    if (expiryEditModalRef.value) {
+      expiryEditModalRef.value.resetSaving()
+    }
+  }
+}
 
 onMounted(() => {
   // 首次加载时强制刷新所有数据
@@ -3685,7 +3798,6 @@ onMounted(() => {
 
 <style scoped>
 .table-container {
-  overflow-x: auto;
   border-radius: 12px;
   border: 1px solid rgba(0, 0, 0, 0.05);
 }
@@ -3719,12 +3831,6 @@ onMounted(() => {
   min-height: calc(100vh - 300px);
 }
 
-.table-container {
-  overflow-x: auto;
-  border-radius: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
 .table-row {
   transition: all 0.2s ease;
 }