feat: 增加登陆

.env.development

@@ -1,2 +1,2 @@
-VITE_BASE_URL = 'http://192.168.1.3:48080'
+VITE_BASE_URL = 'http://192.168.1.3:48081'
-VITE_SOCKET_SERVER = 'http://192.168.1.3:48080'
+VITE_SOCKET_SERVER = 'http://192.168.1.3:48081'

src/api/server/axiosInstance.ts

@@ -183,7 +183,7 @@ const createAxiosInstance = (module: APIConfigKeys, config: Config) => {
       const unKnowError = `连接出错(${error.response.status})!`
       if (status === 401) {
         localStorage.removeItem(Keys.STORAGE_TOKEN)
-        router.push('/file/document')
+        router.push('/login')
       }
 
       const msg = networkErrMap[status] ? networkErrMap[status] : unKnowError
@@ -229,7 +229,7 @@ async function logout() {
   removeToken()
   isShowLogout = false
   deleteUserCache()
-  window.location.href = '/file/document'
+  window.location.href = '/login'
 }
 
 export default createAxiosInstance

src/components/dashboard/Edfs-exception.vue

@@ -10,7 +10,7 @@
         type="primary"
         @click="
           () => {
-            router.push('/file/document')
+            router.push('/login')
           }
         "
         >返回首页</el-button

src/pages/fileDoc/components/markdownDrawer.vue

@@ -84,6 +84,12 @@ function initEditor() {
       enable: false,
     },
     after: () => {
+      // 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: {

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>

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()

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 },
 ]
 

src/pages/layout.vue

@@ -77,7 +77,7 @@
             style="--el-switch-on-color: #2c2c2c; --el-switch-off-color: #f2f2f2"
             @change="toggle"
           />
-          <!-- <el-dropdown
+          <el-dropdown
             style="width: 100%; height: 100%"
             @command="command => handleCommand(command)"
           >
@@ -87,12 +87,12 @@
             </div>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item command="personal">个人中心</el-dropdown-item>
+                <!-- <el-dropdown-item command="personal">个人中心</el-dropdown-item> -->
-                <el-dropdown-item command="theme">{{ themeText }}</el-dropdown-item>
+                <!-- <el-dropdown-item command="theme">{{ themeText }}</el-dropdown-item> -->
                 <el-dropdown-item command="logout">退出登录</el-dropdown-item>
               </el-dropdown-menu>
             </template>
-          </el-dropdown> -->
+          </el-dropdown>
         </div>
       </el-header>
       <main class="layout-main">
@@ -259,7 +259,7 @@ async function loginOut() {
       type: 'warning',
     })
     await userStore.loginout()
-    push('/file/document')
+    push('/login')
   } catch {}
 }
 </script>

src/pages/system/login/index.vue

@@ -24,7 +24,7 @@
             />
           </el-form-item>
         </el-form>
-        <el-button  color="#08a4f0" class="login-btn" @click="onLogin" :loading="isLoading"
+        <el-button color="#08a4f0" class="login-btn" @click="onLogin" :loading="isLoading"
           >登录</el-button
         >
       </div>
@@ -231,7 +231,7 @@ onMounted(() => {
       color: #333333;
       margin-bottom: 48px;
     }
-    :deep(.el-form-item)  {
+    :deep(.el-form-item) {
       margin-bottom: 26px;
     }
     :deep(.el-input) {

src/router/index.ts

@@ -4,6 +4,7 @@ import { useUserStore } from '../stores/user'
 import { usePermissionStore } from '@/stores/permission'
 import { useDictStore } from '@/stores/dict'
 import { getToken } from '@/utils/auth'
+import { pa } from 'element-plus/es/locale/index.mjs'
 
 export const defaultRoute = [
   {
@@ -15,6 +16,15 @@ export const defaultRoute = [
       title: '404',
     },
   },
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/pages/system/login/index.vue'),
+    meta: {
+      hidden: true,
+      title: '登录',
+    },
+  },
 
   {
     path: '/file',
@@ -59,14 +69,14 @@ const router = createRouter({
 const whiteList = ['/login']
 
 router.beforeEach(async (to, from, next) => {
-  // if (!getToken()) {
+  if (!getToken()) {
-  //   if (whiteList.indexOf(to.path) !== -1) {
+    if (whiteList.indexOf(to.path) !== -1) {
-  //     next()
+      next()
-  //   } else {
+    } else {
-  //     next('/file/document')
+      next('/login')
-  //   }
+    }
-  //   return
+    return
-  // }
+  }
   if (to.path === '/OnlineDocument') {
     next('/file/document')
     return