docs: make checklist checkbox attributes semantic

docs/Advanced-old/01-concept/1.2-vibe-coding-mindset/1.2.4-code-review.md

@@ -32,34 +32,34 @@ graph TD
 
 #### 1. 功能正确性
 
-- [ ] 代码是否实现了预期功能？
-- [ ] 逻辑流程是否正确？
-- [ ] 返回值和类型是否正确？
+- <input type="checkbox" name="1-功能正确性-checklist" value="代码是否实现了预期功能" /> <label for="代码是否实现了预期功能">代码是否实现了预期功能？</label>
+- <input type="checkbox" name="1-功能正确性-checklist" value="逻辑流程是否正确" /> <label for="逻辑流程是否正确">逻辑流程是否正确？</label>
+- <input type="checkbox" name="1-功能正确性-checklist" value="返回值和类型是否正确" /> <label for="返回值和类型是否正确">返回值和类型是否正确？</label>
 
 #### 2. 安全性检查
 
-- [ ] 是否暴露了敏感信息（API Key、密码）？
-- [ ] 是否有 SQL 注入风险？
-- [ ] 是否有 XSS 风险？
-- [ ] 用户输入是否经过验证？
+- <input type="checkbox" name="2-安全性检查-checklist" value="是否暴露了敏感信息api-key密码" /> <label for="是否暴露了敏感信息api-key密码">是否暴露了敏感信息（API Key、密码）？</label>
+- <input type="checkbox" name="2-安全性检查-checklist" value="是否有-sql-注入风险" /> <label for="是否有-sql-注入风险">是否有 SQL 注入风险？</label>
+- <input type="checkbox" name="2-安全性检查-checklist" value="是否有-xss-风险" /> <label for="是否有-xss-风险">是否有 XSS 风险？</label>
+- <input type="checkbox" name="2-安全性检查-checklist" value="用户输入是否经过验证" /> <label for="用户输入是否经过验证">用户输入是否经过验证？</label>
 
 #### 3. 代码规范
 
-- [ ] 命名是否符合项目约定？
-- [ ] 代码风格是否一致？
-- [ ] 是否有适当的注释？
+- <input type="checkbox" name="3-代码规范-checklist" value="命名是否符合项目约定" /> <label for="命名是否符合项目约定">命名是否符合项目约定？</label>
+- <input type="checkbox" name="3-代码规范-checklist" value="代码风格是否一致" /> <label for="代码风格是否一致">代码风格是否一致？</label>
+- <input type="checkbox" name="3-代码规范-checklist" value="是否有适当的注释" /> <label for="是否有适当的注释">是否有适当的注释？</label>
 
 #### 4. 性能考量
 
-- [ ] 是否有不必要的重复计算？
-- [ ] 是否有 N+1 查询问题？
-- [ ] 是否有内存泄漏风险？
+- <input type="checkbox" name="4-性能考量-checklist" value="是否有不必要的重复计算" /> <label for="是否有不必要的重复计算">是否有不必要的重复计算？</label>
+- <input type="checkbox" name="4-性能考量-checklist" value="是否有-n1-查询问题" /> <label for="是否有-n1-查询问题">是否有 N+1 查询问题？</label>
+- <input type="checkbox" name="4-性能考量-checklist" value="是否有内存泄漏风险" /> <label for="是否有内存泄漏风险">是否有内存泄漏风险？</label>
 
 #### 5. 边界情况
 
-- [ ] 空值/空数组如何处理？
-- [ ] 超大数据量如何处理？
-- [ ] 网络错误如何处理？
+- <input type="checkbox" name="5-边界情况-checklist" value="空值-空数组如何处理" /> <label for="空值-空数组如何处理">空值/空数组如何处理？</label>
+- <input type="checkbox" name="5-边界情况-checklist" value="超大数据量如何处理" /> <label for="超大数据量如何处理">超大数据量如何处理？</label>
+- <input type="checkbox" name="5-边界情况-checklist" value="网络错误如何处理" /> <label for="网络错误如何处理">网络错误如何处理？</label>
 
 ### AI 常见的"胡说八道"
 

docs/Advanced-old/02-tech-stack/2.2-rendering-strategies/2.2.5-mixed-rendering.md

@@ -168,11 +168,11 @@ flowchart TD
 
 当你设计页面渲染策略时，检查以下问题：
 
