diff --git a/packages/opendesign/src/grid/__docs__/__case__/GridUsage.vue b/packages/opendesign/src/grid/__docs__/__case__/GridUsage.vue
index 0ec4f636439903a46efa6fb7734388a5900c1ce2..8b60b35a5a65cde1d7f418fc18f70ddb0d5bda06 100644
--- a/packages/opendesign/src/grid/__docs__/__case__/GridUsage.vue
+++ b/packages/opendesign/src/grid/__docs__/__case__/GridUsage.vue
@@ -3,32 +3,150 @@
 
 ### 使用
 
+ORow的属性：
+
+通过属性 `inline` 控制 `Row` 的根元素的 `display` 是否为 `inline-flex`；
+
+通过属性 `align` 控制容器辅轴对齐方式；
+
+通过属性 `justify` 控制容器主轴对齐方式；
+
+通过属性 `wrap` 控制容器 `flex-wrap` 样式的值；
+
+通过属性 `direction` 控制容器 `flex-direction` 样式的值；
+
+通过属性 `gap` 控制子元素的间距，注意：当同时为组件传递了 `gap`、`gapX`、`gapY` 属性，将优先使用 `gapX`、`gapY`；
+
+通过属性 `pcS`、`laptop`、`pad`、`padV`、`phone` 可以控制不同断点尺寸下的 `gap`值。
+
+OCol的属性：
+
+通过属性 `flex` 控制元素的 `flex` 样式的值；
+
+通过属性 `align` 控制元素辅轴的对齐方式；
+
+通过属性 `pcS`、`laptop`、`pad`、`padV`、`phone` 可以控制不同断点尺寸下的 `flex`值。
+
 <!-- en-US -->
 
