Merge pull request #7340 from dataease/pr@dev-v2@style_template-manage

style: 样式调整

core/core-frontend/src/assets/svg/dv-nothing.svg

@@ -0,0 +1,14 @@
+<svg width="126" height="125" viewBox="0 0 126 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.2978 13.9995H102.702C105.904 13.9995 108.5 16.5805 108.5 19.7642V83.9427L83.775 109.467H30.2978C27.0957 109.467 24.5 106.886 24.5 103.702V19.7642C24.5 16.5805 27.0957 13.9995 30.2978 13.9995Z" fill="#D6DAE1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.7749 109.426V85.8234C83.7749 84.7622 84.6401 83.9019 85.7075 83.9019H108.5L83.7749 109.426Z" fill="#B5BEC8"/>
+<rect x="76.1875" y="21.999" width="25" height="32" rx="2" fill="#F4F5F9"/>
+<rect x="32.1001" y="22.0542" width="32.25" height="5" rx="1" fill="#F4F5F9"/>
+<rect x="32.1001" y="31.6406" width="32.25" height="5" rx="1" fill="#F4F5F9"/>
+<rect x="32.1001" y="41.6406" width="16.125" height="5" rx="1" fill="#F4F5F9"/>
+<rect x="32.1001" y="68.9229" width="68.8" height="5" rx="1" fill="#F4F5F9"/>
+<rect x="32.1001" y="76.3799" width="68.8" height="5" rx="1" fill="#F4F5F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.2158 54.1396C38.7749 54.1396 29.5002 63.4602 29.5002 74.9577C29.5002 86.4552 38.7749 95.7758 50.2158 95.7758C53.0012 95.7758 55.6583 95.2233 58.0843 94.2214L68.8536 110.371L74.4055 106.63L63.7784 90.6942C68.16 86.877 70.9313 81.2426 70.9313 74.9577C70.9313 63.4602 61.6567 54.1396 50.2158 54.1396ZM50.2158 60.8555C57.9661 60.8555 64.2489 67.1694 64.2489 74.9581C64.2489 82.7467 57.9661 89.0606 50.2158 89.0606C42.4655 89.0606 36.1827 82.7467 36.1827 74.9581C36.1827 67.1694 42.4655 60.8555 50.2158 60.8555Z" fill="white"/>
+<path d="M25.1083 59.9895L24.6889 60.9687L15.4748 57.0168L15.8942 56.0377L25.1083 59.9895Z" fill="#1F2329"/>
+<path d="M30.1257 56.5756L29.3071 57.2573L21.3806 47.733L22.1992 47.0513L30.1257 56.5756Z" fill="#1F2329"/>
+<path d="M25.2771 65.653L25.3153 66.719L12.6962 67.1485L12.658 66.0825L25.2771 65.653Z" fill="#1F2329"/>
+</svg>

core/core-frontend/src/views/template/index.vue

@@ -24,7 +24,7 @@
     </el-input>
   </div>
   <div class="sys-setting-p">
-    <div class="container-sys-param">
+    <div class="container-sys-param" v-show="state.templateCategories.length">
       <div style="width: 100%; height: 100%">
         <div class="de-template">
           <div class="tabs-container flex-tabs">
@@ -52,11 +52,24 @@
                   <span>的搜索结果&nbsp;{{ currentTemplateShowListComputed.length }}&nbsp;个</span>
                 </span>
               </div>
-              <el-empty
-                v-if="!state.currentTemplateShowList.length"
-                :image="NoneImage"
-                :description="'暂无模板'"
-              />
+              <el-row
+                style="height: 100%"
+                v-if="!state.currentTemplateShowList.length && !state.templateFilterText"
+                class="custom-position"
+              >
+                <Icon style="width: 125px; height: 125px" name="dv-empty" />
+                <span style="margin-top: 8px; font-size: 14px"> 暂无模版 </span>
+              </el-row>
+
+              <el-row
+                style="height: 100%"
+                v-if="!state.currentTemplateShowList.length && state.templateFilterText"
+                class="custom-position"
+              >
+                <Icon style="width: 125px; height: 125px" name="dv-nothing" />
+                <span style="margin-top: 8px; font-size: 14px"> 没有找到相关模版 </span>
+              </el-row>
+
               <div v-show="state.currentTemplateId !== ''" id="template-box" class="template-box">
                 <de-template-item
                   v-for="item in currentTemplateShowListComputed"
