feat: add PasswallShareDrawer component for password-protected file sharing and enhance getShareToken function to accept password

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?.value(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/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: {

front/composables/useMyAppShare.ts

@@ -2,11 +2,17 @@ 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) {

front/lib/showDrawer.ts

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