2025年5月24日
Qwen3 网页开发：仿一个 推特 X!
初始提示词：
开一个 X（推特）网站
改进提示词：
不错，添加一个左侧菜单, 包含 探索 通知 私信 Grok 书签 工作 社群 Premium 认证组织 个人资料 更多 等菜单，以及发布按钮和用户头像。 其他布局和风格不变。
非常不错，但是这里还有一个小问题：左侧菜单中，图标看不见。因为主题是暗色的，图标也是暗色的。需要修改一下，图标的颜色和文字一致。
是不是这个 svg 本身有问题啊，虽然样式都是白色了，但是实际上还是显示成黑色。你仔细分析一下，并解决这个问题
最终效果：
在线预览：
https://chat.qwen.ai/s/deploy/2495f6a8-3b6c-4ad8-aaba-052a18a74e73
最终代码：
import React, { useState } from 'react';
const App = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [activeTab, setActiveTab] = useState('For You');
const [newPost, setNewPost] = useState('');
const [posts, setPosts] = useState([
{
id: 1,
user: 'Sarah Chen',
username: '@sarahchen',
avatar: 'https://picsum.photos/200/301 ',
content: 'Just launched my new design portfolio! 🎨 Check it out and let me know what you think.',
time: '2h',
likes: 245,
comments: 32,
retweets: 18
},
{
id: 2,
user: 'Alex Johnson',
username: '@alexj',
avatar: 'https://picsum.photos/200/302 ',
content: 'Excited to announce our Series A funding round! 💼 Thanks to all our investors and team.',
time: '5h',
likes: 189,
comments: 27,
retweets: 41
},
{
id: 3,
user: 'Tech Insights',
username: '@techinsights',
avatar: 'https://picsum.photos/200/303 ',
content: 'Breaking: Major tech conference announces new AI partnerships today. Stay tuned for more updates.',
time: '7h',
likes: 312,
comments: 19,
retweets: 89
}
]);
const handlePostSubmit = (e) => {
e.preventDefault();
if (newPost.trim()) {
const newPostObj = {
id: Date.now(),
user: 'User Name',
username: '@username',
avatar: 'https://picsum.photos/200/304 ',
content: newPost,
time: 'Now',
likes: 0,
comments: 0,
retweets: 0
};
setPosts([newPostObj, ...posts]);
setNewPost('');
}
};
return (
<div className="bg-black text-white min-h-screen flex">
{/* Left Sidebar */}
<aside className="w-20 md:w-72 bg-black border-r border-gray-800 p-4 flex-shrink-0">
<div className="flex items-center mb-6">
<svg viewBox="0 0 24 24" className="w-7 h-7 text-blue-400">
<path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.103 7.14 2.103 8.57 0 13.255-7.098 13.255-13.254 0-.206 0-.41-.015-.614.91-.658 1.7-1.477 2.323-2.41z" />
</svg>
<span className="ml-3 font-bold text-xl hidden md:block">X</span>
</div>
<nav className="space-y-2">
<a href="#" className="flex items-center space-x-4 p-3 rounded-full hover:bg-gray-900 transition-colors">
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
<path d="M22 23l-9.17-9.168 2.828-2.828L22 17.172zM4 16.086a7.93 7.93 0 010-12.172l2.828 2.828A4.93 4.93 0 004 9.543a4.93 4.93 0 002.828 4.3L4 16.086zm6.364-3.535a7.93 7.93 0 010-12.172l2.828 2.828A4.93 4.93 0 0010.364 9.543a4.93 4.93 0 002.828 4.3l-2.828 2.828z"/>
</svg>
<span className="font-medium hidden md:block">Home</span>
</a>
<a href="#" className="flex items-center space-x-4 p-3 rounded-full hover:bg-gray-900 transition-colors">
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<span className="font-medium hidden md:block">Explore</span>
</a>
<a href="#" className="flex items-center space-x-4 p-3 rounded-full hover:bg-gray-900 transition-colors">
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<span className="font-medium hidden md:block">Notifications</span>
</a>
<a href="#" className="flex items-center space-x-4 p-3 rounded-full hover:bg-gray-900 transition-colors">
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
</svg>
<span className="font-medium hidden md:block">Messages</span>
</a>
<a href="#" className="flex items-center space-x-4 p-3 rounded-full hover:bg-gray-900 transition-colors">
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
<span className="font-medium hidden md:block">Grok</span>
</a>
<a href="#" className="flex items-center space-x-4 p-3 rounded-full hover:bg-gray-900 transition-colors">
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
<path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"/>
</svg>
<span className="font-medium hidden md:block">Bookmarks</span>
</a>
<a href="#" className="flex items-center space-x-4 p-3 rounded-full hover:bg-gray-900 transition-colors">
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
<span className="font-medium hidden md:block">Jobs</span>
</a>
<a href="#" className="flex items-center space-x-4 p-3 rounded-full hover:bg-gray-900 transition-colors">
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z"/>
</svg>
<span className="font-medium hidden md:block">Communities</span>
</a>
<a href="#" className="flex items-center space-x-4 p-3 rounded-full hover:bg-gray-900 transition-colors">
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z"/>
</svg>
<span className="font-medium hidden md:block">Premium</span>
</a>
<a href="#" className="flex items-center space-x-4 p-3 rounded-full hover:bg-gray-900 transition-colors">
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z"/>
</svg>
<span className="font-medium hidden md:block">Verified Orgs</span>
</a>
<a href="#" className="flex items-center space-x-4 p-3 rounded-full hover:bg-gray-900 transition-colors">
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
<span className="font-medium hidden md:block">Profile</span>
</a>
<a href="#" className="flex items-center space-x-4 p-3 rounded-full hover:bg-gray-900 transition-colors">
<svg viewBox="0 0 24 24" className="w-6 h-6 text-white" fill="currentColor">
<path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
<span className="font-medium hidden md:block">More</span>
</a>
</nav>
<div className="mt-auto pt-6">
<button className="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-full font-bold transition-colors">
Post
</button>
<div className="flex items-center mt-4 space-x-3">
<img src="https://picsum.photos/200/304 " alt="Profile" className="w-10 h-10 rounded-full" />
<div className="hidden md:block">
<div className="font-bold">User Name</div>
<div className="text-sm text-gray-500">@username</div>
</div>
</div>
</div>
</aside>
{/* Main Content */}
<main className="flex-1 border-l border-r border-gray-800 max-w-2xl overflow-y-auto">
{/* Top Bar */}
<header className="sticky top-0 z-10 bg-black border-b border-gray-800 px-4 py-2 flex items-center justify-between">
<div className="flex items-center">
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className="md:hidden mr-4"
>
<svg viewBox="0 0 24 24" className="w-6 h-6">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
</button>
<h1 className="text-xl font-bold">Home</h1>
</div>
<div className="relative">
<input
type="text"
placeholder="Search X"
className="bg-gray-900 rounded-full py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-blue-500 w-48 md:w-64"
/>
<svg viewBox="0 0 24 24" className="w-5 h-5 absolute left-3 top-2.5 text-gray-500">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
</div>
</header>
{/* Tabs */}
<div className="flex border-b border-gray-800">
<button
onClick={() => setActiveTab('For You')}
className={`px-4 py-3 font-bold ${activeTab === 'For You' ? 'border-b-2 border-blue-500 text-blue-500' : 'text-gray-500'}`}
>
For You
</button>
<button
onClick={() => setActiveTab('Following')}
className={`px-4 py-3 font-bold ${activeTab === 'Following' ? 'border-b-2 border-blue-500 text-blue-500' : 'text-gray-500'}`}
>
Following
</button>
</div>
{/* Post Input */}
<div className="p-4 flex space-x-3 border-b border-gray-800">
<img src="https://picsum.photos/200/304 " alt="Profile" className="w-12 h-12 rounded-full" />
<form onSubmit={handlePostSubmit} className="flex-1">
<textarea
value={newPost}
onChange={(e) => setNewPost(e.target.value)}
placeholder="What's happening?"
className="w-full bg-transparent resize-none focus:outline-none text-lg"
rows="3"
/>
<div className="flex justify-between mt-3">
<div className="flex space-x-2 text-blue-500">
<button type="button">
<svg viewBox="0 0 24 24" className="w-6 h-6">
<path d="M17 14.08V6c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v12c0 2.21 1.79 4 4 4h12c2.21 0 4-1.79 4-4v-8h-2v8c0 1.1-.9 2-2 2H7c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1-.45 1-1v-8c0-1.1-.9-2-2-2h-8c-.55 0-1 .45-1 1s.45 1 1 1h1v2.08l4 4 4-4z"/>
</svg>
</button>
</div>
<button
type="submit"
disabled={!newPost.trim()}
className={`bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full font-bold transition-colors ${
!newPost.trim() ? 'opacity-50 cursor-not-allowed' : ''
}`}
>
Post
</button>
</div>
</form>
</div>
{/* Posts */}
<div>
{posts.map(post => (
<div key={post.id} className="border-b border-gray-800 p-4 hover:bg-gray-900 transition-colors">
<div className="flex space-x-3">
<img src={post.avatar} alt={post.user} className="w-12 h-12 rounded-full" />
<div className="flex-1">
<div className="flex items-center">
<span className="font-bold">{post.user}</span>
<span className="text-gray-500 ml-1">{post.username} · {post.time}</span>
</div>
<p className="mt-1 whitespace-pre-wrap">{post.content}</p>
<div className="flex justify-between mt-3 text-gray-500 max-w-md">
<button className="flex items-center space-x-1 hover:text-blue-500 transition-colors">
<svg viewBox="0 0 24 24" className="w-5 h-5">
<path d="M20 2H4c-1.1 0-2 .9-2 2v16l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
</svg>
<span>{post.comments}</span>
</button>
<button className="flex items-center space-x-1 hover:text-green-500 transition-colors">
<svg viewBox="0 0 24 24" className="w-5 h-5">
<path d="M12 5.6c-2.34 0-4.31 1.48-5 3.55C5.41 7.26 2.73 6 0 6v2c2.73 0 5.6 1.48 6.27 3.55-.66 2.07-2.63 3.55-5 3.55v2c4.42 0 8-3.58 8-8s-3.58-8-8-8v2c2.34 0 4.31 1.48 5 3.55zm13 0c-2.34 0-4.31 1.48-5 3.55 1.59-1.89 4.27-3.15 7-3.15v2c-2.73 0-5.6 1.48-6.27 3.55.66 2.07 2.63 3.55 5 3.55v2c-4.42 0-8-3.58-8-8s3.58-8 8-8v2c-2.34 0-4.31 1.48-5 3.55zm-1-13h-2v5l-1-.67l-1 .67V3H6v2h4v3l1-.67L9 8.67V6h4v5h2V3z"/>
</svg>
<span>{post.retweets}</span>
</button>
<button className="flex items-center space-x-1 hover:text-red-500 transition-colors">
<svg viewBox="0 0 24 24" className="w-5 h-5">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
<span>{post.likes}</span>
</button>
<button className="hover:text-blue-500 transition-colors">
<svg viewBox="0 0 24 24" className="w-5 h-5">
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
))}
</div>
</main>
{/* Right Sidebar - Trending & Who to follow */}
<aside className="hidden lg:flex flex-col w-80 p-4 bg-black">
<div className="relative mb-4">
<input
type="text"
placeholder="Search X"
className="bg-gray-900 rounded-full py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
/>
<svg viewBox="0 0 24 24" className="w-5 h-5 absolute left-3 top-2.5 text-gray-500">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z"/>
</svg>
</div>
<div className="bg-gray-900 rounded-xl p-4 mb-4">
<h2 className="font-bold text-xl mb-4">Trending</h2>
<div className="space-y-3">
<div className="hover:bg-gray-800 p-3 rounded-lg transition-colors">
<div className="text-sm text-gray-500">Worldwide · Trending</div>
<div className="font-bold">#ReactJS</div>
<div className="text-sm text-gray-500">12.5K posts</div>
</div>
<div className="hover:bg-gray-800 p-3 rounded-lg transition-colors">
<div className="text-sm text-gray-500">Technology · Trending</div>
<div className="font-bold">#AI</div>
<div className="text-sm text-gray-500">23.8K posts</div>
</div>
</div>
</div>
<div className="bg-gray-900 rounded-xl p-4">
<h2 className="font-bold text-xl mb-4">Who to follow</h2>
<div className="space-y-3">
<div className="flex items-center justify-between hover:bg-gray-800 p-2 rounded-lg transition-colors">
<div className="flex items-center">
<img src="https://picsum.photos/200/305 " alt="User" className="w-12 h-12 rounded-full" />
<div className="ml-3">
<div className="font-bold">Jane Doe</div>
<div className="text-sm text-gray-500">@janedoe</div>
</div>
</div>
<button className="bg-white text-black px-4 py-1 rounded-full text-sm font-bold hover:bg-gray-200 transition-colors">
Follow
</button>
</div>
</div>
</div>
</aside>
{/* Mobile Bottom Navigation */}
<nav className="fixed bottom-0 left-0 right-0 md:hidden bg-black border-t border-gray-800 flex justify-around py-3">
<button className="text-white">
<svg viewBox="0 0 24 24" className="w-6 h-6">
<path d="M22 23l-9.17-9.168 2.828-2.828L22 17.172zM4 16.086a7.93 7.93 0 010-12.172l2.828 2.828A4.93 4.93 0 004 9.543a4.93 4.93 0 002.828 4.3L4 16.086z"/>
</svg>
</button>
<button className="text-gray-500">
<svg viewBox="0 0 24 24" className="w-6 h-6">
<path d="M20 3H4c-1.1 0-2 .9-2 2v14l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
</svg>
</button>
<button className="text-gray-500">
<svg viewBox="0 0 24 24" className="w-6 h-6">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
</button>
</nav>
</div>
);
};
export default App;
关于作者
tony
某人