1.项目描述

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

2.逻辑设计

2.1卡片示例-聊天框提示









3 通用提示卡片 设计

通用卡片中加载

1// 卡片组件unit加载
2...
3if(!options?.dataType){
4    if(options?.contentTop){
5      formatMessage = "<p class=content-top>" + options.contentTop + "</p>";
6    }
7    if(options?.content){
8      // formatMessage+='<div class=content-con>'
9      let this_formatMessage = options.content.replace(linkReg, function(match) {
10        return `<a href='${match}' target='_blank' style='color:#2c68ff; display: inline;'>${match}</a>`
11      });
12      this_formatMessage =  this_formatMessage.replace(/\n/g, "</p><p>").replace(/<p></p>/g, "");
13      formatMessage += "<p>" + this_formatMessage + "</p>";
14      // formatMessage+='</div>'
15    }
16  }else if(options.dataType == 'operator'){
17    let operatorHtml = await require(`./operator_unit.js`).default(options)
18    formatMessage += operatorHtml;
19  }else if(options.dataType == 'step'){
20    let html = await require(`./step_dependence_unit.js`).default(options, $card, config)
21    formatMessage += html;
22  }
23...

通用卡片数据结构

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

3.1 流程小组件设计





3.1.1 流程小组件主逻辑

1import './step_dependence_unit.scss';
2
3/**
4 * @param {data} data 数据
5 */
6export default async function(data, $card, config){
7  /**
8   * 返回文件
9   * @param {*} data 
10   */
11  let contHtml = '';
12  contHtml += "<div class='step_dependence_unit'><p class=content-top>" + data.contentTop + "</p>"
13  data.options.forEach((element,i) => {
14    contHtml += '<div class=content-con>';
15    contHtml += `<div class="rmc-btn-container rmc-fill-btn"
16                  data-content="${element.content}">
17                      <div>
18                          <span class="rmc-btn-name">${element.value}</span>
19                          <span class="rmc-btn-tips" style="display: inline-block">${element.subValue}</span>
20                      </div>
21                      <span class="rmc-btn-text">${element.buttonName}</span>
22                  </div>`;
23    contHtml += "</div></div>";
24  });
25  ...

最终展示





3.1.2 流程小组件数据结构

1{
2    "title": "'您有前置步骤未完成'",
3    "describe": "",
4    "subType": "popup_platform_card",
5    "data": {
6        "contentTop":"请先完成以下步骤，方可操作此步骤",
7        "dataType":"step",
8        "options": [{
9            "type": "scenRecom",
10            "status": "已完成", //未配置 中断中 进行中 已完成
11            "buttonName":"配置",
12            "content":"跳转申请费用", 
13            "img":"https://kjimg10.360buyimg.com/jr_image/jfs/t1/181764/14/41810/4864/65605d79F70741596/2530d078f6f85127.png",
14            "value":"申请费用",
15            "subValue":"费用系统",
16            "operator":["dazhige","leizong","dashuaige"]
17            },{
18            "type": "scenRecom",
19            "status": "已完成", //未配置 中断中 进行中 已完成
20            "buttonName":"配置",
21            "content":"跳转申请费用", 
22            "img":"https://kjimg10.360buyimg.com/jr_image/jfs/t1/181764/14/41810/4864/65605d79F70741596/2530d078f6f85127.png",
23            "value":"申请费用",
24            "subValue":"费用系统",
25            "operator":["dazhige","leizong","dashuaige"]
26            }
27        ],
28        "tips":"'当前步骤：新建权益活动'"
29    }
30}



3.2 操作人小组件设计





3.2.1 操作人小组件逻辑

1import './operator_unit.scss';
2
3/**
4 * @param {data} data 数据
5 */
6export default async function(data){
7  /**
8   * 返回文件
9   * @param {*} data 
10   */
11  let adminsHtml = '',operatorHtml = '',contHtml = '';
12  data.admins.forEach(element => {
13    adminsHtml += element.userName;
14  });
15  contHtml += "<p class=content-top>" + data.contentTop + adminsHtml  + "</p>"
16  contHtml += '<div class=content-con>';
17  contHtml += "<p>" + data.contentCon + "</p>";
18  data.options.forEach((element,i) => {
19    // console.log(i,element)
20    if(i==0){
21      operatorHtml += element.userName;
22    }else{
23      operatorHtml += '、' + element.userName;
24    }
25  });
26...

3.2.2 操作人小组件数据结构

1{
2    "title": "温馨提示",
3    "describe": "",
4    "subType": "popup_platform_card",
5    "data":
6    {
7        "contentTop": "开通权限请联系管理员：",
8        "admins":
9        [
10            {
11                "headImg": "",
12                "userName": "mashuai57",
13                "realName": "马帅",
14                "userCode": ""
15            }
16        ],
17        "dataType": "operator",
18        "contentCon": "当前步骤可操作人如下：",
19        "options":
20        [
21            {
22                "headImg": "",
23                "userName": "mashuai57",
24                "realName": "马帅",
25                "userCode": ""
26            },
27            {
28                "headImg": "",
29                "userName": "mashuai5",
30                "realName": "马帅",
31                "userCode": ""
32            },
33            {
34                "headImg": "",
35                "userName": "mashuai7",
36                "realName": "马帅",
37                "userCode": ""
38            }
39        ],
40        "tips": "当前步骤：新建权益活动"
41    }
42}

4 最终展示





5 总结

AIGC系统中的聊天小助手卡片需要支持的方式往往较多，每种类型都开发一种卡片就会造成卡片臃肿；且有些卡片是有挺大的相似性的。小组件嵌套设计的方式就可以把一个卡片拆分成多种小组件的形式。这样不同的组件组合即可生产不同的卡片。在小助手这种交互范围小，种类繁多的交互设计中就比较实用了。

欢迎大家多多留言交流。