From c4743942373ac8875d0b0d41a2b6e1e5686f0106 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= <xiangzhang1024@gmail.com>
Date: Sun, 10 May 2026 10:37:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E5=85=A8=E7=AB=99=E8=A7=86=E8=A7=89?=
 =?UTF-8?q?=E5=AE=A1=E6=9F=A5=E4=BF=AE=E5=A4=8D=20=E2=80=94=20=E6=B7=B1?=
 =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E9=80=82=E9=85=8D=E4=B8=8E=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 法律页面(条款/隐私) Hero 渐变背景深色模式适配，新增 --color-hero-dark-end 变量
- Badge secondary 变体深色模式下从白底白字改为主题自适应灰底
- 首页 Hero 快速导航图标 strokeWidth 加粗提升可读性 (1.8→2.2)
- 服务详情挑战卡片添加 border + hover 边框变色增强层次感
- 移动端 Tab Bar 激活指示器升级为顶部+底部双信号
---
 src/app/(marketing)/services/[id]/client.tsx | 2 +-
 src/app/globals.css                          | 2 ++
 src/app/privacy/page.tsx                     | 2 +-
 src/app/terms/page.tsx                       | 2 +-
 src/components/layout/mobile-tab-bar.tsx     | 9 ++++++++-
 src/components/sections/hero-section-v2.tsx  | 4 ++--
 src/components/ui/badge.tsx                  | 2 +-
 7 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app/(marketing)/services/[id]/client.tsx b/src/app/(marketing)/services/[id]/client.tsx
index e58caba..3952d62 100644
--- a/src/app/(marketing)/services/[id]/client.tsx
+++ b/src/app/(marketing)/services/[id]/client.tsx
@@ -101,7 +101,7 @@ export function ServiceDetailClient({ service }: ServiceDetailClientProps) {
               {serviceChallenges.map((challenge, index) => (
                 <div
                   key={index}
-                  className="p-4 bg-[var(--color-bg-tertiary)] rounded-lg hover:bg-[var(--color-brand-primary-bg)] transition-colors"
+                  className="p-4 bg-[var(--color-bg-tertiary)] rounded-lg border border-[var(--color-border-primary)] hover:border-[var(--color-brand-primary)]/30 hover:bg-[var(--color-brand-primary-bg)] transition-colors"
                 >
                   <h3 className="font-semibold text-[var(--color-text-primary)] mb-1 text-sm">{challenge.title}</h3>
                   <p className="text-sm text-[var(--color-text-muted)]">{challenge.description}</p>
diff --git a/src/app/globals.css b/src/app/globals.css
index b5d200c..49fb1df 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -66,6 +66,7 @@
 
   --color-footer-bg: #1C1C1C;
   --color-cta-bg: #FAFAFA;
+  --color-hero-dark-end: #1C1C1C;
   --color-footer-text: #A0A0A0;
   --color-footer-text-muted: #666666;
   --color-footer-text-dim: #999999;
@@ -200,6 +201,7 @@
 
   --color-footer-bg: #000000;
   --color-cta-bg: #141414;
+  --color-hero-dark-end: #1A0A10;
   --color-footer-text: #8C8C8C;
   --color-footer-text-muted: #525252;
   --color-footer-text-dim: #737373;
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
index d65eb4e..b68c87d 100644
--- a/src/app/privacy/page.tsx
+++ b/src/app/privacy/page.tsx
@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 export default function PrivacyPolicyPage() {
   return (
     <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <div className="bg-gradient-to-br from-[var(--color-brand-primary)] to-[var(--color-text-primary)] py-20">
+      <div className="bg-gradient-to-br from-[var(--color-brand-primary)] via-[var(--color-brand-primary)]/80 to-[var(--color-hero-dark-end)] py-20">
         <div className="container-wide">
           <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
             隐私政策
diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx
index 9b13436..b815da0 100644
--- a/src/app/terms/page.tsx
+++ b/src/app/terms/page.tsx
@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 export default function TermsOfServicePage() {
   return (
     <div className="min-h-screen bg-[var(--color-bg-primary)]">
-      <div className="bg-gradient-to-br from-[var(--color-brand-primary)] to-[var(--color-text-primary)] py-20">
+      <div className="bg-gradient-to-br from-[var(--color-brand-primary)] via-[var(--color-brand-primary)]/80 to-[var(--color-hero-dark-end)] py-20">
         <div className="container-wide">
           <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
             服务条款
diff --git a/src/components/layout/mobile-tab-bar.tsx b/src/components/layout/mobile-tab-bar.tsx
index 187a8a8..4c0213b 100644
--- a/src/components/layout/mobile-tab-bar.tsx
+++ b/src/components/layout/mobile-tab-bar.tsx
@@ -50,6 +50,13 @@ export function MobileTabBar() {
               className="flex flex-col items-center justify-center flex-1 h-full relative group min-h-12"
             >
               <div className="relative flex flex-col items-center justify-center py-2">
+                {active && (
+                  <motion.div
+                    layoutId="activeTabTop"
+                    className="absolute -top-0 w-6 h-[3px] bg-[var(--color-brand-primary)] rounded-full"
+                    transition={{ type: 'spring', stiffness: 380, damping: 30 }}
+                  />
+                )}
                 <Icon
                   className={cn(
                     'w-6 h-6 transition-colors',
@@ -66,7 +73,7 @@ export function MobileTabBar() {
                 </span>
                 {active && (
                   <motion.div
-                    layoutId="activeTab"
+                    layoutId="activeTabBottom"
                     className="absolute -bottom-1 w-8 h-0.5 bg-[var(--color-brand-primary)] rounded-full"
                     transition={{ type: 'spring', stiffness: 380, damping: 30 }}
                   />
diff --git a/src/components/sections/hero-section-v2.tsx b/src/components/sections/hero-section-v2.tsx
index e0d0c7a..9ac0a60 100644
--- a/src/components/sections/hero-section-v2.tsx
+++ b/src/components/sections/hero-section-v2.tsx
@@ -122,7 +122,7 @@ export function HeroSectionV2() {
                     key={cap.label}
                     className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[var(--color-bg-section)] border border-[var(--color-border-primary)]"
                   >
-                    <Icon className="w-4 h-4 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
+                    <Icon className="w-4 h-4 text-[var(--color-brand-primary)]" strokeWidth={2.2} />
                     <span className="text-xs font-medium text-[var(--color-text-primary)]">{cap.label}</span>
                   </div>
                 );
@@ -178,7 +178,7 @@ export function HeroSectionV2() {
                         className="flex items-center gap-4 p-3 rounded-lg bg-[var(--color-bg-section)]/60"
                       >
                         <div className="w-9 h-9 rounded-lg bg-[var(--color-brand-primary-bg)] flex items-center justify-center shrink-0">
-                          <Icon className="w-4 h-4 text-[var(--color-brand-primary)]" strokeWidth={1.8} />
+                          <Icon className="w-4 h-4 text-[var(--color-brand-primary)]" strokeWidth={2.2} />
                         </div>
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-2">
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 26d6a51..9ca105b 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -13,7 +13,7 @@ const badgeVariants = cva(
       variant: {
         default: "bg-[var(--color-brand-primary)] text-white border-transparent shadow-sm",
         secondary:
-          "bg-[var(--color-primary)] text-white border-transparent shadow-sm",
+          "bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)] border-[var(--color-border-primary)]",
         destructive:
           "bg-[var(--color-brand-primary)] text-white border-transparent hover:bg-[var(--color-brand-primary-hover)]",
         outline: