feat:优化连接设置

Author: xjuunn

apps/frontend/app/pages/no-signal.vue

@@ -12,8 +12,14 @@ const goConnectionSettings = () => {
         from: String(route.query.from || '/'),
       },
     },
+    { replace: true },
   )
 }
+
+const retryConnection = () => {
+  const target = String(route.query.from || '/')
+  navigateTo(target, { replace: true })
+}
 </script>
 
 <template>
@@ -26,9 +32,11 @@ const goConnectionSettings = () => {
 
     <div class="relative mx-auto flex min-h-full w-full max-w-3xl items-center justify-center px-4 py-10">
       <section
-        class="w-full rounded-3xl border border-base-content/10 bg-base-100/72 p-8 text-center shadow-[0_20px_80px_rgba(0,0,0,0.18)] backdrop-blur-xl md:p-10">
+        class="w-full rounded-3xl border border-base-content/10 bg-base-100/72 p-8 text-center shadow-[0_20px_80px_rgba(0,0,0,0.18)] backdrop-blur-xl md:p-10"
+      >
         <div
-          class="mx-auto grid h-16 w-16 place-items-center rounded-2xl border border-error/25 bg-error/10 text-error">
+          class="mx-auto grid h-16 w-16 place-items-center rounded-2xl border border-error/25 bg-error/10 text-error"
+        >
           <Icon name="mingcute:wifi-off-line" size="30" />
         </div>
 
@@ -37,7 +45,10 @@ const goConnectionSettings = () => {
           当前设备与后端服务连接超时，应用已进入保护状态。请检查网络或更新服务地址后继续使用。
         </p>
 
-        <div class="mt-8 flex justify-center">
+        <div class="mt-8 flex justify-center gap-3">
+          <button class="btn btn-ghost rounded-xl px-7" @click="retryConnection">
+            重试连接
+          </button>
           <button class="btn btn-primary rounded-xl px-7" @click="goConnectionSettings">
             设置连接
           </button>

apps/frontend/app/pages/settings/connection.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts">
 import { normalizeEndpointUrl, probeBackendReachability, resolveRuntimeApiBaseUrl } from '~/utils/backend-endpoint'
 
 definePageMeta({ layout: 'default' })
@@ -24,10 +24,34 @@ const normalizeWsInput = (value: string) => normalizeEndpointUrl(value, { defaul
 const normalizedServerUrl = computed(() => normalizeHttpInput(form.backendServerUrl))
 const canSave = computed(() => !!normalizedServerUrl.value)
 
-const handleBack = () => {
-  // const target = String(route.query.from || '/')
-  // navigateTo(target, { replace: true })
-  router.back();
+const resolveFallbackTarget = () => {
+  const from = String(route.query.from || '').trim()
+  if (from && !from.startsWith('/settings/connection') && !from.startsWith('/no-signal')) {
+    return from
+  }
+  return '/settings/general'
+}
+
+const navigateBackSafely = async () => {
+  const fallback = resolveFallbackTarget()
+  if (String(route.query.from || '').trim()) {
+    await navigateTo(fallback, { replace: true })
+    return
+  }
+
+  if (import.meta.client && window.history.length > 1) {
+    const before = `${window.location.pathname}${window.location.search}`
+    router.back()
+    await new Promise((resolve) => setTimeout(resolve, 120))
+    const after = `${window.location.pathname}${window.location.search}`
+    if (after !== before) return
+  }
+
+  await navigateTo(fallback, { replace: true })
+}
+
+const handleBack = async () => {
+  await navigateBackSafely()
 }
 
 const socketEndpoint = computed(() => {
@@ -108,7 +132,7 @@ async function saveAndRetry() {
     //   ? fallback
     //   : from
     // await navigateTo(target)
-    router.back();
+    await navigateBackSafely()
   } finally {
     saving.value = false
   }
@@ -118,7 +142,7 @@ async function saveAndRetry() {
 <template>
   <div class="min-h-full bg-transparent px-4 py-8">
     <div class="mx-auto w-full max-w-2xl">
-      <section class="rounded-2xl border border-base-content/10 bg-base-100/80 p-6 shadow-sm backdrop-blur-md md:p-7">
+      <section class="rounded-2xl p-6 shadow-sm backdrop-blur-md md:p-7">
         <header class="mb-6">
           <button class="btn btn-ghost btn-sm mb-3 rounded-lg px-2" @click="handleBack">
             <Icon name="mingcute:left-line" size="16" />
@@ -131,26 +155,24 @@ async function saveAndRetry() {
         <div class="grid grid-cols-1 gap-4">
           <label class="form-control">
             <div class="label py-1">
-              <span class="label-text text-sm font-medium">服务器地址</span>
+              <span class="label-text text-sm font-medium">服务器地址：</span>
             </div>
             <input v-model="form.backendServerUrl" type="text" class="input input-bordered h-11 rounded-xl bg-base-100"
               placeholder="例如 10.105.86.133:8080 或 api.example.com" />
           </label>
         </div>
 
-        <div class="mt-5 rounded-xl border border-base-content/10 bg-base-200/45 p-4">
-          <div class="grid grid-cols-1 gap-3">
-            <label class="form-control">
-              <span class="mb-1 text-xs font-medium text-base-content/65">Socket 地址</span>
-              <input :value="socketEndpoint || '请先填写服务器地址'" type="text"
-                class="input input-bordered h-10 rounded-lg bg-base-100/70 text-sm" readonly />
-            </label>
-            <label class="form-control">
-              <span class="mb-1 text-xs font-medium text-base-content/65">LiveKit 地址</span>
-              <input :value="livekitEndpoint || '请先填写服务器地址'" type="text"
-                class="input input-bordered h-10 rounded-lg bg-base-100/70 text-sm" readonly />
-            </label>
-          </div>
+        <div class="grid grid-cols-1 gap-3 mt-2">
+          <label class="form-control">
+            <span class="mb-1 text-xs font-medium text-base-content/65">Socket 地址：</span>
+            <input :value="socketEndpoint || '请先填写服务器地址'" type="text"
+              class="input input-bordered h-10 rounded-lg bg-base-100/70 text-sm" readonly />
+          </label>
+          <label class="form-control">
+            <span class="mb-1 text-xs font-medium text-base-content/65">LiveKit 地址：</span>
+            <input :value="livekitEndpoint || '请先填写服务器地址'" type="text"
+              class="input input-bordered h-10 rounded-lg bg-base-100/70 text-sm" readonly />
+          </label>
         </div>
 
         <div class="mt-6 flex items-center gap-2">

apps/frontend/app/pages/settings/index/about.vue

@@ -6,7 +6,7 @@ const toast = useToast()
 const { copy } = useClipboard()
 
 const appName = 'Junction'
-const appVersion = '1.0.0'
+const appVersion = '0.1.1'
 const buildDate = '2026-02-02'
 
 const linkItems = [
@@ -56,15 +56,15 @@ const copyBuildInfo = async () => {
 </script>
 
 <template>
-  <div class="min-h-full w-full overflow-y-auto bg-transparent p-4 font-sans text-base-content selection:bg-base-content/20 sm:p-8">
+  <div
+    class="min-h-full w-full overflow-y-auto bg-transparent p-4 font-sans text-base-content selection:bg-base-content/20 sm:p-8">
     <div class="mx-auto flex w-full max-w-2xl flex-col gap-8">
-      <section class="flex flex-col items-center gap-6 rounded-[2rem] border border-base-content/5 bg-base-content/[0.02] p-6 shadow-sm sm:flex-row sm:items-start sm:p-8">
-        <div class="group flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl border border-base-content/10 bg-base-content/[0.04]">
-          <Icon
-            name="mingcute:asterisk-fill"
-            size="3rem"
-            class="h-10 w-10 text-base-content/80 transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:rotate-180"
-          />
+      <section
+        class="flex flex-col items-center gap-6 rounded-[2rem] border border-base-content/5 bg-base-content/[0.02] p-6 shadow-sm sm:flex-row sm:items-start sm:p-8">
+        <div
+          class="group flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl border border-base-content/10 bg-base-content/[0.04]">
+          <Icon name="mingcute:asterisk-fill" size="3rem"
+            class="h-10 w-10 text-base-content/80 transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:rotate-180" />
         </div>
 
         <div class="flex flex-1 flex-col items-center gap-4 sm:items-start">
@@ -74,16 +74,17 @@ const copyBuildInfo = async () => {
           </div>
 
           <div class="flex flex-wrap items-center justify-center gap-2 sm:justify-start">
-            <span class="rounded-lg border border-base-content/5 bg-base-content/[0.03] px-3 py-1.5 text-xs font-medium text-base-content/70">
+            <span
+              class="rounded-lg border border-base-content/5 bg-base-content/[0.03] px-3 py-1.5 text-xs font-medium text-base-content/70">
               版本 {{ appVersion }}
             </span>
-            <span class="rounded-lg border border-base-content/5 bg-base-content/[0.03] px-3 py-1.5 text-xs font-medium text-base-content/70">
+            <span
+              class="rounded-lg border border-base-content/5 bg-base-content/[0.03] px-3 py-1.5 text-xs font-medium text-base-content/70">
               构建于 {{ buildDate }}
             </span>
             <button
               class="ml-1 flex items-center gap-1.5 rounded-lg bg-base-content px-3.5 py-1.5 text-xs font-semibold text-base-100 shadow-md shadow-base-content/10 transition-all duration-200 hover:opacity-85 active:scale-95"
-              @click="copyBuildInfo"
-            >
+              @click="copyBuildInfo">
               <Icon name="mingcute:copy-2-line" class="h-3.5 w-3.5" />
               <span>复制信息</span>
             </button>
@@ -93,49 +94,43 @@ const copyBuildInfo = async () => {
 
       <section class="flex flex-col gap-3">
         <h2 class="pl-2 text-xs font-bold tracking-wider text-base-content/40">官方链接</h2>
-        <div class="flex flex-col overflow-hidden rounded-3xl border border-base-content/5 bg-base-content/[0.02] shadow-sm">
-          <button
-            v-for="(item, index) in linkItems"
-            :key="item.title"
+        <div
+          class="flex flex-col overflow-hidden rounded-3xl border border-base-content/5 bg-base-content/[0.02] shadow-sm">
+          <button v-for="(item, index) in linkItems" :key="item.title"
             class="group flex w-full items-center gap-4 p-4 text-left transition-colors duration-300 hover:bg-base-content/[0.04]"
             :class="{ 'border-b border-base-content/5': index !== linkItems.length - 1 }"
-            @click="openExternalUrl(item.url)"
-          >
-            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-base-content/5 bg-base-content/[0.04] text-base-content/60 transition-all duration-300 group-hover:bg-base-content group-hover:text-base-100">
+            @click="openExternalUrl(item.url)">
+            <div
+              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-base-content/5 bg-base-content/[0.04] text-base-content/60 transition-all duration-300 group-hover:bg-base-content group-hover:text-base-100">
               <Icon :name="item.icon" class="h-5 w-5 transition-transform duration-300 group-hover:scale-110" />
             </div>
             <div class="flex min-w-0 flex-1 flex-col gap-0.5">
               <h3 class="text-sm font-semibold text-base-content/90">{{ item.title }}</h3>
               <p class="truncate text-xs text-base-content/50">{{ item.description }}</p>
             </div>
-            <Icon
-              name="mingcute:right-line"
-              class="h-4 w-4 shrink-0 text-base-content/20 transition-all duration-300 group-hover:translate-x-1 group-hover:text-base-content/60"
-            />
+            <Icon name="mingcute:right-line"
+              class="h-4 w-4 shrink-0 text-base-content/20 transition-all duration-300 group-hover:translate-x-1 group-hover:text-base-content/60" />
           </button>
         </div>
       </section>
 
       <section class="flex flex-col gap-3">
         <h2 class="pl-2 text-xs font-bold tracking-wider text-base-content/40">支持与反馈</h2>
-        <div class="flex flex-col overflow-hidden rounded-3xl border border-base-content/5 bg-base-content/[0.02] shadow-sm">
-          <button
-            v-for="(item, index) in supportItems"
-            :key="item.title"
+        <div
+          class="flex flex-col overflow-hidden rounded-3xl border border-base-content/5 bg-base-content/[0.02] shadow-sm">
+          <button v-for="(item, index) in supportItems" :key="item.title"
             class="group flex w-full items-center gap-4 p-4 text-left transition-colors duration-300 hover:bg-base-content/[0.04]"
             :class="{ 'border-b border-base-content/5': index !== supportItems.length - 1 }"
-            @click="openExternalUrl(item.url)"
-          >
-            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-base-content/5 bg-base-content/[0.04] text-base-content/60 transition-all duration-300 group-hover:bg-base-content group-hover:text-base-100">
+            @click="openExternalUrl(item.url)">
+            <div
+              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-base-content/5 bg-base-content/[0.04] text-base-content/60 transition-all duration-300 group-hover:bg-base-content group-hover:text-base-100">
               <Icon :name="item.icon" class="h-5 w-5 transition-transform duration-300 group-hover:scale-110" />
             </div>
             <div class="min-w-0 flex-1">
               <h3 class="text-sm font-semibold text-base-content/90">{{ item.title }}</h3>
             </div>
-            <Icon
-              name="mingcute:external-link-line"
-              class="h-4 w-4 shrink-0 text-base-content/20 transition-all duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-base-content/60"
-            />
+            <Icon name="mingcute:external-link-line"
+              class="h-4 w-4 shrink-0 text-base-content/20 transition-all duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-base-content/60" />
           </button>
         </div>
       </section>

apps/frontend/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Junction",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "identifier": "com.junction.dev",
   "build": {
     "frontendDist": "../.output/public",