# UniversalKit

**Repository Path**: template-warehouse/universal-kit

## Basic Information

- **Project Name**: UniversalKit
- **Description**: UniversalKit：一个多功能开源工具库，提供丰富的组件和API，支持跨平台开发，旨在简化开发流程，加速应用构建。
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2026-05-10
- **Last Updated**: 2026-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UniversalKit

<p align="center">
  <img src="https://img.shields.io/badge/version-1.0.0-blue" alt="Version">
  <img src="https://img.shields.io/badge/license-MIT-green" alt="License">
  <img src="https://img.shields.io/badge/author-Forever%20顾北-orange" alt="Author">
</p>

> 一个多技术栈前端模板仓库，沉淀可复制、可改造、可落地的后台管理与 UI 示例工程。
>
> **通过简单修改和复制粘贴，就能快速搭建成符合自己想法的项目。**

---

## 项目简介

UniversalKit 按技术栈拆分子项目，当前已完成 `html-ui`、`vue2-kit`、`vue3-kit`、`vue3-ts-kit`、`react-kit`、`react-ts-kit`、`flutter-kit`、`uniapp-kit` 八套模板，覆盖 Web、跨平台桌面/移动端与全小程序生态。仓库内同时保留工程规范、提交规范、脚本入口和功能文档，便于后续继续扩展更多方向。

**核心特性：**

- **多技术栈模板** - 原生 HTML、Vue2、Vue3、Vue3 + TypeScript、React、React + TypeScript、Flutter 三端、uni-app 全小程序，八套模板全部完工
- **后台管理常用场景** - 登录注册、首页、仪表盘、表单、表格、图表、组件、错误页、资料页
- **主题体系** - 深色模式、6 套预设主题、CSS 变量运行时换肤
- **权限系统** - 路由级权限 + 按钮级 `v-permission` 指令
- **国际化** - 中文、英文、日文、韩文语言包
- **Mock 全链路** - Vite Mock + Axios 拦截封装，便于脱离后端独立开发
- **工程化约束** - ESLint、Prettier、Husky、Commitlint、lint-staged

---

## 软件架构

| 目录 | 技术栈 | 状态 | 说明 |
| --- | --- | --- | --- |
| [html-ui](./html-ui) | HTML / CSS / JavaScript | 可用 | 原始静态 UI 模板与页面资产 |
| [vue2-kit](./vue2-kit) | Vue 2.7 + Vite + Element UI + Vuex | 完成 | Vue2 后台管理模板，文档与截图完整 |
| [vue3-kit](./vue3-kit) | Vue 3.5 + Vite + Element Plus + Pinia | 完成 | Vue3 后台管理模板，已完成迁移、构建与 lint 校验 |
| [vue3-ts-kit](./vue3-ts-kit) | Vue 3.5 + TypeScript + Vite + Element Plus + Pinia | 完成 | Vue3 + TypeScript 后台管理模板，已完成迁移与 lint 校验 |
| [react-kit](./react-kit) | React 18 + Vite + Ant Design + Zustand | 完成 | React JavaScript 后台管理模板，核心功能已完成 |
| [react-ts-kit](./react-ts-kit) | React 18 + TypeScript + Vite + Ant Design + Zustand | 完成 | React TypeScript 后台管理模板，核心功能已完成 |
| [flutter-kit](./flutter-kit) | Flutter 3.x + Dart 3.x + Riverpod + GoRouter | 完成 | Flutter 三端（Web/桌面/移动）后台管理模板 |
| [uniapp-kit](./uniapp-kit) | uni-app (Vue3) + Vite + uview-plus + Pinia | 完成 | uni-app 跨端模板（H5 / 9 大小程序），小程序风格 + 暗黑主题 |

---

## 项目展示

### Vue3 Kit

> 完整文档：[vue3-kit/README.md](./vue3-kit/README.md) | 功能文档：[vue3-kit/docs/README.md](./vue3-kit/docs/README.md)

<table>
  <tr>
    <td align="center"><b>登录页面</b><br/><img src="./vue3-kit/docs/images/login-page.png" alt="登录页面" width="100%" /></td>
    <td align="center"><b>注册页面</b><br/><img src="./vue3-kit/docs/images/register-page.png" alt="注册页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>首页概览</b><br/><img src="./vue3-kit/docs/images/home-page.png" alt="首页概览" width="100%" /></td>
    <td align="center"><b>仪表盘</b><br/><img src="./vue3-kit/docs/images/dashboard-page.png" alt="仪表盘" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>基础表单</b><br/><img src="./vue3-kit/docs/images/form-basic.png" alt="基础表单" width="100%" /></td>
    <td align="center"><b>高级表单</b><br/><img src="./vue3-kit/docs/images/form-advanced.png" alt="高级表单" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>图表页面</b><br/><img src="./vue3-kit/docs/images/charts-page.png" alt="图表页面" width="100%" /></td>
    <td align="center"><b>表格页面</b><br/><img src="./vue3-kit/docs/images/table-bootstrap.png" alt="表格页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>卡片组件</b><br/><img src="./vue3-kit/docs/images/component-cards.png" alt="卡片组件" width="100%" /></td>
    <td align="center"><b>加载组件</b><br/><img src="./vue3-kit/docs/images/components-loading.png" alt="加载组件" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>个人资料</b><br/><img src="./vue3-kit/docs/images/page-profile.png" alt="个人资料" width="100%" /></td>
    <td align="center"><b>联系人</b><br/><img src="./vue3-kit/docs/images/page-contacts.png" alt="联系人" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>深色主题</b><br/><img src="./vue3-kit/docs/images/theme-dark.png" alt="深色主题" width="100%" /></td>
    <td align="center"><b>主题面板</b><br/><img src="./vue3-kit/docs/images/theme-panel.png" alt="主题面板" width="100%" /></td>
  </tr>
