feat(products): 改版服务器选购界面并新增地区筛选与价格排序

- 云产品选择器新增地区标签页、分组数量及全部选项，自动跟随当前线路所属地区 - 将线路和型号改为紧凑选择按钮，精简型号名称的公共前缀并保留完整名称提示 - 物理服务器目录改为规格列表，支持行内展开、收起线路详情及进入定制页 - 新增商品起价升降序排序，将无有效价格的商品置于末尾 - 将规格筛选改为下拉选项，移动端支持展开更多筛选并显示已选条件数量 - 统一云服务器与物理服务器的横向配置表单，优化磁盘、带宽、镜像选择及移动端布局 - 限制桌面端配置汇总栏高度，使清单内部滚动并保持价格和购买按钮可见 - 统一产品分类标签页与胶囊按钮样式，补充查看全部产品入口 - 将产品选择器和物理服务器目录重构为 script setup、声明式模板及 scoped 样式，删除旧样式文件与相关引用
2026-11-08 18:54:34 +08:00
1 parent 65c175c8fa
commit e3ad73d397
@@ -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));
+  }
+}