12SSL WHMCS 证书配置页表单设计改进说明
任务背景
需要优化 WHMCS nicsrs_ssl 证书配置页的表单设计，使其符合当前 12SSL 客户区设计体系。
页面示例：
text
clientarea.php?action=productdetails&id=...当前页面属于“表单 + 表格式 SAN 列表”，主要问题包括：
- 分隔线过多，页面视觉噪音明显。
- 主标题、区块标题和字段标签的层级不够清楚。
- 输入控件和按钮尺寸偏大。
- Order Type、CSR 和 SAN Domains 使用不同的对齐方式。
- SAN 表头、编号、输入框和选择框没有形成稳定的列结构。
- 页面纵向空间利用率较低。
实施范围
只调整 HTML 结构和 CSS，不修改：
- 字段名称和字段 ID。
- Smarty 变量。
- 表单提交逻辑。
- 客户端及服务器端验证逻辑。
- JavaScript 使用的选择器。
- CSR、DCV、证书配置及保存草稿功能。
优先修改 modules/servers/nicsrs_ssl 自身的模板或模块 CSS。
所有样式应限定在模块根容器内，例如：
css
.page-clientareaproductdetails #sslContent不要使用不带作用域的 .form-control、.btn、table 等全局选择器覆盖其他客户区页面。
一、总体设计原则
- 只保留最外层
ssl-product-main-card一个主容器。 - 不新增卡片套卡片、胶囊字段或大面积色块。
- 内部层级通过标题、字重、间距和必要的细分隔线表达。
- 减少连续、重复的通栏横线。
- 保持轻量，不引入新的 JavaScript 或 CSS 框架。
- 与 Account Details、Services、Invoices 等现有 12SSL 客户区页面保持一致。
二、标题体系
主标题
主标题示例：Single IP SSL
- 保留盾牌图标。
- 字号：
16px。 - 字重：
600。 - 图标尺寸：
16px。 - 图标与文字间距：
8px。 - 左右内边距：
16px。 - 只保留一条底部边框：
1px solid var(--ssl-line)。
内部区块标题
内部标题包括：
Order TypeCSRSAN Domains
统一要求：
- 字号：
15px。 - 字重：
600。 - 上间距：
18px。 - 下间距：
8px。 - 不增加独立背景、边框或卡片容器。
- 不在标题上下同时绘制通栏横线。
- 只在不同的大功能区块之间保留一条细分隔线。
三、表单密度
输入框和选择框统一为：
css
min-height: 38px;
padding: 6px 10px;
font-size: 14px;
line-height: 1.4;
border: 1px solid var(--ssl-line);
border-radius: 6px;
box-shadow: none;字段说明文字统一为：
css
font-size: 14px;
line-height: 1.55;
color: var(--ssl-muted);
margin: 0 0 10px;不要让单个说明段落占据过大的上下空间。
四、Order Type
建议结构：
text
Order Type ○ New Order ○ Renewal要求：
- 标签宽度自适应，不设置过宽的固定列。
- Radio 与文字间距为
6px。 - 两组选项之间保持
24px间距。 - 整行内容垂直居中。
- 下方说明文字与
Order Type标签左侧对齐。 - 保留 radio 原有的字段属性和交互逻辑。
五、CSR 区域
建议结构：
text
CSR
CSR and Private Key will be automatically generated...
Use your own CSR (NOT recommended) [switch]要求：
- 开关固定靠右。
- 标签和开关垂直居中。
- 开关行整体高度约为
42px。 - 不要在说明文字和开关行的上下分别重复绘制横线。
- 保持现有开关交互逻辑。
六、SAN Domains 列表
这是本页面最需要改进的区域。
桌面端结构
text
Domain / IP DCV Method
1 [ Domain / IP ] [ Please Select ▼ ]推荐使用 CSS Grid：
css
grid-template-columns: 40px minmax(0, 1fr) minmax(220px, 1fr);
column-gap: 16px;具体要求：
- 编号列固定为
40px。 - 编号水平居中。
- 表头与输入框严格使用相同的列宽定义。
- 表头字号为
13px。 - 表头字重为
600。 - 表头颜色使用
var(--ssl-muted)。 - 表头、编号、输入框和选择框形成稳定的列结构。
- 删除编号背后的灰色方块，编号只使用普通文本。
- 每条 SAN 记录上下内边距为
10px。 - 多行 SAN 之间只使用
1px细分隔线。 - 不使用斑马纹、阴影或胶囊背景。
- 输入框与 select 高度统一为
38px。
移动端结构
- 隐藏桌面表头。
- 每条 SAN 改为单栏布局。
- Domain/IP 与 DCV Method 分别显示简短字段标签。
- 编号显示在该组左上方，不再占用独立空白列。
- 页面不能出现横向滚动。
七、操作按钮
Submit 和 Save Draft 应统一使用客户区标准按钮尺寸：
css
min-height: 32px;
padding: 6px 12px;
font-size: 13px;
font-weight: 500;
border-radius: 6px;布局要求：
- 两个按钮放在同一个操作区。
- 操作区右对齐。
- 按钮之间保持
8px间距。 Submit使用主题主绿色。Save Draft使用白底、绿色文字和绿色细边框。- 操作区上方保留一条细分隔线。
- 操作区内边距使用
12px 16px。
八、对齐规范
主内容区统一采用两条水平对齐轴：
- 图标起点：距容器左侧
16px。 - 标题及正文主要文字起点：距容器左侧
48px。
内部表单内容统一使用：
css
padding-left: 16px;
padding-right: 16px;不要给不同小节设置互不相同的左缩进。
SAN 区域可以使用自身的三列网格，但网格整体左边缘必须与其他正文内容对齐。
九、响应式要求
需要至少检查以下宽度：
- 大屏桌面：
1440px及以上。 - 普通桌面或平板横屏：
992px–1439px。 - 平板及手机：小于
768px。 - 窄屏手机：小于
576px。
移动端要求：
- Order Type 允许自然换行。
- CSR 标签和开关不能相互覆盖。
- SAN 记录切换为单栏。
- 操作按钮可以保持右对齐；空间不足时允许换行，但不能变成无必要的通栏按钮。
十、代码限制
- 优先修改模块自身模板和模块 CSS。
- 避免继续向全局
design-system.css堆积大量模块专用补丁。 - 不删除任何表单字段。
- 不更改字段顺序和提交参数。
- 不改变现有证书配置业务流程。
- 不引入新的 JavaScript 库。
- 除非覆盖模块已有内联样式或高权重规则，否则避免使用
!important。 - 保留 Smarty 模板语法及 WHMCS 升级兼容性。
- 使用现有 WHMCS 语言变量；只有官方不存在对应变量时才增加自定义语言变量。
十一、验收标准
- 页面只存在一个最外层主容器。
- 不再出现连续、重复的通栏横线。
- 主标题和各区块标题的层级清楚。
- 所有输入框和选择框高度一致。
- Order Type 的标签、radio 和说明文字对齐。
- CSR 开关与标签垂直居中并固定靠右。
- SAN 表头与数据列严格对齐。
- SAN 多行数据不会出现不同列宽。
- 操作按钮尺寸与客户区其他页面一致。
- 英文与中文环境均能正常显示。
- 桌面端和移动端均无横向滚动或内容覆盖。
- 页面整体比当前版本更加紧凑、清楚且易读。
- 不影响其他客户区页面和现有模块功能。
十二、交付要求
完成后请提供：
- 修改的本地文件绝对路径。
- 修改的远程文件绝对路径。
- 主要结构和样式变化摘要。
- PHP、Smarty、CSS 或 JavaScript 的相关检查结果。
- 桌面端和移动端实际页面验证结果。
- 确认未改变字段、提交参数和业务逻辑。