Move material selection to home flow

app/page.tsx

@@ -40,7 +40,7 @@ export default function Home() {
   const [zeroOffset, setZeroOffset] = useState(0);
   const [tare, setTare] = useState(0);
   const [totalKg, setTotalKg] = useState(0);
-  const [material, setMaterial] = useState<Material>(materials[0]);
+  const [material, setMaterial] = useState<Material | null>(null);
   const [stable, setStable] = useState(false);
   const [stableProgress, setStableProgress] = useState(0);
   const [countdown, setCountdown] = useState(10);
@@ -57,6 +57,7 @@ export default function Home() {
 
   const netWeight = Math.max(0, rawWeight - zeroOffset - tare);
   const displayedWeight = totalKg + netWeight;
+  const selectedMaterial = material ?? materials[0];
 
   const filteredMachines = useMemo(
     () =>
@@ -111,6 +112,7 @@ export default function Home() {
 
   function resetToHome() {
     setStep("home");
+    setMaterial(null);
     setMachine("");
     setMachineQuery("");
     setTotalKg(0);
@@ -121,7 +123,13 @@ export default function Home() {
     stableSamples.current = [];
   }
 
-  async function fetchIdentity() {
+  async function fetchIdentity(chosenMaterial?: Material) {
+    const activeMaterial = chosenMaterial ?? material;
+    if (!activeMaterial) {
+      setNotice("请先选择本次称重的废料类型");
+      return;
+    }
+    if (chosenMaterial) setMaterial(chosenMaterial);
     setLoading(true);
     setNotice("");
     try {
@@ -166,8 +174,8 @@ export default function Home() {
       employeeName: employee.name,
       employeeId: employee.id,
       machineId: machine,
-      materialType: material.name,
-      materialTypeId: material.id,
+      materialType: selectedMaterial.name,
+      materialTypeId: selectedMaterial.id,
       weightKg: Number(displayedWeight.toFixed(3)),
       createdAt: new Date().toISOString(),
     };
@@ -239,20 +247,49 @@ export default function Home() {
         <div className="content">
           {step === "home" && (
             <div className="home-view">
-              <div className="eyebrow"><span /> 安全 · 精准 · 可追溯</div>
-              <h1>废料称重，<br /><em>简单一点。</em></h1>
-              <p>自动识别员工信息，稳定采样并上传记录。<br />请确认秤台处于空载状态后开始。</p>
-              <button className="primary-cta" onClick={fetchIdentity} disabled={loading}>
-                <span className="cta-icon">↗</span>
-                <span><strong>{loading ? "正在连接…" : "开始称重"}</strong><small>读取门禁人员信息</small></span>
-                <b>→</b>
-              </button>
-              <button className="admin-link" onClick={() => setPasswordOpen(true)}>⚙ 管理员登录</button>
-              <div className="home-stats">
-                <span><b>0.001 kg</b>显示精度</span>
-                <span><b>连续采样</b>稳定判断</span>
-                <span><b>4 种</b>废料分类</span>
+              <div className="home-copy">
+                <div className="eyebrow"><span /> 安全 · 精准 · 可追溯</div>
+                <h1>废料称重，<br /><em>简单一点。</em></h1>
+                <p>选择废料类型后开始，系统将自动识别员工信息，<br />稳定采样并上传称重记录。</p>
+                <div className={loading ? "home-start-hint loading" : "home-start-hint"}>
+                  <span>{loading ? "···" : "1"}</span>
+                  <b>{loading ? `正在读取${material?.name ?? ""}称重信息…` : "点击右侧废料类型，即刻开始"}</b>
+                </div>
+                <button className="admin-link" onClick={() => setPasswordOpen(true)}>⚙ 管理员登录</button>
+                {notice && <div className="notice home-notice">ⓘ {notice}</div>}
+                <div className="home-stats">
+                  <span><b>0.001 kg</b>显示精度</span>
+                  <span><b>连续采样</b>稳定判断</span>
+                  <span><b>4 种</b>废料分类</span>
+                </div>
               </div>
+
+              <aside className="home-material-panel">
+                <div className="material-panel-heading">
+                  <span className="step-kicker">称重前准备</span>
+                  <h2>选择废料类型</h2>
+                  <p>请选择本次需要称重的废料</p>
+                </div>
+                <div className="home-material-grid">
+                  {materials.map((item) => (
+                    <button
+                      key={item.id}
+                      className={`material-card ${item.tone} ${material?.id === item.id ? "selected" : ""}`}
+                      onClick={() => void fetchIdentity(item)}
+                      disabled={loading}
+                      aria-pressed={material?.id === item.id}
+                    >
+                      <span className="material-icon">{item.icon}</span>
+                      <span><b>{item.name}</b><small>TYPE ID · {item.id}</small></span>
+                      <i>{material?.id === item.id ? "✓" : "→"}</i>
+                    </button>
+                  ))}
+                </div>
+                <div className={material ? "material-selection-status ready" : "material-selection-status"}>
+                  <span>{loading ? "···" : material ? "✓" : "1"}</span>
+                  {loading ? "正在读取门禁人员信息" : material ? `已选择 ${material.name}` : "请选择一种废料类型，选择后自动进入下一步"}
+                </div>
+              </aside>
             </div>
           )}
 
@@ -264,7 +301,7 @@ export default function Home() {
                   <h2>确认本次称重信息</h2>
                   <p>人员信息由门禁机自动获取，请选择对应生产机台。</p>
                 </div>
-                <button className="refresh-button" onClick={fetchIdentity} disabled={loading}>↻ 重新获取</button>
+                <button className="refresh-button" onClick={() => void fetchIdentity()} disabled={loading}>↻ 重新获取</button>
               </div>
               <div className="identity-card">
                 <div className="avatar">{employee.name ? employee.name.slice(-1) : "?"}</div>
@@ -311,7 +348,8 @@ export default function Home() {
               <div className="weigh-meta">
                 <span><small>员工</small><b>{employee.name} · {employee.id}</b></span>
                 <span><small>机台</small><b>{machine}</b></span>
-                <button onClick={() => setStep("identity")}>修改</button>
+                <span className="material-meta"><small>废料类型</small><b>{selectedMaterial.name} · {selectedMaterial.id}</b></span>
+                <button onClick={() => setStep("identity")}>修改人员/机台</button>
               </div>
 
               <div className="scale-display">
@@ -342,23 +380,18 @@ export default function Home() {
                 <button onClick={addToTotal}>＋<span><b>累计</b><small>加入当前重量</small></span></button>
               </div>
 
-              <div className="material-heading"><span><b>选择废料类型</b><small>点击分类后保存称重记录</small></span><em>必选</em></div>
-              <div className="material-grid">
-                {materials.map((item) => (
-                  <button
-                    key={item.id}
-                    className={`material-card ${item.tone} ${material.id === item.id ? "selected" : ""}`}
-                    onClick={() => setMaterial(item)}
-                  >
-                    <span className="material-icon">{item.icon}</span>
-                    <span><b>{item.name}</b><small>TYPE ID · {item.id}</small></span>
-                    <i>{material.id === item.id ? "✓" : "→"}</i>
-                  </button>
-                ))}
+              <div className={`selected-material-summary ${selectedMaterial.tone}`}>
+                <span className="material-icon">{selectedMaterial.icon}</span>
+                <span>
+                  <small>本次废料类型</small>
+                  <b>{selectedMaterial.name}</b>
+                  <em>TYPE ID · {selectedMaterial.id}</em>
+                </span>
+                <i>✓ 已在首页确认</i>
               </div>
               {notice && <div className="notice compact">ⓘ {notice}</div>}
               <button className="full-primary upload" disabled={!stable || loading} onClick={submitWeight}>
-                {loading ? "正在上传…" : stable ? `保存 ${material.name} 称重数据` : "请等待重量稳定"} <span>→</span>
+                {loading ? "正在上传…" : stable ? `保存 ${selectedMaterial.name} 称重数据` : "请等待重量稳定"} <span>→</span>
               </button>
             </div>
           )}
@@ -372,14 +405,14 @@ export default function Home() {
               <div className="receipt">
                 <div className="receipt-head"><span>称重凭证</span><small>{new Date().toLocaleString("zh-CN", { hour12: false })}</small></div>
                 <div className="receipt-weight">
-                  <span><small>{material.name}</small><b>{formatWeight(displayedWeight, unit)} <em>{unit}</em></b></span>
-                  <i>{material.icon}</i>
+                  <span><small>{selectedMaterial.name}</small><b>{formatWeight(displayedWeight, unit)} <em>{unit}</em></b></span>
+                  <i>{selectedMaterial.icon}</i>
                 </div>
                 <dl>
                   <div><dt>员工姓名</dt><dd>{employee.name}</dd></div>
                   <div><dt>员工工号</dt><dd>{employee.id}</dd></div>
                   <div><dt>生产机台</dt><dd>{machine}</dd></div>
-                  <div><dt>废料类型 ID</dt><dd>{material.id}</dd></div>
+                  <div><dt>废料类型 ID</dt><dd>{selectedMaterial.id}</dd></div>
                   <div><dt>上传状态</dt><dd className="upload-ok">● 已保存</dd></div>
                 </dl>
               </div>