一、核心开发目标<br/> <br/>基于“人设卡片管理系统”，完成**“卡片分类查询”核心功能开发**，并整合系统原有基础模块（用户/管理员双角色登录、问卷-卡片关联、卡片配额交互），确保所有功能可直接部署运行，无需额外大幅修改代码。<br/> <br/>二、功能模块与详细规则<br/> <br/>1. 核心功能：卡片分类查询（问卷-卡片列表页）<br/> <br/>1.1 筛选交互设计<br/> <br/>- 在“问卷-卡片列表页”顶部新增2个筛选按钮（样式统一为“深色底色+高对比度强调色文字/边框”），按钮文案分别为“已满”“可用”；<br/>- 点击筛选按钮后，需通过无刷新加载（AJAX）更新卡片列表，不跳转页面，加载时显示简易加载动画（如“转圈图标”）；<br/>- 筛选状态需可视化标记（如点击后按钮切换为“强调色底色+白色文字”，未点击按钮保持默认样式）。<br/> <br/>1.2 筛选逻辑规则<br/> <br/>- 点击“已满”：仅加载当前选中问卷下， character_card 表中 quota 字段值等于0的人设卡片；<br/>- 点击“可用”：仅加载当前选中问卷下， character_card 表中 quota 字段值大于0的人设卡片；<br/>- 初始进入页面：默认加载“可用”状态的卡片（即默认触发“可用”筛选逻辑）。<br/> <br/>1.3 卡片排版与分页<br/> <br/>- 卡片列表固定采用**“横3列、竖9行”布局**（单页最多展示27张卡片），卡片尺寸需响应式适配（电脑端卡片宽度约28%~32%，手机端宽度约90%，避免变形/重叠）；<br/>- 若筛选结果数量超过27张，默认触发分页功能：底部显示分页控件（包含“上一页”“下一页”按钮、当前页码/总页码），点击分页按钮时同步保持当前筛选状态（如当前筛选“可用”，点击“下一页”仍加载“可用”状态的下27张卡片）。<br/> <br/>2. 基础模块功能规则<br/> <br/>2.1 用户/管理员双角色登录<br/> <br/>- 登录页提供“用户”“管理员”角色切换选项，提交时校验角色类型；<br/>- 管理员：可登录“管理员后台”，具备查看所有用户、所有问卷及卡片的权限；<br/>- 普通用户：仅可查看自己创建/关联的问卷及对应卡片，无后台访问权限；<br/>- 登录验证：密码需做简单加密处理（如MD5），避免明文传输/存储，登录失败提示“账号/密码/角色错误”。<br/> <br/>2.2 问卷-卡片关联<br/> <br/>- 问卷列表页：展示当前用户可访问的所有问卷，点击某问卷后跳转至该问卷的“卡片列表页”（携带问卷ID参数，用于筛选该问卷下的卡片）；<br/>- 数据关联： character_card 表通过“问卷ID（questionnaire_id）”与 questionnaire 表关联，确保卡片仅归属唯一问卷。<br/> <br/>2.3 卡片配额交互<br/> <br/>- 每张卡片显示“当前配额数”（字体加粗，与卡片其他文字区分）；<br/>- 卡片底部新增“减少配额”按钮，点击后配额数减1，同时通过AJAX同步更新数据库；<br/>- 配额限制：当配额已为0时，“减少配额”按钮置灰禁用，点击无响应，且提示“配额已达最低（0）”。<br/> <br/>三、技术栈与开发规范<br/> <br/>1. 技术栈强制要求<br/> <br/>- 后端：PHP 7.0+，需使用PDO操作数据库（强制避免SQL注入，所有参数需预处理）；<br/>- 前端：HTML5+CSS3+原生JavaScript（禁止使用框架），需实现响应式布局（适配屏幕宽度320px~1920px），UI风格统一为“深色系（如#1E1E2E底色）+高对比度强调色（如#3B82F6或#10B981，用于按钮、标题、强调文字）”；<br/>- 数据库：MySQL 5.7+，需包含3张核心表（用户表、问卷表、人设卡片表），表结构需附带主键、外键、字段注释及必要索引。<br/> <br/>2. 代码开发规范<br/> <br/>- 所有代码需添加基础注释：后端标注“接口功能”“SQL逻辑”“参数说明”，前端标注“交互函数”“布局控制”“AJAX请求逻辑”；<br/>- 文件名、变量名、函数名统一使用“下划线命名法”（如 card_filter.php 、 get_card_list() ），避免中文/特殊字符；<br/>- 前端CSS需单独存放为 .css 文件，JS单独存放为 .js 文件，后端PHP按“功能模块”拆分文件（如登录相关放 login/ 目录，卡片相关放 card/ 目录）。<br/> <br/>四、数据库表结构要求<br/> <br/>需提供完整的表结构创建SQL语句（含字段类型、长度、默认值、注释、索引），3张核心表字段要求如下：<br/> <br/>1. 用户表（user）：至少包含 id （主键）、 username （用户名，唯一）、 password （加密后密码）、 role （角色，0=普通用户，1=管理员）、 create_time （创建时间）；<br/>2. 问卷表（questionnaire）：至少包含 id （主键）、 title （问卷标题）、 user_id （创建者ID，外键关联user.id）、 status （状态，0=未启用，1=已启用）、 create_time （创建时间）；<br/>3. 人设卡片表（character_card）：至少包含 id （主键）、 questionnaire_id （所属问卷ID，外键关联questionnaire.id）、 card_name （卡片名称）、 card_desc （卡片描述）、 quota （配额数量，默认0）、 img_url （卡片封面图路径，可默认填充占位图URL）、 create_time （创建时间）。<br/> <br/>五、代码完整性要求<br/> <br/>需提供以下完整页面/接口文件，且所有文件可直接关联运行：<br/> <br/>1. 前端页面文件<br/> <br/>-  login.html ：用户/管理员登录页（含角色切换、账号密码输入框、登录按钮、表单验证）；<br/>-  questionnaire_list.html ：问卷列表页（展示当前用户可访问的问卷，点击跳转至卡片列表页）；<br/>-  card_list.html ：问卷-卡片列表页（含筛选按钮、卡片列表、分页控件、配额减少按钮）；<br/>-  admin/index.html ：管理员后台基础页（展示所有用户、所有问卷入口，样式与前端统一）。<br/> <br/>2. 后端接口文件<br/> <br/>-  api/login_check.php ：登录验证接口（接收账号、密码、角色参数，返回登录状态及用户信息）；<br/>-  api/get_questionnaire_list.php ：获取问卷列表接口（根据当前登录用户ID/角色，返回可访问的问卷数据）；<br/>-  api/get_card_list.php ：卡片分类查询接口（接收问卷ID、筛选类型“已满/可用”、页码参数，返回对应卡片数据及总数量）；<br/>-  api/reduce_quota.php ：配额减少接口（接收卡片ID，实现配额减1，返回最新配额及操作状态）。<br/> <br/>3. 辅助文件<br/> <br/>-  css/style.css ：全局样式文件（包含登录页、列表页、后台页所有样式，统一UI风格）；<br/>-  js/common.js ：公共JS文件（包含AJAX请求封装、筛选交互函数、分页控制函数、配额点击函数）；<br/>-  config/db.php ：数据库配置文件（单独存放数据库地址、用户名、密码、库名，方便部署时修改）；<br/>-  sql/create_table.sql ：数据库表创建SQL文件（可直接在MySQL中执行，生成3张核心表）。<br/> <br/>六、部署与运行要求<br/> <br/>1. 代码部署后，仅需修改 config/db.php 中的数据库配置，无需修改其他文件；<br/>2. 所有页面在主流浏览器（Chrome、Firefox、Edge、Safari）及手机浏览器中均可正常显示，无样式错乱、功能失效问题；<br/>3. 数据库操作需确保稳定性（如配额减少时避免并发问题，使用PDO事务或锁机制），筛选查询需保证效率（对关联字段添加索引）
我要 PHP的