@fe-free/core 3.0.37 → 3.0.39

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @fe-free/core
 
+## 3.0.39
+
+### Patch Changes
+
+- feat: crud
+  - @fe-free/icons@3.0.39
+  - @fe-free/tool@3.0.39
+
+## 3.0.38
+
+### Patch Changes
+
+- feat: some
+  - @fe-free/icons@3.0.38
+  - @fe-free/tool@3.0.38
+
 ## 3.0.37
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.37",
+  "version": "3.0.39",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -46,8 +46,8 @@
     "antd": "^5.27.1",
     "dayjs": "~1.11.10",
     "react": "^19.2.0",
-    "@fe-free/tool": "3.0.37",
-    "@fe-free/icons": "3.0.37"
+    "@fe-free/icons": "3.0.39",
+    "@fe-free/tool": "3.0.39"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/src/crud/crud_delete.tsx

@@ -1,6 +1,7 @@
 import { DeleteOutlined } from '@fe-free/icons';
-import { Modal, Tooltip } from 'antd';
+import { App } from 'antd';
 import { useCallback } from 'react';
+import { OperateBtn } from './helper';
 
 interface Params {
   name: string;
@@ -12,10 +13,11 @@ interface Params {
 
 function useDelete(params: Params) {
   const { name, desc, onDelete } = params;
+  const { modal } = App.useApp();
 
   const doDelete = useCallback(async () => {
     await new Promise((resolve) => {
-      Modal.confirm({
+      modal.confirm({
         title: `确认删除 “${name}” 吗？`,
         content: desc || '删除后不可恢复，请谨慎操作',
         okText: '确定',
@@ -28,7 +30,7 @@ function useDelete(params: Params) {
         },
       });
     });
-  }, [name, desc, onDelete]);
+  }, [modal, name, desc, onDelete]);
 
   return {
     doDelete,
@@ -39,22 +41,14 @@ function OperateDelete(props: Params) {
   const { name, desc, onDelete, operateText, disabled } = props;
   const { doDelete } = useDelete({ name, desc, onDelete, operateText });
 
-  if (disabled) {
-    return (
-      <Tooltip title="删除">
-        <span className="cursor-not-allowed text-lg text-03">
-          {operateText || <DeleteOutlined />}
-        </span>
-      </Tooltip>
-    );
-  }
-
   return (
-    <Tooltip title="删除">
-      <a className="text-lg" onClick={doDelete}>
-        {operateText || <DeleteOutlined />}
-      </a>
-    </Tooltip>
+    <OperateBtn
+      title="删除"
+      icon={<DeleteOutlined />}
+      operateText={operateText}
+      disabled={disabled}
+      onClick={doDelete}
+    />
   );
 }
 

package/src/crud/crud_detail.tsx

@@ -1,5 +1,5 @@
 import { DrawerForm, ProForm } from '@ant-design/pro-components';
-import { message, Spin } from 'antd';
+import { App, Spin } from 'antd';
 import classNames from 'classnames';
 import { isString } from 'lodash-es';
 import { useCallback, useMemo, useState } from 'react';
@@ -54,6 +54,7 @@ function CRUDDetail(props: CRUDDetailProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [loading, setLoading] = useState(id ? true : false);
   const [form] = ProForm.useForm(detailFormInstance);
+  const { message } = App.useApp();
 
   const handleFinish = useCallback(
     async (values) => {

package/src/crud/helper.tsx

@@ -0,0 +1,45 @@
+import { Tooltip } from 'antd';
+
+function OperateBtn({
+  title,
+  icon,
+  operateText,
+  disabled,
+  onClick,
+}: {
+  title: string;
+  icon: React.ReactNode;
+  operateText?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+}) {
+  if (disabled) {
+    if (operateText) {
+      return <span className="cursor-not-allowed text-lg text-03">{operateText || icon}</span>;
+    } else {
+      return (
+        <Tooltip title={title}>
+          <span className="cursor-not-allowed text-lg text-03">{icon}</span>
+        </Tooltip>
+      );
+    }
+  }
+
+  if (operateText) {
+    return (
+      <span className="cursor-pointer text-lg text-primary" onClick={onClick}>
+        {operateText}
+      </span>
+    );
+  }
+
+  return (
+    <Tooltip title={title}>
+      <span className="cursor-pointer text-lg text-primary" onClick={onClick}>
+        {operateText || icon}
+      </span>
+    </Tooltip>
+  );
+}
+
+export { OperateBtn };

package/src/crud/use_operate.tsx

@@ -1,10 +1,11 @@
 import { EditOutlined, EyeOutlined } from '@fe-free/icons';
-import { message, Tooltip } from 'antd';
+import { App } from 'antd';
 import { isString } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
-import { Link } from 'react-router-dom';
+import { routeTool } from '../route';
 import { OperateDelete } from './crud_delete';
 import { CRUDDetail } from './crud_detail';
+import { OperateBtn } from './helper';
 import type { TableProps } from './table';
 
 function useOperate(props, detailProps, actionRef) {
@@ -18,6 +19,7 @@ function useOperate(props, detailProps, actionRef) {
     detailIdIndex,
     requestDeleteByRecord,
   } = props;
+  const { message } = App.useApp();
 
   const idField = tableProps.rowKey || 'id';
 
@@ -56,13 +58,15 @@ function useOperate(props, detailProps, actionRef) {
 
       if (!hidden) {
         const disabled = readProps?.operateIsDisabled?.(record) || false;
+
         if (disabled) {
           return (
-            <Tooltip title={readProps?.operateText || '查看'}>
-              <span key="read" className="cursor-not-allowed text-lg text-03">
-                {readProps?.operateText || <EyeOutlined />}
-              </span>
-            </Tooltip>
+            <OperateBtn
+              title="查看"
+              icon={<EyeOutlined />}
+              operateText={readProps?.operateText}
+              disabled
+            />
           );
         } else {
           return (
@@ -72,9 +76,11 @@ function useOperate(props, detailProps, actionRef) {
               record={record}
               onSuccess={handleReload}
               trigger={
-                <Tooltip title={readProps?.operateText || '查看'}>
-                  <a className="text-lg">{readProps?.operateText || <EyeOutlined />}</a>
-                </Tooltip>
+                <OperateBtn
+                  title="查看"
+                  icon={<EyeOutlined />}
+                  operateText={readProps?.operateText}
+                />
               }
               action="read"
               {...detailProps}
@@ -94,24 +100,31 @@ function useOperate(props, detailProps, actionRef) {
         const disabled = readProps?.operateIsDisabled?.(record) || false;
         if (disabled) {
           return (
-            <Tooltip title={readProps?.operateText || '查看'}>
-              <span key="read" className="cursor-not-allowed text-lg text-03">
-                {readProps?.operateText || <EyeOutlined />}
-              </span>
-            </Tooltip>
+            <OperateBtn
+              title="查看"
+              icon={<EyeOutlined />}
+              operateText={readProps?.operateText}
+              disabled
+            />
           );
         } else {
           return (
-            <Tooltip title={readProps?.operateText || '查看'}>
-              <Link
-                key="read_detail"
-                to={`./detail/${record[detailIdIndex || 'id']}`}
-                target={readProps?.target}
-                className="text-lg"
-              >
-                {readProps?.operateText || <EyeOutlined />}
-              </Link>
-            </Tooltip>
+            <OperateBtn
+              title="查看"
+              icon={<EyeOutlined />}
+              operateText={readProps?.operateText}
+              onClick={() => {
+                if (readProps?.target === '_blank') {
+                  const url = `${window.location.pathname}/detail/${record[detailIdIndex || 'id']}`;
+                  window.open(url, readProps?.target);
+                } else {
+                  routeTool.navigateTo({
+                    path: './detail/:id',
+                    params: { id: record[detailIdIndex || 'id'] },
+                  });
+                }
+              }}
+            />
           );
         }
       }
@@ -128,11 +141,12 @@ function useOperate(props, detailProps, actionRef) {
 
         if (disabled) {
           return (
-            <Tooltip title={updateProps?.operateText || '编辑'}>
-              <span key="update" className="cursor-not-allowed text-lg text-03">
-                {updateProps?.operateText || <EditOutlined />}
-              </span>
-            </Tooltip>
+            <OperateBtn
+              title="编辑"
+              icon={<EditOutlined />}
+              operateText={updateProps?.operateText}
+              disabled
+            />
           );
         } else {
           return (
@@ -142,9 +156,11 @@ function useOperate(props, detailProps, actionRef) {
               record={record}
               onSuccess={handleReload}
               trigger={
-                <Tooltip title={updateProps?.operateText || '编辑'}>
-                  <a className="text-lg">{updateProps?.operateText || <EditOutlined />}</a>
-                </Tooltip>
+                <OperateBtn
+                  title="编辑"
+                  icon={<EditOutlined />}
+                  operateText={updateProps?.operateText}
+                />
               }
               action="update"
               {...detailProps}

package/src/crud/use_row_selection.tsx

@@ -1,5 +1,5 @@
 import type { ActionType } from '@ant-design/pro-components';
-import { Modal } from 'antd';
+import { App } from 'antd';
 import type { MutableRefObject } from 'react';
 import { useCallback, useMemo } from 'react';
 import { LoadingButton } from '../button';
@@ -14,6 +14,8 @@ function useRowSelection<DataSource, Key>({
   batchActions?: CRUDProps<DataSource, Key>['batchActions'];
   actionRef?: MutableRefObject<ActionType | undefined>;
 }) {
+  const { modal } = App.useApp();
+
   const rowSelection = useMemo(
     () => ({
       ...originRowSelection,
@@ -48,7 +50,7 @@ function useRowSelection<DataSource, Key>({
               onClick={async (event) => {
                 if (action.danger) {
                   await new Promise((resolve) => {
-                    Modal.confirm({
+                    modal.confirm({
                       title: `确定要执行 ${action.btnText} 吗？`,
                       onOk: () => {
                         resolve(
@@ -79,7 +81,7 @@ function useRowSelection<DataSource, Key>({
         </div>
       );
     },
-    [actionRef, batchActions],
+    [actionRef, batchActions, modal],
   );
 
   if (!batchActions || batchActions.length === 0) {

package/src/global/error.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { message } from 'antd';
 import type { AxiosRequestConfig, AxiosResponse } from 'axios';
 import { AxiosError } from 'axios';

package/src/upload/index.tsx

@@ -1,6 +1,6 @@
 import { DeleteOutlined, InboxOutlined, PlusOutlined, UploadOutlined } from '@fe-free/icons';
 import type { UploadProps as AntdUploadProps, UploadFile } from 'antd';
-import { Upload as AntdUpload, Avatar, Button, message } from 'antd';
+import { Upload as AntdUpload, App, Avatar, Button } from 'antd';
 import type { UploadChangeParam } from 'antd/es/upload';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
@@ -26,6 +26,7 @@ interface UploadProps extends UploadBaseProps {
 function useUpload(
   props: ImageUploadProps & { onChangeOriginal?: (info: UploadChangeParam<UploadFile>) => void },
 ) {
+  const { message } = App.useApp();
   const { value, onChange, multiple, maxCount, onChangeOriginal } = props;
   // 转换成 Upload 格式。
   const defaultFileList = useMemo(() => {