feat/sancongtou-v5 (#1031)

Co-authored-by: sealday <zhanglin@daoyoucloud.com>
Co-authored-by: wjh <wwwjh0710@163.com>
Co-authored-by: wangjiahui <wwwjh0710@163.com>
Reviewed-on: daoyoucloud/tachybase#1031
Co-authored-by: bai.zixv <bai.zixv@foxmail.com>
Co-committed-by: bai.zixv <bai.zixv@foxmail.com>

packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx

@@ -72,6 +72,7 @@ const InternalGridCard = (props) => {
   const { run, params } = service;
   const meta = service?.data?.meta;
   const fieldSchema = useFieldSchema();
+
   const field = useField<ArrayField>();
   const Designer = useDesigner();
   const [schemaMap] = useState(new Map());
@@ -108,28 +109,24 @@ const InternalGridCard = (props) => {
   );
 
   /* 以下为无限滚动逻辑 */
-  // XXX: 需要仔细梳理这里的逻辑, 目前的实现有点效果问题
-  const [data, setData] = useState(field.value || []);
+  // XXX: 需要仔细梳理这里的逻辑, 目前的实现有点效果问题, 刷新不顺滑;
+  // 似乎和 tachybase 本身的渲染机制有关, 渲染单个列表项的时候, 总是去取对应的 fieldSchema, 然后赋值上field.value. 这个机制导致了总是会刷新整个区块, 而不是期望的只更新增量部分.
+  // HACK: 这里其实是借用原本的翻页刷新机制, 模拟了无限滚动的机制. 没有时间成本去更改上游, 这样处理还算是个比较好的实现
   const [hasMore, setHasMore] = useState(true);
+  const [fetchCount, setFetchCount] = useState(1);
 
-  const loadMore = async () => {
-    const { count, pageSize = 10, page = 1 } = meta || {};
-    await onPaginationChange(page + 1, pageSize);
+  const loadMore = useCallback(async () => {
+    const { pageSize = 5 } = meta || {};
+    await onPaginationChange(1, fetchCount * pageSize);
+    setFetchCount((prevFetchCount) => prevFetchCount + 1);
     setHasMore(false);
-  };
+  }, [meta, onPaginationChange, setHasMore]);
 
   useEffect(() => {
     const { count, pageSize = 10, page = 1 } = meta || {};
     const hasMore = count > page * pageSize;
-
-    setData((val = []) => {
-      const currentVal = field.value || [];
-      return [...val, ...currentVal];
-    });
-
     setHasMore(hasMore);
-  }, [meta?.page]);
-
+  }, [meta?.pageSize]);
   /* 以上为无限滚动逻辑 */
 
   return (
@@ -153,7 +150,7 @@ const InternalGridCard = (props) => {
                   pageSizeOptions,
                 }
           }
-          dataSource={needInfiniteScroll ? data : field.value}
+          dataSource={field.value}
           grid={{
             ...columnCount,
             sm: columnCount.xs,
@@ -161,6 +158,7 @@ const InternalGridCard = (props) => {
             gutter: [rowGutter, rowGutter],
           }}
           renderItem={(item, index) => {
+            const schema = getSchema(index);
             return (
               <Col style={{ height: '100%' }}>
                 <RecursionField
@@ -168,8 +166,8 @@ const InternalGridCard = (props) => {
                   basePath={field.address}
                   name={index}
                   onlyRenderProperties
-                  schema={getSchema(index)}
-                ></RecursionField>
+                  schema={schema}
+                />
               </Col>
             );
           }}

packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/ShareProduct.tsx

@@ -5,12 +5,12 @@ import { CustomComponentType } from '@hera/plugin-core/client';
 import { Button, Image, Modal, Toast } from 'antd-mobile';
 
 import downloadImage from '../assets/download.svg';
-
-import './style.less';
+import { useStyles } from './style';
 
 export const ShareProduct = () => {
+  const styles = useStyles();
   return (
-    <Button className={'m-share'} color="primary" size="small" block onClick={showModal}>
+    <Button className={styles['m-share']} color="primary" size="small" block onClick={showModal}>
       分享产品
       <ShareAltOutlined />
     </Button>

packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/ShowDetail.tsx

@@ -3,9 +3,8 @@ import React from 'react';
 import { CustomComponentType } from '@hera/plugin-core/client';
 import { Link, useNavigate } from 'react-router-dom';
 
-import './style.less';
-
 import { getPathProductDetail } from '../utils/path';
+import { useStyles } from './style';
 
 // @deprecated
 export const ShowDetail = () => {
@@ -13,12 +12,15 @@ export const ShowDetail = () => {
   // const handleClick = () => {
   //   navigate('/mobile/');
   // };
+  const styles = useStyles();
   return (
-    <Link className={'m-detail'} to={getPathProductDetail({ dataSource: 'main', collection: 'cards', id: '15' })}>
+    <Link
+      className={styles['m-detail']}
+      to={getPathProductDetail({ dataSource: 'main', collection: 'cards', id: '15' })}
+    >
       显示详情
     </Link>
   );
-  Ø;
 };
 
 ShowDetail.displayName = 'ShowDetail';

packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/style.less

@@ -1,11 +0,0 @@
-.m-detail {
-    /* background-color: red; */
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-}
-
-.m-share {
-    align-self: 'center';
-    font-size: 16;
-}

packages/plugins/@hera/plugin-sancongtou/src/client/custom-components/style.ts

@@ -0,0 +1,14 @@
+import { createStyles } from '@tachybase/client';
+
+export const useStyles = createStyles(({ css }) => ({
+  ['m-detail']: css`
+    /* background-color: red; */
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  `,
+  ['m-share']: css`
+    align-self: 'center';
+    font-size: 16;
+  `,
+}));