🎈 perf: 优化上传

src/App.vue

@@ -1,9 +1,12 @@
 <template>
+    <n-message-provider>
     <RouterView />
+</n-message-provider>
 </template>
 
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
+import { NMessageProvider } from 'naive-ui';
 </script>
 
 <style>

src/components/shared/WidgetUpLoad.vue

@@ -1,10 +1,5 @@
 <template>
-  <n-upload
-    multiple
-    directory-dnd
-    action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
-    :max="5"
-  >
+  <n-upload multiple directory-dnd :action="$props.uploadURL" @before-upload="beforeUpload" :max="5">
     <n-upload-dragger>
       <div style="margin-bottom: 12px">
         <n-icon size="48" :depth="3">
@@ -22,19 +17,38 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { NUpload, NUploadDragger,NIcon, NP, NText } from 'naive-ui'
+import { defineComponent,type PropType } from 'vue';
+import { NUpload, NUploadDragger, NIcon, NP, NText, useMessage } from 'naive-ui';
+import type { UploadFileInfo } from 'naive-ui'
+
 export default defineComponent({
-    components: {
-      NUpload,
-      NUploadDragger,
-      NIcon,
-      NP,
-      NText
+  setup() {
+    const message = useMessage()
+    return {
+      async beforeUpload(data: {
+        file: UploadFileInfo
+        fileList: UploadFileInfo[]
+      }) {
+        if (data.file.file?.type !== 'xlsx') {
+          message.error('只能上传xlsx格式的文件，请重新上传')
+          return false
+        }
+        return true
+      }
+    }
+  },
+  components: {
+    NUpload,
+    NUploadDragger,
+    NIcon,
+    NP,
+    NText
+  },
+  props: {
+    uploadURL: {
+      type: String as PropType<string>,
+      required: true
     }
-  })
+  }
+});
 </script>
-
-<style scoped>
-/* Add component-specific styles here */
-</style>

src/utils/axios.ts

@@ -1,8 +1,6 @@
 import axios from 'axios';
 import axiosRetry from 'axios-retry';
-
-// 使用环境变量设置 baseURL
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api'; // 提供一个默认值
+import { API_BASE_URL } from '@/utils/config';
 
 const instance = axios.create({
     baseURL: API_BASE_URL,

src/utils/config.ts

@@ -0,0 +1 @@
+export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://127.0.0.1:8000';

src/views/database/UpLoad.vue

@@ -2,12 +2,15 @@
 import { ref } from 'vue';
 import UiParentCard from '@/components/shared/UiParentCard.vue';
 import UpLoad from '@/components/shared/WidgetUpLoad.vue';
+import { API_BASE_URL } from '@/utils/config';
+const tp_upload = `${API_BASE_URL}/talking_points/upload`;
+const tp_upload_over = `${API_BASE_URL}/talking_points/overwrite_upload`;
 </script>
 <template>
     <v-row>
         <v-col cols="12" md="12">
             <UiParentCard title="数据上传"> 
-                <UpLoad/>
+                <UpLoad :uploadURL="tp_upload" />
             </UiParentCard>
         </v-col>
     </v-row>

src/views/pages/Versions.vue

@@ -2,14 +2,14 @@
 import { ref } from 'vue';
 import UiParentCard from '@/components/shared/UiParentCard.vue';
 import UpLoad from '@/components/shared/WidgetUpLoad.vue';
-
+import { API_BASE_URL } from '@/utils/config';
+const upload = `${API_BASE_URL}/upload-file/`;
 </script>
 <template>
     <v-row>
         <v-col cols="12" md="12">
             <UiParentCard title="管理版本"> 
-                <div class="pa-7 pt-1"><p class="text-body-1">This is a sample page </p></div>
-                <UpLoad/>
+                <UpLoad :uploadURL="upload" />
             </UiParentCard>
         </v-col>
     </v-row>