chore: update docs and example

README.md

@@ -2,7 +2,7 @@
 
 > A Vue 3 virtual waterfall component
 
-![npm](https://img.shields.io/npm/v/%40lhlyu%2Fvue-virtual-waterfall)
+[![npm](https://img.shields.io/npm/v/%40lhlyu%2Fvue-virtual-waterfall)](https://www.npmjs.com/package/@lhlyu/vue-virtual-waterfall)
 
 [中文文档](./README.zh.md)
 

README.zh.md

@@ -2,7 +2,7 @@
 
 > 一款vue3虚拟瀑布流组件
 
-![npm](https://img.shields.io/npm/v/%40lhlyu%2Fvue-virtual-waterfall)
+[![npm](https://img.shields.io/npm/v/%40lhlyu%2Fvue-virtual-waterfall)](https://www.npmjs.com/package/@lhlyu/vue-virtual-waterfall)
 
 [English Doc](./README.md)
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "1.0.6-beta.0",
+  "version": "1.0.6-beta.1",
   "author": "lhlyu",
   "repository": {
     "type": "git",

src/example/Example.vue

@@ -1,5 +1,10 @@
 <template>
-    <header>Vue瀑布流</header>
+    <header>
+        <strong>Vue瀑布流</strong>
+        <small>
+            <span class="badge text-bg-success">v{{ pkg.version }}</span>
+        </small>
+    </header>
     <VirtualWaterfall
         :virtual="waterfallOption.virtual"
         :gap="waterfallOption.gap"
@@ -184,6 +189,7 @@
 </template>
 
 <script setup lang="ts">
+import pkg from '../../package.json'
 import VirtualWaterfall from '../vue-virtual-waterfall/virtual-waterfall.vue'
 import Card from './Card.vue'
 import useApp from './useApp.ts'
@@ -215,9 +221,13 @@ header {
     justify-content: center;
     width: 100%;
     height: 72px;
-    font-size: 24px;
     background-color: white;
     border-bottom: 1px solid #f1f2f6;
+    
+    strong {
+        font-size: 24px;
+        margin-right: 8px;
+    }
 }
 aside {
     position: fixed;