@fe-free/core 2.0.6 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @fe-free/core
 
+## 2.1.1
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/tool@2.1.1
+
+## 2.1.0
+
+### Minor Changes
+
+- feat: upload
+
+### Patch Changes
+
+- @fe-free/tool@2.1.0
+
 ## 2.0.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -29,6 +29,7 @@
     "axios": "^1.6.5",
     "classnames": "^2.5.1",
     "github-markdown-css": "^5.8.1",
+    "localforage": "^1.10.0",
     "lodash-es": "^4.17.21",
     "react-ace": "^11.0.1",
     "react-markdown": "^9.1.0",
@@ -38,7 +39,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.0.6"
+    "@fe-free/tool": "2.1.1"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/crud/crud.stories.tsx

@@ -183,6 +183,14 @@ export const MoreCustom: Story = {
           },
         }}
         createButton={<Button type="primary">自定义新建文本</Button>}
+        readProps={{
+          operateIsDisabled: (record) => {
+            if (record.id % 3) {
+              return false;
+            }
+            return true;
+          },
+        }}
         requestDeleteByRecord={fakeDeleteByRecord}
         deleteProps={{
           nameIndex: 'name',
@@ -214,6 +222,12 @@ export const MoreCustom: Story = {
             }
             return true;
           },
+          operateIsHidden: (record) => {
+            if (record.id % 4) {
+              return false;
+            }
+            return true;
+          },
         }}
       />
     );

package/src/crud/crud.tsx

@@ -1,5 +1,6 @@
 import type { ActionType } from '@ant-design/pro-components';
 import { Button, message } from 'antd';
+import classNames from 'classnames';
 import { isString } from 'lodash-es';
 import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import { Link } from 'react-router-dom';
