feat: 完善管理界面功能和用户体验

- 添加 API Key 窗口倒计时组件 (WindowCountdown)
- 添加自定义下拉菜单组件 (CustomDropdown)
- 优化账户和 API Key 管理界面交互
- 改进教程页面布局和说明文字
- 完善账户状态显示和错误处理

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

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

@@ -6,36 +6,65 @@
           <h3 class="mb-1 text-lg font-bold text-gray-900 sm:mb-2 sm:text-xl">账户管理</h3>
           <p class="text-sm text-gray-600 sm:text-base">管理您的 Claude 和 Gemini 账户及代理配置</p>
         </div>
-        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <div class="flex flex-col gap-2 sm:flex-row">
-            <select
-              v-model="accountSortBy"
-              class="form-input w-full px-3 py-2 text-sm sm:w-auto"
-              @change="sortAccounts()"
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <!-- 筛选器组 -->
+          <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-3">
+            <!-- 排序选择器 -->
+            <div class="group relative min-w-[160px]">
+              <div
+                class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-indigo-500 to-blue-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
+              ></div>
+              <CustomDropdown
+                v-model="accountSortBy"
+                icon="fa-sort-amount-down"
+                icon-color="text-indigo-500"
+                :options="sortOptions"
+                placeholder="选择排序"
+                @change="sortAccounts()"
+              />
+            </div>
+
+            <!-- 分组筛选器 -->
+            <div class="group relative min-w-[160px]">
+              <div
+                class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
+              ></div>
+              <CustomDropdown
+                v-model="groupFilter"
+                icon="fa-layer-group"
+                icon-color="text-purple-500"
+                :options="groupOptions"
+                placeholder="选择分组"
+                @change="filterByGroup"
+              />
+            </div>
+
+            <!-- 刷新按钮 -->
+            <button
+              class="group relative flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+              :disabled="accountsLoading"
+              @click="loadAccounts()"
             >
-              <option value="name">按名称排序</option>
-              <option value="dailyTokens">按今日Token排序</option>
-              <option value="dailyRequests">按今日请求数排序</option>
-              <option value="totalTokens">按总Token排序</option>
-              <option value="lastUsed">按最后使用排序</option>
-            </select>
-            <select
-              v-model="groupFilter"
-              class="form-input w-full px-3 py-2 text-sm sm:w-auto"
-              @change="filterByGroup"
-            >
-              <option value="all">所有账户</option>
-              <option value="ungrouped">未分组账户</option>
-              <option v-for="group in accountGroups" :key="group.id" :value="group.id">
-                {{ group.name }} ({{ group.platform === 'claude' ? 'Claude' : 'Gemini' }})
-              </option>
-            </select>
+              <div
+                class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-green-500 to-teal-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
+              ></div>
+              <i
+                :class="[
+                  'fas relative text-green-500',
+                  accountsLoading ? 'fa-spinner fa-spin' : 'fa-sync-alt'
+                ]"
+              />
+              <span class="relative">刷新</span>
+            </button>
           </div>
+
+          <!-- 添加账户按钮 -->
           <button
-            class="btn btn-success flex w-full items-center justify-center gap-2 px-4 py-2 sm:w-auto sm:px-6 sm:py-3"
+            class="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-green-500 to-green-600 px-5 py-2.5 text-sm font-medium text-white shadow-md transition-all duration-200 hover:from-green-600 hover:to-green-700 hover:shadow-lg sm:w-auto"
             @click.stop="openCreateAccountModal"
           >
-            <i class="fas fa-plus" />添加账户
+            <i class="fas fa-plus"></i>
+            <span>添加账户</span>
           </button>
         </div>
       </div>
@@ -710,6 +739,7 @@ import { apiClient } from '@/config/api'
 import { useConfirm } from '@/composables/useConfirm'
 import AccountForm from '@/components/accounts/AccountForm.vue'
 import ConfirmModal from '@/components/common/ConfirmModal.vue'
