更改客户端实现

SuanCaiYv · Jun 13, 2023 · f0b76b0 · f0b76b0
1 parent 0f99157
commit f0b76b0
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 50 deletions.
diff --git a/ui-prototype/public/assets/secret.png b/ui-prototype/public/assets/secret.png
diff --git a/ui-prototype/src/components/chat/ChatHeader.css b/ui-prototype/src/components/chat/ChatHeader.css
@@ -1,13 +1,13 @@
 .chat-header {
-    @apply w-full h-full grid select-none box-border overflow-y-hidden;
+    @apply w-full h-full grid select-none box-border overflow-y-hidden border-b;
     grid-area: chat-header;
     grid-template: "chat-header-remark chat-header-show-info" 1fr / 240px 1fr;
 }
 
 .chat-header-remark {
     @apply w-full h-full text-base font-semibold text-left box-border overflow-y-hidden text-black pl-5;
     grid-area: chat-header-remark;
-    line-height: 60px;
+    line-height: 64px;
 }
 
 .chat-header-show-info {

diff --git a/ui-prototype/src/components/chat/ChatInfo.css b/ui-prototype/src/components/chat/ChatInfo.css
@@ -1,5 +1,5 @@
 .chat-info {
-    @apply w-full h-full;
+    @apply w-full h-full overflow-y-scroll;
 }
 
 .with-info {
@@ -8,7 +8,7 @@
         "msg-list c-info"
         "input-area c-info";
     grid-template-columns: 1fr 240px;
-    grid-template-rows: calc(100%-260px) 260px;
+    grid-template-rows: 1fr 260px;
 }
 
 .without-info {
@@ -17,7 +17,7 @@
         "msg-list"
         "input-area";
     grid-template-columns: 1fr;
-    grid-template-rows: calc(100%-260)px 260px;
+    grid-template-rows: 1fr 260px;
 }
 
 .c-info {

diff --git a/ui-prototype/src/components/chat/ChatInfo.tsx b/ui-prototype/src/components/chat/ChatInfo.tsx
@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from 'react';
 import './ChatInfo.css'
 import { HttpClient } from '../../net/http';
 import { Context, GlobalContext } from '../../context/GlobalContext';
-import { alertComponentNormal } from '../portal/Portal';
+import { alertComponentNormal, operationResult } from '../portal/Portal';
 import { GROUP_ID_THRESHOLD } from '../../entity/msg';
 
 const SetGroupUser = (props: {
@@ -12,9 +12,13 @@ const SetGroupUser = (props: {
 }) => {
     let [setValue, setSetValue] = useState('SetAsAdminister');
 
-    const onClick1 = () => { }
+    const onClick1 = () => {
+        operationResult(true);
+    }
 
-    const onClick2 = () => { }
+    const onClick2 = () => {
+        operationResult(false);
+    }
 
     const onClick3 = () => { }
 
@@ -29,7 +33,7 @@ const SetGroupUser = (props: {
     return (
         <div className={'c-info-set'}>
             <div className={'c-info-set-btn'}>
-                <button>{setValue}</button>
+                <button onClick={onClick1}>{setValue}</button>
             </div>
             <div className={'c-info-set-btn'}>
                 <button onClick={onClick2}>Banishment</button>

diff --git a/ui-prototype/src/components/chat/Main.css b/ui-prototype/src/components/chat/Main.css
@@ -3,8 +3,8 @@
 }
 
 .chat-main {
-    @apply w-full h-full grid grid-cols-1 grid-rows-[64px,1fr] overflow-y-hidden;
-    grid-template-areas:
-        "chat-header"
-        "chat-info";
+    @apply w-full h-full grid overflow-y-hidden;
+    grid-template:
+        "chat-header" 64px
+        "chat-info" 1fr / 1fr;
 }
diff --git a/ui-prototype/src/components/chat/MsgList.tsx b/ui-prototype/src/components/chat/MsgList.tsx
@@ -1,13 +1,20 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Context, GlobalContext } from "../../context/GlobalContext";
 import MsgListItem from "./MsgListItem";
 import './MsgList.css';
 
 const MsgList = () => {
+    let listRef = React.createRef<HTMLDivElement>();
     let context = React.useContext(GlobalContext) as Context;
 
+    useEffect(() => {
+        if (listRef.current) {
+            listRef.current.scrollTop = listRef.current.scrollHeight
+        }
+    }, [context.currentChatMsgList])
+
     return (
-        <div className={'msg-list'}>
+        <div className={'msg-list'} ref={listRef}>
             <div className={'load-more'} onClick={() => {
                 context.loadMore();
             }}>LoadMore</div>

diff --git a/ui-prototype/src/components/chat/MsgListItem.css b/ui-prototype/src/components/chat/MsgListItem.css
@@ -53,7 +53,7 @@
 }
 
 .item-avatar {
-    @apply w-16 h-16 rounded-2xl text-base m-0 p-1 mt-2.5 box-border border-none;
+    @apply w-16 h-16 rounded-2xl text-base m-0 p-1 mt-2.5 box-border border-none select-none;
     grid-area: item-avatar;
 }
 

diff --git a/ui-prototype/src/components/portal/Portal.css b/ui-prototype/src/components/portal/Portal.css
@@ -14,10 +14,11 @@
 }
 
 .portal-operation-result {
-    @apply text-black font-bold text-lg z-20 absolute bg-neutral-400 h-14 w-80 rounded-xl text-center select-none shadow-xl;
+    @apply text-black font-bold text-lg z-20 absolute bg-white h-14 w-80 rounded-xl text-center select-none shadow-xl;
     left: 50%;
     transform: translate(-50%, 0);
     top: 5%;
+    line-height: 56px;
 }
 
 .portal-mask {

diff --git a/ui-prototype/src/components/portal/Portal.tsx b/ui-prototype/src/components/portal/Portal.tsx
@@ -3,7 +3,7 @@ import './Portal.css'
 
 const MessageMin = (props: {message: string}) => {
     const onMask = () => {
-        document.getElementById('portal')?.remove();
+        document.getElementById('portal1')?.remove();
     }
 
     return (
@@ -18,7 +18,7 @@ const MessageMin = (props: {message: string}) => {
 
 const ComponentNormal = (props: {component: any}) => {
     const onMask = () => {
-        document.getElementById('portal')?.remove();
+        document.getElementById('portal2')?.remove();
     }
 
     return (
@@ -33,7 +33,7 @@ const ComponentNormal = (props: {component: any}) => {
 
 const OperationResult = (props: {succeed: boolean}) => {
     const onMask = () => {
-        document.getElementById('portal')?.remove();
+        document.getElementById('portal3')?.remove();
     }
 
     return (
@@ -48,7 +48,7 @@ const OperationResult = (props: {succeed: boolean}) => {
 
 const alertMin = (message: string) => {
     let node = document.createElement('div')
-    node.setAttribute('id', 'portal')
+    node.setAttribute('id', 'portal1')
     document.getElementById('app')?.appendChild(node)
     let component = <MessageMin message={message} />
     createRoot(node).render(component)
@@ -65,12 +65,12 @@ const alertComponentMin = (component: any) => {}
 
 const alertComponentNormal = (cmt: any): Function => {
     let node = document.createElement('div')
-    node.setAttribute('id', 'portal')
+    node.setAttribute('id', 'portal2')
     document.getElementById('app')?.appendChild(node)
     let component = <ComponentNormal component={cmt} />
     createRoot(node).render(component)
     const onMask = () => {
-        document.getElementById('portal')?.remove();
+        document.getElementById('portal2')?.remove();
     }
     return onMask;
 }
@@ -84,14 +84,15 @@ const alertInteractiveMin = (component: any, onOk: () => Promise<void>, onCancel
 
 const operationResult = (succeed: boolean) => {
     let node = document.createElement('div')
-    node.setAttribute('id', 'portal')
+    node.setAttribute('id', 'portal3')
     document.getElementById('app')?.appendChild(node)
     let component = <OperationResult succeed={succeed} />
     createRoot(node).render(component)
     const onMask = () => {
-        document.getElementById('portal')?.remove();
+        document.getElementById('portal3')?.remove();
     }
+    setTimeout(onMask, 1000)
     return onMask;
 }
 
-export {alertMin, alertComponentNormal}
+export {alertMin, alertComponentNormal, operationResult}
diff --git a/ui-prototype/src/components/sign/Sign.tsx b/ui-prototype/src/components/sign/Sign.tsx
@@ -3,13 +3,14 @@ import { useNavigate } from "react-router-dom"
 import './Sign.css'
 import { Context, GlobalContext } from "../../context/GlobalContext"
 import { alertMin } from "../portal/Portal"
-import { HttpClient } from "../../net/http"
+import { HttpClient, setBaseUrl } from "../../net/http"
 import { KVDB } from "../../service/database"
 import { UserInfo } from "../../service/user/userInfo"
 
 export default function SignMain() {
     let [userId, setUserId] = useState("")
     let [credential, setCredential] = useState("")
+    let [secretPage, setSecretPage] = useState(false);
     let navigate = useNavigate()
     let context = useContext(GlobalContext) as Context;
 
@@ -54,33 +55,62 @@ export default function SignMain() {
     }
 
     const handleKeyDown = async (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.ctrlKey && e.key === 'm') {
+            setSecretPage(!secretPage);
+            return;
+        }
         if (e.key === 'Enter') {
-            await onLogin();
+            if (!secretPage) {
+                await onLogin();
+            } else {
+                setBaseUrl(credential);
+            }
         }
     }
 
     return (
-        <div className={'sign'} data-tauri-drag-region onKeyDown={handleKeyDown}>
-            <div className={'login-avatar'}>
-                <img src={'/assets/icon.png'} alt="" />
-            </div>
-            <div className={'login-user-id'}>
-                <input type="text" placeholder="AccountID" value={
-                    userId.length === 0 ? "" : userId + ""
-                } onChange={onUserIdChange} />
-            </div>
-            <div className={'login-credential'}>
-                <input type="password" placeholder="Credential" value={
-                    credential
-                } onChange={onCredentialChange} />
-            </div>
-            <div className={'login-a'}>
-                <a href="">New Here?</a>OR
-                <a href="">Forgot Credential</a>
+        secretPage ? (
+            <div className={'sign'} data-tauri-drag-region onKeyDown={handleKeyDown}>
+                <div className={'login-avatar'}>
+                    <img className={'bg-white'} src={'/assets/secret.png'} alt=""/>
+                </div>
+                <div className={'login-user-id'}>
+                </div>
+                <div className={'login-credential'}>
+                    <input type="text" placeholder="SecretAddress" value={
+                        credential
+                    } onChange={onCredentialChange} />
+                </div>
+                <div className={'login-a'}>
+                    <span className={'text-black text-lg font-semibold'}>Type In Your <strong>Secret</strong> Backend Address</span>
+                </div>
+                <div className="login-button">
+                    <button onClick={onLogin} className={'bg-gradient-to-r from-pink-300 from-10% via-indigo-300 via-30% to-sky-500 to-70%'}>Check In</button>
+                </div>
             </div>
-            <div className="login-button">
-                <button onClick={onLogin}>Log in</button>
+        ) : (
+            <div className={'sign'} data-tauri-drag-region onKeyDown={handleKeyDown}>
+                <div className={'login-avatar'}>
+                    <img src={'/assets/icon.png'} alt="" />
+                </div>
+                <div className={'login-user-id'}>
+                    <input type="text" placeholder="AccountID" value={
+                        userId.length === 0 ? "" : userId + ""
+                    } onChange={onUserIdChange} />
+                </div>
+                <div className={'login-credential'}>
+                    <input type="password" placeholder="Credential" value={
+                        credential
+                    } onChange={onCredentialChange} />
+                </div>
+                <div className={'login-a'}>
+                    <a href="">New Here?</a>OR
+                    <a href="">Forgot Credential</a>
+                </div>
+                <div className="login-button">
+                    <button onClick={onLogin}>Log in</button>
+                </div>
             </div>
-        </div>
+        )
     )
 }
diff --git a/ui-prototype/src/net/http.ts b/ui-prototype/src/net/http.ts
@@ -2,7 +2,7 @@ import { invoke } from "@tauri-apps/api"
 import Response from "../entity/http"
 import { KVDB } from "../service/database"
 
-export const BASE_URL = '127.0.0.1:11130'
+export let BASE_URL = '127.0.0.1:11130'
 
 class ResponseClass implements Response {
     ok: boolean
@@ -122,4 +122,8 @@ const dealResp = (resp: any | string): ResponseClass => {
     return r
 }
 
-export { ResponseClass, HttpClient }
+const setBaseUrl = (url: string) => {
+    BASE_URL = url
+}
+
+export { ResponseClass, HttpClient, setBaseUrl }