功能

提供xedu课题相关工具评价能能力的组件

使用

安装

npm install '@x-edu/assessment' --registry=https://registry.npmmirror.com

范例

import XeduAssessment from '@x-edu/assessment'

// 普通用法
<XeduAssessment {...props} bizObjectId="e5649925-441d-4a53-b525-51a2f1c4e0a1" assessmentContent="这是被评价的内容" bizType={BIZ_TYPE.DEMO} />

<XeduAssessment {...props} bizObjectId="e5649925-441d-4a53-b525-51a2f1c4e0a1" assessmentContent="这是被评价的内容" bizType={BIZ_TYPE.DEMO} subBizType={SUB_BIZ_TYPE.DISCOURSE_PROBLEM} />

// 外部指定触发元素、修改弹窗按钮文案、修改占位元素文案
<XeduAssessment {...props} bizObjectId="e5649925-441d-4a53-b525-51a2f1c4e0a3" assessmentContent="这是被评价的内容" bizType={BIZ_TYPE.CODE} submitBtnText="反馈" placeholder={修改文案} />

// 外部指定触发元素、修改弹窗按钮文案、隐藏弹窗中的输入框
<XeduAssessment {...props} bizObjectId="e5649925-441d-4a53-b525-51a2f1c4e0a4" assessmentContent="这是被评价的内容" bizType={BIZ_TYPE.DEMO} subBizType={SUB_BIZ_TYPE.DISCOURSE_PROBLEM} submitBtnText="反馈" showInput={false} placeholder={<div>修改提交按钮文案+隐藏输入框</div>} />

// 高级用法：外部指定反馈维度
<XeduAssessment
  {...props}
  visible
  width={800}
  bizObjectId="e5649925-441d-4a53-b525-51a2f1c4e0a9"
  assessmentContent="这是被评价的内容"
  customOptions={{
    bizType: BIZ_TYPE.DEMO,
    placeholder: '自定义触发反馈的内容2',
    dislikeModal: {
      title: '自定义标题2',
      sections: [
        {
          subBizType: SUB_BIZ_TYPE.DISCOURSE_PROBLEM,
          subBizTypeName: '语篇问题',
          options: [
            {
              text: '选项1',
              tooltip: '选项1的提示'
            },
            {
              text: '选项2',
              tooltip: '选项2的提示'
            }
          ]
        },
        {
          subBizType: SUB_BIZ_TYPE.OPTIONS_AND_ANSWERS,
          subBizTypeName: '选项及答案',
          placeholder: '有值时会覆盖最外层的placeholder',
          options: [
            {
              text: '选项1'
            }
          ]
        }
      ],
      showInput: true,
      submitBtnText: '反馈'
    }
  }}
/>

API

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ------ | | env | 运行环境标识（用于匹配后端域名 origins） | string | - | | tenant | 租户信息对象，需包含 'sdp-app-id' | { 'sdp-app-id': string } | - | | requestOptions | 请求配置（headers / getAuthorization / lang） | { headers?: object; getAuthorization?: ()=>Promise; lang?: string } | 内置默认 | | visible | 是否显示反馈弹层（受控） | boolean | false | | placement | 弹窗位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom | string | bottom | | showArrow | 是否显示弹窗的箭头 | boolean | false | | width | 弹层内容宽度 | number | 400 | | bizObjectId | 业务对象ID | string | '' | | assessmentContent | 被评价内容文本 | string | '' | | extInfo | 扩展信息，会序列化为 ext_info（自动附加 user_role） | object | {} | | placeholder | 自定义触发区域内容，如果传纯字符串，只会替换文本会保留“赞/踩”图标，如果传ReactNode则完全替换，不传则从配置读取 | string | ReactNode | - | | mustShowSectionName | 仅 1 个 section 时是否强制展示分组名称 | boolean | false | | modalDataType | 弹层类型（目前使用 MODAL_TYPE.DISLIKE） | MODAL_TYPE | MODAL_TYPE.DISLIKE | | bizType | 业务类型（枚举 BIZ_TYPE） | BIZ_TYPE | BIZ_TYPE.DEMO | | subBizType | 子业务类型（可用于过滤只展示某一分组） | SUB_BIZ_TYPE | - | | showInput | 强制控制是否显示输入框（优先级高于配置） | boolean | - | | submitBtnText | 自定义提交按钮文本 | string | - | | customOptions | 自定义配置，覆盖内置 ASSESSMENT_DATAS[bizType] | object | - | | onOk | 点击提交后的回调 (info) | (info)=>void | - | | onClose | 弹层关闭回调 | ()=>void | - | | onReady | 组件初始化完成回调 | ()=>void | - | | mode | 运行模式：'default' 或 'message'（postMessage 集成） | 'default' | 'message' | 'default' | | iframePosition | iframe + message 模式下必传，top是iframe上边到页面顶边的具体，left是iframe左边到页面左边的距离，值只能是数字，单位是px | object | { top:0, left:0 } | | ref.open() | 通过 ref 主动打开弹层 | ()=>void | - | | ref.close() | 通过 ref 主动关闭弹层 | ()=>void | - | | userRole | 用户角色，貌似数据分析要用，会自动合如extInfo | string | '' |

