diff --git a/src/components/CodemirrorEditor/CssEditor.vue b/src/components/CodemirrorEditor/CssEditor.vue
index cb0838f..0fd15f8 100644
--- a/src/components/CodemirrorEditor/CssEditor.vue
+++ b/src/components/CodemirrorEditor/CssEditor.vue
@@ -1,29 +1,6 @@
 <script setup lang="ts">
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useDisplayStore, useStore } from '@/stores'
 import { Edit3, Plus, X } from 'lucide-vue-next'
-import { ref } from 'vue'
-import { toast } from 'vue-sonner'
 
 const store = useStore()
 const displayStore = useDisplayStore()
diff --git a/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue b/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue
index c6fb9f3..95c30db 100644
--- a/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue
@@ -1,12 +1,4 @@
 <script setup lang="ts">
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-
 const props = defineProps({
   visible: {
     type: Boolean,
diff --git a/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
index eaf703f..b0fc53d 100644
--- a/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue
@@ -1,10 +1,4 @@
 <script setup lang="ts">
-import {
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarTrigger,
-} from '@/components/ui/menubar'
 import { useDisplayStore } from '@/stores'
 import { TableIcon, UploadCloudIcon } from 'lucide-vue-next'
 
diff --git a/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
index def8219..643cd3e 100644
--- a/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useStore } from '@/stores'
 import { Download, FileCode, Upload } from 'lucide-vue-next'
-import { storeToRefs } from 'pinia'
 
 const store = useStore()
 
diff --git a/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
index e705dd9..bbdafc0 100644
--- a/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
-import AboutDialog from './AboutDialog.vue'
-
 const aboutDialogVisible = ref(false)
 </script>
 
diff --git a/src/components/CodemirrorEditor/EditorHeader/PostInfo.vue b/src/components/CodemirrorEditor/EditorHeader/PostInfo.vue
index c5c3412..51a6232 100644
--- a/src/components/CodemirrorEditor/EditorHeader/PostInfo.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/PostInfo.vue
@@ -1,21 +1,6 @@
 <script setup lang="ts">
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Textarea } from '@/components/ui/textarea'
 import { useStore } from '@/stores'
 import { Info } from 'lucide-vue-next'
-import { storeToRefs } from 'pinia'
-
-import { ref } from 'vue'
 
 const store = useStore()
 const { output } = storeToRefs(store)
diff --git a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
index acb31d4..79b0a77 100644
--- a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue
@@ -1,10 +1,4 @@
 <script setup lang="ts">
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from '@/components/ui/hover-card'
-import { MenubarCheckboxItem } from '@/components/ui/menubar'
 import {
   codeBlockThemeOptions,
   colorOptions,
@@ -14,10 +8,7 @@ import {
   themeOptions,
 } from '@/config'
 import { useDisplayStore, useStore } from '@/stores'
-import { storeToRefs } from 'pinia'
-import { ref, useTemplateRef } from 'vue'
 import PickColors, { type Format } from 'vue-pick-colors'
-import StyleOptionMenu from './StyleOptionMenu.vue'
 
 const store = useStore()
 const { toggleShowCssEditor } = useDisplayStore()
diff --git a/src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue b/src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue
index 3344095..540fbe1 100644
--- a/src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue
@@ -1,11 +1,5 @@
 <script setup lang="ts">
 import type { IConfigOption } from '@/types'
-import {
-  MenubarCheckboxItem,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-} from '@/components/ui/menubar'
 
 const props = defineProps<{
   title: string
diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index 9a4240b..4acd54d 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -1,23 +1,5 @@
 <script setup lang="ts">
 import type { Format } from 'vue-pick-colors'
-import { Button } from '@/components/ui/button'
-import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarTrigger,
-} from '@/components/ui/menubar'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
 import { Toaster } from '@/components/ui/sonner'
 import {
   altSign,
@@ -34,16 +16,7 @@ import {
 import { useDisplayStore, useStore } from '@/stores'
 import { mergeCss, solveWeChatImage } from '@/utils'
 import { Moon, PanelLeftClose, PanelLeftOpen, Settings, Sun } from 'lucide-vue-next'
-import { storeToRefs } from 'pinia'
-import { nextTick, ref, useTemplateRef } from 'vue'
 import PickColors from 'vue-pick-colors'
-import { toast } from 'vue-sonner'
-
-import EditDropdown from './EditDropdown.vue'
-import FileDropdown from './FileDropdown.vue'
-import HelpDropdown from './HelpDropdown.vue'
-import PostInfo from './PostInfo.vue'
-import StyleDropdown from './StyleDropdown.vue'
 
 const emit = defineEmits([`addFormat`, `formatContent`, `startCopy`, `endCopy`])
 
@@ -184,7 +157,7 @@ function customStyle() {
   }, 50)
 }
 
-const pickColorsContainer = useTemplateRef<HTMLElement | undefined>('pickColorsContainer')
+const pickColorsContainer = useTemplateRef<HTMLElement | undefined>(`pickColorsContainer`)
 const format = ref<Format>(`rgb`)
 const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
 </script>
@@ -290,13 +263,13 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
             <h2>自定义主题色</h2>
             <div ref="pickColorsContainer">
               <PickColors
+                v-if="pickColorsContainer"
                 v-model:value="primaryColor"
-                show-alpha
-                :format="format" :format-options="formatOptions"
+                show-alpha :format="format"
+                :format-options="formatOptions"
                 :theme="store.isDark ? 'dark' : 'light'"
                 :popup-container="pickColorsContainer"
                 @change="store.colorChanged"
-                v-if="pickColorsContainer"
               />
             </div>
           </div>
diff --git a/src/components/CodemirrorEditor/InsertFormDialog.vue b/src/components/CodemirrorEditor/InsertFormDialog.vue
index 66c90ed..9a326cf 100644
--- a/src/components/CodemirrorEditor/InsertFormDialog.vue
+++ b/src/components/CodemirrorEditor/InsertFormDialog.vue
@@ -1,23 +1,6 @@
 <script setup lang="ts">
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Label } from '@/components/ui/label'
-import {
-  NumberField,
-  NumberFieldContent,
-  NumberFieldDecrement,
-  NumberFieldIncrement,
-  NumberFieldInput,
-} from '@/components/ui/number-field'
 import { useDisplayStore, useStore } from '@/stores'
-
 import { createTable } from '@/utils'
-import { ref, toRaw } from 'vue'
 
 const store = useStore()
 const displayStore = useDisplayStore()
diff --git a/src/components/CodemirrorEditor/PostSlider.vue b/src/components/CodemirrorEditor/PostSlider.vue
index a0b7263..d76d976 100644
--- a/src/components/CodemirrorEditor/PostSlider.vue
+++ b/src/components/CodemirrorEditor/PostSlider.vue
@@ -1,35 +1,6 @@
 <script setup lang="ts">
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Input } from '@/components/ui/input'
 import { useStore } from '@/stores'
 import { Edit3, Ellipsis, Plus, Trash } from 'lucide-vue-next'
