OmniAI/omniai-ds-code-package
3
0
Fork 0
Code Issues Pull Requests 2 Actions 16 Packages Projects Releases Wiki Activity

feat: 记录详情页Canvas按轮次分组展示，对话面板UI重构与视觉升级 #33

Merged
stringadmin merged 2 commits from feat/ecommerce-record-detail-canvas-groups into main 2026-06-18 10:31:57 +00:00
Conversation 0 Commits 2 Files Changed 3
+2144 -131
3 changed files with 2144 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/ecommerce/EcommercePage.tsx
+357 -127
View File
@@ -329,6 +329,20 @@ interface CanvasNode {
y: number;
}
interface RecordCanvasGroup {
id: string;
mode: string;
outputLabel: string;
settingLabel: string;
sourceImages: CloneImageItem[];
results: CloneResult[];
createdAt: number;
turnIndex: number;
status: EcommerceHistoryStatus;
x: number;
y: number;
}
interface PreviewTouchPoint {
id: number;
x: number;
@@ -4843,6 +4857,65 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
isOneClickVideoTool ||
isVideoWorkspaceVisible ||
Boolean(activeHistoryRecordId);
const isMainCloneWorkspace = isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool && !isQuickSetTool && !isCopywritingTool && !isOneClickVideoTool;
const isRecordDetailWorkspace = isMainCloneWorkspace && Boolean(activeHistoryRecordId);
const activeHistoryRecord = activeHistoryRecordId ? ecommerceHistoryRecords.find((record) => record.id === activeHistoryRecordId) : null;
const activeConversationTurns = activeHistoryRecord
? activeHistoryRecord.turns?.length
? activeHistoryRecord.turns
: [buildHistoryTurnFromRecord(activeHistoryRecord)]
: [];
const activeRecallTurn = activeConversationTurns[activeConversationTurns.length - 1];
const commandRecallPrompt =
requirement.trim() ||
activeRecallTurn?.requirement?.trim() ||
activeHistoryRecord?.requirement?.trim() ||
"展开完整对话，继续补充生成需求。";
const commandRecallAsset = productImages[0] || activeRecallTurn?.productImages?.[0] || activeHistoryRecord?.productImages?.[0];
const commandRecallStatus =
status === "generating"
? "生成中"
: activeRecallTurn?.status === "failed" || status === "failed"
? "可恢复"
: "继续生成";
const hasGeneratedCloneWork = status === "done" || canvasNodes.length > 0;
const shouldUseCompactComposer = isCommandComposerCompact && hasGeneratedCloneWork && !(isRecordDetailWorkspace && !isCloneConversationCollapsed);
const shouldShowScenarioScrollHint = !isRecordDetailWorkspace;
const getHistoryTurnSettingLabel = (turn: EcommerceHistoryTurn) => {
if (turn.settingLabel) return turn.settingLabel;
if (turn.output === "set" && turn.results?.length && !turn.setResultImages?.length) {
return `单图 ${turn.results.length}张`;
}
if (turn.output === "set") {
const total = cloneSetCountKeys.reduce((sum, key) => sum + (turn.setCounts?.[key] ?? 0), 0);
return `套图 ${total || 1}张`;
}
if (turn.output === "detail") return `详情 ${turn.detailModules?.length || 1}项`;
if (turn.output === "model") return `模特 ${turn.modelScenes?.length || 1}景`;
return cloneOutputOptions.find((option) => option.key === turn.output)?.label || selectedCloneOutput.label;
};
const recordCanvasGroups: RecordCanvasGroup[] = isRecordDetailWorkspace
? activeConversationTurns.reduce<RecordCanvasGroup[]>((groups, turn, index) => {
const turnResults = getTurnResults(turn);
if (!turnResults.length && turn.status !== "generating") return groups;
const canvasNode = canvasNodes.find((node) => node.id === turn.id);
const outputLabel = turn.modeLabel || cloneOutputOptions.find((option) => option.key === turn.output)?.label || selectedCloneOutput.label;
groups.push({
id: turn.id,
mode: turn.output,
outputLabel,
settingLabel: getHistoryTurnSettingLabel(turn),
sourceImages: turn.productImages,
results: turnResults,
createdAt: turn.createdAt,
turnIndex: index + 1,
status: turn.status,
x: canvasNode?.x ?? groups.length * 420,
y: canvasNode?.y ?? (groups.length % 2 === 0 ? 0 : 160),
});
return groups;
}, [])
: [];
useEffect(() => {
onWorkspaceChromeChange?.({ isToolPage: isWorkspaceToolPage });
@@ -6293,93 +6366,211 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
)
) : (
<>
{status === "done" || canvasNodes.length > 0 ? (
{status === "done" || canvasNodes.length > 0 || (isRecordDetailWorkspace && recordCanvasGroups.length > 0) ? (
<div className="clone-ai-preview-zoom-wrap" style={previewTransformStyle}>
<section className="clone-ai-canvas-nodes" aria-label="生成结果">
{canvasNodes.map((node) => (
<article
key={node.id}
className="clone-ai-canvas-node"
data-mode={node.mode}
data-node-id={node.id}
style={{ transform: `translate(${node.x}px, ${node.y}px)` }}
onPointerDown={(event) => startCanvasNodeDrag(event, node)}
onPointerMove={(event) => moveCanvasNodeDrag(event, node.id)}
onPointerUp={(event) => stopCanvasNodeDrag(event, node.id)}
onPointerCancel={(event) => stopCanvasNodeDrag(event, node.id)}
>
<div
className="clone-ai-node-drag-handle"
onPointerDown={(e) => {
if (e.button !== 0) return;
e.stopPropagation();
e.currentTarget.setPointerCapture(e.pointerId);
nodeDragRef.current = { active: true, nodeId: node.id, startX: e.clientX, startY: e.clientY, originX: node.x, originY: node.y };
}}
onPointerMove={(e) => {
const drag = nodeDragRef.current;
if (!drag.active || drag.nodeId !== node.id) return;
const zoom = previewZoomRef.current;
const dx = (e.clientX - drag.startX) / zoom;
const dy = (e.clientY - drag.startY) / zoom;
setCanvasNodes((prev) => prev.map((n) => n.id === node.id ? { ...n, x: drag.originX + dx, y: drag.originY + dy } : n));
}}
onPointerUp={(e) => {
if (nodeDragRef.current.nodeId === node.id) {
nodeDragRef.current = { ...nodeDragRef.current, active: false };
e.currentTarget.releasePointerCapture(e.pointerId);
}
}}
/>
<div className="clone-ai-source-stack">
<button
type="button"
className="clone-ai-source-corner-action"
onClick={node.sourceImage ? () => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" }) : undefined}
disabled={!node.sourceImage}
>
原图素材
</button>
<button
type="button"
className="clone-ai-main-result"
aria-label="预览原图素材"
onClick={node.sourceImage ? () => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" }) : undefined}
disabled={!node.sourceImage}
>
{node.sourceImage ? (
<img
src={node.sourceImage}
alt="原图素材"
onError={(event) => {
event.currentTarget.style.display = "none";
event.currentTarget.parentElement?.classList.add("is-missing-source");
{isRecordDetailWorkspace ? (
<section className="clone-ai-turn-groups" aria-label="按轮次生成结果">
{recordCanvasGroups.map((group) => {
const primarySource = group.sourceImages[0];
const dragNode: CanvasNode = {
id: group.id,
mode: group.mode,
sourceImage: primarySource?.src,
results: group.results,
createdAt: group.createdAt,
x: group.x,
y: group.y,
};
return (
<article
key={group.id}
className={`clone-ai-canvas-node clone-ai-turn-group is-${group.status}`}
data-mode={group.mode}
data-turn-id={group.id}
data-node-id={group.id}
style={{ transform: `translate(${group.x}px, ${group.y}px)` }}
onPointerDown={(event) => startCanvasNodeDrag(event, dragNode)}
onPointerMove={(event) => moveCanvasNodeDrag(event, group.id)}
onPointerUp={(event) => stopCanvasNodeDrag(event, group.id)}
onPointerCancel={(event) => stopCanvasNodeDrag(event, group.id)}
>
<div
className="clone-ai-node-drag-handle"
onPointerDown={(e) => {
if (e.button !== 0) return;
e.stopPropagation();
e.currentTarget.setPointerCapture(e.pointerId);
nodeDragRef.current = { active: true, nodeId: group.id, startX: e.clientX, startY: e.clientY, originX: group.x, originY: group.y };
}}
onPointerMove={(e) => {
const drag = nodeDragRef.current;
if (!drag.active || drag.nodeId !== group.id) return;
const zoom = previewZoomRef.current;
const dx = (e.clientX - drag.startX) / zoom;
const dy = (e.clientY - drag.startY) / zoom;
setCanvasNodes((prev) => prev.map((n) => n.id === group.id ? { ...n, x: drag.originX + dx, y: drag.originY + dy } : n));
}}
onPointerUp={(e) => {
if (nodeDragRef.current.nodeId === group.id) {
nodeDragRef.current = { ...nodeDragRef.current, active: false };
e.currentTarget.releasePointerCapture(e.pointerId);
}
}}
/>
) : null}
<span className="clone-ai-source-missing">素材不可用</span>
</button>
</div>
<div className="clone-ai-flow-arrow" aria-hidden="true" />
<div className="clone-ai-result-stack">
<span className="clone-ai-node-label">{node.mode === "set" ? "套图" : node.mode === "detail" ? "详情图" : node.mode === "model" ? "模特图" : node.mode === "hot" ? "爆款图" : node.mode}</span>
<div className="clone-ai-result-grid result-reveal">
{node.results.map((card) => (
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
<img src={card.src} alt={card.label} />
<div className={`clone-ai-turn-group__body${primarySource?.src ? "" : " is-without-source"}`}>
{primarySource?.src ? (
<>
<div className="clone-ai-source-stack">
<button
type="button"
className="clone-ai-source-corner-action"
onClick={() => openProductSetPreview({ src: primarySource.src, label: "原图素材" })}
>
原图素材
</button>
<button
type="button"
className="clone-ai-main-result"
aria-label="预览原图素材"
onClick={() => openProductSetPreview({ src: primarySource.src, label: "原图素材" })}
>
<img
src={primarySource.src}
alt={primarySource.name || "原图素材"}
onError={(event) => {
event.currentTarget.style.display = "none";
event.currentTarget.parentElement?.classList.add("is-missing-source");
}}
/>
<span className="clone-ai-source-missing">素材不可用</span>
</button>
</div>
<div className="clone-ai-flow-arrow" aria-hidden="true" />
</>
) : null}
<div className="clone-ai-result-stack">
<span className="clone-ai-node-label">{group.outputLabel}</span>
<div className="clone-ai-result-grid result-reveal">
{group.results.map((card) => (
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: group.id, removable: true })}>
<img src={card.src} alt={card.label} />
</button>
))}
{group.status === "generating" && !group.results.length ? (
<div className="clone-ai-turn-group__pending" aria-live="polite">
<LoadingOutlined />
<span>正在生成{group.outputLabel}...</span>
</div>
) : null}
</div>
</div>
</div>
</article>
);
})}
{status === "generating" && !recordCanvasGroups.some((group) => group.status === "generating") ? (
<article className="clone-ai-turn-group is-generating">
<header className="clone-ai-turn-group__head">
<div>
<span>继续生成</span>
<strong>{selectedCloneOutput.label}</strong>
</div>
<small>AI 正在整理新一轮结果</small>
</header>
<div className="clone-ai-turn-group__pending" aria-live="polite">
<LoadingOutlined />
<span>正在生成{selectedCloneOutput.label}...</span>
</div>
</article>
) : null}
</section>
) : (
<section className="clone-ai-canvas-nodes" aria-label="生成结果">
{canvasNodes.map((node) => (
<article
key={node.id}
className="clone-ai-canvas-node"
data-mode={node.mode}
data-node-id={node.id}
style={{ transform: `translate(${node.x}px, ${node.y}px)` }}
onPointerDown={(event) => startCanvasNodeDrag(event, node)}
onPointerMove={(event) => moveCanvasNodeDrag(event, node.id)}
onPointerUp={(event) => stopCanvasNodeDrag(event, node.id)}
onPointerCancel={(event) => stopCanvasNodeDrag(event, node.id)}
>
<div
className="clone-ai-node-drag-handle"
onPointerDown={(e) => {
if (e.button !== 0) return;
e.stopPropagation();
e.currentTarget.setPointerCapture(e.pointerId);
nodeDragRef.current = { active: true, nodeId: node.id, startX: e.clientX, startY: e.clientY, originX: node.x, originY: node.y };
}}
onPointerMove={(e) => {
const drag = nodeDragRef.current;
if (!drag.active || drag.nodeId !== node.id) return;
const zoom = previewZoomRef.current;
const dx = (e.clientX - drag.startX) / zoom;
const dy = (e.clientY - drag.startY) / zoom;
setCanvasNodes((prev) => prev.map((n) => n.id === node.id ? { ...n, x: drag.originX + dx, y: drag.originY + dy } : n));
}}
onPointerUp={(e) => {
if (nodeDragRef.current.nodeId === node.id) {
nodeDragRef.current = { ...nodeDragRef.current, active: false };
e.currentTarget.releasePointerCapture(e.pointerId);
}
}}
/>
<div className="clone-ai-source-stack">
<button
type="button"
className="clone-ai-source-corner-action"
onClick={node.sourceImage ? () => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" }) : undefined}
disabled={!node.sourceImage}
>
原图素材
</button>
))}
</div>
</div>
</article>
))}
{status === "generating" ? (
<article className="clone-ai-canvas-node is-generating" style={{ transform: `translate(${canvasNodes.length * 420}px, 0px)` }}>
<LoadingOutlined style={{ fontSize: 24 }} />
<span>正在生成{selectedCloneOutput.label}…</span>
</article>
) : null}
</section>
<button
type="button"
className="clone-ai-main-result"
aria-label="预览原图素材"
onClick={node.sourceImage ? () => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" }) : undefined}
disabled={!node.sourceImage}
>
{node.sourceImage ? (
<img
src={node.sourceImage}
alt="原图素材"
onError={(event) => {
event.currentTarget.style.display = "none";
event.currentTarget.parentElement?.classList.add("is-missing-source");
}}
/>
) : null}
<span className="clone-ai-source-missing">素材不可用</span>
</button>
</div>
<div className="clone-ai-flow-arrow" aria-hidden="true" />
<div className="clone-ai-result-stack">
<span className="clone-ai-node-label">{node.mode === "set" ? "套图" : node.mode === "detail" ? "详情图" : node.mode === "model" ? "模特图" : node.mode === "hot" ? "爆款图" : node.mode}</span>
<div className="clone-ai-result-grid result-reveal">
{node.results.map((card) => (
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
<img src={card.src} alt={card.label} />
</button>
))}
</div>
</div>
</article>
))}
{status === "generating" ? (
<article className="clone-ai-canvas-node is-generating" style={{ transform: `translate(${canvasNodes.length * 420}px, 0px)` }}>
<LoadingOutlined style={{ fontSize: 24 }} />
<span>正在生成{selectedCloneOutput.label}…</span>
</article>
) : null}
</section>
)}
</div>
) : status === "idle" || status === "ready" ? null : (
<section className="clone-ai-empty-state" aria-live="polite">
@@ -6405,13 +6596,71 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
<section
ref={commandComposerWrapRef}
className={`clone-ai-bottom-input ecom-command-composer-wrap${status === "done" || canvasNodes.length > 0 ? " has-generated" : " is-before-generate"}${isCommandComposerCompact && (status === "done" || canvasNodes.length > 0) ? " is-compact" : ""}`}
aria-label="生成指令"
className={`clone-ai-bottom-input ecom-command-composer-wrap${hasGeneratedCloneWork ? " has-generated" : " is-before-generate"}${shouldUseCompactComposer ? " is-compact" : ""}${isRecordDetailWorkspace && isCloneConversationCollapsed ? " is-recall-entry" : ""}`}
aria-label={isRecordDetailWorkspace && isCloneConversationCollapsed ? "展开完整生成指令" : "生成指令"}
role={isRecordDetailWorkspace && isCloneConversationCollapsed ? "button" : undefined}
tabIndex={isRecordDetailWorkspace && isCloneConversationCollapsed ? 0 : undefined}
onClickCapture={(event) => {
if (isRecordDetailWorkspace && isCloneConversationCollapsed) {
if ((event.target as HTMLElement).closest(".ecom-command-recall__home")) return;
event.preventDefault();
event.stopPropagation();
setIsCloneConversationCollapsed(false);
window.setTimeout(() => requirementTextareaRef.current?.focus(), 180);
}
}}
onClick={() => {
if (isRecordDetailWorkspace && isCloneConversationCollapsed) {
setIsCloneConversationCollapsed(false);
window.setTimeout(() => requirementTextareaRef.current?.focus(), 180);
return;
}
if (isCommandComposerCompact) setIsCommandComposerCompact(false);
}}
onKeyDown={(event) => {
if (!isRecordDetailWorkspace || !isCloneConversationCollapsed) return;
if (event.key !== "Enter" && event.key !== " ") return;
event.preventDefault();
setIsCloneConversationCollapsed(false);
window.setTimeout(() => requirementTextareaRef.current?.focus(), 180);
}}
>
<h1 className={`ecom-command-title${status === "done" || canvasNodes.length > 0 ? " is-after-generate" : ""}`}>
{isRecordDetailWorkspace && isCloneConversationCollapsed ? (
<div className="ecom-command-recall">
<span className="ecom-command-recall__media" aria-hidden="true">
{commandRecallAsset ? (
<img src={commandRecallAsset.src} alt="" />
) : (
<PaperClipOutlined />
)}
</span>
<span className="ecom-command-recall__content">
<span className="ecom-command-recall__eyebrow">
<em>{commandRecallStatus}</em>
</span>
<span className="ecom-command-recall__text">{commandRecallPrompt}</span>
</span>
<button
type="button"
className="ecom-command-recall__home"
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
handleNewEcommerceConversation();
}}
aria-label="返回首页"
title="返回首页"
>
<AppstoreOutlined />
<span>首页</span>
</button>
<span className="ecom-command-recall__action" aria-hidden="true">
<span>继续</span>
<MenuUnfoldOutlined />
</span>
</div>
) : null}
<h1 className={`ecom-command-title${hasGeneratedCloneWork ? " is-after-generate" : ""}`}>
{typewriterText}
<span className="typewriter-cursor" aria-hidden="true">|</span>
</h1>
@@ -8492,28 +8741,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
)
: clonePreview
: placeholderPreview;
const isMainCloneWorkspace = isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool && !isQuickSetTool && !isCopywritingTool && !isOneClickVideoTool;
const isRecordDetailWorkspace = isMainCloneWorkspace && Boolean(activeHistoryRecordId);
const currentResultCount = canvasNodes.reduce((count, node) => count + node.results.length, 0);
const activeHistoryRecord = activeHistoryRecordId ? ecommerceHistoryRecords.find((record) => record.id === activeHistoryRecordId) : null;
const activeConversationTurns = activeHistoryRecord
? activeHistoryRecord.turns?.length
? activeHistoryRecord.turns
: [buildHistoryTurnFromRecord(activeHistoryRecord)]
: [];
const getHistoryTurnSettingLabel = (turn: EcommerceHistoryTurn) => {
if (turn.settingLabel) return turn.settingLabel;
if (turn.output === "set" && turn.results?.length && !turn.setResultImages?.length) {
return `单图 ${turn.results.length}张`;
}
if (turn.output === "set") {
const total = cloneSetCountKeys.reduce((sum, key) => sum + (turn.setCounts?.[key] ?? 0), 0);
return `套图 ${total || 1}张`;
}
if (turn.output === "detail") return `详情 ${turn.detailModules?.length || 1}项`;
if (turn.output === "model") return `模特 ${turn.modelScenes?.length || 1}景`;
return cloneOutputOptions.find((option) => option.key === turn.output)?.label || selectedCloneOutput.label;
};
const restoreHistoryTurnInputs = (turn: EcommerceHistoryTurn) => {
setCloneOutput(turn.output);
setPlatform(turn.platform);
@@ -8574,18 +8802,30 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
<>
<aside className="clone-ai-conversation-panel" aria-label="AI 对话">
<header className="clone-ai-conversation-head">
<div>
<div className="clone-ai-conversation-title">
<strong>{activeHistoryRecord?.title || "生成详情"}</strong>
<span>{selectedCloneOutput.label} · {platform} · {language}</span>
</div>
<button
type="button"
onClick={() => setIsCloneConversationCollapsed(true)}
aria-label="收起对话"
title="收起对话"
>
<MenuFoldOutlined />
</button>
<div className="clone-ai-conversation-actions">
<button
type="button"
className="clone-ai-conversation-home"
onClick={handleNewEcommerceConversation}
aria-label="返回首页"
title="返回首页"
>
<AppstoreOutlined />
<span>首页</span>
</button>
<button
type="button"
className="clone-ai-conversation-collapse"
onClick={() => setIsCloneConversationCollapsed(true)}
aria-label="收起对话"
title="收起对话"
>
<MenuFoldOutlined />
</button>
</div>
</header>
<div className="clone-ai-conversation-body">
{activeConversationTurns.map((turn, index) => {
@@ -8657,16 +8897,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
})}
</div>
</aside>
<button
type="button"
className="clone-ai-conversation-toggle"
onClick={() => setIsCloneConversationCollapsed((current) => !current)}
aria-label={isCloneConversationCollapsed ? "展开对话" : "收起对话"}
title={isCloneConversationCollapsed ? "展开对话" : "收起对话"}
aria-expanded={!isCloneConversationCollapsed}
>
{isCloneConversationCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
</button>
</>
) : null}
src/features/ecommerce/panels/CommandHistorySidebar.tsx
+16 -4
View File
@@ -75,7 +75,7 @@ export default function CommandHistorySidebar({
</div>
<div className="ecom-command-history__heading">
<strong>生成记录</strong>
<span>{records.length} 条</span>
<span className="ecom-command-history__count">{records.length} 条</span>
</div>
{refreshMessage ? (
<p key={refreshStamp} className="ecom-command-history__refresh-note" role="status">
@@ -86,13 +86,25 @@ export default function CommandHistorySidebar({
{records.length ? (
records.map((record) => {
const outputLabel = outputLabels.find((option) => option.key === record.output)?.label || "生成记录";
const statusKey = record.status === "generating" ? "generating" : record.status === "failed" ? "failed" : "done";
const statusLabel =
record.status === "generating" ? "生成中" : record.status === "failed" ? "失败" : formatHistoryTime(record.createdAt);
return (
<div key={`${record.id}-${refreshTick}`} className={`ecom-command-history__item${activeRecordId === record.id ? " is-active" : ""}`}>
<button type="button" className="ecom-command-history__item-main" onClick={() => onOpenRecord(record)}>
<div
key={`${record.id}-${refreshTick}`}
className={`ecom-command-history__item is-${statusKey}${activeRecordId === record.id ? " is-active" : ""}`}
>
<button
type="button"
className={`ecom-command-history__item-main${activeRecordId === record.id ? " is-active" : ""}`}
onClick={() => onOpenRecord(record)}
aria-current={activeRecordId === record.id ? "page" : undefined}
>
<strong>{record.title}</strong>
<span>{outputLabel} · {statusLabel}</span>
<span className="ecom-command-history__item-meta">
<span>{outputLabel}</span>
<em>{statusLabel}</em>
</span>
</button>
<button
type="button"
src/styles/ecommerce-standalone.css
+1771
View File
File diff suppressed because it is too large Load Diff