From cc1cc9101035f92ac120b1b8975d810d169e9f28 Mon Sep 17 00:00:00 2001
From: zhangxiang <zhangxiang@novalon.cn>
Date: Mon, 31 Aug 2026 18:26:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E6=9A=97=E9=BB=91=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=20Phase=202=20=E6=89=B9=E6=AC=A1=201=20=E2=80=94=20ab?=
 =?UTF-8?q?out/brand=20=E6=B5=85=E8=89=B2=E5=8C=BA=E5=9D=97=20token=20?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 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）
---
 src/app/(marketing)/about/about-content-v4.tsx   | 16 ++++++++--------
 .../(marketing)/about/brand/brand-content.tsx    | 12 ++++++------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/(marketing)/about/about-content-v4.tsx b/src/app/(marketing)/about/about-content-v4.tsx
index 5d03bde..711f909 100644
--- a/src/app/(marketing)/about/about-content-v4.tsx
+++ b/src/app/(marketing)/about/about-content-v4.tsx
@@ -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} />
diff --git a/src/app/(marketing)/about/brand/brand-content.tsx b/src/app/(marketing)/about/brand/brand-content.tsx
index 303c816..ae8b7d9 100644
--- a/src/app/(marketing)/about/brand/brand-content.tsx
+++ b/src/app/(marketing)/about/brand/brand-content.tsx
@@ -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>