HuLa Documentation

File: README.md Copy Chapter

🌐 支持平台 Copy Chapter

📝 项目介绍 Copy Chapter

HuLa 是一款基于 Tauri、Vite 7、Vue 3 和 TypeScript 构建的即时通讯系统。它利用了 Tauri 的跨平台能力和 Vue 3 的响应式设计，结合了 TypeScript 的类型安全特性和 Vite 7 的快速构建，为用户提供了一个高效、安全和易用的通讯解决方案。

🛠️ 技术栈 Copy Chapter

• Tauri: 为本项目提供了一款轻量级的、高性能的桌面应用容器，使得我们可以使用前端技术栈来开发跨平台的桌面应用。Tauri 的设计哲学是在保证安全性的前提下，尽可能减少资源占用。
• Vite 7: Vite 是一个现代化的前端构建工具，它利用原生 ES 模块导入的能力来提供一个快速的开发服务器，与此同时，它也为生产环境打包提供了强大的支持。Vite 7 是其最新的版本，带来了更多的优化和特性。
• Vue 3: Vue 3 是一个渐进式JavaScript框架，用于构建用户界面。它的组合式API、更好的TypeScript集成和对移动端的优化使得开发复杂的单页应用变得更加简单和高效。
• TypeScript: TypeScript 是 JavaScript 的一个超集，它在 JavaScript 的基础上增加了类型系统。这让我们能够在开发过程中捕获更多的错误，并且提供更好的编辑器支持。

🖼️ 项目预览 Copy Chapter

✨ 功能特性 Copy Chapter

🔐 用户认证系统 Copy Section

💬 消息通信 Copy Section

🤝 社交管理 Copy Section

🎨 界面体验 Copy Section

🛠️ 系统功能 Copy Section

🌐 跨平台支持 Copy Section

🤖 AI 集成 Copy Section

应用升级赞助商 Copy Chapter

👏 感谢以下贡献者们！ Copy Chapter

[!NOTE]
特别感谢 @dennis9486 贡献的截图功能初版实现，代码位于 src/components/common/Screenshot.vue，为提升桌面端体验打下基础。

📥 安装与运行 Copy Chapter

# 克隆项目
git clone https://gitee.com/HuLaSpark/HuLa.git
或者
git clone https://github.com/HuLaSpark/HuLa.git

# 进入项目目录
cd HuLa

# 安装依赖
pnpm install

# 运行开发服务器
pnpm run tauri:dev

# 构建生产版本
pnpm run tauri:build

⚠️ 注意事项(macOS用户) Copy Chapter

网页上下载安装包会提示安装包已损坏，可能会遇到证书问题，这是因为 macOS 系统的安全机制导致的。请按照以下步骤解决：

1. 打开 "系统设置" - "安全性与隐私"，如图勾选：允许 "任何来源" 下载的 App 运行：

2. 如果还报错，请在终端执行以下命令解决：

## 安装前执行
sudo xattr -rd com.apple.quarantine 你的安装包路径/下载的安装包名称

## 如果已经安装，则执行下面
sudo xattr -r -d com.apple.quarantine /Applications/应用名称.app

📋 提交规范 Copy Chapter

执行 pnpm run commit 唤起 git commit 交互，根据提示完成信息的输入和选择

⚖️ 免责声明 Copy Chapter

1. 本项目是作为一款开源项目提供的，开发者在法律允许的范围内不对软件的功能性、安全性或适用性提供任何形式的明示或暗示的保证
2. 用户明确理解并同意，使用本软件的风险完全由用户自己承担，软件以"现状"和"现有"基础提供。开发者不提供任何形式的担保，无论是明示还是暗示的，包括但不限于适销性、特定用途的适用性和非侵权的担保
3. 在任何情况下，开发者或其供应商都不对任何直接的、间接的、偶然的、特殊的、惩罚性的或后果性的损害承担责任，包括但不限于使用本软件产生的利润损失、业务中断、个人信息泄露或其他商业损害或损失
4. 所有在本项目上进行二次开发的用户，都需承诺将本软件用于合法目的，并自行负责遵守当地的法律和法规
5. 开发者有权在任何时间修改软件的功能或特性，以及本免责声明的任何部分，并且这些修改可能会以软件更新的形式体现

