update ServerDashboard

src/pages/tabs/SettingsTab.vue

@@ -2,72 +2,19 @@
 	<div class="page">
 		<section class="card">
 			<div class="head">
-				<p class="tag">连接配置</p>
-				<h2 class="title">服务器连接</h2>
-				<p class="desc">这里的配置会持久化保存，缺失时应用会强制回到连接引导页。</p>
+				<p class="tag">系统设置</p>
+				<h2 class="header">配置入口</h2>
+				<p class="desc">设置页只保留入口，具体配置在独立页面中维护。</p>
 			</div>
-
-			<div class="group">
-				<p class="label">协议</p>
-				<div class="protocols">
-					<t-button
-						size="small"
-						theme="primary"
-						:variant="form.protocol === 'http' ? 'base' : 'outline'"
-						@click="setProtocol('http')"
-					>
-						HTTP
-					</t-button>
-					<t-button
-						size="small"
-						theme="primary"
-						:variant="form.protocol === 'https' ? 'base' : 'outline'"
-						@click="setProtocol('https')"
-					>
-						HTTPS
-					</t-button>
-				</div>
-			</div>
-
-			<div class="group">
-				<p class="label">主机地址</p>
-				<t-input v-model="form.host" clearable placeholder="例如 192.168.1.100 或 nas.local" />
-			</div>
-
-			<div class="group">
-				<p class="label">端口</p>
-				<t-input v-model="form.port" clearable type="number" placeholder="例如 8080" />
-			</div>
-
-			<div class="group">
-				<p class="label">访问令牌</p>
-				<t-input v-model="form.token" clearable placeholder="请输入 token" />
-			</div>
-
-			<t-button block theme="primary" @click="saveConnect">
-				保存连接配置
-			</t-button>
-			<t-button block variant="outline" @click="resetConnect">
-				清空连接配置
-			</t-button>
-		</section>
-
-		<section class="card">
-			<div class="head">
-				<p class="tag">主题</p>
-				<h2 class="title">界面模式</h2>
-				<p class="desc">当前仅提供浅色、深色和跟随系统三种模式。</p>
-			</div>
-
-			<div class="modes">
-				<t-button
-					v-for="item in themeModeList"
-					:key="item.value"
-					theme="primary"
-					:variant="globalUIStore.themeMode === item.value ? 'base' : 'outline'"
-					@click="globalUIStore.setThemeMode(item.value)"
-				>
-					<span v-text="item.label"></span>
+			<div class="entries">
+				<t-button block variant="outline" @click="openConnectSetting">
+					连接配置
+				</t-button>
+				<t-button block variant="outline" @click="openDashboardSetting">
+					仪表板
+				</t-button>
+				<t-button block variant="outline" @click="openThemeSetting">
+					主题
 				</t-button>
 			</div>
 		</section>
@@ -75,74 +22,22 @@
 </template>
 
 <script setup lang="ts">
-import { Toast } from "tdesign-mobile-vue";
-import { useGlobalUIStore, type ThemeMode } from "@/store/globalUIStore";
-import type { ConnectProtocol, ConnectSetting } from "@/store/settingStore";
-import { useSettingStore } from "@/store/settingStore";
-
-const globalUIStore = useGlobalUIStore();
-const settingStore = useSettingStore();
-
-const themeModeList: Array<{ label: string; value: ThemeMode }> = [
-	{ label: "浅色", value: "light" },
-	{ label: "深色", value: "dark" },
-	{ label: "跟随系统", value: "system" }
-];
-
-const form = reactive<ConnectSetting>({
-	protocol: "http",
-	host: "",
-	port: "",
-	token: ""
+defineOptions({
+	name: "SettingsTab"
 });
 
-watch(
-	() => settingStore.connect,
-	(connect) => {
-		Object.assign(form, connect);
-	},
-	{ immediate: true }
-);
+const router = useRouter();
 
-function setProtocol(protocol: ConnectProtocol): void {
-	form.protocol = protocol;
+function openConnectSetting(): void {
+	void router.push("/settings/connect");
 }
 
-function validateConnect(): boolean {
-	const host = form.host.trim();
-	const port = form.port.trim();
-	const token = form.token.trim();
-
-	if (!host || !port || !token) {
-		Toast({
-			theme: "warning",
-			message: "请完整填写连接配置"
-		});
-		return false;
-	}
-
-	return true;
+function openDashboardSetting(): void {
+	void router.push("/settings/dashboard");
 }
 
-function saveConnect(): void {
-	if (!validateConnect()) {
-		return;
-	}
-
-	settingStore.setConnect(form);
-	Toast({
-		theme: "success",
-		message: "连接配置已保存"
-	});
-}
-
-function resetConnect(): void {
-	settingStore.resetConnect();
-	Object.assign(form, settingStore.connect);
-	Toast({
-		theme: "success",
-		message: "连接配置已清空"
-	});
+function openThemeSetting(): void {
+	void router.push("/settings/theme");
 }
 </script>
 
@@ -164,26 +59,23 @@ function resetConnect(): void {
 		box-shadow: 0 .35rem 1rem rgba(17, 32, 56, .05);
 	}
 
-	.head,
-	.group {
+	.head {
 		gap: .5rem;
 		display: flex;
 		flex-direction: column;
 	}
 
 	.tag,
-	.label,
 	.desc {
 		margin: 0;
 		color: var(--app-sub);
 	}
 
-	.tag,
-	.label {
+	.tag {
 		font-size: .875rem;
 	}
 
-	.title {
+	.header {
 		margin: 0;
 		font-size: 1.25rem;
 	}
@@ -192,11 +84,10 @@ function resetConnect(): void {
 		line-height: 1.6;
 	}
 
-	.protocols,
-	.modes {
+	.entries {
 		gap: .75rem;
 		display: flex;
-		flex-wrap: wrap;
+		flex-direction: column;
 	}
 }