Share WebUI

一个基于 Vue 3 + TypeScript + Vite 的多功能前端工具箱与 UI 组件集。

集成了 WebRTC 视频通话、无感知验证、Canvas 炫酷动画及实用业务 Hooks。

🌐 我的博客 (webkubor.online)  |  📅 更新日志 (Releases)  |  📖 掘金  |  💬 Reddit

---

✨ 特性 (Features)

🛠 核心架构

• Vue 3 Composition API: 采用最新的组合式 API 写法，逻辑复用更高效。
• Hooks First: 抛弃传统 Store，采用 Composable Hooks (/hooks) 管理业务状态。
• TypeScript: 全量 TS 编写，类型安全。
• i18n: 深度集成的国际化方案。
• Vite 5: 极速冷启动与热更新，支持 import.meta.glob 动态路由加载。

🎨 视觉与交互 (UI/UX)

• Canvas 动画: 集成蜘蛛网背景、Apple 风格动效、粒子效果。
• 组件库:
  • 自定义 Loading 集合
  • 炫酷 Card 与 Button 组件
  • 视频弹幕 (Barrage) 与字幕系统
• 图表可视化: 集成各类业务图表展示。

🔧 实用工具 (Tools)

• 安全验证:
  • Google ReCaptcha 无感知登录
  • Cloudflare Turnstile 验证
• 多媒体:
  • WebRTC: 纯前端实现的视频通话功能
  • 图片水印处理 & 小说封面生成
• 计算器: 房贷计算器 (等额本息/等额本金)
• Workers: Web Worker 多线程处理密集计算。

🚀 快速开始 (Quick Start)

环境要求

• Node.js >= 20.19
• pnpm (推荐)

安装与运行

# 1. 克隆项目
git clone https://github.com/your-username/share-webui.git
cd share-webui

# 2. 安装依赖 (使用 pnpm)
pnpm install

# 3. 启动开发服务器
pnpm dev

# 4. 构建生产环境
pnpm build

📂 目录结构 (Structure)

src/
├── api/          # 接口请求
├── assets/       # 静态资源 (字体, 音效, 图片)
├── components/   # 公共组件库 (Card, Button, Effects)
├── directives/   # 自定义指令 (Ripple, Copy, etc.)
├── hooks/        # 业务逻辑 Hooks (useMusic, useUser, etc.)
├── plugins/      # 插件 (Message, Toast)
├── router/       # 路由配置
├── styles/       # 全局样式 (SCSS)
├── utils/        # 工具函数 (Math, Http, Watermark)
└── views/        # 页面视图 (WebRTC, Tools, Home)

📝 开发笔记 (Dev Notes)

动态路由导入 (Vite 5)

本项目使用了 Vite 的 import.meta.glob 特性来替代 Webpack 的 require.context：

// 推荐写法 (Eager Loading)
const routesModules = import.meta.glob('../views/**/router/*.js', { eager: true });

🤝 贡献 (Contribution)

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

📄 开源协议 (License)

本项目遵循 MulanPSL-2.0 开源协议。