From 68ba866c386871fd5ca736dcea67964d97ac475a Mon Sep 17 00:00:00 2001
From: shaw <shaw-wei@foxmail.com>
Date: Mon, 12 Jan 2026 16:08:44 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BF=AE=E5=A4=8D=E8=B4=A6?=
 =?UTF-8?q?=E5=8F=B7=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E5=88=86=E7=BB=84?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=92=8C=20Cookie=20=E6=8E=88=E6=9D=83?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 AccountGroupsCell 组件优化分组列显示（最多4个+折叠）
- 修复 Cookie 自动授权时 group_ids/notes/expires_at 字段丢失
- 修复 SettingsView 流超时配置前后端字段不一致问题
---
 .../components/account/AccountGroupsCell.vue  | 158 ++++++++++++++++++
 .../components/account/CreateAccountModal.vue |   3 +
 frontend/src/i18n/locales/en.ts               |   1 +
 frontend/src/i18n/locales/zh.ts               |   1 +
 frontend/src/views/admin/AccountsView.vue     |   7 +-
 frontend/src/views/admin/SettingsView.vue     |  19 ---
 6 files changed, 165 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/account/AccountGroupsCell.vue

diff --git a/frontend/src/components/account/AccountGroupsCell.vue b/frontend/src/components/account/AccountGroupsCell.vue
new file mode 100644
index 00000000..512383a5
--- /dev/null
+++ b/frontend/src/components/account/AccountGroupsCell.vue
@@ -0,0 +1,158 @@
+<template>
+  <div v-if="groups && groups.length > 0" class="relative max-w-56">
+    <!-- 分组容器：固定最大宽度，最多显示2行 -->
+    <div class="flex flex-wrap gap-1 max-h-14 overflow-hidden">
+      <GroupBadge
+        v-for="group in displayGroups"
+        :key="group.id"
+        :name="group.name"
+        :platform="group.platform"
+        :subscription-type="group.subscription_type"
+        :rate-multiplier="group.rate_multiplier"
+        :show-rate="false"
+        class="max-w-24"
+      />
+      <!-- 更多数量徽章 -->
+      <button
+        v-if="hiddenCount > 0"
+        ref="moreButtonRef"
+        @click.stop="showPopover = !showPopover"
+        class="inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-300 dark:hover:bg-dark-500 transition-colors cursor-pointer whitespace-nowrap"
+      >
+        <span>+{{ hiddenCount }}</span>
+      </button>
+    </div>
+
+    <!-- Popover 显示完整列表 -->
+    <Teleport to="body">
+      <Transition
+        enter-active-class="transition duration-150 ease-out"
+        enter-from-class="opacity-0 scale-95"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition duration-100 ease-in"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-95"
+      >
+        <div
+          v-if="showPopover"
+          ref="popoverRef"
+          class="fixed z-50 min-w-48 max-w-96 rounded-lg border border-gray-200 bg-white p-3 shadow-lg dark:border-dark-600 dark:bg-dark-800"
+          :style="popoverStyle"
+        >
+          <div class="mb-2 flex items-center justify-between">
+            <span class="text-xs font-medium text-gray-500 dark:text-gray-400">
+              {{ t('admin.accounts.allGroups', { count: groups.length }) }}
+            </span>
+            <button
+              @click="showPopover = false"
+              class="rounded p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-dark-700 dark:hover:text-gray-300"
+            >
+              <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="flex flex-wrap gap-1.5 max-h-64 overflow-y-auto">
+            <GroupBadge
+              v-for="group in groups"
+              :key="group.id"
+              :name="group.name"
+              :platform="group.platform"
+              :subscription-type="group.subscription_type"
+              :rate-multiplier="group.rate_multiplier"
+              :show-rate="false"
+            />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+
+    <!-- 点击外部关闭 popover -->
+    <div
+      v-if="showPopover"
+      class="fixed inset-0 z-40"
+      @click="showPopover = false"
+    />
+  </div>
+  <span v-else class="text-sm text-gray-400 dark:text-dark-500">-</span>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import GroupBadge from '@/components/common/GroupBadge.vue'
+import type { Group } from '@/types'
+
+interface Props {
+  groups: Group[] | null | undefined
+  maxDisplay?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxDisplay: 4
+})
+
+const { t } = useI18n()
+
+const moreButtonRef = ref<HTMLElement | null>(null)
+const popoverRef = ref<HTMLElement | null>(null)
+const showPopover = ref(false)
+
+// 显示的分组（最多显示 maxDisplay 个）
+const displayGroups = computed(() => {
+  if (!props.groups) return []
+  if (props.groups.length <= props.maxDisplay) {
+    return props.groups
+  }
+  // 留一个位置给 +N 按钮
+  return props.groups.slice(0, props.maxDisplay - 1)
+})
+
+// 隐藏的数量
+const hiddenCount = computed(() => {
+  if (!props.groups) return 0
+  if (props.groups.length <= props.maxDisplay) return 0
+  return props.groups.length - (props.maxDisplay - 1)
+})
+
+// Popover 位置样式
+const popoverStyle = computed(() => {
+  if (!moreButtonRef.value) return {}
+  const rect = moreButtonRef.value.getBoundingClientRect()
+  const viewportHeight = window.innerHeight
+  const viewportWidth = window.innerWidth
+
+  let top = rect.bottom + 8
+  let left = rect.left
+
+  // 如果下方空间不足，显示在上方
+  if (top + 280 > viewportHeight) {
+    top = Math.max(8, rect.top - 280)
+  }
+
+  // 如果右侧空间不足，向左偏移
+  if (left + 384 > viewportWidth) {
+    left = Math.max(8, viewportWidth - 392)
+  }
+
+  return {
+    top: `${top}px`,
+    left: `${left}px`
+  }
+})
+
+// 关闭 popover 的键盘事件
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    showPopover.value = false
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+</script>
diff --git a/frontend/src/components/account/CreateAccountModal.vue b/frontend/src/components/account/CreateAccountModal.vue
index 1a4edaf1..a56a987f 100644
--- a/frontend/src/components/account/CreateAccountModal.vue
+++ b/frontend/src/components/account/CreateAccountModal.vue
@@ -2482,6 +2482,7 @@ const handleCookieAuth = async (sessionKey: string) => {
 
         await adminAPI.accounts.create({
           name: accountName,
+          notes: form.notes,
           platform: form.platform,
           type: addMethod.value, // Use addMethod as type: 'oauth' or 'setup-token'
           credentials,
@@ -2489,6 +2490,8 @@ const handleCookieAuth = async (sessionKey: string) => {
           proxy_id: form.proxy_id,
           concurrency: form.concurrency,
           priority: form.priority,
+          group_ids: form.group_ids,
+          expires_at: form.expires_at,
           auto_pause_on_expired: autoPauseOnExpired.value
         })
 
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 7ecbb977..4443514b 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -1022,6 +1022,7 @@ export default {
       schedulableEnabled: 'Scheduling enabled',
       schedulableDisabled: 'Scheduling disabled',
       failedToToggleSchedulable: 'Failed to toggle scheduling status',
+      allGroups: '{count} groups total',
       platforms: {
         anthropic: 'Anthropic',
         claude: 'Claude',
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index 4535ca88..12c67629 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -1099,6 +1099,7 @@ export default {
       schedulableEnabled: '调度已开启',
       schedulableDisabled: '调度已关闭',
       failedToToggleSchedulable: '切换调度状态失败',
+      allGroups: '共 {count} 个分组',
       columns: {
         name: '名称',
         platformType: '平台/类型',
diff --git a/frontend/src/views/admin/AccountsView.vue b/frontend/src/views/admin/AccountsView.vue
index 0480ef39..8a5268ca 100644
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -56,10 +56,7 @@
             <AccountTodayStatsCell :account="row" />
           </template>
           <template #cell-groups="{ row }">
-            <div v-if="row.groups && row.groups.length > 0" class="flex flex-wrap gap-1.5">
-              <GroupBadge v-for="group in row.groups" :key="group.id" :name="group.name" :platform="group.platform" :subscription-type="group.subscription_type" :rate-multiplier="group.rate_multiplier" :show-rate="false" />
-            </div>
-            <span v-else class="text-sm text-gray-400 dark:text-dark-500">-</span>
+            <AccountGroupsCell :groups="row.groups" :max-display="4" />
           </template>
           <template #cell-usage="{ row }">
             <AccountUsageCell :account="row" />
@@ -145,7 +142,7 @@ import AccountStatsModal from '@/components/admin/account/AccountStatsModal.vue'
 import AccountStatusIndicator from '@/components/account/AccountStatusIndicator.vue'
 import AccountUsageCell from '@/components/account/AccountUsageCell.vue'
 import AccountTodayStatsCell from '@/components/account/AccountTodayStatsCell.vue'
-import GroupBadge from '@/components/common/GroupBadge.vue'
+import AccountGroupsCell from '@/components/account/AccountGroupsCell.vue'
 import PlatformTypeBadge from '@/components/common/PlatformTypeBadge.vue'
 import { formatDateTime, formatRelativeTime } from '@/utils/format'
 import type { Account, Proxy, Group } from '@/types'
diff --git a/frontend/src/views/admin/SettingsView.vue b/frontend/src/views/admin/SettingsView.vue
index 890ba28c..d46c3329 100644
--- a/frontend/src/views/admin/SettingsView.vue
+++ b/frontend/src/views/admin/SettingsView.vue
@@ -183,23 +183,6 @@
                 v-if="streamTimeoutForm.enabled"
                 class="space-y-4 border-t border-gray-100 pt-4 dark:border-dark-700"
               >
-                <!-- Timeout Seconds -->
-                <div>
-                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                    {{ t('admin.settings.streamTimeout.timeoutSeconds') }}
-                  </label>
-                  <input
-                    v-model.number="streamTimeoutForm.timeout_seconds"
-                    type="number"
-                    min="30"
-                    max="300"
-                    class="input w-32"
-                  />
-                  <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
-                    {{ t('admin.settings.streamTimeout.timeoutSecondsHint') }}
-                  </p>
-                </div>
-
                 <!-- Action -->
                 <div>
                   <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -1000,7 +983,6 @@ const streamTimeoutLoading = ref(true)
 const streamTimeoutSaving = ref(false)
 const streamTimeoutForm = reactive({
   enabled: true,
-  timeout_seconds: 60,
   action: 'temp_unsched' as 'temp_unsched' | 'error' | 'none',
   temp_unsched_minutes: 5,
   threshold_count: 3,
@@ -1314,7 +1296,6 @@ async function saveStreamTimeoutSettings() {
   try {
     const updated = await adminAPI.settings.updateStreamTimeoutSettings({
       enabled: streamTimeoutForm.enabled,
-      timeout_seconds: streamTimeoutForm.timeout_seconds,
       action: streamTimeoutForm.action,
       temp_unsched_minutes: streamTimeoutForm.temp_unsched_minutes,
       threshold_count: streamTimeoutForm.threshold_count,