Skip to content

Commit 20ade85

Browse files
Siri-RaySiri-Ray
authored
Merge pull request #928 from Siri-Ray/fix/fe
Fix/Migration from Arco Design to Ant Design ＆ Support darkmode for scrollbar
1 parent d2ec162 commit 20ade85

File tree

58 files changed

+262
-230
lines changed

Some content is hidden

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

58 files changed

+262
-230
lines changed

‎apps/extension/src/components/content-selector/components/hover-menu/index.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React from 'react';
2-
import { Button } from '@arco-design/web-react';
2+
import { Button, message } from 'antd';
33
import { useTranslation } from 'react-i18next';
44
import { IconCopy, IconSave } from '@arco-design/web-react/icon';
5-
import { Message } from '@arco-design/web-react';
65
import { copyToClipboard } from '@refly-packages/ai-workspace-common/utils';
76
import { getSelectionNodesMarkdown } from '@refly/utils/html2md';
87

@@ -23,13 +22,13 @@ const HoverMenu: React.FC<HoverMenuProps> = React.memo(
2322
const selectedContent = getSelectionNodesMarkdown();
2423
if (selectedContent) {
2524
copyToClipboard(selectedContent);
26-
Message.success(t('extension.floatingSphere.copySuccess'));
25+
message.success(t('extension.floatingSphere.copySuccess'));
2726
onCopy?.();
2827
onRemove?.();
2928
}
3029
} catch (err) {
3130
console.error('Failed to copy content:', err);
32-
Message.error(t('extension.floatingSphere.copyError'));
31+
message.error(t('extension.floatingSphere.copyError'));
3332
}
3433
};
3534

‎apps/web/src/components/landing-page-partials/Footer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Logo from '@/assets/logo.svg';
33
import { useTranslation } from 'react-i18next';
44
import './footer.scss';
55
import { Button } from 'antd';
6-
import { IconDown } from '@arco-design/web-react/icon';
6+
import { DownOutlined } from '@ant-design/icons';
77
import { UILocaleList } from '@refly-packages/ai-workspace-common/components/ui-locale-list';
88
import { useAuthStoreShallow } from '@refly-packages/ai-workspace-common/stores/auth';
99
import {
@@ -169,7 +169,7 @@ function Footer() {
169169
>
170170
<IconLanguage className="h-4 w-4" />
171171
{t('language')}{' '}
172-
<IconDown className="ml-1 transition-transform duration-200 group-hover:rotate-180" />
172+
<DownOutlined className="ml-1 transition-transform duration-200 group-hover:rotate-180" />
173173
</Button>
174174
</UILocaleList>
175175
</div>

‎apps/web/src/components/layout/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Layout } from '@arco-design/web-react';
1+
import { Layout } from 'antd';
22
import { useMatch } from 'react-router-dom';
33
import { SiderLayout } from '@refly-packages/ai-workspace-common/components/sider/layout';
44
import { useBindCommands } from '@refly-packages/ai-workspace-common/hooks/use-bind-commands';

‎apps/web/src/pages/settings/index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useEffect } from 'react';
2-
import { Tabs } from '@arco-design/web-react';
2+
import { Tabs } from 'antd';
33
import { Helmet } from 'react-helmet';
44

55
// styles
@@ -19,7 +19,7 @@ import { MdOutlineSubscriptions } from 'react-icons/md';
1919

2020
import PageTitle from '@/pages/page-title';
2121

22-
const TabPane = Tabs.TabPane;
22+
const { TabPane } = Tabs;
2323
const iconStyle = { fontSize: 16, marginRight: 8 };
2424

