diff --git a/packages/editor/src/http/api/dataSetGroup.ts b/packages/editor/src/http/api/dataSetGroup.ts
new file mode 100644
index 0000000..c10aaf9
--- /dev/null
+++ b/packages/editor/src/http/api/dataSetGroup.ts
@@ -0,0 +1,23 @@
+import {request} from "@/http/request";
+
+export interface DataSetGroupPayload {
+    id?: IDataSet.IGroup["id"];
+    name: string;
+    pid: IDataSet.IGroup["pid"];
+}
+
+export function fetchDataSetGroupTree() {
+    return request.get<IDataSet.IGroup[]>(`/data-set-group/tree`);
+}
+
+export function fetchCreateDataSetGroup(data: DataSetGroupPayload) {
+    return request.post(`/data-set-group`, data);
+}
+
+export function fetchUpdateDataSetGroup(data: DataSetGroupPayload) {
+    return request.put(`/data-set-group`, data);
+}
+
+export function fetchDeleteDataSetGroup(id: IDataSet.IGroup["id"]) {
+    return request.delete(`/data-set-group/${id}`, {});
+}
diff --git a/packages/editor/src/http/api/dataSource.ts b/packages/editor/src/http/api/dataSource.ts
new file mode 100644
index 0000000..d91c4ac
--- /dev/null
+++ b/packages/editor/src/http/api/dataSource.ts
@@ -0,0 +1,30 @@
+import {request} from "@/http/request";
+
+export interface DataSourcePayload {
+    id?: IDataSource.Item["id"];
+    name: string;
+    type: string;
+    connectionString: string;
+    username?: string;
+    password?: string;
+}
+
+export function fetchDataSourceList() {
+    return request.get<IDataSource.Item[]>(`/data-source/list`);
+}
+
+export function fetchCreateDataSource(data: DataSourcePayload) {
+    return request.post<IDataSource.Item>(`/data-source`, data);
+}
+
+export function fetchUpdateDataSource(data: DataSourcePayload) {
+    return request.put<IDataSource.Item>(`/data-source`, data);
+}
+
+export function fetchDeleteDataSource(id: IDataSource.Item["id"]) {
+    return request.delete(`/data-source/${id}`, {});
+}
+
+export function fetchTestDataSource(data: DataSourcePayload) {
+    return request.post(`/data-source/test`, data);
+}
diff --git a/packages/editor/src/views/home/dataCenter/DataSet.vue b/packages/editor/src/views/home/dataCenter/DataSet.vue
index 928496e..2b5f522 100644
--- a/packages/editor/src/views/home/dataCenter/DataSet.vue
+++ b/packages/editor/src/views/home/dataCenter/DataSet.vue
@@ -21,7 +21,7 @@
 </n-split> -->
 
     <n-flex  class="h-full w-full">
-        <DataSetGroup class="w-50 min-w-300px max-w-500px" />
+        <DataSetGroup class="w-50 min-w-300px max-w-500px" @select="handleGroupSelect" />
 
         <n-divider vertical class="!h-full" />
 
@@ -34,9 +34,9 @@
                     </template>
                 </n-input>
 
-                <n-button type="primary" @click="showDataSetModal = true">{{ t('home.Add data set') }}</n-button>
+                <n-button type="primary" @click="handleAddDataSet">{{ t('home.Add data set') }}</n-button>
             </div>
-            <n-data-table ref="tableRef" :columns="dataSetColumns" :data="dataSets" :pagination="pagination" />
+            <n-data-table :columns="dataSetColumns" :data="dataSets" :pagination="pagination" :loading="tableLoading" />
         </div>
     </n-flex>
 
@@ -45,29 +45,32 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, h, onMounted, useTemplateRef } from 'vue';
+import { ref, reactive, h, onMounted } from 'vue';
 import { NButton, NPopconfirm } from 'naive-ui';
-import type { DataTableInst } from 'naive-ui';
 import { Search } from '@vicons/carbon';
 import { t } from "@/language";
+import { fetchDataSetDetail, fetchDataSetPage, fetchDeleteDataSet } from "@/http/api/dataSet";
 import DataSetModal from "./DataSetModal.vue";
 import DataSetGroup from "./DataSetGroup.vue";
 
