preact-feature-flag-manager — Vite 后台模板

SHA-256: c8c7edbf2ac533c05ed2ab0a2a306eb20fab35f7c3ae91ec6ee90550d486286f

2026-10-15T09:06:51.751Z

<div align="center">

# ✦ Preact Feature Flag Manager

**A premium, client-side SaaS dashboard template for managing feature toggles, rollouts, and environments.**

![Preact](https://img.shields.io/badge/Preact-10-673ab8?style=for-the-badge&logo=preact&logoColor=ffffff)
![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6?style=for-the-badge&logo=typescript&logoColor=ffffff)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=ffffff)
![Vite](https://img.shields.io/badge/Vite-6-646CFF?style=for-the-badge&logo=vite&logoColor=ffffff)
![Vercel](https://img.shields.io/badge/Vercel-ready-000000?style=for-the-badge&logo=vercel&logoColor=ffffff)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new)

</div>

---

## ✨ Highlights

- **Premium SaaS UI:** Features a meticulously crafted dark mode aesthetic with custom grid backgrounds, radial gradients, and micro-interactions.
- **Custom Components:** Includes from-scratch Tailwind components like animated toggle switches and dynamic rollout progress bars without relying on heavy external UI libraries.
- **State-Driven Design:** The interface instantly reacts to feature toggles, graying out inactive elements and highlighting live features with vibrant indigo accents.
- **Responsive Layout:** A mobile-first approach with a collapsible sidebar and fluid grid cards that scale perfectly from phones to ultrawide monitors.

## 🧱 Project Structure

```text
src/
|-- main.tsx          # Application entry point
`-- app.tsx           # Main dashboard layout, mock data, and custom UI components
```

## 🛠️ Tech Stack

- Preact 10 with Vite 6
- Tailwind CSS 4 for utility-first styling
- `lucide-preact` for clean, scalable iconography

## 🚀 Local Development

```bash
npm install
npm run dev
```

Open `http://localhost:5173` to view the dashboard in your browser. The UI is currently populated with mock data for immediate layout testing.

## 🔌 Extension Notes & Nuances

- **NOTE: Backend Integration:** This project is designed as a frontend template. To make it functional, the `toggleFlag` function and the initial `flags` state inside `app.tsx` should be connected to a real API (e.g., using `fetch` to update a PostgreSQL database or a Redis store).
- **NOTE: CSS Grid Pattern:** The custom background grid is defined purely in CSS inside `src/index.css`. You can adjust the `background-size` or opacity to change the "density" of the engineering grid.

## 🧪 Build & Checks

```bash
npm run build
npm run preview
```

## 🌐 Vercel Deployment

The repository includes a highly optimized `vercel.json` for Vite static SPA deployment, ensuring perfect client-side routing.

```json
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}
```

## 📄 License

MIT License. See [LICENSE](./LICENSE).