feat(theme): 暗黑模式 Phase 2 批次 1 — about/brand 浅色区块 token 化

将 about-content-v4（8 处）与 brand-content（6 处）的浅色 bg-white 全部迁到 bg-bg-primary，浅色下值完全等价（#FFFFFF）→ 浅色视觉零差异；dark 模式下随 token 自动反色为 #0A0E14，section 间 bg-bg-secondary 交替保留设计层次（#0F1419）。【变更】 - about-content-v4.tsx：Hero×2 + section×2 + 卡片×2 + min-h-screen wrapper×2 - brand-content.tsx：main wrapper + Hero + section×2 + 卡片×2 + hover:bg-white→hover:bg-bg-primary 【验证】 - type-check 0 / lint 0 errors（127 warnings 既有） - jest 128 suites / 1623 passed - 视觉回归 22 passed（含关于我们 /about 全页浅色快照零 diff） - computed-style 一次性脚本验证（已删除）： - dark: /about 与 /about/brand 的 html/body/header 背景 → rgb(10,14,20) ✓ - dark: sectionBgs = [#0A0E14, #0F1419, #0A0E14]（bg-primary/bg-secondary 交替层次保留，dark 下 secondary → #0F1419 是设计意图） - light: 零深色残留，所有 section 在浅色范围内【设计确认】 - about/brand 的第二个 section 使用 bg-bg-secondary（#F8FAFC 浅灰）是设计意图的层次交替，dark 下自动反色为 #0F1419（深一档），无需改动 - 一次性 computed-style 脚本对 'section 全部 #FFFFFF/#0A0E14' 的断言过严 → 修正为'第一个 section 是预期主色 + 所有 section 不在反色范围'，覆盖真正的浅色→深色反色语义【Phase 2 剩余批次】 - 批次 2：services-content-v3 + service-detail-content-v4 + solution-value - 批次 3：product-detail-content-v3 + products/standalone + detail-hero - 批次 4：admin 全量（login + media + roles + notifications + content + page）
2026-08-31 18:26:49 +08:00
parent 40c6cd612d
commit cc1cc91010
2 changed files with 14 additions and 14 deletions
@@ -48,7 +48,7 @@ function HeroSection({ data }: { data: AboutData }) {
  const titleLines = (data.heroTitle || '').split('\n');

  return (
-    <section className="relative min-h-[85vh] flex items-center overflow-hidden bg-white">
+    <section className="relative min-h-[85vh] flex items-center overflow-hidden bg-bg-primary">
      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
        <div className="max-w-4xl">
          <motion.div
@@ -163,7 +163,7 @@ function WhoWeAreSection({ data }: { data: AboutData }) {
  const values = data.coreValues ?? [];

  return (
-    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-white">
+    <section className="relative py-20 sm:py-28 md:py-36 lg:py-44 overflow-hidden bg-bg-primary">
      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
        <div className="grid lg:grid-cols-12 gap-12 sm:gap-16 md:gap-20 items-start">
          <motion.div
@@ -305,7 +305,7 @@ function CertificationsSection({ data }: { data: AboutData }) {
  // 初创阶段无资质/伙伴数据时，如实呈现「建设中」状态而非隐藏整块（零编造）
  if (certifications.length === 0 && partners.length === 0) {
    return (
-      <section className="relative py-20 sm:py-28 md:py-32 overflow-hidden bg-white">
+      <section className="relative py-20 sm:py-28 md:py-32 overflow-hidden bg-bg-primary">
        <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
@@ -336,7 +336,7 @@ function CertificationsSection({ data }: { data: AboutData }) {
  }

  return (
-    <section className="relative py-20 sm:py-28 md:py-32 overflow-hidden bg-white">
+    <section className="relative py-20 sm:py-28 md:py-32 overflow-hidden bg-bg-primary">
      <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
        <div className="grid lg:grid-cols-2 gap-12 md:gap-16 lg:gap-20">
          {certifications.length > 0 && (
@@ -359,7 +359,7 @@ function CertificationsSection({ data }: { data: AboutData }) {
                  return (
                    <div
                      key={cert.name}
-                      className="p-5 sm:p-6 border border-border-primary bg-white hover:bg-bg-secondary hover:border-border-secondary transition-all duration-300"
+                      className="p-5 sm:p-6 border border-border-primary bg-bg-primary hover:bg-bg-secondary hover:border-border-secondary transition-all duration-300"
                    >
                      <div className="w-10 h-10 flex items-center justify-center mb-4 text-text-secondary">
                        <Icon className="w-5 h-5" />
@@ -390,7 +390,7 @@ function CertificationsSection({ data }: { data: AboutData }) {
                {partners.map((partner) => (
                  <div
                    key={partner}
-                    className="aspect-[3/2] flex items-center justify-center border border-border-primary bg-white hover:bg-bg-secondary hover:border-border-secondary transition-all duration-300 group"
+                    className="aspect-[3/2] flex items-center justify-center border border-border-primary bg-bg-primary hover:bg-bg-secondary hover:border-border-secondary transition-all duration-300 group"
                  >
                    <span className="text-sm font-bold text-text-muted group-hover:text-text-secondary transition-colors duration-300">
                      {partner}
@@ -457,14 +457,14 @@ export default function AboutContentV4({ data }: { data: Record<string, unknown>
  // Empty state when no CMS data is available
  if (!data || Object.keys(data).length === 0) {
    return (
-      <div className="min-h-screen bg-white flex items-center justify-center">
+      <div className="min-h-screen bg-bg-primary flex items-center justify-center">
        <div className="text-text-muted text-lg">内容暂未发布</div>
      </div>
    );
  }

  return (
-    <div className="min-h-screen bg-white text-ink overflow-x-hidden">
+    <div className="min-h-screen bg-bg-primary text-ink overflow-x-hidden">
      <HeroSection data={aboutData} />
      <MetricsStrip data={aboutData} />
      <WhoWeAreSection data={aboutData} />
@@ -66,9 +66,9 @@ const brandStats = [

 export default function BrandContent() {
  return (
-    <main className="min-h-screen bg-white overflow-x-hidden">
+    <main className="min-h-screen bg-bg-primary overflow-x-hidden">
      {/* ============ L1: Hero 品牌情感入口 ============ */}
-      <section className="relative min-h-[90vh] flex items-center overflow-hidden bg-white">
+      <section className="relative min-h-[90vh] flex items-center overflow-hidden bg-bg-primary">
        <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-28 sm:py-36 md:py-44 lg:py-56">
          <div className="max-w-4xl">
            {/* 眉标 */}
@@ -161,7 +161,7 @@ export default function BrandContent() {
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {brandValues.map((item, i) => (
              <ScrollReveal key={item.title} delay={i * 0.1}>
-                <div className="group relative bg-white border border-border-primary p-8 h-full transition-all duration-300 hover:border-brand/20 hover:shadow-md">
+                <div className="group relative bg-bg-primary border border-border-primary p-8 h-full transition-all duration-300 hover:border-brand/20 hover:shadow-md">
                  <div className="absolute top-0 left-0 right-0 h-0.5 bg-brand scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
                  <div className="w-12 h-12 flex items-center justify-center bg-brand/[0.06] text-brand mb-6 transition-colors duration-300 group-hover:bg-brand group-hover:text-white">
                    <item.icon className="w-5 h-5" />
@@ -176,7 +176,7 @@ export default function BrandContent() {
      </section>

      {/* 品牌使命与愿景 */}
-      <section className="relative py-24 sm:py-32 md:py-40 overflow-hidden bg-white">
+      <section className="relative py-24 sm:py-32 md:py-40 overflow-hidden bg-bg-primary">
        <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
          <div className="grid lg:grid-cols-2 gap-16 lg:gap-20">
            {/* 使命 */}
@@ -299,7 +299,7 @@ export default function BrandContent() {
      </section>

      {/* 品牌实力 */}
-      <section className="relative py-24 sm:py-32 md:py-40 overflow-hidden bg-white">
+      <section className="relative py-24 sm:py-32 md:py-40 overflow-hidden bg-bg-primary">
        <div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10">
          <ScrollReveal className="max-w-3xl mb-16 sm:mb-20">
            <div className="flex items-center gap-3 mb-6">
@@ -322,7 +322,7 @@ export default function BrandContent() {
              { icon: Globe, title: '多行业场景', desc: '方法论适配制造、零售、医疗、金融、教育、物流等多行业场景' },
            ].map((item, i) => (
              <ScrollReveal key={item.title} delay={i * 0.1}>
-                <div className="group relative bg-bg-secondary border border-border-primary p-8 h-full transition-all duration-300 hover:border-brand/20 hover:bg-white hover:shadow-sm">
+                <div className="group relative bg-bg-secondary border border-border-primary p-8 h-full transition-all duration-300 hover:border-brand/20 hover:bg-bg-primary hover:shadow-sm">
                  <div className="w-12 h-12 flex items-center justify-center bg-brand/[0.06] text-brand mb-6 transition-colors duration-300 group-hover:bg-brand group-hover:text-white">
                    <item.icon className="w-5 h-5" />
                  </div>