Refactor code structure for improved readability and maintainability

README.md

@@ -1,6 +1,6 @@
 # WonderQ-Admin-UI
 
-独立的 WonderQ 后台管理前端，基于 Vite、React、TypeScript 和普通 CSS。
+独立的 WonderQ 后台管理前端，基于 Vite、React、TypeScript、Tailwind CSS 4 和 shadcn/ui 风格组件。
 
 ## 本地启动
 
@@ -10,6 +10,8 @@
 yarn install
 ```
 
+本项目使用 Yarn 1 锁文件。Windows 环境下，Vite 8、Tailwind CSS 4、lightningcss 依赖 native binding，`package.json` 中已固定对应的 Windows 构建包，避免 Yarn 1 漏装 optional dependency 导致构建失败。
+
 2. 确认后端 API 运行在 `http://localhost:4000`。
 
 3. 启动后台 UI：
@@ -24,8 +26,13 @@ yarn dev
 
 ## 目录说明
 
-- `src/`：后台管理 UI 和 API 客户端。
+- `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/...` 引用方式。
-- `vite.config.ts`：开发环境将 `/api` 代理到 `http://localhost:4000`。
+- `components.json`：shadcn/ui 组件配置。
+- `vite.config.ts`：开发环境将 `/api` 代理到 `http://localhost:4000`，并接入 Tailwind Vite 插件与 `@/*` 路径别名。
 
 本仓库已经独立，不再依赖 `WonderQ-MiniAPP` 的相对路径。