-- [ ] 这个页面需要被搜索引擎收录吗？
-- [ ] 内容是所有用户相同，还是因人而异？
-- [ ] 数据多久更新一次？
-- [ ] 页面对首屏速度要求高吗？
-- [ ] 服务器能承受多大并发？
+- <input type="checkbox" name="验收清单-checklist" value="这个页面需要被搜索引擎收录吗" /> <label for="这个页面需要被搜索引擎收录吗">这个页面需要被搜索引擎收录吗？</label>
+- <input type="checkbox" name="验收清单-checklist" value="内容是所有用户相同还是因人而异" /> <label for="内容是所有用户相同还是因人而异">内容是所有用户相同，还是因人而异？</label>
+- <input type="checkbox" name="验收清单-checklist" value="数据多久更新一次" /> <label for="数据多久更新一次">数据多久更新一次？</label>
+- <input type="checkbox" name="验收清单-checklist" value="页面对首屏速度要求高吗" /> <label for="页面对首屏速度要求高吗">页面对首屏速度要求高吗？</label>
+- <input type="checkbox" name="验收清单-checklist" value="服务器能承受多大并发" /> <label for="服务器能承受多大并发">服务器能承受多大并发？</label>
 
 ## 本节小结
 

docs/Advanced-old/02-tech-stack/2.4-api-contract/2.4.3-parallel-dev.md

