---
name: jjb-interpolation-examples
description: 定义 JJB 接口动态文本配置使用示例。在实现表格列、表单标签、页面文本、页面标题动态配置时查阅。
---

# 接口动态文本配置

## 使用示例

- **表格列动态配置**：

  ```javascript
  import React from 'react';
  import { Table } from 'antd';
  import { Interpolation } from '@cqsjjb/jjb-common-decorator/namespace';

  function UserList({ columns, dataSource }) {
    // 定义列配置，使用 fieldCode 标识需要动态配置的列
    const tableColumns = columns([
      { fieldCode: 'reslib-app-resourceManagement-userName', dataIndex: 'name', width: 200 },
      { fieldCode: 'reslib-app-resourceManagement-email', dataIndex: 'email', width: 200 },
      { fieldCode: 'reslib-app-resourceManagement-phone', dataIndex: 'phone', width: 150 },
      { dataIndex: 'createTime', title: '创建时间', width: 180 } // 无 fieldCode，使用固定标题
    ]);

    return <Table columns={tableColumns} dataSource={dataSource} />;
  }

  export default Interpolation(UserList);
  ```

- **表单字段标签动态配置**：

  ```javascript
  import React from 'react';
  import { Form, Input } from 'antd';
  import { Interpolation } from '@cqsjjb/jjb-common-decorator/namespace';

  function UserForm({ insert }) {
    return (
      <Form>
        <Form.Item label={insert('reslib-app-resourceManagement-userName') || '用户名'}>
          <Input />
        </Form.Item>
        <Form.Item label={insert('reslib-app-resourceManagement-email') || '电子邮箱'}>
          <Input />
        </Form.Item>
      </Form>
    );
  }

  export default Interpolation(UserForm);
  ```

- **页面文本动态配置**：

  ```javascript
  import React from 'react';
  import { Interpolation } from '@cqsjjb/jjb-common-decorator/namespace';

  function UserDetail({ insert }) {
    const userNameLabel = insert('reslib-app-resourceManagement-userName') || '用户名';
    const emailLabel = insert('reslib-app-resourceManagement-email') || '电子邮箱';
    
    return (
      <div>
        <div>{userNameLabel}: 张三</div>
        <div>{emailLabel}: zhangsan@example.com</div>
      </div>
    );
  }

  export default Interpolation(UserDetail);
  ```

- **页面标题动态配置**：

  ```javascript
  import React from 'react';
  import { PageLayout } from '@cqsjjb/jjb-react-admin-component';
  import { Interpolation } from '@cqsjjb/jjb-common-decorator/namespace';

  function UserList({ insert }) {
    // 获取页面默认标题（可选，不是必须的）
    const pageTitle = insert('DEFAULT_MENU') || '用户列表';
    
    return (
      <PageLayout title={pageTitle}>
        {/* 页面内容 */}
      </PageLayout>
    );
  }

  export default Interpolation(UserList);
  ```