release: v1.4.0 — 标签系统、操作日志扩展与文档截图更新

- 每用户标签与彩色打标，图库 OR/AND 筛选与批量打标
- 操作日志记录登录、删除、设置与标签操作
- API 标签/打标接口；README 与文档站截图同步

app/pages/gallery.vue

@@ -46,9 +46,17 @@ const {
   activeUploadSource,
   setActiveUploadSource,
   resetFilters,
-  loadStorageBackendOptions
+  loadStorageBackendOptions,
+  activeTagIds,
+  activeTagMode,
+  activeUntaggedOnly,
+  setActiveTagFilter,
+  toggleTagFilter,
+  listQueryParams
 } = useImageList()
 
+const { items: tagItems, fetchTags, batchUpdateTags } = useTags()
+
 const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus } = useAuth()
 const toast = useToast()
 const { t } = useI18n()
@@ -66,6 +74,7 @@ const showScrollTop = ref(false)
 const previewOpen = ref(false)
 const previewImage = ref<ImageItem | null>(null)
 const viewMode = ref<'grid' | 'list'>('grid')
+const batchTagOpen = ref(false)
 
 const currentUploadSource = ref('all')
 const currentStorageBackend = ref('all')
@@ -96,7 +105,8 @@ function scrollToTop() {
 
 async function fetchStats() {
   stats.value = await $fetch<StatsResponse>('/api/stats', {
-    credentials: 'include'
+    credentials: 'include',
+    query: listQueryParams()
   })
 }
 
@@ -131,7 +141,8 @@ async function refreshAll() {
     await Promise.all([
       fetchStats(),
       reloadGallery(),
-      loadStorageBackendOptions()
+      loadStorageBackendOptions(),
+      fetchTags()
     ])
     currentUploadSource.value = activeUploadSource.value
     currentStorageBackend.value = activeStorageBackend.value
@@ -174,11 +185,85 @@ async function handleResetFilters() {
   currentStorageBackend.value = 'all'
   try {
     await resetFilters()
+    await fetchStats()
   } catch (error: unknown) {
     handleAuthError(error)
   }
 }
 
+async function handleTagIdsChange(tagIds: number[]) {
+  if (!isAuthenticated.value) return
+  selectedKeys.value = new Set()
+  try {
+    await setActiveTagFilter({ tagIds, untaggedOnly: false })
+    await fetchStats()
+  } catch (error: unknown) {
+    handleAuthError(error)
+  }
+}
+
+async function handleTagModeChange(tagMode: 'or' | 'and') {
+  if (!isAuthenticated.value) return
+  try {
+    await setActiveTagFilter({ tagMode })
+    await fetchStats()
+  } catch (error: unknown) {
+    handleAuthError(error)
+  }
+}
+
+async function handleUntaggedOnlyChange(untaggedOnly: boolean) {
+  if (!isAuthenticated.value) return
+  selectedKeys.value = new Set()
+  try {
+    await setActiveTagFilter({ untaggedOnly, tagIds: [] })
+    await fetchStats()
+  } catch (error: unknown) {
+    handleAuthError(error)
+  }
+}
+
+async function handleTagFilterClick(tagId: number) {
+  if (!isAuthenticated.value) return
+  selectedKeys.value = new Set()
+  try {
+    await toggleTagFilter(tagId)
+    await fetchStats()
+  } catch (error: unknown) {
+    handleAuthError(error)
+  }
+}
+
+async function handleUntaggedFilterClick() {
+  if (!isAuthenticated.value) return
+  selectedKeys.value = new Set()
+  try {
+    await setActiveTagFilter({ untaggedOnly: true, tagIds: [] })
+    await fetchStats()
+  } catch (error: unknown) {
+    handleAuthError(error)
+  }
+}
+
+async function confirmBatchTags(tagIds: number[], action: 'add' | 'remove') {
+  const keys = Array.from(selectedKeys.value)
+  if (!keys.length || !tagIds.length) return
+  try {
+    await batchUpdateTags(keys, tagIds, action)
+    batchTagOpen.value = false
+    selectedKeys.value = new Set()
+    toast.add({ title: t('tags.batchSuccess'), color: 'success' })
+    await Promise.all([reloadGallery(), fetchStats(), fetchTags(true)])
+  } catch (error: unknown) {
+    handleAuthError(error)
+    toast.add({ title: t('tags.batchFailed'), color: 'error' })
+  }
+}
+
+function goToTagSettings() {
+  void navigateTo({ path: '/settings', query: { tab: 'tags' } })
+}
+
 function updateSelectedKeys(keys: Set<string>) {
   selectedKeys.value = keys
 }
@@ -398,16 +483,26 @@ watch(isAuthenticated, async (authed, prev) => {
             :storage-backend-items="storageBackendItems"
             :upload-source="currentUploadSource"
             :upload-source-items="uploadSourceItems"
+            :tag-ids="activeTagIds"
+            :tag-mode="activeTagMode"
+            :untagged-only="activeUntaggedOnly"
+            :tags="tagItems"
             :view-mode="viewMode"
             :selected-count="selectedCount"
             :loading="galleryLoading"
             :show-batch-delete="true"
+            :show-batch-tags="selectedCount > 0"
             @update:storage-backend="handleStorageBackendChange"
             @update:upload-source="handleUploadSourceChange"
+            @update:tag-ids="handleTagIdsChange"
+            @update:tag-mode="handleTagModeChange"
+            @update:untagged-only="handleUntaggedOnlyChange"
             @update:view-mode="viewMode = $event"
             @search="handleSearch"
             @reset="handleResetFilters"
             @batch-delete="requestBatchDelete"
+            @batch-tags="batchTagOpen = true"
+            @manage-tags="goToTagSettings"
           />
         </div>
 
@@ -429,6 +524,7 @@ watch(isAuthenticated, async (authed, prev) => {
           gallery
           :show-key="false"
           show-storage
+          show-tags
           :items="items"
           :selected-keys="selectedKeys"
           :selectable="true"
@@ -436,11 +532,14 @@ watch(isAuthenticated, async (authed, prev) => {
           @update:selected-keys="updateSelectedKeys"
           @preview="openPreview"
           @delete="(image) => requestDelete(image.key)"
+          @tag-click="handleTagFilterClick"
+          @untagged-click="handleUntaggedFilterClick"
         />
 
         <GalleryImageList
           v-else
           show-storage
+          show-tags
           :items="items"
           :selected-keys="selectedKeys"
           :selectable="true"
@@ -448,12 +547,15 @@ watch(isAuthenticated, async (authed, prev) => {
           @update:selected-keys="updateSelectedKeys"
           @preview="openPreview"
           @delete="(image) => requestDelete(image.key)"
+          @tag-click="handleTagFilterClick"
+          @untagged-click="handleUntaggedFilterClick"
         />
 
         <ImagePreviewModal
           v-model:open="previewOpen"
           :image="previewImage"
           show-storage
+          show-tags
           :deleting="previewImage ? deletingKeys.has(previewImage.key) : false"
           :allow-delete="true"
           @delete="requestPreviewDelete"
@@ -479,6 +581,13 @@ watch(isAuthenticated, async (authed, prev) => {
         @confirm="confirmDelete"
       />
 
+      <BatchTagModal
+        v-model:open="batchTagOpen"
+        :tags="tagItems"
+        :selected-count="selectedCount"
+        @confirm="confirmBatchTags"
+      />
+
       <UButton
         v-show="showScrollTop"
         icon="i-lucide-arrow-up"

app/pages/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { ImageItem } from '~/types/image'
+import type { ImageItem, ImageTag } from '~/types/image'
+import { buildImageBbcode } from '~/utils/image-display'
 
 const { uploading, progressItems, uploadFiles } = useImageUpload()
 
@@ -9,6 +10,9 @@ const {
   loadPreferences
 } = useUploadPreferences()
 
+const { items: tagItems, fetchTags, batchUpdateTags } = useTags()
+const { recordRecent } = useRecentTags()
+
 const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus } = useAuth()
 const toast = useToast()
 const { t } = useI18n()
@@ -17,6 +21,9 @@ const deletingKeys = ref<Set<string>>(new Set())
 const emptySelection = ref(new Set<string>())
 const previewOpen = ref(false)
 const previewImage = ref<ImageItem | null>(null)
+const tagModalOpen = ref(false)
+const tagModalImage = ref<ImageItem | null>(null)
+const batchTagOpen = ref(false)
 
 const showProgress = computed(
   () =>
@@ -47,7 +54,7 @@ onMounted(async () => {
     await checkSession()
   }
   if (isAuthenticated.value) {
-    await loadPage()
+    await Promise.all([loadPage(), fetchTags()])
   }
 })
 
@@ -66,6 +73,8 @@ function copyFormatLabel() {
       return t('copy.url')
     case 'html':
       return t('copy.html')
+    case 'bbcode':
+      return t('copy.bbcode')
     default:
       return t('copy.markdown')
   }
@@ -108,7 +117,9 @@ async function handleUpload(files: File[]) {
             ? first.url
             : copyFormat.value === 'html'
               ? first.html
-              : first.markdown
+              : copyFormat.value === 'bbcode'
+                ? buildImageBbcode(first.url)
+                : first.markdown
         if (text) await copyUploadLink(text)
       }
     }
@@ -148,6 +159,50 @@ function requestPreviewDelete() {
   if (!previewImage.value) return
   void handleDelete(previewImage.value.key)
 }
+
+function openTagModal(image: ImageItem) {
+  tagModalImage.value = image
+  tagModalOpen.value = true
+}
+
+function updateSessionItemTags(key: string, tags: ImageItem['tags']) {
+  sessionItems.value = sessionItems.value.map(item =>
+    item.key === key ? { ...item, tags } : item
+  )
+  if (previewImage.value?.key === key) {
+    previewImage.value = { ...previewImage.value, tags }
+  }
+  if (tagModalImage.value?.key === key) {
+    tagModalImage.value = { ...tagModalImage.value, tags }
+  }
+}
+
+function handleTagSaved(tags: ImageTag[]) {
+  if (!tagModalImage.value) return
+  updateSessionItemTags(tagModalImage.value.key, tags)
+}
+
+async function confirmBatchTags(tagIds: number[]) {
+  const keys = sessionItems.value.map(item => item.key)
+  if (!keys.length || !tagIds.length) return
+
+  try {
+    await batchUpdateTags(keys, tagIds, 'add')
+    batchTagOpen.value = false
+    recordRecent(tagIds)
+    toast.add({ title: t('tags.batchSuccess'), color: 'success' })
+    await fetchTags(true)
+    const addedTags = tagItems.value.filter(tag => tagIds.includes(tag.id))
+    sessionItems.value = sessionItems.value.map((item) => {
+      const merged = new Map((item.tags ?? []).map(tag => [tag.id, tag]))
+      for (const tag of addedTags) merged.set(tag.id, tag)
+      return { ...item, tags: [...merged.values()] }
+    })
+  } catch (error: unknown) {
+    handleAuthError(error)
+    toast.add({ title: t('tags.batchFailed'), color: 'error' })
+  }
+}
 </script>
 
 <template>
@@ -189,6 +244,14 @@ function requestPreviewDelete() {
             {{ t('upload.sessionTitle') }}
             <span class="ml-1 text-sm font-normal text-muted">({{ sessionItems.length }})</span>
           </h2>
+          <UButton
+            icon="i-lucide-tags"
+            variant="outline"
+            color="primary"
+            size="sm"
+            :label="t('tags.batchTagAll')"
+            @click="() => { batchTagOpen = true }"
+          />
         </div>
 
         <ImageGrid
@@ -196,9 +259,13 @@ function requestPreviewDelete() {
           :selected-keys="emptySelection"
           :selectable="false"
           :show-key="false"
+          :allow-delete="true"
+          show-tag-action
           :empty-text="t('upload.sessionEmpty')"
           @update:selected-keys="() => {}"
           @preview="openPreview"
+          @delete="(image) => handleDelete(image.key)"
+          @edit-tags="openTagModal"
         />
       </section>
 
@@ -209,6 +276,21 @@ function requestPreviewDelete() {
         :allow-delete="true"
         @delete="requestPreviewDelete"
       />
+
+      <ImageTagModal
+        v-model:open="tagModalOpen"
+        :image="tagModalImage"
+        :tags="tagItems"
+        @saved="handleTagSaved"
+      />
+
+      <BatchTagModal
+        v-model:open="batchTagOpen"
+        :tags="tagItems"
+        :selected-count="sessionItems.length"
+        add-only
+        @confirm="(tagIds) => confirmBatchTags(tagIds)"
+      />
     </AppShell>
   </div>
 </template>

app/pages/settings/index.vue

@@ -2,6 +2,7 @@
 import type { SettingsTab } from '~/types/settings'
 import { ADMIN_SETTINGS_TABS, USER_SETTINGS_TABS } from '~/types/settings'
 import { willActivateDomainSeparation } from '~/utils/domain-separation'
+import SettingsUserPreferencesFields from '~/components/settings/SettingsUserPreferencesFields.vue'
 
 type SettingSource = 'env' | 'db' | 'none'
 type WebpQualitySource = 'env' | 'db' | 'default'
@@ -51,7 +52,7 @@ const router = useRouter()
 
 const allowedTabs = computed(() => (isAdmin.value ? ADMIN_SETTINGS_TABS : USER_SETTINGS_TABS))
 
-const defaultTab = computed<SettingsTab>(() => (isAdmin.value ? 'basic' : 'logs'))
+const defaultTab = computed<SettingsTab>(() => (isAdmin.value ? 'basic' : 'tags'))
 
 function parseTab(value: unknown): SettingsTab | null {
   if (typeof value !== 'string') return null
@@ -69,26 +70,53 @@ const activeTab = computed<SettingsTab>({
 
 const sidebarItems = computed(() => {
   const labels: Record<SettingsTab, { label: string, icon: string }> = {
-    basic: { label: t('settings.navBasic'), icon: 'i-lucide-sliders-horizontal' },
+    basic: { label: t('settings.navBasic'), icon: 'i-lucide-settings' },
     domains: { label: t('settings.navDomains'), icon: 'i-lucide-globe' },
     access: { label: t('settings.navAccess'), icon: 'i-lucide-shield' },
+    tags: { label: t('settings.navTags'), icon: 'i-lucide-tags' },
     logs: { label: t('settings.navLogs'), icon: 'i-lucide-scroll-text' }
   }
   return allowedTabs.value.map(id => ({ id, ...labels[id] }))
 })
 
+const tabPageHeader = computed(() => {
+  const headers: Record<SettingsTab, { icon: string, title: string, subtitle: string }> = {
+    basic: {
+      icon: 'i-lucide-settings',
+      title: t('settings.navBasic'),
+      subtitle: t('settings.pageSubtitleBasic')
+    },
+    domains: {
+      icon: 'i-lucide-globe',
+      title: t('settings.navDomains'),
+      subtitle: t('settings.pageSubtitleDomains')
+    },
+    access: {
+      icon: 'i-lucide-shield',
+      title: t('settings.navAccess'),
+      subtitle: t('settings.pageSubtitleAccess')
+    },
+    tags: {
+      icon: 'i-lucide-tags',
+      title: t('settings.navTags'),
+      subtitle: t('settings.pageSubtitleTags')
+    },
+    logs: {
+      icon: 'i-lucide-scroll-text',
+      title: t('settings.navLogs'),
+      subtitle: t('settings.pageSubtitleLogs')
+    }
+  }
+  return headers[activeTab.value]
+})
+
 const showSaveBar = computed(() =>
   isAdmin.value && ['basic', 'domains', 'access'].includes(activeTab.value)
 )
 
-const pageSubtitle = computed(() => {
-  if (activeTab.value === 'basic') {
-    return t('settings.pageSubtitleBasic')
-  }
-  return t('settings.pageSubtitle')
-})
-
 const checkingRelease = ref(false)
+const { resetToDefaults: resetUploadPreferences } = useUploadPreferences()
+const { load: reloadUserSettings } = useUserAutoDeleteSettings()
 
 const domainSeparationDocUrl = computed(() =>
   locale.value === 'en'
@@ -339,21 +367,33 @@ async function checkLatestRelease(options: { notify?: boolean, refresh?: boolean
 }
 
 const loginVerificationOptions = computed(() => [
-  { value: 'slider' as const, label: t('settings.loginVerificationSlider') },
-  { value: 'turnstile' as const, label: t('settings.loginVerificationTurnstile') },
-  { value: 'cap' as const, label: t('settings.loginVerificationCap') }
+  {
+    value: 'slider' as const,
+    label: t('settings.loginVerificationSlider'),
+    description: t('settings.loginVerificationSliderHint')
+  },
+  {
+    value: 'turnstile' as const,
+    label: t('settings.loginVerificationTurnstile'),
+    description: t('settings.loginVerificationTurnstileHint')
+  },
+  {
+    value: 'cap' as const,
+    label: t('settings.loginVerificationCap'),
+    description: t('settings.loginVerificationCapHint')
+  }
 ])
 
-const loginVerificationHint = computed(() => {
-  switch (loginVerificationMethodDraft.value) {
-    case 'turnstile':
-      return t('settings.loginVerificationTurnstileHint')
-    case 'cap':
-      return t('settings.loginVerificationCapHint')
-    default:
-      return t('settings.loginVerificationSliderHint')
+function restoreDefaults() {
+  if (activeTab.value === 'basic') {
+    resetUploadPreferences()
+    void reloadUserSettings()
   }
-})
+  if (settings.value) {
+    applySettings(settings.value)
+  }
+  toast.add({ title: t('settings.restoredDefaults'), color: 'success' })
+}
 
 async function loadPage() {
   if (isAdmin.value) {
@@ -427,23 +467,22 @@ watch(isAdmin, () => {
           <SettingsSidebar
             v-model="activeTab"
             :items="sidebarItems"
-            :title="t('settings.pageTitle')"
-            :subtitle="pageSubtitle"
           />
 
           <div class="flex min-w-0 flex-1 flex-col bg-default">
-            <div
-              class="flex-1"
-              :class="activeTab === 'logs' ? '' : 'p-4 sm:p-5'"
-            >
+            <div class="flex-1 p-5 text-sm sm:p-6">
+              <SettingsPageHeader
+                v-if="activeTab !== 'logs'"
+                :icon="tabPageHeader.icon"
+                :title="tabPageHeader.title"
+                :subtitle="tabPageHeader.subtitle"
+              />
+
               <div
                 v-if="activeTab === 'basic' && isAdmin"
               >
                 <SettingsPanel v-if="settings">
-                  <SettingsSection
-                    :title="t('settings.featureToggles')"
-                    :hint="t('settings.featureTogglesHint')"
-                  >
+                  <SettingsSection :title="t('settings.featureToggles')">
                     <SettingsGroup>
                       <SettingsToggleRow
                         v-model="allowRegistrationDraft"
@@ -455,31 +494,17 @@ watch(isAdmin, () => {
 
                   <SettingsUserPreferencesFields />
 
-                  <SettingsSection
-                    :title="t('settings.systemInfo')"
-                    :hint="t('settings.systemInfoHint')"
-                  >
-                    <template
-                      v-if="isAdmin"
-                      #action
-                    >
-                      <UButton
-                        :label="t('settings.checkUpdate')"
-                        icon="i-lucide-refresh-cw"
-                        variant="outline"
-                        color="neutral"
-                        size="sm"
-                        class="shrink-0"
-                        :loading="checkingRelease"
-                        @click="checkLatestRelease({ notify: true, refresh: true })"
+                  <SettingsSection :title="t('settings.systemInfo')">
+                    <SettingsGroup>
+                      <SettingsSystemInfo
+                        :app-version="settings.appVersion"
+                        :update-available="!!releaseCheck?.updateAvailable"
+                        :latest-version="releaseCheck?.latestVersion ?? null"
+                        :release-url="releaseCheck?.releaseUrl ?? null"
+                        :checking="checkingRelease"
+                        @check-update="checkLatestRelease({ notify: true, refresh: true })"
                       />
-                    </template>
-                    <SettingsSystemInfo
-                      :app-version="settings.appVersion"
-                      :update-available="!!releaseCheck?.updateAvailable"
-                      :latest-version="releaseCheck?.latestVersion ?? null"
-                      :release-url="releaseCheck?.releaseUrl ?? null"
-                    />
+                    </SettingsGroup>
                   </SettingsSection>
                 </SettingsPanel>
                 <div
@@ -498,50 +523,60 @@ watch(isAdmin, () => {
               >
                 <SettingsPanel v-if="settings">
                   <SettingsSection :title="t('settings.domainSettings')">
-                    <p
-                      v-if="settings.runtime.currentOrigin"
-                      class="mb-3 pl-3 text-xs text-primary"
-                    >
-                      {{ t('settings.runtimeDetected', { url: settings.runtime.currentOrigin }) }}
-                    </p>
-                    <SettingsGroup>
+                    <div class="divide-y divide-default">
+                      <p
+                        v-if="settings.runtime.currentOrigin"
+                        class="py-4 text-xs text-primary"
+                      >
+                        <span class="rounded-lg bg-primary/5 px-3 py-2 inline-block">
+                          {{ t('settings.runtimeDetected', { url: settings.runtime.currentOrigin }) }}
+                        </span>
+                      </p>
                       <SettingsToggleRow
                         :model-value="domainSeparationDraft"
                         :title="t('setup.domainSeparation')"
                         :hint="t('setup.domainSeparationHint')"
                         @update:model-value="onDomainSeparationDraftChange"
                       />
-                    </SettingsGroup>
+                      <div
+                        v-if="domainSeparationDraft"
+                        class="py-4"
+                      >
+                        <div class="flex flex-col gap-3 rounded-xl border border-warning/30 bg-warning/5 px-4 py-3 sm:flex-row sm:items-start">
+                          <UIcon
+                            name="i-lucide-triangle-alert"
+                            class="mt-0.5 size-4 shrink-0 text-warning"
+                          />
+                          <div class="min-w-0 flex-1">
+                            <p class="text-sm font-medium text-warning">
+                              {{ t('settings.domainSeparationProxyTitle') }}
+                            </p>
+                            <p class="mt-1 text-xs leading-relaxed text-warning/90">
+                              {{ t('settings.domainSeparationProxyBody') }}
+                            </p>
+                          </div>
+                          <a
+                            :href="domainSeparationDocUrl"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="shrink-0 text-xs text-primary hover:underline sm:pt-0.5"
+                          >
+                            {{ t('setup.domainSeparationProxyExample') }} →
+                          </a>
+                        </div>
+                        <UAlert
+                          v-if="settings.runtime.hostRole === 'unknown'"
+                          color="warning"
+                          variant="subtle"
+                          icon="i-lucide-triangle-alert"
+                          :title="t('settings.hostRoleUnknown')"
+                          class="mt-4"
+                        />
+                      </div>
+                    </div>
                   </SettingsSection>
 
-                  <p
-                    v-if="domainSeparationDraft"
-                    class="rounded-xl border border-warning/25 bg-warning/5 px-4 py-3 text-xs leading-relaxed text-warning"
-                  >
-                    {{ t('setup.domainSeparationProxyHint') }}
-                    <a
-                      :href="domainSeparationDocUrl"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-primary hover:underline"
-                    >
-                      {{ t('setup.domainSeparationProxyExample') }}
-                    </a>
-                  </p>
-
-                  <UAlert
-                    v-if="domainSeparationDraft && settings.runtime.hostRole === 'unknown'"
-                    color="warning"
-                    variant="subtle"
-                    icon="i-lucide-triangle-alert"
-                    :title="t('settings.hostRoleUnknown')"
-                    class="mb-4"
-                  />
-
-                  <SettingsSection
-                    :title="t('settings.pathAndLink')"
-                    :hint="t('settings.pathAndLinkHint')"
-                  >
+                  <SettingsSection :title="t('settings.pathAndLink')">
                     <SettingsGroup>
                       <SettingsToggleRow
                         :model-value="hideFolderInUrlDraft"
@@ -590,33 +625,34 @@ watch(isAdmin, () => {
                     </SettingsGroup>
                   </SettingsSection>
 
-                  <SettingsSection :title="t('settings.imageBaseUrl')">
+                  <SettingsSection :title="t('settings.imageDomainSection')">
                     <div
                       v-if="domainSeparationDraft"
-                      class="grid gap-4 sm:grid-cols-2"
+                      class="grid gap-4 sm:grid-cols-2 sm:divide-x sm:divide-default"
                     >
                       <SettingsGroup>
-                        <div class="space-y-3 px-4 py-4 sm:px-5">
+                        <div class="space-y-3 py-4 sm:pr-4">
                           <div class="flex flex-wrap items-center gap-2">
                             <p class="text-sm font-medium text-highlighted">
                               {{ t('settings.siteBaseUrl') }}
                             </p>
                             <UBadge
-                              :color="sourceBadge(settings.siteBaseUrlSource).color"
+                              color="success"
                               variant="subtle"
                               size="xs"
                             >
-                              {{ sourceBadge(settings.siteBaseUrlSource).label }}
+                              {{ t('settings.badgeEnabled') }}
                             </UBadge>
                           </div>
                           <p class="text-xs leading-relaxed text-muted">
-                            {{ t('settings.siteBaseUrlHint') }}
+                            {{ t('settings.siteBaseUrlRoleHint') }}
                           </p>
                           <div class="flex gap-2">
                             <UInput
                               v-model="siteBaseUrlDraft"
+                              size="sm"
                               :placeholder="t('settings.siteBaseUrlPlaceholder')"
-                              class="min-w-0 flex-1 font-mono text-sm"
+                              class="min-w-0 flex-1 font-mono"
                             />
                             <UButton
                               v-if="settings.runtime.currentOrigin"
@@ -630,7 +666,7 @@ watch(isAdmin, () => {
                           </div>
                           <p
                             v-if="settings.effectiveSiteBaseUrl"
-                            class="truncate text-xs text-muted"
+                            class="truncate rounded-lg bg-muted/30 px-3 py-2 text-xs text-muted"
                             :title="settings.effectiveSiteBaseUrl"
                           >
                             {{ t('settings.siteBaseUrlActive', { url: settings.effectiveSiteBaseUrl }) }}
@@ -639,30 +675,31 @@ watch(isAdmin, () => {
                       </SettingsGroup>
 
                       <SettingsGroup>
-                        <div class="space-y-3 px-4 py-4 sm:px-5">
+                        <div class="space-y-3 py-4 sm:pl-4">
                           <div class="flex flex-wrap items-center gap-2">
                             <p class="text-sm font-medium text-highlighted">
                               {{ t('settings.imageBaseUrl') }}
                             </p>
                             <UBadge
-                              :color="sourceBadge(settings.imageBaseUrlSource).color"
+                              color="success"
                               variant="subtle"
                               size="xs"
                             >
-                              {{ sourceBadge(settings.imageBaseUrlSource).label }}
+                              {{ t('settings.badgeEnabled') }}
                             </UBadge>
                           </div>
                           <p class="text-xs leading-relaxed text-muted">
-                            {{ t('settings.imageBaseUrlHint') }}
+                            {{ t('settings.imageBaseUrlRoleHint') }}
                           </p>
                           <UInput
                             v-model="imageBaseUrlDraft"
+                            size="sm"
                             :placeholder="t('settings.imageBaseUrlPlaceholder')"
-                            class="w-full font-mono text-sm"
+                            class="w-full font-mono"
                           />
                           <p
                             v-if="settings.effectiveImageBaseUrl"
-                            class="truncate text-xs text-muted"
+                            class="truncate rounded-lg bg-muted/30 px-3 py-2 text-xs text-muted"
                             :title="settings.effectiveImageBaseUrl"
                           >
                             {{ t('settings.imageBaseUrlActive', { url: settings.effectiveImageBaseUrl }) }}
@@ -672,7 +709,7 @@ watch(isAdmin, () => {
                     </div>
 
                     <SettingsGroup v-else>
-                      <div class="space-y-3 px-4 py-4 sm:px-5">
+                      <div class="space-y-3 py-4">
                         <div class="flex flex-wrap items-center gap-2">
                           <p class="text-sm font-medium text-highlighted">
                             {{ t('settings.imageBaseUrl') }}
@@ -698,12 +735,13 @@ watch(isAdmin, () => {
                         </p>
                         <UInput
                           v-model="imageBaseUrlDraft"
+                          size="sm"
                           :placeholder="t('settings.imageBaseUrlPlaceholder')"
-                          class="w-full font-mono text-sm"
+                          class="w-full font-mono"
                         />
                         <p
                           v-if="settings.effectiveImageBaseUrl"
-                          class="truncate text-xs text-muted"
+                          class="truncate rounded-lg bg-muted/30 px-3 py-2 text-xs text-muted"
                           :title="settings.effectiveImageBaseUrl"
                         >
                           {{ t('settings.imageBaseUrlActive', { url: settings.effectiveImageBaseUrl }) }}
@@ -728,98 +766,89 @@ watch(isAdmin, () => {
                 class="settings-referer-section"
               >
                 <SettingsPanel v-if="settings">
-                  <div class="flex items-start gap-3">
-                    <div class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-                      <UIcon
-                        name="i-lucide-shield"
-                        class="size-4 text-primary"
-                      />
-                    </div>
-                    <div class="min-w-0 flex-1">
-                      <div class="flex flex-wrap items-center gap-2">
-                        <h2 class="text-sm font-semibold text-highlighted">
-                          {{ t('settings.accessControl') }}
-                        </h2>
-                        <UBadge
-                          :color="refererDraft.trim() ? 'success' : 'neutral'"
-                          variant="subtle"
-                          size="xs"
-                        >
-                          {{ refererDraft.trim() ? t('settings.refererEnabled') : t('settings.refererUnrestricted') }}
-                        </UBadge>
-                      </div>
-                      <p class="mt-1 text-xs leading-relaxed text-muted">
-                        {{ t('settings.refererHint') }}
-                      </p>
-                    </div>
-                  </div>
+                  <SettingsPlainSection
+                    :title="t('settings.refererProtection')"
+                    :hint="t('settings.refererHint')"
+                  >
+                    <template #badge>
+                      <UBadge
+                        :color="refererDraft.trim() ? 'success' : 'neutral'"
+                        variant="subtle"
+                        size="xs"
+                      >
+                        {{ refererDraft.trim() ? t('settings.refererEnabled') : t('settings.refererUnrestricted') }}
+                      </UBadge>
+                    </template>
 
-                  <div class="mt-5 grid gap-5 lg:grid-cols-[minmax(0,1fr)_12rem] xl:grid-cols-[minmax(0,1fr)_14rem]">
-                    <div class="min-w-0 space-y-2">
-                      <label class="text-sm font-medium text-highlighted">
-                        {{ t('settings.refererDomainsLabel') }}
-                      </label>
-                      <UTextarea
-                        v-model="refererDraft"
-                        :placeholder="t('settings.refererPlaceholder')"
-                        :rows="7"
-                        :autoresize="false"
-                        class="settings-referer-field w-full font-mono text-sm"
-                      />
-                      <div class="flex gap-2 rounded-lg border border-info/20 bg-info/5 px-3 py-2.5 text-xs leading-relaxed text-muted">
-                        <UIcon
-                          name="i-lucide-info"
-                          class="mt-0.5 size-3.5 shrink-0 text-info"
+                    <div class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_12rem] xl:grid-cols-[minmax(0,1fr)_14rem]">
+                      <div class="min-w-0 space-y-3">
+                        <label class="block text-sm font-medium text-highlighted">
+                          {{ t('settings.refererDomainsLabel') }}
+                        </label>
+                        <UTextarea
+                          v-model="refererDraft"
+                          size="sm"
+                          :placeholder="t('settings.refererPlaceholder')"
+                          :rows="7"
+                          :autoresize="false"
+                          class="settings-referer-field w-full font-mono"
                         />
-                        <span>{{ t('settings.refererTip') }}</span>
+                        <div class="flex gap-2 rounded-lg border border-info/20 bg-info/5 px-3 py-2.5 text-xs leading-relaxed text-muted">
+                          <UIcon
+                            name="i-lucide-info"
+                            class="mt-0.5 size-3.5 shrink-0 text-info"
+                          />
+                          <span>{{ t('settings.refererTip') }}</span>
+                        </div>
                       </div>
-                    </div>
 
-                    <div class="space-y-3 border-l border-default pl-4">
-                      <div>
-                        <p class="text-xs font-medium text-highlighted">
-                          {{ t('settings.refererExamplesTitle') }}
-                        </p>
-                        <p class="mt-2 font-mono text-xs text-muted">
-                          {{ t('settings.refererExamplesSample') }}
-                        </p>
-                      </div>
-                      <div>
-                        <p class="text-xs font-medium text-highlighted">
-                          {{ t('settings.refererScenarioTitle') }}
-                        </p>
-                        <p class="mt-1 text-xs leading-relaxed text-muted">
-                          {{ t('settings.refererScenarioDesc') }}
-                        </p>
+                      <div class="space-y-4 border-l border-default pl-4">
+                        <div>
+                          <p class="text-sm font-medium text-highlighted">
+                            {{ t('settings.refererExamplesTitle') }}
+                          </p>
+                          <p class="mt-2 font-mono text-xs text-muted">
+                            {{ t('settings.refererExamplesSample') }}
+                          </p>
+                        </div>
+                        <div>
+                          <p class="text-sm font-medium text-highlighted">
+                            {{ t('settings.refererScenarioTitle') }}
+                          </p>
+                          <ul class="mt-2 list-disc space-y-1 pl-4 text-xs leading-relaxed text-muted">
+                            <li>{{ t('settings.refererScenario1') }}</li>
+                            <li>{{ t('settings.refererScenario2') }}</li>
+                            <li>{{ t('settings.refererScenario3') }}</li>
+                            <li>{{ t('settings.refererScenario4') }}</li>
+                          </ul>
+                        </div>
                       </div>
                     </div>
-                  </div>
+                  </SettingsPlainSection>
 
                   <SettingsSection
                     :title="t('settings.loginVerification')"
                     :hint="t('settings.loginVerificationHint')"
                   >
                     <SettingsGroup>
-                      <div class="space-y-4 px-4 py-4 sm:px-5">
-                        <URadioGroup
-                          v-model="loginVerificationMethodDraft"
-                          :items="loginVerificationOptions"
-                        />
-                        <p class="text-xs leading-relaxed text-muted">
-                          {{ loginVerificationHint }}
-                        </p>
-                        <div
-                          v-if="loginVerificationMethodDraft === 'turnstile'"
-                          class="space-y-3 rounded-xl border border-default bg-muted/20 p-4"
-                        >
+                      <SettingsRadioGroup
+                        v-model="loginVerificationMethodDraft"
+                        :items="loginVerificationOptions"
+                      />
+                      <div
+                        v-if="loginVerificationMethodDraft === 'turnstile'"
+                        class="py-4"
+                      >
+                        <div class="space-y-3 rounded-xl border border-default bg-muted/20 p-4">
                           <div class="space-y-2">
                             <label class="text-sm font-medium text-highlighted">
                               {{ t('settings.turnstileSiteKey') }}
                             </label>
                             <UInput
                               v-model="turnstileSiteKeyDraft"
+                              size="sm"
                               :placeholder="t('settings.turnstileSiteKeyPlaceholder')"
-                              class="w-full font-mono text-sm"
+                              class="w-full font-mono"
                             />
                           </div>
                           <div class="space-y-2">
@@ -829,23 +858,27 @@ watch(isAdmin, () => {
                             <UInput
                               v-model="turnstileSecretKeyDraft"
                               type="password"
+                              size="sm"
                               :placeholder="t('settings.turnstileSecretKeyPlaceholder')"
-                              class="w-full font-mono text-sm"
+                              class="w-full font-mono"
                             />
                           </div>
                         </div>
-                        <div
-                          v-else-if="loginVerificationMethodDraft === 'cap'"
-                          class="space-y-3 rounded-xl border border-default bg-muted/20 p-4"
-                        >
+                      </div>
+                      <div
+                        v-else-if="loginVerificationMethodDraft === 'cap'"
+                        class="py-4"
+                      >
+                        <div class="space-y-3 rounded-xl border border-default bg-muted/20 p-4">
                           <div class="space-y-2">
                             <label class="text-sm font-medium text-highlighted">
                               {{ t('settings.capApiEndpoint') }}
                             </label>
                             <UInput
                               v-model="capApiEndpointDraft"
+                              size="sm"
                               :placeholder="t('settings.capApiEndpointPlaceholder')"
-                              class="w-full font-mono text-sm"
+                              class="w-full font-mono"
                             />
                           </div>
                           <div class="space-y-2">
@@ -855,8 +888,9 @@ watch(isAdmin, () => {
                             <UInput
                               v-model="capSecretDraft"
                               type="password"
+                              size="sm"
                               :placeholder="t('settings.capSecretKeyPlaceholder')"
-                              class="w-full font-mono text-sm"
+                              class="w-full font-mono"
                             />
                           </div>
                         </div>
@@ -875,6 +909,8 @@ watch(isAdmin, () => {
                 </div>
               </div>
 
+              <SettingsTagsPanel v-else-if="activeTab === 'tags'" />
+
               <SettingsLogsPanel v-else-if="activeTab === 'logs'" />
             </div>
 
@@ -883,6 +919,7 @@ watch(isAdmin, () => {
               :has-changes="hasServerChanges"
               :saving="savingServer"
               @save="saveServerSettings"
+              @restore="restoreDefaults"
             />
           </div>
         </div>