-const tableRef = useTemplateRef<DataTableInst>("tableRef");
-const dataSets = ref<IDataSet.Item[]>([
-    {
-        id: '',
-        groupId:"1",
-        name: '323324234',
-        type: 'SQL'
-    }
-])
+const dataSets = ref<IDataSet.Item[]>([])
+const tableLoading = ref(false);
 const showDataSetModal = ref(false)
-const currentDataSet = reactive<IDataSet.Item>({
+const searchName = ref("");
+const selectedGroupId = ref<IDataSet.IGroup["id"] | null>(null);
+const defaultDataSet: IDataSet.Item = {
     id: '',
-    groupId:"1",
+    groupId: '',
     name: '',
-    type: 'SQL'
+    type: 'API',
+    method: 'GET',
+    api: '',
+    dataSource: '',
+    sql: '',
+    json: ''
+};
+const currentDataSet = reactive<IDataSet.Item>({
+    ...defaultDataSet
 })
 const dataSetColumns = [
     {
@@ -119,23 +122,75 @@ const dataSetColumns = [
     }
 ]
 // 分页配置
-const pagination = { pageSize: 10 }
+const pagination = reactive({
+    page: 1,
+    pageSize: 10,
+    pageCount: 1,
+    "on-update:page": (page: number) => {
+        pagination.page = page;
+        getList();
+    }
+})
 
-function getList() { }
-
-function handleSearch(searchText: string) {
-    tableRef.value?.filter({
-        name: [searchText]
-    })
+function resetCurrentDataSet(data?: Partial<IDataSet.Item>) {
+    Object.assign(currentDataSet, defaultDataSet, data || {});
 }
 
-function editDataSet(item) {
-    Object.assign(currentDataSet, item)
+async function getList() {
+    tableLoading.value = true;
+    const res = await fetchDataSetPage({
+        page: pagination.page,
+        pageSize: pagination.pageSize,
+        name: searchName.value || undefined,
+        groupId: selectedGroupId.value ?? undefined
+    });
+    tableLoading.value = false;
+    dataSets.value = res.data?.items || [];
+    pagination.pageCount = res.data?.pages || 1;
+    if (res.data?.current) {
+        pagination.page = res.data.current;
+    }
+}
+
+function handleSearch(searchText: string) {
+    searchName.value = searchText;
+    pagination.page = 1;
+    getList();
+}
+
+function handleGroupSelect(group: IDataSet.IGroup | null) {
+    selectedGroupId.value = group?.id ?? null;
+    pagination.page = 1;
+    getList();
+}
+
+function handleAddDataSet() {
+    resetCurrentDataSet({
+        groupId: selectedGroupId.value ?? ""
+    });
+    showDataSetModal.value = true;
+}
+
+async function editDataSet(item) {
+    const res = await fetchDataSetDetail(item.id);
+    if (res.error) {
+        return;
+    }
+    const detail = (res.data || item) as any;
+    resetCurrentDataSet({
+        ...detail,
+        dataSource: detail.dataSourceId || detail.dataSource || ""
+    });
     showDataSetModal.value = true
 }
 
-function deleteDataSet(item) {
-    dataSets.value = dataSets.value.filter(ds => ds.id !== item.id)
+async function deleteDataSet(item) {
+    const res = await fetchDeleteDataSet(item.id);
+    if (res.error) {
+        return;
+    }
+    window.$message?.success(t("prompt.Success to delete"));
+    getList();
 }
 
 onMounted(() => {
diff --git a/packages/editor/src/views/home/dataCenter/DataSetGroup.vue b/packages/editor/src/views/home/dataCenter/DataSetGroup.vue
index ff26e26..4bd926b 100644
--- a/packages/editor/src/views/home/dataCenter/DataSetGroup.vue
+++ b/packages/editor/src/views/home/dataCenter/DataSetGroup.vue
@@ -34,49 +34,20 @@ import { ref, reactive,onMounted } from "vue";
 import type { DropdownOption, TreeOption, TreeOverrideNodeClickBehaviorReturn } from 'naive-ui';
 import { Search, Add } from '@vicons/carbon';
 import { t } from "@/language";
+import { fetchDataSetGroupTree, fetchDeleteDataSetGroup } from "@/http/api/dataSetGroup";
 import DataSetGroupModal from "./DataSetGroupModal.vue";
 
-const pattern = ref("");
-const data: IDataSet.IGroup[] = [
-    {
-        name: '0',
-        id: '0',
-        children: [
-            {
-                name: '0-0',
-                id: '0-0',
-                children: [
-                    { name: '0-0-0', id: '0-0-0' },
-                    { name: '0-0-1', id: '0-0-1' }
-                ]
-            },
-            {
-                name: '0-1',
-                id: '0-1',
-                children: [
-                    { name: '0-1-0', id: '0-1-0' },
-                    { name: '0-1-1', id: '0-1-1' }
-                ]
-            }
-        ]
-    },
-    {
-        name: '1',
-        id: '1',
-        children: [
-            {
-                name: '1-0',
-                id: '1-0'
-            },
-            {
-                name: '1-1',
-                id: '1-1'
-            }
-        ]
-    }
-]
+const emits = defineEmits(["select"]);
 
-function getTreeData(){}
+const pattern = ref("");
+const data = ref<IDataSet.IGroup[]>([]);
+const selectedGroup = ref<IDataSet.IGroup | null>(null);
+const activeNode = ref<IDataSet.IGroup | null>(null);
+
+async function getTreeData(){
+    const res = await fetchDataSetGroupTree();
+    data.value = res.data || [];
+}
 
 // 子节点选中，含子节点则展开
 function handleOverride({ option }): TreeOverrideNodeClickBehaviorReturn {
@@ -96,7 +67,7 @@ const currentGroup = reactive<IDataSet.IGroup>({
 
 function handleAddGroup(){
     currentGroup.id = "";
-    currentGroup.pid = "";
+    currentGroup.pid = selectedGroup.value?.id ?? "";
     currentGroup.name = "";
 
     showGroupModal.value = true;
@@ -107,8 +78,7 @@ const showDropdown = ref(false);
 const options = ref<DropdownOption[]>([
     {
         label: t("home.Delete"),
-        key: 'delete',
-        disabled: true
+        key: 'delete'
     },
     {
         label: t("layout.sider.script.Edit"),
@@ -120,9 +90,15 @@ const y = ref(0)
 
 // 绑定节点属性以实现右键菜单
 function handleNodeProps({ option }: { option: TreeOption }) {
+    const group = option as IDataSet.IGroup;
     return {
-        onClick() { },
+        onClick() {
+            selectedGroup.value = group;
+            emits("select", group);
+        },
         onContextmenu(e: MouseEvent): void {
+            activeNode.value = group;
+            selectedGroup.value = group;
             showDropdown.value = true;
             x.value = e.clientX;
             y.value = e.clientY;
@@ -132,8 +108,34 @@ function handleNodeProps({ option }: { option: TreeOption }) {
     }
 }
 
-function handleDropdownSelect() {
+async function handleDropdownSelect(key: string) {
     showDropdown.value = false;
+    if (!activeNode.value) {
+        return;
+    }
+
+    if (key === "edit") {
+        Object.assign(currentGroup, {
+            id: activeNode.value.id,
+            pid: activeNode.value.pid ?? "",
+            name: activeNode.value.name
+        });
+        showGroupModal.value = true;
+        return;
+    }
+
+    if (key === "delete") {
+        const res = await fetchDeleteDataSetGroup(activeNode.value.id);
+        if (res.error) {
+            return;
+        }
+        window.$message?.success(t("prompt.Success to delete"));
+        if (selectedGroup.value?.id === activeNode.value.id) {
+            selectedGroup.value = null;
+            emits("select", null);
+        }
+        getTreeData();
+    }
 }
 
 function handleDropdownClickoutside() {
diff --git a/packages/editor/src/views/home/dataCenter/DataSetGroupModal.vue b/packages/editor/src/views/home/dataCenter/DataSetGroupModal.vue
index 309effe..c54d801 100644
--- a/packages/editor/src/views/home/dataCenter/DataSetGroupModal.vue
+++ b/packages/editor/src/views/home/dataCenter/DataSetGroupModal.vue
@@ -1,18 +1,18 @@
 <template>
     <n-modal :show="show" @mask-click="handleClose">
         <n-card class="w-120 max-w-600px" :title="t('home.Data set group config')">
-            <n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="auto">
+            <n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="auto" :disabled="submitLoading">
                 <n-form-item :label="t('home.Parent group')">
                     <n-cascader v-model:value="model.pid" expand-trigger="hover" :options="treeData"
-                        check-strategy="child" show-path filterable clearable label-field="name" value-field="id" />
+                        check-strategy="all" show-path filterable clearable label-field="name" value-field="id" />
                 </n-form-item>
                 <n-form-item :label="t('home.Group name')" path="name">
                     <n-input v-model:value="model.name" />
                 </n-form-item>
 
                 <div class="flex justify-end mt-4">
-                    <n-button @click="handleClose" class="mr-2">{{ t("other.Cancel") }}</n-button>
-                    <n-button type="primary" @click="saveDataSet">{{ t("other.Ok") }}</n-button>
+                    <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-form>
         </n-card>
@@ -20,9 +20,10 @@
 </template>
 
 <script lang="ts" setup>
-import { useTemplateRef,computed } from "vue";
+import { useTemplateRef, ref } from "vue";
 import type { FormInst } from 'naive-ui'
 import { t } from "@/language";
+import { DataSetGroupPayload, fetchCreateDataSetGroup, fetchUpdateDataSetGroup } from "@/http/api/dataSetGroup";
 
 const props = withDefaults(defineProps<{
     show: boolean,
@@ -43,6 +44,7 @@ const formRef = useTemplateRef<FormInst>("formRef");
 const rules = {
     name: { required: true, message: t("prompt.Please enter a grouping name for the dataset"), trigger: 'blur' }
 };
+const submitLoading = ref(false);
 
 function handleClose() {
     emits("update:show", false);
@@ -51,15 +53,21 @@ function handleClose() {
 function saveDataSet(e: MouseEvent) {
     e.preventDefault()
 
-    formRef.value?.validate((errors) => {
+    formRef.value?.validate(async (errors) => {
         if (!errors) {
-            if (!props.model.id) {
-                // 新增
-
-            } else {
-                // 更新
+            const payload: DataSetGroupPayload = {
+                id: props.model.id || undefined,
+                pid: props.model.pid || "",
+                name: props.model.name?.trim() || ""
+            };
 
+            submitLoading.value = true;
+            const res = props.model.id ? await fetchUpdateDataSetGroup(payload) : await fetchCreateDataSetGroup(payload);
+            submitLoading.value = false;
+            if (res.error) {
+                return;
             }
+            window.$message?.success(props.model.id ? t("prompt.Success to update") : t("prompt.Saved successfully!"));
 
             // 刷新父页面表格
             emits("refresh");
diff --git a/packages/editor/src/views/home/dataCenter/DataSetModal.vue b/packages/editor/src/views/home/dataCenter/DataSetModal.vue
index 31fe7d0..6875b04 100644
--- a/packages/editor/src/views/home/dataCenter/DataSetModal.vue
+++ b/packages/editor/src/views/home/dataCenter/DataSetModal.vue
@@ -1,14 +1,14 @@
 <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">
+            <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="child" show-path filterable clearable label-field="name" value-field="id" />
+                            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" />
@@ -51,8 +51,8 @@
 
                     <n-gi :span="24">
                         <div class="flex justify-end mt-4">
-                            <n-button @click="handleClose" class="mr-2">{{ t("other.Cancel") }}</n-button>
-                            <n-button type="primary" @click="saveDataSet">{{ t("other.Ok") }}</n-button>
+                            <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>
@@ -62,9 +62,12 @@
 </template>
 
 <script lang="ts" setup>
-import { useTemplateRef } from "vue";
+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";
 
@@ -86,13 +89,52 @@ const formRef = useTemplateRef<FormInst>("formRef");
 const rules = {
     name: { required: true, message: t("prompt.Please enter a name for the dataset"), trigger: 'blur' }
 };
-const groupOptions = [];
+const groupOptions = ref<IDataSet.IGroup[]>([]);
 const setTypes = [
     { label: 'API', value: 'API' },
     { label: 'SQL', value: 'SQL' },
     { label: 'JSON', value: 'JSON' },
 ];
-const dataSourceOptions = [];
+const dataSourceOptions = ref<{ label: string; value: IDataSource.Item["id"] }[]>([]);
+const submitLoading = ref(false);
+
+watch(() => props.show, (show) => {
+    if (!show) {
+        return;
+    }
+    loadOptions();
+});
+
+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 = "";
+    }
+});
+
+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
+    }));
+}
 
 function handleClose() {
     emits("update:show", false);
@@ -101,16 +143,33 @@ function handleClose() {
 function saveDataSet(e: MouseEvent) {
     e.preventDefault()
 
-    formRef.value?.validate((errors) => {
+    formRef.value?.validate(async (errors) => {
         if (!errors) {
-            if (!props.model.id) {
-                // 新增
-
-            } else {
-                // 更新
+            submitLoading.value = true;
+            const payload: DataSetPayload = {
+                id: props.model.id || undefined,
+                name: props.model.name?.trim() || "",
+                groupId: props.model.groupId,
+                type: props.model.type
+            };
 
+            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;
             }
 
+            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!"));
+
             // 刷新父页面表格
             emits("refresh");
 
diff --git a/packages/editor/src/views/home/dataCenter/DataSource.vue b/packages/editor/src/views/home/dataCenter/DataSource.vue
index 866bc0a..37eb728 100644
--- a/packages/editor/src/views/home/dataCenter/DataSource.vue
+++ b/packages/editor/src/views/home/dataCenter/DataSource.vue
@@ -7,9 +7,9 @@
             </template>
         </n-input>
 
-        <n-button type="primary" @click="showDataSourceModal = true">{{ t('home.Add data source') }}</n-button>
+        <n-button type="primary" @click="handleAddDataSource">{{ t('home.Add data source') }}</n-button>
     </div>
-    <n-data-table ref="tableRef" :columns="dataSourceColumns" :data="dataSources" :pagination="pagination" striped />
+    <n-data-table ref="tableRef" :columns="dataSourceColumns" :data="dataSources" :pagination="pagination" :loading="tableLoading" striped />
 
     <!-- 数据源模态框 -->
     <DataSourceModal v-model:show="showDataSourceModal" :model="currentDataSource" @refresh="getList" />
@@ -21,18 +21,23 @@ import { NButton, NPopconfirm } from 'naive-ui';
 import type { DataTableInst } from 'naive-ui';
 import { Search } from '@vicons/carbon';
 import { t } from "@/language";
+import { fetchDataSourceList, fetchDeleteDataSource } from "@/http/api/dataSource";
 import DataSourceModal from "./DataSourceModal.vue";
 
 const tableRef = useTemplateRef<DataTableInst>("tableRef");
 const dataSources = ref<IDataSource.Item[]>([])
 const showDataSourceModal = ref(false)
-const currentDataSource = reactive({
+const tableLoading = ref(false);
+const defaultDataSource = {
     id: '',
     name: '',
     type: 'MySQL',
     connectionString: '',
     username: "",
     password: ""
+}
+const currentDataSource = reactive({
+    ...defaultDataSource
 })
 const dataSourceColumns = [
     {
@@ -106,7 +111,21 @@ const dataSourceColumns = [
 // 分页配置
 const pagination = { pageSize: 10 }
 
-function getList() { }
+async function getList() {
+    tableLoading.value = true;
+    const res = await fetchDataSourceList();
+    tableLoading.value = false;
+    dataSources.value = res.data || [];
+}
+
+function resetCurrentDataSource(data?: Partial<IDataSource.Item>) {
+    Object.assign(currentDataSource, defaultDataSource, data || {});
+}
+
+function handleAddDataSource() {
+    resetCurrentDataSource();
+    showDataSourceModal.value = true;
+}
 
 function handleSearch(searchText: string) {
     tableRef.value?.filter({
@@ -115,12 +134,17 @@ function handleSearch(searchText: string) {
 }
 
 function editDataSource(item) {
-    Object.assign(currentDataSource, item)
+    resetCurrentDataSource(item)
     showDataSourceModal.value = true
 }
 
-function deleteDataSource(item) {
-    dataSources.value = dataSources.value.filter(ds => ds.id !== item.id)
+async function deleteDataSource(item) {
+    const res = await fetchDeleteDataSource(item.id);
+    if (res.error) {
+        return;
+    }
+    window.$message?.success(t("prompt.Success to delete"));
+    getList();
 }
 
 onMounted(() => {
diff --git a/packages/editor/src/views/home/dataCenter/DataSourceModal.vue b/packages/editor/src/views/home/dataCenter/DataSourceModal.vue
index a078f48..0f8d739 100644
--- a/packages/editor/src/views/home/dataCenter/DataSourceModal.vue
+++ b/packages/editor/src/views/home/dataCenter/DataSourceModal.vue
@@ -1,7 +1,7 @@
 <template>
   <n-modal :show="show" @mask-click="handleClose">
     <n-card class="w-100 max-w-600px" :title="t('home.Data source config')">
-      <n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="auto">
+      <n-form :model="model" :rules="rules" ref="formRef" label-placement="left" label-width="auto" :disabled="testLinkLoading || submitLoading">
         <n-form-item :label="t('home.Data source name')" path="name">
           <n-input v-model:value="model.name" :disabled="testLinkLoading" />
         </n-form-item>
@@ -22,8 +22,8 @@
           <n-button type="primary" :loading="testLinkLoading" @click="handleTestLink">{{ t("home.Test the connection") }}</n-button>
 
           <div>
-            <n-button @click="handleClose" class="mr-2">{{ t("other.Cancel") }}</n-button>
-            <n-button type="primary" @click="saveDataSource">{{ t("other.Ok") }}</n-button>
+            <n-button :disabled="testLinkLoading || submitLoading" @click="handleClose" class="mr-2">{{ t("other.Cancel") }}</n-button>
+            <n-button type="primary" :loading="submitLoading" @click="saveDataSource">{{ t("other.Ok") }}</n-button>
           </div>
 
         </div>
@@ -33,9 +33,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, useTemplateRef } from "vue";
+import { ref, computed, useTemplateRef } from "vue";
 import type { FormInst } from 'naive-ui'
 import { t } from "@/language";
+import { DataSourcePayload, fetchCreateDataSource, fetchTestDataSource, fetchUpdateDataSource } from "@/http/api/dataSource";
 
 const props = withDefaults(defineProps<{
   show: boolean,
@@ -65,6 +66,8 @@ const dbTypes = [
   { label: 'Oracle', value: 'Oracle' }
 ]
 const testLinkLoading = ref(false);
+const submitLoading = ref(false);
+const isEdit = computed(() => Boolean(props.model.id));
 
 function handleClose() {
   emits("update:show", false);
@@ -72,25 +75,52 @@ function handleClose() {
 
 function handleTestLink(e: MouseEvent) {
   e.preventDefault()
-  formRef.value?.validate((errors) => {
+  formRef.value?.validate(async (errors) => {
     if (!errors) {
       testLinkLoading.value = true;
+      const res = await fetchTestDataSource(buildPayload(false));
+      testLinkLoading.value = false;
+      if (res.error) {
+        return;
+      }
+      window.$message?.success(t("prompt.Operation successful"));
     }
   })
 }
 
+function buildPayload(includeId: boolean): DataSourcePayload {
+  const payload: DataSourcePayload = {
+    name: props.model.name?.trim() || "",
+    type: props.model.type,
+    connectionString: props.model.connectionString?.trim() || ""
+  };
+
+  if (props.model.username) {
+    payload.username = props.model.username;
+  }
+  if (props.model.password) {
+    payload.password = props.model.password;
+  }
+  if (includeId && props.model.id) {
+    payload.id = props.model.id;
+  }
+
+  return payload;
+}
+
 function saveDataSource(e: MouseEvent) {
   e.preventDefault()
 
-  formRef.value?.validate((errors) => {
+  formRef.value?.validate(async (errors) => {
     if (!errors) {
-      if (!props.model.id) {
-        // 新增
-
-      } else {
-        // 更新
-
+      submitLoading.value = true;
+      const payload = buildPayload(true);
+      const res = isEdit.value ? await fetchUpdateDataSource(payload) : await fetchCreateDataSource(payload);
+      submitLoading.value = false;
+      if (res.error) {
+        return;
       }
+      window.$message?.success(isEdit.value ? t("prompt.Success to update") : t("prompt.Saved successfully!"));
 
       // 刷新父页面表格
       emits("refresh");