-import { ref, watch } from 'vue'
-import { toast } from 'vue-sonner'
 
 const store = useStore()
 
diff --git a/src/components/CodemirrorEditor/UploadImgDialog.vue b/src/components/CodemirrorEditor/UploadImgDialog.vue
index 61f0155..c9c52b9 100644
--- a/src/components/CodemirrorEditor/UploadImgDialog.vue
+++ b/src/components/CodemirrorEditor/UploadImgDialog.vue
@@ -1,24 +1,7 @@
 <script setup lang="ts">
-import CustomUploadForm from '@/components/CustomUploadForm.vue'
-import FormItem from '@/components/FormItem.vue'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { Switch } from '@/components/ui/switch'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useDisplayStore } from '@/stores'
 import { checkImage } from '@/utils'
-import { useFileDialog } from '@vueuse/core'
 import { UploadCloud } from 'lucide-vue-next'
-import { onBeforeMount, ref } from 'vue'
-import { toast } from 'vue-sonner'
 
 const emit = defineEmits([`uploadImage`])
 
diff --git a/src/components/CustomUploadForm.vue b/src/components/CustomUploadForm.vue
index ccb8852..3444b23 100644
--- a/src/components/CustomUploadForm.vue
+++ b/src/components/CustomUploadForm.vue
@@ -1,10 +1,7 @@
 <script setup lang='ts'>
 import { useStore } from '@/stores'
 import { removeLeft } from '@/utils'