本免责声明的最终解释权归开发者所有

🎁 支持项目 Copy Chapter

💝 赞助支持

💬 加入社区 Copy Chapter

🙏 感谢赞助者 Copy Chapter

💎 钻石赞助者 (￥1000+) Copy Section

🏆 金牌赞助者 (￥100+) Copy Section

🥈 银牌赞助者 (￥50-99) Copy Section

🥉 铜牌赞助者 (￥20-49) Copy Section

📄 开源许可 Copy Chapter

File: docs/qiniu-upload.md Copy Chapter

七牛云上传功能使用指南

HuLa 现已支持使用七牛云存储服务来上传和存储文件，这为用户提供了更灵活的文件存储选择。本文档将介绍如何在 HuLa 中使用七牛云上传功能。

功能特点 Copy Chapter

• 支持在默认上传方式和七牛云之间切换
• 使用统一的上传接口，便于集成
• 支持大文件上传
• 自动生成唯一文件名，避免文件名冲突
• 支持进度显示（在浏览器环境中）
• 支持多区域上传（华东、华北、华南、北美、东南亚）
• 支持分片上传大文件

配置说明 Copy Chapter

七牛云区域设置 Copy Section

七牛云提供了多个存储区域，HuLa 支持根据配置自动选择合适的上传域名：

默认情况下，如果未指定区域，系统将使用华南区域（z2）。

后端配置 Copy Section

后端需要提供以下配置信息：

{
  "token": "七牛云上传凭证",
  "domain": "七牛云存储域名",
  "storagePrefix": "存储前缀",
  "region": "存储区域代码（可选，默认为z2）"
}

使用方法 Copy Chapter

在代码中使用 Copy Section

import { useUpload, UploadProviderEnum } from '@/hooks/useUpload'
import { UploadSceneEnum } from '@/enums'

// 创建上传hook实例
const uploadHook = useUpload()

// 使用七牛云上传
async function uploadToQiniu(filePath: string) {
  try {
    // 获取上传和下载URL
    const result = await uploadHook.getUploadAndDownloadUrl(filePath, {
      provider: UploadProviderEnum.QINIU,
      scene: UploadSceneEnum.CHAT
    })
    
    // 执行上传
    await uploadHook.doUpload(filePath, result.uploadUrl, result)
    
    console.log('上传成功，下载地址:', result.downloadUrl)
    return result.downloadUrl
  } catch (error) {
    console.error('上传失败:', error)
    throw error
  }
}

// 使用默认上传方式
async function uploadWithDefault(filePath: string) {
  try {
    // 获取上传和下载URL
    const result = await uploadHook.getUploadAndDownloadUrl(filePath, {
      provider: UploadProviderEnum.DEFAULT,
      scene: UploadSceneEnum.CHAT
    })
    
    // 执行上传
    await uploadHook.doUpload(filePath, result.uploadUrl, { downloadUrl: result.downloadUrl })
    
    console.log('上传成功，下载地址:', result.downloadUrl)
    return result.downloadUrl
  } catch (error) {
    console.error('上传失败:', error)
    throw error
  }
}

使用分片上传 Copy Section

对于大文件上传，HuLa 现在支持使用七牛云的分片上传功能，可以提高上传成功率和性能：

import { useUpload, UploadProviderEnum } from '@/hooks/useUpload'
import { UploadSceneEnum } from '@/enums'

// 创建上传hook实例
const uploadHook = useUpload()

// 使用七牛云分片上传
async function uploadLargeFileToQiniu(filePath: string) {
  try {
    // 获取上传和下载URL
    const result = await uploadHook.getUploadAndDownloadUrl(filePath, {
      provider: UploadProviderEnum.QINIU,
      scene: UploadSceneEnum.CHAT
    })
    
    // 执行分片上传，指定使用分片上传和分片大小（可选，默认4MB）
    await uploadHook.doUpload(filePath, result.uploadUrl, {
      ...result,
      useChunks: true,
      chunkSize: 4 * 1024 * 1024 // 4MB，可根据需要调整
    })
    
    console.log('分片上传成功，下载地址:', result.downloadUrl)
    return result.downloadUrl
  } catch (error) {
    console.error('分片上传失败:', error)
    throw error
  }
}

