Merge branch 'main' of https://github.com/james-6-23/sub2api

frontend/src/components/__tests__/ApiKeyCreate.spec.ts

@@ -0,0 +1,184 @@
+/**
+ * API Key 创建逻辑测试
+ * 通过封装组件测试 API Key 创建的核心流程
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
+import { defineComponent, ref, reactive } from 'vue'
+
+// Mock keysAPI
+const mockCreate = vi.fn()
+const mockList = vi.fn()
+
+vi.mock('@/api', () => ({
+  keysAPI: {
+    create: (...args: any[]) => mockCreate(...args),
+    list: (...args: any[]) => mockList(...args),
+  },
+  authAPI: {
+    getCurrentUser: vi.fn().mockResolvedValue({ data: {} }),
+    logout: vi.fn(),
+    refreshToken: vi.fn(),
+  },
+  isTotp2FARequired: () => false,
+}))
+
+vi.mock('@/api/admin/system', () => ({
+  checkUpdates: vi.fn(),
+}))
+
+vi.mock('@/api/auth', () => ({
+  getPublicSettings: vi.fn().mockResolvedValue({}),
+}))
+
+// Mock app store - 使用固定引用确保组件和测试共享同一对象
+const mockShowSuccess = vi.fn()
+const mockShowError = vi.fn()
+
+vi.mock('@/stores/app', () => ({
+  useAppStore: () => ({
+    showSuccess: mockShowSuccess,
+    showError: mockShowError,
+  }),
+}))
+
+import { useAppStore } from '@/stores/app'
+
+/**
+ * 简化的 API Key 创建测试组件
+ */
+const ApiKeyCreateTestComponent = defineComponent({
+  setup() {
+    const appStore = useAppStore()
+    const loading = ref(false)
+    const createdKey = ref('')
+    const formData = reactive({
+      name: '',
+      group_id: null as number | null,
+    })
+
+    const handleCreate = async () => {
+      if (!formData.name) return
+
+      loading.value = true
+      try {
+        const result = await mockCreate({
+          name: formData.name,
+          group_id: formData.group_id,
+        })
+        createdKey.value = result.key
+        appStore.showSuccess('API Key 创建成功')
+      } catch (error: any) {
+        appStore.showError(error.message || '创建失败')
+      } finally {
+        loading.value = false
+      }
+    }
+
+    return { formData, loading, createdKey, handleCreate }
+  },
+  template: `
+    <div>
+      <form @submit.prevent="handleCreate">
+        <input id="name" v-model="formData.name" placeholder="Key 名称" />
+        <select id="group" v-model="formData.group_id">
+          <option :value="null">默认</option>
+          <option :value="1">Group 1</option>
+        </select>
+        <button type="submit" :disabled="loading">创建</button>
+      </form>
+      <div v-if="createdKey" class="created-key">{{ createdKey }}</div>
+    </div>
+  `,
+})
+
+describe('ApiKey 创建流程', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+  })
+
+  it('创建 API Key 调用 API 并显示结果', async () => {
+    mockCreate.mockResolvedValue({
+      id: 1,
+      key: 'sk-test-key-12345',
+      name: 'My Test Key',
+    })
+
+    const wrapper = mount(ApiKeyCreateTestComponent)
+
+    await wrapper.find('#name').setValue('My Test Key')
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    expect(mockCreate).toHaveBeenCalledWith({
+      name: 'My Test Key',
+      group_id: null,
+    })
+
+    expect(wrapper.find('.created-key').text()).toBe('sk-test-key-12345')
+  })
+
+  it('选择分组后正确传参', async () => {
+    mockCreate.mockResolvedValue({
+      id: 2,
+      key: 'sk-group-key',
+      name: 'Group Key',
+    })
+
+    const wrapper = mount(ApiKeyCreateTestComponent)
+
+    await wrapper.find('#name').setValue('Group Key')
+    // 选择 group_id = 1
+    await wrapper.find('#group').setValue('1')
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    expect(mockCreate).toHaveBeenCalledWith({
+      name: 'Group Key',
+      group_id: 1,
+    })
+  })
+
+  it('创建失败时显示错误', async () => {
+    mockCreate.mockRejectedValue(new Error('配额不足'))
+
+    const wrapper = mount(ApiKeyCreateTestComponent)
+
+    await wrapper.find('#name').setValue('Fail Key')
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    expect(mockShowError).toHaveBeenCalledWith('配额不足')
+    expect(wrapper.find('.created-key').exists()).toBe(false)
+  })
+
+  it('名称为空时不提交', async () => {
+    const wrapper = mount(ApiKeyCreateTestComponent)
+
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    expect(mockCreate).not.toHaveBeenCalled()
+  })
+
+  it('创建过程中按钮被禁用', async () => {
+    let resolveCreate: (v: any) => void
+    mockCreate.mockImplementation(
+      () => new Promise((resolve) => { resolveCreate = resolve })
+    )
+
+    const wrapper = mount(ApiKeyCreateTestComponent)
+
+    await wrapper.find('#name').setValue('Test Key')
+    await wrapper.find('form').trigger('submit')
+
+    expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+
+    resolveCreate!({ id: 1, key: 'sk-test', name: 'Test Key' })
+    await flushPromises()
+
+    expect(wrapper.find('button').attributes('disabled')).toBeUndefined()
+  })
+})

frontend/src/components/__tests__/Dashboard.spec.ts

@@ -0,0 +1,172 @@
+/**
+ * Dashboard 数据加载逻辑测试
+ * 通过封装组件测试仪表板核心数据加载流程
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
+import { defineComponent, ref, onMounted, nextTick } from 'vue'
+
+// Mock API
+const mockGetDashboardStats = vi.fn()
+
+vi.mock('@/api', () => ({
+  authAPI: {
+    getCurrentUser: vi.fn().mockResolvedValue({
+      data: { id: 1, username: 'test', email: 'test@example.com', role: 'user', balance: 100, concurrency: 5, status: 'active', allowed_groups: null, created_at: '', updated_at: '' },
+    }),
+    logout: vi.fn(),
+    refreshToken: vi.fn(),
+  },
+  isTotp2FARequired: () => false,
+}))
+
+vi.mock('@/api/usage', () => ({
+  usageAPI: {
+    getDashboardStats: (...args: any[]) => mockGetDashboardStats(...args),
+  },
+}))
+
+vi.mock('@/api/admin/system', () => ({
+  checkUpdates: vi.fn(),
+}))
+
+vi.mock('@/api/auth', () => ({
+  getPublicSettings: vi.fn().mockResolvedValue({}),
+}))
+
+interface DashboardStats {
+  balance: number
+  api_key_count: number
+  active_api_key_count: number
+  today_requests: number
+  today_cost: number
+  today_tokens: number
+  total_tokens: number
+}
+
+/**
+ * 简化的 Dashboard 测试组件
+ */
+const DashboardTestComponent = defineComponent({
+  setup() {
+    const stats = ref<DashboardStats | null>(null)
+    const loading = ref(false)
+    const error = ref('')
+
+    const loadStats = async () => {
+      loading.value = true
+      error.value = ''
+      try {
+        stats.value = await mockGetDashboardStats()
+      } catch (e: any) {
+        error.value = e.message || '加载失败'
+      } finally {
+        loading.value = false
+      }
+    }
+
+    onMounted(loadStats)
+
+    return { stats, loading, error, loadStats }
+  },
+  template: `
+    <div>
+      <div v-if="loading" class="loading">加载中...</div>
+      <div v-if="error" class="error">{{ error }}</div>
+      <div v-if="stats" class="stats">
+        <span class="balance">{{ stats.balance }}</span>
+        <span class="api-keys">{{ stats.api_key_count }}</span>
+        <span class="today-requests">{{ stats.today_requests }}</span>
+        <span class="today-cost">{{ stats.today_cost }}</span>
+      </div>
+      <button class="refresh" @click="loadStats">刷新</button>
+    </div>
+  `,
+})
+
+describe('Dashboard 数据加载', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+  })
+
+  const fakeStats: DashboardStats = {
+    balance: 100.5,
+    api_key_count: 3,
+    active_api_key_count: 2,
+    today_requests: 150,
+    today_cost: 2.5,
+    today_tokens: 50000,
+    total_tokens: 1000000,
+  }
+
+  it('挂载后自动加载数据', async () => {
+    mockGetDashboardStats.mockResolvedValue(fakeStats)
+
+    const wrapper = mount(DashboardTestComponent)
+    await flushPromises()
+
+    expect(mockGetDashboardStats).toHaveBeenCalledTimes(1)
+    expect(wrapper.find('.balance').text()).toBe('100.5')
+    expect(wrapper.find('.api-keys').text()).toBe('3')
+    expect(wrapper.find('.today-requests').text()).toBe('150')
+    expect(wrapper.find('.today-cost').text()).toBe('2.5')
+  })
+
+  it('加载中显示 loading 状态', async () => {
+    let resolveStats: (v: any) => void
+    mockGetDashboardStats.mockImplementation(
+      () => new Promise((resolve) => { resolveStats = resolve })
+    )
+
+    const wrapper = mount(DashboardTestComponent)
+    await nextTick()
+
+    expect(wrapper.find('.loading').exists()).toBe(true)
+
+    resolveStats!(fakeStats)
+    await flushPromises()
+
+    expect(wrapper.find('.loading').exists()).toBe(false)
+    expect(wrapper.find('.stats').exists()).toBe(true)
+  })
+
+  it('加载失败时显示错误信息', async () => {
+    mockGetDashboardStats.mockRejectedValue(new Error('Network error'))
+
+    const wrapper = mount(DashboardTestComponent)
+    await flushPromises()
+
+    expect(wrapper.find('.error').text()).toBe('Network error')
+    expect(wrapper.find('.stats').exists()).toBe(false)
+  })
+
+  it('点击刷新按钮重新加载数据', async () => {
+    mockGetDashboardStats.mockResolvedValue(fakeStats)
+
+    const wrapper = mount(DashboardTestComponent)
+    await flushPromises()
+
+    expect(mockGetDashboardStats).toHaveBeenCalledTimes(1)
+
+    // 更新数据
+    const updatedStats = { ...fakeStats, today_requests: 200 }
+    mockGetDashboardStats.mockResolvedValue(updatedStats)
+
+    await wrapper.find('.refresh').trigger('click')
+    await flushPromises()
+
+    expect(mockGetDashboardStats).toHaveBeenCalledTimes(2)
+    expect(wrapper.find('.today-requests').text()).toBe('200')
+  })
+
+  it('数据为空时不显示统计信息', async () => {
+    mockGetDashboardStats.mockResolvedValue(null)
+
+    const wrapper = mount(DashboardTestComponent)
+    await flushPromises()
+
+    expect(wrapper.find('.stats').exists()).toBe(false)
+  })
+})

frontend/src/components/__tests__/LoginForm.spec.ts

@@ -0,0 +1,178 @@
+/**
+ * LoginView 组件核心逻辑测试
+ * 测试登录表单提交、验证、2FA 等场景
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { setActivePinia, createPinia } from 'pinia'
+import { defineComponent, reactive, ref } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+
+// Mock 所有外部依赖
+const mockLogin = vi.fn()
+const mockLogin2FA = vi.fn()
+const mockPush = vi.fn()
+
+vi.mock('@/api', () => ({
+  authAPI: {
+    login: (...args: any[]) => mockLogin(...args),
+    login2FA: (...args: any[]) => mockLogin2FA(...args),
+    logout: vi.fn(),
+    getCurrentUser: vi.fn().mockResolvedValue({ data: {} }),
+    register: vi.fn(),
+    refreshToken: vi.fn(),
+  },
+  isTotp2FARequired: (response: any) => response?.requires_2fa === true,
+}))
+
+vi.mock('@/api/admin/system', () => ({
+  checkUpdates: vi.fn(),
+}))
+
+vi.mock('@/api/auth', () => ({
+  getPublicSettings: vi.fn().mockResolvedValue({}),
+}))
+
+/**
+ * 创建一个简化的测试组件来封装登录逻辑
+ * 避免引入 LoginView.vue 的全部依赖（AuthLayout、i18n、Icon 等）
+ */
+const LoginFormTestComponent = defineComponent({
+  setup() {
+    const authStore = useAuthStore()
+    const formData = reactive({ email: '', password: '' })
+    const isLoading = ref(false)
+    const errorMessage = ref('')
+
+    const handleLogin = async () => {
+      if (!formData.email || !formData.password) {
+        errorMessage.value = '请输入邮箱和密码'
+        return
+      }
+
+      isLoading.value = true
+      errorMessage.value = ''
+
+      try {
+        const response = await authStore.login({
+          email: formData.email,
+          password: formData.password,
+        })
+
+        // 2FA 流程由调用方处理
+        if ((response as any)?.requires_2fa) {
+          errorMessage.value = '需要 2FA 验证'
+          return
+        }
+
+        mockPush('/dashboard')
+      } catch (error: any) {
+        errorMessage.value = error.message || '登录失败'
+      } finally {
+        isLoading.value = false
+      }
+    }
+
+    return { formData, isLoading, errorMessage, handleLogin }
+  },
+  template: `
+    <form @submit.prevent="handleLogin">
+      <input id="email" v-model="formData.email" type="email" />
+      <input id="password" v-model="formData.password" type="password" />
+      <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
+      <button type="submit" :disabled="isLoading">登录</button>
+    </form>
+  `,
+})
+
+describe('LoginForm 核心逻辑', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.clearAllMocks()
+  })
+
+  it('成功登录后跳转到 dashboard', async () => {
+    mockLogin.mockResolvedValue({
+      access_token: 'token',
+      token_type: 'Bearer',
+      user: { id: 1, username: 'test', email: 'test@example.com', role: 'user', balance: 0, concurrency: 5, status: 'active', allowed_groups: null, created_at: '', updated_at: '' },
+    })
+
+    const wrapper = mount(LoginFormTestComponent)
+
+    await wrapper.find('#email').setValue('test@example.com')
+    await wrapper.find('#password').setValue('password123')
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    expect(mockLogin).toHaveBeenCalledWith({
+      email: 'test@example.com',
+      password: 'password123',
+    })
+    expect(mockPush).toHaveBeenCalledWith('/dashboard')
+  })
+
+  it('登录失败时显示错误信息', async () => {
+    mockLogin.mockRejectedValue(new Error('Invalid credentials'))
+
+    const wrapper = mount(LoginFormTestComponent)
+
+    await wrapper.find('#email').setValue('test@example.com')
+    await wrapper.find('#password').setValue('wrong')
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    expect(wrapper.find('.error').text()).toBe('Invalid credentials')
+  })
+
+  it('空表单提交显示验证错误', async () => {
+    const wrapper = mount(LoginFormTestComponent)
+
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    expect(wrapper.find('.error').text()).toBe('请输入邮箱和密码')
+    expect(mockLogin).not.toHaveBeenCalled()
+  })
+
+  it('需要 2FA 时不跳转', async () => {
+    mockLogin.mockResolvedValue({
+      requires_2fa: true,
+      temp_token: 'temp-123',
+    })
+
+    const wrapper = mount(LoginFormTestComponent)
+
+    await wrapper.find('#email').setValue('test@example.com')
+    await wrapper.find('#password').setValue('password123')
+    await wrapper.find('form').trigger('submit')
+    await flushPromises()
+
+    expect(mockPush).not.toHaveBeenCalled()
+    expect(wrapper.find('.error').text()).toBe('需要 2FA 验证')
+  })
+
+  it('提交过程中按钮被禁用', async () => {
+    let resolveLogin: (v: any) => void
+    mockLogin.mockImplementation(
+      () => new Promise((resolve) => { resolveLogin = resolve })
+    )
+
+    const wrapper = mount(LoginFormTestComponent)
+
+    await wrapper.find('#email').setValue('test@example.com')
+    await wrapper.find('#password').setValue('password123')
+    await wrapper.find('form').trigger('submit')
+
+    expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+
+    resolveLogin!({
+      access_token: 'token',
+      token_type: 'Bearer',
+      user: { id: 1, username: 'test', email: 'test@example.com', role: 'user', balance: 0, concurrency: 5, status: 'active', allowed_groups: null, created_at: '', updated_at: '' },
+    })
+    await flushPromises()
+
+    expect(wrapper.find('button').attributes('disabled')).toBeUndefined()
+  })
+})

frontend/src/components/account/AccountCapacityCell.vue

@@ -52,6 +52,25 @@
         <span class="font-mono">{{ account.max_sessions }}</span>
       </span>
     </div>
+
+    <!-- RPM 限制（仅 Anthropic OAuth/SetupToken 且启用时显示） -->
+    <div v-if="showRpmLimit" class="flex items-center gap-1">
+      <span
+        :class="[
+          'inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-medium',
+          rpmClass
+        ]"
+        :title="rpmTooltip"
+      >
+        <svg class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+        </svg>
+        <span class="font-mono">{{ currentRPM }}</span>
+        <span class="text-gray-400 dark:text-gray-500">/</span>
+        <span class="font-mono">{{ account.base_rpm }}</span>
+        <span class="text-[9px] opacity-60">{{ rpmStrategyTag }}</span>
+      </span>
+    </div>
   </div>
 </template>
 
@@ -125,19 +144,15 @@ const windowCostClass = computed(() => {
   const limit = props.account.window_cost_limit || 0
   const reserve = props.account.window_cost_sticky_reserve || 10
 
-  // >= 阈值+预留: 完全不可调度 (红色)
   if (current >= limit + reserve) {
     return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
   }
-  // >= 阈值: 仅粘性会话 (橙色)
   if (current >= limit) {
     return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
   }
-  // >= 80% 阈值: 警告 (黄色)
   if (current >= limit * 0.8) {
     return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
   }
-  // 正常 (绿色)
   return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
 })
 
@@ -165,15 +180,12 @@ const sessionLimitClass = computed(() => {
   const current = activeSessions.value
   const max = props.account.max_sessions || 0
 
-  // >= 最大: 完全占满 (红色)
   if (current >= max) {
     return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
   }
-  // >= 80%: 警告 (黄色)
   if (current >= max * 0.8) {
     return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
   }
-  // 正常 (绿色)
   return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
 })
 
@@ -191,6 +203,89 @@ const sessionLimitTooltip = computed(() => {
   return t('admin.accounts.capacity.sessions.normal', { idle })
 })
 
+// 是否显示 RPM 限制
+const showRpmLimit = computed(() => {
+  return (
+    isAnthropicOAuthOrSetupToken.value &&
+    props.account.base_rpm !== undefined &&
+    props.account.base_rpm !== null &&
+    props.account.base_rpm > 0
+  )
+})
+
+// 当前 RPM 计数
+const currentRPM = computed(() => props.account.current_rpm ?? 0)
+
+// RPM 策略
+const rpmStrategy = computed(() => props.account.rpm_strategy || 'tiered')
+
+// RPM 策略标签
+const rpmStrategyTag = computed(() => {
+  return rpmStrategy.value === 'sticky_exempt' ? '[S]' : '[T]'
+})
+
+// RPM buffer 计算（与后端一致：base <= 0 时 buffer 为 0）
+const rpmBuffer = computed(() => {
+  const base = props.account.base_rpm || 0
+  return props.account.rpm_sticky_buffer ?? (base > 0 ? Math.max(1, Math.floor(base / 5)) : 0)
+})
+
+// RPM 状态样式
+const rpmClass = computed(() => {
+  if (!showRpmLimit.value) return ''
+
+  const current = currentRPM.value
+  const base = props.account.base_rpm ?? 0
+  const buffer = rpmBuffer.value
+
+  if (rpmStrategy.value === 'tiered') {
+    if (current >= base + buffer) {
+      return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+    }
+    if (current >= base) {
+      return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
+    }
+  } else {
+    if (current >= base) {
+      return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
+    }
+  }
+  if (current >= base * 0.8) {
+    return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+  }
+  return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
+})
+
+// RPM 提示文字（增强版：显示策略、区域、缓冲区）
+const rpmTooltip = computed(() => {
+  if (!showRpmLimit.value) return ''
+
+  const current = currentRPM.value
+  const base = props.account.base_rpm ?? 0
+  const buffer = rpmBuffer.value
+
+  if (rpmStrategy.value === 'tiered') {
+    if (current >= base + buffer) {
+      return t('admin.accounts.capacity.rpm.tieredBlocked', { buffer })
+    }
+    if (current >= base) {
+      return t('admin.accounts.capacity.rpm.tieredStickyOnly', { buffer })
+    }
+    if (current >= base * 0.8) {
+      return t('admin.accounts.capacity.rpm.tieredWarning')
+    }
+    return t('admin.accounts.capacity.rpm.tieredNormal')
+  } else {
+    if (current >= base) {
+      return t('admin.accounts.capacity.rpm.stickyExemptOver')
+    }
+    if (current >= base * 0.8) {
+      return t('admin.accounts.capacity.rpm.stickyExemptWarning')
+    }
+    return t('admin.accounts.capacity.rpm.stickyExemptNormal')
+  }
+})
+
 // 格式化费用显示
 const formatCost = (value: number | null | undefined) => {
   if (value === null || value === undefined) return '0'

frontend/src/components/account/AccountStatusIndicator.vue

@@ -77,13 +77,23 @@
     </div>
 
     <!-- Model Rate Limit Indicators (Antigravity OAuth Smart Retry) -->
-    <template v-if="activeModelRateLimits.length > 0">
-      <div v-for="item in activeModelRateLimits" :key="item.model" class="group relative">
+    <div
+      v-if="activeModelRateLimits.length > 0"
+      :class="[
+        activeModelRateLimits.length <= 4
+          ? 'flex flex-col gap-1'
+          : activeModelRateLimits.length <= 8
+            ? 'columns-2 gap-x-2'
+            : 'columns-3 gap-x-2'
+      ]"
+    >
+      <div v-for="item in activeModelRateLimits" :key="item.model" class="group relative mb-1 break-inside-avoid">
         <span
           class="inline-flex items-center gap-1 rounded bg-purple-100 px-1.5 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
         >
           <Icon name="exclamationTriangle" size="xs" :stroke-width="2" />
           {{ formatScopeName(item.model) }}
+          <span class="text-[10px] opacity-70">{{ formatModelResetTime(item.reset_at) }}</span>
         </span>
         <!-- Tooltip -->
         <div
@@ -95,7 +105,7 @@
           ></div>
         </div>
       </div>
-    </template>
+    </div>
 
     <!-- Overload Indicator (529) -->
     <div v-if="isOverloaded" class="group relative">
@@ -154,17 +164,52 @@ const activeModelRateLimits = computed(() => {
 })
 
 const formatScopeName = (scope: string): string => {
-  const names: Record<string, string> = {
+  const aliases: Record<string, string> = {
+    // Claude 系列
+    'claude-opus-4-6': 'COpus46',
+    'claude-opus-4-6-thinking': 'COpus46T',
+    'claude-sonnet-4-6': 'CSon46',
+    'claude-sonnet-4-5': 'CSon45',
+    'claude-sonnet-4-5-thinking': 'CSon45T',
+    // Gemini 2.5 系列
+    'gemini-2.5-flash': 'G25F',
+    'gemini-2.5-flash-lite': 'G25FL',
+    'gemini-2.5-flash-thinking': 'G25FT',
+    'gemini-2.5-pro': 'G25P',
+    // Gemini 3 系列
+    'gemini-3-flash': 'G3F',
+    'gemini-3.1-pro-high': 'G3PH',
+    'gemini-3.1-pro-low': 'G3PL',
+    'gemini-3-pro-image': 'G3PI',
+    'gemini-3.1-flash-image': 'GImage',
+    // 其他
+    'gpt-oss-120b-medium': 'GPT120',
+    'tab_flash_lite_preview': 'TabFL',
+    // 旧版 scope 别名（兼容）
     claude: 'Claude',
-    claude_sonnet: 'Claude Sonnet',
-    claude_opus: 'Claude Opus',
-    claude_haiku: 'Claude Haiku',
+    claude_sonnet: 'CSon',
+    claude_opus: 'COpus',
+    claude_haiku: 'CHaiku',
     gemini_text: 'Gemini',
-    gemini_image: 'Image',
-    gemini_flash: 'Gemini Flash',
-    gemini_pro: 'Gemini Pro'
+    gemini_image: 'GImg',
+    gemini_flash: 'GFlash',
+    gemini_pro: 'GPro',
   }
-  return names[scope] || scope
+  return aliases[scope] || scope
+}
+
+const formatModelResetTime = (resetAt: string): string => {
+  const date = new Date(resetAt)
+  const now = new Date()
+  const diffMs = date.getTime() - now.getTime()
+  if (diffMs <= 0) return ''
+  const totalSecs = Math.floor(diffMs / 1000)
+  const h = Math.floor(totalSecs / 3600)
+  const m = Math.floor((totalSecs % 3600) / 60)
+  const s = totalSecs % 60
+  if (h > 0) return `${h}h${m}m`
+  if (m > 0) return `${m}m${s}s`
+  return `${s}s`
 }
 
 // Computed: is overloaded (529)

frontend/src/components/account/AccountTestModal.vue

@@ -41,7 +41,7 @@
         </span>
       </div>
 
-      <div class="space-y-1.5">
+      <div v-if="!isSoraAccount" class="space-y-1.5">
         <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
           {{ t('admin.accounts.selectTestModel') }}
         </label>
@@ -54,6 +54,12 @@
           :placeholder="loadingModels ? t('common.loading') + '...' : t('admin.accounts.selectTestModel')"
         />
       </div>
+      <div
+        v-else
+        class="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-700 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-300"
+      >
+        {{ t('admin.accounts.soraTestHint') }}
+      </div>
 
       <!-- Terminal Output -->
       <div class="group relative">
@@ -135,12 +141,12 @@
         <div class="flex items-center gap-3">
           <span class="flex items-center gap-1">
             <Icon name="cpu" size="sm" :stroke-width="2" />
-            {{ t('admin.accounts.testModel') }}
+            {{ isSoraAccount ? t('admin.accounts.soraTestTarget') : t('admin.accounts.testModel') }}
           </span>
         </div>
         <span class="flex items-center gap-1">
           <Icon name="chatBubble" size="sm" :stroke-width="2" />
-          {{ t('admin.accounts.testPrompt') }}
+          {{ isSoraAccount ? t('admin.accounts.soraTestMode') : t('admin.accounts.testPrompt') }}
         </span>
       </div>
     </div>
@@ -156,10 +162,10 @@
         </button>
         <button
           @click="startTest"
-          :disabled="status === 'connecting' || !selectedModelId"
+          :disabled="status === 'connecting' || (!isSoraAccount && !selectedModelId)"
           :class="[
             'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all',
-            status === 'connecting' || !selectedModelId
+            status === 'connecting' || (!isSoraAccount && !selectedModelId)
               ? 'cursor-not-allowed bg-primary-400 text-white'
               : status === 'success'
                 ? 'bg-green-500 text-white hover:bg-green-600'
@@ -232,7 +238,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, nextTick } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import BaseDialog from '@/components/common/BaseDialog.vue'
 import Select from '@/components/common/Select.vue'
@@ -267,6 +273,7 @@ const availableModels = ref<ClaudeModel[]>([])
 const selectedModelId = ref('')
 const loadingModels = ref(false)
 let eventSource: EventSource | null = null
