@pisell/materials 1.8.38 → 1.8.41

package/lib/components/pisellGridPro/ToolBar/docs/ToolBar.md

@@ -3,18 +3,21 @@ nav:
   title: 组件
   order: 1
 group:
-  title: Layout
-  order: 3
-title: ToolBar
+  title: 基础组件
+  order: 1
+title: ToolBar (PisellToolBar)
 order: 5
-category: sub-component
+category: pro
 ---
 
 # ToolBar - 工具栏组件
 
-## 简介
+ToolBar（对外导出为 **PisellToolBar**）是 PisellGridPro 的工具栏子组件，支持标签页行与上下两行共多个插槽，用于放置筛选、排序、操作按钮等。
+
+## 何时使用
 
-ToolBar 是 PisellGridPro 的子组件，用于提供灵活的工具栏布局能力。它支持多行布局，可以在不同位置放置各种操作按钮、筛选器、标签页等内容。
+- 与 PisellGridPro 搭配，需要工具栏区域（标签页、搜索、筛选、操作按钮等）
+- 需要固定结构的工具栏布局（tabs / topLeft / topRight / bottomLeft / bottomRight）
 
 ## 特性
 
@@ -26,57 +29,56 @@ ToolBar 是 PisellGridPro 的子组件，用于提供灵活的工具栏布局能
 
 ## 基础用法
 
+从 `@pisell/materials` 引入 **PisellToolBar** 使用，与 PisellGridPro、PisellGridView 等组合构成完整页面布局。
+
 ```tsx
-import { PisellToolBar as ToolBar } from '@pisell/materials';
+import React from 'react';
+import { PisellToolBar } from '@pisell/materials';
 import { Button } from 'antd';
 
-const Demo = () => {
-  return (
-    <ToolBar
-      topLeft={
-        <>
-          <Button type="primary">新建</Button>
-          <Button>导入</Button>
-        </>
-      }
-      topRight={
-        <>
-          <Button>导出</Button>
-          <Button>设置</Button>
-        </>
-      }
-    />
-  );
-};
-
-export default Demo;
+export default () => (
+  <PisellToolBar
+    topLeft={
+      <>
+        <Button type="primary">新建</Button>
+        <Button>导入</Button>
+      </>
+    }
+    topRight={
+      <>
+        <Button>导出</Button>
+        <Button>设置</Button>
+      </>
+    }
+  />
+);
 ```
 
 ## API
 
-### ToolBar Props
+### ToolBar (PisellToolBar) Props
 
-| 参数        | 说明             | 类型            | 默认值 | 版本 |
+| 参数        | 说明             | 类型            | 默认值 | 必填 |
 | ----------- | ---------------- | --------------- | ------ | ---- |
