@fe-free/core 3.0.38 → 3.0.39

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.38",
+  "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.38",
-    "@fe-free/icons": "3.0.38"
+    "@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 { App, Tooltip } from 'antd';
+import { App } from 'antd';
 import { useCallback } from 'react';
+import { OperateBtn } from './helper';
 
 interface Params {
   name: string;
@@ -40,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/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}