diff --git a/packages/editor/src/views/home/dataCenter/DataSet.vue b/packages/editor/src/views/home/dataCenter/DataSet.vue
index b8a2a6b..82c17dc 100644
--- a/packages/editor/src/views/home/dataCenter/DataSet.vue
+++ b/packages/editor/src/views/home/dataCenter/DataSet.vue
@@ -1,5 +1,5 @@
 <template>
-    <!-- <n-split direction="horizontal" :default-size="0.2" :max="0.8" :min="0.2" style="height: 100%" class="h-full">
+	<!-- <n-split direction="horizontal" :default-size="0.2" :max="0.8" :min="0.2" style="height: 100%" class="h-full">
         <template #1>
             <DataSetGroup />
         </template>
@@ -20,180 +20,204 @@
 </template>
 </n-split> -->
 
-    <n-flex  class="h-full w-full">
-        <DataSetGroup class="w-50 min-w-300px max-w-500px" @select="handleGroupSelect" />
+	<n-flex class="h-full w-full">
+		<DataSetGroup class="w-50 min-w-300px max-w-500px" @select="handleGroupSelect" />
 
-        <n-divider vertical class="!h-full" />
+		<n-divider vertical class="!h-full" />
 
-        <div class="flex-1">
-            <div class="flex justify-between mb-3">
-                <n-input :placeholder="t('prompt.Please enter a name for the dataset')" class="max-w-64" show-count
-                    :maxlength="25" @update:value="handleSearch">
-                    <template #prefix>
-                        <n-icon :component="Search" />
-                    </template>
-                </n-input>
+		<div class="flex-1">
+			<div class="flex justify-between mb-3">
+				<n-input
+					:placeholder="t('prompt.Please enter a name for the dataset')"
+					class="max-w-64"
+					show-count
+					:maxlength="25"
+					@update:value="handleSearch"
+				>
+					<template #prefix>
+						<n-icon :component="Search" />
+					</template>
+				</n-input>
 
-                <n-button type="primary" @click="handleAddDataSet">{{ t('home.Add data set') }}</n-button>
-            </div>
-            <n-data-table :columns="dataSetColumns" :data="dataSets" :pagination="pagination" :loading="tableLoading" />
-        </div>
-    </n-flex>
+				<n-button type="primary" @click="handleAddDataSet">{{ t("home.Add data set") }}</n-button>
+			</div>
+			<n-data-table :columns="dataSetColumns" :data="dataSets" :pagination="pagination" :loading="tableLoading" remote />
+		</div>
+	</n-flex>
 
