<p align="center">
<img width="350px" height="150px" src="public/hula.png"/>
</p>
<p align="center">一款基于Tauri、Vite 7、Vue 3 和 TypeScript 构建的即时通讯系统</p>
<div align="center">
<a href="https://trendshift.io/repositories/15187" target="_blank">
<img src="https://trendshift.io/api/badge/repositories/15187" alt="HuLaSpark%2FHuLa | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/>
</a>
<a href="https://hellogithub.com/repository/743b101346c54f6cb5c20eed2edbaa40" target="_blank">
<img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=743b101346c54f6cb5c20eed2edbaa40&claim_uid=WsQaY6SlnL7qxG3&theme=neutral" alt="Featured|HelloGitHub" style="width: 250px; height: 54px;" width="250" height="54" />
</a>
</div>
<br>
<div align="center">
<p>
<a href="https://gitee.com/HulaSpark/HuLa/stargazers">
<img src="https://gitee.com/HulaSpark/HuLa/badge/star.svg?theme=gvp" alt="Gitee Stars">
</a>
<a href="https://github.com/HulaSpark/HuLa/stargazers">
<img src="https://img.shields.io/github/stars/HulaSpark/HuLa?style=social" alt="GitHub Stars">
</a>
<a href="https://gitcode.com/HuLaSpark/HuLa">
<img src="https://gitcode.com/HuLaSpark/HuLa/star/badge.svg" alt="GitCode Stars">
</a>
<a href="https://gitcode.com/HuLaSpark/HuLa">
<img src="https://atomgit.com/HuLaSpark/HuLa/star/2025top.svg" alt="2025百大开源项目">
</a>
</p>
</div>
<br>
<div align="center">
<p>
<a href="https://deepwiki.com/HuLaSpark/HuLa">
<img src="https://deepwiki.com/badge.svg" alt="DeepWiki">
</a>
<a href="https://app.fossa.com/projects/git%2Bgithub.com%2FHuLaSpark%2FHuLa?ref=badge_shield">
<img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2FHuLaSpark%2FHuLa.svg?type=shield" alt="FOSSA Status">
</a>
<a href="https://www.bestpractices.dev/zh-CN/projects/9692">
<img src="https://bestpractices.coreinfrastructure.org/projects/9692/badge" alt="CII Best Practices">
</a>
<a href="https://hulaspark.com">
<img src="public/hulaspark-badge.svg" alt="HuLaSpark">
</a>
<a href="https://discord.gg/WhSkvhNEeE">
<img src="https://img.shields.io/badge/-Discord-5865F2?logo=discord&logoColor=white&labelColor=555555" alt="Discord">
</a>
</p>
</div>
<br>
<!-- 🛠️ 技术栈 -->
<div align="center">
<p>
<img src="https://img.shields.io/badge/Vue3-35495E?logo=vue.js&logoColor=4FC08D">
<img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff">
<img src="https://img.shields.io/badge/Vite7-646CFF?logo=vite&logoColor=fff">
<img src="https://img.shields.io/badge/Tauri-24C8DB?logo=tauri&logoColor=FFC131">
<img src="https://img.shields.io/badge/Rust-c57c54?logo=rust&logoColor=E34F26">
<img src="https://img.shields.io/badge/UnoCss-333333?logo=unocss&logoColor=fff">
<img src="https://img.shields.io/badge/Sass-CC6699?logo=sass&logoColor=fff">
<img src="https://img.shields.io/badge/pnpm-F69220?logo=pnpm&logoColor=fff">
</p>
</div>
<br>
<!-- 🔗 快速链接 -->
<div align="center">
<h3>🔗 快速链接</h3>
<p>
💻 <strong>官网:</strong><a href="https://hulaspark.com">HuLaSpark</a> |
📝 <strong>启动文档:</strong><a href="docs/project_guide.md">环境配置及其启动教程</a> |
☕️ <strong>服务端:</strong><a href="https://github.com/HulaSpark/HuLa-Server">GitHub</a> / <a href="https://gitee.com/HulaSpark/HuLa-Server">Gitee</a> |
💬 <strong>微信:</strong><code>cy2439646234</code>
</p>
</div>
<p align="center">
中文 |
<a href="README.en.md">English</a> |
<!-- Keep these links. Translations will automatically update with the README. -->
<a href="https://www.readme-i18n.com/HuLaSpark/HuLa?lang=de">Deutsch</a> |
<a href="https://www.readme-i18n.com/HuLaSpark/HuLa?lang=es">Español</a> |
<a href="https://www.readme-i18n.com/HuLaSpark/HuLa?lang=fr">français</a> |
<a href="https://www.readme-i18n.com/HuLaSpark/HuLa?lang=ja">日本語</a> |
<a href="https://www.readme-i18n.com/HuLaSpark/HuLa?lang=ko">한국어</a> |
<a href="https://www.readme-i18n.com/HuLaSpark/HuLa?lang=pt">Português</a> |
<a href="https://www.readme-i18n.com/HuLaSpark/HuLa?lang=ru">Русский</a>
</p>
🌐 支持平台
| 平台 | 支持版本 |
| ------- | --------------------------------------------------------------------- |
| Windows | Windows 10, Windows 11 |
| macOS | macOS 10.5+ Mac26已支持 |
| Linux | Ubuntu 22.0+ |
| iOS | iOS 9.0+ (iOS26 真机已支持, Tauri不支持Intel芯片在ios26模拟器上运行) |
| Android | Android 12+ (SDK30+) |
| Web | ⚠️暂不支持(需要自定义移除对桌面功能) |
📝 项目介绍
HuLa 是一款基于 Tauri、Vite 7、Vue 3 和 TypeScript 构建的即时通讯系统。它利用了 Tauri 的跨平台能力和 Vue 3 的响应式设计,结合了 TypeScript 的类型安全特性和 Vite 7 的快速构建,为用户提供了一个高效、安全和易用的通讯解决方案。
🛠️ 技术栈
- Tauri: 为本项目提供了一款轻量级的、高性能的桌面应用容器,使得我们可以使用前端技术栈来开发跨平台的桌面应用。Tauri 的设计哲学是在保证安全性的前提下,尽可能减少资源占用。
- Vite 7: Vite 是一个现代化的前端构建工具,它利用原生 ES 模块导入的能力来提供一个快速的开发服务器,与此同时,它也为生产环境打包提供了强大的支持。Vite 7 是其最新的版本,带来了更多的优化和特性。
- Vue 3: Vue 3 是一个渐进式JavaScript框架,用于构建用户界面。它的组合式API、更好的TypeScript集成和对移动端的优化使得开发复杂的单页应用变得更加简单和高效。
- TypeScript: TypeScript 是 JavaScript 的一个超集,它在 JavaScript 的基础上增加了类型系统。这让我们能够在开发过程中捕获更多的错误,并且提供更好的编辑器支持。
🖼️ 项目预览
<div align="center">
<h3>🎨 界面展示</h3>
</div>
<!-- 主界面展示 -->
<div align="center">
<h4>PC端界面展示,有其他功能未在介绍截图内,请自行下载体验 🙏</h4>
</div>
<div align="center">
<img src="preview/img2-1.webp" alt="img2-1" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-2.webp" alt="img2-2" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-3.webp" alt="img2-3" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-4.webp" alt="img2-4" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-5.webp" alt="img2-5" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-6.webp" alt="img2-6" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-7.webp" alt="img2-7" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-8.webp" alt="img2-8" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-9.webp" alt="img2-9" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-10.webp" alt="img2-10" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-11.webp" alt="img2-11" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-12.webp" alt="img2-12" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-13.webp" alt="img2-13" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-14.webp" alt="img2-14" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img2-15.webp" alt="img2-15" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
</div>
<br/>
<div align="center">
<img src="preview/img.png" alt="img-主界面" width="280" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img_1.png" alt="img-聊天对话" width="280" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img_2.png" alt="img-联系人" width="280" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img_3.png" alt="img-设置界面" width="280" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img_4.png" alt="消息功能" width="280" style="border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin: 6px;">
<img src="preview/img_5.png" alt="主题切换" width="280" style="border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin: 6px;">
<img src="preview/img_6.png" alt="表情包" width="280" style="border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin: 6px;">
<img src="preview/img_7.png" alt="群聊管理" width="280" style="border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin: 6px;">
<img src="preview/img_8.png" alt="个人设置" width="280" style="border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin: 6px;">
<img src="preview/img_9.png" alt="文件传输" width="280" style="border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); margin: 6px;">
</div>
<div align="center">
<h4>移动端界面展示</h4>
</div>
<div align="center">
<img src="preview/img3-1.webp" alt="img3-1" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img3-2.webp" alt="img3-2" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img3-3.webp" alt="img3-3" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img3-4.webp" alt="img3-4" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img3-5.webp" alt="img3-5" width="220" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin: 8px;">
<img src="preview/img3-6.webp" alt="img3-6" width="220" style="border-radius: 12px; box-