基于 Fantastic-admin 框架的实用工具集 Web 应用
## 项目简介 utilToolsWeb 是一个基于 Vue3 和 Fantastic-admin 框架开发的实用工具集 Web 应用，提供了一系列常用工具和功能，方便用户在线使用。 ## 技术栈 - **核心框架**: Vue 3 - **UI 组件库**: Element Plus - **状态管理**: Pinia - **路由管理**: Vue Router - **构建工具**: Vite 4 - **CSS 解决方案**: UnoCSS + Tailwind Merge - **图标系统**: Iconify (支持离线使用) - **表单验证**: Vee-Validate + Zod - **国际化**: Vue I18n - **代码规范**: ESLint + Stylelint + Commitlint - **开发工具**: TypeScript 5 ## 项目结构 ``` utilToolsWeb/ ├── public/ # 静态资源 ├── src/ │ ├── api/ # API 接口管理 │ ├── App.vue # 根组件(包含权限控制、响应式布局等核心功能) │ ├── assets/ # 静态资源 │ ├── components/ # 公共组件 │ ├── iconify/ # 图标系统配置 │ ├── layouts/ # 布局组件 │ ├── main.ts # 应用入口(集成Pinia、Router、UI Provider等) │ ├── menu/ # 菜单配置 │ ├── mock/ # Mock数据 │ ├── router/ # 路由配置 │ │ ├── extensions/ # 路由扩展功能 │ │ ├── guards/ # 路由守卫 │ │ ├── routes/ # 路由定义 │ │ └── index.ts # 路由入口(支持文件系统和手动配置两种路由方式) │ ├── settings/ # 应用设置 │ ├── slots/ # 插槽组件 │ ├── store/ # 状态管理(Pinia) │ ├── types/ # 类型定义 │ ├── ui/ # UI提供者(全局组件注册等) │ ├── utils/ # 工具函数 │ ├── views/ # 页面组件 │ └── settings.ts # 应用配置 ├── vite/ # Vite配置 ├── themes/ # 主题配置 ├── .env.* # 环境变量配置 ├── uno.config.ts # UnoCSS配置 ├── vite.config.ts # Vite配置 └── package.json # 项目依赖 ``` ## 工具列表 当前已实现的工具： - **去重工具**：支持文本、数组等数据的去重处理 ## 计划功能 计划开发中的工具： 1. **代码格式化工具**： - 支持多种编程语言的代码格式化 - 支持自定义格式化规则 - 支持JSON、XML等数据格式的美化 2. **加密/解密工具**： - 支持常见加密算法(AES, DES, RSA等) - 支持Base64编码/解码 - 支持MD5、SHA等哈希计算 3. **单位转换器**： - 长度、重量、温度等单位转换 - 支持货币汇率转换 - 支持时间单位转换 4. **其他实用工具建议**： - 二维码生成器 - 颜色选择器与转换器 - 正则表达式测试工具 - 时间戳转换工具 - 文本差异对比工具 ## 核心功能 - **权限控制系统**: 基于路由meta.auth实现的细粒度权限控制 - **响应式布局**: 自动适应不同屏幕尺寸，支持多种布局模式 - **全局UI组件**: - 返回顶部按钮(FaBackToTop) - 消息提示(FaToast) - 通知系统(FaNotification) - 系统信息(FaSystemInfo) - **路由系统**: - 支持文件系统和手动配置两种路由生成方式 - 路由守卫实现权限验证 - 路由扩展功能增强路由能力 - **状态管理**: 基于Pinia的模块化状态管理 - **主题系统**: 支持多主题切换和自定义 - **国际化**: 支持多语言切换 ## 安装和使用 ### 环境要求 - Node.js >= 16.0.0 - npm >= 7.0.0 或 pnpm >= 7.0.0 ### 安装依赖 ```bash # 使用 npm npm install # 或使用 pnpm pnpm install ``` ### 开发环境运行 ```bash # 使用 npm npm run dev # 或使用 pnpm pnpm dev ``` ### 生产环境构建 ```bash # 使用 npm npm run build # 或使用 pnpm pnpm build ``` ## 开发指南 ### 添加新工具 1. 在 `src/views` 目录下创建新的工具页面 2. 在 `src/router/routes` 目录下添加路由配置 3. 如需 API 接口，在 `src/api` 目录下添加相应的 API 模块 ### 组件开发 组件应放置在 `src/components` 目录下，每个组件使用单独的文件夹，包含组件的 `.vue` 文件和相关资源。 ### 样式定制 项目使用 UnoCSS 进行样式管理，可以在 `uno.config.ts` 文件中进行配置。 ## 基于 Fantastic-admin 框架 本项目基于 [Fantastic-admin](https://fantastic-admin.hurui.me) 框架开发，这是一款开箱即用的 Vue3 中后台管理系统框架。 ### Fantastic-admin 特点 - 可自由替换 UI 组件库，默认使用 Element Plus - 丰富的布局与主题，覆盖市面上各种中后台应用场景 - 提供系统配置文件，轻松实现个性化定制 - 根据路由配置自动生成导航栏 - 基于文件系统的路由 - 支持全方位权限验证 - 内置多级路由最佳缓存方案 - 轻松实现国际化多语言适配 - 提供接近于浏览器原生标签栏操作体验的标签页功能 ## 许可证 [MIT](LICENSE)