MJ-IT/gdm-Servo-model
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify AI recommendation card sizes

Browse Source
This commit is contained in:
Jacky Ser
2026-08-11 14:51:26 +08:00
parent e855d5aa64
commit 78f5ead63a
2 changed files with 44 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
app/page.tsx
View File

@@ -788,33 +788,39 @@ export default function Home() {
<button type="button" className="restart-button" onClick={reset}>重新选型</button>
</div>
<div className="best-match">
<div className="match-image-wrap">
<img src={top.product.image} alt={top.product.name} />
<span className="match-badge">{top.coreCompatible ? "首选推荐" : "待复核候选"}</span>
</div>
<div className="match-content">
<div className="match-score"><span>匹配度</span><strong>{top.confidence}%</strong></div>
<p className="product-code">{top.product.code}</p>
<h3>{top.product.name}</h3>
<p className="product-subtitle">{top.product.category} · {top.product.size || "尺寸待复核"}</p>
<div className="metric-grid">
<Metric label="堵转扭矩" value={`${formatTorque(top.product.torque)} kgf·cm`} />
<Metric label="电压范围" value={`${top.product.voltageMin}–${top.product.voltageMax}V`} />
<Metric label="空载速度" value={top.product.speed || "目录未标注"} />
<Metric label="操作角度" value={top.product.angle || "目录未标注"} />
<Metric label="控制 / 通讯" value={top.product.control || "目录未标注"} />
<Metric label="齿轮材质" value={top.product.gear} />
</div>
<ul className="reason-list">
{top.reasons.map((reason) => <li key={reason}>✓ {reason}</li>)}
</ul>
<div className="source-line">
<span>官方目录型号</span>
<strong>{top.product.category}</strong>
<small>价格与交期按用量确认</small>
</div>
</div>
<div className="recommendation-grid">
{topMatches.map((match, index) => (
<article className={`recommendation-card ${index === 0 ? "is-primary" : ""}`} key={match.product.id}>
<div className="recommendation-image-wrap">
<img src={match.product.image} alt={match.product.name} />
<span className="match-badge">
{index === 0 ? (match.coreCompatible ? "首选推荐" : "待复核候选") : `${match.confidence}% 匹配`}
</span>
</div>
<div className="recommendation-content">
<div className="match-score"><span>匹配度</span><strong>{match.confidence}%</strong></div>
<p className="product-code">{match.product.code}</p>
<h3>{match.product.name}</h3>
<p className="product-subtitle">{match.product.category} · {match.product.size || "尺寸待复核"}</p>
<div className="metric-grid">
<Metric label="堵转扭矩" value={`${formatTorque(match.product.torque)} kgf·cm`} />
<Metric label="电压范围" value={`${match.product.voltageMin}–${match.product.voltageMax}V`} />
<Metric label="空载速度" value={match.product.speed || "目录未标注"} />
<Metric label="操作角度" value={match.product.angle || "目录未标注"} />
<Metric label="控制 / 通讯" value={match.product.control || "目录未标注"} />
<Metric label="齿轮材质" value={match.product.gear} />
</div>
<ul className="reason-list">
{match.reasons.slice(0, 2).map((reason) => <li key={reason}>✓ {reason}</li>)}
</ul>
<div className="source-line">
<span>官方目录型号</span>
<strong>{match.product.category}</strong>
<small>价格与交期按用量确认</small>
</div>
</div>
</article>
))}
</div>
{needsEngineer && (
@@ -826,19 +832,6 @@ export default function Home() {
</div>
)}
<div className="alternative-list">
{topMatches.slice(1).map((match) => (
<div className="alternative-card" key={match.product.id}>
<img src={match.product.image} alt={match.product.name} />
<div>
<span>{match.confidence}% 匹配</span>
<h4>{match.product.name}</h4>
<p>{formatTorque(match.product.torque)} kgf·cm · {match.product.category} · {match.product.gear}</p>
</div>
</div>
))}
</div>
{!showSampleForm && (
<div className="result-actions">
<button className="panel-primary" type="button" onClick={() => setShowSampleForm(true)}>