+const isSoraAccount = computed(() => props.account?.platform === 'sora')
 
 // Load available models when modal opens
 watch(
@@ -283,6 +290,12 @@ watch(
 
 const loadAvailableModels = async () => {
   if (!props.account) return
+  if (props.account.platform === 'sora') {
+    availableModels.value = []
+    selectedModelId.value = ''
+    loadingModels.value = false
+    return
+  }
 
   loadingModels.value = true
   selectedModelId.value = '' // Reset selection before loading
@@ -350,7 +363,7 @@ const scrollToBottom = async () => {
 }
 
 const startTest = async () => {
-  if (!props.account || !selectedModelId.value) return
+  if (!props.account || (!isSoraAccount.value && !selectedModelId.value)) return
 
   resetState()
   status.value = 'connecting'
@@ -371,7 +384,9 @@ const startTest = async () => {
         Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({ model_id: selectedModelId.value })
+      body: JSON.stringify(
+        isSoraAccount.value ? {} : { model_id: selectedModelId.value }
+      )
     })
 
     if (!response.ok) {
@@ -428,7 +443,10 @@ const handleEvent = (event: {
       if (event.model) {
         addLine(t('admin.accounts.usingModel', { model: event.model }), 'text-cyan-400')
       }
-      addLine(t('admin.accounts.sendingTestMessage'), 'text-gray-400')
+      addLine(
+        isSoraAccount.value ? t('admin.accounts.soraTestingFlow') : t('admin.accounts.sendingTestMessage'),
+        'text-gray-400'
+      )
       addLine('', 'text-gray-300')
       addLine(t('admin.accounts.response'), 'text-yellow-400')
       break

frontend/src/components/account/AccountTodayStatsCell.vue

@@ -1,26 +1,26 @@
 <template>
   <div>
     <!-- Loading state -->
-    <div v-if="loading" class="space-y-0.5">
+    <div v-if="props.loading && !props.stats" class="space-y-0.5">
       <div class="h-3 w-12 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
       <div class="h-3 w-16 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
       <div class="h-3 w-10 animate-pulse rounded bg-gray-200 dark:bg-gray-700"></div>
     </div>
 
     <!-- Error state -->
-    <div v-else-if="error" class="text-xs text-red-500">
-      {{ error }}
+    <div v-else-if="props.error && !props.stats" class="text-xs text-red-500">
+      {{ props.error }}
     </div>
 
     <!-- Stats data -->
-    <div v-else-if="stats" class="space-y-0.5 text-xs">
+    <div v-else-if="props.stats" class="space-y-0.5 text-xs">
       <!-- Requests -->
       <div class="flex items-center gap-1">
         <span class="text-gray-500 dark:text-gray-400"
           >{{ t('admin.accounts.stats.requests') }}:</span
         >
         <span class="font-medium text-gray-700 dark:text-gray-300">{{
-          formatNumber(stats.requests)
+          formatNumber(props.stats.requests)
         }}</span>
       </div>
       <!-- Tokens -->
@@ -29,21 +29,21 @@
           >{{ t('admin.accounts.stats.tokens') }}:</span
         >
         <span class="font-medium text-gray-700 dark:text-gray-300">{{
-          formatTokens(stats.tokens)
+          formatTokens(props.stats.tokens)
         }}</span>
       </div>
       <!-- Cost (Account) -->
       <div class="flex items-center gap-1">
         <span class="text-gray-500 dark:text-gray-400">{{ t('usage.accountBilled') }}:</span>
         <span class="font-medium text-emerald-600 dark:text-emerald-400">{{
-          formatCurrency(stats.cost)
+          formatCurrency(props.stats.cost)
         }}</span>
       </div>
       <!-- Cost (User/API Key) -->
-      <div v-if="stats.user_cost != null" class="flex items-center gap-1">
+      <div v-if="props.stats.user_cost != null" class="flex items-center gap-1">
         <span class="text-gray-500 dark:text-gray-400">{{ t('usage.userBilled') }}:</span>
         <span class="font-medium text-gray-700 dark:text-gray-300">{{
-          formatCurrency(stats.user_cost)
+          formatCurrency(props.stats.user_cost)
         }}</span>
       </div>
     </div>
@@ -54,22 +54,25 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { adminAPI } from '@/api/admin'
-import type { Account, WindowStats } from '@/types'
+import type { WindowStats } from '@/types'
 import { formatNumber, formatCurrency } from '@/utils/format'
 
-const props = defineProps<{
-  account: Account
-}>()
+const props = withDefaults(
+  defineProps<{
+    stats?: WindowStats | null
+    loading?: boolean
+    error?: string | null
+  }>(),
+  {
+    stats: null,
+    loading: false,
+    error: null
+  }
+)
 
 const { t } = useI18n()
 
-const loading = ref(false)
-const error = ref<string | null>(null)
-const stats = ref<WindowStats | null>(null)
-
 // Format large token numbers (e.g., 1234567 -> 1.23M)
 const formatTokens = (tokens: number): string => {
   if (tokens >= 1000000) {
@@ -79,22 +82,4 @@ const formatTokens = (tokens: number): string => {
   }
   return tokens.toString()
 }
-
-const loadStats = async () => {
-  loading.value = true
-  error.value = null
-
-  try {
-    stats.value = await adminAPI.accounts.getTodayStats(props.account.id)
-  } catch (e: any) {
-    error.value = 'Failed'
-    console.error('Failed to load today stats:', e)
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(() => {
-  loadStats()
-})
 </script>

frontend/src/components/account/AccountUsageCell.vue

@@ -172,12 +172,12 @@
           color="purple"
         />
 
-        <!-- Claude 4.5 -->
+        <!-- Claude -->
         <UsageProgressBar
-          v-if="antigravityClaude45UsageFromAPI !== null"
-          :label="t('admin.accounts.usageWindow.claude45')"
-          :utilization="antigravityClaude45UsageFromAPI.utilization"
-          :resets-at="antigravityClaude45UsageFromAPI.resetTime"
+          v-if="antigravityClaudeUsageFromAPI !== null"
+          :label="t('admin.accounts.usageWindow.claude')"
+          :utilization="antigravityClaudeUsageFromAPI.utilization"
+          :resets-at="antigravityClaudeUsageFromAPI.resetTime"
           color="amber"
         />
       </div>
@@ -282,6 +282,7 @@ import { ref, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { adminAPI } from '@/api/admin'
 import type { Account, AccountUsageInfo, GeminiCredentials, WindowStats } from '@/types'
+import { resolveCodexUsageWindow } from '@/utils/codexUsage'
 import UsageProgressBar from './UsageProgressBar.vue'
 import AccountQuotaInfo from './AccountQuotaInfo.vue'
 
@@ -326,153 +327,18 @@ const geminiUsageAvailable = computed(() => {
   )
 })
 
+const codex5hWindow = computed(() => resolveCodexUsageWindow(props.account.extra, '5h'))
+const codex7dWindow = computed(() => resolveCodexUsageWindow(props.account.extra, '7d'))
+
 // OpenAI Codex usage computed properties
 const hasCodexUsage = computed(() => {
-  const extra = props.account.extra
-  return (
-    extra &&
-    // Check for new canonical fields first
-    (extra.codex_5h_used_percent !== undefined ||
-      extra.codex_7d_used_percent !== undefined ||
-      // Fallback to legacy fields
-      extra.codex_primary_used_percent !== undefined ||
-      extra.codex_secondary_used_percent !== undefined)
-  )
+  return codex5hWindow.value.usedPercent !== null || codex7dWindow.value.usedPercent !== null
 })
 
-// 5h window usage (prefer canonical field)
-const codex5hUsedPercent = computed(() => {
-  const extra = props.account.extra
-  if (!extra) return null
-
-  // Prefer canonical field
-  if (extra.codex_5h_used_percent !== undefined) {
-    return extra.codex_5h_used_percent
-  }
-
-  // Fallback: detect from legacy fields using window_minutes
-  if (
-    extra.codex_primary_window_minutes !== undefined &&
-    extra.codex_primary_window_minutes <= 360
-  ) {
-    return extra.codex_primary_used_percent ?? null
-  }
-  if (
-    extra.codex_secondary_window_minutes !== undefined &&
-    extra.codex_secondary_window_minutes <= 360
-  ) {
-    return extra.codex_secondary_used_percent ?? null
-  }
-
-  // Legacy assumption: secondary = 5h (may be incorrect)
-  return extra.codex_secondary_used_percent ?? null
-})
-
-const codex5hResetAt = computed(() => {
-  const extra = props.account.extra
-  if (!extra) return null
-
-  // Prefer canonical field
-  if (extra.codex_5h_reset_after_seconds !== undefined) {
-    const resetTime = new Date(Date.now() + extra.codex_5h_reset_after_seconds * 1000)
-    return resetTime.toISOString()
-  }
-
-  // Fallback: detect from legacy fields using window_minutes
-  if (
-    extra.codex_primary_window_minutes !== undefined &&
-    extra.codex_primary_window_minutes <= 360
-  ) {
-    if (extra.codex_primary_reset_after_seconds !== undefined) {
-      const resetTime = new Date(Date.now() + extra.codex_primary_reset_after_seconds * 1000)
-      return resetTime.toISOString()
-    }
-  }
-  if (
-    extra.codex_secondary_window_minutes !== undefined &&
-    extra.codex_secondary_window_minutes <= 360
-  ) {
-    if (extra.codex_secondary_reset_after_seconds !== undefined) {
-      const resetTime = new Date(Date.now() + extra.codex_secondary_reset_after_seconds * 1000)
-      return resetTime.toISOString()
-    }
-  }
-
-  // Legacy assumption: secondary = 5h
-  if (extra.codex_secondary_reset_after_seconds !== undefined) {
-    const resetTime = new Date(Date.now() + extra.codex_secondary_reset_after_seconds * 1000)
-    return resetTime.toISOString()
-  }
-
-  return null
-})
-
-// 7d window usage (prefer canonical field)
-const codex7dUsedPercent = computed(() => {
-  const extra = props.account.extra
-  if (!extra) return null
-
-  // Prefer canonical field
-  if (extra.codex_7d_used_percent !== undefined) {
-    return extra.codex_7d_used_percent
-  }
-
-  // Fallback: detect from legacy fields using window_minutes
-  if (
-    extra.codex_primary_window_minutes !== undefined &&
-    extra.codex_primary_window_minutes >= 10000
-  ) {
-    return extra.codex_primary_used_percent ?? null
-  }
-  if (
-    extra.codex_secondary_window_minutes !== undefined &&
-    extra.codex_secondary_window_minutes >= 10000
-  ) {
-    return extra.codex_secondary_used_percent ?? null
-  }
-
-  // Legacy assumption: primary = 7d (may be incorrect)
-  return extra.codex_primary_used_percent ?? null
-})
-
-const codex7dResetAt = computed(() => {
-  const extra = props.account.extra
-  if (!extra) return null
-
-  // Prefer canonical field
-  if (extra.codex_7d_reset_after_seconds !== undefined) {
-    const resetTime = new Date(Date.now() + extra.codex_7d_reset_after_seconds * 1000)
-    return resetTime.toISOString()
-  }
-
-  // Fallback: detect from legacy fields using window_minutes
-  if (
-    extra.codex_primary_window_minutes !== undefined &&
-    extra.codex_primary_window_minutes >= 10000
-  ) {
-    if (extra.codex_primary_reset_after_seconds !== undefined) {
-      const resetTime = new Date(Date.now() + extra.codex_primary_reset_after_seconds * 1000)
-      return resetTime.toISOString()
-    }
-  }
-  if (
-    extra.codex_secondary_window_minutes !== undefined &&
-    extra.codex_secondary_window_minutes >= 10000
-  ) {
-    if (extra.codex_secondary_reset_after_seconds !== undefined) {
-      const resetTime = new Date(Date.now() + extra.codex_secondary_reset_after_seconds * 1000)
-      return resetTime.toISOString()
-    }
-  }
-
-  // Legacy assumption: primary = 7d
-  if (extra.codex_primary_reset_after_seconds !== undefined) {
-    const resetTime = new Date(Date.now() + extra.codex_primary_reset_after_seconds * 1000)
-    return resetTime.toISOString()
-  }
-
-  return null
-})
+const codex5hUsedPercent = computed(() => codex5hWindow.value.usedPercent)
+const codex5hResetAt = computed(() => codex5hWindow.value.resetAt)
+const codex7dUsedPercent = computed(() => codex7dWindow.value.usedPercent)
+const codex7dResetAt = computed(() => codex7dWindow.value.resetAt)
 
 // Antigravity quota types (用于 API 返回的数据)
 interface AntigravityUsageResult {
@@ -531,12 +397,17 @@ const antigravity3ProUsageFromAPI = computed(() =>
 // Gemini 3 Flash from API
 const antigravity3FlashUsageFromAPI = computed(() => getAntigravityUsageFromAPI(['gemini-3-flash']))
 
-// Gemini 3 Image from API
-const antigravity3ImageUsageFromAPI = computed(() => getAntigravityUsageFromAPI(['gemini-3-pro-image']))
+// Gemini Image from API
+const antigravity3ImageUsageFromAPI = computed(() =>
+  getAntigravityUsageFromAPI(['gemini-3.1-flash-image', 'gemini-3-pro-image'])
+)
 
-// Claude 4.5 from API
-const antigravityClaude45UsageFromAPI = computed(() =>
-  getAntigravityUsageFromAPI(['claude-sonnet-4-5', 'claude-opus-4-5-thinking'])
+// Claude from API (all Claude model variants)
+const antigravityClaudeUsageFromAPI = computed(() =>
+  getAntigravityUsageFromAPI([
+    'claude-sonnet-4-5', 'claude-opus-4-5-thinking',
+    'claude-sonnet-4-6', 'claude-opus-4-6', 'claude-opus-4-6-thinking',
+  ])
 )
 
 // Antigravity 账户类型（从 load_code_assist 响应中提取）

frontend/src/components/account/BulkEditAccountModal.vue

@@ -21,6 +21,16 @@
         </p>
       </div>
 
+      <!-- Mixed platform warning -->
+      <div v-if="isMixedPlatform" class="rounded-lg bg-amber-50 p-4 dark:bg-amber-900/20">
+        <p class="text-sm text-amber-700 dark:text-amber-400">
+          <svg class="mr-1.5 inline h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          {{ t('admin.accounts.bulkEdit.mixedPlatformWarning', { platforms: selectedPlatforms.join(', ') }) }}
+        </p>
+      </div>
+
       <!-- Base URL (API Key only) -->
       <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
         <div class="mb-3 flex items-center justify-between">
@@ -157,7 +167,7 @@
             <!-- Model Checkbox List -->
             <div class="mb-3 grid grid-cols-2 gap-2">
               <label
-                v-for="model in allModels"
+                v-for="model in filteredModels"
                 :key="model.value"
                 class="flex cursor-pointer items-center rounded-lg border p-3 transition-all hover:bg-gray-50 dark:border-dark-600 dark:hover:bg-dark-700"
                 :class="
@@ -278,7 +288,7 @@
             <!-- Quick Add Buttons -->
             <div class="flex flex-wrap gap-2">
               <button
-                v-for="preset in presetMappings"
+                v-for="preset in filteredPresets"
                 :key="preset.label"
                 type="button"
                 :class="['rounded-lg px-3 py-1 text-xs transition-colors', preset.color]"
@@ -575,6 +585,132 @@
         </div>
       </div>
 
+      <!-- RPM Limit (仅全部为 Anthropic OAuth/SetupToken 时显示) -->
+      <div v-if="allAnthropicOAuthOrSetupToken" class="border-t border-gray-200 pt-4 dark:border-dark-600">
+        <div class="mb-3 flex items-center justify-between">
+          <label
+            id="bulk-edit-rpm-limit-label"
+            class="input-label mb-0"
+            for="bulk-edit-rpm-limit-enabled"
+          >
+            {{ t('admin.accounts.quotaControl.rpmLimit.label') }}
+          </label>
+          <input
+            v-model="enableRpmLimit"
+            id="bulk-edit-rpm-limit-enabled"
+            type="checkbox"
+            aria-controls="bulk-edit-rpm-limit-body"
+            class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+          />
+        </div>
+
+        <div
+          id="bulk-edit-rpm-limit-body"
+          :class="!enableRpmLimit && 'pointer-events-none opacity-50'"
+          role="group"
+          aria-labelledby="bulk-edit-rpm-limit-label"
+        >
+          <div class="mb-3 flex items-center justify-between">
+            <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('admin.accounts.quotaControl.rpmLimit.hint') }}</span>
+            <button
+              type="button"
+              @click="rpmLimitEnabled = !rpmLimitEnabled"
+              :class="[
+                'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
+                rpmLimitEnabled ? 'bg-primary-600' : 'bg-gray-200 dark:bg-dark-600'
+              ]"
+            >
+              <span
+                :class="[
+                  'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
+                  rpmLimitEnabled ? 'translate-x-5' : 'translate-x-0'
+                ]"
+              />
+            </button>
+          </div>
+
+          <div v-if="rpmLimitEnabled" class="space-y-3">
+            <div>
+              <label class="input-label text-xs">{{ t('admin.accounts.quotaControl.rpmLimit.baseRpm') }}</label>
+              <input
+                v-model.number="bulkBaseRpm"
+                type="number"
+                min="1"
+                max="1000"
+                step="1"
+                class="input"
+                :placeholder="t('admin.accounts.quotaControl.rpmLimit.baseRpmPlaceholder')"
+              />
+              <p class="input-hint">{{ t('admin.accounts.quotaControl.rpmLimit.baseRpmHint') }}</p>
+            </div>
+
+            <div>
+              <label class="input-label text-xs">{{ t('admin.accounts.quotaControl.rpmLimit.strategy') }}</label>
+              <div class="flex gap-2">
+                <button
+                  type="button"
+                  @click="bulkRpmStrategy = 'tiered'"
+                  :class="[
+                    'flex-1 rounded-lg px-3 py-2 text-sm font-medium transition-all',
+                    bulkRpmStrategy === 'tiered'
+                      ? 'bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400'
+                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-400 dark:hover:bg-dark-500'
+                  ]"
+                >
+                  {{ t('admin.accounts.quotaControl.rpmLimit.strategyTiered') }}
+                </button>
+                <button
+                  type="button"
+                  @click="bulkRpmStrategy = 'sticky_exempt'"
+                  :class="[
+                    'flex-1 rounded-lg px-3 py-2 text-sm font-medium transition-all',
+                    bulkRpmStrategy === 'sticky_exempt'
+                      ? 'bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400'
+                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-dark-600 dark:text-gray-400 dark:hover:bg-dark-500'
+                  ]"
+                >
+                  {{ t('admin.accounts.quotaControl.rpmLimit.strategyStickyExempt') }}
+                </button>
+              </div>
+            </div>
+
+            <div v-if="bulkRpmStrategy === 'tiered'">
+              <label class="input-label text-xs">{{ t('admin.accounts.quotaControl.rpmLimit.stickyBuffer') }}</label>
+              <input
+                v-model.number="bulkRpmStickyBuffer"
+                type="number"
+                min="1"
+                step="1"
+                class="input"
+                :placeholder="t('admin.accounts.quotaControl.rpmLimit.stickyBufferPlaceholder')"
+              />
+              <p class="input-hint">{{ t('admin.accounts.quotaControl.rpmLimit.stickyBufferHint') }}</p>
+            </div>
+
+            </div>
+          </div>
+
+        <!-- 用户消息限速模式（独立于 RPM 开关，始终可见） -->
+        <div class="mt-4">
+          <label class="input-label">{{ t('admin.accounts.quotaControl.rpmLimit.userMsgQueue') }}</label>
+          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 mb-2">
+            {{ t('admin.accounts.quotaControl.rpmLimit.userMsgQueueHint') }}
+          </p>
+          <div class="flex space-x-2">
+            <button type="button" v-for="opt in umqModeOptions" :key="opt.value"
+              @click="userMsgQueueMode = userMsgQueueMode === opt.value ? null : opt.value"
+              :class="[
+                'px-3 py-1.5 text-sm rounded-md border transition-colors',
+                userMsgQueueMode === opt.value
+                  ? 'bg-primary-600 text-white border-primary-600'
+                  : 'bg-white dark:bg-dark-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-dark-500 hover:bg-gray-50 dark:hover:bg-dark-600'
+              ]">
+              {{ opt.label }}
+            </button>
+          </div>
+        </div>
+      </div>
+
       <!-- Groups -->
       <div class="border-t border-gray-200 pt-4 dark:border-dark-600">
         <div class="mb-3 flex items-center justify-between">
@@ -641,6 +777,17 @@
       </div>
     </template>
   </BaseDialog>
+
+  <ConfirmDialog
+    :show="showMixedChannelWarning"
+    :title="t('admin.accounts.mixedChannelWarningTitle')"
+    :message="mixedChannelWarningMessage"
+    :confirm-text="t('common.confirm')"
+    :cancel-text="t('common.cancel')"
+    :danger="true"
+    @confirm="handleMixedChannelConfirm"
+    @cancel="handleMixedChannelCancel"
+  />
 </template>
 
 <script setup lang="ts">
@@ -648,17 +795,21 @@ import { ref, watch, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
-import type { Proxy, AdminGroup } from '@/types'
+import type { Proxy as ProxyConfig, AdminGroup, AccountPlatform, AccountType } from '@/types'
 import BaseDialog from '@/components/common/BaseDialog.vue'
+import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 import Select from '@/components/common/Select.vue'
 import ProxySelector from '@/components/common/ProxySelector.vue'
 import GroupSelector from '@/components/common/GroupSelector.vue'
 import Icon from '@/components/icons/Icon.vue'
+import { buildModelMappingObject as buildModelMappingPayload } from '@/composables/useModelWhitelist'
 
 interface Props {
   show: boolean
   accountIds: number[]
-  proxies: Proxy[]
+  selectedPlatforms: AccountPlatform[]
+  selectedTypes: AccountType[]
+  proxies: ProxyConfig[]
   groups: AdminGroup[]
 }
 
@@ -671,6 +822,40 @@ const emit = defineEmits<{
 const { t } = useI18n()
 const appStore = useAppStore()
 
+// Platform awareness
+const isMixedPlatform = computed(() => props.selectedPlatforms.length > 1)
+
+// 是否全部为 Anthropic OAuth/SetupToken（RPM 配置仅在此条件下显示）
+const allAnthropicOAuthOrSetupToken = computed(() => {
+  return (
+    props.selectedPlatforms.length === 1 &&
+    props.selectedPlatforms[0] === 'anthropic' &&
+    props.selectedTypes.every(t => t === 'oauth' || t === 'setup-token')
+  )
+})
+
+const platformModelPrefix: Record<string, string[]> = {
+  anthropic: ['claude-'],
+  antigravity: ['claude-', 'gemini-', 'gpt-oss-', 'tab_'],
+  openai: ['gpt-'],
+  gemini: ['gemini-'],
+  sora: []
+}
+
+const filteredModels = computed(() => {
+  if (props.selectedPlatforms.length === 0) return allModels
+  const prefixes = [...new Set(props.selectedPlatforms.flatMap(p => platformModelPrefix[p] || []))]
+  if (prefixes.length === 0) return allModels
+  return allModels.filter(m => prefixes.some(prefix => m.value.startsWith(prefix)))
+})
+
+const filteredPresets = computed(() => {
+  if (props.selectedPlatforms.length === 0) return presetMappings
+  const prefixes = [...new Set(props.selectedPlatforms.flatMap(p => platformModelPrefix[p] || []))]
+  if (prefixes.length === 0) return presetMappings
+  return presetMappings.filter(m => prefixes.some(prefix => m.from.startsWith(prefix)))
+})
+
 // Model mapping type
 interface ModelMapping {
   from: string
@@ -688,9 +873,13 @@ const enablePriority = ref(false)
 const enableRateMultiplier = ref(false)
 const enableStatus = ref(false)
 const enableGroups = ref(false)
+const enableRpmLimit = ref(false)
 
 // State - field values
 const submitting = ref(false)
+const showMixedChannelWarning = ref(false)
+const mixedChannelWarningMessage = ref('')
+const pendingUpdatesForConfirm = ref<Record<string, unknown> | null>(null)
 const baseUrl = ref('')
 const modelRestrictionMode = ref<'whitelist' | 'mapping'>('whitelist')
 const allowedModels = ref<string[]>([])
@@ -704,10 +893,21 @@ const priority = ref(1)
 const rateMultiplier = ref(1)
 const status = ref<'active' | 'inactive'>('active')
 const groupIds = ref<number[]>([])
+const rpmLimitEnabled = ref(false)
+const bulkBaseRpm = ref<number | null>(null)
+const bulkRpmStrategy = ref<'tiered' | 'sticky_exempt'>('tiered')
+const bulkRpmStickyBuffer = ref<number | null>(null)
+const userMsgQueueMode = ref<string | null>(null)
+const umqModeOptions = computed(() => [
+  { value: '', label: t('admin.accounts.quotaControl.rpmLimit.umqModeOff') },
+  { value: 'throttle', label: t('admin.accounts.quotaControl.rpmLimit.umqModeThrottle') },
+  { value: 'serialize', label: t('admin.accounts.quotaControl.rpmLimit.umqModeSerialize') },
+])
 
-// All models list (combined Anthropic + OpenAI)
+// All models list (combined Anthropic + OpenAI + Gemini)
 const allModels = [
   { value: 'claude-opus-4-6', label: 'Claude Opus 4.6' },
+  { value: 'claude-sonnet-4-6', label: 'Claude Sonnet 4.6' },
   { value: 'claude-opus-4-5-20251101', label: 'Claude Opus 4.5' },
   { value: 'claude-sonnet-4-20250514', label: 'Claude Sonnet 4' },
   { value: 'claude-sonnet-4-5-20250929', label: 'Claude Sonnet 4.5' },
@@ -716,16 +916,25 @@ const allModels = [
   { value: 'claude-3-opus-20240229', label: 'Claude 3 Opus' },
   { value: 'claude-3-5-sonnet-20241022', label: 'Claude 3.5 Sonnet' },
   { value: 'claude-3-haiku-20240307', label: 'Claude 3 Haiku' },
+  { value: 'gpt-5.3-codex', label: 'GPT-5.3 Codex' },
+  { value: 'gpt-5.3-codex-spark', label: 'GPT-5.3 Codex Spark' },
   { value: 'gpt-5.2-2025-12-11', label: 'GPT-5.2' },
   { value: 'gpt-5.2-codex', label: 'GPT-5.2 Codex' },
   { value: 'gpt-5.1-codex-max', label: 'GPT-5.1 Codex Max' },
   { value: 'gpt-5.1-codex', label: 'GPT-5.1 Codex' },
   { value: 'gpt-5.1-2025-11-13', label: 'GPT-5.1' },
   { value: 'gpt-5.1-codex-mini', label: 'GPT-5.1 Codex Mini' },
-  { value: 'gpt-5-2025-08-07', label: 'GPT-5' }
+  { value: 'gpt-5-2025-08-07', label: 'GPT-5' },
+  { value: 'gemini-2.0-flash', label: 'Gemini 2.0 Flash' },
+  { value: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
+  { value: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
+  { value: 'gemini-3.1-flash-image', label: 'Gemini 3.1 Flash Image' },
+  { value: 'gemini-3-pro-image', label: 'Gemini 3 Pro Image (Legacy)' },
+  { value: 'gemini-3-flash-preview', label: 'Gemini 3 Flash Preview' },
+  { value: 'gemini-3-pro-preview', label: 'Gemini 3 Pro Preview' }
 ]
 
-// Preset mappings (combined Anthropic + OpenAI)
+// Preset mappings (combined Anthropic + OpenAI + Gemini)
 const presetMappings = [
   {
     label: 'Sonnet 4',
@@ -750,16 +959,85 @@ const presetMappings = [
   {
     label: 'Opus 4.6',
     from: 'claude-opus-4-6',
-    to: 'claude-opus-4-6',
+    to: 'claude-opus-4-6-thinking',
     color:
       'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400'
   },
+  {
+    label: 'Opus 4.6-thinking',
+    from: 'claude-opus-4-6-thinking',
+    to: 'claude-opus-4-6-thinking',
+    color:
+      'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400'
+  },
+  {
+    label: 'Sonnet 4.6',
+    from: 'claude-sonnet-4-6',
+    to: 'claude-sonnet-4-6',
+    color:
+      'bg-purple-100 text-purple-700 hover:bg-purple-200 dark:bg-purple-900/30 dark:text-purple-400'
+  },
+  {
+    label: 'Sonnet4→4.6',
+    from: 'claude-sonnet-4-20250514',
+    to: 'claude-sonnet-4-6',
+    color: 'bg-sky-100 text-sky-700 hover:bg-sky-200 dark:bg-sky-900/30 dark:text-sky-400'
+  },
+  {
+    label: 'Sonnet4.5→4.6',
+    from: 'claude-sonnet-4-5-20250929',
+    to: 'claude-sonnet-4-6',
+    color: 'bg-cyan-100 text-cyan-700 hover:bg-cyan-200 dark:bg-cyan-900/30 dark:text-cyan-400'
+  },
+  {
+    label: 'Sonnet3.5→4.6',
+    from: 'claude-3-5-sonnet-20241022',
+    to: 'claude-sonnet-4-6',
+    color: 'bg-teal-100 text-teal-700 hover:bg-teal-200 dark:bg-teal-900/30 dark:text-teal-400'
+  },
+  {
+    label: 'Opus4.5→4.6',
+    from: 'claude-opus-4-5-20251101',
+    to: 'claude-opus-4-6-thinking',
+    color:
+      'bg-violet-100 text-violet-700 hover:bg-violet-200 dark:bg-violet-900/30 dark:text-violet-400'
+  },
   {
     label: 'Opus->Sonnet',
     from: 'claude-opus-4-5-20251101',
     to: 'claude-sonnet-4-5-20250929',
     color: 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400'
   },
+  {
+    label: 'Gemini 3.1 Image',
+    from: 'gemini-3.1-flash-image',
+    to: 'gemini-3.1-flash-image',
+    color: 'bg-sky-100 text-sky-700 hover:bg-sky-200 dark:bg-sky-900/30 dark:text-sky-400'
+  },
+  {
+    label: 'G3 Image→3.1',
+    from: 'gemini-3-pro-image',
+    to: 'gemini-3.1-flash-image',
+    color: 'bg-sky-100 text-sky-700 hover:bg-sky-200 dark:bg-sky-900/30 dark:text-sky-400'
+  },
+  {
+    label: 'GPT-5.3 Codex',
+    from: 'gpt-5.3-codex',
+    to: 'gpt-5.3-codex',
+    color: 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400'
+  },
+  {
+    label: 'GPT-5.3 Spark',
+    from: 'gpt-5.3-codex-spark',
+    to: 'gpt-5.3-codex-spark',
+    color: 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-400'
+  },
+  {
+    label: '5.2→5.3',
+    from: 'gpt-5.2-codex',
+    to: 'gpt-5.3-codex',
+    color: 'bg-lime-100 text-lime-700 hover:bg-lime-200 dark:bg-lime-900/30 dark:text-lime-400'
+  },
   {
     label: 'GPT-5.2',
     from: 'gpt-5.2-2025-12-11',
@@ -777,6 +1055,36 @@ const presetMappings = [
     from: 'gpt-5.1-codex-max',
     to: 'gpt-5.1-codex',
     color: 'bg-pink-100 text-pink-700 hover:bg-pink-200 dark:bg-pink-900/30 dark:text-pink-400'
+  },
+  {
+    label: '3-Pro-Preview→3.1-Pro-High',
+    from: 'gemini-3-pro-preview',
+    to: 'gemini-3.1-pro-high',
+    color: 'bg-amber-100 text-amber-700 hover:bg-amber-200 dark:bg-amber-900/30 dark:text-amber-400'
+  },
+  {
+    label: '3-Pro-High→3.1-Pro-High',
+    from: 'gemini-3-pro-high',
+    to: 'gemini-3.1-pro-high',
+    color: 'bg-orange-100 text-orange-700 hover:bg-orange-200 dark:bg-orange-900/30 dark:text-orange-400'
+  },
+  {
+    label: '3-Pro-Low→3.1-Pro-Low',
+    from: 'gemini-3-pro-low',
+    to: 'gemini-3.1-pro-low',
+    color: 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200 dark:bg-yellow-900/30 dark:text-yellow-400'
+  },
+  {
+    label: '3-Flash透传',
+    from: 'gemini-3-flash',
+    to: 'gemini-3-flash',
+    color: 'bg-lime-100 text-lime-700 hover:bg-lime-200 dark:bg-lime-900/30 dark:text-lime-400'
+  },
+  {
+    label: '2.5-Flash-Lite透传',
+    from: 'gemini-2.5-flash-lite',
+    to: 'gemini-2.5-flash-lite',
+    color: 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400'
   }
 ]
 
@@ -866,23 +1174,11 @@ const removeErrorCode = (code: number) => {
 }
 
 const buildModelMappingObject = (): Record<string, string> | null => {
-  const mapping: Record<string, string> = {}
-
-  if (modelRestrictionMode.value === 'whitelist') {
-    for (const model of allowedModels.value) {
-      mapping[model] = model
-    }
-  } else {
-    for (const m of modelMappings.value) {
-      const from = m.from.trim()
-      const to = m.to.trim()
-      if (from && to) {
-        mapping[from] = to
-      }
-    }
-  }
-
-  return Object.keys(mapping).length > 0 ? mapping : null
+  return buildModelMappingPayload(
+    modelRestrictionMode.value,
+    allowedModels.value,
+    modelMappings.value
+  )
 }
 
 const buildUpdatePayload = (): Record<string, unknown> | null => {
@@ -960,13 +1256,77 @@ const buildUpdatePayload = (): Record<string, unknown> | null => {
     updates.credentials = credentials
   }
 
+  // RPM limit settings (写入 extra 字段)
+  if (enableRpmLimit.value) {
+    const extra: Record<string, unknown> = {}
+    if (rpmLimitEnabled.value && bulkBaseRpm.value != null && bulkBaseRpm.value > 0) {
+      extra.base_rpm = bulkBaseRpm.value
+      extra.rpm_strategy = bulkRpmStrategy.value
+      if (bulkRpmStickyBuffer.value != null && bulkRpmStickyBuffer.value > 0) {
+        extra.rpm_sticky_buffer = bulkRpmStickyBuffer.value
+      }
+    } else {
+      // 关闭 RPM 限制 - 设置 base_rpm 为 0，并用空值覆盖关联字段
+      // 后端使用 JSONB || merge 语义，不会删除已有 key，
+      // 所以必须显式发送空值来重置（后端读取时会 fallback 到默认值）
+      extra.base_rpm = 0
+      extra.rpm_strategy = ''
+      extra.rpm_sticky_buffer = 0
+    }
+    updates.extra = extra
+  }
+
+  // UMQ mode（独立于 RPM 保存）
+  if (userMsgQueueMode.value !== null) {
+    if (!updates.extra) updates.extra = {}
+    const umqExtra = updates.extra as Record<string, unknown>
+    umqExtra.user_msg_queue_mode = userMsgQueueMode.value  // '' = 清除账号级覆盖
+    umqExtra.user_msg_queue_enabled = false  // 清理旧字段（JSONB merge）
+  }
+
   return Object.keys(updates).length > 0 ? updates : null
 }
 
+const mixedChannelConfirmed = ref(false)
+
+// 是否需要预检查：改了分组 + 全是单一的 antigravity 或 anthropic 平台
+// 多平台混合的情况由 submitBulkUpdate 的 409 catch 兜底
+const canPreCheck = () =>
+  enableGroups.value &&
+  groupIds.value.length > 0 &&
+  props.selectedPlatforms.length === 1 &&
+  (props.selectedPlatforms[0] === 'antigravity' || props.selectedPlatforms[0] === 'anthropic')
+
 const handleClose = () => {
+  showMixedChannelWarning.value = false
+  mixedChannelWarningMessage.value = ''
+  pendingUpdatesForConfirm.value = null
+  mixedChannelConfirmed.value = false
   emit('close')
 }
 
+// 预检查：提交前调接口检测，有风险就弹窗阻止，返回 false 表示需要用户确认
+const preCheckMixedChannelRisk = async (built: Record<string, unknown>): Promise<boolean> => {
+  if (!canPreCheck()) return true
+  if (mixedChannelConfirmed.value) return true
+
+  try {
+    const result = await adminAPI.accounts.checkMixedChannelRisk({
+      platform: props.selectedPlatforms[0],
+      group_ids: groupIds.value
+    })
+    if (!result.has_risk) return true
+
+    pendingUpdatesForConfirm.value = built
+    mixedChannelWarningMessage.value = result.message || t('admin.accounts.bulkEdit.failed')
+    showMixedChannelWarning.value = true
+    return false
+  } catch (error: any) {
+    appStore.showError(error.message || t('admin.accounts.bulkEdit.failed'))
+    return false
+  }
+}
+
 const handleSubmit = async () => {
   if (props.accountIds.length === 0) {
     appStore.showError(t('admin.accounts.bulkEdit.noSelection'))
@@ -983,19 +1343,33 @@ const handleSubmit = async () => {
     enablePriority.value ||
     enableRateMultiplier.value ||
     enableStatus.value ||
-    enableGroups.value
+    enableGroups.value ||
+    enableRpmLimit.value ||
+    userMsgQueueMode.value !== null
 
   if (!hasAnyFieldEnabled) {
     appStore.showError(t('admin.accounts.bulkEdit.noFieldsSelected'))
     return
   }
 
-  const updates = buildUpdatePayload()
-  if (!updates) {
+  const built = buildUpdatePayload()
+  if (!built) {
     appStore.showError(t('admin.accounts.bulkEdit.noFieldsSelected'))
     return
   }
 
+  const canContinue = await preCheckMixedChannelRisk(built)
+  if (!canContinue) return
+
+  await submitBulkUpdate(built)
+}
+
+const submitBulkUpdate = async (baseUpdates: Record<string, unknown>) => {
+  // 无论是预检查确认还是 409 兜底确认，只要 mixedChannelConfirmed 为 true 就带上 flag
+  const updates = mixedChannelConfirmed.value
+    ? { ...baseUpdates, confirm_mixed_channel_risk: true }
+    : baseUpdates
+
   submitting.value = true
 
   try {
@@ -1012,17 +1386,38 @@ const handleSubmit = async () => {
     }
 
     if (success > 0) {
+      pendingUpdatesForConfirm.value = null
       emit('updated')
       handleClose()
     }
   } catch (error: any) {
-    appStore.showError(error.response?.data?.detail || t('admin.accounts.bulkEdit.failed'))
-    console.error('Error bulk updating accounts:', error)
+    // 兜底：多平台混合场景下，预检查跳过，由后端 409 触发确认框
+    if (error.status === 409 && error.error === 'mixed_channel_warning') {
+      pendingUpdatesForConfirm.value = baseUpdates
+      mixedChannelWarningMessage.value = error.message
+      showMixedChannelWarning.value = true
+    } else {
+      appStore.showError(error.message || t('admin.accounts.bulkEdit.failed'))
+      console.error('Error bulk updating accounts:', error)
+    }
   } finally {
     submitting.value = false
   }
 }
 
+const handleMixedChannelConfirm = async () => {
+  showMixedChannelWarning.value = false
+  mixedChannelConfirmed.value = true
+  if (pendingUpdatesForConfirm.value) {
+    await submitBulkUpdate(pendingUpdatesForConfirm.value)
+  }
+}
+
+const handleMixedChannelCancel = () => {
+  showMixedChannelWarning.value = false
+  pendingUpdatesForConfirm.value = null
+}
+
 // Reset form when modal closes
 watch(
   () => props.show,
@@ -1039,6 +1434,7 @@ watch(
       enableRateMultiplier.value = false
       enableStatus.value = false
       enableGroups.value = false
+      enableRpmLimit.value = false
 
       // Reset all values
       baseUrl.value = ''
@@ -1054,6 +1450,17 @@ watch(
       rateMultiplier.value = 1
       status.value = 'active'
       groupIds.value = []
+      rpmLimitEnabled.value = false
+      bulkBaseRpm.value = null
+      bulkRpmStrategy.value = 'tiered'
+      bulkRpmStickyBuffer.value = null
+      userMsgQueueMode.value = null
+
+      // Reset mixed channel warning state
+      showMixedChannelWarning.value = false
+      mixedChannelWarningMessage.value = ''
+      pendingUpdatesForConfirm.value = null
+      mixedChannelConfirmed.value = false
     }
   }
 )

frontend/src/components/account/ModelWhitelistSelector.vue

@@ -144,11 +144,17 @@ const showDropdown = ref(false)
 const searchQuery = ref('')
 const customModel = ref('')
 const isComposing = ref(false)
+const availableOptions = computed(() => {
+  if (props.platform === 'sora') {
+    return getModelsByPlatform('sora').map(m => ({ value: m, label: m }))
+  }
+  return allModels
+})
 
 const filteredModels = computed(() => {
   const query = searchQuery.value.toLowerCase().trim()
-  if (!query) return allModels
-  return allModels.filter(
+  if (!query) return availableOptions.value
+  return availableOptions.value.filter(
     m => m.value.toLowerCase().includes(query) || m.label.toLowerCase().includes(query)
   )
 })
@@ -197,4 +203,5 @@ const fillRelated = () => {
 const clearAll = () => {
   emit('update:modelValue', [])
 }
+
 </script>

frontend/src/components/account/OAuthAuthorizationFlow.vue

@@ -48,6 +48,28 @@
                 t(getOAuthKey('refreshTokenAuth'))
               }}</span>
             </label>
+            <label v-if="showSessionTokenOption" class="flex cursor-pointer items-center gap-2">
+              <input
+                v-model="inputMethod"
+                type="radio"
+                value="session_token"
+                class="text-blue-600 focus:ring-blue-500"
+              />
+              <span class="text-sm text-blue-900 dark:text-blue-200">{{
+                t(getOAuthKey('sessionTokenAuth'))
+              }}</span>
+            </label>
+            <label v-if="showAccessTokenOption" class="flex cursor-pointer items-center gap-2">
+              <input
+                v-model="inputMethod"
+                type="radio"
+                value="access_token"
+                class="text-blue-600 focus:ring-blue-500"
+              />
+              <span class="text-sm text-blue-900 dark:text-blue-200">{{
+                t('admin.accounts.oauth.openai.accessTokenAuth', '手动输入 AT')
+              }}</span>
+            </label>
           </div>
         </div>
 
@@ -135,6 +157,217 @@
           </div>
         </div>
 
+        <!-- Session Token Input (Sora) -->
+        <div v-if="inputMethod === 'session_token'" class="space-y-4">
+          <div
+            class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
+          >
+            <p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
+              {{ t(getOAuthKey('sessionTokenDesc')) }}
+            </p>
+
+            <div class="mb-4">
+              <label
+                class="mb-2 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300"
+              >
+                <Icon name="key" size="sm" class="text-blue-500" />
+                {{ t(getOAuthKey('sessionTokenRawLabel')) }}
+                <span
+                  v-if="parsedSessionTokenCount > 1"
+                  class="rounded-full bg-blue-500 px-2 py-0.5 text-xs text-white"
+                >
+                  {{ t('admin.accounts.oauth.keysCount', { count: parsedSessionTokenCount }) }}
+                </span>
+              </label>
+              <textarea
+                v-model="sessionTokenInput"
+                rows="3"
+                class="input w-full resize-y font-mono text-sm"
+                :placeholder="t(getOAuthKey('sessionTokenRawPlaceholder'))"
+              ></textarea>
+              <p class="mt-1 text-xs text-blue-600 dark:text-blue-400">
+                {{ t(getOAuthKey('sessionTokenRawHint')) }}
+              </p>
+              <div class="mt-2 flex flex-wrap items-center gap-2">
+                <button
+                  type="button"
+                  class="btn btn-secondary px-2 py-1 text-xs"
+                  @click="handleOpenSoraSessionUrl"
+                >
+                  {{ t(getOAuthKey('openSessionUrl')) }}
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-secondary px-2 py-1 text-xs"
+                  @click="handleCopySoraSessionUrl"
+                >
+                  {{ t(getOAuthKey('copySessionUrl')) }}
+                </button>
+              </div>
+              <p class="mt-1 break-all text-xs text-blue-600 dark:text-blue-400">
+                {{ soraSessionUrl }}
+              </p>
+              <p class="mt-1 text-xs text-amber-600 dark:text-amber-400">
+                {{ t(getOAuthKey('sessionUrlHint')) }}
+              </p>
+              <p
+                v-if="parsedSessionTokenCount > 1"
+                class="mt-1 text-xs text-blue-600 dark:text-blue-400"
+              >
+                {{ t('admin.accounts.oauth.batchCreateAccounts', { count: parsedSessionTokenCount }) }}
+              </p>
+            </div>
+
+            <div v-if="sessionTokenInput.trim()" class="mb-4 space-y-3">
+              <div>
+                <label
+                  class="mb-2 flex items-center gap-2 text-xs font-semibold text-gray-700 dark:text-gray-300"
+                >
+                  {{ t(getOAuthKey('parsedSessionTokensLabel')) }}
+                  <span
+                    v-if="parsedSessionTokenCount > 0"
+                    class="rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] text-white"
+                  >
+                    {{ parsedSessionTokenCount }}
+                  </span>
+                </label>
+                <textarea
+                  :value="parsedSessionTokensText"
+                  rows="2"
+                  readonly
+                  class="input w-full resize-y bg-gray-50 font-mono text-xs dark:bg-gray-700"
+                ></textarea>
+                <p
+                  v-if="parsedSessionTokenCount === 0"
+                  class="mt-1 text-xs text-amber-600 dark:text-amber-400"
+                >
+                  {{ t(getOAuthKey('parsedSessionTokensEmpty')) }}
+                </p>
+              </div>
+
+              <div>
+                <label
+                  class="mb-2 flex items-center gap-2 text-xs font-semibold text-gray-700 dark:text-gray-300"
+                >
+                  {{ t(getOAuthKey('parsedAccessTokensLabel')) }}
+                  <span
+                    v-if="parsedAccessTokenFromSessionInputCount > 0"
+                    class="rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] text-white"
+                  >
+                    {{ parsedAccessTokenFromSessionInputCount }}
+                  </span>
+                </label>
+                <textarea
+                  :value="parsedAccessTokensText"
+                  rows="2"
+                  readonly
+                  class="input w-full resize-y bg-gray-50 font-mono text-xs dark:bg-gray-700"
+                ></textarea>
+              </div>
+            </div>
+
+            <div
+              v-if="error"
+              class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-700 dark:bg-red-900/30"
+            >
+              <p class="whitespace-pre-line text-sm text-red-600 dark:text-red-400">
+                {{ error }}
+              </p>
+            </div>
+
+            <button
+              type="button"
+              class="btn btn-primary w-full"
+              :disabled="loading || parsedSessionTokenCount === 0"
+              @click="handleValidateSessionToken"
+            >
+              <svg
+                v-if="loading"
+                class="-ml-1 mr-2 h-4 w-4 animate-spin"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  class="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  stroke-width="4"
+                ></circle>
+                <path
+                  class="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+              </svg>
+              <Icon v-else name="sparkles" size="sm" class="mr-2" />
+              {{
+                loading
+                  ? t(getOAuthKey('validating'))
+                  : t(getOAuthKey('validateAndCreate'))
+              }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Access Token Input (Sora) -->
+        <div v-if="inputMethod === 'access_token'" class="space-y-4">
+          <div
+            class="rounded-lg border border-blue-300 bg-white/80 p-4 dark:border-blue-600 dark:bg-gray-800/80"
+          >
+            <p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
+              {{ t('admin.accounts.oauth.openai.accessTokenDesc', '直接粘贴 Access Token 创建账号，无需 OAuth 授权流程。支持批量导入（每行一个）。') }}
+            </p>
+
+            <div class="mb-4">
+              <label
+                class="mb-2 flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300"
+              >
+                <Icon name="key" size="sm" class="text-blue-500" />
+                Access Token
+                <span
+                  v-if="parsedAccessTokenCount > 1"
+                  class="rounded-full bg-blue-500 px-2 py-0.5 text-xs text-white"
+                >
+                  {{ t('admin.accounts.oauth.keysCount', { count: parsedAccessTokenCount }) }}
+                </span>
+              </label>
+              <textarea
+                v-model="accessTokenInput"
+                rows="3"
+                class="input w-full resize-y font-mono text-sm"
+                :placeholder="t('admin.accounts.oauth.openai.accessTokenPlaceholder', '粘贴 Access Token，每行一个')"
+              ></textarea>
+              <p
+                v-if="parsedAccessTokenCount > 1"
+                class="mt-1 text-xs text-blue-600 dark:text-blue-400"
+              >
+                {{ t('admin.accounts.oauth.batchCreateAccounts', { count: parsedAccessTokenCount }) }}
+              </p>
+            </div>
+
+            <div
+              v-if="error"
+              class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-700 dark:bg-red-900/30"
+            >
+              <p class="whitespace-pre-line text-sm text-red-600 dark:text-red-400">
+                {{ error }}
+              </p>
+            </div>
+
+            <button
+              type="button"
+              class="btn btn-primary w-full"
+              :disabled="loading || !accessTokenInput.trim()"
+              @click="handleImportAccessToken"
+            >
+              <Icon name="sparkles" size="sm" class="mr-2" />
+              {{ t('admin.accounts.oauth.openai.importAccessToken', '导入 Access Token') }}
+            </button>
+          </div>
+        </div>
+
         <!-- Cookie Auto-Auth Form -->
         <div v-if="inputMethod === 'cookie'" class="space-y-4">
           <div
@@ -509,8 +742,10 @@
 import { ref, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useClipboard } from '@/composables/useClipboard'
+import { parseSoraRawTokens } from '@/utils/soraTokenParser'
 import Icon from '@/components/icons/Icon.vue'
 import type { AddMethod, AuthInputMethod } from '@/composables/useAccountOAuth'
+import type { AccountPlatform } from '@/types'
 
 interface Props {
   addMethod: AddMethod
@@ -524,7 +759,9 @@ interface Props {
   methodLabel?: string
   showCookieOption?: boolean // Whether to show cookie auto-auth option
   showRefreshTokenOption?: boolean // Whether to show refresh token input option (OpenAI only)
-  platform?: 'anthropic' | 'openai' | 'gemini' | 'antigravity' // Platform type for different UI/text
+  showSessionTokenOption?: boolean // Whether to show session token input option (Sora only)
+  showAccessTokenOption?: boolean // Whether to show access token input option (Sora only)
+  platform?: AccountPlatform // Platform type for different UI/text
   showProjectId?: boolean // New prop to control project ID visibility
 }
 
@@ -539,6 +776,8 @@ const props = withDefaults(defineProps<Props>(), {
   methodLabel: 'Authorization Method',
   showCookieOption: true,
   showRefreshTokenOption: false,
+  showSessionTokenOption: false,
+  showAccessTokenOption: false,
   platform: 'anthropic',
   showProjectId: true
 })
@@ -548,16 +787,18 @@ const emit = defineEmits<{
   'exchange-code': [code: string]
   'cookie-auth': [sessionKey: string]
   'validate-refresh-token': [refreshToken: string]
+  'validate-session-token': [sessionToken: string]
+  'import-access-token': [accessToken: string]
   'update:inputMethod': [method: AuthInputMethod]
 }>()
 
 const { t } = useI18n()
 
-const isOpenAI = computed(() => props.platform === 'openai')
+const isOpenAI = computed(() => props.platform === 'openai' || props.platform === 'sora')
 
 // Get translation key based on platform
 const getOAuthKey = (key: string) => {
-  if (props.platform === 'openai') return `admin.accounts.oauth.openai.${key}`
+  if (props.platform === 'openai' || props.platform === 'sora') return `admin.accounts.oauth.openai.${key}`
   if (props.platform === 'gemini') return `admin.accounts.oauth.gemini.${key}`
   if (props.platform === 'antigravity') return `admin.accounts.oauth.antigravity.${key}`
   return `admin.accounts.oauth.${key}`
@@ -576,7 +817,7 @@ const oauthAuthCode = computed(() => t(getOAuthKey('authCode')))
 const oauthAuthCodePlaceholder = computed(() => t(getOAuthKey('authCodePlaceholder')))
 const oauthAuthCodeHint = computed(() => t(getOAuthKey('authCodeHint')))
 const oauthImportantNotice = computed(() => {
-  if (props.platform === 'openai') return t('admin.accounts.oauth.openai.importantNotice')
+  if (props.platform === 'openai' || props.platform === 'sora') return t('admin.accounts.oauth.openai.importantNotice')
   if (props.platform === 'antigravity') return t('admin.accounts.oauth.antigravity.importantNotice')
   return ''
 })
@@ -586,12 +827,14 @@ const inputMethod = ref<AuthInputMethod>(props.showCookieOption ? 'manual' : 'ma
 const authCodeInput = ref('')
 const sessionKeyInput = ref('')
 const refreshTokenInput = ref('')
+const sessionTokenInput = ref('')
+const accessTokenInput = ref('')
 const showHelpDialog = ref(false)
 const oauthState = ref('')
 const projectId = ref('')
 
 // Computed: show method selection when either cookie or refresh token option is enabled
-const showMethodSelection = computed(() => props.showCookieOption || props.showRefreshTokenOption)
+const showMethodSelection = computed(() => props.showCookieOption || props.showRefreshTokenOption || props.showSessionTokenOption || props.showAccessTokenOption)
 
 // Clipboard
 const { copied, copyToClipboard } = useClipboard()
@@ -612,6 +855,33 @@ const parsedRefreshTokenCount = computed(() => {
     .filter((rt) => rt).length
 })
 
+const parsedSoraRawTokens = computed(() => parseSoraRawTokens(sessionTokenInput.value))
+
+const parsedSessionTokenCount = computed(() => {
+  return parsedSoraRawTokens.value.sessionTokens.length
+})
+
+const parsedSessionTokensText = computed(() => {
+  return parsedSoraRawTokens.value.sessionTokens.join('\n')
+})
+
+const parsedAccessTokenFromSessionInputCount = computed(() => {
+  return parsedSoraRawTokens.value.accessTokens.length
+})
+
+const parsedAccessTokensText = computed(() => {
+  return parsedSoraRawTokens.value.accessTokens.join('\n')
+})
+
+const soraSessionUrl = 'https://sora.chatgpt.com/api/auth/session'
+
+const parsedAccessTokenCount = computed(() => {
+  return accessTokenInput.value
+    .split('\n')
+    .map((at) => at.trim())
+    .filter((at) => at).length
+})
+
 // Watchers
 watch(inputMethod, (newVal) => {
   emit('update:inputMethod', newVal)
@@ -620,7 +890,7 @@ watch(inputMethod, (newVal) => {
 // Auto-extract code from callback URL (OpenAI/Gemini/Antigravity)
 // e.g., http://localhost:8085/callback?code=xxx...&state=...
 watch(authCodeInput, (newVal) => {
-  if (props.platform !== 'openai' && props.platform !== 'gemini' && props.platform !== 'antigravity') return
+  if (props.platform !== 'openai' && props.platform !== 'gemini' && props.platform !== 'antigravity' && props.platform !== 'sora') return
 
   const trimmed = newVal.trim()
   // Check if it looks like a URL with code parameter
@@ -630,7 +900,7 @@ watch(authCodeInput, (newVal) => {
       const url = new URL(trimmed)
       const code = url.searchParams.get('code')
       const stateParam = url.searchParams.get('state')
-      if ((props.platform === 'gemini' || props.platform === 'antigravity') && stateParam) {
+      if ((props.platform === 'openai' || props.platform === 'sora' || props.platform === 'gemini' || props.platform === 'antigravity') && stateParam) {
         oauthState.value = stateParam
       }
       if (code && code !== trimmed) {
@@ -641,7 +911,7 @@ watch(authCodeInput, (newVal) => {
       // If URL parsing fails, try regex extraction
       const match = trimmed.match(/[?&]code=([^&]+)/)
       const stateMatch = trimmed.match(/[?&]state=([^&]+)/)
-      if ((props.platform === 'gemini' || props.platform === 'antigravity') && stateMatch && stateMatch[1]) {
+      if ((props.platform === 'openai' || props.platform === 'sora' || props.platform === 'gemini' || props.platform === 'antigravity') && stateMatch && stateMatch[1]) {
         oauthState.value = stateMatch[1]
       }
       if (match && match[1] && match[1] !== trimmed) {
@@ -679,6 +949,26 @@ const handleValidateRefreshToken = () => {
   }
 }
 
+const handleValidateSessionToken = () => {
+  if (parsedSessionTokenCount.value > 0) {
+    emit('validate-session-token', parsedSessionTokensText.value)
+  }
+}
+
+const handleOpenSoraSessionUrl = () => {
+  window.open(soraSessionUrl, '_blank', 'noopener,noreferrer')
+}
+
+const handleCopySoraSessionUrl = () => {
+  copyToClipboard(soraSessionUrl, 'URL copied to clipboard')
+}
+
+const handleImportAccessToken = () => {
+  if (accessTokenInput.value.trim()) {
+    emit('import-access-token', accessTokenInput.value.trim())
+  }
+}
+
 // Expose methods and state
 defineExpose({
   authCode: authCodeInput,
@@ -686,6 +976,7 @@ defineExpose({
   projectId,
   sessionKey: sessionKeyInput,
   refreshToken: refreshTokenInput,
+  sessionToken: sessionTokenInput,
   inputMethod,
   reset: () => {
     authCodeInput.value = ''
@@ -693,6 +984,7 @@ defineExpose({
     projectId.value = ''
     sessionKeyInput.value = ''
     refreshTokenInput.value = ''
+    sessionTokenInput.value = ''
     inputMethod.value = 'manual'
     showHelpDialog.value = false
   }

frontend/src/components/account/ReAuthAccountModal.vue

@@ -14,7 +14,7 @@
           <div
             :class="[
               'flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br',
-              isOpenAI
+              isOpenAILike
                 ? 'from-green-500 to-green-600'
                 : isGemini
                   ? 'from-blue-500 to-blue-600'
@@ -33,6 +33,8 @@
               {{
                 isOpenAI
                   ? t('admin.accounts.openaiAccount')
+                  : isSora
+                    ? t('admin.accounts.soraAccount')
                   : isGemini
                     ? t('admin.accounts.geminiAccount')
                     : isAntigravity
@@ -128,7 +130,7 @@
         :show-cookie-option="isAnthropic"
         :allow-multiple="false"
         :method-label="t('admin.accounts.inputMethod')"
-        :platform="isOpenAI ? 'openai' : isGemini ? 'gemini' : isAntigravity ? 'antigravity' : 'anthropic'"
+        :platform="isOpenAI ? 'openai' : isSora ? 'sora' : isGemini ? 'gemini' : isAntigravity ? 'antigravity' : 'anthropic'"
         :show-project-id="isGemini && geminiOAuthType === 'code_assist'"
         @generate-url="handleGenerateUrl"
         @cookie-auth="handleCookieAuth"
@@ -224,7 +226,8 @@ const { t } = useI18n()
 
 // OAuth composables
 const claudeOAuth = useAccountOAuth()
-const openaiOAuth = useOpenAIOAuth()
+const openaiOAuth = useOpenAIOAuth({ platform: 'openai' })
+const soraOAuth = useOpenAIOAuth({ platform: 'sora' })
 const geminiOAuth = useGeminiOAuth()
 const antigravityOAuth = useAntigravityOAuth()
 
@@ -237,31 +240,34 @@ const geminiOAuthType = ref<'code_assist' | 'google_one' | 'ai_studio'>('code_as
 
 // Computed - check platform
 const isOpenAI = computed(() => props.account?.platform === 'openai')
+const isSora = computed(() => props.account?.platform === 'sora')
+const isOpenAILike = computed(() => isOpenAI.value || isSora.value)
 const isGemini = computed(() => props.account?.platform === 'gemini')
 const isAnthropic = computed(() => props.account?.platform === 'anthropic')
 const isAntigravity = computed(() => props.account?.platform === 'antigravity')
+const activeOpenAIOAuth = computed(() => (isSora.value ? soraOAuth : openaiOAuth))
 
 // Computed - current OAuth state based on platform
 const currentAuthUrl = computed(() => {
-  if (isOpenAI.value) return openaiOAuth.authUrl.value
+  if (isOpenAILike.value) return activeOpenAIOAuth.value.authUrl.value
   if (isGemini.value) return geminiOAuth.authUrl.value
   if (isAntigravity.value) return antigravityOAuth.authUrl.value
   return claudeOAuth.authUrl.value
 })
 const currentSessionId = computed(() => {
-  if (isOpenAI.value) return openaiOAuth.sessionId.value
+  if (isOpenAILike.value) return activeOpenAIOAuth.value.sessionId.value
   if (isGemini.value) return geminiOAuth.sessionId.value
   if (isAntigravity.value) return antigravityOAuth.sessionId.value
   return claudeOAuth.sessionId.value
 })
 const currentLoading = computed(() => {
-  if (isOpenAI.value) return openaiOAuth.loading.value
+  if (isOpenAILike.value) return activeOpenAIOAuth.value.loading.value
   if (isGemini.value) return geminiOAuth.loading.value
   if (isAntigravity.value) return antigravityOAuth.loading.value
   return claudeOAuth.loading.value
 })
 const currentError = computed(() => {
-  if (isOpenAI.value) return openaiOAuth.error.value
+  if (isOpenAILike.value) return activeOpenAIOAuth.value.error.value
   if (isGemini.value) return geminiOAuth.error.value
   if (isAntigravity.value) return antigravityOAuth.error.value
   return claudeOAuth.error.value
@@ -269,8 +275,8 @@ const currentError = computed(() => {
 
 // Computed
 const isManualInputMethod = computed(() => {
-  // OpenAI/Gemini/Antigravity always use manual input (no cookie auth option)
-  return isOpenAI.value || isGemini.value || isAntigravity.value || oauthFlowRef.value?.inputMethod === 'manual'
+  // OpenAI/Sora/Gemini/Antigravity always use manual input (no cookie auth option)
+  return isOpenAILike.value || isGemini.value || isAntigravity.value || oauthFlowRef.value?.inputMethod === 'manual'
 })
 
 const canExchangeCode = computed(() => {
@@ -313,6 +319,7 @@ const resetState = () => {
   geminiOAuthType.value = 'code_assist'
   claudeOAuth.resetState()
   openaiOAuth.resetState()
+  soraOAuth.resetState()
   geminiOAuth.resetState()
   antigravityOAuth.resetState()
   oauthFlowRef.value?.reset()
@@ -325,8 +332,8 @@ const handleClose = () => {
 const handleGenerateUrl = async () => {
   if (!props.account) return
 
-  if (isOpenAI.value) {
-    await openaiOAuth.generateAuthUrl(props.account.proxy_id)
+  if (isOpenAILike.value) {
+    await activeOpenAIOAuth.value.generateAuthUrl(props.account.proxy_id)
   } else if (isGemini.value) {
     const creds = (props.account.credentials || {}) as Record<string, unknown>
     const tierId = typeof creds.tier_id === 'string' ? creds.tier_id : undefined
@@ -345,21 +352,29 @@ const handleExchangeCode = async () => {
   const authCode = oauthFlowRef.value?.authCode || ''
   if (!authCode.trim()) return
 
-  if (isOpenAI.value) {
+  if (isOpenAILike.value) {
     // OpenAI OAuth flow
-    const sessionId = openaiOAuth.sessionId.value
+    const oauthClient = activeOpenAIOAuth.value
+    const sessionId = oauthClient.sessionId.value
     if (!sessionId) return
+    const stateToUse = (oauthFlowRef.value?.oauthState || oauthClient.oauthState.value || '').trim()
+    if (!stateToUse) {
+      oauthClient.error.value = t('admin.accounts.oauth.authFailed')
+      appStore.showError(oauthClient.error.value)
+      return
+    }
 
-    const tokenInfo = await openaiOAuth.exchangeAuthCode(
+    const tokenInfo = await oauthClient.exchangeAuthCode(
       authCode.trim(),
       sessionId,
+      stateToUse,
       props.account.proxy_id
     )
     if (!tokenInfo) return
 
     // Build credentials and extra info
-    const credentials = openaiOAuth.buildCredentials(tokenInfo)
-    const extra = openaiOAuth.buildExtraInfo(tokenInfo)
+    const credentials = oauthClient.buildCredentials(tokenInfo)
+    const extra = oauthClient.buildExtraInfo(tokenInfo)
 
     try {
       // Update account with new credentials
@@ -376,8 +391,8 @@ const handleExchangeCode = async () => {
       emit('reauthorized')
       handleClose()
     } catch (error: any) {
-      openaiOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
-      appStore.showError(openaiOAuth.error.value)
+      oauthClient.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
+      appStore.showError(oauthClient.error.value)
     }
   } else if (isGemini.value) {
     const sessionId = geminiOAuth.sessionId.value
@@ -490,7 +505,7 @@ const handleExchangeCode = async () => {
 }
 
 const handleCookieAuth = async (sessionKey: string) => {
-  if (!props.account || isOpenAI.value) return
+  if (!props.account || isOpenAILike.value) return
 
   claudeOAuth.loading.value = true
   claudeOAuth.error.value = ''

frontend/src/components/account/__tests__/AccountUsageCell.spec.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import AccountUsageCell from '../AccountUsageCell.vue'
+
+const { getUsage } = vi.hoisted(() => ({
+  getUsage: vi.fn()
+}))
+
+vi.mock('@/api/admin', () => ({
+  adminAPI: {
+    accounts: {
+      getUsage
+    }
+  }
+}))
+
+vi.mock('vue-i18n', async () => {
+  const actual = await vi.importActual<typeof import('vue-i18n')>('vue-i18n')
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: (key: string) => key
+    })
+  }
+})
+
+describe('AccountUsageCell', () => {
+  beforeEach(() => {
+    getUsage.mockReset()
+  })
+
+  it('Antigravity 图片用量会聚合新旧 image 模型', async () => {
+    getUsage.mockResolvedValue({
+      antigravity_quota: {
+        'gemini-3.1-flash-image': {
+          utilization: 20,
+          reset_time: '2026-03-01T10:00:00Z'
+        },
+        'gemini-3-pro-image': {
+          utilization: 70,
+          reset_time: '2026-03-01T09:00:00Z'
+        }
+      }
+    })
+
+    const wrapper = mount(AccountUsageCell, {
+      props: {
+        account: {
+          id: 1001,
+          platform: 'antigravity',
+          type: 'oauth',
+          extra: {}
+        } as any
+      },
+      global: {
+        stubs: {
+          UsageProgressBar: {
+            props: ['label', 'utilization', 'resetsAt', 'color'],
+            template: '<div class="usage-bar">{{ label }}|{{ utilization }}|{{ resetsAt }}</div>'
+          },
+          AccountQuotaInfo: true
+        }
+      }
+    })
+
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('admin.accounts.usageWindow.gemini3Image|70|2026-03-01T09:00:00Z')
+  })
+})

frontend/src/components/account/__tests__/BulkEditAccountModal.spec.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import BulkEditAccountModal from '../BulkEditAccountModal.vue'
+
+vi.mock('@/stores/app', () => ({
+  useAppStore: () => ({
+    showError: vi.fn(),
+    showSuccess: vi.fn(),
+    showInfo: vi.fn()
+  })
+}))
+
+vi.mock('@/api/admin', () => ({
+  adminAPI: {
+    accounts: {
+      bulkEdit: vi.fn()
+    }
+  }
+}))
+
+vi.mock('vue-i18n', async () => {
+  const actual = await vi.importActual<typeof import('vue-i18n')>('vue-i18n')
+  return {
+    ...actual,
+    useI18n: () => ({
+      t: (key: string) => key
+    })
+  }
+})
+
+function mountModal() {
+  return mount(BulkEditAccountModal, {
+    props: {
+      show: true,
+      accountIds: [1, 2],
+      selectedPlatforms: ['antigravity'],
+      proxies: [],
+      groups: []
+    } as any,
+    global: {
+      stubs: {
+        BaseDialog: { template: '<div><slot /><slot name="footer" /></div>' },
+        Select: true,
+        ProxySelector: true,
+        GroupSelector: true,
+        Icon: true
+      }
+    }
+  })
+}
+
+describe('BulkEditAccountModal', () => {
+  it('antigravity 白名单包含 Gemini 图片模型且过滤掉普通 GPT 模型', () => {
+    const wrapper = mountModal()
+
+    expect(wrapper.text()).toContain('Gemini 3.1 Flash Image')
+    expect(wrapper.text()).toContain('Gemini 3 Pro Image (Legacy)')
+    expect(wrapper.text()).not.toContain('GPT-5.3 Codex')
+  })
+
+  it('antigravity 映射预设包含图片映射并过滤 OpenAI 预设', async () => {
+    const wrapper = mountModal()
+
+    const mappingTab = wrapper.findAll('button').find((btn) => btn.text().includes('admin.accounts.modelMapping'))
+    expect(mappingTab).toBeTruthy()
+    await mappingTab!.trigger('click')
+
+    expect(wrapper.text()).toContain('Gemini 3.1 Image')
+    expect(wrapper.text()).toContain('G3 Image→3.1')
+    expect(wrapper.text()).not.toContain('GPT-5.3 Codex')
+  })
+})

frontend/src/components/account/__tests__/credentialsBuilder.spec.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { applyInterceptWarmup } from '../credentialsBuilder'
+
+describe('applyInterceptWarmup', () => {
+  it('create + enabled=true: should set intercept_warmup_requests to true', () => {
+    const creds: Record<string, unknown> = { access_token: 'tok' }
+    applyInterceptWarmup(creds, true, 'create')
+    expect(creds.intercept_warmup_requests).toBe(true)
+  })
+
+  it('create + enabled=false: should not add the field', () => {
+    const creds: Record<string, unknown> = { access_token: 'tok' }
+    applyInterceptWarmup(creds, false, 'create')
+    expect('intercept_warmup_requests' in creds).toBe(false)
+  })
+
+  it('edit + enabled=true: should set intercept_warmup_requests to true', () => {
+    const creds: Record<string, unknown> = { api_key: 'sk' }
+    applyInterceptWarmup(creds, true, 'edit')
+    expect(creds.intercept_warmup_requests).toBe(true)
+  })
+
+  it('edit + enabled=false + field exists: should delete the field', () => {
+    const creds: Record<string, unknown> = { api_key: 'sk', intercept_warmup_requests: true }
+    applyInterceptWarmup(creds, false, 'edit')
+    expect('intercept_warmup_requests' in creds).toBe(false)
+  })
+
+  it('edit + enabled=false + field absent: should not throw', () => {
+    const creds: Record<string, unknown> = { api_key: 'sk' }
+    applyInterceptWarmup(creds, false, 'edit')
+    expect('intercept_warmup_requests' in creds).toBe(false)
+  })
+
+  it('should not affect other fields', () => {
+    const creds: Record<string, unknown> = {
+      api_key: 'sk',
+      base_url: 'url',
+      intercept_warmup_requests: true
+    }
+    applyInterceptWarmup(creds, false, 'edit')
+    expect(creds.api_key).toBe('sk')
+    expect(creds.base_url).toBe('url')
+    expect('intercept_warmup_requests' in creds).toBe(false)
+  })
+})

frontend/src/components/account/credentialsBuilder.ts

@@ -0,0 +1,11 @@
+export function applyInterceptWarmup(
+  credentials: Record<string, unknown>,
+  enabled: boolean,
+  mode: 'create' | 'edit'
+): void {
+  if (enabled) {
+    credentials.intercept_warmup_requests = true
+  } else if (mode === 'edit') {
+    delete credentials.intercept_warmup_requests
+  }
+}

frontend/src/components/admin/account/AccountTableFilters.vue

@@ -23,7 +23,7 @@ const updatePlatform = (value: string | number | boolean | null) => { emit('upda
 const updateType = (value: string | number | boolean | null) => { emit('update:filters', { ...props.filters, type: value }) }
 const updateStatus = (value: string | number | boolean | null) => { emit('update:filters', { ...props.filters, status: value }) }
 const updateGroup = (value: string | number | boolean | null) => { emit('update:filters', { ...props.filters, group: value }) }
-const pOpts = computed(() => [{ value: '', label: t('admin.accounts.allPlatforms') }, { value: 'anthropic', label: 'Anthropic' }, { value: 'openai', label: 'OpenAI' }, { value: 'gemini', label: 'Gemini' }, { value: 'antigravity', label: 'Antigravity' }])
+const pOpts = computed(() => [{ value: '', label: t('admin.accounts.allPlatforms') }, { value: 'anthropic', label: 'Anthropic' }, { value: 'openai', label: 'OpenAI' }, { value: 'gemini', label: 'Gemini' }, { value: 'antigravity', label: 'Antigravity' }, { value: 'sora', label: 'Sora' }])
 const tOpts = computed(() => [{ value: '', label: t('admin.accounts.allTypes') }, { value: 'oauth', label: t('admin.accounts.oauthType') }, { value: 'setup-token', label: t('admin.accounts.setupToken') }, { value: 'apikey', label: t('admin.accounts.apiKey') }])
 const sOpts = computed(() => [{ value: '', label: t('admin.accounts.allStatus') }, { value: 'active', label: t('admin.accounts.status.active') }, { value: 'inactive', label: t('admin.accounts.status.inactive') }, { value: 'error', label: t('admin.accounts.status.error') }, { value: 'rate_limited', label: t('admin.accounts.status.rateLimited') }, { value: 'temp_unschedulable', label: t('admin.accounts.status.tempUnschedulable') }])
 const gOpts = computed(() => [{ value: '', label: t('admin.accounts.allGroups') }, ...(props.groups || []).map(g => ({ value: String(g.id), label: g.name }))])

frontend/src/components/admin/account/AccountTestModal.vue

@@ -41,7 +41,7 @@
         </span>
       </div>
 
-      <div class="space-y-1.5">
+      <div v-if="!isSoraAccount" class="space-y-1.5">
         <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
           {{ t('admin.accounts.selectTestModel') }}
         </label>
@@ -54,6 +54,12 @@
           :placeholder="loadingModels ? t('common.loading') + '...' : t('admin.accounts.selectTestModel')"
         />
       </div>
+      <div
+        v-else
+        class="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-700 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-300"
+      >
+        {{ t('admin.accounts.soraTestHint') }}
+      </div>
 
       <!-- Terminal Output -->
       <div class="group relative">
@@ -114,12 +120,12 @@
         <div class="flex items-center gap-3">
           <span class="flex items-center gap-1">
             <Icon name="grid" size="sm" :stroke-width="2" />
-            {{ t('admin.accounts.testModel') }}
+            {{ isSoraAccount ? t('admin.accounts.soraTestTarget') : t('admin.accounts.testModel') }}
           </span>
         </div>
         <span class="flex items-center gap-1">
           <Icon name="chat" size="sm" :stroke-width="2" />
-          {{ t('admin.accounts.testPrompt') }}
+          {{ isSoraAccount ? t('admin.accounts.soraTestMode') : t('admin.accounts.testPrompt') }}
         </span>
       </div>
     </div>
@@ -135,10 +141,10 @@
         </button>
         <button
           @click="startTest"
-          :disabled="status === 'connecting' || !selectedModelId"
+          :disabled="status === 'connecting' || (!isSoraAccount && !selectedModelId)"
           :class="[
             'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all',
-            status === 'connecting' || !selectedModelId
+            status === 'connecting' || (!isSoraAccount && !selectedModelId)
               ? 'cursor-not-allowed bg-primary-400 text-white'
               : status === 'success'
                 ? 'bg-green-500 text-white hover:bg-green-600'
@@ -172,7 +178,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, nextTick } from 'vue'
+import { computed, ref, watch, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import BaseDialog from '@/components/common/BaseDialog.vue'
 import Select from '@/components/common/Select.vue'
@@ -207,6 +213,7 @@ const availableModels = ref<ClaudeModel[]>([])
 const selectedModelId = ref('')
 const loadingModels = ref(false)
 let eventSource: EventSource | null = null
+const isSoraAccount = computed(() => props.account?.platform === 'sora')
 
 // Load available models when modal opens
 watch(
@@ -223,6 +230,12 @@ watch(
 
 const loadAvailableModels = async () => {
   if (!props.account) return
+  if (props.account.platform === 'sora') {
+    availableModels.value = []
+    selectedModelId.value = ''
+    loadingModels.value = false
+    return
+  }
 
   loadingModels.value = true
   selectedModelId.value = '' // Reset selection before loading
@@ -290,7 +303,7 @@ const scrollToBottom = async () => {
 }
 
 const startTest = async () => {
-  if (!props.account || !selectedModelId.value) return
+  if (!props.account || (!isSoraAccount.value && !selectedModelId.value)) return
 
   resetState()
   status.value = 'connecting'
@@ -311,7 +324,9 @@ const startTest = async () => {
         Authorization: `Bearer ${localStorage.getItem('auth_token')}`,
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({ model_id: selectedModelId.value })
+      body: JSON.stringify(
+        isSoraAccount.value ? {} : { model_id: selectedModelId.value }
+      )
     })
 
     if (!response.ok) {
@@ -368,7 +383,10 @@ const handleEvent = (event: {
       if (event.model) {
         addLine(t('admin.accounts.usingModel', { model: event.model }), 'text-cyan-400')
       }
-      addLine(t('admin.accounts.sendingTestMessage'), 'text-gray-400')
+      addLine(
+        isSoraAccount.value ? t('admin.accounts.soraTestingFlow') : t('admin.accounts.sendingTestMessage'),
+        'text-gray-400'
+      )
       addLine('', 'text-gray-300')
       addLine(t('admin.accounts.response'), 'text-yellow-400')
       break

frontend/src/components/admin/account/ImportDataModal.vue

@@ -143,6 +143,24 @@ const handleClose = () => {
   emit('close')
 }
 
+const readFileAsText = async (sourceFile: File): Promise<string> => {
+  if (typeof sourceFile.text === 'function') {
+    return sourceFile.text()
+  }
+
+  if (typeof sourceFile.arrayBuffer === 'function') {
+    const buffer = await sourceFile.arrayBuffer()
+    return new TextDecoder().decode(buffer)
+  }
+
+  return await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result ?? ''))
+    reader.onerror = () => reject(reader.error || new Error('Failed to read file'))
+    reader.readAsText(sourceFile)
+  })
+}
+
 const handleImport = async () => {
   if (!file.value) {
     appStore.showError(t('admin.accounts.dataImportSelectFile'))
@@ -151,7 +169,7 @@ const handleImport = async () => {
 
   importing.value = true
   try {
-    const text = await file.value.text()
+    const text = await readFileAsText(file.value)
     const dataPayload = JSON.parse(text)
 
     const res = await adminAPI.accounts.importData({

frontend/src/components/admin/account/ReAuthAccountModal.vue

@@ -14,7 +14,7 @@
           <div
             :class="[
               'flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br',
-              isOpenAI
+              isOpenAILike
                 ? 'from-green-500 to-green-600'
                 : isGemini
                   ? 'from-blue-500 to-blue-600'
@@ -33,6 +33,8 @@
               {{
                 isOpenAI
                   ? t('admin.accounts.openaiAccount')
+                  : isSora
+                    ? t('admin.accounts.soraAccount')
                   : isGemini
                     ? t('admin.accounts.geminiAccount')
                     : isAntigravity
@@ -128,7 +130,7 @@
         :show-cookie-option="isAnthropic"
         :allow-multiple="false"
         :method-label="t('admin.accounts.inputMethod')"
-        :platform="isOpenAI ? 'openai' : isGemini ? 'gemini' : isAntigravity ? 'antigravity' : 'anthropic'"
+        :platform="isOpenAI ? 'openai' : isSora ? 'sora' : isGemini ? 'gemini' : isAntigravity ? 'antigravity' : 'anthropic'"
         :show-project-id="isGemini && geminiOAuthType === 'code_assist'"
         @generate-url="handleGenerateUrl"
         @cookie-auth="handleCookieAuth"
@@ -216,7 +218,7 @@ interface Props {
 const props = defineProps<Props>()
 const emit = defineEmits<{
   close: []
-  reauthorized: []
+  reauthorized: [account: Account]
 }>()
 
 const appStore = useAppStore()
@@ -224,7 +226,8 @@ const { t } = useI18n()
 
 // OAuth composables
 const claudeOAuth = useAccountOAuth()
-const openaiOAuth = useOpenAIOAuth()
+const openaiOAuth = useOpenAIOAuth({ platform: 'openai' })
+const soraOAuth = useOpenAIOAuth({ platform: 'sora' })
 const geminiOAuth = useGeminiOAuth()
 const antigravityOAuth = useAntigravityOAuth()
 
@@ -237,31 +240,34 @@ const geminiOAuthType = ref<'code_assist' | 'google_one' | 'ai_studio'>('code_as
 
 // Computed - check platform
 const isOpenAI = computed(() => props.account?.platform === 'openai')
+const isSora = computed(() => props.account?.platform === 'sora')
+const isOpenAILike = computed(() => isOpenAI.value || isSora.value)
 const isGemini = computed(() => props.account?.platform === 'gemini')
 const isAnthropic = computed(() => props.account?.platform === 'anthropic')
 const isAntigravity = computed(() => props.account?.platform === 'antigravity')
+const activeOpenAIOAuth = computed(() => (isSora.value ? soraOAuth : openaiOAuth))
 
 // Computed - current OAuth state based on platform
 const currentAuthUrl = computed(() => {
-  if (isOpenAI.value) return openaiOAuth.authUrl.value
+  if (isOpenAILike.value) return activeOpenAIOAuth.value.authUrl.value
   if (isGemini.value) return geminiOAuth.authUrl.value
   if (isAntigravity.value) return antigravityOAuth.authUrl.value
   return claudeOAuth.authUrl.value
 })
 const currentSessionId = computed(() => {
-  if (isOpenAI.value) return openaiOAuth.sessionId.value
+  if (isOpenAILike.value) return activeOpenAIOAuth.value.sessionId.value
   if (isGemini.value) return geminiOAuth.sessionId.value
   if (isAntigravity.value) return antigravityOAuth.sessionId.value
   return claudeOAuth.sessionId.value
 })
 const currentLoading = computed(() => {
-  if (isOpenAI.value) return openaiOAuth.loading.value
+  if (isOpenAILike.value) return activeOpenAIOAuth.value.loading.value
   if (isGemini.value) return geminiOAuth.loading.value
   if (isAntigravity.value) return antigravityOAuth.loading.value
   return claudeOAuth.loading.value
 })
 const currentError = computed(() => {
-  if (isOpenAI.value) return openaiOAuth.error.value
+  if (isOpenAILike.value) return activeOpenAIOAuth.value.error.value
   if (isGemini.value) return geminiOAuth.error.value
   if (isAntigravity.value) return antigravityOAuth.error.value
   return claudeOAuth.error.value
@@ -269,8 +275,8 @@ const currentError = computed(() => {
 
 // Computed
 const isManualInputMethod = computed(() => {
-  // OpenAI/Gemini/Antigravity always use manual input (no cookie auth option)
-  return isOpenAI.value || isGemini.value || isAntigravity.value || oauthFlowRef.value?.inputMethod === 'manual'
+  // OpenAI/Sora/Gemini/Antigravity always use manual input (no cookie auth option)
+  return isOpenAILike.value || isGemini.value || isAntigravity.value || oauthFlowRef.value?.inputMethod === 'manual'
 })
 
 const canExchangeCode = computed(() => {
@@ -313,6 +319,7 @@ const resetState = () => {
   geminiOAuthType.value = 'code_assist'
   claudeOAuth.resetState()
   openaiOAuth.resetState()
+  soraOAuth.resetState()
   geminiOAuth.resetState()
   antigravityOAuth.resetState()
   oauthFlowRef.value?.reset()
@@ -325,8 +332,8 @@ const handleClose = () => {
 const handleGenerateUrl = async () => {
   if (!props.account) return
 
-  if (isOpenAI.value) {
-    await openaiOAuth.generateAuthUrl(props.account.proxy_id)
+  if (isOpenAILike.value) {
+    await activeOpenAIOAuth.value.generateAuthUrl(props.account.proxy_id)
   } else if (isGemini.value) {
     const creds = (props.account.credentials || {}) as Record<string, unknown>
     const tierId = typeof creds.tier_id === 'string' ? creds.tier_id : undefined
@@ -345,21 +352,29 @@ const handleExchangeCode = async () => {
   const authCode = oauthFlowRef.value?.authCode || ''
   if (!authCode.trim()) return
 
-  if (isOpenAI.value) {
+  if (isOpenAILike.value) {
     // OpenAI OAuth flow
-    const sessionId = openaiOAuth.sessionId.value
+    const oauthClient = activeOpenAIOAuth.value
+    const sessionId = oauthClient.sessionId.value
     if (!sessionId) return
+    const stateToUse = (oauthFlowRef.value?.oauthState || oauthClient.oauthState.value || '').trim()
+    if (!stateToUse) {
+      oauthClient.error.value = t('admin.accounts.oauth.authFailed')
+      appStore.showError(oauthClient.error.value)
+      return
+    }
 
-    const tokenInfo = await openaiOAuth.exchangeAuthCode(
+    const tokenInfo = await oauthClient.exchangeAuthCode(
       authCode.trim(),
       sessionId,
+      stateToUse,
       props.account.proxy_id
     )
     if (!tokenInfo) return
 
     // Build credentials and extra info
-    const credentials = openaiOAuth.buildCredentials(tokenInfo)
-    const extra = openaiOAuth.buildExtraInfo(tokenInfo)
+    const credentials = oauthClient.buildCredentials(tokenInfo)
+    const extra = oauthClient.buildExtraInfo(tokenInfo)
 
     try {
       // Update account with new credentials
@@ -370,14 +385,14 @@ const handleExchangeCode = async () => {
       })
 
       // Clear error status after successful re-authorization
-      await adminAPI.accounts.clearError(props.account.id)
+      const updatedAccount = await adminAPI.accounts.clearError(props.account.id)
 
       appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
-      emit('reauthorized')
+      emit('reauthorized', updatedAccount)
       handleClose()
     } catch (error: any) {
-      openaiOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
-      appStore.showError(openaiOAuth.error.value)
+      oauthClient.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
+      appStore.showError(oauthClient.error.value)
     }
   } else if (isGemini.value) {
     const sessionId = geminiOAuth.sessionId.value
@@ -404,9 +419,9 @@ const handleExchangeCode = async () => {
         type: 'oauth',
         credentials
       })
-      await adminAPI.accounts.clearError(props.account.id)
+      const updatedAccount = await adminAPI.accounts.clearError(props.account.id)
       appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
-      emit('reauthorized')
+      emit('reauthorized', updatedAccount)
       handleClose()
     } catch (error: any) {
       geminiOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
@@ -436,9 +451,9 @@ const handleExchangeCode = async () => {
         type: 'oauth',
         credentials
       })
-      await adminAPI.accounts.clearError(props.account.id)
+      const updatedAccount = await adminAPI.accounts.clearError(props.account.id)
       appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
-      emit('reauthorized')
+      emit('reauthorized', updatedAccount)
       handleClose()
     } catch (error: any) {
       antigravityOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
@@ -475,10 +490,10 @@ const handleExchangeCode = async () => {
       })
 
       // Clear error status after successful re-authorization
-      await adminAPI.accounts.clearError(props.account.id)
+      const updatedAccount = await adminAPI.accounts.clearError(props.account.id)
 
       appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
-      emit('reauthorized')
+      emit('reauthorized', updatedAccount)
       handleClose()
     } catch (error: any) {
       claudeOAuth.error.value = error.response?.data?.detail || t('admin.accounts.oauth.authFailed')
@@ -490,7 +505,7 @@ const handleExchangeCode = async () => {
 }
 
 const handleCookieAuth = async (sessionKey: string) => {
-  if (!props.account || isOpenAI.value) return
+  if (!props.account || isOpenAILike.value) return
 
   claudeOAuth.loading.value = true
   claudeOAuth.error.value = ''
@@ -518,10 +533,10 @@ const handleCookieAuth = async (sessionKey: string) => {
     })
 
     // Clear error status after successful re-authorization
-    await adminAPI.accounts.clearError(props.account.id)
+    const updatedAccount = await adminAPI.accounts.clearError(props.account.id)
 
     appStore.showSuccess(t('admin.accounts.reAuthorizedSuccess'))
-    emit('reauthorized')
+    emit('reauthorized', updatedAccount)
     handleClose()
   } catch (error: any) {
     claudeOAuth.error.value =

frontend/src/components/admin/proxy/ImportDataModal.vue

@@ -143,6 +143,24 @@ const handleClose = () => {
   emit('close')
 }
 
+const readFileAsText = async (sourceFile: File): Promise<string> => {
+  if (typeof sourceFile.text === 'function') {
+    return sourceFile.text()
+  }
+
+  if (typeof sourceFile.arrayBuffer === 'function') {
+    const buffer = await sourceFile.arrayBuffer()
+    return new TextDecoder().decode(buffer)
+  }
+
+  return await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result ?? ''))
+    reader.onerror = () => reject(reader.error || new Error('Failed to read file'))
+    reader.readAsText(sourceFile)
+  })
+}
+
 const handleImport = async () => {
   if (!file.value) {
     appStore.showError(t('admin.proxies.dataImportSelectFile'))
@@ -151,7 +169,7 @@ const handleImport = async () => {
 
   importing.value = true
   try {
-    const text = await file.value.text()
+    const text = await readFileAsText(file.value)
     const dataPayload = JSON.parse(text)
 
     const res = await adminAPI.proxies.importData({ data: dataPayload })

frontend/src/components/admin/usage/UsageCleanupDialog.vue

@@ -125,6 +125,7 @@ import Pagination from '@/components/common/Pagination.vue'
 import UsageFilters from '@/components/admin/usage/UsageFilters.vue'
 import { adminUsageAPI } from '@/api/admin/usage'
 import type { AdminUsageQueryParams, UsageCleanupTask, CreateUsageCleanupTaskRequest } from '@/api/admin/usage'
+import { requestTypeToLegacyStream } from '@/utils/usageRequestType'
 
 interface Props {
   show: boolean
@@ -310,7 +311,13 @@ const buildPayload = (): CreateUsageCleanupTaskRequest | null => {
   if (localFilters.value.model) {
     payload.model = localFilters.value.model
   }
-  if (localFilters.value.stream !== null && localFilters.value.stream !== undefined) {
+  if (localFilters.value.request_type) {
+    payload.request_type = localFilters.value.request_type
+    const legacyStream = requestTypeToLegacyStream(localFilters.value.request_type)
+    if (legacyStream !== null && legacyStream !== undefined) {
+      payload.stream = legacyStream
+    }
+  } else if (localFilters.value.stream !== null && localFilters.value.stream !== undefined) {
     payload.stream = localFilters.value.stream
   }
   if (localFilters.value.billing_type !== null && localFilters.value.billing_type !== undefined) {

frontend/src/components/admin/usage/UsageFilters.vue

@@ -121,10 +121,10 @@
           </div>
         </div>
 
-        <!-- Stream Type Filter -->
+        <!-- Request Type Filter -->
         <div class="w-full sm:w-auto sm:min-w-[180px]">
           <label class="input-label">{{ t('usage.type') }}</label>
-          <Select v-model="filters.stream" :options="streamTypeOptions" @change="emitChange" />
+          <Select v-model="filters.request_type" :options="requestTypeOptions" @change="emitChange" />
         </div>
 
         <!-- Billing Type Filter -->
@@ -160,6 +160,7 @@
         <button type="button" @click="$emit('reset')" class="btn btn-secondary">
           {{ t('common.reset') }}
         </button>
+        <slot name="after-reset" />
         <button type="button" @click="$emit('cleanup')" class="btn btn-danger">
           {{ t('admin.usage.cleanup.button') }}
         </button>
@@ -232,10 +233,11 @@ let accountSearchTimeout: ReturnType<typeof setTimeout> | null = null
 const modelOptions = ref<SelectOption[]>([{ value: null, label: t('admin.usage.allModels') }])
 const groupOptions = ref<SelectOption[]>([{ value: null, label: t('admin.usage.allGroups') }])
 
-const streamTypeOptions = ref<SelectOption[]>([
+const requestTypeOptions = ref<SelectOption[]>([
   { value: null, label: t('admin.usage.allTypes') },
-  { value: true, label: t('usage.stream') },
-  { value: false, label: t('usage.sync') }
+  { value: 'ws_v2', label: t('usage.ws') },
+  { value: 'stream', label: t('usage.stream') },
+  { value: 'sync', label: t('usage.sync') }
 ])
 
 const billingTypeOptions = ref<SelectOption[]>([

frontend/src/components/admin/usage/UsageTable.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="card overflow-hidden">
     <div class="overflow-auto">
-      <DataTable :columns="cols" :data="data" :loading="loading">
+      <DataTable :columns="columns" :data="data" :loading="loading">
         <template #cell-user="{ row }">
           <div class="text-sm">
             <span class="font-medium text-gray-900 dark:text-white">{{ row.user?.email || '-' }}</span>
@@ -35,8 +35,8 @@
         </template>
 
         <template #cell-stream="{ row }">
-          <span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium" :class="row.stream ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'">
-            {{ row.stream ? t('usage.stream') : t('usage.sync') }}
+          <span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium" :class="getRequestTypeBadgeClass(row)">
+            {{ getRequestTypeLabel(row) }}
           </span>
         </template>
 
@@ -70,6 +70,8 @@
                 <div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
                   <svg class="h-3.5 w-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                   <span class="font-medium text-amber-600 dark:text-amber-400">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
+                  <span v-if="row.cache_creation_1h_tokens > 0" class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-orange-100 text-orange-600 ring-1 ring-inset ring-orange-200 dark:bg-orange-500/20 dark:text-orange-400 dark:ring-orange-500/30">1h</span>
+                  <span v-if="row.cache_ttl_overridden" :title="t('usage.cacheTtlOverriddenHint')" class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-rose-100 text-rose-600 ring-1 ring-inset ring-rose-200 dark:bg-rose-500/20 dark:text-rose-400 dark:ring-rose-500/30 cursor-help">R</span>
                 </div>
               </div>
             </div>
@@ -121,7 +123,7 @@
         </template>
 
         <template #cell-user_agent="{ row }">
-          <span v-if="row.user_agent" class="text-sm text-gray-600 dark:text-gray-400 max-w-[150px] truncate block" :title="row.user_agent">{{ formatUserAgent(row.user_agent) }}</span>
+          <span v-if="row.user_agent" class="text-sm text-gray-600 dark:text-gray-400 block max-w-[320px] truncate" :title="row.user_agent">{{ formatUserAgent(row.user_agent) }}</span>
           <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
         </template>
 
@@ -157,9 +159,36 @@
               <span class="text-gray-400">{{ t('admin.usage.outputTokens') }}</span>
               <span class="font-medium text-white">{{ tokenTooltipData.output_tokens.toLocaleString() }}</span>
             </div>
-            <div v-if="tokenTooltipData && tokenTooltipData.cache_creation_tokens > 0" class="flex items-center justify-between gap-4">
-              <span class="text-gray-400">{{ t('admin.usage.cacheCreationTokens') }}</span>
-              <span class="font-medium text-white">{{ tokenTooltipData.cache_creation_tokens.toLocaleString() }}</span>
+            <div v-if="tokenTooltipData && tokenTooltipData.cache_creation_tokens > 0">
+              <!-- 有 5m/1h 明细时，展开显示 -->
+              <template v-if="tokenTooltipData.cache_creation_5m_tokens > 0 || tokenTooltipData.cache_creation_1h_tokens > 0">
+                <div v-if="tokenTooltipData.cache_creation_5m_tokens > 0" class="flex items-center justify-between gap-4">
+                  <span class="text-gray-400 flex items-center gap-1.5">
+                    {{ t('admin.usage.cacheCreation5mTokens') }}
+                    <span class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-amber-500/20 text-amber-400 ring-1 ring-inset ring-amber-500/30">5m</span>
+                  </span>
+                  <span class="font-medium text-white">{{ tokenTooltipData.cache_creation_5m_tokens.toLocaleString() }}</span>
+                </div>
+                <div v-if="tokenTooltipData.cache_creation_1h_tokens > 0" class="flex items-center justify-between gap-4">
+                  <span class="text-gray-400 flex items-center gap-1.5">
+                    {{ t('admin.usage.cacheCreation1hTokens') }}
+                    <span class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-orange-500/20 text-orange-400 ring-1 ring-inset ring-orange-500/30">1h</span>
+                  </span>
+                  <span class="font-medium text-white">{{ tokenTooltipData.cache_creation_1h_tokens.toLocaleString() }}</span>
+                </div>
+              </template>
+              <!-- 无明细时，只显示聚合值 -->
+              <div v-else class="flex items-center justify-between gap-4">
+                <span class="text-gray-400">{{ t('admin.usage.cacheCreationTokens') }}</span>
+                <span class="font-medium text-white">{{ tokenTooltipData.cache_creation_tokens.toLocaleString() }}</span>
+              </div>
+            </div>
+            <div v-if="tokenTooltipData && tokenTooltipData.cache_ttl_overridden" class="flex items-center justify-between gap-4">
+              <span class="text-gray-400 flex items-center gap-1.5">
+                {{ t('usage.cacheTtlOverriddenLabel') }}
+                <span class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-rose-500/20 text-rose-400 ring-1 ring-inset ring-rose-500/30">R-{{ tokenTooltipData.cache_creation_1h_tokens > 0 ? '5m' : '1H' }}</span>
+              </span>
+              <span class="font-medium text-rose-400">{{ tokenTooltipData.cache_creation_1h_tokens > 0 ? t('usage.cacheTtlOverridden1h') : t('usage.cacheTtlOverridden5m') }}</span>
             </div>
             <div v-if="tokenTooltipData && tokenTooltipData.cache_read_tokens > 0" class="flex items-center justify-between gap-4">
               <span class="text-gray-400">{{ t('admin.usage.cacheReadTokens') }}</span>
@@ -239,15 +268,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { formatDateTime, formatReasoningEffort } from '@/utils/format'
+import { resolveUsageRequestType } from '@/utils/usageRequestType'
 import DataTable from '@/components/common/DataTable.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
 import Icon from '@/components/icons/Icon.vue'
 import type { AdminUsageLog } from '@/types'
 
-defineProps(['data', 'loading'])
+defineProps(['data', 'loading', 'columns'])
 const { t } = useI18n()
 
 // Tooltip state - cost
@@ -260,23 +290,21 @@ const tokenTooltipVisible = ref(false)
 const tokenTooltipPosition = ref({ x: 0, y: 0 })
 const tokenTooltipData = ref<AdminUsageLog | null>(null)
 
-const cols = computed(() => [
-  { key: 'user', label: t('admin.usage.user'), sortable: false },
-  { key: 'api_key', label: t('usage.apiKeyFilter'), sortable: false },
-  { key: 'account', label: t('admin.usage.account'), sortable: false },
-  { key: 'model', label: t('usage.model'), sortable: true },
-  { key: 'reasoning_effort', label: t('usage.reasoningEffort'), sortable: false },
-  { key: 'group', label: t('admin.usage.group'), sortable: false },
-  { key: 'stream', label: t('usage.type'), sortable: false },
-  { key: 'tokens', label: t('usage.tokens'), sortable: false },
-  { key: 'cost', label: t('usage.cost'), sortable: false },
-  { key: 'first_token', label: t('usage.firstToken'), sortable: false },
-  { key: 'duration', label: t('usage.duration'), sortable: false },
-  { key: 'created_at', label: t('usage.time'), sortable: true },
-  { key: 'user_agent', label: t('usage.userAgent'), sortable: false },
-  { key: 'ip_address', label: t('admin.usage.ipAddress'), sortable: false }
-])
+const getRequestTypeLabel = (row: AdminUsageLog): string => {
+  const requestType = resolveUsageRequestType(row)
+  if (requestType === 'ws_v2') return t('usage.ws')
+  if (requestType === 'stream') return t('usage.stream')
+  if (requestType === 'sync') return t('usage.sync')
+  return t('usage.unknown')
+}
 
+const getRequestTypeBadgeClass = (row: AdminUsageLog): string => {
+  const requestType = resolveUsageRequestType(row)
+  if (requestType === 'ws_v2') return 'bg-violet-100 text-violet-800 dark:bg-violet-900 dark:text-violet-200'
+  if (requestType === 'stream') return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+  if (requestType === 'sync') return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200'
+  return 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200'
+}
 const formatCacheTokens = (tokens: number): string => {
   if (tokens >= 1000000) return `${(tokens / 1000000).toFixed(1)}M`
   if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}K`
@@ -284,16 +312,7 @@ const formatCacheTokens = (tokens: number): string => {
 }
 
 const formatUserAgent = (ua: string): string => {
-  // 提取主要客户端标识
-  if (ua.includes('claude-cli')) return ua.match(/claude-cli\/[\d.]+/)?.[0] || 'Claude CLI'
-  if (ua.includes('Cursor')) return 'Cursor'
-  if (ua.includes('VSCode') || ua.includes('vscode')) return 'VS Code'
-  if (ua.includes('Continue')) return 'Continue'
-  if (ua.includes('Cline')) return 'Cline'
-  if (ua.includes('OpenAI')) return 'OpenAI SDK'
-  if (ua.includes('anthropic')) return 'Anthropic SDK'
-  // 截断过长的 UA
-  return ua.length > 30 ? ua.substring(0, 30) + '...' : ua
+  return ua
 }
 
 const formatDuration = (ms: number | null | undefined): string => {

frontend/src/components/admin/user/UserApiKeysModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <BaseDialog :show="show" :title="t('admin.users.userApiKeys')" width="wide" @close="$emit('close')">
+  <BaseDialog :show="show" :title="t('admin.users.userApiKeys')" width="wide" @close="handleClose">
     <div v-if="user" class="space-y-4">
       <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
         <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
@@ -9,7 +9,7 @@
       </div>
       <div v-if="loading" class="flex justify-center py-8"><svg class="h-8 w-8 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></div>
       <div v-else-if="apiKeys.length === 0" class="py-8 text-center"><p class="text-sm text-gray-500">{{ t('admin.users.noApiKeys') }}</p></div>
-      <div v-else class="max-h-96 space-y-3 overflow-y-auto">
+      <div v-else ref="scrollContainerRef" class="max-h-96 space-y-3 overflow-y-auto" @scroll="closeGroupSelector">
         <div v-for="key in apiKeys" :key="key.id" class="rounded-xl border border-gray-200 bg-white p-4 dark:border-dark-600 dark:bg-dark-800">
           <div class="flex items-start justify-between">
             <div class="min-w-0 flex-1">
@@ -18,30 +18,237 @@
             </div>
           </div>
           <div class="mt-3 flex flex-wrap gap-4 text-xs text-gray-500">
-            <div class="flex items-center gap-1"><span>{{ t('admin.users.group') }}: {{ key.group?.name || t('admin.users.none') }}</span></div>
+            <div class="flex items-center gap-1">
+              <span>{{ t('admin.users.group') }}:</span>
+              <button
+                :ref="(el) => setGroupButtonRef(key.id, el)"
+                @click="openGroupSelector(key)"
+                class="-mx-1 -my-0.5 flex cursor-pointer items-center gap-1 rounded-md px-1 py-0.5 transition-colors hover:bg-gray-100 dark:hover:bg-dark-700"
+                :disabled="updatingKeyIds.has(key.id)"
+              >
+                <GroupBadge
+                  v-if="key.group_id && key.group"
+                  :name="key.group.name"
+                  :platform="key.group.platform"
+                  :subscription-type="key.group.subscription_type"
+                  :rate-multiplier="key.group.rate_multiplier"
+                />
+                <span v-else class="text-gray-400 italic">{{ t('admin.users.none') }}</span>
+                <svg v-if="updatingKeyIds.has(key.id)" class="h-3 w-3 animate-spin text-primary-500" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                <svg v-else class="h-3 w-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" /></svg>
+              </button>
+            </div>
             <div class="flex items-center gap-1"><span>{{ t('admin.users.columns.created') }}: {{ formatDateTime(key.created_at) }}</span></div>
           </div>
         </div>
       </div>
     </div>
   </BaseDialog>
+
+  <!-- Group Selector Dropdown -->
+  <Teleport to="body">
+    <div
+      v-if="groupSelectorKeyId !== null && dropdownPosition"
+      ref="dropdownRef"
+      class="animate-in fade-in slide-in-from-top-2 fixed z-[100000020] w-64 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 duration-200 dark:bg-dark-800 dark:ring-white/10"
+      :style="{ top: dropdownPosition.top + 'px', left: dropdownPosition.left + 'px' }"
+    >
+      <div class="max-h-64 overflow-y-auto p-1.5">
+        <!-- Unbind option -->
+        <button
+          @click="changeGroup(selectedKeyForGroup!, null)"
+          :class="[
+            'flex w-full items-center rounded-lg px-3 py-2 text-sm transition-colors',
+            !selectedKeyForGroup?.group_id
+              ? 'bg-primary-50 dark:bg-primary-900/20'
+              : 'hover:bg-gray-100 dark:hover:bg-dark-700'
+          ]"
+        >
+          <span class="text-gray-500 italic">{{ t('admin.users.none') }}</span>
+          <svg
+            v-if="!selectedKeyForGroup?.group_id"
+            class="ml-auto h-4 w-4 shrink-0 text-primary-600 dark:text-primary-400"
+            fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"
+          ><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
+        </button>
+        <!-- Group options -->
+        <button
+          v-for="group in allGroups"
+          :key="group.id"
+          @click="changeGroup(selectedKeyForGroup!, group.id)"
+          :class="[
+            'flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm transition-colors',
+            selectedKeyForGroup?.group_id === group.id
+              ? 'bg-primary-50 dark:bg-primary-900/20'
+              : 'hover:bg-gray-100 dark:hover:bg-dark-700'
+          ]"
+        >
+          <GroupOptionItem
+            :name="group.name"
+            :platform="group.platform"
+            :subscription-type="group.subscription_type"
+            :rate-multiplier="group.rate_multiplier"
+            :description="group.description"
+            :selected="selectedKeyForGroup?.group_id === group.id"
+          />
+        </button>
+      </div>
+    </div>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, type ComponentPublicInstance } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
 import { formatDateTime } from '@/utils/format'
-import type { AdminUser, ApiKey } from '@/types'
+import type { AdminUser, AdminGroup, ApiKey } from '@/types'
 import BaseDialog from '@/components/common/BaseDialog.vue'
+import GroupBadge from '@/components/common/GroupBadge.vue'
+import GroupOptionItem from '@/components/common/GroupOptionItem.vue'
 
-const props = defineProps<{ show: boolean, user: AdminUser | null }>()
-defineEmits(['close']); const { t } = useI18n()
-const apiKeys = ref<ApiKey[]>([]); const loading = ref(false)
+const props = defineProps<{ show: boolean; user: AdminUser | null }>()
+const emit = defineEmits(['close'])
+const { t } = useI18n()
+const appStore = useAppStore()
 
-watch(() => props.show, (v) => { if (v && props.user) load() })
-const load = async () => {
-  if (!props.user) return; loading.value = true
-  try { const res = await adminAPI.users.getUserApiKeys(props.user.id); apiKeys.value = res.items || [] } catch (error) { console.error('Failed to load API keys:', error) } finally { loading.value = false }
+const apiKeys = ref<ApiKey[]>([])
+const allGroups = ref<AdminGroup[]>([])
+const loading = ref(false)
+const updatingKeyIds = ref(new Set<number>())
+const groupSelectorKeyId = ref<number | null>(null)
+const dropdownPosition = ref<{ top: number; left: number } | null>(null)
+const dropdownRef = ref<HTMLElement | null>(null)
+const scrollContainerRef = ref<HTMLElement | null>(null)
+const groupButtonRefs = ref<Map<number, HTMLElement>>(new Map())
+
+const selectedKeyForGroup = computed(() => {
+  if (groupSelectorKeyId.value === null) return null
+  return apiKeys.value.find((k) => k.id === groupSelectorKeyId.value) || null
+})
+
+const setGroupButtonRef = (keyId: number, el: Element | ComponentPublicInstance | null) => {
+  if (el instanceof HTMLElement) {
+    groupButtonRefs.value.set(keyId, el)
+  } else {
+    groupButtonRefs.value.delete(keyId)
+  }
 }
+
+watch(() => props.show, (v) => {
+  if (v && props.user) {
+    load()
+    loadGroups()
+  } else {
+    closeGroupSelector()
+  }
+})
+
+const load = async () => {
+  if (!props.user) return
+  loading.value = true
+  groupButtonRefs.value.clear()
+  try {
+    const res = await adminAPI.users.getUserApiKeys(props.user.id)
+    apiKeys.value = res.items || []
+  } catch (error) {
+    console.error('Failed to load API keys:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const loadGroups = async () => {
+  try {
+    const groups = await adminAPI.groups.getAll()
+    // 过滤掉订阅类型分组（需通过订阅管理流程绑定）
+    allGroups.value = groups.filter((g) => g.subscription_type !== 'subscription')
+  } catch (error) {
+    console.error('Failed to load groups:', error)
+  }
+}
+
+const DROPDOWN_HEIGHT = 272 // max-h-64 = 16rem = 256px + padding
+const DROPDOWN_GAP = 4
+
+const openGroupSelector = (key: ApiKey) => {
+  if (groupSelectorKeyId.value === key.id) {
+    closeGroupSelector()
+  } else {
+    const buttonEl = groupButtonRefs.value.get(key.id)
+    if (buttonEl) {
+      const rect = buttonEl.getBoundingClientRect()
+      const spaceBelow = window.innerHeight - rect.bottom
+      const openUpward = spaceBelow < DROPDOWN_HEIGHT && rect.top > spaceBelow
+      dropdownPosition.value = {
+        top: openUpward ? rect.top - DROPDOWN_HEIGHT - DROPDOWN_GAP : rect.bottom + DROPDOWN_GAP,
+        left: rect.left
+      }
+    }
+    groupSelectorKeyId.value = key.id
+  }
+}
+
+const closeGroupSelector = () => {
+  groupSelectorKeyId.value = null
+  dropdownPosition.value = null
+}
+
+const changeGroup = async (key: ApiKey, newGroupId: number | null) => {
+  closeGroupSelector()
+  if (key.group_id === newGroupId || (!key.group_id && newGroupId === null)) return
+
+  updatingKeyIds.value.add(key.id)
+  try {
+    const result = await adminAPI.apiKeys.updateApiKeyGroup(key.id, newGroupId)
+    // Update local data
+    const idx = apiKeys.value.findIndex((k) => k.id === key.id)
+    if (idx !== -1) {
+      apiKeys.value[idx] = result.api_key
+    }
+    if (result.auto_granted_group_access && result.granted_group_name) {
+      appStore.showSuccess(t('admin.users.groupChangedWithGrant', { group: result.granted_group_name }))
+    } else {
+      appStore.showSuccess(t('admin.users.groupChangedSuccess'))
+    }
+  } catch (error: any) {
+    appStore.showError(error?.message || t('admin.users.groupChangeFailed'))
+  } finally {
+    updatingKeyIds.value.delete(key.id)
+  }
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && groupSelectorKeyId.value !== null) {
+    event.stopPropagation()
+    closeGroupSelector()
+  }
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  const target = event.target as HTMLElement
+  if (dropdownRef.value && !dropdownRef.value.contains(target)) {
+    // Check if the click is on one of the group trigger buttons
+    for (const el of groupButtonRefs.value.values()) {
+      if (el.contains(target)) return
+    }
+    closeGroupSelector()
+  }
+}
+
+const handleClose = () => {
+  closeGroupSelector()
+  emit('close')
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('keydown', handleKeyDown, true)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keydown', handleKeyDown, true)
+})
 </script>

frontend/src/components/admin/user/UserBalanceModal.vue

@@ -13,7 +13,7 @@
         </div>
       </div>
       <div><label class="input-label">{{ t('admin.users.notes') }}</label><textarea v-model="form.notes" rows="3" class="input"></textarea></div>
-      <div v-if="form.amount > 0" class="rounded-xl border border-blue-200 bg-blue-50 p-4"><div class="flex items-center justify-between text-sm"><span>{{ t('admin.users.newBalance') }}:</span><span class="font-bold">${{ formatBalance(calculateNewBalance()) }}</span></div></div>
+      <div v-if="form.amount > 0" class="rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-950"><div class="flex items-center justify-between text-sm"><span class="text-gray-700 dark:text-gray-300">{{ t('admin.users.newBalance') }}:</span><span class="font-bold text-gray-900 dark:text-gray-100">${{ formatBalance(calculateNewBalance()) }}</span></div></div>
     </form>
     <template #footer>
       <div class="flex justify-end gap-3">

frontend/src/components/admin/user/UserEditModal.vue

@@ -37,6 +37,14 @@
         <label class="input-label">{{ t('admin.users.columns.concurrency') }}</label>
         <input v-model.number="form.concurrency" type="number" class="input" />
       </div>
+      <div>
+        <label class="input-label">{{ t('admin.users.soraStorageQuota') }}</label>
+        <div class="flex items-center gap-2">
+          <input v-model.number="form.sora_storage_quota_gb" type="number" min="0" step="0.1" class="input" placeholder="0" />
+          <span class="shrink-0 text-sm text-gray-500">GB</span>
+        </div>
+        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ t('admin.users.soraStorageQuotaHint') }}</p>
+      </div>
       <UserAttributeForm v-model="form.customAttributes" :user-id="user?.id" />
     </form>
     <template #footer>
@@ -66,11 +74,11 @@ const emit = defineEmits(['close', 'success'])
 const { t } = useI18n(); const appStore = useAppStore(); const { copyToClipboard } = useClipboard()
 
 const submitting = ref(false); const passwordCopied = ref(false)
-const form = reactive({ email: '', password: '', username: '', notes: '', concurrency: 1, customAttributes: {} as UserAttributeValuesMap })
+const form = reactive({ email: '', password: '', username: '', notes: '', concurrency: 1, sora_storage_quota_gb: 0, customAttributes: {} as UserAttributeValuesMap })
 
 watch(() => props.user, (u) => {
   if (u) {
-    Object.assign(form, { email: u.email, password: '', username: u.username || '', notes: u.notes || '', concurrency: u.concurrency, customAttributes: {} })
+    Object.assign(form, { email: u.email, password: '', username: u.username || '', notes: u.notes || '', concurrency: u.concurrency, sora_storage_quota_gb: Number(((u.sora_storage_quota_bytes || 0) / (1024 * 1024 * 1024)).toFixed(2)), customAttributes: {} })
     passwordCopied.value = false
   }
 }, { immediate: true })
@@ -97,7 +105,7 @@ const handleUpdateUser = async () => {
   }
   submitting.value = true
   try {
-    const data: any = { email: form.email, username: form.username, notes: form.notes, concurrency: form.concurrency }
+    const data: any = { email: form.email, username: form.username, notes: form.notes, concurrency: form.concurrency, sora_storage_quota_bytes: Math.round((form.sora_storage_quota_gb || 0) * 1024 * 1024 * 1024) }
     if (form.password.trim()) data.password = form.password.trim()
     await adminAPI.users.update(props.user.id, data)
     if (Object.keys(form.customAttributes).length > 0) await adminAPI.userAttributes.updateUserAttributeValues(props.user.id, form.customAttributes)

frontend/src/components/charts/GroupDistributionChart.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="card p-4">
+    <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
+      {{ t('admin.dashboard.groupDistribution') }}
+    </h3>
+    <div v-if="loading" class="flex h-48 items-center justify-center">
+      <LoadingSpinner />
+    </div>
+    <div v-else-if="groupStats.length > 0 && chartData" class="flex items-center gap-6">
+      <div class="h-48 w-48">
+        <Doughnut :data="chartData" :options="doughnutOptions" />
+      </div>
+      <div class="max-h-48 flex-1 overflow-y-auto">
+        <table class="w-full text-xs">
+          <thead>
+            <tr class="text-gray-500 dark:text-gray-400">
+              <th class="pb-2 text-left">{{ t('admin.dashboard.group') }}</th>
+              <th class="pb-2 text-right">{{ t('admin.dashboard.requests') }}</th>
+              <th class="pb-2 text-right">{{ t('admin.dashboard.tokens') }}</th>
+              <th class="pb-2 text-right">{{ t('admin.dashboard.actual') }}</th>
+              <th class="pb-2 text-right">{{ t('admin.dashboard.standard') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="group in groupStats"
+              :key="group.group_id"
+              class="border-t border-gray-100 dark:border-gray-700"
+            >
+              <td
+                class="max-w-[100px] truncate py-1.5 font-medium text-gray-900 dark:text-white"
+                :title="group.group_name || String(group.group_id)"
+              >
+                {{ group.group_name || t('admin.dashboard.noGroup') }}
+              </td>
+              <td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
+                {{ formatNumber(group.requests) }}
+              </td>
+              <td class="py-1.5 text-right text-gray-600 dark:text-gray-400">
+                {{ formatTokens(group.total_tokens) }}
+              </td>
+              <td class="py-1.5 text-right text-green-600 dark:text-green-400">
+                ${{ formatCost(group.actual_cost) }}
+              </td>
+              <td class="py-1.5 text-right text-gray-400 dark:text-gray-500">
+                ${{ formatCost(group.cost) }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div
+      v-else
+      class="flex h-48 items-center justify-center text-sm text-gray-500 dark:text-gray-400"
+    >
+      {{ t('admin.dashboard.noDataAvailable') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
+import { Doughnut } from 'vue-chartjs'
+import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
+import type { GroupStat } from '@/types'
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  groupStats: GroupStat[]
+  loading?: boolean
+}>()
+
+const chartColors = [
+  '#3b82f6',
+  '#10b981',
+  '#f59e0b',
+  '#ef4444',
+  '#8b5cf6',
+  '#ec4899',
+  '#14b8a6',
+  '#f97316',
+  '#6366f1',
+  '#84cc16'
+]
+
+const chartData = computed(() => {
+  if (!props.groupStats?.length) return null
+
+  return {
+    labels: props.groupStats.map((g) => g.group_name || String(g.group_id)),
+    datasets: [
+      {
+        data: props.groupStats.map((g) => g.total_tokens),
+        backgroundColor: chartColors.slice(0, props.groupStats.length),
+        borderWidth: 0
+      }
+    ]
+  }
+})
+
+const doughnutOptions = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false
+    },
+    tooltip: {
+      callbacks: {
+        label: (context: any) => {
+          const value = context.raw as number
+          const total = context.dataset.data.reduce((a: number, b: number) => a + b, 0)
+          const percentage = ((value / total) * 100).toFixed(1)
+          return `${context.label}: ${formatTokens(value)} (${percentage}%)`
+        }
+      }
+    }
+  }
+}))
+
+const formatTokens = (value: number): string => {
+  if (value >= 1_000_000_000) {
+    return `${(value / 1_000_000_000).toFixed(2)}B`
+  } else if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(2)}M`
+  } else if (value >= 1_000) {
+    return `${(value / 1_000).toFixed(2)}K`
+  }
+  return value.toLocaleString()
+}
+
+const formatNumber = (value: number): string => {
+  return value.toLocaleString()
+}
+
+const formatCost = (value: number): string => {
+  if (value >= 1000) {
+    return (value / 1000).toFixed(2) + 'K'
+  } else if (value >= 1) {
+    return value.toFixed(2)
+  } else if (value >= 0.01) {
+    return value.toFixed(3)
+  }
+  return value.toFixed(4)
+}
+</script>

frontend/src/components/common/DataTable.vue

@@ -3,7 +3,7 @@
     <template v-if="loading">
       <div v-for="i in 5" :key="i" class="rounded-lg border border-gray-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900">
         <div class="space-y-3">
-          <div v-for="column in columns.filter(c => c.key !== 'actions')" :key="column.key" class="flex justify-between">
+          <div v-for="column in dataColumns" :key="column.key" class="flex justify-between">
             <div class="h-4 w-20 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
             <div class="h-4 w-32 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
           </div>
@@ -39,7 +39,7 @@
       >
         <div class="space-y-3">
           <div
-            v-for="column in columns.filter(c => c.key !== 'actions')"
+            v-for="column in dataColumns"
             :key="column.key"
             class="flex items-start justify-between gap-4"
           >
@@ -439,10 +439,15 @@ const resolveRowKey = (row: any, index: number) => {
   return key ?? index
 }
 
+const dataColumns = computed(() => props.columns.filter((column) => column.key !== 'actions'))
+const columnsSignature = computed(() =>
+  props.columns.map((column) => `${column.key}:${column.sortable ? '1' : '0'}`).join('|')
+)
+
 // 数据/列变化时重新检查滚动状态
 // 注意：不能监听 actionsExpanded，因为 checkActionsColumnWidth 会临时修改它，会导致无限循环
 watch(
-  [() => props.data.length, () => props.columns],
+  [() => props.data.length, columnsSignature],
   async () => {
     await nextTick()
     checkScrollable()
@@ -555,7 +560,7 @@ onMounted(() => {
 })
 
 watch(
-  () => props.columns,
+  columnsSignature,
   () => {
     // If current sort key is no longer sortable/visible, fall back to default/persisted.
     const normalized = normalizeSortKey(sortKey.value)
@@ -575,7 +580,7 @@ watch(
       }
     }
   },
-  { deep: true }
+  { flush: 'post' }
 )
 
 watch(

frontend/src/components/common/GroupBadge.vue

@@ -116,6 +116,9 @@ const labelClass = computed(() => {
   if (props.platform === 'gemini') {
     return `${base} bg-blue-200/60 text-blue-800 dark:bg-blue-800/40 dark:text-blue-300`
   }
+  if (props.platform === 'sora') {
+    return `${base} bg-rose-200/60 text-rose-800 dark:bg-rose-800/40 dark:text-rose-300`
+  }
   return `${base} bg-violet-200/60 text-violet-800 dark:bg-violet-800/40 dark:text-violet-300`
 })
 
@@ -137,6 +140,11 @@ const badgeClass = computed(() => {
       ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
       : 'bg-sky-50 text-sky-700 dark:bg-sky-900/20 dark:text-sky-400'
   }
+  if (props.platform === 'sora') {
+    return isSubscription.value
+      ? 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400'
+      : 'bg-rose-50 text-rose-700 dark:bg-rose-900/20 dark:text-rose-400'
+  }
   // Fallback: original colors
   return isSubscription.value
     ? 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400'

frontend/src/components/common/ImageUpload.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="flex items-start gap-4">
+    <!-- Preview Box -->
+    <div class="flex-shrink-0">
+      <div
+        class="flex items-center justify-center overflow-hidden rounded-xl border-2 border-dashed border-gray-300 bg-gray-50 dark:border-dark-600 dark:bg-dark-800"
+        :class="[previewSizeClass, { 'border-solid': !!modelValue }]"
+      >
+        <!-- SVG mode: render inline -->
+        <span
+          v-if="mode === 'svg' && modelValue"
+          class="text-gray-600 dark:text-gray-300 [&>svg]:h-full [&>svg]:w-full"
+          :class="innerSizeClass"
+          v-html="sanitizedValue"
+        ></span>
+        <!-- Image mode: show as img -->
+        <img
+          v-else-if="mode === 'image' && modelValue"
+          :src="modelValue"
+          alt=""
+          class="h-full w-full object-contain"
+        />
+        <!-- Empty placeholder -->
+        <svg
+          v-else
+          class="text-gray-400 dark:text-dark-500"
+          :class="placeholderSizeClass"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="1.5"
+            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+          />
+        </svg>
+      </div>
+    </div>
+
+    <!-- Controls -->
+    <div class="flex-1 space-y-2">
+      <div class="flex items-center gap-2">
+        <label class="btn btn-secondary btn-sm cursor-pointer">
+          <input
+            type="file"
+            :accept="acceptTypes"
+            class="hidden"
+            @change="handleUpload"
+          />
+          <Icon name="upload" size="sm" class="mr-1.5" :stroke-width="2" />
+          {{ uploadLabel }}
+        </label>
+        <button
+          v-if="modelValue"
+          type="button"
+          class="btn btn-secondary btn-sm text-red-600 hover:text-red-700 dark:text-red-400"
+          @click="$emit('update:modelValue', '')"
+        >
+          <Icon name="trash" size="sm" class="mr-1.5" :stroke-width="2" />
+          {{ removeLabel }}
+        </button>
+      </div>
+      <p v-if="hint" class="text-xs text-gray-500 dark:text-gray-400">{{ hint }}</p>
+      <p v-if="error" class="text-xs text-red-500">{{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import Icon from '@/components/icons/Icon.vue'
+import { sanitizeSvg } from '@/utils/sanitize'
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  mode?: 'image' | 'svg'
+  size?: 'sm' | 'md'
+  uploadLabel?: string
+  removeLabel?: string
+  hint?: string
+  maxSize?: number // bytes
+}>(), {
+  mode: 'image',
+  size: 'md',
+  uploadLabel: 'Upload',
+  removeLabel: 'Remove',
+  hint: '',
+  maxSize: 300 * 1024,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const error = ref('')
+
+const acceptTypes = computed(() => props.mode === 'svg' ? '.svg' : 'image/*')
+
+const sanitizedValue = computed(() =>
+  props.mode === 'svg' ? sanitizeSvg(props.modelValue ?? '') : ''
+)
+
+const previewSizeClass = computed(() => props.size === 'sm' ? 'h-14 w-14' : 'h-20 w-20')
+const innerSizeClass = computed(() => props.size === 'sm' ? 'h-7 w-7' : 'h-12 w-12')
+const placeholderSizeClass = computed(() => props.size === 'sm' ? 'h-5 w-5' : 'h-8 w-8')
+
+function handleUpload(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  error.value = ''
+
+  if (!file) return
+
+  if (props.maxSize && file.size > props.maxSize) {
+    error.value = `File too large (${(file.size / 1024).toFixed(1)} KB), max ${(props.maxSize / 1024).toFixed(0)} KB`
+    input.value = ''
+    return
+  }
+
+  const reader = new FileReader()
+  if (props.mode === 'svg') {
+    reader.onload = (e) => {
+      const text = e.target?.result as string
+      if (text) emit('update:modelValue', text.trim())
+    }
+    reader.readAsText(file)
+  } else {
+    if (!file.type.startsWith('image/')) {
+      error.value = 'Please select an image file'
+      input.value = ''
+      return
+    }
+    reader.onload = (e) => {
+      emit('update:modelValue', e.target?.result as string)
+    }
+    reader.readAsDataURL(file)
+  }
+
+  reader.onerror = () => {
+    error.value = 'Failed to read file'
+  }
+  input.value = ''
+}
+</script>

frontend/src/components/common/LocaleSwitcher.vue

@@ -2,6 +2,7 @@
   <div class="relative" ref="dropdownRef">
     <button
       @click="toggleDropdown"
+      :disabled="switching"
       class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-dark-700"
       :title="currentLocale?.name"
     >
@@ -23,6 +24,7 @@
         <button
           v-for="locale in availableLocales"
           :key="locale.code"
+          :disabled="switching"
           @click="selectLocale(locale.code)"
           class="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-dark-700"
           :class="{
@@ -49,6 +51,7 @@ const { locale } = useI18n()
 
 const isOpen = ref(false)
 const dropdownRef = ref<HTMLElement | null>(null)
+const switching = ref(false)
 
 const currentLocaleCode = computed(() => locale.value)
 const currentLocale = computed(() => availableLocales.find((l) => l.code === locale.value))
@@ -57,9 +60,18 @@ function toggleDropdown() {
   isOpen.value = !isOpen.value
 }
 
-function selectLocale(code: string) {
-  setLocale(code)
-  isOpen.value = false
+async function selectLocale(code: string) {
+  if (switching.value || code === currentLocaleCode.value) {
+    isOpen.value = false
+    return
+  }
+  switching.value = true
+  try {
+    await setLocale(code)
+    isOpen.value = false
+  } finally {
+    switching.value = false
+  }
 }
 
 function handleClickOutside(event: MouseEvent) {

frontend/src/components/common/Pagination.vue

@@ -84,8 +84,8 @@
 
         <!-- Page numbers -->
         <button
-          v-for="pageNum in visiblePages"
-          :key="pageNum"
+          v-for="(pageNum, index) in visiblePages"
+          :key="`${pageNum}-${index}`"
           @click="typeof pageNum === 'number' && goToPage(pageNum)"
           :disabled="typeof pageNum !== 'number'"
           :class="[

frontend/src/components/common/PlatformIcon.vue

@@ -19,6 +19,12 @@
   <svg v-else-if="platform === 'antigravity'" :class="sizeClass" viewBox="0 0 24 24" fill="currentColor">
     <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z" />
   </svg>
+  <!-- Sora logo (sparkle) -->
+  <svg v-else-if="platform === 'sora'" :class="sizeClass" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      d="M12 2.5l2.1 4.7 5.1.5-3.9 3.4 1.2 5-4.5-2.6-4.5 2.6 1.2-5-3.9-3.4 5.1-.5L12 2.5z"
+    />
+  </svg>
   <!-- Fallback: generic platform icon -->
   <svg v-else :class="sizeClass" fill="currentColor" viewBox="0 0 24 24">
     <path

frontend/src/components/common/PlatformTypeBadge.vue

@@ -48,6 +48,7 @@ const platformLabel = computed(() => {
   if (props.platform === 'anthropic') return 'Anthropic'
   if (props.platform === 'openai') return 'OpenAI'
   if (props.platform === 'antigravity') return 'Antigravity'
+  if (props.platform === 'sora') return 'Sora'
   return 'Gemini'
 })
 
@@ -74,6 +75,9 @@ const platformClass = computed(() => {
   if (props.platform === 'antigravity') {
     return 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400'
   }
+  if (props.platform === 'sora') {
+    return 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400'
+  }
   return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
 })
 
@@ -87,6 +91,9 @@ const typeClass = computed(() => {
   if (props.platform === 'antigravity') {
     return 'bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400'
   }
+  if (props.platform === 'sora') {
+    return 'bg-rose-100 text-rose-600 dark:bg-rose-900/30 dark:text-rose-400'
+  }
   return 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
 })
 </script>

frontend/src/components/common/StatCard.vue

@@ -6,7 +6,7 @@
     <div class="min-w-0 flex-1">
       <p class="stat-label truncate">{{ title }}</p>
       <div class="mt-1 flex items-baseline gap-2">
-        <p class="stat-value">{{ formattedValue }}</p>
+        <p class="stat-value" :title="String(formattedValue)">{{ formattedValue }}</p>
         <span v-if="change !== undefined" :class="['stat-trend', trendClass]">
           <Icon
             v-if="changeType !== 'neutral'"

frontend/src/components/common/Toast.vue

@@ -66,8 +66,8 @@
           <!-- Progress bar -->
           <div v-if="toast.duration" class="h-1 bg-gray-100 dark:bg-dark-700">
             <div
-              :class="['h-full transition-all', getProgressBarColor(toast.type)]"
-              :style="{ width: `${getProgress(toast)}%` }"
+              :class="['h-full toast-progress', getProgressBarColor(toast.type)]"
+              :style="{ animationDuration: `${toast.duration}ms` }"
             ></div>
           </div>
         </div>
@@ -77,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue'
+import { computed } from 'vue'
 import Icon from '@/components/icons/Icon.vue'
 import { useAppStore } from '@/stores/app'
 
@@ -129,36 +129,25 @@ const getProgressBarColor = (type: string): string => {
   return colors[type] || colors.info
 }
 
-const getProgress = (toast: any): number => {
-  if (!toast.duration || !toast.startTime) return 100
-  const elapsed = Date.now() - toast.startTime
-  const progress = Math.max(0, 100 - (elapsed / toast.duration) * 100)
-  return progress
-}
-
 const removeToast = (id: string) => {
   appStore.hideToast(id)
 }
-
-let intervalId: number | undefined
-
-onMounted(() => {
-  // Check for expired toasts every 100ms
-  intervalId = window.setInterval(() => {
-    const now = Date.now()
-    toasts.value.forEach((toast) => {
-      if (toast.duration && toast.startTime) {
-        if (now - toast.startTime >= toast.duration) {
-          removeToast(toast.id)
-        }
-      }
-    })
-  }, 100)
-})
-
-onUnmounted(() => {
-  if (intervalId !== undefined) {
-    clearInterval(intervalId)
-  }
-})
 </script>
+
+<style scoped>
+.toast-progress {
+  width: 100%;
+  animation-name: toast-progress-shrink;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+}
+
+@keyframes toast-progress-shrink {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+</style>

frontend/src/components/keys/UseKeyModal.vue

@@ -268,6 +268,7 @@ const clientTabs = computed((): TabConfig[] => {
     case 'openai':
       return [
         { id: 'codex', label: t('keys.useKeyModal.cliTabs.codexCli'), icon: TerminalIcon },
+        { id: 'codex-ws', label: t('keys.useKeyModal.cliTabs.codexCliWs'), icon: TerminalIcon },
         { id: 'opencode', label: t('keys.useKeyModal.cliTabs.opencode'), icon: TerminalIcon }
       ]
     case 'gemini':
@@ -306,7 +307,7 @@ const showShellTabs = computed(() => activeClientTab.value !== 'opencode')
 
 const currentTabs = computed(() => {
   if (!showShellTabs.value) return []
-  if (props.platform === 'openai') {
+  if (activeClientTab.value === 'codex' || activeClientTab.value === 'codex-ws') {
     return openaiTabs
   }
   return shellTabs
@@ -401,6 +402,9 @@ const currentFiles = computed((): FileConfig[] => {
 
   switch (props.platform) {
     case 'openai':
+      if (activeClientTab.value === 'codex-ws') {
+        return generateOpenAIWsFiles(baseUrl, apiKey)
+      }
       return generateOpenAIFiles(baseUrl, apiKey)
     case 'gemini':
       return [generateGeminiCliContent(baseUrl, apiKey)]
@@ -524,6 +528,47 @@ requires_openai_auth = true`
   ]
 }
 
+function generateOpenAIWsFiles(baseUrl: string, apiKey: string): FileConfig[] {
+  const isWindows = activeTab.value === 'windows'
+  const configDir = isWindows ? '%userprofile%\\.codex' : '~/.codex'
+
+  // config.toml content with WebSocket v2
+  const configContent = `model_provider = "sub2api"
+model = "gpt-5.3-codex"
+model_reasoning_effort = "high"
+network_access = "enabled"
+disable_response_storage = true
+windows_wsl_setup_acknowledged = true
+model_verbosity = "high"
+
+[model_providers.sub2api]
+name = "sub2api"
+base_url = "${baseUrl}"
+wire_api = "responses"
+supports_websockets = true
+requires_openai_auth = true
+
+[features]
+responses_websockets_v2 = true`
+
+  // auth.json content
+  const authContent = `{
+  "OPENAI_API_KEY": "${apiKey}"
+}`
+
+  return [
+    {
+      path: `${configDir}/config.toml`,
+      content: configContent,
+      hint: t('keys.useKeyModal.openai.configTomlHint')
+    },
+    {
+      path: `${configDir}/auth.json`,
+      content: authContent
+    }
+  ]
+}
+
 function generateOpenCodeConfig(platform: string, baseUrl: string, apiKey: string, pathLabel?: string): FileConfig {
   const provider: Record<string, any> = {
     [platform]: {
@@ -534,8 +579,72 @@ function generateOpenCodeConfig(platform: string, baseUrl: string, apiKey: strin
     }
   }
   const openaiModels = {
-    'gpt-5.2-codex': {
-      name: 'GPT-5.2 Codex',
+    'gpt-5-codex': {
+      name: 'GPT-5 Codex',
+      limit: {
+        context: 400000,
+        output: 128000
+      },
+      options: {
+        store: false
+      },
+      variants: {
+        low: {},
+        medium: {},
+        high: {}
+      }
+    },
+    'gpt-5.1-codex': {
+      name: 'GPT-5.1 Codex',
+      limit: {
+        context: 400000,
+        output: 128000
+      },
+      options: {
+        store: false
+      },
+      variants: {
+        low: {},
+        medium: {},
+        high: {}
+      }
+    },
+    'gpt-5.1-codex-max': {
+      name: 'GPT-5.1 Codex Max',
+      limit: {
+        context: 400000,
+        output: 128000
+      },
+      options: {
+        store: false
+      },
+      variants: {
+        low: {},
+        medium: {},
+        high: {}
+      }
+    },
+    'gpt-5.1-codex-mini': {
+      name: 'GPT-5.1 Codex Mini',
+      limit: {
+        context: 400000,
+        output: 128000
+      },
+      options: {
+        store: false
+      },
+      variants: {
+        low: {},
+        medium: {},
+        high: {}
+      }
+    },
+    'gpt-5.2': {
+      name: 'GPT-5.2',
+      limit: {
+        context: 400000,
+        output: 128000
+      },
       options: {
         store: false
       },
@@ -545,30 +654,314 @@ function generateOpenCodeConfig(platform: string, baseUrl: string, apiKey: strin
         high: {},
         xhigh: {}
       }
+    },
+    'gpt-5.3-codex-spark': {
+      name: 'GPT-5.3 Codex Spark',
+      limit: {
+        context: 128000,
+        output: 32000
+      },
+      options: {
+        store: false
+      },
+      variants: {
+        low: {},
+        medium: {},
+        high: {},
+        xhigh: {}
+      }
+    },
+    'gpt-5.3-codex': {
+      name: 'GPT-5.3 Codex',
+      limit: {
+        context: 400000,
+        output: 128000
+      },
+      options: {
+        store: false
+      },
+      variants: {
+        low: {},
+        medium: {},
+        high: {},
+        xhigh: {}
+      }
+    },
+    'gpt-5.2-codex': {
+      name: 'GPT-5.2 Codex',
+      limit: {
+        context: 400000,
+        output: 128000
+      },
+      options: {
+        store: false
+      },
+      variants: {
+        low: {},
+        medium: {},
+        high: {},
+        xhigh: {}
+      }
+    },
+    'codex-mini-latest': {
+      name: 'Codex Mini',
+      limit: {
+        context: 200000,
+        output: 100000
+      },
+      options: {
+        store: false
+      },
+      variants: {
+        low: {},
+        medium: {},
+        high: {}
+      }
     }
   }
   const geminiModels = {
-    'gemini-2.0-flash': { name: 'Gemini 2.0 Flash' },
-    'gemini-2.5-flash': { name: 'Gemini 2.5 Flash' },
-    'gemini-2.5-pro': { name: 'Gemini 2.5 Pro' },
-    'gemini-3-flash-preview': { name: 'Gemini 3 Flash Preview' },
-    'gemini-3-pro-preview': { name: 'Gemini 3 Pro Preview' }
+    'gemini-2.0-flash': {
+      name: 'Gemini 2.0 Flash',
+      limit: {
+        context: 1048576,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      }
+    },
+    'gemini-2.5-flash': {
+      name: 'Gemini 2.5 Flash',
+      limit: {
+        context: 1048576,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      }
+    },
+    'gemini-2.5-pro': {
+      name: 'Gemini 2.5 Pro',
+      limit: {
+        context: 2097152,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      },
+      options: {
+        thinking: {
+          budgetTokens: 24576,
+          type: 'enabled'
+        }
+      }
+    },
+    'gemini-3-flash-preview': {
+      name: 'Gemini 3 Flash Preview',
+      limit: {
+        context: 1048576,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      }
+    },
+    'gemini-3-pro-preview': {
+      name: 'Gemini 3 Pro Preview',
+      limit: {
+        context: 1048576,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      },
+      options: {
+        thinking: {
+          budgetTokens: 24576,
+          type: 'enabled'
+        }
+      }
+    },
+    'gemini-3.1-pro-preview': {
+      name: 'Gemini 3.1 Pro Preview',
+      limit: {
+        context: 1048576,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      },
+      options: {
+        thinking: {
+          budgetTokens: 24576,
+          type: 'enabled'
+        }
+      }
+    }
   }
 
   const antigravityGeminiModels = {
-    'gemini-2.5-flash': { name: 'Gemini 2.5 Flash' },
-    'gemini-2.5-flash-lite': { name: 'Gemini 2.5 Flash Lite' },
-    'gemini-2.5-flash-thinking': { name: 'Gemini 2.5 Flash Thinking' },
-    'gemini-3-flash': { name: 'Gemini 3 Flash' },
-    'gemini-3-pro-low': { name: 'Gemini 3 Pro Low' },
-    'gemini-3-pro-high': { name: 'Gemini 3 Pro High' },
-    'gemini-3-pro-preview': { name: 'Gemini 3 Pro Preview' },
-    'gemini-3-pro-image': { name: 'Gemini 3 Pro Image' }
+    'gemini-2.5-flash': {
+      name: 'Gemini 2.5 Flash',
+      limit: {
+        context: 1048576,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      },
+      options: {
+        thinking: {
+          budgetTokens: 24576,
+          type: 'disable'
+        }
+      }
+    },
+    'gemini-2.5-flash-lite': {
+      name: 'Gemini 2.5 Flash Lite',
+      limit: {
+        context: 1048576,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      },
+      options: {
+        thinking: {
+          budgetTokens: 24576,
+          type: 'enabled'
+        }
+      }
+    },
+    'gemini-2.5-flash-thinking': {
+      name: 'Gemini 2.5 Flash (Thinking)',
+      limit: {
+        context: 1048576,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      },
+      options: {
+        thinking: {
+          budgetTokens: 24576,
+          type: 'enabled'
+        }
+      }
+    },
+    'gemini-3-flash': {
+      name: 'Gemini 3 Flash',
+      limit: {
+        context: 1048576,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      },
+      options: {
+        thinking: {
+          budgetTokens: 24576,
+          type: 'enabled'
+        }
+      }
+    },
+    'gemini-3.1-pro-low': {
+      name: 'Gemini 3.1 Pro Low',
+      limit: {
+        context: 1048576,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      },
+      options: {
+        thinking: {
+          budgetTokens: 24576,
+          type: 'enabled'
+        }
+      }
+    },
+    'gemini-3.1-pro-high': {
+      name: 'Gemini 3.1 Pro High',
+      limit: {
+        context: 1048576,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      },
+      options: {
+        thinking: {
+          budgetTokens: 24576,
+          type: 'enabled'
+        }
+      }
+    },
+    'gemini-3.1-flash-image': {
+      name: 'Gemini 3.1 Flash Image',
+      limit: {
+        context: 1048576,
+        output: 65536
+      },
+      modalities: {
+        input: ['text', 'image'],
+        output: ['image']
+      },
+      options: {
+        thinking: {
+          budgetTokens: 24576,
+          type: 'enabled'
+        }
+      }
+    }
   }
   const claudeModels = {
-    'claude-opus-4-5-thinking': { name: 'Claude Opus 4.5 Thinking' },
-    'claude-sonnet-4-5-thinking': { name: 'Claude Sonnet 4.5 Thinking' },
-    'claude-sonnet-4-5': { name: 'Claude Sonnet 4.5' }
+    'claude-opus-4-6-thinking': {
+      name: 'Claude 4.6 Opus (Thinking)',
+      limit: {
+        context: 200000,
+        output: 128000
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      },
+      options: {
+        thinking: {
+          budgetTokens: 24576,
+          type: 'enabled'
+        }
+      }
+    },
+    'claude-sonnet-4-6': {
+      name: 'Claude 4.6 Sonnet',
+      limit: {
+        context: 200000,
+        output: 64000
+      },
+      modalities: {
+        input: ['text', 'image', 'pdf'],
+        output: ['text']
+      },
+      options: {
+        thinking: {
+          budgetTokens: 24576,
+          type: 'enabled'
+        }
+      }
+    }
   }
 
   if (platform === 'gemini') {

frontend/src/components/layout/AppHeader.vue

@@ -211,6 +211,7 @@ import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useAppStore, useAuthStore, useOnboardingStore } from '@/stores'
+import { useAdminSettingsStore } from '@/stores/adminSettings'
 import LocaleSwitcher from '@/components/common/LocaleSwitcher.vue'
 import SubscriptionProgressMini from '@/components/common/SubscriptionProgressMini.vue'
 import AnnouncementBell from '@/components/common/AnnouncementBell.vue'
@@ -221,6 +222,7 @@ const route = useRoute()
 const { t } = useI18n()
 const appStore = useAppStore()
 const authStore = useAuthStore()
+const adminSettingsStore = useAdminSettingsStore()
 const onboardingStore = useOnboardingStore()
 
 const user = computed(() => authStore.user)
@@ -254,6 +256,14 @@ const displayName = computed(() => {
 })
 
 const pageTitle = computed(() => {
+  // For custom pages, use the menu item's label instead of generic "自定义页面"
+  if (route.name === 'CustomPage') {
+    const id = route.params.id as string
+    const publicItems = appStore.cachedPublicSettings?.custom_menu_items ?? []
+    const menuItem = publicItems.find((item) => item.id === id)
+      ?? (authStore.isAdmin ? adminSettingsStore.customMenuItems.find((item) => item.id === id) : undefined)
+    if (menuItem?.label) return menuItem.label
+  }
   const titleKey = route.meta.titleKey as string
   if (titleKey) {
     return t(titleKey)

frontend/src/components/layout/AppSidebar.vue

@@ -10,7 +10,7 @@
     <div class="sidebar-header">
       <!-- Custom Logo or Default Logo -->
       <div class="flex h-9 w-9 items-center justify-center overflow-hidden rounded-xl shadow-glow">
-        <img :src="siteLogo || '/logo.png'" alt="Logo" class="h-full w-full object-contain" />
+        <img v-if="settingsLoaded" :src="siteLogo || '/logo.png'" alt="Logo" class="h-full w-full object-contain" />
       </div>
       <transition name="fade">
         <div v-if="!sidebarCollapsed" class="flex flex-col">
@@ -47,7 +47,8 @@
             "
             @click="handleMenuItemClick(item.path)"
           >
-            <component :is="item.icon" class="h-5 w-5 flex-shrink-0" />
+            <span v-if="item.iconSvg" class="h-5 w-5 flex-shrink-0 sidebar-svg-icon" v-html="sanitizeSvg(item.iconSvg)"></span>
+            <component v-else :is="item.icon" class="h-5 w-5 flex-shrink-0" />
             <transition name="fade">
               <span v-if="!sidebarCollapsed">{{ item.label }}</span>
             </transition>
@@ -71,7 +72,8 @@
             :data-tour="item.path === '/keys' ? 'sidebar-my-keys' : undefined"
             @click="handleMenuItemClick(item.path)"
           >
-            <component :is="item.icon" class="h-5 w-5 flex-shrink-0" />
+            <span v-if="item.iconSvg" class="h-5 w-5 flex-shrink-0 sidebar-svg-icon" v-html="sanitizeSvg(item.iconSvg)"></span>
+            <component v-else :is="item.icon" class="h-5 w-5 flex-shrink-0" />
             <transition name="fade">
               <span v-if="!sidebarCollapsed">{{ item.label }}</span>
             </transition>
@@ -92,7 +94,8 @@
             :data-tour="item.path === '/keys' ? 'sidebar-my-keys' : undefined"
             @click="handleMenuItemClick(item.path)"
           >
-            <component :is="item.icon" class="h-5 w-5 flex-shrink-0" />
+            <span v-if="item.iconSvg" class="h-5 w-5 flex-shrink-0 sidebar-svg-icon" v-html="sanitizeSvg(item.iconSvg)"></span>
+            <component v-else :is="item.icon" class="h-5 w-5 flex-shrink-0" />
             <transition name="fade">
               <span v-if="!sidebarCollapsed">{{ item.label }}</span>
             </transition>
@@ -149,6 +152,15 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useAdminSettingsStore, useAppStore, useAuthStore, useOnboardingStore } from '@/stores'
 import VersionBadge from '@/components/common/VersionBadge.vue'
+import { sanitizeSvg } from '@/utils/sanitize'
+
+interface NavItem {
+  path: string
+  label: string
+  icon: unknown
+  iconSvg?: string
+  hideInSimpleMode?: boolean
+}
 
 const { t } = useI18n()
 
@@ -167,6 +179,7 @@ const isDark = ref(document.documentElement.classList.contains('dark'))
 const siteName = computed(() => appStore.siteName)
 const siteLogo = computed(() => appStore.siteLogo)
 const siteVersion = computed(() => appStore.siteVersion)
+const settingsLoaded = computed(() => appStore.publicSettingsLoaded)
 
 // SVG Icon Components
 const DashboardIcon = {
@@ -289,6 +302,31 @@ const CreditCardIcon = {
     )
 }
 
+const RechargeSubscriptionIcon = {
+  render: () =>
+    h(
+      'svg',
+      { fill: 'currentColor', viewBox: '0 0 1024 1024' },
+      [
+        h('path', {
+          d: 'M512 992C247.3 992 32 776.7 32 512S247.3 32 512 32s480 215.3 480 480c0 84.4-22.2 167.4-64.2 240-8.9 15.3-28.4 20.6-43.7 11.7-15.3-8.8-20.5-28.4-11.7-43.7 36.4-62.9 55.6-134.8 55.6-208 0-229.4-186.6-416-416-416S96 282.6 96 512s186.6 416 416 416c17.7 0 32 14.3 32 32s-14.3 32-32 32z'
+        }),
+        h('path', {
+          d: 'M640 512H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h256c17.7 0 32 14.3 32 32s-14.3 32-32 32zM640 640H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h256c17.7 0 32 14.3 32 32s-14.3 32-32 32z'
+        }),
+        h('path', {
+          d: 'M512 480c-8.2 0-16.4-3.1-22.6-9.4l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3-6.3 6.3-14.5 9.4-22.7 9.4z'
+        }),
+        h('path', {
+          d: 'M512 480c-8.2 0-16.4-3.1-22.6-9.4-12.5-12.5-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-128 128c-6.3 6.3-14.5 9.4-22.7 9.4z'
+        }),
+        h('path', {
+          d: 'M512 736c-17.7 0-32-14.3-32-32V448c0-17.7 14.3-32 32-32s32 14.3 32 32v256c0 17.7-14.3 32-32 32zM896 992H512c-17.7 0-32-14.3-32-32s14.3-32 32-32h306.8l-73.4-73.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9S908.9 992 896 992z'
+        })
+      ]
+    )
+}
+
 const GlobeIcon = {
   render: () =>
     h(
@@ -319,6 +357,36 @@ const ServerIcon = {
     )
 }
 
+const DatabaseIcon = {
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          d: 'M3.75 5.25C3.75 4.007 7.443 3 12 3s8.25 1.007 8.25 2.25S16.557 7.5 12 7.5 3.75 6.493 3.75 5.25z'
+        }),
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          d: 'M3.75 5.25v4.5C3.75 10.993 7.443 12 12 12s8.25-1.007 8.25-2.25v-4.5'
+        }),
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          d: 'M3.75 9.75v4.5c0 1.243 3.693 2.25 8.25 2.25s8.25-1.007 8.25-2.25v-4.5'
+        }),
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          d: 'M3.75 14.25v4.5C3.75 19.993 7.443 21 12 21s8.25-1.007 8.25-2.25v-4.5'
+        })
+      ]
+    )
+}
+
 const BellIcon = {
   render: () =>
     h(
@@ -414,6 +482,21 @@ const ChevronDoubleLeftIcon = {
     )
 }
 
+const SoraIcon = {
+  render: () =>
+    h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': '1.5' },
+      [
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          d: 'M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z'
+        })
+      ]
+    )
+}
+
 const ChevronDoubleRightIcon = {
   render: () =>
     h(
@@ -430,53 +513,85 @@ const ChevronDoubleRightIcon = {
 }
 
 // User navigation items (for regular users)
-const userNavItems = computed(() => {
-  const items = [
+const userNavItems = computed((): NavItem[] => {
+  const items: NavItem[] = [
     { path: '/dashboard', label: t('nav.dashboard'), icon: DashboardIcon },
     { path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
     { path: '/usage', label: t('nav.usage'), icon: ChartIcon, hideInSimpleMode: true },
     { path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon, hideInSimpleMode: true },
+    ...(appStore.cachedPublicSettings?.sora_client_enabled
+      ? [{ path: '/sora', label: t('nav.sora'), icon: SoraIcon }]
+      : []),
     ...(appStore.cachedPublicSettings?.purchase_subscription_enabled
       ? [
           {
             path: '/purchase',
             label: t('nav.buySubscription'),
-            icon: CreditCardIcon,
+            icon: RechargeSubscriptionIcon,
             hideInSimpleMode: true
           }
         ]
       : []),
     { path: '/redeem', label: t('nav.redeem'), icon: GiftIcon, hideInSimpleMode: true },
-    { path: '/profile', label: t('nav.profile'), icon: UserIcon }
+    { path: '/profile', label: t('nav.profile'), icon: UserIcon },
+    ...customMenuItemsForUser.value.map((item): NavItem => ({
+      path: `/custom/${item.id}`,
+      label: item.label,
+      icon: null,
+      iconSvg: item.icon_svg,
+    })),
   ]
   return authStore.isSimpleMode ? items.filter(item => !item.hideInSimpleMode) : items
 })
 
 // Personal navigation items (for admin's "My Account" section, without Dashboard)
-const personalNavItems = computed(() => {
-  const items = [
+const personalNavItems = computed((): NavItem[] => {
+  const items: NavItem[] = [
     { path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon },
     { path: '/usage', label: t('nav.usage'), icon: ChartIcon, hideInSimpleMode: true },
     { path: '/subscriptions', label: t('nav.mySubscriptions'), icon: CreditCardIcon, hideInSimpleMode: true },
+    ...(appStore.cachedPublicSettings?.sora_client_enabled
+      ? [{ path: '/sora', label: t('nav.sora'), icon: SoraIcon }]
+      : []),
     ...(appStore.cachedPublicSettings?.purchase_subscription_enabled
       ? [
           {
             path: '/purchase',
             label: t('nav.buySubscription'),
-            icon: CreditCardIcon,
+            icon: RechargeSubscriptionIcon,
             hideInSimpleMode: true
           }
         ]
       : []),
     { path: '/redeem', label: t('nav.redeem'), icon: GiftIcon, hideInSimpleMode: true },
-    { path: '/profile', label: t('nav.profile'), icon: UserIcon }
+    { path: '/profile', label: t('nav.profile'), icon: UserIcon },
+    ...customMenuItemsForUser.value.map((item): NavItem => ({
+      path: `/custom/${item.id}`,
+      label: item.label,
+      icon: null,
+      iconSvg: item.icon_svg,
+    })),
   ]
   return authStore.isSimpleMode ? items.filter(item => !item.hideInSimpleMode) : items
 })
 
+// Custom menu items filtered by visibility
+const customMenuItemsForUser = computed(() => {
+  const items = appStore.cachedPublicSettings?.custom_menu_items ?? []
+  return items
+    .filter((item) => item.visibility === 'user')
+    .sort((a, b) => a.sort_order - b.sort_order)
+})
+
+const customMenuItemsForAdmin = computed(() => {
+  return adminSettingsStore.customMenuItems
+    .filter((item) => item.visibility === 'admin')
+    .sort((a, b) => a.sort_order - b.sort_order)
+})
+
 // Admin navigation items
-const adminNavItems = computed(() => {
-  const baseItems = [
+const adminNavItems = computed((): NavItem[] => {
+  const baseItems: NavItem[] = [
     { path: '/admin/dashboard', label: t('nav.dashboard'), icon: DashboardIcon },
     ...(adminSettingsStore.opsMonitoringEnabled
       ? [{ path: '/admin/ops', label: t('nav.ops'), icon: ChartIcon }]
@@ -489,18 +604,28 @@ const adminNavItems = computed(() => {
     { path: '/admin/proxies', label: t('nav.proxies'), icon: ServerIcon },
     { path: '/admin/redeem', label: t('nav.redeemCodes'), icon: TicketIcon, hideInSimpleMode: true },
     { path: '/admin/promo-codes', label: t('nav.promoCodes'), icon: GiftIcon, hideInSimpleMode: true },
-    { path: '/admin/usage', label: t('nav.usage'), icon: ChartIcon },
+    { path: '/admin/usage', label: t('nav.usage'), icon: ChartIcon }
   ]
 
   // 简单模式下，在系统设置前插入 API密钥
   if (authStore.isSimpleMode) {
     const filtered = baseItems.filter(item => !item.hideInSimpleMode)
     filtered.push({ path: '/keys', label: t('nav.apiKeys'), icon: KeyIcon })
+    filtered.push({ path: '/admin/data-management', label: t('nav.dataManagement'), icon: DatabaseIcon })
     filtered.push({ path: '/admin/settings', label: t('nav.settings'), icon: CogIcon })
+    // Add admin custom menu items after settings
+    for (const cm of customMenuItemsForAdmin.value) {
+      filtered.push({ path: `/custom/${cm.id}`, label: cm.label, icon: null, iconSvg: cm.icon_svg })
+    }
     return filtered
   }
 
+  baseItems.push({ path: '/admin/data-management', label: t('nav.dataManagement'), icon: DatabaseIcon })
   baseItems.push({ path: '/admin/settings', label: t('nav.settings'), icon: CogIcon })
+  // Add admin custom menu items after settings
+  for (const cm of customMenuItemsForAdmin.value) {
+    baseItems.push({ path: `/custom/${cm.id}`, label: cm.label, icon: null, iconSvg: cm.icon_svg })
+  }
   return baseItems
 })
 
@@ -580,4 +705,12 @@ onMounted(() => {
 .fade-leave-to {
   opacity: 0;
 }
+
+/* Custom SVG icon in sidebar: inherit color, constrain size */
+.sidebar-svg-icon :deep(svg) {
+  width: 1.25rem;
+  height: 1.25rem;
+  stroke: currentColor;
+  fill: none;
+}
 </style>

frontend/src/components/sora/SoraDownloadDialog.vue

@@ -0,0 +1,217 @@
+<template>
+  <Teleport to="body">
+    <Transition name="sora-modal">
+      <div v-if="visible && generation" class="sora-download-overlay" @click.self="emit('close')">
+        <div class="sora-download-backdrop" />
+        <div class="sora-download-modal" @click.stop>
+          <div class="sora-download-modal-icon">📥</div>
+          <h3 class="sora-download-modal-title">{{ t('sora.downloadTitle') }}</h3>
+          <p class="sora-download-modal-desc">{{ t('sora.downloadExpirationWarning') }}</p>
+
+          <!-- 倒计时 -->
+          <div v-if="remainingText" class="sora-download-countdown">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span :class="{ expired: isExpired }">
+              {{ isExpired ? t('sora.upstreamExpired') : t('sora.upstreamCountdown', { time: remainingText }) }}
+            </span>
+          </div>
+
+          <div class="sora-download-modal-actions">
+            <a
+              v-if="generation.media_url"
+              :href="generation.media_url"
+              target="_blank"
+              download
+              class="sora-download-btn primary"
+            >
+              {{ t('sora.downloadNow') }}
+            </a>
+            <button class="sora-download-btn ghost" @click="emit('close')">
+              {{ t('sora.closePreview') }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { SoraGeneration } from '@/api/sora'
+
+const EXPIRATION_MINUTES = 15
+
+const props = defineProps<{
+  visible: boolean
+  generation: SoraGeneration | null
+}>()
+
+const emit = defineEmits<{ close: [] }>()
+const { t } = useI18n()
+
+const now = ref(Date.now())
+let timer: ReturnType<typeof setInterval> | null = null
+
+const expiresAt = computed(() => {
+  if (!props.generation?.completed_at) return null
+  return new Date(props.generation.completed_at).getTime() + EXPIRATION_MINUTES * 60 * 1000
+})
+
+const isExpired = computed(() => {
+  if (!expiresAt.value) return false
+  return now.value >= expiresAt.value
+})
+
+const remainingText = computed(() => {
+  if (!expiresAt.value) return ''
+  const diff = expiresAt.value - now.value
+  if (diff <= 0) return ''
+  const minutes = Math.floor(diff / 60000)
+  const seconds = Math.floor((diff % 60000) / 1000)
+  return `${minutes}:${String(seconds).padStart(2, '0')}`
+})
+
+watch(
+  () => props.visible,
+  (v) => {
+    if (v) {
+      now.value = Date.now()
+      timer = setInterval(() => { now.value = Date.now() }, 1000)
+    } else if (timer) {
+      clearInterval(timer)
+      timer = null
+    }
+  },
+  { immediate: true }
+)
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+</script>
+
+<style scoped>
+.sora-download-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sora-download-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--sora-modal-backdrop, rgba(0, 0, 0, 0.4));
+  backdrop-filter: blur(4px);
+}
+
+.sora-download-modal {
+  position: relative;
+  z-index: 10;
+  background: var(--sora-bg-secondary, #FFF);
+  border: 1px solid var(--sora-border-color, #E5E7EB);
+  border-radius: 20px;
+  padding: 32px;
+  max-width: 420px;
+  width: 90%;
+  text-align: center;
+  animation: sora-modal-in 0.3s ease;
+}
+
+@keyframes sora-modal-in {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+.sora-download-modal-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.sora-download-modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--sora-text-primary, #111827);
+  margin-bottom: 8px;
+}
+
+.sora-download-modal-desc {
+  font-size: 14px;
+  color: var(--sora-text-secondary, #6B7280);
+  margin-bottom: 20px;
+  line-height: 1.6;
+}
+
+.sora-download-countdown {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 14px;
+  color: var(--sora-text-secondary, #6B7280);
+  margin-bottom: 24px;
+}
+
+.sora-download-countdown svg {
+  color: var(--sora-text-tertiary, #9CA3AF);
+}
+
+.sora-download-countdown .expired {
+  color: #EF4444;
+}
+
+.sora-download-modal-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.sora-download-btn {
+  padding: 10px 24px;
+  border-radius: 9999px;
+  font-size: 14px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sora-download-btn.primary {
+  background: var(--sora-accent-gradient);
+  color: white;
+}
+
+.sora-download-btn.primary:hover {
+  box-shadow: var(--sora-shadow-glow);
+}
+
+.sora-download-btn.ghost {
+  background: var(--sora-bg-tertiary, #F3F4F6);
+  color: var(--sora-text-secondary, #6B7280);
+}
+
+.sora-download-btn.ghost:hover {
+  background: var(--sora-bg-hover, #E5E7EB);
+  color: var(--sora-text-primary, #111827);
+}
+
+/* 过渡 */
+.sora-modal-enter-active,
+.sora-modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+.sora-modal-enter-from,
+.sora-modal-leave-to {
+  opacity: 0;
+}
+</style>

frontend/src/components/sora/SoraGeneratePage.vue

@@ -0,0 +1,430 @@
+<template>
+  <div class="sora-generate-page">
+    <div class="sora-task-area">
+      <!-- 欢迎区域（无任务时显示） -->
+      <div v-if="activeGenerations.length === 0" class="sora-welcome-section">
+        <h1 class="sora-welcome-title">{{ t('sora.welcomeTitle') }}</h1>
+        <p class="sora-welcome-subtitle">{{ t('sora.welcomeSubtitle') }}</p>
+      </div>
+
+      <!-- 示例提示词（无任务时显示） -->
+      <div v-if="activeGenerations.length === 0" class="sora-example-prompts">
+        <button
+          v-for="(example, idx) in examplePrompts"
+          :key="idx"
+          class="sora-example-prompt"
+          @click="fillPrompt(example)"
+        >
+          {{ example }}
+        </button>
+      </div>
+
+      <!-- 任务卡片列表 -->
+      <div v-if="activeGenerations.length > 0" class="sora-task-cards">
+        <SoraProgressCard
+          v-for="gen in activeGenerations"
+          :key="gen.id"
+          :generation="gen"
+          @cancel="handleCancel"
+          @delete="handleDelete"
+          @save="handleSave"
+          @retry="handleRetry"
+        />
+      </div>
+
+      <!-- 无存储提示 Toast -->
+      <div v-if="showNoStorageToast" class="sora-no-storage-toast">
+        <span>⚠️</span>
+        <span>{{ t('sora.noStorageToastMessage') }}</span>
+      </div>
+    </div>
+
+    <!-- 底部创作栏 -->
+    <SoraPromptBar
+      ref="promptBarRef"
+      :generating="generating"
+      :active-task-count="activeTaskCount"
+      :max-concurrent-tasks="3"
+      @generate="handleGenerate"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import soraAPI, { type SoraGeneration, type GenerateRequest } from '@/api/sora'
+import SoraProgressCard from './SoraProgressCard.vue'
+import SoraPromptBar from './SoraPromptBar.vue'
+
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  'task-count-change': [counts: { active: number; generating: boolean }]
+}>()
+
+const activeGenerations = ref<SoraGeneration[]>([])
+const generating = ref(false)
+const showNoStorageToast = ref(false)
+let pollTimers: Record<number, ReturnType<typeof setTimeout>> = {}
+const promptBarRef = ref<InstanceType<typeof SoraPromptBar> | null>(null)
+
+// 示例提示词
+const examplePrompts = [
+  '一只金色的柴犬在东京涩谷街头散步，镜头跟随，电影感画面，4K 高清',
+  '无人机航拍视角，冰岛极光下的冰川湖面反射绿色光芒，慢速推进',
+  '赛博朋克风格的未来城市，霓虹灯倒映在雨后积水中，夜景，电影级色彩',
+  '水墨画风格，一叶扁舟在山水间漂泊，薄雾缭绕，中国古典意境'
+]
+
+// 活跃任务统计
+const activeTaskCount = computed(() =>
+  activeGenerations.value.filter(g => g.status === 'pending' || g.status === 'generating').length
+)
+
+const hasGeneratingTask = computed(() =>
+  activeGenerations.value.some(g => g.status === 'generating')
+)
+
+// 通知父组件任务数变化
+watch([activeTaskCount, hasGeneratingTask], () => {
+  emit('task-count-change', {
+    active: activeTaskCount.value,
+    generating: hasGeneratingTask.value
+  })
+}, { immediate: true })
+
+// ==================== 浏览器通知 ====================
+
+function requestNotificationPermission() {
+  if ('Notification' in window && Notification.permission === 'default') {
+    Notification.requestPermission()
+  }
+}
+
+function sendNotification(title: string, body: string) {
+  if ('Notification' in window && Notification.permission === 'granted') {
+    new Notification(title, { body, icon: '/favicon.ico' })
+  }
+}
+
+const originalTitle = document.title
+let titleBlinkTimer: ReturnType<typeof setInterval> | null = null
+
+function startTitleBlink(message: string) {
+  stopTitleBlink()
+  let show = true
+  titleBlinkTimer = setInterval(() => {
+    document.title = show ? message : originalTitle
+    show = !show
+  }, 1000)
+  const onFocus = () => {
+    stopTitleBlink()
+    window.removeEventListener('focus', onFocus)
+  }
+  window.addEventListener('focus', onFocus)
+}
+
+function stopTitleBlink() {
+  if (titleBlinkTimer) {
+    clearInterval(titleBlinkTimer)
+    titleBlinkTimer = null
+  }
+  document.title = originalTitle
+}
+
+function checkStatusTransition(oldGen: SoraGeneration, newGen: SoraGeneration) {
+  const wasActive = oldGen.status === 'pending' || oldGen.status === 'generating'
+  if (!wasActive) return
+  if (newGen.status === 'completed') {
+    const title = t('sora.notificationCompleted')
+    const body = t('sora.notificationCompletedBody', { model: newGen.model })
+    sendNotification(title, body)
+    if (document.hidden) startTitleBlink(title)
+  } else if (newGen.status === 'failed') {
+    const title = t('sora.notificationFailed')
+    const body = t('sora.notificationFailedBody', { model: newGen.model })
+    sendNotification(title, body)
+    if (document.hidden) startTitleBlink(title)
+  }
+}
+
+// ==================== beforeunload ====================
+
+const hasUpstreamRecords = computed(() =>
+  activeGenerations.value.some(g => g.status === 'completed' && g.storage_type === 'upstream')
+)
+
+function beforeUnloadHandler(e: BeforeUnloadEvent) {
+  if (hasUpstreamRecords.value) {
+    e.preventDefault()
+    e.returnValue = t('sora.beforeUnloadWarning')
+    return e.returnValue
+  }
+}
+
+// ==================== 轮询 ====================
+
+function getPollingIntervalByRuntime(createdAt: string): number {
+  const createdAtMs = new Date(createdAt).getTime()
+  if (Number.isNaN(createdAtMs)) return 3000
+  const elapsedMs = Date.now() - createdAtMs
+  if (elapsedMs < 2 * 60 * 1000) return 3000
+  if (elapsedMs < 10 * 60 * 1000) return 10000
+  return 30000
+}
+
+function schedulePolling(id: number) {
+  const current = activeGenerations.value.find(g => g.id === id)
+  const interval = current ? getPollingIntervalByRuntime(current.created_at) : 3000
+  if (pollTimers[id]) clearTimeout(pollTimers[id])
+  pollTimers[id] = setTimeout(() => { void pollGeneration(id) }, interval)
+}
+
+async function pollGeneration(id: number) {
+  try {
+    const gen = await soraAPI.getGeneration(id)
+    const idx = activeGenerations.value.findIndex(g => g.id === id)
+    if (idx >= 0) {
+      checkStatusTransition(activeGenerations.value[idx], gen)
+      activeGenerations.value[idx] = gen
+    }
+    if (gen.status === 'pending' || gen.status === 'generating') {
+      schedulePolling(id)
+    } else {
+      delete pollTimers[id]
+    }
+  } catch {
+    delete pollTimers[id]
+  }
+}
+
+async function loadActiveGenerations() {
+  try {
+    const res = await soraAPI.listGenerations({
+      status: 'pending,generating,completed,failed,cancelled',
+      page_size: 50
+    })
+    const generations = Array.isArray(res.data) ? res.data : []
+    activeGenerations.value = generations
+    for (const gen of generations) {
+      if ((gen.status === 'pending' || gen.status === 'generating') && !pollTimers[gen.id]) {
+        schedulePolling(gen.id)
+      }
+    }
+  } catch (e) {
+    console.error('Failed to load generations:', e)
+  }
+}
+
+// ==================== 操作 ====================
+
+async function handleGenerate(req: GenerateRequest) {
+  generating.value = true
+  try {
+    const res = await soraAPI.generate(req)
+    const gen = await soraAPI.getGeneration(res.generation_id)
+    activeGenerations.value.unshift(gen)
+    schedulePolling(gen.id)
+  } catch (e: any) {
+    console.error('Generate failed:', e)
+    alert(e?.response?.data?.message || e?.message || 'Generation failed')
+  } finally {
+    generating.value = false
+  }
+}
+
+async function handleCancel(id: number) {
+  try {
+    await soraAPI.cancelGeneration(id)
+    const idx = activeGenerations.value.findIndex(g => g.id === id)
+    if (idx >= 0) activeGenerations.value[idx].status = 'cancelled'
+  } catch (e) {
+    console.error('Cancel failed:', e)
+  }
+}
+
+async function handleDelete(id: number) {
+  try {
+    await soraAPI.deleteGeneration(id)
+    activeGenerations.value = activeGenerations.value.filter(g => g.id !== id)
+  } catch (e) {
+    console.error('Delete failed:', e)
+  }
+}
+
+async function handleSave(id: number) {
+  try {
+    await soraAPI.saveToStorage(id)
+    const gen = await soraAPI.getGeneration(id)
+    const idx = activeGenerations.value.findIndex(g => g.id === id)
+    if (idx >= 0) activeGenerations.value[idx] = gen
+  } catch (e) {
+    console.error('Save failed:', e)
+  }
+}
+
+function handleRetry(gen: SoraGeneration) {
+  handleGenerate({ model: gen.model, prompt: gen.prompt, media_type: gen.media_type })
+}
+
+function fillPrompt(text: string) {
+  promptBarRef.value?.fillPrompt(text)
+}
+
+// ==================== 检查存储状态 ====================
+
+async function checkStorageStatus() {
+  try {
+    const status = await soraAPI.getStorageStatus()
+    if (!status.s3_enabled || !status.s3_healthy) {
+      showNoStorageToast.value = true
+      setTimeout(() => { showNoStorageToast.value = false }, 8000)
+    }
+  } catch {
+    // 忽略
+  }
+}
+
+onMounted(() => {
+  loadActiveGenerations()
+  requestNotificationPermission()
+  checkStorageStatus()
+  window.addEventListener('beforeunload', beforeUnloadHandler)
+})
+
+onUnmounted(() => {
+  Object.values(pollTimers).forEach(clearTimeout)
+  pollTimers = {}
+  stopTitleBlink()
+  window.removeEventListener('beforeunload', beforeUnloadHandler)
+})
+</script>
+
+<style scoped>
+.sora-generate-page {
+  padding-bottom: 200px;
+  min-height: calc(100vh - 56px);
+  display: flex;
+  flex-direction: column;
+}
+
+/* 任务区域 */
+.sora-task-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 24px;
+  gap: 24px;
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* 欢迎区域 */
+.sora-welcome-section {
+  text-align: center;
+  padding: 60px 0 40px;
+}
+
+.sora-welcome-title {
+  font-size: 36px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  margin-bottom: 12px;
+  background: linear-gradient(135deg, var(--sora-text-primary) 0%, var(--sora-text-secondary) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.sora-welcome-subtitle {
+  font-size: 16px;
+  color: var(--sora-text-secondary, #A0A0A0);
+  max-width: 480px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+/* 示例提示词 */
+.sora-example-prompts {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  width: 100%;
+  max-width: 640px;
+}
+
+.sora-example-prompt {
+  padding: 16px 20px;
+  background: var(--sora-bg-secondary, #1A1A1A);
+  border: 1px solid var(--sora-border-color, #2A2A2A);
+  border-radius: var(--sora-radius-md, 12px);
+  font-size: 13px;
+  color: var(--sora-text-secondary, #A0A0A0);
+  cursor: pointer;
+  transition: all 150ms ease;
+  text-align: left;
+  line-height: 1.5;
+  font-family: inherit;
+}
+
+.sora-example-prompt:hover {
+  background: var(--sora-bg-tertiary, #242424);
+  border-color: var(--sora-bg-hover, #333);
+  color: var(--sora-text-primary, #FFF);
+  transform: translateY(-1px);
+}
+
+/* 任务卡片列表 */
+.sora-task-cards {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* 无存储 Toast */
+.sora-no-storage-toast {
+  position: fixed;
+  top: 80px;
+  right: 24px;
+  background: var(--sora-bg-elevated, #2A2A2A);
+  border: 1px solid var(--sora-warning, #F59E0B);
+  border-radius: var(--sora-radius-md, 12px);
+  padding: 14px 20px;
+  font-size: 13px;
+  color: var(--sora-warning, #F59E0B);
+  z-index: 50;
+  box-shadow: var(--sora-shadow-lg, 0 8px 32px rgba(0,0,0,0.5));
+  animation: sora-slide-in-right 0.3s ease;
+  max-width: 340px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+@keyframes sora-slide-in-right {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+/* 响应式 */
+@media (max-width: 900px) {
+  .sora-example-prompts {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 600px) {
+  .sora-welcome-title {
+    font-size: 28px;
+  }
+
+  .sora-task-area {
+    padding: 24px 16px;
+  }
+}
+</style>

frontend/src/components/sora/SoraLibraryPage.vue

@@ -0,0 +1,576 @@
+<template>
+  <div class="sora-gallery-page">
+    <!-- 筛选栏 -->
+    <div class="sora-gallery-filter-bar">
+      <div class="sora-gallery-filters">
+        <button
+          v-for="f in filters"
+          :key="f.value"
+          :class="['sora-gallery-filter', activeFilter === f.value && 'active']"
+          @click="activeFilter = f.value"
+        >
+          {{ f.label }}
+        </button>
+      </div>
+      <span class="sora-gallery-count">
+        {{ t('sora.galleryCount', { count: filteredItems.length }) }}
+      </span>
+    </div>
+
+    <!-- 作品网格 -->
+    <div v-if="filteredItems.length > 0" class="sora-gallery-grid">
+      <div
+        v-for="item in filteredItems"
+        :key="item.id"
+        class="sora-gallery-card"
+        @click="openPreview(item)"
+      >
+        <div class="sora-gallery-card-thumb">
+          <!-- 媒体 -->
+          <video
+            v-if="item.media_type === 'video' && item.media_url"
+            :src="item.media_url"
+            class="sora-gallery-card-image"
+            muted
+            loop
+            @mouseenter="($event.target as HTMLVideoElement).play()"
+            @mouseleave="($event.target as HTMLVideoElement).pause()"
+          />
+          <img
+            v-else-if="item.media_url"
+            :src="item.media_url"
+            class="sora-gallery-card-image"
+            alt=""
+          />
+          <div v-else class="sora-gallery-card-image sora-gallery-card-placeholder" :class="getGradientClass(item.id)">
+            {{ item.media_type === 'video' ? '🎬' : '🎨' }}
+          </div>
+
+          <!-- 类型角标 -->
+          <span
+            class="sora-gallery-card-badge"
+            :class="item.media_type === 'video' ? 'video' : 'image'"
+          >
+            {{ item.media_type === 'video' ? 'VIDEO' : 'IMAGE' }}
+          </span>
+
+          <!-- Hover 操作层 -->
+          <div class="sora-gallery-card-overlay">
+            <button
+              v-if="item.media_url"
+              class="sora-gallery-card-action"
+              title="下载"
+              @click.stop="handleDownload(item)"
+            >
+              📥
+            </button>
+            <button
+              class="sora-gallery-card-action"
+              title="删除"
+              @click.stop="handleDelete(item.id)"
+            >
+              🗑
+            </button>
+          </div>
+
+          <!-- 视频播放指示 -->
+          <div v-if="item.media_type === 'video'" class="sora-gallery-card-play">▶</div>
+
+          <!-- 视频时长 -->
+          <span v-if="item.media_type === 'video'" class="sora-gallery-card-duration">
+            {{ formatDuration(item) }}
+          </span>
+        </div>
+
+        <!-- 卡片底部信息 -->
+        <div class="sora-gallery-card-info">
+          <div class="sora-gallery-card-model">{{ item.model }}</div>
+          <div class="sora-gallery-card-time">{{ formatTime(item.created_at) }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态 -->
+    <div v-else-if="!loading" class="sora-gallery-empty">
+      <div class="sora-gallery-empty-icon">🎬</div>
+      <h2 class="sora-gallery-empty-title">{{ t('sora.galleryEmptyTitle') }}</h2>
+      <p class="sora-gallery-empty-desc">{{ t('sora.galleryEmptyDesc') }}</p>
+      <button class="sora-gallery-empty-btn" @click="emit('switchToGenerate')">
+        {{ t('sora.startCreating') }}
+      </button>
+    </div>
+
+    <!-- 加载更多 -->
+    <div v-if="hasMore && filteredItems.length > 0" class="sora-gallery-load-more">
+      <button
+        class="sora-gallery-load-more-btn"
+        :disabled="loading"
+        @click="loadMore"
+      >
+        {{ loading ? t('sora.loading') : t('sora.loadMore') }}
+      </button>
+    </div>
+
+    <!-- 预览弹窗 -->
+    <SoraMediaPreview
+      :visible="previewVisible"
+      :generation="previewItem"
+      @close="previewVisible = false"
+      @save="handleSaveFromPreview"
+      @download="handleDownloadUrl"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import soraAPI, { type SoraGeneration } from '@/api/sora'
+import SoraMediaPreview from './SoraMediaPreview.vue'
+
+const emit = defineEmits<{
+  'switchToGenerate': []
+}>()
+
+const { t } = useI18n()
+
+const items = ref<SoraGeneration[]>([])
+const loading = ref(false)
+const page = ref(1)
+const hasMore = ref(true)
+const activeFilter = ref('all')
+const previewVisible = ref(false)
+const previewItem = ref<SoraGeneration | null>(null)
+
+const filters = computed(() => [
+  { value: 'all', label: t('sora.filterAll') },
+  { value: 'video', label: t('sora.filterVideo') },
+  { value: 'image', label: t('sora.filterImage') }
+])
+
+const filteredItems = computed(() => {
+  if (activeFilter.value === 'all') return items.value
+  return items.value.filter(i => i.media_type === activeFilter.value)
+})
+
+const gradientClasses = [
+  'gradient-bg-1', 'gradient-bg-2', 'gradient-bg-3', 'gradient-bg-4',
+  'gradient-bg-5', 'gradient-bg-6', 'gradient-bg-7', 'gradient-bg-8'
+]
+
+function getGradientClass(id: number): string {
+  return gradientClasses[id % gradientClasses.length]
+}
+
+function formatTime(iso: string): string {
+  const d = new Date(iso)
+  const now = new Date()
+  const diff = now.getTime() - d.getTime()
+  if (diff < 60000) return t('sora.justNow')
+  if (diff < 3600000) return t('sora.minutesAgo', { n: Math.floor(diff / 60000) })
+  if (diff < 86400000) return t('sora.hoursAgo', { n: Math.floor(diff / 3600000) })
+  if (diff < 2 * 86400000) return t('sora.yesterday')
+  return d.toLocaleDateString()
+}
+
+function formatDuration(item: SoraGeneration): string {
+  // 从模型名提取时长，如 sora2-landscape-10s -> 0:10
+  const match = item.model.match(/(\d+)s$/)
+  if (match) {
+    const sec = parseInt(match[1])
+    return `0:${sec.toString().padStart(2, '0')}`
+  }
+  return '0:10'
+}
+
+async function loadItems(pageNum: number) {
+  loading.value = true
+  try {
+    const res = await soraAPI.listGenerations({
+      status: 'completed',
+      storage_type: 's3,local',
+      page: pageNum,
+      page_size: 20
+    })
+    const rows = Array.isArray(res.data) ? res.data : []
+    if (pageNum === 1) {
+      items.value = rows
+    } else {
+      items.value.push(...rows)
+    }
+    hasMore.value = items.value.length < res.total
+  } catch (e) {
+    console.error('Failed to load library:', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+function loadMore() {
+  page.value++
+  loadItems(page.value)
+}
+
+function openPreview(item: SoraGeneration) {
+  previewItem.value = item
+  previewVisible.value = true
+}
+
+async function handleDelete(id: number) {
+  if (!confirm(t('sora.confirmDelete'))) return
+  try {
+    await soraAPI.deleteGeneration(id)
+    items.value = items.value.filter(i => i.id !== id)
+  } catch (e) {
+    console.error('Delete failed:', e)
+  }
+}
+
+function handleDownload(item: SoraGeneration) {
+  if (item.media_url) {
+    window.open(item.media_url, '_blank')
+  }
+}
+
+function handleDownloadUrl(url: string) {
+  window.open(url, '_blank')
+}
+
+async function handleSaveFromPreview(id: number) {
+  try {
+    await soraAPI.saveToStorage(id)
+    const gen = await soraAPI.getGeneration(id)
+    const idx = items.value.findIndex(i => i.id === id)
+    if (idx >= 0) items.value[idx] = gen
+  } catch (e) {
+    console.error('Save failed:', e)
+  }
+}
+
+onMounted(() => loadItems(1))
+</script>
+
+<style scoped>
+.sora-gallery-page {
+  padding: 24px;
+  padding-bottom: 40px;
+}
+
+/* 筛选栏 */
+.sora-gallery-filter-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.sora-gallery-filters {
+  display: flex;
+  gap: 4px;
+  background: var(--sora-bg-secondary, #1A1A1A);
+  border-radius: var(--sora-radius-full, 9999px);
+  padding: 3px;
+}
+
+.sora-gallery-filter {
+  padding: 6px 18px;
+  border-radius: var(--sora-radius-full, 9999px);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--sora-text-secondary, #A0A0A0);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  user-select: none;
+}
+
+.sora-gallery-filter:hover {
+  color: var(--sora-text-primary, #FFF);
+}
+
+.sora-gallery-filter.active {
+  background: var(--sora-bg-tertiary, #242424);
+  color: var(--sora-text-primary, #FFF);
+}
+
+.sora-gallery-count {
+  font-size: 13px;
+  color: var(--sora-text-tertiary, #666);
+}
+
+/* 网格 */
+.sora-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+}
+
+/* 卡片 */
+.sora-gallery-card {
+  position: relative;
+  border-radius: var(--sora-radius-md, 12px);
+  overflow: hidden;
+  background: var(--sora-bg-secondary, #1A1A1A);
+  border: 1px solid var(--sora-border-color, #2A2A2A);
+  cursor: pointer;
+  transition: all 250ms ease;
+}
+
+.sora-gallery-card:hover {
+  border-color: var(--sora-bg-hover, #333);
+  transform: translateY(-2px);
+  box-shadow: var(--sora-shadow-lg, 0 8px 32px rgba(0,0,0,0.5));
+}
+
+.sora-gallery-card-thumb {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16/9;
+  overflow: hidden;
+}
+
+.sora-gallery-card-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 400ms ease;
+}
+
+.sora-gallery-card:hover .sora-gallery-card-image {
+  transform: scale(1.05);
+}
+
+.sora-gallery-card-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+}
+
+/* 渐变背景 */
+.gradient-bg-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
+.gradient-bg-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
+.gradient-bg-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
+.gradient-bg-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
+.gradient-bg-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
+.gradient-bg-6 { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
+.gradient-bg-7 { background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%); }
+.gradient-bg-8 { background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%); }
+
+/* 类型角标 */
+.sora-gallery-card-badge {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 3px 8px;
+  border-radius: var(--sora-radius-sm, 8px);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  backdrop-filter: blur(8px);
+}
+
+.sora-gallery-card-badge.video {
+  background: rgba(20, 184, 166, 0.8);
+  color: white;
+}
+
+.sora-gallery-card-badge.image {
+  background: rgba(16, 185, 129, 0.8);
+  color: white;
+}
+
+/* Hover 操作层 */
+.sora-gallery-card-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.sora-gallery-card:hover .sora-gallery-card-overlay {
+  opacity: 1;
+}
+
+.sora-gallery-card-action {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: white;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+
+.sora-gallery-card-action:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: scale(1.1);
+}
+
+/* 播放指示 */
+.sora-gallery-card-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  color: white;
+  opacity: 0;
+  transition: all 150ms ease;
+  pointer-events: none;
+}
+
+.sora-gallery-card:hover .sora-gallery-card-play {
+  opacity: 1;
+}
+
+/* 视频时长 */
+.sora-gallery-card-duration {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.7);
+  font-size: 11px;
+  font-family: "SF Mono", "Fira Code", monospace;
+  color: white;
+}
+
+/* 卡片信息 */
+.sora-gallery-card-info {
+  padding: 12px;
+}
+
+.sora-gallery-card-model {
+  font-size: 11px;
+  font-family: "SF Mono", "Fira Code", monospace;
+  color: var(--sora-text-tertiary, #666);
+  margin-bottom: 4px;
+}
+
+.sora-gallery-card-time {
+  font-size: 12px;
+  color: var(--sora-text-muted, #4A4A4A);
+}
+
+/* 空状态 */
+.sora-gallery-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120px 40px;
+  text-align: center;
+}
+
+.sora-gallery-empty-icon {
+  font-size: 64px;
+  margin-bottom: 24px;
+  opacity: 0.3;
+}
+
+.sora-gallery-empty-title {
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--sora-text-secondary, #A0A0A0);
+}
+
+.sora-gallery-empty-desc {
+  font-size: 14px;
+  color: var(--sora-text-tertiary, #666);
+  max-width: 360px;
+  line-height: 1.6;
+}
+
+.sora-gallery-empty-btn {
+  margin-top: 24px;
+  padding: 10px 28px;
+  background: var(--sora-accent-gradient, linear-gradient(135deg, #14b8a6, #0d9488));
+  border-radius: var(--sora-radius-full, 9999px);
+  font-size: 14px;
+  font-weight: 500;
+  color: white;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+
+.sora-gallery-empty-btn:hover {
+  box-shadow: var(--sora-shadow-glow, 0 0 20px rgba(20,184,166,0.3));
+}
+
+/* 加载更多 */
+.sora-gallery-load-more {
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+}
+
+.sora-gallery-load-more-btn {
+  padding: 10px 28px;
+  background: var(--sora-bg-secondary, #1A1A1A);
+  border: 1px solid var(--sora-border-color, #2A2A2A);
+  border-radius: var(--sora-radius-full, 9999px);
+  font-size: 13px;
+  color: var(--sora-text-secondary, #A0A0A0);
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+
+.sora-gallery-load-more-btn:hover {
+  background: var(--sora-bg-tertiary, #242424);
+  color: var(--sora-text-primary, #FFF);
+}
+
+.sora-gallery-load-more-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 响应式 */
+@media (max-width: 1200px) {
+  .sora-gallery-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 900px) {
+  .sora-gallery-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .sora-gallery-page {
+    padding: 16px;
+  }
+
+  .sora-gallery-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

frontend/src/components/sora/SoraMediaPreview.vue

@@ -0,0 +1,282 @@
+<template>
+  <Teleport to="body">
+    <Transition name="sora-modal">
+      <div
+        v-if="visible && generation"
+        class="sora-preview-overlay"
+        @keydown.esc="emit('close')"
+      >
+        <!-- 背景遮罩 -->
+        <div class="sora-preview-backdrop" @click="emit('close')" />
+
+        <!-- 内容区 -->
+        <div class="sora-preview-modal">
+          <!-- 顶部栏 -->
+          <div class="sora-preview-header">
+            <h3 class="sora-preview-title">{{ t('sora.previewTitle') }}</h3>
+            <button class="sora-preview-close" @click="emit('close')">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- 媒体区 -->
+          <div class="sora-preview-media-area">
+            <video
+              v-if="generation.media_type === 'video'"
+              :src="generation.media_url"
+              class="sora-preview-media"
+              controls
+              autoplay
+            />
+            <img
+              v-else
+              :src="generation.media_url"
+              class="sora-preview-media"
+              alt=""
+            />
+          </div>
+
+          <!-- 详情 + 操作 -->
+          <div class="sora-preview-footer">
+            <!-- 模型 + 时间 -->
+            <div class="sora-preview-meta">
+              <span class="sora-preview-model-tag">{{ generation.model }}</span>
+              <span>{{ formatDateTime(generation.created_at) }}</span>
+            </div>
+            <!-- 提示词 -->
+            <p class="sora-preview-prompt">{{ generation.prompt }}</p>
+            <!-- 操作按钮 -->
+            <div class="sora-preview-actions">
+              <button
+                v-if="generation.storage_type === 'upstream'"
+                class="sora-preview-btn primary"
+                @click="emit('save', generation.id)"
+              >
+                ☁️ {{ t('sora.save') }}
+              </button>
+              <a
+                v-if="generation.media_url"
+                :href="generation.media_url"
+                target="_blank"
+                download
+                class="sora-preview-btn secondary"
+                @click="emit('download', generation.media_url)"
+              >
+                📥 {{ t('sora.download') }}
+              </a>
+              <button class="sora-preview-btn ghost" @click="emit('close')">
+                {{ t('sora.closePreview') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { SoraGeneration } from '@/api/sora'
+
+defineProps<{
+  visible: boolean
+  generation: SoraGeneration | null
+}>()
+
+const emit = defineEmits<{
+  close: []
+  save: [id: number]
+  download: [url: string]
+}>()
+
+const { t } = useI18n()
+
+function formatDateTime(iso: string): string {
+  return new Date(iso).toLocaleString()
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') emit('close')
+}
+
+onMounted(() => document.addEventListener('keydown', handleKeydown))
+onUnmounted(() => document.removeEventListener('keydown', handleKeydown))
+</script>
+
+<style scoped>
+.sora-preview-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sora-preview-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--sora-modal-backdrop, rgba(0, 0, 0, 0.4));
+  backdrop-filter: blur(4px);
+}
+
+.sora-preview-modal {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  max-width: 90vw;
+  overflow: hidden;
+  border-radius: 20px;
+  background: var(--sora-bg-secondary, #FFF);
+  border: 1px solid var(--sora-border-color, #E5E7EB);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  animation: sora-modal-in 0.3s ease;
+}
+
+@keyframes sora-modal-in {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+.sora-preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--sora-border-color, #E5E7EB);
+}
+
+.sora-preview-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--sora-text-primary, #111827);
+}
+
+.sora-preview-close {
+  padding: 6px;
+  border-radius: 8px;
+  color: var(--sora-text-tertiary, #9CA3AF);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+
+.sora-preview-close:hover {
+  background: var(--sora-bg-tertiary, #F3F4F6);
+  color: var(--sora-text-secondary, #6B7280);
+}
+
+.sora-preview-media-area {
+  flex: 1;
+  overflow: auto;
+  background: var(--sora-bg-primary, #F9FAFB);
+  padding: 8px;
+}
+
+.sora-preview-media {
+  max-height: 70vh;
+  width: 100%;
+  border-radius: 8px;
+  object-fit: contain;
+}
+
+.sora-preview-footer {
+  padding: 16px 20px;
+  border-top: 1px solid var(--sora-border-color, #E5E7EB);
+}
+
+.sora-preview-meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--sora-text-tertiary, #9CA3AF);
+  margin-bottom: 8px;
+}
+
+.sora-preview-model-tag {
+  padding: 2px 8px;
+  background: var(--sora-bg-tertiary, #F3F4F6);
+  border-radius: 9999px;
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 11px;
+  color: var(--sora-text-secondary, #6B7280);
+}
+
+.sora-preview-prompt {
+  font-size: 13px;
+  color: var(--sora-text-secondary, #6B7280);
+  line-height: 1.5;
+  margin-bottom: 16px;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.sora-preview-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sora-preview-btn {
+  padding: 8px 16px;
+  border-radius: 9999px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sora-preview-btn.primary {
+  background: var(--sora-accent-gradient);
+  color: white;
+}
+
+.sora-preview-btn.primary:hover {
+  box-shadow: var(--sora-shadow-glow);
+}
+
+.sora-preview-btn.secondary {
+  background: var(--sora-bg-tertiary, #F3F4F6);
+  color: var(--sora-text-secondary, #6B7280);
+}
+
+.sora-preview-btn.secondary:hover {
+  background: var(--sora-bg-hover, #E5E7EB);
+  color: var(--sora-text-primary, #111827);
+}
+
+.sora-preview-btn.ghost {
+  background: transparent;
+  color: var(--sora-text-tertiary, #9CA3AF);
+  margin-left: auto;
+}
+
+.sora-preview-btn.ghost:hover {
+  color: var(--sora-text-secondary, #6B7280);
+}
+
+/* 过渡动画 */
+.sora-modal-enter-active,
+.sora-modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+.sora-modal-enter-from,
+.sora-modal-leave-to {
+  opacity: 0;
+}
+</style>

frontend/src/components/sora/SoraNoStorageWarning.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="sora-no-storage-warning">
+    <span>⚠️</span>
+    <div>
+      <p class="sora-no-storage-title">{{ t('sora.noStorageWarningTitle') }}</p>
+      <p class="sora-no-storage-desc">{{ t('sora.noStorageWarningDesc') }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
+<style scoped>
+.sora-no-storage-warning {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 14px 20px;
+  background: rgba(245, 158, 11, 0.08);
+  border: 1px solid rgba(245, 158, 11, 0.2);
+  border-radius: 12px;
+  font-size: 13px;
+}
+
+.sora-no-storage-title {
+  font-weight: 600;
+  color: var(--sora-warning, #F59E0B);
+  margin-bottom: 4px;
+}
+
+.sora-no-storage-desc {
+  color: var(--sora-text-secondary, #A0A0A0);
+  line-height: 1.5;
+}
+</style>

frontend/src/components/sora/SoraProgressCard.vue

@@ -0,0 +1,609 @@
+<template>
+  <div
+    class="sora-task-card"
+    :class="{
+      cancelled: generation.status === 'cancelled',
+      'countdown-warning': isUpstream && !isExpired && remainingMs <= 2 * 60 * 1000
+    }"
+  >
+    <!-- 头部：状态 + 模型 + 取消按钮 -->
+    <div class="sora-task-header">
+      <div class="sora-task-status">
+        <span class="sora-status-dot" :class="statusDotClass" />
+        <span class="sora-status-label" :class="statusLabelClass">{{ statusText }}</span>
+      </div>
+      <div class="sora-task-header-right">
+        <span class="sora-model-tag">{{ generation.model }}</span>
+        <button
+          v-if="generation.status === 'pending' || generation.status === 'generating'"
+          class="sora-cancel-btn"
+          @click="emit('cancel', generation.id)"
+        >
+          ✕ {{ t('sora.cancel') }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 提示词 -->
+    <div class="sora-task-prompt" :class="{ 'line-through': generation.status === 'cancelled' }">
+      {{ generation.prompt }}
+    </div>
+
+    <!-- 错误分类（失败时） -->
+    <div v-if="generation.status === 'failed' && generation.error_message" class="sora-task-error-category">
+      ⛔ {{ t('sora.errorCategory') }}
+    </div>
+    <div v-if="generation.status === 'failed' && generation.error_message" class="sora-task-error-message">
+      {{ generation.error_message }}
+    </div>
+
+    <!-- 进度条（排队/生成/失败时） -->
+    <div v-if="showProgress" class="sora-task-progress-wrapper">
+      <div class="sora-task-progress-bar">
+        <div
+          class="sora-task-progress-fill"
+          :class="progressFillClass"
+          :style="{ width: progressWidth }"
+        />
+      </div>
+      <div v-if="generation.status !== 'failed'" class="sora-task-progress-info">
+        <span>{{ progressInfoText }}</span>
+        <span>{{ progressInfoRight }}</span>
+      </div>
+    </div>
+
+    <!-- 完成预览区 -->
+    <div v-if="generation.status === 'completed' && generation.media_url" class="sora-task-preview">
+      <video
+        v-if="generation.media_type === 'video'"
+        :src="generation.media_url"
+        class="sora-task-preview-media"
+        muted
+        loop
+        @mouseenter="($event.target as HTMLVideoElement).play()"
+        @mouseleave="($event.target as HTMLVideoElement).pause()"
+      />
+      <img
+        v-else
+        :src="generation.media_url"
+        class="sora-task-preview-media"
+        alt=""
+      />
+    </div>
+
+    <!-- 完成占位预览（无 media_url 时） -->
+    <div v-else-if="generation.status === 'completed' && !generation.media_url" class="sora-task-preview">
+      <div class="sora-task-preview-placeholder">🎨</div>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div v-if="showActions" class="sora-task-actions">
+      <!-- 已完成 -->
+      <template v-if="generation.status === 'completed'">
+        <!-- 已保存标签 -->
+        <span v-if="generation.storage_type !== 'upstream'" class="sora-saved-badge">
+          ✓ {{ t('sora.savedToCloud') }}
+        </span>
+        <!-- 保存到存储按钮（upstream 时） -->
+        <button
+          v-if="generation.storage_type === 'upstream'"
+          class="sora-action-btn save-storage"
+          @click="emit('save', generation.id)"
+        >
+          ☁️ {{ t('sora.save') }}
+        </button>
+        <!-- 本地下载 -->
+        <a
+          v-if="generation.media_url"
+          :href="generation.media_url"
+          target="_blank"
+          download
+          class="sora-action-btn primary"
+        >
+          📥 {{ t('sora.downloadLocal') }}
+        </a>
+        <!-- 倒计时文本（upstream） -->
+        <span v-if="isUpstream && !isExpired" class="sora-countdown-text">
+          ⏱ {{ t('sora.upstreamCountdown', { time: countdownText }) }} {{ t('sora.canDownload') }}
+        </span>
+        <span v-if="isUpstream && isExpired" class="sora-countdown-text expired">
+          {{ t('sora.upstreamExpired') }}
+        </span>
+      </template>
+
+      <!-- 失败/取消 -->
+      <template v-if="generation.status === 'failed' || generation.status === 'cancelled'">
+        <button class="sora-action-btn primary" @click="emit('retry', generation)">
+          🔄 {{ generation.status === 'cancelled' ? t('sora.regenrate') : t('sora.retry') }}
+        </button>
+        <button class="sora-action-btn secondary" @click="emit('delete', generation.id)">
+          🗑 {{ t('sora.delete') }}
+        </button>
+      </template>
+    </div>
+
+    <!-- 倒计时进度条（upstream 已完成） -->
+    <div v-if="isUpstream && !isExpired && generation.status === 'completed'" class="sora-countdown-bar-wrapper">
+      <div class="sora-countdown-bar">
+        <div class="sora-countdown-bar-fill" :style="{ width: countdownPercent + '%' }" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { SoraGeneration } from '@/api/sora'
+
+const props = defineProps<{ generation: SoraGeneration }>()
+const emit = defineEmits<{
+  cancel: [id: number]
+  delete: [id: number]
+  save: [id: number]
+  retry: [gen: SoraGeneration]
+}>()
+const { t } = useI18n()
+
+// ==================== 状态样式 ====================
+
+const statusDotClass = computed(() => {
+  const s = props.generation.status
+  return {
+    queued: s === 'pending',
+    generating: s === 'generating',
+    completed: s === 'completed',
+    failed: s === 'failed',
+    cancelled: s === 'cancelled'
+  }
+})
+
+const statusLabelClass = computed(() => statusDotClass.value)
+
+const statusText = computed(() => {
+  const map: Record<string, string> = {
+    pending: t('sora.statusPending'),
+    generating: t('sora.statusGenerating'),
+    completed: t('sora.statusCompleted'),
+    failed: t('sora.statusFailed'),
+    cancelled: t('sora.statusCancelled')
+  }
+  return map[props.generation.status] || props.generation.status
+})
+
+// ==================== 进度条 ====================
+
+const showProgress = computed(() => {
+  const s = props.generation.status
+  return s === 'pending' || s === 'generating' || s === 'failed'
+})
+
+const progressFillClass = computed(() => {
+  const s = props.generation.status
+  return {
+    generating: s === 'pending' || s === 'generating',
+    completed: s === 'completed',
+    failed: s === 'failed'
+  }
+})
+
+const progressWidth = computed(() => {
+  const s = props.generation.status
+  if (s === 'failed') return '100%'
+  if (s === 'pending') return '0%'
+  if (s === 'generating') {
+    // 根据创建时间估算进度
+    const created = new Date(props.generation.created_at).getTime()
+    const elapsed = Date.now() - created
+    // 假设平均 10 分钟完成，最多到 95%
+    const progress = Math.min(95, (elapsed / (10 * 60 * 1000)) * 100)
+    return `${Math.round(progress)}%`
+  }
+  return '100%'
+})
+
+const progressInfoText = computed(() => {
+  const s = props.generation.status
+  if (s === 'pending') return t('sora.queueWaiting')
+  if (s === 'generating') {
+    const created = new Date(props.generation.created_at).getTime()
+    const elapsed = Date.now() - created
+    return `${t('sora.waited')} ${formatElapsed(elapsed)}`
+  }
+  return ''
+})
+
+const progressInfoRight = computed(() => {
+  const s = props.generation.status
+  if (s === 'pending') return t('sora.waiting')
+  return ''
+})
+
+function formatElapsed(ms: number): string {
+  const s = Math.floor(ms / 1000)
+  const m = Math.floor(s / 60)
+  const sec = s % 60
+  return `${m}:${sec.toString().padStart(2, '0')}`
+}
+
+// ==================== 操作按钮 ====================
+
+const showActions = computed(() => {
+  const s = props.generation.status
+  return s === 'completed' || s === 'failed' || s === 'cancelled'
+})
+
+// ==================== Upstream 倒计时 ====================
+
+const UPSTREAM_TTL = 15 * 60 * 1000
+const now = ref(Date.now())
+let countdownTimer: ReturnType<typeof setInterval> | null = null
+
+const isUpstream = computed(() =>
+  props.generation.status === 'completed' && props.generation.storage_type === 'upstream'
+)
+
+const expireTime = computed(() => {
+  if (!props.generation.completed_at) return 0
+  return new Date(props.generation.completed_at).getTime() + UPSTREAM_TTL
+})
+
+const remainingMs = computed(() => Math.max(0, expireTime.value - now.value))
+const isExpired = computed(() => remainingMs.value <= 0)
+const countdownPercent = computed(() => {
+  if (isExpired.value) return 0
+  return Math.round((remainingMs.value / UPSTREAM_TTL) * 100)
+})
+
+const countdownText = computed(() => {
+  const totalSec = Math.ceil(remainingMs.value / 1000)
+  const m = Math.floor(totalSec / 60)
+  const s = totalSec % 60
+  return `${m}:${s.toString().padStart(2, '0')}`
+})
+
+onMounted(() => {
+  if (isUpstream.value) {
+    countdownTimer = setInterval(() => {
+      now.value = Date.now()
+      if (now.value >= expireTime.value && countdownTimer) {
+        clearInterval(countdownTimer)
+        countdownTimer = null
+      }
+    }, 1000)
+  }
+})
+
+onUnmounted(() => {
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+})
+</script>
+
+<style scoped>
+.sora-task-card {
+  background: var(--sora-bg-secondary, #1A1A1A);
+  border: 1px solid var(--sora-border-color, #2A2A2A);
+  border-radius: var(--sora-radius-lg, 16px);
+  padding: 24px;
+  transition: all 250ms ease;
+  animation: sora-fade-in 0.4s ease;
+}
+
+.sora-task-card:hover {
+  border-color: var(--sora-bg-hover, #333);
+}
+
+.sora-task-card.cancelled {
+  opacity: 0.6;
+  border-color: var(--sora-border-subtle, #1F1F1F);
+}
+
+.sora-task-card.countdown-warning {
+  border-color: var(--sora-error, #EF4444) !important;
+  box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
+}
+
+@keyframes sora-fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 头部 */
+.sora-task-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.sora-task-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.sora-task-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 状态指示点 */
+.sora-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.sora-status-dot.queued { background: var(--sora-text-tertiary, #666); }
+.sora-status-dot.generating {
+  background: var(--sora-warning, #F59E0B);
+  animation: sora-pulse-dot 1.5s ease-in-out infinite;
+}
+.sora-status-dot.completed { background: var(--sora-success, #10B981); }
+.sora-status-dot.failed { background: var(--sora-error, #EF4444); }
+.sora-status-dot.cancelled { background: var(--sora-text-tertiary, #666); }
+
+@keyframes sora-pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+/* 状态标签 */
+.sora-status-label.queued { color: var(--sora-text-secondary, #A0A0A0); }
+.sora-status-label.generating { color: var(--sora-warning, #F59E0B); }
+.sora-status-label.completed { color: var(--sora-success, #10B981); }
+.sora-status-label.failed { color: var(--sora-error, #EF4444); }
+.sora-status-label.cancelled { color: var(--sora-text-tertiary, #666); }
+
+/* 模型标签 */
+.sora-model-tag {
+  font-size: 11px;
+  padding: 3px 10px;
+  background: var(--sora-bg-tertiary, #242424);
+  border-radius: var(--sora-radius-full, 9999px);
+  color: var(--sora-text-secondary, #A0A0A0);
+  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+}
+
+/* 取消按钮 */
+.sora-cancel-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  border-radius: var(--sora-radius-full, 9999px);
+  font-size: 12px;
+  color: var(--sora-text-secondary, #A0A0A0);
+  background: var(--sora-bg-tertiary, #242424);
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+
+.sora-cancel-btn:hover {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--sora-error, #EF4444);
+}
+
+/* 提示词 */
+.sora-task-prompt {
+  font-size: 14px;
+  color: var(--sora-text-secondary, #A0A0A0);
+  margin-bottom: 16px;
+  line-height: 1.6;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.sora-task-prompt.line-through {
+  text-decoration: line-through;
+  color: var(--sora-text-tertiary, #666);
+}
+
+/* 错误分类 */
+.sora-task-error-category {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background: rgba(239, 68, 68, 0.1);
+  border-radius: var(--sora-radius-sm, 8px);
+  font-size: 12px;
+  color: var(--sora-error, #EF4444);
+  margin-bottom: 8px;
+}
+
+.sora-task-error-message {
+  font-size: 13px;
+  color: var(--sora-text-secondary, #A0A0A0);
+  line-height: 1.5;
+  margin-bottom: 12px;
+}
+
+/* 进度条 */
+.sora-task-progress-wrapper {
+  margin-bottom: 16px;
+}
+
+.sora-task-progress-bar {
+  width: 100%;
+  height: 4px;
+  background: var(--sora-bg-hover, #333);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.sora-task-progress-fill {
+  height: 100%;
+  border-radius: 2px;
+  transition: width 400ms ease;
+}
+
+.sora-task-progress-fill.generating {
+  background: var(--sora-accent-gradient, linear-gradient(135deg, #14b8a6, #0d9488));
+  animation: sora-progress-shimmer 2s ease-in-out infinite;
+}
+
+.sora-task-progress-fill.completed {
+  background: var(--sora-success, #10B981);
+}
+
+.sora-task-progress-fill.failed {
+  background: var(--sora-error, #EF4444);
+}
+
+@keyframes sora-progress-shimmer {
+  0% { opacity: 1; }
+  50% { opacity: 0.6; }
+  100% { opacity: 1; }
+}
+
+.sora-task-progress-info {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--sora-text-tertiary, #666);
+}
+
+/* 预览 */
+.sora-task-preview {
+  margin-top: 16px;
+  border-radius: var(--sora-radius-md, 12px);
+  overflow: hidden;
+  background: var(--sora-bg-tertiary, #242424);
+}
+
+.sora-task-preview-media {
+  width: 100%;
+  height: 280px;
+  object-fit: cover;
+  display: block;
+}
+
+.sora-task-preview-placeholder {
+  width: 100%;
+  height: 280px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--sora-placeholder-gradient, linear-gradient(135deg, #e0e7ff 0%, #dbeafe 50%, #cffafe 100%));
+  font-size: 48px;
+}
+
+/* 操作按钮 */
+.sora-task-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
+  align-items: center;
+}
+
+.sora-action-btn {
+  padding: 8px 20px;
+  border-radius: var(--sora-radius-full, 9999px);
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sora-action-btn.primary {
+  background: var(--sora-accent-gradient, linear-gradient(135deg, #14b8a6, #0d9488));
+  color: white;
+}
+
+.sora-action-btn.primary:hover {
+  background: var(--sora-accent-gradient-hover, linear-gradient(135deg, #2dd4bf, #14b8a6));
+  box-shadow: var(--sora-shadow-glow, 0 0 20px rgba(20,184,166,0.3));
+}
+
+.sora-action-btn.secondary {
+  background: var(--sora-bg-tertiary, #242424);
+  color: var(--sora-text-secondary, #A0A0A0);
+}
+
+.sora-action-btn.secondary:hover {
+  background: var(--sora-bg-hover, #333);
+  color: var(--sora-text-primary, #FFF);
+}
+
+.sora-action-btn.save-storage {
+  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+  color: white;
+}
+
+.sora-action-btn.save-storage:hover {
+  box-shadow: 0 0 16px rgba(16, 185, 129, 0.3);
+}
+
+/* 已保存标签 */
+.sora-saved-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.25);
+  border-radius: var(--sora-radius-full, 9999px);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--sora-success, #10B981);
+}
+
+/* 倒计时文本 */
+.sora-countdown-text {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sora-warning, #F59E0B);
+}
+
+.sora-countdown-text.expired {
+  color: var(--sora-error, #EF4444);
+}
+
+/* 倒计时进度条 */
+.sora-countdown-bar-wrapper {
+  margin-top: 12px;
+}
+
+.sora-countdown-bar {
+  width: 100%;
+  height: 3px;
+  background: var(--sora-bg-hover, #333);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.sora-countdown-bar-fill {
+  height: 100%;
+  background: var(--sora-warning, #F59E0B);
+  border-radius: 2px;
+  transition: width 1s linear;
+}
+
+.countdown-warning .sora-countdown-bar-fill {
+  background: var(--sora-error, #EF4444);
+}
+
+.countdown-warning .sora-countdown-text {
+  color: var(--sora-error, #EF4444);
+}
+</style>

frontend/src/components/sora/SoraPromptBar.vue

@@ -0,0 +1,738 @@
+<template>
+  <div class="sora-creator-bar-wrapper">
+    <div class="sora-creator-bar">
+      <div class="sora-creator-bar-inner" :class="{ focused: isFocused }">
+        <!-- 模型选择行 -->
+        <div class="sora-creator-model-row">
+          <div class="sora-model-select-wrapper">
+            <select
+              v-model="selectedFamily"
+              class="sora-model-select"
+              @change="onFamilyChange"
+            >
+              <optgroup v-if="videoFamilies.length" :label="t('sora.videoModels')">
+                <option v-for="f in videoFamilies" :key="f.id" :value="f.id">{{ f.name }}</option>
+              </optgroup>
+              <optgroup v-if="imageFamilies.length" :label="t('sora.imageModels')">
+                <option v-for="f in imageFamilies" :key="f.id" :value="f.id">{{ f.name }}</option>
+              </optgroup>
+            </select>
+            <span class="sora-model-select-arrow">▼</span>
+          </div>
+          <!-- 凭证选择器 -->
+          <div class="sora-credential-select-wrapper">
+            <select v-model="selectedCredentialId" class="sora-model-select">
+              <option :value="0" disabled>{{ t('sora.selectCredential') }}</option>
+              <optgroup v-if="apiKeyOptions.length" :label="t('sora.apiKeys')">
+                <option v-for="k in apiKeyOptions" :key="'k'+k.id" :value="k.id">
+                  {{ k.name }}{{ k.group ? ' · ' + k.group.name : '' }}
+                </option>
+              </optgroup>
+              <optgroup v-if="subscriptionOptions.length" :label="t('sora.subscriptions')">
+                <option v-for="s in subscriptionOptions" :key="'s'+s.id" :value="-s.id">
+                  {{ s.group?.name || t('sora.subscription') }}
+                </option>
+              </optgroup>
+            </select>
+            <span class="sora-model-select-arrow">▼</span>
+          </div>
+          <!-- 无凭证提示 -->
+          <span v-if="soraCredentialEmpty" class="sora-no-storage-badge">
+            ⚠ {{ t('sora.noCredentialHint') }}
+          </span>
+          <!-- 无存储提示 -->
+          <span v-if="!hasStorage" class="sora-no-storage-badge">
+            ⚠ {{ t('sora.noStorageConfigured') }}
+          </span>
+        </div>
+
+        <!-- 参考图预览 -->
+        <div v-if="imagePreview" class="sora-image-preview-row">
+          <div class="sora-image-preview-thumb">
+            <img :src="imagePreview" alt="" />
+            <button class="sora-image-preview-remove" @click="removeImage">✕</button>
+          </div>
+          <span class="sora-image-preview-label">{{ t('sora.referenceImage') }}</span>
+        </div>
+
+        <!-- 输入框 -->
+        <div class="sora-creator-input-wrapper">
+          <textarea
+            ref="textareaRef"
+            v-model="prompt"
+            class="sora-creator-textarea"
+            :placeholder="t('sora.creatorPlaceholder')"
+            rows="1"
+            @input="autoResize"
+            @focus="isFocused = true"
+            @blur="isFocused = false"
+            @keydown.enter.ctrl="submit"
+            @keydown.enter.meta="submit"
+          />
+        </div>
+
+        <!-- 底部工具行 -->
+        <div class="sora-creator-tools-row">
+          <div class="sora-creator-tools-left">
+            <!-- 方向选择（根据所选模型家族支持的方向动态渲染） -->
+            <template v-if="availableAspects.length > 0">
+              <button
+                v-for="a in availableAspects"
+                :key="a.value"
+                class="sora-tool-btn"
+                :class="{ active: currentAspect === a.value }"
+                @click="currentAspect = a.value"
+              >
+                <span class="sora-tool-btn-icon">{{ a.icon }}</span> {{ a.label }}
+              </button>
+
+              <span v-if="availableDurations.length > 0" class="sora-tool-divider" />
+            </template>
+
+            <!-- 时长选择（根据所选模型家族支持的时长动态渲染） -->
+            <template v-if="availableDurations.length > 0">
+              <button
+                v-for="d in availableDurations"
+                :key="d"
+                class="sora-tool-btn"
+                :class="{ active: currentDuration === d }"
+                @click="currentDuration = d"
+              >
+                {{ d }}s
+              </button>
+
+              <span class="sora-tool-divider" />
+            </template>
+
+            <!-- 视频数量（官方 Videos 1/2/3） -->
+            <template v-if="availableVideoCounts.length > 0">
+              <button
+                v-for="count in availableVideoCounts"
+                :key="count"
+                class="sora-tool-btn"
+                :class="{ active: currentVideoCount === count }"
+                @click="currentVideoCount = count"
+              >
+                {{ count }}
+              </button>
+
+              <span class="sora-tool-divider" />
+            </template>
+
+            <!-- 图片上传 -->
+            <button class="sora-upload-btn" :title="t('sora.uploadReference')" @click="triggerFileInput">
+              📎
+            </button>
+            <input
+              ref="fileInputRef"
+              type="file"
+              accept="image/png,image/jpeg,image/webp"
+              style="display: none"
+              @change="onFileChange"
+            />
+          </div>
+
+          <!-- 活跃任务计数 -->
+          <span v-if="activeTaskCount > 0" class="sora-active-tasks-label">
+            <span class="sora-pulse-indicator" />
+            <span>{{ t('sora.generatingCount', { current: activeTaskCount, max: maxConcurrentTasks }) }}</span>
+          </span>
+
+          <!-- 生成按钮 -->
+          <button
+            class="sora-generate-btn"
+            :class="{ 'max-reached': isMaxReached }"
+            :disabled="!canSubmit || generating || isMaxReached"
+            @click="submit"
+          >
+            <span class="sora-generate-btn-icon">✨</span>
+            <span>{{ generating ? t('sora.generating') : t('sora.generate') }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 文件大小错误 -->
+    <p v-if="imageError" class="sora-image-error">{{ imageError }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import soraAPI, { type SoraModelFamily, type GenerateRequest } from '@/api/sora'
+import keysAPI from '@/api/keys'
+import { useSubscriptionStore } from '@/stores/subscriptions'
+import type { ApiKey, UserSubscription } from '@/types'
+
+const MAX_IMAGE_SIZE = 20 * 1024 * 1024
+
+/** 方向显示配置 */
+const ASPECT_META: Record<string, { icon: string; label: string }> = {
+  landscape: { icon: '▬', label: '横屏' },
+  portrait:  { icon: '▮', label: '竖屏' },
+  square:    { icon: '◻', label: '方形' }
+}
+
+const props = defineProps<{
+  generating: boolean
+  activeTaskCount: number
+  maxConcurrentTasks: number
+}>()
+
+const emit = defineEmits<{
+  generate: [req: GenerateRequest]
+  fillPrompt: [prompt: string]
+}>()
+
+const { t } = useI18n()
+
+const prompt = ref('')
+const families = ref<SoraModelFamily[]>([])
+const selectedFamily = ref('')
+const currentAspect = ref('landscape')
+const currentDuration = ref(10)
+const currentVideoCount = ref(1)
+const isFocused = ref(false)
+const imagePreview = ref<string | null>(null)
+const imageError = ref('')
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const hasStorage = ref(true)
+
+// 凭证相关状态
+const apiKeyOptions = ref<ApiKey[]>([])
+const subscriptionOptions = ref<UserSubscription[]>([])
+const selectedCredentialId = ref<number>(0) // >0 = api_key.id, <0 = -subscription.id
+
+const soraCredentialEmpty = computed(() =>
+  apiKeyOptions.value.length === 0 && subscriptionOptions.value.length === 0
+)
+
+// 按类型分组
+const videoFamilies = computed(() => families.value.filter(f => f.type === 'video'))
+const imageFamilies = computed(() => families.value.filter(f => f.type === 'image'))
+
+// 当前选中的家族对象
+const currentFamily = computed(() => families.value.find(f => f.id === selectedFamily.value))
+
+// 当前家族支持的方向列表
+const availableAspects = computed(() => {
+  const fam = currentFamily.value
+  if (!fam?.orientations?.length) return []
+  return fam.orientations
+    .map(o => ({ value: o, ...(ASPECT_META[o] || { icon: '?', label: o }) }))
+})
+
+// 当前家族支持的时长列表
+const availableDurations = computed(() => currentFamily.value?.durations ?? [])
+const availableVideoCounts = computed(() => (currentFamily.value?.type === 'video' ? [1, 2, 3] : []))
+
+const isMaxReached = computed(() => props.activeTaskCount >= props.maxConcurrentTasks)
+const canSubmit = computed(() =>
+  prompt.value.trim().length > 0 && selectedFamily.value && selectedCredentialId.value !== 0
+)
+
+/** 构建最终 model ID（family + orientation + duration） */
+function buildModelID(): string {
+  const fam = currentFamily.value
+  if (!fam) return selectedFamily.value
+
+  if (fam.type === 'image') {
+    // 图像模型: "gpt-image"（方形）或 "gpt-image-landscape"
+    return currentAspect.value === 'square'
+      ? fam.id
+      : `${fam.id}-${currentAspect.value}`
+  }
+  // 视频模型: "sora2-landscape-10s"
+  return `${fam.id}-${currentAspect.value}-${currentDuration.value}s`
+}
+
+/** 切换家族时自动调整方向和时长为首个可用值 */
+function onFamilyChange() {
+  const fam = families.value.find(f => f.id === selectedFamily.value)
+  if (!fam) return
+  // 若当前方向不在新家族支持列表中，重置为首个
+  if (fam.orientations?.length && !fam.orientations.includes(currentAspect.value)) {
+    currentAspect.value = fam.orientations[0]
+  }
+  // 若当前时长不在新家族支持列表中，重置为首个
+  if (fam.durations?.length && !fam.durations.includes(currentDuration.value)) {
+    currentDuration.value = fam.durations[0]
+  }
+  if (fam.type !== 'video') {
+    currentVideoCount.value = 1
+  }
+}
+
+async function loadModels() {
+  try {
+    families.value = await soraAPI.getModels()
+    if (families.value.length > 0 && !selectedFamily.value) {
+      selectedFamily.value = families.value[0].id
+      onFamilyChange()
+    }
+  } catch (e) {
+    console.error('Failed to load models:', e)
+  }
+}
+
+async function loadStorageStatus() {
+  try {
+    const status = await soraAPI.getStorageStatus()
+    hasStorage.value = status.s3_enabled && status.s3_healthy
+  } catch {
+    hasStorage.value = false
+  }
+}
+
+async function loadSoraCredentials() {
+  try {
+    // 加载 API Keys，筛选 sora 平台 + active 状态
+    const keysRes = await keysAPI.list(1, 100)
+    apiKeyOptions.value = (keysRes.items || []).filter(
+      (k: ApiKey) => k.status === 'active' && k.group?.platform === 'sora'
+    )
+    // 加载活跃订阅，筛选 sora 平台
+    const subStore = useSubscriptionStore()
+    const subs = await subStore.fetchActiveSubscriptions()
+    subscriptionOptions.value = subs.filter(
+      (s: UserSubscription) => s.status === 'active' && s.group?.platform === 'sora'
+    )
+    // 自动选择第一个
+    if (apiKeyOptions.value.length > 0) {
+      selectedCredentialId.value = apiKeyOptions.value[0].id
+    } else if (subscriptionOptions.value.length > 0) {
+      selectedCredentialId.value = -subscriptionOptions.value[0].id
+    }
+  } catch (e) {
+    console.error('Failed to load sora credentials:', e)
+  }
+}
+
+function autoResize() {
+  const el = textareaRef.value
+  if (!el) return
+  el.style.height = 'auto'
+  el.style.height = Math.min(el.scrollHeight, 120) + 'px'
+}
+
+function triggerFileInput() {
+  fileInputRef.value?.click()
+}
+
+function onFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+  imageError.value = ''
+  if (file.size > MAX_IMAGE_SIZE) {
+    imageError.value = t('sora.imageTooLarge')
+    input.value = ''
+    return
+  }
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    imagePreview.value = e.target?.result as string
+  }
+  reader.readAsDataURL(file)
+  input.value = ''
+}
+
+function removeImage() {
+  imagePreview.value = null
+  imageError.value = ''
+}
+
+function submit() {
+  if (!canSubmit.value || props.generating || isMaxReached.value) return
+  const modelID = buildModelID()
+  const req: GenerateRequest = {
+    model: modelID,
+    prompt: prompt.value.trim(),
+    media_type: currentFamily.value?.type || 'video'
+  }
+  if ((currentFamily.value?.type || 'video') === 'video') {
+    req.video_count = currentVideoCount.value
+  }
+  if (imagePreview.value) {
+    req.image_input = imagePreview.value
+  }
+  if (selectedCredentialId.value > 0) {
+    req.api_key_id = selectedCredentialId.value
+  }
+  emit('generate', req)
+  prompt.value = ''
+  imagePreview.value = null
+  imageError.value = ''
+  if (textareaRef.value) {
+    textareaRef.value.style.height = 'auto'
+  }
+}
+
+/** 外部调用：填充提示词 */
+function fillPrompt(text: string) {
+  prompt.value = text
+  setTimeout(autoResize, 0)
+  textareaRef.value?.focus()
+}
+
+defineExpose({ fillPrompt })
+
+onMounted(() => {
+  loadModels()
+  loadStorageStatus()
+  loadSoraCredentials()
+})
+</script>
+
+<style scoped>
+.sora-creator-bar-wrapper {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 40;
+  background: linear-gradient(to top, var(--sora-bg-primary, #0D0D0D) 60%, transparent 100%);
+  padding: 20px 24px 24px;
+  pointer-events: none;
+}
+
+.sora-creator-bar {
+  max-width: 780px;
+  margin: 0 auto;
+  pointer-events: all;
+}
+
+.sora-creator-bar-inner {
+  background: var(--sora-bg-secondary, #1A1A1A);
+  border: 1px solid var(--sora-border-color, #2A2A2A);
+  border-radius: var(--sora-radius-xl, 20px);
+  padding: 12px 16px;
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.sora-creator-bar-inner.focused {
+  border-color: var(--sora-accent-primary, #14b8a6);
+  box-shadow: 0 0 0 1px var(--sora-accent-primary, #14b8a6), var(--sora-shadow-glow, 0 0 20px rgba(20,184,166,0.3));
+}
+
+/* 模型选择行 */
+.sora-creator-model-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 0 4px;
+}
+
+.sora-model-select-wrapper {
+  position: relative;
+}
+
+.sora-model-select {
+  appearance: none;
+  background: var(--sora-bg-tertiary, #242424);
+  color: var(--sora-text-primary, #FFF);
+  padding: 5px 28px 5px 10px;
+  border-radius: var(--sora-radius-sm, 8px);
+  font-size: 12px;
+  font-family: "SF Mono", "Fira Code", monospace;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: all 150ms ease;
+}
+
+.sora-model-select:hover {
+  border-color: var(--sora-bg-hover, #333);
+}
+
+.sora-model-select:focus {
+  border-color: var(--sora-accent-primary, #14b8a6);
+  outline: none;
+}
+
+.sora-model-select option {
+  background: var(--sora-bg-secondary, #1A1A1A);
+  color: var(--sora-text-primary, #FFF);
+}
+
+.sora-model-select-arrow {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 10px;
+  color: var(--sora-text-tertiary, #666);
+}
+
+.sora-credential-select-wrapper {
+  position: relative;
+  max-width: 200px;
+}
+
+/* 无存储提示 */
+.sora-no-storage-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  background: rgba(245, 158, 11, 0.1);
+  border: 1px solid rgba(245, 158, 11, 0.2);
+  border-radius: var(--sora-radius-full, 9999px);
+  font-size: 11px;
+  color: var(--sora-warning, #F59E0B);
+}
+
+/* 参考图预览 */
+.sora-image-preview-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 4px;
+  margin-bottom: 8px;
+}
+
+.sora-image-preview-thumb {
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+
+.sora-image-preview-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+  border: 1px solid var(--sora-border-color, #2A2A2A);
+}
+
+.sora-image-preview-remove {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--sora-error, #EF4444);
+  color: white;
+  font-size: 10px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.sora-image-preview-label {
+  font-size: 12px;
+  color: var(--sora-text-tertiary, #666);
+}
+
+/* 输入框 */
+.sora-creator-input-wrapper {
+  position: relative;
+}
+
+.sora-creator-textarea {
+  width: 100%;
+  min-height: 44px;
+  max-height: 120px;
+  padding: 10px 4px;
+  font-size: 14px;
+  color: var(--sora-text-primary, #FFF);
+  background: transparent;
+  resize: none;
+  line-height: 1.5;
+  overflow-y: auto;
+  border: none;
+  outline: none;
+  font-family: inherit;
+}
+
+.sora-creator-textarea::placeholder {
+  color: var(--sora-text-muted, #4A4A4A);
+}
+
+/* 底部工具行 */
+.sora-creator-tools-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 4px 0;
+  border-top: 1px solid var(--sora-border-subtle, #1F1F1F);
+  margin-top: 4px;
+  padding-top: 10px;
+  gap: 8px;
+}
+
+.sora-creator-tools-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.sora-tool-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  border-radius: var(--sora-radius-full, 9999px);
+  font-size: 12px;
+  color: var(--sora-text-secondary, #A0A0A0);
+  background: var(--sora-bg-tertiary, #242424);
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  white-space: nowrap;
+}
+
+.sora-tool-btn:hover {
+  background: var(--sora-bg-hover, #333);
+  color: var(--sora-text-primary, #FFF);
+}
+
+.sora-tool-btn.active {
+  background: rgba(20, 184, 166, 0.15);
+  color: var(--sora-accent-primary, #14b8a6);
+  border: 1px solid rgba(20, 184, 166, 0.3);
+}
+
+.sora-tool-btn-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.sora-tool-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--sora-border-color, #2A2A2A);
+  margin: 0 4px;
+}
+
+/* 上传按钮 */
+.sora-upload-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--sora-radius-sm, 8px);
+  background: var(--sora-bg-tertiary, #242424);
+  color: var(--sora-text-secondary, #A0A0A0);
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+
+.sora-upload-btn:hover {
+  background: var(--sora-bg-hover, #333);
+  color: var(--sora-text-primary, #FFF);
+}
+
+/* 活跃任务计数 */
+.sora-active-tasks-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  background: rgba(20, 184, 166, 0.12);
+  border: 1px solid rgba(20, 184, 166, 0.25);
+  border-radius: var(--sora-radius-full, 9999px);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--sora-accent-primary, #14b8a6);
+  white-space: nowrap;
+  animation: sora-fade-in 0.3s ease;
+}
+
+.sora-pulse-indicator {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--sora-accent-primary, #14b8a6);
+  animation: sora-pulse-dot 1.5s ease-in-out infinite;
+}
+
+@keyframes sora-pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+@keyframes sora-fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 生成按钮 */
+.sora-generate-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 24px;
+  background: var(--sora-accent-gradient, linear-gradient(135deg, #14b8a6, #0d9488));
+  border-radius: var(--sora-radius-full, 9999px);
+  font-size: 13px;
+  font-weight: 600;
+  color: white;
+  border: none;
+  cursor: pointer;
+  transition: all 150ms ease;
+  flex-shrink: 0;
+}
+
+.sora-generate-btn:hover:not(:disabled) {
+  background: var(--sora-accent-gradient-hover, linear-gradient(135deg, #2dd4bf, #14b8a6));
+  box-shadow: var(--sora-shadow-glow, 0 0 20px rgba(20,184,166,0.3));
+  transform: translateY(-1px);
+}
+
+.sora-generate-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.sora-generate-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.sora-generate-btn.max-reached {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.sora-generate-btn-icon {
+  font-size: 16px;
+}
+
+/* 图片错误 */
+.sora-image-error {
+  text-align: center;
+  font-size: 12px;
+  color: var(--sora-error, #EF4444);
+  margin-top: 8px;
+  pointer-events: all;
+}
+
+/* 响应式 */
+@media (max-width: 600px) {
+  .sora-creator-bar-wrapper {
+    padding: 12px 12px 16px;
+  }
+
+  .sora-creator-tools-left {
+    gap: 4px;
+  }
+
+  .sora-tool-btn {
+    padding: 5px 8px;
+    font-size: 11px;
+  }
+}
+</style>

frontend/src/components/sora/SoraQuotaBar.vue

@@ -0,0 +1,87 @@
+<template>
+  <div v-if="quota && quota.source !== 'none'" class="sora-quota-info">
+    <div class="sora-quota-bar-wrapper">
+      <div
+        class="sora-quota-bar-fill"
+        :class="{ warning: percentage > 80, danger: percentage > 95 }"
+        :style="{ width: `${Math.min(percentage, 100)}%` }"
+      />
+    </div>
+    <span class="sora-quota-text" :class="{ warning: percentage > 80, danger: percentage > 95 }">
+      {{ formatBytes(quota.used_bytes) }} / {{ quota.quota_bytes === 0 ? '∞' : formatBytes(quota.quota_bytes) }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { QuotaInfo } from '@/api/sora'
+
+const props = defineProps<{ quota: QuotaInfo }>()
+
+const percentage = computed(() => {
+  if (!props.quota || props.quota.quota_bytes === 0) return 0
+  return (props.quota.used_bytes / props.quota.quota_bytes) * 100
+})
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(1024))
+  return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`
+}
+</script>
+
+<style scoped>
+.sora-quota-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 14px;
+  background: var(--sora-bg-secondary);
+  border-radius: var(--sora-radius-full, 9999px);
+  font-size: 12px;
+  color: var(--sora-text-secondary, #A0A0A0);
+}
+
+.sora-quota-bar-wrapper {
+  width: 80px;
+  height: 4px;
+  background: var(--sora-bg-hover, #333);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.sora-quota-bar-fill {
+  height: 100%;
+  background: var(--sora-accent-gradient, linear-gradient(135deg, #14b8a6, #0d9488));
+  border-radius: 2px;
+  transition: width 400ms ease;
+}
+
+.sora-quota-bar-fill.warning {
+  background: var(--sora-warning, #F59E0B) !important;
+}
+
+.sora-quota-bar-fill.danger {
+  background: var(--sora-error, #EF4444) !important;
+}
+
+.sora-quota-text {
+  white-space: nowrap;
+}
+
+.sora-quota-text.warning {
+  color: var(--sora-warning, #F59E0B);
+}
+
+.sora-quota-text.danger {
+  color: var(--sora-error, #EF4444);
+}
+
+@media (max-width: 900px) {
+  .sora-quota-info {
+    display: none;
+  }
+}
+</style>

frontend/src/components/user/UserAttributesConfigModal.vue

@@ -143,7 +143,7 @@
       <!-- Options (for select/multi_select) -->
       <div v-if="form.type === 'select' || form.type === 'multi_select'" class="space-y-2">
         <label class="input-label">{{ t('admin.users.attributes.options') }}</label>
-        <div v-for="(option, index) in form.options" :key="index" class="flex items-center gap-2">
+        <div v-for="(option, index) in form.options" :key="getOptionKey(option)" class="flex items-center gap-2">
           <input
             v-model="option.value"
             type="text"
@@ -246,6 +246,7 @@ import BaseDialog from '@/components/common/BaseDialog.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 import Icon from '@/components/icons/Icon.vue'
 import Select from '@/components/common/Select.vue'
+import { createStableObjectKeyResolver } from '@/utils/stableObjectKey'
 
 const { t } = useI18n()
 const appStore = useAppStore()
@@ -270,6 +271,7 @@ const showEditModal = ref(false)
 const showDeleteDialog = ref(false)
 const editingAttribute = ref<UserAttributeDefinition | null>(null)
 const deletingAttribute = ref<UserAttributeDefinition | null>(null)
+const getOptionKey = createStableObjectKeyResolver<UserAttributeOption>('user-attr-option')
 
 const form = reactive({
   key: '',
@@ -315,7 +317,7 @@ const openEditModal = (attr: UserAttributeDefinition) => {
   form.placeholder = attr.placeholder || ''
   form.required = attr.required
   form.enabled = attr.enabled
-  form.options = attr.options ? [...attr.options] : []
+  form.options = attr.options ? attr.options.map((opt) => ({ ...opt })) : []
   showEditModal.value = true
 }
 

frontend/src/components/user/profile/TotpDisableDialog.vue

@@ -88,7 +88,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { totpAPI } from '@/api'
@@ -107,6 +107,7 @@ const loading = ref(false)
 const error = ref('')
 const sendingCode = ref(false)
 const codeCooldown = ref(0)
+const cooldownTimer = ref<ReturnType<typeof setInterval> | null>(null)
 const form = ref({
   emailCode: '',
   password: ''
@@ -139,10 +140,17 @@ const handleSendCode = async () => {
     appStore.showSuccess(t('profile.totp.codeSent'))
     // Start cooldown
     codeCooldown.value = 60
-    const timer = setInterval(() => {
+    if (cooldownTimer.value) {
+      clearInterval(cooldownTimer.value)
+      cooldownTimer.value = null
+    }
+    cooldownTimer.value = setInterval(() => {
       codeCooldown.value--
       if (codeCooldown.value <= 0) {
-        clearInterval(timer)
+        if (cooldownTimer.value) {
+          clearInterval(cooldownTimer.value)
+          cooldownTimer.value = null
+        }
       }
     }, 1000)
   } catch (err: any) {
@@ -176,4 +184,11 @@ const handleDisable = async () => {
 onMounted(() => {
   loadVerificationMethod()
 })
+
+onUnmounted(() => {
+  if (cooldownTimer.value) {
+    clearInterval(cooldownTimer.value)
+    cooldownTimer.value = null
+  }
+})
 </script>

frontend/src/components/user/profile/TotpSetupModal.vue

@@ -175,7 +175,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, watch, computed } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick, watch, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { totpAPI } from '@/api'
@@ -198,6 +198,7 @@ const verifyForm = ref({ emailCode: '', password: '' })
 const verifyError = ref('')
 const sendingCode = ref(false)
 const codeCooldown = ref(0)
+const cooldownTimer = ref<ReturnType<typeof setInterval> | null>(null)
 
 const setupLoading = ref(false)
 const setupData = ref<TotpSetupResponse | null>(null)
@@ -338,10 +339,17 @@ const handleSendCode = async () => {
     appStore.showSuccess(t('profile.totp.codeSent'))
     // Start cooldown
     codeCooldown.value = 60
-    const timer = setInterval(() => {
+    if (cooldownTimer.value) {
+      clearInterval(cooldownTimer.value)
+      cooldownTimer.value = null
+    }
+    cooldownTimer.value = setInterval(() => {
       codeCooldown.value--
       if (codeCooldown.value <= 0) {
-        clearInterval(timer)
+        if (cooldownTimer.value) {
+          clearInterval(cooldownTimer.value)
+          cooldownTimer.value = null
+        }
       }
     }, 1000)
   } catch (err: any) {
@@ -397,4 +405,11 @@ const handleVerify = async () => {
 onMounted(() => {
   loadVerificationMethod()
 })
+
+onUnmounted(() => {
+  if (cooldownTimer.value) {
+    clearInterval(cooldownTimer.value)
+    cooldownTimer.value = null
+  }
+})
 </script>

frontend/src/components/user/profile/__tests__/totp-timer-cleanup.spec.ts

@@ -0,0 +1,108 @@
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import TotpSetupModal from '@/components/user/profile/TotpSetupModal.vue'
+import TotpDisableDialog from '@/components/user/profile/TotpDisableDialog.vue'
+
+const mocks = vi.hoisted(() => ({
+  showSuccess: vi.fn(),
+  showError: vi.fn(),
+  getVerificationMethod: vi.fn(),
+  sendVerifyCode: vi.fn()
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  })
+}))
+
+vi.mock('@/stores/app', () => ({
+  useAppStore: () => ({
+    showSuccess: mocks.showSuccess,
+    showError: mocks.showError
+  })
+}))
+
+vi.mock('@/api', () => ({
+  totpAPI: {
+    getVerificationMethod: mocks.getVerificationMethod,
+    sendVerifyCode: mocks.sendVerifyCode,
+    initiateSetup: vi.fn(),
+    enable: vi.fn(),
+    disable: vi.fn()
+  }
+}))
+
+const flushPromises = async () => {
+  await Promise.resolve()
+  await Promise.resolve()
+}
+
+describe('TOTP 弹窗定时器清理', () => {
+  let intervalSeed = 1000
+  let setIntervalSpy: ReturnType<typeof vi.spyOn>
+  let clearIntervalSpy: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    intervalSeed = 1000
+    mocks.showSuccess.mockReset()
+    mocks.showError.mockReset()
+    mocks.getVerificationMethod.mockReset()
+    mocks.sendVerifyCode.mockReset()
+
+    mocks.getVerificationMethod.mockResolvedValue({ method: 'email' })
+    mocks.sendVerifyCode.mockResolvedValue({ success: true })
+
+    setIntervalSpy = vi.spyOn(window, 'setInterval').mockImplementation(((handler: TimerHandler) => {
+      void handler
+      intervalSeed += 1
+      return intervalSeed as unknown as number
+    }) as typeof window.setInterval)
+    clearIntervalSpy = vi.spyOn(window, 'clearInterval')
+  })
+
+  afterEach(() => {
+    setIntervalSpy.mockRestore()
+    clearIntervalSpy.mockRestore()
+  })
+
+  it('TotpSetupModal 卸载时清理倒计时定时器', async () => {
+    const wrapper = mount(TotpSetupModal)
+    await flushPromises()
+
+    const sendButton = wrapper
+      .findAll('button')
+      .find((button) => button.text().includes('profile.totp.sendCode'))
+
+    expect(sendButton).toBeTruthy()
+    await sendButton!.trigger('click')
+    await flushPromises()
+
+    expect(setIntervalSpy).toHaveBeenCalledTimes(1)
+    const timerId = setIntervalSpy.mock.results[0]?.value
+
+    wrapper.unmount()
+
+    expect(clearIntervalSpy).toHaveBeenCalledWith(timerId)
+  })
+
+  it('TotpDisableDialog 卸载时清理倒计时定时器', async () => {
+    const wrapper = mount(TotpDisableDialog)
+    await flushPromises()
+
+    const sendButton = wrapper
+      .findAll('button')
+      .find((button) => button.text().includes('profile.totp.sendCode'))
+
+    expect(sendButton).toBeTruthy()
+    await sendButton!.trigger('click')
+    await flushPromises()
+
+    expect(setIntervalSpy).toHaveBeenCalledTimes(1)
+    const timerId = setIntervalSpy.mock.results[0]?.value
+
+    wrapper.unmount()
+
+    expect(clearIntervalSpy).toHaveBeenCalledWith(timerId)
+  })
+})