服务器配置

app/components/settings/SettingsDomainConfiguration.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+const props = defineProps<{
+  currentOrigin: string
+  effectiveSiteUrl: string
+}>()
+
+const siteBaseUrl = defineModel<string>('siteBaseUrl', { required: true })
+const imageBaseUrl = defineModel<string>('imageBaseUrl', { required: true })
+const videoBaseUrl = defineModel<string>('videoBaseUrl', { required: true })
+const fileBaseUrl = defineModel<string>('fileBaseUrl', { required: true })
+const imageSeparated = defineModel<boolean>('imageSeparated', { required: true })
+const videoSeparated = defineModel<boolean>('videoSeparated', { required: true })
+const fileSeparated = defineModel<boolean>('fileSeparated', { required: true })
+
+const { t } = useI18n()
+
+function fillDetected(target: 'site' | 'image' | 'video' | 'file') {
+  if (!props.currentOrigin) return
+  if (target === 'site') siteBaseUrl.value = props.currentOrigin
+  else if (target === 'image') imageBaseUrl.value = props.currentOrigin
+  else if (target === 'video') videoBaseUrl.value = props.currentOrigin
+  else fileBaseUrl.value = props.currentOrigin
+}
+
+function effectiveUrl(separated: boolean, configuredUrl: string): string {
+  return separated
+    ? configuredUrl.trim() || props.currentOrigin
+    : siteBaseUrl.value.trim() || props.effectiveSiteUrl || props.currentOrigin
+}
+</script>
+
+<template>
+  <div class="grid gap-4 sm:grid-cols-2">
+    <SettingsGroup>
+      <div class="space-y-3 py-4 sm:pr-4">
+        <p class="text-sm font-medium text-highlighted">
+          {{ t('settings.siteBaseUrl') }}
+        </p>
+        <p class="text-xs leading-relaxed text-muted">
+          {{ t('settings.siteBaseUrlRoleHint') }}
+        </p>
+        <div class="flex gap-2">
+          <UInput
+            v-model="siteBaseUrl"
+            size="sm"
+            :placeholder="t('settings.siteBaseUrlPlaceholder')"
+            class="min-w-0 flex-1 font-mono"
+          />
+          <UButton
+            v-if="currentOrigin"
+            :label="t('settings.fillDetectedOrigin')"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            class="shrink-0"
+            @click="fillDetected('site')"
+          />
+        </div>
+        <p class="truncate rounded-lg bg-muted/30 px-3 py-2 text-xs text-muted">
+          {{ t('settings.siteBaseUrlActive', { url: effectiveSiteUrl || currentOrigin }) }}
+        </p>
+      </div>
+    </SettingsGroup>
+
+    <SettingsGroup>
+      <div class="space-y-3 py-4 sm:pl-4">
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <p class="text-sm font-medium text-highlighted">
+            {{ t('settings.imageBaseUrl') }}
+          </p>
+          <USwitch v-model="imageSeparated" />
+        </div>
+        <p class="text-xs leading-relaxed text-muted">
+          {{ t('settings.imageBaseUrlRoleHint') }}
+        </p>
+        <div
+          class="flex gap-2"
+          :class="imageSeparated ? '' : 'pointer-events-none opacity-50'"
+        >
+          <UInput
+            v-model="imageBaseUrl"
+            size="sm"
+            :placeholder="t('settings.imageBaseUrlPlaceholder')"
+            class="min-w-0 flex-1 font-mono"
+          />
+          <UButton
+            v-if="currentOrigin"
+            :label="t('settings.fillDetectedOrigin')"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            class="shrink-0"
+            @click="fillDetected('image')"
+          />
+        </div>
+        <p class="truncate rounded-lg bg-muted/30 px-3 py-2 text-xs text-muted">
+          {{ t('settings.imageBaseUrlActive', {
+            url: effectiveUrl(imageSeparated, imageBaseUrl)
+          }) }}
+        </p>
+      </div>
+    </SettingsGroup>
+
+    <SettingsGroup>
+      <div class="space-y-3 py-4 sm:pr-4">
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <p class="text-sm font-medium text-highlighted">
+            {{ t('settings.videoBaseUrl') }}
+          </p>
+          <USwitch v-model="videoSeparated" />
+        </div>
+        <p class="text-xs leading-relaxed text-muted">
+          {{ t('settings.videoBaseUrlRoleHint') }}
+        </p>
+        <div
+          class="flex gap-2"
+          :class="videoSeparated ? '' : 'pointer-events-none opacity-50'"
+        >
+          <UInput
+            v-model="videoBaseUrl"
+            size="sm"
+            :placeholder="t('settings.videoBaseUrlPlaceholder')"
+            class="min-w-0 flex-1 font-mono"
+          />
+          <UButton
+            v-if="currentOrigin"
+            :label="t('settings.fillDetectedOrigin')"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            class="shrink-0"
+            @click="fillDetected('video')"
+          />
+        </div>
+        <p class="truncate rounded-lg bg-muted/30 px-3 py-2 text-xs text-muted">
+          {{ t('settings.videoBaseUrlActive', {
+            url: effectiveUrl(videoSeparated, videoBaseUrl)
+          }) }}
+        </p>
+      </div>
+    </SettingsGroup>
+
+    <SettingsGroup>
+      <div class="space-y-3 py-4 sm:pl-4">
+        <div class="flex flex-wrap items-center justify-between gap-2">
+          <p class="text-sm font-medium text-highlighted">
+            {{ t('settings.fileBaseUrl') }}
+          </p>
+          <USwitch v-model="fileSeparated" />
+        </div>
+        <p class="text-xs leading-relaxed text-muted">
+          {{ t('settings.fileBaseUrlRoleHint') }}
+        </p>
+        <div
+          class="flex gap-2"
+          :class="fileSeparated ? '' : 'pointer-events-none opacity-50'"
+        >
+          <UInput
+            v-model="fileBaseUrl"
+            size="sm"
+            :placeholder="t('settings.fileBaseUrlPlaceholder')"
+            class="min-w-0 flex-1 font-mono"
+          />
+          <UButton
+            v-if="currentOrigin"
+            :label="t('settings.fillDetectedOrigin')"
+            color="neutral"
+            variant="outline"
+            size="sm"
+            class="shrink-0"
+            @click="fillDetected('file')"
+          />
+        </div>
+        <p class="truncate rounded-lg bg-muted/30 px-3 py-2 text-xs text-muted">
+          {{ t('settings.fileBaseUrlActive', {
+            url: effectiveUrl(fileSeparated, fileBaseUrl)
+          }) }}
+        </p>
+      </div>
+    </SettingsGroup>
+  </div>
+</template>

