12SSL 证书配置页第二阶段视觉复核

当前结论

本轮修改后，页面主体结构已经基本成立，可以保留，不需要再次整体重构。

已经改善的部分：

页面使用单一外层主容器。
Order Type、CSR、SAN Domains 的内容层级更清楚。
SAN 表头与字段列基本对齐。
SAN 编号已经去掉灰色方块。
操作按钮已经移动到右下角。
页面整体密度比上一版合理。

当前完成度约为 80%。下一步应集中处理 Select2 下拉菜单、分隔线数量、SAN 表头层级及局部间距。

一、优先修正 DCV Method 下拉菜单

当前 DCV Method 的 Select2 下拉菜单明显脱离 12SSL 主题：

高亮选项使用突兀的蓝色背景。
下拉菜单文字和行高过大。
搜索框对于三个固定选项没有实际价值。
下拉层的边框和圆角与页面输入框不一致。
展开状态和关闭状态的视觉语言不统一。

此项是下一轮的最高优先级。

建议样式

所有规则必须限定在模块根容器内：

css

.page-clientareaproductdetails #sslContent .select2-container {
    width: 100% !important;
}

.page-clientareaproductdetails #sslContent
.select2-container .select2-selection--single {
    height: 38px;
    border: 1px solid var(--ssl-line);
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
}

.page-clientareaproductdetails #sslContent
.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 36px 0 10px;
    color: var(--ssl-ink);
    font-size: 14px;
    line-height: 36px;
}

.page-clientareaproductdetails #sslContent
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 8px;
}

.page-clientareaproductdetails #sslContent .select2-dropdown {
    border: 1px solid var(--ssl-line);
    border-radius: 6px;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
}

.page-clientareaproductdetails #sslContent .select2-results__option {
    padding: 8px 12px;
    color: var(--ssl-ink);
    background: #fff;
    font-size: 14px;
    line-height: 1.4;
}

.page-clientareaproductdetails #sslContent
.select2-results__option--highlighted,
.page-clientareaproductdetails #sslContent
.select2-results__option[aria-selected="true"] {
    background: var(--ssl-soft-green);
    color: var(--ssl-green);
}

关闭搜索框

DCV Method 只有以下三个选项：

HTTP Validation
DNS Validation
HTTPS Validation

因此不需要 Select2 搜索框。优先在现有初始化参数中增加：

minimumResultsForSearch: Infinity

不要通过删除 Select2 或更换字段组件破坏现有 DCV 提交逻辑。

二、减少重复分隔线

当前从 Order Type 到操作按钮区域仍存在过多横线，页面仍有一定“表格化过度”问题。

建议只保留四条主要分隔线：

页面主标题下方一条。
Order Type 与 CSR 之间一条。
CSR 与 SAN Domains 之间一条。
操作按钮区域上方一条。

建议删除：

CSR 说明文字下面的独立横线。
CSR 开关行上下同时出现的双重横线。
SAN Domains 标题、表头和数据行之间连续出现的重复横线。
只有一条 SAN 数据时，数据行下面多余的装饰线。

原则：同一边界只能由一个元素绘制 1px 分隔线，不能由相邻两个元素分别绘制边框。

三、收紧 CSR 区域

Use your own CSR (NOT recommended) 所在行目前上下留白仍略大。

建议：

css

min-height: 42px;
padding: 8px 0;

同时保持：

文字左对齐。
Switch 固定靠右。
文字与 Switch 垂直居中。
不改变 Switch 的字段属性和现有交互。

四、弱化 SAN 表头

当前 Domain / IP 和 DCV Method 的视觉重量接近区块标题，与 SAN Domains 层级竞争。

统一改为：

css

font-size: 13px;
font-weight: 600;
line-height: 1.4;
color: var(--ssl-muted);

表头只负责说明数据列，不应表现成新的区块标题。

保持以下对齐关系：

Domain / IP 表头与 Domain/IP 输入框左边缘一致。
DCV Method 表头与 Select2 控件左边缘一致。
编号列继续保持固定宽度。
表头和数据行使用完全相同的 Grid 列定义。

不要分别给表头和数据行编写两套不同的列宽。

五、操作按钮区域

当前按钮放在右下角的方向正确，可以保留。

继续确认：

css

min-height: 32px;
padding: 6px 12px;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
border-radius: 6px;

布局要求：

操作区域右对齐。
两个按钮间距为 8px。
按钮宽度根据文字自动适应。
不设置无必要的固定宽度。
Submit 使用主题绿色实心按钮。
Save Draft 使用白底、绿色文字和绿色细边框。

六、保持不变的部分

本轮不要再次调整以下内容：

页面最外层容器结构。
主标题图标和标题位置。
Order Type 的业务逻辑。
CSR 自动生成逻辑。
SAN 字段名称、字段 ID 和提交参数。
DCV 选项内容与值。
Submit 和 Save Draft 的提交行为。
Smarty 变量与 JavaScript 使用的选择器。

七、代码范围要求

优先修改 modules/servers/nicsrs_ssl 自身模板和 CSS。
Select2 样式必须限定在 .page-clientareaproductdetails #sslContent 下。
不要覆盖客户区其他页面的 .select2-container。
不要继续向全局 design-system.css 添加大量无作用域规则。
不引入新的 JavaScript 或 CSS 框架。
不改变现有证书模块业务逻辑。

八、本轮验收标准

DCV 下拉菜单不再出现蓝色高亮背景。
DCV 下拉菜单字号统一为 14px。
DCV 下拉菜单不再显示无用搜索框。
Select2 关闭和展开状态均符合 12SSL 主题。
页面不再出现连续重复横线。
CSR 开关行高度紧凑且垂直居中。
SAN 表头弱于 SAN Domains 区块标题。
SAN 表头与输入控件严格对齐。
两个操作按钮高度、字号和间距与客户区其他按钮一致。
桌面端和移动端均无内容重叠或横向滚动。
所有原有字段及提交功能保持正常。

九、交付说明

完成后请提供：

修改文件的本地绝对路径。
修改文件的远程绝对路径。
Select2 初始化参数和 CSS 的具体变化。
删除或合并了哪些重复分隔线。
桌面端与移动端验证结果。
确认未修改业务逻辑、字段名称、字段 ID 和提交参数。

12SSL 证书配置页第二阶段视觉复核 ​

当前结论 ​

一、优先修正 DCV Method 下拉菜单 ​

建议样式 ​

关闭搜索框 ​

二、减少重复分隔线 ​

三、收紧 CSR 区域 ​

四、弱化 SAN 表头 ​

五、操作按钮区域 ​

六、保持不变的部分 ​

七、代码范围要求 ​

八、本轮验收标准 ​

九、交付说明 ​