refactor: merging and shrinking

src/components/CodemirrorEditor/AboutDialog.vue

@@ -22,7 +22,7 @@ function onRedirect(url) {
     center
     @close="$emit('close')"
   >
-    <div style="text-align: center">
+    <div class="text-center">
       <h3>一款高度简洁的微信 Markdown 编辑器</h3>
       <p>扫码关注公众号 Doocs，原创技术文章第一时间推送！</p>
       <img

src/components/CodemirrorEditor/EditorHeader/FileDropdown.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import { useStore } from '@/stores'
+
+const store = useStore()
+
+const {
+  isDark,
+  isEditOnLeft,
+} = storeToRefs(store)
+
+const {
+  toggleDark,
+  toggleEditOnLeft,
+  exportEditorContent,
+  downloadEditorContent,
+} = store
+
+const fileInput = ref(null)
+
+onMounted(() => {
+  fileInput.value.onchange = () => {
+    const file = fileInput.value.files[0]
+    if (file === null) {
+      return
+    }
+    const read = new FileReader()
+    read.readAsText(file)
+    read.onload = () => {
+      editor.value.setValue(read.result)
+      editorRefresh()
+    }
+  }
+})
+
+function refClick() {
+  fileInput.value.click()
+}
+</script>
+
+<template>
+  <el-dropdown>
+    <span class="el-dropdown-link">
+      文件<el-icon class="ml-2">
+        <ElIconArrowDown />
+      </el-icon>
+    </span>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item class="leading-8" @click="refClick()">
+          <el-icon>
+            <ElIconUpload />
+          </el-icon>
+          导入 .md
+          <input ref="fileInput" hidden type="file" accept=".md">
+        </el-dropdown-item>
+        <el-dropdown-item class="leading-8" @click="downloadEditorContent()">
+          <el-icon>
+            <ElIconDownload />
+          </el-icon>
+          导出 .md
+        </el-dropdown-item>
+        <el-dropdown-item class="leading-8" @click="exportEditorContent()">
+          <el-icon>
+            <ElIconDocument />
+          </el-icon>
+          导出 .html
+        </el-dropdown-item>
+        <el-dropdown-item divided class="leading-8" @click="toggleDark()">
+          <el-icon :class="{ 'opacity-0': !isDark }">
+            <ElIconCheck />
+          </el-icon>
+          深色模式
+        </el-dropdown-item>
+        <el-dropdown-item divided class="leading-8" @click="toggleEditOnLeft()">
+          <el-icon :class="{ 'opacity-0': !isEditOnLeft }">
+            <ElIconCheck />
+          </el-icon>
+          左侧编辑
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<style lang="less" scoped>
+.el-dropdown-link {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+</style>

src/components/CodemirrorEditor/EditorHeader/PostInfo.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import { useStore } from '@/stores'
+
+defineEmits([`close`, `post`])
+
+const store = useStore()
+const { output } = storeToRefs(store)
+
+const dialogVisible = ref(false)
+
+const form = ref({
+  title: ``,
+  desc: ``,
+  thumb: ``,
+  content: ``,
+})
+
+function prePost() {
+  let auto = {}
+  try {
+    auto = {
+      thumb: document.querySelector(`#output img`)?.src,
+      title: [1, 2, 3, 4, 5, 6]
+        .map(h => document.querySelector(`#output h${h}`))
+        .filter(h => h)[0].textContent,
+      desc: document.querySelector(`#output p`).textContent,
+      content: output.value,
+    }
+  }
+  catch (error) {
+    console.log(`error`, error)
+  }
+  form.value = {
+    ...auto,
+    auto,
+  }
+  dialogVisible.value = true
+}
+
+function post() {
+  dialogVisible.value = false
+  // 使用 window.$syncer 可以检测是否安装插件
+  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,
+    content: form.value.content || form.value.auto.content,
+  })
+}
+</script>
+
+<template>
+  <el-button plain type="primary" @click="prePost">
+    发布
+  </el-button>
+
+  <el-dialog
+    title="发布"
+    :model-value="dialogVisible"
+    @close="dialogVisible = false"
+  >
+    <el-alert
+      class="mb-4"
+      title="注：此功能由第三方浏览器插件支持，本平台不保证安全性。"
+      type="info"
+      show-icon
+    />
+    <el-form
+      class="postInfo"
+      label-width="50"
+      :model="form"
+    >
+      <el-form-item label="封面">
+        <el-input
+          v-model="form.thumb"
+          placeholder="自动提取第一张图"
+        />
+      </el-form-item>
+      <el-form-item label="标题">
+        <el-input
+          v-model="form.title"
+          placeholder="自动提取第一个标题"
+        />
+      </el-form-item>
+      <el-form-item label="描述">
+        <el-input
+          v-model="form.desc"
+          type="textarea"
+          :rows="4"
+          placeholder="自动提取第一个段落"
+        />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="dialogVisible = false">
+        取 消
+      </el-button>
+      <el-button type="primary" @click="post">
+        确 定
+      </el-button>
+    </template>
+  </el-dialog>
+</template>