@@ -113,14 +113,14 @@ export function PostList() {
 
 ### 前端开发清单
 
-- [ ] 基于契约创建 TypeScript 类型
-- [ ] 创建 Mock 数据工厂
-- [ ] 开发页面组件
-- [ ] 处理加载状态
-- [ ] 处理错误状态
-- [ ] 处理空状态
-- [ ] 表单验证
-- [ ] 响应式适配
+- <input type="checkbox" name="前端开发清单-checklist" value="基于契约创建-typescript-类型" /> <label for="基于契约创建-typescript-类型">基于契约创建 TypeScript 类型</label>
+- <input type="checkbox" name="前端开发清单-checklist" value="创建-mock-数据工厂" /> <label for="创建-mock-数据工厂">创建 Mock 数据工厂</label>
+- <input type="checkbox" name="前端开发清单-checklist" value="开发页面组件" /> <label for="开发页面组件">开发页面组件</label>
+- <input type="checkbox" name="前端开发清单-checklist" value="处理加载状态" /> <label for="处理加载状态">处理加载状态</label>
+- <input type="checkbox" name="前端开发清单-checklist" value="处理错误状态" /> <label for="处理错误状态">处理错误状态</label>
+- <input type="checkbox" name="前端开发清单-checklist" value="处理空状态" /> <label for="处理空状态">处理空状态</label>
+- <input type="checkbox" name="前端开发清单-checklist" value="表单验证" /> <label for="表单验证">表单验证</label>
+- <input type="checkbox" name="前端开发清单-checklist" value="响应式适配" /> <label for="响应式适配">响应式适配</label>
 
 ## 后端并行开发实践
 
@@ -173,13 +173,13 @@ describe('POST /api/posts', () => {
 
 ### 后端开发清单
 
-- [ ] 基于契约定义响应类型
-- [ ] 编写 API 路由处理
-- [ ] 实现数据验证（Zod）
-- [ ] 实现业务逻辑
-- [ ] 编写单元测试
-- [ ] 处理错误情况
-- [ ] 实现权限控制
+- <input type="checkbox" name="后端开发清单-checklist" value="基于契约定义响应类型" /> <label for="基于契约定义响应类型">基于契约定义响应类型</label>
+- <input type="checkbox" name="后端开发清单-checklist" value="编写-api-路由处理" /> <label for="编写-api-路由处理">编写 API 路由处理</label>
+- <input type="checkbox" name="后端开发清单-checklist" value="实现数据验证zod" /> <label for="实现数据验证zod">实现数据验证（Zod）</label>
+- <input type="checkbox" name="后端开发清单-checklist" value="实现业务逻辑" /> <label for="实现业务逻辑">实现业务逻辑</label>
+- <input type="checkbox" name="后端开发清单-checklist" value="编写单元测试" /> <label for="编写单元测试">编写单元测试</label>
+- <input type="checkbox" name="后端开发清单-checklist" value="处理错误情况" /> <label for="处理错误情况">处理错误情况</label>
+- <input type="checkbox" name="后端开发清单-checklist" value="实现权限控制" /> <label for="实现权限控制">实现权限控制</label>
 
 ## 协作规范
 

docs/Advanced-old/03-frontend/3.1-app-router-routing/3.1.1-file-system-routing.md

@@ -158,7 +158,7 @@ export default function Loading() {
 
 ### 验收清单
 
-- [ ] 根目录有 `layout.tsx` 且包含 `<html>` 和 `<body>`
-- [ ] 每个需要访问的路径都有对应的 `page.tsx`
-- [ ] 布局正确嵌套，导航时父布局不闪烁
-- [ ] 数据加载较慢的页面有 `loading.tsx` 骨架屏
+- <input type="checkbox" name="验收清单-checklist" value="根目录有-layouttsx-且包含-html-和-body" /> <label for="根目录有-layouttsx-且包含-html-和-body">根目录有 `layout.tsx` 且包含 `<html>` 和 `<body>`</label>
+- <input type="checkbox" name="验收清单-checklist" value="每个需要访问的路径都有对应的-pagetsx" /> <label for="每个需要访问的路径都有对应的-pagetsx">每个需要访问的路径都有对应的 `page.tsx`</label>
+- <input type="checkbox" name="验收清单-checklist" value="布局正确嵌套导航时父布局不闪烁" /> <label for="布局正确嵌套导航时父布局不闪烁">布局正确嵌套，导航时父布局不闪烁</label>
+- <input type="checkbox" name="验收清单-checklist" value="数据加载较慢的页面有-loadingtsx-骨架屏" /> <label for="数据加载较慢的页面有-loadingtsx-骨架屏">数据加载较慢的页面有 `loading.tsx` 骨架屏</label>

docs/Advanced-old/03-frontend/3.1-app-router-routing/3.1.2-dynamic-routes.md

@@ -168,7 +168,7 @@ export default function ProductsPage({ searchParams }: Props) {
 
 ### 验收清单
 
-- [ ] 动态路由能正确匹配不同的 URL 路径
-- [ ] `params` 能正确获取到 URL 中的动态部分
-- [ ] 无效的动态参数能触发 404 页面
-- [ ] 需要 SEO 的页面已配置 `generateStaticParams`
+- <input type="checkbox" name="验收清单-checklist" value="动态路由能正确匹配不同的-url-路径" /> <label for="动态路由能正确匹配不同的-url-路径">动态路由能正确匹配不同的 URL 路径</label>
+- <input type="checkbox" name="验收清单-checklist" value="params-能正确获取到-url-中的动态部分" /> <label for="params-能正确获取到-url-中的动态部分">`params` 能正确获取到 URL 中的动态部分</label>
+- <input type="checkbox" name="验收清单-checklist" value="无效的动态参数能触发-404-页面" /> <label for="无效的动态参数能触发-404-页面">无效的动态参数能触发 404 页面</label>
+- <input type="checkbox" name="验收清单-checklist" value="需要-seo-的页面已配置-generatestaticparams" /> <label for="需要-seo-的页面已配置-generatestaticparams">需要 SEO 的页面已配置 `generateStaticParams`</label>

docs/Advanced-old/03-frontend/3.1-app-router-routing/3.1.3-route-groups.md

@@ -158,7 +158,7 @@ app/
 
 ### 验收清单
 
-- [ ] 路由组名称使用圆括号包裹
-- [ ] URL 中不包含路由组名称
-- [ ] 每个路由组有独立的 layout.tsx（如需要）
-- [ ] 同一 URL 路径下只有一个 page.tsx
+- <input type="checkbox" name="验收清单-checklist" value="路由组名称使用圆括号包裹" /> <label for="路由组名称使用圆括号包裹">路由组名称使用圆括号包裹</label>
+- <input type="checkbox" name="验收清单-checklist" value="url-中不包含路由组名称" /> <label for="url-中不包含路由组名称">URL 中不包含路由组名称</label>
+- <input type="checkbox" name="验收清单-checklist" value="每个路由组有独立的-layouttsx如需要" /> <label for="每个路由组有独立的-layouttsx如需要">每个路由组有独立的 layout.tsx（如需要）</label>
+- <input type="checkbox" name="验收清单-checklist" value="同一-url-路径下只有一个-pagetsx" /> <label for="同一-url-路径下只有一个-pagetsx">同一 URL 路径下只有一个 page.tsx</label>

docs/Advanced-old/03-frontend/3.1-app-router-routing/3.1.4-data-fetching.md

@@ -191,8 +191,8 @@ const posts = await fetch('https://api.example.com/posts', {
 
 ### 验收清单
 
-- [ ] 数据在服务端获取，HTML 中已包含内容
-- [ ] 缓存策略与业务需求匹配
-- [ ] 多个数据源使用 `Promise.all` 并行获取
-- [ ] fetch 错误有适当处理
-- [ ] 需要立即更新的场景配置了手动重新验证
+- <input type="checkbox" name="验收清单-checklist" value="数据在服务端获取html-中已包含内容" /> <label for="数据在服务端获取html-中已包含内容">数据在服务端获取，HTML 中已包含内容</label>
+- <input type="checkbox" name="验收清单-checklist" value="缓存策略与业务需求匹配" /> <label for="缓存策略与业务需求匹配">缓存策略与业务需求匹配</label>
+- <input type="checkbox" name="验收清单-checklist" value="多个数据源使用-promiseall-并行获取" /> <label for="多个数据源使用-promiseall-并行获取">多个数据源使用 `Promise.all` 并行获取</label>
+- <input type="checkbox" name="验收清单-checklist" value="fetch-错误有适当处理" /> <label for="fetch-错误有适当处理">fetch 错误有适当处理</label>
+- <input type="checkbox" name="验收清单-checklist" value="需要立即更新的场景配置了手动重新验证" /> <label for="需要立即更新的场景配置了手动重新验证">需要立即更新的场景配置了手动重新验证</label>

docs/Advanced-old/03-frontend/3.1-app-router-routing/index.md

@@ -84,9 +84,9 @@ graph TD
 
 **验收清单：**
 
-- [ ] 访问 `http://localhost:3000/` 能看到首页？
-- [ ] 访问 `http://localhost:3000/about` 能看到关于页？
-- [ ] 两个页面是否都有相同的导航栏（来自 `layout.tsx`）？
+- <input type="checkbox" name="第一步搭建骨架static-routes-layouts-checklist" value="访问-http-localhost3000-能看到首页" /> <label for="访问-http-localhost3000-能看到首页">访问 `http://localhost:3000/` 能看到首页？</label>
+- <input type="checkbox" name="第一步搭建骨架static-routes-layouts-checklist" value="访问-http-localhost3000-about-能看到关于页" /> <label for="访问-http-localhost3000-about-能看到关于页">访问 `http://localhost:3000/about` 能看到关于页？</label>
+- <input type="checkbox" name="第一步搭建骨架static-routes-layouts-checklist" value="两个页面是否都有相同的导航栏来自-layouttsx" /> <label for="两个页面是否都有相同的导航栏来自-layouttsx">两个页面是否都有相同的导航栏（来自 `layout.tsx`）？</label>
 
 ### 第二步：处理动态内容（Dynamic Routes）
 

docs/Advanced-old/03-frontend/3.2-components/3.2.1-props.md

@@ -179,7 +179,7 @@ function List<T>({ items, renderItem }: ListProps<T>) {
 
 ### 验收清单
 
-- [ ] Props 接口定义完整，类型准确
-- [ ] 可选 props 有合理的默认值
-- [ ] 使用 `children` 实现内容插槽
-- [ ] 复杂组件使用泛型保持类型安全
+- <input type="checkbox" name="验收清单-checklist" value="props-接口定义完整类型准确" /> <label for="props-接口定义完整类型准确">Props 接口定义完整，类型准确</label>
+- <input type="checkbox" name="验收清单-checklist" value="可选-props-有合理的默认值" /> <label for="可选-props-有合理的默认值">可选 props 有合理的默认值</label>
+- <input type="checkbox" name="验收清单-checklist" value="使用-children-实现内容插槽" /> <label for="使用-children-实现内容插槽">使用 `children` 实现内容插槽</label>
+- <input type="checkbox" name="验收清单-checklist" value="复杂组件使用泛型保持类型安全" /> <label for="复杂组件使用泛型保持类型安全">复杂组件使用泛型保持类型安全</label>

docs/Advanced-old/03-frontend/3.2-components/3.2.2-state.md

@@ -206,8 +206,8 @@ function Display({ value }: { value: string }) {
 
 ### 验收清单
 
-- [ ] 正确使用 `'use client'` 声明
-- [ ] 对象/数组状态更新时创建新引用
-- [ ] 依赖前值的更新使用函数式写法
-- [ ] 复杂状态逻辑使用 useReducer
-- [ ] 共享状态正确提升到公共父组件
+- <input type="checkbox" name="验收清单-checklist" value="正确使用-use-client-声明" /> <label for="正确使用-use-client-声明">正确使用 `'use client'` 声明</label>
+- <input type="checkbox" name="验收清单-checklist" value="对象-数组状态更新时创建新引用" /> <label for="对象-数组状态更新时创建新引用">对象/数组状态更新时创建新引用</label>
+- <input type="checkbox" name="验收清单-checklist" value="依赖前值的更新使用函数式写法" /> <label for="依赖前值的更新使用函数式写法">依赖前值的更新使用函数式写法</label>
+- <input type="checkbox" name="验收清单-checklist" value="复杂状态逻辑使用-usereducer" /> <label for="复杂状态逻辑使用-usereducer">复杂状态逻辑使用 useReducer</label>
+- <input type="checkbox" name="验收清单-checklist" value="共享状态正确提升到公共父组件" /> <label for="共享状态正确提升到公共父组件">共享状态正确提升到公共父组件</label>

docs/Advanced-old/03-frontend/3.2-components/3.2.3-global-state.md

@@ -201,7 +201,7 @@ graph TD
 
 ### 验收清单
 
-- [ ] 选择了合适的状态管理方案
-- [ ] 状态结构设计合理
-- [ ] 使用 selector 进行细粒度订阅
-- [ ] Provider 包裹在正确的层级
+- <input type="checkbox" name="验收清单-checklist" value="选择了合适的状态管理方案" /> <label for="选择了合适的状态管理方案">选择了合适的状态管理方案</label>
+- <input type="checkbox" name="验收清单-checklist" value="状态结构设计合理" /> <label for="状态结构设计合理">状态结构设计合理</label>
+- <input type="checkbox" name="验收清单-checklist" value="使用-selector-进行细粒度订阅" /> <label for="使用-selector-进行细粒度订阅">使用 selector 进行细粒度订阅</label>
+- <input type="checkbox" name="验收清单-checklist" value="provider-包裹在正确的层级" /> <label for="provider-包裹在正确的层级">Provider 包裹在正确的层级</label>

docs/Advanced-old/03-frontend/3.2-components/3.2.4-effects.md

@@ -194,7 +194,7 @@ useEffect(() => {
 
 ### 验收清单
 
-- [ ] 依赖数组完整且正确
-- [ ] 需要清理的副作用有返回清理函数
-- [ ] 异步请求有竞态处理
-- [ ] 考虑过是否可用 Server Component 替代
+- <input type="checkbox" name="验收清单-checklist" value="依赖数组完整且正确" /> <label for="依赖数组完整且正确">依赖数组完整且正确</label>
+- <input type="checkbox" name="验收清单-checklist" value="需要清理的副作用有返回清理函数" /> <label for="需要清理的副作用有返回清理函数">需要清理的副作用有返回清理函数</label>
+- <input type="checkbox" name="验收清单-checklist" value="异步请求有竞态处理" /> <label for="异步请求有竞态处理">异步请求有竞态处理</label>
+- <input type="checkbox" name="验收清单-checklist" value="考虑过是否可用-server-component-替代" /> <label for="考虑过是否可用-server-component-替代">考虑过是否可用 Server Component 替代</label>

docs/Advanced-old/03-frontend/3.2-components/3.2.5-custom-hooks.md

@@ -192,7 +192,7 @@ function Search() {
 
 ### 验收清单
 
-- [ ] Hook 名称以 `use` 开头
-- [ ] 返回值类型定义清晰
-- [ ] 内部回调用 useCallback 包裹
-- [ ] 有明确的使用场景和文档
+- <input type="checkbox" name="验收清单-checklist" value="hook-名称以-use-开头" /> <label for="hook-名称以-use-开头">Hook 名称以 `use` 开头</label>
+- <input type="checkbox" name="验收清单-checklist" value="返回值类型定义清晰" /> <label for="返回值类型定义清晰">返回值类型定义清晰</label>
+- <input type="checkbox" name="验收清单-checklist" value="内部回调用-usecallback-包裹" /> <label for="内部回调用-usecallback-包裹">内部回调用 useCallback 包裹</label>
+- <input type="checkbox" name="验收清单-checklist" value="有明确的使用场景和文档" /> <label for="有明确的使用场景和文档">有明确的使用场景和文档</label>