chore: sync marketing pages, CMS extensions, tests and project docs
同步工作区剩余变更，主要包括： - 营销页面组件与布局持续优化（about/news/services/solutions/team 等） - 详情页四层叙事组件、布局组件、UI 组件调整 - CMS 数据模型、API 路由、权限、工作流、站内通知、媒体管理扩展 - 新增/补充单元测试与 E2E 测试（cms-workflow.spec.ts 等） - ESLint 9 迁移、jest/tsconfig 配置更新、依赖调整 - 新增 ADR、CMS 评估文档、Release Review / Acceptance 报告 - 移除水墨装饰组件与大体积未使用字体文件
This commit is contained in:
张翔
+250
-3
@@ -19,13 +19,17 @@ body {
|
||||
--color-ink-lighter: #151B23;
|
||||
--color-ink-rgb: 10, 14, 20;
|
||||
|
||||
/* 品牌信号色：朱砂红 */
|
||||
/* 品牌信号色：朱砂红 — Committed 色彩策略（Bain 式自信表达） */
|
||||
--color-brand: #C41E3A;
|
||||
--color-brand-hover: #A01830;
|
||||
--color-brand-light: #E04A68;
|
||||
--color-brand-soft: rgba(196, 30, 58, 0.12);
|
||||
--color-brand-bg: #FEF2F4;
|
||||
--color-brand-rgb: 196, 30, 58;
|
||||
/* 品牌色深色区块（Bain 式深红背景） */
|
||||
--color-brand-section: #8B1530;
|
||||
--color-brand-section-text: #F8FAFC;
|
||||
--color-brand-section-muted: rgba(248, 250, 252, 0.7);
|
||||
|
||||
/* 辅助色：服务/行业编码 */
|
||||
--color-accent-blue: #3B82F6;
|
||||
@@ -152,13 +156,13 @@ body {
|
||||
--line-height-relaxed: 1.85;
|
||||
|
||||
/* 字间距系统（按使用场景分层） */
|
||||
--letter-spacing-tighter: -0.04em;
|
||||
--letter-spacing-tighter: -0.03em; /* 展示标题，不低于 -0.04em 地板 */
|
||||
--letter-spacing-tight: -0.02em;
|
||||
--letter-spacing-normal: 0;
|
||||
--letter-spacing-wide: 0.03em;
|
||||
--letter-spacing-wider: 0.06em;
|
||||
--letter-spacing-widest: 0.12em;
|
||||
--letter-spacing-eyebrow: 0.18em;
|
||||
--letter-spacing-eyebrow: 0.12em; /* 减小，避免过宽追踪 */
|
||||
|
||||
/* 段落间距 */
|
||||
--paragraph-spacing: 1.25em;
|
||||
@@ -235,6 +239,10 @@ body {
|
||||
--card-padding-lg: 2.5rem;
|
||||
--card-gap: 1.5rem;
|
||||
--card-border-radius: var(--radius-lg);
|
||||
/* Bain 式干净卡片：边框 + 阴影，无复杂光晕 */
|
||||
--card-shadow: 0 1px 3px rgba(10, 14, 20, 0.06);
|
||||
--card-shadow-hover: 0 8px 24px rgba(10, 14, 20, 0.1);
|
||||
--card-border: 1px solid var(--color-border-primary);
|
||||
|
||||
/* 输入框 */
|
||||
--input-height: 2.75rem;
|
||||
@@ -245,6 +253,83 @@ body {
|
||||
--section-gap: var(--spacing-3xl);
|
||||
--section-gap-sm: var(--spacing-2xl);
|
||||
--section-padding-y: var(--spacing-3xl);
|
||||
|
||||
/* === 组件令牌层（Component Tokens）=== */
|
||||
|
||||
/* Badge 标签 */
|
||||
--badge-height-sm: 1.25rem;
|
||||
--badge-height-md: 1.5rem;
|
||||
--badge-padding-x: 0.625rem;
|
||||
--badge-font-size: 0.6875rem;
|
||||
--badge-radius: var(--radius-full);
|
||||
|
||||
/* Tabs 标签页 */
|
||||
--tab-height: 2.5rem;
|
||||
--tab-padding-x: 1rem;
|
||||
--tab-font-size: 0.875rem;
|
||||
--tab-indicator-height: 2px;
|
||||
|
||||
/* Modal / Dialog 弹窗 */
|
||||
--modal-padding: 2rem;
|
||||
--modal-radius: var(--radius-xl);
|
||||
--modal-max-width-sm: 420px;
|
||||
--modal-max-width-md: 560px;
|
||||
--modal-max-width-lg: 720px;
|
||||
|
||||
/* Tooltip 提示 */
|
||||
--tooltip-padding: 0.5rem 0.75rem;
|
||||
--tooltip-radius: var(--radius-sm);
|
||||
--tooltip-font-size: 0.75rem;
|
||||
|
||||
/* Form 表单 */
|
||||
--label-font-size: 0.875rem;
|
||||
--label-margin-bottom: 0.5rem;
|
||||
--form-group-gap: 1.25rem;
|
||||
|
||||
/* Avatar 头像 */
|
||||
--avatar-size-sm: 2rem;
|
||||
--avatar-size-md: 2.5rem;
|
||||
--avatar-size-lg: 3rem;
|
||||
--avatar-radius: var(--radius-full);
|
||||
|
||||
/* Table 表格 */
|
||||
--table-header-bg: var(--color-bg-secondary);
|
||||
--table-header-font-size: 0.75rem;
|
||||
--table-cell-padding-y: 0.75rem;
|
||||
--table-cell-padding-x: 1rem;
|
||||
--table-border-color: var(--color-border-primary);
|
||||
|
||||
/* Breadcrumb 面包屑 */
|
||||
--breadcrumb-font-size: 0.875rem;
|
||||
--breadcrumb-separator-margin: 0.5rem;
|
||||
|
||||
/* Menu / Dropdown 菜单 */
|
||||
--menu-item-height: 2.5rem;
|
||||
--menu-padding-y: 0.5rem;
|
||||
--menu-min-width: 180px;
|
||||
|
||||
/* Accordion 手风琴 */
|
||||
--accordion-item-gap: 0.5rem;
|
||||
--accordion-trigger-height: 3rem;
|
||||
--accordion-trigger-padding-x: 1rem;
|
||||
|
||||
/* Skeleton 骨架屏 */
|
||||
--skeleton-radius: var(--radius-sm);
|
||||
--skeleton-bg: var(--color-bg-tertiary);
|
||||
|
||||
/* Stats Bar 数据条 */
|
||||
--stats-bar-gap: var(--spacing-2xl);
|
||||
--stats-number-size: var(--font-size-4xl);
|
||||
--stats-label-size: var(--font-size-xs);
|
||||
|
||||
/* === 12 列网格系统（Grid System）=== */
|
||||
--grid-columns: 12;
|
||||
--grid-gap-xs: 0.5rem;
|
||||
--grid-gap-sm: 1rem;
|
||||
--grid-gap-md: 1.5rem;
|
||||
--grid-gap-lg: 2rem;
|
||||
--grid-gap-xl: 2.5rem;
|
||||
--grid-gap-2xl: 3rem;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -600,6 +685,90 @@ body {
|
||||
background: radial-gradient(ellipse at 50% 0%, rgba(var(--color-brand-rgb), 0.08) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
/* Bain 式干净卡片（替代旧墨韵光晕卡片） */
|
||||
.bain-card {
|
||||
background: var(--color-bg-primary);
|
||||
border: var(--card-border);
|
||||
border-radius: var(--card-border-radius);
|
||||
box-shadow: var(--card-shadow);
|
||||
transition: transform var(--transition-fast) var(--ease-out),
|
||||
box-shadow var(--transition-fast) var(--ease-out);
|
||||
}
|
||||
.bain-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--card-shadow-hover);
|
||||
}
|
||||
|
||||
/* === Bain 式不对称布局系统 === */
|
||||
/* 宽窄列：左宽右窄（65/35） */
|
||||
.asymmetric-wide-narrow {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.asymmetric-wide-narrow {
|
||||
grid-template-columns: 5fr 3fr;
|
||||
gap: var(--spacing-4xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* 宽窄列：左窄右宽（35/65） */
|
||||
.asymmetric-narrow-wide {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.asymmetric-narrow-wide {
|
||||
grid-template-columns: 3fr 5fr;
|
||||
gap: var(--spacing-4xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* 不对称三列：左宽 + 中窄 + 右窄（50/25/25） */
|
||||
.asymmetric-three {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.asymmetric-three {
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
gap: var(--spacing-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* 大留白区块：用于 Hero 下方过渡 */
|
||||
.section-breathing {
|
||||
padding-top: var(--spacing-5xl);
|
||||
padding-bottom: var(--spacing-5xl);
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.section-breathing {
|
||||
padding-top: var(--spacing-6xl);
|
||||
padding-bottom: var(--spacing-6xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* 紧致区块：用于数据密集区 */
|
||||
.section-compact {
|
||||
padding-top: var(--spacing-2xl);
|
||||
padding-bottom: var(--spacing-2xl);
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.section-compact {
|
||||
padding-top: var(--spacing-3xl);
|
||||
padding-bottom: var(--spacing-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* 品牌色深色区块（Bain 式 Hero/CTA 深红背景） */
|
||||
.bg-brand-section {
|
||||
background-color: var(--color-brand-section);
|
||||
color: var(--color-brand-section-text);
|
||||
}
|
||||
|
||||
.bg-glow-hero {
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 30%, rgba(var(--color-brand-rgb), 0.1) 0%, transparent 50%),
|
||||
@@ -656,6 +825,84 @@ body {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* === 12 列网格系统 === */
|
||||
.grid-12 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
.grid-gap-xs { gap: var(--grid-gap-xs); }
|
||||
.grid-gap-sm { gap: var(--grid-gap-sm); }
|
||||
.grid-gap-md { gap: var(--grid-gap-md); }
|
||||
.grid-gap-lg { gap: var(--grid-gap-lg); }
|
||||
.grid-gap-xl { gap: var(--grid-gap-xl); }
|
||||
.grid-gap-2xl { gap: var(--grid-gap-2xl); }
|
||||
|
||||
/* 列跨越（1-12） */
|
||||
.col-span-1 { grid-column: span 1 / span 1; }
|
||||
.col-span-2 { grid-column: span 2 / span 2; }
|
||||
.col-span-3 { grid-column: span 3 / span 3; }
|
||||
.col-span-4 { grid-column: span 4 / span 4; }
|
||||
.col-span-5 { grid-column: span 5 / span 5; }
|
||||
.col-span-6 { grid-column: span 6 / span 6; }
|
||||
.col-span-7 { grid-column: span 7 / span 7; }
|
||||
.col-span-8 { grid-column: span 8 / span 8; }
|
||||
.col-span-9 { grid-column: span 9 / span 9; }
|
||||
.col-span-10 { grid-column: span 10 / span 10; }
|
||||
.col-span-11 { grid-column: span 11 / span 11; }
|
||||
.col-span-12 { grid-column: span 12 / span 12; }
|
||||
|
||||
/* 响应式列跨越 */
|
||||
@media (min-width: 640px) {
|
||||
.sm\:col-span-1 { grid-column: span 1 / span 1; }
|
||||
.sm\:col-span-2 { grid-column: span 2 / span 2; }
|
||||
.sm\:col-span-3 { grid-column: span 3 / span 3; }
|
||||
.sm\:col-span-4 { grid-column: span 4 / span 4; }
|
||||
.sm\:col-span-5 { grid-column: span 5 / span 5; }
|
||||
.sm\:col-span-6 { grid-column: span 6 / span 6; }
|
||||
.sm\:col-span-7 { grid-column: span 7 / span 7; }
|
||||
.sm\:col-span-8 { grid-column: span 8 / span 8; }
|
||||
.sm\:col-span-9 { grid-column: span 9 / span 9; }
|
||||
.sm\:col-span-10 { grid-column: span 10 / span 10; }
|
||||
.sm\:col-span-11 { grid-column: span 11 / span 11; }
|
||||
.sm\:col-span-12 { grid-column: span 12 / span 12; }
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:col-span-1 { grid-column: span 1 / span 1; }
|
||||
.md\:col-span-2 { grid-column: span 2 / span 2; }
|
||||
.md\:col-span-3 { grid-column: span 3 / span 3; }
|
||||
.md\:col-span-4 { grid-column: span 4 / span 4; }
|
||||
.md\:col-span-5 { grid-column: span 5 / span 5; }
|
||||
.md\:col-span-6 { grid-column: span 6 / span 6; }
|
||||
.md\:col-span-7 { grid-column: span 7 / span 7; }
|
||||
.md\:col-span-8 { grid-column: span 8 / span 8; }
|
||||
.md\:col-span-9 { grid-column: span 9 / span 9; }
|
||||
.md\:col-span-10 { grid-column: span 10 / span 10; }
|
||||
.md\:col-span-11 { grid-column: span 11 / span 11; }
|
||||
.md\:col-span-12 { grid-column: span 12 / span 12; }
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:col-span-1 { grid-column: span 1 / span 1; }
|
||||
.lg\:col-span-2 { grid-column: span 2 / span 2; }
|
||||
.lg\:col-span-3 { grid-column: span 3 / span 3; }
|
||||
.lg\:col-span-4 { grid-column: span 4 / span 4; }
|
||||
.lg\:col-span-5 { grid-column: span 5 / span 5; }
|
||||
.lg\:col-span-6 { grid-column: span 6 / span 6; }
|
||||
.lg\:col-span-7 { grid-column: span 7 / span 7; }
|
||||
.lg\:col-span-8 { grid-column: span 8 / span 8; }
|
||||
.lg\:col-span-9 { grid-column: span 9 / span 9; }
|
||||
.lg\:col-span-10 { grid-column: span 10 / span 10; }
|
||||
.lg\:col-span-11 { grid-column: span 11 / span 11; }
|
||||
.lg\:col-span-12 { grid-column: span 12 / span 12; }
|
||||
}
|
||||
|
||||
/* 网格行跨越 */
|
||||
.row-span-1 { grid-row: span 1 / span 1; }
|
||||
.row-span-2 { grid-row: span 2 / span 2; }
|
||||
.row-span-3 { grid-row: span 3 / span 3; }
|
||||
}
|
||||
|
||||
/* ===== 动画关键帧 ===== */
|
||||
|
||||
Reference in New Issue
Block a user