AI NEON'world 🌟

一个酷炫的霓虹主题文件管理系统，专为展示AI生成的艺术作品而设计。

✨ 特性

• 🎨 霓虹主题设计 - 炫酷的视觉效果和动画
• 📂 智能文件管理 - 自动扫描文件夹，按主题分类
• 🖼️ 优雅的图片展示 - 响应式网格布局
• 🔍 全屏图片查看器 - 支持键盘和触摸导航
• 📱 移动端适配 - 完美的响应式设计
• ⚡ 高性能 - 懒加载和图片预加载优化
• 🛠️ 完整管理功能 - 添加/删除主题，上传/删除图片
• 📤 文件上传 - 支持拖拽上传和批量上传
• 🔒 文件验证 - 自动验证图片格式和大小限制
• 🎨 背景自定义 - 预设背景主题 + 自定义背景上传（新功能）
• 💾 设置持久化 - 自动保存用户背景设置到本地存储

🚀 快速开始

安装依赖

npm install

启动服务器

# 开发模式
npm run dev

# 生产模式
npm start

访问网站

• 主页: http://localhost:3000
• 管理面板: http://localhost:3000/admin

📁 项目结构

ai绘图/
├── package.json          # 项目配置
├── server.js             # Express服务器
├── public/               # 静态文件
│   ├── index.html        # 主页
│   ├── theme.html        # 主题详情页
│   ├── admin.html        # 管理面板
│   ├── placeholder.svg   # 占位图
│   ├── css/
│   │   ├── style.css     # 主样式文件
│   │   └── admin.css     # 管理页面样式
│   └── js/
│       ├── main.js       # 主页脚本
│       ├── theme.js      # 主题页脚本
│       └── admin.js      # 管理页面脚本
└── [主题文件夹]/          # 图片主题文件夹
    └── *.jpg|*.png|*.webp # 图片文件

🎯 功能说明

主页功能

• 显示所有主题文件夹
• 每个主题卡片显示封面图片（文件夹中第一张图片）
• 显示图片数量统计
• 炫酷的悬停效果和动画
• 管理面板入口

主题详情页

• 展示主题内所有图片
• 网格布局，响应式设计
• 点击图片进入全屏查看模式

图片查看器

• 全屏显示图片
• 键盘导航：← → 箭头键切换，ESC 关闭
• 鼠标/触摸导航按钮
• 移动端滑动手势支持
• 图片预加载，提升浏览体验

🛠️ 管理面板（新增功能）

主题管理

• ➕ 添加主题: 创建新的主题文件夹
• 🗑️ 删除主题: 删除主题及其所有图片
• 📊 主题统计: 显示每个主题的图片数量
• 🔍 主题预览: 显示主题封面图片

图片管理

• 📤 批量上传: 支持多文件同时上传
• 🖱️ 拖拽上传: 直接拖拽图片到上传区域
• 📋 格式验证: 自动验证图片格式（JPG, PNG, WebP, GIF）
• 📏 大小限制: 单文件最大10MB
• 🗑️ 删除图片: 删除指定图片文件
• 📊 文件信息: 显示图片文件名和大小
• 📈 上传进度: 实时显示上传进度

🎨 背景自定义功能（全新功能）

预设背景主题

• 🌐 霓虹网格: 经典的赛博朋克网格背景（默认）
• 🔮 赛博矩阵: 动态渐变粒子效果
• ⭐ 星空: 霓虹色彩的星点背景
• 🌧️ 数字雨: 数字雨滴效果

自定义背景

• 📤 背景上传: 上传自己的背景图片
• 🖱️ 拖拽上传: 支持拖拽上传背景图片
• 📏 大小限制: 单文件最大15MB
• 🗑️ 背景管理: 删除不需要的自定义背景
• 🖼️ 预览功能: 实时预览背景效果

设置持久化

• 💾 自动保存: 背景设置自动保存到本地存储
• 🔄 跨页面同步: 所有页面使用相同的背景设置
• 🎯 即时应用: 选择背景后立即生效

使用方法

1. 点击页面右上角的背景设置按钮（🎨）
2. 选择预设背景或上传自定义背景
3. 背景设置会自动保存，下次打开页面时保持
4. 在背景面板中可以管理和删除自定义背景

安全特性

• ✅ 文件类型验证: 只允许上传图片文件
• 🛡️ 路径安全: 防止路径遍历攻击
• 📝 名称清理: 自动清理文件名特殊字符
• ⚠️ 确认对话框: 删除操作需要确认

🎨 设计特色

霓虹色彩方案

• 主霓虹色: #00ffff (青色)
• 次霓虹色: #ff0080 (洋红)
• 强调色: #ffff00 (黄色)
• 背景: 深色系列

视觉效果

• 动态霓虹网格背景
• 浮动粒子效果
• 鼠标跟随粒子
• 玻璃拟态设计
• 流畅的过渡动画

🔧 技术栈

• 后端: Node.js + Express + Multer
• 前端: 原生 HTML/CSS/JavaScript
• 字体: Orbitron (科技感字体)
• 图片格式: 支持 JPG, PNG, WebP, GIF
• 文件上传: Multer 中间件
• 文件操作: Node.js fs 模块
• 数据存储: localStorage (背景设置)
• 背景系统: CSS动画 + 自定义图片支持

📋 API 接口

主题管理

GET    /api/themes                    # 获取所有主题
POST   /api/themes                    # 创建新主题
DELETE /api/themes/:themeName         # 删除主题

图片管理

GET    /api/themes/:themeName/images           # 获取主题图片
POST   /api/themes/:themeName/images           # 上传图片
DELETE /api/themes/:themeName/images/:imageName # 删除图片

背景管理

GET    /api/backgrounds                        # 获取所有背景（预设+自定义）
POST   /api/backgrounds                        # 上传自定义背景
DELETE /api/backgrounds/:backgroundName        # 删除自定义背景

页面路由

GET /           # 主页
GET /theme/:themeName  # 主题详情页
GET /admin      # 管理面板

🛠️ 使用指南

添加新主题

1. 访问管理面板 (/admin)
2. 点击"添加主题"按钮
3. 输入主题名称
4. 点击"创建主题"

上传图片

1. 在管理面板中点击主题的"管理图片"
2. 点击"上传图片"按钮
3. 选择文件或拖拽图片到上传区域
4. 等待上传完成

删除内容

1. 点击相应的"删除"按钮
2. 在确认对话框中点击"确认删除"
3. 系统将永久删除选定内容

支持的图片格式

• JPEG (.jpg, .jpeg)
• PNG (.png)
• WebP (.webp)
• GIF (.gif)

文件限制

• 单文件最大大小: 10MB
• 批量上传最多: 10个文件

🚀 后续计划

• 用户界面优化
• 文件管理功能
• 图片上传功能
• 背景自定义功能
• 设置持久化存储
• 用户登录系统
• 付费功能
• 主题搜索和过滤
• 图片标签系统
• 社交分享功能
• 图片编辑功能
• 数据备份和恢复
• 背景主题商店

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issues 和 Pull Requests！

---

AI NEON'world - 让创意在霓虹中闪耀 ✨