fix(front): enhance error handling in file download components by refining error message extraction

backend/go.mod

@@ -13,8 +13,10 @@ require (
 	github.com/matoous/go-nanoid/v2 v2.1.0
 	github.com/redis/go-redis/v9 v9.7.3
 	github.com/samber/lo v1.50.0
+	github.com/spf13/cast v1.7.1
 	github.com/spf13/viper v1.20.1
 	go.uber.org/zap v1.27.0
+	golang.org/x/crypto v0.39.0
 	golang.org/x/time v0.11.0
 )
 
@@ -35,16 +37,14 @@ require (
 	github.com/sagikazarmark/locafero v0.7.0 // indirect
 	github.com/sourcegraph/conc v0.3.0 // indirect
 	github.com/spf13/afero v1.12.0 // indirect
-	github.com/spf13/cast v1.7.1 // indirect
 	github.com/spf13/pflag v1.0.6 // indirect
 	github.com/subosito/gotenv v1.6.0 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasttemplate v1.2.2 // indirect
 	go.uber.org/multierr v1.11.0 // indirect
-	golang.org/x/crypto v0.36.0 // indirect
 	golang.org/x/net v0.37.0 // indirect
-	golang.org/x/sys v0.31.0 // indirect
-	golang.org/x/text v0.23.0 // indirect
+	golang.org/x/sys v0.33.0 // indirect
+	golang.org/x/text v0.26.0 // indirect
 	google.golang.org/protobuf v1.36.5 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect
 )

backend/go.sum

@@ -90,15 +90,15 @@ go.uber.org/multierr v1.11.0 h1:blXXJkSxSSfBVBlC76pxqeO+LN3aDfLQo+309xJstO0=
 go.uber.org/multierr v1.11.0/go.mod h1:20+QtiLqy0Nd6FdQB9TLXag12DsQkrbs3htMFfDN80Y=
 go.uber.org/zap v1.27.0 h1:aJMhYGrd5QSmlpLMr2MftRKl7t8J8PTZPA732ud/XR8=
 go.uber.org/zap v1.27.0/go.mod h1:GB2qFLM7cTU87MWRP2mPIjqfIDnGu+VIO4V/SdhGo2E=
-golang.org/x/crypto v0.36.0 h1:AnAEvhDddvBdpY+uR+MyHmuZzzNqXSe/GvuDeob5L34=
-golang.org/x/crypto v0.36.0/go.mod h1:Y4J0ReaxCR1IMaabaSMugxJES1EpwhBHhv2bDHklZvc=
+golang.org/x/crypto v0.39.0 h1:SHs+kF4LP+f+p14esP5jAoDpHU8Gu/v9lFRK6IT5imM=
+golang.org/x/crypto v0.39.0/go.mod h1:L+Xg3Wf6HoL4Bn4238Z6ft6KfEpN0tJGo53AAPC632U=
 golang.org/x/net v0.37.0 h1:1zLorHbz+LYj7MQlSf1+2tPIIgibq2eL5xkrGk6f+2c=
 golang.org/x/net v0.37.0/go.mod h1:ivrbrMbzFq5J41QOQh0siUuly180yBYtLp+CKbEaFx8=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.31.0 h1:ioabZlmFYtWhL+TRYpcnNlLwhyxaM9kWTDEmfnprqik=
-golang.org/x/sys v0.31.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
-golang.org/x/text v0.23.0 h1:D71I7dUrlY+VX0gQShAThNGHFxZ13dGLBHQLVl1mJlY=
-golang.org/x/text v0.23.0/go.mod h1:/BLNzu4aZCJ1+kcD0DNRotWKage4q2rGVAg4o22unh4=
+golang.org/x/sys v0.33.0 h1:q3i8TbbEz+JRD9ywIRlyRAQbM0qF7hu24q3teo2hbuw=
+golang.org/x/sys v0.33.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/text v0.26.0 h1:P42AVeLghgTYr4+xUnTRKDMqpar+PtX7KWuNQL21L8M=
+golang.org/x/text v0.26.0/go.mod h1:QK15LZJUUQVJxhz7wXgxSy/CJaTFjd0G+YLonydOVQA=
 golang.org/x/time v0.11.0 h1:/bpjEDfN9tkoN/ryeYHnv5hcMlc8ncjMcM4XBk5NWV0=
 golang.org/x/time v0.11.0/go.mod h1:CDIdPxbZBQxdj6cxyCIdrNogrJKMJ7pr37NYpMcMDSg=
 google.golang.org/protobuf v1.36.5 h1:tPhr+woSbjfYvY6/GPufUoYizxw1cF/yFoxJ2fmpwlM=

