d

2024-10-07 00:04:59 +08:00
parent 34e636d08f
commit 1b0fa9bb30
9 changed files with 499 additions and 176 deletions
@@ -1 +1 @@
-VITE_API_BASE_URL_DEV=http://localhost:12345/
+VITE_API_BASE_URL_DEV=http://localhost:12345
@@ -1 +1 @@
-VITE_API_BASE_URL_PROD=https://api.yourdomain.com
+VITE_API_BASE_URL_PROD=https://share.lanol.cn
@@ -18,6 +18,7 @@
    "lucide-vue-next": "^0.445.0",
    "pinia": "^2.2.2",
    "qrcode.vue": "^3.4.1",
+    "spark-md5": "^3.0.2",
    "vue": "^3.5.8",
    "vue-router": "^4.4.5"
  },
@@ -27,6 +28,7 @@
    "@rushstack/eslint-patch": "^1.10.4",
    "@tsconfig/node20": "^20.1.4",
    "@types/node": "^20.16.7",
+    "@types/spark-md5": "^3.0.4",
    "@vitejs/plugin-vue": "^5.1.4",
    "@vitejs/plugin-vue-jsx": "^4.0.1",
    "@vue/eslint-config-prettier": "^9.0.0",
@@ -6,6 +6,7 @@ specifiers:
  '@rushstack/eslint-patch': ^1.10.4
  '@tsconfig/node20': ^20.1.4
  '@types/node': ^20.16.7
+  '@types/spark-md5': ^3.0.4
  '@vitejs/plugin-vue': ^5.1.4
  '@vitejs/plugin-vue-jsx': ^4.0.1
  '@vue/eslint-config-prettier': ^9.0.0
@@ -24,6 +25,7 @@ specifiers:
  prettier: ^3.3.3
  qrcode.vue: ^3.4.1
  rimraf: ^6.0.1
+  spark-md5: ^3.0.2
  tailwindcss: ^3.4.13
  typescript: ~5.4.5
  vite: ^5.4.7
@@ -38,6 +40,7 @@ dependencies:
  lucide-vue-next: 0.445.0_vue@3.5.8
  pinia: 2.2.2_typescript@5.4.5+vue@3.5.8
  qrcode.vue: 3.4.1_vue@3.5.8
+  spark-md5: 3.0.2
  vue: 3.5.8_typescript@5.4.5
  vue-router: 4.4.5_vue@3.5.8

@@ -47,6 +50,7 @@ devDependencies:
  '@rushstack/eslint-patch': 1.10.4
  '@tsconfig/node20': 20.1.4
  '@types/node': 20.16.7
+  '@types/spark-md5': 3.0.4
  '@vitejs/plugin-vue': 5.1.4_vite@5.4.7+vue@3.5.8
  '@vitejs/plugin-vue-jsx': 4.0.1_vite@5.4.7+vue@3.5.8
  '@vue/eslint-config-prettier': 9.0.0_edq2hqhb5ywdex3d2mazvmybbq
@@ -930,6 +934,10 @@ packages:
      undici-types: 6.19.8
    dev: true

