From 0e30ba95c52e5f1a3c490a01d412dc690577e4aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=9C=E5=BE=97=E8=AE=A9=E4=BA=BA=E5=8F=91=E6=AF=9B?=
 <2328204591@qq.com>
Date: Tue, 14 Oct 2025 16:58:29 +0800
Subject: [PATCH] =?UTF-8?q?doc:=20=E6=96=B0=E5=A2=9Eskeleton=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__docs__/__case__/SkeletonAvatar.vue      | 36 ++++++++++
 .../__docs__/__case__/SkeletonLoading.vue     | 72 +++++++++++++++++++
 .../__docs__/__case__/SkeletonUsage.vue       | 45 ++++++++++++
 .../src/skeleton/__docs__/index.en-US.md      | 18 +++++
 .../src/skeleton/__docs__/index.zh-CN.md      | 18 +++++
 packages/opendesign/src/skeleton/types.ts     | 24 +++++--
 6 files changed, 207 insertions(+), 6 deletions(-)
 create mode 100644 packages/opendesign/src/skeleton/__docs__/__case__/SkeletonAvatar.vue
 create mode 100644 packages/opendesign/src/skeleton/__docs__/__case__/SkeletonLoading.vue
 create mode 100644 packages/opendesign/src/skeleton/__docs__/__case__/SkeletonUsage.vue
 create mode 100644 packages/opendesign/src/skeleton/__docs__/index.en-US.md
 create mode 100644 packages/opendesign/src/skeleton/__docs__/index.zh-CN.md

