isv 商品质量分组件包

兼容性

最低兼容：React 15.6，Ant Design 2

使用步骤

1. 在项目中接入 npm 包，在指定位置引入指定组件，必须传入 itemId 和 scene 场景值（自己制定一个独一无二的就行，例如 aiyong）
2. 自己发送请求数据，然后把请求到的数据注入给组件 value

列表页组件

优先使用组合组件，value 里面的值为 top 接口返回的数据，可以直接透传不用关注

基本使用

import { DiagnoseManageComponent } from "item-diagnose-component-isv";

<DiagnoseManageComponent
  scene='根据自己业务去设定的一个标识，自己指定就可以' // 例如为 aiyong
  itemId={itemId}
  scoreCardProps={
    {
      // 分数组件除了value外的参数
    }
  }
  strategyProps={
    {
      // 策略卡片除了value外的参数
    }
  }
  value={
    {
      // top接口请求到的数据
    }
  }
/>;

详细参数定义

interface DiagnoseManageComponent {
  /** 使用场景，必填 */
  scene: string;
  /** 商品ID，必填 */
  itemId: string;
  /** 自定义类名 */
  className?: string;
  /** 诊断评分卡片的属性，选填 */
  scoreCardProps: {
    /** 自定义类名 */
    className?: string;
    /** 自定义样式 */
    style?: React.CSSProperties;
  };
  /** 诊断策略组件的属性，选填*/
  strategyProps: {
    /** 自定义类名 */
    className?: string;
    /** 自定义样式 */
    style?: React.CSSProperties;
    /** 卡片底部自定义操作按钮，默认使用接口返回的操作按钮，传空数组则为隐藏 */
    customOperation?: {
      /** 操作按钮id,自己定义 */
      name: string;
      /** 按钮文本 */
      text: string;
      /** 按钮样式类型 */
      type?: "primary" | "normal";
      /** 是否为文本按钮样式 */
      isText?: boolean;
      /** 自定义点击方法 */
      onClick?: (e?: React.MouseEvent<Element, MouseEvent>) => void;
    }[];
  };
  /** 组件数据，依赖top服务端返回的数据采用下划线命名法 */
  value: {
    /** 基础分 */
    basic_score?: number;
    /** 基础分主题 */
    basic_score_theme?: "unknown" | "warn" | "error" | "success";
    /** 扶优分 */
    spe_score?: number;
    /** 扶优分主题 */
    spe_score_theme?: "unknown" | "warn" | "error" | "success";
    /** 扶优分状态：未激活、已激活或未覆盖 */
    spe_score_status?: "not_activated" | "activated" | "not_covered";
    /** 扶优分状态文本 */
    spe_score_status_text?: string;
    /** 分数标签文本 */
    score_label?: string;
    /** 分数标签主题 */
    score_label_theme?: "unknown" | "warn" | "error" | "success";
    /** 头部主题：未覆盖、警告、错误或成功 */
    header_theme?: "unknown" | "warn" | "error" | "success";
    /** 描述文本 */
    header_description?: string;
    /** 问题项列表 */
    issue_list: Array<{
      /** 诊断项ID */
      diagnose_id: number;
      /** 诊断项code */
      diagnose_code: string;
      /** 诊断项描述 */
      desc: string;
      /** 诊断项标签 */
      warning?: string;
    }>;
  };
}

发布页组件

优先使用组合组件，value 里面的值为 top 接口返回的数据，可以直接透传不用关注

基本使用

import { DiagnosePublishComponent } from 'item-diagnose-component-isv';

<DiagnosePublishComponent
  scene="根据自己业务去设定的一个标识，自己指定就可以" // 例如为 aiyong
  itemId={itemId}
  scoreCardProps={{
     // 分数组件除了value外的参数
  }}
  strategyProps={{
     // 侧边栏组件除了value外的参数
    onDiagnoseItemClick?: (item: {
      /** 诊断项ID */
      diagnose_id: number;
      /** 诊断项影响 */
      effect: string;
      /** 诊断项类型 */
      entry_type: string;
      /** 诊断项标题 */
      present: string;
      /** 诊断项修改建议 */
      suggestion: string;
      /** 诊断项附带链接，富文本 */
      tool_url_list: string[];
      /** 诊断项标签 */
      warning: string;
    }) => void;
  }}
  value={{
    // top接口请求到的数据
  }}
/>

如果要实现点击策略项进行页面锚定，需要自己实现 onDiagnoseItemClick 方法。

详细参数定义

interface DiagnosePublishComponentProps {
  /** 使用场景 */
  scene: string;
  /** 商品ID */
  itemId: string;
  /** 自定义类名 */
  className?: string;
  /** 诊断评分卡片的属性 */
  scoreCardProps: {
    /** 自定义类名 */
    className?: string;
    /** 自定义样式 */
    style?: React.CSSProperties;
  };
  /** 诊断策略组件的属性 */
  strategyProps: {
    /** 自定义类名 */
    className?: string;
    /** 自定义样式 */
    style?: React.CSSProperties;
    /** 诊断项点击回调 */
    onDiagnoseItemClick?: (item: {
      /** 诊断项ID */
      diagnose_id: number;
      /** 诊断项影响 */
      effect: string;
      /** 诊断项类型 */
      entry_type: string;
      /** 诊断项标题 */
      present: string;
      /** 诊断项修改建议 */
      suggestion: string;
      /** 诊断项附带链接，富文本 */
      tool_url_list: string[];
      /** 诊断项标签 */
      warning: string;
    }) => void;
  };
  /** 组件数据，依赖top服务端返回的数据采用下划线命名法 */
  value: {
    /** 卡片状态类型 */
    theme: "success" | "warn" | "error";
    /** 头部状态文本 */
    header_text: string;
    /** 基础分 */
    basic_score: number;
    /** 扶优分 */
    spe_score?: number;
    /** 扶优分状态 */
    spe_score_status?: "not_activated" | "activated" | "not_covered";
    /** 扶优分状态文本 */
    spe_score_status_text?: string;
    /** 底部分数状态描述 */
    score_label: string;
    /** 诊断项列表 */
    diagnose_issue_entry_list?: Array<{
      /** 诊断项ID */
      diagnose_id: number;
      /** 诊断项影响 */
      effect: string;
      /** 诊断项类型 */
      entry_type: string;
      /** 诊断项标题 */
      present: string;
      /** 诊断项修改建议 */
      suggestion: string;
      /** 诊断项附带链接，富文本 */
      tool_url_list?: string[];
      /** 诊断项标签 */
      warning?: string;
    }>;
  };
}