refactor: doc md to mdx

docs/en/graphics/texture/2d.mdx

@@ -1,8 +1,8 @@
 ---
 order: 1
-title: 2D 纹理
-type: 图形
-group: 纹理
+title: 2D Texture
+type: Graphics
+group: Texture
 label: Graphics/Texture
 ---
 
@@ -12,7 +12,7 @@ label: Graphics/Texture
 
 In the editor, you can easily import a 2D texture by following the path **[Asset Panel](/en/docs/assets/interface)** -> **Right-click Upload** -> **Select Texture2D** -> **Choose the corresponding texture** -> **2D texture asset creation complete**.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*71QKTYuRSyAAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*71QKTYuRSyAAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom: "50%"}} />
 
 Similarly, in the script, you can load an image through [ResourceManager](/apis/core/#ResourceManager) to get the corresponding 2D texture:
 
@@ -85,7 +85,7 @@ texture.getPixelBuffer(0, 0, width, height, 0, data);
 
 Assigning the texture to the corresponding property of the material ball can enable different rendering functions. For example, adding a base color texture can determine the basic tone of the model. In the editor, you only need to select the corresponding texture in the corresponding property.
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*toooTZvkC60AAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*toooTZvkC60AAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom: "50%"}} />
 
 Similarly, in the script, you can set it like this:
 
@@ -98,7 +98,7 @@ material.baseTexture = texture;
 
 ## Color Expansion
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*ACbwSKO2LHwAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*ACbwSKO2LHwAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom: "50%"}} />
 
 To solve the problem of black edges appearing at the abrupt changes in Alpha values in images with transparent pixels, the editor has a built-in color expansion function. This function removes the black edges of the image by rewriting the RGB values of all transparent pixels in the image to the RGB values of the nearest non-fully transparent pixels.
 
@@ -109,6 +109,6 @@ To solve the problem of black edges appearing at the abrupt changes in Alpha val
 
 ## Export Configuration
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*_aepTLE47-gAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*_aepTLE47-gAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom: "50%"}} />
 
 The [Project Release](/en/docs/platform/platform) document explains the **global configuration** for texture export in detail. If the Overwrite option is selected here, this asset will follow the **custom configuration** instead of the **global configuration** during export.

docs/en/graphics/texture/compression.mdx

@@ -36,7 +36,7 @@ KTX2 can be generated using:
 
 When packaging the project, the editor can configure options to generate KTX2. Refer to the '[Project Release](/en/docs/platform/platform/)' document. The project export is a global configuration, and different compression formats can be configured independently for different texture resources. Check overwrite in the texture panel of the editor to override the global configuration:
 
-<img src="https://mdn.alipayobjects.com/rms/afts/img/A*fmURSZ4HwKUAAAAAAAAAAAAAARQnAQ/original/image-20240705112419249.png" alt="image-20240705112419249" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/rms/afts/img/A*fmURSZ4HwKUAAAAAAAAAAAAAARQnAQ/original/image-20240705112419249.png" alt="image-20240705112419249"style={{zoom: "50%"}} />
 
 - ETC1S has a small size and minimal memory usage but lower quality, suitable for albedo, specular, and other maps.
 - UASTC has a larger size and higher quality, suitable for normal maps and similar textures.

docs/en/graphics/texture/texture.mdx

@@ -34,14 +34,14 @@ This article will mainly introduce:
 
 Texture space is determined by the shape of the texture. 2D textures require 2D space vectors for texture sampling, while cube textures require 3D space vectors for texture sampling.
 
-<div style="display: flex; gap: 20px;">
-  <figure style="flex:1;">
-  <img alt="Texture 2D" src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*lQ29R7W1ufsAAAAAAAAAAAAADhuCAQ/original" style="zoom:50%;" >
-  <figcaption style="text-align:center; color: #889096;font-size:12px">Texture 2D</figcaption>
+<div style={{display: "flex", gap: "20px"}}>
+  <figure style={{flex:1}}>
+  <Image alt="Texture 2D" src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*lQ29R7W1ufsAAAAAAAAAAAAADhuCAQ/original" style={{zoom: "50%"}} />
+  <figcaption style={{textAlign: "center", color: "#889096", fontSize: "12px"}}>Texture 2D</figcaption>
 	</figure>
-  <figure style="flex:1;">
-    <img alt="Texture Cube" src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*X752S5pQSB0AAAAAAAAAAAAAARQnAQ" style="zoom:80%;">
-    <figcaption style="text-align:center; color: #889096;font-size:12px">Texture Cube</figcaption>
+  <figure style={{flex:1}}>
+    <Image alt="Texture Cube" src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*X752S5pQSB0AAAAAAAAAAAAAARQnAQ" style={{zoom: "80%"}} />
+    <figcaption style={{textAlign: "center", color: "#889096", fontSize: "12px"}}>Texture Cube</figcaption>
   </figure>
 </div>
 

