diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index 56be49a..73aa20a 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -122,10 +122,10 @@ function copy() {
         // 公众号不支持 position， 转换为等价的 translateY
         .replace(/top:(.*?)em/g, `transform: translateY($1em)`)
         // 适配主题中的颜色变量
-        .replaceAll(`hsl(var(--foreground))`, `#3f3f3f`)
-        .replaceAll(`var(--blockquote-background)`, `#f7f7f7`)
-        .replaceAll(`var(--md-primary-color)`, primaryColor.value)
-        .replaceAll(/--md-primary-color:.+?;/g, ``)
+        .replace(/hsl\(var\(--foreground\)\)/g, `#3f3f3f`)
+        .replace(/var\(--blockquote-background\)/g, `#f7f7f7`)
+        .replace(/var\(--md-primary-color\)/g, primaryColor.value)
+        .replace(/--md-primary-color:.+?;/g, ``)
         .replace(/<span class="nodeLabel"([^>]*)><p[^>]*>(.*?)<\/p><\/span>/g, `<span class="nodeLabel"$1>$2</span>`)
 
       clipboardDiv.focus()
@@ -219,10 +219,10 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
       <HelpDropdown />
     </Menubar>
 
-    <Button v-if="!store.isOpenPostSlider" variant="outline" @click="store.isOpenPostSlider = true" class="mr-2">
+    <Button v-if="!store.isOpenPostSlider" variant="outline" class="mr-2" @click="store.isOpenPostSlider = true">
       <PanelLeftOpen class="size-4" />
     </Button>
-    <Button v-else variant="outline" @click="store.isOpenPostSlider = false" class="mr-2">
+    <Button v-else variant="outline" class="mr-2" @click="store.isOpenPostSlider = false">
       <PanelLeftClose class="size-4" />
     </Button>
     <Popover>
diff --git a/src/components/CodemirrorEditor/PostSlider.vue b/src/components/CodemirrorEditor/PostSlider.vue
index ac0c75b..a0b7263 100644
--- a/src/components/CodemirrorEditor/PostSlider.vue
+++ b/src/components/CodemirrorEditor/PostSlider.vue
@@ -121,7 +121,7 @@ function delPost() {
         :class="{
           'bg-primary text-primary-foreground': store.currentPostIndex === index,
         }"
-        class="hover:text-primary-foreground hover:bg-primary/90 dark:bg-muted dark:hover:bg-muted h-8 w-full inline-flex items-center justify-start gap-2 whitespace-nowrap rounded px-2 text-sm transition-colors dark:text-white dark:hover:text-white"
+        class="hover:bg-primary/90 hover:text-primary-foreground dark:bg-muted dark:hover:bg-muted h-8 w-full inline-flex items-center justify-start gap-2 whitespace-nowrap rounded px-2 text-sm transition-colors dark:text-white dark:hover:text-white"
         @click="store.currentPostIndex = index"
       >
         <span class="line-clamp-1">{{ post.title }}</span>
diff --git a/src/components/CodemirrorEditor/UploadImgDialog.vue b/src/components/CodemirrorEditor/UploadImgDialog.vue
index 538cd3d..61f0155 100644
--- a/src/components/CodemirrorEditor/UploadImgDialog.vue
+++ b/src/components/CodemirrorEditor/UploadImgDialog.vue
@@ -691,6 +691,7 @@ function onDrop(e: DragEvent) {
                 <Button
                   variant="link"
                   class="p-0"
+                  as="a"
                   href="https://mpmd.pages.dev/tutorial/"
                   target="_blank"
                 >
diff --git a/src/components/FormItem.vue b/src/components/FormItem.vue
index 1c5a66d..62ff57b 100644
--- a/src/components/FormItem.vue
+++ b/src/components/FormItem.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div>
     <Label class="flex items-center">
-      <span class="mr-4 w-[150px] text-right font-bold min-h-4 flex-shrink-0" :class="{ required: props.required }">
+      <span class="mr-4 min-h-4 w-[150px] flex-shrink-0 text-right font-bold" :class="{ required: props.required }">
         {{ props.label }}
       </span>
       <slot />
diff --git a/src/components/ui/alert/Alert.vue b/src/components/ui/alert/Alert.vue
index 964d61d..3547e55 100644
--- a/src/components/ui/alert/Alert.vue
+++ b/src/components/ui/alert/Alert.vue
@@ -4,8 +4,8 @@ import { cn } from '@/lib/utils'
 import { type AlertVariants, alertVariants } from '.'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
-  variant?: AlertVariants['variant']
+  class?: HTMLAttributes[`class`]
+  variant?: AlertVariants[`variant`]
 }>()
 </script>
 
diff --git a/src/components/ui/alert/AlertDescription.vue b/src/components/ui/alert/AlertDescription.vue
index 2971a87..5d3e4e2 100644
--- a/src/components/ui/alert/AlertDescription.vue
+++ b/src/components/ui/alert/AlertDescription.vue
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes[`class`]
 }>()
 </script>
 
diff --git a/src/components/ui/alert/AlertTitle.vue b/src/components/ui/alert/AlertTitle.vue
index e28dd37..5936ee0 100644
--- a/src/components/ui/alert/AlertTitle.vue
+++ b/src/components/ui/alert/AlertTitle.vue
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes[`class`]
 }>()
 </script>
 
