@fe-free/core 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @fe-free/core
+
+## 1.0.1
+
+### Patch Changes
+
+- feat: first commit
+- Updated dependencies
+  - @fe-free/tool@1.0.1

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@fe-free/core",
+  "version": "1.0.1",
+  "description": "",
+  "main": "./src/index.ts",
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^5.2.6",
+    "@ant-design/plots": "^2.2.5",
+    "@codemirror/language": "^6.10.3",
+    "@codemirror/view": "^6.33.0",
+    "@lezer/highlight": "^1.2.1",
+    "@uiw/codemirror-themes": "^4.23.2",
+    "@uiw/react-codemirror": "^4.23.2",
+    "ace-builds": "^1.33.1",
+    "ahooks": "^3.7.8",
+    "axios": "^1.6.5",
+    "classnames": "^2.5.1",
+    "dayjs": "~1.11.10",
+    "lodash-es": "^4.17.21",
+    "react-ace": "^11.0.1",
+    "react-markdown": "^9.0.1",
+    "react-router-dom": "^6.16.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "vanilla-jsoneditor": "^0.23.1",
+    "zustand": "^4.5.4",
+    "@fe-free/tool": "1.0.1"
+  },
+  "peerDependencies": {
+    "@ant-design/pro-components": "^2.7.15",
+    "antd": "^5.20.0",
+    "react": "^18.2.0"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/button/index.md

@@ -0,0 +1,46 @@
+---
+group: 'core'
+toc: content
+---
+
+# Button
+
+## LoadingButton
+
+```tsx
+import { LoadingButton } from '@fe-free/core';
+
+export default () => {
+  return (
+    <div>
+      <LoadingButton
+        onClick={() => {
+          return;
+        }}
+      >
+        点击
+      </LoadingButton>
+
+      <LoadingButton
+        onClick={() =>
+          new Promise((resolve) => {
+            setTimeout(resolve, 1000);
+          })
+        }
+      >
+        点击 1000ms resolve
+      </LoadingButton>
+
+      <LoadingButton
+        onClick={() =>
+          new Promise((_, reject) => {
+            setTimeout(reject, 1000);
+          })
+        }
+      >
+        点击 1000ms reject
+      </LoadingButton>
+    </div>
+  );
+};
+```

package/src/button/index.tsx

@@ -0,0 +1,22 @@
+import type { ButtonProps } from 'antd';
+import { Button } from 'antd';
+import { useCallback, useState } from 'react';
+
+function LoadingButton({ onClick, ...rest }: ButtonProps) {
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = useCallback(
+    (event) => {
+      setLoading(true);
+
+      Promise.resolve(onClick && onClick(event)).finally(() => {
+        setLoading(false);
+      });
+    },
+    [onClick]
+  );
+
+  return <Button loading={loading} {...rest} onClick={handleClick} />;
+}
+
+export { LoadingButton };

package/src/crud/crud.tsx

@@ -0,0 +1,258 @@
+import type { ProFormInstance, ActionType } from '@ant-design/pro-components';
+import { Space, Button } from 'antd';
+import type { ReactNode } from 'react';
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import type { TableProps } from '../table';
+import { Table } from '../table';
+import { OperateDelete } from './crud_delete';
+import { CRUDDetail } from './crud_detail';
+import './style.scss';
+
+/**
+ * create 创建
+ * read 查看
+ * read_detail 详情页查看
+ * update 编辑
+ * delete 删除
+ */
+type CrudAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
+
+interface CRUDProps {
+  actions: CrudAction[];
+
+  /** 新建按钮，默认新建 */
+  createButton?: ReactNode;
+
+  /** 表格相关 */
+  tableProps: TableProps;
+  operateColumnProps?: {
+    width?: number;
+    /** 扩展操作区域 */
+    moreOperator?: (record) => ReactNode;
+  };
+  readProps?: {
+    /** 文本 */
+    operateText?: string;
+  };
+
+  /** 删除接口 */
+  deleteByRecord?: (record) => Promise<any>;
+  /** 删除相关 */
+  deleteProps?: {
+    /** 显示名称索引 */
+    nameIndex: string;
+    /** 删除确认描述 */
+    desc?: string;
+    /** 文本 */
+    operateText?: string;
+  };
+
+  /** 弹窗表单 */
+  detailForm?: (formProps: { readonly: boolean }, info: { action: CrudAction }) => ReactNode;
+  /** detailForm 的 formRef */
+  detailFormInstance?: ProFormInstance;
+
+  /** 新增接口 */
+  requestCreate?: (values) => Promise<any>;
+  createProps?: {
+    /** 成功文案 */
+    successText?: string | (() => string);
+  };
+
+  /** 更新接口 */
+  requestUpdateById?: (values) => Promise<any>;
+  updateProps?: {
+    /** 文本 */
+    operateText?: string;
+    /** 成功文案 */
+    successText?: string | (() => string);
+  };
+
+  /** 获取详情接口 */
+  requestGetByRecord?: (record) => Promise<any>;
+
+  /** 跳转到详情的索引 ，默认 id */
+  detailIdIndex?: string;
+}
+
+interface CRUDMethods {
+  getActionRef: () => React.MutableRefObject<ActionType | undefined>;
+}
+
+const CRUD = forwardRef<CRUDMethods, CRUDProps>(function CRUD(props, ref) {
+  const {
+    actions,
+    tableProps,
+    createButton,
+    operateColumnProps,
+    readProps,
+    deleteByRecord,
+    deleteProps,
+    detailIdIndex,
+    detailForm,
+    requestGetByRecord,
+    createProps,
+    requestCreate,
+    updateProps,
+    requestUpdateById,
+    detailFormInstance,
+  } = props;
+
+  const actionRef = useRef<ActionType>();
+  const location = useLocation();
+
+  useImperativeHandle(
+    ref,
+    () => {
+      return {
+        getActionRef: () => actionRef,
+      };
+    },
+    [actionRef]
+  );
+
+  const detailProps = useMemo(
+    () => ({
+      detailForm,
+      requestGetByRecord,
+      requestCreate,
+      requestUpdateById,
+      detailFormInstance,
+      createProps,
+      updateProps,
+    }),
+    [
+      detailForm,
+      requestGetByRecord,
+      requestCreate,
+      requestUpdateById,
+      detailFormInstance,
+      createProps,
+      updateProps,
+    ]
+  );
+
+  const getHandleDelete = useCallback(
+    (record) => {
+      return () => {
+        if (deleteByRecord) {
+          return deleteByRecord(record).then(() => {
+            actionRef.current?.reload();
+          });
+        }
+
+        throw new Error('没有传 deleteByRecord');
+      };
+    },
+    [deleteByRecord]
+  );
+
+  const handleReload = useCallback(() => {
+    actionRef.current?.reload();
+  }, []);
+
+  const newColumns = useMemo(() => {
+    const operateColumn = {
+      title: '操作',
+      fixed: 'right',
+      width: operateColumnProps?.width || 120,
+      render: function (_, record) {
+        return (
+          <Space>
+            {operateColumnProps?.moreOperator && operateColumnProps.moreOperator(record)}
+            {actions.includes('read') && (
+              <CRUDDetail
+                id={record.id}
+                record={record}
+                onSuccess={handleReload}
+                trigger={<a>{readProps?.operateText || '查看'}</a>}
+                action="read"
+                {...detailProps}
+              />
+            )}
+            {actions.includes('read_detail') && (
+              <Link to={`${location.pathname}/detail/${record[detailIdIndex || 'id']}`}>
+                {readProps?.operateText || '查看'}
+              </Link>
+            )}
+            {actions.includes('update') && (
+              <CRUDDetail
+                id={record.id}
+                record={record}
+                onSuccess={handleReload}
+                trigger={<a>{updateProps?.operateText || '编辑'}</a>}
+                action="update"
+                {...detailProps}
+              />
+            )}
+            {actions.includes('delete') && deleteProps && (
+              <OperateDelete
+                name={record[deleteProps.nameIndex]}
+                desc={deleteProps.desc}
+                operateText={deleteProps.operateText}
+                onDelete={getHandleDelete(record)}
+              />
+            )}
+          </Space>
+        );
+      },
+    };
+
+    if (
+      actions.includes('read') ||
+      actions.includes('read_detail') ||
+      actions.includes('update') ||
+      actions.includes('delete')
+    ) {
+      return [
+        ...(tableProps.columns || tableProps.columns || []),
+        operateColumn,
+      ] as TableProps['columns'];
+    }
+
+    return tableProps.columns as TableProps['columns'];
+  }, [
+    actions,
+    readProps?.operateText,
+    deleteProps,
+    detailIdIndex,
+    detailProps,
+    getHandleDelete,
+    handleReload,
+    tableProps.columns,
+    location.pathname,
+    operateColumnProps,
+    updateProps?.operateText,
+  ]);
+
+  const toolBarRender = useCallback(
+    (...args) => [
+      ...(tableProps.toolBarRender ? tableProps.toolBarRender(...args) : []),
+      actions.includes('create') && (
+        <CRUDDetail
+          onSuccess={handleReload}
+          trigger={createButton || <Button type="primary">新建</Button>}
+          action="create"
+          {...detailProps}
+        />
+      ),
+    ],
+    [actions, createButton, detailProps, handleReload, tableProps]
+  );
+
+  return (
+    <div className="crud-table">
+      <Table
+        rowKey="id"
+        {...tableProps}
+        actionRef={actionRef}
+        toolBarRender={toolBarRender}
+        columns={newColumns}
+      />
+    </div>
+  );
+});
+
+export { CRUD };
+export type { CRUDProps, CRUDMethods };

package/src/crud/crud_delete.tsx

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+import { Modal } from 'antd';
+
+interface Params {
+  name: string;
+  desc?: string;
+  operateText?: string;
+  onDelete: () => Promise<any>;
+}
+function useDelete(params: Params) {
+  const { name, desc, onDelete } = params;
+
+  const doDelete = useCallback(() => {
+    Modal.confirm({
+      title: `确认删除 “${name}” 吗？`,
+      content: desc || '删除后不可恢复，请谨慎操作',
+      okText: '确定',
+      cancelText: '取消',
+      onOk: () => {
+        onDelete();
+      },
+    });
+  }, [name, desc, onDelete]);
+
+  return {
+    doDelete,
+  };
+}
+
+function OperateDelete(props: Params) {
+  const { name, desc, onDelete, operateText } = props;
+  const handleClick = useCallback(() => {
+    Modal.confirm({
+      title: `确认删除 “${name}” 吗？`,
+      content: desc || '删除后不可恢复，请谨慎操作',
+      okText: '确定',
+      cancelText: '取消',
+      onOk: () => {
+        onDelete();
+      },
+    });
+  }, [name, desc, onDelete]);
+
+  return (
+    <a style={{ color: 'red' }} onClick={handleClick}>
+      {operateText || '删除'}
+    </a>
+  );
+}
+
+export { useDelete, OperateDelete };

package/src/crud/crud_detail.tsx

@@ -0,0 +1,193 @@
+import { message, Spin } from 'antd';
+import { DrawerForm, ProForm } from '@ant-design/pro-components';
+import { useCallback, useMemo, useState } from 'react';
+import type { CRUDProps } from './crud';
+import { isString } from 'lodash-es';
+import classNames from 'classnames';
+
+/**
+ * create 创建
+ * read 查看
+ * read_detail 详情页查看
+ * update 编辑
+ * delete 删除
+ */
+type action = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
+
+// 先不管类型
+interface CRUDDetailProps
+  extends Pick<
+    CRUDProps,
+    | 'requestGetByRecord'
+    | 'createProps'
+    | 'requestCreate'
+    | 'updateProps'
+    | 'requestUpdateById'
+    | 'detailForm'
+    | 'detailFormInstance'
+  > {
+  action: action;
+  id?: string;
+  record?: any;
+  trigger: any;
+  /** 添加 or 修改 成功 */
+  onSuccess?: () => void;
+}
+
+function CRUDDetail(props: CRUDDetailProps) {
+  const {
+    action,
+    id,
+    record,
+    trigger,
+    onSuccess,
+    detailForm,
+    requestGetByRecord,
+    createProps,
+    requestCreate,
+    updateProps,
+    requestUpdateById,
+    detailFormInstance,
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [loading, setLoading] = useState(id ? true : false);
+  const [form] = ProForm.useForm(detailFormInstance);
+
+  const handleFinish = useCallback(
+    async (values) => {
+      try {
+        let result;
+        if (action === 'create' && requestCreate) {
+          result = await requestCreate(values);
+
+          let content = '新建成功';
+          if (createProps?.successText) {
+            content = isString(createProps.successText)
+              ? createProps.successText
+              : createProps.successText();
+          }
+
+          message.open({
+            type: 'success',
+            content,
+          });
+        }
+        if (action === 'update' && requestUpdateById) {
+          result = await requestUpdateById({
+            ...values,
+            id,
+          });
+
+          let content = '更新成功';
+          if (updateProps?.successText) {
+            content = isString(updateProps.successText)
+              ? updateProps.successText
+              : updateProps.successText();
+          }
+
+          message.open({
+            type: 'success',
+            content,
+          });
+        }
+
+        // 刷新
+        onSuccess?.();
+
+        // false 则取消默认行为
+        if (result !== false) {
+          // 关闭弹窗
+          return true;
+        }
+      } catch (e) {
+        // 由于 onFinish 吃掉了 error，所以这里自行抛出
+        setTimeout(() => {
+          throw e;
+        }, 10);
+      }
+    },
+    [action, requestCreate, requestUpdateById, onSuccess, createProps, id, updateProps]
+  );
+
+  const handleOpenChange = useCallback(
+    async (open) => {
+      if (!open) {
+        // 关闭重置
+        form?.resetFields();
+        setIsOpen(open);
+        return;
+      }
+
+      setIsOpen(open);
+
+      if (id) {
+        setLoading(true);
+
+        let res;
+        if (requestGetByRecord) {
+          res = await requestGetByRecord(record);
+        }
+
+        form?.setFieldsValue(res.data.data);
+
+        setLoading(false);
+      }
+
+      return;
+    },
+    [form, id, requestGetByRecord, record]
+  );
+
+  const children = useMemo(() => {
+    if (!detailForm) {
+      return null;
+    }
+
+    // 关闭的时候不需要 children
+    if (!isOpen) {
+      return null;
+    }
+
+    if (loading) {
+      return (
+        <div className="pt-[100px] flex justify-center">
+          <Spin />
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={classNames('crud-detail', `crud-detail-action-${action}`, {
+          'crud-detail-hide-extra': action === 'read',
+        })}
+      >
+        {detailForm({ readonly: action === 'read' && !!id }, { action })}
+      </div>
+    );
+  }, [isOpen, loading, detailForm, action, id]);
+
+  const drawerProps = useMemo(() => {
+    return {
+      destroyOnClose: true,
+    };
+  }, []);
+
+  return (
+    <DrawerForm
+      form={form}
+      trigger={trigger}
+      autoFocusFirstInput
+      onFinish={handleFinish}
+      onOpenChange={handleOpenChange}
+      layout="vertical"
+      readonly={action === 'read' && !!id}
+      // 关闭销毁，否则会有很奇怪的 onFinish 闭包问题，怀疑 pro components bug
+      drawerProps={drawerProps}
+    >
+      {children}
+    </DrawerForm>
+  );
+}
+
+export { CRUDDetail };