{label}
diff --git a/src/pages/View/Menu/components/AISettingDrawerButton/CheckBoxSelector/index.module.less b/src/components/CheckBoxSelector/index.module.less
similarity index 67%
rename from src/pages/View/Menu/components/AISettingDrawerButton/CheckBoxSelector/index.module.less
rename to src/components/CheckBoxSelector/index.module.less
index 17e2919..d440678 100644
--- a/src/pages/View/Menu/components/AISettingDrawerButton/CheckBoxSelector/index.module.less
+++ b/src/components/CheckBoxSelector/index.module.less
@@ -1,13 +1,20 @@
/**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
- .wrapper {
+
+.wrapper {
width: 100%;
display: flex;
flex-direction: row;
- align-items: flex-end;
- margin-bottom: 10px;
+ align-items: center;
+
+ .placeholder {
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 22px;
+ color: var(--text-color-text-3, rgba(115, 122, 135, 1));
+ }
.box {
margin-right: 16px;
@@ -63,12 +70,11 @@
flex-direction: row;
justify-content: flex-end;
align-items: center;
- padding-bottom: 16px;
+ gap: 12px;
.cancel {
width: 88px;
height: 32px;
- gap: 4px;
border-radius: 6px;
border: 1px solid var(--line-color-border-3, rgba(221, 226, 233, 1))
}
@@ -78,14 +84,46 @@
height: 32px;
border-radius: 6px;
background: linear-gradient(95.87deg, #1664FF 0%, #8040FF 97.7%);
- color: white;
+ color: white !important;
+ }
+
+ .confirm:hover {
+ opacity: .8;
+ }
+
+ .confirm:active {
+ opacity: 1;
}
}
.modalInner {
width: 100%;
+ // max-height: 500px;
display: flex;
flex: row;
flex-wrap: wrap;
+ overflow: auto;
gap: 12px;
+}
+
+.modal {
+ // max-height: 650px;
+ overflow: hidden;
+}
+
+.modalInner::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ border-radius: 5px;
+}
+
+.modalInner::-webkit-scrollbar-thumb {
+ background: rgb(205, 204, 204);
+ border-radius: 0px;
+ border-radius: 5px;
+}
+
+.modalInner::-webkit-scrollbar-track {
+ background: rgb(255, 255, 255);
+ border-radius: 0px;
}
\ No newline at end of file
diff --git a/src/pages/View/Menu/components/AISettingDrawerButton/CheckBoxSelector/index.tsx b/src/components/CheckBoxSelector/index.tsx
similarity index 51%
rename from src/pages/View/Menu/components/AISettingDrawerButton/CheckBoxSelector/index.tsx
rename to src/components/CheckBoxSelector/index.tsx
index 842ef3a..ad90f51 100644
--- a/src/pages/View/Menu/components/AISettingDrawerButton/CheckBoxSelector/index.tsx
+++ b/src/components/CheckBoxSelector/index.tsx
@@ -1,11 +1,13 @@
/**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
-import { useEffect, useMemo, useState } from 'react';
-import { Button, Modal } from 'antd';
+
+import { useEffect, useMemo, useState, memo } from 'react';
+import { Button, Drawer } from '@arco-design/web-react';
import CheckBox from '@/components/CheckBox';
import styles from './index.module.less';
+import utils from '@/utils/utils';
export interface ICheckBoxItemProps {
icon?: string;
@@ -21,44 +23,42 @@ interface IProps {
label?: string;
moreIcon?: string;
moreText?: string;
+ placeHolder?: string;
}
function CheckBoxSelector(props: IProps) {
- const { label = '', data = [], value, onChange, moreIcon, moreText } = props;
+ const { placeHolder, label = '', data = [], value, onChange, moreIcon, moreText } = props;
const [visible, setVisible] = useState(false);
const [selected, setSelected] = useState
(value!);
const selectedOne = useMemo(() => data.find((item) => item.key === value), [data, value]);
-
const handleSeeMore = () => {
setVisible(true);
};
-
useEffect(() => {
setSelected(value!);
- }, [visible, value]);
+ }, [visible]);
return (
-
- {selectedOne ? (
-
- ) : (
- ''
- )}
-
-
+
+ {selectedOne ? (
+
+ ) : (
+
{placeHolder}
+ )}
+
+
- // null
}
>
{data.map((item) => (
- setSelected(item.key)}
- />
+ setSelected(item.key)} />
))}
-
-
+ {tag ?
{tag}
: ''}
+
+ {icon ?
: ''}
+
{title}
+
+ {checked ?
: ''}
+
+
{btnSrc ?
: ''}
{btnText}
{suffix}
-
+
-
-
-
- {drawer?.children}
);
diff --git a/src/components/Header/index.module.less b/src/components/Header/index.module.less
index 6edd649..aa29e58 100644
--- a/src/components/Header/index.module.less
+++ b/src/components/Header/index.module.less
@@ -1,33 +1,48 @@
/**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
- .header {
+
+.header {
height: 48px;
background: white;
width: 100%;
display: flex;
align-items: center;
- padding-right: 8px;
- padding-left: 8px;
-
justify-content: space-between;
position: relative;
+
+ :global {
+ .arco-popover-content-top {
+ padding: 0px;
+ }
+ }
}
.header-logo {
display: flex;
align-items: center;
justify-content: space-between;
- padding-left: 16px;
+ margin-left: 24px;
:global {
img {
height: 24px;
}
+ .arco-popover-content {
+ padding: 0;
+ }
}
}
+.menu-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ row-gap: 8px;
+ justify-content: space-between;
+}
+
.header-logo-text {
background: linear-gradient(90deg, #004FFF 38.86%, #9865FF 100%);
-webkit-background-clip: text;
@@ -51,11 +66,10 @@
.header-setting-btn {
background-color: transparent;
border: none;
- margin-right: 12px;
- &:hover {
- background-color: transparent;
- cursor: pointer;
- }
+ margin-right: 24px;
+ color: #000000;
+ font-size: 16px;
+ cursor: pointer;
}
.header-pop {
@@ -110,5 +124,7 @@
}
.header-right-text {
- color: #86909c;
+ color: #000000;
+ margin-right: 24px;
+ cursor: pointer;
}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index fbd8ce2..f34dec5 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,12 +1,19 @@
/**
- * Copyright 2022 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
* SPDX-license-identifier: BSD-3-Clause
*/
-import { Divider } from 'antd';
-import { useTranslation } from 'react-i18next';
+
+import { Button, Divider, Popover } from '@arco-design/web-react';
+import { IconMenu } from '@arco-design/web-react/icon';
+import NetworkIndicator from '@/components/NetworkIndicator';
+import utils from '@/utils/utils';
import Logo from '@/assets/img/Logo.svg';
import styles from './index.module.less';
+const Disclaimer = 'https://www.volcengine.com/docs/6348/68916';
+const ReversoContext = 'https://www.volcengine.com/docs/6348/68918';
+const UserAgreement = 'https://www.volcengine.com/docs/6348/128955';
+
interface HeaderProps {
children?: React.ReactNode;
hide?: boolean;
@@ -14,7 +21,21 @@ interface HeaderProps {
function Header(props: HeaderProps) {
const { children, hide } = props;
- const { t } = useTranslation();
+
+ const MenuProps = [
+ {
+ name: '免责声明',
+ url: Disclaimer,
+ },
+ {
+ name: '隐私政策',
+ url: ReversoContext,
+ },
+ {
+ name: '用户协议',
+ url: UserAgreement,
+ },
+ ];
return (
+ {utils.isMobile() ? null : (
+
+ {MenuProps.map((menuItem) => (
+
+ ))}
+
+ }
+ >
+
+
+ )}
-
{t('demoTitle')}
+
实时对话式 AI 体验馆
+
{children}
+ {utils.isMobile() ? null : (
+
+
window.open('https://www.volcengine.com/product/veRTC/ConversationalAI', '_blank')}>
+ 官网链接
+
+
window.open('https://www.volcengine.com/contact/product?t=%E5%AF%B9%E8%AF%9D%E5%BC%8Fai&source=%E4%BA%A7%E5%93%81%E5%92%A8%E8%AF%A2', '_blank')}
+ >
+ 联系我们
+
+
);
}
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
new file mode 100644
index 0000000..6ac61be
--- /dev/null
+++ b/src/components/Icon/index.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2025 Beijing Volcano Engine Technology Co., Ltd. All Rights Reserved.
+ * SPDX-license-identifier: BSD-3-Clause
+ */
+
+import { useEffect, useRef } from 'react';
+
+const getDom = async (url: string) => {
+ const res = await fetch(url);
+ if (res) {
+ const text = await res.text();
+ // https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser
+ return new window.DOMParser().parseFromString(text, 'text/xml');
+ }
+ return undefined;
+};
+
+function MenuIcon({ src, className = '' }: { src: string; className?: string }) {
+ const wrapper = useRef