@pisell/materials 1.8.41 → 1.8.42

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

@@ -3,21 +3,18 @@ nav:
   title: 组件
   order: 1
 group:
-  title: 基础组件
+  title: Layout
   order: 1
-title: GridView (PisellGridView)
+title: GridView
 order: 10
 category: pro
 ---
 
 # GridView - 网格视图容器组件
 
-GridView（对外导出为 **PisellGridView**）是 PisellGridPro 的视图区域组件，提供带滚动的内容展示区域，通常与 Header、ToolBar、Footer 等配合使用，也可单独使用。
+## 简介
 
-## 何时使用
-
-- 需要可滚动的主内容区，且与 PisellGridPro 一起构成标准页面布局
-- 单独需要一块「占满剩余高度并内部滚动」的容器时
+GridView 是 PisellGridPro 的视图区域组件，提供带滚动功能的内容展示区域，通常与 ToolBar、Header、Footer 等组件配合使用，构建完整的网格布局界面。
 
 ## 特性
 
@@ -29,33 +26,36 @@ GridView（对外导出为 **PisellGridView**）是 PisellGridPro 的视图区
 
 ## 基础用法
 
-从 `@pisell/materials` 引入 **PisellGridView** 使用，与 PisellGridPro、PisellToolBar 等组合构成完整页面布局。
-
 ```tsx
-import React from 'react';
-import { PisellGridView } from '@pisell/materials';
+import { GridView } from '@pisell/materials';
 
 export default () => (
-  <PisellGridView>
+  <GridView>
     <div>内容区域 1</div>
     <div>内容区域 2</div>
     <div>内容区域 3</div>
-  </PisellGridView>
+  </GridView>
 );
 ```
 
 ## 与 PisellGridPro 配合使用
 
 ```tsx
-import React from 'react';
-import { PisellGridPro, PisellToolBar, PisellGridView } from '@pisell/materials';
+import { PisellGridPro, GridView } from '@pisell/materials';
 
 export default () => (
   <PisellGridPro>
-    <PisellToolBar topLeft={<div>工具栏</div>} />
-    <PisellGridView>
+    {/* 头部工具栏 */}
+    <PisellGridPro.ToolBar>
+      <div>工具栏</div>
+    </PisellGridPro.ToolBar>
+
+    {/* 视图区域 */}
+    <GridView>
       <div>主要内容区域</div>
-    </PisellGridView>
+    </GridView>
+
+    {/* 底部区域 */}
     <PisellGridPro.Footer>
       <div>底部信息</div>
     </PisellGridPro.Footer>
@@ -65,24 +65,23 @@ export default () => (
 
 ## API
 
-### GridView (PisellGridView) Props
+### GridView Props
 
-| 参数      | 说明       | 类型              | 默认值 | 必填 |
+| 参数      | 说明       | 类型              | 默认值 | 版本 |
 | --------- | ---------- | ----------------- | ------ | ---- |
-| children  | 子元素内容 | `React.ReactNode` | -      | ✅   |
-| className | 自定义类名 | `string`          | -      | ❌   |
-| style     | 自定义样式 | `CSSProperties`   | -      | ❌   |
+| children  | 子元素内容 | `React.ReactNode` | -      | -    |
+| className | 自定义类名 | `string`          | -      | -    |
+| style     | 自定义样式 | `CSSProperties`   | -      | -    |
 
 ## 进阶用法
 
 ### 自定义样式
 
 ```tsx
