Clarify official and feature categories

app/page.tsx

@@ -32,18 +32,18 @@ const APPLICATIONS = [
   { name: "工业设备", note: "控制机构与定制传动组件" },
 ];
 
-const CATALOG_CATEGORIES = [
-  "全部产品",
+const PRIMARY_CATALOG_CATEGORIES = [
   "标准舵机",
   "异形舵机",
   "全金属舵机",
   "大扭矩舵机",
   "积木舵机",
-  "静音舵机",
   "标准齿轮箱",
   "翻盖电机",
 ];
 
+const CATALOG_FILTER_CATEGORIES = ["全部产品", ...PRIMARY_CATALOG_CATEGORIES, "静音舵机"];
+
 const FEATURED_SPEC_ORDER = [
   "堵转扭矩",
   "额定电压",
@@ -66,7 +66,6 @@ function getFeaturedSpecs(product: CatalogProduct) {
 const SERVO_CATEGORIES = ["标准舵机", "异形舵机", "全金属舵机", "大扭矩舵机", "积木舵机"];
 const SILENT_SERVO_CATEGORY = "静音舵机";
 const CUSTOM_SERVO_CATEGORY = "非标准舵机定制";
-const SELECTOR_CATEGORIES = [...SERVO_CATEGORIES, SILENT_SERVO_CATEGORY, CUSTOM_SERVO_CATEGORY];
 const TORQUE_MIN = 0.09;
 const TORQUE_MAX = 920;
 const TORQUE_PRESETS = [0.1, 1, 5, 20, 100, 300, 920];
@@ -446,13 +445,22 @@ export default function Home() {
                         onChange={(event) => update("category", event.target.value)}
                       >
                         <option value="全部舵机">全部舵机（243款）</option>
-                        {SELECTOR_CATEGORIES.map((category) => (
-                          <option key={category} value={category}>
-                            {category === CUSTOM_SERVO_CATEGORY
-                              ? `${category}（联系我们）`
-                              : `${category}（${getCategoryCount(category)}款）`}
-                          </option>
-                        ))}
+                        <optgroup label="官方产品系列">
+                          {SERVO_CATEGORIES.map((category) => (
+                            <option key={category} value={category}>
+                              {category}（{getCategoryCount(category)}款）
+                            </option>
+                          ))}
+                        </optgroup>
+                        <optgroup label="特色筛选与定制">
+                          {[SILENT_SERVO_CATEGORY, CUSTOM_SERVO_CATEGORY].map((category) => (
+                            <option key={category} value={category}>
+                              {category === CUSTOM_SERVO_CATEGORY
+                                ? `${category}（联系我们）`
+                                : `${category}（${getCategoryCount(category)}款）`}
+                            </option>
+                          ))}
+                        </optgroup>
                       </select>
                     </label>
                     <label className="select-field">
@@ -836,11 +844,11 @@ export default function Home() {
             <p className="eyebrow"><span /> 官方产品目录 · 2026.06</p>
             <h2>完整收录280个产品型号</h2>
           </div>
-          <p>覆盖标准、异形、静音、全金属、大扭矩和积木舵机，以及标准齿轮箱与翻盖电机。参数来自高徳乐官方产品型号表。</p>
+          <p>官方目录按七个主分类收录280款产品；静音舵机作为特色子集筛选，不重复计入产品总数。</p>
         </div>
 
         <div className="catalog-summary" aria-label="产品分类统计">
-          {CATALOG_CATEGORIES.slice(1).map((category) => (
+          {PRIMARY_CATALOG_CATEGORIES.map((category) => (
             <button
               type="button"
               key={category}
@@ -855,6 +863,7 @@ export default function Home() {
             </button>
           ))}
         </div>
+        <p className="catalog-category-note">分类已按官方目录29页表头复核 · 七个主分类合计280款 · 静音舵机11款为标准舵机特色子集</p>
 
         <div className="catalog-toolbar">
           <label className="catalog-search">
@@ -873,16 +882,16 @@ export default function Home() {
             )}
           </label>
           <div className="category-pills" aria-label="产品类别筛选">
-            {CATALOG_CATEGORIES.map((category) => (
+            {CATALOG_FILTER_CATEGORIES.map((category) => (
               <button
                 type="button"
                 key={category}
-                className={catalogCategory === category ? "active" : ""}
+                className={`${catalogCategory === category ? "active" : ""} ${category === SILENT_SERVO_CATEGORY ? "feature-filter" : ""}`}
                 onClick={() => {
                   setCatalogCategory(category);
                   setCatalogLimit(24);
                 }}
-              >{category}</button>
+              >{category === SILENT_SERVO_CATEGORY ? `${category} · ${SILENT_SERVO_COUNT}` : category}</button>
             ))}
           </div>
           <p className="catalog-result-count">