## 📃 简介 **Lithe Admin** 是一个轻盈而优雅的后台管理模板，基于 **`Vue3`** **`Naive UI`** **`Vite7`** **`TailwindCSS4`** **`TypeScript`** **`Pinia`** 构建，沿用折纸般的页面结构设计，轻量的业务依赖和低耦合代码配置，专为灵活拓展和个性化定制而打造，适用于快速搭建和渐进式迭代的后台管理系统 ## ✨ 特性 - 🎨 **现代化设计** - 基于 Tailwind Color 配色方案，采用磨砂质感和纹理效果，​​提升视觉层次与主题表现力 - 🧩 **灵活主题定制** - 支持自定义颜色、主题、组件样式 - 🧭 **交互反馈效果** - 韵滑的过渡效果，交互体验更自然流畅 - 📝 **代码规范** - 通过 ESLint 规范代码质量，Prettier 格式化代码风格 - 🎯 **TypeScript** - 完整的 TypeScript 支持，更好的类型提示与开发体验 - ⚡ **Vite** - 快速的开发服务器和构建工具 ## 🚀 快速开始 ### 环境要求 - **Node.js**: `^20.19.0` 或 `>=22.12.0` - **包管理器**: `pnpm` (推荐) 或 `npm` 或 `yarn` ### 安装依赖 ```bash # 使用 pnpm (推荐) pnpm install # 或使用 npm npm install # 或使用 yarn yarn install ``` ### 开发模式 ```bash pnpm dev ``` ### 单元测试 ```bash pnpm test:unit ``` ### 构建生产版本 ```bash pnpm build ``` ### 预览生产版本 ```bash pnpm preview ``` ### 代码检查 ```bash # 检查代码质量 pnpm lint:check # 自动修复代码问题 pnpm lint:fix # 检查代码格式 pnpm format:check # 自动格式化代码 pnpm format:fix ``` ## 📦 图标 图标库使用 [Iconify](https://iconify.design)，使用方式如下： ```html ``` 上面的 `ph` 前缀需要在 `src/assets/base.css` 中进行配置，详细文档请参考 [Iconify Tailwind 4](https://iconify.design/docs/usage/css/tailwind/tailwind4) ```css @plugin "@iconify/tailwind4" { prefixes: ph; prefix: 'iconify'; scale: 1.2; } ```