From b978b0602df1d5e5dc31d11f7ffc620932f6fe31 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 3 Aug 2022 11:40:49 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=A8=A1=E6=9D=BF=E5=B8=82=E5=9C=BA?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                       |  3 +-
 frontend/src/lang/tw.js                       |  3 +-
 frontend/src/lang/zh.js                       |  1 +
 .../component/MarketPreview.vue               | 46 +++++++++++--
 .../component/TemplateMarketItem.vue          |  2 +-
 .../src/views/panel/templateMarket/index.vue  | 66 ++++++++++++++++---
 6 files changed, 103 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index a7dd275f25..f7f3f79a5c 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -566,7 +566,7 @@ export default {
     filter: 'screen',
     list: 'List item',
     list_info: 'Please select the information to be displayed in the list',
-    sure_delete: 'Are you sure to delete this user?',
+    sure_delete: 'Are you sure to delete this user?'
   },
   ldap: {
     url: 'LDAP url',
@@ -1567,6 +1567,7 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+    template_name_tips: "Panel\'s name should not be null",
     panel_background_item: 'Customize panel background',
     panel_background_image_tips: 'Currently.Jpeg,.Jpg,.Png,.Gif files are supported, and the size should not exceed 15m',
     reUpload: 'reUpload',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 552d0f46b7..ab7cd56da9 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -567,7 +567,7 @@ export default {
     filter: '篩選',
     list: '列表項',
     list_info: '請選擇列表中要展示的信息',
-    sure_delete: '確定刪除該用戶嗎？',
+    sure_delete: '確定刪除該用戶嗎？'
   },
   ldap: {
     url: 'LDAP地址',
@@ -1567,6 +1567,7 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+    template_name_tips: '仪表板名称必填',
     panel_background_item: '自定义仪表板背景',
     panel_background_image_tips: '当前支持.jpeg,.jpg,.png,.gif文件,大小不要超过15M',
     reUpload: '重新上传',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index c899adf897..557f002abe 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1575,6 +1575,7 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+    template_name_tips: '仪表板名称必填',
     panel_background_item: '自定义仪表板背景',
     panel_background_image_tips: '当前支持.jpeg,.jpg,.png,.gif文件,大小不要超过15M',
     reUpload: '重新上传',
diff --git a/frontend/src/views/panel/templateMarket/component/MarketPreview.vue b/frontend/src/views/panel/templateMarket/component/MarketPreview.vue
index c27648e5b1..c15ba178da 100644
--- a/frontend/src/views/panel/templateMarket/component/MarketPreview.vue
+++ b/frontend/src/views/panel/templateMarket/component/MarketPreview.vue
@@ -12,11 +12,12 @@
           <el-input
             v-model="searchText"
             size="small"
+            prefix-icon="el-icon-search"
             class="title-name-search"
             :placeholder="$t('panel.enter_template_name_tips')"
             clearable="true"
           />
-          <span class="icon iconfont icon-icon-filter insert icon20 filter-icon-span" :class="extFilterActive?'filter-icon-active':''" @click="extFilterActiveChange()" />
+          <span class="icon iconfont icon-icon-filter insert-filter filter-icon-span" :class="extFilterActive?'filter-icon-active':''" @click="extFilterActiveChange()" />
         </el-row>
         <el-row v-show="extFilterActive">
           <el-select v-model="marketActiveTab" class="margin-top16" size="small" placeholder="请选择">
@@ -64,8 +65,7 @@
 
 <script>
 import { searchMarket, getCategories } from '@/api/templateMarket'
-import { groupTree, panelSave } from '@/api/panel/panel'
-import bus from '@/utils/bus'
+import { groupTree } from '@/api/panel/panel'
 import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
 import TemplateMarketPreviewItem from '@/views/panel/templateMarket/component/TemplateMarketPreviewItem'
 
@@ -134,6 +134,7 @@ export default {
       searchMarket({}).then(rsp => {
         this.baseUrl = rsp.data.baseUrl
         this.currentMarketTemplateShowList = rsp.data.contents
+        this.hasResult = true
       }).catch(() => {
         this.networkStatus = false
       })
@@ -207,6 +208,7 @@ export default {
     },
     extFilterActiveChange() {
       this.extFilterActive = !this.extFilterActive
+      this.marketActiveTab = this.marketTabs[0]
     },
     closePreview() {
       this.$emit('closePreview')
@@ -337,7 +339,7 @@ export default {
   line-height: 24px;
 }
 
-.insert {
+.insert-filter {
   display: inline-block;
   font-weight: 400 !important;
   font-family: PingFang SC;
@@ -366,6 +368,35 @@ export default {
   }
 }
 
+.insert {
+  display: inline-block;
+  font-weight: 400 !important;
+  font-family: PingFang SC;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  color: #646A73;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  transition: .1s;
+  border-radius: 3px;
+
+  &:active {
+    color: #000;
+    border-color: #3a8ee6;
+    background-color: red;
+    outline: 0;
+  }
+
+  &:hover {
+    background-color: rgba(31, 35, 41, 0.1);
+    color: #3a8ee6;
+  }
+}
+
 .template-title{
   float: left;
   font-weight: 500;
@@ -406,7 +437,7 @@ export default {
   width: 32px;
   height: 32px;
   border-radius: 4px;
-  padding: 5px;
+  padding: 7px;
   margin-left: 8px;
 }
 
@@ -415,6 +446,11 @@ export default {
   color: #3370FF;
 }
 
+.filter-icon-active{
+  border: 1px solid #3370FF;
+  color: #3370FF;
+}
+
 .search-area{
   width: 100%;
   position: relative;
diff --git a/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue b/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
index 79168ea8c2..a9d9d8ce9b 100644
--- a/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
+++ b/frontend/src/views/panel/templateMarket/component/TemplateMarketItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="testcase-template">
-    <el-row class="template-img" :style="classBackground" />
+    <div class="template-img" :style="classBackground" @click.stop="templatePreview" />
     <el-row class="bottom-area">
       <el-row>
         <span class="demonstration">{{ template.title }}</span>
diff --git a/frontend/src/views/panel/templateMarket/index.vue b/frontend/src/views/panel/templateMarket/index.vue
index 8f5dc9ba4f..c026bf1b49 100644
--- a/frontend/src/views/panel/templateMarket/index.vue
+++ b/frontend/src/views/panel/templateMarket/index.vue
@@ -9,7 +9,7 @@
           <span class="title-left">{{ $t('panel.template_market') }}</span>
         </el-col>
         <el-col span="12">
-          <el-input v-model="searchText" size="small" class="title-right" :placeholder="$t('panel.enter_template_name_tips')" clearable="true" />
+          <el-input v-model="searchText" prefix-icon="el-icon-search" size="small" class="title-right" :placeholder="$t('panel.enter_template_name_tips')" clearable="true" />
         </el-col>
       </el-row>
       <el-row>
@@ -48,16 +48,16 @@
       v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
       :title="$t('panel.apply_template')"
       :visible.sync="folderSelectShow"
-      width="500px"
-      class="dialog-css"
+      width="600px"
+      class="market-dialog-css"
       append-to-body="true"
       :destroy-on-close="true"
     >
-      <el-form ref="panelForm" :model="panelForm" label-width="80px">
-        <el-form-item :label="$t('panel.name')">
-          <el-input v-model="panelForm.name" :placeholder="$t('panel.enter_name_tips')" />
+      <el-form ref="panelForm" :model="panelForm" :rules="rule" label-width="80px">
+        <el-form-item :label="$t('panel.name')" prop="name">
+          <el-input v-model="panelForm.name" :clearable="true" :placeholder="$t('panel.enter_name_tips')" />
         </el-form-item>
-        <el-form-item :label="$t('commons.folder')">
+        <el-form-item :label="$t('commons.folder')" prop="pid">
           <treeselect
             v-model="panelForm.pid"
             :clearable="false"
@@ -85,6 +85,7 @@ import { groupTree, panelSave } from '@/api/panel/panel'
 import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
 import MarketPreview from '@/views/panel/templateMarket/component/MarketPreview'
 import elementResizeDetectorMaker from 'element-resize-detector'
+import { PHONE_REGEX } from '@/utils/validate'
 
 export default {
   name: 'TemplateMarket',
@@ -92,7 +93,7 @@ export default {
   data() {
     return {
       hasResult: true,
-      templateMiniWidth: 350,
+      templateMiniWidth: 330,
       templateSpan: '25%',
       previewModel: false,
       previewVisible: false,
@@ -115,7 +116,23 @@ export default {
       folderSelectShow: false,
       baseUrl: 'https://dataease.io/templates',
       currentMarketTemplateShowList: [],
-      networkStatus: true
+      networkStatus: true,
+      rule: {
+        name: [
+          {
+            required: true,
+            message: this.$t('panel.template_name_tips'),
+            trigger: 'blur'
+          }
+        ],
+        pid: [
+          {
+            required: true,
+            message: '',
+            trigger: 'blur'
+          }
+        ]
+      }
     }
   },
   computed: {
@@ -263,7 +280,7 @@ export default {
     width: 320px;
   }
   .dialog-footer-self{
-    text-align: center;
+    text-align: right;
   }
   .search-button-self{
     text-align: left;
@@ -306,4 +323,33 @@ export default {
     background: #f5f6f7;
   }
 
+  .market-dialog-css{
+    ::v-deep .el-form-item__label {
+      width: 100% !important;
+      text-align: left;
+    }
+
+    ::v-deep
+    .el-form-item.is-required:not(.is-no-asterisk)
+    > .el-form-item__label:before {
+      display: none;
+    }
+
+    ::v-deep
+    .el-form-item.is-required:not(.is-no-asterisk)
+    > .el-form-item__label::after {
+      content: "*";
+      color: #f54a45;
+      margin-left: 2px;
+    }
+
+    ::v-deep .el-form-item__content {
+      margin-left: 0 !important;
+    }
+
+    ::v-deep .vue-treeselect__input{
+      vertical-align:middle;
+    }
+  }
+
 </style>