# 项目：账户云端黑名单管理系统
请为我生成一个完整的全栈 Web 应用程序，用于管理云端账户黑名单。该系统需包含公开查询界面和后台管理界面，并严格区分超级管理员与子管理员的权限。要求web界面使用中文，使用php格式
## 1. 技术栈建议
- **前端框架**: React (可使用 Vite 或 Next.js App Router)，搭配 TypeScript。
- **样式**: Tailwind CSS，界面需简洁、现代、响应式。
- **后端与数据库**: 优先使用 **Supabase** (处理认证、数据库和实时 API)。若使用其他方案，请确保包含完整的后端逻辑。
- **验证**: 使用 Zod 进行前后端数据校验。
## 2. 核心功能与页面要求
### 页面 A：公开查询界面 (路径：`/` 或 `/query`)
此页面**无需登录**，仅提供查询功能，不能修改任何数据。
- **单个查询**：
- 输入框（账户标识，如用户名、邮箱或 ID）。
- “查询”按钮。
- 结果显示：账户名、状态（是否在黑名单）、备注内容。
- **批量查询功能（重点）**：
- 提供一个较大的文本域（Textarea）。
- 支持用户输入多个账户，**每行一个**。
- “批量查询”按钮。
- **结果展示**：以表格形式列出每一行输入的账户，对应显示“是否登记”和“备注”。若账户不在黑名单中，备注列显示“-”或“未登记”。
### 页面 B：管理员登录界面 (路径：`/admin/login`)
- 使用邮箱/密码登录。
- 登录成功后根据角色（超级管理员 / 子管理员）跳转至不同功能面板。
### 页面 C：管理员仪表盘 (路径：`/admin/dashboard`)
#### 通用功能（超级管理员与子管理员均可见）
- **黑名单管理 (CRUD)**：
- **列表展示**：表格展示所有已登记的黑名单账户，包含列：账户标识、备注、登记时间、操作（编辑、删除）。
- **新增黑名单**：弹窗或表单，输入“账户标识”和“备注”。需校验账户不可重复添加。
- **编辑备注**：可修改已有记录的备注信息。
- **删除记录**：将账户从黑名单移除。
#### 超级管理员专属功能 (路径：`/admin/sub-admins`)
- **子管理员注册**：
- 表单：输入邮箱、初始密码（或发送设置密码邮件，为简化开发，可先使用直接设置密码的方式）。
- 角色固定为 `sub_admin`，不可更改。
- **子管理员列表**：
- 展示所有子管理员账号，包含：邮箱、创建时间、状态。
- 提供“禁用/启用”或“删除”子管理员的功能（可选，加分项）。
#### 权限控制逻辑
- 子管理员登录后，**看不到**“子管理员管理”的菜单入口，且无法通过直接输入 URL 访问该页面（API 层也需拦截）。
## 3. 数据库模型设计 (Supabase SQL)
请根据以下结构创建数据表：
```sql
-- 黑名单表
CREATE TABLE blacklist (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
account TEXT UNIQUE NOT NULL, -- 账户唯一标识
remark TEXT,
created_at TIMESTAMPTZ DEFAULT now(),
updated_at TIMESTAMPTZ DEFAULT now()
);
-- 管理员配置表 (扩展 Supabase Auth 用户表)
-- 假设使用 Supabase 自带 auth.users 表存储邮箱和密码
CREATE TABLE public.admin_profiles (
id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
role TEXT NOT NULL CHECK (role IN ('super_admin', 'sub_admin')),
created_at TIMESTAMPTZ DEFAULT now()
);
-- 自动更新时间触发器
-- (请编写触发器在更新 blacklist 时刷新 updated_at 字段)
```
## 4. API 与安全约束
- **查询 API**：公开访问，支持 `GET /api/blacklist?account=xxx` 和 `POST /api/blacklist/batch` (接收账户数组)。
- **管理 API**：所有 `/api/admin/*` 下的路由必须验证用户登录态，并检查 `admin_profiles` 中的角色。
- **初始化脚本**：系统首次运行时，需包含一个脚本或 Seed 方法，在数据库中创建一个默认的超级管理员账号：
- 邮箱：`admin@example.com`
- 密码：`admin123`（首次登录后需强制修改密码或给出提示）
## 5. UI/UX 细节指令
- **加载状态**：查询和提交表单时需显示 Loading 状态，防止重复点击。
- **空状态**：列表无数据时显示友好的占位图或文字。
- **批量查询优化**：若用户输入空行，前端应自动过滤；若输入超过 100 行，提示“单次查询上限为 100 个账户”。
- **布局**：
- 查询界面：居中卡片式布局，背景色柔和。
- 管理界面：左侧导航栏 + 右侧内容区。
## 6. 交付要求
1. 生成完整的项目文件结构。
2. 提供 `.env.example` 文件说明所需环境变量（Supabase URL 和 Anon Key）。
3. 提供清晰的 `README.md`，说明如何安装依赖、配置环境变量、运行数据库迁移以及启动项目。
4. 代码需有适当的注释，特别是权限判断逻辑部分。
请开始生成代码。
```