From b3d58efd741e7c3be8e1134c7749f8b3e9335d9e Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 17 Jul 2021 22:35:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=81=8A=E5=A4=A9=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ChatBox/ChatInputBox/index.tsx |  8 +++--
 .../ChatBox/ChatMessageList/index.tsx         |  2 +-
 web/src/components/ChatBox/index.tsx          |  2 +-
 web/src/styles/antd/dark.less                 |  7 ++++
 web/src/styles/antd/overwrite.less            |  4 +++
 web/src/styles/global.less                    | 32 +++++++++++++++++++
 6 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/web/src/components/ChatBox/ChatInputBox/index.tsx b/web/src/components/ChatBox/ChatInputBox/index.tsx
index 38ef73dd..9750c3e1 100644
--- a/web/src/components/ChatBox/ChatInputBox/index.tsx
+++ b/web/src/components/ChatBox/ChatInputBox/index.tsx
@@ -6,8 +6,12 @@ interface ChatInputBoxProps {
 }
 export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
   return (
-    <div>
-      <Input onPressEnter={(e) => props.onSendMsg(e.currentTarget.value)} />
+    <div className="px-4 pb-2">
+      <Input
+        className="outline-none shadow-none border-0 bg-gray-600 py-2.5 px-4 rounded-md"
+        placeholder="输入一些什么"
+        onPressEnter={(e) => props.onSendMsg(e.currentTarget.value)}
+      />
     </div>
   );
 });
diff --git a/web/src/components/ChatBox/ChatMessageList/index.tsx b/web/src/components/ChatBox/ChatMessageList/index.tsx
index c550765e..62a6625a 100644
--- a/web/src/components/ChatBox/ChatMessageList/index.tsx
+++ b/web/src/components/ChatBox/ChatMessageList/index.tsx
@@ -8,7 +8,7 @@ interface ChatMessageListProps {
 export const ChatMessageList: React.FC<ChatMessageListProps> = React.memo(
   (props) => {
     return (
-      <div>
+      <div className="flex-1 overflow-y-scroll">
         {props.messages.map((message) => (
           <ChatMessageItem
             key={message._id}
diff --git a/web/src/components/ChatBox/index.tsx b/web/src/components/ChatBox/index.tsx
index eaaac40e..7220a118 100644
--- a/web/src/components/ChatBox/index.tsx
+++ b/web/src/components/ChatBox/index.tsx
@@ -39,7 +39,7 @@ export const ChatBox: React.FC<{
   }
 
   return (
-    <div>
+    <div className="w-full h-screen flex flex-col">
       <ChatMessageList messages={messages} />
 
       <ChatInputBox
diff --git a/web/src/styles/antd/dark.less b/web/src/styles/antd/dark.less
index 760bbf18..344df8f5 100644
--- a/web/src/styles/antd/dark.less
+++ b/web/src/styles/antd/dark.less
@@ -14,4 +14,11 @@
   .ant-typography {
     color: rgba(255,255,255,0.65);
   }
+
+  // 输入框
+  .ant-input {
+    color: rgba(255,255,255,0.65);
+    background-color: transparent;
+    border: 1px solid rgba(255,255,255,0.12);
+  }
 }
diff --git a/web/src/styles/antd/overwrite.less b/web/src/styles/antd/overwrite.less
index 6b186c25..4ca8143f 100644
--- a/web/src/styles/antd/overwrite.less
+++ b/web/src/styles/antd/overwrite.less
@@ -10,3 +10,7 @@
 .ant-typography-expand, .ant-typography-copy {
   vertical-align: text-bottom;
 }
+
+.ant-input:hover, .ant-input:focus, .ant-input-focused {
+  border-right-width: inherit !important;
+}
diff --git a/web/src/styles/global.less b/web/src/styles/global.less
index 463ce3f5..f21a78dc 100644
--- a/web/src/styles/global.less
+++ b/web/src/styles/global.less
@@ -1,3 +1,35 @@
 .dark {
   color: rgba(255,255,255,0.85);
+
+  /* 滚动条 */
+  ::-webkit-scrollbar {
+    width: 16px;
+    height: 16px;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #202225;
+    border-color: transparent;
+    background-clip: padding-box;
+    border-width: 4px;
+    border-style: solid;
+    border-radius: 8px;
+
+    &:hover {
+      background-color: #202225;
+    }
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #2f3136;
+    border-color: transparent;
+    background-clip: padding-box;
+    border-width: 4px;
+    border-style: solid;
+    border-radius: 8px;
+  }
 }