Merge pull request #6884 from dataease/pr@dev-v2@refactor_market-UI

refactor: UI调整
2023-11-28 10:33:43 +08:00 · 2023-11-28 10:33:43 +08:00 · 3c1ba64d81
commit 3c1ba64d81
parent 81a3ebf51a 9235e71401
8 changed files with 221 additions and 157 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
@ -18,7 +18,7 @@ CREATE TABLE `visualization_template` (

 BEGIN;
 INSERT INTO `core_menu`
-VALUES (19, 0, 2, 'template-market', 'template-market', 4, NULL, '/template-market', 0, 1, 1);
+VALUES (19, 0, 2, 'template-market', 'template-market', 4, NULL, '/template-market', 1, 1, 0);
 INSERT INTO `core_menu`
 VALUES (20, 15, 2, 'template-setting', 'system/template-setting', 4, 'icon_template', '/template-setting', 0, 1, 1);
 COMMIT;
--- 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
@ -20,7 +20,7 @@ CREATE TABLE `visualization_template`

 BEGIN;
 INSERT INTO `core_menu`
-VALUES (19, 0, 2, 'template-market', 'template-market', 4, NULL, '/template-market', 0, 1, 1);
+VALUES (19, 0, 2, 'template-market', 'template-market', 4, NULL, '/template-market', 1, 1, 0);
 INSERT INTO `core_menu`
 VALUES (20, 15, 2, 'template-setting', 'system/template-setting', 4, 'icon_template', '/template-setting', 0, 1, 1);
 COMMIT;
--- a/core/core-frontend/src/views/system/template-setting/index.vue
+++ b/core/core-frontend/src/views/system/template-setting/index.vue
@ -1,10 +1,5 @@
 <template>
-  <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>
@ -19,30 +14,3 @@ 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/component/MarketPreviewV2.vue
+++ b/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue
@ -9,12 +9,11 @@
        </el-tooltip>
        <el-row v-show="state.asideActive" style="padding: 24px 12px 0">
          <el-row style="align-items: center">
-            <el-breadcrumb separator-icon="ArrowRight">
-              <el-breadcrumb-item class="custom-breadcrumb-item" @click="closePreview()">{{
+            <span class="custom-breadcrumb-item" @click="closePreview()">{{
              t('visualization.template_preview')
-              }}</el-breadcrumb-item>
-              <el-breadcrumb-item>预览</el-breadcrumb-item>
-            </el-breadcrumb>
+            }}</span>
+            <el-icon><ArrowRight /></el-icon> <span class="custom-breadcrumb-item-to">预览</span>
+
            <el-tooltip class="box-item" effect="dark" content="收起" placement="right">
              <el-icon class="insert-retract" @click="asideActiveChange(false)">
                <Icon name="market-retract"></Icon>
@ -571,9 +570,13 @@ onMounted(() => {
 }

 .custom-breadcrumb-item {
+  font-size: 14px;
  cursor: pointer;
-  ::v-deep(.ed-breadcrumb__inner) {
  color: rgba(100, 106, 115, 1);
-  }
+}
+
+.custom-breadcrumb-item-to {
+  font-size: 14px;
+  color: rgba(31, 35, 41, 1);
 }
 </style>
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@ -55,11 +55,21 @@
          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
+            >
+          </el-col>
          <el-col
            v-for="templateItem in state.currentMarketTemplateShowList"
            v-show="templateItem.showFlag"
            :key="templateItem.id"
-            style="padding: 24px 12px 0; text-align: center; flex: 0"
+            style="float: left; padding: 24px 12px 0; text-align: center; flex: 0"
            :style="{ width: state.templateSpan }"
          >
            <template-market-v2-item
@ -90,7 +100,7 @@
 <script setup lang="ts">
 import { getCategoriesObject, searchMarket } from '@/api/templateMarket'
 import elementResizeDetectorMaker from 'element-resize-detector'
-import { nextTick, reactive, watch, onMounted, ref } from 'vue'
+import { nextTick, reactive, watch, onMounted, ref, computed } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ElMessage } from 'element-plus-secondary'
 import { decompression } from '@/api/visualization/dataVisualization'
@ -180,6 +190,11 @@ watch(
    initTemplateShow()
  }
 )
