1

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

@@ -0,0 +1,293 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    class="balance-script-dialog"
+    :close-on-click-modal="false"
+    :destroy-on-close="true"
+    :model-value="show"
+    :title="`配置余额脚本 - ${account?.name || ''}`"
+    top="5vh"
+    width="720px"
+    @close="emitClose"
+  >
+    <div class="space-y-4">
+      <div class="grid gap-3 md:grid-cols-2">
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-gray-700 dark:text-gray-200">API Key</label>
+          <input v-model="form.apiKey" class="input-text" placeholder="access token / key" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-gray-700 dark:text-gray-200"
+            >请求地址（baseUrl）</label
+          >
+          <input v-model="form.baseUrl" class="input-text" placeholder="https://api.example.com" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-gray-700 dark:text-gray-200">Token（可选）</label>
+          <input v-model="form.token" class="input-text" placeholder="Bearer token" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-gray-700 dark:text-gray-200"
+            >额外参数 (extra / userId)</label
+          >
+          <input v-model="form.extra" class="input-text" placeholder="用户ID等" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-gray-700 dark:text-gray-200">超时时间(秒)</label>
+          <input v-model.number="form.timeoutSeconds" class="input-text" min="1" type="number" />
+        </div>
+        <div class="space-y-2">
+          <label class="text-sm font-medium text-gray-700 dark:text-gray-200"
+            >自动查询间隔(分钟)</label
+          >
+          <input
+            v-model.number="form.autoIntervalMinutes"
+            class="input-text"
+            min="0"
+            type="number"
+          />
+          <p class="text-xs text-gray-500 dark:text-gray-400">0 表示仅手动刷新</p>
+        </div>
+        <div class="text-xs text-gray-500 dark:text-gray-400 md:col-span-2">
+          可用变量：{{ '{' }}{{ '{' }}baseUrl{{ '}' }}{{ '}' }}、{{ '{' }}{{ '{' }}apiKey{{ '}'
+          }}{{ '}' }}、{{ '{' }}{{ '{' }}token{{ '}' }}{{ '}' }}、{{ '{' }}{{ '{' }}accountId{{ '}'
+          }}{{ '}' }}、{{ '{' }}{{ '{' }}platform{{ '}' }}{{ '}' }}、{{ '{' }}{{ '{' }}extra{{ '}'
+          }}{{ '}' }}
+        </div>
+      </div>
+
+      <div>
+        <div class="mb-2 flex items-center justify-between">
+          <div class="text-sm font-semibold text-gray-800 dark:text-gray-100">提取器代码</div>
+          <button
+            class="rounded bg-gray-200 px-2 py-1 text-xs dark:bg-gray-700"
+            @click="applyPreset"
+          >
+            使用示例
+          </button>
+        </div>
+        <textarea
+          v-model="form.scriptBody"
+          class="min-h-[260px] w-full rounded-xl bg-gray-900 font-mono text-sm text-gray-100 shadow-inner focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          spellcheck="false"
+        ></textarea>
+        <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+          extractor 可返回：isValid、invalidMessage、remaining、unit、planName、total、used、extra
+        </div>
+      </div>
+
+      <div v-if="testResult" class="rounded-lg bg-gray-50 p-3 text-sm dark:bg-gray-800/60">
+        <div class="flex items-center justify-between">
+          <span class="font-semibold">测试结果</span>
+          <span
+            :class="[
+              'rounded px-2 py-0.5 text-xs',
+              testResult.mapped?.status === 'success'
+                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-200'
+                : 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-200'
+            ]"
+          >
+            {{ testResult.mapped?.status || 'unknown' }}
+          </span>
+        </div>
+        <div class="mt-2 text-xs text-gray-600 dark:text-gray-300">
+          <div>余额: {{ displayAmount(testResult.mapped?.balance) }}</div>
+          <div>单位: {{ testResult.mapped?.currency || '—' }}</div>
+          <div v-if="testResult.mapped?.planName">套餐: {{ testResult.mapped.planName }}</div>
+          <div v-if="testResult.mapped?.errorMessage" class="text-red-500">
+            错误: {{ testResult.mapped.errorMessage }}
+          </div>
+        </div>
+        <details class="text-xs text-gray-500 dark:text-gray-400">
+          <summary class="cursor-pointer">查看 extractor 输出</summary>
+          <pre class="mt-1 whitespace-pre-wrap break-all">{{
+            formatJson(testResult.extracted)
+          }}</pre>
+        </details>
+        <details class="text-xs text-gray-500 dark:text-gray-400">
+          <summary class="cursor-pointer">查看原始响应</summary>
+          <pre class="mt-1 whitespace-pre-wrap break-all">{{
+            formatJson(testResult.response)
+          }}</pre>
+        </details>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex items-center gap-2">
+        <el-button :loading="testing" @click="testScript">测试脚本</el-button>
+        <el-button :loading="saving" type="primary" @click="saveConfig">保存配置</el-button>
+        <el-button @click="emitClose">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { reactive, ref, watch } from 'vue'
+
+import {
+  getAccountBalanceScriptApi,
+  updateAccountBalanceScriptApi,
+  testAccountBalanceScriptApi
+} from '@/utils/http_apis'
+import { showToast } from '@/utils/tools'
+
+const props = defineProps({
+  show: { type: Boolean, default: false },
+  account: { type: Object, default: () => ({}) }
+})
+
+const emit = defineEmits(['close', 'saved'])
+
+const saving = ref(false)
+const testing = ref(false)
+const testResult = ref(null)
+
+const presetScript = `({
+  request: {
+    url: "{{baseUrl}}/api/user/self",
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      "Authorization": "Bearer {{apiKey}}",
+      "New-Api-User": "{{extra}}"
+    }
+  },
+  extractor: function (response) {
+    if (response && response.success && response.data) {
+      const quota = response.data.quota || 0;
+      const used = response.data.used_quota || 0;
+      return {
+        planName: response.data.group || "默认套餐",
+        remaining: quota / 500000,
+        used: used / 500000,
+        total: (quota + used) / 500000,
+        unit: "USD"
+      };
+    }
+    return {
+      isValid: false,
+      invalidMessage: (response && response.message) || "查询失败"
+    };
+  }
+})`
+
+const form = reactive({
+  baseUrl: '',
+  apiKey: '',
+  token: '',
+  extra: '',
+  timeoutSeconds: 10,
+  autoIntervalMinutes: 0,
+  scriptBody: ''
+})
+
+const buildDefaultForm = () => ({
+  baseUrl: '',
+  apiKey: '',
+  token: '',
+  extra: '',
+  timeoutSeconds: 10,
+  autoIntervalMinutes: 0,
+  // 默认给出示例脚本，字段保持清空，避免“上一个账户的配置污染当前账户”
+  scriptBody: presetScript
+})
+
+const emitClose = () => emit('close')
+
+const resetForm = () => {
+  Object.assign(form, buildDefaultForm())
+  testResult.value = null
+  saving.value = false
+  testing.value = false
+}
+
+const loadConfig = async () => {
+  if (!props.account?.id || !props.account?.platform) return
+  const res = await getAccountBalanceScriptApi(props.account.id, props.account.platform)
+  if (res?.success && res.data) {
+    Object.assign(form, res.data)
+  }
+}
+
+const saveConfig = async () => {
+  if (!props.account?.id || !props.account?.platform) return
+  saving.value = true
+  const res = await updateAccountBalanceScriptApi(props.account.id, props.account.platform, {
+    ...form
+  })
+  if (res?.success) {
+    showToast('已保存', 'success')
+    emit('saved')
+  } else {
+    showToast(res?.message || '保存失败', 'error')
+  }
+  saving.value = false
+}
+
+const testScript = async () => {
+  if (!props.account?.id || !props.account?.platform) return
+  testing.value = true
+  testResult.value = null
+  const res = await testAccountBalanceScriptApi(props.account.id, props.account.platform, {
+    ...form
+  })
+  if (res?.success) {
+    testResult.value = res.data
+    showToast('测试完成', 'success')
+  } else {
+    showToast(res?.error || '测试失败', 'error')
+  }
+  testing.value = false
+}
+
+const applyPreset = () => {
+  form.scriptBody = presetScript
+}
+
+const displayAmount = (val) => {
+  if (val === null || val === undefined || Number.isNaN(Number(val))) return '—'
+  return Number(val).toFixed(2)
+}
+
+const formatJson = (data) => {
+  try {
+    return JSON.stringify(data, null, 2)
+  } catch (error) {
+    return String(data)
+  }
+}
+
+watch(
+  () => props.show,
+  (val) => {
+    if (val) {
+      resetForm()
+      loadConfig()
+    }
+  }
+)
+</script>
+
+<style scoped>
+:deep(.balance-script-dialog) {
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.balance-script-dialog .el-dialog__body) {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+:deep(.balance-script-dialog .el-dialog__footer) {
+  border-top: 1px solid rgba(229, 231, 235, 0.7);
+}
+
+.input-text {
+  @apply w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-800 shadow-sm transition focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:focus:border-indigo-500 dark:focus:ring-indigo-600;
+}
+</style>

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

@@ -477,6 +477,36 @@
                           <i class="fas fa-check text-xs text-white"></i>
                         </div>
                       </label>
+                      <label
+                        class="group relative flex cursor-pointer items-center rounded-md border p-2 transition-all"
+                        :class="[
+                          form.platform === 'gemini-antigravity'
+                            ? 'border-purple-500 bg-purple-50 dark:border-purple-400 dark:bg-purple-900/30'
+                            : 'border-gray-300 bg-white hover:border-purple-400 hover:bg-purple-50/50 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-purple-500 dark:hover:bg-purple-900/20'
+                        ]"
+                      >
+                        <input
+                          v-model="form.platform"
+                          class="sr-only"
+                          type="radio"
+                          value="gemini-antigravity"
+                        />
+                        <div class="flex items-center gap-2">
+                          <i class="fas fa-rocket text-sm text-purple-600 dark:text-purple-400"></i>
+                          <div>
+                            <span class="block text-xs font-medium text-gray-900 dark:text-gray-100"
+                              >Antigravity</span
+                            >
+                            <span class="text-xs text-gray-500 dark:text-gray-400">OAuth</span>
+                          </div>
+                        </div>
+                        <div
+                          v-if="form.platform === 'gemini-antigravity'"
+                          class="absolute right-1 top-1 flex h-4 w-4 items-center justify-center rounded-full bg-purple-500"
+                        >
+                          <i class="fas fa-check text-xs text-white"></i>
+                        </div>
+                      </label>
 
                       <label
                         class="group relative flex cursor-pointer items-center rounded-md border p-2 transition-all"