+  /@types/spark-md5/3.0.4:
+    resolution: {integrity: sha512-qtOaDz+IXiNndPgYb6t1YoutnGvFRtWSNzpVjkAPCfB2UzTyybuD4Tjgs7VgRawum3JnJNRwNQd4N//SvrHg1Q==}
+    dev: true
+
  /@typescript-eslint/eslint-plugin/7.18.0_rwblscj2v5mttegw6cqzsnmxke:
    resolution: {integrity: sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==}
    engines: {node: ^18.18.0 || >=20.0.0}
@@ -2959,6 +2967,10 @@ packages:
    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
    engines: {node: '>=0.10.0'}

+  /spark-md5/3.0.2:
+    resolution: {integrity: sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw==}
+    dev: false
+
  /speakingurl/14.0.1:
    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
    engines: {node: '>=0.10.0'}
@@ -11,7 +11,6 @@ const router = createRouter({
    {
      path: '/send',
      name: 'Send',
-      // 直接使用动态导入，不再包裹在 defineAsyncComponent 中
      component: () => import('@/views/SendFileView.vue')
    }
  ]
@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+import { reactive } from 'vue'
+
+export const useFileDataStore = defineStore('fileData', () => {
+  const receiveData = reactive(JSON.parse(localStorage.getItem('receiveData') || '[]') || []) // 接收的数据
+  const shareData = reactive(JSON.parse(localStorage.getItem('shareData') || '[]') || []) // 接收的数据
+  function save() {
+    localStorage.setItem('receiveData', JSON.stringify(receiveData))
+    localStorage.setItem('shareData', JSON.stringify(shareData))
+  }
+  function addReceiveData(data: any) {
+    receiveData.unshift(data)
+    save()
+  }
+
+  function addShareData(data: any) {
+    shareData.unshift(data)
+    save()
+  }
+
+  function deleteReceiveData(index: number) {
+    receiveData.splice(index, 1)
+    save()
+  }
+
+  function deleteShareData(index: number) {
+    shareData.splice(index, 1)
+    save()
+  }
+  return {
+    receiveData,
+    shareData,
+    save,
+    addShareData,
+    addReceiveData,
+    deleteReceiveData,
+    deleteShareData
+  }
+})
@@ -5,12 +5,13 @@ const baseURL =
  import.meta.env.MODE === 'production'
    ? import.meta.env.VITE_API_BASE_URL_PROD
    : import.meta.env.VITE_API_BASE_URL_DEV
-console.log(baseURL)
-console.log(import.meta.env.MODE)
+
+// 确保 baseURL 是一个有效的字符串
+const sanitizedBaseURL = typeof baseURL === 'string' ? baseURL : ''

 // 创建 axios 实例
 const api = axios.create({
-  baseURL,
+  baseURL: sanitizedBaseURL,
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json'
@@ -25,6 +26,12 @@ api.interceptors.request.use(
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
+
+    // 确保 URL 是有效的
+    if (config.url && !config.url.startsWith('http')) {
+      config.url = `${sanitizedBaseURL}/${config.url.replace(/^\//, '')}`
+    }
+
    return config
  },
  (error) => {
@@ -43,7 +50,7 @@ api.interceptors.response.use(
      switch (error.response.status) {
        case 401:
          // 未授权,可能需要重新登录
-          console.error('未授权,请重新登录')
+          console.error('未授权，请重新登录')
          break
        case 403:
          // 禁止访问
@@ -56,8 +63,10 @@ api.interceptors.response.use(
        default:
          console.error('发生错误:', error.response.data)
      }
+    } else if (error.request) {
+      console.error('未收到响应:', error.request)
    } else {
-      console.error('发生错误:', error.message)
+      console.error('请求配置错误:', error.message)
    }
    return Promise.reject(error)
  }
@@ -1,75 +1,120 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300">
+  <div
+    class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300"
+  >
    <div class="w-full max-w-md relative z-10">
-      <div 
+      <div
        class="rounded-3xl shadow-2xl overflow-hidden border transform transition-all duration-300"
        :class="[
-          isDarkMode 
-            ? 'bg-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-xl border-gray-700' 
+          isDarkMode
+            ? 'bg-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-xl border-gray-700'
            : 'bg-white border-gray-200'
        ]"
      >
        <div class="p-8">
          <div class="flex justify-center mb-8">
-            <div class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow">
+            <div
+              class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
+            >
              <div class="rounded-full bg-gray-900 p-2">
                <BoxIcon class="w-8 h-8 text-white" />
              </div>
            </div>
          </div>
-          <h2 @click="toSend"  class="text-3xl cursor-pointer font-extrabold text-center mb-6" :class="[isDarkMode ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300' : 'text-indigo-600']">FileCodeBox</h2>
+          <h2
+            @click="toSend"
+            class="text-3xl cursor-pointer font-extrabold text-center mb-6"
+            :class="[
+              isDarkMode
+                ? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
+                : 'text-indigo-600'
+            ]"
+          >
+            FileCodeBox
+          </h2>
          <form @submit.prevent="handleSubmit">
            <div class="mb-6 relative">
-              <label for="password" class="block text-sm font-medium mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">取件口令</label>
+              <label
+                for="code"
+                class="block text-sm font-medium mb-2"
+                :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
+                >取件码</label
+              >
              <div class="relative">
                <input
-                  id="password"
-                  v-model="password"
-                  :type="showPassword ? 'text' : 'password'"
+                  id="code"
+                  v-model="code"
+                  type="text"
                  class="w-full px-4 py-3 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 pr-10"
-                  :class="[isDarkMode ? 'bg-gray-700 bg-opacity-50' : 'bg-gray-100', { 'ring-2 ring-red-500': error }]"
-                  placeholder="请输入您的口令"
+                  :class="[
+                    isDarkMode ? 'bg-gray-700 bg-opacity-50' : 'bg-gray-100',
+                    { 'ring-2 ring-red-500': error }
+                  ]"
+                  placeholder="请输入5位取件码"
                  required
+                  :readonly="inputStatus.readonly"
+                  maxlength="5"
                  @focus="isInputFocused = true"
                  @blur="isInputFocused = false"
                />
-                <button
-                  @click="togglePasswordVisibility"
-                  type="button"
-                  class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-white focus:outline-none"
+                <div
+                  v-if="inputStatus.loading"
+                  class="absolute inset-y-0 right-0 flex items-center pr-3"
                >
-                  <EyeIcon v-if="!showPassword" class="w-5 h-5" />
-                  <EyeOffIcon v-else class="w-5 h-5" />
-                </button>
+                  <!-- 这里可以添加一个加载动画 -->
+                  <span
+                    class="animate-spin rounded-full h-5 w-5 border-b-2 border-indigo-500"
+                  ></span>
+                </div>
              </div>
-              <div class="absolute -bottom-0.5 left-2 h-0.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-300 ease-in-out" :class="{'w-97-100': isInputFocused, 'w-0': !isInputFocused}"></div>
-              <p v-if="error" class="text-red-500 text-sm mt-1">{{ error }}</p>
+              <div
+                class="absolute -bottom-0.5 left-2 h-0.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-300 ease-in-out"
+                :class="{ 'w-97-100': isInputFocused, 'w-0': !isInputFocused }"
+              ></div>
            </div>
            <button
              type="submit"
              class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-3 px-4 rounded-lg hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
+              :disabled="inputStatus.loading"
            >
              <span class="flex items-center justify-center relative z-10">
-                <span>提取文件</span>
-                <ArrowRightIcon class="w-5 h-5 ml-2 transition-transform duration-300 transform group-hover:translate-x-1" />
+                <span>{{ inputStatus.loading ? '处理中...' : '提取文件' }}</span>
+                <ArrowRightIcon
+                  class="w-5 h-5 ml-2 transition-transform duration-300 transform group-hover:translate-x-1"
+                />
              </span>
-              <span class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
+              <span
+                class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+              ></span>
            </button>
          </form>
-          
+
          <!-- 添加一个新的按钮用于导航到发送文件页面 -->
          <div class="mt-6 text-center">
-            <router-link to="/send" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
+            <router-link
+              to="/send"
+              class="text-indigo-400 hover:text-indigo-300 transition duration-300"
+            >
              需要发送文件？点击这里
            </router-link>
          </div>
        </div>
-        <div class="px-8 py-4 bg-opacity-50 flex justify-between items-center" :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']">
-          <span class="text-sm flex items-center" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
+        <div
+          class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
+          :class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
+        >
+          <span
+            class="text-sm flex items-center"
+            :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
+          >
            <ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
            安全加密
          </span>
-          <button @click="toggleDrawer" class="text-sm hover:text-indigo-300 transition duration-300 flex items-center" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']">
+          <button
+            @click="toggleDrawer"
+            class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
+            :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+          >
            取件记录
            <ClipboardListIcon class="w-4 h-4 ml-1" />
          </button>
@@ -79,30 +124,72 @@

    <!-- 抽屉式取件记录 -->
    <transition name="drawer">
-      <div v-if="showDrawer" class="fixed inset-y-0 right-0 w-full sm:w-96 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col" :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']">
-        <div class="flex justify-between items-center p-6 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
-          <h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">取件记录</h3>
-          <button @click="toggleDrawer" class="hover:text-white transition duration-300" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']">
+      <div
+        v-if="showDrawer"
+        class="fixed inset-y-0 right-0 w-full sm:w-96 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
+        :class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
+      >
+        <div
+          class="flex justify-between items-center p-6 border-b"
+          :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
+        >
+          <h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
+            取件记录
+          </h3>
+          <button
+            @click="toggleDrawer"
+            class="hover:text-white transition duration-300"
+            :class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
+          >
            <XIcon class="w-6 h-6" />
          </button>
        </div>
        <div class="flex-grow overflow-y-auto p-6">
          <transition-group name="list" tag="div" class="space-y-4">
-            <div v-for="record in records" :key="record.id" class="bg-opacity-50 rounded-lg p-4 flex justify-between items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102" :class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']">
+            <div
+              v-for="record in records"
+              :key="record.id"
+              class="bg-opacity-50 rounded-lg p-4 flex justify-between items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102"
+              :class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"
+            >
              <div class="flex items-center space-x-4">
                <div class="flex-shrink-0">
-                  <FileIcon class="w-10 h-10" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
+                  <FileIcon
+                    class="w-10 h-10"
+                    :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+                  />
                </div>
                <div>
-                  <p class="font-medium text-lg" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">{{ record.filename }}</p>
-                  <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">{{ record.date }} · {{ record.size }}</p>
+                  <p
+                    class="font-medium text-lg"
+                    :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+                  >
+                    {{ record.filename }}
+                  </p>
+                  <p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
+                    {{ record.date }} · {{ record.size }}
+                  </p>
                </div>
              </div>
              <div class="flex space-x-2">
-                <button @click="viewDetails(record)" class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[isDarkMode ? 'hover:bg-indigo-400 text-indigo-400' : 'hover:bg-indigo-100 text-indigo-600']">
+                <button
+                  @click="viewDetails(record)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
+                  :class="[
+                    isDarkMode
+                      ? 'hover:bg-indigo-400 text-indigo-400'
+                      : 'hover:bg-indigo-100 text-indigo-600'
+                  ]"
+                >
                  <EyeIcon class="w-5 h-5" />
                </button>
-                <button @click="deleteRecord(record.id)" class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600']">
+                <button
+                  @click="deleteRecord(record.id)"
+                  class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
+                  :class="[
+                    isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
+                  ]"
+                >
                  <TrashIcon class="w-5 h-5" />
                </button>
              </div>
