feat: 聊天输入框

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>
   );
 });

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}

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

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);
+  }
 }

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;
+}

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;
+  }
 }