umbraco-backoffice

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Umbraco Backoffice Extensions Overview

Umbraco Backoffice Extensions 概述

What This Skill Does

此技能的用途

Backoffice customisations are combinations of extension types working together:

A "custom admin area" = Section + Menu + Dashboard
A "data management tool" = Section + Menu + Workspace
A "hierarchical browser" = Section + Menu + Tree + Workspace

This skill provides complete working blueprints. The source code is in

./examples/

- copy and adapt for your needs.

For details on individual extension types, invoke the referenced sub-skills.

TIP: If the Umbraco CMS source code is available in your workspace, use it as a reference and for inspiration. The backoffice client code in
src/Umbraco.Web.UI.Client/src/packages/
shows production implementations of all extension types - study how the core team structures sections, workspaces, trees, and other patterns.

后台定制是多种扩展类型的组合协作：

"自定义管理区域" = Section + Menu + Dashboard
"数据管理工具" = Section + Menu + Workspace
"层级浏览器" = Section + Menu + Tree + Workspace

本技能提供完整的可运行蓝图。源代码位于

./examples/

目录下，可直接复制并根据需求调整。

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

提示：如果你的工作区中可以访问Umbraco CMS源代码，可以将其作为参考和灵感来源。
src/Umbraco.Web.UI.Client/src/packages/
目录下的后台客户端代码展示了所有扩展类型的生产级实现——研究核心团队如何构建板块、工作区、树形结构及其他模式。

Required Workflow

必备工作流

CRITICAL: This workflow is MANDATORY for ALL extension development.

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

If you skip planning: You WILL build the wrong extension type. If you skip validation: Bugs WILL reach the user.

This workflow applies whether invoked via

/umbraco-quickstart

or directly.

CRITICAL: Follow this workflow for ALL extension development:

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

Never skip planning - Wireframes prevent building the wrong extension type
Never skip validation - The reviewer catches issues before they reach users

重要提示：此工作流是所有扩展开发的强制要求。

1. 规划 ──► 首先阅读PRE-BUILD-PLANNING.md
   │        绘制线框图，标记扩展类型，确定UUI组件
   │        ⚠️ 线框图获批前请勿编写代码
   ↓
2. 构建 ──► 使用示例和子技能创建扩展
   │
   │        ⛔ 停止 - 不要跳过验证步骤
   ↓
3. 验证 ──► 强制的构建后步骤：
               • npm run build（必须执行成功）
               • 启动umbraco-extension-reviewer agent
               • 无需询问，直接修复高/中等级别的问题
               • 根据POST-BUILD-VALIDATION.md进行浏览器测试

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

无论通过

/umbraco-quickstart

还是直接调用，此工作流均适用。

重要提示：所有扩展开发都必须遵循此工作流：

1. 规划 ──► 阅读PRE-BUILD-PLANNING.md，绘制线框图，确定扩展类型
      ↓
2. 构建 ──► 使用示例和子技能创建扩展
      ↓
3. 验证 ──► 阅读POST-BUILD-VALIDATION.md，运行umbraco-extension-reviewer

永远不要跳过规划 - 线框图可避免构建错误的扩展类型
永远不要跳过验证 - 审查工具会在问题到达用户前发现它们

Available Examples

可用示例

Each example has a detailed README.md with full documentation. See the

examples/

folder.

Example	Complexity	What It Shows
Blueprint	Starter	Section + Menu + Dashboard + Workspace - the fundamental pattern
tree-example	Intermediate	Tree navigation in Settings section with Workspace
TimeDashboard	Advanced	13+ extension types including Header Apps, Modals, Property Editors
notes-wiki	Full-stack	Complete C# backend with CRUD, hierarchical tree, multiple workspaces

每个示例都有详细的README.md文档，可查看

examples/

目录。

示例	复杂度	展示内容
Blueprint	入门级	Section + Menu + Dashboard + Workspace - 基础模式
tree-example	进阶级	设置板块中的树形导航及Workspace
TimeDashboard	高级	13种以上扩展类型，包括头部应用、模态框、属性编辑器
notes-wiki	全栈	完整的C#后端CRUD功能、层级树形结构、多Workspace

Quick Reference

快速参考

Need a new section? Start with
```
Blueprint
```
Need tree navigation? See
```
tree-example
```
Need specific extension type? Check
```
TimeDashboard
```
for examples
Need full-stack with API? Study
```
notes-wiki
```

需要新Section？ 从
```
Blueprint
```
开始
需要树形导航？ 查看
```
tree-example
```
需要特定扩展类型？ 查看
```
TimeDashboard
```
中的示例
需要带API的全栈实现？ 研究
```
notes-wiki
```

Using the Examples

使用示例的步骤

Browse the
```
examples/
```
folder and read the README.md for each example
Copy the example closest to your needs into your project
Rename aliases from the example namespace to your own (e.g.,
```
Blueprint.*
```
to
```
MyApp.*
```
)
Update the
```
entityType
```
values to match your domain
Customise the UI components for your use case
Register with Umbraco via
```
umbraco-package.json
```
Add project reference to the main Umbraco instance - use skill
```
umbraco-add-extension-reference
```

浏览
```
examples/
```
目录，阅读每个示例的README.md
复制最接近你需求的示例到你的项目中
重命名示例命名空间下的别名（例如，将
```
Blueprint.*
```
改为
```
MyApp.*
```
）
更新
```
entityType
```
值以匹配你的业务领域
定制UI组件以适配你的使用场景
通过
umbraco-package.json
向Umbraco注册
添加项目引用到主Umbraco实例 - 使用技能
```
umbraco-add-extension-reference
```

Reference Documentation

参考文档

Detailed reference material is available in separate files for on-demand loading:

Reference	When to Read
PRE-BUILD-PLANNING.md	Before building any extension - visual planning, wireframes, UUI components
EXTENSION-MAP.md	"Where does extension type X appear in the UI?" - ASCII diagram showing all extension locations
SUB-SKILLS-REFERENCE.md	"What skill do I need for X?" - Complete index of all sub-skills by category
POST-BUILD-VALIDATION.md	After building - complete validation workflow, browser testing, debugging

详细的参考资料在单独的文件中，可按需查看：

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

umbraco-backoffice

Original

Translation

Umbraco Backoffice Extensions Overview

Umbraco Backoffice Extensions 概述

What This Skill Does

此技能的用途

Required Workflow

必备工作流

This workflow applies whether invoked via
`/umbraco-quickstart`
or directly.

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

Available Examples

可用示例

Quick Reference

快速参考

Using the Examples

使用示例的步骤

Reference Documentation

参考文档

umbraco-backoffice

Original

Translation

Umbraco Backoffice Extensions Overview

Umbraco Backoffice Extensions 概述

What This Skill Does

此技能的用途

Required Workflow

必备工作流

This workflow applies whether invoked via /umbraco-quickstart or directly.

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

Available Examples

可用示例

Quick Reference

快速参考

Using the Examples

使用示例的步骤

Reference Documentation

参考文档

This workflow applies whether invoked via
`/umbraco-quickstart`
or directly.

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