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

Add precision gear product cards

Browse Source
This commit is contained in:
Jacky Ser
2026-08-11 16:35:50 +08:00
parent e8759531b7
commit a608faa298
515 changed files with 11481 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/globals.css
View File

@@ -408,6 +408,36 @@ select:focus, input:focus, textarea:focus { border-color: var(--blue); box-shado
.precision-gear-subcats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; padding-top: 13px; border-top: 1px solid rgba(176, 201, 239, .58); }
.precision-gear-subcats span { padding: 6px 9px; border: 1px solid #d6e2f5; border-radius: 999px; color: #60718b; background: rgba(255,255,255,.72); font-size: 10px; }
.precision-gear-subcats b { margin-left: 3px; color: var(--blue); font-weight: 800; }
.precision-gear-catalog { margin-top: 34px; }
.precision-gear-catalog-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.precision-gear-catalog-heading h4 { margin: 5px 0 0; color: var(--ink); font-size: 22px; letter-spacing: -.03em; }
.precision-gear-catalog-heading > p { max-width: 430px; margin: 0; color: #7b8799; font-size: 11px; line-height: 1.65; text-align: right; }
.precision-gear-controls { margin-top: 16px; padding: 12px; border: 1px solid #dbe4f1; border-radius: 13px; background: #fbfcfe; }
.precision-gear-controls > input { width: 100%; height: 40px; padding: 0 12px; font-size: 11px; background: white; }
.precision-gear-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.precision-gear-pills button { padding: 7px 10px; border: 1px solid #dce4ef; border-radius: 999px; color: #68778e; background: white; cursor: pointer; font-size: 9px; }
.precision-gear-pills button:hover { border-color: #aec6ed; color: var(--blue); }
.precision-gear-pills button.active { border-color: var(--blue); color: white; background: var(--blue); }
.precision-gear-result { margin: 10px 2px 0; color: #8a96a7; font-size: 9px; }
.precision-gear-result strong { color: var(--blue); font-size: 12px; }
.precision-gear-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.precision-gear-card { min-width: 0; overflow: hidden; border: 1px solid #dfe6f0; border-radius: 12px; background: white; transition: transform .2s, border-color .2s, box-shadow .2s; }
.precision-gear-card:hover { transform: translateY(-2px); border-color: #b9cbea; box-shadow: 0 10px 22px rgba(30,53,91,.08); }
.precision-gear-image { position: relative; width: 100%; aspect-ratio: 1.18; padding: 0; display: grid; place-items: center; overflow: hidden; border: 0; background: #f4f7fb; cursor: pointer; }
.precision-gear-image img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s ease; }
.precision-gear-image:hover img { transform: scale(1.05); }
.precision-gear-image:focus-visible { outline: 3px solid rgba(24,94,232,.28); outline-offset: -3px; }
.precision-gear-image > span { position: absolute; right: 8px; bottom: 8px; padding: 4px 6px; border: 1px solid rgba(255,255,255,.75); border-radius: 5px; color: #61708a; background: rgba(255,255,255,.9); font-size: 8px; font-weight: 700; }
.precision-gear-card-body { min-width: 0; padding: 11px 11px 12px; }
.precision-gear-card-body > p { margin: 0 0 4px; color: var(--blue); font-size: 8px; font-weight: 800; }
.precision-gear-card-body h5 { height: 32px; margin: 0 0 5px; overflow: hidden; color: var(--ink); font-size: 11px; line-height: 1.45; }
.precision-gear-card-body code { display: block; overflow: hidden; color: #8a95a7; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.precision-gear-card-body dl { min-height: 42px; margin: 9px 0 0; padding-top: 7px; border-top: 1px solid #edf0f4; }
.precision-gear-card-body dl div { display: flex; justify-content: space-between; gap: 5px; padding: 2px 0; font-size: 8px; }
.precision-gear-card-body dt { color: #8a95a7; }
.precision-gear-card-body dd { max-width: 62%; margin: 0; overflow: hidden; color: #52617a; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-weight: 700; }
.precision-gear-empty { margin-top: 15px; }
.precision-gear-load-more { margin-top: 22px; }
.catalog-empty { padding: 60px 20px; text-align: center; border: 1px dashed #cbd5e3; border-radius: 15px; background: white; }
.catalog-empty p { color: #8792a4; font-size: 12px; }
.catalog-empty button { border: 0; color: var(--blue); background: transparent; cursor: pointer; font-weight: 700; }
@@ -507,6 +537,7 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.catalog-summary { grid-template-columns: repeat(4, 1fr); }
.catalog-grid { grid-template-columns: repeat(2, 1fr); }
.precision-gear-panel { grid-template-columns: 1fr; }
.precision-gear-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
@@ -533,6 +564,10 @@ footer > span { color: #9aa4b2; font-size: 10px; }
.catalog-scale-filter { grid-template-columns: 1fr; align-items: stretch; }
.catalog-grid { grid-template-columns: 1fr; gap: 15px; }
.precision-gear-panel { gap: 20px; margin-top: 30px; padding: 22px 18px; }
.precision-gear-catalog-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
.precision-gear-catalog-heading > p { text-align: left; }
.precision-gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.precision-gear-card-body { padding: 9px; }
.catalog-card-body { padding: 15px; }
.catalog-card-body h3 { height: auto; min-height: 42px; font-size: 14px; }
.catalog-card-body dl { min-height: 90px; }

146
app/page.tsx
View File

@@ -7,6 +7,7 @@ import {
type CatalogProduct,
} from "./catalog-data";
import { STEERING_WHEEL_ACCESSORIES } from "./catalog-accessories";
import { PRECISION_GEAR_PRODUCTS, PRECISION_GEAR_SUBCATEGORIES } from "./precision-gear-data";
import { getCatalogProductDimensionImage, getCatalogProductImage } from "./catalog-image-map";
const CATALOG_PRODUCTS = [...RAW_CATALOG_PRODUCTS, ...STEERING_WHEEL_ACCESSORIES].map((product) => ({
@@ -52,20 +53,6 @@ const PRIMARY_CATALOG_CATEGORIES = [
const CATALOG_FILTER_CATEGORIES = ["全部产品", ...PRIMARY_CATALOG_CATEGORIES, "静音舵机"];
const PRECISION_GEAR_SUBCATEGORIES = [
["轴", 15],
["单伞齿", 23],
["单直齿", 160],
["单皇冠齿", 9],
["双联直齿", 186],
["其他双联齿", 18],
["双联皇冠齿", 16],
["蜗杆", 32],
["异形零件", 18],
["离合齿", 29],
["差速器组件", 5],
] as const;
const FEATURED_SPEC_ORDER = [
"堵转扭矩",
"额定电压",
@@ -99,6 +86,25 @@ function getProductDimensionSummary(product: CatalogProduct) {
return dimensions.length > 0 ? dimensions.join(" × ") : "尺寸图待补充";
}
const PRECISION_GEAR_CARD_SPEC_ORDER = [
"模数",
"齿数",
"材质",
"外径（mm）",
"长（mm）",
"宽（mm）",
"高（mm）",
"孔径",
"类别",
];
function getPrecisionGearCardSpecs(product: CatalogProduct) {
return PRECISION_GEAR_CARD_SPEC_ORDER
.filter((label) => product.specs[label])
.slice(0, 2)
.map((label) => [label, product.specs[label]] as const);
}
const SERVO_CATEGORIES = ["标准舵机", "异形舵机", "全金属舵机", "大扭矩舵机", "积木舵机"];
const SILENT_SERVO_CATEGORY = "静音舵机";
const CUSTOM_SERVO_CATEGORY = "非标准舵机定制";
@@ -362,6 +368,9 @@ export default function Home() {
const [catalogCategory, setCatalogCategory] = useState("全部产品");
const [catalogScale, setCatalogScale] = useState("all");
const [catalogLimit, setCatalogLimit] = useState(24);
const [precisionGearQuery, setPrecisionGearQuery] = useState("");
const [precisionGearCategory, setPrecisionGearCategory] = useState("全部子类");
const [precisionGearLimit, setPrecisionGearLimit] = useState(24);
const [selectedCatalogProduct, setSelectedCatalogProduct] = useState<CatalogProduct | null>(null);
const matches = useMemo(() => getMatches(requirements), [requirements]);
@@ -392,6 +401,22 @@ export default function Home() {
});
}, [catalogCategory, catalogQuery, catalogScale]);
const visibleCatalog = filteredCatalog.slice(0, catalogLimit);
const filteredPrecisionGears = useMemo(() => {
const query = precisionGearQuery.trim().toLowerCase();
return PRECISION_GEAR_PRODUCTS.filter((product) => {
if (precisionGearCategory !== "全部子类" && product.subCategory !== precisionGearCategory) return false;
if (!query) return true;
const haystack = [
product.name,
product.code,
product.subCategory,
...Object.keys(product.specs),
...Object.values(product.specs),
].join(" ").toLowerCase();
return haystack.includes(query);
});
}, [precisionGearCategory, precisionGearQuery]);
const visiblePrecisionGears = filteredPrecisionGears.slice(0, precisionGearLimit);
const needsEngineer =
!top?.coreCompatible ||
requirements.annualVolume === "50000件以上" ||
@@ -1087,6 +1112,93 @@ export default function Home() {
</div>
</div>
</aside>
<div className="precision-gear-catalog" aria-label="精密齿轮配件产品卡片">
<div className="precision-gear-catalog-heading">
<div>
<p className="step-kicker">产品卡片目录</p>
<h4>精密齿轮配件 · 511 款</h4>
</div>
<p>小型卡片展示型号、子类和关键规格，点击图片可查看产品大图与完整参数。</p>
</div>
<div className="precision-gear-controls">
<input
value={precisionGearQuery}
onChange={(event) => {
setPrecisionGearQuery(event.target.value);
setPrecisionGearLimit(24);
}}
placeholder="搜索齿轮名称、编码、材质或规格"
aria-label="搜索精密齿轮配件"
/>
<div className="precision-gear-pills" aria-label="精密齿轮子类筛选">
<button
type="button"
className={precisionGearCategory === "全部子类" ? "active" : ""}
onClick={() => {
setPrecisionGearCategory("全部子类");
setPrecisionGearLimit(24);
}}
>全部子类 · 511</button>
{PRECISION_GEAR_SUBCATEGORIES.map(([name, count]) => (
<button
type="button"
key={name}
className={precisionGearCategory === name ? "active" : ""}
onClick={() => {
setPrecisionGearCategory(name);
setPrecisionGearLimit(24);
}}
>{name} · {count}</button>
))}
</div>
<p className="precision-gear-result">找到 <strong>{filteredPrecisionGears.length}</strong> 款配件</p>
</div>
{visiblePrecisionGears.length > 0 ? (
<div className="precision-gear-grid">
{visiblePrecisionGears.map((product) => (
<article className="precision-gear-card" key={product.id}>
<button
type="button"
className="precision-gear-image"
onClick={() => setSelectedCatalogProduct(product)}
aria-label={`查看${product.name}大图`}
>
<img src={product.image} alt={product.name} loading="lazy" />
<span>点击查看大图</span>
</button>
<div className="precision-gear-card-body">
<p>{product.subCategory}</p>
<h5>{product.name}</h5>
<code>{product.code}</code>
<dl>
{getPrecisionGearCardSpecs(product).map(([label, value]) => (
<div key={label}><dt>{label}</dt><dd>{value}</dd></div>
))}
</dl>
</div>
</article>
))}
</div>
) : (
<div className="catalog-empty precision-gear-empty">
<strong>没有找到匹配的精密齿轮</strong>
<p>可以尝试减少关键词，或切换到“全部子类”。</p>
<button type="button" onClick={() => { setPrecisionGearQuery(""); setPrecisionGearCategory("全部子类"); setPrecisionGearLimit(24); }}>
清除筛选
</button>
</div>
)}
{precisionGearLimit < filteredPrecisionGears.length && (
<div className="load-more-wrap precision-gear-load-more">
<button type="button" onClick={() => setPrecisionGearLimit((current) => current + 24)}>
加载更多齿轮配件 <span>已显示 {visiblePrecisionGears.length} / {filteredPrecisionGears.length}</span>
</button>
</div>
)}
</div>
</section>
{selectedCatalogProduct && (
@@ -1139,7 +1251,11 @@ export default function Home() {
<h2 id="catalog-modal-title">{selectedCatalogProduct.name}</h2>
<code>{selectedCatalogProduct.code}</code>
<p className="catalog-source-note">
{selectedCatalogProduct.page > 0 ? `官方产品目录第 ${selectedCatalogProduct.page} 页` : "商城产品资料 · 舵盘配件"}
{selectedCatalogProduct.page > 0
? `官方产品目录第 ${selectedCatalogProduct.page} 页`
: selectedCatalogProduct.category === "舵盘配件"
? "商城产品资料 · 舵盘配件"
: "商城产品资料 · 精密齿轮配件"}
</p>
<div className="catalog-modal-highlight">
<span>产品尺寸</span>

11245
app/precision-gear-data.ts Normal file
View File

File diff suppressed because it is too large Load Diff