@x-edu/assessment

功能

提供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: '反馈'
  }
}

说明：

• dislikeModal / likeModal（若扩展）字段命名规则：${modalDataType}Modal
• sections 数组中 subBizType 用于记录与提交；options 内仅需 text / tooltip
• 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'

说明

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

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

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

开发相关

中小学预生产:

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

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

构建和发布

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