大量修改UI

core/frontend/src/components/free-create/toolbar.tsx

@@ -1,6 +1,7 @@
 // 自由创作·输入条工具栏:模型/模式/比例/分辨率/时长/种子 下拉 + 预估消耗 + 清空 + 生成。
 // 约束联动(与后端校验一致):1080P/4K 仅标准档;切非标准档时分辨率自动回落 720P。
 import { useEffect, useRef, useState } from "react";
+import { ArrowRight, ChevronDown } from "lucide-react";
 import type { ModelConfig } from "../../types";
 import {
   DEFAULT_BILLING_RATES,
@@ -39,10 +40,9 @@ function FcDropdown({ label, display, items, onSelect, disabled }: {
   }, [open]);
   return (
     <div className={`fc-dd${open ? " open" : ""}`} ref={wrapRef}>
-      <button type="button" className="fc-dd-btn" disabled={disabled} onClick={() => setOpen((v) => !v)} title={label}>
-        <span className="fc-dd-lbl mono">{label}</span>
-        <span className="fc-dd-val">{display}</span>
-        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m18 15-6-6-6 6" /></svg>
+      <button type="button" className="fc-chip" disabled={disabled} onClick={() => setOpen((v) => !v)} title={label}>
+        {label} <strong>{display}</strong>
+        <ChevronDown />
       </button>
       {open && (
         <div className="fc-dd-menu">
@@ -56,7 +56,7 @@ function FcDropdown({ label, display, items, onSelect, disabled }: {
               onClick={() => { if (!item.disabled) { onSelect(item.value); setOpen(false); } }}
             >
               <span className="ti">{item.label}</span>
-              {item.desc && <span className="de mono">{item.desc}</span>}
+              {item.desc && <span className="de">{item.desc}</span>}
             </button>
           ))}
         </div>
@@ -103,14 +103,13 @@ export function FreeToolbar({ mode, model, ratio, resolution, duration, seed, re
 
   return (
     <div className="fc-toolbar">
-      <div className="fc-toolbar-l">
+      <div className="fc-chips">
         <FcDropdown
           label="模型"
           display={FC_MODELS.find((m) => m.name === model)?.label || model}
           items={FC_MODELS.map((m) => ({ value: m.name, label: m.label, desc: m.desc }))}
           onSelect={(value) => {
             onModelChange(value);
-            // 非标准档不支持 1080P/4K:自动回落 720P(与 jimeng 行为一致)
             if (value !== FC_STANDARD_MODEL && (resolution === "1080p" || resolution === "4k")) onResolutionChange("720p");
           }}
         />
@@ -142,9 +141,8 @@ export function FreeToolbar({ mode, model, ratio, resolution, duration, seed, re
           onSelect={(value) => onDurationChange(Number(value))}
         />
         <div className={`fc-dd${seedOpen ? " open" : ""}`} ref={seedRef}>
-          <button type="button" className="fc-dd-btn" onClick={() => setSeedOpen((v) => !v)} title="种子值(-1 随机;相同种子 + 相同参数可复现相似结果)">
-            <span className="fc-dd-lbl mono">种子</span>
-            <span className="fc-dd-val">{seed === -1 ? "随机" : seed}</span>
+          <button type="button" className="fc-chip" onClick={() => setSeedOpen((v) => !v)} title="种子值(-1 随机;相同种子 + 相同参数可复现相似结果)">
+            种子 <strong>{seed === -1 ? "随机" : seed}</strong>
           </button>
           {seedOpen && (
             <div className="fc-dd-menu fc-seed-menu">
@@ -161,18 +159,19 @@ export function FreeToolbar({ mode, model, ratio, resolution, duration, seed, re
                 />
                 <button type="button" className="btn btn-sm" onClick={() => { onSeedChange(-1); setSeedOpen(false); }}>随机</button>
               </div>
-              <div className="fc-seed-hint mono">// -1 = 随机;相同种子可复现相似结果</div>
+              <div className="fc-seed-hint">-1 = 随机;相同种子可复现相似结果</div>
             </div>
           )}
         </div>
       </div>
       <div className="fc-toolbar-r">
-        <span className="fc-estimate mono" title="预估消耗(实际按真实用量结算,多退少不补超)">
+        <span className="fc-estimate" title="预估消耗(实际按真实用量结算,多退少不补超)">
           ≈ {tokens.toLocaleString()} tokens · {points.toLocaleString()} 积分
         </span>
-        <button type="button" className="btn btn-sm btn-ghost" onClick={onClear}>清空</button>
-        <button type="button" className="btn btn-sm btn-primary" disabled={!canSend} onClick={onSend} title="Ctrl/Cmd + Enter">
-          {submitting ? "提交中…" : uploading ? "素材上传中…" : "生成 →"}
+        <button type="button" className="fc-clear" onClick={onClear}>清空</button>
+        <button type="button" className="fc-gen" disabled={!canSend} onClick={onSend} title="Ctrl/Cmd + Enter">
+          {submitting ? "提交中…" : uploading ? "素材上传中…" : "生成"}
+          <ArrowRight />
         </button>
       </div>
     </div>