docs: add SearchTable locale case

examples/search-table-react/700-locale.md

@@ -0,0 +1,87 @@
+---
+order: 700
+toc: content
+---
+
+# 国际化 locale
+
+`SearchTable` 默认文案是中文，如果需要使用其他语言，只需配置 `locale` 覆盖默认的语言，示例如下。
+
+```tsx
+/**
+ * defaultShowCode: true
+ */
+import schemaEn from './helpers/schema-en'
+import columnsEn from './helpers/columns-en'
+import createDataSourceEn from './helpers/createDataSource-en'
+import SearchTable from '@schema-render/search-table-react'
+import { sleep } from '@examples/utils'
+
+// 引入英文语言包
+import enUS from '@schema-render/search-table-react/dist/esm/locale/en_US'
+
+const Demo = () => {
+  return (
+    <SearchTable
+      /* 配置语言包 */
+      locale={enUS}
+      search={{
+        schema: schemaEn,
+        labelWidth: 'max-content',
+      }}
+      title={{
+        showSetting: true,
+      }}
+      table={{
+        bordered: true,
+        columns: columnsEn,
+        showRowNumber: true,
+        actionItems: () => [
+          { text: 'Edit' },
+          { text: 'View' },
+          { text: 'Delete', danger: true },
+        ],
+        actionItemsColumnData: {
+          width: 150,
+        },
+        summaryText: 'Total',
+      }}
+      request={async (searchParams) => {
+        // 模拟请求接口获取表格数据
+        await sleep()
+        const data = createDataSourceEn(searchParams.pageSize)
+
+        // 计算商品合计总价
+        const totalPrice = data
+          .reduce((total, item) => total + item.goods_price, 0)
+          .toFixed(2)
+
+        // 返回表格数据渲染
+        return {
+          // 表格数据
+          data,
+          // 数据总数，用于分页
+          total: 100,
+          // 合计栏数据
+          summaryData: {
+            // 对应「商品价格」
+            goods_price: totalPrice,
+          },
+        }
+      }}
+    />
+  )
+}
+
+export default Demo
+```
+
+目前支持以下语言：
+
+| **语言** | **文件名** |
+| -------- | ---------- |
+| 中文     | zh_CN      |
+| 英文     | en_US      |
+
+- 如果找不到你需要的语言包，欢迎参考 [中文语言包](https://github.com/Barrior/schema-render/tree/main/packages/search-table-react/src/locale/zh_CN.ts) 创建一个新的语言包，并给我们发一个 Pull Request。
+- 或者配置相同的语言包数据格式传值给 `locale` 属性。

examples/search-table-react/helpers/columns-en.ts

@@ -0,0 +1,71 @@
+import type { IColumnType } from '@schema-render/search-table-react'
+
+const columns: IColumnType[] = [
+  {
+    title: 'Supplier Name',
+    dataIndex: 'supplier_name',
+    width: 150,
+    fixed: 'left',
+  },
+  {
+    title: 'Supplier Code',
+    dataIndex: 'supplier_code',
+    width: 150,
+  },
+  {
+    title: 'Description',
+    dataIndex: 'description',
+    valueType: () => ({
+      type: 'long-text-modal',
+      maxLength: 20,
+    }),
+  },
+  {
+    title: 'Bill No',
+    dataIndex: 'bill_no',
+    width: 130,
+  },
+  {
+    title: 'Bill Type',
+    dataIndex: 'bill_type',
+  },
+  {
+    title: 'Bill Date',
+    dataIndex: 'bill_date',
+    width: 120,
+  },
+  {
+    title: 'Bill Status',
+    dataIndex: 'bill_status',
+  },
+  {
+    title: 'Operator',
+    dataIndex: 'operator',
+  },
+  {
+    title: 'Goods Name',
+    dataIndex: 'goods_name',
+    width: 130,
+  },
+  {
+    title: 'Goods Price',
+    dataIndex: 'goods_price',
+  },
+  {
+    title: 'Goods Code',
+    dataIndex: 'goods_code',
+    width: 130,
+  },
+  {
+    title: 'Goods Category',
+    dataIndex: 'goods_category',
+  },
+  {
+    title: 'Goods Date',
+    dataIndex: 'goods_date',
+    width: 120,
+    fixed: 'right',
+  },
+]
+
+export default columns

examples/search-table-react/helpers/createDataSource-en.ts

@@ -0,0 +1,33 @@
+import dayjs from 'dayjs'
+
+export default function createDataSourceEn(count = 10) {
+  const dataSource = []
+
+  for (let i = 0; i < count; i++) {
+    const random = String(Math.random()).slice(2, 6)
+    const goods_category = Math.random() > 0.5 ? 1 : 2
+    const date = dayjs().format('DD/MM/YYYY HH:mm:ss')
+    const id = `id_${i}`
+
+    dataSource.push({
+      key: id,
+      id,
+      supplier_name: `${random} Co.,Ltd.`,
+      supplier_code: random,
+      bill_no: `B${Date.now()}`,
+      bill_type: Math.random() > 0.5 ? 'Purchase Order' : 'Return Order',
+      bill_date: date,
+      bill_status: Math.random() > 0.5 ? 'Submitted' : 'To be submitted',
+      operator: Math.random() > 0.5 ? 'Tom' : 'Lily',
+      goods_name: goods_category === 1 ? '10 red roses' : 'Live bass',
+      goods_code: `G${Date.now()}`,
+      goods_category: goods_category === 1 ? 'Fruits & Flowers' : 'Aquatic Products',
+      goods_date: date,
+      goods_price: goods_category === 1 ? 19.9 : 22.8,
+      description:
+        'SearchTable is a conditional search table component based on the Search + Antd Table encapsulation; It is often used for data retrieval, display and operation of background management systems.',
+    })
+  }
+
+  return dataSource
+}

examples/search-table-react/helpers/schema-en.ts

@@ -0,0 +1,71 @@
+import type { IFormRenderRootSchema } from '@schema-render/form-render-react'
+
+// 定义 Schema
+const schema: IFormRenderRootSchema = {
+  renderType: 'Root',
+  properties: {
+    supplier_name: {
+      title: 'Supplier Name',
+      renderType: 'InputText',
+    },
+    supplier_code: {
+      title: 'Supplier Code',
+      renderType: 'InputText',
+    },
+    bill_no: {
+      title: 'Bill No',
+      renderType: 'InputText',
+    },
+    bill_type: {
+      title: 'Bill Type',
+      renderType: 'Select',
+      renderOptions: {
+        options: [
+          { label: 'Purchase Order', value: 1 },
+          { label: 'Inbound Order', value: 2 },
+          { label: 'Return Order', value: 3 },
+        ],
+      },
+    },
+    bill_date: {
+      title: 'Bill Date',
+      renderType: 'DateRangePicker',
+    },
+    bill_status: {
+      title: 'Bill Status',
+      renderType: 'Select',
+      renderOptions: {
+        options: [
+          { label: 'submitted', value: 1 },
+          { label: 'pending submit', value: 2 },
+          { label: 'pending approval', value: 3 },
+        ],
+      },
+    },
+    operator: {
+      title: 'Operator',
+      renderType: 'InputText',
+    },
+    goods_name: {
+      title: 'Goods Name',
+      renderType: 'InputText',
+    },
+    goods_code: {
+      title: 'Goods Code',
+      renderType: 'InputText',
+    },
+    goods_category: {
+      title: 'Goods Category',
+      renderType: 'Select',
+      renderOptions: {
+        options: [
+          { label: 'Fruits & Flowers', value: 1 },
+          { label: 'Aquatic Products', value: 2 },
+          { label: 'Grains & Oils & Seasoning', value: 3 },
+        ],
+      },
+    },
+  },
+}
+
+export default schema