mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-22 16:43:35 +00:00
优化仪表盘自动刷新UI布局
- 调整Element Plus日期选择器宽度为400px，确保时间完整显示 - 重新设计自动刷新控制的样式和布局 - 统一控制栏所有元素的高度，保持视觉一致性 - 使用更精致的开关组件和优化的交互效果 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
shaw
@@ -5,10 +5,12 @@
|
||||
<div class="bg-blue-50 p-6 rounded-lg border border-blue-200">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-link text-white"></i>
|
||||
<i class="fas fa-link text-white" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-semibold text-blue-900 mb-3">Claude 账户授权</h4>
|
||||
<h4 class="font-semibold text-blue-900 mb-3">
|
||||
Claude 账户授权
|
||||
</h4>
|
||||
<p class="text-sm text-blue-800 mb-4">
|
||||
请按照以下步骤完成 Claude 账户的授权：
|
||||
</p>
|
||||
@@ -17,20 +19,33 @@
|
||||
<!-- 步骤1: 生成授权链接 -->
|
||||
<div class="bg-white/80 rounded-lg p-4 border border-blue-300">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">1</div>
|
||||
<div class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
|
||||
1
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-blue-900 mb-2">点击下方按钮生成授权链接</p>
|
||||
<p class="font-medium text-blue-900 mb-2">
|
||||
点击下方按钮生成授权链接
|
||||
</p>
|
||||
<button
|
||||
v-if="!authUrl"
|
||||
@click="generateAuthUrl"
|
||||
:disabled="loading"
|
||||
class="btn btn-primary px-4 py-2 text-sm"
|
||||
@click="generateAuthUrl"
|
||||
>
|
||||
<i v-if="!loading" class="fas fa-link mr-2"></i>
|
||||
<div v-else class="loading-spinner mr-2"></div>
|
||||
<i
|
||||
v-if="!loading"
|
||||
class="fas fa-link mr-2"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="loading-spinner mr-2"
|
||||
/>
|
||||
{{ loading ? '生成中...' : '生成授权链接' }}
|
||||
</button>
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-else
|
||||
class="space-y-3"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
@@ -39,18 +54,18 @@
|
||||
class="form-input flex-1 text-xs font-mono bg-gray-50"
|
||||
>
|
||||
<button
|
||||
@click="copyAuthUrl"
|
||||
class="px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
|
||||
title="复制链接"
|
||||
@click="copyAuthUrl"
|
||||
>
|
||||
<i :class="copied ? 'fas fa-check text-green-500' : 'fas fa-copy'"></i>
|
||||
<i :class="copied ? 'fas fa-check text-green-500' : 'fas fa-copy'" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
@click="regenerateAuthUrl"
|
||||
class="text-xs text-blue-600 hover:text-blue-700"
|
||||
@click="regenerateAuthUrl"
|
||||
>
|
||||
<i class="fas fa-sync-alt mr-1"></i>重新生成
|
||||
<i class="fas fa-sync-alt mr-1" />重新生成
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,15 +75,19 @@
|
||||
<!-- 步骤2: 访问链接并授权 -->
|
||||
<div class="bg-white/80 rounded-lg p-4 border border-blue-300">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">2</div>
|
||||
<div class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
|
||||
2
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-blue-900 mb-2">在浏览器中打开链接并完成授权</p>
|
||||
<p class="font-medium text-blue-900 mb-2">
|
||||
在浏览器中打开链接并完成授权
|
||||
</p>
|
||||
<p class="text-sm text-blue-700 mb-2">
|
||||
请在新标签页中打开授权链接，登录您的 Claude 账户并授权。
|
||||
</p>
|
||||
<div class="bg-yellow-50 p-3 rounded border border-yellow-300">
|
||||
<p class="text-xs text-yellow-800">
|
||||
<i class="fas fa-exclamation-triangle mr-1"></i>
|
||||
<i class="fas fa-exclamation-triangle mr-1" />
|
||||
<strong>注意：</strong>如果您设置了代理，请确保浏览器也使用相同的代理访问授权页面。
|
||||
</p>
|
||||
</div>
|
||||
@@ -79,26 +98,30 @@
|
||||
<!-- 步骤3: 输入授权码 -->
|
||||
<div class="bg-white/80 rounded-lg p-4 border border-blue-300">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">3</div>
|
||||
<div class="w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
|
||||
3
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-blue-900 mb-2">输入 Authorization Code</p>
|
||||
<p class="font-medium text-blue-900 mb-2">
|
||||
输入 Authorization Code
|
||||
</p>
|
||||
<p class="text-sm text-blue-700 mb-3">
|
||||
授权完成后，页面会显示一个 <strong>Authorization Code</strong>，请将其复制并粘贴到下方输入框：
|
||||
</p>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
<i class="fas fa-key text-blue-500 mr-2"></i>Authorization Code
|
||||
<i class="fas fa-key text-blue-500 mr-2" />Authorization Code
|
||||
</label>
|
||||
<textarea
|
||||
v-model="authCode"
|
||||
rows="3"
|
||||
class="form-input w-full resize-none font-mono text-sm"
|
||||
placeholder="粘贴从Claude页面获取的Authorization Code..."
|
||||
></textarea>
|
||||
/>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
<i class="fas fa-info-circle mr-1" />
|
||||
请粘贴从Claude页面复制的Authorization Code
|
||||
</p>
|
||||
</div>
|
||||
@@ -116,10 +139,12 @@
|
||||
<div class="bg-green-50 p-6 rounded-lg border border-green-200">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-robot text-white"></i>
|
||||
<i class="fas fa-robot text-white" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-semibold text-green-900 mb-3">Gemini 账户授权</h4>
|
||||
<h4 class="font-semibold text-green-900 mb-3">
|
||||
Gemini 账户授权
|
||||
</h4>
|
||||
<p class="text-sm text-green-800 mb-4">
|
||||
请按照以下步骤完成 Gemini 账户的授权：
|
||||
</p>
|
||||
@@ -128,20 +153,33 @@
|
||||
<!-- 步骤1: 生成授权链接 -->
|
||||
<div class="bg-white/80 rounded-lg p-4 border border-green-300">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">1</div>
|
||||
<div class="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
|
||||
1
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-green-900 mb-2">点击下方按钮生成授权链接</p>
|
||||
<p class="font-medium text-green-900 mb-2">
|
||||
点击下方按钮生成授权链接
|
||||
</p>
|
||||
<button
|
||||
v-if="!authUrl"
|
||||
@click="generateAuthUrl"
|
||||
:disabled="loading"
|
||||
class="btn btn-primary px-4 py-2 text-sm"
|
||||
@click="generateAuthUrl"
|
||||
>
|
||||
<i v-if="!loading" class="fas fa-link mr-2"></i>
|
||||
<div v-else class="loading-spinner mr-2"></div>
|
||||
<i
|
||||
v-if="!loading"
|
||||
class="fas fa-link mr-2"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="loading-spinner mr-2"
|
||||
/>
|
||||
{{ loading ? '生成中...' : '生成授权链接' }}
|
||||
</button>
|
||||
<div v-else class="space-y-3">
|
||||
<div
|
||||
v-else
|
||||
class="space-y-3"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
@@ -150,18 +188,18 @@
|
||||
class="form-input flex-1 text-xs font-mono bg-gray-50"
|
||||
>
|
||||
<button
|
||||
@click="copyAuthUrl"
|
||||
class="px-3 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
|
||||
title="复制链接"
|
||||
@click="copyAuthUrl"
|
||||
>
|
||||
<i :class="copied ? 'fas fa-check text-green-500' : 'fas fa-copy'"></i>
|
||||
<i :class="copied ? 'fas fa-check text-green-500' : 'fas fa-copy'" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
@click="regenerateAuthUrl"
|
||||
class="text-xs text-green-600 hover:text-green-700"
|
||||
@click="regenerateAuthUrl"
|
||||
>
|
||||
<i class="fas fa-sync-alt mr-1"></i>重新生成
|
||||
<i class="fas fa-sync-alt mr-1" />重新生成
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,9 +209,13 @@
|
||||
<!-- 步骤2: 操作说明 -->
|
||||
<div class="bg-white/80 rounded-lg p-4 border border-green-300">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">2</div>
|
||||
<div class="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
|
||||
2
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-green-900 mb-2">在浏览器中打开链接并完成授权</p>
|
||||
<p class="font-medium text-green-900 mb-2">
|
||||
在浏览器中打开链接并完成授权
|
||||
</p>
|
||||
<ol class="text-sm text-green-800 space-y-1 list-decimal list-inside mb-3">
|
||||
<li>点击上方的授权链接，在新页面中完成Google账号登录</li>
|
||||
<li>点击“登录”按钮后可能会加载很慢（这是正常的）</li>
|
||||
@@ -182,7 +224,7 @@
|
||||
</ol>
|
||||
<div class="bg-green-100 p-3 rounded border border-green-300">
|
||||
<p class="text-xs text-green-700">
|
||||
<i class="fas fa-lightbulb mr-1"></i>
|
||||
<i class="fas fa-lightbulb mr-1" />
|
||||
<strong>提示：</strong>如果页面一直无法跳转，可以打开浏览器开发者工具（F12），F5刷新一下授权页再点击页面的登录按钮，在“网络”标签中找到以 localhost:45462 开头的请求，复制其完整URL。
|
||||
</p>
|
||||
</div>
|
||||
@@ -193,31 +235,35 @@
|
||||
<!-- 步骤3: 输入授权码 -->
|
||||
<div class="bg-white/80 rounded-lg p-4 border border-green-300">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">3</div>
|
||||
<div class="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
|
||||
3
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-green-900 mb-2">复制oauth后的链接</p>
|
||||
<p class="font-medium text-green-900 mb-2">
|
||||
复制oauth后的链接
|
||||
</p>
|
||||
<p class="text-sm text-green-700 mb-3">
|
||||
复制浏览器地址栏的完整链接并粘贴到下方输入框：
|
||||
</p>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-2">
|
||||
<i class="fas fa-key text-green-500 mr-2"></i>复制oauth后的链接
|
||||
<i class="fas fa-key text-green-500 mr-2" />复制oauth后的链接
|
||||
</label>
|
||||
<textarea
|
||||
v-model="authCode"
|
||||
rows="3"
|
||||
class="form-input w-full resize-none font-mono text-sm"
|
||||
placeholder="粘贴以 http://localhost:45462 开头的完整链接..."
|
||||
></textarea>
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2 space-y-1">
|
||||
<p class="text-xs text-gray-600">
|
||||
<i class="fas fa-check-circle text-green-500 mr-1"></i>
|
||||
<i class="fas fa-check-circle text-green-500 mr-1" />
|
||||
支持粘贴完整链接，系统会自动提取授权码
|
||||
</p>
|
||||
<p class="text-xs text-gray-600">
|
||||
<i class="fas fa-check-circle text-green-500 mr-1"></i>
|
||||
<i class="fas fa-check-circle text-green-500 mr-1" />
|
||||
也可以直接粘贴授权码（code参数的值）
|
||||
</p>
|
||||
</div>
|
||||
@@ -234,18 +280,21 @@
|
||||
<div class="flex gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
@click="$emit('back')"
|
||||
class="flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-semibold hover:bg-gray-200 transition-colors"
|
||||
class="flex-1 px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-semibold hover:bg-gray-200 transition-colors"
|
||||
@click="$emit('back')"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="exchangeCode"
|
||||
:disabled="!canExchange || exchanging"
|
||||
class="btn btn-primary flex-1 py-3 px-6 font-semibold"
|
||||
@click="exchangeCode"
|
||||
>
|
||||
<div v-if="exchanging" class="loading-spinner mr-2"></div>
|
||||
<div
|
||||
v-if="exchanging"
|
||||
class="loading-spinner mr-2"
|
||||
/>
|
||||
{{ exchanging ? '验证中...' : '完成授权' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user