@@ -81,93 +94,113 @@
             </div>
           </div>
         </div>
-        <el-dialog
-          :title="state.dialogTitle"
-          v-model="state.editTemplate"
-          append-to-body
-          class="de-dialog-form"
-          width="420px"
-        >
-          <el-form
-            ref="templateEditFormRef"
-            label-position="top"
-            class="de-form-item"
-            :model="state.templateEditForm"
-            :rules="state.templateEditFormRules"
-          >
-            <el-form-item :label="state.dialogTitleLabel" prop="name">
-              <el-input :placeholder="'请输入分类名称'" v-model="state.templateEditForm.name" />
-            </el-form-item>
-          </el-form>
-          <template #footer>
-            <div class="dialog-footer">
-              <el-button secondary @click="close()">{{ t('commons.cancel') }}</el-button>
-              <el-button type="primary" @click="saveTemplateEdit(state.templateEditForm)"
-                >{{ t('commons.confirm') }}
-              </el-button>
-            </div>
-          </template>
-        </el-dialog>
-        <!--导入templateDialog-->
-        <el-dialog
-          :title="state.templateDialog.title"
-          v-model="state.templateDialog.visible"
-          :show-close="true"
-          :destroy-on-close="true"
-          class="de-dialog-form"
-          width="600px"
-        >
-          <de-template-import
-            v-if="state.templateDialog.visible"
-            :pid="state.templateDialog.pid"
-            :template-id="state.templateDialog.templateId"
-            :opt-type="state.templateDialog.optType"
-            :template-categories="state.templateCategories"
-            @doTest="closeEditTemplateDialog"
-            @refresh="showCurrentTemplate(state.currentTemplateId, state.currentTemplateLabel)"
-            @closeEditTemplateDialog="closeEditTemplateDialog"
-          />
-        </el-dialog>
-
-        <!--导入templateDialog-->
-        <el-dialog
-          :title="state.templateDialog.title"
-          v-model="state.templateDialog.visible"
-          :show-close="true"
-          :destroy-on-close="true"
-          class="de-dialog-form"
-          width="600px"
-        >
-          <de-template-import
-            v-if="state.templateDialog.visible"
-            :pid="state.templateDialog.pid"
-            :template-id="state.templateDialog.templateId"
-            :opt-type="state.templateDialog.optType"
-            :template-categories="state.templateCategories"
-            @refresh="importRefresh"
-            @closeEditTemplateDialog="closeEditTemplateDialog"
-          />
-        </el-dialog>
-
-        <!--导入templateDialog-->
-        <el-dialog
-          :title="'修改分类'"
-          v-model="state.batchOptDialogShow"
-          :show-close="true"
-          :destroy-on-close="true"
-          class="de-dialog-form"
-          width="600px"
-        >
-          <de-category-change
-            v-if="state.batchOptDialogShow"
-            :template-ids="batchTemplateIds"
-            :template-categories="state.templateCategories"
-            @refresh="showCurrentTemplate(state.currentTemplateId, state.currentTemplateLabel)"
-            @closeBatchEditTemplateDialog="closeBatchOptDialog"
-          ></de-category-change>
-        </el-dialog>
       </div>
     </div>
