From c355e6a66e733e423ca540958e9573ef5b13ee8d Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 1 Dec 2023 16:26:08 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20UI=E8=B0=83=E6=95=B4=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=B0=83=E8=AF=95=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/resources/db/desktop/V2.1__ddl.sql   |   5 +-
 .../main/resources/db/migration/V2.1__ddl.sql |   4 +-
 core/core-frontend/config/base.ts             |   2 +-
 .../component/CategoryTemplate.vue            | 103 ++++++++++++++++++
 .../src/views/template-market/index.vue       |  93 +++++-----------
 5 files changed, 139 insertions(+), 68 deletions(-)
 create mode 100644 core/core-frontend/src/views/template-market/component/CategoryTemplate.vue

diff --git 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
index 94fd98f6ff..7407153084 100644
--- 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
@@ -36,4 +36,7 @@ CREATE TABLE `visualization_template_extend_data` (
 
 ALTER TABLE `core_opt_recent`
     MODIFY COLUMN `resource_id` bigint NULL COMMENT '资源ID' AFTER `id`,
-    ADD COLUMN `resource_name` varchar(255) NULL COMMENT '资源名称' AFTER `resource_id`;
\ No newline at end of file
+    ADD COLUMN `resource_name` varchar(255) NULL COMMENT '资源名称' AFTER `resource_id`;
+
+INSERT INTO `core_sys_setting` (`id`, `pkey`, `pval`, `type`, `sort`) VALUES (7, 'template.url', 'https://templates-de.fit2cloud.com', 'text', 0);
+INSERT INTO `core_sys_setting` (`id`, `pkey`, `pval`, `type`, `sort`) VALUES (8, 'template.accessKey', 'dataease', 'text', 1);
diff --git 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
index cf35e2b70f..a73fbe89a1 100644
--- 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
@@ -54,4 +54,6 @@ CREATE TABLE `core_area_custom`
 BEGIN;
 INSERT INTO `core_sys_setting` VALUES (1, 'basic.dsIntervalTime', '6', 'text', 2);
 INSERT INTO `core_sys_setting` VALUES (2, 'basic.dsExecuteTime', 'minute', 'text', 3);
-COMMIT;
+INSERT INTO `core_sys_setting` (`id`, `pkey`, `pval`, `type`, `sort`) VALUES (7, 'template.url', 'https://templates-de.fit2cloud.com', 'text', 0);
+INSERT INTO `core_sys_setting` (`id`, `pkey`, `pval`, `type`, `sort`) VALUES (8, 'template.accessKey', 'dataease', 'text', 1);
+COMMIT;
\ No newline at end of file
diff --git a/core/core-frontend/config/base.ts b/core/core-frontend/config/base.ts
index 61513f83d1..ddb203e13c 100644
--- a/core/core-frontend/config/base.ts
+++ b/core/core-frontend/config/base.ts
@@ -26,6 +26,6 @@ export default {
         }
       }
     },
-    sourcemap: false
+    sourcemap: true
   }
 }