+import CustomDropdown from '@/components/common/CustomDropdown.vue'
 
 // 使用确认弹窗
 const { showConfirmModal, confirmOptions, showConfirm, handleConfirm, handleCancel } = useConfirm()
@@ -726,6 +756,30 @@ const accountGroups = ref([])
 const groupFilter = ref('all')
 const filteredAccounts = ref([])
 
+// 下拉选项数据
+const sortOptions = ref([
+  { value: 'name', label: '按名称排序', icon: 'fa-font' },
+  { value: 'dailyTokens', label: '按今日Token排序', icon: 'fa-coins' },
+  { value: 'dailyRequests', label: '按今日请求数排序', icon: 'fa-chart-line' },
+  { value: 'totalTokens', label: '按总Token排序', icon: 'fa-database' },
+  { value: 'lastUsed', label: '按最后使用排序', icon: 'fa-clock' }
+])
+
+const groupOptions = computed(() => {
+  const options = [
+    { value: 'all', label: '所有账户', icon: 'fa-globe' },
+    { value: 'ungrouped', label: '未分组账户', icon: 'fa-user' }
+  ]
+  accountGroups.value.forEach((group) => {
+    options.push({
+      value: group.id,
+      label: `${group.name} (${group.platform === 'claude' ? 'Claude' : 'Gemini'})`,
+      icon: group.platform === 'claude' ? 'fa-brain' : 'fa-robot'
+    })
+  })
+  return options
+})
+
 // 模态框状态
 const showCreateAccountModal = ref(false)
 const showEditAccountModal = ref(false)

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

@@ -7,35 +7,71 @@
           <p class="text-sm text-gray-600 sm:text-base">管理和监控您的 API 密钥</p>
         </div>
         <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <!-- Token统计时间范围选择 -->
-          <div class="flex flex-wrap items-center gap-2">
-            <select
-              v-model="apiKeyStatsTimeRange"
-              class="rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 transition-colors hover:border-gray-300 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
-              @change="loadApiKeys()"
-            >
-              <option value="today">今日</option>
-              <option value="7days">最近7天</option>
-              <option value="monthly">本月</option>
-              <option value="all">全部时间</option>
-            </select>
+          <!-- 筛选器组 -->
+          <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:gap-3">
+            <!-- 时间范围筛选 -->
+            <div class="group relative min-w-[140px]">
+              <div
+                class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
+              ></div>
+              <CustomDropdown
+                v-model="apiKeyStatsTimeRange"
+                icon="fa-calendar-alt"
+                icon-color="text-blue-500"
+                :options="timeRangeOptions"
+                placeholder="选择时间范围"
+                @change="loadApiKeys()"
+              />
+            </div>
+
             <!-- 标签筛选器 -->
-            <select
-              v-model="selectedTagFilter"
-              class="rounded-md border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 transition-colors hover:border-gray-300 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
-              @change="currentPage = 1"
+            <div class="group relative min-w-[140px]">
+              <div
+                class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
+              ></div>
+              <div class="relative">
+                <CustomDropdown
+                  v-model="selectedTagFilter"
+                  icon="fa-tags"
+                  icon-color="text-purple-500"
+                  :options="tagOptions"
+                  placeholder="所有标签"
+                  @change="currentPage = 1"
+                />
+                <span
+                  v-if="selectedTagFilter"
+                  class="absolute -right-2 -top-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-purple-500 text-xs text-white shadow-sm"
+                >
+                  {{ selectedTagCount }}
+                </span>
+              </div>
+            </div>
+
+            <!-- 刷新按钮 -->
+            <button
+              class="group relative flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+              :disabled="apiKeysLoading"
+              @click="loadApiKeys()"
             >