src/components/CodemirrorEditor/EditorHeader/ResetDialog.vue

@@ -5,7 +5,7 @@ const props = defineProps({
     default: false,
   },
 })
-defineEmits(`close`, `confirm`)
+defineEmits([`close`, `confirm`])
 </script>
 
 <template>

src/components/CodemirrorEditor/EditorHeader/StyleOptionMenu.vue

@@ -1,69 +1,63 @@
-<script>
-export default {
-  name: `StyleOptionMenu`,
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    options: {
-      type: Array,
-      required: true,
-    },
-    current: {
-      type: String,
-      required: true,
-    },
-    charge: {
-      type: Function,
-      required: true,
-    },
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
   },
-  setup(props) {
-    // 暂时以别名形式使用，后续需要修改
-    const title = props.label
-    return {
-      title,
-    }
+  options: {
+    type: Array,
+    required: true,
   },
+  current: {
+    type: String,
+    required: true,
+  },
+  change: {
+    type: Function,
+    required: true,
+  },
+})
+
+function setStyle(title, value) {
+  switch (title) {
+    case `字体`:
+      return { fontFamily: value }
+    case `字号`:
+      return { fontSize: value }
+    case `颜色`:
+      return { color: value }
+    default:
+      return {}
+  }
 }
 </script>
 
 <template>
-  <el-dropdown placement="right" class="style-option-menu" style="margin: 0;">
+  <el-dropdown placement="right" class="style-option-menu">
     <div class="el-dropdown-link leading-8 flex items-center">
       <el-icon class="opacity-0">
         <ElIconCheck />
       </el-icon>
-      {{ title }}
+      {{ props.title }}
       <el-icon class="ml-auto">
         <ElIconArrowRight />
       </el-icon>
     </div>
     <template #dropdown>
       <el-dropdown-menu style="width: 200px">
         <el-dropdown-item
-          v-for="{ value, label, desc } in options"
+          v-for="{ label, value, desc } in options"
           :key="value"
           :label="label"
           :model-value="value"
           class="leading-8"
-          @click="charge(value)"
+          @click="change(value)"
         >
           <el-icon :style="{ opacity: +(current === value) }">
             <ElIconCheck />
           </el-icon>
           {{ label }}
-          <span v-if="title === '字体'" class="ml-auto" :style="{ fontFamily: value }">
-            {{ desc }}
-          </span>
-          <span v-else-if="title === '字号'" class="ml-auto" :style="{ fontSize: value }">
-            {{ desc }}
-          </span>
-          <span v-else-if="title === '颜色'" class="ml-auto" :style="{ color: value }">
-            {{ desc }}
-          </span>
-          <span v-else class="ml-auto">
+          <span class="ml-auto" :style="setStyle(title, value)">
             {{ desc }}
           </span>
         </el-dropdown-item>
@@ -81,10 +75,4 @@ export default {
     width: 100%;
   }
 }
-
-.select-item-right {
-  float: right;
-  color: #8492a6;
-  font-size: 13px;
-}
 </style>