1.項目描述

領航者卡片樣式較多，有些卡片比較近似；可以用嵌套方案，實現(xiàn)一個卡片，多個子單元 可拔插組件式卡片。

2.邏輯設計

2.1卡片示例-聊天框提示

3 通用提示卡片 設計

通用卡片中加載

// 卡片組件unit加載
...
if(!options?.dataType){
    if(options?.contentTop){
      formatMessage = "< p class=content-top >" + options.contentTop + "< /p >";
    }
    if(options?.content){
      // formatMessage+=''
      let this_formatMessage = options.content.replace(linkReg, function(match) {
        return `< a href='${match}' target='_blank' style='color:#2c68ff; display: inline;' >${match}< /a >`
      });
      this_formatMessage =  this_formatMessage.replace(/n/g, "< /p >< p >").replace(/< p >< /p >/g, "");
      formatMessage += "< p >" + this_formatMessage + "< /p >";
      // formatMessage+=''
    }
  }else if(options.dataType == 'operator'){
    let operatorHtml = await require(`./operator_unit.js`).default(options)
    formatMessage += operatorHtml;
  }else if(options.dataType == 'step'){
    let html = await require(`./step_dependence_unit.js`).default(options, $card, config)
    formatMessage += html;
  }
...

通用卡片數(shù)據(jù)結構

{
    "title": '您有前置步驟未完成',
    "describe": "",
    "subType": "popup_platform_card",
    "data": {
        contentTop:"開通權限請聯(lián)系管理員",
        dataType:''#無值時，默認為通用
        content："當前步驟可操作人：mashuai57,mashuai57,mashuai57", # 支持HTML渲染
        tips:'當前步驟：新建權益活動'
    }
}

3.1 流程小組件設計

3.1.1 流程小組件主邏輯

import './step_dependence_unit.scss';

/**
 * @param {data} data 數(shù)據(jù)
 */
export default async function(data, $card, config){
  /**
   * 返回文件
   * @param {*} data 
   */
  let contHtml = '';
  contHtml += "< p class=content-top >" + data.contentTop + "< /p >"
  data.options.forEach((element,i) = > {
    contHtml += '';
    contHtml += `< div class="rmc-btn-container rmc-fill-btn"
                  data-content="${element.content}" >
                      < div >
                          class="rmc-btn-name" >${element.value}
                          class="rmc-btn-tips" style="display: inline-block" >${element.subValue}
                      < /div >
                      class="rmc-btn-text" >${element.buttonName}
                  < /div >`;
    contHtml += "";
  });
  ...

最終展示

3.1.2 流程小組件數(shù)據(jù)結構

{
    "title": "'您有前置步驟未完成'",
    "describe": "",
    "subType": "popup_platform_card",
    "data": {
        "contentTop":"請先完成以下步驟，方可操作此步驟",
        "dataType":"step",
        "options": [{
            "type": "scenRecom",
            "status": "已完成", //未配置 中斷中 進行中 已完成
            "buttonName":"配置",
            "content":"跳轉申請費用", 
            "img":"https://kjimg10.360buyimg.com/jr_image/jfs/t1/181764/14/41810/4864/65605d79F70741596/2530d078f6f85127.png",
            "value":"申請費用",
            "subValue":"費用系統(tǒng)",
            "operator":["dazhige","leizong","dashuaige"]
            },{
            "type": "scenRecom",
            "status": "已完成", //未配置 中斷中 進行中 已完成
            "buttonName":"配置",
            "content":"跳轉申請費用", 
            "img":"https://kjimg10.360buyimg.com/jr_image/jfs/t1/181764/14/41810/4864/65605d79F70741596/2530d078f6f85127.png",
            "value":"申請費用",
            "subValue":"費用系統(tǒng)",
            "operator":["dazhige","leizong","dashuaige"]
            }
        ],
        "tips":"'當前步驟：新建權益活動'"
    }
}

3.2 操作人小組件設計

3.2.1 操作人小組件邏輯

import './operator_unit.scss';

/**
 * @param {data} data 數(shù)據(jù)
 */
export default async function(data){
  /**
   * 返回文件
   * @param {*} data 
   */
  let adminsHtml = '',operatorHtml = '',contHtml = '';
  data.admins.forEach(element = > {
    adminsHtml += element.userName;
  });
  contHtml += "< p class=content-top >" + data.contentTop + adminsHtml  + "< /p >"
  contHtml += '';
  contHtml += "< p >" + data.contentCon + "< /p >";
  data.options.forEach((element,i) = > {
    // console.log(i,element)
    if(i==0){
      operatorHtml += element.userName;
    }else{
      operatorHtml += '、' + element.userName;
    }
  });
...

3.2.2 操作人小組件數(shù)據(jù)結構

{
    "title": "溫馨提示",
    "describe": "",
    "subType": "popup_platform_card",
    "data":
    {
        "contentTop": "開通權限請聯(lián)系管理員：",
        "admins":
        [
            {
                "headImg": "",
                "userName": "mashuai57",
                "realName": "馬帥",
                "userCode": ""
            }
        ],
        "dataType": "operator",
        "contentCon": "當前步驟可操作人如下：",
        "options":
        [
            {
                "headImg": "",
                "userName": "mashuai57",
                "realName": "馬帥",
                "userCode": ""
            },
            {
                "headImg": "",
                "userName": "mashuai5",
                "realName": "馬帥",
                "userCode": ""
            },
            {
                "headImg": "",
                "userName": "mashuai7",
                "realName": "馬帥",
                "userCode": ""
            }
        ],
        "tips": "當前步驟：新建權益活動"
    }
}

4 最終展示

5 總結

AIGC系統(tǒng)中的聊天小助手卡片需要支持的方式往往較多，每種類型都開發(fā)一種卡片就會造成卡片臃腫；且有些卡片是有挺大的相似性的。小組件嵌套設計的方式就可以把一個卡片拆分成多種小組件的形式。這樣不同的組件組合即可生產不同的卡片。在小助手這種交互范圍小，種類繁多的交互設計中就比較實用了。

歡迎大家多多留言交流。

審核編輯 黃宇