diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0724852..de77244 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,24 @@
 
 ## [Unreleased]
 
+## [1.4.0] - 2026-09-09
+
+### 新增
+
+- **标签系统**：每用户独立标签与彩色标记；设置页管理（新建、改色、合并、删除）
+- **图片打标**：上传后单张/批量打标；图库按标签筛选（OR / AND）、批量打标与解标
+- **操作日志扩展**：记录登录、删除、设置变更、标签操作等；支持日期、用户、操作类型、来源与 IP 筛选
+- **API**：标签 CRUD、图片打标、`batch-tags`；上传支持 `tagIds`；列表/搜索/统计支持标签筛选
+
+### 改进
+
+- 操作日志页 UI 改版（操作/来源徽章、移除备注列）
+- 设置侧栏增加「标签管理」
+
+### 文档
+
+- README 与文档站截图更新（上传、图库、标签、操作日志等）
+
 ## [1.3.0] - 2026-09-07
 
 ### 新增
diff --git a/README.en.md b/README.en.md
index 4158463..6dcdc66 100644
--- a/README.en.md
+++ b/README.en.md
@@ -31,9 +31,13 @@
 
 **main** has no public demo. **cloudflare** branch live demo: [pic.roven.cc](https://pic.roven.cc)
 
-| API | Gallery (detail) |
-| :--: | :--------------: |
-| ![API](docs/screenshots/api.png) | ![Gallery](docs/screenshots/gallery.png) |
+| Upload | Gallery |
+| :----: | :-----: |
+| ![Upload](docs/screenshots/upload.png) | ![Gallery](docs/screenshots/gallery.png) |
+
+| API | Tag management |
+| :-: | :------------: |
+| ![API](docs/screenshots/api.png) | ![Tags](docs/screenshots/tags.png) |
 
 | Storage | Settings |
 | :-----: | :-------: |
@@ -43,12 +47,17 @@
 | :--------------: | :-----------------: |
 | ![Setup](docs/screenshots/setup.png) | ![Setup restore](docs/screenshots/setup-restore.png) |
 
+| Activity log |
+| :----------: |
+| ![Activity log](docs/screenshots/logs.png) |
+
 ## Features
 
 - **Drag, click, or Ctrl+V paste** — server-side WebP, Referer hotlink protection
 - **Multi-user** — login with slider, Turnstile, or Cap verification; optional registration; users see only their images
 - **Multi-backend storage** — local disk + S3-compatible (R2 / COS / OSS / AWS); hybrid `proxy` / `public` URLs
-- **Gallery** — browse, search, filter by storage/source, grid/list views, batch delete; stats overview and source breakdown; image detail modal with link formats
+- **Gallery** — browse, search, filter by storage/source/tags, grid/list views, batch delete and batch tagging; stats overview and source breakdown; image detail modal with link formats
+- **Tags** — per-user colored tags; tag on upload (single or batch); manage in Settings (create, recolor, merge, delete); API supports `tagIds` and batch tagging
 - **Backup & migration** — full-site export/restore (`.phost.tar.gz`), cross-backend sync; restore from backup on uninitialized `/setup`
 - **API & Twikoo** — global / per-user tokens; `POST /api/index.php` compatible
 - **Zero-config Docker** — first-run web wizard, no secrets upfront
diff --git a/README.md b/README.md
index 7e467f2..8bdecb6 100644
--- a/README.md
+++ b/README.md
@@ -31,9 +31,13 @@
 
 **main** 分支暂无公网演示；**cloudflare** 分支在线体验：[pic.roven.cc](https://pic.roven.cc)
 
-| API | 图库（详情） |
+| 上传 | 图库 |
 | :--: | :--: |
-| ![API](docs/screenshots/api.png) | ![图库](docs/screenshots/gallery.png) |
+| ![上传](docs/screenshots/upload.png) | ![图库](docs/screenshots/gallery.png) |
+
+| API | 标签管理 |
+| :--: | :------: |
+| ![API](docs/screenshots/api.png) | ![标签管理](docs/screenshots/tags.png) |
 
 | 存储 | 设置 |
 | :--: | :--: |
@@ -43,12 +47,17 @@
 | :--: | :--: |
 | ![首次设置](docs/screenshots/setup.png) | ![从备份恢复](docs/screenshots/setup-restore.png) |
 
+| 操作日志 |
+| :------: |
+| ![操作日志](docs/screenshots/logs.png) |
+
 ## 特性
 
 - **拖拽 / 点击 / Ctrl+V 粘贴**上传；服务端 WebP 压缩、Referer 防盗链
 - **多用户**：账号密码登录（滑块 / Turnstile / Cap 人机验证）、可选开放注册；普通用户仅见自己的图片
 - **多后端存储**：本地磁盘 + S3 兼容（R2 / COS / OSS / AWS）；混合直链 `proxy` / `public`
-- **图库**：浏览、搜索、按存储/来源筛选、网格/列表切换、批量删除；统计概览与来源分布；点击图片查看详情与多格式链接
+- **图库**：浏览、搜索、按存储/来源/标签筛选、网格/列表切换、批量删除与批量打标；统计概览与来源分布；点击图片查看详情与多格式链接
+- **标签**：每用户独立标签、彩色标记；上传后单张/批量打标；设置页管理（新建、改色、合并、删除）；API 支持 `tagIds` 与批量打标
 - **备份与迁移**：整站导出/恢复（`.phost.tar.gz`）、跨后端同步；setup 未初始化时可从备份恢复
 - **API 与 Twikoo**：全局 / 个人 Token；`POST /api/index.php` 兼容
 - **Docker 零配置**：首次访问 Web 引导创建管理员
diff --git a/app/components/BatchTagModal.vue b/app/components/BatchTagModal.vue
new file mode 100644
index 0000000..09f3791
--- /dev/null
+++ b/app/components/BatchTagModal.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { ImageTag } from '~/types/image'
+
+const props = defineProps<{
+  open: boolean
+  tags: ImageTag[]
+  selectedCount: number
+  mode?: 'add' | 'remove'
+  /** 仅添加标签，隐藏添加/移除切换（首页批量打标） */
+  addOnly?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'confirm': [tagIds: number[], action: 'add' | 'remove']
+}>()
+
+const { t } = useI18n()
+const action = ref<'add' | 'remove'>(props.mode ?? 'add')
+const selectedTagIds = ref<number[]>([])
+const { loadRecentIds } = useRecentTags()
+
+watch(() => props.open, (open) => {
+  if (open) {
+    action.value = props.mode ?? 'add'
+    selectedTagIds.value = []
+    loadRecentIds()
+  }
+})
+
+function submit() {
+  if (!selectedTagIds.value.length) return
+  emit('confirm', selectedTagIds.value, action.value)
+}
+</script>
+
+<template>
+  <UModal
+    :open="open"
+    :title="addOnly ? t('tags.batchAddTitle') : t('tags.batchTitle')"
+    :description="addOnly
+      ? t('tags.batchAddSubtitle', { n: selectedCount })
+      : t('tags.batchSubtitle', { n: selectedCount })"
+    :ui="{ content: 'max-w-md' }"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #body>
+      <div class="space-y-4">
+        <div
+          v-if="!addOnly"
+          class="flex gap-1 rounded-lg border border-default p-0.5"
+        >
+          <UButton
+            type="button"
+            size="xs"
+            class="flex-1 justify-center"
+            :variant="action === 'add' ? 'solid' : 'ghost'"
+            :color="action === 'add' ? 'primary' : 'neutral'"
+            :label="t('tags.batchAdd')"
+            @click="() => { action = 'add' }"
+          />
+          <UButton
+            type="button"
+            size="xs"
+            class="flex-1 justify-center"
+            :variant="action === 'remove' ? 'solid' : 'ghost'"
+            :color="action === 'remove' ? 'primary' : 'neutral'"
+            :label="t('tags.batchRemove')"
+            @click="() => { action = 'remove' }"
+          />
+        </div>
+
+        <TagAssignPanel
+          v-model="selectedTagIds"
+          :tags="tags"
+          :allow-create="action === 'add'"
+        />
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex w-full flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <p
+          v-if="addOnly"
+          class="flex items-center gap-1.5 text-xs text-muted"
+        >
+          <UIcon
+            name="i-lucide-info"
+            class="size-3.5 shrink-0"
+          />
+          {{ t('tags.classifyHint') }}
+        </p>
+        <div class="flex flex-1 justify-end gap-2">
+          <UButton
+            variant="outline"
+            color="neutral"
+            @click="emit('update:open', false)"
+          >
+            {{ t('common.cancel') }}
+          </UButton>
+          <UButton
+            color="primary"
+            :disabled="!selectedTagIds.length"
+            @click="submit"
+          >
+            {{ t('common.save') }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
diff --git a/app/components/ImageCard.vue b/app/components/ImageCard.vue
index 6bd8054..fcc0429 100644
--- a/app/components/ImageCard.vue
+++ b/app/components/ImageCard.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ImageItem } from '~/types/image'
 import type { CopyFormat } from '~/composables/useUploadPreferences'
+import { buildImageBbcode } from '~/utils/image-display'
 
 const props = withDefaults(defineProps<{
   image: ImageItem
@@ -11,19 +12,26 @@ const props = withDefaults(defineProps<{
   compact?: boolean
   gallery?: boolean
   allowDelete?: boolean
+  showTags?: boolean
+  showTagAction?: boolean
 }>(), {
   selectable: true,
   showKey: true,
   showStorage: false,
   compact: false,
   gallery: false,
-  allowDelete: true
+  allowDelete: true,
+  showTags: false,
+  showTagAction: false
 })
 
 const emit = defineEmits<{
   'update:selected': [value: boolean]
   'preview': []
   'delete': []
+  'tag-click': [tagId: number]
+  'untagged-click': []
+  'edit-tags': []
 }>()
 
 const { formatFileSize } = useFileSize()
@@ -79,7 +87,8 @@ onUnmounted(clearRetryTimer)
 const copyFormatItems = 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(() => {
@@ -96,6 +105,8 @@ const previewValue = computed(() => {
       return props.image.markdown
     case 'html':
       return props.image.html
+    case 'bbcode':
+      return buildImageBbcode(props.image.url)
     default:
       return props.image.url
   }
@@ -107,6 +118,8 @@ const copySuccessTitle = computed(() => {
       return t('copy.copiedMarkdown')
     case 'html':
       return t('copy.copiedHtml')
+    case 'bbcode':
+      return t('copy.copiedBbcode')
     default:
       return t('copy.copiedUrl')
   }
@@ -127,6 +140,34 @@ const uploadSourceLabel = computed(() => {
   }
 })
 
+const uploadSourceIcon = computed(() => {
+  switch (props.image.uploadSource) {
+    case 'web':
+      return 'i-lucide-globe'
+    case 'api':
+      return 'i-lucide-code-xml'
+    default:
+      return null
+  }
+})
+
+const GALLERY_INLINE_TAG_LIMIT = 3
+
+const galleryTagDisplay = computed(() => {
+  const tags = props.image.tags ?? []
+  if (tags.length <= GALLERY_INLINE_TAG_LIMIT) {
+    return { visible: tags, hidden: [] as typeof tags }
+  }
+  return {
+    visible: tags.slice(0, GALLERY_INLINE_TAG_LIMIT),
+    hidden: tags.slice(GALLERY_INLINE_TAG_LIMIT)
+  }
+})
+const sessionVisibleTags = computed(() => props.image.tags ?? [])
+const sessionTagActionLabel = computed(() =>
+  props.image.tags?.length ? t('tags.addTag') : t('tags.untagged')
+)
+
 function toggleSelected(value: boolean | 'indeterminate') {
   emit('update:selected', value === true)
 }
@@ -210,16 +251,61 @@ async function copyGalleryUrl() {
       <p class="truncate text-xs text-muted">
         {{ uploadedLabel }} · {{ formatFileSize(image.size) }}
       </p>
+
+      <div
+        v-if="showTags"
+        class="flex flex-wrap items-center gap-1.5"
+      >
+        <template v-if="image.tags?.length">
+          <TagBadge
+            v-for="tag in galleryTagDisplay.visible"
+            :key="tag.id"
+            :tag="tag"
+            clickable
+            @click="emit('tag-click', tag.id)"
+          />
+          <UPopover
+            v-if="galleryTagDisplay.hidden.length"
+            :content="{ side: 'bottom', align: 'start' }"
+          >
+            <button
+              type="button"
+              class="inline-flex rounded-md border border-default px-2 py-0.5 text-xs text-muted transition-colors hover:border-primary/40 hover:text-primary"
+              :aria-label="t('tags.moreTags', { n: galleryTagDisplay.hidden.length })"
+              @click.stop
+            >
+              +{{ galleryTagDisplay.hidden.length }}
+            </button>
+            <template #content>
+              <div
+                class="flex max-w-56 flex-wrap gap-1.5 p-2"
+                @click.stop
+              >
+                <TagBadge
+                  v-for="tag in galleryTagDisplay.hidden"
+                  :key="tag.id"
+                  :tag="tag"
+                  clickable
+                  @click="emit('tag-click', tag.id)"
+                />
+              </div>
+            </template>
+          </UPopover>
+        </template>
+        <button
+          v-else
+          type="button"
+          class="inline-flex rounded-md border border-dashed border-default px-2 py-0.5 text-xs text-muted transition-colors hover:border-primary/40 hover:text-primary"
+          @click.stop="emit('untagged-click')"
+        >
+          {{ t('tags.unlabeled') }}
+        </button>
+      </div>
+
       <div
         v-if="uploadSourceLabel || (showStorage && image.storage)"
-        class="flex flex-wrap gap-1.5"
+        class="flex flex-wrap items-center gap-1.5"
       >
-        <span
-          v-if="uploadSourceLabel"
-          class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
-        >
-          {{ uploadSourceLabel }}
-        </span>
         <span
           v-if="showStorage && image.storage"
           class="inline-flex max-w-full items-center gap-1 rounded-md border border-default px-2 py-0.5 text-xs text-muted"
@@ -231,6 +317,16 @@ async function copyGalleryUrl() {
           />
           <span class="truncate">{{ image.storage.name }}</span>
         </span>
+        <span
+          v-if="uploadSourceLabel && uploadSourceIcon"
+          class="inline-flex max-w-full items-center gap-1 rounded-md border border-default px-2 py-0.5 text-xs text-muted"
+        >
+          <UIcon
+            :name="uploadSourceIcon"
+            class="size-3 shrink-0"
+          />
+          <span class="truncate">{{ uploadSourceLabel }}</span>
+        </span>
       </div>
     </div>
 
@@ -302,6 +398,21 @@ async function copyGalleryUrl() {
           @update:model-value="toggleSelected"
         />
       </div>
+      <div
+        v-if="allowDelete && showTagAction"
+        class="absolute top-2 right-2"
+        @click.stop
+      >
+        <UButton
+          icon="i-lucide-trash-2"
+          variant="solid"
+          color="neutral"
+          size="xs"
+          class="bg-black/55 text-white hover:bg-black/70"
+          :aria-label="t('common.delete')"
+          @click="emit('delete')"
+        />
+      </div>
       <div
         v-if="image.owner"
         class="absolute bottom-2 left-2 max-w-[calc(50%-0.5rem)]"
@@ -371,6 +482,20 @@ async function copyGalleryUrl() {
       >
         {{ image.originalName }}
       </p>
+
+      <button
+        v-if="showTagAction && image.tags?.length"
+        type="button"
+        class="flex flex-wrap items-center gap-1.5 text-left"
+        @click.stop="emit('edit-tags')"
+      >
+        <TagBadge
+          v-for="tag in sessionVisibleTags"
+          :key="tag.id"
+          :tag="tag"
+        />
+      </button>
+
       <p class="text-xs text-muted">
         {{ uploadedLabel }} · {{ formatFileSize(image.size) }}
       </p>
@@ -396,13 +521,28 @@ async function copyGalleryUrl() {
           class="min-w-0 flex-1 font-mono text-xs"
         />
         <CopyButton
-          icon="i-lucide-copy"
           :label="t('common.copy')"
+          :variant="showTagAction ? 'solid' : 'soft'"
+          :color="showTagAction ? 'primary' : undefined"
+          :icon="showTagAction ? undefined : 'i-lucide-copy'"
           :value="previewValue"
           :success-title="copySuccessTitle"
         />
       </div>
 
+      <button
+        v-if="showTagAction"
+        type="button"
+        class="inline-flex items-center gap-1 self-start text-xs text-muted transition-colors hover:text-primary"
+        @click.stop="emit('edit-tags')"
+      >
+        <UIcon
+          name="i-lucide-plus"
+          class="size-3"
+        />
+        {{ sessionTagActionLabel }}
+      </button>
+
       <p
         v-if="showKey"
         class="truncate text-xs text-dimmed"
diff --git a/app/components/ImageGrid.vue b/app/components/ImageGrid.vue
index 83f9792..d43ec1d 100644
--- a/app/components/ImageGrid.vue
+++ b/app/components/ImageGrid.vue
@@ -13,6 +13,8 @@ const props = withDefaults(defineProps<{
   /** 图库：5 列 × 2 行，缩略图略扁 */
   gallery?: boolean
   allowDelete?: boolean
+  showTags?: boolean
+  showTagAction?: boolean
 }>(), {
   selectable: true,
   showKey: true,
@@ -20,7 +22,9 @@ const props = withDefaults(defineProps<{
   dense: false,
   compact: false,
   gallery: false,
-  allowDelete: true
+  allowDelete: true,
+  showTags: false,
+  showTagAction: false
 })
 
 const gridClass = computed(() => {
@@ -37,6 +41,9 @@ const emit = defineEmits<{
   'update:selectedKeys': [value: Set<string>]
   'preview': [image: ImageItem]
   'delete': [image: ImageItem]
+  'tag-click': [tagId: number]
+  'untagged-click': []
+  'edit-tags': [image: ImageItem]
 }>()
 
 const { t } = useI18n()
@@ -68,9 +75,14 @@ function updateSelection(key: string, selected: boolean) {
       :compact="compact"
       :gallery="gallery"
       :allow-delete="allowDelete"
+      :show-tags="showTags"
+      :show-tag-action="showTagAction"
       @update:selected="updateSelection(image.key, $event)"
       @preview="emit('preview', image)"
       @delete="emit('delete', image)"
+      @tag-click="emit('tag-click', $event)"
+      @untagged-click="emit('untagged-click')"
+      @edit-tags="emit('edit-tags', image)"
     />
   </div>
   <div
diff --git a/app/components/ImagePreviewModal.vue b/app/components/ImagePreviewModal.vue
index 1e54778..ef6ffac 100644
--- a/app/components/ImagePreviewModal.vue
+++ b/app/components/ImagePreviewModal.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import type { ImageItem } from '~/types/image'
 import type { CopyFormat } from '~/composables/useUploadPreferences'
-import { formatImageDimensions } from '~/utils/image-display'
-
-type EmbedFormat = CopyFormat | 'bbcode'
+import { buildImageBbcode, formatImageDimensions } from '~/utils/image-display'
 
 const props = withDefaults(defineProps<{
   open: boolean
   image: ImageItem | null
   showStorage?: boolean
+  showTags?: boolean
   deleting?: boolean
   allowDelete?: boolean
 }>(), {
   showStorage: false,
+  showTags: false,
   allowDelete: true
 })
 
@@ -22,6 +22,7 @@ const emit = defineEmits<{
 }>()
 
 const toast = useToast()
+
 const { formatFileSize } = useFileSize()
 const { t, locale } = useI18n()
 const { copyFormat } = useUploadPreferences()
@@ -30,7 +31,7 @@ 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 embedFormat = ref<CopyFormat>('url')
 
 const embedFormatItems = computed(() => [
   { label: t('copy.url'), value: 'url' as const },
@@ -65,7 +66,7 @@ const sizeLabel = computed(() => {
 
 const bbcodeValue = computed(() => {
   if (!props.image) return ''
-  return `[img]${props.image.url}[/img]`
+  return buildImageBbcode(props.image.url)
 })
 
 const previewValue = computed(() => {
@@ -110,6 +111,17 @@ const uploadSourceTag = computed(() => {
   }
 })
 
+const uploadSourceIcon = computed(() => {
+  switch (props.image?.uploadSource) {
+    case 'web':
+      return 'i-lucide-globe'
+    case 'api':
+      return 'i-lucide-code-xml'
+    default:
+      return null
+  }
+})
+
 const dimensionsLabel = computed(() => {
   const formatted = formatImageDimensions(naturalWidth.value, naturalHeight.value)
   if (formatted) return formatted
@@ -128,11 +140,9 @@ watch(() => props.open, (open) => {
   }
 })
 
-function selectEmbedFormat(value: EmbedFormat) {
+function selectEmbedFormat(value: CopyFormat) {
   embedFormat.value = value
-  if (value !== 'bbcode') {
-    copyFormat.value = value
-  }
+  copyFormat.value = value
 }
 
 async function copyText(text: string, successTitle: string) {
@@ -288,6 +298,32 @@ function onImageLoad(event: Event) {
                 </span>
               </dd>
             </div>
+            <div
+              v-if="showTags"
+              class="flex gap-4 py-2.5"
+            >
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('tags.column') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                <div
+                  v-if="image.tags?.length"
+                  class="flex flex-wrap gap-1.5"
+                >
+                  <TagBadge
+                    v-for="tag in image.tags"
+                    :key="tag.id"
+                    :tag="tag"
+                  />
+                </div>
+                <span
+                  v-else
+                  class="inline-flex rounded-md border border-dashed border-default px-2 py-0.5 text-xs text-muted"
+                >
+                  {{ t('tags.unlabeled') }}
+                </span>
+              </dd>
+            </div>
             <div
               v-if="uploadSourceTag"
               class="flex gap-4 py-2.5"
@@ -296,7 +332,14 @@ function onImageLoad(event: Event) {
                 {{ 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">
+                <span
+                  v-if="uploadSourceIcon"
+                  class="inline-flex items-center gap-1 rounded-md border border-default px-2 py-0.5 text-xs text-muted"
+                >
+                  <UIcon
+                    :name="uploadSourceIcon"
+                    class="size-3 shrink-0"
+                  />
                   {{ uploadSourceTag }}
                 </span>
               </dd>
diff --git a/app/components/ImageTagModal.vue b/app/components/ImageTagModal.vue
new file mode 100644
index 0000000..181c65d
--- /dev/null
+++ b/app/components/ImageTagModal.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { ImageItem, ImageTag } from '~/types/image'
+
+const props = defineProps<{
+  open: boolean
+  image: ImageItem | null
+  tags: ImageTag[]
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'saved': [tags: ImageTag[]]
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const { setImageTags, fetchTags } = useTags()
+const { recordRecent, loadRecentIds } = useRecentTags()
+
+const selectedTagIds = ref<number[]>([])
+const saving = ref(false)
+
+watch(() => props.open, (open) => {
+  if (open) {
+    selectedTagIds.value = props.image?.tags?.map(tag => tag.id) ?? []
+    loadRecentIds()
+    void fetchTags(true)
+  }
+})
+
+async function save() {
+  if (!props.image || saving.value) return
+
+  saving.value = true
+  try {
+    const tags = await setImageTags(props.image.key, selectedTagIds.value)
+    recordRecent(selectedTagIds.value)
+    emit('saved', tags)
+    emit('update:open', false)
+    toast.add({ title: t('tags.saved'), color: 'success' })
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : t('tags.saveFailed')
+    toast.add({ title: message, color: 'error' })
+  } finally {
+    saving.value = false
+  }
+}
+
+function onTagCreated(tag: ImageTag) {
+  if (!selectedTagIds.value.includes(tag.id)) {
+    selectedTagIds.value = [...selectedTagIds.value, tag.id]
+  }
+}
+</script>
+
+<template>
+  <UModal
+    :open="open"
+    :title="t('tags.manageImageTitle')"
+    :description="image?.originalName"
+    :ui="{ content: 'max-w-md' }"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #body>
+      <TagAssignPanel
+        v-model="selectedTagIds"
+        :tags="tags"
+        :disabled="saving"
+        @created="onTagCreated"
+      />
+    </template>
+
+    <template #footer>
+      <div class="flex w-full flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <p class="flex items-center gap-1.5 text-xs text-muted">
+          <UIcon
+            name="i-lucide-info"
+            class="size-3.5 shrink-0"
+          />
+          {{ t('tags.classifyHint') }}
+        </p>
+        <div class="flex justify-end gap-2">
+          <UButton
+            variant="outline"
+            color="neutral"
+            :disabled="saving"
+            @click="emit('update:open', false)"
+          >
+            {{ t('common.cancel') }}
+          </UButton>
+          <UButton
+            color="primary"
+            :loading="saving"
+            @click="save"
+          >
+            {{ t('common.save') }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>
diff --git a/app/components/TagAssignPanel.vue b/app/components/TagAssignPanel.vue
new file mode 100644
index 0000000..c997972
--- /dev/null
+++ b/app/components/TagAssignPanel.vue
@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import type { ImageTag } from '~/types/image'
+import { pickRandomUnusedTagColor, tagPillStyle } from '~/utils/tag-colors'
+
+const props = withDefaults(defineProps<{
+  modelValue: number[]
+  tags: ImageTag[]
+  disabled?: boolean
+  allowCreate?: boolean
+}>(), {
+  disabled: false,
+  allowCreate: true
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number[]]
+  'created': [tag: ImageTag]
+}>()
+
+const COMMON_LIMIT = 12
+const { t } = useI18n()
+const toast = useToast()
+const { createTag } = useTags()
+const { recentIds, loadRecentIds } = useRecentTags()
+
+const query = ref('')
+const creating = ref(false)
+
+onMounted(() => {
+  loadRecentIds()
+})
+
+const isSearching = computed(() => query.value.trim().length > 0)
+
+const selectedTags = computed(() =>
+  props.tags.filter(tag => props.modelValue.includes(tag.id))
+)
+
+const commonTags = computed(() =>
+  [...props.tags]
+    .sort((a, b) => (b.imageCount ?? 0) - (a.imageCount ?? 0))
+    .slice(0, COMMON_LIMIT)
+)
+
+const recentTags = computed(() =>
+  recentIds.value
+    .map(id => props.tags.find(tag => tag.id === id))
+    .filter((tag): tag is ImageTag => Boolean(tag))
+)
+
+const existingTags = computed(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) return props.tags
+  return props.tags.filter(tag => tag.name.toLowerCase().includes(q))
+})
+
+const showCreateOption = computed(() => {
+  if (!props.allowCreate) return false
+  const q = query.value.trim()
+  if (!q) return false
+  return !props.tags.some(tag => tag.name === q)
+})
+
+const allExistingSelected = computed(() =>
+  existingTags.value.length > 0
+  && existingTags.value.every(tag => props.modelValue.includes(tag.id))
+)
+
+function isSelected(tagId: number) {
+  return props.modelValue.includes(tagId)
+}
+
+function toggleTag(tagId: number) {
+  if (props.disabled) return
+  const next = new Set(props.modelValue)
+  if (next.has(tagId)) next.delete(tagId)
+  else next.add(tagId)
+  emit('update:modelValue', [...next])
+}
+
+function removeTag(tagId: number) {
+  if (props.disabled) return
+  emit('update:modelValue', props.modelValue.filter(id => id !== tagId))
+}
+
+function clearSelected() {
+  if (props.disabled) return
+  emit('update:modelValue', [])
+}
+
+function toggleSelectAllExisting() {
+  if (props.disabled) return
+  const visibleIds = existingTags.value.map(tag => tag.id)
+  if (allExistingSelected.value) {
+    emit('update:modelValue', props.modelValue.filter(id => !visibleIds.includes(id)))
+    return
+  }
+  emit('update:modelValue', [...new Set([...props.modelValue, ...visibleIds])])
+}
+
+async function createFromQuery() {
+  const name = query.value.trim()
+  if (!name || creating.value) return
+
+  creating.value = true
+  try {
+    const color = pickRandomUnusedTagColor(props.tags.map(tag => tag.color))
+    const tag = await createTag(name, color)
+    emit('created', tag)
+    emit('update:modelValue', [...new Set([...props.modelValue, tag.id])])
+    query.value = ''
+    toast.add({ title: t('tags.created', { name: tag.name }), color: 'success' })
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : t('tags.createFailed')
+    toast.add({ title: message, color: 'error' })
+  } finally {
+    creating.value = false
+  }
+}
+
+defineExpose({ reloadRecent: loadRecentIds })
+</script>
+
+<template>
+  <div class="space-y-4">
+    <UInput
+      v-model="query"
+      size="md"
+      icon="i-lucide-search"
+      :placeholder="t('tags.searchOrCreate')"
+      :disabled="disabled"
+      @keydown.enter.prevent="showCreateOption ? createFromQuery() : undefined"
+    />
+
+    <button
+      v-if="showCreateOption"
+      type="button"
+      class="flex w-full items-center gap-1.5 rounded-lg px-1 py-1 text-left text-sm text-primary hover:bg-primary/5"
+      :disabled="disabled || creating"
+      @click="createFromQuery"
+    >
+      <UIcon
+        name="i-lucide-plus"
+        class="size-4 shrink-0"
+      />
+      {{ t('tags.createNamed', { name: query.trim() }) }}
+    </button>
+
+    <div
+      v-if="isSearching && existingTags.length"
+      class="space-y-2"
+    >
+      <div class="flex items-center justify-between gap-2">
+        <p class="text-sm font-medium text-highlighted">
+          {{ t('tags.existingLabel', { n: existingTags.length }) }}
+        </p>
+        <button
+          type="button"
+          class="text-xs text-muted transition-colors hover:text-highlighted"
+          :disabled="disabled"
+          @click="toggleSelectAllExisting"
+        >
+          {{ allExistingSelected ? t('tags.deselectAll') : t('tags.selectAll') }}
+        </button>
+      </div>
+
+      <div class="grid grid-cols-3 gap-2">
+        <button
+          v-for="tag in existingTags"
+          :key="`existing-${tag.id}`"
+          type="button"
+          class="inline-flex min-w-0 items-center justify-center gap-1 rounded-full border px-2.5 py-1.5 text-xs font-medium transition-opacity hover:opacity-90"
+          :style="tagPillStyle(tag.color, isSelected(tag.id))"
+          :disabled="disabled"
+          @click="toggleTag(tag.id)"
+        >
+          <UIcon
+            v-if="isSelected(tag.id)"
+            name="i-lucide-check"
+            class="size-3 shrink-0"
+          />
+          <span class="truncate">{{ tag.name }}</span>
+          <UIcon
+            v-if="isSelected(tag.id)"
+            name="i-lucide-x"
+            class="size-3 shrink-0 opacity-80"
+          />
+        </button>
+      </div>
+    </div>
+
+    <template v-else>
+      <div
+        v-if="selectedTags.length"
+        class="space-y-2"
+      >
+        <div class="flex items-center justify-between gap-2">
+          <p class="text-sm font-medium text-highlighted">
+            {{ t('tags.selectedLabel', { n: selectedTags.length }) }}
+          </p>
+          <button
+            type="button"
+            class="text-xs text-muted transition-colors hover:text-highlighted"
+            :disabled="disabled"
+            @click="clearSelected"
+          >
+            {{ t('tags.clearSelected') }}
+          </button>
+        </div>
+
+        <div class="flex flex-wrap gap-2">
+          <button
+            v-for="tag in selectedTags"
+            :key="tag.id"
+            type="button"
+            class="inline-flex max-w-full items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-opacity hover:opacity-90"
+            :style="tagPillStyle(tag.color, true)"
+            :disabled="disabled"
+            @click="removeTag(tag.id)"
+          >
+            <UIcon
+              name="i-lucide-check"
+              class="size-3 shrink-0"
+            />
+            <span class="truncate">{{ tag.name }}</span>
+            <UIcon
+              name="i-lucide-x"
+              class="size-3 shrink-0 opacity-80"
+            />
+          </button>
+        </div>
+      </div>
+
+      <div
+        v-if="commonTags.length"
+        class="space-y-2"
+      >
+        <p class="text-sm font-medium text-highlighted">
+          {{ t('tags.commonTags') }}
+        </p>
+        <div class="flex flex-wrap gap-2">
+          <button
+            v-for="tag in commonTags"
+            :key="tag.id"
+            type="button"
+            class="inline-flex max-w-full items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-opacity hover:opacity-90"
+            :style="tagPillStyle(tag.color, isSelected(tag.id))"
+            :disabled="disabled"
+            @click="toggleTag(tag.id)"
+          >
+            <UIcon
+              v-if="isSelected(tag.id)"
+              name="i-lucide-check"
+              class="size-3 shrink-0"
+            />
+            <span class="truncate">{{ tag.name }}</span>
+          </button>
+        </div>
+      </div>
+
+      <div
+        v-if="recentTags.length"
+        class="space-y-2"
+      >
+        <p class="text-sm font-medium text-highlighted">
+          {{ t('tags.recentTags') }}
+        </p>
+        <div class="flex flex-wrap gap-2">
+          <button
+            v-for="tag in recentTags"
+            :key="`recent-${tag.id}`"
+            type="button"
+            class="inline-flex max-w-full items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-opacity hover:opacity-90"
+            :style="tagPillStyle(tag.color, isSelected(tag.id))"
+            :disabled="disabled"
+            @click="toggleTag(tag.id)"
+          >
+            <UIcon
+              v-if="isSelected(tag.id)"
+              name="i-lucide-check"
+              class="size-3 shrink-0"
+            />
+            <span class="truncate">{{ tag.name }}</span>
+          </button>
+        </div>
+      </div>
+    </template>
+
+    <p
+      v-if="!tags.length && !showCreateOption"
+      class="py-6 text-center text-sm text-muted"
+    >
+      {{ t('tags.emptyHint') }}
+    </p>
+  </div>
+</template>
diff --git a/app/components/TagBadge.vue b/app/components/TagBadge.vue
new file mode 100644
index 0000000..f93445f
--- /dev/null
+++ b/app/components/TagBadge.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { ImageTag } from '~/types/image'
+import { defaultTagColor, resolveTagHexColor, tagPillStyle } from '~/utils/tag-colors'
+
+const props = withDefaults(defineProps<{
+  tag: ImageTag
+  removable?: boolean
+  clickable?: boolean
+  size?: 'xs' | 'sm'
+}>(), {
+  removable: false,
+  clickable: false,
+  size: 'xs'
+})
+
+const emit = defineEmits<{
+  remove: []
+  click: []
+}>()
+
+const displayColor = computed(() =>
+  resolveTagHexColor(props.tag.color, defaultTagColor(props.tag.id))
+)
+
+const pillStyle = computed(() => tagPillStyle(displayColor.value))
+</script>
+
+<template>
+  <span
+    class="inline-flex max-w-full items-center gap-1 rounded-md border px-2 py-0.5 font-medium"
+    :class="[
+      size === 'sm' ? 'text-sm' : 'text-xs',
+      clickable ? 'cursor-pointer hover:opacity-90' : ''
+    ]"
+    :style="pillStyle"
+    :role="clickable ? 'button' : undefined"
+    :tabindex="clickable ? 0 : undefined"
+    @click="clickable ? emit('click') : undefined"
+    @keydown.enter.prevent="clickable ? emit('click') : undefined"
+    @keydown.space.prevent="clickable ? emit('click') : undefined"
+  >
+    <span
+      class="size-1.5 shrink-0 rounded-full"
+      :style="{ backgroundColor: displayColor }"
+      aria-hidden="true"
+    />
+    <span class="truncate">{{ tag.name }}</span>
+    <button
+      v-if="removable"
+      type="button"
+      class="inline-flex shrink-0 rounded p-0.5 opacity-70 hover:opacity-100"
+      :aria-label="`Remove ${tag.name}`"
+      @click.stop="emit('remove')"
+    >
+      <UIcon
+        name="i-lucide-x"
+        class="size-3"
+      />
+    </button>
+  </span>
+</template>
diff --git a/app/components/TagColorPicker.vue b/app/components/TagColorPicker.vue
new file mode 100644
index 0000000..c0e6518
--- /dev/null
+++ b/app/components/TagColorPicker.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { TAG_COLOR_PRESETS, visibleTagColorPresets } from '~/utils/tag-colors'
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  /** 已被其他标签占用的预设色，选择器中优先展示未占用颜色 */
+  usedColors?: (string | null | undefined)[]
+  /** 固定展示的备选色（新增 8 个 / 编辑 3 个） */
+  candidates?: string[]
+  /** 紧凑模式：不显示标题 */
+  compact?: boolean
+}>(), {
+  compact: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const { t } = useI18n()
+
+const colorInput = ref<HTMLInputElement | null>(null)
+
+const normalizedValue = computed(() => normalizeHex(props.modelValue))
+
+const presetColors = computed(() => {
+  if (props.candidates?.length) {
+    const seen = new Set<string>()
+    const items: string[] = []
+    for (const color of props.candidates) {
+      const lower = color.toLowerCase()
+      if (!seen.has(lower)) {
+        seen.add(lower)
+        items.push(lower)
+      }
+    }
+    return items
+  }
+  if (!props.usedColors?.length) return TAG_COLOR_PRESETS
+  return visibleTagColorPresets(props.usedColors, props.modelValue)
+})
+
+const isPreset = computed(() =>
+  TAG_COLOR_PRESETS.some(color => color.toLowerCase() === normalizedValue.value.toLowerCase())
+)
+
+const isCustomSelected = computed(() => {
+  if (props.candidates?.length) {
+    return !presetColors.value.includes(normalizedValue.value)
+  }
+  return !isPreset.value
+})
+
+function normalizeHex(value: string) {
+  const trimmed = value.trim()
+  if (/^#[0-9A-Fa-f]{6}$/.test(trimmed)) return trimmed.toLowerCase()
+  return '#22c55e'
+}
+
+function selectColor(color: string) {
+  emit('update:modelValue', color.toLowerCase())
+}
+
+function onNativeColorInput(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+  if (value) emit('update:modelValue', value.toLowerCase())
+}
+
+function openNativePicker() {
+  colorInput.value?.click()
+}
+</script>
+
+<template>
+  <div :class="compact ? '' : 'space-y-2'">
+    <p
+      v-if="!compact"
+      class="text-xs font-medium text-muted"
+    >
+      {{ t('tags.pickColor') }}
+    </p>
+    <div class="flex flex-wrap items-center gap-2">
+      <button
+        v-for="color in presetColors"
+        :key="color"
+        type="button"
+        class="size-7 shrink-0 rounded-full border-2 transition-all hover:scale-110"
+        :class="normalizedValue === color
+          ? 'border-highlighted ring-2 ring-primary/25 scale-110'
+          : 'border-transparent'"
+        :style="{ backgroundColor: color }"
+        :aria-label="color"
+        :title="color"
+        @click="selectColor(color)"
+      />
+
+      <button
+        type="button"
+        class="relative size-7 shrink-0 overflow-hidden rounded-full border-2 transition-all hover:scale-110"
+        :class="isCustomSelected
+          ? 'border-highlighted ring-2 ring-primary/25 scale-110'
+          : 'border-dashed border-default'"
+        :style="isCustomSelected ? { backgroundColor: normalizedValue } : undefined"
+        :aria-label="t('tags.customColor')"
+        :title="t('tags.customColor')"
+        @click="openNativePicker"
+      >
+        <span
+          v-if="!isCustomSelected"
+          class="flex size-full items-center justify-center bg-muted/40"
+        >
+          <UIcon
+            name="i-lucide-pipette"
+            class="size-3.5 text-muted"
+          />
+        </span>
+        <input
+          ref="colorInput"
+          type="color"
+          class="pointer-events-none absolute inset-0 size-full opacity-0"
+          :value="normalizedValue"
+          @input="onNativeColorInput"
+        >
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/TagFilterSelect.vue b/app/components/TagFilterSelect.vue
new file mode 100644
index 0000000..24b7ca9
--- /dev/null
+++ b/app/components/TagFilterSelect.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import type { ImageTag } from '~/types/image'
+
+const props = withDefaults(defineProps<{
+  modelValue: number[]
+  tagMode: 'or' | 'and'
+  untaggedOnly: boolean
+  tags: ImageTag[]
+  disabled?: boolean
+}>(), {
+  disabled: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number[]]
+  'update:tagMode': [value: 'or' | 'and']
+  'update:untaggedOnly': [value: boolean]
+  'manage': []
+}>()
+
+const { t } = useI18n()
+
+const selectedTags = computed(() =>
+  props.tags.filter(tag => props.modelValue.includes(tag.id))
+)
+
+const buttonLabel = computed(() => {
+  if (props.untaggedOnly) return t('tags.untagged')
+  if (!selectedTags.value.length) return t('tags.filterAll')
+  if (selectedTags.value.length === 1) return selectedTags.value[0]!.name
+  return t('tags.filterSelected', { n: selectedTags.value.length })
+})
+
+const tagItems = computed(() =>
+  props.tags.map(tag => ({
+    label: tag.name,
+    value: tag.id
+  }))
+)
+
+const selectValue = computed({
+  get: () => (props.untaggedOnly ? [] : props.modelValue),
+  set: (value: number[]) => {
+    emit('update:untaggedOnly', false)
+    emit('update:modelValue', value)
+  }
+})
+
+function findTag(tagId: number) {
+  return props.tags.find(tag => tag.id === tagId)
+}
+
+function selectUntagged() {
+  emit('update:modelValue', [])
+  emit('update:untaggedOnly', true)
+}
+
+function clearFilter() {
+  emit('update:modelValue', [])
+  emit('update:untaggedOnly', false)
+}
+</script>
+
+<template>
+  <USelect
+    v-model="selectValue"
+    multiple
+    :items="tagItems"
+    class="w-28 shrink-0"
+    size="sm"
+    :disabled="disabled"
+    value-key="value"
+    :content="{ align: 'start', sideOffset: 4 }"
+    :ui="{
+      content: 'w-72 max-w-[calc(100vw-2rem)]',
+      viewport: 'max-h-44 overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden',
+      item: 'text-xs',
+      itemLabel: 'text-xs',
+      itemTrailingIcon: 'size-3.5 text-primary',
+      placeholder: 'truncate pointer-events-none text-highlighted',
+      value: 'truncate pointer-events-none text-highlighted'
+    }"
+  >
+    <template #default>
+      {{ buttonLabel }}
+    </template>
+
+    <template #content-top>
+      <div class="space-y-1.5 border-b border-default p-2 text-xs">
+        <div class="flex items-center justify-between gap-2 px-0.5">
+          <span class="font-medium text-highlighted">{{ t('tags.filterTitle') }}</span>
+          <button
+            type="button"
+            class="text-primary hover:underline"
+            @click="emit('manage')"
+          >
+            {{ t('tags.manage') }}
+          </button>
+        </div>
+
+        <div
+          v-if="modelValue.length > 1"
+          class="flex gap-1 rounded-md border border-default p-0.5"
+        >
+          <button
+            type="button"
+            class="flex-1 rounded px-2 py-1 text-center transition-colors"
+            :class="tagMode === 'or' ? 'bg-primary text-white' : 'text-muted hover:bg-elevated'"
+            @click="emit('update:tagMode', 'or')"
+          >
+            {{ t('tags.modeOr') }}
+          </button>
+          <button
+            type="button"
+            class="flex-1 rounded px-2 py-1 text-center transition-colors"
+            :class="tagMode === 'and' ? 'bg-primary text-white' : 'text-muted hover:bg-elevated'"
+            @click="emit('update:tagMode', 'and')"
+          >
+            {{ t('tags.modeAnd') }}
+          </button>
+        </div>
+
+        <div class="space-y-0.5">
+          <button
+            type="button"
+            class="flex w-full items-center rounded-md px-2 py-1 text-left hover:bg-elevated"
+            :class="!untaggedOnly && !modelValue.length ? 'bg-primary/10 text-primary' : ''"
+            @click="clearFilter"
+          >
+            {{ t('tags.filterAll') }}
+          </button>
+
+          <button
+            type="button"
+            class="flex w-full items-center rounded-md px-2 py-1 text-left hover:bg-elevated"
+            :class="untaggedOnly ? 'bg-primary/10 text-primary' : ''"
+            @click="selectUntagged"
+          >
+            {{ t('tags.untagged') }}
+          </button>
+        </div>
+      </div>
+    </template>
+
+    <template #item-leading="{ item }">
+      <span
+        class="size-2 shrink-0 rounded-full"
+        :style="{ backgroundColor: findTag(item.value)?.color }"
+      />
+    </template>
+
+    <template #item-trailing="{ item }">
+      <span class="text-[11px] tabular-nums text-muted">
+        {{ findTag(item.value)?.imageCount ?? 0 }}
+      </span>
+    </template>
+  </USelect>
+</template>
diff --git a/app/components/TagManageModal.vue b/app/components/TagManageModal.vue
new file mode 100644
index 0000000..f4fb6a7
--- /dev/null
+++ b/app/components/TagManageModal.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { ImageTag } from '~/types/image'
+
+const props = defineProps<{
+  open: boolean
+  tags: ImageTag[]
+}>()
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'changed': []
+}>()
+
+const { t } = useI18n()
+const { fetchTags } = useTags()
+
+watch(() => props.open, (open) => {
+  if (open) void fetchTags(true)
+})
+</script>
+
+<template>
+  <UModal
+    :open="open"
+    :title="t('tags.manageTitle')"
+    :description="t('tags.manageSubtitle')"
+    :ui="{ content: 'max-w-5xl' }"
+    @update:open="emit('update:open', $event)"
+  >
+    <template #body>
+      <TagManagePanel
+        :tags="tags"
+        @changed="emit('changed')"
+      />
+    </template>
+
+    <template #footer>
+      <div class="flex w-full justify-end">
+        <UButton
+          variant="ghost"
+          color="neutral"
+          @click="emit('update:open', false)"
+        >
+          {{ t('common.cancel') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>
diff --git a/app/components/TagManagePanel.vue b/app/components/TagManagePanel.vue
new file mode 100644
index 0000000..2480404
--- /dev/null
+++ b/app/components/TagManagePanel.vue
@@ -0,0 +1,843 @@
+<script setup lang="ts">
+import type { ImageTag } from '~/types/image'
+import {
+  defaultTagColor,
+  pickDefaultTagColorFromCandidates,
+  pickTagColorCandidates,
+  resolveTagHexColor,
+  TAG_COLOR_EDIT_CANDIDATE_COUNT
+} from '~/utils/tag-colors'
+
+const props = withDefaults(defineProps<{
+  tags: ImageTag[]
+  embedded?: boolean
+}>(), {
+  embedded: false
+})
+
+const emit = defineEmits<{
+  changed: []
+  close: []
+}>()
+
+const { t, locale } = useI18n()
+const toast = useToast()
+const { createTag, updateTag, deleteTag, mergeTags } = useTags()
+
+const creating = ref(false)
+const newName = ref('')
+const newColorCandidates = ref<string[]>(pickTagColorCandidates([]))
+const newColor = ref(pickDefaultTagColorFromCandidates(newColorCandidates.value, []))
+const search = ref('')
+const statusFilter = ref<'all' | 'used' | 'unused'>('all')
+const selectedIds = ref<Set<number>>(new Set())
+const renamingId = ref<number | null>(null)
+const renameValue = ref('')
+const colorPickerId = ref<number | null>(null)
+const colorValue = ref('#22c55e')
+const editColorCandidates = ref<string[]>([])
+const mergeOpen = ref(false)
+const mergeConfirmOpen = ref(false)
+const mergeMode = ref<'batch' | 'single'>('batch')
+const mergeSourceIds = ref<number[]>([])
+const mergeTargetId = ref<number | null>(null)
+const deleteOpen = ref(false)
+const deleteTarget = ref<ImageTag | null>(null)
+const saving = ref(false)
+const page = ref(1)
+const pageSize = ref(10)
+
+const stats = computed(() => {
+  const now = Date.now()
+  const sevenDaysAgo = now - 7 * 24 * 60 * 60 * 1000
+  let used = 0
+  let unused = 0
+  let newIn7Days = 0
+  for (const tag of props.tags) {
+    const count = tag.imageCount ?? 0
+    if (count > 0) used++
+    else unused++
+    if (tag.createdAt && new Date(tag.createdAt).getTime() >= sevenDaysAgo) {
+      newIn7Days++
+    }
+  }
+  return {
+    total: props.tags.length,
+    used,
+    unused,
+    newIn7Days
+  }
+})
+
+const filteredTags = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  return props.tags.filter((tag) => {
+    if (statusFilter.value === 'used' && (tag.imageCount ?? 0) === 0) return false
+    if (statusFilter.value === 'unused' && (tag.imageCount ?? 0) > 0) return false
+    if (q && !tag.name.toLowerCase().includes(q)) return false
+    return true
+  }).sort((a, b) => (b.imageCount ?? 0) - (a.imageCount ?? 0) || a.name.localeCompare(b.name))
+})
+
+const totalPages = computed(() => Math.max(1, Math.ceil(filteredTags.value.length / pageSize.value)))
+
+const paginatedTags = computed(() => {
+  const start = (page.value - 1) * pageSize.value
+  return filteredTags.value.slice(start, start + pageSize.value)
+})
+
+watch([search, statusFilter, pageSize], () => {
+  page.value = 1
+})
+
+watch(filteredTags, (list) => {
+  if (page.value > Math.max(1, Math.ceil(list.length / pageSize.value))) {
+    page.value = 1
+  }
+})
+
+const selectedList = computed(() =>
+  [...selectedIds.value]
+    .map(id => props.tags.find(tag => tag.id === id))
+    .filter(Boolean) as ImageTag[]
+)
+
+const selectedCount = computed(() => selectedIds.value.size)
+
+const allPageSelected = computed(() =>
+  paginatedTags.value.length > 0
+  && paginatedTags.value.every(tag => selectedIds.value.has(tag.id))
+)
+
+const mergeSourceTags = computed(() =>
+  mergeSourceIds.value
+    .map(id => props.tags.find(tag => tag.id === id))
+    .filter(Boolean) as ImageTag[]
+)
+
+const mergeTargetCandidates = computed(() => {
+  const sourceSet = new Set(mergeSourceIds.value)
+  return props.tags
+    .filter(tag => !sourceSet.has(tag.id))
+    .sort((a, b) => (b.imageCount ?? 0) - (a.imageCount ?? 0) || a.name.localeCompare(b.name))
+})
+
+const mergeTagsToDelete = computed(() => {
+  if (!mergeTargetId.value) return []
+  return mergeSourceTags.value.filter(tag => tag.id !== mergeTargetId.value)
+})
+
+const mergeKeepTag = computed(() =>
+  props.tags.find(tag => tag.id === mergeTargetId.value) ?? null
+)
+
+const statusItems = computed(() => [
+  { label: t('tags.filterStatusAll'), value: 'all' },
+  { label: t('tags.filterStatusUsed'), value: 'used' },
+  { label: t('tags.filterStatusUnused'), value: 'unused' }
+])
+
+const statValueClass = computed(() =>
+  'mt-2 text-2xl font-semibold tabular-nums text-highlighted'
+)
+
+const tableTextClass = computed(() => 'text-sm')
+
+function formatLastUsed(tag: ImageTag) {
+  if (!tag.lastUsedAt || (tag.imageCount ?? 0) === 0) {
+    return t('tags.neverUsed')
+  }
+  const date = new Date(tag.lastUsedAt)
+  if (Number.isNaN(date.getTime())) {
+    return t('tags.neverUsed')
+  }
+  return date.toLocaleString(locale.value, {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false
+  })
+}
+
+function toggleSelect(id: number) {
+  const next = new Set(selectedIds.value)
+  if (next.has(id)) next.delete(id)
+  else next.add(id)
+  selectedIds.value = next
+}
+
+function toggleSelectAll() {
+  const next = new Set(selectedIds.value)
+  if (allPageSelected.value) {
+    for (const tag of paginatedTags.value) next.delete(tag.id)
+  } else {
+    for (const tag of paginatedTags.value) next.add(tag.id)
+  }
+  selectedIds.value = next
+}
+
+function clearSelection() {
+  selectedIds.value = new Set()
+}
+
+function usedColorsExcept(tagId?: number) {
+  return props.tags
+    .filter(tag => tagId === undefined || tag.id !== tagId)
+    .map(tag => tag.color)
+}
+
+function refreshNewTagColor() {
+  const used = usedColorsExcept()
+  newColorCandidates.value = pickTagColorCandidates(used)
+  newColor.value = pickDefaultTagColorFromCandidates(newColorCandidates.value, used)
+}
+
+function toggleCreating() {
+  if (creating.value) {
+    creating.value = false
+    return
+  }
+  newName.value = ''
+  refreshNewTagColor()
+  creating.value = true
+}
+
+async function handleCreate() {
+  const name = newName.value.trim()
+  if (!name || saving.value) return
+  saving.value = true
+  try {
+    await createTag(name, newColor.value)
+    newName.value = ''
+    creating.value = false
+    refreshNewTagColor()
+    emit('changed')
+    toast.add({ title: t('tags.created', { name }), color: 'success' })
+  } catch {
+    toast.add({ title: t('tags.createFailed'), color: 'error' })
+  } finally {
+    saving.value = false
+  }
+}
+
+function startRename(tag: ImageTag) {
+  if (renamingId.value !== null && renamingId.value !== tag.id) {
+    cancelRename()
+  }
+  renamingId.value = tag.id
+  renameValue.value = tag.name
+}
+
+function cancelRename() {
+  renamingId.value = null
+  renameValue.value = ''
+}
+
+function onRenameBlur(tagId: number) {
+  window.setTimeout(() => {
+    if (renamingId.value === tagId) {
+      void finishRename(tagId)
+    }
+  }, 0)
+}
+
+async function finishRename(tagId: number) {
+  if (renamingId.value !== tagId) return
+
+  const name = renameValue.value.trim()
+  const tag = props.tags.find(item => item.id === tagId)
+  renamingId.value = null
+  renameValue.value = ''
+
+  if (!name || !tag || tag.name === name) return
+
+  saving.value = true
+  try {
+    await updateTag(tagId, { name })
+    emit('changed')
+    toast.add({ title: t('tags.renamed'), color: 'success' })
+  } catch {
+    toast.add({ title: t('tags.renameFailed'), color: 'error' })
+  } finally {
+    saving.value = false
+  }
+}
+
+function openColorPicker(tag: ImageTag) {
+  colorPickerId.value = tag.id
+  colorValue.value = resolveTagHexColor(tag.color, defaultTagColor(tag.id))
+  editColorCandidates.value = pickTagColorCandidates(
+    usedColorsExcept(tag.id),
+    TAG_COLOR_EDIT_CANDIDATE_COUNT
+  )
+}
+
+async function saveColor(tagId: number) {
+  saving.value = true
+  try {
+    await updateTag(tagId, { color: colorValue.value })
+    colorPickerId.value = null
+    emit('changed')
+  } catch {
+    toast.add({ title: t('tags.colorFailed'), color: 'error' })
+  } finally {
+    saving.value = false
+  }
+}
+
+function openDeleteConfirm(tag: ImageTag) {
+  deleteTarget.value = tag
+  deleteOpen.value = true
+}
+
+async function confirmDelete() {
+  const tag = deleteTarget.value
+  if (!tag || saving.value) return
+  saving.value = true
+  try {
+    await deleteTag(tag.id)
+    deleteOpen.value = false
+    deleteTarget.value = null
+    selectedIds.value.delete(tag.id)
+    selectedIds.value = new Set(selectedIds.value)
+    emit('changed')
+    toast.add({ title: t('tags.deleted', { name: tag.name }), color: 'success' })
+  } catch {
+    toast.add({ title: t('tags.deleteFailed'), color: 'error' })
+  } finally {
+    saving.value = false
+  }
+}
+
+function openBatchMerge() {
+  if (selectedIds.value.size < 2) {
+    toast.add({ title: t('tags.mergeSelectAtLeast'), color: 'warning' })
+    return
+  }
+  mergeMode.value = 'batch'
+  mergeSourceIds.value = [...selectedIds.value]
+  const sorted = selectedList.value.sort((a, b) => (b.imageCount ?? 0) - (a.imageCount ?? 0))
+  mergeTargetId.value = sorted[0]?.id ?? null
+  mergeOpen.value = true
+}
+
+function openSingleMerge(tag: ImageTag) {
+  mergeMode.value = 'single'
+  mergeSourceIds.value = [tag.id]
+  const fallback = props.tags
+    .filter(item => item.id !== tag.id)
+    .sort((a, b) => (b.imageCount ?? 0) - (a.imageCount ?? 0))[0]
+  mergeTargetId.value = fallback?.id ?? null
+  mergeOpen.value = true
+}
+
+function requestMergeConfirm() {
+  if (!mergeTargetId.value) return
+  const sourceIds = mergeSourceIds.value.filter(id => id !== mergeTargetId.value)
+  if (!sourceIds.length) return
+  mergeConfirmOpen.value = true
+}
+
+async function confirmMerge() {
+  if (!mergeTargetId.value || saving.value) return
+  const sourceIds = mergeSourceIds.value.filter(id => id !== mergeTargetId.value)
+  if (!sourceIds.length) return
+  saving.value = true
+  try {
+    await mergeTags(sourceIds, mergeTargetId.value)
+    selectedIds.value = new Set()
+    mergeConfirmOpen.value = false
+    mergeOpen.value = false
+    emit('changed')
+    toast.add({ title: t('tags.merged'), color: 'success' })
+  } catch {
+    toast.add({ title: t('tags.mergeFailed'), color: 'error' })
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-5">
+    <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
+      <div class="rounded-xl border border-default bg-elevated p-4">
+        <div class="flex items-center gap-2 text-xs text-muted">
+          <span class="flex size-7 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <UIcon
+              name="i-lucide-tags"
+              class="size-4"
+            />
+          </span>
+          {{ t('tags.statTotal') }}
+        </div>
+        <p :class="statValueClass">
+          {{ stats.total }}
+        </p>
+      </div>
+      <div class="rounded-xl border border-default bg-elevated p-4">
+        <div class="flex items-center gap-2 text-xs text-muted">
+          <span class="flex size-7 items-center justify-center rounded-lg bg-blue-500/10 text-blue-600 dark:text-blue-400">
+            <UIcon
+              name="i-lucide-image"
+              class="size-4"
+            />
+          </span>
+          {{ t('tags.statUsed') }}
+        </div>
+        <p :class="statValueClass">
+          {{ stats.used }}
+        </p>
+      </div>
+      <div class="rounded-xl border border-default bg-elevated p-4">
+        <div class="flex items-center gap-2 text-xs text-muted">
+          <span class="flex size-7 items-center justify-center rounded-lg bg-orange-500/10 text-orange-600 dark:text-orange-400">
+            <UIcon
+              name="i-lucide-tag"
+              class="size-4"
+            />
+          </span>
+          {{ t('tags.statUnused') }}
+        </div>
+        <p :class="statValueClass">
+          {{ stats.unused }}
+        </p>
+      </div>
+      <div class="rounded-xl border border-default bg-elevated p-4">
+        <div class="flex items-center gap-2 text-xs text-muted">
+          <span class="flex size-7 items-center justify-center rounded-lg bg-violet-500/10 text-violet-600 dark:text-violet-400">
+            <UIcon
+              name="i-lucide-trending-up"
+              class="size-4"
+            />
+          </span>
+          {{ t('tags.statNew7d') }}
+        </div>
+        <p :class="statValueClass">
+          {{ stats.newIn7Days }}
+        </p>
+      </div>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-2">
+      <UInput
+        v-model="search"
+        size="sm"
+        icon="i-lucide-search"
+        :placeholder="t('tags.searchName')"
+        class="min-w-44 flex-1 sm:max-w-xs"
+      />
+      <USelect
+        v-model="statusFilter"
+        size="sm"
+        :items="statusItems"
+        class="w-32"
+      />
+      <div class="ml-auto flex flex-wrap gap-2">
+        <UButton
+          type="button"
+          size="sm"
+          color="primary"
+          icon="i-lucide-plus"
+          @click="toggleCreating"
+        >
+          {{ t('tags.addTag') }}
+        </UButton>
+        <UButton
+          type="button"
+          size="sm"
+          variant="outline"
+          color="neutral"
+          icon="i-lucide-merge"
+          :disabled="selectedCount < 2"
+          @click="openBatchMerge"
+        >
+          {{ t('tags.mergeTags') }}
+        </UButton>
+      </div>
+    </div>
+
+    <div
+      v-if="selectedCount > 0"
+      class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary/25 bg-primary/5 px-3 py-2"
+    >
+      <span class="text-xs font-medium text-highlighted">
+        {{ t('tags.mergeSelected', { n: selectedCount }) }}
+      </span>
+      <UButton
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        @click="clearSelection"
+      >
+        {{ t('tags.mergeClear') }}
+      </UButton>
+    </div>
+
+    <div
+      v-if="creating"
+      class="space-y-4 rounded-xl border border-default bg-elevated/50 p-4"
+    >
+      <div class="flex flex-wrap items-start gap-3">
+        <div class="min-w-0 flex-1 space-y-3">
+          <UInput
+            v-model="newName"
+            size="md"
+            :placeholder="t('tags.namePlaceholder')"
+            @keydown.enter.prevent="handleCreate"
+          />
+          <TagColorPicker
+            v-model="newColor"
+            :candidates="newColorCandidates"
+          />
+        </div>
+        <div
+          v-if="newName.trim()"
+          class="shrink-0 pt-1"
+        >
+          <p class="mb-1.5 text-xs text-muted">
+            {{ t('tags.preview') }}
+          </p>
+          <TagBadge
+            :tag="{ id: 0, name: newName.trim(), color: newColor }"
+          />
+        </div>
+      </div>
+      <div class="flex justify-end gap-2 border-t border-default pt-3">
+        <UButton
+          size="sm"
+          variant="ghost"
+          color="neutral"
+          @click="() => { creating = false }"
+        >
+          {{ t('common.cancel') }}
+        </UButton>
+        <UButton
+          size="sm"
+          color="primary"
+          :loading="saving"
+          :disabled="!newName.trim()"
+          @click="handleCreate"
+        >
+          {{ t('common.save') }}
+        </UButton>
+      </div>
+    </div>
+
+    <div class="overflow-hidden rounded-xl border border-default">
+      <div class="overflow-x-auto">
+        <table
+          class="min-w-full"
+          :class="tableTextClass"
+        >
+          <thead class="border-b border-default bg-elevated/60 text-xs text-muted">
+            <tr>
+              <th class="w-10 px-3 py-3">
+                <UCheckbox
+                  :model-value="allPageSelected"
+                  :disabled="!paginatedTags.length"
+                  @update:model-value="toggleSelectAll"
+                />
+              </th>
+              <th class="px-3 py-3 text-left font-medium">
+                {{ t('tags.colName') }}
+              </th>
+              <th class="px-3 py-3 text-left font-medium">
+                {{ t('tags.colImageCount') }}
+              </th>
+              <th class="px-3 py-3 text-left font-medium">
+                {{ t('tags.colLastUsed') }}
+              </th>
+              <th class="px-3 py-3 text-right font-medium">
+                {{ t('tags.colActions') }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="tag in paginatedTags"
+              :key="tag.id"
+              class="border-b border-default last:border-b-0"
+              :class="selectedIds.has(tag.id) ? 'bg-primary/5' : 'hover:bg-elevated/40'"
+            >
+              <td class="px-3 py-3 align-middle">
+                <UCheckbox
+                  :model-value="selectedIds.has(tag.id)"
+                  @update:model-value="toggleSelect(tag.id)"
+                />
+              </td>
+              <td class="px-3 py-3 align-middle">
+                <UInput
+                  v-if="renamingId === tag.id"
+                  v-model="renameValue"
+                  size="sm"
+                  class="max-w-xs"
+                  autofocus
+                  @keydown.enter.prevent="finishRename(tag.id)"
+                  @keydown.esc.prevent="cancelRename"
+                  @blur="onRenameBlur(tag.id)"
+                />
+                <TagBadge
+                  v-else
+                  :tag="tag"
+                  size="sm"
+                />
+              </td>
+              <td class="px-3 py-3 align-middle tabular-nums text-muted">
+                {{ tag.imageCount ?? 0 }}
+              </td>
+              <td class="px-3 py-3 align-middle text-muted">
+                {{ formatLastUsed(tag) }}
+              </td>
+              <td class="px-3 py-3 align-middle">
+                <div class="flex items-center justify-end gap-0.5">
+                  <UButton
+                    type="button"
+                    size="xs"
+                    variant="ghost"
+                    color="primary"
+                    icon="i-lucide-pencil"
+                    :aria-label="t('common.edit')"
+                    @click="startRename(tag)"
+                  />
+                  <UPopover
+                    :open="colorPickerId === tag.id"
+                    :content="{ side: 'bottom', align: 'end' }"
+                    @update:open="(open) => { colorPickerId = open ? tag.id : null }"
+                  >
+                    <UButton
+                      type="button"
+                      size="xs"
+                      variant="ghost"
+                      color="primary"
+                      icon="i-lucide-palette"
+                      :aria-label="t('tags.pickColor')"
+                      @click="() => openColorPicker(tag)"
+                    />
+                    <template #content>
+                      <div
+                        class="flex items-center gap-2 p-2"
+                        @click.stop
+                      >
+                        <TagColorPicker
+                          v-model="colorValue"
+                          :candidates="editColorCandidates"
+                          compact
+                        />
+                        <UButton
+                          icon="i-lucide-check"
+                          size="sm"
+                          color="primary"
+                          class="shrink-0"
+                          :aria-label="t('common.save')"
+                          :loading="saving"
+                          @click="saveColor(tag.id)"
+                        />
+                      </div>
+                    </template>
+                  </UPopover>
+                  <UButton
+                    type="button"
+                    size="xs"
+                    variant="ghost"
+                    color="primary"
+                    icon="i-lucide-merge"
+                    :aria-label="t('tags.mergeIntoAction')"
+                    :disabled="tags.length < 2"
+                    @click="openSingleMerge(tag)"
+                  />
+                  <UButton
+                    type="button"
+                    size="xs"
+                    variant="ghost"
+                    color="error"
+                    icon="i-lucide-trash-2"
+                    :aria-label="t('common.delete')"
+                    @click="openDeleteConfirm(tag)"
+                  />
+                </div>
+              </td>
+            </tr>
+            <tr v-if="!paginatedTags.length">
+              <td
+                colspan="5"
+                class="px-3 py-12 text-center text-sm text-muted"
+              >
+                {{ tags.length ? t('tags.noMatch') : t('tags.emptyHint') }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <PaginationBar
+      v-if="filteredTags.length > 0"
+      :page="page"
+      :total-pages="totalPages"
+      :total="filteredTags.length"
+      :page-size="pageSize"
+      :page-size-options="[10, 20, 30, 50]"
+      @update:page="(value) => { page = value }"
+      @update:page-size="(value) => { pageSize = value }"
+    />
+
+    <UModal
+      v-model:open="mergeOpen"
+      :title="mergeMode === 'single' ? t('tags.mergeIntoTitle') : t('tags.mergeTitle')"
+      :description="mergeMode === 'single'
+        ? t('tags.mergeIntoSubtitle', { name: mergeSourceTags[0]?.name ?? '' })
+        : t('tags.mergeSubtitle')"
+    >
+      <template #body>
+        <template v-if="mergeMode === 'batch'">
+          <p class="mb-2 text-sm text-muted">
+            {{ t('tags.mergeChooseTarget') }}
+          </p>
+          <div class="merge-tag-list max-h-[16.5rem] space-y-2 overflow-y-auto">
+            <label
+              v-for="tag in mergeSourceTags"
+              :key="tag.id"
+              class="flex cursor-pointer items-center gap-3 rounded-lg border border-default px-3 py-2.5 transition-colors"
+              :class="mergeTargetId === tag.id ? 'border-primary/40 bg-primary/5' : 'hover:bg-elevated'"
+            >
+              <input
+                v-model="mergeTargetId"
+                type="radio"
+                :value="tag.id"
+                class="accent-primary"
+              >
+              <TagBadge :tag="tag" />
+              <span class="ml-auto text-sm text-muted">
+                {{ t('common.countImages', { count: tag.imageCount ?? 0 }) }}
+              </span>
+            </label>
+          </div>
+        </template>
+
+        <template v-else>
+          <p class="mb-2 text-sm text-muted">
+            {{ t('tags.mergeIntoChoose') }}
+          </p>
+          <div class="merge-tag-list max-h-[16.5rem] space-y-2 overflow-y-auto">
+            <label
+              v-for="tag in mergeTargetCandidates"
+              :key="tag.id"
+              class="flex cursor-pointer items-center gap-3 rounded-lg border border-default px-3 py-2.5 transition-colors"
+              :class="mergeTargetId === tag.id ? 'border-primary/40 bg-primary/5' : 'hover:bg-elevated'"
+            >
+              <input
+                v-model="mergeTargetId"
+                type="radio"
+                :value="tag.id"
+                class="accent-primary"
+              >
+              <TagBadge :tag="tag" />
+              <span class="ml-auto text-sm text-muted">
+                {{ t('common.countImages', { count: tag.imageCount ?? 0 }) }}
+              </span>
+            </label>
+          </div>
+        </template>
+      </template>
+
+      <template #footer>
+        <div class="flex w-full justify-end gap-2">
+          <UButton
+            variant="outline"
+            color="neutral"
+            @click="() => { mergeOpen = false }"
+          >
+            {{ t('common.cancel') }}
+          </UButton>
+          <UButton
+            color="primary"
+            icon="i-lucide-merge"
+            :disabled="!mergeTargetId"
+            @click="requestMergeConfirm"
+          >
+            {{ t('tags.mergeConfirm') }}
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+
+    <UModal
+      v-model:open="mergeConfirmOpen"
+      :title="t('tags.mergeIrreversibleTitle')"
+      :description="t('tags.mergeIrreversible')"
+    >
+      <template #body>
+        <div class="space-y-3 text-sm">
+          <p v-if="mergeKeepTag">
+            {{ t('tags.mergeConfirmKeep', { name: mergeKeepTag.name }) }}
+          </p>
+          <p v-if="mergeTagsToDelete.length">
+            {{ t('tags.mergeWillDelete', {
+              names: mergeTagsToDelete.map(tag => tag.name).join('、')
+            }) }}
+          </p>
+        </div>
+      </template>
+
+      <template #footer>
+        <div class="flex w-full justify-end gap-2">
+          <UButton
+            variant="outline"
+            color="neutral"
+            @click="() => { mergeConfirmOpen = false }"
+          >
+            {{ t('common.cancel') }}
+          </UButton>
+          <UButton
+            color="primary"
+            icon="i-lucide-merge"
+            :loading="saving"
+            @click="confirmMerge"
+          >
+            {{ t('tags.mergeConfirm') }}
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+
+    <UModal
+      v-model:open="deleteOpen"
+      :title="t('tags.deleteConfirmTitle')"
+      :description="deleteTarget ? t('tags.deleteConfirmDesc', { name: deleteTarget.name }) : ''"
+    >
+      <template #footer>
+        <div class="flex w-full justify-end gap-2">
+          <UButton
+            variant="outline"
+            color="neutral"
+            @click="() => { deleteOpen = false }"
+          >
+            {{ t('common.cancel') }}
+          </UButton>
+          <UButton
+            color="error"
+            icon="i-lucide-trash-2"
+            :loading="saving"
+            @click="confirmDelete"
+          >
+            {{ t('common.delete') }}
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<style scoped>
+.merge-tag-list {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.merge-tag-list::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/app/components/TagPicker.vue b/app/components/TagPicker.vue
new file mode 100644
index 0000000..254ac3e
--- /dev/null
+++ b/app/components/TagPicker.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import type { ImageTag } from '~/types/image'
+import { pickRandomUnusedTagColor } from '~/utils/tag-colors'
+
+const props = withDefaults(defineProps<{
+  modelValue: number[]
+  tags: ImageTag[]
+  disabled?: boolean
+  placeholder?: string
+  allowCreate?: boolean
+  /** 在 Modal 内使用内联列表，避免 Popover 被遮罩挡住 */
+  inline?: boolean
+  /** 内联列表使用复选框样式 */
+  checkbox?: boolean
+  /** 隐藏已选标签徽章（弹窗内用复选框列表即可） */
+  hideSelectedChips?: boolean
+}>(), {
+  disabled: false,
+  allowCreate: true,
+  inline: false,
+  checkbox: false,
+  hideSelectedChips: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number[]]
+  'created': [tag: ImageTag]
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const { createTag } = useTags()
+
+const open = ref(false)
+const query = ref('')
+const creating = ref(false)
+
+const selectedTags = computed(() =>
+  props.tags.filter(tag => props.modelValue.includes(tag.id))
+)
+
+const filteredTags = computed(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) return props.tags
+  return props.tags.filter(tag => tag.name.toLowerCase().includes(q))
+})
+
+const showCreateOption = computed(() => {
+  if (!props.allowCreate) return false
+  const q = query.value.trim()
+  if (!q) return false
+  return !props.tags.some(tag => tag.name === q)
+})
+
+function toggleTag(tagId: number) {
+  const next = new Set(props.modelValue)
+  if (next.has(tagId)) {
+    next.delete(tagId)
+  } else {
+    next.add(tagId)
+  }
+  emit('update:modelValue', [...next])
+}
+
+function removeTag(tagId: number) {
+  emit('update:modelValue', props.modelValue.filter(id => id !== tagId))
+}
+
+async function createFromQuery() {
+  const name = query.value.trim()
+  if (!name || creating.value) return
+
+  creating.value = true
+  try {
+    const color = pickRandomUnusedTagColor(props.tags.map(tag => tag.color))
+    const tag = await createTag(name, color)
+    emit('created', tag)
+    emit('update:modelValue', [...new Set([...props.modelValue, tag.id])])
+    query.value = ''
+    toast.add({ title: t('tags.created', { name: tag.name }), color: 'success' })
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : t('tags.createFailed')
+    toast.add({ title: message, color: 'error' })
+  } finally {
+    creating.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div
+      v-if="selectedTags.length && !hideSelectedChips"
+      class="flex flex-wrap gap-1.5"
+    >
+      <TagBadge
+        v-for="tag in selectedTags"
+        :key="tag.id"
+        :tag="tag"
+        removable
+        @remove="removeTag(tag.id)"
+      />
+    </div>
+
+    <div
+      v-if="inline"
+      class="space-y-2 rounded-lg border border-default p-2"
+    >
+      <UInput
+        v-model="query"
+        size="sm"
+        icon="i-lucide-search"
+        :placeholder="checkbox ? t('tags.search') : t('tags.searchOrCreate')"
+        :disabled="disabled"
+        @keydown.enter.prevent="showCreateOption ? createFromQuery() : undefined"
+      />
+
+      <div class="max-h-48 space-y-1 overflow-y-auto">
+        <button
+          v-for="tag in filteredTags"
+          :key="tag.id"
+          type="button"
+          class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-elevated"
+          :class="modelValue.includes(tag.id) ? 'bg-primary/10' : ''"
+          @click="toggleTag(tag.id)"
+        >
+          <UCheckbox
+            v-if="checkbox"
+            :model-value="modelValue.includes(tag.id)"
+            class="pointer-events-none"
+            @click.stop
+          />
+          <span
+            class="size-2 shrink-0 rounded-full"
+            :style="{ backgroundColor: tag.color }"
+          />
+          <span class="min-w-0 flex-1 truncate">{{ tag.name }}</span>
+          <UIcon
+            v-if="!checkbox && modelValue.includes(tag.id)"
+            name="i-lucide-check"
+            class="size-4 text-primary"
+          />
+        </button>
+
+        <p
+          v-if="!filteredTags.length && !showCreateOption"
+          class="px-2 py-3 text-center text-xs text-muted"
+        >
+          {{ tags.length ? t('tags.noMatch') : t('tags.emptyHint') }}
+        </p>
+
+        <button
+          v-if="showCreateOption"
+          type="button"
+          class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-primary hover:bg-elevated"
+          :disabled="creating"
+          @click="createFromQuery"
+        >
+          <UIcon
+            name="i-lucide-plus"
+            class="size-4"
+          />
+          {{ t('tags.createNamed', { name: query.trim() }) }}
+        </button>
+      </div>
+    </div>
+
+    <UPopover
+      v-else
+      v-model:open="open"
+    >
+      <UButton
+        type="button"
+        size="sm"
+        variant="outline"
+        color="neutral"
+        icon="i-lucide-plus"
+        :disabled="disabled"
+      >
+        {{ placeholder ?? t('tags.addTag') }}
+      </UButton>
+
+      <template #content>
+        <div class="w-64 space-y-2 p-2">
+          <UInput
+            v-model="query"
+            size="sm"
+            icon="i-lucide-search"
+            :placeholder="checkbox ? t('tags.search') : t('tags.searchOrCreate')"
+            :disabled="disabled"
+            @keydown.enter.prevent="showCreateOption ? createFromQuery() : undefined"
+          />
+
+          <div class="max-h-48 space-y-1 overflow-y-auto">
+            <button
+              v-for="tag in filteredTags"
+              :key="tag.id"
+              type="button"
+              class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-elevated"
+              :class="modelValue.includes(tag.id) ? 'bg-primary/10' : ''"
+              @click="toggleTag(tag.id)"
+            >
+              <span
+                class="size-2 shrink-0 rounded-full"
+                :style="{ backgroundColor: tag.color }"
+              />
+              <span class="min-w-0 flex-1 truncate">{{ tag.name }}</span>
+              <UIcon
+                v-if="modelValue.includes(tag.id)"
+                name="i-lucide-check"
+                class="size-4 text-primary"
+              />
+            </button>
+
+            <button
+              v-if="showCreateOption"
+              type="button"
+              class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-primary hover:bg-elevated"
+              :disabled="creating"
+              @click="createFromQuery"
+            >
+              <UIcon
+                name="i-lucide-plus"
+                class="size-4"
+              />
+              {{ t('tags.createNamed', { name: query.trim() }) }}
+            </button>
+          </div>
+        </div>
+      </template>
+    </UPopover>
+  </div>
+</template>
diff --git a/app/components/UploadPreferencesPanel.vue b/app/components/UploadPreferencesPanel.vue
index 315731f..74784f3 100644
--- a/app/components/UploadPreferencesPanel.vue
+++ b/app/components/UploadPreferencesPanel.vue
@@ -23,7 +23,8 @@ const {
 const copyFormatItems = 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 clientQualityLevel = computed(() => {
@@ -32,7 +33,7 @@ const clientQualityLevel = computed(() => {
   return t('preferences.qualityLow')
 })
 
-function setCopyFormat(value: 'url' | 'markdown' | 'html') {
+function setCopyFormat(value: 'url' | 'markdown' | 'html' | 'bbcode') {
   copyFormat.value = value
 }
 
diff --git a/app/components/gallery/GalleryFilterBar.vue b/app/components/gallery/GalleryFilterBar.vue
index 2b1ae55..3064282 100644
--- a/app/components/gallery/GalleryFilterBar.vue
+++ b/app/components/gallery/GalleryFilterBar.vue
@@ -5,24 +5,39 @@ const props = withDefaults(defineProps<{
   storageBackendItems: Array<{ label: string, value: string }>
   uploadSource: string
   uploadSourceItems: Array<{ label: string, value: string }>
+  tagIds?: number[]
+  tagMode?: 'or' | 'and'
+  untaggedOnly?: boolean
+  tags?: Array<{ id: number, name: string, color: string, imageCount?: number }>
   viewMode: 'grid' | 'list'
   selectedCount?: number
   loading?: boolean
   showBatchDelete?: boolean
+  showBatchTags?: boolean
 }>(), {
   selectedCount: 0,
   loading: false,
-  showBatchDelete: true
+  showBatchDelete: true,
+  showBatchTags: false,
+  tagIds: () => [],
+  tags: () => [],
+  tagMode: 'or',
+  untaggedOnly: false
 })
 
 const emit = defineEmits<{
   'update:searchQuery': [value: string]
   'update:storageBackend': [value: string]
   'update:uploadSource': [value: string]
+  'update:tagIds': [value: number[]]
+  'update:tagMode': [value: 'or' | 'and']
+  'update:untaggedOnly': [value: boolean]
   'update:viewMode': [mode: 'grid' | 'list']
   'search': []
   'reset': []
   'batch-delete': []
+  'batch-tags': []
+  'manage-tags': []
 }>()
 
 const { t } = useI18n()
@@ -74,6 +89,18 @@ function viewButtonClass(active: boolean) {
       @update:model-value="emit('update:uploadSource', $event)"
     />
 
+    <TagFilterSelect
+      :model-value="tagIds"
+      :tag-mode="tagMode"
+      :untagged-only="untaggedOnly"
+      :tags="tags"
+      :disabled="loading"
+      @update:model-value="emit('update:tagIds', $event)"
+      @update:tag-mode="emit('update:tagMode', $event)"
+      @update:untagged-only="emit('update:untaggedOnly', $event)"
+      @manage="emit('manage-tags')"
+    />
+
     <UButton
       type="submit"
       icon="i-lucide-search"
@@ -100,6 +127,20 @@ function viewButtonClass(active: boolean) {
       {{ t('stats.resetFilters') }}
     </UButton>
 
+    <UButton
+      v-if="showBatchTags"
+      type="button"
+      icon="i-lucide-tags"
+      size="sm"
+      variant="outline"
+      color="neutral"
+      class="shrink-0"
+      :disabled="!selectedCount || loading"
+      @click="emit('batch-tags')"
+    >
+      {{ t('tags.batchAdd') }}
+    </UButton>
+
     <UButton
       v-if="showBatchDelete"
       type="button"
diff --git a/app/components/gallery/GalleryImageList.vue b/app/components/gallery/GalleryImageList.vue
index d4d2fed..c304a20 100644
--- a/app/components/gallery/GalleryImageList.vue
+++ b/app/components/gallery/GalleryImageList.vue
@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import type { ImageItem } from '~/types/image'
+import type { ImageItem, ImageTag } from '~/types/image'
 
 const props = withDefaults(defineProps<{
   items: ImageItem[]
   selectedKeys: Set<string>
   selectable?: boolean
   showStorage?: boolean
+  showTags?: boolean
   emptyText?: string
   showDelete?: boolean
 }>(), {
   selectable: false,
   showStorage: false,
+  showTags: false,
   showDelete: true
 })
 
@@ -18,11 +20,15 @@ const emit = defineEmits<{
   'update:selectedKeys': [value: Set<string>]
   'preview': [image: ImageItem]
   'delete': [image: ImageItem]
+  'tag-click': [tagId: number]
+  'untagged-click': []
 }>()
 
 const { t } = useI18n()
 const { formatFileSize } = useFileSize()
 
+const INLINE_TAG_LIMIT = 3
+
 const displayEmptyText = computed(() => props.emptyText ?? t('image.empty'))
 
 const allSelected = computed(() =>
@@ -76,10 +82,33 @@ function sourceLabel(image: ImageItem) {
   }
 }
 
-function typeLabel(image: ImageItem) {
-  if (props.showStorage && image.storage) return image.storage.name
-  return '—'
+function sourceIcon(image: ImageItem) {
+  switch (image.uploadSource) {
+    case 'web':
+      return 'i-lucide-globe'
+    case 'api':
+      return 'i-lucide-code-xml'
+    default:
+      return null
+  }
 }
+
+function storageIcon(image: ImageItem) {
+  return image.storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
+}
+
+function tagDisplay(tags: ImageTag[] | undefined) {
+  const list = tags ?? []
+  if (list.length <= INLINE_TAG_LIMIT) {
+    return { visible: list, hidden: [] as ImageTag[] }
+  }
+  return {
+    visible: list.slice(0, INLINE_TAG_LIMIT),
+    hidden: list.slice(INLINE_TAG_LIMIT)
+  }
+}
+
+const metaBadgeClass = 'inline-flex max-w-full items-center gap-1 rounded-md border border-default px-1.5 py-0.5 text-[11px] leading-4 text-muted'
 </script>
 
 <template>
@@ -88,12 +117,12 @@ function typeLabel(image: ImageItem) {
     class="overflow-hidden rounded-xl border border-default bg-default"
   >
     <div class="overflow-x-auto">
-      <table class="min-w-full text-sm">
-        <thead class="border-b border-default text-xs text-muted">
+      <table class="min-w-full text-xs">
+        <thead class="border-b border-default bg-elevated/40 text-muted">
           <tr>
             <th
               v-if="selectable"
-              class="w-10 px-4 py-3 text-left font-medium"
+              class="w-10 px-3 py-2.5 text-left font-medium"
             >
               <UCheckbox
                 :model-value="allSelected ? true : headerIndeterminate ? 'indeterminate' : false"
@@ -101,22 +130,31 @@ function typeLabel(image: ImageItem) {
                 @update:model-value="toggleAll"
               />
             </th>
-            <th class="min-w-[16rem] px-4 py-3 text-left font-medium">
+            <th class="min-w-[14rem] px-3 py-2.5 text-left font-medium">
               {{ t('stats.colFilename') }}
             </th>
-            <th class="hidden w-28 px-4 py-3 text-left font-medium sm:table-cell">
+            <th class="hidden w-24 px-3 py-2.5 text-left font-medium sm:table-cell">
               {{ t('stats.colSource') }}
             </th>
-            <th class="w-24 px-4 py-3 text-left font-medium">
+            <th class="w-20 px-3 py-2.5 text-left font-medium">
               {{ t('stats.colSize') }}
             </th>
-            <th class="hidden w-32 px-4 py-3 text-left font-medium md:table-cell">
+            <th
+              v-if="showStorage"
+              class="hidden w-28 px-3 py-2.5 text-left font-medium md:table-cell"
+            >
               {{ t('stats.colType') }}
             </th>
-            <th class="hidden w-44 px-4 py-3 text-left font-medium lg:table-cell">
+            <th class="hidden w-40 px-3 py-2.5 text-left font-medium lg:table-cell">
               {{ t('stats.colUploadedAt') }}
             </th>
-            <th class="w-28 px-4 py-3 text-right font-medium">
+            <th
+              v-if="showTags"
+              class="min-w-[9rem] px-3 py-2.5 text-left font-medium md:table-cell"
+            >
+              {{ t('tags.column') }}
+            </th>
+            <th class="w-24 px-3 py-2.5 text-right font-medium">
               {{ t('stats.colActions') }}
             </th>
           </tr>
@@ -125,22 +163,23 @@ function typeLabel(image: ImageItem) {
           <tr
             v-for="image in items"
             :key="image.key"
-            class="transition-colors hover:bg-muted/20"
+            class="transition-colors hover:bg-elevated/50"
+            :class="selectedKeys.has(image.key) ? 'bg-primary/5' : ''"
           >
             <td
               v-if="selectable"
-              class="px-4 py-3"
+              class="px-3 py-2"
             >
               <UCheckbox
                 :model-value="selectedKeys.has(image.key)"
                 @update:model-value="updateSelection(image.key, $event === true)"
               />
             </td>
-            <td class="px-4 py-3">
+            <td class="px-3 py-2.5">
               <div class="flex min-w-0 items-center gap-3">
                 <button
                   type="button"
-                  class="relative size-10 shrink-0 overflow-hidden rounded-md border border-default bg-muted"
+                  class="relative size-12 shrink-0 overflow-hidden rounded-md border border-default bg-muted"
                   :aria-label="t('image.openPreview')"
                   @click="emit('preview', image)"
                 >
@@ -152,35 +191,108 @@ function typeLabel(image: ImageItem) {
                   >
                 </button>
                 <p
-                  class="min-w-0 flex-1 truncate font-medium"
+                  class="min-w-0 flex-1 truncate text-highlighted"
                   :title="image.originalName"
                 >
                   {{ image.originalName }}
                 </p>
               </div>
             </td>
-            <td class="hidden px-4 py-3 sm:table-cell">
+            <td class="hidden px-3 py-2 sm:table-cell">
               <span
-                v-if="sourceLabel(image)"
-                class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
+                v-if="sourceLabel(image) && sourceIcon(image)"
+                :class="metaBadgeClass"
               >
-                {{ sourceLabel(image) }}
+                <UIcon
+                  :name="sourceIcon(image)!"
+                  class="size-3 shrink-0"
+                />
+                <span class="truncate">{{ sourceLabel(image) }}</span>
               </span>
               <span
                 v-else
                 class="text-muted"
               >—</span>
             </td>
-            <td class="px-4 py-3 text-muted">
+            <td class="px-3 py-2 tabular-nums text-muted">
               {{ formatFileSize(image.size) }}
             </td>
-            <td class="hidden px-4 py-3 text-muted md:table-cell">
-              <span class="truncate">{{ typeLabel(image) }}</span>
+            <td
+              v-if="showStorage"
+              class="hidden px-3 py-2 md:table-cell"
+            >
+              <span
+                v-if="image.storage"
+                :class="metaBadgeClass"
+                :title="image.storage.name"
+              >
+                <UIcon
+                  :name="storageIcon(image)"
+                  class="size-3 shrink-0"
+                />
+                <span class="truncate">{{ image.storage.name }}</span>
+              </span>
+              <span
+                v-else
+                class="text-muted"
+              >—</span>
             </td>
-            <td class="hidden px-4 py-3 text-muted lg:table-cell">
+            <td class="hidden px-3 py-2 tabular-nums text-muted lg:table-cell">
               {{ formatUploadedAt(image.uploadedAt) }}
             </td>
-            <td class="px-4 py-3">
+            <td
+              v-if="showTags"
+              class="px-3 py-2 md:table-cell"
+            >
+              <div
+                v-if="image.tags?.length"
+                class="flex flex-wrap items-center gap-1"
+              >
+                <TagBadge
+                  v-for="tag in tagDisplay(image.tags).visible"
+                  :key="tag.id"
+                  :tag="tag"
+                  clickable
+                  @click="emit('tag-click', tag.id)"
+                />
+                <UPopover
+                  v-if="tagDisplay(image.tags).hidden.length"
+                  :content="{ side: 'bottom', align: 'start' }"
+                >
+                  <button
+                    type="button"
+                    class="inline-flex rounded-md border border-default px-1.5 py-0.5 text-[11px] text-muted transition-colors hover:border-primary/40 hover:text-primary"
+                    :aria-label="t('tags.moreTags', { n: tagDisplay(image.tags).hidden.length })"
+                    @click.stop
+                  >
+                    +{{ tagDisplay(image.tags).hidden.length }}
+                  </button>
+                  <template #content>
+                    <div
+                      class="flex max-w-56 flex-wrap gap-1 p-2"
+                      @click.stop
+                    >
+                      <TagBadge
+                        v-for="tag in tagDisplay(image.tags).hidden"
+                        :key="tag.id"
+                        :tag="tag"
+                        clickable
+                        @click="emit('tag-click', tag.id)"
+                      />
+                    </div>
+                  </template>
+                </UPopover>
+              </div>
+              <button
+                v-else
+                type="button"
+                class="rounded-md border border-dashed border-default px-1.5 py-0.5 text-[11px] text-muted transition-colors hover:border-primary/40 hover:text-primary"
+                @click.stop="emit('untagged-click')"
+              >
+                {{ t('tags.unlabeled') }}
+              </button>
+            </td>
+            <td class="px-3 py-2">
               <div class="flex items-center justify-end gap-0.5 text-muted">
                 <CopyButton
                   icon="i-lucide-link"
@@ -217,7 +329,7 @@ function typeLabel(image: ImageItem) {
   </div>
   <div
     v-else
-    class="rounded-xl border border-dashed border-default py-16 text-center text-sm text-muted"
+    class="rounded-xl border border-dashed border-default py-16 text-center text-xs text-muted"
   >
     {{ displayEmptyText }}
   </div>
diff --git a/app/components/settings/SettingsGroup.vue b/app/components/settings/SettingsGroup.vue
index 3285e4b..712d514 100644
--- a/app/components/settings/SettingsGroup.vue
+++ b/app/components/settings/SettingsGroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="divide-y divide-default overflow-hidden rounded-lg border border-default">
+  <div class="divide-y divide-default">
     <slot />
   </div>
 </template>
diff --git a/app/components/settings/SettingsLogsPanel.vue b/app/components/settings/SettingsLogsPanel.vue
index 188ca08..822e11d 100644
--- a/app/components/settings/SettingsLogsPanel.vue
+++ b/app/components/settings/SettingsLogsPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ActivityLogListResponse, ActivityLogStorage, LogAction, LogSource } from '~/types/logs'
+import type { ActivityLogListResponse, LogAction, LogSource, LogStatus } from '~/types/logs'
 
 const { isAuthenticated, handleAuthError, isAdmin } = useAuth()
 const toast = useToast()
@@ -8,36 +8,30 @@ const { formatFileSize } = useFileSize()
 
 const loading = ref(true)
 const page = ref(1)
+const pageSize = ref(10)
 const actionFilter = ref<'all' | LogAction>('all')
 const sourceFilter = ref<'all' | LogSource>('all')
 const userFilter = ref<'all' | number>('all')
+const dateFrom = ref('')
+const dateTo = ref('')
 const searchQuery = ref('')
 const activeSearch = ref('')
 const listData = ref<ActivityLogListResponse | null>(null)
-const imageLinkBase = ref('')
-const hideFolderInUrl = ref(false)
-
-const pageSize = 10
-
-const summaryLabel = computed(() => {
-  const summary = listData.value?.summary
-  if (!summary) return ''
-  return t('logs.summaryAll', {
-    total: summary.total,
-    upload: summary.upload,
-    delete: summary.delete
-  })
-})
 
 const actionItems = computed(() => [
   { label: t('logs.filterActionAll'), value: 'all' as const },
   { label: t('logs.actionUpload'), value: 'upload' as const },
-  { label: t('logs.actionDelete'), value: 'delete' as const }
+  { label: t('logs.actionDelete'), value: 'delete' as const },
+  { label: t('logs.actionLogin'), value: 'login' as const },
+  { label: t('logs.actionEdit'), value: 'edit' as const },
+  { label: t('logs.actionSettings'), value: 'settings' as const },
+  { label: t('logs.actionTags'), value: 'tags' as const }
 ])
 
 const sourceItems = computed(() => [
   { label: t('logs.filterSourceAll'), value: 'all' as const },
   { label: t('logs.sourceWeb'), value: 'web' as const },
+  { label: t('logs.sourceAdmin'), value: 'admin' as const },
   { label: t('logs.sourceApi'), value: 'api' as const }
 ])
 
@@ -73,66 +67,104 @@ function formatTimeShort(value: string) {
   }
 }
 
+function actionLabel(action: LogAction) {
+  const labels: Record<LogAction, string> = {
+    upload: t('logs.actionUpload'),
+    delete: t('logs.actionDelete'),
+    login: t('logs.actionLogin'),
+    edit: t('logs.actionEdit'),
+    settings: t('logs.actionSettings'),
+    tags: t('logs.actionTags')
+  }
+  return labels[action]
+}
+
 function actionBadgeClass(action: LogAction) {
   const base = 'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium whitespace-nowrap'
-  return action === 'upload'
-    ? `${base} bg-success/10 text-success`
-    : `${base} bg-error/10 text-error`
+  switch (action) {
+    case 'upload':
+      return `${base} bg-success/10 text-success`
+    case 'delete':
+      return `${base} bg-error/10 text-error`
+    case 'login':
+      return `${base} bg-sky-500/10 text-sky-600 dark:text-sky-400`
+    case 'edit':
+      return `${base} bg-blue-500/10 text-blue-600 dark:text-blue-400`
+    case 'settings':
+      return `${base} bg-slate-500/10 text-slate-600 dark:text-slate-400`
+    case 'tags':
+      return `${base} bg-violet-500/10 text-violet-600 dark:text-violet-400`
+  }
 }
 
 function actionIcon(action: LogAction) {
-  return action === 'upload' ? 'i-lucide-upload' : 'i-lucide-trash-2'
+  switch (action) {
+    case 'upload':
+      return 'i-lucide-upload'
+    case 'delete':
+      return 'i-lucide-trash-2'
+    case 'login':
+      return 'i-lucide-log-in'
+    case 'edit':
+      return 'i-lucide-pencil'
+    case 'settings':
+      return 'i-lucide-settings'
+    case 'tags':
+      return 'i-lucide-tag'
+  }
+}
+
+function sourceIcon(source: LogSource) {
+  switch (source) {
+    case 'web':
+      return 'i-lucide-monitor'
+    case 'admin':
+      return 'i-lucide-layout-dashboard'
+    case 'api':
+      return 'i-lucide-code-2'
+  }
 }
 
 function sourceLabel(source: LogSource) {
   switch (source) {
     case 'web':
       return t('logs.sourceWeb')
+    case 'admin':
+      return t('logs.sourceAdmin')
     case 'api':
       return t('logs.sourceApi')
   }
 }
 
-function storageIcon(storage: ActivityLogStorage | null) {
-  return storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
-}
-
-function publicPathFromKey(key: string) {
-  if (hideFolderInUrl.value) {
-    const slash = key.lastIndexOf('/')
-    return slash >= 0 ? key.slice(slash + 1) : key
+function sourceBadgeClass(source: LogSource) {
+  const base = 'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium whitespace-nowrap'
+  switch (source) {
+    case 'web':
+      return `${base} bg-primary/10 text-primary`
+    case 'admin':
+      return `${base} bg-orange-500/10 text-orange-600 dark:text-orange-400`
+    case 'api':
+      return `${base} bg-violet-500/10 text-violet-600 dark:text-violet-400`
   }
-  const prefix = 'images/'
-  return key.startsWith(prefix) ? key.slice(prefix.length) : key
 }
 
-function imageUrl(key: string) {
-  const base = imageLinkBase.value.replace(/\/$/, '')
-  const path = publicPathFromKey(key)
-  if (!base) return `/${path}`
-  return `${base}/${path}`
+function statusLabel(status: LogStatus) {
+  return status === 'failure' ? t('logs.resultFailure') : t('logs.resultSuccess')
 }
 
-async function loadImageLinkBase() {
-  try {
-    if (isAdmin.value) {
-      const data = await $fetch<{ effectiveImageBaseUrl: string, hideFolderInUrl: boolean }>('/api/settings', {
-        credentials: 'include'
-      })
-      imageLinkBase.value = data.effectiveImageBaseUrl
-      hideFolderInUrl.value = data.hideFolderInUrl
-      return
-    }
-    const data = await $fetch<{ env: { imageBaseUrl: string, hideFolderInUrl: boolean } }>('/api/user/api-token', {
-      credentials: 'include'
-    })
-    imageLinkBase.value = data.env.imageBaseUrl
-    hideFolderInUrl.value = data.env.hideFolderInUrl
-  } catch {
-    if (import.meta.client) {
-      imageLinkBase.value = window.location.origin
-    }
-  }
+function statusDotClass(status: LogStatus) {
+  return status === 'failure' ? 'bg-error' : 'bg-success'
+}
+
+function formatIp(value: string | null) {
+  if (!value || value === '-') return '—'
+  return value
+}
+
+function formatSize(action: LogAction, size: number) {
+  if (action !== 'upload' && action !== 'delete') return '—'
+  if (action === 'delete' && size <= 0) return '—'
+  return formatFileSize(size)
 }
 
 async function loadLogs() {
@@ -140,7 +172,7 @@ async function loadLogs() {
   try {
     const query: Record<string, string | number> = {
       page: page.value,
-      limit: pageSize
+      limit: pageSize.value
     }
     if (actionFilter.value !== 'all') {
       query.action = actionFilter.value
@@ -154,6 +186,12 @@ async function loadLogs() {
     if (activeSearch.value) {
       query.q = activeSearch.value
     }
+    if (dateFrom.value) {
+      query.from = dateFrom.value
+    }
+    if (dateTo.value) {
+      query.to = dateTo.value
+    }
 
     listData.value = await $fetch<ActivityLogListResponse>('/api/logs', {
       credentials: 'include',
@@ -191,21 +229,32 @@ function handlePageChange(target: number) {
   void loadLogs()
 }
 
-onMounted(async () => {
-  await loadImageLinkBase()
-  await loadLogs()
+function handlePageSizeChange(size: number) {
+  pageSize.value = size
+  page.value = 1
+  void loadLogs()
+}
+
+onMounted(() => {
+  void loadLogs()
 })
 </script>
 
 <template>
   <div class="min-w-0">
-    <div class="flex flex-wrap items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6">
-      <div>
-        <h2 class="text-sm font-semibold">
-          {{ t('logs.pageTitle') }}
-        </h2>
-        <p class="mt-0.5 text-xs text-muted">
-          {{ isAdmin ? t('logs.pageSubtitleAdmin') : t('logs.pageSubtitle') }}
+    <div class="mb-6 flex items-start justify-between gap-4">
+      <div class="min-w-0">
+        <div class="flex items-center gap-2">
+          <span
+            class="h-4 w-1 shrink-0 rounded-full bg-primary"
+            aria-hidden="true"
+          />
+          <h2 class="text-sm font-semibold text-highlighted">
+            {{ t('logs.pageTitle') }}
+          </h2>
+        </div>
+        <p class="mt-1.5 pl-3 text-xs leading-relaxed text-muted">
+          {{ isAdmin ? t('settings.pageSubtitleLogs') : t('logs.pageSubtitle') }}
         </p>
       </div>
       <UButton
@@ -215,35 +264,45 @@ onMounted(async () => {
         size="sm"
         :label="t('common.refresh')"
         :loading="loading"
+        class="shrink-0"
         @click="loadLogs"
       />
     </div>
 
     <form
-      class="border-b border-default px-5 py-3 sm:px-6"
+      class="mb-4 flex flex-col gap-3"
       @submit.prevent="submitSearch"
     >
-      <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-        <p
-          v-if="summaryLabel"
-          class="text-xs text-muted"
-        >
-          {{ summaryLabel }}
-        </p>
-        <p
-          v-else
-          class="text-xs text-muted"
-        >
-          {{ t('stats.counting') }}
-        </p>
+      <div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+        <div class="flex min-w-0 flex-wrap items-center gap-2">
+          <UInput
+            v-model="dateFrom"
+            type="date"
+            size="sm"
+            class="min-w-0 w-full sm:w-36"
+            :aria-label="t('logs.dateFrom')"
+            :disabled="loading"
+            @change="applyFilters"
+          />
+          <span class="hidden text-xs text-muted sm:inline">{{ t('logs.dateRangeSeparator') }}</span>
+          <UInput
+            v-model="dateTo"
+            type="date"
+            size="sm"
+            class="min-w-0 w-full sm:w-36"
+            :aria-label="t('logs.dateTo')"
+            :disabled="loading"
+            @change="applyFilters"
+          />
+        </div>
 
-        <div class="flex min-w-0 flex-wrap items-center gap-2 sm:justify-end">
+        <div class="flex min-w-0 flex-wrap items-center gap-2 xl:justify-end">
           <USelect
             v-if="isAdmin"
             v-model="userFilter"
             :items="userItems"
             value-key="value"
-            class="min-w-0 w-full sm:w-36"
+            class="min-w-0 w-full sm:w-32"
             size="sm"
             @update:model-value="applyFilters"
           />
@@ -251,7 +310,7 @@ onMounted(async () => {
             v-model="actionFilter"
             :items="actionItems"
             value-key="value"
-            class="min-w-0 w-[calc(50%-0.25rem)] sm:w-32"
+            class="min-w-0 w-[calc(50%-0.25rem)] sm:w-28"
             size="sm"
             @update:model-value="applyFilters"
           />
@@ -259,7 +318,7 @@ onMounted(async () => {
             v-model="sourceFilter"
             :items="sourceItems"
             value-key="value"
-            class="min-w-0 w-[calc(50%-0.25rem)] sm:w-36"
+            class="min-w-0 w-[calc(50%-0.25rem)] sm:w-28"
             size="sm"
             @update:model-value="applyFilters"
           />
@@ -268,19 +327,17 @@ onMounted(async () => {
               v-model="searchQuery"
               icon="i-lucide-search"
               :placeholder="t('logs.searchPlaceholder')"
-              class="min-w-0 flex-1 sm:w-40 sm:flex-none"
+              class="min-w-0 flex-1 sm:w-44 sm:flex-none"
               size="sm"
               :disabled="loading"
             />
             <UButton
               type="submit"
-              icon="i-lucide-search"
               size="sm"
               class="shrink-0"
-              :aria-label="t('common.search')"
               :loading="loading"
             >
-              <span class="hidden sm:inline">{{ t('common.search') }}</span>
+              {{ t('common.search') }}
             </UButton>
             <UButton
               v-if="activeSearch"
@@ -292,263 +349,209 @@ onMounted(async () => {
               class="shrink-0"
               :aria-label="t('stats.clear')"
               @click="clearSearch"
-            >
-              <span class="hidden sm:inline">{{ t('stats.clear') }}</span>
-            </UButton>
+            />
           </div>
         </div>
       </div>
     </form>
 
-    <div
-      v-if="loading"
-      class="p-4 sm:p-6"
-    >
-      <div class="space-y-3 sm:hidden">
-        <USkeleton
-          v-for="n in 6"
-          :key="`mobile-${n}`"
-          class="h-24 rounded-lg"
-        />
-      </div>
-      <div class="hidden space-y-2 sm:block">
-        <USkeleton
-          v-for="n in 8"
-          :key="`desktop-${n}`"
-          class="h-12 rounded-lg"
-        />
-      </div>
-    </div>
-
-    <template v-else-if="listData && listData.items.length">
-      <div class="min-w-0 sm:hidden">
-        <div class="divide-y divide-default">
-          <article
-            v-for="row in listData.items"
-            :key="row.id"
-            class="min-w-0 px-4 py-3.5"
-          >
-            <div class="flex items-start justify-between gap-3">
-              <time class="text-xs text-muted">
-                {{ formatTimeShort(row.createdAt) }}
-              </time>
-              <span class="shrink-0 text-xs tabular-nums text-muted">
-                {{ formatFileSize(row.size) }}
-              </span>
-            </div>
-
-            <div class="mt-2 flex min-w-0 max-w-full flex-wrap items-center gap-1.5">
-              <span :class="actionBadgeClass(row.action)">
-                <UIcon
-                  :name="actionIcon(row.action)"
-                  class="size-3 shrink-0"
-                />
-                {{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
-              </span>
-              <span class="inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary whitespace-nowrap">
-                {{ sourceLabel(row.source) }}
-              </span>
-              <span
-                v-if="isAdmin"
-                class="text-xs text-muted"
-              >
-                {{ row.username ?? '—' }}
-              </span>
-              <UBadge
-                v-if="row.storage"
-                color="neutral"
-                variant="subtle"
-                size="xs"
-                class="max-w-full truncate"
-              >
-                <UIcon
-                  :name="storageIcon(row.storage)"
-                  class="mr-1 size-3"
-                />
-                {{ row.storage.name }}
-              </UBadge>
-            </div>
-
-            <p
-              class="mt-2 truncate text-sm"
-              :title="row.originalName"
-            >
-              {{ row.originalName }}
-            </p>
-
-            <div class="mt-2 flex min-w-0 items-center gap-1">
-              <a
-                v-if="row.action === 'upload'"
-                :href="imageUrl(row.key)"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="min-w-0 flex-1 truncate font-mono text-xs text-primary hover:underline"
-                :title="row.key"
-              >
-                {{ row.key }}
-              </a>
-              <span
-                v-else
-                class="min-w-0 flex-1 truncate font-mono text-xs text-dimmed"
-                :title="row.key"
-              >
-                {{ row.key }}
-              </span>
-              <CopyButton
-                icon="i-lucide-copy"
-                icon-only
-                class="shrink-0"
-                :label="t('common.copy')"
-                :value="row.key"
-                :success-title="t('copy.copiedUrl')"
-              />
-            </div>
-          </article>
+    <div class="overflow-hidden rounded-xl border border-default bg-default">
+      <div
+        v-if="loading"
+        class="p-4 sm:p-6"
+      >
+        <div class="space-y-3 sm:hidden">
+          <USkeleton
+            v-for="n in 6"
+            :key="`mobile-${n}`"
+            class="h-24 rounded-lg"
+          />
+        </div>
+        <div class="hidden space-y-2 sm:block">
+          <USkeleton
+            v-for="n in 8"
+            :key="`desktop-${n}`"
+            class="h-12 rounded-lg"
+          />
         </div>
       </div>
 
-      <div class="hidden min-w-0 sm:block">
-        <table class="w-full table-fixed text-left text-sm">
-          <thead class="border-b border-default bg-muted/30 text-xs text-muted">
-            <tr>
-              <th class="w-36 px-4 py-3 font-medium sm:px-6">
-                {{ t('logs.colTime') }}
-              </th>
-              <th
-                v-if="isAdmin"
-                class="w-20 px-4 py-3 font-medium"
-              >
-                {{ t('logs.colUser') }}
-              </th>
-              <th class="w-20 whitespace-nowrap px-4 py-3 font-medium">
-                {{ t('logs.colAction') }}
-              </th>
-              <th class="w-16 whitespace-nowrap px-4 py-3 font-medium">
-                {{ t('logs.colSource') }}
-              </th>
-              <th class="w-24 px-4 py-3 font-medium">
-                {{ t('logs.colStorage') }}
-              </th>
-              <th class="hidden px-4 py-3 font-medium md:table-cell">
-                {{ t('logs.colFile') }}
-              </th>
-              <th class="w-20 px-4 py-3 font-medium">
-                {{ t('logs.colSize') }}
-              </th>
-              <th class="hidden px-4 py-3 font-medium xl:table-cell">
-                {{ t('logs.colKey') }}
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-default">
-            <tr
+      <template v-else-if="listData && listData.items.length">
+        <div class="min-w-0 sm:hidden">
+          <div class="divide-y divide-default">
+            <article
               v-for="row in listData.items"
               :key="row.id"
-              class="hover:bg-muted/20"
+              class="min-w-0 px-4 py-3.5"
             >
-              <td class="px-4 py-3 text-xs text-muted sm:px-6">
-                <span class="block truncate">{{ formatTime(row.createdAt) }}</span>
-              </td>
-              <td
-                v-if="isAdmin"
-                class="px-4 py-3 text-xs"
-              >
-                <span class="block truncate">{{ row.username ?? '—' }}</span>
-              </td>
-              <td class="whitespace-nowrap px-4 py-3">
+              <div class="flex items-start justify-between gap-3">
+                <time class="text-xs text-muted">
+                  {{ formatTimeShort(row.createdAt) }}
+                </time>
+                <span class="shrink-0 text-xs tabular-nums text-muted">
+                  {{ formatSize(row.action, row.size) }}
+                </span>
+              </div>
+
+              <div class="mt-2 flex min-w-0 max-w-full flex-wrap items-center gap-1.5">
                 <span :class="actionBadgeClass(row.action)">
                   <UIcon
                     :name="actionIcon(row.action)"
                     class="size-3 shrink-0"
                   />
-                  {{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
+                  {{ actionLabel(row.action) }}
                 </span>
-              </td>
-              <td class="whitespace-nowrap px-4 py-3">
-                <span class="inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                <span :class="sourceBadgeClass(row.source)">
+                  <UIcon
+                    :name="sourceIcon(row.source)"
+                    class="size-3 shrink-0"
+                  />
                   {{ sourceLabel(row.source) }}
                 </span>
-              </td>
-              <td class="px-4 py-3 text-xs">
                 <span
-                  v-if="row.storage"
-                  class="flex min-w-0 items-center gap-1"
-                  :title="row.storage.name"
+                  v-if="isAdmin"
+                  class="text-xs text-muted"
                 >
-                  <UIcon
-                    :name="storageIcon(row.storage)"
-                    class="size-3.5 shrink-0 opacity-70"
-                  />
-                  <span class="truncate">{{ row.storage.name }}</span>
+                  {{ row.username ?? '—' }}
                 </span>
-                <span
-                  v-else
-                  class="text-muted"
-                >—</span>
-              </td>
-              <td
-                class="hidden max-w-0 truncate px-4 py-3 md:table-cell"
+              </div>
+
+              <p
+                class="mt-2 truncate text-sm"
                 :title="row.originalName"
               >
                 {{ row.originalName }}
-              </td>
-              <td class="whitespace-nowrap px-4 py-3 tabular-nums text-muted">
-                {{ formatFileSize(row.size) }}
-              </td>
-              <td class="hidden max-w-0 px-4 py-3 xl:table-cell">
-                <div class="flex min-w-0 items-center gap-1">
-                  <a
-                    v-if="row.action === 'upload'"
-                    :href="imageUrl(row.key)"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="min-w-0 truncate font-mono text-xs text-primary hover:underline"
-                    :title="row.key"
-                  >
-                    {{ row.key }}
-                  </a>
+              </p>
+
+              <div class="mt-2 flex items-center justify-between gap-2 text-xs text-muted">
+                <span>{{ formatIp(row.ipAddress) }}</span>
+                <span class="inline-flex items-center gap-1.5">
                   <span
-                    v-else
-                    class="min-w-0 truncate font-mono text-xs text-dimmed"
-                    :title="row.key"
-                  >
-                    {{ row.key }}
-                  </span>
-                  <CopyButton
-                    icon="i-lucide-copy"
-                    icon-only
-                    class="shrink-0"
-                    :label="t('common.copy')"
-                    :value="row.key"
-                    :success-title="t('copy.copiedUrl')"
+                    class="size-1.5 rounded-full"
+                    :class="statusDotClass(row.status)"
                   />
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                  {{ statusLabel(row.status) }}
+                </span>
+              </div>
+            </article>
+          </div>
+        </div>
+
+        <div class="hidden min-w-0 overflow-x-auto sm:block">
+          <table class="w-full min-w-[56rem] text-left text-sm">
+            <thead class="border-b border-default bg-muted/30 text-xs text-muted">
+              <tr>
+                <th class="whitespace-nowrap px-4 py-3 font-medium sm:px-5">
+                  {{ t('logs.colTime') }}
+                </th>
+                <th
+                  v-if="isAdmin"
+                  class="whitespace-nowrap px-4 py-3 font-medium"
+                >
+                  {{ t('logs.colUser') }}
+                </th>
+                <th class="whitespace-nowrap px-4 py-3 font-medium">
+                  {{ t('logs.colAction') }}
+                </th>
+                <th class="whitespace-nowrap px-4 py-3 font-medium">
+                  {{ t('logs.colSource') }}
+                </th>
+                <th class="px-4 py-3 font-medium">
+                  {{ t('logs.colFile') }}
+                </th>
+                <th class="whitespace-nowrap px-4 py-3 font-medium">
+                  {{ t('logs.colSize') }}
+                </th>
+                <th class="whitespace-nowrap px-4 py-3 font-medium">
+                  {{ t('logs.colIp') }}
+                </th>
+                <th class="whitespace-nowrap px-4 py-3 font-medium sm:px-5">
+                  {{ t('logs.colResult') }}
+                </th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-default">
+              <tr
+                v-for="row in listData.items"
+                :key="row.id"
+                class="hover:bg-muted/20"
+              >
+                <td class="whitespace-nowrap px-4 py-3 text-xs text-muted sm:px-5">
+                  {{ formatTime(row.createdAt) }}
+                </td>
+                <td
+                  v-if="isAdmin"
+                  class="whitespace-nowrap px-4 py-3 text-xs"
+                >
+                  {{ row.username ?? '—' }}
+                </td>
+                <td class="whitespace-nowrap px-4 py-3">
+                  <span :class="actionBadgeClass(row.action)">
+                    <UIcon
+                      :name="actionIcon(row.action)"
+                      class="size-3 shrink-0"
+                    />
+                    {{ actionLabel(row.action) }}
+                  </span>
+                </td>
+                <td class="whitespace-nowrap px-4 py-3">
+                  <span :class="sourceBadgeClass(row.source)">
+                    <UIcon
+                      :name="sourceIcon(row.source)"
+                      class="size-3 shrink-0"
+                    />
+                    {{ sourceLabel(row.source) }}
+                  </span>
+                </td>
+                <td
+                  class="max-w-[12rem] truncate px-4 py-3"
+                  :title="row.originalName"
+                >
+                  {{ row.originalName }}
+                </td>
+                <td class="whitespace-nowrap px-4 py-3 tabular-nums text-muted">
+                  {{ formatSize(row.action, row.size) }}
+                </td>
+                <td class="whitespace-nowrap px-4 py-3 font-mono text-xs text-muted">
+                  {{ formatIp(row.ipAddress) }}
+                </td>
+                <td class="whitespace-nowrap px-4 py-3 sm:px-5">
+                  <span class="inline-flex items-center gap-1.5 text-xs">
+                    <span
+                      class="size-1.5 rounded-full"
+                      :class="statusDotClass(row.status)"
+                    />
+                    {{ statusLabel(row.status) }}
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </template>
+
+      <div
+        v-else
+        class="px-4 py-16 text-center text-sm text-muted sm:px-6"
+      >
+        {{ t('logs.empty') }}
       </div>
-    </template>
 
-    <div
-      v-else
-      class="px-4 py-16 text-center text-sm text-muted sm:px-6"
-    >
-      {{ t('logs.empty') }}
-    </div>
-
-    <div
-      v-if="listData && listData.total > 0"
-      class="border-t border-default px-4 py-4 sm:px-6"
-    >
-      <PaginationBar
-        :page="listData.page"
-        :total-pages="listData.totalPages"
-        :total="listData.total"
-        :unit="t('logs.entriesUnit')"
-        :loading="loading"
-        @update:page="handlePageChange"
-      />
+      <div
+        v-if="listData && listData.total > 0"
+        class="border-t border-default px-4 py-4 sm:px-5"
+      >
+        <PaginationBar
+          :page="listData.page"
+          :total-pages="listData.totalPages"
+          :total="listData.total"
+          :unit="t('logs.entriesUnit')"
+          :page-size="pageSize"
+          :loading="loading"
+          @update:page="handlePageChange"
+          @update:page-size="handlePageSizeChange"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/components/settings/SettingsPageHeader.vue b/app/components/settings/SettingsPageHeader.vue
new file mode 100644
index 0000000..f9a3cbc
--- /dev/null
+++ b/app/components/settings/SettingsPageHeader.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string
+  title: string
+  subtitle?: string
+}>()
+</script>
+
+<template>
+  <header class="mb-0 flex items-start gap-3 border-b border-default pb-6">
+    <div class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/10">
+      <UIcon
+        :name="icon"
+        class="size-5 text-primary"
+      />
+    </div>
+    <div class="min-w-0 pt-0.5">
+      <h1 class="text-lg font-semibold tracking-tight text-highlighted">
+        {{ title }}
+      </h1>
+      <p
+        v-if="subtitle"
+        class="mt-1 text-xs leading-relaxed text-muted"
+      >
+        {{ subtitle }}
+      </p>
+    </div>
+  </header>
+</template>
diff --git a/app/components/settings/SettingsPanel.vue b/app/components/settings/SettingsPanel.vue
index 6224252..5f60a96 100644
--- a/app/components/settings/SettingsPanel.vue
+++ b/app/components/settings/SettingsPanel.vue
@@ -1,7 +1,5 @@
 <template>
-  <div class="overflow-hidden rounded-xl border border-default bg-default p-5 sm:p-6">
-    <div class="space-y-8">
-      <slot />
-    </div>
+  <div class="mt-6 space-y-4">
+    <slot />
   </div>
 </template>
diff --git a/app/components/settings/SettingsPlainSection.vue b/app/components/settings/SettingsPlainSection.vue
new file mode 100644
index 0000000..dfc492e
--- /dev/null
+++ b/app/components/settings/SettingsPlainSection.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  hint?: string
+}>()
+</script>
+
+<template>
+  <section class="overflow-hidden rounded-xl border border-default bg-default">
+    <div class="px-4 py-3">
+      <div class="flex flex-wrap items-center gap-2">
+        <h2 class="text-sm font-semibold text-highlighted">
+          {{ title }}
+        </h2>
+        <slot name="badge" />
+      </div>
+      <p
+        v-if="hint"
+        class="mt-1 text-xs leading-relaxed text-muted"
+      >
+        {{ hint }}
+      </p>
+    </div>
+    <div class="border-t border-default px-4 py-4">
+      <slot />
+    </div>
+  </section>
+</template>
diff --git a/app/components/settings/SettingsRadioGroup.vue b/app/components/settings/SettingsRadioGroup.vue
new file mode 100644
index 0000000..ac17838
--- /dev/null
+++ b/app/components/settings/SettingsRadioGroup.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+export type SettingsRadioOption = {
+  value: string
+  label: string
+  description?: string
+}
+
+defineProps<{
+  items: SettingsRadioOption[]
+}>()
+
+const model = defineModel<string>({ required: true })
+
+const radioUi = {
+  fieldset: 'flex flex-col divide-y divide-default',
+  item: 'flex items-start gap-4 py-4',
+  wrapper: 'min-w-0 flex-1 pr-2',
+  base: 'mt-0.5 shrink-0',
+  label: 'block text-sm font-medium text-highlighted',
+  description: 'mt-1 block text-xs leading-relaxed text-muted'
+}
+</script>
+
+<template>
+  <URadioGroup
+    v-model="model"
+    :items="items"
+    variant="list"
+    :ui="radioUi"
+  >
+    <template #label="{ item }">
+      <span class="text-sm font-medium text-highlighted">{{ item.label }}</span>
+    </template>
+    <template #description="{ item }">
+      <span
+        v-if="item.description"
+        class="mt-1 block text-xs leading-relaxed text-muted"
+      >{{ item.description }}</span>
+    </template>
+  </URadioGroup>
+</template>
diff --git a/app/components/settings/SettingsSection.vue b/app/components/settings/SettingsSection.vue
index 40e303a..a6228ea 100644
--- a/app/components/settings/SettingsSection.vue
+++ b/app/components/settings/SettingsSection.vue
@@ -6,8 +6,8 @@ defineProps<{
 </script>
 
 <template>
-  <section class="space-y-4">
-    <div class="flex items-start justify-between gap-4">
+  <section class="overflow-hidden rounded-xl border border-default bg-default">
+    <div class="flex items-start justify-between gap-4 px-4 py-3">
       <div class="min-w-0">
         <div class="flex items-center gap-2">
           <span
@@ -32,6 +32,8 @@ defineProps<{
         <slot name="action" />
       </div>
     </div>
-    <slot />
+    <div class="border-t border-default px-4">
+      <slot />
+    </div>
   </section>
 </template>
diff --git a/app/components/settings/SettingsServerFooter.vue b/app/components/settings/SettingsServerFooter.vue
index 6cdd787..a257495 100644
--- a/app/components/settings/SettingsServerFooter.vue
+++ b/app/components/settings/SettingsServerFooter.vue
@@ -6,6 +6,7 @@ defineProps<{
 
 const emit = defineEmits<{
   save: []
+  restore: []
 }>()
 
 const { t } = useI18n()
@@ -13,13 +14,19 @@ const { t } = useI18n()
 
 <template>
   <div class="border-t border-default bg-default px-4 py-4 sm:px-6">
-    <div class="flex items-center justify-end gap-3">
+    <div class="flex flex-wrap items-center justify-end gap-3">
       <p
         v-if="hasChanges"
         class="mr-auto text-xs text-warning"
       >
         {{ t('settings.unsavedChanges') }}
       </p>
+      <UButton
+        :label="t('settings.restoreDefaults')"
+        color="neutral"
+        variant="outline"
+        @click="emit('restore')"
+      />
       <UButton
         :label="t('settings.saveSettings')"
         icon="i-lucide-save"
diff --git a/app/components/settings/SettingsSidebar.vue b/app/components/settings/SettingsSidebar.vue
index ba4853b..b002bf1 100644
--- a/app/components/settings/SettingsSidebar.vue
+++ b/app/components/settings/SettingsSidebar.vue
@@ -1,39 +1,67 @@
 <script setup lang="ts">
 import type { SettingsTab } from '~/types/settings'
 
-defineProps<{
+const props = defineProps<{
   modelValue: SettingsTab
   items: Array<{ id: SettingsTab, label: string, icon: string }>
-  title: string
-  subtitle: string
 }>()
 
 const emit = defineEmits<{
   'update:modelValue': [SettingsTab]
 }>()
+
+const { t } = useI18n()
+const searchQuery = ref('')
+
+const filteredItems = computed(() => {
+  const q = searchQuery.value.trim().toLowerCase()
+  if (!q) return props.items
+  return props.items.filter(item => item.label.toLowerCase().includes(q))
+})
+
+function selectTab(id: SettingsTab) {
+  emit('update:modelValue', id)
+  searchQuery.value = ''
+}
 </script>
 
 <template>
   <aside class="flex w-full shrink-0 flex-col border-b border-default bg-neutral-50 dark:bg-neutral-900/30 lg:w-56 lg:border-b-0 lg:border-r xl:w-60">
-    <div class="border-b border-default px-4 py-5 sm:px-5">
-      <h1 class="text-lg font-semibold tracking-tight text-highlighted">
-        {{ title }}
-      </h1>
-      <p class="mt-1 text-xs leading-relaxed text-muted">
-        {{ subtitle }}
-      </p>
+    <div class="border-b border-default p-3">
+      <UInput
+        v-model="searchQuery"
+        size="sm"
+        :placeholder="t('settings.searchPlaceholder')"
+        icon="i-lucide-search"
+        class="w-full"
+      >
+        <template #trailing>
+          <UKbd
+            size="sm"
+            class="hidden sm:inline-flex"
+          >
+            ⌘K
+          </UKbd>
+        </template>
+      </UInput>
     </div>
 
     <nav class="flex-1 space-y-0.5 p-3">
+      <p
+        v-if="searchQuery.trim() && !filteredItems.length"
+        class="px-3 py-6 text-center text-xs text-muted"
+      >
+        {{ t('settings.searchEmpty') }}
+      </p>
       <button
-        v-for="item in items"
+        v-for="item in filteredItems"
         :key="item.id"
         type="button"
         class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2.5 text-left text-sm transition-colors"
         :class="modelValue === item.id
           ? 'bg-primary/10 font-medium text-primary'
           : 'text-muted hover:bg-muted/50 hover:text-highlighted'"
-        @click="emit('update:modelValue', item.id)"
+        @click="selectTab(item.id)"
       >
         <UIcon
           :name="item.icon"
diff --git a/app/components/settings/SettingsSystemInfo.vue b/app/components/settings/SettingsSystemInfo.vue
index 1d29912..3d601e2 100644
--- a/app/components/settings/SettingsSystemInfo.vue
+++ b/app/components/settings/SettingsSystemInfo.vue
@@ -4,32 +4,64 @@ defineProps<{
   updateAvailable: boolean
   latestVersion: string | null
   releaseUrl: string | null
+  checking: boolean
+}>()
+
+const emit = defineEmits<{
+  checkUpdate: []
 }>()
 
 const { t } = useI18n()
 </script>
 
 <template>
-  <div class="pl-3">
-    <div class="flex flex-wrap items-center gap-2">
-      <span class="text-sm font-medium text-highlighted">
+  <div class="flex flex-wrap items-center justify-between gap-4 py-4">
+    <div class="min-w-0">
+      <p class="text-sm font-medium text-highlighted">
         {{ t('settings.systemVersion') }}
+      </p>
+      <p class="mt-1 text-xs leading-relaxed text-muted">
+        {{ t('settings.systemVersionHint') }}
+      </p>
+    </div>
+    <div class="flex flex-wrap items-center gap-2">
+      <span class="text-sm font-medium tabular-nums text-highlighted">
+        v{{ appVersion }}
       </span>
       <UBadge
-        color="neutral"
+        v-if="updateAvailable && latestVersion"
+        color="warning"
         variant="subtle"
         size="sm"
       >
-        v{{ appVersion }}
+        {{ t('settings.updateAvailable', { version: `v${latestVersion}` }) }}
       </UBadge>
+      <UBadge
+        v-else
+        color="success"
+        variant="subtle"
+        size="sm"
+      >
+        {{ t('settings.upToDate') }}
+      </UBadge>
+      <UButton
+        :label="t('settings.checkUpdate')"
+        icon="i-lucide-refresh-cw"
+        variant="outline"
+        color="neutral"
+        size="sm"
+        class="shrink-0"
+        :loading="checking"
+        @click="emit('checkUpdate')"
+      />
       <a
         v-if="updateAvailable && latestVersion"
         :href="releaseUrl || 'https://github.com/O96u/PicHost/releases'"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-xs text-warning hover:underline"
+        class="text-xs text-primary hover:underline"
       >
-        {{ t('settings.updateAvailable', { version: `v${latestVersion}` }) }}
+        {{ t('settings.viewReleases') }}
       </a>
     </div>
   </div>
diff --git a/app/components/settings/SettingsTagsPanel.vue b/app/components/settings/SettingsTagsPanel.vue
new file mode 100644
index 0000000..3fc2666
--- /dev/null
+++ b/app/components/settings/SettingsTagsPanel.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const { items: tags, loading, fetchTags } = useTags()
+
+onMounted(() => {
+  void fetchTags()
+})
+
+async function handleChanged() {
+  await fetchTags(true)
+}
+</script>
+
+<template>
+  <SettingsPanel>
+    <div
+      v-if="loading && !tags.length"
+      class="flex justify-center py-16"
+    >
+      <UIcon
+        name="i-lucide-loader-circle"
+        class="size-6 animate-spin text-muted"
+      />
+    </div>
+    <TagManagePanel
+      v-else
+      :tags="tags"
+      embedded
+      @changed="handleChanged"
+    />
+  </SettingsPanel>
+</template>
diff --git a/app/components/settings/SettingsToggleRow.vue b/app/components/settings/SettingsToggleRow.vue
index d83ea8c..9bf53f0 100644
--- a/app/components/settings/SettingsToggleRow.vue
+++ b/app/components/settings/SettingsToggleRow.vue
@@ -9,7 +9,7 @@ const model = defineModel<boolean>({ required: true })
 </script>
 
 <template>
-  <div class="flex items-start justify-between gap-4 px-4 py-4 sm:px-5">
+  <div class="flex items-start justify-between gap-4 py-4">
     <div class="min-w-0 flex-1 pr-2">
       <p class="text-sm font-medium text-highlighted">
         <slot name="title">
diff --git a/app/components/settings/SettingsUserPreferencesFields.vue b/app/components/settings/SettingsUserPreferencesFields.vue
index f2cf9f1..76f7d6e 100644
--- a/app/components/settings/SettingsUserPreferencesFields.vue
+++ b/app/components/settings/SettingsUserPreferencesFields.vue
@@ -19,16 +19,11 @@ const {
 const copyFormatItems = 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 clientQualityLevel = computed(() => {
-  if (clientWebpQuality.value >= 85) return t('preferences.qualityHigh')
-  if (clientWebpQuality.value >= 60) return t('preferences.qualityMedium')
-  return t('preferences.qualityLow')
-})
-
-function setCopyFormat(value: 'url' | 'markdown' | 'html') {
+function setCopyFormat(value: 'url' | 'markdown' | 'html' | 'bbcode') {
   copyFormat.value = value
 }
 
@@ -37,6 +32,11 @@ function onClientQualityInput(event: Event) {
   clientWebpQuality.value = Number.isFinite(value) ? value : 80
 }
 
+function onClientQualityNumberInput(value: string | number) {
+  const num = Number(value)
+  clientWebpQuality.value = Number.isFinite(num) ? Math.min(100, Math.max(1, Math.round(num))) : 80
+}
+
 onMounted(() => {
   loadPreferences()
   void loadUserSettings()
@@ -53,7 +53,7 @@ onMounted(() => {
       />
       <div
         v-if="userSettings"
-        class="flex items-start justify-between gap-4 px-4 py-4 sm:px-5"
+        class="flex items-start justify-between gap-4 py-4"
       >
         <div class="min-w-0 flex-1 pr-2">
           <p class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm font-medium text-highlighted">
@@ -87,55 +87,61 @@ onMounted(() => {
           class="size-5 animate-spin text-muted"
         />
       </div>
-      <div class="px-4 py-4 sm:px-5">
-        <div class="flex items-start justify-between gap-4">
-          <div class="min-w-0 flex-1">
-            <p class="text-sm font-medium text-highlighted">
-              {{ t('preferences.webpQuality') }}
-            </p>
-            <p class="mt-1 text-xs leading-relaxed text-muted">
-              {{ t('preferences.webpQualityHint') }}
-            </p>
-          </div>
-          <div class="shrink-0 text-right text-xs text-muted">
-            <p>{{ t('preferences.current', { n: clientWebpQuality }) }}</p>
-            <p class="mt-0.5">
-              {{ clientQualityLevel }}
-            </p>
-          </div>
+      <div class="py-4">
+        <div class="min-w-0">
+          <p class="text-sm font-medium text-highlighted">
+            {{ t('preferences.webpQuality') }}
+          </p>
+          <p class="mt-1 text-xs leading-relaxed text-muted">
+            {{ t('preferences.webpQualityHint') }}
+          </p>
+        </div>
+        <div class="mt-3 flex items-center gap-3">
+          <input
+            type="range"
+            min="1"
+            max="100"
+            :value="clientWebpQuality"
+            class="h-1.5 min-w-0 flex-1 cursor-pointer appearance-none rounded-full bg-muted accent-primary"
+            @input="onClientQualityInput"
+          >
+          <UInput
+            :model-value="clientWebpQuality"
+            type="number"
+            min="1"
+            max="100"
+            size="xs"
+            class="w-14 shrink-0 tabular-nums"
+            @update:model-value="onClientQualityNumberInput"
+          />
         </div>
-        <input
-          type="range"
-          min="1"
-          max="100"
-          :value="clientWebpQuality"
-          class="mt-3 h-1.5 w-full cursor-pointer appearance-none rounded-full bg-muted accent-primary"
-          @input="onClientQualityInput"
-        >
       </div>
     </SettingsGroup>
   </SettingsSection>
 
-  <SettingsSection :title="t('settings.uploadConvenience')">
+  <SettingsSection :title="t('preferences.title')">
     <SettingsGroup>
       <SettingsToggleRow
         v-model="autoCopyMarkdown"
         :title="t('preferences.autoCopy')"
         :hint="t('preferences.autoCopyHint')"
       />
-      <div class="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-5">
+      <div class="py-4">
         <p class="text-sm font-medium text-highlighted">
           {{ t('settings.defaultCopyFormat') }}
         </p>
+        <p class="mt-1 text-xs leading-relaxed text-muted">
+          {{ t('settings.defaultCopyFormatHint') }}
+        </p>
         <div
-          class="flex w-full max-w-xs gap-1 rounded-lg border border-default p-0.5 sm:w-auto"
+          class="mt-3 flex w-full max-w-md gap-1 rounded-lg border border-default p-0.5"
           :class="autoCopyMarkdown ? '' : 'pointer-events-none opacity-40'"
         >
           <UButton
             v-for="item in copyFormatItems"
             :key="item.value"
             size="xs"
-            class="flex-1 justify-center sm:min-w-[4.5rem]"
+            class="flex-1 justify-center"
             :variant="copyFormat === item.value ? 'solid' : 'ghost'"
             :color="copyFormat === item.value ? 'primary' : 'neutral'"
             :label="item.label"
diff --git a/app/composables/useImageList.ts b/app/composables/useImageList.ts
index 8b4dbef..6bbc285 100644
--- a/app/composables/useImageList.ts
+++ b/app/composables/useImageList.ts
@@ -20,6 +20,9 @@ export function useImageList() {
   const activeStorageBackend = ref('all')
   const activeContentType = ref('all')
   const activeUploadSource = ref('all')
+  const activeTagIds = ref<number[]>([])
+  const activeTagMode = ref<'or' | 'and'>('or')
+  const activeUntaggedOnly = ref(false)
   const storageBackendOptions = ref<Array<{ id: string, name: string }>>([])
 
   function storageQueryParams(): Record<string, string> {
@@ -38,6 +41,14 @@ export function useImageList() {
     if (uploadSource && uploadSource !== 'all') {
       params.uploadSource = uploadSource
     }
+    if (activeUntaggedOnly.value) {
+      params.untagged = '1'
+    } else if (activeTagIds.value.length) {
+      params.tagIds = activeTagIds.value.join(',')
+      if (activeTagMode.value === 'and' && activeTagIds.value.length > 1) {
+        params.tagMode = 'and'
+      }
+    }
     return params
   }
 
@@ -181,12 +192,48 @@ export function useImageList() {
     }
   }
 
+  async function setActiveTagFilter(options: {
+    tagIds?: number[]
+    tagMode?: 'or' | 'and'
+    untaggedOnly?: boolean
+  }) {
+    if (options.tagIds !== undefined) {
+      activeTagIds.value = [...options.tagIds]
+    }
+    if (options.tagMode !== undefined) {
+      activeTagMode.value = options.tagMode
+    }
+    if (options.untaggedOnly !== undefined) {
+      activeUntaggedOnly.value = options.untaggedOnly
+    }
+    page.value = 1
+    if (activeSearch.value) {
+      await Promise.all([fetchSearch(1), fetchTotal()])
+    } else {
+      await Promise.all([fetchList(1), fetchTotal()])
+    }
+  }
+
+  async function toggleTagFilter(tagId: number) {
+    const next = new Set(activeTagIds.value)
+    activeUntaggedOnly.value = false
+    if (next.has(tagId)) {
+      next.delete(tagId)
+    } else {
+      next.add(tagId)
+    }
+    await setActiveTagFilter({ tagIds: [...next] })
+  }
+
   async function resetFilters() {
     searchQuery.value = ''
     activeSearch.value = ''
     activeStorageBackend.value = 'all'
     activeContentType.value = 'all'
     activeUploadSource.value = 'all'
+    activeTagIds.value = []
+    activeTagMode.value = 'or'
+    activeUntaggedOnly.value = false
     page.value = 1
     await Promise.all([fetchList(1), fetchTotal()])
   }
@@ -278,6 +325,12 @@ export function useImageList() {
     return t('stats.summaryTotal', { total: count })
   })
 
+  function updateItemTags(key: string, tags: ImageItem['tags']) {
+    items.value = items.value.map(item =>
+      item.key === key ? { ...item, tags } : item
+    )
+  }
+
   return {
     items,
     page,
@@ -288,6 +341,9 @@ export function useImageList() {
     activeStorageBackend,
     activeContentType,
     activeUploadSource,
+    activeTagIds,
+    activeTagMode,
+    activeUntaggedOnly,
     storageBackendOptions,
     searchQuery,
     activeSearch,
@@ -300,12 +356,16 @@ export function useImageList() {
     setActiveStorageBackend,
     setActiveContentType,
     setActiveUploadSource,
+    setActiveTagFilter,
+    toggleTagFilter,
     resetFilters,
     loadStorageBackendOptions,
     submitSearch,
     goToPage,
     setPageSize,
     prependItems,
-    removeItems
+    removeItems,
+    updateItemTags,
+    listQueryParams
   }
 }
diff --git a/app/composables/useImageUpload.ts b/app/composables/useImageUpload.ts
index ce8242a..0fd1d62 100644
--- a/app/composables/useImageUpload.ts
+++ b/app/composables/useImageUpload.ts
@@ -10,14 +10,14 @@ const MAX_FILES = 10
 export function useImageUpload() {
   const toast = useToast()
   const { t } = useI18n()
-  const { compressEnabled, clientWebpQuality } = useUploadPreferences()
+  const { compressEnabled, clientWebpQuality, lastTagIds } = useUploadPreferences()
   const uploading = ref(false)
   const progressItems = ref<UploadProgressItem[]>([])
   const lastUploadResult = ref<UploadResponse | null>(null)
 
   async function uploadFiles(
     files: File[],
-    options?: { notify?: boolean }
+    options?: { notify?: boolean, tagIds?: number[] }
   ) {
     if (uploading.value) return
 
@@ -58,6 +58,12 @@ export function useImageUpload() {
         formData.append('files', file, file.name)
       }
 
+      const tagIds = options?.tagIds ?? lastTagIds.value
+      if (tagIds.length) {
+        formData.append('tagIds', JSON.stringify(tagIds))
+        lastTagIds.value = tagIds
+      }
+
       const response = await $fetch<UploadResponse>('/api/images/upload', {
         method: 'POST',
         body: formData
diff --git a/app/composables/useRecentTags.ts b/app/composables/useRecentTags.ts
new file mode 100644
index 0000000..0c4a41a
--- /dev/null
+++ b/app/composables/useRecentTags.ts
@@ -0,0 +1,48 @@
+const STORAGE_KEY = 'pichost.recent-tag-ids'
+const MAX_RECENT = 12
+
+function readRecentIds(): number[] {
+  if (import.meta.server) return []
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw)
+    if (!Array.isArray(parsed)) return []
+    return parsed.filter((id: unknown): id is number => Number.isInteger(id) && (id as number) > 0)
+  } catch {
+    return []
+  }
+}
+
+function writeRecentIds(ids: number[]) {
+  if (import.meta.server) return
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(ids))
+}
+
+export function useRecentTags() {
+  const recentIds = useState<number[]>('recent-tag-ids', () => [])
+
+  function loadRecentIds() {
+    recentIds.value = readRecentIds()
+  }
+
+  if (import.meta.client && !recentIds.value.length) {
+    loadRecentIds()
+  }
+
+  function recordRecent(tagIds: number[]) {
+    if (!tagIds.length) return
+    const merged = [
+      ...tagIds,
+      ...recentIds.value.filter(id => !tagIds.includes(id))
+    ].slice(0, MAX_RECENT)
+    recentIds.value = merged
+    writeRecentIds(merged)
+  }
+
+  return {
+    recentIds,
+    loadRecentIds,
+    recordRecent
+  }
+}
diff --git a/app/composables/useTags.ts b/app/composables/useTags.ts
new file mode 100644
index 0000000..422bbae
--- /dev/null
+++ b/app/composables/useTags.ts
@@ -0,0 +1,122 @@
+import type { ImageTag } from '~/types/image'
+
+export interface TagListResponse {
+  items: ImageTag[]
+}
+
+export interface TagResponse {
+  tag: ImageTag
+}
+
+export function useTags() {
+  const items = useState<ImageTag[]>('tags-list', () => [])
+  const loading = ref(false)
+  const loaded = ref(false)
+
+  async function fetchTags(force = false) {
+    if (loaded.value && !force) return items.value
+    loading.value = true
+    try {
+      const data = await $fetch<TagListResponse>('/api/tags', {
+        credentials: 'include'
+      })
+      items.value = data.items
+      loaded.value = true
+      return data.items
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function createTag(name: string, color?: string | null) {
+    const data = await $fetch<TagResponse>('/api/tags', {
+      method: 'POST',
+      credentials: 'include',
+      body: { name, color }
+    })
+    await fetchTags(true)
+    return data.tag
+  }
+
+  async function updateTag(id: number, patch: { name?: string, color?: string | null }) {
+    const data = await $fetch<TagResponse>(`/api/tags/${id}`, {
+      method: 'PATCH',
+      credentials: 'include',
+      body: patch
+    })
+    await fetchTags(true)
+    return data.tag
+  }
+
+  async function deleteTag(id: number) {
+    await $fetch(`/api/tags/${id}`, {
+      method: 'DELETE',
+      credentials: 'include'
+    })
+    await fetchTags(true)
+  }
+
+  async function mergeTags(sourceIds: number[], targetId: number) {
+    const data = await $fetch<TagResponse>('/api/tags/merge', {
+      method: 'POST',
+      credentials: 'include',
+      body: { sourceIds, targetId }
+    })
+    await fetchTags(true)
+    return data.tag
+  }
+
+  async function addTagsToImage(key: string, tagIds: number[]) {
+    const data = await $fetch<{ tags: ImageTag[] }>('/api/images/tags', {
+      method: 'POST',
+      credentials: 'include',
+      body: { key, tagIds }
+    })
+    return data.tags
+  }
+
+  async function setImageTags(key: string, tagIds: number[]) {
+    const data = await $fetch<{ tags: ImageTag[] }>('/api/images/tags', {
+      method: 'PATCH',
+      credentials: 'include',
+      body: { key, tagIds }
+    })
+    return data.tags
+  }
+
+  async function removeTagFromImage(key: string, tagId: number) {
+    const data = await $fetch<{ tags: ImageTag[] }>('/api/images/tags', {
+      method: 'DELETE',
+      credentials: 'include',
+      body: { key, tagId }
+    })
+    return data.tags
+  }
+
+  async function batchUpdateTags(
+    keys: string[],
+    tagIds: number[],
+    action: 'add' | 'remove' = 'add'
+  ) {
+    return $fetch<{ success: boolean, updated: number }>('/api/images/batch-tags', {
+      method: 'POST',
+      credentials: 'include',
+      body: { keys, tagIds, action }
+    })
+  }
+
+  return {
+    items,
+    loading,
+    loaded,
+    fetchTags,
+    createTag,
+    updateTag,
+    deleteTag,
+    mergeTags,
+    addTagsToImage,
+    setImageTags,
+    removeTagFromImage,
+    batchUpdateTags
+  }
+}
diff --git a/app/composables/useUploadPreferences.ts b/app/composables/useUploadPreferences.ts
index 81668a9..f9bc6be 100644
--- a/app/composables/useUploadPreferences.ts
+++ b/app/composables/useUploadPreferences.ts
@@ -1,19 +1,21 @@
 const STORAGE_KEY = 'pichost.upload-preferences'
 
-export type CopyFormat = 'url' | 'markdown' | 'html'
+export type CopyFormat = 'url' | 'markdown' | 'html' | 'bbcode'
 
 export interface UploadPreferences {
   compressEnabled: boolean
   autoCopyMarkdown: boolean
   copyFormat: CopyFormat
   clientWebpQuality: number
+  lastTagIds: number[]
 }
 
 const DEFAULTS: UploadPreferences = {
   compressEnabled: false,
   autoCopyMarkdown: false,
   copyFormat: 'markdown',
-  clientWebpQuality: 80
+  clientWebpQuality: 80,
+  lastTagIds: []
 }
 
 function clampQuality(value: unknown): number {
@@ -23,7 +25,7 @@ function clampQuality(value: unknown): number {
 }
 
 function isCopyFormat(value: unknown): value is CopyFormat {
-  return value === 'url' || value === 'markdown' || value === 'html'
+  return value === 'url' || value === 'markdown' || value === 'html' || value === 'bbcode'
 }
 
 function readStored(): UploadPreferences {
@@ -37,7 +39,10 @@ function readStored(): UploadPreferences {
       compressEnabled: parsed.compressEnabled === true,
       autoCopyMarkdown: parsed.autoCopyMarkdown === true,
       copyFormat: isCopyFormat(parsed.copyFormat) ? parsed.copyFormat : DEFAULTS.copyFormat,
-      clientWebpQuality: clampQuality(parsed.clientWebpQuality)
+      clientWebpQuality: clampQuality(parsed.clientWebpQuality),
+      lastTagIds: Array.isArray(parsed.lastTagIds)
+        ? parsed.lastTagIds.filter(id => Number.isInteger(id) && id > 0)
+        : DEFAULTS.lastTagIds
     }
   } catch {
     return { ...DEFAULTS }
@@ -54,6 +59,7 @@ export function useUploadPreferences() {
   const autoCopyMarkdown = useState('upload-pref-auto-md', () => DEFAULTS.autoCopyMarkdown)
   const copyFormat = useState<CopyFormat>('upload-pref-copy-format', () => DEFAULTS.copyFormat)
   const clientWebpQuality = useState('upload-pref-webp-quality', () => DEFAULTS.clientWebpQuality)
+  const lastTagIds = useState<number[]>('upload-pref-last-tag-ids', () => DEFAULTS.lastTagIds)
   const loaded = useState('upload-pref-loaded', () => false)
 
   function loadPreferences() {
@@ -62,6 +68,7 @@ export function useUploadPreferences() {
     autoCopyMarkdown.value = stored.autoCopyMarkdown
     copyFormat.value = stored.copyFormat
     clientWebpQuality.value = stored.clientWebpQuality
+    lastTagIds.value = stored.lastTagIds
     loaded.value = true
   }
 
@@ -74,11 +81,20 @@ export function useUploadPreferences() {
       compressEnabled: compressEnabled.value,
       autoCopyMarkdown: autoCopyMarkdown.value,
       copyFormat: copyFormat.value,
-      clientWebpQuality: clampQuality(clientWebpQuality.value)
+      clientWebpQuality: clampQuality(clientWebpQuality.value),
+      lastTagIds: lastTagIds.value
     })
   }
 
-  watch([compressEnabled, autoCopyMarkdown, copyFormat, clientWebpQuality], () => {
+  function resetToDefaults() {
+    compressEnabled.value = DEFAULTS.compressEnabled
+    autoCopyMarkdown.value = DEFAULTS.autoCopyMarkdown
+    copyFormat.value = DEFAULTS.copyFormat
+    clientWebpQuality.value = DEFAULTS.clientWebpQuality
+    savePreferences()
+  }
+
+  watch([compressEnabled, autoCopyMarkdown, copyFormat, clientWebpQuality, lastTagIds], () => {
     if (loaded.value) {
       savePreferences()
     }
@@ -89,8 +105,10 @@ export function useUploadPreferences() {
     autoCopyMarkdown,
     copyFormat,
     clientWebpQuality,
+    lastTagIds,
     loaded,
     loadPreferences,
-    savePreferences
+    savePreferences,
+    resetToDefaults
   }
 }
diff --git a/app/pages/gallery.vue b/app/pages/gallery.vue
index 8864cd4..33c5d38 100644
--- a/app/pages/gallery.vue
+++ b/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"
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 1f73d79..217f383 100644
--- a/app/pages/index.vue
+++ b/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>
diff --git a/app/pages/settings/index.vue b/app/pages/settings/index.vue
index 670bcf3..ee7a43f 100644
--- a/app/pages/settings/index.vue
+++ b/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>
diff --git a/app/types/image.ts b/app/types/image.ts
index 19aba80..a0b05da 100644
--- a/app/types/image.ts
+++ b/app/types/image.ts
@@ -44,6 +44,17 @@ export interface ImageItem {
   }
   /** 上传来源：网页或 API（来自活动日志） */
   uploadSource?: 'web' | 'api'
+  /** 图片标签 */
+  tags?: ImageTag[]
+}
+
+export interface ImageTag {
+  id: number
+  name: string
+  color: string
+  imageCount?: number
+  createdAt?: string
+  lastUsedAt?: string | null
 }
 
 export interface UploadErrorItem {
diff --git a/app/types/logs.ts b/app/types/logs.ts
index 2447fa6..1fca20d 100644
--- a/app/types/logs.ts
+++ b/app/types/logs.ts
@@ -1,5 +1,6 @@
-export type LogAction = 'upload' | 'delete'
-export type LogSource = 'web' | 'api'
+export type LogAction = 'upload' | 'delete' | 'login' | 'edit' | 'settings' | 'tags'
+export type LogSource = 'web' | 'api' | 'admin'
+export type LogStatus = 'success' | 'failure'
 
 export interface ActivityLogStorage {
   id: string
@@ -18,6 +19,8 @@ export interface ActivityLogItem {
   userId: number | null
   username: string | null
   storage: ActivityLogStorage | null
+  ipAddress: string | null
+  status: LogStatus
   createdAt: string
 }
 
diff --git a/app/types/settings.ts b/app/types/settings.ts
index 141889b..7717793 100644
--- a/app/types/settings.ts
+++ b/app/types/settings.ts
@@ -1,5 +1,5 @@
-export type SettingsTab = 'basic' | 'domains' | 'access' | 'logs'
+export type SettingsTab = 'basic' | 'domains' | 'access' | 'tags' | 'logs'
 
-export const ADMIN_SETTINGS_TABS: SettingsTab[] = ['basic', 'domains', 'access', 'logs']
+export const ADMIN_SETTINGS_TABS: SettingsTab[] = ['basic', 'domains', 'access', 'tags', 'logs']
 
-export const USER_SETTINGS_TABS: SettingsTab[] = ['logs']
+export const USER_SETTINGS_TABS: SettingsTab[] = ['tags', 'logs']
diff --git a/app/utils/image-display.ts b/app/utils/image-display.ts
index e7e45fc..40af50a 100644
--- a/app/utils/image-display.ts
+++ b/app/utils/image-display.ts
@@ -22,3 +22,7 @@ export function formatImageDimensions(width: number | null, height: number | nul
   if (!width || !height) return null
   return `${width} × ${height} px`
 }
+
+export function buildImageBbcode(url: string): string {
+  return `[img]${url}[/img]`
+}
diff --git a/app/utils/tag-colors.ts b/app/utils/tag-colors.ts
new file mode 100644
index 0000000..776cf5c
--- /dev/null
+++ b/app/utils/tag-colors.ts
@@ -0,0 +1,136 @@
+export const TAG_COLOR_PRESETS = [
+  '#22c55e',
+  '#3b82f6',
+  '#f59e0b',
+  '#ef4444',
+  '#8b5cf6',
+  '#06b6d4',
+  '#ec4899',
+  '#84cc16',
+  '#f97316',
+  '#6366f1',
+  '#14b8a6',
+  '#64748b'
+] as const
+
+export const TAG_COLOR_CANDIDATE_COUNT = 8
+export const TAG_COLOR_EDIT_CANDIDATE_COUNT = 3
+
+export function defaultTagColor(tagId: number): string {
+  return TAG_COLOR_PRESETS[tagId % TAG_COLOR_PRESETS.length]!
+}
+
+function normalizeHexColor(color: string | null | undefined): string | null {
+  if (!color) return null
+  const trimmed = color.trim().toLowerCase()
+  if (!trimmed) return null
+  const withHash = trimmed.startsWith('#') ? trimmed : `#${trimmed}`
+  return /^#[0-9a-f]{6}$/.test(withHash) ? withHash : null
+}
+
+/** 解析标签展示色，无效时回退到默认色 */
+export function resolveTagHexColor(
+  color: string | null | undefined,
+  fallback?: string
+): string {
+  return normalizeHexColor(color) ?? fallback ?? TAG_COLOR_PRESETS[0]!
+}
+
+export function usedPresetColorSet(usedColors: (string | null | undefined)[]): Set<string> {
+  const used = new Set<string>()
+  for (const color of usedColors) {
+    const normalized = normalizeHexColor(color)
+    if (!normalized) continue
+    if (TAG_COLOR_PRESETS.some(preset => preset.toLowerCase() === normalized)) {
+      used.add(normalized)
+    }
+  }
+  return used
+}
+
+function shuffleColors<T extends string>(colors: readonly T[]): T[] {
+  const items = [...colors]
+  for (let index = items.length - 1; index > 0; index--) {
+    const swapIndex = Math.floor(Math.random() * (index + 1))
+    const current = items[index]!
+    items[index] = items[swapIndex]!
+    items[swapIndex] = current
+  }
+  return items
+}
+
+/**
+ * 新增标签时的备选色：优先从未占用预设中随机取满 count 个；
+ * 不足时用其余预设随机补足（保证始终有 7～8 个可选项）。
+ */
+export function pickTagColorCandidates(
+  usedColors: (string | null | undefined)[],
+  count = TAG_COLOR_CANDIDATE_COUNT
+): string[] {
+  const used = usedPresetColorSet(usedColors)
+  const unused = shuffleColors(TAG_COLOR_PRESETS.filter(preset => !used.has(preset.toLowerCase())))
+  const usedPresets = shuffleColors(TAG_COLOR_PRESETS.filter(preset => used.has(preset.toLowerCase())))
+
+  const candidates: string[] = []
+  for (const color of unused) {
+    if (candidates.length >= count) break
+    candidates.push(color.toLowerCase())
+  }
+  for (const color of usedPresets) {
+    if (candidates.length >= count) break
+    candidates.push(color.toLowerCase())
+  }
+
+  return candidates.length > 0 ? candidates : shuffleColors(TAG_COLOR_PRESETS).slice(0, count).map(c => c.toLowerCase())
+}
+
+/** 从备选色中优先选未占用色作为默认；若均已占用则随机选一 */
+export function pickDefaultTagColorFromCandidates(
+  candidates: string[],
+  usedColors: (string | null | undefined)[]
+): string {
+  if (!candidates.length) {
+    return pickRandomUnusedTagColor(usedColors)
+  }
+  const used = usedPresetColorSet(usedColors)
+  const unused = candidates.filter(color => !used.has(color.toLowerCase()))
+  const pool = unused.length > 0 ? unused : candidates
+  return pool[Math.floor(Math.random() * pool.length)]!.toLowerCase()
+}
+
+/** 从未被占用的预设色中随机取一色；若预设色均已占用则退回全量随机 */
+export function pickRandomUnusedTagColor(usedColors: (string | null | undefined)[]): string {
+  const used = usedPresetColorSet(usedColors)
+  const available = TAG_COLOR_PRESETS.filter(preset => !used.has(preset.toLowerCase()))
+  const pool = available.length > 0 ? available : TAG_COLOR_PRESETS
+  return pool[Math.floor(Math.random() * pool.length)]!.toLowerCase()
+}
+
+/** 颜色选择器展示的预设：排除已被其他标签占用的颜色，但保留当前选中色 */
+export function visibleTagColorPresets(
+  usedColors: (string | null | undefined)[],
+  currentColor?: string | null
+): readonly string[] {
+  const used = usedPresetColorSet(usedColors)
+  const current = normalizeHexColor(currentColor)
+  return TAG_COLOR_PRESETS.filter((preset) => {
+    const lower = preset.toLowerCase()
+    return !used.has(lower) || lower === current
+  })
+}
+
+export function tagPillStyle(color: string | null | undefined, selected = false, fallback?: string) {
+  const hex = resolveTagHexColor(color, fallback)
+  if (selected) {
+    return {
+      backgroundColor: hex,
+      borderColor: hex,
+      color: '#ffffff'
+    }
+  }
+  return {
+    borderColor: `${hex}55`,
+    backgroundColor: `${hex}18`,
+    color: hex
+  }
+}
diff --git a/docs-site/en/guide/api.md b/docs-site/en/guide/api.md
index 11c6c08..d4e5a02 100644
--- a/docs-site/en/guide/api.md
+++ b/docs-site/en/guide/api.md
@@ -2,6 +2,8 @@
 
 PicHost exposes REST endpoints and a Twikoo-compatible upload. After sign-in, open **API** in the nav: a sidebar lists endpoints and token controls, the center shows parameters and copyable cURL, and the right panel supports **live debugging**.
 
+![API docs and debugger](/screenshots/api.png)
+
 ## Authentication
 
 All REST calls use:
@@ -28,9 +30,12 @@ Upload one or more images via `image`; also accepts `file`, `files`. Stored unde
 ```bash
 curl -X POST "https://admin.example.com/api/images/upload" \
   -H "Auth-Token: YOUR_TOKEN" \
-  -F "image=@./demo.png"
+  -F "image=@./demo.png" \
+  -F 'tagIds=[1,2]'
 ```
 
+Optional form field `tagIds`: JSON array string or repeated fields. Tags do **not** change storage paths under `images/`.
+
 ### 2. List images
 
 `GET /api/images`
@@ -42,6 +47,8 @@ curl "https://admin.example.com/api/images?limit=20&page=1" \
   -H "Auth-Token: YOUR_TOKEN"
 ```
 
+Optional query: `tagIds` (comma-separated, OR by default), `tagMode=and`, `untagged=1`. Each item includes a `tags` array.
+
 ### 3. Search images
 
 `GET /api/images/search`
@@ -77,6 +84,27 @@ curl -X POST "https://admin.example.com/api/images/batch-delete" \
   -d '{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}'
 ```
 
+### 6. Tags
+
+| Method | Path | Description |
+| ------ | ---- | ----------- |
+| `GET` | `/api/tags` | List current user’s tags |
+| `POST` | `/api/tags` | Create `{ "name": "work", "color": "#22c55e" }` |
+| `PATCH` | `/api/tags/:id` | Rename or recolor |
+| `DELETE` | `/api/tags/:id` | Delete tag (images remain) |
+| `POST` | `/api/tags/merge` | Merge tags into a target |
+
+### 7. Image tags
+
+| Method | Path | Description |
+| ------ | ---- | ----------- |
+| `POST` | `/api/images/tags` | Add tags to an image |
+| `PATCH` | `/api/images/tags` | Replace tag set |
+| `DELETE` | `/api/images/tags` | Remove one tag |
+| `POST` | `/api/images/batch-tags` | Batch add/remove |
+
+`GET /api/stats` accepts the same tag filter query params as the list API.
+
 ## Errors
 
 REST responses are JSON with `code` and `message` (`UNAUTHORIZED`, `FORBIDDEN`, `INVALID_REQUEST`, etc.). Twikoo uses EasyImage-compatible JSON.
diff --git a/docs-site/en/guide/changelog.md b/docs-site/en/guide/changelog.md
index 0f19b67..6750441 100644
--- a/docs-site/en/guide/changelog.md
+++ b/docs-site/en/guide/changelog.md
@@ -4,6 +4,24 @@ Version history and notable changes. The full log is also in the repo root [CHAN
 
 ---
 
+## [1.4.0] — 2026-09-09
+
+### Added
+
+- **Tags**: per-user colored tags; Settings management; batch tagging on upload/gallery; OR / AND gallery filters
+- **Activity log**: login, delete, settings, tag operations; date and user filters
+- **API**: tag and tagging endpoints; upload `tagIds`; list/stats tag filters
+
+### Docs
+
+- Screenshots and README updated for v1.4 UI
+
+## [1.3.0] — 2026-09-07
+
+### Added
+
+- **Site backup / restore / cross-backend sync** with job center; CLI `backup-export`, `backup-restore`, `storage-sync`
+
 ## [1.2.8] — 2026-09-04
 
 ### Improved
diff --git a/docs-site/en/guide/configuration.md b/docs-site/en/guide/configuration.md
index a23c3b9..690ccfd 100644
--- a/docs-site/en/guide/configuration.md
+++ b/docs-site/en/guide/configuration.md
@@ -1,6 +1,8 @@
 # Environment variables
 
-Configure PicHost via environment variables (Docker / `.env`) or the in-app **Settings** page. Admins use **Settings** (`/settings`) with sidebar sections **Basic**, **Domains & paths**, **Access control**, and **Activity log**. Most values prefer **SQLite** when saved; some env vars override or lock UI editing.
+Configure PicHost via environment variables (Docker / `.env`) or the in-app **Settings** page. Admins use **Settings** (`/settings`) with sidebar sections **Basic**, **Domains & paths**, **Access control**, **Tag management**, and **Activity log**. Most values prefer **SQLite** when saved; some env vars override or lock UI editing.
+
+![Settings](/screenshots/settings-en.png)
 
 ## Priority overview
 
diff --git a/docs-site/en/guide/getting-started.md b/docs-site/en/guide/getting-started.md
index 867d2b5..d593d91 100644
--- a/docs-site/en/guide/getting-started.md
+++ b/docs-site/en/guide/getting-started.md
@@ -37,7 +37,9 @@ See `docker-compose.yml` in the repository.
    - **Create admin** — username, password, optional registration and dual-domain options.
    - **Restore backup** — upload a `.phost.tar.gz` full-site package (replaces current data; re-enter cloud storage secrets after restore).
 3. (Optional) Configure site URL, image URL, Referer rules — see [Environment variables](./configuration.md) and [Dual-domain separation](./domain-separation.md).
-4. Upload from the home page; use the top nav for **Gallery**, **Storage** (admin), **Settings**, and **API**.
+4. Upload from the home page via **drag-and-drop, file picker, or Ctrl+V**; copy direct/Markdown/HTML/BBCode links from the results panel and use **batch tagging**. Top nav: **Gallery**, **Storage** (admin), **Settings**, **API**.
+
+![Upload](/screenshots/upload.png)
 
 | Create admin | Restore from backup |
 | :----------: | :-----------------: |
diff --git a/docs-site/en/guide/index.md b/docs-site/en/guide/index.md
index d1089ad..e64333c 100644
--- a/docs-site/en/guide/index.md
+++ b/docs-site/en/guide/index.md
@@ -12,11 +12,23 @@ Welcome to the PicHost user guide. This site is the single source of truth; the
 
 ## Screenshots
 
-**main** has no public demo. Below are current product screenshots (v1.3.0+).
+**main** has no public demo. Below are current product screenshots (v1.4.0+).
 
-| API | Gallery (detail) |
-| :-: | :--------------: |
-| ![API](/screenshots/api.png) | ![Gallery](/screenshots/gallery.png) |
+| Upload | Batch tagging |
+| :----: | :-----------: |
+| ![Upload](/screenshots/upload.png) | ![Batch tagging](/screenshots/tags-batch.png) |
+
+| Upload results (tagged) | API |
+| :---------------------: | :-: |
+| ![Upload results](/screenshots/upload-tags.jpg) | ![API](/screenshots/api.png) |
+
+| Gallery (grid) | Gallery (list) |
+| :------------: | :------------: |
+| ![Gallery grid](/screenshots/gallery.png) | ![Gallery list](/screenshots/gallery-list.png) |
+
+| Image detail | Tag management |
+| :----------: | :------------: |
+| ![Image detail](/screenshots/gallery-detail.png) | ![Tag management](/screenshots/tags.png) |
 
 | Storage | Settings |
 | :-----: | :-------: |
diff --git a/docs-site/en/guide/local-dev.md b/docs-site/en/guide/local-dev.md
index 35d92d1..451710a 100644
--- a/docs-site/en/guide/local-dev.md
+++ b/docs-site/en/guide/local-dev.md
@@ -52,4 +52,4 @@ npm run docs:build
 npm run docs:preview
 ```
 
-Sources live in `docs-site/`; screenshot sources are in `docs/screenshots/` (including `login.png`, `setup.png`, `setup-restore.png`, etc.), copied to `docs-site/public/screenshots/` before build. Live docs: <https://o96u.github.io/PicHost/>
+Sources live in `docs-site/`; screenshot sources are in `docs/screenshots/` (including `upload.png`, `gallery.png`, `tags.png`, `api.png`, `storage.png`, `settings.png`, `logs.png`, `setup.png`, etc.), copied to `docs-site/public/screenshots/` before build. Live docs: <https://o96u.github.io/PicHost/>
diff --git a/docs-site/en/guide/storage.md b/docs-site/en/guide/storage.md
index f904203..6a4c453 100644
--- a/docs-site/en/guide/storage.md
+++ b/docs-site/en/guide/storage.md
@@ -18,6 +18,8 @@ PicHost supports **local disk** and **S3-compatible object storage** (Cloudflare
 
 All **keys** start with `images/`. The upload API does **not** accept a `folder` parameter.
 
+**Classification** uses per-user **tags** in SQLite (`tags` / `image_tags`); disk paths are unchanged. See [API](./api.md#6-tags).
+
 ## Adding a backend
 
 1. Sign in as admin → **Storage** → **Add backend**.
@@ -54,7 +56,9 @@ Copied links use **IMAGE_BASE_URL**. “Hide folder prefix” may shorten URLs;
 ## Usage & gallery filter
 
 - Per-backend usage on the Storage page
-- Gallery filters by **storage backend** and **upload source**; grid/list view toggle; click a thumbnail for the detail modal (dimensions, storage path, link formats)
+- Gallery filters by **storage backend**, **upload source**, and **tags**; grid/list view toggle; click a thumbnail for the detail modal (dimensions, storage path, tags, link formats)
+
+![Gallery grid](/screenshots/gallery.png) ![Gallery list](/screenshots/gallery-list.png) ![Image detail](/screenshots/gallery-detail.png)
 
 ## Backup & migration (v1.3.0+)
 
diff --git a/docs-site/en/guide/users-and-permissions.md b/docs-site/en/guide/users-and-permissions.md
index c154d0a..01bb8b7 100644
--- a/docs-site/en/guide/users-and-permissions.md
+++ b/docs-site/en/guide/users-and-permissions.md
@@ -16,6 +16,7 @@ PicHost uses role-based access control (RBAC): **admin** and **user**. Enforceme
 | Global API token | ✓ | — |
 | Personal API token | ✓ | ✓ |
 | Gallery stats overview (incl. user count) | ✓ | partial |
+| Tag management (Settings → Tag management) | ✓ | — |
 | Activity log (Settings → Activity log) | ✓ | — |
 
 Regular users see **API**, **Gallery** in the nav; user menu: **Change password**, **Sign out**.
@@ -39,6 +40,20 @@ Regular users see **API**, **Gallery** in the nav; user menu: **Change password*
 - If verification is misconfigured: `docker exec pichost slider` resets to the local slider
 - Login rate limiting
 
+## Tags
+
+- Tags are **per-user**: regular users manage and filter only their own tags and images
+- After upload on the home page, **tag one image** or use **batch tagging**; the gallery supports tag filters (OR / AND) and batch tagging
+- Admins manage tags under **Settings → Tag management** (create, recolor, merge, delete). Tags classify images only and **do not change** `images/` storage paths
+
+![Batch tagging](/screenshots/tags-batch.png) ![Tag management](/screenshots/tags.png)
+
+## Activity log
+
+Admins review uploads, deletes, logins, settings changes, tag operations, and more under **Settings → Activity log**, with filters for date, user, action type, and source.
+
+![Activity log](/screenshots/logs.png)
+
 ## Upload preferences & auto-delete
 
 - **Upload preferences**: admins configure client compression and auto-copy in **Settings → Basic**; regular users can flip the home upload card for personal preferences
diff --git a/docs-site/guide/api.md b/docs-site/guide/api.md
index e36ad1b..762e53a 100644
--- a/docs-site/guide/api.md
+++ b/docs-site/guide/api.md
@@ -2,6 +2,8 @@
 
 PicHost 提供 REST 接口与 Twikoo 兼容端点。登录后打开顶栏 **API** 页：左侧为接口目录与 Token 管理，中间为参数说明与 cURL 示例，右侧可 **在线调试** 发送请求。
 
+![API 文档与在线调试](/screenshots/api.png)
+
 ## 鉴权
 
 所有 REST 接口使用请求头：
@@ -28,9 +30,12 @@ Auth-Token: YOUR_TOKEN
 ```bash
 curl -X POST "https://admin.example.com/api/images/upload" \
   -H "Auth-Token: YOUR_TOKEN" \
-  -F "image=@./demo.png"
+  -F "image=@./demo.png" \
+  -F 'tagIds=[1,2]'
 ```
 
+可选表单字段 `tagIds`：JSON 数组字符串（如 `[1,2]`）或重复字段，上传成功后自动打标。存储路径仍为 `images/年/月/id.webp`，**不会**因标签创建子目录。
+
 ### 2. 获取图片列表
 
 `GET /api/images`
@@ -42,6 +47,16 @@ curl "https://admin.example.com/api/images?limit=20&page=1" \
   -H "Auth-Token: YOUR_TOKEN"
 ```
 
+可选查询参数：
+
+| 参数 | 说明 |
+| ---- | ---- |
+| `tagIds` | 逗号分隔的标签 ID，默认 **OR**（含任一标签） |
+| `tagMode` | `and` 时多标签取交集 |
+| `untagged` | `1` 仅返回无标签图片 |
+
+响应 `items[]` 含 `tags` 数组（`id`、`name`、`color`）。
+
 ### 3. 搜索图片
 
 `GET /api/images/search`
@@ -77,6 +92,27 @@ curl -X POST "https://admin.example.com/api/images/batch-delete" \
   -d '{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}'
 ```
 
+### 6. 标签管理
+
+| 方法 | 路径 | 说明 |
+| ---- | ---- | ---- |
+| `GET` | `/api/tags` | 当前用户标签列表（含 `imageCount`） |
+| `POST` | `/api/tags` | 创建 `{ "name": "工作", "color": "#22c55e" }` |
+| `PATCH` | `/api/tags/:id` | 改名称/颜色 |
+| `DELETE` | `/api/tags/:id` | 删除标签（不删图片） |
+| `POST` | `/api/tags/merge` | `{ "sourceIds": [2,3], "targetId": 1 }` |
+
+### 7. 图片打标
+
+| 方法 | 路径 | 说明 |
+| ---- | ---- | ---- |
+| `POST` | `/api/images/tags` | `{ "key": "images/…", "tagIds": [1,2] }` 追加 |
+| `PATCH` | `/api/images/tags` | 整体替换标签集合 |
+| `DELETE` | `/api/images/tags` | `key` + `tagId` 移除单个 |
+| `POST` | `/api/images/batch-tags` | `{ "keys": [], "tagIds": [], "action": "add" \| "remove" }` |
+
+`GET /api/stats` 支持与列表相同的 `tagIds` / `tagMode` / `untagged` 筛选，统计与当前筛选一致。
+
 ## 错误格式
 
 REST 接口返回 JSON，含 `code` 与 `message`（如 `UNAUTHORIZED`、`FORBIDDEN`、`INVALID_REQUEST`）。Twikoo 端点使用 EasyImage 兼容 JSON 格式。
diff --git a/docs-site/guide/changelog.md b/docs-site/guide/changelog.md
index c4a548a..0865574 100644
--- a/docs-site/guide/changelog.md
+++ b/docs-site/guide/changelog.md
@@ -4,6 +4,24 @@ PicHost 版本历史与重要变更说明。完整记录亦见仓库根目录 [C
 
 ---
 
+## [1.4.0] — 2026-09-09
+
+### 新增
+
+- **标签**：每用户彩色标签；设置页管理；上传/图库批量打标；图库 OR / AND 筛选
+- **操作日志**：登录、删除、设置、标签等操作；日期与用户筛选
+- **API**：标签与打标接口；上传 `tagIds`；列表/统计标签筛选
+
+### 文档
+
+- 截图与 README 同步 v1.4 界面
+
+## [1.3.0] — 2026-09-07
+
+### 新增
+
+- **站点备份 / 恢复 / 跨后端同步** 与任务中心；运维 CLI `backup-export`、`backup-restore`、`storage-sync`
+
 ## [1.2.8] — 2026-09-04
 
 ### 改进
diff --git a/docs-site/guide/configuration.md b/docs-site/guide/configuration.md
index 5641e0b..ab9313f 100644
--- a/docs-site/guide/configuration.md
+++ b/docs-site/guide/configuration.md
@@ -1,4 +1,6 @@
-PicHost 支持通过环境变量（Docker / `.env`）与后台 **设置** 页配置。管理员在 **设置与偏好**（`/settings`）左侧切换 **基础设置**、**域名与路径**、**访问控制**、**操作日志**；多数项 **SQLite 优先**；部分项环境变量可覆盖或锁定后台编辑。
+PicHost 支持通过环境变量（Docker / `.env`）与后台 **设置** 页配置。管理员在 **设置与偏好**（`/settings`）左侧切换 **基础设置**、**域名与路径**、**访问控制**、**标签管理**、**操作日志**；多数项 **SQLite 优先**；部分项环境变量可覆盖或锁定后台编辑。
+
+![基础设置](/screenshots/settings.png)
 
 ## 优先级总览
 
diff --git a/docs-site/guide/getting-started.md b/docs-site/guide/getting-started.md
index e876817..e11b2c9 100644
--- a/docs-site/guide/getting-started.md
+++ b/docs-site/guide/getting-started.md
@@ -37,7 +37,9 @@ docker compose up -d
    - **创建管理员**：填写用户名与密码，可选开放注册、双域名等。
    - **从备份恢复**：上传 `.phost.tar.gz` 整站备份包（覆盖当前数据；云存储密钥需恢复后重新填写）。
 3. （可选）配置网站域名、图片域名、防盗链等 — 详见 [环境变量](./configuration.md) 与 [双域名分离](./domain-separation.md)。
-4. 登录后可在首页上传图片；顶栏可进入 **图库**、**存储**（管理员）、**设置**、**API**。
+4. 登录后可在首页 **拖拽 / 点击 / Ctrl+V** 上传图片；上传结果区支持复制直链/Markdown/HTML/BBCode，并可 **批量打标签**。顶栏可进入 **图库**、**存储**（管理员）、**设置**、**API**。
+
+![上传](/screenshots/upload.png)
 
 | 创建管理员 | 从备份恢复 |
 | :--------: | :--------: |
diff --git a/docs-site/guide/index.md b/docs-site/guide/index.md
index 7524672..c252e7e 100644
--- a/docs-site/guide/index.md
+++ b/docs-site/guide/index.md
@@ -12,15 +12,27 @@
 
 ## 截图预览
 
-**main** 分支暂无公网演示，以下为当前产品界面（v1.3.0+）。
+**main** 分支暂无公网演示，以下为当前产品界面（v1.4.0+）。
 
-| API | 图库（详情） |
+| 上传 | 批量打标 |
 | :-: | :-: |
-| ![API](/screenshots/api.png) | ![图库](/screenshots/gallery.png) |
+| ![上传](/screenshots/upload.png) | ![批量打标](/screenshots/tags-batch.png) |
 
-| 存储管理 | 设置与偏好 |
-| :------: | :--------: |
-| ![存储管理](/screenshots/storage.png) | ![设置与偏好](/screenshots/settings.png) |
+| 上传结果（含标签） | API |
+| :----------------: | :-: |
+| ![上传结果](/screenshots/upload-tags.jpg) | ![API](/screenshots/api.png) |
+
+| 图库（网格） | 图库（列表） |
+| :----------: | :----------: |
+| ![图库网格](/screenshots/gallery.png) | ![图库列表](/screenshots/gallery-list.png) |
+
+| 图片详情 | 标签管理 |
+| :------: | :------: |
+| ![图片详情](/screenshots/gallery-detail.png) | ![标签管理](/screenshots/tags.png) |
+
+| 存储管理 | 基础设置 |
+| :------: | :------: |
+| ![存储管理](/screenshots/storage.png) | ![基础设置](/screenshots/settings.png) |
 
 | 首次设置 | 从备份恢复 |
 | :------: | :--------: |
diff --git a/docs-site/guide/local-dev.md b/docs-site/guide/local-dev.md
index 093e03a..5ce50e8 100644
--- a/docs-site/guide/local-dev.md
+++ b/docs-site/guide/local-dev.md
@@ -52,4 +52,4 @@ npm run docs:build    # 构建静态站点
 npm run docs:preview  # 预览构建结果
 ```
 
-文档源码在 `docs-site/`；截图源文件在 `docs/screenshots/`（含 `login.png`、`setup.png`、`setup-restore.png` 等），构建前会复制到 `docs-site/public/screenshots/`。在线文档：<https://o96u.github.io/PicHost/>
+文档源码在 `docs-site/`；截图源文件在 `docs/screenshots/`（含 `upload.png`、`gallery.png`、`tags.png`、`api.png`、`storage.png`、`settings.png`、`logs.png`、`setup.png` 等），构建前会复制到 `docs-site/public/screenshots/`。在线文档：<https://o96u.github.io/PicHost/>
diff --git a/docs-site/guide/storage.md b/docs-site/guide/storage.md
index 8969fd7..9d1382e 100644
--- a/docs-site/guide/storage.md
+++ b/docs-site/guide/storage.md
@@ -18,6 +18,8 @@ PicHost 支持 **本地磁盘** 与 **S3 兼容对象存储**（Cloudflare R2、
 
 所有图片 **key** 以 `images/` 开头。上传 API **不再接受** `folder` 参数。
 
+**图片分类**使用每用户 **标签**（`tags` / `image_tags` 表），不改变磁盘路径。图库页按标签筛选；详见 [API 文档](./api.md#6-标签管理)。
+
 ## 添加存储后端
 
 1. 以管理员登录，打开 **存储** → **添加存储**。
@@ -56,7 +58,9 @@ PicHost 支持 **本地磁盘** 与 **S3 兼容对象存储**（Cloudflare R2、
 ## 用量与筛选
 
 - 存储页展示各后端用量（本地扫描目录，对象存储查询 API）
-- 图库可按 **存储后端**、**上传来源** 筛选，支持网格/列表视图切换；点击图片打开详情弹窗（尺寸、存储路径、多格式链接复制）
+- 图库可按 **存储后端**、**上传来源**、**标签** 筛选，支持网格/列表视图切换；点击图片打开详情弹窗（尺寸、存储路径、标签、多格式链接复制）
+
+![图库网格](/screenshots/gallery.png) ![图库列表](/screenshots/gallery-list.png) ![图片详情](/screenshots/gallery-detail.png)
 
 ## 备份与迁移（v1.3.0+）
 
diff --git a/docs-site/guide/users-and-permissions.md b/docs-site/guide/users-and-permissions.md
index 520220c..016d596 100644
--- a/docs-site/guide/users-and-permissions.md
+++ b/docs-site/guide/users-and-permissions.md
@@ -16,6 +16,7 @@ PicHost 使用基于角色的访问控制（RBAC）：**管理员（admin）** 
 | 全局 API Token 管理 | ✓ | — |
 | 个人 API Token | ✓ | ✓ |
 | 图库统计概览（含注册用户数） | ✓ | 部分 |
+| 标签管理（设置 → 标签管理） | ✓ | — |
 | 操作日志（设置 → 操作日志） | ✓ | — |
 
 普通用户顶栏：**API**、**图库**；用户菜单：**修改密码**、**退出登录**。
@@ -39,6 +40,20 @@ PicHost 使用基于角色的访问控制（RBAC）：**管理员（admin）** 
 - 验证配置错误无法登录时：`docker exec pichost slider` 重置为本地滑块
 - 登录失败有速率限制
 
+## 标签
+
+- 标签按 **用户隔离**：普通用户仅管理、筛选自己的标签与图片
+- 首页上传完成后可 **单张打标** 或 **批量打标签**；图库支持按标签筛选（多标签 OR / AND）与批量打标
+- 管理员在 **设置 → 标签管理** 新建、改色、合并、删除标签；标签仅用于分类，**不改变** `images/` 存储路径
+
+![批量打标](/screenshots/tags-batch.png) ![标签管理](/screenshots/tags.png)
+
+## 操作日志
+
+管理员在 **设置 → 操作日志** 查看上传、删除、登录、设置变更、标签操作等记录，支持按日期、用户、操作类型、来源筛选。
+
+![操作日志](/screenshots/logs.png)
+
 ## 上传偏好与自动删除
 
 - **上传偏好**：管理员在 **设置 → 基础设置** 配置客户端预压缩、自动复制链接等；普通用户可在首页上传卡片背面调整个人偏好
diff --git a/docs/screenshots/api.png b/docs/screenshots/api.png
index 1a00f2d..b9bd2c7 100644
Binary files a/docs/screenshots/api.png and b/docs/screenshots/api.png differ
diff --git a/docs/screenshots/gallery-detail.png b/docs/screenshots/gallery-detail.png
new file mode 100644
index 0000000..8b582fd
Binary files /dev/null and b/docs/screenshots/gallery-detail.png differ
diff --git a/docs/screenshots/gallery-list.png b/docs/screenshots/gallery-list.png
new file mode 100644
index 0000000..b676250
Binary files /dev/null and b/docs/screenshots/gallery-list.png differ
diff --git a/docs/screenshots/gallery.jpg b/docs/screenshots/gallery.jpg
new file mode 100644
index 0000000..64126af
Binary files /dev/null and b/docs/screenshots/gallery.jpg differ
diff --git a/docs/screenshots/gallery.png b/docs/screenshots/gallery.png
index 2f401e5..64126af 100644
Binary files a/docs/screenshots/gallery.png and b/docs/screenshots/gallery.png differ
diff --git a/docs/screenshots/logs.png b/docs/screenshots/logs.png
index 01ad4b6..8fdcf56 100644
Binary files a/docs/screenshots/logs.png and b/docs/screenshots/logs.png differ
diff --git a/docs/screenshots/settings-en.png b/docs/screenshots/settings-en.png
index 53e3073..f3304e5 100644
Binary files a/docs/screenshots/settings-en.png and b/docs/screenshots/settings-en.png differ
diff --git a/docs/screenshots/settings.png b/docs/screenshots/settings.png
index 53e3073..f3304e5 100644
Binary files a/docs/screenshots/settings.png and b/docs/screenshots/settings.png differ
diff --git a/docs/screenshots/setup-restore.png b/docs/screenshots/setup-restore.png
index 1bcd4f2..065906e 100644
Binary files a/docs/screenshots/setup-restore.png and b/docs/screenshots/setup-restore.png differ
diff --git a/docs/screenshots/setup.png b/docs/screenshots/setup.png
index a3876e4..6301536 100644
Binary files a/docs/screenshots/setup.png and b/docs/screenshots/setup.png differ
diff --git a/docs/screenshots/storage.png b/docs/screenshots/storage.png
index 231aa34..17a96c3 100644
Binary files a/docs/screenshots/storage.png and b/docs/screenshots/storage.png differ
diff --git a/docs/screenshots/tags-batch.png b/docs/screenshots/tags-batch.png
new file mode 100644
index 0000000..bd424a7
Binary files /dev/null and b/docs/screenshots/tags-batch.png differ
diff --git a/docs/screenshots/tags.png b/docs/screenshots/tags.png
new file mode 100644
index 0000000..f349bde
Binary files /dev/null and b/docs/screenshots/tags.png differ
diff --git a/docs/screenshots/upload-tags.jpg b/docs/screenshots/upload-tags.jpg
new file mode 100644
index 0000000..1eaadd8
Binary files /dev/null and b/docs/screenshots/upload-tags.jpg differ
diff --git a/docs/screenshots/upload.png b/docs/screenshots/upload.png
index 5cfe6f1..c86d72a 100644
Binary files a/docs/screenshots/upload.png and b/docs/screenshots/upload.png differ
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7181479..99d3577 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -166,6 +166,104 @@
     "sessionTitle": "This session",
     "sessionEmpty": "No uploads in this session"
   },
+  "tags": {
+    "column": "Tags",
+    "uploadLabel": "Tags (optional)",
+    "addTag": "Add tag",
+    "searchOrCreate": "Search or create tag",
+    "createNamed": "Create tag \"{name}\"",
+    "created": "Created tag \"{name}\"",
+    "createFailed": "Failed to create tag",
+    "updateFailed": "Failed to update tags",
+    "filterAll": "All tags",
+    "filterSelected": "{n} selected",
+    "filterTitle": "Filter by tag",
+    "manage": "Manage",
+    "manageTitle": "Manage tags",
+    "manageImageTitle": "Manage tags",
+    "manageSubtitle": "Centralized tag management — add, edit, delete, and merge",
+    "newTag": "New tag",
+    "addTag": "Add tag",
+    "mergeTags": "Merge tags",
+    "searchName": "Search tag name",
+    "filterStatusAll": "All statuses",
+    "filterStatusUsed": "In use",
+    "filterStatusUnused": "Unused",
+    "statTotal": "Total tags",
+    "statUsed": "Tags in use",
+    "statUnused": "Unused tags",
+    "statNew7d": "New in 7 days",
+    "colName": "Tag name",
+    "colImageCount": "Images",
+    "colLastUsed": "Last used",
+    "neverUsed": "Never used",
+    "colActions": "Actions",
+    "mergeIntoAction": "Merge into…",
+    "mergeIntoTitle": "Merge into…",
+    "mergeIntoSubtitle": "Merge tag \"{name}\" into another tag",
+    "mergeIntoChoose": "Choose the target tag",
+    "mergeIrreversibleTitle": "This cannot be undone",
+    "mergeIrreversible": "Merged tags are permanently deleted and their images move to the kept tag. This action cannot be reversed.",
+    "mergeConfirmKeep": "Keeping tag \"{name}\"",
+    "mergeWillDelete": "These tags will be deleted: {names}",
+    "totalCount": "{n} tags",
+    "sortByCount": "By count",
+    "sortByName": "By name",
+    "search": "Search tags",
+    "namePlaceholder": "Tag name",
+    "customColor": "Custom color",
+    "pickColor": "Pick a color",
+    "preview": "Preview",
+    "renamed": "Tag renamed",
+    "renameFailed": "Rename failed",
+    "colorFailed": "Failed to update color",
+    "deleted": "Deleted tag \"{name}\"",
+    "deleteFailed": "Failed to delete tag",
+    "deleteConfirmTitle": "Delete tag",
+    "deleteConfirmDesc": "Delete tag \"{name}\"? It will be removed from all images. This cannot be undone.",
+    "mergeSelectAtLeast": "Select at least 2 tags",
+    "mergeHint": "Select multiple tags to merge; images from other tags will move to the kept tag",
+    "mergeSelected": "{n} tags selected",
+    "mergeClear": "Clear selection",
+    "mergeTitle": "Merge tags",
+    "mergeSubtitle": "Combine multiple tags into one",
+    "mergeNote": "Unselected tags will be deleted; their images move to the kept tag",
+    "mergeChooseTarget": "Choose the tag to keep",
+    "mergeAction": "Merge into…",
+    "mergeRow": "Merge",
+    "mergeConfirm": "Confirm merge",
+    "merged": "Tags merged",
+    "mergeFailed": "Merge failed",
+    "untagged": "Untagged",
+    "untaggedAction": "+ Untagged",
+    "unlabeled": "Unlabeled",
+    "selectedLabel": "Selected ({n})",
+    "clearSelected": "Clear",
+    "selectAll": "Select all",
+    "deselectAll": "Deselect all",
+    "existingLabel": "Existing tags ({n})",
+    "commonTags": "Common tags",
+    "recentTags": "Recently used",
+    "moreTags": "{n} more tags",
+    "classifyHint": "Tags are for organization only and do not affect storage paths",
+    "saved": "Tags saved",
+    "saveFailed": "Failed to save tags",
+    "batchTagAll": "Batch tag",
+    "batchAddTitle": "Add tags",
+    "batchAddSubtitle": "{n} images selected",
+    "modeOr": "Any",
+    "modeAnd": "All",
+    "batchTitle": "Batch tags",
+    "batchSubtitle": "Update tags for {n} selected image(s)",
+    "batchAdd": "Add tags",
+    "batchRemove": "Remove tags",
+    "batchSuccess": "Batch update complete",
+    "batchFailed": "Batch update failed",
+    "noMatch": "No matching tags",
+    "emptyHint": "No tags yet — type a name to create one",
+    "settingsLink": "Manage tags in the gallery (create, colors, merge, delete)",
+    "openManage": "Open tag manager"
+  },
   "copy": {
     "url": "URL",
     "markdown": "Markdown",
@@ -206,12 +304,30 @@
     "title": "System settings",
     "pageTitle": "Settings & preferences",
     "pageSubtitle": "Manage system configuration and activity logs",
-    "pageSubtitleBasic": "Manage system configuration and upload preferences",
+    "pageSubtitleBasic": "Configure basic options so PicHost works better for you.",
+    "pageSubtitleDomains": "Configure site and image URLs and upload path rules",
+    "pageSubtitleAccess": "Configure image access policies to prevent hotlink abuse",
+    "pageSubtitleLogs": "View uploads, deletions, edits, and configuration changes",
+    "searchPlaceholder": "Search settings…",
+    "searchEmpty": "No matches",
+    "restoreDefaults": "Restore defaults",
+    "restoredDefaults": "Defaults restored",
+    "refererProtection": "Hotlink protection",
+    "defaultCopyFormatHint": "Link format copied automatically after upload",
+    "systemVersionHint": "Currently running PicHost version",
+    "badgeEnabled": "Enabled",
+    "domainSeparationProxyTitle": "Both domains must resolve to this host",
+    "domainSeparationProxyBody": "Point the site and image URLs to this host and reverse-proxy to port 6892 (Nginx, Caddy, NPM, etc.).",
+    "siteBaseUrlRoleHint": "URL for the admin UI",
+    "imageBaseUrlRoleHint": "URL for serving and displaying images",
+    "imageDomainSection": "Image domain",
     "navBasic": "Basic",
     "navDomains": "Domains & paths",
     "navAccess": "Access control",
+    "navTags": "Tags",
     "navPreferences": "Preferences",
     "navLogs": "Activity log",
+    "pageSubtitleTags": "Create, rename, merge, or delete tags",
     "systemVersion": "Version",
     "checkUpdate": "Check for updates",
     "saveSettings": "Save settings",
@@ -231,6 +347,10 @@
     "refererExamplesSample": "example.com, static.example.com",
     "refererScenarioTitle": "Common use case",
     "refererScenarioDesc": "Allow your main site and static site to embed images",
+    "refererScenario1": "Personal blog embedding images",
+    "refererScenario2": "Corporate site and static CDN",
+    "refererScenario3": "Local development",
+    "refererScenario4": "Leave empty for no restriction",
     "refererEnabled": "Enabled",
     "refererUnrestricted": "Unrestricted",
     "loginVerification": "Login verification",
@@ -594,20 +714,28 @@
   },
   "logs": {
     "pageTitle": "Activity log",
-    "pageSubtitle": "Your upload and delete history",
-    "pageSubtitleAdmin": "Upload and delete history for all users",
+    "pageSubtitle": "Your activity history",
+    "pageSubtitleAdmin": "Activity history for all users",
     "loadFailed": "Failed to load activity log",
     "empty": "No activity yet",
     "entriesUnit": "entries",
     "filterActionAll": "All actions",
     "filterSourceAll": "All sources",
     "filterUserAll": "All users",
-    "searchPlaceholder": "Search filename",
+    "searchPlaceholder": "Search filename, path, or IP",
+    "dateFrom": "Start date",
+    "dateTo": "End date",
+    "dateRangeSeparator": "~",
     "summaryAll": "All · {total} entries, {upload} uploads, {delete} deletes",
     "actionUpload": "Upload",
     "actionDelete": "Delete",
+    "actionLogin": "Login",
+    "actionEdit": "Edit",
+    "actionSettings": "Settings",
+    "actionTags": "Tags",
     "sourceWeb": "Web",
     "sourceApi": "API",
+    "sourceAdmin": "Admin",
     "colTime": "Time",
     "colUser": "User",
     "colStorage": "Storage",
@@ -616,7 +744,11 @@
     "colFile": "File",
     "colFolder": "Folder",
     "colSize": "Size",
-    "colKey": "Path"
+    "colKey": "Path",
+    "colIp": "IP address",
+    "colResult": "Result",
+    "resultSuccess": "Success",
+    "resultFailure": "Failed"
   },
   "image": {
     "empty": "No images",
diff --git a/i18n/locales/zh-CN.json b/i18n/locales/zh-CN.json
index f812646..3aec9c6 100644
--- a/i18n/locales/zh-CN.json
+++ b/i18n/locales/zh-CN.json
@@ -97,7 +97,7 @@
     "confirmPlaceholder": "再次输入密码",
     "allowRegistration": "允许其他用户注册",
     "domainSeparation": "启用后台与图片域名分离",
-    "domainSeparationHint": "管理后台与 API 使用网站域名，图片直链使用独立图片域名",
+    "domainSeparationHint": "启用后，可以使用不同的域名访问后台和图片资源，便于配置 CDN 和自定义域名。",
     "domainSeparationProxyHint": "需将两个域名解析到本机，并通过 Nginx、Caddy、NPM 等反代到端口 6892",
     "domainSeparationProxyExample": "查看示例",
     "siteBaseUrl": "网站域名",
@@ -166,6 +166,104 @@
     "sessionTitle": "本次上传",
     "sessionEmpty": "暂无本次上传"
   },
+  "tags": {
+    "column": "标签",
+    "uploadLabel": "标签（可选）",
+    "addTag": "添加标签",
+    "searchOrCreate": "搜索或创建标签",
+    "createNamed": "创建标签 \"{name}\"",
+    "created": "已创建标签「{name}」",
+    "createFailed": "创建标签失败",
+    "updateFailed": "更新标签失败",
+    "filterAll": "全部标签",
+    "filterSelected": "已选 {n} 个",
+    "filterTitle": "按标签筛选",
+    "manage": "管理",
+    "manageTitle": "管理标签",
+    "manageImageTitle": "管理标签",
+    "manageSubtitle": "集中管理图片标签，支持新增、修改、删除与合并",
+    "newTag": "新建标签",
+    "addTag": "新增标签",
+    "mergeTags": "合并标签",
+    "searchName": "搜索标签名称",
+    "filterStatusAll": "全部状态",
+    "filterStatusUsed": "已使用",
+    "filterStatusUnused": "未使用",
+    "statTotal": "标签总数",
+    "statUsed": "已使用标签",
+    "statUnused": "未使用标签",
+    "statNew7d": "最近 7 天新增",
+    "colName": "标签名称",
+    "colImageCount": "图片数",
+    "colLastUsed": "最近使用",
+    "neverUsed": "从未使用",
+    "colActions": "操作",
+    "mergeIntoAction": "合并到…",
+    "mergeIntoTitle": "合并到…",
+    "mergeIntoSubtitle": "将标签「{name}」合并到其他标签",
+    "mergeIntoChoose": "选择要合并到的目标标签",
+    "mergeIrreversibleTitle": "此操作不可恢复",
+    "mergeIrreversible": "合并后，被合并的标签将被永久删除，其关联图片会归入保留的标签。此操作无法撤销。",
+    "mergeConfirmKeep": "将保留标签「{name}」",
+    "mergeWillDelete": "以下标签将被删除：{names}",
+    "totalCount": "共 {n} 个标签",
+    "sortByCount": "按数量",
+    "sortByName": "按名称",
+    "search": "搜索标签",
+    "namePlaceholder": "标签名称",
+    "customColor": "自定义颜色",
+    "pickColor": "选择颜色",
+    "preview": "预览",
+    "renamed": "标签已重命名",
+    "renameFailed": "重命名失败",
+    "colorFailed": "更新颜色失败",
+    "deleted": "已删除标签「{name}」",
+    "deleteFailed": "删除标签失败",
+    "deleteConfirmTitle": "确认删除标签",
+    "deleteConfirmDesc": "确定删除标签「{name}」？图片上的该标签将被移除，此操作不可恢复。",
+    "mergeSelectAtLeast": "请至少选择 2 个标签",
+    "mergeHint": "勾选多个标签后可合并；其余标签的图片将归入保留的标签",
+    "mergeSelected": "已选 {n} 个标签",
+    "mergeClear": "取消选择",
+    "mergeTitle": "合并标签",
+    "mergeSubtitle": "将多个标签合并为一个",
+    "mergeNote": "未选中的标签将被删除，其图片会归入保留的标签",
+    "mergeChooseTarget": "选择要保留的标签",
+    "mergeAction": "合并为…",
+    "mergeRow": "合并",
+    "mergeConfirm": "确认合并",
+    "merged": "标签已合并",
+    "mergeFailed": "合并失败",
+    "untagged": "无标签",
+    "untaggedAction": "+ 无标签",
+    "unlabeled": "未标记",
+    "selectedLabel": "已选标签 ({n})",
+    "clearSelected": "清空",
+    "selectAll": "全选",
+    "deselectAll": "取消全选",
+    "existingLabel": "已有标签 ({n})",
+    "commonTags": "常用标签",
+    "recentTags": "最近使用",
+    "moreTags": "还有 {n} 个标签",
+    "classifyHint": "标签仅用于分类，不影响图片实际存储路径",
+    "saved": "标签已保存",
+    "saveFailed": "保存标签失败",
+    "batchTagAll": "批量打标签",
+    "batchAddTitle": "添加标签",
+    "batchAddSubtitle": "已选 {n} 张图片",
+    "modeOr": "任一",
+    "modeAnd": "全部",
+    "batchTitle": "批量标签",
+    "batchSubtitle": "为已选 {n} 张图片更新标签",
+    "batchAdd": "添加标签",
+    "batchRemove": "移除标签",
+    "batchSuccess": "批量更新完成",
+    "batchFailed": "批量更新失败",
+    "noMatch": "无匹配标签",
+    "emptyHint": "暂无标签，可输入名称创建",
+    "settingsLink": "在图库中管理标签（新建、改色、合并、删除）",
+    "openManage": "打开标签管理"
+  },
   "copy": {
     "url": "直链",
     "markdown": "Markdown",
@@ -188,30 +286,48 @@
     "back": "返回上传",
     "processing": "图片处理",
     "clientCompress": "客户端预压缩",
-    "clientCompressHint": "上传前在浏览器端压缩（服务端仍会转 WebP）",
+    "clientCompressHint": "在上传前于浏览器端压缩图片，减少上传体积（服务端仍会转 WebP）。",
     "autoDeletePrefix": "自动删除超过",
     "autoDeleteSuffix": "天的图片",
-    "autoDeleteHint": "仅清理开启后上传的图片，不影响此前已存的图片",
+    "autoDeleteHint": "自动清理指定天数前上传的图片，仅对开启后新上传的图片生效。",
     "webpQuality": "WebP 压缩质量",
-    "webpQualityHint": "客户端预压缩质量（1–100），需开启「客户端预压缩」",
+    "webpQualityHint": "转换为 WebP 格式时的图片质量，数值越高画质越好、体积越大。",
     "current": "当前：{n}",
     "qualityHigh": "高质量",
     "qualityMedium": "中等质量",
     "qualityLow": "有损压缩",
     "convenience": "便捷功能",
     "autoCopy": "上传成功自动复制链接",
-    "autoCopyHint": "按所选格式复制到剪贴板"
+    "autoCopyHint": "图片上传成功后，自动复制图片链接到剪贴板。"
   },
   "settings": {
     "title": "系统设置",
     "pageTitle": "设置与偏好",
     "pageSubtitle": "管理系统配置与操作日志",
-    "pageSubtitleBasic": "管理系统配置与上传偏好",
+    "pageSubtitleBasic": "配置系统的基本选项，让 PicHost 更好地为你服务。",
+    "pageSubtitleDomains": "配置网站域名、图片域名以及图片存储路径等相关设置",
+    "pageSubtitleAccess": "配置图片访问安全策略，防止资源被恶意盗用。",
+    "pageSubtitleLogs": "查看用户上传、删除、修改与系统配置记录",
+    "searchPlaceholder": "搜索设置项…",
+    "searchEmpty": "无匹配项",
+    "restoreDefaults": "恢复默认",
+    "restoredDefaults": "已恢复默认设置",
+    "refererProtection": "防盗链设置",
+    "defaultCopyFormatHint": "设置上传后自动复制的链接格式。",
+    "systemVersionHint": "当前运行的 PicHost 版本。",
+    "badgeEnabled": "已启用",
+    "domainSeparationProxyTitle": "需要将两个域名解析到本机",
+    "domainSeparationProxyBody": "请将网站域名和图片域名都解析到本机，并通过 Nginx、Caddy、NPM 等反向代理到本机的 6892 端口。",
+    "siteBaseUrlRoleHint": "用于访问后台管理界面的网站域名。",
+    "imageBaseUrlRoleHint": "用于访问和显示图片资源的域名。",
+    "imageDomainSection": "图片域名",
     "navBasic": "基础设置",
     "navDomains": "域名与路径",
     "navAccess": "访问控制",
+    "navTags": "标签管理",
     "navPreferences": "偏好设置",
     "navLogs": "操作日志",
+    "pageSubtitleTags": "创建、重命名、合并或删除标签",
     "systemVersion": "系统版本",
     "checkUpdate": "检查更新",
     "saveSettings": "保存设置",
@@ -222,25 +338,29 @@
     "pathAndLinkHint": "控制图片直链格式与上传目录结构",
     "domainSeparationSection": "域名分离",
     "allowRegistration": "开放用户注册",
-    "allowRegistrationHint": "允许新用户自行注册（普通用户仅可见自己的图片）",
+    "allowRegistrationHint": "允许新用户自行注册账号。",
     "accessControl": "访问控制",
-    "refererHint": "Referer 防盗链，逗号分隔允许引用的域名，留空不限制",
+    "refererHint": "通过 Referer 防盗链，限制哪些网站可以引用你的图片。",
     "refererDomainsLabel": "允许引用的域名",
     "refererTip": "多个域名请使用英文逗号 (,) 分隔，不支持通配符",
     "refererExamplesTitle": "推荐示例",
     "refererExamplesSample": "example.com, static.example.com",
     "refererScenarioTitle": "常见场景",
     "refererScenarioDesc": "允许主站与静态站点引用图片",
+    "refererScenario1": "个人博客引用本站图片",
+    "refererScenario2": "企业官网与静态资源站",
+    "refererScenario3": "开发环境本地调试",
+    "refererScenario4": "留空表示不限制任何来源",
     "refererEnabled": "已开启",
     "refererUnrestricted": "未限制",
     "loginVerification": "登录验证",
     "loginVerificationHint": "登录与注册时使用的人机验证方式，三选一",
     "loginVerificationSlider": "本地滑块",
-    "loginVerificationSliderHint": "内置滑块拼图，无需第三方服务",
+    "loginVerificationSliderHint": "内置滑块验证，无需第三方服务。",
     "loginVerificationTurnstile": "Cloudflare Turnstile",
-    "loginVerificationTurnstileHint": "在 Cloudflare 控制台创建 Widget，填写 Site Key 与 Secret Key",
+    "loginVerificationTurnstileHint": "使用 Cloudflare 提供的人机验证服务，安全可靠。",
     "loginVerificationCap": "Cap POW",
-    "loginVerificationCapHint": "自托管 Cap Standalone，填写 API Endpoint 与 Secret Key",
+    "loginVerificationCapHint": "使用基于工作量证明的人机验证，适合无第三方服务的环境。",
     "turnstileSiteKey": "Turnstile Site Key",
     "turnstileSiteKeyPlaceholder": "0x4AAAAAAA…",
     "turnstileSecretKey": "Turnstile Secret Key",
@@ -273,9 +393,9 @@
     "disableDomainSeparationConfirm": "确认关闭",
     "domainSeparationRequired": "启用域名分离时需同时填写网站域名与图片域名",
     "hideFolderInUrl": "使用简短图片链接",
-    "hideFolderInUrlHint": "开启后链接仅含域名与文件名，例如 img.example.com/abc.webp；关闭后保留日期或自定义目录，例如 img.example.com/2026/08/abc.webp",
+    "hideFolderInUrlHint": "启用后，生成的图片链接将使用简短格式（如 /abc123.png），不包含年月目录。",
     "storageUseDatePath": "上传目录按年/月分组",
-    "storageUseDatePathHint": "开启后保存为 images/2026/08/xxx.webp；关闭则为 images/xxx.webp。仅影响启用后的新上传",
+    "storageUseDatePathHint": "启用后，上传的图片将按 年/月 自动分组存储，如 2024/01/xxx.png，便于管理。",
     "badgeEnv": ".env",
     "badgeSaved": "已保存",
     "badgeDefault": "默认",
@@ -287,7 +407,7 @@
     "apiTokenLine": "来源：{source}",
     "viewReleases": "查看发行版",
     "updateAvailable": "有新版本 {version}",
-    "upToDate": "当前已是最新版本",
+    "upToDate": "已是最新版本",
     "checkUpdateFailed": "检查更新失败，请稍后重试",
     "unsavedChanges": "有未保存的更改",
     "manageToken": "管理 Token",
@@ -594,20 +714,28 @@
   },
   "logs": {
     "pageTitle": "操作日志",
-    "pageSubtitle": "查看您的上传与删除记录",
-    "pageSubtitleAdmin": "查看所有用户的上传与删除记录",
+    "pageSubtitle": "查看您的操作记录",
+    "pageSubtitleAdmin": "查看所有用户的操作记录",
     "loadFailed": "加载操作日志失败",
     "empty": "暂无操作记录",
     "entriesUnit": "条记录",
     "filterActionAll": "全部操作",
     "filterSourceAll": "全部来源",
     "filterUserAll": "全部用户",
-    "searchPlaceholder": "搜索文件名",
+    "searchPlaceholder": "搜索文件名、路径或 IP",
+    "dateFrom": "开始日期",
+    "dateTo": "结束日期",
+    "dateRangeSeparator": "~",
     "summaryAll": "全部 · 共 {total} 条记录，上传 {upload} 条，删除 {delete} 条",
     "actionUpload": "上传",
     "actionDelete": "删除",
+    "actionLogin": "登录",
+    "actionEdit": "编辑",
+    "actionSettings": "设置",
+    "actionTags": "标签",
     "sourceWeb": "网页",
     "sourceApi": "API",
+    "sourceAdmin": "管理后台",
     "colTime": "时间",
     "colUser": "用户",
     "colStorage": "存储",
@@ -616,7 +744,11 @@
     "colFile": "文件名",
     "colFolder": "目录",
     "colSize": "大小",
-    "colKey": "路径"
+    "colKey": "路径",
+    "colIp": "IP 地址",
+    "colResult": "操作结果",
+    "resultSuccess": "成功",
+    "resultFailure": "失败"
   },
   "image": {
     "empty": "暂无图片",
@@ -722,11 +854,15 @@
         "image": "上传图片，主字段",
         "file": "兼容字段，单图上传",
         "files": "兼容字段，多图上传",
-        "token": "Twikoo 协议兼容，表单 token"
+        "token": "Twikoo 协议兼容，表单 token",
+        "tagIds": "可选，JSON 数组或重复字段，上传后自动打标"
       },
       "list": {
         "limit": "每页条数，默认 20，最大 100",
-        "page": "页码，从 1 开始"
+        "page": "页码，从 1 开始",
+        "tagIds": "按标签筛选，逗号分隔 ID；与 untagged、tagMode 配合",
+        "tagMode": "多标签时 or（默认）或 and",
+        "untagged": "设为 1 仅显示无标签图片"
       },
       "search": {
         "q": "搜索关键词，必填"
diff --git a/package-lock.json b/package-lock.json
index b886ed2..24f5ef7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "pichost",
-  "version": "1.2.8",
+  "version": "1.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pichost",
-      "version": "1.2.8",
+      "version": "1.4.0",
       "hasInstallScript": true,
       "license": "GPL-3.0-only",
       "dependencies": {
diff --git a/package.json b/package.json
index 2f75a12..ddb06c6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pichost",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Self-hosted image hosting for your NAS / home server — Nuxt admin UI, local disk or S3-compatible storage, server-side WebP compression, referer protection, Twikoo/EasyImage compatible.",
   "homepage": "https://github.com/O96u/PicHost#readme",
   "repository": {
diff --git a/server/api/auth/login.post.ts b/server/api/auth/login.post.ts
index 0e28427..f781422 100644
--- a/server/api/auth/login.post.ts
+++ b/server/api/auth/login.post.ts
@@ -12,6 +12,7 @@ import {
 import { findUserByUsername } from '../../utils/db'
 import { getAdminSecret } from '../../utils/env'
 import { verifyLoginVerification, type VerificationBody } from '../../utils/login-verification'
+import { logActivity } from '../../utils/activity-log'
 import { clientIp, logInfo, logWarn } from '../../utils/logger'
 
 interface LoginBody extends VerificationBody {
@@ -81,6 +82,13 @@ export default defineEventHandler(async (event) => {
 
   await createSession(event, user.id)
   logInfo('login success', { ip, username: user.username })
+  logActivity(event, {
+    action: 'login',
+    key: 'auth/login',
+    originalName: user.username,
+    userId: user.id,
+    source: 'web'
+  })
 
   return {
     success: true,
diff --git a/server/api/images/batch-delete.post.ts b/server/api/images/batch-delete.post.ts
index 9499355..d1216ba 100644
--- a/server/api/images/batch-delete.post.ts
+++ b/server/api/images/batch-delete.post.ts
@@ -1,8 +1,8 @@
 import type { BatchDeleteResponse } from '~/types/image'
-import { requireApiOrAdminAuth, assertImageOwnership, resolveActivitySource } from '../../utils/access'
+import { requireApiOrAdminAuth, assertImageOwnership } from '../../utils/access'
 import { createApiError } from '../../utils/api-error'
 import { MAX_DELETE_BATCH } from '../../utils/constants'
-import { insertActivityLog } from '../../utils/db'
+import { logActivity } from '../../utils/activity-log'
 import { getImageIndexRow, deleteImageIndex } from '../../utils/image-index'
 import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
 import { deleteImage, headImage, resolveStorageImageKey } from '../../utils/storage'
@@ -67,13 +67,12 @@ export default defineEventHandler(async (event) => {
           if (storageKey !== key) deleteImageIndex(storageKey)
 
           deleted.push(key)
-          insertActivityLog({
+          logActivity(event, {
             action: 'delete',
             key,
             originalName: indexed.original_name,
             size: indexed.size,
             contentType: indexed.content_type,
-            source: resolveActivitySource(event),
             userId: indexed.user_id ?? null,
             backendId: indexed.backend_id ?? null
           })
@@ -102,13 +101,12 @@ export default defineEventHandler(async (event) => {
         await deleteImage(storageKey, key)
         deleted.push(key)
 
-        insertActivityLog({
+        logActivity(event, {
           action: 'delete',
           key,
           originalName: existing.originalName,
           size: existing.size,
           contentType: existing.contentType,
-          source: resolveActivitySource(event),
           userId: existing.userId ?? null,
           backendId: existing.backendId ?? null
         })
diff --git a/server/api/images/batch-tags.post.ts b/server/api/images/batch-tags.post.ts
new file mode 100644
index 0000000..04f7e45
--- /dev/null
+++ b/server/api/images/batch-tags.post.ts
@@ -0,0 +1,95 @@
+import { requireApiOrAdminAuth } from '../../utils/access'
+import { logActivity } from '../../utils/activity-log'
+import { getCurrentUser } from '../../utils/auth'
+import { createApiError } from '../../utils/api-error'
+import { MAX_DELETE_BATCH } from '../../utils/constants'
+import { getImageIndexRow } from '../../utils/image-index'
+import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
+import {
+  addTagsToImage,
+  removeTagFromImage
+} from '../../utils/tags'
+import { handleTagApiError } from '../../utils/tag-api'
+
+interface BatchTagsBody {
+  keys?: string[]
+  tagIds?: number[]
+  action?: 'add' | 'remove'
+}
+
+function validateKeys(keys: string[]): void {
+  for (const key of keys) {
+    if (
+      !validateImageKey(key)
+      && !toCanonicalImageKey(key)
+      && !getImageIndexRow(key)
+    ) {
+      throw new Error(`INVALID_KEY:${key}`)
+    }
+  }
+}
+
+export default defineEventHandler(async (event) => {
+  await requireApiOrAdminAuth(event)
+  const user = await getCurrentUser(event)
+  const body = await readBody<BatchTagsBody>(event)
+
+  const keys = Array.isArray(body?.keys)
+    ? body.keys.filter(key => typeof key === 'string' && key.trim())
+    : []
+  const tagIds = Array.isArray(body?.tagIds)
+    ? body.tagIds.filter(id => Number.isInteger(id) && id > 0)
+    : []
+  const action = body?.action === 'remove' ? 'remove' : 'add'
+
+  if (!keys.length) {
+    createApiError(event, 'INVALID_REQUEST', '请提供图片列表', 400)
+  }
+  if (!tagIds.length) {
+    createApiError(event, 'INVALID_REQUEST', '请提供标签列表', 400)
+  }
+  if (keys.length > MAX_DELETE_BATCH) {
+    createApiError(
+      event,
+      'INVALID_REQUEST',
+      `每次最多处理 ${MAX_DELETE_BATCH} 张图片`,
+      400
+    )
+  }
+
+  try {
+    validateKeys(keys)
+  } catch (error) {
+    if (error instanceof Error && error.message.startsWith('INVALID_KEY:')) {
+      createApiError(event, 'INVALID_IMAGE_KEY', `无效的图片路径: ${error.message.slice(12)}`, 400)
+    }
+    throw error
+  }
+
+  let updated = 0
+  try {
+    for (const key of keys) {
+      if (action === 'add') {
+        addTagsToImage(key, tagIds, user!.id, user!.role === 'admin')
+      } else {
+        for (const tagId of tagIds) {
+          removeTagFromImage(key, tagId, user!.id, user!.role === 'admin')
+        }
+      }
+      updated++
+    }
+  } catch (error) {
+    handleTagApiError(event, error)
+  }
+
+  logActivity(event, {
+    action: 'tags',
+    key: 'images/batch-tags',
+    originalName: action === 'add'
+      ? `批量打标（${keys.length} 张）`
+      : `批量移除标签（${keys.length} 张）`,
+    userId: user!.id
+  })
+
+  return { success: true, updated }
+})
diff --git a/server/api/images/count.get.ts b/server/api/images/count.get.ts
index 4ce093d..eacac70 100644
--- a/server/api/images/count.get.ts
+++ b/server/api/images/count.get.ts
@@ -1,5 +1,5 @@
 import { getImageUserFilter, requireApiOrAdminAuth } from '../../utils/access'
-import { readBackendIdQuery } from '../../utils/image-query'
+import { readBackendIdQuery, readTagFilterQuery } from '../../utils/image-query'
 import { createApiError } from '../../utils/api-error'
 import { countImages } from '../../utils/storage'
 
@@ -12,8 +12,12 @@ export default defineEventHandler(async (event) => {
   if (backendId === null) {
     createApiError(event, 'INVALID_REQUEST', '无效的存储后端', 400)
   }
+  const tagFilter = readTagFilterQuery(query)
+  if (tagFilter === null) {
+    createApiError(event, 'INVALID_REQUEST', '无效的标签筛选参数', 400)
+  }
 
-  const total = await countImages(userFilter, backendId)
+  const total = await countImages(userFilter, backendId, tagFilter)
 
   return { total }
 })
diff --git a/server/api/images/index.delete.ts b/server/api/images/index.delete.ts
index ff5cf1e..c655c57 100644
--- a/server/api/images/index.delete.ts
+++ b/server/api/images/index.delete.ts
@@ -1,7 +1,7 @@
 import type { DeleteResponse } from '~/types/image'
-import { requireApiOrAdminAuth, assertImageOwnership, resolveActivitySource } from '../../utils/access'
+import { requireApiOrAdminAuth, assertImageOwnership } from '../../utils/access'
 import { createApiError } from '../../utils/api-error'
-import { insertActivityLog } from '../../utils/db'
+import { logActivity } from '../../utils/activity-log'
 import { getImageIndexRow, deleteImageIndex } from '../../utils/image-index'
 import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
 import { deleteImage, headImage, resolveStorageImageKey } from '../../utils/storage'
@@ -40,13 +40,12 @@ export default defineEventHandler(async (event) => {
       deleteImageIndex(key)
       if (storageKey !== key) deleteImageIndex(storageKey)
 
-      insertActivityLog({
+      logActivity(event, {
         action: 'delete',
         key,
         originalName: indexed.original_name,
         size: indexed.size,
         contentType: indexed.content_type,
-        source: resolveActivitySource(event),
         userId: indexed.user_id ?? null,
         backendId: indexed.backend_id ?? null
       })
@@ -69,13 +68,12 @@ export default defineEventHandler(async (event) => {
       createApiError(event, 'DELETE_FAILED', '删除失败', 500)
     }
 
-    insertActivityLog({
+    logActivity(event, {
       action: 'delete',
       key,
       originalName: existing.originalName,
       size: existing.size,
       contentType: existing.contentType,
-      source: resolveActivitySource(event),
       userId: existing.userId ?? null,
       backendId: existing.backendId ?? null
     })
diff --git a/server/api/images/index.get.ts b/server/api/images/index.get.ts
index b118fcc..1029412 100644
--- a/server/api/images/index.get.ts
+++ b/server/api/images/index.get.ts
@@ -7,9 +7,9 @@ import {
 } from '../../utils/constants'
 import { createApiError } from '../../utils/api-error'
 import { getUploadSourcesForKeys, listUserIdUsernameMap } from '../../utils/db'
-import { mapStoredImageToItem } from '../../utils/image-response'
+import { mapStoredImageToItem, attachTagsToImageItems } from '../../utils/image-response'
 import { listStorageBackendNameMap } from '../../utils/storage-backends'
-import { readBackendIdQuery, readContentTypeQuery, readUploadSourceQuery } from '../../utils/image-query'
+import { readBackendIdQuery, readContentTypeQuery, readTagFilterQuery, readUploadSourceQuery } from '../../utils/image-query'
 import { listImages } from '../../utils/storage'
 
 export default defineEventHandler(async (event) => {
@@ -39,6 +39,10 @@ export default defineEventHandler(async (event) => {
   if (uploadSource === null) {
     createApiError(event, 'INVALID_REQUEST', '无效的上传来源', 400)
   }
+  const tagFilter = readTagFilterQuery(query)
+  if (tagFilter === null) {
+    createApiError(event, 'INVALID_REQUEST', '无效的标签筛选参数', 400)
+  }
   const userFilter = await getImageUserFilter(event)
 
   const listing = await listImages({
@@ -47,15 +51,18 @@ export default defineEventHandler(async (event) => {
     userFilter,
     backendId,
     contentType,
-    uploadSource
+    uploadSource,
+    tagFilter
   })
 
   const user = await getCurrentUser(event)
   const ownerMap = user?.role === 'admin' ? listUserIdUsernameMap() : undefined
   const backendMap = listStorageBackendNameMap()
   const sourceMap = getUploadSourcesForKeys(listing.items.map(item => item.key))
-  const items = listing.items.map(stored =>
-    mapStoredImageToItem(event, stored, { ownerMap, backendMap, sourceMap })
+  const items = attachTagsToImageItems(
+    listing.items.map(stored =>
+      mapStoredImageToItem(event, stored, { ownerMap, backendMap, sourceMap })
+    )
   )
 
   items.sort((a, b) => b.uploadedAt.localeCompare(a.uploadedAt))
diff --git a/server/api/images/search.get.ts b/server/api/images/search.get.ts
index 4a10340..ca90574 100644
--- a/server/api/images/search.get.ts
+++ b/server/api/images/search.get.ts
@@ -7,9 +7,9 @@ import {
 } from '../../utils/constants'
 import { createApiError } from '../../utils/api-error'
 import { getUploadSourcesForKeys, listUserIdUsernameMap } from '../../utils/db'
-import { mapStoredImageToItem } from '../../utils/image-response'
+import { mapStoredImageToItem, attachTagsToImageItems } from '../../utils/image-response'
 import { listStorageBackendNameMap } from '../../utils/storage-backends'
-import { readBackendIdQuery, readContentTypeQuery, readUploadSourceQuery } from '../../utils/image-query'
+import { readBackendIdQuery, readContentTypeQuery, readTagFilterQuery, readUploadSourceQuery } from '../../utils/image-query'
 import { searchImages } from '../../utils/storage'
 
 export default defineEventHandler(async (event) => {
@@ -48,6 +48,10 @@ export default defineEventHandler(async (event) => {
   if (uploadSource === null) {
     createApiError(event, 'INVALID_REQUEST', '无效的上传来源', 400)
   }
+  const tagFilter = readTagFilterQuery(query)
+  if (tagFilter === null) {
+    createApiError(event, 'INVALID_REQUEST', '无效的标签筛选参数', 400)
+  }
   const userFilter = await getImageUserFilter(event)
 
   const result = await searchImages({
@@ -57,15 +61,18 @@ export default defineEventHandler(async (event) => {
     userFilter,
     backendId,
     contentType,
-    uploadSource
+    uploadSource,
+    tagFilter
   })
 
   const user = await getCurrentUser(event)
   const ownerMap = user?.role === 'admin' ? listUserIdUsernameMap() : undefined
   const backendMap = listStorageBackendNameMap()
   const sourceMap = getUploadSourcesForKeys(result.items.map(item => item.key))
-  const items = result.items.map(stored =>
-    mapStoredImageToItem(event, stored, { ownerMap, backendMap, sourceMap })
+  const items = attachTagsToImageItems(
+    result.items.map(stored =>
+      mapStoredImageToItem(event, stored, { ownerMap, backendMap, sourceMap })
+    )
   )
 
   items.sort((a, b) => b.uploadedAt.localeCompare(a.uploadedAt))
diff --git a/server/api/images/tags.delete.ts b/server/api/images/tags.delete.ts
new file mode 100644
index 0000000..a31e388
--- /dev/null
+++ b/server/api/images/tags.delete.ts
@@ -0,0 +1,60 @@
+import { requireApiOrAdminAuth } from '../../utils/access'
+import { logActivity } from '../../utils/activity-log'
+import { getCurrentUser } from '../../utils/auth'
+import { createApiError } from '../../utils/api-error'
+import { getImageIndexRow } from '../../utils/image-index'
+import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
+import { removeTagFromImage } from '../../utils/tags'
+import { handleTagApiError } from '../../utils/tag-api'
+
+interface ImageTagDeleteBody {
+  key?: string
+  tagId?: number
+}
+
+export default defineEventHandler(async (event) => {
+  await requireApiOrAdminAuth(event)
+  const user = await getCurrentUser(event)
+
+  const query = getQuery(event)
+  const body = await readBody<ImageTagDeleteBody>(event).catch(() => ({} as ImageTagDeleteBody))
+
+  const key = (typeof query.key === 'string' ? query.key : undefined) ?? body?.key?.trim()
+  const tagId = Number(
+    typeof query.tagId === 'string' ? query.tagId : body?.tagId
+  )
+
+  if (
+    !key
+    || (
+      !validateImageKey(key)
+      && !toCanonicalImageKey(key)
+      && !getImageIndexRow(key)
+    )
+  ) {
+    createApiError(event, 'INVALID_IMAGE_KEY', '无效的图片路径', 400)
+  }
+
+  if (!Number.isInteger(tagId) || tagId <= 0) {
+    createApiError(event, 'INVALID_REQUEST', '无效的标签 ID', 400)
+  }
+
+  try {
+    const tags = removeTagFromImage(
+      key,
+      tagId,
+      user!.id,
+      user!.role === 'admin'
+    )
+    const indexed = getImageIndexRow(key)
+    logActivity(event, {
+      action: 'tags',
+      key,
+      originalName: indexed?.original_name ?? key,
+      userId: user!.id
+    })
+    return { tags }
+  } catch (error) {
+    handleTagApiError(event, error)
+  }
+})
diff --git a/server/api/images/tags.patch.ts b/server/api/images/tags.patch.ts
new file mode 100644
index 0000000..a495f8d
--- /dev/null
+++ b/server/api/images/tags.patch.ts
@@ -0,0 +1,54 @@
+import { requireApiOrAdminAuth } from '../../utils/access'
+import { logActivity } from '../../utils/activity-log'
+import { getCurrentUser } from '../../utils/auth'
+import { createApiError } from '../../utils/api-error'
+import { getImageIndexRow } from '../../utils/image-index'
+import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
+import { setImageTags } from '../../utils/tags'
+import { handleTagApiError } from '../../utils/tag-api'
+
+interface ImageTagsBody {
+  key?: string
+  tagIds?: number[]
+}
+
+export default defineEventHandler(async (event) => {
+  await requireApiOrAdminAuth(event)
+  const user = await getCurrentUser(event)
+  const body = await readBody<ImageTagsBody>(event)
+
+  const key = body?.key?.trim()
+  if (
+    !key
+    || (
+      !validateImageKey(key)
+      && !toCanonicalImageKey(key)
+      && !getImageIndexRow(key)
+    )
+  ) {
+    createApiError(event, 'INVALID_IMAGE_KEY', '无效的图片路径', 400)
+  }
+
+  const tagIds = Array.isArray(body?.tagIds)
+    ? body.tagIds.filter(id => Number.isInteger(id) && id > 0)
+    : []
+
+  try {
+    const tags = setImageTags(
+      key,
+      tagIds,
+      user!.id,
+      user!.role === 'admin'
+    )
+    const indexed = getImageIndexRow(key)
+    logActivity(event, {
+      action: 'tags',
+      key,
+      originalName: indexed?.original_name ?? key,
+      userId: user!.id
+    })
+    return { tags }
+  } catch (error) {
+    handleTagApiError(event, error)
+  }
+})
diff --git a/server/api/images/tags.post.ts b/server/api/images/tags.post.ts
new file mode 100644
index 0000000..db5d629
--- /dev/null
+++ b/server/api/images/tags.post.ts
@@ -0,0 +1,57 @@
+import { requireApiOrAdminAuth } from '../../utils/access'
+import { logActivity } from '../../utils/activity-log'
+import { getCurrentUser } from '../../utils/auth'
+import { createApiError } from '../../utils/api-error'
+import { getImageIndexRow } from '../../utils/image-index'
+import { toCanonicalImageKey, validateImageKey } from '../../utils/image-key'
+import { addTagsToImage } from '../../utils/tags'
+import { handleTagApiError } from '../../utils/tag-api'
+
+interface ImageTagsBody {
+  key?: string
+  tagIds?: number[]
+}
+
+export default defineEventHandler(async (event) => {
+  await requireApiOrAdminAuth(event)
+  const user = await getCurrentUser(event)
+  const body = await readBody<ImageTagsBody>(event)
+
+  const key = body?.key?.trim()
+  if (
+    !key
+    || (
+      !validateImageKey(key)
+      && !toCanonicalImageKey(key)
+      && !getImageIndexRow(key)
+    )
+  ) {
+    createApiError(event, 'INVALID_IMAGE_KEY', '无效的图片路径', 400)
+  }
+
+  const tagIds = Array.isArray(body?.tagIds)
+    ? body.tagIds.filter(id => Number.isInteger(id) && id > 0)
+    : []
+  if (!tagIds.length) {
+    createApiError(event, 'INVALID_REQUEST', '请提供要添加的标签', 400)
+  }
+
+  try {
+    const tags = addTagsToImage(
+      key,
+      tagIds,
+      user!.id,
+      user!.role === 'admin'
+    )
+    const indexed = getImageIndexRow(key)
+    logActivity(event, {
+      action: 'tags',
+      key,
+      originalName: indexed?.original_name ?? key,
+      userId: user!.id
+    })
+    return { tags }
+  } catch (error) {
+    handleTagApiError(event, error)
+  }
+})
diff --git a/server/api/images/upload.post.ts b/server/api/images/upload.post.ts
index e1de896..20277e9 100644
--- a/server/api/images/upload.post.ts
+++ b/server/api/images/upload.post.ts
@@ -12,6 +12,7 @@ import {
 } from '../../utils/process-image-upload'
 import { createApiError } from '../../utils/api-error'
 import { checkUploadRateLimit } from '../../utils/rate-limit'
+import { parseTagIdsParam } from '../../utils/tags'
 
 export default defineEventHandler(async (event) => {
   await requireUploadAuth(event)
@@ -30,6 +31,25 @@ export default defineEventHandler(async (event) => {
   const source = verifyApiUploadToken(event) ? 'api' : 'web'
   const uploadUserId = await getUploadUserId(event)
 
+  const tagIdsField = formData.find(part => part.name === 'tagIds')
+  let uploadTagIds: number[] = []
+  if (tagIdsField?.data?.length) {
+    const raw = new TextDecoder().decode(tagIdsField.data).trim()
+    try {
+      const parsed = JSON.parse(raw) as unknown
+      uploadTagIds = parseTagIdsParam(parsed)
+    } catch {
+      uploadTagIds = parseTagIdsParam(raw)
+    }
+  } else {
+    const repeatFields = formData.filter(part => part.name === 'tagIds' && part.data?.length)
+    if (repeatFields.length) {
+      uploadTagIds = parseTagIdsParam(
+        repeatFields.map(part => new TextDecoder().decode(part.data!).trim())
+      )
+    }
+  }
+
   // 兼容 image / file / files 字段名（图床脚本 / 通用客户端 / 网页多图）
   const fileParts = formData.filter(
     part => (part.name === 'image' || part.name === 'file' || part.name === 'files')
@@ -83,7 +103,8 @@ export default defineEventHandler(async (event) => {
       bytes,
       filename: part.filename,
       source,
-      userId: uploadUserId
+      userId: uploadUserId,
+      tagIds: uploadTagIds
     })
 
     if ('error' in result) {
diff --git a/server/api/logs/index.get.ts b/server/api/logs/index.get.ts
index bfb4d06..21233e0 100644
--- a/server/api/logs/index.get.ts
+++ b/server/api/logs/index.get.ts
@@ -4,10 +4,9 @@ import { logException } from '../../utils/logger'
 import {
   listActivityLogs,
   listUserIdUsernameMap,
-  summarizeActivityLogs,
-  type LogAction,
-  type LogSource
+  summarizeActivityLogs
 } from '../../utils/db'
+import { isLogAction, isLogSource } from '../../utils/activity-log'
 import { ensureStorageSchema } from '../../utils/storage-backends'
 import {
   DEFAULT_LIST_LIMIT,
@@ -25,14 +24,10 @@ export default defineEventHandler(async (event) => {
     : DEFAULT_LIST_LIMIT
 
   const actionRaw = typeof query.action === 'string' ? query.action : ''
-  const action = (actionRaw === 'upload' || actionRaw === 'delete')
-    ? actionRaw as LogAction
-    : undefined
+  const action = isLogAction(actionRaw) ? actionRaw : undefined
 
   const sourceRaw = typeof query.source === 'string' ? query.source : ''
-  const source = (sourceRaw === 'web' || sourceRaw === 'api')
-    ? sourceRaw as LogSource
-    : undefined
+  const source = isLogSource(sourceRaw) ? sourceRaw : undefined
 
   const folder = typeof query.folder === 'string' && query.folder.trim()
     ? query.folder.trim()
@@ -41,6 +36,19 @@ export default defineEventHandler(async (event) => {
   const searchRaw = typeof query.q === 'string' ? query.q.trim() : ''
   const search = searchRaw || undefined
 
+  const dateFromRaw = typeof query.from === 'string' ? query.from.trim() : ''
+  const dateToRaw = typeof query.to === 'string' ? query.to.trim() : ''
+  const dateFrom = dateFromRaw && /^\d{4}-\d{2}-\d{2}$/.test(dateFromRaw)
+    ? `${dateFromRaw}T00:00:00.000Z`
+    : undefined
+  const dateTo = dateToRaw && /^\d{4}-\d{2}-\d{2}$/.test(dateToRaw)
+    ? (() => {
+        const end = new Date(`${dateToRaw}T00:00:00.000Z`)
+        end.setUTCDate(end.getUTCDate() + 1)
+        return end.toISOString()
+      })()
+    : undefined
+
   const pageRaw = Number(query.page ?? 1)
   const page = Number.isFinite(pageRaw) && pageRaw > 0
     ? Math.floor(pageRaw)
@@ -62,8 +70,25 @@ export default defineEventHandler(async (event) => {
 
   try {
     ensureStorageSchema()
-    const result = listActivityLogs({ limit, page, action, source, folder, userId, search })
-    const summary = summarizeActivityLogs({ source, folder, userId, search })
+    const result = listActivityLogs({
+      limit,
+      page,
+      action,
+      source,
+      folder,
+      userId,
+      search,
+      dateFrom,
+      dateTo
+    })
+    const summary = summarizeActivityLogs({
+      source,
+      folder,
+      userId,
+      search,
+      dateFrom,
+      dateTo
+    })
     const userMap = user.role === 'admin' ? listUserIdUsernameMap() : undefined
 
     return {
@@ -84,6 +109,8 @@ export default defineEventHandler(async (event) => {
               type: (row.backend_type === 'local' ? 'local' : 's3') as 'local' | 's3'
             }
           : null,
+        ipAddress: row.ip_address,
+        status: row.status === 'failure' ? 'failure' : 'success',
         createdAt: row.created_at
       })),
       total: result.total,
diff --git a/server/api/settings/index.patch.ts b/server/api/settings/index.patch.ts
index 1caf41a..c501cb9 100644
--- a/server/api/settings/index.patch.ts
+++ b/server/api/settings/index.patch.ts
@@ -1,4 +1,5 @@
 import { requireAdminAuth } from '../../utils/access'
+import { logActivity } from '../../utils/activity-log'
 import { createApiError } from '../../utils/api-error'
 import {
   getSetting,
@@ -52,7 +53,7 @@ interface SettingsPatchBody {
 }
 
 export default defineEventHandler(async (event) => {
-  await requireAdminAuth(event)
+  const user = await requireAdminAuth(event)
 
   const body = await readBody<SettingsPatchBody>(event).catch(
     (): SettingsPatchBody => ({})
@@ -248,5 +249,13 @@ export default defineEventHandler(async (event) => {
     setSetting(SETTINGS_CAP_SECRET, nextCapSecret)
   }
 
+  logActivity(event, {
+    action: 'settings',
+    key: 'settings/system',
+    originalName: '系统设置',
+    userId: user.id,
+    source: 'admin'
+  })
+
   return getSettingsPayload(event)
 })
diff --git a/server/api/stats.get.ts b/server/api/stats.get.ts
index 904b056..f8e6151 100644
--- a/server/api/stats.get.ts
+++ b/server/api/stats.get.ts
@@ -2,6 +2,7 @@ import { getImageUserFilter, requireUserAuth } from '../utils/access'
 import { createApiError } from '../utils/api-error'
 import { logException } from '../utils/logger'
 import { countUsers, getActivityStats } from '../utils/db'
+import { readTagFilterQuery } from '../utils/image-query'
 import {
   countImages,
   getFolderStorageStats,
@@ -39,13 +40,18 @@ async function resolveStorageUsage(usedBytes: number): Promise<StorageUsageStat>
 export default defineEventHandler(async (event) => {
   const user = await requireUserAuth(event)
   const userFilter = await getImageUserFilter(event)
+  const query = getQuery(event)
+  const tagFilter = readTagFilterQuery(query)
+  if (tagFilter === null) {
+    createApiError(event, 'INVALID_REQUEST', '无效的标签筛选参数', 400)
+  }
 
   try {
     if (userFilter === 'admin') {
       const activity = getActivityStats()
       const [storedCount, byFolder, storageUsage] = await Promise.all([
-        countImages(),
-        getFolderStorageStats(),
+        countImages('admin', undefined, tagFilter),
+        getFolderStorageStats('admin', tagFilter),
         resolveStorageUsage(activity.uploadBytesTotal)
       ])
 
@@ -58,7 +64,7 @@ export default defineEventHandler(async (event) => {
       }
     }
 
-    const scoped = await getUserScopedStorageStats(user.id)
+    const scoped = await getUserScopedStorageStats(user.id, tagFilter)
     const storageUsage = await resolveStorageUsage(scoped.uploadBytesTotal)
 
     return {
diff --git a/server/api/tags/[id].delete.ts b/server/api/tags/[id].delete.ts
new file mode 100644
index 0000000..7720ab1
--- /dev/null
+++ b/server/api/tags/[id].delete.ts
@@ -0,0 +1,32 @@
+import { requireUserAuth } from '../../utils/access'
+import { logActivity } from '../../utils/activity-log'
+import { createApiError } from '../../utils/api-error'
+import { deleteTag, getTagForUser } from '../../utils/tags'
+
+export default defineEventHandler(async (event) => {
+  const user = await requireUserAuth(event)
+  const id = Number(getRouterParam(event, 'id'))
+
+  if (!Number.isInteger(id) || id <= 0) {
+    createApiError(event, 'INVALID_REQUEST', '无效的标签 ID', 400)
+  }
+
+  const existing = getTagForUser(user.id, id)
+  if (!existing) {
+    createApiError(event, 'INVALID_REQUEST', '标签不存在', 404)
+  }
+
+  const deleted = deleteTag(user.id, id)
+  if (!deleted) {
+    createApiError(event, 'INVALID_REQUEST', '标签不存在', 404)
+  }
+
+  logActivity(event, {
+    action: 'tags',
+    key: `tags/${id}`,
+    originalName: existing.name,
+    userId: user.id
+  })
+
+  return { success: true }
+})
diff --git a/server/api/tags/[id].patch.ts b/server/api/tags/[id].patch.ts
new file mode 100644
index 0000000..c9546a9
--- /dev/null
+++ b/server/api/tags/[id].patch.ts
@@ -0,0 +1,40 @@
+import { requireUserAuth } from '../../utils/access'
+import { logActivity } from '../../utils/activity-log'
+import { createApiError } from '../../utils/api-error'
+import { updateTag } from '../../utils/tags'
+import { handleTagApiError } from '../../utils/tag-api'
+
+interface PatchTagBody {
+  name?: string
+  color?: string | null
+}
+
+export default defineEventHandler(async (event) => {
+  const user = await requireUserAuth(event)
+  const id = Number(getRouterParam(event, 'id'))
+
+  if (!Number.isInteger(id) || id <= 0) {
+    createApiError(event, 'INVALID_REQUEST', '无效的标签 ID', 400)
+  }
+
+  const body = await readBody<PatchTagBody>(event)
+  if (body.name === undefined && body.color === undefined) {
+    createApiError(event, 'INVALID_REQUEST', '请提供要更新的字段', 400)
+  }
+
+  try {
+    const tag = updateTag(user.id, id, {
+      name: body.name,
+      color: body.color
+    })
+    logActivity(event, {
+      action: 'edit',
+      key: `tags/${tag.id}`,
+      originalName: tag.name,
+      userId: user.id
+    })
+    return { tag }
+  } catch (error) {
+    handleTagApiError(event, error)
+  }
+})
diff --git a/server/api/tags/index.get.ts b/server/api/tags/index.get.ts
new file mode 100644
index 0000000..8767aad
--- /dev/null
+++ b/server/api/tags/index.get.ts
@@ -0,0 +1,7 @@
+import { requireUserAuth } from '../../utils/access'
+import { listTagsForUser } from '../../utils/tags'
+
+export default defineEventHandler(async (event) => {
+  const user = await requireUserAuth(event)
+  return { items: listTagsForUser(user.id) }
+})
diff --git a/server/api/tags/index.post.ts b/server/api/tags/index.post.ts
new file mode 100644
index 0000000..06a095f
--- /dev/null
+++ b/server/api/tags/index.post.ts
@@ -0,0 +1,32 @@
+import { requireUserAuth } from '../../utils/access'
+import { logActivity } from '../../utils/activity-log'
+import { createApiError } from '../../utils/api-error'
+import { createTag } from '../../utils/tags'
+import { handleTagApiError } from '../../utils/tag-api'
+
+interface CreateTagBody {
+  name?: string
+  color?: string | null
+}
+
+export default defineEventHandler(async (event) => {
+  const user = await requireUserAuth(event)
+  const body = await readBody<CreateTagBody>(event)
+
+  if (!body?.name || typeof body.name !== 'string') {
+    createApiError(event, 'INVALID_REQUEST', '请提供标签名称', 400)
+  }
+
+  try {
+    const tag = createTag(user.id, body.name, body.color)
+    logActivity(event, {
+      action: 'tags',
+      key: `tags/${tag.id}`,
+      originalName: tag.name,
+      userId: user.id
+    })
+    return { tag }
+  } catch (error) {
+    handleTagApiError(event, error)
+  }
+})
diff --git a/server/api/tags/merge.post.ts b/server/api/tags/merge.post.ts
new file mode 100644
index 0000000..1374954
--- /dev/null
+++ b/server/api/tags/merge.post.ts
@@ -0,0 +1,37 @@
+import { requireUserAuth } from '../../utils/access'
+import { logActivity } from '../../utils/activity-log'
+import { createApiError } from '../../utils/api-error'
+import { mergeTags } from '../../utils/tags'
+import { handleTagApiError } from '../../utils/tag-api'
+
+interface MergeTagsBody {
+  sourceIds?: number[]
+  targetId?: number
+}
+
+export default defineEventHandler(async (event) => {
+  const user = await requireUserAuth(event)
+  const body = await readBody<MergeTagsBody>(event)
+
+  const sourceIds = Array.isArray(body?.sourceIds)
+    ? body.sourceIds.filter(id => Number.isInteger(id) && id > 0)
+    : []
+  const targetId = Number(body?.targetId)
+
+  if (!sourceIds.length || !Number.isInteger(targetId) || targetId <= 0) {
+    createApiError(event, 'INVALID_REQUEST', '请提供有效的源标签与目标标签', 400)
+  }
+
+  try {
+    const tag = mergeTags(user.id, sourceIds, targetId)
+    logActivity(event, {
+      action: 'tags',
+      key: `tags/${tag.id}`,
+      originalName: `合并标签 → ${tag.name}`,
+      userId: user.id
+    })
+    return { tag }
+  } catch (error) {
+    handleTagApiError(event, error)
+  }
+})
diff --git a/server/api/user/settings.patch.ts b/server/api/user/settings.patch.ts
index c3eadf6..0d8919e 100644
--- a/server/api/user/settings.patch.ts
+++ b/server/api/user/settings.patch.ts
@@ -1,4 +1,5 @@
 import { requireUserAuth } from '../../utils/access'
+import { logActivity } from '../../utils/activity-log'
 import { createApiError } from '../../utils/api-error'
 import { getUserAutoDeletePolicy, setUserAutoDeletePolicy } from '../../utils/db'
 import { MAX_AUTO_DELETE_DAYS, parseAutoDeleteDays } from '../../utils/env'
@@ -28,6 +29,16 @@ export default defineEventHandler(async (event) => {
   }
 
   const policy = getUserAutoDeletePolicy(user.id)
+
+  if (body.autoDeleteDays !== undefined) {
+    logActivity(event, {
+      action: 'settings',
+      key: 'user/settings',
+      originalName: '上传偏好',
+      userId: user.id
+    })
+  }
+
   return {
     autoDeleteDays: policy.days
   }
diff --git a/server/utils/activity-log.smoke.test.ts b/server/utils/activity-log.smoke.test.ts
new file mode 100644
index 0000000..06aef3c
--- /dev/null
+++ b/server/utils/activity-log.smoke.test.ts
@@ -0,0 +1,110 @@
+import { mkdtempSync, rmSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { DatabaseSync } from 'node:sqlite'
+import { afterEach, describe, expect, it } from 'vitest'
+
+const tempDirs: string[] = []
+
+afterEach(() => {
+  while (tempDirs.length) {
+    const dir = tempDirs.pop()
+    if (dir) rmSync(dir, { recursive: true, force: true })
+  }
+  process.env.DATA_DIR = undefined
+})
+
+function useTempDataDir(): string {
+  const dir = mkdtempSync(join(tmpdir(), 'pichost-smoke-'))
+  tempDirs.push(dir)
+  process.env.DATA_DIR = dir
+  return dir
+}
+
+async function loadDbModule() {
+  const mod = await import('./db')
+  mod.closeDb()
+  return mod
+}
+
+describe('activity log smoke', () => {
+  it('migrates legacy activity_logs constraints and accepts new action types', async () => {
+    const dir = useTempDataDir()
+    const dbPath = join(dir, 'pichost.db')
+    const legacy = new DatabaseSync(dbPath)
+    legacy.exec(`
+      CREATE TABLE activity_logs (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        action TEXT NOT NULL CHECK(action IN ('upload', 'delete')),
+        key TEXT NOT NULL,
+        original_name TEXT NOT NULL,
+        size INTEGER NOT NULL DEFAULT 0,
+        content_type TEXT NOT NULL DEFAULT '',
+        source TEXT NOT NULL CHECK(source IN ('web', 'api')),
+        created_at TEXT NOT NULL,
+        user_id INTEGER,
+        backend_id TEXT,
+        ip_address TEXT,
+        status TEXT NOT NULL DEFAULT 'success'
+      );
+      INSERT INTO activity_logs (action, key, original_name, size, content_type, source, created_at)
+      VALUES ('upload', 'images/a.webp', 'a.webp', 100, 'image/webp', 'web', '2026-01-01T00:00:00.000Z');
+      CREATE TABLE settings (
+        key TEXT PRIMARY KEY,
+        value TEXT NOT NULL,
+        updated_at TEXT NOT NULL
+      );
+    `)
+    legacy.close()
+
+    const { getDb, insertActivityLog, listActivityLogs, closeDb } = await loadDbModule()
+    getDb()
+    const { ensureStorageSchema } = await import('./storage-backends')
+    ensureStorageSchema()
+
+    insertActivityLog({
+      action: 'login',
+      key: 'auth/login',
+      originalName: 'admin',
+      size: 0,
+      contentType: '',
+      source: 'web',
+      userId: 1,
+      ipAddress: '127.0.0.1'
+    })
+    insertActivityLog({
+      action: 'tags',
+      key: 'tags/1',
+      originalName: '生活',
+      size: 0,
+      contentType: '',
+      source: 'admin',
+      userId: 1
+    })
+
+    const result = listActivityLogs({ limit: 10, page: 1 })
+    expect(result.total).toBe(3)
+    expect(result.items.map(item => item.action).sort()).toEqual(['login', 'tags', 'upload'])
+
+    const migrated = getDb().prepare(`
+      SELECT value FROM settings WHERE key = 'activity_logs_schema_v2'
+    `).get() as { value: string } | undefined
+    expect(migrated?.value).toBe('1')
+
+    closeDb()
+    await new Promise(resolve => setTimeout(resolve, 50))
+  })
+
+  it('opens the project data database without throwing', async () => {
+    const projectData = join(process.cwd(), 'data')
+    process.env.DATA_DIR = projectData
+
+    const { getDb, listActivityLogs, closeDb } = await loadDbModule()
+    getDb()
+    const result = listActivityLogs({ limit: 5, page: 1 })
+    expect(result.page).toBeGreaterThan(0)
+    expect(Array.isArray(result.items)).toBe(true)
+    closeDb()
+    await new Promise(resolve => setTimeout(resolve, 50))
+  })
+})
diff --git a/server/utils/activity-log.ts b/server/utils/activity-log.ts
new file mode 100644
index 0000000..a138395
--- /dev/null
+++ b/server/utils/activity-log.ts
@@ -0,0 +1,67 @@
+import type { H3Event } from 'h3'
+import { getHeader } from 'h3'
+import {
+  insertActivityLog,
+  type LogAction,
+  type LogSource,
+  type LogStatus
+} from './db'
+import { verifyApiUploadToken } from './access'
+import { clientIp } from './logger'
+
+export const LOG_ACTIONS: LogAction[] = [
+  'upload',
+  'delete',
+  'login',
+  'edit',
+  'settings',
+  'tags'
+]
+
+export const LOG_SOURCES: LogSource[] = ['web', 'api', 'admin']
+
+export function isLogAction(value: string): value is LogAction {
+  return LOG_ACTIONS.includes(value as LogAction)
+}
+
+export function isLogSource(value: string): value is LogSource {
+  return LOG_SOURCES.includes(value as LogSource)
+}
+
+export function resolveActivityLogSource(event: H3Event): LogSource {
+  if (verifyApiUploadToken(event)) {
+    return 'api'
+  }
+  const referer = getHeader(event, 'referer') ?? ''
+  if (/\/settings(?:[/?#]|$)|\/storage(?:[/?#]|$)/.test(referer)) {
+    return 'admin'
+  }
+  return 'web'
+}
+
+export interface ActivityLogEventInput {
+  action: LogAction
+  key: string
+  originalName: string
+  size?: number
+  contentType?: string
+  source?: LogSource
+  userId?: number | null
+  backendId?: string | null
+  status?: LogStatus
+}
+
+export function logActivity(event: H3Event, input: ActivityLogEventInput): void {
+  insertActivityLog({
+    action: input.action,
+    key: input.key,
+    originalName: input.originalName,
+    size: input.size ?? 0,
+    contentType: input.contentType ?? '',
+    source: input.source ?? resolveActivityLogSource(event),
+    userId: input.userId ?? null,
+    backendId: input.backendId ?? null,
+    ipAddress: clientIp(event),
+    status: input.status ?? 'success'
+  })
+}
diff --git a/server/utils/db.ts b/server/utils/db.ts
index cd4cc10..50228f4 100644
--- a/server/utils/db.ts
+++ b/server/utils/db.ts
@@ -4,8 +4,10 @@ import { join } from 'node:path'
 import { getDataDir } from './data-dir'
 import { logException } from './logger'
 
-export type LogAction = 'upload' | 'delete'
-export type LogSource = 'web' | 'api'
+export type LogAction = 'upload' | 'delete' | 'login' | 'edit' | 'settings' | 'tags'
+export type LogSource = 'web' | 'api' | 'admin'
+
+export type LogStatus = 'success' | 'failure'
 
 export interface ActivityLogRow {
   id: number
@@ -20,6 +22,8 @@ export interface ActivityLogRow {
   backend_id: string | null
   backend_name: string | null
   backend_type: string | null
+  ip_address: string | null
+  status: LogStatus
   created_at: string
 }
 
@@ -32,6 +36,8 @@ export interface ActivityLogInput {
   source: LogSource
   userId?: number | null
   backendId?: string | null
+  ipAddress?: string | null
+  status?: LogStatus
   createdAt?: string
 }
 
@@ -67,12 +73,12 @@ export function getDb(): DatabaseSync {
     PRAGMA journal_mode = WAL;
     CREATE TABLE IF NOT EXISTS activity_logs (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
-      action TEXT NOT NULL CHECK(action IN ('upload', 'delete')),
+      action TEXT NOT NULL,
       key TEXT NOT NULL,
       original_name TEXT NOT NULL,
       size INTEGER NOT NULL DEFAULT 0,
       content_type TEXT NOT NULL DEFAULT '',
-      source TEXT NOT NULL CHECK(source IN ('web', 'api')),
+      source TEXT NOT NULL,
       created_at TEXT NOT NULL
     );
     CREATE INDEX IF NOT EXISTS idx_activity_logs_created_at
@@ -105,6 +111,62 @@ export function getDb(): DatabaseSync {
   return db
 }
 
+function migrateActivityLogSchema(database: DatabaseSync): void {
+  const migrated = database.prepare(`
+    SELECT 1 FROM settings WHERE key = 'activity_logs_schema_v2'
+  `).get()
+  if (migrated) return
+
+  database.exec('BEGIN')
+  try {
+    database.exec(`
+      CREATE TABLE activity_logs_new (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        action TEXT NOT NULL,
+        key TEXT NOT NULL,
+        original_name TEXT NOT NULL,
+        size INTEGER NOT NULL DEFAULT 0,
+        content_type TEXT NOT NULL DEFAULT '',
+        source TEXT NOT NULL,
+        user_id INTEGER,
+        backend_id TEXT,
+        ip_address TEXT,
+        status TEXT NOT NULL DEFAULT 'success',
+        created_at TEXT NOT NULL
+      )
+    `)
+    database.exec(`
+      INSERT INTO activity_logs_new (
+        id, action, key, original_name, size, content_type, source,
+        user_id, backend_id, ip_address, status, created_at
+      )
+      SELECT
+        id, action, key, original_name, size, content_type, source,
+        user_id, backend_id, ip_address, COALESCE(status, 'success'), created_at
+      FROM activity_logs
+    `)
+    database.exec('DROP TABLE activity_logs')
+    database.exec('ALTER TABLE activity_logs_new RENAME TO activity_logs')
+    database.exec(`
+      CREATE INDEX IF NOT EXISTS idx_activity_logs_created_at
+        ON activity_logs(created_at DESC);
+      CREATE INDEX IF NOT EXISTS idx_activity_logs_action_created
+        ON activity_logs(action, created_at DESC);
+      CREATE INDEX IF NOT EXISTS idx_activity_logs_user_created
+        ON activity_logs(user_id, created_at DESC);
+    `)
+    const now = new Date().toISOString()
+    database.prepare(`
+      INSERT INTO settings (key, value, updated_at)
+      VALUES ('activity_logs_schema_v2', '1', ?)
+    `).run(now)
+    database.exec('COMMIT')
+  } catch (error) {
+    database.exec('ROLLBACK')
+    throw error
+  }
+}
+
 function migrateSchema(database: DatabaseSync): void {
   const columns = database.prepare('PRAGMA table_info(users)').all() as Array<{
     name: string
@@ -161,10 +223,44 @@ function migrateSchema(database: DatabaseSync): void {
   if (!activityLogColumns.some(column => column.name === 'backend_id')) {
     database.exec('ALTER TABLE activity_logs ADD COLUMN backend_id TEXT')
   }
+  const activityLogColumnsAfter = database.prepare('PRAGMA table_info(activity_logs)').all() as Array<{
+    name: string
+  }>
+  if (!activityLogColumnsAfter.some(column => column.name === 'ip_address')) {
+    database.exec('ALTER TABLE activity_logs ADD COLUMN ip_address TEXT')
+  }
+  if (!activityLogColumnsAfter.some(column => column.name === 'status')) {
+    database.exec(`ALTER TABLE activity_logs ADD COLUMN status TEXT NOT NULL DEFAULT 'success'`)
+  }
 
   database.exec(`
     UPDATE activity_logs SET source = 'api' WHERE source = 'twikoo'
   `)
+
+  migrateActivityLogSchema(database)
+
+  // tags schema (lazy import avoided — keep migration in tags.ts)
+  database.exec(`
+    CREATE TABLE IF NOT EXISTS tags (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      user_id INTEGER NOT NULL,
+      name TEXT NOT NULL,
+      color TEXT,
+      created_at TEXT NOT NULL,
+      UNIQUE(user_id, name),
+      FOREIGN KEY (user_id) REFERENCES users(id)
+    );
+    CREATE INDEX IF NOT EXISTS idx_tags_user_id ON tags(user_id);
+    CREATE TABLE IF NOT EXISTS image_tags (
+      image_key TEXT NOT NULL,
+      tag_id INTEGER NOT NULL,
+      PRIMARY KEY (image_key, tag_id),
+      FOREIGN KEY (image_key) REFERENCES images(key) ON DELETE CASCADE,
+      FOREIGN KEY (tag_id) REFERENCES tags(id) ON DELETE CASCADE
+    );
+    CREATE INDEX IF NOT EXISTS idx_image_tags_tag_id ON image_tags(tag_id);
+    CREATE INDEX IF NOT EXISTS idx_image_tags_image_key ON image_tags(image_key);
+  `)
 }
 
 const USER_COLUMNS = 'id, username, password_hash, role, created_at, api_token, auto_delete_days, auto_delete_enabled_at'
@@ -448,8 +544,8 @@ export function insertActivityLog(input: ActivityLogInput): void {
     const createdAt = input.createdAt ?? new Date().toISOString()
     getDb().prepare(`
       INSERT INTO activity_logs
-        (action, key, original_name, size, content_type, source, user_id, backend_id, created_at)
-      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
+        (action, key, original_name, size, content_type, source, user_id, backend_id, ip_address, status, created_at)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
     `).run(
       input.action,
       input.key,
@@ -459,6 +555,8 @@ export function insertActivityLog(input: ActivityLogInput): void {
       input.source,
       input.userId ?? null,
       input.backendId ?? null,
+      input.ipAddress ?? null,
+      input.status ?? 'success',
       createdAt
     )
   } catch (error) {
@@ -505,6 +603,8 @@ export function listActivityLogs(options: {
   folder?: string
   userId?: number
   search?: string
+  dateFrom?: string
+  dateTo?: string
 }): {
   items: ActivityLogRow[]
   total: number
@@ -542,6 +642,8 @@ export function listActivityLogs(options: {
       al.backend_id,
       sb.name AS backend_name,
       sb.type AS backend_type,
+      al.ip_address,
+      al.status,
       al.created_at
     FROM activity_logs al
     LEFT JOIN users u ON u.id = al.user_id
@@ -565,6 +667,8 @@ export function summarizeActivityLogs(options: {
   folder?: string
   userId?: number
   search?: string
+  dateFrom?: string
+  dateTo?: string
 }): {
   total: number
   upload: number
@@ -595,6 +699,8 @@ function buildActivityLogWhere(
     folder?: string
     userId?: number
     search?: string
+    dateFrom?: string
+    dateTo?: string
   },
   { includeAction = true }: { includeAction?: boolean } = {}
 ): { whereSql: string, params: Array<string | number> } {
@@ -617,9 +723,18 @@ function buildActivityLogWhere(
     where.push('al.user_id = ?')
     params.push(options.userId)
   }
+  if (options.dateFrom) {
+    where.push('al.created_at >= ?')
+    params.push(options.dateFrom)
+  }
+  if (options.dateTo) {
+    where.push('al.created_at < ?')
+    params.push(options.dateTo)
+  }
   if (options.search) {
-    where.push('al.original_name LIKE ?')
-    params.push(`%${options.search}%`)
+    where.push('(al.original_name LIKE ? OR al.key LIKE ? OR al.ip_address LIKE ?)')
+    const pattern = `%${options.search}%`
+    params.push(pattern, pattern, pattern)
   }
 
   return {
@@ -680,11 +795,11 @@ function countBySource(): Record<LogSource, number> {
     GROUP BY source
   `).all() as unknown as Array<{ source: LogSource, total: number }>
 
-  const result: Record<LogSource, number> = { web: 0, api: 0 }
+  const result: Record<LogSource, number> = { web: 0, api: 0, admin: 0 }
   for (const row of rows) {
     const raw = row.source as string
     const source = raw === 'twikoo' ? 'api' : row.source
-    if (source === 'web' || source === 'api') {
+    if (source === 'web' || source === 'api' || source === 'admin') {
       result[source] += row.total
     }
   }
diff --git a/server/utils/image-index.ts b/server/utils/image-index.ts
index 2557e2e..d4a4cc6 100644
--- a/server/utils/image-index.ts
+++ b/server/utils/image-index.ts
@@ -4,6 +4,7 @@ import { getDb, getUploadSourcesForKeys } from './db'
 import { getDataDir } from './data-dir'
 import { contentTypeFromKey } from './content-type'
 import { DEFAULT_FOLDER, toCanonicalImageKey, validateImageKey } from './image-key'
+import { buildTagFilterSql, type TagFilterInput } from './tags'
 import { isBareImageFilename, isHiddenImageDatePath } from './image-public-path'
 import {
   ensureDefaultBackends,
@@ -406,7 +407,8 @@ export function updateImageBackendId(key: string, backendId: string): void {
 
 export async function countImages(
   userFilter?: number | 'admin',
-  backendId?: string
+  backendId?: string,
+  tagFilter?: TagFilterInput
 ): Promise<number> {
   ensureStorageSchema()
   const params: Array<string | number> = []
@@ -414,8 +416,9 @@ export async function countImages(
 
   const userSql = buildUserFilterSql(userFilter, params)
   const backendSql = buildBackendFilterSql(backendId, params)
+  const tagSql = buildTagFilterSql(tagFilter, params)
   const row = getDb().prepare(`
-    SELECT COUNT(*) AS count FROM images WHERE ${clauses.join(' AND ')}${userSql}${backendSql}
+    SELECT COUNT(*) AS count FROM images WHERE ${clauses.join(' AND ')}${userSql}${backendSql}${tagSql}
   `).get(...params) as { count: number }
 
   return row.count
@@ -462,6 +465,7 @@ export async function listImages(options: {
   backendId?: string
   contentType?: string
   uploadSource?: 'web' | 'api'
+  tagFilter?: TagFilterInput
 }): Promise<PaginatedResult<StoredImage>> {
   ensureStorageSchema()
   const params: Array<string | number> = []
@@ -469,10 +473,11 @@ export async function listImages(options: {
 
   const userSql = buildUserFilterSql(options.userFilter, params)
   const backendSql = buildBackendFilterSql(options.backendId, params)
+  const tagSql = buildTagFilterSql(options.tagFilter, params)
   const rows = getDb().prepare(`
     SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at
     FROM images
-    WHERE ${clauses.join(' AND ')}${userSql}${backendSql}
+    WHERE ${clauses.join(' AND ')}${userSql}${backendSql}${tagSql}
     ORDER BY uploaded_at DESC, key DESC
   `).all(...params) as unknown as ImageIndexRow[]
 
@@ -495,6 +500,7 @@ export async function searchImages(options: {
   backendId?: string
   contentType?: string
   uploadSource?: 'web' | 'api'
+  tagFilter?: TagFilterInput
 }): Promise<PaginatedResult<StoredImage>> {
   ensureStorageSchema()
   const needle = options.query.trim().toLowerCase()
@@ -503,10 +509,11 @@ export async function searchImages(options: {
 
   const userSql = buildUserFilterSql(options.userFilter, params)
   const backendSql = buildBackendFilterSql(options.backendId, params)
+  const tagSql = buildTagFilterSql(options.tagFilter, params)
   const rows = getDb().prepare(`
     SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at
     FROM images
-    WHERE ${clauses.join(' AND ')}${userSql}${backendSql}
+    WHERE ${clauses.join(' AND ')}${userSql}${backendSql}${tagSql}
     ORDER BY uploaded_at DESC, key DESC
   `).all(...params) as unknown as ImageIndexRow[]
 
@@ -528,16 +535,18 @@ export async function searchImages(options: {
 }
 
 export async function getFolderStorageStats(
-  userFilter?: number | 'admin'
+  userFilter?: number | 'admin',
+  tagFilter?: TagFilterInput
 ): Promise<Array<{ folder: string, count: number, bytes: number }>> {
   ensureStorageSchema()
   const params: Array<string | number> = []
   const userSql = buildUserFilterSql(userFilter, params)
+  const tagSql = buildTagFilterSql(tagFilter, params)
 
   const rows = getDb().prepare(`
     SELECT folder, COUNT(*) AS count, COALESCE(SUM(size), 0) AS bytes
     FROM images
-    WHERE 1=1${userSql}
+    WHERE 1=1${userSql}${tagSql}
     GROUP BY folder
     ORDER BY bytes DESC, folder ASC
   `).all(...params) as Array<{ folder: string, count: number, bytes: number }>
@@ -572,7 +581,10 @@ function startOfYesterdayIsoInShanghai(now = new Date()): string {
   return new Date(new Date(startOfDay).getTime() - 24 * 60 * 60 * 1000).toISOString()
 }
 
-export async function getUserScopedStorageStats(userId: number): Promise<{
+export async function getUserScopedStorageStats(
+  userId: number,
+  tagFilter?: TagFilterInput
+): Promise<{
   storedCount: number
   uploadBytesTotal: number
   uploadToday: number
@@ -587,11 +599,13 @@ export async function getUserScopedStorageStats(userId: number): Promise<{
   const startOfYesterday = startOfYesterdayIsoInShanghai()
   const startOfLastMonth = startOfLastMonthIsoInShanghai()
 
+  const params: Array<string | number> = [userId]
+  const tagSql = buildTagFilterSql(tagFilter, params)
   const rows = getDb().prepare(`
     SELECT folder, size, uploaded_at
     FROM images
-    WHERE user_id = ?
-  `).all(userId) as Array<{ folder: string, size: number, uploaded_at: string }>
+    WHERE user_id = ?${tagSql}
+  `).all(...params) as Array<{ folder: string, size: number, uploaded_at: string }>
 
   const map = new Map<string, { count: number, bytes: number }>()
   let uploadBytesTotal = 0
diff --git a/server/utils/image-query.ts b/server/utils/image-query.ts
index 82095c2..35c5428 100644
--- a/server/utils/image-query.ts
+++ b/server/utils/image-query.ts
@@ -1,5 +1,6 @@
 import { getStorageBackendRow } from './storage-backends'
 import { ALLOWED_MIME_TYPES } from './constants'
+import { parseTagIdsParam, type TagFilterInput } from './tags'
 
 export function readBackendIdQuery(
   query: Record<string, unknown>
@@ -26,3 +27,30 @@ export function readUploadSourceQuery(
   if (raw === 'web' || raw === 'api') return raw
   return null
 }
+
+export function readTagFilterQuery(
+  query: Record<string, unknown>
+): TagFilterInput | null | undefined {
+  const untaggedRaw = query.untagged
+  const untaggedOnly = untaggedRaw === '1'
+    || untaggedRaw === 'true'
+    || untaggedRaw === true
+
+  const tagIds = parseTagIdsParam(query.tagIds ?? query.tagId)
+  const tagModeRaw = typeof query.tagMode === 'string' ? query.tagMode.trim().toLowerCase() : ''
+  const tagMode = tagModeRaw === 'and' ? 'and' : 'or'
+
+  if (untaggedOnly && tagIds.length) {
+    return null
+  }
+
+  if (!untaggedOnly && !tagIds.length) {
+    return undefined
+  }
+
+  return {
+    tagIds: tagIds.length ? tagIds : undefined,
+    tagMode,
+    untaggedOnly: untaggedOnly || undefined
+  }
+}
diff --git a/server/utils/image-response.ts b/server/utils/image-response.ts
index 8502426..eaf6bbe 100644
--- a/server/utils/image-response.ts
+++ b/server/utils/image-response.ts
@@ -3,6 +3,8 @@ import type { ImageItem } from '~/types/image'
 import type { LogSource } from './db'
 import type { AllowedMimeType } from './constants'
 import type { StoredImage } from './storage'
+import type { TagItem } from './tags'
+import { getTagsForImageKeys } from './tags'
 import { getImageBaseUrl, isHideFolderInUrl } from './env'
 import { toPublicImagePath } from './image-public-path'
 import { getActiveBackendRow } from './storage/resolver'
@@ -10,6 +12,17 @@ import { getStorageBackendRow, getStorageBackendFromEnv } from './storage-backen
 import type { StorageBackendType, StorageBackendRow } from './storage/types'
 import { buildObjectKey, parseS3Config } from './storage/s3'
 
+export function attachTagsToImageItems(items: ImageItem[]): ImageItem[] {
+  if (!items.length) return items
+  const tagMap = getTagsForImageKeys(items.map(item => item.key))
+  return items.map(item => ({
+    ...item,
+    tags: tagMap.get(item.key) ?? []
+  }))
+}
+
+export type { TagItem }
+
 export function resolveImageOwner(
   userId: number | null | undefined,
   ownerMap?: Map<number, string>
@@ -72,7 +85,7 @@ export function mapStoredImageToItem(
     ...item,
     ...(owner ? { owner } : {}),
     ...(storage ? { storage } : {}),
-    ...(uploadSource ? { uploadSource } : {})
+    ...(uploadSource === 'web' || uploadSource === 'api' ? { uploadSource } : {})
   }
 }
 
diff --git a/server/utils/process-image-upload.ts b/server/utils/process-image-upload.ts
index 494be77..fef0e13 100644
--- a/server/utils/process-image-upload.ts
+++ b/server/utils/process-image-upload.ts
@@ -15,7 +15,8 @@ import type { LogSource } from './db'
 import { generateImageKey } from './image-key'
 import { buildImageItem, sanitizeOriginalName } from './image-response'
 import { getStorageLayout, getWebpQuality } from './env'
-import { insertActivityLog } from './db'
+import { logActivity } from './activity-log'
+import { attachTagsAfterUpload, getTagsForImageKeys } from './tags'
 import { putImage } from './storage'
 import { logInfo, logException } from './logger'
 
@@ -64,6 +65,7 @@ export async function processSingleImageUpload(
     filename?: string
     source?: LogSource
     userId?: number | null
+    tagIds?: number[]
   }
 ): Promise<{ item: ImageItem } | { error: UploadErrorItem }> {
   const originalName = sanitizeOriginalName(input.filename ?? 'image')
@@ -149,16 +151,15 @@ export async function processSingleImageUpload(
     }
   }
 
-  insertActivityLog({
+  logActivity(event, {
     action: 'upload',
     key,
     originalName,
     size: compressed.bytes.byteLength,
     contentType: compressed.mime,
-    source: input.source ?? 'web',
+    source: input.source,
     userId: input.userId ?? null,
-    backendId,
-    createdAt: uploadedAt
+    backendId
   })
 
   logInfo('upload success', {
@@ -168,17 +169,26 @@ export async function processSingleImageUpload(
     source: input.source ?? 'web'
   })
 
+  if (input.tagIds?.length && input.userId != null) {
+    attachTagsAfterUpload(key, input.tagIds, input.userId)
+  }
+
+  const item = buildImageItem({
+    key,
+    event,
+    originalName,
+    contentType: compressed.mime,
+    size: compressed.bytes.byteLength,
+    uploadedAt
+  })
+
+  const tags = getTagsForImageKeys([key]).get(key) ?? []
+
   return {
     item: {
-      ...buildImageItem({
-        key,
-        event,
-        originalName,
-        contentType: compressed.mime,
-        size: compressed.bytes.byteLength,
-        uploadedAt
-      }),
-      uploadSource: input.source ?? 'web'
+      ...item,
+      uploadSource: input.source === 'api' ? 'api' : 'web',
+      ...(tags.length ? { tags } : {})
     }
   }
 }
diff --git a/server/utils/storage.ts b/server/utils/storage.ts
index 2f36145..b51d535 100644
--- a/server/utils/storage.ts
+++ b/server/utils/storage.ts
@@ -19,6 +19,7 @@ import {
   searchImages as searchImagesFromIndex
 } from './image-index'
 import { DEFAULT_FOLDER, toCanonicalImageKey, validateImageKey } from './image-key'
+import type { TagFilterInput } from './tags'
 import {
   getActiveBackend,
   getBackendForKey
@@ -171,15 +172,17 @@ export async function listImageKeys(): Promise<string[]> {
 
 export async function countImages(
   userFilter?: number | 'admin',
-  backendId?: string
+  backendId?: string,
+  tagFilter?: TagFilterInput
 ): Promise<number> {
-  return countImagesFromIndex(userFilter, backendId)
+  return countImagesFromIndex(userFilter, backendId, tagFilter)
 }
 
 export async function getFolderStorageStats(
-  userFilter?: number | 'admin'
+  userFilter?: number | 'admin',
+  tagFilter?: TagFilterInput
 ): Promise<FolderStorageStat[]> {
-  return getFolderStorageStatsFromIndex(userFilter)
+  return getFolderStorageStatsFromIndex(userFilter, tagFilter)
 }
 
 export async function listFoldersForUser(
@@ -188,7 +191,10 @@ export async function listFoldersForUser(
   return listFoldersForUserFromIndex(userFilter)
 }
 
-export async function getUserScopedStorageStats(userId: number): Promise<{
+export async function getUserScopedStorageStats(
+  userId: number,
+  tagFilter?: TagFilterInput
+): Promise<{
   storedCount: number
   uploadBytesTotal: number
   uploadToday: number
@@ -197,7 +203,7 @@ export async function getUserScopedStorageStats(userId: number): Promise<{
   uploadLastMonth: number
   byFolder: FolderStorageStat[]
 }> {
-  return getUserScopedStorageStatsFromIndex(userId)
+  return getUserScopedStorageStatsFromIndex(userId, tagFilter)
 }
 
 export async function listImages(options: {
@@ -207,6 +213,7 @@ export async function listImages(options: {
   backendId?: string
   contentType?: string
   uploadSource?: 'web' | 'api'
+  tagFilter?: TagFilterInput
 }): Promise<PaginatedResult<StoredImage>> {
   return listImagesFromIndex(options)
 }
@@ -219,6 +226,7 @@ export async function searchImages(options: {
   backendId?: string
   contentType?: string
   uploadSource?: 'web' | 'api'
+  tagFilter?: TagFilterInput
 }): Promise<PaginatedResult<StoredImage>> {
   return searchImagesFromIndex(options)
 }
diff --git a/server/utils/tag-api.ts b/server/utils/tag-api.ts
new file mode 100644
index 0000000..f3b38e8
--- /dev/null
+++ b/server/utils/tag-api.ts
@@ -0,0 +1,29 @@
+import type { H3Event } from 'h3'
+import { createApiError } from './api-error'
+
+export function handleTagApiError(event: H3Event, error: unknown): never {
+  if (error instanceof Error) {
+    if (error.message === 'INVALID_TAG_NAME') {
+      createApiError(event, 'INVALID_REQUEST', '标签名称无效（1–32 字）', 400)
+    }
+    if (error.message === 'INVALID_TAG_COLOR') {
+      createApiError(event, 'INVALID_REQUEST', '标签颜色格式无效', 400)
+    }
+    if (error.message === 'TAG_EXISTS') {
+      createApiError(event, 'CONFLICT', '标签已存在', 409)
+    }
+    if (error.message === 'TAG_LIMIT_REACHED') {
+      createApiError(event, 'INVALID_REQUEST', '标签数量已达上限', 400)
+    }
+    if (error.message === 'TAG_NOT_FOUND') {
+      createApiError(event, 'INVALID_REQUEST', '标签不存在', 404)
+    }
+    if (error.message === 'IMAGE_NOT_FOUND') {
+      createApiError(event, 'IMAGE_NOT_FOUND', '图片不存在', 404)
+    }
+    if (error.message === 'FORBIDDEN') {
+      createApiError(event, 'FORBIDDEN', '无权操作', 403)
+    }
+  }
+  throw error
+}
diff --git a/server/utils/tags.test.ts b/server/utils/tags.test.ts
new file mode 100644
index 0000000..9e52fe9
--- /dev/null
+++ b/server/utils/tags.test.ts
@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildTagFilterSql,
+  isValidTagColor,
+  isValidTagName,
+  normalizeTagName,
+  parseTagIdsParam
+} from './tags'
+
+describe('normalizeTagName', () => {
+  it('trims and collapses whitespace', () => {
+    expect(normalizeTagName('  工作   截图  ')).toBe('工作 截图')
+  })
+})
+
+describe('isValidTagName', () => {
+  it('accepts 1-32 char names', () => {
+    expect(isValidTagName('工作')).toBe(true)
+    expect(isValidTagName('a'.repeat(32))).toBe(true)
+  })
+
+  it('rejects empty or too long names', () => {
+    expect(isValidTagName('')).toBe(false)
+    expect(isValidTagName('   ')).toBe(false)
+    expect(isValidTagName('a'.repeat(33))).toBe(false)
+  })
+})
+
+describe('isValidTagColor', () => {
+  it('accepts hex colors and empty', () => {
+    expect(isValidTagColor('#22c55e')).toBe(true)
+    expect(isValidTagColor(null)).toBe(true)
+    expect(isValidTagColor('')).toBe(true)
+  })
+
+  it('rejects invalid colors', () => {
+    expect(isValidTagColor('red')).toBe(false)
+    expect(isValidTagColor('#abc')).toBe(false)
+  })
+})
+
+describe('parseTagIdsParam', () => {
+  it('parses comma-separated and array values', () => {
+    expect(parseTagIdsParam('1,2,3')).toEqual([1, 2, 3])
+    expect(parseTagIdsParam(['4', '5'])).toEqual([4, 5])
+  })
+
+  it('deduplicates and skips invalid entries', () => {
+    expect(parseTagIdsParam('1,1,abc,0,-1')).toEqual([1])
+    expect(parseTagIdsParam('')).toEqual([])
+  })
+})
+
+describe('buildTagFilterSql', () => {
+  it('returns empty sql without filter', () => {
+    const params: Array<string | number> = []
+    expect(buildTagFilterSql(undefined, params)).toBe('')
+    expect(params).toEqual([])
+  })
+
+  it('filters untagged images', () => {
+    const params: Array<string | number> = []
+    const sql = buildTagFilterSql({ untaggedOnly: true }, params)
+    expect(sql).toContain('NOT IN')
+    expect(params).toEqual([])
+  })
+
+  it('filters by tag ids with OR semantics', () => {
+    const params: Array<string | number> = []
+    const sql = buildTagFilterSql({ tagIds: [2, 5] }, params)
+    expect(sql).toContain('tag_id IN')
+    expect(params).toEqual([2, 5])
+  })
+
+  it('filters by tag ids with AND semantics', () => {
+    const params: Array<string | number> = []
+    const sql = buildTagFilterSql({ tagIds: [2, 5], tagMode: 'and' }, params)
+    expect(sql).toContain('HAVING COUNT(DISTINCT tag_id) = 2')
+    expect(params).toEqual([2, 5])
+  })
+})
diff --git a/server/utils/tags.ts b/server/utils/tags.ts
new file mode 100644
index 0000000..9877214
--- /dev/null
+++ b/server/utils/tags.ts
@@ -0,0 +1,473 @@
+import { getDb } from './db'
+import { getImageIndexRow } from './image-index'
+
+export const TAG_COLOR_PRESETS = [
+  '#22c55e',
+  '#3b82f6',
+  '#f59e0b',
+  '#ef4444',
+  '#8b5cf6',
+  '#06b6d4',
+  '#ec4899',
+  '#84cc16',
+  '#f97316',
+  '#6366f1',
+  '#14b8a6',
+  '#64748b'
+] as const
+
+export const MAX_TAGS_PER_USER = 50
+export const MAX_TAG_NAME_LENGTH = 32
+
+export interface TagRow {
+  id: number
+  user_id: number
+  name: string
+  color: string | null
+  created_at: string
+}
+
+export interface TagItem {
+  id: number
+  name: string
+  color: string
+  imageCount: number
+  createdAt: string
+  lastUsedAt: string | null
+}
+
+export function normalizeTagName(name: string): string {
+  return name.trim().replace(/\s+/g, ' ')
+}
+
+export function isValidTagName(name: string): boolean {
+  const normalized = normalizeTagName(name)
+  return normalized.length >= 1 && normalized.length <= MAX_TAG_NAME_LENGTH
+}
+
+export function isValidTagColor(color: string | null | undefined): boolean {
+  if (color == null || color === '') return true
+  return /^#[0-9A-Fa-f]{6}$/.test(color)
+}
+
+export function normalizeStoredTagColor(color: string | null | undefined): string | null {
+  if (color == null) return null
+  const trimmed = color.trim()
+  if (!trimmed) return null
+  const withHash = trimmed.startsWith('#') ? trimmed : `#${trimmed}`
+  return /^#[0-9A-Fa-f]{6}$/.test(withHash) ? withHash.toLowerCase() : null
+}
+
+export function defaultTagColor(tagId: number): string {
+  return TAG_COLOR_PRESETS[tagId % TAG_COLOR_PRESETS.length]!
+}
+
+export function ensureTagSchema(): void {
+  const db = getDb()
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS tags (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      user_id INTEGER NOT NULL,
+      name TEXT NOT NULL,
+      color TEXT,
+      created_at TEXT NOT NULL,
+      UNIQUE(user_id, name),
+      FOREIGN KEY (user_id) REFERENCES users(id)
+    );
+    CREATE INDEX IF NOT EXISTS idx_tags_user_id ON tags(user_id);
+    CREATE TABLE IF NOT EXISTS image_tags (
+      image_key TEXT NOT NULL,
+      tag_id INTEGER NOT NULL,
+      PRIMARY KEY (image_key, tag_id),
+      FOREIGN KEY (image_key) REFERENCES images(key) ON DELETE CASCADE,
+      FOREIGN KEY (tag_id) REFERENCES tags(id) ON DELETE CASCADE
+    );
+    CREATE INDEX IF NOT EXISTS idx_image_tags_tag_id ON image_tags(tag_id);
+    CREATE INDEX IF NOT EXISTS idx_image_tags_image_key ON image_tags(image_key);
+  `)
+}
+
+function rowToTagItem(
+  row: TagRow,
+  imageCount: number,
+  lastUsedAt: string | null = null
+): TagItem {
+  return {
+    id: row.id,
+    name: row.name,
+    color: normalizeStoredTagColor(row.color) ?? defaultTagColor(row.id),
+    imageCount,
+    createdAt: row.created_at,
+    lastUsedAt
+  }
+}
+
+function countImagesForTag(tagId: number): number {
+  const row = getDb().prepare(`
+    SELECT COUNT(*) AS count FROM image_tags WHERE tag_id = ?
+  `).get(tagId) as { count: number }
+  return row.count
+}
+
+export function listTagsForUser(userId: number): TagItem[] {
+  ensureTagSchema()
+  const rows = getDb().prepare(`
+    SELECT t.id, t.user_id, t.name, t.color, t.created_at,
+           COUNT(it.image_key) AS image_count,
+           MAX(i.uploaded_at) AS last_used_at
+    FROM tags t
+    LEFT JOIN image_tags it ON it.tag_id = t.id
+    LEFT JOIN images i ON i.key = it.image_key
+    WHERE t.user_id = ?
+    GROUP BY t.id
+    ORDER BY t.name ASC
+  `).all(userId) as unknown as Array<TagRow & { image_count: number, last_used_at: string | null }>
+
+  return rows.map(row => rowToTagItem(row, row.image_count, row.last_used_at))
+}
+
+export function getTagById(tagId: number): TagRow | null {
+  ensureTagSchema()
+  return getDb().prepare(`
+    SELECT id, user_id, name, color, created_at FROM tags WHERE id = ?
+  `).get(tagId) as TagRow | undefined ?? null
+}
+
+export function getTagForUser(userId: number, tagId: number): TagRow | null {
+  const row = getTagById(tagId)
+  if (!row || row.user_id !== userId) return null
+  return row
+}
+
+export function findTagByName(userId: number, name: string): TagRow | null {
+  ensureTagSchema()
+  const normalized = normalizeTagName(name)
+  return getDb().prepare(`
+    SELECT id, user_id, name, color, created_at
+    FROM tags
+    WHERE user_id = ? AND name = ?
+  `).get(userId, normalized) as TagRow | undefined ?? null
+}
+
+export function createTag(
+  userId: number,
+  name: string,
+  color?: string | null
+): TagItem {
+  ensureTagSchema()
+  const normalized = normalizeTagName(name)
+  if (!isValidTagName(normalized)) {
+    throw new Error('INVALID_TAG_NAME')
+  }
+  if (color != null && color !== '' && !isValidTagColor(color)) {
+    throw new Error('INVALID_TAG_COLOR')
+  }
+
+  const existing = findTagByName(userId, normalized)
+  if (existing) {
+    throw new Error('TAG_EXISTS')
+  }
+
+  const count = getDb().prepare(`
+    SELECT COUNT(*) AS count FROM tags WHERE user_id = ?
+  `).get(userId) as { count: number }
+  if (count.count >= MAX_TAGS_PER_USER) {
+    throw new Error('TAG_LIMIT_REACHED')
+  }
+
+  const createdAt = new Date().toISOString()
+  const storedColor = normalizeStoredTagColor(color)
+  const result = getDb().prepare(`
+    INSERT INTO tags (user_id, name, color, created_at)
+    VALUES (?, ?, ?, ?)
+  `).run(userId, normalized, storedColor, createdAt)
+
+  const id = Number(result.lastInsertRowid)
+  const row = getTagById(id)!
+  return rowToTagItem(row, 0)
+}
+
+export function updateTag(
+  userId: number,
+  tagId: number,
+  patch: { name?: string, color?: string | null }
+): TagItem {
+  ensureTagSchema()
+  const row = getTagForUser(userId, tagId)
+  if (!row) {
+    throw new Error('TAG_NOT_FOUND')
+  }
+
+  let nextName = row.name
+  if (patch.name !== undefined) {
+    const normalized = normalizeTagName(patch.name)
+    if (!isValidTagName(normalized)) {
+      throw new Error('INVALID_TAG_NAME')
+    }
+    if (normalized !== row.name) {
+      const duplicate = findTagByName(userId, normalized)
+      if (duplicate && duplicate.id !== tagId) {
+        throw new Error('TAG_EXISTS')
+      }
+      nextName = normalized
+    }
+  }
+
+  let nextColor = row.color
+  if (patch.color !== undefined) {
+    if (patch.color !== null && patch.color !== '' && !isValidTagColor(patch.color)) {
+      throw new Error('INVALID_TAG_COLOR')
+    }
+    nextColor = normalizeStoredTagColor(patch.color)
+  }
+
+  getDb().prepare(`
+    UPDATE tags SET name = ?, color = ? WHERE id = ?
+  `).run(nextName, nextColor, tagId)
+
+  const updated = getTagById(tagId)!
+  return rowToTagItem(updated, countImagesForTag(tagId))
+}
+
+export function deleteTag(userId: number, tagId: number): boolean {
+  ensureTagSchema()
+  const row = getTagForUser(userId, tagId)
+  if (!row) return false
+  getDb().prepare('DELETE FROM tags WHERE id = ?').run(tagId)
+  return true
+}
+
+export function mergeTags(
+  userId: number,
+  sourceIds: number[],
+  targetId: number
+): TagItem {
+  ensureTagSchema()
+  const uniqueSources = [...new Set(sourceIds.filter(id => id !== targetId))]
+  const target = getTagForUser(userId, targetId)
+  if (!target) {
+    throw new Error('TAG_NOT_FOUND')
+  }
+
+  for (const sourceId of uniqueSources) {
+    const source = getTagForUser(userId, sourceId)
+    if (!source) {
+      throw new Error('TAG_NOT_FOUND')
+    }
+  }
+
+  const db = getDb()
+  db.exec('BEGIN')
+  try {
+    for (const sourceId of uniqueSources) {
+      db.prepare(`
+        INSERT OR IGNORE INTO image_tags (image_key, tag_id)
+        SELECT image_key, ? FROM image_tags WHERE tag_id = ?
+      `).run(targetId, sourceId)
+      db.prepare('DELETE FROM image_tags WHERE tag_id = ?').run(sourceId)
+      db.prepare('DELETE FROM tags WHERE id = ?').run(sourceId)
+    }
+    db.exec('COMMIT')
+  } catch (error) {
+    db.exec('ROLLBACK')
+    throw error
+  }
+
+  const updated = getTagById(targetId)!
+  return rowToTagItem(updated, countImagesForTag(targetId))
+}
+
+export function getTagsForImageKeys(keys: string[]): Map<string, TagItem[]> {
+  ensureTagSchema()
+  const map = new Map<string, TagItem[]>()
+  if (!keys.length) return map
+
+  const placeholders = keys.map(() => '?').join(', ')
+  const rows = getDb().prepare(`
+    SELECT it.image_key, t.id, t.user_id, t.name, t.color, t.created_at
+    FROM image_tags it
+    INNER JOIN tags t ON t.id = it.tag_id
+    WHERE it.image_key IN (${placeholders})
+    ORDER BY t.name ASC
+  `).all(...keys) as unknown as Array<TagRow & { image_key: string }>
+
+  for (const row of rows) {
+    const list = map.get(row.image_key) ?? []
+    list.push(rowToTagItem(row, 0))
+    map.set(row.image_key, list)
+  }
+  return map
+}
+
+function assertTagsOwnedByUser(userId: number, tagIds: number[]): void {
+  if (!tagIds.length) return
+  const placeholders = tagIds.map(() => '?').join(', ')
+  const rows = getDb().prepare(`
+    SELECT id FROM tags WHERE user_id = ? AND id IN (${placeholders})
+  `).all(userId, ...tagIds) as Array<{ id: number }>
+  if (rows.length !== tagIds.length) {
+    throw new Error('TAG_NOT_FOUND')
+  }
+}
+
+function resolveImageOwnerUserId(key: string): number | null {
+  const row = getImageIndexRow(key)
+  return row?.user_id ?? null
+}
+
+export function assertCanTagImage(key: string, actorUserId: number, isAdmin: boolean): void {
+  const ownerId = resolveImageOwnerUserId(key)
+  if (ownerId == null) {
+    throw new Error('IMAGE_NOT_FOUND')
+  }
+  if (!isAdmin && ownerId !== actorUserId) {
+    throw new Error('FORBIDDEN')
+  }
+}
+
+export function addTagsToImage(
+  key: string,
+  tagIds: number[],
+  actorUserId: number,
+  isAdmin: boolean
+): TagItem[] {
+  ensureTagSchema()
+  assertCanTagImage(key, actorUserId, isAdmin)
+  const ownerId = resolveImageOwnerUserId(key)!
+  const uniqueTagIds = [...new Set(tagIds)]
+  assertTagsOwnedByUser(ownerId, uniqueTagIds)
+
+  const insert = getDb().prepare(`
+    INSERT OR IGNORE INTO image_tags (image_key, tag_id) VALUES (?, ?)
+  `)
+  for (const tagId of uniqueTagIds) {
+    insert.run(key, tagId)
+  }
+
+  return getTagsForImageKeys([key]).get(key) ?? []
+}
+
+export function removeTagFromImage(
+  key: string,
+  tagId: number,
+  actorUserId: number,
+  isAdmin: boolean
+): TagItem[] {
+  ensureTagSchema()
+  assertCanTagImage(key, actorUserId, isAdmin)
+  const ownerId = resolveImageOwnerUserId(key)!
+  assertTagsOwnedByUser(ownerId, [tagId])
+
+  getDb().prepare(`
+    DELETE FROM image_tags WHERE image_key = ? AND tag_id = ?
+  `).run(key, tagId)
+
+  return getTagsForImageKeys([key]).get(key) ?? []
+}
+
+export function setImageTags(
+  key: string,
+  tagIds: number[],
+  actorUserId: number,
+  isAdmin: boolean
+): TagItem[] {
+  ensureTagSchema()
+  assertCanTagImage(key, actorUserId, isAdmin)
+  const ownerId = resolveImageOwnerUserId(key)!
+  const uniqueTagIds = [...new Set(tagIds)]
+  assertTagsOwnedByUser(ownerId, uniqueTagIds)
+
+  const db = getDb()
+  db.exec('BEGIN')
+  try {
+    db.prepare('DELETE FROM image_tags WHERE image_key = ?').run(key)
+    const insert = db.prepare(`
+      INSERT INTO image_tags (image_key, tag_id) VALUES (?, ?)
+    `)
+    for (const tagId of uniqueTagIds) {
+      insert.run(key, tagId)
+    }
+    db.exec('COMMIT')
+  } catch (error) {
+    db.exec('ROLLBACK')
+    throw error
+  }
+
+  return getTagsForImageKeys([key]).get(key) ?? []
+}
+
+export function attachTagsAfterUpload(
+  key: string,
+  tagIds: number[],
+  userId: number | null
+): void {
+  if (!tagIds.length || userId == null) return
+  addTagsToImage(key, tagIds, userId, true)
+}
+
+export function batchAddTagsToImages(
+  keys: string[],
+  tagIds: number[],
+  actorUserId: number,
+  isAdmin: boolean
+): number {
+  ensureTagSchema()
+  let updated = 0
+  for (const key of keys) {
+    addTagsToImage(key, tagIds, actorUserId, isAdmin)
+    updated++
+  }
+  return updated
+}
+
+export interface TagFilterInput {
+  tagIds?: number[]
+  tagMode?: 'or' | 'and'
+  untaggedOnly?: boolean
+}
+
+export function buildTagFilterSql(
+  filter: TagFilterInput | undefined,
+  params: Array<string | number>
+): string {
+  if (!filter?.untaggedOnly && !filter?.tagIds?.length) {
+    return ''
+  }
+
+  if (filter.untaggedOnly) {
+    return ` AND images.key NOT IN (SELECT image_key FROM image_tags)`
+  }
+
+  const tagIds = filter.tagIds!
+  const placeholders = tagIds.map(() => '?').join(', ')
+  params.push(...tagIds)
+
+  if (filter.tagMode === 'and' && tagIds.length > 1) {
+    return ` AND images.key IN (
+      SELECT image_key FROM image_tags
+      WHERE tag_id IN (${placeholders})
+      GROUP BY image_key
+      HAVING COUNT(DISTINCT tag_id) = ${tagIds.length}
+    )`
+  }
+
+  return ` AND images.key IN (
+    SELECT image_key FROM image_tags WHERE tag_id IN (${placeholders})
+  )`
+}
+
+export function parseTagIdsParam(raw: unknown): number[] {
+  if (raw == null || raw === '') return []
+  const parts = Array.isArray(raw)
+    ? raw.flatMap(item => String(item).split(','))
+    : String(raw).split(',')
+  const ids: number[] = []
+  for (const part of parts) {
+    const trimmed = part.trim()
+    if (!trimmed || trimmed === 'all') continue
+    const id = Number(trimmed)
+    if (!Number.isInteger(id) || id <= 0) continue
+    ids.push(id)
+  }
+  return [...new Set(ids)]
+}