# S3网页浏览器

**Repository Path**: ls007player/s3-web-browser

## Basic Information

- **Project Name**: S3网页浏览器
- **Description**: 用python构建的S3网页浏览器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-30
- **Last Updated**: 2026-03-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# S3对象存储浏览器

[![Python version](https://img.shields.io/badge/python-3.10+-blue.svg)](https://python.org)
[![Vue3](https://img.shields.io/badge/Vue-3.5+-green.svg)](https://vuejs.org)
[![Element Plus](https://img.shields.io/badge/ElementPlus-2.10+-blue.svg)](https://element-plus.org)
[![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)

一个现代化的S3对象存储浏览器，专为联通云OBS（对象存储服务）优化设计。基于Vue3 + Flask技术栈，提供直观的Web界面来管理S3存储桶和文件。

## 🌟 核心特性

### 📁 文件管理
- **完整的文件浏览**: 树形目录结构，支持文件夹导航
- **智能文件操作**: 上传、下载、删除、重命名、移动
- **批量操作**: 支持多选文件的批量下载和删除
- **文件预览**: 支持图片、视频、文档等多种格式的在线预览
- **拖拽上传**: 支持文件拖拽上传

### 🪣 Bucket管理
- **存储桶列表**: 展示所有存储桶，包含容量、区域、版本控制状态
- **创建Bucket**: 可视化创建存储桶，支持ACL和版本控制配置
- **Bucket详情**: 实时查看存储桶大小、对象数量等统计信息
- **删除Bucket**: 安全的Bucket删除操作，确保数据完整性

### 🔐 权限控制
- **ACL管理**: 图形化界面设置文件和Bucket的访问权限
- **Bucket Policy**: 策略编辑器，支持JSON格式的策略配置
- **生命周期管理**: 自动化数据生命周期规则配置
- **公共访问控制**: 阻止公共访问的统一管理

### 🔄 版本控制
- **历史版本**: 查看文件的所有历史版本
- **版本恢复**: 一键恢复到指定历史版本
- **删除标记**: 管理删除标记，支持彻底删除
- **版本状态**: 实时显示版本控制开关状态

### 🚀 高级功能
- **分片上传**: 大文件分片上传，支持断点续传
- **URL直传**: 通过URL直接上传网络文件
- **日志服务**: 访问日志配置和查询分析
- **静态网站**: 一键配置Bucket为静态网站托管
- **预签名URL**: 生成临时访问链接，支持自定义有效期

## 🖥️ 界面预览

<div align="center">
  <img src="docs/image.png" alt="Bucket列表页面" width="800"/>
  <p><em>Bucket列表 - 展示所有存储桶信息</em></p>
  
  <img src="docs/image-1.png" alt="文件浏览页面" width="800"/>
  <p><em>文件浏览 - 直观的文件管理界面</em></p>
  
  <img src="docs/image-2.png" alt="权限管理页面" width="800"/>
  <p><em>权限管理 - 细粒度的权限控制</em></p>
</div>

## 🛠️ 技术架构

### 前端技术栈
- **Vue 3.5** - 渐进式JavaScript框架
- **Element Plus 2.10** - Vue3组件库
- **Vite 7.0** - 现代构建工具
- **Pinia 3.0** - 状态管理
- **Vue Router 4.5** - 路由管理
- **Axios** - HTTP客户端

### 后端技术栈
- **Python 3.10+** - 后端开发语言
- **Flask 3.1** - 轻量级Web框架
- **Boto3 1.35** - AWS SDK for Python
- **Gunicorn 23.0** - WSGI HTTP服务器

### 兼容性
- **S3协议**: 完全兼容Amazon S3 API
- **联通云OBS**: 针对联通云OBS优化配置
- **其他S3服务**: 支持任何兼容S3协议的对象存储服务

## 🚀 快速开始

### 环境要求
- Python 3.10+
- Node.js 16+
- 联通云OBS账号（或其他S3服务）

### 1. 获取代码
```bash
git clone <repository-url>
cd s3-browser-v2
```

### 2. 后端配置和启动

#### 方式一：Docker部署（推荐）
```bash
cd backend

# 1. 配置环境变量
cp .env.example .env
# 编辑.env文件，填入联通云OBS配置

# 2. 构建镜像
docker build -t s3-browser .

# 3. 运行容器
docker run -it --rm -p 8000:8000 --env-file .env s3-browser
```

#### 方式二：本地开发
```bash
cd backend

# 1. 安装依赖
pip install -r requirements.txt
# 或使用poetry
poetry install

# 2. 配置环境变量
export AWS_ACCESS_KEY_ID="你的AccessKey"
export AWS_SECRET_ACCESS_KEY="你的SecretKey"
export AWS_ENDPOINT_URL="http://obs-fujian-zhihcs.cucloud.cn"

# 3. 启动服务
python run.py
# 或使用poetry
poetry run python run.py
```

### 3. 前端配置和启动
```bash
cd frontend

# 1. 安装依赖
npm install

# 2. 配置API地址（可选）
# 编辑 .env 文件，修改VITE_API_BASE_URL

# 3. 启动开发服务器
npm run dev

# 4. 构建生产版本
npm run build
```

### 4. 访问应用
- 开发环境：http://localhost:5173
- 生产环境：http://localhost:8000

## ⚙️ 配置说明

### 联通云OBS配置
```python
# backend/.env文件示例
AWS_ACCESS_KEY_ID=你的AccessKey
AWS_SECRET_ACCESS_KEY=你的SecretKey
AWS_ENDPOINT_URL=http://obs-fujian-zhihcs.cucloud.cn
AWS_DEFAULT_REGION=fujian-zhihcs
```

### 前端API配置
```bash
# frontend/.env文件
VITE_API_BASE_URL=http://localhost:8000
```

### Docker环境变量
```bash
# Docker运行时环境变量
-e AWS_ACCESS_KEY_ID=你的AccessKey
-e AWS_SECRET_ACCESS_KEY=你的SecretKey
-e AWS_ENDPOINT_URL=http://obs-fujian-zhihcs.cucloud.cn
```

## 📖 API文档

### 主要API端点

#### Bucket管理
```
GET    /api/v1/buckets              # 获取存储桶列表
POST   /api/v1/buckets              # 创建存储桶
DELETE /api/v1/buckets/{name}       # 删除存储桶
GET    /api/v1/buckets/{name}/details # 获取存储桶详情
```

#### 对象管理
```
GET    /api/v1/buckets/{name}/objects # 获取对象列表
POST   /api/v1/buckets/{name}/delete-items # 批量删除对象
POST   /api/v1/batch_download_items # 批量下载对象
GET    /api/v1/preview              # 文件预览
```

#### 权限管理
```
GET    /api/v1/buckets/{name}/acl   # 获取ACL信息
PUT    /api/v1/buckets/{name}/acl   # 设置ACL
GET    /api/v1/buckets/{name}/policy # 获取策略
PUT    /api/v1/buckets/{name}/policy # 设置策略
```

## 🔧 开发指南

### 后端开发
```bash
cd backend

# 代码质量检查
make cq

# 运行测试
make test

# 使用poetry开发环境
poetry shell
poetry run python run.py
```

### 前端开发
```bash
cd frontend

# 开发服务器
npm run dev

# 代码格式化
npm run format

# 类型检查
npm run type-check
```

## 📁 项目结构

```
s3-browser-v2/
├── backend/                    # Flask后端
│   ├── s3_web_browser/        # 核心应用代码
│   │   ├── routes.py          # API路由
│   │   ├── s3.py             # S3操作封装
│   │   └── __init__.py        # 应用初始化
│   ├── requirements.txt       # Python依赖
│   ├── Dockerfile            # Docker配置
│   └── .env.example          # 环境变量示例
├── frontend/                   # Vue3前端
│   ├── src/                   # 源代码
│   │   ├── components/        # 组件
│   │   ├── views/            # 页面
│   │   ├── stores/           # 状态管理
│   │   └── api/              # API接口
│   ├── package.json          # 项目配置
│   └── vite.config.js        # Vite配置
├── docs/                      # 文档和图片
└── README.md                 # 项目说明
```

## 🤝 贡献指南

1. Fork本项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建Pull Request

## 📄 许可证

本项目采用MIT许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🙏 致谢

- [Flask](https://flask.palletsprojects.com/) - 优秀的Python Web框架
- [Vue.js](https://vuejs.org/) - 渐进式JavaScript框架
- [Element Plus](https://element-plus.org/) - 精美的Vue3组件库
- [Boto3](https://boto3.amazonaws.com/) - AWS SDK for Python
- [联通云](https://www.cucloud.cn/) - 提供稳定的对象存储服务

## 📞 支持和联系

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

- 提交 [Issue](https://github.com/your-repo/issues)
- 发送邮件至：[your-email@example.com]
- 访问项目主页：[your-project-url]

---

<div align="center">
  <p><strong>S3对象存储浏览器</strong> - 让云存储管理变得简单</p>
</div>