架构图通用皮肤规范

类型: 前端工程  |  标签: SVG 设计 视觉规范 自适应布局

国产模型生图用的颜色、布局、自适应公式。所有前端工程分析图遵循此规范，确保输出风格统一、专业可读。

画布与字体

• 画布背景统一用 #F8FAFC，禁止纯白或纯灰
• 全局文字用深蓝黑 #0F172A，模块标题 11-12px 加粗，职责描述 9px 常规
• 描述文字必须用带色相的低饱和深色，禁止直接用纯灰

卡片宽度自适应

• 禁止所有卡片使用固定宽度。根据卡片内最长一行文本动态计算宽度
• 文本像素估算：英文/符号 × 5.5px，中文/中文标点 × 11px
• 最终卡片宽度 = 文本像素值 + 40px（含左右 padding）
• 卡片水平排列间距固定 14px

卡片高度由行数撑高

• 描述文字禁止单行不换行，必须根据卡片可用宽度自动折行
• 总行数 = Math.ceil(文本总像素 / 可用宽度)
• 卡片高度 = 32px（标题区）+ 总行数 × 13px（每行字高+行距）
• 多行文字用 SVG foreignObject 标签包裹 HTML div，高度按上述公式动态计算

视觉细节

• 外层大容器圆角 8px，内部小卡片圆角 6px
• 大容器左侧带一条 56px 宽的实色侧边栏，文字白色加粗居中