From e3ad73d3970a33c3bdeae152894bef681a5bc2a0 Mon Sep 17 00:00:00 2001
From: cneicy <im@crash.work>
Date: Sun, 8 Nov 2026 18:54:34 +0800
Subject: [PATCH] =?UTF-8?q?feat(products):=20=E6=94=B9=E7=89=88=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E5=99=A8=E9=80=89=E8=B4=AD=E7=95=8C=E9=9D=A2=E5=B9=B6?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9C=B0=E5=8C=BA=E7=AD=9B=E9=80=89=E4=B8=8E?=
 =?UTF-8?q?=E4=BB=B7=E6=A0=BC=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 云产品选择器新增地区标签页、分组数量及全部选项，自动跟随当前线路所属地区
- 将线路和型号改为紧凑选择按钮，精简型号名称的公共前缀并保留完整名称提示
- 物理服务器目录改为规格列表，支持行内展开、收起线路详情及进入定制页
- 新增商品起价升降序排序，将无有效价格的商品置于末尾
- 将规格筛选改为下拉选项，移动端支持展开更多筛选并显示已选条件数量
- 统一云服务器与物理服务器的横向配置表单，优化磁盘、带宽、镜像选择及移动端布局
- 限制桌面端配置汇总栏高度，使清单内部滚动并保持价格和购买按钮可见
- 统一产品分类标签页与胶囊按钮样式，补充查看全部产品入口
- 将产品选择器和物理服务器目录重构为 script setup、声明式模板及 scoped 样式，删除旧样式文件与相关引用
---
 .../styles/CloudProductPicker.CAm9rmUl.css    |  128 -
 app/assets/styles/KkyEcsConfig.BFaAwQPZ.css   |  192 ++
 app/assets/styles/MfDcimConfig.BhC_eZ0V.css   |  163 ++
 app/assets/styles/cloud-server.CcwlOXJ0.css   |   15 +
 .../styles/dedicated-server.CiJfMYtk.css      |  398 ---
 app/assets/styles/entry.Cs9kvuGi.css          |   34 +-
 app/assets/styles/products.CrccEo2m.css       |   77 +
 app/components/config/CloudProductPicker.vue  |  850 +++---
 app/components/config/KkyEcsConfig.vue        |  242 +-
 app/pages/products/cloud-server.vue           |   19 +-
 .../products/dedicated-server/customize.vue   |    1 -
 app/pages/products/dedicated-server/index.vue | 2314 ++++++++---------
 12 files changed, 2121 insertions(+), 2312 deletions(-)
 delete mode 100644 app/assets/styles/CloudProductPicker.CAm9rmUl.css
 delete mode 100644 app/assets/styles/dedicated-server.CiJfMYtk.css

diff --git a/app/assets/styles/CloudProductPicker.CAm9rmUl.css b/app/assets/styles/CloudProductPicker.CAm9rmUl.css
deleted file mode 100644
index 139377f..0000000
--- a/app/assets/styles/CloudProductPicker.CAm9rmUl.css
+++ /dev/null
@@ -1,128 +0,0 @@
-/* 云商品选择器：区域/商品选项、选中状态及空目录提示。 */
-/* 导入方：app/components/config/CloudProductPicker.vue、app/pages/products/cloud-server.vue。 */
-.cloud-product-picker[data-v-a438862d] {
-  flex-direction: column;
-  gap: 24px;
-  min-width: 0;
-  display: flex;
-}
-.selection-section[data-v-a438862d] {
-  min-width: 0;
-}
-.selection-section h3[data-v-a438862d] {
-  border-bottom: 1px solid var(--p-content-border-color);
-  margin: 0 0 21px;
-  padding-bottom: 15px;
-  font-size: 1rem;
-  font-weight: 400;
-}
-.selection-section .products-title[data-v-a438862d] {
-  border: 0;
-  margin-bottom: 8px;
-  padding-bottom: 0;
-}
-.selection-label[data-v-a438862d] {
-  margin-bottom: 8px;
-}
-.zone-options[data-v-a438862d] {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 14px;
-  display: grid;
-}
-.product-options[data-v-a438862d] {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-  display: grid;
-}
-/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
-.product-option[data-v-a438862d],
-.zone-option[data-v-a438862d] {
-  border: 1px solid var(--p-content-border-color);
-  background: var(--p-content-background);
-  min-width: 0;
-  min-height: 60px;
-  color: var(--p-text-color);
-  text-align: left;
-  cursor: pointer;
-  overflow-wrap: anywhere;
-  border-radius: var(--radius-md);
-  flex-direction: column;
-  gap: 10px;
-  padding: 17px 14px;
-  display: flex;
-  box-shadow: 0 1px 3px #0000001a;
-}
-.zone-option[data-v-a438862d] {
-  justify-content: center;
-  font-weight: 600;
-}
-.product-option[data-v-a438862d] {
-  gap: 0;
-  padding: 0;
-  overflow: hidden;
-}
-.product-option strong[data-v-a438862d] {
-  background: color-mix(
-    in srgb,
-    var(--p-primary-color) 8%,
-    var(--p-content-background)
-  );
-  padding: 14px;
-  font-weight: 600;
-  display: block;
-}
-.product-option span[data-v-a438862d] {
-  color: var(--p-text-muted-color);
-  padding: 14px;
-  font-size: 0.875rem;
-}
-.active[data-v-a438862d] {
-  outline: 2px solid var(--p-primary-color);
-  outline-offset: -1px;
-  background: color-mix(
-    in srgb,
-    var(--p-primary-color) 7%,
-    var(--p-content-background)
-  );
-  color: var(--p-primary-700);
-}
-.product-option[data-v-a438862d]:disabled,
-.zone-option[data-v-a438862d]:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-/* 键盘操作的可见焦点：不要只保留鼠标 hover 效果而移除此反馈。 */
-.product-option[data-v-a438862d]:focus-visible,
-.zone-option[data-v-a438862d]:focus-visible {
-  outline: 2px solid var(--p-primary-color);
-  outline-offset: 3px;
-}
-.catalog-empty[data-v-a438862d] {
-  text-align: center;
-  color: var(--p-text-muted-color);
-  border: 1px solid var(--p-content-border-color);
-  background: var(--p-content-background);
-  border-radius: var(--radius-md);
-  padding: 28px;
-}
-.catalog-empty i[data-v-a438862d] {
-  font-size: 1.75rem;
-}
-.catalog-empty a[data-v-a438862d] {
-  color: var(--p-primary-color);
-  text-decoration: none;
-}
-/* 视口条件 (width<768px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
-@media (width<768px) {
-  .product-options[data-v-a438862d],
-  .zone-options[data-v-a438862d] {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
-  }
-}
-/* 视口条件 (width<=390px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
-@media (width<=390px) {
-  .product-options[data-v-a438862d] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
diff --git a/app/assets/styles/KkyEcsConfig.BFaAwQPZ.css b/app/assets/styles/KkyEcsConfig.BFaAwQPZ.css
index abea8b1..aee7fbc 100644
--- a/app/assets/styles/KkyEcsConfig.BFaAwQPZ.css
+++ b/app/assets/styles/KkyEcsConfig.BFaAwQPZ.css
@@ -44,3 +44,195 @@
     max-width: 470px;
   }
 }
+/* 横向表单：左列标签、右列控件，所有控件左缘对齐；字段分组容器不参与布局。 */
+.form-inline[data-v-e8ce6418] {
+  display: contents;
+}
+.config-page .config-options .form-row[data-v-e8ce6418] {
+  grid-template-columns: 88px minmax(0, 1fr);
+  align-items: start;
+  gap: 8px 16px;
+  margin-bottom: 0;
+  display: grid;
+}
+.config-page .config-options .form-row > label[data-v-e8ce6418],
+.config-page .storage-field[data-v-e8ce6418] .storage-label,
+.config-page .bandwidth-field[data-v-e8ce6418] .bandwidth-label {
+  color: var(--p-text-muted-color);
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  line-height: 36px;
+}
+.config-page .config-options .form-row[data-v-e8ce6418] > :not(label) {
+  grid-column: 2;
+}
+.config-page .config-options .form-row > .storage-field[data-v-e8ce6418],
+.config-page .config-options .form-row > .bandwidth-field[data-v-e8ce6418] {
+  grid-column: 1 / -1;
+}
+.config-options > .panel[data-v-e8ce6418] {
+  flex-direction: column;
+  gap: 16px;
+  display: flex;
+}
+.config-options > .panel > .section-title[data-v-e8ce6418] {
+  margin-bottom: 6px;
+}
+.config-page .config-options .image-groups[data-v-e8ce6418] {
+  margin-bottom: 0;
+}
+.config-page .storage-panel .form-row > label[data-v-e8ce6418],
+.config-page .storage-field[data-v-e8ce6418] .storage-label {
+  line-height: 46px;
+}
+.config-page .storage-system[data-v-e8ce6418] {
+  width: auto;
+}
+.config-page .traffic-package-value[data-v-e8ce6418] {
+  min-height: 36px;
+  width: auto;
+  justify-self: start;
+  padding: 6px 14px;
+}
+
+/* 磁盘：系统盘与各数据盘统一为单行卡片，列宽一致便于对齐。 */
+.config-page .storage-field[data-v-e8ce6418] {
+  grid-template-columns: 88px minmax(0, 1fr);
+  align-items: start;
+  gap: 16px;
+  display: grid;
+}
+.config-page .storage-field[data-v-e8ce6418] .storage-card {
+  grid-template-columns: 48px 150px minmax(80px, 1fr) auto 30px;
+  grid-template-areas: "type cap slider desc remove";
+  grid-column: 2;
+  align-items: center;
+  gap: 16px;
+  min-height: 46px;
+  padding: 4px 12px;
+  border: 1px solid var(--p-content-border-color);
+  background: var(--p-content-background);
+  box-shadow: none;
+  display: grid;
+}
+.config-page .storage-field[data-v-e8ce6418] .storage-card-header {
+  display: contents;
+}
+.config-page .storage-field[data-v-e8ce6418] .storage-card-header strong {
+  grid-area: type;
+  color: var(--p-text-color);
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+.config-page .storage-field[data-v-e8ce6418] .storage-remove {
+  grid-area: remove;
+  margin: 0;
+}
+.config-page .storage-field[data-v-e8ce6418] .storage-capacity {
+  grid-area: cap;
+}
+.config-page
+  .storage-field[data-v-e8ce6418]
+  .storage-capacity
+  .p-inputnumber-input {
+  min-height: 34px;
+  padding: 6px 10px;
+}
+.config-page .storage-field[data-v-e8ce6418] .storage-slider {
+  grid-area: slider;
+  margin: 0;
+}
+.config-page .storage-field[data-v-e8ce6418] .storage-description {
+  grid-area: desc;
+  color: var(--p-text-muted-color);
+  white-space: nowrap;
+  font-size: 0.8125rem;
+}
+.config-page .config-options .storage-disks[data-v-e8ce6418] {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 8px;
+}
+.storage-disks[data-v-e8ce6418] > .storage-field {
+  display: block;
+}
+.storage-disks > .storage-add[data-v-e8ce6418] {
+  min-height: 40px;
+  flex-direction: row;
+  gap: 8px;
+  padding: 8px 14px;
+  border-width: 1px;
+  font-size: 0.9375rem;
+}
+.config-page .config-options .form-row > .hint[data-v-e8ce6418] {
+  font-size: 0.8125rem;
+}
+
+/* 带宽：标签、数值输入和滑块同一行。 */
+.config-page .bandwidth-field[data-v-e8ce6418] {
+  grid-template-columns: 88px 150px minmax(80px, 1fr);
+  align-items: center;
+  gap: 16px;
+  max-width: none;
+  display: grid;
+}
+.config-page
+  .bandwidth-field[data-v-e8ce6418]
+  .bandwidth-capacity
+  .p-inputnumber-input {
+  min-height: 34px;
+  padding: 6px 10px;
+}
+.config-page .bandwidth-field[data-v-e8ce6418] > .bandwidth-slider {
+  width: auto;
+  max-width: 360px;
+  margin: 0 8px 0 0;
+}
+
+.config-page .image-groups[data-v-e8ce6418] {
+  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+  gap: 10px;
+}
+.config-page .image-groups[data-v-e8ce6418] .image-group {
+  min-height: 48px;
+  gap: 10px;
+  padding: 8px 12px;
+  font-size: 0.9375rem;
+  box-shadow: none;
+}
+
+@media (width<640px) {
+  .config-page .config-options .form-row[data-v-e8ce6418],
+  .config-page .storage-field[data-v-e8ce6418] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 6px;
+  }
+  .config-page .config-options .form-row[data-v-e8ce6418] > :not(label),
+  .config-page .storage-field[data-v-e8ce6418] .storage-card {
+    grid-column: 1;
+  }
+  .config-page .config-options .form-row > label[data-v-e8ce6418],
+  .config-page .storage-field[data-v-e8ce6418] .storage-label,
+  .config-page .bandwidth-field[data-v-e8ce6418] .bandwidth-label {
+    line-height: 1.5;
+  }
+  .config-page .storage-field[data-v-e8ce6418] .storage-card {
+    grid-template-columns: 40px minmax(0, 1fr) 30px;
+    grid-template-areas:
+      "type cap remove"
+      "slider slider slider"
+      "desc desc desc";
+    gap: 10px 12px;
+    padding: 10px 12px;
+  }
+  .config-page .bandwidth-field[data-v-e8ce6418] {
+    grid-template-columns: 120px minmax(0, 1fr);
+    gap: 6px 16px;
+  }
+  .config-page .bandwidth-field[data-v-e8ce6418] .bandwidth-label {
+    grid-column: 1 / -1;
+  }
+  .config-page .image-groups[data-v-e8ce6418] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
diff --git a/app/assets/styles/MfDcimConfig.BhC_eZ0V.css b/app/assets/styles/MfDcimConfig.BhC_eZ0V.css
index 8896c89..e62683e 100644
--- a/app/assets/styles/MfDcimConfig.BhC_eZ0V.css
+++ b/app/assets/styles/MfDcimConfig.BhC_eZ0V.css
@@ -179,3 +179,166 @@
     width: 125px;
   }
 }
