13e2bc9637
- 添加 main.tsx 应用入口 - 添加 App.tsx 根组件 - 配置路由系统（React Router v7） - 添加状态管理（Zustand） - 定义 TypeScript 类型 |
||
|---|---|---|
| docs | ||
| public | ||
| src | ||
| .gitignore | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
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 (当前版本)
- 项目架构搭建
- 基础 UI 组件
- 路由与导航
- 状态管理
- 主题系统
- 基础页面框架
v1.1 (计划中)
- 完整的上传功能
- 图片库详细视图
- 实际存储后端集成
- 图片处理功能
- API 文档
v2.0 (未来)
- 用户系统
- 团队协作
- API 接口
- CDN 加速
- 移动端适配
📄 许可证
MIT License
👥 贡献
欢迎提交 Issue 和 Pull Request！
📧 联系方式
如有问题或建议，请通过以下方式联系：
- GitHub Issues: 项目地址
- Email: support@picstack.com
让每一张图片都找到最佳归宿，让创作更专注于内容本身
© 2025 PicStack. All rights reserved.