Files
WonderQ-Admin-UI/README.md
duanshuwen 462498660e feat: enhance admin UI with responsive styles and new components
- Updated styles in src/styles.css for better responsiveness and layout adjustments.
- Added new CSS classes for edit drawer and item rail components.
- Introduced animations for drawer transitions.
- Created new types in src/types/admin.ts for better type safety in admin features.
- Modified vite.config.ts to change server port and enable strict port settings for development.
2026-07-01 16:55:23 +08:00

1.6 KiB
Raw Permalink Blame History

WonderQ-Admin-UI

独立的 WonderQ 后台管理前端,基于 Vite、React、TypeScript、Tailwind CSS 4 和 shadcn/ui 风格组件。

本地启动

  1. 安装依赖:
yarn install

本项目使用 Yarn 1 锁文件。Windows 环境下Vite 8、Tailwind CSS 4、lightningcss 依赖 native bindingpackage.json 中已固定对应的 Windows 构建包,避免 Yarn 1 漏装 optional dependency 导致构建失败。

  1. 确认后端 API 运行在 http://localhost:4000

  2. 启动后台 UI

yarn dev

访问:http://localhost:5602

局域网访问可使用本机 IP例如 http://192.168.1.23:5602/。该地址由 Vite dev server 提供,支持样式和组件热更新。

默认后台账号由 WonderQ-Admin 提供:admin@example.com / ChangeMe123!

目录说明

  • src/App.tsx:后台管理主界面和业务交互。
  • src/api.tsAdmin API 类型、Token 管理和请求封装。
  • src/components/ui/:本地 shadcn/ui 风格基础组件,包括 Button、Card、Input、Textarea、Badge、Alert、Switch 等。
  • src/lib/utils.ts:组件 className 合并工具。
  • src/styles.cssTailwind 入口、设计变量、后台布局和响应式样式。
  • public/assets/:后台预览所需静态资源,保留 /assets/... 引用方式。
  • components.jsonshadcn/ui 组件配置。
  • vite.config.ts:开发环境将 /api 代理到 http://localhost:4000dev server 固定运行在 5602 并支持 HMR生产构建预览运行在 5603

本仓库已经独立,不再依赖 WonderQ-MiniAPP 的相对路径。