style: AI 色类名残留清零 - 庆典/引导/签名时刻组件归位

Author: Aparencia

client/src/components/onboarding/OnboardingOverlay.tsx

@@ -102,9 +102,9 @@ export function OnboardingOverlay() {
             key={i}
             className={`w-1.5 h-1.5 rounded-full transition-all duration-300 ${
               i === currentStep
-                ? 'bg-indigo-400 w-4'
+                ? 'bg-brand-400 w-4'
                 : i < currentStep
-                  ? 'bg-indigo-400/50'
+                  ? 'bg-brand-400/50'
                   : 'bg-white/20'
             }`}
           />
@@ -113,7 +113,7 @@ export function OnboardingOverlay() {
 
       {/* 自动演示模式提示 */}
       {autoDemo && (
-        <div className="fixed top-4 left-1/2 -translate-x-1/2 z-50 px-3 py-1 rounded-full bg-indigo-500/30 backdrop-blur-sm border border-indigo-400/30 text-indigo-200 text-xs">
+        <div className="fixed top-4 left-1/2 -translate-x-1/2 z-50 px-3 py-1 rounded-full bg-brand-500/30 backdrop-blur-sm border border-brand-400/30 text-brand-200 text-xs">
           自动演示中...
         </div>
       )}

client/src/components/onboarding/steps/Step1Welcome.tsx

@@ -22,7 +22,7 @@ export function Step1Welcome() {
         <div className="flex gap-3">
           <button
             onClick={nextStep}
-            className="flex-1 px-5 py-2.5 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white font-medium transition-colors"
+            className="flex-1 px-5 py-2.5 rounded-xl bg-brand-500 hover:bg-brand-400 text-text-inverse font-medium transition-colors"
           >
             开始探索
           </button>
@@ -38,7 +38,7 @@ export function Step1Welcome() {
           onClick={toggleAutoDemo}
           className={`mt-3 w-full px-4 py-2 rounded-lg text-sm transition-colors ${
             autoDemo
-              ? 'bg-indigo-500/30 text-indigo-200'
+              ? 'bg-brand-500/30 text-brand-200'
               : 'bg-white/5 text-white/50 hover:text-white/70'
           }`}
         >

client/src/components/onboarding/steps/Step2Navigate.tsx

@@ -48,7 +48,7 @@ export function Step2Navigate() {
         {showNext && (
           <button
             onClick={nextStep}
-            className="mt-4 w-full px-4 py-2 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white text-sm font-medium transition-colors"
+            className="mt-4 w-full px-4 py-2 rounded-xl bg-brand-500 hover:bg-brand-400 text-text-inverse text-sm font-medium transition-colors"
           >
             下一步 →
           </button>

client/src/components/onboarding/steps/Step4FunctionalPanel.tsx

@@ -32,7 +32,7 @@ export function Step4FunctionalPanel() {
         {!autoDemo && (
           <button
             onClick={nextStep}
-            className="mt-4 w-full px-4 py-2 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white text-sm font-medium transition-colors"
+            className="mt-4 w-full px-4 py-2 rounded-xl bg-brand-500 hover:bg-brand-400 text-text-inverse text-sm font-medium transition-colors"
           >
             下一步 →
           </button>

client/src/components/onboarding/steps/Step5ExitDemo.tsx

@@ -73,7 +73,7 @@ export function Step5ExitDemo() {
           {!autoDemo && (
             <button
               onClick={handleExit}
-              className="block mx-auto px-6 py-2 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white text-sm font-medium transition-colors"
+              className="block mx-auto px-6 py-2 rounded-xl bg-brand-500 hover:bg-brand-400 text-text-inverse text-sm font-medium transition-colors"
             >
               退出并继续 →
             </button>

client/src/components/onboarding/steps/Step6Panorama.tsx

@@ -56,7 +56,7 @@ export function Step6Panorama() {
         {!autoDemo && (
           <button
             onClick={nextStep}
-            className="w-full px-4 py-2 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white text-sm font-medium transition-colors"
+            className="w-full px-4 py-2 rounded-xl bg-brand-500 hover:bg-brand-400 text-text-inverse text-sm font-medium transition-colors"
           >
             下一步 →
           </button>

client/src/components/onboarding/steps/Step7Shortcuts.tsx

@@ -31,7 +31,7 @@ export function Step7Shortcuts() {
 
         <button
           onClick={finishGuide}
-          className="w-full px-5 py-2.5 rounded-xl bg-indigo-500 hover:bg-indigo-400 text-white font-medium transition-colors"
+          className="w-full px-5 py-2.5 rounded-xl bg-brand-500 hover:bg-brand-400 text-text-inverse font-medium transition-colors"
         >
           开始使用
         </button>

client/src/features/feynman/components/BrainstormPanel.tsx

@@ -28,7 +28,7 @@ const CATEGORY_COLORS: Record<string, { bg: string; text: string; shadow: string
   '类比': { bg: 'bg-blue-500/10', text: 'text-blue-600 dark:text-blue-400', shadow: 'shadow-blue-500/10' },
   '反例': { bg: 'bg-amber-500/10', text: 'text-amber-700 dark:text-amber-400', shadow: 'shadow-amber-500/10' },
   '应用': { bg: 'bg-emerald-500/10', text: 'text-emerald-600 dark:text-emerald-400', shadow: 'shadow-emerald-500/10' },
-  '历史': { bg: 'bg-cyan-500/10', text: 'text-cyan-600 dark:text-cyan-400', shadow: 'shadow-cyan-500/10' },
+  '历史': { bg: 'bg-cyber/10', text: 'text-cyber', shadow: 'shadow-cyber/10' },
   '争议': { bg: 'bg-orange-500/10', text: 'text-orange-600 dark:text-orange-400', shadow: 'shadow-orange-500/10' },
 };
 

client/src/features/feynman/components/ConceptInternalized.tsx

@@ -97,7 +97,7 @@ export function ConceptInternalized({
               {!prefersReduced && particles.map((p) => (
                 <motion.div
                   key={p.id}
-                  className="absolute rounded-full bg-violet-300/60"
+                  className="absolute rounded-full bg-cyber/60"
                   style={{ width: p.size, height: p.size }}
                   initial={{
                     x: Math.cos(p.angle) * p.radius,
@@ -110,19 +110,19 @@ export function ConceptInternalized({
               ))}
               {/* 珍珠核心 / Pearl core */}
               <motion.div
-                className="w-14 h-14 rounded-full bg-gradient-to-br from-violet-400/30 to-fuchsia-300/20 border border-violet-300/30 flex items-center justify-center"
+                className="w-14 h-14 rounded-full bg-gradient-to-br from-cyber/30 to-fuchsia-300/20 border border-cyber/30 flex items-center justify-center"
                 initial={prefersReduced ? {} : { scale: 0 }}
                 animate={prefersReduced ? {} : { scale: 1 }}
                 transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.5 }}
               >
-                <Sparkles className="w-6 h-6 text-violet-200" strokeWidth={1.5} />
+                <Sparkles className="w-6 h-6 text-cyber" strokeWidth={1.5} />
               </motion.div>
             </div>
 
             {/* 概念名称 / Concept name */}
             <div>
               <h2 className="text-lg font-semibold text-white/90">概念已内化</h2>
-              <p className="text-sm text-violet-200/70 mt-1">
+              <p className="text-sm text-cyber/70 mt-1">
                 你用自己的话讲清了「{concept}」
               </p>
             </div>
@@ -185,7 +185,7 @@ export function ConceptInternalized({
               {onViewFlashcards && convertedCount > 0 && (
                 <button
                   onClick={onViewFlashcards}
-                  className="flex-1 flex items-center justify-center gap-1.5 py-2.5 rounded-xl text-sm font-medium text-white bg-violet-600/80 hover:bg-violet-500/80 transition-colors"
+                  className="flex-1 flex items-center justify-center gap-1.5 py-2.5 rounded-xl text-sm font-medium text-text-inverse bg-cyber/80 hover:bg-cyber/70 transition-colors"
                 >
                   <Layers className="w-3.5 h-3.5" />
                   查看闪卡

client/src/features/feynman/components/DeepeningZone.tsx

@@ -30,7 +30,7 @@ const DEFAULT_ANGLES: DeepeningAngle[] = [
   { key: 'analogy', label: '类比', question: '这个概念像什么？能用生活中什么东西来比喻？', icon: <GitCompareArrows className="w-icon-sm h-icon-sm" strokeWidth={1.5} />, color: 'text-blue-500 bg-blue-500/10' },
   { key: 'counter', label: '反例', question: '什么情况下这个概念不成立？有例外吗？', icon: <Ban className="w-icon-sm h-icon-sm" strokeWidth={1.5} />, color: 'text-amber-600 bg-amber-500/10 dark:text-amber-400' },
   { key: 'apply', label: '应用', question: '在实际生活或工作中，这个概念怎么用？', icon: <Wrench className="w-icon-sm h-icon-sm" strokeWidth={1.5} />, color: 'text-emerald-600 bg-emerald-500/10 dark:text-emerald-400' },
-  { key: 'history', label: '历史', question: '这个概念是怎么来的？谁发现的？为什么？', icon: <Landmark className="w-icon-sm h-icon-sm" strokeWidth={1.5} />, color: 'text-cyan-600 bg-cyan-500/10 dark:text-cyan-400' },
+  { key: 'history', label: '历史', question: '这个概念是怎么来的？谁发现的？为什么？', icon: <Landmark className="w-icon-sm h-icon-sm" strokeWidth={1.5} />, color: 'text-cyber bg-cyber/10' },
   { key: 'debate', label: '争议', question: '关于这个概念，有什么不同的看法或争论？', icon: <Flame className="w-icon-sm h-icon-sm" strokeWidth={1.5} />, color: 'text-orange-600 bg-orange-500/10 dark:text-orange-400' },
 ];