功能：新增连接状态展示，优化绑定信息加载逻辑及状态提示

vue/src/components/SettingsView.vue

@@ -136,6 +136,12 @@
               <span class="bound-info__label">Token有效：</span>
               <span class="bound-info__value">{{ boundInfo.tokenValid ? '✅ 是' : '❌ 否' }}</span>
             </div>
+            <div class="bound-info__item" v-if="boundInfo.connectMessage">
+              <span class="bound-info__label">连接状态：</span>
+              <span class="bound-info__value connect-message" :class="{ 'connect-ok': boundInfo.connected === true, 'connect-error': boundInfo.connected === false }">
+                {{ boundInfo.connected ? '✅' : '❌' }} {{ boundInfo.connectMessage }}
+              </span>
+            </div>
             <div class="bound-info__item">
               <span class="bound-info__label">创建时间：</span>
               <span class="bound-info__value">{{ formatTime(boundInfo.createTime) }}</span>
@@ -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;