优化加载文档时的提示，增加进度显示

AlanLee1996 · May 22, 2023 · 1864393 · 1864393
1 parent ae7b9d1
commit 1864393
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 18 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -40,6 +40,8 @@
  </el-main>
  </div>
  </el-container>
+
+ <Loading />
  </el-config-provider>
 </template>
 
@@ -50,7 +52,8 @@ import { useChatStore } from "~/store/chat";
 import { useAppStore } from "~/store/app";
 import { storeToRefs } from "pinia";
 import { useDark, useToggle } from "@vueuse/core";
-import { ElLoading } from "element-plus";
+
+import { el } from "element-plus/es/locale";
 const isDark = useDark();
 
 let chatStore = useChatStore();
@@ -130,23 +133,8 @@ if (appStore.isMobile) {
 appStore.chatDocument = false;
 //重置loading状态
 appStore.loading = false;
-let loadingDom = null;
 appStore.$subscribe((_, state) => {
  localStorage.setItem("appStore_001", JSON.stringify(state));
-
- //console.log(state.loading);
- if (state.loading) {
- loadingDom = ElLoading.service({
- lock: true,
- text: "正在处理中，请稍等...",
- background: "rgba(255, 255, 255, 0.8)",
- });
- } else if (!state.loading) {
- try {
- loadingDom.close();
- } catch (error) {}
- }
- //打开loading
 });
 </script>
 

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -13,7 +13,7 @@ declare module '@vue/runtime-core' {
  BaseHeader: typeof import('./components/layouts/BaseHeader.vue')['default']
  BaseSide: typeof import('./components/layouts/BaseSide.vue')['default']
  Chat: typeof import('./components/Chat.vue')['default']
- copy: typeof import('./components/layouts/BaseHeader copy.vue')['default']
+ copy: typeof import('./components/HelloWorld copy.vue')['default']
  DocChat: typeof import('./components/DocChat.vue')['default']
  DocHeader: typeof import('./components/layouts/DocHeader.vue')['default']
  DocSide: typeof import('./components/layouts/DocSide.vue')['default']
@@ -34,6 +34,7 @@ declare module '@vue/runtime-core' {
  ElTag: typeof import('element-plus/es')['ElTag']
  ElText: typeof import('element-plus/es')['ElText']
  HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+ Loading: typeof import('./components/Loading.vue')['default']
  Logo: typeof import('./components/logo.vue')['default']
  PDFViewer: typeof import('./components/PDFViewer.vue')['default']
  Settings: typeof import('./components/Settings.vue')['default']

diff --git a/src/components/Loading.vue b/src/components/Loading.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useAppStore } from "~/store/app";
+import { storeToRefs } from "pinia";
+import { ElLoading } from "element-plus";
+let appStore = useAppStore();
+const { loading, loadingText } = storeToRefs(appStore);
+//全局loading动画
+let loadingDom: any = null;
+watch(
+ () => loading.value,
+ (value, oldValue) => {
+ if (loading.value) {
+ loadingDom = ElLoading.service({
+ lock: true,
+ text: loadingText.value,
+ background: "rgba(255, 255, 255, 0.8)",
+ });
+ } else {
+ try {
+ loadingDom.close();
+ } catch (error) {}
+ }
+ },
+ { immediate: true }
+);
+watch(
+ () => loadingText.value,
+ (value, oldValue) => {
+ try {
+ loadingDom.setText(value);
+ } catch (error) {}
+ },
+ { immediate: true }
+);
+</script>
+
+<template></template>
+
+<style></style>
diff --git a/src/components/layouts/DocSide.vue b/src/components/layouts/DocSide.vue
@@ -159,6 +159,7 @@ const changeHandle = (event: any) => {
  case "docx":
  console.log("开始处理word");
  appStore.loading = true;
+ appStore.loadingText = "正在提取word内容";
  fileReader.readAsArrayBuffer(file);
  fileReader.onload = () => {
  fileSrc.value = fileReader.result;
@@ -167,6 +168,7 @@ const changeHandle = (event: any) => {
  case "pdf":
  console.log("开始处理pdf");
  appStore.loading = true;
+ appStore.loadingText = "正在提取pdf内容";
  fileSrc.value = URL.createObjectURL(file);
  getPdfContent();
  break;
@@ -212,6 +214,7 @@ const docxRendered = async () => {
  .catch(function (error) {
  console.log(error);
  });
+ appStore.loadingText = `正在处理第 ${i + 1} / ${elArr.length} 页`;
  }
  appStore.loading = false;
 };
@@ -236,6 +239,7 @@ const getPdfContent = () => {
  .then(function (data) {
  console.log(data);
  successPage++;
+ appStore.loadingText = `正在处理第 ${successPage} / ${pdf.numPages} 页`;
  })
  .catch(function (error) {
  console.log(error);
@@ -249,7 +253,7 @@ const getPdfContent = () => {
  clearInterval(timer);
  appStore.loading = false;
  }
- }, 100);
+ }, 1000);
  });
 };
 </script>

diff --git a/src/store/app.ts b/src/store/app.ts
@@ -4,6 +4,7 @@ export const useAppStore = defineStore('app', {
  state: () => ({
  //加载全屏loading
  loading:false,
+ loadingText:'',
  //菜单状态
  showSide:true,
  //是否手机