timi-server/src/pages/system/ServerIndexPage.vue

<template>
	<div class="server-index">
		<section class="panel">
			<div class="hero">
				<p class="tag">NAS 连接</p>
				<h1 class="header">先配置服务器连接</h1>
				<p class="desc">缺少连接配置时，应用不会进入文件、状态和设置页面。</p>
			</div>

			<div class="form-card">
				<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" size="large" @click="submitConnect">
					保存并进入
				</t-button>
			</div>
		</section>
	</div>
</template>

<script setup lang="ts">
import { Toast } from "tdesign-mobile-vue";
import type { ConnectProtocol, ConnectSetting } from "@/store/settingStore";
import { useSettingStore } from "@/store/settingStore";

defineOptions({
	name: "ServerIndexPage"
});

const route = useRoute();
const router = useRouter();
const settingStore = useSettingStore();

const form = reactive<ConnectSetting>({
	protocol: "http",
	host: "",
	port: "",
	token: ""
});

watch(
	() => settingStore.connect,
	(connect) => {
		Object.assign(form, connect);
	},
	{ immediate: true }
);

function setProtocol(protocol: ConnectProtocol): void {
	form.protocol = protocol;
}

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;
}

async function submitConnect(): Promise<void> {
	if (!validateConnect()) {
		return;
	}

	settingStore.setConnect(form);

	const redirect = typeof route.query.redirect === "string" ? route.query.redirect : "/";
	await router.replace(redirect);
}
</script>

<style scoped lang="less">
.server-index {
	width: 100%;
	min-height: 100vh;

	.panel {
		gap: 1.2rem;
		display: flex;
		padding: 1.2rem;
		min-height: 100vh;
		flex-direction: column;
		background:
			radial-gradient(circle at top right, rgba(0, 82, 217, .18), transparent 36%),
			linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(245, 247, 250, .92));
	}

	.hero {
		gap: .75rem;
		display: flex;
		padding-top: 3rem;
		flex-direction: column;
	}

	.tag,
	.label,
	.desc {
		margin: 0;
		color: var(--app-sub);
	}

	.tag {
		font-size: .875rem;
		letter-spacing: .08em;
	}

	.header {
		margin: 0;
		font-size: 2rem;
		line-height: 1.15;
	}

	.desc {
		font-size: .95rem;
		line-height: 1.7;
	}

	.form-card {
		gap: 1rem;
		display: flex;
		padding: 1.2rem;
		border-radius: 1.25rem;
		flex-direction: column;
		border: 1px solid var(--app-line);
		background: rgba(255, 255, 255, .86);
		box-shadow: 0 .75rem 2rem rgba(17, 32, 56, .08);
		backdrop-filter: blur(14px);
	}

	.group {
		gap: .5rem;
		display: flex;
		flex-direction: column;
	}

	.label {
		font-size: .875rem;
	}

	.protocols {
		gap: .75rem;
		display: flex;
	}
}

:global(.theme-dark) .server-index {
	.panel {
		background:
			radial-gradient(circle at top right, rgba(110, 168, 255, .2), transparent 34%),
			linear-gradient(180deg, rgba(16, 20, 24, .96), rgba(12, 16, 20, .96));
	}

	.form-card {
		background: rgba(26, 33, 41, .86);
		box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28);
	}
}
</style>