diff --git a/packages/docs/components/data-presentation/list.md b/packages/docs/components/data-presentation/list.md
index 0741126..6091ce0 100644
--- a/packages/docs/components/data-presentation/list.md
+++ b/packages/docs/components/data-presentation/list.md
@@ -19,6 +19,7 @@ const items = [
   { label: 'Grapes' },
 ]
 </script>
+
 <template>
   <c-list :items="items" />
 </template>
@@ -38,6 +39,7 @@ const items = [
 ]
 const size = ref('md')
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-md c-wrap">
     <div
@@ -69,6 +71,7 @@ const items = [
   { label: 'Grapes' },
 ]
 </script>
+
 <template>
   <c-list
     :items="items"
@@ -91,6 +94,7 @@ const items = [
 ]
 const activeItem = ref('Banana')
 </script>
+
 <template>
   <c-list
     :items="items"
@@ -110,10 +114,10 @@ This is an example for using `c-info-item` as `item`
 import { ref } from 'vue'
 import {
   matCheck,
-  matSettingsPower,
-  matPersonAddAlt1,
   matOfflineBolt,
+  matPersonAddAlt1,
   matSettings,
+  matSettingsPower,
 } from '@quasar/extras/material-icons/index'
 const items = [
   { title: 'Notification', subtitle: 'Some notification description', icon: matOfflineBolt },
@@ -123,6 +127,7 @@ const items = [
 ]
 const activeItem = ref('')
 </script>
+
 <template>
   <c-list
     :items="items"
@@ -130,7 +135,7 @@ const activeItem = ref('')
     :active-fn="item => item.title === activeItem"
     @item-click="item => (activeItem = item.title)"
   >
-    <template #item="{ isActive, clickable, item }">
+    <template #item="{ isActive, item }">
       <c-info-item v-bind="item">
         <template
           v-if="isActive"
@@ -145,6 +150,7 @@ const activeItem = ref('')
     </template>
   </c-list>
 </template>
+
 <style
   scoped
   lang="scss"
diff --git a/packages/docs/components/data-presentation/table.md b/packages/docs/components/data-presentation/table.md
index 71b99eb..dd49533 100644
--- a/packages/docs/components/data-presentation/table.md
+++ b/packages/docs/components/data-presentation/table.md
@@ -30,6 +30,7 @@ const tableColumns = [
   { title: 'Gender', field: 'gender' },
 ]
 </script>
+
 <template>
   <c-table
     row-key="name"
@@ -53,6 +54,7 @@ const tableColumns = [
   { title: 'Gender', field: 'gender' },
 ]
 </script>
+
 <template>
   <c-table row-key="name" :data="tableData" :columns="tableColumns">
     <template #th-name="{ title }">
@@ -79,6 +81,7 @@ const tableColumns = [
   { title: 'Operations', field: 'operations' },
 ]
 </script>
+
 <template>
   <c-table row-key="name" :data="tableData" :columns="tableColumns">
     <template #td-operations>
diff --git a/packages/docs/components/feedback/dialog.md b/packages/docs/components/feedback/dialog.md
index 6b8e1bc..fd1def1 100644
--- a/packages/docs/components/feedback/dialog.md
+++ b/packages/docs/components/feedback/dialog.md
@@ -10,6 +10,7 @@ componentPath: popup/CDialog
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog v-model="show" title="Hi, there">
     <div>Hello, world</div>
@@ -26,6 +27,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog
     v-model="show"
@@ -46,6 +48,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog
     v-model="show"
@@ -67,6 +70,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog
     v-model="show"
@@ -88,9 +92,9 @@ const show = ref(false)
 <script setup>
 import {
   matArrowBack,
-  matArrowUpward,
-  matArrowForward,
   matArrowDownward,
+  matArrowForward,
+  matArrowUpward,
   matFullscreenExit,
 } from '@quasar/extras/material-icons/index'
 import { ref } from 'vue'
@@ -105,6 +109,7 @@ const openWithPosition = (h, v) => {
   show.value = true
 }
 </script>
+
 <template>
   <c-dialog
     v-model="show"
@@ -192,10 +197,11 @@ import { ref } from 'vue'
 import { matPeople } from '@quasar/extras/material-icons/index'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog v-model="show">
     <template #title>
-      <img class="title-icon" src="/logo-dark.svg" />
+      <img class="title-icon" src="/logo-dark.svg">
     </template>
     <template #close-icon>
       <c-icon :content="matPeople" />
@@ -219,6 +225,7 @@ const show = ref(false)
   </c-dialog>
   <c-button label="Open Dialog" @click="show = true" />
 </template>
+
 <style scoped>
 .title-icon {
   width: 80px;
@@ -236,6 +243,7 @@ const top = ref(false)
 const right = ref(false)
 const bottom = ref(false)
 </script>
+
 <template>
   <c-dialog
     v-model="left"
@@ -243,11 +251,12 @@ const bottom = ref(false)
     title="Left Drawer"
     :rounded="false"
     :custom-style="{
-      height: '100vh'
+      height: '100vh',
     }"
     width="80vw"
     vertical-align="center"
-    horizontal-align="start">
+    horizontal-align="start"
+  >
     内容
   </c-dialog>
   <c-dialog
@@ -257,10 +266,11 @@ const bottom = ref(false)
     :rounded="false"
     width="80vw"
     :custom-style="{
-      height: '100vh'
+      height: '100vh',
     }"
     vertical-align="center"
-    horizontal-align="end">
+    horizontal-align="end"
+  >
     Content
   </c-dialog>
   <c-dialog
@@ -269,7 +279,8 @@ const bottom = ref(false)
     :rounded="false"
     width="100vw"
     vertical-align="start"
-    horizontal-align="center">
+    horizontal-align="center"
+  >
     Content
   </c-dialog>
   <c-dialog
@@ -278,7 +289,8 @@ const bottom = ref(false)
     :rounded="false"
     width="100vw"
     vertical-align="end"
-    horizontal-align="center">
+    horizontal-align="center"
+  >
     Content
   </c-dialog>
   <div class="c-row c-items-center c-wrap c-gutter-md">
diff --git a/packages/docs/components/feedback/drawer.md b/packages/docs/components/feedback/drawer.md
index 6baeb54..276ee97 100644
--- a/packages/docs/components/feedback/drawer.md
+++ b/packages/docs/components/feedback/drawer.md
@@ -18,8 +18,8 @@ const show = ref(false)
   />
 
   <CDrawer
-    title="Hi, there"
     v-model="show"
+    title="Hi, there"
   >
     Some drawer content
   </CDrawer>
@@ -33,9 +33,9 @@ const show = ref(false)
 import { ref } from 'vue'
 import {
   matArrowBack,
-  matArrowUpward,
-  matArrowForward,
   matArrowDownward,
+  matArrowForward,
+  matArrowUpward,
 } from '@quasar/extras/material-icons/index'
 
 const show = ref(false)
@@ -84,9 +84,9 @@ function openWithPosition(pos) {
   </div>
 
   <c-drawer
+    v-model="show"
     title="Hi, there"
     :position="position"
-    v-model="show"
   >
     I'm some drawer content
   </c-drawer>
diff --git a/packages/docs/components/feedback/notification.md b/packages/docs/components/feedback/notification.md
index b14dd54..181a388 100644
--- a/packages/docs/components/feedback/notification.md
+++ b/packages/docs/components/feedback/notification.md
@@ -40,6 +40,7 @@ const openWithCount = () => {
   })
 }
 </script>
+
 <template>
   <c-button label="Open notification" @click="openWithCount" />
 </template>
@@ -61,6 +62,7 @@ const openWithTheme = (theme) => {
   })
 }
 </script>
+
 <template>
   <div class="c-row c-items-center c-wrap c-gutter-md">
     <div>
@@ -97,9 +99,9 @@ const openWithTheme = (theme) => {
 <script setup>
 import {
   matArrowBack,
-  matArrowUpward,
-  matArrowForward,
   matArrowDownward,
+  matArrowForward,
+  matArrowUpward,
   matFullscreenExit,
 } from '@quasar/extras/material-icons/index'
 import { useNotifications } from '@casual-ui/vue'
@@ -115,6 +117,7 @@ const openWithPosition = (alignX, alignY) => {
   })
 }
 </script>
+
 <template>
   <div class="c-row c-gutter-sm">
     <div>
@@ -197,6 +200,7 @@ import { useNotifications } from '@casual-ui/vue'
 
 const { open } = useNotifications()
 </script>
+
 <template>
   <c-button
     label="Open notification"
@@ -222,7 +226,7 @@ import { useNotifications } from '@casual-ui/vue'
 
 const { open } = useNotifications()
 
-let close = ref(null)
+const close = ref(null)
 
 const onClick = () => {
   if (!close.value) {
@@ -232,12 +236,14 @@ const onClick = () => {
       timeout: 0,
       closeIcon: false,
     }).close
-  } else {
+  }
+  else {
     close.value()
     close.value = null
   }
 }
 </script>
+
 <template>
   <c-button
     :label="close ? 'Close notification' : 'Open notification'"
@@ -284,6 +290,7 @@ const openWithDynamicContent = () => {
   }, 2000)
 }
 </script>
+
 <template>
   <c-button label="Open dynamic notification" @click="openWithDynamicContent" />
 </template>
