# 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.