@@ -114,92 +201,203 @@

    <!-- 记录详情弹窗 -->
    <transition name="fade">
-      <div v-if="selectedRecord" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        <div class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70" :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">          <h3 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">文件详情</h3>
+      <div
+        v-if="selectedRecord"
+        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+      >
+        <div
+          class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70"
+          :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
+        >
+          <h3
+            class="text-2xl font-bold mb-6"
+            :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+          >
+            文件详情
+          </h3>
          <div class="space-y-4">
            <div class="flex items-center">
-              <FileIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"><span class="font-medium">文件名：</span>{{ selectedRecord.filename }}</p>
+              <FileIcon
+                class="w-6 h-6 mr-3"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              />
+              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
+                <span class="font-medium">文件名：</span>{{ selectedRecord.filename }}
+              </p>
            </div>
            <div class="flex items-center">
-              <CalendarIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"><span class="font-medium">取件日期：</span>{{ selectedRecord.date }}</p>
+              <CalendarIcon
+                class="w-6 h-6 mr-3"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              />
+              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
+                <span class="font-medium">取件日期：</span>{{ selectedRecord.date }}
+              </p>
            </div>
            <div class="flex items-center">
-              <HardDriveIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"><span class="font-medium">文件大小：</span>{{ selectedRecord.size }}</p>
+              <HardDriveIcon
+                class="w-6 h-6 mr-3"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              />
+              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
+                <span class="font-medium">文件大小：</span>{{ selectedRecord.size }}
+              </p>
            </div>
            <div class="flex items-center">