+The attributes of ORow:
+
+Control whether the `display` of the root element of the `Row` is`inline-flex`through the property`inline`;
+
+Control the alignment of the container\`s auxiliary axes through the attribute `align`;
+
+Control the alignment of the container\`s main axis through the attribute `justify`;
+
+Control the value of the container `flex-wrap` style through the attribute `wrap`;
+
+Control the value of the container `flex-direction` style through the attribute `direction`;
+
+Control the spacing of child elements through the attribute `gap`. Note: When the attributes`gap`, `gapX`, and `gapY` are passed to a component simultaneously, `gapX` and `gapY` will be used first.
+
+The `gap` value at different breakpoint sizes can be controlled through the attributes`pcS`, `laptop`, `pad`, `padV`, and `phone`.
+
+The properties of OCol:
+
+Control the value of the `flex` style of an element through the attribute `flex`;
+
+Control the alignment of the element\`s secondary axis through the attribute `align`;
+
+The `flex` value at different breakpoint sizes can be controlled through the attributes`pcS`, `laptop`, `pad`, `padV`, and `phone`.
+
 ### Usage
 </docs>
 <script setup lang="ts">
-import { ORow, OCol } from '@opensig/opendesign';
+import { reactive } from 'vue';
+import { propsToAttrStr } from '../../../_demo/utils';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types';
+import { type RowMediaT } from '../../types';
+
+const _oSchema = {
+  inline: {
+    type: 'boolean',
+  },
+  align: {
+    type: 'list',
+    list: ['center', 'flex-start', 'flex-end', 'stretch', 'baseline', 'inherit', 'initial'],
+  },
+  justify: {
+    type: 'list',
+    list: ['center', 'flex-start', 'flex-end', 'space-between', 'space-around', 'space-evenly', 'inherit', 'initial'],
+  },
+  wrap: {
+    type: 'list',
+    list: ['wrap', 'nowrap', 'wrap-reverse', 'initial', 'inherit'],
+  },
+  direction: {
+    type: 'list',
+    list: ['row', 'row-reverse', 'column', 'column-reverse'],
+  },
+  gap: { type: 'string', default: '32px' },
+  gapX: { type: 'string', default: '24px' },
+  gapY: { type: 'string', default: '24px' },
+  flex: {
+    type: 'string',
+    default: '33.3333%',
+  },
+  pcSGap: { type: 'string', default: '24px 20px' },
+  useGap: {
+    type: 'boolean',
+    default: false,
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+const rowFliterSet = new Set(['useGap', 'flex', 'gap', 'pcSGap']);
+const colFilterList = Object.keys(_oSchema).filter((item) => item !== 'flex');
+
+let rowFilterList = Array.from(rowFliterSet);
+
+const _oTemplate: DocDemoTemplate<typeof _oSchema> = (props) => {
+  const { useGap, pcSGap } = props;
+  const tempArr = pcSGap.split(' ');
+  const arrLen = tempArr.length;
+
+  if (arrLen === 1) {
+    _oCtx.pcS.gap = tempArr[0] ?? '';
+    _oCtx.pcS.gapX = undefined;
+    _oCtx.pcS.gapY = undefined;
+  } else if (arrLen === 2) {
+    _oCtx.pcS.gapX = tempArr[0] ?? '';
+    _oCtx.pcS.gapY = tempArr[1] ?? '';
+  }
+
+  if (useGap) {
+    rowFliterSet.delete('gap');
+    rowFliterSet.add('gapX');
+    rowFliterSet.add('gapY');
+  } else {
+    rowFliterSet.add('gap');
+    rowFliterSet.delete('gapX');
+    rowFliterSet.delete('gapY');
+  }
+  rowFilterList = Array.from(rowFliterSet);
+
+  return `<ORow class="demo-grid-usage-wrap" :pc-s="ctx.pcS" ${propsToAttrStr(props, rowFilterList as Array<keyof typeof props>)}>
+    <OCol ${propsToAttrStr(props, colFilterList as Array<keyof typeof props>)} v-for="item in ctx.list" :key="item">
+      <div class="box">{{ item }}</div>
+    </OCol>
+  </ORow>`;
+};
+
+const _oCtx = reactive({
+  list: [1, 2, 3, 4, 5, 6, 7, 8],
+  pcS: {} as RowMediaT,
+});
 </script>
-<template>
-  <ORow gap-x="16px" gap-y="12px" wrap="wrap">
-    <OCol flex="33.3333%"><div class="box">1</div></OCol>
-    <OCol flex="33.3333%"><div class="box">2</div></OCol>
-    <OCol flex="33.3333%"><div class="box">3</div></OCol>
-    <OCol flex="33.3333%"><div class="box">4</div></OCol>
-    <OCol flex="33.3333%"><div class="box">5</div></OCol>
-    <OCol flex="33.3333%"><div class="box">6</div></OCol>
-    <OCol flex="50%"><div class="box">7</div></OCol>
-    <OCol flex="50%"><div class="box">8</div></OCol>
-  </ORow>
-</template>
-<style scoped lang="scss">
-.box {
-  background-color: yellowgreen;
-  height: 80px;
-  color: white;
-  font-size: var(--o-font_size-h1);
-  line-height: 80px;
-  text-align: center;
+<template></template>
+<style lang="scss">
+.demo-grid-usage-wrap {
+  .box {
+    background-color: yellowgreen;
+    height: 80px;
+    color: white;
+    font-size: var(--o-font_size-h1);
+    line-height: 80px;
+    text-align: center;
+  }
 }
 </style>
diff --git a/packages/opendesign/src/grid/__docs__/index.en-US.md b/packages/opendesign/src/grid/__docs__/index.en-US.md
index 92c79bc08586f44c7ca218fbe314021ee2fa6251..10cc4f161cb922bc27609fcb207f0ef7b82753d0 100644
--- a/packages/opendesign/src/grid/__docs__/index.en-US.md
+++ b/packages/opendesign/src/grid/__docs__/index.en-US.md
@@ -9,7 +9,7 @@ Due to limited browser support for the `gap` property in flex-box (Chrome 84, Sa
 
 ## Demo
 
-<!-- @case GridUsage -->
+<!-- @usage GridUsage -->
 <!-- @case GridBreakpoint -->
 
 ## API
diff --git a/packages/opendesign/src/grid/__docs__/index.zh-CN.md b/packages/opendesign/src/grid/__docs__/index.zh-CN.md
index d00afca33ffbd28542608d5a23e770ce227209d8..e3f6fa13a744482e92119b44d6232e43def71952 100644
--- a/packages/opendesign/src/grid/__docs__/index.zh-CN.md
+++ b/packages/opendesign/src/grid/__docs__/index.zh-CN.md
@@ -9,7 +9,7 @@ kind: container
 
 ## 示例
 
-<!-- @case GridUsage -->
+<!-- @usage GridUsage -->
 <!-- @case GridBreakpoint -->
 
 ## API
diff --git a/packages/opendesign/src/loading/__docs__/__case__/LoadingUsage.vue b/packages/opendesign/src/loading/__docs__/__case__/LoadingUsage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..31b24cc63cf4e15a228bc82d72918c0c58e08884
--- /dev/null
+++ b/packages/opendesign/src/loading/__docs__/__case__/LoadingUsage.vue
@@ -0,0 +1,73 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 使用
+
+通过 `label` 属性控制 loading 时显示的文本；
+
+通过 `icon` 属性自定义 loading 时的图标；
+
+通过 `iconRotating` 属性控制自定义的 loading 图标是否旋转；
+
+其它属性的使用详见[OLayer](/zh-CN/components/layer#使用)。
+
+<!-- en-US -->
+
+Control the text displayed during loading through the `label` attribute;
+
+Customize the icon at loading through the `icon` attribute;
+
+Control whether the custom loading icon rotates through the `iconRotating` property;
+
+For the usage of other attributes, please refer to [OLayer](/zh-CN/components/layer#usage).
+
+### Usage
+</docs>
+<script setup lang="ts">
+import { reactive, markRaw } from 'vue';
+import { OIconAdd } from '@opensig/opendesign';
+import { propsToAttrStr } from '../../../_demo/utils';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types';
+
+interface UsageT {
+  visible: boolean;
+  handleLoading(): void;
+  customIcon: null | typeof OIconAdd;
+}
+const _oSchema = {
+  label: {
+    type: 'string',
+    default: '加载中...',
+  },
+  'icon(slot)': {
+    type: 'boolean',
+  },
+  iconRotating: {
+    type: 'boolean',
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+const _oTemplate: DocDemoTemplate<typeof _oSchema> = (props) => {
+  const { 'icon(slot)': iconSlot } = props;
+  if (iconSlot) {
+    _oCtx.customIcon = markRaw(OIconAdd);
+  } else {
+    _oCtx.customIcon = null;
+  }
+
+  return `  <OButton @click="ctx.handleLoading">Click to load</OButton>
+  <OLoading v-model:visible="ctx.visible" :icon='ctx.customIcon' ${propsToAttrStr(props, ['icon(slot)'])} />`;
+};
+
+const handleLoading = () => {
+  _oCtx.visible = true;
+  setTimeout(() => {
+    _oCtx.visible = false;
+  }, 2000);
+};
+const _oCtx = reactive<UsageT>({
+  visible: false,
+  handleLoading,
+  customIcon: null,
+});
+</script>
diff --git a/packages/opendesign/src/loading/__docs__/index.en-US.md b/packages/opendesign/src/loading/__docs__/index.en-US.md
index 6dcf0ebacc3056252776ffbafe4a1df346b74b39..0ccef7deb6f2c5607ffa7aa8b1499b46651c3f25 100644
--- a/packages/opendesign/src/loading/__docs__/index.en-US.md
+++ b/packages/opendesign/src/loading/__docs__/index.en-US.md
@@ -7,6 +7,7 @@ kind: display
 
 ## Demo
 
+<!-- @usage LoadingUsage -->
 <!-- @case LoadingComponent -->
 <!-- @case LoadingDirective -->
 <!-- @case LoadingService -->
diff --git a/packages/opendesign/src/loading/__docs__/index.zh-CN.md b/packages/opendesign/src/loading/__docs__/index.zh-CN.md
index 21082e29a4787e8eb8f2016688aefd35951b084e..31ade9f0af4d621e0e8dcf5213cf93f7a5ad0614 100644
--- a/packages/opendesign/src/loading/__docs__/index.zh-CN.md
+++ b/packages/opendesign/src/loading/__docs__/index.zh-CN.md
@@ -7,6 +7,7 @@ kind: display
 
 ## 示例
 
+<!-- @usage LoadingUsage -->
 <!-- @case LoadingComponent -->
 <!-- @case LoadingDirective -->
 <!-- @case LoadingService -->