支持免费使用，不能更改API地址，wp-AI图片生成主题 链 接：https://www.123684.com/s/oqvZVv-wIjov?pwd=rywh 提取码：rywh

购买授权版可以自定义API地址购买授权版可以自定义API地址

AI Image WordPress 主题

一个基于 OpenAI接口的流式图片生成功能的 WordPress 主题，提供对话交互界面、完善的会话与模型管理、图片生成与下载、公告系统与后台运营配置。

🌟 功能概览

前台功能

• AI 流式对话：基于 EventSource 的流式返回与打字效果，体验顺滑
• 现代风格 UI：双栏布局（左侧会话、右侧对话），信息密度友好
• 模型与参数选择：支持模型、尺寸/比例、数量等参数切换（桌面端内嵌、移动端折叠）
• 图片上传与内联预览：支持多图上传、缩略图列表与删除操作
• 图片查看与下载：支持图片悬浮按钮、下载、灯箱预览
• 消息增强：用户消息复制、错误提示样式、加载中动效
• 公告系统（弹窗）：多模板、支持富文本（列表/代码/表格/引用/徽章等），移动端优化
• 响应式设计：完善的移动端/平板/桌面适配

后台管理

• 仪表盘（admin/dashboard.php）：系统概览与快捷入口
• 模型管理（admin/model-management.php）：模型列表、搜索、分页、增删改、启用/停用/默认、尺寸与比例配置
• 系统设置（admin/system-settings.php）：全局限制、维护工具，未授权提醒与联系人快捷入口（现已在底部常显联系方式）
• 用户权限（admin/permissions-settings.php）：功能权限与角色管理
• 会话管理（admin/sessions.php）：查看/删除/批量操作/导出
• 公告管理（admin/announcements.php）：新增/编辑/模板选择/发布，前台弹窗展示
• 授权设置（admin/auth-settings.php）：授权验证，且“授权联系方式”始终展示（支持一键复制与 QQ 快捷联系）

🎨 界面风格与交互

• 设计语言：明亮主题 + 渐变（bg-gradient-to-r, bg-gradient-to-br）+ 柔和阴影（shadow-*）+ 大圆角（rounded-xl/2xl）
• 组件风格：
  • 按钮：渐变主色、悬浮放大与阴影、禁用态降饱和
  • 输入区域：圆角卡片、聚焦描边、内嵌参数选择器（桌面端）
  • 图片卡片：圆角+阴影，悬浮显示操作按钮（下载/全屏）
• 动画动效：气泡/粒子细微浮动（animate-bounce / 自定义 keyframes），输入/按钮过渡
• 响应式细节：移动端压缩间距、按钮重排、文本尺寸与栅格列数自适应

📢 公告系统（弹窗）

• 展示位置：前台右上角铃铛按钮/自动弹出（#announcementModal）
• 时间显示：采用精确时间格式 YYYY-MM-DD HH:mm:ss（不再显示“几天前”）
• 内容增强：
  • 列表：有序/无序支持，带样式的层级缩进与标记
  • 代码：<code> 与 <pre> 高可读底色、等宽字体
  • 表格：圆角卡片、悬浮行高亮
  • 引用：左侧高亮边线，浅底色
  • 徽章：默认/成功/警告/错误多状态
• 移动端优化：更紧凑的上下间距/字号，弹窗最大高宽自适应
• 后台管理：在 “公告管理” 中维护，支持多模板（默认/信息/成功/警告/错误/渐变/现代）

🛠️ 技术架构

• 样式框架：Tailwind CSS（引入版本 2.2.19）
• 额外样式：assets/css/responsive.css（补充组件与响应式细节）
• 安全处理：DOMPurify（assets/vendor/dompurify-3.0.8.min.js）对公告与富文本进行安全过滤
• 前端脚本：assets/js/frontend.js（对话流程、UI 交互、公告弹窗、图片行为）
• 后台脚本：assets/js/admin.js（表格渲染、AJAX、状态反馈）
• 数据传输：WordPress 原生 AJAX + EventSource 流式输出
• 后端环境：WordPress（PHP 7.4+）、MySQL

📦 安装与启用

1. 将主题文件夹上传至 wp-content/themes/ai-image-generator/
2. 后台 “外观 → 主题” 启用主题
3. 进入 “前台 → 设置” 获取配置 API 地址与密钥
4. 进入 “模型管理/系统设置/用户权限/公告管理/授权设置”等页面完成运营配置

⚙️ 基本配置项

API 设置

模型/参数

🧭 使用指南

前台

1. 新建会话：点击侧边栏 “新对话”
2. 生成图片：输入描述 → 点击发送/回车
3. 操作图片：悬浮按钮可全屏/下载；点击进入灯箱
4. 公告查看：点击铃铛或自动弹出；支持图文、列表、代码等

🧩 自定义与扩展

• 样式约定：优先使用 Tailwind 原生类；必要时在 assets/css/responsive.css 中通过 @layer components 组织组件样式
• 常用组件类：
  • 图片：.ai-generated-image（已内置 max-w-full h-auto rounded-lg my-2.5）
  • 图片操作层：.ai-image-overlay、下载按钮 .ai-download-btn
  • 公告内容容器：.announcement-content（已内置列表/代码/表格/引用/徽章等样式）
• 公告可用 HTML 片段示例：

  <h3>系统更新</h3>
  <p>本次更新包含以下内容：</p>
  <ul>
  <li>公告时间显示为精确格式</li>
  <li>移动端公告间距与字号优化</li>
  </ul>
  <blockquote>温馨提示：如需技术支持，请联系右上角客服。</blockquote>
  <pre><code>console.log('Hello AI Image Generator');</code></pre>
  <span class="badge success">已上线</span>

🐛 故障排除

• API 连接失败：检查密钥/网络/额度
• 图片生成失败：检查提示词是否合规、模型与参数设置是否正确
• 会话异常：确保用户登录、数据库表存在、清理缓存

🔒 安全与性能

• 安全：开启 DOMPurify 过滤富文本；谨慎使用内联 HTML
• 权限：合理配置“用户权限”，隔离敏感操作
• 备份：建议定期备份会话与消息数据
• 性能：建议配合对象缓存/CDN；定期清理历史数据

🤝 支持与授权

• 授权设置：后台 “AI 图片生成器 → 授权设置”
• 客服 QQ：1196192935（工作日 9:00-18:00）
• QQ 快捷联系：tencent://message/?uin=1196192935&Site=Sambow&Menu=yes

> 本主题遵循 WordPress 开发规范与 Tailwind 原生用法，前后台样式尽量使用实用类实现，减少自定义 CSS 体积，并在移动端提供更友好的交互体验。