摘要：本文探讨了后台系统开发中模块化复用的重要性，指出真正拉开差距的不是页面数量而是复用能力。通过 Sourcelin Blog 后台项目实践，展示了如何将审核页和列表页收归共享壳（如 ModuleListShell.vue），并提取可复用的 composable（如 useArticleTable.ts）。这种模式让 AI 能更高效地接手后续开发，避免重复造轮子，从而降低长期维护成本。文章还分享了如何指导 AI 基于现有模式扩展，以及项目地址供参考。

后台系统做到后面，真正拉开差距的往往不是“页面数量”，而是复用能力。
如果每个管理页都像独立小项目，AI 每接一轮都会重新搭一遍，速度看起来快，维护成本却会越来越高。

Sourcelin Blog 这套后台我后面做得最坚决的一件事，就是把审核页和列表页往共享壳里收。
这一点也特别适合拿来讲 AI Coding。

后台系统做到后面，最怕的不是没有功能，而是每个页面都长得差不多，代码却完全复用不起来。

我在 Sourcelin Blog 这套后台里，后面越来越重视两件事：

1. 审核类页面不要各写各的
2. 列表页要尽量往共享壳里收

这件事其实很适合写成一篇 AI Coding 经验文，因为它正好能体现 AI 的一个优点：
它很擅长在既有模式上扩展，但不擅长在一堆重复页面里自己总结出你到底想复用什么。

先看这个项目里最关键的共享壳

后台博客管理页的共享核心在：

• sourcelin-ui/sourcelin-ui-admin/src/views/blog/shared/ModuleListShell.vue

这个壳已经把这些常见结构收起来了：

• 查询表单
• 表格展示
• 分页
• 弹窗表单
• 通用按钮和行操作

也就是说，你后面再加一个模块管理页，重点就不再是“画一个页面”，而是给这个壳补：

• 字段
• 列配置
• 表单项
• 行操作

图：ModuleListShell 共享壳结构 - 新页面只需补充配置即可复用完整功能

评论管理是一个很适合讲“审核页”的例子

评论管理页里，用的是 useCommentAudit 这类 composable，再配上字典项做来源映射。

页面本身其实很薄：

<ModuleListShell
  title="评论管理"
  description="评论审核、来源追踪与删除治理。"
  :module-api="CommentAPI"
  :query-fields="queryFields"
  :columns="columns"
  :form-fields="formFields"
  :row-actions="rowActions"
/>

这正是我喜欢拿来讲 AI 的地方。
因为你能明显看出来：真正可复用的东西已经沉到了壳里。

文章管理的 composable 也很值得参考

useArticleTable.ts 已经把后台文章页的“页面协议”提取出来了：

const columns = [
  { 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 每次都像第一次做后台：

• 重写一套查询区
• 重写一套表格区
• 重写一套弹窗
• 再复制一套权限按钮

这样表面上看也能做完，但长期维护会越来越重。

图：两种开发模式对比 - 右侧共享壳模式显著减少重复代码，提升AI协作效率

这类任务里 AI 最容易跑偏的点

• 不看共享壳，直接复制页面
• 把字典映射、表格列、表单字段都写回页面
• 审核类页面和普通列表页混成一套无边界逻辑

我现在越来越相信，后台要想长期让 AI 接手，不是把 prompt 写得更长，而是先把复用壳做出来。
壳稳了，后面很多页面都会变简单，这类经验写出来，对做后台的人会很有共鸣。

项目地址

• 在线演示：https://sourcelin.cn
• Gitee：https://gitee.com/my_lyq/sourcelin-cloud-blog
• GitHub：https://github.com/SourceLin/sourcelin-cloud-blog

如果你刚好在找一个：

• 微服务博客系统
• Spring Cloud Alibaba 实战项目
• Vue 3 + Java 全栈项目
• 毕设 / 课程设计参考项目
• 支持 AI 协作开发的开源仓库

可以看一下这个项目。欢迎试用、提 Issue，也欢迎点个 Star 支持一下。