diff --git a/src/components/ui/alert/index.ts b/src/components/ui/alert/index.ts
index d608673..1994a3b 100644
--- a/src/components/ui/alert/index.ts
+++ b/src/components/ui/alert/index.ts
@@ -5,17 +5,17 @@ export { default as AlertDescription } from './AlertDescription.vue'
 export { default as AlertTitle } from './AlertTitle.vue'
 
 export const alertVariants = cva(
-  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  `relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground`,
   {
     variants: {
       variant: {
-        default: 'bg-background text-foreground',
+        default: `bg-background text-foreground`,
         destructive:
-          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+          `border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive`,
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: `default`,
     },
   },
 )
diff --git a/src/components/ui/label/Label.vue b/src/components/ui/label/Label.vue
index 5ad1568..699fc8d 100644
--- a/src/components/ui/label/Label.vue
+++ b/src/components/ui/label/Label.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import { Label, type LabelProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<LabelProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/number-field/NumberField.vue b/src/components/ui/number-field/NumberField.vue
index 3c7db46..a38f077 100644
--- a/src/components/ui/number-field/NumberField.vue
+++ b/src/components/ui/number-field/NumberField.vue
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils'
 import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<NumberFieldRootEmits>()
 
 const delegatedProps = computed(() => {
diff --git a/src/components/ui/number-field/NumberFieldContent.vue b/src/components/ui/number-field/NumberFieldContent.vue
index 2cde64c..ea609ce 100644
--- a/src/components/ui/number-field/NumberFieldContent.vue
+++ b/src/components/ui/number-field/NumberFieldContent.vue
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes[`class`]
 }>()
 </script>
 
diff --git a/src/components/ui/number-field/NumberFieldDecrement.vue b/src/components/ui/number-field/NumberFieldDecrement.vue
index bbfc5bd..992c99c 100644
--- a/src/components/ui/number-field/NumberFieldDecrement.vue
+++ b/src/components/ui/number-field/NumberFieldDecrement.vue
@@ -5,7 +5,7 @@ import { Minus } from 'lucide-vue-next'
 import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/number-field/NumberFieldIncrement.vue b/src/components/ui/number-field/NumberFieldIncrement.vue
index be1417e..158085d 100644
--- a/src/components/ui/number-field/NumberFieldIncrement.vue
+++ b/src/components/ui/number-field/NumberFieldIncrement.vue
@@ -5,7 +5,7 @@ import { Plus } from 'lucide-vue-next'
 import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/number-field/NumberFieldInput.vue b/src/components/ui/number-field/NumberFieldInput.vue
index f1c1f03..8261aae 100644
--- a/src/components/ui/number-field/NumberFieldInput.vue
+++ b/src/components/ui/number-field/NumberFieldInput.vue
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils'
 import { NumberFieldInput } from 'radix-vue'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes[`class`]
 }>()
 </script>
 
diff --git a/src/components/ui/switch/Switch.vue b/src/components/ui/switch/Switch.vue
index 728963c..50dc862 100644
--- a/src/components/ui/switch/Switch.vue
+++ b/src/components/ui/switch/Switch.vue
@@ -9,7 +9,7 @@ import {
 } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes[`class`] }>()
 
 const emits = defineEmits<SwitchRootEmits>()
 
diff --git a/src/components/ui/tabs/TabsContent.vue b/src/components/ui/tabs/TabsContent.vue
index fb59dc9..acaba76 100644
--- a/src/components/ui/tabs/TabsContent.vue
+++ b/src/components/ui/tabs/TabsContent.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import { TabsContent, type TabsContentProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/tabs/TabsList.vue b/src/components/ui/tabs/TabsList.vue
index 9d828af..6d9b057 100644
--- a/src/components/ui/tabs/TabsList.vue
+++ b/src/components/ui/tabs/TabsList.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import { TabsList, type TabsListProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TabsListProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/tabs/TabsTrigger.vue b/src/components/ui/tabs/TabsTrigger.vue
index f4e7f67..5728b6b 100644
--- a/src/components/ui/tabs/TabsTrigger.vue
+++ b/src/components/ui/tabs/TabsTrigger.vue
@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
 import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
 import { computed, type HTMLAttributes } from 'vue'
 
-const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes[`class`] }>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
diff --git a/src/components/ui/textarea/Textarea.vue b/src/components/ui/textarea/Textarea.vue
index 1dee55d..afb1d87 100644
--- a/src/components/ui/textarea/Textarea.vue
+++ b/src/components/ui/textarea/Textarea.vue
@@ -4,16 +4,16 @@ import { cn } from '@/lib/utils'
 import { useVModel } from '@vueuse/core'
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes[`class`]
   defaultValue?: string | number
   modelValue?: string | number
 }>()
 
 const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
+  (e: `update:modelValue`, payload: string | number): void
 }>()
 
-const modelValue = useVModel(props, 'modelValue', emits, {
+const modelValue = useVModel(props, `modelValue`, emits, {
   passive: true,
   defaultValue: props.defaultValue,
 })