1.项目描述
领航者卡片样式较多,有些卡片比较近似;可以用嵌套方案,实现一个卡片,多个子单元 可拔插组件式卡片。
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;
}
...
通用卡片数据结构
{
"title": '您有前置步骤未完成',
"describe": "",
"subType": "popup_platform_card",
"data": {
contentTop:"开通权限请联系管理员",
dataType:''#无值时,默认为通用
content:"当前步骤可操作人:mashuai57,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 += "< 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 流程小组件数据结构
{
"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 += '';
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系统中的聊天小助手卡片需要支持的方式往往较多,每种类型都开发一种卡片就会造成卡片臃肿;且有些卡片是有挺大的相似性的。小组件嵌套设计的方式就可以把一个卡片拆分成多种小组件的形式。这样不同的组件组合即可生产不同的卡片。在小助手这种交互范围小,种类繁多的交互设计中就比较实用了。
欢迎大家多多留言交流。
审核编辑 黄宇
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。
举报投诉
-
嵌套
+关注
关注
0文章
15浏览量
7866 -
AIGC
+关注
关注
1文章
288浏览量
1244
发布评论请先 登录
相关推荐
HarmonyOS服务卡片跑AIGC
我们认为基于 AIGC 能力类型的 HarmonyOS 元服务万能卡片应该通过 API 方式调用合规训练后的各具特色的模型与角色来服务用户,通过万能卡片、智能语音、手势动作等更加自然友好的方式来和用户交互。
![HarmonyOS服务<b class='flag-5'>卡片</b>跑<b class='flag-5'>AIGC</b>](https://file1.elecfans.com/web2/M00/82/39/wKgaomRHMqKAUbv3AAA41P1P70U354.png)
定制开发俄罗斯轮盘视频聊天chatroulette聊天轮盘
的网页视频聊天室组件平台定制开发,网页模式视频导购系统,出售远程视频招聘系统,卖远程培训系统标签:俄罗斯轮盘视频
发表于 03-19 10:42
如何设置最小组件?
,但TCXO的规格在1.8伏最大输出.8vp-p,我计划连接到OSC1/CLKIN引脚。显然,我需要一个电压调节器来给TCXO供电,但是,在TCXO输出和PIC输入之间如何设置最小组件呢?关于TCXO
发表于 10-29 13:30
SIG 小组汇总
RISC-V的软件包和系统构建等该特别兴趣小组定位于 RISC-V 架构下的 OpenHarmony 操作系统构建特别兴趣小组发起单位:中科院软件所、上海交大初步共建成果:https
发表于 08-31 17:37
用HarmonyOS元服务万能卡片训练一下文心一言的AIGC能力
一、部分效果图展示1.服务卡片2.AIGC服务二、DEMO说明本Demo案例只是使用了HarmonyOS元服务卡片连接合规外网的能力进行AIGC元服务
发表于 04-18 10:31
HarmonyOS元服务开发实践:桌面卡片字典
本文转载分享自华为开发者论坛《HarmonyOS元服务开发实践:桌面卡片字典》,作者:蛟龙腾飞
一、项目说明
1.DEMO创意为卡片字典。
2.不同卡片显示不同内容:微卡、小卡、
发表于 08-24 16:55
HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Badge
可以附加在单个组件上用于信息标记的容器组件。该组件从API Version 7开始支持。
支持单个子组件。子组件类型:
发表于 09-28 11:53
HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Stack
堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。该组件从API Version 7开始支持。可以包含子组件。
一、接口
St
发表于 10-09 14:29
ios「时钟」小组件时间显示不对是什么情况?
点击 升级 iOS14 后,比较明显的变化就是小组件了,咱们前两天也介绍过相关的玩法iPhone 魔改桌面主题来了!朋友圈玩疯啦~。 我发现,很多同学已经使用各种有趣的小组件,将自己的 iPhone
![ios「时钟」<b class='flag-5'>小组件</b>时间显示不对是什么情况?](https://file.elecfans.com/web1/M00/CA/39/pIYBAF-FY2qANCsOAAATJKzd3MM008.jpg)
支付宝已支持苹果 iOS 14 小组件功能
iOS 14 小组件功能。 IT之家了解到,支付宝新增可以添加到手机桌面的小组件「支付宝」「蚂蚁森林」「蚂蚁庄园」「行情看板」。该功能需要 iOS 14 及以上的系统版本。 用户可在桌面长按空白处,点击左上角「+」按钮,从列表
云百件客服聊天助手-Windows版特性-云百件
云百件客服聊天助手是一款协助于网络客服接待人员快速回复、微信多开等的工具软件 话术可快速搜索,实现一键快捷回复客户信息,话术云端存储和同步,可快捷高质量统一回复 预先存储话术,云端同步。不管是新老
发表于 09-16 18:04
•409次阅读
![云百件客服<b class='flag-5'>聊天</b><b class='flag-5'>助手</b>-Windows版特性-云百件](https://file.elecfans.com//web2/M00/14/EF/poYBAGFDFZmAOX_GAABB62nk56A461.jpg)
评论