开发者社区 > 博文 > AIGC系统中聊天小助手卡片小组件嵌套设计实践
分享
  • 打开微信扫码分享

  • 点击前往QQ分享

  • 点击前往微博分享

  • 点击复制链接

AIGC系统中聊天小助手卡片小组件嵌套设计实践

  • jd****
  • 2024-06-07
  • IP归属:北京
  • 100浏览

    1.项目描述

    领航者卡片样式较多,有些卡片比较近似;可以用嵌套方案,实现一个卡片,多个子单元 可拔插组件式卡片。

    2.逻辑设计

    2.1卡片示例-聊天框提示

    3 通用提示卡片 设计

    通用卡片中加载

    // 卡片组件unit加载
    ...
    if(!options?.dataType){
        if(options?.contentTop){
          formatMessage = "<p class=content-top>" + options.contentTop + "</p>";
        }
        if(options?.content){
          // formatMessage+='<div class=content-con>'
          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+='</div>'
        }
      }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;
      }
    ...
    

    通用卡片数据结构

    {
        "title": '您有前置步骤未完成',
        "describe": "",
        "subType": "popup_platform_card",
        "data": {
            contentTop:"开通权限请联系管理员",
            dataType:''#无值时,默认为通用
            content:"当前步骤可操作人:<b>mashuai57</b>,mashuai57,mashuai57", # 支持HTML渲染
            tips:'当前步骤:新建权益活动'
        }
    }
    

    3.1 流程小组件设计

    3.1.1 流程小组件主逻辑

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

    最终展示

    3.1.2 流程小组件数据结构

    {
        "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":"费用系统",
                "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":"费用系统",
                "operator":["dazhige","leizong","dashuaige"]
                }
            ],
            "tips":"'当前步骤:新建权益活动'"
        }
    }
    


    3.2 操作人小组件设计

    3.2.1 操作人小组件逻辑

    import './operator_unit.scss';
    
    /**
     * @param {data} data 数据
     */
    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 += '<div class=content-con>';
      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 操作人小组件数据结构

    {
        "title": "温馨提示",
        "describe": "",
        "subType": "popup_platform_card",
        "data":
        {
            "contentTop": "开通权限请联系管理员:",
            "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系统中的聊天小助手卡片需要支持的方式往往较多,每种类型都开发一种卡片就会造成卡片臃肿;且有些卡片是有挺大的相似性的。小组件嵌套设计的方式就可以把一个卡片拆分成多种小组件的形式。这样不同的组件组合即可生产不同的卡片。在小助手这种交互范围小,种类繁多的交互设计中就比较实用了。

    欢迎大家多多留言交流。