diff --git a/chat2db-client/src/assets/font/HarmonyOS_Sans_Regular.woff2 b/chat2db-client/src/assets/font/HarmonyOS_Sans_Regular.woff2 new file mode 100644 index 000000000..633a70c07 Binary files /dev/null and b/chat2db-client/src/assets/font/HarmonyOS_Sans_Regular.woff2 differ diff --git a/chat2db-client/src/components/OpenScreenAnimation/index.less b/chat2db-client/src/components/OpenScreenAnimation/index.less new file mode 100644 index 000000000..f3ef71651 --- /dev/null +++ b/chat2db-client/src/components/OpenScreenAnimation/index.less @@ -0,0 +1,48 @@ +.openScreenAnimation { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + // animation: disNone 0.666s 0.666s forwards; + background-color: var(--color-bg-base); + z-index: 100000; + + .textImg{ + line-height: 40px; + font-size: 45px; + font-weight: bold; + width: 200px; + height: 40px; + text-align: right; + } + + .brandName{ + width: 0; + display: flex; + justify-content: flex-end; + overflow: hidden; + animation: textAnimation 0.666s 0.333s ease-in-out forwards; + } +} + +@keyframes textAnimation { + 0% { + width: 0; + } + 100% { + width: 200px; + } +} + +@keyframes disNone { + 0% { + display: flex; + } + 100% { + display: none; + } +} diff --git a/chat2db-client/src/components/OpenScreenAnimation/index.tsx b/chat2db-client/src/components/OpenScreenAnimation/index.tsx new file mode 100644 index 000000000..854c30db3 --- /dev/null +++ b/chat2db-client/src/components/OpenScreenAnimation/index.tsx @@ -0,0 +1,20 @@ +import React, { memo } from 'react'; +import styles from './index.less'; +import classnames from 'classnames'; +import BrandLogo from '@/components/BrandLogo' + +interface IProps { + className?: string; +} + +export default memo((props) => { + const { className } = props; + return
+ +
+
+ Chat2DB +
+
+
+}); diff --git a/chat2db-client/src/components/SearchResult/hooks/useMultipleSelect.ts b/chat2db-client/src/components/SearchResult/hooks/useMultipleSelect.ts index 4ba5ce021..8b2bca11f 100644 --- a/chat2db-client/src/components/SearchResult/hooks/useMultipleSelect.ts +++ b/chat2db-client/src/components/SearchResult/hooks/useMultipleSelect.ts @@ -32,7 +32,7 @@ const useMultipleSelect = (props: { if (event.keyCode === 16) { isShiftDownRef.current = true; } - if (event.keyCode === 91) { + if (event.keyCode === 91 || event.keyCode === 17) { isCmdDownRef.current = true; } }; diff --git a/chat2db-client/src/hooks/usePollRequestService.ts b/chat2db-client/src/hooks/usePollRequestService.ts index a4cdb322f..ce4d3e475 100644 --- a/chat2db-client/src/hooks/usePollRequestService.ts +++ b/chat2db-client/src/hooks/usePollRequestService.ts @@ -22,6 +22,7 @@ const usePollRequestService = ({ maxAttempts = 200, interval = 200, loopService const [serviceStatus, setServiceStatus] = useState(ServiceStatus.PENDING); const [restart, setRestart] = useState(false); const attempts = useRef(0); + const startupDate = useRef(new Date().getTime()); const serviceFn = async () => { // The first request fails. Start the service @@ -35,7 +36,10 @@ const usePollRequestService = ({ maxAttempts = 200, interval = 200, loopService attempts.current = attempts.current + 1; loopService().then((res) => { if (res) { - setServiceStatus(ServiceStatus.SUCCESS); + const now = new Date().getTime(); + setTimeout(() => { + setServiceStatus(ServiceStatus.SUCCESS); + }, startupDate.current + 1000 - now); } }) .catch(() => { diff --git a/chat2db-client/src/layouts/GlobalLayout/index.tsx b/chat2db-client/src/layouts/GlobalLayout/index.tsx index 5b11e1904..9ca5dd2eb 100644 --- a/chat2db-client/src/layouts/GlobalLayout/index.tsx +++ b/chat2db-client/src/layouts/GlobalLayout/index.tsx @@ -16,6 +16,7 @@ import GlobalComponent from '../init/GlobalComponent'; import styles from './index.less'; import { useUserStore, queryCurUser } from '@/store/user'; import AppTitleBar from '@/blocks/AppTitleBar'; +import OpenScreenAnimation from '@/components/OpenScreenAnimation'; const GlobalLayout = () => { const [appTheme, setAppTheme] = useTheme(); @@ -62,14 +63,14 @@ const GlobalLayout = () => { }; // 等待状态页面 - if (serviceStatus === ServiceStatus.PENDING || curUser === null) { - return ( -
- - ; -
- ); - } + // if (serviceStatus === ServiceStatus.PENDING || curUser === null) { + // return ( + //
+ // + // + //
+ // ); + // } // 错误状态页面 if (serviceStatus === ServiceStatus.FAILURE) { @@ -99,6 +100,8 @@ const GlobalLayout = () => { return (
+ {/* Open screen animation */} + {(serviceStatus === ServiceStatus.PENDING || curUser === null) && }
diff --git a/chat2db-client/src/pages/demo/index.tsx b/chat2db-client/src/pages/demo/index.tsx index 928444df6..aceb18934 100644 --- a/chat2db-client/src/pages/demo/index.tsx +++ b/chat2db-client/src/pages/demo/index.tsx @@ -1,15 +1,16 @@ import React, { useEffect } from 'react'; +import OpenScreenAnimation from '@/components/OpenScreenAnimation'; function Test() { - const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOjIsImRldmljZSI6ImRlZmF1bHQtZGV2aWNlIiwiZWZmIjoxNzA2ODU0NTMwMDI3LCJyblN0ciI6Ik1RcHRPOUVBVlJlbGRQa1RFN01MZUpLeG5KTGVwRFpaIn0.knOw08E6mwWF_GpkeQ8KflQlfQuNu4jd-_Bgh7EnCj4' - useEffect(() => { - const socket = new WebSocket(`ws://127.0.0.1:10821/api/ws/${token}`); - socket.onopen = () => { - console.log('open'); - socket.send('hello'); - }; - }, []); - return (false); + // const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOjIsImRldmljZSI6ImRlZmF1bHQtZGV2aWNlIiwiZWZmIjoxNzA2ODU0NTMwMDI3LCJyblN0ciI6Ik1RcHRPOUVBVlJlbGRQa1RFN01MZUpLeG5KTGVwRFpaIn0.knOw08E6mwWF_GpkeQ8KflQlfQuNu4jd-_Bgh7EnCj4' + // useEffect(() => { + // const socket = new WebSocket(`ws://127.0.0.1:10821/api/ws/${token}`); + // socket.onopen = () => { + // console.log('open'); + // socket.send('hello'); + // }; + // }, []); + return ; } export default Test; diff --git a/chat2db-client/src/styles/antd.less b/chat2db-client/src/styles/antd.less index 0cf848600..dd102cb28 100644 --- a/chat2db-client/src/styles/antd.less +++ b/chat2db-client/src/styles/antd.less @@ -1,5 +1,10 @@ :root { :global { + // 覆盖antd 的一些样式 + button { + box-shadow: none !important; + } + // There is some animation when switching the theme color causing a delay in switching background .ant-input, .ant-input-password { diff --git a/chat2db-client/src/styles/global.less b/chat2db-client/src/styles/global.less index 821ca6435..3b64740ce 100644 --- a/chat2db-client/src/styles/global.less +++ b/chat2db-client/src/styles/global.less @@ -2,12 +2,21 @@ @import '../theme/custom/light.less'; @import './antd.less'; +@font-face { + font-family: 'HarmonyOS_Sans'; + src: url('../assets/font/HarmonyOS_Sans_Regular.woff2') format('woff2'); +} + html, body { height: 100%; color: var(--color-text); font-size: var(--font-size); background-color: var(--color-bg-base); + font-family: 'HarmonyOS_Sans', 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, + Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, 'HarmonyOS Sans SC', 'PingFang SC', 'Hiragino Sans GB', + 'Microsoft Yahei UI', 'Microsoft Yahei', 'Source Han Sans CN', sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji'; } // 修改账号密码自动回填后input背景变色问题 @@ -139,9 +148,3 @@ ol, li { list-style: none; } - -// 覆盖antd 的一些样式 - -button { - box-shadow: none !important; -} \ No newline at end of file