摘要本文探讨了后台系统开发中模块化复用的重要性指出真正拉开差距的不是页面数量而是复用能力。通过 Sourcelin Blog 后台项目实践展示了如何将审核页和列表页收归共享壳如ModuleListShell.vue并提取可复用的 composable如useArticleTable.ts。这种模式让 AI 能更高效地接手后续开发避免重复造轮子从而降低长期维护成本。文章还分享了如何指导 AI 基于现有模式扩展以及项目地址供参考。后台系统做到后面真正拉开差距的往往不是“页面数量”而是复用能力。如果每个管理页都像独立小项目AI 每接一轮都会重新搭一遍速度看起来快维护成本却会越来越高。Sourcelin Blog 这套后台我后面做得最坚决的一件事就是把审核页和列表页往共享壳里收。这一点也特别适合拿来讲 AI Coding。后台系统做到后面最怕的不是没有功能而是每个页面都长得差不多代码却完全复用不起来。我在 Sourcelin Blog 这套后台里后面越来越重视两件事审核类页面不要各写各的列表页要尽量往共享壳里收这件事其实很适合写成一篇 AI Coding 经验文因为它正好能体现 AI 的一个优点它很擅长在既有模式上扩展但不擅长在一堆重复页面里自己总结出你到底想复用什么。先看这个项目里最关键的共享壳后台博客管理页的共享核心在sourcelin-ui/sourcelin-ui-admin/src/views/blog/shared/ModuleListShell.vue这个壳已经把这些常见结构收起来了查询表单表格展示分页弹窗表单通用按钮和行操作也就是说你后面再加一个模块管理页重点就不再是“画一个页面”而是给这个壳补字段列配置表单项行操作ModuleListShell.vue查询表单区表格展示区分页组件弹窗表单通用按钮/行操作字段配置列配置表单项配置行操作配置新管理页面补充配置图ModuleListShell 共享壳结构 - 新页面只需补充配置即可复用完整功能评论管理是一个很适合讲“审核页”的例子评论管理页里用的是useCommentAudit这类 composable再配上字典项做来源映射。页面本身其实很薄ModuleListShell title评论管理 description评论审核、来源追踪与删除治理。 :module-apiCommentAPI :query-fieldsqueryFields :columnscolumns :form-fieldsformFields :row-actionsrowActions /这正是我喜欢拿来讲 AI 的地方。因为你能明显看出来真正可复用的东西已经沉到了壳里。文章管理的 composable 也很值得参考useArticleTable.ts已经把后台文章页的“页面协议”提取出来了constcolumns[{prop:title,label:标题,minWidth:220},{prop:status,label:状态,type:tag,width:90},{prop:isTop,label:置顶,type:tag,width:80},{prop:isRecommend,label:推荐,type:tag,width:80},]这种模式一旦建立起来后面再让 AI 去补分类、标签、导航、说说、树洞等管理页难度就会明显下降。我一般怎么让 AI 接这类任务请基于 Sourcelin Blog 管理后台现有共享壳实现一个审核或管理页面。 要求 1. 优先复用 ModuleListShell 2. 页面本身保持轻量 3. 查询字段、列配置、表单字段和行操作尽量下沉到 composable 4. 不复制已有页面结构 5. 继续沿用按钮权限和字典项映射方式我为什么觉得“模块化复用”比“多做几个页面”更值得写出来因为对真实项目来说复用能力才是 AI 以后能不能持续接手更多工作的前提。如果没有共享壳AI 每次都像第一次做后台重写一套查询区重写一套表格区重写一套弹窗再复制一套权限按钮这样表面上看也能做完但长期维护会越来越重。重复劳动高效复用有共享壳模式新页面需求复用 ModuleListShell配置字段/列/表单配置行操作快速完成且易维护无共享壳模式新页面需求重写查询区重写表格区重写弹窗复制权限按钮完成但维护成本高图两种开发模式对比 - 右侧共享壳模式显著减少重复代码提升AI协作效率这类任务里 AI 最容易跑偏的点不看共享壳直接复制页面把字典映射、表格列、表单字段都写回页面审核类页面和普通列表页混成一套无边界逻辑我现在越来越相信后台要想长期让 AI 接手不是把 prompt 写得更长而是先把复用壳做出来。壳稳了后面很多页面都会变简单这类经验写出来对做后台的人会很有共鸣。项目地址在线演示https://sourcelin.cnGiteehttps://gitee.com/my_lyq/sourcelin-cloud-blogGitHubhttps://github.com/SourceLin/sourcelin-cloud-blog如果你刚好在找一个微服务博客系统Spring Cloud Alibaba 实战项目Vue 3 Java 全栈项目毕设 / 课程设计参考项目支持 AI 协作开发的开源仓库可以看一下这个项目。欢迎试用、提 Issue也欢迎点个 Star 支持一下。