@@ -772,7 +802,7 @@
             </div>
 
             <!-- Gemini 项目 ID 字段 -->
-            <div v-if="form.platform === 'gemini'">
+            <div v-if="form.platform === 'gemini' || form.platform === 'gemini-antigravity'">
               <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
                 >项目 ID (可选)</label
               >
@@ -822,41 +852,194 @@
             </div>
 
             <!-- Bedrock 特定字段 -->
-            <div v-if="form.platform === 'bedrock' && !isEdit" class="space-y-4">
+            <div v-if="form.platform === 'bedrock'" class="space-y-4">
+              <!-- 凭证类型选择器 -->
               <div>
                 <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >AWS 访问密钥 ID *</label
+                  >凭证类型 *</label
                 >
-                <input
-                  v-model="form.accessKeyId"
-                  class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-                  :class="{ 'border-red-500': errors.accessKeyId }"
-                  placeholder="请输入 AWS Access Key ID"
-                  required
-                  type="text"
-                />
-                <p v-if="errors.accessKeyId" class="mt-1 text-xs text-red-500">
-                  {{ errors.accessKeyId }}
-                </p>
+                <div v-if="!isEdit" class="flex gap-4">
+                  <label class="flex cursor-pointer items-center">
+                    <input
+                      v-model="form.credentialType"
+                      class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                      type="radio"
+                      value="access_key"
+                    />
+                    <span class="text-sm text-gray-700 dark:text-gray-300"
+                      >AWS Access Key（访问密钥）</span
+                    >
+                  </label>
+                  <label class="flex cursor-pointer items-center">
+                    <input
+                      v-model="form.credentialType"
+                      class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                      type="radio"
+                      value="bearer_token"
+                    />
+                    <span class="text-sm text-gray-700 dark:text-gray-300"
+                      >Bearer Token（长期令牌）</span
+                    >
+                  </label>
+                </div>
+                <div v-else class="flex gap-4">
+                  <label class="flex items-center opacity-60">
+                    <input
+                      v-model="form.credentialType"
+                      class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                      disabled
+                      type="radio"
+                      value="access_key"
+                    />
+                    <span class="text-sm text-gray-700 dark:text-gray-300"
+                      >AWS Access Key（访问密钥）</span
+                    >
+                  </label>
+                  <label class="flex items-center opacity-60">
+                    <input
+                      v-model="form.credentialType"
+                      class="mr-2 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                      disabled
+                      type="radio"
+                      value="bearer_token"
+                    />
+                    <span class="text-sm text-gray-700 dark:text-gray-300"
+                      >Bearer Token（长期令牌）</span
+                    >
+                  </label>
+                </div>
+                <div
+                  class="mt-2 rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-700 dark:bg-blue-900/30"
+                >
+                  <div class="flex items-start gap-2">
+                    <i class="fas fa-info-circle mt-0.5 text-blue-600 dark:text-blue-400" />
+                    <div class="text-xs text-blue-700 dark:text-blue-300">
+                      <p v-if="form.credentialType === 'access_key'" class="font-medium">
+                        使用 AWS Access Key ID 和 Secret Access Key 进行身份验证（支持临时凭证）
+                      </p>
+                      <p v-else class="font-medium">
+                        使用 AWS Bedrock API Keys 生成的 Bearer Token
+                        进行身份验证，更简单、权限范围更小
+                      </p>
+                      <p v-if="isEdit" class="mt-1 text-xs italic">
+                        💡 编辑模式下凭证类型不可更改，如需切换类型请重新创建账户
+                      </p>
+                    </div>
+                  </div>
+                </div>
               </div>
 
-              <div>
+              <!-- AWS Access Key 字段（仅在 access_key 模式下显示）-->
+              <div v-if="form.credentialType === 'access_key'">
+                <div>
+                  <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+                    >AWS 访问密钥 ID {{ isEdit ? '' : '*' }}</label
+                  >
+                  <input
+                    v-model="form.accessKeyId"
+                    class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
+                    :class="{ 'border-red-500': errors.accessKeyId }"
+                    :placeholder="isEdit ? '留空则保持原有凭证不变' : '请输入 AWS Access Key ID'"
+                    :required="!isEdit"
+                    type="text"
+                  />
+                  <p v-if="errors.accessKeyId" class="mt-1 text-xs text-red-500">
+                    {{ errors.accessKeyId }}
+                  </p>
+                  <p v-if="isEdit" class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    💡 编辑模式下，留空则保持原有 Access Key ID 不变
+                  </p>
+                </div>
+
+                <div>
+                  <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+                    >AWS 秘密访问密钥 {{ isEdit ? '' : '*' }}</label
+                  >
+                  <input
+                    v-model="form.secretAccessKey"
+                    class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
+                    :class="{ 'border-red-500': errors.secretAccessKey }"
+                    :placeholder="
+                      isEdit ? '留空则保持原有凭证不变' : '请输入 AWS Secret Access Key'
+                    "
+                    :required="!isEdit"
+                    type="password"
+                  />
+                  <p v-if="errors.secretAccessKey" class="mt-1 text-xs text-red-500">
+                    {{ errors.secretAccessKey }}
+                  </p>
+                  <p v-if="isEdit" class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    💡 编辑模式下，留空则保持原有 Secret Access Key 不变
+                  </p>
+                </div>
+
+                <div>
+                  <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
+                    >会话令牌 (可选)</label
+                  >
+                  <input
+                    v-model="form.sessionToken"
+                    class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
+                    :placeholder="
+                      isEdit
+                        ? '留空则保持原有 Session Token 不变'
+                        : '如果使用临时凭证，请输入会话令牌'
+                    "
+                    type="password"
+                  />
+                  <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                    仅在使用临时 AWS 凭证时需要填写
+                  </p>
+                </div>
+              </div>
+
+              <!-- Bearer Token 字段（仅在 bearer_token 模式下显示）-->
+              <div v-if="form.credentialType === 'bearer_token'">
                 <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >AWS 秘密访问密钥 *</label
+                  >Bearer Token {{ isEdit ? '' : '*' }}</label
                 >
                 <input
-                  v-model="form.secretAccessKey"
+                  v-model="form.bearerToken"
                   class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-                  :class="{ 'border-red-500': errors.secretAccessKey }"