+    <div class="container-sys-param" v-show="!state.templateCategories.length">
+      <el-row style="height: 100%" class="custom-position">
+        <Icon style="width: 125px; height: 125px" name="dv-empty" />
+        <span style="margin-top: 8px; font-size: 14px">
+          <el-button
+            style="float: right"
+            type="primary"
+            @click="templateImport(state.currentTemplateId)"
+          >
+            {{ t('visualization.import') }}
+          </el-button>
+          <el-button
+            style="float: right; margin-right: 12px"
+            @click="showTemplateEditDialog('new', null)"
+          >
+            添加分类
+          </el-button>
+        </span>
+      </el-row>
+    </div>
+    <el-dialog
+      :title="state.dialogTitle"
+      v-model="state.editTemplate"
+      append-to-body
+      class="de-dialog-form"
+      width="420px"
+    >
+      <el-form
+        ref="templateEditFormRef"
+        label-position="top"
+        class="de-form-item"
+        :model="state.templateEditForm"
+        :rules="state.templateEditFormRules"
+      >
+        <el-form-item :label="state.dialogTitleLabel" prop="name">
+          <el-input :placeholder="'请输入分类名称'" v-model="state.templateEditForm.name" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button secondary @click="close()">{{ t('commons.cancel') }}</el-button>
+          <el-button type="primary" @click="saveTemplateEdit(state.templateEditForm)"
+            >{{ t('commons.confirm') }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!--导入templateDialog-->
+    <el-dialog
+      :title="state.templateDialog.title"
+      v-model="state.templateDialog.visible"
+      :show-close="true"
+      :destroy-on-close="true"
+      class="de-dialog-form"
+      width="600px"
+    >
+      <de-template-import
+        v-if="state.templateDialog.visible"
+        :pid="state.templateDialog.pid"
+        :template-id="state.templateDialog.templateId"
+        :opt-type="state.templateDialog.optType"
+        :template-categories="state.templateCategories"
+        @doTest="closeEditTemplateDialog"
+        @refresh="showCurrentTemplate(state.currentTemplateId, state.currentTemplateLabel)"
+        @closeEditTemplateDialog="closeEditTemplateDialog"
+      />
+    </el-dialog>
+
+    <!--导入templateDialog-->
+    <el-dialog
+      :title="state.templateDialog.title"
+      v-model="state.templateDialog.visible"
+      :show-close="true"
+      :destroy-on-close="true"
+      class="de-dialog-form"
+      width="600px"
+    >
+      <de-template-import
+        v-if="state.templateDialog.visible"
+        :pid="state.templateDialog.pid"
+        :template-id="state.templateDialog.templateId"
+        :opt-type="state.templateDialog.optType"
+        :template-categories="state.templateCategories"
+        @refresh="importRefresh"
+        @closeEditTemplateDialog="closeEditTemplateDialog"
+      />
+    </el-dialog>
+
+    <!--导入templateDialog-->
+    <el-dialog
+      :title="'修改分类'"
+      v-model="state.batchOptDialogShow"
+      :show-close="true"
+      :destroy-on-close="true"
+      class="de-dialog-form"
+      width="600px"
+    >
+      <de-category-change
+        v-if="state.batchOptDialogShow"
+        :template-ids="batchTemplateIds"
+        :template-categories="state.templateCategories"
+        @refresh="showCurrentTemplate(state.currentTemplateId, state.currentTemplateLabel)"
+        @closeBatchEditTemplateDialog="closeBatchOptDialog"
+      ></de-category-change>
+    </el-dialog>
   </div>
 </template>
 
@@ -188,6 +221,7 @@ import DeTemplateList from '@/views/template/component/DeTemplateList.vue'
 const { t } = useI18n()
 const templateEditFormRef = ref(null)
 const templateListRef = ref(null)
+import NoneTemplate from '@/assets/svg/dv-empty.svg'
 import NoneImage from '@/assets/none.png'
 import DeTemplateImport from '@/views/template/component/DeTemplateImport.vue'
 import DeTemplateItem from '@/views/template/component/DeTemplateItem.vue'
@@ -620,4 +654,23 @@ onMounted(() => {
   float: right;
   width: 320px;
 }
+
+.custom-position {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  flex-flow: row nowrap;
+  color: #9ea6b2;
+  flex-direction: column;
+  span {
+    line-height: 22px;
+    color: #646a73;
+  }
+}
+
+.ed-empty__image img {
+  width: 126px;
+}
 </style>