# file-management-system

**Repository Path**: faiz-rlw/file-management-system

## Basic Information

- **Project Name**: file-management-system
- **Description**: 一款基于 Electron 的桌面端文件管理系统，支持多用户登录、磁盘文件同步、在线预览、权限控制等功能，适用于小型团队的集中式文件管理场景。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-04-25
- **Last Updated**: 2026-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Electron, Vue, vite, Express, Sqlite

## README

# FileManage - 文件管理系统

基于 Electron + Vue 3 + TypeScript 的桌面端文件管理系统，支持多用户协作、权限控制、实时同步和文件在线预览。

## 技术栈

| 层级 | 技术 |
|------|------|
| 桌面框架 | Electron 39 |
| 前端框架 | Vue 3 (Composition API) + TypeScript 5 |
| UI 组件库 | Ant Design Vue 4 |
| 状态管理 | Pinia |
| 后端服务 | Express 5 (内嵌于 Electron 主进程) |
| 数据库 | Better-SQLite3 |
| 构建 | electron-vite + electron-builder |

## 功能概览

- **文件浏览** — 网格/列表双视图，侧边栏目录树导航，面包屑路径
- **文件上传** — 分片上传（10MB/片）、断点续传、文件夹上传、拖拽上传
- **文件预览** — 图片、视频、音频、PDF、文本、Office 文档（Word/Excel/PPT）
- **文件操作** — 重命名、移动、复制、删除、批量操作、拖拽移动
- **搜索与筛选** — 全局搜索、按类型筛选（图片/文档/视频/音频/压缩包）、多维排序
- **回收站** — 软删除、还原、永久删除、清空回收站
- **权限系统** — 基于角色的文件可见性控制，管理员/普通用户分级
- **用户管理** — 用户增删改查、角色管理、账号启用/禁用
- **实时协作** — WebSocket 推送文件变更、在线用户列表、冲突检测
- **磁盘同步** — 自动扫描本地磁盘，管理员可触发全量同步
- **操作日志** — 完整的审计日志，支持按操作类型和时间范围筛选
- **系统维护** — 缓存清理、数据导出/导入

## 快速开始

### 环境要求

- Node.js >= 18
- pnpm

### 安装

```bash
pnpm install
```

### 开发

```bash
pnpm dev
```

### 构建

```bash
# Windows
pnpm build:win

# macOS
pnpm build:mac

# Linux
pnpm build:linux
```

### 其他命令

```bash
pnpm lint        # ESLint 检查
pnpm format      # Prettier 格式化
pnpm typecheck   # TypeScript 类型检查
pnpm start       # 预览生产构建
```

## 项目结构

```
src/
├── main/                  # Electron 主进程
│   ├── index.ts           # 入口，BrowserWindow + IPC + Express 服务
│   ├── server/            # Express 后端
│   │   ├── routes/        # API 路由（auth, files, upload, users, roles...）
│   │   ├── middleware/    # JWT 认证中间件
│   │   └── ws.ts          # WebSocket 服务
│   └── db/                # Better-SQLite3 数据层
├── preload/               # 预加载脚本，contextBridge 桥接
│   ├── index.ts
│   └── index.d.ts         # window.api 类型声明
└── renderer/              # Vue 3 渲染进程
    └── src/
        ├── api/           # Axios HTTP 客户端（Token 自动刷新）
        ├── components/    # 组件（Toolbar, FileGrid, FileList, FileUpload...）
        ├── router/        # Vue Router 路由配置
        ├── stores/        # Pinia 状态仓库
        ├── views/         # 页面视图
        └── ws/            # WebSocket 客户端（指数退避重连）
```

## 架构

应用采用 Electron 三进程架构：

1. **主进程** — Node.js 环境，管理窗口生命周期，内嵌 Express 提供 HTTP/WebSocket 服务
2. **预加载** — 安全桥接层，通过 `contextBridge` 暴露 API 给渲染进程
3. **渲染进程** — Vue 3 SPA，负责所有 UI 交互

渲染进程通过 HTTP API 与主进程的 Express 服务通信，通过 WebSocket 接收实时推送。

## 推荐开发环境

- [VS Code](https://code.visualstudio.com/)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## 代码风格

- Prettier：单引号，无分号，100 字符宽度，无尾逗号
- EditorConfig：2 空格缩进，LF 换行，UTF-8
- ESLint：TypeScript + Vue 推荐规则