a6750929892997ad1199d78972103870cf06ca8a
Overhaul all core UI components (button, input, select, textarea, badge, alert, card) to use consistent tailwind color classes, add smooth transitions and hover states for better interactivity. Add TypeScript types, updated API functions, and utility helpers for lead management with filtering and pagination support. Build a fully functional leads management page with status and source filters, lead data formatting (travel date, budget, headcount), loading states, empty states, and a polished responsive table layout. Add comprehensive admin sidebar, workspace, and leads table styling to the global CSS.
WonderQ-Admin-UI
独立的 WonderQ 后台管理前端,基于 Vite、React、TypeScript、Tailwind CSS 4 和 shadcn/ui 风格组件。
本地启动
- 安装依赖:
yarn install
本项目使用 Yarn 1 锁文件。Windows 环境下,Vite 8、Tailwind CSS 4、lightningcss 依赖 native binding,package.json 中已固定对应的 Windows 构建包,避免 Yarn 1 漏装 optional dependency 导致构建失败。
-
确认后端 API 运行在
http://localhost:4000。 -
启动后台 UI:
yarn dev
局域网访问可使用本机 IP,例如 http://192.168.1.23:5602/。该地址由 Vite dev server 提供,支持样式和组件热更新。
默认后台账号由 WonderQ-Admin 提供:admin@example.com / ChangeMe123!。
目录说明
src/App.tsx:后台管理主界面和业务交互。src/api.ts:Admin API 类型、Token 管理和请求封装。src/components/ui/:本地 shadcn/ui 风格基础组件,包括 Button、Card、Input、Textarea、Badge、Alert、Switch 等。src/lib/utils.ts:组件 className 合并工具。src/styles.css:Tailwind 入口、设计变量、后台布局和响应式样式。public/assets/:后台预览所需静态资源,保留/assets/...引用方式。components.json:shadcn/ui 组件配置。vite.config.ts:开发环境将/api代理到http://localhost:4000,dev server 固定运行在5602并支持 HMR;生产构建预览运行在5603。
本仓库已经独立,不再依赖 WonderQ-MiniAPP 的相对路径。
Description
Languages
TypeScript
74%
CSS
25.9%
HTML
0.1%