GitHub/015
1
0
Fork 0
mirror of https://github.com/keven1024/015.git synced 2026-05-30 17:09:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(front): implement NotifyConfigField component for enhanced notification settings in FileShareHandle and TextShareHandle components

Browse Source
This commit is contained in:
keven1024
2026-04-28 23:29:33 +08:00
parent d8704a8aa8
commit 2e5da4f7e9
7 changed files with 251 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
front/components/Preprocessing/NotifyConfigField.vue Normal file
View File

@@ -0,0 +1,155 @@
<script setup lang="ts">
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { useFormContext } from 'vee-validate'
import SelectField from '../Field/SelectField.vue'
import SwitchField from '../Field/SwitchField.vue'
import InputGroupField from '../Field/InputGroupField.vue'
import InputField from '../Field/InputField.vue'
import KvInputField from '../Field/KvInputGroupField.vue'
import TextareaField from '../Field/TextareaField.vue'
interface WebhookItem {
id: string
url: string
method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
headers: Record<string, any>
bodyType: 'none' | 'form-data' | 'raw'
body: string
}
const { t } = useI18n()
const { values, setFieldValue } = useFormContext()
const expandedAdvanced = ref<Set<number>>(new Set())
</script>
<template>
<div class="flex flex-col gap-3">
<div class="flex flex-row gap-3 min-h-9 items-center">
<SwitchField name="has_notify" :label="t('page.shareOptions.file.downloadNotify')" />
<SelectField
v-if="values.has_notify"
name="notify_types"
:placeholder="t('page.shareOptions.notify.notifyVia')"
multiple
:options="[
{ label: t('page.shareOptions.notify.email'), value: 'email' },
{ label: t('page.shareOptions.notify.webhook'), value: 'webhook' },
]"
/>
</div>
<div v-if="!!values.has_notify && values.notify_types?.includes('email')">
<InputGroupField
name="notify_emails"
:placeholder="t('page.shareOptions.notify.emailPlaceholder')"
:label="t('page.shareOptions.notify.email')"
rules="email"
/>
</div>
<div v-if="!!values.has_notify && values.notify_types?.includes('webhook')" class="flex flex-col gap-2">
<Label>Webhook</Label>
<div v-for="(_, index) in (values.notify_webhooks as WebhookItem[]) || []" :key="index" class="flex flex-col gap-2 border rounded-md p-3">
<div class="flex flex-row gap-2 items-end">
<div class="flex flex-col gap-2">
<Label>{{ t('page.shareOptions.notify.webhookMethod') }}</Label>
<SelectField
:name="`notify_webhooks.${index}.method`"
:label="t('page.shareOptions.notify.webhookMethod')"
default-value="POST"
:options="[
{ label: 'GET', value: 'GET' },
{ label: 'POST', value: 'POST' },
{ label: 'PUT', value: 'PUT' },
{ label: 'PATCH', value: 'PATCH' },
{ label: 'DELETE', value: 'DELETE' },
]"
class="w-28"
/>
</div>
<div class="flex-1">
<InputField :name="`notify_webhooks.${index}.url`" :label="t('page.shareOptions.notify.webhookUrl')" rules="required|url" />
</div>
<Button
type="button"
variant="outline"
size="icon"
@click="
expandedAdvanced = new Set(
expandedAdvanced.has(index)
? [...expandedAdvanced].filter((expandedIndex) => expandedIndex !== index)
: [...expandedAdvanced, index]
)
"
>
<LucideSettings class="size-4" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
class="bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white"
@click="
() => {
setFieldValue(
'notify_webhooks',
((values.notify_webhooks as WebhookItem[]) || []).filter((_, itemIndex) => itemIndex !== index)
)
expandedAdvanced = new Set(
[...expandedAdvanced]
.filter((expandedIndex) => expandedIndex !== index)
.map((expandedIndex) => (expandedIndex > index ? expandedIndex - 1 : expandedIndex))
)
}
"
>
<LucideTrash class="size-4" />
</Button>
</div>
<div v-show="expandedAdvanced.has(index)" class="flex flex-col gap-3 rounded-md border p-3">
<KvInputField
:name="`notify_webhooks.${index}.headers`"
:label="t('page.shareOptions.notify.webhookHeaders')"
:key-placeholder="t('page.shareOptions.notify.webhookHeaderKey')"
:value-placeholder="t('page.shareOptions.notify.webhookHeaderValue')"
/>
<div v-if="((values.notify_webhooks as WebhookItem[]) || [])[index]?.method === 'POST'" class="flex flex-col gap-3">
<Label class="w-20 pt-2">{{ t('page.shareOptions.notify.webhookBody') }}</Label>
<div class="flex flex-1 flex-col gap-2">
<SelectField
:name="`notify_webhooks.${index}.bodyType`"
:placeholder="t('page.shareOptions.notify.webhookBodyType')"
:label="t('page.shareOptions.notify.webhookBodyType')"
:options="[
{ label: t('page.shareOptions.notify.webhookBodyTypeNone'), value: 'none' },
{ label: t('page.shareOptions.notify.webhookBodyTypeFormData'), value: 'form-data' },
{ label: t('page.shareOptions.notify.webhookBodyTypeRaw'), value: 'raw' },
]"
/>
<TextareaField
v-if="['form-data', 'raw'].includes(((values.notify_webhooks as WebhookItem[]) || [])[index]?.bodyType || '')"
:name="`notify_webhooks.${index}.body`"
:placeholder="t('page.shareOptions.notify.webhookBody')"
/>
</div>
</div>
</div>
</div>
<div class="flex justify-start">
<Button
type="button"
size="sm"
@click="
setFieldValue('notify_webhooks', [
...((values.notify_webhooks as WebhookItem[]) || []),
{ url: '', method: 'POST', headers: {}, bodyType: 'none', body: '' },
])
"
>
<LucidePlus class="size-4" />
添加
</Button>
</div>
</div>
</div>
</template>