AIGC 系统中聊天小助手卡片小组件嵌套设计实践
作者：京东科技开发者
- 2024-06-12 北京
本文字数：2812 字
阅读完需：约 9 分钟
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 系统中的聊天小助手卡片需要支持的方式往往较多，每种类型都开发一种卡片就会造成卡片臃肿；且有些卡片是有挺大的相似性的。小组件嵌套设计的方式就可以把一个卡片拆分成多种小组件的形式。这样不同的组件组合即可生产不同的卡片。在小助手这种交互范围小，种类繁多的交互设计中就比较实用了。
欢迎大家多多留言交流。
划线
评论
复制
发布于: 18 分钟前阅读数: 5
版权声明: 本文为 InfoQ 作者【京东科技开发者】的原创文章。
原文链接:【http://xie.infoq.cn/article/782e32e89d537b1baff886b6b】。文章转载请联系作者。
京东科技开发者
关注
拥抱技术，与开发者携手创造未来！ 2018-11-20 加入
我们将持续为人工智能、大数据、云计算、物联网等相关领域的开发者，提供技术干货、行业技术内容、技术落地实践等文章内容。京东云开发者社区官方网站【https://developer.jdcloud.com/】，欢迎大家来玩
评论