Merge 3363aff617 into e8b2c18c6d

index.html

@@ -93,7 +93,7 @@
       }
     </script>
     <script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
   <script src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/wechatsync/article-syncjs@latest/dist/main.js"></script>
 </html>

package.json

@@ -8,7 +8,8 @@
     "dev": "vite --host",
     "build": "run-p type-check \"build:only {@}\" --",
     "build:only": "vite build",
-    "build:h5-netlify": "cross-env SERVER_ENV=NETLIFY vite build",
+    "build:h5-netlify": "run-p type-check \"build:h5-netlify:only {@}\" --",
+    "build:h5-netlify:only": "cross-env SERVER_ENV=NETLIFY vite build",
     "build:cli": "npm run build && npm run shx rm -rf md-cli/dist && npm run shx rm -rf dist/**/*.map && npm run shx cp -r dist md-cli/ && cd md-cli && npm run pack",
     "build:analyze": "cross-env ANALYZE=true vite build",
     "preview": "npm run build && vite preview",
@@ -19,8 +20,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "@vueuse/core": "^11.0.1",
+    "@vueuse/core": "^11.1.0",
-    "axios": "^1.7.4",
+    "axios": "^1.7.7",
     "buffer-from": "^1.1.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -29,54 +30,54 @@
     "cos-js-sdk-v5": "^1.8.4",
     "crypto-js": "^4.2.0",
     "csstype": "^3.1.3",
-    "element-plus": "^2.8.0",
+    "element-plus": "^2.8.3",
-    "es-toolkit": "^1.16.0",
+    "es-toolkit": "^1.19.0",
     "form-data": "4.0.0",
     "highlight.js": "^11.10.0",
-    "juice": "^8.0.0",
+    "juice": "^11.0.0",
-    "lucide-vue-next": "^0.428.0",
+    "lucide-vue-next": "^0.441.0",
-    "marked": "^14.1.1",
+    "marked": "^14.1.2",
-    "mermaid": "^11.1.0",
+    "mermaid": "^11.2.1",
     "minio": "7.1.3",
     "node-fetch": "^3.3.2",
     "pinia": "^2.2.2",
     "qiniu-js": "^3.4.2",
-    "radix-vue": "^1.9.4",
+    "radix-vue": "^1.9.5",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "tiny-oss": "^0.5.1",
     "uuid": "^10.0.0",
-    "vue": "^3.4.38"
+    "vue": "^3.5.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.26.0",
+    "@antfu/eslint-config": "3.6.2",
     "@types/buffer-from": "^1.1.3",
     "@types/codemirror": "^5.60.15",
     "@types/crypto-js": "^4.2.2",
-    "@types/node": "^22.4.1",
+    "@types/node": "^22.5.5",
     "@types/uuid": "^10.0.0",
-    "@unocss/eslint-plugin": "^0.62.2",
+    "@unocss/eslint-plugin": "^0.62.4",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue": "^5.1.3",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
-    "eslint": "^9.9.0",
+    "eslint": "^9.10.0",
     "eslint-plugin-format": "^0.1.2",
     "less": "^4.2.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "rollup-plugin-visualizer": "^5.12.0",
     "shx": "^0.3.4",
     "simple-git-hooks": "^2.11.1",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.12",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
-    "unocss": "^0.62.2",
+    "unocss": "^0.62.4",
-    "unplugin-auto-import": "^0.18.2",
+    "unplugin-auto-import": "^0.18.3",
     "unplugin-vue-components": "^0.27.4",
-    "vite": "^5.4.2",
+    "vite": "^5.4.6",
     "vite-plugin-node-polyfills": "^0.22.0",
-    "vite-plugin-vue-devtools": "^7.3.9",
+    "vite-plugin-vue-devtools": "^7.4.5",
-    "vue-tsc": "^2.0.29"
+    "vue-tsc": "^2.1.6"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"

src/App.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import CodemirrorEditor from '@/views/CodemirrorEditor.vue'
 </script>
 

src/assets/less/app.less

@@ -94,12 +94,3 @@ section {
   display: table;
   width: 100% !important;
 }
-
-/* ele ui */
-.el-form-item {
-  margin-bottom: 0 !important;
-}
-
-.el-tooltip {
-  cursor: pointer;
-}

src/components/CodemirrorEditor/CssEditor.vue

@@ -1,9 +1,10 @@
-<script setup>
+<script setup lang="ts">
+import { useDisplayStore, useStore } from '@/stores'
+
 import { ElMessage, ElMessageBox } from 'element-plus'
 
-import { useStore } from '@/stores'
-
 const store = useStore()
