From 20f896632f98cb88e58dfe4cb5153044f82a1558 Mon Sep 17 00:00:00 2001
From: taqi be <taqibe@taqis-MacBook-Pro.local>
Date: Fri, 24 Jan 2025 15:33:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fileDoc/components/markdownDrawer.vue     |   7 +
 src/pages/fileDoc/components/uploadMDDlg.vue  | 188 ++++++++++++++++++
 src/pages/fileDoc/index.vue                   |  34 +++-
 src/pages/fileDoc/utils.ts                    |   2 +-
 4 files changed, 227 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/fileDoc/components/uploadMDDlg.vue

diff --git a/src/pages/fileDoc/components/markdownDrawer.vue b/src/pages/fileDoc/components/markdownDrawer.vue
index 2a3ae51..e0f4da0 100644
--- a/src/pages/fileDoc/components/markdownDrawer.vue
+++ b/src/pages/fileDoc/components/markdownDrawer.vue
@@ -84,6 +84,13 @@ function initEditor() {
       enable: false,
     },
     after: () => {
+      debugger
+      // document.getElementById('exportButton').addEventListener('click', () => {
+      //   const content = vditor.getValue() // 获取编辑器内容
+      //   const filename = 'my-exported-document.md' // 定义文件名
+      //   vditor.export(filename, content) // 调用原生导出方法
+      // })
+      // console.log('dwad=>', contentEditor.value?.vditor.toolbar?.elements?.export)
       contentEditor.value?.setValue(props?.data?.content ?? '')
     },
     upload: {
diff --git a/src/pages/fileDoc/components/uploadMDDlg.vue b/src/pages/fileDoc/components/uploadMDDlg.vue
new file mode 100644
index 0000000..2462670
--- /dev/null
+++ b/src/pages/fileDoc/components/uploadMDDlg.vue
@@ -0,0 +1,188 @@
+<template>
+  <EdfsDialog
+    @on-close="onClone"
+    @on-save="onSave"
+    title="上传Markdown文件"
+    :is-show="isShow"
+    :btn-loading="loading"
+    width="44%"
+    class="upload-MD-dlg"
+  >
+    <div class="dlg-body">
+      <el-upload
+        v-model:fileList="fileList"
+        drag
+        action=""
+        accept=".md"
+        :limit="1"
+        :on-exceed="handleExceed"
+        :auto-upload="false"
+        ref="upload"
+        class="upload-container"
+      >
+        <el-icon class="upload-icon">
+          <IEpUploadFilled />
+        </el-icon>
+        <div class="text">拖拽文件或者 <em>点击上传</em></div>
+        <template #tip v-if="!fileList.length">
+          <div class="el-upload__tip">上传限制一个文件，新文件会覆盖旧文件</div>
+        </template>
+      </el-upload>
+    </div>
+  </EdfsDialog>
+</template>
+
+<script setup lang="ts">
+import EdfsDialog from '@/components/dashboard/Edfs-dialog.vue'
+import type {
+  UploadInstance,
+  UploadProps,
+  UploadRawFile,
+  UploadUserFile,
+} from 'element-plus'
+import { useMessage } from '@/hooks/useMessage.js'
+
+const message = useMessage()
+
+interface Props {
+  isShow: boolean
+}
+
+const emits = defineEmits(['on-save', 'on-close'])
+const props = withDefaults(defineProps<Props>(), {
+  isShow: false,
+})
+
+const fileList = ref<UploadUserFile[]>([])
+const fileName = ref('')
+const fileContent = ref('')
+
+const upload = ref<UploadInstance>()
+const handleExceed: UploadProps['onExceed'] = files => {
+  upload.value!.clearFiles()
+  const file = files[0] as UploadRawFile
+
+  upload.value!.handleStart(file)
+}
+
+function readFileContent(
+  file: UploadUserFile
+): Promise<{ type: string; message: string }> {
+  const fileData = file.raw as File
+  fileName.value = fileData.name
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = e => {
+      if (e.target) {
+        resolve({
+          type: 'success',
+          message: e.target?.result as string,
+        })
+      }
+    }
+    reader.onerror = () => {
+      reject({
+        type: 'error',
+        message: '文件读取失败',
+      })
+    }
+    reader.readAsText(fileData) // 读取文件
+  })
+}
+
+function validate() {
+  if (!fileList.value.length) {
+    message.error('请上传文件')
+    return true
+  }
+  return false
+}
+const loading = ref(false)
+async function onSave() {
+  if (validate()) return
+  // 限制上传文件大小
+
+  loading.value = true
+  const res = await readFileContent(fileList.value[0])
+  loading.value = false
+
+  if (res.type === 'error') {
+    message.error(res.message)
+    return
+  }
+  fileContent.value = res.message
+  emits('on-save', fileName.value, fileContent.value)
+  onClone()
+}
+
+function clearData() {
+  fileName.value = ''
+  fileContent.value = ''
+  fileList.value = []
+}
+function onClone() {
+  clearData()
+  emits('on-close')
+}
+</script>
+
+<style scoped lang="scss">
+.upload-MD-dlg {
+  .el-row {
+    height: 32px;
+    margin-bottom: 20px;
+    :deep(.label) {
+      margin-right: 10px;
+    }
+
+    span {
+      width: 110px;
+      height: 32px;
+      line-height: 32px;
+      text-align: right;
+    }
+    :deep(.el-radio-group) {
+      height: 100%;
+    }
+    :deep(.el-radio) {
+      height: 100%;
+    }
+  }
+  .require {
+    color: red;
+    margin-right: 4px;
+  }
+  .upload {
+    height: 156px;
+    :deep(.upload-container) {
+      width: calc(100% - 210px);
+      height: calc(100% - 20px);
+    }
+    :deep(.el-upload) {
+      height: 100%;
+      width: 100%;
+    }
+    :deep(.el-upload-dragger) {
+      height: 100%;
+      width: 100%;
+      padding-top: 30px;
+      box-sizing: border-box;
+    }
+
+    .upload-icon {
+      font-size: 54px;
+      color: #c0c4cc;
+    }
+    .text {
+      color: #6c6c6c;
+      font-size: 14px;
+      text-align: center;
+    }
+    em {
+      color: #409eff;
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/pages/fileDoc/index.vue b/src/pages/fileDoc/index.vue
index e9880a1..7f128ab 100644
--- a/src/pages/fileDoc/index.vue
+++ b/src/pages/fileDoc/index.vue
@@ -85,6 +85,11 @@
     :isRootMd="isRootMd"
     @onSave="onSaveMd"
   />
+  <UploadMDDlg
+    :is-show="isShowMdDlg"
+    @on-close="isShowMdDlg = false"
+    @on-save="onUpdatedMdSave"
+  />
 </template>
 
 <script setup lang="ts">
@@ -114,6 +119,7 @@ import Folder from '@/assets/image/dashboard/file/folder.svg'
 import Upload from '@/assets/image/dashboard/file/upload.svg'
 import Document from '@/assets/image/dashboard/file/document.svg'
 import Document2 from '@/assets/image/dashboard/file/document2.svg'
+import UploadMDDlg from './components/uploadMDDlg.vue'
 
 import { Icon } from '@/components/dashboard/Icon'
 import EdfsContextMenu from '@/components/dashboard/Edfs-context-menu/index.vue'
@@ -127,7 +133,7 @@ const dropdownMenu = computed(() => {
     ? fileDropdownMenu
     : currentFolderId.value === 0
     ? operationDropdownMenu.filter(v => v.command === 'newFolder')
-    : operationDropdownMenu.filter(v => v.command === 'newMarkdown')
+    : operationDropdownMenu.filter(v => ['uploadMD', 'newMarkdown'].includes(v.command))
 })
 
 const message = useMessage()
@@ -224,11 +230,32 @@ function onCommand(command: string, item: any) {
     case 'newMarkdown':
       onNewMarkdown()
       break
-    case 'upload':
+    case 'uploadMD':
+      onUpdatedMd(item)
       break
   }
 }
 
+const isShowMdDlg = ref(false)
+function onUpdatedMd(item: any) {
+  isShowMdDlg.value = true
+}
+
+async function onUpdatedMdSave(fileName: string, fileContent: string) {
+  const id = await saveFile(true, {
+    name: fileName,
+    type: floeType.file,
+  })
+  if (id) {
+    curMdId.value = id
+    curMarkdown.value = {
+      fileName: fileName,
+      content: fileContent,
+    } as ContentType & { fileName: string }
+    isShowMdDrawer.value = true
+  }
+}
+
 const menuTarget = ref<HTMLElement | null>(null)
 function onVisibleChange(visible: boolean, currentElement: HTMLElement | null) {
   menuTarget.value = currentElement
@@ -357,7 +384,8 @@ async function saveFile(isAdd: boolean, item: any) {
       path: getPath(),
     })
   }
-  if (isResError(res)) return
+  if (isResError(res)) return ''
+  return res.data.id
 }
 
 const fullscreenLoading = ref()
diff --git a/src/pages/fileDoc/utils.ts b/src/pages/fileDoc/utils.ts
index 5885f26..f87572d 100644
--- a/src/pages/fileDoc/utils.ts
+++ b/src/pages/fileDoc/utils.ts
@@ -14,7 +14,7 @@ export const fileDropdownMenu = [
 ]
 export const operationDropdownMenu = [
   { command: 'newFolder', label: '新建文件夹', icon: Folder },
-  // { command: 'upload', label: '上传', icon: Upload },
+  { command: 'uploadMD', label: '上传文件', icon: Upload },
   { command: 'newMarkdown', label: '新建文档', icon: Document },
 ]