-              <option value="">所有标签</option>
-              <option v-for="tag in availableTags" :key="tag" :value="tag">
-                {{ tag }}
-              </option>
-            </select>
+              <div
+                class="absolute -inset-0.5 rounded-lg bg-gradient-to-r from-green-500 to-teal-500 opacity-0 blur transition duration-300 group-hover:opacity-20"
+              ></div>
+              <i
+                :class="[
+                  'fas relative text-green-500',
+                  apiKeysLoading ? 'fa-spinner fa-spin' : 'fa-sync-alt'
+                ]"
+              />
+              <span class="relative">刷新</span>
+            </button>
           </div>
+          <!-- 创建按钮 -->
           <button
-            class="btn btn-primary flex w-full items-center justify-center gap-2 px-4 py-2 text-sm sm:w-auto"
+            class="flex w-full items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 px-5 py-2.5 text-sm font-medium text-white shadow-md transition-all duration-200 hover:from-blue-600 hover:to-blue-700 hover:shadow-lg sm:w-auto"
             @click.stop="openCreateApiKeyModal"
           >
-            <i class="fas fa-plus" />创建新 Key
+            <i class="fas fa-plus"></i>
+            <span>创建新 Key</span>
           </button>
         </div>
       </div>
@@ -368,6 +404,21 @@
                       <i class="fas fa-clock" />
                       <span class="ml-1 hidden xl:inline">续期</span>
                     </button>
+                    <button
+                      :class="[
+                        key.isActive
+                          ? 'text-orange-600 hover:bg-orange-50 hover:text-orange-900'
+                          : 'text-green-600 hover:bg-green-50 hover:text-green-900',
+                        'rounded px-2 py-1 text-xs font-medium transition-colors'
+                      ]"
+                      :title="key.isActive ? '禁用' : '激活'"
+                      @click="toggleApiKeyStatus(key)"
+                    >
+                      <i :class="['fas', key.isActive ? 'fa-ban' : 'fa-check-circle']" />
+                      <span class="ml-1 hidden xl:inline">{{
+                        key.isActive ? '禁用' : '激活'
+                      }}</span>
+                    </button>
                     <button
                       class="rounded px-2 py-1 text-xs font-medium text-red-600 transition-colors hover:bg-red-50 hover:text-red-900"
                       title="删除"
@@ -801,6 +852,18 @@
               <i class="fas fa-clock mr-1" />
               续期
             </button>
+            <button
+              :class="[
+                key.isActive
+                  ? 'bg-orange-50 text-orange-600 hover:bg-orange-100'
+                  : 'bg-green-50 text-green-600 hover:bg-green-100',
+                'rounded-lg px-3 py-2 text-xs transition-colors'
+              ]"
+              @click="toggleApiKeyStatus(key)"
+            >
+              <i :class="['fas', key.isActive ? 'fa-ban' : 'fa-check-circle', 'mr-1']" />
+              {{ key.isActive ? '禁用' : '激活' }}
+            </button>
             <button
               class="rounded-lg bg-red-50 px-3 py-2 text-xs text-red-600 transition-colors hover:bg-red-100"
               @click="deleteApiKey(key.id)"
@@ -964,6 +1027,7 @@ import BatchApiKeyModal from '@/components/apikeys/BatchApiKeyModal.vue'
 import ExpiryEditModal from '@/components/apikeys/ExpiryEditModal.vue'
 import UsageDetailModal from '@/components/apikeys/UsageDetailModal.vue'
 import WindowCountdown from '@/components/apikeys/WindowCountdown.vue'
+import CustomDropdown from '@/components/common/CustomDropdown.vue'
 
 // 响应式数据
 const clientsStore = useClientsStore()
@@ -986,6 +1050,28 @@ const selectedApiKeyForDetail = ref(null)
 const selectedTagFilter = ref('')
 const availableTags = ref([])
 