backend/internal/controllers/download.go

@@ -72,8 +72,17 @@ func VaildateShare(c echo.Context) error {
 	if shareInfo == nil {
 		return utils.HTTPErrorHandler(c, errors.New("分享不存在"))
 	}
-	if shareInfo.Password != "" && shareInfo.Password != r.Password {
-		return utils.HTTPErrorHandler(c, errors.New("分享密码错误"))
+	if shareInfo.Password != "" {
+		if r.Password == "" {
+			return utils.HTTPErrorHandler(c, errors.New("缺少分享密码"))
+		}
+		hash, err := utils.GeneratePasswordHash(r.Password)
+		if err != nil {
+			return utils.HTTPErrorHandler(c, err)
+		}
+		if hash != shareInfo.Password {
+			return utils.HTTPErrorHandler(c, errors.New("分享密码错误"))
+		}
 	}
 	// 如果下载次数为0，则设置为-1 防止空值问题
 	if shareInfo.ViewNum < 1 {

backend/internal/controllers/share.go

@@ -64,17 +64,25 @@ func CreateShareInfo(c echo.Context) error {
 			return utils.HTTPErrorHandler(c, errors.New("分享文件状态错误"))
 		}
 	}
+	password := ""
+	if r.Config.Password != "" {
+		hash, err := utils.GeneratePasswordHash(r.Config.Password)
+		if err != nil {
+			return utils.HTTPErrorHandler(c, err)
+		}
+		password = hash
+	}
 
 	models.SetRedisShareInfo(id, models.RedisShareInfo{
-		Data:        r.Data,
-		Type:        r.Type,
-		CreatedAt:   time.Now().Unix(),
-		Owner:       cc.Auth.(string),
-		ViewNum:     r.Config.ViewNum,
-		Password:    r.Config.Password,
-		NotifyEmail: r.Config.NotifyEmail,
-		FileName:    r.FileName,
-		ExpireAt:    ExpireTime.Unix(),
+		Data:      r.Data,
+		Type:      r.Type,
+		CreatedAt: time.Now().Unix(),
+		Owner:     cc.Auth.(string),
+		ViewNum:   r.Config.ViewNum,
+		Password:  password,
+		// NotifyEmail: r.Config.NotifyEmail,
+		FileName: r.FileName,
+		ExpireAt: ExpireTime.Unix(),
 	})
 	var pickupCode string
 	if r.Config.HasPickupCode {
@@ -153,6 +161,7 @@ func GetShareInfo(c echo.Context) error {
 			"type":          shareInfo.Type,
 			"name":          shareInfo.FileName,
 			"download_nums": shareInfo.ViewNum,
+			"has_password":  shareInfo.Password != "",
 			"expire_at":     shareInfo.ExpireAt,
 			"owner":         shareInfo.Owner,
 			"size":          fileInfo.FileSize,
@@ -165,6 +174,7 @@ func GetShareInfo(c echo.Context) error {
 		"type":          shareInfo.Type,
 		"name":          shareInfo.FileName,
 		"download_nums": shareInfo.ViewNum,
+		"has_password":  shareInfo.Password != "",
 		"expire_at":     shareInfo.ExpireAt,
 		"owner":         shareInfo.Owner,
 	})

backend/internal/utils/password.go

@@ -0,0 +1,17 @@
+package utils
+
+import (
+	"errors"
+	"fmt"
+
+	"golang.org/x/crypto/argon2"
+)
+
+func GeneratePasswordHash(password string) (string, error) {
+	salt := GetEnv("PASSWORD_SALT")
+	if salt == "" {
+		return "", errors.New("请配置PASSWORD_SALT")
+	}
+	hash := argon2.IDKey([]byte(password), []byte(salt), 1, 64*1024, 4, 32)
+	return fmt.Sprintf("%x", hash), nil
+}

front/components/Drawer/PasswallShareDrawer.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import VeeForm from '@/components/VeeForm.vue'
+import FormButton from '@/components/Field/FormButton.vue'
+import InputField from '@/components/Field/InputField.vue'
+import type { FormContext, GenericObject } from 'vee-validate'
+import { toast } from 'vue-sonner'
+const props = defineProps<{
+    share_id: string
+    hide: any
+}>()
+const { getShareToken } = useMyAppShare()
+
+const handleSubmit = async (form: FormContext<GenericObject, GenericObject>) => {
+    try {
+        const password = form.values.password
+        const token = await getShareToken(props.share_id, { password })
+        if (!token) {
+            toast.error('密码错误')
+            form.resetForm()
+            return
+        }
+        props?.hide(token)
+        return
+    } catch (error) {
+        toast.error('密码错误')
+        form.resetForm()
+    }
+}
+</script>
+
+<template>
+    <VeeForm>
+        <div class="flex flex-col gap-5">
+            <div class="text-xl font-bold">输入密码</div>
+            <InputField name="password" type="password" rules="required" placeholder="请输入密码" />
+            <FormButton @click="handleSubmit">提交</FormButton>
+        </div>
+    </VeeForm>
+</template>

front/components/Field/InputField.vue

@@ -1,17 +1,15 @@
 <template>
-  <Field :name="props.name" v-slot="{ field }">
-    <div class="flex flex-col gap-2">
-      <Label v-if="props.label">{{ props.label }}</Label>
-      <Input v-bind="field" :placeholder="props.placeholder" :class="props.class" />
-    </div>
-  </Field>
+    <Field :name="props.name" v-slot="{ field }">
+        <div class="flex flex-col gap-2">
+            <Label v-if="props.label">{{ props.label }}</Label>
+            <Input v-bind="{ ...field, ...$attrs }" />
+        </div>
+    </Field>
 </template>
 <script setup lang="ts">
 import { Input } from '@/components/ui/input'
 const props = defineProps<{
-  name: string
-  label?: string
-  placeholder?: string
-  class?: string
+    name: string
+    label?: string
 }>()
 </script>

front/components/GlobalDrawer.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import {
-  Drawer,
-  DrawerContent,
-} from '@/components/ui/drawer'
+import { Drawer, DrawerContent } from '@/components/ui/drawer'
 import { createVNode } from 'vue'
 import useStore from '@/composables/useStore'
 
@@ -10,24 +7,29 @@ const store = useStore('drawer')
 const drawer = computed(() => store?._get('drawer'))
 const currentDrawer = computed(() => drawer?.value?.[drawer?.value?.length - 1])
 
-const render = computed(() => currentDrawer?.value?.render)
+const render = computed<() => Component>(() => currentDrawer?.value?.render)
+const hide = computed<() => void>(() => currentDrawer?.value?.onClose)
 const Children = () =>
-  createVNode(render.value, {
-    hide: () => store?._set('drawer', drawer?.value?.slice(0, -1)),
-  })
-
+    createVNode(render.value, {
+        hide: hide?.value,
+    })
 </script>
 
 <template>
-  <Drawer :open="!!store?._get('drawer')?.[store?._get('drawer')?.length - 1]" @update:open="(open) => {
-    if (!open && drawer?.length > 0) {
-      store?._set('drawer', drawer?.slice(0, -1))
-    }
-  }">
-    <DrawerContent>
-      <div class="mx-auto w-full max-w-sm pb-10">
-        <Children />
-      </div>
-    </DrawerContent>
-  </Drawer>
-</template>
+    <Drawer
+        :open="!!drawer?.[drawer?.length - 1]"
+        @update:open="
+            (open) => {
+                if (!open && drawer?.length > 0) {
+                    hide()
+                }
+            }
+        "
+    >
+        <DrawerContent>
+            <div class="mx-auto w-full max-w-sm pb-10">
+                <Children />
+            </div>
+        </DrawerContent>
+    </Drawer>
+</template>

front/components/Result/ImageCompressResult.vue

@@ -1,193 +1,166 @@
 <script setup lang="ts">
-import { useQuery } from "@tanstack/vue-query";
-import { AsyncButton, Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
-import { filesize } from "filesize";
-import useMyAppShare from "@/composables/useMyAppShare";
-import { toast } from "vue-sonner";
+import { useQuery } from '@tanstack/vue-query'
+import { AsyncButton, Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { filesize } from 'filesize'
+import useMyAppShare from '@/composables/useMyAppShare'
+import { toast } from 'vue-sonner'
 const emit = defineEmits<{
-  (e: "change", key: string): void;
-}>();
+    (e: 'change', key: string): void
+}>()
 const props = defineProps<{
-  data: { file: File; config: any; handle_type: string; file_id: string };
-}>();
+    data: { file: File; config: any; handle_type: string; file_id: string }
+}>()
 
 const { data } = useQuery({
-  queryKey: ["create-image-compress", props?.data?.file_id],
-  queryFn: async () => {
-    const { file_id } = props?.data || {};
-    const data = await $fetch<{
-      code: number;
-      data: {
-        id?: string;
-      };
-    }>(`/api/image/compress`, {
-      method: "POST",
-      body: {
-        file_id,
-      },
-    });
-    return data?.data;
-  },
-  staleTime: Infinity,
-});
+    queryKey: ['create-image-compress', props?.data?.file_id],
+    queryFn: async () => {
+        const { file_id } = props?.data || {}
+        const data = await $fetch<{
+            code: number
+            data: {
+                id?: string
+            }
+        }>(`/api/image/compress`, {
+            method: 'POST',
+            body: {
+                file_id,
+            },
+        })
+        return data?.data
+    },
+    staleTime: Infinity,
+})
 