2525
const Settings = () => {
@@ -47,11 +47,11 @@ const Settings = () => {
4747
</Helmet>
4848
<PageTitle title={t('settings.title')} />
4949
<div className="settings-inner-container pt-4">
50-
<Tabs activeTab={tab} tabPosition="left" size="large" onChange={handleTabChange}>
50+
<Tabs activeKey={tab} tabPosition="left" size="large" onChange={handleTabChange}>
5151
<TabPane
5252
key="account"
5353
className="settings-tab"
54-
title={
54+
tab={
5555
<span className="settings-tab-title">
5656
<RiAccountBoxLine style={iconStyle} />
5757
{t('settings.tabs.account')}
@@ -64,7 +64,7 @@ const Settings = () => {
6464
<TabPane
6565
key="subscription"
6666
className="settings-tab"
67-
title={
67+
tab={
6868
<span className="settings-tab-title">
6969
<MdOutlineSubscriptions style={iconStyle} />
7070
{t('settings.tabs.subscription')}
@@ -77,7 +77,7 @@ const Settings = () => {
7777
<TabPane
7878
key="language"
7979
className="settings-tab"
80-
title={
80+
tab={
8181
<span className="settings-tab-title">
8282
<HiOutlineLanguage style={iconStyle} />
8383
{t('settings.tabs.language')}

‎apps/web/src/pages/skill/index.tsx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ import { SkillInstanceList } from '@refly-packages/ai-workspace-common/component
88
import { useNavigate, useSearchParams } from '@refly-packages/ai-workspace-common/utils/router';
99
import './index.scss';
1010

11-
import { Radio } from '@arco-design/web-react';
12-
13-
const RadioGroup = Radio.Group;
11+
import { Radio } from 'antd';
1412

1513
const ContentHeader = (props: {
1614
val: string;
@@ -20,21 +18,22 @@ const ContentHeader = (props: {
2018
const { t } = useTranslation();
2119
return (
2220
<div className="skill-list__header flex items-center">
23-
<RadioGroup
24-
type="button"
21+
<Radio.Group
22+
buttonStyle="solid"
23+
optionType="button"
2524
size="large"
2625
className="skill-list__tabs"
2726
defaultValue={val}
2827
value={val}
29-
onChange={(val) => setVal(val)}
28+
onChange={(e) => setVal(e.target.value)}
3029
>
31-
<Radio value="instance" style={{ whiteSpace: 'nowrap' }}>
30+
<Radio.Button value="instance" style={{ whiteSpace: 'nowrap' }}>
3231
{t('skill.tab.skillInstances')}
33-
</Radio>
34-
<Radio value="template" style={{ whiteSpace: 'nowrap' }}>
32+
</Radio.Button>
33+
<Radio.Button value="template" style={{ whiteSpace: 'nowrap' }}>
3534
{t('skill.tab.skillTemplate')}
36-
</Radio>
37-
</RadioGroup>
35+
</Radio.Button>
36+
</Radio.Group>
3837
</div>
3938
);
4039
};

‎apps/web/src/styles/style.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,35 @@ select:focus {
6262
)::after {
6363
content: none !important;
6464
}
65+
66+
::-webkit-scrollbar {
67+
width: 8px;
68+
height: 8px;
69+
}
70+
71+
::-webkit-scrollbar-track {
72+
background: #f1f1f1;
73+
}
74+
75+
::-webkit-scrollbar-thumb {
76+
background: #c1c1c1;
77+
border-radius: 4px;
78+
}
79+
80+
::-webkit-scrollbar-thumb:hover {
81+
background: #a8a8a8;
82+
}
83+
84+
.dark {
85+
::-webkit-scrollbar-track {
86+
background: #2d2d2d;
87+
}
88+
89+
::-webkit-scrollbar-thumb {
90+
background: #555;
91+
}
92+
93+
::-webkit-scrollbar-thumb:hover {
94+
background: #777;
95+
}
96+
}

‎packages/ai-workspace-common/src/components/canvas/front-page/action.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Button, Tooltip, Switch } from 'antd';
22
import { memo, useMemo, useRef, useCallback } from 'react';
3-
import { IconLink, IconSend } from '@arco-design/web-react/icon';
3+
import { LinkOutlined, SendOutlined } from '@ant-design/icons';
44
import { useTranslation } from 'react-i18next';
55
import { useUserStoreShallow } from '@refly-packages/ai-workspace-common/stores/user';
66
import { getRuntime } from '@refly/utils/env';
@@ -94,7 +94,7 @@ export const Actions = memo(
9494
count: detectedUrls?.length,
9595
})}
9696
>
97-
<IconLink className="text-sm text-gray-500 flex items-center justify-center cursor-pointer" />
97+
<LinkOutlined className="text-sm text-gray-500 flex items-center justify-center cursor-pointer" />
9898
</Tooltip>
9999
</div>
100100
)}
@@ -117,7 +117,7 @@ export const Actions = memo(
117117
onClick={handleSendMessage}
118118
loading={loading}
119119
>
120-
<IconSend />
120+
<SendOutlined />
121121
<span>{t('copilot.chatActions.send')}</span>
122122
</Button>
123123
)}

‎packages/ai-workspace-common/src/components/canvas/launchpad/chat-actions/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Button, Tooltip, Upload, Switch, FormInstance } from 'antd';
22
import { memo, useMemo, useRef, useCallback } from 'react';
33
import { IconImage } from '@refly-packages/ai-workspace-common/components/common/icon';
4-
import { IconLink, IconSend } from '@arco-design/web-react/icon';
4+
import { LinkOutlined, SendOutlined } from '@ant-design/icons';
55
import { useTranslation } from 'react-i18next';
66
import { useUserStoreShallow } from '@refly-packages/ai-workspace-common/stores/user';
77
import { getRuntime } from '@refly/utils/env';
@@ -112,7 +112,7 @@ export const ChatActions = memo(
112112
count: detectedUrls?.length,
113113
})}
114114
>
115-
<IconLink className="text-sm text-gray-500 flex items-center justify-center cursor-pointer" />
115+
<LinkOutlined className="text-sm text-gray-500 flex items-center justify-center cursor-pointer" />
116116
</Tooltip>
117117
</div>
118118
)}
@@ -153,7 +153,7 @@ export const ChatActions = memo(
153153
className="text-xs flex items-center gap-1"
154154
onClick={handleSendClick}
155155
>
156-
<IconSend />
156+
<SendOutlined />
157157
<span>{t('copilot.chatActions.send')}</span>
158158
</Button>
159159
)}

‎packages/ai-workspace-common/src/components/canvas/launchpad/chat-actions/model-selector.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState, useMemo, useCallback, memo } from 'react';
22
import { Button, Divider, Dropdown, DropdownProps, MenuProps, Skeleton, Tooltip } from 'antd';
33
import { useTranslation } from 'react-i18next';
4-
import { IconDown } from '@arco-design/web-react/icon';
4+
import { DownOutlined } from '@ant-design/icons';
55
import { ModelIcon } from '@lobehub/icons';
66
import { getPopupContainer } from '@refly-packages/ai-workspace-common/utils/ui';
77
import { LLMModelConfig, ModelInfo, TokenUsageMeter } from '@refly/openapi-schema';
@@ -58,7 +58,7 @@ const SelectedModelDisplay = memo(
5858
icon={<ModelIcon model={model.name} type={'color'} />}
5959
>
6060
{model.label}
61-
<IconDown />
61+
<DownOutlined />
6262
</Button>
6363
);
6464
},

‎packages/ai-workspace-common/src/components/canvas/launchpad/chat-input.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { AutoComplete, AutoCompleteProps, Input } from 'antd';
22
import { memo, useRef, useMemo, useState, useCallback, forwardRef, useEffect } from 'react';
33
import { useTranslation } from 'react-i18next';
4-
import type { RefTextAreaType } from '@arco-design/web-react/es/Input/textarea';
4+
import type { TextAreaRef } from 'antd/es/input/TextArea';
55
import { useSearchStoreShallow } from '@refly-packages/ai-workspace-common/stores/search';
66
import type { Skill } from '@refly/openapi-schema';
77
import { useSkillStoreShallow } from '@refly-packages/ai-workspace-common/stores/skill';
@@ -55,7 +55,7 @@ const ChatInputComponent = forwardRef<HTMLDivElement, ChatInputProps>(
5555
setIsMac(navigator.platform.toUpperCase().indexOf('MAC') >= 0);
5656
}, []);
5757

58-
const inputRef = useRef<RefTextAreaType>(null);
58+
const inputRef = useRef<TextAreaRef>(null);
5959
const hasMatchedOptions = useRef(false);
6060

6161
const searchStore = useSearchStoreShallow((state) => ({

0 commit comments

Comments
 (0)