# tiny-go-ui **Repository Path**: ynx520/tiny-go-ui ## Basic Information - **Project Name**: tiny-go-ui - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-06-24 - **Last Updated**: 2026-06-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Tiny Back Tiny Back 是一个基于 Vue 3、TypeScript、Vite 与 Element Plus 构建的中后台前端项目，面向 RBAC 权限管理、系统配置、博客管理、文件管理、AI 对话等业务场景。项目已经具备较完整的布局体系、主题配置、动态路由、权限控制、接口封装和通用业务组件能力，适合作为管理后台基础工程持续迭代。 ## 项目概览 ### 当前特性 - 基于 Vue 3 + TypeScript + Vite 的现代前端工程体系 - 基于 Pinia 的应用状态与用户状态管理 - 基于 Vue Router 的静态路由、动态路由与路由守卫 - 支持垂直、水平、顶部混合、左侧分组导航等多种后台布局 - 支持明暗模式、主题色、外观面板等主题能力 - 支持菜单路由转换、按钮权限指令、用户信息与权限状态维护 - 按业务模块拆分 API 与类型定义，便于维护和扩展 - 内置 ProTable、SearchForm、DictSelect、DictTag、StatusSwitch、CronPicker、TianaiCaptcha 等复用组件 - 覆盖系统管理、博客管理、网盘文件、AI 对话、用户中心、主题实验室、图标实验室等页面模块 ### 适用场景 - RBAC 管理后台 - 配置管理与字典管理平台 - 内容管理系统（CMS） - 带主题和权限体系的企业内部平台 - 需要动态菜单与多布局支持的中后台项目 ## 技术栈 | 分类 | 技术 | | --- | --- | | 核心框架 | Vue 3 | | 开发语言 | TypeScript | | 构建工具 | Vite | | UI 组件库 | Element Plus | | 状态管理 | Pinia | | 路由 | Vue Router | | HTTP 客户端 | Axios | | 样式 | Sass / CSS Variables | | 工程规范 | ESLint / Prettier | | 常用工具库 | VueUse、Dayjs、SortableJS、SparkMD5、md-editor-v3 | ## 功能模块 ### 布局系统 - 垂直布局 - 水平布局 - 顶部混合布局 - 左侧分组导航布局 - 侧边栏折叠与展开 - 标签页视图与内容区联动 - 页头工具区、页脚、主内容区组合布局 ### 主题与外观 - 明暗模式切换 - 主题主色配置 - 布局模式切换 - 外观配置面板 - 基于 CSS 变量的主题扩展 ### 权限与路由 - 登录页与路由守卫 - 动态路由生成 - 菜单路由转换 - 按钮权限指令 - 用户、角色、菜单等 RBAC 管理页面 ### 通用组件 - ProTable 高级表格 - SearchForm 查询表单 - DictSelect 字典下拉 - DictTag 字典标签 - StatusSwitch 状态开关 - SelectIcon / IconPicker 图标选择 - CronPicker 表达式选择 - TianaiCaptcha 验证码组件 - 文件分片上传相关工具 ### 业务页面 - 系统管理：用户、角色、菜单、字典、岗位任务、登录日志、操作日志 - 博客管理：文章、分类、标签、站点设置 - 文件管理：网盘文件列表、上传、下载、容量统计、分片上传测试 - AI 对话：基础对话页面 - 用户中心：基础信息、修改密码、在线设备、第三方应用、流程管理 - 工具页面：图标实验室、主题实验室、关于页、外链 iframe 页面 ## 目录结构 ```text src/ ├── api/ # 接口定义与业务 API 模块 │ ├── interface/ # 通用接口类型 │ └── modules/ # 按业务拆分的接口模块 ├── assets/ # 图片、图标、字体等静态资源 ├── components/ # 通用业务组件 ├── composables/ # 组合式业务逻辑 ├── config/ # 全局配置 ├── constants/ # 常量定义 ├── hooks/ # 通用 hooks ├── layouts/ # 页面布局、头部、侧边栏、主题面板 ├── plugins/ # 插件、全局组件、指令、图标注册 ├── router/ # 路由配置、动态路由、路由守卫 ├── stores/ # Pinia 状态管理 ├── styles/ # 全局样式与 CSS 变量 ├── types/ # 全局类型定义 ├── utils/ # 请求、路由、主题、上传等工具函数 └── views/ # 页面模块 ``` ## 已有页面与能力概览 ### 系统模块 - 用户管理 - 角色管理 - 菜单管理 - 字典管理 - 定时任务管理 - 登录日志 - 操作日志 ### 博客模块 - 文章管理 - 分类管理 - 标签管理 - 站点设置 ### 其他模块 - 网盘文件管理 - AI 对话 - 用户中心 - 主题实验室 - 图标实验室 - 外链 iframe 页面 - About 页面 ## 快速开始 ### 环境要求 建议使用以下环境： - Node.js 20 或更高版本 - pnpm 9 或更高版本 ### 安装依赖 ```bash pnpm install ``` ### 本地开发 ```bash pnpm run dev ``` ### 生产构建 ```bash pnpm run build ``` 说明：当前 `build` 脚本会先执行 `vue-tsc -b`，再执行 `vite build`。 ### 本地预览构建结果 ```bash pnpm run preview ``` ### 代码检查与格式化 ```bash pnpm run lint pnpm run format ``` ## 脚本说明 当前 `package.json` 中提供以下脚本： | 脚本 | 说明 | | --- | --- | | `pnpm run dev` | 启动 Vite 本地开发服务 | | `pnpm run build` | 执行 TypeScript 类型构建检查并产出生产构建 | | `pnpm run preview` | 本地预览构建产物 | | `pnpm run lint` | 使用 ESLint 检查并自动修复问题 | | `pnpm run format` | 使用 Prettier 格式化 `src` 下的 ts、vue、css 文件 | ## 环境变量 项目根目录包含以下环境文件： - `.env` - `.env.development` - `.env.test` - `.env.production` - `.env.local.example` ### 常见变量 | 变量 | 说明 | | --- | --- | | `VITE_API_BASE_URL` | Axios 请求基础地址，默认值为 `/api` | | `VITE_APP_TITLE` | 页面标题 | | `VITE_APP_VERSION` | 应用版本号 | | `VITE_APP_COPYRIGHT` | 页脚版权信息 | | `VITE_USE_MOCK` | 是否启用 mock 数据 | ### 本地开发建议 可以参考 `.env.local.example` 新建 `.env.local` 进行本地覆盖配置，例如配置本地后端地址： ```bash VITE_API_BASE_URL=http://localhost:9091/api ``` 请不要提交包含敏感信息的本地环境文件。 ## 开发约定 - Vue 组件优先使用 `