!2415 功能:登录界面新增联系客服功能

src/UI/Components/ChatButton.tsx

@@ -33,7 +33,7 @@ export const ChatReset = () =>
     document.title = "WebCAD";
 };
 
-export const ChatButton = () =>
+export const ChatButton = ({ isLoginInterface = false }) =>
 {
     const [load, setLoad] = useState(false);
     const configId = "c7b08187-4adb-40ec-9b08-588ca829099f";
@@ -58,7 +58,7 @@ export const ChatButton = () =>
         }
     };
 
-    function createEasemobim()
+    function createOrUpdateEasemobim()
     {
         const { username, password } = userConfig.chat;
         const login_name = localStorage.getItem(StoreageKeys.UserName);
@@ -92,23 +92,29 @@ export const ChatButton = () =>
                 email: "",
             },
         };
-        setLoad(true);
+        if (!isLoginInterface)
+            setLoad(true);
     }
 
     useEffect(() =>
     {
         let myScript;
-        if (!window["easemobim"] && userConfig.chat.timeStamp)
+        if (!window["easemobim"] && (userConfig.chat.timeStamp || isLoginInterface))
         {
             myScript = document.createElement("script");
+            myScript.id = "easemob";
             myScript.src = "https://kefu.easemob.com/webim/easemob.js";
             myScript.async = false;
             document.body.appendChild(myScript);
             myScript.onload = function ()
             {
-                createEasemobim();
+                createOrUpdateEasemobim();
             };
         }
+        else if (window["easemobim"])
+        {
+            createOrUpdateEasemobim();
+        }
 
         return () =>
         {
@@ -121,12 +127,12 @@ export const ChatButton = () =>
 
     return (
         <>
-            {load ? (
+            {load || isLoginInterface ? (
                 <Button
                     className={"TopPanel_Btn04"}
                     small={true}
-                    icon="people"
+                    icon={isLoginInterface ? null : "people"}
-                    text="在线客服"
+                    text={isLoginInterface ? "联系客服" : "在线客服"}
                     style={{ position: "relative" }}
                     intent={Intent.PRIMARY}
                     onClick={(e) =>
@@ -148,7 +154,8 @@ export const ChatButton = () =>
                                 }
                             }
 
-                            window["easemobim"].bind({
+                            const easemobim = window["easemobim"];
+                            easemobim.bind({
                                 configId,
                                 onmessage(message)
                                 {

src/UI/Components/MainContent/Login.tsx

@@ -13,6 +13,7 @@ import { FileServer } from '../../../DatabaseServices/FileServer';
 import { userConfig } from '../../../Editor/UserConfig';
 import { TopPanelStore } from '../../Store/TopPanelStore';
 import { userConfigStore } from '../../Store/UserConfigStore';
+import { ChatButton } from '../ChatButton';
 import { AppConfirm } from '../Common/Confirm';
 import GalleryStore from '../Gallery/GalleryStore';
 import { AppToaster } from '../Toaster';
@@ -243,7 +244,7 @@ export default class Login extends React.Component<{ store?: TopPanelStore; }, I
                             <img src={`${ResourcesCDN_HOST}wechat.webp`} alt="" />
                         </a>
                     </div>
-                    <div>
+                    <div className='account-operation'>
                         <a
                             style={{ textDecoration: 'underline', color: '#2d72d2', fontWeight: "bold" }}
                             target="_blank"
@@ -253,7 +254,10 @@ export default class Login extends React.Component<{ store?: TopPanelStore; }, I
                             target="_blank"
                             onClick={() => this.props.store.openRegist = true}>立即注册</a>
                     </div>
-                    <div>
+                    <div className='account-operation'>
+                        <ChatButton isLoginInterface={true} />
+                    </div>
+                    <div className='filing-number'>
                         <a target="_blank" href="https://beian.miit.gov.cn/">
                             <p>闽ICP备14007219号-4</p>
                         </a>

src/UI/Components/MainContent/MainContent.less

@@ -146,7 +146,7 @@
             }
         }
 
-        &>div:nth-child(6) {
+        .account-operation {
             padding: 0 40px;
             margin-top: 20px;
 
@@ -159,7 +159,7 @@
             justify-content: space-between;
         }
 
-        &>div:nth-child(7) {
+        .filing-number {
             position: absolute;
             width: 100%;
             text-align: center;

src/UI/Components/Panel.tsx

@@ -1,5 +1,5 @@
 import { Alignment, Button, Classes, HTMLSelect, Intent, Navbar, Position, ProgressBar, Switch, Tooltip } from '@blueprintjs/core';
-import { observable } from 'mobx';
+import { action, observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 import { end } from 'xaop';
@@ -91,6 +91,7 @@ export class TopPanel extends React.Component<{ store?: TopPanelStore; }, {}>
         }
         this.props.store.onToggleTheme();
     };
+    @action
     handleLoginOut = async () =>
     {
         if (!app.Saved)
@@ -98,13 +99,17 @@ export class TopPanel extends React.Component<{ store?: TopPanelStore; }, {}>
             let status = await AppConfirm.show({ message: "您当前图纸还未保存,是否继续?" });
             if (!status) return;
         }
-        this.props.store.isLogin = false;
         let data = await Post(SignUrl.loginOut);
         if (data.err_code === RequestStatus.Ok)
         {
             DownPanelStore.GetInstance().isLayout = false;
             userConfigStore.ClearUserData();
         }
+        if (IsOpenChat.get())
+        {
+            IsOpenChat.set(false);
+        }
+        this.props.store.isLogin = false;
     };
     render()
     {
@@ -155,7 +160,7 @@ export class TopPanel extends React.Component<{ store?: TopPanelStore; }, {}>
                                 onClick={() => window.open("https://jq.qq.com/?_wv=1027&k=GiGl8Vlp")}
                             />
                         }
-                        <ChatButton />
+                        {this.props.store.isLogin && <ChatButton />}
                         {
                             IsOpenChat.get() && <Button
                                 className={"TopPanel_Btn04"}