# 现有软件实现

## 接入项目

沿用已有设计说明，先按 [测量与校准](calibration.md) 确定参考基线，再检查目标路由、组件树、技术栈、样式系统与项目规范。默认在现有架构内实现；用户明确要求独立原型或没有可用项目时，使用 [HTML 实现](html-reconstruction.md)。

按实际差异选择最小改动：现有组件能够表达时调整布局和设计变量；重复结构或状态需要变化时修改组件；图片缺失时进入 [素材流程](reference-assets.md)。不因截图复杂就重建整套组件库。

## 实现约束

- 沿用项目的数据加载、路由、状态管理、样式和测试方式；TypeScript 项目保持类型完整。
- 用业务含义命名组件，区分可复用展示内容与交互状态；普通图标使用项目已有图标库。
- 保留语义按钮与链接、输入标签、键盘焦点、对比度和必要的减少动态效果支持。
- 覆盖真实内容、加载、空结果、错误及关键操作；长文本、列表增长与窄屏不能破坏布局。
- 素材按项目已有资源方式导入，容器明确尺寸、宽高比、裁切与响应式行为。装饰图使用空 alt；承载独立信息的图片提供准确替代文本。

例如，项目支持静态资源导入时：

```tsx
import heroUrl from "@/assets/hero.png";

export function HeroIllustration() {
  return <img className="heroIllustration" src={heroUrl} alt="" />;
}
```

## 验证与交付

截图采集、偏差比较和跨轮修正统一使用校准流程，不另建截图循环。运行项目已有且与改动相关的类型检查、lint、测试和构建；静态检查不能代替实际操作。

交付目标路由与修改文件、已验证的操作及视口、剩余视觉差异和检查失败原因。页面应属于项目正常组件树，不能依靠整张截图背景或仅有默认状态的控件通过验收。