2025/picstack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
picstack-ui
2 Commits 1 Branch 0 Tags 144 KiB
TypeScript 90.7%
CSS 8.8%
HTML 0.5%
7d32dee944
Go to file
Leo 7d32dee944 添加项目文档和静态资源 
- 添加 README.md 项目说明文档
- 添加 index.html 入口文件
- 添加 public 目录的静态资源
- 添加 docs 目录的项目文档
2025-10-19 21:46:15 +08:00
docs 添加项目文档和静态资源 2025-10-19 21:46:15 +08:00
public 添加项目文档和静态资源 2025-10-19 21:46:15 +08:00
.gitignore 初始化项目配置 2025-10-19 21:45:37 +08:00
index.html 添加项目文档和静态资源 2025-10-19 21:46:15 +08:00
package-lock.json 初始化项目配置 2025-10-19 21:45:37 +08:00
package.json 初始化项目配置 2025-10-19 21:45:37 +08:00
README.md 添加项目文档和静态资源 2025-10-19 21:46:15 +08:00
tsconfig.json 初始化项目配置 2025-10-19 21:45:37 +08:00

README.md

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！

📧 联系方式

如有问题或建议，请通过以下方式联系：

让每一张图片都找到最佳归宿，让创作更专注于内容本身

© 2025 PicStack. All rights reserved.