更改客户端实现

SuanCaiYv · Jun 8, 2023 · d6eabb0 · d6eabb0
1 parent 93cf392
commit d6eabb0
Show file tree

Hide file tree

Showing 24 changed files with 164 additions and 100 deletions.
diff --git a/ui-prototype/index.html b/ui-prototype/index.html
@@ -1,13 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PRIM</title>
-  </head>
-  <body>
-    <div id="root"></div>
+    <style>
+        .title-bar {
+            height: 30px;
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="root" data-tauri-drag-region></div>
     <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/ui-prototype/src-tauri/Cargo.toml b/ui-prototype/src-tauri/Cargo.toml
@@ -18,7 +18,7 @@ tauri-build = { version = "1.3.0", features = [] }
 lib = {path = "../../server/lib"}
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2.1", features = [] }
+tauri = { version = "1.2.1", features = ["window-start-dragging"] }
 tokio = {version = "1.20.0", features = ["full"] }
 base64 = "0.13.0"
 lazy_static = "1.4.0"

diff --git a/ui-prototype/src-tauri/tauri.conf.json b/ui-prototype/src-tauri/tauri.conf.json
@@ -1,66 +1,100 @@
 {
-  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
-  "build": {
-    "beforeBuildCommand": "yarn run build",
-    "beforeDevCommand": "yarn run dev",
-    "devPath": "http://localhost:4000",
-    "distDir": "../build"
-  },
-  "package": {
-    "productName": "ui-prototype",
-    "version": "0.1.0"
-  },
-  "tauri": {
-    "allowlist": {
-      "all": false
+    "$schema": "../node_modules/@tauri-apps/cli/schema.json",
+    "build": {
+        "beforeBuildCommand": "yarn run build",
+        "beforeDevCommand": "yarn run dev",
+        "devPath": "http://localhost:4000",
+        "distDir": "../build"
     },
-    "bundle": {
-      "active": true,
-      "category": "DeveloperTool",
-      "copyright": "",
-      "deb": {
-        "depends": []
-      },
-      "externalBin": [],
-      "icon": [
-        "icons/32x32.png",
-        "icons/128x128.png",
-        "icons/[email protected]",
-        "icons/icon.icns",
-        "icons/icon.ico"
-      ],
-      "identifier": "com.tauri.dev",
-      "longDescription": "",
-      "macOS": {
-        "entitlements": null,
-        "exceptionDomain": "",
-        "frameworks": [],
-        "providerShortName": null,
-        "signingIdentity": null
-      },
-      "resources": [],
-      "shortDescription": "",
-      "targets": "all",
-      "windows": {
-        "certificateThumbprint": null,
-        "digestAlgorithm": "sha256",
-        "timestampUrl": ""
-      }
+    "package": {
+        "productName": "ui-prototype",
+        "version": "0.1.0"
     },
-    "security": {
-      "csp": null
-    },
-    "updater": {
-      "active": false
-    },
-    "windows": [
-      {
-        "fullscreen": false,
-        "height": 1200,
-        "resizable": true,
-        "title": "ui-prototype",
-        "width": 1600
-      }
-    ]
-  }
-}
+    "tauri": {
+        "allowlist": {
+            "all": false,
+            "window": {
+                "all": false,
+                "center": false,
+                "close": false,
+                "create": false,
+                "hide": false,
+                "maximize": false,
+                "minimize": false,
+                "print": false,
+                "requestUserAttention": false,
+                "setAlwaysOnTop": false,
+                "setContentProtected": false,
+                "setCursorGrab": false,
+                "setCursorIcon": false,
+                "setCursorPosition": false,
+                "setCursorVisible": false,
+                "setDecorations": false,
+                "setFocus": false,
+                "setFullscreen": false,
+                "setIcon": false,
+                "setIgnoreCursorEvents": false,
+                "setMaxSize": false,
+                "setMinSize": false,
+                "setPosition": false,
+                "setResizable": false,
+                "setSize": false,
+                "setSkipTaskbar": false,
+                "setTitle": false,
+                "show": false,
+                "startDragging": true,
+                "unmaximize": false,
+                "unminimize": false
+            }
+        },
+        "bundle": {
+            "active": true,
+            "category": "DeveloperTool",
+            "copyright": "",
+            "deb": {
+                "depends": []
+            },
+            "externalBin": [],
+            "icon": [
+                "icons/32x32.png",
+                "icons/128x128.png",
+                "icons/[email protected]",
+                "icons/icon.icns",
+                "icons/icon.ico"
+            ],
+            "identifier": "com.tauri.dev",
+            "longDescription": "",
+            "macOS": {
+                "entitlements": null,
+                "exceptionDomain": "",
+                "frameworks": [],
+                "providerShortName": null,
+                "signingIdentity": null
+            },
+            "resources": [],
+            "shortDescription": "",
+            "targets": "all",
+            "windows": {
+                "certificateThumbprint": null,
+                "digestAlgorithm": "sha256",
+                "timestampUrl": ""
+            }
+        },
+        "security": {
+            "csp": null
+        },
+        "updater": {
+            "active": false
+        },
+        "windows": [
+            {
+                "fullscreen": false,
+                "width": 1600,
+                "height": 1200,
+                "resizable": true,
+                "title": "",
+                "titleBarStyle": "Overlay"
+            }
+        ]
+    }
+}
diff --git a/ui-prototype/src/App.css b/ui-prototype/src/App.css
@@ -3,5 +3,5 @@
 }
 
 html, body {
-  @apply w-full h-full m-0 p-0;
+  @apply w-full h-full m-0 p-0 overflow-hidden;
 }
diff --git a/ui-prototype/src/App.tsx b/ui-prototype/src/App.tsx
@@ -122,6 +122,7 @@ function App() {
         userMsgList.current = newList;
         setUserMsgListRender(userMsgList.current);
         await saveUserMsgList();
+        console.log(userMsgList.current);
     }
 
     const pushMsgMap = async (msg: Msg) => {
@@ -624,7 +625,7 @@ function App() {
     }, []);
 
     return (
-        <div id={'app'}>
+        <div id={'app'} data-tauri-drag-region>
             <GlobalContext.Provider value={{
                 userMsgList: userMsgListRender,
                 userId: userIdRender,

diff --git a/ui-prototype/src/components/Header.css b/ui-prototype/src/components/Header.css
@@ -1,12 +1,13 @@
 .header {
-    @apply h-full grid grid-cols-[240px,60px,120px,120px,120px,120px,1fr] grid-rows-1 select-none bg-neutral-200 dark:bg-neutral-800;
+    @apply h-full grid grid-cols-[240px,60px,120px,120px,120px,120px,1fr] grid-rows-1 select-none
+    bg-gradient-to-r from-pink-100 from-30% via-sky-200 via-55% to-indigo-100 to-80%;
     grid-area: header;
     grid-template-areas: "search add chat contacts more test-btn user";
 }
 
 .test-btn {
     @apply flex items-center justify-center w-20 h-10 m-auto border-none bg-purple-200 dark:bg-neutral-800 rounded-3xl font-bold grid-cols-1
-    bg-gradient-to-r from-pink-300 from-30% via-sky-500 via-55% to-indigo-500 to-80%
+    bg-gradient-to-r from-pink-300 from-30% via-sky-500 via-55% to-indigo-500 to-80%;
 }
 
 .test-btn:hover {

diff --git a/ui-prototype/src/components/Header.tsx b/ui-prototype/src/components/Header.tsx
@@ -32,13 +32,13 @@ class Header extends React.Component<Props, State> {
 
     render(): ReactNode {
         return (
-            <div className="header">
+            <div className="header" data-tauri-drag-region>
                 <Search></Search>
                 <Add></Add>
                 <Chat clicked={this.state.clicked} onClick={this.onClick}></Chat>
                 <Contacts clicked={this.state.clicked} onClick={this.onClick}></Contacts>
                 <More clicked={this.state.clicked} onClick={this.onClick}></More>
-                <Link className={'test-btn'} to={'/t'}>Test</Link>
+                <Link className={'test-btn'} to={'/t'} data-tauri-drag-region>Test</Link>
                 <User></User>
             </div>
         )

diff --git a/ui-prototype/src/components/Layout.tsx b/ui-prototype/src/components/Layout.tsx
@@ -2,7 +2,7 @@ import './Layout.css'
 
 function Layout(props: any) {
     return (
-        <div className="layout">
+        <div className="layout" data-tauri-drag-region>
             {props.children}
         </div>
     )

diff --git a/ui-prototype/src/components/chat/Main.tsx b/ui-prototype/src/components/chat/Main.tsx
@@ -26,7 +26,7 @@ export default function ChatMain() {
     }, [context.userMsgList])
 
     return (
-        <div className={'chat'}>
+        <div className={'chat'} data-tauri-drag-region>
             <Layout>
                 <Header clicked='chat'></Header>
                 <List ref={listRef}>

diff --git a/ui-prototype/src/components/chat/MsgListItem.css b/ui-prototype/src/components/chat/MsgListItem.css
@@ -2,14 +2,14 @@
     @apply w-full grid m-0 mb-2.5;
     min-height: 64px;
     grid-template:
-        "item-avatar item-content-left ." 1fr / 64px 320px 1fr;
+        ". item-avatar item-content-left ." 1fr / 8px 64px 320px 1fr;
 }
 
 .msg-list-item-right {
     @apply w-full grid m-0 mb-2.5;
     min-height: 64px;
     grid-template:
-        ". item-content-right item-avatar" 1fr / 1fr 380px 64px;
+        ". item-content-right item-avatar ." 1fr / 1fr 380px 64px 8px;
 }
 
 .item-content-left {
@@ -45,18 +45,23 @@
 }
 
 .content-left {
-    @apply w-fit rounded-md text-black box-border bg-neutral-200 mt-2.5 px-2.5 float-left select-all font-bold;
+    @apply w-fit rounded-xl text-black box-border bg-neutral-200 mt-2.5 px-2.5 float-left select-all font-bold;
 }
 
 .content-right {
-    @apply w-fit rounded-md text-white box-border bg-blue-500 mt-2.5 px-2.5 float-right select-all font-bold;
+    @apply w-fit rounded-xl text-white box-border bg-blue-500 mt-2.5 px-2.5 float-right select-all font-bold;
 }
 
 .item-avatar {
     @apply w-16 h-16 rounded-2xl text-base m-0 p-1 mt-2.5 box-border border-none;
     grid-area: item-avatar;
 }
 
+.item-avatar img {
+    @apply w-full h-full rounded-full
+    bg-gradient-to-r from-rose-300 from-10% via-purple-400 via-55% to-teal-300 to-80%;
+}
+
 .waiting-block {
     @apply w-9 h-9 float-right text-center text-red-500 select-none;
 }

diff --git a/ui-prototype/src/components/chat/MsgListItem.tsx b/ui-prototype/src/components/chat/MsgListItem.tsx
@@ -82,11 +82,15 @@ const MsgListItem = (props: {
                         }
                     </span>
                 </div>
-                <img className={'item-avatar'} src={avatar} alt="" />
+                <div className={'item-avatar'}>
+                    <img src={avatar} alt="" />
+                </div>
             </div>
         ) : (
             <div className={'msg-list-item-left'}>
-                <img className={'item-avatar'} src={avatar} alt="" />
+                <div className={'item-avatar'}>
+                    <img src={avatar} alt="" />
+                </div>
                 <div className={'item-content-left'}>
                     {
                         remark !== '' ? (

diff --git a/ui-prototype/src/components/chat/UserMsgListItem.css b/ui-prototype/src/components/chat/UserMsgListItem.css
@@ -6,10 +6,15 @@
 }
 
 .u-m-l-item-avatar {
-    @apply w-full h-full m-0 p-1 border-none box-border rounded-full;
+    @apply w-full h-full border-none box-border rounded-full p-1;
     grid-area: u-m-l-item-avatar;
 }
 
+.u-m-l-item-avatar img {
+    @apply w-full h-full m-0 p-0 border-none box-border rounded-full
+    bg-gradient-to-r from-sky-300 from-30% via-violet-400 via-55% to-indigo-300 to-80%;
+}
+
 .u-m-l-item-remark {
     @apply h-full w-full flex items-center box-border overflow-hidden pl-4 text-black font-medium;
     grid-area: u-m-l-item-remark;

diff --git a/ui-prototype/src/components/chat/UserMsgListItem.tsx b/ui-prototype/src/components/chat/UserMsgListItem.tsx
@@ -52,7 +52,9 @@ const UserMsgListItem = (props: Props) => {
     let time = `${hours}:${minutes}`;
     return (
         <div className={'user-msg-list-item'} onClick={onClick}>
-            <img src={avatar} alt="" className='u-m-l-item-avatar'/>
+            <div className={'u-m-l-item-avatar'}>
+                <img src={avatar} alt="" />
+            </div>
             <div className="u-m-l-item-remark">
                 {
                     remark

diff --git a/ui-prototype/src/components/header/Add.tsx b/ui-prototype/src/components/header/Add.tsx
@@ -295,7 +295,7 @@ class Add extends React.Component<Props, State> {
 
     render = (): React.ReactNode => {
         return (
-            <div className="add">
+            <div className="add" data-tauri-drag-region>
                 <img src="/assets/add.png" alt="" className='add-img' onClick={this.onClick} />
                 <Portal contentList={[
                     <AddFriend accountIdVal={this.onAccountIdChange} remarkVal={this.onRemarkChange} setResCB={this.setAddFriendCB}></AddFriend>,

diff --git a/ui-prototype/src/components/header/Chat.tsx b/ui-prototype/src/components/header/Chat.tsx
@@ -39,7 +39,7 @@ class Chat extends React.Component<Props, State> {
 
     render(): ReactNode {
         return (
-            <div className={'chat-h'}>
+            <div className={'chat-h'} data-tauri-drag-region>
                 <Link className={'h-full w-full p-0 m-0 border-0'} to='/'>
                     <img src={this.state.icon} alt="" onClick={this.onClick} />
                 </Link>

diff --git a/ui-prototype/src/components/header/Contacts.tsx b/ui-prototype/src/components/header/Contacts.tsx
@@ -33,7 +33,7 @@ class Contacts extends React.Component<Props, State> {
 
     render(): ReactNode {
         return (
-            <div className={'contacts-h'}>
+            <div className={'contacts-h'} data-tauri-drag-region>
                 <Link to='/contacts'>
                     <img src={this.state.icon} alt="" onClick={this.onClick} />
                 </Link>