+
+const searchResultCount = computed(
+  () => state.currentMarketTemplateShowList.filter(template => template.showFlag).length
+)
+
 const nodeClick = data => {
  state.marketActiveTab = data.label
  initTemplateShow()
@ -317,10 +332,10 @@ onMounted(() => {
  if (templateMainDom) {
    erd.listenTo(templateMainDom, element => {
      nextTick(() => {
-        const curSeparator = Math.trunc(templateMainDom.offsetWidth / state.templateMiniWidth)
-        state.templateSpan =
-          100 / Math.trunc(templateMainDom.offsetWidth / state.templateMiniWidth) + '%'
-        state.templateCurWidth = Math.trunc(templateMainDom.offsetWidth / curSeparator) - 33
+        const offsetWidth = templateMainDom.offsetWidth - 26
+        const curSeparator = Math.trunc(offsetWidth / state.templateMiniWidth)
+        state.templateSpan = 100 / Math.trunc(offsetWidth / state.templateMiniWidth) + '%'
+        state.templateCurWidth = Math.trunc(offsetWidth / curSeparator) - 33
      })
    })
  }
@ -380,10 +395,11 @@ const previewInit = () => {
      }
      .template-right {
        flex: 1;
-        display: inherit;
+        display: inline;
        height: 100%;
        background: rgba(239, 240, 241, 1);
        overflow-y: auto;
+        padding: 16px 12px;
      }

      .template-empty {
@ -398,6 +414,41 @@ const previewInit = () => {
    }
  }
 }
+
+.main-head {
+  width: 100%;
+  float: left;
+  height: 24px;
+  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>

 <style lang="less">
--- a/core/core-frontend/src/views/template/component/DeTemplateItem.vue
+++ b/core/core-frontend/src/views/template/component/DeTemplateItem.vue
@ -26,7 +26,7 @@
            <slot>
              <el-dropdown-item command="rename">
                <el-icon><EditPen /></el-icon>
-                {{ $t('chart.rename') }}
+                编辑
              </el-dropdown-item>
              <el-dropdown-item command="delete">
                <el-icon><Delete /></el-icon>
@ -90,6 +90,7 @@ const handleCommand = key => {
    border-bottom: 1px solid var(--deCardStrokeColor, #dee0e3);
    height: 144px;
    width: 100%;
+    padding: 4px 6px 0 4px;
    overflow: hidden;

    img {
@ -105,7 +106,7 @@ const handleCommand = key => {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    padding: 8px 12px 9px 12px;
+    padding: 4px 12px 9px 12px;
    box-sizing: border-box;

    .el-icon-more {
--- a/core/core-frontend/src/views/template/component/DeTemplateList.vue
+++ b/core/core-frontend/src/views/template/component/DeTemplateList.vue
@ -1,18 +1,5 @@
 <template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="de-template-list">
-    <el-input
-      v-model="state.templateFilterText"
-      :placeholder="'搜索关键字'"
-      size="small"
-      class="de-input-search"
-      clearable
-    >
-      <template #prefix>
-        <el-icon>
-          <Icon name="de-search" />
-        </el-icon>
-      </template>
-    </el-input>
    <el-empty
      v-if="!templateListComputed.length && state.templateFilterText === ''"
      :image="NoneImage"
--- a/core/core-frontend/src/views/template/index.vue
+++ b/core/core-frontend/src/views/template/index.vue
@ -1,4 +1,24 @@
 <template>
+  <div class="template-head">
+    <p class="router-title">模版管理</p>
+    <el-button style="float: right" type="primary" @click="templateImport(state.currentTemplateId)">
+      {{ t('visualization.import') }}
+    </el-button>
+    <el-input
+      v-model="state.templateFilterText"
+      :placeholder="'搜索关键字'"
+      class="template-search-class"
+      clearable
+    >
+      <template #prefix>
+        <el-icon>
+          <Icon name="de-search" />
+        </el-icon>
+      </template>
+    </el-input>
+  </div>
+  <div class="sys-setting-p">
+    <div class="container-sys-param">
      <div style="width: 100%; height: 100%">
        <div class="de-template">
          <div class="tabs-container flex-tabs">
@ -16,14 +36,9 @@
            </div>
            <div class="de-tabs-right">
              <div v-if="state.currentTemplateLabel" class="active-template">
-            {{ state.currentTemplateLabel }}&nbsp;&nbsp;({{ state.currentTemplateShowList.length }})
-            <el-button
-              type="primary"
-              icon="Upload"
-              @click="templateImport(state.currentTemplateId)"
-            >
-              {{ t('visualization.import') }}
-            </el-button>
+                {{ state.currentTemplateLabel }}&nbsp;&nbsp;({{
+                  state.currentTemplateShowList.length
+                }})
              </div>
              <el-empty
                v-if="!state.currentTemplateShowList.length"
@ -84,6 +99,8 @@
          />
        </el-dialog>
      </div>
+    </div>
+  </div>
 </template>

 <script lang="ts" setup>
@ -118,6 +135,7 @@ const roleValidator = (rule, value, callback) => {
 }

 const state = reactive({
+  templateFilterText: '',
  showShare: false,
  currentTemplateShowList: [],
  noneImg: '@/assets/None.png',
@ -145,8 +163,8 @@ const state = reactive({
  currentTemplateLabel: '',
  currentTemplateId: '',
  templateList: [],
-  templateMiniWidth: 286,
-  templateCurWidth: 286,
+  templateMiniWidth: 256,
+  templateCurWidth: 256,
  formType: '',
  originName: '',
  templateDialog: {
@ -334,9 +352,9 @@ onMounted(() => {
  // 监听div变动事件
  erd.listenTo(templateMainDom, element => {
    nextTick(() => {
-      const curSeparator = Math.trunc(templateMainDom.offsetWidth / state.templateMiniWidth)
-      state.templateCurWidth =
-        Math.trunc(templateMainDom.offsetWidth / curSeparator) - 24 - curSeparator
+      const offsetWidth = templateMainDom.offsetWidth - 24
+      const curSeparator = Math.trunc(offsetWidth / state.templateMiniWidth)
+      state.templateCurWidth = Math.trunc(offsetWidth / curSeparator) - 24 - curSeparator
    })
  })
 })
@ -364,9 +382,8 @@ onMounted(() => {

  .de-tabs-right {
    flex: 1;
-    background: #fff;
-    padding: 24px 0 24px 24px;
    overflow: hidden;
+    background: rgba(239, 240, 241, 1);

    .template-box {
      display: flex;
@ -376,12 +393,12 @@ onMounted(() => {
      align-content: flex-start;
      height: calc(100% - 10px);
      width: 100%;
-      padding-bottom: 24px;
+      padding: 16px 0px 16px 24px;
    }

    .active-template {
-      margin: 4px 0 20px 0;
-      padding-right: 24px;
+      height: 56px;
+      padding: 0px 24px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 500;
@ -389,8 +406,45 @@ onMounted(() => {
      display: flex;
      align-items: center;
      justify-content: space-between;
-      color: var(--deTextPrimary, #1f2329);
+      color: rgba(31, 35, 41, 1);
+      background: #fff;
+      border-bottom: 1px solid rgba(31, 35, 41, 0.15);
    }
  }
 }
+
+.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;
+  float: left;
+}
+.sys-setting-p {
+  width: 100%;
+  background: #ffffff;
+  height: calc(100vh - 136px);
+  box-sizing: border-box;
+  margin-top: 12px;
+}
+.setting-auto-h {
+  height: auto !important;
+}
+
+.container-sys-param {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.template-head {
+  height: 32px;
+}
+.template-search-class {
+  float: right;
+  width: 320px;
+  margin-right: 12px;
+}
 </style>