Bot-answer NPM

bot-answer

bot-answer是一个通用组件库，基于kgbot机器人问答实现双向式交流，可探索图谱，可提问等。

#install 基于公司源进行安装使用:

npm i @plantdata/bot-answer   
或
yarn add @plantdata/bot-answer

botAnswer参数：

1、showType
2、addData([], true)
3、setParams(params, requestor)
4、botLinkClick()
5、addDataPage(page)
6、empty插槽

####1、showType：

搜索结果数据类型展示状态
默认为列表
目前仅支持列表【list】和幻灯片【carousel】展示幻灯片仅支持前十条数据放映
示例：
    <bot-answer ref="botAnswer" show-type="carousel"></bot-answer>

####2、addData([])：

调用该函数手动塞入数据，可用于定制接口等
addData([], true)，第二个参数适用于内部某条数据更新-必传（可用于分页,不传则无法判断数据是单条更新还是整体更新）
具体示例请参考下面示例二和示例三的用法

####3、setParams(params, requestor)：

组件内入参函数
params：此处传参为对象，具体可参考kgbot的swagge调用接口传参（内含此对象，这里传入为覆盖合并，默认page为1，size为10）
params.sysNum这里为机器人参数传入
requestor：此处传参为对象，可用于url变动，method请求方式变动，header等（非必传）
具体示例请参考下面示例一 ##【注：以上addData、setParams函数调用，不支持同时存在】

####4、botLinkClick()：

组件内抛出链接点击事件

####5、addDataPage(page)：

该函数仅用于手动塞入数据点击分页情况
page为组件内抛出页码

####6、组件内含无数据插槽empty（非必）

示例：
    <bot-answer>      
        <div slot="empty">暂无数据</div>
    </bot-answer>

##使用步骤：在main.js中注册并在如下示例中使用

import botAnswer from '@plantdata/bot-answer'

Vue.use(botAnswer)

示例一（参数传入）:

<template>
    <bot-answer ref="botAnswer" @botLinkClick="botLinkClick">
        <div slot="empty">暂无数据</div>
    </bot-answer>	
</template>

export default {
  name: 'test-conponent',
  mounted () {
    this.$nextTick(() => {
        this.init()
    })
  },
  methods: {
    init () {
        const params = {
             sysNum: '16722099167167534',
             inputMessage: { inQues: '腾讯的产品有哪些' }
             // baseReq: {
             //   page: 1,
             //   size: 8
             // }
        }
        // 非必传参数
        const requestParams = {
             url: '',
             method: 'POST',
             header: {}
        }                
        // this.$refs.botAnswer.setParams(params)
        this.$refs.botAnswer.setParams(params, requestParams) // this.params.sysNum 和 this.params.inputMessage.inQues必传，不传会弹提示
    },
    botLinkClick (kw, nodeValue) {
        console.log(kw, nodeValue) // kw为链接文案，nodeValue待发掘
    }
  }
}

示例二（数据塞入）:

<template>
    <bot-answer ref="botAnswer" 
    	        show-type="carousel"
                @addDataPage="addDataPage">
        <div slot="empty">暂无数据</div>
    </bot-answer>		
</template>

export default {
  name: 'test-conponent',
  mounted () {
    this.$nextTick(() => {
        this.getData()
    })
  },
  methods: {
   getData () {
       const params = { ... }
       axios.post(url, params).then((res) => { 
           this.$refs.botAnswer.addData(res.data || ['1', '2', '3'] || [ {content: 'aa'}, {content: 'bb'}])
       })
   },
    addDataPage (page) {
       const params = { 
         baseReq: {
            page,
            ...
         },
         ... 
       }
       axios.post(url, params).then((res) => {
            const data = res.data  || ['1', '2', 3] || [ {content: 'aa'}, {content: 'bb'}]|| '一条数据'  
           this.$refs.botAnswer.addData(data, true) // 此处第二个参数必传true，
       })
    }
  }
}

示例三（搜索示例）:

<template>
  <div class="index-box">
    <div style="display: flex">
      <el-input v-model="kw"></el-input>
      <el-button @click="searchClick">搜索</el-button>
    </div>
    <bot-answer ref="botAnswer" @botLinkClick="botLinkClick" @addDataPage="addDataPage"></bot-answer>
  </div>
</template>

