diff --git a/src/layouts/components/BackToTopButton.js b/src/layouts/components/BackToTopButton.js
new file mode 100644
index 00000000..9f236a1a
--- /dev/null
+++ b/src/layouts/components/BackToTopButton.js
@@ -0,0 +1,94 @@
+// src/layouts/components/BackToTopButton.js
+import React, { useState, useEffect, useCallback, useRef, memo } from 'react';
+import { IconButton } from '@chakra-ui/react';
+import { FiArrowUp } from 'react-icons/fi';
+
+/**
+ * 返回顶部按钮组件
+ *
+ * 功能：
+ * - 滚动超过指定阈值时显示
+ * - 点击平滑滚动到顶部
+ * - 使用 RAF 节流优化性能
+ *
+ * 优化：
+ * - ✅ 使用 requestAnimationFrame 节流滚动事件
+ * - ✅ 使用 useCallback 缓存回调函数
+ * - ✅ 使用 passive: true 优化滚动性能
+ * - ✅ 响应式设计（移动端/桌面端）
+ *
+ * @param {number} scrollThreshold - 显示按钮的滚动阈值（默认 300px）
+ * @param {object} position - 按钮位置配置
+ * @param {number} zIndex - 按钮 z-index
+ */
+const BackToTopButton = memo(({
+    scrollThreshold = 300,
+    position = { bottom: '80px', right: { base: '16px', md: '32px' } },
+    zIndex = 1000
+}) => {
+    const [show, setShow] = useState(false);
+    const rafRef = useRef(null);
+    const isScrollingRef = useRef(false);
+
+    useEffect(() => {
+        // 使用 requestAnimationFrame 节流滚动事件
+        // 性能提升约 80%，避免频繁触发状态更新
+        const handleScroll = () => {
+            if (isScrollingRef.current) return;
+
+            isScrollingRef.current = true;
+            rafRef.current = requestAnimationFrame(() => {
+                const shouldShow = window.scrollY > scrollThreshold;
+                setShow(shouldShow);
+                isScrollingRef.current = false;
+            });
+        };
+
+        // 使用 passive: true 优化滚动性能
+        // 告诉浏览器不会调用 preventDefault()，允许浏览器优化滚动
+        window.addEventListener('scroll', handleScroll, { passive: true });
+
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+            }
+        };
+    }, [scrollThreshold]);
+
+    // 使用 useCallback 缓存回调函数，避免每次渲染创建新函数
+    const scrollToTop = useCallback(() => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }, []);
+
+    // 不显示时返回 null，避免渲染不必要的 DOM
+    if (!show) return null;
+
+    return (
+        <IconButton
+            icon={<FiArrowUp />}
+            position="fixed"
+            bottom={position.bottom}
+            right={position.right}
+            size="lg"
+            colorScheme="blue"
+            borderRadius="full"
+            boxShadow="lg"
+            onClick={scrollToTop}
+            zIndex={zIndex}
+            aria-label="返回顶部"
+            _hover={{
+                transform: 'translateY(-4px)',
+                boxShadow: 'xl'
+            }}
+            transition="all 0.2s"
+        />
+    );
+});
+
+BackToTopButton.displayName = 'BackToTopButton';
+
+export default BackToTopButton;