feat: 添加小红书创作服务平台
- 创建完整的React项目结构，使用Vite作为构建工具
- 实现小红书风格的社交媒体界面
- 包含响应式设计和移动端导航
- 添加交互式帖子功能（点赞、收藏、评论计数）
- 集成Lucide React图标库
- 配置项目依赖和构建脚本
Change-Id: Ie000fb8f804725cf63e901af3a300cff69d4b490
diff --git a/xiaohongshu-platform/src/App.jsx b/xiaohongshu-platform/src/App.jsx
new file mode 100644
index 0000000..503ca6b
--- /dev/null
+++ b/xiaohongshu-platform/src/App.jsx
@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { Heart, MessageCircle, Share2, Bookmark, Search, User, Home, Compass, Plus, Bell } from 'lucide-react';
+import './App.css';
+
+function App() {
+ const [posts, setPosts] = useState([
+ {
+ id: 1,
+ username: "创作者小红",
+ avatar: "/api/placeholder/40/40",
+ image: "/api/placeholder/300/400",
+ title: "今日OOTD分享 🌸",
+ content: "春日温柔穿搭，粉色系永远不会出错！",
+ likes: 1234,
+ comments: 89,
+ isLiked: false,
+ isSaved: false
+ },
+ {
+ id: 2,
+ username: "美食达人",
+ avatar: "/api/placeholder/40/40",
+ image: "/api/placeholder/300/400",
+ title: "超简单的蛋糕制作 🍰",
+ content: "零失败率的草莓蛋糕，新手也能做出完美作品！",
+ likes: 2567,
+ comments: 156,
+ isLiked: false,
+ isSaved: false
+ },
+ {
+ id: 3,
+ username: "旅行摄影师",
+ avatar: "/api/placeholder/40/40",
+ image: "/api/placeholder/300/400",
+ title: "云南大理古城 📸",
+ content: "漫步在石板路上，感受千年古城的魅力",
+ likes: 3421,
+ comments: 234,
+ isLiked: true,
+ isSaved: false
+ }
+ ]);
+
+ const [activeTab, setActiveTab] = useState('home');
+
+ const handleLike = (postId) => {
+ setPosts(posts.map(post =>
+ post.id === postId
+ ? { ...post, isLiked: !post.isLiked, likes: post.isLiked ? post.likes - 1 : post.likes + 1 }
+ : post
+ ));
+ };
+
+ const handleSave = (postId) => {
+ setPosts(posts.map(post =>
+ post.id === postId
+ ? { ...post, isSaved: !post.isSaved }
+ : post
+ ));
+ };
+
+ return (
+ <div className="app">
+ {/* Header */}
+ <header className="header">
+ <div className="header-content">
+ <h1 className="logo">小红书</h1>
+ <div className="search-bar">
+ <Search size={20} />
+ <input type="text" placeholder="搜索你感兴趣的内容" />
+ </div>
+ <div className="header-actions">
+ <Bell size={24} />
+ <User size={24} />
+ </div>
+ </div>
+ </header>
+
+ {/* Main Content */}
+ <main className="main-content">
+ <div className="posts-container">
+ {posts.map(post => (
+ <div key={post.id} className="post-card">
+ <div className="post-image">
+ <img src={post.image} alt={post.title} />
+ </div>
+ <div className="post-content">
+ <h3 className="post-title">{post.title}</h3>
+ <p className="post-description">{post.content}</p>
+ <div className="post-author">
+ <img src={post.avatar} alt={post.username} className="author-avatar" />
+ <span className="author-name">{post.username}</span>
+ </div>
+ <div className="post-actions">
+ <button
+ className={`action-btn ${post.isLiked ? 'liked' : ''}`}
+ onClick={() => handleLike(post.id)}
+ >
+ <Heart size={16} fill={post.isLiked ? '#ff4757' : 'none'} />
+ <span>{post.likes}</span>
+ </button>
+ <button className="action-btn">
+ <MessageCircle size={16} />
+ <span>{post.comments}</span>
+ </button>
+ <button className="action-btn">
+ <Share2 size={16} />
+ </button>
+ <button
+ className={`action-btn ${post.isSaved ? 'saved' : ''}`}
+ onClick={() => handleSave(post.id)}
+ >
+ <Bookmark size={16} fill={post.isSaved ? '#ffa502' : 'none'} />
+ </button>
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ </main>
+
+ {/* Bottom Navigation */}
+ <nav className="bottom-nav">
+ <button
+ className={`nav-btn ${activeTab === 'home' ? 'active' : ''}`}
+ onClick={() => setActiveTab('home')}
+ >
+ <Home size={24} />
+ <span>首页</span>
+ </button>
+ <button
+ className={`nav-btn ${activeTab === 'discover' ? 'active' : ''}`}
+ onClick={() => setActiveTab('discover')}
+ >
+ <Compass size={24} />
+ <span>发现</span>
+ </button>
+ <button
+ className={`nav-btn ${activeTab === 'create' ? 'active' : ''}`}
+ onClick={() => setActiveTab('create')}
+ >
+ <Plus size={24} />
+ <span>创作</span>
+ </button>
+ <button
+ className={`nav-btn ${activeTab === 'profile' ? 'active' : ''}`}
+ onClick={() => setActiveTab('profile')}
+ >
+ <User size={24} />
+ <span>我</span>
+ </button>
+ </nav>
+ </div>
+ );
+}
+
+export default App;