docs/zh/graphics/texture/2d.mdx

@@ -12,7 +12,7 @@ label: Graphics/Texture
 
 在编辑器中可以方便地导入一张 2D 纹理，按照路径 **[资产面板](/docs/assets/interface)** -> **右键上传** -> **选择 Texture2D** -> **选择对应贴图** -> **2D 纹理资产创建完毕** 操作即可。
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*71QKTYuRSyAAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*71QKTYuRSyAAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom: "50%"}} />
 
 同样的，在脚本中可以通过 [ResourceManager](/apis/core/#ResourceManager) 加载图片获取对应的 2D 纹理：
 
@@ -85,7 +85,7 @@ texture.getPixelBuffer(0, 0, width, height, 0, data);
 
 将纹理赋予材质球的相应属性，可以开启不同的渲染功能，如添加基础颜色纹理，可以决定模型的基本色调。在编辑器中，只需在对应属性选择相应纹理即可。
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*toooTZvkC60AAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*toooTZvkC60AAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom: "50%"}} />
 
 对应的，在脚本中，可以这样设置：
 
@@ -98,7 +98,7 @@ material.baseTexture = texture;
 
 ## 色彩膨胀
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*ACbwSKO2LHwAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*ACbwSKO2LHwAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom: "50%"}} />
 
 为了解决带透明像素图片在 Alpha 值突变处出现黑边的问题，编辑器内置了色彩膨胀功能。该功能是通过将图片中所有透明像素的 RGB 值改写为与其最临近非完全透明像素的 RGB 值，达到去除图片黑边的效果。
 
@@ -109,6 +109,6 @@ material.baseTexture = texture;
 
 ## 导出配置
 
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*_aepTLE47-gAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*_aepTLE47-gAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style={{zoom: "50%"}} />
 
 [项目发布](/docs/platform/platform)文档中详细说明了纹理导出时的**全局配置**，若此处勾选 Overwrite 选项时，此资产导出时将遵循**自定义配置**将非**全局配置**。

docs/zh/graphics/texture/compression.mdx

@@ -38,7 +38,7 @@ KTX2 的生成可以使用：
 
 编辑器在项目打包时，可以配置选项生成 KTX2，可以参考『[项目发布](/docs/platform/platform/)』文档。项目导出是全局的配置，也可以独立给不同的纹理资源配置不同的压缩格式。在编辑器的纹理面板下勾选 overwrite 可以覆盖全局配置：
 
-<img src="https://mdn.alipayobjects.com/rms/afts/img/A*fmURSZ4HwKUAAAAAAAAAAAAAARQnAQ/original/image-20240705112419249.png" alt="image-20240705112419249" style="zoom:50%;" />
+<Image src="https://mdn.alipayobjects.com/rms/afts/img/A*fmURSZ4HwKUAAAAAAAAAAAAAARQnAQ/original/image-20240705112419249.png" alt="image-20240705112419249" style={{zoom: "50%"}} />
 
 - ETC1S 尺寸小，内存极小，但是质量较低，适合 albedo, specular 等贴图
 - UASTC 尺寸大，质量高，适合 normal 这类贴图

docs/zh/graphics/texture/texture.mdx

@@ -34,14 +34,14 @@ label: Graphics/Texture
 
 纹理空间是由纹理形状决定的， 2D 纹理对应需要使用二维空间向量进行纹理采样，相应地，立方纹理需要使用三维空间向量进行纹理采样。
 
-<div style="display: flex; gap: 20px;">
-  <figure style="flex:1;">
-  <img alt="Texture 2D" src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*lQ29R7W1ufsAAAAAAAAAAAAADhuCAQ/original" style="zoom:50%;" >
-  <figcaption style="text-align:center; color: #889096;font-size:12px">Texture 2D</figcaption>
+<div style={{display: "flex", gap: "20px"}}>
+  <figure style={{flex:1}}>
+  <Image alt="Texture 2D" src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*lQ29R7W1ufsAAAAAAAAAAAAADhuCAQ/original" style={{zoom: "50%"}} />
+  <figcaption style={{textAlign: "center", color: "#889096", fontSize: "12px"}}>Texture 2D</figcaption>
 	</figure>
-  <figure style="flex:1;">
-    <img alt="Texture Cube" src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*X752S5pQSB0AAAAAAAAAAAAAARQnAQ" style="zoom:80%;">
-    <figcaption style="text-align:center; color: #889096;font-size:12px">Texture Cube</figcaption>
+  <figure style={{flex:1}}>
+    <Image alt="Texture Cube" src="https://gw.alipayobjects.com/mdn/rms_d27172/afts/img/A*X752S5pQSB0AAAAAAAAAAAAAARQnAQ" style={{zoom: "80%"}} />
+    <figcaption style={{textAlign: "center", color: "#889096", fontSize: "12px"}}>Texture Cube</figcaption>
   </figure>
 </div>