feat: 导航菜单

.cursor/rules/home-web-coder.mdc

@@ -57,8 +57,8 @@ alwaysApply: true
   ```text
   /ComponentName
     ├── index.tsx
-    ├── useComponentAction.ts
-    ├── useComponentService.ts
+    ├── useActions.ts
+    ├── useService.ts
     └── types.ts (可选)
   ```
 

src/components/Topbar/index.tsx

@@ -9,16 +9,16 @@ import menuIcon from '@/assets/iconify/single-color/menu.svg';
 import closeIcon from '@/assets/iconify/single-color/close.svg';
 import chevronDownIcon from '@/assets/iconify/single-color/chevron-down.svg';
 import type { NavMenuItem } from '@/utils/navUtils';
-import { useTopbarAction } from './useTopbarAction';
-import { useTopbarResponsive } from './useTopbarResponsive';
-import { useTopbarService } from './useTopbarService';
+import { useAction } from './useAction';
+import { useResponsive } from './useResponsive';
+import { useService } from './useService';
 
 const MAX_CONTAINER_WIDTH = 1440;
 
 const Topbar = memo(() => {
     const { t } = useTranslation();
-    const { isMobile } = useTopbarResponsive();
-    const { menuItems, isActive, getMenuItemLabel } = useTopbarService();
+    const { isMobile } = useResponsive();
+    const { menuItems, isActive, getMenuItemLabel } = useService();
     const {
         menuContainerRef,
         isMobileMenuOpen,
@@ -30,7 +30,7 @@ const Topbar = memo(() => {
         closeMobileMenu,
         toggleOverflowMenu,
         setMenuItemRef,
-    } = useTopbarAction({ menuItems, isMobile });
+    } = useAction({ menuItems, isMobile });
 
     const overflowMenuProps: MenuProps = useMemo(
         () => ({

src/components/Topbar/useTopbarAction.ts → src/components/Topbar/useAction.ts

@@ -7,7 +7,7 @@ import type { NavMenuItem } from '@/utils/navUtils';
 const OVERFLOW_BUTTON_WIDTH = 80;
 const MENU_ITEM_GAP = 10;
 
-interface UseTopbarActionParams {
+interface UseActionParams {
     menuItems: NavMenuItem[];
     isMobile: boolean;
 }
@@ -16,7 +16,7 @@ interface UseTopbarActionParams {
  * Topbar UI 交互响应逻辑 Hook
  * 处理 UI 状态、事件处理、DOM 交互等响应逻辑
  */
-export function useTopbarAction({ menuItems, isMobile }: UseTopbarActionParams) {
+export function useAction({ menuItems, isMobile }: UseActionParams) {
     const navigate = useNavigate();
     const menuContainerRef = useRef<HTMLDivElement>(null);
     const menuItemsRef = useRef<Map<string, HTMLButtonElement>>(new Map());

src/components/Topbar/useTopbarResponsive.ts → src/components/Topbar/useResponsive.ts

@@ -6,7 +6,7 @@ const MOBILE_BREAKPOINT = 768;
  * Topbar 响应式检测 Hook
  * 检测当前是否为移动端
  */
-export function useTopbarResponsive() {
+export function useResponsive() {
     const [isMobile, setIsMobile] = useState(false);
 
     useEffect(() => {

src/components/Topbar/useTopbarService.ts → src/components/Topbar/useService.ts

@@ -9,7 +9,7 @@ import { getNavMenuItems, type NavMenuItem } from '@/utils/navUtils';
  * Topbar 业务逻辑 Hook
  * 处理菜单项获取、路由匹配、翻译等业务逻辑
  */
-export function useTopbarService() {
+export function useService() {
     const { t, i18n } = useTranslation();
     const location = useLocation();