diff --git a/.gitignore b/.gitignore index 5518781..3fb1d3f 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ yarn-debug.log* yarn-error.log* lerna-debug.log* .pnpm-debug.log* +package-lock.json # Diagnostic reports (https://nodejs.org/api/report.html) report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json diff --git a/package-lock.json b/package-lock.json index 17d7fb6..35d7320 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1315,7 +1315,11 @@ }, "node_modules/@radix-ui/react-switch": { "version": "1.1.3", +<<<<<<< HEAD "resolved": "https://registry.npmmirror.com/@radix-ui/react-switch/-/react-switch-1.1.3.tgz", +======= + "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.3.tgz", +>>>>>>> develop "integrity": "sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ==", "dependencies": { "@radix-ui/primitive": "1.1.1", @@ -1438,7 +1442,11 @@ }, "node_modules/@radix-ui/react-use-previous": { "version": "1.1.0", +<<<<<<< HEAD "resolved": "https://registry.npmmirror.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz", +======= + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz", +>>>>>>> develop "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==", "peerDependencies": { "@types/react": "*", diff --git a/src/components/ChatUI.tsx b/src/components/ChatUI.tsx index 5e46d16..0cab0ec 100644 --- a/src/components/ChatUI.tsx +++ b/src/components/ChatUI.tsx @@ -380,216 +380,218 @@ const ChatUI = () => { return ( <> -
- {/* Header */} -
-
- {/* 左侧群组信息 */} -
-
-
- {users.length === 1 ? ( - - ) : users.length === 2 ? ( -
- {users.slice(0, 2).map((user, index) => ( - - ))} -
- ) : users.length === 3 ? ( -
-
+
+
+ {/* Header */} +
+
+ {/* 左侧群组信息 */} +
+
+
+ {users.length === 1 ? ( + + ) : users.length === 2 ? ( +
{users.slice(0, 2).map((user, index) => ( ))}
-
- + ) : users.length === 3 ? ( +
+
+ {users.slice(0, 2).map((user, index) => ( + + ))} +
+
+ +
+
+ ) : ( +
+ {users.slice(0, 4).map((user, index) => ( + + ))} +
+ )} +
+
+
+
+

{group.name}

+

{users.length} 名成员

+
+
+ + {/* 右侧头像组和按钮 */} +
+
+ {users.slice(0, 4).map((user) => { + const avatarData = getAvatarData(user.name); + return ( + + + + + {'avatar' in user && user.avatar ? ( + + ) : ( + + {avatarData.text} + + )} + + + +

{user.name}

+ + + + ); + })} + {users.length > 4 && ( +
+ +{users.length - 4} +
+ )} +
+ +
+
+
+ + {/* Main Chat Area */} +
+ +
+ {messages.map((message) => ( +
+ {message.sender.name !== "我" && ( + + {'avatar' in message.sender && message.sender.avatar ? ( + + ) : ( + + {message.sender.name[0]} + + )} + + )} +
+
{message.sender.name}
+
+ + {message.content} + + {message.isAI && isTyping && currentMessageRef.current === message.id && ( + ▋ + )}
- ) : ( -
- {users.slice(0, 4).map((user, index) => ( - - ))} -
- )} -
-
-
-
-

{group.name}

-

{users.length} 名成员

-
-
- - {/* 右侧头像组和按钮 */} -
-
- {users.slice(0, 4).map((user) => { - const avatarData = getAvatarData(user.name); - return ( - - - - - {'avatar' in user && user.avatar ? ( - - ) : ( - - {avatarData.text} - - )} - - - -

{user.name}

- - - - ); - })} - {users.length > 4 && ( -
- +{users.length - 4} + {message.sender.name === "我" && ( + + {'avatar' in message.sender && message.sender.avatar ? ( + + ) : ( + + {message.sender.name[0]} + + )} + + )}
- )} + ))} +
+ {/* 添加一个二维码 */} +
+ QR Code +

扫码体验AI群聊

+
-
+ + {/* Input Area */} +
+
+ {messages.length > 0 && ( + + + + + + +

分享聊天记录

+ + + + )} + setInputMessage(e.target.value)} + onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()} + /> +
-
- - {/* Main Chat Area */} -
- -
- {messages.map((message) => ( -
- {message.sender.name !== "我" && ( - - {'avatar' in message.sender && message.sender.avatar ? ( - - ) : ( - - {message.sender.name[0]} - - )} - - )} -
-
{message.sender.name}
-
- - {message.content} - - {message.isAI && isTyping && currentMessageRef.current === message.id && ( - ▋ - )} -
-
- {message.sender.name === "我" && ( - - {'avatar' in message.sender && message.sender.avatar ? ( - - ) : ( - - {message.sender.name[0]} - - )} - - )} -
- ))} -
- {/* 添加一个二维码 */} -
- QR Code -

扫码体验AI群聊

-
-
- -
- - {/* Input Area */} -
-
- {messages.length > 0 && ( - - - - - - -

分享聊天记录

- - - - )} - setInputMessage(e.target.value)} - onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()} - /> - -
{/* Members Management Dialog */} diff --git a/src/components/SharePoster.tsx b/src/components/SharePoster.tsx index 6feffd3..327520f 100644 --- a/src/components/SharePoster.tsx +++ b/src/components/SharePoster.tsx @@ -60,7 +60,7 @@ export function SharePoster({ isOpen, onClose, chatAreaRef }: SharePosterProps) chatAreaRef.current.scrollTop = 0; const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth); - const extraSpace = 20; + const extraSpace = 6; const targetWidth = viewportWidth * 0.95 - (extraSpace * 2); const currentWidth = messageContainer.getBoundingClientRect().width; @@ -72,17 +72,18 @@ export function SharePoster({ isOpen, onClose, chatAreaRef }: SharePosterProps) const dataUrl = await domtoimage.toSvg(messageContainer as HTMLElement, { bgcolor: '#f3f4f6', scale: 1, // 回到较安全的值 - width: targetWidth + (extraSpace * 2), - height: adjustedHeight + (extraSpace * 2), + width: targetWidth + (extraSpace * 5), + height: adjustedHeight + (extraSpace * 5), style: { padding: `${extraSpace}px`, - margin: '0', + margin: '0 auto', width: '120%', height: '110%', transform: `scale(${scale})`, transformOrigin: 'top left', background: '#f3f4f6', boxSizing: 'border-box' + }, quality: 1.0 }); @@ -168,7 +169,7 @@ export function SharePoster({ isOpen, onClose, chatAreaRef }: SharePosterProps) onClose(); } }}> - + {/* 图片容器 */}
{posterImage && (