diff --git a/core/core-frontend/src/views/template-market/component/CategoryTemplate.vue b/core/core-frontend/src/views/template-market/component/CategoryTemplate.vue
new file mode 100644
index 0000000000..fbdbf3d1a2
--- /dev/null
+++ b/core/core-frontend/src/views/template-market/component/CategoryTemplate.vue
@@ -0,0 +1,103 @@
+<template>
+  <el-col class="main-head">
+    <div class="custom-split-line"></div>
+    <span v-show="!searchText" class="custom-category">{{ label }}</span>
+    <span v-show="searchText" class="custom-search">{{ label }}</span>
+    <span v-if="searchText" class="custom-search-result"
+      >的搜索结果是{{ fullTemplateShowList.length }}个</span
+    >
+  </el-col>
+  <el-col
+    v-for="(templateItem, index) in fullTemplateShowList"
+    v-show="templateItem.showFlag"
+    :key="templateItem.id + label"
+    style="float: left; padding: 24px 12px 0; text-align: center; flex: 0"
+    :style="{ width: templateSpan }"
+  >
+    <template-market-v2-item
+      :key="index"
+      :template="templateItem"
+      :base-url="baseUrl"
+      :width="templateCurWidth"
+      :cur-position="curPosition"
+      @templateApply="templateApply"
+      @templatePreview="templatePreview"
+    />
+  </el-col>
+</template>
+
+<script setup lang="ts">
+import TemplateMarketV2Item from '@/views/template-market/component/TemplateMarketV2Item.vue'
+const emits = defineEmits(['templateApply', 'templatePreview'])
+
+const templateApply = params => {
+  emits('templateApply', params)
+}
+
+const templatePreview = params => {
+  emits('templatePreview', params)
+}
+
+const props = defineProps({
+  searchText: {
+    type: String
+  },
+  baseUrl: {
+    type: String
+  },
+  templateCurWidth: {
+    type: Number
+  },
+  curPosition: {
+    type: String
+  },
+  templateSpan: {
+    type: String
+  },
+  label: {
+    type: String
+  },
+  fullTemplateShowList: {
+    type: Array,
+    default: () => []
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.main-head {
+  width: 100%;
+  float: left;
+  height: 24px;
+  margin-top: 16px;
+  display: inline;
+  .custom-split-line {
+    margin: 4px 8px 0 12px;
+    width: 2px;
+    height: 16px;
+    background: rgba(51, 112, 255, 1);
+    float: left;
+  }
+  .custom-category {
+    float: left;
+    font-weight: 500;
+    font-size: 16px;
+    color: rgba(31, 35, 41, 1);
+  }
+  .custom-search {
+    float: left;
+    font-weight: 500;
+    font-size: 16px;
+    color: rgba(51, 112, 255, 1);
+    margin-right: 8px;
+  }
+
+  .custom-search-result {
+    float: left;
+    font-weight: 500;
+    font-size: 16px;
+    color: rgba(31, 35, 41, 1);
+    margin-right: 8px;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/template-market/index.vue b/core/core-frontend/src/views/template-market/index.vue
index 0b6275ccad..53082db7a4 100644
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@@ -102,75 +102,39 @@
           id="template-show-area"
           class="template-right"
         >
-          <template v-if="state.marketActiveTab !== '推荐'">
-            <el-col class="main-head">
-              <div class="custom-split-line"></div>
-              <span v-show="!state.searchText" class="custom-category">{{
-                state.marketActiveTab
-              }}</span>
-              <span v-show="state.searchText" class="custom-search">{{
-                state.marketActiveTab
-              }}</span>
-              <span v-if="state.searchText" class="custom-search-result"
-                >的搜索结果是{{ searchResultCount }}个</span
-              >
-            </el-col>
-            <el-col
-              v-for="templateItem in state.currentMarketTemplateShowList"
-              v-show="templateItem.showFlag"
-              :key="templateItem.id"
-              style="float: left; padding: 24px 12px 0; text-align: center; flex: 0"
-              :style="{ width: state.templateSpan }"
-            >
-              <template-market-v2-item
-                :key="'outer-' + templateItem.id"
-                :template="templateItem"
-                :base-url="state.baseUrl"
-                :width="state.templateCurWidth"
-                :cur-position="state.curPosition"
-                @templateApply="templateApply"
-                @templatePreview="templatePreview"
-              />
-            </el-col>
-          </template>
+          <el-row style="display: inline" v-show="state.marketActiveTab !== '推荐'">
+            <category-template
+              :search-text="state.searchText"
+              :label="state.marketActiveTab"
+              :full-template-show-list="state.currentMarketTemplateShowList"
+              :template-span="state.templateSpan"
+              :base-url="state.baseUrl"
+              :template-cur-width="state.templateCurWidth"
+              :cur-position="state.curPosition"
+              @templateApply="templateApply"
+              @templatePreview="templatePreview"
+            ></category-template>
+          </el-row>
 
           <template v-if="state.marketActiveTab === '推荐'">
             <el-row
               :key="'full-' + categoryItem.label"
               style="display: inline; margin-bottom: 16px"
               v-for="categoryItem in categoriesComputed.filter(
-                item => !['最近使用', '推荐'].includes(item.label)
+                item => !['最近使用', '推荐'].includes(item['label'])
               )"
             >
-              <el-col class="main-head">
-                <div class="custom-split-line"></div>
-                <span v-show="!state.searchText" class="custom-category">{{
-                  categoryItem.label
-                }}</span>
-                <span v-show="state.searchText" class="custom-search">{{
-                  categoryItem.label
-                }}</span>
-                <span v-if="state.searchText" class="custom-search-result"
-                  >的搜索结果是{{ fullTemplateShowList(categoryItem.label).length }}个</span
-                >
-              </el-col>
-              <el-col
-                v-for="templateItem in fullTemplateShowList(categoryItem.label)"
-                v-show="templateItem.showFlag"
-                :key="templateItem.id + categoryItem.label"
-                style="float: left; padding: 24px 12px 0; text-align: center; flex: 0"
-                :style="{ width: state.templateSpan }"
-              >
-                <template-market-v2-item
-                  :key="'outer-' + templateItem.id"
-                  :template="templateItem"
-                  :base-url="state.baseUrl"
-                  :width="state.templateCurWidth"
-                  :cur-position="state.curPosition"
-                  @templateApply="templateApply"
-                  @templatePreview="templatePreview"
-                />
-              </el-col>
+              <categoery-template
+                :search-text="state.searchText"
+                :label="categoryItem.label"
+                :full-template-show-list="fullTemplateShowList(categoryItem.label)"
+                :template-span="state.templateSpan"
+                :base-url="state.baseUrl"
+                :template-cur-width="state.templateCurWidth"
+                :cur-position="state.curPosition"
+                @templateApply="templateApply"
+                @templatePreview="templatePreview"
+              ></categoery-template>
             </el-row>
           </template>
         </div>
@@ -198,13 +162,12 @@ import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus-secondary'
 import { decompression } from '@/api/visualization/dataVisualization'
 import { useCache } from '@/hooks/web/useCache'
-import TemplateMarketV2Item from '@/views/template-market/component/TemplateMarketV2Item.vue'
 import MarketPreviewV2 from '@/views/template-market/component/MarketPreviewV2.vue'
-import { propTypes } from '@/utils/propTypes'
 import { imgUrlTrans } from '@/utils/imgUtils'
+import CategoryTemplate from '@/views/template-market/component/CategoryTemplate.vue'
+import { deepCopy } from '@/utils/utils'
 const { t } = useI18n()
 const { wsCache } = useCache()
-const route = useRoute()
 
 // full 正常展示 marketPreview 模板中心预览 createPreview 创建界面预览
 const previewModel = ref('full')
@@ -482,7 +445,7 @@ const fullTemplateShowList = curTab => {
   state.currentMarketTemplateShowList.forEach(template => {
     template.showFlag = templateShow(template, curTab)
   })
-  return state.currentMarketTemplateShowList.filter(ele => ele.showFlag)
+  return deepCopy(state.currentMarketTemplateShowList.filter(ele => ele.showFlag))
 }
 
 const templateShow = (templateItem, activeTab) => {