diff --git a/packages/editor/src/components/header/navigation/Copy.vue b/packages/editor/src/components/header/navigation/Copy.vue
index 4c492cb..5410d85 100644
--- a/packages/editor/src/components/header/navigation/Copy.vue
+++ b/packages/editor/src/components/header/navigation/Copy.vue
@@ -18,7 +18,7 @@ import {onMounted, ref} from "vue";
 import {Copy} from "@vicons/carbon";
 import {NIcon, NTooltip} from "naive-ui";
 import {t} from "@/language";
-import {App,Hooks,AddObjectCommand} from "@astral3d/engine";
+import {App,Hooks,Loader,Utils,AddObjectCommand} from "@astral3d/engine";
 
 const disabled = ref(true);
 
@@ -36,6 +36,15 @@ function handleClone() {
   //避免复制相机或场景
   if (object === null || object.parent === null) return;
 
+  if (Utils.isHtmlPanelObject(object)) {
+    const _json = object.toJSON() as any;
+
+    Loader.objectLoader.parseAsync(_json).then(newObject3D => {
+      App.execute(new AddObjectCommand(newObject3D));
+    }).catch((e: Error) => window.$message?.error(e.message));
+    return;
+  }
+
   object = object.clone();
 
   App.execute(new AddObjectCommand(object));
diff --git a/packages/editor/src/components/tree/SceneTree.vue b/packages/editor/src/components/tree/SceneTree.vue
index ea72d9d..1de6119 100644
--- a/packages/editor/src/components/tree/SceneTree.vue
+++ b/packages/editor/src/components/tree/SceneTree.vue
@@ -19,7 +19,7 @@ import {
   ChoroplethMap
 } from '@vicons/carbon';
 import {t} from "@/language";
-import {App,Hooks, MoveObjectCommand, RemoveObjectCommand, AddObjectCommand} from "@astral3d/engine";
+import {App,Hooks,Loader,Utils, MoveObjectCommand, RemoveObjectCommand, AddObjectCommand} from "@astral3d/engine";
 import {escapeHTML, findSiblingsAndIndex} from "@/utils/common/utils";
 import {getMaterialName} from "@/utils/common/scenes";
 import EsContextmenu from "@/components/es/EsContextmenu.vue";
@@ -367,6 +367,15 @@ function handleContextmenuSelect(key: string) {
       if (parent !== null) App.execute(new RemoveObjectCommand(object));
       break;
     case "clone":
+      if (Utils.isHtmlPanelObject(object)) {
+        const _json = object.toJSON() as any;
+
+        Loader.objectLoader.parseAsync(_json).then(newObject3D => {
+          App.execute(new AddObjectCommand(newObject3D));
+        }).catch((e: Error) => window.$message?.error(e.message));
+        break;
+      }
+
       const _object = object.clone();
 
       App.execute(new AddObjectCommand(_object));
diff --git a/packages/editor/src/views/editor/layouts/sidebar/SidebarHtmlPanel.vue b/packages/editor/src/views/editor/layouts/sidebar/SidebarHtmlPanel.vue
index 2f1bcdc..3072e82 100644
--- a/packages/editor/src/views/editor/layouts/sidebar/SidebarHtmlPanel.vue
+++ b/packages/editor/src/views/editor/layouts/sidebar/SidebarHtmlPanel.vue
@@ -29,6 +29,22 @@ onBeforeUnmount(() => {
   Hooks.useRemoveSignal("objectSelected", updateUI);
 })
 
+function ensureHtmlPanelOptions(object: any) {
+  const options = object?.options || {};
+  const codes = Array.isArray(options.codes) ? options.codes : [];
+  const isSingleHtml = typeof options.isSingleHtml === 'boolean' ? options.isSingleHtml : true;
+  const isSprite = typeof options.isSprite === 'boolean' ? options.isSprite : !!object?.isHtmlSprite;
+
+  object.options = {
+    ...options,
+    codes,
+    isSingleHtml,
+    isSprite
+  };
+
+  return object.options;
+}
+
 function updateUI() {
   const object = App.selected;
   if(!object) return;
@@ -39,7 +55,8 @@ function updateUI() {
   }
 
   data.type = object.isHtmlPanel? 'panel' :'sprite';
-  data.codes = object.options.codes;
+  const options = ensureHtmlPanelOptions(object);
+  data.codes = options.codes;
 }
 
 function update(method: string){
@@ -55,6 +72,7 @@ function update(method: string){
 
       const _json = object.toJSON() as any;
       _json.object.type = data.type === 'panel' ? 'HtmlSprite' : 'HtmlPanel';
+      _json.object.options = _json.object.options || {};
       _json.object.options.isSprite = !_json.object.options.isSprite;
 
       Loader.objectLoader.parseAsync(_json).then(newObject3D => {
@@ -73,9 +91,11 @@ function update(method: string){
 
       _code.content = editorCode.code;
 
+      const options = ensureHtmlPanelOptions(object);
+
       const htmlPanelOption = {
-        isSprite: object.options.isSprite,
-        isSingleHtml:object.options.isSingleHtml,
+        isSprite: options.isSprite,
+        isSingleHtml: options.isSingleHtml,
         codes: data.codes
       }
 
@@ -135,10 +155,12 @@ function updateFileList(fList: UploadFileInfo[]) {
     isSprite: data.type ==='sprite',
     fileName: file.name
   }).then(htmlPlaneObj => {
-    object.options.codes = htmlPlaneObj.options.codes;
-    object.options.isSingleHtml = htmlPlaneObj.options.isSingleHtml;
+    const options = ensureHtmlPanelOptions(object);
 
-    data.codes = object.options.codes;
+    options.codes = htmlPlaneObj.options.codes;
+    options.isSingleHtml = htmlPlaneObj.options.isSingleHtml;
+
+    data.codes = options.codes;
 
     // Keep object identity (id/uuid) so scene tree and context menu references stay valid.
     while (object.element.firstChild) {
diff --git a/packages/editor/src/views/home/dataCenter/DataSet.vue b/packages/editor/src/views/home/dataCenter/DataSet.vue
index 82c17dc..b8a2a6b 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,204 +20,180 @@
 </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" remote />
-		</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" />
+        </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,
-		onChange: (page: number) => {
-			pagination.page = page;
-			getList();
-		},
-		onUpdatePageSize: (pageSize: number) => {
-			pagination.pageSize = pageSize;
-			pagination.page = 1;
-			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,
+    "on-update:page": (page: number) => {
+        pagination.page = page;
+        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