style: UI调整

2023-11-30 19:40:42 +08:00 · 2023-11-30 19:40:42 +08:00 · 1b0813f853
commit 1b0813f853
parent 23a3cbd5d0
3 changed files with 134 additions and 55 deletions
--- a/core/core-backend/src/main/java/io/dataease/template/manage/TemplateCenterManage.java
+++ b/core/core-backend/src/main/java/io/dataease/template/manage/TemplateCenterManage.java
@ -1,6 +1,5 @@
 package io.dataease.template.manage;

-import com.mysql.cj.log.Log;
 import io.dataease.api.template.dto.TemplateManageDTO;
 import io.dataease.api.template.dto.TemplateManageFileDTO;
 import io.dataease.api.template.dto.TemplateMarketDTO;
@ -8,7 +7,6 @@ import io.dataease.api.template.dto.TemplateMarketPreviewInfoDTO;
 import io.dataease.api.template.response.*;
 import io.dataease.api.template.vo.MarketApplicationSpecVO;
 import io.dataease.api.template.vo.MarketMetaDataVO;
-import io.dataease.api.template.vo.TemplateCategoryVO;
 import io.dataease.constant.CommonConstants;
 import io.dataease.exception.DEException;
 import io.dataease.operation.manage.CoreOptRecentManage;
@ -19,11 +17,11 @@ import io.dataease.utils.HttpClientUtil;
 import io.dataease.utils.JsonUtil;
 import io.dataease.utils.LogUtil;
 import jakarta.annotation.Resource;
-import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;

 import java.util.*;
