From 7b9324a13a32f924d37c798f19ed6042a9763f1e Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sat, 18 Jan 2025 12:57:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=99=BD=E6=9D=BF?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8(excalidraw)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ShowFile/ShowFile.vue       |   4 +
 src/components/office/ExcalidrawEditor.vue | 408 +++++++++++++++++++++
 src/components/preview/IframePreview.vue   |   7 +-
 src/icons/svg/file-excalidraw.svg          |   1 +
 src/utils/file-operations.js               |  12 +
 src/utils/file-type.js                     |   3 +-
 src/views/favorite/index.vue               |  13 +-
 src/views/fileType/audio.vue               |  13 +-
 src/views/fileType/document.vue            |  13 +-
 src/views/fileType/image.vue               |  13 +-
 src/views/fileType/video.vue               |  13 +-
 src/views/home/index.vue                   |  13 +-
 src/views/recently/index.vue               |  14 +-
 src/views/tag/index.vue                    |  13 +-
 14 files changed, 449 insertions(+), 91 deletions(-)
 create mode 100644 src/components/office/ExcalidrawEditor.vue
 create mode 100644 src/icons/svg/file-excalidraw.svg

diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index e4f47ea..50b7f0b 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -3607,6 +3607,10 @@ export default {
           this.newCreateFileDialogTitle = '新建Word文档'
           this.createNewFile('docx')
           break
+        case 'createExcalidrawFile':
+          this.newCreateFileDialogTitle = '新建白板'
+          this.createNewFile('excalidraw')
+          break
         case 'createExcelFile':
           this.newCreateFileDialogTitle = '新建Excel工作表'
           this.createNewFile('xlsx')
diff --git a/src/components/office/ExcalidrawEditor.vue b/src/components/office/ExcalidrawEditor.vue
new file mode 100644
index 0000000..20d709f
--- /dev/null
+++ b/src/components/office/ExcalidrawEditor.vue
@@ -0,0 +1,408 @@
+<template>
+  <div>
+    <div class="top-bar">
+      <div class="top-left"></div>
+      <div class="top-center" :style="{'color': saved ? (lightTheme ? '':'#ffffff'): '#ff8200'}">{{ title }}</div>
+      <div class="top-right">
+        <div class="top-right-option">
+          <div style="margin-right: 15px">
+            <el-button v-if="historyVersion.metadata.time" @click="cancelPreview" size="mini"
+                       :class="lightTheme ? '':'dark-button'">取消预览
+            </el-button>
+          </div>
+          <history-popover
+            ref="historyPopover"
+            :light-theme.sync="lightTheme"
+            :has-history-version.sync="hasHistoryVersion"
+            :history-list-popover-visible.sync="historyListPopoverVisible"
+            :history-operation-loading="!loading.closed"
+            :saved.sync="saved"
+            @viewHistoryFile="viewHistoryFile"
+            @recoverySuccess="recoverySuccess"
+          >
+          </history-popover>
+
+          <div style="margin-right: 15px">
+            <el-button v-if="!saved" @click="saveBtn" size="mini" :loading="saveBtnUpdating"
+                       :class="lightTheme ? '':'dark-button'">保存
+            </el-button>
+          </div>
+          <div>
+            <el-button title="外部打开" size="medium" type="primary" @click="openUrl"><svg-icon icon-class="wailian"/></el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="excalidraw-content" :style="{'top': readOnly ? '0': '2.5rem'}">
+      <iframe ref="excalidrawIframe" class="excalidraw-iframe" :src="excalidrawUrl" :title="file.name"></iframe>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import api from '@/api/file-api'
+import historyApi from '@/api/file-history'
+import txtApi from '@/api/markdown-api'
+import HistoryPopover from '@/components/HistoryPopover/index.vue'
+import _ from 'lodash'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'ExcalidrawEditor',
+  components: { HistoryPopover },
+  props: {
+    file: {
+      type: Object,
+      default: function() {
+        return {}
+      },
+    },
+    shareId: {
+      type: String,
+      default: '',
+    },
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      // excalidrawUrl: 'http://localhost:3000/excalidraw/app/',
+      excalidrawUrl: 'http://localhost:8085/excalidraw/app/',
+      excalidrawData: {
+        elements: [],
+        appState: {},
+        files: {}
+      },
+      saveBtnUpdating: false,
+      title: this.file.name,
+      thisEditorClosing: false,
+      saved: true,
+      ready: false,
+      currentContext: undefined,
+      currentTitle: undefined,
+      historyVersion: { metadata: {} },
+      hasHistoryVersion: false,
+      historyListPopoverVisible: false,
+      viewHistory: false,
+      loading: {
+        closed: true,
+      },
+      lightTheme: true,
+    }
+  },
+  computed: {
+    ...mapState(['message']),
+  },
+  created() {
+  },
+  mounted() {
+    this.clearExcalidrawCache()
+    window.addEventListener('message', this.handleMessage)
+  },
+  beforeDestroy() {
+    window.removeEventListener('message', this.handleMessage)
+  },
+  destroyed() {
+  },
+  watch: {
+    'file.id': {
+      handler(id) {
+        if (!id) {
+          return
+        }
+        let request = 'previewText'
+        if (!this.$store.state.user.token) {
+          request = 'sharePreviewText'
+        }
+        api[request]({
+          shareId: this.shareId,
+          fileId: this.file.id,
+          id: this.file.id,
+          fileName: this.file.name,
+          path: encodeURI(this.file.path),
+          username: this.$store.state.user.name,
+          content: true,
+        }).then(async (res) => {
+          this.file.path = res.data.path
+          this.loadData(res.data.contentText)
+          this.currentContext = res.data.contentText
+        })
+        this.$nextTick(() => {
+          this.$refs.historyPopover.loadHistoryList(this.file.id)
+        })
+      },
+      immediate: true,
+      deep: true,
+    },
+    message(msg) {
+      if (msg.event === 'previewSaveAndClose') {
+        this.saveAndClose()
+      }
+    },
+  },
+  methods: {
+    loadData(contentText) {
+      if (contentText) {
+        const data = JSON.parse(contentText)
+        if (typeof this.excalidrawData === 'string') {
+          this.excalidrawData = JSON.parse(data)
+        } else {
+          this.excalidrawData = data
+        }
+      }
+    },
+    viewHistoryFile({ historyInfo, recovery }) {
+      if (!this.saved) {
+        this.$message({ type: 'info', message: '请先保存当前修改的内容' })
+        return
+      }
+      let loadingInfo = recovery ? '恢复中...' : '加载中...'
+      this.loading = this.$message({
+        iconClass: 'el-icon-loading',
+        type: 'info',
+        duration: 0,
+        dangerouslyUseHTMLString: true,
+        message: `<span>&nbsp;&nbsp;${loadingInfo}</span>`,
+      })
+      historyApi.previewHistoryText({ id: historyInfo.id }).then((res) => {
+        this.loading.close()
+
+        if (this.historyListPopoverVisible) {
+          this.historyListPopoverVisible = false
+        }
+        if (recovery) {
+          this.cancelPreview(null, res.data.contentText)
+          this.$message({ message: '恢复成功', type: 'success' })
+        } else {
+          this.currentTitle = this.title
+          this.loadData(res.data.contentText)
+          this.updateContent()
+          this.historyVersion = historyInfo
+          this.title = `历史版本：${historyInfo.metadata.time}`
+          this.viewHistory = true
+        }
+      }).catch(() => {
+        this.loading.close()
+      })
+    },
+    recoverySuccess({ historyInfo }) {
+      this.viewHistoryFile({ historyInfo: historyInfo, recovery: true })
+    },
+    cancelPreview(event, currentContext) {
+      if (!currentContext) {
+        currentContext = this.currentContext
+      }
+      this.historyVersion = { metadata: {} }
+      this.loadData(currentContext)
+      this.updateContent()
+      if (this.currentTitle) {
+        this.title = this.currentTitle
+      }
+      this.viewHistory = false
+    },
+    saveAndClose() {
+      this.saveBtn()
+      this.thisEditorClosing = true
+    },
+    updateContent() {
+      const excalidrawData = {
+        type: 'INIT_DATA',
+        data: this.excalidrawData
+      };
+      this.$refs.excalidrawIframe.contentWindow.postMessage(excalidrawData, '*');
+    },
+    saveBtn() {
+      this.getDataBase()
+    },
+    loadExcalidrawFiles(files) {
+      const data = {
+        type: 'REQUEST_SAVE',
+        data: {
+          elements: JSON.parse(localStorage.getItem('excalidraw')),
+          appState: JSON.parse(localStorage.getItem('excalidraw-state')),
+          files: files
+        }
+      }
+      this.$refs.excalidrawIframe.contentWindow.postMessage(data, '*')
+    },
+    update() {
+      this.saveBtnUpdating = true
+      this.currentContext = JSON.stringify(this.excalidrawData)
+      txtApi.editMarkdownByPath({
+        relativePath: encodeURI(this.file.path + this.file.name),
+        userId: this.$store.state.user.userId,
+        username: this.$store.state.user.name,
+        mountFileId: this.$store.state.user.userId !== this.file.userId ? this.file.id : '',
+        contentText: this.currentContext,
+      }).then(() => {
+        this.saveBtnUpdating = false
+        this.saved = true
+        this.title = this.file.name
+        this.$emit('onEdit', this.saved)
+        this.$refs.historyPopover.loadHistoryList(this.file.id)
+        if (this.thisEditorClosing) {
+          this.thisEditorClosing = false
+          this.$emit('onClose')
+        }
+      }).catch(() => {
+        this.thisEditorClosing = false
+        this.saveBtnUpdating = false
+      })
+    },
+    clearExcalidrawCache() {
+      localStorage.removeItem('excalidraw')
+      localStorage.removeItem('excalidraw-state')
+      localStorage.removeItem('version-dataState')
+      localStorage.removeItem('version-files')
+    },
+    getDataBase() {
+      const request = indexedDB.open("files-db", 1);
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        if (!db.objectStoreNames.contains("files-store")) {
+          db.createObjectStore("files-store", { keyPath: "id" });
+        }
+      };
+      request.onsuccess = (event) => {
+        const db = event.target.result;
+        this.getData(db);
+      };
+    },
+    // 获取所有数据
+    getData(db) {
+      const transaction = db.transaction("files-store", "readonly");
+      const store = transaction.objectStore("files-store");
+      const getAllRequest = store.getAll();
+      const files = {}
+      getAllRequest.onsuccess = (event) => {
+        const data = event.target.result;
+        data.forEach((item) => {
+          files[item.id] = item;
+        });
+        this.loadExcalidrawFiles(files);
+      };
+      getAllRequest.onerror = (event) => {
+        console.error("Error getting data:", event.target.error);
+      };
+    },
+    handleMessage(event) {
+      const editWindow = this.$refs.excalidrawIframe.contentWindow
+      if (event.source !== editWindow) {
+        return
+      }
+      const payload = event.data
+      switch (payload.type) {
+        case 'EXCALIDRAW_READY':
+          this.updateContent()
+          break
+        case 'INIT_DONE':
+          this.ready = true
+          this.$emit('onReady')
+          break
+        case 'CHANGE_FILE':
+          if (!this.viewHistory) {
+            const data = JSON.parse(localStorage.getItem('excalidraw'))
+            if (_.isEqual(this.excalidrawData.elements, data)) {
+              this.saved = true
+              if (this.title === `*${this.file.name}`) {
+                this.title = this.file.name
+              }
+            } else {
+              this.saved = false
+              this.title = `*${this.file.name}`
+            }
+            this.$emit('onEdit', this.saved)
+          }
+          break
+
+        case 'SAVE_FILE':
+          if (typeof payload.data === 'string') {
+            this.excalidrawData = JSON.parse(payload.data)
+          } else {
+            this.excalidrawData = payload.data
+          }
+          if (!this.saved) {
+            this.update()
+          }
+          break
+      }
+    },
+    openUrl() {
+      window.open(this.excalidrawUrl)
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+@import 'src/styles/iframe.scss';
+
+.excalidraw-content {
+  z-index: 999;
+  position: absolute;
+  top: 2.5rem;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 2.5rem);
+
+  > > > .dark-button {
+    background: #3e3e3e;
+    border: 1px solid #3e3e3e;
+    color: #ffffff;
+  }
+
+  > > > .dark-button:hover {
+    color: #409EFF;
+    background-color: #181818;
+  }
+
+  .excalidraw-title {
+    z-index: 2001;
+    position: relative;
+
+    .excalidraw-title-name {
+      line-height: 32px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      z-index: 2001;
+      position: absolute;
+      text-align: center;
+      width: 40%;
+      top: 16px;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+    }
+
+    .excalidraw-operation {
+      display: flex;
+      float: right;
+      margin-right: 15px;
+      line-height: 32px;
+    }
+  }
+
+  .excalidraw-iframe {
+    z-index: 1999;
+    position: absolute;
+    top: 2px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 0 0;
+    border: 0;
+    float: none;
+    margin: -1px 0 0;
+    max-width: none;
+    outline: 0;
+    padding: 0;
+  }
+}
+</style>
diff --git a/src/components/preview/IframePreview.vue b/src/components/preview/IframePreview.vue
index 30d56d6..fe2031f 100644
--- a/src/components/preview/IframePreview.vue
+++ b/src/components/preview/IframePreview.vue
@@ -19,6 +19,7 @@
             <CADPreview v-if="fileType === 'cad'" :file="file" :shareId="shareId" :file-url="fileUrl" @onReady="onReady" @loadFileFailed="loadFileFailed"></CADPreview>
             <pdf-preview v-else-if="fileType === 'pdf'" :file="file" :shareId="shareId" :file-url="fileUrl" @onReady="onReady"></pdf-preview>
             <drawio v-else-if="fileType === 'drawio'" v-show="fileReday" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></drawio>
