safety-eval-service-frontend/.cursor/skills/specs/17-接口动态文本配置/05-使用示例/SKILL.md

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

接口动态文本配置

使用示例

• 表格列动态配置：

  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);
  

• 表单字段标签动态配置：

  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);
  

• 页面文本动态配置：

  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);
  

• 页面标题动态配置：

  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);