+// 下拉选项数据
+const timeRangeOptions = ref([
+  { value: 'today', label: '今日', icon: 'fa-clock' },
+  { value: '7days', label: '最近7天', icon: 'fa-calendar-week' },
+  { value: 'monthly', label: '本月', icon: 'fa-calendar' },
+  { value: 'all', label: '全部时间', icon: 'fa-infinity' }
+])
+
+const tagOptions = computed(() => {
+  const options = [{ value: '', label: '所有标签', icon: 'fa-asterisk' }]
+  availableTags.value.forEach((tag) => {
+    options.push({ value: tag, label: tag, icon: 'fa-tag' })
+  })
+  return options
+})
+
+const selectedTagCount = computed(() => {
+  if (!selectedTagFilter.value) return 0
+  return apiKeys.value.filter((key) => key.tags && key.tags.includes(selectedTagFilter.value))
+    .length
+})
+
 // 分页相关
 const currentPage = ref(1)
 const pageSize = ref(10)
@@ -1455,6 +1541,49 @@ const handleRenewSuccess = () => {
   loadApiKeys()
 }
 
+// 切换API Key状态（激活/禁用）
+const toggleApiKeyStatus = async (key) => {
+  let confirmed = true
+
+  // 禁用时需要二次确认
+  if (key.isActive) {
+    if (window.showConfirm) {
+      confirmed = await window.showConfirm(
+        '禁用 API Key',
+        `确定要禁用 API Key "${key.name}" 吗？禁用后所有使用此 Key 的请求将返回 401 错误。`,
+        '确定禁用',
+        '取消'
+      )
+    } else {
+      // 降级方案
+      confirmed = confirm(
+        `确定要禁用 API Key "${key.name}" 吗？禁用后所有使用此 Key 的请求将返回 401 错误。`
+      )
+    }
+  }
+
+  if (!confirmed) return
+
+  try {
+    const data = await apiClient.put(`/admin/api-keys/${key.id}`, {
+      isActive: !key.isActive
+    })
+
+    if (data.success) {
+      showToast(`API Key 已${key.isActive ? '禁用' : '激活'}`, 'success')
+      // 更新本地数据
+      const localKey = apiKeys.value.find((k) => k.id === key.id)
+      if (localKey) {
+        localKey.isActive = !key.isActive
+      }
+    } else {
+      showToast(data.message || '操作失败', 'error')
+    }
+  } catch (error) {
+    showToast('操作失败', 'error')
+  }
+}
+
 // 删除API Key
 const deleteApiKey = async (keyId) => {
   let confirmed = false

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

@@ -114,19 +114,15 @@
         </div>
       </div>
 
-      <!-- 第二步：安装 Git Bash -->
+      <!-- 第二步：安装 Claude Code -->
       <div class="mb-4 sm:mb-10 sm:mb-6">
         <h4 class="mb-3 flex items-center text-lg font-semibold text-gray-800 sm:mb-4 sm:text-xl">
           <span
             class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
             >2</span
           >
-          安装 Git Bash
+          安装 Claude Code
         </h4>
-        <p class="mb-4 text-sm text-gray-600 sm:mb-4 sm:mb-6 sm:text-base">
-          Windows 环境下需要使用 Git Bash 安装Claude code。安装完成后，环境变量设置和使用 Claude
-          Code 仍然在普通的 PowerShell 或 CMD 中进行。
-        </p>
 
         <div
           class="mb-4 rounded-xl border border-green-100 bg-gradient-to-r from-green-50 to-emerald-50 p-4 sm:mb-6 sm:p-6"
@@ -134,78 +130,16 @@
           <h5
             class="mb-2 flex items-center text-base font-semibold text-gray-800 sm:mb-3 sm:text-lg"
           >
-            <i class="fab fa-git-alt mr-2 text-green-600" />
-            下载并安装 Git for Windows
-          </h5>
-          <ol
-            class="mb-4 ml-2 list-inside list-decimal space-y-1 text-xs text-gray-600 sm:ml-4 sm:space-y-2 sm:text-sm"
-          >
-            <li>
-              访问
-              <code class="rounded bg-gray-100 px-1 py-1 text-xs sm:px-2 sm:text-sm"
-                >https://git-scm.com/downloads/win</code
-              >
-            </li>
-            <li>点击 "Download for Windows" 下载安装包</li>
-            <li>
-              运行下载的
-              <code class="rounded bg-gray-100 px-1 py-1 text-xs sm:px-2 sm:text-sm">.exe</code>
-              安装文件
-            </li>
-            <li>在安装过程中保持默认设置，直接点击 "Next" 完成安装</li>
-          </ol>
-          <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-            <h6 class="mb-2 text-sm font-medium text-green-800 sm:text-base">安装完成后</h6>
-            <ul class="space-y-1 text-xs text-green-700 sm:text-sm">
-              <li>• 在任意文件夹右键可以看到 "Git Bash Here" 选项</li>
-              <li>• 也可以从开始菜单启动 "Git Bash"</li>
-              <li>• 只需要在 Git Bash 中运行 npm install 命令</li>
-              <li>• 后续的环境变量设置和使用都在 PowerShell/CMD 中</li>
-            </ul>
-          </div>
-        </div>
-
-        <!-- 验证安装 -->
-        <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
-          <h6 class="mb-2 text-sm font-medium text-green-800 sm:text-base">验证 Git Bash 安装</h6>
-          <p class="mb-2 text-xs text-green-700 sm:mb-3 sm:text-sm">
-            打开 Git Bash，输入以下命令验证：
-          </p>
-          <div
-            class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
-          >
-            <div class="whitespace-nowrap text-gray-300">git --version</div>
-          </div>
-          <p class="mt-2 text-xs text-green-700 sm:text-sm">如果显示 Git 版本号，说明安装成功！</p>
-        </div>
-      </div>
-
-      <!-- 第三步：安装 Claude Code -->
-      <div class="mb-4 sm:mb-10 sm:mb-6">
-        <h4 class="mb-3 flex items-center text-lg font-semibold text-gray-800 sm:mb-4 sm:text-xl">
-          <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-purple-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >3</span
-          >
-          安装 Claude Code
-        </h4>
-
-        <div
-          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
-        >
-          <h5
-            class="mb-2 flex items-center text-base font-semibold text-gray-800 sm:mb-3 sm:text-lg"
-          >
-            <i class="fas fa-download mr-2 text-purple-600" />
+            <i class="fas fa-download mr-2 text-green-600" />
             安装 Claude Code
           </h5>
           <p class="mb-3 text-sm text-gray-700 sm:mb-4 sm:text-base">
-            打开 Git Bash（重要：不要使用 PowerShell），运行以下命令：
+            打开 PowerShell 或 CMD，运行以下命令：
           </p>
           <div
             class="mb-4 overflow-x-auto rounded-lg bg-gray-900 p-3 font-mono text-xs text-green-400 sm:p-4 sm:text-sm"
           >
-            <div class="mb-2"># 在 Git Bash 中全局安装 Claude Code</div>
+            <div class="mb-2"># 全局安装 Claude Code</div>
             <div class="whitespace-nowrap text-gray-300">
               npm install -g @anthropic-ai/claude-code
             </div>
@@ -214,11 +148,11 @@
             这个命令会从 npm 官方仓库下载并安装最新版本的 Claude Code。
           </p>
 
-          <div class="mt-4 rounded-lg border border-yellow-200 bg-yellow-50 p-3 sm:p-4">
-            <h6 class="mb-2 text-sm font-medium text-yellow-800 sm:text-base">重要提醒</h6>
-            <ul class="space-y-1 text-xs text-yellow-700 sm:text-sm">
-              <li>• 必须在 Git Bash 中运行，不要在 PowerShell 中运行</li>
-              <li>• 如果遇到权限问题，可以尝试在 Git Bash 中使用 sudo 命令</li>
+          <div class="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-3 sm:p-4">
+            <h6 class="mb-2 text-sm font-medium text-blue-800 sm:text-base">提示</h6>
+            <ul class="space-y-1 text-xs text-blue-700 sm:text-sm">
+              <li>• 建议使用 PowerShell 而不是 CMD，功能更强大</li>
+              <li>• 如果遇到权限问题，以管理员身份运行 PowerShell</li>
             </ul>
           </div>
         </div>
@@ -238,23 +172,23 @@
         </div>
       </div>
 
-      <!-- 第四步：设置环境变量 -->
+      <!-- 第三步：设置环境变量 -->
       <div class="mb-6 sm:mb-10">
         <h4 class="mb-3 flex items-center text-lg font-semibold text-gray-800 sm:mb-4 sm:text-xl">
           <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >4</span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-purple-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >3</span
           >
           设置环境变量
         </h4>
 
         <div
-          class="mb-4 rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:mb-6 sm:p-6"
+          class="mb-4 rounded-xl border border-purple-100 bg-gradient-to-r from-purple-50 to-pink-50 p-4 sm:mb-6 sm:p-6"
         >
           <h5
             class="mb-2 flex items-center text-base font-semibold text-gray-800 sm:mb-3 sm:text-lg"
           >
-            <i class="fas fa-cog mr-2 text-orange-600" />
+            <i class="fas fa-cog mr-2 text-purple-600" />
             配置 Claude Code 环境变量
           </h5>
           <p class="mb-3 text-sm text-gray-700 sm:mb-4 sm:text-base">
@@ -262,9 +196,9 @@
           </p>
 
           <div class="space-y-4">
-            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+            <div class="rounded-lg border border-purple-200 bg-white p-3 sm:p-4">
               <h6 class="mb-2 text-sm font-medium text-gray-800 sm:text-base">
-                方法一：PowerShell 临时设置（推荐）
+                方法一：PowerShell 临时设置（当前会话）
               </h6>
               <p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
               <div
@@ -282,26 +216,44 @@
               </p>
             </div>
 
-            <div class="rounded-lg border border-orange-200 bg-white p-3 sm:p-4">
+            <div class="rounded-lg border border-purple-200 bg-white p-3 sm:p-4">
               <h6 class="mb-2 text-sm font-medium text-gray-800 sm:text-base">
-                方法二：系统环境变量（永久设置）
+                方法二：PowerShell 永久设置（用户级）
               </h6>
-              <ol class="list-inside list-decimal space-y-1 text-xs text-gray-600 sm:text-sm">
-                <li>右键"此电脑" → "属性" → "高级系统设置"</li>
-                <li>点击"环境变量"按钮</li>
-                <li>在"用户变量"或"系统变量"中点击"新建"</li>
-                <li>添加以下两个变量：</li>
-              </ol>
-              <div class="mt-3 space-y-2">
-                <div class="rounded bg-gray-100 p-2 text-sm">
-                  <strong>变量名：</strong> ANTHROPIC_BASE_URL<br />
-                  <strong>变量值：</strong> <span class="font-mono">{{ currentBaseUrl }}</span>
+              <p class="mb-3 text-sm text-gray-600">
+                在 PowerShell 中运行以下命令设置用户级环境变量：
+              </p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 设置用户级环境变量（永久生效）</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("ANTHROPIC_BASE_URL", "{{
+                    currentBaseUrl
+                  }}", [System.EnvironmentVariableTarget]::User)
                 </div>
