Skip to content

Commit fdde783

Browse files
author
dennis.zpf
committed
feat: 优化thought-chain组件
2 parents 87f6050 + ff07c9d commit fdde783

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1078
-523
lines changed

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

+93-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { MenuFoldOutlined } from '@ant-design/icons';
22
import { css } from '@emotion/react';
3+
import { Player } from '@galacean/effects';
34
import type { MenuProps } from 'antd';
45
import { Menu } from 'antd';
56
import {
@@ -11,7 +12,8 @@ import {
1112
useSiteData,
1213
} from 'dumi';
1314
import { INavItem } from 'dumi/dist/client/theme-api/types';
14-
import { useCallback, useContext } from 'react';
15+
import { motion } from 'framer-motion';
16+
import { useCallback, useContext, useEffect, useRef } from 'react';
1517
import useAdditionalThemeConfig from '../../hooks/useAdditionalThemeConfig';
1618
import useLocaleValue from '../../hooks/useLocaleValue';
1719
import useSiteToken from '../../hooks/useSiteToken';
@@ -79,6 +81,27 @@ const useStyle = () => {
7981
text-align: center;
8082
}
8183
`,
84+
navItem: css`
85+
position: relative;
86+
display: flex;
87+
align-items: center;
88+
justify-content: center;
89+
`,
90+
newPlayer: css`
91+
width: 100px;
92+
height: 100px;
93+
position: absolute;
94+
top: 12px;
95+
left: 50%;
96+
transform: translateX(-50%);
97+
z-index: 9;
98+
pointer-events: none;
99+
`,
100+
rightIcon: css`
101+
margin-left: 8px;
102+
width: 16px;
103+
height: 16px;
104+
`,
82105
popoverMenuNav: css`
83106
${antCls}-menu-item,
84107
${antCls}-menu-submenu {
@@ -112,23 +135,84 @@ export default function Navigation({ isMobile, responsive }: NavigationProps) {
112135
const locale = useLocale();
113136
const moreLinks = useLocaleValue('moreLinks');
114137
const activeMenuItem = pathname.split('/').slice(0, 2).join('/');
138+
const playerDom = useRef<HTMLDivElement>(null);
139+
const timers = useRef<NodeJS.Timeout[]>([]);
140+
141+
useEffect(() => {
142+
if (!playerDom.current) return;
143+
144+
const player = new Player({
145+
container: playerDom.current,
146+
});
147+
148+
const timer1 = setTimeout(() => {
149+
player.loadScene(
150+
'https://mdn.alipayobjects.com/mars/afts/file/A*wKDRRKoA9fcAAAAAAAAAAAAADlB4AQ'
151+
);
152+
player.play();
153+
const timer2 = setTimeout(() => {
154+
player.loadScene(
155+
'https://mdn.alipayobjects.com/mars/afts/file/A*wKDRRKoA9fcAAAAAAAAAAAAADlB4AQ'
156+
);
157+
player.play();
158+
timers.current.push(timer2);
159+
}, 10000);
160+
}, 3000);
161+
timers.current.push(timer1);
162+
return () => {
163+
timers.current.forEach((t) => {
164+
clearTimeout(t);
165+
});
166+
timers.current = [];
167+
};
168+
}, []);
115169

116170
const createMenuItems = (navs: INavItem[]) => {
171+
const style = useStyle();
117172
return navs.map((navItem: INavItem) => {
118173
const linkKeyValue = (navItem.link ?? '')
119174
.split('/')
120175
.slice(0, 2)
121176
.join('/');
122177
return {
123178
// eslint-disable-next-line no-nested-ternary
124-
label: navItem.children ? (
125-
navItem.title
126-
) : isExternalLinks(navItem.link) ? (
127-
<a href={`${navItem.link}${search}`} target="_blank" rel="noreferrer">
128-
{navItem.title}
129-
</a>
130-
) : (
131-
<Link to={`${navItem.link}${search}`}>{navItem.title}</Link>
179+
label: (
180+
<div css={style.navItem}>
181+
{navItem.children ? (
182+
navItem.title
183+
) : isExternalLinks(navItem.link) ? (
184+
<a
185+
href={`${navItem.link}${search}`}
186+
target="_blank"
187+
rel="noreferrer"
188+
>
189+
{navItem.title}
190+
</a>
191+
) : (
192+
<Link to={`${navItem.link}${search}`}>{navItem.title}</Link>
193+
)}
194+
{navItem.isNew ? (
195+
<div ref={playerDom} css={style.newPlayer}></div>
196+
) : null}
197+
{navItem.rightIcon && (
198+
<motion.div
199+
style={{ display: 'inline-block' }}
200+
animate={{
201+
rotate: [-5, 5, -5, 5, 0], // 轻微旋转
202+
x: [-2, 2, -2, 2, 0], // 轻微水平移动
203+
y: [-1, 1, -1, 1, 0], // 轻微垂直移动
204+
transition: {
205+
duration: 1.0, // 增加持续时间，使晃动更加平滑
206+
repeat: Infinity, // 无限循环
207+
ease: 'easeInOut', // 使用平滑的缓动函数
208+
repeatDelay: 3,
209+
},
210+
}}
211+
>
212+
<img css={style.rightIcon} src={navItem.rightIcon} alt="" />
213+
</motion.div>
214+
)}
215+
</div>
132216
),
133217
key: isExternalLinks(navItem.link) ? navItem.link : linkKeyValue,
134218
children: navItem.children ? createMenuItems(navItem.children) : null,

‎.dumirc.ts

+8-4
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,12 @@ export default defineConfig({
5757
link: '/components/overview',
5858
},
5959
{
60-
title: 'Copilot系列组件',
61-
link: '/copilots/copilot-overview',
60+
title: 'Copilot',
61+
link: '/copilots/conversations',
62+
// @ts-ignore
63+
isNew: true,
64+
rightIcon:
65+
'https://mdn.alipayobjects.com/huamei_2jrq4g/afts/img/A*iiKoT73_9ucAAAAAAAAAAAAAetF8AQ/original',
6266
},
6367
{
6468
title: '资源',
@@ -83,8 +87,8 @@ export default defineConfig({
8387
link: '/components/overview-en',
8488
},
8589
{
86-
title: 'Copilot Components',
87-
link: '/copilots/copilot-overview-en',
90+
title: 'Copilot',
91+
link: '/copilots/conversations-en',
8892
},
8993
{
9094
title: 'Resources',

‎copilot-demo/pages/Conversations/index.axml

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<view class="navigation-bar"/>
2+
3+
<ant-container title="基础用法">
4+
<ant-conversations
5+
items="{{items}}"
6+
menus="{{menus}}"
7+
onItemTap="handleItemTap"
8+
onMenuItemTap="handleMenuItemTap"
9+
/>
10+
</ant-container>
11+
12+
<!-- #if ALIPAY -->
13+
<ant-container title="自定义插槽">
14+
<ant-conversations
15+
items="{{items.slice(2,5)}}"
16+
menus="{{menus}}"
17+
onItemTap="handleItemTap"
18+
onMenuItemTap="handleMenuItemTap"
19+
>
20+
<view slot-scope="props">
21+
<view style="color: #1677ff;">{{props.item.label}}</view>
22+
<view style="color: #bbbbbb;">{{props.item.description}}</view>
23+
</view>
24+
</ant-conversations>
25+
</ant-container>
26+
<!-- #endif -->
27+
28+
<ant-container title="抽屉中展示">
29+
<ant-button onTap="handleOpenHistory" inline size="small">历史记录</ant-button>
30+
<ant-popup
31+
className="history-popup"
32+
visible="{{ visible }}"
33+
height="{{ 250 }}"
34+
width="{{ 250 }}"
35+
position="left"
36+
animation
37+
onClose="handlePopupClose"
38+
>
39+
<ant-conversations
40+
items="{{items}}"
41+
menus="{{menus}}"
42+
onItemTap="handleItemTap"
43+
onMenuItemTap="handleMenuItemTap"
44+
/>
45+
</ant-popup>
46+
</ant-container>

‎copilot-demo/pages/Conversations/index.json5

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
/// #if WECHAT
3+
"navigationBarTitleText": "Conversations",
4+
/// #endif
5+
6+
/// #if ALIPAY
7+
"defaultTitle": "Conversations",
8+
"transparentTitle": "auto",
9+
"titlePenetrate": "YES",
10+
/// #endif
11+
12+
"usingComponents": {
13+
"ant-container": "../../../src/Container/index",
14+
"ant-conversations": "../../../src/Conversations/index",
15+
"ant-popup": "../../../src/Popup/index",
16+
"ant-button": "../../../src/Button/index"
17+
}
18+
}

‎copilot-demo/pages/Conversations/index.less

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.history-popup {
2+
.ant-popup-transform-left {
3+
/// #if ALIPAY
4+
padding-top: 90px;
5+
/// #endif
6+
}
7+
}

‎copilot-demo/pages/Conversations/index.ts

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
Page({
2+
data: {
3+
visible: false,
4+
items: [
5+
{
6+
key: '1',
7+
label: '给我推荐一首歌',
8+
description: '这是会话的部分富文本信息描述',
9+
icon: 'https://randomuser.me/api/portraits/thumb/women/4.jpg',
10+
timestamp: '10:23',
11+
disabled: false,
12+
},
13+
{
14+
key: '2',
15+
label: '请根据图片里的提示，写一篇小学二年级的数学题目',
16+
description:
17+
'这首歌来自英国歌手艾德·希兰旋律轻快，歌曲写自上个世纪落日',
18+
icon: '',
19+
timestamp: '10:22',
20+
disabled: false,
21+
},
22+
{
23+
key: '3',
24+
label: '禁用无法点击此条',
25+
description: '这是会话的部分富文本信息描述',
26+
icon: '',
27+
timestamp: '10:21',
28+
disabled: true,
29+
},
30+
{
31+
key: '4',
32+
label: '菜单禁用无法滑动',
33+
description: '这是会话的部分富文本信息描述',
34+
icon: '',
35+
timestamp: '10:18',
36+
disabled: false,
37+
disabledMenu: true,
38+
},
39+
{
40+
key: '5',
41+
label: '给我推荐一首歌',
42+
description: '这是会话的部分富文本信息描述',
43+
icon: '',
44+
timestamp: '09:11',
45+
disabled: false,
46+
},
47+
],
48+
menus: [
49+
{
50+
text: '编辑',
51+
bgColor: '#FFA91B',
52+
color: '#fff',
53+
width: 160,
54+
},
55+
{
56+
text: '删除',
57+
bgColor: '#FF2B00',
58+
color: '#fff',
59+
width: 160,
60+
},
61+
],
62+
},
63+
handleItemTap(i) {
64+
let item = i;
65+
/// #if ALIPAY
66+
console.log(item);
67+
my.showToast({ content: item.key });
68+
/// #endif
69+
/// #if WECHAT
70+
item = i.detail[0];
71+
console.log(item);
72+
// @ts-ignore
73+
wx.showToast({ title: item.key });
74+
/// #endif
75+
},
76+
handleMenuItemTap(menuItem, item) {
77+
/// #if ALIPAY
78+
console.log(menuItem, item);
79+
my.showToast({ content: `菜单${menuItem.index}_列表项${item.key}` });
80+
/// #endif
81+
/// #if WECHAT
82+
console.log(menuItem.detail[0], menuItem.detail[1]);
83+
// @ts-ignore
84+
wx.showToast({
85+
title: `菜单${menuItem.detail[0].index}_列表项${menuItem.detail[1].key}`,
86+
});
87+
/// #endif
88+
},
89+
90+
handleOpenHistory() {
91+
this.setData({
92+
visible: true,
93+
});
94+
},
95+
handlePopupClose() {
96+
this.setData({
97+
visible: false,
98+
});
99+
},
100+
});

0 commit comments

Comments
 (0)