@pisell/materials 1.0.1048 → 1.0.1050

package/es/components/pisellFilter/index.js

@@ -1,8 +1,8 @@
 import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js";
 import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js";
 import FilterButton_default from "../filter/components/FilterButton/index.js";
-import { Form } from "antd";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Form } from "antd";
 
 //#region src/components/pisellFilter/index.tsx
 const _excluded = [

package/es/components/pisellFind/index.js

@@ -1,6 +1,6 @@
+import { getText } from "../../locales/index.js";
 import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js";
 import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js";
-import { getText } from "../../locales/index.js";
 import { PisellLookup } from "../pisellLookup/PisellLookup.js";
 import React, { forwardRef } from "react";
 import { locales } from "@pisell/utils";

package/es/components/pisellFloatingPanel/index.js

@@ -1,7 +1,7 @@
 import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js";
 import iconfont_default from "../iconfont/index.js";
-import classNames from "classnames";
 import React, { useEffect, useMemo, useState } from "react";
+import classNames from "classnames";
 import { useUpdateEffect } from "ahooks";
 import "./index.less";
 

package/es/components/pisellGoodPassCard/index.js

@@ -1,11 +1,11 @@
+import { getText } from "../../locales/index.js";
 import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js";
 import pisellCard_default from "../pisellCard/index.js";
-import pisellModal_default from "../pisellModal/index.js";
-import { getText } from "../../locales/index.js";
 import useEngineContext_default from "../../hooks/useEngineContext.js";
+import pisellModal_default from "../pisellModal/index.js";
 import pisellText_default from "../pisellText/index.js";
-import { Checkbox, Divider, Typography } from "antd";
 import React, { useState } from "react";
+import { Checkbox, Divider, Typography } from "antd";
 import "./index.less";
 
 //#region src/components/pisellGoodPassCard/index.tsx

package/es/components/pisellGridPro/GridPro.js

@@ -1,5 +1,5 @@
-import classNames from "classnames";
 import React from "react";
+import classNames from "classnames";
 import "./index.less";
 
 //#region src/components/pisellGridPro/GridPro.tsx

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

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

package/es/components/pisellGridPro/GridView/index.js

@@ -1,6 +1,6 @@
 import PisellScrollView_default from "../../PisellScrollView/index.js";
-import classNames from "classnames";
 import React from "react";
+import classNames from "classnames";
 import "./index.less";
 
 //#region src/components/pisellGridPro/GridView/index.tsx

package/es/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/es/components/pisellGridPro/ToolBar/index.js

@@ -1,5 +1,5 @@
-import classNames from "classnames";
 import React from "react";
+import classNames from "classnames";
 import "./index.less";
 
 //#region src/components/pisellGridPro/ToolBar/index.tsx

package/es/components/pisellGridPro/components/DataCard/components/StatCard/index.js

@@ -1,6 +1,6 @@
-import classNames from "classnames";
 import React from "react";
 import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
+import classNames from "classnames";
 import "./index.less";
 
 //#region src/components/pisellGridPro/components/DataCard/components/StatCard/index.tsx

package/es/components/pisellGridPro/components/DataCard/index.js

@@ -1,8 +1,8 @@
 import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js";
 import { _objectWithoutProperties } from "../../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js";
 import StatCard_default from "./components/StatCard/index.js";
-import classNames from "classnames";
 import React from "react";
+import classNames from "classnames";
 import "./index.less";
 
 //#region src/components/pisellGridPro/components/DataCard/index.tsx

package/es/components/pisellGridPro/components/Footer/index.js

@@ -1,5 +1,5 @@
-import classNames from "classnames";
 import React from "react";
+import classNames from "classnames";
 import "./index.less";
 
 //#region src/components/pisellGridPro/components/Footer/index.tsx

package/es/components/pisellGridPro/components/Header/index.js

@@ -1,5 +1,5 @@
-import classNames from "classnames";
 import React from "react";
+import classNames from "classnames";
 import "./index.less";
 
 //#region src/components/pisellGridPro/components/Header/index.tsx