diff --git a/packages/docs/components/feedback/tooltip.md b/packages/docs/components/feedback/tooltip.md
index 7a90ab8..30d444c 100644
--- a/packages/docs/components/feedback/tooltip.md
+++ b/packages/docs/components/feedback/tooltip.md
@@ -32,10 +32,12 @@ const positions = [
   'left-bottom',
 ]
 </script>
+
 <template>
   <div class="tooltips">
     <c-tooltip
       v-for="p in positions"
+      :key="p"
       :content="`A message rom position ${p}`"
       :position="p"
     >
@@ -43,6 +45,7 @@ const positions = [
     </c-tooltip>
   </div>
 </template>
+
 <style scoped>
 .tooltips {
   display: grid;
@@ -79,6 +82,7 @@ const positions = [
     </template>
   </c-tooltip>
 </template>
+
 <style scoped>
 .custom-content {
   white-space: nowrap;
@@ -100,6 +104,7 @@ const toggleShow = () => {
   show.value = !show.value
 }
 </script>
+
 <template>
   <div class="popups">
     <c-tooltip content="Hello, world">
@@ -135,6 +140,7 @@ const toggleShow = () => {
     </div>
   </div>
 </template>
+
 <style scoped>
 .popups {
   display: flex;
diff --git a/packages/docs/components/form/checkbox.md b/packages/docs/components/form/checkbox.md
index 9fa3d83..ff4ee84 100644
--- a/packages/docs/components/form/checkbox.md
+++ b/packages/docs/components/form/checkbox.md
@@ -13,6 +13,7 @@ additionalComponentPaths:
 import { ref } from 'vue'
 const val = ref(false)
 </script>
+
 <template>
   <c-checkbox
     v-model="val"
@@ -28,6 +29,7 @@ const val = ref(false)
 import { ref } from 'vue'
 const val = ref('md')
 </script>
+
 <template>
   <div class="c-row c-gutter-md c-items-center">
     <c-checkbox
@@ -72,6 +74,7 @@ import { ref } from 'vue'
 const val1 = ref(false)
 const val2 = ref(true)
 </script>
+
 <template>
   <c-checkbox
     v-model="val1"
@@ -102,6 +105,7 @@ const options = [
   { label: 'Peach', value: 'Peach' },
 ]
 </script>
+
 <template>
   <c-checkbox-group
     v-model="val"
diff --git a/packages/docs/components/form/date-picker.md b/packages/docs/components/form/date-picker.md
index 4882e7b..f6bc4a8 100644
--- a/packages/docs/components/form/date-picker.md
+++ b/packages/docs/components/form/date-picker.md
@@ -12,6 +12,7 @@ import { ref } from 'vue'
 const date = ref(null)
 const formattedValue = ref('')
 </script>
+
 <template>
   <c-date-picker
     v-model="date"
@@ -31,6 +32,7 @@ import { ref } from 'vue'
 const date1 = ref(null)
 const date2 = ref(new Date())
 </script>
+
 <template>
   <c-date-picker
     v-model="date1"
@@ -52,6 +54,7 @@ import { ref } from 'vue'
 const date = ref(null)
 const formattedValue = ref('')
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-md c-wrap">
     <c-date-picker
@@ -97,6 +100,7 @@ import { ref } from 'vue'
 const dateRange = ref([null, null])
 const formattedRange = ref(['', ''])
 </script>
+
 <template>
   <c-date-picker
     v-model:dateRange="dateRange"
@@ -119,6 +123,7 @@ const formattedMonth = ref('')
 const year = ref(null)
 const formattedYear = ref('')
 </script>
+
 <template>
   <div class="c-row c-gutter-x-md">
     <div class="c-col-6">
diff --git a/packages/docs/components/form/form.md b/packages/docs/components/form/form.md
index 8f39866..8643428 100644
--- a/packages/docs/components/form/form.md
+++ b/packages/docs/components/form/form.md
@@ -29,6 +29,7 @@ const industryOptions = [
   { label: 'Transportation', value: 'Transportation' },
 ]
 </script>
+
 <template>
   <c-form>
     <c-form-item label="Name">
@@ -109,6 +110,7 @@ const formItems = [
   },
 ]
 </script>
+
 <template>
   <c-form
     v-model="formData"
@@ -167,6 +169,7 @@ const formItems = [
 const size = ref('md')
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
 </script>
+
 <template>
   <div class="c-row c-gutter-md c-items-center">
     <c-radio
@@ -236,6 +239,7 @@ const formItems = [
 const size = ref('md')
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
 </script>
+
 <template>
   <div class="c-row c-gutter-md c-items-center">
     <c-radio
@@ -318,6 +322,7 @@ const formItems = [
   },
 ]
 </script>
+
 <template>
   <c-form
     v-model="formData"
@@ -392,6 +397,7 @@ const formItems = [
   },
 ]
 </script>
+
 <template>
   <c-form
     v-model="formData"
@@ -455,6 +461,7 @@ const formItems = [
   },
 ]
 </script>
+
 <template>
   <c-form
     v-model="formData"
@@ -523,6 +530,7 @@ const formItems = [
 const col = ref(6)
 const spans = [6, 12]
 </script>
+
 <template>
   <div class="c-row c-gutter-md c-items-center">
     <c-radio
@@ -561,7 +569,7 @@ It's async validator would be like this:
 
 ```js
 const asyncRule = v =>
-  new Promise(resolve => {
+  new Promise((resolve) => {
     setTimeout(() => {
       resolve(v ? false : 'This field is required')
     }, 1000)
@@ -646,7 +654,7 @@ const formItems = [
     rules: [
       // Async validator
       v =>
-        new Promise(resolve => {
+        new Promise((resolve) => {
           setTimeout(() => {
             resolve(v.length < 2 ? 'At least check two' : false)
           }, 3000)
@@ -669,6 +677,7 @@ const clearValidate = () => {
   form.value?.clearAll()
 }
 </script>
+
 <template>
   <c-form
     ref="form"
@@ -784,6 +793,7 @@ const clearAll = () => {
 }
 const validating = ref(false)
 </script>
+
 <template>
   <c-form
     ref="form"
@@ -798,7 +808,7 @@ const validating = ref(false)
         :style="{ color: hasError ? 'red' : 'inherit' }"
         @blur="validate"
         @focus="clearValidate"
-      />
+      >
     </template>
   </c-form>
   <div class="c-mt-xl">
@@ -895,7 +905,7 @@ const formItems = [
     field: 'customField',
     component: CustomInput,
     rules: [
-      v => {
+      (v) => {
         return v === 'custom value' ? false : 'Can only input “custom value”'
       },
     ],
@@ -916,13 +926,14 @@ const clearAll = () => {
 }
 const validating = ref(false)
 </script>
+
 <template>
   <c-form
     ref="form"
+    v-model="formData"
     col="12"
     label-align="right"
     label-width="140px"
-    v-model="formData"
     :items="formItems"
     class="c-pa-md"
   />
diff --git a/packages/docs/components/form/input.md b/packages/docs/components/form/input.md
index 6c327c8..86ecbbf 100644
--- a/packages/docs/components/form/input.md
+++ b/packages/docs/components/form/input.md
@@ -11,6 +11,7 @@ eventsNameWidth: 140px
 import { ref } from 'vue'
 const inputValue = ref('')
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-md c-wrap">
     <div>
@@ -51,6 +52,7 @@ const inputValue = ref('')
 import { ref } from 'vue'
 const inputValue = ref('')
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-md c-wrap">
     <div>
@@ -98,6 +100,7 @@ const inputValue = ref('')
 import { ref } from 'vue'
 const inputValue = ref('')
 </script>
+
 <template>
   <c-input
     v-model="inputValue"
@@ -111,11 +114,12 @@ const inputValue = ref('')
 
 ```vue live
 <script setup>
-import { matDateRange, matContactPhone } from '@quasar/extras/material-icons/index'
+import { matContactPhone, matDateRange } from '@quasar/extras/material-icons/index'
 import { ref } from 'vue'
 
 const value = ref('')
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-x-lg">
     <div>
@@ -123,8 +127,12 @@ const value = ref('')
         v-model="value"
         placeholder="prefix and suffix"
       >
-        <template #prefix> +234 </template>
-        <template #suffix> @someone </template>
+        <template #prefix>
+          +234
+        </template>
+        <template #suffix>
+          @someone
+        </template>
       </c-input>
     </div>
     <div>
@@ -152,6 +160,7 @@ const value = ref('')
 import { ref } from 'vue'
 const value = ref('')
 </script>
+
 <template>
   <div class="c-row c-gutter-x-md">
     <div>
diff --git a/packages/docs/components/form/radio.md b/packages/docs/components/form/radio.md
index 2455693..34b78fc 100644
--- a/packages/docs/components/form/radio.md
+++ b/packages/docs/components/form/radio.md
@@ -13,6 +13,7 @@ additionalComponentPaths:
 import { ref } from 'vue'
 const val = ref('')
 </script>
+
 <template>
   <div class="c-row c-gutter-x-md">
     <c-radio
@@ -36,7 +37,9 @@ const val = ref('')
       value="Grape"
     />
   </div>
-  <div class="c-mt-md">Current value: {{ val }}</div>
+  <div class="c-mt-md">
+    Current value: {{ val }}
+  </div>
 </template>
 ```
 
@@ -47,6 +50,7 @@ const val = ref('')
 import { ref } from 'vue'
 const val = ref('')
 </script>
+
 <template>
   <div class="c-row c-gutter-x-md c-items-center">
     <c-radio
@@ -79,7 +83,9 @@ const val = ref('')
       size="xl"
     />
   </div>
-  <div class="c-mt-md">Current value: {{ val }}</div>
+  <div class="c-mt-md">
+    Current value: {{ val }}
+  </div>
 </template>
 ```
 
@@ -91,6 +97,7 @@ import { ref } from 'vue'
 const val1 = ref(false)
 const val2 = ref(true)
 </script>
+
 <template>
   <div class="c-row c-gutter-x-md">
     <c-radio
@@ -121,6 +128,7 @@ const fruits = [
   { label: 'Grapes', value: 'Grape' },
 ]
 </script>
+
 <template>
   Current value: {{ selectedFruit }}
   <c-radio-group
diff --git a/packages/docs/components/form/select.md b/packages/docs/components/form/select.md
index 9e00874..40b5443 100644
--- a/packages/docs/components/form/select.md
+++ b/packages/docs/components/form/select.md
@@ -19,6 +19,7 @@ const options = [
   { label: '500 - 1000', value: 4 },
 ]
 </script>
+
 <template>
   <c-select
     v-model="selectedValue"
@@ -51,6 +52,7 @@ const options = [
   { label: '500 - 1000', value: 4 },
 ]
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-md c-wrap">
     <div>
@@ -111,6 +113,7 @@ const options = [
   { label: '500 - 1000', value: 4 },
 ]
 </script>
+
 <template>
   <c-select
     v-model="val"
@@ -137,6 +140,7 @@ const options = [
   { label: '500 - 1000', value: 4 },
 ]
 </script>
+
 <template>
   <c-select
     v-model="selectedValue"
@@ -163,6 +167,7 @@ const options = [
   { label: '500 - 1000', value: 4 },
 ]
 </script>
+
 <template>
   <c-select
     v-model="selectedValue"
diff --git a/packages/docs/components/form/slider.md b/packages/docs/components/form/slider.md
index 37d5564..4db0ede 100644
--- a/packages/docs/components/form/slider.md
+++ b/packages/docs/components/form/slider.md
@@ -9,6 +9,7 @@ title: Slider
 import { ref } from 'vue'
 const val = ref(50)
 </script>
+
 <template>
   <c-slider v-model="val" />
 </template>
diff --git a/packages/docs/components/form/toggle.md b/packages/docs/components/form/toggle.md
index 6683f16..da078b6 100644
--- a/packages/docs/components/form/toggle.md
+++ b/packages/docs/components/form/toggle.md
@@ -10,6 +10,7 @@ componentPath: form/CToggle
 import { ref } from 'vue'
 const checked = ref(false)
 </script>
+
 <template>
   <c-toggle
     v-model="checked"
@@ -32,6 +33,7 @@ const checkStatus = reactive({
   xl: false,
 })
 </script>
+
 <template>
   <div class="c-row c-gutter-x-md c-items-center">
     <div>
@@ -82,6 +84,7 @@ import { ref } from 'vue'
 const checked1 = ref(false)
 const checked2 = ref(true)
 </script>
+
 <template>
   <c-toggle
     v-model="checked1"
diff --git a/packages/docs/components/interact/dropdown.md b/packages/docs/components/interact/dropdown.md
index 99665d2..d384e04 100644
--- a/packages/docs/components/interact/dropdown.md
+++ b/packages/docs/components/interact/dropdown.md
@@ -10,6 +10,7 @@ componentPath: interact/CDropdown
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dropdown v-model="show">
     <c-button label="Click to show dropdown" />
@@ -27,6 +28,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dropdown
     v-model="show"
@@ -43,6 +45,7 @@ const show = ref(false)
     </template>
   </c-dropdown>
 </template>
+
 <style scoped>
 .custom-width {
   width: 400px;
@@ -58,6 +61,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-button
     :label="`Click top ${show ? 'close' : 'open'} dropdown`"
@@ -80,6 +84,7 @@ const show = ref(false)
     </template>
   </c-dropdown>
 </template>
+
 <style scoped>
 h3 {
   margin-left: 12px;
diff --git a/packages/docs/components/interact/expansion.md b/packages/docs/components/interact/expansion.md
index 12dc857..c9fd0a3 100644
--- a/packages/docs/components/interact/expansion.md
+++ b/packages/docs/components/interact/expansion.md
@@ -21,6 +21,7 @@ componentPath: interact/CExpansion
 <script setup>
 import { matPeople } from '@quasar/extras/material-icons/index'
 </script>
+
 <template>
   <c-expansion
     title="A custom icon"
@@ -35,7 +36,7 @@ import { matPeople } from '@quasar/extras/material-icons/index'
       <img
         style="width: 80px;"
         src="/logo-dark.svg"
-      />
+      >
     </template>
     <div class="c-px-lg">
       <p>Hello, world</p>
@@ -49,11 +50,12 @@ import { matPeople } from '@quasar/extras/material-icons/index'
 ```vue live
 <script setup>
 import {
-  matPeople,
-  matNaturePeople,
   matArrowCircleDown,
+  matNaturePeople,
+  matPeople,
 } from '@quasar/extras/material-icons/index.mjs'
 </script>
+
 <template>
   <c-expansion title="A custom arrow">
     <template #arrow>
@@ -80,6 +82,7 @@ import {
 <script setup>
 import { CExpansion } from '@casual-ui/vue'
 </script>
+
 <template>
   <CExpansion
     title="Expanded from top"
diff --git a/packages/docs/components/interact/tabs.md b/packages/docs/components/interact/tabs.md
index 5804916..8eb68db 100644
--- a/packages/docs/components/interact/tabs.md
+++ b/packages/docs/components/interact/tabs.md
@@ -11,14 +11,21 @@ import { ref } from 'vue'
 const items = [{ name: 'Panel1' }, { name: 'Panel2' }, { name: 'Panel3' }]
 const activeItem = ref('Panel1')
 </script>
+
 <template>
   <c-tabs
     v-model="activeItem"
     :items="items"
   >
-    <template #body-Panel1> The content of panel 1 </template>
-    <template #body-Panel2> The content of panel 2 </template>
-    <template #body-Panel3> The content of panel 3 </template>
+    <template #body-Panel1>
+      The content of panel 1
+    </template>
+    <template #body-Panel2>
+      The content of panel 2
+    </template>
+    <template #body-Panel3>
+      The content of panel 3
+    </template>
   </c-tabs>
 </template>
 ```
@@ -32,6 +39,7 @@ const items = [{ name: 'Panel1' }, { name: 'Panel2' }, { name: 'Panel3' }]
 const activeItem = ref('Panel1')
 const size = ref('md')
 </script>
+
 <template>
   <div class="c-row c-items-center c-wrap c-gutter-md">
     <c-radio
@@ -69,9 +77,15 @@ const size = ref('md')
     :items="items"
     :size="size"
   >
-    <template #body-Panel1> The content of panel 1 </template>
-    <template #body-Panel2> The content of panel 2 </template>
-    <template #body-Panel3> The content of panel 3 </template>
+    <template #body-Panel1>
+      The content of panel 1
+    </template>
+    <template #body-Panel2>
+      The content of panel 2
+    </template>
+    <template #body-Panel3>
+      The content of panel 3
+    </template>
   </c-tabs>
 </template>
 ```
diff --git a/packages/docs/directives/v-loading.md b/packages/docs/directives/v-loading.md
index dd254e2..4b10dc9 100644
--- a/packages/docs/directives/v-loading.md
+++ b/packages/docs/directives/v-loading.md
@@ -9,14 +9,15 @@ title: v-loading
 import { ref } from 'vue'
 const loading = ref(false)
 </script>
+
 <template>
   <c-toggle v-model="loading" label="Click to open/close Loading" />
   <div
     v-loading="loading"
     class="loading-container"
-  >
-  </div>
+  />
 </template>
+
 <style scoped>
 .loading-container {
   height: 30vh;
@@ -38,14 +39,15 @@ const loadingConf = {
   backgroundColor: 'rgba(0, 0, 0, .7)'
 }
 </script>
+
 <template>
   <c-toggle v-model="loading" label="Click to open/close Loading" />
   <div
     v-loading:[loadingConf]="loading"
     class="loading-container"
-  >
-  </div>
+  />
 </template>
+
 <style lang="scss" scoped>
 .loading-container {
   height: 30vh;
diff --git a/packages/docs/usable/useClickOutside.md b/packages/docs/usable/useClickOutside.md
index 067e0ba..a83255f 100644
--- a/packages/docs/usable/useClickOutside.md
+++ b/packages/docs/usable/useClickOutside.md
@@ -8,7 +8,7 @@ hooksPath: usable/useClickOutside
 ```vue live
 <script setup>
 import { ref } from 'vue'
-import {useClickOutside} from '@casual-ui/vue'
+import { useClickOutside } from '@casual-ui/vue'
 const isOutsideClick = ref(false)
 const domRef = ref(null)
 
@@ -22,12 +22,16 @@ useClickOutside({
   },
 })
 </script>
+
 <template>
-  <div ref="domRef" class="click-card">Click inside or outside</div>
+  <div ref="domRef" class="click-card">
+    Click inside or outside
+  </div>
   <p>
     Is outside click: <code>{{ isOutsideClick }}</code>
   </p>
 </template>
+
 <style scoped>
 .click-card {
   background-color: var(--casual-primary);
diff --git a/packages/docs/zh-CN/components/button/README.md b/packages/docs/zh-CN/components/button/README.md
index fd7ebe0..b9970c8 100644
--- a/packages/docs/zh-CN/components/button/README.md
+++ b/packages/docs/zh-CN/components/button/README.md
@@ -123,12 +123,13 @@ componentPath: basic/button/CButton
 <script setup>
 import { CButton } from '@casual-ui/vue'
 </script>
+
 <template>
-  <c-button
+  <CButton
     label="圆角按钮"
     rounded
   />
-  <c-button
+  <CButton
     label="圆边按钮"
     round
   />
@@ -272,6 +273,7 @@ import {
   matDeviceHub,
 } from '@quasar/extras/material-icons/index'
 </script>
+
 <template>
   <c-button icon>
     <c-icon :content="matBuild" />
diff --git a/packages/docs/zh-CN/components/carousel.md b/packages/docs/zh-CN/components/carousel.md
index d967010..cbb6342 100644
--- a/packages/docs/zh-CN/components/carousel.md
+++ b/packages/docs/zh-CN/components/carousel.md
@@ -14,6 +14,7 @@ import { ref } from 'vue'
 
 const current = ref(0)
 </script>
+
 <template>
   <c-carousel v-model="current">
     <c-carousel-slider>
@@ -21,7 +22,7 @@ const current = ref(0)
         <div
           i-openmoji-red-apple
           class="icon"
-        ></div>
+        />
         要来一些苹果吗？
       </div>
     </c-carousel-slider>
@@ -30,7 +31,7 @@ const current = ref(0)
         <div
           i-openmoji-banana
           class="icon"
-        ></div>
+        />
         要来一些香蕉吗？
       </div>
     </c-carousel-slider>
@@ -39,12 +40,13 @@ const current = ref(0)
         <div
           class="icon"
           i-openmoji-grapes
-        ></div>
+        />
         要来一些葡萄吗？
       </div>
     </c-carousel-slider>
   </c-carousel>
 </template>
+
 <style scoped>
 .item {
   font-size: 32px;
@@ -69,6 +71,7 @@ import { ref } from 'vue'
 
 const current = ref(0)
 </script>
+
 <template>
   <c-carousel
     v-model="current"
@@ -79,7 +82,7 @@ const current = ref(0)
         <div
           i-openmoji-red-apple
           class="icon"
-        ></div>
+        />
         要来一些苹果吗？
       </div>
     </c-carousel-slider>
@@ -88,7 +91,7 @@ const current = ref(0)
         <div
           i-openmoji-banana
           class="icon"
-        ></div>
+        />
         要来一些香蕉吗？
       </div>
     </c-carousel-slider>
@@ -97,12 +100,13 @@ const current = ref(0)
         <div
           class="icon"
           i-openmoji-grapes
-        ></div>
+        />
         要来一些葡萄吗？
       </div>
     </c-carousel-slider>
   </c-carousel>
 </template>
+
 <style scoped>
 .item {
   font-size: 32px;
@@ -127,17 +131,18 @@ import { ref } from 'vue'
 
 const current = ref(0)
 </script>
+
 <template>
   <c-carousel
     v-model="current"
-    arrowTiming="hover"
+    arrow-timing="hover"
   >
     <c-carousel-slider>
       <div class="item">
         <div
           i-openmoji-red-apple
           class="icon"
-        ></div>
+        />
         要来一些苹果吗？
       </div>
     </c-carousel-slider>
@@ -146,7 +151,7 @@ const current = ref(0)
         <div
           i-openmoji-banana
           class="icon"
-        ></div>
+        />
         要来一些香蕉吗？
       </div>
     </c-carousel-slider>
@@ -155,12 +160,13 @@ const current = ref(0)
         <div
           class="icon"
           i-openmoji-grapes
-        ></div>
+        />
         要来一些葡萄吗？
       </div>
     </c-carousel-slider>
   </c-carousel>
 </template>
+
 <style scoped>
 .item {
   font-size: 32px;
@@ -192,6 +198,7 @@ const themeOptions = [
   { label: 'negative', value: 'negative' },
 ]
 </script>
+
 <template>
   <c-radio-group
     v-model="theme"
@@ -206,7 +213,7 @@ const themeOptions = [
         <div
           i-openmoji-red-apple
           class="icon"
-        ></div>
+        />
         要来一些苹果吗？
       </div>
     </c-carousel-slider>
@@ -215,7 +222,7 @@ const themeOptions = [
         <div
           i-openmoji-banana
           class="icon"
-        ></div>
+        />
         要来一些香蕉吗？
       </div>
     </c-carousel-slider>
@@ -224,12 +231,13 @@ const themeOptions = [
         <div
           class="icon"
           i-openmoji-grapes
-        ></div>
+        />
         要来一些葡萄吗？
       </div>
     </c-carousel-slider>
   </c-carousel>
 </template>
+
 <style scoped>
 .item {
   font-size: 32px;
@@ -254,6 +262,7 @@ import { ref } from 'vue'
 
 const current = ref(0)
 </script>
+
 <template>
   <c-carousel v-model="current">
     <template #control-prev>
@@ -279,7 +288,7 @@ const current = ref(0)
         <div
           i-openmoji-red-apple
           class="icon"
-        ></div>
+        />
         要来一些苹果吗？
       </div>
     </c-carousel-slider>
@@ -288,7 +297,7 @@ const current = ref(0)
         <div
           i-openmoji-banana
           class="icon"
-        ></div>
+        />
         要来一些香蕉吗？
       </div>
     </c-carousel-slider>
@@ -297,12 +306,13 @@ const current = ref(0)
         <div
           class="icon"
           i-openmoji-grapes
-        ></div>
+        />
         要来一些葡萄吗？
       </div>
     </c-carousel-slider>
   </c-carousel>
 </template>
+
 <style scoped>
 .item {
   font-size: 32px;
@@ -327,6 +337,7 @@ import { ref } from 'vue'
 
 const current = ref(0)
 </script>
+
 <template>
   <c-carousel
     v-model="current"
@@ -338,7 +349,7 @@ const current = ref(0)
         <div
           i-openmoji-red-apple
           class="icon"
-        ></div>
+        />
         要来一些苹果吗？
       </div>
     </c-carousel-slider>
@@ -347,7 +358,7 @@ const current = ref(0)
         <div
           i-openmoji-banana
           class="icon"
-        ></div>
+        />
         要来一些香蕉吗？
       </div>
     </c-carousel-slider>
@@ -356,12 +367,13 @@ const current = ref(0)
         <div
           class="icon"
           i-openmoji-grapes
-        ></div>
+        />
         要来一些葡萄吗？
       </div>
     </c-carousel-slider>
   </c-carousel>
 </template>
+
 <style scoped>
 .item {
   font-size: 32px;
@@ -386,6 +398,7 @@ import { ref } from 'vue'
 
 const current = ref(0)
 </script>
+
 <template>
   <c-carousel
     v-model="current"
@@ -396,7 +409,7 @@ const current = ref(0)
         <div
           i-openmoji-red-apple
           class="icon"
-        ></div>
+        />
         要来一些苹果吗？
       </div>
     </c-carousel-slider>
@@ -405,7 +418,7 @@ const current = ref(0)
         <div
           i-openmoji-banana
           class="icon"
-        ></div>
+        />
         要来一些香蕉吗？
       </div>
     </c-carousel-slider>
@@ -414,12 +427,13 @@ const current = ref(0)
         <div
           class="icon"
           i-openmoji-grapes
-        ></div>
+        />
         要来一些葡萄吗？
       </div>
     </c-carousel-slider>
   </c-carousel>
 </template>
+
 <style scoped>
 .item {
   font-size: 32px;
@@ -460,6 +474,7 @@ const alignOptions = [
   { label: 'column-reverse', value: 'column-reverse' },
 ]
 </script>
+
 <template>
   <div>
     <b>横向位置：</b>
@@ -482,7 +497,7 @@ const alignOptions = [
       :options="alignOptions"
     />
   </div>
-  <hr />
+  <hr>
   <c-carousel
     v-model="current"
     v-bind="{
@@ -496,7 +511,7 @@ const alignOptions = [
         <div
           i-openmoji-red-apple
           class="icon"
-        ></div>
+        />
         要来一些苹果吗？
       </div>
     </c-carousel-slider>
@@ -505,7 +520,7 @@ const alignOptions = [
         <div
           i-openmoji-banana
           class="icon"
-        ></div>
+        />
         要来一些香蕉吗？
       </div>
     </c-carousel-slider>
@@ -514,12 +529,13 @@ const alignOptions = [
         <div
           class="icon"
           i-openmoji-grapes
-        ></div>
+        />
         要来一些葡萄吗？
       </div>
     </c-carousel-slider>
   </c-carousel>
 </template>
+
 <style scoped>
 .item {
   font-size: 32px;
diff --git a/packages/docs/zh-CN/components/data-presentation/list.md b/packages/docs/zh-CN/components/data-presentation/list.md
index a97bcdc..82c1d27 100644
--- a/packages/docs/zh-CN/components/data-presentation/list.md
+++ b/packages/docs/zh-CN/components/data-presentation/list.md
@@ -19,6 +19,7 @@ const items = [
   { label: '葡萄' },
 ]
 </script>
+
 <template>
   <c-list :items="items" />
 </template>
@@ -38,6 +39,7 @@ const items = [
 ]
 const size = ref('md')
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-md c-wrap">
     <div
@@ -69,6 +71,7 @@ const items = [
   { label: '葡萄' },
 ]
 </script>
+
 <template>
   <c-list
     :items="items"
@@ -91,6 +94,7 @@ const items = [
 ]
 const activeItem = ref('香蕉')
 </script>
+
 <template>
   <c-list
     :items="items"
@@ -110,10 +114,10 @@ const activeItem = ref('香蕉')
 import { ref } from 'vue'
 import {
   matCheck,
-  matSettingsPower,
-  matPersonAddAlt1,
   matOfflineBolt,
+  matPersonAddAlt1,
   matSettings,
+  matSettingsPower,
 } from '@quasar/extras/material-icons/index'
 const items = [
   { title: '通知', subtitle: '一些通知相关的内容', icon: matOfflineBolt },
@@ -123,6 +127,7 @@ const items = [
 ]
 const activeItem = ref('')
 </script>
+
 <template>
   <c-list
     :items="items"
@@ -130,7 +135,7 @@ const activeItem = ref('')
     :active-fn="item => item.title === activeItem"
     @item-click="item => (activeItem = item.title)"
   >
-    <template #item="{ isActive, clickable, item }">
+    <template #item="{ isActive, item }">
       <c-info-item v-bind="item">
         <template
           v-if="isActive"
@@ -145,6 +150,7 @@ const activeItem = ref('')
     </template>
   </c-list>
 </template>
+
 <style
   scoped
   lang="scss"
diff --git a/packages/docs/zh-CN/components/data-presentation/table.md b/packages/docs/zh-CN/components/data-presentation/table.md
index aac58a0..6040e4e 100644
--- a/packages/docs/zh-CN/components/data-presentation/table.md
+++ b/packages/docs/zh-CN/components/data-presentation/table.md
@@ -31,6 +31,7 @@ const tableColumns = [
   { title: '性别', field: 'gender' },
 ]
 </script>
+
 <template>
   <c-table
     row-key="name"
@@ -54,6 +55,7 @@ const tableColumns = [
   { title: '性别', field: 'gender' },
 ]
 </script>
+
 <template>
   <c-table row-key="name" :data="tableData" :columns="tableColumns">
     <template #th-name="{ title }">
@@ -80,6 +82,7 @@ const tableColumns = [
   { title: '操作', field: 'operations' },
 ]
 </script>
+
 <template>
   <c-table row-key="name" :data="tableData" :columns="tableColumns">
     <template #td-operations>
diff --git a/packages/docs/zh-CN/components/feedback/dialog.md b/packages/docs/zh-CN/components/feedback/dialog.md
index 7bf4e89..9c66276 100644
--- a/packages/docs/zh-CN/components/feedback/dialog.md
+++ b/packages/docs/zh-CN/components/feedback/dialog.md
@@ -10,6 +10,7 @@ componentPath: popup/CDialog
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog v-model="show" title="你好">
     <div>你好，世界</div>
@@ -26,6 +27,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog
     v-model="show"
@@ -46,6 +48,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog
     v-model="show"
@@ -67,6 +70,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog
     v-model="show"
@@ -88,9 +92,9 @@ const show = ref(false)
 <script setup>
 import {
   matArrowBack,
-  matArrowUpward,
-  matArrowForward,
   matArrowDownward,
+  matArrowForward,
+  matArrowUpward,
   matFullscreenExit,
 } from '@quasar/extras/material-icons/index'
 import { ref } from 'vue'
@@ -105,6 +109,7 @@ const openWithPosition = (h, v) => {
   show.value = true
 }
 </script>
+
 <template>
   <c-dialog
     v-model="show"
@@ -192,10 +197,11 @@ import { ref } from 'vue'
 import { matPeople } from '@quasar/extras/material-icons/index.mjs'
 const show = ref(false)
 </script>
+
 <template>
   <c-dialog v-model="show">
     <template #title>
-      <img class="title-icon" src="/logo-dark.svg" />
+      <img class="title-icon" src="/logo-dark.svg">
     </template>
     <template #close-icon>
       <c-icon :content="matPeople" />
@@ -219,6 +225,7 @@ const show = ref(false)
   </c-dialog>
   <c-button label="打开对话框" @click="show = true" />
 </template>
+
 <style scoped>
 .title-icon {
   width: 80px;
@@ -236,6 +243,7 @@ const top = ref(false)
 const right = ref(false)
 const bottom = ref(false)
 </script>
+
 <template>
   <c-dialog
     v-model="left"
@@ -243,11 +251,12 @@ const bottom = ref(false)
     title="左侧抽屉"
     :rounded="false"
     :custom-style="{
-      height: '100vh'
+      height: '100vh',
     }"
     width="80vw"
     vertical-align="center"
-    horizontal-align="start">
+    horizontal-align="start"
+  >
     内容
   </c-dialog>
   <c-dialog
@@ -257,10 +266,11 @@ const bottom = ref(false)
     :rounded="false"
     width="80vw"
     :custom-style="{
-      height: '100vh'
+      height: '100vh',
     }"
     vertical-align="center"
-    horizontal-align="end">
+    horizontal-align="end"
+  >
     内容
   </c-dialog>
   <c-dialog
@@ -269,7 +279,8 @@ const bottom = ref(false)
     :rounded="false"
     width="100vw"
     vertical-align="start"
-    horizontal-align="center">
+    horizontal-align="center"
+  >
     内容
   </c-dialog>
   <c-dialog
@@ -278,7 +289,8 @@ const bottom = ref(false)
     :rounded="false"
     width="100vw"
     vertical-align="end"
-    horizontal-align="center">
+    horizontal-align="center"
+  >
     内容
   </c-dialog>
   <div class="c-row c-items-center c-wrap c-gutter-md">
diff --git a/packages/docs/zh-CN/components/feedback/drawer.md b/packages/docs/zh-CN/components/feedback/drawer.md
index 7972d43..a02f6af 100644
--- a/packages/docs/zh-CN/components/feedback/drawer.md
+++ b/packages/docs/zh-CN/components/feedback/drawer.md
@@ -18,8 +18,8 @@ const show = ref(false)
   />
 
   <CDrawer
-    title="你好"
     v-model="show"
+    title="你好"
   >
     我是一些抽屉内容
   </CDrawer>
@@ -33,9 +33,9 @@ const show = ref(false)
 import { ref } from 'vue'
 import {
   matArrowBack,
-  matArrowUpward,
-  matArrowForward,
   matArrowDownward,
+  matArrowForward,
+  matArrowUpward,
 } from '@quasar/extras/material-icons/index'
 
 const show = ref(false)
@@ -84,9 +84,9 @@ function openWithPosition(pos) {
   </div>
 
   <c-drawer
+    v-model="show"
     title="你好"
     :position="position"
-    v-model="show"
   >
     我是一些抽屉内容
   </c-drawer>
diff --git a/packages/docs/zh-CN/components/feedback/notification.md b/packages/docs/zh-CN/components/feedback/notification.md
index a9c2918..c8316b5 100644
--- a/packages/docs/zh-CN/components/feedback/notification.md
+++ b/packages/docs/zh-CN/components/feedback/notification.md
@@ -39,6 +39,7 @@ const openWithCount = () => {
   })
 }
 </script>
+
 <template>
   <c-button label="打开通知" @click="openWithCount" />
 </template>
@@ -60,6 +61,7 @@ const openWithTheme = (theme) => {
   })
 }
 </script>
+
 <template>
   <div class="c-row c-items-center c-wrap c-gutter-md">
     <div>
@@ -96,9 +98,9 @@ const openWithTheme = (theme) => {
 <script setup>
 import {
   matArrowBack,
-  matArrowUpward,
-  matArrowForward,
   matArrowDownward,
+  matArrowForward,
+  matArrowUpward,
   matFullscreenExit,
 } from '@quasar/extras/material-icons/index'
 import { useNotifications } from '@casual-ui/vue'
@@ -114,6 +116,7 @@ const openWithPosition = (alignX, alignY) => {
   })
 }
 </script>
+
 <template>
   <div class="c-row c-gutter-sm">
     <div>
@@ -196,6 +199,7 @@ import { useNotifications } from '@casual-ui/vue'
 
 const { open } = useNotifications()
 </script>
+
 <template>
   <c-button
     label="打开通知"
@@ -221,7 +225,7 @@ import { useNotifications } from '@casual-ui/vue'
 
 const { open } = useNotifications()
 
-let close = ref(null)
+const close = ref(null)
 
 const onClick = () => {
   if (!close.value) {
@@ -231,12 +235,14 @@ const onClick = () => {
       timeout: 0,
       closeIcon: false,
     }).close
-  } else {
+  }
+  else {
     close.value()
     close.value = null
   }
 }
 </script>
+
 <template>
   <c-button
     :label="close ? '关闭通知' : '打开通知'"
@@ -283,6 +289,7 @@ const openWithDynamicContent = () => {
   }, 2000)
 }
 </script>
+
 <template>
   <c-button label="打开通知" @click="openWithDynamicContent" />
 </template>
diff --git a/packages/docs/zh-CN/components/feedback/tooltip.md b/packages/docs/zh-CN/components/feedback/tooltip.md
index d497240..fa35895 100644
--- a/packages/docs/zh-CN/components/feedback/tooltip.md
+++ b/packages/docs/zh-CN/components/feedback/tooltip.md
@@ -32,10 +32,12 @@ const positions = [
   'left-bottom',
 ]
 </script>
+
 <template>
   <div class="tooltips">
     <c-tooltip
       v-for="p in positions"
+      :key="p"
       :content="`来自于位置${p}的tooltip信息`"
       :position="p"
     >
@@ -43,6 +45,7 @@ const positions = [
     </c-tooltip>
   </div>
 </template>
+
 <style scoped>
 .tooltips {
   display: grid;
@@ -79,6 +82,7 @@ const positions = [
     </template>
   </c-tooltip>
 </template>
+
 <style scoped>
 .custom-content {
   white-space: nowrap;
@@ -100,6 +104,7 @@ const toggleShow = () => {
   show.value = !show.value
 }
 </script>
+
 <template>
   <div class="popups">
     <c-tooltip content="你好，世界">
@@ -133,6 +138,7 @@ const toggleShow = () => {
     </div>
   </div>
 </template>
+
 <style scoped>
 .popups {
   display: flex;
diff --git a/packages/docs/zh-CN/components/form/checkbox.md b/packages/docs/zh-CN/components/form/checkbox.md
index 62ccf9e..cb3b35d 100644
--- a/packages/docs/zh-CN/components/form/checkbox.md
+++ b/packages/docs/zh-CN/components/form/checkbox.md
@@ -13,6 +13,7 @@ additionalComponentPaths:
 import { ref } from 'vue'
 const val = ref(false)
 </script>
+
 <template>
   <c-checkbox v-model="val" label="同意协议" />
 </template>
@@ -25,29 +26,34 @@ const val = ref(false)
 import { ref } from 'vue'
 const val = ref('md')
 </script>
+
 <template>
   <div class="c-row c-gutter-md c-items-center">
     <c-checkbox
       v-model="val"
       checked-value="xs"
       size="xs"
-      label="超小尺寸" />
+      label="超小尺寸"
+    />
     <c-checkbox
       v-model="val"
       checked-value="sm"
       size="sm"
-      label="小尺寸" />
+      label="小尺寸"
+    />
     <c-checkbox v-model="val" checked-value="md" label="中等尺寸（默认）" />
     <c-checkbox
       v-model="val"
       checked-value="lg"
       size="lg"
-      label="大尺寸" />
+      label="大尺寸"
+    />
     <c-checkbox
       v-model="val"
       checked-value="xl"
       size="xl"
-      label="超大尺寸" />
+      label="超大尺寸"
+    />
   </div>
   <div>当前值：{{ val }}</div>
 </template>
@@ -61,13 +67,15 @@ import { ref } from 'vue'
 const val1 = ref(false)
 const val2 = ref(true)
 </script>
+
 <template>
   <c-checkbox v-model="val1" label="禁用态" disabled />
   <c-checkbox
     v-model="val2"
     label="禁用态"
     disabled
-    class="c-ml-md" />
+    class="c-ml-md"
+  />
 </template>
 ```
 
@@ -86,6 +94,7 @@ const options = [
   { label: '桃子', value: 'Peach' },
 ]
 </script>
+
 <template>
   <c-checkbox-group
     v-model="val"
diff --git a/packages/docs/zh-CN/components/form/date-picker.md b/packages/docs/zh-CN/components/form/date-picker.md
index e1ef1aa..739ded0 100644
--- a/packages/docs/zh-CN/components/form/date-picker.md
+++ b/packages/docs/zh-CN/components/form/date-picker.md
@@ -12,6 +12,7 @@ import { ref } from 'vue'
 const date = ref(null)
 const formattedValue = ref('')
 </script>
+
 <template>
   <c-date-picker
     v-model="date"
@@ -35,6 +36,7 @@ import { ref } from 'vue'
 const date1 = ref(null)
 const date2 = ref(new Date())
 </script>
+
 <template>
   <c-date-picker v-model="date1" disabled />
   <c-date-picker v-model="date2" disabled class="c-ml-md" />
@@ -49,6 +51,7 @@ import { ref } from 'vue'
 const date = ref(null)
 const formattedValue = ref('')
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-md c-wrap">
     <c-date-picker
@@ -98,6 +101,7 @@ import { ref } from 'vue'
 const dateRange = ref([null, null])
 const formattedRange = ref(['', ''])
 </script>
+
 <template>
   <c-date-picker
     v-model:dateRange="dateRange"
@@ -124,6 +128,7 @@ const formattedMonth = ref('')
 const year = ref(null)
 const formattedYear = ref('')
 </script>
+
 <template>
   <div class="c-row c-gutter-x-md">
     <div class="c-col-6">
diff --git a/packages/docs/zh-CN/components/form/form.md b/packages/docs/zh-CN/components/form/form.md
index 3d26f1e..5297e7a 100644
--- a/packages/docs/zh-CN/components/form/form.md
+++ b/packages/docs/zh-CN/components/form/form.md
@@ -29,6 +29,7 @@ const industryOptions = [
   { label: 'Transportation', value: 'Transportation' }
 ]
 </script>
+
 <template>
   <c-form>
     <c-form-item label="姓名">
@@ -99,6 +100,7 @@ const formItems = [
   }
 ]
 </script>
+
 <template>
   <c-form v-model="formData" :items="formItems" />
 </template>
@@ -154,6 +156,7 @@ const formItems = [
 const size = ref('md')
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
 </script>
+
 <template>
   <div class="c-row c-gutter-md c-items-center">
     <c-radio
@@ -162,7 +165,8 @@ const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
       v-model="size"
       :size="s"
       :label="s"
-      :value="s" />
+      :value="s"
+    />
   </div>
   <c-form v-model="formData" :items="formItems" :size="size" />
 </template>
@@ -218,6 +222,7 @@ const formItems = [
 const size = ref('md')
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
 </script>
+
 <template>
   <div class="c-row c-gutter-md c-items-center">
     <c-radio
@@ -226,7 +231,8 @@ const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
       v-model="size"
       :size="s"
       :label="s"
-      :value="s" />
+      :value="s"
+    />
   </div>
   <c-form v-model="formData" :items="formItems" :gutter-size="size" />
 </template>
@@ -317,6 +323,7 @@ const formItems = [
   }
 ]
 </script>
+
 <template>
   <c-form
     v-model="formData"
@@ -343,7 +350,7 @@ const formData = ref({
 
 const formItems = [
   { field: 'name', label: '姓名' },
- {
+  {
     label: '性别',
     field: 'gender',
     component: 'radio-group',
@@ -387,6 +394,7 @@ const formItems = [
 const col = ref(6)
 const spans = [2, 3, 4, 6, 12]
 </script>
+
 <template>
   <div class="c-row c-gutter-md c-items-center">
     <c-radio
@@ -421,7 +429,7 @@ const rule = v => (v ? false : '该项是必填的')
 
 ```js
 const asyncRule = v =>
-  new Promise(resolve => {
+  new Promise((resolve) => {
     setTimeout(() => {
       resolve(v ? false : '该项是必填的')
     }, 1000)
@@ -509,7 +517,7 @@ const formItems = [
     },
     rules: [
       // 异步验证
-      v => new Promise(resolve => {
+      v => new Promise((resolve) => {
         setTimeout(() => {
           resolve(v.length < 2 ? '请至少选择两项' : false)
         }, 3000)
@@ -533,6 +541,7 @@ const clearValidate = () => {
   form.value?.clearAll()
 }
 </script>
+
 <template>
   <c-form
     ref="form"
@@ -643,6 +652,7 @@ const clearAll = () => {
 }
 const validating = ref(false)
 </script>
+
 <template>
   <c-form
     ref="form"
@@ -657,7 +667,7 @@ const validating = ref(false)
         :style="{ color: hasError ? 'red' : 'inherit' }"
         @blur="validate"
         @focus="clearValidate"
-      />
+      >
     </template>
   </c-form>
   <div class="c-mt-xl">
@@ -753,7 +763,7 @@ const formItems = [
     field: 'customField',
     component: CustomInput,
     rules: [
-      v => {
+      (v) => {
         return v === 'custom value' ? false : '只能输入“custom value”'
       }
     ]
@@ -775,6 +785,7 @@ const clearAll = () => {
 }
 const validating = ref(false)
 </script>
+
 <template>
   <c-form
     ref="form"
diff --git a/packages/docs/zh-CN/components/form/input.md b/packages/docs/zh-CN/components/form/input.md
index ec6a279..e020176 100644
--- a/packages/docs/zh-CN/components/form/input.md
+++ b/packages/docs/zh-CN/components/form/input.md
@@ -11,6 +11,7 @@ eventsNameWidth: 140px
 import { ref } from 'vue'
 const inputValue = ref('')
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-md c-wrap">
     <div>
@@ -35,6 +36,7 @@ const inputValue = ref('')
 import { ref } from 'vue'
 const inputValue = ref('')
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-md c-wrap">
     <div>
@@ -63,6 +65,7 @@ const inputValue = ref('')
 import { ref } from 'vue'
 const inputValue = ref('')
 </script>
+
 <template>
   <c-input v-model="inputValue" placeholder="请输入..." clearable />
 </template>
@@ -72,17 +75,22 @@ const inputValue = ref('')
 
 ```vue live
 <script setup>
-import { matDateRange, matContactPhone } from '@quasar/extras/material-icons/index'
+import { matContactPhone, matDateRange } from '@quasar/extras/material-icons/index'
 import { ref } from 'vue'
 
 const value = ref('')
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-x-lg">
     <div>
       <c-input v-model="value">
-        <template #prefix> +234 </template>
-        <template #suffix> @someone </template>
+        <template #prefix>
+          +234
+        </template>
+        <template #suffix>
+          @someone
+        </template>
       </c-input>
     </div>
     <div>
@@ -106,6 +114,7 @@ const value = ref('')
 import { ref } from 'vue'
 const value = ref('')
 </script>
+
 <template>
   <div class="c-row c-gutter-x-md">
     <div>
diff --git a/packages/docs/zh-CN/components/form/radio.md b/packages/docs/zh-CN/components/form/radio.md
index 6ae7e91..010996a 100644
--- a/packages/docs/zh-CN/components/form/radio.md
+++ b/packages/docs/zh-CN/components/form/radio.md
@@ -13,6 +13,7 @@ additionalComponentPaths:
 import { ref } from 'vue'
 const val = ref('')
 </script>
+
 <template>
   <div class="c-row c-gutter-x-md">
     <c-radio v-model="val" label="苹果" value="Apple" />
@@ -20,7 +21,9 @@ const val = ref('')
     <c-radio v-model="val" label="桃子" value="Peach" />
     <c-radio v-model="val" label="葡萄" value="Grape" />
   </div>
-  <div class="c-mt-md">当前选中值：{{ val }}</div>
+  <div class="c-mt-md">
+    当前选中值：{{ val }}
+  </div>
 </template>
 ```
 
@@ -31,31 +34,38 @@ const val = ref('')
 import { ref } from 'vue'
 const val = ref('')
 </script>
+
 <template>
   <div class="c-row c-gutter-x-md c-items-center">
     <c-radio
       v-model="val"
       label="超小尺寸"
       value="xs"
-      size="xs" />
+      size="xs"
+    />
     <c-radio
       v-model="val"
       label="小尺寸"
       value="sm"
-      size="sm" />
+      size="sm"
+    />
     <c-radio v-model="val" label="中等尺寸（默认）" value="md" />
     <c-radio
       v-model="val"
       label="大尺寸"
       value="lg"
-      size="lg" />
+      size="lg"
+    />
     <c-radio
       v-model="val"
       label="超大尺寸"
       value="xl"
-      size="xl" />
+      size="xl"
+    />
+  </div>
+  <div class="c-mt-md">
+    当前选中值：{{ val }}
   </div>
-  <div class="c-mt-md">当前选中值：{{ val }}</div>
 </template>
 ```
 
@@ -67,6 +77,7 @@ import { ref } from 'vue'
 const val1 = ref(false)
 const val2 = ref(true)
 </script>
+
 <template>
   <div class="c-row c-gutter-x-md">
     <c-radio v-model="val1" label="禁用态" disabled />
@@ -89,6 +100,7 @@ const fruits = [
   { label: '葡萄', value: 'Grape' },
 ]
 </script>
+
 <template>
   {{ selectedFruit }}
   <c-radio-group v-model="selectedFruit" :options="fruits" />
diff --git a/packages/docs/zh-CN/components/form/select.md b/packages/docs/zh-CN/components/form/select.md
index dcc4a92..1ec990c 100644
--- a/packages/docs/zh-CN/components/form/select.md
+++ b/packages/docs/zh-CN/components/form/select.md
@@ -19,6 +19,7 @@ const options = [
   { label: '500 - 1000', value: 4 },
 ]
 </script>
+
 <template>
   <c-select
     v-model="selectedValue"
@@ -51,6 +52,7 @@ const options = [
   { label: '500 - 1000', value: 4 },
 ]
 </script>
+
 <template>
   <div class="c-row c-items-center c-gutter-md c-wrap">
     <div>
@@ -111,6 +113,7 @@ const options = [
   { label: '500 - 1000', value: 4 },
 ]
 </script>
+
 <template>
   <c-select
     v-model="val"
@@ -137,6 +140,7 @@ const options = [
   { label: '500 - 1000', value: 4 },
 ]
 </script>
+
 <template>
   <c-select
     v-model="selectedValue"
@@ -163,6 +167,7 @@ const options = [
   { label: '500 - 1000', value: 4 },
 ]
 </script>
+
 <template>
   <c-select
     v-model="selectedValue"
diff --git a/packages/docs/zh-CN/components/form/slider.md b/packages/docs/zh-CN/components/form/slider.md
index 2cdfc72..cf88a19 100644
--- a/packages/docs/zh-CN/components/form/slider.md
+++ b/packages/docs/zh-CN/components/form/slider.md
@@ -9,6 +9,7 @@ title: 滑块
 import { ref } from 'vue'
 const val = ref(50)
 </script>
+
 <template>
   <c-slider v-model="val" />
 </template>
diff --git a/packages/docs/zh-CN/components/form/toggle.md b/packages/docs/zh-CN/components/form/toggle.md
index 20a426f..5b9158d 100644
--- a/packages/docs/zh-CN/components/form/toggle.md
+++ b/packages/docs/zh-CN/components/form/toggle.md
@@ -10,6 +10,7 @@ componentPath: form/CToggle
 import { ref } from 'vue'
 const checked = ref(false)
 </script>
+
 <template>
   <c-toggle v-model="checked" label="打开通知" />
 </template>
@@ -29,6 +30,7 @@ const checkStatus = reactive({
   xl: false,
 })
 </script>
+
 <template>
   <div class="c-row c-gutter-x-md c-items-center">
     <div>
@@ -59,12 +61,14 @@ import { ref } from 'vue'
 const checked1 = ref(false)
 const checked2 = ref(true)
 </script>
+
 <template>
   <c-toggle v-model="checked1" label="禁用态" disabled />
   <c-toggle
     v-model="checked2"
     label="禁用态"
     disabled
-    class="c-ml-md" />
+    class="c-ml-md"
+  />
 </template>
 ```
diff --git a/packages/docs/zh-CN/components/interact/ajax-bar.md b/packages/docs/zh-CN/components/interact/ajax-bar.md
new file mode 100644
index 0000000..4a06fbf
--- /dev/null
+++ b/packages/docs/zh-CN/components/interact/ajax-bar.md
@@ -0,0 +1,55 @@
+---
+title: Ajax Bar
+componentPath: interact/CAjaxBar
+---
+
+### 基础使用
+
+```vue live
+<script setup>
+import { ref } from 'vue'
+const ajaxBar = ref()
+
+const start = () => {
+  ajaxBar.value && ajaxBar.value.start()
+}
+
+const end = () => {
+  ajaxBar.value && ajaxBar.value.end()
+}
+</script>
+
+<template>
+  <c-ajax-bar ref="ajaxBar" />
+  <c-button label="打开" @click="start" />
+  <c-button label="结束" theme="negative" rounded @click="end" />
+</template>
+```
+
+### Themes
+
+```vue live
+<script setup>
+import { ref } from 'vue'
+const ajaxBar = ref()
+const theme = ref('primary')
+
+const startWithTheme = (t) => {
+  theme.value = t
+  ajaxBar.value && ajaxBar.value.start()
+}
+
+const end = () => {
+  ajaxBar.value && ajaxBar.value.end()
+}
+</script>
+
+<template>
+  <c-ajax-bar ref="ajaxBar" :theme="theme" />
+  <c-button label="打开主色" @click="startWithTheme('primary')" />
+  <c-button label="打开辅色" theme="secondary" @click="startWithTheme('secondary')" />
+  <c-button label="打开警告色" theme="warning" @click="startWithTheme('warning')" />
+  <c-button label="打开消极色" theme="negative" @click="startWithTheme('negative')" />
+  <c-button label="结束" theme="negative" rounded @click="end" />
+</template>
+```
\ No newline at end of file
diff --git a/packages/docs/zh-CN/components/interact/dropdown.md b/packages/docs/zh-CN/components/interact/dropdown.md
index 331f9f5..f8e9c38 100644
--- a/packages/docs/zh-CN/components/interact/dropdown.md
+++ b/packages/docs/zh-CN/components/interact/dropdown.md
@@ -10,6 +10,7 @@ componentPath: interact/CDropdown
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dropdown v-model="show">
     <c-button label="点击展开下拉" />
@@ -27,6 +28,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-dropdown
     v-model="show"
@@ -34,10 +36,13 @@ const show = ref(false)
   >
     <c-button label="点击展开下拉" />
     <template #drop-content>
-      <div class="custom-width">自定义内容宽度</div>
+      <div class="custom-width">
+        自定义内容宽度
+      </div>
     </template>
   </c-dropdown>
 </template>
+
 <style scoped>
 .custom-width {
   width: 400px;
@@ -53,6 +58,7 @@ const show = ref(false)
 import { ref } from 'vue'
 const show = ref(false)
 </script>
+
 <template>
   <c-button
     label="点击收起/展开下拉"
@@ -65,10 +71,13 @@ const show = ref(false)
   >
     <h3>点击左边按钮收起/展开下拉</h3>
     <template #drop-content>
-      <div class="custom-width">自定义内容宽度</div>
+      <div class="custom-width">
+        自定义内容宽度
+      </div>
     </template>
   </c-dropdown>
 </template>
+
 <style scoped>
 .custom-width {
   width: 400px;
diff --git a/packages/docs/zh-CN/components/interact/expansion.md b/packages/docs/zh-CN/components/interact/expansion.md
index 9907740..c18890f 100644
--- a/packages/docs/zh-CN/components/interact/expansion.md
+++ b/packages/docs/zh-CN/components/interact/expansion.md
@@ -21,6 +21,7 @@ componentPath: interact/CExpansion
 <script setup>
 import { matPeople } from '@quasar/extras/material-icons/index'
 </script>
+
 <template>
   <c-expansion
     title="标题左侧图标"
@@ -35,7 +36,7 @@ import { matPeople } from '@quasar/extras/material-icons/index'
       <img
         style="width: 80px;"
         src="/logo-dark.svg"
-      />
+      >
     </template>
     <div class="c-px-lg">
       <p>代码能够运行并满足业务要求是最低标准</p>
@@ -49,11 +50,12 @@ import { matPeople } from '@quasar/extras/material-icons/index'
 ```vue live
 <script setup>
 import {
-  matPeople,
-  matNaturePeople,
   matArrowCircleDown,
+  matNaturePeople,
+  matPeople,
 } from '@quasar/extras/material-icons/index.mjs'
 </script>
+
 <template>
   <c-expansion title="自定义arrow插槽图标">
     <template #arrow>
@@ -80,6 +82,7 @@ import {
 <script setup>
 import { CExpansion } from '@casual-ui/vue'
 </script>
+
 <template>
   <CExpansion
     title="Expanded from top"
diff --git a/packages/docs/zh-CN/components/interact/tabs.md b/packages/docs/zh-CN/components/interact/tabs.md
index fe74b96..23be12c 100644
--- a/packages/docs/zh-CN/components/interact/tabs.md
+++ b/packages/docs/zh-CN/components/interact/tabs.md
@@ -15,6 +15,7 @@ const items = [
 ]
 const activeItem = ref('面板1')
 </script>
+
 <template>
   <c-tabs v-model="activeItem" :items="items">
     <template #body-面板1>
@@ -43,29 +44,34 @@ const items = [
 const activeItem = ref('面板1')
 const size = ref('md')
 </script>
+
 <template>
   <div class="c-row c-items-center c-wrap c-gutter-md">
     <c-radio
       v-model="size"
       label="xs"
       value="xs"
-      size="xs" />
+      size="xs"
+    />
     <c-radio
       v-model="size"
       label="sm"
       value="sm"
-      size="sm" />
+      size="sm"
+    />
     <c-radio v-model="size" label="md（默认）" value="md" />
     <c-radio
       v-model="size"
       label="lg"
       value="lg"
-      size="lg" />
+      size="lg"
+    />
     <c-radio
       v-model="size"
       label="xl"
       value="xl"
-      size="xl" />
+      size="xl"
+    />
   </div>
   <c-tabs v-model="activeItem" :items="items" :size="size">
     <template #body-面板1>
diff --git a/packages/docs/zh-CN/components/tag.md b/packages/docs/zh-CN/components/tag.md
index e6a3961..40ab235 100644
--- a/packages/docs/zh-CN/components/tag.md
+++ b/packages/docs/zh-CN/components/tag.md
@@ -75,7 +75,8 @@ componentPath: basic/CTag
         closeable
         label="可关闭"
         size="xs"
-        theme="secondary" />
+        theme="secondary"
+      />
     </div>
     <div>
       <c-tag closeable label="可关闭" size="sm" />
@@ -91,7 +92,8 @@ componentPath: basic/CTag
         closeable
         label="可关闭"
         size="xl"
-        theme="negative" />
+        theme="negative"
+      />
     </div>
   </div>
 </template>
diff --git a/packages/docs/zh-CN/directives/v-loading.md b/packages/docs/zh-CN/directives/v-loading.md
index bc2f8f0..a702472 100644
--- a/packages/docs/zh-CN/directives/v-loading.md
+++ b/packages/docs/zh-CN/directives/v-loading.md
@@ -9,14 +9,15 @@ title: v-loading
 import { ref } from 'vue'
 const loading = ref(false)
 </script>
+
 <template>
   <c-toggle v-model="loading" label="点击打开/关闭Loading" />
   <div
     v-loading="loading"
     class="loading-container"
-  >
-  </div>
+  />
 </template>
+
 <style scoped>
 .loading-container {
   height: 30vh;
@@ -38,14 +39,15 @@ const loadingConf = {
   backgroundColor: 'rgba(0, 0, 0, .7)'
 }
 </script>
+
 <template>
   <c-toggle v-model="loading" label="点击打开/关闭Loading" />
   <div
     v-loading:[loadingConf]="loading"
     class="loading-container"
-  >
-  </div>
+  />
 </template>
+
 <style lang="scss" scoped>
 .loading-container {
   height: 30vh;
diff --git a/packages/docs/zh-CN/global-style-utils/README.md b/packages/docs/zh-CN/global-style-utils/README.md
index 535b6d1..6eb9695 100644
--- a/packages/docs/zh-CN/global-style-utils/README.md
+++ b/packages/docs/zh-CN/global-style-utils/README.md
@@ -120,6 +120,7 @@ Casual UI 使用经典的 12 栅格机制
     </div>
   </div>
 </template>
+
 <style scoped>
 .c-col-2 > div ,
 .c-col-3 > div ,
@@ -138,15 +139,16 @@ Casual UI 使用经典的 12 栅格机制
 ```vue live hide-code
 <template>
   <div class="c-row c-wrap c-gutter-md">
-    <div v-for="n in 8" :key="n" class="motion-item"></div>
+    <div v-for="n in 8" :key="n" class="motion-item" />
   </div>
   <div class="c-row c-wrap c-gutter-md">
-    <div v-for="n in 8" :key="n" class="motion-item-eio"></div>
+    <div v-for="n in 8" :key="n" class="motion-item-eio" />
   </div>
   <div class="c-row c-wrap c-gutter-md">
-    <div v-for="n in 8" :key="n" class="motion-item-ei"></div>
+    <div v-for="n in 8" :key="n" class="motion-item-ei" />
   </div>
 </template>
+
 <style scoped lang="scss">
 @keyframes circle {
   from {
@@ -279,6 +281,7 @@ Casual UI 使用经典的 12 栅格机制
     </div>
   </div>
 </template>
+
 <style scoped>
 .custom-grid--item {
   text-align: center;
diff --git a/packages/docs/zh-CN/guide/i18n.md b/packages/docs/zh-CN/guide/i18n.md
index f1df4a2..3087a3d 100644
--- a/packages/docs/zh-CN/guide/i18n.md
+++ b/packages/docs/zh-CN/guide/i18n.md
@@ -11,7 +11,7 @@ Casual UI 有一些工具帮助国际化
 
 ```vue live
 <script setup>
-import { useMessage, useI18n } from '@casual-ui/vue'
+import { useI18n, useMessage } from '@casual-ui/vue'
 
 const locale = useI18n()
 const messages = useMessage()
@@ -21,10 +21,11 @@ const options = [
   { label: '中文', value: 'zhCN' },
 ]
 </script>
+
 <template>
   <c-radio-group v-model="locale" :options="options" />
   <pre>
-    {{messages}}
+    {{ messages }}
   </pre>
 </template>
 ```
\ No newline at end of file
diff --git a/packages/docs/zh-CN/guide/install.md b/packages/docs/zh-CN/guide/install.md
index d0b6275..f0714d2 100644
--- a/packages/docs/zh-CN/guide/install.md
+++ b/packages/docs/zh-CN/guide/install.md
@@ -21,8 +21,8 @@ pnpm install casual-ui-vue
 
 ```js
 import { createApp } from 'vue'
-import App from './App.vue'
 import CasualUIVue from '@casual-ui/vue' // 引入全局Vue3插件
+import App from './App.vue'
 import 'casual-ui-vue/dist/style.css' // 引入样式文件
 
 const app = createApp(App)
@@ -52,8 +52,9 @@ import 'casual-ui-vue/style.css'
 <script setup>
 import { CButton } from '@casual-ui/vue'
 </script>
+
 <template>
-  <c-button label="按钮" />
+  <CButton label="按钮" />
 </template>
 ```
 
diff --git a/packages/docs/zh-CN/usable/useClickOutside.md b/packages/docs/zh-CN/usable/useClickOutside.md
index 6844fdd..d8f5c80 100644
--- a/packages/docs/zh-CN/usable/useClickOutside.md
+++ b/packages/docs/zh-CN/usable/useClickOutside.md
@@ -8,7 +8,7 @@ hooksPath: usable/useClickOutside
 ```vue live
 <script setup>
 import { ref } from 'vue'
-import {useClickOutside} from '@casual-ui/vue'
+import { useClickOutside } from '@casual-ui/vue'
 const isOutsideClick = ref(false)
 const domRef = ref(null)
 
@@ -22,12 +22,16 @@ useClickOutside({
   },
 })
 </script>
+
 <template>
-  <div ref="domRef" class="click-card">点击内部或者外部</div>
+  <div ref="domRef" class="click-card">
+    点击内部或者外部
+  </div>
   <p>
     是否为外部点击：<code>{{ isOutsideClick }}</code>
   </p>
 </template>
+
 <style scoped>
 .click-card {
   background-color: var(--casual-primary);