</table>

### Vue3 TS Kit

> 完整文档：[vue3-ts-kit/README.md](./vue3-ts-kit/README.md) | 功能文档：[vue3-ts-kit/docs/README.md](./vue3-ts-kit/docs/README.md)

Vue3 TS Kit 与 Vue3 Kit 保持相同的页面结构和功能模块，在此基础上全面引入 TypeScript 类型系统，适合对类型安全有更高要求的项目。

<table>
  <tr>
    <td align="center"><b>登录页面</b><br/><img src="./vue3-ts-kit/docs/images/login-page.png" alt="登录页面" width="100%" /></td>
    <td align="center"><b>注册页面</b><br/><img src="./vue3-ts-kit/docs/images/register-page.png" alt="注册页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>首页概览</b><br/><img src="./vue3-ts-kit/docs/images/home-page.png" alt="首页概览" width="100%" /></td>
    <td align="center"><b>仪表盘</b><br/><img src="./vue3-ts-kit/docs/images/dashboard-page.png" alt="仪表盘" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>基础表单</b><br/><img src="./vue3-ts-kit/docs/images/form-basic.png" alt="基础表单" width="100%" /></td>
    <td align="center"><b>高级表单</b><br/><img src="./vue3-ts-kit/docs/images/form-advanced.png" alt="高级表单" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>图表页面</b><br/><img src="./vue3-ts-kit/docs/images/charts-page.png" alt="图表页面" width="100%" /></td>
    <td align="center"><b>表格页面</b><br/><img src="./vue3-ts-kit/docs/images/table-bootstrap.png" alt="表格页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>卡片组件</b><br/><img src="./vue3-ts-kit/docs/images/component-cards.png" alt="卡片组件" width="100%" /></td>
    <td align="center"><b>加载组件</b><br/><img src="./vue3-ts-kit/docs/images/components-loading.png" alt="加载组件" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>个人资料</b><br/><img src="./vue3-ts-kit/docs/images/page-profile.png" alt="个人资料" width="100%" /></td>
    <td align="center"><b>联系人</b><br/><img src="./vue3-ts-kit/docs/images/page-contacts.png" alt="联系人" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>深色主题</b><br/><img src="./vue3-ts-kit/docs/images/theme-dark.png" alt="深色主题" width="100%" /></td>
    <td align="center"><b>主题面板</b><br/><img src="./vue3-ts-kit/docs/images/theme-panel.png" alt="主题面板" width="100%" /></td>
  </tr>
</table>

### Vue2 Kit

> 完整文档：[vue2-kit/README.md](./vue2-kit/README.md) | 功能文档：[vue2-kit/docs/README.md](./vue2-kit/docs/README.md)

Vue2 Kit 与 Vue3 Kit 保持相近的页面结构、功能组织和文档逻辑，适合需要继续维护 Vue2 项目或做迁移对照的场景。

<table>
  <tr>
    <td align="center"><b>登录页面</b><br/><img src="./vue2-kit/docs/images/login-page.png" alt="登录页面" width="100%" /></td>
    <td align="center"><b>注册页面</b><br/><img src="./vue2-kit/docs/images/register-page.png" alt="注册页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>首页概览</b><br/><img src="./vue2-kit/docs/images/home-page.png" alt="首页概览" width="100%" /></td>
    <td align="center"><b>仪表盘</b><br/><img src="./vue2-kit/docs/images/dashboard-page.png" alt="仪表盘" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>基础表单</b><br/><img src="./vue2-kit/docs/images/form-basic.png" alt="基础表单" width="100%" /></td>
    <td align="center"><b>高级表单</b><br/><img src="./vue2-kit/docs/images/form-advanced.png" alt="高级表单" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>图表页面</b><br/><img src="./vue2-kit/docs/images/charts-page.png" alt="图表页面" width="100%" /></td>
    <td align="center"><b>表格页面</b><br/><img src="./vue2-kit/docs/images/table-bootstrap.png" alt="表格页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>卡片组件</b><br/><img src="./vue2-kit/docs/images/component-cards.png" alt="卡片组件" width="100%" /></td>
    <td align="center"><b>加载组件</b><br/><img src="./vue2-kit/docs/images/components-loading.png" alt="加载组件" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>个人资料</b><br/><img src="./vue2-kit/docs/images/page-profile.png" alt="个人资料" width="100%" /></td>
    <td align="center"><b>联系人</b><br/><img src="./vue2-kit/docs/images/page-contacts.png" alt="联系人" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>深色主题</b><br/><img src="./vue2-kit/docs/images/theme-dark.png" alt="深色主题" width="100%" /></td>
    <td align="center"><b>主题面板</b><br/><img src="./vue2-kit/docs/images/theme-panel.png" alt="主题面板" width="100%" /></td>
  </tr>
</table>

### React Kit

> 完整文档：[react-kit/README.md](./react-kit/README.md) | 功能文档：[react-kit/docs/README.md](./react-kit/docs/README.md)