-const taskId = computed(() => data?.value?.id);
+const taskId = computed(() => data?.value?.id)
 
 const { data: taskData, refetch } = useQuery({
-  queryKey: ["image-compress-task", taskId],
-  queryFn: async () => {
-    const data = await $fetch<{
-      code: number;
-      data: {
-        result: {
-          old_file: {
-            id: string;
-            size: number;
-          };
-          new_file: {
-            id: string;
-            size: number;
-          };
-        }[];
-        status: "success" | "retry" | "archived";
-        err?: {
-          message?: string;
-          retry?: number;
-          max_retry?: number;
-        };
-      };
-    }>(`/api/image/compress/${taskId.value}`);
-    return data?.data;
-  },
-  enabled: !!taskId.value,
-});
+    queryKey: ['image-compress-task', taskId],
+    queryFn: async () => {
+        const data = await $fetch<{
+            code: number
+            data: {
+                result: {
+                    old_file: {
+                        id: string
+                        size: number
+                    }
+                    new_file: {
+                        id: string
+                        size: number
+                    }
+                }[]
+                status: 'success' | 'retry' | 'archived'
+                err?: {
+                    message?: string
+                    retry?: number
+                    max_retry?: number
+                }
+            }
+        }>(`/api/image/compress/${taskId.value}`)
+        return data?.data
+    },
+    enabled: !!taskId.value,
+})
 
