严格按照下面规则输出。

# 编码规则
生成的页面样式必须是scoped局部样式
新生成的单文件组件不要太大，保持代码的高质量及可读性
接口数据处理时候如果没有后端接口，可以用mock接口数据形式替换，在network时候也是可以看到接口的。
默认技术栈 根据你所在的项目使用的技术栈，输出完整单文件组件。
文件命名：组件大驼峰，单一职责，一个组件只实现一类UI。
DOM结构：语义化标签，层级扁平，禁止多余嵌套div；列表优先使用真实唯一key；补充基础无障碍属性 aria‑label、img alt。
样式：少用行内style；完整处理hover/active/disabled；处理文本溢出、基础响应式。
逻辑：UI组件禁止嵌入接口请求；本地状态使用useState/ref；复杂计算提取到组件顶层；副作用做好清理。
边界：处理loading、空数据、异常兜底，不能空白崩溃。
注释：关键逻辑增加注释。

# 禁止
禁止魔法数字硬编码、div充当按钮、无意义DOM嵌套、大段注释遗留代码、UI组件内部写接口请求。
禁止向global.css等文件中加一些全局的样式