@fe-free/core 6.0.5 → 6.0.6

package/CHANGELOG.md

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

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@fe-free/core",
-  "version": "6.0.5",
+  "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.5",
-    "@fe-free/icons": "6.0.5"
+    "@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/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;
+    }
   }
 }