-const { downloadFile, createFileShare } = useMyAppShare();
+const { downloadFileByShareId, createFileShare } = useMyAppShare()
 
-const { counter, pause } = useInterval(2000, { controls: true });
+const { counter, pause } = useInterval(2000, { controls: true })
 
 watch(
-  () => counter.value,
-  () => {
-    if (["success", "archived"].includes(taskData.value?.status ?? "")) {
-      pause();
-      return;
+    () => counter.value,
+    () => {
+        if (['success', 'archived'].includes(taskData.value?.status ?? '')) {
+            pause()
+            return
+        }
+        refetch()
     }
-    refetch();
-  },
-);
+)
 
 watch(
-  () => taskData.value?.err?.retry,
-  (newVal, oldVal) => {
-    if (!oldVal || !newVal || !taskData.value?.err?.max_retry) {
-      return;
+    () => taskData.value?.err?.retry,
+    (newVal, oldVal) => {
+        if (!oldVal || !newVal || !taskData.value?.err?.max_retry) {
+            return
+        }
+        if (newVal <= taskData.value?.err?.max_retry) {
+            toast.error(`处理错误: ${taskData.value?.err?.message}, 将再次重试`)
+        }
     }
-    if (newVal <= taskData.value?.err?.max_retry) {
-      toast.error(`处理错误: ${taskData.value?.err?.message}, 将再次重试`);
-    }
-  },
-);
+)
 </script>
 <template>
