协同网络云盘桌面客户端 (Collaborative Network Disk Client)

基于 Electron + Vue 3 + TypeScript 的协同云盘桌面端

📖 项目简介

本项目是协同网络云盘系统的官方桌面客户端，采用现代化的 Electron + Vue 3 技术栈构建。它突破了浏览器沙箱限制，提供了更深度集成的文件操作体验，包括系统级文件拖拽上传、流式下载、以及基于 Monaco Editor 的专业级代码在线协作功能。

客户端设计遵循现代 UI/UX 规范，实现了无边框窗口、自定义标题栏、动态主题色以及流畅的交互动画，旨在为用户提供媲美原生应用的操作体验。

客户端主页：

编辑功能：

预览功能：

---

🚀 核心功能模块

1. 现代化界面交互

• 无边框设计 (Frameless)：完全自定义的窗口标题栏与控制按钮，深度融合 Windows 原生风格。
• 响应式布局：基于 Element Plus 定制的现代化 UI，适配不同尺寸窗口。
• 系统集成：支持文件拖入应用直接上传，系统托盘集成（待扩展）。

2. 文件核心管理

• 文件浏览：支持 Grid 网格视图与列表视图，区分文件类型图标。
• 全功能操作：
  • 基础操作：新建文件夹、重命名、移动、批量删除。
  • 全局搜索：支持文件名的模糊检索与快速定位。
  • 刷新机制：支持 Ctrl + R 局部刷新文件列表。
• 文件传输：
  • 并发上传：支持多文件并发上传，并展示上传结果。
  • 流式下载：调用系统原生保存对话框，稳定下载大文件。

3. 在线协作与编辑

• 专业级编辑器：集成 Monaco Editor (VS Code 同款内核)，支持：
  • 25+ 种语言的语法高亮与自动检测。
  • 代码缩略图 (Minimap) 与智能缩进。
  • 自动/手动换行控制。
• 分布式锁机制：
  • 抢占式编辑：进入编辑模式自动加锁，防止多人冲突。
  • 心跳保活：编辑期间自动续期，异常退出自动释放锁。
• 多格式文件预览：
  • 支持文本代码文件 (1MB) 的快速预览与编辑。
  • 支持图片文件 (JPG/PNG/GIF/WebP 等，10MB)。
  • 支持 PDF 文件 (原生渲染，10MB)。
  • 支持 DOCX/DOC 文件 (客户端渲染，10MB)。
• 可调节预览窗口：支持拖拽调整对话框大小，内容自适应填充。

4. 共享与权限

• 共享管理：支持将文件共享给指定用户，并设置 VIEWER (只读) 或 EDITOR (读写) 权限。
• 权限管控：Owner 可随时查看共享成员列表，调整权限或撤销共享。

5. 操作审计

• 全方位日志：
  • 用户日志：查看个人的登录、文件操作流水。
  • 文件日志：在文件属性中查看该文件的全生命周期操作记录（包含协作者的操作）。

6. 国际化支持

• 双语言切换：支持中文和英文的实时切换，无需刷新页面。
• 语言偏好持久化：自动保存用户的语言偏好到本地存储。
• 全覆盖：所有界面文本、对话框、提示消息均已国际化。

---

🛠 技术栈

核心框架

• Runtime: Electron (主进程/渲染进程架构)
• Framework: Vue 3 (Composition API)
• Language: TypeScript (全类型安全)

构建与工具

• Build Tool: Vite + electron-vite
• State Management: Pinia (用户会话/文件缓存)
• UI Library: Element Plus
• HTTP Client: Axios

特色组件

• Editor: @guolao/vue-monaco-editor (CDN 加载优化)
• DOCX 预览: docx-preview (客户端渲染)
• 国际化: vue-i18n (中英文双语言)
• Persistence: electron-store + localStorage

---

🔧 快速开始

1. 环境准备

确保本地已安装 Node.js (推荐 v16+ 或 v18+) 和 npm/yarn/pnpm。

2. 安装依赖

# 进入项目目录
cd my-netdisk-client

# 安装依赖
npm install

3. 配置后端地址

如果后端服务不在本地 localhost:8090，请修改 src/renderer/src/api 下的基础路径配置（或通过 .env 环境变量配置）。

4. 启动开发模式

npm run dev

此命令将同时启动 Electron 主进程和 Vite 渲染进程服务器，支持热重载 (HMR)。

5. 打包构建

# 构建 Windows 安装包
npm run build:win

# 构建 macOS 安装包
npm run build:mac

构建产物将输出在 dist 或 out 目录下。

---

� 项目结构

src/
├── main/                 # Electron 主进程
│   ├── index.ts          # 窗口创建与生命周期管理
│   └── ipc.ts            # IPC 通信处理 (文件IO/原生对话框)
├── preload/              # 预加载脚本 (安全桥接)
├── renderer/             # Vue 渲染进程
│   ├── src/
│   │   ├── api/          # 后端接口封装
│   │   ├── components/   # 公共组件
│   │   ├── layout/       # 布局组件 (Sidebar, TitleBar)
│   │   ├── stores/       # Pinia 状态管理
│   │   ├── views/        # 页面视图 (Files, Login, Logs)
│   │   └── main.ts       # Vue 入口与插件注册
│   └── index.html        # 渲染进程入口 HTML
└── resources/            # 静态资源 (图标等)