ant-design · coderrorer · Jan 24, 2025 · Nov 26, 2024 · Nov 26, 2024 · Nov 26, 2024
diff --git a/.dumi/theme/common/Sim/index.tsx b/.dumi/theme/common/Sim/index.tsx
@@ -44,7 +44,7 @@ function buildUrl(
 const DefaultPlatform = 'alipay';
 
 function getSupportPlatform(platform: string) {
-  const supportWechat = true
+  const supportWechat = true;
   if (!supportWechat && platform === 'wechat') {
     return {
       platform: DefaultPlatform,
@@ -83,7 +83,10 @@ const Previewer: React.FC<IProps> = () => {
   const matchedRoute = useMatchedRoute();
 
   const isShowSim = useMemo(() => {
-    return matchedRoute?.meta?.frontmatter?.nav?.path === '/components';
+    return (
+      matchedRoute?.meta?.frontmatter?.nav?.path === '/components' ||
+      matchedRoute?.meta?.frontmatter?.nav?.path === '/copilot'
+    );
   }, [matchedRoute]);
 
   const basicUrl =

diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx
@@ -110,12 +110,14 @@ const useStyle = ({ isOverview, isShowSim }) => {
 const Content: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const isOverview =
     window.location.pathname === '/components/overview' ||
-    window.location.pathname === '/components/overview-en';
+    window.location.pathname === '/components/overview-en' ||
+    window.location.pathname === '/copilots/copilot-overview' ||
+    window.location.pathname === '/copilots/copilot-overview-en';
 
   const matchedRoute = useMatchedRoute();
 
   const isShowSim = useMemo(() => {
-    return matchedRoute?.meta?.frontmatter?.nav?.path === '/components';
+    return matchedRoute?.meta?.frontmatter?.nav?.path === '/components' || matchedRoute?.meta?.frontmatter?.nav?.path === '/copilot';
   }, [matchedRoute]);
 
   const meta = useRouteMeta();

diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.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,8 @@ import {
   useSiteData,
 } from 'dumi';
 import { INavItem } from 'dumi/dist/client/theme-api/types';
-import { useCallback, useContext } from 'react';
+import { motion } from 'framer-motion';
+import { useCallback, useContext, useEffect, useRef } from 'react';
 import useAdditionalThemeConfig from '../../hooks/useAdditionalThemeConfig';
 import useLocaleValue from '../../hooks/useLocaleValue';
 import useSiteToken from '../../hooks/useSiteToken';
@@ -79,6 +81,27 @@ const useStyle = () => {
         text-align: center;
       }
     `,
+    navItem: css`
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `,
+    newPlayer: css`
+      width: 100px;
+      height: 100px;
+      position: absolute;
+      top: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 9;
+      pointer-events: none;
+    `,
+    rightIcon: css`
+      margin-left: 8px;
+      width: 16px;
+      height: 16px;
+    `,
     popoverMenuNav: css`
       ${antCls}-menu-item,
       ${antCls}-menu-submenu {
@@ -112,23 +135,84 @@ 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}
+            {navItem.rightIcon && (
+              <motion.div
+                style={{ display: 'inline-block' }}
+                animate={{
+                  rotate: [-5, 5, -5, 5, 0], // 轻微旋转
+                  x: [-2, 2, -2, 2, 0], // 轻微水平移动
+                  y: [-1, 1, -1, 1, 0], // 轻微垂直移动
+                  transition: {
+                    duration: 1.0, // 增加持续时间，使晃动更加平滑
+                    repeat: Infinity, // 无限循环
+                    ease: 'easeInOut', // 使用平滑的缓动函数
+                    repeatDelay: 3,
+                  },
+                }}
+              >
+                <img css={style.rightIcon} src={navItem.rightIcon} alt="" />
+              </motion.div>
+            )}
+          </div>
         ),
         key: isExternalLinks(navItem.link) ? navItem.link : linkKeyValue,
         children: navItem.children ? createMenuItems(navItem.children) : null,

diff --git a/.dumi/theme/slots/Sidebar/index.tsx b/.dumi/theme/slots/Sidebar/index.tsx
@@ -191,7 +191,7 @@ const useStyle = (isShowPlatfromSwitch) => {
         padding: 3px;
         .item {
           height: 27px;
-          border-radius:1px;
+          border-radius: 1px;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -250,7 +250,9 @@ const Sidebar: FC = () => {
     const { pathname } = window.location;
     return (
       pathname.startsWith('/components/') ||
-      matchedRoute?.meta?.frontmatter?.nav?.path === '/components'
+      matchedRoute?.meta?.frontmatter?.nav?.path === '/components' ||
+      pathname.startsWith('/copilots/') ||
+      matchedRoute?.meta?.frontmatter?.nav?.path === '/copilot'
     );
   }, [matchedRoute]);
 

diff --git a/.dumirc.ts b/.dumirc.ts
@@ -56,6 +56,14 @@ export default defineConfig({
           title: '组件',
           link: '/components/overview',
         },
+        {
+          title: 'Copilot',
+          link: '/copilots/conversations',
+          // @ts-ignore
+          isNew: true,
+          rightIcon:
+            'https://mdn.alipayobjects.com/huamei_2jrq4g/afts/img/A*iiKoT73_9ucAAAAAAAAAAAAAetF8AQ/original',
+        },
         {
           title: '资源',
           link: '/resources',
@@ -78,6 +86,10 @@ export default defineConfig({
           title: 'Components',
           link: '/components/overview-en',
         },
+        {
+          title: 'Copilot',
+          link: '/copilots/conversations-en',
+        },
         {
           title: 'Resources',
           link: '/resources-en',
@@ -563,4 +575,16 @@ export default defineConfig({
     { id: 'zh-CN', name: '中文', suffix: '' },
     { id: 'en', name: 'English', suffix: '-en' },
   ],
+  resolve: {
+    atomDirs: [
+      {
+        type: 'component',
+        dir: 'src',
+      },
+      {
+        type: 'copilot',
+        dir: 'copilot',
+      },
+    ],
+  },
 });
diff --git a/copilot-demo/pages/Actions/index.axml b/copilot-demo/pages/Actions/index.axml
@@ -0,0 +1,20 @@
+<ant-container title="基础用法">
+  <ant-actions items="{{basicActions}}" onItemTap="handleTapAction" />
+</ant-container>
+
+<ant-container title="配合bubble使用">
+  <ant-switch checked="{{ showBubble }}" onChange="toggleBubble" />
+  <ant-bubble
+    a:if="{{ showBubble }}"
+    content="永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。"
+    typing="{{ { step: 2, interval: 50 } }}"
+    onTypingComplete="onTypingComplete"
+  >
+    <ant-actions
+      a:if="{{ loaded }}"
+      slot="footer"
+      items="{{bubbleActions}}"
+      onItemTap="handleBubbleAction"
+    />
+  </ant-bubble>
+</ant-container>
diff --git a/copilot-demo/pages/Actions/index.json5 b/copilot-demo/pages/Actions/index.json5
@@ -0,0 +1,16 @@
+{
+  /// #if WECHAT
+  "navigationBarTitleText": "Actions",
+  /// #endif
+
+  /// #if ALIPAY
+  "defaultTitle": "Actions",
+  /// #endif
+
+  "usingComponents": {
+    "ant-actions": "../../../src/Actions/index",
+    "ant-bubble": "../../../src/Bubble/index",
+    "ant-switch": "../../../src/Switch/index",
+    "ant-container": "../../../src/Container/index"
+  }
+}
diff --git a/copilot-demo/pages/Actions/index.less b/copilot-demo/pages/Actions/index.less
diff --git a/copilot-demo/pages/Actions/index.ts b/copilot-demo/pages/Actions/index.ts
@@ -0,0 +1,94 @@
+Page({
+  data: {
+    liked: false,
+    loaded: false,
+    showBubble: true,
+    basicActions: [
+      {
+        label: 'copy',
+        icon: 'TextOutline',
+      },
+      {
+        label: 'like',
+        icon: 'LikeOutline',
+      },
+      {
+        label: 'collect',
+        icon: 'StarOutline',
+      },
+      {
+        label: 'edit',
+        icon: 'EditSOutline',
+      },
+    ],
+    bubbleActions: [
+      {
+        label: 'copy',
+        icon: 'TextOutline',
+      },
+      {
+        label: 'collect',
+        icon: 'StarOutline',
+      },
+    ],
+  },
+
+  handleTapAction(item) {
+    /// #if WECHAT
+    // @ts-ignore
+    item = item.detail;
+    /// #endif
+    const basicActions = [...this.data.basicActions];
+    if (item.label === 'like') {
+      this.setData({
+        liked: !this.data.liked,
+      });
+      basicActions.find((action) => action.label === 'like').icon = this.data.liked
+        ? 'https://mdn.alipayobjects.com/huamei_bsws4g/afts/img/JmVoRp-2UwMAAAAAAAAAAAAADoEQAQFr/original'
+        : 'LikeOutline';
+    } else {
+      /// #if ALIPAY
+      my.showToast({
+        content: `${item.label} tapped`,
+      });
+      /// #endif
+      /// #if WECHAT
+      // @ts-ignore
+      wx.showToast({
+        title: `${item.label} tapped`,
+      });
+      /// #endif
+    }
+    this.setData({
+      basicActions,
+    });
+  },
+  handleBubbleAction(item) {
+    /// #if WECHAT
+    // @ts-ignore
+    item = item.detail;
+    /// #endif
+    /// #if ALIPAY
+    my.showToast({
+      content: `${item.label} tapped`,
+    });
+    /// #endif
+    /// #if WECHAT
+    // @ts-ignore
+    wx.showToast({
+      title: `${item.label} tapped`,
+    });
+    /// #endif
+  },
+  onTypingComplete() {
+    this.setData({
+      loaded: true,
+    });
+  },
+  toggleBubble() {
+    this.setData({
+      showBubble: !this.data.showBubble,
+      loaded: false,
+    });
+  },
+});