app/components/settings/SettingsUploadPolicyFields.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 type PolicySource = 'env' | 'db' | 'default'
 type MimeType = 'image/jpeg' | 'image/png' | 'image/webp' | 'image/gif' | 'image/svg+xml' | 'image/x-icon'
+type VideoExtension = 'mp4' | 'm4v' | 'webm' | 'mov' | 'mkv' | 'avi' | 'flv' | 'wmv' | 'mpg' | 'mpeg'
 
-defineProps<{
+const props = defineProps<{
   part: 'upload-preference' | 'image-processing' | 'login-rate'
   uploadMaxFileSizeMbSource?: PolicySource
   allowedMimeTypesSource?: PolicySource
+  allowedVideoExtensionsSource?: PolicySource
+  forbiddenFileExtensionsSource?: PolicySource
   uploadRateIpMaxSource?: PolicySource
   uploadRateTokenMaxSource?: PolicySource
   uploadRateWindowMinutesSource?: PolicySource
@@ -13,16 +16,21 @@ defineProps<{
   loginRateWindowMinutesSource?: PolicySource
   preserveOriginalUploadSource?: PolicySource
   mimeTypeOptions?: ReadonlyArray<{ mime: MimeType, label: string }>
+  videoExtensionOptions?: ReadonlyArray<{ extension: VideoExtension, label: string }>
+  forbiddenFileExtensionOptions?: ReadonlyArray<{ extension: string, label: string }>
 }>()
 
 const uploadMaxFileSizeMbDraft = defineModel<number>('uploadMaxFileSizeMb')
 const allowedMimeTypesDraft = defineModel<MimeType[]>('allowedMimeTypes')
+const allowedVideoExtensionsDraft = defineModel<VideoExtension[]>('allowedVideoExtensions')
+const forbiddenFileExtensionsDraft = defineModel<string[]>('forbiddenFileExtensions')
 const uploadRateIpMaxDraft = defineModel<number>('uploadRateIpMax')
 const uploadRateTokenMaxDraft = defineModel<number>('uploadRateTokenMax')
 const uploadRateWindowMinutesDraft = defineModel<number>('uploadRateWindowMinutes')
 const loginRateMaxDraft = defineModel<number>('loginRateMax')
 const loginRateWindowMinutesDraft = defineModel<number>('loginRateWindowMinutes')
 const preserveOriginalUploadDraft = defineModel<boolean>('preserveOriginalUpload')
+const customForbiddenExtension = ref('')
 
 const { t } = useI18n()
 
@@ -53,6 +61,70 @@ function isMimeChecked(mime: MimeType): boolean {
   return allowedMimeTypesDraft.value?.includes(mime) ?? false
 }
 
+function toggleVideoExtension(extension: VideoExtension, checked: boolean) {
+  if (!allowedVideoExtensionsDraft.value) return
+  if (checked) {
+    if (!allowedVideoExtensionsDraft.value.includes(extension)) {
+      allowedVideoExtensionsDraft.value = [
+        ...allowedVideoExtensionsDraft.value,
+        extension
+      ]
+    }
+    return
+  }
+  if (allowedVideoExtensionsDraft.value.length <= 1) return
+  allowedVideoExtensionsDraft.value = allowedVideoExtensionsDraft.value
+    .filter(item => item !== extension)
+}
+
+function isVideoExtensionChecked(extension: VideoExtension): boolean {
+  return allowedVideoExtensionsDraft.value?.includes(extension) ?? false
+}
+
+function toggleForbiddenExtension(extension: string, checked: boolean) {
+  if (!forbiddenFileExtensionsDraft.value) return
+  if (checked) {
+    if (!forbiddenFileExtensionsDraft.value.includes(extension)) {
+      forbiddenFileExtensionsDraft.value = [
+        ...forbiddenFileExtensionsDraft.value,
+        extension
+      ]
+    }
+    return
+  }
+  forbiddenFileExtensionsDraft.value = forbiddenFileExtensionsDraft.value
+    .filter(item => item !== extension)
+}
+
+function isForbiddenExtensionChecked(extension: string): boolean {
+  return forbiddenFileExtensionsDraft.value?.includes(extension) ?? false
+}
+
+const allForbiddenExtensionOptions = computed(() => {
+  const options = new Map(
+    (props.forbiddenFileExtensionOptions ?? []).map(option => [
+      option.extension,
+      option.label
+    ])
+  )
+  for (const extension of forbiddenFileExtensionsDraft.value ?? []) {
+    if (!options.has(extension)) options.set(extension, extension.toUpperCase())
+  }
+  return [...options].map(([extension, label]) => ({ extension, label }))
+})
+
+function addCustomForbiddenExtension() {
+  const values = customForbiddenExtension.value
+    .split(',')
+    .map(value => value.trim().toLowerCase().replace(/^\.+/, ''))
+    .filter(value => /^[a-z0-9][a-z0-9_-]{0,15}$/.test(value))
+  if (!values.length) return
+  const next = new Set(forbiddenFileExtensionsDraft.value ?? [])
+  for (const value of values) next.add(value)
+  forbiddenFileExtensionsDraft.value = [...next]
+  customForbiddenExtension.value = ''
+}
+
 function clampUploadMaxFileSizeMb(value: unknown): number {
   const num = Number(value)
   if (!Number.isFinite(num)) return uploadMaxFileSizeMbDraft.value ?? 10
@@ -118,7 +190,7 @@ function onUploadMaxFileSizeNumberInput(value: string | number) {
       </div>
     </div>
 
-    <div class="py-4">
+    <div class="border-t border-default/50 py-4">
       <div class="flex flex-wrap items-center gap-2">
         <p class="text-sm font-medium text-highlighted">
           {{ t('settings.allowedMimeTypes') }}
@@ -158,6 +230,105 @@ function onUploadMaxFileSizeNumberInput(value: string | number) {
       </div>
     </div>
 
+    <div class="border-t border-default/50 py-4">
+      <div class="flex flex-wrap items-center gap-2">
+        <p class="text-sm font-medium text-highlighted">
+          {{ t('settings.allowedVideoExtensions') }}
+        </p>
+        <UBadge
+          v-if="allowedVideoExtensionsSource"
+          :color="sourceBadge(allowedVideoExtensionsSource).color"
+          variant="subtle"
+          size="xs"
+        >
+          {{ sourceBadge(allowedVideoExtensionsSource).label }}
+        </UBadge>
+      </div>
+      <p class="mt-1 text-xs leading-relaxed text-muted">
+        {{ t('settings.allowedVideoExtensionsHint') }}
+      </p>
+      <div
+        class="mt-3 flex flex-wrap gap-2"
+        :class="allowedVideoExtensionsSource === 'env' ? 'pointer-events-none opacity-60' : ''"
+      >
+        <label
+          v-for="option in videoExtensionOptions ?? []"
+          :key="option.extension"
+          class="inline-flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors"
+          :class="isVideoExtensionChecked(option.extension)
+            ? 'border-primary/40 bg-primary/5'
+            : 'border-default bg-muted/20 hover:bg-muted/40'"
+        >
+          <UCheckbox
+            :model-value="isVideoExtensionChecked(option.extension)"
+            @update:model-value="(v) => toggleVideoExtension(option.extension, v === true)"
+            @click.stop
+          />
+          <span class="font-medium text-highlighted">{{ option.label }}</span>
+        </label>
+      </div>
+    </div>
+
+    <div class="border-t border-default/50 py-4">
+      <div class="flex flex-wrap items-center gap-2">
+        <p class="text-sm font-medium text-highlighted">
+          {{ t('settings.forbiddenFileExtensions') }}
+        </p>
+        <UBadge
+          v-if="forbiddenFileExtensionsSource"
+          :color="sourceBadge(forbiddenFileExtensionsSource).color"
+          variant="subtle"
+          size="xs"
+        >
+          {{ sourceBadge(forbiddenFileExtensionsSource).label }}
+        </UBadge>
+      </div>
+      <p class="mt-1 text-xs leading-relaxed text-muted">
+        {{ t('settings.forbiddenFileExtensionsHint') }}
+      </p>
+      <div
+        class="mt-3 flex flex-wrap gap-2"
+        :class="forbiddenFileExtensionsSource === 'env' ? 'pointer-events-none opacity-60' : ''"
+      >
+        <label
+          v-for="option in allForbiddenExtensionOptions"
+          :key="option.extension"
+          class="inline-flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors"
+          :class="isForbiddenExtensionChecked(option.extension)
+            ? 'border-error/40 bg-error/5'
+            : 'border-default bg-muted/20 hover:bg-muted/40'"
+        >
+          <UCheckbox
+            :model-value="isForbiddenExtensionChecked(option.extension)"
+            @update:model-value="(v) => toggleForbiddenExtension(option.extension, v === true)"
+            @click.stop
+          />
+          <span class="font-medium text-highlighted">{{ option.label }}</span>
+        </label>
+      </div>
+      <div
+        class="mt-3 flex max-w-md items-center gap-2"
+        :class="forbiddenFileExtensionsSource === 'env' ? 'pointer-events-none opacity-60' : ''"
+      >
+        <UInput
+          v-model="customForbiddenExtension"
+          size="sm"
+          class="min-w-0 flex-1"
+          :placeholder="t('settings.forbiddenFileExtensionsCustomPlaceholder')"
+          :disabled="forbiddenFileExtensionsSource === 'env'"
+          @keydown.enter.prevent="addCustomForbiddenExtension"
+        />
+        <UButton
+          :label="t('settings.forbiddenFileExtensionsAdd')"
+          size="sm"
+          variant="outline"
+          color="neutral"
+          :disabled="forbiddenFileExtensionsSource === 'env'"
+          @click="addCustomForbiddenExtension"
+        />
+      </div>
+    </div>
+
     <div class="py-4">
       <p class="text-sm font-medium text-highlighted">
         {{ t('settings.uploadRateGroup') }}

app/components/settings/SettingsUserPreferencesFields.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-defineProps<{
+import type { UploadMediaKind } from '~/composables/useUploadPreferences'
+
+const props = withDefaults(defineProps<{
   part: 'upload-preference' | 'image-processing'
-}>()
+  kind?: UploadMediaKind
+}>(), {
+  kind: 'image'
+})
 
 const {
   compressEnabled,
@@ -9,7 +14,7 @@ const {
   copyFormat,
   clientWebpQuality,
   loadPreferences
-} = useUploadPreferences()
+} = useUploadPreferences(props.kind)
 
 const { t } = useI18n()
 

app/components/settings/SettingsVideoProcessingFields.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const { transcodeToHls, loadPreferences } = useUploadPreferences('video')
+const { t } = useI18n()
+
+onMounted(() => {
+  loadPreferences()
+})
+</script>
+
+<template>
+  <SettingsToggleRow
+    v-model="transcodeToHls"
+    :title="t('preferences.transcodeToHls')"
+    :hint="t('preferences.transcodeToHlsHint')"
+  />
+  <div
+    v-if="transcodeToHls"
+    class="border-t border-default/50 py-4"
+  >
+    <TranscodeSettingsControls />
+  </div>
+</template>