feat: 模版市场

2023-11-10 08:39:42 +08:00 · 2023-11-10 08:39:42 +08:00 · 2d864eea23
commit 2d864eea23
parent bf8cd7e593
30 changed files with 791 additions and 93 deletions
--- a/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java
+++ b/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java
@ -14,7 +14,7 @@ public class MybatisPlusGenerator {
     * 第一 我嫌麻烦
     * 第二 后面配置会放到nacos读起来更麻烦了
     */
-    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 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 username = "root";
    private static final String password = "Password123@mysql";

@ -25,7 +25,7 @@ public class MybatisPlusGenerator {
    /**
     * 这是要生成代码的表名称
     */
-    private static final String TABLE_NAME = "visualization_template";
+    private static final String TABLE_NAME = "visualization_template_extend_data";

    /**
     * 下面两个配置基本上不用动
--- a/core/core-backend/src/main/java/io/dataease/commons/constants/DataVisualizationConstants.java
+++ b/core/core-backend/src/main/java/io/dataease/commons/constants/DataVisualizationConstants.java
@ -1,6 +1,24 @@
 package io.dataease.commons.constants;

 public class DataVisualizationConstants {
+
+    //新建仪表板来源
+    public static final class NEW_PANEL_FROM {
+
+        // 直接新建
+        public static final String NEW = "new";
+
+        // 内部模板新建
+        public static final String NEW_INNER_TEMPLATE = "new_inner_template";
+
+        // 外部模板新建
+        public static final String NEW_OUTER_TEMPLATE = "new_outer_template";
+
+        // 模板市场新建
+        public static final String NEW_MARKET_TEMPLATE = "new_market_template";
+
+    }
+
    //删除标志
    public static final class DELETE_FLAG {
        //已删除
--- a/core/core-backend/src/main/java/io/dataease/system/manage/SysParameterManage.java
+++ b/core/core-backend/src/main/java/io/dataease/system/manage/SysParameterManage.java
@ -7,8 +7,12 @@ import io.dataease.utils.IDUtils;
 import jakarta.annotation.Resource;
 import org.apache.commons.lang3.ObjectUtils;
 import org.springframework.stereotype.Component;
+import org.springframework.util.CollectionUtils;

+import java.util.Collection;
 import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;

@Component
 public class SysParameterManage {
@ -57,4 +61,14 @@ public class SysParameterManage {
        QueryWrapper<CoreSysSetting> queryWrapper = new QueryWrapper<>();
        return coreSysSettingMapper.selectList(queryWrapper);
    }
+
+    public Map<String,String> groupVal(String groupKey) {
+        QueryWrapper<CoreSysSetting> queryWrapper = new QueryWrapper<>();
+        queryWrapper.likeLeft("pkey", groupKey);
+        List<CoreSysSetting> sysSettings = coreSysSettingMapper.selectList(queryWrapper);
+        if (!CollectionUtils.isEmpty(sysSettings)) {
+            return sysSettings.stream().collect(Collectors.toMap(CoreSysSetting::getPkey, CoreSysSetting::getPval));
+        }
+        return null;
+    }
 }
--- a/core/core-backend/src/main/java/io/dataease/template/dao/auto/entity/VisualizationTemplateExtendData.java
+++ b/core/core-backend/src/main/java/io/dataease/template/dao/auto/entity/VisualizationTemplateExtendData.java
@ -0,0 +1,90 @@
+package io.dataease.template.dao.auto.entity;
+
+import com.baomidou.mybatisplus.annotation.TableName;
+import java.io.Serializable;
+
+/**
+ * <p>
+ * 
+ * </p>
+ *
+ * @author fit2cloud
+ * @since 2023-11-10
+ */
+@TableName("visualization_template_extend_data")
+public class VisualizationTemplateExtendData implements Serializable {
+
+    private static final long serialVersionUID = 1L;
+
+    private Long id;
+
+    private Long dvId;
+
+    private Long viewId;
+
+    private String viewDetails;
+
+    private String copyFrom;
+
+    private String copyId;
+
+    public Long getId() {
+        return id;
+    }
+
+    public void setId(Long id) {
+        this.id = id;
+    }
+
+    public Long getDvId() {
+        return dvId;
+    }
+
+    public void setDvId(Long dvId) {
+        this.dvId = dvId;
+    }
+
+    public Long getViewId() {
+        return viewId;
+    }
+
+    public void setViewId(Long viewId) {
+        this.viewId = viewId;
+    }
+
+    public String getViewDetails() {
+        return viewDetails;
+    }
+
+    public void setViewDetails(String viewDetails) {
+        this.viewDetails = viewDetails;
+    }
+
+    public String getCopyFrom() {
+        return copyFrom;
+    }
+
+    public void setCopyFrom(String copyFrom) {
+        this.copyFrom = copyFrom;
+    }
+
+    public String getCopyId() {
+        return copyId;
+    }
+
+    public void setCopyId(String copyId) {
+        this.copyId = copyId;
+    }
+
+    @Override
+    public String toString() {
+        return "VisualizationTemplateExtendData{" +
+        "id = " + id +
+        ", dvId = " + dvId +
+        ", viewId = " + viewId +
+        ", viewDetails = " + viewDetails +
+        ", copyFrom = " + copyFrom +
+        ", copyId = " + copyId +
+        "}";
+    }
+}
--- a/core/core-backend/src/main/java/io/dataease/template/dao/auto/mapper/VisualizationTemplateExtendDataMapper.java
+++ b/core/core-backend/src/main/java/io/dataease/template/dao/auto/mapper/VisualizationTemplateExtendDataMapper.java
@ -0,0 +1,18 @@
+package io.dataease.template.dao.auto.mapper;
+
+import io.dataease.template.dao.auto.entity.VisualizationTemplateExtendData;
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import org.apache.ibatis.annotations.Mapper;
+
+/**
+ * <p>
+ *  Mapper 接口
+ * </p>
+ *
+ * @author fit2cloud
+ * @since 2023-11-10
+ */
+@Mapper
+public interface VisualizationTemplateExtendDataMapper extends BaseMapper<VisualizationTemplateExtendData> {
+
+}
--- a/core/core-backend/src/main/java/io/dataease/template/manage/TemplateMarketManage.java
+++ b/core/core-backend/src/main/java/io/dataease/template/manage/TemplateMarketManage.java
@ -0,0 +1,87 @@
+package io.dataease.template.manage;
+
+import com.fasterxml.jackson.core.type.TypeReference;
+import io.dataease.api.template.dto.TemplateManageFileDTO;
+import io.dataease.api.template.dto.TemplateMarketDTO;
+import io.dataease.api.template.request.TemplateMarketSearchRequest;
+import io.dataease.api.template.response.MarketBaseResponse;
+import io.dataease.api.template.vo.TemplateCategoryVO;
+import io.dataease.exception.DEException;
+import io.dataease.system.manage.SysParameterManage;
+import io.dataease.utils.HttpClientConfig;
+import io.dataease.utils.HttpClientUtil;
+import io.dataease.utils.JsonUtil;
+import jakarta.annotation.Resource;
+import org.apache.commons.collections4.CollectionUtils;
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.stereotype.Service;
+
+import java.util.Comparator;
+import java.util.List;
+import java.util.Map;
+import java.util.stream.Collectors;
+
+/**
+ * Author: wangjiahao
+ */
+@Service
+public class TemplateMarketManage {
+
+    private final static String POSTS_API = "/api/content/posts?page=0&size=2000";
+    private final static String CATEGORIES_API = "/api/content/categories";
+
+    @Resource
+    private SysParameterManage sysParameterManage;
+
+    /**
+     * @param templateUrl template url
+     * @Description Get template file from template market
+     */
+    public TemplateManageFileDTO getTemplateFromMarket(String templateUrl) {
+        if (StringUtils.isNotEmpty(templateUrl)) {
+            String sufUrl = sysParameterManage.groupVal("template.").get("template.url");
+            String templateInfo = HttpClientUtil.get(sufUrl + templateUrl, null);
+            return JsonUtil.parseObject(templateInfo,TemplateManageFileDTO.class);
+        } else {
+            return null;
+        }
+    }
+
+    /**
+     * @param url content api url
+     * @Description Get info from template market content api
+     */
+    public String marketGet(String url, String accessKey) {
+        HttpClientConfig config = new HttpClientConfig();
+        config.addHeader("API-Authorization", accessKey);
+        return HttpClientUtil.get(url, config);
+    }
+
+    public MarketBaseResponse searchTemplate(TemplateMarketSearchRequest request) {
+        try {
+            Map<String,String>  templateParams = sysParameterManage.groupVal("template.");
+            String result = marketGet(templateParams.get("template.url") + POSTS_API, templateParams.get("template.accessKey"));
+            TypeReference<List<TemplateMarketDTO>> market = new TypeReference<>() {
+            };
+            List<TemplateMarketDTO> postsResult = JsonUtil.parseList(result,market);
+            return new MarketBaseResponse(templateParams.get("template.url"), postsResult);
+        } catch (Exception e) {
+            DEException.throwException(e);
+        }
+        return null;
+    }
+
+    public List<String> getCategories() {
+        Map<String,String>  templateParams = sysParameterManage.groupVal("template.");
+        String resultStr = marketGet(templateParams.get("template.url") + CATEGORIES_API, templateParams.get("template.accessKey"));
+        TypeReference<List<TemplateCategoryVO>> market = new TypeReference<>() {
+        };
+        List<TemplateCategoryVO> categories = JsonUtil.parseList(resultStr,market);
+        if (CollectionUtils.isNotEmpty(categories)) {
+            return categories.stream().filter(item -> !"应用系列".equals(item.getName())).sorted(Comparator.comparing(TemplateCategoryVO::getPriority)).map(TemplateCategoryVO::getName).collect(Collectors.toList());
+        } else {
+            return null;
+        }
+
+    }
+}
--- a/core/core-backend/src/main/java/io/dataease/template/service/TemplateManageService.java
+++ b/core/core-backend/src/main/java/io/dataease/template/service/TemplateManageService.java
@ -1,6 +1,7 @@
 package io.dataease.template.service;

 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import io.dataease.api.template.TemplateManageApi;
 import io.dataease.api.template.dto.TemplateManageDTO;
 import io.dataease.api.template.request.TemplateManageRequest;
 import io.dataease.api.template.vo.VisualizationTemplateVO;
@ -17,6 +18,8 @@ import org.apache.commons.lang3.StringUtils;
 import org.springframework.transaction.annotation.Transactional;
 import org.springframework.util.Assert;
 import org.springframework.util.CollectionUtils;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;

 import java.util.List;
 import java.util.Optional;
@ -28,7 +31,9 @@ import static io.dataease.constant.StaticResourceConstants.UPLOAD_URL_PREFIX;
 * @author : WangJiaHao
 * @date : 2023/11/7 13:29
 */
-public class TemplateManageService {
+@RestController
+@RequestMapping("/templateManage")
+public class TemplateManageService implements TemplateManageApi {

    @Resource
    private VisualizationTemplateMapper templateMapper;
@ -37,6 +42,7 @@ public class TemplateManageService {
    @Resource
    private StaticResourceServer staticResourceServer;

+    @Override
    public List<TemplateManageDTO> templateList(TemplateManageRequest request) {
        request.setWithBlobs("N");
        List<TemplateManageDTO> templateList = extTemplateMapper.findTemplateList(request);
@ -58,7 +64,9 @@ public class TemplateManageService {
        return extTemplateMapper.findTemplateList(request);
    }

+
    @Transactional
+    @Override
    public TemplateManageDTO save(TemplateManageRequest request) {
        if (StringUtils.isEmpty(request.getId())) {
            request.setId(UUID.randomUUID().toString());
@ -121,17 +129,17 @@ public class TemplateManageService {
            return CommonConstants.CHECK_RESULT.EXIST_ALL;
        }
    }
-
+    @Override
    public String nameCheck(TemplateManageRequest request) {
        return nameCheck(request.getOptType(), request.getName(), request.getPid(), request.getId());

    }
-
+    @Override
    public void delete(String id) {
        Assert.notNull(id, "id cannot be null");
        templateMapper.deleteById(id);
    }
-
+    @Override
    public VisualizationTemplateVO findOne(String panelId) {
        VisualizationTemplate template = templateMapper.selectById(panelId);
        if(template != null){
@ -142,7 +150,7 @@ public class TemplateManageService {
            return null;
        }
    }
-
+    @Override
    public List<TemplateManageDTO> find(TemplateManageRequest request) {
        return extTemplateMapper.findTemplateList(request);
    }
--- a/core/core-backend/src/main/java/io/dataease/visualization/server/DataVisualizationServer.java
+++ b/core/core-backend/src/main/java/io/dataease/visualization/server/DataVisualizationServer.java
@ -3,22 +3,29 @@ package io.dataease.visualization.server;
 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import io.dataease.api.chart.dto.ChartViewDTO;
+import io.dataease.api.template.dto.TemplateManageFileDTO;
 import io.dataease.api.visualization.DataVisualizationApi;
 import io.dataease.api.visualization.request.DataVisualizationBaseRequest;
 import io.dataease.api.visualization.request.VisualizationWorkbranchQueryRequest;
 import io.dataease.api.visualization.vo.DataVisualizationVO;
 import io.dataease.api.visualization.vo.VisualizationResourceVO;
 import io.dataease.chart.dao.auto.entity.CoreChartView;
+import io.dataease.chart.dao.auto.mapper.CoreChartViewMapper;
 import io.dataease.chart.manage.ChartDataManage;
 import io.dataease.chart.manage.ChartViewManege;
 import io.dataease.commons.constants.DataVisualizationConstants;
+import io.dataease.constant.CommonConstants;
 import io.dataease.exception.DEException;
 import io.dataease.license.config.XpackInteract;
 import io.dataease.model.BusiNodeRequest;
 import io.dataease.model.BusiNodeVO;
+import io.dataease.template.dao.auto.entity.VisualizationTemplate;
+import io.dataease.template.dao.auto.mapper.VisualizationTemplateMapper;
+import io.dataease.template.manage.TemplateMarketManage;
 import io.dataease.utils.AuthUtils;
 import io.dataease.utils.BeanUtils;
 import io.dataease.utils.IDUtils;
+import io.dataease.utils.JsonUtil;
 import io.dataease.visualization.dao.auto.entity.DataVisualizationInfo;
 import io.dataease.visualization.dao.auto.mapper.DataVisualizationInfoMapper;
 import io.dataease.visualization.dao.ext.mapper.ExtDataVisualizationMapper;
@ -29,7 +36,10 @@ import org.springframework.util.CollectionUtils;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.multipart.MultipartFile;

+import java.util.ArrayList;
+import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 import java.util.stream.Collectors;
@ -54,6 +64,16 @@ public class DataVisualizationServer implements DataVisualizationApi {
    @Resource
    private ChartDataManage chartDataManage;

+    @Resource
+    private VisualizationTemplateMapper templateMapper;
+
+    @Resource
+    private TemplateMarketManage templateMarketManage;
+
+    @Resource
+    private StaticResourceServer staticResourceServer;
+
+
    @Override
    @XpackInteract(value = "dataVisualizationServer", original = true)
    public DataVisualizationVO findById(Long dvId,String busiFlag) {
@ -195,6 +215,74 @@ public class DataVisualizationServer implements DataVisualizationApi {
        return extDataVisualizationMapper.findDvType(dvId);
    }

+    @Override
+    public DataVisualizationVO decompression(DataVisualizationBaseRequest request) throws Exception {
+        Long newDvId = IDUtils.snowID();
+        String newFrom = request.getNewFrom();
+        String templateStyle = null;
+        String templateData = null;
+        String dynamicData = null;
+        String staticResource = null;
+        String name = null;
+        String dvType = null;
+        //内部模板新建
+        if (DataVisualizationConstants.NEW_PANEL_FROM.NEW_INNER_TEMPLATE.equals(newFrom)) {
+            VisualizationTemplate visualizationTemplate = templateMapper.selectById(request.getTemplateId());
+            templateStyle = visualizationTemplate.getTemplateStyle();
+            templateData = visualizationTemplate.getTemplateData();
+            dynamicData = visualizationTemplate.getDynamicData();
+            name = visualizationTemplate.getName();
+            dvType = visualizationTemplate.getDvType();
+        } else if (DataVisualizationConstants.NEW_PANEL_FROM.NEW_OUTER_TEMPLATE.equals(newFrom)) {
+            templateStyle = request.getCanvasStyleData();
+            templateData = request.getCanvasStyleData();
+            dynamicData = request.getDynamicData();
+            staticResource = request.getStaticResource();
+            name = request.getName();
+            dvType = request.getType();
+        } else if (DataVisualizationConstants.NEW_PANEL_FROM.NEW_MARKET_TEMPLATE.equals(newFrom)) {
+            TemplateManageFileDTO templateFileInfo = templateMarketManage.getTemplateFromMarket(request.getTemplateUrl());
+            if (templateFileInfo == null) {
+                DEException.throwException("Can't find the template's info from market,please check");
+            }
+            templateStyle = templateFileInfo.getCanvasStyleData();
+            templateData = templateFileInfo.getComponentData();
+            dynamicData = templateFileInfo.getDynamicData();
+            staticResource = templateFileInfo.getStaticResource();
+            name = request.getName();
+            dvType = request.getType();
+        }
+        // 解析动态数据
+        Map<String, String> dynamicDataMap = JsonUtil.parseObject(dynamicData, Map.class);
+        List<ChartViewDTO> chartViews = new ArrayList<>();
+        Map<Long,ChartViewDTO> canvasViewInfo = new HashMap<>();
+//        List<PanelGroupExtendDataDTO> viewsData = new ArrayList<>();
+        for (Map.Entry<String, String> entry : dynamicDataMap.entrySet()) {
+            String originViewId = entry.getKey();
+            String originViewData = entry.getValue();
+            ChartViewDTO chartView = JsonUtil.parseObject(originViewData, ChartViewDTO.class);
+            Long newViewId = IDUtils.snowID();
+            chartView.setId(newViewId);
+            chartView.setSceneId(newDvId);
+            chartView.setDataFrom(CommonConstants.VIEW_DATA_FROM.TEMPLATE);
+            // 数据处理 1.替换viewId 2.加入panelView 数据(数据来源为template) 3.加入模板view data数据
+            // viewsData.add(new PanelGroupExtendDataDTO(newPanelId, newViewId, originViewData));
+            templateData = templateData.replaceAll(originViewId, newViewId.toString());
+            chartViewManege.save(chartView);
+            canvasViewInfo.put(chartView.getId(),chartView);
+        }
+        request.setComponentData(templateData);
+        request.setCanvasStyleData(templateStyle);
+        //Store static resource into the server
+        staticResourceServer.saveFilesToServe(staticResource);
+        return new DataVisualizationVO(newDvId,name,dvType,templateStyle,templateData,canvasViewInfo);
+    }
+
+    @Override
+    public DataVisualizationVO decompressionLocalFile(MultipartFile file) {
+        return null;
+    }
+

    @Override
    public void nameCheck(DataVisualizationBaseRequest request) {
--- a/core/core-backend/src/main/resources/db/desktop/V2.1__ddl.sql
+++ b/core/core-backend/src/main/resources/db/desktop/V2.1__ddl.sql
@ -14,4 +14,22 @@ CREATE TABLE `visualization_template` (
                                          `template_data` longtext COMMENT 'template 数据',
                                          `dynamic_data` longtext COMMENT '预存数据',
                                          PRIMARY KEY (`id`)
-);
+);
+
+BEGIN;
+INSERT INTO `core_menu`
+VALUES (19, 0, 2, 'template-market', 'template-market', 4, NULL, '/template-market', 0, 1, 0);
+INSERT INTO `core_menu`
+VALUES (20, 15, 2, 'template-setting', 'system/template-setting', 4, 'icon_template', '/template-setting', 0, 1, 1);
+COMMIT;
+
+DROP TABLE IF EXISTS `visualization_template_extend_data`;
+CREATE TABLE `visualization_template_extend_data` (
+                                                      `id` bigint NOT NULL,
+                                                      `dv_id` bigint DEFAULT NULL,
+                                                      `view_id` bigint DEFAULT NULL,
+                                                      `view_details` longtext,
+                                                      `copy_from` varchar(255) DEFAULT NULL,
+                                                      `copy_id` varchar(255) DEFAULT NULL,
+                                                      PRIMARY KEY (`id`)
+);
--- a/core/core-backend/src/main/resources/db/migration/V2.1__ddl.sql
+++ b/core/core-backend/src/main/resources/db/migration/V2.1__ddl.sql
@ -23,4 +23,15 @@ INSERT INTO `core_menu`
 VALUES (19, 0, 2, 'template-market', 'template-market', 4, NULL, '/template-market', 0, 1, 0);
 INSERT INTO `core_menu`
 VALUES (20, 15, 2, 'template-setting', 'system/template-setting', 4, 'icon_template', '/template-setting', 0, 1, 1);
-COMMIT;
+COMMIT;
+
+DROP TABLE IF EXISTS `visualization_template_extend_data`;
+CREATE TABLE `visualization_template_extend_data` (
+                                                      `id` bigint NOT NULL,
+                                                      `dv_id` bigint DEFAULT NULL,
+                                                      `view_id` bigint DEFAULT NULL,
+                                                      `view_details` longtext,
+                                                      `copy_from` varchar(255) DEFAULT NULL,
+                                                      `copy_id` varchar(255) DEFAULT NULL,
+                                                      PRIMARY KEY (`id`)
+);
--- a/core/core-backend/src/main/resources/mybatis/ExtVisualizationTemplateMapper.xml
+++ b/core/core-backend/src/main/resources/mybatis/ExtVisualizationTemplateMapper.xml
@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="io.dataease.template.dao.ext.ExtVisualizationTemplateMapper">
+
+    <resultMap id="BaseResultMap" type="io.dataease.api.template.vo.VisualizationTemplateVO">
+        <id column="id" jdbcType="VARCHAR" property="id" />
+        <result column="name" jdbcType="VARCHAR" property="name" />
+        <result column="pid" jdbcType="VARCHAR" property="pid" />
+        <result column="level" jdbcType="INTEGER" property="level" />
+        <result column="node_type" jdbcType="VARCHAR" property="nodeType" />
+        <result column="create_by" jdbcType="VARCHAR" property="createBy" />
+        <result column="create_time" jdbcType="BIGINT" property="createTime" />
+        <result column="template_type" jdbcType="VARCHAR" property="templateType" />
+        <result column="snapshot" jdbcType="LONGVARCHAR" property="snapshot" />
+        <result column="template_style" jdbcType="LONGVARCHAR" property="templateStyle" />
+        <result column="template_data" jdbcType="LONGVARCHAR" property="templateData" />
+        <result column="dynamic_data" jdbcType="LONGVARCHAR" property="dynamicData" />
+    </resultMap>
+
+    <resultMap id="BaseResultMapDTO" type="io.dataease.api.template.dto.TemplateManageDTO"
+               extends="BaseResultMap">
+        <result column="label" jdbcType="VARCHAR" property="label"/>
+        <result column="childrenCount" jdbcType="VARCHAR" property="childrenCount"/>
+    </resultMap>
+
+    <sql id="Base_Column_List">
+    visualization_template.id, visualization_template.`name`, visualization_template.pid, visualization_template.`level`,visualization_template.`dv_type`, visualization_template.node_type, visualization_template.create_by, visualization_template.create_time, visualization_template.template_type, visualization_template.snapshot
+  </sql>
+    <sql id="Blob_Column_List">
+     visualization_template.template_style, visualization_template.template_data, visualization_template.dynamic_data
+  </sql>
+
+    <select id="findTemplateList" resultMap="BaseResultMapDTO">
+        SELECT
+        <include refid="Base_Column_List" />
+        ,
+        <if test='withBlobs == "Y"'>
+            <include refid="Blob_Column_List" />
+            ,
+        </if>
+        visualization_template.NAME AS label,
+        ifnull(tempCountInfo.childrenCount,0) as childrenCount
+        FROM
+        visualization_template
+        LEFT JOIN (
+        SELECT
+        pid,
+        count( 1 ) AS childrenCount
+        FROM
+        visualization_template
+        WHERE
+        pid IS NOT NULL
+        GROUP BY
+        pid
+        ) tempCountInfo ON visualization_template.id = tempCountInfo.pid
+        <where>
+            <if test="name != null">
+                and visualization_template.name like CONCAT('%', #{name},'%')
+            </if>
+            <if test="dvType != null">
+                and visualization_template.dv_type = #{dvType}
+            </if>
+            <if test="nodeType != null">
+                and visualization_template.node_type = #{nodeType}
+            </if>
+            <if test="templateType != null">
+                and visualization_template.template_type = #{templateType}
+            </if>
+            <if test="id != null">
+                and visualization_template.id = #{id}
+            </if>
+            <if test="pid != null">
+                and visualization_template.pid = #{pid}
+            </if>
+            <if test="level != null">
+                and visualization_template.level = #{level}
+            </if>
+        </where>
+        <if test="sort != null">
+            order by ${sort}
+        </if>
+        <if test="sort == null">
+            order by visualization_template.create_time desc
+        </if>
+    </select>
+</mapper>
--- a/core/core-frontend/package.json
+++ b/core/core-frontend/package.json
@ -27,6 +27,7 @@
    "deepmerge": "^4.3.1",
    "element-plus-secondary": "^0.4.10",
    "element-resize-detector": "^1.2.4",
+    "file-saver": "^2.0.5",
    "highcharts": "^10.3.3",
    "html-to-image": "^1.11.11",
    "html2canvas": "^1.4.1",
--- a/core/core-frontend/src/api/template.ts
+++ b/core/core-frontend/src/api/template.ts
@ -2,33 +2,33 @@ import request from '@/config/axios'

 export function save(data) {
  return request.post({
-    url: '/template/save',
+    url: '/templateManage/save',
    data: data,
    loading: true
  })
 }
 export function templateDelete(id) {
  return request.post({
-    url: '/template/delete/' + id
+    url: '/templateManage/delete/' + id
  })
 }

 export function showTemplateList(data) {
  return request.post({
-    url: '/template/templateList',
+    url: '/templateManage/templateList',
    data: data
  })
 }

 export function findOne(id) {
  return request.get({
-    url: '/template/findOne/' + id
+    url: '/templateManage/findOne/' + id
  })
 }

 export function find(data) {
  return request.post({
-    url: '/template/find',
+    url: '/templateManage/find',
    data: data,
    loading: true
  })
@ -36,7 +36,7 @@ export function find(data) {

 export function nameCheck(data) {
  return request.post({
-    url: '/template/nameCheck',
+    url: '/templateManage/nameCheck',
    data: data
  })
 }
--- a/core/core-frontend/src/assets/none.png
+++ b/core/core-frontend/src/assets/none.png
--- a/core/core-frontend/src/assets/nothing.png
+++ b/core/core-frontend/src/assets/nothing.png
--- a/core/core-frontend/src/style/index.less
+++ b/core/core-frontend/src/style/index.less
@ -361,3 +361,9 @@ em {
    background-color: #1F232999;
  }
 }
+
+.de-icon-sense {
+  margin-right: 9px;
+  width: 16px !important;
+  height: 12px !important;
+}
--- a/core/core-frontend/src/utils/imgUtils.ts
+++ b/core/core-frontend/src/utils/imgUtils.ts
@ -1,6 +1,11 @@
 import html2canvas from 'html2canvas'
 import JsPDF from 'jspdf'
-
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
+import { findResourceAsBase64 } from '@/api/staticResource'
+import FileSaver from 'file-saver'
+const dvMainStore = dvMainStoreWithOut()
+const { canvasStyleData, componentData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore)
 const basePath = import.meta.env.VITE_API_BASEPATH

 export function imgUrlTrans(url) {
@ -20,6 +25,37 @@ export function imgUrlTrans(url) {
  }
 }

+export function download2AppTemplate(downloadType, canvasDom, name, callBack?) {
+  try {
+    findStaticSource(function (staticResource) {
+      html2canvas(canvasDom).then(canvas => {
+        const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.1是图片质量
+        if (snapshot !== '') {
+          const templateInfo = {
+            name: name,
+            templateType: 'self',
+            snapshot: snapshot,
+            dvType: dvInfo.value.type,
+            canvasStyleData: JSON.stringify(canvasStyleData.value),
+            componentData: JSON.stringify(componentData.value),
+            dynamicData: JSON.stringify(canvasViewInfo.value),
+            staticResource: JSON.stringify(staticResource || {})
+          }
+          const blob = new Blob([JSON.stringify(templateInfo)], { type: '' })
+          if (downloadType === 'template') {
+            FileSaver.saveAs(blob, name + '-TEMPLATE.DET2')
+          }
+        }
+        if (callBack) {
+          callBack()
+        }
+      })
+    })
+  } catch (e) {
+    console.error(e)
+  }
+}
+
 export function downloadCanvas(type, canvasDom, name, callBack?) {
  // const canvasDom = document.getElementById(canvasId)
  if (canvasDom) {
@ -56,15 +92,57 @@ export function downloadCanvas(type, canvasDom, name, callBack?) {
  }
 }

-export function dataURLToBlob(dataurl) {
+export function dataURLToBlob(dataUrl) {
  // ie 图片转格式
-  const arr = dataurl.split(',')
+  const arr = dataUrl.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
-  const bstr = atob(arr[1])
-  let n = bstr.length
+  const bStr = atob(arr[1])
+  let n = bStr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n)
+    u8arr[n] = bStr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
 }
+
+// 解析静态文件
+export function findStaticSource(callBack) {
+  const staticResource = []
+  // 系统背景文件
+  if (
+    typeof canvasStyleData.value.background === 'string' &&
+    canvasStyleData.value.background.indexOf('static-resource') > -1
+  ) {
+    staticResource.push(canvasStyleData.value.background)
+  }
+  componentData.value.forEach(item => {
+    if (
+      typeof item.commonBackground.outerImage === 'string' &&
+      item.commonBackground.outerImage.indexOf('static-resource') > -1
+    ) {
+      staticResource.push(item.commonBackground.outerImage)
+    }
+    if (
+      item.component === 'Picture' &&
+      item.propValue['url'] &&
+      typeof item.propValue['url'] === 'string' &&
+      item.propValue['url'].indexOf('static-resource') > -1
+    ) {
+      staticResource.push(item.propValue)
+    }
+  })
+  if (staticResource.length > 0) {
+    try {
+      findResourceAsBase64({ resourcePathList: staticResource }).then(rsp => {
+        callBack(rsp.data)
+      })
+    } catch (e) {
+      console.error('findResourceAsBase64 error', e)
+      callBack()
+    }
+  } else {
+    setTimeout(() => {
+      callBack()
+    }, 0)
+  }
+}
--- a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
+++ b/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
@ -10,7 +10,7 @@ import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'
-import { downloadCanvas } from '@/utils/imgUtils'
+import { download2AppTemplate, downloadCanvas } from '@/utils/imgUtils'

 const dvMainStore = dvMainStoreWithOut()
 const previewCanvasContainer = ref(null)
@ -89,7 +89,16 @@ const downloadH2 = type => {
    downloadCanvas(type, vueDom, state.dvInfo.name, () => {
      downloadStatus.value = false
    })
-  }, 200)
+  })
+}
+
+const downloadAsAppTemplate = downloadType => {
+  nextTick(() => {
+    const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
+    download2AppTemplate(downloadType, vueDom, state.dvInfo.name, () => {
+      downloadStatus.value = false
+    })
+  })
 }

 const slideOpenChange = () => {
@ -155,7 +164,12 @@ defineExpose({
      </div>
      <!--从store中判断当前是否有点击仪表板 复用时也符合-->
      <template v-if="previewShowFlag">
-        <preview-head v-if="showPosition === 'preview'" @reload="reload" @download="downloadH2" />
+        <preview-head
+          v-if="showPosition === 'preview'"
+          @reload="reload"
+          @download="downloadH2"
+          @downloadAsAppTemplate="downloadAsAppTemplate"
+        />
        <div ref="previewCanvasContainer" class="content">
          <de-preview
            ref="dashboardPreview"
--- a/core/core-frontend/src/views/data-visualization/PreviewHead.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewHead.vue
@ -8,7 +8,7 @@ import { ref, watch } from 'vue'
 import { XpackComponent } from '@/components/plugin'
 const dvMainStore = dvMainStoreWithOut()
 const { dvInfo } = storeToRefs(dvMainStore)
-const emit = defineEmits(['reload', 'download'])
+const emit = defineEmits(['reload', 'download', 'downloadAsAppTemplate'])
 const { t } = useI18n()

 const favorited = ref(false)
@ -24,6 +24,9 @@ const reload = () => {
 const download = type => {
  emit('download', type)
 }
+const downloadAsAppTemplate = downloadType => {
+  emit('downloadAsAppTemplate', downloadType)
+}

 const dvEdit = () => {
  const baseUrl = dvInfo.value.type === 'dataV' ? '#/dvCanvas?dvId=' : '#/dashboard?resourceId='
@ -124,6 +127,9 @@ watch(
                  <el-dropdown-item style="width: 118px" @click="download('pdf')"
                    >PDF</el-dropdown-item
                  >
+                  <el-dropdown-item style="width: 118px" @click="downloadAsAppTemplate('template')"
+                    >模版</el-dropdown-item
+                  >
                  <el-dropdown-item @click="download('img')">{{
                    t('chart.image')
                  }}</el-dropdown-item>
--- a/core/core-frontend/src/views/system/template-setting/index.vue
+++ b/core/core-frontend/src/views/system/template-setting/index.vue
@ -1,3 +1,48 @@
 <template>
-  <h2>template setting page for jiahao.wang</h2>
+  <p class="router-title">模版管理</p>
+  <div class="sys-setting-p">
+    <div class="container-sys-param">
+      <template-manage></template-manage>
+    </div>
+  </div>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import TemplateManage from '@/views/template/index.vue'
+
+const { t } = useI18n()
+
+const activeName = ref('basic')
+const handleClick = (tab, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+<style lang="less">
+.router-title {
+  color: #1f2329;
+  font-feature-settings: 'clig' off, 'liga' off;
+  font-family: PingFang SC;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 28px;
+}
+.sys-setting-p {
+  width: 100%;
+  background: var(--ContentBG, #ffffff);
+  height: calc(100vh - 176px);
+  box-sizing: border-box;
+  margin-top: 12px;
+}
+.setting-auto-h {
+  height: auto !important;
+}
+
+.container-sys-param {
+  height: 100%;
+  overflow-y: auto;
+}
+</style>
+<style lang="less" scoped></style>
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@ -1,3 +1,6 @@
 <template>
-  <h2>template marget page for jiahao.wang</h2>
+  <template-manage></template-manage>
 </template>
+<script setup lang="ts">
+import TemplateManage from '@/views/template/index.vue'
+</script>
--- a/core/core-frontend/src/views/template/component/DeTemplateImport.vue
+++ b/core/core-frontend/src/views/template/component/DeTemplateImport.vue
@ -6,17 +6,17 @@
      :model="state.templateInfo"
      :rules="state.templateInfoRules"
    >
-      <el-form-item :label="t('system_parameter_setting.template_name')" prop="name">
+      <el-form-item :label="'模版名称'" 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')
+            t('visualization.upload_template')
          }}</el-button>
          <input
            id="input"
            ref="filesRef"
            type="file"
-            accept=".DET"
+            accept=".DET2"
            hidden
            @change="handleFileChange"
          />
@ -25,8 +25,8 @@
    </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-button secondary @click="cancel()">{{ t('commons.cancel') }}</el-button>
+      <el-button type="primary" @click="saveTemplate()">{{ t('commons.confirm') }}</el-button>
    </el-row>
  </div>
 </template>
@ -65,6 +65,7 @@ const state = reactive({
  templateInfo: {
    level: '1',
    pid: props.pid,
+    dvType: 'dashboard',
    name: '',
    templateStyle: null,
    templateData: null,
@ -115,7 +116,7 @@ const saveTemplate = () => {
        type: 'primary',
        cb: () =>
          save(state.templateInfo).then(response => {
-            ElMessage.success(t('system_parameter_setting.import_succeeded'))
+            ElMessage.success('导入成功')
            emits('refresh')
            emits('closeEditTemplateDialog')
          }),
@ -124,7 +125,7 @@ const saveTemplate = () => {
      handlerConfirm(options)
    } else {
      save(state.templateInfo).then(response => {
-        ElMessage.success(t('system_parameter_setting.import_succeeded'))
+        ElMessage.success(t('导入成功'))
        emits('refresh')
        emits('closeEditTemplateDialog')
      })
@ -143,8 +144,9 @@ const handleFileChange = e => {
    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.dvType = state.importTemplateInfo['dvType']
+    state.templateInfo.templateStyle = state.importTemplateInfo['canvasStyleData']
+    state.templateInfo.templateData = state.importTemplateInfo['componentData']
    state.templateInfo.snapshot = state.importTemplateInfo.snapshot
    state.templateInfo.dynamicData = state.importTemplateInfo['dynamicData']
    state.templateInfo.staticResource = state.importTemplateInfo['staticResource']
@ -161,7 +163,7 @@ onMounted(() => {
 })
 </script>

-<style scoped>
+<style scoped lang="less">
 .my_table :deep(.el-table__row > td) {
  /* 去除表格线 */
  border: none;
@ -178,7 +180,7 @@ onMounted(() => {

 .de-root-class {
  margin-top: 24px;
-  text-align: right;
+  justify-content: flex-end;
 }
 .preview {
  margin-top: -12px;
--- a/core/core-frontend/src/views/template/component/DeTemplateItem.vue
+++ b/core/core-frontend/src/views/template/component/DeTemplateItem.vue
@ -1,23 +1,35 @@
 <template>
  <div :style="classBackground" class="de-card-model">
    <div class="card-img-model" :style="classImg">
-      <img :src="model.snapshot" alt="" />
+      <img :src="imgUrlTrans(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>
+      <div style="display: flex; align-items: center">
+        <el-tooltip class="item" effect="dark" :content="dvTypeName" placement="top">
+          <el-icon style="font-size: 18px" v-if="model.dvType === 'dashboard'">
+            <Icon name="dv-dashboard-spine"></Icon>
+          </el-icon>
+          <el-icon class="icon-screen-new" style="font-size: 18px" v-else>
+            <Icon name="icon_operation-analysis_outlined"></Icon>
+          </el-icon>
+        </el-tooltip>
+
+        <el-tooltip class="item" effect="dark" :content="model.name" placement="top">
+          <span class="de-model-text">{{ model.name }}</span>
+        </el-tooltip>
+      </div>
+
      <el-dropdown size="medium" trigger="click" @command="handleCommand">
-        <i class="el-icon-more" />
+        <el-icon class="el-icon-more"><MoreFilled /></el-icon>
        <template #dropdown>
          <el-dropdown-menu class="de-card-dropdown">
            <slot>
              <el-dropdown-item command="rename">
-                <i class="el-icon-edit" />
+                <el-icon><EditPen /></el-icon>
                {{ $t('chart.rename') }}
              </el-dropdown-item>
              <el-dropdown-item command="delete">
-                <i class="el-icon-delete" />
+                <el-icon><Delete /></el-icon>
                {{ $t('chart.delete') }}
              </el-dropdown-item>
            </slot>
@ -29,6 +41,7 @@
 </template>

 <script setup lang="ts">
+import { imgUrlTrans } from '@/utils/imgUtils'
 import { computed } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
@ -43,6 +56,10 @@ const props = defineProps({
  }
 })

+const dvTypeName = computed(() => {
+  return props.model.dvType === 'dashboard' ? '仪表板' : '数据大屏'
+})
+
 const classBackground = computed(() => {
  return {
    width: props.width + 'px',
@ -68,6 +85,7 @@ const handleCommand = key => {
  border: 1px solid var(--deCardStrokeColor, #dee0e3);
  border-radius: 4px;
  margin: 0 24px 25px 0;
+  overflow: hidden;
  .card-img-model {
    border-bottom: 1px solid var(--deCardStrokeColor, #dee0e3);
    height: 144px;
@ -112,6 +130,7 @@ const handleCommand = key => {
  }

  .de-model-text {
+    margin-left: 8px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
@ -137,4 +156,11 @@ const handleCommand = key => {
    display: none !important;
  }
 }
+
+.icon-screen-new {
+  background: #3370ff;
+  border-radius: 4px;
+  color: #fff;
+  padding: 3px;
+}
 </style>
--- a/core/core-frontend/src/views/template/component/DeTemplateList.vue
+++ b/core/core-frontend/src/views/template/component/DeTemplateList.vue
@ -2,24 +2,26 @@
  <div class="de-template-list">
    <el-input
      v-model="state.templateFilterText"
-      :placeholder="t('system_parameter_setting.search_keywords')"
+      :placeholder="'搜索关键字'"
      size="small"
      class="de-input-search"
      clearable
    >
      <template #prefix>
-        <svg-icon icon-class="de-search" />
+        <el-icon>
+          <Icon name="de-search" />
+        </el-icon>
      </template>
    </el-input>
    <el-empty
      v-if="!templateListComputed.length && state.templateFilterText === ''"
-      :image="state.noneImg"
-      :description="t('components.no_classification')"
+      :image="NoneImage"
+      :description="'当前无分类'"
    />
    <el-empty
      v-if="!templateListComputed.length && state.templateFilterText !== ''"
-      :image="state.nothingImg"
-      :description="t('components.relevant_content_found')"
+      :image="NothingImage"
+      :description="'没有找到相关内容'"
    />
    <ul>
      <li
@ -28,7 +30,9 @@
        :class="[{ select: state.activeTemplate === ele.id }]"
        @click="nodeClick(ele)"
      >
-        <svg-icon icon-class="scene" class="de-icon-sense" />
+        <el-icon class="de-icon-sense">
+          <Icon name="scene" />
+        </el-icon>
        <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)">
@ -38,13 +42,13 @@
            <template #dropdown>
              <el-dropdown-menu class="de-template-dropdown">
                <el-dropdown-item icon="el-icon-upload2" command="import">
-                  {{ t('panel.import') }}
+                  {{ t('visualization.import') }}
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-edit" command="edit">
-                  {{ t('panel.rename') }}
+                  {{ t('visualization.rename') }}
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-delete" command="delete">
-                  {{ t('panel.delete') }}
+                  {{ t('visualization.delete') }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
@ -59,7 +63,7 @@
      secondary
      @click="add()"
    >
-      {{ t('panel.add_category') }}
+      {{ t('visualization.add_category') }}
    </el-button>
  </div>
 </template>
@ -67,6 +71,8 @@
 <script setup lang="ts">
 import { useI18n } from '@/hooks/web/useI18n'
 import { computed, reactive } from 'vue'
+import NoneImage from '@/assets/none.png'
+import NothingImage from '@/assets/nothing.png'
 const { t } = useI18n()

 const emits = defineEmits([
@ -93,7 +99,7 @@ const props = defineProps({
 const state = reactive({
  templateFilterText: '',
  activeTemplate: '',
-  noneImg: '@/assets/None.png',
+  noneImg: '@/assets/none.png',
  nothingImg: '@/assets/nothing.png'
 })

@ -141,6 +147,10 @@ const templateImport = template => {
 const handlerConfirm = options => {
  // do handlerConfirm
 }
+
+defineExpose({
+  nodeClick
+})
 </script>

 <style scoped lang="less">
@ -244,4 +254,9 @@ const handlerConfirm = options => {
    display: none !important;
  }
 }
+
+.sense {
+  width: 20px;
+  height: 20px;
+}
 </style>
--- a/core/core-frontend/src/views/template/index.vue
+++ b/core/core-frontend/src/views/template/index.vue
@ -1,21 +1,21 @@
 <template>
-  <div>
+  <div style="width: 100%; height: 100%">
    <div class="de-template">
-      <el-tabs v-model="state.currentTemplateType" class="de-tabs" @tab-click="handleClick">
+      <el-tabs v-model="state.currentTemplateType" @tab-click="handleClick">
        <el-tab-pane name="self">
          <template #label>
-            <span>{{ t('panel.user_template') }}</span>
+            <span>{{ t('visualization.user_template') }}</span>
          </template>
        </el-tab-pane>
        <el-tab-pane name="system">
          <template #label>
-            <span>{{ t('panel.sys_template') }}</span>
+            <span>{{ t('visualization.sys_template') }}</span>
          </template>
        </el-tab-pane>
      </el-tabs>
      <div class="tabs-container flex-tabs">
        <div class="de-tabs-left">
-          <template-list
+          <de-template-list
            ref="templateListRef"
            :template-type="state.currentTemplateType"
            :template-list="state.templateList"
@ -31,19 +31,19 @@
            {{ state.currentTemplateLabel }}&nbsp;&nbsp;({{ state.currentTemplateShowList.length }})
            <el-button
              type="primary"
-              icon="el-icon-upload2"
+              icon="Upload"
              @click="templateImport(state.currentTemplateId)"
            >
-              {{ t('panel.import') }}
+              {{ t('visualization.import') }}
            </el-button>
          </div>
          <el-empty
            v-if="!state.currentTemplateShowList.length"
-            :image="state.noneImg"
-            :description="t('components.no_template')"
+            :image="NoneImage"
+            :description="'暂无模版'"
          />
          <div v-show="state.currentTemplateId !== ''" id="template-box" class="template-box">
-            <template-item
+            <de-template-item
              v-for="item in state.currentTemplateShowList"
              :key="item.id"
              :width="state.templateCurWidth"
@ -56,7 +56,7 @@
    </div>
    <el-dialog
      :title="state.dialogTitle"
-      v-model:visible="state.editTemplate"
+      v-model="state.editTemplate"
      append-to-body
      class="de-dialog-form"
      width="600px"
@ -80,16 +80,15 @@
        </div>
      </template>
    </el-dialog>
-
-    <!--导入templatedialog-->
+    <!--导入templateDialog-->
    <el-dialog
      :title="state.templateDialog.title"
-      v-model:visible="state.templateDialog.visible"
+      v-model="state.templateDialog.visible"
      :show-close="true"
      class="de-dialog-form"
      width="600px"
    >
-      <template-import
+      <de-template-import
        v-if="state.templateDialog.visible"
        :pid="state.templateDialog.pid"
        @refresh="showCurrentTemplate(state.currentTemplateId, state.currentTemplateLabel)"
@ -105,10 +104,13 @@ 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'
+import DeTemplateList from '@/views/template/component/DeTemplateList.vue'
 const { t } = useI18n()
 const templateEditFormRef = ref(null)
 const templateListRef = ref(null)
+import NoneImage from '@/assets/none.png'
+import DeTemplateImport from '@/views/template/component/DeTemplateImport.vue'
+import DeTemplateItem from '@/views/template/component/DeTemplateItem.vue'

 const roleValidator = (rule, value, callback) => {
  if (nameRepeat(value)) {
@ -160,7 +162,7 @@ const state = reactive({
  formType: '',
  originName: '',
  templateDialog: {
-    title: t('panel.import_template'),
+    title: t('visualization.import_template'),
    visible: false,
    pid: ''
  }
@ -251,14 +253,10 @@ const showTemplateEditDialog = (type, templateInfo) => {
  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.dialogTitle = state.templateEditForm['nodeType'] === 'folder' ? '编辑分类' : '编辑模版'
    state.originName = state.templateEditForm['label']
  } else {
-    state.dialogTitle = t('panel.add_category')
+    state.dialogTitle = t('visualization.add_category')
    state.templateEditForm = {
      name: '',
      nodeType: 'folder',
@ -266,11 +264,7 @@ const showTemplateEditDialog = (type, templateInfo) => {
      level: 0
    }
  }
-  state.dialogTitleLabel = t(
-    `system_parameter_setting.${
-      state.templateEditForm['nodeType'] === 'folder' ? 'classification_name' : 'template_name'
-    }`
-  )
+  state.dialogTitleLabel = state.templateEditForm['nodeType'] === 'folder' ? '分类名称' : '模版名称'
  state.editTemplate = true
 }

@ -300,13 +294,15 @@ const close = () => {
  state.editTemplate = false
 }
 const getTree = () => {
-  const request = {
-    templateType: state.currentTemplateType,
-    level: '0'
-  }
-  find(request).then(res => {
-    state.templateList = res.data
-    showFirst()
+  nextTick(() => {
+    const request = {
+      templateType: state.currentTemplateType,
+      level: '0'
+    }
+    find(request).then(res => {
+      state.templateList = res.data
+      showFirst()
+    })
  })
 }
 const showFirst = () => {
@ -367,6 +363,7 @@ onMounted(() => {
  }

  .flex-tabs {
+    margin-top: 16px;
    display: flex;
    background: #f5f6f7;
  }
--- 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
@ -9,7 +9,7 @@ import java.util.List;
 public interface TemplateManageApi {

    @PostMapping("/templateList")
-     List<TemplateManageDTO> templateList();
+     List<TemplateManageDTO> templateList(TemplateManageRequest request);

    @PostMapping("/save")
    TemplateManageDTO save(@RequestBody TemplateManageRequest request);
--- a/sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateManageFileDTO.java
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateManageFileDTO.java
@ -0,0 +1,26 @@
+package io.dataease.api.template.dto;
+
+
+import io.dataease.api.template.vo.VisualizationTemplateVO;
+import lombok.Data;
+
+import java.util.List;
+
+
+@Data
+public class TemplateManageFileDTO extends VisualizationTemplateVO {
+
+    /**
+     * 样式数据
+     */
+    private String canvasStyleData;
+
+    /**
+     * 组件数据
+     */
+    private String componentData;
+
+
+    private String staticResource;
+
+}
--- a/sdk/api/api-base/src/main/java/io/dataease/api/visualization/DataVisualizationApi.java
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/visualization/DataVisualizationApi.java
@ -11,6 +11,7 @@ import io.dataease.auth.DePermit;
 import io.dataease.model.BusiNodeRequest;
 import io.dataease.model.BusiNodeVO;
 import org.springframework.web.bind.annotation.*;
+import org.springframework.web.multipart.MultipartFile;

 import java.util.List;

@ -63,4 +64,21 @@ public interface DataVisualizationApi {

    @GetMapping("/findDvType/{dvId}")
    String findDvType(@PathVariable("dvId")Long dvId);
+
+    /**
+     * 从模版解压可视化资源 模版来源包括 模版市场、内部模版管理
+     *
+     * @return
+     */
+    @PostMapping("/decompression")
+    DataVisualizationVO decompression(@RequestBody DataVisualizationBaseRequest request) throws Exception;
+
+    /**
+     * 从模版解压可视化资源 模版来源包括本地上传
+     *
+     * @return
+     */
+    @PostMapping("/decompressionLocalFile")
+    DataVisualizationVO decompressionLocalFile(@RequestPart(value = "file") MultipartFile file);
+
 }
--- a/sdk/api/api-base/src/main/java/io/dataease/api/visualization/request/DataVisualizationBaseRequest.java
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/visualization/request/DataVisualizationBaseRequest.java
@ -10,4 +10,16 @@ public class DataVisualizationBaseRequest extends DataVisualizationVO {

    private Boolean moveFromUpdate = false;

+    private String optType;
+
+    private String newFrom;
+
+    private String dynamicData;
+
+    private String templateId;
+
+    private String staticResource;
+
+    private String templateUrl;
+
 }
--- a/sdk/api/api-base/src/main/java/io/dataease/api/visualization/vo/DataVisualizationVO.java
+++ b/sdk/api/api-base/src/main/java/io/dataease/api/visualization/vo/DataVisualizationVO.java
@ -4,6 +4,7 @@ import com.fasterxml.jackson.databind.annotation.JsonSerialize;
 import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
 import io.dataease.api.chart.dto.ChartViewDTO;
 import lombok.Data;
+import lombok.NoArgsConstructor;

 import java.io.Serializable;
 import java.util.HashMap;
@ -11,6 +12,7 @@ import java.util.List;
 import java.util.Map;

@Data
+@NoArgsConstructor
 public class DataVisualizationVO  implements Serializable {

    @JsonSerialize(using = ToStringSerializer.class)
@ -120,4 +122,13 @@ public class DataVisualizationVO  implements Serializable {
     * 视图基本信息
     */
    private Map<Long,ChartViewDTO> canvasViewInfo = new HashMap<>();
+
+    public DataVisualizationVO(Long id, String name, String type, String canvasStyleData, String componentData, Map<Long,ChartViewDTO> canvasViewInfo) {
+        this.id = id;
+        this.name = name;
+        this.type = type;
+        this.canvasStyleData = canvasStyleData;
+        this.componentData = componentData;
+        this.canvasViewInfo = canvasViewInfo;
+    }
 }