-  <div class="flex flex-col gap-3">
-    <h2 class="text-lg">上传成功</h2>
-    <div class="flex flex-col gap-1 items-center">
-      <div class="flex flex-col h-30 items-center justify-center">
-        <FilePreviewView :value="props?.data?.file" />
-      </div>
-    </div>
-    <div
-      v-if="taskData?.status === 'success'"
-      class="flex flex-col gap-2"
-      v-for="item in taskData?.result"
-    >
-      <div
-        class="bg-white/80 p-2 rounded-md w-full flex flex-row items-center justify-between gap-2"
-      >
-        <div class="flex flex-row gap-2 items-center max-w-2/3">
-          <div
-            class="flex flex-row items-center justify-center rounded-md bg-black/5 p-2"
-          >
-            <LucideImage />
-          </div>
-          <div class="truncate w-auto">{{ props?.data?.file?.name }}</div>
-          <div class="flex flex-row gap-2 items-center text-sm shrink-0">
-            <span class="opacity-75">{{
-              filesize(item.new_file.size ?? 0)
-            }}</span>
-            <span
-              class="bg-green-200 text-green-600 rounded-md px-1 py-0.5 flex flex-row gap-1 items-center text-xs"
-            >
-              <LucideChevronDown class="size-4" />
-              {{
-                ((1 - item.new_file.size / item.old_file.size) * 100).toFixed(
-                  2,
-                )
-              }}%
-            </span>
-          </div>
+    <div class="flex flex-col gap-3">
+        <h2 class="text-lg">上传成功</h2>
+        <div class="flex flex-col gap-1 items-center">
+            <div class="flex flex-col h-30 items-center justify-center">
+                <FilePreviewView :value="props?.data?.file" />
+            </div>
         </div>
-        <AsyncButton
-          variant="outline"
-          class="bg-black/5"
-          size="icon"
-          @click="
-            async () => {
-              const data = await createFileShare({
-                file_id: item.new_file.id,
-                config: {
-                  download_nums: 1,
-                  expire_time: 60,
-                  has_pickup_code: false,
-                  has_password: false,
-                },
-                file_name: props?.data?.file?.name,
-              });
-              const { id } = data?.data || {};
-              if (!id) {
-                return;
-              }
-              await downloadFile(id);
-            }
-          "
-        >
-          <LucideDownload />
-        </AsyncButton>
-      </div>
-    </div>
-    <div
-      v-else-if="taskData?.status !== 'retry' && !!taskData?.err?.message"
-      class="flex flex-col gap-2"
-    >
-      <div
-        class="w-full h-16 flex flex-row items-center gap-3 bg-white/80 rounded-md p-2"
-      >
-        <div
-          class="size-10 flex items-center justify-center rounded-md bg-red-200"
-        >
-          <LucideAlertTriangle class="size-5 text-red-600" />
+        <div v-if="taskData?.status === 'success'" class="flex flex-col gap-2" v-for="item in taskData?.result">
+            <div class="bg-white/80 p-2 rounded-md w-full flex flex-row items-center justify-between gap-2">
+                <div class="flex flex-row gap-2 items-center max-w-2/3">
+                    <div class="flex flex-row items-center justify-center rounded-md bg-black/5 p-2">
+                        <LucideImage />
+                    </div>
+                    <div class="truncate w-auto">{{ props?.data?.file?.name }}</div>
+                    <div class="flex flex-row gap-2 items-center text-sm shrink-0">
+                        <span class="opacity-75">{{ filesize(item.new_file.size ?? 0) }}</span>
+                        <span class="bg-green-200 text-green-600 rounded-md px-1 py-0.5 flex flex-row gap-1 items-center text-xs">
+                            <LucideChevronDown class="size-4" />
+                            {{ ((1 - item.new_file.size / item.old_file.size) * 100).toFixed(2) }}%
+                        </span>
+                    </div>
+                </div>
+                <AsyncButton
+                    variant="outline"
+                    class="bg-black/5"
+                    size="icon"
+                    @click="
+                        async () => {
+                            const data = await createFileShare({
+                                file_id: item.new_file.id,
+                                config: {
+                                    download_nums: 1,
+                                    expire_time: 60,
+                                    has_pickup_code: false,
+                                    has_password: false,
+                                },
+                                file_name: props?.data?.file?.name,
+                            })
+                            const { id } = data?.data || {}
+                            if (!id) {
+                                return
+                            }
+                            try {
+                                await downloadFileByShareId(id)
+                            } catch (error: any) {
+                                toast.error(error?.data?.message || error?.message || error)
+                            }
+                        }
+                    "
+                >
+                    <LucideDownload />
+                </AsyncButton>
+            </div>
         </div>
