8 Commits

Author SHA1 Message Date
Codex f056547160 fix: align hot clone reference upload UI 2026-06-15 19:59:00 +08:00
Codex de3eb1d06a merge main and adjust clone mode tabs 2026-06-15 18:25:38 +08:00
Codex 66b761314b chore: re-trigger push 2026-06-15 16:52:15 +08:00
stringadmin ab99e3bf2f Merge pull request 'feat: 完善电商记录详情页,支持触摸手势交互、对话式需求面板与画布节点拖拽' (#16) from feat/ecommerce-record-detail-polish into main
Reviewed-on: #16
2026-06-15 08:38:41 +00:00
ludan e3b48e2614 feat: 完善电商记录详情页,支持触摸手势交互、对话式需求面板与画布节点拖拽
本次修改全面打磨电商图片工作台的记录详情体验,主要包含以下变更:

一、记录详情对话面板(EcommercePage.tsx):
- 将记录详情中的"需求"区域重构为聊天对话式布局:
  · 历史需求消息:展示原始需求文本、参数元信息(平台/语种/比例/设置)、已上传素材缩略图
  · 新增跟进需求消息(is-followup):若当前素材与历史记录不同,自动展示新上传素材及当前参数配置
  · AI 回复消息保持原有状态展示
- 记录详情中素材上传数量上限从 7 张提升至 20 张(maxCloneProductImages)
- 上传按钮重构:移至素材列表左侧,显示当前数量/上限,满额时禁用并提示"已满"

二、触摸与手势交互:
- 新增 PreviewTouchGesture 完整手势系统:
  · 单指平移(pan):支持触摸拖拽预览画布
  · 双指缩放(pinch):以双指中心为锚点进行缩放,范围 0.25x-2x
  · 自动排除交互元素(按钮/输入框/链接等)避免冲突
  · 智能切换:单指/双指模式无缝切换
- 画布节点触摸拖拽(canvas node drag):
  · 支持触摸拖拽移动生成结果节点
  · 考虑当前缩放级别计算位移
  · 与预览画布手势互不干扰

三、记录详情页视觉升级(ecommerce-standalone.css):
- 整体背景采用径向渐变+线性渐变,营造专业 SaaS 质感
- 对话面板与历史面板统一采用毛玻璃卡片风格
- 聊天消息气泡:圆角 18px、柔和投影、用户消息左侧缩进 18px
- 历史面板宽度固定 292px
- CSS 自定义属性体系(record-detail-*)统一管理颜色和阴影
- 面板头部加高加粗标题,优化可读性

四、其他细节优化:
- 历史刷新按钮图标从文本符号改为 ReloadOutlined 组件
- 素材缩略图移除 hover 放大镜效果(.ecom-command-asset-zoom)
- 刷新按钮禁用样式完善

变更文件:
- src/features/ecommerce/EcommercePage.tsx (+246/-11)
- src/styles/ecommerce-standalone.css (+1369)
2026-06-15 16:20:55 +08:00
Codex 9a9c7eb86d feat: optimize ecommerce hot clone UI 2026-06-15 15:26:49 +08:00
Codex 48262d6233 chore: 新增 .gitattributes 统一换行符为 LF 2026-06-15 10:52:03 +08:00
Codex 062c8b3445 feat: 临时下线智能抠图与图片翻译入口 2026-06-15 10:42:33 +08:00
4 changed files with 2670 additions and 209 deletions
+43
View File
@@ -0,0 +1,43 @@
# 自动检测文本文件并统一换行符
* text=auto eol=lf
# 源码强制使用 LF(跨平台一致)
*.ts text eol=lf
*.tsx text eol=lf
*.js text eol=lf
*.jsx text eol=lf
*.mjs text eol=lf
*.cjs text eol=lf
*.json text eol=lf
*.css text eol=lf
*.html text eol=lf
*.md text eol=lf
*.svg text eol=lf
# 配置类(统一 LF
*.yml text eol=lf
*.yaml text eol=lf
*.toml text eol=lf
*.conf text eol=lf
# Windows 专用脚本保持 CRLF
*.bat text eol=crlf
*.cmd text eol=crlf
# 二进制文件,不做换行符转换
*.png binary
*.jpg binary
*.jpeg binary
*.gif binary
*.webp binary
*.ico binary
*.woff binary
*.woff2 binary
*.ttf binary
*.eot binary
*.otf binary
*.mp4 binary
*.mp3 binary
*.pdf binary
*.zip binary
*.gz binary
File diff suppressed because it is too large Load Diff
@@ -381,108 +381,6 @@ export default function EcommerceClonePanel({
</section>
) : null}
{cloneOutput === "hot" ? (
<section className="clone-ai-replicate-panel" aria-label="爆款图复刻设置">
<div className="clone-ai-dynamic-head">
<strong></strong>
<span></span>
</div>
<div className="clone-ai-replicate-section">
<span className="clone-ai-replicate-title"></span>
<div className="clone-ai-replicate-tabs" role="tablist" aria-label="参考内容来源">
<button
type="button"
className={cloneReferenceMode === "upload" ? "is-active" : ""}
aria-selected={cloneReferenceMode === "upload"}
onClick={() => setCloneReferenceMode("upload")}
>
</button>
<button
type="button"
className={cloneReferenceMode === "link" ? "is-active" : ""}
aria-selected={cloneReferenceMode === "link"}
onClick={() => setCloneReferenceMode("link")}
>
</button>
</div>
{cloneReferenceMode === "upload" ? (
<button
type="button"
className={`clone-ai-replicate-upload${isCloneReferenceDragging ? " is-dragging" : ""}${cloneReferenceImages.length ? " has-files" : ""}`}
onClick={() => cloneReferenceInputRef.current?.click()}
onDragOver={handleCloneReferenceDragOver}
onDragLeave={handleCloneReferenceDragLeave}
onDrop={handleCloneReferenceDrop}
>
{cloneReferenceImages.length ? (
<>
<div className="clone-ai-replicate-files">
{cloneReferenceImages.map((item) => (
<figure
key={item.id}
className="clone-ai-replicate-file"
onMouseEnter={(e) => handleFileMouseEnter(item.src, e)}
onMouseLeave={handleFileMouseLeave}
>
<img src={item.src} alt="" />
</figure>
))}
</div>
<span className="clone-ai-replicate-add-more">
<CloudUploadOutlined />
</span>
</>
) : (
<span>
<CloudUploadOutlined />
<span className="clone-ai-replicate-upload-text"></span>
</span>
)}
<em>{cloneReferenceImages.length ? `已选 ${cloneReferenceImages.length}/${maxCloneReferenceImages}` : `最多 ${maxCloneReferenceImages}`}</em>
{isCloneReferenceDragging ? (
<div className="clone-ai-replicate-upload-overlay">
<CloudUploadOutlined />
<span></span>
</div>
) : null}
</button>
) : (
<label className="clone-ai-replicate-link">
<input placeholder="粘贴商品图或详情页链接" />
</label>
)}
<input
ref={cloneReferenceInputRef}
type="file"
accept="image/jpeg,image/png,image/webp"
multiple
onChange={handleCloneReferenceUpload}
aria-label="上传参考图片"
/>
</div>
<div className="clone-ai-replicate-section">
<span className="clone-ai-replicate-title"></span>
<div className="clone-ai-replicate-levels" role="toolbar" aria-label="复刻程度">
{cloneReplicateLevelOptions.map((option) => (
<button
key={option.key}
type="button"
className={cloneReplicateLevel === option.key ? "is-active" : ""}
aria-pressed={cloneReplicateLevel === option.key}
onClick={() => setCloneReplicateLevel(option.key)}
>
<strong>{option.title}</strong>
<span>{option.desc}</span>
</button>
))}
</div>
</div>
</section>
) : null}
{cloneOutput === "set" ? (
<section className="clone-ai-count-panel" aria-label="套图图片数量">
<div className="clone-ai-dynamic-head">
File diff suppressed because it is too large Load Diff