+            <excalidraw-editor v-else-if="fileType === 'excalidraw'" v-show="fileReday" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></excalidraw-editor>
             <my-mind-editor v-else-if="fileType === 'mind'" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></my-mind-editor>
             <model-preview v-else-if="fileType === 'glTF/GLB'" :file="file" :file-url="fileUrl" :shareId="shareId" @onReady="onReady"></model-preview>
             <only-office-editor ref="officeEditor" v-else-if="fileType === 'office'" :file="file" :file-url="fileUrl" :shareId="shareId" :sharer="sharer" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
@@ -31,6 +32,7 @@
 
 <script>
 
+import ExcalidrawEditor from '@/components/office/ExcalidrawEditor.vue'
 import ModelPreview from '@/components/office/ModelPreview.vue'
 import OnlyOfficeEditor from "@/components/office/OnlyOfficeEditor";
 import MessageDialog from "@/components/message/MessageDialog";
@@ -41,7 +43,8 @@ import Drawio from "@/components/office/Drawio";
 
 export default {
   name: 'IframePreview',
-  components: { IframeContentPreview, ModelPreview, Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor,
+  components: {
+    ExcalidrawEditor, IframeContentPreview, ModelPreview, Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor,
     MyMindEditor: () => import('@/components/Minder/minder'),
     CADPreview: () => import('@/components/preview/CADPreview.vue')
   },
@@ -145,6 +148,8 @@ export default {
       switch (suffix) {
         case 'drawio':
           return 'drawio'
+        case 'excalidraw':
+          return 'excalidraw'
         case 'pdf':
           return 'pdf'
         case 'mind':
diff --git a/src/icons/svg/file-excalidraw.svg b/src/icons/svg/file-excalidraw.svg
new file mode 100644
index 0000000..922786d
--- /dev/null
+++ b/src/icons/svg/file-excalidraw.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1736739754326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1925" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M957.984 802.496a6.144 6.144 0 0 0-5.92-1.344c-46.848-69.184-106.4-134.816-164.096-198.176l-9.504-10.4a5.536 5.536 0 0 0-1.344-3.36 6.112 6.112 0 0 0-3.776-2.24l-1.92-2.016-1.344-0.992c-1.664-3.584-5.92-6.272-10.624-3.904-17.632 9.056-33.504 22.016-49.152 33.984-20.928 16-41.376 32.64-60.608 50.528a189.184 189.184 0 0 0-22.016 23.36c-3.136 4.128-0.768 8.032 3.04 9.696-13.664 13.44-27.392 27.392-41.152 41.824a6.72 6.72 0 0 0-1.792 4.928 6.304 6.304 0 0 0 2.464 4.576l24.16 18.432s0.096 0.32 0.32 0.448c34.56 34.08 95.136 81.376 159.296 131.456 9.504 7.488 19.104 14.976 28.704 22.464 4.384 5.248 8.512 10.496 12.544 15.68a6.4 6.4 0 0 0 8.928 1.216c1.44 1.088 2.88 2.336 4.352 3.456a6.4 6.4 0 0 0 8.96-1.12 6.496 6.496 0 0 0 1.216-3.456c0.448 0 0.8 0.32 1.12 0.32a6.432 6.432 0 0 0 4.704-2.016l113.792-124.288a6.272 6.272 0 0 0-0.448-8.96z m-326.72-43.04c0.768 1.024 1.568 1.92 2.336 2.816 12.992 10.944 26.848 22.784 40.928 34.88l-57.248-43.712-5.792-4.032a65.024 65.024 0 0 1-3.456-2.688l-4.256-3.584s0.768-0.768 1.12-1.216l3.904-3.936c19.2-19.424 52.192-51.84 69.184-67.712-17.984 18.112-54.4 71.2-46.592 89.184z m195.936 154.368l-47.168-36a1167.68 1167.68 0 0 0-58.56-56.224c25.472 19.68 47.264 36.32 50.528 39.232 24.704 22.048 23.584 18.016 40.576 32.544l20.448 14.848c-2.016 1.792-4.032 3.712-5.92 5.504z m11.84 9.056l-0.864-0.64c1.792-1.472 3.68-2.816 5.44-4.288l-4.448 4.928zM90.976 192.992l4.48 23.584c7.68 41.344 14.848 78.592 28.48 106.88l5.376 21.44c2.112 8.16 5.12 18.336 7.936 20.48 31.84 28.16 80.704 70.176 132.896 109.76a6.4 6.4 0 0 0 7.84-0.128c0.096 0.224 0.32 0.32 0.448 0.448a6.208 6.208 0 0 0 4.224 1.664 5.984 5.984 0 0 0 4.704-2.112c66.848-74.336 116.576-135.488 152-186.688a14.144 14.144 0 0 0 3.264-9.376c2.24-2.688 4.576-5.376 6.72-7.584a6.24 6.24 0 0 0-1.12-9.6 6.464 6.464 0 0 0-1.92-4.064 3030.912 3030.912 0 0 0-38.656-36.64 3319.488 3319.488 0 0 1-86.88-83.968L320 136.448a6.208 6.208 0 0 0-2.464-1.6c-12.416-4.352-37.888-8.704-69.952-14.304-47.2-8.032-111.776-19.2-169.92-36.544h-0.448v-0.096s-0.224 0-0.32 0.224h-0.128l0.448-0.224s-3.456 0.096-4.16 0.448a6.432 6.432 0 0 0-2.08 1.664c-0.576 0.672-1.024 1.344-5.28 2.24-4.224 0.896 0.896 0 1.248 0h-1.248v0.32c0.8 3.84 0.576 6.496 1.792 10.88-0.224 1.088 2.368 11.392 2.688 12.384l20.48 81.152z m345.92 73.088l-0.416 0.576-7.168-7.936c2.464 2.336 4.928 4.704 7.616 7.36z m-79.232 104.96l-1.12 1.344-0.224-0.224c0.448-0.32 0.896-0.768 1.44-1.088z m-45.28-224.64c3.936 3.904 19.456 18.432 23.04 22.016-16.224-7.392-56.576-26.176-75.328-32.192 18.432 3.2 43.904 7.36 52.288 10.144z m-214.4-30.976c9.408 16.096 16.8 72.544 24.16 127.424-4.16-17.664-7.68-34.88-11.072-51.424-5.792-28.608-11.168-54.208-18.656-76.896 1.568 0.096 3.456 0.32 5.472 0.544 0 0.128 0 0.224 0.224 0.32z m-3.2-13.536c-2.592-0.224-4.928-0.448-6.944-0.544-0.224-0.448-0.32-0.896-0.448-1.344l7.36 2.016z m-24.832 5.024v-0.224z m877.888-13.184c0.448-2.56-12.288-13.856-8.288-14.08 9.504-0.448 9.6-15.072 0-14.656-12.608 0.672-25.376 3.584-37.664 5.952-22.112 4.128-44.16 8.704-66.176 13.504a2732.576 2732.576 0 0 0-146.432 34.784c-15.2 4.128-31.968 7.808-45.92 15.2-4.704 2.432-4.48 7.488-1.92 10.592a7.936 7.936 0 0 1-3.104 1.024c-4.16 0.768-8.288 1.44-12.416 2.112a6.336 6.336 0 0 0-4.352 9.6c-25.92 34.688-55.456 72-87.424 111.232a11219.52 11219.52 0 0 0-97.472 113.376c-105.184 123.616-224.448 263.776-356.576 387.2a6.336 6.336 0 0 0-0.32 8.928 5.568 5.568 0 0 0 2.112 1.44 213.888 213.888 0 0 1-5.376 4.928 5.76 5.76 0 0 0-1.792 3.584l-2.56 2.784a6.336 6.336 0 0 0 0.32 8.96 6.4 6.4 0 0 0 8.96-0.32l1.344-1.472a9.376 9.376 0 0 1 13.632 0l21.792 23.36-15.424-12.864a6.4 6.4 0 0 0-8.96 0.768 6.4 6.4 0 0 0 0.8 8.96l165.664 138.944a6.464 6.464 0 0 0 8.608-0.448l4.032-4.032a6.272 6.272 0 0 0 7.04-1.344c224.544-225.568 405.408-396.032 612.544-548.384a6.208 6.208 0 0 0 2.56-5.696 6.4 6.4 0 0 0 5.376-4.352c38.208-116.928 45.6-220.448 47.84-271.296a1.6 1.6 0 0 1 0.224-0.768c0.224-0.576 0.32-1.12 0.448-1.6l0.544-2.08a30.528 30.528 0 0 0-1.664-24.032zM546.304 276.704c10.048-11.52 20-22.784 29.856-33.76-64.384 84.736-171.04 215.296-322.016 370.432 102.816-113.76 206.432-231.68 292.16-336.64zM182.464 867.008l-0.32-0.32 2.24 0.448a5.248 5.248 0 0 0-1.92 0z m77.12 71.776l-0.544-0.448 0.32-0.32c0.224 0 0.32 0.192 0.448 0.192 0 0.224-0.224 0.32-0.32 0.576z m93.44-80.608l15.424-16.096a1.6 1.6 0 0 1 0.32 0.576c-5.216 5.12-10.496 10.4-15.84 15.52z m25.056-24.704l9.728-11.392c0.096-0.096 0.224-0.32 0.448-0.448a6444.416 6444.416 0 0 1 113.76-114.56l0.8-0.672 30.4-23.264a16625.696 16625.696 0 0 0-155.136 150.464z m241.984-624.608c-20.8 27.072-43.584 62.144-62.912 90.24-61.056 88.384-257.536 304.896-261.92 309.024-30.272 29.312-121.6 116.928-179.84 171.84a40.224 40.224 0 0 0-3.808 3.904 8.864 8.864 0 0 1 0.32-12.64c277.44-261.568 445.76-479.424 514.208-574.304-1.472 3.68-2.688 7.68-6.144 12.16z m184.544 79.36l-0.096 0.224c0-0.224-0.224-0.768 0.096-0.224z m-76 48.32c-25.28-14.656-37.12-36.576-30.304-58.688l2.144-7.36c0.896-2.144 1.92-4.288 3.136-6.4 6.592-10.944 16.64-20.672 28.16-26.368 0.544-0.224 1.12-0.32 1.664-0.448a8.896 8.896 0 0 1-0.448-4.8c0.576-3.488 2.816-6.496 7.36-6.496 7.52 0 30.752 6.912 39.584 14.528 2.688 2.112 5.248 4.48 7.616 7.04 3.36 3.904 8.256 10.272 10.72 14.88 1.472 0.64 2.56 6.912 4.256 10.144 1.568 5.152 2.24 10.4 2.016 15.68 0 0.192 0 0.192 0.096 0.32-0.32 0.768 0 4.16-0.448 4.48-1.12 8.032-4.032 16-8.384 22.912-0.448 0.544-0.768 1.216-1.216 1.792 0 0.096-0.224 0.224-0.32 0.448a49.92 49.92 0 0 1-12.096 12.608c-14.08 9.952-30.496 12.992-46.944 8.832a70.752 70.752 0 0 1-6.4-2.784z m181.856-18.24c-5.472 22.912-12.16 46.848-20.128 71.328-0.32 0.896-0.32 1.76-0.32 2.56a5.984 5.984 0 0 0-3.008 1.216 3387.712 3387.712 0 0 0-145.12 113.024 7984.064 7984.064 0 0 1 125.536-111.232 71.648 71.648 0 0 0 23.584-41.792l6.272-37.696 0.32-1.12c2.816-7.936 14.976-4.48 13.088 3.712z" fill="#6965DB" p-id="1926"></path></svg>
\ No newline at end of file
diff --git a/src/utils/file-operations.js b/src/utils/file-operations.js
index 704fa12..9964d6c 100644
--- a/src/utils/file-operations.js
+++ b/src/utils/file-operations.js
@@ -14,3 +14,15 @@ export const fileArrangements = [
   { label: '上传时间', operation: 'orderUploadDate', orderProp: 'uploadDate'},
   { label: '修改时间', operation: 'orderUpdateDate', orderProp: 'updateDate'},
 ]
+
+export const createFiles = [
+  { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
+  { divider: true, operation: 'divider' },
+  { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
+  { label: '白板', operation: 'createExcalidrawFile', iconClass: 'file-excalidraw'},
+  { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
+  { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
+  { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
+  { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
+  { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
+]
diff --git a/src/utils/file-type.js b/src/utils/file-type.js
index b801161..1f0c58c 100644
--- a/src/utils/file-type.js
+++ b/src/utils/file-type.js
@@ -10,7 +10,7 @@ export const suffix = {
   compressedFile: [
     'zip','tar','7z', 'rar', 'jar','tar.gz','tgz','tar.bz2'
   ],
-  iframePreviewFile: ['pdf', 'csv', 'drawio', 'mind', 'glb', 'gltf', 'dwg']
+  iframePreviewFile: ['pdf', 'csv', 'drawio', 'mind', 'glb', 'gltf', 'dwg', 'excalidraw']
 }
 
 monaco.languages.getLanguages().forEach(language => {
@@ -68,6 +68,7 @@ iconClass.set('docxf','file-docxf')
 iconClass.set('ppt','file-ppt')
 iconClass.set('pptx','file-ppt')
 iconClass.set('drawio','file-drawio')
+iconClass.set('excalidraw','file-excalidraw')
 iconClass.set('csv','file-csv')
 iconClass.set('pdf','file-pdf')
 iconClass.set('mind','file-mind')
diff --git a/src/views/favorite/index.vue b/src/views/favorite/index.vue
index f978eab..89d8bbb 100644
--- a/src/views/favorite/index.vue
+++ b/src/views/favorite/index.vue
@@ -17,7 +17,7 @@
 
 <script>
   import ShowFile from "@/components/ShowFile/ShowFile";
-  import { fileArrangements } from '@/utils/file-operations'
+  import { createFiles, fileArrangements } from '@/utils/file-operations'
 
   export default {
     components: {ShowFile},
@@ -40,16 +40,7 @@
           },
           { label: '刷新', operation: 'refresh'},
           { divider: true, operation: 'divider' },
-          { label: '新建', operation: 'create' , homeDisable: true, child: [
-              { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
-              { divider: true, operation: 'divider' },
-              { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
-              { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
-              { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
-              { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
-              { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
-              { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
-            ]
+          { label: '新建', operation: 'create' , homeDisable: true, child: createFiles
           },
           { divider: true, operation: 'divider' },
           { label: '写文章', operation: 'createMarkdownFile'},
diff --git a/src/views/fileType/audio.vue b/src/views/fileType/audio.vue
index e0d6a1e..1e8b3ca 100644
--- a/src/views/fileType/audio.vue
+++ b/src/views/fileType/audio.vue
@@ -16,7 +16,7 @@
 
 <script>
 import ShowFile from "@/components/ShowFile/ShowFile";
-import { fileArrangements } from '@/utils/file-operations'
+import { createFiles, fileArrangements } from '@/utils/file-operations'
 
 export default {
   components: {ShowFile},
@@ -39,16 +39,7 @@ export default {
         },
         { label: '刷新', operation: 'refresh'},
         { divider: true, operation: 'divider' },
-        { label: '新建', operation: 'create' , homeDisable: true, child: [
-            { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
-            { divider: true, operation: 'divider' },
-            { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
-            { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
-            { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
-            { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
-            { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
-            { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
-          ]
+        { label: '新建', operation: 'create' , homeDisable: true, child: createFiles
         },
         { divider: true, operation: 'divider' },
         { label: '写文章', operation: 'createMarkdownFile'},
diff --git a/src/views/fileType/document.vue b/src/views/fileType/document.vue
index 2b757b7..ad0d1f6 100644
--- a/src/views/fileType/document.vue
+++ b/src/views/fileType/document.vue
@@ -16,7 +16,7 @@
 
 <script>
 import ShowFile from "@/components/ShowFile/ShowFile";
-import { fileArrangements } from '@/utils/file-operations'
+import { createFiles, fileArrangements } from '@/utils/file-operations'
 
 export default {
   components: {ShowFile},
@@ -39,16 +39,7 @@ export default {
         },
         { label: '刷新', operation: 'refresh'},
         { divider: true, operation: 'divider' },
-        { label: '新建', operation: 'create' , homeDisable: true, child: [
-            { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
-            { divider: true, operation: 'divider' },
-            { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
-            { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
-            { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
-            { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
-            { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
-            { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
-          ]
+        { label: '新建', operation: 'create' , homeDisable: true, child: createFiles
         },
         { divider: true, operation: 'divider' },
         { label: '写文章', operation: 'createMarkdownFile'},
diff --git a/src/views/fileType/image.vue b/src/views/fileType/image.vue
index 894b4d5..3ba22a7 100644
--- a/src/views/fileType/image.vue
+++ b/src/views/fileType/image.vue
@@ -15,7 +15,7 @@
 
 <script>
 import ShowFile from "@/components/ShowFile/ShowFile";
-import { fileArrangements } from '@/utils/file-operations'
+import { createFiles, fileArrangements } from '@/utils/file-operations'
 
 export default {
   components: {ShowFile},
@@ -38,16 +38,7 @@ export default {
         },
         { label: '刷新', operation: 'refresh'},
         { divider: true, operation: 'divider' },
-        { label: '新建', operation: 'create' , homeDisable: true, child: [
-            { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
-            { divider: true, operation: 'divider' },
-            { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
-            { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
-            { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
-            { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
-            { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
-            { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
-          ]
+        { label: '新建', operation: 'create' , homeDisable: true, child: createFiles
         },
         { divider: true, operation: 'divider' },
         { label: '写文章', operation: 'createMarkdownFile'},
diff --git a/src/views/fileType/video.vue b/src/views/fileType/video.vue
index 8ac318c..d50bfbd 100644
--- a/src/views/fileType/video.vue
+++ b/src/views/fileType/video.vue
@@ -16,7 +16,7 @@
 
 <script>
 import ShowFile from "@/components/ShowFile/ShowFile";
-import { fileArrangements } from '@/utils/file-operations'
+import { createFiles, fileArrangements } from '@/utils/file-operations'
 
 export default {
   components: {ShowFile},
@@ -39,16 +39,7 @@ export default {
         },
         { label: '刷新', operation: 'refresh'},
         { divider: true, operation: 'divider' },
-        { label: '新建', operation: 'create' , homeDisable: true, child: [
-            { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
-            { divider: true, operation: 'divider' },
-            { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
-            { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
-            { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
-            { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
-            { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
-            { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
-          ]
+        { label: '新建', operation: 'create' , homeDisable: true, child: createFiles
         },
         { divider: true, operation: 'divider' },
         { label: '写文章', operation: 'createMarkdownFile'},
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 82fdfcd..c25d372 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -12,7 +12,7 @@
 
 <script>
 import ShowFile from "@/components/ShowFile/ShowFile";
-import { fileArrangements } from '@/utils/file-operations'
+import { createFiles, fileArrangements } from '@/utils/file-operations'
 
 export default {
   components: {ShowFile},
@@ -32,16 +32,7 @@ export default {
         },
         { label: '刷新', operation: 'refresh'},
         { divider: true, operation: 'divider' },
-        { label: '新建', operation: 'create' ,child: [
-            { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
-            { divider: true, operation: 'divider' },
-            { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
-            { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
-            { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
-            { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
-            { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
-            { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
-          ]
+        { label: '新建', operation: 'create' ,child: createFiles
         },
         { divider: true, operation: 'divider' },
         { label: '写文章', operation: 'createMarkdownFile'},
diff --git a/src/views/recently/index.vue b/src/views/recently/index.vue
index 1c35d4f..4db3e41 100644
--- a/src/views/recently/index.vue
+++ b/src/views/recently/index.vue
@@ -14,7 +14,7 @@
 
 <script>
   import ShowFile from "@/components/ShowFile/ShowFile";
-  import { fileArrangements } from '@/utils/file-operations'
+  import { createFiles, fileArrangements } from '@/utils/file-operations'
 
   export default {
     components: {ShowFile},
@@ -37,17 +37,7 @@
           },
           { label: '刷新', operation: 'refresh'},
           { divider: true, operation: 'divider' },
-          { label: '新建', operation: 'create' , homeDisable: true, child: [
-              { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
-              { divider: true, operation: 'divider' },
-              { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
-              { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
-              { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
-              { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
-              { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
-              { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
-            ]
-          },
+          { label: '新建', operation: 'create' , homeDisable: true, child: createFiles},
           { divider: true, operation: 'divider' },
           { label: '写文章', operation: 'createMarkdownFile'},
         ]
diff --git a/src/views/tag/index.vue b/src/views/tag/index.vue
index 8830f7c..bc154f0 100644
--- a/src/views/tag/index.vue
+++ b/src/views/tag/index.vue
@@ -16,7 +16,7 @@
 
 <script>
 import ShowFile from "@/components/ShowFile/ShowFile";
-import { fileArrangements } from '@/utils/file-operations'
+import { createFiles, fileArrangements } from '@/utils/file-operations'
 
 export default {
   components: {ShowFile},
@@ -39,16 +39,7 @@ export default {
         },
         { label: '刷新', operation: 'refresh'},
         { divider: true, operation: 'divider' },
-        { label: '新建', operation: 'create' , homeDisable: true, child: [
-            { label: '文件夹', operation: 'createFolder', iconClass: 'folder'},
-            { divider: true, operation: 'divider' },
-            { label: '文本', operation: 'createTextFile', iconClass: 'file-txt'},
-            { label: '思维导图', operation: 'createMinderFile', iconClass: 'file-mind'},
-            { label: '流程图', operation: 'createDrawioFile', iconClass: 'file-drawio'},
-            { label: 'Word', operation: 'createWordFile', iconClass: 'file-word'},
-            { label: 'Excel', operation: 'createExcelFile', iconClass: 'file-excel'},
-            { label: 'PPT', operation: 'createPPTFile', iconClass: 'file-ppt'},
-          ]
+        { label: '新建', operation: 'create' , homeDisable: true, child: createFiles
         },
         { divider: true, operation: 'divider' },
         { label: '写文章', operation: 'createMarkdownFile'},