From fbfaa59b1451adff324418c73470e5eb563300f8 Mon Sep 17 00:00:00 2001
From: plum <40649341+plum-k@users.noreply.github.com>
Date: Wed, 15 Apr 2026 23:34:52 +0800
Subject: [PATCH] fix(data-center): populate SQL data source options and
 normalize dataset source id mapping

---
 packages/editor/src/http/api/dataSet.ts       |   2 +-
 .../src/views/home/dataCenter/DataSet.vue     |   4 +-
 .../views/home/dataCenter/DataSetModal.vue    | 464 ++++++++++++------
 packages/editor/types/data-source.d.ts        |  16 +-
 4 files changed, 318 insertions(+), 168 deletions(-)

diff --git a/packages/editor/src/http/api/dataSet.ts b/packages/editor/src/http/api/dataSet.ts
index 6004b71..501289d 100644
--- a/packages/editor/src/http/api/dataSet.ts
+++ b/packages/editor/src/http/api/dataSet.ts
@@ -17,7 +17,7 @@ export interface DataSetPayload {
 	type: "API" | "SQL" | "JSON" | string;
 	method?: IDataSet.Item["method"];
 	api?: string;
-	dataSourceId?: string;
+	dataSourceId?: IDataSet.Item["id"];
 	sql?: string;
 	json?: string;
 }
diff --git a/packages/editor/src/views/home/dataCenter/DataSet.vue b/packages/editor/src/views/home/dataCenter/DataSet.vue
index 2b5f522..b8a2a6b 100644
--- a/packages/editor/src/views/home/dataCenter/DataSet.vue
+++ b/packages/editor/src/views/home/dataCenter/DataSet.vue
@@ -65,7 +65,7 @@ const defaultDataSet: IDataSet.Item = {
     type: 'API',
     method: 'GET',
     api: '',
-    dataSource: '',
+    dataSourceId: '',
     sql: '',
     json: ''
 };
@@ -179,7 +179,7 @@ async function editDataSet(item) {
     const detail = (res.data || item) as any;
     resetCurrentDataSet({
         ...detail,
-        dataSource: detail.dataSourceId || detail.dataSource || ""
+        dataSourceId: detail.dataSourceId || detail.dataSource ? String(detail.dataSourceId || detail.dataSource) : ""
     });
     showDataSetModal.value = true
 }
diff --git a/packages/editor/src/views/home/dataCenter/DataSetModal.vue b/packages/editor/src/views/home/dataCenter/DataSetModal.vue
index b844b82..3519b07 100644
--- a/packages/editor/src/views/home/dataCenter/DataSetModal.vue
+++ b/packages/editor/src/views/home/dataCenter/DataSetModal.vue
@@ -1,180 +1,326 @@
 <template>
-    <n-modal :show="show" @mask-click="handleClose">
-        <n-card class="w-200 max-w-1200px" :title="t('home.Data set config')">
-            <n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="auto" :disabled="submitLoading">
-                <n-grid :cols="24" :x-gap="24">
-                    <n-form-item-gi :span="12" :label="t('home.Data set name')" path="name">
-                        <n-input v-model:value="model.name" />
-                    </n-form-item-gi>
-                    <n-form-item-gi :span="12" :label="t('home.Data set group')">
-                        <n-cascader v-model:value="model.groupId" expand-trigger="hover" :options="groupOptions"
-                            check-strategy="all" show-path filterable clearable label-field="name" value-field="id" />
-                    </n-form-item-gi>
-                    <n-form-item-gi :span="12" :label="t('home.Data set type')">
-                        <n-select v-model:value="model.type" :options="setTypes" />
-                    </n-form-item-gi>
+	<n-modal :show="show" @mask-click="handleClose">
+		<n-card class="w-200 max-w-1200px" :title="t('home.dataCenter.Data set config')">
+			<n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="auto" :disabled="submitLoading">
+				<n-grid :cols="24" :x-gap="24">
+					<n-form-item-gi :span="12" :label="t('home.dataCenter.Data set name')" path="name">
+						<n-input v-model:value="model.name" />
+					</n-form-item-gi>
+					<n-form-item-gi :span="12" :label="t('home.dataCenter.Data set group')" path="groupId">
+						<n-cascader
+							v-model:value="model.groupId"
+							expand-trigger="hover"
+							:options="groupOptions"
+							check-strategy="all"
+							show-path
+							filterable
+							clearable
+							label-field="name"
+							value-field="id"
+						/>
+					</n-form-item-gi>
+					<n-form-item-gi :span="12" :label="t('home.dataCenter.Data set type')" path="type">
+						<n-select v-model:value="model.type" :options="setTypes" />
+					</n-form-item-gi>
 