-import { useLocalStorage } from '@vueuse/core'
 import CodeMirror from 'codemirror'
-import { markRaw, nextTick, onMounted, ref, useTemplateRef } from 'vue'
-import { toast } from 'vue-sonner'
 
 const store = useStore()
 
diff --git a/src/components/FormItem.vue b/src/components/FormItem.vue
index 62ff57b..a550288 100644
--- a/src/components/FormItem.vue
+++ b/src/components/FormItem.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { Label } from '@/components/ui/label'
-
 const props = defineProps<{
   label?: string
   required?: boolean
diff --git a/src/components/RunLoading.vue b/src/components/RunLoading.vue
index 1ad7e3d..9140521 100644
--- a/src/components/RunLoading.vue
+++ b/src/components/RunLoading.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-
 const loading = ref(true)
 
 onMounted(() => {
diff --git a/src/stores/index.ts b/src/stores/index.ts
index 3c79c74..c3673cb 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -3,13 +3,9 @@ import DEFAULT_CSS_CONTENT from '@/assets/example/theme-css.txt?raw'
 import { altKey, codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, legendOptions, shiftKey, themeMap, themeOptions } from '@/config'
 import { addPrefix, css2json, customCssWithTemplate, customizeTheme, downloadMD, exportHTML, formatDoc } from '@/utils'
 import { initRenderer } from '@/utils/renderer'
-import { useDark, useStorage, useToggle } from '@vueuse/core'
 
 import CodeMirror from 'codemirror'
 import { marked } from 'marked'
-import { defineStore } from 'pinia'
-import { computed, markRaw, onMounted, ref, toRaw, watch } from 'vue'
-import { toast } from 'vue-sonner'
 
 export const useStore = defineStore(`store`, () => {
   // 是否开启深色模式
diff --git a/src/utils/toast/index.ts b/src/utils/toast/index.ts
new file mode 100644
index 0000000..36cf931
--- /dev/null
+++ b/src/utils/toast/index.ts
@@ -0,0 +1 @@
+export { toast } from 'vue-sonner'
diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue
index d7e55c5..ac75dce 100644
--- a/src/views/CodemirrorEditor.vue
+++ b/src/views/CodemirrorEditor.vue
@@ -1,30 +1,5 @@
 <script setup lang="ts">
 import type { ComponentPublicInstance } from 'vue'
-import CssEditor from '@/components/CodemirrorEditor/CssEditor.vue'
-import EditorHeader from '@/components/CodemirrorEditor/EditorHeader/index.vue'
-import InsertFormDialog from '@/components/CodemirrorEditor/InsertFormDialog.vue'
-import PostSlider from '@/components/CodemirrorEditor/PostSlider.vue'
-import UploadImgDialog from '@/components/CodemirrorEditor/UploadImgDialog.vue'
-import RunLoading from '@/components/RunLoading.vue'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuTrigger,
-} from '@/components/ui/context-menu'
 import { altKey, altSign, ctrlKey, shiftKey, shiftSign } from '@/config'
 import { useDisplayStore, useStore } from '@/stores'
 import {
@@ -34,9 +9,6 @@ import {
 } from '@/utils'
 import fileApi from '@/utils/file'
 import CodeMirror from 'codemirror'
-import { storeToRefs } from 'pinia'
-import { onMounted, ref, toRaw, watch } from 'vue'
-import { toast } from 'vue-sonner'
 
 const store = useStore()
 const displayStore = useDisplayStore()
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 5498839..45c42be 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -27,5 +27,5 @@
     "isolatedModules": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "components.d.ts", "auto-imports.d.ts"]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 7c36247..ade0817 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,7 +32,15 @@ export default defineConfig({
       filename: `stats.html`,
     }),
     AutoImport({
-      resolvers: [],
+      imports: [
+        `vue`,
+        `pinia`,
+        `@vueuse/core`,
+      ],
+      dirs: [
+        `./src/stores`,
+        `./src/utils/toast`,
+      ],
     }),
     Components({
       resolvers: [],