React Kit 基于 React 18 + Ant Design，采用 Zustand 状态管理，与 Vue 版本保持相同的页面结构和功能模块。

<table>
  <tr>
    <td align="center"><b>登录页面</b><br/><img src="./react-kit/docs/images/login-page.png" alt="登录页面" width="100%" /></td>
    <td align="center"><b>注册页面</b><br/><img src="./react-kit/docs/images/register-page.png" alt="注册页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>首页概览</b><br/><img src="./react-kit/docs/images/home-page.png" alt="首页概览" width="100%" /></td>
    <td align="center"><b>仪表盘</b><br/><img src="./react-kit/docs/images/dashboard-page.png" alt="仪表盘" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>基础表单</b><br/><img src="./react-kit/docs/images/form-basic-updated.png" alt="基础表单" width="100%" /></td>
    <td align="center"><b>高级表单</b><br/><img src="./react-kit/docs/images/form-advanced-updated.png" alt="高级表单" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>表单校验</b><br/><img src="./react-kit/docs/images/form-validation-updated.png" alt="表单校验" width="100%" /></td>
    <td align="center"><b>图表页面</b><br/><img src="./react-kit/docs/images/charts-page.png" alt="图表页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>卡片组件</b><br/><img src="./react-kit/docs/images/component-cards.png" alt="卡片组件" width="100%" /></td>
    <td align="center"><b>加载组件</b><br/><img src="./react-kit/docs/images/components-loading.png" alt="加载组件" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>个人资料</b><br/><img src="./react-kit/docs/images/page-profile.png" alt="个人资料" width="100%" /></td>
    <td align="center"><b>联系人</b><br/><img src="./react-kit/docs/images/page-contacts.png" alt="联系人" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>深色主题</b><br/><img src="./react-kit/docs/images/theme-dark.png" alt="深色主题" width="100%" /></td>
    <td align="center"><b>主题面板</b><br/><img src="./react-kit/docs/images/theme-panel.png" alt="主题面板" width="100%" /></td>
  </tr>
</table>

### React-TS Kit

> 完整文档：[react-ts-kit/README.md](./react-ts-kit/README.md) | 功能文档：[react-ts-kit/docs/README.md](./react-ts-kit/docs/README.md)

React-TS Kit 在 React Kit 基础上全面引入 TypeScript 类型系统，适合对类型安全有更高要求的项目。

<table>
  <tr>
    <td align="center"><b>登录页面</b><br/><img src="./react-ts-kit/docs/images/login-page.png" alt="登录页面" width="100%" /></td>
    <td align="center"><b>注册页面</b><br/><img src="./react-ts-kit/docs/images/register-page.png" alt="注册页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>首页概览</b><br/><img src="./react-ts-kit/docs/images/home-page.png" alt="首页概览" width="100%" /></td>
    <td align="center"><b>仪表盘</b><br/><img src="./react-ts-kit/docs/images/dashboard-page.png" alt="仪表盘" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>基础表单</b><br/><img src="./react-ts-kit/docs/images/form-basic-updated.png" alt="基础表单" width="100%" /></td>
    <td align="center"><b>高级表单</b><br/><img src="./react-ts-kit/docs/images/form-advanced-updated.png" alt="高级表单" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>表单校验</b><br/><img src="./react-ts-kit/docs/images/form-validation-updated.png" alt="表单校验" width="100%" /></td>
    <td align="center"><b>图表页面</b><br/><img src="./react-ts-kit/docs/images/charts-page.png" alt="图表页面" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>卡片组件</b><br/><img src="./react-ts-kit/docs/images/component-cards.png" alt="卡片组件" width="100%" /></td>
    <td align="center"><b>加载组件</b><br/><img src="./react-ts-kit/docs/images/components-loading.png" alt="加载组件" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>个人资料</b><br/><img src="./react-ts-kit/docs/images/page-profile.png" alt="个人资料" width="100%" /></td>
    <td align="center"><b>联系人</b><br/><img src="./react-ts-kit/docs/images/page-contacts.png" alt="联系人" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>深色主题</b><br/><img src="./react-ts-kit/docs/images/theme-dark.png" alt="深色主题" width="100%" /></td>
    <td align="center"><b>主题面板</b><br/><img src="./react-ts-kit/docs/images/theme-panel.png" alt="主题面板" width="100%" /></td>
  </tr>
</table>

### Flutter Kit

> 完整文档：[flutter-kit/README.md](./flutter-kit/README.md)

Flutter Kit 是仓库的跨平台扩展，基于 Flutter 3.x 实现，一套代码同时支持 Web、桌面（Windows/macOS/Linux）和移动（Android/iOS）三端。

**核心特性：**

- **三端适配** - 一套代码，同时支持 Web / 桌面应用 / 移动 APP
- **主题系统** - 6 套预设主题 + 深色模式，Token 化设计变量，暗色主题对齐 Vue2 配色
- **响应式布局** - PC 浏览器 / 桌面 / 平板 / 手机自适应
- **权限管理** - 基于角色的访问控制（RBAC）
- **国际化** - 支持中文、英文、日文、韩文，全量国际化覆盖
- **路由守卫** - GoRouter 实现登录拦截和权限验证

**功能模块：**

