safety-eval-service-frontend/.cursor/skills/specs/17-接口动态文本配置/02-Interpolation使用方式/SKILL.md

name	description
jjb-interpolation-usage	定义 JJB Interpolation 高阶组件使用方式。在使用 Interpolation 包裹组件、insert、columns 方法时查阅。

接口动态文本配置

Interpolation 使用方式

• 导入方式：

  import { Interpolation } from '@cqsjjb/jjb-common-decorator/namespace';
  

• 使用方式：使用高阶组件（HOC）包裹页面组件

  import React from 'react';
  import { Interpolation } from '@cqsjjb/jjb-common-decorator/namespace';
  
  function UserList(props) {
    const { interpolation, insert, columns } = props;
  
    // 使用 insert 方法获取字段重命名文本
    const userNameLabel = insert('reslib-app-resourceManagement-userName') || '用户名';
  
    // 使用 columns 方法处理表格列配置
    const tableColumns = columns([
      { fieldCode: 'reslib-app-resourceManagement-userName', dataIndex: 'name', width: 200 },
      { fieldCode: 'reslib-app-resourceManagement-email', dataIndex: 'email', width: 200 },
      { dataIndex: 'phone', title: '手机号', width: 150 } // 没有 fieldCode 的列不受影响
    ]);
  
    return (
      <div>
        <div>{userNameLabel}: 张三</div>
        <Table columns={tableColumns} dataSource={data} />
      </div>
    );
  }
  
  // 使用 Interpolation 包裹组件
  export default Interpolation(UserList);
  

• 调试开关 disabled：

  Interpolation 第二个参数支持 { disabled?: boolean } 配置，默认值为 false（动态文本正常启用）。

  当需要临时关闭动态文本配置进行调试时，传入 { disabled: true }，此时 insert 始终返回 null、columns 原样返回列配置，无需注释代码：

  // 正常启用动态文本配置（disabled 默认 false，可省略）
  export default Interpolation(UserList);
  
  // 临时关闭动态文本配置（调试用），insert 返回 null，columns 原样返回
  export default Interpolation(UserList, { disabled: true });
  

  ⚠️ 注意：disabled: true 仅用于本地调试，调试完成后必须恢复为正常模式，禁止将 disabled: true 提交到代码仓库。