copilot系列-思维链组件

.dumi/theme/slots/Header/Navigation.tsx

@@ -1,5 +1,6 @@
 import { MenuFoldOutlined } from '@ant-design/icons';
 import { css } from '@emotion/react';
+import { Player } from '@galacean/effects';
 import type { MenuProps } from 'antd';
 import { Menu } from 'antd';
 import {
@@ -11,7 +12,7 @@ import {
   useSiteData,
 } from 'dumi';
 import { INavItem } from 'dumi/dist/client/theme-api/types';
-import { useCallback, useContext } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'react';
 import useAdditionalThemeConfig from '../../hooks/useAdditionalThemeConfig';
 import useLocaleValue from '../../hooks/useLocaleValue';
 import useSiteToken from '../../hooks/useSiteToken';
@@ -79,6 +80,18 @@ const useStyle = () => {
         text-align: center;
       }
     `,
+    navItem: css`
+      position: relative;
+    `,
+    newPlayer: css`
+      width: 100px;
+      height: 100px;
+      position: absolute;
+      top: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 9;
+    `,
     popoverMenuNav: css`
       ${antCls}-menu-item,
       ${antCls}-menu-submenu {
@@ -112,23 +125,66 @@ export default function Navigation({ isMobile, responsive }: NavigationProps) {
   const locale = useLocale();
   const moreLinks = useLocaleValue('moreLinks');
   const activeMenuItem = pathname.split('/').slice(0, 2).join('/');
+  const playerDom = useRef<HTMLDivElement>(null);
+  const timers = useRef<NodeJS.Timeout[]>([]);
+
+  useEffect(() => {
+    if (!playerDom.current) return;
+
+    const player = new Player({
+      container: playerDom.current,
+    });
+
+    const timer1 = setTimeout(() => {
+      player.loadScene(
+        'https://mdn.alipayobjects.com/mars/afts/file/A*wKDRRKoA9fcAAAAAAAAAAAAADlB4AQ'
+      );
+      player.play();
+      const timer2 = setTimeout(() => {
+        player.loadScene(
+          'https://mdn.alipayobjects.com/mars/afts/file/A*wKDRRKoA9fcAAAAAAAAAAAAADlB4AQ'
+        );
+        player.play();
+        timers.current.push(timer2);
+      }, 10000);
+    }, 3000);
+    timers.current.push(timer1);
+    return () => {
+      timers.current.forEach((t) => {
+        clearTimeout(t);
+      });
+      timers.current = [];
+    };
+  }, []);
 
   const createMenuItems = (navs: INavItem[]) => {
+    const style = useStyle();
     return navs.map((navItem: INavItem) => {
       const linkKeyValue = (navItem.link ?? '')
         .split('/')
         .slice(0, 2)
         .join('/');
       return {
         // eslint-disable-next-line no-nested-ternary
-        label: navItem.children ? (
-          navItem.title
-        ) : isExternalLinks(navItem.link) ? (
-          <a href={`${navItem.link}${search}`} target="_blank" rel="noreferrer">
-            {navItem.title}
-          </a>
-        ) : (
-          <Link to={`${navItem.link}${search}`}>{navItem.title}</Link>
+        label: (
+          <div css={style.navItem}>
+            {navItem.children ? (
+              navItem.title
+            ) : isExternalLinks(navItem.link) ? (
+              <a
+                href={`${navItem.link}${search}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                {navItem.title}
+              </a>
+            ) : (
+              <Link to={`${navItem.link}${search}`}>{navItem.title}</Link>
+            )}
+            {navItem.isNew ? (
+              <div ref={playerDom} css={style.newPlayer}></div>
+            ) : null}
+          </div>
         ),
         key: isExternalLinks(navItem.link) ? navItem.link : linkKeyValue,
         children: navItem.children ? createMenuItems(navItem.children) : null,

.dumirc.ts

@@ -57,8 +57,10 @@ export default defineConfig({
           link: '/components/overview',
         },
         {
-          title: 'Copilot系列组件',
-          link: '/copilots/copilot-overview',
+          title: 'Copilot',
+          link: '/copilots/conversations',
+          // @ts-ignore
+          isNew: true,
         },
         {
           title: '资源',
@@ -83,8 +85,8 @@ export default defineConfig({
           link: '/components/overview-en',
         },
         {
-          title: 'Copilot Components',
-          link: '/copilots/copilot-overview-en',
+          title: 'Copilot',
+          link: '/copilots/conversations-en',
         },
         {
           title: 'Resources',

copilot-demo/pages/ThoughtChain/index.axml

@@ -0,0 +1,17 @@
+<view class="navigation-bar" />
+
+<ant-container title="基础用法">
+  <thought-chain list="{{basicList}}" onContentItemTap="onContentItemTap" />
+</ant-container>
+<ant-container title="二级节点">
+  <thought-chain list="{{secondLevelList}}" onContentItemTap="onContentItemTap" />
+</ant-container>
+<ant-container title="自定义节点内容">
+  <thought-chain list="{{customList}}" onContentItemTap="onContentItemTap">
+    <view slot="content" slot-scope="props">
+      <view a:if="{{props.contentType === 'customType'}}" style="color: red">
+        customType: {{props.content}}
+      </view>
+    </view>
+  </thought-chain>
+</ant-container>

copilot-demo/pages/ThoughtChain/index.json5

@@ -0,0 +1,15 @@
+{
+  /// #if WECHAT
+  "navigationBarTitleText": "ThoughtChain 组件",
+  /// #endif
+
+  /// #if ALIPAY
+  "defaultTitle": "ThoughtChain 组件",
+  /// #endif
+
+  "usingComponents": {
+    "ant-container": "../../../src/Container/index",
+    "thought-chain": "../../../src/ThoughtChain/index"
+  },
+  "transparentTitle": "always"
+}

copilot-demo/pages/ThoughtChain/index.less

@@ -0,0 +1,4 @@
+page {
+  // background: #f5f5f5;
+  padding: 12rpx;
+}

copilot-demo/pages/ThoughtChain/index.ts

@@ -0,0 +1,85 @@
+//@ts-ignore
+
+Page({
+  data: {
+    basicList: [
+      {
+        status: 'success',
+        title: '理解问题',
+      },
+      {
+        status: 'fail',
+        title: '没有在本地找到结果',
+      },
+      {
+        status: 'loading',
+        title: '在互联网上搜索问题',
+      },
+    ],
+    secondLevelList: [
+      {
+        status: 'success',
+        title: '理解问题',
+        content: '解析语法结构',
+        contentType: 'text',
+      },
+      {
+        status: 'loading',
+        title: '搜索问题',
+        list: [
+          {
+            status: 'success',
+            title: '理解问题',
+          },
+          {
+            status: 'success',
+            title: '联网搜索',
+            content: ['当前主流电脑配置', '黑神话悟空所需显卡', '3A游戏'],
+            contentType: 'tag',
+          },
+          {
+            status: 'success',
+            title: '已根据搜索结果精选3篇资料',
+            contentType: 'link',
+            content: [
+              '1. 黑神话悟空介绍',
+              '2. 对于1080p显示器，4060ti和4060该选哪个？',
+              '3. 黑神话悟空官方建议配置',
+            ],
+          },
+          {
+            status: 'loading',
+            title: '联想更多结果',
+          },
+        ],
+      },
+    ],
+    customList: [
+      {
+        status: 'success',
+        title: '理解问题',
+        content: '这是自定义样式的内容',
+        contentType: 'customType',
+      },
+      {
+        status: 'success',
+        title: '搜索问题',
+        list: [
+          {
+            status: 'success',
+            title:
+              '搜索中',
+            content: '子节点中的自定义内容',
+            contentType: 'customType',
+          },
+        ],
+      },
+    ],
+  },
+  onContentItemTap(e) {
+    const { content } = e.target.dataset || {};
+    my.alert({
+      content: `点击了内容「${content}」`,
+    });
+  },
+});

copilot/Conversations/index.md

@@ -2,7 +2,7 @@
 nav:
   path: /copilot
 group:
-  title: 通用
+  title: Copilot
   order: 1
 toc: 'content'
 ---
@@ -16,10 +16,10 @@ toc: 'content'
 ```json
 "usingComponents": {
 #if ALIPAY
-  "ant-prompts": "antd-mini/es/Conversations/index"
+  "ant-conversations": "antd-mini/es/Conversations/index"
 #endif
 #if WECHAT
-  "ant-prompts": "antd-mini/Conversations/index"
+  "ant-conversations": "antd-mini/Conversations/index"
 #endif
 }
 ```
@@ -29,18 +29,18 @@ toc: 'content'
 ### 基本使用
 
 ```xml
-  <ant-conversations
-    items="{{items}}"
-    menus="{{menus}}"
+<ant-conversations
+  items="{{items}}"
+  menus="{{menus}}"
 #if ALIPAY
-    onItemTap="handleItemTap"
-    onMenuItemTap="handleMenuItemTap"
+  onItemTap="handleItemTap"
+  onMenuItemTap="handleMenuItemTap"
 #endif
 #if WECHAT
-    binditemtap="handleItemTap"
-    bindmenuitemtap="handleMenuItemTap"
+  binditemtap="handleItemTap"
+  bindmenuitemtap="handleMenuItemTap"
 #endif
-  />
+/>
 ```
 
 ```js