@fe-free/core 3.0.7 → 3.0.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 3.0.8
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@3.0.8
+
 ## 3.0.7
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.7",
+  "version": "3.0.8",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "safe-stable-stringify": "^2.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "3.0.7"
+    "@fe-free/tool": "3.0.8"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/core_app/config.ts

@@ -0,0 +1,12 @@
+import { themeVariables } from '../theme';
+
+const themeConfig = {
+  components: {
+    Table: {
+      headerBg: themeVariables.color.theme02,
+      headerBorderRadius: 0,
+    },
+  },
+};
+
+export { themeConfig };

package/src/core_app/index.tsx

@@ -2,10 +2,12 @@ import { ProConfigProvider } from '@ant-design/pro-components';
 import { useTitle } from 'ahooks';
 import { App, ConfigProvider } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
+import { merge } from 'lodash-es';
 import { useEffect, useMemo } from 'react';
 import { BrowserRouter as Router, useNavigate } from 'react-router-dom';
 import { routeTool } from '../route';
 import { customValueTypeMap } from '../value_type_map';
+import { themeConfig } from './config';
 
 function getPathname(src?: string) {
   if (!src) {
@@ -122,6 +124,10 @@ function CoreApp(props: {
     }
   }, []);
 
+  const theme = useMemo(() => {
+    return merge(themeConfig, configProviderProps?.theme);
+  }, [configProviderProps?.theme]);
+
   return (
     <ProConfigProvider
       {...proConfigProviderProps}
@@ -129,7 +135,11 @@ function CoreApp(props: {
       valueTypeMap={{ ...customValueTypeMap, ...proConfigProviderProps?.valueTypeMap }}
     >
       {/* 集成好 locale */}
-      <ConfigProvider {...configProviderProps} locale={configProviderProps?.locale || zhCN}>
+      <ConfigProvider
+        {...configProviderProps}
+        locale={configProviderProps?.locale || zhCN}
+        theme={theme}
+      >
         <App {...appProps}>
           <Router {...routerProps} basename={basename}>
             <SetRouteTool basename={basename} />

package/src/crud/crud.stories.tsx

@@ -570,3 +570,60 @@ export const ExpandedRowRender: Story = {
     );
   },
 };
+
+export const FullPage: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        search: true,
+        ellipsis: true,
+      },
+      {
+        title: 'city',
+        dataIndex: 'city',
+      },
+      {
+        title: 'area',
+        dataIndex: 'area',
+      },
+    ];
+
+    return (
+      <div className="h-[800px] border border-red-500">
+        <CRUD
+          fullPage
+          actions={['create', 'read', 'delete', 'update']}
+          tableProps={{
+            columns,
+            request: fakeRequest,
+          }}
+          requestDeleteByRecord={fakeDeleteByRecord}
+          deleteProps={{
+            nameIndex: 'name',
+          }}
+          detailForm={() => (
+            <>
+              <ProFormText
+                name="name"
+                label="名字"
+                required
+                rules={[{ required: true }]}
+                extra="extra extra extra extra"
+              />
+            </>
+          )}
+          requestGetByRecord={fakeGetByRecord}
+          requestCreateByValues={fakeCreate}
+          requestUpdateById={fakeUpdateById}
+        />
+      </div>
+    );
+  },
+};

package/src/crud/crud.tsx

@@ -1,3 +1,4 @@
+import { EditOutlined, EyeOutlined } from '@ant-design/icons';
 import type { ActionType } from '@ant-design/pro-components';
 import { Button, message } from 'antd';
 import classNames from 'classnames';
@@ -5,7 +6,7 @@ import { isString } from 'lodash-es';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import type { TableProps } from '../table';
-import { Table } from '../table';
+import { getTableScroll, Table } from '../table';
 import { OperateDelete } from './crud_delete';
 import { CRUDDetail } from './crud_detail';
 import './style.scss';
@@ -36,6 +37,8 @@ function CRUDComponent<
     detailFormInstance,
     requestDeleteByRecords,
     batchActions: originBatchActions,
+    fullPage,
+    className,
   } = props;
 
   useTips(props);
