聊天气泡样式

src/pages/Base/Order/Chat.tsx

@@ -55,6 +55,7 @@ const ChatComponent: React.FC<ChatComponentProps> = ({ messageList, onClose }) =
     boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
     maxWidth: "70%",
     wordWrap: "break-word",
+    position: "relative", // 为伪元素定位做准备
   } as React.CSSProperties;
 
   const contentStyle = {
@@ -62,6 +63,7 @@ const ChatComponent: React.FC<ChatComponentProps> = ({ messageList, onClose }) =
     lineHeight: "1.5",
     fontSize: "14px",
     textAlign: "left",
+    paddingTop: "5px",
   } as React.CSSProperties;
 
   const attachmentContainerStyle = {
@@ -126,48 +128,75 @@ const ChatComponent: React.FC<ChatComponentProps> = ({ messageList, onClose }) =
       </div>
 
       {messageList.map((msg) => (
-        <div
-          key={msg.id}
-          style={{
-            ...baseMessageStyle,
-            justifyContent: msg.sender === "other"? "flex-start" : "flex-end",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: msg.sender === "other"? "flex-start" : "flex-end",
-            paddingLeft: "40px",
-          }}
-        >
-          {/* 根据发送方显示对应的名称和图标 */}
-          {msg.sender === "other" && (
-            <div style={senderInfoStyle}>
-              <img
-                src="/partner.png"
-                alt="AAA株式会社图标"
-                style={iconStyle}
-              />
-              <span style={senderNameStyle}>AAA株式会社</span>
-            </div>
-          )}
-          {msg.sender === "me" && (
-            <div style={senderInfoStyle}>
-              <span style={senderNameStyle}>羽田ベース</span>
-              <img
-                src="/base.png"
-                alt="羽田ベース图标"
-                style={{...iconStyle, marginLeft: "4px", marginRight: "0" }}
-              />
-            </div>
-          )}
+  <div
+    key={msg.id}
+    style={{
+     ...baseMessageStyle,
+      justifyContent: msg.sender === "other"? "flex-start" : "flex-end",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: msg.sender === "other"? "flex-start" : "flex-end",
+      paddingLeft: "40px", 
+    }}
+  >
+    {msg.sender === "other" && (
+      <div style={senderInfoStyle}>
+        <img
+          src="/partner.png"
+          alt="AAA株式会社图标"
+          style={iconStyle}
+        />
+        <span style={senderNameStyle}>AAA株式会社</span>
+      </div>
+    )}
+    {msg.sender === "me" && (
+      <div style={senderInfoStyle}>
+        <span style={senderNameStyle}>羽田ベース</span>
+        <img
+          src="/base.png"
+          alt="羽田ベース图标"
+          style={{...iconStyle, marginLeft: "4px", marginRight: "0" }}
+        />
+      </div>
+    )}
 
-          {/*聊天内容气泡：内容非空时才显示 */}
-          {msg.content.trim()!== "" && (
+    {msg.content.trim()!== "" && (
             <div
               style={{
-                ...bubbleStyle,
+               ...bubbleStyle,
                 backgroundColor: msg.sender === "other"? "#d9d9d9" : "#deebf7",
                 marginBottom: "4px",
+                marginTop: "15px", 
               }}
             >
+              {msg.sender === "other" && (
+                <div
+                  style={{
+                    content: '""',
+                    position: "absolute",
+                    left: "12px", 
+                    top: "-23px", 
+                    borderTop: "20px solid transparent", 
+                    borderBottom: "20px solid transparent",
+                    borderLeft: "15px solid #d9d9d9", 
+                    transform: "translateY(20%)", 
+                  }}
+                />
+              )}
+              {msg.sender === "me" && (
+                <div
+                  style={{
+                    content: '""',
+                    position: "absolute",
+                    right: "12px", 
+                    top: "-23px", 
+                    borderTop: "20px solid transparent", 
+                    borderBottom: "20px solid transparent",
+                    borderRight: "15px solid #deebf7", 
+                    transform: "translateY(20%)", 
+                  }}
+                />
+              )}
               <div style={contentStyle}>
                 {msg.content.split("\n").map((line, index) => (
                   <React.Fragment key={index}>
@@ -178,7 +207,6 @@ const ChatComponent: React.FC<ChatComponentProps> = ({ messageList, onClose }) =
               </div>
             </div>
           )}
-
           {/* 附件区域 */}
           {msg.attachment && (
             <div style={attachmentContainerStyle}>
@@ -194,11 +222,10 @@ const ChatComponent: React.FC<ChatComponentProps> = ({ messageList, onClose }) =
               </a>
             </div>
           )}
-
           {/* 时间戳 */}
           <div
             style={{
-              ...timestampStyle,
+             ...timestampStyle,
               marginLeft: msg.sender === "other"? "10px" : "0",
               marginRight: msg.sender === "me"? "10px" : "0",
               textAlign: msg.sender === "other"? "left" : "right",
@@ -208,7 +235,6 @@ const ChatComponent: React.FC<ChatComponentProps> = ({ messageList, onClose }) =
           </div>
         </div>
       ))}
-
       {/* 用于自动滚动的参考点 */}
       <div ref={messagesEndRef} />
     </div>
@@ -249,12 +275,12 @@ const InputArea: React.FC<{ onSendMessage: (content: string, file: File | null)
     <div
       style={{
         width: "100%",
-        maxWidth: "600px",
-        margin: "0 auto",
+        margin: "0",
         padding: "16px",
         display: "flex",
         flexDirection: "column",
         gap: "8px",
+        boxSizing: "border-box",
       }}
     >
       <textarea
@@ -269,6 +295,7 @@ const InputArea: React.FC<{ onSendMessage: (content: string, file: File | null)
           borderRadius: "4px",
           border: "1px solid #ccc",
           resize: "none",
+          boxSizing: "border-box",
         }}
       />
       {selectedFile && (
@@ -376,6 +403,7 @@ const initialMessages: ChatMessage[] = [
   },
 ];
 
+
 const Chat: React.FC<ChatProps> = ({ onClose }) => {
   const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
 
@@ -385,15 +413,15 @@ const Chat: React.FC<ChatProps> = ({ onClose }) => {
       sender: "me",
       content,
       timestamp: new Date()
-        .toLocaleString("ja-JP", {
+       .toLocaleString("ja-JP", {
           year: "numeric",
           month: "long",
           day: "numeric",
           hour: "2-digit",
           minute: "2-digit",
         })
-        .replace(/[年月]/g, "-")
-        .replace("日", ""),
+       .replace(/[年月]/g, "-")
+       .replace("日", ""),
     };
 
     if (file) {
@@ -407,8 +435,19 @@ const Chat: React.FC<ChatProps> = ({ onClose }) => {
   };
 
   return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <div className="chat-messages-container">
+    <div style={{ 
+      height: '100%', 
+      display: 'flex', 
+      flexDirection: 'column',
+      margin: 0,
+      padding: 0
+    }}>
+      <div className="chat-messages-container" style={{
+        padding: '16px',
+        boxSizing: 'border-box',
+        flex: 1,
+        overflow: 'auto'
+      }}>
         <ChatComponent messageList={messages} onClose={onClose} />
       </div>
       <InputArea onSendMessage={handleSendMessage} />
@@ -417,4 +456,3 @@ const Chat: React.FC<ChatProps> = ({ onClose }) => {
 };
 
 export default Chat;
-

src/pages/Base/Order/index.tsx

@@ -45,24 +45,6 @@ const reasonOptions = [
     "その他"
 ];
 
-const orderInfo = {
-    deliveryPartner: {
-        id: "0311111111",
-        name: "AAA株式会社"
-    },
-    status: {
-        companyCode: "R000001",
-        status: "全承諾",
-        version: 1,
-        instructionDate: "2025/6/25",
-        approvalDate: "2025/6/25"
-    },
-    monthlyInstruction: {
-        versionOptions: ["ver-1", "ver-2", "ver-3", "ver-4", "ver-5"],
-        selectedVersion: "ver-1"
-    }
-};
-
 const historyData = [
     {
         type: '履歴',
@@ -84,6 +66,23 @@ const historyData = [
 const weekTexts = ["火", "水", "木", "金", "土", "日", "月"];
 
 const GridExample = () => {
+     const [orderInfo, setOrderInfo] = useState({
+        deliveryPartner: {
+            id: "0311111111",
+            name: "AAA株式会社"
+        },
+        status: {
+            companyCode: "R000001",
+            status: "全承諾",
+            version: 1,
+            instructionDate: "2025/6/25",
+            approvalDate: "2025/6/25"
+        },
+        monthlyInstruction: {
+            versionOptions: ["ver-1", "ver-2", "ver-3", "ver-4", "ver-5"],
+            selectedVersion: "ver-1"
+        }
+    });
     const containerStyle = useMemo(() => ({ width: "100%" }), []);
     const gridStyle = useMemo(() => ({ width: "100%" }), []);
     const [rowData, setRowData] = useState(initializeRowData());
@@ -735,7 +734,19 @@ const GridExample = () => {
                     <h3>月間運行指示書</h3>
                     <div className="version-select-container">
                         <label>version選択</label>
-                        <select value={orderInfo.monthlyInstruction.selectedVersion}>
+                         <select 
+                            value={orderInfo.monthlyInstruction.selectedVersion}
+                            onChange={(e) => {
+                                // 更新选中的version，保持其他字段不变
+                                setOrderInfo(prev => ({
+                                   ...prev,
+                                    monthlyInstruction: {
+                                       ...prev.monthlyInstruction,
+                                        selectedVersion: e.target.value
+                                    }
+                                }));
+                            }}
+                        >
                             {orderInfo.monthlyInstruction.versionOptions.map(version => (
                                 <option key={version} value={version}>{version}</option>
                             ))}