+import java.util.function.Function;
 import java.util.stream.Collectors;

 /**
@ -89,6 +87,7 @@ public class TemplateCenterManage {
            return baseResponseV2Trans(templateQuery(templateParams), searchTemplateFromManage(), templateParams.get("template.url"));
        } catch (Exception e) {
            LogUtil.error(e);
+            e.printStackTrace();
        }
        return null;
    }
@ -138,7 +137,9 @@ public class TemplateCenterManage {

    private MarketBaseResponse baseResponseV2TransRecommend(MarketTemplateV2BaseResponse v2BaseResponse, String url) {
        Map<String, Long> useTime = coreOptRecentManage.findTemplateRecentUseTime();
-        Map<String, String> categoriesMap = getCategoriesBaseV2();
+        List<MarketMetaDataVO> categoryVO = getCategoriesV2().stream().filter(node -> !"全部".equalsIgnoreCase(node.getLabel())).collect(Collectors.toList());
+        Map<String, String> categoriesMap = categoryVO.stream()
+                .collect(Collectors.toMap(MarketMetaDataVO::getSlug, MarketMetaDataVO::getLabel));
        List<TemplateMarketDTO> contents = new ArrayList<>();
        if (v2BaseResponse != null) {
            v2BaseResponse.getItems().stream().forEach(marketTemplateV2ItemResult -> {
@ -150,25 +151,32 @@ public class TemplateCenterManage {
        }
        // 最近使用排序
        Collections.sort(contents);
-        return new MarketBaseResponse(url, contents);
+        return new MarketBaseResponse(url,categoryVO, contents);
    }

    private MarketBaseResponse baseResponseV2Trans(MarketTemplateV2BaseResponse v2BaseResponse, List<TemplateMarketDTO> contents, String url) {
        Map<String, Long> useTime = coreOptRecentManage.findTemplateRecentUseTime();
-        Map<String, String> categoriesMap = getCategoriesBaseV2();
+        List<MarketMetaDataVO> categoryVO = getCategoriesObject().stream().filter(node -> !"全部".equalsIgnoreCase(node.getLabel())).collect(Collectors.toList());
+        Map<String, String> categoriesMap = categoryVO.stream()
+                .collect(Collectors.toMap(MarketMetaDataVO::getValue, MarketMetaDataVO::getLabel));
+        List<String> activeCategoriesName = new ArrayList<>(Arrays.asList("最近使用","推荐"));
        contents.stream().forEach(templateMarketDTO -> {
            Long recentUseTime = useTime.get(templateMarketDTO.getId());
            templateMarketDTO.setRecentUseTime(recentUseTime == null ? 0 : recentUseTime);
+            activeCategoriesName.add(templateMarketDTO.getMainCategory());
        });
        if (v2BaseResponse != null) {
            v2BaseResponse.getItems().stream().forEach(marketTemplateV2ItemResult -> {
                MarketApplicationSpecVO spec = marketTemplateV2ItemResult.getApplication().getSpec();
                contents.add(new TemplateMarketDTO(spec.getReadmeName(), spec.getDisplayName(), spec.getScreenshots().get(0).getUrl(), spec.getLinks().get(0).getUrl(), categoriesMap.get(spec.getLabel()), spec.getTemplateType(), useTime.get(spec.getReadmeName()), spec.getSuggest()));
+               if(categoriesMap.get(spec.getLabel())!=null){
+                    activeCategoriesName.add(categoriesMap.get(spec.getLabel()));
+                }
            });
        }
        // 最近使用排序
        Collections.sort(contents);
-        return new MarketBaseResponse(url, contents);
+        return new MarketBaseResponse(url,categoryVO.stream().filter(node->activeCategoriesName.contains(node.getLabel())).collect(Collectors.toList()), contents);
    }

    private MarketPreviewBaseResponse basePreviewResponseV2Trans(MarketTemplateV2BaseResponse v2BaseResponse, List<TemplateMarketDTO> manageContents, String url) {
@ -211,7 +219,7 @@ public class TemplateCenterManage {

    public List<MarketMetaDataVO> getCategoriesObject() {
        List<MarketMetaDataVO> result = getCategoriesV2();
-        result.add(0, new MarketMetaDataVO("recent", "最近使用", "public"));
+        result.add(0, new MarketMetaDataVO("recent", "最近使用", CommonConstants.TEMPLATE_SOURCE.PUBLIC));
        return result;
    }

@ -232,12 +240,28 @@ public class TemplateCenterManage {
            String resultStr = marketGet(templateParams.get("template.url") + TEMPLATE_META_DATA_URL, null);
            MarketMetaDataBaseResponse metaData = JsonUtil.parseObject(resultStr, MarketMetaDataBaseResponse.class);
            allCategories.addAll(metaData.getLabels());
-            allCategories.add(0, new MarketMetaDataVO("suggest", "推荐"));
+            allCategories.add(0, new MarketMetaDataVO("suggest", "推荐",CommonConstants.TEMPLATE_SOURCE.PUBLIC));
        } catch (Exception e) {
            LogUtil.error("模板市场分类获取错误", e);
        }
-        allCategories.addAll(manageCategoriesTrans);
-        return allCategories;
+
+        return mergeAndDistinctByLabel(allCategories,manageCategoriesTrans);

    }
+
+    private List<MarketMetaDataVO> mergeAndDistinctByLabel(List<MarketMetaDataVO> list1, List<MarketMetaDataVO> list2) {
+        List<MarketMetaDataVO> mergedList = new ArrayList<>(list1);
+        mergedList.addAll(list2);
+        Map<String, MarketMetaDataVO> marketMetaDataMap = mergedList.stream()
+                .collect(Collectors.toMap(
+                        MarketMetaDataVO::getLabel,
+                        Function.identity(),
+                        (existing, replacement) -> {
+                            existing.setSource(CommonConstants.TEMPLATE_SOURCE.PUBLIC);
+                            return existing;
+                        },
+                        LinkedHashMap::new
+                ));
+        return new ArrayList<>(marketMetaDataMap.values());
+    }
 }
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@ -84,8 +84,10 @@
      <el-row class="template-area">
        <div class="template-left">
          <el-tree
+            v-if="state.treeShow"
            menu
            class="custom-market-tree"
+            v-model="state.marketActiveTab"
            :data="categoriesComputed"
            :props="state.treeProps"
            node-key="label"
@ -100,33 +102,77 @@
          id="template-show-area"
          class="template-right"
        >
-          <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
+          <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 }"
            >
-          </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-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>
+
+          <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)
+              )"
+            >
+              <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>
+            </el-row>
+          </template>
        </div>
        <el-row v-show="state.networkStatus && !state.hasResult" class="template-empty">
          <div style="text-align: center">
@ -216,6 +262,7 @@ const state = reactive({
  },
  templateType: 'all',
  templateSourceType: 'all',
+  treeShow: true,
  templateSourceOptions: [
    {
      value: 'all',
@ -310,7 +357,12 @@ watch(
 watch(
  () => state.templateSourceType,
  value => {
+    state.treeShow = false
    initTemplateShow()
+    nextTick(() => {
+      state.treeShow = true
+      initStyle()
+    })
  }
 )

@ -331,13 +383,7 @@ const initMarketTemplate = async () => {
    .then(rsp => {
      state.baseUrl = rsp.data.baseUrl
      state.currentMarketTemplateShowList = rsp.data.contents
-    })
-    .catch(() => {
-      state.networkStatus = false
-    })
-  getCategoriesObject()
-    .then(rsp => {
-      state.marketTabs = rsp.data
+      state.marketTabs = rsp.data.categories
      state.marketActiveTab = state.marketTabs[0].label
      initStyle()
      initTemplateShow()
@ -419,10 +465,10 @@ const apply = () => {
 const handleClick = item => {
  // do handleClick
 }
-const initTemplateShow = () => {
+const initTemplateShow = (activeTab = state.marketActiveTab) => {
  let tempHasResult = false
  state.currentMarketTemplateShowList.forEach(template => {
-    template.showFlag = templateShow(template)
+    template.showFlag = templateShow(template, activeTab)
    if (template.showFlag) {
      tempHasResult = true
    }
@ -432,22 +478,29 @@ const initTemplateShow = () => {
  }
 }

-const templateShow = templateItem => {
+const fullTemplateShowList = curTab => {
+  state.currentMarketTemplateShowList.forEach(template => {
+    template.showFlag = templateShow(template, curTab)
+  })
+  return state.currentMarketTemplateShowList.filter(ele => ele.showFlag)
+}
+
+const templateShow = (templateItem, activeTab) => {
  let categoryMarch = false
  let searchMarch = false
  let templateTypeMarch = false
  let templateSourceTypeMarch = false
-  if (state.marketActiveTab === '最近使用') {
+  if (activeTab === '最近使用') {
    if (templateItem.recentUseTime) {
      categoryMarch = true
    }
-  } else if (state.marketActiveTab === '推荐') {
+  } else if (activeTab === '推荐') {
    if (templateItem.suggest === 'Y') {
      categoryMarch = true
    }
  } else {
    templateItem.categories.forEach(category => {
-      if (category.name === state.marketActiveTab) {
+      if (category.name === activeTab) {
        categoryMarch = true
      }
    })
@ -560,7 +613,7 @@ defineExpose({
        height: 100%;
        background: rgba(239, 240, 241, 1);
        overflow-y: auto;
-        padding: 16px 12px;
+        padding: 0 12px 16px 12px;
      }

      .template-empty {
@ -580,6 +633,7 @@ defineExpose({
  width: 100%;
  float: left;
  height: 24px;
+  margin-top: 16px;
  display: inline;
  .custom-split-line {
    margin: 4px 8px 0 12px;
--- 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
@ -1,6 +1,7 @@
 package io.dataease.api.template.response;

 import io.dataease.api.template.dto.TemplateMarketDTO;
+import io.dataease.api.template.vo.MarketMetaDataVO;
 import lombok.Data;

 import java.util.List;
@ -13,16 +14,16 @@ import java.util.List;
 public class MarketBaseResponse {
    private String baseUrl;

+    List<MarketMetaDataVO> categories;
+
    private List<TemplateMarketDTO> contents;

    public MarketBaseResponse() {
    }

-    public MarketBaseResponse(String baseUrl, List<TemplateMarketDTO> contents) {
+    public MarketBaseResponse(String baseUrl, List<MarketMetaDataVO> categories, List<TemplateMarketDTO> contents) {
        this.baseUrl = baseUrl;
+        this.categories = categories;
        this.contents = contents;
    }
-
-
-
 }