docs: improve docs

Barrior · Dec 2, 2024 · 8c83e3f · 8c83e3f
1 parent ad4aa88
commit 8c83e3f
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 42 deletions.
diff --git a/examples/search-table-react/001-intro.md b/examples/search-table-react/001-intro.md
@@ -167,11 +167,6 @@ const Demo = () => {
     ]
   }
 
-  const tabBarExtraContent = {
-    left: <Button style={{ marginRight: 16 }}>自定义左侧内容</Button>,
-    right: <Button>自定义右侧内容</Button>,
-  }
-
   return (
     <ConfigProvider locale={zhCN}>
       <SearchTable
@@ -187,8 +182,13 @@ const Demo = () => {
             activeKey,
             items,
             onChange: setActiveKey,
-            tabBarExtraContent,
           },
+          leftExtraContent: ({ loading }) => (
+            <Button disabled={loading}>自定义左侧内容</Button>
+          ),
+          rightExtraContent: ({ loading }) => (
+            <Button disabled={loading}>自定义右侧内容</Button>
+          ),
         }}
         titleTop={() => <div style={titleSectionStyle}>Title Top 内容自定义</div>}
         titleBottom={() => <div style={titleSectionStyle}>Title Bottom 内容自定义</div>}

diff --git a/examples/search-table-react/050-tabs.md b/examples/search-table-react/050-tabs.md
@@ -107,9 +107,10 @@ const Demo = () => {
 export default Demo
 ```
 
-## 开启列设置
+## 开启列设置与刷新
 
-设置 `showSetting` 属性为 `true` 可以开启列设置功能。
+- 设置 `showSetting` 属性为 `true` 可以显示列设置功能。
+- 设置 `showRefresh` 属性为 `true` 可以显示刷新功能。
 
 ```tsx
 import { sleep } from '@examples/utils'
@@ -133,6 +134,7 @@ const Demo = () => {
       search={{ schema, labelWidth: 80 }}
       title={{
         showSetting: true,
+        showRefresh: true,
         tabs: {
           activeKey,
           items,
@@ -156,9 +158,9 @@ const Demo = () => {
 export default Demo
 ```
 
-## 单开列设置
+## 仅显示列设置与刷新
 
-仅开启列设置功能时，标题栏 DOM 结构有变化，不存在 Tabs 组件 DOM 结构。
+仅显示列设置与刷新，下划线样式请添加类名删除。
 
 ```tsx
 import { sleep } from '@examples/utils'
@@ -173,6 +175,7 @@ const Demo = () => {
       search={{ schema, labelWidth: 80 }}
       title={{
         showSetting: true,
+        showRefresh: true,
       }}
       table={{ columns }}
       request={async (searchParams) => {
@@ -188,50 +191,67 @@ const Demo = () => {
 export default Demo
 ```
 
-## 自定义两侧内容
+## 自定义左侧内容
 
-使用 Antd Tabs 自带的 `tabBarExtraContent` 属性实现。
+使用 `leftExtraContent` 属性可自定义左侧内容，下划线样式请按需删除。
 
 ```tsx
 import { sleep } from '@examples/utils'
 import schema from './helpers/schema'
 import columns from './helpers/columns'
 import createDataSource from './helpers/createDataSource'
 import SearchTable from '@schema-render/search-table-react'
-import { useState } from 'react'
 import { Button } from 'antd'
 
-const items = [
-  { key: '1', label: '已提交' },
-  { key: '2', label: '待提交' },
-  { key: '3', label: '待审核' },
-]
-
 const Demo = () => {
-  const [activeKey, setActiveKey] = useState('1')
+  return (
+    <SearchTable
+      search={{ schema, labelWidth: 80 }}
+      title={{
+        leftExtraContent: ({ loading }) => (
+          <>
+            <Button type="primary" disabled={loading}>
+              导入
+            </Button>
+            <Button disabled={loading}>导出</Button>
+          </>
+        ),
+      }}
+      table={{ columns }}
+      request={async (searchParams) => {
+        // 模拟请求接口获取表格数据
+        await sleep()
+        const data = createDataSource(searchParams.pageSize)
+        return { data, total: 100 }
+      }}
+    />
+  )
+}
 
-  const tabBarExtraContent = {
-    left: <Button style={{ marginRight: 16 }}>左侧内容</Button>,
-    right: <Button>右侧内容</Button>,
-  }
+export default Demo
+```
 
+## 自定义右侧内容
+
+使用 `rightExtraContent` 属性可自定义右侧内容。
+
+```tsx
+import { sleep } from '@examples/utils'
+import schema from './helpers/schema'
+import columns from './helpers/columns'
+import createDataSource from './helpers/createDataSource'
+import SearchTable from '@schema-render/search-table-react'
+import { Button } from 'antd'
+
+const Demo = () => {
   return (
     <SearchTable
       search={{ schema, labelWidth: 80 }}
       title={{
-        showSetting: true,
-        tabs: {
-          activeKey,
-          items,
-          onChange: setActiveKey,
-          tabBarExtraContent,
-        },
+        rightExtraContent: ({ loading }) => <Button disabled={loading}>右侧内容</Button>,
       }}
       table={{ columns }}
       request={async (searchParams) => {
-        // 打印 activeKey 值
-        console.log('activeKey:', activeKey)
-
         // 模拟请求接口获取表格数据
         await sleep()
         const data = createDataSource(searchParams.pageSize)
@@ -244,9 +264,7 @@ const Demo = () => {
 export default Demo
 ```
 
-## 自定义两侧内容(无标签情况)
-
-使用 Antd Tabs 自带的 `tabBarExtraContent` 属性实现，下划线样式请按需删除。
+## 属性全开效果
 
 ```tsx
 import { sleep } from '@examples/utils'
@@ -255,12 +273,16 @@ import columns from './helpers/columns'
 import createDataSource from './helpers/createDataSource'
 import SearchTable from '@schema-render/search-table-react'
 import { Button } from 'antd'
+import { useState } from 'react'
+
+const items = [
+  { key: '1', label: '已提交' },
+  { key: '2', label: '待提交' },
+  { key: '3', label: '待审核' },
+]
 
 const Demo = () => {
-  const tabBarExtraContent = {
-    left: <Button>左侧内容</Button>,
-    right: <Button>右侧内容</Button>,
-  }
+  const [activeKey, setActiveKey] = useState('1')
 
   return (
     <SearchTable
@@ -269,8 +291,12 @@ const Demo = () => {
         showRefresh: true,
         showSetting: true,
         tabs: {
-          tabBarExtraContent,
+          activeKey,
+          items,
+          onChange: setActiveKey,
         },
+        leftExtraContent: ({ loading }) => <Button disabled={loading}>左侧内容</Button>,
+        rightExtraContent: ({ loading }) => <Button disabled={loading}>右侧内容</Button>,
       }}
       table={{ columns }}
       request={async (searchParams) => {