@fe-free/core 4.1.42 → 4.1.44

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @fe-free/core
 
+## 4.1.44
+
+### Patch Changes
+
+- feat: crud of list
+  - @fe-free/icons@4.1.44
+  - @fe-free/tool@4.1.44
+
+## 4.1.43
+
+### Patch Changes
+
+- fix: valueType
+  - @fe-free/icons@4.1.43
+  - @fe-free/tool@4.1.43
+
 ## 4.1.42
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "4.1.42",
+  "version": "4.1.44",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -52,8 +52,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/icons": "4.1.42",
-    "@fe-free/tool": "4.1.42"
+    "@fe-free/icons": "4.1.44",
+    "@fe-free/tool": "4.1.44"
   },
   "scripts": {
     "i18n-extract": "rm -rf ./src/locales/zh-CN && npx i18next-cli extract"

package/src/crud/helper.tsx

@@ -15,11 +15,17 @@ function OperateBtn({
 }) {
   if (disabled) {
     if (operateText) {
-      return <span className="cursor-not-allowed text-03">{operateText}</span>;
+      return (
+        <span className="fec-crud-of-list-operate-btn cursor-not-allowed text-03">
+          {operateText}
+        </span>
+      );
     } else {
       return (
         <Tooltip title={title}>
-          <span className="cursor-not-allowed text-lg text-03">{icon}</span>
+          <span className="fec-crud-of-list-operate-btn cursor-not-allowed text-lg text-03">
+            {icon}
+          </span>
         </Tooltip>
       );
     }
@@ -27,7 +33,7 @@ function OperateBtn({
 
   if (operateText) {
     return (
-      <span className="cursor-pointer text-primary" onClick={onClick}>
+      <span className="fec-crud-of-list-operate-btn cursor-pointer text-primary" onClick={onClick}>
         {operateText}
       </span>
     );
@@ -35,7 +41,10 @@ function OperateBtn({
 
   return (
     <Tooltip title={title}>
-      <span className="cursor-pointer text-lg text-primary" onClick={onClick}>
+      <span
+        className="fec-crud-of-list-operate-btn cursor-pointer text-lg text-primary"
+        onClick={onClick}
+      >
         {icon}
       </span>
     </Tooltip>

package/src/crud_of_list/crud_of_list.stories.tsx

@@ -54,6 +54,7 @@ export const Basic: Story = {
           ref={ref}
           actions={[]}
           tableProps={{
+            rowKey: 'id',
             columns,
             request: fakeRequest,
           }}
@@ -88,6 +89,42 @@ export const WithSearch: Story = {
       <CRUDOfList
         actions={['delete']}
         tableProps={{
+          rowKey: 'id',
+          columns,
+          request: fakeRequest,
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'name',
+        }}
+        detailForm={() => (
+          <>
+            <ProFormText name="name" label="名字" required rules={[{ required: true }]} />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+      />
+    );
+  },
+};
+
+export const WithToolbarSticky: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        search: true,
+        ellipsis: true,
+      },
+    ];
+
+    return (
+      <CRUDOfList
+        toolbarSticky
+        actions={['delete']}
+        tableProps={{
+          rowKey: 'id',
           columns,
           request: fakeRequest,
         }}
@@ -121,6 +158,7 @@ export const WithCreateDelete: Story = {
       <CRUDOfList
         actions={['create', 'delete']}
         tableProps={{
+          rowKey: 'id',
           columns,
           request: fakeRequest,
         }}
@@ -153,6 +191,7 @@ export const NoSearch: Story = {
       <CRUDOfList
         actions={['create', 'delete']}
         tableProps={{
+          rowKey: 'id',
           columns,
           request: fakeRequest,
         }}

package/src/crud_of_list/index.tsx

@@ -12,7 +12,7 @@ interface CRUDOfListProps<
   DataSource extends Record<string, any> = any,
   Key extends string | number = string,
 > extends CRUDProps<DataSource, Key> {
-  // nothing
+  toolbarSticky?: boolean;
 }
 
 function useTips(props) {
@@ -104,6 +104,7 @@ function CRUDOfList(props: CRUDOfListProps) {
         {
           // 先这样实现
           'fec-crud-of-list-no-toolbar': !searchDataIndex && !props.actions.includes('create'),
+          'fec-crud-of-list-toolbar-sticky': props.toolbarSticky,
         },
         props.className,
       )}

package/src/crud_of_list/style.scss

@@ -34,4 +34,31 @@
       padding-block: 0;
     }
   }
+
+  &.fec-crud-of-list-toolbar-sticky {
+    .ant-pro-table-list-toolbar {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      background-color: #fff;
+    }
+  }
+
+  .fec-crud-of-list-operate-btn {
+    font-size: 14px !important;
+    line-height: var(--ant-line-height) !important;
+  }
+
+  .ant-table-bordered {
+    .ant-table-container {
+      border-top: none !important;
+      border-left: none !important;
+
+      .ant-table-row {
+        .ant-table-cell {
+          border-inline-end: none !important;
+        }
+      }
+    }
+  }
 }

package/src/value_type_map/json_modal.tsx

@@ -43,7 +43,7 @@ function Render(text, props: ProFormItemProps<JSONModalProps>) {
             },
           }}
         >
-          <div className="h-[500px]">
+          <div>
             <EditorJSON value={jsonText} readonly />
           </div>
         </Modal>

package/src/value_type_map/markdown_modal.tsx

@@ -12,8 +12,8 @@ function Render(text) {
   return (
     <>
       <div onClick={() => setShow(true)} className="flex cursor-pointer items-center">
-        <div className="truncate">{text}</div>
-        <span className="text-primary">查看</span>
+        <div className="flex-1 truncate">{text}</div>
+        <span className="min-w-0 text-primary">查看</span>
       </div>
       {show && (
         <Modal
@@ -26,8 +26,9 @@ function Render(text) {
               display: 'none',
             },
           }}
+          width={900}
         >
-          <div className="h-[500px]">
+          <div>
             <Markdown content={text} />
           </div>
         </Modal>