- **认证模块** - 登录、注册
- **首页仪表盘** - 统计卡片、趋势图、活跃度、项目分布、任务列表
- **仪表盘** - 热力图、关系图、树图、系统负载、快捷操作
- **表单模块** - 基础表单、高级表单、表单校验
- **组件展示** - 卡片、按钮、通知提示、图标
- **页面模板** - 个人资料、联系人、价格套餐、关于页、错误页
- **图表可视化** - 18 种图表：折线、柱状、饼图、雷达、漏斗、面积、径向、树图、弦图、多仪表、平行坐标、桑基、河流图、仪表盘、迷你图等
- **脑图模块** - 思维导图编辑器
- **表格模块** - 基础表格、高级表格

**技术栈：**

| 类别 | 技术 | 版本 | 说明 |
|------|------|------|------|
| 框架 | Flutter | 3.41.2 | 跨平台 UI 框架 |
| 语言 | Dart | 3.11.0 | 编程语言 |
| 状态管理 | flutter_riverpod | 2.x | 响应式状态管理 |
| 路由 | go_router | 13.x | 声明式路由 |
| 图表 | fl_chart | 0.66.x | 图表库 |
| 网络请求 | dio | 5.x | HTTP 客户端 |

### uni-app Kit

> 完整文档：[uniapp-kit/README.md](./uniapp-kit/README.md) | 功能文档：[uniapp-kit/docs/README.md](./uniapp-kit/docs/README.md)

uni-app Kit 是仓库的跨端扩展，功能对标 vue2-kit，一套代码同时运行在 H5 与 9 大小程序平台（微信 / 支付宝 / 百度 / 抖音 / QQ / 快手 / 京东 / 飞书 / 小红书），交互采用主流小程序风格（底部 tabBar + 分组列表导航），视觉延续系列暗黑主题。

<table>
  <tr>
    <td align="center"><b>登录页面</b><br/><img src="./uniapp-kit/docs/images/login-page.png" alt="登录页面" width="100%" /></td>
    <td align="center"><b>首页概览</b><br/><img src="./uniapp-kit/docs/images/home-page.png" alt="首页概览" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>脑图模块</b><br/><img src="./uniapp-kit/docs/images/component-map.png" alt="脑图模块" width="100%" /></td>
    <td align="center"><b>图表可视化</b><br/><img src="./uniapp-kit/docs/images/charts-page.png" alt="图表可视化" width="100%" /></td>
  </tr>
  <tr>
    <td align="center"><b>数据表格</b><br/><img src="./uniapp-kit/docs/images/table-data.png" alt="数据表格" width="100%" /></td>
    <td align="center"><b>我的页面</b><br/><img src="./uniapp-kit/docs/images/mine-page.png" alt="我的页面" width="100%" /></td>
  </tr>
</table>

**核心特性：**

- **跨端运行** - 一套代码，同时支持 H5 与微信 / 支付宝 / 百度 / 抖音 / QQ / 快手 / 京东 / 飞书 / 小红书 9 大小程序平台
- **小程序风格** - 底部 tabBar（首页/功能/仪表盘/我的，配双态 PNG 图标）+ 分组列表二级导航
- **暗黑主题** - 沿用系列暗黑色板，7 套主色预设运行时换肤
- **登录权限** - uni.addInterceptor 路由拦截 + 页面级权限过滤
- **国际化** - 中 / 英 / 日 / 韩四语，407 键全量对齐，tabBar 文字与导航栏标题动态切换
- **Mock 全链路** - 本地数据模块直接返回 Promise，小程序端无需 HTTP 拦截

**功能模块：**

- **认证模块** - 登录（验证码）、注册
- **首页 / 仪表盘** - 统计卡片、趋势图、品类占比、销售排行、最近订单
- **表单模块** - 基础表单、高级表单、自动补全、文件上传、富文本、表单校验
- **组件展示** - 卡片、日历、图库、加载按钮、脑图、通知、加载动画、图标、弹窗系统
- **页面模板** - 联系人、发票、个人资料、价格套餐、关于页、错误页
- **表格模块** - 基础表格、数据表格（搜索/排序/分页）
- **图表可视化** - CSS + canvas 双方案：柱状、折线、饼图、雷达、漏斗、仪表盘、迷你图

**技术栈：**

| 类别 | 技术 | 版本 | 说明 |
|------|------|------|------|
| 框架 | uni-app (Vue3) | 3.x | 跨端框架 |
| 构建 | Vite | 5.x | H5 端口 60007 |
| UI 库 | uview-plus | 3.x | uView 的 Vue3 版本 |
| 状态管理 | Pinia | 2.x | 主题/语言/登录态 |
| 国际化 | vue-i18n | 9.x | 四语语言包 |
| 图表 | CSS + canvas | - | 跨端图表绘制 |

---

## Vue3 Kit 功能清单

### 技术栈

| 分类 | 选型 |
| --- | --- |
| 框架 | Vue 3.5 + `@vue/compat` |
| 路由 | Vue Router 4 |
| 状态管理 | Pinia 3 + Vuex 兼容适配 |
| UI 库 | Element Plus 2.10 + 自动按需引入 |
| 构建 | Vite 6 |
| 请求 | Axios + Mock 拦截 |
| Mock | vite-plugin-mock + mockjs |
| 图表 | ECharts 5 |
| 富文本 | WangEditor 5 |
| 脑图 | Mind Elixir 5 |
| 主题 | SCSS 变量 + CSS 变量运行时换肤 |
| 规范 | ESLint + Prettier |

### 功能模块

