dynamic agreement list

src/pages/setting/About.vue

@@ -5,10 +5,10 @@
 			<h1 v-text="appName" />
 			<p v-text="appDescription" />
 		</section>
-		<t-cell-group theme="card" v-entrance-transition="70">
+		<t-cell-group v-if="agreementItemList.length" theme="card" v-entrance-transition="70">
 			<t-cell
 				v-for="item in agreementItemList"
-				:key="item.code"
+				:key="item.id"
 				:title="item.title"
 				arrow
 				hover
@@ -19,6 +19,10 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
+		<t-empty
+			v-else
+			:description="isLoading ? '正在加载协议配置' : '暂无可用协议'"
+		/>
 		<footer class="footer" v-entrance-transition="140">
 			<p>技术支持：夜雨</p>
 			<p>联系技术：imyeyu@qq.com</p>
@@ -29,17 +33,14 @@
 </template>
 
 <script setup lang="ts">
-import { type Setting, SettingAPI } from "timi-web-api";
+import { SettingAPI } from "timi-web-api";
 import Logo from "@/pages/user/component/Logo.vue";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
 
-type AgreementCode = "SERVICE_LICENSE" | "PRIVACY_LICENSE" | "OPEN_SOURCE_LICENSE";
-type AgreementRouteName = "ServiceAgreement" | "PrivacyAgreement" | "OpenSourceAgreement";
 type AgreementItem = {
-	code: AgreementCode;
 	icon: string;
-	routeName: AgreementRouteName;
+	id: string;
 	title: string;
 };
 
@@ -51,53 +52,63 @@ const appName = "糕店客户管理";
 const appDescription = "面向门店的客户、登记、积分与经营管理工具";
 const router = useRouter();
 
-const agreementItemList: AgreementItem[] = [
-	{
-		code: "SERVICE_LICENSE",
-		icon: "file-attachment",
-		routeName: "ServiceAgreement",
-		title: "服务协议"
-	},
-	{
-		code: "PRIVACY_LICENSE",
-		icon: "secured",
-		routeName: "PrivacyAgreement",
-		title: "隐私协议"
-	},
-	{
-		code: "OPEN_SOURCE_LICENSE",
-		icon: "code",
-		routeName: "OpenSourceAgreement",
-		title: "开源软件协议"
-	}
-];
-const agreementCodeList = agreementItemList.map(item => item.code);
-
-const settingMap = ref<Record<string, Setting>>({});
-
-function getAgreementId(code: AgreementCode): string {
-	return settingMap.value[code]?.value?.trim() || "";
-}
+const agreementItemList = ref<AgreementItem[]>([]);
+const isLoading = ref(false);
 
 async function openAgreement(item: AgreementItem): Promise<void> {
-	const articleId = getAgreementId(item.code);
-	if (!articleId) {
-		Message.warning(`${item.title}暂未配置`);
-		return;
-	}
 	await router.push({
-		name: item.routeName,
+		name: "Agreement",
 		params: {
-			id: articleId
+			id: item.id
 		}
 	});
 }
 
-async function loadSettings(): Promise<void> {
+function normalizeAgreementItem(value: unknown): AgreementItem | undefined {
+	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() : "";
+	const icon = typeof source.icon === "string" ? source.icon.trim() : "";
+	if (!id || !title) {
+		return undefined;
+	}
+	return {
+		id,
+		title,
+		icon: icon || "file-attachment"
+	};
+}
+
+function parseAgreementList(value?: string): AgreementItem[] {
+	if (!value?.trim()) {
+		return [];
+	}
 	try {
-		settingMap.value = await SettingAPI.map("GAO_SYSTEM", undefined, agreementCodeList);
+		const sourceList: unknown = JSON.parse(value);
+		if (!Array.isArray(sourceList)) {
+			return [];
+		}
+		return sourceList
+			.map(item => normalizeAgreementItem(item))
+			.filter((item): item is AgreementItem => !!item);
+	} catch {
+		Message.error("协议配置格式错误");
+		return [];
+	}
+}
+
+async function loadSettings(): Promise<void> {
+	isLoading.value = true;
+	try {
+		const settingMap = await SettingAPI.map("GAO_SYSTEM", undefined, ["AGREEMENT"]);
+		agreementItemList.value = parseAgreementList(settingMap.AGREEMENT?.value);
 	} catch (error) {
 		Message.error(getErrorMessage(error, "协议配置加载失败"));
+	} finally {
+		isLoading.value = false;
 	}
 }