From 46ee665ca031f32d46092c21dc99cfc4a1e9365a Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Wed, 15 Jan 2025 15:41:04 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E5=B7=A5=E4=BD=9C=E5=8F=B0):=20[?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=A8=A1=E6=9D=BF]=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/MarketPreviewV2.vue             | 66 ++++++++++++++-----
 .../component/TemplateMarketPreviewItem.vue   | 43 ++++++------
 2 files changed, 70 insertions(+), 39 deletions(-)

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 bf67be96ed..143c32f975 100644
--- a/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue
+++ b/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue
@@ -13,11 +13,11 @@
           </el-icon>
         </el-tooltip>
         <el-row v-show="state.asideActive" style="padding: 24px 12px 0">
-          <el-row style="align-items: center">
+          <el-row style="display: flex; align-items: center">
             <span class="custom-breadcrumb-item" @click="closePreview()">{{
               t('template_manage.template_center')
             }}</span>
-            <el-icon><ArrowRight /></el-icon>
+            <el-icon style="color: #8f959e"><ArrowRight /></el-icon>
             <span class="custom-breadcrumb-item-to">{{ t('template_manage.preview') }}</span>
 
             <el-tooltip
@@ -46,7 +46,7 @@
               :class="state.extFilterActive ? 'filter-icon-active' : ''"
               @click="extFilterActiveChange()"
             >
-              <Filter />
+              <iconFilter />
             </el-icon>
           </el-row>
           <el-row v-show="state.extFilterActive">
@@ -77,10 +77,10 @@
               />
             </el-select>
           </el-row>
-          <el-divider />
+          <el-divider class="mp-divider" />
         </el-row>
 
-        <el-row
+        <el-main
           v-show="state.asideActive"
           class="aside-list"
           :class="state.extFilterActive ? 'aside-list-filter-active' : ''"
@@ -114,14 +114,14 @@
               <span>{{ t('work_branch.relevant_templates_found') }}</span>
             </div>
           </el-row>
-        </el-row>
+        </el-main>
       </el-col>
       <el-col
         style="float: left"
         class="main-area"
         :class="state.asideActive ? 'main-area-active' : ''"
       >
-        <el-row v-if="state.curTemplate">
+        <el-row v-if="state.curTemplate" style="padding: 24px 24px 0">
           <span class="template-title">{{ state.curTemplate.title }}</span>
           <div style="flex: 1; text-align: right">
             <el-button
@@ -145,6 +145,7 @@
 <script setup lang="ts">
 import marketExpand from '@/assets/svg/market-expand.svg'
 import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import iconFilter from '@/assets/svg/icon-filter.svg'
 import no_result from '@/assets/svg/no_result.svg'
 import { searchMarketPreview } from '@/api/templateMarket'
 import { onMounted, reactive, watch, ref } from 'vue'
