204 lines
5.3 KiB
Markdown
204 lines
5.3 KiB
Markdown
# PicStack - 专业图床管理平台
|
||
|
||
> 面向开发者与内容创作者的专业级图床解决方案，支持多云存储、智能处理与高效管理
|
||
|
||
## ✨ 核心特性
|
||
|
||
### 🚀 多存储后端支持
|
||
- **本地存储** - 快速便捷的本地文件管理
|
||
- **MinIO** - 开源高性能对象存储
|
||
- **阿里云 OSS** - 稳定可靠的云存储服务
|
||
- **腾讯云 COS** - 企业级云端存储方案
|
||
|
||
### 📤 强大的上传功能
|
||
- **拖拽上传** - 拖放文件即可上传
|
||
- **粘贴上传** - Ctrl/Cmd + V 快速上传
|
||
- **批量上传** - 一次选择多个文件
|
||
- **进度显示** - 实时查看上传进度
|
||
- **断点续传** - 大文件上传更安全
|
||
|
||
### 🖼️ 智能图片管理
|
||
- **相册分类** - 灵活的相册组织方式
|
||
- **标签系统** - 多标签支持，快速检索
|
||
- **高级搜索** - 按文件名、标签、日期筛选
|
||
- **批量操作** - 移动、删除、下载一键完成
|
||
- **收藏夹** - 快速访问常用图片
|
||
|
||
### 🔗 链接生成与分享
|
||
- **Markdown 格式** - 适用于 Markdown 文档
|
||
- **HTML 代码** - 直接嵌入网页
|
||
- **直链 URL** - 快速复制图片链接
|
||
- **自定义模板** - 支持自定义链接格式
|
||
- **二维码生成** - 扫码分享（开发中）
|
||
|
||
### 🛠️ 图片处理工具
|
||
- **智能压缩** - 无损/有损压缩可选
|
||
- **水印添加** - 文字/图片水印支持
|
||
- **格式转换** - JPG/PNG/WebP/AVIF
|
||
- **尺寸调整** - 裁剪、缩放自由控制
|
||
- **批量处理** - 一次处理多张图片
|
||
|
||
### 📊 存储监控与统计
|
||
- **空间监控** - 实时查看存储使用情况
|
||
- **流量统计** - 上传下载流量分析
|
||
- **成本预估** - 智能计算存储成本
|
||
- **数据可视化** - 直观的图表展示
|
||
|
||
## 🎨 技术栈
|
||
|
||
### 核心框架
|
||
- **React 18** - 最新的 React 版本
|
||
- **TypeScript** - 类型安全的 JavaScript
|
||
- **Vite** - 下一代前端构建工具
|
||
|
||
### UI 组件
|
||
- **Ant Design 5** - 企业级 UI 组件库
|
||
- **Framer Motion** - 流畅的动画效果
|
||
|
||
### 状态管理
|
||
- **Zustand** - 轻量级状态管理
|
||
- **React Router 6** - 现代化路由方案
|
||
|
||
### 工具库
|
||
- **React Dropzone** - 文件拖拽上传
|
||
- **Browser Image Compression** - 客户端图片压缩
|
||
- **Copy to Clipboard** - 剪贴板操作
|
||
- **dayjs** - 轻量级日期处理
|
||
|
||
## 📦 快速开始
|
||
|
||
### 安装依赖
|
||
|
||
\`\`\`bash
|
||
npm install
|
||
\`\`\`
|
||
|
||
### 启动开发服务器
|
||
|
||
\`\`\`bash
|
||
npm run dev
|
||
\`\`\`
|
||
|
||
### 构建生产版本
|
||
|
||
\`\`\`bash
|
||
npm run build
|
||
\`\`\`
|
||
|
||
### 预览生产构建
|
||
|
||
\`\`\`bash
|
||
npm run preview
|
||
\`\`\`
|
||
|
||
## 📂 项目结构
|
||
|
||
\`\`\`
|
||
picstack/
|
||
├── src/
|
||
│ ├── api/ # API 接口
|
||
│ ├── assets/ # 静态资源
|
||
│ ├── components/ # 通用组件
|
||
│ │ ├── common/ # 基础组件
|
||
│ │ ├── upload/ # 上传组件
|
||
│ │ ├── gallery/ # 图库组件
|
||
│ │ ├── links/ # 链接组件
|
||
│ │ └── charts/ # 图表组件
|
||
│ ├── hooks/ # 自定义 Hooks
|
||
│ ├── layouts/ # 布局组件
|
||
│ ├── pages/ # 页面组件
|
||
│ ├── routes/ # 路由配置
|
||
│ ├── services/ # 业务逻辑服务
|
||
│ ├── stores/ # Zustand 状态管理
|
||
│ ├── theme/ # 主题配置
|
||
│ ├── types/ # TypeScript 类型
|
||
│ ├── utils/ # 工具函数
|
||
│ ├── App.tsx # 根组件
|
||
│ ├── main.tsx # 入口文件
|
||
│ └── global.css # 全局样式
|
||
├── docs/ # 文档
|
||
├── package.json
|
||
├── tsconfig.json
|
||
├── vite.config.ts
|
||
└── README.md
|
||
\`\`\`
|
||
|
||
## 🎯 功能路由
|
||
|
||
- `/` - 首页（重定向到仪表盘）
|
||
- `/dashboard` - 仪表盘
|
||
- `/upload` - 上传中心
|
||
- `/gallery` - 图片库
|
||
- `/links` - 链接管理
|
||
- `/tools` - 图片处理工具
|
||
- `/storage` - 存储配置
|
||
- `/analytics` - 统计分析
|
||
- `/settings` - 设置中心
|
||
|
||
## 🎨 设计理念
|
||
|
||
### 品牌关键词
|
||
- **专业可靠** - Professional & Reliable
|
||
- **高效简洁** - Efficient & Clean
|
||
- **多云智能** - Multi-Cloud & Smart
|
||
- **开发者友好** - Developer Friendly
|
||
- **视觉现代** - Modern & Visual
|
||
|
||
### 配色方案
|
||
- **主色** - #1677FF (科技蓝)
|
||
- **成功色** - #52C41A (绿色)
|
||
- **警告色** - #FAAD14 (橙色)
|
||
- **错误色** - #FF4D4F (红色)
|
||
- **背景色** - #F5F7FA (淡灰蓝)
|
||
|
||
### 设计原则
|
||
- 亮色主题优先，简洁现代
|
||
- 卡片式布局，统一视觉
|
||
- 渐变装饰，科技感氛围
|
||
- 流畅动效，优雅交互
|
||
|
||
## 🚧 开发路线图
|
||
|
||
### v1.0 (当前版本)
|
||
- [x] 项目架构搭建
|
||
- [x] 基础 UI 组件
|
||
- [x] 路由与导航
|
||
- [x] 状态管理
|
||
- [x] 主题系统
|
||
- [x] 基础页面框架
|
||
|
||
### v1.1 (计划中)
|
||
- [ ] 完整的上传功能
|
||
- [ ] 图片库详细视图
|
||
- [ ] 实际存储后端集成
|
||
- [ ] 图片处理功能
|
||
- [ ] API 文档
|
||
|
||
### v2.0 (未来)
|
||
- [ ] 用户系统
|
||
- [ ] 团队协作
|
||
- [ ] API 接口
|
||
- [ ] CDN 加速
|
||
- [ ] 移动端适配
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License
|
||
|
||
## 👥 贡献
|
||
|
||
欢迎提交 Issue 和 Pull Request！
|
||
|
||
## 📧 联系方式
|
||
|
||
如有问题或建议，请通过以下方式联系：
|
||
|
||
- GitHub Issues: [项目地址](https://github.com/yourusername/picstack)
|
||
- Email: support@picstack.com
|
||
|
||
---
|
||
|
||
**让每一张图片都找到最佳归宿，让创作更专注于内容本身**
|
||
|
||
© 2025 PicStack. All rights reserved.
|