@@ -112,67 +113,97 @@ function CRUDComponent<
         const btns: React.ReactNode[] = [];
 
         if (actions.includes('read')) {
-          btns.push(
-            <CRUDDetail
-              key="read"
-              id={record[idField]}
-              record={record}
-              onSuccess={handleReload}
-              trigger={<a>{readProps?.operateText || '查看'}</a>}
-              action="read"
-              {...detailProps}
-            />,
-          );
+          const hidden = readProps?.operateIsHidden?.(record) || false;
+          if (!hidden) {
+            const disabled = readProps?.operateIsDisabled?.(record) || false;
+            if (disabled) {
+              btns.push(
+                <span key="read" className="text-desc cursor-not-allowed">
+                  {readProps?.operateText || '查看'}
+                </span>,
+              );
+            } else {
+              btns.push(
+                <CRUDDetail
+                  key="read"
+                  id={record[idField]}
+                  record={record}
+                  onSuccess={handleReload}
+                  trigger={<a>{readProps?.operateText || '查看'}</a>}
+                  action="read"
+                  {...detailProps}
+                />,
+              );
+            }
+          }
         }
 
         if (actions.includes('read_detail')) {
-          btns.push(
-            <Link
-              key="read_detail"
-              to={`./detail/${record[detailIdIndex || 'id']}`}
-              target={readProps?.target}
-            >
-              {readProps?.operateText || '查看'}
-            </Link>,
-          );
+          const hidden = readProps?.operateIsHidden?.(record) || false;
+          if (!hidden) {
+            const disabled = readProps?.operateIsDisabled?.(record) || false;
+            if (disabled) {
+              btns.push(
+                <span key="read" className="text-desc cursor-not-allowed">
+                  {readProps?.operateText || '查看'}
+                </span>,
+              );
+            } else {
+              btns.push(
+                <Link
+                  key="read_detail"
+                  to={`./detail/${record[detailIdIndex || 'id']}`}
+                  target={readProps?.target}
+                >
+                  {readProps?.operateText || '查看'}
+                </Link>,
+              );
+            }
+          }
         }
 
         if (actions.includes('update')) {
-          const disabled = updateProps?.operateIsDisabled?.(record) || false;
+          const hidden = updateProps?.operateIsHidden?.(record) || false;
+          if (!hidden) {
+            const disabled = updateProps?.operateIsDisabled?.(record) || false;
 
-          if (disabled) {
-            btns.push(
-              <span key="update" className="text-desc cursor-not-allowed">
-                {updateProps?.operateText || '编辑'}
-              </span>,
-            );
-          } else {
-            btns.push(
-              <CRUDDetail
-                key="update"
-                id={record[idField]}
-                record={record}
-                onSuccess={handleReload}
-                trigger={<a>{updateProps?.operateText || '编辑'}</a>}
-                action="update"
-                {...detailProps}
-              />,
-            );
+            if (disabled) {
+              btns.push(
+                <span key="update" className="text-desc cursor-not-allowed">
+                  {updateProps?.operateText || '编辑'}
+                </span>,
+              );
+            } else {
+              btns.push(
+                <CRUDDetail
+                  key="update"
+                  id={record[idField]}
+                  record={record}
+                  onSuccess={handleReload}
+                  trigger={<a>{updateProps?.operateText || '编辑'}</a>}
+                  action="update"
+                  {...detailProps}
+                />,
+              );
+            }
           }
         }
 
         if (actions.includes('delete') && deleteProps) {
-          const disabled = deleteProps?.operateIsDisabled?.(record) || false;
-          btns.push(
-            <OperateDelete
-              key="delete"
-              name={record[deleteProps.nameIndex]}
-              desc={deleteProps.desc}
-              operateText={deleteProps.operateText}
-              disabled={disabled}
-              onDelete={getHandleDelete(record)}
-            />,
-          );
+          const hidden = deleteProps?.operateIsHidden?.(record) || false;
+          if (!hidden) {
+            const disabled = deleteProps?.operateIsDisabled?.(record) || false;
+            btns.push(
+              <OperateDelete
+                key="delete"
+                name={record[deleteProps.nameIndex]}
+                desc={deleteProps.desc}
+                operateText={deleteProps.operateText}
+                disabled={disabled}
+                onDelete={getHandleDelete(record)}
+              />,
+            );
+          }
         }
 
         return (
@@ -206,9 +237,8 @@ function CRUDComponent<
     operateColumnProps,
     actions,
     deleteProps,
+    readProps,
     handleReload,
-    readProps?.operateText,
-    readProps?.target,
     detailProps,
     detailIdIndex,
     updateProps,
@@ -259,7 +289,7 @@ function CRUDComponent<
   });
 
   return (
-    <div className="fec-crud">
+    <div className={classNames('fec-crud')}>
       <Table<DataSource>
         rowKey="id"
         {...tableProps}

package/src/crud/crud_of_simple.stories.tsx

@@ -17,10 +17,45 @@ export const Normal: Story = {
   render: () => {
     const columns = [
       {
-        title: 'id',
-        dataIndex: 'id',
+        title: '名字(省略)',
+        dataIndex: 'name',
         search: true,
+        ellipsis: true,
       },
+    ];
+
+    return (
+      <CRUDOfSimple
+        actions={['create', 'delete']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          pagination: false,
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'name',
+        }}
+        detailForm={() => (
+          <>
+            <ProFormText
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+      />
+    );
+  },
+};
+
+export const WithSearch: Story = {
+  render: () => {
+    const columns = [
       {
         title: '名字(省略)',
         dataIndex: 'name',
@@ -53,19 +88,59 @@ export const Normal: Story = {
           </>
         )}
         requestCreateByValues={fakeCreate}
+        simpleSearchProps={{
+          name: 'name',
+          widthFull: true,
+        }}
       />
     );
   },
 };
 
-export const WithSearch: Story = {
+export const HoverShow: Story = {
   render: () => {
     const columns = [
       {
-        title: 'id',
-        dataIndex: 'id',
+        title: '名字(省略)',
+        dataIndex: 'name',
         search: true,
+        ellipsis: true,
       },
+    ];
+
+    return (
+      <CRUDOfSimple
+        actions={['create', 'delete']}
+        tableProps={{
+          columns,
+          request: fakeRequest,
+          pagination: false,
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'name',
+        }}
+        detailForm={() => (
+          <>
+            <ProFormText
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+        simpleOperateHoverShow
+      />
+    );
+  },
+};
+
+export const JustSearch: Story = {
+  render: () => {
+    const columns = [
       {
         title: '名字(省略)',
         dataIndex: 'name',
@@ -76,7 +151,7 @@ export const WithSearch: Story = {
 
     return (
       <CRUDOfSimple
-        actions={['create', 'delete']}
+        actions={['delete']}
         tableProps={{
           columns,
           request: fakeRequest,
@@ -99,7 +174,8 @@ export const WithSearch: Story = {
         )}
         requestCreateByValues={fakeCreate}
         simpleSearchProps={{
-          name: 'id',
+          name: 'name',
+          widthFull: true,
         }}
       />
     );

package/src/crud/crud_of_simple.tsx

@@ -1,5 +1,6 @@
 import { useDebounce } from 'ahooks';
 import { Input } from 'antd';
+import classNames from 'classnames';
 import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { CRUD } from './crud';
 import type { CRUDMethods, CRUDProps } from './types';
@@ -8,12 +9,15 @@ interface CRUDOfSimpleProps<
   DataSource extends Record<string, any> = any,
   Key extends string | number = string,
 > extends CRUDProps<DataSource, Key> {
+  simpleOperateHoverShow?: boolean;
   // 传才开启搜索
   simpleSearchProps?: {
     /** 搜索项的名称，默认 keywords */
     name: string;
     /** 搜索项的 placeholder，默认 请输入 */
     placeholder?: string;
+    /** 占满宽度 */
+    widthFull?: boolean;
   };
 }
 
@@ -39,12 +43,13 @@ function SearchRender(props: {
       allowClear
       value={props.value}
       onChange={(e) => props.onChange(e.target.value)}
+      className="w-full"
     />
   );
 }
 
 function CRUDOfSimpleComponent(props: CRUDOfSimpleProps, ref: React.ForwardedRef<CRUDMethods>) {
-  const { simpleSearchProps, tableProps, ...rest } = props;
+  const { simpleSearchProps, tableProps, simpleOperateHoverShow, ...rest } = props;
 
   useTips(props);
   const [searchValue, setSearchValue] = useState<string>('');
@@ -61,15 +66,16 @@ function CRUDOfSimpleComponent(props: CRUDOfSimpleProps, ref: React.ForwardedRef
   const toolBarRender = useCallback(
     (...args) => {
       return [
-        <div key="search">
-          {simpleSearchProps && (
-            <SearchRender
-              placeholder={simpleSearchProps.placeholder}
-              value={searchValue}
-              onChange={(value) => setSearchValue(value)}
-            />
-          )}
-        </div>,
+        simpleSearchProps && (
+          <SearchRender
+            key="search-input"
+            placeholder={simpleSearchProps.placeholder}
+            value={searchValue}
+            onChange={(value) => setSearchValue(value)}
+          />
+        ),
+        // 留更多间隔，避免直接贴右边。
+        simpleSearchProps && <div key="search-gap" />,
         // @ts-ignore
         ...(tableProps.toolBarRender ? tableProps.toolBarRender(...args) : []),
       ];
@@ -89,7 +95,12 @@ function CRUDOfSimpleComponent(props: CRUDOfSimpleProps, ref: React.ForwardedRef
   }, [debouncedSearchValue, simpleSearchProps, tableProps.params]);
 
   return (
-    <div className="fec-crud-of-simple">
+    <div
+      className={classNames('fec-crud-of-simple', {
+        'fec-crud-of-simple-hover-show': simpleOperateHoverShow,
+        'fec-crud-of-simple-search-width-full': simpleSearchProps?.widthFull,
+      })}
+    >
       <CRUD
         ref={ref}
         {...rest}
@@ -104,6 +115,11 @@ function CRUDOfSimpleComponent(props: CRUDOfSimpleProps, ref: React.ForwardedRef
           // 简单的隐藏搜索栏
           search: false,
         }}
+        operateColumnProps={{
+          // hoverShow 情况下，默认 width 1
+          width: simpleOperateHoverShow ? 1 : undefined,
+          ...props.operateColumnProps,
+        }}
       />
     </div>
   );

package/src/crud/style.scss

@@ -13,4 +13,33 @@
   .ant-pro-table-list-toolbar {
     border-bottom: 1px solid #f0f0f0;
   }
+
+  &.fec-crud-of-simple-hover-show {
+    .ant-table-cell-fix-right {
+      position: absolute !important;
+      display: none;
+    }
+
+    .ant-table-row {
+      &:hover {
+        .ant-table-cell-fix-right {
+          display: block;
+        }
+      }
+    }
+  }
+
+  &.fec-crud-of-simple-search-width-full {
+    .ant-pro-table-list-toolbar-container {
+      justify-content: unset;
+
+      .ant-pro-table-list-toolbar-right {
+        justify-content: unset;
+
+        & > div {
+          flex: 1;
+        }
+      }
+    }
+  }
 }

package/src/crud/types.tsx

@@ -62,6 +62,10 @@ interface CRUDProps<DataSource = any, Key = string> {
   readProps?: {
     /** 文本 */
     operateText?: string;
+    /** ”查看”是否禁用 */
+    operateIsDisabled?: (record: DataSource) => boolean;
+    /** ”查看”是否隐藏 */
+    operateIsHidden?: (record: DataSource) => boolean;
     /** 打开方式, action 为 read_detail 有效 */
     target?: '_blank';
     /** 保存按钮文本 */
@@ -81,6 +85,8 @@ interface CRUDProps<DataSource = any, Key = string> {
     operateText?: string;
     /** ”编辑”是否禁用 */
     operateIsDisabled?: (record: DataSource) => boolean;
+    /** ”编辑”是否隐藏 */
+    operateIsHidden?: (record: DataSource) => boolean;
     /** 保存按钮文本 */
     submitText?: string;
     /** 重置按钮文本 */
@@ -99,6 +105,8 @@ interface CRUDProps<DataSource = any, Key = string> {
     operateText?: string;
     /** “删除”是否禁用 */
     operateIsDisabled?: (record: DataSource) => boolean;
+    /** ”删除”是否隐藏 */
+    operateIsHidden?: (record: DataSource) => boolean;
     /** 显示名称索引 */
     nameIndex: keyof DataSource;
     /** 删除确认描述 */

package/src/form/form.stories.tsx

@@ -1,11 +1,15 @@
 import { ProForm } from '@ant-design/pro-components';
 import {
   ProFormEditor,
+  ProFormImageUpload,
+  ProFormImageUploadDragger,
   ProFormJSON,
   ProFormJavascript,
   ProFormListNumber,
   ProFormListText,
   ProFormSwitchNumber,
+  ProFormUpload,
+  ProFormUploadDragger,
 } from '@fe-free/core';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
@@ -136,3 +140,97 @@ export const ProFormListNumberComponent: Story = {
     </ProFormBase>
   ),
 };
+
+function customRequest(option: any) {
+  const { file, onProgress, onSuccess } = option;
+
+  // 模拟上传进度
+  let percent = 0;
+  const interval = setInterval(() => {
+    percent += 10;
+    onProgress({ percent });
+
+    if (percent >= 100) {
+      clearInterval(interval);
+      // 模拟上传成功
+      onSuccess({
+        data: {
+          url: `https://picsum.photos/200/300?random=${Date.now()}`,
+          name: file.name,
+          uid: file.uid,
+        },
+      });
+    }
+  }, 100);
+
+  // 返回 abort 方法，用于取消上传
+  return {
+    abort: () => {
+      clearInterval(interval);
+      console.log('上传已取消');
+    },
+  };
+}
+
+export const ProFormUploadComponent: Story = {
+  render: () => (
+    <ProFormBase>
+      <ProFormUpload label="file" name="file" fieldProps={{ customRequest }} />
+      <ProFormUploadDragger
+        label="file_dragger"
+        name="file_dragger"
+        fieldProps={{ customRequest }}
+      />
+      <ProFormUploadDragger
+        label="files_dragger"
+        name="files_dragger"
+        fieldProps={{ multiple: true, maxCount: 2, customRequest }}
+      />
+      <ProFormUpload
+        label="files"
+        name="files"
+        fieldProps={{ multiple: true, maxCount: 2, showCount: true, customRequest }}
+      />
+      <ProFormUpload
+        label="files_picture"
+        name="files_picture"
+        fieldProps={{ multiple: true, maxCount: 2, listType: 'picture', customRequest }}
+      />
+      <ProFormUpload
+        label="files_picture_card"
+        name="files_picture_card"
+        fieldProps={{ multiple: true, maxCount: 2, listType: 'picture-card', customRequest }}
+      />
+    </ProFormBase>
+  ),
+};
+
+export const ProFormImageUploadComponent: Story = {
+  render: () => (
+    <ProFormBase>
+      <ProFormImageUpload
+        label="image"
+        name="image"
+        fieldProps={{
+          customRequest,
+        }}
+      />
+      <ProFormImageUploadDragger
+        label="image_dragger"
+        name="image_dragger"
+        fieldProps={{
+          customRequest,
+        }}
+      />
+      <ProFormImageUploadDragger
+        label="images_dragger"
+        name="images_dragger"
+        fieldProps={{
+          multiple: true,
+          maxCount: 2,
+          customRequest,
+        }}
+      />
+    </ProFormBase>
+  ),
+};

package/src/form/index.tsx

@@ -1,7 +1,6 @@
 export { ProFormListNumber, ProFormListText } from './form_list/form_list';
 export { ProFormListHelper } from './form_list/form_list_helper';
 export { ProFormListModalHelper } from './form_list/form_list_modal_helper';
-
 export { ProFormEditor } from './pro_form_editor';
 export { ProFormJavascript } from './pro_form_javascript';
 export { ProFormJSON } from './pro_form_json';
@@ -10,6 +9,12 @@ export {
   SwitchNumber,
   type SwitchNumberProps,
 } from './pro_form_switch_number';
+export {
+  ProFormImageUpload,
+  ProFormImageUploadDragger,
+  ProFormUpload,
+  ProFormUploadDragger,
+} from './pro_form_upload';
 
 import { pinyinMatch } from '@fe-free/tool';
 

package/src/form/pro_form_upload.tsx

@@ -0,0 +1,50 @@
+// 避免循环引用
+import { ProForm, type ProFormItemProps } from '@ant-design/pro-components';
+import type {
+  ImageUploadDraggerProps,
+  ImageUploadProps,
+  UploadDraggerProps,
+  UploadProps,
+} from '../upload';
+import { ImageUpload, ImageUploadDragger, Upload, UploadDragger } from '../upload';
+
+function ProFormUpload(props: ProFormItemProps<UploadProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <Upload {...fieldProps} />
+    </ProForm.Item>
+  );
+}
+
+function ProFormUploadDragger(props: ProFormItemProps<UploadDraggerProps>) {
+  const { fieldProps, ...rest } = props;
+  return (
+    <ProForm.Item {...rest}>
+      <UploadDragger {...fieldProps} />
+    </ProForm.Item>
+  );
+}
+
+function ProFormImageUpload(props: ProFormItemProps<ImageUploadProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <ImageUpload {...fieldProps} />
+    </ProForm.Item>
+  );
+}
+
+function ProFormImageUploadDragger(props: ProFormItemProps<ImageUploadDraggerProps>) {
+  const { fieldProps, ...rest } = props;
+
+  return (
+    <ProForm.Item {...rest}>
+      <ImageUploadDragger {...fieldProps} />
+    </ProForm.Item>
+  );
+}
+
+export { ProFormImageUpload, ProFormImageUploadDragger, ProFormUpload, ProFormUploadDragger };

package/src/index.ts

@@ -13,6 +13,8 @@ export { EditorMention } from './editor_mention';
 export type { EditorMentionProps } from './editor_mention';
 export {
   ProFormEditor,
+  ProFormImageUpload,
+  ProFormImageUploadDragger,
   ProFormJSON,
   ProFormJavascript,
   ProFormListHelper,
@@ -20,9 +22,12 @@ export {
   ProFormListNumber,
   ProFormListText,
   ProFormSwitchNumber,
+  ProFormUpload,
+  ProFormUploadDragger,
   proFormSelectSearchProps,
 } from './form';
 export { Markdown } from './markdown';
 export { Table } from './table';
 export type { TableProps } from './table';
+export { useLocalforageState } from './use_localforage_state';
 export { CustomValueTypeEnum, customValueTypeMap } from './value_type_map';

package/src/upload/index.tsx

@@ -0,0 +1,173 @@
+// 避免循环引用
+import { InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import type { UploadProps as AntdUploadProps, UploadFile } from 'antd';
+import { Upload as AntdUpload, Button, message } from 'antd';
+import classNames from 'classnames';
+import { useCallback, useMemo, useState } from 'react';
+
+interface UploadBaseProps {
+  value?: string[] | string;
+  onChange?: (value?: string[] | string) => void;
+  multiple?: boolean;
+  maxCount?: number;
+  action?: string;
+  customRequest?: AntdUploadProps['customRequest'];
+  listType?: AntdUploadProps['listType'];
+  accept?: string;
+}
+
+interface UploadProps extends UploadBaseProps {
+  showCount?: boolean;
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface UploadDraggerProps extends UploadBaseProps {}
+
+function useUpload(props: ImageUploadProps) {
+  const { value, onChange, multiple, maxCount } = props;
+  // 转换成 Upload 格式。
+  const defaultFileList = useMemo(() => {
+    if (!value) {
+      return [];
+    }
+
+    const arr = (multiple ? value : [value]) as string[];
+    return arr.map((url) => ({ uid: url, url, name: url?.split('/').pop() || '' })) as UploadFile[];
+  }, [multiple, value]);
+
+  // 存起来，已选的文件。以便做一些判断。
+  const [fileList, setFileList] = useState<UploadFile[]>(defaultFileList);
+
+  const handleChange = useCallback(
+    (info) => {
+      setFileList(info.fileList);
+
+      // 找到真正上传成功的。
+      const newValue = info.fileList
+        .map((item) => item.url || item.response?.data.url)
+        .filter(Boolean);
+
+      onChange?.(multiple ? newValue : newValue[0]);
+    },
+    [multiple, onChange],
+  );
+
+  // 选文件还是可能多选，如果多选，则提示。
+  const handleBeforeUpload = useCallback(
+    (f, fl) => {
+      // 多选 >1 情况下，超出的则提示。
+      if (multiple && maxCount && maxCount > 1) {
+        const index = fl.findIndex((item) => item.uid === f.uid);
+        if (index >= maxCount - fileList.length) {
+          message.warning(`最多只能上传 ${maxCount} 个文件，超出部分会忽略。`);
+        }
+      }
+
+      return true;
+    },
+    [fileList, multiple, maxCount],
+  );
+
+  // 多选情况下，超出则上传按钮 disabled
+  const isDisabled = useMemo(() => {
+    if (multiple && maxCount && maxCount > 1) {
+      return fileList.length >= maxCount;
+    }
+    return false;
+  }, [fileList.length, maxCount, multiple]);
+
+  return {
+    onChange: handleChange,
+    beforeUpload: handleBeforeUpload,
+    isDisabled,
+    fileList,
+  };
+}
+
+function Upload(props: ImageUploadProps) {
+  const { multiple, maxCount, showCount, action, customRequest, listType, accept } = props;
+  const { onChange, beforeUpload, isDisabled, fileList } = useUpload(props);
+
+  return (
+    <AntdUpload
+      action={action}
+      customRequest={customRequest}
+      onChange={onChange}
+      accept={accept}
+      listType={listType}
+      defaultFileList={fileList}
+      maxCount={multiple ? maxCount : 1}
+      multiple={multiple}
+      beforeUpload={beforeUpload}
+      // 不可，否则会没法删除
+      // disabled={isDisabled}
+    >
+      {listType === 'picture-card' ? (
+        <button style={{ border: 0, background: 'none' }} type="button" disabled={isDisabled}>
+          <PlusOutlined />
+          <div style={{ marginTop: 8 }}>本地上传</div>
+        </button>
+      ) : (
+        <Button icon={<UploadOutlined />} disabled={isDisabled}>
+          本地上传{showCount && multiple ? `（${fileList.length}/${maxCount}）` : ''}
+        </Button>
+      )}
+    </AntdUpload>
+  );
+}
+
+function UploadDragger(props: ImageUploadDraggerProps) {
+  const { multiple, maxCount, action, customRequest, listType, accept } = props;
+  const { onChange, beforeUpload, isDisabled, fileList } = useUpload(props);
+
+  return (
+    <AntdUpload.Dragger
+      action={action}
+      customRequest={customRequest}
+      onChange={onChange}
+      accept={accept}
+      listType={listType}
+      defaultFileList={fileList}
+      maxCount={multiple ? maxCount : 1}
+      multiple={multiple}
+      beforeUpload={beforeUpload}
+      // 不可，否则会没法删除
+      // disabled={isDisabled}
+    >
+      <div
+        className={classNames({
+          'cursor-not-allowed': isDisabled,
+        })}
+      >
+        <p className={classNames('ant-upload-drag-icon')}>
+          <InboxOutlined
+            className={classNames({
+              '!text-desc': isDisabled,
+            })}
+          />
+        </p>
+        <p
+          className={classNames('ant-upload-text', {
+            '!text-desc': isDisabled,
+          })}
+        >
+          点击或拖拽到此区域进行上传
+        </p>
+      </div>
+    </AntdUpload.Dragger>
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface ImageUploadProps extends UploadProps {}
+function ImageUpload(props: ImageUploadProps) {
+  return <Upload {...props} accept="image/*" listType="picture" />;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface ImageUploadDraggerProps extends UploadProps {}
+function ImageUploadDragger(props: ImageUploadDraggerProps) {
+  return <UploadDragger {...props} accept="image/*" listType="picture" />;
+}
+
+export { ImageUpload, ImageUploadDragger, Upload, UploadDragger };
+export type { ImageUploadDraggerProps, ImageUploadProps, UploadDraggerProps, UploadProps };

package/src/use_localforage_state.tsx

@@ -0,0 +1,30 @@
+import localforage from 'localforage';
+import { useEffect, useState } from 'react';
+
+const useLocalforageState = <T = any,>(
+  key: string,
+  options: {
+    defaultValue?: T;
+  },
+): [T | undefined, (value: T) => void, boolean] => {
+  const [ready, setReady] = useState(false);
+  const [value, setValue] = useState<T | undefined>(options.defaultValue);
+
+  useEffect(() => {
+    localforage.getItem(key).then((v) => {
+      if (v !== undefined) {
+        setValue(v as T);
+      }
+      setReady(true);
+    });
+  }, [key]);
+
+  const setValueAndSave = (v: T) => {
+    setValue(v);
+    localforage.setItem(key, v);
+  };
+
+  return [value, setValueAndSave, ready];
+};
+
+export { useLocalforageState };