mirror of
https://github.com/keven1024/015.git
synced 2026-05-31 17:39:35 +00:00
refactor(front): update file handling components to use typed props for better type safety and maintainability
This commit is contained in:
@@ -3,10 +3,11 @@ import SwitchField from '../Field/SwitchField.vue'
|
||||
import InputField from '../Field/InputField.vue'
|
||||
import SelectField from '../Field/SelectField.vue'
|
||||
import FormButton from '../Field/FormButton.vue'
|
||||
import type { FileShareHandleProps } from './types'
|
||||
const props = defineProps<{
|
||||
hide: () => void
|
||||
file: File[]
|
||||
onFileHandle: ({ type, config }: { type: string; config: any }) => void
|
||||
onFileHandle: (props: FileShareHandleProps) => void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<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';
|
||||
import SwitchField from '../Field/SwitchField.vue'
|
||||
import InputField from '../Field/InputField.vue'
|
||||
import SelectField from '../Field/SelectField.vue'
|
||||
import FormButton from '../Field/FormButton.vue'
|
||||
import type { TextShareHandleProps } from './types'
|
||||
const props = defineProps<{
|
||||
hide: () => void
|
||||
text: string
|
||||
onTextHandle: ({ type, config }: { type: string, config: any }) => void
|
||||
onTextHandle: (props: TextShareHandleProps) => void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -15,51 +16,74 @@ const props = defineProps<{
|
||||
<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: 5 },
|
||||
{ label: '10次浏览', value: 10 },
|
||||
]" />
|
||||
<SelectField
|
||||
name="download_nums"
|
||||
label="浏览次数"
|
||||
:options="[
|
||||
{ label: '1次浏览', value: 1 },
|
||||
{ label: '2次浏览', value: 2 },
|
||||
{ label: '3次浏览', value: 3 },
|
||||
{ label: '5次浏览', value: 5 },
|
||||
{ label: '10次浏览', value: 10 },
|
||||
]"
|
||||
/>
|
||||
或
|
||||
<SelectField name="expire_time" label="过期时间" :options="[
|
||||
{ label: '5分钟', value: 5 },
|
||||
{ label: '1小时', value: 60 },
|
||||
{ label: '1天', value: 1440 },
|
||||
{ label: '3天', value: 4320 },
|
||||
]" />
|
||||
<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-col gap-1">
|
||||
<div class="flex flex-row gap-3 min-h-9">
|
||||
<SwitchField name="has_pickup_code" label="取件码" :rules="((value: boolean) => {
|
||||
if (!!value) {
|
||||
setFieldValue('has_password', false)
|
||||
}
|
||||
return true
|
||||
})" />
|
||||
<SwitchField
|
||||
name="has_pickup_code"
|
||||
label="取件码"
|
||||
:rules="
|
||||
(value: boolean) => {
|
||||
if (!!value) {
|
||||
setFieldValue('has_password', false)
|
||||
}
|
||||
return true
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row gap-3 min-h-9">
|
||||
<SwitchField name="has_password" label="密码保护" :rules="((value: boolean) => {
|
||||
if (!!value) {
|
||||
setFieldValue('has_pickup_code', false)
|
||||
}
|
||||
return true
|
||||
})" />
|
||||
<SwitchField
|
||||
name="has_password"
|
||||
label="密码保护"
|
||||
:rules="
|
||||
(value: boolean) => {
|
||||
if (!!value) {
|
||||
setFieldValue('has_pickup_code', false)
|
||||
}
|
||||
return true
|
||||
}
|
||||
"
|
||||
/>
|
||||
<InputField v-if="!!values.has_password" name="password" placeholder="请输入密码" rules="required" />
|
||||
</div>
|
||||
<div class="flex flex-row gap-3 min-h-9">
|
||||
<SwitchField name="has_notify" label="已读通知" />
|
||||
<InputField v-if="!!values.has_notify" name="notify_email" placeholder="请输入邮箱"
|
||||
rules="required" />
|
||||
<InputField v-if="!!values.has_notify" name="notify_email" placeholder="请输入邮箱" rules="required" />
|
||||
</div>
|
||||
</div>
|
||||
<FormButton @click="async (form) => {
|
||||
onTextHandle({ type: 'text-share', config: values })
|
||||
hide()
|
||||
}">提交</FormButton>
|
||||
<FormButton
|
||||
@click="
|
||||
async (form) => {
|
||||
onTextHandle({ type: 'text-share', config: values })
|
||||
hide()
|
||||
}
|
||||
"
|
||||
>提交</FormButton
|
||||
>
|
||||
</div>
|
||||
</VeeForm>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
5
front/components/Preprocessing/types.ts
Normal file
5
front/components/Preprocessing/types.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export type FileHandleKey = 'file-share' | 'file-image-compress'
|
||||
export type FileShareHandleProps = { type: FileHandleKey; config: Record<string, any> }
|
||||
|
||||
export type TextHandleKey = 'text-share'
|
||||
export type TextShareHandleProps = { type: TextHandleKey; config: Record<string, any> }
|
||||
Reference in New Issue
Block a user