文章测试
# 新增功能：公告弹窗、公告列表、文章列表（博客）
请基于现有发卡网站代码，增加以下三个功能模块。要求与现有风格（商务简洁）保持一致，数据库使用 PDO 预处理，前端响应式。
## 一、公告弹窗（首页自动弹窗）
### 1. 功能描述
- 用户首次访问首页时，自动弹出公告弹窗。
- 弹窗中展示当前**已发布且未过期**的公告列表（按发布时间倒序）。
- 如果有多条公告，弹窗底部显示“下一条”按钮，点击后逐条切换公告内容，最后一条时按钮变为“我知道了”（或“关闭”）。
- 用户点击“我知道了”或关闭按钮后，弹窗关闭，并记录关闭状态（使用 localStorage 或 session，本次会话内不再弹出；也可设置每天弹出一次，可根据需求选择）。
### 2. 数据库设计
新增 `announcements` 表：
- `id` INT 主键自增
- `title` VARCHAR(200) 公告标题
- `content` TEXT 公告内容（支持 HTML）
- `status` TINYINT 状态（1=发布，0=草稿）
- `start_time` DATETIME 开始显示时间（可选，为空则立即生效）
- `end_time` DATETIME 结束显示时间（可选，为空则永久）
- `created_at` DATETIME
- `sort` INT 排序（数字越小越靠前）
提供建表语句。
### 3. 后台管理
- 在后台增加“公告管理”菜单：
- 列表显示所有公告（标题、状态、开始/结束时间、操作）。
- 添加/编辑公告：标题、内容（富文本编辑器）、状态、开始/结束时间、排序。
- 支持删除。
- 所有操作需有 CSRF 防护。
### 4. 前台弹窗实现
- 在首页（`index.php`）底部嵌入 JavaScript 逻辑：
- 检查是否需要弹窗（根据 localStorage 中记录的关闭时间，如未记录或已超过会话/当天）。
- 通过 AJAX 获取当前有效的公告列表（PHP 接口 `/api/get_announcements.php`，返回 JSON）。
- 若公告数量 > 0，显示弹窗。
- 弹窗样式：居中、半透明背景、圆角、关闭按钮；移动端适配。
- 弹窗内显示当前公告索引（第1条/共N条），内容区域显示标题和正文。
- 底部按钮：若有多条，显示“下一条”；最后一条显示“我知道了”。
- 点击“下一条”切换内容，点击“我知道了”关闭弹窗并记录关闭状态（localStorage 存储时间戳，下次判断时若超过24小时或会话结束再弹出，具体由你决定）。
- 接口 `/api/get_announcements.php` 返回当前时间范围内 status=1 且 sort 升序的公告列表（标题、内容）。
## 二、公告列表页（独立页面）
### 1. 页面入口
- 导航栏增加“公告”链接，指向 `announcement_list.php`（或类似）。
### 2. 页面功能
- 展示所有已发布的公告（分页，每页10条）。
- 每条公告显示标题、发布时间、摘要（截取内容前100字）。
- 点击标题进入公告详情页 `announcement_detail.php?id=xxx`，显示完整内容。
- 支持按时间倒序排列。
- 页面标题、描述使用站点配置中的 SEO 设置。
## 三、文章列表（博客）功能
### 1. 数据库设计
新增 `articles` 表：
- `id` INT 主键自增
- `title` VARCHAR(200) 文章标题
- `slug` VARCHAR(200) 唯一别名（用于伪静态 URL）
- `content` TEXT 文章内容（富文本）
- `summary` VARCHAR(500) 摘要（可选，自动截取或手动输入）
- `cover_image` VARCHAR(255) 封面图 URL
- `status` TINYINT 状态（1=发布，0=草稿）
- `views` INT 阅读量
- `created_at` DATETIME
- `updated_at` DATETIME
- `sort` INT 排序（置顶用）
提供建表语句。
### 2. 后台管理
- 在后台增加“文章管理”菜单：
- 列表显示文章（标题、状态、发布时间、阅读量、操作）。
- 添加/编辑文章：标题、别名（唯一）、内容（富文本）、摘要、封面图、状态、排序。
- 支持删除。
- 文章内容支持图片上传（复用现有上传功能）。
### 3. 前台文章列表页
- 导航栏增加“博客”或“文章”链接，指向 `article_list.php`。
- 页面展示已发布的文章列表（分页，每页9或12个，卡片样式）：
- 卡片包含封面图、标题、摘要、发布时间、阅读量。
- 点击标题或“阅读更多”进入文章详情页 `article_detail.php?slug=xxx`。
- 支持按发布时间倒序，置顶文章优先。
### 4. 文章详情页
- 显示文章标题、发布时间、阅读量、正文内容。
- 底部可增加分享按钮（可选）。
- 使用 `slug` 作为 URL 标识，支持伪静态（如 `/article/xxx`），需提供 .htaccess 或 Nginx 规则。
### 5. SEO
- 文章详情页的 `<title>` 使用文章标题 + 站点名称。
- 描述使用摘要或自动截取正文前200字。
## 四、与现有系统的集成
- 导航栏：在现有导航菜单中增加“公告”和“博客”链接。
- 样式：复用现有的全局 CSS，保持商务简洁风格。
- 权限：后台管理需登录验证，复用现有后台权限体系。
- 安全性：所有用户输入（标题、内容）在前端展示时进行 `htmlspecialchars` 转义（富文本内容需过滤 XSS，可使用现有 `html_sanitizer.php`）。
- 性能：为 `status`、`created_at`、`slug` 等字段添加索引。
## 五、输出要求
1. 提供完整的 SQL 建表语句（`announcements`、`articles`）。
2. 列出所有新增/修改的文件（后台管理文件、前台页面、API 接口、导航栏等）。
3. 提供关键代码片段（弹窗 JS、公告列表、文章列表、详情页）。
4. 说明如何配置伪静态（如有需要）。
5. 确保所有功能稳定，与现有系统无缝集成。
请开始实现。