@@ -379,7 +380,10 @@ onMounted(() => {
   padding: 0px 12px 12px 12px;
   width: 100%;
   height: calc(100vh - 200px);
-  overflow-y: auto;
+  //overflow-y: auto;
+  :deep(.ed-collapse) {
+    --ed-collapse-header-font-size: 14px;
+  }
 }
 
 .aside-list-filter-active {
@@ -453,7 +457,7 @@ onMounted(() => {
 }
 
 .aside-active {
-  width: 206px;
+  width: 224px;
   height: calc(100vh - 56px);
   background-color: rgba(245, 246, 247, 1);
 }
@@ -464,20 +468,20 @@ onMounted(() => {
 }
 
 .main-area-active {
-  width: calc(100% - 206px) !important;
+  width: calc(100% - 224px) !important;
   background: #ffffff;
 }
 
 .main-area {
   width: 100%;
-  padding: 24px;
+  //padding: 24px;
   text-align: center;
   height: calc(100vh - 56px);
   transition: 0.5s;
 }
 
 .title-name-search {
-  width: 140px;
+  flex: 1;
   float: left;
 }
 
@@ -541,7 +545,7 @@ onMounted(() => {
 
 .insert-retract {
   position: absolute;
-  left: 182px;
+  left: 199px;
   top: 2px;
   border: 1px solid #dee0e3;
   background: #fff;
@@ -599,11 +603,12 @@ onMounted(() => {
 }
 .img-main {
   display: inherit;
-  border-radius: 4px;
+  //border-radius: 4px;
   background: #0f1114;
   overflow-x: auto;
   overflow-y: hidden;
-  height: calc(100% - 50px) !important;
+  width: 100%;
+  height: calc(100% - 76px) !important;
 }
 .open-button {
   cursor: pointer;
@@ -623,7 +628,7 @@ onMounted(() => {
 }
 .filter-icon-span {
   float: left;
-  border: 1px solid #dcdfe6;
+  border: 1px solid #bbbfc4;
   width: 32px;
   height: 32px;
   border-radius: 4px;
@@ -644,16 +649,41 @@ onMounted(() => {
 .search-area {
   width: 100%;
   position: relative;
+  display: flex;
 }
 
 .custom-breadcrumb-item {
   font-size: 14px;
   cursor: pointer;
-  color: rgba(100, 106, 115, 1);
+  font-weight: 400;
+  color: #646a73;
+  width: 64px;
+  height: 22px;
+  padding: 0 4px 0 4px;
+  border-radius: 4px 0 0 0;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: #3370ff;
+    background: #3370ff1a;
+  }
+
+  &:active {
+    color: #245bdb;
+    background: #3370ff33;
+  }
 }
 
 .custom-breadcrumb-item-to {
   font-size: 14px;
-  color: rgba(31, 35, 41, 1);
+  font-weight: 400;
+  color: #1f2329;
+  cursor: default;
+}
+.mp-divider {
+  border-color: #1f232926;
+  margin-top: 16px;
+  margin-bottom: 8px;
 }
 </style>
diff --git a/core/core-frontend/src/views/template-market/component/TemplateMarketPreviewItem.vue b/core/core-frontend/src/views/template-market/component/TemplateMarketPreviewItem.vue
index 263a880b4b..17fac3e8fb 100644
--- a/core/core-frontend/src/views/template-market/component/TemplateMarketPreviewItem.vue
+++ b/core/core-frontend/src/views/template-market/component/TemplateMarketPreviewItem.vue
@@ -1,15 +1,17 @@
 <template>
   <div
+    class="template-item-main"
     :class="[
       {
         ['template-item-main-active']: active
-      },
-      'template-item-main'
+      }
     ]"
     @click.stop="previewTemplate"
   >
-    <div class="template-item-img" :style="classBackground" />
-    <span class="demonstration">{{ template.title }}</span>
+    <div class="template-item-img">
+      <div class="template-item-img-inner" :style="classBackground" />
+    </div>
+    <div class="demonstration">{{ template.title }}</div>
   </div>
 </template>
 
@@ -63,8 +65,8 @@ const previewTemplate = () => {
   margin: 0 0 12px 0;
   position: relative;
   box-sizing: border-box;
-  width: 182px;
-  height: 116px;
+  width: 192px;
+  height: 145px;
   background-color: var(--ContentBG, #ffffff);
   border: 1px solid #dee0e3;
   border-radius: 4px;
@@ -73,33 +75,32 @@ const previewTemplate = () => {
   flex-grow: 0;
   cursor: pointer;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 .template-item-main-active {
   border: 2px solid var(--ed-color-primary) !important;
 }
 .template-item-img {
-  position: absolute;
-  width: 182px;
-  height: 86px;
-  left: 0px;
-  top: 0px;
+  flex: 1;
+  display: flex;
+  padding: 4px 4px 0;
+}
+.template-item-img-inner {
+  flex: 1;
 }
 
 .demonstration {
-  position: absolute;
-  width: 166px;
-  height: 20px;
-  left: 8px;
-  top: 91px;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
-  display: block;
+  height: 38px;
+  padding: 8px 12px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  border-top: 1px solid #dee0e3;
 }
 
 .template-item-main:hover {