feat(front): add SelectField and SwitchField components for enhanced form handling in file sharing

front/components/Field/SelectField.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select'
+type SelectValue = string | number
+const props = defineProps<{
+    name: string
+    placeholder?: string
+    label?: string
+    rules?: string
+    options?: {
+        label?: string
+        value: SelectValue
+    }[]
+}>()
+const { value } = useField<SelectValue>(props.name, props?.rules)
+</script>
+
+<template>
+    <Select v-model="value">
+        <SelectTrigger>
+            <SelectValue :placeholder="placeholder" />
+        </SelectTrigger>
+        <SelectContent>
+            <SelectGroup>
+                <SelectLabel class="text-xs" v-if="label">{{ label }}</SelectLabel>
+                <SelectItem v-for="item in options" :key="item.value" :value="item.value">
+                    {{ item?.label ?? item.value }}
+                </SelectItem>
+            </SelectGroup>
+        </SelectContent>
+    </Select>
+</template>

front/components/Field/SwitchField.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+const props = defineProps<{
+    name: string
+    label?: string
+    rules?: string
+}>()
+const { value } = useField<boolean>(props.name, props?.rules)
+</script>
+
+<template>
+  <div class="flex flex-row gap-2 items-center">
+    <Label v-if="label">{{ label }}</Label>
+    <Switch v-model="value" />
+  </div>
+</template>

front/components/Handle/FileShareHandle.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import SwitchField from '../Field/SwitchField.vue';
+import InputField from '../Field/InputField.vue';
+import SelectField from '../Field/SelectField.vue';
+import FormButton from '../Field/FormButton.vue';
+const props = defineProps<{
+    hide: () => void
+    file: File
+}>()
+</script>
+
+<template>
+    <VeeForm v-slot="{ values }" :initialValues="{ download_nums: 1, expire_time: 1440 }">
+        <div class="flex flex-col gap-3">
+            <h2 class="text-lg font-bold">分享选项</h2>
+            <div class="flex flex-row items-center gap-2 text-sm">
+
+                <SelectField name="download_nums" label="下载次数" :options="[
+                    { label: '1次下载', value: 1 },
+                    { label: '2次下载', value: 2 },
+                    { label: '3次下载', value: 3 },
+                    { label: '5次下载', value: 4 },
+                    { label: '10次下载', value: 5 },
+                ]" />
+                或
+                <SelectField name="expire_time" label="过期时间" :options="[
+                    { label: '5分钟', value: 5 },
+                    { label: '1小时', value: 60 },
+                    { label: '1天', value: 1440 },
+                    { label: '3天', value: 4320 },
+                ]" />
+                后过期
+            </div>
+            <div class="flex flex-row gap-3 min-h-9">
+                <SwitchField name="has_password" label="密码保护" />
+                <InputField v-if="!!values.has_password" name="password" placeholder="请输入密码" />
+            </div>
+            <div class="flex flex-row gap-3 min-h-9">
+                <SwitchField name="has_download_notify" label="下载通知" />
+                <InputField v-if="!!values.has_download_notify" name="download_notify_email" placeholder="请输入邮箱" />
+            </div>
+            <FormButton @click="(form) => {
+                console.log(form.values)
+            }">提交</FormButton>
+        </div>
+    </VeeForm>
+</template>