<script>
export default {
  name: 'searchPage',
  data () {
    return {
      kw: '腾讯的产品有哪些'
    }
  },
  mounted () {
    this.$nextTick(() => {
        this.addInit()
    })
  },
  methods: {
    searchClick () {
      this.addInit()
    },
    botLinkClick (kw, nodeValue) {
      console.log(kw, nodeValue)
    },
    setInit () {
      const data = {
        sysNum: '16722099167167534',
        inputMessage: { inQues: this.kw }
      }
      this.$refs.botAnswer.setParams(data)
    },
    addInit () {
      const result = [
         {
           msgType: 'richText',
           score: 100,
           content: '<!DOCTYPE html>\n' +
             '<html lang="en" >\n' +
             '<body>\n' +
             '<p></p>\n' +
             '\n' +
             '<div>\n' +
             '    为您找到共25条数据，共3页：<!DOCTYPE html>\n' +
             '<html lang="en">\n' +
             '<body>\n' +
             '<ul>\n' +
             '            <li>\n' +
             '                <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
             '                   question="腾讯$_$8">腾讯</a>\n' +
             '            </li>\n' +
             '            <li>\n' +
             '                <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
             '                   question="梨视频$_$13">梨视频</a>\n' +
             '            </li>\n' +
             '            <li>\n' +
             '                <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
             '                   question="VIPKID大米科技$_$19">VIPKID大米科技</a>\n' +
             '            </li>\n' +
             '            <li>\n' +
             '                <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
             '                   question="常山北明$_$20">常山北明</a>\n' +
             '            </li>\n' +
             '            <li>\n' +
             '                <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
             '                   question="小红书$_$21">小红书</a>\n' +
             '            </li>\n' +
             '            <li>\n' +
             '                <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
             '                   question="东华诚信$_$22">东华诚信</a>\n' +
             '            </li>\n' +
             '            <li>\n' +
             '                <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
             '                   question="东华软件$_$23">东华软件</a>\n' +
             '            </li>\n' +
             '            <li>\n' +
             '                <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
             '                   question="Newsdog$_$24">Newsdog</a>\n' +
             '            </li>\n' +
             '            <li>\n' +
             '                <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
             '                   question="新东方在线$_$25">新东方在线</a>\n' +
             '            </li>\n' +
             '            <li>\n' +
             '                <a href="javascript:void(0);" class="welcomeWords" title="点击查看"\n' +
             '                   question="SoundHound$_$26">SoundHound</a>\n' +
             '            </li>\n' +
             '</ul>\n' +
             '    <div class="btns-page">\n' +
             '            <div>[<span class="page-num">1</span>]</div>\n' +
             '            <div class="next" question="腾讯的产品有哪些" size="10" next-page="2">下一页</div>\n' +
             '    </div>\n' +
             '</body>\n' +
             '</html>\n' +
             '</div>\n' +
             '\n' +
             '</body>\n' +
             '</html>',
           showUrl: ''
         },
         {
           msgType: 'richText',
           score: 100,
           content: '<!DOCTYPE html>\n<html lang=\'en\' >\n<body>\n<p></p>\n\n<div>\n    为您找到共20条数据，共2页：<!DOCTYPE html>\n<html lang=\'en\'>\n<body>\n<ul>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'腾讯$_$8\'>腾讯</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'人人车$_$28\'>人人车</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'Marble$_$29\'>Marble</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'满帮集团$_$30\'>满帮集团</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'长亮科技$_$31\'>长亮科技</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'快手$_$32\'>快手</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'新乐视智家$_$33\'>新乐视智家</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'小象互娱$_$34\'>小象互娱</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'拼多多$_$35\'>拼多多</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'销售易CRM$_$36\'>销售易CRM</a>\n            </li>\n</ul>\n    <div class=\'btns-page\'>\n            <div class=\'prev\' question=\'腾讯的产品有哪些\' size=\'10\' prev-page=\'1\'>上一页</div>\n            <div>[<span class=\'page-num\'>2</span>]</div>\n            <div class=\'next\' question=\'腾讯的产品有哪些\' size=\'10\' next-page=\'3\'>下一页</div>\n    </div>\n</body>\n</html>\n</div>\n\n</body>\n</html>',
           showUrl: ''
         }
      ]
      this.$refs.botAnswer.addData(result)
    },
    addDataPage (page) {
      const result = [
        {
          msgType: 'richText',
          score: 100,
          content: '<!DOCTYPE html>\n<html lang=\'en\' >\n<body>\n<p></p>\n\n<div>\n    为您找到共25条数据，共3页：<!DOCTYPE html>\n<html lang=\'en\'>\n<body>\n<ul>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'腾讯$_$8\'>腾讯</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'人人车$_$28\'>人人车</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'Marble$_$29\'>Marble</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'满帮集团$_$30\'>满帮集团</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'长亮科技$_$31\'>长亮科技</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'快手$_$32\'>快手</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'新乐视智家$_$33\'>新乐视智家</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'小象互娱$_$34\'>小象互娱</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'拼多多$_$35\'>拼多多</a>\n            </li>\n            <li>\n                <a href=\'javascript:void(0);\' class=\'welcomeWords\' title=\'点击查看\'\n                   question=\'销售易CRM$_$36\'>销售易CRM</a>\n            </li>\n</ul>\n    <div class=\'btns-page\'>\n            <div class=\'prev\' question=\'腾讯的产品有哪些\' size=\'10\' prev-page=\'1\'>上一页</div>\n            <div>[<span class=\'page-num\'>2</span>]</div>\n            <div class=\'next\' question=\'腾讯的产品有哪些\' size=\'10\' next-page=\'3\'>下一页</div>\n    </div>\n</body>\n</html>\n</div>\n\n</body>\n</html>',
          showUrl: ''
        }
      ]
      this.$refs.botAnswer.addData(result, true)
    }
  }
}
</script>

vue vue-router vuex @babel/core @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining babel-loader

@everything-registry/sub-chunk-1256

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago