feat: 增加聊天窗口头像显示切换功能并更新示例图片

README.md

@@ -5,10 +5,9 @@ MAC系统 获取微信聊天记录 AI一键生成群聊总结
 
 ## 📸 预览
 
-<div style="display: flex; justify-content: space-between;">
-  <img src="./public/WX20251215-155324.png" alt="预览图1" width="48%" />
-  <img src="./public/WX20251215-155524.png" alt="预览图2" width="48%" />
-</div>
+  <img src="./public/example1.png" alt="预览图1" />
+  <img src="./public/example2.png" alt="预览图2" />
+  <img src="./public/example3.png" alt="预览图3" />
 
 ## [点击这里下载](https://github.com/Wxw-Gu/WechatExplorer/releases/tag/v1.0.0)
 
@@ -37,10 +36,6 @@ MAC系统 获取微信聊天记录 AI一键生成群聊总结
 
 本项目仅供学习和研究使用。请勿用于非法用途。开发者不对使用本项目造成的任何后果负责。请遵守相关法律法规和微信使用协议。
 
-## 📄 许可证
-
-[MIT](./LICENSE) License
-
 ## 🔗 参考
 
 - [WechatMessageExplorer](https://github.com/svcvit/WechatMessageExplorer)

src/renderer/src/components/ChatWindow.tsx

@@ -41,6 +41,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const imageContainerRef = useRef<HTMLDivElement>(null)
   const [generatedImage, setGeneratedImage] = useState<string | null>(null)
+  const [showAvatar, setShowAvatar] = useState(false)
 
   const [colWidths, setColWidths] = useState([150, 100, 180, 400])
   const [resizingColIndex, setResizingColIndex] = useState<number | null>(null)
@@ -292,14 +293,29 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
                   {msg.datetime}
                 </td>
                 <td style={{ wordBreak: 'break-all', display: 'flex', alignItems: 'center' }}>
-                  <div style={{ display: 'flex', flexDirection: 'column', marginRight: 12 }}>
-                    <span>{msg.name}</span>
-                    {msg?.img && (
-                      <img style={{ width: '50px', height: '50px' }} src={msg?.img}></img>
+                  {showAvatar && msg?.img && (
+                    <img style={{ width: '40px', height: '40px' }} src={msg?.img}></img>
                   )}
+                  <div
+                    style={{
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      display: !showAvatar ? 'flex' : 'block'
+                    }}
+                  >
+                    {msg.name && <div style={{ fontSize: 18 }}>{msg.name}: </div>}
+                    <div
+                      style={{
+                        fontSize: 18,
+                        background: '#fff',
+                        margin: 4,
+                        padding: 4,
+                        borderRadius: '4px'
+                      }}
+                    >
+                      {msg.content}
+                    </div>
                   </div>
-                  {/* <span style={{ marginRight: '24px' }}>:</span> */}
-                  <div>{msg.content}</div>
                 </td>
               </tr>
             ))}
@@ -325,6 +341,17 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
       </div>
 
       <div className="chat-toolbar">
+        <label
+          style={{ marginRight: '10px', display: 'flex', alignItems: 'center', cursor: 'pointer' }}
+        >
+          <input
+            type="checkbox"
+            checked={showAvatar}
+            onChange={(e) => setShowAvatar(e.target.checked)}
+            style={{ marginRight: '5px' }}
+          />
+          显示头像
+        </label>
         <button className="toolbar-btn" onClick={onRefresh}>
           🔄 刷新聊天记录
         </button>