-              <DownloadIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
-              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"><span class="font-medium">下载次数：</span>{{ selectedRecord.downloads }}</p>
+              <DownloadIcon
+                class="w-6 h-6 mr-3"
+                :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
+              />
+              <p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
+                <span class="font-medium">下载次数：</span>{{ selectedRecord.downloads }}
+              </p>
            </div>
          </div>
-          
+
          <!-- 取件二维码部分 -->
          <div class="mt-6 flex flex-col items-center">
-            <h4 class="text-lg font-semibold mb-3" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">取件二维码</h4>
+            <h4
+              class="text-lg font-semibold mb-3"
+              :class="[isDarkMode ? 'text-white' : 'text-gray-800']"
+            >
+              取件二维码
+            </h4>
            <div class="bg-white p-2 rounded-lg shadow-md">
              <QRCode :value="getQRCodeValue(selectedRecord)" :size="128" level="M" />
            </div>
-            <p class="mt-2 text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">扫描二维码快速取件</p>
+            <p class="mt-2 text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
+              扫描二维码快速取件
+            </p>
          </div>
-          
-          <button @click="selectedRecord = null" class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105">
+
+          <button
+            @click="selectedRecord = null"
+            class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105"
+          >
            关闭
          </button>
        </div>
      </div>
    </transition>