- **登录注册** - 表单校验、验证码、演示账号填充、登录状态维护
- **首页概览** - 统计卡片、趋势图、活跃度、项目分布、任务列表
- **仪表盘** - 热力图、关系图、树图、系统负载、快捷操作
- **表单模块** - 基础表单、高级表单、自动补全、上传、富文本、校验提示
- **组件展示** - 卡片、日历、图库、加载按钮、通知、预加载、图标、弹窗系统
- **表格模块** - 基础表格、Bootstrap 风格表格、数据表格、通用表格组件
- **图表可视化** - 漏斗、桑基、箱线、K 线、树图、旭日、仪表盘、迷你图等
- **页面模板** - 个人资料、联系人、发票、定价、关于页、错误页
- **权限系统** - 动态路由权限、按钮级权限、自定义权限指令
- **国际化** - 中 / 英 / 日 / 韩语言包与运行时切换
- **主题换肤** - 6 套预设主题、深色模式、持久化主题偏好

---

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- yarn >= 1.22.0

### Vue3 Kit

```bash
cd vue3-kit
yarn install
yarn dev
yarn build
yarn preview
```

默认开发端口：`60002`

### Vue3 TS Kit

```bash
cd vue3-ts-kit
yarn install
yarn dev
yarn build
yarn preview
```

默认开发端口：`60003`

### Vue2 Kit

```bash
cd vue2-kit
yarn install
yarn dev
yarn build
yarn preview
```

默认开发端口以子项目 Vite 配置为准。

### React Kit

```bash
cd react-kit
yarn install
yarn dev
yarn build
yarn preview
```

默认开发端口：`60004`

### React TS Kit

```bash
cd react-ts-kit
yarn install
yarn dev
yarn build
yarn preview
```

默认开发端口：`60005`

### uni-app Kit

```bash
cd uniapp-kit
yarn install
yarn dev:h5          # H5 开发（端口 60007）
yarn build:h5        # H5 生产构建
yarn build:mp-weixin # 微信小程序构建（另支持 mp-alipay/mp-baidu/mp-toutiao/mp-qq/mp-kuaishou/mp-jd/mp-lark/mp-xhs）
```

默认开发端口：`60007`

---

## 脚本体系

仓库提供完整的脚本体系，包括 **Bash 脚本**（跨平台）和 **Windows 批处理脚本**（Windows 专用），让你无需记忆复杂命令，一键完成安装、启动、构建和清理。

### 根目录脚本（跨平台）

适用于 macOS / Linux / Windows Git Bash 环境。

#### run.sh - 子项目启动器

一键启动子项目的开发服务器，支持交互式菜单和命令行直达启动。

```bash
# 进入交互式菜单（推荐）
./run.sh

# 直接启动指定子项目
./run.sh vue2-kit
./run.sh vue3-kit
./run.sh react-kit

# 列出所有子项目及状态
./run.sh ls

# 启动所有已安装依赖的子项目
./run.sh all

# 查看帮助
./run.sh -h
```

**功能特性：**
- 自动检测包管理器（yarn / pnpm / npm）
- 自动检测并清理占用端口
- 未安装依赖时自动执行安装
- 支持批量启动所有 READY 项目
- 彩虹渐变终端 UI，状态一目了然

**端口映射：**

| 子项目 | 默认端口 |
| --- | --- |
| html-ui | 5500 |
| vue2-kit | 60001 |
| vue3-kit | 60002 |
| vue3-ts-kit | 60003 |
| react-kit | 60004 |
| react-ts-kit | 60005 |
| uniapp-kit | 60007 |

#### install.sh - 依赖安装器

批量或单独安装子项目依赖，支持交互式菜单和命令行模式。

```bash
# 进入交互式菜单（推荐）
./install.sh

# 安装单个子项目
./install.sh vue2-kit
./install.sh react-kit

# 同时安装多个子项目
./install.sh vue3-kit react-kit react-ts-kit

# 批量安装所有子项目
./install.sh all

# 查看依赖状态
./install.sh ls

# 查看帮助
./install.sh -h
```

**功能特性：**
- 自动检测包管理器（根据 lock 文件）
- 支持增量安装（已存在 node_modules 时）
- 安装完成后显示汇总表（成功/失败/跳过）
- 支持多选安装 `m 1,3,5`

---

### Windows 批处理脚本

适用于 Windows 环境，双击即可运行，带彩色终端界面。

#### 统一控制台

| 脚本 | 说明 |
| --- | --- |
| [scripts/全部-菜单.bat](./scripts/全部-菜单.bat) | **推荐使用** - 交互式菜单，包含所有子项目的所有操作 |

运行 `全部-菜单.bat` 后，通过数字键选择操作：

```
  Vue2 Kit 操作
  ─────────────────────────────────────
  [1]  安装依赖      yarn install
  [2]  启动开发      vite dev  :60001
  [3]  生产构建      vite build
  [4]  清除重置      删除 node_modules / dist
  [5]  重命名文档    docs 英文文件名 → 中文

  Vue3 Kit 操作
  ─────────────────────────────────────
  [6]  安装依赖      yarn install
  [7]  启动开发      vite dev  :60002
  [8]  生产构建      vite build
  [9]  清除重置      删除 node_modules / dist
  [10] 重命名文档    docs 英文文件名 → 中文

  Vue3 TS Kit 操作
  ─────────────────────────────────────
  [11] 安装依赖      yarn install
  [12] 启动开发      vite dev  :60003
  [13] 生产构建      vite build
  [14] 清除重置      删除 node_modules / dist
  [15] 重命名文档    docs 英文文件名 → 中文

  React Kit 操作
  ─────────────────────────────────────
  [16] 安装依赖      yarn install
  [17] 启动开发      vite dev  :60004
  [18] 生产构建      vite build
  [19] 清除重置      删除 node_modules / dist

  React TS Kit 操作
  ─────────────────────────────────────
  [20] 安装依赖      yarn install
  [21] 启动开发      vite dev  :60005
  [22] 生产构建      vite build
  [23] 清除重置      删除 node_modules / dist
```

