devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

next-admin支持AI问答模块，完全开源！

作者：2023面试高手 | 2024-05-15 13:36:11

赞

踩

next-admin支持AI问答模块，完全开源！

hello，大家好，我是徐小夕。之前和大家分享了很多可视化，零代码和前端工程化的最佳实践，今天继续分享一下最近开源的 Next-Admin 的最新更新。

876de17b67313cd3c66cd3851d917035.png

最近对这个项目做了一些优化，并集成了大家比较关注的AI问答模块，感兴趣的可以参考一下。

  • 开源地址：https://github.com/MrXujiang/next-admin

  • 在线demo：http://next-admin.com

目前已支持的功能模块有：

  • Next14.0 + antd5.0

  • 支持国际化

  • 支持主题切换

  • 内置数据可视化报表

  • 内置拖拽模块（多选，参考线，吸附等核心搭建能力）

  • 内置AI问答模块

  • 开箱即用的业务页面模板

  • 支持自定义拖拽看板

  • 集成办公白板

  • Next全栈最佳实践

  • 支持移动端和PC端自适应

  • 内置简单的JWT处理逻辑

往期精彩

demo演示

237ece9b7a1fa6041125c7f83bdc8adb.gif

深色模式：

f4400e7f83cd5381387a595a7fff3554.png

技术实现

问答模块目前已有比较成熟的组件，这里我选择 antd 旗下的 @ant-design/pro-chat,  这个组件我之前也有具体的分享，大家可以可以参考我往期的内容。

387728cf1dc95d17f91a7408cae256c7.png

接下来直接上代码：

  1. <ProChat
  2.     className={styles.chatWrap}
  3.     helloMessage={
  4.       <div className={styles.helloBox}>
  5.         <div>
  6.           hello, 欢迎体验 <strong>Nocode/WEP</strong> 文档引擎，我是你的AI智能助手，
  7.           有任何问题都可以和我提问，如果对产品有技术上或者体验上的问题，
  8.           欢迎关注 <Popover content={content}>
  9.                     <span className={styles.btn}>趣谈前端</span>
  10.                   </Popover> 
  11.           公众号 和作者反馈~
  12.         </div>
  13.       </div>
  14.     }
  15.     actions={{
  16.         render: (defaultDoms) => {
  17.           return [
  18.             <a
  19.               key="h5"
  20.               onClick={() => {
  21.                 window.open('https://dooring.vip');
  22.               }}
  23.             >
  24.               H5-Dooring零代码平台
  25.             </a>,
  26.             <a
  27.                 key="v6"
  28.                 onClick={() => {
  29.                     window.open('https://turntip.cn/');
  30.                 }}
  31.             >
  32.                 试卷搭建平台
  33.             </a>,
  34.             ...defaultDoms,
  35.           ];
  36.         },
  37.         flexConfig: {
  38.           gap: 24,
  39.           direction: 'horizontal',
  40.           justify: 'start',
  41.         },
  42.     }}
  43.     showTitle
  44.     assistantMeta={{ avatar: '
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/573084
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。