-        <div class="text-sm">
-          {{
-            `经过 ${taskData?.err?.retry} 次重试后任务处理失败: ${taskData?.err?.message}`
-          }}
+        <div v-else-if="taskData?.status !== 'retry' && !!taskData?.err?.message" class="flex flex-col gap-2">
+            <div class="w-full h-16 flex flex-row items-center gap-3 bg-white/80 rounded-md p-2">
+                <div class="size-10 flex items-center justify-center rounded-md bg-red-200">
+                    <LucideAlertTriangle class="size-5 text-red-600" />
+                </div>
+                <div class="text-sm">
+                    {{ `经过 ${taskData?.err?.retry} 次重试后任务处理失败: ${taskData?.err?.message}` }}
+                </div>
+            </div>
+            <div class="flex flex-row justify-center">
+                <Button @click="emit('change', 'input')"> 返回首页 </Button>
+            </div>
         </div>
-      </div>
-      <div class="flex flex-row justify-center">
-        <Button @click="emit('change', 'input')"> 返回首页 </Button>
-      </div>
-    </div>
 
-    <div
-      v-else="taskData?.status !== 'retry' && !!taskData?.err?.message"
-      class="flex flex-col gap-2"
-    >
-      <Skeleton
-        class="w-full h-16 flex flex-row items-center justify-between"
-        v-for="i in 3"
-      />
+        <div v-else="taskData?.status !== 'retry' && !!taskData?.err?.message" class="flex flex-col gap-2">
+            <Skeleton class="w-full h-16 flex flex-row items-center justify-between" v-for="i in 3" />
+        </div>
     </div>
-  </div>
 </template>

front/components/Share/FileShareView.vue

@@ -1,69 +1,81 @@
 <script setup lang="ts">
-import AsyncButton from "@/components/ui/button/AsyncButton.vue";
-import dayjs from "dayjs";
-import duration from "dayjs/plugin/duration";
-import relativeTime from "dayjs/plugin/relativeTime";
-import { isBoolean } from "lodash-es";
-import { LucideCheck, LucideX } from "lucide-vue-next";
-import { useQueryClient } from "@tanstack/vue-query";
-dayjs.extend(duration);
-dayjs.extend(relativeTime);
+import AsyncButton from '@/components/ui/button/AsyncButton.vue'
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { isBoolean } from 'lodash-es'
+import { LucideCheck, LucideX } from 'lucide-vue-next'
+import { useQueryClient } from '@tanstack/vue-query'
+import showDrawer from '~/lib/showDrawer'
+import { toast } from 'vue-sonner'
+import PasswallShareDrawer from '~/components/Drawer/PasswallShareDrawer.vue'
+dayjs.extend(duration)
+dayjs.extend(relativeTime)
 
 const props = defineProps<{
-  data: any;
-}>();
+    data: any
+}>()
 
-const queryClient = useQueryClient();
-const { downloadFile } = useMyAppShare();
+const queryClient = useQueryClient()
+const { downloadFile, getShareToken } = useMyAppShare()
 
 const handleDownload = async () => {
-  const { id } = props?.data || {};
-  await downloadFile(id);
-  queryClient.invalidateQueries({ queryKey: ["share", id] });
-};
+    const { id } = props?.data || {}
+    try {
+        let token = null
+        if (props?.data?.has_password) {
+            token = await showDrawer({
+                render: ({ ...rest }) => h(PasswallShareDrawer, { ...rest, share_id: id }),
+            })
+        } else {
+            token = await getShareToken(id)
+        }
+        if (!token) {
+            throw new Error('获取token失败')
+        }
+        downloadFile(token)
+    } catch (error: any) {
+        toast.error(error?.data?.message || error?.message || error)
+    } finally {
+        queryClient.invalidateQueries({ queryKey: ['share', id] })
+    }
+}
 
 const expireSeconds = computed(() => {
-  return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix();
-});
+    return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix()
+})
 