-                <div class="rounded bg-gray-100 p-2 text-sm">
-                  <strong>变量名：</strong> ANTHROPIC_AUTH_TOKEN<br />
-                  <strong>变量值：</strong> <span class="font-mono">你的API密钥</span>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN",
+                  "你的API密钥", [System.EnvironmentVariableTarget]::User)
                 </div>
               </div>
+              <p class="mb-3 text-sm text-gray-600">查看已设置的环境变量：</p>
+              <div
+                class="overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 查看用户级环境变量</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::GetEnvironmentVariable("ANTHROPIC_BASE_URL",
+                  [System.EnvironmentVariableTarget]::User)
+                </div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::GetEnvironmentVariable("ANTHROPIC_AUTH_TOKEN",
+                  [System.EnvironmentVariableTarget]::User)
+                </div>
+              </div>
+              <p class="mt-2 text-xs text-blue-700">
+                💡 设置后需要重新打开 PowerShell 窗口才能生效。
+              </p>
             </div>
           </div>
         </div>
@@ -389,23 +341,30 @@
 
             <div class="rounded-lg border border-green-200 bg-white p-3 sm:p-4">
               <h6 class="mb-2 text-sm font-medium text-gray-800 sm:text-base">
-                系统环境变量（永久设置）
+                PowerShell 永久设置（用户级）
               </h6>
