鸟情监控平台

deepsource-io[bot] 558110ef55 ci: add .deepsource.toml пре 2 месеци
.vscode f4572b8b7f first commit пре 2 месеци
public 4fdeaf0d26 fix: loader color пре 2 месеци
src 085b32fdeb refactor: rename code пре 2 месеци
.deepsource.toml 558110ef55 ci: add .deepsource.toml пре 2 месеци
.editorconfig f4572b8b7f first commit пре 2 месеци
.env.development f4572b8b7f first commit пре 2 месеци
.env.production f4572b8b7f first commit пре 2 месеци
.gitattributes f4572b8b7f first commit пре 2 месеци
.gitignore f4572b8b7f first commit пре 2 месеци
.prettierrc.json f4572b8b7f first commit пре 2 месеци
LICENSE 1863e04cc4 Create LICENSE пре 2 месеци
README.md b0723ec7d2 docs: README пре 2 месеци
eslint.config.ts 034f33109f style: format code пре 2 месеци
index.html 034f33109f style: format code пре 2 месеци
package.json 6a6d7ab550 style: format code пре 2 месеци
pnpm-lock.yaml f4572b8b7f first commit пре 2 месеци
tailwind.config.ts f4572b8b7f first commit пре 2 месеци
tsconfig.app.json f4572b8b7f first commit пре 2 месеци
tsconfig.json f4572b8b7f first commit пре 2 месеци
tsconfig.node.json f4572b8b7f first commit пре 2 месеци
tsconfig.vitest.json f4572b8b7f first commit пре 2 месеци
vercel.json acd739b7e4 Create vercel.json пре 2 месеци
vite.config.ts f4572b8b7f first commit пре 2 месеци
vitest.config.ts f4572b8b7f first commit пре 2 месеци

README.md

# Lithe Admin ![Vue](https://img.shields.io/badge/Vue-3.5.18-42B883?style=for-the-badge&logo=vue.js) ![Naive UI](https://img.shields.io/badge/Naive_UI-2.42.0-75B93F?style=for-the-badge&logo=naiveui) ![Vite](https://img.shields.io/badge/Vite-7.0.11-646cff?style=for-the-badge&logo=vite) ![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.1.11-4ABAFB?style=for-the-badge&logo=tailwindcss) ![TypeScript](https://img.shields.io/badge/TypeScript-5.8.0-4377C1?style=for-the-badge&logo=typescript) [预览地址](https://lithe-admin.vercel.app)

📃 简介

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 (推荐) 或 npmyarn

安装依赖

# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install

# 或使用 yarn
yarn install

开发模式

pnpm dev

单元测试

pnpm test:unit

构建生产版本

pnpm build

预览生产版本

pnpm preview

代码检查

# 检查代码质量
pnpm lint:check

# 自动修复代码问题
pnpm lint:fix

# 检查代码格式
pnpm format:check

# 自动格式化代码
pnpm format:fix

🗳️ 图标

图标库使用 Iconify,使用方式如下:

<!-- 使用 ph 前缀 -->
<span class="iconify ph--x"></span>

<!-- 直接使用 -->
<span class="iconify-[fluent--data-area-32-regular]"></span>

上面的 ph 前缀需要在 src/assets/main.css 中进行配置,详细文档请参考 Iconify Tailwind 4

@plugin "@iconify/tailwind4" {
  prefixes: ph;
  prefix: 'iconify';
  scale: 1.2;
}