-| className   | 自定义类名       | `string`        | -      | -    |
-| style       | 自定义样式       | `CSSProperties` | -      | -    |
-| tabs        | 标签页区域内容   | `ReactNode`     | -      | -    |
-| topLeft     | 上方左侧区域内容 | `ReactNode`     | -      | -    |
-| topRight    | 上方右侧区域内容 | `ReactNode`     | -      | -    |
-| bottomLeft  | 下方左侧区域内容 | `ReactNode`     | -      | -    |
-| bottomRight | 下方右侧区域内容 | `ReactNode`     | -      | -    |
+| className   | 自定义类名       | `string`        | -      | ❌   |
+| style       | 自定义样式       | `CSSProperties` | -      | ❌   |
+| tabs        | 标签页区域内容   | `ReactNode`     | -      | ❌   |
+| topLeft     | 上方左侧区域内容 | `ReactNode`     | -      | ❌   |
+| topRight    | 上方右侧区域内容 | `ReactNode`     | -      | ❌   |
+| bottomLeft  | 下方左侧区域内容 | `ReactNode`     | -      | ❌   |
+| bottomRight | 下方右侧区域内容 | `ReactNode`     | -      | ❌   |
 
 ## 进阶用法
 
 ### 带标签页的工具栏
 
 ```tsx
-import { PisellToolBar as ToolBar } from '@pisell/materials';
+import React from 'react';
+import { PisellToolBar } from '@pisell/materials';
 import { Button, Tabs } from 'antd';
 
-const Demo = () => {
-  return (
-    <ToolBar
+export default () => (
+  <PisellToolBar
       tabs={
         <Tabs
           items={[
@@ -92,28 +94,25 @@ const Demo = () => {
           <Button>批量操作</Button>
         </>
       }
-      topRight={
-        <>
-          <Button>刷新</Button>
-          <Button>设置</Button>
-        </>
-      }
-    />
-  );
-};
-
-export default Demo;
+    topRight={
+      <>
+        <Button>刷新</Button>
+        <Button>设置</Button>
+      </>
+    }
+  />
+);
 ```
 
 ### 多行复杂布局
 
 ```tsx
-import { PisellToolBar as ToolBar } from '@pisell/materials';
+import React from 'react';
+import { PisellToolBar } from '@pisell/materials';
 import { Button, Input, Select, Space } from 'antd';
 
-const Demo = () => {
-  return (
-    <ToolBar
+export default () => (
+  <PisellToolBar
       topLeft={
         <Space>
           <Button type="primary">新建</Button>
@@ -149,66 +148,53 @@ const Demo = () => {
           />
         </Space>
       }
-      bottomRight={
-        <Space>
-          <Button>高级筛选</Button>
-          <Button>重置</Button>
-        </Space>
-      }
-    />
-  );
-};
-
-export default Demo;
+    bottomRight={
+      <Space>
+        <Button>高级筛选</Button>
+        <Button>重置</Button>
+      </Space>
+    }
+  />
+);
 ```
 
 ### 仅使用部分插槽
 
 ```tsx
-import { PisellToolBar as ToolBar } from '@pisell/materials';
+import React from 'react';
+import { PisellToolBar } from '@pisell/materials';
 import { Button, Space } from 'antd';
 
-const Demo = () => {
-  return (
-    <ToolBar
-      topLeft={
-        <Space>
-          <Button type="primary">新建</Button>
-          <Button>编辑</Button>
-        </Space>
-      }
-    />
-  );
-};
-
-export default Demo;
+export default () => (
+  <PisellToolBar
+    topLeft={
+      <Space>
+        <Button type="primary">新建</Button>
+        <Button>编辑</Button>
+      </Space>
+    }
+  />
+);
 ```
 
 ### 自定义样式
 
 ```tsx
-import { PisellToolBar as ToolBar } from '@pisell/materials';
+import React from 'react';
+import { PisellToolBar } from '@pisell/materials';
 import { Button } from 'antd';
 
-const Demo = () => {
-  return (
-    <ToolBar
+export default () => (
+  <PisellToolBar
       className="custom-toolbar"
       style={{
         background: '#f5f5f5',
         padding: '16px',
         borderRadius: '8px',
       }}
-      topLeft={
-        <>
-          <Button type="primary">操作按钮</Button>
-        </>
-      }
-    />
-  );
-};
-
-export default Demo;
+    topLeft={<Button type="primary">操作按钮</Button>}
+  />
+);
 ```
 
 ## 布局说明

package/lib/components/pisellGridPro/ToolBar/index.less

@@ -37,7 +37,7 @@
     &-right {
       display: flex;
       flex-direction: row;
-      justify-content: start;
+      align-items: center;
       gap: 12px;
       flex-shrink: 0;
     }
@@ -45,20 +45,19 @@
 }
 
 /**
- * 手机版宽度：左侧区域与右侧区域换行，避免挤在一行。
- * RecordBoard（`.pisell-record-board-toolbar--grid`）顶栏单行布局见 `recordBoardToolbar.less`，此处排除。
+ * 手机版宽度：左侧区域与右侧区域换行，避免挤在一行
  */
 @media (max-width: 768px) {
   .pisell-grid-pro-toolbar .toolbar-row {
     flex-wrap: wrap;
   }
 
-  .pisell-grid-pro-toolbar:not(.pisell-record-board-toolbar--grid) .toolbar-row-left {
+  .pisell-grid-pro-toolbar .toolbar-row-left {
     flex: 1 1 100%;
     min-width: 0;
   }
 
-  .pisell-grid-pro-toolbar:not(.pisell-record-board-toolbar--grid) .toolbar-row-right {
+  .pisell-grid-pro-toolbar .toolbar-row-right {
     flex: 1 1 100%;
     min-width: 0;
     justify-content: flex-start;