-              <p class="mb-3 text-sm text-gray-600">在系统环境变量中添加：</p>
-              <div class="space-y-2">
-                <div class="rounded bg-gray-100 p-2 text-sm">
-                  <strong>变量名：</strong> CODE_ASSIST_ENDPOINT<br />
-                  <strong>变量值：</strong> <span class="font-mono">{{ geminiBaseUrl }}</span>
+              <p class="mb-3 text-sm text-gray-600">在 PowerShell 中运行以下命令：</p>
+              <div
+                class="mb-3 overflow-x-auto rounded bg-gray-900 p-2 font-mono text-xs text-green-400 sm:p-3 sm:text-sm"
+              >
+                <div class="mb-2"># 设置用户级环境变量（永久生效）</div>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("CODE_ASSIST_ENDPOINT", "{{
+                    geminiBaseUrl
+                  }}", [System.EnvironmentVariableTarget]::User)
                 </div>
-                <div class="rounded bg-gray-100 p-2 text-sm">
-                  <strong>变量名：</strong> GOOGLE_CLOUD_ACCESS_TOKEN<br />
-                  <strong>变量值：</strong> <span class="font-mono">你的API密钥</span>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("GOOGLE_CLOUD_ACCESS_TOKEN",
+                  "你的API密钥", [System.EnvironmentVariableTarget]::User)
                 </div>