#### 按子项目分类的独立脚本

每个子项目都有独立的安装、启动、构建、清除脚本，可单独运行。

**Vue2 Kit：**

| 脚本 | 作用 | 执行命令 |
| --- | --- | --- |
| [vue2-kit-安装.bat](./scripts/vue2-kit-安装.bat) | 安装依赖 | 自动检测 yarn/npm，执行 install |
| [vue2-kit-启动.bat](./scripts/vue2-kit-启动.bat) | 启动开发服务器 | 端口 60001，未装依赖会自动安装 |
| [vue2-kit-构建.bat](./scripts/vue2-kit-构建.bat) | 生产构建 | 输出到 vue2-kit/dist/ |
| [vue2-kit-清除.bat](./scripts/vue2-kit-清除.bat) | 清除缓存 | 删除 node_modules / dist / .vite |
| [vue2-kit-重命名文档.bat](./scripts/vue2-kit-重命名文档.bat) | 文档中文化 | 将 docs/ 英文文件名改为中文 |

**Vue3 Kit：**

| 脚本 | 作用 | 执行命令 |
| --- | --- | --- |
| [vue3-kit-安装.bat](./scripts/vue3-kit-安装.bat) | 安装依赖 | 自动检测 yarn/npm，执行 install |
| [vue3-kit-启动.bat](./scripts/vue3-kit-启动.bat) | 启动开发服务器 | 端口 60002，未装依赖会自动安装 |
| [vue3-kit-构建.bat](./scripts/vue3-kit-构建.bat) | 生产构建 | 输出到 vue3-kit/dist/ |
| [vue3-kit-清除.bat](./scripts/vue3-kit-清除.bat) | 清除缓存 | 删除 node_modules / dist / .vite |
| [vue3-kit-重命名文档.bat](./scripts/vue3-kit-重命名文档.bat) | 文档中文化 | 将 docs/ 英文文件名改为中文 |

**Vue3 TS Kit：**

| 脚本 | 作用 | 执行命令 |
| --- | --- | --- |
| [vue3-ts-kit-安装.bat](./scripts/vue3-ts-kit-安装.bat) | 安装依赖 | 自动检测 yarn/npm，执行 install |
| [vue3-ts-kit-启动.bat](./scripts/vue3-ts-kit-启动.bat) | 启动开发服务器 | 端口 60003，未装依赖会自动安装 |
| [vue3-ts-kit-构建.bat](./scripts/vue3-ts-kit-构建.bat) | 生产构建 | 输出到 vue3-ts-kit/dist/ |
| [vue3-ts-kit-清除.bat](./scripts/vue3-ts-kit-清除.bat) | 清除缓存 | 删除 node_modules / dist / .vite |
| [vue3-ts-kit-重命名文档.bat](./scripts/vue3-ts-kit-重命名文档.bat) | 文档中文化 | 将 docs/ 英文文件名改为中文 |

**React Kit：**

| 脚本 | 作用 | 执行命令 |
| --- | --- | --- |
| [react-kit-安装.bat](./scripts/react-kit-安装.bat) | 安装依赖 | 自动检测 yarn/npm，执行 install |
| [react-kit-启动.bat](./scripts/react-kit-启动.bat) | 启动开发服务器 | 端口 60004，未装依赖会自动安装 |
| [react-kit-构建.bat](./scripts/react-kit-构建.bat) | 生产构建 | 输出到 react-kit/dist/ |
| [react-kit-清除.bat](./scripts/react-kit-清除.bat) | 清除缓存 | 删除 node_modules / dist / .vite |

**React TS Kit：**

| 脚本 | 作用 | 执行命令 |
| --- | --- | --- |
| [react-ts-kit-安装.bat](./scripts/react-ts-kit-安装.bat) | 安装依赖 | 自动检测 yarn/npm，执行 install |
| [react-ts-kit-启动.bat](./scripts/react-ts-kit-启动.bat) | 启动开发服务器 | 端口 60005，未装依赖会自动安装 |
| [react-ts-kit-构建.bat](./scripts/react-ts-kit-构建.bat) | 生产构建 | 输出到 react-ts-kit/dist/ |
| [react-ts-kit-清除.bat](./scripts/react-ts-kit-清除.bat) | 清除缓存 | 删除 node_modules / dist / .vite |

**uni-app Kit：**

| 脚本 | 作用 | 执行命令 |
| --- | --- | --- |
| [uniapp-kit/安装.bat](./scripts/uniapp-kit/安装.bat) | 安装依赖 | 自动检测 yarn/npm，执行 install |
| [uniapp-kit/启动.bat](./scripts/uniapp-kit/启动.bat) | 启动 H5 开发服务器 | 端口 60007，未装依赖会自动安装 |
| [uniapp-kit/构建.bat](./scripts/uniapp-kit/构建.bat) | H5 生产构建 | 输出到 uniapp-kit/dist/build/h5/ |
| [uniapp-kit/清除.bat](./scripts/uniapp-kit/清除.bat) | 清除缓存 | 删除 node_modules / dist |