-const { remaining, start } = useCountdown(expireSeconds.value);
+const { remaining, start } = useCountdown(expireSeconds.value)
 
 onMounted(() => {
-  start();
-});
+    start()
+})
 
 const fileShareInfo = computed(() => {
-  return [
-    { label: "需要密码", value: props?.data?.has_password ?? false },
-    {
-      label: "过期时间",
-      value: dayjs.duration(remaining.value, "seconds").format(`D天 HH:mm:ss`),
-    },
-    { label: "剩余下载次数", value: props?.data?.download_nums ?? 0 },
-  ];
-});
+    return [
+        { label: '需要密码', value: props?.data?.has_password ?? false },
+        {
+            label: '过期时间',
+            value: dayjs.duration(remaining.value, 'seconds').format(`D天 HH:mm:ss`),
+        },
+        { label: '剩余下载次数', value: props?.data?.download_nums ?? 0 },
+    ]
+})
 </script>
 
 <template>
-  <div class="flex flex-col gap-5 items-center">
-    <h1 class="text-xl font-bold">下载文件</h1>
-    <FilePreviewView :value="props?.data" />
-    <div class="flex flex-col gap-2 md:flex-row w-full">
-      <div
-        class="flex flex-row md:flex-col md:gap-1 justify-between items-center md:flex-1"
-        v-for="item in fileShareInfo"
-      >
-        <div class="text-xs opacity-75">{{ item?.label }}</div>
-        <component
-          v-if="isBoolean(item?.value)"
-          :is="item?.value ? LucideCheck : LucideX"
-          class="size-6"
-        />
-        <div v-else class="md:text-xl">{{ item?.value }}</div>
-      </div>
+    <div class="flex flex-col gap-5 items-center">
+        <h1 class="text-xl font-bold">下载文件</h1>
+        <FilePreviewView :value="props?.data" />
+        <div class="flex flex-col gap-2 md:flex-row w-full">
+            <div class="flex flex-row md:flex-col md:gap-1 justify-between items-center md:flex-1" v-for="item in fileShareInfo">
+                <div class="text-xs opacity-75">{{ item?.label }}</div>
+                <component v-if="isBoolean(item?.value)" :is="item?.value ? LucideCheck : LucideX" class="size-6" />
+                <div v-else class="md:text-xl">{{ item?.value }}</div>
+            </div>
+        </div>
+        <div class="w-full">
+            <AsyncButton @click="handleDownload" class="w-full">下载</AsyncButton>
+        </div>
     </div>
-    <div class="w-full">
-      <AsyncButton @click="handleDownload" class="w-full">下载</AsyncButton>
-    </div>
-  </div>
 </template>

front/components/Share/TextShareView.vue

@@ -11,6 +11,8 @@ import MarkdownRender from '@/components/MarkdownRender.vue'
 import { Button } from '@/components/ui/button'
 import { LucideCopy } from 'lucide-vue-next'
 import { useClipboard } from '@vueuse/core'
