refactor: 重构设置、API、图库与存储页面前端结构。

将操作日志并入设置侧栏，补齐检查更新提示与版本接口刷新；拆分各模块组件并修复图库搜索分页变量。

app/components/ImagePreviewModal.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { ImageItem } from '~/types/image'
 import type { CopyFormat } from '~/composables/useUploadPreferences'
-import { formatImageDimensions, getFileExtension } from '~/utils/image-display'
+import { formatImageDimensions } from '~/utils/image-display'
+
+type EmbedFormat = CopyFormat | 'bbcode'
 
 const props = withDefaults(defineProps<{
   open: boolean
@@ -17,6 +19,7 @@ const emit = defineEmits<{
   'delete': []
 }>()
 
+const toast = useToast()
 const { formatFileSize } = useFileSize()
 const { t, locale } = useI18n()
 const { copyFormat } = useUploadPreferences()
@@ -24,40 +27,67 @@ const { copyFormat } = useUploadPreferences()
 const naturalWidth = ref<number | null>(null)
 const naturalHeight = ref<number | null>(null)
 const dimensionsLoaded = ref(false)
+const copyingUrl = ref(false)
+const embedFormat = ref<EmbedFormat>('url')
 
-const copyFormatItems = computed(() => [
+const embedFormatItems = computed(() => [
   { label: t('copy.url'), value: 'url' as const },
   { label: t('copy.markdown'), value: 'markdown' as const },
-  { label: t('copy.html'), value: 'html' as const }
+  { label: t('copy.html'), value: 'html' as const },
+  { label: t('copy.bbcode'), value: 'bbcode' as const }
 ])
 
 const uploadedLabel = computed(() => {
   if (!props.image) return '—'
   try {
-    return new Date(props.image.uploadedAt).toLocaleString(locale.value, { hour12: false })
+    const date = new Date(props.image.uploadedAt)
+    const y = date.getFullYear()
+    const m = String(date.getMonth() + 1).padStart(2, '0')
+    const d = String(date.getDate()).padStart(2, '0')
+    const h = String(date.getHours()).padStart(2, '0')
+    const min = String(date.getMinutes()).padStart(2, '0')
+    const s = String(date.getSeconds()).padStart(2, '0')
+    return `${y}/${m}/${d} ${h}:${min}:${s}`
   } catch {
     return props.image.uploadedAt
   }
 })
 
+const sizeLabel = computed(() => {
+  if (!props.image) return '—'
+  return t('image.previewSizeDetail', {
+    size: formatFileSize(props.image.size),
+    bytes: props.image.size.toLocaleString(locale.value)
+  })
+})
+
+const bbcodeValue = computed(() => {
+  if (!props.image) return ''
+  return `[img]${props.image.url}[/img]`
+})
+
 const previewValue = computed(() => {
   if (!props.image) return ''
-  switch (copyFormat.value) {
+  switch (embedFormat.value) {
     case 'markdown':
       return props.image.markdown
     case 'html':
       return props.image.html
+    case 'bbcode':
+      return bbcodeValue.value
     default:
       return props.image.url
   }
 })
 
 const copySuccessTitle = computed(() => {
-  switch (copyFormat.value) {
+  switch (embedFormat.value) {
     case 'markdown':
       return t('copy.copiedMarkdown')
     case 'html':
       return t('copy.copiedHtml')
+    case 'bbcode':
+      return t('copy.copiedBbcode')
     default:
       return t('copy.copiedUrl')
   }
@@ -67,11 +97,15 @@ const storageIcon = computed(() =>
   props.image?.storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
 )
 
-const uploadSourceLabel = computed(() => {
-  if (!props.image?.uploadSource) return t('image.uploadSourceUnknown')
-  return props.image.uploadSource === 'api'
-    ? t('stats.sourceApi')
-    : t('stats.sourceWeb')
+const uploadSourceTag = computed(() => {
+  switch (props.image?.uploadSource) {
+    case 'web':
+      return t('stats.tagWeb')
+    case 'api':
+      return t('stats.tagApi')
+    default:
+      return null
+  }
 })
 
 const dimensionsLabel = computed(() => {
@@ -80,45 +114,69 @@ const dimensionsLabel = computed(() => {
   return dimensionsLoaded.value ? '—' : t('image.previewDimensionsUnknown')
 })
 
-const detailRows = computed(() => {
-  if (!props.image) return []
-
-  const image = props.image
-  const rows: Array<{ label: string, value: string, mono?: boolean, storage?: boolean }> = [
-    { label: t('image.previewOriginalName'), value: image.originalName },
-    { label: t('image.previewExtension'), value: getFileExtension(image.originalName) },
-    { label: t('image.previewUploadedAt'), value: uploadedLabel.value },
-    { label: t('image.previewSize'), value: formatFileSize(image.size) },
-    { label: t('image.previewContentType'), value: image.contentType },
-    { label: t('image.previewDimensions'), value: dimensionsLabel.value },
-    { label: t('image.previewUploadSource'), value: uploadSourceLabel.value }
-  ]
-
-  if (image.owner) {
-    rows.push({ label: t('image.previewOwner'), value: image.owner.username })
-  }
-
-  if (props.showStorage && image.storage) {
-    rows.push({ label: t('image.previewStorage'), value: image.storage.name, storage: true })
-  }
-
-  rows.push({ label: t('image.previewKey'), value: image.key, mono: true })
-
-  return rows
-})
-
 watch(() => props.image?.key, () => {
   naturalWidth.value = null
   naturalHeight.value = null
   dimensionsLoaded.value = false
 })
 
-function close() {
-  emit('update:open', false)
+watch(() => props.open, (open) => {
+  if (open) {
+    embedFormat.value = copyFormat.value
+  }
+})
+
+function selectEmbedFormat(value: EmbedFormat) {
+  embedFormat.value = value
+  if (value !== 'bbcode') {
+    copyFormat.value = value
+  }
 }
 
-function selectCopyFormat(value: CopyFormat) {
-  copyFormat.value = value
+async function copyText(text: string, successTitle: string) {
+  if (!text) return false
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+      toast.add({ title: successTitle, color: 'success' })
+      return true
+    }
+  } catch {
+    // fallback below
+  }
+
+  const textarea = document.createElement('textarea')
+  textarea.value = text
+  textarea.setAttribute('readonly', '')
+  textarea.style.position = 'fixed'
+  textarea.style.left = '-9999px'
+  document.body.appendChild(textarea)
+  textarea.select()
+  let ok = false
+  try {
+    ok = document.execCommand('copy')
+  } catch {
+    ok = false
+  } finally {
+    document.body.removeChild(textarea)
+  }
+
+  if (ok) {
+    toast.add({ title: successTitle, color: 'success' })
+  } else {
+    toast.add({ title: t('copy.failedManual'), color: 'error' })
+  }
+  return ok
+}
+
+async function copyLink() {
+  if (!props.image?.url || copyingUrl.value) return
+  copyingUrl.value = true
+  try {
+    await copyText(props.image.url, t('copy.copiedUrl'))
+  } finally {
+    copyingUrl.value = false
+  }
 }
 
 function openInNewTab() {
@@ -126,6 +184,15 @@ function openInNewTab() {
   window.open(props.image.url, '_blank', 'noopener,noreferrer')
 }
 
+function downloadOriginal() {
+  if (!props.image?.url) return
+  const link = document.createElement('a')
+  link.href = props.image.url
+  link.download = props.image.originalName || 'image'
+  link.rel = 'noopener'
+  link.click()
+}
+
 function requestDelete() {
   emit('delete')
 }
@@ -142,6 +209,7 @@ function onImageLoad(event: Event) {
   <UModal
     :open="open && !!image"
     :title="t('image.previewTitle')"
+    :description="t('image.previewSubtitle')"
     :ui="{ content: 'max-w-5xl' }"
     @update:open="emit('update:open', $event)"
   >
@@ -149,108 +217,207 @@ function onImageLoad(event: Event) {
       v-if="image"
       #body
     >
-      <div class="grid gap-5 md:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)] md:items-stretch">
-        <div class="flex min-h-[14rem] items-center justify-center overflow-hidden rounded-xl border border-default bg-muted/15 p-3 md:min-h-[22rem]">
-          <img
-            :src="image.url"
-            :alt="image.originalName"
-            class="max-h-[min(70vh,32rem)] w-full object-contain"
-            @load="onImageLoad"
-          >
-        </div>
-
-        <div class="flex min-h-0 flex-col gap-4">
-          <dl class="grid gap-2.5 sm:grid-cols-2">
-            <div
-              v-for="row in detailRows"
-              :key="row.label"
-              class="min-w-0 rounded-lg border border-default/60 bg-muted/10 px-3 py-2"
-              :class="row.mono ? 'sm:col-span-2' : ''"
+      <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start">
+          <div class="preview-checkerboard flex items-center justify-center overflow-hidden rounded-xl border border-default p-4">
+            <img
+              :src="image.url"
+              :alt="image.originalName"
+              class="max-h-[min(60vh,24rem)] w-full object-contain"
+              @load="onImageLoad"
             >
-              <dt class="text-xs text-muted">
-                {{ row.label }}
+          </div>
+
+          <div class="flex min-w-0 flex-col gap-5">
+            <dl class="divide-y divide-default text-sm">
+            <div class="flex gap-4 py-2.5 first:pt-0">
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewOriginalName') }}
               </dt>
-              <dd
-                class="mt-0.5 break-all text-sm"
-                :class="row.mono ? 'font-mono text-xs text-dimmed' : 'font-medium'"
-              >
-                <span
-                  v-if="row.storage && image.storage"
-                  class="inline-flex items-center gap-1.5"
-                >
-                  <UIcon
-                    :name="storageIcon"
-                    class="size-3.5 shrink-0"
-                  />
-                  {{ row.value }}
-                </span>
-                <template v-else>
-                  {{ row.value }}
-                </template>
+              <dd class="min-w-0 flex-1 break-all font-medium">
+                {{ image.originalName }}
               </dd>
             </div>
-          </dl>
-
-          <div class="mt-auto space-y-2 rounded-xl border border-default/70 bg-muted/10 p-3">
-            <p class="text-xs font-medium text-muted">
-              {{ t('image.previewLinks') }}
-            </p>
-            <div class="flex gap-1 rounded-lg border border-default bg-default p-0.5">
-              <UButton
-                v-for="item in copyFormatItems"
-                :key="item.value"
-                size="xs"
-                class="flex-1 justify-center"
-                :variant="copyFormat === item.value ? 'solid' : 'ghost'"
-                :color="copyFormat === item.value ? 'primary' : 'neutral'"
-                :label="item.label"
-                @click="selectCopyFormat(item.value)"
-              />
+            <div class="flex gap-4 py-2.5">
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewUploadedAt') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                {{ uploadedLabel }}
+              </dd>
             </div>
-            <div class="flex items-center gap-1.5">
-              <UInput
-                :model-value="previewValue"
-                readonly
-                size="sm"
-                class="min-w-0 flex-1 font-mono text-xs"
-              />
-              <CopyButton
-                icon="i-lucide-copy"
-                :label="t('common.copy')"
-                :value="previewValue"
-                :success-title="copySuccessTitle"
-              />
+            <div class="flex gap-4 py-2.5">
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewSize') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                {{ sizeLabel }}
+              </dd>
             </div>
-          </div>
+            <div class="flex gap-4 py-2.5">
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewDimensions') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                {{ dimensionsLabel }}
+              </dd>
+            </div>
+            <div class="flex gap-4 py-2.5">
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewContentType') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                {{ image.contentType }}
+              </dd>
+            </div>
+            <div
+              v-if="showStorage && image.storage"
+              class="flex gap-4 py-2.5"
+            >
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewStorage') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                <span class="inline-flex items-center gap-1.5">
+                  <UIcon
+                    :name="storageIcon"
+                    class="size-3.5 shrink-0 text-muted"
+                  />
+                  {{ image.storage.name }}
+                </span>
+              </dd>
+            </div>
+            <div
+              v-if="uploadSourceTag"
+              class="flex gap-4 py-2.5"
+            >
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewUploadSource') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                <span class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                  {{ uploadSourceTag }}
+                </span>
+              </dd>
+            </div>
+            <div
+              v-if="image.owner"
+              class="flex gap-4 py-2.5"
+            >
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewOwner') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                {{ image.owner.username }}
+              </dd>
+            </div>
+            <div class="flex gap-4 py-2.5 last:pb-0">
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewKey') }}
+              </dt>
+              <dd class="flex min-w-0 flex-1 items-start gap-2">
+                <span class="min-w-0 flex-1 break-all font-mono text-xs text-dimmed">
+                  {{ image.key }}
+                </span>
+                <CopyButton
+                  icon="i-lucide-copy"
+                  icon-only
+                  variant="ghost"
+                  color="neutral"
+                  class="shrink-0"
+                  :label="t('common.copy')"
+                  :value="image.key"
+                  :success-title="t('copy.copied')"
+                />
+              </dd>
+            </div>
+            </dl>
 
-          <div class="flex flex-wrap justify-end gap-2 border-t border-default pt-3">
-            <UButton
-              :label="t('image.previewOpen')"
-              icon="i-lucide-external-link"
-              color="neutral"
-              variant="outline"
-              size="sm"
-              @click="openInNewTab"
-            />
-            <UButton
-              :label="t('common.delete')"
-              icon="i-lucide-trash-2"
-              color="error"
-              variant="outline"
-              size="sm"
-              :loading="deleting"
-              @click="requestDelete"
-            />
-            <UButton
-              :label="t('image.previewClose')"
-              color="neutral"
-              variant="outline"
-              size="sm"
-              @click="close"
-            />
+            <div class="border-t border-default pt-4">
+              <p class="mb-2.5 text-sm font-medium">
+                {{ t('image.previewLinks') }}
+              </p>
+              <div class="flex gap-1 rounded-lg border border-default bg-default p-0.5">
+                <UButton
+                  v-for="item in embedFormatItems"
+                  :key="item.value"
+                  size="xs"
+                  class="flex-1 justify-center"
+                  :variant="embedFormat === item.value ? 'solid' : 'ghost'"
+                  :color="embedFormat === item.value ? 'primary' : 'neutral'"
+                  :label="item.label"
+                  @click="selectEmbedFormat(item.value)"
+                />
+              </div>
+              <div class="mt-2 flex items-center gap-2">
+                <UInput
+                  :model-value="previewValue"
+                  readonly
+                  size="sm"
+                  class="min-w-0 flex-1 font-mono text-xs"
+                />
+                <CopyButton
+                  :label="t('common.copy')"
+                  :value="previewValue"
+                  :success-title="copySuccessTitle"
+                />
+              </div>
+            </div>
           </div>
         </div>
+    </template>
+
+    <template
+      v-if="image"
+      #footer
+    >
+      <div class="flex w-full flex-wrap justify-end gap-1.5">
+        <UButton
+          :label="t('image.previewOpen')"
+          icon="i-lucide-external-link"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          @click="openInNewTab"
+        />
+        <UButton
+          :label="t('image.previewDownload')"
+          icon="i-lucide-download"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          @click="downloadOriginal"
+        />
+        <UButton
+          :label="t('image.previewCopyLink')"
+          icon="i-lucide-link"
+          color="primary"
+          size="sm"
+          :loading="copyingUrl"
+          @click="copyLink"
+        />
+        <UButton
+          :label="t('common.delete')"
+          icon="i-lucide-trash-2"
+          color="error"
+          variant="outline"
+          size="sm"
+          :loading="deleting"
+          @click="requestDelete"
+        />
       </div>
     </template>
   </UModal>
 </template>
+
+<style scoped>
+.preview-checkerboard {
+  background-color: var(--ui-bg-muted);
+  background-image:
+    linear-gradient(45deg, color-mix(in oklab, var(--ui-border) 28%, transparent) 25%, transparent 25%),
+    linear-gradient(-45deg, color-mix(in oklab, var(--ui-border) 28%, transparent) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, color-mix(in oklab, var(--ui-border) 28%, transparent) 75%),
+    linear-gradient(-45deg, transparent 75%, color-mix(in oklab, var(--ui-border) 28%, transparent) 75%);
+  background-size: 14px 14px;
+  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
+}
+</style>