refactor: update editor interface (#991)

* refactor: doc update
galacean · Mar 19, 2024 · e4ec226 · e4ec226
1 parent 5533e26
commit e4ec226
Show file tree

Hide file tree

Showing 27 changed files with 92 additions and 105 deletions.
diff --git a/docs/animation-clip.zh-CN.md b/docs/animation-clip.zh-CN.md
@@ -27,7 +27,7 @@ label: Animation
 
 ### Transform 组件示例
 
-1. 在 **[资产面板](${docs}interface-assets)** 中 右键/点击+ 创建 `动画片段` 资产
+1. 在 **[资产面板](${docs}assets-interface)** 中 右键/点击+ 创建 `动画片段` 资产
 
 ![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*j4FMRKx91nEAAAAAAAAAAAAADsJ_AQ/original)
 

diff --git a/docs/animation-sprite-sheet.zh-CN.md b/docs/animation-sprite-sheet.zh-CN.md
@@ -15,7 +15,7 @@ Galacean 支持引用类型的动画曲线，你可以添加类型为资产的
 
 ![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*ababSZAMpJMAAAAAAAAAAAAADsJ_AQ/original)
 
-3. 在 **[资产面板](${docs}interface-assets)** 中创建 [动画片段](${docs}animation-clip)
+3. 在 **[资产面板](${docs}assets-interface)** 中创建 [动画片段](${docs}animation-clip)
 
 ![alt text](https://mdn.alipayobjects.com/huamei_3zduhr/afts/img/A*CZQjSqZAHGsAAAAAAAAAAAAADsJ_AQ/original)
 

diff --git a/docs/interface-publish.zh-CN.md → docs/assets-build.zh-CN.md b/docs/interface-publish.zh-CN.md → docs/assets-build.zh-CN.md
@@ -1,9 +1,8 @@
 ---
-order: 6
+order: 2
 title: 项目导出
-type: 基础知识
-group: 界面
-label: Basics/Interface
+type: 资产工作流
+label: Resource
 ---
 
 ## HTML5 项目
@@ -25,7 +24,7 @@ Galacean Editor 项目导出功能可以将当前编辑器项目作为一个前
 | 纹理类型      | 勾选 [KTX2](https://www.khronos.org/ktx/) 开启[纹理压缩](${docs}graphics-texture-compression)优化选项                             |
 | 纹理压缩格式  | 勾选 [KTX2](https://www.khronos.org/ktx/) 后可见，不同压缩格式会影响纹理的尺寸和渲染质量                                          |
 | 纹理压缩质量  | 勾选 [KTX2](https://www.khronos.org/ktx/) 后可见，可以一定限度上调整纹理的尺寸和渲染质量                                          |
-| 主场景        | 选择 **[资产面板](${docs}interface-assets)** 中的某个场景作为项目加载后的主场景                                                   |
+| 主场景        | 选择 **[资产面板](${docs}assets-interface)** 中的某个场景作为项目加载后的主场景                                                   |
 
 #### 渲染导出配置
 

diff --git a/docs/assets-gc.zh-CN.md b/docs/assets-gc.zh-CN.md
@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 4
 title: 资产的释放
 type: 资产工作流
 label: Resource

diff --git a/docs/interface-assets.zh-CN.md → docs/assets-interface.md b/docs/interface-assets.zh-CN.md → docs/assets-interface.md
@@ -1,12 +1,11 @@
 ---
-order: 3
+order: 1
 title: 资产面板
-type: 基础知识
-group: 界面
-label: Basics/Interface
+type: 资产工作流
+label: Resource
 ---
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/f0c6ef22-b6f5-4ac7-876c-fff2e4a8b99d/image-20240122134812991.png" alt="image-20240122134812991" style="zoom:50%;" />
+<img src="https://gw.alipayobjects.com/zos/OasisHub/116f21cb-1cae-4492-92bb-4276173cae9b/image-20240319102237183.png" alt="image-20240319102237183" style="zoom:50%;" />
 
 资产面板是编辑器中一个重要的面板，它可以帮助你管理场景中使用到的所有资产。在资产面板中，你可以查看和管理场景中使用到的所有资产，例如材质、贴图、模型等等。通过资产面板，你可以添加或删除资产，以及对资产进行分类管理，从而更好的组织资产。
 
@@ -35,31 +34,27 @@ label: Basics/Interface
 
 为了在场景中添加资产，你可以点击资产面板上的添加按钮，或者资产面板的右键菜单中的添加选项来添加新资产。添加资产后，你可以在 **[检查器面板](${docs}interface-inspector)** 中对资产的属性进行编辑。资产面板中的资产类型非常丰富，例如材质、贴图、模型、字体等等。具体可以参照上方的表格。
 
-<figure style="width: 578px;">
- <img src="https://gw.alipayobjects.com/zos/OasisHub/5bc3747d-b1e9-4864-b490-7f9d3eb86e93/image-20240122135556344.png" alt="image-20240122135556344" style="zoom:50%;" />
-  <figcaption style="text-align:center; color: #889096; font-size: 12px;">通过右键菜单创建/上传资产</figcaption>
-</figure>
+<img src="https://gw.alipayobjects.com/zos/OasisHub/aec9a0de-98c4-47ce-bc4d-6a7a80decfc8/image-20240319103341208.png" alt="image-20240319103341208" style="zoom:50%;" />
+
 
 你还可以将文件拖动到资产面板中来添加资产，组合文件可以直接选中多个文件拖进资产面板即可。
 
-<figure style="width:605px;">
-<img src="https://gw.alipayobjects.com/zos/OasisHub/15d62349-0820-44ec-8eb6-4e5a82121341/drag2.gif" alt="drag2" style="zoom:50%;" />
-  <figcaption style="text-align:center; color: #889096; font-size: 12px;">通过拖拽上传图片</figcaption>
-</figure>
+<img src="https://gw.alipayobjects.com/zos/OasisHub/dc4a06ee-c92a-4ee4-8062-11cd26cf3201/drag6.gif" alt="drag6" style="zoom:67%;" />
+
 
 ### 组织资产
 
-资产面板中的资产可以通过分类来管理，以便更好的组织资产。你可以在资产面板中创建文件夹并将资产移动到对应的文件夹中，以实现分类管理。资产面板中的文件夹可以嵌套，你可以创建多层级的文件夹来更好的组织资产。
+资产面板中的资产可以通过分类来管理，以便更好的组织资产。你可以在资产面板中创建文件夹并将资产移动到对应的文件夹中（也可以移动到左侧目录的文件夹中），以实现分类管理。资产面板中的文件夹可以嵌套，你可以创建多层级的文件夹来更好的组织资产。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/520edde4-a54b-4b53-bd47-d1738d08e26a/drag1.gif" alt="drag1" style="zoom:50%;" />
+<img src="https://gw.alipayobjects.com/zos/OasisHub/92fb2341-8f52-451b-a4fd-9ca577a1f480/drag7.gif" alt="drag7" style="zoom:67%;" />
 
 资产面板提供了对资产浏览友好的工具栏，帮助你快速地查找某个或某类资产。你也可以根据你的使用习惯，对资产的浏览模式、排序方式和缩略图大小进行修改。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/538c4cc0-7180-404a-8163-24564541bd75/drag4.gif" alt="drag4" style="zoom: 50%;" />
+<img src="https://gw.alipayobjects.com/zos/OasisHub/d1f0daff-a503-4e24-b3eb-8a86d8faa7a1/drag8.gif" alt="drag8" style="zoom:67%;" />
 
 组织完资产后，每个资产都有一个**相对路径**，我们可以右击某个资产拷贝路径。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/5c56884c-ac30-4f87-95a8-48d96117a53b/image-20240131162519263.png" alt="image-20240131162519263" style="zoom:50%;" />
+<img src="https://gw.alipayobjects.com/zos/OasisHub/8749922b-9989-47c2-ba42-85c122391c85/image-20240319132804611.png" alt="image-20240319132804611" style="zoom:50%;" />
 
 这对项目开发来说很重要，因为项目中经常遇到需要异步加载资产的情况，即初始化不需要加载某个资产（甚至是场景），可以通过脚本来控制某个资产的加载。具体的语法可以看[资产](${docs}assets-load)和[场景](${docs}core-scene)的加载使用，以加载场景为例：
 
@@ -75,23 +70,17 @@ this.engine.resourceManager.load({ url: "...", type: AssetType.Scene });
 
 在选中一个资产后, 右侧的 **[检查器面板](${docs}interface-inspector)** 会显示出此资产可配置的属性。不同的资产所对应的可配置项是不同的, 比如 glTF 资产会显示模型预览窗, 材质资产会显示出详细的材质配置选项 。
 
-<figure style="width: 284px;">
- <img src="https://gw.alipayobjects.com/zos/OasisHub/ffb89d11-b221-4757-96f9-c4950ea7f225/image-20240122134306052.png" alt="image-20240122134306052" style="zoom:50%;" />
-  <figcaption style="text-align:center; color: #889096;font-size: 12px;">glTF检查器</figcaption>
-</figure>
+<img src="https://gw.alipayobjects.com/zos/OasisHub/e90ace3a-7b03-49cc-ad9a-e3aa51f17283/image-20240319120017637.png" alt="image-20240319120017637" style="zoom:50%;" />
+
 
 ### 使用资产
 
 部分资产（如 glTF 资产）支持拖拽到场景中或节点树中。
 
-<img src="https://gw.alipayobjects.com/zos/OasisHub/1220149f-b509-4e7e-bf11-5f0bc4de5bd6/drag3.gif" alt="drag3" style="zoom:50%;" />
+<img src="https://gw.alipayobjects.com/zos/OasisHub/c710e1e4-2d73-4e76-a4fa-b03caa1f68bc/drag9.gif" alt="drag9" style="zoom:67%;" />
+
 
-检查器提供了统一的资产选择器，你也可以把资产拖拽到检查器的资产选择框中，以便快速操作。
 
-<figure style="width: 326px;">
- <img src="https://gw.alipayobjects.com/zos/OasisHub/f456c74e-b8ba-4bd6-9cf9-4f907535af26/image-20240122134039213.png" alt="image-20240122134039213" style="zoom:50%;" />
-  <figcaption style="text-align:center; color: #889096; font-size: 12px;">资产选择器</figcaption>
-</figure>
 
 ### 快捷键
 

diff --git a/docs/assets-load.zh-CN.md b/docs/assets-load.zh-CN.md
@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title: 资产的加载
 type: 资产工作流
 label: Resource
@@ -84,7 +84,7 @@ this.engine.resourceManager.load<GLTFResource>({
 this.engine.resourceManager.load<GLTFResource>("Assets/texture.png");
 ```
 
-> 在编辑器中可以通过 **[资产面板](${docs}interface-assets)** -> **右键资产** -> **Copy relative path** 快速复制资产的相对路径
+> 在编辑器中可以通过 **[资产面板](${docs}assets-interface)** -> **右键资产** -> **Copy relative path** 快速复制资产的相对路径
 
 ### baseUrl
 

diff --git a/docs/assets-overall.zh-CN.md b/docs/assets-overall.zh-CN.md
@@ -19,7 +19,7 @@ flowchart LR
 本章节将主要讲述：
 
 - [资产类型](${docs}assets-type)：介绍**内置资产类型**和如何**自定义资产加载器**
-- 编辑状态下[资产的增删改查](${docs}interface-assets)
-- 构建项目后[资产如何导出并部署](${interface-publish})
+- 编辑状态下[资产的增删改查](${docs}assets-interface)
+- 构建项目后[资产如何导出并部署](${assets-build})
 - 运行时如何[加载资产](${docs}assets-load)
 - 运行时如何[垃圾回收](${docs}assets-gc)
diff --git a/docs/core-canvas.zh-CN.md b/docs/core-canvas.zh-CN.md
@@ -41,7 +41,7 @@ flowchart TD
     C[HtmlCanvas.clientHeight] -->|pixelRatio| D[WebCanvas.height]
 ```
 
-若通过编辑器导出 **NPM package** 进行开发，只需在[项目导出](${docs}interface-publish)渲染导出配置处控制**设备像素比**即可。
+若通过编辑器导出 **NPM package** 进行开发，只需在[项目导出](${docs}assets-build)渲染导出配置处控制**设备像素比**即可。
 
 <img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*afw5QrbrxkQAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
 

diff --git a/docs/core-engine.zh-CN.md b/docs/core-engine.zh-CN.md
@@ -29,7 +29,7 @@ const engine = await WebGLEngine.create({ canvas: "canvas" });
 
 ### 渲染上下文
 
-开发者可以在 [导出界面](${docs}interface-publish) 设置上下文的渲染配置。
+开发者可以在 [导出界面](${docs}assets-build) 设置上下文的渲染配置。
 
 <img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*WZHzRYIpUzQAAAAAAAAAAAAADhuCAQ/original" style="zoom:50%;" />
 

diff --git a/docs/core-scene.zh-CN.md b/docs/core-scene.zh-CN.md
@@ -13,7 +13,7 @@ Scene 作为场景单元，可以方便的进行实体树管理，尤其是大
 
 ### 创建和切换
 
-在 **[资产面板](${docs}interface-assets)** 右键（或资产面板右上角 + 号）创建场景，双击场景可以切换过去：
+在 **[资产面板](${docs}assets-interface)** 右键（或资产面板右上角 + 号）创建场景，双击场景可以切换过去：
 
 ![Untitled](https://mdn.alipayobjects.com/rms/afts/img/A*3KX4QKXgZZAAAAAAAAAAAAAAARQnAQ/original/Untitled.gif)
 

diff --git a/docs/getting-started-core-concept.zh-CN.md b/docs/getting-started-core-concept.zh-CN.md
@@ -64,7 +64,7 @@ label: Basics/GettingStarted
 接下来，我们为这个节点再绑定一个 `Script` 组件（[什么是 Script 组件?](https://galacean.antgroup.com/#/docs/latest/cn/script)）。
 
 1. 我们继续使用上述方式在 **[检查器面板](${docs}interface-inspector)** 中添加 `Script` 组件
-2. 接下来，我们在 **[资产面板](${docs}interface-assets)** 中 `右键` → `Create` → `Script` 创建一个 `Script` 资产
+2. 接下来，我们在 **[资产面板](${docs}assets-interface)** 中 `右键` → `Create` → `Script` 创建一个 `Script` 资产
 3. 最后，在 **[检查器面板](${docs}interface-inspector)** 中将刚创建的脚本文件绑定到脚本组件上
 
 > ⚠️ 注意，如果你没有把脚本资产绑定到实体的脚本组件上，则脚本不会运行

diff --git a/docs/getting-started-overview.zh-CN.md b/docs/getting-started-overview.zh-CN.md
@@ -88,7 +88,7 @@ import { OrbitControl } from " @galacean/engine-toolkit-controls";
 
 可以在支持 WebGL 的环境下运行，到目前为止，所有主流的移动端浏览器与桌面浏览器都支持这一标准。可以在 [CanIUse](https://caniuse.com/?search=webgl) 上检测运行环境的兼容性。
 
-此外，**Galacean Runtime** 还支持在[支付宝/淘宝小程序](${docs}interface-publish)中运行，同时也有开发者在社区贡献了[微信小程序/游戏的适配方案](https://github.com/deepkolos/platformize)。对于一些需要额外考虑兼容性的功能模块，当前的适配方案如下：
+此外，**Galacean Runtime** 还支持在[支付宝/淘宝小程序](${docs}assets-build)中运行，同时也有开发者在社区贡献了[微信小程序/游戏的适配方案](https://github.com/deepkolos/platformize)。对于一些需要额外考虑兼容性的功能模块，当前的适配方案如下：
 
 | 模块                            | 兼容考虑                                                 | 具体文档                                                                                |
 | :------------------------------ | :------------------------------------------------------- | :-------------------------------------------------------------------------------------- |

diff --git a/docs/graphics-2d-spine.zh-CN.md b/docs/graphics-2d-spine.zh-CN.md
@@ -34,7 +34,7 @@ flowchart LR
 
 ### 资源上传
 
-资源导出后，开发者需要同时把三个文件上传到 Galacean Editor。通过 **[资产面板](${docs}interface-assets)** 的上传按钮选择 “spine” 资产，选择本地的这三个文件，上传成功后能够在资产面板看到上传的 spine 资产：
+资源导出后，开发者需要同时把三个文件上传到 Galacean Editor。通过 **[资产面板](${docs}assets-interface)** 的上传按钮选择 “spine” 资产，选择本地的这三个文件，上传成功后能够在资产面板看到上传的 spine 资产：
 <img src="https://mdn.alipayobjects.com/huamei_kz4wfo/afts/img/A*OYpQSIgQi8UAAAAAAAAAAAAADsp6AQ/original"  style="zoom:50%;" />
 
 也可以直接把三个文件拖动到资产区域完成上传：

diff --git a/docs/graphics-2d-sprite.zh-CN.md b/docs/graphics-2d-sprite.zh-CN.md
@@ -33,13 +33,13 @@ pivot 代表精灵中心在 region 中的位置，如下：
 
 #### 上传精灵
 
-在 **[资产面板](${docs}interface-assets)** 空白处依次 **右键** → **Upload** → **Sprite** → **选中对应图片** 即可上传精灵资产，上传成功后当前资产列表会同步添加一份名为 `图片名.png` 的纹理资产和一份 `图片名-spr.png` 的精灵资产
+在 **[资产面板](${docs}assets-interface)** 空白处依次 **右键** → **Upload** → **Sprite** → **选中对应图片** 即可上传精灵资产，上传成功后当前资产列表会同步添加一份名为 `图片名.png` 的纹理资产和一份 `图片名-spr.png` 的精灵资产
 
 <img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*bRghQqoN1GAAAAAAAAAAAAAADhuCAQ/original" alt="avatar" style="zoom:50%;" />
 
 #### 创建空白精灵
 
-在 **[资产面板](${docs}interface-assets)** 空白处依次 **右键** → **Create** → **Sprite** 即可创建一份空白的精灵资产。
+在 **[资产面板](${docs}assets-interface)** 空白处依次 **右键** → **Create** → **Sprite** 即可创建一份空白的精灵资产。
 
 <img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Gv96TrKvRkEAAAAAAAAAAAAADhuCAQ/original" alt="avatar" style="zoom:50%;" />
 

diff --git a/docs/graphics-2d-spriteAtlas.zh-CN.md b/docs/graphics-2d-spriteAtlas.zh-CN.md
@@ -20,7 +20,7 @@ label: Graphics/2D
 
 ### 创建精灵图集
 
-在 **[资产面板](${docs}interface-assets)** 内右键，选择`功能列表`中的`创建`，并选中`精灵图集`，此时，一个空白的精灵图集资产就创建成功了。
+在 **[资产面板](${docs}assets-interface)** 内右键，选择`功能列表`中的`创建`，并选中`精灵图集`，此时，一个空白的精灵图集资产就创建成功了。
 
 <img src="https://mdn.alipayobjects.com/huamei_w6ifet/afts/img/A*W-HZSrvAiG8AAAAAAAAAAAAADjCHAQ/original" alt="buildBox" style="zoom: 67%;" />
 

diff --git a/docs/graphics-background-sky.zh-CN.md b/docs/graphics-background-sky.zh-CN.md
@@ -18,13 +18,13 @@ label: Graphics/Background
 
 > 可以在 [BimAnt HDRI](http://hdri.bimant.com/) 下载免费的 HDR 贴图
 
-天空盒纹理就是一张[立方纹理](${docs}graphics-texture-cube)，首先在准备好 HDR 后，依照路径 **[资产面板](${docs}interface-assets)** -> **右键上传** -> **选择 TextureCube(.hdr)** -> **选择对应 HDR 贴图** -> **立方纹理资产创建完毕** 操作即可。
+天空盒纹理就是一张[立方纹理](${docs}graphics-texture-cube)，首先在准备好 HDR 后，依照路径 **[资产面板](${docs}assets-interface)** -> **右键上传** -> **选择 TextureCube(.hdr)** -> **选择对应 HDR 贴图** -> **立方纹理资产创建完毕** 操作即可。
 
 ![image.png](https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*5PG6Rpo-aTwAAAAAAAAAAAAADhuCAQ/original)
 
 ### 2. 创建天空盒材质
 
-创建完立方纹理资产后，依照路径 **[资产面板](${docs}interface-assets)** -> **右键创建** -> **选择 Material** -> **选中生成的资产** -> **[检查器面板](${docs}interface-inspector)** -> **点击 Base 栏的 Shader 属性** -> **选择 Sky Box** -> **点击 Base 栏的 HDR** -> **选择第一步创建的立方纹理** 创建天空盒材质。
+创建完立方纹理资产后，依照路径 **[资产面板](${docs}assets-interface)** -> **右键创建** -> **选择 Material** -> **选中生成的资产** -> **[检查器面板](${docs}interface-inspector)** -> **点击 Base 栏的 Shader 属性** -> **选择 Sky Box** -> **点击 Base 栏的 HDR** -> **选择第一步创建的立方纹理** 创建天空盒材质。
 
 ![image.png](https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*YkX9R5yfGE0AAAAAAAAAAAAADhuCAQ/original)
 

diff --git a/docs/graphics-mesh-primitiveMesh.zh-CN.md b/docs/graphics-mesh-primitiveMesh.zh-CN.md
@@ -18,7 +18,7 @@ label: Graphics/Mesh
 
 <img src="https://gw.alipayobjects.com/zos/OasisHub/b61f5f8c-1eba-4ea8-a019-f823a6c0b17d/image-20231009112014068.png" alt="image-20231009112014068" style="zoom:50%;" />
 
-内置几何体无法满足需求？您可以在 **[资产面板](${docs}interface-assets)** 中 **右键** → **Create** → **PrimitiveMesh** 创建一个 `Mesh` 资产，并通过调整 `Mesh` 的各项参数来满足需求。
+内置几何体无法满足需求？您可以在 **[资产面板](${docs}assets-interface)** 中 **右键** → **Create** → **PrimitiveMesh** 创建一个 `Mesh` 资产，并通过调整 `Mesh` 的各项参数来满足需求。
 
 <img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*g3XwRrrVv8kAAAAAAAAAAAAADhuCAQ/original" alt="image-20231009111916680" style="zoom:50%;" />
 

diff --git a/docs/graphics-model-assets.zh-CN.md b/docs/graphics-model-assets.zh-CN.md
@@ -6,7 +6,7 @@ group: 模型
 label: Graphics/Model
 ---
 
-模型导入完毕后， **[资产面板](${docs}interface-assets)** 中会新增导入的模型资产，点击资产缩略图，可以看到这个模型的基本信息。
+模型导入完毕后， **[资产面板](${docs}assets-interface)** 中会新增导入的模型资产，点击资产缩略图，可以看到这个模型的基本信息。
 
 <img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*Aiu9SpMRvxYAAAAAAAAAAAAADhuCAQ/original" alt="image-20231009112328575" style="zoom:50%;" />
 

diff --git a/docs/graphics-model-importGlTF.zh-CN.md b/docs/graphics-model-importGlTF.zh-CN.md
@@ -35,4 +35,4 @@ style="zoom:100%;" />
 
 <img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*OtKERZfkrEAAAAAAAAAAAAAADhuCAQ/original" alt="image-20231009112129853" style="zoom:50%;" />
 
-导入完毕后， **[资产面板](${docs}interface-assets)** 中就会新增导入的模型资产，让我们[看看模型资产包含了什么内容](${docs}graphics-model-assets)吧。
+导入完毕后， **[资产面板](${docs}assets-interface)** 中就会新增导入的模型资产，让我们[看看模型资产包含了什么内容](${docs}graphics-model-assets)吧。
diff --git a/docs/graphics-model-use.zh-CN.md b/docs/graphics-model-use.zh-CN.md
@@ -41,7 +41,7 @@ engine.resourceManager
   });
 ```
 
-在编辑器中，可以直接获取模型资产的 URL （ **[资产面板](${docs}interface-assets)** -> **右键模型资产缩略图** -> **Copy file info / Copy relative path**）：
+在编辑器中，可以直接获取模型资产的 URL （ **[资产面板](${docs}assets-interface)** -> **右键模型资产缩略图** -> **Copy file info / Copy relative path**）：
 
 <img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*T6-QR7KrH8oAAAAAAAAAAAAADhuCAQ/original" alt="import" style="zoom:100%;" />