customOptions 结构（示例）

customOptions = {
  bizType: BIZ_TYPE.DEMO,
  placeholder: '自定义触发反馈内容',
  dislikeModal: {
    title: '标题',
    sections: [
      {
        subBizType: SUB_BIZ_TYPE.DISCOURSE_PROBLEM,
        subBizTypeName: '语篇问题',
        placeholder: '有值时会覆盖最外层的placeholder',
        options: [
          { text: '选项1', tooltip: '提示1' },
          { text: '选项2' }
        ]
      }
    ],
    showInput: true,
    submitBtnText: '反馈'
  }
}

说明：

1. dislikeModal / likeModal（若扩展）字段命名规则：${modalDataType}Modal
2. sections 数组中 subBizType 用于记录与提交；options 内仅需 text / tooltip
3. showInput 若未显式传给组件，可在 modal 配置中控制

message 模式支持的 postMessage 指令（简述）

所有消息基础结构：

{
  type: string;
  payload?: any;
}

外部（高校页面 / 业务方）发送给组件的指令

| type | 作用 | 数据结构（payload） | 备注 | | ---- | ---- | ---- | ---- | | high_edu_page_ready | 外部页面已就绪，询问组件状态 | 无 | 组件回应 assessment_ready | | assessment_init | 动态设置 bizType / subBizType / assessmentContent / extInfo | { bizType?: string; subBizType?: string; assessmentContent?: string; extInfo?: Record<string,any> } | 根据bizType+subBizType获取评价维度配置；还会根据组件属性bizObjectId获取之前的评价数据 | | assessment_like | 点赞：未评价 -> 创建；已点赞/点踩 -> 删除 | 无 | 与组件内部“点赞”图标逻辑一致 | | assessment_dislike | 点踩：未评价 -> 打开点踩弹层；已点赞/点踩 -> 删除 | { btnRect: { top:number; left:number; width:number; height:number } } | btnRect 用于 message 模式下弹层锚点定位（组件自己会叠加 iframePosition 修正） | | assessment_delete | 删除已有评价 | { assessmentId: string } | assessmentId 可省略，组件内部会用当前状态 | | assessment_get_parent_window_info | 请求父窗口/iframe 位置信息 | 无 | 组件回应 assessment_parent_window_info |

组件发送给外部（事件回调）

| type | 触发时机 | 数据结构（payload） | 备注 | | ---- | ---- | ---- | ---- | | assessment_ready | 收到 high_edu_page_ready 后 | 无 | 表示组件已准备好接收指令 | | assessment_state_change | 点赞/点踩创建、删除、差评提交、或初始化拉取完成后 | { assessmentId?: string; bizType?: string; subBizType?: string; assessmentContent?: string; extInfo?: Record<string,any>; like: true | false | null; sections: { subBizType: string; subBizTypeName?: string; options: { text: string; tooltip?: string }[] }[]; remark: string } | sections 为当前选中差评维度；like=null 表示未评价 | | assessment_parent_window_info | 收到 assessment_get_parent_window_info 后 | { iframePosition: { top:number; left:number }; windowInnerHeight: number; windowClientHeight: number; windowAvaliHeight: number; origin: string } | 目前实现未返回 headerHeight/footerHeight，如需请二开补充 | | assessment_handle_error | 点赞/点踩/删除/初始化等操作发生错误 | { action: string; message: string } | action 取值：'save' | 'delete' | 'assessment_like' | 'assessment_dislike' 等 |

说明

1. sections 结构：当用户在点踩弹层中勾选多个维度时，会按分组去重聚合。示例：

{
  "sections": [
    {
      "subBizType": "discourse_problem",
      "subBizTypeName": "语篇问题",
      "options": [ { "text": "选项1" }, { "text": "选项2", "tooltip": "提示" } ]
    }
  ]
}

2. remark 为用户输入的文本（若弹层允许输入）。
3. 删除评价后组件会发送一次 assessment_state_change，其中 like 变为 null，sections 为空数组，remark 为空字符串。
4. 外部在点踩时若传入 btnRect，建议实时获取触发元素的 getBoundingClientRect() 结果，以保证多次滚动后定位正确。
5. iframePosition 需由外部（加载高校页面的父级）在组件属性中传入，用于修正跨 iframe 的定位偏移；组件会在回发 assessment_parent_window_info 中再携带一次方便调试。

开发相关

中小学预生产:

地址上加上?env=ncet-xedu-beta

http://localhost:8088/umd/index.html?env=ncet-xedu-beta

构建和发布

1. 需要本地先构建: 运行 npm run build:offline
2. 修改package.json版本号
3. 推送代码,
4. 发布到npm官方源：运行执行 npm publish --access public --registry https://registry.npmjs.org/