-                    <template v-if="model.type === 'API'">
-                        <n-form-item-gi :span="12" :label="t('home.Method')">
-                            <n-select v-model:value="model.method" :options="[
-                                { label: 'GET', value: 'GET' },
-                                { label: 'POST', value: 'POST' },
-                            ]" />
-                        </n-form-item-gi>
-                        <n-form-item-gi :span="24" :label="t('home.API interface')">
-                            <n-input v-model:value="model.api" type="textarea" />
-                        </n-form-item-gi>
-                    </template>
+					<template v-if="model.type === 'API'">
+						<n-form-item-gi :span="12" :label="t('home.dataCenter.Method')" path="method">
+							<n-select
+								v-model:value="model.method"
+								:options="[
+									{ label: 'GET', value: 'GET' },
+									{ label: 'POST', value: 'POST' },
+								]"
+							/>
+						</n-form-item-gi>
+						<n-form-item-gi :span="24" :label="t('home.dataCenter.API interface')" path="api">
+							<n-input v-model:value="model.api" type="textarea" />
+						</n-form-item-gi>
+					</template>
 
-                    <template v-else-if="model.type === 'SQL'">
-                        <n-form-item-gi :span="12" :label="t('home.Data sources')">
-                            <n-select v-model:value="model.dataSource" :options="dataSourceOptions" />
-                        </n-form-item-gi>
-                        <n-form-item-gi :span="24" :label="`SQL(${t('home.Query only')})`">
-                            <SQLEditor v-model:value="model.sql as string" />
-                        </n-form-item-gi>
-                        <n-form-item-gi :span="24" label=" ">
-                            <n-blockquote>
-                                {{  t('home.Parameter is passed as ') }}
-                                 '${id}' ,
-                                {{  t('home.For example:') }}
-                                SELECT * FROM table WHERE id='${id}'
-                            </n-blockquote>
-                        </n-form-item-gi>
-                    </template>
+					<template v-else-if="model.type === 'SQL'">
+						<n-form-item-gi :span="12" :label="t('home.dataCenter.Data sources')" path="dataSourceId">
+							<n-select v-model:value="model.dataSourceId" :options="dataSourceOptions" />
+						</n-form-item-gi>
+						<n-form-item-gi :span="24" :label="`SQL(${t('home.dataCenter.Query only')})`" path="sql">
+							<SQLEditor v-model:value="model.sql as string" />
+						</n-form-item-gi>
+						<n-form-item-gi :span="24" label=" ">
+							<n-blockquote>
+								{{ t('home.dataCenter["Parameter is passed as:"]') }}
+								'${id}' ,
+								{{ t('home.dataCenter["For example:"]') }}
+								SELECT * FROM table WHERE id='${id}'
+							</n-blockquote>
+						</n-form-item-gi>
+					</template>
 
-                    <template v-else-if="model.type === 'JSON'">
-                        <n-form-item-gi :span="24" label="JSON">
-                            <JSONEditor v-model:value="model.json as string" />
-                        </n-form-item-gi>
-                    </template>
+					<template v-else-if="model.type === 'JSON'">
+						<n-form-item-gi :span="24" label="JSON" path="json">
+							<JSONEditor v-model:value="model.json as string" />
+						</n-form-item-gi>
+					</template>
 
