# VeloAdmin-web **Repository Path**: vue-node/velo-admin-web ## Basic Information - **Project Name**: VeloAdmin-web - **Description**: VeloAdmin 前端 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-07-28 - **Last Updated**: 2025-08-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # VeloAdmin 基于 Vue3 + NestJS 的敏捷后台管理系统 ## 技术栈 - **前端**: Vue 3 + TypeScript + Vite - **UI 框架**: Element Plus - **CSS 框架**: UnoCSS - **状态管理**: Pinia - **路由**: Vue Router - **后端**: NestJS (待开发) ## 项目特性 - 🎨 **现代化 UI**: 使用 Element Plus 和 UnoCSS 构建美观的界面 - 🌙 **暗黑模式**: 支持明亮/暗黑主题切换 - 📱 **响应式设计**: 适配各种屏幕尺寸 - ⚡ **高性能**: 基于 Vite 构建，开发体验极佳 - 🔧 **类型安全**: 完整的 TypeScript 支持 ## 快速开始 ### 安装依赖 ```bash npm install ``` ### 启动开发服务器 ```bash npm run dev ``` ### 构建生产版本 ```bash npm run build ``` ## UnoCSS 使用说明 本项目使用 UnoCSS 作为 CSS 框架，主要特性： ### 快捷方式 (Shortcuts) - `btn`: 基础按钮样式 - `btn-primary`: 主要按钮样式 - `btn-secondary`: 次要按钮样式 - `card`: 卡片容器样式 - `input`: 输入框样式 ### 暗黑模式 使用 `dark:` 前缀来定义暗黑模式样式，例如： ```html
``` ### 常用类名 - 布局: `flex`, `grid`, `container` - 间距: `p-4`, `m-2`, `gap-4` - 颜色: `bg-blue-500`, `text-white`, `border-gray-300` - 响应式: `sm:`, `md:`, `lg:`, `xl:` ## 项目结构 ``` src/ ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── layouts/ # 布局组件 ├── router/ # 路由配置 ├── stores/ # Pinia 状态管理 ├── views/ # 页面组件 │ ├── dashboard/ # 首页 │ ├── login/ # 登录页 │ ├── system/ # 系统管理 │ ├── meta/ # 元数据管理 │ ├── lowcode/ # 低代码平台 │ ├── plugin/ # 插件系统 │ └── profile/ # 个人中心 └── main.ts # 应用入口 ``` ## 开发指南 ### 添加新页面 1. 在 `src/views/` 下创建页面组件 2. 在 `src/router/index.ts` 中添加路由配置 3. 在 `src/layouts/DefaultLayout.vue` 中添加菜单项 ### 主题定制 修改 `uno.config.ts` 文件来自定义主题颜色和快捷方式。 ## 许可证 MIT License ## 开发日志 ### -2025.08.19 feat: 新增配置管理模块及优化系统功能 refactor: 重构请求工具和路由权限逻辑 style: 优化404页面和系统管理页面样式 fix: 修复登录页验证码配置问题 perf: 优化菜单转换和路由标签功能 docs: 更新API响应类型定义 chore: 添加Element Plus中文语言包和暗黑模式支持 ### -2025.08.13 eat: 重构前端架构并实现RBAC权限管理 - 新增RBAC权限管理模块，包括权限、角色和用户类型定义 - 实现动态路由加载和权限控制逻辑 - 重构请求拦截器，增加token自动刷新机制 - 使用Iconify替换FontAwesome图标库 - 优化主题切换和布局组件 - 新增404页面并移除旧版NotFound页面 - 重构用户登录、注册和权限验证流程 - 更新依赖项并优化构建配置 - 实现基于权限的动态菜单生成 - 优化标签页和右键菜单功能 ### -2025.08.05 feat(api): 统一API响应类型并增强登录注册功能 - 新增api.d.ts定义统一API响应类型 - 修改user.ts使用新响应类型 - 登录注册页面添加密码确认功能 - 更新环境变量中的API基础URL - 清理请求拦截器中的冗余注释 ### -2025.07.30 当前版本相较于上一版本主要进行了以下开发和改进： 1. **图标系统全面升级**： - 将`DefaultLayout.vue`中的所有Element Plus图标替换为Font Awesome图标系统 - 统一了图标样式，为所有图标添加了`class="w-4 h-4"`或`class="w-6 h-6"`的尺寸控制 - 替换了包括个人信息、修改密码、退出登录等菜单项及标签页相关的图标 - 处理了内联SVG图标，如消息通知按钮和主题切换按钮的图标 - 更新了菜单收缩/展开按钮的图标实现 2. **代码质量与开发体验优化**： - 修改`eslint.config.ts`文件，全局禁用了"Component name 'index' should always be multi-word"的ESLint提示 - 通过添加`'vue/multi-word-component-names': 'off'`规则配置，解决了单单词组件名称的检查问题 这些改进使项目图标系统更加统一和现代化，同时优化了开发体验，减少了不必要的代码检查提示。