From 9235e71401c9a6d0044d02fa1ba1449380538e1d Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Tue, 28 Nov 2023 10:29:50 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20UI=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/resources/db/desktop/V2.1__ddl.sql | 2 +- .../main/resources/db/migration/V2.1__ddl.sql | 2 +- .../views/system/template-setting/index.vue | 34 +-- .../component/MarketPreviewV2.vue | 21 +- .../src/views/template-market/index.vue | 65 ++++- .../template/component/DeTemplateItem.vue | 5 +- .../template/component/DeTemplateList.vue | 13 - .../src/views/template/index.vue | 236 +++++++++++------- 8 files changed, 221 insertions(+), 157 deletions(-) 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 22285c1330..3c819f9ae5 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 @@ -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; 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 6d795fc843..922330bb86 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 @@ -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; diff --git a/core/core-frontend/src/views/system/template-setting/index.vue b/core/core-frontend/src/views/system/template-setting/index.vue index f017a2ebf1..94094b9119 100644 --- 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 @@ - - diff --git a/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue b/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue index 3d7fc30f82..a3cd07082b 100644 --- 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 @@ - - {{ - t('visualization.template_preview') - }} - 预览 - + {{ + t('visualization.template_preview') + }} + 预览 + @@ -571,9 +570,13 @@ onMounted(() => { } .custom-breadcrumb-item { + font-size: 14px; cursor: pointer; - ::v-deep(.ed-breadcrumb__inner) { - color: rgba(100, 106, 115, 1); - } + color: rgba(100, 106, 115, 1); +} + +.custom-breadcrumb-item-to { + font-size: 14px; + color: rgba(31, 35, 41, 1); } diff --git a/core/core-frontend/src/views/template-market/index.vue b/core/core-frontend/src/views/template-market/index.vue index 65bf6baed3..375174ae81 100644 --- 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" > + +
+ {{ + state.marketActiveTab + }} + {{ state.marketActiveTab }} + 的搜索结果是{{ searchResultCount }}个 + 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; + } +}