-                  placeholder="请输入 AWS Secret Access Key"
-                  required
+                  :class="{ 'border-red-500': errors.bearerToken }"
+                  :placeholder="
+                    isEdit ? '留空则保持原有 Bearer Token 不变' : '请输入 AWS Bearer Token'
+                  "
+                  :required="!isEdit"
                   type="password"
                 />
-                <p v-if="errors.secretAccessKey" class="mt-1 text-xs text-red-500">
-                  {{ errors.secretAccessKey }}
+                <p v-if="errors.bearerToken" class="mt-1 text-xs text-red-500">
+                  {{ errors.bearerToken }}
                 </p>
+                <p v-if="isEdit" class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                  💡 编辑模式下，留空则保持原有 Bearer Token 不变
+                </p>
+                <div
+                  class="mt-2 rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-700 dark:bg-green-900/30"
+                >
+                  <div class="flex items-start gap-2">
+                    <i class="fas fa-key mt-0.5 text-green-600 dark:text-green-400" />
+                    <div class="text-xs text-green-700 dark:text-green-300">
+                      <p class="mb-1 font-medium">Bearer Token 说明：</p>
+                      <ul class="list-inside list-disc space-y-1 text-xs">
+                        <li>输入 AWS Bedrock API Keys 生成的 Bearer Token</li>
+                        <li>Bearer Token 仅限 Bedrock 服务访问，权限范围更小</li>
+                        <li>相比 Access Key 更简单，无需 Secret Key</li>
+                        <li>
+                          参考：<a
+                            class="text-green-600 underline dark:text-green-400"
+                            href="https://aws.amazon.com/cn/blogs/machine-learning/accelerate-ai-development-with-amazon-bedrock-api-keys/"
+                            target="_blank"
+                            >AWS 官方文档</a
+                          >
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
               </div>
 
+              <!-- AWS 区域（两种凭证类型都需要）-->
               <div>
                 <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
                   >AWS 区域 *</label
@@ -872,10 +1055,12 @@
                 <p v-if="errors.region" class="mt-1 text-xs text-red-500">
                   {{ errors.region }}
                 </p>
-                <div class="mt-2 rounded-lg border border-blue-200 bg-blue-50 p-3">
+                <div
+                  class="mt-2 rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-700 dark:bg-blue-900/30"
+                >
                   <div class="flex items-start gap-2">
-                    <i class="fas fa-info-circle mt-0.5 text-blue-600" />
-                    <div class="text-xs text-blue-700">
+                    <i class="fas fa-info-circle mt-0.5 text-blue-600 dark:text-blue-400" />
+                    <div class="text-xs text-blue-700 dark:text-blue-300">
                       <p class="mb-1 font-medium">常用 AWS 区域参考：</p>
                       <div class="grid grid-cols-2 gap-1 text-xs">
                         <span>• us-east-1 (美国东部)</span>
@@ -885,27 +1070,14 @@
                         <span>• ap-northeast-1 (东京)</span>
                         <span>• eu-central-1 (法兰克福)</span>
                       </div>
-                      <p class="mt-2 text-blue-600">💡 请输入完整的区域代码，如 us-east-1</p>
+                      <p class="mt-2 text-blue-600 dark:text-blue-400">
+                        💡 请输入完整的区域代码，如 us-east-1
+                      </p>
                     </div>
                   </div>
                 </div>
               </div>
 
-              <div>
-                <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
-                  >会话令牌 (可选)</label
-                >
-                <input
-                  v-model="form.sessionToken"
-                  class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
-                  placeholder="如果使用临时凭证，请输入会话令牌"
-                  type="password"
-                />
-                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                  仅在使用临时 AWS 凭证时需要填写
-                </p>
-              </div>
-
               <div>
                 <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
                   >默认主模型 (可选)</label
@@ -1824,7 +1996,7 @@
                     Token，建议也一并填写以支持自动刷新。
                   </p>
                   <p
-                    v-else-if="form.platform === 'gemini'"
+                    v-else-if="form.platform === 'gemini' || form.platform === 'gemini-antigravity'"
                     class="mb-2 text-sm text-blue-800 dark:text-blue-300"
                   >
                     请输入有效的 Gemini Access Token。如果您有 Refresh
@@ -1861,7 +2033,9 @@
                       文件中的凭证， 请勿使用 Claude 官网 API Keys 页面的密钥。
                     </p>
                     <p
-                      v-else-if="form.platform === 'gemini'"
+                      v-else-if="
+                        form.platform === 'gemini' || form.platform === 'gemini-antigravity'
+                      "
                       class="text-xs text-blue-800 dark:text-blue-300"
                     >
                       请从已登录 Gemini CLI 的机器上获取
@@ -2591,7 +2765,7 @@
           </div>
 
           <!-- Gemini 项目 ID 字段 -->
-          <div v-if="form.platform === 'gemini'">
+          <div v-if="form.platform === 'gemini' || form.platform === 'gemini-antigravity'">
             <label class="mb-3 block text-sm font-semibold text-gray-700 dark:text-gray-300"
               >项目 ID (可选)</label
             >
@@ -3805,10 +3979,9 @@
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue'
 import { showToast } from '@/utils/tools'
-import * as httpApi from '@/utils/http_apis'
-import { getModels } from '@/utils/http_apis'
+
+import * as httpApis from '@/utils/http_apis'
 import { useAccountsStore } from '@/stores/accounts'
-import { useConfirm } from '@/composables/useConfirm'
 import ProxyConfig from './ProxyConfig.vue'
 import OAuthFlow from './OAuthFlow.vue'
 import ConfirmModal from '@/components/common/ConfirmModal.vue'
