feat(desktop): implement phase 1 tauri client

2026-06-30 17:25:03 +08:00
parent 4654a812a0
commit d1a6c957f7
45 changed files with 5473 additions and 27 deletions
@@ -0,0 +1,161 @@
+<template>
+  <div class="desktop-settings-page">
+    <section class="settings-panel">
+      <div class="panel-header">
+        <p class="eyebrow">CTMS Desktop</p>
+        <h1>服务器设置</h1>
+        <p class="description">配置桌面客户端要连接的 CTMS 服务端入口。业务数据仍由服务端统一保存和裁决。</p>
+      </div>
+
+      <el-form label-position="top" @submit.prevent>
+        <el-form-item label="服务器地址" :error="urlError">
+          <el-input
+            v-model.trim="serverUrl"
+            size="large"
+            placeholder="https://ctms.example.com"
+            autocomplete="url"
+            @keyup.enter="save"
+          />
+        </el-form-item>
+
+        <div class="hint">
+          允许 HTTPS 服务地址；本地开发可使用 http://localhost 或 http://127.0.0.1。
+        </div>
+
+        <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>
+        </div>
+      </el-form>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { useAuthStore } from "../store/auth";
+import { useStudyStore } from "../store/study";
+import { getDesktopServerUrl, normalizeDesktopServerUrl, setDesktopServerUrl } from "../runtime/desktopServerConfig";
+
+const router = useRouter();
+const auth = useAuthStore();
+const studyStore = useStudyStore();
+
+const currentServerUrl = getDesktopServerUrl();
+const serverUrl = ref(currentServerUrl || "");
+const urlError = ref("");
+const saving = ref(false);
+const canCancel = computed(() => Boolean(currentServerUrl));
+
+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 clearSessionForServerChange = () => {
+  auth.logout();
+  studyStore.clearCurrentStudy();
+};
+
+const save = async () => {
+  urlError.value = "";
+  const normalized = normalizeDesktopServerUrl(serverUrl.value);
+  if (!normalized.ok) {
+    urlError.value = normalized.reason;
+    return;
+  }
+
+  saving.value = true;
+  try {
+    await checkHealth(normalized.url);
+    const previous = getDesktopServerUrl();
+    const result = setDesktopServerUrl(normalized.url);
+    if (!result.ok) {
+      urlError.value = result.reason;
+      return;
+    }
+    if (previous !== result.url) {
+      clearSessionForServerChange();
+    }
+    ElMessage.success("服务器连接已确认");
+    router.replace("/login");
+  } catch {
+    urlError.value = "无法连接服务器的 /health，请确认地址和网络后重试";
+  } finally {
+    saving.value = false;
+  }
+};
+
+const goBack = () => {
+  router.back();
+};
+</script>
+
+<style scoped>
+.desktop-settings-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  background: #f6f8fb;
+}
+
+.settings-panel {
+  width: min(100%, 520px);
+  padding: 32px;
+  border: 1px solid #d9e2ef;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
+}
+
+.panel-header {
+  margin-bottom: 28px;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: #2563eb;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0;
+  color: #0f172a;
+  font-size: 28px;
+  line-height: 1.3;
+}
+
+.description {
+  margin: 12px 0 0;
+  color: #475569;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.hint {
+  margin-top: -8px;
+  color: #64748b;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 28px;
+}
+</style>