-    <!-- 数据集模态框 -->
-    <DataSetModal v-model:show="showDataSetModal" :model="currentDataSet" @refresh="getList" />
+	<!-- 数据集模态框 -->
+	<DataSetModal v-model:show="showDataSetModal" :model="currentDataSet" @refresh="getList" />
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, h, onMounted } from 'vue';
-import { NButton, NPopconfirm } 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";
+	import { ref, reactive, h, onMounted } from "vue";
+	import { NButton, NPopconfirm } 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 dataSets = ref<IDataSet.Item[]>([])
-const tableLoading = ref(false);
-const showDataSetModal = ref(false)
-const searchName = ref("");
-const selectedGroupId = ref<IDataSet.IGroup["id"] | null>(null);
-const defaultDataSet: IDataSet.Item = {
-    id: '',
-    groupId: '',
-    name: '',
-    type: 'API',
-    method: 'GET',
-    api: '',
-    dataSourceId: '',
-    sql: '',
-    json: ''
-};
-const currentDataSet = reactive<IDataSet.Item>({
-    ...defaultDataSet
-})
-const dataSetColumns = [
-    {
-        title: t("home.Data set name"),
-        key: 'name',
-        defaultSortOrder: 'ascend',
-        sorter: 'default',
-        resizable: true,
-        minWidth: 120,
-        maxWidth: 400,
-        ellipsis: {
-            tooltip: true
-        },
-        filter(value, row) {
-            return ~row.name.indexOf(value);
-        }
-    },
-    {
-        title: t("home.Data set type"),
-        key: 'type',
-        defaultSortOrder: 'ascend',
-        sorter: 'default',
-        resizable: true,
-        width: 180,
-        minWidth: 120,
-        maxWidth: 260
-    },
-    {
-        title: t("other.Action"),
-        key: 'actions',
-        resizable: true,
-        minWidth: 120,
-        maxWidth: 300,
-        render: (row) => h('div', [
-            h(NButton, {
-                size: 'small',
-                onClick: () => editDataSet(row),
-                style: { marginRight: '0.4rem' }
-            }, t("layout.sider.script.Edit")),
-            h(NPopconfirm, {
-                onPositiveClick: () => deleteDataSet(row)
-            }, {
-                default: () => t("prompt.Are you sure you want to delete it?"),
-                trigger: () => h(NButton, {
-                    size: 'small'
-                }, t("home.Delete"))
-            })
-        ])
-    }
-]
-// 分页配置
-const pagination = reactive({
-    page: 1,
-    pageSize: 10,
-    pageCount: 1,
-    "on-update:page": (page: number) => {
-        pagination.page = page;
-        getList();
-    }
-})
+	const dataSets = ref<IDataSet.Item[]>([]);
+	const tableLoading = ref(false);
+	const showDataSetModal = ref(false);
+	const searchName = ref("");
+	const selectedGroupId = ref<IDataSet.IGroup["id"] | null>(null);
+	const defaultDataSet: IDataSet.Item = {
+		id: "",
+		groupId: "",
+		name: "",
+		type: "API",
+		method: "GET",
+		api: "",
+		dataSourceId: "",
+		sql: "",
+		json: "",
+	};
+	const currentDataSet = reactive<IDataSet.Item>({
+		...defaultDataSet,
+	});
+	const dataSetColumns = [
+		{
+			title: t("home.Data set name"),
+			key: "name",
+			defaultSortOrder: "ascend",
+			sorter: "default",
+			resizable: true,
+			minWidth: 120,
+			maxWidth: 400,
+			ellipsis: {
+				tooltip: true,
+			},
+			filter(value, row) {
+				return ~row.name.indexOf(value);
+			},
+		},
+		{
+			title: t("home.Data set type"),
+			key: "type",
+			defaultSortOrder: "ascend",
+			sorter: "default",
+			resizable: true,
+			width: 180,
+			minWidth: 120,
+			maxWidth: 260,
+		},
+		{
+			title: t("other.Action"),
+			key: "actions",
+			resizable: true,
+			minWidth: 120,
+			maxWidth: 300,
+			render: row =>
+				h("div", [
+					h(
+						NButton,
+						{
+							size: "small",
+							onClick: () => editDataSet(row),
+							style: { marginRight: "0.4rem" },
+						},
+						t("layout.sider.script.Edit")
+					),
+					h(
+						NPopconfirm,
+						{
+							onPositiveClick: () => deleteDataSet(row),
+						},
+						{
+							default: () => t("prompt.Are you sure you want to delete it?"),
+							trigger: () =>
+								h(
+									NButton,
+									{
+										size: "small",
+									},
+									t("home.Delete")
+								),
+						}
+					),
+				]),
+		},
+	];
+	// 分页配置
+	const pagination = reactive({
+		page: 1,
+		pageSize: 10,
+		pageCount: 1,
+		onChange: (page: number) => {
+			pagination.page = page;
+			getList();
+		},
+		onUpdatePageSize: (pageSize: number) => {
+			pagination.pageSize = pageSize;
+			pagination.page = 1;
+			getList();
+		},
+	});
 
-function resetCurrentDataSet(data?: Partial<IDataSet.Item>) {
-    Object.assign(currentDataSet, defaultDataSet, data || {});
-}
+	function resetCurrentDataSet(data?: Partial<IDataSet.Item>) {
+		Object.assign(currentDataSet, defaultDataSet, data || {});
+	}
 
-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;
-    }
-}
+	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 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 handleGroupSelect(group: IDataSet.IGroup | null) {
+		selectedGroupId.value = group?.id ?? null;
+		pagination.page = 1;
+		getList();
+	}
 
-function handleAddDataSet() {
-    resetCurrentDataSet({
-        groupId: selectedGroupId.value ?? ""
-    });
-    showDataSetModal.value = true;
-}
+	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,
-        dataSourceId: detail.dataSourceId || detail.dataSource ? String(detail.dataSourceId || detail.dataSource) : ""
-    });
-    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,
+			dataSourceId: detail.dataSourceId || detail.dataSource ? String(detail.dataSourceId || detail.dataSource) : "",
+		});
+		showDataSetModal.value = true;
+	}
 
-async function deleteDataSet(item) {
-    const res = await fetchDeleteDataSet(item.id);
-    if (res.error) {
-        return;
-    }
-    window.$message?.success(t("prompt.Success to delete"));
-    getList();
-}
+	async function deleteDataSet(item) {
+		const res = await fetchDeleteDataSet(item.id);
+		if (res.error) {
+			return;
+		}
+		window.$message?.success(t("prompt.Success to delete"));
+		getList();
+	}
 
-onMounted(() => {
-    getList();
-})
+	onMounted(() => {
+		getList();
+	});
 </script>
\ No newline at end of file