-import React from 'react';
-import { PisellGridView } from '@pisell/materials';
+import { GridView } from '@pisell/materials';
 
 export default () => (
-  <PisellGridView
+  <GridView
     className="custom-grid-view"
     style={{
       backgroundColor: '#f5f5f5',
@@ -90,19 +89,18 @@ export default () => (
     }}
   >
     <div>自定义样式的内容区域</div>
-  </PisellGridView>
+  </GridView>
 );
 ```
 
 ### 嵌套布局
 
 ```tsx
-import React from 'react';
-import { PisellGridView } from '@pisell/materials';
+import { GridView } from '@pisell/materials';
 import { Row, Col } from 'antd';
 
 export default () => (
-  <PisellGridView>
+  <GridView>
     <Row gutter={16}>
       <Col span={8}>
         <div>列 1</div>
@@ -114,15 +112,14 @@ export default () => (
         <div>列 3</div>
       </Col>
     </Row>
-  </PisellGridView>
+  </GridView>
 );
 ```
 
 ### 包含数据卡片
 
 ```tsx
-import React from 'react';
-import { PisellGridView } from '@pisell/materials';
+import { GridView } from '@pisell/materials';
 import { Card } from 'antd';
 
 const dataList = [
@@ -132,35 +129,35 @@ const dataList = [
 ];
 
 export default () => (
-  <PisellGridView>
+  <GridView>
     {dataList.map((item) => (
       <Card key={item.id} title={item.title} style={{ marginBottom: 16 }}>
         {item.content}
       </Card>
     ))}
-  </PisellGridView>
+  </GridView>
 );
 ```
 
 ### 完整的 GridPro 布局示例
 
 ```tsx
-import React from 'react';
-import { PisellGridPro, PisellToolBar, PisellGridView } from '@pisell/materials';
+import { PisellGridPro, GridView } from '@pisell/materials';
 import { Button, Space } from 'antd';
 
 export default () => (
   <PisellGridPro style={{ height: '100vh' }}>
-    <PisellToolBar
-      topLeft={
-        <Space>
-          <Button type="primary">新建</Button>
-          <Button>刷新</Button>
-          <Button>导出</Button>
-        </Space>
-      }
-    />
-    <PisellGridView>
+    {/* 工具栏 */}
+    <PisellGridPro.ToolBar>
+      <Space>
+        <Button type="primary">新建</Button>
+        <Button>刷新</Button>
+        <Button>导出</Button>
+      </Space>
+    </PisellGridPro.ToolBar>
+
+    {/* 视图区域 - 自动滚动 */}
+    <GridView>
       {Array.from({ length: 20 }).map((_, index) => (
         <div
           key={index}
@@ -174,7 +171,9 @@ export default () => (
           内容项 {index + 1}
         </div>
       ))}
-    </PisellGridView>
+    </GridView>
+
+    {/* 底部 */}
     <PisellGridPro.Footer>
       <div style={{ textAlign: 'center' }}>共 20 条数据</div>
     </PisellGridPro.Footer>

package/lib/components/pisellGridPro/ToolBar/docs/ToolBar.$tab-dev.md

@@ -1,8 +1,9 @@
 ---
-title: 开发文档
+
+## title: 开发文档
+
 order: 3
 category: sub-component
----
 
 # ToolBar 开发文档
 
@@ -350,3 +351,4 @@ A: 根据 Figma 设计稿，左侧区域使用 8px 间距，右侧区域使用 1
   - 支持 tabs、topLeft、topRight、bottomLeft、bottomRight 六个插槽
   - 支持自定义 className 和 style
   - 基于 Figma 设计稿实现
+

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

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

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

@@ -37,7 +37,7 @@
     &-right {
       display: flex;
       flex-direction: row;
-      align-items: center;
+      justify-content: start;
       gap: 12px;
       flex-shrink: 0;
     }
@@ -45,19 +45,20 @@
 }
 
 /**
- * 手机版宽度：左侧区域与右侧区域换行，避免挤在一行
+ * 手机版宽度：左侧区域与右侧区域换行，避免挤在一行。
+ * 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 .toolbar-row-left {
+  .pisell-grid-pro-toolbar:not(.pisell-record-board-toolbar--grid) .toolbar-row-left {
     flex: 1 1 100%;
     min-width: 0;
   }
 
-  .pisell-grid-pro-toolbar .toolbar-row-right {
+  .pisell-grid-pro-toolbar:not(.pisell-record-board-toolbar--grid) .toolbar-row-right {
     flex: 1 1 100%;
     min-width: 0;
     justify-content: flex-start;