From cc525bd69b4e08f13111099cd7bc821bb9bd37a9 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 6 Nov 2023 18:08:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=B3=BB=E7=BB=9F=E6=A8=A1=E7=89=88?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/core-backend/pom.xml                     |  15 +-
 .../io/dataease/MybatisPlusGenerator.java     |   6 +-
 .../main/resources/application-standalone.yml |   2 +-
 core/core-frontend/src/api/template.ts        |  42 ++
 .../src/api/templateMarket/index.js           |  14 +
 .../template/component/TemplateImport.vue     | 209 +++++++++
 .../views/template/component/TemplateItem.vue | 140 ++++++
 .../views/template/component/TemplateList.vue | 247 +++++++++++
 .../src/views/template/index.vue              | 414 +++++++++++++++++-
 de-xpack                                      |   2 +-
 .../api/template/TemplateManageApi.java       |  13 +
 .../api/template/TemplateMarketApi.java       |  23 +
 .../api/template/dto/TemplateManageDTO.java   |  15 +
 .../api/template/dto/TemplateMarketDTO.java   |  21 +
 .../request/TemplateMarketSearchRequest.java  |   7 +
 .../template/response/MarketBaseResponse.java |  24 +
 .../api/template/vo/MarketCategoryVO.java     |  15 +
 .../api/template/vo/MarketMetasVO.java        |  13 +
 .../api/template/vo/TemplateCategoryVO.java   |  19 +
 19 files changed, 1228 insertions(+), 13 deletions(-)
 create mode 100644 core/core-frontend/src/api/template.ts
 create mode 100644 core/core-frontend/src/api/templateMarket/index.js
 create mode 100644 core/core-frontend/src/views/template/component/TemplateImport.vue
 create mode 100644 core/core-frontend/src/views/template/component/TemplateItem.vue
 create mode 100644 core/core-frontend/src/views/template/component/TemplateList.vue
 create mode 100644 sdk/api/api-base/src/main/java/io/dataease/api/template/TemplateManageApi.java
 create mode 100644 sdk/api/api-base/src/main/java/io/dataease/api/template/TemplateMarketApi.java
 create mode 100644 sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateManageDTO.java
 create mode 100644 sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateMarketDTO.java
 create mode 100644 sdk/api/api-base/src/main/java/io/dataease/api/template/request/TemplateMarketSearchRequest.java
 create mode 100644 sdk/api/api-base/src/main/java/io/dataease/api/template/response/MarketBaseResponse.java
 create mode 100644 sdk/api/api-base/src/main/java/io/dataease/api/template/vo/MarketCategoryVO.java
 create mode 100644 sdk/api/api-base/src/main/java/io/dataease/api/template/vo/MarketMetasVO.java
 create mode 100644 sdk/api/api-base/src/main/java/io/dataease/api/template/vo/TemplateCategoryVO.java

diff --git a/core/core-backend/pom.xml b/core/core-backend/pom.xml
index 202a279ec8..5306db20ef 100644
--- a/core/core-backend/pom.xml
+++ b/core/core-backend/pom.xml
@@ -92,7 +92,20 @@
             </properties>
 
             <dependencies>
-
+                <dependency>
+                    <groupId>com.h2database</groupId>
+                    <artifactId>h2</artifactId>
+                </dependency>
+                <dependency>
+                    <groupId>io.dataease</groupId>
+                    <artifactId>xpack-permissions</artifactId>
+                    <version>${project.version}</version>
+                </dependency>
+                <dependency>
+                    <groupId>io.dataease</groupId>
+                    <artifactId>xpack-base</artifactId>
+                    <version>${project.version}</version>
+                </dependency>
             </dependencies>
 
             <build>
