完善桌面端交互体验与发布检查

frontend/src/views/DesktopServerSettings.vue

@@ -7,6 +7,21 @@
         <p class="description">配置桌面客户端要连接的 CTMS 服务端入口。业务数据仍由服务端统一保存和裁决。</p>
       </div>
 
+      <div v-if="currentServerUrl" class="current-server">
+        <span>当前服务器</span>
+        <code>{{ currentServerUrl }}</code>
+      </div>
+
+      <el-alert
+        v-if="connectionStatus"
+        class="connection-alert"
+        :type="connectionStatus.type"
+        :title="connectionStatus.title"
+        :description="connectionStatus.message"
+        show-icon
+        :closable="false"
+      />
+
       <el-form label-position="top" @submit.prevent>
         <el-form-item label="服务器地址" :error="urlError">
           <el-input
@@ -24,7 +39,9 @@
 
         <div class="actions">
           <el-button v-if="canCancel" size="large" @click="goBack">取消</el-button>
-          <el-button type="primary" size="large" :loading="saving" @click="save">保存并检查连接</el-button>
+          <el-button type="primary" size="large" :loading="saving" :disabled="!serverUrl.trim()" @click="save">
+            保存并检查连接
+          </el-button>
         </div>
       </el-form>
     </section>
@@ -47,16 +64,33 @@ const currentServerUrl = getDesktopServerUrl();
 const serverUrl = ref(currentServerUrl || "");
 const urlError = ref("");
 const saving = ref(false);
+const connectionStatus = ref<{ type: "success" | "warning" | "error"; title: string; message: string } | null>(null);
 const canCancel = computed(() => Boolean(currentServerUrl));
+const HEALTH_TIMEOUT_MS = 10_000;
 
 const checkHealth = async (baseUrl: string) => {
   const healthUrl = new URL("health", baseUrl).toString();
-  const response = await fetch(healthUrl, {
-    method: "GET",
-    headers: { Accept: "application/json" },
-  });
-  if (!response.ok) {
-    throw new Error(`HTTP ${response.status}`);
+  const controller = new AbortController();
+  const timeout = window.setTimeout(() => controller.abort(), HEALTH_TIMEOUT_MS);
+  try {
+    const response = await fetch(healthUrl, {
+      method: "GET",
+      headers: { Accept: "application/json" },
+      signal: controller.signal,
+    });
+    if (!response.ok) {
+      throw new Error(`服务器健康检查返回 HTTP ${response.status}`);
+    }
+  } catch (error) {
+    if (error instanceof DOMException && error.name === "AbortError") {
+      throw new Error("连接超时，请确认服务端地址和网络状态");
+    }
+    if (error instanceof TypeError) {
+      throw new Error("网络请求失败，请确认地址、证书或 CORS 配置");
+    }
+    throw error;
+  } finally {
+    window.clearTimeout(timeout);
   }
 };
 
@@ -67,6 +101,7 @@ const clearSessionForServerChange = async () => {
 
 const save = async () => {
   urlError.value = "";
+  connectionStatus.value = null;
   const normalized = normalizeDesktopServerUrl(serverUrl.value);
   if (!normalized.ok) {
     urlError.value = normalized.reason;
@@ -85,10 +120,21 @@ const save = async () => {
     if (previous !== result.url) {
       await clearSessionForServerChange();
     }
+    connectionStatus.value = {
+      type: "success",
+      title: "连接已确认",
+      message: result.url,
+    };
     ElMessage.success("服务器连接已确认");
     router.replace("/login");
-  } catch {
-    urlError.value = "无法连接服务器的 /health，请确认地址和网络后重试";
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "无法连接服务器的 /health";
+    connectionStatus.value = {
+      type: "error",
+      title: "连接检查失败",
+      message,
+    };
+    urlError.value = message;
   } finally {
     saving.value = false;
   }
@@ -145,6 +191,30 @@ h1 {
   line-height: 1.7;
 }
 
+.current-server {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 10px 12px;
+  border: 1px solid #dbe6f2;
+  border-radius: 6px;
+  background: #f8fafc;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.current-server code {
+  overflow-wrap: anywhere;
+  color: #1e293b;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+.connection-alert {
+  margin-bottom: 18px;
+}
+
 .hint {
   margin-top: -8px;
   color: #64748b;