@@ -108,7 +111,7 @@ function CRUDComponent<
     const operateColumn = {
       title: '操作',
       fixed: 'right',
-      width: operateColumnProps?.width || 120,
+      width: operateColumnProps?.width || 80,
       render: function (_, record) {
         const btns: React.ReactNode[] = [];
 
@@ -119,7 +122,7 @@ function CRUDComponent<
             if (disabled) {
               btns.push(
                 <span key="read" className="cursor-not-allowed text-03">
-                  {readProps?.operateText || '查看'}
+                  {readProps?.operateText || <EyeOutlined />}
                 </span>,
               );
             } else {
@@ -129,7 +132,7 @@ function CRUDComponent<
                   id={record[idField]}
                   record={record}
                   onSuccess={handleReload}
-                  trigger={<a>{readProps?.operateText || '查看'}</a>}
+                  trigger={<a>{readProps?.operateText || <EyeOutlined />}</a>}
                   action="read"
                   {...detailProps}
                 />,
@@ -145,7 +148,7 @@ function CRUDComponent<
             if (disabled) {
               btns.push(
                 <span key="read" className="cursor-not-allowed text-03">
-                  {readProps?.operateText || '查看'}
+                  {readProps?.operateText || <EyeOutlined />}
                 </span>,
               );
             } else {
@@ -155,7 +158,7 @@ function CRUDComponent<
                   to={`./detail/${record[detailIdIndex || 'id']}`}
                   target={readProps?.target}
                 >
-                  {readProps?.operateText || '查看'}
+                  {readProps?.operateText || <EyeOutlined />}
                 </Link>,
               );
             }
@@ -170,7 +173,7 @@ function CRUDComponent<
             if (disabled) {
               btns.push(
                 <span key="update" className="cursor-not-allowed text-03">
-                  {updateProps?.operateText || '编辑'}
+                  {updateProps?.operateText || <EditOutlined />}
                 </span>,
               );
             } else {
@@ -180,7 +183,7 @@ function CRUDComponent<
                   id={record[idField]}
                   record={record}
                   onSuccess={handleReload}
-                  trigger={<a>{updateProps?.operateText || '编辑'}</a>}
+                  trigger={<a>{updateProps?.operateText || <EditOutlined />}</a>}
                   action="update"
                   {...detailProps}
                 />,
@@ -289,11 +292,33 @@ function CRUDComponent<
     actionRef,
   });
 
+  const newTableProps = useMemo(() => {
+    if (fullPage) {
+      return {
+        ...tableProps,
+        scroll: {
+          ...getTableScroll(tableProps.columns),
+          y: '100%',
+        },
+      };
+    }
+
+    return tableProps;
+  }, [tableProps, fullPage]);
+
   return (
-    <div className={classNames('fec-crud')}>
+    <div
+      className={classNames(
+        'fec-crud',
+        {
+          'fec-crud-full-page': fullPage,
+        },
+        className,
+      )}
+    >
       <Table<DataSource>
         rowKey="id"
-        {...tableProps}
+        {...newTableProps}
         actionRef={actionRef}
         toolBarRender={toolBarRender}
         columns={newColumns}

package/src/crud/crud_delete.tsx

@@ -1,3 +1,4 @@
+import { DeleteOutlined } from '@ant-design/icons';
 import { Modal } from 'antd';
 import { useCallback } from 'react';
 
@@ -39,12 +40,12 @@ function OperateDelete(props: Params) {
   const { doDelete } = useDelete({ name, desc, onDelete, operateText });
 
   if (disabled) {
-    return <span className="cursor-not-allowed text-03">{operateText || '删除'}</span>;
+    return <span className="cursor-not-allowed text-03">{operateText || <DeleteOutlined />}</span>;
   }
 
   return (
     <a style={{ color: 'red' }} onClick={doDelete}>
-      {operateText || '删除'}
+      {operateText || <DeleteOutlined />}
     </a>
   );
 }

package/src/crud/style.scss

@@ -8,3 +8,65 @@
     }
   }
 }
+
+.fec-crud.fec-crud-full-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .fec-table {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    & > .ant-pro-table-search {
+      flex-shrink: 0;
+    }
+
+    & > .ant-pro-card:not(.ant-pro-table-search) {
+      flex: 1;
+      overflow: auto;
+      display: flex;
+
+      & > .ant-pro-card-body {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    .ant-table-wrapper {
+      flex: 1;
+      overflow: auto;
+
+      .ant-spin-nested-loading {
+        height: 100%;
+
+        .ant-spin-container {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+        }
+      }
+    }
+
+    .ant-table {
+      flex: 1;
+      overflow: auto;
+
+      .ant-table-container {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .ant-table-header {
+          flex-shrink: 0;
+        }
+
+        .ant-table-body {
+          scrollbar-width: thin;
+        }
+      }
+    }
+  }
+}

package/src/crud/types.tsx

@@ -135,6 +135,9 @@ interface CRUDProps<DataSource = any, Key = string> {
       options: { selectedRowKeys: Key[]; selectedRows: DataSource[] },
     ) => Promise<void>;
   }[];