diff --git a/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java b/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java
index 075e94a0bd..3c217a76b0 100644
--- a/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java
+++ b/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java
@@ -14,18 +14,18 @@ public class MybatisPlusGenerator {
      * 第一 我嫌麻烦
      * 第二 后面配置会放到nacos读起来更麻烦了
      */
-    private static final String url = "jdbc:mysql://127.0.0.1:3306/de_standalone?autoReconnect=false&useUnicode=true&characterEncoding=UTF-8&characterSetResults=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false";
+    private static final String url = "jdbc:mysql://39.98.78.97:3306/dataease?autoReconnect=false&useUnicode=true&characterEncoding=UTF-8&characterSetResults=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false";
     private static final String username = "root";
     private static final String password = "Password123@mysql";
 
     /**
      * 业务模块例如datasource,dataset,panel等
      */
-    private static final String busi = "system";
+    private static final String busi = "template";
     /**
      * 这是要生成代码的表名称
      */
-    private static final String TABLE_NAME = "core_sys_setting";
+    private static final String TABLE_NAME = "visualization_template";
 
     /**
      * 下面两个配置基本上不用动
diff --git a/core/core-backend/src/main/resources/application-standalone.yml b/core/core-backend/src/main/resources/application-standalone.yml
index a1f9149413..19ab8a6e2e 100644
--- a/core/core-backend/src/main/resources/application-standalone.yml
+++ b/core/core-backend/src/main/resources/application-standalone.yml
@@ -1,6 +1,6 @@
 spring:
   datasource:
-    url: jdbc:mysql://127.0.0.1:3306/de_standalone?autoReconnect=false&useUnicode=true&characterEncoding=UTF-8&characterSetResults=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true
+    url: jdbc:mysql://39.98.78.97:3306/dataease?autoReconnect=false&useUnicode=true&characterEncoding=UTF-8&characterSetResults=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false
     username: root
     password: Password123@mysql
   messages:
diff --git a/core/core-frontend/src/api/template.ts b/core/core-frontend/src/api/template.ts
new file mode 100644
index 0000000000..fdce516ca0
--- /dev/null
+++ b/core/core-frontend/src/api/template.ts
@@ -0,0 +1,42 @@
+import request from '@/config/axios'
+
+export function save(data) {
+  return request.post({
+    url: '/template/save',
+    data: data,
+    loading: true
+  })
+}
+export function templateDelete(id) {
+  return request.post({
+    url: '/template/delete/' + id
+  })
+}
+
+export function showTemplateList(data) {
+  return request.post({
+    url: '/template/templateList',
+    data: data
+  })
+}
+
+export function findOne(id) {
+  return request.get({
+    url: '/template/findOne/' + id
+  })
+}
+
+export function find(data) {
+  return request.post({
+    url: '/template/find',
+    data: data,
+    loading: true
+  })
+}
+
+export function nameCheck(data) {
+  return request.post({
+    url: '/template/nameCheck',
+    data: data
+  })
+}
diff --git a/core/core-frontend/src/api/templateMarket/index.js b/core/core-frontend/src/api/templateMarket/index.js
new file mode 100644
index 0000000000..81d500c4fb
--- /dev/null
+++ b/core/core-frontend/src/api/templateMarket/index.js
@@ -0,0 +1,14 @@
+import request from '@/config/axios'
+
+export function searchMarket(data) {
+  return request.post({
+    url: '/template/market/search',
+    data
+  })
+}
+
+export function getCategories() {
+  return request.post({
+    url: '/template/market/categories'
+  })
+}
diff --git a/core/core-frontend/src/views/template/component/TemplateImport.vue b/core/core-frontend/src/views/template/component/TemplateImport.vue
new file mode 100644
index 0000000000..607eaab0f9
--- /dev/null
+++ b/core/core-frontend/src/views/template/component/TemplateImport.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="template-import">
+    <el-form
+      ref="templateImportForm"
+      class="de-form-item"
+      :model="state.templateInfo"
+      :rules="state.templateInfoRules"
+    >
+      <el-form-item :label="t('system_parameter_setting.template_name')" prop="name">
+        <div class="flex-template">
+          <el-input v-model="state.templateInfo.name" clearable size="small" />
+          <el-button style="margin-left: 10px" class="el-icon-upload2" secondary @click="goFile">{{
+            t('panel.upload_template')
+          }}</el-button>
+          <input
+            id="input"
+            ref="filesRef"
+            type="file"
+            accept=".DET"
+            hidden
+            @change="handleFileChange"
+          />
+        </div>
+      </el-form-item>
+    </el-form>
+    <el-row class="preview" :style="classBackground" />
+    <el-row class="de-root-class">
+      <deBtn secondary @click="cancel()">{{ t('commons.cancel') }}</deBtn>
+      <deBtn type="primary" @click="saveTemplate()">{{ t('commons.confirm') }}</deBtn>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { save, nameCheck, find } from '@/api/template'
+import { computed, onMounted, reactive, ref } from 'vue'
+import { imgUrlTrans } from '@/utils/imgUtils'
+import { ElMessage } from 'element-plus-secondary'
+import { useI18n } from '@/hooks/web/useI18n'
+const emits = defineEmits(['closeEditTemplateDialog', 'refresh'])
+const { t } = useI18n()
+const filesRef = ref(null)
+const props = defineProps({
+  pid: {
+    type: String,
+    required: true
+  }
+})
+
+const state = reactive({
+  nameList: [],
+  importTemplateInfo: {
+    snapshot: ''
+  },
+  templateInfoRules: {
+    name: [
+      {
+        required: true,
+        message: t('commons.input_content'),
+        trigger: 'change'
+      }
+    ]
+  },
+  recover: false,
+  templateInfo: {
+    level: '1',
+    pid: props.pid,
+    name: '',
+    templateStyle: null,
+    templateData: null,
+    dynamicData: null,
+    staticResource: null,
+    snapshot: ''
+  }
+})
+
+const classBackground = computed(() => {
+  if (state.importTemplateInfo.snapshot) {
+    return {
+      background: `url(${imgUrlTrans(state.importTemplateInfo.snapshot)}) no-repeat`
+    }
+  } else {
+    return {}
+  }
+})
+
+const showCurrentTemplate = pid => {
+  find({ pid }).then(response => {
+    state.nameList = response.data
+  })
+}
+const cancel = () => {
+  emits('closeEditTemplateDialog')
+}
+
+const saveTemplate = () => {
+  if (!state.templateInfo.name) {
+    ElMessage.warning(t('chart.name_can_not_empty'))
+    return false
+  }
+  if (!state.templateInfo.templateData) {
+    ElMessage.warning(t('chart.template_can_not_empty'))
+    return false
+  }
+  const nameCheckRequest = {
+    pid: state.templateInfo.pid,
+    name: state.templateInfo.name,
+    optType: 'insert'
+  }
+  nameCheck(nameCheckRequest).then(response => {
+    if (response.data.indexOf('exist') > -1) {
+      const options = {
+        title: 'commons.prompt',
+        content: 'system_parameter_setting.to_overwrite_them',
+        type: 'primary',
+        cb: () =>
+          save(state.templateInfo).then(response => {
+            ElMessage.success(t('system_parameter_setting.import_succeeded'))
+            emits('refresh')
+            emits('closeEditTemplateDialog')
+          }),
+        confirmButtonText: t('template.override')
+      }
+      handlerConfirm(options)
+    } else {
+      save(state.templateInfo).then(response => {
+        ElMessage.success(t('system_parameter_setting.import_succeeded'))
+        emits('refresh')
+        emits('closeEditTemplateDialog')
+      })
+    }
+  })
+}
+
+const handlerConfirm = option => {
+  // do handlerConfirm
+}
+
+const handleFileChange = e => {
+  const file = e.target.files[0]
+  const reader = new FileReader()
+  reader.onload = res => {
+    const result = res.target.result as string
+    state.importTemplateInfo = JSON.parse(result)
+    state.templateInfo.name = state.importTemplateInfo['name']
+    state.templateInfo.templateStyle = state.importTemplateInfo['panelStyle']
+    state.templateInfo.templateData = state.importTemplateInfo['panelData']
+    state.templateInfo.snapshot = state.importTemplateInfo.snapshot
+    state.templateInfo.dynamicData = state.importTemplateInfo['dynamicData']
+    state.templateInfo.staticResource = state.importTemplateInfo['staticResource']
+    state.templateInfo['nodeType'] = 'template'
+  }
+  reader.readAsText(file)
+}
+const goFile = () => {
+  filesRef.value.click()
+}
+
+onMounted(() => {
+  showCurrentTemplate(props.pid)
+})
+</script>
+
+<style scoped>
+.my_table :deep(.el-table__row > td) {
+  /* 去除表格线 */
+  border: none;
+  padding: 0 0;
+}
+.my_table :deep(.el-table th.is-leaf) {
+  /* 去除上边框 */
+  border: none;
+}
+.my_table :deep(.el-table::before) {
+  /* 去除下边框 */
+  height: 0;
+}
+
+.de-root-class {
+  margin-top: 24px;
+  text-align: right;
+}
+.preview {
+  margin-top: -12px;
+  border: 1px solid #e6e6e6;
+  height: 300px !important;
+  overflow: auto;
+  background-size: 100% 100% !important;
+  border-radius: 4px;
+}
+.preview-show {
+  border-left: 1px solid #e6e6e6;
+  height: 300px;
+  background-size: 100% 100% !important;
+}
+</style>
+
+<style lang="scss">
+.flex-template {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .el-input {
+    margin-right: 2px;
+    flex: 1;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/template/component/TemplateItem.vue b/core/core-frontend/src/views/template/component/TemplateItem.vue
new file mode 100644
index 0000000000..c081320f23
--- /dev/null
+++ b/core/core-frontend/src/views/template/component/TemplateItem.vue
@@ -0,0 +1,140 @@
+<template>
+  <div :style="classBackground" class="de-card-model">
+    <div class="card-img-model" :style="classImg">
+      <img :src="model.snapshot" alt="" />
+    </div>
+    <div class="card-info">
+      <el-tooltip class="item" effect="dark" :content="model.name" placement="top">
+        <span class="de-model-text">{{ model.name }}</span>
+      </el-tooltip>
+      <el-dropdown size="medium" trigger="click" @command="handleCommand">
+        <i class="el-icon-more" />
+        <template #dropdown>
+          <el-dropdown-menu class="de-card-dropdown">
+            <slot>
+              <el-dropdown-item command="rename">
+                <i class="el-icon-edit" />
+                {{ $t('chart.rename') }}
+              </el-dropdown-item>
+              <el-dropdown-item command="delete">
+                <i class="el-icon-delete" />
+                {{ $t('chart.delete') }}
+              </el-dropdown-item>
+            </slot>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
+const emits = defineEmits(['command'])
+
+const props = defineProps({
+  model: {
+    type: Object
+  },
+  width: {
+    type: Number
+  }
+})
+
+const classBackground = computed(() => {
+  return {
+    width: props.width + 'px',
+    height: props.width * 0.714 + 'px'
+  }
+})
+const classImg = computed(() => {
+  return {
+    width: props.width + 'px',
+    height: props.width * 0.576 + 'px'
+  }
+})
+
+const handleCommand = key => {
+  emits('command', key)
+}
+</script>
+
+<style lang="scss">
+.de-card-model {
+  box-sizing: border-box;
+  background: #ffffff;
+  border: 1px solid var(--deCardStrokeColor, #dee0e3);
+  border-radius: 4px;
+  margin: 0 24px 25px 0;
+  .card-img-model {
+    border-bottom: 1px solid var(--deCardStrokeColor, #dee0e3);
+    height: 144px;
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+    }
+  }
+
+  .card-info {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px 9px 12px;
+    box-sizing: border-box;
+
+    .el-icon-more {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      font-size: 12px;
+      color: #646a73;
+      cursor: pointer;
+    }
+
+    .el-icon-more:hover {
+      background: rgba(31, 35, 41, 0.1);
+      border-radius: 4px;
+    }
+
+    .el-icon-more:active {
+      background: rgba(31, 35, 41, 0.2);
+      border-radius: 4px;
+    }
+  }
+
+  .de-model-text {
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    color: #1f2329;
+    display: inline-block;
+    width: 90%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin-right: 10px;
+  }
+}
+
+.de-card-model:hover {
+  box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.08);
+}
+
+.de-card-dropdown {
+  margin-top: 0 !important;
+  .popper__arrow {
+    display: none !important;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/template/component/TemplateList.vue b/core/core-frontend/src/views/template/component/TemplateList.vue
new file mode 100644
index 0000000000..9dec6b5b56
--- /dev/null
+++ b/core/core-frontend/src/views/template/component/TemplateList.vue
@@ -0,0 +1,247 @@
+<template xmlns:el-col="http://www.w3.org/1999/html">
+  <div class="de-template-list">
+    <el-input
+      v-model="state.templateFilterText"
+      :placeholder="t('system_parameter_setting.search_keywords')"
+      size="small"
+      class="de-input-search"
+      clearable
+    >
+      <template #prefix>
+        <svg-icon icon-class="de-search" />
+      </template>
+    </el-input>
+    <el-empty
+      v-if="!templateListComputed.length && state.templateFilterText === ''"
+      :image="state.noneImg"
+      :description="t('components.no_classification')"
+    />
+    <el-empty
+      v-if="!templateListComputed.length && state.templateFilterText !== ''"
+      :image="state.nothingImg"
+      :description="t('components.relevant_content_found')"
+    />
+    <ul>
+      <li
+        v-for="ele in templateListComputed"
+        :key="ele.name"
+        :class="[{ select: state.activeTemplate === ele.id }]"
+        @click="nodeClick(ele)"
+      >
+        <svg-icon icon-class="scene" class="de-icon-sense" />
+        <span class="text-template-overflow" :title="ele.name">{{ ele.name }}</span>
+        <span class="more" @click.stop>
+          <el-dropdown trigger="click" size="small" @command="type => clickMore(type, ele)">
+            <span class="el-dropdown-link">
+              <i class="el-icon-more" />
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu class="de-template-dropdown">
+                <el-dropdown-item icon="el-icon-upload2" command="import">
+                  {{ t('panel.import') }}
+                </el-dropdown-item>
+                <el-dropdown-item icon="el-icon-edit" command="edit">
+                  {{ t('panel.rename') }}
+                </el-dropdown-item>
+                <el-dropdown-item icon="el-icon-delete" command="delete">
+                  {{ t('panel.delete') }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </span>
+      </li>
+    </ul>
+    <el-button
+      v-if="state.templateFilterText === ''"
+      style="width: 100%"
+      icon="el-icon-plus"
+      secondary
+      @click="add()"
+    >
+      {{ t('panel.add_category') }}
+    </el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from '@/hooks/web/useI18n'
+import { computed, reactive } from 'vue'
+const { t } = useI18n()
+
+const emits = defineEmits([
+  'showCurrentTemplate',
+  'showTemplateEditDialog',
+  'templateDelete',
+  'templateEdit',
+  'templateImport'
+])
+
+const props = defineProps({
+  templateType: {
+    type: String,
+    default: ''
+  },
+  templateList: {
+    type: Array,
+    default: function () {
+      return []
+    }
+  }
+})
+
+const state = reactive({
+  templateFilterText: '',
+  activeTemplate: '',
+  noneImg: '@/assets/None.png',
+  nothingImg: '@/assets/nothing.png'
+})
+
+const templateListComputed = computed(() => {
+  if (!state.templateFilterText) return [...props.templateList]
+  return props.templateList.filter(ele => ele['name']?.includes(state.templateFilterText))
+})
+
+const clickMore = (type, data) => {
+  switch (type) {
+    case 'edit':
+      templateEdit(data)
+      break
+    case 'delete':
+      templateDelete(data)
+      break
+    case 'import':
+      templateImport(data)
+      break
+  }
+}
+const nodeClick = ({ id, label }) => {
+  state.activeTemplate = id
+  emits('showCurrentTemplate', id, label)
+}
+const add = () => {
+  emits('showTemplateEditDialog', 'new')
+}
+const templateDelete = template => {
+  const options = {
+    title: 'system_parameter_setting.delete_this_category',
+    content: 'system_parameter_setting.also_be_deleted',
+    type: 'primary',
+    cb: () => emits('templateDelete', template.id)
+  }
+  handlerConfirm(options)
+}
+const templateEdit = template => {
+  emits('templateEdit', template)
+}
+const templateImport = template => {
+  emits('templateImport', template.id)
+}
+
+const handlerConfirm = options => {
+  // do handlerConfirm
+}
+</script>
+
+<style scoped lang="scss">
+.de-template-list {
+  height: 100%;
+  position: relative;
+
+  ul {
+    margin: 16px 0 20px 0;
+    padding: 0;
+    overflow-y: auto;
+    max-height: calc(100% - 90px);
+  }
+
+  li {
+    list-style: none;
+    width: 100%;
+    box-sizing: border-box;
+    height: 40px;
+    padding: 0 30px 0 12px;
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    color: var(--deTextPrimary, #1f2329);
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    cursor: pointer;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .text-template-overflow {
+      display: inline-block;
+      max-width: 87%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .folder {
+      color: #8f959e;
+      margin-right: 9px;
+    }
+
+    .more {
+      position: absolute;
+      top: 50%;
+      right: 10px;
+      transform: translateY(-50%);
+      display: none;
+
+      .el-icon-more {
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        font-size: 12px;
+        color: #646a73;
+        cursor: pointer;
+      }
+
+      .el-icon-more:hover {
+        background: rgba(31, 35, 41, 0.1);
+        border-radius: 4px;
+      }
+
+      .el-icon-more:active {
+        background: rgba(31, 35, 41, 0.2);
+        border-radius: 4px;
+      }
+    }
+
+    &:hover {
+      background: rgba(31, 35, 41, 0.1);
+
+      .more {
+        display: block;
+      }
+    }
+  }
+
+  li.select {
+    background: var(--deWhiteHover, #e0eaff) !important;
+    color: var(--TextActive, #3370ff) !important;
+  }
+
+  .de-btn-fix {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.de-template-dropdown {
+  margin-top: 0 !important;
+
+  .popper__arrow {
+    display: none !important;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/template/index.vue b/core/core-frontend/src/views/template/index.vue
index f49683978b..3efe38e51d 100644
--- a/core/core-frontend/src/views/template/index.vue
+++ b/core/core-frontend/src/views/template/index.vue
@@ -1,12 +1,412 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-const wizard = ref('wizard')
-</script>
-
 <template>
   <div>
-    {{ wizard }}
+    <div class="de-template">
+      <el-tabs v-model="state.currentTemplateType" class="de-tabs" @tab-click="handleClick">
+        <el-tab-pane name="self">
+          <template #label>
+            <span>{{ t('panel.user_template') }}</span>
+          </template>
+        </el-tab-pane>
+        <el-tab-pane name="system">
+          <template #label>
+            <span>{{ t('panel.sys_template') }}</span>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+      <div class="tabs-container flex-tabs">
+        <div class="de-tabs-left">
+          <template-list
+            ref="templateListRef"
+            :template-type="state.currentTemplateType"
+            :template-list="state.templateList"
+            @templateDelete="templateFolderDelete"
+            @templateEdit="templateEdit"
+            @showCurrentTemplate="showCurrentTemplate"
+            @templateImport="templateImport"
+            @showTemplateEditDialog="showTemplateEditDialog"
+          />
+        </div>
+        <div class="de-tabs-right">
+          <div v-if="state.currentTemplateLabel" class="active-template">
+            {{ state.currentTemplateLabel }}&nbsp;&nbsp;({{ state.currentTemplateShowList.length }})
+            <el-button
+              type="primary"
+              icon="el-icon-upload2"
+              @click="templateImport(state.currentTemplateId)"
+            >
+              {{ t('panel.import') }}
+            </el-button>
+          </div>
+          <el-empty
+            v-if="!state.currentTemplateShowList.length"
+            :image="state.noneImg"
+            :description="t('components.no_template')"
+          />
+          <div v-show="state.currentTemplateId !== ''" id="template-box" class="template-box">
+            <template-item
+              v-for="item in state.currentTemplateShowList"
+              :key="item.id"
+              :width="state.templateCurWidth"
+              :model="item"
+              @command="key => handleCommand(key, item)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      :title="state.dialogTitle"
+      v-model:visible="state.editTemplate"
+      append-to-body
+      class="de-dialog-form"
+      width="600px"
+    >
+      <el-form
+        ref="templateEditFormRef"
+        class="de-form-item"
+        :model="state.templateEditForm"
+        :rules="state.templateEditFormRules"
+      >
+        <el-form-item :label="state.dialogTitleLabel" prop="name">
+          <el-input v-model="state.templateEditForm.name" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button secondary @click="close()">{{ t('commons.cancel') }}</el-button>
+          <el-button type="primary" @click="saveTemplateEdit(state.templateEditForm)"
+            >{{ t('commons.confirm') }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <!--导入templatedialog-->
+    <el-dialog
+      :title="state.templateDialog.title"
+      v-model:visible="state.templateDialog.visible"
+      :show-close="true"
+      class="de-dialog-form"
+      width="600px"
+    >
+      <template-import
+        v-if="state.templateDialog.visible"
+        :pid="state.templateDialog.pid"
+        @refresh="showCurrentTemplate(state.currentTemplateId, state.currentTemplateLabel)"
+        @closeEditTemplateDialog="closeEditTemplateDialog"
+      />
+    </el-dialog>
   </div>
 </template>
 
-<style lang="less" scoped></style>
+<script lang="ts" setup>
+import { save, templateDelete, find } from '@/api/template'
+import elementResizeDetectorMaker from 'element-resize-detector'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { ElMessage } from 'element-plus-secondary'
+import TemplateList from '@/views/template/component/TemplateList.vue'
+const { t } = useI18n()
+const templateEditFormRef = ref(null)
+const templateListRef = ref(null)
+
+const roleValidator = (rule, value, callback) => {
+  if (nameRepeat(value)) {
+    const { nodeType } = state.templateEditForm || {}
+    callback(
+      new Error(
+        t(
+          `system_parameter_setting.${
+            nodeType === 'folder' ? 'name_already_exists_type' : 'the_same_category'
+          }`
+        )
+      )
+    )
+  } else {
+    callback()
+  }
+}
+
+const state = reactive({
+  showShare: false,
+  currentTemplateShowList: [],
+  noneImg: '@/assets/None.png',
+  currentPid: '',
+  currentTemplateType: 'self',
+  templateEditFormRules: {
+    name: [
+      { required: true, trigger: 'blur', validator: roleValidator },
+      {
+        required: true,
+        message: t('commons.input_content'),
+        trigger: 'blur'
+      },
+      {
+        max: 50,
+        message: t('commons.char_can_not_more_50'),
+        trigger: 'change'
+      }
+    ]
+  },
+  templateEditForm: {},
+  editTemplate: false,
+  dialogTitle: '',
+  dialogTitleLabel: '',
+  currentTemplateLabel: '',
+  currentTemplateId: '',
+  templateList: [],
+  templateMiniWidth: 286,
+  templateCurWidth: 286,
+  formType: '',
+  originName: '',
+  templateDialog: {
+    title: t('panel.import_template'),
+    visible: false,
+    pid: ''
+  }
+})
+
+const nameList = computed(() => {
+  const { nodeType } = state.templateEditForm || {}
+  if (nodeType === 'template') {
+    return state.currentTemplateShowList.map(ele => ele.label)
+  }
+
+  if (nodeType === 'folder') {
+    return state.templateList.map(ele => ele.label)
+  }
+  return []
+})
+
+const nameRepeat = value => {
+  if (!nameList.value) {
+    return false
+  }
+  // 编辑场景 不能 因为名称重复而报错
+  if (state.formType === 'edit' && state.originName === value) {
+    return false
+  }
+  return nameList.value.some(name => name === value)
+}
+
+const handleCommand = (key, data) => {
+  switch (key) {
+    case 'rename':
+      templateEdit(data)
+      break
+    case 'delete':
+      templateDeleteConfirm(data)
+      break
+    default:
+      break
+  }
+}
+
+const handlerConfirm = option => {
+  //do handlerConfirm
+}
+
+const templateDeleteConfirm = template => {
+  const options = {
+    title: 'system_parameter_setting.delete_this_template',
+    type: 'primary',
+    cb: () => templateDelete(template.id)
+  }
+  handlerConfirm(options)
+}
+
+const handleClick = (tab, event) => {
+  getTree()
+}
+
+const showCurrentTemplate = (pid, label) => {
+  state.currentTemplateId = pid
+  state.currentTemplateLabel = label
+  if (state.currentTemplateId) {
+    find({ pid: state.currentTemplateId }).then(response => {
+      state.currentTemplateShowList = response.data
+    })
+  }
+}
+
+const templateFolderDelete = id => {
+  if (id) {
+    templateDelete(id).then(response => {
+      ElMessage.info(t('commons.delete_success'))
+      getTree()
+    })
+  }
+}
+const templateDelete = id => {
+  if (id) {
+    templateDelete(id).then(response => {
+      ElMessage.info(t('commons.delete_success'))
+      showCurrentTemplate(state.currentTemplateId, state.currentTemplateLabel)
+    })
+  }
+}
+
+const showTemplateEditDialog = (type, templateInfo) => {
+  state.templateEditForm = null
+  state.formType = type
+  if (type === 'edit') {
+    state.templateEditForm = JSON.parse(JSON.stringify(templateInfo))
+    state.dialogTitle = t(
+      `system_parameter_setting.${
+        state.templateEditForm['nodeType'] === 'folder' ? 'edit_classification' : 'edit_template'
+      }`
+    )
+    state.originName = state.templateEditForm['label']
+  } else {
+    state.dialogTitle = t('panel.add_category')
+    state.templateEditForm = {
+      name: '',
+      nodeType: 'folder',
+      templateType: state.currentTemplateType,
+      level: 0
+    }
+  }
+  state.dialogTitleLabel = t(
+    `system_parameter_setting.${
+      state.templateEditForm['nodeType'] === 'folder' ? 'classification_name' : 'template_name'
+    }`
+  )
+  state.editTemplate = true
+}
+
+const templateEdit = templateInfo => {
+  showTemplateEditDialog('edit', templateInfo)
+}
+
+const saveTemplateEdit = templateEditForm => {
+  templateEditFormRef.value.validate(valid => {
+    if (valid) {
+      save(templateEditForm).then(response => {
+        close()
+        // openMessageSuccess(
+        //   `system_parameter_setting.${
+        //     this.templateEditForm.id ? 'rename_succeeded' : 'added_successfully'
+        //   }`
+        // )
+        getTree()
+      })
+    } else {
+      return false
+    }
+  })
+}
+const close = () => {
+  templateEditFormRef.value.resetFields()
+  state.editTemplate = false
+}
+const getTree = () => {
+  const request = {
+    templateType: state.currentTemplateType,
+    level: '0'
+  }
+  find(request).then(res => {
+    state.templateList = res.data
+    showFirst()
+  })
+}
+const showFirst = () => {
+  // 判断是否默认点击第一条
+  if (state.templateList && state.templateList.length > 0) {
+    let showFirst = true
+    state.templateList.forEach(template => {
+      if (template.id === state.currentTemplateId) {
+        showFirst = false
+      }
+    })
+    if (showFirst) {
+      nextTick().then(() => {
+        const [obj = {}] = state.templateList
+        templateListRef.value.nodeClick(obj)
+      })
+    } else {
+      showCurrentTemplate(state.currentTemplateId, state.currentTemplateLabel)
+    }
+  } else {
+    state.currentTemplateShowList = []
+  }
+}
+
+const closeEditTemplateDialog = () => {
+  state.templateDialog.visible = false
+}
+
+const templateImport = pid => {
+  state.templateDialog.visible = true
+  state.templateDialog.pid = pid
+}
+
+onMounted(() => {
+  getTree()
+  const erd = elementResizeDetectorMaker()
+  const templateMainDom = document.getElementById('template-box')
+  // 监听div变动事件
+  erd.listenTo(templateMainDom, element => {
+    nextTick(() => {
+      const curSeparator = Math.trunc(templateMainDom.offsetWidth / state.templateMiniWidth)
+      state.templateCurWidth =
+        Math.trunc(templateMainDom.offsetWidth / curSeparator) - 24 - curSeparator
+    })
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.de-template {
+  height: 100%;
+  background-color: var(--MainBG, #f5f6f7);
+
+  .tabs-container {
+    height: calc(100% - 48px);
+    background: var(--ContentBG, #ffffff);
+    overflow-x: auto;
+  }
+
+  .flex-tabs {
+    display: flex;
+    background: #f5f6f7;
+  }
+
+  .de-tabs-left {
+    background: #fff;
+    width: 269px;
+    border-right: 1px solid rgba(31, 35, 41, 0.15);
+    padding: 24px;
+  }
+
+  .de-tabs-right {
+    flex: 1;
+    background: #fff;
+    padding: 24px 0 24px 24px;
+    overflow: hidden;
+
+    .template-box {
+      display: flex;
+      flex-wrap: wrap;
+      overflow-y: auto;
+      box-sizing: border-box;
+      align-content: flex-start;
+      height: calc(100% - 10px);
+      width: 100%;
+      padding-bottom: 24px;
+    }
+
+    .active-template {
+      margin: 4px 0 20px 0;
+      padding-right: 24px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: var(--deTextPrimary, #1f2329);
+    }
+  }
+}
+</style>
diff --git a/de-xpack b/de-xpack
index 912a648808..e3143e3176 160000
--- a/de-xpack
+++ b/de-xpack
@@ -1 +1 @@
-Subproject commit 912a648808e87bdf1e5a11f7cdc6467b89fd9347
+Subproject commit e3143e3176ca189c35729fa7bb195264c061a824
diff --git a/sdk/api/api-base/src/main/java/io/dataease/api/template/TemplateManageApi.java b/sdk/api/api-base/src/main/java/io/dataease/api/template/TemplateManageApi.java
new file mode 100644
index 0000000000..a702967020
--- /dev/null
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/template/TemplateManageApi.java
@@ -0,0 +1,13 @@
+package io.dataease.api.template;
+
+import io.dataease.api.template.dto.TemplateManageDTO;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.List;
+
+public interface TemplateManageApi {
+
+    @PostMapping("/templateList")
+     List<TemplateManageDTO> templateList();
+
+}
diff --git a/sdk/api/api-base/src/main/java/io/dataease/api/template/TemplateMarketApi.java b/sdk/api/api-base/src/main/java/io/dataease/api/template/TemplateMarketApi.java
new file mode 100644
index 0000000000..c1b0751175
--- /dev/null
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/template/TemplateMarketApi.java
@@ -0,0 +1,23 @@
+package io.dataease.api.template;
+
+import io.dataease.api.template.request.TemplateMarketSearchRequest;
+import io.dataease.api.template.response.MarketBaseResponse;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+
+import java.util.List;
+
+/**
+ * @author : WangJiaHao
+ * @date : 2023/11/6 17:23
+ */
+public interface TemplateMarketApi {
+
+    @PostMapping("/search")
+    MarketBaseResponse searchTemplate(@RequestBody TemplateMarketSearchRequest request);
+
+    @GetMapping("/categories")
+    List<String> categories();
+
+}
diff --git a/sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateManageDTO.java b/sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateManageDTO.java
new file mode 100644
index 0000000000..a1f43cd40e
--- /dev/null
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateManageDTO.java
@@ -0,0 +1,15 @@
+package io.dataease.api.template.dto;
+
+
+import lombok.Data;
+
+
+
+@Data
+public class TemplateManageDTO {
+
+    private String label;
+    private Integer childrenCount;
+
+
+}
diff --git a/sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateMarketDTO.java b/sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateMarketDTO.java
new file mode 100644
index 0000000000..1e2e1d0991
--- /dev/null
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateMarketDTO.java
@@ -0,0 +1,21 @@
+package io.dataease.api.template.dto;
+
+import io.dataease.api.template.vo.MarketCategoryVO;
+import io.dataease.api.template.vo.MarketMetasVO;
+import lombok.Data;
+
+import java.util.List;
+
+@Data
+public class TemplateMarketDTO {
+    private String id;
+    private String title;
+    private String status;
+    private String slug;
+    private String editorType;
+    private String summary;
+    private String thumbnail;
+    private Boolean showFlag = true;
+    private List<MarketCategoryVO> categories;
+    private MarketMetasVO metas;
+}
diff --git a/sdk/api/api-base/src/main/java/io/dataease/api/template/request/TemplateMarketSearchRequest.java b/sdk/api/api-base/src/main/java/io/dataease/api/template/request/TemplateMarketSearchRequest.java
new file mode 100644
index 0000000000..73b8b3555f
--- /dev/null
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/template/request/TemplateMarketSearchRequest.java
@@ -0,0 +1,7 @@
+package io.dataease.api.template.request;
+
+import io.dataease.api.template.dto.TemplateMarketDTO;
+
+public class TemplateMarketSearchRequest extends TemplateMarketDTO {
+
+}
diff --git a/sdk/api/api-base/src/main/java/io/dataease/api/template/response/MarketBaseResponse.java b/sdk/api/api-base/src/main/java/io/dataease/api/template/response/MarketBaseResponse.java
new file mode 100644
index 0000000000..5a791e1116
--- /dev/null
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/template/response/MarketBaseResponse.java
@@ -0,0 +1,24 @@
+package io.dataease.api.template.response;
+
+import io.dataease.api.template.dto.TemplateMarketDTO;
+
+import java.util.List;
+
+/**
+ * @author : WangJiaHao
+ * @date : 2023/11/6 17:43
+ */
+public class MarketBaseResponse {
+    private String baseUrl;
+
+    private List<TemplateMarketDTO> contents;
+
+    public MarketBaseResponse() {
+    }
+
+    public MarketBaseResponse(String baseUrl, List<TemplateMarketDTO> contents) {
+        this.baseUrl = baseUrl;
+        this.contents = contents;
+    }
+
+}
diff --git a/sdk/api/api-base/src/main/java/io/dataease/api/template/vo/MarketCategoryVO.java b/sdk/api/api-base/src/main/java/io/dataease/api/template/vo/MarketCategoryVO.java
new file mode 100644
index 0000000000..3c086909d7
--- /dev/null
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/template/vo/MarketCategoryVO.java
@@ -0,0 +1,15 @@
+package io.dataease.api.template.vo;
+
+import lombok.Data;
+
+/**
+ * Author: wangjiahao
+ * Date: 2022/7/15
+ * Description:
+ */
+@Data
+public class MarketCategoryVO {
+    private String id;
+    private String name;
+    private String slug;
+}
diff --git a/sdk/api/api-base/src/main/java/io/dataease/api/template/vo/MarketMetasVO.java b/sdk/api/api-base/src/main/java/io/dataease/api/template/vo/MarketMetasVO.java
new file mode 100644
index 0000000000..d568615ba2
--- /dev/null
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/template/vo/MarketMetasVO.java
@@ -0,0 +1,13 @@
+package io.dataease.api.template.vo;
+
+import lombok.Data;
+
+/**
+ * Author: wangjiahao
+ * Date: 2022/7/15
+ * Description:
+ */
+@Data
+public class MarketMetasVO {
+    private String theme_repo;
+}
diff --git a/sdk/api/api-base/src/main/java/io/dataease/api/template/vo/TemplateCategoryVO.java b/sdk/api/api-base/src/main/java/io/dataease/api/template/vo/TemplateCategoryVO.java
new file mode 100644
index 0000000000..989c6bd8dd
--- /dev/null
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/template/vo/TemplateCategoryVO.java
@@ -0,0 +1,19 @@
+package io.dataease.api.template.vo;
+
+import lombok.Data;
+
+/**
+ * Author: wangjiahao
+ * Date: 2022/7/18
+ * Description:
+ */
+@Data
+public class TemplateCategoryVO {
+    private Integer id;
+
+    private String name;
+
+    private String slug;
+
+    private Integer priority;
+}