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;