+
+  fullPage?: boolean;
+  className?: string;
 }
 
 interface CRUDMethods {

package/src/crud_of_list/index.tsx

@@ -84,33 +84,34 @@ function CRUDOfListComponent(props: CRUDOfListProps, ref: React.ForwardedRef<CRU
   }, [debouncedSearchValue, searchDataIndex, tableProps.params]);
 
   return (
-    <div
-      className={classNames('fec-crud-of-list', {
-        // 先这样实现
-        'fec-crud-of-list-no-toolbar': !searchDataIndex && !props.actions.includes('create'),
-      })}
-    >
-      <CRUD
-        ref={ref}
-        {...rest}
-        tableProps={{
-          cardBordered: false,
-          showHeader: false,
-          ghost: true,
-          // 简单的隐藏搜索栏
-          search: false,
-          pagination: false,
-          ...tableProps,
-          params: newParams,
-          columns: newColumns,
-          toolBarRender,
-        }}
-        operateColumnProps={{
-          width: 1,
-          ...props.operateColumnProps,
-        }}
-      />
-    </div>
+    <CRUD
+      ref={ref}
+      {...rest}
+      className={classNames(
+        'fec-crud-of-list',
+        {
+          // 先这样实现
+          'fec-crud-of-list-no-toolbar': !searchDataIndex && !props.actions.includes('create'),
+        },
+        props.className,
+      )}
+      tableProps={{
+        cardBordered: false,
+        showHeader: false,
+        ghost: true,
+        // 简单的隐藏搜索栏
+        search: false,
+        pagination: false,
+        ...tableProps,
+        params: newParams,
+        columns: newColumns,
+        toolBarRender,
+      }}
+      operateColumnProps={{
+        width: 1,
+        ...props.operateColumnProps,
+      }}
+    />
   );
 }
 

package/src/crud_of_pure/crud_of_pure.stories.tsx

@@ -55,7 +55,6 @@ export const Basic: Story = {
         tableProps={{
           columns,
           request: fakeRequest,
-          pagination: false,
           search: {
             optionRender: (_, __, dom) => {
               return [
@@ -312,3 +311,70 @@ export const SpecialToolbar2: Story = {
     );
   },
 };
+
+export const FullPage: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        search: true,
+        ellipsis: true,
+      },
+      {
+        title: 'city',
+        dataIndex: 'city',
+      },
+      {
+        title: 'area',
+        dataIndex: 'area',
+      },
+    ];
+
+    return (
+      <div className="h-[800px] border border-red-500">
+        <CRUDOfPure
+          fullPage
+          specialSearch
+          // specialToolbar
+          actions={['create', 'delete']}
+          tableProps={{
+            columns,
+            request: fakeRequest,
+            search: {
+              optionRender: (_, __, dom) => {
+                return [
+                  ...dom,
+                  <Button key="1" type="primary" className="ml-2">
+                    额外的按钮
+                  </Button>,
+                ];
+              },
+            },
+          }}
+          requestDeleteByRecord={fakeDeleteByRecord}
+          deleteProps={{
+            nameIndex: 'id',
+          }}
+          detailForm={() => (
+            <>
+              <ProFormText
+                name="name"
+                label="名字"
+                required
+                rules={[{ required: true }]}
+                extra="extra extra extra extra"
+              />
+            </>
+          )}
+          requestCreateByValues={fakeCreate}
+        />
+      </div>
+    );
+  },
+};

package/src/crud_of_pure/index.tsx

@@ -9,6 +9,7 @@ interface CRUDOfPureProps<
   DataSource extends Record<string, any> = any,
   Key extends string | number = string,
 > extends CRUDProps<DataSource, Key> {
+  specialSearch?: boolean;
   /** 特殊位置的 toolbar，向上 margin，是的 search 和 toolbar 一起。仅适用于 search 很少的情况。 */
   specialToolbar?: boolean;
 }
