Skip to content

LiKe-0228/argue-win.like228

Repository files navigation

🔥 吵架包赢 - AI智能反驳助手

一个基于AI的智能反驳助手,帮你在任何争论中都能占据上风!全新升级的现代化UI界面,提供更优秀的用户体验。

✨ 新版UI特性

🎨 现代化设计

  • 毛玻璃效果: 使用backdrop-blur实现现代化的毛玻璃背景
  • 渐变色彩: 精心设计的蓝紫色渐变主题,视觉效果更佳
  • 响应式布局: 完美适配桌面端、平板和移动设备
  • 动态背景: 装饰性的浮动背景元素,增加视觉层次

🚀 交互体验升级

  • 流畅动画: 卡片悬停、按钮点击等交互都有流畅的动画效果
  • 智能反馈: 实时字符计数、强度可视化、状态指示器
  • 一键复制: 悬停显示复制按钮,支持快速复制回复内容
  • 加载状态: 优雅的加载动画和状态提示

🎯 功能特色展示

  • 精准反击: AI分析对方话语,生成针对性回复
  • 理性辩论: 保持理性,避免恶意攻击
  • 智能升级: 多种语气强度,适应不同场景

📱 移动端优化

  • 触摸友好: 按钮和交互元素针对触摸操作优化
  • 自适应布局: 在小屏幕设备上自动调整为单列布局
  • 性能优化: 减少不必要的重渲染,提升移动端性能

🛠️ 技术栈

  • 前端框架: Next.js 15 + React 19
  • 样式方案: Tailwind CSS 4 + 自定义CSS动画
  • 图标库: Lucide React
  • AI服务: OpenRouter API (DeepSeek Chat)
  • 部署平台: Vercel

🎮 功能特性

核心功能

  • 🤖 AI智能分析: 深度理解对方话语的逻辑和意图
  • 🎯 多角度反击: 从不同角度生成3个反驳回复
  • 🔥 强度调节: 1-10级语气强度,从温和到激烈
  • 📋 一键复制: 快速复制生成的回复内容
  • 💾 历史记录: 自动保存最近10次的生成记录

安全特性

  • 🛡️ 域名验证: 防止未授权域名访问
  • 频率限制: 防止API滥用,每分钟最多20次请求
  • 🔒 输入验证: 严格的参数验证和内容过滤
  • 📊 请求监控: 详细的访问日志和错误追踪

🚀 快速开始

环境要求

  • Node.js 18+
  • npm 或 yarn

安装步骤

  1. 克隆项目
git clone https://github.com/yourusername/argue-win.git
cd argue-win
  1. 安装依赖
npm install
#
yarn install
  1. 配置环境变量
cp .env.example .env.local

.env.local 中配置:

OPENROUTER_API_KEY=your_openrouter_api_key
NEXT_PUBLIC_SITE_URL=https://your-domain.com
  1. 启动开发服务器
npm run dev
#
yarn dev
  1. 访问应用 打开浏览器访问 http://localhost:3000

🎨 UI设计亮点

色彩系统

  • 主色调: 蓝色到紫色的渐变 (#3b82f6 → #7c3aed)
  • 辅助色: 绿色系统状态色 (#10b981)
  • 中性色: 灰色系文本和背景 (#f8fafc → #1e293b)

动画效果

  • 卡片悬停: 3D变换 + 阴影变化
  • 按钮交互: 缩放 + 颜色过渡
  • 加载状态: 旋转动画 + 脉冲效果
  • 页面切换: 淡入淡出 + 滑动效果

响应式断点

  • 移动端: < 768px (单列布局)
  • 平板端: 768px - 1024px (适配布局)
  • 桌面端: > 1024px (双列布局)

📱 使用指南

基本使用

  1. 在输入框中描述对方说的话
  2. 调节语气强度滑块 (1-10)
  3. 点击"生成反击回复"按钮
  4. 查看AI生成的3个不同角度的回复
  5. 点击复制按钮快速复制内容

语气强度说明

  • 1-3级: 温和理性,适合正式场合
  • 4-6级: 适度反击,日常争论使用
  • 7-10级: 强力反驳,激烈争论场景

最佳实践

  • 描述越详细,AI生成的回复越精准
  • 根据场合选择合适的语气强度
  • 保持理性讨论,避免恶意攻击

🔧 开发指南

项目结构

src/
├── app/
│   ├── api/argue/route.ts    # API路由
│   ├── globals.css           # 全局样式
│   ├── layout.tsx           # 根布局
│   └── page.tsx             # 主页面
└── components/              # 组件目录 (待扩展)

自定义样式

项目使用Tailwind CSS + 自定义CSS的混合方案:

  • 基础样式使用Tailwind类名
  • 复杂动画和效果使用自定义CSS
  • 响应式设计通过Tailwind断点实现

API接口

POST /api/argue
{
  "opponentText": "对方说的话",
  "intensity": 5  // 1-10的强度值
}

🌟 更新日志

v2.0.0 - UI大升级 (2024-01-XX)

  • 🎨 全新现代化UI设计
  • 🚀 流畅的动画和交互效果
  • 📱 完善的移动端适配
  • 🎯 功能特色卡片展示
  • 💫 毛玻璃效果和渐变背景
  • 🔧 优化的代码结构和性能

v1.0.0 - 基础版本

  • 🤖 AI反驳功能
  • 🔥 语气强度调节
  • 📋 复制功能
  • 💾 历史记录

🤝 贡献指南

欢迎提交Issue和Pull Request!

  1. Fork 项目
  2. 创建特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 开启Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

🙏 致谢


⚠️ 免责声明: 本工具仅供娱乐和学习使用,请理性使用,避免恶意攻击他人。保持和谐交流,共建美好网络环境。

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published