---

### 子项目内 yarn 命令

除根目录脚本外，每个子项目也支持直接在目录内执行 yarn 命令：

```bash
# 以 vue3-kit 为例
cd vue3-kit

# 安装依赖
yarn install

# 启动开发服务器
yarn dev

# 生产构建
yarn build

# 预览构建产物
yarn preview

# 代码检查
yarn lint:check

# 代码格式化检查
yarn format:check

# 类型检查（仅 TS 项目）
yarn type:check
```

其他子项目操作方式相同，只需 `cd` 到对应目录即可。

---

## 目录结构

```text
universal-kit/
├─ docs/                    # 仓库级工程规范
│  ├─ React实施完成报告.md
│  ├─ CODE_STYLE.md
│  ├─ COMMIT_CONVENTION.md
│  └─ PROJECT_STRUCTURE.md
├─ html-ui/                 # 原生 HTML UI 模板
│  ├─ css/
│  ├─ data/
│  ├─ icons/
│  ├─ img/
│  ├─ js/
│  ├─ vendor/
│  └─ *.html
├─ scripts/                 # Windows 批处理脚本
├─ vue2-kit/                # Vue2 后台管理模板
│  ├─ docs/
│  ├─ mock/
│  ├─ public/
│  ├─ src/
│  ├─ package.json
│  └─ vite.config.js
├─ vue3-kit/                # Vue3 后台管理模板
│  ├─ docs/                 # 功能文档、截图、更新记录
│  ├─ mock/                 # Mock 接口数据
│  ├─ public/               # 公共静态资源
│  ├─ src/
│  │  ├─ api/               # Axios 请求封装与接口模块
│  │  ├─ assets/            # 字体、图片、全局样式
│  │  ├─ components/        # 公共组件
│  │  ├─ constants/         # 常量定义
│  │  ├─ directives/        # 自定义指令
│  │  ├─ layouts/           # 后台布局
│  │  ├─ locales/           # 国际化语言包
│  │  ├─ router/            # 路由与权限守卫
│  │  ├─ store/             # Pinia / Vuex 兼容状态层
│  │  ├─ utils/             # 工具函数
│  │  └─ views/             # 页面视图
│  ├─ package.json
│  └─ vite.config.js
├─ vue3-ts-kit/             # Vue3 + TypeScript 后台管理模板
│  ├─ docs/                 # 功能文档、截图、更新记录
│  ├─ mock/                 # Mock 接口数据
│  ├─ public/               # 公共静态资源
│  ├─ src/
│  │  ├─ api/               # Axios 请求封装与接口模块
│  │  ├─ assets/            # 字体、图片、全局样式
│  │  ├─ components/        # 公共组件
│  │  ├─ constants/         # 常量定义
│  │  ├─ directives/        # 自定义指令
│  │  ├─ layouts/           # 后台布局
│  │  ├─ locales/           # 国际化语言包
│  │  ├─ router/            # 路由与权限守卫
│  │  ├─ store/             # Pinia 状态层
│  │  ├─ utils/             # 工具函数
│  │  ─ views/             # 页面视图
│  ├─ package.json
│  └─ vite.config.ts
├─ react-kit/               # React 后台管理模板
│  ├─ docs/                 # 功能文档、截图、更新记录
│  ├─ mock/                 # Mock 接口数据
│  ├─ public/               # 公共静态资源
│  ├─ src/
│  │  ├─ api/               # Axios 请求封装与接口模块
│  │  ├─ assets/            # 字体、图片、全局样式
│  │  ├─ components/        # 公共组件
│  │  ├─ constants/         # 常量定义
│  │  ├─ layouts/           # 后台布局
│  │  ├─ locales/           # 国际化语言包
│  │  ├─ router/            # 路由与权限守卫
│  │  ├─ store/             # Zustand 状态层
│  │  ├─ utils/             # 工具函数
│  │  └─ views/             # 页面视图
│  ├─ package.json
│  └─ vite.config.js
├─ react-ts-kit/            # React + TypeScript 后台管理模板
│  ├─ docs/                 # 功能文档、截图、更新记录
│  ├─ mock/                 # Mock 接口数据
│  ├─ public/               # 公共静态资源
│  ├─ src/
│  │  ├─ api/               # Axios 请求封装与接口模块
│  │  ├─ assets/            # 字体、图片、全局样式
│  │  ├─ components/        # 公共组件
│  │  ├─ constants/         # 常量定义
│  │  ├─ layouts/           # 后台布局
│  │  ├─ locales/           # 国际化语言包
│  │  ├─ router/            # 路由与权限守卫
│  │  ├─ store/             # Zustand 状态层
│  │  ├─ utils/             # 工具函数
│  │  └─ views/             # 页面视图
│  ├─ package.json
│  └─ vite.config.ts
├─ uniapp-kit/              # uni-app 跨端模板（H5 / 微信小程序）
│  ├─ docs/                 # 功能文档、截图目录
│  ├─ src/
│  │  ├─ api/               # API 层（mock 分发）
│  │  ├─ locales/           # 国际化语言包（四语）
│  │  ├─ mock/              # 本地模拟数据
│  │  ├─ pages/             # 页面（tab 页 + 各功能模块）
│  │  ├─ static/            # 静态资源（tabBar 双态图标）
│  │  ├─ stores/            # Pinia 状态层
│  │  ├─ styles/            # 暗黑主题 CSS 变量
│  │  ├─ utils/             # 拦截器、主题、token 工具
│  │  └─ pages.json         # 页面注册与 tabBar 配置
│  ├─ package.json
│  └─ vite.config.js
├─ .husky/                  # Git hooks
├─ commitlint.config.cjs    # 提交信息校验
├─ package.json             # 仓库级依赖与 hooks
└─ README.md
```