+
+    <!-- 使用新的 AlertComponent -->
+    <AlertComponent
+      :show="showAlert"
+      :message="alertMessage"
+      :type="alertType"
+      @close="closeAlert"
+    />
  </div>
 </template>

 <script setup>
-import { ref, inject } from 'vue'
-import { BoxIcon, EyeIcon, EyeOffIcon, ArrowRightIcon, ShieldCheckIcon, ClipboardListIcon, XIcon, TrashIcon, FileIcon, CalendarIcon, HardDriveIcon, DownloadIcon } from 'lucide-vue-next'
-import { useRouter } from 'vue-router'
-import QRCode from 'qrcode.vue'  // 导入 QRCode 组件
+import { ref, inject, onMounted, watch } from 'vue'
+import {
+  BoxIcon,
+  EyeIcon,
+  ArrowRightIcon,
+  ShieldCheckIcon,
+  ClipboardListIcon,
+  XIcon,
+  TrashIcon,
+  FileIcon,
+  CalendarIcon,
+  HardDriveIcon,
+  DownloadIcon
+} from 'lucide-vue-next'
+import { useRouter, useRoute } from 'vue-router'
+import QRCode from 'qrcode.vue'
+import { useFileDataStore } from '@/stores/fileData'
+import AlertComponent from '@/components/AlertComponent.vue'
+import { storeToRefs } from 'pinia'
+import api from '@/utils/api' // 假设您有一个请求工具函数

 const router = useRouter()
 const isDarkMode = inject('isDarkMode')
+const fileStore = useFileDataStore()
+const { receiveData } = storeToRefs(fileStore)
+const showAlert = ref(false)
+const alertMessage = ref('')
+const alertType = ref('success')

-const password = ref('')
-const showPassword = ref(false)
+const showAlertMessage = (message, type) => {
+  alertMessage.value = message
+  alertType.value = type
+  showAlert.value = true
+}
+
+const closeAlert = () => {
+  showAlert.value = false
+}
+const code = ref('')
+const inputStatus = ref({
+  readonly: false,
+  loading: false
+})
 const isInputFocused = ref(false)
 const error = ref('')
 const selectedRecord = ref(null)
 const showDrawer = ref(false)
-  
-const records = ref([
-  { id: 1, filename: '重要文档.pdf', date: '2023-05-15', size: '2.5 MB', downloads: 3, qrCode: 'path/to/qr-code-1.png' },
-  { id: 2, filename: '会议记录.docx', date: '2023-05-10', size: '1.2 MB', downloads: 2, qrCode: 'path/to/qr-code-2.png' },
-  { id: 3, filename: '财务报表.xlsx', date: '2023-05-05', size: '3.7 MB', downloads: 5, qrCode: 'path/to/qr-code-3.png' },
-  { id: 4, filename: '项目计划.pptx', date: '2023-05-01', size: '5.1 MB', downloads: 1, qrCode: 'path/to/qr-code-4.png' },
-  { id: 5, filename: '客户名单.csv', date: '2023-04-28', size: '0.8 MB', downloads: 4, qrCode: 'path/to/qr-code-5.png' },
-])
+const route = useRoute()