+/* 横向表单：左列标签、右列控件，与云服务器配置页保持一致；基础规格卡片内的字段不受影响。 */
+.config-options > .panel[data-v-b5ff32bb] {
+  flex-direction: column;
+  gap: 16px;
+  display: flex;
+}
+.config-options > .panel > .section-title[data-v-b5ff32bb] {
+  margin-bottom: 6px;
+}
+.config-options > .panel > .dcim-base[data-v-b5ff32bb] {
+  margin-bottom: 0;
+}
+.config-page .config-options > .panel > .form-row[data-v-b5ff32bb] {
+  grid-template-columns: 88px minmax(0, 1fr);
+  align-items: start;
+  gap: 8px 16px;
+  margin-bottom: 0;
+  display: grid;
+}
+.config-page .config-options > .panel > .form-row > label[data-v-b5ff32bb],
+.config-page .config-options > .panel > .form-row > span[id][data-v-b5ff32bb],
+.config-page .storage-grid > .storage-field[data-v-b5ff32bb] .storage-label {
+  color: var(--p-text-muted-color);
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  line-height: 36px;
+}
+.config-page
+  .config-options
+  > .panel
+  > .form-row[data-v-b5ff32bb]
+  > :where(:not(label, span[id])) {
+  grid-column: 2;
+}
+.config-page
+  .config-options
+  > .panel
+  > .form-row[data-v-b5ff32bb]:has(> .network-slider) {
+  grid-template-columns: 88px 150px minmax(80px, 360px);
+  align-items: center;
+}
+.config-page
+  .config-options
+  > .panel
+  > .form-row
+  > .network-slider[data-v-b5ff32bb] {
+  grid-column: 3;
+  max-width: none;
+  margin: 0 8px;
+}
+.config-page
+  .config-options
+  > .panel
+  > .form-row
+  > .p-inputnumber[data-v-b5ff32bb] {
+  max-width: none;
+}
+
+/* 硬盘：每块盘一行，标签在左列。 */
+.config-page .storage-grid[data-v-b5ff32bb] {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+}
+.config-page .storage-grid > .storage-field[data-v-b5ff32bb] {
+  grid-template-columns: 88px minmax(0, 1fr);
+  align-items: start;
+  gap: 16px;
+  display: grid;
+}
+.config-page .storage-grid > .storage-field[data-v-b5ff32bb] .storage-label {
+  line-height: 44px;
+}
+.config-page .storage-grid > .storage-field[data-v-b5ff32bb] .storage-card {
+  border: 1px solid var(--p-content-border-color);
+  background: var(--p-content-background);
+  box-shadow: none;
+  flex-flow: wrap;
+  align-items: center;
+  gap: 8px 20px;
+  min-height: 44px;
+  padding: 6px 14px;
+}
+.config-page
+  .storage-grid
+  > .storage-field[data-v-b5ff32bb]
+  .storage-card-header
+  strong {
+  color: var(--p-text-color);
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+.config-page
+  .storage-grid
+  > .storage-field[data-v-b5ff32bb]
+  .storage-description {
+  color: var(--p-text-muted-color);
+  margin-left: auto;
+  font-size: 0.8125rem;
+}
+.config-page .storage-grid .disk-quantity[data-v-b5ff32bb] {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.config-page .storage-grid .disk-quantity[data-v-b5ff32bb] .p-inputnumber {
+  width: 150px;
+}
+
+@media (width<640px) {
+  .config-page .config-options > .panel > .form-row[data-v-b5ff32bb],
+  .config-page .storage-grid > .storage-field[data-v-b5ff32bb] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 6px;
+  }
+  .config-page
+    .config-options
+    > .panel
+    > .form-row[data-v-b5ff32bb]:has(> .network-slider) {
+    grid-template-columns: 130px minmax(0, 1fr);
+    gap: 6px 16px;
+  }
+  .config-page .config-options > .panel > .form-row > label[data-v-b5ff32bb] {
+    grid-column: 1 / -1;
+  }
+  .config-page
+    .config-options
+    > .panel
+    > .form-row[data-v-b5ff32bb]
+    > :where(:not(label, span[id])) {
+    grid-column: 1;
+  }
+  .config-page
+    .config-options
+    > .panel
+    > .form-row
+    > .network-slider[data-v-b5ff32bb] {
+    grid-column: 2;
+  }
+  .config-page .config-options > .panel > .form-row > label[data-v-b5ff32bb],
+  .config-page .config-options > .panel > .form-row > span[id][data-v-b5ff32bb],
+  .config-page .storage-grid > .storage-field[data-v-b5ff32bb] .storage-label {
+    line-height: 1.5;
+  }
+}
+.config-page .config-options .image-groups[data-v-b5ff32bb] {
+  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+  gap: 10px;
+  margin-bottom: 0;
+}
+.config-page .config-options .image-groups[data-v-b5ff32bb] .image-group,
+.config-page .config-options .image-group[data-v-b5ff32bb] {
+  min-height: 48px;
+  gap: 10px;
+  padding: 8px 12px;
+  font-size: 0.9375rem;
+  box-shadow: none;
+}
+@media (width<640px) {
+  .config-page .config-options .image-groups[data-v-b5ff32bb] {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
diff --git a/app/assets/styles/cloud-server.CcwlOXJ0.css b/app/assets/styles/cloud-server.CcwlOXJ0.css
index 8061e86..f194475 100644
--- a/app/assets/styles/cloud-server.CcwlOXJ0.css
+++ b/app/assets/styles/cloud-server.CcwlOXJ0.css
@@ -15,3 +15,18 @@ h2[data-v-ef3931f0] {
   font-weight: 500;
   line-height: 2rem;
 }
+.order-head[data-v-ef3931f0] {
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  display: flex;
+}
+.order-head a[data-v-ef3931f0] {
+  color: var(--p-text-muted-color);
+  white-space: nowrap;
+  font-size: 0.875rem;
+  text-decoration: none;
+}
+.order-head a[data-v-ef3931f0]:hover {
+  color: var(--p-primary-color);
+}
diff --git a/app/assets/styles/dedicated-server.CiJfMYtk.css b/app/assets/styles/dedicated-server.CiJfMYtk.css
deleted file mode 100644
index ef23d01..0000000
--- a/app/assets/styles/dedicated-server.CiJfMYtk.css
+++ /dev/null
@@ -1,398 +0,0 @@
-/* 独立服务器目录：筛选面板、硬件规格、线路选择与购买入口。 */
-/* 导入方：app/pages/products/dedicated-server/customize.vue、app/pages/products/dedicated-server/index.vue。 */
-.dedicated-catalog[data-v-e16eb167] {
-  width: 100%;
-  max-width: 1280px;
-  margin: 0 auto;
-  padding-bottom: 28px;
-}
-.catalog-head[data-v-e16eb167] {
-  justify-content: space-between;
-  align-items: center;
-  gap: 14px;
-  margin-bottom: 35px;
-  display: flex;
-}
-.catalog-head h1[data-v-e16eb167] {
-  margin: 0;
-  font-size: 1.375rem;
-  font-weight: 400;
-}
-.catalog-head a[data-v-e16eb167] {
-  color: var(--p-text-muted-color);
-  font-size: 0.875rem;
-  text-decoration: none;
-}
-.catalog-layout[data-v-e16eb167] {
-  grid-template-columns: 304px minmax(0, 1fr);
-  align-items: start;
-  gap: 21px;
-  display: grid;
-}
-.catalog-layout.has-selection[data-v-e16eb167] {
-  grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr);
-}
-h2[data-v-e16eb167] {
-  border-bottom: 1px solid var(--p-content-border-color);
-  margin: 0 0 14px;
-  padding: 0 0 14px;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-}
-.filter-panel[data-v-e16eb167],
-.hardware-card[data-v-e16eb167] {
-  border: 1px solid var(--p-content-border-color);
-  background: var(--p-content-background);
-  border-radius: var(--radius-md);
-  box-shadow: 0 1px 3px #0000001a;
-}
-.filter-panel[data-v-e16eb167] {
-  padding: 0 16px 7px;
-}
-details[data-v-e16eb167] {
-  border-bottom: 1px solid var(--p-content-border-color);
-}
-summary[data-v-e16eb167] {
-  cursor: pointer;
-  justify-content: space-between;
-  padding: 16px 0;
-  font-weight: 500;
-  list-style: none;
-  display: flex;
-}
-summary[data-v-e16eb167]::-webkit-details-marker {
-  display: none;
-}
-summary > i[data-v-e16eb167] {
-  align-self: center;
-  font-size: 0.875rem;
-}
-details[open] > summary > i[data-v-e16eb167] {
-  transform: rotate(180deg);
-}
-.price-range[data-v-e16eb167] {
-  align-items: center;
-  gap: 7px;
-  margin: 7px 0 12px;
-  display: flex;
-}
-.price-range[data-v-e16eb167] .p-inputnumber {
-  flex: 1;
-  width: 0;
-}
-.price-range[data-v-e16eb167] input {
-  width: 100%;
-  min-width: 0;
-}
-.filter-panel small[data-v-e16eb167] {
-  color: var(--p-text-muted-color);
-  padding-bottom: 14px;
-  font-size: 0.8125rem;
-  line-height: 1.6;
-  display: block;
-}
-.filter-options[data-v-e16eb167] {
-  flex-wrap: wrap;
-  gap: 7px;
-  padding-bottom: 14px;
-  display: flex;
-}
-.filter-options button[data-v-e16eb167] {
-  border: 1px solid var(--p-content-border-color);
-  color: var(--p-text-color);
-  cursor: pointer;
-  background: 0 0;
-  border-radius: var(--radius-sm);
-  padding: 4px 7px;
-  font-size: 0.875rem;
-}
-.filter-options button.active[data-v-e16eb167] {
-  border-color: var(--p-primary-color);
-  background: var(--p-highlight-background);
-  color: var(--p-highlight-color);
-}
-.filter-empty[data-v-e16eb167] {
-  color: var(--p-text-muted-color);
-  font-size: 0.875rem;
-}
-.catalog-lines[data-v-e16eb167],
-.catalog-products[data-v-e16eb167] {
-  min-width: 0;
-}
-.hardware-card[data-v-e16eb167] {
-  margin-bottom: 14px;
-  padding: 17px 15px;
-}
-.hardware-card.selected[data-v-e16eb167] {
-  outline: 2px solid var(--p-primary-color);
-  background: var(--p-highlight-background);
-}
-.hardware-card h3[data-v-e16eb167] {
-  margin: 0 0 24px;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-.hardware-body[data-v-e16eb167] {
-  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 21px;
-  display: grid;
-}
-.hardware-spec[data-v-e16eb167] {
-  align-items: center;
-  gap: 14px;
-  min-width: 0;
-  display: flex;
-}
-.hardware-spec i[data-v-e16eb167],
-.line-specs i[data-v-e16eb167] {
-  color: var(--p-primary-color);
-}
-.hardware-spec > div[data-v-e16eb167] {
-  flex-direction: column;
-  min-width: 0;
-  display: flex;
-}
-.hardware-spec span[data-v-e16eb167] {
-  color: var(--p-text-muted-color);
-  font-size: 0.875rem;
-}
-/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
-.hardware-spec strong[data-v-e16eb167] {
-  overflow-wrap: anywhere;
-  font-size: 1rem;
-  font-weight: 500;
-}
-.hardware-spec small[data-v-e16eb167] {
-  color: var(--p-text-muted-color);
-  font-size: 0.8125rem;
-}
-.hardware-buy[data-v-e16eb167] {
-  background: var(--p-content-hover-background);
-  border-radius: var(--radius-md);
-  align-items: center;
-  gap: 10px;
-  padding: 4px;
-  display: flex;
-}
-.hardware-buy > span[data-v-e16eb167] {
-  text-align: right;
-  flex-direction: column;
-  display: flex;
-}
-.hardware-buy strong[data-v-e16eb167] {
-  white-space: nowrap;
-  font-size: 1.25rem;
-}
-.hardware-buy small[data-v-e16eb167] {
-  color: var(--p-text-muted-color);
-  font-size: max(11px, 0.625rem);
-}
-.hardware-buy[data-v-e16eb167] button {
-  min-width: 112px;
-}
-.hardware-card footer[data-v-e16eb167] {
-  color: var(--p-text-muted-color);
-  justify-content: space-between;
-  gap: 14px;
-  margin-top: 24px;
-  font-size: 0.875rem;
-  display: flex;
-}
-.has-selection .hardware-body[data-v-e16eb167] {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-.has-selection .hardware-buy[data-v-e16eb167] {
-  grid-column: 1/-1;
-  justify-self: end;
-  margin-top: 7px;
-}
-.has-selection .hardware-card h3[data-v-e16eb167] {
-  margin-bottom: 21px;
-}
-.catalog-state[data-v-e16eb167] {
-  text-align: center;
-  border: 1px solid var(--p-content-border-color);
-  background: var(--p-content-background);
-  border-radius: var(--radius-md);
-  flex-direction: column;
-  align-items: center;
-  gap: 14px;
-  min-height: 260px;
-  padding: 70px 21px;
-  display: flex;
-}
-.catalog-state > i[data-v-e16eb167] {
-  color: var(--p-text-muted-color);
-  font-size: 2rem;
-}
-.catalog-state h3[data-v-e16eb167] {
-  margin: 0;
-  font-size: 1.125rem;
-}
-.catalog-state p[data-v-e16eb167] {
-  color: var(--p-text-muted-color);
-  margin: 0;
-  font-size: 0.9375rem;
-}
-.line-heading[data-v-e16eb167] {
-  border-bottom: 1px solid var(--p-content-border-color);
-  justify-content: space-between;
-  align-items: center;
-  min-height: 36px;
-  margin-bottom: 14px;
-  display: flex;
-}
-.line-heading h2[data-v-e16eb167] {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-.line-panel[data-v-e16eb167] {
-  border: 1px solid var(--p-content-border-color);
-  background: var(--p-highlight-background);
-  border-radius: var(--radius-md);
-  padding: 0 17px;
-}
-.line-card[data-v-e16eb167] {
-  border-bottom: 1px solid var(--p-content-border-color);
-  padding: 17px 0;
-}
-.line-card[data-v-e16eb167]:last-child {
-  border: 0;
-}
-.line-tags[data-v-e16eb167] {
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 21px;
-  display: flex;
-}
-.line-specs[data-v-e16eb167] {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 14px;
-  display: grid;
-}
-.line-specs > div[data-v-e16eb167] {
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-  display: flex;
-}
-.line-specs span[data-v-e16eb167] {
-  color: var(--p-text-muted-color);
-  font-size: 0.875rem;
-}
-.line-specs strong[data-v-e16eb167] {
-  color: var(--p-text-color);
-  font-size: 1rem;
-  font-weight: 500;
-  display: block;
-}
-.line-action[data-v-e16eb167] {
-  justify-content: flex-end;
-  align-items: center;
-  gap: 10px;
-  margin-top: 21px;
-  display: flex;
-}
-.line-action .line-order-link[data-v-e16eb167] {
-  white-space: nowrap;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  gap: 7px;
-  min-width: 112px;
-  text-decoration: none;
-  display: inline-flex;
-}
-/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
-.line-action > span[data-v-e16eb167] {
-  overflow-wrap: anywhere;
-  min-width: 0;
-  color: var(--p-text-muted-color);
-  font-size: 0.8125rem;
-}
-.line-empty[data-v-e16eb167] {
-  padding: 21px;
-  font-size: 0.9375rem;
-}
-.filter-options button[data-v-e16eb167]:focus-visible,
-summary[data-v-e16eb167]:focus-visible {
-  outline: 2px solid var(--p-primary-color);
-  outline-offset: 3px;
-}
-/* 视口条件 (width>=1024px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
-@media (width>=1024px) {
-  .catalog-lines[data-v-e16eb167] {
-    position: sticky;
-    top: calc(var(--console-top-offset, 56px) + 20px);
-  }
-}
-/* 视口条件 (width<1200px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
-@media (width<1200px) {
-  .catalog-layout[data-v-e16eb167] {
-    grid-template-columns: 240px minmax(0, 1fr);
-  }
-  .hardware-body[data-v-e16eb167] {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .hardware-buy[data-v-e16eb167] {
-    grid-column: 1/-1;
-    justify-self: end;
-  }
-  .catalog-layout.has-selection[data-v-e16eb167] {
-    grid-template-columns: 200px minmax(0, 1fr);
-  }
-  .catalog-lines[data-v-e16eb167] {
-    grid-area: 1/2;
-    position: static;
-  }
-  .has-selection .catalog-products[data-v-e16eb167] {
-    grid-column: 2;
-  }
-  .has-selection .catalog-filters[data-v-e16eb167] {
-    grid-row: 1 / span 2;
-  }
-}
-/* 视口条件 (width<768px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
-@media (width<768px) {
-  .catalog-head[data-v-e16eb167] {
-    margin-bottom: 28px;
-  }
-  .catalog-layout[data-v-e16eb167],
-  .catalog-layout.has-selection[data-v-e16eb167] {
-    flex-direction: column;
-    gap: 28px;
-    display: flex;
-  }
-  .catalog-filters[data-v-e16eb167],
-  .catalog-lines[data-v-e16eb167],
-  .catalog-products[data-v-e16eb167] {
-    width: 100%;
-  }
-  .catalog-lines[data-v-e16eb167] {
-    order: -1;
-  }
-  .catalog-head h1[data-v-e16eb167] {
-    font-size: 1.375rem;
-  }
-  .hardware-body[data-v-e16eb167] {
-    gap: 14px;
-  }
-  .line-action[data-v-e16eb167] {
-    flex-wrap: wrap;
-  }
-  .line-specs[data-v-e16eb167] {
-    gap: 8px;
-  }
-  .line-specs > div[data-v-e16eb167] {
-    gap: 6px;
-  }
-  .line-specs strong[data-v-e16eb167] {
-    font-size: 0.875rem;
-  }
-  .catalog-state[data-v-e16eb167] {
-    padding: 42px 14px;
-  }
-}
diff --git a/app/assets/styles/entry.Cs9kvuGi.css b/app/assets/styles/entry.Cs9kvuGi.css
index 31ba733..a3c55aa 100644
--- a/app/assets/styles/entry.Cs9kvuGi.css
+++ b/app/assets/styles/entry.Cs9kvuGi.css
@@ -1515,22 +1515,25 @@ video {
 }
 .config-summary {
   flex-direction: column;
-  gap: 10px;
+  gap: 7px;
   margin: 0;
   display: flex;
 }
 .config-summary-row {
-  grid-template-columns: 68px minmax(0, 1fr);
+  grid-template-columns: auto minmax(0, 1fr);
   align-items: baseline;
   gap: 12px;
-  font-size: 1rem;
+  font-size: 0.9375rem;
   line-height: 1.429rem;
   display: grid;
 }
 .config-summary-row dt {
   min-width: 0;
+  max-width: 7em;
   color: var(--p-text-muted-color);
-  overflow-wrap: anywhere;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .config-summary-row dd {
   text-align: right;
@@ -1719,9 +1722,32 @@ video {
 }
 /* 视口条件 (width>=1024px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width>=1024px) {
+  /* 汇总栏高度限制在视口内，配置清单内部滚动，价格与购买按钮始终可见。 */
   .config-summary-wrap {
     position: sticky;
     top: calc(var(--console-top-offset, 56px) + 20px);
+    max-height: calc(100vh - var(--console-top-offset, 56px) - 40px);
+    flex-direction: column;
+    display: flex;
+  }
+  .config-summary-wrap > .config-column-title {
+    flex: none;
+  }
+  .config-page .config-summary-wrap > .config-checkout {
+    flex-direction: column;
+    min-height: 0;
+    display: flex;
+  }
+  .config-summary-wrap .config-checkout > * {
+    flex: none;
+  }
+  .config-summary-wrap .config-checkout > .config-summary {
+    flex: 0 1 auto;
+    min-height: 72px;
+    margin-right: -6px;
+    padding-right: 6px;
+    overflow-y: auto;
+    scrollbar-width: thin;
   }
 }
 /* 视口条件 (width<1200px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
diff --git a/app/assets/styles/products.CrccEo2m.css b/app/assets/styles/products.CrccEo2m.css
index a16cb33..d733330 100644
--- a/app/assets/styles/products.CrccEo2m.css
+++ b/app/assets/styles/products.CrccEo2m.css
@@ -225,6 +225,7 @@
   color: var(--p-primary-color);
   border-radius: var(--radius-md);
   flex-shrink: 0;
+  align-self: center;
   place-items: center;
   font-size: 1.375rem;
   display: grid;
@@ -446,3 +447,79 @@ button[data-v-a6c63d86]:focus-visible {
     flex-wrap: wrap;
   }
 }
+/* 分类导航：一级为下划线标签页，二级为小号胶囊按钮，徽标弱化为辅助文字；分类区不再单独成卡片。 */
+.catalog-categories[data-v-a6c63d86] {
+  background: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+}
+.catalog-categories h2[data-v-a6c63d86] {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  position: absolute;
+  overflow: hidden;
+}
+.category-options:not(.secondary-categories)[data-v-a6c63d86] {
+  border-bottom: 1px solid var(--p-content-border-color);
+  flex-wrap: nowrap;
+  gap: 2px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.category-options:not(.secondary-categories) button[data-v-a6c63d86] {
+  color: var(--p-text-muted-color);
+  white-space: nowrap;
+  background: none;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  flex: none;
+  margin-bottom: -1px;
+  padding: 6px 12px 8px;
+  font-size: 0.9375rem;
+}
+.category-options:not(.secondary-categories) button[data-v-a6c63d86]:hover {
+  color: var(--p-text-color);
+}
+.category-options:not(.secondary-categories) button.active[data-v-a6c63d86] {
+  border-bottom-color: var(--p-primary-color);
+  color: var(--p-primary-color);
+  background: none;
+  font-weight: 500;
+}
+.category-options.secondary-categories[data-v-a6c63d86] {
+  border-top: 0;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 0;
+}
+.category-options.secondary-categories button[data-v-a6c63d86] {
+  min-height: 34px;
+  padding: 5px 12px;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+.category-options.secondary-categories button[data-v-a6c63d86]:hover {
+  color: var(--p-text-color);
+}
+.category-options.secondary-categories button.active[data-v-a6c63d86] {
+  box-shadow: inset 0 0 0 1px var(--p-primary-color);
+  color: var(--p-highlight-color);
+  font-weight: 500;
+}
+.category-options[data-v-a6c63d86] .product-group-badge {
+  color: inherit;
+  opacity: 0.6;
+  background: none;
+  border: 0;
+  padding: 0;
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+.category-options[data-v-a6c63d86] .product-group-label {
+  gap: 2px 6px;
+}
diff --git a/app/components/config/CloudProductPicker.vue b/app/components/config/CloudProductPicker.vue
index 8a36c11..f6e0f36 100644
--- a/app/components/config/CloudProductPicker.vue
+++ b/app/components/config/CloudProductPicker.vue
@@ -1,453 +1,407 @@
-<script>
+<script setup>
 /**
  * 云商品分组与分页选择器：groups/products/库存文案由父级提供，不直接请求接口。
- * 分组、商品、重试和分页分别发出意图事件；disabled 将购买提交期间的选择锁定。
+ * 分组按名称归入地区标签页；分组、商品、重试和分页分别发出意图事件；disabled 将购买提交期间的选择锁定。
  */
-import "~/assets/styles/ProductGroupLabel.B1kWpFA-.css";
-import "~/assets/styles/CloudProductPicker.CAm9rmUl.css";
-import { toDisplayString } from "vue";
-import { renderList } from "vue";
-import { useId } from "vue";
-import { normalizeClass } from "vue";
-import { createBlock } from "vue";
-import { withCtx } from "vue";
-import { createCommentVNode } from "vue";
-import { createElementBlock } from "vue";
-import { Fragment } from "vue";
-import { createElementVNode } from "vue";
-import { createTextVNode } from "vue";
-import { unref } from "vue";
-import { defineComponent } from "vue";
-import { createVNode } from "vue";
-import { openBlock } from "vue";
+import { computed, ref, useId, watch } from "vue";
 import { NuxtLink } from "#components";
-import button from "openvue/button";
-import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
-import message from "openvue/message";
-import { n as product_name_n } from "~/lib/product-name.js";
-import paginator from "openvue/paginator";
-import skeleton from "openvue/skeleton";
-import ProductGroupLabel from "~/components/ProductGroupLabel.vue";
-var C = {
-    class: `cloud-product-picker`,
-  },
-  w = [`aria-labelledby`],
-  T = [`id`],
-  E = {
-    class: `zone-options`,
-    role: `group`,
-    "aria-label": `产品专区`,
-  },
-  D = [`aria-pressed`, `disabled`, `onClick`],
-  O = {
-    key: 2,
-    class: `catalog-empty`,
-  },
-  k = [`aria-labelledby`],
-  A = [`id`],
-  j = {
-    key: 2,
-    class: `catalog-empty`,
-  },
-  M = {
-    key: 3,
-    class: `product-options`,
-    role: `group`,
-    "aria-label": `选择云服务器产品`,
-  },
-  N = [`aria-pressed`, `disabled`, `onClick`],
-  P = {
-    key: 0,
-  },
-  F = {
-    key: 1,
-  },
-  I = Object.assign(
-    _plugin_vue_export_helper_t(
-      defineComponent({
-        __name: `CloudProductPicker`,
-        props: {
-          groups: {},
-          activeGroup: {},
-          products: {},
-          selectedId: {},
-          loading: {
-            type: Boolean,
-          },
-          productLoading: {
-            type: Boolean,
-          },
-          error: {},
-          errorSource: {},
-          total: {},
-          page: {},
-          disabled: {
-            type: Boolean,
-          },
-          soldOut: {
-            type: Function,
-          },
-          stockLabel: {
-            type: Function,
-          },
-        },
-        emits: [
-          `choose-group`,
-          `choose-product`,
-          `retry-groups`,
-          `retry-products`,
-          `paginate`,
-        ],
-        setup(f, { emit: _ }) {
-          let I = _,
-            L = useId();
-          return (n, _) => {
-            let R = skeleton,
-              z = button,
-              B = message,
-              V = ProductGroupLabel,
-              H = NuxtLink,
-              U = paginator;
-            return (
-              openBlock(),
-              createElementBlock(`div`, C, [
-                createElementVNode(
-                  `section`,
-                  {
-                    class: `selection-section`,
-                    "aria-labelledby": `${unref(L)}-lines-title`,
-                  },
-                  [
-                    createElementVNode(
-                      `h3`,
-                      {
-                        id: `${unref(L)}-lines-title`,
-                      },
-                      `选择线路`,
-                      8,
-                      T,
-                    ),
-                    f.loading
-                      ? (openBlock(),
-                        createBlock(R, {
-                          key: 0,
-                          height: `110px`,
-                        }))
-                      : (openBlock(),
-                        createElementBlock(
-                          Fragment,
-                          {
-                            key: 1,
-                          },
-                          [
-                            f.error && f.errorSource === `groups`
-                              ? (openBlock(),
-                                createBlock(
-                                  B,
-                                  {
-                                    key: 0,
-                                    severity: `error`,
-                                    closable: !1,
-                                  },
-                                  {
-                                    default: withCtx(() => [
-                                      createTextVNode(
-                                        toDisplayString(f.error),
-                                        1,
-                                      ),
-                                      createVNode(
-                                        z,
-                                        {
-                                          label: `重新加载线路`,
-                                          severity: `secondary`,
-                                          text: ``,
-                                          disabled: f.disabled,
-                                          onClick: (_[0] ||= (e) =>
-                                            I(`retry-groups`)),
-                                        },
-                                        null,
-                                        8,
-                                        [`disabled`],
-                                      ),
-                                    ]),
-                                    _: 1,
-                                  },
-                                ))
-                              : f.groups.length
-                                ? (openBlock(),
-                                  createElementBlock(
-                                    Fragment,
-                                    {
-                                      key: 1,
-                                    },
-                                    [
-                                      (_[3] ||= createElementVNode(
-                                        `div`,
-                                        {
-                                          class: `selection-label`,
-                                        },
-                                        `产品专区`,
-                                        -1,
-                                      )),
-                                      createElementVNode(`div`, E, [
-                                        (openBlock(!0),
-                                        createElementBlock(
-                                          Fragment,
-                                          null,
-                                          renderList(
-                                            f.groups,
-                                            (e) => (
-                                              openBlock(),
-                                              createElementBlock(
-                                                `button`,
-                                                {
-                                                  key: e.id,
-                                                  type: `button`,
-                                                  class: normalizeClass([
-                                                    `zone-option`,
-                                                    {
-                                                      active:
-                                                        f.activeGroup === e.id,
-                                                    },
-                                                  ]),
-                                                  "aria-pressed":
-                                                    f.activeGroup === e.id,
-                                                  disabled: f.disabled,
-                                                  onClick: (t) =>
-                                                    I(`choose-group`, e.id),
-                                                },
-                                                [
-                                                  createVNode(
-                                                    V,
-                                                    {
-                                                      name: e.name,
-                                                    },
-                                                    null,
-                                                    8,
-                                                    [`name`],
-                                                  ),
-                                                ],
-                                                10,
-                                                D,
-                                              )
-                                            ),
-                                          ),
-                                          128,
-                                        )),
-                                      ]),
-                                    ],
-                                    64,
-                                  ))
-                                : (openBlock(),
-                                  createElementBlock(`div`, O, [
-                                    (_[5] ||= createElementVNode(
-                                      `i`,
-                                      {
-                                        class: `pi pi-box`,
-                                        "aria-hidden": `true`,
-                                      },
-                                      null,
-                                      -1,
-                                    )),
-                                    (_[6] ||= createElementVNode(
-                                      `p`,
-                                      null,
-                                      `暂未提供可选的云服务器线路`,
-                                      -1,
-                                    )),
-                                    createVNode(
-                                      H,
-                                      {
-                                        to: `/products`,
-                                      },
-                                      {
-                                        default: withCtx(() => [
-                                          ...(_[4] ||= [
-                                            createTextVNode(`浏览产品`, -1),
-                                          ]),
-                                        ]),
-                                        _: 1,
-                                      },
-                                    ),
-                                  ])),
-                          ],
-                          64,
-                        )),
-                  ],
-                  8,
-                  w,
-                ),
-                f.groups.length
-                  ? (openBlock(),
-                    createElementBlock(
-                      `section`,
-                      {
-                        key: 0,
-                        class: `selection-section`,
-                        "aria-labelledby": `${unref(L)}-products-title`,
-                      },
-                      [
-                        createElementVNode(
-                          `h3`,
-                          {
-                            id: `${unref(L)}-products-title`,
-                            class: `products-title`,
-                          },
-                          `产品`,
-                          8,
-                          A,
-                        ),
-                        f.productLoading && !f.products.length
-                          ? (openBlock(),
-                            createBlock(R, {
-                              key: 0,
-                              height: `110px`,
-                            }))
-                          : f.error && f.errorSource === `products`
-                            ? (openBlock(),
-                              createBlock(
-                                B,
-                                {
-                                  key: 1,
-                                  severity: `error`,
-                                  closable: !1,
-                                },
-                                {
-                                  default: withCtx(() => [
-                                    createTextVNode(
-                                      toDisplayString(f.error),
-                                      1,
-                                    ),
-                                    createVNode(
-                                      z,
-                                      {
-                                        label: `重新加载商品`,
-                                        severity: `secondary`,
-                                        text: ``,
-                                        disabled: f.disabled,
-                                        onClick: (_[1] ||= (e) =>
-                                          I(`retry-products`)),
-                                      },
-                                      null,
-                                      8,
-                                      [`disabled`],
-                                    ),
-                                  ]),
-                                  _: 1,
-                                },
-                              ))
-                            : !f.products.length && !f.error
-                              ? (openBlock(),
-                                createElementBlock(`div`, j, [
-                                  ...(_[7] ||= [
-                                    createElementVNode(
-                                      `p`,
-                                      null,
-                                      `该专区暂无可售产品`,
-                                      -1,
-                                    ),
-                                  ]),
-                                ]))
-                              : (openBlock(),
-                                createElementBlock(`div`, M, [
-                                  (openBlock(!0),
-                                  createElementBlock(
-                                    Fragment,
-                                    null,
-                                    renderList(
-                                      f.products,
-                                      (t) => (
-                                        openBlock(),
-                                        createElementBlock(
-                                          `button`,
-                                          {
-                                            key: t.id,
-                                            type: `button`,
-                                            class: normalizeClass([
-                                              `product-option`,
-                                              {
-                                                active: f.selectedId === t.id,
-                                              },
-                                            ]),
-                                            "aria-pressed":
-                                              f.selectedId === t.id,
-                                            disabled:
-                                              f.disabled || f.soldOut(t),
-                                            onClick: (e) =>
-                                              I(`choose-product`, t.id),
-                                          },
-                                          [
-                                            createElementVNode(
-                                              `strong`,
-                                              null,
-                                              toDisplayString(
-                                                unref(product_name_n)(t.name),
-                                              ),
-                                              1,
-                                            ),
-                                            f.soldOut(t)
-                                              ? (openBlock(),
-                                                createElementBlock(
-                                                  `span`,
-                                                  P,
-                                                  toDisplayString(
-                                                    f.stockLabel(t),
-                                                  ),
-                                                  1,
-                                                ))
-                                              : (openBlock(),
-                                                createElementBlock(
-                                                  `span`,
-                                                  F,
-                                                  toDisplayString(
-                                                    f.selectedId === t.id
-                                                      ? `当前配置`
-                                                      : `查看可选配置`,
-                                                  ),
-                                                  1,
-                                                )),
-                                          ],
-                                          10,
-                                          N,
-                                        )
-                                      ),
-                                    ),
-                                    128,
-                                  )),
-                                ])),
-                        f.total > 24
-                          ? (openBlock(),
-                            createBlock(
-                              U,
-                              {
-                                key: 4,
-                                first: (f.page - 1) * 24,
-                                rows: 24,
-                                totalRecords: f.total,
-                                disabled: f.disabled,
-                                onPage: (_[2] ||= (e) => I(`paginate`, e)),
-                              },
-                              null,
-                              8,
-                              [`first`, `totalRecords`, `disabled`],
-                            ))
-                          : createCommentVNode(``, !0),
-                      ],
-                      8,
-                      k,
-                    ))
-                  : createCommentVNode(``, !0),
-              ])
-            );
-          };
-        },
-      }),
-      [[`__scopeId`, `data-v-a438862d`]],
-    ),
-    {
-      __name: `CloudProductPicker`,
-    },
-  );
-export {};
-export default I;
+import Button from "openvue/button";
+import Message from "openvue/message";
+import Paginator from "openvue/paginator";
+import Skeleton from "openvue/skeleton";
+import ProductGroupLabel, {
+  n as parseGroupLabel,
+} from "~/components/ProductGroupLabel.vue";
+import { n as displayProductName } from "~/lib/product-name.js";
+
+const props = defineProps({
+  groups: { type: Array, default: () => [] },
+  activeGroup: {},
+  products: { type: Array, default: () => [] },
+  selectedId: {},
+  loading: Boolean,
+  productLoading: Boolean,
+  error: {},
+  errorSource: {},
+  total: {},
+  page: {},
+  disabled: Boolean,
+  soldOut: Function,
+  stockLabel: Function,
+});
+const emit = defineEmits([
+  "choose-group",
+  "choose-product",
+  "retry-groups",
+  "retry-products",
+  "paginate",
+]);
+const id = useId();
+
+// 按名称关键字归类；港澳台与海外优先匹配，避免“香港BGP”之类被省份规则误判。
+const REGIONS = [
+  [
+    "华东",
+    /上海|江苏|浙江|安徽|福建|江西|山东|华东|宿迁|金华|宁波|温州|绍兴|镇江|盐城|扬州|常州|无锡|徐州|泉州|厦门|福州|芜湖|九江|济南|杭州|南京|苏州/,
+  ],
+  ["华南", /广东|广西|海南|华南|深圳|广州|佛山|东莞|海口|南宁/],
+  ["华中", /湖北|湖南|河南|华中|襄阳|十堰|武汉|郑州|新乡|长沙/],
+  ["华北", /北京|天津|河北|山西|内蒙|华北|石家庄|太原/],
+  ["西南", /四川|重庆|云南|贵州|西藏|西南|成都|昆明|德阳|贵阳/],
+  ["西北", /陕西|甘肃|青海|宁夏|新疆|西北|西安|咸阳|兰州/],
+  ["东北", /辽宁|吉林|黑龙江|东北|沈阳|鞍山|大连|长春|哈尔滨/],
+];
+const ABROAD = [
+  ["港澳台", /香港|澳门|台湾/],
+  [
+    "海外",
+    /美国|日本|韩国|新加坡|越南|马来|泰国|菲律宾|印尼|印度|德国|英国|法国|荷兰|俄罗斯|欧洲|洛杉矶|硅谷|东京|首尔|海外/,
+  ],
+];
+const REGION_ORDER = [...REGIONS, ...ABROAD]
+  .map(([name]) => name)
+  .concat("其他");
+
+function regionOf(group) {
+  const name = parseGroupLabel(group.name).name;
+  for (const [region, pattern] of [...ABROAD, ...REGIONS])
+    if (pattern.test(name)) return region;
+  return "其他";
+}
+
+const regions = computed(() => {
+  const buckets = new Map();
+  for (const group of props.groups) {
+    const region = regionOf(group);
+    if (!buckets.has(region)) buckets.set(region, []);
+    buckets.get(region).push(group);
+  }
+  return REGION_ORDER.filter((name) => buckets.has(name)).map((name) => ({
+    name,
+    groups: buckets.get(name),
+  }));
+});
+const activeGroupRegion = computed(() => {
+  const group = props.groups.find((g) => g.id === props.activeGroup);
+  return group ? regionOf(group) : regions.value[0]?.name;
+});
+const chosenRegion = ref(null);
+watch(
+  () => props.activeGroup,
+  () => (chosenRegion.value = null),
+);
+const currentRegion = computed(
+  () => chosenRegion.value ?? activeGroupRegion.value ?? "all",
+);
+const visibleGroups = computed(() =>
+  currentRegion.value === "all"
+    ? props.groups
+    : (regions.value.find((r) => r.name === currentRegion.value)?.groups ??
+      props.groups),
+);
+// 同一分组下的商品名称通常共享“地区 | 运营商（”前缀，只显示差异部分，完整名称放在 title 中。
+const productLabels = computed(() => {
+  const names = props.products.map((p) => displayProductName(p.name));
+  const plain = { labels: names };
+  if (names.length < 2) return plain;
+  let prefix = names[0];
+  for (const name of names)
+    while (!name.startsWith(prefix)) prefix = prefix.slice(0, -1);
+  const boundary = prefix.match(/^.*[（(\s|｜·\-_/]/);
+  prefix = boundary ? boundary[0] : "";
+  if (prefix.length < 2 || names.some((n) => n.length <= prefix.length))
+    return plain;
+  const opensParen = /[（(]$/.test(prefix);
+  return {
+    labels: names.map((name) => {
+      const rest = name.slice(prefix.length).trim();
+      return opensParen ? rest.replace(/[）)]$/, "") : rest;
+    }),
+  };
+});
 </script>
+
+<template>
+  <section class="cloud-product-picker" :aria-labelledby="`${id}-title`">
+    <h2 :id="`${id}-title`" class="section-title">选择产品</h2>
+
+    <div class="picker-row">
+      <span :id="`${id}-lines-title`" class="picker-label">线路</span>
+      <div class="picker-control">
+        <Skeleton v-if="loading" height="88px" />
+        <Message
+          v-else-if="error && errorSource === 'groups'"
+          severity="error"
+          :closable="false"
+        >
+          {{ error }}
+          <Button
+            label="重新加载线路"
+            severity="secondary"
+            text
+            :disabled="disabled"
+            @click="emit('retry-groups')"
+          />
+        </Message>
+        <template v-else-if="groups.length">
+          <div
+            v-if="regions.length > 1"
+            class="choice-tabs"
+            role="group"
+            aria-label="地区"
+          >
+            <button
+              v-for="region in regions"
+              :key="region.name"
+              type="button"
+              class="choice-tab"
+              :class="{ active: currentRegion === region.name }"
+              :aria-pressed="currentRegion === region.name"
+              @click="chosenRegion = region.name"
+            >
+              {{ region.name }}<small>{{ region.groups.length }}</small>
+            </button>
+            <button
+              type="button"
+              class="choice-tab"
+              :class="{ active: currentRegion === 'all' }"
+              :aria-pressed="currentRegion === 'all'"
+              @click="chosenRegion = 'all'"
+            >
+              全部<small>{{ groups.length }}</small>
+            </button>
+          </div>
+          <div
+            class="choice-chips"
+            role="group"
+            :aria-labelledby="`${id}-lines-title`"
+          >
+            <button
+              v-for="group in visibleGroups"
+              :key="group.id"
+              type="button"
+              class="choice-chip"
+              :class="{ active: activeGroup === group.id }"
+              :aria-pressed="activeGroup === group.id"
+              :disabled="disabled"
+              @click="emit('choose-group', group.id)"
+            >
+              <ProductGroupLabel :name="group.name" />
+            </button>
+          </div>
+        </template>
+        <div v-else class="catalog-empty">
+          <i class="pi pi-box" aria-hidden="true" />
+          <p>暂未提供可选的云服务器线路</p>
+          <NuxtLink to="/products">浏览产品</NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="groups.length" class="picker-row">
+      <span :id="`${id}-products-title`" class="picker-label">型号</span>
+      <div class="picker-control">
+        <Skeleton v-if="productLoading && !products.length" height="34px" />
+        <Message
+          v-else-if="error && errorSource === 'products'"
+          severity="error"
+          :closable="false"
+        >
+          {{ error }}
+          <Button
+            label="重新加载商品"
+            severity="secondary"
+            text
+            :disabled="disabled"
+            @click="emit('retry-products')"
+          />
+        </Message>
+        <p v-else-if="!products.length && !error" class="picker-empty">
+          该专区暂无可售产品
+        </p>
+        <div
+          v-else
+          class="choice-chips"
+          role="group"
+          :aria-labelledby="`${id}-products-title`"
+        >
+          <button
+            v-for="(product, index) in products"
+            :key="product.id"
+            type="button"
+            class="choice-chip"
+            :class="{ active: selectedId === product.id }"
+            :aria-pressed="selectedId === product.id"
+            :title="displayProductName(product.name)"
+            :disabled="disabled || soldOut(product)"
+            @click="emit('choose-product', product.id)"
+          >
+            {{ productLabels.labels[index] }}
+            <small v-if="soldOut(product)">{{ stockLabel(product) }}</small>
+          </button>
+        </div>
+        <Paginator
+          v-if="total > 24"
+          :first="(page - 1) * 24"
+          :rows="24"
+          :total-records="total"
+          :disabled="disabled"
+          @page="emit('paginate', $event)"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.cloud-product-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.cloud-product-picker > .section-title {
+  margin-bottom: 6px;
+}
+.picker-row {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr);
+  align-items: start;
+  gap: 8px 16px;
+}
+.picker-label {
+  color: var(--p-text-muted-color);
+  font-size: 0.9375rem;
+  line-height: 34px;
+}
+.picker-control {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+.picker-empty {
+  margin: 0;
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+  line-height: 34px;
+}
+
+/* 统一选择控件：与物理服务器筛选、商品目录分类使用同一套标签页与胶囊按钮规格。 */
+.choice-tabs {
+  display: flex;
+  gap: 2px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  border-bottom: 1px solid var(--p-content-border-color);
+}
+.choice-tabs::-webkit-scrollbar {
+  display: none;
+}
+.choice-tab {
+  flex: none;
+  display: inline-flex;
+  align-items: baseline;
+  gap: 4px;
+  margin-bottom: -1px;
+  padding: 6px 12px 8px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--p-text-muted-color);
+  font: inherit;
+  font-size: 0.9375rem;
+  cursor: pointer;
+}
+.choice-tab small {
+  font-size: 0.75rem;
+  opacity: 0.6;
+}
+.choice-tab:hover {
+  color: var(--p-text-color);
+}
+.choice-tab.active {
+  border-bottom-color: var(--p-primary-color);
+  color: var(--p-primary-color);
+  font-weight: 500;
+}
+.choice-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.choice-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  min-height: 34px;
+  padding: 5px 12px;
+  border: 1px solid var(--p-content-border-color);
+  border-radius: var(--radius-md);
+  background: var(--p-content-background);
+  color: var(--p-text-color);
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  text-align: left;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+.choice-chip small {
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+}
+.choice-chip:hover:not(:disabled) {
+  border-color: var(--p-primary-color);
+}
+.choice-chip.active {
+  border-color: var(--p-primary-color);
+  box-shadow: inset 0 0 0 1px var(--p-primary-color);
+  background: var(--p-highlight-background);
+  color: var(--p-highlight-color);
+  font-weight: 500;
+}
+.choice-chip:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.choice-chip:focus-visible,
+.choice-tab:focus-visible {
+  outline: 2px solid var(--p-primary-color);
+  outline-offset: 2px;
+}
+.choice-chip :deep(.product-group-badge) {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  opacity: 0.6;
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+.catalog-empty {
+  padding: 28px;
+  border: 1px solid var(--p-content-border-color);
+  border-radius: var(--radius-md);
+  background: var(--p-content-background);
+  color: var(--p-text-muted-color);
+  text-align: center;
+}
+.catalog-empty i {
+  font-size: 1.75rem;
+}
+.catalog-empty a {
+  color: var(--p-primary-color);
+  text-decoration: none;
+}
+@media (width < 640px) {
+  .picker-row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 6px;
+  }
+  .picker-label {
+    line-height: 1.5;
+  }
+}
+</style>
diff --git a/app/components/config/KkyEcsConfig.vue b/app/components/config/KkyEcsConfig.vue
index e96b3dc..8256a8d 100644
--- a/app/components/config/KkyEcsConfig.vue
+++ b/app/components/config/KkyEcsConfig.vue
@@ -596,7 +596,7 @@ var N = {
   },
   he = {
     key: 0,
-    class: `panel`,
+    class: `panel storage-panel`,
   },
   ge = {
     key: 0,
@@ -648,6 +648,9 @@ var N = {
   Oe = {
     class: `form-row`,
   },
+  Pe1 = {
+    class: `form-inline`,
+  },
   ke = Object.assign(
     _plugin_vue_export_helper_t(
       defineComponent({
@@ -1018,124 +1021,131 @@ var N = {
                                   `基础配置`,
                                   -1,
                                 )),
-                                createElementVNode(`div`, L, [
-                                  (r[18] ||= createElementVNode(
-                                    `label`,
-                                    null,
-                                    `区域`,
-                                    -1,
-                                  )),
-                                  createVNode(
-                                    b,
-                                    {
-                                      label: `区域`,
-                                      disabled: unref(W),
-                                      modelValue: unref(A).line_id,
-                                      "onUpdate:modelValue": (r[1] ||= (e) =>
-                                        (unref(A).line_id = e)),
-                                      options: (unref(D).line_list || []).map(
-                                        (e) => ({
+                                createElementVNode(`div`, Pe1, [
+                                  createElementVNode(`div`, L, [
+                                    (r[18] ||= createElementVNode(
+                                      `label`,
+                                      null,
+                                      `区域`,
+                                      -1,
+                                    )),
+                                    createVNode(
+                                      b,
+                                      {
+                                        label: `区域`,
+                                        compact: ``,
+                                        disabled: unref(W),
+                                        modelValue: unref(A).line_id,
+                                        "onUpdate:modelValue": (r[1] ||= (e) =>
+                                          (unref(A).line_id = e)),
+                                        options: (unref(D).line_list || []).map(
+                                          (e) => ({
+                                            label: e.name,
+                                            value: e.id,
+                                          }),
+                                        ),
+                                        onChange: Xe,
+                                      },
+                                      null,
+                                      8,
+                                      [`disabled`, `modelValue`, `options`],
+                                    ),
+                                  ]),
+                                  createElementVNode(`div`, R, [
+                                    (r[19] ||= createElementVNode(
+                                      `label`,
+                                      null,
+                                      `线路`,
+                                      -1,
+                                    )),
+                                    createVNode(
+                                      b,
+                                      {
+                                        label: `线路`,
+                                        compact: ``,
+                                        disabled: unref(W),
+                                        modelValue: unref(A).network_id,
+                                        "onUpdate:modelValue": (r[2] ||= (e) =>
+                                          (unref(A).network_id = e)),
+                                        options: (
+                                          unref(D).network_list || []
+                                        ).map((e) => ({
                                           label: e.name,
                                           value: e.id,
-                                        }),
-                                      ),
-                                      onChange: Xe,
-                                    },
-                                    null,
-                                    8,
-                                    [`disabled`, `modelValue`, `options`],
-                                  ),
+                                        })),
+                                        onChange: Qe,
+                                      },
+                                      null,
+                                      8,
+                                      [`disabled`, `modelValue`, `options`],
+                                    ),
+                                  ]),
                                 ]),
-                                createElementVNode(`div`, R, [
-                                  (r[19] ||= createElementVNode(
-                                    `label`,
-                                    null,
-                                    `线路`,
-                                    -1,
-                                  )),
-                                  createVNode(
-                                    b,
-                                    {
-                                      label: `线路`,
-                                      disabled: unref(W),
-                                      modelValue: unref(A).network_id,
-                                      "onUpdate:modelValue": (r[2] ||= (e) =>
-                                        (unref(A).network_id = e)),
-                                      options: (
-                                        unref(D).network_list || []
-                                      ).map((e) => ({
-                                        label: e.name,
-                                        value: e.id,
-                                      })),
-                                      onChange: Qe,
-                                    },
-                                    null,
-                                    8,
-                                    [`disabled`, `modelValue`, `options`],
-                                  ),
-                                ]),
-                                createElementVNode(`div`, z, [
-                                  (r[20] ||= createElementVNode(
-                                    `label`,
-                                    null,
-                                    `CPU`,
-                                    -1,
-                                  )),
-                                  createVNode(
-                                    b,
-                                    {
-                                      label: `CPU`,
-                                      disabled: unref(W),
-                                      "model-value":
-                                        Number(unref(A).cpu_num) || null,
-                                      options: unref(ke).map((e) => ({
-                                        label: `${e} 核`,
-                                        value: e,
-                                      })),
-                                      compact: ``,
-                                      "onUpdate:modelValue": unref(S).selectCpu,
-                                    },
-                                    null,
-                                    8,
-                                    [
-                                      `disabled`,
-                                      `model-value`,
-                                      `options`,
-                                      `onUpdate:modelValue`,
-                                    ],
-                                  ),
-                                ]),
-                                createElementVNode(`div`, me, [
-                                  (r[21] ||= createElementVNode(
-                                    `label`,
-                                    null,
-                                    `内存`,
-                                    -1,
-                                  )),
-                                  createVNode(
-                                    b,
-                                    {
-                                      label: `内存`,
-                                      disabled: unref(W),
-                                      "model-value":
-                                        Number(unref(A).memory) || null,
-                                      options: unref(Ae).map((e) => ({
-                                        label: `${e} GB`,
-                                        value: e,
-                                      })),
-                                      compact: ``,
-                                      "onUpdate:modelValue":
-                                        unref(S).selectMemory,
-                                    },
-                                    null,
-                                    8,
-                                    [
-                                      `disabled`,
-                                      `model-value`,
-                                      `options`,
-                                      `onUpdate:modelValue`,
-                                    ],
-                                  ),
+                                createElementVNode(`div`, Pe1, [
+                                  createElementVNode(`div`, z, [
+                                    (r[20] ||= createElementVNode(
+                                      `label`,
+                                      null,
+                                      `CPU`,
+                                      -1,
+                                    )),
+                                    createVNode(
+                                      b,
+                                      {
+                                        label: `CPU`,
+                                        disabled: unref(W),
+                                        "model-value":
+                                          Number(unref(A).cpu_num) || null,
+                                        options: unref(ke).map((e) => ({
+                                          label: `${e} 核`,
+                                          value: e,
+                                        })),
+                                        compact: ``,
+                                        "onUpdate:modelValue":
+                                          unref(S).selectCpu,
+                                      },
+                                      null,
+                                      8,
+                                      [
+                                        `disabled`,
+                                        `model-value`,
+                                        `options`,
+                                        `onUpdate:modelValue`,
+                                      ],
+                                    ),
+                                  ]),
+                                  createElementVNode(`div`, me, [
+                                    (r[21] ||= createElementVNode(
+                                      `label`,
+                                      null,
+                                      `内存`,
+                                      -1,
+                                    )),
+                                    createVNode(
+                                      b,
+                                      {
+                                        label: `内存`,
+                                        disabled: unref(W),
+                                        "model-value":
+                                          Number(unref(A).memory) || null,
+                                        options: unref(Ae).map((e) => ({
+                                          label: `${e} GB`,
+                                          value: e,
+                                        })),
+                                        compact: ``,
+                                        "onUpdate:modelValue":
+                                          unref(S).selectMemory,
+                                      },
+                                      null,
+                                      8,
+                                      [
+                                        `disabled`,
+                                        `model-value`,
+                                        `options`,
+                                        `onUpdate:modelValue`,
+                                      ],
+                                    ),
+                                  ]),
                                 ]),
                               ]),
                               unref(X) || unref(H)
diff --git a/app/pages/products/cloud-server.vue b/app/pages/products/cloud-server.vue
index 096df8f..a14127c 100644
--- a/app/pages/products/cloud-server.vue
+++ b/app/pages/products/cloud-server.vue
@@ -15,7 +15,6 @@ import "~/assets/styles/PromoCodeField.qFEkB6Hm.css";
 import "~/assets/styles/ProductCustomFields.B2QMnPil.css";
 import "~/assets/styles/OsIcon.CAi4Iz2S.css";
 import "~/assets/styles/CommonConfig.Cfik-oMe.css";
-import "~/assets/styles/CloudProductPicker.CAm9rmUl.css";
 import "~/assets/styles/ProductGroupLabel.B1kWpFA-.css";
 import "~/assets/styles/PaymentDialog.BNFKQF1U.css";
 import "~/assets/styles/cloud-server.CcwlOXJ0.css";
@@ -42,6 +41,7 @@ import { unref } from "vue";
 import { defineComponent } from "vue";
 import { createVNode } from "vue";
 import { openBlock } from "vue";
+import { NuxtLink } from "#components";
 import { useRoute } from "#app";
 import { useRouter } from "#app";
 import { useHead } from "#app";
@@ -323,12 +323,17 @@ var ge = {
             return (
               openBlock(),
               createElementBlock(`div`, ge, [
-                (r[4] ||= createElementVNode(
-                  `h2`,
-                  null,
-                  `创建云服务器实例`,
-                  -1,
-                )),
+                createElementVNode(`header`, { class: `order-head` }, [
+                  createElementVNode(`h2`, null, `创建云服务器实例`),
+                  createVNode(
+                    NuxtLink,
+                    { to: `/products` },
+                    {
+                      default: withCtx(() => [createTextVNode(`查看全部产品`)]),
+                      _: 1,
+                    },
+                  ),
+                ]),
                 unref(D) && unref(B)
                   ? (openBlock(),
                     createBlock(
diff --git a/app/pages/products/dedicated-server/customize.vue b/app/pages/products/dedicated-server/customize.vue
index 8416647..3e25f57 100644
--- a/app/pages/products/dedicated-server/customize.vue
+++ b/app/pages/products/dedicated-server/customize.vue
@@ -3,7 +3,6 @@
  * 物理服务器定制入口：只接受有效商品 ID 且模块为 mf_dcim/remf_dcim，避免把其他类型商品交给物理服务器配置器。
  */
 import { definePageMeta } from "#imports";
-import "~/assets/styles/dedicated-server.CiJfMYtk.css";
 import "~/assets/styles/ConfigDiskCard.Dx9IqqQ_.css";
 import "~/assets/styles/PromoCodeField.qFEkB6Hm.css";
 import "~/assets/styles/ProductCustomFields.B2QMnPil.css";
diff --git a/app/pages/products/dedicated-server/index.vue b/app/pages/products/dedicated-server/index.vue
index c2f6309..4fd2dbf 100644
--- a/app/pages/products/dedicated-server/index.vue
+++ b/app/pages/products/dedicated-server/index.vue
@@ -1,1222 +1,1116 @@
-<script>
+<script setup>
 /**
- * 物理服务器选型：汇总可售物理商品、机型与地区线路，支持规格/价格筛选，选择线路后进入独立定制页。
+ * 物理服务器选型：汇总可售物理商品、机型与地区线路，支持规格/价格筛选与排序，展开机型后选择线路进入独立定制页。
  */
-import "~/assets/styles/dedicated-server.CiJfMYtk.css";
-import { toDisplayString } from "vue";
-import { renderList } from "vue";
-import { onMounted } from "vue";
-import { useId } from "vue";
-import { normalizeClass } from "vue";
-import { onBeforeUnmount } from "vue";
-import { createBlock } from "vue";
-import { ref } from "vue";
-import { withCtx } from "vue";
-import { createCommentVNode } from "vue";
-import { computed } from "vue";
-import { reactive } from "vue";
-import { createElementBlock } from "vue";
-import { Fragment } from "vue";
-import { createElementVNode } from "vue";
-import { createTextVNode } from "vue";
-import { unref } from "vue";
-import { defineComponent } from "vue";
-import { createVNode } from "vue";
-import { openBlock } from "vue";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  useId,
+} from "vue";
 import { NuxtLink } from "#components";
+import Button from "openvue/button";
+import InputNumber from "openvue/inputnumber";
+import Message from "openvue/message";
+import Select from "openvue/select";
+import Skeleton from "openvue/skeleton";
 import { useApi } from "~/lib/auth.js";
-import button from "openvue/button";
-import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
-import message from "openvue/message";
-import { n as product_name_n } from "~/lib/product-name.js";
-import inputnumber from "openvue/inputnumber";
-import tag from "openvue/tag";
-import skeleton from "openvue/skeleton";
+import { n as displayProductName } from "~/lib/product-name.js";
 import { productStock } from "~/lib/product-inventory.js";
 import { resourceOptionValue } from "~/lib/resource-option-value.js";
 import { productId } from "~/lib/product-id.js";
+
 // 只识别本地或资源模块映射到 mf_dcim 的物理商品；未知模块不强行套用配置器。
-function O(e) {
-  let t = e.module?.trim() || ``;
-  return t === `mf_dcim` || t === `remf_dcim`
-    ? t
-    : !t && e.res_module?.trim() === `mf_dcim`
-      ? `remf_dcim`
-      : void 0;
+function dcimModule(product) {
+  const module = product.module?.trim() || "";
+  if (module === "mf_dcim" || module === "remf_dcim") return module;
+  return !module && product.res_module?.trim() === "mf_dcim"
+    ? "remf_dcim"
+    : undefined;
 }
-// 封装选型数据、筛选和线路详情，列表请求与选中线路请求使用独立序号。
-function k() {
-  let e = useApi(),
-    t = ref(!0),
-    n = ref(``),
-    r = ref(``),
-    i = ref([]),
-    o = ref(``),
-    c = ref({}),
-    l = ref(!1),
-    f = ref(``),
-    p = reactive({
-      minPrice: null,
-      maxPrice: null,
-      region: ``,
-      line: ``,
-      cpu: ``,
-      memory: ``,
-      disk: ``,
-    }),
-    m = (e) => `${e.product.id}:${e.model.id}`,
-    h = computed(() => i.value.find((e) => m(e) === o.value)),
-    g = computed(() => ({
-      region: [
-        ...new Set(i.value.flatMap((e) => e.lines.map((e) => e.location))),
+
+const api = useApi();
+const fieldId = useId();
+const loading = ref(true);
+const error = ref("");
+const partialError = ref("");
+const entries = ref([]);
+const selectedKey = ref("");
+const lineDetails = ref({});
+const lineLoading = ref(false);
+const lineError = ref("");
+const moreFiltersOpen = ref(false);
+const sortBy = ref("default");
+const filters = reactive({
+  minPrice: null,
+  maxPrice: null,
+  region: "",
+  line: "",
+  cpu: "",
+  memory: "",
+  disk: "",
+});
+let listGeneration = 0;
+let lineGeneration = 0;
+let disposed = false;
+
+const sortOptions = [
+  { label: "默认排序", value: "default" },
+  { label: "价格从低到高", value: "price-asc" },
+  { label: "价格从高到低", value: "price-desc" },
+];
+const specFilters = [
+  { key: "cpu", label: "处理器" },
+  { key: "memory", label: "内存" },
+  { key: "disk", label: "硬盘" },
+];
+
+const keyOf = (entry) => `${entry.product.id}:${entry.model.id}`;
+const unique = (values) => [...new Set(values.filter(Boolean))];
+
+function priceOf(entry) {
+  const raw = entry.product.price;
+  if (raw === undefined || raw === null || String(raw).trim() === "")
+    return null;
+  const value = Number(raw);
+  return Number.isFinite(value) ? value : null;
+}
+
+const selected = computed(() =>
+  entries.value.find((entry) => keyOf(entry) === selectedKey.value),
+);
+const options = computed(() => ({
+  region: unique(
+    entries.value.flatMap((e) => e.lines.map((line) => line.location)),
+  ),
+  line: unique(entries.value.flatMap((e) => e.lines.map((line) => line.name))),
+  cpu: unique(entries.value.map((e) => e.model.cpu)),
+  memory: unique(entries.value.map((e) => e.model.memory)),
+  disk: unique(entries.value.map((e) => e.model.disk)),
+}));
+const selectOptions = computed(() =>
+  Object.fromEntries(
+    specFilters.map(({ key, label }) => [
+      key,
+      [
+        { label: `全部${label}`, value: "" },
+        ...options.value[key].map((value) => ({ label: value, value })),
       ],
-      line: [...new Set(i.value.flatMap((e) => e.lines.map((e) => e.name)))],
-      cpu: [...new Set(i.value.map((e) => e.model.cpu).filter(Boolean))],
-      memory: [...new Set(i.value.map((e) => e.model.memory).filter(Boolean))],
-      disk: [...new Set(i.value.map((e) => e.model.disk).filter(Boolean))],
-    })),
-    _ = computed(() =>
-      i.value.filter((e) => {
-        let t =
-          e.product.price === void 0 || e.product.price === ``
-            ? null
-            : Number(e.product.price);
-        return (
-          (p.minPrice === null ||
-            (t !== null && Number.isFinite(t) && t >= p.minPrice)) &&
-          (p.maxPrice === null ||
-            (t !== null && Number.isFinite(t) && t <= p.maxPrice)) &&
-          ((!p.region && !p.line) ||
-            e.lines.some(
-              (e) =>
-                (!p.region || e.location === p.region) &&
-                (!p.line || e.name === p.line),
-            )) &&
-          (!p.cpu || e.model.cpu === p.cpu) &&
-          (!p.memory || e.model.memory === p.memory) &&
-          (!p.disk || e.model.disk === p.disk)
-        );
-      }),
-    ),
-    v = computed(() =>
-      (h.value?.lines ?? []).filter(
-        (e) =>
-          (!p.region || e.location === p.region) &&
-          (!p.line || e.name === p.line),
-      ),
-    ),
-    y = 0,
-    b = 0,
-    S = !1;
-  onBeforeUnmount(() => {
-    ((S = !0), y++, b++);
-  });
-  // 只清除筛选草稿，不修改服务端商品。
-  function C() {
-    Object.assign(p, {
-      minPrice: null,
-      maxPrice: null,
-      region: ``,
-      line: ``,
-      cpu: ``,
-      memory: ``,
-      disk: ``,
-    });
-  }
-  // 商品库存与自动同步的机型库存都满足时才允许选购。
-  function w(e) {
-    const stock = productStock(e.product, e.model);
-    return stock === null || stock > 0;
-  }
-  // 分页收集商品后并行加载物理模块配置；单个商品失败保留其余可用项并提示部分加载失败。
-  async function T() {
-    let a = ++y;
-    (b++,
-      (o.value = ``),
-      (c.value = {}),
-      (t.value = !0),
-      (n.value = ``),
-      (r.value = ``));
-    try {
-      let t = [],
-        n = 1;
-      for (;;) {
-        let r = await e.get(`/product`, {
-          page: n,
-          limit: 50,
-        });
-        if (S || a !== y) return;
-        let i = r.list ?? [];
-        if (
-          (t.push(...i), !i.length || t.length >= Number(r.count ?? t.length))
-        )
-          break;
-        n++;
-      }
-      let o = t.flatMap((e) => {
-          let t = O(e);
-          return e.hidden !== 1 && productId(e.id) !== null && t
-            ? [
-                {
-                  product: {
-                    ...e,
-                    module: t,
-                  },
-                  module: t,
-                },
-              ]
-            : [];
-        }),
-        s = await Promise.allSettled(
-          o.map(async ({ product: t, module: n }) => ({
-            product: t,
-            page: await e.get(`/product/${t.id}/${n}/order_page`),
-          })),
-        );
-      if (S || a !== y) return;
-      ((i.value = s.flatMap((e) => {
-        if (e.status !== `fulfilled`) return [];
-        let { product: t, page: n } = e.value,
-          r = (n.data_center ?? []).flatMap((e) =>
-            (e.city ?? []).flatMap((t) =>
-              (t.area ?? []).flatMap((n) =>
-                (n.line ?? []).map((r) => ({
-                  ...r,
-                  location: [t.name, n.name].filter(Boolean).join(` / `),
-                  country: e.name,
-                })),
-              ),
-            ),
-          );
-        return (n.model_config ?? []).map((e) => ({
-          product: t,
-          model: e,
-          lines: r,
-        }));
-      })),
-        s.some((e) => e.status === `rejected`) &&
-          (r.value = `部分物理服务器配置暂时无法加载，请重试以获取完整列表。`));
-    } catch (e) {
-      !S &&
-        a === y &&
-        ((i.value = []),
-        (n.value = e instanceof Error ? e.message : `加载物理服务器商品失败`));
-    } finally {
-      !S && a === y && (t.value = !1);
-    }
-  }
-  // 按当前机型读取各线路详情，快速改选时只接纳最新选择的结果。
-  async function E(t) {
-    o.value = m(t);
-    let n = ++b;
-    ((c.value = {}), (f.value = ``), (l.value = !0));
-    let r = O(t.product) || `mf_dcim`,
-      i = await Promise.allSettled(
-        t.lines.map(async (n) => ({
-          id: n.id,
-          detail: await e.get(`/product/${t.product.id}/${r}/line/${n.id}`),
-        })),
-      );
-    if (!(S || n !== b)) {
-      for (let e of i)
-        e.status === `fulfilled` && (c.value[e.value.id] = e.value.detail);
-      (i.some((e) => e.status === `rejected`) &&
-        (f.value = `部分线路详情加载失败，可重试或进入配置页面重新加载。`),
-        (l.value = !1));
-    }
-  }
-  // 关闭机型选择并使尚未完成的线路请求失效。
-  function D() {
-    (b++, (o.value = ``), (c.value = {}), (l.value = !1), (f.value = ``));
-  }
-  return {
-    loading: t,
-    error: n,
-    partialError: r,
-    entries: i,
-    selected: h,
-    selectedKey: o,
-    lineDetails: c,
-    lineLoading: l,
-    lineError: f,
-    filters: p,
-    options: g,
-    filtered: _,
-    visibleLines: v,
-    keyOf: m,
-    inStock: w,
-    resetFilters: C,
-    load: T,
-    select: E,
-    closeSelection: D,
-  };
-}
-var te = {
-    class: `dedicated-catalog`,
-  },
-  ne = {
-    class: `catalog-head`,
-  },
-  re = {
-    class: `catalog-filters`,
-  },
-  ie = {
-    class: `filter-panel`,
-  },
-  ae = {
-    open: ``,
-  },
-  oe = {
-    class: `price-range`,
-  },
-  se = [`open`],
-  ce = {
-    class: `filter-options`,
-  },
-  le = [`aria-pressed`, `onClick`],
-  ue = [`aria-pressed`, `onClick`],
-  de = {
-    key: 0,
-    class: `filter-empty`,
-  },
-  fe = {
-    class: `catalog-products`,
-  },
-  A = {
-    key: 0,
-    class: `hardware-card`,
-  },
-  j = {
-    key: 1,
-    class: `catalog-state`,
-  },
-  M = {
-    class: `hardware-body`,
-  },
-  N = {
-    class: `hardware-spec`,
-  },
-  P = {
-    class: `hardware-spec`,
-  },
-  F = {
-    key: 0,
-  },
-  I = {
-    class: `hardware-buy`,
-  },
-  L = {
-    key: 0,
-  },
-  R = {
-    key: 0,
-  },
-  z = {
-    key: 1,
-  },
-  B = {
-    key: 2,
-  },
-  V = {
-    key: 1,
-    class: `catalog-state`,
-  },
-  pe = {
-    key: 0,
-    class: `catalog-lines`,
-    "aria-label": `可选线路`,
-  },
-  me = {
-    class: `line-heading`,
-  },
-  he = {
-    class: `line-panel`,
-  },
-  ge = {
-    class: `line-tags`,
-  },
-  _e = {
-    key: 1,
-    class: `line-specs`,
-  },
-  ve = {
-    class: `line-action`,
-  },
-  ye = {
-    key: 1,
-    class: `line-empty`,
-  },
-  H = _plugin_vue_export_helper_t(
-    defineComponent({
-      __name: `index`,
-      setup(a) {
-        let s = k(),
-          {
-            loading: u,
-            error: d,
-            partialError: _,
-            entries: x,
-            selected: C,
-            selectedKey: O,
-            lineDetails: H,
-            lineLoading: be,
-            lineError: U,
-            filters: W,
-            options: G,
-            filtered: K,
-            visibleLines: q,
-          } = s,
-          J = useId(),
-          Y = [
-            {
-              key: `region`,
-              label: `地区`,
-            },
-            {
-              key: `line`,
-              label: `线路`,
-            },
-            {
-              key: `cpu`,
-              label: `CPU`,
-            },
-            {
-              key: `memory`,
-              label: `内存`,
-            },
-            {
-              key: `disk`,
-              label: `硬盘`,
-            },
-          ];
-        // 只有明确有效的商品价格才显示金额，缺失时提示配置后确认。
-        function xe(e) {
-          return e !== void 0 && e.trim() !== `` && Number.isFinite(Number(e))
-            ? `￥ ${Number(e).toFixed(2)}`
-            : `价格待配置`;
-        }
-        // 定制链接携带当前商品、机型及所选线路 ID，最终仍由配置页加载并验证商品。
-        function Se(e) {
-          return `/products/dedicated-server/customize?id=${C.value?.product.id}&model_id=${C.value?.model.id}&line_id=${e}`;
-        }
-        return (
-          onMounted(s.load),
-          // 机型筛选卡、线路详情和定制入口共享当前选择；部分配置读取失败有单独反馈，不伪装成无库存。
-          (n, r) => {
-            let a = NuxtLink,
-              k = inputnumber,
-              X = button,
-              Z = skeleton,
-              Q = message,
-              $ = tag;
-            return (
-              openBlock(),
-              createElementBlock(`div`, te, [
-                createElementVNode(`header`, ne, [
-                  (r[9] ||= createElementVNode(`h1`, null, `物理服务器`, -1)),
-                  createVNode(
-                    a,
-                    {
-                      to: `/products`,
-                    },
-                    {
-                      default: withCtx(() => [
-                        ...(r[8] ||= [createTextVNode(`浏览产品`, -1)]),
-                      ]),
-                      _: 1,
-                    },
-                  ),
-                ]),
-                createElementVNode(
-                  `div`,
-                  {
-                    class: normalizeClass([
-                      `catalog-layout`,
-                      {
-                        "has-selection": unref(C),
-                      },
-                    ]),
-                  },
-                  [
-                    createElementVNode(`aside`, re, [
-                      (r[14] ||= createElementVNode(`h2`, null, `筛选`, -1)),
-                      createElementVNode(`div`, ie, [
-                        createElementVNode(`details`, ae, [
-                          (r[11] ||= createElementVNode(
-                            `summary`,
-                            null,
-                            [
-                              createTextVNode(`价格`),
-                              createElementVNode(`i`, {
-                                class: `pi pi-chevron-down`,
-                                "aria-hidden": `true`,
-                              }),
-                            ],
-                            -1,
-                          )),
-                          createElementVNode(`div`, oe, [
-                            createVNode(
-                              k,
-                              {
-                                modelValue: unref(W).minPrice,
-                                "onUpdate:modelValue": (r[0] ||= (e) =>
-                                  (unref(W).minPrice = e)),
-                                "input-id": `${unref(J)}-min-price`,
-                                "aria-label": `最低商品起价`,
-                                placeholder: `最低`,
-                                min: 0,
-                                "min-fraction-digits": 0,
-                                "max-fraction-digits": 2,
-                              },
-                              null,
-                              8,
-                              [`modelValue`, `input-id`],
-                            ),
-                            (r[10] ||= createElementVNode(
-                              `span`,
-                              null,
-                              `—`,
-                              -1,
-                            )),
-                            createVNode(
-                              k,
-                              {
-                                modelValue: unref(W).maxPrice,
-                                "onUpdate:modelValue": (r[1] ||= (e) =>
-                                  (unref(W).maxPrice = e)),
-                                "input-id": `${unref(J)}-max-price`,
-                                "aria-label": `最高商品起价`,
-                                placeholder: `最高`,
-                                min: 0,
-                                "max-fraction-digits": 2,
-                              },
-                              null,
-                              8,
-                              [`modelValue`, `input-id`],
-                            ),
-                          ]),
-                          (r[12] ||= createElementVNode(
-                            `small`,
-                            null,
-                            `按商品起价筛选，最终价格以所选配置为准`,
-                            -1,
-                          )),
-                        ]),
-                        (openBlock(),
-                        createElementBlock(
-                          Fragment,
-                          null,
-                          renderList(Y, (n, a) =>
-                            createElementVNode(
-                              `details`,
-                              {
-                                key: n.key,
-                                open: a < 2,
-                              },
-                              [
-                                createElementVNode(`summary`, null, [
-                                  createTextVNode(toDisplayString(n.label), 1),
-                                  (r[13] ||= createElementVNode(
-                                    `i`,
-                                    {
-                                      class: `pi pi-chevron-down`,
-                                      "aria-hidden": `true`,
-                                    },
-                                    null,
-                                    -1,
-                                  )),
-                                ]),
-                                createElementVNode(`div`, ce, [
-                                  createElementVNode(
-                                    `button`,
-                                    {
-                                      type: `button`,
-                                      class: normalizeClass({
-                                        active: !unref(W)[n.key],
-                                      }),
-                                      "aria-pressed": !unref(W)[n.key],
-                                      onClick: (e) => (unref(W)[n.key] = ``),
-                                    },
-                                    `全部`,
-                                    10,
-                                    le,
-                                  ),
-                                  (openBlock(!0),
-                                  createElementBlock(
-                                    Fragment,
-                                    null,
-                                    renderList(
-                                      unref(G)[n.key],
-                                      (t) => (
-                                        openBlock(),
-                                        createElementBlock(
-                                          `button`,
-                                          {
-                                            key: t,
-                                            type: `button`,
-                                            "aria-pressed":
-                                              unref(W)[n.key] === t,
-                                            class: normalizeClass({
-                                              active: unref(W)[n.key] === t,
-                                            }),
-                                            onClick: (e) =>
-                                              (unref(W)[n.key] = t),
-                                          },
-                                          toDisplayString(t),
-                                          11,
-                                          ue,
-                                        )
-                                      ),
-                                    ),
-                                    128,
-                                  )),
-                                  unref(G)[n.key].length
-                                    ? createCommentVNode(``, !0)
-                                    : (openBlock(),
-                                      createElementBlock(
-                                        `span`,
-                                        de,
-                                        `暂无可选项`,
-                                      )),
-                                ]),
-                              ],
-                              8,
-                              se,
-                            ),
-                          ),
-                          64,
-                        )),
-                        createVNode(X, {
-                          label: `清除筛选`,
-                          severity: `secondary`,
-                          text: ``,
-                          fluid: ``,
-                          onClick: (r[2] ||= (e) => unref(s).resetFilters()),
-                        }),
-                      ]),
-                    ]),
-                    createElementVNode(`section`, fe, [
-                      createElementVNode(
-                        `h2`,
-                        null,
-                        toDisplayString(
-                          unref(u)
-                            ? `正在加载产品`
-                            : `${unref(K).length} 款产品`,
-                        ),
-                        1,
-                      ),
-                      unref(u)
-                        ? (openBlock(),
-                          createElementBlock(`div`, A, [
-                            createVNode(Z, {
-                              height: `210px`,
-                            }),
-                          ]))
-                        : unref(d)
-                          ? (openBlock(),
-                            createElementBlock(`div`, j, [
-                              createVNode(
-                                Q,
-                                {
-                                  severity: `error`,
-                                  closable: !1,
-                                },
-                                {
-                                  default: withCtx(() => [
-                                    createTextVNode(
-                                      toDisplayString(unref(d)),
-                                      1,
-                                    ),
-                                  ]),
-                                  _: 1,
-                                },
-                              ),
-                              createVNode(X, {
-                                label: `重新加载商品`,
-                                icon: `pi pi-refresh`,
-                                onClick: (r[3] ||= (e) => unref(s).load()),
-                              }),
-                            ]))
-                          : (openBlock(),
-                            createElementBlock(
-                              Fragment,
-                              {
-                                key: 2,
-                              },
-                              [
-                                unref(_)
-                                  ? (openBlock(),
-                                    createBlock(
-                                      Q,
-                                      {
-                                        key: 0,
-                                        severity: `warn`,
-                                        closable: !1,
-                                      },
-                                      {
-                                        default: withCtx(() => [
-                                          createTextVNode(
-                                            toDisplayString(unref(_)) + ` `,
-                                            1,
-                                          ),
-                                          createVNode(X, {
-                                            label: `重试`,
-                                            text: ``,
-                                            onClick: (r[4] ||= (e) =>
-                                              unref(s).load()),
-                                          }),
-                                        ]),
-                                        _: 1,
-                                      },
-                                    ))
-                                  : createCommentVNode(``, !0),
-                                (openBlock(!0),
-                                createElementBlock(
-                                  Fragment,
-                                  null,
-                                  renderList(
-                                    unref(K),
-                                    (t) => (
-                                      openBlock(),
-                                      createElementBlock(
-                                        `article`,
-                                        {
-                                          key: unref(s).keyOf(t),
-                                          class: normalizeClass([
-                                            `hardware-card`,
-                                            {
-                                              selected:
-                                                unref(O) === unref(s).keyOf(t),
-                                            },
-                                          ]),
-                                        },
-                                        [
-                                          createElementVNode(
-                                            `h3`,
-                                            null,
-                                            toDisplayString(t.model.name),
-                                            1,
-                                          ),
-                                          createElementVNode(`div`, M, [
-                                            createElementVNode(`div`, N, [
-                                              (r[16] ||= createElementVNode(
-                                                `i`,
-                                                {
-                                                  class: `pi pi-microchip`,
-                                                  "aria-hidden": `true`,
-                                                },
-                                                null,
-                                                -1,
-                                              )),
-                                              createElementVNode(`div`, null, [
-                                                (r[15] ||= createElementVNode(
-                                                  `span`,
-                                                  null,
-                                                  `CPU`,
-                                                  -1,
-                                                )),
-                                                createElementVNode(
-                                                  `strong`,
-                                                  null,
-                                                  toDisplayString(
-                                                    t.model.cpu ||
-                                                      `未提供处理器信息`,
-                                                  ),
-                                                  1,
-                                                ),
-                                                createElementVNode(
-                                                  `small`,
-                                                  null,
-                                                  toDisplayString(
-                                                    t.model.cpu_param,
-                                                  ),
-                                                  1,
-                                                ),
-                                              ]),
-                                            ]),
-                                            createElementVNode(`div`, P, [
-                                              (r[18] ||= createElementVNode(
-                                                `i`,
-                                                {
-                                                  class: `pi pi-database`,
-                                                  "aria-hidden": `true`,
-                                                },
-                                                null,
-                                                -1,
-                                              )),
-                                              createElementVNode(`div`, null, [
-                                                (r[17] ||= createElementVNode(
-                                                  `span`,
-                                                  null,
-                                                  `存储`,
-                                                  -1,
-                                                )),
-                                                createElementVNode(
-                                                  `strong`,
-                                                  null,
-                                                  toDisplayString(
-                                                    t.model.memory ||
-                                                      `未提供内存信息`,
-                                                  ) + ` 内存`,
-                                                  1,
-                                                ),
-                                                createElementVNode(
-                                                  `strong`,
-                                                  null,
-                                                  toDisplayString(
-                                                    t.model.disk ||
-                                                      `未提供硬盘信息`,
-                                                  ),
-                                                  1,
-                                                ),
-                                                t.model.gpu
-                                                  ? (openBlock(),
-                                                    createElementBlock(
-                                                      `small`,
-                                                      F,
-                                                      toDisplayString(
-                                                        t.model.gpu,
-                                                      ),
-                                                      1,
-                                                    ))
-                                                  : createCommentVNode(``, !0),
-                                              ]),
-                                            ]),
-                                            createElementVNode(`div`, I, [
-                                              createElementVNode(`span`, null, [
-                                                (r[19] ||= createElementVNode(
-                                                  `small`,
-                                                  null,
-                                                  `商品起价`,
-                                                  -1,
-                                                )),
-                                                createElementVNode(
-                                                  `strong`,
-                                                  null,
-                                                  toDisplayString(
-                                                    xe(t.product.price),
-                                                  ),
-                                                  1,
-                                                ),
-                                                t.product.cycle
-                                                  ? (openBlock(),
-                                                    createElementBlock(
-                                                      `small`,
-                                                      L,
-                                                      ` / ` +
-                                                        toDisplayString(
-                                                          t.product.cycle,
-                                                        ) +
-                                                        `起`,
-                                                      1,
-                                                    ))
-                                                  : createCommentVNode(``, !0),
-                                              ]),
-                                              createVNode(
-                                                X,
-                                                {
-                                                  label: unref(s).inStock(t)
-                                                    ? `选择线路`
-                                                    : `库存不足`,
-                                                  disabled:
-                                                    !unref(s).inStock(t) ||
-                                                    !t.lines.length,
-                                                  onClick: (e) =>
-                                                    unref(s).select(t),
-                                                },
-                                                null,
-                                                8,
-                                                [
-                                                  `label`,
-                                                  `disabled`,
-                                                  `onClick`,
-                                                ],
-                                              ),
-                                            ]),
-                                          ]),
-                                          createElementVNode(`footer`, null, [
-                                            createElementVNode(
-                                              `span`,
-                                              null,
-                                              toDisplayString(
-                                                unref(product_name_n)(
-                                                  t.product.name,
-                                                ),
-                                              ),
-                                              1,
-                                            ),
-                                            t.lines.length
-                                              ? unref(s).inStock(t)
-                                                ? productStock(
-                                                    t.product,
-                                                    t.model,
-                                                  ) !== null
-                                                  ? (openBlock(),
-                                                    createElementBlock(
-                                                      `span`,
-                                                      B,
-                                                      `剩余 ` +
-                                                        toDisplayString(
-                                                          productStock(
-                                                            t.product,
-                                                            t.model,
-                                                          ),
-                                                        ) +
-                                                        ` 台`,
-                                                      1,
-                                                    ))
-                                                  : createCommentVNode(``, !0)
-                                                : (openBlock(),
-                                                  createElementBlock(
-                                                    `span`,
-                                                    z,
-                                                    `库存不足`,
-                                                  ))
-                                              : (openBlock(),
-                                                createElementBlock(
-                                                  `span`,
-                                                  R,
-                                                  `暂无可选线路`,
-                                                )),
-                                          ]),
-                                        ],
-                                        2,
-                                      )
-                                    ),
-                                  ),
-                                  128,
-                                )),
-                                unref(K).length
-                                  ? createCommentVNode(``, !0)
-                                  : (openBlock(),
-                                    createElementBlock(`div`, V, [
-                                      (r[21] ||= createElementVNode(
-                                        `i`,
-                                        {
-                                          class: `pi pi-server`,
-                                          "aria-hidden": `true`,
-                                        },
-                                        null,
-                                        -1,
-                                      )),
-                                      createElementVNode(
-                                        `h3`,
-                                        null,
-                                        toDisplayString(
-                                          unref(x).length
-                                            ? `没有符合筛选条件的物理服务器`
-                                            : unref(_)
-                                              ? `暂时无法展示物理服务器配置`
-                                              : `暂无可订购的物理服务器`,
-                                        ),
-                                        1,
-                                      ),
-                                      createElementVNode(
-                                        `p`,
-                                        null,
-                                        toDisplayString(
-                                          unref(x).length
-                                            ? `请调整筛选条件后再试。`
-                                            : `当前商品目录未提供可售型号，可稍后刷新或查看其他产品。`,
-                                        ),
-                                        1,
-                                      ),
-                                      unref(x).length
-                                        ? (openBlock(),
-                                          createBlock(X, {
-                                            key: 0,
-                                            label: `清除筛选`,
-                                            severity: `secondary`,
-                                            outlined: ``,
-                                            onClick: (r[5] ||= (e) =>
-                                              unref(s).resetFilters()),
-                                          }))
-                                        : (openBlock(),
-                                          createBlock(
-                                            a,
-                                            {
-                                              key: 1,
-                                              to: `/products`,
-                                            },
-                                            {
-                                              default: withCtx(() => [
-                                                ...(r[20] ||= [
-                                                  createTextVNode(
-                                                    `浏览产品`,
-                                                    -1,
-                                                  ),
-                                                ]),
-                                              ]),
-                                              _: 1,
-                                            },
-                                          )),
-                                    ])),
-                              ],
-                              64,
-                            )),
-                    ]),
-                    unref(C)
-                      ? (openBlock(),
-                        createElementBlock(`section`, pe, [
-                          createElementVNode(`div`, me, [
-                            createElementVNode(
-                              `h2`,
-                              null,
-                              toDisplayString(unref(C).model.name) + ` 线路`,
-                              1,
-                            ),
-                            createVNode(X, {
-                              icon: `pi pi-times`,
-                              "aria-label": `关闭线路面板`,
-                              severity: `secondary`,
-                              text: ``,
-                              onClick: (r[6] ||= (e) =>
-                                unref(s).closeSelection()),
-                            }),
-                          ]),
-                          createElementVNode(`div`, he, [
-                            unref(U)
-                              ? (openBlock(),
-                                createBlock(
-                                  Q,
-                                  {
-                                    key: 0,
-                                    severity: `warn`,
-                                    closable: !1,
-                                  },
-                                  {
-                                    default: withCtx(() => [
-                                      createTextVNode(
-                                        toDisplayString(unref(U)) + ` `,
-                                        1,
-                                      ),
-                                      createVNode(X, {
-                                        label: `重试线路`,
-                                        text: ``,
-                                        onClick: (r[7] ||= (e) =>
-                                          unref(s).select(unref(C))),
-                                      }),
-                                    ]),
-                                    _: 1,
-                                  },
-                                ))
-                              : createCommentVNode(``, !0),
-                            (openBlock(!0),
-                            createElementBlock(
-                              Fragment,
-                              null,
-                              renderList(
-                                unref(q),
-                                (t) => (
-                                  openBlock(),
-                                  createElementBlock(
-                                    `article`,
-                                    {
-                                      key: t.id,
-                                      class: `line-card`,
-                                    },
-                                    [
-                                      createElementVNode(`div`, ge, [
-                                        createVNode(
-                                          $,
-                                          {
-                                            value: t.location,
-                                            severity: `info`,
-                                          },
-                                          null,
-                                          8,
-                                          [`value`],
-                                        ),
-                                        createVNode(
-                                          $,
-                                          {
-                                            value: t.name,
-                                            severity: `info`,
-                                          },
-                                          null,
-                                          8,
-                                          [`value`],
-                                        ),
-                                      ]),
-                                      unref(be)
-                                        ? (openBlock(),
-                                          createBlock(Z, {
-                                            key: 0,
-                                            height: `64px`,
-                                          }))
-                                        : (openBlock(),
-                                          createElementBlock(`div`, _e, [
-                                            createElementVNode(`div`, null, [
-                                              (r[23] ||= createElementVNode(
-                                                `i`,
-                                                {
-                                                  class: `pi pi-calendar`,
-                                                  "aria-hidden": `true`,
-                                                },
-                                                null,
-                                                -1,
-                                              )),
-                                              createElementVNode(`span`, null, [
-                                                (r[22] ||= createTextVNode(
-                                                  `计费方式`,
-                                                  -1,
-                                                )),
-                                                createElementVNode(
-                                                  `strong`,
-                                                  null,
-                                                  toDisplayString(
-                                                    (unref(H)[t.id]
-                                                      ?.bill_type ||
-                                                      t.bill_type) === `flow`
-                                                      ? `流量计费`
-                                                      : `固定带宽`,
-                                                  ),
-                                                  1,
-                                                ),
-                                              ]),
-                                            ]),
-                                            createElementVNode(`div`, null, [
-                                              (r[24] ||= createElementVNode(
-                                                `i`,
-                                                {
-                                                  class: `pi pi-sort-alt`,
-                                                  "aria-hidden": `true`,
-                                                },
-                                                null,
-                                                -1,
-                                              )),
-                                              createElementVNode(`span`, null, [
-                                                createTextVNode(
-                                                  toDisplayString(
-                                                    unref(H)[t.id]
-                                                      ?.bill_type === `flow`
-                                                      ? `流量`
-                                                      : `带宽`,
-                                                  ),
-                                                  1,
-                                                ),
-                                                createElementVNode(
-                                                  `strong`,
-                                                  null,
-                                                  toDisplayString(
-                                                    unref(H)[t.id]
-                                                      ?.bill_type === `flow`
-                                                      ? `${resourceOptionValue(unref(H)[t.id]?.flow?.[0]) ?? `—`} GB`
-                                                      : `${resourceOptionValue(unref(H)[t.id]?.bw?.[0]) ?? `—`} Mbps`,
-                                                  ),
-                                                  1,
-                                                ),
-                                              ]),
-                                            ]),
-                                            createElementVNode(`div`, null, [
-                                              (r[26] ||= createElementVNode(
-                                                `i`,
-                                                {
-                                                  class: `pi pi-shield`,
-                                                  "aria-hidden": `true`,
-                                                },
-                                                null,
-                                                -1,
-                                              )),
-                                              createElementVNode(`span`, null, [
-                                                (r[25] ||= createTextVNode(
-                                                  `防护`,
-                                                  -1,
-                                                )),
-                                                createElementVNode(
-                                                  `strong`,
-                                                  null,
-                                                  toDisplayString(
-                                                    unref(H)[t.id]?.defence?.[0]
-                                                      ?.desc || `按配置提供`,
-                                                  ),
-                                                  1,
-                                                ),
-                                              ]),
-                                            ]),
-                                          ])),
-                                      createElementVNode(`div`, ve, [
-                                        (r[28] ||= createElementVNode(
-                                          `span`,
-                                          null,
-                                          `最终费用以配置报价为准`,
-                                          -1,
-                                        )),
-                                        createVNode(
-                                          X,
-                                          {
-                                            "as-child": ``,
-                                            icon: `pi pi-shopping-cart`,
-                                          },
-                                          {
-                                            default: withCtx((e) => [
-                                              createVNode(
-                                                a,
-                                                {
-                                                  to: Se(t.id),
-                                                  class: normalizeClass([
-                                                    `line-order-link`,
-                                                    e.class,
-                                                  ]),
-                                                },
-                                                {
-                                                  default: withCtx(() => [
-                                                    ...(r[27] ||= [
-                                                      createElementVNode(
-                                                        `i`,
-                                                        {
-                                                          class: `pi pi-shopping-cart`,
-                                                          "aria-hidden": `true`,
-                                                        },
-                                                        null,
-                                                        -1,
-                                                      ),
-                                                      createTextVNode(
-                                                        `立即订购`,
-                                                        -1,
-                                                      ),
-                                                    ]),
-                                                  ]),
-                                                  _: 1,
-                                                },
-                                                8,
-                                                [`to`, `class`],
-                                              ),
-                                            ]),
-                                            _: 2,
-                                          },
-                                          1024,
-                                        ),
-                                      ]),
-                                    ],
-                                  )
-                                ),
-                              ),
-                              128,
-                            )),
-                            unref(q).length
-                              ? createCommentVNode(``, !0)
-                              : (openBlock(),
-                                createElementBlock(
-                                  `p`,
-                                  ye,
-                                  `当前筛选下没有可选线路。`,
-                                )),
-                          ]),
-                        ]))
-                      : createCommentVNode(``, !0),
-                  ],
-                  2,
-                ),
-              ])
-            );
-          }
-        );
-      },
-    }),
-    [[`__scopeId`, `data-v-e16eb167`]],
+    ]),
+  ),
+);
+
+function matchesLine(line) {
+  return (
+    (!filters.region || line.location === filters.region) &&
+    (!filters.line || line.name === filters.line)
   );
-export {};
-export default H;
+}
+
+const filtered = computed(() => {
+  const list = entries.value.filter((entry) => {
+    const price = priceOf(entry);
+    return (
+      (filters.minPrice === null ||
+        (price !== null && price >= filters.minPrice)) &&
+      (filters.maxPrice === null ||
+        (price !== null && price <= filters.maxPrice)) &&
+      ((!filters.region && !filters.line) || entry.lines.some(matchesLine)) &&
+      (!filters.cpu || entry.model.cpu === filters.cpu) &&
+      (!filters.memory || entry.model.memory === filters.memory) &&
+      (!filters.disk || entry.model.disk === filters.disk)
+    );
+  });
+  if (sortBy.value === "default") return list;
+  const direction = sortBy.value === "price-asc" ? 1 : -1;
+  // 无有效价格的商品始终排在末尾，避免被当作 0 元置顶。
+  return [...list].sort((a, b) => {
+    const pa = priceOf(a);
+    const pb = priceOf(b);
+    if (pa === null) return pb === null ? 0 : 1;
+    if (pb === null) return -1;
+    return (pa - pb) * direction;
+  });
+});
+const visibleLines = computed(() =>
+  (selected.value?.lines ?? []).filter(matchesLine),
+);
+const extraFilterCount = computed(
+  () =>
+    specFilters.filter(({ key }) => filters[key]).length +
+    (filters.minPrice !== null || filters.maxPrice !== null ? 1 : 0),
+);
+const hasActiveFilters = computed(
+  () => Boolean(filters.region || filters.line) || extraFilterCount.value > 0,
+);
+
+onBeforeUnmount(() => {
+  disposed = true;
+  listGeneration++;
+  lineGeneration++;
+});
+
+function resetFilters() {
+  Object.assign(filters, {
+    minPrice: null,
+    maxPrice: null,
+    region: "",
+    line: "",
+    cpu: "",
+    memory: "",
+    disk: "",
+  });
+}
+
+// 商品库存与自动同步的机型库存都满足时才允许选购。
+function inStock(entry) {
+  const stock = productStock(entry.product, entry.model);
+  return stock === null || stock > 0;
+}
+
+function stockLabel(entry) {
+  if (!entry.lines.length) return "暂无可选线路";
+  if (!inStock(entry)) return "库存不足";
+  const stock = productStock(entry.product, entry.model);
+  return stock === null ? "" : `剩余 ${stock} 台`;
+}
+
+function locationSummary(entry) {
+  const locations = unique(entry.lines.map((line) => line.location));
+  if (!locations.length) return "";
+  return locations.length > 1
+    ? `${locations[0]} 等 ${locations.length} 个地区`
+    : locations[0];
+}
+
+// 分页收集商品后并行加载物理模块配置；单个商品失败保留其余可用项并提示部分加载失败。
+async function load() {
+  const generation = ++listGeneration;
+  lineGeneration++;
+  selectedKey.value = "";
+  lineDetails.value = {};
+  loading.value = true;
+  error.value = "";
+  partialError.value = "";
+  try {
+    const products = [];
+    for (let page = 1; ; page++) {
+      const result = await api.get("/product", { page, limit: 50 });
+      if (disposed || generation !== listGeneration) return;
+      const list = result.list ?? [];
+      products.push(...list);
+      if (
+        !list.length ||
+        products.length >= Number(result.count ?? products.length)
+      )
+        break;
+    }
+    const candidates = products.flatMap((product) => {
+      const module = dcimModule(product);
+      return product.hidden !== 1 && productId(product.id) !== null && module
+        ? [{ product: { ...product, module }, module }]
+        : [];
+    });
+    const pages = await Promise.allSettled(
+      candidates.map(async ({ product, module }) => ({
+        product,
+        page: await api.get(`/product/${product.id}/${module}/order_page`),
+      })),
+    );
+    if (disposed || generation !== listGeneration) return;
+    entries.value = pages.flatMap((settled) => {
+      if (settled.status !== "fulfilled") return [];
+      const { product, page } = settled.value;
+      const lines = (page.data_center ?? []).flatMap((center) =>
+        (center.city ?? []).flatMap((city) =>
+          (city.area ?? []).flatMap((area) =>
+            (area.line ?? []).map((line) => ({
+              ...line,
+              location: [city.name, area.name].filter(Boolean).join(" / "),
+              country: center.name,
+            })),
+          ),
+        ),
+      );
+      return (page.model_config ?? []).map((model) => ({
+        product,
+        model,
+        lines,
+      }));
+    });
+    if (pages.some((settled) => settled.status === "rejected"))
+      partialError.value =
+        "部分物理服务器配置暂时无法加载，请重试以获取完整列表。";
+  } catch (err) {
+    if (!disposed && generation === listGeneration) {
+      entries.value = [];
+      error.value =
+        err instanceof Error ? err.message : "加载物理服务器商品失败";
+    }
+  } finally {
+    if (!disposed && generation === listGeneration) loading.value = false;
+  }
+}
+
+// 按当前机型读取各线路详情，快速改选时只接纳最新选择的结果。
+async function select(entry) {
+  selectedKey.value = keyOf(entry);
+  const generation = ++lineGeneration;
+  lineDetails.value = {};
+  lineError.value = "";
+  lineLoading.value = true;
+  const module = dcimModule(entry.product) || "mf_dcim";
+  const results = await Promise.allSettled(
+    entry.lines.map(async (line) => ({
+      id: line.id,
+      detail: await api.get(
+        `/product/${entry.product.id}/${module}/line/${line.id}`,
+      ),
+    })),
+  );
+  if (disposed || generation !== lineGeneration) return;
+  for (const result of results)
+    if (result.status === "fulfilled")
+      lineDetails.value[result.value.id] = result.value.detail;
+  if (results.some((result) => result.status === "rejected"))
+    lineError.value = "部分线路详情加载失败，可重试或进入配置页面重新加载。";
+  lineLoading.value = false;
+}
+
+function closeSelection() {
+  lineGeneration++;
+  selectedKey.value = "";
+  lineDetails.value = {};
+  lineLoading.value = false;
+  lineError.value = "";
+}
+
+function toggle(entry) {
+  if (selectedKey.value === keyOf(entry)) closeSelection();
+  else select(entry);
+}
+
+// 只有明确有效的商品价格才显示金额，缺失时提示配置后确认。
+function formatPrice(raw) {
+  return raw !== undefined &&
+    String(raw).trim() !== "" &&
+    Number.isFinite(Number(raw))
+    ? `￥ ${Number(raw).toFixed(2)}`
+    : "价格待配置";
+}
+
+function lineBillType(line) {
+  return lineDetails.value[line.id]?.bill_type || line.bill_type;
+}
+
+function lineNetwork(line) {
+  const detail = lineDetails.value[line.id];
+  return detail?.bill_type === "flow"
+    ? {
+        label: "流量",
+        value: `${resourceOptionValue(detail?.flow?.[0]) ?? "—"} GB`,
+      }
+    : {
+        label: "带宽",
+        value: `${resourceOptionValue(detail?.bw?.[0]) ?? "—"} Mbps`,
+      };
+}
+
+// 定制链接携带当前商品、机型及所选线路 ID，最终仍由配置页加载并验证商品。
+function customizeLink(lineId) {
+  return `/products/dedicated-server/customize?id=${selected.value?.product.id}&model_id=${selected.value?.model.id}&line_id=${lineId}`;
+}
+
+onMounted(load);
 </script>
+
+<template>
+  <div class="dedicated-catalog">
+    <header class="catalog-head">
+      <h1>物理服务器</h1>
+      <NuxtLink to="/products">查看全部产品</NuxtLink>
+    </header>
+
+    <section class="catalog-filters" aria-label="筛选">
+      <div
+        v-for="group in [
+          { key: 'region', label: '地区' },
+          { key: 'line', label: '线路' },
+        ]"
+        :key="group.key"
+        class="filter-row"
+      >
+        <span class="filter-label">{{ group.label }}</span>
+        <div class="filter-chips" role="group" :aria-label="group.label">
+          <button
+            type="button"
+            :class="{ active: !filters[group.key] }"
+            :aria-pressed="!filters[group.key]"
+            @click="filters[group.key] = ''"
+          >
+            全部
+          </button>
+          <button
+            v-for="value in options[group.key]"
+            :key="value"
+            type="button"
+            :class="{ active: filters[group.key] === value }"
+            :aria-pressed="filters[group.key] === value"
+            @click="filters[group.key] = value"
+          >
+            {{ value }}
+          </button>
+          <span
+            v-if="!loading && !options[group.key].length"
+            class="filter-empty"
+          >
+            暂无可选项
+          </span>
+        </div>
+      </div>
+
+      <div class="filter-row filter-more" :class="{ open: moreFiltersOpen }">
+        <span class="filter-label">规格</span>
+        <div class="filter-fields">
+          <Select
+            v-for="spec in specFilters"
+            :key="spec.key"
+            v-model="filters[spec.key]"
+            :options="selectOptions[spec.key]"
+            option-label="label"
+            option-value="value"
+            :placeholder="`全部${spec.label}`"
+            :aria-label="spec.label"
+            class="filter-select"
+          />
+          <div class="price-range">
+            <InputNumber
+              v-model="filters.minPrice"
+              :input-id="`${fieldId}-min-price`"
+              aria-label="最低商品起价"
+              placeholder="最低价"
+              :min="0"
+              :min-fraction-digits="0"
+              :max-fraction-digits="2"
+            />
+            <span aria-hidden="true">—</span>
+            <InputNumber
+              v-model="filters.maxPrice"
+              :input-id="`${fieldId}-max-price`"
+              aria-label="最高商品起价"
+              placeholder="最高价"
+              :min="0"
+              :max-fraction-digits="2"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="catalog-toolbar">
+      <h2>{{ loading ? "正在加载产品" : `${filtered.length} 款产品` }}</h2>
+      <Button
+        class="more-toggle"
+        :label="
+          extraFilterCount ? `更多筛选 (${extraFilterCount})` : '更多筛选'
+        "
+        icon="pi pi-sliders-h"
+        severity="secondary"
+        outlined
+        size="small"
+        :aria-expanded="moreFiltersOpen"
+        @click="moreFiltersOpen = !moreFiltersOpen"
+      />
+      <Button
+        v-if="hasActiveFilters"
+        label="清除筛选"
+        severity="secondary"
+        text
+        size="small"
+        @click="resetFilters"
+      />
+      <Select
+        v-model="sortBy"
+        :options="sortOptions"
+        option-label="label"
+        option-value="value"
+        aria-label="排序"
+        size="small"
+        class="sort-select"
+      />
+    </div>
+
+    <section class="catalog-products">
+      <div v-if="loading" class="catalog-skeleton">
+        <Skeleton v-for="n in 5" :key="n" height="72px" />
+      </div>
+
+      <div v-else-if="error" class="catalog-state">
+        <Message severity="error" :closable="false">{{ error }}</Message>
+        <Button label="重新加载商品" icon="pi pi-refresh" @click="load" />
+      </div>
+
+      <template v-else>
+        <Message v-if="partialError" severity="warn" :closable="false">
+          {{ partialError }}
+          <Button label="重试" text @click="load" />
+        </Message>
+
+        <div v-if="filtered.length" class="hardware-list">
+          <div class="hardware-columns" aria-hidden="true">
+            <span>机型</span>
+            <span>处理器</span>
+            <span>内存</span>
+            <span>硬盘</span>
+            <span class="col-price">起价</span>
+            <span />
+          </div>
+
+          <article
+            v-for="entry in filtered"
+            :key="keyOf(entry)"
+            class="hardware-card"
+            :class="{
+              selected: selectedKey === keyOf(entry),
+              unavailable: !inStock(entry) || !entry.lines.length,
+            }"
+          >
+            <div class="hardware-row">
+              <div class="hw-name">
+                <strong class="hw-product">{{
+                  displayProductName(entry.product.name)
+                }}</strong>
+                <h3>{{ entry.model.name }}</h3>
+                <div class="hw-meta">
+                  <span v-if="locationSummary(entry)">
+                    <i class="pi pi-map-marker" aria-hidden="true" />{{
+                      locationSummary(entry)
+                    }}
+                  </span>
+                  <span
+                    v-if="stockLabel(entry)"
+                    class="hw-stock"
+                    :class="{ warn: !inStock(entry) || !entry.lines.length }"
+                    >{{ stockLabel(entry) }}</span
+                  >
+                </div>
+              </div>
+              <div class="hw-spec hw-cpu">
+                <span class="hw-label">处理器</span>
+                <strong>{{ entry.model.cpu || "未提供处理器信息" }}</strong>
+                <small v-if="entry.model.cpu_param">{{
+                  entry.model.cpu_param
+                }}</small>
+              </div>
+              <div class="hw-spec hw-mem">
+                <span class="hw-label">内存</span>
+                <strong>{{ entry.model.memory || "未提供内存信息" }}</strong>
+              </div>
+              <div class="hw-spec hw-disk">
+                <span class="hw-label">硬盘</span>
+                <strong>{{ entry.model.disk || "未提供硬盘信息" }}</strong>
+                <small v-if="entry.model.gpu">{{ entry.model.gpu }}</small>
+              </div>
+              <div class="hw-price">
+                <strong>{{ formatPrice(entry.product.price) }}</strong>
+                <small v-if="entry.product.cycle"
+                  >/ {{ entry.product.cycle }}起</small
+                >
+              </div>
+              <div class="hw-action">
+                <Button
+                  :label="
+                    !inStock(entry)
+                      ? '库存不足'
+                      : selectedKey === keyOf(entry)
+                        ? '收起线路'
+                        : '选择线路'
+                  "
+                  :icon="
+                    inStock(entry) && entry.lines.length
+                      ? selectedKey === keyOf(entry)
+                        ? 'pi pi-chevron-up'
+                        : 'pi pi-chevron-down'
+                      : undefined
+                  "
+                  icon-pos="right"
+                  :severity="
+                    selectedKey === keyOf(entry) ? 'secondary' : undefined
+                  "
+                  :outlined="selectedKey === keyOf(entry)"
+                  :disabled="!inStock(entry) || !entry.lines.length"
+                  :aria-expanded="selectedKey === keyOf(entry)"
+                  @click="toggle(entry)"
+                />
+              </div>
+            </div>
+
+            <section
+              v-if="selectedKey === keyOf(entry)"
+              class="catalog-lines"
+              aria-label="可选线路"
+            >
+              <Message v-if="lineError" severity="warn" :closable="false">
+                {{ lineError }}
+                <Button label="重试线路" text @click="select(entry)" />
+              </Message>
+              <article
+                v-for="line in visibleLines"
+                :key="line.id"
+                class="line-card"
+              >
+                <div class="line-tags">
+                  <span class="line-location">{{ line.location }}</span>
+                  <span class="line-name">{{ line.name }}</span>
+                </div>
+                <Skeleton
+                  v-if="lineLoading"
+                  height="40px"
+                  class="line-specs-skeleton"
+                />
+                <dl v-else class="line-specs">
+                  <div>
+                    <dt>计费方式</dt>
+                    <dd>
+                      {{
+                        lineBillType(line) === "flow" ? "流量计费" : "固定带宽"
+                      }}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt>{{ lineNetwork(line).label }}</dt>
+                    <dd>{{ lineNetwork(line).value }}</dd>
+                  </div>
+                  <div>
+                    <dt>防护</dt>
+                    <dd>
+                      {{
+                        lineDetails[line.id]?.defence?.[0]?.desc || "按配置提供"
+                      }}
+                    </dd>
+                  </div>
+                </dl>
+                <div class="line-action">
+                  <Button as-child v-slot="slotProps">
+                    <NuxtLink
+                      :to="customizeLink(line.id)"
+                      :class="[slotProps.class, 'line-order-link']"
+                    >
+                      <i
+                        class="pi pi-shopping-cart"
+                        aria-hidden="true"
+                      />立即订购
+                    </NuxtLink>
+                  </Button>
+                </div>
+              </article>
+              <p v-if="!visibleLines.length" class="line-empty">
+                当前筛选下没有可选线路。
+              </p>
+              <p class="line-note">最终费用以配置报价为准</p>
+            </section>
+          </article>
+        </div>
+
+        <div v-else class="catalog-state">
+          <i class="pi pi-server" aria-hidden="true" />
+          <h3>
+            {{
+              entries.length
+                ? "没有符合筛选条件的物理服务器"
+                : partialError
+                  ? "暂时无法展示物理服务器配置"
+                  : "暂无可订购的物理服务器"
+            }}
+          </h3>
+          <p>
+            {{
+              entries.length
+                ? "请调整筛选条件后再试。"
+                : "当前商品目录未提供可售型号，可稍后刷新或查看其他产品。"
+            }}
+          </p>
+          <Button
+            v-if="entries.length"
+            label="清除筛选"
+            severity="secondary"
+            outlined
+            @click="resetFilters"
+          />
+          <NuxtLink v-else to="/products">浏览产品</NuxtLink>
+        </div>
+      </template>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.dedicated-catalog {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding-bottom: 28px;
+}
+.catalog-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+.catalog-head h1 {
+  margin: 0;
+  font-size: 1.375rem;
+  font-weight: 400;
+}
+.catalog-head a {
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+  text-decoration: none;
+}
+.catalog-head a:hover {
+  color: var(--p-primary-color);
+}
+
+.catalog-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.filter-row {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr);
+  align-items: start;
+  gap: 8px 16px;
+}
+.filter-label {
+  color: var(--p-text-muted-color);
+  font-size: 0.9375rem;
+  line-height: 34px;
+}
+/* 统一选择控件：与云服务器选择器、商品目录分类使用同一套胶囊按钮规格。 */
+.filter-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.filter-chips button {
+  min-height: 34px;
+  padding: 5px 12px;
+  border: 1px solid var(--p-content-border-color);
+  border-radius: var(--radius-md);
+  background: var(--p-content-background);
+  color: var(--p-text-color);
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  cursor: pointer;
+}
+.filter-chips button:hover {
+  border-color: var(--p-primary-color);
+}
+.filter-chips button.active {
+  border-color: var(--p-primary-color);
+  box-shadow: inset 0 0 0 1px var(--p-primary-color);
+  background: var(--p-highlight-background);
+  color: var(--p-highlight-color);
+  font-weight: 500;
+}
+.filter-chips button:focus-visible {
+  outline: 2px solid var(--p-primary-color);
+  outline-offset: 2px;
+}
+.filter-empty {
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+  line-height: 34px;
+}
+.filter-fields {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
+  gap: 10px;
+}
+.filter-select {
+  min-width: 0;
+}
+.price-range {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.price-range :deep(.p-inputnumber) {
+  flex: 1;
+  width: 0;
+}
+.price-range :deep(input) {
+  width: 100%;
+  min-width: 0;
+}
+
+.catalog-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 20px 0 12px;
+}
+.catalog-toolbar h2 {
+  margin: 0 auto 0 0;
+  font-size: 1rem;
+  font-weight: 500;
+}
+.more-toggle {
+  display: none;
+}
+.sort-select {
+  width: 148px;
+}
+
+.catalog-skeleton {
+  display: grid;
+  gap: 8px;
+}
+.hardware-list {
+  border: 1px solid var(--p-content-border-color);
+  background: var(--p-content-background);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.hardware-columns,
+.hardware-row {
+  display: grid;
+  grid-template-columns:
+    minmax(0, 1.5fr) minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 0.9fr)
+    120px 124px;
+  align-items: center;
+  gap: 16px;
+  padding: 0 16px;
+}
+.hardware-columns {
+  color: var(--p-text-muted-color);
+  background: var(--p-content-hover-background);
+  border-bottom: 1px solid var(--p-content-border-color);
+  font-size: 0.8125rem;
+  min-height: 38px;
+}
+.col-price {
+  text-align: right;
+}
+.hardware-card {
+  border-bottom: 1px solid var(--p-content-border-color);
+  transition: background-color 0.15s;
+}
+.hardware-card:last-child {
+  border-bottom: 0;
+}
+.hardware-card:hover {
+  background: var(--p-content-hover-background);
+}
+.hardware-card.selected {
+  background: var(--p-highlight-background);
+  box-shadow: inset 3px 0 0 var(--p-primary-color);
+}
+.hardware-row {
+  min-height: 76px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.hw-name,
+.hw-spec {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.hw-product {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.hw-name h3 {
+  margin: 0;
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  overflow-wrap: anywhere;
+}
+.hw-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 10px;
+  margin-top: 2px;
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+}
+.hw-meta i {
+  margin-right: 3px;
+  font-size: 0.7rem;
+}
+.hw-stock {
+  color: var(--p-primary-color);
+}
+.hw-stock.warn {
+  color: var(--p-red-500, #dc2626);
+}
+.hw-label {
+  display: none;
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+}
+.hw-spec strong {
+  font-size: 0.875rem;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+.hw-spec small {
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+  overflow-wrap: anywhere;
+}
+.hw-price {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: right;
+}
+.hw-price strong {
+  color: var(--p-primary-color);
+  font-size: 1.125rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.hw-price small {
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+}
+.hw-action {
+  display: flex;
+  justify-content: flex-end;
+}
+.hw-action :deep(.p-button) {
+  width: 100%;
+  white-space: nowrap;
+}
+.hardware-card.unavailable .hw-product,
+.hardware-card.unavailable .hw-spec strong,
+.hardware-card.unavailable .hw-price strong {
+  color: var(--p-text-muted-color);
+}
+
+.catalog-lines {
+  padding: 0 16px 14px;
+}
+.line-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(0, 3fr) 124px;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 14px;
+  border: 1px solid var(--p-content-border-color);
+  background: var(--p-content-background);
+  border-radius: var(--radius-md);
+}
+.line-card + .line-card {
+  margin-top: 8px;
+}
+.line-tags {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.line-location {
+  font-size: 0.875rem;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+.line-name {
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+}
+.line-specs {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin: 0;
+}
+.line-specs dt {
+  color: var(--p-text-muted-color);
+  font-size: 0.75rem;
+}
+.line-specs dd {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+.line-action {
+  display: flex;
+  justify-content: flex-end;
+}
+.line-order-link {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  white-space: nowrap;
+  text-decoration: none;
+}
+.line-empty,
+.line-note {
+  margin: 10px 0 0;
+  color: var(--p-text-muted-color);
+  font-size: 0.8125rem;
+}
+.catalog-lines :deep(.p-message) {
+  margin-bottom: 8px;
+}
+.catalog-products > :deep(.p-message) {
+  margin-bottom: 12px;
+}
+
+.catalog-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  min-height: 260px;
+  padding: 70px 21px;
+  text-align: center;
+  border: 1px solid var(--p-content-border-color);
+  background: var(--p-content-background);
+  border-radius: var(--radius-md);
+}
+.catalog-state > i {
+  color: var(--p-text-muted-color);
+  font-size: 2rem;
+}
+.catalog-state h3 {
+  margin: 0;
+  font-size: 1.125rem;
+}
+.catalog-state p {
+  margin: 0;
+  color: var(--p-text-muted-color);
+  font-size: 0.9375rem;
+}
+
+@media (width < 1024px) {
+  .hardware-columns {
+    display: none;
+  }
+  .hardware-row {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-areas:
+      "name name name"
+      "cpu mem disk"
+      "price price action";
+    gap: 10px 16px;
+    padding: 14px 16px;
+  }
+  .hw-name {
+    grid-area: name;
+  }
+  .hw-cpu {
+    grid-area: cpu;
+  }
+  .hw-mem {
+    grid-area: mem;
+  }
+  .hw-disk {
+    grid-area: disk;
+  }
+  .hw-price {
+    grid-area: price;
+    flex-direction: row;
+    align-items: baseline;
+    gap: 4px;
+  }
+  .hw-action {
+    grid-area: action;
+  }
+  .hw-label {
+    display: block;
+  }
+  .line-card {
+    grid-template-columns: minmax(0, 1fr) 124px;
+  }
+  .line-specs {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+}
+
+@media (width < 768px) {
+  .filter-row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 6px;
+  }
+  .filter-label {
+    line-height: 1.5;
+  }
+  .filter-chips {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    margin-right: -16px;
+    padding-right: 16px;
+  }
+  .filter-chips::-webkit-scrollbar {
+    display: none;
+  }
+  .filter-chips button {
+    flex: none;
+    white-space: nowrap;
+  }
+  .filter-more {
+    display: none;
+  }
+  .filter-more.open {
+    display: grid;
+  }
+  .filter-fields {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .more-toggle {
+    display: inline-flex;
+  }
+  .sort-select {
+    width: 128px;
+  }
+  .catalog-toolbar {
+    flex-wrap: wrap;
+  }
+  .hardware-row {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-areas:
+      "name name"
+      "cpu cpu"
+      "mem disk"
+      "price action";
+    gap: 8px 12px;
+    padding: 12px;
+  }
+  .hw-cpu {
+    flex-flow: row wrap;
+    align-items: baseline;
+    column-gap: 6px;
+  }
+  .hw-cpu .hw-label {
+    flex-basis: 100%;
+  }
+  .line-card {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .line-specs {
+    grid-row: auto;
+  }
+  .catalog-state {
+    padding: 42px 14px;
+  }
+}
+</style>