Fix/serarch empty:为对部分功能设置搜索为空样式处理 (#446)

packages/common/component/PluginBlockList.vue

@@ -1,5 +1,6 @@
 <template>
   <ul
+    v-if="state.data.length"
     :class="['block-list', 'lowcode-scrollbar', { 'is-small-list': blockStyle === 'mini' }, { isShortcutPanel }]"
     @mouseleave="state.hover = false"
   >
@@ -122,12 +123,14 @@
       </div>
     </div>
   </ul>
+  <search-empty :isShow="!state.data.length" />
 </template>
 
 <script>
 import { computed, watch, inject, reactive } from 'vue'
 import { iconSetting, iconPlus } from '@opentiny/vue-icon'
 import { Tooltip, Progress, Popover } from '@opentiny/vue'
+import SearchEmpty from './SearchEmpty.vue'
 import SvgButton from './SvgButton.vue'
 
 const defaultImg =
@@ -140,7 +143,8 @@ export default {
     IconSetting: iconSetting(),
     IconPlus: iconPlus(),
     TinyPopover: Popover,
-    SvgButton
+    SvgButton,
+    SearchEmpty
   },
   props: {
     data: {

packages/common/component/SearchEmpty.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-if="isShow" class="empty-wrap">
+    <svg-icon class="empty-icon" name="empty"></svg-icon>
+    <p class="empty-text">暂无数据</p>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    /**
+     * 控制搜索空数据显示
+     */
+    isShow: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>

packages/common/index.js

@@ -79,6 +79,7 @@ import BlockDeployDialog from './component/BlockDeployDialog.vue'
 import ProgressBar from './component/ProgressBar.vue'
 import MetaButtonGroup from './component/MetaButtonGroup.vue'
 import MetaTableColumns from './component/MetaTableColumns.vue'
+import SearchEmpty from './component/SearchEmpty.vue'
 
 import i18n, { i18nKeyMaps } from '@opentiny/tiny-engine-controller/js/i18n'
 
@@ -145,7 +146,8 @@ export const MetaComponents = {
   MetaIpSection,
   MetaRelatedEditor,
   MetaRelatedColumns,
-  MetaTableColumns
+  MetaTableColumns,
+  SearchEmpty
 }
 
 export {
@@ -206,5 +208,6 @@ export {
   BindI18n,
   BlockDeployDialog,
   ProgressBar,
-  MetaTableColumns
+  MetaTableColumns,
+  SearchEmpty
 }

packages/plugins/bridge/src/BridgeManage.vue

@@ -6,7 +6,11 @@
         clearable
         placeholder="请输入关键字搜索"
         @update:modelValue="searchBridgeData"
-      ></tiny-search>
+      >
+        <template #prefix>
+          <tiny-icon-search />
+        </template>
+      </tiny-search>
     </div>
     <div class="list">
       <div
@@ -19,17 +23,16 @@
         <div class="item-label">{{ item.name }}</div>
         <svg-icon class="setting-icon" name="setting" @click.stop="openEdit(item, index)"></svg-icon>
       </div>
-      <div v-if="!list.length" class="empty-wrap">
-        <svg-icon class="empty-icon" name="empty"></svg-icon>
-        <p class="empty-text">暂无数据</p>
-      </div>
+      <search-empty :isShow="!list.length" />
     </div>
   </div>
 </template>
 
 <script>
 import { watchEffect, ref, reactive } from 'vue'
 import { Search } from '@opentiny/vue'
+import { iconSearch } from '@opentiny/vue-icon'
+import { SearchEmpty } from '@opentiny/tiny-engine-common'
 import {
   RESOURCE_TYPE,
   ACTION_TYPE,
@@ -44,7 +47,9 @@ import {
 
 export default {
   components: {
-    TinySearch: Search
+    TinySearch: Search,
+    TinyIconSearch: iconSearch(),
+    SearchEmpty
   },
   props: {
     name: {

packages/plugins/data/src/DataSourceList.vue

@@ -15,7 +15,7 @@
         </div>
       </li>
     </ul>
-    <div v-if="!filteredKey.length" class="data-source-list-blank"><span>查询结果为空</span></div>
+    <search-empty :isShow="!filteredKey.length" />
   </div>
 </template>
 
@@ -25,14 +25,15 @@ import { useModal } from '@opentiny/tiny-engine-controller'
 import { useResource } from '@opentiny/tiny-engine-controller'
 import { findExpressionInAppSchema } from '@opentiny/tiny-engine-controller/js/ast'
 import { constants } from '@opentiny/tiny-engine-utils'
-import { SvgButton } from '@opentiny/tiny-engine-common'
+import { SvgButton, SearchEmpty } from '@opentiny/tiny-engine-common'
 import { STATE, OPTION_TYPE } from './js/constants'
 
 const { COMPONENT_NAME } = constants
 
 export default {
   components: {
-    SvgButton
+    SvgButton,
+    SearchEmpty
   },
   props: {
     modelValue: {

packages/plugins/data/src/Main.vue

@@ -15,8 +15,13 @@
         :modelValue="query"
         class="left-filter"
         placeholder="请输入搜索条件"
+        clearable
         @update:modelValue="search"
-      ></tiny-search>
+      >
+        <template #prefix>
+          <tiny-icon-search />
+        </template>
+      </tiny-search>
       <div class="add-btn">
         <tiny-button @click="openPanel(OPTION_TYPE.ADD)">{{
           activeName === STATE.CURRENT_STATE ? '添加变量' : '添加全局变量'
@@ -76,6 +81,7 @@ import {
   useHelp
 } from '@opentiny/tiny-engine-controller'
 import { setState, getSchema, deleteState, setGlobalState, getGlobalState } from '@opentiny/tiny-engine-canvas'
+import { iconSearch } from '@opentiny/vue-icon'
 import { CloseIcon, LinkButton } from '@opentiny/tiny-engine-common'
 import DataSourceList from './DataSourceList.vue'
 import CreateVariable from './CreateVariable.vue'
@@ -94,7 +100,8 @@ export default {
     TinyTabs: Tabs,
     TinyTabItem: TabItem,
     CreateStore,
-    LinkButton
+    LinkButton,
+    TinyIconSearch: iconSearch()
   },
   setup(props, { emit }) {
     const variableRef = ref(null)

packages/plugins/i18n/src/Main.vue

@@ -110,10 +110,7 @@
           </tiny-grid-column>
           <template #empty>
             <div v-if="isLoading" id="empty-loading-box" class="i18n-loading"></div>
-            <div v-else class="empty-wrap">
-              <svg-icon class="empty-icon" name="empty"></svg-icon>
-              <p class="empty-text">暂无数据</p>
-            </div>
+            <search-empty isShow="!isLoading" />
           </template>
         </tiny-grid>
       </div>
@@ -126,7 +123,7 @@ import { computed, ref, watchEffect, reactive, onMounted, nextTick, resolveCompo
 import useClipboard from 'vue-clipboard3'
 import { Grid, GridColumn, Input, Popover, Button, FileUpload, Loading, Tooltip, Select } from '@opentiny/vue'
 import { iconLoadingShadow } from '@opentiny/vue-icon'
-import { PluginPanel, LinkButton } from '@opentiny/tiny-engine-common'
+import { PluginPanel, LinkButton, SearchEmpty } from '@opentiny/tiny-engine-common'
 import { useTranslate, useApp, useModal, getGlobalConfig, useHelp } from '@opentiny/tiny-engine-controller'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { useHttp } from '@opentiny/tiny-engine-http'
@@ -143,7 +140,8 @@ export default {
     PluginPanel,
     LinkButton,
     TinySelect: Select,
-    TinyFileUpload: FileUpload
+    TinyFileUpload: FileUpload,
+    SearchEmpty
   },
   setup() {
     // 组件库iconLoadingShadow图标不能切换颜色，因此不同主题用不同icon

packages/plugins/materials/src/block/BlockVersionSelect.vue

@@ -17,10 +17,7 @@
           </template>
         </tiny-grid-column>
         <template #empty>
-          <div class="empty-wrap">
-            <svg-icon class="empty-icon" name="empty"></svg-icon>
-            <p class="empty-text">暂无数据</p>
-          </div>
+          <search-empty :isShow="true" />
         </template>
       </tiny-grid>
     </template>
@@ -30,7 +27,7 @@
 <script>
 import { reactive, watch, ref } from 'vue'
 import { Grid, GridColumn, Button } from '@opentiny/vue'
-import { PluginSetting, CloseIcon, BlockHistoryTemplate } from '@opentiny/tiny-engine-common'
+import { PluginSetting, CloseIcon, BlockHistoryTemplate, SearchEmpty } from '@opentiny/tiny-engine-common'
 import { useBlock, useModal } from '@opentiny/tiny-engine-controller'
 import { fetchBlockById, requestGroupBlockVersion } from './http'
 import { useVersionSelectPanel } from './js/usePanel'
@@ -42,7 +39,8 @@ export default {
     TinyButton: Button,
     PluginSetting,
     BlockHistoryTemplate,
-    CloseIcon
+    CloseIcon,
+    SearchEmpty
   },
   setup() {
     const { confirm } = useModal()

packages/plugins/materials/src/block/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="blocks-wrap">
     <block-group v-model="state.groups" @changeGroup="changeGroup"></block-group>
-    <tiny-search v-model="state.searchValue" placeholder="请输入关键字搜索">
+    <tiny-search v-model="state.searchValue" clearable placeholder="请输入关键字搜索">
       <template #prefix> <tiny-icon-search /> </template>
     </tiny-search>
     <block-list v-model:blockList="filterBlocks" :show-add-button="true" :show-block-shot="true"></block-list>

packages/plugins/materials/src/component/Main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="components-wrap">
-    <tiny-search v-model="state.searchValue" placeholder="请输入关键字搜索" @update:modelValue="change">
+    <tiny-search v-model="state.searchValue" placeholder="请输入关键字搜索" clearable @update:modelValue="change">
       <template #prefix> <icon-search /> </template>
     </tiny-search>
     <tiny-collapse v-model="state.activeName" class="lowcode-scrollbar">
@@ -24,13 +24,15 @@
           </template>
         </ul>
       </tiny-collapse-item>
+      <search-empty :isShow="!state.components.length" />
     </tiny-collapse>
   </div>
 </template>
 
 <script>
 import { inject, onMounted, reactive, ref } from 'vue'
 import { Collapse, CollapseItem, Search } from '@opentiny/vue'
+import { SearchEmpty } from '@opentiny/tiny-engine-common'
 import { iconSearch } from '@opentiny/vue-icon'
 import { useResource } from '@opentiny/tiny-engine-controller'
 import { CanvasDragItem, addComponent } from '@opentiny/tiny-engine-canvas'
@@ -41,7 +43,8 @@ export default {
     IconSearch: iconSearch(),
     TinyCollapse: Collapse,
     TinyCollapseItem: CollapseItem,
-    CanvasDragItem
+    CanvasDragItem,
+    SearchEmpty
   },
   setup() {
     const COMPONENT_PANEL_COLUMNS = '1fr 1fr 1fr'