@fe-free/core 6.0.4 → 6.0.6

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @fe-free/core
 
+## 6.0.6
+
+### Patch Changes
+
+- fix: mobile scrollbar
+  - @fe-free/icons@6.0.6
+  - @fe-free/tool@6.0.6
+
+## 6.0.5
+
+### Patch Changes
+
+- feat: crud ui
+  - @fe-free/icons@6.0.5
+  - @fe-free/tool@6.0.5
+
 ## 6.0.4
 
 ### Patch Changes

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@fe-free/core",
-  "version": "6.0.4",
+  "version": "6.0.6",
   "description": "",
-  "main": "./src/index.ts",
-  "author": "",
   "license": "ISC",
+  "author": "",
+  "main": "./src/index.ts",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@ant-design/x-markdown": "^2.1.3",
     "@ant-design/x": "^2.1.3",
+    "@ant-design/x-markdown": "^2.1.3",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.1",
@@ -52,8 +52,8 @@
     "i18next-icu": "^2.4.1",
     "react": "^19.2.0",
     "react-i18next": "^16.4.0",
-    "@fe-free/tool": "6.0.4",
-    "@fe-free/icons": "6.0.4"
+    "@fe-free/icons": "6.0.6",
+    "@fe-free/tool": "6.0.6"
   },
   "scripts": {
     "i18n-extract": "rm -rf ./src/locales/zh-CN && npx i18next-cli extract"

package/src/crud_of_pure/crud_of_pure.stories.tsx

@@ -262,6 +262,61 @@ export const SpecialToolbar: Story = {
   },
 };
 
