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 |
|