feat(agent): 创作助手 - 完成第一期交互与执行基线

web/src/components/creation/creative-agent-cards.css

@@ -0,0 +1,66 @@
+.creative-agent-card { container-type: inline-size; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); color: var(--foreground); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; overflow-wrap: anywhere; }
+.creative-agent-card h3, .creative-agent-card p { margin: 0; }
+.creative-agent-card-content { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
+.creative-agent-receipt { padding: var(--space-2) var(--space-3); color: var(--muted-foreground); font-size: var(--fs-caption); line-height: 1.7; overflow-wrap: anywhere; }
+.creative-agent-receipt summary { cursor: pointer; }
+.creative-agent-receipt p { margin-block: var(--space-2); }
+.creative-agent-next { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-1); color: var(--muted-foreground); line-height: 1.7; }
+.creative-agent-next p { margin: 0; }
+.creative-agent-next .creative-agent-actions:empty { display: none; }
+.creative-agent-receipt summary:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: 2px; }
+.creative-agent-archive-row { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
+.creative-agent-archive-row > button { flex-shrink: 0; }
+.creative-agent-archive-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+.creative-agent-quote-details summary { cursor: pointer; color: var(--muted-foreground); font-size: var(--fs-caption); }
+.creative-agent-quote-details[open] > .creative-agent-card-content { margin-top: var(--space-3); }
+.creative-agent-card h3 { font-size: var(--fs-heading); font-weight: 600; line-height: 1.5; }
+.creative-agent-card-row { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; flex-wrap: wrap; }
+.creative-agent-muted, .creative-agent-option small { color: var(--muted-foreground); }
+.creative-agent-overline { font-size: var(--fs-caption); line-height: 1.5; color: var(--muted-foreground); }
+.creative-agent-step-dots { display: flex; gap: var(--space-1); flex-wrap: wrap; max-width: 45%; }
+.creative-agent-step-dots i { width: var(--space-4); height: var(--space-1); border-radius: var(--control-radius); background: var(--border); }
+.creative-agent-step-dots i[data-current="true"] { background: var(--foreground); }
+.creative-agent-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-1); }
+.creative-agent-actions .ant-btn { max-width: 100%; height: auto; min-height: var(--space-8); white-space: normal; }
+.creative-agent-options { display: flex; flex-direction: column; gap: var(--space-2); }
+.creative-agent-option { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--control-radius); cursor: pointer; }
+.creative-agent-option[data-selected="true"] { background: var(--control-selected-bg); border-color: var(--control-selected-border); color: var(--control-selected-fg); }
+.creative-agent-option:not([data-disabled="true"]):hover { border-color: var(--control-selected-border); }
+.creative-agent-option[data-disabled="true"] { cursor: default; }
+.creative-agent-option > span:last-child { min-width: 0; line-height: 1.5; }
+.creative-agent-option strong { font-weight: 500; }
+.creative-agent-option small { display: block; margin-top: var(--space-1); }
+.creative-agent-custom-answer { display: flex; flex-direction: column; gap: var(--space-2); }
+.creative-agent-custom-answer > span { color: var(--muted-foreground); font-size: var(--fs-caption); }
+.creative-agent-proposal-summary { line-height: 1.8; }
+.creative-agent-deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
+.creative-agent-deliverables li { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
+.creative-agent-deliverables span { color: var(--muted-foreground); font-size: var(--fs-caption); }
+.creative-agent-deliverables strong { font-weight: 500; line-height: 1.6; }
+.creative-agent-detail-toggle { align-self: flex-start; }
+.creative-agent-scope-note { padding: var(--space-3); background: var(--surface-card); border-radius: var(--control-radius); color: var(--muted-foreground); line-height: 1.7; font-size: var(--fs-caption); }
+.creative-agent-detail { max-height: 50vh; overflow: auto; overscroll-behavior: contain; }
+.creative-agent-plan { width: min(360px, calc(100vw - 48px)); max-height: min(360px, 45vh); overflow: auto; overscroll-behavior: contain; color: var(--foreground); }
+.creative-agent-plan ol { margin: var(--space-2) 0 0; padding-inline-start: var(--space-6); }
+.creative-agent-plan li { padding-block: var(--space-2); }
+.creative-agent-plan li + li { border-top: 1px solid var(--border); }
+.creative-agent-plan li p { color: var(--muted-foreground); margin: var(--space-1) 0 0; line-height: 1.6; }
+.creative-agent-plan li[data-status="completed"]::marker { color: var(--muted-foreground); }
+.creative-agent-plan-trigger { display: flex; width: 100%; gap: var(--space-2); white-space: normal; height: auto; min-height: var(--space-8); text-align: start; padding: var(--space-2) var(--space-3); background: var(--surface-card); border-color: var(--border); }
+.creative-agent-plan-count { flex-shrink: 0; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+.creative-agent-plan-current { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.creative-agent-plan-chevron { color: var(--muted-foreground); flex-shrink: 0; }
+.creative-agent-quote-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
+.creative-agent-quote-items li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
+.creative-agent-quote-items li div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
+.creative-agent-quote-items li strong, .creative-agent-quote-items li b { font-weight: 500; }
+.creative-agent-quote-items li b { flex-shrink: 0; }
+.creative-agent-quote-items li span { color: var(--muted-foreground); font-size: var(--fs-caption); line-height: 1.6; }
+.creative-agent-quote-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-3); }
+.creative-agent-quote-total > span { color: var(--muted-foreground); flex-shrink: 0; }
+.creative-agent-quote-total strong { text-align: end; font-size: var(--fs-heading-lg); font-variant-numeric: tabular-nums; }
+.creative-agent-card :focus-visible, .creative-agent-plan :focus-visible, .creative-agent-plan-trigger:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: 2px; }
+@container (max-width: 280px) {
+    .creative-agent-deliverables { grid-template-columns: minmax(0, 1fr); }
+    .creative-agent-quote-total { flex-wrap: wrap; }
+}