fix: 优化筛选组件文本情况时加2s延迟，轮播图没有数据时添加提示 close #735 (#738)

Reviewed-on: daoyoucloud/tachycode#738
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>

.changeset/cyan-papayas-peel.md

@@ -0,0 +1,5 @@
+---
+"@hera/plugin-mobile": patch
+---
+
+优化筛选组件在文本框情况时候延迟2s，轮播图组件没有数据添加提示

packages/plugins/@hera/plugin-mobile/src/client/schma-component/swiper/SwiperBlock.tsx

@@ -2,27 +2,19 @@ import { BlockItem, css, useDesignable, useRequest, withDynamicSchemaProps } fro
 import { useFieldSchema } from '@nocobase/schema';
 import { Swiper } from 'antd-mobile';
 import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 export const SwiperBlock = withDynamicSchemaProps((props) => {
   const { fieldValue, data, changeNav } = props;
   if (!data) return;
-  const items = data['data']
+  const items = data['data'].length
-    ?.map((imgItem, index) => {
+    ? data['data']
-      return imgItem[fieldValue] ? (
+        .map((imgItem, index) => {
+          return imgItem[fieldValue][0]?.url ? (
             <Swiper.Item key={index}>
               <div
-            className={css`
+                className={swiperStyle}
-              height: 20vh;
-              color: #ffffff;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              font-size: 48px;
-              user-select: none;
-            `}
                 style={{
-              backgroundImage: `url(${imgItem[fieldValue][0].url})`,
+                  backgroundImage: `url(${imgItem[fieldValue][0]?.url})`,
                   backgroundSize: '100% 100%',
                   backgroundAttachment: 'fixed',
                 }}
@@ -31,9 +23,33 @@ export const SwiperBlock = withDynamicSchemaProps((props) => {
                 }}
               ></div>
             </Swiper.Item>
-      ) : null;
+          ) : (
+            <Swiper.Item key={index}>
+              <div
+                className={swiperStyle}
+                style={{
+                  backgroundColor: '#e0e0e0',
+                }}
+              >
+                无法加载此内容
+              </div>
+            </Swiper.Item>
+          );
         })
-    .filter(Boolean);
+        .filter(Boolean)
+    : [
+        <Swiper.Item key={0}>
+          <div
+            className={swiperStyle}
+            style={{
+              backgroundColor: '#e0e0e0',
+            }}
+          >
+            当前区块没有可加载数据
+          </div>
+        </Swiper.Item>,
+      ];
+
   return (
     <BlockItem>
       <Swiper loop autoplay>
@@ -42,3 +58,13 @@ export const SwiperBlock = withDynamicSchemaProps((props) => {
     </BlockItem>
   );
 });
+
+const swiperStyle = css`
+  height: 20vh;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 25px;
+  user-select: none;
+`;

packages/plugins/@hera/plugin-mobile/src/client/schma-component/swiper/SwiperBlockInitializer.tsx

@@ -8,6 +8,7 @@ import {
 import React from 'react';
 import { createGridCardBlockSchema } from '../../schma-block/schema-create/createGridCardBlockSchma';
 import { ISchema } from '@nocobase/schema';
+import { Toast } from 'antd-mobile';
 
 export const SwiperBlockInitializer = () => {
   const { insert } = useSchemaInitializer();
@@ -17,7 +18,10 @@ export const SwiperBlockInitializer = () => {
   const onCreateBlockSchema = async ({ item }) => {
     const collection = cm.getCollection(item.name);
     const value = collection.fields.find((field) => field.interface === 'attachment');
-    if (!value) return;
+    if (!value) {
+      Toast.show({ content: '当前数据源暂无可加载数据' });
+      return;
+    }
     const schema: ISchema = {
       type: 'void',
       name: item.name,

packages/plugins/@hera/plugin-mobile/src/client/schma-component/tab-search/components/field-item/TabSearchCollapsibleInputItemAction.ts

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { useFieldSchema } from '@nocobase/schema';
 import { useCollection, useCollectionManager, useDesignable, useDesigner } from '@nocobase/client';
 import {
@@ -79,10 +79,14 @@ export const useTabSearchCollapsibleInputItemAction = (props) => {
     setCustomLabelKey(label as string);
   };
   const onInputChange = (v) => {
+    const timeout = { current: null };
+    clearTimeout(timeout.current);
     const inputValue = v.target?.value || v;
     setValue(inputValue);
     if (inputValue === '') {
+      timeout.current = setTimeout(() => {
         onSelect(inputValue);
+      }, 2000);
     }
   };
   const onButtonClick = () => {