style: UI (#6974)

* refactor: UI

* refactor: UI

* refactor: UI

core/core-frontend/src/views/template-market/component/CategoryTemplateV2.vue

@@ -3,13 +3,11 @@
     <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
-    >
+    <span v-if="searchText" class="custom-search-result">的搜索结果是{{ searchResult }}个</span>
   </el-col>
   <el-col
     v-for="(templateItem, index) in fullTemplateShowList"
-    v-show="templateItem.showFlag"
+    v-show="showFlagCheck(templateItem)"
     :key="templateItem.id + label"
     style="float: left; padding: 24px 12px 0; text-align: center; flex: 0"
     :style="{ width: templateSpan }"
@@ -28,6 +26,7 @@
 
 <script setup lang="ts">
 import TemplateMarketV2Item from '@/views/template-market/component/TemplateMarketV2Item.vue'
+import { computed } from 'vue'
 const emits = defineEmits(['templateApply', 'templatePreview'])
 
 const templateApply = params => {
@@ -38,6 +37,17 @@ const templatePreview = params => {
   emits('templatePreview', params)
 }
 
+const searchResult = computed(
+  () => props.fullTemplateShowList.filter(item => showFlagCheck(item)).length
+)
+
+const showFlagCheck = template => {
+  if (!template.categoryNames) {
+    console.log('===templateTest' + JSON.stringify(template))
+  }
+  return template.showFlag && template.categoryNames?.includes(props.label)
+}
+
 const props = defineProps({
   searchText: {
     type: String

core/core-frontend/src/views/template-market/index.vue

@@ -102,8 +102,8 @@
           id="template-show-area"
           class="template-right"
         >
-          <el-row style="display: inline" v-show="state.marketActiveTab !== '推荐'">
-            <category-template
+          <el-row v-show="state.marketActiveTab !== '推荐'">
+            <category-template-v2
               :search-text="state.searchText"
               :label="state.marketActiveTab"
               :full-template-show-list="state.currentMarketTemplateShowList"
@@ -113,30 +113,28 @@
               :cur-position="state.curPosition"
               @templateApply="templateApply"
               @templatePreview="templatePreview"
-            ></category-template>
+            ></category-template-v2>
           </el-row>
-
-          <template v-if="state.marketActiveTab === '推荐'">
+          <el-row v-show="state.marketActiveTab === '推荐'">
             <el-row
-              :key="'full-' + categoryItem.label"
-              style="display: inline; margin-bottom: 16px"
-              v-for="categoryItem in categoriesComputed.filter(
-                item => !['最近使用', '推荐'].includes(item['label'])
-              )"
+              style="display: inline; width: 100%; margin-bottom: 16px"
+              v-for="(categoryItem, index) in categoriesComputed"
+              :key="index"
             >
-              <categoery-template
+              <category-template-v2
+                v-if="categoryItem.label !== '最近使用'"
                 :search-text="state.searchText"
                 :label="categoryItem.label"
-                :full-template-show-list="fullTemplateShowList(categoryItem.label)"
+                :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"
-              ></categoery-template>
+              ></category-template-v2>
+            </el-row>
           </el-row>
-          </template>
         </div>
         <el-row v-show="state.networkStatus && !state.hasResult" class="template-empty">
           <div style="text-align: center">
@@ -154,18 +152,17 @@
 </template>
 
 <script setup lang="ts">
-import { getCategoriesObject, searchMarket } from '@/api/templateMarket'
+import { searchMarket } from '@/api/templateMarket'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import { nextTick, reactive, watch, onMounted, ref, computed } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
-import { useRoute } from 'vue-router'
 import { ElMessage } from 'element-plus-secondary'
 import { decompression } from '@/api/visualization/dataVisualization'
 import { useCache } from '@/hooks/web/useCache'
 import MarketPreviewV2 from '@/views/template-market/component/MarketPreviewV2.vue'
 import { imgUrlTrans } from '@/utils/imgUtils'
-import CategoryTemplate from '@/views/template-market/component/CategoryTemplate.vue'
 import { deepCopy } from '@/utils/utils'
+import CategoryTemplateV2 from '@/views/template-market/component/CategoryTemplateV2.vue'
 const { t } = useI18n()
 const { wsCache } = useCache()
 
@@ -179,42 +176,6 @@ const close = () => {
 
 const title = computed(() => (state.curPosition === 'branch' ? '模板中心' : '使用模版新建'))
 
-const categoriesComputed = computed(() => {
-  if (state.templateSourceType === 'all') {
-    return state.marketTabs
-  } else {
-    return state.marketTabs.filter(
-      category => category.source === 'public' || category.source === state.templateSourceType
-    )
-  }
-})
-
-const curTemplateImg = computed(() => {
-  if (
-    state.curTemplate.thumbnail.indexOf('http') > -1 ||
-    state.curTemplate.thumbnail.indexOf('static-resource') > -1
-  ) {
-    return imgUrlTrans(state.curTemplate.thumbnail)
-  } else {
-    return imgUrlTrans(state.baseUrl + state.curTemplate.thumbnail)
-  }
-})
-
-const outPaddingState = computed(() => {
-  return state.curPosition === 'branch' && previewModel.value !== 'marketPreview'
-})
-
-const optInit = params => {
-  state.initReady = false
-  state.curPosition = params.curPosition
-  state.templateType = params.templateType
-  previewModel.value = 'full'
-  state.pid = params.pid
-  nextTick(() => {
-    state.initReady = true
-  })
-}
-
 const state = reactive({
   initReady: true,
   curPosition: 'branch',
@@ -303,6 +264,44 @@ const state = reactive({
   }
 })
 
+const categoriesComputed = computed(() => {
+  let result
+  if (state.templateSourceType === 'all') {
+    result = state.marketTabs
+  } else {
+    result = state.marketTabs.filter(
+      category => category.source === 'public' || category.source === state.templateSourceType
+    )
+  }
+  console.log('categoriesComputed=' + JSON.stringify(result))
+  return result
+})
+
+const curTemplateImg = computed(() => {
+  if (
+    state.curTemplate.thumbnail.indexOf('http') > -1 ||
+    state.curTemplate.thumbnail.indexOf('static-resource') > -1
+  ) {
+    return imgUrlTrans(state.curTemplate.thumbnail)
+  } else {
+    return imgUrlTrans(state.baseUrl + state.curTemplate.thumbnail)
+  }
+})
+
+const outPaddingState = computed(() => {
+  return state.curPosition === 'branch' && previewModel.value !== 'marketPreview'
+})
+
+const optInit = params => {
+  state.initReady = false
+  state.curPosition = params.curPosition
+  state.templateType = params.templateType
+  previewModel.value = 'full'
+  state.pid = params.pid
+  nextTick(() => {
+    state.initReady = true
+  })
+}
 watch(
   () => state.searchText,
   value => {
@@ -329,10 +328,6 @@ watch(
   }
 )
 
-const searchResultCount = computed(
-  () => state.currentMarketTemplateShowList.filter(template => template.showFlag).length
-)
-
 const nodeClick = data => {
   state.marketActiveTab = data.label
   initTemplateShow()
@@ -428,10 +423,10 @@ const apply = () => {
 const handleClick = item => {
   // do handleClick
 }
-const initTemplateShow = (activeTab = state.marketActiveTab) => {
+const initTemplateShow = () => {
   let tempHasResult = false
   state.currentMarketTemplateShowList.forEach(template => {
-    template.showFlag = templateShow(template, activeTab)
+    template.showFlag = templateShow(template)
     if (template.showFlag) {
       tempHasResult = true
     }
@@ -441,34 +436,10 @@ const initTemplateShow = (activeTab = state.marketActiveTab) => {
   }
 }
 
-const fullTemplateShowList = curTab => {
-  state.currentMarketTemplateShowList.forEach(template => {
-    template.showFlag = templateShow(template, curTab)
-  })
-  return deepCopy(state.currentMarketTemplateShowList.filter(ele => ele.showFlag))
-}
-
-const templateShow = (templateItem, activeTab) => {
-  let categoryMarch = false
+const templateShow = templateItem => {
   let searchMarch = false
   let templateTypeMarch = false
   let templateSourceTypeMarch = false
-  if (activeTab === '最近使用') {
-    if (templateItem.recentUseTime) {
-      categoryMarch = true
-    }
-  } else if (activeTab === '推荐') {
-    if (templateItem.suggest === 'Y') {
-      categoryMarch = true
-    }
-  } else {
-    templateItem.categories.forEach(category => {
-      if (category.name === activeTab) {
-        categoryMarch = true
-      }
-    })
-  }
-
   if (!state.searchText || templateItem.title.indexOf(state.searchText) > -1) {
     searchMarch = true
   }
@@ -480,7 +451,7 @@ const templateShow = (templateItem, activeTab) => {
   if (state.templateSourceType === 'all' || templateItem.source === state.templateSourceType) {
     templateSourceTypeMarch = true
   }
-  return categoryMarch && searchMarch && templateTypeMarch && templateSourceTypeMarch
+  return searchMarch && templateTypeMarch && templateSourceTypeMarch
 }
 
 const templatePreview = previewId => {

sdk/api/api-base/src/main/java/io/dataease/api/template/dto/TemplateMarketDTO.java

@@ -4,6 +4,8 @@ import io.dataease.api.template.vo.MarketCategoryVO;
 import io.dataease.api.template.vo.MarketMetasVO;
 import lombok.Data;
 import lombok.NoArgsConstructor;
+
+import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.List;
 
@@ -30,6 +32,8 @@ public class TemplateMarketDTO implements Comparable<TemplateMarketDTO> {
     private String source = "market";
     private List<MarketCategoryVO> categories;
 
+    private List<String> categoryNames;
+
     private String mainCategory;
     private MarketMetasVO metas;
 
@@ -38,7 +42,8 @@ public class TemplateMarketDTO implements Comparable<TemplateMarketDTO> {
         this.id = manageDTO.getId();
         this.title = manageDTO.getName();
         this.mainCategory = manageDTO.getCategoryName();
-        this.categories = Arrays.asList(new MarketCategoryVO(manageDTO.getCategoryName()), new MarketCategoryVO("全部"));
+        this.categories = Arrays.asList(new MarketCategoryVO(manageDTO.getCategoryName()));
+        this.categoryNames = Arrays.asList(manageDTO.getCategoryName());
         this.metas = new MarketMetasVO(manageDTO.getSnapshot());
         this.templateType = "dataV".equalsIgnoreCase("manageDTO.getTemplateType()") ? "SCREEN" : "PANEL";
         this.thumbnail = manageDTO.getSnapshot();
@@ -51,15 +56,20 @@ public class TemplateMarketDTO implements Comparable<TemplateMarketDTO> {
     public TemplateMarketDTO(String id, String title, String themeRepo, String templateUrl, String categoryName, String templateType, Long recentUseTime, String suggest) {
         this.id = id;
         this.title = title;
-        this.categories = Arrays.asList(new MarketCategoryVO(categoryName), new MarketCategoryVO("全部"));
         this.metas = new MarketMetasVO(templateUrl);
         this.thumbnail = themeRepo;
         this.templateType = templateType;
+        this.categories = new ArrayList<>(Arrays.asList(new MarketCategoryVO(categoryName))) ;
+        this.categoryNames = new ArrayList<>(Arrays.asList(categoryName)) ;
         if (recentUseTime != null) {
             this.recentUseTime = recentUseTime;
+            this.categories.add(new MarketCategoryVO("最近使用"));
+            this.categoryNames.add("最近使用");
         }
         if ("Y".equalsIgnoreCase(suggest)) {
             this.suggest = "Y";
+            this.categories.add(new MarketCategoryVO("推荐"));
+            this.categoryNames.add("推荐");
         }
     }