release: v1.2.8 — 双域名保存确认与 clear-domains 恢复

启用双域名时以确认框提示锁死风险与恢复方式，不再强制校验 Host。新增 clear-domains 运维 CLI 与相关文档。
docs: 补充 v1.2.7 登录验证（滑块 / Turnstile / Cap）文档
2026-09-04 14:46:37 +08:00 · 2026-09-03 13:57:20 +08:00 · 2026-09-03 13:53:43 +08:00 · 2026-09-01 21:31:02 +08:00 · 2026-09-01 17:15:02 +08:00 · 2026-08-31 16:05:53 +08:00
225 changed files with 25359 additions and 3020 deletions
@@ -11,7 +11,17 @@
 # 可选；不填可在设置页配置。若在此填写则覆盖后台设置
 # ALLOWED_REFERER_HOSTS=example.com,www.example.com

-# 图片直链域名（可选；不填则使用请求域名，也可在设置页配置）
+# 管理后台域名（可选；不填则使用当前请求域名，也可在设置页配置）
+# SITE_BASE_URL=https://admin.example.com
+
+# 隐藏图片直链中的目录前缀（如 images/2026/08/a.webp → a.webp）
+# HIDE_FOLDER_IN_URL=false
+
+# 上传目录按年/月分组（true/date 默认；false/flat 则保存为 images/xxx.webp）
+# STORAGE_USE_DATE_PATH=true
+# STORAGE_LAYOUT=date
+
+# 图片直链域名（可选；不填则使用当前请求域名，也可在设置页配置）
 # IMAGE_BASE_URL=https://pic.example.com

 # 图片存储目录（默认 ./data，容器内为 /data）
@@ -25,3 +35,6 @@

 # 仅本地开发：设为 true 可绕过登录验证（跳过 /setup，一般无需开启）
 # DEV_BYPASS_ACCESS=false
+
+# 登录人机验证（滑块 / Turnstile / Cap）在后台「设置 → 访问控制」配置，无环境变量。
+# 配置错误无法登录时：docker exec pichost slider（或 npm run slider）恢复为本地滑块。
@@ -1,6 +1,6 @@
 {
-  "description": "Self-hosted image hosting for your NAS / home server — Nuxt admin UI, local disk storage, server-side WebP compression, referer protection, Twikoo/EasyImage compatible.",
-  "homepage": "https://github.com/O96u/PicHost#readme",
+  "description": "Lightweight self-hosted image hosting — Docker, multi-user, gallery & API, local disk or S3-compatible storage.",
+  "homepage": "https://o96u.github.io/PicHost/",
  "topics": [
    "docker",
    "image-hosting",
@@ -37,3 +37,6 @@ jobs:

      - name: Test
        run: npm run test
+
+      - name: Build docs
+        run: npm run docs:build
@@ -2,22 +2,30 @@ name: Publish Docker image

 on:
  push:
-    branches: [main]
    tags:
      - 'v*'
  workflow_dispatch:

 permissions:
  contents: read
-  packages: write

 env:
  IMAGE_NAME: pichost

 jobs:
-  build-and-push:
+  build:
    if: ${{ !contains(github.event.head_commit.message, '[skip docker]') }}
-    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+            suffix: amd64
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
+            suffix: arm64
+    runs-on: ${{ matrix.runner }}
    env:
      DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
      DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -25,59 +33,67 @@ jobs:
      - name: Checkout
        uses: actions/checkout@v7

-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

-      - name: Log in to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
      - name: Log in to Docker Hub
-        if: env.DOCKERHUB_USERNAME != '' && env.DOCKERHUB_TOKEN != ''
        uses: docker/login-action@v3
        with:
          username: ${{ env.DOCKERHUB_USERNAME }}
          password: ${{ env.DOCKERHUB_TOKEN }}

-      - name: Resolve image names
-        id: images
+      - name: Resolve version
+        id: version
        run: |
-          names="ghcr.io/${OWNER}/${IMAGE_NAME}"
-          if [ -n "${DOCKERHUB_USERNAME}" ]; then
-            names="${names}
-          ${DOCKERHUB_USERNAME}/${IMAGE_NAME}"
+          if [ "${{ github.ref_type }}" = "tag" ]; then
+            echo "value=${GITHUB_REF#refs/tags/v}" >> "$GITHUB_OUTPUT"
+          else
+            echo "value=dev" >> "$GITHUB_OUTPUT"
          fi
-          {
-            echo "list<<EOF"
-            echo "${names}"
-            echo "EOF"
-          } >> "$GITHUB_OUTPUT"
-        env:
-          OWNER: ${{ github.repository_owner }}

-      - name: Extract metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          # Same tags for ghcr.io and Docker Hub: latest + 1.0.0 (no v prefix)
-          images: ${{ steps.images.outputs.list }}
-          tags: |
-            type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') }}
-            type=semver,pattern={{version}}
-
-      - name: Build and push
+      - name: Build and push platform image
        uses: docker/build-push-action@v6
        with:
          context: .
          push: true
-          platforms: linux/amd64,linux/arm64
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+          platforms: ${{ matrix.platform }}
+          tags: |
+            ${{ env.DOCKERHUB_USERNAME }}/${{ env.IMAGE_NAME }}:${{ steps.version.outputs.value }}-${{ matrix.suffix }}
+          cache-from: type=gha,scope=${{ matrix.suffix }}
+          cache-to: type=gha,mode=max,scope=${{ matrix.suffix }}
+
+  merge:
+    if: ${{ !contains(github.event.head_commit.message, '[skip docker]') }}
+    needs: build
+    runs-on: ubuntu-latest
+    env:
+      DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+      DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ env.DOCKERHUB_USERNAME }}
+          password: ${{ env.DOCKERHUB_TOKEN }}
+
+      - name: Resolve version
+        id: version
+        run: |
+          if [ "${{ github.ref_type }}" = "tag" ]; then
+            echo "value=${GITHUB_REF#refs/tags/v}" >> "$GITHUB_OUTPUT"
+          else
+            echo "value=dev" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Create multi-arch manifest
+        run: |
+          IMAGE="${DOCKERHUB_USERNAME}/${IMAGE_NAME}"
+          VERSION="${{ steps.version.outputs.value }}"
+          docker buildx imagetools create \
+            -t "${IMAGE}:${VERSION}" \
+            -t "${IMAGE}:latest" \
+            "${IMAGE}:${VERSION}-amd64" \
+            "${IMAGE}:${VERSION}-arm64"
@@ -0,0 +1,68 @@
+name: docs
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'docs-site/**'
+      - 'docs/screenshots/**'
+      - '.github/workflows/docs.yml'
+      - 'package.json'
+      - 'package-lock.json'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Install node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install npm 11
+        run: |
+          npm install -g npm@11.12.1
+          npm --version
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build docs
+        run: npm run docs:build
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v4
+        with:
+          path: docs-site/.vitepress/dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
@@ -0,0 +1,71 @@
+name: GitHub Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: '要发布 Release 的标签（如 v1.0.1）'
+        required: true
+        type: string
+
+permissions:
+  contents: write
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+        with:
+          ref: ${{ github.event_name == 'workflow_dispatch' && inputs.tag || github.ref }}
+
+      - name: Setup Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install npm 11
+        run: npm install -g npm@11.12.1
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Extract release notes from CHANGELOG
+        id: notes
+        run: |
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            TAG="${{ inputs.tag }}"
+          else
+            TAG="${GITHUB_REF#refs/tags/}"
+          fi
+          VERSION="${TAG#v}"
+          BODY_FILE="${RUNNER_TEMP}/release-notes.md"
+          awk -v ver="$VERSION" '
+            /^## \[/ {
+              if (found) exit
+              if ($0 ~ "\\[" ver "\\]") found = 1
+              next
+            }
+            found { print }
+          ' CHANGELOG.md > "$BODY_FILE"
+          if [ ! -s "$BODY_FILE" ]; then
+            echo "未在 CHANGELOG.md 找到版本 ${VERSION}，使用自动生成说明。" >&2
+            echo "## PicHost ${TAG}" > "$BODY_FILE"
+          fi
+          echo "tag=${TAG}" >> "$GITHUB_OUTPUT"
+          echo "body_path=${BODY_FILE}" >> "$GITHUB_OUTPUT"
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: ${{ steps.notes.outputs.tag }}
+          name: PicHost ${{ steps.notes.outputs.tag }}
+          body_path: ${{ steps.notes.outputs.body_path }}
+          draft: false
+          prerelease: false
+          make_latest: true
@@ -36,3 +36,12 @@ data

 # 本地 Git hooks 模板（仅安装在 .git/hooks/，不进仓库）
 git-hooks/
+
+# 本地维护脚本（assign-image-owner、fpk 打包等，不进仓库）
+scripts/
+dist-fpk/
+
+# VitePress docs site
+docs-site/.vitepress/cache
+docs-site/.vitepress/dist
+docs-site/public/screenshots
@@ -2,6 +2,258 @@

 本仓库自 **v1.0.0** 起作为正式版维护；此前历史提交已归档重置。

+## [Unreleased]
+
+## [1.2.8] - 2026-09-04
+
+### 改进
+
+- 双域名：保存或初始化时弹出风险确认（说明可能锁死及 `clear-domains` 恢复方式），不再强制校验当前 Host
+
+### 新增
+
+- 运维 CLI `clear-domains`：清除数据库中的网站域 / 图片域配置（`docker exec pichost clear-domains`）
+
+### 文档
+
+- FAQ、双域名、反向代理文档补充锁死原因与恢复步骤
+
+## [1.2.7] - 2026-09-03
+
+### 新增
+
+- 登录/注册人机验证：本地滑块、Cloudflare Turnstile、Cap；管理员在「设置 → 访问控制」中切换
+- 运维 CLI `slider`：将登录验证重置为本地滑块（`docker exec pichost slider`）
+
+### 改进
+
+- 登出后登录页验证码可正常重新加载
+
+## [1.2.6] - 2026-09-01
+
+### 新增
+
+- 设置、API、图库、存储页 UI 重构（侧栏导航、统计卡片、在线调试等）
+- 图库筛选增加存储后端下拉
+- 新建对象存储后端按类型生成存储标识：`r2-*`、`cos-*`、`oss-*`、`s3-*`
+
+### 改进
+
+- 操作日志表格：操作/来源标签同行展示，路径列省略号截断、无横向滚动条
+- 存储后端卡片：存储标识与类型同一行左对齐排列
+- README 与文档站截图、导航说明同步新界面
+
+## [1.2.5] - 2026-08-31
+
+### 新增
+
+- 图库页（`/gallery`）替代原「统计」导航；图片点击放大详情弹层（尺寸、上传方式、存储路径、链接复制）
+- 图库列表支持全选、反选；单张删除移至详情弹层
+- 图片列表 API 返回上传来源（网页 / API，来自活动日志）
+
+### 改进
+
+- README 补充技术栈说明
+
+### 移除
+
+- `/stats` 路由（不再兼容跳转）
+
+## [1.2.4] - 2026-08-31
+
+### 修复
+
+- 访问控制（Referer 防盗链）留空时仍会拦截外链图片：浏览器直开无 Referer 可访问，博客/论坛嵌入带 Referer 会 403 图裂；现仅在配置了白名单时才校验
+
+## [1.2.3] - 2026-08-30
+
+### 修复
+
+- 开启「简短图片链接」且按年/月分组时，纯文件名直链（如 `/xxx.webp`）误解析为 `images/xxx.webp` 导致 404；现先经 SQLite 索引反查完整 key
+
+## [1.2.2] - 2026-08-30
+
+### 修复
+
+- 双域名：设置页保存时误清空管理域（`site_base_url`）；仅改图片域时保护已有网站域配置
+- 双域名：设置 API 配置值与 request origin fallback 混淆，导致「当前生效」显示错误
+- 双域名：未配置的第三 Host（`pages.dev`、裸 IP 等）可绕过 Host 隔离访问后台
+
+### 改进
+
+- 设置 API 拆分 `siteBaseUrl` / `imageBaseUrl`（配置值）、`effective*`（直链）、`runtime`（当前访问检测）
+- `PATCH /api/settings` 增加 `domainSeparation` 字段与保存校验
+- 设置页：检测地址展示、关闭双域名确认、反代 Host 不一致警告；首次设置不再自动填入 origin
+- Host 中间件：双域名开启时对未知 Host 返回 404（开发 `localhost` 例外）
+- 文档站：新增 [更新日志](https://o96u.github.io/PicHost/guide/changelog)；重写 Cloudflare 部署说明；同步 FAQ / 双域名文档
+
+## [1.2.1] - 2026-08-29
+
+### 新增
+
+- 登录滑动拼图验证（缺口对齐）；验证与登录分两步，登录接口校验 `captchaId` / `captchaPosition`
+- VitePress 文档站（`docs-site/`）：中英文指南，部署至 GitHub Pages <https://o96u.github.io/PicHost/>
+- `npm run docs:dev` / `docs:build` / `docs:preview`；CI 增加 `docs:build`；`.github/workflows/docs.yml` 发布文档
+
+### 修复
+
+- 修复统计页删除图片后图库不刷新的问题
+- 修复分页跳转输入框在 `type="number"` 下无法跳转的问题
+- 修复非首页路由下复制链接格式偏好不持久化的问题（`useUploadPreferences` 首次使用时自动加载）
+- 滑动验证 UI：滑块垂直居中、缺口尺寸与滑块一致
+
+### 改进
+
+- README 精简为产品宣传页，详细说明指向文档站
+- 双域名文档补充：未知 Host 风险、Cloudflare 橙云部署、勿用 Pages/Workers 整站反代
+- 文档截图更新（登录页等）；旧 `docs/*.md` 长文迁入 `docs-site/`
+
+## [1.2.0] - 2026-08-28
+
+### 变更
+
+- 图片统一存放在 `data/images/`；遗留 `blog/`、`twikoo/` 等并列目录需迁移后升级
+
+### 新增
+
+- CLI 迁移工具：`docker exec pichost migrate` / `migrate --apply`（`server/cli/migrate-to-single-images.mjs`）
+- 扫描 `data/` 下除 `images` 外所有顶层目录中的图片，输出 `data/mapping.json`
+- 启动时自动同步图片索引（扫描磁盘、归一化遗留 key、清理孤儿记录），并打印同步日志
+- 迁移文档：[文档站 · v1.2 迁移](https://o96u.github.io/PicHost/guide/migration)
+
+### 改进
+
+- 启动时归一化遗留 SQLite key、清理无文件的孤儿索引；支持删除仅索引无文件的记录
+
+## [1.1.5] - 2026-08-28
+
+### 修复
+
+- 修复 API 上传后图库预览偶发失败、需等待刷新才显示的问题
+- 图库卡片加载失败后自动重试，刷新列表时重置预览状态
+
+### 改进
+
+- 出图前校验存储文件实际存在，避免索引与磁盘短暂不一致
+- 图片 404/403 与域名隔离 404 禁止 CDN 缓存，降低反代误判影响
+
+## [1.1.4] - 2026-08-28
+
+### 新增
+
+- 上传目录可按年/月分组或扁平保存（`storage_use_date_path` / `STORAGE_USE_DATE_PATH`），设置页可切换
+- 双域名分离下网站域禁止直链出图，仅图片域可访问图片路径
+
+### 改进
+
+- 隐藏 `images/` 前缀时外链改为仅文件名（如 `xxx.webp`）；图片域仍兼容旧版 `/2026/08/xxx.webp` 短链
+- 设置页重构：功能开关、域名配置、存储路径分组展示
+- 本地磁盘索引扫描支持扁平路径；文件夹列表 `images` 置顶
+
+## [1.1.3] - 2026-08-27
+
+### 新增
+
+- 后台与图片域名分离（`SITE_BASE_URL` / `IMAGE_BASE_URL`）：单实例双域名，Host 中间件隔离图片域非图片路径
+- `/setup` 与系统设置支持启用/关闭域名分离，设置页可后续关闭并恢复单域
+- 可选隐藏外链中的 `images/` 前缀（多文件夹时确认提示）
+- 设置页加载时检测 GitHub 最新版本并提示更新
+- 双域名部署文档（Nginx / Lucky / 本地 hosts 测试）：[文档站 · 双域名分离](https://o96u.github.io/PicHost/guide/domain-separation)
+
+### 改进
+
+- 双域名下防盗链自动放行网站域与图片域主机名
+- 开发服务器默认绑定 `127.0.0.1:3000`，便于 hosts 双域本地测试
+- API 文档补充自定义文件夹的 cURL 示例
+
+### 其他
+
+- 许可证变更为 GPL-3.0-only
+- `scripts/` 目录改为本地维护，不再纳入仓库
+
+## [1.1.2] - 2026-08-26
+
+### 新增
+
+- 操作日志页（`/logs`）：记录上传/删除，管理员可查看全部用户并筛选
+- 图库记录支持按存储后端筛选
+- 上传 IP / API Token 限流（15 分钟窗口）
+
+### 改进
+
+- 操作日志记录存储后端；图库卡片可展示存储来源
+- 存储筛选下拉固定「本地磁盘」排在第二位
+- 系统设置页版本号链接至 GitHub Releases
+
+### 修复
+
+- 修复删除存储后端后确认弹窗闪出空名称
+
+## [1.1.1] - 2026-08-26
+
+### 修复
+
+- 移除启动时自动创建的空白「S3 兼容存储」占位；升级后自动清理旧占位记录
+- 修复管理页切换路由时反复闪现「正在验证登录状态」
+- 修复静默会话校验后设置 / 统计 / API 页不加载数据
+
+### 改进
+
+- Docker 日志：4xx/5xx 分级输出，记录错误原因与堆栈；上传/启动任务失败写入详细错误
+
+## [1.1.0] - 2026-08-26
+
+### 新增
+
+- S3 兼容对象存储后端（R2 / AWS S3 / 腾讯云 COS / 阿里云 OSS）
+- `storage_backends` + `images` 索引表，列表/搜索/统计改查 SQLite
+- 混合直链：`proxy`（默认，PicHost 代理）与 `public`（302 到 CDN）
+- 管理员 `/storage` 存储管理页：多后端卡片、用量条、添加/编辑/删除云存储实例
+- 可选环境变量覆盖存储配置（`STORAGE_BACKEND`、`S3_*`）
+
+### 改进
+
+- 启动时自动将本地磁盘图片扫描迁入 `images` 索引（幂等）
+- 上传/删除/直链/auto-delete 按 `backend_id` 路由到对应后端
+
+## [1.0.4] - 2026-08-25
+
+### 新增
+
+- 密码输入框支持显示/隐藏切换（`PasswordInput` 组件，含无障碍文案）
+
+### 改进
+
+- 遗留 `ADMIN_SECRET` 部署：`/setup`、`/register` 路由与 `needsMigration` 检测对齐
+- 合并重复的密码不一致 i18n 文案；移除未使用的 `jose` 依赖
+
+### 修复
+
+- 修复 `PasswordInput` 导致 CI typecheck 失败
+
+## [1.0.3] - 2026-08-23
+
+### 修复
+
+- 修复 CI typecheck 失败（移动端菜单、i18n、统计页图库刷新）
+- Docker 构建：arm64 改用原生 ARM Runner，避免 QEMU 下 `npm ci` 极慢
+- Docker 构建：启用 npm 缓存挂载，加快依赖安装
+
+## [1.0.2] - 2026-08-23
+
+### 新增
+
+- 中英文界面（`@nuxtjs/i18n`），语言切换与主题切换独立菜单
+- 移动端导航：汉堡菜单 + 分组用户菜单（语言 / 外观 / 账户）
+- Docker 忘记密码：`docker exec pichost reset-password`（随机密码，见 `server/cli/`）
+- Docker 升级到 v1.2.0 前迁移遗留目录：`docker exec pichost migrate` / `migrate --apply`
+
+### 改进
+
+- 统计页工具栏与图库布局（桌面单行、移动端适配）
+- 上传卡片视觉优化（背景图、插图、悬停边框动效）
+- Logo 与上传区图片压缩，减小体积
+
 ## [1.0.1] - 2026-08-22

 ### 修复
@@ -31,7 +283,13 @@

 ### 路线图

- **v1.1.0**（计划中）：S3、Cloudflare R2 及更多对象存储后端
+- **v1.2.0**（开发中）：统一 `images/` 存储、遗留目录迁移 CLI、启动索引同步

+[1.2.0]: https://github.com/O96u/PicHost/releases/tag/v1.2.0
+[1.1.1]: https://github.com/O96u/PicHost/releases/tag/v1.1.1
+[1.1.0]: https://github.com/O96u/PicHost/releases/tag/v1.1.0
+[1.0.4]: https://github.com/O96u/PicHost/releases/tag/v1.0.4
+[1.0.3]: https://github.com/O96u/PicHost/releases/tag/v1.0.3
+[1.0.2]: https://github.com/O96u/PicHost/releases/tag/v1.0.2
 [1.0.1]: https://github.com/O96u/PicHost/releases/tag/v1.0.1
 [1.0.0]: https://github.com/O96u/PicHost/releases/tag/v1.0.0
@@ -1,3 +1,5 @@
+# syntax=docker/dockerfile:1
+
 FROM node:22-alpine AS build

 WORKDIR /app
@@ -6,7 +8,8 @@ WORKDIR /app
 RUN npm install -g npm@11.12.1

 COPY package.json package-lock.json ./
-RUN npm ci
+RUN --mount=type=cache,target=/root/.npm \
+    npm ci

 COPY . .
 RUN npm run build
@@ -20,8 +23,14 @@ ENV NODE_ENV=production \
    DATA_DIR=/data

 COPY --from=build /app/.output ./.output
+COPY server/cli/reset-password.mjs ./server/cli/reset-password.mjs
+COPY server/cli/migrate-to-single-images.mjs ./server/cli/migrate-to-single-images.mjs
+COPY server/cli/slider.mjs ./server/cli/slider.mjs
+COPY server/cli/clear-domains.mjs ./server/cli/clear-domains.mjs
+COPY docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh

 EXPOSE 6892
 VOLUME /data

-CMD ["node", ".output/server/index.mjs"]
+ENTRYPOINT ["/docker-entrypoint.sh"]
@@ -1,21 +1,674 @@
-MIT License

-Copyright (c) 2026 O96u
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007

-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.

-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+                            Preamble

-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+  The GNU General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Use with the GNU Affero General Public License.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU Affero General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    PicHost - Self-hosted image hosting
+    Copyright (C) 2026 O96u
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License version 3 as
+    published by the Free Software Foundation.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.
@@ -6,22 +6,22 @@

 <p align="center"><strong>Lightweight personal image hosting</strong> · Simple uploads, clean management</p>

-<p align="center">Self-hosted / Multi-user / Docker / API / Twikoo · Zero-config setup</p>
+<p align="center">Self-hosted / Multi-user / Docker / API / Twikoo · Local disk or object storage</p>

 <p align="center">
  <a href="https://github.com/O96u/PicHost/blob/main/package.json"><img src="https://img.shields.io/github/package-json/v/O96u/PicHost?style=flat-square&color=22c55e" alt="version" /></a>
  <a href="https://github.com/O96u/PicHost/actions/workflows/ci.yml"><img src="https://github.com/O96u/PicHost/actions/workflows/ci.yml/badge.svg" alt="CI" /></a>
  <img src="https://img.shields.io/badge/Nuxt-4-00DC82?style=flat-square&logo=nuxt.js&logoColor=white" alt="Nuxt 4" />
  <a href="https://hub.docker.com/r/muxui/pichost"><img src="https://img.shields.io/badge/Docker-muxui%2Fpichost-2496ED?style=flat-square&logo=docker&logoColor=white" alt="Docker" /></a>
-  <img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT" />
+  <img src="https://img.shields.io/badge/license-GPL--3.0-blue?style=flat-square" alt="GPL-3.0" />
 </p>

 <p align="center">
-  <a href="#quick-start">Quick Start</a> ·
+  <a href="https://o96u.github.io/PicHost/en/">Docs</a> ·
  <a href="#screenshots">Screenshots</a> ·
  <a href="#features">Features</a> ·
  <a href="#tech-stack">Tech Stack</a> ·
-  <a href="#roadmap">Roadmap</a> ·
+  <a href="#quick-start">Quick Start</a> ·
  <a href="README.md">简体中文</a>
 </p>

@@ -29,161 +29,62 @@

 ## Screenshots

-| Login | Upload |
-|:---:|:---:|
-| ![Login](docs/screenshots/login.png) | ![Upload](docs/screenshots/upload.png) |
+**main** has no public demo. **cloudflare** branch live demo: [pic.roven.cc](https://pic.roven.cc)

-| Upload preferences | Stats & gallery |
-|:---:|:---:|
-| ![Preferences](docs/screenshots/preferences.png) | ![Stats](docs/screenshots/stats.png) |
+| API | Gallery |
+| :--: | :-----: |
+| ![API](docs/screenshots/api.png) | ![Gallery](docs/screenshots/gallery.png) |

-| Settings | |
-|:---:|:---:|
-| ![Settings](docs/screenshots/settings.png) | |
+| Storage | Settings |
+| :-----: | :-------: |
+| ![Storage](docs/screenshots/storage.png) | ![Settings](docs/screenshots/settings-en.png) |

 ## Features

- **Drag, click, or Ctrl+V paste** to upload; admins can use custom `folder` paths
- **Server-side WebP** (sharp), Referer hotlink protection, configurable public base URL
- **Multi-user** — username/password login; optional registration; users see only their images
- **Upload preferences** (card flip UI): client-side compression, auto-copy links, per-user auto-delete
- **Gallery** — browse, search, batch delete; admin sees uploader badges
- **Stats** — upload/delete metrics, folder breakdown; admin sees registered user count
- **API** — global token (admin) + per-user tokens; in-app cURL snippets
- **Twikoo** — `POST /api/index.php` (`image` + `token`)
- **Zero-config Docker** — first-run web wizard, no secrets required upfront
-
-## Quick Start
-
-### Docker (recommended)
-
-```bash
-git clone https://github.com/O96u/PicHost.git
-cd PicHost
-docker compose up -d
-```
-
-Default port: **6892**. Complete the setup wizard in the browser. Image: `muxui/pichost:latest` (fallback: `ghcr.io/o96u/pichost:latest`).
-
-### Local development
-
-```bash
-npm install
-cp .env.example .env   # optional
-npm run dev
-```
-
-Open `http://localhost:3000/setup` to create the admin account. Data defaults to `./data`.
-
-### Legacy migration
-
-If you only had `ADMIN_SECRET` and no user table, log in with the secret once and follow the migration wizard.
+- **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
+- **API & Twikoo** — global / per-user tokens; `POST /api/index.php` compatible
+- **Zero-config Docker** — first-run web wizard, no secrets upfront

 ## Tech Stack

-| Layer | Technology |
-|-------|------------|
-| Frontend | Nuxt 4, Vue 3, Nuxt UI 4, Tailwind CSS 4 |
-| Backend | Nitro (Node.js), SQLite |
-| Images | sharp (WebP transcoding & compression) |
-| Auth | Session cookie, scrypt password hashing, API tokens |
-| Storage | Local disk (`DATA_DIR`) |
-| Deploy | Docker (amd64 / arm64), docker compose |
-| Tests | Vitest |
+| Layer | Technologies |
+| ----- | ------------ |
+| Frontend | [Nuxt 4](https://nuxt.com) · [Nuxt UI 4](https://ui.nuxt.com) · [Vue 3](https://vuejs.org) · [Tailwind CSS 4](https://tailwindcss.com) · TypeScript |
+| Backend | [Nitro](https://nitro.build) (`node-server`) · REST API |
+| Data | SQLite · local `data/pichost.db` |
+| Images | [sharp](https://sharp.pixelplumbing.com) (server-side WebP) |
+| Storage | Local disk · S3-compatible ([AWS SDK](https://aws.amazon.com/sdk-for-javascript/) · R2 / COS / OSS, etc.) |
+| i18n | [@nuxtjs/i18n](https://i18n.nuxtjs.org) (zh-CN / English) |
+| Quality & docs | [Vitest](https://vitest.dev) · [VitePress](https://vitepress.dev) docs site |
+| Deploy | Docker · Node.js 22 |

-## Environment variables
-
-| Variable | Description |
-|----------|-------------|
-| `API_UPLOAD_TOKEN` | Global upload token (`Auth-Token` header); can be generated in the API page |
-| `ALLOWED_REFERER_HOSTS` | Hotlink allowlist (comma-separated hostnames) |
-| `IMAGE_BASE_URL` | Public base URL for image links |
-| `WEBP_QUALITY` | Server WebP quality 1–100, default 80 |
-| `AUTO_DELETE_DAYS` | Global auto-delete days (0 = off); admin + orphan images only |
-| `DATA_DIR` | Data directory, default `/data` (container) or `./data` (local) |
-| `ADMIN_SECRET` | Legacy v1.0 migration only |
-| `DEV_BYPASS_ACCESS` | Dev only — bypass auth (never in production) |
-
-Environment variables override database settings. See [`.env.example`](.env.example).
-
-## Users & permissions
-
-| Scenario | Auth | Ownership / visibility |
-|----------|------|------------------------|
-| Web upload | Session | Current user |
-| API upload + **user token** | `Auth-Token` | Token owner |
-| API upload + **global token** | `Auth-Token` | Admin (`userId` null) |
-| Twikoo `/api/index.php` | form `token` | Same as global token |
-| Gallery list / search / delete | Session or token | Users: own only; admin: all |
-| Direct link `GET /images/...` | None (Referer rules) | Public if URL is known |
-
-Regular users are limited to the `images/` folder; custom `folder` requires admin or global token.
-
-## Storage layout
-
-```
-/data
-├── pichost.db          # SQLite: users, sessions, settings, logs
-├── images/             # Default upload folder
-├── blog/               # Example custom folder
-└── twikoo/             # Twikoo comment images
-```
-
-Pattern: `folder/YYYY/MM/randomId.webp` + `.meta.json`. Back up the entire `/data` directory.
-
-## API overview
-
-| Method | Path | Description |
-|--------|------|-------------|
-| POST | `/api/images/upload` | Upload image |
-| GET | `/api/images` | Paginated list |
-| DELETE | `/api/images` | Delete one (`key`) |
-| POST | `/api/index.php` | Twikoo / EasyImage 2.0 |
-
-Upload example:
+## Quick Start

 ```bash
-curl -X POST "https://pic.example.com/api/images/upload" \
-  -H "Auth-Token: YOUR_TOKEN" \
-  -F "folder=blog" \
-  -F "image=@./demo.png"
+docker run -d \
+  --name pichost \
+  -p 6892:6892 \
+  -v ./data:/data \
+  --restart unless-stopped \
+  muxui/pichost:latest
 ```

-Full docs and copyable cURL snippets are on the **API** page after deployment.
+Open `http://<host>:6892` and complete the setup wizard.

-## Twikoo
+**Full guide** (env vars, upgrades, dual-domain setup, API, Twikoo, reverse proxy, local dev, etc.): **[Documentation](https://o96u.github.io/PicHost/en/)**.

-| Setting | Value |
-|---------|-------|
-| `IMAGE_CDN` | `easyimage` |
-| `IMAGE_CDN_URL` | `https://your-domain/api/index.php` |
-| `IMAGE_CDN_TOKEN` | Same as `API_UPLOAD_TOKEN` |
-
-## Reverse proxy
-
- Proxy to port **6892**; HTTPS recommended
- Nginx: `client_max_body_size` ≥ 12m
- Set `IMAGE_BASE_URL` for public access
-
-## Development
-
-```bash
-npm run dev          # Dev server
-npm run build        # Production build
-npm run start        # Run .output
-npm run lint         # ESLint
-npm run typecheck    # Type check
-npm test             # Unit tests
-```
-
-## Roadmap
-
-| Version | Plan |
-|---------|------|
-| **v1.0.1** | Settings version display, mobile upload preferences layout fix (current) |
-| **v1.0.0** | Local storage, multi-user, API, Twikoo |
-| **v1.1.0** | S3, Cloudflare R2, and more object storage backends |
+| Branch | Notes |
+| ------ | ----- |
+| [**main**](https://github.com/O96u/PicHost/tree/main) | Default: multi-backend, dual-domain, unified `images/` storage |
+| [**cloudflare**](https://github.com/O96u/PicHost/tree/cloudflare) | Cloudflare R2 only; live demo [pic.roven.cc](https://pic.roven.cc) |

 ## License

-[MIT](LICENSE)
+[GPL-3.0](LICENSE)
+
+## Friend links
+
+[LINUX DO](https://linux.do/)
@@ -6,22 +6,22 @@

 <p align="center"><strong>个人轻量图床</strong> · 图片放好，管理也要顺手</p>

-<p align="center">自托管图床 / 多用户 / Docker / API / Twikoo · 零配置引导</p>
+<p align="center">自托管图床 / 多用户 / Docker / API / Twikoo · 本地磁盘或对象存储</p>

 <p align="center">
  <a href="https://github.com/O96u/PicHost/blob/main/package.json"><img src="https://img.shields.io/github/package-json/v/O96u/PicHost?style=flat-square&color=22c55e" alt="version" /></a>
  <a href="https://github.com/O96u/PicHost/actions/workflows/ci.yml"><img src="https://github.com/O96u/PicHost/actions/workflows/ci.yml/badge.svg" alt="CI" /></a>
  <img src="https://img.shields.io/badge/Nuxt-4-00DC82?style=flat-square&logo=nuxt.js&logoColor=white" alt="Nuxt 4" />
  <a href="https://hub.docker.com/r/muxui/pichost"><img src="https://img.shields.io/badge/Docker-muxui%2Fpichost-2496ED?style=flat-square&logo=docker&logoColor=white" alt="Docker" /></a>
-  <img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT" />
+  <img src="https://img.shields.io/badge/license-GPL--3.0-blue?style=flat-square" alt="GPL-3.0" />
 </p>

 <p align="center">
-  <a href="#快速开始">快速开始</a> ·
+  <a href="https://o96u.github.io/PicHost/">文档</a> ·
  <a href="#界面预览">预览</a> ·
  <a href="#特性">特性</a> ·
  <a href="#技术栈">技术栈</a> ·
-  <a href="#路线图">路线图</a> ·
+  <a href="#快速开始">快速开始</a> ·
  <a href="README.en.md">English</a>
 </p>

@@ -29,161 +29,62 @@

 ## 界面预览

-| 登录 | 上传 |
-|:---:|:---:|
-| ![登录](docs/screenshots/login.png) | ![上传](docs/screenshots/upload.png) |
+**main** 分支暂无公网演示；**cloudflare** 分支在线体验：[pic.roven.cc](https://pic.roven.cc)

-| 上传偏好 | 统计与图库 |
-|:---:|:---:|
-| ![上传偏好](docs/screenshots/preferences.png) | ![统计](docs/screenshots/stats.png) |
+| API | 图库 |
+| :--: | :--: |
+| ![API](docs/screenshots/api.png) | ![图库](docs/screenshots/gallery.png) |

-| 系统设置 | |
-|:---:|:---:|
-| ![设置](docs/screenshots/settings.png) | |
+| 存储 | 设置 |
+| :--: | :--: |
+| ![存储](docs/screenshots/storage.png) | ![设置](docs/screenshots/settings.png) |

 ## 特性

- **拖拽 / 点击 / Ctrl+V 粘贴**上传；管理员可自定义 `folder` 目录
- **服务端 WebP 压缩**（sharp）、Referer 防盗链、可配置访问域名
- **多用户**：账号密码登录；管理员可开放注册；普通用户仅见自己的图片
- **上传偏好**（卡片翻转设置）：客户端预压缩、自动复制链接、按用户自动删除
- **图库**：浏览、搜索、批量删除；管理员可查看上传者标签
- **统计**：上传/删除趋势、目录分布；管理员额外显示注册用户数量
- **API**：全局 Token（管理员）+ 每用户个人 Token；后台可复制 cURL
- **Twikoo**：`POST /api/index.php`（`image` + `token`）
- **Docker 零配置**：首次访问 Web 引导创建管理员，无需预先写密钥
-
-## 快速开始
-
-### Docker（推荐）
-
-```bash
-git clone https://github.com/O96u/PicHost.git
-cd PicHost
-docker compose up -d
-```
-
-默认端口 **6892**。浏览器打开后按引导创建管理员即可。镜像：`muxui/pichost:latest`（备用 `ghcr.io/o96u/pichost:latest`）。
-
-### 本地开发
-
-```bash
-npm install
-cp .env.example .env   # 可选
-npm run dev
-```
-
-访问 `http://localhost:3000/setup` 创建管理员；数据目录默认 `./data`。
-
-### 遗留部署迁移
-
-若旧版仅配置了 `ADMIN_SECRET`、尚无用户表，可用密钥登录一次，Web 引导迁移为账号密码。
+- **拖拽 / 点击 / Ctrl+V 粘贴**上传；服务端 WebP 压缩、Referer 防盗链
+- **多用户**：账号密码登录（滑块 / Turnstile / Cap 人机验证）、可选开放注册；普通用户仅见自己的图片
+- **多后端存储**：本地磁盘 + S3 兼容（R2 / COS / OSS / AWS）；混合直链 `proxy` / `public`
+- **图库**：浏览、搜索、按存储/来源筛选、网格/列表切换、批量删除；统计概览与来源分布
+- **API 与 Twikoo**：全局 / 个人 Token；`POST /api/index.php` 兼容
+- **Docker 零配置**：首次访问 Web 引导创建管理员

 ## 技术栈

 | 层级 | 技术 |
-|------|------|
-| 前端 | Nuxt 4、Vue 3、Nuxt UI 4、Tailwind CSS 4 |
-| 后端 | Nitro（Node.js）、SQLite |
-| 图片处理 | sharp（WebP 转码与压缩） |
-| 鉴权 | Session Cookie、scrypt 密码哈希、API Token |
-| 存储 | 本地磁盘（`DATA_DIR`） |
-| 部署 | Docker（amd64 / arm64）、docker compose |
-| 测试 | Vitest |
+| ---- | ---- |
+| 前端 | [Nuxt 4](https://nuxt.com) · [Nuxt UI 4](https://ui.nuxt.com) · [Vue 3](https://vuejs.org) · [Tailwind CSS 4](https://tailwindcss.com) · TypeScript |
+| 后端 | [Nitro](https://nitro.build)（`node-server`）· REST API |
+| 数据 | SQLite · 本地 `data/pichost.db` |
+| 图片处理 | [sharp](https://sharp.pixelplumbing.com)（服务端 WebP 压缩） |
+| 存储 | 本地磁盘 · S3 兼容（[AWS SDK](https://aws.amazon.com/sdk-for-javascript/) · R2 / COS / OSS 等） |
+| 国际化 | [@nuxtjs/i18n](https://i18n.nuxtjs.org)（简体中文 / English） |
+| 质量与文档 | [Vitest](https://vitest.dev) · [VitePress](https://vitepress.dev) 文档站 |
+| 部署 | Docker · Node.js 22 |

-## 环境变量
-
-| 变量 | 说明 |
-|------|------|
-| `API_UPLOAD_TOKEN` | 全局上传 Token（`Auth-Token` 头）；未配置可在后台 API 页生成 |
-| `ALLOWED_REFERER_HOSTS` | 防盗链白名单（逗号分隔 hostname） |
-| `IMAGE_BASE_URL` | 图片直链公网域名（反代时建议填写） |
-| `WEBP_QUALITY` | 服务端 WebP 质量 1–100，默认 80 |
-| `AUTO_DELETE_DAYS` | 全局自动删除天数（0 关闭）；仅影响管理员及无归属历史图 |
-| `DATA_DIR` | 数据目录，默认 `/data`（容器）或 `./data`（本地） |
-| `ADMIN_SECRET` | 仅遗留 v1.0 迁移，新安装不需要 |
-| `DEV_BYPASS_ACCESS` | 开发用，跳过登录（生产勿开） |
-
-环境变量优先级高于后台设置。详见 [`.env.example`](.env.example)。
-
-## 用户与权限
-
-| 场景 | 鉴权 | 图片归属 / 可见范围 |
-|------|------|---------------------|
-| 网页上传 | Session | 当前登录用户 |
-| API 上传 + **个人 Token** | `Auth-Token` | 该 Token 所属用户 |
-| API 上传 + **全局 Token** | `Auth-Token` | 管理员（`userId` 为空） |
-| Twikoo `/api/index.php` | 表单 `token` | 与全局 Token 相同 |
-| 图库列表 / 搜索 / 删除 | Session 或 Token | 普通用户仅自己；管理员全部 |
-| 图片直链 `GET /images/...` | 无（Referer 防盗链） | 知道 URL 即可访问 |
-
-普通用户上传目录固定为 `images/`；自定义 `folder` 仅管理员或全局 Token 可用。
-
-## 存储结构
-
-```
-/data
-├── pichost.db          # SQLite：用户、会话、设置、操作日志
-├── images/             # 默认上传目录
-├── blog/               # 管理员自定义 folder 示例
-└── twikoo/             # Twikoo 评论图片
-```
-
-路径规则：`目录/年/月/随机ID.webp` + 同名 `.meta.json`。备份整个 `/data` 即可。
-
-## API 概览
-
-| 方法 | 路径 | 说明 |
-|------|------|------|
-| POST | `/api/images/upload` | 上传图片 |
-| GET | `/api/images` | 分页列表 |
-| DELETE | `/api/images` | 删除单张（`key`） |
-| POST | `/api/index.php` | Twikoo / EasyImage 2.0 |
-
-上传示例：
+## 快速开始

 ```bash
-curl -X POST "https://pic.example.com/api/images/upload" \
-  -H "Auth-Token: YOUR_TOKEN" \
-  -F "folder=blog" \
-  -F "image=@./demo.png"
+docker run -d \
+  --name pichost \
+  -p 6892:6892 \
+  -v ./data:/data \
+  --restart unless-stopped \
+  muxui/pichost:latest
 ```

-完整接口与可复制 cURL 见部署后后台 **API** 页。
+浏览器打开 `http://<主机IP>:6892`，按引导完成设置即可。

-## Twikoo
+**详细说明**（环境变量、升级迁移、双域名、API、Twikoo、反向代理、本地开发等）见 **[用户文档](https://o96u.github.io/PicHost/)**。

-| 配置项 | 值 |
-|--------|-----|
-| `IMAGE_CDN` | `easyimage` |
-| `IMAGE_CDN_URL` | `https://你的域名/api/index.php` |
-| `IMAGE_CDN_TOKEN` | 与 `API_UPLOAD_TOKEN` 相同 |
-
-## 反向代理
-
- 反代到容器 **6892** 端口，建议 HTTPS
- Nginx：`client_max_body_size` ≥ 12m
- 公网访问请配置 `IMAGE_BASE_URL`
-
-## 开发
-
-```bash
-npm run dev          # 开发服务器
-npm run build        # 生产构建
-npm run start        # 运行 .output
-npm run lint         # ESLint
-npm run typecheck    # 类型检查
-npm test             # 单元测试
-```
-
-## 路线图
-
-| 版本 | 计划 |
-|------|------|
-| **v1.0.1** | 设置页版本展示、移动端上传偏好布局修复（当前） |
-| **v1.0.0** | 本地存储、多用户、API、Twikoo |
-| **v1.1.0** | S3、Cloudflare R2 等对象存储后端 |
+| 分支 | 说明 |
+| ---- | ---- |
+| [**main**](https://github.com/O96u/PicHost/tree/main) | 默认主线：多后端、双域名、统一 `images/` 存储 |
+| [**cloudflare**](https://github.com/O96u/PicHost/tree/cloudflare) | 仅 Cloudflare R2；在线演示 [pic.roven.cc](https://pic.roven.cc) |

 ## License

-[MIT](LICENSE)
+[GPL-3.0](LICENSE)
+
+## 友链
+
+[LINUX DO](https://linux.do/)
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+const { t } = useI18n()
+
 useHead({
-  title: 'PicHost - 个人图床',
+  title: () => t('app.title'),
  meta: [
-    { name: 'description', content: '个人自用的轻量图床系统' }
+    { name: 'description', content: () => t('app.description') }
  ]
 })
 </script>
@@ -59,14 +59,31 @@
  border-radius: 1rem;
  border-width: 2px;
  border-style: dashed;
-  border-color: var(--ui-border);
-  background-color: color-mix(in oklab, var(--ui-bg-elevated) 50%, transparent);
+  background-color: color-mix(in oklab, var(--ui-bg-elevated) 72%, transparent);
  padding: 2.5rem;
+  transition:
+    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.upload-card-surface:not(.upload-card-surface--panel) {
+  border-color: var(--ui-border);
+}
+
+.upload-card-surface:not(.upload-card-surface--panel):hover,
+.upload-card-surface:not(.upload-card-surface--panel).upload-card-surface--active {
+  border-color: var(--ui-primary);
+  background-color: color-mix(in oklab, var(--ui-primary) 10%, var(--ui-bg-elevated) 72%);
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--ui-primary) 25%, transparent),
+    0 8px 24px color-mix(in oklab, var(--ui-primary) 18%, transparent);
 }

 .upload-card-surface--panel {
  border-style: solid;
+  border-color: var(--ui-border);
  background-color: var(--ui-bg-elevated);
+  background-image: none;
  box-shadow: var(--ui-shadow-sm);
  padding: 0;
 }
@@ -89,3 +106,21 @@
 .upload-settings-btn:hover .upload-settings-icon {
  transform: rotate(90deg);
 }
+
+.api-debug-response {
+  scrollbar-width: thin;
+  scrollbar-color: rgb(82 82 82) transparent;
+}
+
+.api-debug-response::-webkit-scrollbar {
+  width: 6px;
+}
+
+.api-debug-response::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background-color: rgb(82 82 82);
+}
+
+.api-debug-response::-webkit-scrollbar-track {
+  background: transparent;
+}
@@ -1,42 +1,64 @@
 <script setup lang="ts">
 import logoLight from '~/assets/image/logo-light.png'
 import logoDark from '~/assets/image/logo-dark.png'
-
-const emit = defineEmits<{
-  success: []
-}>()
+import type { LoginVerificationPayload } from '~/types/auth'

 const router = useRouter()
 const { login, fetchStatus, authStatus } = useAuth()
 const toast = useToast()
+const { t } = useI18n()

 const username = ref('')
 const password = ref('')
 const secret = ref('')
 const loading = ref(false)
+const verificationRef = ref<{ reset: () => Promise<void> } | null>(null)
+const verificationPayload = ref<LoginVerificationPayload | null>(null)
+const verificationMountKey = ref(0)

 const legacyMode = computed(() => authStatus.value?.legacyMode ?? false)
 const allowRegistration = computed(() => authStatus.value?.allowRegistration ?? false)
-
-const canSubmit = computed(() =>
-  legacyMode.value ? Boolean(secret.value) : Boolean(username.value && password.value)
+const loginVerification = computed(() =>
+  authStatus.value?.loginVerification ?? { method: 'slider' as const }
 )

+const canSubmit = computed(() =>
+  Boolean(verificationPayload.value)
+  && (legacyMode.value ? Boolean(secret.value) : Boolean(username.value && password.value))
+)
+
+function onVerificationVerified(payload: LoginVerificationPayload) {
+  verificationPayload.value = payload
+}
+
+function onVerificationCleared() {
+  verificationPayload.value = null
+}
+
+async function resetVerification() {
+  verificationPayload.value = null
+  await verificationRef.value?.reset()
+}
+
 onMounted(async () => {
+  verificationPayload.value = null
+  verificationMountKey.value += 1
  const status = await fetchStatus()
  if (!status.initialized && !status.legacyMode) {
    await router.replace('/setup')
+    return
  }
 })

 async function submit() {
-  if (!canSubmit.value || loading.value) return
+  if (!canSubmit.value || loading.value || !verificationPayload.value) return
  loading.value = true

  try {
+    const verification = verificationPayload.value
    const result = legacyMode.value
-      ? await login({ secret: secret.value })
-      : await login({ username: username.value.trim(), password: password.value })
+      ? await login({ secret: secret.value }, verification)
+      : await login({ username: username.value.trim(), password: password.value }, verification)

    if (result.ok) {
      if (result.needsMigration) {
@@ -46,11 +68,12 @@ async function submit() {
      username.value = ''
      password.value = ''
      secret.value = ''
-      emit('success')
-      toast.add({ title: '登录成功', color: 'success' })
+      await resetVerification()
+      toast.add({ title: t('auth.loginSuccess'), color: 'success' })
    } else {
+      await resetVerification()
      toast.add({
-        title: result.error ?? (legacyMode.value ? '登录失败，请检查密钥' : '用户名或密码错误'),
+        title: result.error ?? (legacyMode.value ? t('auth.loginFailedSecret') : t('auth.loginFailedCredentials')),
        color: 'error'
      })
    }
@@ -61,7 +84,10 @@ async function submit() {
 </script>

 <template>
-  <div class="flex min-h-screen items-center justify-center bg-muted/30 p-4 sm:p-6">
+  <div class="relative flex min-h-screen items-center justify-center bg-muted/30 p-4 sm:p-6">
+    <div class="absolute top-4 right-4">
+      <AuthPagePreferences />
+    </div>
    <div class="w-full max-w-sm rounded-2xl border border-default bg-elevated p-6 shadow-lg sm:p-8">
      <div class="mb-8 space-y-3 text-center">
        <div class="mx-auto inline-flex items-center justify-center">
@@ -87,7 +113,7 @@ async function submit() {
            <span class="text-highlighted">Pic</span><span class="text-primary">Host</span>
          </h1>
          <p class="text-sm text-muted">
-            个人轻量图床
+            {{ t('app.tagline') }}
          </p>
        </div>
      </div>
@@ -102,21 +128,17 @@ async function submit() {
              for="admin-secret"
              class="block text-sm font-medium text-default"
            >
-              管理密钥
+              {{ t('auth.adminSecret') }}
            </label>
-            <UInput
+            <PasswordInput
              id="admin-secret"
              v-model="secret"
-              type="password"
-              placeholder="输入 ADMIN_SECRET"
+              :placeholder="t('auth.adminSecretPlaceholder')"
              autocomplete="current-password"
-              size="lg"
-              class="w-full"
-              :ui="{ root: 'w-full' }"
              @keyup.enter="submit"
            />
            <p class="text-xs leading-relaxed text-muted">
-              遗留部署：使用密钥登录后将引导创建账号
+              {{ t('auth.legacyHint') }}
            </p>
          </div>
        </template>
@@ -127,12 +149,12 @@ async function submit() {
              for="login-username"
              class="block text-sm font-medium text-default"
            >
-              用户名
+              {{ t('auth.username') }}
            </label>
            <UInput
              id="login-username"
              v-model="username"
-              placeholder="用户名"
+              :placeholder="t('auth.username')"
              autocomplete="username"
              size="lg"
              class="w-full"
@@ -145,25 +167,31 @@ async function submit() {
              for="login-password"
              class="block text-sm font-medium text-default"
            >
-              密码
+              {{ t('auth.password') }}
            </label>
-            <UInput
+            <PasswordInput
              id="login-password"
              v-model="password"
-              type="password"
-              placeholder="密码"
+              :placeholder="t('auth.password')"
              autocomplete="current-password"
-              size="lg"
-              class="w-full"
-              :ui="{ root: 'w-full' }"
              @keyup.enter="submit"
            />
          </div>
        </template>

+        <LoginVerification
+          :key="verificationMountKey"
+          ref="verificationRef"
+          :method="loginVerification.method"
+          :turnstile-site-key="loginVerification.turnstileSiteKey"
+          :cap-api-endpoint="loginVerification.capApiEndpoint"
+          @verified="onVerificationVerified"
+          @cleared="onVerificationCleared"
+        />
+
        <UButton
          type="submit"
-          label="登录"
+          :label="t('auth.login')"
          icon="i-lucide-log-in"
          size="lg"
          block
@@ -176,18 +204,18 @@ async function submit() {
          v-if="allowRegistration"
          class="text-center text-sm text-muted"
        >
-          没有账号？
+          {{ t('auth.noAccount') }}
          <NuxtLink
            to="/register"
            class="text-primary hover:underline"
          >
-            注册
+            {{ t('auth.register') }}
          </NuxtLink>
        </p>
      </form>

      <p class="mt-6 text-center text-xs leading-relaxed text-dimmed">
-        未登录时无法访问上传和管理功能
+        {{ t('auth.loginFooter') }}
      </p>
    </div>
  </div>
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    code: string
+    scrollable?: boolean
+    lang?: string
+  }>(),
+  {
+    scrollable: true,
+    lang: ''
+  }
+)
+
+const toast = useToast()
+const { t } = useI18n()
+
+async function copyCode() {
+  try {
+    await navigator.clipboard.writeText(props.code)
+    toast.add({ title: t('copy.curl'), color: 'success' })
+  } catch {
+    toast.add({ title: t('copy.failed'), color: 'error' })
+  }
+}
+</script>
+
+<template>
+  <div class="overflow-hidden rounded-xl bg-neutral-950">
+    <div
+      class="flex items-center justify-between border-b border-neutral-800/80 bg-neutral-900 px-3.5 py-2.5"
+    >
+      <div
+        class="flex items-center gap-2"
+        aria-hidden="true"
+      >
+        <span class="size-3 rounded-full border border-black/15 bg-[#ff5f56]" />
+        <span class="size-3 rounded-full border border-black/15 bg-[#ffbd2e]" />
+        <span class="size-3 rounded-full border border-black/15 bg-[#27c93f]" />
+        <span
+          v-if="lang"
+          class="ml-1 text-[10px] font-medium tracking-wide text-neutral-500 uppercase"
+        >
+          {{ lang }}
+        </span>
+      </div>
+      <UButton
+        icon="i-lucide-copy"
+        :label="t('common.copy')"
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        class="text-neutral-300 hover:text-white"
+        @click="copyCode"
+      />
+    </div>
+    <pre
+      class="overflow-auto p-4 text-xs leading-relaxed text-neutral-100"
+      :class="scrollable ? 'max-h-80' : ''"
+    ><code class="font-mono whitespace-pre">{{ code }}</code></pre>
+  </div>
+</template>
@@ -4,87 +4,58 @@ import logoLight from '~/assets/image/logo-light.png'
 import logoDark from '~/assets/image/logo-dark.png'

 const route = useRoute()
-const colorMode = useColorMode()
 const { logout, user, isAdmin } = useAuth()
+const { t } = useI18n()
+
+const mobileNavOpen = ref(false)
+const mobileUserOpen = ref(false)

 const navItems = computed(() => {
  const items = [
-    { label: 'API', to: '/api', icon: 'i-lucide-code-2' },
-    { label: '统计', to: '/stats', icon: 'i-lucide-chart-column' }
+    { label: t('nav.api'), to: '/api', icon: 'i-lucide-code-2' },
+    { label: t('nav.gallery'), to: '/gallery', icon: 'i-lucide-images' }
  ]
  if (isAdmin.value) {
-    items.push({ label: '设置', to: '/settings', icon: 'i-lucide-settings' })
+    items.push({ label: t('nav.storage'), to: '/storage', icon: 'i-lucide-hard-drive' })
  }
+  items.push({ label: t('nav.settings'), to: '/settings', icon: 'i-lucide-settings' })
  return items
 })

-const themeIcon = computed(() => {
-  if (colorMode.preference === 'system') return 'i-lucide-monitor'
-  return colorMode.preference === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'
-})
-
-const themeItems = computed<DropdownMenuItem[][]>(() => [[
+const accountMenuItems = computed<DropdownMenuItem[]>(() => [
  {
-    label: '浅色',
-    icon: 'i-lucide-sun',
-    type: 'checkbox',
-    checked: colorMode.preference === 'light',
-    onUpdateChecked(checked: boolean) {
-      if (checked) colorMode.preference = 'light'
-    }
+    label: t('nav.changePassword'),
+    icon: 'i-lucide-key-round',
+    to: '/account/password'
  },
  {
-    label: '深色',
-    icon: 'i-lucide-moon',
-    type: 'checkbox',
-    checked: colorMode.preference === 'dark',
-    onUpdateChecked(checked: boolean) {
-      if (checked) colorMode.preference = 'dark'
-    }
-  },
-  {
-    label: '跟随系统',
-    icon: 'i-lucide-monitor',
-    type: 'checkbox',
-    checked: colorMode.preference === 'system',
-    onUpdateChecked(checked: boolean) {
-      if (checked) colorMode.preference = 'system'
-    }
-  }
-]])
-
-const userMenuItems = computed<DropdownMenuItem[][]>(() => {
-  const items: DropdownMenuItem[] = [
-    {
-      label: '修改密码',
-      icon: 'i-lucide-key-round',
-      to: '/account/password'
-    }
-  ]
-
-  if (isAdmin.value) {
-    items.push({
-      label: '系统设置',
-      icon: 'i-lucide-settings',
-      to: '/settings'
-    })
-  }
-
-  items.push({
-    label: '退出登录',
+    label: t('nav.logout'),
    icon: 'i-lucide-log-out',
    onSelect() {
      void handleLogout()
    }
-  })
+  }
+])

-  return [items]
-})
+const desktopUserMenuItems = computed<DropdownMenuItem[][]>(() => [
+  accountMenuItems.value
+])

 function isNavActive(to: string) {
+  if (to === '/settings') {
+    return route.path.startsWith('/settings')
+  }
  return route.path.startsWith(to)
 }

+watch(mobileNavOpen, (open) => {
+  if (open) mobileUserOpen.value = false
+})
+
+watch(mobileUserOpen, (open) => {
+  if (open) mobileNavOpen.value = false
+})
+
 async function handleLogout() {
  await logout()
 }
@@ -93,83 +64,94 @@ async function handleLogout() {
 <template>
  <div class="flex min-h-screen flex-col">
    <header class="sticky top-0 z-40 border-b border-default bg-default/80 backdrop-blur">
-      <div class="mx-auto flex max-w-7xl flex-col gap-3 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between sm:px-6">
-        <NuxtLink
-          to="/"
-          title="返回上传"
-          class="group flex shrink-0 items-center gap-2.5 transition-opacity hover:opacity-90 sm:gap-3"
-        >
-          <img
-            :src="logoLight"
-            alt="PicHost"
-            class="h-10 w-auto shrink-0 object-contain sm:h-11 dark:hidden"
-            decoding="async"
-            draggable="false"
+      <div class="mx-auto max-w-7xl px-4 py-2.5 sm:px-6">
+        <div class="flex items-center justify-between gap-3">
+          <NuxtLink
+            to="/"
+            :title="t('nav.backToUpload')"
+            class="group flex min-w-0 shrink items-center gap-2.5 transition-opacity hover:opacity-90 sm:gap-3"
          >
-          <img
-            :src="logoDark"
-            alt="PicHost"
-            class="hidden h-10 w-auto shrink-0 object-contain sm:h-11 dark:block"
-            decoding="async"
-            draggable="false"
-          >
-          <div class="min-w-0 leading-tight">
-            <p class="text-[15px] font-bold tracking-tight sm:text-base">
-              <span class="text-highlighted">Pic</span><span class="text-primary">Host</span>
-            </p>
-            <p class="mt-0.5 text-[11px] text-muted sm:text-xs">
-              个人轻量图床
-            </p>
-          </div>
-        </NuxtLink>
-
-        <div class="flex flex-wrap items-center justify-end gap-1 sm:gap-2">
-          <nav class="flex flex-wrap items-center gap-1">
-            <UButton
-              v-for="item in navItems"
-              :key="item.to"
-              :to="item.to"
-              size="sm"
-              :variant="isNavActive(item.to) ? 'soft' : 'ghost'"
-              :color="isNavActive(item.to) ? 'primary' : 'neutral'"
-              :icon="item.icon"
-              :label="item.label"
-            />
-          </nav>
-
-          <div class="mx-1 hidden h-5 w-px bg-muted sm:block" />
+            <img
+              :src="logoLight"
+              alt="PicHost"
+              class="h-9 w-auto shrink-0 object-contain sm:h-11 dark:hidden"
+              decoding="async"
+              draggable="false"
+            >
+            <img
+              :src="logoDark"
+              alt="PicHost"
+              class="hidden h-9 w-auto shrink-0 object-contain sm:h-11 dark:block"
+              decoding="async"
+              draggable="false"
+            >
+            <div class="min-w-0 leading-tight">
+              <p class="text-[15px] font-bold tracking-tight sm:text-base">
+                <span class="text-highlighted">Pic</span><span class="text-primary">Host</span>
+              </p>
+              <p class="mt-0.5 hidden text-[11px] text-muted min-[380px]:block sm:text-xs">
+                {{ t('app.tagline') }}
+              </p>
+            </div>
+          </NuxtLink>

          <ClientOnly>
-            <UDropdownMenu
-              v-if="user"
-              :items="userMenuItems"
-            >
-              <UButton
-                variant="ghost"
-                color="neutral"
-                size="sm"
-                class="max-w-[10rem] gap-1.5"
-              >
-                <UIcon
-                  name="i-lucide-user"
-                  class="size-4 shrink-0"
+            <div class="flex shrink-0 items-center gap-0.5 sm:gap-1">
+              <nav class="hidden items-center gap-1 sm:flex">
+                <UButton
+                  v-for="item in navItems"
+                  :key="item.to"
+                  :to="item.to"
+                  size="sm"
+                  :variant="isNavActive(item.to) ? 'soft' : 'ghost'"
+                  :color="isNavActive(item.to) ? 'primary' : 'neutral'"
+                  :icon="item.icon"
+                  :label="item.label"
                />
-                <span class="truncate">{{ user.username }}</span>
-                <UIcon
-                  name="i-lucide-chevron-down"
-                  class="size-3.5 shrink-0 opacity-60"
+              </nav>
+
+              <div class="mx-1 hidden h-5 w-px bg-muted sm:block" />
+
+              <div class="hidden items-center gap-0.5 sm:flex">
+                <LocaleMenu />
+                <ThemeMenu />
+              </div>
+
+              <div class="flex items-center gap-0.5 sm:hidden">
+                <MobileUserMenu
+                  v-if="user"
+                  v-model:open="mobileUserOpen"
                />
-              </UButton>
-            </UDropdownMenu>
-            <UDropdownMenu :items="themeItems">
-              <UButton
-                :icon="themeIcon"
-                variant="ghost"
-                color="neutral"
-                size="sm"
-                aria-label="切换主题"
-              />
-            </UDropdownMenu>
+                <MobileNavMenu
+                  v-model:open="mobileNavOpen"
+                  :items="navItems"
+                />
+              </div>
+
+              <div class="hidden sm:block">
+                <UDropdownMenu
+                  v-if="user"
+                  :items="desktopUserMenuItems"
+                >
+                  <UButton
+                    variant="ghost"
+                    color="neutral"
+                    size="sm"
+                    class="max-w-[10rem] gap-1.5"
+                  >
+                    <UIcon
+                      name="i-lucide-user"
+                      class="size-4 shrink-0"
+                    />
+                    <span class="truncate">{{ user.username }}</span>
+                    <UIcon
+                      name="i-lucide-chevron-down"
+                      class="size-3.5 shrink-0 opacity-60"
+                    />
+                  </UButton>
+                </UDropdownMenu>
+              </div>
+            </div>
            <template #fallback>
              <div class="size-8" />
            </template>
@@ -0,0 +1,6 @@
+<template>
+  <div class="flex items-center gap-1">
+    <LocaleMenu />
+    <ThemeMenu />
+  </div>
+</template>
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import 'cap-widget'
+
+const props = defineProps<{
+  apiEndpoint: string
+}>()
+
+const emit = defineEmits<{
+  verified: [payload: { capToken: string }]
+  cleared: []
+}>()
+
+const { t } = useI18n()
+
+const widgetRef = ref<HTMLElement | null>(null)
+
+function onSolve(event: Event) {
+  const token = (event as CustomEvent<{ token: string }>).detail?.token
+  if (token) {
+    emit('verified', { capToken: token })
+  }
+}
+
+function onError() {
+  emit('cleared')
+}
+
+function reset() {
+  const widget = widgetRef.value as (HTMLElement & { reset?: () => void }) | null
+  widget?.reset?.()
+  emit('cleared')
+}
+
+defineExpose({ reset })
+</script>
+
+<template>
+  <ClientOnly>
+    <cap-widget
+      ref="widgetRef"
+      :data-cap-api-endpoint="props.apiEndpoint"
+      :data-cap-i18n-initial-state="t('auth.capInitialState')"
+      :data-cap-i18n-verifying-label="t('auth.capVerifying')"
+      :data-cap-i18n-solved-label="t('auth.capSolved')"
+      :data-cap-i18n-error-label="t('auth.capError')"
+      @solve="onSolve"
+      @error="onError"
+    />
+  </ClientOnly>
+</template>
@@ -6,6 +6,8 @@ const props = defineProps<{
  icon?: string
  block?: boolean
  successTitle?: string
+  variant?: 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link'
+  color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
 }>()

 const emit = defineEmits<{
@@ -13,6 +15,7 @@ const emit = defineEmits<{
 }>()

 const toast = useToast()
+const { t } = useI18n()
 const copying = ref(false)

 function copyWithFallback(text: string): boolean {
@@ -40,7 +43,7 @@ function copyWithFallback(text: string): boolean {

 function notifySuccess() {
  toast.add({
-    title: props.successTitle ?? (props.label ? `已复制 ${props.label}` : '已复制到剪贴板'),
+    title: props.successTitle ?? (props.label ? t('copy.copiedLabel', { label: props.label }) : t('copy.copied')),
    color: 'success'
  })
  emit('copied')
@@ -64,7 +67,7 @@ async function copy() {
    if (copyWithFallback(props.value)) {
      notifySuccess()
    } else {
-      toast.add({ title: '复制失败，请手动选中链接复制', color: 'error' })
+      toast.add({ title: t('copy.failedManual'), color: 'error' })
    }
  } finally {
    copying.value = false
@@ -75,7 +78,8 @@ async function copy() {
 <template>
  <UButton
    size="xs"
-    variant="soft"
+    :variant="variant ?? 'soft'"
+    :color="color"
    :loading="copying"
    :disabled="!value"
    :label="iconOnly ? undefined : label"
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
  open: boolean
  count: number
  loading?: boolean
@@ -10,6 +10,10 @@ const emit = defineEmits<{
  'confirm': []
 }>()

+const { t } = useI18n()
+
+const description = computed(() => t('delete.confirmDesc', { count: props.count }))
+
 function close() {
  emit('update:open', false)
 }
@@ -22,20 +26,20 @@ function confirm() {
 <template>
  <UModal
    :open="open"
-    title="确认删除"
-    :description="`确定要删除选中的 ${count} 张图片吗？此操作不可恢复。`"
+    :title="t('delete.confirmTitle')"
+    :description="description"
    @update:open="emit('update:open', $event)"
  >
    <template #footer>
      <div class="flex justify-end gap-2">
        <UButton
-          label="取消"
+          :label="t('common.cancel')"
          color="neutral"
          variant="outline"
          @click="close"
        />
        <UButton
-          label="确认删除"
+          :label="t('delete.confirm')"
          color="error"
          :loading="loading"
          @click="confirm"
@@ -1,37 +1,90 @@
 <script setup lang="ts">
 import type { ImageItem } from '~/types/image'
-
-type CopyFormat = 'url' | 'markdown' | 'html'
+import type { CopyFormat } from '~/composables/useUploadPreferences'

 const props = withDefaults(defineProps<{
  image: ImageItem
  selected: boolean
-  deleting?: boolean
  selectable?: boolean
  showKey?: boolean
+  showStorage?: boolean
+  compact?: boolean
+  gallery?: boolean
+  allowDelete?: boolean
 }>(), {
  selectable: true,
-  showKey: true
+  showKey: true,
+  showStorage: false,
+  compact: false,
+  gallery: false,
+  allowDelete: true
 })

 const emit = defineEmits<{
  'update:selected': [value: boolean]
+  'preview': []
  'delete': []
 }>()

 const { formatFileSize } = useFileSize()
+const { t, locale } = useI18n()
+const toast = useToast()
+const { copyFormat } = useUploadPreferences()
 const imageError = ref(false)
-const copyFormat = ref<CopyFormat>('url')
+const retryCount = ref(0)

-const copyFormatItems = [
-  { label: '直链', value: 'url' as const },
-  { label: 'Markdown', value: 'markdown' as const },
-  { label: 'HTML', value: 'html' as const }
-]
+function selectCopyFormat(value: CopyFormat) {
+  copyFormat.value = value
+}
+
+const MAX_PREVIEW_RETRIES = 3
+const PREVIEW_RETRY_DELAYS_MS = [1000, 2000, 4000]
+
+const previewSrc = computed(() => {
+  if (retryCount.value === 0) return props.image.url
+  const separator = props.image.url.includes('?') ? '&' : '?'
+  return `${props.image.url}${separator}retry=${retryCount.value}`
+})
+
+watch(() => props.image.key, () => {
+  imageError.value = false
+  retryCount.value = 0
+})
+
+let retryTimer: ReturnType<typeof setTimeout> | undefined
+
+function clearRetryTimer() {
+  if (retryTimer !== undefined) {
+    clearTimeout(retryTimer)
+    retryTimer = undefined
+  }
+}
+
+function onPreviewError() {
+  if (retryCount.value >= MAX_PREVIEW_RETRIES) {
+    imageError.value = true
+    return
+  }
+
+  const delay = PREVIEW_RETRY_DELAYS_MS[retryCount.value] ?? PREVIEW_RETRY_DELAYS_MS.at(-1)!
+  clearRetryTimer()
+  retryTimer = setTimeout(() => {
+    retryCount.value += 1
+    retryTimer = undefined
+  }, delay)
+}
+
+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 }
+])

 const uploadedLabel = computed(() => {
  try {
-    return new Date(props.image.uploadedAt).toLocaleString('zh-CN', { hour12: false })
+    return new Date(props.image.uploadedAt).toLocaleString(locale.value, { hour12: false })
  } catch {
    return props.image.uploadedAt
  }
@@ -51,63 +104,212 @@ const previewValue = computed(() => {
 const copySuccessTitle = computed(() => {
  switch (copyFormat.value) {
    case 'markdown':
-      return '已复制 Markdown'
+      return t('copy.copiedMarkdown')
    case 'html':
-      return '已复制 HTML'
+      return t('copy.copiedHtml')
    default:
-      return '已复制直链'
+      return t('copy.copiedUrl')
+  }
+})
+
+const storageIcon = computed(() =>
+  props.image.storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
+)
+
+const uploadSourceLabel = computed(() => {
+  switch (props.image.uploadSource) {
+    case 'web':
+      return t('stats.tagWeb')
+    case 'api':
+      return t('stats.tagApi')
+    default:
+      return null
  }
 })

 function toggleSelected(value: boolean | 'indeterminate') {
  emit('update:selected', value === true)
 }
+
+const copyingUrl = ref(false)
+
+async function copyGalleryUrl() {
+  if (copyingUrl.value || !props.image.url) return
+  copyingUrl.value = true
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(props.image.url)
+    } else {
+      const textarea = document.createElement('textarea')
+      textarea.value = props.image.url
+      textarea.setAttribute('readonly', '')
+      textarea.style.position = 'fixed'
+      textarea.style.left = '-9999px'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+    }
+    toast.add({ title: t('copy.copiedUrl'), color: 'success' })
+  } catch {
+    toast.add({ title: t('copy.failedManual'), color: 'error' })
+  } finally {
+    copyingUrl.value = false
+  }
+}
 </script>

 <template>
-  <div class="flex flex-col overflow-hidden rounded-xl border border-default bg-elevated shadow-sm">
-    <div class="relative aspect-square shrink-0 overflow-hidden bg-muted">
+  <div
+    v-if="gallery"
+    class="flex flex-col overflow-hidden rounded-xl border border-default bg-elevated"
+  >
+    <div class="relative aspect-[4/3] shrink-0 overflow-hidden bg-muted">
      <img
        v-if="!imageError"
-        :src="image.url"
+        :key="`${image.key}-${retryCount}`"
+        :src="previewSrc"
        :alt="image.originalName"
        loading="lazy"
-        class="absolute inset-0 size-full object-cover object-center"
-        @error="imageError = true"
+        class="size-full cursor-zoom-in object-cover object-center"
+        role="button"
+        tabindex="0"
+        :aria-label="t('image.openPreview')"
+        @click="emit('preview')"
+        @keydown.enter="emit('preview')"
+        @keydown.space.prevent="emit('preview')"
+        @error="onPreviewError"
+      >
+      <div
+        v-else
+        class="flex size-full items-center justify-center text-xs text-muted"
+      >
+        {{ t('image.previewFailed') }}
+      </div>
+
+      <div
+        v-if="selectable"
+        class="absolute top-2 left-2"
+        @click.stop
+      >
+        <UCheckbox
+          :model-value="selected"
+          :ui="{ base: 'shadow-none' }"
+          @update:model-value="toggleSelected"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-1.5 p-3">
+      <p
+        class="truncate text-sm font-semibold"
+        :title="image.originalName"
+      >
+        {{ image.originalName }}
+      </p>
+      <p class="truncate text-xs text-muted">
+        {{ uploadedLabel }} · {{ formatFileSize(image.size) }}
+      </p>
+      <div
+        v-if="uploadSourceLabel || (showStorage && image.storage)"
+        class="flex flex-wrap 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"
+          :title="image.storage.name"
+        >
+          <UIcon
+            :name="storageIcon"
+            class="size-3 shrink-0"
+          />
+          <span class="truncate">{{ image.storage.name }}</span>
+        </span>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-around border-t border-default px-2 py-2 text-muted">
+      <UButton
+        icon="i-lucide-link"
+        variant="ghost"
+        color="neutral"
+        size="sm"
+        :loading="copyingUrl"
+        :aria-label="t('common.copy')"
+        @click="copyGalleryUrl"
+      />
+      <UButton
+        icon="i-lucide-eye"
+        variant="ghost"
+        color="neutral"
+        size="sm"
+        :aria-label="t('image.openPreview')"
+        @click="emit('preview')"
+      />
+      <UButton
+        v-if="allowDelete"
+        icon="i-lucide-trash-2"
+        variant="ghost"
+        color="neutral"
+        size="sm"
+        :aria-label="t('common.delete')"
+        @click="emit('delete')"
+      />
+    </div>
+  </div>
+
+  <div
+    v-else
+    class="flex flex-col overflow-hidden rounded-xl border border-default bg-elevated shadow-sm"
+  >
+    <div
+      class="relative aspect-square shrink-0 overflow-hidden bg-muted"
+      role="button"
+      tabindex="0"
+      :aria-label="t('image.openPreview')"
+      @click="emit('preview')"
+      @keydown.enter="emit('preview')"
+      @keydown.space.prevent="emit('preview')"
+    >
+      <img
+        v-if="!imageError"
+        :key="`${image.key}-${retryCount}`"
+        :src="previewSrc"
+        :alt="image.originalName"
+        loading="lazy"
+        class="absolute inset-0 size-full cursor-zoom-in object-cover object-center"
+        @error="onPreviewError"
      >
      <div
        v-else
        class="flex h-full items-center justify-center text-sm text-muted"
      >
-        预览失败
+        {{ t('image.previewFailed') }}
      </div>
      <div
        v-if="selectable"
        class="absolute top-2 left-2"
+        @click.stop
      >
        <UCheckbox
          :model-value="selected"
          @update:model-value="toggleSelected"
        />
      </div>
-      <div class="absolute top-2 right-2">
-        <UButton
-          size="xs"
-          color="error"
-          variant="solid"
-          icon="i-lucide-trash-2"
-          aria-label="删除"
-          :loading="deleting"
-          @click="emit('delete')"
-        />
-      </div>
      <div
        v-if="image.owner"
-        class="absolute bottom-2 left-2 max-w-[calc(100%-1rem)]"
+        class="absolute bottom-2 left-2 max-w-[calc(50%-0.5rem)]"
+        @click.stop
      >
        <span
          class="inline-flex max-w-full items-center gap-1 rounded-md bg-black/65 px-2 py-0.5 text-xs font-medium text-white shadow-sm backdrop-blur-sm"
-          :title="`上传者：${image.owner.username}`"
+          :title="t('image.uploader', { name: image.owner.username })"
        >
          <UIcon
            name="i-lucide-user"
@@ -116,9 +318,53 @@ function toggleSelected(value: boolean | 'indeterminate') {
          <span class="truncate">{{ image.owner.username }}</span>
        </span>
      </div>
+      <div
+        v-if="showStorage && image.storage"
+        class="absolute bottom-2 max-w-[calc(50%-0.5rem)]"
+        :class="image.owner ? 'right-2' : 'left-2'"
+        @click.stop
+      >
+        <span
+          class="inline-flex max-w-full items-center gap-1 rounded-md bg-black/65 px-2 py-0.5 text-xs font-medium text-white shadow-sm backdrop-blur-sm"
+          :title="t('image.storageBackend', { name: image.storage.name })"
+        >
+          <UIcon
+            :name="storageIcon"
+            class="size-3 shrink-0"
+          />
+          <span class="truncate">{{ image.storage.name }}</span>
+        </span>
+      </div>
    </div>

-    <div class="flex flex-1 flex-col gap-2 p-3">
+    <div
+      v-if="compact"
+      class="flex items-center gap-1.5 p-2 sm:hidden"
+    >
+      <div class="min-w-0 flex-1">
+        <p
+          class="truncate text-xs font-medium"
+          :title="image.originalName"
+        >
+          {{ image.originalName }}
+        </p>
+        <p class="text-[11px] text-muted">
+          {{ formatFileSize(image.size) }}
+        </p>
+      </div>
+      <CopyButton
+        icon="i-lucide-copy"
+        icon-only
+        :label="t('common.copy')"
+        :value="image.url"
+        :success-title="t('copy.copiedUrl')"
+      />
+    </div>
+
+    <div
+      class="flex flex-1 flex-col gap-2 p-3"
+      :class="{ 'hidden sm:flex': compact }"
+    >
      <p
        class="truncate text-sm font-medium"
        :title="image.originalName"
@@ -138,7 +384,7 @@ function toggleSelected(value: boolean | 'indeterminate') {
          :variant="copyFormat === item.value ? 'solid' : 'ghost'"
          :color="copyFormat === item.value ? 'primary' : 'neutral'"
          :label="item.label"
-          @click="() => { copyFormat = item.value }"
+          @click="selectCopyFormat(item.value)"
        />
      </div>

@@ -151,7 +397,7 @@ function toggleSelected(value: boolean | 'indeterminate') {
        />
        <CopyButton
          icon="i-lucide-copy"
-          label="复制"
+          :label="t('common.copy')"
          :value="previewValue"
          :success-title="copySuccessTitle"
        />
@@ -4,21 +4,45 @@ import type { ImageItem } from '~/types/image'
 const props = withDefaults(defineProps<{
  items: ImageItem[]
  selectedKeys: Set<string>
-  deletingKeys: Set<string>
  selectable?: boolean
  showKey?: boolean
+  showStorage?: boolean
  emptyText?: string
+  dense?: boolean
+  compact?: boolean
+  /** 图库：5 列 × 2 行，缩略图略扁 */
+  gallery?: boolean
+  allowDelete?: boolean
 }>(), {
  selectable: true,
  showKey: true,
-  emptyText: '暂无图片'
+  showStorage: false,
+  dense: false,
+  compact: false,
+  gallery: false,
+  allowDelete: true
+})
+
+const gridClass = computed(() => {
+  if (props.gallery) {
+    return 'grid items-start grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'
+  }
+  if (props.dense) {
+    return 'grid items-start grid-cols-2 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
+  }
+  return 'grid items-start grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
 })

 const emit = defineEmits<{
  'update:selectedKeys': [value: Set<string>]
-  'delete': [key: string]
+  'preview': [image: ImageItem]
+  'delete': [image: ImageItem]
 }>()

+const { t } = useI18n()
+
+const displayEmptyText = computed(() => props.emptyText ?? t('image.empty'))
+
 function updateSelection(key: string, selected: boolean) {
  const next = new Set(props.selectedKeys)
  if (selected) next.add(key)
@@ -30,24 +54,29 @@ function updateSelection(key: string, selected: boolean) {
 <template>
  <div
    v-if="items.length"
-    class="grid grid-cols-1 items-start gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+    class="items-start"
+    :class="gridClass"
  >
    <ImageCard
      v-for="image in items"
      :key="image.key"
      :image="image"
      :selected="selectedKeys.has(image.key)"
-      :deleting="deletingKeys.has(image.key)"
      :selectable="selectable"
      :show-key="showKey"
+      :show-storage="showStorage"
+      :compact="compact"
+      :gallery="gallery"
+      :allow-delete="allowDelete"
      @update:selected="updateSelection(image.key, $event)"
-      @delete="emit('delete', image.key)"
+      @preview="emit('preview', image)"
+      @delete="emit('delete', image)"
    />
  </div>
  <div
    v-else
    class="rounded-xl border border-dashed border-default py-16 text-center text-sm text-muted"
  >
-    {{ emptyText }}
+    {{ displayEmptyText }}
  </div>
 </template>
@@ -0,0 +1,426 @@
+<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'
+
+const props = withDefaults(defineProps<{
+  open: boolean
+  image: ImageItem | null
+  showStorage?: boolean
+  deleting?: boolean
+  allowDelete?: boolean
+}>(), {
+  showStorage: false,
+  allowDelete: true
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'delete': []
+}>()
+
+const toast = useToast()
+const { formatFileSize } = useFileSize()
+const { t, locale } = useI18n()
+const { copyFormat } = useUploadPreferences()
+
+const naturalWidth = ref<number | null>(null)
+const naturalHeight = ref<number | null>(null)
+const dimensionsLoaded = ref(false)
+const copyingUrl = ref(false)
+const embedFormat = ref<EmbedFormat>('url')
+
+const embedFormatItems = computed(() => [
+  { label: t('copy.url'), value: 'url' as const },
+  { label: t('copy.markdown'), value: 'markdown' as const },
+  { label: t('copy.html'), value: 'html' as const },
+  { label: t('copy.bbcode'), value: 'bbcode' as const }
+])
+
+const uploadedLabel = computed(() => {
+  if (!props.image) return '—'
+  try {
+    const date = new Date(props.image.uploadedAt)
+    const y = date.getFullYear()
+    const m = String(date.getMonth() + 1).padStart(2, '0')
+    const d = String(date.getDate()).padStart(2, '0')
+    const h = String(date.getHours()).padStart(2, '0')
+    const min = String(date.getMinutes()).padStart(2, '0')
+    const s = String(date.getSeconds()).padStart(2, '0')
+    return `${y}/${m}/${d} ${h}:${min}:${s}`
+  } catch {
+    return props.image.uploadedAt
+  }
+})
+
+const sizeLabel = computed(() => {
+  if (!props.image) return '—'
+  return t('image.previewSizeDetail', {
+    size: formatFileSize(props.image.size),
+    bytes: props.image.size.toLocaleString(locale.value)
+  })
+})
+
+const bbcodeValue = computed(() => {
+  if (!props.image) return ''
+  return `[img]${props.image.url}[/img]`
+})
+
+const previewValue = computed(() => {
+  if (!props.image) return ''
+  switch (embedFormat.value) {
+    case 'markdown':
+      return props.image.markdown
+    case 'html':
+      return props.image.html
+    case 'bbcode':
+      return bbcodeValue.value
+    default:
+      return props.image.url
+  }
+})
+
+const copySuccessTitle = computed(() => {
+  switch (embedFormat.value) {
+    case 'markdown':
+      return t('copy.copiedMarkdown')
+    case 'html':
+      return t('copy.copiedHtml')
+    case 'bbcode':
+      return t('copy.copiedBbcode')
+    default:
+      return t('copy.copiedUrl')
+  }
+})
+
+const storageIcon = computed(() =>
+  props.image?.storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
+)
+
+const uploadSourceTag = computed(() => {
+  switch (props.image?.uploadSource) {
+    case 'web':
+      return t('stats.tagWeb')
+    case 'api':
+      return t('stats.tagApi')
+    default:
+      return null
+  }
+})
+
+const dimensionsLabel = computed(() => {
+  const formatted = formatImageDimensions(naturalWidth.value, naturalHeight.value)
+  if (formatted) return formatted
+  return dimensionsLoaded.value ? '—' : t('image.previewDimensionsUnknown')
+})
+
+watch(() => props.image?.key, () => {
+  naturalWidth.value = null
+  naturalHeight.value = null
+  dimensionsLoaded.value = false
+})
+
+watch(() => props.open, (open) => {
+  if (open) {
+    embedFormat.value = copyFormat.value
+  }
+})
+
+function selectEmbedFormat(value: EmbedFormat) {
+  embedFormat.value = value
+  if (value !== 'bbcode') {
+    copyFormat.value = value
+  }
+}
+
+async function copyText(text: string, successTitle: string) {
+  if (!text) return false
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+      toast.add({ title: successTitle, color: 'success' })
+      return true
+    }
+  } catch {
+    // fallback below
+  }
+
+  const textarea = document.createElement('textarea')
+  textarea.value = text
+  textarea.setAttribute('readonly', '')
+  textarea.style.position = 'fixed'
+  textarea.style.left = '-9999px'
+  document.body.appendChild(textarea)
+  textarea.select()
+  let ok = false
+  try {
+    ok = document.execCommand('copy')
+  } catch {
+    ok = false
+  } finally {
+    document.body.removeChild(textarea)
+  }
+
+  if (ok) {
+    toast.add({ title: successTitle, color: 'success' })
+  } else {
+    toast.add({ title: t('copy.failedManual'), color: 'error' })
+  }
+  return ok
+}
+
+async function copyLink() {
+  if (!props.image?.url || copyingUrl.value) return
+  copyingUrl.value = true
+  try {
+    await copyText(props.image.url, t('copy.copiedUrl'))
+  } finally {
+    copyingUrl.value = false
+  }
+}
+
+function openInNewTab() {
+  if (!props.image?.url) return
+  window.open(props.image.url, '_blank', 'noopener,noreferrer')
+}
+
+function downloadOriginal() {
+  if (!props.image?.url) return
+  const link = document.createElement('a')
+  link.href = props.image.url
+  link.download = props.image.originalName || 'image'
+  link.rel = 'noopener'
+  link.click()
+}
+
+function requestDelete() {
+  emit('delete')
+}
+
+function onImageLoad(event: Event) {
+  const img = event.target as HTMLImageElement
+  naturalWidth.value = img.naturalWidth
+  naturalHeight.value = img.naturalHeight
+  dimensionsLoaded.value = true
+}
+</script>
+
+<template>
+  <UModal
+    :open="open && !!image"
+    :title="t('image.previewTitle')"
+    :description="t('image.previewSubtitle')"
+    :ui="{ content: 'max-w-5xl' }"
+    @update:open="emit('update:open', $event)"
+  >
+    <template
+      v-if="image"
+      #body
+    >
+      <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:items-start">
+        <div class="preview-checkerboard flex items-center justify-center overflow-hidden rounded-xl border border-default p-4">
+          <img
+            :src="image.url"
+            :alt="image.originalName"
+            class="max-h-[min(60vh,24rem)] w-full object-contain"
+            @load="onImageLoad"
+          >
+        </div>
+
+        <div class="flex min-w-0 flex-col gap-5">
+          <dl class="divide-y divide-default text-sm">
+            <div class="flex gap-4 py-2.5 first:pt-0">
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewOriginalName') }}
+              </dt>
+              <dd class="min-w-0 flex-1 break-all font-medium">
+                {{ image.originalName }}
+              </dd>
+            </div>
+            <div class="flex gap-4 py-2.5">
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewUploadedAt') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                {{ uploadedLabel }}
+              </dd>
+            </div>
+            <div class="flex gap-4 py-2.5">
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewSize') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                {{ sizeLabel }}
+              </dd>
+            </div>
+            <div class="flex gap-4 py-2.5">
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewDimensions') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                {{ dimensionsLabel }}
+              </dd>
+            </div>
+            <div class="flex gap-4 py-2.5">
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewContentType') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                {{ image.contentType }}
+              </dd>
+            </div>
+            <div
+              v-if="showStorage && image.storage"
+              class="flex gap-4 py-2.5"
+            >
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewStorage') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                <span class="inline-flex items-center gap-1.5">
+                  <UIcon
+                    :name="storageIcon"
+                    class="size-3.5 shrink-0 text-muted"
+                  />
+                  {{ image.storage.name }}
+                </span>
+              </dd>
+            </div>
+            <div
+              v-if="uploadSourceTag"
+              class="flex gap-4 py-2.5"
+            >
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewUploadSource') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                <span class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                  {{ uploadSourceTag }}
+                </span>
+              </dd>
+            </div>
+            <div
+              v-if="image.owner"
+              class="flex gap-4 py-2.5"
+            >
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewOwner') }}
+              </dt>
+              <dd class="min-w-0 flex-1">
+                {{ image.owner.username }}
+              </dd>
+            </div>
+            <div class="flex gap-4 py-2.5 last:pb-0">
+              <dt class="w-20 shrink-0 text-muted">
+                {{ t('image.previewKey') }}
+              </dt>
+              <dd class="flex min-w-0 flex-1 items-start gap-2">
+                <span class="min-w-0 flex-1 break-all font-mono text-xs text-dimmed">
+                  {{ image.key }}
+                </span>
+                <CopyButton
+                  icon="i-lucide-copy"
+                  icon-only
+                  variant="ghost"
+                  color="neutral"
+                  class="shrink-0"
+                  :label="t('common.copy')"
+                  :value="image.key"
+                  :success-title="t('copy.copied')"
+                />
+              </dd>
+            </div>
+          </dl>
+
+          <div class="border-t border-default pt-4">
+            <p class="mb-2.5 text-sm font-medium">
+              {{ t('image.previewLinks') }}
+            </p>
+            <div class="flex gap-1 rounded-lg border border-default bg-default p-0.5">
+              <UButton
+                v-for="item in embedFormatItems"
+                :key="item.value"
+                size="xs"
+                class="flex-1 justify-center"
+                :variant="embedFormat === item.value ? 'solid' : 'ghost'"
+                :color="embedFormat === item.value ? 'primary' : 'neutral'"
+                :label="item.label"
+                @click="selectEmbedFormat(item.value)"
+              />
+            </div>
+            <div class="mt-2 flex items-center gap-2">
+              <UInput
+                :model-value="previewValue"
+                readonly
+                size="sm"
+                class="min-w-0 flex-1 font-mono text-xs"
+              />
+              <CopyButton
+                :label="t('common.copy')"
+                :value="previewValue"
+                :success-title="copySuccessTitle"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template
+      v-if="image"
+      #footer
+    >
+      <div class="flex w-full flex-wrap justify-end gap-1.5">
+        <UButton
+          :label="t('image.previewOpen')"
+          icon="i-lucide-external-link"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          @click="openInNewTab"
+        />
+        <UButton
+          :label="t('image.previewDownload')"
+          icon="i-lucide-download"
+          color="neutral"
+          variant="outline"
+          size="sm"
+          @click="downloadOriginal"
+        />
+        <UButton
+          :label="t('image.previewCopyLink')"
+          icon="i-lucide-link"
+          color="primary"
+          size="sm"
+          :loading="copyingUrl"
+          @click="copyLink"
+        />
+        <UButton
+          v-if="allowDelete"
+          :label="t('common.delete')"
+          icon="i-lucide-trash-2"
+          color="error"
+          variant="outline"
+          size="sm"
+          :loading="deleting"
+          @click="requestDelete"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<style scoped>
+.preview-checkerboard {
+  background-color: var(--ui-bg-muted);
+  background-image:
+    linear-gradient(45deg, color-mix(in oklab, var(--ui-border) 28%, transparent) 25%, transparent 25%),
+    linear-gradient(-45deg, color-mix(in oklab, var(--ui-border) 28%, transparent) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, color-mix(in oklab, var(--ui-border) 28%, transparent) 75%),
+    linear-gradient(-45deg, transparent 75%, color-mix(in oklab, var(--ui-border) 28%, transparent) 75%);
+  background-size: 14px 14px;
+  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
+}
+</style>
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import uploadCardBg from '~/assets/image/upload-card-bg.webp'
+import uploadCardHero from '~/assets/image/upload-card-hero.webp'
+
 const props = defineProps<{
  disabled?: boolean
 }>()
@@ -10,12 +13,10 @@ const emit = defineEmits<{

 const fileInput = ref<HTMLInputElement | null>(null)
 const dragging = ref(false)
-const hovering = ref(false)

+const { t } = useI18n()
 const { bindPaste } = useClipboardImage(ref(null))

-const isActive = computed(() => dragging.value || hovering.value)
-
 bindPaste((files) => {
  if (!props.disabled) emit('upload', files)
 })
@@ -51,31 +52,33 @@ function onDragLeave() {
  dragging.value = false
 }

-function onMouseEnter() {
-  if (!props.disabled) hovering.value = true
-}
-
-function onMouseLeave() {
-  hovering.value = false
-}
-
-function openSettings() {
+function openSettings(event: Event) {
+  event.stopPropagation()
  if (props.disabled) return
  emit('open-settings')
 }
+
+function onKeydown(event: KeyboardEvent) {
+  if (props.disabled) return
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    openFilePicker()
+  }
+}
 </script>

 <template>
  <div
-    class="upload-card-surface group/upload relative text-center transition-all duration-300 ease-out"
-    :class="isActive
-      ? 'scale-[1.01] border-primary bg-primary/5 shadow-md shadow-primary/10'
-      : 'hover:border-primary/50 hover:bg-primary/[0.04] hover:shadow-sm'"
+    role="button"
+    tabindex="0"
+    class="upload-card-surface group/upload relative cursor-pointer overflow-hidden text-center outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+    :class="{ 'upload-card-surface--active': dragging }"
+    :aria-disabled="disabled"
+    @click="openFilePicker"
+    @keydown="onKeydown"
    @drop="onDrop"
    @dragover="onDragOver"
    @dragleave="onDragLeave"
-    @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave"
  >
    <input
      ref="fileInput"
@@ -87,11 +90,20 @@ function openSettings() {
      @change="onFileChange"
    >

-    <div class="absolute top-3 right-3 z-10">
+    <img
+      :src="uploadCardBg"
+      alt=""
+      aria-hidden="true"
+      class="pointer-events-none absolute inset-0 size-full object-cover opacity-100 dark:opacity-[0.12]"
+      decoding="async"
+      draggable="false"
+    >
+
+    <div class="absolute top-3 right-3 z-20">
      <button
        type="button"
-        class="upload-settings-btn inline-flex size-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-elevated hover:text-highlighted disabled:pointer-events-none disabled:opacity-40"
-        aria-label="上传设置"
+        class="upload-settings-btn inline-flex size-8 items-center justify-center rounded-md bg-default/70 text-muted backdrop-blur-sm transition-colors hover:bg-elevated hover:text-highlighted disabled:pointer-events-none disabled:opacity-40"
+        :aria-label="t('upload.settings')"
        :disabled="disabled"
        @click="openSettings"
      >
@@ -102,39 +114,31 @@ function openSettings() {
      </button>
    </div>

-    <div class="mx-auto max-w-lg space-y-4">
-      <div
-        class="mx-auto flex size-16 items-center justify-center rounded-2xl bg-primary/10 transition-transform duration-300 ease-out"
-        :class="isActive ? 'scale-110' : 'group-hover/upload:scale-105'"
-      >
-        <UIcon
-          name="i-lucide-cloud-upload"
-          class="size-8 text-primary transition-transform duration-300"
-          :class="isActive ? '-translate-y-0.5' : ''"
-        />
+    <div class="relative z-10 mx-auto flex max-w-lg flex-col items-center">
+      <div class="flex flex-col items-center">
+        <img
+          :src="uploadCardHero"
+          alt=""
+          aria-hidden="true"
+          class="h-24 w-auto -mb-3 select-none transition-transform duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] sm:-mb-4 sm:h-28 md:h-32"
+          :class="dragging ? 'scale-105' : 'group-hover/upload:scale-[1.02]'"
+          decoding="async"
+          draggable="false"
+        >
+
+        <div class="space-y-2">
+          <p class="text-xl font-semibold tracking-tight text-highlighted sm:text-2xl">
+            {{ t('upload.title') }}
+          </p>
+          <p class="text-sm text-muted sm:text-base">
+            {{ t('upload.hint', { ctrl: 'Ctrl', v: 'V' }) }}
+          </p>
+        </div>
      </div>
-      <div class="space-y-2">
-        <p class="text-xl font-semibold tracking-tight">
-          拖拽图片到此处上传
-        </p>
-        <p class="text-sm text-muted">
-          或点击选择文件，按
-          <kbd class="mx-1 rounded border border-default bg-muted/50 px-1.5 py-0.5 font-mono text-xs">Ctrl</kbd>
-          +
-          <kbd class="mx-1 rounded border border-default bg-muted/50 px-1.5 py-0.5 font-mono text-xs">V</kbd>
-          粘贴图片
-        </p>
-      </div>
-      <p class="text-xs text-dimmed">
-        支持 JPEG / PNG / WebP / GIF / SVG / ICO，单张最大 10 MB，每次最多 10 张
+
+      <p class="mt-4 max-w-md text-xs leading-relaxed text-dimmed sm:text-sm">
+        {{ t('upload.formats') }}
      </p>
-      <UButton
-        label="选择图片"
-        icon="i-lucide-upload"
-        size="lg"
-        :disabled="disabled"
-        @click="openFilePicker"
-      />
    </div>
  </div>
 </template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const { localeMenuItems } = useAppearanceMenus()
+const { t } = useI18n()
+</script>
+
+<template>
+  <UDropdownMenu :items="localeMenuItems">
+    <UButton
+      icon="i-lucide-languages"
+      variant="ghost"
+      color="neutral"
+      size="sm"
+      :aria-label="t('locale.switch')"
+    />
+  </UDropdownMenu>
+</template>
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type {
+  LoginVerificationMethod,
+  LoginVerificationPayload
+} from '~/types/auth'
+
+const props = defineProps<{
+  method: LoginVerificationMethod
+  turnstileSiteKey?: string
+  capApiEndpoint?: string
+}>()
+
+const emit = defineEmits<{
+  verified: [payload: LoginVerificationPayload]
+  cleared: []
+}>()
+
+const sliderRef = ref<{ reset: () => Promise<void> } | null>(null)
+const turnstileRef = ref<{ reset: () => void } | null>(null)
+const capRef = ref<{ reset: () => void } | null>(null)
+
+function onSliderVerified(payload: { id: string, positionPercent: number }) {
+  emit('verified', {
+    method: 'slider',
+    captchaId: payload.id,
+    captchaPosition: payload.positionPercent
+  })
+}
+
+function onTurnstileVerified(payload: { turnstileToken: string }) {
+  emit('verified', {
+    method: 'turnstile',
+    turnstileToken: payload.turnstileToken
+  })
+}
+
+function onCapVerified(payload: { capToken: string }) {
+  emit('verified', {
+    method: 'cap',
+    capToken: payload.capToken
+  })
+}
+
+function onCleared() {
+  emit('cleared')
+}
+
+async function reset() {
+  emit('cleared')
+  if (props.method === 'slider') {
+    await sliderRef.value?.reset()
+    return
+  }
+  if (props.method === 'turnstile') {
+    turnstileRef.value?.reset()
+    return
+  }
+  capRef.value?.reset()
+}
+
+defineExpose({ reset })
+</script>
+
+<template>
+  <SliderCaptcha
+    v-if="method === 'slider'"
+    ref="sliderRef"
+    @verified="onSliderVerified"
+  />
+  <TurnstileCaptcha
+    v-else-if="method === 'turnstile' && turnstileSiteKey"
+    ref="turnstileRef"
+    :site-key="turnstileSiteKey"
+    @verified="onTurnstileVerified"
+    @cleared="onCleared"
+  />
+  <CapCaptcha
+    v-else-if="method === 'cap' && capApiEndpoint"
+    ref="capRef"
+    :api-endpoint="capApiEndpoint"
+    @verified="onCapVerified"
+    @cleared="onCleared"
+  />
+  <p
+    v-else
+    class="rounded-lg border border-warning/25 bg-warning/5 px-3 py-2 text-xs text-warning"
+  >
+    {{ $t('auth.verificationMisconfigured') }}
+  </p>
+</template>
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+defineProps<{
+  items: Array<{ label: string, to: string, icon: string }>
+}>()
+
+const open = defineModel<boolean>('open', { default: false })
+
+const route = useRoute()
+const { t } = useI18n()
+const menuRef = ref<HTMLElement | null>(null)
+
+function isActive(to: string) {
+  return route.path.startsWith(to)
+}
+
+function onDocumentClick(event: MouseEvent) {
+  if (!open.value || !menuRef.value) return
+  const target = event.target
+  if (target instanceof Node && !menuRef.value.contains(target)) {
+    open.value = false
+  }
+}
+
+watch(() => route.path, () => {
+  open.value = false
+})
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    document.addEventListener('click', onDocumentClick, true)
+  } else {
+    document.removeEventListener('click', onDocumentClick, true)
+  }
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', onDocumentClick, true)
+})
+
+function toggleOpen() {
+  open.value = !open.value
+}
+</script>
+
+<template>
+  <div
+    ref="menuRef"
+    class="relative sm:hidden"
+  >
+    <UButton
+      variant="outline"
+      color="neutral"
+      size="sm"
+      icon="i-lucide-menu"
+      :aria-label="t('nav.menu')"
+      :aria-expanded="open"
+      @click.stop="toggleOpen"
+    />
+
+    <div
+      v-show="open"
+      class="absolute top-full right-0 z-50 mt-2 w-52 rounded-xl border border-default bg-default p-1.5 shadow-lg"
+      @click.stop
+    >
+      <nav class="space-y-0.5">
+        <NuxtLink
+          v-for="item in items"
+          :key="item.to"
+          :to="item.to"
+          class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
+          :class="isActive(item.to)
+            ? 'bg-primary/10 text-primary'
+            : 'text-highlighted hover:bg-elevated'"
+          @click="open = false"
+        >
+          <UIcon
+            :name="item.icon"
+            class="size-4 shrink-0 opacity-70"
+          />
+          {{ item.label }}
+        </NuxtLink>
+      </nav>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+const open = defineModel<boolean>('open', { default: false })
+
+const { logout } = useAuth()
+const { t, locale } = useI18n()
+const colorMode = useColorMode()
+const {
+  localeOptions,
+  themeOptions,
+  setLocalePreference,
+  setThemePreference
+} = useAppearanceMenus()
+
+const menuRef = ref<HTMLElement | null>(null)
+
+async function handleLogout() {
+  open.value = false
+  await logout()
+}
+
+function onDocumentClick(event: MouseEvent) {
+  if (!open.value || !menuRef.value) return
+  const target = event.target
+  if (target instanceof Node && !menuRef.value.contains(target)) {
+    open.value = false
+  }
+}
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    document.addEventListener('click', onDocumentClick, true)
+  } else {
+    document.removeEventListener('click', onDocumentClick, true)
+  }
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', onDocumentClick, true)
+})
+
+function toggleOpen() {
+  open.value = !open.value
+}
+</script>
+
+<template>
+  <div
+    ref="menuRef"
+    class="relative sm:hidden"
+  >
+    <UButton
+      variant="ghost"
+      color="neutral"
+      size="sm"
+      icon="i-lucide-user"
+      :aria-label="t('nav.account')"
+      :aria-expanded="open"
+      @click.stop="toggleOpen"
+    />
+
+    <div
+      v-show="open"
+      class="absolute top-full right-0 z-50 mt-2 w-[min(20rem,calc(100vw-2rem))] rounded-xl border border-default bg-default p-4 shadow-lg"
+      @click.stop
+    >
+      <section class="space-y-2">
+        <h3 class="flex items-center gap-2 px-1 text-sm font-medium text-muted">
+          <UIcon
+            name="i-lucide-globe"
+            class="size-4"
+          />
+          {{ t('nav.language') }}
+        </h3>
+        <div class="space-y-2">
+          <button
+            v-for="item in localeOptions"
+            :key="item.code"
+            type="button"
+            class="flex w-full items-center justify-between rounded-lg border px-3.5 py-2.5 text-sm transition-colors"
+            :class="locale === item.code
+              ? 'border-primary text-highlighted'
+              : 'border-default text-highlighted hover:bg-elevated'"
+            @click="setLocalePreference(item.code)"
+          >
+            <span>{{ item.label }}</span>
+            <UIcon
+              v-if="locale === item.code"
+              name="i-lucide-check"
+              class="size-4 text-primary"
+            />
+          </button>
+        </div>
+      </section>
+
+      <section class="mt-5 space-y-2">
+        <h3 class="flex items-center gap-2 px-1 text-sm font-medium text-muted">
+          <UIcon
+            name="i-lucide-sun"
+            class="size-4"
+          />
+          {{ t('nav.appearance') }}
+        </h3>
+        <div class="space-y-2">
+          <button
+            v-for="item in themeOptions"
+            :key="item.value"
+            type="button"
+            class="flex w-full items-center justify-between rounded-lg border px-3.5 py-2.5 text-sm transition-colors"
+            :class="colorMode.preference === item.value
+              ? 'border-primary text-highlighted'
+              : 'border-default text-highlighted hover:bg-elevated'"
+            @click="setThemePreference(item.value)"
+          >
+            <span class="flex items-center gap-2.5">
+              <UIcon
+                :name="item.icon"
+                class="size-4 opacity-70"
+              />
+              {{ item.label }}
+            </span>
+            <UIcon
+              v-if="colorMode.preference === item.value"
+              name="i-lucide-check"
+              class="size-4 text-primary"
+            />
+          </button>
+        </div>
+      </section>
+
+      <section class="mt-5 space-y-2">
+        <h3 class="flex items-center gap-2 px-1 text-sm font-medium text-muted">
+          <UIcon
+            name="i-lucide-user"
+            class="size-4"
+          />
+          {{ t('nav.account') }}
+        </h3>
+        <div class="space-y-2">
+          <NuxtLink
+            to="/account/password"
+            class="flex items-center justify-between rounded-lg border border-default px-3.5 py-2.5 text-sm text-highlighted transition-colors hover:bg-elevated"
+            @click="open = false"
+          >
+            <span class="flex items-center gap-2.5">
+              <UIcon
+                name="i-lucide-lock"
+                class="size-4 opacity-70"
+              />
+              {{ t('nav.changePassword') }}
+            </span>
+            <UIcon
+              name="i-lucide-chevron-right"
+              class="size-4 text-muted"
+            />
+          </NuxtLink>
+
+          <button
+            type="button"
+            class="flex w-full items-center justify-between rounded-lg border border-default px-3.5 py-2.5 text-sm text-error transition-colors hover:bg-error/5"
+            @click="handleLogout"
+          >
+            <span class="flex items-center gap-2.5">
+              <UIcon
+                name="i-lucide-log-out"
+                class="size-4"
+              />
+              {{ t('nav.logout') }}
+            </span>
+            <UIcon
+              name="i-lucide-chevron-right"
+              class="size-4 opacity-60"
+            />
+          </button>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
@@ -1,80 +1,250 @@
 <script setup lang="ts">
-const props = defineProps<{
+type PageItem = number | 'ellipsis'
+
+const props = withDefaults(defineProps<{
  page: number
  totalPages: number
  total: number
  unit?: string
  loading?: boolean
-}>()
+  pageSize?: number
+  pageSizeOptions?: number[]
+}>(), {
+  loading: false,
+  pageSizeOptions: () => [10, 20, 30, 50]
+})

 const emit = defineEmits<{
  'update:page': [page: number]
+  'update:pageSize': [pageSize: number]
 }>()

-const unitLabel = computed(() => props.unit ?? '条')
+const { t } = useI18n()
+
+const unitLabel = computed(() => props.unit ?? t('common.itemsUnit'))
+const jumpPageInput = ref('')
+
+const showMobilePageNumbers = computed(() => props.totalPages <= 5)
+
+const visiblePages = computed<PageItem[]>(() => {
+  const total = Math.max(1, props.totalPages)
+  const current = Math.min(Math.max(1, props.page), total)
+
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, index) => index + 1)
+  }
+
+  const pages = new Set<number>([1, total])
+  for (let page = current - 1; page <= current + 1; page++) {
+    if (page >= 1 && page <= total) pages.add(page)
+  }
+
+  const sorted = [...pages].sort((a, b) => a - b)
+  const items: PageItem[] = []
+
+  for (let index = 0; index < sorted.length; index++) {
+    const page = sorted[index]!
+    const prev = sorted[index - 1]
+    if (prev !== undefined && page - prev > 1) {
+      items.push('ellipsis')
+    }
+    items.push(page)
+  }
+
+  return items
+})
+
+const pageSizeItems = computed(() =>
+  props.pageSizeOptions.map(size => ({
+    label: t('pagination.perPage', { size }),
+    value: size
+  }))
+)
+
+watch(
+  () => props.page,
+  (page) => {
+    jumpPageInput.value = String(page)
+  },
+  { immediate: true }
+)

 function goTo(target: number) {
-  if (target < 1 || target > props.totalPages || target === props.page || props.loading) {
-    return
-  }
+  if (target < 1 || target > props.totalPages || props.loading) return
+  if (target === props.page) return
  emit('update:page', target)
 }
+
+function onPageSizeChange(value: unknown) {
+  const size = Number(value)
+  if (!Number.isFinite(size) || size <= 0 || size === props.pageSize) return
+  emit('update:pageSize', size)
+}
+
+function jumpToPage() {
+  const target = Number.parseInt(jumpPageInput.value, 10)
+  if (!Number.isFinite(target)) return
+  goTo(target)
+}
+
+function pageButtonClass(target: number) {
+  return target === props.page
+    ? 'border-primary bg-primary/10 text-primary font-medium'
+    : 'border-default bg-elevated text-default hover:bg-muted'
+}
+
+const navButtonClass = 'inline-flex items-center justify-center rounded-md border border-default bg-elevated text-default transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-40'
 </script>

 <template>
  <div
    v-if="total > 0"
-    class="flex flex-col items-center gap-2 border-t border-default pt-4 sm:flex-row sm:justify-between"
+    class="border-t border-default pt-4"
  >
-    <p
-      v-if="totalPages > 1"
-      class="text-sm text-muted"
-    >
-      第 {{ page }} / {{ totalPages }} 页 · 共 {{ total }} {{ unitLabel }}
-    </p>
-    <p
-      v-else
-      class="text-sm text-muted"
-    >
-      共 {{ total }} {{ unitLabel }}
-    </p>
+    <div class="flex flex-col gap-3">
+      <div class="flex items-center justify-between gap-2 sm:hidden">
+        <p class="text-sm text-muted">
+          {{ t('pagination.totalCount', { total, unit: unitLabel }) }}
+        </p>
+        <USelect
+          v-if="pageSize !== undefined"
+          :model-value="pageSize"
+          :items="pageSizeItems"
+          value-key="value"
+          size="sm"
+          class="w-[6.5rem] shrink-0"
+          :aria-label="t('pagination.pageSize')"
+          :disabled="loading"
+          @update:model-value="onPageSizeChange"
+        />
+      </div>

-    <div
-      v-if="totalPages > 1"
-      class="flex items-center gap-1"
-    >
-      <UButton
-        icon="i-lucide-chevrons-left"
-        variant="outline"
-        size="sm"
-        aria-label="第一页"
-        :disabled="page <= 1 || loading"
-        @click="goTo(1)"
-      />
-      <UButton
-        icon="i-lucide-chevron-left"
-        variant="outline"
-        size="sm"
-        aria-label="上一页"
-        :disabled="page <= 1 || loading"
-        @click="goTo(page - 1)"
-      />
-      <UButton
-        icon="i-lucide-chevron-right"
-        variant="outline"
-        size="sm"
-        aria-label="下一页"
-        :disabled="page >= totalPages || loading"
-        @click="goTo(page + 1)"
-      />
-      <UButton
-        icon="i-lucide-chevrons-right"
-        variant="outline"
-        size="sm"
-        aria-label="最后一页"
-        :disabled="page >= totalPages || loading"
-        @click="goTo(totalPages)"
-      />
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <p class="hidden text-sm text-muted sm:block">
+          {{ t('pagination.totalCount', { total, unit: unitLabel }) }}
+        </p>
+
+        <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end sm:gap-3">
+          <USelect
+            v-if="pageSize !== undefined"
+            :model-value="pageSize"
+            :items="pageSizeItems"
+            value-key="value"
+            size="sm"
+            class="hidden w-[7.5rem] shrink-0 sm:block"
+            :aria-label="t('pagination.pageSize')"
+            :disabled="loading"
+            @update:model-value="onPageSizeChange"
+          />
+
+          <div class="flex items-center justify-center gap-1 sm:justify-end">
+            <button
+              type="button"
+              :class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
+              :aria-label="t('pagination.first')"
+              :disabled="page <= 1 || loading"
+              @click="goTo(1)"
+            >
+              <UIcon
+                name="i-lucide-chevrons-left"
+                class="size-4"
+              />
+            </button>
+            <button
+              type="button"
+              :class="[navButtonClass, 'size-9 sm:size-8']"
+              :aria-label="t('pagination.prev')"
+              :disabled="page <= 1 || loading"
+              @click="goTo(page - 1)"
+            >
+              <UIcon
+                name="i-lucide-chevron-left"
+                class="size-4"
+              />
+            </button>
+
+            <p
+              v-if="!showMobilePageNumbers"
+              class="min-w-[5.5rem] px-1 text-center text-sm text-muted sm:hidden"
+            >
+              {{ t('pagination.pageStatus', { page, totalPages }) }}
+            </p>
+
+            <template
+              v-for="(target, index) in visiblePages"
+              :key="`${target}-${index}`"
+            >
+              <span
+                v-if="target === 'ellipsis'"
+                class="inline-flex size-9 items-center justify-center text-sm text-muted sm:size-8"
+                :class="showMobilePageNumbers ? '' : 'hidden sm:inline-flex'"
+                aria-hidden="true"
+              >
+                …
+              </span>
+              <button
+                v-else
+                type="button"
+                class="inline-flex items-center justify-center rounded-md border text-sm transition-colors disabled:pointer-events-none disabled:opacity-40"
+                :class="[
+                  pageButtonClass(target),
+                  showMobilePageNumbers ? 'size-9 sm:size-8' : 'hidden size-8 sm:inline-flex'
+                ]"
+                :aria-label="t('pagination.pageNumber', { page: target })"
+                :aria-current="target === page ? 'page' : undefined"
+                :disabled="loading"
+                @click="goTo(target)"
+              >
+                {{ target }}
+              </button>
+            </template>
+
+            <button
+              type="button"
+              :class="[navButtonClass, 'size-9 sm:size-8']"
+              :aria-label="t('pagination.next')"
+              :disabled="page >= totalPages || loading"
+              @click="goTo(page + 1)"
+            >
+              <UIcon
+                name="i-lucide-chevron-right"
+                class="size-4"
+              />
+            </button>
+            <button
+              type="button"
+              :class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
+              :aria-label="t('pagination.last')"
+              :disabled="page >= totalPages || loading"
+              @click="goTo(totalPages)"
+            >
+              <UIcon
+                name="i-lucide-chevrons-right"
+                class="size-4"
+              />
+            </button>
+          </div>
+
+          <form
+            class="hidden items-center gap-1.5 text-sm text-muted sm:flex"
+            @submit.prevent="jumpToPage"
+          >
+            <span>{{ t('pagination.goToPrefix') }}</span>
+            <UInput
+              v-model="jumpPageInput"
+              type="number"
+              min="1"
+              :max="totalPages"
+              size="sm"
+              class="w-14"
+              :aria-label="t('pagination.pagePlaceholder')"
+              :disabled="loading"
+              @blur="jumpToPage"
+            />
+            <span v-if="t('pagination.goToSuffix')">{{ t('pagination.goToSuffix') }}</span>
+          </form>
+        </div>
+      </div>
    </div>
  </div>
 </template>
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false
+})
+
+const model = defineModel<string>({ default: '' })
+
+defineProps<{
+  id?: string
+  placeholder?: string
+  autocomplete?: string
+}>()
+
+const show = ref(false)
+const { t } = useI18n()
+</script>
+
+<template>
+  <UInput
+    :id="id"
+    v-model="model"
+    :type="show ? 'text' : 'password'"
+    :placeholder="placeholder"
+    :autocomplete="autocomplete"
+    size="lg"
+    class="w-full"
+    :ui="{ root: 'w-full', trailing: 'pe-1' }"
+    v-bind="$attrs"
+  >
+    <template #trailing>
+      <UButton
+        color="neutral"
+        variant="link"
+        size="sm"
+        :icon="show ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+        :aria-label="show ? t('auth.hidePassword') : t('auth.showPassword')"
+        :aria-pressed="show"
+        :aria-controls="id"
+        type="button"
+        @click="() => { show = !show }"
+      />
+    </template>
+  </UInput>
+</template>
+
+<style scoped>
+:deep(::-ms-reveal) {
+  display: none;
+}
+</style>
@@ -5,15 +5,17 @@ const props = defineProps<{
  password: string
 }>()

+const { t } = useI18n()
+
 const analysis = computed(() => analyzePassword(props.password))

 const show = computed(() => props.password.length > 0)

 const labelColor = computed(() => {
  switch (analysis.value.label) {
-    case '强':
+    case 'strong':
      return 'text-success'
-    case '中':
+    case 'medium':
      return 'text-warning'
    default:
      return 'text-error'
@@ -22,9 +24,9 @@ const labelColor = computed(() => {

 const barColor = computed(() => {
  switch (analysis.value.label) {
-    case '强':
+    case 'strong':
      return 'bg-success'
-    case '中':
+    case 'medium':
      return 'bg-warning'
    default:
      return 'bg-error/80'
@@ -32,10 +34,10 @@ const barColor = computed(() => {
 })

 const rules = computed(() => [
-  { key: 'minLength', label: `至少 ${PASSWORD_MIN_LENGTH} 个字符` },
-  { key: 'mixedCase', label: '包含大小写字母' },
-  { key: 'hasNumber', label: '包含数字' },
-  { key: 'hasSpecial', label: '包含特殊字符' }
+  { key: 'minLength', label: t('password.ruleMinLength', { n: PASSWORD_MIN_LENGTH }) },
+  { key: 'mixedCase', label: t('password.ruleMixedCase') },
+  { key: 'hasNumber', label: t('password.ruleNumber') },
+  { key: 'hasSpecial', label: t('password.ruleSpecial') }
 ] as const)
 </script>

@@ -45,12 +47,12 @@ const rules = computed(() => [
    class="space-y-3 rounded-lg border border-default bg-muted/20 px-3 py-3"
  >
    <div class="flex items-center justify-between text-sm">
-      <span class="text-muted">密码强度</span>
+      <span class="text-muted">{{ t('password.strength') }}</span>
      <span
        class="font-medium"
        :class="labelColor"
      >
-        {{ analysis.label }}
+        {{ t(`password.${analysis.label}`) }}
      </span>
    </div>

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  verified: [payload: { id: string, positionPercent: number }]
+}>()
+
+const { t } = useI18n()
+
+const THUMB_SIZE = 40
+const TRACK_INSET = 4
+
+const trackRef = ref<HTMLElement | null>(null)
+const challengeId = ref('')
+const trackSvg = ref('')
+const sliderPercent = ref(0)
+const verified = ref(false)
+const loading = ref(false)
+const dragging = ref(false)
+const shake = ref(false)
+const confirming = ref(false)
+
+const trackWidth = ref(0)
+
+function updateTrackWidth() {
+  trackWidth.value = trackRef.value?.clientWidth ?? 0
+}
+
+function percentToPx(percent: number) {
+  const max = Math.max(trackWidth.value - THUMB_SIZE - TRACK_INSET * 2, 0)
+  return TRACK_INSET + (percent / 100) * max
+}
+
+const thumbLeft = computed(() => percentToPx(sliderPercent.value))
+const isActive = computed(() => dragging.value || sliderPercent.value > 0.5)
+const fillWidth = computed(() => `${Math.max(thumbLeft.value + THUMB_SIZE - TRACK_INSET, 0)}px`)
+const trackSvgUrl = computed(() =>
+  trackSvg.value
+    ? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(trackSvg.value)}`
+    : ''
+)
+const hintOpacity = computed(() => {
+  if (verified.value) return 0
+  if (!isActive.value) return 1
+  return Math.max(0, 1 - sliderPercent.value / 40)
+})
+const successLabelLeft = computed(() => `${thumbLeft.value + THUMB_SIZE + 8}px`)
+
+async function loadChallenge() {
+  loading.value = true
+  verified.value = false
+  dragging.value = false
+  shake.value = false
+  sliderPercent.value = 0
+  trackSvg.value = ''
+  try {
+    const data = await $fetch<{ id: string, svg: string }>('/api/auth/captcha')
+    challengeId.value = data.id
+    trackSvg.value = data.svg
+  } finally {
+    loading.value = false
+    await nextTick()
+    updateTrackWidth()
+  }
+}
+
+function setSliderFromClientX(clientX: number) {
+  if (!trackRef.value || verified.value || loading.value || confirming.value) return
+  const rect = trackRef.value.getBoundingClientRect()
+  const max = Math.max(rect.width - THUMB_SIZE - TRACK_INSET * 2, 1)
+  const x = Math.min(
+    Math.max(clientX - rect.left - THUMB_SIZE / 2 - TRACK_INSET, 0),
+    max
+  )
+  sliderPercent.value = (x / max) * 100
+}
+
+async function tryConfirm() {
+  if (verified.value || !challengeId.value || confirming.value) return
+
+  confirming.value = true
+  try {
+    const position = Math.round(sliderPercent.value)
+    await $fetch('/api/auth/captcha/confirm', {
+      method: 'POST',
+      body: {
+        id: challengeId.value,
+        captchaPosition: position
+      }
+    })
+    verified.value = true
+    emit('verified', {
+      id: challengeId.value,
+      positionPercent: position
+    })
+  } catch {
+    shake.value = true
+    sliderPercent.value = 0
+    window.setTimeout(() => {
+      shake.value = false
+    }, 450)
+  } finally {
+    confirming.value = false
+  }
+}
+
+function onThumbPointerDown(event: PointerEvent) {
+  if (verified.value || loading.value || confirming.value) return
+  dragging.value = true
+  updateTrackWidth()
+  ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+}
+
+function onThumbPointerMove(event: PointerEvent) {
+  if (!dragging.value) return
+  setSliderFromClientX(event.clientX)
+}
+
+function onThumbPointerUp() {
+  if (!dragging.value) return
+  dragging.value = false
+  if (!verified.value) {
+    void tryConfirm()
+  }
+}
+
+onMounted(() => {
+  void loadChallenge()
+})
+
+let resizeObserver: ResizeObserver | undefined
+
+watch(trackRef, (el, _, onCleanup) => {
+  resizeObserver?.disconnect()
+  resizeObserver = undefined
+  if (!el) return
+  updateTrackWidth()
+  if (typeof ResizeObserver === 'undefined') return
+  resizeObserver = new ResizeObserver(updateTrackWidth)
+  resizeObserver.observe(el)
+  onCleanup(() => {
+    resizeObserver?.disconnect()
+    resizeObserver = undefined
+  })
+})
+
+defineExpose({ reset: loadChallenge })
+</script>
+
+<template>
+  <div
+    ref="trackRef"
+    class="captcha-track relative h-12 select-none overflow-hidden rounded-lg border transition-[background-color,border-color] duration-300"
+    :class="[
+      verified
+        ? 'border-primary/35 bg-primary/10'
+        : 'border-default bg-muted/20',
+      loading ? 'opacity-70' : '',
+      shake ? 'captcha-shake' : ''
+    ]"
+  >
+    <div
+      v-if="loading"
+      class="absolute inset-0 flex items-center justify-center"
+    >
+      <UIcon
+        name="i-lucide-loader-2"
+        class="size-5 animate-spin text-muted"
+      />
+    </div>
+
+    <template v-else>
+      <img
+        v-if="trackSvgUrl"
+        :src="trackSvgUrl"
+        alt=""
+        aria-hidden="true"
+        class="pointer-events-none absolute inset-0 size-full object-fill transition-opacity duration-300"
+        :class="verified ? 'opacity-0' : 'opacity-100'"
+        draggable="false"
+      >
+
+      <div
+        v-if="isActive && !verified"
+        class="pointer-events-none absolute inset-y-1 left-1 rounded-md bg-primary/20 transition-[width] duration-75"
+        :style="{ width: fillWidth }"
+      />
+
+      <p
+        v-if="!verified"
+        class="pointer-events-none absolute inset-0 flex items-center justify-center pl-12 text-sm text-muted transition-opacity duration-150"
+        :style="{ opacity: hintOpacity }"
+      >
+        {{ t('auth.captchaHint') }}
+      </p>
+
+      <p
+        v-if="verified"
+        class="pointer-events-none absolute inset-y-0 flex items-center pr-3 text-sm font-medium text-primary"
+        :style="{ left: successLabelLeft }"
+      >
+        {{ t('auth.captchaSuccess') }}
+      </p>
+
+      <div
+        class="absolute top-1/2 -translate-y-1/2 touch-none rounded-md border transition-[left,background-color,border-color,color,box-shadow,transform] duration-150"
+        :class="[
+          verified
+            ? 'z-20 border-primary bg-primary text-white shadow-sm shadow-primary/25'
+            : isActive
+              ? 'z-10 border-primary/45 bg-elevated text-primary shadow-md'
+              : 'z-10 border-default/90 bg-elevated text-muted shadow-sm',
+          dragging ? 'scale-[1.02] cursor-grabbing' : verified ? 'cursor-default' : 'cursor-grab'
+        ]"
+        :style="{
+          left: `${thumbLeft}px`,
+          width: `${THUMB_SIZE}px`,
+          height: `${THUMB_SIZE}px`
+        }"
+        @pointerdown="onThumbPointerDown"
+        @pointermove="onThumbPointerMove"
+        @pointerup="onThumbPointerUp"
+        @pointercancel="onThumbPointerUp"
+      >
+        <div class="flex size-full items-center justify-center">
+          <UIcon
+            v-if="confirming"
+            name="i-lucide-loader-2"
+            class="size-4 animate-spin"
+            :class="verified ? 'text-white' : isActive ? 'text-primary' : 'text-muted'"
+          />
+          <UIcon
+            v-else
+            :name="verified ? 'i-lucide-check' : 'i-lucide-chevrons-right'"
+            class="size-4"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.captcha-shake {
+  animation: captcha-shake 0.4s ease;
+}
+
+@keyframes captcha-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  25%,
+  75% {
+    transform: translateX(-4px);
+  }
+
+  50% {
+    transform: translateX(4px);
+  }
+}
+</style>
@@ -1,111 +0,0 @@
-<script setup lang="ts">
-export interface DonutSegment {
-  label: string
-  value: number
-  color: string
-}
-
-const props = defineProps<{
-  segments: DonutSegment[]
-  size?: number
-}>()
-
-const total = computed(() =>
-  props.segments.reduce((sum, item) => sum + item.value, 0)
-)
-
-const gradient = computed(() => {
-  if (!total.value) {
-    return 'conic-gradient(var(--ui-bg-muted) 0% 100%)'
-  }
-
-  let offset = 0
-  const stops = props.segments
-    .filter(item => item.value > 0)
-    .map((item) => {
-      const start = offset
-      const percent = (item.value / total.value) * 100
-      offset += percent
-      return `${item.color} ${start}% ${offset}%`
-    })
-
-  if (!stops.length) {
-    return 'conic-gradient(var(--ui-bg-muted) 0% 100%)'
-  }
-
-  return `conic-gradient(${stops.join(', ')})`
-})
-
-function percent(value: number) {
-  if (!total.value) return 0
-  return Math.round((value / total.value) * 100)
-}
-
-function formatCount(value: number) {
-  if (value >= 100000000) {
-    return `${(value / 100000000).toFixed(value >= 1000000000 ? 0 : 1)}亿`
-  }
-  if (value >= 10000) {
-    return `${(value / 10000).toFixed(value >= 100000 ? 0 : 1)}万`
-  }
-  return String(value)
-}
-
-const centerText = computed(() => formatCount(total.value))
-
-const centerTextClass = computed(() => {
-  const raw = String(total.value)
-  if (raw.length >= 7) return 'text-[9px] font-semibold leading-none'
-  if (raw.length >= 5) return 'text-xs font-semibold leading-none'
-  if (raw.length >= 4) return 'text-sm font-semibold leading-none'
-  return 'text-lg font-semibold leading-none'
-})
-</script>
-
-<template>
-  <div class="flex items-center gap-4">
-    <div
-      class="relative shrink-0 rounded-full"
-      :style="{
-        width: `${size ?? 88}px`,
-        height: `${size ?? 88}px`,
-        background: gradient
-      }"
-    >
-      <div
-        class="absolute inset-[20%] flex flex-col items-center justify-center rounded-full bg-elevated px-1 text-center"
-      >
-        <p
-          class="max-w-full truncate tabular-nums"
-          :class="centerTextClass"
-          :title="String(total)"
-        >
-          {{ centerText }}
-        </p>
-        <p class="mt-0.5 text-[10px] text-muted">
-          次
-        </p>
-      </div>
-    </div>
-
-    <ul class="min-w-0 flex-1 space-y-1.5">
-      <li
-        v-for="item in segments"
-        :key="item.label"
-        class="flex items-center gap-2 text-xs"
-      >
-        <span
-          class="size-2 shrink-0 rounded-full"
-          :style="{ background: item.color }"
-        />
-        <span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
-        <span
-          class="shrink-0 tabular-nums text-muted"
-          :title="`${item.value}`"
-        >
-          {{ formatCount(item.value) }} ({{ percent(item.value) }}%)
-        </span>
-      </li>
-    </ul>
-  </div>
-</template>
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const { themeIcon, themeMenuItems } = useAppearanceMenus()
+const { t } = useI18n()
+</script>
+
+<template>
+  <UDropdownMenu :items="themeMenuItems">
+    <UButton
+      :icon="themeIcon"
+      variant="ghost"
+      color="neutral"
+      size="sm"
+      :aria-label="t('theme.switch')"
+    />
+  </UDropdownMenu>
+</template>
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+const props = defineProps<{
+  siteKey: string
+}>()
+
+const emit = defineEmits<{
+  verified: [payload: { turnstileToken: string }]
+  cleared: []
+}>()
+
+interface TurnstileRenderOptions {
+  'sitekey': string
+  'action'?: string
+  'callback'?: (token: string) => void
+  'expired-callback'?: () => void
+  'error-callback'?: () => void
+}
+
+interface TurnstileApi {
+  render: (container: HTMLElement, options: TurnstileRenderOptions) => string
+  reset: (widgetId?: string) => void
+  remove: (widgetId: string) => void
+}
+
+declare global {
+  interface Window {
+    turnstile?: TurnstileApi
+    onTurnstileLoad?: () => void
+  }
+}
+
+const containerRef = ref<HTMLElement | null>(null)
+const widgetId = ref<string | null>(null)
+const scriptLoaded = ref(false)
+
+function onVerified(token: string) {
+  if (token) {
+    emit('verified', { turnstileToken: token })
+  }
+}
+
+function onCleared() {
+  emit('cleared')
+}
+
+function renderWidget() {
+  if (!containerRef.value || !window.turnstile || !props.siteKey) return
+  if (widgetId.value) {
+    window.turnstile.remove(widgetId.value)
+    widgetId.value = null
+  }
+  widgetId.value = window.turnstile.render(containerRef.value, {
+    'sitekey': props.siteKey,
+    'action': 'login',
+    'callback': onVerified,
+    'expired-callback': onCleared,
+    'error-callback': onCleared
+  })
+}
+
+function tryRenderWidget() {
+  if (scriptLoaded.value) {
+    renderWidget()
+  }
+}
+
+function loadScript() {
+  if (window.turnstile) {
+    scriptLoaded.value = true
+    tryRenderWidget()
+    return
+  }
+  window.onTurnstileLoad = () => {
+    scriptLoaded.value = true
+    tryRenderWidget()
+  }
+  const existing = document.querySelector('script[data-turnstile]')
+  if (existing) {
+    if (window.turnstile) {
+      scriptLoaded.value = true
+      tryRenderWidget()
+    }
+    return
+  }
+  const script = document.createElement('script')
+  script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onTurnstileLoad'
+  script.async = true
+  script.defer = true
+  script.dataset.turnstile = 'true'
+  document.head.appendChild(script)
+}
+
+function reset() {
+  if (window.turnstile && widgetId.value) {
+    window.turnstile.reset(widgetId.value)
+  }
+  onCleared()
+}
+
+onMounted(async () => {
+  loadScript()
+  await nextTick()
+  tryRenderWidget()
+})
+
+watch([containerRef, () => props.siteKey, scriptLoaded], () => {
+  tryRenderWidget()
+}, { flush: 'post' })
+
+defineExpose({ reset })
+</script>
+
+<template>
+  <ClientOnly>
+    <div
+      ref="containerRef"
+      class="flex min-h-16 items-center justify-center"
+    />
+  </ClientOnly>
+</template>
@@ -1,13 +1,4 @@
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    embedded?: boolean
-  }>(),
-  {
-    embedded: false
-  }
-)
-
 const emit = defineEmits<{
  back: []
 }>()
@@ -20,6 +11,8 @@ const {
  loadPreferences
 } = useUploadPreferences()

+const { t } = useI18n()
+
 const {
  userSettings,
  enabled: userAutoDeleteEnabled,
@@ -27,16 +20,16 @@ const {
  load: loadUserSettings
 } = useUserAutoDeleteSettings()

-const copyFormatItems = [
-  { label: '直链', value: 'url' as const },
-  { label: 'Markdown', value: 'markdown' as const },
-  { label: 'HTML', value: 'html' as 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 }
+])

 const clientQualityLevel = computed(() => {
-  if (clientWebpQuality.value >= 85) return '高质量'
-  if (clientWebpQuality.value >= 60) return '中等质量'
-  return '有损压缩'
+  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') {
@@ -55,17 +48,8 @@ onMounted(() => {
 </script>

 <template>
-  <div
-    class="flex flex-col overflow-hidden max-sm:overflow-visible"
-    :class="
-      embedded
-        ? ''
-        : 'upload-card-surface upload-card-surface--panel max-sm:min-h-0 sm:h-full'
-    "
-  >
-    <div
-      class="flex items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6"
-    >
+  <div class="upload-card-surface upload-card-surface--panel flex max-sm:min-h-0 flex-col overflow-hidden max-sm:overflow-visible sm:h-full">
+    <div class="flex items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6">
      <div class="flex min-w-0 items-start gap-2">
        <UIcon
          name="i-lucide-settings-2"
@@ -73,34 +57,30 @@ onMounted(() => {
        />
        <div class="min-w-0">
          <h2 class="text-base font-semibold">
-            上传偏好
+            {{ t('preferences.title') }}
          </h2>
          <p class="mt-0.5 text-xs text-muted">
-            浏览器本地与账号设置，仅影响您的上传体验
+            {{ t('preferences.subtitle') }}
          </p>
        </div>
      </div>
      <UButton
-        v-if="!embedded"
-        label="返回"
+        :label="t('common.back')"
        icon="i-lucide-arrow-left"
        variant="ghost"
        color="neutral"
        size="sm"
        class="shrink-0"
-        aria-label="返回上传"
+        :aria-label="t('preferences.back')"
        @click="emit('back')"
      />
    </div>

-    <div
-      class="p-5 sm:p-6"
-      :class="embedded ? '' : 'flex flex-1 flex-col justify-center'"
-    >
+    <div class="flex flex-1 flex-col justify-center p-5 sm:p-6">
      <div class="grid gap-5 sm:grid-cols-3 sm:gap-6">
        <div class="space-y-4">
          <h3 class="text-sm font-semibold">
-            图片处理
+            {{ t('preferences.processing') }}
          </h3>

          <label class="flex cursor-pointer items-start gap-2.5">
@@ -109,9 +89,9 @@ onMounted(() => {
              class="mt-0.5"
            />
            <span>
-              <span class="block text-sm">客户端预压缩</span>
+              <span class="block text-sm">{{ t('preferences.clientCompress') }}</span>
              <span class="mt-1 block text-xs leading-relaxed text-muted">
-                上传前在浏览器端压缩（服务端仍会转 WebP）
+                {{ t('preferences.clientCompressHint') }}
              </span>
            </span>
          </label>
@@ -126,10 +106,8 @@ onMounted(() => {
                class="mt-0.5"
              />
              <span class="min-w-0 flex-1">
-                <span
-                  class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm"
-                >
-                  <span>自动删除超过</span>
+                <span class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm">
+                  <span>{{ t('preferences.autoDeletePrefix') }}</span>
                  <UInput
                    v-model.number="userAutoDeleteDaysDraft"
                    type="number"
@@ -137,16 +115,12 @@ onMounted(() => {
                    max="3650"
                    size="xs"
                    class="w-14 tabular-nums"
-                    :class="
-                      userAutoDeleteEnabled
-                        ? ''
-                        : 'pointer-events-none opacity-40'
-                    "
+                    :class="userAutoDeleteEnabled ? '' : 'pointer-events-none opacity-40'"
                  />
-                  <span>天的图片</span>
+                  <span>{{ t('preferences.autoDeleteSuffix') }}</span>
                </span>
                <span class="mt-1 block text-xs leading-relaxed text-muted">
-                  仅清理开启后上传的图片，不影响此前已存的图片
+                  {{ t('preferences.autoDeleteHint') }}
                </span>
              </span>
            </label>
@@ -164,15 +138,13 @@ onMounted(() => {

        <div class="space-y-4">
          <h3 class="text-sm font-semibold">
-            WebP 压缩质量
+            {{ t('preferences.webpQuality') }}
          </h3>
          <p class="text-xs leading-relaxed text-muted">
-            客户端预压缩质量（1–100），需开启「客户端预压缩」
+            {{ t('preferences.webpQualityHint') }}
          </p>
-          <div
-            class="flex items-center justify-between gap-2 text-sm text-muted"
-          >
-            <span>当前：{{ clientWebpQuality }}</span>
+          <div class="flex items-center justify-between gap-2 text-sm text-muted">
+            <span>{{ t('preferences.current', { n: clientWebpQuality }) }}</span>
            <span>{{ clientQualityLevel }}</span>
          </div>
          <input
@@ -187,7 +159,7 @@ onMounted(() => {

        <div class="space-y-4">
          <h3 class="text-sm font-semibold">
-            便捷功能
+            {{ t('preferences.convenience') }}
          </h3>
          <label class="flex cursor-pointer items-start gap-2.5">
            <UCheckbox
@@ -195,9 +167,9 @@ onMounted(() => {
              class="mt-0.5"
            />
            <span>
-              <span class="block text-sm">上传成功自动复制链接</span>
+              <span class="block text-sm">{{ t('preferences.autoCopy') }}</span>
              <span class="mt-1 block text-xs leading-relaxed text-muted">
-                按所选格式复制到剪贴板
+                {{ t('preferences.autoCopyHint') }}
              </span>
            </span>
          </label>
@@ -4,6 +4,21 @@ import type { UploadProgressItem } from '~/types/image'
 defineProps<{
  items: UploadProgressItem[]
 }>()
+
+const { t } = useI18n()
+
+function statusLabel(status: UploadProgressItem['status']) {
+  switch (status) {
+    case 'pending':
+      return t('upload.statusPending')
+    case 'uploading':
+      return t('upload.statusUploading')
+    case 'success':
+      return t('upload.statusSuccess')
+    default:
+      return t('upload.statusError')
+  }
+}
 </script>

 <template>
@@ -12,7 +27,7 @@ defineProps<{
    class="space-y-2 rounded-lg border border-default p-4"
  >
    <p class="text-sm font-medium text-muted">
-      上传进度
+      {{ t('upload.progress') }}
    </p>
    <div
      v-for="item in items"
@@ -26,7 +41,7 @@ defineProps<{
          variant="subtle"
          size="xs"
        >
-          {{ item.status === 'pending' ? '等待' : item.status === 'uploading' ? '上传中' : item.status === 'success' ? '成功' : '失败' }}
+          {{ statusLabel(item.status) }}
        </UBadge>
      </div>
      <UProgress
@@ -0,0 +1,379 @@
+<script setup lang="ts">
+import type { ApiDocEndpoint, ApiDocParam } from '~/composables/useApiDocs'
+
+const props = defineProps<{
+  endpoint: ApiDocEndpoint
+  token: string
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+
+const authToken = ref('')
+const paramValues = ref<Record<string, string>>({})
+const fileValues = ref<Record<string, File | null>>({})
+const fileInputRefs = ref<Record<string, HTMLInputElement | null>>({})
+const sending = ref(false)
+const responseStatus = ref<number | null>(null)
+const responseBody = ref('')
+const responseError = ref(false)
+
+function isDebugParam(param: ApiDocParam) {
+  if (param.name === 'token' && props.endpoint.requiresAuth) {
+    return false
+  }
+  return true
+}
+
+const debugQueryParams = computed(() =>
+  props.endpoint.params.filter(p => p.location === 'query' && isDebugParam(p))
+)
+
+const debugBodyParams = computed(() =>
+  props.endpoint.params.filter(p =>
+    (p.location === 'form-data' || p.location === 'body') && isDebugParam(p)
+  )
+)
+
+const showAuthHeader = computed(() => props.endpoint.requiresAuth)
+
+watch(
+  () => props.endpoint.id,
+  () => {
+    resetForm()
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.token,
+  (value) => {
+    if (value) {
+      authToken.value = value
+      if (!props.endpoint.requiresAuth && 'token' in paramValues.value) {
+        paramValues.value.token = value
+      }
+    }
+  },
+  { immediate: true }
+)
+
+function resetForm() {
+  const values: Record<string, string> = {}
+  const files: Record<string, File | null> = {}
+  for (const param of props.endpoint.params) {
+    if (!isDebugParam(param)) continue
+    if (param.type === 'file') {
+      files[param.name] = null
+    } else if (param.name === 'keys') {
+      values[param.name] = '["images/2026/08/example.webp"]'
+    } else if (param.name === 'token' && props.token) {
+      values[param.name] = props.token
+    } else {
+      values[param.name] = ''
+    }
+  }
+  paramValues.value = values
+  fileValues.value = files
+  responseStatus.value = null
+  responseBody.value = ''
+  responseError.value = false
+}
+
+function fileLabel(name: string) {
+  return fileValues.value[name]?.name ?? t('api.debug.noFileSelected')
+}
+
+function triggerFilePick(name: string) {
+  fileInputRefs.value[name]?.click()
+}
+
+function onFileChange(name: string, event: Event) {
+  const input = event.target as HTMLInputElement
+  fileValues.value[name] = input.files?.[0] ?? null
+}
+
+function isParamFilled(param: ApiDocParam) {
+  if (param.type === 'file') {
+    return fileValues.value[param.name] != null
+  }
+  const value = paramValues.value[param.name]?.trim() ?? ''
+  if (!value) return false
+  if (param.location === 'body' && param.name === 'keys') {
+    try {
+      const parsed = JSON.parse(value) as { keys?: unknown }
+      return Array.isArray(parsed.keys) && parsed.keys.length > 0
+    } catch {
+      return false
+    }
+  }
+  return true
+}
+
+const canSendRequest = computed(() => {
+  if (sending.value) return false
+  if (showAuthHeader.value && !authToken.value.trim()) return false
+  const params = [...debugQueryParams.value, ...debugBodyParams.value]
+  return params.every(param => !param.required || isParamFilled(param))
+})
+
+function buildUrl() {
+  const url = new URL(props.endpoint.path, window.location.origin)
+  for (const param of debugQueryParams.value) {
+    const value = paramValues.value[param.name]?.trim()
+    if (value) {
+      url.searchParams.set(param.name, value)
+    }
+  }
+  return url.toString()
+}
+
+async function sendRequest() {
+  if (!canSendRequest.value) return
+  sending.value = true
+  responseStatus.value = null
+  responseBody.value = ''
+  responseError.value = false
+
+  try {
+    const headers: Record<string, string> = {}
+    if (showAuthHeader.value && authToken.value.trim()) {
+      headers['Auth-Token'] = authToken.value.trim()
+    }
+
+    let body: BodyInit | undefined
+
+    if (debugBodyParams.value.some(p => p.location === 'form-data')) {
+      const formData = new FormData()
+      for (const param of debugBodyParams.value) {
+        if (param.location !== 'form-data') continue
+        if (param.type === 'file') {
+          const file = fileValues.value[param.name]
+          if (file) formData.append(param.name, file)
+        } else {
+          const value = paramValues.value[param.name]?.trim()
+          if (value) formData.append(param.name, value)
+        }
+      }
+      body = formData
+    } else if (debugBodyParams.value.some(p => p.location === 'body')) {
+      headers['Content-Type'] = 'application/json'
+      try {
+        body = JSON.stringify(JSON.parse(paramValues.value.keys || '{}'))
+      } catch {
+        toast.add({ title: t('api.debug.invalidJson'), color: 'error' })
+        sending.value = false
+        return
+      }
+    }
+
+    const response = await fetch(buildUrl(), {
+      method: props.endpoint.method,
+      headers,
+      body,
+      credentials: 'include'
+    })
+
+    responseStatus.value = response.status
+    const text = await response.text()
+    try {
+      responseBody.value = JSON.stringify(JSON.parse(text), null, 2)
+    } catch {
+      responseBody.value = text
+    }
+    responseError.value = !response.ok
+  } catch {
+    responseError.value = true
+    responseBody.value = t('api.debug.networkError')
+    toast.add({ title: t('api.debug.sendFailed'), color: 'error' })
+  } finally {
+    sending.value = false
+  }
+}
+
+const responseScrollable = computed(() => responseBody.value.split('\n').length > 14)
+</script>
+
+<template>
+  <aside class="flex w-full shrink-0 flex-col border-t border-default bg-default lg:w-72 lg:border-t-0 lg:border-l xl:w-80">
+    <div class="flex items-start gap-2 border-b border-default px-5 py-4 sm:px-6">
+      <UIcon
+        name="i-lucide-flask-conical"
+        class="mt-0.5 size-5 shrink-0 text-primary"
+      />
+      <div class="min-w-0">
+        <h3 class="text-base font-semibold">
+          {{ t('api.debug.title') }}
+        </h3>
+        <div class="mt-1.5 flex flex-wrap items-center gap-2">
+          <ApiMethodBadge
+            :method="endpoint.method"
+            size="sm"
+          />
+          <code class="truncate font-mono text-xs text-muted">
+            {{ endpoint.path }}
+          </code>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-1 flex-col">
+      <div class="space-y-3 p-5 sm:p-6">
+        <section
+          v-if="showAuthHeader"
+          class="rounded-xl border border-default p-3 sm:p-4"
+        >
+          <h4 class="mb-3 text-xs font-semibold text-highlighted">
+            {{ t('api.debug.headers') }}
+          </h4>
+          <div class="space-y-1.5">
+            <label class="text-xs text-muted">
+              Auth-Token
+              <span class="text-error">*</span>
+            </label>
+            <UInput
+              v-model="authToken"
+              size="sm"
+              class="font-mono text-xs"
+              :placeholder="t('api.debug.tokenPlaceholder')"
+            />
+          </div>
+        </section>
+
+        <section
+          v-if="debugQueryParams.length"
+          class="rounded-xl border border-default p-3 sm:p-4"
+        >
+          <h4 class="mb-3 text-xs font-semibold text-highlighted">
+            {{ t('api.debug.query') }}
+          </h4>
+          <div class="space-y-3">
+            <div
+              v-for="param in debugQueryParams"
+              :key="param.name"
+              class="space-y-1.5"
+            >
+              <label class="text-xs text-muted">
+                {{ param.name }}
+                <span
+                  v-if="param.required"
+                  class="text-error"
+                >*</span>
+              </label>
+              <UInput
+                v-model="paramValues[param.name]"
+                size="sm"
+                class="font-mono text-xs"
+              />
+            </div>
+          </div>
+        </section>
+
+        <section
+          v-if="debugBodyParams.length"
+          class="rounded-xl border border-default p-3 sm:p-4"
+        >
+          <h4 class="mb-3 text-xs font-semibold text-highlighted">
+            {{ t('api.debug.body') }}
+          </h4>
+          <div class="space-y-3">
+            <div
+              v-for="param in debugBodyParams"
+              :key="param.name"
+              class="space-y-1.5"
+            >
+              <label class="text-xs text-muted">
+                {{ param.name }}
+                <span
+                  v-if="param.required"
+                  class="text-error"
+                >*</span>
+              </label>
+
+              <div
+                v-if="param.type === 'file'"
+                class="flex items-center gap-2"
+              >
+                <input
+                  :ref="(el) => { fileInputRefs[param.name] = el as HTMLInputElement }"
+                  type="file"
+                  accept="image/*"
+                  class="hidden"
+                  @change="onFileChange(param.name, $event)"
+                >
+                <UButton
+                  size="xs"
+                  variant="outline"
+                  color="neutral"
+                  :label="t('api.debug.selectFile')"
+                  @click="triggerFilePick(param.name)"
+                />
+                <span class="min-w-0 truncate text-xs text-muted">
+                  {{ fileLabel(param.name) }}
+                </span>
+              </div>
+
+              <UTextarea
+                v-else-if="param.location === 'body'"
+                v-model="paramValues[param.name]"
+                :rows="3"
+                size="sm"
+                class="font-mono text-xs"
+              />
+              <UInput
+                v-else
+                v-model="paramValues[param.name]"
+                size="sm"
+                class="font-mono text-xs"
+              />
+            </div>
+          </div>
+        </section>
+
+        <UButton
+          icon="i-lucide-send"
+          :label="t('api.debug.send')"
+          color="primary"
+          block
+          :loading="sending"
+          :disabled="!canSendRequest"
+          @click="sendRequest"
+        />
+
+        <section
+          v-if="responseStatus !== null || responseBody"
+          class="overflow-hidden rounded-xl border border-default"
+        >
+          <div class="flex items-center justify-between border-b border-default px-3 py-2">
+            <span class="text-xs font-semibold text-highlighted">
+              {{ t('api.debug.response') }}
+            </span>
+            <UBadge
+              v-if="responseStatus !== null"
+              :color="responseError ? 'error' : 'success'"
+              variant="subtle"
+              size="xs"
+            >
+              {{ responseStatus }}
+            </UBadge>
+          </div>
+          <pre
+            class="api-debug-response bg-neutral-950 p-3 text-xs leading-relaxed text-neutral-100"
+            :class="responseScrollable ? 'max-h-64 overflow-y-auto' : ''"
+          ><code class="font-mono whitespace-pre">{{ responseBody }}</code></pre>
+        </section>
+      </div>
+
+      <div class="mt-auto border-t border-default p-5 sm:p-6">
+        <h4 class="mb-2 text-xs font-semibold">
+          {{ t('api.debug.notesTitle') }}
+        </h4>
+        <ul class="space-y-1 text-xs leading-relaxed text-muted">
+          <li>{{ t('api.debug.noteSuccess') }}</li>
+          <li>{{ t('api.debug.noteError') }}</li>
+          <li>{{ t('api.debug.noteLimit') }}</li>
+        </ul>
+      </div>
+    </div>
+  </aside>
+</template>
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { ApiDocEndpoint } from '~/composables/useApiDocs'
+
+defineProps<{
+  endpoint: ApiDocEndpoint
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <section class="p-5 sm:p-6">
+    <h2 class="text-base font-semibold">
+      {{ t(endpoint.titleKey) }}
+    </h2>
+
+    <div class="mt-2 flex flex-wrap items-center gap-2">
+      <ApiMethodBadge
+        :method="endpoint.method"
+        size="sm"
+      />
+      <code class="rounded-md border border-primary/20 bg-primary/10 px-2 py-0.5 font-mono text-sm font-medium text-primary">
+        {{ endpoint.path }}
+      </code>
+    </div>
+
+    <p class="mt-3 text-sm leading-relaxed text-muted">
+      {{ t(endpoint.descKey) }}
+    </p>
+
+    <div
+      v-if="endpoint.params.length"
+      class="mt-5 overflow-hidden rounded-xl border border-default"
+    >
+      <div class="border-b border-default bg-muted/20 px-4 py-2.5">
+        <h3 class="text-sm font-medium">
+          {{ t('api.requestParams') }}
+        </h3>
+      </div>
+      <div class="overflow-x-auto">
+        <table class="w-full min-w-[32rem] text-left text-sm">
+          <thead>
+            <tr class="border-b border-default text-xs text-muted">
+              <th class="px-4 py-2.5 font-medium">
+                {{ t('api.paramName') }}
+              </th>
+              <th class="px-4 py-2.5 font-medium">
+                {{ t('api.paramType') }}
+              </th>
+              <th class="px-4 py-2.5 font-medium">
+                {{ t('api.paramLocation') }}
+              </th>
+              <th class="px-4 py-2.5 font-medium">
+                {{ t('api.paramRequired') }}
+              </th>
+              <th class="px-4 py-2.5 font-medium">
+                {{ t('api.paramDescription') }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="param in endpoint.params"
+              :key="param.name"
+              class="border-b border-default last:border-b-0"
+            >
+              <td class="px-4 py-2.5 font-mono text-xs">
+                {{ param.name }}
+                <span
+                  v-if="param.required"
+                  class="text-error"
+                >*</span>
+              </td>
+              <td class="px-4 py-2.5 text-muted">
+                {{ param.type }}
+              </td>
+              <td class="px-4 py-2.5 text-muted">
+                {{ param.location }}
+              </td>
+              <td class="px-4 py-2.5">
+                <UBadge
+                  :color="param.required ? 'primary' : 'neutral'"
+                  variant="subtle"
+                  size="xs"
+                >
+                  {{ param.required ? t('api.required') : t('api.optional') }}
+                </UBadge>
+              </td>
+              <td class="px-4 py-2.5 text-muted">
+                {{ t(param.descriptionKey) }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="mt-5 space-y-4">
+      <div>
+        <p class="mb-2 text-xs font-medium text-muted">
+          {{ t('api.requestExample') }}
+        </p>
+        <ApiCurlBlock
+          :code="endpoint.curl"
+          lang="cURL"
+        />
+      </div>
+      <div>
+        <p class="mb-2 text-xs font-medium text-muted">
+          {{ t('api.responseExample') }}
+          <span class="font-normal">200 OK</span>
+        </p>
+        <ApiCurlBlock
+          :code="endpoint.responseExample"
+          lang="JSON"
+          :scrollable="false"
+        />
+      </div>
+    </div>
+  </section>
+</template>
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { ApiDocMethod } from '~/composables/useApiDocs'
+
+const props = defineProps<{
+  method: ApiDocMethod
+  size?: 'xs' | 'sm'
+}>()
+
+const colorClass = computed(() => {
+  switch (props.method) {
+    case 'GET':
+      return 'bg-sky-500/15 text-sky-700 dark:text-sky-300'
+    case 'POST':
+      return 'bg-primary/15 text-primary'
+    case 'DELETE':
+      return 'bg-red-500/15 text-red-700 dark:text-red-300'
+    default:
+      return 'bg-muted text-muted'
+  }
+})
+
+const sizeClass = computed(() =>
+  props.size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-1.5 py-0.5 text-[10px]'
+)
+</script>
+
+<template>
+  <span
+    class="inline-flex shrink-0 rounded font-mono font-semibold leading-none"
+    :class="[colorClass, sizeClass]"
+  >
+    {{ method }}
+  </span>
+</template>
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { ApiDocCategory, ApiDocEndpoint } from '~/composables/useApiDocs'
+
+const props = defineProps<{
+  endpoints: ApiDocEndpoint[]
+  activeId: string
+}>()
+
+const emit = defineEmits<{
+  select: [id: string]
+}>()
+
+const { t, locale } = useI18n()
+const search = ref('')
+const docsUrl = computed(() =>
+  locale.value === 'en'
+    ? 'https://o96u.github.io/PicHost/en/guide/api.html'
+    : 'https://o96u.github.io/PicHost/guide/api.html'
+)
+
+const categories: { key: ApiDocCategory, labelKey: string }[] = [
+  { key: 'image', labelKey: 'api.categories.image' },
+  { key: 'extension', labelKey: 'api.categories.extension' },
+  { key: 'system', labelKey: 'api.categories.system' }
+]
+
+const filteredEndpoints = computed(() => {
+  const q = search.value.trim().toLowerCase()
+  if (!q) return props.endpoints
+  return props.endpoints.filter((endpoint) => {
+    const title = t(endpoint.titleKey).toLowerCase()
+    const path = endpoint.path.toLowerCase()
+    return title.includes(q) || path.includes(q) || endpoint.method.toLowerCase().includes(q)
+  })
+})
+
+function endpointsForCategory(category: ApiDocCategory) {
+  return filteredEndpoints.value.filter(endpoint => endpoint.category === category)
+}
+
+function onSelect(id: string) {
+  emit('select', id)
+}
+
+function onSearchKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    search.value = ''
+    event.preventDefault()
+  }
+}
+
+onMounted(() => {
+  const onGlobalKeydown = (event: KeyboardEvent) => {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+      event.preventDefault()
+      document.getElementById('api-endpoint-search')?.focus()
+    }
+  }
+  window.addEventListener('keydown', onGlobalKeydown)
+  onUnmounted(() => window.removeEventListener('keydown', onGlobalKeydown))
+})
+</script>
+
+<template>
+  <aside class="flex w-full shrink-0 flex-col border-b border-default bg-default lg:w-52 lg:border-b-0 lg:border-r lg:bg-neutral-50 dark:lg:bg-neutral-900/30 xl:w-56">
+    <div class="border-b border-default p-3 sm:p-4">
+      <UInput
+        id="api-endpoint-search"
+        v-model="search"
+        :placeholder="t('api.searchPlaceholder')"
+        icon="i-lucide-search"
+        size="sm"
+        @keydown="onSearchKeydown"
+      >
+        <template #trailing>
+          <UKbd
+            size="sm"
+            class="hidden sm:inline-flex"
+          >
+            ⌘K
+          </UKbd>
+        </template>
+      </UInput>
+    </div>
+
+    <nav class="flex-1 overflow-y-auto p-2 sm:p-3">
+      <div
+        v-for="category in categories"
+        :key="category.key"
+        class="mb-4"
+      >
+        <p
+          v-if="endpointsForCategory(category.key).length"
+          class="mb-1.5 px-2 text-xs font-medium text-muted"
+        >
+          {{ t(category.labelKey) }}
+        </p>
+        <ul class="space-y-0.5">
+          <li
+            v-for="endpoint in endpointsForCategory(category.key)"
+            :key="endpoint.id"
+          >
+            <button
+              type="button"
+              class="flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left text-sm transition-colors"
+              :class="activeId === endpoint.id
+                ? 'bg-primary/10 font-medium text-primary'
+                : 'text-muted hover:bg-muted/40 hover:text-highlighted'"
+              @click="onSelect(endpoint.id)"
+            >
+              <ApiMethodBadge :method="endpoint.method" />
+              <span class="min-w-0 truncate">{{ t(endpoint.titleKey) }}</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+    </nav>
+
+    <div class="hidden border-t border-default p-3 sm:p-4 lg:block">
+      <div class="rounded-xl border border-primary/15 bg-primary/5 p-3">
+        <div class="flex items-start gap-2.5">
+          <UIcon
+            name="i-lucide-book-open"
+            class="mt-0.5 size-4 shrink-0 text-primary"
+          />
+          <div class="min-w-0 space-y-2">
+            <p class="text-xs font-medium text-highlighted">
+              {{ t('api.helpTitle') }}
+            </p>
+            <p class="text-xs leading-relaxed text-muted">
+              {{ t('api.helpSubtitle') }}
+            </p>
+            <UButton
+              :label="t('api.viewDocs')"
+              icon="i-lucide-external-link"
+              size="xs"
+              variant="outline"
+              color="neutral"
+              :to="docsUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+const props = defineProps<{
+  token: string
+  loading: boolean
+  regenerating: boolean
+  canRegenerate: boolean
+  tokenSource?: 'env' | 'db' | 'none'
+  envTokenOverride?: boolean
+  isAdmin?: boolean
+}>()
+
+const emit = defineEmits<{
+  regenerate: []
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const tokenVisible = ref(false)
+const copying = ref(false)
+
+function toggleTokenVisible() {
+  tokenVisible.value = !tokenVisible.value
+}
+
+const displayValue = computed(() => {
+  if (!props.token) return t('common.notConfigured')
+  if (tokenVisible.value) return props.token
+  return '•'.repeat(Math.min(props.token.length, 40))
+})
+
+function tokenSourceLabel(source: 'env' | 'db' | 'none' | undefined) {
+  switch (source) {
+    case 'env':
+      return t('api.tokenSourceEnv')
+    case 'db':
+      return t('api.tokenSourceDb')
+    default:
+      return t('api.tokenSourceNone')
+  }
+}
+
+async function copyToken() {
+  if (!props.token || copying.value) return
+  copying.value = true
+  try {
+    await navigator.clipboard.writeText(props.token)
+    toast.add({ title: t('copy.copied'), color: 'success' })
+  } catch {
+    toast.add({ title: t('copy.failed'), color: 'error' })
+  } finally {
+    copying.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="border-b border-default">
+    <div class="flex items-center gap-2 border-b border-default px-5 py-4 sm:px-6">
+      <UIcon
+        name="i-lucide-key-round"
+        class="size-5 shrink-0 text-primary"
+      />
+      <h2 class="text-base font-semibold">
+        {{ t('api.tokenTitle') }}
+      </h2>
+    </div>
+
+    <div class="space-y-4 p-5 sm:p-6">
+      <UAlert
+        v-if="envTokenOverride"
+        color="warning"
+        variant="subtle"
+        icon="i-lucide-triangle-alert"
+        :title="t('api.envOverrideTitle')"
+        :description="t('api.envOverrideDesc')"
+      />
+
+      <UAlert
+        v-else-if="!isAdmin"
+        color="info"
+        variant="subtle"
+        icon="i-lucide-info"
+        :title="t('api.personalTitle')"
+        :description="t('api.personalDesc')"
+      />
+
+      <UAlert
+        v-else-if="!token && !loading"
+        color="info"
+        variant="subtle"
+        icon="i-lucide-info"
+        :title="t('api.notConfiguredTitle')"
+        :description="t('api.notConfiguredDesc')"
+      />
+
+      <div class="flex flex-col gap-2 sm:flex-row sm:items-stretch">
+        <UInput
+          :model-value="displayValue"
+          readonly
+          class="min-w-0 flex-1 font-mono text-xs sm:text-sm"
+          :loading="loading"
+        />
+        <div class="flex gap-2">
+          <UButton
+            size="sm"
+            variant="outline"
+            color="neutral"
+            :label="tokenVisible ? t('api.hideToken') : t('api.showToken')"
+            @click="toggleTokenVisible"
+          />
+          <UButton
+            size="sm"
+            variant="outline"
+            color="neutral"
+            :label="t('common.copy')"
+            :loading="copying"
+            :disabled="!token"
+            @click="copyToken"
+          />
+          <UButton
+            icon="i-lucide-refresh-cw"
+            :label="t('api.regenerate')"
+            color="primary"
+            variant="soft"
+            size="sm"
+            :loading="regenerating"
+            :disabled="!canRegenerate"
+            @click="emit('regenerate')"
+          />
+        </div>
+      </div>
+
+      <p
+        v-if="tokenSource"
+        class="text-xs text-muted"
+      >
+        {{ tokenSourceLabel(tokenSource) }}
+        · {{ t('api.tokenHeader') }}
+        <code class="font-mono">Auth-Token: &lt;token&gt;</code>
+        <template v-if="token && !envTokenOverride">
+          · {{ t('api.tokenInvalidate') }}
+        </template>
+      </p>
+    </div>
+  </section>
+</template>
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  searchQuery: string
+  storageBackend: string
+  storageBackendItems: Array<{ label: string, value: string }>
+  uploadSource: string
+  uploadSourceItems: Array<{ label: string, value: string }>
+  viewMode: 'grid' | 'list'
+  selectedCount?: number
+  loading?: boolean
+  showBatchDelete?: boolean
+}>(), {
+  selectedCount: 0,
+  loading: false,
+  showBatchDelete: true
+})
+
+const emit = defineEmits<{
+  'update:searchQuery': [value: string]
+  'update:storageBackend': [value: string]
+  'update:uploadSource': [value: string]
+  'update:viewMode': [mode: 'grid' | 'list']
+  'search': []
+  'reset': []
+  'batch-delete': []
+}>()
+
+const { t } = useI18n()
+
+function setViewMode(mode: 'grid' | 'list') {
+  if (mode === props.viewMode || props.loading) return
+  emit('update:viewMode', mode)
+}
+
+function viewButtonClass(active: boolean) {
+  return active
+    ? 'border-primary bg-primary/10 text-primary'
+    : 'border-transparent bg-elevated text-muted hover:bg-muted hover:text-default'
+}
+</script>
+
+<template>
+  <form
+    class="flex flex-nowrap items-center gap-2 overflow-x-auto pb-1"
+    @submit.prevent="emit('search')"
+  >
+    <UInput
+      :model-value="searchQuery"
+      icon="i-lucide-search"
+      :placeholder="t('stats.searchPlaceholder')"
+      class="w-40 shrink-0 sm:w-48"
+      size="sm"
+      :disabled="loading"
+      @update:model-value="emit('update:searchQuery', $event)"
+    />
+
+    <USelect
+      :model-value="storageBackend"
+      :items="storageBackendItems"
+      class="w-28 shrink-0"
+      size="sm"
+      :aria-label="t('stats.storage')"
+      :disabled="loading"
+      @update:model-value="emit('update:storageBackend', $event)"
+    />
+
+    <USelect
+      :model-value="uploadSource"
+      :items="uploadSourceItems"
+      class="w-28 shrink-0"
+      size="sm"
+      :aria-label="t('stats.filterSource')"
+      :disabled="loading"
+      @update:model-value="emit('update:uploadSource', $event)"
+    />
+
+    <UButton
+      type="submit"
+      icon="i-lucide-search"
+      size="sm"
+      color="primary"
+      class="shrink-0"
+      :aria-label="t('common.search')"
+      :loading="loading"
+    >
+      {{ t('common.search') }}
+    </UButton>
+
+    <UButton
+      type="button"
+      icon="i-lucide-rotate-ccw"
+      size="sm"
+      variant="outline"
+      color="neutral"
+      class="shrink-0"
+      :aria-label="t('stats.resetFilters')"
+      :disabled="loading"
+      @click="emit('reset')"
+    >
+      {{ t('stats.resetFilters') }}
+    </UButton>
+
+    <UButton
+      v-if="showBatchDelete"
+      type="button"
+      icon="i-lucide-trash-2"
+      size="sm"
+      variant="outline"
+      color="error"
+      class="shrink-0"
+      :disabled="!selectedCount || loading"
+      @click="emit('batch-delete')"
+    >
+      {{ t('stats.batchDelete') }}
+    </UButton>
+
+    <div
+      class="inline-flex shrink-0 overflow-hidden rounded-md border border-default"
+      role="group"
+      :aria-label="t('stats.viewMode')"
+    >
+      <button
+        type="button"
+        class="inline-flex size-8 items-center justify-center border-r border-default transition-colors disabled:pointer-events-none disabled:opacity-40"
+        :class="viewButtonClass(viewMode === 'grid')"
+        :aria-label="t('stats.viewGrid')"
+        :aria-pressed="viewMode === 'grid'"
+        :disabled="loading"
+        @click="setViewMode('grid')"
+      >
+        <UIcon
+          name="i-lucide-layout-grid"
+          class="size-4"
+        />
+      </button>
+      <button
+        type="button"
+        class="inline-flex size-8 items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-40"
+        :class="viewButtonClass(viewMode === 'list')"
+        :aria-label="t('stats.viewList')"
+        :aria-pressed="viewMode === 'list'"
+        :disabled="loading"
+        @click="setViewMode('list')"
+      >
+        <UIcon
+          name="i-lucide-list"
+          class="size-4"
+        />
+      </button>
+    </div>
+  </form>
+</template>
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import type { ImageItem } from '~/types/image'
+
+const props = withDefaults(defineProps<{
+  items: ImageItem[]
+  selectedKeys: Set<string>
+  selectable?: boolean
+  showStorage?: boolean
+  emptyText?: string
+  showDelete?: boolean
+}>(), {
+  selectable: false,
+  showStorage: false,
+  showDelete: true
+})
+
+const emit = defineEmits<{
+  'update:selectedKeys': [value: Set<string>]
+  'preview': [image: ImageItem]
+  'delete': [image: ImageItem]
+}>()
+
+const { t } = useI18n()
+const { formatFileSize } = useFileSize()
+
+const displayEmptyText = computed(() => props.emptyText ?? t('image.empty'))
+
+const allSelected = computed(() =>
+  props.items.length > 0 && props.items.every(item => props.selectedKeys.has(item.key))
+)
+
+const someSelected = computed(() =>
+  props.items.some(item => props.selectedKeys.has(item.key))
+)
+
+const headerIndeterminate = computed(() => someSelected.value && !allSelected.value)
+
+function updateSelection(key: string, selected: boolean) {
+  const next = new Set(props.selectedKeys)
+  if (selected) next.add(key)
+  else next.delete(key)
+  emit('update:selectedKeys', next)
+}
+
+function toggleAll(value: boolean | 'indeterminate') {
+  if (value === true) {
+    emit('update:selectedKeys', new Set(props.items.map(item => item.key)))
+    return
+  }
+  emit('update:selectedKeys', new Set())
+}
+
+function formatUploadedAt(value: string) {
+  try {
+    const date = new Date(value)
+    const y = date.getFullYear()
+    const m = String(date.getMonth() + 1).padStart(2, '0')
+    const d = String(date.getDate()).padStart(2, '0')
+    const h = String(date.getHours()).padStart(2, '0')
+    const min = String(date.getMinutes()).padStart(2, '0')
+    const s = String(date.getSeconds()).padStart(2, '0')
+    return `${y}/${m}/${d} ${h}:${min}:${s}`
+  } catch {
+    return value
+  }
+}
+
+function sourceLabel(image: ImageItem) {
+  switch (image.uploadSource) {
+    case 'web':
+      return t('stats.tagWeb')
+    case 'api':
+      return t('stats.tagApi')
+    default:
+      return null
+  }
+}
+
+function typeLabel(image: ImageItem) {
+  if (props.showStorage && image.storage) return image.storage.name
+  return '—'
+}
+</script>
+
+<template>
+  <div
+    v-if="items.length"
+    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">
+          <tr>
+            <th
+              v-if="selectable"
+              class="w-10 px-4 py-3 text-left font-medium"
+            >
+              <UCheckbox
+                :model-value="allSelected ? true : headerIndeterminate ? 'indeterminate' : false"
+                :aria-label="t('stats.selectAll')"
+                @update:model-value="toggleAll"
+              />
+            </th>
+            <th class="min-w-[16rem] px-4 py-3 text-left font-medium">
+              {{ t('stats.colFilename') }}
+            </th>
+            <th class="hidden w-28 px-4 py-3 text-left font-medium sm:table-cell">
+              {{ t('stats.colSource') }}
+            </th>
+            <th class="w-24 px-4 py-3 text-left font-medium">
+              {{ t('stats.colSize') }}
+            </th>
+            <th class="hidden w-32 px-4 py-3 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">
+              {{ t('stats.colUploadedAt') }}
+            </th>
+            <th class="w-28 px-4 py-3 text-right font-medium">
+              {{ t('stats.colActions') }}
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-default">
+          <tr
+            v-for="image in items"
+            :key="image.key"
+            class="transition-colors hover:bg-muted/20"
+          >
+            <td
+              v-if="selectable"
+              class="px-4 py-3"
+            >
+              <UCheckbox
+                :model-value="selectedKeys.has(image.key)"
+                @update:model-value="updateSelection(image.key, $event === true)"
+              />
+            </td>
+            <td class="px-4 py-3">
+              <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"
+                  :aria-label="t('image.openPreview')"
+                  @click="emit('preview', image)"
+                >
+                  <img
+                    :src="image.url"
+                    :alt="image.originalName"
+                    loading="lazy"
+                    class="size-full object-cover"
+                  >
+                </button>
+                <p
+                  class="min-w-0 flex-1 truncate font-medium"
+                  :title="image.originalName"
+                >
+                  {{ image.originalName }}
+                </p>
+              </div>
+            </td>
+            <td class="hidden px-4 py-3 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"
+              >
+                {{ sourceLabel(image) }}
+              </span>
+              <span
+                v-else
+                class="text-muted"
+              >—</span>
+            </td>
+            <td class="px-4 py-3 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>
+            <td class="hidden px-4 py-3 text-muted lg:table-cell">
+              {{ formatUploadedAt(image.uploadedAt) }}
+            </td>
+            <td class="px-4 py-3">
+              <div class="flex items-center justify-end gap-0.5 text-muted">
+                <CopyButton
+                  icon="i-lucide-link"
+                  icon-only
+                  variant="ghost"
+                  color="neutral"
+                  :label="t('common.copy')"
+                  :value="image.url"
+                  :success-title="t('copy.copiedUrl')"
+                />
+                <UButton
+                  icon="i-lucide-eye"
+                  variant="ghost"
+                  color="neutral"
+                  size="xs"
+                  :aria-label="t('image.openPreview')"
+                  @click="emit('preview', image)"
+                />
+                <UButton
+                  v-if="showDelete"
+                  icon="i-lucide-trash-2"
+                  variant="ghost"
+                  color="neutral"
+                  size="xs"
+                  :aria-label="t('common.delete')"
+                  @click="emit('delete', image)"
+                />
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div
+    v-else
+    class="rounded-xl border border-dashed border-default py-16 text-center text-sm text-muted"
+  >
+    {{ displayEmptyText }}
+  </div>
+</template>
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { ImageItem } from '~/types/image'
+
+const props = defineProps<{
+  items: ImageItem[]
+  selectedKeys: Set<string>
+}>()
+
+const emit = defineEmits<{
+  'update:selectedKeys': [value: Set<string>]
+  'clear': []
+}>()
+
+const { t } = useI18n()
+
+const allSelected = computed(() =>
+  props.items.length > 0 && props.items.every(item => props.selectedKeys.has(item.key))
+)
+
+const someSelected = computed(() =>
+  props.items.some(item => props.selectedKeys.has(item.key))
+)
+
+const indeterminate = computed(() => someSelected.value && !allSelected.value)
+
+function toggleAll(value: boolean | 'indeterminate') {
+  if (value === true) {
+    emit('update:selectedKeys', new Set(props.items.map(item => item.key)))
+    return
+  }
+  emit('update:selectedKeys', new Set())
+}
+</script>
+
+<template>
+  <div class="flex min-w-0 items-center gap-3">
+    <UCheckbox
+      :model-value="allSelected ? true : indeterminate ? 'indeterminate' : false"
+      :disabled="!items.length"
+      :aria-label="t('stats.selectAll')"
+      @update:model-value="toggleAll"
+    />
+    <p class="text-sm text-muted">
+      {{ t('stats.selectedItems', { n: selectedKeys.size }) }}
+    </p>
+    <button
+      type="button"
+      class="text-sm text-primary hover:underline disabled:pointer-events-none disabled:opacity-40"
+      :disabled="selectedKeys.size === 0"
+      @click="emit('clear')"
+    >
+      {{ t('stats.clear') }}
+    </button>
+  </div>
+</template>
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+export interface GalleryStatsData {
+  uploadToday: number
+  uploadYesterday: number
+  uploadMonth: number
+  uploadLastMonth: number
+  uploadTotal: number
+  storedCount: number
+  uploadBytesTotal: number
+  bySource: {
+    web: number
+    api: number
+  }
+  storageUsage: {
+    usedBytes: number
+    totalBytes: number | null
+    percent: number | null
+  }
+}
+
+const props = defineProps<{
+  stats: GalleryStatsData | null
+  loading?: boolean
+}>()
+
+const { t } = useI18n()
+const { formatFileSize } = useFileSize()
+
+const SOURCE_COLORS = ['var(--ui-primary)', '#10b981'] as const
+
+const sourceItems = computed(() => {
+  const bySource = props.stats?.bySource
+  if (!bySource) return []
+  return [
+    { key: 'web', label: t('stats.sourceWeb'), count: bySource.web, color: SOURCE_COLORS[0] },
+    { key: 'api', label: t('stats.sourceApi'), count: bySource.api, color: SOURCE_COLORS[1] }
+  ]
+})
+
+const sourceTotal = computed(() =>
+  sourceItems.value.reduce((sum, item) => sum + item.count, 0)
+)
+
+function sourcePercent(count: number) {
+  if (!sourceTotal.value) return 0
+  return Math.round((count / sourceTotal.value) * 100)
+}
+
+function formatTrend(current: number, previous: number) {
+  if (previous === 0) {
+    if (current === 0) {
+      return { text: t('stats.trendFlat'), tone: 'muted' as const }
+    }
+    return { text: t('stats.trendUp', { p: 100 }), tone: 'up' as const }
+  }
+  const change = Math.round(((current - previous) / previous) * 100)
+  if (change > 0) {
+    return { text: t('stats.trendUp', { p: change }), tone: 'up' as const }
+  }
+  if (change < 0) {
+    return { text: t('stats.trendDown', { p: Math.abs(change) }), tone: 'down' as const }
+  }
+  return { text: t('stats.trendFlat'), tone: 'muted' as const }
+}
+
+const todayTrend = computed(() =>
+  formatTrend(props.stats?.uploadToday ?? 0, props.stats?.uploadYesterday ?? 0)
+)
+
+const monthTrend = computed(() =>
+  formatTrend(props.stats?.uploadMonth ?? 0, props.stats?.uploadLastMonth ?? 0)
+)
+
+const usageLabel = computed(() => {
+  const usage = props.stats?.storageUsage
+  if (!usage) return '—'
+  const used = formatFileSize(usage.usedBytes)
+  if (usage.totalBytes) {
+    return `${used} / ${formatFileSize(usage.totalBytes)}`
+  }
+  return used
+})
+
+const usagePercent = computed(() => {
+  const percent = props.stats?.storageUsage.percent
+  if (percent == null) return null
+  return Math.min(percent, 100)
+})
+
+const usageBarWidth = computed(() => {
+  const usage = props.stats?.storageUsage
+  if (!usage?.totalBytes || usagePercent.value == null) return 0
+  return Math.max(usagePercent.value, usage.usedBytes > 0 ? 4 : 0)
+})
+
+function displayValue(value: number | undefined) {
+  if (props.loading) return '—'
+  return value ?? '—'
+}
+</script>
+
+<template>
+  <section class="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
+    <div class="rounded-xl border border-default bg-elevated p-4">
+      <p class="text-xs text-muted">
+        {{ t('stats.uploadToday') }}
+      </p>
+      <p class="mt-2 text-2xl font-semibold tabular-nums text-highlighted">
+        {{ displayValue(stats?.uploadToday) }}
+      </p>
+      <p
+        class="mt-2 text-xs"
+        :class="{
+          'text-primary': todayTrend.tone === 'up',
+          'text-muted': todayTrend.tone === 'muted',
+          'text-orange-600 dark:text-orange-400': todayTrend.tone === 'down'
+        }"
+      >
+        {{ t('stats.vsYesterday') }} {{ todayTrend.text }}
+      </p>
+    </div>
+
+    <div class="rounded-xl border border-default bg-elevated p-4">
+      <p class="text-xs text-muted">
+        {{ t('stats.uploadMonth') }}
+      </p>
+      <p class="mt-2 text-2xl font-semibold tabular-nums text-highlighted">
+        {{ displayValue(stats?.uploadMonth) }}
+      </p>
+      <p
+        class="mt-2 text-xs"
+        :class="{
+          'text-primary': monthTrend.tone === 'up',
+          'text-muted': monthTrend.tone === 'muted',
+          'text-orange-600 dark:text-orange-400': monthTrend.tone === 'down'
+        }"
+      >
+        {{ t('stats.vsLastMonth') }} {{ monthTrend.text }}
+      </p>
+    </div>
+
+    <div class="rounded-xl border border-default bg-elevated p-4">
+      <p class="text-xs text-muted">
+        {{ t('stats.uploadTotal') }}
+      </p>
+      <p class="mt-2 text-2xl font-semibold tabular-nums text-highlighted">
+        {{ displayValue(stats?.uploadTotal) }}
+      </p>
+      <p class="mt-2 text-xs text-muted">
+        {{ t('stats.totalFiles') }}
+      </p>
+    </div>
+
+    <div class="rounded-xl border border-default bg-elevated p-4">
+      <p class="text-xs text-muted">
+        {{ t('stats.storedCount') }}
+      </p>
+      <p class="mt-2 text-2xl font-semibold tabular-nums text-highlighted">
+        {{ displayValue(stats?.storedCount) }}
+      </p>
+      <p class="mt-2 text-xs text-muted">
+        {{ stats ? t('stats.totalOccupied', { size: formatFileSize(stats.uploadBytesTotal) }) : '—' }}
+      </p>
+    </div>
+
+    <div class="rounded-xl border border-default bg-elevated p-4">
+      <p class="text-xs text-muted">
+        {{ t('stats.storageUsage') }}
+      </p>
+      <p class="mt-2 text-sm font-semibold tabular-nums text-highlighted sm:text-base">
+        {{ usageLabel }}
+      </p>
+      <div
+        v-if="stats?.storageUsage.totalBytes"
+        class="mt-3 space-y-1"
+      >
+        <div class="h-1.5 overflow-hidden rounded-full bg-muted/50">
+          <div
+            class="h-full rounded-full bg-primary transition-all"
+            :style="{ width: `${usageBarWidth}%` }"
+          />
+        </div>
+        <p class="text-right text-xs tabular-nums text-muted">
+          {{ usagePercent }}%
+        </p>
+      </div>
+      <p
+        v-else
+        class="mt-2 text-xs text-muted"
+      >
+        {{ t('stats.noQuota') }}
+      </p>
+    </div>
+
+    <div class="col-span-2 rounded-xl border border-default bg-elevated p-4 sm:col-span-1">
+      <p class="text-xs text-muted">
+        {{ t('stats.sourceDistribution') }}
+      </p>
+      <div
+        v-if="!sourceTotal"
+        class="mt-4 text-xs text-muted"
+      >
+        {{ t('stats.noData') }}
+      </div>
+      <ul
+        v-else
+        class="mt-3 space-y-3"
+      >
+        <li
+          v-for="item in sourceItems"
+          :key="item.key"
+        >
+          <div class="flex items-center justify-between gap-2 text-xs">
+            <span class="flex min-w-0 items-center gap-1.5">
+              <span
+                class="size-2 shrink-0 rounded-full"
+                :style="{ background: item.color }"
+              />
+              <span class="truncate">{{ item.label }}</span>
+            </span>
+            <span class="shrink-0 tabular-nums text-muted">
+              {{ item.count }} ({{ sourcePercent(item.count) }}%)
+            </span>
+          </div>
+          <div class="mt-1.5 h-1.5 overflow-hidden rounded-full bg-muted/40">
+            <div
+              class="h-full rounded-full transition-[width]"
+              :style="{
+                width: `${sourcePercent(item.count)}%`,
+                backgroundColor: item.color
+              }"
+            />
+          </div>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
@@ -0,0 +1,5 @@
+<template>
+  <div class="divide-y divide-default overflow-hidden rounded-lg border border-default">
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,554 @@
+<script setup lang="ts">
+import type { ActivityLogListResponse, ActivityLogStorage, LogAction, LogSource } from '~/types/logs'
+
+const { isAuthenticated, handleAuthError, isAdmin } = useAuth()
+const toast = useToast()
+const { t, locale } = useI18n()
+const { formatFileSize } = useFileSize()
+
+const loading = ref(true)
+const page = ref(1)
+const actionFilter = ref<'all' | LogAction>('all')
+const sourceFilter = ref<'all' | LogSource>('all')
+const userFilter = ref<'all' | number>('all')
+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 }
+])
+
+const sourceItems = computed(() => [
+  { label: t('logs.filterSourceAll'), value: 'all' as const },
+  { label: t('logs.sourceWeb'), value: 'web' as const },
+  { label: t('logs.sourceApi'), value: 'api' as const }
+])
+
+const userItems = computed(() => {
+  const items: Array<{ label: string, value: 'all' | number }> = [
+    { label: t('logs.filterUserAll'), value: 'all' }
+  ]
+  for (const user of listData.value?.users ?? []) {
+    items.push({ label: user.username, value: user.id })
+  }
+  return items
+})
+
+function formatTime(value: string) {
+  try {
+    return new Date(value).toLocaleString(locale.value, { hour12: false })
+  } catch {
+    return value
+  }
+}
+
+function formatTimeShort(value: string) {
+  try {
+    return new Date(value).toLocaleString(locale.value, {
+      month: 'numeric',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  } catch {
+    return value
+  }
+}
+
+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`
+}
+
+function actionIcon(action: LogAction) {
+  return action === 'upload' ? 'i-lucide-upload' : 'i-lucide-trash-2'
+}
+
+function sourceLabel(source: LogSource) {
+  switch (source) {
+    case 'web':
+      return t('logs.sourceWeb')
+    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
+  }
+  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}`
+}
+
+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
+    }
+  }
+}
+
+async function loadLogs() {
+  loading.value = true
+  try {
+    const query: Record<string, string | number> = {
+      page: page.value,
+      limit: pageSize
+    }
+    if (actionFilter.value !== 'all') {
+      query.action = actionFilter.value
+    }
+    if (sourceFilter.value !== 'all') {
+      query.source = sourceFilter.value
+    }
+    if (isAdmin.value && userFilter.value !== 'all') {
+      query.userId = userFilter.value
+    }
+    if (activeSearch.value) {
+      query.q = activeSearch.value
+    }
+
+    listData.value = await $fetch<ActivityLogListResponse>('/api/logs', {
+      credentials: 'include',
+      query
+    })
+    page.value = listData.value.page
+  } catch (error: unknown) {
+    handleAuthError(error)
+    if (isAuthenticated.value) {
+      toast.add({ title: t('logs.loadFailed'), color: 'error' })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function applyFilters() {
+  page.value = 1
+  void loadLogs()
+}
+
+function submitSearch() {
+  activeSearch.value = searchQuery.value.trim()
+  applyFilters()
+}
+
+function clearSearch() {
+  searchQuery.value = ''
+  activeSearch.value = ''
+  applyFilters()
+}
+
+function handlePageChange(target: number) {
+  page.value = target
+  void loadLogs()
+}
+
+onMounted(async () => {
+  await loadImageLinkBase()
+  await 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') }}
+        </p>
+      </div>
+      <UButton
+        icon="i-lucide-refresh-cw"
+        variant="outline"
+        color="neutral"
+        size="sm"
+        :label="t('common.refresh')"
+        :loading="loading"
+        @click="loadLogs"
+      />
+    </div>
+
+    <form
+      class="border-b border-default px-5 py-3 sm:px-6"
+      @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 min-w-0 flex-wrap items-center gap-2 sm:justify-end">
+          <USelect
+            v-if="isAdmin"
+            v-model="userFilter"
+            :items="userItems"
+            value-key="value"
+            class="min-w-0 w-full sm:w-36"
+            size="sm"
+            @update:model-value="applyFilters"
+          />
+          <USelect
+            v-model="actionFilter"
+            :items="actionItems"
+            value-key="value"
+            class="min-w-0 w-[calc(50%-0.25rem)] sm:w-32"
+            size="sm"
+            @update:model-value="applyFilters"
+          />
+          <USelect
+            v-model="sourceFilter"
+            :items="sourceItems"
+            value-key="value"
+            class="min-w-0 w-[calc(50%-0.25rem)] sm:w-36"
+            size="sm"
+            @update:model-value="applyFilters"
+          />
+          <div class="flex min-w-0 w-full items-center gap-2 sm:w-auto">
+            <UInput
+              v-model="searchQuery"
+              icon="i-lucide-search"
+              :placeholder="t('logs.searchPlaceholder')"
+              class="min-w-0 flex-1 sm:w-40 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>
+            </UButton>
+            <UButton
+              v-if="activeSearch"
+              type="button"
+              icon="i-lucide-x"
+              size="sm"
+              variant="ghost"
+              color="neutral"
+              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>
+      </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
+              v-for="row in listData.items"
+              :key="row.id"
+              class="hover:bg-muted/20"
+            >
+              <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">
+                <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>
+              </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">
+                  {{ 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"
+                >
+                  <UIcon
+                    :name="storageIcon(row.storage)"
+                    class="size-3.5 shrink-0 opacity-70"
+                  />
+                  <span class="truncate">{{ row.storage.name }}</span>
+                </span>
+                <span
+                  v-else
+                  class="text-muted"
+                >—</span>
+              </td>
+              <td
+                class="hidden max-w-0 truncate px-4 py-3 md:table-cell"
+                :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>
+                  <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')"
+                  />
+                </div>
+              </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>
+
+    <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>
+  </div>
+</template>
@@ -0,0 +1,7 @@
+<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>
+</template>
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  hint?: string
+}>()
+</script>
+
+<template>
+  <section class="space-y-4">
+    <div class="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">
+            {{ title }}
+          </h2>
+        </div>
+        <p
+          v-if="hint"
+          class="mt-1.5 pl-3 text-xs leading-relaxed text-muted"
+        >
+          {{ hint }}
+        </p>
+      </div>
+      <div
+        v-if="$slots.action"
+        class="shrink-0"
+      >
+        <slot name="action" />
+      </div>
+    </div>
+    <slot />
+  </section>
+</template>
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps<{
+  hasChanges: boolean
+  saving: boolean
+}>()
+
+const emit = defineEmits<{
+  save: []
+}>()
+
+const { t } = useI18n()
+</script>
+
+<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">
+      <p
+        v-if="hasChanges"
+        class="mr-auto text-xs text-warning"
+      >
+        {{ t('settings.unsavedChanges') }}
+      </p>
+      <UButton
+        :label="t('settings.saveSettings')"
+        icon="i-lucide-save"
+        color="primary"
+        :loading="saving"
+        :disabled="!hasChanges"
+        @click="emit('save')"
+      />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { SettingsTab } from '~/types/settings'
+
+defineProps<{
+  modelValue: SettingsTab
+  items: Array<{ id: SettingsTab, label: string, icon: string }>
+  title: string
+  subtitle: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [SettingsTab]
+}>()
+</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>
+
+    <nav class="flex-1 space-y-0.5 p-3">
+      <button
+        v-for="item in items"
+        :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)"
+      >
+        <UIcon
+          :name="item.icon"
+          class="size-4 shrink-0"
+          :class="modelValue === item.id ? 'text-primary' : 'opacity-70'"
+        />
+        <span>{{ item.label }}</span>
+      </button>
+    </nav>
+  </aside>
+</template>
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineProps<{
+  appVersion: string
+  updateAvailable: boolean
+  latestVersion: string | null
+  releaseUrl: string | null
+}>()
+
+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">
+        {{ t('settings.systemVersion') }}
+      </span>
+      <UBadge
+        color="neutral"
+        variant="subtle"
+        size="sm"
+      >
+        v{{ appVersion }}
+      </UBadge>
+      <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"
+      >
+        {{ t('settings.updateAvailable', { version: `v${latestVersion}` }) }}
+      </a>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  hint?: string
+  disabled?: boolean
+}>()
+
+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="min-w-0 flex-1 pr-2">
+      <p class="text-sm font-medium text-highlighted">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </p>
+      <p
+        v-if="hint || $slots.hint"
+        class="mt-1 text-xs leading-relaxed text-muted"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </p>
+    </div>
+    <USwitch
+      v-model="model"
+      :disabled="disabled"
+      class="mt-0.5 shrink-0"
+    />
+  </div>
+</template>
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+const {
+  compressEnabled,
+  autoCopyMarkdown,
+  copyFormat,
+  clientWebpQuality,
+  loadPreferences
+} = useUploadPreferences()
+
+const { t } = useI18n()
+
+const {
+  userSettings,
+  enabled: userAutoDeleteEnabled,
+  daysDraft: userAutoDeleteDaysDraft,
+  load: loadUserSettings
+} = useUserAutoDeleteSettings()
+
+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 }
+])
+
+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') {
+  copyFormat.value = value
+}
+
+function onClientQualityInput(event: Event) {
+  const value = Number((event.target as HTMLInputElement).value)
+  clientWebpQuality.value = Number.isFinite(value) ? value : 80
+}
+
+onMounted(() => {
+  loadPreferences()
+  void loadUserSettings()
+})
+</script>
+
+<template>
+  <SettingsSection :title="t('preferences.processing')">
+    <SettingsGroup>
+      <SettingsToggleRow
+        v-model="compressEnabled"
+        :title="t('preferences.clientCompress')"
+        :hint="t('preferences.clientCompressHint')"
+      />
+      <div
+        v-if="userSettings"
+        class="flex items-start justify-between gap-4 px-4 py-4 sm:px-5"
+      >
+        <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">
+            <span>{{ t('preferences.autoDeletePrefix') }}</span>
+            <UInput
+              v-model.number="userAutoDeleteDaysDraft"
+              type="number"
+              min="1"
+              max="3650"
+              size="xs"
+              class="w-14 tabular-nums"
+              :class="userAutoDeleteEnabled ? '' : 'pointer-events-none opacity-40'"
+            />
+            <span>{{ t('preferences.autoDeleteSuffix') }}</span>
+          </p>
+          <p class="mt-1 text-xs leading-relaxed text-muted">
+            {{ t('preferences.autoDeleteHint') }}
+          </p>
+        </div>
+        <USwitch
+          v-model="userAutoDeleteEnabled"
+          class="mt-0.5 shrink-0"
+        />
+      </div>
+      <div
+        v-else
+        class="flex justify-center py-4"
+      >
+        <UIcon
+          name="i-lucide-loader-circle"
+          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>
+        <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')">
+    <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">
+        <p class="text-sm font-medium text-highlighted">
+          {{ t('settings.defaultCopyFormat') }}
+        </p>
+        <div
+          class="flex w-full max-w-xs gap-1 rounded-lg border border-default p-0.5 sm:w-auto"
+          :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]"
+            :variant="copyFormat === item.value ? 'solid' : 'ghost'"
+            :color="copyFormat === item.value ? 'primary' : 'neutral'"
+            :label="item.label"
+            @click="setCopyFormat(item.value)"
+          />
+        </div>
+      </div>
+    </SettingsGroup>
+  </SettingsSection>
+</template>
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import type { StorageBackendItem } from '~/types/storage'
+
+const props = defineProps<{
+  backend: StorageBackendItem
+  envOverride?: boolean
+  busy?: boolean
+}>()
+
+const emit = defineEmits<{
+  setDefault: []
+  edit: []
+  test: []
+  toggleEnabled: []
+  delete: []
+}>()
+
+const { t } = useI18n()
+
+const typeIcon = computed(() =>
+  props.backend.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
+)
+
+const typeLabel = computed(() =>
+  props.backend.type === 'local' ? t('storage.backendLocal') : t('storage.backendCloud')
+)
+
+const actionsDisabled = computed(() => props.envOverride || props.busy)
+
+const isLocal = computed(() => props.backend.type === 'local')
+
+function canSetDefault() {
+  return !props.backend.isDefault && props.backend.enabled
+}
+
+function canEdit() {
+  return props.backend.type === 's3'
+}
+
+function canToggle() {
+  return props.backend.type !== 'local'
+}
+
+function canDelete() {
+  return props.backend.type !== 'local' && !props.backend.isDefault
+}
+</script>
+
+<template>
+  <article
+    class="flex h-full flex-col rounded-xl border border-default bg-elevated p-4 sm:p-5"
+    :class="{ 'opacity-75': !backend.enabled }"
+  >
+    <div class="flex items-start justify-between gap-3">
+      <div class="flex min-w-0 items-center gap-3">
+        <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+          <UIcon
+            :name="typeIcon"
+            class="size-5"
+          />
+        </div>
+        <h3 class="truncate text-base font-semibold">
+          {{ backend.name }}
+        </h3>
+      </div>
+      <div class="flex shrink-0 flex-wrap justify-end gap-1.5">
+        <span
+          v-if="backend.isDefault"
+          class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
+        >
+          {{ t('storage.badgeDefaultStorage') }}
+        </span>
+        <span
+          v-if="isLocal"
+          class="inline-flex rounded-md border border-default bg-default px-2 py-0.5 text-xs font-medium text-muted"
+        >
+          {{ t('storage.badgeLocal') }}
+        </span>
+        <span
+          v-else-if="backend.enabled"
+          class="inline-flex rounded-md border border-default bg-default px-2 py-0.5 text-xs font-medium text-muted"
+        >
+          {{ t('storage.badgeEnabled') }}
+        </span>
+        <span
+          v-else
+          class="inline-flex rounded-md bg-muted px-2 py-0.5 text-xs font-medium text-muted"
+        >
+          {{ t('storage.badgeDisabled') }}
+        </span>
+      </div>
+    </div>
+
+    <div class="mt-4">
+      <StorageUsageBar
+        :capacity="backend.capacity"
+        :index-bytes="backend.usage.bytes"
+      />
+    </div>
+
+    <div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
+      <div class="flex min-w-0 items-center gap-2">
+        <span class="shrink-0">{{ t('storage.storageId') }}:</span>
+        <code class="min-w-0 truncate font-mono text-dimmed">{{ backend.id }}</code>
+        <CopyButton
+          icon="i-lucide-copy"
+          icon-only
+          variant="ghost"
+          color="primary"
+          class="shrink-0"
+          :label="t('common.copy')"
+          :value="backend.id"
+          :success-title="t('copy.copied')"
+        />
+      </div>
+      <span>
+        {{ t('storage.storageType') }}: {{ typeLabel }}
+      </span>
+    </div>
+
+    <div class="mt-4 flex flex-wrap gap-2 border-t border-default pt-4">
+      <UButton
+        v-if="canSetDefault()"
+        :label="t('storage.setDefault')"
+        icon="i-lucide-star"
+        size="sm"
+        variant="outline"
+        color="neutral"
+        :disabled="actionsDisabled"
+        @click="emit('setDefault')"
+      />
+      <UButton
+        v-if="canEdit()"
+        :label="t('common.edit')"
+        icon="i-lucide-pencil"
+        size="sm"
+        variant="outline"
+        color="neutral"
+        :disabled="actionsDisabled"
+        @click="emit('edit')"
+      />
+      <UButton
+        :label="t('storage.testConnection')"
+        :icon="isLocal ? 'i-lucide-wand-sparkles' : 'i-lucide-activity'"
+        size="sm"
+        variant="outline"
+        color="neutral"
+        :loading="busy"
+        :disabled="actionsDisabled"
+        @click="emit('test')"
+      />
+      <UButton
+        v-if="canToggle()"
+        :label="backend.enabled ? t('storage.disable') : t('storage.enable')"
+        :icon="backend.enabled ? 'i-lucide-pause' : 'i-lucide-play'"
+        size="sm"
+        variant="outline"
+        color="neutral"
+        :disabled="actionsDisabled || (backend.isDefault && backend.enabled)"
+        @click="emit('toggleEnabled')"
+      />
+      <UButton
+        v-if="canDelete()"
+        :label="t('common.delete')"
+        icon="i-lucide-trash-2"
+        size="sm"
+        variant="outline"
+        color="error"
+        :disabled="actionsDisabled"
+        @click="emit('delete')"
+      />
+    </div>
+  </article>
+</template>
@@ -0,0 +1,347 @@
+<script setup lang="ts">
+import type { QuotaUnit } from '~/composables/useFileSize'
+import type { StorageBackendItem } from '~/types/storage'
+
+type StorageProvider = 'r2' | 'cos' | 'oss' | 'aws' | 'custom'
+
+export interface StorageFormPayload {
+  name: string
+  provider: StorageProvider
+  config: {
+    endpoint: string
+    region: string
+    bucket: string
+    prefix?: string
+    forcePathStyle: boolean
+  }
+  secrets: {
+    accessKeyId: string
+    secretAccessKey: string
+  }
+  servingMode: 'proxy' | 'public'
+  publicUrl: string
+  quotaValue: string
+  quotaUnit: QuotaUnit
+}
+
+const props = defineProps<{
+  backend?: StorageBackendItem | null
+  createMode?: boolean
+  saving?: boolean
+}>()
+
+const emit = defineEmits<{
+  submit: [payload: StorageFormPayload]
+  cancel: []
+}>()
+
+const { t } = useI18n()
+const { bytesToQuotaInput, QUOTA_UNITS } = useFileSize()
+
+const name = ref('')
+const provider = ref<StorageProvider>('r2')
+const endpoint = ref('')
+const region = ref('auto')
+const bucket = ref('')
+const prefix = ref('')
+const forcePathStyle = ref(false)
+const accessKeyId = ref('')
+const secretAccessKey = ref('')
+const servingMode = ref<'proxy' | 'public'>('proxy')
+const publicUrl = ref('')
+const quotaValue = ref('')
+const quotaUnit = ref<QuotaUnit>('GB')
+
+const quotaUnitOptions = computed(() =>
+  QUOTA_UNITS.map(unit => ({ label: unit, value: unit }))
+)
+
+const providerOptions = computed(() => [
+  { label: t('storage.providerR2'), value: 'r2' as const },
+  { label: t('storage.providerCos'), value: 'cos' as const },
+  { label: t('storage.providerOss'), value: 'oss' as const },
+  { label: t('storage.providerAws'), value: 'aws' as const },
+  { label: t('storage.providerCustom'), value: 'custom' as const }
+])
+
+const servingModeOptions = computed(() => [
+  { label: t('storage.servingProxy'), value: 'proxy' },
+  { label: t('storage.servingPublic'), value: 'public' }
+])
+
+function providerLabel(value: StorageProvider): string {
+  return providerOptions.value.find(option => option.value === value)?.label
+    ?? t('storage.backendCloud')
+}
+
+function applyProviderTemplate(value: StorageProvider) {
+  if (!props.createMode && props.backend) return
+  if (props.createMode) {
+    name.value = providerLabel(value)
+  }
+  switch (value) {
+    case 'r2':
+      endpoint.value = 'https://{account_id}.r2.cloudflarestorage.com'
+      region.value = 'auto'
+      forcePathStyle.value = false
+      break
+    case 'cos':
+      endpoint.value = 'https://cos.{region}.myqcloud.com'
+      region.value = 'ap-guangzhou'
+      forcePathStyle.value = true
+      break
+    case 'oss':
+      endpoint.value = 'https://oss-{region}.aliyuncs.com'
+      region.value = 'cn-hangzhou'
+      forcePathStyle.value = false
+      break
+    case 'aws':
+      endpoint.value = 'https://s3.{region}.amazonaws.com'
+      region.value = 'us-east-1'
+      forcePathStyle.value = false
+      break
+    default:
+      break
+  }
+}
+
+function detectProvider(config: StorageBackendItem['config']): StorageProvider {
+  const ep = config.endpoint ?? ''
+  if (ep.includes('r2.cloudflarestorage.com')) return 'r2'
+  if (ep.includes('myqcloud.com')) return 'cos'
+  if (ep.includes('aliyuncs.com')) return 'oss'
+  if (ep.includes('amazonaws.com')) return 'aws'
+  return 'custom'
+}
+
+function loadBackend(backend: StorageBackendItem | null | undefined) {
+  if (!backend || backend.type !== 's3') {
+    if (props.createMode) {
+      name.value = ''
+      provider.value = 'r2'
+      applyProviderTemplate('r2')
+      bucket.value = ''
+      prefix.value = ''
+      accessKeyId.value = ''
+      secretAccessKey.value = ''
+      servingMode.value = 'proxy'
+      publicUrl.value = ''
+      quotaValue.value = ''
+      quotaUnit.value = 'GB'
+    }
+    return
+  }
+
+  name.value = backend.name
+  provider.value = detectProvider(backend.config)
+  endpoint.value = backend.config.endpoint ?? ''
+  region.value = backend.config.region ?? 'auto'
+  bucket.value = backend.config.bucket ?? ''
+  prefix.value = backend.config.prefix ?? ''
+  forcePathStyle.value = backend.config.forcePathStyle ?? false
+  servingMode.value = backend.servingMode
+  publicUrl.value = backend.publicUrl
+  const quota = bytesToQuotaInput(backend.quotaBytes)
+  quotaValue.value = quota.value
+  quotaUnit.value = quota.unit
+  accessKeyId.value = ''
+  secretAccessKey.value = ''
+}
+
+watch(() => props.backend, loadBackend, { immediate: true })
+
+watch(provider, (value) => {
+  if (props.createMode) {
+    applyProviderTemplate(value)
+  }
+})
+
+function handleSubmit() {
+  emit('submit', {
+    name: name.value.trim() || providerLabel(provider.value),
+    provider: provider.value,
+    config: {
+      endpoint: endpoint.value.trim(),
+      region: region.value.trim() || 'auto',
+      bucket: bucket.value.trim(),
+      prefix: prefix.value.trim() || undefined,
+      forcePathStyle: forcePathStyle.value
+    },
+    secrets: {
+      accessKeyId: accessKeyId.value.trim(),
+      secretAccessKey: secretAccessKey.value.trim()
+    },
+    servingMode: servingMode.value,
+    publicUrl: publicUrl.value.trim(),
+    quotaValue: String(quotaValue.value ?? '').trim(),
+    quotaUnit: quotaUnit.value
+  })
+}
+</script>
+
+<template>
+  <form
+    class="space-y-4"
+    @submit.prevent="handleSubmit"
+  >
+    <div class="space-y-2">
+      <label class="text-sm">{{ t('storage.provider') }}</label>
+      <USelect
+        v-model="provider"
+        :items="providerOptions"
+        class="w-full"
+      />
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm">{{ t('storage.backendName') }}</label>
+      <UInput
+        v-model="name"
+        class="w-full"
+      />
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm">{{ t('storage.endpoint') }}</label>
+      <UInput
+        v-model="endpoint"
+        class="w-full font-mono text-sm"
+      />
+    </div>
+
+    <div class="grid gap-3 sm:grid-cols-2">
+      <div class="space-y-2">
+        <label class="text-sm">{{ t('storage.region') }}</label>
+        <UInput
+          v-model="region"
+          class="w-full font-mono text-sm"
+        />
+      </div>
+      <div class="space-y-2">
+        <label class="text-sm">
+          {{ t('storage.bucket') }}
+          <span class="text-error">*</span>
+        </label>
+        <UInput
+          v-model="bucket"
+          class="w-full font-mono text-sm"
+          required
+        />
+      </div>
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm">{{ t('storage.prefix') }}</label>
+      <UInput
+        v-model="prefix"
+        :placeholder="t('storage.prefixPlaceholder')"
+        class="w-full font-mono text-sm"
+      />
+    </div>
+
+    <label class="flex cursor-pointer items-center gap-2">
+      <UCheckbox v-model="forcePathStyle" />
+      <span class="text-sm">{{ t('storage.forcePathStyle') }}</span>
+    </label>
+
+    <div class="grid gap-3 sm:grid-cols-2">
+      <div class="space-y-2">
+        <label class="text-sm">
+          {{ t('storage.accessKey') }}
+          <span
+            v-if="createMode"
+            class="text-error"
+          >*</span>
+        </label>
+        <UInput
+          v-model="accessKeyId"
+          :placeholder="backend?.secretsMasked.accessKeyId || ''"
+          class="w-full font-mono text-sm"
+          :required="createMode"
+        />
+      </div>
+      <div class="space-y-2">
+        <label class="text-sm">
+          {{ t('storage.secretKey') }}
+          <span
+            v-if="createMode"
+            class="text-error"
+          >*</span>
+        </label>
+        <UInput
+          v-model="secretAccessKey"
+          type="password"
+          :placeholder="backend?.secretsMasked.secretAccessKey || ''"
+          class="w-full font-mono text-sm"
+          :required="createMode"
+        />
+      </div>
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm">{{ t('storage.servingMode') }}</label>
+      <URadioGroup
+        v-model="servingMode"
+        :items="servingModeOptions"
+      />
+      <p class="text-xs text-muted">
+        {{ t('storage.servingHint') }}
+      </p>
+    </div>
+
+    <div
+      v-if="servingMode === 'public'"
+      class="space-y-2"
+    >
+      <label class="text-sm">{{ t('storage.publicUrl') }}</label>
+      <UInput
+        v-model="publicUrl"
+        :placeholder="t('storage.publicUrlPlaceholder')"
+        class="w-full font-mono text-sm"
+      />
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm">
+        {{ t('storage.quotaTotal') }}
+        <span class="text-error">*</span>
+      </label>
+      <div class="flex gap-2">
+        <UInput
+          :model-value="String(quotaValue)"
+          type="number"
+          min="0"
+          step="any"
+          required
+          :placeholder="t('storage.quotaPlaceholder')"
+          class="min-w-0 flex-1"
+          @update:model-value="quotaValue = String($event ?? '')"
+        />
+        <USelect
+          v-model="quotaUnit"
+          :items="quotaUnitOptions"
+          class="w-24 shrink-0"
+        />
+      </div>
+      <p class="text-xs text-muted">
+        {{ t('storage.quotaHint') }}
+      </p>
+    </div>
+
+    <div class="flex justify-end gap-2 pt-2">
+      <UButton
+        type="button"
+        :label="t('common.cancel')"
+        variant="outline"
+        color="neutral"
+        @click="emit('cancel')"
+      />
+      <UButton
+        type="submit"
+        :label="t('common.save')"
+        icon="i-lucide-save"
+        :loading="saving"
+      />
+    </div>
+  </form>
+</template>
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import type { StorageBackendItem } from '~/types/storage'
+
+const props = defineProps<{
+  backends: StorageBackendItem[]
+  loading?: boolean
+}>()
+
+const { t } = useI18n()
+const { formatFileSize } = useFileSize()
+
+const CHART_COLORS = [
+  'var(--ui-primary)',
+  '#3b82f6',
+  '#6366f1',
+  '#f59e0b',
+  '#ec4899',
+  '#8b5cf6'
+] as const
+
+function backendUsedBytes(backend: StorageBackendItem) {
+  return backend.capacity.source === 'disk'
+    ? backend.capacity.usedBytes
+    : backend.usage.bytes
+}
+
+const totalCapacityBytes = computed(() => {
+  let total = 0
+  let hasTotal = false
+  for (const backend of props.backends) {
+    if (backend.capacity.totalBytes != null && backend.capacity.totalBytes > 0) {
+      total += backend.capacity.totalBytes
+      hasTotal = true
+    }
+  }
+  return hasTotal ? total : null
+})
+
+const totalUsedBytes = computed(() =>
+  props.backends.reduce((sum, backend) => sum + backendUsedBytes(backend), 0)
+)
+
+const totalFreeBytes = computed(() => {
+  if (!totalCapacityBytes.value) return null
+  return Math.max(0, totalCapacityBytes.value - totalUsedBytes.value)
+})
+
+const usagePercent = computed(() => {
+  if (!totalCapacityBytes.value) return null
+  return Math.min(Math.round((totalUsedBytes.value / totalCapacityBytes.value) * 1000) / 10, 100)
+})
+
+const usageBarWidth = computed(() => {
+  if (usagePercent.value == null) return 0
+  return Math.max(usagePercent.value, totalUsedBytes.value > 0 ? 4 : 0)
+})
+
+const distributionItems = computed(() => {
+  if (!totalCapacityBytes.value) return []
+
+  return props.backends
+    .filter(backend => backend.capacity.totalBytes != null && backend.capacity.totalBytes > 0)
+    .map((backend, index) => ({
+      id: backend.id,
+      name: backend.name,
+      color: CHART_COLORS[index % CHART_COLORS.length]!,
+      percent: Math.round((backend.capacity.totalBytes! / totalCapacityBytes.value!) * 1000) / 10
+    }))
+})
+
+const donutStyle = computed(() => {
+  const items = distributionItems.value
+  if (!items.length) return { background: 'var(--ui-bg-muted)' }
+
+  let cursor = 0
+  const segments = items.map((item) => {
+    const start = cursor
+    cursor += item.percent
+    return `${item.color} ${start}% ${cursor}%`
+  })
+
+  return { background: `conic-gradient(${segments.join(', ')})` }
+})
+
+function displaySize(bytes: number | null) {
+  if (props.loading) return '—'
+  if (bytes == null) return '—'
+  return formatFileSize(bytes)
+}
+</script>
+
+<template>
+  <section class="rounded-xl border border-default bg-elevated p-4 sm:p-5">
+    <h2 class="text-sm font-semibold">
+      {{ t('storage.overviewTitle') }}
+    </h2>
+    <p class="mt-0.5 text-xs text-muted">
+      {{ t('storage.overviewSubtitle') }}
+    </p>
+
+    <div class="mt-4 grid gap-5 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
+      <div>
+        <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
+          <div>
+            <p class="text-xs text-muted">
+              {{ t('storage.overviewTotal') }}
+            </p>
+            <p class="mt-1 text-lg font-semibold tabular-nums">
+              {{ displaySize(totalCapacityBytes) }}
+            </p>
+            <div
+              v-if="totalCapacityBytes"
+              class="mt-2 h-1 overflow-hidden rounded-full bg-muted/50"
+            >
+              <div
+                class="h-full rounded-full bg-primary transition-all"
+                :style="{ width: `${usageBarWidth}%` }"
+              />
+            </div>
+          </div>
+          <div>
+            <p class="text-xs text-muted">
+              {{ t('storage.overviewUsed') }}
+            </p>
+            <p class="mt-1 text-lg font-semibold tabular-nums">
+              {{ displaySize(totalUsedBytes) }}
+            </p>
+          </div>
+          <div>
+            <p class="text-xs text-muted">
+              {{ t('storage.overviewFree') }}
+            </p>
+            <p class="mt-1 text-lg font-semibold tabular-nums">
+              {{ displaySize(totalFreeBytes) }}
+            </p>
+          </div>
+          <div>
+            <p class="text-xs text-muted">
+              {{ t('storage.overviewUsageRate') }}
+            </p>
+            <p class="mt-1 text-lg font-semibold tabular-nums">
+              {{ usagePercent != null ? `${usagePercent}%` : '—' }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-4">
+        <div
+          class="relative size-24 shrink-0 rounded-full p-2"
+          :style="donutStyle"
+        >
+          <div class="flex size-full items-center justify-center rounded-full bg-elevated px-2 text-center">
+            <p class="text-[10px] leading-tight text-muted">
+              {{ t('storage.capacityDistribution') }}
+            </p>
+          </div>
+        </div>
+
+        <ul
+          v-if="distributionItems.length"
+          class="min-w-[8rem] space-y-2"
+        >
+          <li
+            v-for="item in distributionItems"
+            :key="item.id"
+            class="flex items-center justify-between gap-3 text-xs"
+          >
+            <span class="flex min-w-0 items-center gap-1.5">
+              <span
+                class="size-2 shrink-0 rounded-full"
+                :style="{ background: item.color }"
+              />
+              <span class="truncate">{{ item.name }}</span>
+            </span>
+            <span class="shrink-0 tabular-nums text-muted">
+              {{ item.percent }}%
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+const items = computed(() => [
+  {
+    icon: 'i-lucide-hard-drive',
+    iconClass: 'text-primary',
+    boxClass: 'border-primary/20 bg-primary/5',
+    title: t('storage.backendLocal'),
+    desc: t('storage.supportedLocalDesc')
+  },
+  {
+    icon: 'i-lucide-cloud',
+    iconClass: 'text-orange-500',
+    boxClass: 'border-orange-500/20 bg-orange-500/5',
+    title: 'Cloudflare R2',
+    desc: t('storage.supportedR2Desc')
+  },
+  {
+    icon: 'i-lucide-server',
+    iconClass: 'text-blue-500',
+    boxClass: 'border-blue-500/20 bg-blue-500/5',
+    title: t('storage.supportedS3Title'),
+    desc: t('storage.supportedS3Desc')
+  }
+])
+</script>
+
+<template>
+  <section class="rounded-xl border border-default bg-elevated p-4 sm:p-5">
+    <h2 class="text-sm font-semibold">
+      {{ t('storage.supportedTitle') }}
+    </h2>
+
+    <div class="mt-4 grid grid-cols-1 gap-3 lg:grid-cols-3">
+      <div
+        v-for="item in items"
+        :key="item.title"
+        class="flex items-start gap-3 rounded-lg border border-default bg-muted/30 px-4 py-3"
+      >
+        <div
+          class="flex size-10 shrink-0 items-center justify-center rounded-lg border"
+          :class="item.boxClass"
+        >
+          <UIcon
+            :name="item.icon"
+            class="size-5"
+            :class="item.iconClass"
+          />
+        </div>
+        <div class="min-w-0 pt-0.5">
+          <p class="text-sm font-semibold">
+            {{ item.title }}
+          </p>
+          <p class="mt-0.5 text-xs leading-relaxed text-muted">
+            {{ item.desc }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { StorageCapacity } from '~/types/storage'
+
+const props = defineProps<{
+  capacity: StorageCapacity
+  indexBytes: number
+}>()
+
+const { formatFileSize } = useFileSize()
+
+const displayUsedBytes = computed(() =>
+  props.capacity.source === 'disk' ? props.capacity.usedBytes : props.indexBytes
+)
+
+const hasBar = computed(() =>
+  props.capacity.totalBytes != null && props.capacity.totalBytes > 0
+)
+
+const displayPercent = computed(() => props.capacity.percent ?? 0)
+
+const overQuota = computed(() =>
+  props.capacity.source === 'quota' && displayPercent.value > 100
+)
+
+const barWidth = computed(() => {
+  if (!hasBar.value) return 0
+  const percent = Math.min(displayPercent.value, 100)
+  return Math.max(percent, displayUsedBytes.value > 0 ? 4 : 0)
+})
+
+function formatOptional(bytes: number | null): string {
+  if (bytes == null) return '—'
+  return formatFileSize(bytes)
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+      <div>
+        <p class="text-xs text-muted">
+          {{ $t('storage.statUsed') }}
+        </p>
+        <p class="mt-1 text-sm font-semibold tabular-nums">
+          {{ formatFileSize(displayUsedBytes) }}
+        </p>
+      </div>
+      <div>
+        <p class="text-xs text-muted">
+          {{ $t('storage.statTotal') }}
+        </p>
+        <p class="mt-1 text-sm font-semibold tabular-nums">
+          {{ formatOptional(capacity.totalBytes) }}
+        </p>
+      </div>
+      <div>
+        <p class="text-xs text-muted">
+          {{ $t('storage.statFree') }}
+        </p>
+        <p
+          class="mt-1 text-sm font-semibold tabular-nums"
+          :class="overQuota ? 'text-error' : ''"
+        >
+          {{ formatOptional(capacity.freeBytes) }}
+        </p>
+      </div>
+      <div>
+        <p class="text-xs text-muted">
+          {{ $t('storage.usageRate') }}
+        </p>
+        <p class="mt-1 text-sm font-semibold tabular-nums">
+          {{ hasBar ? `${displayPercent}%` : '—' }}
+        </p>
+      </div>
+    </div>
+
+    <div
+      v-if="hasBar"
+      class="h-1 overflow-hidden rounded-full bg-muted/50"
+    >
+      <div
+        class="h-full rounded-full transition-all"
+        :class="overQuota ? 'bg-error/80' : 'bg-primary'"
+        :style="{ width: `${barWidth}%` }"
+      />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,323 @@
+export type ApiDocMethod = 'GET' | 'POST' | 'DELETE'
+export type ApiDocCategory = 'image' | 'extension' | 'system'
+export type ApiParamLocation = 'form-data' | 'query' | 'header' | 'body'
+
+export interface ApiDocParam {
+  name: string
+  type: string
+  location: ApiParamLocation
+  required: boolean
+  descriptionKey: string
+}
+
+export interface ApiDocEndpoint {
+  id: string
+  category: ApiDocCategory
+  method: ApiDocMethod
+  path: string
+  titleKey: string
+  descKey: string
+  params: ApiDocParam[]
+  requiresAuth: boolean
+  curl: string
+  responseExample: string
+}
+
+interface ApiDocsContext {
+  baseUrl: string
+  authHeader: string
+}
+
+function authFlag(authHeader: string) {
+  return `-H 'Auth-Token: ${authHeader}'`
+}
+
+export function buildApiDocs(ctx: ApiDocsContext): ApiDocEndpoint[] {
+  const { baseUrl, authHeader } = ctx
+  const auth = authFlag(authHeader)
+
+  return [
+    {
+      id: 'upload',
+      category: 'image',
+      method: 'POST',
+      path: '/api/images/upload',
+      titleKey: 'api.docs.upload.title',
+      descKey: 'api.docs.upload.desc',
+      requiresAuth: true,
+      params: [
+        {
+          name: 'image',
+          type: 'file',
+          location: 'form-data',
+          required: true,
+          descriptionKey: 'api.params.upload.image'
+        },
+        {
+          name: 'file',
+          type: 'file',
+          location: 'form-data',
+          required: false,
+          descriptionKey: 'api.params.upload.file'
+        },
+        {
+          name: 'files',
+          type: 'file',
+          location: 'form-data',
+          required: false,
+          descriptionKey: 'api.params.upload.files'
+        },
+        {
+          name: 'token',
+          type: 'string',
+          location: 'form-data',
+          required: false,
+          descriptionKey: 'api.params.upload.token'
+        }
+      ],
+      curl: `curl -X POST "${baseUrl}/api/images/upload" \\
+  ${auth} \\
+  -F "image=@./demo.png"`,
+      responseExample: `{
+  "success": true,
+  "items": [
+    {
+      "key": "images/2026/08/abc123.webp",
+      "url": "https://pic.example.com/abc123.webp",
+      "originalName": "demo.png",
+      "contentType": "image/webp",
+      "size": 12345,
+      "uploadedAt": "2026-08-01T12:00:00.000Z",
+      "markdown": "![demo.png](https://pic.example.com/abc123.webp)",
+      "html": "<img src=\\"https://pic.example.com/abc123.webp\\" alt=\\"demo.png\\">"
+    }
+  ],
+  "errors": []
+}`
+    },
+    {
+      id: 'list',
+      category: 'image',
+      method: 'GET',
+      path: '/api/images',
+      titleKey: 'api.docs.list.title',
+      descKey: 'api.docs.list.desc',
+      requiresAuth: true,
+      params: [
+        {
+          name: 'limit',
+          type: 'number',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.list.limit'
+        },
+        {
+          name: 'page',
+          type: 'number',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.list.page'
+        },
+        {
+          name: 'backendId',
+          type: 'string',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.backendId'
+        }
+      ],
+      curl: `curl "${baseUrl}/api/images?limit=20&page=1" \\
+  ${auth}`,
+      responseExample: `{
+  "items": [
+    {
+      "key": "images/2026/08/abc123.webp",
+      "url": "https://pic.example.com/abc123.webp",
+      "originalName": "demo.png",
+      "contentType": "image/webp",
+      "size": 12345,
+      "uploadedAt": "2026-08-01T12:00:00.000Z",
+      "markdown": "![demo.png](https://pic.example.com/abc123.webp)",
+      "html": "<img src=\\"https://pic.example.com/abc123.webp\\" alt=\\"demo.png\\">"
+    }
+  ],
+  "total": 1,
+  "page": 1,
+  "pageSize": 20,
+  "totalPages": 1
+}`
+    },
+    {
+      id: 'search',
+      category: 'image',
+      method: 'GET',
+      path: '/api/images/search',
+      titleKey: 'api.docs.search.title',
+      descKey: 'api.docs.search.desc',
+      requiresAuth: true,
+      params: [
+        {
+          name: 'q',
+          type: 'string',
+          location: 'query',
+          required: true,
+          descriptionKey: 'api.params.search.q'
+        },
+        {
+          name: 'limit',
+          type: 'number',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.list.limit'
+        },
+        {
+          name: 'page',
+          type: 'number',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.list.page'
+        },
+        {
+          name: 'backendId',
+          type: 'string',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.backendId'
+        }
+      ],
+      curl: `curl "${baseUrl}/api/images/search?q=demo&limit=20&page=1" \\
+  ${auth}`,
+      responseExample: `{
+  "items": [],
+  "total": 0,
+  "page": 1,
+  "pageSize": 20,
+  "totalPages": 0
+}`
+    },
+    {
+      id: 'delete',
+      category: 'image',
+      method: 'DELETE',
+      path: '/api/images',
+      titleKey: 'api.docs.delete.title',
+      descKey: 'api.docs.delete.desc',
+      requiresAuth: true,
+      params: [
+        {
+          name: 'key',
+          type: 'string',
+          location: 'query',
+          required: true,
+          descriptionKey: 'api.params.delete.key'
+        }
+      ],
+      curl: `curl -X DELETE "${baseUrl}/api/images?key=images/2026/08/xxxx.webp" \\
+  ${auth}`,
+      responseExample: `{
+  "success": true
+}`
+    },
+    {
+      id: 'batchDelete',
+      category: 'image',
+      method: 'POST',
+      path: '/api/images/batch-delete',
+      titleKey: 'api.docs.batchDelete.title',
+      descKey: 'api.docs.batchDelete.desc',
+      requiresAuth: true,
+      params: [
+        {
+          name: 'keys',
+          type: 'string[]',
+          location: 'body',
+          required: true,
+          descriptionKey: 'api.params.batchDelete.keys'
+        }
+      ],
+      curl: `curl -X POST "${baseUrl}/api/images/batch-delete" \\
+  ${auth} \\
+  -H "Content-Type: application/json" \\
+  -d '{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}'`,
+      responseExample: `{
+  "success": true,
+  "deleted": ["images/2026/08/a.webp"],
+  "failed": []
+}`
+    },
+    {
+      id: 'twikoo',
+      category: 'extension',
+      method: 'POST',
+      path: '/api/index.php',
+      titleKey: 'api.docs.twikoo.title',
+      descKey: 'api.docs.twikoo.desc',
+      requiresAuth: false,
+      params: [
+        {
+          name: 'image',
+          type: 'file',
+          location: 'form-data',
+          required: true,
+          descriptionKey: 'api.params.twikoo.image'
+        },
+        {
+          name: 'token',
+          type: 'string',
+          location: 'form-data',
+          required: true,
+          descriptionKey: 'api.params.twikoo.token'
+        }
+      ],
+      curl: `curl -X POST "${baseUrl}/api/index.php" \\
+  -F "token=${authHeader}" \\
+  -F "image=@./demo.png"`,
+      responseExample: `{
+  "result": "success",
+  "code": 200,
+  "url": "https://pic.example.com/abc123.webp"
+}`
+    },
+    {
+      id: 'config',
+      category: 'system',
+      method: 'GET',
+      path: '/api/auth/config',
+      titleKey: 'api.docs.config.title',
+      descKey: 'api.docs.config.desc',
+      requiresAuth: false,
+      params: [],
+      curl: `curl "${baseUrl}/api/auth/config"`,
+      responseExample: `{
+  "initialized": true,
+  "allowRegistration": false,
+  "legacyMode": false,
+  "adminSecretConfigured": false,
+  "apiUploadTokenConfigured": true
+}`
+    },
+    {
+      id: 'count',
+      category: 'system',
+      method: 'GET',
+      path: '/api/images/count',
+      titleKey: 'api.docs.count.title',
+      descKey: 'api.docs.count.desc',
+      requiresAuth: true,
+      params: [
+        {
+          name: 'backendId',
+          type: 'string',
+          location: 'query',
+          required: false,
+          descriptionKey: 'api.params.backendId'
+        }
+      ],
+      curl: `curl "${baseUrl}/api/images/count" \\
+  ${auth}`,
+      responseExample: `{
+  "total": 42
+}`
+    }
+  ]
+}
@@ -0,0 +1,100 @@
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+export function useAppearanceMenus() {
+  const colorMode = useColorMode()
+  const { locale, locales, setLocale, t } = useI18n()
+
+  const themeIcon = computed(() => {
+    if (colorMode.preference === 'system') return 'i-lucide-monitor'
+    return colorMode.preference === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'
+  })
+
+  const localeMenuItems = computed<DropdownMenuItem[][]>(() => [[
+    ...locales.value.map(loc => ({
+      label: t(`locale.${loc.code}`),
+      icon: 'i-lucide-languages',
+      type: 'checkbox' as const,
+      checked: locale.value === loc.code,
+      onUpdateChecked(checked: boolean) {
+        if (checked && typeof loc.code === 'string') {
+          void setLocale(loc.code)
+        }
+      }
+    }))
+  ]])
+
+  const themeMenuItems = computed<DropdownMenuItem[][]>(() => [[
+    {
+      label: t('theme.light'),
+      icon: 'i-lucide-sun',
+      type: 'checkbox',
+      checked: colorMode.preference === 'light',
+      onUpdateChecked(checked: boolean) {
+        if (checked) colorMode.preference = 'light'
+      }
+    },
+    {
+      label: t('theme.dark'),
+      icon: 'i-lucide-moon',
+      type: 'checkbox',
+      checked: colorMode.preference === 'dark',
+      onUpdateChecked(checked: boolean) {
+        if (checked) colorMode.preference = 'dark'
+      }
+    },
+    {
+      label: t('theme.system'),
+      icon: 'i-lucide-monitor',
+      type: 'checkbox',
+      checked: colorMode.preference === 'system',
+      onUpdateChecked(checked: boolean) {
+        if (checked) colorMode.preference = 'system'
+      }
+    }
+  ]])
+
+  const themeOptions = computed(() => [
+    {
+      value: 'light' as const,
+      label: t('theme.light'),
+      icon: 'i-lucide-sun'
+    },
+    {
+      value: 'dark' as const,
+      label: t('theme.dark'),
+      icon: 'i-lucide-moon'
+    },
+    {
+      value: 'system' as const,
+      label: t('theme.system'),
+      icon: 'i-lucide-monitor'
+    }
+  ])
+
+  const localeOptions = computed(() =>
+    locales.value.map(loc => ({
+      code: String(loc.code),
+      label: t(`locale.${loc.code}`)
+    }))
+  )
+
+  function setThemePreference(value: 'light' | 'dark' | 'system') {
+    colorMode.preference = value
+  }
+
+  async function setLocalePreference(code: string) {
+    if (code === 'zh-CN' || code === 'en') {
+      await setLocale(code)
+    }
+  }
+
+  return {
+    themeIcon,
+    localeMenuItems,
+    themeMenuItems,
+    localeOptions,
+    themeOptions,
+    setThemePreference,
+    setLocalePreference
+  }
+}
@@ -1,3 +1,5 @@
+import type { LoginVerificationPayload } from '~/types/auth'
+
 export type AuthStatus = 'checking' | 'authenticated' | 'unauthenticated'

 export type UserRole = 'admin' | 'user'
@@ -8,11 +10,18 @@ export interface AuthUser {
  role: UserRole
 }

+export interface LoginVerificationPublicConfig {
+  method: 'slider' | 'turnstile' | 'cap'
+  turnstileSiteKey?: string
+  capApiEndpoint?: string
+}
+
 export interface AuthStatusResponse {
  initialized: boolean
  allowRegistration: boolean
  legacyMode: boolean
  needsMigration: boolean
+  loginVerification: LoginVerificationPublicConfig
  user: AuthUser | null
 }

@@ -26,13 +35,15 @@ export function isUnauthorizedError(error: unknown): boolean {
 export const AUTH_USERNAME_PATTERN = /^[a-zA-Z0-9_]{3,32}$/
 export const AUTH_MIN_PASSWORD_LENGTH = 8

-export function validateAuthInput(username: string, password: string): string | null {
+export type AuthValidationErrorKey = 'invalidUsername' | 'invalidPassword'
+
+export function validateAuthInput(username: string, password: string): AuthValidationErrorKey | null {
  const trimmed = username.trim()
  if (!AUTH_USERNAME_PATTERN.test(trimmed)) {
-    return '用户名需为 3–32 位字母、数字或下划线'
+    return 'invalidUsername'
  }
  if (password.length < AUTH_MIN_PASSWORD_LENGTH) {
-    return '密码至少 8 位'
+    return 'invalidPassword'
  }
  return null
 }
@@ -64,12 +75,30 @@ export function getFetchErrorMessage(error: unknown, fallback: string): string {

 export type AuthActionResult = { ok: true } | { ok: false, error: string }

+export type { LoginVerificationPayload }
+
+function buildVerificationBody(verification: LoginVerificationPayload): Record<string, unknown> {
+  if (verification.method === 'slider') {
+    return {
+      captchaId: verification.captchaId,
+      captchaPosition: verification.captchaPosition
+    }
+  }
+  if (verification.method === 'turnstile') {
+    return { turnstileToken: verification.turnstileToken }
+  }
+  return { capToken: verification.capToken }
+}
+
 export function useAuth() {
+  const { t } = useI18n()
  const status = useState<AuthStatus>('auth-status', () => 'checking')
  const user = useState<AuthUser | null>('auth-user', () => null)
  const authStatus = useState<AuthStatusResponse | null>('auth-status-response', () => null)
+  /** 是否已完成至少一次会话校验（用于避免路由切换时反复全屏 loading） */
+  const hasValidatedOnce = useState('auth-validated-once', () => false)

-  const isChecking = computed(() => status.value === 'checking')
+  const isChecking = computed(() => status.value === 'checking' && !hasValidatedOnce.value)
  const isAuthenticated = computed(() => status.value === 'authenticated')
  const isAdmin = computed(() => user.value?.role === 'admin')

@@ -81,10 +110,14 @@ export function useAuth() {
    return data
  }

-  async function checkSession() {
-    status.value = 'checking'
+  async function checkSession(options?: { force?: boolean }) {
+    const silent = !options?.force && hasValidatedOnce.value
+    if (!silent) {
+      status.value = 'checking'
+    }
    try {
      const data = await fetchStatus()
+      hasValidatedOnce.value = true
      if (data.user) {
        user.value = data.user
        status.value = 'authenticated'
@@ -94,6 +127,7 @@ export function useAuth() {
      status.value = 'unauthenticated'
      return false
    } catch {
+      hasValidatedOnce.value = true
      user.value = null
      status.value = 'unauthenticated'
      return false
@@ -107,7 +141,8 @@ export function useAuth() {

  async function login(
    credentials: { username: string, password: string }
-      | { secret: string }
+      | { secret: string },
+    verification: LoginVerificationPayload
  ): Promise<{ ok: boolean, needsMigration?: boolean, error?: string }> {
    try {
      const result = await $fetch<{
@@ -117,7 +152,10 @@ export function useAuth() {
      }>('/api/auth/login', {
        method: 'POST',
        credentials: 'include',
-        body: credentials
+        body: {
+          ...credentials,
+          ...buildVerificationBody(verification)
+        }
      })
      if (result.needsMigration) {
        return { ok: true, needsMigration: true }
@@ -126,23 +164,25 @@ export function useAuth() {
        user.value = result.user
      }
      status.value = 'authenticated'
+      hasValidatedOnce.value = true
      await fetchStatus()
      return { ok: true }
    } catch (error: unknown) {
      return {
        ok: false,
-        error: getFetchErrorMessage(error, '登录失败，请检查用户名和密码')
+        error: getFetchErrorMessage(error, t('auth.loginFailed'))
      }
    }
  }

  async function register(
    username: string,
-    password: string
+    password: string,
+    verification: LoginVerificationPayload
  ): Promise<AuthActionResult> {
    const validationError = validateAuthInput(username, password)
    if (validationError) {
-      return { ok: false, error: validationError }
+      return { ok: false, error: t(`auth.errors.${validationError}`) }
    }

    try {
@@ -151,17 +191,22 @@ export function useAuth() {
        {
          method: 'POST',
          credentials: 'include',
-          body: { username: username.trim(), password }
+          body: {
+            username: username.trim(),
+            password,
+            ...buildVerificationBody(verification)
+          }
        }
      )
      user.value = result.user
      status.value = 'authenticated'
+      hasValidatedOnce.value = true
      await fetchStatus()
      return { ok: true }
    } catch (error: unknown) {
      return {
        ok: false,
-        error: getFetchErrorMessage(error, '注册失败，请检查输入')
+        error: getFetchErrorMessage(error, t('auth.registerFailed'))
      }
    }
  }
@@ -170,10 +215,13 @@ export function useAuth() {
    username: string
    password: string
    allowRegistration: boolean
+    domainSeparation?: boolean
+    siteBaseUrl?: string
+    imageBaseUrl?: string
  }): Promise<AuthActionResult> {
    const validationError = validateAuthInput(input.username, input.password)
    if (validationError) {
-      return { ok: false, error: validationError }
+      return { ok: false, error: t(`auth.errors.${validationError}`) }
    }

    try {
@@ -185,18 +233,22 @@ export function useAuth() {
          body: {
            username: input.username.trim(),
            password: input.password,
-            allowRegistration: input.allowRegistration
+            allowRegistration: input.allowRegistration,
+            domainSeparation: input.domainSeparation,
+            siteBaseUrl: input.siteBaseUrl,
+            imageBaseUrl: input.imageBaseUrl
          }
        }
      )
      user.value = result.user
      status.value = 'authenticated'
+      hasValidatedOnce.value = true
      await fetchStatus()
      return { ok: true }
    } catch (error: unknown) {
      return {
        ok: false,
-        error: getFetchErrorMessage(error, '初始化失败，请检查输入')
+        error: getFetchErrorMessage(error, t('auth.setupFailed'))
      }
    }
  }
@@ -208,7 +260,7 @@ export function useAuth() {
  }): Promise<AuthActionResult> {
    const validationError = validateAuthInput(input.username, input.password)
    if (validationError) {
-      return { ok: false, error: validationError }
+      return { ok: false, error: t(`auth.errors.${validationError}`) }
    }

    try {
@@ -226,12 +278,13 @@ export function useAuth() {
      )
      user.value = result.user
      status.value = 'authenticated'
+      hasValidatedOnce.value = true
      await fetchStatus()
      return { ok: true }
    } catch (error: unknown) {
      return {
        ok: false,
-        error: getFetchErrorMessage(error, '迁移失败，请检查输入')
+        error: getFetchErrorMessage(error, t('auth.migrateFailed'))
      }
    }
  }
@@ -241,7 +294,7 @@ export function useAuth() {
    newPassword: string
  ): Promise<AuthActionResult> {
    if (newPassword.length < AUTH_MIN_PASSWORD_LENGTH) {
-      return { ok: false, error: '新密码至少 8 位' }
+      return { ok: false, error: t('password.tooShort') }
    }

    try {
@@ -254,20 +307,25 @@ export function useAuth() {
    } catch (error: unknown) {
      return {
        ok: false,
-        error: getFetchErrorMessage(error, '修改密码失败')
+        error: getFetchErrorMessage(error, t('password.changeFailed'))
      }
    }
  }

  async function logout() {
    try {
-      await $fetch('/api/auth/logout', { method: 'POST' })
+      await $fetch('/api/auth/logout', { method: 'POST', credentials: 'include' })
    } catch {
      // 忽略登出失败
    } finally {
      status.value = 'unauthenticated'
      user.value = null
-      authStatus.value = null
+      hasValidatedOnce.value = true
+    }
+    try {
+      await fetchStatus()
+    } catch {
+      // 保留既有公开配置（loginVerification 等）
    }
  }

@@ -1,10 +1,55 @@
-export function useFileSize() {
-  function formatFileSize(bytes: number): string {
-    if (!Number.isFinite(bytes) || bytes < 0) return '-'
-    if (bytes < 1024) return `${bytes} B`
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
+export const QUOTA_UNITS = ['KB', 'MB', 'GB', 'TB'] as const
+export type QuotaUnit = typeof QUOTA_UNITS[number]
+
+export function formatFileSize(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes < 0) return '-'
+  if (bytes === 0) return '0 B'
+  if (bytes < 1024) return `${bytes} B`
+
+  const units = ['KB', 'MB', 'GB', 'TB'] as const
+  let value = bytes / 1024
+  let unitIndex = 0
+
+  while (unitIndex < units.length - 1 && value >= 1024) {
+    value /= 1024
+    unitIndex++
  }

-  return { formatFileSize }
+  const decimals = value >= 100 ? 0 : value >= 10 ? 1 : 2
+  return `${value.toFixed(decimals)} ${units[unitIndex]}`
+}
+
+export function bytesToQuotaInput(bytes: number | null): { value: string, unit: QuotaUnit } {
+  if (!bytes || bytes <= 0) {
+    return { value: '', unit: 'GB' }
+  }
+
+  let value = bytes / 1024
+  let unitIndex = 0
+
+  while (unitIndex < QUOTA_UNITS.length - 1 && value >= 1024) {
+    value /= 1024
+    unitIndex++
+  }
+
+  const decimals = value >= 100 ? 0 : value >= 10 ? 1 : 2
+  const rounded = Number(value.toFixed(decimals))
+  const unit: QuotaUnit = QUOTA_UNITS[unitIndex] ?? 'GB'
+  return { value: String(rounded), unit }
+}
+
+export function quotaToBytes(value: string | number, unit: QuotaUnit): number | null {
+  const trimmed = String(value ?? '').trim()
+  if (!trimmed) return null
+  const amount = Number(trimmed)
+  if (!Number.isFinite(amount) || amount <= 0) return null
+
+  const unitIndex = QUOTA_UNITS.indexOf(unit)
+  if (unitIndex < 0) return null
+
+  return Math.round(amount * 1024 ** (unitIndex + 1))
+}
+
+export function useFileSize() {
+  return { formatFileSize, bytesToQuotaInput, quotaToBytes, QUOTA_UNITS }
 }
@@ -3,30 +3,68 @@ import type {
  ImageListResponse
 } from '~/types/image'

-const PAGE_SIZE = 12
+const PAGE_SIZE_DEFAULT = 10

 export function useImageList() {
+  const { t } = useI18n()
  const items = ref<ImageItem[]>([])
  const page = ref(1)
+  const pageSize = ref(PAGE_SIZE_DEFAULT)
  const totalPages = ref(1)
  const total = ref(0)
  const loading = ref(false)
-  const folderTotal = ref<number | null>(null)
+  const totalCount = ref<number | null>(null)
  const loadingTotal = ref(false)
  const searchQuery = ref('')
  const activeSearch = ref('')
-  const activeFolder = ref('all')
+  const activeStorageBackend = ref('all')
+  const activeContentType = ref('all')
+  const activeUploadSource = ref('all')
+  const storageBackendOptions = ref<Array<{ id: string, name: string }>>([])

-  function folderQueryParams(): Record<string, string> {
-    const folder = activeFolder.value.trim()
-    if (!folder || folder === 'all') return {}
-    return { folder }
+  function storageQueryParams(): Record<string, string> {
+    const backendId = activeStorageBackend.value.trim()
+    if (!backendId || backendId === 'all') return {}
+    return { backendId }
  }

-  function matchesActiveFolder(key: string) {
-    const folder = activeFolder.value.trim()
-    if (!folder || folder === 'all') return true
-    return key.startsWith(`${folder}/`)
+  function filterQueryParams(): Record<string, string> {
+    const params: Record<string, string> = { ...storageQueryParams() }
+    const contentType = activeContentType.value.trim()
+    if (contentType && contentType !== 'all') {
+      params.contentType = contentType
+    }
+    const uploadSource = activeUploadSource.value.trim()
+    if (uploadSource && uploadSource !== 'all') {
+      params.uploadSource = uploadSource
+    }
+    return params
+  }
+
+  function listQueryParams(): Record<string, string> {
+    return filterQueryParams()
+  }
+
+  function matchesActiveStorage(item: ImageItem) {
+    const backendId = activeStorageBackend.value.trim()
+    if (!backendId || backendId === 'all') return true
+    return item.storage?.id === backendId
+  }
+
+  async function loadStorageBackendOptions() {
+    try {
+      const data = await $fetch<{
+        backends: Array<{ id: string, name: string, type: string }>
+      }>('/api/storage-backends', {
+        credentials: 'include'
+      })
+      storageBackendOptions.value = data.backends.map(backend => ({
+        id: backend.id,
+        name: backend.name
+      }))
+    } catch {
+      storageBackendOptions.value = []
+    }
  }

  async function fetchTotal() {
@@ -34,11 +72,11 @@ export function useImageList() {
    try {
      const data = await $fetch<{ total: number }>('/api/images/count', {
        credentials: 'include',
-        query: folderQueryParams()
+        query: listQueryParams()
      })
-      folderTotal.value = data.total
+      totalCount.value = data.total
    } catch {
-      folderTotal.value = null
+      totalCount.value = null
    } finally {
      loadingTotal.value = false
    }
@@ -50,9 +88,9 @@ export function useImageList() {
      const response = await $fetch<ImageListResponse>('/api/images', {
        credentials: 'include',
        query: {
-          limit: PAGE_SIZE,
+          limit: pageSize.value,
          page: targetPage,
-          ...folderQueryParams()
+          ...listQueryParams()
        }
      })

@@ -78,9 +116,9 @@ export function useImageList() {
        credentials: 'include',
        query: {
          q,
-          limit: PAGE_SIZE,
+          limit: pageSize.value,
          page: targetPage,
-          ...folderQueryParams()
+          ...listQueryParams()
        }
      })

@@ -100,19 +138,17 @@ export function useImageList() {
    await Promise.all([fetchList(1), fetchTotal()])
  }

-  async function initializeList(folder = 'all') {
-    const next = folder.trim() || 'all'
-    activeFolder.value = next
+  async function initializeList() {
    page.value = 1
    activeSearch.value = ''
    searchQuery.value = ''
-    await Promise.all([fetchList(1), fetchTotal()])
+    await Promise.all([fetchList(1), fetchTotal(), loadStorageBackendOptions()])
  }

-  async function setActiveFolder(folder: string) {
-    const next = folder.trim() || 'all'
-    if (next === activeFolder.value) return
-    activeFolder.value = next
+  async function setActiveStorageBackend(backendId: string) {
+    const next = backendId.trim() || 'all'
+    if (next === activeStorageBackend.value) return
+    activeStorageBackend.value = next
    page.value = 1
    if (activeSearch.value) {
      await Promise.all([fetchSearch(1), fetchTotal()])
@@ -121,6 +157,40 @@ export function useImageList() {
    }
  }

+  async function setActiveContentType(contentType: string) {
+    const next = contentType.trim() || 'all'
+    if (next === activeContentType.value) return
+    activeContentType.value = next
+    page.value = 1
+    if (activeSearch.value) {
+      await Promise.all([fetchSearch(1), fetchTotal()])
+    } else {
+      await Promise.all([fetchList(1), fetchTotal()])
+    }
+  }
+
+  async function setActiveUploadSource(uploadSource: string) {
+    const next = uploadSource.trim() || 'all'
+    if (next === activeUploadSource.value) return
+    activeUploadSource.value = next
+    page.value = 1
+    if (activeSearch.value) {
+      await Promise.all([fetchSearch(1), fetchTotal()])
+    } else {
+      await Promise.all([fetchList(1), fetchTotal()])
+    }
+  }
+
+  async function resetFilters() {
+    searchQuery.value = ''
+    activeSearch.value = ''
+    activeStorageBackend.value = 'all'
+    activeContentType.value = 'all'
+    activeUploadSource.value = 'all'
+    page.value = 1
+    await Promise.all([fetchList(1), fetchTotal()])
+  }
+
  async function submitSearch() {
    const q = searchQuery.value.trim()
    activeSearch.value = q
@@ -141,13 +211,24 @@ export function useImageList() {
    }
  }

+  async function setPageSize(size: number) {
+    if (!Number.isFinite(size) || size <= 0 || size === pageSize.value) return
+    pageSize.value = size
+    page.value = 1
+    if (activeSearch.value) {
+      await Promise.all([fetchSearch(1), fetchTotal()])
+    } else {
+      await Promise.all([fetchList(1), fetchTotal()])
+    }
+  }
+
  function prependItems(newItems: ImageItem[]) {
-    const matched = newItems.filter(item => matchesActiveFolder(item.key))
+    const matched = newItems.filter(item => matchesActiveStorage(item))
    if (!matched.length || page.value !== 1) return
    items.value = [...matched, ...items.value]
    total.value += matched.length
-    if (folderTotal.value !== null) {
-      folderTotal.value += matched.length
+    if (totalCount.value !== null) {
+      totalCount.value += matched.length
    }
  }

@@ -158,43 +239,72 @@ export function useImageList() {
    if (removed > 0) {
      total.value = Math.max(0, total.value - removed)
    }
-    if (folderTotal.value !== null && removed > 0) {
-      folderTotal.value = Math.max(0, folderTotal.value - removed)
+    if (totalCount.value !== null && removed > 0) {
+      totalCount.value = Math.max(0, totalCount.value - removed)
    }
  }

+  const activeStorageLabel = computed(() => {
+    if (activeStorageBackend.value === 'all') return ''
+    return storageBackendOptions.value.find(
+      backend => backend.id === activeStorageBackend.value
+    )?.name ?? activeStorageBackend.value
+  })
+
  const listSummary = computed(() => {
-    const folder = activeFolder.value.trim() || 'all'
-    const folderLabel = folder === 'all' ? '全部' : folder
-    if (loadingTotal.value && folderTotal.value === null) {
-      return `${folderLabel} · 统计中…`
+    const storageLabel = activeStorageLabel.value
+    if (loadingTotal.value && totalCount.value === null) {
+      return storageLabel
+        ? `${storageLabel} · ${t('stats.counting')}`
+        : t('stats.counting')
    }
    if (activeSearch.value) {
-      return `${folderLabel} · 搜索「${activeSearch.value}」· 共 ${total.value} 张`
+      if (storageLabel) {
+        return t('stats.summarySearchStorage', {
+          q: activeSearch.value,
+          total: total.value,
+          storage: storageLabel
+        })
+      }
+      return t('stats.summarySearch', { q: activeSearch.value, total: total.value })
    }
-    if (folderTotal.value === null) {
-      return `${folderLabel} · 共 ${total.value} 张`
+    const count = totalCount.value === null ? total.value : totalCount.value
+    if (storageLabel) {
+      return t('stats.summaryTotalStorage', {
+        total: count,
+        storage: storageLabel
+      })
    }
-    return `${folderLabel} · 共 ${folderTotal.value} 张`
+    return t('stats.summaryTotal', { total: count })
  })

  return {
    items,
    page,
+    pageSize,
    totalPages,
    total,
    loading,
-    activeFolder,
+    activeStorageBackend,
+    activeContentType,
+    activeUploadSource,
+    storageBackendOptions,
    searchQuery,
    activeSearch,
    listSummary,
    fetchList,
+    fetchSearch,
    fetchTotal,
    refreshList,
    initializeList,
-    setActiveFolder,
+    setActiveStorageBackend,
+    setActiveContentType,
+    setActiveUploadSource,
+    resetFilters,
+    loadStorageBackendOptions,
    submitSearch,
    goToPage,
+    setPageSize,
    prependItems,
    removeItems
  }
@@ -9,6 +9,7 @@ const MAX_FILES = 10

 export function useImageUpload() {
  const toast = useToast()
+  const { t } = useI18n()
  const { compressEnabled, clientWebpQuality } = useUploadPreferences()
  const uploading = ref(false)
  const progressItems = ref<UploadProgressItem[]>([])
@@ -16,19 +17,18 @@ export function useImageUpload() {

  async function uploadFiles(
    files: File[],
-    folder = 'images',
-    options?: { notify?: boolean, includeFolder?: boolean }
+    options?: { notify?: boolean }
  ) {
    if (uploading.value) return

    if (!files.length) {
-      toast.add({ title: '请选择图片', color: 'warning' })
+      toast.add({ title: t('upload.selectImages'), color: 'warning' })
      return
    }

    if (files.length > MAX_FILES) {
      toast.add({
-        title: `每次最多上传 ${MAX_FILES} 张图片`,
+        title: t('upload.maxFiles', { n: MAX_FILES }),
        color: 'warning'
      })
      return
@@ -54,9 +54,6 @@ export function useImageUpload() {
      }))

      const formData = new FormData()
-      if (options?.includeFolder !== false) {
-        formData.append('folder', folder.trim() || 'images')
-      }
      for (const file of prepared) {
        formData.append('files', file, file.name)
      }
@@ -80,14 +77,14 @@ export function useImageUpload() {

      if (response.items.length && options?.notify !== false) {
        toast.add({
-          title: `成功上传 ${response.items.length} 张图片`,
+          title: t('upload.uploadSuccess', { n: response.items.length }),
          color: 'success'
        })
      }

      if (response.errors.length) {
        toast.add({
-          title: `${response.errors.length} 张图片上传失败`,
+          title: t('upload.uploadPartialFail', { n: response.errors.length }),
          color: 'warning'
        })
      }
@@ -97,7 +94,7 @@ export function useImageUpload() {
      if (isUnauthorizedError(error)) {
        throw error
      }
-      const message = error instanceof Error ? error.message : '上传失败'
+      const message = error instanceof Error ? error.message : t('upload.uploadFailed')
      progressItems.value = progressItems.value.map(item => ({
        ...item,
        status: 'error',
@@ -3,7 +3,6 @@ const STORAGE_KEY = 'pichost.upload-preferences'
 export type CopyFormat = 'url' | 'markdown' | 'html'

 export interface UploadPreferences {
-  defaultFolder: string
  compressEnabled: boolean
  autoCopyMarkdown: boolean
  copyFormat: CopyFormat
@@ -11,7 +10,6 @@ export interface UploadPreferences {
 }

 const DEFAULTS: UploadPreferences = {
-  defaultFolder: 'images',
  compressEnabled: false,
  autoCopyMarkdown: false,
  copyFormat: 'markdown',
@@ -36,9 +34,6 @@ function readStored(): UploadPreferences {
    if (!raw) return { ...DEFAULTS }
    const parsed = JSON.parse(raw) as Partial<UploadPreferences>
    return {
-      defaultFolder: typeof parsed.defaultFolder === 'string' && parsed.defaultFolder.trim()
-        ? parsed.defaultFolder.trim()
-        : DEFAULTS.defaultFolder,
      compressEnabled: parsed.compressEnabled === true,
      autoCopyMarkdown: parsed.autoCopyMarkdown === true,
      copyFormat: isCopyFormat(parsed.copyFormat) ? parsed.copyFormat : DEFAULTS.copyFormat,
@@ -55,7 +50,6 @@ function writeStored(prefs: UploadPreferences) {
 }

 export function useUploadPreferences() {
-  const defaultFolder = useState('upload-pref-folder', () => DEFAULTS.defaultFolder)
  const compressEnabled = useState('upload-pref-compress', () => DEFAULTS.compressEnabled)
  const autoCopyMarkdown = useState('upload-pref-auto-md', () => DEFAULTS.autoCopyMarkdown)
  const copyFormat = useState<CopyFormat>('upload-pref-copy-format', () => DEFAULTS.copyFormat)
@@ -64,7 +58,6 @@ export function useUploadPreferences() {

  function loadPreferences() {
    const stored = readStored()
-    defaultFolder.value = stored.defaultFolder
    compressEnabled.value = stored.compressEnabled
    autoCopyMarkdown.value = stored.autoCopyMarkdown
    copyFormat.value = stored.copyFormat
@@ -72,9 +65,12 @@ export function useUploadPreferences() {
    loaded.value = true
  }

+  if (import.meta.client && !loaded.value) {
+    loadPreferences()
+  }
+
  function savePreferences() {
    writeStored({
-      defaultFolder: defaultFolder.value.trim() || DEFAULTS.defaultFolder,
      compressEnabled: compressEnabled.value,
      autoCopyMarkdown: autoCopyMarkdown.value,
      copyFormat: copyFormat.value,
@@ -82,14 +78,13 @@ export function useUploadPreferences() {
    })
  }

-  watch([defaultFolder, compressEnabled, autoCopyMarkdown, copyFormat, clientWebpQuality], () => {
+  watch([compressEnabled, autoCopyMarkdown, copyFormat, clientWebpQuality], () => {
    if (loaded.value) {
      savePreferences()
    }
  })

  return {
-    defaultFolder,
    compressEnabled,
    autoCopyMarkdown,
    copyFormat,
@@ -1,6 +1,7 @@
 export function useUserAutoDeleteSettings() {
  const { isAuthenticated, handleAuthError } = useAuth()
  const toast = useToast()
+  const { t } = useI18n()

  const userSettings = ref<{ autoDeleteDays: number } | null>(null)
  const enabled = ref(false)
@@ -29,7 +30,7 @@ export function useUserAutoDeleteSettings() {
    } catch (error: unknown) {
      handleAuthError(error)
      if (isAuthenticated.value) {
-        toast.add({ title: '加载设置失败', color: 'error' })
+        toast.add({ title: t('userSettings.loadFailed'), color: 'error' })
      }
    }
  }
@@ -51,7 +52,7 @@ export function useUserAutoDeleteSettings() {
    } catch (error: unknown) {
      handleAuthError(error)
      if (isAuthenticated.value) {
-        toast.add({ title: '保存设置失败', color: 'error' })
+        toast.add({ title: t('userSettings.saveFailed'), color: 'error' })
      }
    } finally {
      saving.value = false
@@ -10,6 +10,7 @@ const {
  changePassword
 } = useAuth()
 const toast = useToast()
+const { t } = useI18n()

 const currentPassword = ref('')
 const newPassword = ref('')
@@ -37,7 +38,7 @@ async function submit() {
  if (!canSubmit.value || loading.value) return

  if (newPassword.value !== confirmPassword.value) {
-    toast.add({ title: '两次输入的新密码不一致', color: 'error' })
+    toast.add({ title: t('auth.passwordMismatch'), color: 'error' })
    return
  }

@@ -48,7 +49,7 @@ async function submit() {
      currentPassword.value = ''
      newPassword.value = ''
      confirmPassword.value = ''
-      toast.add({ title: '密码已修改', color: 'success' })
+      toast.add({ title: t('password.changed'), color: 'success' })
      await router.replace('/')
    } else {
      toast.add({ title: result.error, color: 'error' })
@@ -71,7 +72,7 @@ async function submit() {
          class="size-8 animate-spin"
        />
        <p class="text-sm">
-          正在验证登录状态…
+          {{ t('common.loadingSession') }}
        </p>
      </div>
    </div>
@@ -82,10 +83,10 @@ async function submit() {
      <section class="mx-auto max-w-md overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
        <div class="border-b border-default px-5 py-4 sm:px-6">
          <h1 class="text-lg font-semibold tracking-tight">
-            修改密码
+            {{ t('password.title') }}
          </h1>
          <p class="mt-1 text-sm text-muted">
-            修改您的登录密码
+            {{ t('password.subtitle') }}
          </p>
        </div>

@@ -98,16 +99,12 @@ async function submit() {
              for="current-password"
              class="block text-sm font-medium"
            >
-              当前密码
+              {{ t('password.current') }}
            </label>
-            <UInput
+            <PasswordInput
              id="current-password"
              v-model="currentPassword"
-              type="password"
              autocomplete="current-password"
-              size="lg"
-              class="w-full"
-              :ui="{ root: 'w-full' }"
            />
          </div>

@@ -116,17 +113,13 @@ async function submit() {
              for="new-password"
              class="block text-sm font-medium"
            >
-              新密码
+              {{ t('password.new') }}
            </label>
-            <UInput
+            <PasswordInput
              id="new-password"
              v-model="newPassword"
-              type="password"
-              placeholder="设置新密码"
+              :placeholder="t('password.newPlaceholder')"
              autocomplete="new-password"
-              size="lg"
-              class="w-full"
-              :ui="{ root: 'w-full' }"
            />
            <PasswordStrength :password="newPassword" />
          </div>
@@ -136,29 +129,25 @@ async function submit() {
              for="confirm-new-password"
              class="block text-sm font-medium"
            >
-              确认新密码
+              {{ t('password.confirmNew') }}
            </label>
-            <UInput
+            <PasswordInput
              id="confirm-new-password"
              v-model="confirmPassword"
-              type="password"
              autocomplete="new-password"
-              size="lg"
-              class="w-full"
-              :ui="{ root: 'w-full' }"
            />
          </div>

          <div class="flex gap-2 pt-1">
            <UButton
              type="submit"
-              label="保存"
+              :label="t('common.save')"
              icon="i-lucide-save"
              :loading="loading"
              :disabled="!canSubmit"
            />
            <UButton
-              label="取消"
+              :label="t('common.cancel')"
              variant="ghost"
              color="neutral"
              to="/"
@@ -6,22 +6,15 @@ interface SettingsResponse {
  env: {
    webpQuality: number
    refererConfigured: boolean
+    siteBaseUrl: string
    imageBaseUrl: string
    appVersion: string
  }
 }

-interface ApiDocItem {
-  index: number
-  method: 'GET' | 'POST' | 'DELETE'
-  path: string
-  title: string
-  description: string
-  curl: string
-}
-
 const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
 const toast = useToast()
+const { t } = useI18n()

 const settings = ref<SettingsResponse | null>(null)
 const loading = ref(false)
@@ -29,8 +22,11 @@ const regenerating = ref(false)
 const confirmRegenerateOpen = ref(false)
 const regenerateResultOpen = ref(false)
 const newToken = ref('')
+const activeEndpointId = ref('upload')

 const baseUrl = computed(() => {
+  const configured = settings.value?.env.siteBaseUrl
+  if (configured) return configured
  if (import.meta.client) {
    return window.location.origin
  }
@@ -39,125 +35,24 @@ const baseUrl = computed(() => {

 const tokenDisplay = computed(() => settings.value?.apiUploadToken ?? '')
 const hasToken = computed(() => tokenDisplay.value.length > 0)
-const canRegenerate = computed(() => !settings.value?.envTokenOverride && !loading.value)
+const canRegenerate = computed(() =>
+  !settings.value?.envTokenOverride && !loading.value
+)

 const authHeader = computed(() =>
  hasToken.value ? tokenDisplay.value : 'YOUR-TOKEN'
 )

-const authHeaderFlag = computed(() => `-H 'Auth-Token: ${authHeader.value}'`)
+const apiDocs = computed(() =>
+  buildApiDocs({
+    baseUrl: baseUrl.value,
+    authHeader: authHeader.value
+  })
+)

-const apiDocs = computed<ApiDocItem[]>(() => {
-  const uploadDescription = isAdmin.value
-    ? '上传单张或多张图片。字段 image 传图片，folder 指定目录（不存在则自动创建）；仍兼容 file、files、type。'
-    : '上传单张或多张图片。字段 image 传图片；仍兼容 file、files。图片固定存入 images/ 目录。'
-  const uploadCurl = isAdmin.value
-    ? `curl -X POST "${baseUrl.value}/api/images/upload" \\
-  ${authHeaderFlag.value} \\
-  -F "image=@./demo.png"
-
-# 上传到自定义目录 blog/
-curl -X POST "${baseUrl.value}/api/images/upload" \\
-  ${authHeaderFlag.value} \\
-  -F "folder=blog" \\
-  -F "image=@./demo.png"`
-    : `curl -X POST "${baseUrl.value}/api/images/upload" \\
-  ${authHeaderFlag.value} \\
-  -F "image=@./demo.png"`
-
-  const listDescription = isAdmin.value
-    ? '分页列出图库，folder 可筛选目录，limit 默认 20、最大 100。'
-    : '分页列出您的图库，limit 默认 20、最大 100。'
-  const listCurl = isAdmin.value
-    ? `curl "${baseUrl.value}/api/images?limit=20&page=1" \\
-  ${authHeaderFlag.value}
-
-# 按目录筛选
-curl "${baseUrl.value}/api/images?folder=blog&limit=20&page=1" \\
-  ${authHeaderFlag.value}`
-    : `curl "${baseUrl.value}/api/images?limit=20&page=1" \\
-  ${authHeaderFlag.value}`
-
-  return [
-    {
-      index: 1,
-      method: 'POST',
-      path: '/api/images/upload',
-      title: '上传图片',
-      description: uploadDescription,
-      curl: uploadCurl
-    },
-    {
-      index: 2,
-      method: 'GET',
-      path: '/api/images',
-      title: '获取图片列表',
-      description: listDescription,
-      curl: listCurl
-    },
-    {
-      index: 3,
-      method: 'GET',
-      path: '/api/images/search',
-      title: '搜索图片',
-      description: '按文件名或路径关键词搜索，参数 q 必填。',
-      curl: `curl "${baseUrl.value}/api/images/search?q=demo&limit=20&page=1" \\
-  ${authHeaderFlag.value}`
-    },
-    {
-      index: 4,
-      method: 'DELETE',
-      path: '/api/images',
-      title: '删除图片',
-      description: '通过 key 删除单张图片，key 为存储路径（如 images/2026/08/xxx.webp）。',
-      curl: `curl -X DELETE "${baseUrl.value}/api/images?key=images/2026/08/xxxx.webp" \\
-  ${authHeaderFlag.value}`
-    },
-    {
-      index: 5,
-      method: 'POST',
-      path: '/api/images/batch-delete',
-      title: '批量删除',
-      description: '一次删除多张图片，请求体为 keys 数组。',
-      curl: `curl -X POST "${baseUrl.value}/api/images/batch-delete" \\
-  ${authHeaderFlag.value} \\
-  -H "Content-Type: application/json" \\
-  -d '{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}'`
-    }
-  ]
-})
-
-const twikooDoc = computed(() => ({
-  method: 'POST' as const,
-  path: '/api/index.php',
-  title: 'twikoo 兼容上传',
-  description: '兼容 Twikoo / EasyImage 2.0 协议，图片存入 twikoo/ 目录；字段 image + token。',
-  curl: `curl -X POST "${baseUrl.value}/api/index.php" \\
-  -F "token=${authHeader.value}" \\
-  -F "image=@./demo.png"`
-}))
-
-function tokenSourceLabel(source: SettingsResponse['tokenSource']) {
-  switch (source) {
-    case 'env':
-      return '来源：环境变量 API_UPLOAD_TOKEN'
-    case 'db':
-      return '来源：后台生成（可重新生成）'
-    default:
-      return '来源：未配置'
-  }
-}
-
-function methodBadgeColor(method: ApiDocItem['method']) {
-  switch (method) {
-    case 'GET':
-      return 'info' as const
-    case 'DELETE':
-      return 'error' as const
-    default:
-      return 'primary' as const
-  }
-}
+const activeEndpoint = computed(() =>
+  apiDocs.value.find(endpoint => endpoint.id === activeEndpointId.value) ?? apiDocs.value[0]
+)

 async function loadSettings() {
  loading.value = true
@@ -169,7 +64,7 @@ async function loadSettings() {
  } catch (error: unknown) {
    handleAuthError(error)
    if (isAuthenticated.value) {
-      toast.add({ title: '加载 API 设置失败', color: 'error' })
+      toast.add({ title: t('api.loadFailed'), color: 'error' })
    }
  } finally {
    loading.value = false
@@ -203,11 +98,11 @@ async function confirmRegenerate() {
        : 0
      if (status === 409) {
        toast.add({
-          title: '环境变量已配置 Token，无法在后台重新生成',
+          title: t('api.regenerateEnvBlocked'),
          color: 'warning'
        })
      } else {
-        toast.add({ title: '重新生成 Token 失败', color: 'error' })
+        toast.add({ title: t('api.regenerateFailed'), color: 'error' })
      }
    }
  } finally {
@@ -215,15 +110,6 @@ async function confirmRegenerate() {
  }
 }

-async function copyCurl(text: string) {
-  try {
-    await navigator.clipboard.writeText(text)
-    toast.add({ title: '已复制 cURL 示例', color: 'success' })
-  } catch {
-    toast.add({ title: '复制失败', color: 'error' })
-  }
-}
-
 function closeConfirmRegenerate() {
  confirmRegenerateOpen.value = false
 }
@@ -239,10 +125,13 @@ onMounted(async () => {
    return
  }
  await checkSession()
+  if (isAuthenticated.value) {
+    await loadSettings()
+  }
 })

-watch(isAuthenticated, async (authed) => {
-  if (authed) {
+watch(isAuthenticated, async (authed, prev) => {
+  if (authed && prev === false) {
    await nextTick()
    await loadSettings()
  } else {
@@ -263,7 +152,7 @@ watch(isAuthenticated, async (authed) => {
          class="size-8 animate-spin"
        />
        <p class="text-sm">
-          正在验证登录状态…
+          {{ t('common.loadingSession') }}
        </p>
      </div>
    </div>
@@ -272,214 +161,56 @@ watch(isAuthenticated, async (authed) => {

    <AppShell v-else>
      <section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
-        <div class="flex items-center gap-2 border-b border-default px-5 py-4 sm:px-6">
-          <UIcon
-            name="i-lucide-key-round"
-            class="size-5 text-primary"
-          />
-          <h2 class="text-base font-semibold">
-            API Token
-          </h2>
-        </div>
-
-        <div class="space-y-4 p-5 sm:p-6">
-          <UAlert
-            v-if="settings?.envTokenOverride"
-            color="warning"
-            variant="subtle"
-            icon="i-lucide-triangle-alert"
-            title="Token 由环境变量覆盖"
-            description="修改 API_UPLOAD_TOKEN 后需重启服务；后台无法重新生成。"
+        <div class="flex flex-col lg:flex-row lg:items-stretch">
+          <ApiSidebar
+            :endpoints="apiDocs"
+            :active-id="activeEndpointId"
+            @select="activeEndpointId = $event"
          />

-          <UAlert
-            v-else-if="!isAdmin"
-            color="info"
-            variant="subtle"
-            icon="i-lucide-info"
-            title="个人 API Token"
-            description="此 Token 仅用于您自己的脚本上传，上传的图片归属您的账号。"
-          />
-
-          <UAlert
-            v-else-if="settings && !hasToken"
-            color="info"
-            variant="subtle"
-            icon="i-lucide-info"
-            title="尚未配置 Token"
-            description="点击「重新生成」创建 Token，用于下方所有接口的 Auth-Token 鉴权。"
-          />
-
-          <div class="flex flex-col gap-2 sm:flex-row sm:items-stretch">
-            <UInput
-              :model-value="hasToken ? tokenDisplay : '（未配置）'"
-              readonly
-              class="min-w-0 flex-1 font-mono text-xs sm:text-sm"
+          <div class="flex min-w-0 flex-1 flex-col bg-default lg:border-r lg:border-default">
+            <ApiTokenCard
+              :token="tokenDisplay"
              :loading="loading"
+              :regenerating="regenerating"
+              :can-regenerate="canRegenerate"
+              :token-source="settings?.tokenSource"
+              :env-token-override="settings?.envTokenOverride"
+              :is-admin="isAdmin"
+              @regenerate="requestRegenerate"
+            />
+
+            <ApiDocView
+              v-if="activeEndpoint"
+              :endpoint="activeEndpoint"
            />
-            <div class="flex gap-2">
-              <CopyButton
-                label="复制"
-                :value="tokenDisplay"
-              />
-              <UButton
-                icon="i-lucide-refresh-cw"
-                label="重新生成"
-                color="warning"
-                variant="soft"
-                :loading="regenerating"
-                :disabled="!canRegenerate"
-                @click="requestRegenerate"
-              />
-            </div>
          </div>

-          <p
-            v-if="settings"
-            class="text-xs text-muted"
-          >
-            {{ tokenSourceLabel(settings.tokenSource) }}
-            · 请求头：
-            <code class="font-mono">Auth-Token: &lt;token&gt;</code>
-            <template v-if="hasToken && !settings.envTokenOverride">
-              · 重新生成后旧 Token 立即失效
-            </template>
-          </p>
-        </div>
-      </section>
-
-      <section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
-        <div class="flex items-center gap-2 border-b border-default px-5 py-4 sm:px-6">
-          <UIcon
-            name="i-lucide-book-open"
-            class="size-5 text-primary"
+          <ApiDebugger
+            v-if="activeEndpoint"
+            :endpoint="activeEndpoint"
+            :token="tokenDisplay"
          />
-          <h2 class="text-base font-semibold">
-            API 文档
-          </h2>
-        </div>
-
-        <div class="divide-y divide-default">
-          <article
-            v-for="doc in apiDocs"
-            :key="doc.index"
-            class="space-y-4 p-5 sm:p-6"
-          >
-            <div class="flex gap-3">
-              <span
-                class="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary"
-              >
-                {{ doc.index }}
-              </span>
-              <div class="min-w-0 space-y-2">
-                <div class="flex flex-wrap items-center gap-2">
-                  <UBadge
-                    :color="methodBadgeColor(doc.method)"
-                    variant="subtle"
-                    size="sm"
-                  >
-                    {{ doc.method }}
-                  </UBadge>
-                  <code class="rounded-md border border-primary/20 bg-primary/10 px-2 py-0.5 font-mono text-sm font-medium text-primary">
-                    {{ doc.path }}
-                  </code>
-                  <span class="text-sm font-medium">
-                    {{ doc.title }}
-                  </span>
-                </div>
-                <p class="text-sm leading-relaxed text-muted">
-                  {{ doc.description }}
-                </p>
-              </div>
-            </div>
-
-            <div>
-              <p class="mb-2 text-xs font-medium text-muted">
-                cURL 示例
-              </p>
-              <div class="relative overflow-hidden rounded-xl bg-neutral-950">
-                <UButton
-                  icon="i-lucide-copy"
-                  label="复制"
-                  size="xs"
-                  variant="ghost"
-                  color="neutral"
-                  class="absolute top-2 right-2 z-10 text-neutral-300 hover:text-white"
-                  @click="copyCurl(doc.curl)"
-                />
-                <pre class="max-h-80 overflow-auto p-4 pt-10 text-xs leading-relaxed text-neutral-100"><code class="font-mono">{{ doc.curl }}</code></pre>
-              </div>
-            </div>
-          </article>
-        </div>
-      </section>
-
-      <section class="overflow-hidden rounded-2xl border border-dashed border-default bg-muted/20">
-        <div class="space-y-4 p-5 sm:p-6">
-          <div class="flex gap-3">
-            <UIcon
-              name="i-lucide-message-square"
-              class="mt-0.5 size-5 shrink-0 text-muted"
-            />
-            <div class="min-w-0 space-y-2">
-              <div class="flex flex-wrap items-center gap-2">
-                <UBadge
-                  color="neutral"
-                  variant="subtle"
-                  size="sm"
-                >
-                  {{ twikooDoc.method }}
-                </UBadge>
-                <code class="rounded-md border border-primary/20 bg-primary/10 px-2 py-0.5 font-mono text-sm font-medium text-primary">
-                  {{ twikooDoc.path }}
-                </code>
-                <span class="text-sm font-medium">
-                  {{ twikooDoc.title }}
-                </span>
-              </div>
-              <p class="text-sm leading-relaxed text-muted">
-                {{ twikooDoc.description }}
-              </p>
-            </div>
-          </div>
-
-          <div>
-            <p class="mb-2 text-xs font-medium text-muted">
-              cURL 示例
-            </p>
-            <div class="relative overflow-hidden rounded-xl bg-neutral-950">
-              <UButton
-                icon="i-lucide-copy"
-                label="复制"
-                size="xs"
-                variant="ghost"
-                color="neutral"
-                class="absolute top-2 right-2 z-10 text-neutral-300 hover:text-white"
-                @click="copyCurl(twikooDoc.curl)"
-              />
-              <pre class="overflow-auto p-4 pt-10 text-xs leading-relaxed text-neutral-100"><code class="font-mono">{{ twikooDoc.curl }}</code></pre>
-            </div>
-          </div>
        </div>
      </section>
    </AppShell>

    <UModal
      :open="confirmRegenerateOpen"
-      title="确认重新生成 Token？"
-      description="旧 Token 将立即失效，使用旧 Token 的脚本与自动化任务将无法继续调用接口，直到你更新为新 Token。"
+      :title="t('api.confirmRegenerateTitle')"
+      :description="t('api.confirmRegenerateDesc')"
      @update:open="confirmRegenerateOpen = $event"
    >
      <template #footer>
        <div class="flex justify-end gap-2">
          <UButton
-            label="取消"
+            :label="t('common.cancel')"
            color="neutral"
            variant="outline"
            @click="closeConfirmRegenerate"
          />
          <UButton
-            label="确认重新生成"
+            :label="t('api.confirmRegenerate')"
            color="warning"
            :loading="regenerating"
            @click="confirmRegenerate"
@@ -490,8 +221,8 @@ watch(isAuthenticated, async (authed) => {

    <UModal
      :open="regenerateResultOpen"
-      title="新 Token 已生成"
-      description="请立即复制保存。关闭弹窗后仍可在上方输入框复制，但请尽快更新到你的脚本配置中。"
+      :title="t('api.newTokenTitle')"
+      :description="t('api.newTokenDesc')"
      @update:open="regenerateResultOpen = $event"
    >
      <template #body>
@@ -504,11 +235,11 @@ watch(isAuthenticated, async (authed) => {
      <template #footer>
        <div class="flex w-full flex-wrap justify-end gap-2">
          <CopyButton
-            label="复制 Token"
+            :label="t('api.copyToken')"
            :value="newToken"
          />
          <UButton
-            label="我已保存"
+            :label="t('api.saved')"
            @click="closeRegenerateResult"
          />
        </div>
@@ -0,0 +1,493 @@
+<script setup lang="ts">
+import type { ImageItem } from '~/types/image'
+
+interface StatsResponse {
+  uploadToday: number
+  uploadYesterday: number
+  uploadMonth: number
+  uploadLastMonth: number
+  deleteToday: number
+  deleteMonth: number
+  uploadTotal: number
+  deleteTotal: number
+  uploadBytesTotal: number
+  storedCount: number
+  userCount?: number
+  bySource: {
+    web: number
+    api: number
+  }
+  storageUsage: {
+    usedBytes: number
+    totalBytes: number | null
+    percent: number | null
+  }
+}
+
+const {
+  items,
+  page: galleryPage,
+  pageSize: galleryPageSize,
+  totalPages: galleryTotalPages,
+  total: galleryTotal,
+  loading: galleryLoading,
+  searchQuery,
+  activeSearch,
+  fetchList,
+  fetchSearch,
+  fetchTotal,
+  submitSearch,
+  goToPage,
+  setPageSize,
+  removeItems,
+  activeStorageBackend,
+  setActiveStorageBackend,
+  storageBackendOptions,
+  activeUploadSource,
+  setActiveUploadSource,
+  resetFilters,
+  loadStorageBackendOptions
+} = useImageList()
+
+const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus } = useAuth()
+const toast = useToast()
+const { t } = useI18n()
+
+const stats = ref<StatsResponse | null>(null)
+const statsLoading = ref(false)
+const pageRefreshing = computed(() => statsLoading.value || galleryLoading.value)
+
+const selectedKeys = ref<Set<string>>(new Set())
+const deletingKeys = ref<Set<string>>(new Set())
+const deleteModalOpen = ref(false)
+const deleteTargetKeys = ref<string[]>([])
+const batchDeleting = ref(false)
+const showScrollTop = ref(false)
+const previewOpen = ref(false)
+const previewImage = ref<ImageItem | null>(null)
+const viewMode = ref<'grid' | 'list'>('grid')
+
+const currentUploadSource = ref('all')
+const currentStorageBackend = ref('all')
+
+const uploadSourceItems = computed(() => [
+  { label: t('stats.filterSourceAll'), value: 'all' },
+  { label: t('stats.sourceWeb'), value: 'web' },
+  { label: t('stats.sourceApi'), value: 'api' }
+])
+
+const storageBackendItems = computed(() => [
+  { label: t('stats.filterStorageAll'), value: 'all' },
+  ...storageBackendOptions.value.map(backend => ({
+    label: backend.name,
+    value: backend.id
+  }))
+])
+
+const selectedCount = computed(() => selectedKeys.value.size)
+
+function onWindowScroll() {
+  showScrollTop.value = window.scrollY > 400
+}
+
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+async function fetchStats() {
+  stats.value = await $fetch<StatsResponse>('/api/stats', {
+    credentials: 'include'
+  })
+}
+
+async function refreshStats() {
+  statsLoading.value = true
+  try {
+    await fetchStats()
+  } catch (error: unknown) {
+    handleAuthError(error)
+    if (isAuthenticated.value) {
+      toast.add({ title: t('stats.loadFailed'), color: 'error' })
+    }
+  } finally {
+    statsLoading.value = false
+  }
+}
+
+async function reloadGallery() {
+  if (activeSearch.value) {
+    await fetchSearch(galleryPage.value)
+  } else {
+    await fetchList(galleryPage.value)
+  }
+  await fetchTotal()
+}
+
+async function refreshAll() {
+  if (!isAuthenticated.value) return
+  selectedKeys.value = new Set()
+  statsLoading.value = true
+  try {
+    await Promise.all([
+      fetchStats(),
+      reloadGallery(),
+      loadStorageBackendOptions()
+    ])
+    currentUploadSource.value = activeUploadSource.value
+    currentStorageBackend.value = activeStorageBackend.value
+  } catch (error: unknown) {
+    handleAuthError(error)
+    if (isAuthenticated.value) {
+      toast.add({ title: t('stats.loadFailed'), color: 'error' })
+    }
+  } finally {
+    statsLoading.value = false
+  }
+}
+
+async function handleStorageBackendChange(backendId: string) {
+  if (!isAuthenticated.value) return
+  currentStorageBackend.value = backendId
+  selectedKeys.value = new Set()
+  try {
+    await setActiveStorageBackend(backendId)
+  } catch (error: unknown) {
+    handleAuthError(error)
+  }
+}
+
+async function handleUploadSourceChange(uploadSource: string) {
+  if (!isAuthenticated.value) return
+  currentUploadSource.value = uploadSource
+  selectedKeys.value = new Set()
+  try {
+    await setActiveUploadSource(uploadSource)
+  } catch (error: unknown) {
+    handleAuthError(error)
+  }
+}
+
+async function handleResetFilters() {
+  if (!isAuthenticated.value) return
+  selectedKeys.value = new Set()
+  currentUploadSource.value = 'all'
+  currentStorageBackend.value = 'all'
+  try {
+    await resetFilters()
+  } catch (error: unknown) {
+    handleAuthError(error)
+  }
+}
+
+function updateSelectedKeys(keys: Set<string>) {
+  selectedKeys.value = keys
+}
+
+async function handleSearch() {
+  if (!isAuthenticated.value) return
+  selectedKeys.value = new Set()
+  try {
+    await submitSearch()
+  } catch (error: unknown) {
+    handleAuthError(error)
+  }
+}
+
+function requestDelete(key: string) {
+  if (!isAuthenticated.value) return
+  previewOpen.value = false
+  previewImage.value = null
+  deleteTargetKeys.value = [key]
+  deleteModalOpen.value = true
+}
+
+function requestBatchDelete() {
+  if (!isAuthenticated.value) return
+  if (!selectedCount.value) {
+    toast.add({ title: t('stats.selectFirst'), color: 'warning' })
+    return
+  }
+  deleteTargetKeys.value = Array.from(selectedKeys.value)
+  deleteModalOpen.value = true
+}
+
+function clearSelection() {
+  selectedKeys.value = new Set()
+}
+
+async function confirmDelete() {
+  const keys = [...deleteTargetKeys.value]
+  if (!keys.length || !isAuthenticated.value) return
+
+  batchDeleting.value = true
+  for (const key of keys) {
+    deletingKeys.value.add(key)
+  }
+
+  const deleted: string[] = []
+  const failed: string[] = []
+
+  try {
+    const response = await $fetch<{
+      deleted: string[]
+      failed: Array<{ key: string }>
+    }>('/api/images/batch-delete', {
+      method: 'POST',
+      body: { keys }
+    })
+    deleted.push(...response.deleted)
+    failed.push(...response.failed.map(item => item.key))
+
+    if (deleted.length) {
+      removeItems(deleted)
+      for (const key of deleted) {
+        selectedKeys.value.delete(key)
+      }
+      selectedKeys.value = new Set(selectedKeys.value)
+      toast.add({
+        title: t('stats.deleted', { n: deleted.length }),
+        color: 'success'
+      })
+      await refreshStats()
+      await reloadGallery()
+      if (items.value.length === 0 && galleryPage.value > 1) {
+        await goToPage(galleryPage.value - 1)
+      }
+    }
+
+    if (failed.length) {
+      toast.add({
+        title: t('stats.deletePartialFail', { n: failed.length }),
+        color: 'error'
+      })
+    }
+
+    deleteModalOpen.value = false
+    deleteTargetKeys.value = []
+  } catch (error: unknown) {
+    handleAuthError(error)
+    if (isAuthenticated.value) {
+      toast.add({ title: t('stats.deleteFailed'), color: 'error' })
+    }
+  } finally {
+    batchDeleting.value = false
+    deletingKeys.value = new Set()
+  }
+}
+
+async function handleGalleryPageChange(targetPage: number) {
+  selectedKeys.value = new Set()
+  previewOpen.value = false
+  previewImage.value = null
+  try {
+    await goToPage(targetPage)
+  } catch (error: unknown) {
+    handleAuthError(error)
+  }
+}
+
+async function handleGalleryPageSizeChange(size: number) {
+  selectedKeys.value = new Set()
+  previewOpen.value = false
+  previewImage.value = null
+  try {
+    await setPageSize(size)
+  } catch (error: unknown) {
+    handleAuthError(error)
+  }
+}
+
+function openPreview(image: ImageItem) {
+  previewImage.value = image
+  previewOpen.value = true
+}
+
+function requestPreviewDelete() {
+  if (!previewImage.value) return
+  requestDelete(previewImage.value.key)
+}
+
+onMounted(async () => {
+  window.addEventListener('scroll', onWindowScroll, { passive: true })
+  const status = await fetchStatus()
+  if (!status.initialized && !status.legacyMode) {
+    await navigateTo('/setup')
+    return
+  }
+  await checkSession()
+  if (isAuthenticated.value) {
+    await refreshAll()
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onWindowScroll)
+})
+
+watch(isAuthenticated, async (authed, prev) => {
+  if (authed && prev === false) {
+    await nextTick()
+    await refreshAll()
+  } else if (!authed) {
+    stats.value = null
+    items.value = []
+    selectedKeys.value = new Set()
+  }
+})
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div
+      v-if="isChecking"
+      class="flex min-h-screen items-center justify-center"
+    >
+      <div class="flex flex-col items-center gap-3 text-muted">
+        <UIcon
+          name="i-lucide-loader-circle"
+          class="size-8 animate-spin"
+        />
+        <p class="text-sm">
+          {{ t('common.loadingSession') }}
+        </p>
+      </div>
+    </div>
+
+    <AdminLoginGate v-else-if="!isAuthenticated" />
+
+    <AppShell v-else>
+      <div class="flex items-start justify-between gap-3">
+        <div class="min-w-0">
+          <h1 class="text-2xl font-semibold tracking-tight">
+            {{ t('stats.title') }}
+          </h1>
+          <p class="text-sm text-muted">
+            {{ t('stats.subtitle') }}
+          </p>
+        </div>
+
+        <UButton
+          icon="i-lucide-refresh-cw"
+          variant="ghost"
+          color="neutral"
+          size="sm"
+          class="mt-0.5 shrink-0"
+          :aria-label="t('common.refresh')"
+          :loading="pageRefreshing"
+          @click="refreshAll"
+        />
+      </div>
+
+      <GalleryStatsOverview
+        :stats="stats"
+        :loading="statsLoading"
+      />
+
+      <section class="space-y-3">
+        <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+          <GallerySelectionBar
+            :items="items"
+            :selected-keys="selectedKeys"
+            @update:selected-keys="updateSelectedKeys"
+            @clear="clearSelection"
+          />
+
+          <GalleryFilterBar
+            v-model:search-query="searchQuery"
+            :storage-backend="currentStorageBackend"
+            :storage-backend-items="storageBackendItems"
+            :upload-source="currentUploadSource"
+            :upload-source-items="uploadSourceItems"
+            :view-mode="viewMode"
+            :selected-count="selectedCount"
+            :loading="galleryLoading"
+            :show-batch-delete="true"
+            @update:storage-backend="handleStorageBackendChange"
+            @update:upload-source="handleUploadSourceChange"
+            @update:view-mode="viewMode = $event"
+            @search="handleSearch"
+            @reset="handleResetFilters"
+            @batch-delete="requestBatchDelete"
+          />
+        </div>
+
+        <div
+          v-if="galleryLoading"
+          :class="viewMode === 'grid'
+            ? 'grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'
+            : 'space-y-2'"
+        >
+          <USkeleton
+            v-for="n in 10"
+            :key="n"
+            :class="viewMode === 'grid' ? 'aspect-[4/3] rounded-lg' : 'h-16 rounded-lg'"
+          />
+        </div>
+
+        <ImageGrid
+          v-else-if="viewMode === 'grid'"
+          gallery
+          :show-key="false"
+          show-storage
+          :items="items"
+          :selected-keys="selectedKeys"
+          :selectable="true"
+          :allow-delete="true"
+          @update:selected-keys="updateSelectedKeys"
+          @preview="openPreview"
+          @delete="(image) => requestDelete(image.key)"
+        />
+
+        <GalleryImageList
+          v-else
+          show-storage
+          :items="items"
+          :selected-keys="selectedKeys"
+          :selectable="true"
+          :show-delete="true"
+          @update:selected-keys="updateSelectedKeys"
+          @preview="openPreview"
+          @delete="(image) => requestDelete(image.key)"
+        />
+
+        <ImagePreviewModal
+          v-model:open="previewOpen"
+          :image="previewImage"
+          show-storage
+          :deleting="previewImage ? deletingKeys.has(previewImage.key) : false"
+          :allow-delete="true"
+          @delete="requestPreviewDelete"
+        />
+
+        <PaginationBar
+          v-if="!galleryLoading && galleryTotal > 0"
+          :page="galleryPage"
+          :total-pages="galleryTotalPages"
+          :total="galleryTotal"
+          :page-size="galleryPageSize"
+          :unit="t('common.imagesUnit')"
+          :loading="galleryLoading"
+          @update:page="handleGalleryPageChange"
+          @update:page-size="handleGalleryPageSizeChange"
+        />
+      </section>
+
+      <DeleteConfirmModal
+        v-model:open="deleteModalOpen"
+        :count="deleteTargetKeys.length"
+        :loading="batchDeleting"
+        @confirm="confirmDelete"
+      />
+
+      <UButton
+        v-show="showScrollTop"
+        icon="i-lucide-arrow-up"
+        :aria-label="t('stats.scrollTop')"
+        color="primary"
+        class="fixed bottom-6 right-6 z-50 shadow-lg"
+        size="lg"
+        @click="scrollToTop"
+      />
+    </AppShell>
+  </div>
+</template>
@@ -4,19 +4,19 @@ import type { ImageItem } from '~/types/image'
 const { uploading, progressItems, uploadFiles } = useImageUpload()

 const {
-  defaultFolder,
  autoCopyMarkdown,
  copyFormat,
  loadPreferences
 } = useUploadPreferences()

-const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin }
-  = useAuth()
+const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus } = useAuth()
 const toast = useToast()
-const folderOptions = ref<string[]>(['images'])
+const { t } = useI18n()
 const sessionItems = ref<ImageItem[]>([])
 const deletingKeys = ref<Set<string>>(new Set())
 const emptySelection = ref(new Set<string>())
+const previewOpen = ref(false)
+const previewImage = ref<ImageItem | null>(null)

 const showProgress = computed(
  () =>
@@ -29,22 +29,9 @@ const showProgress = computed(
    )
 )

-async function loadFolders() {
-  const data = await $fetch<{ folders: string[] }>('/api/folders', {
-    credentials: 'include'
-  })
-  folderOptions.value = [...data.folders]
-  if (!folderOptions.value.includes(defaultFolder.value)) {
-    defaultFolder.value = folderOptions.value[0] ?? 'images'
-  }
-}
-
 async function loadPage() {
  try {
    loadPreferences()
-    if (isAdmin.value) {
-      await loadFolders()
-    }
  } catch (error: unknown) {
    handleAuthError(error)
  }
@@ -76,11 +63,11 @@ watch(isAuthenticated, async (authed, prev) => {
 function copyFormatLabel() {
  switch (copyFormat.value) {
    case 'url':
-      return '直链'
+      return t('copy.url')
    case 'html':
-      return 'HTML'
+      return t('copy.html')
    default:
-      return 'Markdown'
+      return t('copy.markdown')
  }
 }

@@ -98,33 +85,22 @@ async function copyUploadLink(text: string) {
      document.execCommand('copy')
      document.body.removeChild(textarea)
    }
-    toast.add({ title: `已复制 ${copyFormatLabel()}`, color: 'success' })
+    toast.add({ title: t('copy.copiedFormat', { format: copyFormatLabel() }), color: 'success' })
  } catch {
-    toast.add({ title: '复制失败', color: 'error' })
+    toast.add({ title: t('copy.failed'), color: 'error' })
  }
 }

 async function handleUpload(files: File[]) {
  if (!isAuthenticated.value) {
-    toast.add({ title: '请先登录', color: 'warning' })
+    toast.add({ title: t('upload.loginRequired'), color: 'warning' })
    return
  }

  try {
-    const uploadTarget = isAdmin.value
-      ? (defaultFolder.value.trim() || 'images')
-      : 'images'
-    const result = await uploadFiles(files, uploadTarget, {
-      includeFolder: isAdmin.value
-    })
+    const result = await uploadFiles(files)
    if (result?.items.length) {
      sessionItems.value = [...result.items, ...sessionItems.value]
-      if (isAdmin.value) {
-        const folder = uploadTarget
-        if (!folderOptions.value.includes(folder)) {
-          folderOptions.value = [...folderOptions.value, folder]
-        }
-      }
      if (autoCopyMarkdown.value && result.items[0]) {
        const first = result.items[0]
        const text
@@ -149,15 +125,29 @@ async function handleDelete(key: string) {
      query: { key }
    })
    sessionItems.value = sessionItems.value.filter(item => item.key !== key)
-    toast.add({ title: '已删除', color: 'success' })
+    if (previewImage.value?.key === key) {
+      previewOpen.value = false
+      previewImage.value = null
+    }
+    toast.add({ title: t('stats.deletedSingle'), color: 'success' })
  } catch (error: unknown) {
    handleAuthError(error)
-    toast.add({ title: '删除失败', color: 'error' })
+    toast.add({ title: t('stats.deleteFailed'), color: 'error' })
  } finally {
    deletingKeys.value.delete(key)
    deletingKeys.value = new Set(deletingKeys.value)
  }
 }
+
+function openPreview(image: ImageItem) {
+  previewImage.value = image
+  previewOpen.value = true
+}
+
+function requestPreviewDelete() {
+  if (!previewImage.value) return
+  void handleDelete(previewImage.value.key)
+}
 </script>

 <template>
@@ -172,7 +162,7 @@ async function handleDelete(key: string) {
          class="size-8 animate-spin"
        />
        <p class="text-sm">
-          正在验证登录状态…
+          {{ t('common.loadingSession') }}
        </p>
      </div>
    </div>
@@ -196,7 +186,7 @@ async function handleDelete(key: string) {
      >
        <div class="flex items-center justify-between gap-2">
          <h2 class="text-lg font-medium">
-            本次上传
+            {{ t('upload.sessionTitle') }}
            <span class="ml-1 text-sm font-normal text-muted">({{ sessionItems.length }})</span>
          </h2>
        </div>
@@ -204,14 +194,21 @@ async function handleDelete(key: string) {
        <ImageGrid
          :items="sessionItems"
          :selected-keys="emptySelection"
-          :deleting-keys="deletingKeys"
          :selectable="false"
          :show-key="false"
-          empty-text="暂无本次上传"
+          :empty-text="t('upload.sessionEmpty')"
          @update:selected-keys="() => {}"
-          @delete="handleDelete"
+          @preview="openPreview"
        />
      </section>
+
+      <ImagePreviewModal
+        v-model:open="previewOpen"
+        :image="previewImage"
+        :deleting="previewImage ? deletingKeys.has(previewImage.key) : false"
+        :allow-delete="true"
+        @delete="requestPreviewDelete"
+      />
    </AppShell>
  </div>
 </template>
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+await navigateTo({ path: '/settings', query: { tab: 'logs' } }, { replace: true })
+</script>
+
+<template>
+  <div />
+</template>
@@ -2,26 +2,48 @@
 import logoLight from '~/assets/image/logo-light.png'
 import logoDark from '~/assets/image/logo-dark.png'
 import { isPasswordValid } from '~/utils/password-strength'
+import type { LoginVerificationPayload } from '~/types/auth'

 const router = useRouter()
-const { register, fetchStatus } = useAuth()
+const { register, fetchStatus, authStatus } = useAuth()
 const toast = useToast()
+const { t } = useI18n()

 const username = ref('')
 const password = ref('')
 const confirmPassword = ref('')
 const loading = ref(false)
+const verificationRef = ref<{ reset: () => Promise<void> } | null>(null)
+const verificationPayload = ref<LoginVerificationPayload | null>(null)
+
+const loginVerification = computed(() =>
+  authStatus.value?.loginVerification ?? { method: 'slider' as const }
+)

 const canSubmit = computed(() =>
-  Boolean(username.value && password.value && confirmPassword.value)
+  Boolean(verificationPayload.value)
+  && Boolean(username.value && password.value && confirmPassword.value)
  && password.value === confirmPassword.value
  && isPasswordValid(password.value)
  && AUTH_USERNAME_PATTERN.test(username.value.trim())
 )

+function onVerificationVerified(payload: LoginVerificationPayload) {
+  verificationPayload.value = payload
+}
+
+function onVerificationCleared() {
+  verificationPayload.value = null
+}
+
+async function resetVerification() {
+  verificationPayload.value = null
+  await verificationRef.value?.reset()
+}
+
 onMounted(async () => {
  const status = await fetchStatus()
-  if (!status.initialized) {
+  if (!status.initialized && !status.legacyMode) {
    await router.replace('/setup')
    return
  }
@@ -31,20 +53,25 @@ onMounted(async () => {
 })

 async function submit() {
-  if (!canSubmit.value || loading.value) return
+  if (!canSubmit.value || loading.value || !verificationPayload.value) return

  if (password.value !== confirmPassword.value) {
-    toast.add({ title: '两次输入的密码不一致', color: 'error' })
+    toast.add({ title: t('auth.passwordMismatch'), color: 'error' })
    return
  }

  loading.value = true
  try {
-    const result = await register(username.value.trim(), password.value)
+    const result = await register(
+      username.value.trim(),
+      password.value,
+      verificationPayload.value
+    )
    if (result.ok) {
-      toast.add({ title: '注册成功', color: 'success' })
+      toast.add({ title: t('auth.registerSuccess'), color: 'success' })
      await router.replace('/')
    } else {
+      await resetVerification()
      toast.add({ title: result.error, color: 'error' })
    }
  } finally {
@@ -54,7 +81,10 @@ async function submit() {
 </script>

 <template>
-  <div class="flex min-h-screen items-center justify-center bg-muted/30 p-4 sm:p-6">
+  <div class="relative flex min-h-screen items-center justify-center bg-muted/30 p-4 sm:p-6">
+    <div class="absolute top-4 right-4">
+      <AuthPagePreferences />
+    </div>
    <div class="w-full max-w-sm rounded-2xl border border-default bg-elevated p-6 shadow-lg sm:p-8">
      <div class="mb-8 space-y-3 text-center">
        <div class="mx-auto inline-flex items-center justify-center">
@@ -77,10 +107,10 @@ async function submit() {
        </div>
        <div class="space-y-1">
          <h1 class="text-xl font-bold tracking-tight sm:text-2xl">
-            注册账号
+            {{ t('register.title') }}
          </h1>
          <p class="text-sm text-muted">
-            创建 PicHost 用户账号
+            {{ t('register.subtitle') }}
          </p>
        </div>
      </div>
@@ -94,12 +124,12 @@ async function submit() {
            for="register-username"
            class="block text-sm font-medium text-default"
          >
-            用户名
+            {{ t('auth.username') }}
          </label>
          <UInput
            id="register-username"
            v-model="username"
-            placeholder="3–32 位字母、数字或下划线"
+            :placeholder="t('setup.usernamePlaceholder')"
            autocomplete="username"
            size="lg"
            class="w-full"
@@ -112,17 +142,13 @@ async function submit() {
            for="register-password"
            class="block text-sm font-medium text-default"
          >
-            密码
+            {{ t('auth.password') }}
          </label>
-          <UInput
+          <PasswordInput
            id="register-password"
            v-model="password"
-            type="password"
-            placeholder="设置登录密码"
+            :placeholder="t('setup.passwordPlaceholder')"
            autocomplete="new-password"
-            size="lg"
-            class="w-full"
-            :ui="{ root: 'w-full' }"
          />
          <PasswordStrength :password="password" />
        </div>
@@ -132,23 +158,28 @@ async function submit() {
            for="register-confirm"
            class="block text-sm font-medium text-default"
          >
-            确认密码
+            {{ t('auth.confirmPassword') }}
          </label>
-          <UInput
+          <PasswordInput
            id="register-confirm"
            v-model="confirmPassword"
-            type="password"
-            placeholder="再次输入密码"
+            :placeholder="t('setup.confirmPlaceholder')"
            autocomplete="new-password"
-            size="lg"
-            class="w-full"
-            :ui="{ root: 'w-full' }"
          />
        </div>

+        <LoginVerification
+          ref="verificationRef"
+          :method="loginVerification.method"
+          :turnstile-site-key="loginVerification.turnstileSiteKey"
+          :cap-api-endpoint="loginVerification.capApiEndpoint"
+          @verified="onVerificationVerified"
+          @cleared="onVerificationCleared"
+        />
+
        <UButton
          type="submit"
-          label="注册"
+          :label="t('auth.register')"
          icon="i-lucide-user-plus"
          size="lg"
          block
@@ -158,12 +189,12 @@ async function submit() {
        />

        <p class="text-center text-sm text-muted">
-          已有账号？
+          {{ t('auth.hasAccount') }}
          <NuxtLink
            to="/"
            class="text-primary hover:underline"
          >
-            返回登录
+            {{ t('auth.backToLogin') }}
          </NuxtLink>
        </p>
      </form>
@@ -1,360 +0,0 @@
-<script setup lang="ts">
-type SettingSource = 'env' | 'db' | 'none'
-type WebpQualitySource = 'env' | 'db' | 'default'
-
-interface SettingsResponse {
-  apiUploadToken: string
-  tokenSource: SettingSource
-  envTokenOverride: boolean
-  webpQuality: number
-  webpQualitySource: WebpQualitySource
-  allowedRefererHosts: string
-  refererSource: SettingSource
-  refererEnvFallback: string
-  imageBaseUrl: string
-  imageBaseUrlConfigured: string
-  imageBaseUrlSource: SettingSource
-  allowRegistration: boolean
-  appVersion: string
-}
-
-const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
-const { defaultFolder, loadPreferences } = useUploadPreferences()
-const toast = useToast()
-
-const settings = ref<SettingsResponse | null>(null)
-const folderOptions = ref<string[]>(['images'])
-const savingServer = ref(false)
-
-const refererDraft = ref('')
-const imageBaseUrlDraft = ref('')
-const allowRegistrationDraft = ref(false)
-
-const folderSelectItems = computed(() =>
-  folderOptions.value.map(folder => ({ label: folder, value: folder }))
-)
-
-const hasServerChanges = computed(() => {
-  if (!settings.value) return false
-  return refererDraft.value !== settings.value.allowedRefererHosts
-    || imageBaseUrlDraft.value !== settings.value.imageBaseUrlConfigured
-    || allowRegistrationDraft.value !== settings.value.allowRegistration
-})
-
-function sourceBadge(source: SettingSource | WebpQualitySource) {
-  switch (source) {
-    case 'env':
-      return { label: '.env', color: 'warning' as const }
-    case 'db':
-      return { label: '已保存', color: 'success' as const }
-    case 'default':
-      return { label: '默认', color: 'neutral' as const }
-    default:
-      return { label: '未设置', color: 'neutral' as const }
-  }
-}
-
-function tokenSourceText(source: SettingSource) {
-  switch (source) {
-    case 'env':
-      return '环境变量'
-    case 'db':
-      return '后台生成'
-    default:
-      return '未配置'
-  }
-}
-
-function errorStatus(error: unknown): number {
-  if (typeof error === 'object' && error !== null && 'statusCode' in error) {
-    return (error as { statusCode: number }).statusCode
-  }
-  return 0
-}
-
-function applySettings(data: SettingsResponse) {
-  settings.value = data
-  refererDraft.value = data.allowedRefererHosts
-  imageBaseUrlDraft.value = data.imageBaseUrlConfigured
-  allowRegistrationDraft.value = data.allowRegistration
-}
-
-async function patchSettings(body: Record<string, unknown>) {
-  const data = await $fetch<SettingsResponse>('/api/settings', {
-    method: 'PATCH',
-    credentials: 'include',
-    body
-  })
-  applySettings(data)
-  return data
-}
-
-function handlePatchError(error: unknown, fallback: string) {
-  handleAuthError(error)
-  if (!isAuthenticated.value) return
-  if (errorStatus(error) === 409) {
-    toast.add({ title: '该项已由环境变量覆盖，无法在后台修改', color: 'warning' })
-    void loadSettings()
-    return
-  }
-  toast.add({ title: fallback, color: 'error' })
-}
-
-async function saveServerSettings() {
-  if (!isAuthenticated.value || !hasServerChanges.value) return
-
-  savingServer.value = true
-  try {
-    await patchSettings({
-      allowedRefererHosts: refererDraft.value,
-      imageBaseUrl: imageBaseUrlDraft.value,
-      allowRegistration: allowRegistrationDraft.value
-    })
-    toast.add({ title: '服务器配置已保存', color: 'success' })
-  } catch (error: unknown) {
-    handlePatchError(error, '保存服务器配置失败')
-  } finally {
-    savingServer.value = false
-  }
-}
-
-async function loadFolders() {
-  const data = await $fetch<{ folders: string[] }>('/api/folders', {
-    credentials: 'include'
-  })
-  folderOptions.value = [...data.folders]
-  if (!folderOptions.value.includes(defaultFolder.value)) {
-    defaultFolder.value = folderOptions.value[0] ?? 'images'
-  }
-}
-
-async function loadSettings() {
-  try {
-    const data = await $fetch<SettingsResponse>('/api/settings', {
-      credentials: 'include'
-    })
-    applySettings(data)
-  } catch (error: unknown) {
-    handleAuthError(error)
-    if (isAuthenticated.value) {
-      toast.add({ title: '加载设置失败', color: 'error' })
-    }
-  }
-}
-
-async function loadPage() {
-  if (!isAdmin.value) {
-    await navigateTo('/')
-    return
-  }
-  loadPreferences()
-  await Promise.all([loadSettings(), loadFolders()])
-}
-
-onMounted(async () => {
-  const status = await fetchStatus()
-  if (!status.initialized && !status.legacyMode) {
-    await navigateTo('/setup')
-    return
-  }
-  await checkSession()
-  if (isAuthenticated.value && !isAdmin.value) {
-    await navigateTo('/')
-  }
-})
-
-watch(isAuthenticated, async (authed) => {
-  if (authed) {
-    if (!isAdmin.value) {
-      await navigateTo('/')
-      return
-    }
-    await nextTick()
-    await loadPage()
-  } else {
-    settings.value = null
-  }
-})
-</script>
-
-<template>
-  <div class="min-h-screen">
-    <div
-      v-if="isChecking"
-      class="flex min-h-screen items-center justify-center"
-    >
-      <div class="flex flex-col items-center gap-3 text-muted">
-        <UIcon
-          name="i-lucide-loader-circle"
-          class="size-8 animate-spin"
-        />
-        <p class="text-sm">
-          正在验证登录状态…
-        </p>
-      </div>
-    </div>
-
-    <AdminLoginGate v-else-if="!isAuthenticated" />
-
-    <AppShell v-else-if="isAdmin">
-      <section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
-        <UploadPreferencesPanel embedded />
-      </section>
-
-      <section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
-        <div class="flex items-start gap-2 border-b border-default px-5 py-4 sm:px-6">
-          <UIcon
-            name="i-lucide-server"
-            class="mt-0.5 size-5 shrink-0 text-primary"
-          />
-          <div class="min-w-0">
-            <h1 class="text-base font-semibold">
-              系统设置
-            </h1>
-            <p class="mt-0.5 text-xs text-muted">
-              保存后写入数据库；环境变量优先级更高
-            </p>
-          </div>
-        </div>
-
-        <div
-          v-if="settings"
-          class="p-5 sm:p-6"
-        >
-          <div class="grid gap-5 sm:grid-cols-3 sm:gap-6">
-            <div class="space-y-4">
-              <h3 class="text-sm font-semibold">
-                上传与账号
-              </h3>
-
-              <div class="space-y-2">
-                <label class="text-sm">默认上传目录</label>
-                <p class="text-xs leading-relaxed text-muted">
-                  保存在本机浏览器，仅影响您的上传目标目录
-                </p>
-                <USelect
-                  v-model="defaultFolder"
-                  :items="folderSelectItems"
-                  class="w-full"
-                />
-              </div>
-
-              <label class="flex cursor-pointer items-start gap-2.5">
-                <UCheckbox
-                  v-model="allowRegistrationDraft"
-                  class="mt-0.5"
-                />
-                <span>
-                  <span class="block text-sm">开放用户注册</span>
-                  <span class="mt-1 block text-xs leading-relaxed text-muted">
-                    允许新用户自行注册（普通用户仅可见自己的图片）
-                  </span>
-                </span>
-              </label>
-            </div>
-
-            <div class="space-y-4">
-              <div class="flex items-center justify-between gap-2">
-                <h3 class="text-sm font-semibold">
-                  访问控制
-                </h3>
-                <UBadge
-                  :color="sourceBadge(settings.refererSource).color"
-                  variant="subtle"
-                  size="xs"
-                >
-                  {{ sourceBadge(settings.refererSource).label }}
-                </UBadge>
-              </div>
-              <p class="text-xs leading-relaxed text-muted">
-                Referer 防盗链，逗号分隔允许引用的域名，留空不限制
-              </p>
-              <UTextarea
-                v-model="refererDraft"
-                placeholder="example.com, www.example.com"
-                :rows="4"
-                class="w-full font-mono text-sm"
-              />
-            </div>
-
-            <div class="space-y-4">
-              <div class="flex items-center justify-between gap-2">
-                <h3 class="text-sm font-semibold">
-                  链接生成
-                </h3>
-                <UBadge
-                  :color="sourceBadge(settings.imageBaseUrlSource).color"
-                  variant="subtle"
-                  size="xs"
-                >
-                  {{ sourceBadge(settings.imageBaseUrlSource).label }}
-                </UBadge>
-              </div>
-              <p class="text-xs leading-relaxed text-muted">
-                生成图片链接的 URL 前缀，内网访问建议填公网域名
-              </p>
-              <UInput
-                v-model="imageBaseUrlDraft"
-                placeholder="https://pic.example.com"
-                class="w-full font-mono text-sm"
-              />
-              <p
-                v-if="settings.imageBaseUrl"
-                class="text-xs text-muted"
-              >
-                当前生效：<span class="font-mono break-all">{{ settings.imageBaseUrl }}</span>
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div
-          v-else
-          class="flex justify-center py-12"
-        >
-          <UIcon
-            name="i-lucide-loader-circle"
-            class="size-6 animate-spin text-muted"
-          />
-        </div>
-
-        <div
-          v-if="settings"
-          class="flex flex-wrap items-center justify-between gap-3 border-t border-default px-5 py-4 sm:px-6"
-        >
-          <div class="flex min-w-0 items-center gap-2 text-xs text-muted">
-            <UIcon
-              name="i-lucide-key-round"
-              class="size-3.5 shrink-0"
-            />
-            <span>
-              API Token · {{ tokenSourceText(settings.tokenSource) }}
-              <span class="text-dimmed">· v{{ settings.appVersion }}</span>
-              <template v-if="hasServerChanges">
-                · <span class="text-warning">有未保存的更改</span>
-              </template>
-            </span>
-          </div>
-          <div class="flex flex-wrap items-center gap-2">
-            <UButton
-              label="管理 Token"
-              icon="i-lucide-external-link"
-              variant="outline"
-              color="neutral"
-              size="sm"
-              to="/api"
-            />
-            <UButton
-              label="保存"
-              icon="i-lucide-save"
-              size="sm"
-              :loading="savingServer"
-              :disabled="!hasServerChanges"
-              @click="saveServerSettings"
-            />
-          </div>
-        </div>
-      </section>
-    </AppShell>
-  </div>
-</template>
@@ -0,0 +1,957 @@
+<script setup lang="ts">
+import type { SettingsTab } from '~/types/settings'
+import { ADMIN_SETTINGS_TABS, USER_SETTINGS_TABS } from '~/types/settings'
+import { willActivateDomainSeparation } from '~/utils/domain-separation'
+
+type SettingSource = 'env' | 'db' | 'none'
+type WebpQualitySource = 'env' | 'db' | 'default'
+type LoginVerificationMethod = 'slider' | 'turnstile' | 'cap'
+
+interface SettingsResponse {
+  apiUploadToken: string
+  tokenSource: SettingSource
+  envTokenOverride: boolean
+  webpQuality: number
+  webpQualitySource: WebpQualitySource
+  allowedRefererHosts: string
+  refererSource: SettingSource
+  refererEnvFallback: string
+  imageBaseUrl: string
+  imageBaseUrlConfigured: string
+  imageBaseUrlSource: SettingSource
+  effectiveImageBaseUrl: string
+  siteBaseUrl: string
+  siteBaseUrlConfigured: string
+  siteBaseUrlSource: SettingSource
+  effectiveSiteBaseUrl: string
+  domainSeparation: boolean
+  runtime: {
+    currentOrigin: string
+    currentHost: string
+    hostRole: 'site' | 'image' | 'unknown' | 'single'
+  }
+  hideFolderInUrl: boolean
+  hideFolderInUrlSource: SettingSource
+  storageUseDatePath: boolean
+  storageUseDatePathSource: SettingSource
+  allowRegistration: boolean
+  loginVerificationMethod: LoginVerificationMethod
+  turnstileSiteKey: string
+  turnstileSecretKey: string
+  capApiEndpoint: string
+  capSecret: string
+  appVersion: string
+}
+
+const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
+const toast = useToast()
+const { t, locale } = useI18n()
+const route = useRoute()
+const router = useRouter()
+
+const allowedTabs = computed(() => (isAdmin.value ? ADMIN_SETTINGS_TABS : USER_SETTINGS_TABS))
+
+const defaultTab = computed<SettingsTab>(() => (isAdmin.value ? 'basic' : 'logs'))
+
+function parseTab(value: unknown): SettingsTab | null {
+  if (typeof value !== 'string') return null
+  return allowedTabs.value.includes(value as SettingsTab) ? value as SettingsTab : null
+}
+
+const activeTab = computed<SettingsTab>({
+  get() {
+    return parseTab(route.query.tab) ?? defaultTab.value
+  },
+  set(tab) {
+    void router.replace({ query: { tab } })
+  }
+})
+
+const sidebarItems = computed(() => {
+  const labels: Record<SettingsTab, { label: string, icon: string }> = {
+    basic: { label: t('settings.navBasic'), icon: 'i-lucide-sliders-horizontal' },
+    domains: { label: t('settings.navDomains'), icon: 'i-lucide-globe' },
+    access: { label: t('settings.navAccess'), icon: 'i-lucide-shield' },
+    logs: { label: t('settings.navLogs'), icon: 'i-lucide-scroll-text' }
+  }
+  return allowedTabs.value.map(id => ({ id, ...labels[id] }))
+})
+
+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 domainSeparationDocUrl = computed(() =>
+  locale.value === 'en'
+    ? 'https://o96u.github.io/PicHost/en/guide/domain-separation'
+    : 'https://o96u.github.io/PicHost/guide/domain-separation'
+)
+
+const settings = ref<SettingsResponse | null>(null)
+const savingServer = ref(false)
+
+const refererDraft = ref('')
+const siteBaseUrlDraft = ref('')
+const imageBaseUrlDraft = ref('')
+const hideFolderInUrlDraft = ref(false)
+const storageUseDatePathDraft = ref(true)
+const allowRegistrationDraft = ref(false)
+const loginVerificationMethodDraft = ref<LoginVerificationMethod>('slider')
+const turnstileSiteKeyDraft = ref('')
+const turnstileSecretKeyDraft = ref('')
+const capApiEndpointDraft = ref('')
+const capSecretDraft = ref('')
+const domainSeparationDraft = ref(false)
+const disableDomainSeparationOpen = ref(false)
+const pendingDomainSeparationDisable = ref(false)
+const domainSeparationSaveConfirmOpen = ref(false)
+
+interface ReleaseCheckResponse {
+  currentVersion: string
+  latestVersion: string | null
+  updateAvailable: boolean
+  releaseUrl: string | null
+}
+
+const releaseCheck = ref<ReleaseCheckResponse | null>(null)
+
+const hasServerChanges = computed(() => {
+  if (!settings.value) return false
+  return refererDraft.value !== settings.value.allowedRefererHosts
+    || domainSeparationDraft.value !== settings.value.domainSeparation
+    || siteBaseUrlDraft.value !== (settings.value.domainSeparation ? settings.value.siteBaseUrl : '')
+    || imageBaseUrlDraft.value !== settings.value.imageBaseUrl
+    || hideFolderInUrlDraft.value !== settings.value.hideFolderInUrl
+    || storageUseDatePathDraft.value !== settings.value.storageUseDatePath
+    || allowRegistrationDraft.value !== settings.value.allowRegistration
+    || loginVerificationMethodDraft.value !== settings.value.loginVerificationMethod
+    || turnstileSiteKeyDraft.value !== settings.value.turnstileSiteKey
+    || turnstileSecretKeyDraft.value !== settings.value.turnstileSecretKey
+    || capApiEndpointDraft.value !== settings.value.capApiEndpoint
+    || capSecretDraft.value !== settings.value.capSecret
+})
+
+const domainSeparationWouldActivate = computed(() =>
+  willActivateDomainSeparation(
+    domainSeparationDraft.value,
+    siteBaseUrlDraft.value,
+    imageBaseUrlDraft.value
+  )
+)
+
+const domainSeparationFieldsChanged = computed(() => {
+  if (!settings.value) return false
+  return domainSeparationDraft.value !== settings.value.domainSeparation
+    || siteBaseUrlDraft.value !== (settings.value.domainSeparation ? settings.value.siteBaseUrl : '')
+    || imageBaseUrlDraft.value !== settings.value.imageBaseUrl
+})
+
+const needsDomainSeparationSaveConfirm = computed(() =>
+  domainSeparationWouldActivate.value && domainSeparationFieldsChanged.value
+)
+
+function sourceBadge(source: SettingSource | WebpQualitySource) {
+  switch (source) {
+    case 'env':
+      return { label: t('settings.badgeEnv'), color: 'warning' as const }
+    case 'db':
+      return { label: t('settings.badgeSaved'), color: 'success' as const }
+    case 'default':
+      return { label: t('settings.badgeDefault'), color: 'neutral' as const }
+    default:
+      return { label: t('settings.badgeUnset'), color: 'neutral' as const }
+  }
+}
+
+function errorStatus(error: unknown): number {
+  if (typeof error === 'object' && error !== null && 'statusCode' in error) {
+    return (error as { statusCode: number }).statusCode
+  }
+  return 0
+}
+
+function applySettings(data: SettingsResponse) {
+  settings.value = data
+  refererDraft.value = data.allowedRefererHosts
+  siteBaseUrlDraft.value = data.domainSeparation ? data.siteBaseUrl : ''
+  imageBaseUrlDraft.value = data.imageBaseUrl
+  hideFolderInUrlDraft.value = data.hideFolderInUrl
+  storageUseDatePathDraft.value = data.storageUseDatePath
+  allowRegistrationDraft.value = data.allowRegistration
+  loginVerificationMethodDraft.value = data.loginVerificationMethod
+  turnstileSiteKeyDraft.value = data.turnstileSiteKey
+  turnstileSecretKeyDraft.value = data.turnstileSecretKey
+  capApiEndpointDraft.value = data.capApiEndpoint
+  capSecretDraft.value = data.capSecret
+  domainSeparationDraft.value = data.domainSeparation
+}
+
+async function patchSettings(body: Record<string, unknown>) {
+  const data = await $fetch<SettingsResponse>('/api/settings', {
+    method: 'PATCH',
+    credentials: 'include',
+    body
+  })
+  applySettings(data)
+  return data
+}
+
+function handlePatchError(error: unknown, fallback: string) {
+  handleAuthError(error)
+  if (!isAuthenticated.value) return
+  if (errorStatus(error) === 409) {
+    toast.add({ title: t('settings.envOverride'), color: 'warning' })
+    void loadSettings()
+    return
+  }
+  toast.add({ title: fallback, color: 'error' })
+}
+
+function fillDetectedSiteOrigin() {
+  if (settings.value?.runtime.currentOrigin) {
+    siteBaseUrlDraft.value = settings.value.runtime.currentOrigin
+  }
+}
+
+function onDomainSeparationDraftChange(next: boolean | 'indeterminate') {
+  const enabled = next === true
+  if (!enabled && domainSeparationDraft.value) {
+    pendingDomainSeparationDisable.value = true
+    disableDomainSeparationOpen.value = true
+    return
+  }
+  domainSeparationDraft.value = enabled
+}
+
+function confirmDisableDomainSeparation() {
+  domainSeparationDraft.value = false
+  siteBaseUrlDraft.value = ''
+  disableDomainSeparationOpen.value = false
+  pendingDomainSeparationDisable.value = false
+}
+
+function cancelDisableDomainSeparation() {
+  disableDomainSeparationOpen.value = false
+  pendingDomainSeparationDisable.value = false
+}
+
+async function saveServerSettings() {
+  if (!isAuthenticated.value || !hasServerChanges.value) return
+
+  if (domainSeparationDraft.value) {
+    if (!siteBaseUrlDraft.value.trim() || !imageBaseUrlDraft.value.trim()) {
+      toast.add({ title: t('settings.domainSeparationRequired'), color: 'error' })
+      return
+    }
+  }
+
+  if (needsDomainSeparationSaveConfirm.value) {
+    domainSeparationSaveConfirmOpen.value = true
+    return
+  }
+
+  await performSaveServerSettings()
+}
+
+async function performSaveServerSettings() {
+  domainSeparationSaveConfirmOpen.value = false
+  if (!isAuthenticated.value || !hasServerChanges.value) return
+
+  savingServer.value = true
+  try {
+    await patchSettings({
+      allowedRefererHosts: refererDraft.value,
+      domainSeparation: domainSeparationDraft.value,
+      siteBaseUrl: domainSeparationDraft.value ? siteBaseUrlDraft.value : '',
+      imageBaseUrl: imageBaseUrlDraft.value,
+      hideFolderInUrl: hideFolderInUrlDraft.value,
+      storageUseDatePath: storageUseDatePathDraft.value,
+      allowRegistration: allowRegistrationDraft.value,
+      loginVerificationMethod: loginVerificationMethodDraft.value,
+      turnstileSiteKey: turnstileSiteKeyDraft.value,
+      turnstileSecretKey: turnstileSecretKeyDraft.value,
+      capApiEndpoint: capApiEndpointDraft.value,
+      capSecret: capSecretDraft.value
+    })
+    toast.add({ title: t('settings.saved'), color: 'success' })
+  } catch (error: unknown) {
+    handlePatchError(error, t('settings.saveFailed'))
+  } finally {
+    savingServer.value = false
+  }
+}
+
+async function loadSettings() {
+  try {
+    const data = await $fetch<SettingsResponse>('/api/settings', {
+      credentials: 'include'
+    })
+    applySettings(data)
+  } catch (error: unknown) {
+    handleAuthError(error)
+    if (isAuthenticated.value) {
+      toast.add({ title: t('settings.loadFailed'), color: 'error' })
+    }
+  }
+}
+
+async function checkLatestRelease(options: { notify?: boolean, refresh?: boolean } = {}) {
+  const { notify = false, refresh = false } = options
+  checkingRelease.value = true
+  try {
+    releaseCheck.value = await $fetch<ReleaseCheckResponse>('/api/version/latest', {
+      credentials: 'include',
+      query: refresh ? { refresh: '1' } : undefined
+    })
+
+    if (!notify) return
+
+    const result = releaseCheck.value
+    if (!result?.latestVersion) {
+      toast.add({ title: t('settings.checkUpdateFailed'), color: 'error' })
+      return
+    }
+    if (result.updateAvailable) {
+      toast.add({
+        title: t('settings.updateAvailable', { version: `v${result.latestVersion}` }),
+        color: 'warning'
+      })
+      return
+    }
+    toast.add({ title: t('settings.upToDate'), color: 'success' })
+  } catch {
+    releaseCheck.value = null
+    if (notify) {
+      toast.add({ title: t('settings.checkUpdateFailed'), color: 'error' })
+    }
+  } finally {
+    checkingRelease.value = false
+  }
+}
+
+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') }
+])
+
+const loginVerificationHint = computed(() => {
+  switch (loginVerificationMethodDraft.value) {
+    case 'turnstile':
+      return t('settings.loginVerificationTurnstileHint')
+    case 'cap':
+      return t('settings.loginVerificationCapHint')
+    default:
+      return t('settings.loginVerificationSliderHint')
+  }
+})
+
+async function loadPage() {
+  if (isAdmin.value) {
+    await loadSettings()
+    await checkLatestRelease()
+  }
+}
+
+function ensureValidTab() {
+  if (route.query.tab && !parseTab(route.query.tab)) {
+    void router.replace({ query: { tab: defaultTab.value } })
+  }
+}
+
+onMounted(async () => {
+  const status = await fetchStatus()
+  if (!status.initialized && !status.legacyMode) {
+    await navigateTo('/setup')
+    return
+  }
+  await checkSession()
+  if (!isAuthenticated.value) {
+    return
+  }
+  ensureValidTab()
+  await loadPage()
+})
+
+watch(isAuthenticated, async (authed, prev) => {
+  if (authed && prev === false) {
+    ensureValidTab()
+    await nextTick()
+    await loadPage()
+  } else if (!authed) {
+    settings.value = null
+    releaseCheck.value = null
+  }
+})
+
+watch(() => route.query.tab, () => {
+  ensureValidTab()
+})
+
+watch(isAdmin, () => {
+  ensureValidTab()
+})
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div
+      v-if="isChecking"
+      class="flex min-h-screen items-center justify-center"
+    >
+      <div class="flex flex-col items-center gap-3 text-muted">
+        <UIcon
+          name="i-lucide-loader-circle"
+          class="size-8 animate-spin"
+        />
+        <p class="text-sm">
+          {{ t('common.loadingSession') }}
+        </p>
+      </div>
+    </div>
+
+    <AdminLoginGate v-else-if="!isAuthenticated" />
+
+    <AppShell v-else>
+      <section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
+        <div class="flex min-h-[36rem] flex-col lg:flex-row lg:items-stretch">
+          <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
+                v-if="activeTab === 'basic' && isAdmin"
+              >
+                <SettingsPanel v-if="settings">
+                  <SettingsSection
+                    :title="t('settings.featureToggles')"
+                    :hint="t('settings.featureTogglesHint')"
+                  >
+                    <SettingsGroup>
+                      <SettingsToggleRow
+                        v-model="allowRegistrationDraft"
+                        :title="t('settings.allowRegistration')"
+                        :hint="t('settings.allowRegistrationHint')"
+                      />
+                    </SettingsGroup>
+                  </SettingsSection>
+
+                  <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 })"
+                      />
+                    </template>
+                    <SettingsSystemInfo
+                      :app-version="settings.appVersion"
+                      :update-available="!!releaseCheck?.updateAvailable"
+                      :latest-version="releaseCheck?.latestVersion ?? null"
+                      :release-url="releaseCheck?.releaseUrl ?? null"
+                    />
+                  </SettingsSection>
+                </SettingsPanel>
+                <div
+                  v-else
+                  class="flex justify-center py-16"
+                >
+                  <UIcon
+                    name="i-lucide-loader-circle"
+                    class="size-6 animate-spin text-muted"
+                  />
+                </div>
+              </div>
+
+              <div
+                v-else-if="activeTab === 'domains' && 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>
+                      <SettingsToggleRow
+                        :model-value="domainSeparationDraft"
+                        :title="t('setup.domainSeparation')"
+                        :hint="t('setup.domainSeparationHint')"
+                        @update:model-value="onDomainSeparationDraftChange"
+                      />
+                    </SettingsGroup>
+                  </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')"
+                  >
+                    <SettingsGroup>
+                      <SettingsToggleRow
+                        :model-value="hideFolderInUrlDraft"
+                        :disabled="settings.hideFolderInUrlSource === 'env'"
+                        @update:model-value="(v) => hideFolderInUrlDraft = v"
+                      >
+                        <template #title>
+                          <span class="inline-flex flex-wrap items-center gap-2">
+                            {{ t('settings.hideFolderInUrl') }}
+                            <UBadge
+                              v-if="settings.hideFolderInUrlSource === 'env'"
+                              :color="sourceBadge(settings.hideFolderInUrlSource).color"
+                              variant="subtle"
+                              size="xs"
+                            >
+                              {{ sourceBadge(settings.hideFolderInUrlSource).label }}
+                            </UBadge>
+                          </span>
+                        </template>
+                        <template #hint>
+                          {{ t('settings.hideFolderInUrlHint') }}
+                        </template>
+                      </SettingsToggleRow>
+                      <SettingsToggleRow
+                        :model-value="storageUseDatePathDraft"
+                        :disabled="settings.storageUseDatePathSource === 'env'"
+                        @update:model-value="(v) => storageUseDatePathDraft = v"
+                      >
+                        <template #title>
+                          <span class="inline-flex flex-wrap items-center gap-2">
+                            {{ t('settings.storageUseDatePath') }}
+                            <UBadge
+                              v-if="settings.storageUseDatePathSource === 'env'"
+                              :color="sourceBadge(settings.storageUseDatePathSource).color"
+                              variant="subtle"
+                              size="xs"
+                            >
+                              {{ sourceBadge(settings.storageUseDatePathSource).label }}
+                            </UBadge>
+                          </span>
+                        </template>
+                        <template #hint>
+                          {{ t('settings.storageUseDatePathHint') }}
+                        </template>
+                      </SettingsToggleRow>
+                    </SettingsGroup>
+                  </SettingsSection>
+
+                  <SettingsSection :title="t('settings.imageBaseUrl')">
+                    <div
+                      v-if="domainSeparationDraft"
+                      class="grid gap-4 sm:grid-cols-2"
+                    >
+                      <SettingsGroup>
+                        <div class="space-y-3 px-4 py-4 sm:px-5">
+                          <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"
+                              variant="subtle"
+                              size="xs"
+                            >
+                              {{ sourceBadge(settings.siteBaseUrlSource).label }}
+                            </UBadge>
+                          </div>
+                          <p class="text-xs leading-relaxed text-muted">
+                            {{ t('settings.siteBaseUrlHint') }}
+                          </p>
+                          <div class="flex gap-2">
+                            <UInput
+                              v-model="siteBaseUrlDraft"
+                              :placeholder="t('settings.siteBaseUrlPlaceholder')"
+                              class="min-w-0 flex-1 font-mono text-sm"
+                            />
+                            <UButton
+                              v-if="settings.runtime.currentOrigin"
+                              :label="t('settings.fillDetectedOrigin')"
+                              color="neutral"
+                              variant="outline"
+                              size="sm"
+                              class="shrink-0"
+                              @click="fillDetectedSiteOrigin"
+                            />
+                          </div>
+                          <p
+                            v-if="settings.effectiveSiteBaseUrl"
+                            class="truncate text-xs text-muted"
+                            :title="settings.effectiveSiteBaseUrl"
+                          >
+                            {{ t('settings.siteBaseUrlActive', { url: settings.effectiveSiteBaseUrl }) }}
+                          </p>
+                        </div>
+                      </SettingsGroup>
+
+                      <SettingsGroup>
+                        <div class="space-y-3 px-4 py-4 sm:px-5">
+                          <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"
+                              variant="subtle"
+                              size="xs"
+                            >
+                              {{ sourceBadge(settings.imageBaseUrlSource).label }}
+                            </UBadge>
+                          </div>
+                          <p class="text-xs leading-relaxed text-muted">
+                            {{ t('settings.imageBaseUrlHint') }}
+                          </p>
+                          <UInput
+                            v-model="imageBaseUrlDraft"
+                            :placeholder="t('settings.imageBaseUrlPlaceholder')"
+                            class="w-full font-mono text-sm"
+                          />
+                          <p
+                            v-if="settings.effectiveImageBaseUrl"
+                            class="truncate text-xs text-muted"
+                            :title="settings.effectiveImageBaseUrl"
+                          >
+                            {{ t('settings.imageBaseUrlActive', { url: settings.effectiveImageBaseUrl }) }}
+                          </p>
+                        </div>
+                      </SettingsGroup>
+                    </div>
+
+                    <SettingsGroup v-else>
+                      <div class="space-y-3 px-4 py-4 sm:px-5">
+                        <div class="flex flex-wrap items-center gap-2">
+                          <p class="text-sm font-medium text-highlighted">
+                            {{ t('settings.imageBaseUrl') }}
+                          </p>
+                          <UBadge
+                            color="success"
+                            variant="subtle"
+                            size="xs"
+                          >
+                            {{ t('settings.badgeOptional') }}
+                          </UBadge>
+                          <UBadge
+                            v-if="settings.imageBaseUrlSource === 'env'"
+                            :color="sourceBadge(settings.imageBaseUrlSource).color"
+                            variant="subtle"
+                            size="xs"
+                          >
+                            {{ sourceBadge(settings.imageBaseUrlSource).label }}
+                          </UBadge>
+                        </div>
+                        <p class="text-xs leading-relaxed text-muted">
+                          {{ t('settings.imageBaseUrlSingleHint') }}
+                        </p>
+                        <UInput
+                          v-model="imageBaseUrlDraft"
+                          :placeholder="t('settings.imageBaseUrlPlaceholder')"
+                          class="w-full font-mono text-sm"
+                        />
+                        <p
+                          v-if="settings.effectiveImageBaseUrl"
+                          class="truncate text-xs text-muted"
+                          :title="settings.effectiveImageBaseUrl"
+                        >
+                          {{ t('settings.imageBaseUrlActive', { url: settings.effectiveImageBaseUrl }) }}
+                        </p>
+                      </div>
+                    </SettingsGroup>
+                  </SettingsSection>
+                </SettingsPanel>
+                <div
+                  v-else
+                  class="flex justify-center py-16"
+                >
+                  <UIcon
+                    name="i-lucide-loader-circle"
+                    class="size-6 animate-spin text-muted"
+                  />
+                </div>
+              </div>
+
+              <div
+                v-else-if="activeTab === 'access' && 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>
+
+                  <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"
+                        />
+                        <span>{{ t('settings.refererTip') }}</span>
+                      </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>
+                    </div>
+                  </div>
+
+                  <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"
+                        >
+                          <div class="space-y-2">
+                            <label class="text-sm font-medium text-highlighted">
+                              {{ t('settings.turnstileSiteKey') }}
+                            </label>
+                            <UInput
+                              v-model="turnstileSiteKeyDraft"
+                              :placeholder="t('settings.turnstileSiteKeyPlaceholder')"
+                              class="w-full font-mono text-sm"
+                            />
+                          </div>
+                          <div class="space-y-2">
+                            <label class="text-sm font-medium text-highlighted">
+                              {{ t('settings.turnstileSecretKey') }}
+                            </label>
+                            <UInput
+                              v-model="turnstileSecretKeyDraft"
+                              type="password"
+                              :placeholder="t('settings.turnstileSecretKeyPlaceholder')"
+                              class="w-full font-mono text-sm"
+                            />
+                          </div>
+                        </div>
+                        <div
+                          v-else-if="loginVerificationMethodDraft === 'cap'"
+                          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"
+                              :placeholder="t('settings.capApiEndpointPlaceholder')"
+                              class="w-full font-mono text-sm"
+                            />
+                          </div>
+                          <div class="space-y-2">
+                            <label class="text-sm font-medium text-highlighted">
+                              {{ t('settings.capSecretKey') }}
+                            </label>
+                            <UInput
+                              v-model="capSecretDraft"
+                              type="password"
+                              :placeholder="t('settings.capSecretKeyPlaceholder')"
+                              class="w-full font-mono text-sm"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </SettingsGroup>
+                  </SettingsSection>
+                </SettingsPanel>
+                <div
+                  v-else
+                  class="flex justify-center py-16"
+                >
+                  <UIcon
+                    name="i-lucide-loader-circle"
+                    class="size-6 animate-spin text-muted"
+                  />
+                </div>
+              </div>
+
+              <SettingsLogsPanel v-else-if="activeTab === 'logs'" />
+            </div>
+
+            <SettingsServerFooter
+              v-if="showSaveBar && settings"
+              :has-changes="hasServerChanges"
+              :saving="savingServer"
+              @save="saveServerSettings"
+            />
+          </div>
+        </div>
+      </section>
+    </AppShell>
+
+    <UModal
+      :open="disableDomainSeparationOpen"
+      :title="t('settings.disableDomainSeparationTitle')"
+      :description="t('settings.disableDomainSeparationDesc')"
+      @update:open="(v) => { if (!v) cancelDisableDomainSeparation() }"
+    >
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton
+            :label="t('common.cancel')"
+            color="neutral"
+            variant="outline"
+            @click="cancelDisableDomainSeparation"
+          />
+          <UButton
+            :label="t('settings.disableDomainSeparationConfirm')"
+            color="warning"
+            @click="confirmDisableDomainSeparation"
+          />
+        </div>
+      </template>
+    </UModal>
+
+    <UModal
+      :open="domainSeparationSaveConfirmOpen"
+      :title="t('domainSeparationConfirm.title')"
+      :description="t('domainSeparationConfirm.description')"
+      @update:open="(v) => { if (!v) domainSeparationSaveConfirmOpen = false }"
+    >
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton
+            :label="t('common.cancel')"
+            color="neutral"
+            variant="outline"
+            @click="() => { domainSeparationSaveConfirmOpen = false }"
+          />
+          <UButton
+            :label="t('domainSeparationConfirm.confirm')"
+            color="warning"
+            :loading="savingServer"
+            @click="performSaveServerSettings"
+          />
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<style scoped>
+.settings-referer-section {
+  min-width: 0;
+}
+
+.settings-referer-field :deep(textarea),
+.settings-referer-field :deep(> div) {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
+.settings-referer-field :deep(textarea) {
+  min-height: 5.5rem;
+  resize: none;
+}
+</style>
@@ -2,48 +2,98 @@
 import logoLight from '~/assets/image/logo-light.png'
 import logoDark from '~/assets/image/logo-dark.png'
 import { isPasswordValid } from '~/utils/password-strength'
+import { willActivateDomainSeparation } from '~/utils/domain-separation'

 const route = useRoute()
 const router = useRouter()
 const { setup, migrate, fetchStatus } = useAuth()
 const toast = useToast()
+const { t, locale } = useI18n()

-const isMigrate = computed(() => route.query.migrate === '1')
+const domainSeparationDocUrl = computed(() =>
+  locale.value === 'en'
+    ? 'https://o96u.github.io/PicHost/en/guide/domain-separation'
+    : 'https://o96u.github.io/PicHost/guide/domain-separation'
+)
+
+const needsMigration = ref(false)
+const isMigrate = computed(() => needsMigration.value || route.query.migrate === '1')

 const username = ref('')
 const password = ref('')
 const confirmPassword = ref('')
 const allowRegistration = ref(false)
+const domainSeparation = ref(false)
+const siteBaseUrl = ref('')
+const imageBaseUrl = ref('')
 const loading = ref(false)
+const domainSeparationConfirmOpen = ref(false)

-const canSubmit = computed(() =>
-  Boolean(username.value && password.value && confirmPassword.value)
-  && password.value === confirmPassword.value
-  && isPasswordValid(password.value)
-  && AUTH_USERNAME_PATTERN.test(username.value.trim())
+const domainSeparationWouldActivate = computed(() =>
+  willActivateDomainSeparation(
+    domainSeparation.value,
+    siteBaseUrl.value,
+    imageBaseUrl.value
+  )
 )

+const canSubmit = computed(() => {
+  if (!username.value || !password.value || !confirmPassword.value) return false
+  if (password.value !== confirmPassword.value) return false
+  if (!isPasswordValid(password.value)) return false
+  if (!AUTH_USERNAME_PATTERN.test(username.value.trim())) return false
+  if (domainSeparation.value) {
+    if (!siteBaseUrl.value.trim() || !imageBaseUrl.value.trim()) return false
+  }
+  return true
+})
+
 onMounted(async () => {
  const status = await fetchStatus()
+  needsMigration.value = status.needsMigration
+  if (status.legacyMode && !status.needsMigration) {
+    await router.replace('/')
+    return
+  }
  if (status.initialized && !status.needsMigration) {
    await router.replace('/')
+    return
  }
 })

+const detectedOriginPlaceholder = computed(() =>
+  import.meta.client ? window.location.origin : ''
+)
+
 async function submit() {
  if (!canSubmit.value || loading.value) return

  if (password.value !== confirmPassword.value) {
-    toast.add({ title: '两次输入的密码不一致', color: 'error' })
+    toast.add({ title: t('auth.passwordMismatch'), color: 'error' })
    return
  }

+  if (domainSeparationWouldActivate.value) {
+    domainSeparationConfirmOpen.value = true
+    return
+  }
+
+  await performSubmit()
+}
+
+async function performSubmit() {
+  domainSeparationConfirmOpen.value = false
+  if (!canSubmit.value || loading.value) return
+
  loading.value = true
  try {
    const payload = {
      username: username.value.trim(),
      password: password.value,
-      allowRegistration: allowRegistration.value
+      allowRegistration: allowRegistration.value,
+      domainSeparation: domainSeparation.value,
+      siteBaseUrl: domainSeparation.value ? siteBaseUrl.value.trim() : undefined,
+      imageBaseUrl: domainSeparation.value ? imageBaseUrl.value.trim() : undefined
    }
    const result = isMigrate.value
      ? await migrate(payload)
@@ -51,7 +101,7 @@ async function submit() {

    if (result.ok) {
      toast.add({
-        title: isMigrate.value ? '账号迁移完成' : '初始化完成',
+        title: isMigrate.value ? t('setup.migrateSuccess') : t('setup.initSuccess'),
        color: 'success'
      })
      await router.replace('/')
@@ -65,8 +115,11 @@ async function submit() {
 </script>

 <template>
-  <div class="flex min-h-screen items-center justify-center bg-muted/30 p-4 sm:p-6">
-    <div class="w-full max-w-sm rounded-2xl border border-default bg-elevated p-6 shadow-lg sm:p-8">
+  <div class="relative flex min-h-screen items-center justify-center bg-muted/30 p-4 sm:p-6">
+    <div class="absolute top-4 right-4">
+      <AuthPagePreferences />
+    </div>
+    <div class="w-full max-w-sm rounded-2xl border border-default bg-elevated p-6 shadow-lg sm:max-w-md sm:p-8">
      <div class="mb-8 space-y-3 text-center">
        <div class="mx-auto inline-flex items-center justify-center">
          <img
@@ -91,7 +144,7 @@ async function submit() {
            <span class="text-highlighted">Pic</span><span class="text-primary">Host</span>
          </h1>
          <p class="text-sm text-muted">
-            {{ isMigrate ? '迁移到账号密码登录' : '首次使用，创建管理员账号' }}
+            {{ isMigrate ? t('setup.migrateTitle') : t('setup.initTitle') }}
          </p>
        </div>
      </div>
@@ -105,12 +158,12 @@ async function submit() {
            for="setup-username"
            class="block text-sm font-medium text-default"
          >
-            用户名
+            {{ t('auth.username') }}
          </label>
          <UInput
            id="setup-username"
            v-model="username"
-            placeholder="3–32 位字母、数字或下划线"
+            :placeholder="t('setup.usernamePlaceholder')"
            autocomplete="username"
            size="lg"
            class="w-full"
@@ -123,17 +176,13 @@ async function submit() {
            for="setup-password"
            class="block text-sm font-medium text-default"
          >
-            密码
+            {{ t('auth.password') }}
          </label>
-          <UInput
+          <PasswordInput
            id="setup-password"
            v-model="password"
-            type="password"
-            placeholder="设置登录密码"
+            :placeholder="t('setup.passwordPlaceholder')"
            autocomplete="new-password"
-            size="lg"
-            class="w-full"
-            :ui="{ root: 'w-full' }"
          />
          <PasswordStrength :password="password" />
        </div>
@@ -143,28 +192,75 @@ async function submit() {
            for="setup-confirm"
            class="block text-sm font-medium text-default"
          >
-            确认密码
+            {{ t('auth.confirmPassword') }}
          </label>
-          <UInput
+          <PasswordInput
            id="setup-confirm"
            v-model="confirmPassword"
-            type="password"
-            placeholder="再次输入密码"
+            :placeholder="t('setup.confirmPlaceholder')"
            autocomplete="new-password"
-            size="lg"
-            class="w-full"
-            :ui="{ root: 'w-full' }"
          />
        </div>

        <label class="flex cursor-pointer items-center gap-2 text-sm text-default">
          <UCheckbox v-model="allowRegistration" />
-          允许其他用户注册
+          {{ t('setup.allowRegistration') }}
        </label>

+        <div class="space-y-3 rounded-xl border border-default bg-muted/20 p-4">
+          <label class="flex cursor-pointer items-start gap-2.5">
+            <UCheckbox
+              v-model="domainSeparation"
+              class="mt-0.5"
+            />
+            <span>
+              <span class="block text-sm font-medium">{{ t('setup.domainSeparation') }}</span>
+              <span class="mt-1 block text-xs leading-relaxed text-muted">
+                {{ t('setup.domainSeparationHint') }}
+              </span>
+            </span>
+          </label>
+
+          <template v-if="domainSeparation">
+            <p class="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>
+            <div class="space-y-2">
+              <label class="text-sm">{{ t('setup.siteBaseUrl') }}</label>
+              <p class="text-xs text-muted">
+                {{ t('setup.siteBaseUrlHint') }}
+              </p>
+              <UInput
+                v-model="siteBaseUrl"
+                :placeholder="detectedOriginPlaceholder || t('setup.siteBaseUrlPlaceholder')"
+                class="w-full font-mono text-sm"
+              />
+            </div>
+            <div class="space-y-2">
+              <label class="text-sm">{{ t('setup.imageBaseUrl') }}</label>
+              <p class="text-xs text-muted">
+                {{ t('setup.imageBaseUrlHint') }}
+              </p>
+              <UInput
+                v-model="imageBaseUrl"
+                :placeholder="t('setup.imageBaseUrlPlaceholder')"
+                class="w-full font-mono text-sm"
+              />
+            </div>
+          </template>
+        </div>
+
        <UButton
          type="submit"
-          :label="isMigrate ? '完成迁移' : '创建并进入'"
+          :label="isMigrate ? t('setup.migrateSubmit') : t('setup.initSubmit')"
          icon="i-lucide-user-plus"
          size="lg"
          block
@@ -174,5 +270,29 @@ async function submit() {
        />
      </form>
    </div>
+
+    <UModal
+      :open="domainSeparationConfirmOpen"
+      :title="t('domainSeparationConfirm.title')"
+      :description="t('domainSeparationConfirm.description')"
+      @update:open="(v) => { if (!v) domainSeparationConfirmOpen = false }"
+    >
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton
+            :label="t('common.cancel')"
+            color="neutral"
+            variant="outline"
+            @click="() => { domainSeparationConfirmOpen = false }"
+          />
+          <UButton
+            :label="t('domainSeparationConfirm.confirm')"
+            color="warning"
+            :loading="loading"
+            @click="performSubmit"
+          />
+        </div>
+      </template>
+    </UModal>
  </div>
 </template>
@@ -1,551 +0,0 @@
-<script setup lang="ts">
-interface StatsResponse {
-  uploadToday: number
-  uploadMonth: number
-  deleteToday: number
-  deleteMonth: number
-  uploadTotal: number
-  deleteTotal: number
-  uploadBytesTotal: number
-  storedCount: number
-  userCount?: number
-  bySource: {
-    web: number
-    api: number
-    twikoo: number
-  }
-  byFolder: Array<{
-    folder: string
-    count: number
-    bytes: number
-  }>
-  byFolderUploads: Array<{
-    folder: string
-    count: number
-  }>
-}
-
-const {
-  items,
-  page: galleryPage,
-  totalPages: galleryTotalPages,
-  total: galleryTotal,
-  loading: galleryLoading,
-  searchQuery,
-  activeSearch,
-  listSummary,
-  refreshList,
-  initializeList,
-  setActiveFolder,
-  submitSearch,
-  goToPage,
-  removeItems
-} = useImageList()
-
-const { formatFileSize } = useFileSize()
-const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
-const toast = useToast()
-
-const stats = ref<StatsResponse | null>(null)
-const statsLoading = ref(false)
-
-const selectedKeys = ref<Set<string>>(new Set())
-const deletingKeys = ref<Set<string>>(new Set())
-const deleteModalOpen = ref(false)
-const deleteTargetKeys = ref<string[]>([])
-const batchDeleting = ref(false)
-const showScrollTop = ref(false)
-const currentFolder = ref('all')
-const folderOptions = ref<string[]>(['images'])
-
-const folderSelectItems = computed(() => [
-  { label: '全部', value: 'all' },
-  ...folderOptions.value.map(folder => ({ label: folder, value: folder }))
-])
-
-const selectedCount = computed(() => selectedKeys.value.size)
-
-const FOLDER_CHART_COLORS = [
-  'var(--ui-primary)',
-  '#10b981',
-  '#f59e0b',
-  '#8b5cf6',
-  '#ec4899',
-  '#06b6d4'
-]
-
-const folderUploadItems = computed(() =>
-  (stats.value?.byFolderUploads ?? []).map((item, index) => ({
-    key: item.folder,
-    label: item.folder,
-    count: item.count,
-    color: FOLDER_CHART_COLORS[index % FOLDER_CHART_COLORS.length]!
-  }))
-)
-
-const donutSegments = computed(() =>
-  folderUploadItems.value.map(item => ({
-    label: item.label,
-    value: item.count,
-    color: item.color
-  }))
-)
-
-const folderStats = computed(() => stats.value?.byFolder ?? [])
-
-const folderMaxBytes = computed(() =>
-  Math.max(...folderStats.value.map(item => item.bytes), 1)
-)
-
-const uploadChartTotal = computed(() =>
-  folderUploadItems.value.reduce((sum, item) => sum + item.count, 0)
-)
-
-const statCards = computed(() => {
-  const s = stats.value
-  const base = [
-    { label: '今日上传', value: s?.uploadToday ?? '—' },
-    { label: '本月上传', value: s?.uploadMonth ?? '—' },
-    { label: '累计上传', value: s?.uploadTotal ?? '—' },
-    { label: '当前库存', value: s?.storedCount ?? '—' },
-    { label: '今日删除', value: s?.deleteToday ?? '—' },
-    { label: '本月删除', value: s?.deleteMonth ?? '—' },
-    isAdmin.value
-      ? { label: '注册用户数量', value: s?.userCount ?? '—' }
-      : { label: '累计删除', value: s?.deleteTotal ?? '—' },
-    { label: '累计上传体积', value: s ? formatFileSize(s.uploadBytesTotal) : '—' }
-  ]
-  return base
-})
-
-function onWindowScroll() {
-  showScrollTop.value = window.scrollY > 400
-}
-
-function scrollToTop() {
-  window.scrollTo({ top: 0, behavior: 'smooth' })
-}
-
-function folderPercent(bytes: number) {
-  return Math.round((bytes / folderMaxBytes.value) * 100)
-}
-
-async function loadFolders() {
-  const data = await $fetch<{ folders: string[] }>('/api/folders', {
-    credentials: 'include'
-  })
-  folderOptions.value = [...data.folders]
-}
-
-async function fetchStats() {
-  stats.value = await $fetch<StatsResponse>('/api/stats', {
-    credentials: 'include'
-  })
-}
-
-async function refreshStats() {
-  statsLoading.value = true
-  try {
-    await fetchStats()
-  } catch (error: unknown) {
-    handleAuthError(error)
-    if (isAuthenticated.value) {
-      toast.add({ title: '加载统计失败', color: 'error' })
-    }
-  } finally {
-    statsLoading.value = false
-  }
-}
-
-async function refreshGallery() {
-  if (!isAuthenticated.value) return
-  selectedKeys.value = new Set()
-  try {
-    await Promise.all([refreshList(), loadFolders()])
-  } catch (error: unknown) {
-    handleAuthError(error)
-  }
-}
-
-async function refreshAll() {
-  if (!isAuthenticated.value) return
-  currentFolder.value = 'all'
-  await Promise.all([
-    refreshStats(),
-    initializeList('all').then(() => loadFolders())
-  ])
-}
-
-async function handleFolderChange(folder: string) {
-  if (!isAuthenticated.value) return
-  currentFolder.value = folder
-  selectedKeys.value = new Set()
-  try {
-    await setActiveFolder(folder)
-  } catch (error: unknown) {
-    handleAuthError(error)
-  }
-}
-
-async function handleSearch() {
-  if (!isAuthenticated.value) return
-  selectedKeys.value = new Set()
-  try {
-    await submitSearch()
-  } catch (error: unknown) {
-    handleAuthError(error)
-  }
-}
-
-async function clearSearch() {
-  searchQuery.value = ''
-  if (!activeSearch.value) return
-  await refreshGallery()
-}
-
-function requestDelete(key: string) {
-  if (!isAuthenticated.value) return
-  deleteTargetKeys.value = [key]
-  deleteModalOpen.value = true
-}
-
-function requestBatchDelete() {
-  if (!isAuthenticated.value) return
-  if (!selectedCount.value) {
-    toast.add({ title: '请先选择图片', color: 'warning' })
-    return
-  }
-  deleteTargetKeys.value = Array.from(selectedKeys.value)
-  deleteModalOpen.value = true
-}
-
-async function confirmDelete() {
-  const keys = [...deleteTargetKeys.value]
-  if (!keys.length || !isAuthenticated.value) return
-
-  batchDeleting.value = true
-  for (const key of keys) {
-    deletingKeys.value.add(key)
-  }
-
-  const deleted: string[] = []
-  const failed: string[] = []
-
-  try {
-    const response = await $fetch<{
-      deleted: string[]
-      failed: Array<{ key: string }>
-    }>('/api/images/batch-delete', {
-      method: 'POST',
-      body: { keys }
-    })
-    deleted.push(...response.deleted)
-    failed.push(...response.failed.map(item => item.key))
-
-    if (deleted.length) {
-      removeItems(deleted)
-      for (const key of deleted) {
-        selectedKeys.value.delete(key)
-      }
-      selectedKeys.value = new Set(selectedKeys.value)
-      toast.add({
-        title: `已删除 ${deleted.length} 张图片`,
-        color: 'success'
-      })
-      await refreshStats()
-    }
-
-    if (failed.length) {
-      toast.add({
-        title: `${failed.length} 张图片删除失败`,
-        color: 'error'
-      })
-    }
-
-    deleteModalOpen.value = false
-    deleteTargetKeys.value = []
-  } catch (error: unknown) {
-    handleAuthError(error)
-    if (isAuthenticated.value) {
-      toast.add({ title: '删除失败', color: 'error' })
-    }
-  } finally {
-    batchDeleting.value = false
-    deletingKeys.value = new Set()
-  }
-}
-
-async function handleGalleryPageChange(targetPage: number) {
-  selectedKeys.value = new Set()
-  try {
-    await goToPage(targetPage)
-  } catch (error: unknown) {
-    handleAuthError(error)
-  }
-}
-
-onMounted(async () => {
-  window.addEventListener('scroll', onWindowScroll, { passive: true })
-  const status = await fetchStatus()
-  if (!status.initialized && !status.legacyMode) {
-    await navigateTo('/setup')
-    return
-  }
-  await checkSession()
-})
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', onWindowScroll)
-})
-
-watch(isAuthenticated, async (authed, prev) => {
-  if (authed && prev === false) {
-    await nextTick()
-    await refreshAll()
-  } else if (!authed) {
-    stats.value = null
-    items.value = []
-    selectedKeys.value = new Set()
-  }
-})
-</script>
-
-<template>
-  <div class="min-h-screen">
-    <div
-      v-if="isChecking"
-      class="flex min-h-screen items-center justify-center"
-    >
-      <div class="flex flex-col items-center gap-3 text-muted">
-        <UIcon
-          name="i-lucide-loader-circle"
-          class="size-8 animate-spin"
-        />
-        <p class="text-sm">
-          正在验证登录状态…
-        </p>
-      </div>
-    </div>
-
-    <AdminLoginGate v-else-if="!isAuthenticated" />
-
-    <AppShell v-else>
-      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <h1 class="text-2xl font-semibold tracking-tight">
-            统计
-          </h1>
-          <p class="text-sm text-muted">
-            数据概览与图库记录
-          </p>
-        </div>
-
-        <UButton
-          icon="i-lucide-refresh-cw"
-          label="刷新"
-          variant="outline"
-          :loading="statsLoading || galleryLoading"
-          @click="refreshAll"
-        />
-      </div>
-
-      <section class="grid grid-cols-2 gap-3 lg:grid-cols-4">
-        <div
-          v-for="item in statCards"
-          :key="item.label"
-          class="rounded-xl border border-default bg-elevated p-4"
-        >
-          <p class="text-xs text-muted">
-            {{ item.label }}
-          </p>
-          <p class="mt-1 text-2xl font-semibold tabular-nums">
-            {{ item.value }}
-          </p>
-        </div>
-      </section>
-
-      <section class="grid gap-4 lg:grid-cols-2">
-        <div class="rounded-xl border border-default bg-elevated p-4">
-          <h2 class="mb-3 text-sm font-medium text-muted">
-            上传目录分布
-          </h2>
-          <div
-            v-if="!uploadChartTotal"
-            class="py-6 text-center text-xs text-muted"
-          >
-            暂无数据
-          </div>
-          <StatsDonut
-            v-else
-            :segments="donutSegments"
-            :size="88"
-          />
-        </div>
-
-        <div class="rounded-xl border border-default bg-elevated p-4">
-          <h2 class="mb-3 text-sm font-medium text-muted">
-            目录占用
-          </h2>
-          <div
-            v-if="!folderStats.length"
-            class="py-6 text-center text-xs text-muted"
-          >
-            暂无数据
-          </div>
-          <ul
-            v-else
-            class="space-y-2.5"
-          >
-            <li
-              v-for="item in folderStats"
-              :key="item.folder"
-            >
-              <div class="mb-1 flex items-center justify-between gap-2 text-xs">
-                <span class="font-medium">{{ item.folder }}</span>
-                <span class="tabular-nums text-muted">
-                  {{ item.count }} 张 · {{ formatFileSize(item.bytes) }}
-                </span>
-              </div>
-              <div class="h-1.5 overflow-hidden rounded-full bg-muted/50">
-                <div
-                  class="h-full rounded-full bg-primary/70"
-                  :style="{ width: `${Math.max(folderPercent(item.bytes), item.bytes ? 4 : 0)}%` }"
-                />
-              </div>
-            </li>
-          </ul>
-        </div>
-      </section>
-
-      <section class="space-y-4">
-        <form
-          class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
-          @submit.prevent="handleSearch"
-        >
-          <div class="min-w-0 shrink-0">
-            <h2 class="text-lg font-medium">
-              图库记录
-            </h2>
-            <p
-              v-if="!galleryLoading"
-              class="text-sm text-muted"
-            >
-              {{ listSummary }}
-            </p>
-          </div>
-
-          <div class="flex flex-wrap items-center justify-end gap-2">
-            <div class="flex items-center gap-1.5">
-              <span class="text-xs text-muted shrink-0">目录</span>
-              <USelect
-                v-model="currentFolder"
-                :items="folderSelectItems"
-                class="w-28"
-                @update:model-value="handleFolderChange"
-              />
-            </div>
-
-            <UInput
-              v-model="searchQuery"
-              icon="i-lucide-search"
-              placeholder="搜索文件名"
-              class="w-40 sm:w-48"
-              size="sm"
-              :disabled="galleryLoading"
-            />
-
-            <UButton
-              type="submit"
-              label="搜索"
-              size="sm"
-              :loading="galleryLoading"
-            />
-            <UButton
-              v-if="activeSearch"
-              type="button"
-              label="清除"
-              size="sm"
-              variant="ghost"
-              color="neutral"
-              @click="clearSearch"
-            />
-
-            <UButton
-              type="button"
-              icon="i-lucide-refresh-cw"
-              label="刷新"
-              variant="outline"
-              size="sm"
-              :loading="galleryLoading"
-              @click="refreshGallery"
-            />
-            <UBadge
-              v-if="selectedCount"
-              color="primary"
-              variant="subtle"
-            >
-              已选 {{ selectedCount }}
-            </UBadge>
-            <UButton
-              type="button"
-              icon="i-lucide-trash-2"
-              label="批量删除"
-              color="error"
-              variant="soft"
-              size="sm"
-              :disabled="!selectedCount"
-              @click="requestBatchDelete"
-            />
-          </div>
-        </form>
-
-        <div
-          v-if="galleryLoading"
-          class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-        >
-          <USkeleton
-            v-for="n in 12"
-            :key="n"
-            class="aspect-square rounded-lg"
-          />
-        </div>
-
-        <ImageGrid
-          v-else
-          :items="items"
-          :selected-keys="selectedKeys"
-          :deleting-keys="deletingKeys"
-          @update:selected-keys="selectedKeys = $event"
-          @delete="requestDelete"
-        />
-
-        <PaginationBar
-          v-if="!galleryLoading && galleryTotal > 0"
-          :page="galleryPage"
-          :total-pages="galleryTotalPages"
-          :total="galleryTotal"
-          unit="张"
-          :loading="galleryLoading"
-          @update:page="handleGalleryPageChange"
-        />
-      </section>
-
-      <DeleteConfirmModal
-        v-model:open="deleteModalOpen"
-        :count="deleteTargetKeys.length"
-        :loading="batchDeleting"
-        @confirm="confirmDelete"
-      />
-
-      <UButton
-        v-show="showScrollTop"
-        icon="i-lucide-arrow-up"
-        aria-label="回到顶部"
-        color="primary"
-        class="fixed bottom-6 right-6 z-50 shadow-lg"
-        size="lg"
-        @click="scrollToTop"
-      />
-    </AppShell>
-  </div>
-</template>
@@ -0,0 +1,363 @@
+<script setup lang="ts">
+import type { StorageFormPayload } from '~/components/storage/StorageBackendForm.vue'
+import type { StorageBackendItem, StorageListResponse } from '~/types/storage'
+
+const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
+const toast = useToast()
+const { t } = useI18n()
+
+const loading = ref(true)
+const busyId = ref<string | null>(null)
+const storageData = ref<StorageListResponse | null>(null)
+
+const formOpen = ref(false)
+const formMode = ref<'create' | 'edit'>('create')
+const editingBackend = ref<StorageBackendItem | null>(null)
+const formInstanceKey = ref('create')
+const savingForm = ref(false)
+
+const deleteOpen = ref(false)
+const deleteTarget = ref<StorageBackendItem | null>(null)
+const deleteConfirmName = ref('')
+const deleting = ref(false)
+
+const defaultBackendName = computed(() => {
+  const backend = storageData.value?.backends.find(item => item.isDefault)
+  return backend?.name ?? t('storage.backendLocal')
+})
+
+async function loadStorage() {
+  loading.value = true
+  try {
+    storageData.value = await $fetch<StorageListResponse>('/api/admin/storage', {
+      credentials: 'include'
+    })
+  } catch (error: unknown) {
+    handleAuthError(error)
+    if (isAuthenticated.value) {
+      toast.add({ title: t('storage.loadFailed'), color: 'error' })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+const { quotaToBytes } = useFileSize()
+
+function buildPatchBody(payload: StorageFormPayload) {
+  const quotaBytes = quotaToBytes(payload.quotaValue, payload.quotaUnit)
+  const body: Record<string, unknown> = {
+    name: payload.name,
+    provider: payload.provider,
+    servingMode: payload.servingMode,
+    publicUrl: payload.publicUrl,
+    quotaBytes,
+    config: payload.config
+  }
+  if (payload.secrets.accessKeyId || payload.secrets.secretAccessKey) {
+    body.secrets = payload.secrets
+  }
+  return body
+}
+
+function openCreate() {
+  formMode.value = 'create'
+  editingBackend.value = null
+  formInstanceKey.value = `create-${Date.now()}`
+  formOpen.value = true
+}
+
+function openEdit(backend: StorageBackendItem) {
+  formMode.value = 'edit'
+  editingBackend.value = backend
+  formInstanceKey.value = backend.id
+  formOpen.value = true
+}
+
+async function onFormSubmit(payload: StorageFormPayload) {
+  if (!quotaToBytes(payload.quotaValue, payload.quotaUnit)) {
+    toast.add({ title: t('storage.quotaRequired'), color: 'warning' })
+    return
+  }
+
+  if (formMode.value === 'create') {
+    if (!payload.secrets.accessKeyId || !payload.secrets.secretAccessKey) {
+      toast.add({ title: t('storage.secretsRequired'), color: 'warning' })
+      return
+    }
+  }
+
+  savingForm.value = true
+  try {
+    const body = buildPatchBody(payload)
+    if (formMode.value === 'create') {
+      await $fetch('/api/admin/storage', {
+        method: 'POST',
+        credentials: 'include',
+        body
+      })
+      toast.add({ title: t('storage.created'), color: 'success' })
+    } else if (editingBackend.value) {
+      await $fetch(`/api/admin/storage/${editingBackend.value.id}`, {
+        method: 'PATCH',
+        credentials: 'include',
+        body
+      })
+      toast.add({ title: t('storage.saved'), color: 'success' })
+    }
+    formOpen.value = false
+    await loadStorage()
+  } catch {
+    toast.add({ title: t('storage.saveFailed'), color: 'error' })
+  } finally {
+    savingForm.value = false
+  }
+}
+
+async function setDefault(backend: StorageBackendItem) {
+  busyId.value = backend.id
+  try {
+    await $fetch(`/api/admin/storage/${backend.id}`, {
+      method: 'PATCH',
+      credentials: 'include',
+      body: { isDefault: true, enabled: true }
+    })
+    toast.add({ title: t('storage.defaultUpdated'), color: 'success' })
+    await loadStorage()
+  } catch {
+    toast.add({ title: t('storage.saveFailed'), color: 'error' })
+  } finally {
+    busyId.value = null
+  }
+}
+
+async function testBackend(backend: StorageBackendItem) {
+  busyId.value = backend.id
+  try {
+    const result = await $fetch<{ ok: boolean, message: string }>(
+      `/api/admin/storage/${backend.id}/test`,
+      { method: 'POST', credentials: 'include' }
+    )
+    toast.add({
+      title: result.ok ? t('storage.testSuccess') : t('storage.testFailed'),
+      description: result.message,
+      color: result.ok ? 'success' : 'error'
+    })
+  } catch {
+    toast.add({ title: t('storage.testFailed'), color: 'error' })
+  } finally {
+    busyId.value = null
+  }
+}
+
+async function toggleEnabled(backend: StorageBackendItem) {
+  busyId.value = backend.id
+  try {
+    await $fetch(`/api/admin/storage/${backend.id}`, {
+      method: 'PATCH',
+      credentials: 'include',
+      body: { enabled: !backend.enabled }
+    })
+    await loadStorage()
+  } catch {
+    toast.add({ title: t('storage.saveFailed'), color: 'error' })
+  } finally {
+    busyId.value = null
+  }
+}
+
+function confirmDelete(backend: StorageBackendItem) {
+  if (backend.usage.count > 0) {
+    toast.add({ title: t('storage.deleteBlockedImages'), color: 'warning' })
+    return
+  }
+  deleteTarget.value = backend
+  deleteConfirmName.value = backend.name
+  deleteOpen.value = true
+}
+
+async function executeDelete() {
+  const target = deleteTarget.value
+  if (!target) return
+  deleting.value = true
+  try {
+    await $fetch(`/api/admin/storage/${target.id}`, {
+      method: 'DELETE',
+      credentials: 'include'
+    })
+    toast.add({ title: t('storage.deleted'), color: 'success' })
+    deleteOpen.value = false
+    deleteTarget.value = null
+    await loadStorage()
+  } catch (error: unknown) {
+    const message = typeof error === 'object' && error !== null && 'data' in error
+      ? String((error as { data?: { message?: string } }).data?.message ?? '')
+      : ''
+    toast.add({
+      title: message || t('storage.deleteFailed'),
+      color: 'error'
+    })
+  } finally {
+    deleting.value = false
+  }
+}
+
+onMounted(async () => {
+  const status = await fetchStatus()
+  if (!status.initialized && !status.legacyMode) {
+    await navigateTo('/setup')
+    return
+  }
+  await checkSession()
+  if (!isAuthenticated.value || !isAdmin.value) {
+    await navigateTo('/')
+    return
+  }
+  await loadStorage()
+})
+
+watch(isAuthenticated, async (authed) => {
+  if (authed && isAdmin.value) {
+    await loadStorage()
+  }
+})
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div
+      v-if="isChecking"
+      class="flex min-h-screen items-center justify-center"
+    >
+      <UIcon
+        name="i-lucide-loader-circle"
+        class="size-8 animate-spin text-muted"
+      />
+    </div>
+
+    <AdminLoginGate v-else-if="!isAuthenticated" />
+
+    <AppShell v-else-if="isAdmin">
+      <div class="flex items-start justify-between gap-3">
+        <div class="min-w-0">
+          <h1 class="text-2xl font-semibold tracking-tight">
+            {{ t('storage.pageTitle') }}
+          </h1>
+          <p class="text-sm text-muted">
+            {{ t('storage.pageSubtitle') }}
+          </p>
+        </div>
+
+        <UButton
+          :label="t('storage.addBackend')"
+          icon="i-lucide-plus"
+          size="sm"
+          :disabled="storageData?.envOverride"
+          @click="openCreate"
+        />
+      </div>
+
+      <section class="mt-5 space-y-5">
+        <UAlert
+          v-if="storageData?.envOverride"
+          color="warning"
+          variant="subtle"
+          :title="t('storage.envOverride')"
+          icon="i-lucide-triangle-alert"
+        />
+
+        <div
+          v-if="loading"
+          class="flex justify-center py-16"
+        >
+          <UIcon
+            name="i-lucide-loader-circle"
+            class="size-6 animate-spin text-muted"
+          />
+        </div>
+
+        <template v-else-if="storageData">
+          <StorageOverview
+            :backends="storageData.backends"
+            :loading="loading"
+          />
+
+          <UAlert
+            v-if="!storageData.envOverride"
+            color="success"
+            variant="subtle"
+            icon="i-lucide-info"
+            :description="t('storage.defaultStorageTip', { name: defaultBackendName })"
+          />
+
+          <div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
+            <StorageBackendCard
+              v-for="backend in storageData.backends"
+              :key="backend.id"
+              :backend="backend"
+              :env-override="storageData.envOverride"
+              :busy="busyId === backend.id"
+              @set-default="setDefault(backend)"
+              @edit="openEdit(backend)"
+              @test="testBackend(backend)"
+              @toggle-enabled="toggleEnabled(backend)"
+              @delete="confirmDelete(backend)"
+            />
+          </div>
+
+          <StorageSupportedBackends />
+        </template>
+      </section>
+    </AppShell>
+
+    <UModal
+      v-model:open="formOpen"
+      :ui="{ content: 'max-w-2xl sm:max-w-3xl' }"
+    >
+      <template #content>
+        <div class="p-5 sm:p-6">
+          <h2 class="mb-4 text-base font-semibold">
+            {{ formMode === 'create' ? t('storage.addBackend') : t('storage.editBackend') }}
+          </h2>
+          <div class="max-h-[75vh] overflow-y-auto pr-1">
+            <StorageBackendForm
+              :key="formInstanceKey"
+              :backend="editingBackend"
+              :create-mode="formMode === 'create'"
+              :saving="savingForm"
+              @submit="onFormSubmit"
+              @cancel="formOpen = false"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+
+    <UModal v-model:open="deleteOpen">
+      <template #content>
+        <div class="p-5 sm:p-6">
+          <h2 class="text-base font-semibold">
+            {{ t('storage.deleteConfirmTitle') }}
+          </h2>
+          <p class="mt-2 text-sm text-muted">
+            {{ t('storage.deleteConfirmBody', { name: deleteConfirmName }) }}
+          </p>
+          <div class="mt-5 flex justify-end gap-2">
+            <UButton
+              :label="t('common.cancel')"
+              variant="outline"
+              color="neutral"
+              @click="() => { deleteOpen = false }"
+            />
+            <UButton
+              :label="t('common.delete')"
+              color="error"
+              :loading="deleting"
+              @click="executeDelete"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
@@ -0,0 +1,19 @@
+export type LoginVerificationMethod = 'slider' | 'turnstile' | 'cap'
+
+export interface LoginVerificationPublicConfig {
+  method: LoginVerificationMethod
+  turnstileSiteKey?: string
+  capApiEndpoint?: string
+}
+
+export type LoginVerificationPayload = {
+  method: 'slider'
+  captchaId: string
+  captchaPosition: number
+} | {
+  method: 'turnstile'
+  turnstileToken: string
+} | {
+  method: 'cap'
+  capToken: string
+}
@@ -36,6 +36,14 @@ export interface ImageItem {
    userId: number | null
    username: string
  }
+  /** 图片所在存储后端（统计/管理列表） */
+  storage?: {
+    id: string
+    name: string
+    type: 'local' | 's3'
+  }
+  /** 上传来源：网页或 API（来自活动日志） */
+  uploadSource?: 'web' | 'api'
 }

 export interface UploadErrorItem {
@@ -0,0 +1,36 @@
+export type LogAction = 'upload' | 'delete'
+export type LogSource = 'web' | 'api'
+
+export interface ActivityLogStorage {
+  id: string
+  name: string
+  type: string
+}
+
+export interface ActivityLogItem {
+  id: number
+  action: LogAction
+  key: string
+  originalName: string
+  size: number
+  contentType: string
+  source: LogSource
+  userId: number | null
+  username: string | null
+  storage: ActivityLogStorage | null
+  createdAt: string
+}
+
+export interface ActivityLogListResponse {
+  items: ActivityLogItem[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+  summary: {
+    total: number
+    upload: number
+    delete: number
+  }
+  users?: Array<{ id: number, username: string }>
+}
@@ -0,0 +1,5 @@
+export type SettingsTab = 'basic' | 'domains' | 'access' | 'logs'
+
+export const ADMIN_SETTINGS_TABS: SettingsTab[] = ['basic', 'domains', 'access', 'logs']
+
+export const USER_SETTINGS_TABS: SettingsTab[] = ['logs']
@@ -0,0 +1,39 @@
+export type ServingMode = 'proxy' | 'public'
+
+export interface StorageCapacity {
+  totalBytes: number | null
+  usedBytes: number
+  freeBytes: number | null
+  percent: number | null
+  source: 'disk' | 'quota'
+}
+
+export interface StorageBackendItem {
+  id: string
+  name: string
+  type: 'local' | 's3'
+  config: {
+    endpoint?: string
+    region?: string
+    bucket?: string
+    prefix?: string
+    forcePathStyle?: boolean
+  }
+  secretsMasked: {
+    accessKeyId?: string
+    secretAccessKey?: string
+  }
+  servingMode: ServingMode
+  publicUrl: string
+  quotaBytes: number | null
+  enabled: boolean
+  isDefault: boolean
+  usage: { count: number, bytes: number }
+  capacity: StorageCapacity
+}
+
+export interface StorageListResponse {
+  backends: StorageBackendItem[]
+  activeBackendId: string
+  envOverride: boolean
+}
@@ -0,0 +1,24 @@
+export function hostnameFromBaseUrl(value: string): string | null {
+  const trimmed = value.trim()
+  if (!trimmed) return null
+  try {
+    return new URL(trimmed).hostname.toLowerCase()
+  } catch {
+    return null
+  }
+}
+
+/** 勾选分离且网站域、图片域主机名不同 → 保存后将启用双域名中间件隔离 */
+export function willActivateDomainSeparation(
+  enabled: boolean,
+  siteBaseUrl: string,
+  imageBaseUrl: string
+): boolean {
+  if (!enabled) return false
+  const site = siteBaseUrl.trim()
+  const image = imageBaseUrl.trim()
+  if (!site || !image) return false
+  const siteHost = hostnameFromBaseUrl(site)
+  const imageHost = hostnameFromBaseUrl(image)
+  return Boolean(siteHost && imageHost && siteHost !== imageHost)
+}
@@ -0,0 +1,24 @@
+export function getFileExtension(filename: string): string {
+  const base = filename.split(/[/\\]/).pop() ?? filename
+  const dot = base.lastIndexOf('.')
+  if (dot <= 0 || dot === base.length - 1) return '—'
+  return base.slice(dot + 1).toLowerCase()
+}
+
+export function getUrlPathname(url: string): string {
+  try {
+    return decodeURIComponent(new URL(url).pathname.replace(/^\/+/, ''))
+  } catch {
+    return url
+  }
+}
+
+export function getStorageKeyTail(key: string): string {
+  const prefix = 'images/'
+  return key.startsWith(prefix) ? key.slice(prefix.length) : key
+}
+
+export function formatImageDimensions(width: number | null, height: number | null): string | null {
+  if (!width || !height) return null
+  return `${width} × ${height} px`
+}
@@ -7,7 +7,7 @@ export interface PasswordCriteria {
  hasSpecial: boolean
 }

-export type PasswordStrengthLabel = '弱' | '中' | '强'
+export type PasswordStrengthLabel = 'weak' | 'medium' | 'strong'

 export function analyzePassword(password: string): {
  criteria: PasswordCriteria
@@ -24,7 +24,7 @@ export function analyzePassword(password: string): {

  const score = Object.values(criteria).filter(Boolean).length
  const label: PasswordStrengthLabel
-    = score <= 1 ? '弱' : score <= 3 ? '中' : '强'
+    = score <= 1 ? 'weak' : score <= 3 ? 'medium' : 'strong'

  return {
    criteria,
@@ -4,14 +4,13 @@ services:
    # 飞牛 Docker 对 Docker Hub 的「更新镜像」支持更好
    image: muxui/pichost:latest
    pull_policy: always
-    # 备用：GitHub Container Registry
-    # image: ghcr.io/O96u/pichost:latest
    container_name: pichost
    restart: unless-stopped
    ports:
      - "6892:6892"
    # 首次访问 Web 引导创建管理员，无需预先配置环境变量
    # 可选：environment 中设置 API_UPLOAD_TOKEN、ALLOWED_REFERER_HOSTS 等
+    # 运维：docker exec pichost reset-password | migrate [--apply] | slider | clear-domains [--site]
    volumes:
      # 冒号左边改成 NAS 上的实际存图目录（飞牛示例：/vol1/1000/pichost-data）
      - ./data:/data
@@ -0,0 +1,20 @@
+#!/bin/sh
+set -e
+
+if [ "$1" = "reset-password" ]; then
+  exec node /app/server/cli/reset-password.mjs "${@:2}"
+fi
+
+if [ "$1" = "migrate" ]; then
+  exec node /app/server/cli/migrate-to-single-images.mjs "${@:2}"
+fi
+
+if [ "$1" = "slider" ]; then
+  exec node /app/server/cli/slider.mjs "${@:2}"
+fi
+
+if [ "$1" = "clear-domains" ]; then
+  exec node /app/server/cli/clear-domains.mjs "${@:2}"
+fi
+
+exec node /app/.output/server/index.mjs "$@"
@@ -0,0 +1,142 @@
+import { defineConfig } from 'vitepress'
+import { withMermaid } from 'vitepress-plugin-mermaid'
+
+const docsBase = 'https://o96u.github.io/PicHost'
+
+const zhSidebar = [
+  {
+    text: '开始',
+    items: [
+      { text: '文档首页', link: '/guide/' },
+      { text: '快速开始', link: '/guide/getting-started' },
+      { text: '本地开发', link: '/guide/local-dev' }
+    ]
+  },
+  {
+    text: '部署与配置',
+    items: [
+      { text: '环境变量', link: '/guide/configuration' },
+      { text: '反向代理', link: '/guide/reverse-proxy' },
+      { text: '双域名分离', link: '/guide/domain-separation' },
+      { text: 'Cloudflare / CF 优选', link: '/guide/cloudflare-deployment' }
+    ]
+  },
+  {
+    text: '使用',
+    items: [
+      { text: '存储', link: '/guide/storage' },
+      { text: '用户与权限', link: '/guide/users-and-permissions' },
+      { text: 'API', link: '/guide/api' },
+      { text: 'Twikoo', link: '/guide/twikoo' }
+    ]
+  },
+  {
+    text: '升级',
+    items: [
+      { text: '更新日志', link: '/guide/changelog' },
+      { text: 'v1.2 迁移', link: '/guide/migration' },
+      { text: '常见问题', link: '/guide/faq' }
+    ]
+  }
+]
+
+const enSidebar = [
+  {
+    text: 'Getting started',
+    items: [
+      { text: 'Overview', link: '/en/guide/' },
+      { text: 'Quick start', link: '/en/guide/getting-started' },
+      { text: 'Local development', link: '/en/guide/local-dev' }
+    ]
+  },
+  {
+    text: 'Deploy & configure',
+    items: [
+      { text: 'Environment variables', link: '/en/guide/configuration' },
+      { text: 'Reverse proxy', link: '/en/guide/reverse-proxy' },
+      { text: 'Dual-domain separation', link: '/en/guide/domain-separation' },
+      { text: 'Cloudflare deployment', link: '/en/guide/cloudflare-deployment' }
+    ]
+  },
+  {
+    text: 'Usage',
+    items: [
+      { text: 'Storage', link: '/en/guide/storage' },
+      { text: 'Users & permissions', link: '/en/guide/users-and-permissions' },
+      { text: 'API', link: '/en/guide/api' },
+      { text: 'Twikoo', link: '/en/guide/twikoo' }
+    ]
+  },
+  {
+    text: 'Upgrade',
+    items: [
+      { text: 'Changelog', link: '/en/guide/changelog' },
+      { text: 'v1.2 migration', link: '/en/guide/migration' },
+      { text: 'FAQ', link: '/en/guide/faq' }
+    ]
+  }
+]
+
+export default withMermaid(
+  defineConfig({
+  base: '/PicHost/',
+  title: 'PicHost',
+  description: '自托管图床文档 · Self-hosted image hosting docs',
+  head: [['link', { rel: 'icon', href: '/PicHost/favicon.ico' }]],
+  vite: {
+    optimizeDeps: {
+      // mermaid → fastdom 为 CJS；dev 模式须预构建，否则整站白屏
+      include: ['mermaid', 'fastdom']
+    }
+  },
+  locales: {
+    root: {
+      label: '简体中文',
+      lang: 'zh-CN',
+      themeConfig: {
+        nav: [
+          { text: '指南', link: '/guide/getting-started' },
+          { text: 'API', link: '/guide/api' },
+          { text: 'GitHub', link: 'https://github.com/O96u/PicHost' }
+        ],
+        sidebar: zhSidebar,
+        docFooter: { prev: '上一页', next: '下一页' },
+        outline: { label: '本页目录' },
+        lastUpdated: { text: '最后更新' },
+        returnToTopLabel: '回到顶部',
+        sidebarMenuLabel: '菜单',
+        darkModeSwitchLabel: '主题',
+        langMenuLabel: '语言'
+      }
+    },
+    en: {
+      label: 'English',
+      lang: 'en-US',
+      link: '/en/',
+      themeConfig: {
+        nav: [
+          { text: 'Guide', link: '/en/guide/getting-started' },
+          { text: 'API', link: '/en/guide/api' },
+          { text: 'GitHub', link: 'https://github.com/O96u/PicHost' }
+        ],
+        sidebar: enSidebar,
+        docFooter: { prev: 'Previous', next: 'Next' },
+        outline: { label: 'On this page' },
+        lastUpdated: { text: 'Last updated' },
+        returnToTopLabel: 'Back to top',
+        sidebarMenuLabel: 'Menu',
+        darkModeSwitchLabel: 'Appearance',
+        langMenuLabel: 'Language'
+      }
+    }
+  },
+  themeConfig: {
+    socialLinks: [{ icon: 'github', link: 'https://github.com/O96u/PicHost' }],
+    search: { provider: 'local' },
+    editLink: {
+      pattern: `${docsBase}/edit/main/docs-site/:path`,
+      text: '在 GitHub 上编辑此页'
+    }
+  }
+  })
+)
@@ -0,0 +1,6 @@
+:root {
+  --vp-c-brand-1: #22c55e;
+  --vp-c-brand-2: #16a34a;
+  --vp-c-brand-3: #15803d;
+  --vp-c-brand-soft: rgba(34, 197, 94, 0.14);
+}
@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme
@@ -0,0 +1,16 @@
+import { cpSync, existsSync, mkdirSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..')
+const src = join(root, 'docs', 'screenshots')
+const dest = join(root, 'docs-site', 'public', 'screenshots')
+
+if (!existsSync(src)) {
+  console.error(`Screenshot source missing: ${src}`)
+  process.exit(1)
+}
+
+mkdirSync(dest, { recursive: true })
+cpSync(src, dest, { recursive: true })
+console.log(`Copied screenshots to ${dest}`)
@@ -0,0 +1,99 @@
+# API
+
+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**.
+
+## Authentication
+
+All REST calls use:
+
+```http
+Auth-Token: YOUR_TOKEN
+```
+
+| Token type | How to obtain | Notes |
+| ---------- | ------------- | ----- |
+| **Global** | Admin **API** page or `API_UPLOAD_TOKEN` env | Env wins and blocks UI regenerate |
+| **Personal** | Each user’s **API** page | Uploads belong to that user |
+
+Form uploads may use field `token` (Twikoo protocol).
+
+## Endpoints
+
+### 1. Upload images
+
+`POST /api/images/upload`
+
+Upload one or more images via `image`; also accepts `file`, `files`. Stored under `images/`.
+
+```bash
+curl -X POST "https://admin.example.com/api/images/upload" \
+  -H "Auth-Token: YOUR_TOKEN" \
+  -F "image=@./demo.png"
+```
+
+### 2. List images
+
+`GET /api/images`
+
+Paginated gallery. `limit` default 20, max 100.
+
+```bash
+curl "https://admin.example.com/api/images?limit=20&page=1" \
+  -H "Auth-Token: YOUR_TOKEN"
+```
+
+### 3. Search images
+
+`GET /api/images/search`
+
+Search by filename or path; `q` is required.
+
+```bash
+curl "https://admin.example.com/api/images/search?q=demo&limit=20&page=1" \
+  -H "Auth-Token: YOUR_TOKEN"
+```
+
+### 4. Delete image
+
+`DELETE /api/images`
+
+Delete by `key` (storage path, e.g. `images/2026/08/xxx.webp`).
+
+```bash
+curl -X DELETE "https://admin.example.com/api/images?key=images/2026/08/xxxx.webp" \
+  -H "Auth-Token: YOUR_TOKEN"
+```
+
+### 5. Batch delete
+
+`POST /api/images/batch-delete`
+
+JSON body: `{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}`
+
+```bash
+curl -X POST "https://admin.example.com/api/images/batch-delete" \
+  -H "Auth-Token: YOUR_TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}'
+```
+
+## Errors
+
+REST responses are JSON with `code` and `message` (`UNAUTHORIZED`, `FORBIDDEN`, `INVALID_REQUEST`, etc.). Twikoo uses EasyImage-compatible JSON.
+
+## Visibility
+
+- User token: list/search/delete own images only
+- Admin token: all images
+- Global token uploads belong to admin
+
+See [Users & permissions](./users-and-permissions.md).
+
+## Twikoo
+
+`POST /api/index.php` — [Twikoo](./twikoo.md).
+
+## See also
+
+- [Environment variables](./configuration.md)
+- [Reverse proxy](./reverse-proxy.md)
@@ -0,0 +1,182 @@
+# Changelog
+
+Version history and notable changes. The full log is also in the repo root [CHANGELOG.md](https://github.com/O96u/PicHost/blob/main/CHANGELOG.md).
+
+---
+
+## [1.2.8] — 2026-09-04
+
+### Improved
+
+- **Dual-domain**: confirm dialog on save/setup with lockout risks and `clear-domains` recovery; no longer blocks save based on current Host
+
+### Added
+
+- **Ops CLI**: `clear-domains` clears site/image URL settings from DB (`docker exec pichost clear-domains`)
+
+### Docs
+
+- FAQ and dual-domain / reverse-proxy guides updated with recovery steps
+
+## [1.2.7] — 2026-09-03
+
+### Added
+
+- **Login verification**: slider, Cloudflare Turnstile, or Cap on login/register; configure under Settings → Access
+- **Ops CLI**: `slider` resets verification to the local slider (`docker exec pichost slider`)
+
+### Improved
+
+- Login captcha reloads correctly after logout
+
+## [1.2.6] — 2026-09-01
+
+### Added
+
+- **Admin UI**: redesigned Settings, API, Gallery, and Storage pages; API page includes live debugging
+- **Gallery filter**: filter by storage backend
+- **Storage IDs**: new R2 / COS / OSS / S3 backends get `r2-*`, `cos-*`, `oss-*`, or `s3-*` prefixes
+
+### Improved
+
+- Activity log table styling and path truncation
+- Storage backend card metadata layout
+- Docs site and README screenshots updated
+
+## [1.2.5] — 2026-08-31
+
+### Added
+
+- **Gallery page**: nav “Stats” renamed to “Gallery” (`/gallery`); click a thumbnail for a detail modal (full image, dimensions, upload source, storage path, link copy)
+- **List actions**: select all / invert selection; single-image delete moved into the detail modal
+- **Upload source**: gallery API returns web / API upload source (from activity logs)
+
+### Improved
+
+- README tech stack section
+
+### Removed
+
+- `/stats` route (no compatibility redirect)
+
+## [1.2.4] — 2026-08-31
+
+### Fix
+
+- **Empty referer whitelist still blocked hotlinks**: with no Referer whitelist configured, direct browser access worked but embedded images on blogs/forums returned 403; protection now runs only when a whitelist is configured
+
+## [1.2.3] — 2026-08-30
+
+### Fix
+
+- **Short links + date-based storage**: bare filename URLs (e.g. `https://host/xxx.webp`) no longer map to flat `images/xxx.webp`; SQLite index resolves the full `images/YYYY/MM/xxx.webp` key so thumbnails and short links work again
+
+---
+
+## [1.2.2] — 2026-08-30
+
+> **Restart the service** after upgrading so middleware and API updates take effect.
+
+### Dual-domain settings & Host isolation
+
+#### Fixes
+
+| Issue | Description |
+| ----- | ----------- |
+| Site URL cleared by mistake | Saving Settings could write an empty `site_base_url` when disabling dual-domain or editing only the image URL |
+| Config vs effective URL mixed | `GET /api/settings` used to blend DB values with `request.origin`, confusing the Settings UI |
+| Third-host bypass | Unlisted hosts (`pages.dev`, bare IP, old image domains) were not blocked by middleware |
+
+#### Improvements
+
+**Settings API (`GET /api/settings`)**
+
+| Field | Meaning |
+| ----- | ------- |
+| `siteBaseUrl` / `imageBaseUrl` | **Configured** values (DB → env), no request fallback |
+| `effectiveSiteBaseUrl` / `effectiveImageBaseUrl` | **Link generation**, falls back to request origin when unset |
+| `runtime.currentOrigin` | Detected access URL (display only, not saved) |
+| `runtime.hostRole` | `site` / `image` / `unknown` / `single` |
+
+**Save API (`PATCH /api/settings`)**
+
+- New body field `domainSeparation` (`true` / `false`)
+- `domainSeparation: true` requires both URLs with different hostnames
+- `domainSeparation: false` allows clearing the site URL
+- Without `domainSeparation`, cannot clear `siteBaseUrl` while dual-domain is active
+
+**Settings / setup UI**
+
+- Form uses configured values; “Active” line shows `effective*`
+- Shows detected access URL; **no longer** auto-fills `window.location.origin`
+- “Use detected URL” button (opt-in)
+- Confirmation modal when disabling dual-domain
+- Warning when `hostRole === 'unknown'` with dual-domain on
+
+**Host middleware**
+
+- When dual-domain is on, unlisted hosts get **404** at the app layer (all methods)
+- `localhost` / `127.0.0.1` exempt in development
+- Complements Nginx `default_server` — use both layers in production
+
+#### Docs
+
+- Rewrote [Cloudflare deployment](./cloudflare-deployment.md)
+- Updated [Dual-domain separation](./domain-separation.md) for third-host blocking
+- Added this changelog page
+
+#### Upgrade notes
+
+- **No** database migration or CLI step
+- If the site URL was cleared earlier: re-enter it in **Settings**, or set `SITE_BASE_URL` in env and restart
+- Production: match proxy `server_name` to Settings; keep a default server block
+
+---
+
+## [1.2.1] — 2026-08-29
+
+### Added
+
+- Slide puzzle login captcha
+- VitePress docs site on GitHub Pages
+- `npm run docs:dev` / `docs:build` / `docs:preview`
+
+### Fixed
+
+- Gallery not refreshing after delete on stats page
+- Pagination jump with `type="number"` input
+- Copy-link format preference not persisting off home route
+- Captcha UI alignment
+
+### Improved
+
+- README trimmed; details moved to docs
+- Dual-domain docs: unknown Host risk, Cloudflare guide
+
+---
+
+## [1.2.0] — 2026-08-28
+
+### Changed
+
+- All images under `data/images/`; legacy `blog/` / `twikoo/` need migration
+
+### Added
+
+- CLI: `docker exec pichost migrate` / `migrate --apply`
+- Startup index sync (disk scan, legacy key normalization, orphan cleanup)
+
+See [v1.2 migration](./migration.md).
+
+---
+
+## [1.1.x] summary
+
+| Version | Highlights |
+| ------- | ---------- |
+| 1.1.5 | API upload preview fix; file existence check before serve |
+| 1.1.4 | Date-based storage paths; site host blocks image URLs |
+| 1.1.3 | Dual-domain (`SITE_BASE_URL` / `IMAGE_BASE_URL`); Host middleware |
+| 1.1.0 | Multi storage backends (S3 / R2) |
+
+Older entries: [GitHub CHANGELOG](https://github.com/O96u/PicHost/blob/main/CHANGELOG.md).
Author	SHA1	Message	Date
O96u	b05d572221	release: v1.2.8 — 双域名保存确认与 clear-domains 恢复 GitHub Release / release (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s 启用双域名时以确认框提示锁死风险与恢复方式，不再强制校验 Host。新增 clear-domains 运维 CLI 与相关文档。	2026-09-04 14:46:37 +08:00
O96u	4789d19d06	docs: 补充 v1.2.7 登录验证（滑块 / Turnstile / Cap）文档	2026-09-03 13:57:20 +08:00
O96u	430c4de0f4	release: v1.2.7 — 登录人机验证（滑块 / Turnstile / Cap） Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s	2026-09-03 13:53:43 +08:00
O96u	8408d01197	release: v1.2.6 — 新 UI 体验优化与存储标识规则 GitHub Release / release (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s	2026-09-01 21:31:02 +08:00
O96u	ac65c1eb9d	refactor: 重构设置、API、图库与存储页面前端结构。将操作日志并入设置侧栏，补齐检查更新提示与版本接口刷新；拆分各模块组件并修复图库搜索分页变量。	2026-09-01 17:15:02 +08:00
O96u	270af4e707	release: v1.2.5 — 图库页、图片详情弹层与列表体验优化 ci / ci (22, ubuntu-latest) (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s	2026-08-31 16:05:53 +08:00
O96u	81dcc2c15e	release: v1.2.4 — 修复未配置防盗链时外链图裂 GitHub Release / release (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s	2026-08-31 15:02:42 +08:00
O96u	20afda5869	release: v1.2.3 — 修复简短图片链接在按年/月存储下 404 ci / ci (22, ubuntu-latest) (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s 开启简短链接时纯文件名直链先经 SQLite 索引反查完整 key，不再误解析为扁平 images/文件名路径。	2026-08-30 12:33:33 +08:00
O96u	c9c34515dd	release: v1.2.2 — 双域名配置与 Host 隔离修复 GitHub Release / release (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s 修复设置页误清空管理域、配置与生效 URL 混淆及第三 Host 绕过隔离；加固 Settings API 与中间件，并更新文档站。	2026-08-30 10:57:26 +08:00
O96u	6c6766221b	docs: refresh GitHub About description in metadata and FAQ	2026-08-29 12:04:05 +08:00
O96u	58a8e2082f	fix: docs Pages deploy permissions and document GitHub Pages setup Deploy job failed because Pages source must be GitHub Actions; document About/description guidance and fix workflow job permissions.	2026-08-29 11:53:20 +08:00
O96u	9b0a3f4944	fix: trigger docs workflow when lockfile changes docs:build uses npm ci; include package.json and package-lock.json in paths.	2026-08-29 11:50:20 +08:00
O96u	e9f1cde06c	fix: sync package-lock.json for vitepress devDependency ci / ci (22, ubuntu-latest) (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s npm ci failed in CI because vitepress was added to package.json without updating the lockfile.	2026-08-29 11:46:56 +08:00
O96u	ff20f97522	release: v1.2.1 — login captcha, docs site, and bug fixes Add slider captcha for web login, VitePress documentation on GitHub Pages, and fixes for gallery delete refresh, pagination jump, and copy-format persistence.	2026-08-29 11:42:18 +08:00
O96u	469d3be735	release: v1.2.0 — unified images/ storage and legacy migration ci / ci (22, ubuntu-latest) (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s Consolidate local images under data/images/, add docker migrate CLI, startup index sync with orphan cleanup, and remove upload folder UI/API.	2026-08-28 17:18:03 +08:00
O96u	3dee0437e6	release: v1.1.5 — gallery preview reliability fixes ci / ci (22, ubuntu-latest) (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s Bump version to 1.1.5. Retry gallery thumbnails after transient failures, verify storage before serving, and stop caching image 404/403 responses.	2026-08-28 14:25:40 +08:00
O96u	f25c89855f	fix: gallery preview retries and avoid caching failed image responses Verify storage files before serving from the index, disable CDN caching on image 404/403 and host-isolation blocks, and retry gallery thumbnails after transient load failures.	2026-08-28 14:25:04 +08:00
O96u	b0a5fbfca5	release: v1.1.4 — storage path layout and bidirectional domain isolation Bump version to 1.1.4. Add flat vs date storage paths, basename-only hide-folder URLs, and block image paths on the site host when domain separation is active.	2026-08-28 09:59:13 +08:00
O96u	438c1d5529	feat: storage path layout, basename URLs, and bidirectional domain isolation Add storage_use_date_path for flat vs date-key storage layout and emit basename-only public URLs when hide-folder is enabled. Block image paths on the site host when domain separation is active so only the image host serves files. Update settings UI, i18n, tests, and deployment docs.	2026-08-28 09:56:45 +08:00
O96u Build	f7488753ca	Update LICENSE	2026-08-27 15:32:31 +08:00
O96u	d8c1303c32	release: v1.1.3 — dual-domain separation and URL options ci / ci (22, ubuntu-latest) (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s Add admin/image domain separation with host isolation middleware, optional hide-folder public URLs, GitHub release update check, and Lucky/Nginx deployment docs. Switch license to GPL-3.0-only.	2026-08-27 12:13:58 +08:00
O96u	55effa204e	release: v1.1.2 — activity logs, storage filter, upload rate limits ci / ci (22, ubuntu-latest) (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s Bump version and changelog; fix lint issues before release.	2026-08-26 17:14:50 +08:00
O96u	6fc054328d	feat: activity logs, gallery storage filter, and upload rate limits Add per-user activity logs with storage backend tracking, gallery storage filter, and IP/token upload rate limiting. Fix storage delete modal flash, pin local backend in filter order, and link settings version to GitHub releases.	2026-08-26 17:09:38 +08:00
O96u	901fefb3f5	release: v1.1.1 — session fixes, storage cleanup, logging GitHub Release / release (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s	2026-08-26 15:38:56 +08:00
O96u	acc64751ef	release: v1.1.0 — S3 multi-backend storage and admin UI ci / ci (22, ubuntu-latest) (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s	2026-08-26 14:49:46 +08:00
O96u	7c45a78572	release: v1.0.4 Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s Add PasswordInput with show/hide toggle, align legacy setup/register routing, merge duplicate i18n keys, and remove unused jose dependency.	2026-08-25 16:11:50 +08:00
O96u	661146ce20	docs: add Linux.do friend link and align README tables	2026-08-24 10:41:52 +08:00
O96u	9d2ee96af0	fix: CI typecheck and native ARM Docker builds for v1.0.3 Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s Fix TypeScript errors blocking CI, split Docker publish into native amd64/arm64 jobs with manifest merge, and add npm cache mounts.	2026-08-23 18:26:13 +08:00
O96u	22cb2ca8bc	release: v1.0.2 Publish Docker image / build-and-push (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s Add i18n (zh-CN/en), mobile navigation menus, stats and upload UI improvements, and Docker reset-password CLI for emergency recovery.	2026-08-23 17:43:42 +08:00
O96u	074e4502c2	ci: auto-create GitHub Release from CHANGELOG on version tags Add workflow_dispatch to backfill releases for existing tags.	2026-08-22 19:14:25 +08:00
O96u	1096fa8635	docs: use docker run for quick start in README Users can pull muxui/pichost from Docker Hub without cloning the repo.	2026-08-22 18:55:16 +08:00
O96u	80d2bca4e0	ci: build Docker image only on version tags Stop publishing on main push and remove GHCR; images go to Docker Hub only.	2026-08-22 18:50:33 +08:00