update user agreement dialog

src/pages/user/component/UserAgreement.vue

@@ -23,18 +23,18 @@
 	>
 		<div class="dialog-content">
 			<t-tabs
-				v-model="activeAgreementCode"
+				v-model="activeAgreementId"
 				class="tabs"
 				theme="line"
 				bottom-line-mode="full"
 				:split="false"
-				:space-evenly="true"
+				:space-evenly="false"
 				:swipeable="true"
 			>
 				<t-tab-panel
 					v-for="item in agreementList"
-					:key="item.code"
+					:key="item.id"
-					:value="item.code"
+					:value="item.id"
 					:label="item.title"
 					lazy
 				>
@@ -64,30 +64,14 @@ import { ArticleAPI, AttachmentAPI, SettingAPI, type Article } from "timi-web-ap
 import { ArticleView } from "timi-tdesign-mobile";
 import { getErrorMessage } from "@/utils/error";
 
-type AgreementCode = "SERVICE_LICENSE" | "PRIVACY_LICENSE" | "OPEN_SOURCE_LICENSE";
 type AgreementItem = {
-	code: AgreementCode;
+	id: string;
 	title: string;
 	article?: Article;
 	errorMessage?: string;
 	loading: boolean;
 };
 
-const baseAgreementList: Array<Pick<AgreementItem, "code" | "title">> = [
-	{
-		code: "SERVICE_LICENSE",
-		title: "服务协议"
-	},
-	{
-		code: "PRIVACY_LICENSE",
-		title: "隐私协议"
-	},
-	{
-		code: "OPEN_SOURCE_LICENSE",
-		title: "开源软件协议"
-	}
-];
-
 defineOptions({
 	name: "UserAgreement"
 });
@@ -103,17 +87,47 @@ const emit = defineEmits<{
 }>();
 
 const dialogVisible = ref(false);
-const agreementList = ref<AgreementItem[]>(createAgreementList());
+const agreementList = ref<AgreementItem[]>([]);
-const activeAgreementCode = ref<AgreementCode>("SERVICE_LICENSE");
+const activeAgreementId = ref("");
 
-function createAgreementList(): AgreementItem[] {
+function normalizeAgreementItem(value: unknown): Pick<AgreementItem, "id" | "title"> | undefined {
-	return baseAgreementList.map(item => ({
+	if (!value || typeof value !== "object") {
+		return undefined;
+	}
+	const source = value as Record<string, unknown>;
+	const id = typeof source.id === "string" ? source.id.trim() : "";
+	const title = typeof source.title === "string" ? source.title.trim() : "";
+	if (!id || !title) {
+		return undefined;
+	}
+	return { id, title };
+}
+
+function parseAgreementList(value?: string): Array<Pick<AgreementItem, "id" | "title">> {
+	if (!value?.trim()) {
+		return [];
+	}
+	try {
+		const sourceList: unknown = JSON.parse(value);
+		if (!Array.isArray(sourceList)) {
+			return [];
+		}
+		return sourceList
+			.map(item => normalizeAgreementItem(item))
+			.filter((item): item is Pick<AgreementItem, "id" | "title"> => !!item);
+	} catch {
+		return [];
+	}
+}
+
+function createAgreementList(list: Array<Pick<AgreementItem, "id" | "title">>): AgreementItem[] {
+	return list.map(item => ({
 		...item,
 		loading: false
 	}));
 }
 
-function handleCheckboxChange(checked: boolean): void {
+async function handleCheckboxChange(checked: boolean): Promise<void> {
 	if (!checked) {
 		emit("update:modelValue", false);
 		return;
@@ -121,19 +135,21 @@ function handleCheckboxChange(checked: boolean): void {
 
 	emit("update:modelValue", false);
 	dialogVisible.value = true;
-	activeAgreementCode.value = "SERVICE_LICENSE";
+	activeAgreementId.value = "";
-	void loadAgreements();
+	await loadAgreements();
 }
 
 async function loadAgreements(): Promise<void> {
-	agreementList.value = createAgreementList().map(item => ({
+	try {
+		const settingMap = await SettingAPI.map("GAO_SYSTEM", undefined, ["AGREEMENT"]);
+		const configuredAgreementList = parseAgreementList(settingMap.AGREEMENT?.value);
+		agreementList.value = createAgreementList(configuredAgreementList).map(item => ({
 			...item,
 			loading: true
 		}));
-	try {
+		activeAgreementId.value = configuredAgreementList[0]?.id || "";
-		const settingMap = await SettingAPI.map("GAO_SYSTEM");
 		agreementList.value = await Promise.all(agreementList.value.map(async item => {
-			const articleId = settingMap[item.code]?.value?.trim();
+			const articleId = item.id;
 			if (!articleId) {
 				return {
 					...item,
@@ -158,11 +174,13 @@ async function loadAgreements(): Promise<void> {
 		}));
 	} catch (error) {
 		const errorMessage = getErrorMessage(error, "协议配置加载失败");
-		agreementList.value = createAgreementList().map(item => ({
+		agreementList.value = [{
-			...item,
+			id: "AGREEMENT_ERROR",
+			title: "用户协议",
 			loading: false,
 			errorMessage
-		}));
+		}];
+		activeAgreementId.value = "AGREEMENT_ERROR";
 	}
 }
 
@@ -247,12 +265,8 @@ function agreeAgreement(): void {
 				overflow-y: auto;
 			}
 
-			:deep(.t-tabs__scroll) {
-				overflow-x: hidden;
-			}
-
 			:deep(.t-tabs__item) {
-				padding: 0;
+				padding: 0 .5rem;
 				font-size: .75rem;
 			}
 		}