umbraco-backoffice

Umbraco Backoffice 扩展概览

此技能的作用

Backoffice 自定义由多种扩展类型组合而成，共同协作：

• “自定义管理区域” = Section + Menu + Dashboard
• “数据管理工具” = Section + Menu + Workspace
• “分层浏览器” = Section + Menu + Tree + Workspace

此技能提供完整且可正常运行的蓝图。源代码位于 ./examples/ 中，可复制并根据需求调整。

如需了解各扩展类型的详细信息，请调用相应的子技能。

TIP：如果工作区中有 Umbraco CMS 源代码，可将其用作参考和灵感来源。src/Umbraco.Web.UI.Client/src/packages/ 中的 backoffice 客户端代码展示了所有扩展类型的生产实现——请研究核心团队如何组织 sections、workspaces、trees 及其他模式。

---

必需工作流

CRITICAL：所有扩展开发都必须遵循此工作流。

**步骤 0 — 版本检查：**开始规划之前，调用 umbraco-version-guard，确认站点的 Umbraco 主版本与这些技能面向的主版本一致。若不一致，请停止——不同 Umbraco 主版本的 backoffice API 有所不同，这些技能会生成错误代码。

1. PLAN ──► Read PRE-BUILD-PLANNING.md FIRST
   │        Draw wireframe, label extension types, identify UUI components
   │        ⚠️ DO NOT write code until wireframe is approved
   ↓
2. BUILD ──► Use examples and sub-skills to create extension
   │
   │        ⛔ STOP - Do not skip validation
   ↓
3. VALIDATE ──► MANDATORY post-build steps:
               • npm run build (must pass)
               • Spawn umbraco-extension-reviewer agent
               • Fix High/Medium issues without asking
               • Browser test per POST-BUILD-VALIDATION.md

如果跳过规划：你一定会构建错误的扩展类型。 如果跳过验证：错误一定会影响用户。

无论通过 /umbraco-quickstart 还是直接调用，此工作流都适用。

CRITICAL：所有扩展开发都必须遵循此工作流：

1. PLAN ──► Read PRE-BUILD-PLANNING.md, draw wireframes, identify extension types
      ↓
2. BUILD ──► Use examples and sub-skills to create extension
      ↓
3. VALIDATE ──► Read POST-BUILD-VALIDATION.md, run umbraco-extension-reviewer

• 绝不跳过规划 - 线框图可避免构建错误的扩展类型
• 绝不跳过验证 - 审查者会在问题影响用户之前发现它们

---

可用示例

每个示例都附有详细的 README.md，包含完整文档。请参阅 examples/ 文件夹。

示例	复杂度	展示内容
Blueprint	入门	Section + Menu + Dashboard + Workspace - 基础模式
tree-example	中级	在 Settings section 中使用 Workspace 进行 Tree 导航
TimeDashboard	高级	13 种以上扩展类型，包括 Header Apps、Modals、Property Editors
notes-wiki	全栈	完整的 C# 后端，包含 CRUD、分层树和多个 workspaces

快速参考

• 需要新建 section？ 从 Blueprint 开始
• 需要 Tree 导航？ 查看 tree-example
• 需要特定扩展类型？ 查看 TimeDashboard 中的示例
• 需要包含 API 的全栈方案？ 研究 notes-wiki

---

使用示例

1. 浏览 examples/ 文件夹，并阅读每个示例的 README.md
2. 复制最符合需求的示例到项目中
3. 重命名示例命名空间中的别名（例如，将 Blueprint.* 改为 MyApp.*）
4. 更新 entityType 值，使其与你的领域匹配
5. 自定义 UI 组件以适应使用场景
6. 通过 umbraco-package.json 向 Umbraco 注册
7. 添加项目引用到主 Umbraco 实例 - 使用技能 umbraco-add-extension-reference

---

参考文档

详细参考资料位于单独的文件中，可按需加载：

参考资料	阅读时机
PRE-BUILD-PLANNING.md	构建任何扩展之前 - 可视化规划、线框图、UUI 组件
EXTENSION-MAP.md	“扩展类型 X 会出现在 UI 的哪里？” - 展示所有扩展位置的 ASCII 图
SUB-SKILLS-REFERENCE.md	“X 需要什么技能？” - 按类别划分的所有子技能完整索引
POST-BUILD-VALIDATION.md	构建完成之后 - 完整验证工作流、浏览器测试、调试