feat(客户端密钥面板): 代理设置支持连通性检测与状态展示
- 代理卡片新增检测按钮:地址有改动时检测输入值(不落库),否则检测/落库已存值 - 状态行展示检测结果(连通正常/失败原因/耗时),颜色区分通过/失败/警示 - 余量无数据时显示"余额查询暂不可用"占位
This commit is contained in:
@@ -86,12 +86,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="secret-actions">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="check-btn"
|
||||||
|
:disabled="!proxyReady || busy || proxyChecking"
|
||||||
|
@click="runProxyCheck"
|
||||||
|
>
|
||||||
|
{{ proxyChecking ? '检测中...' : (proxyUrl.trim() && proxyDirty ? '检测输入地址' : '检测已存代理') }}
|
||||||
|
</button>
|
||||||
|
<span class="check-result" :class="proxyResultClass">
|
||||||
|
{{ proxyStatusText }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="secret-meta">
|
<div class="secret-meta">
|
||||||
<span v-if="proxyLoading">正在读取代理配置...</span>
|
<span v-if="proxyLoading">正在读取代理配置...</span>
|
||||||
<span v-else-if="proxyLoadFailed">代理配置读取失败,请关闭弹窗后重试</span>
|
<span v-else-if="proxyLoadFailed">代理配置读取失败,请关闭弹窗后重试</span>
|
||||||
<span v-else-if="!proxySupported">代理设置仅在桌面客户端中可用</span>
|
<span v-else-if="!proxySupported">代理设置仅在桌面客户端中可用</span>
|
||||||
<span v-else-if="balanceLoading">正在查询代理余量...</span>
|
<span v-else-if="balanceLoading">正在查询代理余量...</span>
|
||||||
<span v-else-if="balance">{{ balanceText }}</span>
|
<span v-else-if="balance">{{ balanceText }}</span>
|
||||||
|
<span v-else>余额查询暂不可用</span>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@@ -151,6 +166,56 @@ const proxyReady = ref(false)
|
|||||||
const proxySupported = ref(false)
|
const proxySupported = ref(false)
|
||||||
const proxyDirty = ref(false)
|
const proxyDirty = ref(false)
|
||||||
|
|
||||||
|
const proxyChecking = ref(false)
|
||||||
|
const proxyCheckResult = ref<UserApiSecretCheckResult | null>(null)
|
||||||
|
const proxyCheckError = ref('')
|
||||||
|
|
||||||
|
const proxyStatusText = computed(() => {
|
||||||
|
if (proxyChecking.value) return '正在检测...'
|
||||||
|
if (proxyCheckResult.value) {
|
||||||
|
const latency = proxyCheckResult.value.checkLatencyMs != null ? `(${proxyCheckResult.value.checkLatencyMs}ms)` : ''
|
||||||
|
if (proxyCheckResult.value.checkStatus === 'passed') return `代理连通正常${latency}`
|
||||||
|
return `${proxyCheckResult.value.checkMessage || '代理检测失败'}`
|
||||||
|
}
|
||||||
|
if (proxyCheckError.value) return proxyCheckError.value
|
||||||
|
return ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const proxyResultClass = computed(() => {
|
||||||
|
const status = proxyCheckResult.value?.checkStatus
|
||||||
|
return {
|
||||||
|
'check-result--ok': status === 'passed',
|
||||||
|
'check-result--fail': status === 'failed',
|
||||||
|
'check-result--warn': status === 'error',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 检测代理连通性:地址有改动时检测输入值(不落库),否则检测/落库已存值并刷新状态展示。 */
|
||||||
|
async function runProxyCheck() {
|
||||||
|
if (proxyChecking.value) return
|
||||||
|
const inputValue = proxyUrl.value.trim()
|
||||||
|
const dirty = proxyDirty.value && inputValue
|
||||||
|
proxyChecking.value = true
|
||||||
|
proxyCheckError.value = ''
|
||||||
|
proxyCheckResult.value = null
|
||||||
|
try {
|
||||||
|
proxyCheckResult.value = await checkApiSecret('proxy', dirty ? inputValue : undefined)
|
||||||
|
const result = proxyCheckResult.value
|
||||||
|
if (result.checkStatus === 'failed') {
|
||||||
|
ElMessage.warning(result.checkMessage || '代理不可用')
|
||||||
|
} else if (result.checkStatus === 'error') {
|
||||||
|
ElMessage.warning(result.checkMessage || '暂时无法判定代理可用性')
|
||||||
|
} else {
|
||||||
|
ElMessage.success(dirty ? '输入地址连通正常(未保存)' : '代理连通正常')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
proxyCheckError.value = error instanceof Error ? error.message : '代理检测失败'
|
||||||
|
ElMessage.error(proxyCheckError.value)
|
||||||
|
} finally {
|
||||||
|
proxyChecking.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const balance = ref<{ surplus: string | null; balance: string | null } | null>(null)
|
const balance = ref<{ surplus: string | null; balance: string | null } | null>(null)
|
||||||
const balanceLoading = ref(false)
|
const balanceLoading = ref(false)
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user