diff --git a/devui/skeleton/__tests__/skeleton.spec.ts b/devui/skeleton/__tests__/skeleton.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e55e134a615f1d42ac9eefd35b07288a785f6ee0
--- /dev/null
+++ b/devui/skeleton/__tests__/skeleton.spec.ts
@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+import DSkeleton from '../src/skeleton';
+
+describe('skeleton 组件', () => {
+  it('render basic skeleton successfully', () => {
+    const row = ref(4);
+    const wrapper = mount({
+      components: { DSkeleton },
+      template: `<d-skeleton :row="row" />`,
+      setup() {
+        return {
+          row
+        };
+      },
+    });
+
+    expect(wrapper.classes()).toContain('devui-skeleton')
+    expect(wrapper.classes()).toContain('devui-skeleton-animated')
+    expect(wrapper.element.childElementCount).toBe(1)
+    // 渲染个数应当与传入的 row 的数量相同
+    expect(wrapper.element.children[0].childElementCount).toBe(4)
+  })
+
+  it('render skeleton without animate', () => {
+    const animate = ref(false);
+    const wrapper = mount({
+      components: { DSkeleton },
+      template: `<d-skeleton :animate="animate" />`,
+      setup() {
+        return {
+          animate
+        };
+      },
+    });
+
+    expect(wrapper.classes()).toContain('devui-skeleton-no-animated')
+  })
+
+  it('render skeleton with avatar', () => {
+    const avatar = ref(true);
+    const wrapper = mount({
+      components: { DSkeleton },
+      template: `<d-skeleton :avatar="avatar" />`,
+      setup() {
+        return {
+          avatar
+        };
+      },
+    });
+
+    expect(wrapper.element.childElementCount).toBe(2)
+    expect(wrapper.element.children[0].innerHTML).toBe('<div class="avatar"></div>')
+  })
+
+  it('hide skeleton and show real content', () => {
+    const row = ref(4);
+    const loading = ref(false);
+    const wrapper = mount({
+      components: { DSkeleton },
+      template: `
+      <d-skeleton :row="4" :loading="loading">
+        <div>
+          <div>content1</div>
+          <div>content2</div>
+          <div>content3</div>
+          <div>content4</div>
+        </div>
+      </d-skeleton>`,
+      setup() {
+        return {
+          row,
+          loading
+        };
+      },
+    });
+
+    expect(wrapper.classes()).toContain('devui-skeleton')
+    expect(wrapper.element.children[0].innerHTML).toBe('<div>content1</div><div>content2</div><div>content3</div><div>content4</div>')
+  })
+})
\ No newline at end of file
diff --git a/devui/skeleton/index.ts b/devui/skeleton/index.ts
index 1e40f962128b694d836dcc4c61b4aa505a32ec10..e51762a5593d81295caf39af293f62d83c6154fd 100644
--- a/devui/skeleton/index.ts
+++ b/devui/skeleton/index.ts
@@ -10,7 +10,7 @@ export { Skeleton }
 export default {
   title: 'Skeleton 骨架屏',
   category: '数据展示',
-  status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '已完成',
   install(app: App): void {
     
     app.use(Skeleton as any)
diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss
index ab0fadc0641cdc3868c3eb0e82aca2cfe0a36d0e..74508318b30df6033d918fc501efae17dbced4e5 100644
--- a/devui/skeleton/src/skeleton.scss
+++ b/devui/skeleton/src/skeleton.scss
@@ -3,7 +3,9 @@
   justify-content: space-between;
 
   .devui-skeleton__avatar {
-    display: none;
+    display: flex;
+    flex: 1;
+    justify-content: center;
 
     .avatar {
       width: 40px;
@@ -13,12 +15,6 @@
     }
   }
 
-  .is-shown {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-  }
-
   .devui-skeleton__item__group {
     flex: 7;
 
@@ -42,14 +38,14 @@
 
 .devui-skeleton-animated > .devui-skeleton__avatar > .avatar,
 .devui-skeleton-animated > .devui-skeleton__item__group > .devui-skeleton__item {
-  background-color: #cccccc;
-  // background: linear-gradient(
-  //     100deg,
-  //     rgba(255, 255, 255, 0) 40%,
-  //     rgba(255, 255, 255, 0.5) 50%,
-  //     rgba(255, 255, 255, 0) 60%
-  //   )
-  //   #ccc;
+  background:
+    linear-gradient(
+      100deg,
+      rgba(255, 255, 255, 0) 40%,
+      rgba(255, 255, 255, 0.5) 50%,
+      rgba(255, 255, 255, 0) 60%
+    )
+    #cccccc;
   background-size: 200% 100%;
   background-position-x: 180%;
   animation: 2s loading ease-in-out infinite;
diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx
index 4e6bc3cbb7428ae2df0b72518fc9c246af0629af..1939a776162f02f7b9691328fc83e4edf03e09d1 100644
--- a/devui/skeleton/src/skeleton.tsx
+++ b/devui/skeleton/src/skeleton.tsx
@@ -14,10 +14,8 @@ export default defineComponent({
     }
     return () => {
       if (props.loading) {
-        return <div class={`devui-skeleton ${props.animate ? 'devui-skeleton-animated' : ''}`}>
-          <div class={`devui-skeleton__avatar ${props.avatar ? 'is-shown' : ''}`}>
-            <div class="avatar"/>
-          </div>
+        return <div class={`devui-skeleton ${props.animate ? 'devui-skeleton-animated' : 'devui-skeleton-no-animated'}`}>
+          {props.avatar ? <div class="devui-skeleton__avatar"><div class="avatar" /></div> : null}
           <div class="devui-skeleton__item__group">{
             arr.map(() => {
               return <div class="devui-skeleton__item" />