From c98de2aca545347e85d49145ed328bbc76f4dc14 Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Tue, 29 Jul 2025 11:11:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin-spa):=20=E5=90=8C=E6=AD=A5PR=20#106?=
 =?UTF-8?q?=E7=9A=84=E4=BC=9A=E8=AF=9D=E7=AA=97=E5=8F=A3=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=88=B0=E6=96=B0=E7=89=88=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=90=8E=E5=8F=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在账户管理表格中添加'会话窗口'列
- 显示Claude账户的会话窗口状态（进度条、时间范围、剩余时间）
- 添加formatSessionWindow和formatRemainingTime格式化函数
- 完整同步原版PR #106的前端功能到重构后的admin-spa
---
 web/admin-spa/src/views/AccountsView.vue | 513 +++++++++++++++++++++++
 1 file changed, 513 insertions(+)
 create mode 100644 web/admin-spa/src/views/AccountsView.vue

diff --git a/web/admin-spa/src/views/AccountsView.vue b/web/admin-spa/src/views/AccountsView.vue
new file mode 100644
index 00000000..c6d069ce
--- /dev/null
+++ b/web/admin-spa/src/views/AccountsView.vue
@@ -0,0 +1,513 @@
+<template>
+  <div class="accounts-container">
+    <div class="card p-6">
+      <div class="flex flex-col md:flex-row justify-between items-center gap-4 mb-6">
+        <div>
+          <h3 class="text-xl font-bold text-gray-900 mb-2">账户管理</h3>
+          <p class="text-gray-600">管理您的 Claude 和 Gemini 账户及代理配置</p>
+        </div>
+        <div class="flex gap-2">
+          <select v-model="accountSortBy" @change="sortAccounts()" class="form-input px-3 py-2 text-sm">
+            <option value="name">按名称排序</option>
+            <option value="dailyTokens">按今日Token排序</option>
+            <option value="dailyRequests">按今日请求数排序</option>
+            <option value="totalTokens">按总Token排序</option>
+            <option value="lastUsed">按最后使用排序</option>
+          </select>
+          <button 
+            @click.stop="openCreateAccountModal"
+            class="btn btn-success px-6 py-3 flex items-center gap-2"
+          >
+            <i class="fas fa-plus"></i>添加账户
+          </button>
+        </div>
+      </div>
+      
+      <div v-if="accountsLoading" class="text-center py-12">
+        <div class="loading-spinner mx-auto mb-4"></div>
+        <p class="text-gray-500">正在加载账户...</p>
+      </div>
+      
+      <div v-else-if="sortedAccounts.length === 0" class="text-center py-12">
+        <div class="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
+          <i class="fas fa-user-circle text-gray-400 text-xl"></i>
+        </div>
+        <p class="text-gray-500 text-lg">暂无账户</p>
+        <p class="text-gray-400 text-sm mt-2">点击上方按钮添加您的第一个账户</p>
+      </div>
+      
+      <div v-else class="table-container">
+        <table class="min-w-full">
+          <thead class="bg-gray-50/80 backdrop-blur-sm">
+            <tr>
+              <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider cursor-pointer hover:bg-gray-100" @click="sortAccounts('name')">
+                名称
+                <i v-if="accountsSortBy === 'name'" :class="['fas', accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down', 'ml-1']"></i>
+                <i v-else class="fas fa-sort ml-1 text-gray-400"></i>
+              </th>
+              <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider cursor-pointer hover:bg-gray-100" @click="sortAccounts('platform')">
+                平台
+                <i v-if="accountsSortBy === 'platform'" :class="['fas', accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down', 'ml-1']"></i>
+                <i v-else class="fas fa-sort ml-1 text-gray-400"></i>
+              </th>
+              <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider cursor-pointer hover:bg-gray-100" @click="sortAccounts('accountType')">
+                类型
+                <i v-if="accountsSortBy === 'accountType'" :class="['fas', accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down', 'ml-1']"></i>
+                <i v-else class="fas fa-sort ml-1 text-gray-400"></i>
+              </th>
+              <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider cursor-pointer hover:bg-gray-100" @click="sortAccounts('status')">
+                状态
+                <i v-if="accountsSortBy === 'status'" :class="['fas', accountsSortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down', 'ml-1']"></i>
+                <i v-else class="fas fa-sort ml-1 text-gray-400"></i>
+              </th>
+              <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">代理</th>
+              <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">今日使用</th>
+              <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">会话窗口</th>
+              <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">最后使用</th>
+              <th class="px-6 py-4 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">操作</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200/50">
+            <tr v-for="account in sortedAccounts" :key="account.id" class="table-row">
+              <td class="px-6 py-4 whitespace-nowrap">
+                <div class="flex items-center">
+                  <div class="w-8 h-8 bg-gradient-to-br from-green-500 to-green-600 rounded-lg flex items-center justify-center mr-3">
+                    <i class="fas fa-user-circle text-white text-xs"></i>
+                  </div>
+                  <div>
+                    <div class="flex items-center gap-2">
+                      <div class="text-sm font-semibold text-gray-900">{{ account.name }}</div>
+                      <span v-if="account.accountType === 'dedicated'" 
+                            class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+                        <i class="fas fa-lock mr-1"></i>专属
+                      </span>
+                      <span v-else 
+                            class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+                        <i class="fas fa-share-alt mr-1"></i>共享
+                      </span>
+                    </div>
+                    <div class="text-xs text-gray-500">{{ account.id }}</div>
+                  </div>
+                </div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <span v-if="account.platform === 'gemini'" 
+                      class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">
+                  <i class="fas fa-robot mr-1"></i>Gemini
+                </span>
+                <span v-else 
+                      class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-indigo-100 text-indigo-800">
+                  <i class="fas fa-brain mr-1"></i>Claude
+                </span>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <span v-if="account.scopes && account.scopes.length > 0" 
+                      class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
+                  <i class="fas fa-lock mr-1"></i>OAuth
+                </span>
+                <span v-else 
+                      class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-orange-100 text-orange-800">
+                  <i class="fas fa-key mr-1"></i>传统
+                </span>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <div class="flex flex-col gap-1">
+                  <span :class="['inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold', 
+                               account.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800']">
+                    <div :class="['w-2 h-2 rounded-full mr-2', 
+                               account.isActive ? 'bg-green-500' : 'bg-red-500']"></div>
+                    {{ account.isActive ? '正常' : '异常' }}
+                  </span>
+                  <span v-if="account.rateLimitStatus && account.rateLimitStatus.isRateLimited" 
+                        class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">
+                    <i class="fas fa-exclamation-triangle mr-1"></i>
+                    限流中 ({{ account.rateLimitStatus.minutesRemaining }}分钟)
+                  </span>
+                  <span v-if="account.accountType === 'dedicated'" 
+                        class="text-xs text-gray-500">
+                    绑定: {{ account.boundApiKeysCount || 0 }} 个API Key
+                  </span>
+                </div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                <div v-if="account.proxy" class="text-xs bg-blue-50 px-2 py-1 rounded">
+                  {{ account.proxy.type }}://{{ account.proxy.host }}:{{ account.proxy.port }}
+                </div>
+                <div v-else class="text-gray-400">无代理</div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm">
+                <div v-if="account.usage && account.usage.daily" class="space-y-1">
+                  <div class="flex items-center gap-2">
+                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
+                    <span class="text-sm font-medium text-gray-900">{{ account.usage.daily.requests || 0 }} 次</span>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
+                    <span class="text-xs text-gray-600">{{ formatNumber(account.usage.daily.allTokens || 0) }} tokens</span>
+                  </div>
+                  <div v-if="account.usage.averages && account.usage.averages.rpm > 0" class="text-xs text-gray-500">
+                    平均 {{ account.usage.averages.rpm.toFixed(2) }} RPM
+                  </div>
+                </div>
+                <div v-else class="text-gray-400 text-xs">暂无数据</div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <div v-if="account.platform === 'claude' && account.sessionWindow && account.sessionWindow.hasActiveWindow" class="space-y-2">
+                  <div class="flex items-center gap-2">
+                    <div class="w-24 bg-gray-200 rounded-full h-2">
+                      <div class="bg-gradient-to-r from-blue-500 to-indigo-600 h-2 rounded-full transition-all duration-300" 
+                           :style="{ width: account.sessionWindow.progress + '%' }"></div>
+                    </div>
+                    <span class="text-xs text-gray-700 font-medium min-w-[32px]">
+                      {{ account.sessionWindow.progress }}%
+                    </span>
+                  </div>
+                  <div class="text-xs text-gray-600">
+                    <div>{{ formatSessionWindow(account.sessionWindow.windowStart, account.sessionWindow.windowEnd) }}</div>
+                    <div v-if="account.sessionWindow.remainingTime > 0" class="text-indigo-600 font-medium">
+                      剩余 {{ formatRemainingTime(account.sessionWindow.remainingTime) }}
+                    </div>
+                  </div>
+                </div>
+                <div v-else-if="account.platform === 'claude'" class="text-gray-400 text-sm">
+                  <i class="fas fa-minus"></i>
+                </div>
+                <div v-else class="text-gray-400 text-sm">
+                  <span class="text-xs">N/A</span>
+                </div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
+                {{ formatLastUsed(account.lastUsedAt) }}
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                <div class="flex items-center gap-2">
+                  <button 
+                    v-if="account.platform === 'claude' && account.scopes"
+                    @click="refreshToken(account)"
+                    :disabled="account.isRefreshing"
+                    :class="[
+                      'px-3 py-1.5 rounded-lg text-xs font-medium transition-colors',
+                      account.isRefreshing 
+                        ? 'bg-gray-100 text-gray-400 cursor-not-allowed' 
+                        : 'bg-blue-100 text-blue-700 hover:bg-blue-200'
+                    ]"
+                    :title="account.isRefreshing ? '刷新中...' : '刷新Token'"
+                  >
+                    <i :class="[
+                      'fas fa-sync-alt',
+                      account.isRefreshing ? 'animate-spin' : ''
+                    ]"></i>
+                  </button>
+                  <button 
+                    @click="editAccount(account)"
+                    class="px-3 py-1.5 bg-blue-100 text-blue-700 rounded-lg text-xs font-medium hover:bg-blue-200 transition-colors"
+                  >
+                    <i class="fas fa-edit"></i>
+                  </button>
+                  <button 
+                    @click="deleteAccount(account)"
+                    class="px-3 py-1.5 bg-red-100 text-red-700 rounded-lg text-xs font-medium hover:bg-red-200 transition-colors"
+                  >
+                    <i class="fas fa-trash"></i>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    
+    <!-- 添加账户模态框 -->
+    <AccountForm
+      v-if="showCreateAccountModal"
+      @close="showCreateAccountModal = false"
+      @success="handleCreateSuccess"
+    />
+    
+    <!-- 编辑账户模态框 -->
+    <AccountForm
+      v-if="showEditAccountModal"
+      :account="editingAccount"
+      @close="showEditAccountModal = false"
+      @success="handleEditSuccess"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { showToast } from '@/utils/toast'
+import { apiClient } from '@/config/api'
+import AccountForm from '@/components/accounts/AccountForm.vue'
+
+// 数据状态
+const accounts = ref([])
+const accountsLoading = ref(false)
+const accountSortBy = ref('name')
+const accountsSortBy = ref('')
+const accountsSortOrder = ref('asc')
+const apiKeys = ref([])
+
+// 模态框状态
+const showCreateAccountModal = ref(false)
+const showEditAccountModal = ref(false)
+const editingAccount = ref(null)
+
+// 计算排序后的账户列表
+const sortedAccounts = computed(() => {
+  if (!accountsSortBy.value) return accounts.value
+  
+  const sorted = [...accounts.value].sort((a, b) => {
+    let aVal = a[accountsSortBy.value]
+    let bVal = b[accountsSortBy.value]
+    
+    // 处理统计数据
+    if (accountsSortBy.value === 'dailyTokens') {
+      aVal = a.usage?.daily?.allTokens || 0
+      bVal = b.usage?.daily?.allTokens || 0
+    } else if (accountsSortBy.value === 'dailyRequests') {
+      aVal = a.usage?.daily?.requests || 0
+      bVal = b.usage?.daily?.requests || 0
+    } else if (accountsSortBy.value === 'totalTokens') {
+      aVal = a.usage?.total?.allTokens || 0
+      bVal = b.usage?.total?.allTokens || 0
+    }
+    
+    // 处理最后使用时间
+    if (accountsSortBy.value === 'lastUsed') {
+      aVal = a.lastUsedAt ? new Date(a.lastUsedAt).getTime() : 0
+      bVal = b.lastUsedAt ? new Date(b.lastUsedAt).getTime() : 0
+    }
+    
+    // 处理状态
+    if (accountsSortBy.value === 'status') {
+      aVal = a.isActive ? 1 : 0
+      bVal = b.isActive ? 1 : 0
+    }
+    
+    if (aVal < bVal) return accountsSortOrder.value === 'asc' ? -1 : 1
+    if (aVal > bVal) return accountsSortOrder.value === 'asc' ? 1 : -1
+    return 0
+  })
+  
+  return sorted
+})
+
+// 加载账户列表
+const loadAccounts = async () => {
+  accountsLoading.value = true
+  try {
+    const [claudeData, geminiData, apiKeysData] = await Promise.all([
+      apiClient.get('/admin/claude-accounts'),
+      apiClient.get('/admin/gemini-accounts'),
+      apiClient.get('/admin/api-keys')
+    ])
+    
+    // 更新API Keys列表
+    if (apiKeysData.success) {
+      apiKeys.value = apiKeysData.data || []
+    }
+    
+    const allAccounts = []
+    
+    if (claudeData.success) {
+      const claudeAccounts = (claudeData.data || []).map(acc => {
+        // 计算每个Claude账户绑定的API Key数量
+        const boundApiKeysCount = apiKeys.value.filter(key => key.claudeAccountId === acc.id).length
+        return { ...acc, platform: 'claude', boundApiKeysCount }
+      })
+      allAccounts.push(...claudeAccounts)
+    }
+    
+    if (geminiData.success) {
+      const geminiAccounts = (geminiData.data || []).map(acc => {
+        // 计算每个Gemini账户绑定的API Key数量
+        const boundApiKeysCount = apiKeys.value.filter(key => key.geminiAccountId === acc.id).length
+        return { ...acc, platform: 'gemini', boundApiKeysCount }
+      })
+      allAccounts.push(...geminiAccounts)
+    }
+    
+    accounts.value = allAccounts
+  } catch (error) {
+    showToast('加载账户失败', 'error')
+  } finally {
+    accountsLoading.value = false
+  }
+}
+
+// 排序账户
+const sortAccounts = (field) => {
+  if (field) {
+    if (accountsSortBy.value === field) {
+      accountsSortOrder.value = accountsSortOrder.value === 'asc' ? 'desc' : 'asc'
+    } else {
+      accountsSortBy.value = field
+      accountsSortOrder.value = 'asc'
+    }
+  }
+}
+
+// 格式化数字（与原版保持一致）
+const formatNumber = (num) => {
+  if (num === null || num === undefined) return '0'
+  const number = Number(num)
+  if (number >= 1000000) {
+    return Math.floor(number / 1000000).toLocaleString() + 'M'
+  }
+  return number.toLocaleString()
+}
+
+// 格式化最后使用时间
+const formatLastUsed = (dateString) => {
+  if (!dateString) return '从未使用'
+  
+  const date = new Date(dateString)
+  const now = new Date()
+  const diff = now - date
+  
+  if (diff < 60000) return '刚刚'
+  if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`
+  if (diff < 604800000) return `${Math.floor(diff / 86400000)} 天前`
+  
+  return date.toLocaleDateString('zh-CN')
+}
+
+// 格式化会话窗口时间
+const formatSessionWindow = (windowStart, windowEnd) => {
+  if (!windowStart || !windowEnd) return '--'
+  
+  const start = new Date(windowStart)
+  const end = new Date(windowEnd)
+  
+  const startHour = start.getHours().toString().padStart(2, '0')
+  const startMin = start.getMinutes().toString().padStart(2, '0')
+  const endHour = end.getHours().toString().padStart(2, '0')
+  const endMin = end.getMinutes().toString().padStart(2, '0')
+  
+  return `${startHour}:${startMin} - ${endHour}:${endMin}`
+}
+
+// 格式化剩余时间
+const formatRemainingTime = (minutes) => {
+  if (!minutes || minutes <= 0) return '已结束'
+  
+  const hours = Math.floor(minutes / 60)
+  const mins = minutes % 60
+  
+  if (hours > 0) {
+    return `${hours}小时${mins}分钟`
+  }
+  return `${mins}分钟`
+}
+
+// 打开创建账户模态框
+const openCreateAccountModal = () => {
+  showCreateAccountModal.value = true
+}
+
+// 编辑账户
+const editAccount = (account) => {
+  editingAccount.value = account
+  showEditAccountModal.value = true
+}
+
+
+// 删除账户
+const deleteAccount = async (account) => {
+  if (!confirm(`确定要删除账户 "${account.name}" 吗？此操作不可恢复。`)) return
+  
+  try {
+    const endpoint = account.platform === 'claude' 
+      ? `/admin/claude-accounts/${account.id}`
+      : `/admin/gemini-accounts/${account.id}`
+      
+    const data = await apiClient.delete(endpoint)
+    
+    if (data.success) {
+      showToast('账户已删除', 'success')
+      loadAccounts()
+    } else {
+      showToast(data.message || '删除失败', 'error')
+    }
+  } catch (error) {
+    showToast('删除失败', 'error')
+  }
+}
+
+// 刷新Token
+const refreshToken = async (account) => {
+  if (account.isRefreshing) return
+  
+  try {
+    account.isRefreshing = true
+    const data = await apiClient.post(`/admin/claude-accounts/${account.id}/refresh`)
+    
+    if (data.success) {
+      showToast('Token刷新成功', 'success')
+      loadAccounts()
+    } else {
+      showToast(data.message || 'Token刷新失败', 'error')
+    }
+  } catch (error) {
+    showToast('Token刷新失败', 'error')
+  } finally {
+    account.isRefreshing = false
+  }
+}
+
+// 处理创建成功
+const handleCreateSuccess = () => {
+  showCreateAccountModal.value = false
+  showToast('账户创建成功', 'success')
+  loadAccounts()
+}
+
+// 处理编辑成功
+const handleEditSuccess = () => {
+  showEditAccountModal.value = false
+  showToast('账户更新成功', 'success')
+  loadAccounts()
+}
+
+// 监听排序选择变化
+watch(accountSortBy, (newVal) => {
+  const fieldMap = {
+    name: 'name',
+    dailyTokens: 'dailyTokens',
+    dailyRequests: 'dailyRequests',
+    totalTokens: 'totalTokens',
+    lastUsed: 'lastUsed'
+  }
+  
+  if (fieldMap[newVal]) {
+    sortAccounts(fieldMap[newVal])
+  }
+})
+
+onMounted(() => {
+  loadAccounts()
+})
+</script>
+
+<style scoped>
+.accounts-container {
+  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;
+}
+
+.table-row:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+</style>
\ No newline at end of file