feat: enhance ecommerce UI — sidebar, transitions, ratio options, cancel buttons, i18n fixes

src/features/ecommerce/EcommerceProgressBar.tsx

@@ -1,8 +1,10 @@
 import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
+import type { ReactNode } from "react";
 
 interface EcommerceProgressBarProps {
   status: "idle" | "generating" | "done" | "failed" | string;
   label?: string;
+  onCancel?: () => void;
 }
 
 function mapStatus(status: string): "running" | "completed" | "failed" {
@@ -12,7 +14,7 @@ function mapStatus(status: string): "running" | "completed" | "failed" {
   return "running";
 }
 
-export function EcommerceProgressBar({ status, label }: EcommerceProgressBarProps) {
+export function EcommerceProgressBar({ status, label, onCancel }: EcommerceProgressBarProps) {
   const progress = mapStatus(status) === "running" ? 50 : 100;
   const smoothed = useSmoothedProgress(progress, mapStatus(status));
 
@@ -21,6 +23,17 @@ export function EcommerceProgressBar({ status, label }: EcommerceProgressBarProp
   return (
     <div className="ecommerce-progress-bar">
       <span className="ecommerce-progress-bar__label">{label || "AI 正在生成"}</span>
+      {onCancel ? (
+        <button
+          type="button"
+          className="ecommerce-progress-bar__cancel"
+          onClick={(e) => { e.stopPropagation(); onCancel(); }}
+          title="取消生成"
+          aria-label="取消生成"
+        >
+          取消
+        </button>
+      ) : null}
       <div className="ecommerce-progress-bar__track">
         <div className="ecommerce-progress-bar__fill" style={{ width: `${smoothed}%` }} />
       </div>