@@ -3825,7 +3998,28 @@ const props = defineProps({
 const emit = defineEmits(['close', 'success', 'platform-changed'])
 
 const accountsStore = useAccountsStore()
-const { showConfirmModal, confirmOptions, showConfirm, handleConfirm, handleCancel } = useConfirm()
+
+// 确认弹窗状态
+const showConfirmModal = ref(false)
+const confirmOptions = ref({ title: '', message: '', confirmText: '继续', cancelText: '取消' })
+let confirmResolve = null
+const showConfirm = (title, message, confirmText = '继续', cancelText = '取消') => {
+  return new Promise((resolve) => {
+    confirmOptions.value = { title, message, confirmText, cancelText }
+    confirmResolve = resolve
+    showConfirmModal.value = true
+  })
+}
+const handleConfirm = () => {
+  showConfirmModal.value = false
+  confirmResolve?.(true)
+  confirmResolve = null
+}
+const handleCancel = () => {
+  showConfirmModal.value = false
+  confirmResolve?.(false)
+  confirmResolve = null
+}
 
 // 是否为编辑模式
 const isEdit = computed(() => !!props.account)
@@ -3881,7 +4075,7 @@ const determinePlatformGroup = (platform) => {
     return 'claude'
   } else if (['openai', 'openai-responses', 'azure_openai'].includes(platform)) {
     return 'openai'
-  } else if (['gemini', 'gemini-api'].includes(platform)) {
+  } else if (['gemini', 'gemini-antigravity', 'gemini-api'].includes(platform)) {
     return 'gemini'
   } else if (platform === 'droid') {
     return 'droid'
@@ -4016,7 +4210,8 @@ const form = ref({
   platform: props.account?.platform || 'claude',
   addType: (() => {
     const platform = props.account?.platform || 'claude'
-    if (platform === 'gemini' || platform === 'openai') return 'oauth'
+    if (platform === 'gemini' || platform === 'gemini-antigravity' || platform === 'openai')
+      return 'oauth'
     if (platform === 'claude') return 'oauth'
     return 'manual'
   })(),
@@ -4073,10 +4268,12 @@ const form = ref({
   // 并发控制字段
   maxConcurrentTasks: props.account?.maxConcurrentTasks || 0,
   // Bedrock 特定字段
+  credentialType: props.account?.credentialType || 'access_key', // 'access_key' 或 'bearer_token'
   accessKeyId: props.account?.accessKeyId || '',
   secretAccessKey: props.account?.secretAccessKey || '',
   region: props.account?.region || '',
   sessionToken: props.account?.sessionToken || '',
+  bearerToken: props.account?.bearerToken || '', // Bearer Token 字段
   defaultModel: props.account?.defaultModel || '',
   smallFastModel: props.account?.smallFastModel || '',
   // Azure OpenAI 特定字段
@@ -4117,7 +4314,7 @@ const commonModels = ref([])
 // 加载模型列表
 const loadCommonModels = async () => {
   try {
-    const result = await getModels()
+    const result = await httpApis.getModelsApi()
     if (result.success && result.data?.all) {
       commonModels.value = result.data.all
     }
@@ -4239,6 +4436,7 @@ const errors = ref({
   accessKeyId: '',
   secretAccessKey: '',
   region: '',
+  bearerToken: '',
   azureEndpoint: '',
   deploymentName: ''
 })
@@ -4331,7 +4529,7 @@ const loadAccountUsage = async () => {
   if (!isEdit.value || !props.account?.id) return
 
   try {
-    const response = await httpApi.get(`/admin/claude-console-accounts/${props.account.id}/usage`)
+    const response = await httpApis.getClaudeConsoleAccountUsageApi(props.account.id)
     if (response) {
       // 更新表单中的使用量数据
       form.value.dailyUsage = response.dailyUsage || 0
@@ -4358,7 +4556,7 @@ const selectPlatformGroup = (group) => {
   } else if (group === 'openai') {
     form.value.platform = 'openai'
   } else if (group === 'gemini') {
-    form.value.platform = 'gemini'
+    form.value.platform = 'gemini' // Default to Gemini CLI, user can select Antigravity
   } else if (group === 'droid') {
     form.value.platform = 'droid'
   }
@@ -4395,7 +4593,11 @@ const nextStep = async () => {
   }
 
   // 对于Gemini账户，检查项目 ID
-  if (form.value.platform === 'gemini' && oauthStep.value === 1 && form.value.addType === 'oauth') {
+  if (
+    (form.value.platform === 'gemini' || form.value.platform === 'gemini-antigravity') &&
+    oauthStep.value === 1 &&
+    form.value.addType === 'oauth'
+  ) {
     if (!form.value.projectId || form.value.projectId.trim() === '') {
       // 使用自定义确认弹窗
       const confirmed = await showConfirm(
@@ -4768,9 +4970,14 @@ const handleOAuthSuccess = async (tokenInfoOrList) => {
         hasClaudePro: form.value.subscriptionType === 'claude_pro',
         manuallySet: true // 标记为手动设置
       }
-    } else if (currentPlatform === 'gemini') {
-      // Gemini使用geminiOauth字段
+    } else if (currentPlatform === 'gemini' || currentPlatform === 'gemini-antigravity') {
+      // Gemini/Antigravity使用geminiOauth字段
       data.geminiOauth = tokenInfo.tokens || tokenInfo
+      // 根据 platform 设置 oauthProvider
+      data.oauthProvider =
+        currentPlatform === 'gemini-antigravity'
+          ? 'antigravity'
+          : tokenInfo.oauthProvider || 'gemini-cli'
       if (form.value.projectId) {
         data.projectId = form.value.projectId
       }
@@ -4942,14 +5149,27 @@ const createAccount = async () => {
       hasError = true
     }
   } else if (form.value.platform === 'bedrock') {
-    // Bedrock 验证
-    if (!form.value.accessKeyId || form.value.accessKeyId.trim() === '') {
-      errors.value.accessKeyId = '请填写 AWS 访问密钥 ID'
-      hasError = true
-    }
-    if (!form.value.secretAccessKey || form.value.secretAccessKey.trim() === '') {
-      errors.value.secretAccessKey = '请填写 AWS 秘密访问密钥'
-      hasError = true
+    // Bedrock 验证 - 根据凭证类型进行不同验证
+    if (form.value.credentialType === 'access_key') {
+      // Access Key 模式：创建时必填，编辑时可选（留空则保持原有凭证）
+      if (!isEdit.value) {
+        if (!form.value.accessKeyId || form.value.accessKeyId.trim() === '') {
+          errors.value.accessKeyId = '请填写 AWS 访问密钥 ID'
+          hasError = true
+        }
+        if (!form.value.secretAccessKey || form.value.secretAccessKey.trim() === '') {
+          errors.value.secretAccessKey = '请填写 AWS 秘密访问密钥'
+          hasError = true
+        }
+      }
+    } else if (form.value.credentialType === 'bearer_token') {
+      // Bearer Token 模式：创建时必填，编辑时可选（留空则保持原有凭证）
+      if (!isEdit.value) {
+        if (!form.value.bearerToken || form.value.bearerToken.trim() === '') {
+          errors.value.bearerToken = '请填写 Bearer Token'
+          hasError = true
+        }
+      }
     }
     if (!form.value.region || form.value.region.trim() === '') {
       errors.value.region = '请选择 AWS 区域'
@@ -5192,6 +5412,10 @@ const createAccount = async () => {
       data.rateLimitDuration = 60 // 默认值60，不从用户输入获取
       data.dailyQuota = form.value.dailyQuota || 0
       data.quotaResetTime = form.value.quotaResetTime || '00:00'
+    } else if (form.value.platform === 'gemini-antigravity') {
+      // Antigravity OAuth - set oauthProvider, submission happens below
+      data.oauthProvider = 'antigravity'
+      data.priority = form.value.priority || 50
     } else if (form.value.platform === 'gemini-api') {
       // Gemini API 账户特定数据
       data.baseUrl = form.value.baseUrl || 'https://generativelanguage.googleapis.com'
@@ -5201,12 +5425,21 @@ const createAccount = async () => {
         ? form.value.supportedModels
         : []
     } else if (form.value.platform === 'bedrock') {
-      // Bedrock 账户特定数据 - 构造 awsCredentials 对象
-      data.awsCredentials = {
-        accessKeyId: form.value.accessKeyId,
-        secretAccessKey: form.value.secretAccessKey,
-        sessionToken: form.value.sessionToken || null
+      // Bedrock 账户特定数据
+      data.credentialType = form.value.credentialType || 'access_key'
+
+      // 根据凭证类型构造不同的凭证对象
+      if (form.value.credentialType === 'access_key') {
+        data.awsCredentials = {
+          accessKeyId: form.value.accessKeyId,
+          secretAccessKey: form.value.secretAccessKey,
+          sessionToken: form.value.sessionToken || null
+        }
+      } else if (form.value.credentialType === 'bearer_token') {
+        // Bearer Token 模式：必须传递 Bearer Token
+        data.bearerToken = form.value.bearerToken
       }
+
       data.region = form.value.region
       data.defaultModel = form.value.defaultModel || null
       data.smallFastModel = form.value.smallFastModel || null
@@ -5243,7 +5476,7 @@ const createAccount = async () => {
       result = await accountsStore.createOpenAIAccount(data)
     } else if (form.value.platform === 'azure_openai') {
       result = await accountsStore.createAzureOpenAIAccount(data)
-    } else if (form.value.platform === 'gemini') {
+    } else if (form.value.platform === 'gemini' || form.value.platform === 'gemini-antigravity') {
       result = await accountsStore.createGeminiAccount(data)
     } else if (form.value.platform === 'gemini-api') {
       result = await accountsStore.createGeminiApiAccount(data)
@@ -5534,19 +5767,33 @@ const updateAccount = async () => {
 
     // Bedrock 特定更新
     if (props.account.platform === 'bedrock') {
-      // 只有当有凭证变更时才构造 awsCredentials 对象
-      if (form.value.accessKeyId || form.value.secretAccessKey || form.value.sessionToken) {
-        data.awsCredentials = {}
-        if (form.value.accessKeyId) {
-          data.awsCredentials.accessKeyId = form.value.accessKeyId
+      // 更新凭证类型
+      if (form.value.credentialType) {
+        data.credentialType = form.value.credentialType
+      }
+
+      // 根据凭证类型更新凭证
+      if (form.value.credentialType === 'access_key') {
+        // 只有当有凭证变更时才构造 awsCredentials 对象
+        if (form.value.accessKeyId || form.value.secretAccessKey || form.value.sessionToken) {
+          data.awsCredentials = {}
+          if (form.value.accessKeyId) {
+            data.awsCredentials.accessKeyId = form.value.accessKeyId
+          }
+          if (form.value.secretAccessKey) {
+            data.awsCredentials.secretAccessKey = form.value.secretAccessKey
+          }
+          if (form.value.sessionToken !== undefined) {
+            data.awsCredentials.sessionToken = form.value.sessionToken || null
+          }
         }
-        if (form.value.secretAccessKey) {
-          data.awsCredentials.secretAccessKey = form.value.secretAccessKey
-        }
-        if (form.value.sessionToken !== undefined) {
-          data.awsCredentials.sessionToken = form.value.sessionToken || null
+      } else if (form.value.credentialType === 'bearer_token') {
+        // Bearer Token 模式：更新 Bearer Token（编辑时可选，留空则保留原有凭证）
+        if (form.value.bearerToken && form.value.bearerToken.trim()) {
+          data.bearerToken = form.value.bearerToken
         }
       }
+
       if (form.value.region) {
         data.region = form.value.region
       }
@@ -5734,7 +5981,7 @@ const filteredGroups = computed(() => {
 const loadGroups = async () => {
   loadingGroups.value = true
   try {
-    const response = await httpApi.get('/admin/account-groups')
+    const response = await httpApis.getAccountGroupsApi()
     groups.value = response.data || []
   } catch (error) {
     showToast('加载分组列表失败', 'error')
@@ -6187,7 +6434,7 @@ watch(
             // 否则查找账户所属的分组
             const checkPromises = groups.value.map(async (group) => {
               try {
-                const response = await httpApi.get(`/admin/account-groups/${group.id}/members`)
+                const response = await httpApis.getAccountGroupMembersApi(group.id)
                 const members = response.data || []
                 if (members.some((m) => m.id === newAccount.id)) {
                   foundGroupIds.push(group.id)
@@ -6215,7 +6462,7 @@ watch(
 // 获取统一 User-Agent 信息
 const fetchUnifiedUserAgent = async () => {
   try {
-    const response = await httpApi.get('/admin/claude-code-version')
+    const response = await httpApis.getClaudeCodeVersionApi()
     if (response.success && response.userAgent) {
       unifiedUserAgent.value = response.userAgent
     } else {
@@ -6231,7 +6478,7 @@ const fetchUnifiedUserAgent = async () => {
 const clearUnifiedCache = async () => {
   clearingCache.value = true
   try {
-    const response = await httpApi.post('/admin/claude-code-version/clear')
+    const response = await httpApis.clearClaudeCodeVersionApi()
     if (response.success) {
       unifiedUserAgent.value = ''
       showToast('统一User-Agent缓存已清除', 'success')

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

@@ -220,7 +220,7 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-import { API_PREFIX } from '@/utils/http_apis'
+import { APP_CONFIG } from '@/utils/tools'
 import { showToast } from '@/utils/tools'
 
 const props = defineProps({
@@ -287,7 +287,7 @@ async function loadConfig() {
     // 根据平台获取配置端点
     let endpoint = ''
     if (platform === 'claude') {
-      endpoint = `${API_PREFIX}/admin/claude-accounts/${props.account.id}/test-config`
+      endpoint = `${APP_CONFIG.apiPrefix}/admin/claude-accounts/${props.account.id}/test-config`
     } else {
       // 其他平台暂不支持
       loading.value = false
@@ -344,7 +344,7 @@ async function saveConfig() {
 
     let endpoint = ''
     if (platform === 'claude') {
-      endpoint = `${API_PREFIX}/admin/claude-accounts/${props.account.id}/test-config`
+      endpoint = `${APP_CONFIG.apiPrefix}/admin/claude-accounts/${props.account.id}/test-config`
     } else {
       saving.value = false
       return

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

@@ -68,6 +68,22 @@
                 {{ platformLabel }}
               </span>
             </div>
+            <!-- Bedrock 账号类型 -->
+            <div
+              v-if="props.account?.platform === 'bedrock'"
+              class="flex items-center justify-between text-sm"
+            >
+              <span class="text-gray-500 dark:text-gray-400">账号类型</span>
+              <span
+                :class="[
+                  'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',
+                  credentialTypeBadgeClass
+                ]"
+              >
+                <i :class="credentialTypeIcon" />
+                {{ credentialTypeLabel }}
+              </span>
+            </div>
             <div class="flex items-center justify-between text-sm">
               <span class="text-gray-500 dark:text-gray-400">测试模型</span>
               <select
@@ -183,7 +199,7 @@
 
 <script setup>
 import { ref, computed, watch, onUnmounted } from 'vue'
-import { API_PREFIX } from '@/utils/http_apis'
+import { APP_CONFIG } from '@/utils/tools'
 
 const props = defineProps({
   show: {
@@ -313,6 +329,36 @@ const platformBadgeClass = computed(() => {
   return classes[platform] || 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
 })
 
+// Bedrock 账号类型相关
+const credentialTypeLabel = computed(() => {
+  if (!props.account || props.account.platform !== 'bedrock') return ''
+  const credentialType = props.account.credentialType
+  if (credentialType === 'access_key') return 'Access Key'
+  if (credentialType === 'bearer_token') return 'Bearer Token'
+  return 'Unknown'
+})
+
+const credentialTypeIcon = computed(() => {
+  if (!props.account || props.account.platform !== 'bedrock') return ''
+  const credentialType = props.account.credentialType
+  if (credentialType === 'access_key') return 'fas fa-key'
+  if (credentialType === 'bearer_token') return 'fas fa-ticket'
+  return 'fas fa-question'
+})
+
+const credentialTypeBadgeClass = computed(() => {
+  if (!props.account || props.account.platform !== 'bedrock')
+    return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+  const credentialType = props.account.credentialType
+  if (credentialType === 'access_key') {
+    return 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300'
+  }
+  if (credentialType === 'bearer_token') {
+    return 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-300'
+  }
+  return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'
+})
+
 const statusTitle = computed(() => {
   switch (testStatus.value) {
     case 'idle':
@@ -424,14 +470,14 @@ function getTestEndpoint() {
   if (!props.account) return ''
   const platform = props.account.platform
   const endpoints = {
-    claude: `${API_PREFIX}/admin/claude-accounts/${props.account.id}/test`,
-    'claude-console': `${API_PREFIX}/admin/claude-console-accounts/${props.account.id}/test`,
-    bedrock: `${API_PREFIX}/admin/bedrock-accounts/${props.account.id}/test`,
-    gemini: `${API_PREFIX}/admin/gemini-accounts/${props.account.id}/test`,
-    'openai-responses': `${API_PREFIX}/admin/openai-responses-accounts/${props.account.id}/test`,
-    'azure-openai': `${API_PREFIX}/admin/azure-openai-accounts/${props.account.id}/test`,
-    droid: `${API_PREFIX}/admin/droid-accounts/${props.account.id}/test`,
-    ccr: `${API_PREFIX}/admin/ccr-accounts/${props.account.id}/test`
+    claude: `${APP_CONFIG.apiPrefix}/admin/claude-accounts/${props.account.id}/test`,
+    'claude-console': `${APP_CONFIG.apiPrefix}/admin/claude-console-accounts/${props.account.id}/test`,
+    bedrock: `${APP_CONFIG.apiPrefix}/admin/bedrock-accounts/${props.account.id}/test`,
+    gemini: `${APP_CONFIG.apiPrefix}/admin/gemini-accounts/${props.account.id}/test`,
+    'openai-responses': `${APP_CONFIG.apiPrefix}/admin/openai-responses-accounts/${props.account.id}/test`,
+    'azure-openai': `${APP_CONFIG.apiPrefix}/admin/azure-openai-accounts/${props.account.id}/test`,
+    droid: `${APP_CONFIG.apiPrefix}/admin/droid-accounts/${props.account.id}/test`,
+    ccr: `${APP_CONFIG.apiPrefix}/admin/ccr-accounts/${props.account.id}/test`
   }
   return endpoints[platform] || ''
 }
@@ -571,7 +617,7 @@ function handleClose() {
   emit('close')
 }
 
-// 监听show变化，重置状态
+// 监听show变化，重置状态并设置测试模型
 watch(
   () => props.show,
   (newVal) => {
@@ -580,6 +626,21 @@ watch(
       responseText.value = ''
       errorMessage.value = ''
       testDuration.value = 0
+
+      // 根据平台和账号类型设置测试模型
+      if (props.account?.platform === 'bedrock') {
+        const credentialType = props.account.credentialType
+        if (credentialType === 'bearer_token') {
+          // Bearer Token 模式使用 Sonnet 4.5
+          selectedModel.value = 'us.anthropic.claude-sonnet-4-5-20250929-v1:0'
+        } else {
+          // Access Key 模式使用 Haiku（更快更便宜）
+          selectedModel.value = 'us.anthropic.claude-3-5-haiku-20241022-v1:0'
+        }
+      } else {
+        // 其他平台使用默认模型
+        selectedModel.value = 'claude-sonnet-4-5-20250929'
+      }
     }
   }
 )

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

@@ -338,6 +338,8 @@ import { storeToRefs } from 'pinia'
 import Chart from 'chart.js/auto'
 import { useThemeStore } from '@/stores/theme'
 
+import { formatNumber } from '@/utils/tools'
+
 const props = defineProps({
   show: { type: Boolean, default: false },
   account: { type: Object, default: () => ({}) },
@@ -364,7 +366,8 @@ const platformLabelMap = {
   'openai-responses': 'OpenAI Responses',
   gemini: 'Gemini',
   'gemini-api': 'Gemini API',
-  droid: 'Droid'
+  droid: 'Droid',
+  bedrock: 'Claude AWS Bedrock'
 }
 
 const platformLabel = computed(() => platformLabelMap[props.account?.platform] || '未知平台')
@@ -388,13 +391,6 @@ const totalTokens = computed(() => props.summary?.totalTokens || 0)
 const overviewInputTokens = computed(() => props.overview?.total?.inputTokens || 0)
 const overviewOutputTokens = computed(() => props.overview?.total?.outputTokens || 0)
 
-const formatNumber = (value) => {
-  const num = Number(value || 0)
-  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(2)}M`
-  if (num >= 1_000) return `${(num / 1_000).toFixed(2)}K`
-  return num.toLocaleString()
-}
-
 const formatCost = (value) => {
   const num = Number(value || 0)
   if (Number.isNaN(num)) return '$0.000000'
@@ -410,9 +406,7 @@ const formatDate = (value) => {
   const date = new Date(value)
   if (Number.isNaN(date.getTime())) {
     const parts = value.split('-')
-    if (parts.length === 3) {
-      return `${parts[1]}-${parts[2]}`
-    }
+    if (parts.length === 3) return `${parts[1]}-${parts[2]}`
     return value
   }
   const month = String(date.getMonth() + 1).padStart(2, '0')

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

@@ -397,7 +397,7 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { showToast } from '@/utils/tools'
-import * as httpApi from '@/utils/http_apis'
+import { getDroidAccountByIdApi, updateDroidAccountApi } from '@/utils/http_apis'
 import ConfirmModal from '@/components/common/ConfirmModal.vue'
 
 const props = defineProps({
@@ -518,7 +518,7 @@ const errorKeysCount = computed(() => {
 const loadApiKeys = async () => {
   loading.value = true
   try {
-    const response = await httpApi.get(`/admin/droid-accounts/${props.accountId}`)
+    const response = await getDroidAccountByIdApi(props.accountId)
     const account = response.data
 
     // 解析 apiKeys
@@ -613,7 +613,7 @@ const deleteApiKey = async (apiKey) => {
       apiKeyUpdateMode: 'delete'
     }
 
-    await httpApi.put(`/admin/droid-accounts/${props.accountId}`, updateData)
+    await updateDroidAccountApi(props.accountId, updateData)
 
     showToast('API Key 已删除', 'success')
     await loadApiKeys()
@@ -654,7 +654,7 @@ const resetApiKeyStatus = async (apiKey) => {
       apiKeyUpdateMode: 'update'
     }
 
-    await httpApi.put(`/admin/droid-accounts/${props.accountId}`, updateData)
+    await updateDroidAccountApi(props.accountId, updateData)
 
     showToast('API Key 状态已重置', 'success')
     await loadApiKeys()
@@ -695,7 +695,7 @@ const deleteAllErrorKeys = async () => {
       apiKeyUpdateMode: 'delete'
     }
 
-    await httpApi.put(`/admin/droid-accounts/${props.accountId}`, updateData)
+    await updateDroidAccountApi(props.accountId, updateData)
 
     showToast(`成功删除 ${errorKeys.length} 个异常 API Key`, 'success')
     await loadApiKeys()
@@ -742,7 +742,7 @@ const deleteAllKeys = async () => {
       apiKeyUpdateMode: 'delete'
     }
 
-    await httpApi.put(`/admin/droid-accounts/${props.accountId}`, updateData)
+    await updateDroidAccountApi(props.accountId, updateData)
 
     showToast(`成功删除所有 ${keysToDelete.length} 个 API Key`, 'success')
     await loadApiKeys()

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

@@ -0,0 +1,361 @@
+<template>
+  <div class="min-w-[200px] space-y-1">
+    <div v-if="loading" class="flex items-center gap-2">
+      <i class="fas fa-spinner fa-spin text-gray-400 dark:text-gray-500"></i>
+      <span class="text-xs text-gray-500 dark:text-gray-400">加载中...</span>
+    </div>
+
+    <div v-else-if="requestError" class="flex items-center gap-2">
+      <i class="fas fa-exclamation-circle text-red-500"></i>
+      <span class="text-xs text-red-600 dark:text-red-400">{{ requestError }}</span>
+      <button
+        class="text-xs text-blue-500 hover:text-blue-600 dark:text-blue-400"
+        :disabled="refreshing"
+        @click="reload"
+      >
+        重试
+      </button>
+    </div>
+
+    <div v-else-if="balanceData" class="space-y-1">
+      <div v-if="balanceData.status === 'error' && balanceData.error" class="text-xs text-red-500">
+        {{ balanceData.error }}
+      </div>
+
+      <div class="flex items-center justify-between gap-2">
+        <div class="flex items-center gap-2">
+          <i
+            class="fas"
+            :class="
+              balanceData.balance
+                ? 'fa-wallet text-green-600 dark:text-green-400'
+                : 'fa-chart-line text-gray-500 dark:text-gray-400'
+            "
+          ></i>
+          <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {{ primaryText }}
+          </span>
+          <span class="rounded px-1.5 py-0.5 text-xs" :class="sourceClass">
+            {{ sourceLabel }}
+          </span>
+        </div>
+
+        <button
+          v-if="!hideRefresh"
+          class="text-xs text-gray-500 hover:text-blue-600 disabled:cursor-not-allowed disabled:opacity-40 dark:text-gray-400 dark:hover:text-blue-400"
+          :disabled="refreshing || !canRefresh"
+          :title="refreshTitle"
+          @click="refresh"
+        >
+          <i class="fas fa-sync-alt" :class="{ 'fa-spin': refreshing }"></i>
+        </button>
+      </div>
+
+      <!-- 配额（如适用） -->
+      <div v-if="quotaInfo && isAntigravityQuota" class="space-y-2">
+        <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
+          <span>剩余</span>
+          <span>{{ formatQuotaNumber(quotaInfo.remaining) }}</span>
+        </div>
+
+        <div class="space-y-1">
+          <div
+            v-for="row in antigravityRows"
+            :key="row.category"
+            class="flex items-center gap-2 rounded-md bg-gray-50 px-2 py-1.5 dark:bg-gray-700/60"
+          >
+            <span class="h-2 w-2 shrink-0 rounded-full" :class="row.dotClass"></span>
+            <span
+              class="min-w-0 flex-1 truncate text-xs font-medium text-gray-800 dark:text-gray-100"
+              :title="row.category"
+            >
+              {{ row.category }}
+            </span>
+
+            <div class="flex w-[94px] flex-col gap-0.5">
+              <div class="h-1.5 w-full rounded-full bg-gray-200 dark:bg-gray-600">
+                <div
+                  class="h-1.5 rounded-full transition-all"
+                  :class="row.barClass"
+                  :style="{ width: `${row.remainingPercent ?? 0}%` }"
+                ></div>
+              </div>
+              <div
+                class="flex items-center justify-between text-[11px] text-gray-500 dark:text-gray-300"
+              >
+                <span>{{ row.remainingText }}</span>
+                <span v-if="row.resetAt" class="text-gray-400 dark:text-gray-400">{{
+                  formatResetTime(row.resetAt)
+                }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="quotaInfo" class="space-y-1">
+        <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
+          <span>已用: {{ formatQuotaNumber(quotaInfo.used) }}</span>
+          <span>剩余: {{ formatQuotaNumber(quotaInfo.remaining) }}</span>
+        </div>
+        <div class="h-1.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+          <div
+            class="h-1.5 rounded-full transition-all"
+            :class="quotaBarClass"
+            :style="{ width: `${Math.min(100, quotaInfo.percentage)}%` }"
+          ></div>
+        </div>
+        <div class="flex items-center justify-between text-xs">
+          <span class="text-gray-500 dark:text-gray-400">
+            {{ quotaInfo.percentage.toFixed(1) }}% 已使用
+          </span>
+          <span v-if="quotaInfo.resetAt" class="text-gray-400 dark:text-gray-500">
+            重置: {{ formatResetTime(quotaInfo.resetAt) }}
+          </span>
+        </div>
+      </div>
+
+      <div v-else-if="balanceData.quota?.unlimited" class="flex items-center gap-2">
+        <i class="fas fa-infinity text-blue-500 dark:text-blue-400"></i>
+        <span class="text-xs text-gray-600 dark:text-gray-400">无限制</span>
+      </div>
+
+      <div
+        v-if="balanceData.cacheExpiresAt && balanceData.source === 'cache'"
+        class="text-xs text-gray-400 dark:text-gray-500"
+      >
+        缓存至: {{ formatCacheExpiry(balanceData.cacheExpiresAt) }}
+      </div>
+    </div>
+
+    <div v-else class="text-xs text-gray-400 dark:text-gray-500">暂无余额数据</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+
+import { getAccountBalanceApi, refreshAccountBalanceApi } from '@/utils/http_apis'
+import { formatNumber } from '@/utils/tools'
+
+const props = defineProps({
+  accountId: { type: String, required: true },
+  platform: { type: String, required: true },
+  initialBalance: { type: Object, default: null },
+  hideRefresh: { type: Boolean, default: false },
+  autoLoad: { type: Boolean, default: true },
+  queryMode: { type: String, default: 'local' } // local | auto | api
+})
+
+const emit = defineEmits(['refreshed', 'error'])
+
+const balanceData = ref(props.initialBalance)
+const loading = ref(false)
+const refreshing = ref(false)
+const requestError = ref(null)
+
+const sourceClass = computed(() => {
+  const source = balanceData.value?.source
+  return {
+    'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300': source === 'api',
+    'bg-gray-100 text-gray-600 dark:bg-gray-700/60 dark:text-gray-300': source === 'cache',
+    'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300': source === 'local'
+  }
+})
+
+const sourceLabel = computed(() => {
+  const source = balanceData.value?.source
+  return { api: 'API', cache: '缓存', local: '本地' }[source] || '未知'
+})
+
+const quotaInfo = computed(() => {
+  const quota = balanceData.value?.quota
+  if (!quota || quota.unlimited) return null
+  if (typeof quota.percentage !== 'number' || !Number.isFinite(quota.percentage)) return null
+  return {
+    used: quota.used ?? 0,
+    remaining: quota.remaining ?? 0,
+    percentage: quota.percentage,
+    resetAt: quota.resetAt || null
+  }
+})
+
+const isAntigravityQuota = computed(() => {
+  return balanceData.value?.quota?.type === 'antigravity'
+})
+
+const antigravityRows = computed(() => {
+  if (!isAntigravityQuota.value) return []
+
+  const buckets = balanceData.value?.quota?.buckets
+  const list = Array.isArray(buckets) ? buckets : []
+  const map = new Map(list.map((b) => [b?.category, b]))
+
+  const order = ['Gemini Pro', 'Claude', 'Gemini Flash', 'Gemini Image']
+  const styles = {
+    'Gemini Pro': { dotClass: 'bg-blue-500', barClass: 'bg-blue-500 dark:bg-blue-400' },
+    Claude: { dotClass: 'bg-purple-500', barClass: 'bg-purple-500 dark:bg-purple-400' },
+    'Gemini Flash': { dotClass: 'bg-cyan-500', barClass: 'bg-cyan-500 dark:bg-cyan-400' },
+    'Gemini Image': { dotClass: 'bg-emerald-500', barClass: 'bg-emerald-500 dark:bg-emerald-400' }
+  }
+
+  return order.map((category) => {
+    const raw = map.get(category) || null
+    const remaining = raw?.remaining
+    const remainingPercent = Number.isFinite(Number(remaining))
+      ? Math.max(0, Math.min(100, Number(remaining)))
+      : null
+
+    return {
+      category,
+      remainingPercent,
+      remainingText: remainingPercent === null ? '—' : `${Math.round(remainingPercent)}%`,
+      resetAt: raw?.resetAt || null,
+      dotClass: styles[category]?.dotClass || 'bg-gray-400',
+      barClass: styles[category]?.barClass || 'bg-gray-400'
+    }
+  })
+})
+
+const quotaBarClass = computed(() => {
+  const percentage = quotaInfo.value?.percentage || 0
+  if (percentage >= 90) return 'bg-red-500 dark:bg-red-600'
+  if (percentage >= 70) return 'bg-yellow-500 dark:bg-yellow-600'
+  return 'bg-green-500 dark:bg-green-600'
+})
+
+const canRefresh = computed(() => {
+  // antigravity 配额：允许直接触发 Provider 刷新（无需脚本）
+  if (props.queryMode === 'api' || props.queryMode === 'auto') {
+    return true
+  }
+
+  // 其他平台：仅在“已启用脚本且该账户配置了脚本”时允许刷新，避免误导（非脚本 Provider 多为降级策略）
+  const data = balanceData.value
+  if (!data) return false
+  if (data.scriptEnabled === false) return false
+  return !!data.scriptConfigured
+})
+
+const refreshTitle = computed(() => {
+  if (refreshing.value) return '刷新中...'
+  if (!canRefresh.value) {
+    if (balanceData.value?.scriptEnabled === false) {
+      return '余额脚本功能已禁用'
+    }
+    return '请先配置余额脚本'
+  }
+  if (isAntigravityQuota.value) {
+    return '刷新配额（调用 Antigravity API）'
+  }
+  return '刷新余额（调用脚本配置的余额 API）'
+})
+
+const primaryText = computed(() => {
+  if (balanceData.value?.balance?.formattedAmount) {
+    return balanceData.value.balance.formattedAmount
+  }
+  const dailyCost = Number(balanceData.value?.statistics?.dailyCost || 0)
+  return `今日成本 ${formatCurrency(dailyCost)}`
+})
+
+const load = async () => {
+  if (!props.autoLoad) return
+  if (!props.accountId || !props.platform) return
+
+  loading.value = true
+  requestError.value = null
+
+  const params = {
+    platform: props.platform,
+    queryApi: props.queryMode === 'api' ? true : props.queryMode === 'auto' ? 'auto' : false
+  }
+  const response = await getAccountBalanceApi(props.accountId, params)
+  if (response?.success) {
+    balanceData.value = response.data
+  } else {
+    requestError.value = response?.error || '加载失败'
+  }
+  loading.value = false
+}
+
+const refresh = async () => {
+  if (!props.accountId || !props.platform) return
+  if (refreshing.value) return
+  if (!canRefresh.value) return
+
+  refreshing.value = true
+  requestError.value = null
+
+  const response = await refreshAccountBalanceApi(props.accountId, { platform: props.platform })
+  if (response?.success) {
+    balanceData.value = response.data
+    emit('refreshed', response.data)
+  } else {
+    requestError.value = response?.error || '刷新失败'
+  }
+  refreshing.value = false
+}
+
+const reload = async () => {
+  await load()
+}
+
+const formatQuotaNumber = (num) => {
+  if (num === Infinity) return '∞'
+  const value = Number(num)
+  if (!Number.isFinite(value)) return 'N/A'
+  if (isAntigravityQuota.value) {
+    return `${Math.round(value)}%`
+  }
+  return formatNumber(value)
+}
+
+const formatCurrency = (amount) => {
+  const value = Number(amount)
+  if (!Number.isFinite(value)) return '$0.00'
+  if (value >= 1) return `$${value.toFixed(2)}`
+  if (value >= 0.01) return `$${value.toFixed(3)}`
+  return `$${value.toFixed(6)}`
+}
+
+const formatResetTime = (isoString) => {
+  const date = new Date(isoString)
+  const now = new Date()
+  const diff = date.getTime() - now.getTime()
+  if (!Number.isFinite(diff)) return '未知'
+  if (diff < 0) return '已过期'
+
+  const minutes = Math.floor(diff / (1000 * 60))
+  const hours = Math.floor(minutes / 60)
+  const remainMinutes = minutes % 60
+  if (hours >= 24) {
+    const days = Math.floor(hours / 24)
+    return `${days}天后`
+  }
+  return `${hours}小时${remainMinutes}分钟`
+}
+
+const formatCacheExpiry = (isoString) => {
+  const date = new Date(isoString)
+  if (Number.isNaN(date.getTime())) return '未知'
+  return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
+}
+
+watch(
+  () => props.initialBalance,
+  (newVal) => {
+    if (newVal) {
+      balanceData.value = newVal
+    }
+  }
+)
+
+onMounted(() => {
+  if (!props.initialBalance) {
+    load()
+  }
+})
+
+defineExpose({ refresh, reload })
+</script>

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

@@ -259,7 +259,7 @@
 
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue'
-import * as httpApi from '@/utils/http_apis'
+import { updateCcrAccountApi, createCcrAccountApi } from '@/utils/http_apis'
 import { showToast } from '@/utils/tools'
 import ProxyConfig from '@/components/accounts/ProxyConfig.vue'
 
@@ -344,7 +344,7 @@ const submit = async () => {
       if (form.value.apiKey && form.value.apiKey.trim().length > 0) {
         updates.apiKey = form.value.apiKey
       }
-      const res = await httpApi.put(`/admin/ccr-accounts/${props.account.id}`, updates)
+      const res = await updateCcrAccountApi(props.account.id, updates)
       if (res.success) {
         // 不在这里显示 toast，由父组件统一处理
         emit('success')
@@ -367,7 +367,7 @@ const submit = async () => {
         dailyQuota: Number(form.value.dailyQuota || 0),
         quotaResetTime: form.value.quotaResetTime || '00:00'
       }
-      const res = await httpApi.post('/admin/ccr-accounts', payload)
+      const res = await createCcrAccountApi(payload)
       if (res.success) {
         // 不在这里显示 toast，由父组件统一处理
         emit('success')

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

@@ -11,7 +11,9 @@
             >
               <i class="fas fa-layer-group text-sm text-white sm:text-base" />
             </div>
-            <h3 class="text-lg font-bold text-gray-900 sm:text-xl">账户分组管理</h3>
+            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 sm:text-xl">
+              账户分组管理
+            </h3>
           </div>
           <button
             class="p-1 text-gray-400 transition-colors hover:text-gray-600"
@@ -151,7 +153,7 @@
     >
       <div class="modal-content w-full max-w-lg p-4 sm:p-6">
         <div class="mb-4 flex items-center justify-between">
-          <h3 class="text-lg font-bold text-gray-900">编辑分组</h3>
+          <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">编辑分组</h3>
           <button class="text-gray-400 transition-colors hover:text-gray-600" @click="cancelEdit">
             <i class="fas fa-times" />
           </button>
@@ -303,8 +305,9 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
-import { showToast } from '@/utils/tools'
-import * as httpApi from '@/utils/http_apis'
+import { showToast, formatDate } from '@/utils/tools'
+
+import * as httpApis from '@/utils/http_apis'
 import ConfirmModal from '@/components/common/ConfirmModal.vue'
 
 const emit = defineEmits(['close', 'refresh'])
@@ -362,17 +365,12 @@ const editForm = ref({
 })
 
 // 格式化日期
-const formatDate = (dateStr) => {
-  if (!dateStr) return '-'
-  const date = new Date(dateStr)
-  return date.toLocaleDateString('zh-CN')
-}
 
 // 加载分组列表
 const loadGroups = async () => {
   loading.value = true
   try {
-    const response = await httpApi.get('/admin/account-groups')
+    const response = await httpApis.getAccountGroupsApi()
     groups.value = response.data || []
   } catch (error) {
     showToast('加载分组列表失败', 'error')
@@ -390,7 +388,7 @@ const createGroup = async () => {
 
   creating.value = true
   try {
-    await httpApi.post('/admin/account-groups', {
+    await httpApis.createAccountGroupApi({
       name: createForm.value.name,
       platform: createForm.value.platform,
       description: createForm.value.description
@@ -443,7 +441,7 @@ const updateGroup = async () => {
 
   updating.value = true
   try {
-    await httpApi.put(`/admin/account-groups/${editingGroup.value.id}`, {
+    await httpApis.updateAccountGroupApi(editingGroup.value.id, {
       name: editForm.value.name,
       description: editForm.value.description
     })
@@ -484,7 +482,7 @@ const deleteGroup = (group) => {
 const confirmDelete = async () => {
   if (!deletingGroup.value) return
   try {
-    await httpApi.del(`/admin/account-groups/${deletingGroup.value.id}`)
+    await httpApis.deleteAccountGroupApi(deletingGroup.value.id)
     showToast('分组删除成功', 'success')
     cancelDelete()
     await loadGroups()

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

@@ -287,7 +287,7 @@
     </div>
 
     <!-- Gemini OAuth流程 -->
-    <div v-else-if="platform === 'gemini'">
+    <div v-else-if="platform === 'gemini' || platform === 'gemini-antigravity'">
       <div
         class="rounded-lg border border-green-200 bg-green-50 p-6 dark:border-green-700 dark:bg-green-900/30"
       >
@@ -303,6 +303,16 @@
               请按照以下步骤完成 Gemini 账户的授权：
             </p>
 
+            <!-- 授权来源显示（由平台类型决定） -->
+            <div class="mb-4">
+              <p class="text-sm text-green-800 dark:text-green-300">
+                <i class="fas fa-info-circle mr-1"></i>
+                授权类型：<span class="font-semibold">{{
+                  platform === 'gemini-antigravity' ? 'Antigravity OAuth' : 'Gemini CLI OAuth'
+                }}</span>
+              </p>
+            </div>
+
             <div class="space-y-4">
               <!-- 步骤1: 生成授权链接 -->
               <div
@@ -818,6 +828,13 @@ const exchanging = ref(false)
 const authUrl = ref('')
 const authCode = ref('')
 const copied = ref(false)
+// oauthProvider is now derived from platform prop
+const geminiOauthProvider = computed(() => {
+  if (props.platform === 'gemini-antigravity') {
+    return 'antigravity'
+  }
+  return 'gemini-cli'
+})
 const sessionId = ref('') // 保存sessionId用于后续交换
 const userCode = ref('')
 const verificationUri = ref('')
@@ -921,7 +938,11 @@ watch(authCode, (newValue) => {
         console.error('Failed to parse URL:', error)
         showToast('链接格式错误，请检查是否为完整的 URL', 'error')
       }
-    } else if (props.platform === 'gemini' || props.platform === 'openai') {
+    } else if (
+      props.platform === 'gemini' ||
+      props.platform === 'gemini-antigravity' ||
+      props.platform === 'openai'
+    ) {
       // Gemini 和 OpenAI 平台可能使用不同的回调URL
       // 尝试从任何URL中提取code参数
       try {
@@ -972,8 +993,11 @@ const generateAuthUrl = async () => {
       const result = await accountsStore.generateClaudeAuthUrl(proxyConfig)
       authUrl.value = result.authUrl
       sessionId.value = result.sessionId
-    } else if (props.platform === 'gemini') {
-      const result = await accountsStore.generateGeminiAuthUrl(proxyConfig)
+    } else if (props.platform === 'gemini' || props.platform === 'gemini-antigravity') {
+      const result = await accountsStore.generateGeminiAuthUrl({
+        ...proxyConfig,
+        oauthProvider: geminiOauthProvider.value
+      })
       authUrl.value = result.authUrl
       sessionId.value = result.sessionId
     } else if (props.platform === 'openai') {
@@ -996,6 +1020,8 @@ const generateAuthUrl = async () => {
   }
 }
 
+// onGeminiOauthProviderChange removed - oauthProvider is now computed from platform
+
 // 重新生成授权URL
 const regenerateAuthUrl = () => {
   stopCountdown()
@@ -1079,11 +1105,12 @@ const exchangeCode = async () => {
         sessionId: sessionId.value,
         callbackUrl: authCode.value.trim()
       }
-    } else if (props.platform === 'gemini') {
-      // Gemini使用code和sessionId
+    } else if (props.platform === 'gemini' || props.platform === 'gemini-antigravity') {
+      // Gemini/Antigravity使用code和sessionId
       data = {
         code: authCode.value.trim(),
-        sessionId: sessionId.value
+        sessionId: sessionId.value,
+        oauthProvider: geminiOauthProvider.value
       }
     } else if (props.platform === 'openai') {
       // OpenAI使用code和sessionId
@@ -1111,8 +1138,12 @@ const exchangeCode = async () => {
     let tokenInfo
     if (props.platform === 'claude') {
       tokenInfo = await accountsStore.exchangeClaudeCode(data)
-    } else if (props.platform === 'gemini') {
+    } else if (props.platform === 'gemini' || props.platform === 'gemini-antigravity') {
       tokenInfo = await accountsStore.exchangeGeminiCode(data)
+      // 附加 oauthProvider 信息到 tokenInfo
+      if (tokenInfo) {
+        tokenInfo.oauthProvider = geminiOauthProvider.value
+      }
     } else if (props.platform === 'openai') {
       tokenInfo = await accountsStore.exchangeOpenAICode(data)
     } else if (props.platform === 'droid') {