+export const SpecialToolbarEmpty: Story = {
+  render: () => {
+    const columns = [
+      {
+        title: 'id',
+        dataIndex: 'id',
+        search: true,
+      },
+      {
+        title: '名字(省略)',
+        dataIndex: 'name',
+        search: true,
+        ellipsis: true,
+      },
+      {
+        title: 'city',
+        dataIndex: 'city',
+      },
+      {
+        title: 'area',
+        dataIndex: 'area',
+      },
+    ];
+
+    return (
+      <CRUDOfPure
+        specialToolbar="empty"
+        actions={['delete']}
+        tableProps={{
+          rowKey: 'id',
+          columns,
+          request: fakeRequest,
+          pagination: false,
+        }}
+        requestDeleteByRecord={fakeDeleteByRecord}
+        deleteProps={{
+          nameIndex: 'id',
+        }}
+        detailForm={() => (
+          <>
+            <ProFormText
+              name="name"
+              label="名字"
+              required
+              rules={[{ required: true }]}
+              extra="extra extra extra extra"
+            />
+          </>
+        )}
+        requestCreateByValues={fakeCreate}
+      />
+    );
+  },
+};
+
 export const SpecialToolbarWithToolBarRender: Story = {
   render: () => {
     const columns = [

package/src/crud_of_pure/index.tsx

@@ -10,11 +10,20 @@ interface CRUDOfPureProps<
   DataSource extends Record<string, any> = any,
   Key extends string | number = string,
 > extends CRUDProps<DataSource, Key> {
-  /** 特殊位置的 toolbar，向上 margin，是的 search 和 toolbar 一起。仅适用于 search 很少的情况。 */
-  specialToolbar?: boolean;
+  /**
+   * 特殊位置的 toolbar，margin 为 -48px，使得 search 和 toolbar 一起。
+   * empty 表示toolbar 为空的情况，margin 为 -16px。
+   * */
+  specialToolbar?: boolean | 'empty';
 }
 
-function useSpecialToolbar({ specialToolbar, id }: { specialToolbar?: boolean; id: string }) {
+function useSpecialToolbar({
+  specialToolbar,
+  id,
+}: {
+  specialToolbar?: boolean | 'empty';
+  id: string;
+}) {
   useEffect(() => {
     if (!specialToolbar) return;
 
@@ -107,6 +116,7 @@ function CRUDOfPure<
         {
           'fec-crud-of-pure-no-search': noSearch,
           'fec-crud-of-pure-special-toolbar': props.specialToolbar,
+          'fec-crud-of-pure-special-toolbar-empty': props.specialToolbar === 'empty',
         },
         props.className,
       )}

package/src/crud_of_pure/style.scss

@@ -77,5 +77,11 @@
         pointer-events: auto;
       }
     }
+
+    &.fec-crud-of-pure-special-toolbar-empty {
+      .ant-pro-card:not(.ant-pro-table-search) {
+        margin-top: -16px;
+      }
+    }
   }
 }

package/src/page_layout/index.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { Fragment, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
+
 import type { TabsProps } from '../tabs';
 import { Tabs } from '../tabs';
 
@@ -53,7 +54,7 @@ function PageLayout({
           className={classNames(
             {
               'flex-none': !equalParts,
-              'min-w-0 flex-1 flex-shrink-0 overflow-auto': equalParts,
+              'min-w-0 flex-1 shrink-0 overflow-auto': equalParts,
             },
             startClassName,
           )}
@@ -66,7 +67,7 @@ function PageLayout({
         className={classNames(
           'flex-1 overflow-auto',
           {
-            'min-w-0 flex-shrink-0': equalParts,
+            'min-w-0 shrink-0': equalParts,
           },
           childrenClassName,
         )}
@@ -79,7 +80,7 @@ function PageLayout({
           className={classNames(
             {
               'flex-none': !equalParts,
-              'min-w-0 flex-1 flex-shrink-0 overflow-auto': equalParts,
+              'min-w-0 flex-1 shrink-0 overflow-auto': equalParts,
             },
             endClassName,
           )}

package/src/page_layout/page_layout.stories.tsx

@@ -11,39 +11,86 @@ export default meta;
 type Story = StoryObj<typeof PageLayout>;
 
 export const Default: Story = {
-  args: {
-    start: <div className="h-[100px] w-[100px] bg-red-500">start</div>,
-    children: <div className="h-[100px] bg-blue-500">children</div>,
-    end: <div className="h-[100px] w-[100px] bg-green-500">end</div>,
+  render: () => {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="h-[200px] w-[500px]">
+          <PageLayout
+            start={<div className="h-full w-[100px] bg-red-500">start</div>}
+            end={<div className="h-full w-[100px] bg-green-500">end</div>}
+          >
+            <div className="h-full bg-blue-500">children</div>
+          </PageLayout>
+        </div>
+
+        <div className="h-[200px] w-[500px]">
+          <PageLayout
+            start={<div className="h-full w-[100px] bg-red-500">start</div>}
+            end={<div className="h-full w-[100px] bg-green-500">end</div>}
+          >
+            <div className="h-full w-[2000px] bg-blue-500">children</div>
+          </PageLayout>
+        </div>
+      </div>
+    );
   },
 };
 
 export const DirectionVertical: Story = {
-  args: {
-    direction: 'vertical',
-    start: <div className="h-[100px] bg-red-500">start</div>,
-    children: <div className="h-[100px] bg-blue-500">children</div>,
-    end: <div className="h-[100px] bg-green-500">end</div>,
+  render: () => {
+    return (
+      <div className="flex gap-4">
+        <div className="h-[500px] w-[200px]">
+          <PageLayout
+            direction="vertical"
+            start={<div className="h-[100px] w-full bg-red-500">start</div>}
+            end={<div className="h-[100px] w-full bg-green-500">end</div>}
+          >
+            <div className="h-full bg-blue-500">children</div>
+          </PageLayout>
+        </div>
+
+        <div className="h-[500px] w-[200px]">
+          <PageLayout
+            direction="vertical"
+            start={<div className="h-[100px] w-full bg-red-500">start</div>}
+            end={<div className="h-[100px] w-full bg-green-500">end</div>}
+          >
+            <div className="h-[2000px] w-full bg-blue-500">children</div>
+          </PageLayout>
+        </div>
+      </div>
+    );
   },
 };
 
 export const EqualParts: Story = {
-  args: {
-    className: '!w-[800px] !h-[200px] bg-gray-200',
-    equalParts: true,
-    // start: <div className="h-[100px] bg-red-500">start</div>,
-    children: <div className="h-[100px] bg-blue-500">children</div>,
-    end: <div className="h-[100px] w-[600px] bg-green-500">end</div>,
+  render: () => {
+    return (
+      <div className="h-[200px] w-[500px]">
+        <PageLayout equalParts={true} className="bg-gray-200">
+          <div className="h-full bg-blue-500">children</div>
+          <div className="h-full w-[600px] bg-green-500">end</div>
+        </PageLayout>
+      </div>
+    );
   },
 };
-export const ClassName: Story = {
-  args: {
-    className: '!w-[500px] !h-[500px]',
-    startClassName: 'p-4 bg-red-200',
-    childrenClassName: 'p-4 bg-blue-200',
-    endClassName: 'p-4 bg-green-200',
-    start: <div className="h-full w-[100px] bg-red-500">start</div>,
-    children: <div className="h-full bg-blue-500">children</div>,
-    end: <div className="h-full w-[100px] bg-green-500">end</div>,
+
+export const ClassNamePadding: Story = {
+  render: () => {
+    return (
+      <div className="h-[200px] w-[500px]">
+        <PageLayout
+          startClassName="p-4 bg-red-200"
+          childrenClassName="p-4 bg-blue-200"
+          endClassName="p-4 bg-green-200"
+          start={<div className="h-full w-[100px] bg-red-500">start</div>}
+          end={<div className="h-full w-[100px] bg-green-500">end</div>}
+        >
+          <div className="h-full bg-blue-500">children</div>
+        </PageLayout>
+      </div>
+    );
   },
 };

package/src/tailwind.css

@@ -38,17 +38,20 @@
     -webkit-font-smoothing: antialiased;
   }
 
-  ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
+  /* 仅 PC 端显示自定义滚动条 */
+  @media (width >= 768px) {
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
 
-  ::-webkit-scrollbar-thumb {
-    background: #ccc;
-    border-radius: 2px;
-  }
+    ::-webkit-scrollbar-thumb {
+      background: #ccc;
+      border-radius: 2px;
+    }
 
-  ::-webkit-scrollbar-track {
-    background: transparent;
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
   }
 }