diff --git a/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonAvatar.vue b/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonAvatar.vue
new file mode 100644
index 000000000..0e993b51c
--- /dev/null
+++ b/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonAvatar.vue
@@ -0,0 +1,36 @@
+<docs lang="md">
+  <!-- zh-CN -->
+
+### 带头像的骨架屏
+
+  <!-- en-US -->
+
+### A skeleton screen with a leading figure.
+</docs>
+<script setup lang="ts">
+import { ref } from 'vue';
+const size = ref('medium');
+</script>
+<template>
+  <div class="demo-skeleton-avatar-wrap">
+    <ORadioGroup v-model="size" class="radio-group">
+      <ORadio value="large">large</ORadio>
+      <ORadio value="medium">medium</ORadio>
+      <ORadio value="small">small</ORadio>
+      <ORadio value="mini">mini</ORadio>
+    </ORadioGroup>
+    <OSkeleton>
+      <template #template>
+        <OSkeletonAvatar :size="size" />
+        <OSkeletonText :rows="4" />
+      </template>
+    </OSkeleton>
+  </div>
+</template>
+<style lang="scss">
+.demo-skeleton-avatar-wrap {
+  .radio-group {
+    margin-bottom: 24px;
+  }
+}
+</style>
diff --git a/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonLoading.vue b/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonLoading.vue
new file mode 100644
index 000000000..da1f513a6
--- /dev/null
+++ b/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonLoading.vue
@@ -0,0 +1,72 @@
+<docs lang="md">
+  <!-- zh-CN -->
+
+### 骨架屏显示与隐藏
+
+  <!-- en-US -->
+
+### Display and hide of the skeleton screen.
+</docs>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const img = 'https://www.openeuler.org/img/banners/20230418-odd.png';
+
+const loading = ref(true);
+</script>
+<template>
+  <div class="demo-skeleton-loading-wrap">
+    <OSwitch v-model="loading" class="operation" />
+    <OSkeleton animation :loading="loading">
+      <template #template>
+        <OSkeletonFigure />
+        <OSkeletonAvatar size="large" />
+        <OSkeletonText :rows="3" />
+      </template>
+      <div class="content">
+        <OFigure class="img" :src="img" />
+        <OFigure class="avatar" :src="img" />
+        <div class="text">
+          <p>截止2023年12月31日，openEuler社区用户累计超过213万</p>
+          <p>超过17,000名开发者在社区持续贡献。社区累计产生 149.4K个PRs、75.2K条Issues</p>
+          <p>截至目前，加入 openEuler 社区的单位成员超过1400家，12月新增141家。</p>
+        </div>
+      </div>
+    </OSkeleton>
+  </div>
+</template>
+<style lang="scss">
+.demo-skeleton-loading-wrap {
+  .operation {
+    margin-bottom: 24px;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    font-size: 16px;
+    line-height: 24px;
+    color: #000;
+
+    p {
+      margin: 0;
+    }
+
+    .text {
+      margin-top: 24px;
+    }
+
+    .img {
+      width: 320px;
+      height: 180px;
+    }
+
+    .avatar {
+      width: 80px;
+      height: 80px;
+      margin-top: 24px;
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonUsage.vue b/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonUsage.vue
new file mode 100644
index 000000000..ad9bd276c
--- /dev/null
+++ b/packages/opendesign/src/skeleton/__docs__/__case__/SkeletonUsage.vue
@@ -0,0 +1,45 @@
+<docs lang="md">
+<!-- zh-CN -->
+
+### 使用
+
+1. 骨架屏的显示与隐藏通过 `loading` 属性控制；
+2. 骨架屏的动画效果通过 `animation` 属性控制；
+3. 骨架屏的显示文本行数通过 `rows` 属性控制。
+
+<!-- en-US -->
+
+1. The display and hiding of the skeleton screen are controlled by the `loading` attribute.
+
+2. The animation effect of the skeleton screen is controlled through the `animation` property.
+
+3. The number of text lines displayed on the skeleton screen is controlled by the `rows` attribute.
+
+### Usage
+</docs>
+<script setup lang="ts">
+import { propsToAttrStr } from '../../../_demo/utils';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types';
+
+const _schema = {
+  loading: {
+    type: 'boolean',
+    default: true,
+  },
+  animation: {
+    type: 'boolean',
+  },
+  rows: {
+    type: 'number',
+    default: 3,
+  },
+} satisfies Record<string, DocDemoSchema>;
+
+const _template: DocDemoTemplate<typeof _schema> = (props) => {
+  return `<div class="demo-skeleton-usage-wrap">
+            <OSkeleton  ${propsToAttrStr(props)} > Demo of Skeleton </OSkeleton>
+          </div>`;
+};
+
+const _ctx = {};
+</script>
diff --git a/packages/opendesign/src/skeleton/__docs__/index.en-US.md b/packages/opendesign/src/skeleton/__docs__/index.en-US.md
new file mode 100644
index 000000000..d45693acc
--- /dev/null
+++ b/packages/opendesign/src/skeleton/__docs__/index.en-US.md
@@ -0,0 +1,18 @@
+---
+sidebar: OSkeleton
+kind: display
+---
+
+# Skeleton
+
+## Demo
+
+<!-- @usage SkeletonUsage -->
+<!-- @case:a|k|e SkeletonAvatar -->
+<!-- @case:a|k|e SkeletonLoading -->
+
+## Api
+
+<!-- @api OSkeleton -->
+<!-- @api OSkeletonAvatar -->
+<!-- @api OSkeletonText -->
diff --git a/packages/opendesign/src/skeleton/__docs__/index.zh-CN.md b/packages/opendesign/src/skeleton/__docs__/index.zh-CN.md
new file mode 100644
index 000000000..71f2abd76
--- /dev/null
+++ b/packages/opendesign/src/skeleton/__docs__/index.zh-CN.md
@@ -0,0 +1,18 @@
+---
+sidebar: OSkeleton 骨架屏
+kind: display
+---
+
+# 骨架屏
+
+## 示例
+
+<!-- @usage SkeletonUsage -->
+<!-- @case:a|k|e SkeletonAvatar -->
+<!-- @case:a|k|e SkeletonLoading -->
+
+## Api
+
+<!-- @api OSkeleton -->
+<!-- @api OSkeletonAvatar -->
+<!-- @api OSkeletonText -->
diff --git a/packages/opendesign/src/skeleton/types.ts b/packages/opendesign/src/skeleton/types.ts
index 07c88e58f..7c574daa9 100644
--- a/packages/opendesign/src/skeleton/types.ts
+++ b/packages/opendesign/src/skeleton/types.ts
@@ -3,7 +3,9 @@ import { RoundT } from '../_utils/types';
 
 export const skeletonTextProps = {
   /**
-   * 行数
+   * @zh-CN 文本行数
+   * @en-US Number of lines of text.
+   * @default 3
    */
   rows: {
     type: Number,
@@ -18,14 +20,18 @@ export type SkeletonAvatarSizeT = (typeof SkeletonAvatarSizeTypes)[number];
 
 export const skeletonAvatarProps = {
   /**
-   * 头像尺寸
+   * @zh-CN 头像尺寸
+   * @en-US Avatar size.
+   * @default 'medium'
    */
   size: {
     type: String as PropType<SkeletonAvatarSizeT>,
     default: 'medium',
   },
   /**
-   * 圆角值 RoundT
+   * @zh-CN 圆角值
+   * @en-US Round.
+   * @default 'pill'
    */
   round: {
     type: String as PropType<RoundT>,
@@ -41,21 +47,27 @@ export type SkeletonFigurePropsT = ExtractPropTypes<typeof skeletonFigureProps>;
 
 export const skeletonProps = {
   /**
-   * 是否显示加载中状态（即展示骨架屏）
+   * @zh-CN 是否显示加载中状态（即展示骨架屏）
+   * @en-US Whether to display the loading status (i.e., show the skeleton screen).
+   * @default true
    */
   loading: {
     type: Boolean,
     default: true,
   },
   /**
-   * 是否展示动画
+   * @zh-CN 是否展示动画
+   * @en-US Whether to display the animation.
+   * @default false
    */
   animation: {
     type: Boolean,
     default: false,
   },
   /**
-   * 行数
+   * @zh-CN 文本行数
+   * @en-US Number of lines of textd.
+   * @default 3
    */
   rows: {
     type: Number,
-- 
Gitee