-                <div class="rounded bg-gray-100 p-2 text-sm">
-                  <strong>变量名：</strong> GOOGLE_GENAI_USE_GCA<br />
-                  <strong>变量值：</strong> <span class="font-mono">true</span>
+                <div class="whitespace-nowrap text-gray-300">
+                  [System.Environment]::SetEnvironmentVariable("GOOGLE_GENAI_USE_GCA", "true",
+                  [System.EnvironmentVariableTarget]::User)
                 </div>
               </div>
+              <p class="mt-2 text-xs text-blue-700">
+                💡 设置后需要重新打开 PowerShell 窗口才能生效。
+              </p>
             </div>
 
             <div class="rounded-lg border border-green-200 bg-green-50 p-3 sm:p-4">
@@ -425,17 +384,17 @@
         </div>
       </div>
 
-      <!-- 第五步：开始使用 -->
+      <!-- 第四步：开始使用 -->
       <div class="mb-6 sm:mb-8">
         <h4 class="mb-3 flex items-center text-lg font-semibold text-gray-800 sm:mb-4 sm:text-xl">
           <span
-            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-yellow-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
-            >5</span
+            class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs font-bold text-white sm:mr-3 sm:h-8 sm:w-8 sm:text-sm"
+            >4</span
           >
           开始使用 Claude Code
         </h4>
         <div
-          class="rounded-xl border border-yellow-100 bg-gradient-to-r from-yellow-50 to-amber-50 p-4 sm:p-6"
+          class="rounded-xl border border-orange-100 bg-gradient-to-r from-orange-50 to-yellow-50 p-4 sm:p-6"
         >
           <p class="mb-3 text-sm text-gray-700 sm:mb-4 sm:text-base">
             现在你可以开始使用 Claude Code 了！