+const displayStore = useDisplayStore()
 
 function editTabName() {
   ElMessageBox.prompt(`请输入新的方案名称`, `编辑方案名称`, {
@@ -23,7 +24,7 @@ function editTabName() {
     })
 }
 
-function handleTabsEdit(targetName, action) {
+function handleTabsEdit(targetName: string, action: string) {
   if (action === `add`) {
     ElMessageBox.prompt(`请输入方案名称`, `新建自定义 CSS`, {
       confirmButtonText: `确认`,
@@ -67,7 +68,7 @@ function handleTabsEdit(targetName, action) {
 
 <template>
   <transition enter-active-class="bounceInRight">
-    <el-col v-show="store.isShowCssEditor" :span="8" class="cssEditor-wrapper order-1 h-full flex flex-col border-l-1">
+    <el-col v-show="displayStore.isShowCssEditor" :span="8" class="cssEditor-wrapper order-1 h-full flex flex-col border-l-1">
       <el-tabs
         v-model="store.cssContentConfig.active"
         type="border-card"
@@ -86,7 +87,7 @@ function handleTabsEdit(targetName, action) {
             <el-icon
               v-if="store.cssContentConfig.active === item.name"
               class="ml-1"
-              @click="editTabName(item.name)"
+              @click="editTabName()"
             >
               <ElIconEditPen />
             </el-icon>
@@ -142,7 +143,7 @@ function handleTabsEdit(targetName, action) {
 }
 
 :deep(.el-tabs__content) {
-  padding: 0;
+  padding: 0 !important;
 }
 
 // 当 tab 为激活状态时，隐藏关闭按钮

src/components/CodemirrorEditor/EditorHeader/AboutDialog.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import {
   Dialog,
   DialogContent,
@@ -16,7 +16,7 @@ const props = defineProps({
 
 const emit = defineEmits([`close`])
 
-function onUpdate(val) {
+function onUpdate(val: boolean) {
   if (!val) {
     emit(`close`)
   }
@@ -28,7 +28,7 @@ const links = [
   { label: `GitCode 仓库`, url: `https://gitcode.com/doocs/md` },
 ]
 
-function onRedirect(url) {
+function onRedirect(url: string) {
   window.open(url, `_blank`)
 }
 </script>

src/components/CodemirrorEditor/EditorHeader/EditDropdown.vue

@@ -1,25 +1,28 @@
-<script setup>
+<script setup lang="ts">
-import { useStore } from '@/stores'
+import {
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarTrigger,
+} from '@/components/ui/menubar'
+import { useDisplayStore } from '@/stores'
+import { TableIcon, UploadCloudIcon } from 'lucide-vue-next'
 
-const store = useStore()
+const { toggleShowInsertFormDialog, toggleShowUploadImgDialog } = useDisplayStore()
-
-const { toggleShowInsertFormDialog, toggleShowUploadImgDialog } = store
 </script>
 
 <template>
   <MenubarMenu>
-    <MenubarTrigger> 编辑 </MenubarTrigger>
+    <MenubarTrigger>
+      编辑
+    </MenubarTrigger>
     <MenubarContent align="start">
       <MenubarItem @click="toggleShowUploadImgDialog()">
-        <el-icon class="mr-2 h-4 w-4">
+        <UploadCloudIcon class="mr-2 h-4 w-4" />
-          <ElIconUpload />
-        </el-icon>
         上传图片
       </MenubarItem>
       <MenubarItem @click="toggleShowInsertFormDialog()">
-        <el-icon class="mr-2 h-4 w-4">
+        <TableIcon class="mr-2 h-4 w-4" />
-          <ElIconGrid />
-        </el-icon>
         插入表格
       </MenubarItem>
     </MenubarContent>

src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue

@@ -1,8 +1,8 @@
-<script setup>
+<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-
 import { useStore } from '@/stores'
 
+import { storeToRefs } from 'pinia'
+
 const store = useStore()
 
 const {

src/components/CodemirrorEditor/EditorHeader/HelpDropdown.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue'
 
 import AboutDialog from './AboutDialog.vue'

src/components/CodemirrorEditor/EditorHeader/PostInfo.vue

@@ -1,6 +1,4 @@
-<script setup>
+<script setup lang="ts">
-import { ref } from 'vue'
-import { storeToRefs } from 'pinia'
 import {
   Dialog,
   DialogContent,
@@ -8,30 +6,34 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
-
 import { useStore } from '@/stores'
+import { storeToRefs } from 'pinia'
+
+import { ref } from 'vue'
 
 const store = useStore()
 const { output } = storeToRefs(store)
 
 const dialogVisible = ref(false)
 
-const form = ref({
+const form = ref<any>({
   title: ``,
   desc: ``,
   thumb: ``,
   content: ``,
+  auto: {},
 })
 
 function prePost() {
   let auto = {}
   try {
     auto = {
-      thumb: document.querySelector(`#output img`)?.src,
+      thumb: document.querySelector<HTMLImageElement>(`#output img`)?.src,
       title: [1, 2, 3, 4, 5, 6]
-        .map(h => document.querySelector(`#output h${h}`))
+        .map(h => document.querySelector(`#output h${h}`)!)
-        .filter(h => h)[0].textContent,
+        .filter(h => h)[0]
-      desc: document.querySelector(`#output p`).textContent,
+        .textContent,
+      desc: document.querySelector(`#output p`)!.textContent,
       content: output.value,
     }
   }
@@ -45,10 +47,16 @@ function prePost() {
   dialogVisible.value = true
 }
 
+declare global {
+  interface Window {
+    syncPost: (data: { thumb: string, title: string, desc: string, content: string }) => void
+  }
+}
+
 function post() {
-  dialogVisible.value = false
+  dialogVisible.value = false;
   // 使用 window.$syncer 可以检测是否安装插件
-  window.syncPost({
+  (window.syncPost)({
     thumb: form.value.thumb || form.value.auto.thumb,
     title: form.value.title || form.value.auto.title,
     desc: form.value.desc || form.value.auto.desc,
@@ -56,7 +64,7 @@ function post() {
   })
 }
 
-function onUpdate(val) {
+function onUpdate(val: boolean) {
   if (!val) {
     dialogVisible.value = false
   }

src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue

@@ -1,15 +1,9 @@
-<script setup>
+<script setup lang="ts">
-import { nextTick, ref } from 'vue'
-import { storeToRefs } from 'pinia'
-
-import StyleOptionMenu from './StyleOptionMenu.vue'
-
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from '@/components/ui/hover-card'
-
 import {
   codeBlockThemeOptions,
   colorOptions,
@@ -18,9 +12,14 @@ import {
   legendOptions,
   themeOptions,
 } from '@/config'
-import { useStore } from '@/stores'
+
+import { useDisplayStore, useStore } from '@/stores'
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import StyleOptionMenu from './StyleOptionMenu.vue'
 
 const store = useStore()
+const { toggleShowCssEditor } = useDisplayStore()
 
 const {
   theme,
@@ -42,25 +41,19 @@ const {
   codeBlockThemeChanged,
   legendChanged,
   macCodeBlockChanged,
-  toggleShowCssEditor,
 } = store
 
-const colorPicker = ref(null)
+const colorPicker = ref<HTMLElement & { show: () => void } | null>(null)
 
 function showPicker() {
-  colorPicker.value.show()
+  colorPicker.value?.show()
 }
 
 // 自定义CSS样式
 function customStyle() {
   toggleShowCssEditor()
-  nextTick(() => {
-    if (!cssEditor.value) {
-      cssEditor.value.refresh()
-    }
-  })
   setTimeout(() => {
-    cssEditor.value.refresh()
+    cssEditor.value!.refresh()
   }, 50)
 }
 </script>
@@ -114,7 +107,7 @@ function customStyle() {
             自定义主题色
           </HoverCardTrigger>
           <HoverCardContent side="right" class="w-min">
-            <el-color-picker
+            <ElColorPicker
               ref="colorPicker"
               v-model="primaryColor"
               :teleported="false"

src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue

@@ -1,4 +1,5 @@
-<script setup>
+<script setup lang="ts">
+import type { IConfigOption } from '@/types'
 import {
   MenubarItem,
   MenubarSub,
@@ -6,26 +7,14 @@ import {
   MenubarSubTrigger,
 } from '@/components/ui/menubar'
 
-const props = defineProps({
+const props = defineProps<{
-  title: {
+  title: string
-    type: String,
+  options: IConfigOption[]
-    required: true,
+  current: string
-  },
+  change: <T>(val: T) => void
-  options: {
+}>()
-    type: Array,
-    required: true,
-  },
-  current: {
-    type: String,
-    required: true,
-  },
-  change: {
-    type: Function,
-    required: true,
-  },
-})
 
-function setStyle(title, value) {
+function setStyle(title: string, value: string) {
   switch (title) {
     case `字体`:
       return { fontFamily: value }

src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -1,14 +1,23 @@
-<script setup>
+<script setup lang="ts">
-import { nextTick } from 'vue'
+import { Button } from '@/components/ui/button'
-import { storeToRefs } from 'pinia'
+import {
-import { ElNotification } from 'element-plus'
+  Menubar,
-import { Moon, Paintbrush, Sun } from 'lucide-vue-next'
+  MenubarContent,
+  MenubarItem,
+  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 PostInfo from './PostInfo.vue'
-import FileDropdown from './FileDropdown.vue'
-import HelpDropdown from './HelpDropdown.vue'
-import StyleDropdown from './StyleDropdown.vue'
-import EditDropdown from './EditDropdown.vue'
 import {
   altSign,
   codeBlockThemeOptions,
@@ -21,29 +30,20 @@ import {
   shiftSign,
   themeOptions,
 } from '@/config'
-
+import { useDisplayStore, useStore } from '@/stores'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import {
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarTrigger,
-} from '@/components/ui/menubar'
-
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Button } from '@/components/ui/button'
-
 import { mergeCss, solveWeChatImage } from '@/utils'
-import { useStore } from '@/stores'
+import { ElNotification } from 'element-plus'
+import { Moon, Paintbrush, Sun } from 'lucide-vue-next'
+import { storeToRefs } from 'pinia'
+
+import { nextTick } from 'vue'
+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`])
 
@@ -78,9 +78,10 @@ const formatItems = [
     kbd: [altSign, shiftSign, `F`],
     emitArgs: [`formatContent`],
   },
-]
+] as const
 
 const store = useStore()
+const displayStore = useDisplayStore()
 
 const { isDark, isCiteStatus, output, primaryColor } = storeToRefs(store)
 
@@ -90,7 +91,7 @@ const { toggleDark, editorRefresh, citeStatusChanged } = store
 function copy() {
   emit(`startCopy`)
   setTimeout(() => {
-    function modifyHtmlStructure(htmlString) {
+    function modifyHtmlStructure(htmlString: string) {
       // 创建一个 div 元素来暂存原始 HTML 字符串
       const tempDiv = document.createElement(`div`)
       tempDiv.innerHTML = htmlString
@@ -98,7 +99,7 @@ function copy() {
       const originalItems = tempDiv.querySelectorAll(`li > ul, li > ol`)
 
       originalItems.forEach((originalItem) => {
-        originalItem.parentElement.insertAdjacentElement(`afterend`, originalItem)
+        originalItem.parentElement!.insertAdjacentElement(`afterend`, originalItem)
       })
 
       // 返回修改后的 HTML 字符串
@@ -114,7 +115,7 @@ function copy() {
     nextTick(() => {
       solveWeChatImage()
 
-      const clipboardDiv = document.getElementById(`output`)
+      const clipboardDiv = document.getElementById(`output`)!
       clipboardDiv.innerHTML = mergeCss(clipboardDiv.innerHTML)
       clipboardDiv.innerHTML = modifyHtmlStructure(clipboardDiv.innerHTML)
       clipboardDiv.innerHTML = clipboardDiv.innerHTML
@@ -125,14 +126,14 @@ function copy() {
         .replaceAll(`var(--md-primary-color)`, primaryColor.value)
         .replaceAll(/--md-primary-color:.+?;/g, ``)
       clipboardDiv.focus()
-      window.getSelection().removeAllRanges()
+      window.getSelection()!.removeAllRanges()
       const range = document.createRange()
 
-      range.setStartBefore(clipboardDiv.firstChild)
+      range.setStartBefore(clipboardDiv.firstChild!)
-      range.setEndAfter(clipboardDiv.lastChild)
+      range.setEndAfter(clipboardDiv.lastChild!)
-      window.getSelection().addRange(range)
+      window.getSelection()!.addRange(range)
       document.execCommand(`copy`)
-      window.getSelection().removeAllRanges()
+      window.getSelection()!.removeAllRanges()
       clipboardDiv.innerHTML = output.value
 
       if (isBeforeDark) {
@@ -153,6 +154,13 @@ function copy() {
     })
   }, 350)
 }
+
+function customStyle() {
+  displayStore.toggleShowCssEditor()
+  setTimeout(() => {
+    store.cssEditor!.refresh()
+  }, 50)
+}
 </script>
 
 <template>
@@ -165,8 +173,8 @@ function copy() {
         <MenubarContent class="w-60" align="start">
           <MenubarItem
             v-for="{ label, kbd, emitArgs } in formatItems"
-            :key="kbd"
+            :key="label"
-            @click="$emit(...emitArgs)"
+            @click="emitArgs[0] === 'addFormat' ? $emit(emitArgs[0], emitArgs[1]) : $emit(emitArgs[0])"
           >
             <el-icon class="mr-2 h-4 w-4" />
             {{ label }}
@@ -371,6 +379,31 @@ function copy() {
               </Button>
             </div>
           </div>
+          <div class="space-y-2">
+            <h2>自定义 CSS 面板</h2>
+            <div class="grid grid-cols-5 justify-items-center gap-2">
+              <Button
+                class="w-full"
+                variant="outline"
+                :class="{
+                  'border-black dark:border-white': displayStore.isShowCssEditor,
+                }"
+                @click="!displayStore.isShowCssEditor && customStyle()"
+              >
+                开启
+              </Button>
+              <Button
+                class="w-full"
+                variant="outline"
+                :class="{
+                  'border-black dark:border-white': !displayStore.isShowCssEditor,
+                }"
+                @click="displayStore.isShowCssEditor && customStyle()"
+              >
+                关闭
+              </Button>
+            </div>
+          </div>
           <div class="space-y-2">
             <h2>编辑区位置</h2>
             <div class="grid grid-cols-5 justify-items-center gap-2">
@@ -421,6 +454,17 @@ function copy() {
               </Button>
             </div>
           </div>
+          <div class="space-y-2">
+            <h2>样式配置</h2>
+            <div>
+              <Button
+                class="w-full"
+                @click="store.resetStyleConfirm()"
+              >
+                重置
+              </Button>
+            </div>
+          </div>
         </div>
       </PopoverContent>
     </Popover>

src/components/CodemirrorEditor/InsertFormDialog.vue

@@ -1,5 +1,4 @@
-<script setup>
+<script setup lang="ts">
-import { ref, toRaw } from 'vue'
 import {
   Dialog,
   DialogContent,
@@ -7,17 +6,19 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog'
+import { useDisplayStore, useStore } from '@/stores'
 
-import { useStore } from '@/stores'
 import { createTable } from '@/utils'
+import { ref, toRaw } from 'vue'
 
 const store = useStore()
+const displayStore = useDisplayStore()
 
-const { toggleShowInsertFormDialog } = store
+const { toggleShowInsertFormDialog } = displayStore
 
 const rowNum = ref(3)
 const colNum = ref(3)
-const tableData = ref({})
+const tableData = ref<Record<string, string>>({})
 
 function resetVal() {
   rowNum.value = 3
@@ -32,12 +33,12 @@ function insertTable() {
     cols: colNum.value,
     data: tableData.value,
   })
-  toRaw(store.editor).replaceSelection(`\n${table}\n`, `end`)
+  toRaw(store.editor!).replaceSelection(`\n${table}\n`, `end`)
   resetVal()
   toggleShowInsertFormDialog()
 }
 
-function onUpdate(val) {
+function onUpdate(val: boolean) {
   if (!val) {
     toggleShowInsertFormDialog(false)
   }
@@ -45,7 +46,7 @@ function onUpdate(val) {
 </script>
 
 <template>
-  <Dialog :open="store.isShowInsertFormDialog" @update:open="onUpdate">
+  <Dialog :open="displayStore.isShowInsertFormDialog" @update:open="onUpdate">
     <DialogContent>
       <DialogHeader>
         <DialogTitle>插入表格</DialogTitle>

src/components/CodemirrorEditor/UploadImgDialog.vue

@@ -1,17 +1,17 @@
-<script setup>
+<script setup lang="ts">
-import { nextTick, onBeforeMount, ref, watch } from 'vue'
-import CodeMirror from 'codemirror/lib/codemirror'
-import { ElMessage } from 'element-plus'
-import { UploadFilled } from '@element-plus/icons-vue'
-
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-
+import { useDisplayStore } from '@/stores'
 import { checkImage, removeLeft } from '@/utils'
-import { useStore } from '@/stores'
+
+import { UploadFilled } from '@element-plus/icons-vue'
+import CodeMirror from 'codemirror'
+
+import { ElMessage } from 'element-plus'
+import { nextTick, onBeforeMount, ref, watch } from 'vue'
 
 const emit = defineEmits([`uploadImage`])
 
-const store = useStore()
+const displayStore = useDisplayStore()
 
 const formGitHub = ref({
   repo: ``,
@@ -50,6 +50,7 @@ const formQiniu = ref({
   bucket: ``,
   domain: ``,
   region: ``,
+  path: ``,
 })
 
 const minioOSS = ref({
@@ -61,7 +62,7 @@ const minioOSS = ref({
   secretKey: ``,
 })
 
-const formCustom = ref({
+const formCustom = ref<{ code: string, editor: CodeMirror.EditorFromTextArea | null }>({
   code:
     localStorage.getItem(`formCustomConfig`)
     || removeLeft(`
@@ -76,7 +77,7 @@ const formCustom = ref({
     errCb(err)
   })
 `).trim(),
-  editor: undefined,
+  editor: null,
 })
 
 const options = [
@@ -116,7 +117,7 @@ const options = [
 
 const imgHost = ref(`default`)
 
-const formCustomElInput = ref(null)
+const formCustomElInput = ref<(HTMLInputElement & { $el: HTMLElement }) | null>(null)
 const activeName = ref(`upload`)
 
 watch(
@@ -124,12 +125,10 @@ watch(
   async (val) => {
     if (val === `formCustom`) {
       nextTick(() => {
-        const textarea = formCustomElInput.value.$el.querySelector(`textarea`)
+        const textarea = formCustomElInput.value!.$el.querySelector(`textarea`)!
-        formCustom.value.editor
+        formCustom.value.editor ||= CodeMirror.fromTextArea(textarea, {
-          = formCustom.value.editor
+          mode: `javascript`,
-          || CodeMirror.fromTextArea(textarea, {
+        })
-            mode: `javascript`,
-          })
         // formCustom.value.editor.setValue(formCustom.value.code)
       })
     }
@@ -141,25 +140,25 @@ watch(
 
 onBeforeMount(() => {
   if (localStorage.getItem(`githubConfig`)) {
-    formGitHub.value = JSON.parse(localStorage.getItem(`githubConfig`))
+    formGitHub.value = JSON.parse(localStorage.getItem(`githubConfig`)!)
   }
   // if (localStorage.getItem(`giteeConfig`)) {
-  //   formGitee.value = JSON.parse(localStorage.getItem(`giteeConfig`))
+  //   formGitee.value = JSON.parse(localStorage.getItem(`giteeConfig`)!)
   // }
   if (localStorage.getItem(`aliOSSConfig`)) {
-    formAliOSS.value = JSON.parse(localStorage.getItem(`aliOSSConfig`))
+    formAliOSS.value = JSON.parse(localStorage.getItem(`aliOSSConfig`)!)
   }
   if (localStorage.getItem(`txCOSConfig`)) {
-    formTxCOS.value = JSON.parse(localStorage.getItem(`txCOSConfig`))
+    formTxCOS.value = JSON.parse(localStorage.getItem(`txCOSConfig`)!)
   }
   if (localStorage.getItem(`qiniuConfig`)) {
-    formQiniu.value = JSON.parse(localStorage.getItem(`qiniuConfig`))
+    formQiniu.value = JSON.parse(localStorage.getItem(`qiniuConfig`)!)
   }
   if (localStorage.getItem(`minioConfig`)) {
-    minioOSS.value = JSON.parse(localStorage.getItem(`minioConfig`))
+    minioOSS.value = JSON.parse(localStorage.getItem(`minioConfig`)!)
   }
   if (localStorage.getItem(`imgHost`)) {
-    imgHost.value = localStorage.getItem(`imgHost`)
+    imgHost.value = localStorage.getItem(`imgHost`)!
   }
 })
 
@@ -251,12 +250,12 @@ function saveQiniuConfiguration() {
 }
 
 function formCustomSave() {
-  const str = formCustom.value.editor.getValue()
+  const str = formCustom.value.editor!.getValue()
   localStorage.setItem(`formCustomConfig`, str)
   ElMessage.success(`保存成功`)
 }
 
-function beforeImageUpload(file) {
+function beforeImageUpload(file: File) {
   // check image
   const checkResult = checkImage(file)
   if (!checkResult.ok) {
@@ -277,13 +276,13 @@ function beforeImageUpload(file) {
   return true
 }
 
-function uploadImage(params) {
+function uploadImage(params: { file: any }) {
   emit(`uploadImage`, params.file)
 }
 </script>
 
 <template>
-  <Dialog v-model:open="store.isShowUploadImgDialog">
+  <Dialog v-model:open="displayStore.isShowUploadImgDialog">
     <DialogContent class="max-w-max">
       <DialogHeader>
         <DialogTitle>本地上传</DialogTitle>

src/components/RunLoading.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { onMounted, ref } from 'vue'
 
 const loading = ref(true)

src/components/ui/button/Button.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { type ButtonVariants, buttonVariants } from '.'
-import { cn } from '@/lib/utils'
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants[`variant`]

src/components/ui/button/index.ts

@@ -1,4 +1,4 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Button } from './Button.vue'
 

src/components/ui/context-menu/ContextMenu.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
 import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
+import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps<ContextMenuRootProps>()
 const emits = defineEmits<ContextMenuRootEmits>()

src/components/ui/context-menu/ContextMenuCheckboxItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
 import {
   ContextMenuCheckboxItem,
   type ContextMenuCheckboxItemEmits,
@@ -7,8 +8,7 @@ import {
   ContextMenuItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<ContextMenuCheckboxItemEmits>()

src/components/ui/context-menu/ContextMenuContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ContextMenuContent,
   type ContextMenuContentEmits,
@@ -7,7 +7,7 @@ import {
   ContextMenuPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<ContextMenuContentEmits>()

src/components/ui/context-menu/ContextMenuItem.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ContextMenuItem,
   type ContextMenuItemEmits,
   type ContextMenuItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes[`class`], inset?: boolean }>()
 const emits = defineEmits<ContextMenuItemEmits>()

src/components/ui/context-menu/ContextMenuLabel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes[`class`], inset?: boolean }>()
 

src/components/ui/context-menu/ContextMenuRadioItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
@@ -7,8 +8,7 @@ import {
   type ContextMenuRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Circle } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()

src/components/ui/context-menu/ContextMenuSeparator.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ContextMenuSeparator,
   type ContextMenuSeparatorProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/context-menu/ContextMenuSubContent.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ContextMenuSubContent,
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()

src/components/ui/context-menu/ContextMenuSubTrigger.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
 import {
   ContextMenuSubTrigger,
   type ContextMenuSubTriggerProps,
   useForwardProps,
 } from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes[`class`], inset?: boolean }>()
 

src/components/ui/context-menu/index.ts

@@ -1,14 +1,14 @@
 export { default as ContextMenu } from './ContextMenu.vue'
-export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
 export { default as ContextMenuContent } from './ContextMenuContent.vue'
 export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
-export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
 export { default as ContextMenuItem } from './ContextMenuItem.vue'
-export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
-export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
-export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
-export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
 export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
 export { default as ContextMenuSub } from './ContextMenuSub.vue'
-export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
 export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'

src/components/ui/dialog/DialogContent.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
@@ -9,8 +10,7 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { X } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<DialogContentEmits>()

src/components/ui/dialog/DialogDescription.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/dialog/DialogScrollContent.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
@@ -9,8 +10,7 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { X } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<DialogContentEmits>()

src/components/ui/dialog/DialogTitle.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/dialog/index.ts

@@ -1,9 +1,9 @@
 export { default as Dialog } from './Dialog.vue'
 export { default as DialogClose } from './DialogClose.vue'
-export { default as DialogTrigger } from './DialogTrigger.vue'
-export { default as DialogHeader } from './DialogHeader.vue'
-export { default as DialogTitle } from './DialogTitle.vue'
-export { default as DialogDescription } from './DialogDescription.vue'
 export { default as DialogContent } from './DialogContent.vue'
-export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
 export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'

src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
 import {
   DropdownMenuCheckboxItem,
   type DropdownMenuCheckboxItemEmits,
@@ -7,8 +8,7 @@ import {
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()

src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   DropdownMenuContent,
   type DropdownMenuContentEmits,
@@ -7,7 +7,7 @@ import {
   DropdownMenuPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: HTMLAttributes[`class`] }>(),

src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes[`class`], inset?: boolean }>()
 

src/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes[`class`], inset?: boolean }>()
 

src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
@@ -7,8 +8,7 @@ import {
   type DropdownMenuRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Circle } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   DropdownMenuSeparator,
   type DropdownMenuSeparatorProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSeparatorProps & {
   class?: HTMLAttributes[`class`]

src/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   DropdownMenuSubContent,
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()

src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
 import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
   useForwardProps,
 } from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/dropdown-menu/index.ts

@@ -1,16 +1,16 @@
-export { DropdownMenuPortal } from 'radix-vue'
-
 export { default as DropdownMenu } from './DropdownMenu.vue'
-export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
 export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
 export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
-export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
 export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
-export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
-export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
-export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
-export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
 export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
 export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
-export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
 export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { DropdownMenuPortal } from 'radix-vue'

src/components/ui/hover-card/HoverCardContent.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   HoverCardContent,
   type HoverCardContentProps,
   HoverCardPortal,
   useForwardProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
   defineProps<HoverCardContentProps & { class?: HTMLAttributes[`class`] }>(),

src/components/ui/hover-card/index.ts

@@ -1,3 +1,3 @@
 export { default as HoverCard } from './HoverCard.vue'
-export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
 export { default as HoverCardContent } from './HoverCardContent.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'

src/components/ui/menubar/Menubar.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   MenubarRoot,
   type MenubarRootEmits,
   type MenubarRootProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarRootProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<MenubarRootEmits>()

src/components/ui/menubar/MenubarCheckboxItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
 import {
   MenubarCheckboxItem,
   type MenubarCheckboxItemEmits,
@@ -7,8 +8,7 @@ import {
   MenubarItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<MenubarCheckboxItemEmits>()

src/components/ui/menubar/MenubarContent.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   MenubarContent,
   type MenubarContentProps,
   MenubarPortal,
   useForwardProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
   defineProps<MenubarContentProps & { class?: HTMLAttributes[`class`] }>(),

src/components/ui/menubar/MenubarItem.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   MenubarItem,
   type MenubarItemEmits,
   type MenubarItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarItemProps & { class?: HTMLAttributes[`class`], inset?: boolean }>()
 

src/components/ui/menubar/MenubarLabel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
 
 const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes[`class`], inset?: boolean }>()
 </script>

src/components/ui/menubar/MenubarRadioItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
 import {
   MenubarItemIndicator,
   MenubarRadioItem,
@@ -7,8 +8,7 @@ import {
   type MenubarRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Circle } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes[`class`] }>()
 const emits = defineEmits<MenubarRadioItemEmits>()

src/components/ui/menubar/MenubarSeparator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/menubar/MenubarSubContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   MenubarPortal,
   MenubarSubContent,
@@ -7,7 +7,7 @@ import {
   type MenubarSubContentProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/menubar/MenubarSubTrigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes[`class`], inset?: boolean }>()
 

src/components/ui/menubar/MenubarTrigger.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/menubar/index.ts

@@ -1,15 +1,15 @@
 export { default as Menubar } from './Menubar.vue'
-export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
 export { default as MenubarContent } from './MenubarContent.vue'
 export { default as MenubarGroup } from './MenubarGroup.vue'
+export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarLabel } from './MenubarLabel.vue'
 export { default as MenubarMenu } from './MenubarMenu.vue'
 export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
 export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
-export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
 export { default as MenubarSeparator } from './MenubarSeparator.vue'
+export { default as MenubarShortcut } from './MenubarShortcut.vue'
 export { default as MenubarSub } from './MenubarSub.vue'
 export { default as MenubarSubContent } from './MenubarSubContent.vue'
 export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
 export { default as MenubarTrigger } from './MenubarTrigger.vue'
-export { default as MenubarShortcut } from './MenubarShortcut.vue'
-export { default as MenubarLabel } from './MenubarLabel.vue'

src/components/ui/popover/Popover.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
 import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps<PopoverRootProps>()
 const emits = defineEmits<PopoverRootEmits>()

src/components/ui/popover/PopoverContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   PopoverContent,
   type PopoverContentEmits,
@@ -7,7 +7,7 @@ import {
   PopoverPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
   inheritAttrs: false,

src/components/ui/popover/index.ts

@@ -1,3 +1,3 @@
 export { default as Popover } from './Popover.vue'
-export { default as PopoverTrigger } from './PopoverTrigger.vue'
 export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'

src/components/ui/select/SelectContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   SelectContent,
   type SelectContentEmits,
@@ -8,8 +8,8 @@ import {
   SelectViewport,
   useForwardPropsEmits,
 } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
-import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,

src/components/ui/select/SelectGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectGroup, type SelectGroupProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectGroupProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/select/SelectItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
 import {
   SelectItem,
   SelectItemIndicator,
@@ -7,8 +8,7 @@ import {
   SelectItemText,
   useForwardProps,
 } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<SelectItemProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/select/SelectLabel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { SelectLabel, type SelectLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
 
 const props = defineProps<SelectLabelProps & { class?: HTMLAttributes[`class`] }>()
 </script>

src/components/ui/select/SelectScrollDownButton.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/select/SelectScrollUpButton.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
-import { ChevronUp } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { ChevronUp } from 'lucide-vue-next'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/select/SelectSeparator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/select/SelectTrigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes[`class`] }>()
 

src/components/ui/select/index.ts

@@ -1,11 +1,11 @@
 export { default as Select } from './Select.vue'
-export { default as SelectValue } from './SelectValue.vue'
-export { default as SelectTrigger } from './SelectTrigger.vue'
 export { default as SelectContent } from './SelectContent.vue'
 export { default as SelectGroup } from './SelectGroup.vue'
 export { default as SelectItem } from './SelectItem.vue'
 export { default as SelectItemText } from './SelectItemText.vue'
 export { default as SelectLabel } from './SelectLabel.vue'
-export { default as SelectSeparator } from './SelectSeparator.vue'
-export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
 export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'

src/config/theme.ts

@@ -1,7 +1,7 @@
-import { toMerged } from 'es-toolkit'
-
 import type { IConfigOption, Theme } from '@/types'
 
+import { toMerged } from 'es-toolkit'
+
 const defaultTheme: Theme = {
   base: {
     '--md-primary-color': `#000000`,

src/element/index.ts

@@ -1,10 +1,11 @@
-import { ElLoading, ElMessage } from 'element-plus'
+import type { App } from 'vue'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { ElLoading, ElMessage } from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 
 export default {
-  install(app) {
+  install(app: App<Element>) {
     // app.use(ElementPlus, { size: `default` })
 
     app.config.globalProperties.$loading = ElLoading.service

src/main.ts

@@ -1,7 +1,7 @@
+import { createPinia } from 'pinia'
 import { createApp } from 'vue'
-import Store from './stores'
-import ElementPlus from './element'
 import App from './App.vue'
+import ElementPlus from './element'
 
 import 'virtual:uno.css'
 import 'codemirror/lib/codemirror.css'
@@ -22,7 +22,7 @@ import 'codemirror/addon/hint/css-hint'
 
 const app = createApp(App)
 
-app.use(Store)
+app.use(createPinia())
 app.use(ElementPlus)
 
 app.mount(`#app`)

src/stores/index.ts

@@ -1,15 +1,15 @@
-import { computed, markRaw, onMounted, ref, toRaw, watch } from 'vue'
-import { createPinia, defineStore } from 'pinia'
-import { marked } from 'marked'
-import CodeMirror from 'codemirror'
-import { useDark, useStorage, useToggle } from '@vueuse/core'
-import { ElMessage, ElMessageBox } from 'element-plus'
-
-import { altKey, codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, legendOptions, shiftKey, themeMap, themeOptions } from '@/config'
-import { initRenderer } from '@/utils/renderer'
 import DEFAULT_CONTENT from '@/assets/example/markdown.md?raw'
 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 { ElMessage, ElMessageBox } from 'element-plus'
+import { marked } from 'marked'
+import { defineStore } from 'pinia'
+import { computed, markRaw, onMounted, ref, toRaw, watch } from 'vue'
 
 export const useStore = defineStore(`store`, () => {
   // 是否开启深色模式
@@ -379,23 +379,7 @@ export const useStore = defineStore(`store`, () => {
       })
   }
 
-  const isShowCssEditor = ref(false)
-  const toggleShowCssEditor = useToggle(isShowCssEditor)
-
-  const isShowInsertFormDialog = ref(false)
-  const toggleShowInsertFormDialog = useToggle(isShowInsertFormDialog)
-
-  const isShowUploadImgDialog = ref(false)
-  const toggleShowUploadImgDialog = useToggle(isShowUploadImgDialog)
-
   return {
-    isShowCssEditor,
-    toggleShowCssEditor,
-    isShowInsertFormDialog,
-    toggleShowInsertFormDialog,
-    isShowUploadImgDialog,
-    toggleShowUploadImgDialog,
-
     isDark,
     toggleDark,
 
@@ -444,4 +428,25 @@ export const useStore = defineStore(`store`, () => {
   }
 })
 
-export default createPinia()
+export const useDisplayStore = defineStore(`display`, () => {
+  // 是否展示 CSS 编辑器
+  const isShowCssEditor = ref(false)
+  const toggleShowCssEditor = useToggle(isShowCssEditor)
+
+  // 是否展示插入表格对话框
+  const isShowInsertFormDialog = ref(false)
+  const toggleShowInsertFormDialog = useToggle(isShowInsertFormDialog)
+
+  // 是否展示上传图片对话框
+  const isShowUploadImgDialog = ref(false)
+  const toggleShowUploadImgDialog = useToggle(isShowUploadImgDialog)
+
+  return {
+    isShowCssEditor,
+    toggleShowCssEditor,
+    isShowInsertFormDialog,
+    toggleShowInsertFormDialog,
+    isShowUploadImgDialog,
+    toggleShowUploadImgDialog,
+  }
+})

src/utils/file.ts

@@ -1,15 +1,15 @@
-import CryptoJS from 'crypto-js'
+import { giteeConfig, githubConfig } from '@/config'
-import OSS from 'tiny-oss'
-import * as Minio from 'minio'
-import COS from 'cos-js-sdk-v5'
-import Buffer from 'buffer-from'
-import { v4 as uuidv4 } from 'uuid'
-import * as qiniu from 'qiniu-js'
-
 import fetch from '@/utils/fetch'
 import { base64encode, safe64, utf16to8 } from '@/utils/tokenTools'
 import * as tokenTools from '@/utils/tokenTools'
-import { giteeConfig, githubConfig } from '@/config'
+import Buffer from 'buffer-from'
+import COS from 'cos-js-sdk-v5'
+import CryptoJS from 'crypto-js'
+
+import * as Minio from 'minio'
+import * as qiniu from 'qiniu-js'
+import OSS from 'tiny-oss'
+import { v4 as uuidv4 } from 'uuid'
 
 function getConfig(useDefault: boolean, platform: string) {
   if (useDefault) {
@@ -173,7 +173,7 @@ async function qiniuUpload(file: File) {
   const dir = path ? `${path}/` : ``
   const dateFilename = dir + getDateFilename(file.name)
   const observable = qiniu.upload(file, dateFilename, token, {}, { region })
-  return new Promise((resolve, reject) => {
+  return new Promise<string>((resolve, reject) => {
     observable.subscribe({
       next: (result) => {
         console.log(result)
@@ -229,7 +229,7 @@ async function txCOSFileUpload(file: File) {
     SecretId: secretId,
     SecretKey: secretKey,
   })
-  return new Promise((resolve, reject) => {
+  return new Promise<string>((resolve, reject) => {
     cos.putObject(
       {
         Bucket: bucket,
@@ -277,7 +277,7 @@ async function minioFileUpload(content: string, filename: string) {
   if (isCustomPort) {
     conf.port = p
   }
-  return new Promise((resolve, reject) => {
+  return new Promise<string>((resolve, reject) => {
     const minioClient = new Minio.Client(conf)
     try {
       minioClient.putObject(bucket, dateFilename, buffer, (e) => {
@@ -309,7 +309,7 @@ async function formCustomUpload(content: string, file: File) {
       ${localStorage.getItem(`formCustomConfig`)}
     }
   `
-  return new Promise((resolve, reject) => {
+  return new Promise<string>((resolve, reject) => {
     const exportObj = {
       content, // 待上传图片的 base64
       file, // 待上传图片的 file 对象

src/utils/index.ts

@@ -1,13 +1,13 @@
-import juice from 'juice'
+import type { Block, Inline, Theme } from '@/types'
 
-import { format } from 'prettier/standalone'
-import * as prettierPluginMarkdown from 'prettier/plugins/markdown'
-import * as prettierPluginBabel from 'prettier/plugins/babel'
-import * as prettierPluginEstree from 'prettier/plugins/estree'
-import * as prettierPluginCss from 'prettier/plugins/postcss'
 import type { PropertiesHyphen } from 'csstype'
 import { prefix } from '@/config'
-import type { Block, Inline, Theme } from '@/types'
+import juice from 'juice'
+import * as prettierPluginBabel from 'prettier/plugins/babel'
+import * as prettierPluginEstree from 'prettier/plugins/estree'
+import * as prettierPluginMarkdown from 'prettier/plugins/markdown'
+import * as prettierPluginCss from 'prettier/plugins/postcss'
+import { format } from 'prettier/standalone'
 
 export function addPrefix(str: string) {
   return `${prefix}__${str}`
@@ -111,8 +111,6 @@ export function css2json(css: string): Partial<Record<Block | Inline, Properties
     css = css.slice(rbracket + 1).trim()
   }
 
-  console.log(`json`, json)
-
   return json
 }
 
@@ -221,7 +219,7 @@ export function exportHTML() {
       return (
         element.tagName === `SPAN`
         && (isCode(element.parentElement)
-        || isCode((element.parentElement!).parentElement))
+          || isCode((element.parentElement!).parentElement))
       )
     }
   }
@@ -253,10 +251,10 @@ export function createTable({ data, rows, cols }: { data: { [k: string]: string
 }
 
 export function toBase64(file: Blob) {
-  return new Promise((resolve, reject) => {
+  return new Promise<string>((resolve, reject) => {
     const reader = new FileReader()
     reader.readAsDataURL(file)
-    reader.onload = () => resolve((reader.result as string).split(`,`).pop())
+    reader.onload = () => resolve((reader.result as string).split(`,`).pop()!)
     reader.onerror = error => reject(error)
   })
 }

src/utils/renderer.ts

@@ -1,12 +1,12 @@
-import type { Renderer, RendererObject, Tokens } from 'marked'
-import { marked } from 'marked'
-import hljs from 'highlight.js'
-import mermaid from 'mermaid'
-import { toMerged } from 'es-toolkit'
-
-import type { PropertiesHyphen } from 'csstype'
-import { MDKatex } from './MDKatex'
 import type { ExtendedProperties, IOpts, ThemeStyles } from '@/types'
+import type { PropertiesHyphen } from 'csstype'
+import type { Renderer, RendererObject, Tokens } from 'marked'
+import { toMerged } from 'es-toolkit'
+import hljs from 'highlight.js'
+
+import { marked } from 'marked'
+import mermaid from 'mermaid'
+import { MDKatex } from './MDKatex'
 
 marked.use(MDKatex({ nonStandard: true }))
 

src/views/CodemirrorEditor.vue

@@ -1,18 +1,11 @@
-<script setup>
+<script setup lang="ts">
-import { onMounted, ref, toRaw, watch } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
-import { storeToRefs } from 'pinia'
+import CssEditor from '@/components/CodemirrorEditor/CssEditor.vue'
-import { ElMessage } from 'element-plus'
-import CodeMirror from 'codemirror'
-
-import fileApi from '@/utils/file'
-import { useStore } from '@/stores'
-
 import EditorHeader from '@/components/CodemirrorEditor/EditorHeader/index.vue'
 import InsertFormDialog from '@/components/CodemirrorEditor/InsertFormDialog.vue'
 import UploadImgDialog from '@/components/CodemirrorEditor/UploadImgDialog.vue'
-import CssEditor from '@/components/CodemirrorEditor/CssEditor.vue'
-import RunLoading from '@/components/RunLoading.vue'
 
+import RunLoading from '@/components/RunLoading.vue'
 import {
   ContextMenu,
   ContextMenuContent,
@@ -23,15 +16,25 @@ import {
 } from '@/components/ui/context-menu'
 
 import { altKey, altSign, ctrlKey, shiftKey, shiftSign } from '@/config'
-
+import { useDisplayStore, useStore } from '@/stores'
 import {
   checkImage,
   formatDoc,
   toBase64,
 } from '@/utils'
+import fileApi from '@/utils/file'
+import CodeMirror from 'codemirror'
+
+import { ElCol, ElMessage } from 'element-plus'
+
+import { storeToRefs } from 'pinia'
+
+import { onMounted, ref, toRaw, watch } from 'vue'
 
 const store = useStore()
-const { isDark, output, editor, editorContent, isShowCssEditor } = storeToRefs(store)
+const displayStore = useDisplayStore()
+const { isDark, output, editor, editorContent } = storeToRefs(store)
+const { isShowCssEditor } = storeToRefs(displayStore)
 
 const {
   editorRefresh,
@@ -40,33 +43,37 @@ const {
   formatContent,
   importMarkdownContent,
   resetStyleConfirm,
-  toggleShowInsertFormDialog,
-  toggleShowUploadImgDialog,
 } = store
 
-const isImgLoading = ref(false)
+const {
-const timeout = ref(0)
+  toggleShowInsertFormDialog,
+  toggleShowUploadImgDialog,
+} = displayStore
 
-const preview = ref(null)
+const isImgLoading = ref(false)
+const timeout = ref<NodeJS.Timeout>()
+
+const preview = ref<typeof ElCol | null>(null)
 
 // 使浏览区与编辑区滚动条建立同步联系
 function leftAndRightScroll() {
-  const scrollCB = (text) => {
+  const scrollCB = (text: string) => {
-    let source, target
+    let source: HTMLElement
+    let target: HTMLElement
 
     clearTimeout(timeout.value)
     if (text === `preview`) {
-      source = preview.value.$el
+      source = preview.value!.$el
-      target = document.querySelector(`.CodeMirror-scroll`)
+      target = document.querySelector<HTMLElement>(`.CodeMirror-scroll`)!
 
-      editor.value.off(`scroll`, editorScrollCB)
+      editor.value!.off(`scroll`, editorScrollCB)
       timeout.value = setTimeout(() => {
-        editor.value.on(`scroll`, editorScrollCB)
+        editor.value!.on(`scroll`, editorScrollCB)
       }, 300)
     }
-    else if (text === `editor`) {
+    else {
-      source = document.querySelector(`.CodeMirror-scroll`)
+      source = document.querySelector<HTMLElement>(`.CodeMirror-scroll`)!
-      target = preview.value.$el
+      target = preview.value!.$el
 
       target.removeEventListener(`scroll`, previewScrollCB, false)
       timeout.value = setTimeout(() => {
@@ -89,8 +96,8 @@ function leftAndRightScroll() {
     scrollCB(`preview`)
   }
 
-  preview.value.$el.addEventListener(`scroll`, previewScrollCB, false)
+  (preview.value!.$el).addEventListener(`scroll`, previewScrollCB, false)
-  editor.value.on(`scroll`, editorScrollCB)
+  editor.value!.on(`scroll`, editorScrollCB)
 }
 
 onMounted(() => {
@@ -120,7 +127,7 @@ function endCopy() {
   }, 800)
 }
 
-function beforeUpload(file) {
+function beforeUpload(file: File) {
   // validate image
   const checkResult = checkImage(file)
   if (!checkResult.ok) {
@@ -142,20 +149,20 @@ function beforeUpload(file) {
 }
 
 // 图片上传结束
-function uploaded(imageUrl) {
+function uploaded(imageUrl: string) {
   if (!imageUrl) {
     ElMessage.error(`上传图片未知异常`)
     return
   }
   toggleShowUploadImgDialog(false)
   // 上传成功，获取光标
-  const cursor = editor.value.getCursor()
+  const cursor = editor.value!.getCursor()
   const markdownImage = `![](${imageUrl})`
   // 将 Markdown 形式的 URL 插入编辑框光标所在位置
-  toRaw(store.editor).replaceSelection(`\n${markdownImage}\n`, cursor)
+  toRaw(store.editor!).replaceSelection(`\n${markdownImage}\n`, cursor as any)
   ElMessage.success(`图片上传成功`)
 }
-function uploadImage(file, cb) {
+function uploadImage(file: File, cb?: { (url: any): void, (arg0: unknown): void } | undefined) {
   isImgLoading.value = true
 
   toBase64(file)
@@ -176,7 +183,7 @@ function uploadImage(file, cb) {
     })
 }
 
-const changeTimer = ref(0)
+const changeTimer = ref<NodeJS.Timeout>()
 
 // 监听暗色模式并更新编辑器
 watch(isDark, () => {
@@ -186,7 +193,7 @@ watch(isDark, () => {
 
 // 初始化编辑器
 function initEditor() {
-  const editorDom = document.querySelector(`#editor`)
+  const editorDom = document.querySelector<HTMLTextAreaElement>(`#editor`)!
 
   if (!editorDom.value) {
     editorDom.value = editorContent.value
@@ -200,7 +207,7 @@ function initEditor() {
     autoCloseBrackets: true,
     extraKeys: {
       [`${shiftKey}-${altKey}-F`]: function autoFormat(editor) {
-        formatDoc(editor.getValue(0)).then((doc) => {
+        formatDoc(editor.getValue()).then((doc) => {
           editor.setValue(doc)
         })
       },
@@ -241,7 +248,7 @@ function initEditor() {
   })
 
   // 粘贴上传图片并插入
-  editor.value.on(`paste`, (cm, e) => {
+  editor.value.on(`paste`, (_cm, e) => {
     if (!(e.clipboardData && e.clipboardData.items) || isImgLoading.value) {
       return
     }
@@ -249,7 +256,7 @@ function initEditor() {
       const item = e.clipboardData.items[i]
       if (item.kind === `file`) {
         // 校验图床参数
-        const pasteFile = item.getAsFile()
+        const pasteFile = item.getAsFile()!
         const isValid = beforeUpload(pasteFile)
         if (!isValid) {
           continue
@@ -263,33 +270,33 @@ function initEditor() {
 const container = ref(null)
 
 // 工具函数，添加格式
-function addFormat(cmd) {
+function addFormat(cmd: string | number) {
-  editor.value.options.extraKeys[cmd](editor.value)
+  (editor.value as any).options.extraKeys[cmd](editor.value)
 }
 
-const codeMirrorWrapper = ref(null)
+const codeMirrorWrapper = ref<ComponentPublicInstance<typeof ElCol> | null>(null)
 
 // 转换 markdown 中的本地图片为线上图片
 // todo 处理事件覆盖
 function mdLocalToRemote() {
-  const dom = codeMirrorWrapper.value.$el
+  const dom = codeMirrorWrapper.value!.$el as HTMLElement
 
   // 上传 md 中的图片
-  const uploadMdImg = async ({ md, list }) => {
+  const uploadMdImg = async ({ md, list }: { md: { str: string, path: string, file: File }, list: { path: string, file: File }[] }) => {
     const mdImgList = [
       ...(md.str.matchAll(/!\[(.*?)\]\((.*?)\)/g) || []),
     ].filter((item) => {
       return item // 获取所有相对地址的图片
     })
-    const root = md.path.match(/.+?\//)[0]
+    const root = md.path.match(/.+?\//)![0]
-    const resList = await Promise.all(
+    const resList = await Promise.all<{ matchStr: string, url: string }>(
       mdImgList.map((item) => {
         return new Promise((resolve) => {
           let [, , matchStr] = item
           matchStr = matchStr.replace(/^.\//, ``) // 处理 ./img/ 为 img/ 统一相对路径风格
           const { file }
                 = list.find(f => f.path === `${root}${matchStr}`) || {}
-          uploadImage(file, (url) => {
+          uploadImage(file!, (url) => {
             resolve({ matchStr, url })
           })
         })
@@ -300,16 +307,16 @@ function mdLocalToRemote() {
         .replace(`](./${item.matchStr})`, `](${item.url})`)
         .replace(`](${item.matchStr})`, `](${item.url})`)
     })
-    editor.value.setValue(md.str)
+    editor.value!.setValue(md.str)
   }
 
   dom.ondragover = evt => evt.preventDefault()
-  dom.ondrop = async (evt) => {
+  dom.ondrop = async (evt: any) => {
     evt.preventDefault()
     for (const item of evt.dataTransfer.items) {
-      item.getAsFileSystemHandle().then(async (handle) => {
+      item.getAsFileSystemHandle().then(async (handle: { kind: string, getFile: () => any }) => {
         if (handle.kind === `directory`) {
-          const list = await showFileStructure(handle)
+          const list = await showFileStructure(handle) as { path: string, file: File }[]
           const md = await getMd({ list })
           uploadMdImg({ md, list })
         }
@@ -322,14 +329,14 @@ function mdLocalToRemote() {
   }
 
   // 从文件列表中查找一个 md 文件并解析
-  async function getMd({ list }) {
+  async function getMd({ list }: { list: { path: string, file: File }[] }) {
-    return new Promise((resolve) => {
+    return new Promise<{ str: string, file: File, path: string }>((resolve) => {
-      const { path, file } = list.find(item => item.path.match(/\.md$/))
+      const { path, file } = list.find(item => item.path.match(/\.md$/))!
       const reader = new FileReader()
-      reader.readAsText(file, `UTF-8`)
+      reader.readAsText(file!, `UTF-8`)
       reader.onload = (evt) => {
         resolve({
-          str: evt.target.result,
+          str: evt.target!.result as string,
           file,
           path,
         })
@@ -338,7 +345,7 @@ function mdLocalToRemote() {
   }
 
   // 转换文件系统句柄中的文件为文件列表
-  async function showFileStructure(root) {
+  async function showFileStructure(root: any) {
     const result = []
     let cwd = ``
     try {
@@ -385,7 +392,7 @@ onMounted(() => {
     />
     <main class="container-main flex-1">
       <el-row class="container-main-section h-full border-1">
-        <el-col
+        <ElCol
           ref="codeMirrorWrapper"
           :span="isShowCssEditor ? 8 : 12"
           class="codeMirror-wrapper border-r-1"
@@ -427,8 +434,8 @@ onMounted(() => {
               </ContextMenuItem>
             </ContextMenuContent>
           </ContextMenu>
-        </el-col>
+        </ElCol>
-        <el-col
+        <ElCol
           id="preview"
           ref="preview"
           :span="isShowCssEditor ? 8 : 12"
@@ -445,7 +452,7 @@ onMounted(() => {
               </div>
             </div>
           </div>
-        </el-col>
+        </ElCol>
         <CssEditor />
       </el-row>
     </main>

vite.config.ts

@@ -1,15 +1,15 @@
 import path from 'node:path'
 import process from 'node:process'
 
-import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import UnoCSS from 'unocss/vite'
-import vueDevTools from 'vite-plugin-vue-devtools'
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import { visualizer } from 'rollup-plugin-visualizer'
+import UnoCSS from 'unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import Components from 'unplugin-vue-components/vite'
+import { defineConfig } from 'vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vitejs.dev/config/
 export default defineConfig({