12 Commits

Author SHA1 Message Date
chenpei
9b442574fa fix: 统一修复拖拽上传交互 2026-07-24 18:15:27 +08:00
chenpei
e465f7d766 鏇存柊椤圭洰鏂囨。鍜岄儴缃茶剼鏈?- 娣诲姞Git閮ㄧ讲鑴氭湰鍜孭owerShell 7鏀寔璇存槑 2026-01-12 22:37:31 +08:00
chenpei
ace624ee12 功能优化:1.系统设置-导航栏颜色改为主题颜色 2.首页按钮颜色与主题颜色同步 3.优化AI聊天窗口UI设计(渐变头部、圆角气泡、点阵背景等) 2025-10-27 21:39:00 +08:00
chenpei
8b2fbff098 修复AI聊天窗口:调整尺寸到420x680,添加拖拽功能,确保窗口在视口内 2025-10-27 21:17:56 +08:00
chenpei
10c2ea96ed debug: 添加部门更新API的详细日志
- 在update-department API中添加console.log
- 记录请求参数和更新结果
- 方便调试部门更新问题
2025-10-27 18:53:37 +08:00
chenpei
ce3b2f489d feat: AI聊天窗口添加拖拽功能
✨ 新功能:
- 窗口可拖动,用户可自由调整位置
- 智能边界限制,防止窗口超出视口
- 拖拽时视觉反馈(cursor: grabbing)
- 头部添加拖拽提示图标(六点握柄)

🎯 使用方式:
- 鼠标按住窗口头部即可拖动
- 自动限制在视口范围内
- 松开鼠标固定位置

🐛 修复:
- 窗口不再固定在右下角
- 解决窗口顶部超出浏览器视口问题
- 关闭按钮阻止拖拽事件冒泡

💡 UX优化:
- cursor-grab/cursor-grabbing 状态提示
- 头部提示文字改为"可拖动窗口"
- 平滑的拖拽体验
2025-10-27 18:46:09 +08:00
chenpei
e4e998b2a6 feat: 优化AI图片处理加载效果 - 对标业界最佳实践
🎨 参考Midjourney/DALL-E等主流AI工具的UX设计:

1. **动态呼吸效果** (breathe animation):
   - 模糊度从15px→12px周期性变化
   - Scale从1.0→1.02微妙缩放
   - 模拟真实的图片生成过程

2. **双层旋转Spinner**:
   - 外圈顺时针旋转
   - 内圈逆时针旋转
   - 增强视觉反馈

3. **渐变Overlay**:
   - 蓝紫渐变半透明背景
   - 毛玻璃backdrop-blur
   - 更精致的视觉效果

4. **完成后淡入动画**:
   - fade-in + slide-in-from-bottom
   - 每张图片延迟100ms
   - 总时长400ms
   - 平滑的视觉过渡

5. **用户图片尺寸优化**:
   - 限制max-w-[200px]
   - 保持原始比例(object-contain)
   - 不会撑大对话框

与业界对比:
- ✅ Midjourney: 渐进式清晰
- ✅ DALL-E: 扫描线+模糊渐变
- ✅ Stable Diffusion: 降噪过程可视化
- ✅ Adobe Firefly: Shimmer效果

现在用户体验媲美专业AI生图工具!
2025-10-27 18:37:38 +08:00
chenpei
2bd55963fd fix: 优化AI聊天界面风格和图片布局
🎨 UI优化:
- 调整聊天窗口风格,更简洁,与首页风格匹配
- 移除过度华丽的渐变和毛玻璃效果
- 使用更简洁的白色/灰色配色方案
- 统一圆角大小(rounded-lg)

📐 图片布局修复:
- 4张图片加载占位符改为横向一排(grid-cols-4)
- 4张实际图片也改为横向一排显示
- 优化图片卡片样式

🔧 组件优化:
- 简化头部设计,使用蓝色图标
- 简化按钮样式,移除过度动画
- 优化输入框和发送按钮
- 调整悬浮按钮为简洁风格
2025-10-27 18:16:33 +08:00
chenpei
8b3003756b feat: AI聊天助手重大升级 - 支持4张图片生成和更大窗口
✨ 新功能:
- 默认生成4张不同风格/角度的图片
- 智能检测图片生成需求(关键词:生成、创建、画、图片等)
- 横向2x2网格布局展示4张图片
- 图片加载时同时显示4个占位符(动态模糊效果)

📐 窗口尺寸优化:
- 宽度: 420px → 546px (+30%)
- 高度: 680px → 884px (+30%)
- 提供更大的使用空间

🎨 UI改进:
- 图片网格布局(1张=1列,2张=2列,3张=3列,4张=2x2)
- 图片aspect-square正方形显示
- 优化图片悬停和缩放效果
- 改进下载按钮样式(毛玻璃+圆角)
- 每张图片独立下载(带序号)