分片上传参数说明：

当文件大小超过设定的分片大小时，系统会自动将文件分成多个块进行上传，并在上传完成后自动合并。

在消息策略中使用 Copy Section

HuLa 的消息策略已集成七牛云上传功能，可以通过传递 provider 选项来指定使用哪种上传方式：

import { messageStrategyMap } from '@/strategy/MessageStrategy'
import { MsgEnum } from '@/enums'
import { UploadProviderEnum } from '@/hooks/useUpload'

// 获取图片消息策略
const imageStrategy = messageStrategyMap[MsgEnum.IMAGE]

// 使用七牛云上传
async function uploadImageWithQiniu(path: string) {
  const result = await imageStrategy.uploadFile(path, {
    provider: UploadProviderEnum.QINIU
  })
  
  // 执行上传
  await imageStrategy.doUpload(path, result.uploadUrl, result)
  
  return result.downloadUrl
}

// 使用七牛云分片上传大图片
async function uploadLargeImageWithQiniu(path: string) {
  const result = await imageStrategy.uploadFile(path, {
    provider: UploadProviderEnum.QINIU
  })
  
  // 执行分片上传
  await imageStrategy.doUpload(path, result.uploadUrl, {
    ...result,
    useChunks: true,
    chunkSize: 2 * 1024 * 1024 // 2MB分片
  })
  
  return result.downloadUrl
}

分片上传原理与优势 Copy Chapter

七牛云分片上传功能基于七牛云的分块上传API实现，主要流程如下：

1. 将大文件分割成固定大小的数据块
2. 使用 /mkblk/ 接口上传第一个数据块
3. 使用 /bput/<ctx>/<offset> 接口上传后续数据块
4. 所有分片上传完成后，使用 /mkfile/<filesize>/key/<encodedKey> 接口将所有数据块合并成完整文件

分片上传的主要优势：

• 支持断点续传：上传中断后可以从已上传的部分继续
• 提高上传成功率：大文件分成小块上传，减少单次传输失败的风险
• 优化网络利用率：可以更好地利用网络带宽
• 提供上传进度反馈：可以精确显示每个分片的上传进度

建议在以下情况使用分片上传：

• 上传大于10MB的文件
• 网络环境不稳定
• 需要显示精确上传进度的场景

配置七牛云 Copy Chapter

要使用七牛云上传功能，需要在后端配置七牛云的相关参数：

1. 在七牛云控制台创建存储空间（Bucket）
2. 获取 AccessKey 和 SecretKey
3. 配置后端服务，实现获取上传 Token 的接口

后端需要提供以下接口：

GET /api/qiniu/token

返回格式：

{
  "token": "七牛云上传Token",
  "domain": "七牛云存储域名",
  "storagePrefix": "存储前缀"
}

测试方法 Copy Chapter

1. 在七牛云控制台创建存储空间（Bucket）
2. 获取 AccessKey 和 SecretKey
3. 配置后端服务，实现获取上传 Token 的接口
4. 使用 HuLa 提供的上传接口进行测试

注意事项 Copy Chapter

1. 七牛云上传需要有效的 Token，Token 有时效性，过期后需要重新获取
2. 上传大文件时，请确保网络稳定
3. 在生产环境中，建议配置 HTTPS 域名，确保数据传输安全
4. 七牛云存储有容量和流量限制，请根据实际需求选择合适的套餐
5. 分片上传时，建议根据网络环境和文件大小调整分片大小，一般推荐1MB-4MB
6. 对于特别大的文件（如视频），强烈建议使用分片上传功能

File: README.en.md Copy Chapter

🌐 Supported Platforms Copy Chapter

📝 Project Introduction Copy Chapter

