@fe-free/core 3.0.8 → 3.0.10

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @fe-free/core
 
+## 3.0.10
+
+### Patch Changes
+
+- feat: ui
+  - @fe-free/tool@3.0.10
+
+## 3.0.9
+
+### Patch Changes
+
+- fix: crud
+  - @fe-free/tool@3.0.9
+
 ## 3.0.8
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "3.0.8",
+  "version": "3.0.10",
   "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.8"
+    "@fe-free/tool": "3.0.10"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/crud/crud.stories.tsx

@@ -1,6 +1,8 @@
 import type { ProColumns } from '@ant-design/pro-components';
 import { ProForm, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
+import type { CRUDRef } from '@fe-free/core';
 import { CRUD, proFormSelectSearchProps } from '@fe-free/core';
+
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from 'antd';
 import { useRef } from 'react';
@@ -286,7 +288,7 @@ export const FormRef: Story = {
 
 // 通过 ref 获取 actionRef
 const ActionRefComponent = () => {
-  const ref = useRef<any>();
+  const ref = useRef<CRUDRef | null>(null);
 
   const columns = [
     {
@@ -303,7 +305,7 @@ const ActionRefComponent = () => {
 
   return (
     <>
-      <Button onClick={() => ref.current.getActionRef().current?.reload()}>reload</Button>
+      <Button onClick={() => ref.current?.getActionRef()?.current?.reload()}>reload</Button>
       <CRUD
         ref={ref}
         actions={[]}

package/src/crud/crud.tsx

@@ -3,21 +3,20 @@ 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 { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import type { TableProps } from '../table';
 import { getTableScroll, Table } from '../table';
 import { OperateDelete } from './crud_delete';
 import { CRUDDetail } from './crud_detail';
 import './style.scss';
-import type { CRUDMethods, CRUDProps } from './types';
+import type { CRUDProps } from './types';
 import { useRowSelection } from './use_row_selection';
 import { useTips } from './use_tips';
 
-function CRUDComponent<
-  DataSource extends Record<string, any> = any,
-  Key extends string | number = string,
->(props: CRUDProps<DataSource, Key>, ref: React.ForwardedRef<CRUDMethods>) {
+function CRUD<DataSource extends Record<string, any> = any, Key extends string | number = string>(
+  props: CRUDProps<DataSource, Key>,
+) {
   const {
     actions,
     tableProps,
@@ -39,6 +38,7 @@ function CRUDComponent<
     batchActions: originBatchActions,
     fullPage,
     className,
+    ref,
   } = props;
 
   useTips(props);
@@ -210,7 +210,7 @@ function CRUDComponent<
         }
 
         return (
-          <div className="fec-crud-operate-column flex gap-2">
+          <div className="fec-crud-operate-column flex justify-center gap-2">
             {operateColumnProps?.moreOperator && operateColumnProps.moreOperator(record)}
             {btns}
             {operateColumnProps?.moreOperatorAfter && operateColumnProps.moreOperatorAfter(record)}
@@ -330,11 +330,4 @@ function CRUDComponent<
   );
 }
 
-const CRUD = forwardRef(CRUDComponent) as <
-  DataSource extends Record<string, any> = any,
-  Key extends string | number = string,
->(
-  props: CRUDProps<DataSource, Key> & { ref?: React.ForwardedRef<CRUDMethods> },
-) => JSX.Element;
-
 export { CRUD };

package/src/crud/index.tsx

@@ -2,4 +2,4 @@ export { CRUD } from './crud';
 export { OperateDelete, useDelete } from './crud_delete';
 export { CRUDDetail } from './crud_detail';
 export type { CRUDDetailProps } from './crud_detail';
-export type { CRUDMethods, CRUDProps } from './types';
+export type { CRUDProps, CRUDRef } from './types';

package/src/crud/types.tsx

@@ -1,5 +1,5 @@
 import type { ActionType, ProFormInstance } from '@ant-design/pro-components';
-import type { ReactNode } from 'react';
+import type { MouseEvent, ReactNode, Ref, RefObject } from 'react';
 import type { TableProps } from '../table';
 
 /**
@@ -12,7 +12,13 @@ import type { TableProps } from '../table';
  */
 type CRUDAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete' | 'batch_delete';
 
+interface CRUDRef {
+  getActionRef: () => RefObject<ActionType | undefined>;
+}
+
 interface CRUDProps<DataSource = any, Key = string> {
+  ref?: Ref<CRUDRef>;
+
   /** 操作类型 */
   actions: CRUDAction[];
 
@@ -131,7 +137,7 @@ interface CRUDProps<DataSource = any, Key = string> {
     danger?: boolean;
     /** 批量操作接口 */
     onClick: (
-      event: React.MouseEvent<HTMLElement>,
+      event: MouseEvent<HTMLElement>,
       options: { selectedRowKeys: Key[]; selectedRows: DataSource[] },
     ) => Promise<void>;
   }[];
@@ -140,8 +146,4 @@ interface CRUDProps<DataSource = any, Key = string> {
   className?: string;
 }
 
-interface CRUDMethods {
-  getActionRef: () => React.MutableRefObject<ActionType | undefined>;
-}
-
-export type { CRUDMethods, CRUDProps };
+export type { CRUDProps, CRUDRef };

package/src/crud_of_list/crud_of_list.stories.tsx

@@ -1,6 +1,8 @@
 import { ProFormText } from '@ant-design/pro-components';
+import type { CRUDRef } from '@fe-free/core';
 import { CRUDOfList } from '@fe-free/core';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useRef } from 'react';
 import { fakeCreate, fakeDeleteByRecord, fakeRequest } from '../crud/demo/data';
 
 const meta: Meta<typeof CRUDOfList> = {
@@ -35,6 +37,7 @@ type Story = StoryObj<typeof CRUDOfList>;
 
 export const Basic: Story = {
   render: () => {
+    const ref = useRef<CRUDRef>(null);
     const columns = [
       {
         title: '名字(省略)',
@@ -45,23 +48,27 @@ export const Basic: Story = {
     ];
 
     return (
-      <CRUDOfList
-        actions={[]}
-        tableProps={{
-          columns,
-          request: fakeRequest,
-        }}
-        requestDeleteByRecord={fakeDeleteByRecord}
-        deleteProps={{
-          nameIndex: 'name',
-        }}
-        detailForm={() => (
-          <>
-            <ProFormText name="name" label="名字" required rules={[{ required: true }]} />
-          </>
-        )}
-        requestCreateByValues={fakeCreate}
-      />
+      <div>
+        <button onClick={() => ref.current?.getActionRef()?.current?.reload()}>reload</button>
+        <CRUDOfList
+          ref={ref}
+          actions={[]}
+          tableProps={{
+            columns,
+            request: fakeRequest,
+          }}
+          requestDeleteByRecord={fakeDeleteByRecord}
+          deleteProps={{
+            nameIndex: 'name',
+          }}
+          detailForm={() => (
+            <>
+              <ProFormText name="name" label="名字" required rules={[{ required: true }]} />
+            </>
+          )}
+          requestCreateByValues={fakeCreate}
+        />
+      </div>
     );
   },
 };

package/src/crud_of_list/index.tsx

@@ -1,8 +1,8 @@
 import { useDebounce } from 'ahooks';
 import { Input } from 'antd';
 import classNames from 'classnames';
-import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
-import type { CRUDMethods, CRUDProps } from '../crud';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { CRUDProps } from '../crud';
 import { CRUD } from '../crud';
 import './style.scss';
 
@@ -42,7 +42,7 @@ function SearchRender(props: {
   );
 }
 
-function CRUDOfListComponent(props: CRUDOfListProps, ref: React.ForwardedRef<CRUDMethods>) {
+function CRUDOfList(props: CRUDOfListProps) {
   useTips(props);
 
   const { tableProps, ...rest } = props;
@@ -85,7 +85,6 @@ function CRUDOfListComponent(props: CRUDOfListProps, ref: React.ForwardedRef<CRU
 
   return (
     <CRUD
-      ref={ref}
       {...rest}
       className={classNames(
         'fec-crud-of-list',
@@ -115,12 +114,5 @@ function CRUDOfListComponent(props: CRUDOfListProps, ref: React.ForwardedRef<CRU
   );
 }
 
-const CRUDOfList = forwardRef(CRUDOfListComponent) as <
-  DataSource extends Record<string, any> = any,
-  Key extends string | number = string,
->(
-  props: CRUDOfListProps<DataSource, Key> & { ref?: React.ForwardedRef<CRUDMethods> },
-) => JSX.Element;
-
 export { CRUDOfList };
 export type { CRUDOfListProps };

package/src/crud_of_pure/crud_of_pure.stories.tsx

@@ -340,8 +340,7 @@ export const FullPage: Story = {
       <div className="h-[800px] border border-red-500">
         <CRUDOfPure
           fullPage
-          specialSearch
-          // specialToolbar
+          specialToolbar
           actions={['create', 'delete']}
           tableProps={{
             columns,

package/src/crud_of_pure/index.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import { forwardRef, useMemo } from 'react';
-import type { CRUDMethods, CRUDProps } from '../crud';
+import { useMemo } from 'react';
+import type { CRUDProps } from '../crud';
 import { CRUD } from '../crud';
 import './style.scss';
 
@@ -9,12 +9,11 @@ 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;
 }
 
-function CRUDOfPureComponent(props: CRUDOfPureProps, ref: React.ForwardedRef<CRUDMethods>) {
+function CRUDOfPure(props: CRUDOfPureProps) {
   const newColumns = props.tableProps.columns?.map((column) => {
     if (column.search) {
       return {
@@ -41,13 +40,11 @@ function CRUDOfPureComponent(props: CRUDOfPureProps, ref: React.ForwardedRef<CRU
 
   return (
     <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,
@@ -69,12 +66,5 @@ function CRUDOfPureComponent(props: CRUDOfPureProps, ref: React.ForwardedRef<CRU
   );
 }
 
-const CRUDOfPure = forwardRef(CRUDOfPureComponent) as <
-  DataSource extends Record<string, any> = any,
-  Key extends string | number = string,
->(
-  props: CRUDOfPureProps<DataSource, Key> & { ref?: React.ForwardedRef<CRUDMethods> },
-) => JSX.Element;
-
 export { CRUDOfPure };
 export type { CRUDOfPureProps };

package/src/crud_of_pure/style.scss

@@ -49,22 +49,17 @@
     }
   }
 
-  &.fec-crud-of-pure-special-search {
+  &.fec-crud-of-pure-special-toolbar {
     .ant-pro-table-search {
-      position: absolute;
-      z-index: 1;
-      background: transparent;
-      width: auto;
+      z-index: 10;
     }
 
-    .ant-pro-table-list-toolbar-container {
-      padding-block-start: 16px;
+    .ant-pro-card:not(.ant-pro-table-search) {
+      margin-top: -48px;
     }
-  }
 
-  &.fec-crud-of-pure-special-toolbar {
     .ant-pro-table-list-toolbar {
-      margin-top: -48px;
+      z-index: 10;
       pointer-events: none;
 
       .ant-pro-table-list-toolbar-right > div {

package/src/file/file.stories.tsx

@@ -16,11 +16,13 @@ export const Default: Story = {
     let size = 0;
     return (
       <div>
-        <div className="flex flex-col gap-2">
+        <div className="flex w-[200px] flex-col gap-2 border border-01">
           {PRESET_FILE_ICONS.map((item) => (
-            <div key={item.key} className="flex gap-2">
-              <FileCard name={`这是文件名.${item.ext.join('.') || ''}`} size={(size += 1000000)} />
-            </div>
+            <FileCard
+              key={item.key}
+              name={`这是文件名.${item.ext.join('.') || ''}`}
+              size={(size += 1000000)}
+            />
           ))}
         </div>
       </div>

package/src/file/index.tsx

@@ -1,3 +1,4 @@
+import { Typography } from 'antd';
 import classNames from 'classnames';
 import { useMemo } from 'react';
 import {
@@ -54,9 +55,13 @@ function FileCard({
         'flex-col': direction === 'vertical',
       })}
     >
-      <FileIcon name={name} className="text-4xl" />
-      <div className={classNames('flex flex-col', { 'items-center': direction === 'vertical' })}>
-        {name && <div className="truncate">{name}</div>}
+      <FileIcon name={name} className="text-3xl" />
+      <div
+        className={classNames('flex flex-1 flex-col overflow-hidden', {
+          'items-center': direction === 'vertical',
+        })}
+      >
+        {name && <Typography.Text ellipsis={{ tooltip: name }}>{name}</Typography.Text>}
         {size && <div className="text-sm text-03">{getFileSize(size)}</div>}
       </div>
     </div>

package/src/index.ts

@@ -7,7 +7,7 @@ export { Copy } from './copy';
 export type { CopyProps } from './copy';
 export { CoreApp } from './core_app';
 export { CRUD, CRUDDetail, OperateDelete, useDelete } from './crud';
-export type { CRUDDetailProps, CRUDMethods, CRUDProps } from './crud';
+export type { CRUDDetailProps, CRUDProps, CRUDRef } from './crud';
 export { CRUDOfList } from './crud_of_list';
 export type { CRUDOfListProps } from './crud_of_list';
 export { CRUDOfPure } from './crud_of_pure';

package/src/style.scss

@@ -13,8 +13,19 @@
 /* stylelint-disable-next-line at-rule-no-unknown */
 @tailwind utilities;
 
-// fix
-// ant-pro-card-border 有个 transition 导致颜色会变化，所以就写死个。
-.ant-pro-card-border {
-  border: 1px solid #e2e7f0;
+// 隐藏 label 的冒号
+.ant-form-item .ant-form-item-label > label::after {
+  visibility: hidden;
+}
+
+.ant-modal-footer {
+  .ant-btn {
+    padding: 0 40px;
+  }
+}
+
+.ant-modal-confirm-btns {
+  .ant-btn {
+    padding: 0 40px;
+  }
 }

package/src/tree/file_tree.stories.tsx

@@ -22,7 +22,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     title: '某某公司',
-    titleDescription: '某某公司的描述',
+    // titleDescription: '某某公司的描述',
     enableSearch: true,
     actions: ['create', 'update', 'delete'],
     requestCreateByValues: (values) => {

package/src/tree/file_tree.tsx

@@ -79,6 +79,8 @@ function Detail<D extends DataNode>({
         destroyOnHidden: true,
         width: 400,
       }}
+      layout="horizontal"
+      labelCol={{ span: 6 }}
     >
       <ProFormText name="key" hidden />
       <ProFormText name="title" label="目录名称" required rules={[{ required: true }]} />
@@ -139,6 +141,7 @@ function More({
         ) : (
           <OperateDelete
             name={nodeData.title}
+            operateText="删除"
             onDelete={() => requestDeleteByRecord?.({ key: nodeData.key })}
           />
         ),

package/src/tree/tree.tsx

@@ -187,9 +187,9 @@ function Tree<T extends DataNode>(props: TreeProps<T>) {
         (enableSearch || title) && (
           <div className="flex flex-col gap-2 py-2">
             {(title || titleExtra) && (
-              <div className="flex gap-2 px-2">
+              <div className="flex gap-2 p-2">
                 <div className="flex-1">
-                  <div className="truncate">{title}</div>
+                  <div className="truncate text-base">{title}</div>
                   {titleDescription && <div className="text-03">{titleDescription}</div>}
                 </div>
                 {titleExtra}