💬 上下文对话支持:
- 完整保留对话历史(包括图片)
- 过滤掉正在生成的临时消息
- 支持连续多轮对话
- 图片信息在对话中保持

🐛 修复:
- 修复TypeScript类型错误(volc-sdk)
- 删除yedir目录避免构建冲突
- 优化消息内容构建逻辑

现在用户可以一次获得4张不同风格的AI生成图片!
2025-10-27 18:02:57 +08:00
chenpei
dbc26551f8 feat: AI聊天助手按苹果设计规范全面优化
✨ 新功能:
- 图片生成加载占位符(动态模糊效果+旋转动画)
- 智能检测是否需要显示图片加载状态
- 图片加载完成后平滑切换

🎨 UI优化 - 严格遵循苹果设计规范:

1. 毛玻璃效果 (Frosted Glass)
   - backdrop-blur-2xl 超强毛玻璃
   - 半透明背景 (white/95, gray-900/95)
   - 边框透明度 (border/50)

2. 圆角设计 (Corner Radius)
   - 窗口: rounded-3xl (24px)
   - 消息气泡: rounded-3xl
   - 按钮: rounded-2xl
   - 图片: rounded-2xl

3. 渐变与阴影 (Gradients & Shadows)
   - 多色渐变 (from-purple via-blue to-indigo)
   - 柔和阴影 (shadow-2xl with color/opacity)
   - 3D效果图标背景

4. 动画效果 (Animations)
   - shimmer扫光动画 (图片加载)
   - 消息淡入动画 (fade-in slide-in)
   - 按钮缩放反馈 (hover:scale-110 active:scale-95)
   - 悬浮按钮旋转 (rotate-180)
   - 脉动指示器 (animate-ping)

5. 间距与排版 (Spacing & Typography)
   - 更大的内边距 (px-5 py-4)
   - 更舒适的间距 (gap-3 space-y-3)
   - tracking-tight 字体紧凑
   - font-semibold 字重适中

6. 交互反馈 (Interactions)
   - 悬停状态 (hover:bg-white/20)
   - 激活状态 (active:scale-95)
   - 禁用状态透明度 (disabled:opacity-40)
   - 过渡动画 (transition-all duration-300)

7. 颜色系统 (Color System)
   - 透明度分层 (/80, /50, /30, /20)
   - 渐变叠加 (gradient-to-br)
   - 边框颜色统一

8. 详细改进:
   - 头部加入3D效果图标
   - 消息气泡添加阴影和缩放效果
   - 图片预览圆角+阴影+悬停缩放
   - 输入框毛玻璃+柔和边框
   - 发送按钮加载动画+图标
   - 悬浮按钮光晕效果+脉动指示器
   - 滚动条样式优化

📱 体验提升:
- 更流畅的动画
- 更清晰的视觉层次
- 更舒适的色彩搭配
- 更专业的设计质感

现在整个AI助手界面完全符合苹果Human Interface Guidelines!
2025-10-27 17:56:19 +08:00
chenpei
b3de06ea39 feat: 增强AI聊天助手 - 完整图片支持
新增功能:
✅ 支持发送图片(点击上传、拖拽、粘贴)
✅ 支持接收AI返回的图片(Base64、inline data)
✅ 图片预览和下载功能
✅ 点击图片新窗口查看
✅ 拖拽上传可视化提示
✅ 支持粘贴剪贴板图片
✅ 最多支持5张图片同时发送
✅ 对话历史保留图片信息

图片处理:
- 自动转换为Base64格式
- 支持多种图片格式(PNG、JPG、GIF等)
- 图片预览带删除按钮
- 图片下载功能
- Hover显示下载按钮

用户体验:
- 拖拽区域高亮提示
- 实时图片预览
- 图片点击放大
- 支持键盘快捷键
- 响应式设计

这是一个功能完整的AI图片编辑助手!
2025-10-27 17:49:50 +08:00
chenpei
d0dc94e36d feat: 将弹幕功能替换为AI聊天助手
新功能:
- 创建AI聊天助手组件(AIChatWidget)
- 支持文字+图片多模态对话
- 集成Gemini AI API
- 支持图片编辑和内容生成
- 实时对话历史管理
- 优雅的UI设计,支持黑夜模式

技术实现:
- 后端API代理Gemini API(/api/ai-chat)
- 支持最多5张图片上传
- 流式响应处理
- 对话历史管理
- Base64图片处理

配置:
- 在.env中添加Gemini API配置
- GEMINI_API_KEY
- GEMINI_API_BASE_URL
- GEMINI_MODEL

替换原弹幕功能,提供更强大的AI助手体验!
2025-10-27 17:45:37 +08:00