From 59974c4969350da979c268b167f0d339e5a2c9b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B2=E6=82=A6?= <shiyue@hdzxbj.com>
Date: Wed, 4 Feb 2026 17:31:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A1=B5=E9=9D=A2=E5=8A=A8=E7=94=BB):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=BF=94=E5=9B=9E=E9=A1=B5=E9=9D=A2=E6=97=B6?=
 =?UTF-8?q?=E8=B7=B3=E8=BF=87=E5=8A=A8=E7=94=BB=E7=9A=84=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在知识领域页面添加检测机制，当用户返回页面时跳过入场动画
使用 useRef 记录访问状态，通过 useEffect 标记已访问
根据访问状态选择不同的动画变体实现平滑过渡
---
 src/pages/KnowledgeAreasPage.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/pages/KnowledgeAreasPage.tsx b/src/pages/KnowledgeAreasPage.tsx
index e812d6b..db8c7bb 100644
--- a/src/pages/KnowledgeAreasPage.tsx
+++ b/src/pages/KnowledgeAreasPage.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { motion } from 'framer-motion'
 import { ArrowRight, FileText, Wrench, FileOutput } from 'lucide-react'
@@ -13,11 +14,29 @@ const itemVariants = {
   visible: { opacity: 1, y: 0 },
 }
 
+// 跳过动画时的变体（立即显示）
+const skipAnimationVariants = {
+  hidden: { opacity: 1, y: 0 },
+  visible: { opacity: 1, y: 0 },
+}
+
 export function KnowledgeAreasPage() {
   const { id } = useParams()
   const selectedKA = id ? knowledgeAreaMap.get(id) : null
   const processes = id ? processesByKnowledgeArea.get(id) || [] : []
 
+  // 检测是否应该跳过动画（返回页面时）
+  const hasVisitedRef = useRef(false)
+  const shouldSkipAnimation = hasVisitedRef.current
+
+  useEffect(() => {
+    // 标记已访问，下次渲染时跳过动画
+    hasVisitedRef.current = true
+  }, [])
+
+  // 根据是否跳过动画选择变体
+  const activeItemVariants = shouldSkipAnimation ? skipAnimationVariants : itemVariants
+
   if (selectedKA) {
     return (
       <div className="space-y-4">
@@ -59,7 +78,7 @@ export function KnowledgeAreasPage() {
           {processes.map((process) => {
             const pg = processGroupMap.get(process.processGroupId)
             return (
-              <motion.div key={process.id} variants={itemVariants}>
+              <motion.div key={process.id} variants={activeItemVariants}>
                 <Link
                   to={`/process/${process.id}`}
                   className="group flex items-center gap-3 bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-100 dark:border-gray-700 hover:shadow-md hover:border-gray-200 dark:hover:border-gray-600 transition-all"
@@ -109,7 +128,7 @@ export function KnowledgeAreasPage() {
         className="grid md:grid-cols-2 gap-3"
       >
         {knowledgeAreas.map((ka) => (
-          <motion.div key={ka.id} variants={itemVariants}>
+          <motion.div key={ka.id} variants={activeItemVariants}>
             <Link
               to={`/knowledge-areas/${ka.id}`}
               className="group flex items-center gap-3 bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-100 dark:border-gray-700 hover:shadow-md transition-all"