-                    <n-gi :span="24">
-                        <div class="flex justify-end mt-4">
-                            <n-button :disabled="submitLoading" @click="handleClose" class="mr-2">{{ t("other.Cancel") }}</n-button>
-                            <n-button type="primary" :loading="submitLoading" @click="saveDataSet">{{ t("other.Ok") }}</n-button>
-                        </div>
-                    </n-gi>
-                </n-grid>
-            </n-form>
-        </n-card>
-    </n-modal>
+					<n-gi :span="24">
+						<div class="flex justify-end mt-4">
+							<n-button :disabled="submitLoading" @click="handleClose" class="mr-2">{{ t("other.Cancel") }}</n-button>
+							<n-button type="primary" :loading="submitLoading" @click="saveDataSet">{{ t("other.Ok") }}</n-button>
+						</div>
+					</n-gi>
+				</n-grid>
+			</n-form>
+		</n-card>
+	</n-modal>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, useTemplateRef } from "vue";
-import type { FormInst } from 'naive-ui'
-import { t } from "@/language";
-import { DataSetPayload, fetchCreateDataSet, fetchUpdateDataSet } from "@/http/api/dataSet";
-import { fetchDataSetGroupTree } from "@/http/api/dataSetGroup";
-import { fetchDataSourceList } from "@/http/api/dataSource";
-import SQLEditor from "@/components/code/SQLEditor.vue";
-import JSONEditor from "@/components/code/JSONEditor.vue";
+	import { ref, watch, computed, useTemplateRef } from "vue";
+	import type { FormInst } from "naive-ui";
+	import { t } from "@/language";
+	import { DataSetPayload, fetchCreateDataSet, fetchUpdateDataSet } from "@/http/api/dataSet";
+	import { fetchDataSetGroupTree } from "@/http/api/dataSetGroup";
+	import { fetchDataSourceList } from "@/http/api/dataSource";
+	import SQLEditor from "@/components/code/SQLEditor.vue";
+	import JSONEditor from "@/components/code/JSONEditor.vue";
+	const props = withDefaults(
+		defineProps<{
+			show: boolean;
+			model?: IDataSet.Item;
+		}>(),
+		{
+			show: false,
+			model: () => ({
+				id: "",
+				groupId: "",
+				name: "",
+				type: "API",
+				method: "GET",
+				api: "",
+				dataSourceId: "",
+				sql: "",
+				json: "",
+				createTime: "",
+			}),
+		}
+	);
+	const emits = defineEmits(["update:show", "refresh"]);
 
-const props = withDefaults(defineProps<{
-    show: boolean,
-    model: IDataSet.Item
-}>(), {
-    show: false,
-    model: () => ({
-        id: '',
-        groupId: "",
-        name: '',
-        type: 'SQL',
-    })
-})
-const emits = defineEmits(["update:show", "refresh"]);
+	const formRef = useTemplateRef<FormInst>("formRef");
+	function createRequiredRule(message: string, trigger: Array<"input" | "blur" | "change">) {
+		return {
+			trigger,
+			validator(_: unknown, value: unknown) {
+				if (value === undefined || value === null || value === "") {
+					return new Error(message);
+				}
+				if (Array.isArray(value) && value.length === 0) {
+					return new Error(message);
+				}
+				return true;
+			},
+		};
+	}
 
-const formRef = useTemplateRef<FormInst>("formRef");
-const rules = {
-    name: { required: true, message: t("prompt.Please enter a name for the dataset"), trigger: 'blur' }
-};
-const groupOptions = ref<IDataSet.IGroup[]>([]);
-const setTypes = [
-    { label: 'API', value: 'API' },
-    { label: 'SQL', value: 'SQL' },
-    { label: 'JSON', value: 'JSON' },
-];
-const dataSourceOptions = ref<{ label: string; value: IDataSource.Item["id"] }[]>([]);
-const submitLoading = ref(false);
+	const rules = computed(() => {
+		const baseRules: Record<string, any> = {
+			name: { required: true, message: t("home.dataCenter.Please enter a name for the dataset"), trigger: ["input", "blur"] },
+			groupId: createRequiredRule(t("home.dataCenter.Please select a grouping for the dataset"), ["change", "blur"]),
+			type: { required: true, message: t("home.dataCenter.Please select a dataset type"), trigger: ["change", "blur"] },
+		};
+		const type = props.model?.type;
+		if (type === "API") {
+			baseRules.method = {
+				required: true,
+				message: t("home.dataCenter.Please select a method"),
+				trigger: ["change", "blur"],
+			};
+			baseRules.api = {
+				required: true,
+				message: t("home.dataCenter.Please enter the interface url"),
+				trigger: ["input", "blur"],
+			};
+		} else if (type === "SQL") {
+			baseRules.dataSourceId = createRequiredRule(t("home.dataCenter.Please select a data source"), ["change", "blur"]);
+			baseRules.sql = { required: true, message: t("home.dataCenter.Please enter a SQL string"), trigger: ["blur"] };
+		} else if (type === "JSON") {
+			baseRules.json = { required: true, message: t("home.dataCenter.Please enter the JSON data"), trigger: ["blur"] };
+		}
+		return baseRules;
+	});
+	const groupOptions = ref<IDataSet.IGroup[]>([]);
+	const setTypes = [
+		{ label: "API", value: "API" },
+		{ label: "SQL", value: "SQL" },
+		{ label: "JSON", value: "JSON" },
+	];
+	const dataSourceOptions = ref<{ label: string; value: IDataSource.Item["id"] }[]>([]);
+	const submitLoading = ref(false);
+	const isEdit = computed(() => Boolean(props.model?.id));
 
