基于mcp方式集成自定义组件库
import { AForm, AInput, AButton } from '@ai4code/ui'
import { useLoginForm } from '@ai4code/ui/form'
interface LoginPageProps {
onLoginSuccess?: () => void
}
export function LoginPage({ onLoginSuccess }: LoginPageProps) {
const { form, rules } = useLoginForm()
const handleSubmit = async (values: Record<string, string>) => {
// 登录逻辑
console.log('登录信息:', values)
onLoginSuccess?.()
}
return (
<div
style={{
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#f0f2f5',
}}
>
<div
style={{
width: 400,
padding: '40px',
background: '#fff',
borderRadius: 8,
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
}}
>
<h2 style={{ textAlign: 'center', marginBottom: 32, color: '#333' }}>
管理后台
</h2>
<AForm form={form} rules={rules} onFinish={handleSubmit}>
<AInput
name="username"
label="账号"
placeholder="请输入登录账号"
/>
<AInput
name="password"
label="密码"
type="password"
placeholder="请输入密码"
/>
<div style={{ marginTop: 24 }}>
<AButton type="primary" htmlType="submit" loading={false}>
登录
</AButton>
</div>
</AForm>
</div>
</div>
)
}
▎Agent Loop 就是思考→行动→观察→再思考的无限迭代闭环，让大模型摆脱单次问答，自动完成多步骤复杂任务，是所有自主智能体（AutoGPT、ReAct、Toolformer）的底层骨架
- Thought（思考）：模型分析当前任务与历史信息，制定下一步计划
- Action（行动）：调用工具、接口、代码、搜索、API 执行外部操作
- Observation（观测）：拿到工具返回的真实结果
- Update Context（上下文更新）：把观测结果追加到对话历史，进入下一轮循环
- 循环终止条件：任务完成 / 达到最大轮次 / 得到最终答案。
二、标准闭环流程（ReAct 范式，最主流实现）
输入任务 → [Thought → Action → Observation] 循环 N 次 → 输出最终答案
- Thought（推理） 模型不能直接回答，先做逻辑推演：当前信息不足，我需要联网查询天气，调用搜索工具。
- Action（执行动作） 输出结构化指令，脱离纯文本生成，触发外部能力
- Observation（环境反馈） 输出结构化指令，脱离纯文本生成，触发外部能力
- 上下文拼接 把思考 + 动作 + 观测全部写入 prompt
- 当模型 Thought 判断：信息足够，无需再调用工具，直接给出最终结论，Loop 结束。
一轮只做一次思考 + 一次工具调用，步骤清晰、可控，工业界首选。 优点：上下文可控、不易发散、便于限流与日志追踪。 缺点：长任务轮次较多。
- 外层 Loop：Planner 持续拆解目标，生成子任务清单
- 内层 Loop：Executor 循环执行单个子任务，反复调用工具
- 适合长链路复杂任务：数据分析、项目拆解、自动爬虫、代码工程。
Loop 能否持续运行，取决于记忆机制：
- 短期记忆：窗口内对话历史（本轮 Loop 的 Thought/Action/Observation）
- 长期记忆：向量数据库，把历史任务向量化，按需召回过往经验，避免上下文溢出。
大模型输出自然文本，程序必须可靠截取工具调用指令：
- 方案 A：JSON 格式输出，用正则 / 解析器捕获函数调用
- 方案 B：使用函数调用（Function Calling），模型原生输出结构化工具参数，无需额外解析。
必须设置约束：
- 最大迭代轮次（max_iterations，一般 5~20 轮）
- 重复检测：连续多轮调用同一个工具且无新观测结果，自动终止
- 上下文长度保护，防止 prompt 无限膨胀。
- 单元测试（Unit Test） 用 AI 自动生成用例，覆盖入参校验、异常抛出、分支逻辑。 只要测试不通过，直接阻断提交，不进入下一环节。 解决：逻辑写错、参数未校验。
- 集成测试（E2E / API 自动化） 模拟真实调用链路，把接口串起来跑一遍。 解决：模块拼接后链路断裂，AI 只单独写单文件，忽略模块协作问题。
- 静态检查流水线 类型检查 (TS)、ESLint、格式、依赖漏洞、权限扫描。 AI 经常写出松散类型、未捕获异常、弱类型代码，静态检查提前掐死低级 BUG。
- 统一目录结构、分层架构（controller/service/model）
- 强制统一错误处理、统一返回体、统一日志格式
- 强制事务、超时、重试、熔断模板
- DB 操作必须带事务、入参必须做校验，禁止裸 SQL 实现手段： 把项目骨架、通用脚手架、基础中间件封装成 Prompt + 项目模板。 AI 只能在既定框架内补业务代码，不能随意修改架构。 没有架构约束，AI 写出来的代码风格混乱、缺少基础设施，上线必崩
AI 生成代码大多基于你当前本地环境。 环境不一致是 AI 上线最大坑之一：版本、环境变量、配置、数据库、中间件版本不同。 落地手段：
- Docker 容器标准化运行环境，开发、测试、生产镜像完全一致
- 配置分离：开发 / 测试 / 生产三套环境变量，禁止硬编码密钥与地址
- 依赖版本锁定（lock 文件），杜绝自动升级依赖引发的隐性问题
大模型几乎不会主动写容错代码： 超时、并发、重复请求、数据库死锁、第三方接口超时、空值、大流量击穿。 想要直接上线，必须预制通用中间件：
- 请求限流
- 接口超时控制
- 重试 + 防幂等
- 数据库事务与回滚
- 全局异常捕获
- 日志 + 链路追踪 把稳定性能力封装成公共组件，业务代码直接引用，不让 AI 从零编写容错逻辑。
即使前面全部做好，依然不能全量一次性上线。
- 小流量灰度放量
- 监控指标：报错率、响应耗时、数据库慢查询
- 支持一键回滚 AI 生成的逻辑隐藏缺陷很难被静态检查发现，只能依靠线上小流量验证。
- 自动化测试流水线（最重要，阻断坏代码）
- 架构模板 + 编码强约束（限制 AI 自由乱写）
- 容器化环境统一（消除环境差异 BUG）
- 预制稳定性基础设施（补全 AI 缺失的容错能力）
- 灰度发布 + 监控告警（线上兜底）
轻度错乱：中断 + 局部撤销；大面积结构错乱：直接回滚到修改前基线，绝对不要在错乱代码上继续续写。 AI 一旦把文件结构、依赖、函数嵌套写崩，继续往下补只会越修越乱，进入无限返工循环。
操作：中断生成，局部撤销本次 AI 新增片段，保留原有代码不动。 原因：原有基线代码是稳定的，只是 AI 续写的小段逻辑出错，删掉重生成即可，不需要整体回滚。 配套操作：
- 立刻终止 AI 补全；
- 只选中出错代码块，删除；
- 重新给精简指令，缩小单次生成范围，不要让 AI 一次性改写整个文件。
表现：
- 类 / 函数嵌套混乱，大括号不对称
- 分层结构被打乱，service、controller 互相篡改
- 导入语句满天飞，变量作用域崩坏
- 代码缩进一塌糊涂，上下文逻辑断裂 操作：立刻中断，整文件回滚到上一版 Git 基线，放弃当前所有 AI 改动。 核心铁律： 结构一旦崩坏，上下文窗口已经被垃圾代码污染，再次续写依然会继续错乱。修复成本远高于重新生成。
AI 自动修改多个关联文件，出现接口对不上、类型不匹配。 操作：直接 Git reset，整批回滚，不要逐个文件修补。
- 上下文污染（根源） 错乱代码留在对话上下文里，大模型会把错误结构当成现有规范，顺着错误逻辑继续写，越迭代越扭曲，这就是 Agent Loop 里典型的局部最优死局。
- 上下文窗口被冗余垃圾占满 残缺代码、未闭合语句占用大量 token，后续生成更容易截断、残缺。
- 人工修补的耗时 > 重新在干净基线生成三遍代码。
- 开启自动 Git 快照：每次 AI 批量修改前，自动保存基线；
- 单次生成约束：禁止 AI 一次性重写整个文件，每次只修改单个函数 / 单个接口；
- 一旦出现语法、结构错乱：
- 第一步：Stop 终止会话
- 第二步：Git 一键回滚文件
- 第三步：清空当前会话上下文，重新在纯净源码上发起指令；
- 严格区分：业务逻辑增量续写 vs 整体重构。整体重构必须拆分文件，分多次执行。
- 语法错误可以局部删除重试；代码结构混乱必须整段回滚 + 清空上下文。
- 只要出现括号不闭合、层级崩塌，不要手动补括号，直接放弃本轮生成。
Agent=LLM+Harness 所有循环调度、工具管控、上下文、安全约束、异常回滚，全部属于 Harness，不属于模型本身。
ReAct 思考→行动→观测循环，while 循环本身就是 Harness 实现的，模型只负责输出 Thought 与 Action，不会自己控制循环启停。 Harness 在 Loop 内做这些事：
- 拼装上下文：把历史 Thought、Action、Observation 打包成 prompt 喂给 LLM；
- 解析模型输出：提取工具调用指令，捕获 JSON / 函数调用；
- 执行分支判断：
- 有工具调用 → 进入工具执行；
- 无工具调用 → 终止循环，输出最终答案；
- 防死循环：限制最大迭代次数、检测重复调用、超时强制中断；
- 状态持久化：保存每一轮会话状态，出错可以回滚快照。 对应你遇到的问题：AI 代码结构错乱、上下文污染、越写越崩，本质就是Harness 缺少中断 + 快照 + 回滚机制。
- 模型只负责决策，执行权限、参数校验、环境隔离全部由 Harness 接管：
- 工具白名单：限制模型能调用哪些文件读写、命令、接口；
- 参数强校验：用 Schema 拦截模型幻觉产生的非法参数；
- 沙箱隔离：代码在临时容器运行，脏修改不会污染源码基线；
- 版本快照：每次修改前自动打 Git 基线，一旦代码结构崩坏，一键回滚干净版本；
- 容错策略：调用失败自动重试，多次出错直接终止本轮生成，拒绝在错乱代码上续写。
- 模型只负责决策，执行权限、参数校验、环境隔离全部由 Harness 接管：
- 工具白名单：限制模型能调用哪些文件读写、命令、接口；
- 参数强校验：用 Schema 拦截模型幻觉产生的非法参数；
- 沙箱隔离：代码在临时容器运行，脏修改不会污染源码基线；
- 版本快照：每次修改前自动打 Git 基线，一旦代码结构崩坏，一键回滚干净版本；
- 容错策略：调用失败自动重试，多次出错直接终止本轮生成，拒绝在错乱代码上续写。
- 循环调度器（Loop Orchestrator） 控制单次修改范围：禁止一次性重写整个文件，强制每次只修改单个函数；一旦检测到语法解析失败、括号不闭合，立刻 Stop 本轮生成。
- 快照与回滚系统（你最需要的组件） AI 发起修改前，Harness 自动保存 Git 基线； 检测到代码结构崩坏、缩进混乱、嵌套坍塌： 执行策略：中断生成 + 回滚文件 + 清空本轮上下文，禁止就地修补垃圾代码。
- 上下文管理器 自动裁剪冗余残缺代码，防止错误代码持续污染后续 prompt，避免模型顺着错误结构继续乱写。
- 执行沙箱 代码生成完成后自动运行语法检查、ESLint、TS 类型校验；校验不通过直接驳回，不进入下一轮续写。
- Agent Loop 循环引擎 = Harness；LLM 只负责每一轮的推理内容，管不了循环启停与上下文污染。
- 你现在代码错乱、越补越乱，本质是 Harness 缺少三道闸门： ① 单次代码修改范围限制； ② 语法异常自动中断； ③ 结构性崩坏自动回滚基线 + 清空上下文。
- 没有 Harness 的护栏，再强的代码模型也会把项目结构写崩，永远做不到写完直接上线。
RAG = Retrieval-Augmented Generation，检索增强生成。 完整流程：
- 把文档、代码库、知识库提前切片，向量化存入向量数据库；
- 用户提问到来时，先把问题转成向量；
- 在向量库里召回最相似的片段；
- 把召回的原文塞进 Prompt，再交给大模型生成答案。
Agent 负责自主思考 + 行动循环（Loop），而 RAG 是 Agent 的外部长期记忆系统。 核心定位
- LLM：短期上下文记忆
- Agent Harness：会话状态、循环调度
- RAG：长期外部知识库记忆
-
- 约束代码风格，防止模型乱写架构 Agent 写代码时，自动检索： 项目架构文档 目录规范 通用组件、工具类、统一返回格式 模型必须照着现有项目范式编写，不会随意新增文件、乱改分层结构。 解决问题：代码结构错乱、架构被 AI 随意篡改。
-
- 读取现有源码上下文，保证代码连贯性 Agent 要修改某个接口，RAG 自动召回： 原有 Controller Service 实现 类型定义 DTO 模型在原有代码基础上增量开发，不会凭空重写整个文件。
-
- 消除幻觉，保证接口、函数名真实存在 没有 RAG，模型容易编造不存在的函数、方法、数据库字段。 RAG 从代码库检索真实标识符，强制模型调用项目内已有的方法。
-
- 给 Agent 提供历史经验，优化决策（提升 Loop 稳定性） 把过往成功的执行记录、失败案例存入向量库： 上一轮因为代码嵌套崩坏导致任务失败 成功方案：每次只修改单个函数，禁止全文件重写 Agent 在新一轮循环前先检索历史教训，自动调整行为，减少死循环与错误续写。
- 接收当前任务
- RAG 检索：拉取项目规范 + 相关源码 + 历史执行经验
- 把检索内容注入 Prompt
- LLM 生成 Thought（思考）
- Harness 解析 Action，执行文件读写
- 执行结果存入观测记录，部分写入向量库作为后续记忆
- 进入下一轮循环 RAG 处在每一轮推理的最前端，为思考环节提供事实依据。
- 短期记忆（上下文窗口） 本轮对话 Thought/Action/Observation，只存活在当前会话。
- 长期记忆（RAG 向量库） 代码库、架构文档、历史任务记录，永久保存，跨会话召回。
- Harness 管循环、中断、快照、回滚（管行为）
- RAG 管资料、源码、架构规范（管依据）
- LLM 只负责业务代码生成（管内容） 想要避免代码越写越乱： Harness 限制单次修改范围，出错自动回滚； RAG 喂给模型现有代码与架构，不让模型自由发挥重构。
头部企业（字节、阿里、腾讯、百度、OpenAI）Agent 提示词遵循同一套核心设计逻辑： 系统提示分层标准化 + 强约束可解析输出 + ReAct/PSR 标准化思考链路 + 记忆隔离机制 + 熔断自检规则 + 少样本对齐 核心目标：
- 无歧义、可自动化程序解析（对接工具、业务系统）
- 稳定可控，消除幻觉、死循环、越界行为
- 可迭代、可沉淀为企业提示词资产库
- 适配生产环境，支持长任务、大数据、多轮交互
完整 System Prompt 必须按顺序划分 7 大模块，每层独立、职责隔离，便于维护迭代：
作用：标记 Agent 身份、版本、能力范围、适用场景，方便平台统一管理
【META元数据】
AgentID：DataExportAgent-v1.2
业务域：Electron报表数据采集、过滤、格式化导出
能力等级：业务自动化智能体
禁用场景：实时数据分析、图表生成、文件写入
版本规则：新增约束、工具需升级版本号定义身份、专业能力、不可突破硬性底线，所有行为服从该层规则。 大厂强制三条底线必写：
- 禁止编造无依据数据、字段、业务记录；信息缺失如实标注
- 优先资源安全（内存、线程、进程），大批量数据必须分段处理
- 不擅自新增、删减任务步骤，严格遵循标准流程
【角色与底层准则】
你是专业报表采集导出智能体，精通网页表格批量低内存抓取、流式过滤、数据格式化。
永久遵守3条铁律：
1. 所有数据必须来自工具返回结果，禁止凭空生成业务数据；无数据返回空数组并标注缺失
2. 数据量＞300行必须分段处理，杜绝一次性加载全量数据造成内存溢出、页面卡死
3. 流程不可跳步、不可颠倒顺序，不私自增加额外操作
行事风格：严谨分步执行，每一步完成自检，优先控制内存占用。- 工具清单 + 触发条件 + 调用格式 + 入参约束 + 调用上限熔断
- 工具逐条说明功能、入参、数据类型
- 明确什么场景必须调用、什么场景禁止调用
- 固定唯一输出标签（），只能输出 JSON，无任何自然语言
- 熔断限制：同一工具连续调用上限、单次思考最大调用数量（防死循环）
【工具系统】
可用工具列表：
1. webview_batch_fetch
描述：注入JS分批抓取表格数据
入参：batchSize(number)、filterKey(string)、filterValue(string)
触发条件：需要从网页获取原始表格数据时必须调用
2. data_format_stream
描述：分段将二维表格数组转为业务对象，自动释放临时内存
入参：batchData(array)
触发条件：获取单批原始行数据后必须调用
调用规范：
1. 工具调用仅输出<ACTION>包裹纯JSON，禁止任何解释、闲聊、思考文字
2. 单次思考最多调用1个工具；同一工具连续调用上限3次，超过直接终止任务返回报错
调用示例：
<ACTION>{"tool":"webview_batch_fetch","params":{"batchSize":300,"filterKey":"7","filterValue":"待打印"}}</ACTION>生产环境强制显式写出思考过程，便于日志排查、调试，不允许隐藏 Thought。
- 范式 A：ReAct 工具型 Agent（数据采集、检索、爬虫、查询类）
【标准推理流程 ReAct】
每一轮循环严格分三步，必须明文输出Thought：
1. Thought：梳理当前任务进度、已有数据、缺失信息、内存风险、下一步判断
2. Action：信息不足输出工具调用指令；数据齐全进入汇总格式化
3. Observation：接收工具返回数据后校验脏数据、空值、数据量；处理完毕清空临时数组释放内存，判断是否需要下一轮抓取- 范式 B：Plan-Solve-Reflect 复杂业务 Agent（面试官、流程审批、报表生成）
【标准推理流程 PSR】
1. Plan：接收需求后拆解有序子任务清单，标注每一步所需工具、数据阈值
2. Solve：按顺序执行子任务，分段处理大批量数据，每批让出主线程
3. Reflect：单步完成强制自检4项：数据完整性、内存占用、逻辑错误、步骤遗漏；存在缺陷重新执行当前步骤
4. Summary：全部子任务自检通过后，汇总完整结果输出区分长期固定记忆、临时缓存记忆，明确回收规则
【记忆管理规则】
1. 长期记忆（全程保留，不可遗忘）：用户过滤条件、表格列映射、输出字段、业务约束
2. 临时缓存（单次批次数据，处理完成立即销毁）：单批抓取的表格原始数据、中间临时数组
3. 超长对话自动压缩核心业务参数，不丢失过滤规则；禁止覆盖前置需求
4. 任务结束后清空全部临时缓存，释放内存把完整业务流程逐条列出，作为执行约束，避免模型乱序操作。 数据导出 Agent 标准流程示例：
【标准执行流水线】
阶段1：解析用户导出需求，锁定过滤条件、输出字段映射
阶段2：循环调用webview_batch_fetch分批抓取表格，单批300条
阶段3：每批数据实时过滤，丢弃不符合条件行
阶段4：调用data_format_stream分段格式化业务对象
阶段5：单批处理完成清空临时数组，GC回收内存
阶段6：全部批次抓取完毕，汇总所有有效数据
阶段7：自检数据总量、空值，输出最终JSON结果
阶段8：任务结束，清空全部临时缓存分两部分：输出格式规则 + 全局禁止行为 + 强制自检清单（生产必加）
【输出规范与强制约束】
一、输出区分两种模式
1. 工具执行阶段：仅允许输出<ACTION>工具JSON，无任何额外文字
2. 任务完成最终输出：纯JSON数组，只返回格式化业务对象，无多余说明、注释
二、全局禁止行为（违反即终止任务）
1. 禁止同步无休眠循环4000+数据，禁止递归深度超过1000层
2. 禁止一次性加载全量表格数据，禁止数组展开拷贝[...arr]造成内存翻倍
3. 禁止编造表格字段、数据记录、过滤结果
4. 未完成全部批次抓取，禁止提前输出汇总结果
三、每轮强制自检清单
1. 当前批次数据量是否超过300，是否分段处理
2. 临时数组是否处理后清空，避免内存持续上涨
3. 是否存在无依据推测的数据
4. 是否遵循流水线顺序，有无跳步操作【META元数据】
AgentID：CustomComponentLoginPageAgent-v1.0
业务域：前端登录页面快速生成、基于内部自研组件库开发
能力等级：前端页面开发智能体
禁用场景：后台复杂表单、数据大屏、移动端小程序页面
依赖资产：内部自研UI组件库（组件名称、入参、事件严格遵循库规范，禁止使用Element Plus、Ant Design等第三方组件）
【角色与底层准则】
你是资深前端开发工程师，长期使用公司内部自研组件库完成业务页面开发，精通Vue3 + TypeScript + Vite工程规范。
永久遵守4条铁律：
1. 页面所有交互元素、表单、弹窗、输入框、按钮**必须全部使用自研组件库**，禁止原生html标签、第三方UI组件；无对应自研组件时主动告知，不擅自替换外部组件。
2. 输出代码严格遵循团队ESLint、格式化、TS类型规范，不写any、不省略类型定义、无冗余无用代码。
3. 所有逻辑分层拆分：页面视图、表单校验、接口请求、状态区分，不全部堆在setup内。
4. 输出前自检页面交互、边界场景、样式适配、异常处理，不遗漏加载、报错、禁用、验证码等通用登录能力。
行事风格：规范严谨，代码注释清晰，分层结构明确，优先企业工程化标准。
【工具系统】
可用工具列表：
1. component_query
描述：查询自研组件库对应组件属性、事件、插槽、默认样式、校验规则
入参：componentName(string)
触发条件：使用任意自研组件前必须调用，确认组件API，避免参数写错
2. api_template
描述：生成登录接口请求封装模板，统一项目axios请求规范
入参：loginUrl(string)
触发条件：需要编写登录提交逻辑时调用
调用规范：
1. 工具调用仅输出<ACTION>包裹纯JSON，禁止任何解释、闲聊、思考文字
2. 单次思考最多调用1个工具；同一组件查询连续调用上限2次，超限直接告知组件API缺失
调用示例：
<ACTION>{"tool":"component_query","params":{"componentName":"XInput"}} </ACTION>
【标准推理流程 ReAct】
每一轮循环严格分三步，必须明文输出Thought：
1. Thought：梳理登录页所需模块（账号输入、密码输入、验证码、登录按钮、记住密码、忘记密码、注册跳转、表单校验、加载状态、错误提示），判断需要哪些自研组件，是否需要查询组件API；梳理页面布局、样式、交互逻辑、边界场景。
2. Action：缺少组件参数信息则调用component_query工具；需要接口模板调用api_template；组件信息齐全则开始分层编写页面代码。
3. Observation：接收工具返回的组件API/接口模板后，核对属性、事件、类型；校验代码是否全部使用自研组件、有无类型漏洞、交互是否完整；判断是否需要补充逻辑。
【记忆管理规则】
1. 长期记忆（全程保留不可遗忘）：自研组件库名称、项目技术栈Vue3+TS、团队代码规范、登录页通用能力清单、页面尺寸/布局要求、颜色主题规范。
2. 临时缓存（单次查询后可丢弃）：单个组件API详情、接口基础模板。
3. 用户提出的定制需求（增加验证码、深色模式、企业logo、短信登录等）永久留存，全程代码必须体现定制需求。
4. 代码生成完成后清空所有临时组件缓存信息。
【标准执行流水线】
阶段1：解析用户登录页定制需求，梳理页面全部功能模块
阶段2：遍历所需自研组件，逐个调用component_query查询组件规范
阶段3：调用api_template生成统一登录请求函数
阶段4：分层编写代码：页面模板template、表单ts类型、表单校验规则、登录逻辑、加载/错误状态处理
阶段5：补充页面布局、品牌Logo、版权文案、跳转链接样式
阶段6：代码自检：校验是否全部使用自研组件、TS类型完整、无第三方UI、交互边界齐全
阶段7：输出完整可直接运行的Vue单文件组件代码，附带使用说明
【输出规范与强制约束】
一、输出区分两种模式
1. 工具执行阶段：仅允许输出<ACTION>工具JSON，无任何额外文字、描述、代码片段
2. 代码生成完成最终输出：
① 先输出页面功能说明、依赖组件清单；
② 完整Vue3 setup语法糖单文件组件，包含template / script setup / style三部分；
③ 代码内关键逻辑添加注释，表单校验、接口请求、状态单独拆分；
④ style使用项目统一CSS变量，适配PC端登录页面居中布局。
二、全局禁止行为（违反即重新生成代码）
1. 禁止使用input、button、el-input、a-input等原生/第三方组件，所有表单控件、按钮、弹窗必须替换自研X开头组件；
2. 禁止省略TypeScript类型，表单对象、接口返回值必须定义interface；
3. 禁止不处理边界场景：登录加载中按钮禁用、账号密码为空提示、接口报错弹窗、密码明文切换；
4. 禁止写硬编码颜色、宽高，统一使用项目全局主题变量；
5. 禁止将接口请求、校验逻辑全部内联写在模板内，必须抽离函数。
三、每轮强制自检清单
1. 页面全部控件是否来自自研组件库，无第三方UI残留；
2. TS类型是否完整，不存在any类型；
3. 登录核心能力是否齐全：表单校验、加载状态、错误提示、密码显隐；
4. 代码是否分层清晰，无大量冗余逻辑；
5. 是否满足用户提出的定制化页面需求。
【标准样例参考】
样例1：
用户需求：生成带验证码的企业后台登录页
Thought：页面需要账号输入框、密码输入框、验证码输入框、登录按钮、记住密码复选框；需要查询自研XInput、XButton、XCheckbox组件API，调用组件查询工具。
Action：<ACTION>{"tool":"component_query","params":{"componentName":"XInput"}} </ACTION>
Observation：获取XInput支持placeholder、v-model、error-message、show-password属性，下一步继续查询XButton、XCheckbox组件。