张翔
feb646efe5
feat: 为主导航菜单和页面区块添加ARIA属性 fix: 解决工作时间信息获取问题 perf: 优化页面滚动功能实现 fix: 修正联系页面标题显示问题 test: 运行完整测试套件验证修复效果 docs: 添加修复完成报告
1471 lines
31 KiB
Markdown
1471 lines
31 KiB
Markdown
# 系统测试修复实施计划
|
||
|
||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||
|
||
**目标:** 修复所有测试失败，实现100%测试通过率，确保系统安全上线
|
||
|
||
**架构:** 采用并行修复策略，按测试类型集中修复：表单测试 → 性能测试 → SEO和可访问性测试，每个阶段达到100%通过率后进入下一阶段
|
||
|
||
**技术栈:** Next.js 16, React 19, TypeScript, Playwright, Lighthouse, Zod
|
||
|
||
---
|
||
|
||
## 测试现状分析
|
||
|
||
### 当前测试通过率
|
||
- **表单测试**: 80% (16/20通过，4个失败)
|
||
- **性能测试**: 74.3% (26/35通过，9个失败)
|
||
- **综合审计测试**: 95.3% (61/64通过，3个未运行)
|
||
- **总体通过率**: 约85% (相比之前的41.6%有显著改善)
|
||
|
||
### 失败测试详情
|
||
|
||
#### 表单测试失败项
|
||
1. 联系表单 - 有效数据提交 (Chromium失败)
|
||
2. 联系表单 - 必填字段验证 (Chromium失败)
|
||
3. 联系表单 - 邮箱格式验证 (Chromium失败)
|
||
4. 联系表单 - API错误处理 (Chromium失败)
|
||
|
||
#### 性能测试失败项
|
||
1. 首页 - 页面加载性能 (Chromium, Webkit, Mobile Chrome失败)
|
||
2. 关于我们 - 页面加载性能 (Mobile Chrome失败)
|
||
3. 联系我们 - 页面加载性能 (Mobile Chrome失败)
|
||
4. 产品 - 页面加载性能 (Mobile Chrome失败)
|
||
5. 服务 - 页面加载性能 (Webkit, Mobile Chrome失败)
|
||
6. 案例 - 页面加载性能 (Webkit, Mobile Chrome失败)
|
||
7. 新闻 - 页面加载性能 (Webkit, Mobile Chrome失败)
|
||
|
||
---
|
||
|
||
## 阶段1：表单测试修复 (目标：100%)
|
||
|
||
### Task 1: 修复联系表单API路由实现
|
||
|
||
**文件:**
|
||
- 修改: `src/app/api/contact/route.ts`
|
||
|
||
**Step 1: 检查现有API路由实现**
|
||
|
||
```bash
|
||
cat src/app/api/contact/route.ts
|
||
```
|
||
|
||
预期: 查看当前API路由实现，了解现有逻辑
|
||
|
||
**Step 2: 创建或更新API路由文件**
|
||
|
||
如果文件不存在，创建新文件：
|
||
|
||
```typescript
|
||
import { NextRequest, NextResponse } from 'next/server';
|
||
import { submitContactForm } from '../../(marketing)/contact/actions';
|
||
|
||
export async function POST(request: NextRequest) {
|
||
try {
|
||
const formData = await request.formData();
|
||
const result = await submitContactForm(null, formData);
|
||
|
||
if (result.success) {
|
||
return NextResponse.json(result, { status: 200 });
|
||
} else {
|
||
return NextResponse.json(result, { status: 400 });
|
||
}
|
||
} catch (error) {
|
||
console.error('Contact form submission error:', error);
|
||
return NextResponse.json(
|
||
{ success: false, error: '服务器错误，请稍后重试' },
|
||
{ status: 500 }
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
**Step 3: 运行表单测试验证API修复**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:forms
|
||
```
|
||
|
||
预期: API错误处理测试通过
|
||
|
||
**Step 4: 提交修复**
|
||
|
||
```bash
|
||
git add src/app/api/contact/route.ts
|
||
git commit -m "fix: implement contact form API route with proper error handling"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: 增强表单验证逻辑
|
||
|
||
**文件:**
|
||
- 修改: `src/app/(marketing)/contact/page.tsx`
|
||
|
||
**Step 1: 添加实时验证反馈**
|
||
|
||
在联系表单组件中添加验证状态显示：
|
||
|
||
```typescript
|
||
// 在ContactPage组件中添加验证状态
|
||
const [validationStatus, setValidationStatus] = useState<Record<string, boolean>>({});
|
||
|
||
const handleBlur = (field: keyof ContactFormData, value: string) => {
|
||
validateField(field, value);
|
||
setValidationStatus(prev => ({ ...prev, [field]: true }));
|
||
};
|
||
```
|
||
|
||
**Step 2: 更新Input组件以显示验证状态**
|
||
|
||
修改Input组件调用：
|
||
|
||
```typescript
|
||
<Input
|
||
name="name"
|
||
data-testid="name-input"
|
||
label="姓名"
|
||
id="name"
|
||
placeholder="请输入您的姓名"
|
||
required
|
||
value={formData.name}
|
||
onChange={(e) => handleChange('name', e.target.value)}
|
||
onBlur={(e) => handleBlur('name', e.target.value)}
|
||
error={errors.name}
|
||
isValid={validationStatus.name && !errors.name}
|
||
/>
|
||
```
|
||
|
||
**Step 3: 运行必填字段验证测试**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:forms -- --grep "必填字段验证"
|
||
```
|
||
|
||
预期: 必填字段验证测试通过
|
||
|
||
**Step 4: 提交修复**
|
||
|
||
```bash
|
||
git add src/app/(marketing)/contact/page.tsx
|
||
git commit -m "feat: enhance form validation with real-time feedback"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: 修复邮箱格式验证
|
||
|
||
**文件:**
|
||
- 修改: `src/app/(marketing)/contact/page.tsx`
|
||
|
||
**Step 1: 检查邮箱验证正则表达式**
|
||
|
||
确认当前邮箱验证逻辑：
|
||
|
||
```typescript
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
```
|
||
|
||
**Step 2: 增强邮箱验证规则**
|
||
|
||
更新contactFormSchema中的邮箱验证：
|
||
|
||
```typescript
|
||
const contactFormSchema = z.object({
|
||
name: z.string().min(2, '姓名至少需要2个字符'),
|
||
phone: z.string().regex(/^1[3-9]\d{9}$/, '请输入有效的手机号码'),
|
||
email: z.string()
|
||
.min(1, '邮箱不能为空')
|
||
.email('请输入有效的邮箱地址')
|
||
.regex(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, '请输入有效的邮箱地址'),
|
||
subject: z.string().min(2, '主题至少需要2个字符'),
|
||
message: z.string().min(10, '留言内容至少需要10个字符'),
|
||
});
|
||
```
|
||
|
||
**Step 3: 运行邮箱格式验证测试**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:forms -- --grep "邮箱格式验证"
|
||
```
|
||
|
||
预期: 邮箱格式验证测试通过
|
||
|
||
**Step 4: 提交修复**
|
||
|
||
```bash
|
||
git add src/app/(marketing)/contact/page.tsx
|
||
git commit -m "fix: enhance email validation with stricter rules"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 4: 完善表单提交成功/失败处理
|
||
|
||
**文件:**
|
||
- 修改: `src/app/(marketing)/contact/page.tsx`
|
||
|
||
**Step 1: 添加成功消息显示元素**
|
||
|
||
在表单提交成功后显示成功消息：
|
||
|
||
```typescript
|
||
{isSubmitted && (
|
||
<div data-testid="success-message" className="text-center py-8">
|
||
<div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<CheckCircle2 className="w-8 h-8 text-white" />
|
||
</div>
|
||
<h4 className="text-xl font-semibold mb-2">消息已发送</h4>
|
||
<p className="text-gray-600">感谢您的留言，我们会尽快与您联系！</p>
|
||
</div>
|
||
)}
|
||
```
|
||
|
||
**Step 2: 添加错误消息显示元素**
|
||
|
||
在表单提交失败时显示错误消息：
|
||
|
||
```typescript
|
||
{!isSubmitted && showToast && toastType === 'error' && (
|
||
<div data-testid="error-message" className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
|
||
{toastMessage}
|
||
</div>
|
||
)}
|
||
```
|
||
|
||
**Step 3: 运行表单提交测试**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:forms -- --grep "有效数据提交"
|
||
```
|
||
|
||
预期: 有效数据提交测试通过
|
||
|
||
**Step 4: 提交修复**
|
||
|
||
```bash
|
||
git add src/app/(marketing)/contact/page.tsx
|
||
git commit -m "feat: add success and error message display for form submission"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 5: 验证所有表单测试通过
|
||
|
||
**Step 1: 运行完整表单测试套件**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:forms
|
||
```
|
||
|
||
预期: 所有表单测试100%通过 (20/20)
|
||
|
||
**Step 2: 检查测试报告**
|
||
|
||
```bash
|
||
npm run test:report
|
||
```
|
||
|
||
预期: 表单测试全部通过，无失败项
|
||
|
||
**Step 3: 创建阶段完成标记**
|
||
|
||
```bash
|
||
echo "表单测试修复完成 - $(date)" >> test-framework/progress.md
|
||
git add test-framework/progress.md
|
||
git commit -m "chore: mark form testing phase complete (100% pass rate)"
|
||
```
|
||
|
||
---
|
||
|
||
## 阶段2：性能测试修复 (目标：100%)
|
||
|
||
### Task 6: 分析性能测试失败原因
|
||
|
||
**文件:**
|
||
- 查看: `test-framework/shared/config/test-data.ts`
|
||
- 查看: `test-framework/shared/utils/performance/PerformanceMonitor.ts`
|
||
|
||
**Step 1: 检查性能阈值配置**
|
||
|
||
```bash
|
||
cat test-framework/shared/config/test-data.ts | grep -A 10 performanceThresholds
|
||
```
|
||
|
||
预期: 查看当前性能阈值设置
|
||
|
||
**Step 2: 运行性能测试获取详细指标**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:performance
|
||
```
|
||
|
||
预期: 获取各页面实际性能指标
|
||
|
||
**Step 3: 分析性能瓶颈**
|
||
|
||
```bash
|
||
# 查看测试结果中的性能指标
|
||
cat test-framework/test-framework/reports/results.json | grep -A 5 "performance"
|
||
```
|
||
|
||
预期: 识别主要性能问题（加载时间、LCP、TTI等）
|
||
|
||
**Step 4: 记录性能基准数据**
|
||
|
||
```bash
|
||
echo "性能基准数据 - $(date)" >> test-framework/performance-baseline.md
|
||
npm run test:dev-audit:performance >> test-framework/performance-baseline.md
|
||
```
|
||
|
||
---
|
||
|
||
### Task 7: 优化图片资源加载
|
||
|
||
**文件:**
|
||
- 修改: `next.config.ts`
|
||
- 修改: `src/components/ui/optimized-image.tsx`
|
||
|
||
**Step 1: 启用Next.js图片优化**
|
||
|
||
更新next.config.ts：
|
||
|
||
```typescript
|
||
import type { NextConfig } from "next";
|
||
|
||
const nextConfig: NextConfig = {
|
||
output: "export",
|
||
distDir: "dist",
|
||
images: {
|
||
unoptimized: false,
|
||
formats: ['image/avif', 'image/webp'],
|
||
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
|
||
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
|
||
},
|
||
};
|
||
|
||
export default nextConfig;
|
||
```
|
||
|
||
**Step 2: 创建优化图片组件**
|
||
|
||
创建或更新OptimizedImage组件：
|
||
|
||
```typescript
|
||
'use client';
|
||
|
||
import Image from 'next/image';
|
||
import { useState } from 'react';
|
||
|
||
interface OptimizedImageProps {
|
||
src: string;
|
||
alt: string;
|
||
width?: number;
|
||
height?: number;
|
||
className?: string;
|
||
priority?: boolean;
|
||
}
|
||
|
||
export function OptimizedImage({
|
||
src,
|
||
alt,
|
||
width = 800,
|
||
height = 600,
|
||
className = '',
|
||
priority = false
|
||
}: OptimizedImageProps) {
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
|
||
return (
|
||
<div className={`relative overflow-hidden ${className}`}>
|
||
{isLoading && (
|
||
<div className="absolute inset-0 bg-gray-200 animate-pulse" />
|
||
)}
|
||
<Image
|
||
src={src}
|
||
alt={alt}
|
||
width={width}
|
||
height={height}
|
||
priority={priority}
|
||
loading={priority ? 'eager' : 'lazy'}
|
||
onLoad={() => setIsLoading(false)}
|
||
className={`transition-opacity duration-300 ${isLoading ? 'opacity-0' : 'opacity-100'}`}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 3: 更新页面使用优化图片**
|
||
|
||
在首页和其他页面中使用OptimizedImage组件：
|
||
|
||
```typescript
|
||
import { OptimizedImage } from '@/components/ui/optimized-image';
|
||
|
||
// 替换现有的img标签为OptimizedImage
|
||
<OptimizedImage
|
||
src="/images/hero.jpg"
|
||
alt="Hero Image"
|
||
width={1920}
|
||
height={1080}
|
||
priority
|
||
/>
|
||
```
|
||
|
||
**Step 4: 运行性能测试验证图片优化**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:performance -- --grep "首页"
|
||
```
|
||
|
||
预期: 首页性能指标改善
|
||
|
||
**Step 5: 提交优化**
|
||
|
||
```bash
|
||
git add next.config.ts src/components/ui/optimized-image.tsx
|
||
git commit -m "perf: implement image optimization with WebP/AVIF support"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 8: 实施代码分割和懒加载
|
||
|
||
**文件:**
|
||
- 修改: `src/app/layout.tsx`
|
||
- 修改: `src/components/sections/*.tsx`
|
||
|
||
**Step 1: 创建动态导入组件**
|
||
|
||
创建懒加载包装器：
|
||
|
||
```typescript
|
||
'use client';
|
||
|
||
import { lazy, Suspense } from 'react';
|
||
|
||
interface LazyComponentProps {
|
||
fallback?: React.ReactNode;
|
||
}
|
||
|
||
export function createLazyComponent<T extends object>(
|
||
importFunc: () => Promise<{ default: React.ComponentType<T> }>
|
||
) {
|
||
const LazyComponent = lazy(importFunc);
|
||
|
||
return function LazyWrapper(props: T & LazyComponentProps) {
|
||
const { fallback = <div>Loading...</div>, ...componentProps } = props;
|
||
return (
|
||
<Suspense fallback={fallback}>
|
||
<LazyComponent {...(componentProps as T)} />
|
||
</Suspense>
|
||
);
|
||
};
|
||
}
|
||
```
|
||
|
||
**Step 2: 更新页面组件使用懒加载**
|
||
|
||
在layout.tsx中实施代码分割：
|
||
|
||
```typescript
|
||
import { lazy } from 'react';
|
||
|
||
// 懒加载重型组件
|
||
const HeroSection = lazy(() => import('@/components/sections/hero-section'));
|
||
const AboutSection = lazy(() => import('@/components/sections/about-section'));
|
||
const ServicesSection = lazy(() => import('@/components/sections/services-section'));
|
||
```
|
||
|
||
**Step 3: 添加预加载关键资源**
|
||
|
||
在layout.tsx中添加预加载：
|
||
|
||
```typescript
|
||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<link rel="preload" href="/fonts/AoyagiReisho.ttf" as="font" type="font/ttf" crossOrigin="" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
</head>
|
||
<body>{children}</body>
|
||
</html>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 4: 运行性能测试验证代码分割**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:performance
|
||
```
|
||
|
||
预期: 页面加载时间改善
|
||
|
||
**Step 5: 提交优化**
|
||
|
||
```bash
|
||
git add src/app/layout.tsx src/components/sections/*.tsx
|
||
git commit -m "perf: implement code splitting and lazy loading for better performance"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 9: 优化CSS和JavaScript加载
|
||
|
||
**文件:**
|
||
- 修改: `src/app/globals.css`
|
||
- 修改: `tailwind.config.*`
|
||
|
||
**Step 1: 优化Tailwind CSS配置**
|
||
|
||
更新Tailwind配置以减少CSS体积：
|
||
|
||
```typescript
|
||
import type { Config } from 'tailwindcss';
|
||
|
||
const config: Config = {
|
||
content: [
|
||
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
||
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
||
],
|
||
theme: {
|
||
extend: {},
|
||
},
|
||
plugins: [],
|
||
corePlugins: {
|
||
preflight: true,
|
||
},
|
||
};
|
||
export default config;
|
||
```
|
||
|
||
**Step 2: 移除未使用的CSS**
|
||
|
||
清理globals.css中的未使用样式：
|
||
|
||
```css
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
/* 只保留必要的自定义样式 */
|
||
:root {
|
||
--foreground-rgb: 0, 0, 0;
|
||
--background-start-rgb: 214, 219, 220;
|
||
--background-end-rgb: 255, 255, 255;
|
||
}
|
||
|
||
body {
|
||
color: rgb(var(--foreground-rgb));
|
||
background: linear-gradient(
|
||
to bottom,
|
||
transparent,
|
||
rgb(var(--background-end-rgb))
|
||
)
|
||
rgb(var(--background-start-rgb));
|
||
}
|
||
```
|
||
|
||
**Step 3: 启用CSS压缩**
|
||
|
||
在next.config.ts中启用CSS压缩：
|
||
|
||
```typescript
|
||
const nextConfig: NextConfig = {
|
||
output: "export",
|
||
distDir: "dist",
|
||
images: {
|
||
unoptimized: false,
|
||
formats: ['image/avif', 'image/webp'],
|
||
},
|
||
compress: true,
|
||
swcMinify: true,
|
||
};
|
||
```
|
||
|
||
**Step 4: 运行性能测试验证CSS优化**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:performance
|
||
```
|
||
|
||
预期: CSS加载时间减少
|
||
|
||
**Step 5: 提交优化**
|
||
|
||
```bash
|
||
git add src/app/globals.css tailwind.config.* next.config.ts
|
||
git commit -m "perf: optimize CSS and JavaScript loading with compression"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 10: 实施缓存策略
|
||
|
||
**文件:**
|
||
- 修改: `next.config.ts`
|
||
- 创建: `public/robots.txt`
|
||
- 创建: `public/sitemap.xml`
|
||
|
||
**Step 1: 配置静态资源缓存**
|
||
|
||
更新next.config.ts：
|
||
|
||
```typescript
|
||
const nextConfig: NextConfig = {
|
||
output: "export",
|
||
distDir: "dist",
|
||
images: {
|
||
unoptimized: false,
|
||
formats: ['image/avif', 'image/webp'],
|
||
},
|
||
compress: true,
|
||
swcMinify: true,
|
||
headers: async () => {
|
||
return [
|
||
{
|
||
source: '/:all*(svg|jpg|png|webp|avif)',
|
||
locale: false,
|
||
headers: [
|
||
{
|
||
key: 'Cache-Control',
|
||
value: 'public, max-age=31536000, immutable',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
source: '/:path*',
|
||
headers: [
|
||
{
|
||
key: 'Cache-Control',
|
||
value: 'public, max-age=3600, must-revalidate',
|
||
},
|
||
],
|
||
},
|
||
];
|
||
},
|
||
};
|
||
```
|
||
|
||
**Step 2: 创建robots.txt**
|
||
|
||
```bash
|
||
cat > public/robots.txt << 'EOF'
|
||
User-agent: *
|
||
Allow: /
|
||
Sitemap: https://yourdomain.com/sitemap.xml
|
||
EOF
|
||
```
|
||
|
||
**Step 3: 创建sitemap.xml**
|
||
|
||
```bash
|
||
cat > public/sitemap.xml << 'EOF'
|
||
<?xml version="1.0" encoding="UTF-8"?>
|
||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||
<url>
|
||
<loc>https://yourdomain.com/</loc>
|
||
<lastmod>2026-03-06</lastmod>
|
||
<changefreq>daily</changefreq>
|
||
<priority>1.0</priority>
|
||
</url>
|
||
<url>
|
||
<loc>https://yourdomain.com/about</loc>
|
||
<lastmod>2026-03-06</lastmod>
|
||
<changefreq>weekly</changefreq>
|
||
<priority>0.8</priority>
|
||
</url>
|
||
<url>
|
||
<loc>https://yourdomain.com/contact</loc>
|
||
<lastmod>2026-03-06</lastmod>
|
||
<changefreq>monthly</changefreq>
|
||
<priority>0.6</priority>
|
||
</url>
|
||
</urlset>
|
||
EOF
|
||
```
|
||
|
||
**Step 4: 运行性能测试验证缓存策略**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:performance
|
||
```
|
||
|
||
预期: 重复访问加载时间显著减少
|
||
|
||
**Step 5: 提交优化**
|
||
|
||
```bash
|
||
git add next.config.ts public/robots.txt public/sitemap.xml
|
||
git commit -m "perf: implement caching strategy for static resources"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 11: 优化字体加载
|
||
|
||
**文件:**
|
||
- 修改: `src/app/layout.tsx`
|
||
- 修改: `src/app/globals.css`
|
||
|
||
**Step 1: 使用next/font优化字体加载**
|
||
|
||
更新layout.tsx：
|
||
|
||
```typescript
|
||
import { Inter } from 'next/font/google';
|
||
import './globals.css';
|
||
|
||
const inter = Inter({
|
||
subsets: ['latin'],
|
||
display: 'swap',
|
||
variable: '--font-inter',
|
||
});
|
||
|
||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<html lang="zh-CN" className={inter.variable}>
|
||
<body className={inter.className}>{children}</body>
|
||
</html>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 2: 添加字体预加载**
|
||
|
||
在layout.tsx中添加自定义字体预加载：
|
||
|
||
```typescript
|
||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<link
|
||
rel="preload"
|
||
href="/fonts/AoyagiReisho.ttf"
|
||
as="font"
|
||
type="font/ttf"
|
||
crossOrigin=""
|
||
/>
|
||
</head>
|
||
<body className={inter.className}>{children}</body>
|
||
</html>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 3: 优化字体显示**
|
||
|
||
在globals.css中添加字体显示优化：
|
||
|
||
```css
|
||
@font-face {
|
||
font-family: 'AoyagiReisho';
|
||
src: url('/fonts/AoyagiReisho.ttf') format('truetype');
|
||
font-display: swap;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-inter), system-ui, sans-serif;
|
||
}
|
||
```
|
||
|
||
**Step 4: 运行性能测试验证字体优化**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:performance
|
||
```
|
||
|
||
预期: 字体加载时间减少，FCP改善
|
||
|
||
**Step 5: 提交优化**
|
||
|
||
```bash
|
||
git add src/app/layout.tsx src/app/globals.css
|
||
git commit -m "perf: optimize font loading with next/font and font-display"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 12: 验证所有性能测试通过
|
||
|
||
**Step 1: 运行完整性能测试套件**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:performance
|
||
```
|
||
|
||
预期: 所有性能测试100%通过 (35/35)
|
||
|
||
**Step 2: 检查性能指标**
|
||
|
||
```bash
|
||
npm run test:report
|
||
```
|
||
|
||
预期: 所有页面性能指标在阈值范围内
|
||
|
||
**Step 3: 创建阶段完成标记**
|
||
|
||
```bash
|
||
echo "性能测试修复完成 - $(date)" >> test-framework/progress.md
|
||
git add test-framework/progress.md
|
||
git commit -m "chore: mark performance testing phase complete (100% pass rate)"
|
||
```
|
||
|
||
---
|
||
|
||
## 阶段3：SEO和可访问性测试修复 (目标：100%)
|
||
|
||
### Task 13: 运行SEO和可访问性测试获取基线
|
||
|
||
**Step 1: 运行SEO测试**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:seo
|
||
```
|
||
|
||
预期: 获取SEO测试基线数据
|
||
|
||
**Step 2: 运行可访问性测试**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:accessibility
|
||
```
|
||
|
||
预期: 获取可访问性测试基线数据
|
||
|
||
**Step 3: 记录基线数据**
|
||
|
||
```bash
|
||
echo "SEO和可访问性基线数据 - $(date)" >> test-framework/seo-a11y-baseline.md
|
||
npm run test:dev-audit:seo >> test-framework/seo-a11y-baseline.md
|
||
npm run test:dev-audit:accessibility >> test-framework/seo-a11y-baseline.md
|
||
```
|
||
|
||
---
|
||
|
||
### Task 14: 优化SEO元数据
|
||
|
||
**文件:**
|
||
- 修改: `src/app/layout.tsx`
|
||
- 修改: `src/app/(marketing)/**/page.tsx`
|
||
|
||
**Step 1: 更新根布局元数据**
|
||
|
||
在layout.tsx中添加完整的SEO元数据：
|
||
|
||
```typescript
|
||
import type { Metadata } from 'next';
|
||
|
||
export const metadata: Metadata = {
|
||
title: 'Novalon - 专业的数字化解决方案提供商',
|
||
description: 'Novalon提供专业的数字化转型、软件开发、技术咨询等服务，帮助企业实现业务创新和增长。',
|
||
keywords: ['数字化转型', '软件开发', '技术咨询', '业务创新'],
|
||
authors: [{ name: 'Novalon Team' }],
|
||
creator: 'Novalon',
|
||
publisher: 'Novalon',
|
||
formatDetection: {
|
||
email: false,
|
||
address: false,
|
||
telephone: false,
|
||
},
|
||
metadataBase: new URL('https://yourdomain.com'),
|
||
openGraph: {
|
||
type: 'website',
|
||
locale: 'zh_CN',
|
||
url: 'https://yourdomain.com',
|
||
title: 'Novalon - 专业的数字化解决方案提供商',
|
||
description: 'Novalon提供专业的数字化转型、软件开发、技术咨询等服务',
|
||
siteName: 'Novalon',
|
||
},
|
||
twitter: {
|
||
card: 'summary_large_image',
|
||
title: 'Novalon - 专业的数字化解决方案提供商',
|
||
description: 'Novalon提供专业的数字化转型、软件开发、技术咨询等服务',
|
||
},
|
||
robots: {
|
||
index: true,
|
||
follow: true,
|
||
googleBot: {
|
||
index: true,
|
||
follow: true,
|
||
'max-video-preview': -1,
|
||
'max-image-preview': 'large',
|
||
'max-snippet': -1,
|
||
},
|
||
},
|
||
verification: {
|
||
google: 'your-google-verification-code',
|
||
},
|
||
};
|
||
```
|
||
|
||
**Step 2: 更新各页面元数据**
|
||
|
||
为每个页面添加特定的元数据，例如contact/page.tsx：
|
||
|
||
```typescript
|
||
import type { Metadata } from 'next';
|
||
|
||
export const metadata: Metadata = {
|
||
title: '联系我们 - Novalon',
|
||
description: '联系Novalon获取专业的数字化转型和软件开发服务咨询',
|
||
openGraph: {
|
||
title: '联系我们 - Novalon',
|
||
description: '联系Novalon获取专业的数字化转型和软件开发服务咨询',
|
||
url: 'https://yourdomain.com/contact',
|
||
},
|
||
};
|
||
```
|
||
|
||
**Step 3: 添加结构化数据**
|
||
|
||
创建结构化数据组件：
|
||
|
||
```typescript
|
||
// src/components/seo/structured-data.tsx
|
||
export function StructuredData({ data }: { data: Record<string, any> }) {
|
||
return (
|
||
<script
|
||
type="application/ld+json"
|
||
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
|
||
/>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 4: 在页面中使用结构化数据**
|
||
|
||
在layout.tsx中添加组织结构化数据：
|
||
|
||
```typescript
|
||
import { StructuredData } from '@/components/seo/structured-data';
|
||
|
||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||
const organizationData = {
|
||
'@context': 'https://schema.org',
|
||
'@type': 'Organization',
|
||
name: 'Novalon',
|
||
url: 'https://yourdomain.com',
|
||
logo: 'https://yourdomain.com/logo.svg',
|
||
contactPoint: {
|
||
'@type': 'ContactPoint',
|
||
telephone: '+86-xxx-xxxx-xxxx',
|
||
contactType: 'customer service',
|
||
},
|
||
};
|
||
|
||
return (
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<StructuredData data={organizationData} />
|
||
</head>
|
||
<body>{children}</body>
|
||
</html>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 5: 运行SEO测试验证优化**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:seo
|
||
```
|
||
|
||
预期: SEO测试通过率提升
|
||
|
||
**Step 6: 提交优化**
|
||
|
||
```bash
|
||
git add src/app/layout.tsx src/app/(marketing)/**/page.tsx src/components/seo/structured-data.tsx
|
||
git commit -m "seo: enhance metadata and add structured data for better SEO"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 15: 改善可访问性
|
||
|
||
**文件:**
|
||
- 修改: `src/components/ui/*.tsx`
|
||
- 修改: `src/app/(marketing)/**/page.tsx`
|
||
|
||
**Step 1: 添加ARIA标签**
|
||
|
||
为所有交互元素添加适当的ARIA标签：
|
||
|
||
```typescript
|
||
<Button
|
||
type="submit"
|
||
data-testid="submit-button"
|
||
aria-label="提交联系表单"
|
||
disabled={isSubmitting}
|
||
>
|
||
{isSubmitting ? '发送中...' : '发送消息'}
|
||
</Button>
|
||
```
|
||
|
||
**Step 2: 改善键盘导航**
|
||
|
||
确保所有交互元素可通过键盘访问：
|
||
|
||
```typescript
|
||
// 添加键盘事件处理
|
||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||
if (e.key === 'Enter' || e.key === ' ') {
|
||
e.preventDefault();
|
||
handleClick();
|
||
}
|
||
};
|
||
|
||
<div
|
||
role="button"
|
||
tabIndex={0}
|
||
onKeyDown={handleKeyDown}
|
||
onClick={handleClick}
|
||
aria-label="点击执行操作"
|
||
>
|
||
内容
|
||
</div>
|
||
```
|
||
|
||
**Step 3: 优化颜色对比度**
|
||
|
||
确保文本和背景颜色符合WCAG AA标准：
|
||
|
||
```css
|
||
/* 确保对比度至少为4.5:1 */
|
||
.text-primary {
|
||
color: #1C1C1C; /* 与白色背景对比度 > 4.5:1 */
|
||
}
|
||
|
||
.text-secondary {
|
||
color: #5C5C5C; /* 与白色背景对比度 > 4.5:1 */
|
||
}
|
||
```
|
||
|
||
**Step 4: 添加跳转链接**
|
||
|
||
为键盘用户提供跳转链接：
|
||
|
||
```typescript
|
||
// 在layout.tsx中添加
|
||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<html lang="zh-CN">
|
||
<body>
|
||
<a
|
||
href="#main-content"
|
||
className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-white px-4 py-2 rounded shadow-lg"
|
||
>
|
||
跳转到主要内容
|
||
</a>
|
||
<main id="main-content">
|
||
{children}
|
||
</main>
|
||
</body>
|
||
</html>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Step 5: 运行可访问性测试验证改进**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:accessibility
|
||
```
|
||
|
||
预期: 可访问性测试通过率提升
|
||
|
||
**Step 6: 提交改进**
|
||
|
||
```bash
|
||
git add src/components/ui/*.tsx src/app/(marketing)/**/page.tsx src/app/layout.tsx
|
||
git commit -m "a11y: improve accessibility with ARIA labels and keyboard navigation"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 16: 验证所有SEO和可访问性测试通过
|
||
|
||
**Step 1: 运行完整SEO测试套件**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:seo
|
||
```
|
||
|
||
预期: 所有SEO测试100%通过
|
||
|
||
**Step 2: 运行完整可访问性测试套件**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit:accessibility
|
||
```
|
||
|
||
预期: 所有可能性测试100%通过
|
||
|
||
**Step 3: 运行所有测试验证整体通过率**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit
|
||
```
|
||
|
||
预期: 所有测试100%通过
|
||
|
||
**Step 4: 创建阶段完成标记**
|
||
|
||
```bash
|
||
echo "SEO和可访问性测试修复完成 - $(date)" >> test-framework/progress.md
|
||
git add test-framework/progress.md
|
||
git commit -m "chore: mark SEO and accessibility testing phase complete (100% pass rate)"
|
||
```
|
||
|
||
---
|
||
|
||
## 阶段4：最终验证和上线准备
|
||
|
||
### Task 17: 运行完整测试套件验证
|
||
|
||
**Step 1: 运行所有测试**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test:dev-audit
|
||
```
|
||
|
||
预期: 所有测试100%通过，无失败项
|
||
|
||
**Step 2: 生成测试报告**
|
||
|
||
```bash
|
||
npm run test:report
|
||
```
|
||
|
||
预期: 生成详细的测试报告
|
||
|
||
**Step 3: 检查测试覆盖率**
|
||
|
||
```bash
|
||
# 检查是否有未覆盖的测试场景
|
||
cat test-framework/test-framework/reports/results.json
|
||
```
|
||
|
||
预期: 确认所有关键场景都有测试覆盖
|
||
|
||
---
|
||
|
||
### Task 18: 性能基准测试
|
||
|
||
**Step 1: 运行Lighthouse审计**
|
||
|
||
```bash
|
||
npm run audit:performance
|
||
npm run audit:seo
|
||
npm run audit:accessibility
|
||
```
|
||
|
||
预期: 所有Lighthouse审计分数 >= 90
|
||
|
||
**Step 2: 记录最终性能指标**
|
||
|
||
```bash
|
||
echo "最终性能指标 - $(date)" >> test-framework/final-performance-metrics.md
|
||
npm run audit:performance >> test-framework/final-performance-metrics.md
|
||
```
|
||
|
||
**Step 3: 对比性能改善**
|
||
|
||
```bash
|
||
# 对比优化前后的性能指标
|
||
diff test-framework/performance-baseline.md test-framework/final-performance-metrics.md
|
||
```
|
||
|
||
预期: 性能指标显著改善
|
||
|
||
---
|
||
|
||
### Task 19: 安全审计
|
||
|
||
**Step 1: 运行安全测试**
|
||
|
||
```bash
|
||
cd test-framework
|
||
npm run test -- --grep "security"
|
||
```
|
||
|
||
预期: 所有安全测试通过
|
||
|
||
**Step 2: 检查依赖安全**
|
||
|
||
```bash
|
||
npm audit
|
||
```
|
||
|
||
预期: 无高危安全漏洞
|
||
|
||
**Step 3: 修复安全漏洞（如果有）**
|
||
|
||
```bash
|
||
npm audit fix
|
||
```
|
||
|
||
**Step 4: 提交安全修复**
|
||
|
||
```bash
|
||
git add package.json package-lock.json
|
||
git commit -m "security: fix vulnerabilities in dependencies"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 20: 生产环境构建测试
|
||
|
||
**Step 1: 构建生产版本**
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
预期: 构建成功，无错误
|
||
|
||
**Step 2: 检查构建输出**
|
||
|
||
```bash
|
||
ls -lh dist/
|
||
```
|
||
|
||
预期: 构建输出文件正常
|
||
|
||
**Step 3: 本地测试生产构建**
|
||
|
||
```bash
|
||
npm run start
|
||
```
|
||
|
||
预期: 生产版本正常运行
|
||
|
||
**Step 4: 运行E2E测试验证生产构建**
|
||
|
||
```bash
|
||
cd test-framework
|
||
BASE_URL=http://localhost:3000 npm run test
|
||
```
|
||
|
||
预期: 所有E2E测试通过
|
||
|
||
---
|
||
|
||
### Task 21: 创建上线检查清单
|
||
|
||
**Step 1: 创建上线检查清单**
|
||
|
||
```bash
|
||
cat > test-framework/deployment-checklist.md << 'EOF'
|
||
# 上线检查清单
|
||
|
||
## 测试验证
|
||
- [ ] 所有单元测试通过 (100%)
|
||
- [ ] 所有集成测试通过 (100%)
|
||
- [ ] 所有E2E测试通过 (100%)
|
||
- [ ] 性能测试通过 (所有指标在阈值内)
|
||
- [ ] SEO测试通过 (分数 >= 90)
|
||
- [ ] 可访问性测试通过 (分数 >= 90)
|
||
- [ ] 安全测试通过 (无高危漏洞)
|
||
|
||
## 性能指标
|
||
- [ ] 首页加载时间 < 2s
|
||
- [ ] LCP < 2.5s
|
||
- [ ] FID < 100ms
|
||
- [ ] CLS < 0.1
|
||
- [ ] TTI < 3.5s
|
||
|
||
## 安全检查
|
||
- [ ] 依赖安全审计通过
|
||
- [ ] CSRF保护启用
|
||
- [ ] XSS防护启用
|
||
- [ ] CSP策略配置
|
||
- [ ] HTTPS强制跳转
|
||
|
||
## SEO检查
|
||
- [ ] 所有页面有合适的title和description
|
||
- [ ] 结构化数据正确配置
|
||
- [ ] sitemap.xml已生成
|
||
- [ ] robots.txt已配置
|
||
- [ ] Open Graph标签正确
|
||
|
||
## 可访问性检查
|
||
- [ ] 所有图片有alt属性
|
||
- [ ] 表单有正确的label
|
||
- [ ] 键盘导航正常工作
|
||
- [ ] ARIA标签正确配置
|
||
- [ ] 颜色对比度符合WCAG AA标准
|
||
|
||
## 部署准备
|
||
- [ ] 环境变量配置正确
|
||
- [ ] 数据库连接配置正确
|
||
- [ ] API端点配置正确
|
||
- [ ] CDN配置正确
|
||
- [ ] 监控和日志配置正确
|
||
|
||
## 文档准备
|
||
- [ ] README更新
|
||
- [ ] API文档更新
|
||
- [ ] 部署文档更新
|
||
- [ ] 运维文档更新
|
||
EOF
|
||
```
|
||
|
||
**Step 2: 验证检查清单**
|
||
|
||
```bash
|
||
# 逐项验证检查清单
|
||
cat test-framework/deployment-checklist.md
|
||
```
|
||
|
||
预期: 所有检查项都已完成
|
||
|
||
**Step 3: 提交检查清单**
|
||
|
||
```bash
|
||
git add test-framework/deployment-checklist.md
|
||
git commit -m "docs: add deployment checklist"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 22: 最终代码审查和提交
|
||
|
||
**Step 1: 运行代码检查**
|
||
|
||
```bash
|
||
npm run lint
|
||
```
|
||
|
||
预期: 无lint错误
|
||
|
||
**Step 2: 运行类型检查**
|
||
|
||
```bash
|
||
npx tsc --noEmit
|
||
```
|
||
|
||
预期: 无类型错误
|
||
|
||
**Step 3: 查看所有变更**
|
||
|
||
```bash
|
||
git diff
|
||
```
|
||
|
||
预期: 确认所有变更都是必要的
|
||
|
||
**Step 4: 创建最终提交**
|
||
|
||
```bash
|
||
git add .
|
||
git commit -m "feat: complete all test fixes and achieve 100% test pass rate
|
||
|
||
- Fixed form validation and submission (100% pass rate)
|
||
- Optimized performance with image optimization, code splitting, and caching (100% pass rate)
|
||
- Enhanced SEO with metadata and structured data (100% pass rate)
|
||
- Improved accessibility with ARIA labels and keyboard navigation (100% pass rate)
|
||
- All tests passing: 100% pass rate achieved
|
||
- Ready for production deployment"
|
||
```
|
||
|
||
**Step 5: 创建发布标签**
|
||
|
||
```bash
|
||
git tag -a v1.0.0 -m "Production release with 100% test pass rate"
|
||
git push origin v1.0.0
|
||
```
|
||
|
||
---
|
||
|
||
## 预期成果
|
||
|
||
### 测试通过率
|
||
- **表单测试**: 100% (20/20)
|
||
- **性能测试**: 100% (35/35)
|
||
- **SEO测试**: 100% (所有SEO测试)
|
||
- **可访问性测试**: 100% (所有可访问性测试)
|
||
- **总体通过率**: 100%
|
||
|
||
### 性能指标
|
||
- **首页加载时间**: < 2s
|
||
- **LCP**: < 2.5s
|
||
- **FID**: < 100ms
|
||
- **CLS**: < 0.1
|
||
- **TTI**: < 3.5s
|
||
|
||
### 质量指标
|
||
- **代码覆盖率**: >= 80%
|
||
- **Lighthouse分数**: >= 90
|
||
- **无安全漏洞**: 0高危漏洞
|
||
- **WCAG合规**: AA级别
|
||
|
||
## 风险缓解
|
||
|
||
### 潜在风险
|
||
1. **性能优化可能影响现有功能**
|
||
- 缓解措施: 充分测试，逐步部署
|
||
|
||
2. **SEO优化可能需要内容调整**
|
||
- 缓解措施: 与产品团队协调，确保内容质量
|
||
|
||
3. **可访问性改进可能影响UI设计**
|
||
- 缓解措施: 与设计团队沟通，平衡美观和可访问性
|
||
|
||
### 回滚计划
|
||
1. 保留优化前的代码分支
|
||
2. 准备快速回滚脚本
|
||
3. 监控上线后的关键指标
|
||
4. 建立紧急响应机制
|
||
|
||
## 时间估算
|
||
|
||
- **阶段1（表单测试修复）**: 2-3天
|
||
- **阶段2（性能测试修复）**: 5-7天
|
||
- **阶段3（SEO和可访问性修复）**: 3-4天
|
||
- **阶段4（最终验证和上线准备）**: 2-3天
|
||
- **总计**: 12-17天
|
||
|
||
## 成功标准
|
||
|
||
1. ✅ 所有测试100%通过
|
||
2. ✅ 性能指标达到目标
|
||
3. ✅ 安全审计通过
|
||
4. ✅ SEO和可访问性达标
|
||
5. ✅ 生产构建成功
|
||
6. ✅ 上线检查清单完成
|
||
7. ✅ 文档更新完整
|
||
|
||
---
|
||
|
||
**计划完成时间**: 2026-03-06
|
||
**预计上线时间**: 2026-03-23
|
||
**负责人**: 张翔
|
||
**审核人**: 待定 |