-watch(() => props.show, (show) => {
-    if (!show) {
-        return;
-    }
-    loadOptions();
-});
+	function normalizeDataSourceId(value: unknown): IDataSource.Item["id"] | undefined {
+		if (value === undefined || value === null || value === "") {
+			return undefined;
+		}
+		return String(value);
+	}
 
-watch(() => props.model.type, (nextType, oldType) => {
-    if (!nextType || nextType === oldType) {
-        return;
-    }
-    if (nextType !== "API") {
-        props.model.method = undefined;
-        props.model.api = "";
-    } else if (!props.model.method) {
-        props.model.method = "GET";
-    }
-    if (nextType !== "SQL") {
-        props.model.dataSource = "";
-        props.model.sql = "";
-    }
-    if (nextType !== "JSON") {
-        props.model.json = "";
-    }
-});
+	function extractList<T>(value: unknown): T[] {
+		if (Array.isArray(value)) {
+			return value as T[];
+		}
+		if (value && typeof value === "object") {
+			const nested = (value as Record<string, unknown>).result;
+			if (Array.isArray(nested)) {
+				return nested as T[];
+			}
+		}
+		return [];
+	}
 
-async function loadOptions() {
-    const [groupRes, dataSourceRes] = await Promise.all([
-        fetchDataSetGroupTree(),
-        fetchDataSourceList()
-    ]);
-    groupOptions.value = groupRes.data || [];
-    dataSourceOptions.value = (dataSourceRes.data || []).map(item => ({
-        label: item.name,
-        value: item.id
-    }));
-}
+	async function loadOptions() {
+		const [groupRes, dataSourceRes] = await Promise.allSettled([fetchDataSetGroupTree(), fetchDataSourceList()]);
 
-function handleClose() {
-    emits("update:show", false);
-}
+		if (groupRes.status === "fulfilled") {
+			groupOptions.value = extractList<IDataSet.IGroup>(groupRes.value.data);
+		} else {
+			groupOptions.value = [];
+		}
 
-function saveDataSet(e: MouseEvent) {
-    e.preventDefault()
+		if (dataSourceRes.status === "fulfilled") {
+			const list = extractList<IDataSource.Item>(dataSourceRes.value.data);
+			dataSourceOptions.value = list.map(item => ({
+				label: item.name,
+				value: String(item.id),
+			}));
+		} else {
+			dataSourceOptions.value = [];
+		}
+	}
 
-    formRef.value?.validate(async (errors) => {
-        if (!errors) {
-            submitLoading.value = true;
-            const payload: DataSetPayload = {
-                id: props.model.id || undefined,
-                name: props.model.name?.trim() || "",
-                groupId: props.model.groupId,
-                type: props.model.type
-            };
+	function normalizeJsonValue(value?: IDataSet.Item["json"]) {
+		if (!value) {
+			return "";
+		}
+		if (typeof value === "string") {
+			return value;
+		}
+		try {
+			return JSON.stringify(value, null, 2);
+		} catch {
+			return "";
+		}
+	}
 
-            if (props.model.type === "API") {
-                payload.method = props.model.method;
-                payload.api = props.model.api?.trim();
-            } else if (props.model.type === "SQL") {
-                payload.dataSourceId = props.model.dataSource;
-                payload.sql = props.model.sql?.trim();
-            } else if (props.model.type === "JSON") {
-                payload.json = props.model.json;
-            }
+	function resetFieldsForType(type: string) {
+		if (!props.model) {
+			return;
+		}
+		if (type !== "API") {
+			props.model.method = undefined;
+			props.model.api = "";
+		}
+		if (type === "API" && !props.model.method) {
+			props.model.method = "GET";
+		}
+		if (type !== "SQL") {
+			props.model.dataSourceId = undefined;
+			props.model.sql = "";
+		}
+		if (type !== "JSON") {
+			props.model.json = "";
+		}
+	}
 
-            const res = props.model.id ? await fetchUpdateDataSet(payload) : await fetchCreateDataSet(payload);
-            submitLoading.value = false;
-            if (res.error) {
-                return;
-            }
-            window.$message?.success(props.model.id ? t("prompt.Success to update") : t("prompt.Saved successfully!"));
+	function validateSql(sql: string) {
+		const trimmed = sql.trim();
+		if (!/^(SELECT|WITH)\b/i.test(trimmed)) {
+			window.$message?.error(t("home.dataCenter.SQL must start with SELECT or WITH"));
+			return false;
+		}
+		if (/[;]|--|\/\*/.test(trimmed)) {
+			window.$message?.error(t("home.dataCenter.SQL must not include unsafe tokens"));
+			return false;
+		}
+		return true;
+	}
 
-            // 刷新父页面表格
-            emits("refresh");
+	function buildPayload(): DataSetPayload {
+		const payload: DataSetPayload = {
+			name: props.model?.name?.trim() || "",
+			groupId: props.model?.groupId ?? "",
+			type: props.model?.type || "API",
+		};
+		if (props.model?.id) {
+			payload.id = props.model.id;
+		}
+		if (payload.type === "API") {
+			payload.method = props.model?.method;
+			payload.api = props.model?.api?.trim();
+		} else if (payload.type === "SQL") {
+			payload.dataSourceId = normalizeDataSourceId(props.model?.dataSourceId);
+			payload.sql = props.model?.sql?.trim();
+		} else if (payload.type === "JSON") {
+			payload.json = normalizeJsonValue(props.model?.json);
+		}
+		return payload;
+	}
 
-            handleClose();
-        }
-    })
-}
+	watch(
+		() => props.show,
+		show => {
+			if (!show) {
+				return;
+			}
+			loadOptions();
+			if (props.model) {
+				props.model.dataSourceId = normalizeDataSourceId(props.model.dataSourceId);
+			}
+			if (props.model?.type === "API" && !props.model.method) {
+				props.model.method = "GET";
+			}
+			if (props.model?.type === "JSON") {
+				props.model.json = normalizeJsonValue(props.model.json);
+			}
+		}
+	);
+
+	watch(
+		() => props.model?.type,
+		(next, prev) => {
+			if (!next || next === prev) {
+				return;
+			}
+			resetFieldsForType(next);
+			formRef.value?.restoreValidation();
+		}
+	);
+
+	function handleClose() {
+		emits("update:show", false);
+	}
+
+	function saveDataSet(e: MouseEvent) {
+		e.preventDefault();
+
+		formRef.value?.validate(async errors => {
+			if (errors || !props.model) {
+				return;
+			}
+
+			if (props.model.type === "SQL" && !validateSql(props.model.sql || "")) {
+				return;
+			}
+
+			submitLoading.value = true;
+			const payload = buildPayload();
+			const res = isEdit.value ? await fetchUpdateDataSet(payload) : await fetchCreateDataSet(payload);
+			submitLoading.value = false;
+			if (res.error) {
+				return;
+			}
+			window.$message?.success(isEdit.value ? t("prompt.Success to update") : t("prompt.Saved successfully!"));
+			emits("refresh");
+			handleClose();
+		});
+	}
 </script>
\ No newline at end of file
diff --git a/packages/editor/types/data-source.d.ts b/packages/editor/types/data-source.d.ts
index 6356c50..60c9549 100644
--- a/packages/editor/types/data-source.d.ts
+++ b/packages/editor/types/data-source.d.ts
@@ -1,6 +1,7 @@
 declare namespace IDataSource {
+    type Id = string | number;
     interface Item {
-        id: string;
+        id: Id;
         name: string;
         type: string;
         connectionString: string;
@@ -10,21 +11,24 @@ declare namespace IDataSource {
 }
 
 declare namespace IDataSet {
+    type Id = string | number;
     interface Item {
-        id: string;
-        groupId: string;
+        id: Id;
+        groupId: Id;
         name: string;
         type: string;
         method?: "GET" | "POST";
         api?: string;
-        dataSource?: string;
+        dataSourceId?: Id;
+        dataSource?: Id;
         sql?: string;
         json?: string;
+        createTime?: string;
     }
 
     interface IGroup {
-        id: string;
-        pid?: string;
+        id: Id;
+        pid?: Id;
         name: string;
         children?: IGroup[];
     }