技术债Technical Debt

你可能会说

五页各自有一份按钮样式，改颜色时漏了一页，这说明了什么？

当前可用的实现方式留下了会增加后续改动负担的结构问题五个页面各自保存了一份登录按钮样式时，想统一改颜色就得改五处，漏掉一处会让页面看起来不一致。这类重复会让后续改动更容易遗漏；将样式收进一个共享组件后，还要逐页检查按钮外观。技术债描述的是需要权衡的维护负担，不代表每种重复都必须立刻重写，也不保证拖久一定更贵。

先知道

组件 Component

也常被叫作技术债Technical Debt代码债

从五份重复样式到共享组件：改动怎样避免漏一页

登录按钮 · 五个页面各写一份

home.css .login { background: var(--text-3); } pricing.css .login { background: var(--text-3); } blog.css .login { background: var(--text-3); } docs.css .login { background: var(--text-3); } app.css .login { background: var(--text-3); }

页面上看到的按钮
首页	登录
价格页	登录
博客	登录
文档页	登录
应用页	登录

示例：同一种按钮样式重复在五个文件里。要统一改颜色，需要找到并更新每一份。

重复实现带来什么改动负担

失败前：五个文件分别保存样式：要统一改按钮颜色，就得找到五处定义；漏掉文档页时，那里的按钮仍是灰色。

改动来源：共享组件：按项目现有结构把按钮样式放在一个共享组件，五个页面都从这里取得样式。

反馈与边界：改完重新打开五个页面，确认按钮都变蓝且没有其它显示回归；是否继续整理，要看实际改动负担，不是所有重复代码都要立刻重写。

选择题选择一个你认为最合适的答案

五份按钮样式改成蓝色后，四页已变色但文档页仍灰。这次漏改说明什么？

按钮有五份独立定义；相同改动必须逐处更新，一处漏改就会不一致按钮其实共用一个来源，只是文档页还缓存着旧页面文档页的灰色是刻意设计的权限状态，不需要对照改动记录

你可以这样告诉 AI Agent

示例里同一个登录按钮样式在五页重复，而且文档页漏改。请按项目现有结构收进共享组件，再逐页确认按钮都变蓝、其他页面内容没有意外变化，并告诉我该在哪里继续改样式。

接下来学什么

1组件Component→2质量门禁Quality Gate→