From d6eabb06e1013596711f791425bd48f4a306d8d5 Mon Sep 17 00:00:00 2001 From: SuanCaiYv Date: Fri, 9 Jun 2023 01:01:52 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E5=AE=A2=E6=88=B7=E7=AB=AF?= =?UTF-8?q?=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-prototype/index.html | 21 ++- ui-prototype/src-tauri/Cargo.toml | 2 +- ui-prototype/src-tauri/tauri.conf.json | 160 +++++++++++------- ui-prototype/src/App.css | 2 +- ui-prototype/src/App.tsx | 3 +- ui-prototype/src/components/Header.css | 5 +- ui-prototype/src/components/Header.tsx | 4 +- ui-prototype/src/components/Layout.tsx | 2 +- ui-prototype/src/components/chat/Main.tsx | 2 +- .../src/components/chat/MsgListItem.css | 13 +- .../src/components/chat/MsgListItem.tsx | 8 +- .../src/components/chat/UserMsgListItem.css | 7 +- .../src/components/chat/UserMsgListItem.tsx | 4 +- ui-prototype/src/components/header/Add.tsx | 2 +- ui-prototype/src/components/header/Chat.tsx | 2 +- .../src/components/header/Contacts.tsx | 2 +- ui-prototype/src/components/header/More.tsx | 2 +- ui-prototype/src/components/header/Search.css | 4 +- ui-prototype/src/components/header/Search.tsx | 2 +- ui-prototype/src/components/header/User.css | 3 +- ui-prototype/src/components/header/User.tsx | 2 +- ui-prototype/src/components/portal/Portal.css | 2 +- ui-prototype/src/components/sign/Sign.css | 8 +- ui-prototype/src/components/sign/Sign.tsx | 2 +- 24 files changed, 164 insertions(+), 100 deletions(-) diff --git a/ui-prototype/index.html b/ui-prototype/index.html index aea7993d..7b44a6ff 100644 --- a/ui-prototype/index.html +++ b/ui-prototype/index.html @@ -1,13 +1,22 @@ - + + PRIM - - -
+ + + + +
- - + + + \ No newline at end of file diff --git a/ui-prototype/src-tauri/Cargo.toml b/ui-prototype/src-tauri/Cargo.toml index 373e30ac..b761d347 100644 --- 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 index 039d73fd..d4562b8d 100644 --- 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/128x128@2x.png", - "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/128x128@2x.png", + "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" + } + ] + } +} \ No newline at end of file diff --git a/ui-prototype/src/App.css b/ui-prototype/src/App.css index a7be3a90..cd55232c 100644 --- 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 index 3995e5df..c72b1028 100644 --- 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 ( -
+
{ render(): ReactNode { return ( -
+
- Test + Test
) diff --git a/ui-prototype/src/components/Layout.tsx b/ui-prototype/src/components/Layout.tsx index ae8c209c..e591a14e 100644 --- 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 ( -
+
{props.children}
) diff --git a/ui-prototype/src/components/chat/Main.tsx b/ui-prototype/src/components/chat/Main.tsx index f1c8d0ad..1d2921b0 100644 --- 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 ( -
+
diff --git a/ui-prototype/src/components/chat/MsgListItem.css b/ui-prototype/src/components/chat/MsgListItem.css index 6cb6de98..1e06c250 100644 --- 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,11 +45,11 @@ } .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 { @@ -57,6 +57,11 @@ 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 index c17d6912..f0ee6cb7 100644 --- a/ui-prototype/src/components/chat/MsgListItem.tsx +++ b/ui-prototype/src/components/chat/MsgListItem.tsx @@ -82,11 +82,15 @@ const MsgListItem = (props: { }
- +
+ +
) : (
- +
+ +
{ remark !== '' ? ( diff --git a/ui-prototype/src/components/chat/UserMsgListItem.css b/ui-prototype/src/components/chat/UserMsgListItem.css index dcac3b08..e284a341 100644 --- 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 index ef7a3518..77191ae2 100644 --- 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 (
- +
+ +
{ remark diff --git a/ui-prototype/src/components/header/Add.tsx b/ui-prototype/src/components/header/Add.tsx index 7d07b0d1..b683a9ff 100644 --- 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 { render = (): React.ReactNode => { return ( -
+
, diff --git a/ui-prototype/src/components/header/Chat.tsx b/ui-prototype/src/components/header/Chat.tsx index 535c50a2..0e3a9878 100644 --- 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 { render(): ReactNode { return ( -
+
diff --git a/ui-prototype/src/components/header/Contacts.tsx b/ui-prototype/src/components/header/Contacts.tsx index d05683b6..4d6bfac4 100644 --- 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 { render(): ReactNode { return ( -
+
diff --git a/ui-prototype/src/components/header/More.tsx b/ui-prototype/src/components/header/More.tsx index ef3b5be4..ac6db511 100644 --- a/ui-prototype/src/components/header/More.tsx +++ b/ui-prototype/src/components/header/More.tsx @@ -33,7 +33,7 @@ class More extends React.Component { render(): ReactNode { return ( -
+
diff --git a/ui-prototype/src/components/header/Search.css b/ui-prototype/src/components/header/Search.css index c0f4327e..97c124c3 100644 --- a/ui-prototype/src/components/header/Search.css +++ b/ui-prototype/src/components/header/Search.css @@ -1,10 +1,10 @@ .search { - @apply h-full; + @apply h-full pt-1 ml-10; grid-area: search; } .search input { - @apply w-52 h-8 mx-5 my-3 px-2 box-border rounded-full border-none flex items-center justify-center bg-white dark:bg-neutral-700 text-black text-base font-semibold; + @apply w-44 h-7 mx-5 my-3 px-2 box-border rounded-full border-none flex items-center justify-center bg-white dark:bg-neutral-700 text-black text-base font-semibold; } .search input:focus { diff --git a/ui-prototype/src/components/header/Search.tsx b/ui-prototype/src/components/header/Search.tsx index dc77cc7a..03cd5dbe 100644 --- a/ui-prototype/src/components/header/Search.tsx +++ b/ui-prototype/src/components/header/Search.tsx @@ -2,7 +2,7 @@ import './Search.css' function Search() { return ( -
+
) diff --git a/ui-prototype/src/components/header/User.css b/ui-prototype/src/components/header/User.css index 92ab13cd..a793b0c6 100644 --- a/ui-prototype/src/components/header/User.css +++ b/ui-prototype/src/components/header/User.css @@ -4,5 +4,6 @@ } .user img { - @apply h-14 w-14 box-border p-0 my-0.5 ml-0 mr-1 border-0 border-white rounded-full bg-white; + @apply h-14 w-14 box-border p-0 my-0.5 ml-0 mr-1 border-0 border-white rounded-full bg-white + bg-gradient-to-r from-pink-300 from-10% via-sky-400 via-65% to-indigo-300 to-80%; } \ No newline at end of file diff --git a/ui-prototype/src/components/header/User.tsx b/ui-prototype/src/components/header/User.tsx index cd566bca..a08e3b20 100644 --- a/ui-prototype/src/components/header/User.tsx +++ b/ui-prototype/src/components/header/User.tsx @@ -16,7 +16,7 @@ export default function User() { }); return ( -
+
{ context.setCurrentContactUserId(context.userId); }}> diff --git a/ui-prototype/src/components/portal/Portal.css b/ui-prototype/src/components/portal/Portal.css index 650485fa..b7597267 100644 --- a/ui-prototype/src/components/portal/Portal.css +++ b/ui-prototype/src/components/portal/Portal.css @@ -3,7 +3,7 @@ line-height: 144px; left: 50%; transform: translate(-50%, 0); - top: 20%; + top: 10%; } .portal-mask { diff --git a/ui-prototype/src/components/sign/Sign.css b/ui-prototype/src/components/sign/Sign.css index 17768054..4862e4e2 100644 --- a/ui-prototype/src/components/sign/Sign.css +++ b/ui-prototype/src/components/sign/Sign.css @@ -1,5 +1,6 @@ -.login { - @apply w-full h-full grid grid-rows-[1fr,100px,60px,60px,60px,80px,1fr] grid-cols-1 bg-gradient-to-r from-pink-300 from-10% via-sky-500 via-30% to-indigo-500 to-90%; +.sign { + @apply w-full h-full grid grid-rows-[1fr,100px,60px,60px,60px,80px,1fr] grid-cols-1 + bg-gradient-to-r from-pink-100 from-10% via-indigo-200 via-30% to-sky-300 to-70%; grid-template-areas: "na1" "login-avatar" @@ -8,6 +9,7 @@ "login-a" "login-button" "na2"; + animation: bg 5s infinite; } .login-avatar { @@ -16,7 +18,7 @@ } .login-avatar img { - @apply w-24 h-24 rounded-full mx-auto bg-gradient-to-r from-cyan-300 from-10% via-sky-500 via-30% to-blue-200 to-90%; + @apply w-24 h-24 rounded-full mx-auto bg-gradient-to-r from-cyan-300 from-10% via-sky-500 via-30% to-pink-200 to-90%; } .login-user-id { diff --git a/ui-prototype/src/components/sign/Sign.tsx b/ui-prototype/src/components/sign/Sign.tsx index c566f76a..31932012 100644 --- a/ui-prototype/src/components/sign/Sign.tsx +++ b/ui-prototype/src/components/sign/Sign.tsx @@ -55,7 +55,7 @@ export default function SignMain() { } return ( -
+