Merge pull request #1108 from chat2db/dev

Dev

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;
+  }
+}

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<IProps>((props) => {
+  const { className } = props;
+  return <div className={classnames(styles.openScreenAnimation, className)}>
+    <BrandLogo size={80} className={styles.brandLogo} />
+    <div className={styles.brandName}>
+      <div className={styles.textImg}>
+        Chat2DB
+      </div>
+    </div>
+  </div>
+});

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;
       }
     };

chat2db-client/src/hooks/usePollRequestService.ts

@@ -22,6 +22,7 @@ const usePollRequestService = ({ maxAttempts = 200, interval = 200, loopService
   const [serviceStatus, setServiceStatus] = useState<ServiceStatus>(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(() => {

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 (
-      <div className={styles.app}>
-        <AppTitleBar className={styles.appTitleBar} />
-        <Spin className={styles.loadingBox} size="large" />;
-      </div>
-    );
-  }
+  // if (serviceStatus === ServiceStatus.PENDING || curUser === null) {
+  //   return (
+  //     <div className={styles.app}>
+  //       <AppTitleBar className={styles.appTitleBar} />
+  //       <Spin className={styles.loadingBox} size="large" />
+  //     </div>
+  //   );
+  // }
 
   // 错误状态页面
   if (serviceStatus === ServiceStatus.FAILURE) {
@@ -99,6 +100,8 @@ const GlobalLayout = () => {
   return (
     <ConfigProvider locale={isEn ? antdEnUS : antdZhCN} theme={antdTheme}>
       <div className={styles.app}>
+        {/* Open screen animation  */}
+        {(serviceStatus === ServiceStatus.PENDING || curUser === null) && <OpenScreenAnimation />}
         <AppTitleBar className={styles.appTitleBar} />
         <div className={styles.appBody}>
           <Outlet />

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 <OpenScreenAnimation />;
 }
 
 export default Test;

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 {

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;
-}