|
|
@@ -0,0 +1,115 @@
|
|
|
+<div align="center">
|
|
|
+
|
|
|
+# Lithe Admin
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+[Preview](https://lithe-admin.vercel.app)
|
|
|
+
|
|
|
+English | [简体中文](https://github.com/tenianon/shimmer-theme/blob/main/README.md)
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+## 📃 Introduction
|
|
|
+
|
|
|
+**Lithe Admin** is a lightweight and elegant admin template built with **`Vue 3`**, **`Naive UI`**, **`Vite 7`**, **`Tailwind CSS 4`**, **`TypeScript`**, and **`Pinia`**. It adopts an origami-style page structure, features minimal business dependencies and low-coupled configuration, and is crafted for flexible extension and personalization—ideal for rapidly bootstrapping and progressively iterating admin systems.
|
|
|
+
|
|
|
+## ✨ Features
|
|
|
+
|
|
|
+- 🎨 **Modern Design** - Based on the Tailwind Color palette, utilizing frosted glass and texture effects to enhance visual hierarchy and theme expressiveness
|
|
|
+- 🧩 **Flexible Theming** - Customize colors, themes, and component styles
|
|
|
+- 🧭 **Interaction Feedback** - Smooth transitions for a natural, fluid experience
|
|
|
+- 📱 **Responsive** - Solid mobile responsiveness
|
|
|
+- 📝 **Code Quality** - ESLint for linting and Prettier for formatting
|
|
|
+- 🎯 **TypeScript** - Full typing support for better DX
|
|
|
+- ⚡ **Vite** - Fast dev server and build tool
|
|
|
+
|
|
|
+## 🚀 Getting Started
|
|
|
+
|
|
|
+### Requirements
|
|
|
+
|
|
|
+- **Node.js**: `^20.19.0` or `>=22.12.0`
|
|
|
+- **Package Manager**: `pnpm` (recommended), or `npm`, or `yarn`
|
|
|
+
|
|
|
+### Install Dependencies
|
|
|
+
|
|
|
+```bash
|
|
|
+# Using pnpm (recommended)
|
|
|
+pnpm install
|
|
|
+
|
|
|
+# Or npm
|
|
|
+npm install
|
|
|
+
|
|
|
+# Or yarn
|
|
|
+yarn install
|
|
|
+```
|
|
|
+
|
|
|
+### Development
|
|
|
+
|
|
|
+```bash
|
|
|
+pnpm dev
|
|
|
+```
|
|
|
+
|
|
|
+### Unit Tests
|
|
|
+
|
|
|
+```bash
|
|
|
+pnpm test:unit
|
|
|
+```
|
|
|
+
|
|
|
+### Build for Production
|
|
|
+
|
|
|
+```bash
|
|
|
+pnpm build
|
|
|
+```
|
|
|
+
|
|
|
+### Preview Production Build
|
|
|
+
|
|
|
+```bash
|
|
|
+pnpm preview
|
|
|
+```
|
|
|
+
|
|
|
+### Lint & Format
|
|
|
+
|
|
|
+```bash
|
|
|
+# Lint check
|
|
|
+pnpm lint:check
|
|
|
+
|
|
|
+# Lint fix
|
|
|
+pnpm lint:fix
|
|
|
+
|
|
|
+# Format check
|
|
|
+pnpm format:check
|
|
|
+
|
|
|
+# Format fix
|
|
|
+pnpm format:fix
|
|
|
+```
|
|
|
+
|
|
|
+## 📦 Icons
|
|
|
+
|
|
|
+This project uses [Iconify](https://iconify.design). Usage examples:
|
|
|
+
|
|
|
+```html
|
|
|
+<!-- Using the `ph` prefix -->
|
|
|
+<span class="iconify ph--x"></span>
|
|
|
+
|
|
|
+<!-- Direct usage -->
|
|
|
+<span class="iconify-[fluent--data-area-32-regular]"></span>
|
|
|
+```
|
|
|
+
|
|
|
+The `ph` prefix needs to be configured in `src/assets/base.css`. Refer to the official docs: [Iconify Tailwind 4](https://iconify.design/docs/usage/css/tailwind/tailwind4)
|
|
|
+
|
|
|
+```css
|
|
|
+@plugin "@iconify/tailwind4" {
|
|
|
+ prefixes: ph;
|
|
|
+ prefix: 'iconify';
|
|
|
+ scale: 1.2;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+## 📄 License
|
|
|
+
|
|
|
+This project is licensed under the terms of the [MIT License](./LICENSE).
|
nian