novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: sync marketing pages, CMS extensions, tests and project docs

Browse Source 
同步工作区剩余变更，主要包括：
- 营销页面组件与布局持续优化（about/news/services/solutions/team 等）
- 详情页四层叙事组件、布局组件、UI 组件调整
- CMS 数据模型、API 路由、权限、工作流、站内通知、媒体管理扩展
- 新增/补充单元测试与 E2E 测试（cms-workflow.spec.ts 等）
- ESLint 9 迁移、jest/tsconfig 配置更新、依赖调整
- 新增 ADR、CMS 评估文档、Release Review / Acceptance 报告
- 移除水墨装饰组件与大体积未使用字体文件
This commit is contained in:
张翔
2026-07-25 08:04:01 +08:00
parent e35090b914
commit 10404dbb36
208 changed files with 18107 additions and 8330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/client-layout.tsx
+9 -5
View File
@@ -2,6 +2,7 @@
import { ReactNode } from 'react';
import { PageTransition } from '@/components/ui/page-transition';
import { Toaster } from '@/components/ui/sonner';
interface ClientLayoutProps {
children: ReactNode;
@@ -9,10 +10,13 @@ interface ClientLayoutProps {
export function ClientLayout({ children }: ClientLayoutProps) {
return (
<PageTransition>
<main id="main-content">
{children}
</main>
</PageTransition>
<>
<PageTransition>
<main id="main-content">
{children}
</main>
</PageTransition>
<Toaster position="top-center" richColors closeButton />
</>
);
}
src/components/layout/footer.tsx
+1 -1
View File
@@ -105,7 +105,7 @@ export function Footer() {
<div className="border-t border-gray-800 pt-6 pb-[calc(8rem+env(safe-area-inset-bottom,0px))] md:pb-8">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-6">
<p className="text-gray-300 text-xs">
© {new Date().getFullYear()} {config.name}. All rights reserved.
© {new Date().getFullYear()} {config.name}. 版权所有.
</p>
<div className="flex gap-6">
<StaticLink href="/privacy" className="text-gray-300 hover:text-white text-xs transition-colors duration-200">
src/components/layout/header.test.tsx
+12
View File
@@ -245,6 +245,18 @@ describe('Header', () => {
});
});
it('should not double-toggle menu on Enter or Space keydown', () => {
render(<Header />);
const menuButton = screen.getByTestId('mobile-menu-button');
// Enter/Space 由原生 button 的 click 处理，keydown 不应再次 toggle
fireEvent.keyDown(menuButton, { key: 'Enter' });
expect(screen.queryByTestId('mobile-navigation')).not.toBeInTheDocument();
fireEvent.keyDown(menuButton, { key: ' ' });
expect(screen.queryByTestId('mobile-navigation')).not.toBeInTheDocument();
});
it('should have proper navigation role', () => {
render(<Header />);
const nav = screen.getByTestId('desktop-navigation');
src/components/layout/header.tsx
+21 -46
View File
@@ -1,6 +1,6 @@
'use client';
import { Suspense, useState, useEffect, useCallback } from 'react';
import { useState, useEffect, useCallback } from 'react';
import { StaticLink } from '@/components/ui/static-link';
import Image from 'next/image';
import { usePathname } from 'next/navigation';
@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button';
import { useSiteConfig, type NavigationItem } from '@/lib/site-config';
import { MegaDropdown } from '@/components/layout/mega-dropdown';
import { useFocusTrap } from '@/hooks/use-focus-trap';
import { cn } from '@/lib/utils';
function HeaderContent() {
const [isOpen, setIsOpen] = useState(false);
@@ -39,18 +40,18 @@ function HeaderContent() {
}, [isOpen]);
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
setIsOpen(!isOpen);
}
// Escape 关闭菜单；Enter/Space 已由原生 button 的 onClick 处理，
// 此处不再拦截，避免键盘操作时重复触发 toggle。
if (e.key === 'Escape' && isOpen) {
e.preventDefault();
setIsOpen(false);
}
}, [isOpen]);
const config = useSiteConfig();
const handleNavClick = useCallback((_e: React.MouseEvent<HTMLAnchorElement>, item: NavigationItem) => {
const handleNavClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>, item: NavigationItem) => {
e.preventDefault();
setIsOpen(false);
window.location.href = item.href;
}, []);
@@ -85,10 +86,7 @@ function HeaderContent() {
height: isScrolled ? 64 : 80,
}}
transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
className={`
fixed top-0 left-0 right-0 z-50
bg-white border-b border-border-primary
`}
className="fixed top-0 left-0 right-0 z-50 transition-colors duration-300 bg-white border-b border-border-primary"
>
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10">
<div className="flex items-center justify-between h-16 md:h-full">
@@ -125,30 +123,28 @@ function HeaderContent() {
onClose={() => setOpenDropdown((prev) => prev === item.id ? null : prev)}
/>
) : (
<div key={item.id} className="px-1 py-2">
<div key={item.id} className="relative -mx-2 px-2 py-2">
<StaticLink
href={item.href}
onClick={(e) => handleNavClick(e, item)}
className={`
relative block px-3 py-2 text-sm font-medium
transition-all duration-300 ease-out
${isActive(item)
className={cn(
'relative inline-flex items-center px-3 py-2 text-sm font-medium',
'transition-all duration-300 ease-out',
isActive(item)
? 'text-text-primary'
: 'text-text-secondary hover:text-text-primary hover:bg-bg-secondary'
}
`}
)}
aria-current={isActive(item) ? 'page' : undefined}
>
{item.label}
<span
className={`
absolute -bottom-0.5 left-3 right-3 h-0.5 bg-brand
transition-all duration-300 ease-out
${isActive(item)
className={cn(
'absolute -bottom-0.5 left-3 right-3 h-0.5 bg-brand',
'transition-all duration-300 ease-out',
isActive(item)
? 'opacity-100 scale-x-100'
: 'opacity-0 scale-x-0'
}
`}
)}
/>
</StaticLink>
</div>
@@ -160,6 +156,7 @@ function HeaderContent() {
<Button
size="sm"
asChild
className=""
>
<StaticLink href="/contact" data-testid="consult-button">
<MessageCircle className="w-4 h-4" />
@@ -257,28 +254,6 @@ function HeaderContent() {
);
}
function HeaderFallback() {
return (
<header className="fixed top-0 left-0 right-0 z-50 bg-transparent">
<div className="container-x">
<div className="flex items-center justify-between h-16">
<div className="h-8 w-24 bg-bg-tertiary animate-skeleton-pulse rounded-sm" />
<nav className="hidden md:flex items-center gap-1">
{[1, 2, 3, 4, 5, 6].map((i) => (
<div key={i} className="h-6 w-16 bg-bg-tertiary animate-skeleton-pulse rounded-sm mx-1" />
))}
</nav>
<div className="h-9 w-20 bg-bg-tertiary animate-skeleton-pulse rounded-sm" />
</div>
</div>
</header>
);
}
export function Header() {
return (
<Suspense fallback={<HeaderFallback />}>
<HeaderContent />
</Suspense>
);
return <HeaderContent />;
}
src/components/layout/mega-dropdown.tsx
+27 -18
View File
@@ -38,12 +38,6 @@ export function MegaDropdown({ label, groups, isOpen, isActive, onToggle, onOpen
<div className="-mx-2 px-2 py-2">
<button
onClick={onToggle}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onToggle();
}
}}
className={`
relative flex items-center gap-1 px-3 py-2 text-sm font-medium
transition-all duration-300 ease-out
@@ -96,16 +90,9 @@ export function MegaDropdown({ label, groups, isOpen, isActive, onToggle, onOpen
</div>
<div className={`grid gap-2 ${group.items.length > 4 ? 'grid-cols-3' : 'grid-cols-2'}`}>
{group.items.map((item) => (
<StaticLink
key={item.id}
href={item.href}
className={`block p-3 border transition-all duration-300 ease-out group ${
item.href === '#'
? 'border-border-primary bg-bg-secondary cursor-not-allowed opacity-50'
: 'border-transparent hover:border-border-primary hover:bg-bg-secondary'
}`}
>
{group.items.map((item) => {
const isPlaceholder = item.href === '#';
const content = (
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
@@ -124,8 +111,30 @@ export function MegaDropdown({ label, groups, isOpen, isActive, onToggle, onOpen
<div className="text-xs text-text-secondary mt-1 leading-relaxed">{item.description}</div>
</div>
</div>
</StaticLink>
))}
);
if (isPlaceholder) {
return (
<div
key={item.id}
className="block p-3 border border-border-primary bg-bg-secondary cursor-not-allowed opacity-50"
aria-disabled="true"
>
{content}
</div>
);
}
return (
<StaticLink
key={item.id}
href={item.href}
className="block p-3 border border-transparent transition-all duration-300 ease-out group hover:border-border-primary hover:bg-bg-secondary"
>
{content}
</StaticLink>
);
})}
</div>
</div>
))}
src/components/layout/mobile-menu.test.tsx
+12 -8
View File
@@ -156,29 +156,33 @@ describe('MobileMenu', () => {
});
describe('Keyboard Navigation', () => {
it('should open menu with Enter key', () => {
it('should open menu with button click', () => {
render(<MobileMenu />);
const button = screen.getByRole('button', { name: '打开菜单' });
fireEvent.click(button);
expect(screen.getByRole('navigation')).toBeInTheDocument();
});
it('should open menu with Space key', () => {
it('should not double-toggle menu on Enter or Space keydown', () => {
render(<MobileMenu />);
const button = screen.getByRole('button', { name: '打开菜单' });
fireEvent.click(button);
expect(screen.getByRole('navigation')).toBeInTheDocument();
// Enter/Space 由原生 button 的 click 处理，keydown 不应再次 toggle
fireEvent.keyDown(button, { key: 'Enter' });
expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
fireEvent.keyDown(button, { key: ' ' });
expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
});
it('should close menu with Escape key', () => {
render(<MobileMenu />);
const button = screen.getByRole('button', { name: '打开菜单' });
fireEvent.click(button);
fireEvent.keyDown(button, { key: 'Escape' });
expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
});
});
src/components/layout/mobile-menu.tsx
+5 -7
View File
@@ -28,12 +28,11 @@ export function MobileMenu({ className }: MobileMenuProps) {
};
}, [isOpen]);
const handleKeyDown = (event: React.KeyboardEvent, action?: () => void) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
action?.();
}
const handleKeyDown = (event: React.KeyboardEvent) => {
// Escape 关闭菜单；Enter/Space 已由原生 button 的 onClick 处理，
// 此处不再拦截，避免键盘操作时重复触发 toggle。
if (event.key === 'Escape' && isOpen) {
event.preventDefault();
setIsOpen(false);
}
};
@@ -46,7 +45,7 @@ export function MobileMenu({ className }: MobileMenuProps) {
<div className={cn('lg:hidden', className)} ref={focusTrapRef}>
<button
onClick={() => setIsOpen(!isOpen)}
onKeyDown={(e) => handleKeyDown(e)}
onKeyDown={handleKeyDown}
className="p-3 rounded-md hover:bg-[var(--color-brand-lighter)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)] focus:ring-offset-2 min-w-[48px] min-h-[48px] flex items-center justify-center"
aria-label={isOpen ? '关闭菜单' : '打开菜单'}
aria-expanded={isOpen}
@@ -81,7 +80,6 @@ export function MobileMenu({ className }: MobileMenuProps) {
<div>
<button
onClick={() => toggleDropdown(item.dropdownKey!)}
onKeyDown={(e) => handleKeyDown(e, () => toggleDropdown(item.dropdownKey!))}
className="flex items-center justify-between w-full text-left px-4 py-4 text-[var(--color-text-primary)] hover:bg-[var(--color-brand-bg)] hover:text-[var(--color-brand)] rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-brand)] focus:ring-inset min-h-[48px]"
aria-expanded={expandedDropdown === item.dropdownKey}
>