HuLa is an instant messaging system built with Tauri, Vite 7, Vue 3, and TypeScript. It leverages Tauri's cross-platform capabilities and Vue 3's reactive design, combined with TypeScript's type safety features and Vite 7's fast build process, providing users with an efficient, secure, and user-friendly communication solution.

🛠️ Tech Stack Copy Chapter

• Tauri: Provides a lightweight, high-performance desktop application container for this project, enabling us to develop cross-platform desktop applications using frontend technology stack. Tauri's design philosophy is to minimize resource consumption while ensuring security.
• Vite 7: Vite is a modern frontend build tool that leverages native ES module imports to provide a fast development server, while also offering powerful support for production environment packaging. Vite 7 is its latest version, bringing more optimizations and features.
• Vue 3: Vue 3 is a progressive JavaScript framework for building user interfaces. Its Composition API, better TypeScript integration, and mobile optimization make developing complex single-page applications simpler and more efficient.
• TypeScript: TypeScript is a superset of JavaScript that adds a type system on top of JavaScript. This allows us to catch more errors during development and provides better editor support.

🖼️ Project Preview Copy Chapter

✨ Features Copy Chapter

🔐 User Authentication System Copy Section

💬 Message Communication Copy Section

🤝 Social Management Copy Section

🎨 User Experience Copy Section

🛠️ System Features Copy Section

🌐 Cross-platform Support Copy Section

🤖 AI Integration Copy Section

App Upgrade Sponsor Copy Chapter

👏 Thanks to all Contributors! Copy Chapter

[!NOTE]
Special thanks to @dennis9486 for delivering the initial screenshot feature implementation located at src/components/common/Screenshot.vue, which laid the groundwork for the desktop capture experience.

📥 Installation & Running Copy Chapter

# Clone the project
git clone https://gitee.com/HulaSpark/HuLa.git
# or
git clone https://github.com/HulaSpark/HuLa.git

# Enter project directory
cd HuLa

# Install dependencies
pnpm install

# Run development server
pnpm run tauri:dev

# Build for production
pnpm run tauri:build

⚠️ Important Notes (macOS Users) Copy Chapter

Downloading installation packages from the web may show a damaged package prompt, possibly encountering certificate issues due to macOS security mechanisms. Please follow these steps to resolve:

1. Open "System Settings" - "Security & Privacy", check as shown: Allow apps downloaded from "Anywhere" to run:

2. If errors persist, execute the following commands in Terminal:

## Execute before installation
sudo xattr -rd com.apple.quarantine path/to/your/downloaded/package

## If already installed, execute the following
sudo xattr -r -d com.apple.quarantine /Applications/ApplicationName.app

📋 Commit Guidelines Copy Chapter

Execute pnpm run commit to invoke git commit interaction, complete information input and selection according to prompts.

⚖️ Disclaimer Copy Chapter

1. This project is provided as an open-source project. Developers do not provide any form of explicit or implicit warranties for the functionality, security, or applicability of the software within the scope permitted by law.
2. Users clearly understand and agree that the risk of using this software is entirely borne by the user. The software is provided on an "as is" and "as available" basis. Developers do not provide any form of warranty, whether explicit or implicit, including but not limited to warranties of merchantability, fitness for a particular purpose, and non-infringement.
3. Under no circumstances shall developers or their suppliers be liable for any direct, indirect, incidental, special, punitive, or consequential damages, including but not limited to profit loss, business interruption, personal information leakage, or other commercial damages or losses arising from the use of this software.
4. All users conducting secondary development on this project must commit to using this software for legal purposes and are responsible for complying with local laws and regulations.
5. Developers have the right to modify the software's functions or features at any time, as well as any part of this disclaimer, and these modifications may be reflected in the form of software updates.

The final interpretation of this disclaimer belongs to the developers

🎁 Support the Project Copy Chapter

💝 Sponsor Support

💬 Join Community Copy Chapter

🙏 Thanks to Sponsors Copy Chapter

💎 Diamond Sponsors (￥1000+) Copy Section

🏆 Gold Sponsors ($15+) Copy Section

🥈 Silver Sponsors ($8-14) Copy Section

🥉 Bronze Sponsors ($3-7) Copy Section

📄 Open Source License Copy Chapter