Merge pull request #6889 from dataease/pr@dev-v2@refactor_market-manage

refactor: 模版管理UI变更

core/core-frontend/src/views/template/component/DeTemplateList.vue

@@ -11,6 +11,16 @@
       :description="'没有找到相关内容'"
     />
     <ul>
+      <li
+        :class="[{ select: state.activeTemplate === '1' }]"
+        @click="nodeClick({ id: '1', label: '默认分类' })"
+      >
+        <el-icon class="de-icon-sense">
+          <Icon name="scene" />
+        </el-icon>
+        <span class="text-template-overflow" :title="'默认分类'">默认分类</span>
+      </li>
+      <hr class="custom-line" />
       <li
         v-for="ele in templateListComputed"
         :key="ele.name"
@@ -43,16 +53,13 @@
           </el-dropdown>
         </span>
       </li>
+      <li @click="add()">
+        <el-icon class="de-icon-sense">
+          <Plus />
+        </el-icon>
+        <span class="text-template-overflow">{{ t('visualization.add_category') }}</span>
+      </li>
     </ul>
-    <el-button
-      v-if="state.templateFilterText === ''"
-      style="width: 100%"
-      icon="el-icon-plus"
-      secondary
-      @click="add()"
-    >
-      {{ t('visualization.add_category') }}
-    </el-button>
   </div>
 </template>
 
@@ -92,8 +99,7 @@ const state = reactive({
 })
 
 const templateListComputed = computed(() => {
-  if (!state.templateFilterText) return [...props.templateList]
-  return props.templateList.filter(ele => ele['name']?.includes(state.templateFilterText))
+  return props.templateList.filter(ele => ele['id'] !== '1')
 })
 
 const clickMore = (type, data) => {
@@ -247,4 +253,11 @@ defineExpose({
   width: 20px;
   height: 20px;
 }
+
+.custom-line {
+  margin: 4px;
+  background: rgba(31, 35, 41, 0.15);
+  border: 0;
+  height: 1px;
+}
 </style>

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

@@ -36,9 +36,15 @@
             </div>
             <div class="de-tabs-right">
               <div v-if="state.currentTemplateLabel" class="active-template">
-                {{ state.currentTemplateLabel }}&nbsp;&nbsp;({{
-                  state.currentTemplateShowList.length
-                }})
+                <span v-show="!state.templateFilterText"
+                  >{{ state.currentTemplateLabel }}&nbsp;&nbsp;({{
+                    state.currentTemplateShowList.length
+                  }})</span
+                >
+                <span v-show="state.templateFilterText">
+                  <span style="color: #3370ff">{{ state.currentTemplateLabel }}&nbsp;&nbsp;</span>
+                  <span>的搜索结果&nbsp;{{ currentTemplateShowListComputed.length }}&nbsp;个</span>
+                </span>
               </div>
               <el-empty
                 v-if="!state.currentTemplateShowList.length"
@@ -47,7 +53,7 @@
               />
               <div v-show="state.currentTemplateId !== ''" id="template-box" class="template-box">
                 <de-template-item
-                  v-for="item in state.currentTemplateShowList"
+                  v-for="item in currentTemplateShowListComputed"
                   :key="item.id"
                   :width="state.templateCurWidth"
                   :model="item"
@@ -174,6 +180,13 @@ const state = reactive({
   }
 })
 
+const currentTemplateShowListComputed = computed(() => {
+  if (!state.templateFilterText) return [...state.currentTemplateShowList]
+  return state.currentTemplateShowList.filter(ele =>
+    ele['name']?.includes(state.templateFilterText)
+  )
+})
+
 const nameList = computed(() => {
   const { nodeType } = state.templateEditForm || {}
   if (nodeType === 'template') {
@@ -186,6 +199,18 @@ const nameList = computed(() => {
   return []
 })
 
+const initStyle = () => {
+  nextTick(() => {
+    const tree = document.querySelector('.ed-tree')
+    // 创建横线元素
+    const line = document.createElement('hr')
+    line.classList.add('custom-line')
+
+    // 将横线元素插入到第一个选项后面
+    tree.firstElementChild.appendChild(line)
+  })
+}
+
 const nameRepeat = value => {
   if (!nameList.value) {
     return false
@@ -357,6 +382,7 @@ onMounted(() => {
       state.templateCurWidth = Math.trunc(offsetWidth / curSeparator) - 24 - curSeparator
     })
   })
+  initStyle()
 })
 </script>