diff --git a/vue/src/components/SettingsView.vue b/vue/src/components/SettingsView.vue index 324284b..897f833 100644 --- a/vue/src/components/SettingsView.vue +++ b/vue/src/components/SettingsView.vue @@ -136,6 +136,12 @@ Token有效: {{ boundInfo.tokenValid ? '✅ 是' : '❌ 否' }} +
+ 连接状态: + + {{ boundInfo.connected ? '✅' : '❌' }} {{ boundInfo.connectMessage }} + +
创建时间: {{ formatTime(boundInfo.createTime) }} @@ -178,8 +184,8 @@ const boundInfo = ref(null) /** * 加载已绑定的 OpenList 信息 * 后端返回格式: - * - null 或未绑定:返回 null - * - 已绑定:返回 { code: 200, data: { id, openlistUrl, openlistUsername, storageId, mountPath, status, tokenValid, createTime, updateTime } } + * - 未绑定或报错:返回错误信息 + * - 已绑定:返回 { code: 200, data: { id, openlistUrl, openlistUsername, storageId, mountPath, status, tokenValid, connected, connectMessage, createTime, updateTime } } */ async function loadBoundInfo() { try { @@ -195,9 +201,12 @@ async function loadBoundInfo() { mountPath: d.mountPath || '', status: d.status || '', tokenValid: d.tokenValid, + connected: d.connected, + connectMessage: d.connectMessage || '', createTime: d.createTime || '', updateTime: d.updateTime || '', } + bindStatus.value = null // 清除之前的错误信息 } else { // 返回 null 或未绑定,清空已绑定信息 boundInfo.value = null @@ -205,6 +214,9 @@ async function loadBoundInfo() { } catch (err) { console.warn('加载绑定信息失败:', err) boundInfo.value = null + // 显示后端返回的错误信息 + const errorMsg = err?.payload?.message || err?.message || '加载绑定信息失败' + setBindStatus('error', errorMsg) } } @@ -317,7 +329,7 @@ function formatTime(timeStr) { /** * 设置绑定状态提示 */ -function setBindStatus(type, message) { +function setBindStatus(type, message, autoClear = true) { if (!type) { bindStatus.value = null return @@ -336,8 +348,8 @@ function setBindStatus(type, message) { icon: icons[type] || '', } - // 3秒后自动清除 - if (type !== 'success') { + // 3秒后自动清除(仅用于非错误类型的临时提示) + if (autoClear && type !== 'error') { setTimeout(() => { bindStatus.value = null }, 3000) @@ -612,6 +624,24 @@ onMounted(() => { word-break: break-all; } +/* 连接状态样式 */ +.connect-message { + font-weight: 500; +} + +.connect-ok { + color: #67c23a; +} + +.connect-error { + color: #f56c6c; +} + +.status-active { + color: #67c23a; + font-weight: 600; +} + .btn-unbind { width: 100%; padding: 8px 16px;