diff --git a/core/core-frontend/src/views/common/DeResourceCreateOpt.vue b/core/core-frontend/src/views/common/DeResourceCreateOpt.vue
index cc4060d174..ab8c196726 100644
--- a/core/core-frontend/src/views/common/DeResourceCreateOpt.vue
+++ b/core/core-frontend/src/views/common/DeResourceCreateOpt.vue
@@ -64,13 +64,13 @@
 <script setup lang="ts">
 import { showTemplateList } from '@/api/template'
 import { useI18n } from '@/hooks/web/useI18n'
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { imgUrlTrans } from '@/utils/imgUtils'
-import { watch } from 'vue/dist/vue'
 import { ElMessage } from 'element-plus-secondary'
 import { decompression } from '@/api/visualization/dataVisualization'
+import { deepCopy } from '@/utils/utils'
 const { t } = useI18n()
-const emits = defineEmits(['closeEditPanelDialog'])
+const emits = defineEmits(['finish'])
 const files = ref(null)
 const props = defineProps({
   editPanelOut: {
@@ -92,7 +92,8 @@ const state = reactive({
     snapshot: ''
   },
   dvCreateInfo: {
-    name:null,
+    pid: -1,
+    name: null,
     canvasStyleData: null,
     componentData: null,
     templateId: null,
@@ -119,15 +120,19 @@ const classBackground = computed(() => {
 watch(
   () => state.inputType,
   val => {
-    state.templateSelected = false
-    state.dvCreateInfo.name = null
-    state.dvCreateInfo.canvasStyleData = null
-    state.dvCreateInfo.componentData = null
-    state.importTemplateInfo.snapshot = null
-    state.dvCreateInfo.templateId = null
+    createInit()
   }
 )
 
+const createInit = () => {
+  state.templateSelected = false
+  state.dvCreateInfo.name = null
+  state.dvCreateInfo.canvasStyleData = null
+  state.dvCreateInfo.componentData = null
+  state.importTemplateInfo.snapshot = null
+  state.dvCreateInfo.templateId = null
+}
+
 const showCurrentTemplateInfo = data => {
   state.dvCreateInfo.templateId = data.id
   if (data.nodeType === 'folder') {
@@ -154,7 +159,7 @@ const getTree = () => {
 }
 
 const cancel = () => {
-  emits('closeEditPanelDialog')
+  emits('finish')
 }
 
 const save = () => {
@@ -168,10 +173,7 @@ const save = () => {
     return false
   }
 
-  if (
-    !state.dvCreateInfo.templateId &&
-    state.inputType === 'new_inner_template'
-  ) {
+  if (!state.dvCreateInfo.templateId && state.inputType === 'new_inner_template') {
     ElMessage.warning('chart.template_can_not_empty')
     return false
   }
@@ -180,7 +182,7 @@ const save = () => {
   decompression(state.dvCreateInfo)
     .then(response => {
       state.loading = false
-      emits('closeEditPanelDialog', response.data)
+      emits('finish', response.data)
     })
     .catch(() => {
       state.loading = false
@@ -205,11 +207,12 @@ const goFile = () => {
   files.value.files.click()
 }
 
-const close = () ={
- // do close
+const close = () => {
+  state.dialogShow = false
 }
-const optInit = () =>{
-
+const optInit = param => {
+  state.dialogShow = true
+  createInit()
 }
 
 defineExpose({
@@ -217,7 +220,7 @@ defineExpose({
 })
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .root-class {
   margin: 15px 0px 5px;
   text-align: center;
diff --git a/core/core-frontend/src/views/common/DeResourceTree.vue b/core/core-frontend/src/views/common/DeResourceTree.vue
index e0aea11ed1..ea816adf3f 100644
--- a/core/core-frontend/src/views/common/DeResourceTree.vue
+++ b/core/core-frontend/src/views/common/DeResourceTree.vue
@@ -14,6 +14,7 @@ const interactiveStore = interactiveStoreWithOut()
 import router from '@/router'
 import { useI18n } from '@/hooks/web/useI18n'
 import _ from 'lodash'
+import DeResourceCreateOpt from '@/views/common/DeResourceCreateOpt.vue'
 
 const dvMainStore = dvMainStoreWithOut()
 const { dvInfo } = storeToRefs(dvMainStore)
@@ -44,6 +45,7 @@ const filterText = ref(null)
 const expandedArray = ref([])
 const resourceListTree = ref()
 const resourceGroupOpt = ref()
+const resourceCreateOpt = ref()
 const returnMounted = ref(false)
 const state = reactive({
   resourceTree: [] as BusiTreeNode[],
@@ -241,9 +243,9 @@ const addOperation = (
     } else {
       window.open(baseUrl, '_blank')
     }
-  } else if(cmd === 'newFromTemplate') {
+  } else if (cmd === 'newFromTemplate') {
     // newFromTemplate
-
+    resourceCreateOpt.value.optInit()
   } else {
     resourceGroupOpt.value.optInit(nodeType, data || {}, cmd, parentSelect)
   }
@@ -262,6 +264,10 @@ const resourceOptFinish = () => {
   getTree()
 }
 
+const resourceCreateFinish = () => {
+  // do create
+}
+
 const getParentKeys = (tree, targetKey, parentKeys = []) => {
   for (const node of tree) {
     if (node.id === targetKey) {
@@ -402,6 +408,12 @@ defineExpose({
         @finish="resourceOptFinish"
         ref="resourceGroupOpt"
       />
+      <de-resource-create-opt
+        :cur-canvas-type="curCanvasType"
+        ref="resourceCreateOpt"
+        @finish="resourceCreateFinish"
+      >
+      </de-resource-create-opt>
     </el-scrollbar>
   </div>
 </template>