七库下载手游攻略手游攻略淘宝聊天窗口点击卡片，aigc系统中聊天小助手卡片小组件嵌套设计实践研究

淘宝聊天窗口点击卡片，aigc系统中聊天小助手卡片小组件嵌套设计实践研究

时间：2024-06-17 19:46:00 来源：今日头条浏览：0

1.项目描述

导航卡有多种样式，有的可以采用嵌套方案实现一张卡和多个子单元可插拔组件卡。

2.逻辑设计

2.1卡片示例-聊天框提示

3 通用提示卡片设计

加载通用卡

//加载卡片组件单元.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, '/pp').replace(/p\/p/g, ' ' ); formatMessage +='p' + this_formatMessage + '/p'; //formatMessage+='/div' } }else if(options.dataType=='operator'){ letoperatorHtml=wait require(`./operator_unit.js `).default(options) formatMessage +=OperatorHtml; }else if(options.dataType=='step'){ let html=wait require(`./step_dependency_unit.js`).default(options , $card, config ) formatMessage +=html }.通用卡片数据结构

{ 'title': '您有未完成的初步步骤', 'describe': '', 'subType': 'popup_platform_card', 'data': { contentTop: '请联系您的管理员以启用权限', dataType:''#无值，默认为generic: 'Available for current step: bmashuai57/b, mashuai57, mashuai57', # 支持HTML 渲染提示： '当前步骤：new 创建股票活动' }}

3.1 流程小组件设计

3.1.1 流程小组件主逻辑

import './step_dependent_unit.scss';/** * @param {data} data 数据*/导出默认异步函数(data, $card, config){ /** * 返回文件* @param { *}数据*/让contHtml=''; div class='step_dependent_unit'p class=content-top' + data.contentTop + '/p' data.options.forEach((element,i)={ contHtml +='div class=content-con'; +=`div class='rmc-btn-container rmc-fill-btn' 数据内容='${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'${ 元素。按钮名称}/span /div` +='/div/div' });

3.1.2 流程小组件数据结构

{ 'title': ``还有未完成的前置步骤'', 'describe': '', 'subType': 'popup_platform_card', 'data': { 'contentTop':'下一步请先完成，该步骤可操作', 'dataType':'step', 'options': [{ 'type': 'scenRecom', 'status': 'Completed', //未配置中断进行中已完成'buttonName':'配置', 'content':'跳转申请费', 'img':'https://kjimg10.360buyimg.com/jr_image/jfs/t1/181764/14/41810/4864/65605d79F70741596/2530d078f 6f8512' 'value ‘:’申请Fee', 'subValue':'费用结构', 'operator':['dazhige','leizong','dashuaige'] },{ 'type': 'scenRecom', 'status' : '已完成', //未配置已中断已完成'buttonName':'配置', 'content':'跳转申请费', 'img':'https://kjimg10.360buyimg.com/jr_image/jfs/t1 /181764/14 /41810/4864 /65605d79F70741596/253 0d078f6f85127 .png', 'value':'申请费用', 'subValue':'收费系统', 'operator':['dazhige','leizong','dashuaige'] } ], 'tips': ''当前步骤：创建一个新的库存活动'' }}

3.2 操作人小组件设计

3.2.1 操作人小组件逻辑

import './operator_unit.scss';/** * @param {data} data 数据*/导出默认异步函数(data){ /** * 返回文件* @param {*} data */let adminsHtml='',operatorHtml='',contHtml=''; data.admins.forEach(element={ adminsHtml +=element.userName; }); + '/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 操作人小组件数据结构

{ '标题': '温馨提示', '描述': '', 'subType': 'popup_platform_card', 'data': { 'contentTop': '请联系管理员启用权限：', 'admins': [ { 'headImg': ' ', 'userName': 'mashuai57', ' realName': 'Mashuai', 'userCode': ' ' } ], 'dataType': 'operator', 'contentCon': '当前步骤的运算符为：', 'options': [ { ' headImg': '', 'userName': 'mashuai57', 'realName ': '马帅', 'userCode': '' }, { 'headImg': '', 'userName ': 'mashuai5', 'realName': '马帅', 'userCode': '' }, { 'headImg' : '', 'userName': 'mashuai7', 'realName': 'Mashuai', 'userCode': '' } ], 'tips': ' 当前步骤：创建新的股票活动' }}