+import showDrawer from '~/lib/showDrawer'
+import PasswallShareDrawer from '~/components/Drawer/PasswallShareDrawer.vue'
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
@@ -47,7 +49,14 @@ const previewText = ref<string | null>(null)
 
 const handlePreview = async () => {
     try {
-        const token = await getShareToken(props?.data?.id)
+        let token = null
+        if (props?.data?.has_password) {
+            token = await showDrawer({
+                render: ({ ...rest }) => h(PasswallShareDrawer, { ...rest, share_id: props?.data?.id }),
+            })
+        } else {
+            token = await getShareToken(props?.data?.id)
+        }
         const r = await $fetch<{
             code: number
             data: {
@@ -55,8 +64,8 @@ const handlePreview = async () => {
             }
         }>(`/api/download?token=${token}`)
         previewText.value = r?.data?.data
-    } catch (error) {
-        toast.error((error as any)?.data?.message || error)
+    } catch (error: any) {
+        toast.error(error?.data?.message || error?.message || error)
     }
 }
 </script>

front/composables/useMyAppShare.ts

@@ -1,12 +1,18 @@
 import { toast } from 'vue-sonner'
-
+declare const window: any
 let shareIdTokenMap: WeakMap<{ share_id: string }, string>
 
-const getShareToken = async (share_id: string): Promise<string | undefined> => {
+const getShareToken = async (
+    share_id: string,
+    options?: {
+        password?: string
+    }
+): Promise<string | undefined> => {
     if (!shareIdTokenMap) {
         shareIdTokenMap = new WeakMap()
     }
     let token = shareIdTokenMap.get({ share_id })
+    const { password } = options || {}
     if (!token) {
         const data = await $fetch<{
             code: number
@@ -18,6 +24,7 @@ const getShareToken = async (share_id: string): Promise<string | undefined> => {
             method: 'POST',
             body: {
                 share_id,
+                password,
             },
         })
         if (!data?.data?.token) {
@@ -29,17 +36,16 @@ const getShareToken = async (share_id: string): Promise<string | undefined> => {
     return token
 }
 
-const downloadFile = async (share_id: string) => {
-    try {
-        const token = await getShareToken(share_id)
-        if (!token) {
-            throw new Error('获取token失败')
-            return
-        }
-        ;(window as any)?.open(`/api/download?token=${token}`)
-    } catch (e) {
-        toast.error((e as any)?.data?.message || e)
+const downloadFile = (token: string) => {
+    window?.open(`/api/download?token=${token}`)
+}
+
+const downloadFileByShareId = async (share_id: string) => {
+    const token = await getShareToken(share_id)
+    if (!token) {
+        throw new Error('获取token失败')
     }
+    return downloadFile(token)
 }
 
 const createShare = async (data: any) => {
@@ -92,6 +98,7 @@ const createTextShare = async (data: { text: string; config: any }) => {
 const useMyAppShare = () => {
     return {
         downloadFile,
+        downloadFileByShareId,
         createShare,
         createFileShare,
         createTextShare,

front/composables/useStore.ts

@@ -1,35 +1,34 @@
 import { defineStore } from 'pinia'
-import { cloneDeep, get, isEmpty, isUndefined, set,isString } from 'lodash-es'
+import { cloneDeep, get, isEmpty, isUndefined, set, isString } from 'lodash-es'
 
 type StoreType = Record<string, any>
 
 const initState: StoreType = {}
 // 做了一点小小的改进，可以传入key，会自动初始化，如果不初始化的话容易导致不存在值而丢失响应式
 const useStore = (key?: string) => {
-  const store = defineStore('store', {
-    state: () => ({
-      ...initState,
-    }),
-    actions: {
-      _get(path?: string) {
-        if (isEmpty(path) || isUndefined(path)) {
-          return this.$state
-        }
-        return get(this.$state, path)
-      },
-      _set(path: string, value: any) {
-        const newState = cloneDeep(this.$state)
-        set(newState, path, value)
-        this.$patch(newState)
-      },
-    },
-    persist: true,
-  })()
-  if (!isEmpty(key) && isString(key) && isUndefined(store?._get(key))) {
-    console.log('reset', key, store?._get(key))
-    store?._set(key, undefined)
-  }
-  return store
+    const store = defineStore('store', {
+        state: () => ({
+            ...initState,
+        }),
+        actions: {
+            _get(path?: string) {
+                if (isEmpty(path) || isUndefined(path)) {
+                    return this.$state
+                }
+                return get(this.$state, path)
+            },
+            _set(path: string, value: any) {
+                const newState = cloneDeep(this.$state)
+                set(newState, path, value)
+                this.$patch(newState)
+            },
+        },
+    })()
+    if (!isEmpty(key) && isString(key) && isUndefined(store?._get(key))) {
+        // console.log('reset', key, store?._get(key))
+        store?._set(key, null)
+    }
+    return store
 }
 
 export default useStore

front/lib/showDrawer.ts

@@ -1,11 +1,21 @@
 interface DrawerProps {
-  render: (props: { hide: () => void }) => Component
+    render: (props: { hide: () => void }) => Component
 }
 
 const showDrawer = (props: DrawerProps) => {
-    const { render } = props || {}
-    const store = useStore()
-    store?._set('drawer', [...(store?._get('drawer')?.value || []), { render }])
+    const key = Math.random().toString(36).slice(2, 8)
+    return new Promise<void>((res) => {
+        const { render } = props || {}
+        const onClose = (data?: any) => {
+            store._set(
+                'drawer',
+                (store._get('drawer')?.value ?? [])?.filter((item: any) => item.key !== key)
+            )
+            res(data)
+        }
+        const store = useStore()
+        store._set('drawer', [...(store._get('drawer')?.value || []), { render, onClose, key }])
+    })
 }
 
 export default showDrawer