# manage_pic_front

**Repository Path**: liweiwei2019/manage_pic_front

## Basic Information

- **Project Name**: manage_pic_front
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-13
- **Last Updated**: 2025-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 分布式图片预览管理系统 - 前端

基于产品需求文档开发的分布式文件管理与预览解决方案的前端部分，支持本地存储、文件映射和Amazon S3云端存储三种模式。

## 功能特性

### 核心功能
- **标签管理**: 支持创建、编辑、删除标签，支持颜色自定义和文件类型限制
- **文件上传**: 支持拖拽上传，批量上传，存储模式选择（本地/映射/S3）
- **标签查询与过滤**: 多标签组合过滤，文件类型过滤，存储模式过滤
- **时间轴浏览**: 按时间顺序浏览文件，支持月份/日期分组
- **文件预览**: 支持图片、视频、音频等多媒体文件预览
- **文件管理**: 下载、分享、删除、重命名等操作

### 技术栈
- **React 19** + **TypeScript**
- **Material-UI (MUI)** - 现代化UI组件库
- **Vite** - 快速构建工具
- **Axios** - HTTP客户端
- **React Router** - 路由管理
- **React Dropzone** - 文件拖拽上传
- **Date-fns** - 日期处理

## 项目结构

```
src/
├── components/          # 可复用组件
│   ├── FileList.tsx     # 文件列表组件
│   ├── FileUpload.tsx   # 文件上传组件
│   ├── TagManager.tsx   # 标签管理组件
│   ├── TimelineView.tsx # 时间轴视图
│   ├── ImagePreview.tsx # 图片预览
│   └── FilePreview.tsx  # 文件预览
├── pages/              # 页面组件
│   ├── HomePage.tsx    # 主页面
│   └── MainLayout.tsx  # 主布局
├── contexts/           # React Context
│   └── AppContext.tsx  # 应用状态管理
├── services/           # API服务
│   └── api.ts         # API封装
├── types/              # TypeScript类型定义
│   └── index.ts       # 类型定义
├── utils/              # 工具函数
│   └── config.ts      # 配置和工具函数
└── App.tsx            # 应用入口
```

## 快速开始

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

## 环境配置

### 开发环境
```bash
# 设置API基础URL
VITE_API_BASE_URL=http://localhost:8080/api
```

### 生产环境
```bash
# 设置API基础URL
VITE_API_BASE_URL=https://your-domain.com/api
```

## 功能详解

### 1. 文件上传
- **拖拽上传**: 支持拖拽文件到上传区域
- **批量上传**: 一次选择多个文件
- **存储模式**: 支持本地存储、文件映射、Amazon S3
- **标签选择**: 上传时可为文件添加标签
- **进度显示**: 实时显示上传进度

### 2. 文件浏览
- **网格视图**: 缩略图网格展示
- **列表视图**: 详细信息列表展示
- **时间轴视图**: 按时间顺序展示
- **过滤搜索**: 多维度筛选文件

### 3. 标签管理
- **创建标签**: 自定义标签名称和颜色
- **编辑标签**: 修改标签属性
- **删除标签**: 安全删除标签
- **标签过滤**: 按标签筛选文件

### 4. 文件操作
- **预览**: 支持多种文件类型预览
- **下载**: 直接下载文件
- **分享**: 生成分享链接
- **删除**: 安全删除文件

## API接口

### 文件相关
- `GET /api/files` - 获取文件列表
- `POST /api/files/upload` - 上传文件
- `GET /api/files/:id` - 获取文件详情
- `DELETE /api/files/:id` - 删除文件
- `POST /api/files/:id/share` - 分享文件

### 标签相关
- `GET /api/tags` - 获取标签列表
- `POST /api/tags` - 创建标签
- `PUT /api/tags/:id` - 更新标签
- `DELETE /api/tags/:id` - 删除标签

## 开发指南

### 添加新组件
1. 在 `src/components/` 目录创建新组件
2. 使用 TypeScript 编写，定义 Props 接口
3. 遵循 Material-UI 设计规范

### 状态管理
- 使用 `AppContext` 管理全局状态
- 组件内部状态使用 `useState`
- 复杂状态使用 `useReducer`

### 样式规范
- 使用 Material-UI 主题系统
- 避免内联样式，使用 `sx` prop
- 响应式设计，支持移动端

## 部署说明

### 静态部署
1. 运行 `npm run build` 生成构建文件
2. 将 `dist/` 目录部署到静态服务器

### Docker部署
```dockerfile
FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

## 贡献指南

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