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

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