重构项目：将 xiaohongshu-platform 文件夹内容移至根目录
Change-Id: I69e4b3595122ada6a3a1124e1ebe3c9226513279
diff --git a/.gitignore b/.gitignore
index be5152f..efc0820 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,47 +1,10 @@
-# Dependencies
node_modules/
-*/node_modules/
-
-# Build outputs
+.vscode/
dist/
-build/
-
-# Environment files
+*.log
+.DS_Store
.env
.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# Logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Coverage directory used by tools like istanbul
-coverage/
-
-# nyc test coverage
-.nyc_output
-
-# Editor directories and files
-.vscode/
-.idea/
-*.swp
-*.swo
-*~
-
-# OS generated files
-.DS_Store
-.DS_Store?
-._*
-.Spotlight-V100
-.Trashes
-ehthumbs.db
-Thumbs.db
+.env.production
+.env.development
+package-lock.json
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6f35930
--- /dev/null
+++ b/README.md
@@ -0,0 +1,185 @@
+# 小红书内容创作平台
+
+这是一个基于 React + Vite 构建的小红书内容创作平台界面，完全复制了小红书官方创作服务平台的设计和功能。
+
+## 功能特性 ✨
+
+### 🎨 界面设计
+- **完全还原小红书官方设计**：精确复制了小红书创作服务平台的视觉风格
+- **响应式布局**：支持桌面端和移动端适配
+- **现代化UI**：使用 Lucide React 图标库，提供清晰美观的界面
+
+### 📤 上传功能
+- **双模式上传**：支持图片上传和视频上传两种模式
+- **拖拽上传**：支持文件拖拽到上传区域
+- **点击上传**：点击按钮选择文件上传
+- **文件验证**：
+ - 图片：支持 JPEG、JPG、PNG、WebP 格式，最大 32MB
+ - 视频：支持 MP4、MOV、AVI 格式，最大 2GB
+- **实时进度显示**：带有动画效果的上传进度条
+
+### 🖼️ 文件管理
+- **文件预览**：上传后实时显示文件缩略图
+- **文件信息**：显示文件名、大小等详细信息
+- **批量管理**：支持单个删除和批量清除
+- **文件计数**：实时显示已上传文件数量
+
+### 🎯 交互体验
+- **拖拽反馈**：拖拽时提供视觉反馈效果
+- **加载状态**：上传过程中的加载动画
+- **操作提示**：完成上传后的成功提示
+- **悬停效果**：按钮和文件项的悬停交互
+
+### 🗂️ 导航系统
+- **侧边栏导航**：完整的功能菜单
+- **可展开子菜单**：数据看板等功能的子选项
+- **活跃状态**：当前选中页面的高亮显示
+- **固定布局**：头部和侧边栏固定定位
+
+## 技术栈 🛠️
+
+- **前端框架**：React 19.1.0
+- **构建工具**：Vite 6.0.5
+- **图标库**：Lucide React 0.468.0
+- **样式**：纯 CSS（无预处理器）
+- **开发语言**：JavaScript + JSX
+
+## 安装运行 🚀
+
+1. **安装依赖**
+ ```bash
+ npm install
+ ```
+
+2. **启动开发服务器**
+ ```bash
+ npm run dev
+ ```
+
+3. **打开浏览器**
+ ```
+ http://localhost:5173
+ ```
+
+4. **构建生产版本**
+ ```bash
+ npm run build
+ ```
+
+## 项目结构 📁
+
+```
+发布页面/
+├── public/ # 静态资源
+│ └── vite.svg # Vite 图标
+├── src/
+│ ├── App.jsx # 主应用组件
+│ ├── App.css # 主样式文件
+│ ├── index.css # 全局样式
+│ └── main.jsx # 应用入口
+├── index.html # HTML 入口文件
+├── package.json # 项目配置
+├── vite.config.js # Vite 配置
+└── README.md # 项目说明
+```
+
+## 核心功能实现 💡
+
+### 文件上传处理
+```javascript
+const handleFileUpload = () => {
+ const input = document.createElement('input')
+ input.type = 'file'
+ input.accept = activeTab === 'video' ? 'video/*' : 'image/*'
+ input.multiple = activeTab === 'image'
+
+ input.onchange = (e) => {
+ const files = Array.from(e.target.files)
+ if (files.length > 0 && validateFiles(files)) {
+ simulateUpload(files)
+ }
+ }
+
+ input.click()
+}
+```
+
+### 拖拽上传实现
+```javascript
+const handleDrop = (e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ setIsDragOver(false)
+
+ const files = Array.from(e.dataTransfer.files)
+ if (files.length > 0 && validateFiles(files)) {
+ simulateUpload(files)
+ }
+}
+```
+
+### 文件验证机制
+```javascript
+const validateFiles = (files) => {
+ const validImageTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
+ const validVideoTypes = ['video/mp4', 'video/mov', 'video/avi']
+
+ const validTypes = activeTab === 'video' ? validVideoTypes : validImageTypes
+ const maxSize = activeTab === 'video' ? 2 * 1024 * 1024 * 1024 : 32 * 1024 * 1024
+
+ return files.every(file =>
+ validTypes.includes(file.type) && file.size <= maxSize
+ )
+}
+```
+
+## 样式特色 🎨
+
+### 响应式设计
+- 桌面端：固定侧边栏布局
+- 移动端：隐藏侧边栏，堆叠布局
+- 自适应文件网格：根据屏幕大小调整列数
+
+### 动画效果
+- 拖拽时的放大效果
+- 进度条的流光动画
+- 文件项的悬停过渡
+- 页面切换的淡入效果
+
+### 色彩方案
+- 主色调：#ff4757（小红书红）
+- 背景色：#f5f7fa（浅灰蓝）
+- 文字色：#333（深灰）
+- 边框色：#e8eaed（浅灰）
+
+## 待扩展功能 🔮
+
+- **后端集成**：连接真实的文件上传 API
+- **用户认证**：登录注册功能
+- **内容编辑**：笔记内容编辑器
+- **数据统计**：真实的数据看板功能
+- **社交功能**：评论、点赞等互动功能
+
+## 开发说明 📝
+
+这个项目完全基于前端实现，所有的上传功能都是模拟的。文件预览使用了 `URL.createObjectURL()` 来生成本地预览链接。在实际部署时，需要：
+
+1. 集成后端文件上传 API
+2. 实现用户认证系统
+3. 添加数据持久化
+4. 优化性能和安全性
+
+## 浏览器兼容性 🌐
+
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+## 许可证 📄
+
+MIT License
+
+---
+
+**注意**：本项目仅用于学习和演示目的，请遵守相关法律法规和平台使用条款。
diff --git a/xiaohongshu-platform/index.html b/index.html
similarity index 100%
rename from xiaohongshu-platform/index.html
rename to index.html
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..00a233f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "xiaohongshu-creator-platform",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "lucide-react": "^0.468.0"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-react": "^4.3.4",
+ "vite": "^6.0.5"
+ }
+}
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..ee9fada
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..00d10d6
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,583 @@
+.app {
+ display: flex;
+ min-height: 100vh;
+ background-color: #f5f7fa;
+}
+
+/* Header */
+.header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 60px;
+ background: #fff;
+ border-bottom: 1px solid #e8eaed;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ z-index: 1000;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.header-left {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.logo {
+ background: #ff4757;
+ color: white;
+ padding: 6px 12px;
+ border-radius: 6px;
+ font-size: 14px;
+ font-weight: bold;
+}
+
+.header-title {
+ font-size: 18px;
+ font-weight: 500;
+ color: #333;
+}
+
+.header-right {
+ margin-left: auto;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.user-info {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ color: #666;
+ font-size: 14px;
+}
+
+/* Sidebar */
+.sidebar {
+ position: fixed;
+ left: 0;
+ top: 60px;
+ width: 200px;
+ height: calc(100vh - 60px);
+ background: #fff;
+ border-right: 1px solid #e8eaed;
+ overflow-y: auto;
+ z-index: 999;
+}
+
+.publish-btn {
+ margin: 16px;
+ background: #ff4757;
+ color: white;
+ padding: 10px 16px;
+ border-radius: 6px;
+ font-size: 14px;
+ font-weight: 500;
+ text-align: center;
+ transition: background 0.2s;
+}
+
+.publish-btn:hover {
+ background: #ff3742;
+}
+
+.nav-menu {
+ padding: 0;
+ list-style: none;
+}
+
+.nav-item {
+ border-bottom: 1px solid #f0f0f0;
+}
+
+.nav-link {
+ display: flex;
+ align-items: center;
+ padding: 12px 20px;
+ color: #333;
+ font-size: 14px;
+ transition: all 0.2s;
+ gap: 8px;
+}
+
+.nav-link:hover {
+ background: #f8f9fa;
+ color: #ff4757;
+}
+
+.nav-link.active {
+ background: linear-gradient(135deg, #ff4757, #ff6b7a);
+ color: white;
+ font-weight: 500;
+}
+
+.nav-link.active .lucide {
+ color: white;
+}
+
+.nav-submenu {
+ padding-left: 20px;
+ background: #fafafa;
+}
+
+.nav-submenu .nav-link {
+ padding: 8px 20px;
+ font-size: 13px;
+ color: #666;
+}
+
+.nav-submenu .nav-link:hover {
+ color: #ff4757;
+}
+
+/* Main Content */
+.main-content {
+ margin-left: 200px;
+ padding-top: 60px;
+ flex: 1;
+ min-height: 100vh;
+}
+
+.content-wrapper {
+ padding: 20px;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+/* Upload Area */
+.upload-tabs {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 30px;
+ border-bottom: 1px solid #e8eaed;
+}
+
+.upload-tab {
+ padding: 12px 0;
+ font-size: 16px;
+ color: #666;
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
+ transition: all 0.2s;
+}
+
+.upload-tab.active {
+ color: #ff4757;
+ border-bottom-color: #ff4757;
+ font-weight: 500;
+}
+
+.upload-area {
+ background: #fff;
+ border-radius: 8px;
+ padding: 80px 40px;
+ text-align: center;
+ border: 2px dashed #ddd;
+ margin-bottom: 40px;
+ transition: all 0.2s;
+ min-height: 300px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+}
+
+.upload-area:hover {
+ border-color: #ff4757;
+ background: #fff8f8;
+}
+
+.upload-area.drag-over {
+ border-color: #ff4757;
+ background: #fff0f0;
+ transform: scale(1.02);
+}
+
+.upload-icon {
+ width: 100px;
+ height: 100px;
+ margin: 0 auto 30px;
+ background: #f8f9fa;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 40px;
+ color: #ccc;
+ transition: all 0.3s ease;
+}
+
+.upload-area:hover .upload-icon {
+ background: #ff475710;
+ color: #ff4757;
+ transform: scale(1.1);
+}
+
+.upload-area.drag-over .upload-icon {
+ background: #ff475720;
+ color: #ff4757;
+ transform: scale(1.2);
+}
+
+.upload-title {
+ font-size: 20px;
+ color: #333;
+ margin-bottom: 12px;
+ font-weight: 500;
+}
+
+.upload-subtitle {
+ font-size: 14px;
+ color: #999;
+ margin-bottom: 30px;
+}
+
+.upload-btn {
+ background: #ff4757;
+ color: white;
+ padding: 14px 28px;
+ border-radius: 6px;
+ font-size: 16px;
+ font-weight: 500;
+ transition: background 0.2s;
+ min-width: 120px;
+}
+
+.upload-btn:hover:not(:disabled) {
+ background: #ff3742;
+}
+
+.upload-btn:disabled {
+ background: #ccc;
+ cursor: not-allowed;
+}
+
+.upload-btn.uploading {
+ background: #ff4757;
+ opacity: 0.8;
+}
+
+/* File Preview */
+.file-preview-area {
+ background: #fff;
+ border-radius: 8px;
+ padding: 20px;
+ margin-bottom: 40px;
+ border: 1px solid #e8eaed;
+}
+
+/* Preview Header */
+.preview-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.preview-title {
+ font-size: 16px;
+ color: #333;
+ margin-bottom: 16px;
+ font-weight: 500;
+}
+
+.clear-files-btn {
+ background: #ff4757;
+ color: white;
+ padding: 6px 12px;
+ border-radius: 4px;
+ font-size: 12px;
+ transition: background 0.2s;
+}
+
+.clear-files-btn:hover {
+ background: #ff3742;
+}
+
+.file-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+ gap: 16px;
+}
+
+.file-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 12px;
+ border: 1px solid #f0f0f0;
+ border-radius: 6px;
+ transition: all 0.2s ease;
+ position: relative;
+}
+
+.file-item:hover {
+ border-color: #ff4757;
+ box-shadow: 0 2px 8px rgba(255, 71, 87, 0.1);
+}
+
+.file-item:hover .remove-file-btn {
+ opacity: 1;
+}
+
+.remove-file-btn {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ background: rgba(255, 71, 87, 0.8);
+ color: white;
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ font-weight: bold;
+ opacity: 0;
+ transition: all 0.2s;
+}
+
+.file-thumbnail {
+ width: 80px;
+ height: 80px;
+ border-radius: 6px;
+ overflow: hidden;
+ margin-bottom: 8px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #f8f9fa;
+}
+
+.file-thumbnail img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.video-thumbnail {
+ color: #666;
+}
+
+.file-info {
+ text-align: center;
+ width: 100%;
+}
+
+.file-name {
+ font-size: 12px;
+ color: #333;
+ margin-bottom: 4px;
+ font-weight: 500;
+}
+
+.file-size {
+ font-size: 11px;
+ color: #999;
+}
+
+/* Upload Progress */
+.progress-container {
+ margin-top: 20px;
+ width: 100%;
+ max-width: 400px;
+}
+
+.progress-bar {
+ width: 100%;
+ height: 8px;
+ background-color: #f0f0f0;
+ border-radius: 4px;
+ overflow: hidden;
+ margin-bottom: 8px;
+}
+
+.progress-fill {
+ height: 100%;
+ background: linear-gradient(90deg, #ff4757, #ff6b7a);
+ border-radius: 4px;
+ transition: width 0.3s ease;
+ position: relative;
+}
+
+.progress-fill::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+ animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+ 0% { transform: translateX(-100%); }
+ 100% { transform: translateX(100%); }
+}
+
+.progress-text {
+ text-align: center;
+ font-size: 12px;
+ color: #666;
+ font-weight: 500;
+}
+
+/* Upload Info */
+.upload-info {
+ display: flex;
+ gap: 60px;
+ justify-content: center;
+ margin-top: 40px;
+ padding: 20px;
+ opacity: 1;
+ transition: opacity 0.3s ease;
+}
+
+.upload-info.fade-in {
+ animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.info-item {
+ text-align: center;
+ flex: 1;
+ max-width: 300px;
+}
+
+.info-title {
+ font-size: 16px;
+ color: #333;
+ margin-bottom: 12px;
+ font-weight: 500;
+}
+
+.info-desc {
+ font-size: 13px;
+ color: #666;
+ line-height: 1.6;
+}
+
+/* Page Content Styles */
+.page-content {
+ padding: 40px;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ margin: 20px 0;
+ min-height: 500px;
+}
+
+.page-header {
+ margin-bottom: 40px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid #e8eaed;
+}
+
+.page-title {
+ font-size: 24px;
+ font-weight: 600;
+ color: #333;
+ margin: 0;
+}
+
+.page-body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 400px;
+}
+
+.placeholder-content {
+ text-align: center;
+ max-width: 400px;
+}
+
+.placeholder-icon {
+ color: #ff4757;
+ margin-bottom: 20px;
+ display: flex;
+ justify-content: center;
+}
+
+.placeholder-title {
+ font-size: 20px;
+ font-weight: 500;
+ color: #333;
+ margin: 0 0 15px 0;
+}
+
+.placeholder-desc {
+ font-size: 14px;
+ color: #666;
+ line-height: 1.6;
+ margin: 0;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .sidebar {
+ transform: translateX(-100%);
+ transition: transform 0.3s;
+ }
+
+ .main-content {
+ margin-left: 0;
+ }
+
+ .header-title {
+ display: none;
+ }
+
+ .upload-area {
+ padding: 60px 20px;
+ margin: 0 10px 30px;
+ }
+
+ .upload-info {
+ flex-direction: column;
+ gap: 30px;
+ padding: 10px;
+ }
+
+ .content-wrapper {
+ padding: 15px;
+ }
+
+ .upload-tabs {
+ gap: 15px;
+ }
+
+ .page-content {
+ padding: 20px;
+ margin: 10px;
+ }
+
+ .page-title {
+ font-size: 20px;
+ }
+
+ .placeholder-title {
+ font-size: 18px;
+ }
+
+ .placeholder-desc {
+ font-size: 13px;
+ }
+}
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..8388b7b
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,410 @@
+import React, { useState } from 'react'
+import {
+ Home,
+ Settings,
+ BarChart3,
+ PieChart,
+ TrendingUp,
+ Activity,
+ BookOpen,
+ Users,
+ Upload,
+ Image,
+ Video,
+ ChevronDown,
+ User
+} from 'lucide-react'
+import './App.css'
+
+function App() {
+ const [activeTab, setActiveTab] = useState('image')
+ const [expandedMenu, setExpandedMenu] = useState('dashboard')
+ const [activePage, setActivePage] = useState('dashboard') // 新增：当前激活的页面
+ const [isDragOver, setIsDragOver] = useState(false)
+ const [isUploading, setIsUploading] = useState(false)
+ const [uploadedFiles, setUploadedFiles] = useState([])
+ const [uploadProgress, setUploadProgress] = useState(0)
+
+ const validateFiles = (files) => {
+ const validImageTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
+ const validVideoTypes = ['video/mp4', 'video/mov', 'video/avi']
+
+ const validTypes = activeTab === 'video' ? validVideoTypes : validImageTypes
+ const maxSize = activeTab === 'video' ? 2 * 1024 * 1024 * 1024 : 32 * 1024 * 1024 // 2GB for video, 32MB for images
+
+ const invalidFiles = files.filter(file => {
+ return !validTypes.includes(file.type) || file.size > maxSize
+ })
+
+ if (invalidFiles.length > 0) {
+ alert(`发现 ${invalidFiles.length} 个无效文件，请检查文件格式和大小`)
+ return false
+ }
+
+ return true
+ }
+
+ const simulateUpload = (files) => {
+ setIsUploading(true)
+ setUploadProgress(0)
+ setUploadedFiles(files)
+
+ // 模拟上传进度
+ const interval = setInterval(() => {
+ setUploadProgress(prev => {
+ if (prev >= 100) {
+ clearInterval(interval)
+ setIsUploading(false)
+ alert(`成功上传了 ${files.length} 个文件`)
+ return 100
+ }
+ return prev + 10
+ })
+ }, 200)
+ }
+
+ const handleFileUpload = () => {
+ if (isUploading) return
+
+ const input = document.createElement('input')
+ input.type = 'file'
+ input.accept = activeTab === 'video' ? 'video/*' : 'image/*'
+ input.multiple = activeTab === 'image'
+ input.onchange = (e) => {
+ const files = Array.from(e.target.files)
+ if (files.length > 0 && validateFiles(files)) {
+ simulateUpload(files)
+ }
+ }
+ input.click()
+ }
+
+ const handleDragOver = (e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ setIsDragOver(true)
+ }
+
+ const handleDragLeave = (e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ setIsDragOver(false)
+ }
+
+ const handleDrop = (e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ setIsDragOver(false)
+
+ if (isUploading) return
+
+ const files = Array.from(e.dataTransfer.files)
+ if (files.length > 0 && validateFiles(files)) {
+ simulateUpload(files)
+ }
+ }
+
+ const clearUploadedFiles = () => {
+ setUploadedFiles([])
+ }
+
+ const removeFile = (indexToRemove) => {
+ setUploadedFiles(prev => prev.filter((_, index) => index !== indexToRemove))
+ }
+
+ const menuItems = [
+ { id: 'home', label: '首页', icon: Home },
+ { id: 'notebooks', label: '笔记管理', icon: BookOpen },
+ {
+ id: 'dashboard',
+ label: '数据看板',
+ icon: BarChart3,
+ submenu: [
+ { id: 'overview', label: '账号概况' },
+ { id: 'content', label: '内容分析' },
+ { id: 'fans', label: '粉丝数据' }
+ ]
+ },
+ { id: 'activity', label: '活动中心', icon: Activity },
+ { id: 'notes', label: '笔记灵感', icon: BookOpen },
+ { id: 'creator', label: '创作学院', icon: Users },
+ { id: 'journal', label: '创作日刊', icon: BookOpen }
+ ]
+ const toggleMenu = (menuId) => {
+ setExpandedMenu(expandedMenu === menuId ? null : menuId)
+ }
+
+ // 新增：处理页面切换的函数
+ const handlePageChange = (pageId) => {
+ setActivePage(pageId)
+ // 如果点击的是有子菜单的项目，也要展开子菜单
+ const menuItem = menuItems.find(item => item.id === pageId)
+ if (menuItem && menuItem.submenu) {
+ setExpandedMenu(pageId)
+ }
+ }
+
+ return (
+ <div className="app">
+ {/* Header */}
+ <header className="header">
+ <div className="header-left">
+ <div className="logo">小红书</div>
+ <h1 className="header-title">创作服务平台</h1>
+ </div>
+ <div className="header-right">
+ <div className="user-info">
+ <User size={16} />
+ <span>小红薯63081EA1</span>
+ </div>
+ </div>
+ </header>
+
+ {/* Sidebar */}
+ <aside className="sidebar">
+ <button className="publish-btn">发布笔记</button>
+ <nav className="nav-menu">
+ {menuItems.map((item) => (
+ <div key={item.id} className="nav-item">
+ <a
+ href="#"
+ className={`nav-link ${activePage === item.id ? 'active' : ''}`}
+ onClick={(e) => {
+ e.preventDefault()
+ if (item.submenu) {
+ toggleMenu(item.id)
+ } else {
+ handlePageChange(item.id)
+ }
+ }}
+ >
+ <item.icon size={16} />
+ <span>{item.label}</span>
+ {item.submenu && <ChevronDown size={16} style={{ marginLeft: 'auto', transform: expandedMenu === item.id ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.3s ease' }} />}
+ </a>
+
+ {item.submenu && expandedMenu === item.id && (
+ <div className="nav-submenu">
+ {item.submenu.map((subItem) => (
+ <a
+ key={subItem.id}
+ href="#"
+ className={`nav-link ${activePage === subItem.id ? 'active' : ''}`}
+ onClick={(e) => {
+ e.preventDefault()
+ handlePageChange(subItem.id)
+ }}
+ >
+ {subItem.label}
+ </a>
+ ))}
+ </div>
+ )}
+ </div>
+ ))}
+ </nav>
+ </aside> {/* Main Content */}
+ <main className="main-content">
+ <div className="content-wrapper">
+ {activePage === 'dashboard' || activePage === 'overview' || activePage === 'content' || activePage === 'fans' ? (
+ // 上传页面内容（数据看板相关页面显示上传功能）
+ <>
+ {/* Upload Tabs */}
+ <div className="upload-tabs">
+ <button
+ className={`upload-tab ${activeTab === 'video' ? 'active' : ''}`}
+ onClick={() => setActiveTab('video')}
+ >
+ 上传视频
+ </button>
+ <button
+ className={`upload-tab ${activeTab === 'image' ? 'active' : ''}`}
+ onClick={() => setActiveTab('image')}
+ >
+ 上传图文
+ </button>
+ </div>
+
+ {/* Upload Area */}
+ <div
+ className={`upload-area ${isDragOver ? 'drag-over' : ''}`}
+ onDragOver={handleDragOver}
+ onDragLeave={handleDragLeave}
+ onDrop={handleDrop}
+ >
+ <div className="upload-icon">
+ {activeTab === 'video' ? <Video /> : <Image />}
+ </div>
+ <h2 className="upload-title">
+ {activeTab === 'video' ? '拖拽视频到此处或点击上传' : '拖拽图片到此处或点击上传'}
+ </h2>
+ <p className="upload-subtitle">
+ {activeTab === 'video' ? '(需支持上传格式)' : '(需支持上传格式)'}
+ </p>
+ <button
+ className={`upload-btn ${isUploading ? 'uploading' : ''}`}
+ onClick={handleFileUpload}
+ disabled={isUploading}
+ >
+ {isUploading ? `上传中... ${uploadProgress}%` : (activeTab === 'video' ? '上传视频' : '上传图片')}
+ </button>
+
+ {/* Upload Progress Bar */}
+ {isUploading && (
+ <div className="progress-container">
+ <div className="progress-bar">
+ <div
+ className="progress-fill"
+ style={{ width: `${uploadProgress}%` }}
+ ></div>
+ </div>
+ <div className="progress-text">{uploadProgress}%</div>
+ </div>
+ )}
+ </div>
+
+ {/* File Preview Area */}
+ {uploadedFiles.length > 0 && (
+ <div className="file-preview-area">
+ <div className="preview-header">
+ <h3 className="preview-title">已上传文件 ({uploadedFiles.length})</h3>
+ <button className="clear-files-btn" onClick={clearUploadedFiles}>
+ 清除所有
+ </button>
+ </div>
+ <div className="file-grid">
+ {uploadedFiles.map((file, index) => (
+ <div key={index} className="file-item">
+ <button
+ className="remove-file-btn"
+ onClick={() => removeFile(index)}
+ title="删除文件"
+ >
+ ×
+ </button>
+ {file.type?.startsWith('image/') ? (
+ <div className="file-thumbnail">
+ <img src={URL.createObjectURL(file)} alt={file.name} />
+ </div>
+ ) : (
+ <div className="file-thumbnail video-thumbnail">
+ <Video size={24} />
+ </div>
+ )}
+ <div className="file-info">
+ <div className="file-name" title={file.name}>
+ {file.name.length > 20 ? file.name.substring(0, 17) + '...' : file.name}
+ </div>
+ <div className="file-size">
+ {(file.size / 1024 / 1024).toFixed(2)} MB
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ )}
+
+ {/* Upload Info */}
+ <div className="upload-info fade-in" key={activeTab}>
+ {activeTab === 'image' ? (
+ <>
+ <div className="info-item">
+ <h3 className="info-title">图片大小</h3>
+ <p className="info-desc">
+ 支持上传的图片大小，<br />
+ 最大32MB的图片文件
+ </p>
+ </div>
+ <div className="info-item">
+ <h3 className="info-title">图片格式</h3>
+ <p className="info-desc">
+ 支持上传的图片格式：<br />
+ 推荐使用png、jpg、jpeg、webp，不支持gif、live及其他转化的动图
+ </p>
+ </div>
+ <div className="info-item">
+ <h3 className="info-title">图片分辨率</h3>
+ <p className="info-desc">
+ 不要竖图片尺寸，推荐上传3:4尺寸之间，分辨率不低于720*960的图片，<br />
+ 超过17张的时候图片将自动压缩至相配尺寸
+ </p>
+ </div>
+ </>
+ ) : (
+ <>
+ <div className="info-item">
+ <h3 className="info-title">视频大小</h3>
+ <p className="info-desc">
+ 支持种类5分钟内视频，<br />
+ 最大2GB的视频文件
+ </p>
+ </div>
+ <div className="info-item">
+ <h3 className="info-title">视频格式</h3>
+ <p className="info-desc">
+ 支持常用视频格式：<br />
+ 推荐使用mp4、mov
+ </p>
+ </div>
+ <div className="info-item">
+ <h3 className="info-title">视频分辨率</h3>
+ <p className="info-desc">
+ 推荐上传720P (1280*720) 及以上视频，<br />
+ 超过1080P的视频可能可能导致上传稍慢且消耗流量
+ </p>
+ </div>
+ </>
+ )}
+ </div>
+ </>
+ ) : (
+ // 其他页面的内容
+ <div className="page-content">
+ <div className="page-header">
+ <h1 className="page-title">
+ {activePage === 'home' && '首页'}
+ {activePage === 'notebooks' && '笔记管理'}
+ {activePage === 'activity' && '活动中心'}
+ {activePage === 'notes' && '笔记灵感'}
+ {activePage === 'creator' && '创作学院'}
+ {activePage === 'journal' && '创作日刊'}
+ </h1>
+ </div>
+ <div className="page-body">
+ <div className="placeholder-content">
+ <div className="placeholder-icon">
+ {activePage === 'home' && <Home size={48} />}
+ {activePage === 'notebooks' && <BookOpen size={48} />}
+ {activePage === 'activity' && <Activity size={48} />}
+ {activePage === 'notes' && <BookOpen size={48} />}
+ {activePage === 'creator' && <Users size={48} />}
+ {activePage === 'journal' && <BookOpen size={48} />}
+ </div>
+ <h3 className="placeholder-title">
+ {activePage === 'home' && '欢迎来到小红书创作平台'}
+ {activePage === 'notebooks' && '笔记管理功能开发中'}
+ {activePage === 'activity' && '活动中心功能开发中'}
+ {activePage === 'notes' && '笔记灵感功能开发中'}
+ {activePage === 'creator' && '创作学院功能开发中'}
+ {activePage === 'journal' && '创作日刊功能开发中'}
+ </h3>
+ <p className="placeholder-desc">
+ {activePage === 'home' && '在这里您可以管理您的创作内容，查看数据分析，获取创作灵感。'}
+ {activePage === 'notebooks' && '这里将显示您的所有笔记，支持编辑、删除、分类等操作。'}
+ {activePage === 'activity' && '这里将展示最新的平台活动，让您参与更多有趣的创作活动。'}
+ {activePage === 'notes' && '这里将为您提供创作灵感和写作建议，帮助您创作更好的内容。'}
+ {activePage === 'creator' && '这里将提供创作技巧教学和平台规则说明，助您成为优秀创作者。'}
+ {activePage === 'journal' && '这里将展示创作相关的最新资讯和平台动态。'}
+ </p>
+ </div>
+ </div>
+ </div>
+ )}
+ </div>
+ </main>
+ </div>
+ )
+}
+
+export default App
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..72c144a
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,29 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ background-color: #f5f7fa;
+}
+
+button {
+ border: none;
+ background: none;
+ cursor: pointer;
+ font-family: inherit;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+#root {
+ width: 100%;
+ min-height: 100vh;
+}
diff --git a/xiaohongshu-platform/src/main.jsx b/src/main.jsx
similarity index 100%
rename from xiaohongshu-platform/src/main.jsx
rename to src/main.jsx
diff --git a/xiaohongshu-platform/vite.config.js b/vite.config.js
similarity index 100%
rename from xiaohongshu-platform/vite.config.js
rename to vite.config.js
diff --git a/xiaohongshu-platform/.vscode/tasks.json b/xiaohongshu-platform/.vscode/tasks.json
deleted file mode 100644
index 02a7c1a..0000000
--- a/xiaohongshu-platform/.vscode/tasks.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "version": "2.0.0",
- "tasks": [
- {
- "label": "开发服务器",
- "type": "shell",
- "command": "npm run dev",
- "group": "build",
- "isBackground": true,
- "problemMatcher": []
- }
- ]
-}
\ No newline at end of file
diff --git a/xiaohongshu-platform/package.json b/xiaohongshu-platform/package.json
deleted file mode 100644
index 71f99ed..0000000
--- a/xiaohongshu-platform/package.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "name": "xiaohongshu-platform",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "vite build",
- "lint": "eslint .",
- "preview": "vite preview"
- },
- "dependencies": {
- "react": "^18.3.1",
- "react-dom": "^18.3.1",
- "lucide-react": "^0.460.0",
- "react-icons": "^5.4.0"
- },
- "devDependencies": {
- "@eslint/js": "^9.13.0",
- "@types/react": "^18.3.12",
- "@types/react-dom": "^18.3.1",
- "@vitejs/plugin-react": "^4.3.3",
- "eslint": "^9.13.0",
- "eslint-plugin-react": "^7.37.2",
- "eslint-plugin-react-hooks": "^5.0.0",
- "eslint-plugin-react-refresh": "^0.4.14",
- "globals": "^15.11.0",
- "vite": "^6.0.1"
- }
-}
diff --git a/xiaohongshu-platform/src/App.css b/xiaohongshu-platform/src/App.css
deleted file mode 100644
index 3377645..0000000
--- a/xiaohongshu-platform/src/App.css
+++ /dev/null
@@ -1,233 +0,0 @@
-.app {
- display: flex;
- flex-direction: column;
- min-height: 100vh;
- background-color: #f5f5f5;
-}
-
-/* Header Styles */
-.header {
- background: white;
- border-bottom: 1px solid #e0e0e0;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- z-index: 100;
-}
-
-.header-content {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 1rem 2rem;
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.logo {
- font-size: 1.5rem;
- font-weight: bold;
- color: #ff2442;
- margin: 0;
-}
-
-.search-bar {
- display: flex;
- align-items: center;
- background: #f8f8f8;
- border-radius: 20px;
- padding: 0.5rem 1rem;
- flex: 1;
- max-width: 400px;
- margin: 0 2rem;
-}
-
-.search-bar input {
- border: none;
- background: none;
- outline: none;
- margin-left: 0.5rem;
- width: 100%;
-}
-
-.header-actions {
- display: flex;
- gap: 1rem;
- align-items: center;
-}
-
-.header-actions svg {
- cursor: pointer;
- color: #666;
-}
-
-/* Main Content */
-.main-content {
- flex: 1;
- padding-top: 80px;
- padding-bottom: 80px;
-}
-
-.posts-container {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
- gap: 1rem;
- padding: 1rem;
- max-width: 1200px;
- margin: 0 auto;
-}
-
-/* Post Card Styles */
-.post-card {
- background: white;
- border-radius: 12px;
- overflow: hidden;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
- transition: transform 0.2s ease;
- cursor: pointer;
-}
-
-.post-card:hover {
- transform: translateY(-2px);
-}
-
-.post-image {
- width: 100%;
- height: 200px;
- overflow: hidden;
-}
-
-.post-image img {
- width: 100%;
- height: 100%;
- object-fit: cover;
-}
-
-.post-content {
- padding: 1rem;
-}
-
-.post-title {
- font-size: 1rem;
- font-weight: 600;
- margin: 0 0 0.5rem 0;
- color: #333;
- line-height: 1.3;
-}
-
-.post-description {
- font-size: 0.9rem;
- color: #666;
- margin: 0 0 1rem 0;
- line-height: 1.4;
-}
-
-.post-author {
- display: flex;
- align-items: center;
- margin-bottom: 1rem;
-}
-
-.author-avatar {
- width: 24px;
- height: 24px;
- border-radius: 50%;
- margin-right: 0.5rem;
-}
-
-.author-name {
- font-size: 0.8rem;
- color: #666;
-}
-
-/* Post Actions */
-.post-actions {
- display: flex;
- align-items: center;
- gap: 1rem;
-}
-
-.action-btn {
- display: flex;
- align-items: center;
- gap: 0.3rem;
- background: none;
- border: none;
- color: #666;
- cursor: pointer;
- font-size: 0.8rem;
- padding: 0.3rem;
- border-radius: 4px;
- transition: all 0.2s ease;
-}
-
-.action-btn:hover {
- background: #f0f0f0;
-}
-
-.action-btn.liked {
- color: #ff4757;
-}
-
-.action-btn.saved {
- color: #ffa502;
-}
-
-/* Bottom Navigation */
-.bottom-nav {
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- background: white;
- border-top: 1px solid #e0e0e0;
- display: flex;
- justify-content: space-around;
- padding: 0.5rem 0;
- z-index: 100;
-}
-
-.nav-btn {
- display: flex;
- flex-direction: column;
- align-items: center;
- background: none;
- border: none;
- color: #999;
- cursor: pointer;
- padding: 0.5rem;
- transition: color 0.2s ease;
-}
-
-.nav-btn.active {
- color: #ff2442;
-}
-
-.nav-btn span {
- font-size: 0.7rem;
- margin-top: 0.2rem;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
- .header-content {
- padding: 1rem;
- }
-
- .search-bar {
- margin: 0 1rem;
- }
-
- .posts-container {
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- padding: 0.5rem;
- gap: 0.5rem;
- }
-}
-
-@media (max-width: 480px) {
- .posts-container {
- grid-template-columns: repeat(2, 1fr);
- }
-}
diff --git a/xiaohongshu-platform/src/App.jsx b/xiaohongshu-platform/src/App.jsx
deleted file mode 100644
index 503ca6b..0000000
--- a/xiaohongshu-platform/src/App.jsx
+++ /dev/null
@@ -1,158 +0,0 @@
-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;
diff --git a/xiaohongshu-platform/src/index.css b/xiaohongshu-platform/src/index.css
deleted file mode 100644
index 9ef6886..0000000
--- a/xiaohongshu-platform/src/index.css
+++ /dev/null
@@ -1,70 +0,0 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- color: white;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- color: #213547;
- }
-}
diff --git "a/\351\241\271\347\233\256\346\201\242\345\244\215\346\212\245\345\221\212.md" "b/\351\241\271\347\233\256\346\201\242\345\244\215\346\212\245\345\221\212.md"
new file mode 100644
index 0000000..32a335b
--- /dev/null
+++ "b/\351\241\271\347\233\256\346\201\242\345\244\215\346\212\245\345\221\212.md"
@@ -0,0 +1,105 @@
+# 小红书创作平台 - 项目恢复完成 ✅
+
+## 恢复状态
+
+🎉 **项目已完全恢复！**所有代码和功能都已重新创建并正常工作。
+
+## 当前项目包含：
+
+### 📁 文件结构
+```
+e:\api大作业\发布页面/
+├── index.html # HTML入口文件
+├── package.json # 项目配置和依赖
+├── README.md # 详细项目文档
+├── vite.config.js # Vite构建配置
+├── public/
+│ └── vite.svg # Vite图标
+└── src/
+ ├── App.css # 主要样式文件
+ ├── App.jsx # 主应用组件
+ ├── index.css # 全局样式
+ └── main.jsx # React应用入口
+```
+
+### 🚀 核心功能
+
+1. **完整的小红书创作平台界面**
+ - ✅ 头部导航栏（Logo + 用户信息）
+ - ✅ 侧边栏菜单（可展开子菜单）
+ - ✅ 上传区域（图片/视频切换）
+ - ✅ 文件预览网格
+ - ✅ 响应式设计
+
+2. **上传功能**
+ - ✅ 拖拽上传
+ - ✅ 点击上传
+ - ✅ 文件类型验证
+ - ✅ 文件大小限制
+ - ✅ 上传进度条
+ - ✅ 实时预览
+
+3. **文件管理**
+ - ✅ 文件缩略图显示
+ - ✅ 文件信息展示
+ - ✅ 单个文件删除
+ - ✅ 批量清除功能
+ - ✅ 文件计数
+
+4. **交互体验**
+ - ✅ 拖拽视觉反馈
+ - ✅ 悬停动画效果
+ - ✅ 加载状态显示
+ - ✅ 操作成功提示
+
+### 🛠️ 技术栈
+
+- **React 18.3.1** - 前端框架
+- **Vite 6.0.5** - 构建工具
+- **Lucide React 0.468.0** - 图标库
+- **纯CSS** - 样式设计
+
+### 📱 当前状态
+
+- ✅ 依赖安装完成
+- ✅ 开发服务器运行中
+- ✅ 浏览器已打开应用 (http://localhost:5173)
+- ✅ 所有功能正常工作
+- ✅ 无代码错误
+
+### 🎯 功能测试清单
+
+可以测试以下功能：
+
+1. **界面导航**
+ - [ ] 点击侧边栏菜单项
+ - [ ] 展开/收起数据看板子菜单
+ - [ ] 切换上传标签页（图片/视频）
+
+2. **文件上传**
+ - [ ] 点击上传按钮选择文件
+ - [ ] 拖拽文件到上传区域
+ - [ ] 观察上传进度条动画
+ - [ ] 查看文件预览效果
+
+3. **文件管理**
+ - [ ] 悬停文件项查看删除按钮
+ - [ ] 删除单个文件
+ - [ ] 清除所有文件
+
+4. **响应式测试**
+ - [ ] 调整浏览器窗口大小
+ - [ ] 测试移动端适配
+
+### 🔄 后续开发
+
+项目已为API集成做好准备：
+
+1. **替换模拟上传** → 真实API调用
+2. **添加用户认证** → 登录/注册功能
+3. **连接后端数据** → 真实数据存储
+4. **添加路由** → 页面导航功能
+
+---
+
+**🎊 恢复完成！项目已经可以正常使用了！**