-const togglePasswordVisibility = () => {
-  showPassword.value = !showPassword.value
-}
+// 使用 receiveData 替代原来的 records
+const records = receiveData

-const handleSubmit = () => {
-  if (password.value.length < 6) {
-    error.value = '密码长度不能少于6个字符'
+onMounted(() => {
+  const query_code = route.query.code
+  if (query_code) {
+    code.value = query_code
+  }
+})
+
+watch(code, (newVal) => {
+  if (newVal.length === 5) {
+    handleSubmit()
+  }
+})
+
+const handleSubmit = async () => {
+  if (code.value.length !== 5) {
+    showAlertMessage('请输入5位取件码', 'error')
    return
  }
-  error.value = ''
-  // 这里添加提交逻辑
-  console.log('提交的口令:', password.value)
-  // 模拟添加新记录
-  const newRecord = {
-    id: records.value.length + 1,
-    filename: `新文件${records.value.length + 1}.pdf`,
-    date: new Date().toISOString().split('T')[0],
-    size: `${Math.random().toFixed(1)} MB`,
-    downloads: 0,
-    qrCode: `path/to/qr-code-${records.value.length + 1}.png`
+
+  // Clear previous error messages
+  showAlert.value = false
+  inputStatus.value.readonly = true
+  inputStatus.value.loading = true
+
+  try {
+    const res = await api.post('/share/select/', {
+      code: code.value
+    })
+    if (res.code === 200) {
+      if (res.detail) {
+        let flag = true
+        fileStore.receiveData.forEach((file) => {
+          if (file.code === res.detail.code) {
+            flag = false
+            return
+          }
+        })
+        if (flag) {
+          fileStore.addReceiveData(res.detail)
+        }
+        showDrawer.value = true
+      } else {
+        showAlertMessage('无效的取件码', 'error')
+      }
+    } else {
+      showAlertMessage(res.detail, 'error')
+    }
+  } catch (err) {
+    console.error('取件失败:', err)
+    showAlertMessage('取件失败，请稍后重试', 'error')
+  } finally {
+    inputStatus.value.readonly = false
+    inputStatus.value.loading = false
+    code.value = ''
  }
-  records.value.unshift(newRecord)
-  showDrawer.value = true
 }

 const viewDetails = (record) => {
@@ -207,7 +405,10 @@ const viewDetails = (record) => {
 }

 const deleteRecord = (id) => {
-  records.value = records.value.filter(record => record.id !== id)
+  const index = records.value.findIndex((record) => record.id === id)
+  if (index !== -1) {
+    fileStore.deleteReceiveData(index)
+  }
 }

 const toggleDrawer = () => {
@@ -219,38 +420,59 @@ const toSend = () => {
 }

 const getQRCodeValue = (record) => {
-  // 这里返回你想要在二维码中编码的信息
-  // 例如,可以是一个包含文件ID的URL
  return `https://your-domain.com/retrieve/${record.id}`
 }
 </script>

 <style scoped>
@keyframes blob {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  25% { transform: translate(20px, -50px) scale(1.1);  }
-  50% { transform: translate(-20px, 20px) scale(0.9); }
-  75% { transform: translate(50px, 50px) scale(1.05); }
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  25% {
+    transform: translate(20px, -50px) scale(1.1);
+  }
+  50% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+  75% {
+    transform: translate(50px, 50px) scale(1.05);
+  }
 }

-.animate-blob-1 { animation: blob 25s infinite; }
-.animate-blob-2 { animation: blob 30s infinite; }
-.animate-blob-3 { animation: blob 35s infinite; }
-.animate-blob-4 { animation: blob 40s infinite; }
+.animate-blob-1 {
+  animation: blob 25s infinite;
+}
+.animate-blob-2 {
+  animation: blob 30s infinite;
+}
+.animate-blob-3 {
+  animation: blob 35s infinite;
+}
+.animate-blob-4 {
+  animation: blob 40s infinite;
+}

 .animate-spin-slow {
  animation: spin 8s linear infinite;
 }

@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
  transition: opacity 0.3s ease;
 }
-.fade-enter-from, .fade-leave-to {
+.fade-enter-from,
+.fade-leave-to {
  opacity: 0;
 }

@@ -272,7 +494,7 @@ const getQRCodeValue = (record) => {
 .drawer-leave-to {
  transform: translateX(100%);
 }
-.w-97-100{
+.w-97-100 {
  width: 97%;
 }
-</style>
+</style>
@@ -378,7 +378,7 @@
 </template>

 <script setup lang="ts">
-import { ref, inject, onMounted } from 'vue'
+import { ref, inject, onMounted, computed } from 'vue'
 import {
  UploadCloudIcon,
  SendIcon,
@@ -396,10 +396,12 @@ import { useRouter } from 'vue-router'
 import BorderProgressBar from '../components/BorderProgressBar.vue'
 import QRCode from 'qrcode.vue'
 import AlertComponent from '../components/AlertComponent.vue'
-import api from '../utils/api'
+import SparkMD5 from 'spark-md5'
+import { useFileDataStore } from '../stores/fileData'

 const router = useRouter()
 const isDarkMode = inject('isDarkMode')
+const fileDataStore = useFileDataStore()

 const sendType = ref('file')
 const selectedFile = ref<File | null>(null)
@@ -411,48 +413,7 @@ const uploadProgress = ref(0)
 const showDrawer = ref(false)
 const selectedRecord = ref<any>(null)

-const sendRecords = ref([
-  {
-    id: 1,
-    filename: '项目报告.pdf',
-    date: '2023-05-15',
-    size: '3.2 MB',
-    expiration: '2023-05-22',
-    retrieveCode: 'ABC123'
-  },
-  {
-    id: 2,
-    filename: '会议纪要.docx',
-    date: '2023-05-10',
-    size: '1.5 MB',
-    expiration: '2023-05-17',
-    retrieveCode: 'DEF456'
-  },
-  {
-    id: 3,
-    filename: '财务数据.xlsx',
-    date: '2023-05-05',
-    size: '2.8 MB',
-    expiration: '2023-05-12',
-    retrieveCode: 'GHI789'
-  },
-  {
-    id: 4,
-    filename: '产品设计.psd',
-    date: '2023-05-01',
-    size: '15.7 MB',
-    expiration: '2023-05-08',
-    retrieveCode: 'JKL012'
-  },
-  {
-    id: 5,
-    filename: '客户反馈.txt',
-    date: '2023-04-28',
-    size: '0.5 MB',
-    expiration: '2023-05-05',
-    retrieveCode: 'MNO345'
-  }
-])
+const sendRecords = computed(() => fileDataStore.shareData)

 const showAlert = ref(false)
 const alertMessage = ref('')
@@ -470,41 +431,118 @@ const showAlertMessage = (
 const closeAlert = () => {
  showAlert.value = false
 }
+// 新增状态
+const fileHash = ref('')
+const uploadedChunks = ref<Set<number>>(new Set())

 const triggerFileUpload = () => {
  fileInput.value?.click()
 }

-const handleFileUpload = (event: Event) => {
+const handleFileUpload = async (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    selectedFile.value = target.files[0]
-    simulateFileUpload()
+    fileHash.value = await calculateFileHash(selectedFile.value)
+    startChunkUpload()
  }
 }

-const handleFileDrop = (event: DragEvent) => {
+const handleFileDrop = async (event: DragEvent) => {
  if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
    selectedFile.value = event.dataTransfer.files[0]
-    simulateFileUpload()
+    fileHash.value = await calculateFileHash(selectedFile.value)
+    startChunkUpload()
  }
 }

-const simulateFileUpload = () => {
-  uploadProgress.value = 0
-  const duration = 2000 // 总动画时长(毫秒)
-  const steps = 100 // 动画步数
-  const stepDuration = duration / steps
-  const stepIncrement = 100 / steps
+const calculateFileHash = async (file: File): Promise<string> => {
+  return new Promise((resolve) => {
+    const chunkSize = 2097152 // 2MB
+    const spark = new SparkMD5.ArrayBuffer()
+    const fileReader = new FileReader()

-  const animate = (step: number) => {
-    if (step <= steps) {
-      uploadProgress.value = step * stepIncrement
-      setTimeout(() => animate(step + 1), stepDuration)
+    let currentChunk = 0
+    const chunks = Math.ceil(file.size / chunkSize)
+
+    fileReader.onload = (e) => {
+      spark.append(e.target!.result as ArrayBuffer)
+      currentChunk++
+
+      if (currentChunk < chunks) {
+        loadNext()
+      } else {
+        resolve(spark.end())
+      }
    }
+
+    const loadNext = () => {
+      const start = currentChunk * chunkSize
+      const end = start + chunkSize >= file.size ? file.size : start + chunkSize
+      fileReader.readAsArrayBuffer(file.slice(start, end))
+    }
+
+    loadNext()
+  })
+}
+
+const startChunkUpload = async () => {
+  if (!selectedFile.value) return
+
+  const chunkSize = 1024 * 1024 // 1MB 每片
+  const totalChunks = Math.ceil(selectedFile.value.size / chunkSize)
+
+  // 检查已上传的切片
+  const { uploadedList } = await checkUploadedChunks(fileHash.value)
+  uploadedChunks.value = new Set(uploadedList)
+
+  for (let i = 0; i < totalChunks; i++) {
+    if (uploadedChunks.value.has(i)) {
+      console.log(`切片 ${i} 已上传,跳过`)
+      continue
+    }
+
+    const start = i * chunkSize
+    const end = Math.min(start + chunkSize, selectedFile.value.size)
+    const chunk = selectedFile.value.slice(start, end)
+
+    // 上传每个切片
+    await uploadChunk(chunk, i, totalChunks)
+
+    // 更新进度
+    uploadProgress.value = ((uploadedChunks.value.size + 1) / totalChunks) * 100
  }

-  animate(0)
+  // 所有切片上传完成,通知服务器合并文件
+  await mergeChunks(fileHash.value, totalChunks)
+
+  showAlertMessage('文件上传完成', 'success')
+}
+
+const checkUploadedChunks = async (fileHash: string) => {
+  // 这里应该调用后端API来检查已上传的切片
+  // 现在用模拟数据代替
+  return new Promise<{ uploadedList: number[] }>((resolve) => {
+    setTimeout(() => {
+      resolve({ uploadedList: [] })
+    }, 500)
+  })
+}
+
+const uploadChunk = async (chunk: Blob, index: number, total: number) => {
+  // 这里应该是实际的上传逻辑,现在用setTimeout模拟
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      console.log(`上传切片 ${index + 1}/${total}`)
+      uploadedChunks.value.add(index)
+      resolve()
+    }, 500)
+  })
+}
+
+const mergeChunks = async (fileHash: string, totalChunks: number) => {
+  // 这里应该调用后端API来合并文件切片
+  console.log(`请求合并文件切片, fileHash: ${fileHash}, totalChunks: ${totalChunks}`)
 }

 const getPlaceholder = () => {
@@ -577,7 +615,7 @@ const handleSubmit = () => {

  // 添加新的发送记录
  const newRecord = {
-    id: sendRecords.value.length + 1,
+    id: Date.now(),
    filename: selectedFile.value ? selectedFile.value.name : '文本内容.txt',
    date: new Date().toISOString().split('T')[0],
    size: selectedFile.value
@@ -589,11 +627,10 @@ const handleSubmit = () => {
        : expirationDate.toISOString().split('T')[0],
    retrieveCode: Math.random().toString(36).substring(2, 8).toUpperCase()
  }
-  sendRecords.value.unshift(newRecord)
+  fileDataStore.addShareData(newRecord)

  // 显示发送成功消息
  showAlertMessage(`文件发送成功！取件码：${newRecord.retrieveCode}`, 'success')
-
  // 重置表单
  selectedFile.value = null
  textContent.value = ''
@@ -613,8 +650,11 @@ const viewDetails = (record: any) => {
  selectedRecord.value = record
 }

-const deleteRecord = (id: any) => {
-  sendRecords.value = sendRecords.value.filter((record) => record.id !== id)
+const deleteRecord = (id: number) => {
+  const index = fileDataStore.shareData.findIndex((record: any) => record.id === id)
+  if (index !== -1) {
+    fileDataStore.deleteShareData(index)
+  }
 }

 const getQRCodeValue = (record: any) => {