@@ -39,30 +40,32 @@ function CRUDOfPureComponent(props: CRUDOfPureProps, ref: React.ForwardedRef<CRU
   }, [props.tableProps.columns]);
 
   return (
-    <div
-      className={classNames('fec-crud-of-pure', {
-        'fec-crud-of-pure-no-search': noSearch,
-        'fec-crud-of-pure-special-toolbar': props.specialToolbar,
-      })}
-    >
-      <CRUD
-        ref={ref}
-        {...props}
-        tableProps={{
-          cardBordered: false,
-          ...props.tableProps,
-          columns: newColumns,
-          toolBarRender: (...args) => {
-            let originRender: React.ReactNode[] = [];
+    <CRUD
+      ref={ref}
+      {...props}
+      className={classNames(
+        'fec-crud-of-pure',
+        {
+          'fec-crud-of-pure-no-search': noSearch,
+          'fec-crud-of-pure-special-search': props.specialSearch,
+          'fec-crud-of-pure-special-toolbar': props.specialToolbar,
+        },
+        props.className,
+      )}
+      tableProps={{
+        cardBordered: false,
+        ...props.tableProps,
+        columns: newColumns,
+        toolBarRender: (...args) => {
+          let originRender: React.ReactNode[] = [];
 
-            if (typeof props.tableProps.toolBarRender === 'function') {
-              originRender = props.tableProps.toolBarRender(...args);
-            }
-            return [...originRender, <div key="fake" style={{ height: '32px' }} />];
-          },
-        }}
-      />
-    </div>
+          if (typeof props.tableProps.toolBarRender === 'function') {
+            originRender = props.tableProps.toolBarRender(...args);
+          }
+          return [...originRender, <div key="fake" style={{ height: '32px' }} />];
+        },
+      }}
+    />
   );
 }
 

package/src/crud_of_pure/style.scss

@@ -49,11 +49,18 @@
     }
   }
 
-  // &.fec-crud-of-pure-no-toolbar {
-  //   .ant-pro-table-list-toolbar-container {
-  //     padding-block: 0;
-  //   }
-  // }
+  &.fec-crud-of-pure-special-search {
+    .ant-pro-table-search {
+      position: absolute;
+      z-index: 1;
+      background: transparent;
+      width: auto;
+    }
+
+    .ant-pro-table-list-toolbar-container {
+      padding-block-start: 16px;
+    }
+  }
 
   &.fec-crud-of-pure-special-toolbar {
     .ant-pro-table-list-toolbar {

package/src/table/index.tsx

@@ -1,6 +1,8 @@
 import type { ParamsType, ProTableProps } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
+import classNames from 'classnames';
 import { useMemo } from 'react';
+import './style.scss';
 
 interface TableProps<DataSource = any, Params = any, ValueType = 'text'>
   extends ProTableProps<DataSource, Params, ValueType> {
@@ -30,9 +32,11 @@ function Table<
   const newPagination = useMemo(() => {
     return {
       showSizeChanger: true,
-      showQuickJumper: true,
+      showTotal: false,
+      size: 'default',
+      // showQuickJumper: true,
       ...rest.pagination,
-    };
+    } as ProTableProps<DataSource, Params>['pagination'];
   }, [rest.pagination]);
 
   const hasSearch = !!newColumns?.find((column) => column.search);
@@ -72,6 +76,7 @@ function Table<
       scroll={getTableScroll(newColumns)}
       search={newSearch}
       {...rest}
+      className={classNames('fec-table', rest.className)}
     />
   );
 }
@@ -88,5 +93,5 @@ function getTableScroll(columns: ProTableProps<any, any>['columns'], defaultWidt
   return scroll;
 }
 
-export { Table };
+export { getTableScroll, Table };
 export type { TableProps };

package/src/table/style.scss

@@ -0,0 +1,24 @@
+.fec-table {
+  .ant-table.ant-table-middle {
+    .ant-table-thead > tr > th {
+      padding: 8px;
+    }
+  }
+
+  .ant-pagination {
+    // gap: 8px;
+
+    .ant-pagination-options {
+      order: -1;
+      margin-right: 8px;
+    }
+
+    .ant-pagination-item-link {
+      border: 1px solid #e2e7f0;
+    }
+
+    .ant-pagination-item {
+      border: 1px solid #e2e7f0;
+    }
+  }
+}