---

## 文档索引

### React Kit 文档

- [React Kit README](./react-kit/README.md)
- [React Kit 文档索引](./react-kit/docs/README.md)
- [React 转换指南](./react-kit/docs/React转换指南.md)
- [项目实施状态](./react-kit/docs/项目实施状态.md)

### React-TS Kit 文档

- [React-TS Kit README](./react-ts-kit/README.md)
- [React-TS Kit 文档索引](./react-ts-kit/docs/README.md)
- [React 转换指南](./react-ts-kit/docs/React转换指南.md)
- [项目实施状态](./react-ts-kit/docs/项目实施状态.md)
- [爆红修复指南](./react-ts-kit/docs/爆红修复指南.md)
- [爆红问题说明](./react-ts-kit/docs/爆红问题说明.md)

### 仓库级文档

- [React 实施完成报告](./docs/React实施完成报告.md)
- [代码风格规范](./docs/CODE_STYLE.md)
- [提交规范](./docs/COMMIT_CONVENTION.md)
- [项目结构规范](./docs/PROJECT_STRUCTURE.md)

### Vue3 Kit 文档

- [Vue3 Kit README](./vue3-kit/README.md)
- [Vue3 Kit 文档索引](./vue3-kit/docs/README.md)
- [Axios 与 Mock 配置指南](./vue3-kit/docs/Axios与Mock配置指南.md)
- [权限模块使用指南](./vue3-kit/docs/权限模块使用指南.md)
- [消息服务使用指南](./vue3-kit/docs/消息服务使用指南.md)
- [富文本编辑器使用指南](./vue3-kit/docs/富文本编辑器使用指南.md)
- [组件目录结构规范](./vue3-kit/docs/组件目录结构规范.md)
- [截图说明](./vue3-kit/docs/截图说明.md)

### Vue3 TS Kit 文档

- [Vue3 TS Kit README](./vue3-ts-kit/README.md)
- [Vue3 TS Kit 文档索引](./vue3-ts-kit/docs/README.md)
- [Axios 与 Mock 配置指南](./vue3-ts-kit/docs/Axios与Mock配置指南.md)
- [权限模块使用指南](./vue3-ts-kit/docs/权限模块使用指南.md)
- [消息服务使用指南](./vue3-ts-kit/docs/消息服务使用指南.md)
- [富文本编辑器使用指南](./vue3-ts-kit/docs/富文本编辑器使用指南.md)
- [组件目录结构规范](./vue3-ts-kit/docs/组件目录结构规范.md)
- [截图说明](./vue3-ts-kit/docs/截图说明.md)

### Vue2 Kit 文档

- [Vue2 Kit README](./vue2-kit/README.md)
- [Vue2 Kit 文档索引](./vue2-kit/docs/README.md)

### uni-app Kit 文档

- [uni-app Kit README](./uniapp-kit/README.md)
- [uni-app Kit 功能文档](./uniapp-kit/docs/README.md)

---

## 工程化

### 代码检查

```bash
cd vue3-kit
yarn lint
yarn lint:check
```

### 代码格式化

```bash
cd vue3-kit
yarn format
yarn format:check
```

### 提交规范

仓库采用 [Conventional Commits](https://www.conventionalcommits.org/)：

| Type | 含义 | 示例 |
| --- | --- | --- |
| feat | 新增功能 | `feat(vue3-kit): 新增用户页面` |
| fix | 修复问题 | `fix(vue3-kit): 修复图表初始化` |
| docs | 文档改动 | `docs: 更新 README` |
| style | 格式调整 | `style(vue3-kit): 统一代码格式` |
| refactor | 重构 | `refactor(vue3-kit): 优化权限工具` |
| perf | 性能优化 | `perf(vue3-kit): 优化首屏加载` |
| test | 测试 | `test(vue3-kit): 补充表单测试` |
| build | 构建或依赖 | `build(vue3-kit): 调整 Vite 配置` |
| ci | CI 配置 | `ci: 新增构建检查` |
| chore | 杂项维护 | `chore: 更新脚本` |

完整规范见 [docs/COMMIT_CONVENTION.md](./docs/COMMIT_CONVENTION.md)。

---

## 当前校验状态

Vue3 Kit / Vue3 TS Kit 当前已通过：

```bash
yarn lint:check
yarn type:check
yarn build
```

构建时可能出现来自第三方 `@vueuse/core` 的 Rollup PURE 注释提示，该提示不会阻断构建，也不是项目源码错误。

---

## 开源协议

本项目采用 [MIT](./LICENSE) 协议。

你可以自由使用、修改和分发本项目代码，但请保留原始版权信息和作者署名。

---

## 作者信息

- 作者：Forever 顾北
- 格言：代码是写给人看的，顺便让机器执行。

---

## 免责声明

未经授权，禁止移除本项目中的版权信息和作者署名。

本项目仅供学习交流使用，请勿用于非法用途。

---

<p align="center">
  © 2026 UniversalKit. All rights reserved. | Powered by Forever 顾北
</p>