From 5ef255705e3d02f4c081c572d910c8ada1f672c7 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 29 Nov 2023 16:55:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=BF=AB=E9=80=9F=E5=88=9B=E5=BB=BA-?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=A8=A1=E6=9D=BF=E5=88=9B=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/svg/icon_template_colorful.svg |  7 ++++
 .../src/views/template-market/index.vue       |  9 ++++-
 .../src/views/workbranch/index.vue            | 39 ++++++++++++++++---
 3 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 core/core-frontend/src/assets/svg/icon_template_colorful.svg

diff --git a/core/core-frontend/src/assets/svg/icon_template_colorful.svg b/core/core-frontend/src/assets/svg/icon_template_colorful.svg
new file mode 100644
index 0000000000..a19c0b2869
--- /dev/null
+++ b/core/core-frontend/src/assets/svg/icon_template_colorful.svg
@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 2.66666C4 1.93028 4.59695 1.33333 5.33333 1.33333H21.1477C21.3265 1.33333 21.4979 1.40515 21.6232 1.53267L27.8088 7.82587C27.9313 7.95055 28 8.11838 28 8.2932V29.3333C28 30.0697 27.403 30.6667 26.6667 30.6667H5.33333C4.59695 30.6667 4 30.0697 4 29.3333V2.66666Z" fill="#FF8800"/>
+<path d="M9.33398 11.3333C9.33398 10.9651 9.63246 10.6667 10.0007 10.6667H22.0007C22.3688 10.6667 22.6673 10.9651 22.6673 11.3333V12.6667C22.6673 13.0349 22.3688 13.3333 22.0007 13.3333H10.0007C9.63246 13.3333 9.33398 13.0349 9.33398 12.6667V11.3333Z" fill="white"/>
+<path d="M14.6673 16.6667C14.6673 16.2985 14.9658 16 15.334 16H22.0007C22.3688 16 22.6673 16.2985 22.6673 16.6667V23.3333C22.6673 23.7015 22.3688 24 22.0007 24H15.334C14.9658 24 14.6673 23.7015 14.6673 23.3333V16.6667Z" fill="white"/>
+<path d="M10.0007 16C9.63246 16 9.33398 16.2985 9.33398 16.6667V23.3333C9.33398 23.7015 9.63246 24 10.0007 24H11.334C11.7022 24 12.0007 23.7015 12.0007 23.3333V16.6667C12.0007 16.2985 11.7022 16 11.334 16H10.0007Z" fill="white"/>
+<path d="M21.334 1.33333C21.4429 1.36489 21.5429 1.424 21.6238 1.50632L27.8094 7.79952C27.8601 7.85104 27.9015 7.90993 27.9327 7.97364H22.8475C22.0116 7.97364 21.334 7.29602 21.334 6.46013V1.33333Z" fill="#D97400"/>
+</svg>
diff --git a/core/core-frontend/src/views/template-market/index.vue b/core/core-frontend/src/views/template-market/index.vue
index 375174ae81..d13fdbf9e1 100644
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@@ -12,7 +12,7 @@
     ></market-preview-v2>
     <el-row v-show="!previewModel" class="main-container">
       <el-row class="market-head">
-        <span>模版市场 </span>
+        <span>{{ title }} </span>
         <el-row class="head-right">
           <el-input
             class="title-search"
@@ -102,6 +102,7 @@ import { getCategoriesObject, 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'
@@ -109,9 +110,10 @@ import TemplateMarketV2Item from '@/views/template-market/component/TemplateMark
 import MarketPreviewV2 from '@/views/template-market/component/MarketPreviewV2.vue'
 const { t } = useI18n()
 const { wsCache } = useCache()
+const route = useRoute()
 
 const previewModel = ref(false)
-
+const title = ref('模版市场')
 const state = reactive({
   treeProps: {
     value: 'label',
@@ -324,6 +326,9 @@ const templatePreview = previewId => {
 }
 
 onMounted(() => {
+  if (route.params.add === '1') {
+    title.value = '使用模版新建'
+  }
   previewInit()
   initMarketTemplate()
   const erd = elementResizeDetectorMaker()
diff --git a/core/core-frontend/src/views/workbranch/index.vue b/core/core-frontend/src/views/workbranch/index.vue
index 4514353224..516757cbdc 100644
--- a/core/core-frontend/src/views/workbranch/index.vue
+++ b/core/core-frontend/src/views/workbranch/index.vue
@@ -27,19 +27,23 @@ const router = useRouter()
 const quickCreationList = shallowRef([
   {
     icon: 'icon_dashboard_outlined',
-    name: 'panel'
+    name: 'panel',
+    color: '#3370ff'
   },
   {
     icon: 'icon_operation-analysis_outlined',
-    name: 'screen'
+    name: 'screen',
+    color: '#00d6b9'
   },
   {
     icon: 'icon_app_outlined',
-    name: 'dataset'
+    name: 'dataset',
+    color: '#16c0ff'
   },
   {
     icon: 'icon_database_outlined',
-    name: 'datasource'
+    name: 'datasource',
+    color: '#7f3bf6'
   }
 ])
 
@@ -96,7 +100,7 @@ const state = reactive({
 
 watch(
   () => activeTabBtn.value,
-  value => {
+  () => {
     initTemplateShow()
   }
 )
@@ -220,6 +224,15 @@ const toTemplateMarket = () => {
   push('/template-market/index')
 }
 
+const toTemplateMarketAdd = () => {
+  push({
+    name: 'template-market',
+    params: {
+      add: '1'
+    }
+  })
+}
+
 fillCardInfo()
 initMarketTemplate()
 </script>
@@ -272,13 +285,19 @@ initMarketTemplate()
             >
               <div class="empty-tooltip-container" />
             </el-tooltip>
-            <el-icon class="main-color">
+            <el-icon class="main-color" :style="{ backgroundColor: ele.color }">
               <Icon :name="ele.icon" />
             </el-icon>
             <span class="name">
               {{ t(`auth.${ele.name}`) }}
             </span>
           </div>
+          <div class="item item-quick" @click="toTemplateMarketAdd">
+            <el-icon class="main-color-quick">
+              <Icon name="icon_template_colorful" />
+            </el-icon>
+            <span class="name">使用模版新建</span>
+          </div>
         </div>
       </div>
     </div>
@@ -493,6 +512,14 @@ initMarketTemplate()
             line-height: 22px;
           }
         }
+
+        .item-quick {
+          width: 100%;
+          .main-color-quick {
+            font-size: 32px;
+            margin-right: 12px;
+          }
+        }
         .quick-create-disabled {
           cursor: not-allowed;
           color: var(--ed-color-info-light-5);