refactor: UI调整，增加调试信息

2023-12-01 16:26:08 +08:00 · 2023-12-01 16:26:08 +08:00 · c355e6a66e
commit c355e6a66e
parent 93a7b23180
5 changed files with 139 additions and 68 deletions
--- 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`;
+    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);
--- 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;
--- a/core/core-frontend/config/base.ts
+++ b/core/core-frontend/config/base.ts
@ -26,6 +26,6 @@ export default {
        }
      }
    },
-    sourcemap: false
+    sourcemap: true
  }
 }
--- a/core/core-frontend/src/views/template-market/component/CategoryTemplate.vue
+++ 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>
--- 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) => {