release: v1.3.0 — 整站备份恢复、跨后端同步与任务中心

启用双域名时以确认框提示锁死风险与恢复方式，不再强制校验 Host。
新增 clear-domains 运维 CLI 与相关文档。

.env.example

@@ -35,3 +35,6 @@
 
 # 仅本地开发：设为 true 可绕过登录验证（跳过 /setup，一般无需开启）
 # DEV_BYPASS_ACCESS=false
+
+# 登录人机验证（滑块 / Turnstile / Cap）在后台「设置 → 访问控制」配置，无环境变量。
+# 配置错误无法登录时：docker exec pichost slider（或 npm run slider）恢复为本地滑块。

.github/repository-metadata.json

@@ -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.",
+  "description": "Lightweight self-hosted image hosting — Docker, multi-user, gallery & API, local disk or S3-compatible storage.",
-  "homepage": "https://github.com/O96u/PicHost#readme",
+  "homepage": "https://o96u.github.io/PicHost/",
   "topics": [
     "docker",
     "image-hosting",

.github/workflows/ci.yml

@@ -37,3 +37,6 @@ jobs:
 
       - name: Test
         run: npm run test
+
+      - name: Build docs
+        run: npm run docs:build

.github/workflows/docs.yml

@@ -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

.gitignore

@@ -40,3 +40,8 @@ git-hooks/
 # 本地维护脚本（assign-image-owner、fpk 打包等，不进仓库）
 scripts/
 dist-fpk/
+
+# VitePress docs site
+docs-site/.vitepress/cache
+docs-site/.vitepress/dist
+docs-site/public/screenshots

CHANGELOG.md

@@ -2,6 +2,158 @@
 
 本仓库自 **v1.0.0** 起作为正式版维护；此前历史提交已归档重置。
 
+## [Unreleased]
+
+## [1.3.0] - 2026-09-07
+
+### 新增
+
+- **站点备份**：存储页导出 `.phost.tar.gz`（含 `pichost.db` 与全部图片），支持下载与任务进度
+- **站点恢复**：存储页或 setup 未初始化时从备份包恢复，支持预检与跳过/覆盖冲突
+- **跨后端同步**：在已配置存储后端之间拷贝图片并更新索引；后端卡片快捷「迁入 / 迁出」
+- **任务中心**：`backup_jobs` 记录最近导出/恢复/同步任务，失败可重试；列表分页
+- 运维 CLI：`backup-export`、`backup-restore`、`storage-sync`（`docker exec pichost …`）
+
+### 移除
+
+- 遗留目录迁移 CLI `migrate` / `migrate-to-single-images.mjs`（由启动索引同步与整站备份恢复替代）
+
+### 文档
+
+- [存储](./docs-site/guide/storage.md) 补充备份与迁移说明；更新截图；移除 v1.2 迁移专页
+
+## [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、清理孤儿记录），并打印同步日志
+
+### 改进
+
+- 启动时归一化遗留 SQLite key、清理无文件的孤儿索引；支持删除仅索引无文件的记录
+
+## [1.1.5] - 2026-08-28
+
+### 修复
+
+- 修复 API 上传后图库预览偶发失败、需等待刷新才显示的问题
+- 图库卡片加载失败后自动重试，刷新列表时重置预览状态
+
+### 改进
+
+- 出图前校验存储文件实际存在，避免索引与磁盘短暂不一致
+- 图片 404/403 与域名隔离 404 禁止 CDN 缓存，降低反代误判影响
+
 ## [1.1.4] - 2026-08-28
 
 ### 新增
@@ -23,7 +175,7 @@
 - `/setup` 与系统设置支持启用/关闭域名分离，设置页可后续关闭并恢复单域
 - 可选隐藏外链中的 `images/` 前缀（多文件夹时确认提示）
 - 设置页加载时检测 GitHub 最新版本并提示更新
-- 双域名部署文档（Nginx / Lucky / 本地 hosts 测试）：`docs/domain-separation.md`
+- 双域名部署文档（Nginx / Lucky / 本地 hosts 测试）：[文档站 · 双域名分离](https://o96u.github.io/PicHost/guide/domain-separation)
 
 ### 改进
 
@@ -111,6 +263,7 @@
 - 中英文界面（`@nuxtjs/i18n`），语言切换与主题切换独立菜单
 - 移动端导航：汉堡菜单 + 分组用户菜单（语言 / 外观 / 账户）
 - Docker 忘记密码：`docker exec pichost reset-password`（随机密码，见 `server/cli/`）
+- Docker 升级到 v1.2.0 前迁移遗留目录：`docker exec pichost migrate` / `migrate --apply`
 
 ### 改进
 
@@ -147,9 +300,9 @@
 
 ### 路线图
 
-- **v1.1.2**（当前 `main`）：操作日志、图库存储筛选、上传限流
+- **v1.2.0**（开发中）：统一 `images/` 存储、遗留目录迁移 CLI、启动索引同步
 
-[1.1.2]: https://github.com/O96u/PicHost/releases/tag/v1.1.2
+[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

Dockerfile

@@ -23,7 +23,16 @@ ENV NODE_ENV=production \
     DATA_DIR=/data
 
 COPY --from=build /app/.output ./.output
+COPY --from=build /app/server/utils ./server/utils
+COPY --from=build /app/node_modules ./node_modules
+COPY --from=build /app/package.json ./package.json
 COPY server/cli/reset-password.mjs ./server/cli/reset-password.mjs
+COPY server/cli/slider.mjs ./server/cli/slider.mjs
+COPY server/cli/clear-domains.mjs ./server/cli/clear-domains.mjs
+COPY server/cli/backup-cli-loader.mjs ./server/cli/backup-cli-loader.mjs
+COPY server/cli/backup-export.mjs ./server/cli/backup-export.mjs
+COPY server/cli/backup-restore.mjs ./server/cli/backup-restore.mjs
+COPY server/cli/storage-sync.mjs ./server/cli/storage-sync.mjs
 COPY docker-entrypoint.sh /docker-entrypoint.sh
 RUN chmod +x /docker-entrypoint.sh
 

README.en.md

@@ -17,64 +17,57 @@
 </p>
 
 <p align="center">
-  <a href="#branches">Branches</a> ·
+  <a href="https://o96u.github.io/PicHost/en/">Docs</a> ·
-  <a href="#quick-start">Quick Start</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>
 
 ---
 
-## Branches
-
-| Branch | Notes |
-| ------ | ----- |
-| [**main**](https://github.com/O96u/PicHost/tree/main) (default) | **v1.1.4** — local disk + multi-backend storage, bidirectional dual-domain isolation, [`/storage`](docs/README.md) UI, hybrid URLs |
-| [**cloudflare**](https://github.com/O96u/PicHost/tree/cloudflare) | **Cloudflare R2–only line** — streamlined for deployments that use R2 exclusively |
-
-Use **main** for the full product and multiple cloud backends.
-
-If you **only use Cloudflare R2**, check out the dedicated branch:
-
-```bash
-git clone https://github.com/O96u/PicHost.git
-cd PicHost
-git checkout cloudflare
-```
-
----
-
 ## Screenshots
 
-|                 Upload                 |              Storage               |
+**main** has no public demo. **cloudflare** branch live demo: [pic.roven.cc](https://pic.roven.cc)
-| :------------------------------------: | :--------------------------------: |
-| ![Upload](docs/screenshots/upload.png) | ![Storage](docs/screenshots/storage.png) |
 
-|           Stats & gallery            |              Settings              |
+| API | Gallery (detail) |
-| :----------------------------------: | :--------------------------------: |
+| :--: | :--------------: |
-| ![Stats](docs/screenshots/stats.png) | ![Settings](docs/screenshots/settings.png) |
+| ![API](docs/screenshots/api.png) | ![Gallery](docs/screenshots/gallery.png) |
+
+| Storage | Settings |
+| :-----: | :-------: |
+| ![Storage](docs/screenshots/storage.png) | ![Settings](docs/screenshots/settings-en.png) |
+
+| First-time setup | Restore from backup |
+| :--------------: | :-----------------: |
+| ![Setup](docs/screenshots/setup.png) | ![Setup restore](docs/screenshots/setup-restore.png) |
 
 ## Features
 
-- **Drag, click, or Ctrl+V paste** to upload; admins can use custom `folder` paths
+- **Drag, click, or Ctrl+V paste** — server-side WebP, Referer hotlink protection
-- **Server-side WebP** (sharp), Referer hotlink protection, configurable public base URL
+- **Multi-user** — login with slider, Turnstile, or Cap verification; optional registration; users see only their images
-- **Multi-user** — username/password login; optional registration; users see only their images
+- **Multi-backend storage** — local disk + S3-compatible (R2 / COS / OSS / AWS); hybrid `proxy` / `public` URLs
-- **Upload preferences** (home card flip): client-side compression, auto-copy links, per-user auto-delete
+- **Gallery** — browse, search, filter by storage/source, grid/list views, batch delete; stats overview and source breakdown; image detail modal with link formats
-- **Multi-backend storage**: local disk + S3-compatible (Cloudflare R2 / Tencent COS / Alibaba OSS / AWS S3); admins manage backends at **Storage** (`/storage`)
+- **Backup & migration** — full-site export/restore (`.phost.tar.gz`), cross-backend sync; restore from backup on uninitialized `/setup`
-- **Hybrid URLs**: `proxy` (same-origin via PicHost) or `public` (302 to CDN / bucket URL)
+- **API & Twikoo** — global / per-user tokens; `POST /api/index.php` compatible
-- **Gallery** — browse, search, batch delete; admin sees uploader badges
+- **Zero-config Docker** — first-run web wizard, no secrets upfront
-- **Stats** — upload/delete metrics, folder breakdown; admin sees registered user count
+
-- **API** — global token (admin) + per-user tokens; in-app cURL snippets
+## Tech Stack
-- **Twikoo** — `POST /api/index.php` (`image` + `token`)
+
-- **Zero-config Docker** — first-run web wizard, no secrets required upfront
+| 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 |
 
 ## Quick Start
 
-### Docker (recommended)
-
 ```bash
 docker run -d \
   --name pichost \
@@ -84,160 +77,14 @@ docker run -d \
   muxui/pichost:latest
 ```
 
-Default port: **6892**. Open `http://<host>:6892` in your browser and complete the setup wizard.
+Open `http://<host>:6892` and complete the setup wizard.
 
-**Forgot password** (requires `docker exec` / server access):
+**Full guide** (env vars, upgrades, dual-domain setup, API, Twikoo, reverse proxy, local dev, etc.): **[Documentation](https://o96u.github.io/PicHost/en/)**.
 
-```bash
+| Branch | Notes |
-docker exec pichost reset-password              # admin only, when there is exactly one
+| ------ | ----- |
-docker exec pichost reset-password <username>   # admin or regular user
+| [**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) |
-
-A random password is printed. Fails if the user does not exist.
-
-If you cloned the repo, you can also use `docker compose up -d` (see `docker-compose.yml`).
-
-### 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`.
-
-## 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 + S3-compatible backends (R2 / COS / OSS / AWS); `images` index in SQLite |
-| Deploy   | Docker (amd64 / arm64), docker compose              |
-| Tests    | Vitest                                              |
-
-## 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, storage_backends, images index
-├── images/             # Default upload folder (when using local backend)
-├── blog/               # Example custom folder
-└── twikoo/             # Twikoo comment images
-```
-
-Pattern: `folder/YYYY/MM/randomId.webp` + `.meta.json`. With cloud backends, blobs live in the bucket; SQLite `images` tracks `backend_id` and `key`. Back up all of `/data` plus bucket data.
-
-## 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:
-
-```bash
-curl -X POST "https://pic.example.com/api/images/upload" \
-  -H "Auth-Token: YOUR_TOKEN" \
-  -F "folder=blog" \
-  -F "image=@./demo.png"
-```
-
-Full docs and copyable cURL snippets are on the **API** page after deployment.
-
-## Twikoo
-
-| 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` (single domain) or `SITE_BASE_URL` + `IMAGE_BASE_URL` (dual-domain separation)
-
-### Recommended architecture (dual domains)
-
-**One Docker instance + two domains**, both fully proxied to `6892` (isolation via PicHost middleware):
-
-```nginx
-# admin.example.com — admin + API + images
-server {
-  server_name admin.example.com;
-  location / {
-    proxy_pass http://127.0.0.1:6892;
-    proxy_set_header Host $host;
-    proxy_set_header X-Forwarded-Proto $scheme;
-    client_max_body_size 12m;
-  }
-}
-
-# pic.example.com — same full proxy; PicHost middleware blocks non-image paths
-server {
-  server_name pic.example.com;
-  location / {
-    proxy_pass http://127.0.0.1:6892;
-    proxy_set_header Host $host;
-    proxy_set_header X-Forwarded-Proto $scheme;
-  }
-}
-```
-
-FN NAS [Lucky](https://github.com/gdy666/lucky) reverse proxy (public hostname → backend `http://<LAN-IP>:6892`):
-
-| Site domain (admin) | Image domain |
-| :-----------------: | :----------: |
-| ![Lucky site](docs/screenshots/lucky-site.png) | ![Lucky image](docs/screenshots/lucky-image.png) |
-
-See **[docs/domain-separation.en.md](docs/domain-separation.en.md)** for Caddy/NPM notes, env vars, and setup fields.
-
-## 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.1.4** | Flat vs date storage paths, basename public URLs, bidirectional domain isolation (current `main`) |
-| **v1.1.3** | Dual-domain separation, optional `images/` URL prefix, update check |
-| **v1.1.2** | Activity logs, gallery storage filter, upload rate limits |
-| **v1.1.1** | Session check fixes, storage placeholder cleanup, Docker logging |
-| **v1.1.0** | Multi-backend object storage, hybrid URLs, storage UI |
-| **v1.0.4** | Password visibility toggle, legacy ADMIN_SECRET migration      |
-| **v1.0.3** | CI and Docker multi-arch build fixes                           |
-| **v1.0.2** | i18n, mobile menus, stats/upload UI, Docker password reset     |
-| **v1.0.1** | Settings version display, mobile upload preferences layout fix |
-| **v1.0.0** | Local storage, multi-user, API, Twikoo                         |
 
 ## License
 

README.md

@@ -17,64 +17,57 @@
 </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="#快速开始">快速开始</a> ·
   <a href="README.en.md">English</a>
 </p>
 
 ---
 
-## 分支
-
-| 分支 | 说明 |
-| ---- | ---- |
-| [**main**](https://github.com/O96u/PicHost/tree/main)（默认） | **v1.1.4** 主线：本地磁盘 + 多对象存储、双域名双向隔离、[`/storage`](docs/README.md) 存储管理、混合直链 |
-| [**cloudflare**](https://github.com/O96u/PicHost/tree/cloudflare) | **Cloudflare R2 专用线**：面向「只用 R2」的部署，预设与配置更聚焦 R2 |
-
-日常使用、需要管理多种存储后端，请直接用 **main**。
-
-若图床**只接 Cloudflare R2**、希望更简化的 R2 专用版本，可切换分支：
-
-```bash
-git clone https://github.com/O96u/PicHost.git
-cd PicHost
-git checkout cloudflare
-```
-
----
-
 ## 界面预览
 
-|                 上传                  |                存储管理                 |
+**main** 分支暂无公网演示；**cloudflare** 分支在线体验：[pic.roven.cc](https://pic.roven.cc)
-| :-----------------------------------: | :-------------------------------------: |
-| ![上传](docs/screenshots/upload.png) | ![存储](docs/screenshots/storage.png) |
 
-|             统计与图库              |                系统设置                 |
+| API | 图库（详情） |
-| :---------------------------------: | :-------------------------------------: |
+| :--: | :--: |
-| ![统计](docs/screenshots/stats.png) | ![设置](docs/screenshots/settings.png) |
+| ![API](docs/screenshots/api.png) | ![图库](docs/screenshots/gallery.png) |
+
+| 存储 | 设置 |
+| :--: | :--: |
+| ![存储](docs/screenshots/storage.png) | ![设置](docs/screenshots/settings.png) |
+
+| 首次设置 | 从备份恢复 |
+| :--: | :--: |
+| ![首次设置](docs/screenshots/setup.png) | ![从备份恢复](docs/screenshots/setup-restore.png) |
 
 ## 特性
 
-- **拖拽 / 点击 / Ctrl+V 粘贴**上传；管理员可自定义 `folder` 目录
+- **拖拽 / 点击 / Ctrl+V 粘贴**上传；服务端 WebP 压缩、Referer 防盗链
-- **服务端 WebP 压缩**（sharp）、Referer 防盗链、可配置访问域名
+- **多用户**：账号密码登录（滑块 / Turnstile / Cap 人机验证）、可选开放注册；普通用户仅见自己的图片
-- **多用户**：账号密码登录；管理员可开放注册；普通用户仅见自己的图片
+- **多后端存储**：本地磁盘 + S3 兼容（R2 / COS / OSS / AWS）；混合直链 `proxy` / `public`
-- **上传偏好**（首页卡片翻转）：客户端预压缩、自动复制链接、按用户自动删除
+- **图库**：浏览、搜索、按存储/来源筛选、网格/列表切换、批量删除；统计概览与来源分布；点击图片查看详情与多格式链接
-- **多后端存储**：本地磁盘 + S3 兼容（Cloudflare R2 / 腾讯云 COS / 阿里云 OSS / AWS S3）；管理员在 **存储**（`/storage`）页管理，新上传写入默认后端
+- **备份与迁移**：整站导出/恢复（`.phost.tar.gz`）、跨后端同步；setup 未初始化时可从备份恢复
-- **混合直链**：`proxy`（PicHost 同源代理）或 `public`（302 到 CDN / 桶公网地址）
+- **API 与 Twikoo**：全局 / 个人 Token；`POST /api/index.php` 兼容
-- **图库**：浏览、搜索、批量删除；管理员可查看上传者标签
+- **Docker 零配置**：首次访问 Web 引导创建管理员
-- **统计**：上传/删除趋势、目录分布；管理员额外显示注册用户数量
+
-- **API**：全局 Token（管理员）+ 每用户个人 Token；后台可复制 cURL
+## 技术栈
-- **Twikoo**：`POST /api/index.php`（`image` + `token`）
+
-- **Docker 零配置**：首次访问 Web 引导创建管理员，无需预先写密钥
+| 层级 | 技术 |
+| ---- | ---- |
+| 前端 | [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 |
 
 ## 快速开始
 
-### Docker（推荐）
-
 ```bash
 docker run -d \
   --name pichost \
@@ -84,165 +77,14 @@ docker run -d \
   muxui/pichost:latest
 ```
 
-默认端口 **6892**。浏览器打开 `http://<主机IP>:6892`，按引导创建管理员即可。
+浏览器打开 `http://<主机IP>:6892`，按引导完成设置即可。
 
-**忘记密码**（需能执行 `docker exec`，相当于服务器权限）：
+**详细说明**（环境变量、双域名、API、Twikoo、反向代理、本地开发等）见 **[用户文档](https://o96u.github.io/PicHost/)**。
 
-```bash
+| 分支 | 说明 |
-# 无参数：重置管理员（仅当系统中只有一个管理员时）
+| ---- | ---- |
-docker exec pichost reset-password
+| [**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) |
-# 指定用户名：可重置管理员或普通用户
-docker exec pichost reset-password 用户名
-```
-
-终端会打印随机新密码；用户不存在时会报错。登录后请到「修改密码」更换。
-
-本地：`npm run reset-password` 或 `npm run reset-password -- 用户名`
-
-已克隆仓库时也可用 `docker compose up -d`（见仓库内 `docker-compose.yml`）。
-
-### 本地开发
-
-```bash
-npm install
-cp .env.example .env   # 可选
-npm run dev
-```
-
-访问 `http://localhost:3000/setup` 创建管理员；数据目录默认 `./data`。
-
-## 技术栈
-
-| 层级     | 技术                                       |
-| -------- | ------------------------------------------ |
-| 前端     | Nuxt 4、Vue 3、Nuxt UI 4、Tailwind CSS 4   |
-| 后端     | Nitro（Node.js）、SQLite                   |
-| 图片处理 | sharp（WebP 转码与压缩）                   |
-| 鉴权     | Session Cookie、scrypt 密码哈希、API Token |
-| 存储     | 本地磁盘 + S3 兼容后端（R2 / COS / OSS / AWS）；`images` 索引在 SQLite |
-| 部署     | Docker（amd64 / arm64）、docker compose    |
-| 测试     | Vitest                                     |
-
-## 用户与权限
-
-| 场景                       | 鉴权                 | 图片归属 / 可见范围        |
-| -------------------------- | -------------------- | -------------------------- |
-| 网页上传                   | 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：用户、会话、设置、storage_backends、images 索引
-├── images/             # 默认上传目录（本地后端时）
-├── blog/               # 管理员自定义 folder 示例
-└── twikoo/             # Twikoo 评论图片
-```
-
-路径规则：`目录/年/月/随机ID.webp` + 同名 `.meta.json`。云存储时文件在对应桶内，SQLite `images` 表记录 `backend_id` 与 `key`。备份请包含整个 `/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"
-```
-
-完整接口与可复制 cURL 见部署后后台 **API** 页。
-
-## Twikoo
-
-| 配置项            | 值                               |
-| ----------------- | -------------------------------- |
-| `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`（单域名）或 `SITE_BASE_URL` + `IMAGE_BASE_URL`（双域名分离）
-
-### 推荐部署架构（双域名分离）
-
-**单 Docker 实例 + 两个域名** 均可全量反代到 `6892`（隔离由 PicHost 中间件负责）：
-
-```nginx
-# admin.example.com — 后台 + API + 出图
-server {
-  server_name admin.example.com;
-  location / {
-    proxy_pass http://127.0.0.1:6892;
-    proxy_set_header Host $host;
-    proxy_set_header X-Forwarded-Proto $scheme;
-    client_max_body_size 12m;
-  }
-}
-
-# pic.example.com — 同样全量反代；PicHost 中间件会拦截非图片路径
-server {
-  server_name pic.example.com;
-  location / {
-    proxy_pass http://127.0.0.1:6892;
-    proxy_set_header Host $host;
-    proxy_set_header X-Forwarded-Proto $scheme;
-  }
-}
-```
-
-飞牛 NAS [Lucky](https://github.com/gdy666/lucky) 反向代理示例（前端域名 → 后端 `http://<内网IP>:6892`）：
-
-| 网站域名（管理后台） | 图片域名 |
-| :------------------: | :------: |
-| ![Lucky 网站域名](docs/screenshots/lucky-site.png) | ![Lucky 图片域名](docs/screenshots/lucky-image.png) |
-
-完整说明（Caddy / NPM、环境变量、初始化填写项）见 **[docs/domain-separation.md](docs/domain-separation.md)**。
-
-## 开发
-
-```bash
-npm run dev          # 开发服务器
-npm run build        # 生产构建
-npm run start        # 运行 .output
-npm run lint         # ESLint
-npm run typecheck    # 类型检查
-npm test             # 单元测试
-```
-
-## 路线图
-
-| 版本       | 说明                                              |
-| ---------- | ------------------------------------------------- |
-| **v1.1.4** | 存储路径扁平/分组、basename 外链、双域名双向隔离（当前 main） |
-| **v1.1.3** | 双域名分离、隐藏 `images/` 前缀、版本更新提示 |
-| **v1.1.2** | 操作日志、图库存储筛选、上传限流                  |
-| **v1.1.1** | 会话校验与存储占位修复、Docker 日志增强           |
-| **v1.1.0** | S3 / R2 多后端对象存储、混合直链、存储管理页          |
-| **v1.0.4** | 密码显示切换、遗留 ADMIN_SECRET 迁移对齐          |
-| **v1.0.3** | CI 与 Docker 多架构构建修复                       |
-| **v1.0.2** | 中英文、移动端菜单、统计/上传 UI、Docker 重置密码 |
-| **v1.0.1** | 设置页版本展示、移动端上传偏好布局修复            |
-| **v1.0.0** | 本地存储、多用户、API、Twikoo                     |
 
 ## License
 

app/assets/css/main.css

@@ -106,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;
+}

app/components/AdminLoginGate.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import logoLight from '~/assets/image/logo-light.png'
 import logoDark from '~/assets/image/logo-dark.png'
+import type { LoginVerificationPayload } from '~/types/auth'
 
 const router = useRouter()
 const { login, fetchStatus, authStatus } = useAuth()
@@ -11,29 +12,53 @@ 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 loginVerification = computed(() =>
-const canSubmit = computed(() =>
+  authStatus.value?.loginVerification ?? { method: 'slider' as const }
-  legacyMode.value ? Boolean(secret.value) : Boolean(username.value && password.value)
 )
 
+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({ secret: secret.value }, verification)
-      : await login({ username: username.value.trim(), password: password.value })
+      : await login({ username: username.value.trim(), password: password.value }, verification)
 
     if (result.ok) {
       if (result.needsMigration) {
@@ -43,8 +68,10 @@ async function submit() {
       username.value = ''
       password.value = ''
       secret.value = ''
+      await resetVerification()
       toast.add({ title: t('auth.loginSuccess'), color: 'success' })
     } else {
+      await resetVerification()
       toast.add({
         title: result.error ?? (legacyMode.value ? t('auth.loginFailedSecret') : t('auth.loginFailedCredentials')),
         color: 'error'
@@ -152,6 +179,16 @@ async function 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="t('auth.login')"

app/components/ApiCurlBlock.vue

@@ -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>

app/components/AppShell.vue

@@ -13,21 +13,16 @@ const mobileUserOpen = ref(false)
 const navItems = computed(() => {
   const items = [
     { label: t('nav.api'), to: '/api', icon: 'i-lucide-code-2' },
-    { label: t('nav.stats'), to: '/stats', icon: 'i-lucide-chart-column' }
+    { label: t('nav.gallery'), to: '/gallery', icon: 'i-lucide-images' }
   ]
   if (isAdmin.value) {
     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' })
   }
+  items.push({ label: t('nav.settings'), to: '/settings', icon: 'i-lucide-settings' })
   return items
 })
 
 const accountMenuItems = computed<DropdownMenuItem[]>(() => [
-  {
-    label: t('nav.logs'),
-    icon: 'i-lucide-scroll-text',
-    to: '/logs'
-  },
   {
     label: t('nav.changePassword'),
     icon: 'i-lucide-key-round',
@@ -48,7 +43,7 @@ const desktopUserMenuItems = computed<DropdownMenuItem[][]>(() => [
 
 function isNavActive(to: string) {
   if (to === '/settings') {
-    return route.path === '/settings'
+    return route.path.startsWith('/settings')
   }
   return route.path.startsWith(to)
 }

app/components/CapCaptcha.vue

@@ -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>

app/components/CopyButton.vue

@@ -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<{
@@ -76,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"

app/components/ImageCard.vue

@@ -1,32 +1,80 @@
 <script setup lang="ts">
 import type { ImageItem } from '~/types/image'
-
+import type { CopyFormat } from '~/composables/useUploadPreferences'
-type CopyFormat = 'url' | 'markdown' | 'html'
 
 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,
   showStorage: false,
-  compact: 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)
+
+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 },
@@ -68,21 +116,175 @@ 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
-    <div class="relative aspect-square shrink-0 overflow-hidden bg-muted">
+    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"
+        class="size-full cursor-zoom-in object-cover object-center"
-        @error="imageError = true"
+        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
@@ -93,26 +295,17 @@ function toggleSelected(value: boolean | 'indeterminate') {
       <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="t('common.delete')"
-          :loading="deleting"
-          @click="emit('delete')"
-        />
-      </div>
       <div
         v-if="image.owner"
         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"
@@ -129,6 +322,7 @@ function toggleSelected(value: boolean | 'indeterminate') {
         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"
@@ -190,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>
 

app/components/ImageGrid.vue

@@ -4,24 +4,39 @@ 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,
   showStorage: false,
   dense: false,
-  compact: 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()
@@ -39,21 +54,23 @@ function updateSelection(key: string, selected: boolean) {
 <template>
   <div
     v-if="items.length"
-    class="grid items-start sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+    class="items-start"
-    :class="dense ? 'grid-cols-2 gap-3' : 'grid-cols-1 gap-4'"
+    :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

app/components/ImagePreviewModal.vue

@@ -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>

app/components/LoginVerification.vue

@@ -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>

app/components/MobileUserMenu.vue

@@ -136,24 +136,6 @@ function toggleOpen() {
           {{ t('nav.account') }}
         </h3>
         <div class="space-y-2">
-          <NuxtLink
-            to="/logs"
-            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-scroll-text"
-                class="size-4 opacity-70"
-              />
-              {{ t('nav.logs') }}
-            </span>
-            <UIcon
-              name="i-lucide-chevron-right"
-              class="size-4 text-muted"
-            />
-          </NuxtLink>
-
           <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"

app/components/PaginationBar.vue

@@ -1,82 +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 { 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) {
+  if (target < 1 || target > props.totalPages || props.loading) return
-    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
+    <div class="flex flex-col gap-3">
-      v-if="totalPages > 1"
+      <div class="flex items-center justify-between gap-2 sm:hidden">
-      class="text-sm text-muted"
+        <p class="text-sm text-muted">
-    >
+          {{ t('pagination.totalCount', { total, unit: unitLabel }) }}
-      {{ t('pagination.pageOf', { page, totalPages, total, unit: unitLabel }) }}
+        </p>
-    </p>
+        <USelect
-    <p
+          v-if="pageSize !== undefined"
-      v-else
+          :model-value="pageSize"
-      class="text-sm text-muted"
+          :items="pageSizeItems"
-    >
+          value-key="value"
-      {{ t('pagination.totalOnly', { total, unit: unitLabel }) }}
+          size="sm"
-    </p>
+          class="w-[6.5rem] shrink-0"
+          :aria-label="t('pagination.pageSize')"
+          :disabled="loading"
+          @update:model-value="onPageSizeChange"
+        />
+      </div>
 
-    <div
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-      v-if="totalPages > 1"
+        <p class="hidden text-sm text-muted sm:block">
-      class="flex items-center gap-1"
+          {{ t('pagination.totalCount', { total, unit: unitLabel }) }}
-    >
+        </p>
-      <UButton
+
-        icon="i-lucide-chevrons-left"
+        <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-end sm:gap-3">
-        variant="outline"
+          <USelect
-        size="sm"
+            v-if="pageSize !== undefined"
-        :aria-label="t('pagination.first')"
+            :model-value="pageSize"
-        :disabled="page <= 1 || loading"
+            :items="pageSizeItems"
-        @click="goTo(1)"
+            value-key="value"
-      />
+            size="sm"
-      <UButton
+            class="hidden w-[7.5rem] shrink-0 sm:block"
-        icon="i-lucide-chevron-left"
+            :aria-label="t('pagination.pageSize')"
-        variant="outline"
+            :disabled="loading"
-        size="sm"
+            @update:model-value="onPageSizeChange"
-        :aria-label="t('pagination.prev')"
+          />
-        :disabled="page <= 1 || loading"
+
-        @click="goTo(page - 1)"
+          <div class="flex items-center justify-center gap-1 sm:justify-end">
-      />
+            <button
-      <UButton
+              type="button"
-        icon="i-lucide-chevron-right"
+              :class="[navButtonClass, 'hidden size-8 sm:inline-flex']"
-        variant="outline"
+              :aria-label="t('pagination.first')"
-        size="sm"
+              :disabled="page <= 1 || loading"
-        :aria-label="t('pagination.next')"
+              @click="goTo(1)"
-        :disabled="page >= totalPages || loading"
+            >
-        @click="goTo(page + 1)"
+              <UIcon
-      />
+                name="i-lucide-chevrons-left"
-      <UButton
+                class="size-4"
-        icon="i-lucide-chevrons-right"
+              />
-        variant="outline"
+            </button>
-        size="sm"
+            <button
-        :aria-label="t('pagination.last')"
+              type="button"
-        :disabled="page >= totalPages || loading"
+              :class="[navButtonClass, 'size-9 sm:size-8']"
-        @click="goTo(totalPages)"
+              :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>

app/components/SliderCaptcha.vue

@@ -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>

app/components/StatsDonut.vue

@@ -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>

app/components/TurnstileCaptcha.vue

@@ -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>

app/components/UploadPreferencesPanel.vue

@@ -1,13 +1,4 @@
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    embedded?: boolean
-  }>(),
-  {
-    embedded: false
-  }
-)
-
 const emit = defineEmits<{
   back: []
 }>()
@@ -57,17 +48,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
+  <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">
-    class="flex flex-col overflow-hidden max-sm:overflow-visible"
+    <div class="flex items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6">
-    :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="flex min-w-0 items-start gap-2">
         <UIcon
           name="i-lucide-settings-2"
@@ -83,7 +65,6 @@ onMounted(() => {
         </div>
       </div>
       <UButton
-        v-if="!embedded"
         :label="t('common.back')"
         icon="i-lucide-arrow-left"
         variant="ghost"
@@ -95,10 +76,7 @@ onMounted(() => {
       />
     </div>
 
-    <div
+    <div class="flex flex-1 flex-col justify-center p-5 sm:p-6">
-      class="p-5 sm:p-6"
-      :class="embedded ? '' : 'flex flex-1 flex-col justify-center'"
-    >
       <div class="grid gap-5 sm:grid-cols-3 sm:gap-6">
         <div class="space-y-4">
           <h3 class="text-sm font-semibold">
@@ -128,9 +106,7 @@ onMounted(() => {
                 class="mt-0.5"
               />
               <span class="min-w-0 flex-1">
-                <span
+                <span class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm">
-                  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"
@@ -139,11 +115,7 @@ onMounted(() => {
                     max="3650"
                     size="xs"
                     class="w-14 tabular-nums"
-                    :class="
+                    :class="userAutoDeleteEnabled ? '' : 'pointer-events-none opacity-40'"
-                      userAutoDeleteEnabled
-                        ? ''
-                        : 'pointer-events-none opacity-40'
-                    "
                   />
                   <span>{{ t('preferences.autoDeleteSuffix') }}</span>
                 </span>
@@ -171,9 +143,7 @@ onMounted(() => {
           <p class="text-xs leading-relaxed text-muted">
             {{ t('preferences.webpQualityHint') }}
           </p>
-          <div
+          <div class="flex items-center justify-between gap-2 text-sm text-muted">
-            class="flex items-center justify-between gap-2 text-sm text-muted"
-          >
             <span>{{ t('preferences.current', { n: clientWebpQuality }) }}</span>
             <span>{{ clientQualityLevel }}</span>
           </div>

app/components/api/ApiDebugger.vue

@@ -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>

app/components/api/ApiDocView.vue

@@ -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>

app/components/api/ApiMethodBadge.vue

@@ -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>

app/components/api/ApiSidebar.vue

@@ -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>

app/components/api/ApiTokenCard.vue

@@ -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>

app/components/gallery/GalleryFilterBar.vue

@@ -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>

app/components/gallery/GalleryImageList.vue

@@ -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>

app/components/gallery/GallerySelectionBar.vue

@@ -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>

app/components/gallery/GalleryStatsOverview.vue

@@ -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>

app/components/settings/SettingsGroup.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="divide-y divide-default overflow-hidden rounded-lg border border-default">
+    <slot />
+  </div>
+</template>

app/components/settings/SettingsLogsPanel.vue

@@ -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>

app/components/settings/SettingsPanel.vue

@@ -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>

app/components/settings/SettingsSection.vue

@@ -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>

app/components/settings/SettingsServerFooter.vue

@@ -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>

app/components/settings/SettingsSidebar.vue

@@ -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>

app/components/settings/SettingsSystemInfo.vue

@@ -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>

app/components/settings/SettingsToggleRow.vue

@@ -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>

app/components/settings/SettingsUserPreferencesFields.vue

@@ -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>

app/components/storage/BackendSyncCard.vue

@@ -0,0 +1,444 @@
+<script setup lang="ts">
+import type { BackendSyncPreview, SyncDraft } from '~/types/backup'
+import type { StorageBackendItem } from '~/types/storage'
+
+const props = defineProps<{
+  backends: StorageBackendItem[]
+  syncDraft: SyncDraft | null
+  highlighted?: boolean
+  busy: boolean
+  disabled?: boolean
+  activeJob?: { progress: number, total: number, message: string } | null
+  previewSync: (body: { fromBackendId: string, toBackendId: string }) => Promise<BackendSyncPreview>
+}>()
+
+const emit = defineEmits<{
+  sync: [body: {
+    fromBackendId: string
+    toBackendId: string
+    deleteSource: boolean
+    setDefault: boolean
+  }]
+}>()
+
+const { t, locale } = useI18n()
+const { formatFileSize } = useFileSize()
+const toast = useToast()
+
+const fromBackendId = ref('')
+const toBackendId = ref('')
+const deleteSource = ref(false)
+const setDefault = ref(false)
+const preview = ref<BackendSyncPreview | null>(null)
+const previewLoading = ref(false)
+const statsLoading = ref(false)
+const confirmOpen = ref(false)
+const userTouched = ref(false)
+
+let statsTimer: ReturnType<typeof setTimeout> | null = null
+
+const backendOptions = computed(() =>
+  props.backends.map(backend => ({
+    label: backend.name,
+    value: backend.id
+  }))
+)
+
+const backendNameById = computed(() =>
+  new Map(props.backends.map(backend => [backend.id, backend.name]))
+)
+
+const needsMoreBackends = computed(() => props.backends.length < 2)
+
+const syncDisabled = computed(() =>
+  props.disabled || props.busy || needsMoreBackends.value
+)
+
+function formatCount(value: number) {
+  return value.toLocaleString(locale.value)
+}
+
+function initDefaultSelection() {
+  if (userTouched.value || props.syncDraft) return
+  const defaultBackend = props.backends.find(backend => backend.isDefault)
+  const target = props.backends.find(backend => !backend.isDefault && backend.enabled)
+  if (defaultBackend && target) {
+    fromBackendId.value = defaultBackend.id
+    toBackendId.value = target.id
+    return
+  }
+  if (props.backends.length >= 2) {
+    fromBackendId.value = props.backends[0]!.id
+    toBackendId.value = props.backends[1]!.id
+  }
+}
+
+function canLoadStats(): boolean {
+  return !needsMoreBackends.value
+    && Boolean(fromBackendId.value)
+    && Boolean(toBackendId.value)
+    && fromBackendId.value !== toBackendId.value
+}
+
+async function refreshStats(immediate = false) {
+  if (!canLoadStats()) {
+    preview.value = null
+    return
+  }
+  if (immediate) {
+    if (statsTimer) clearTimeout(statsTimer)
+    await loadStats()
+    return
+  }
+  scheduleStatsLoad()
+}
+
+async function loadStats() {
+  if (needsMoreBackends.value || !fromBackendId.value || !toBackendId.value) {
+    preview.value = null
+    return
+  }
+  if (fromBackendId.value === toBackendId.value) {
+    preview.value = null
+    return
+  }
+  statsLoading.value = true
+  try {
+    preview.value = await props.previewSync({
+      fromBackendId: fromBackendId.value,
+      toBackendId: toBackendId.value
+    })
+  } catch {
+    preview.value = null
+  } finally {
+    statsLoading.value = false
+  }
+}
+
+function scheduleStatsLoad() {
+  if (statsTimer) clearTimeout(statsTimer)
+  statsTimer = setTimeout(() => {
+    void loadStats()
+  }, 400)
+}
+
+watch(
+  () => props.backends,
+  async () => {
+    initDefaultSelection()
+    await nextTick()
+    await refreshStats(true)
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.syncDraft,
+  async (draft) => {
+    if (!draft) return
+    fromBackendId.value = draft.fromBackendId
+    toBackendId.value = draft.toBackendId
+    userTouched.value = true
+    await refreshStats(true)
+  },
+  { immediate: true }
+)
+
+watch([fromBackendId, toBackendId], () => {
+  void refreshStats()
+})
+
+onBeforeUnmount(() => {
+  if (statsTimer) clearTimeout(statsTimer)
+})
+
+function applyDraft(draft: SyncDraft) {
+  fromBackendId.value = draft.fromBackendId
+  toBackendId.value = draft.toBackendId
+  userTouched.value = true
+  void refreshStats(true)
+}
+
+defineExpose({ applyDraft })
+
+function backendName(id: string) {
+  return backendNameById.value.get(id) ?? id
+}
+
+function validateSelection(): boolean {
+  if (needsMoreBackends.value) {
+    toast.add({ title: t('storage.backup.syncNeedTwoBackends'), color: 'warning' })
+    return false
+  }
+  if (!fromBackendId.value || !toBackendId.value) {
+    toast.add({ title: t('storage.backup.syncSelectRequired'), color: 'warning' })
+    return false
+  }
+  if (fromBackendId.value === toBackendId.value) {
+    toast.add({ title: t('storage.backup.syncSameBackend'), color: 'warning' })
+    return false
+  }
+  return true
+}
+
+async function submit() {
+  if (!validateSelection()) return
+  previewLoading.value = true
+  try {
+    preview.value = await props.previewSync({
+      fromBackendId: fromBackendId.value,
+      toBackendId: toBackendId.value
+    })
+    confirmOpen.value = true
+  } catch {
+    toast.add({ title: t('storage.backup.previewFailed'), color: 'error' })
+  } finally {
+    previewLoading.value = false
+  }
+}
+
+function confirmSync() {
+  emit('sync', {
+    fromBackendId: fromBackendId.value,
+    toBackendId: toBackendId.value,
+    deleteSource: deleteSource.value,
+    setDefault: setDefault.value
+  })
+  confirmOpen.value = false
+}
+</script>
+
+<template>
+  <article
+    class="flex h-full flex-col rounded-xl border bg-elevated p-4 transition-colors sm:p-5"
+    :class="highlighted ? 'border-primary ring-2 ring-primary/25' : 'border-default'"
+  >
+    <div class="flex items-start gap-3">
+      <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-info/10 text-info">
+        <UIcon
+          name="i-lucide-arrow-left-right"
+          class="size-5"
+        />
+      </div>
+      <div class="min-w-0">
+        <h3 class="text-base font-semibold">
+          {{ t('storage.backup.syncTitle') }}
+        </h3>
+        <p class="mt-0.5 text-sm text-muted">
+          {{ t('storage.backup.syncSubtitle') }}
+        </p>
+      </div>
+    </div>
+
+    <div class="mt-4 flex flex-1 flex-col">
+      <UAlert
+        v-if="needsMoreBackends"
+        color="warning"
+        variant="subtle"
+        icon="i-lucide-triangle-alert"
+        :description="t('storage.backup.syncNeedTwoBackends')"
+      />
+
+      <div
+        v-else
+        class="flex flex-1 flex-col space-y-3"
+      >
+        <div class="grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-end">
+          <div class="space-y-1.5">
+            <label class="text-xs text-muted">{{ t('storage.backup.syncFrom') }}</label>
+            <USelect
+              v-model="fromBackendId"
+              :items="backendOptions"
+              size="sm"
+              class="w-full"
+              :disabled="syncDisabled"
+              @update:model-value="userTouched = true"
+            />
+          </div>
+          <UIcon
+            name="i-lucide-arrow-right"
+            class="hidden size-4 shrink-0 text-muted sm:mb-2.5 sm:block"
+          />
+          <div class="space-y-1.5">
+            <label class="text-xs text-muted">{{ t('storage.backup.syncTo') }}</label>
+            <USelect
+              v-model="toBackendId"
+              :items="backendOptions"
+              size="sm"
+              class="w-full"
+              :disabled="syncDisabled"
+              @update:model-value="userTouched = true"
+            />
+          </div>
+        </div>
+
+        <dl class="space-y-1.5 rounded-lg bg-muted/25 px-3 py-2.5 text-sm">
+          <div class="flex items-baseline justify-between gap-2">
+            <dt class="text-muted">
+              {{ t('storage.backup.syncPendingImages') }}
+            </dt>
+            <dd class="font-medium tabular-nums">
+              <template v-if="statsLoading">
+                …
+              </template>
+              <template v-else-if="preview">
+                {{ formatCount(preview.imageCount) }}
+              </template>
+              <template v-else>
+                —
+              </template>
+            </dd>
+          </div>
+          <div class="flex items-baseline justify-between gap-2">
+            <dt class="text-muted">
+              {{ t('storage.backup.syncPendingSize') }}
+            </dt>
+            <dd class="font-medium tabular-nums">
+              <template v-if="statsLoading">
+                …
+              </template>
+              <template v-else-if="preview">
+                {{ formatFileSize(preview.imageBytes) }}
+              </template>
+              <template v-else>
+                —
+              </template>
+            </dd>
+          </div>
+        </dl>
+
+        <div class="space-y-2 text-xs">
+          <label class="flex cursor-pointer items-center gap-2">
+            <UCheckbox
+              v-model="deleteSource"
+              :disabled="syncDisabled"
+            />
+            <span class="text-muted">{{ t('storage.backup.syncDeleteSource') }}</span>
+          </label>
+          <label class="flex cursor-pointer items-center gap-2">
+            <UCheckbox
+              v-model="setDefault"
+              :disabled="syncDisabled"
+            />
+            <span class="text-muted">{{ t('storage.backup.syncSetDefault') }}</span>
+          </label>
+        </div>
+
+        <div class="mt-auto rounded-lg bg-muted/15 px-3 py-2.5">
+          <p class="text-xs font-medium text-default">
+            {{ t('storage.backup.syncIncludesTitle') }}
+          </p>
+          <ul class="mt-2 space-y-1.5 text-xs leading-relaxed text-muted">
+            <li class="flex items-start gap-2">
+              <UIcon
+                name="i-lucide-check"
+                class="mt-0.5 size-3.5 shrink-0 text-info"
+              />
+              <span>{{ t('storage.backup.syncIncludesCopy') }}</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <UIcon
+                name="i-lucide-check"
+                class="mt-0.5 size-3.5 shrink-0 text-info"
+              />
+              <span>{{ t('storage.backup.syncIncludesIndex') }}</span>
+            </li>
+            <li class="flex items-start gap-2">
+              <UIcon
+                name="i-lucide-minus"
+                class="mt-0.5 size-3.5 shrink-0 text-muted"
+              />
+              <span>{{ t('storage.backup.syncIncludesConfig') }}</span>
+            </li>
+          </ul>
+        </div>
+
+        <StorageBackupJobProgress
+          v-if="busy && activeJob"
+          class="mt-auto"
+          :message="activeJob.message"
+          :progress="activeJob.progress"
+          :total="activeJob.total"
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="!needsMoreBackends"
+      class="mt-auto border-t border-default pt-4"
+    >
+      <UButton
+        :label="t('storage.backup.syncPreview')"
+        icon="i-lucide-play"
+        size="sm"
+        :loading="previewLoading || busy"
+        :disabled="syncDisabled"
+        @click="submit"
+      />
+    </div>
+
+    <UModal
+      v-model:open="confirmOpen"
+      :ui="{ content: 'max-w-md' }"
+    >
+      <template #content>
+        <div class="p-5 sm:p-6">
+          <h2 class="text-base font-semibold">
+            {{ t('storage.backup.syncConfirmTitle') }}
+          </h2>
+          <p class="mt-2 text-sm text-muted">
+            {{ backendName(fromBackendId) }} → {{ backendName(toBackendId) }}
+          </p>
+
+          <dl
+            v-if="preview"
+            class="mt-4 grid grid-cols-2 gap-3 text-sm"
+          >
+            <div>
+              <dt class="text-xs text-muted">
+                {{ t('storage.backup.previewImages') }}
+              </dt>
+              <dd class="mt-0.5 font-semibold tabular-nums">
+                {{ formatCount(preview.imageCount) }}
+              </dd>
+            </div>
+            <div>
+              <dt class="text-xs text-muted">
+                {{ t('storage.backup.previewSize') }}
+              </dt>
+              <dd class="mt-0.5 font-semibold tabular-nums">
+                {{ formatFileSize(preview.imageBytes) }}
+              </dd>
+            </div>
+          </dl>
+
+          <UAlert
+            v-if="deleteSource"
+            class="mt-4"
+            color="warning"
+            variant="subtle"
+            icon="i-lucide-triangle-alert"
+            :description="t('storage.backup.syncDeleteWarning')"
+          />
+
+          <div class="mt-5 flex justify-end gap-2">
+            <UButton
+              :label="t('common.cancel')"
+              size="sm"
+              variant="outline"
+              color="neutral"
+              @click="() => { confirmOpen = false }"
+            />
+            <UButton
+              :label="t('storage.backup.syncConfirm')"
+              size="sm"
+              icon="i-lucide-play"
+              :loading="busy"
+              @click="confirmSync"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </article>
+</template>

app/components/storage/BackupExportCard.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { BackupEstimate } from '~/types/backup'
+
+defineProps<{
+  estimate: BackupEstimate | null
+  loading: boolean
+  busy: boolean
+  disabled?: boolean
+  activeJob?: { progress: number, total: number, message: string } | null
+}>()
+
+const emit = defineEmits<{
+  export: []
+}>()
+
+const { t } = useI18n()
+const { formatFileSize } = useFileSize()
+</script>
+
+<template>
+  <article class="flex h-full flex-col rounded-xl border border-default bg-elevated p-4 sm:p-5">
+    <div class="flex items-start gap-3">
+      <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+        <UIcon
+          name="i-lucide-archive"
+          class="size-5"
+        />
+      </div>
+      <div class="min-w-0">
+        <h3 class="text-base font-semibold">
+          {{ t('storage.backup.exportTitle') }}
+        </h3>
+        <p class="mt-0.5 text-sm text-muted">
+          {{ t('storage.backup.exportSubtitle') }}
+        </p>
+      </div>
+    </div>
+
+    <div class="mt-4 flex flex-1 flex-col space-y-2">
+      <div
+        v-if="loading"
+        class="flex items-center gap-2 text-sm text-muted"
+      >
+        <UIcon
+          name="i-lucide-loader-circle"
+          class="size-4 animate-spin"
+        />
+        {{ t('storage.backup.estimateLoading') }}
+      </div>
+
+      <dl
+        v-else-if="estimate"
+        class="space-y-1.5 rounded-lg bg-muted/25 px-3 py-2.5 text-sm"
+      >
+        <div class="flex items-baseline justify-between gap-2">
+          <dt class="text-muted">
+            {{ t('storage.backup.estimateImageCountLabel') }}
+          </dt>
+          <dd class="font-medium tabular-nums">
+            {{ estimate.imageCount }} · {{ formatFileSize(estimate.imageBytes) }}
+          </dd>
+        </div>
+        <div class="flex items-baseline justify-between gap-2">
+          <dt class="text-muted">
+            {{ t('storage.backup.estimateDatabaseSnapshotLabel') }}
+          </dt>
+          <dd class="font-medium tabular-nums">
+            {{ formatFileSize(estimate.databaseBytes) }}
+          </dd>
+        </div>
+        <div class="flex items-baseline justify-between gap-2 border-t border-default/40 pt-1.5">
+          <dt class="font-medium text-default">
+            {{ t('storage.backup.estimatePackageSizeLabel') }}
+          </dt>
+          <dd class="font-semibold tabular-nums">
+            {{ formatFileSize(estimate.totalBytes) }}
+          </dd>
+        </div>
+        <div class="flex items-baseline justify-between gap-2 border-t border-default/40 pt-1.5">
+          <dt class="text-muted">
+            {{ t('storage.backup.estimateStoragePathLabel') }}
+          </dt>
+          <dd class="truncate font-mono text-xs font-medium">
+            {{ t('storage.backup.estimateStoragePathValue') }}
+          </dd>
+        </div>
+      </dl>
+
+      <div
+        v-if="estimate && !loading"
+        class="mt-auto rounded-lg bg-muted/15 px-3 py-2.5"
+      >
+        <p class="text-xs font-medium text-default">
+          {{ t('storage.backup.exportIncludesTitle') }}
+        </p>
+        <ul class="mt-2 space-y-1.5 text-xs leading-relaxed text-muted">
+          <li class="flex items-start gap-2">
+            <UIcon
+              name="i-lucide-check"
+              class="mt-0.5 size-3.5 shrink-0 text-primary"
+            />
+            <span>{{ t('storage.backup.exportIncludesDb') }}</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <UIcon
+              name="i-lucide-check"
+              class="mt-0.5 size-3.5 shrink-0 text-primary"
+            />
+            <span>{{ t('storage.backup.exportIncludesImages', { count: estimate.imageCount }) }}</span>
+          </li>
+          <li class="flex items-start gap-2">
+            <UIcon
+              name="i-lucide-minus"
+              class="mt-0.5 size-3.5 shrink-0 text-muted"
+            />
+            <span>{{ t('storage.backup.exportExcludesSecrets') }}</span>
+          </li>
+        </ul>
+      </div>
+
+      <StorageBackupJobProgress
+        v-if="busy && activeJob"
+        class="mt-2"
+        :message="activeJob.message"
+        :progress="activeJob.progress"
+        :total="activeJob.total"
+      />
+    </div>
+
+    <div class="mt-auto border-t border-default pt-4">
+      <UButton
+        :label="t('storage.backup.exportAction')"
+        icon="i-lucide-download"
+        size="sm"
+        :loading="busy"
+        :disabled="disabled || busy"
+        @click="emit('export')"
+      />
+    </div>
+  </article>
+</template>

app/components/storage/BackupJobProgress.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const props = defineProps<{
+  message: string
+  progress: number
+  total: number
+}>()
+
+const percent = computed(() => {
+  if (!props.total) return 0
+  return Math.min(100, Math.round((props.progress / props.total) * 100))
+})
+</script>
+
+<template>
+  <div class="space-y-1.5">
+    <div class="flex items-center justify-between gap-2 text-xs text-muted">
+      <span class="truncate">{{ message }}</span>
+      <span
+        v-if="total > 0"
+        class="shrink-0 tabular-nums"
+      >
+        {{ progress }} / {{ total }}
+      </span>
+    </div>
+    <div class="h-1 overflow-hidden rounded-full bg-muted">
+      <div
+        class="h-full rounded-full bg-primary transition-all duration-300"
+        :style="{ width: `${percent}%` }"
+      />
+    </div>
+  </div>
+</template>

app/components/storage/BackupJobTable.vue

@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import type { BackupJobItem } from '~/types/backup'
+
+defineProps<{
+  jobs: BackupJobItem[]
+  polling: boolean
+  page: number
+  totalPages: number
+  total: number
+  pageSize: number
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  'retry': [jobId: string]
+  'download': [jobId: string]
+  'cancel': [jobId: string]
+  'view': [job: BackupJobItem]
+  'update:page': [page: number]
+  'update:pageSize': [pageSize: number]
+}>()
+
+const { t, locale } = useI18n()
+
+function typeLabel(type: BackupJobItem['type']): string {
+  const map: Record<BackupJobItem['type'], string> = {
+    full_export: t('storage.backup.jobTypeExport'),
+    full_restore: t('storage.backup.jobTypeRestore'),
+    backend_sync: t('storage.backup.jobTypeSync')
+  }
+  return map[type]
+}
+
+function statusColor(status: BackupJobItem['status']): 'success' | 'error' | 'warning' | 'neutral' {
+  if (status === 'done') return 'success'
+  if (status === 'failed') return 'error'
+  if (status === 'running') return 'warning'
+  return 'neutral'
+}
+
+function statusLabel(status: BackupJobItem['status']): string {
+  const map: Record<BackupJobItem['status'], string> = {
+    pending: t('storage.backup.statusPending'),
+    running: t('storage.backup.statusRunning'),
+    done: t('storage.backup.statusDone'),
+    failed: t('storage.backup.statusFailed')
+  }
+  return map[status]
+}
+
+function progressPercent(job: BackupJobItem): number {
+  if (!job.total) return job.status === 'done' ? 100 : 0
+  return Math.min(100, Math.round((job.progress / job.total) * 100))
+}
+
+function jobMessage(job: BackupJobItem): string {
+  if (job.status === 'failed') {
+    return job.error || job.message || t('storage.backup.jobFailedUnknown')
+  }
+  if (job.status === 'running' || job.status === 'pending') {
+    return job.message
+  }
+  if (job.status === 'done' && job.message) {
+    return job.message
+  }
+  return ''
+}
+
+function canRetry(job: BackupJobItem): boolean {
+  return job.type === 'backend_sync' && job.status === 'failed'
+}
+
+function canCancel(job: BackupJobItem): boolean {
+  return job.status === 'running' || job.status === 'pending'
+}
+
+function canView(job: BackupJobItem): boolean {
+  return job.type === 'full_restore' && job.status === 'done' && Boolean(job.message)
+}
+
+function formatTime(value: string) {
+  if (!value) return '—'
+  return new Date(value).toLocaleString(locale.value, { hour12: false })
+}
+</script>
+
+<template>
+  <section class="overflow-hidden rounded-xl border border-default bg-elevated">
+    <header class="flex items-center justify-between gap-3 border-b border-default/50 px-4 py-4 sm:px-5">
+      <div>
+        <h3 class="text-sm font-semibold">
+          {{ t('storage.backup.jobsTitle') }}
+        </h3>
+        <p class="mt-0.5 text-xs text-muted">
+          {{ t('storage.backup.jobsSubtitle') }}
+        </p>
+      </div>
+      <UIcon
+        v-if="polling"
+        name="i-lucide-loader-circle"
+        class="size-4 shrink-0 animate-spin text-muted"
+      />
+    </header>
+
+    <div
+      v-if="!jobs.length && !loading"
+      class="flex flex-col items-center gap-2 px-4 py-12 text-center sm:px-5"
+    >
+      <UIcon
+        name="i-lucide-clipboard-list"
+        class="size-7 text-muted"
+      />
+      <p class="text-sm text-muted">
+        {{ t('storage.backup.jobsEmpty') }}
+      </p>
+    </div>
+
+    <div
+      v-else
+      class="overflow-x-auto"
+    >
+      <table class="w-full min-w-[800px] text-left text-sm">
+        <thead>
+          <tr class="border-b border-default/50 text-xs text-muted">
+            <th class="px-4 py-3 font-medium sm:px-5">
+              {{ t('storage.backup.colTask') }}
+            </th>
+            <th class="px-4 py-3 font-medium sm:px-5">
+              {{ t('storage.backup.colStatus') }}
+            </th>
+            <th class="px-4 py-3 font-medium sm:px-5">
+              {{ t('storage.backup.colMessage') }}
+            </th>
+            <th class="px-4 py-3 font-medium sm:px-5">
+              {{ t('storage.backup.colProgress') }}
+            </th>
+            <th class="px-4 py-3 font-medium sm:px-5">
+              {{ t('storage.backup.colCreated') }}
+            </th>
+            <th class="px-4 py-3 font-medium sm:px-5">
+              {{ t('storage.backup.colActions') }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="job in jobs"
+            :key="job.id"
+            class="border-b border-default/40 last:border-0"
+          >
+            <td class="px-4 py-3.5 whitespace-nowrap font-medium sm:px-5">
+              {{ typeLabel(job.type) }}
+            </td>
+            <td class="px-4 py-3.5 sm:px-5">
+              <UBadge
+                :color="statusColor(job.status)"
+                variant="subtle"
+                size="sm"
+              >
+                {{ statusLabel(job.status) }}
+              </UBadge>
+            </td>
+            <td class="max-w-xs px-4 py-3.5 sm:px-5">
+              <p
+                v-if="jobMessage(job)"
+                class="line-clamp-2 text-xs leading-relaxed"
+                :class="job.status === 'failed' ? 'text-error' : 'text-muted'"
+                :title="jobMessage(job)"
+              >
+                {{ jobMessage(job) }}
+              </p>
+              <span
+                v-else
+                class="text-xs text-dimmed"
+              >—</span>
+            </td>
+            <td class="min-w-32 px-4 py-3.5 sm:px-5">
+              <div class="flex items-center gap-2">
+                <div class="h-1 min-w-0 flex-1 overflow-hidden rounded-full bg-muted">
+                  <div
+                    class="h-full rounded-full bg-primary transition-all"
+                    :class="{ 'animate-pulse': job.status === 'running' }"
+                    :style="{ width: `${progressPercent(job)}%` }"
+                  />
+                </div>
+                <span class="shrink-0 text-xs tabular-nums text-muted">
+                  <template v-if="job.total">{{ job.progress }}/{{ job.total }}</template>
+                  <template v-else-if="job.status === 'done'">100%</template>
+                  <template v-else>—</template>
+                </span>
+              </div>
+            </td>
+            <td class="px-4 py-3.5 whitespace-nowrap text-xs text-muted sm:px-5">
+              {{ formatTime(job.createdAt) }}
+            </td>
+            <td class="px-4 py-3.5 sm:px-5">
+              <div class="flex flex-wrap gap-1.5">
+                <UButton
+                  v-if="job.downloadable"
+                  :label="t('storage.backup.download')"
+                  icon="i-lucide-download"
+                  size="xs"
+                  variant="outline"
+                  color="neutral"
+                  @click="emit('download', job.id)"
+                />
+                <UButton
+                  v-if="canView(job)"
+                  :label="t('storage.backup.jobView')"
+                  icon="i-lucide-eye"
+                  size="xs"
+                  variant="outline"
+                  color="neutral"
+                  @click="emit('view', job)"
+                />
+                <UButton
+                  v-if="canCancel(job)"
+                  :label="t('storage.backup.cancel')"
+                  icon="i-lucide-x"
+                  size="xs"
+                  variant="outline"
+                  color="warning"
+                  @click="emit('cancel', job.id)"
+                />
+                <UButton
+                  v-if="canRetry(job)"
+                  :label="t('storage.backup.retry')"
+                  icon="i-lucide-rotate-ccw"
+                  size="xs"
+                  variant="outline"
+                  color="neutral"
+                  @click="emit('retry', job.id)"
+                />
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div
+      v-if="total > 0"
+      class="border-t border-default/50 px-4 py-4 sm:px-5"
+    >
+      <PaginationBar
+        :page="page"
+        :total-pages="totalPages"
+        :total="total"
+        :page-size="pageSize"
+        :loading="loading"
+        :unit="t('storage.backup.jobsUnit')"
+        @update:page="emit('update:page', $event)"
+        @update:page-size="emit('update:pageSize', $event)"
+      />
+    </div>
+  </section>
+</template>

app/components/storage/BackupRestoreCard.vue

@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import type { BackupPackageItem, BackupRestorePreview } from '~/types/backup'
+
+const props = defineProps<{
+  packages: BackupPackageItem[]
+  busy: boolean
+  disabled?: boolean
+  restoreBusy?: boolean
+  activeJob?: { progress: number, total: number, message: string } | null
+  previewRestore: (input: { file?: File, archiveName?: string }) => Promise<BackupRestorePreview>
+}>()
+
+const emit = defineEmits<{
+  restore: [input: { file?: File, archiveName?: string, conflictMode: 'skip' | 'overwrite' }]
+}>()
+
+const { t, locale } = useI18n()
+const { formatFileSize } = useFileSize()
+const toast = useToast()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+const selectedFile = ref<File | null>(null)
+const selectedPackage = ref<string>('')
+const conflictMode = ref<'skip' | 'overwrite'>('skip')
+const preview = ref<BackupRestorePreview | null>(null)
+const previewLoading = ref(false)
+const confirmOpen = ref(false)
+
+const conflictItems = computed(() => [
+  { label: t('storage.backup.conflictSkip'), value: 'skip' },
+  { label: t('storage.backup.conflictOverwrite'), value: 'overwrite' }
+])
+
+const selectMenuUi = {
+  content: 'min-w-[var(--reka-select-trigger-width)] w-max max-w-[min(100vw-2rem,24rem)]',
+  item: 'whitespace-normal',
+  itemLabel: 'whitespace-normal'
+}
+
+const packageOptions = computed(() =>
+  props.packages.map(pkg => ({
+    label: `${shortenName(pkg.name)} (${formatFileSize(pkg.bytes)})`,
+    value: pkg.name
+  }))
+)
+
+function shortenName(name: string) {
+  if (name.length <= 36) return name
+  return `${name.slice(0, 22)}…${name.slice(-10)}`
+}
+
+function formatTime(value: string) {
+  if (!value) return '—'
+  return new Date(value).toLocaleString(locale.value, { hour12: false })
+}
+
+function pickFile() {
+  fileInput.value?.click()
+}
+
+function onFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0] ?? null
+  if (!file) return
+  selectedFile.value = file
+  selectedPackage.value = ''
+  preview.value = null
+  if (input) input.value = ''
+}
+
+function selectPackage(name: string | null) {
+  if (!name) {
+    selectedPackage.value = ''
+    return
+  }
+  selectedPackage.value = name
+  selectedFile.value = null
+  preview.value = null
+}
+
+async function submit() {
+  if (!selectedFile.value && !selectedPackage.value) {
+    toast.add({ title: t('storage.backup.restoreSelectRequired'), color: 'warning' })
+    return
+  }
+  previewLoading.value = true
+  try {
+    preview.value = await props.previewRestore({
+      file: selectedFile.value ?? undefined,
+      archiveName: selectedPackage.value || undefined
+    })
+    confirmOpen.value = true
+  } catch {
+    toast.add({ title: t('storage.backup.previewFailed'), color: 'error' })
+  } finally {
+    previewLoading.value = false
+  }
+}
+
+function confirmRestore() {
+  emit('restore', {
+    file: selectedFile.value ?? undefined,
+    archiveName: selectedPackage.value || undefined,
+    conflictMode: conflictMode.value
+  })
+  confirmOpen.value = false
+  selectedFile.value = null
+  selectedPackage.value = ''
+  preview.value = null
+}
+
+const sourceLabel = computed(() => selectedFile.value?.name || selectedPackage.value || '')
+</script>
+
+<template>
+  <article class="flex h-full flex-col rounded-xl border border-default bg-elevated p-4 sm:p-5">
+    <div class="flex items-start gap-3">
+      <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-warning/10 text-warning">
+        <UIcon
+          name="i-lucide-upload"
+          class="size-5"
+        />
+      </div>
+      <div class="min-w-0">
+        <h3 class="text-base font-semibold">
+          {{ t('storage.backup.restoreTitle') }}
+        </h3>
+        <p class="mt-0.5 text-sm text-muted">
+          {{ t('storage.backup.restoreSubtitle') }}
+        </p>
+      </div>
+    </div>
+
+    <div class="mt-4 flex flex-1 flex-col space-y-3">
+      <div class="space-y-1.5">
+        <label class="text-xs text-muted">{{ t('storage.backup.restoreUploadLabel') }}</label>
+        <button
+          type="button"
+          class="flex w-full flex-col items-center gap-1.5 rounded-lg border-2 border-dashed px-3 py-2.5 text-center transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+          :class="selectedFile
+            ? 'border-primary/50 bg-primary/5'
+            : 'border-warning/40 bg-warning/5 hover:border-warning/60 hover:bg-warning/10'"
+          :disabled="disabled || busy"
+          @click="pickFile"
+        >
+          <div
+            class="flex size-8 items-center justify-center rounded-full"
+            :class="selectedFile ? 'bg-primary/15 text-primary' : 'bg-warning/15 text-warning'"
+          >
+            <UIcon
+              :name="selectedFile ? 'i-lucide-check' : 'i-lucide-upload'"
+              class="size-4.5"
+            />
+          </div>
+          <span class="max-w-full truncate text-sm font-medium text-default">
+            {{ selectedFile?.name ?? t('storage.backup.restoreUpload') }}
+          </span>
+          <span
+            v-if="!selectedFile"
+            class="text-xs text-muted"
+          >
+            {{ t('storage.backup.restoreUploadHint') }}
+          </span>
+        </button>
+      </div>
+
+      <div
+        v-if="packages.length"
+        class="space-y-1.5"
+      >
+        <label class="text-xs text-muted">{{ t('storage.backup.restoreServerPackages') }}</label>
+        <USelect
+          :model-value="selectedPackage || undefined"
+          :items="packageOptions"
+          size="sm"
+          class="w-full"
+          :ui="selectMenuUi"
+          :placeholder="t('storage.backup.restoreServerSelectPlaceholder')"
+          :disabled="disabled || busy"
+          @update:model-value="selectPackage"
+        />
+      </div>
+
+      <div class="space-y-2">
+        <label class="text-xs text-muted">{{ t('storage.backup.conflictMode') }}</label>
+        <URadioGroup
+          v-model="conflictMode"
+          :items="conflictItems"
+          :disabled="disabled || busy"
+        />
+      </div>
+
+      <StorageBackupJobProgress
+        v-if="restoreBusy && activeJob"
+        class="mt-auto"
+        :message="activeJob.message"
+        :progress="activeJob.progress"
+        :total="activeJob.total"
+      />
+    </div>
+
+    <div class="mt-auto border-t border-default pt-4">
+      <UButton
+        :label="t('storage.backup.restorePreviewConfirm')"
+        icon="i-lucide-search"
+        size="sm"
+        :loading="previewLoading || restoreBusy"
+        :disabled="disabled || busy"
+        @click="submit"
+      />
+    </div>
+
+    <input
+      ref="fileInput"
+      type="file"
+      accept=".phost.tar.gz,.tar.gz"
+      class="hidden"
+      @change="onFileChange"
+    >
+
+    <UModal
+      v-model:open="confirmOpen"
+      :ui="{ content: 'max-w-md' }"
+    >
+      <template #content>
+        <div class="p-5 sm:p-6">
+          <h2 class="text-base font-semibold">
+            {{ t('storage.backup.restoreConfirmTitle') }}
+          </h2>
+          <p
+            v-if="sourceLabel"
+            class="mt-2 truncate font-mono text-xs text-muted"
+            :title="sourceLabel"
+          >
+            {{ sourceLabel }}
+          </p>
+
+          <dl
+            v-if="preview"
+            class="mt-4 grid grid-cols-2 gap-3 text-sm"
+          >
+            <div>
+              <dt class="text-xs text-muted">
+                {{ t('storage.backup.previewImages') }}
+              </dt>
+              <dd class="mt-0.5 font-semibold tabular-nums">
+                {{ preview.imageCount }}
+              </dd>
+            </div>
+            <div>
+              <dt class="text-xs text-muted">
+                {{ t('storage.backup.previewNew') }}
+              </dt>
+              <dd class="mt-0.5 font-semibold tabular-nums">
+                {{ preview.newImages }}
+              </dd>
+            </div>
+            <div>
+              <dt class="text-xs text-muted">
+                {{ t('storage.backup.previewConflicts') }}
+              </dt>
+              <dd class="mt-0.5 font-semibold tabular-nums">
+                {{ preview.conflictingImages }}
+              </dd>
+            </div>
+            <div>
+              <dt class="text-xs text-muted">
+                {{ t('storage.backup.previewCreated') }}
+              </dt>
+              <dd class="mt-0.5 text-xs">
+                {{ formatTime(preview.createdAt) }}
+              </dd>
+            </div>
+          </dl>
+
+          <UAlert
+            v-if="conflictMode === 'overwrite'"
+            class="mt-4"
+            color="warning"
+            variant="subtle"
+            icon="i-lucide-triangle-alert"
+            :description="t('storage.backup.restoreOverwriteWarning')"
+          />
+
+          <div class="mt-5 flex justify-end gap-2">
+            <UButton
+              :label="t('common.cancel')"
+              size="sm"
+              variant="outline"
+              color="neutral"
+              @click="() => { confirmOpen = false }"
+            />
+            <UButton
+              :label="t('storage.backup.restoreConfirm')"
+              size="sm"
+              color="warning"
+              :loading="restoreBusy"
+              @click="confirmRestore"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </article>
+</template>

app/components/storage/StorageBackendCard.vue

@@ -1,20 +1,12 @@
 <script setup lang="ts">
 import type { StorageBackendItem } from '~/types/storage'
 
-type CardAction = {
-  key: string
-  icon: string
-  label: string
-  shortLabel: string
-  danger?: boolean
-  disabled?: boolean
-  onClick: () => void
-}
-
 const props = defineProps<{
   backend: StorageBackendItem
   envOverride?: boolean
   busy?: boolean
+  showMigrateIn?: boolean
+  showMigrateOut?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -23,6 +15,8 @@ const emit = defineEmits<{
   test: []
   toggleEnabled: []
   delete: []
+  migrateIn: []
+  migrateOut: []
 }>()
 
 const { t } = useI18n()
@@ -35,181 +29,172 @@ const typeLabel = computed(() =>
   props.backend.type === 'local' ? t('storage.backendLocal') : t('storage.backendCloud')
 )
 
-const servingLabel = computed(() =>
-  props.backend.servingMode === 'public'
-    ? t('storage.servingPublic')
-    : t('storage.servingProxy')
-)
-
-const bucketLine = computed(() => {
-  if (props.backend.type !== 's3') return null
-  return props.backend.config.bucket || t('storage.notConfigured')
-})
-
 const actionsDisabled = computed(() => props.envOverride || props.busy)
 
-const actions = computed<CardAction[]>(() => {
+const isLocal = computed(() => props.backend.type === 'local')
-  const isLocal = props.backend.type === 'local'
-  const items: CardAction[] = []
 
-  if (!props.backend.isDefault && props.backend.enabled) {
+function canSetDefault() {
-    items.push({
+  return !props.backend.isDefault && props.backend.enabled
-      key: 'default',
+}
-      icon: 'i-lucide-star',
-      label: t('storage.setDefault'),
-      shortLabel: isLocal ? t('storage.setDefault') : t('storage.actionSetDefault'),
-      onClick: () => emit('setDefault')
-    })
-  }
 
-  if (props.backend.type === 's3') {
+function canEdit() {
-    items.push({
+  return props.backend.type === 's3'
-      key: 'edit',
+}
-      icon: 'i-lucide-pencil',
-      label: t('common.edit'),
-      shortLabel: t('common.edit'),
-      onClick: () => emit('edit')
-    })
-  }
 
-  items.push({
+function canToggle() {
-    key: 'test',
+  return props.backend.type !== 'local'
-    icon: 'i-lucide-plug-zap',
+}
-    label: t('storage.testConnection'),
-    shortLabel: isLocal ? t('storage.testConnection') : t('storage.actionTest'),
-    onClick: () => emit('test')
-  })
 
-  if (props.backend.type !== 'local') {
+function canDelete() {
-    items.push({
+  return props.backend.type !== 'local' && !props.backend.isDefault
-      key: 'toggle',
+}
-      icon: props.backend.enabled ? 'i-lucide-pause' : 'i-lucide-play',
-      label: props.backend.enabled ? t('storage.disable') : t('storage.enable'),
-      shortLabel: props.backend.enabled ? t('storage.disable') : t('storage.enable'),
-      disabled: props.backend.isDefault && props.backend.enabled,
-      onClick: () => emit('toggleEnabled')
-    })
-  }
-
-  if (props.backend.type !== 'local' && !props.backend.isDefault) {
-    items.push({
-      key: 'delete',
-      icon: 'i-lucide-trash-2',
-      label: t('common.delete'),
-      shortLabel: t('common.delete'),
-      danger: true,
-      onClick: () => emit('delete')
-    })
-  }
-
-  return items
-})
-
-const actionGridClass = computed(() => {
-  switch (actions.value.length) {
-    case 1: return 'grid-cols-1'
-    case 2: return 'grid-cols-2'
-    case 3: return 'grid-cols-3'
-    case 4: return 'grid-cols-4'
-    default: return 'grid-cols-5'
-  }
-})
 </script>
 
 <template>
   <article
-    class="flex h-full flex-col rounded-2xl border border-default bg-elevated p-4 shadow-sm"
+    class="flex h-full flex-col rounded-xl border border-default bg-elevated p-4 sm:p-5"
-    :class="{
+    :class="{ 'opacity-75': !backend.enabled }"
-      'ring-2 ring-primary/30': backend.isDefault,
-      'opacity-75': !backend.enabled
-    }"
   >
-    <div class="mb-3 flex items-start justify-between gap-2">
+    <div class="flex items-start justify-between gap-3">
-      <div class="flex min-w-0 items-start gap-2.5">
+      <div class="flex min-w-0 items-center gap-3">
-        <div
+        <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
-          class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"
-        >
           <UIcon
             :name="typeIcon"
-            class="size-4.5"
+            class="size-5"
           />
         </div>
-        <div class="min-w-0">
+        <h3 class="truncate text-base font-semibold">
-          <h3 class="truncate text-sm font-semibold">
+          {{ backend.name }}
-            {{ backend.name }}
+        </h3>
-          </h3>
-          <p class="mt-0.5 text-xs text-muted">
-            {{ typeLabel }}
-            <template v-if="bucketLine">
-              · {{ bucketLine }}
-            </template>
-          </p>
-        </div>
       </div>
-      <div class="flex shrink-0 flex-wrap justify-end gap-1">
+      <div class="flex shrink-0 flex-wrap justify-end gap-1.5">
-        <UBadge
+        <span
-          v-if="backend.enabled"
+          v-if="backend.isDefault"
-          color="success"
+          class="inline-flex rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
-          variant="subtle"
+        >
-          size="xs"
+          {{ 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') }}
-        </UBadge>
+        </span>
-        <UBadge
+        <span
-          v-if="backend.isDefault"
+          v-else
-          color="primary"
+          class="inline-flex rounded-md bg-muted px-2 py-0.5 text-xs font-medium text-muted"
-          variant="subtle"
-          size="xs"
-        >
-          {{ t('storage.badgeDefault') }}
-        </UBadge>
-        <UBadge
-          v-if="!backend.enabled"
-          color="warning"
-          variant="subtle"
-          size="xs"
         >
           {{ t('storage.badgeDisabled') }}
-        </UBadge>
+        </span>
       </div>
     </div>
 
-    <StorageUsageBar
+    <div class="mt-4">
-      :capacity="backend.capacity"
+      <StorageUsageBar
-      :index-bytes="backend.usage.bytes"
+        :capacity="backend.capacity"
-    />
+        :index-bytes="backend.usage.bytes"
+      />
+    </div>
 
-    <p class="mt-3 text-xs text-muted">
+    <div class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
-      {{ t('storage.servingMode') }}: {{ servingLabel }}
+      <div class="flex min-w-0 items-center gap-2">
-    </p>
+        <span class="shrink-0">{{ t('storage.storageId') }}:</span>
-
+        <code class="min-w-0 truncate font-mono text-dimmed">{{ backend.id }}</code>
-    <div class="mt-4 border-t border-default pt-4">
+        <CopyButton
-      <div
+          icon="i-lucide-copy"
-        class="grid gap-1.5"
+          icon-only
-        :class="actionGridClass"
+          variant="ghost"
-      >
+          color="primary"
-        <button
+          class="shrink-0"
-          v-for="action in actions"
+          :label="t('common.copy')"
-          :key="action.key"
+          :value="backend.id"
-          type="button"
+          :success-title="t('copy.copied')"
-          class="flex flex-col items-center justify-center gap-1 rounded-lg border px-1 py-2 transition disabled:cursor-not-allowed disabled:opacity-40"
+        />
-          :class="action.danger
-            ? 'border-error/30 text-error hover:bg-error/5'
-            : 'border-default text-muted hover:bg-muted/40 hover:text-highlighted'"
-          :title="action.label"
-          :aria-label="action.label"
-          :disabled="actionsDisabled || action.disabled"
-          @click="action.onClick"
-        >
-          <UIcon
-            :name="action.icon"
-            class="size-4 shrink-0"
-          />
-          <span class="w-full truncate text-center text-[11px] leading-none">
-            {{ action.shortLabel }}
-          </span>
-        </button>
       </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="showMigrateIn"
+        :label="t('storage.backup.migrateIn')"
+        :title="t('storage.backup.migrateInHint')"
+        icon="i-lucide-import"
+        size="sm"
+        variant="outline"
+        color="neutral"
+        :disabled="actionsDisabled"
+        @click="emit('migrateIn')"
+      />
+      <UButton
+        v-if="showMigrateOut"
+        :label="t('storage.backup.migrateOut')"
+        :title="t('storage.backup.migrateOutHint')"
+        icon="i-lucide-arrow-up-from-line"
+        size="sm"
+        variant="outline"
+        color="neutral"
+        :disabled="actionsDisabled"
+        @click="emit('migrateOut')"
+      />
+      <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>

app/components/storage/StorageBackendForm.vue

@@ -6,6 +6,7 @@ type StorageProvider = 'r2' | 'cos' | 'oss' | 'aws' | 'custom'
 
 export interface StorageFormPayload {
   name: string
+  provider: StorageProvider
   config: {
     endpoint: string
     region: string
@@ -158,6 +159,7 @@ watch(provider, (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',

app/components/storage/StorageBackupPanel.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import type { BackupJobItem, SyncDraft } from '~/types/backup'
+import type { StorageBackendItem } from '~/types/storage'
+
+const props = defineProps<{
+  backends: StorageBackendItem[]
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+const {
+  jobs,
+  jobsPage,
+  jobsPageSize,
+  jobsTotal,
+  jobsTotalPages,
+  jobsLoading,
+  estimate,
+  packages,
+  loadingEstimate,
+  polling,
+  hasActiveJob,
+  getActiveJob,
+  loadJobs,
+  setJobsPage,
+  setJobsPageSize,
+  loadEstimate,
+  startPolling,
+  createExport,
+  previewRestore,
+  confirmRestore,
+  previewSync,
+  startSync,
+  retryJob,
+  cancelJob,
+  downloadUrl
+} = useBackup()
+
+const syncDraft = ref<SyncDraft | null>(null)
+const syncCardRef = ref<{ applyDraft: (draft: SyncDraft) => void } | null>(null)
+const panelRef = ref<HTMLElement | null>(null)
+const syncHighlighted = ref(false)
+
+const activeJob = computed(() => getActiveJob())
+const exportBusy = computed(() => activeJob.value?.type === 'full_export')
+const restoreBusy = computed(() => activeJob.value?.type === 'full_restore')
+const syncBusy = computed(() => activeJob.value?.type === 'backend_sync')
+const anyJobBusy = computed(() => Boolean(activeJob.value))
+
+onMounted(async () => {
+  await Promise.all([loadJobs(), loadEstimate()])
+  if (hasActiveJob()) {
+    startPolling()
+  }
+})
+
+function applySyncDraft(draft: SyncDraft) {
+  syncDraft.value = draft
+  syncCardRef.value?.applyDraft(draft)
+  syncHighlighted.value = true
+  window.setTimeout(() => {
+    syncHighlighted.value = false
+  }, 2500)
+  nextTick(() => {
+    panelRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  })
+  toast.add({ title: t('storage.backup.syncDraftApplied'), color: 'info' })
+}
+
+defineExpose({ applySyncDraft })
+
+async function onExport() {
+  await createExport()
+}
+
+async function onRestore(input: {
+  file?: File
+  archiveName?: string
+  conflictMode: 'skip' | 'overwrite'
+}) {
+  await confirmRestore(input)
+}
+
+async function onCancel(jobId: string) {
+  await cancelJob(jobId)
+}
+
+async function onSync(body: {
+  fromBackendId: string
+  toBackendId: string
+  deleteSource: boolean
+  setDefault: boolean
+}) {
+  await startSync(body)
+}
+
+function onDownload(jobId: string) {
+  window.open(downloadUrl(jobId), '_blank')
+}
+
+async function onRetry(jobId: string) {
+  await retryJob(jobId)
+}
+
+function onViewJob(job: BackupJobItem) {
+  toast.add({
+    title: t('storage.backup.jobTypeRestore'),
+    description: job.message,
+    color: 'info'
+  })
+}
+</script>
+
+<template>
+  <section
+    ref="panelRef"
+    class="scroll-mt-20 space-y-4 border-t border-default pt-5"
+  >
+    <header>
+      <h2 class="text-base font-semibold">
+        {{ t('storage.backup.sectionTitle') }}
+      </h2>
+      <p class="mt-1 text-sm text-muted">
+        {{ t('storage.backup.sectionSubtitle') }}
+      </p>
+    </header>
+
+    <div class="grid grid-cols-1 items-stretch gap-4 xl:grid-cols-3">
+      <StorageBackupExportCard
+        class="h-full"
+        :estimate="estimate"
+        :loading="loadingEstimate"
+        :busy="exportBusy"
+        :active-job="exportBusy ? activeJob : null"
+        :disabled="anyJobBusy && !exportBusy"
+        @export="onExport"
+      />
+      <StorageBackupRestoreCard
+        class="h-full"
+        :packages="packages"
+        :busy="anyJobBusy"
+        :restore-busy="restoreBusy"
+        :active-job="restoreBusy ? activeJob : null"
+        :disabled="anyJobBusy && !restoreBusy"
+        :preview-restore="previewRestore"
+        @restore="onRestore"
+      />
+      <StorageBackendSyncCard
+        ref="syncCardRef"
+        class="h-full"
+        :backends="props.backends"
+        :sync-draft="syncDraft"
+        :highlighted="syncHighlighted"
+        :busy="syncBusy"
+        :active-job="syncBusy ? activeJob : null"
+        :disabled="anyJobBusy && !syncBusy"
+        :preview-sync="previewSync"
+        @sync="onSync"
+      />
+    </div>
+
+    <StorageBackupJobTable
+      :jobs="jobs"
+      :polling="polling"
+      :page="jobsPage"
+      :total-pages="jobsTotalPages"
+      :total="jobsTotal"
+      :page-size="jobsPageSize"
+      :loading="jobsLoading"
+      @update:page="setJobsPage"
+      @update:page-size="setJobsPageSize"
+      @download="onDownload"
+      @retry="onRetry"
+      @cancel="onCancel"
+      @view="onViewJob"
+    />
+  </section>
+</template>

app/components/storage/StorageOverview.vue

@@ -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>

app/components/storage/StorageSupportedBackends.vue

@@ -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>

app/components/storage/StorageUsageBar.vue

@@ -36,56 +36,53 @@ function formatOptional(bytes: number | null): string {
 
 <template>
   <div class="space-y-3">
-    <div class="grid grid-cols-3 gap-2 text-center text-xs">
+    <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
-      <div class="rounded-lg bg-muted/30 px-2 py-2">
+      <div>
-        <p class="text-muted">
+        <p class="text-xs text-muted">
-          {{ $t('storage.statTotal') }}
-        </p>
-        <p class="mt-1 font-medium tabular-nums text-highlighted">
-          {{ formatOptional(capacity.totalBytes) }}
-        </p>
-      </div>
-      <div class="rounded-lg bg-muted/30 px-2 py-2">
-        <p class="text-muted">
           {{ $t('storage.statUsed') }}
         </p>
-        <p class="mt-1 font-medium tabular-nums text-highlighted">
+        <p class="mt-1 text-sm font-semibold tabular-nums">
           {{ formatFileSize(displayUsedBytes) }}
         </p>
       </div>
-      <div class="rounded-lg bg-muted/30 px-2 py-2">
+      <div>
-        <p class="text-muted">
+        <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 font-medium tabular-nums"
+          class="mt-1 text-sm font-semibold tabular-nums"
-          :class="overQuota ? 'text-error' : 'text-highlighted'"
+          :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="space-y-1"
+      class="h-1 overflow-hidden rounded-full bg-muted/50"
     >
-      <div class="flex items-center justify-between text-xs">
+      <div
-        <span class="text-muted">{{ $t('storage.usageRate') }}</span>
+        class="h-full rounded-full transition-all"
-        <span
+        :class="overQuota ? 'bg-error/80' : 'bg-primary'"
-          class="tabular-nums font-medium"
+        :style="{ width: `${barWidth}%` }"
-          :class="overQuota ? 'text-error' : ''"
+      />
-        >
-          {{ displayPercent }}%
-        </span>
-      </div>
-      <div class="h-1.5 overflow-hidden rounded-full bg-muted/50">
-        <div
-          class="h-full rounded-full transition-all"
-          :class="overQuota ? 'bg-error/80' : 'bg-primary/70'"
-          :style="{ width: `${barWidth}%` }"
-        />
-      </div>
     </div>
   </div>
 </template>

app/composables/useApiDocs.ts

@@ -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
+}`
+    }
+  ]
+}

app/composables/useAuth.ts

@@ -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
 }
 
@@ -66,6 +75,21 @@ 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')
@@ -117,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<{
@@ -127,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 }
@@ -149,7 +177,8 @@ export function useAuth() {
 
   async function register(
     username: string,
-    password: string
+    password: string,
+    verification: LoginVerificationPayload
   ): Promise<AuthActionResult> {
     const validationError = validateAuthInput(username, password)
     if (validationError) {
@@ -162,7 +191,11 @@ export function useAuth() {
         {
           method: 'POST',
           credentials: 'include',
-          body: { username: username.trim(), password }
+          body: {
+            username: username.trim(),
+            password,
+            ...buildVerificationBody(verification)
+          }
         }
       )
       user.value = result.user
@@ -281,15 +314,19 @@ export function useAuth() {
 
   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 等）
+    }
   }
 
   function handleAuthError(error: unknown) {

app/composables/useBackup.ts

@@ -0,0 +1,319 @@
+import type {
+  BackupEstimate,
+  BackupJobItem,
+  BackupPackageItem,
+  BackupRestorePreview,
+  BackendSyncPreview
+} from '~/types/backup'
+
+const jobs = ref<BackupJobItem[]>([])
+const jobsPage = ref(1)
+const jobsPageSize = ref(10)
+const jobsTotal = ref(0)
+const jobsTotalPages = ref(1)
+const jobsLoading = ref(false)
+const activeJobState = ref<BackupJobItem | null>(null)
+const estimate = ref<BackupEstimate | null>(null)
+const packages = ref<BackupPackageItem[]>([])
+const loadingEstimate = ref(false)
+const polling = ref(false)
+let pollTimer: ReturnType<typeof setInterval> | null = null
+
+export function useBackup() {
+  const toast = useToast()
+  const { t } = useI18n()
+
+  function stopPolling() {
+    if (pollTimer) {
+      clearInterval(pollTimer)
+      pollTimer = null
+    }
+    polling.value = false
+  }
+
+  function hasActiveJob(): boolean {
+    return activeJobState.value !== null
+  }
+
+  function getActiveJob(): BackupJobItem | null {
+    return activeJobState.value
+  }
+
+  async function cancelJob(jobId: string) {
+    try {
+      await $fetch(`/api/admin/backup/jobs/${jobId}/cancel`, {
+        method: 'POST',
+        credentials: 'include'
+      })
+      await loadJobs()
+      toast.add({ title: t('storage.backup.cancelDone'), color: 'success' })
+    } catch (error: unknown) {
+      handleError(error, t('storage.backup.cancelFailed'))
+    }
+  }
+
+  async function loadJobs(options?: { page?: number, pageSize?: number }) {
+    if (options?.page !== undefined) jobsPage.value = options.page
+    if (options?.pageSize !== undefined) jobsPageSize.value = options.pageSize
+    jobsLoading.value = true
+    try {
+      const data = await $fetch<{
+        jobs: BackupJobItem[]
+        total: number
+        page: number
+        pageSize: number
+        totalPages: number
+        activeJob: BackupJobItem | null
+      }>('/api/admin/backup/jobs', {
+        credentials: 'include',
+        query: {
+          pageNum: jobsPage.value,
+          pageSize: jobsPageSize.value
+        }
+      })
+      jobs.value = data.jobs
+      jobsTotal.value = data.total
+      jobsPage.value = data.page
+      jobsPageSize.value = data.pageSize
+      jobsTotalPages.value = data.totalPages
+      activeJobState.value = data.activeJob
+      if (!data.activeJob) {
+        stopPolling()
+        void loadEstimate().catch(() => {})
+      }
+      return data.jobs
+    } finally {
+      jobsLoading.value = false
+    }
+  }
+
+  async function setJobsPage(page: number) {
+    jobsPage.value = page
+    return loadJobs()
+  }
+
+  async function setJobsPageSize(pageSize: number) {
+    jobsPageSize.value = pageSize
+    jobsPage.value = 1
+    return loadJobs()
+  }
+
+  async function refreshJobsFirstPage() {
+    jobsPage.value = 1
+    return loadJobs()
+  }
+
+  async function loadEstimate() {
+    loadingEstimate.value = true
+    try {
+      const data = await $fetch<{
+        estimate: BackupEstimate
+        packages: BackupPackageItem[]
+        backupsDir: string
+      }>('/api/admin/backup/estimate', { credentials: 'include' })
+      estimate.value = data.estimate
+      packages.value = data.packages
+      return data
+    } finally {
+      loadingEstimate.value = false
+    }
+  }
+
+  function startPolling() {
+    if (pollTimer) return
+    polling.value = true
+    pollTimer = setInterval(() => {
+      void loadJobs().catch(() => {})
+    }, 2000)
+  }
+
+  async function createExport() {
+    try {
+      const data = await $fetch<{ job: BackupJobItem, estimate: BackupEstimate }>(
+        '/api/admin/backup/export',
+        { method: 'POST', credentials: 'include' }
+      )
+      estimate.value = data.estimate
+      await refreshJobsFirstPage()
+      startPolling()
+      toast.add({ title: t('storage.backup.exportStarted'), color: 'success' })
+      return data.job
+    } catch (error: unknown) {
+      handleError(error, t('storage.backup.exportFailed'))
+      throw error
+    }
+  }
+
+  async function previewRestore(input: {
+    file?: File
+    archiveName?: string
+  }): Promise<BackupRestorePreview> {
+    if (input.file) {
+      const form = new FormData()
+      form.append('file', input.file)
+      form.append('dryRun', 'true')
+      const data = await $fetch<{ preview: BackupRestorePreview }>(
+        '/api/admin/backup/restore',
+        { method: 'POST', credentials: 'include', body: form }
+      )
+      return data.preview
+    }
+
+    const data = await $fetch<{ preview: BackupRestorePreview }>(
+      '/api/admin/backup/restore',
+      {
+        method: 'POST',
+        credentials: 'include',
+        body: {
+          archiveName: input.archiveName,
+          dryRun: true
+        }
+      }
+    )
+    return data.preview
+  }
+
+  async function confirmRestore(input: {
+    file?: File
+    archiveName?: string
+    conflictMode: 'skip' | 'overwrite'
+  }) {
+    try {
+      if (input.file) {
+        const form = new FormData()
+        form.append('file', input.file)
+        form.append('conflictMode', input.conflictMode)
+        const data = await $fetch<{ job: BackupJobItem }>(
+          '/api/admin/backup/restore',
+          { method: 'POST', credentials: 'include', body: form }
+        )
+        await refreshJobsFirstPage()
+        startPolling()
+        toast.add({ title: t('storage.backup.restoreStarted'), color: 'success' })
+        return data.job
+      }
+
+      const data = await $fetch<{ job: BackupJobItem }>(
+        '/api/admin/backup/restore',
+        {
+          method: 'POST',
+          credentials: 'include',
+          body: {
+            archiveName: input.archiveName,
+            conflictMode: input.conflictMode,
+            dryRun: false
+          }
+        }
+      )
+      await refreshJobsFirstPage()
+      startPolling()
+      toast.add({ title: t('storage.backup.restoreStarted'), color: 'success' })
+      return data.job
+    } catch (error: unknown) {
+      handleError(error, t('storage.backup.restoreFailed'))
+      throw error
+    }
+  }
+
+  async function previewSync(body: {
+    fromBackendId: string
+    toBackendId: string
+  }): Promise<BackendSyncPreview> {
+    const data = await $fetch<{ preview: BackendSyncPreview }>(
+      '/api/admin/storage/sync',
+      {
+        method: 'POST',
+        credentials: 'include',
+        body: { ...body, dryRun: true }
+      }
+    )
+    return data.preview
+  }
+
+  async function startSync(body: {
+    fromBackendId: string
+    toBackendId: string
+    deleteSource?: boolean
+    setDefault?: boolean
+  }) {
+    try {
+      const data = await $fetch<{ job: BackupJobItem }>(
+        '/api/admin/storage/sync',
+        {
+          method: 'POST',
+          credentials: 'include',
+          body
+        }
+      )
+      await refreshJobsFirstPage()
+      startPolling()
+      toast.add({ title: t('storage.backup.syncStarted'), color: 'success' })
+      return data.job
+    } catch (error: unknown) {
+      handleError(error, t('storage.backup.syncFailed'))
+      throw error
+    }
+  }
+
+  async function retryJob(jobId: string) {
+    try {
+      await $fetch(`/api/admin/backup/jobs/${jobId}/retry`, {
+        method: 'POST',
+        credentials: 'include'
+      })
+      await refreshJobsFirstPage()
+      startPolling()
+      toast.add({ title: t('storage.backup.retryStarted'), color: 'success' })
+    } catch (error: unknown) {
+      handleError(error, t('storage.backup.retryFailed'))
+    }
+  }
+
+  function downloadUrl(jobId: string): string {
+    return `/api/admin/backup/jobs/${jobId}/download`
+  }
+
+  function handleError(error: unknown, fallback: string) {
+    const status = typeof error === 'object' && error !== null && 'statusCode' in error
+      ? (error as { statusCode: number }).statusCode
+      : 0
+    if (status === 409) {
+      toast.add({ title: t('storage.backup.jobRunning'), color: 'warning' })
+      return
+    }
+    toast.add({ title: fallback, color: 'error' })
+  }
+
+  onUnmounted(() => {
+    stopPolling()
+  })
+
+  return {
+    jobs,
+    jobsPage,
+    jobsPageSize,
+    jobsTotal,
+    jobsTotalPages,
+    jobsLoading,
+    estimate,
+    packages,
+    loadingEstimate,
+    polling,
+    hasActiveJob,
+    getActiveJob,
+    loadJobs,
+    setJobsPage,
+    setJobsPageSize,
+    loadEstimate,
+    startPolling,
+    stopPolling,
+    createExport,
+    previewRestore,
+    confirmRestore,
+    previewSync,
+    startSync,
+    retryJob,
+    cancelJob,
+    downloadUrl
+  }
+}

app/composables/useImageList.ts

@@ -3,46 +3,46 @@ 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 listQueryParams(): Record<string, string> {
+  function filterQueryParams(): Record<string, string> {
-    return {
+    const params: Record<string, string> = { ...storageQueryParams() }
-      ...folderQueryParams(),
+    const contentType = activeContentType.value.trim()
-      ...storageQueryParams()
+    if (contentType && contentType !== 'all') {
+      params.contentType = contentType
     }
+    const uploadSource = activeUploadSource.value.trim()
+    if (uploadSource && uploadSource !== 'all') {
+      params.uploadSource = uploadSource
+    }
+    return params
   }
 
-  function matchesActiveFolder(key: string) {
+  function listQueryParams(): Record<string, string> {
-    const folder = activeFolder.value.trim()
+    return filterQueryParams()
-    if (!folder || folder === 'all') return true
-    return key.startsWith(`${folder}/`)
   }
 
   function matchesActiveStorage(item: ImageItem) {
@@ -74,9 +74,9 @@ export function useImageList() {
         credentials: 'include',
         query: listQueryParams()
       })
-      folderTotal.value = data.total
+      totalCount.value = data.total
     } catch {
-      folderTotal.value = null
+      totalCount.value = null
     } finally {
       loadingTotal.value = false
     }
@@ -88,7 +88,7 @@ export function useImageList() {
       const response = await $fetch<ImageListResponse>('/api/images', {
         credentials: 'include',
         query: {
-          limit: PAGE_SIZE,
+          limit: pageSize.value,
           page: targetPage,
           ...listQueryParams()
         }
@@ -116,7 +116,7 @@ export function useImageList() {
         credentials: 'include',
         query: {
           q,
-          limit: PAGE_SIZE,
+          limit: pageSize.value,
           page: targetPage,
           ...listQueryParams()
         }
@@ -138,27 +138,13 @@ export function useImageList() {
     await Promise.all([fetchList(1), fetchTotal()])
   }
 
-  async function initializeList(folder = 'all') {
+  async function initializeList() {
-    const next = folder.trim() || 'all'
-    activeFolder.value = next
     page.value = 1
     activeSearch.value = ''
     searchQuery.value = ''
     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
-    page.value = 1
-    if (activeSearch.value) {
-      await Promise.all([fetchSearch(1), fetchTotal()])
-    } else {
-      await Promise.all([fetchList(1), fetchTotal()])
-    }
-  }
-
   async function setActiveStorageBackend(backendId: string) {
     const next = backendId.trim() || 'all'
     if (next === activeStorageBackend.value) return
@@ -171,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
@@ -191,15 +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 =>
+    const matched = newItems.filter(item => matchesActiveStorage(item))
-      matchesActiveFolder(item.key) && matchesActiveStorage(item)
-    )
     if (!matched.length || page.value !== 1) return
     items.value = [...matched, ...items.value]
     total.value += matched.length
-    if (folderTotal.value !== null) {
+    if (totalCount.value !== null) {
-      folderTotal.value += matched.length
+      totalCount.value += matched.length
     }
   }
 
@@ -210,8 +239,8 @@ export function useImageList() {
     if (removed > 0) {
       total.value = Math.max(0, total.value - removed)
     }
-    if (folderTotal.value !== null && removed > 0) {
+    if (totalCount.value !== null && removed > 0) {
-      folderTotal.value = Math.max(0, folderTotal.value - removed)
+      totalCount.value = Math.max(0, totalCount.value - removed)
     }
   }
 
@@ -223,44 +252,42 @@ export function useImageList() {
   })
 
   const listSummary = computed(() => {
-    const folder = activeFolder.value.trim() || 'all'
-    const folderLabel = folder === 'all' ? t('stats.allFolders') : folder
     const storageLabel = activeStorageLabel.value
-    if (loadingTotal.value && folderTotal.value === null) {
+    if (loadingTotal.value && totalCount.value === null) {
       return storageLabel
-        ? `${folderLabel} · ${storageLabel} · ${t('stats.counting')}`
+        ? `${storageLabel} · ${t('stats.counting')}`
-        : `${folderLabel} · ${t('stats.counting')}`
+        : t('stats.counting')
     }
     if (activeSearch.value) {
       if (storageLabel) {
         return t('stats.summarySearchStorage', {
-          folder: folderLabel,
-          storage: storageLabel,
           q: activeSearch.value,
-          total: total.value
+          total: total.value,
+          storage: storageLabel
         })
       }
-      return t('stats.summarySearch', { folder: folderLabel, q: activeSearch.value, total: total.value })
+      return t('stats.summarySearch', { q: activeSearch.value, total: total.value })
     }
-    const count = folderTotal.value === null ? total.value : folderTotal.value
+    const count = totalCount.value === null ? total.value : totalCount.value
     if (storageLabel) {
       return t('stats.summaryTotalStorage', {
-        folder: folderLabel,
+        total: count,
-        storage: storageLabel,
+        storage: storageLabel
-        total: count
       })
     }
-    return t('stats.summaryTotal', { folder: folderLabel, total: count })
+    return t('stats.summaryTotal', { total: count })
   })
 
   return {
     items,
     page,
+    pageSize,
     totalPages,
     total,
     loading,
-    activeFolder,
     activeStorageBackend,
+    activeContentType,
+    activeUploadSource,
     storageBackendOptions,
     searchQuery,
     activeSearch,
@@ -270,11 +297,14 @@ export function useImageList() {
     fetchTotal,
     refreshList,
     initializeList,
-    setActiveFolder,
     setActiveStorageBackend,
+    setActiveContentType,
+    setActiveUploadSource,
+    resetFilters,
     loadStorageBackendOptions,
     submitSearch,
     goToPage,
+    setPageSize,
     prependItems,
     removeItems
   }

app/composables/useImageUpload.ts

@@ -17,8 +17,7 @@ export function useImageUpload() {
 
   async function uploadFiles(
     files: File[],
-    folder = 'images',
+    options?: { notify?: boolean }
-    options?: { notify?: boolean, includeFolder?: boolean }
   ) {
     if (uploading.value) return
 
@@ -55,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)
       }

app/composables/useUploadPreferences.ts

@@ -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,

app/pages/api.vue

@@ -12,15 +12,6 @@ interface SettingsResponse {
   }
 }
 
-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()
@@ -31,6 +22,7 @@ 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
@@ -43,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 activeEndpoint = computed(() =>
-  const uploadDescription = isAdmin.value
+  apiDocs.value.find(endpoint => endpoint.id === activeEndpointId.value) ?? apiDocs.value[0]
-    ? t('api.docs.upload.descAdmin')
+)
-    : t('api.docs.upload.descUser')
-  const uploadCurl = isAdmin.value
-    ? `curl -X POST "${baseUrl.value}/api/images/upload" \\
-  ${authHeaderFlag.value} \\
-  -F "image=@./demo.png"
-
-${t('api.docs.upload.curlCustomFolder')}
-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
-    ? t('api.docs.list.descAdmin')
-    : t('api.docs.list.descUser')
-  const listCurl = isAdmin.value
-    ? `curl "${baseUrl.value}/api/images?limit=20&page=1" \\
-  ${authHeaderFlag.value}
-
-${t('api.docs.list.curlFolderFilter')}
-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: t('api.docs.upload.title'),
-      description: uploadDescription,
-      curl: uploadCurl
-    },
-    {
-      index: 2,
-      method: 'GET',
-      path: '/api/images',
-      title: t('api.docs.list.title'),
-      description: listDescription,
-      curl: listCurl
-    },
-    {
-      index: 3,
-      method: 'GET',
-      path: '/api/images/search',
-      title: t('api.docs.search.title'),
-      description: t('api.docs.search.desc'),
-      curl: `curl "${baseUrl.value}/api/images/search?q=demo&limit=20&page=1" \\
-  ${authHeaderFlag.value}`
-    },
-    {
-      index: 4,
-      method: 'DELETE',
-      path: '/api/images',
-      title: t('api.docs.delete.title'),
-      description: t('api.docs.delete.desc'),
-      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: t('api.docs.batchDelete.title'),
-      description: t('api.docs.batchDelete.desc'),
-      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: t('api.docs.twikoo.title'),
-  description: t('api.docs.twikoo.desc'),
-  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 t('api.tokenSourceEnv')
-    case 'db':
-      return t('api.tokenSourceDb')
-    default:
-      return t('api.tokenSourceNone')
-  }
-}
-
-function methodBadgeColor(method: ApiDocItem['method']) {
-  switch (method) {
-    case 'GET':
-      return 'info' as const
-    case 'DELETE':
-      return 'error' as const
-    default:
-      return 'primary' as const
-  }
-}
 
 async function loadSettings() {
   loading.value = true
@@ -219,15 +110,6 @@ async function confirmRegenerate() {
   }
 }
 
-async function copyCurl(text: string) {
-  try {
-    await navigator.clipboard.writeText(text)
-    toast.add({ title: t('copy.curl'), color: 'success' })
-  } catch {
-    toast.add({ title: t('copy.failed'), color: 'error' })
-  }
-}
-
 function closeConfirmRegenerate() {
   confirmRegenerateOpen.value = false
 }
@@ -279,194 +161,36 @@ watch(isAuthenticated, async (authed, prev) => {
 
     <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">
+        <div class="flex flex-col lg:flex-row lg:items-stretch">
-          <UIcon
+          <ApiSidebar
-            name="i-lucide-key-round"
+            :endpoints="apiDocs"
-            class="size-5 text-primary"
+            :active-id="activeEndpointId"
-          />
+            @select="activeEndpointId = $event"
-          <h2 class="text-base font-semibold">
-            {{ t('api.tokenTitle') }}
-          </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="t('api.envOverrideTitle')"
-            :description="t('api.envOverrideDesc')"
           />
 
-          <UAlert
+          <div class="flex min-w-0 flex-1 flex-col bg-default lg:border-r lg:border-default">
-            v-else-if="!isAdmin"
+            <ApiTokenCard
-            color="info"
+              :token="tokenDisplay"
-            variant="subtle"
-            icon="i-lucide-info"
-            :title="t('api.personalTitle')"
-            :description="t('api.personalDesc')"
-          />
-
-          <UAlert
-            v-else-if="settings && !hasToken"
-            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="hasToken ? tokenDisplay : t('common.notConfigured')"
-              readonly
-              class="min-w-0 flex-1 font-mono text-xs sm:text-sm"
               :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="t('common.copy')"
-                :value="tokenDisplay"
-              />
-              <UButton
-                icon="i-lucide-refresh-cw"
-                :label="t('api.regenerate')"
-                color="warning"
-                variant="soft"
-                :loading="regenerating"
-                :disabled="!canRegenerate"
-                @click="requestRegenerate"
-              />
-            </div>
           </div>
 
-          <p
+          <ApiDebugger
-            v-if="settings"
+            v-if="activeEndpoint"
-            class="text-xs text-muted"
+            :endpoint="activeEndpoint"
-          >
+            :token="tokenDisplay"
-            {{ tokenSourceLabel(settings.tokenSource) }}
-            · {{ t('api.tokenHeader') }}
-            <code class="font-mono">Auth-Token: &lt;token&gt;</code>
-            <template v-if="hasToken && !settings.envTokenOverride">
-              · {{ t('api.tokenInvalidate') }}
-            </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"
           />
-          <h2 class="text-base font-semibold">
-            {{ t('api.docsTitle') }}
-          </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">
-                {{ t('api.curlExample') }}
-              </p>
-              <div class="relative overflow-hidden rounded-xl bg-neutral-950">
-                <UButton
-                  icon="i-lucide-copy"
-                  :label="t('common.copy')"
-                  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">
-              {{ t('api.curlExample') }}
-            </p>
-            <div class="relative overflow-hidden rounded-xl bg-neutral-950">
-              <UButton
-                icon="i-lucide-copy"
-                :label="t('common.copy')"
-                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>

app/pages/gallery.vue

@@ -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>

app/pages/index.vue

@@ -4,20 +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 }
+const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus } = useAuth()
-  = useAuth()
 const toast = useToast()
 const { t } = useI18n()
-const folderOptions = ref<string[]>(['images'])
 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(
   () =>
@@ -30,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)
   }
@@ -112,20 +98,9 @@ async function handleUpload(files: File[]) {
   }
 
   try {
-    const uploadTarget = isAdmin.value
+    const result = await uploadFiles(files)
-      ? (defaultFolder.value.trim() || 'images')
-      : 'images'
-    const result = await uploadFiles(files, uploadTarget, {
-      includeFolder: isAdmin.value
-    })
     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
@@ -150,6 +125,10 @@ async function handleDelete(key: string) {
       query: { key }
     })
     sessionItems.value = sessionItems.value.filter(item => item.key !== key)
+    if (previewImage.value?.key === key) {
+      previewOpen.value = false
+      previewImage.value = null
+    }
     toast.add({ title: t('stats.deletedSingle'), color: 'success' })
   } catch (error: unknown) {
     handleAuthError(error)
@@ -159,6 +138,16 @@ async function handleDelete(key: string) {
     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>
@@ -205,14 +194,21 @@ async function handleDelete(key: string) {
         <ImageGrid
           :items="sessionItems"
           :selected-keys="emptySelection"
-          :deleting-keys="deletingKeys"
           :selectable="false"
           :show-key="false"
           :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>

app/pages/logs.vue

@@ -1,621 +1,7 @@
 <script setup lang="ts">
-import type { ActivityLogListResponse, ActivityLogStorage, LogAction, LogSource } from '~/types/logs'
+await navigateTo({ path: '/settings', query: { tab: 'logs' } }, { replace: true })
-
-const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, 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 },
-  { label: t('logs.sourceTwikoo'), value: 'twikoo' 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 folderFromKey(key: string) {
-  const slash = key.indexOf('/')
-  return slash > 0 ? key.slice(0, slash) : '(root)'
-}
-
-function actionColor(action: LogAction) {
-  return action === 'upload' ? 'success' : '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')
-    case 'twikoo':
-      return t('logs.sourceTwikoo')
-  }
-}
-
-function storageIcon(storage: ActivityLogStorage | null) {
-  return storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
-}
-
-function publicPathFromKey(key: string) {
-  if (!hideFolderInUrl.value) return key
-  const slash = key.lastIndexOf('/')
-  return slash >= 0 ? key.slice(slash + 1) : 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<{ imageBaseUrl: string, hideFolderInUrl: boolean }>('/api/settings', {
-        credentials: 'include'
-      })
-      imageLinkBase.value = data.imageBaseUrl
-      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 () => {
-  const status = await fetchStatus()
-  if (!status.initialized && !status.legacyMode) {
-    await navigateTo('/setup')
-    return
-  }
-  await checkSession()
-  if (!isAuthenticated.value) {
-    await navigateTo('/')
-    return
-  }
-  await loadImageLinkBase()
-  await loadLogs()
-})
-
-watch(isAuthenticated, async (authed, prev) => {
-  if (authed && prev === false) {
-    await loadImageLinkBase()
-    await loadLogs()
-  }
-})
 </script>
 
 <template>
-  <div class="min-h-screen">
+  <div />
-    <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="min-w-0 overflow-x-hidden rounded-2xl border border-default bg-elevated shadow-sm">
-        <div class="flex flex-wrap items-start justify-between gap-3 border-b border-default px-4 py-4 sm:px-6">
-          <div class="flex items-start gap-2">
-            <UIcon
-              name="i-lucide-scroll-text"
-              class="mt-0.5 size-5 shrink-0 text-primary"
-            />
-            <div>
-              <h1 class="text-base font-semibold">
-                {{ t('logs.pageTitle') }}
-              </h1>
-              <p class="mt-0.5 text-xs text-muted">
-                {{ isAdmin ? t('logs.pageSubtitleAdmin') : t('logs.pageSubtitle') }}
-              </p>
-            </div>
-          </div>
-          <UButton
-            icon="i-lucide-refresh-cw"
-            variant="ghost"
-            color="neutral"
-            size="sm"
-            :aria-label="t('common.refresh')"
-            :loading="loading"
-            @click="loadLogs"
-          />
-        </div>
-
-        <form
-          class="border-b border-default px-4 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">
-                  <UBadge
-                    :color="actionColor(row.action)"
-                    variant="subtle"
-                    size="xs"
-                  >
-                    <UIcon
-                      :name="actionIcon(row.action)"
-                      class="mr-1 size-3"
-                    />
-                    {{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
-                  </UBadge>
-                  <UBadge
-                    color="neutral"
-                    variant="subtle"
-                    size="xs"
-                  >
-                    {{ sourceLabel(row.source) }}
-                  </UBadge>
-                  <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 overflow-x-auto sm:block">
-            <table class="min-w-full text-left text-sm">
-              <thead class="border-b border-default bg-muted/30 text-xs text-muted">
-                <tr>
-                  <th class="px-4 py-3 font-medium sm:px-6">
-                    {{ t('logs.colTime') }}
-                  </th>
-                  <th
-                    v-if="isAdmin"
-                    class="px-4 py-3 font-medium"
-                  >
-                    {{ t('logs.colUser') }}
-                  </th>
-                  <th class="px-4 py-3 font-medium">
-                    {{ t('logs.colAction') }}
-                  </th>
-                  <th class="px-4 py-3 font-medium">
-                    {{ t('logs.colSource') }}
-                  </th>
-                  <th class="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="hidden px-4 py-3 font-medium lg:table-cell">
-                    {{ t('logs.colFolder') }}
-                  </th>
-                  <th class="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="whitespace-nowrap px-4 py-3 text-xs text-muted sm:px-6">
-                    {{ formatTime(row.createdAt) }}
-                  </td>
-                  <td
-                    v-if="isAdmin"
-                    class="px-4 py-3 text-xs"
-                  >
-                    {{ row.username ?? '—' }}
-                  </td>
-                  <td class="px-4 py-3">
-                    <UBadge
-                      :color="actionColor(row.action)"
-                      variant="subtle"
-                      size="xs"
-                    >
-                      <UIcon
-                        :name="actionIcon(row.action)"
-                        class="mr-1 size-3"
-                      />
-                      {{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
-                    </UBadge>
-                  </td>
-                  <td class="px-4 py-3">
-                    <UBadge
-                      color="neutral"
-                      variant="subtle"
-                      size="xs"
-                    >
-                      {{ sourceLabel(row.source) }}
-                    </UBadge>
-                  </td>
-                  <td class="px-4 py-3 text-xs">
-                    <span
-                      v-if="row.storage"
-                      class="inline-flex max-w-[8rem] items-center gap-1 truncate"
-                      :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-[12rem] truncate px-4 py-3 md:table-cell"
-                    :title="row.originalName"
-                  >
-                    {{ row.originalName }}
-                  </td>
-                  <td class="hidden px-4 py-3 font-mono text-xs text-muted lg:table-cell">
-                    {{ folderFromKey(row.key) }}
-                  </td>
-                  <td class="whitespace-nowrap px-4 py-3 tabular-nums text-muted">
-                    {{ formatFileSize(row.size) }}
-                  </td>
-                  <td class="hidden px-4 py-3 xl:table-cell">
-                    <div class="flex max-w-[16rem] items-center gap-1">
-                      <a
-                        v-if="row.action === 'upload'"
-                        :href="imageUrl(row.key)"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="truncate font-mono text-xs text-primary hover:underline"
-                        :title="row.key"
-                      >
-                        {{ row.key }}
-                      </a>
-                      <span
-                        v-else
-                        class="truncate font-mono text-xs text-dimmed"
-                        :title="row.key"
-                      >
-                        {{ row.key }}
-                      </span>
-                      <CopyButton
-                        icon="i-lucide-copy"
-                        icon-only
-                        :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>
-      </section>
-    </AppShell>
-  </div>
 </template>

app/pages/register.vue

@@ -2,9 +2,10 @@
 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()
 
@@ -12,14 +13,34 @@ 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 && !status.legacyMode) {
@@ -32,7 +53,7 @@ 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: t('auth.passwordMismatch'), color: 'error' })
@@ -41,11 +62,16 @@ async function submit() {
 
   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: t('auth.registerSuccess'), color: 'success' })
       await router.replace('/')
     } else {
+      await resetVerification()
       toast.add({ title: result.error, color: 'error' })
     }
   } finally {
@@ -142,6 +168,15 @@ async function submit() {
           />
         </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="t('auth.register')"

app/pages/setup.vue

@@ -2,12 +2,19 @@
 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 } = useI18n()
+const { t, locale } = useI18n()
+
+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')
@@ -20,6 +27,102 @@ const domainSeparation = ref(false)
 const siteBaseUrl = ref('')
 const imageBaseUrl = ref('')
 const loading = ref(false)
+const domainSeparationConfirmOpen = ref(false)
+
+const setupMode = ref<'init' | 'restore'>('init')
+const restoreFile = ref<File | null>(null)
+const restoreFileInput = ref<HTMLInputElement | null>(null)
+const restoreLoading = ref(false)
+const restoreJobId = ref<string | null>(null)
+const restoreProgress = ref({ progress: 0, total: 0, message: '' })
+let restorePollTimer: ReturnType<typeof setInterval> | null = null
+
+function stopRestorePolling() {
+  if (restorePollTimer) {
+    clearInterval(restorePollTimer)
+    restorePollTimer = null
+  }
+}
+
+function pickRestoreFile() {
+  restoreFileInput.value?.click()
+}
+
+function onRestoreFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  restoreFile.value = input.files?.[0] ?? null
+  if (input) input.value = ''
+}
+
+async function pollRestoreJob(jobId: string) {
+  try {
+    const data = await $fetch<{ job: { status: string, progress: number, total: number, message: string, error: string | null } }>(
+      `/api/setup/restore/${jobId}`
+    )
+    restoreProgress.value = {
+      progress: data.job.progress,
+      total: data.job.total,
+      message: data.job.message
+    }
+    if (data.job.status === 'done') {
+      stopRestorePolling()
+      restoreLoading.value = false
+      toast.add({
+        title: t('setup.restoreSuccess'),
+        description: t('setup.restoreSecretsHint'),
+        color: 'success'
+      })
+      await router.replace('/')
+      return
+    }
+    if (data.job.status === 'failed') {
+      stopRestorePolling()
+      restoreLoading.value = false
+      toast.add({
+        title: t('setup.restoreFailed'),
+        description: data.job.error ?? data.job.message,
+        color: 'error'
+      })
+    }
+  } catch {
+    stopRestorePolling()
+    restoreLoading.value = false
+    toast.add({ title: t('setup.restoreFailed'), color: 'error' })
+  }
+}
+
+async function submitRestore() {
+  if (!restoreFile.value || restoreLoading.value) return
+  restoreLoading.value = true
+  try {
+    const form = new FormData()
+    form.append('file', restoreFile.value)
+    const data = await $fetch<{ job: { id: string } }>('/api/setup/restore', {
+      method: 'POST',
+      body: form
+    })
+    restoreJobId.value = data.job.id
+    restorePollTimer = setInterval(() => {
+      void pollRestoreJob(data.job.id)
+    }, 1500)
+    await pollRestoreJob(data.job.id)
+  } catch {
+    restoreLoading.value = false
+    toast.add({ title: t('setup.restoreFailed'), color: 'error' })
+  }
+}
+
+onUnmounted(() => {
+  stopRestorePolling()
+})
+
+const domainSeparationWouldActivate = computed(() =>
+  willActivateDomainSeparation(
+    domainSeparation.value,
+    siteBaseUrl.value,
+    imageBaseUrl.value
+  )
+)
 
 const canSubmit = computed(() => {
   if (!username.value || !password.value || !confirmPassword.value) return false
@@ -27,7 +130,7 @@ const canSubmit = computed(() => {
   if (!isPasswordValid(password.value)) return false
   if (!AUTH_USERNAME_PATTERN.test(username.value.trim())) return false
   if (domainSeparation.value) {
-    return Boolean(siteBaseUrl.value.trim() && imageBaseUrl.value.trim())
+    if (!siteBaseUrl.value.trim() || !imageBaseUrl.value.trim()) return false
   }
   return true
 })
@@ -43,11 +146,12 @@ onMounted(async () => {
     await router.replace('/')
     return
   }
-  if (import.meta.client) {
-    siteBaseUrl.value = window.location.origin
-  }
 })
 
+const detectedOriginPlaceholder = computed(() =>
+  import.meta.client ? window.location.origin : ''
+)
+
 async function submit() {
   if (!canSubmit.value || loading.value) return
 
@@ -56,6 +160,18 @@ async function submit() {
     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 = {
@@ -120,7 +236,28 @@ async function submit() {
         </div>
       </div>
 
+      <div class="mb-6 flex rounded-lg border border-default p-1">
+        <button
+          type="button"
+          class="flex-1 rounded-md px-3 py-2 text-sm font-medium transition-colors"
+          :class="setupMode === 'init' ? 'bg-primary text-inverted' : 'text-muted hover:text-default'"
+          @click="setupMode = 'init'"
+        >
+          {{ t('setup.modeInit') }}
+        </button>
+        <button
+          v-if="!isMigrate"
+          type="button"
+          class="flex-1 rounded-md px-3 py-2 text-sm font-medium transition-colors"
+          :class="setupMode === 'restore' ? 'bg-primary text-inverted' : 'text-muted hover:text-default'"
+          @click="setupMode = 'restore'"
+        >
+          {{ t('setup.modeRestore') }}
+        </button>
+      </div>
+
       <form
+        v-if="setupMode === 'init'"
         class="flex w-full flex-col gap-5"
         @submit.prevent="submit"
       >
@@ -196,7 +333,7 @@ async function submit() {
             <p class="text-xs leading-relaxed text-warning">
               {{ t('setup.domainSeparationProxyHint') }}
               <a
-                href="https://github.com/O96u/PicHost/blob/main/docs/domain-separation.md"
+                :href="domainSeparationDocUrl"
                 target="_blank"
                 rel="noopener noreferrer"
                 class="text-primary hover:underline"
@@ -211,7 +348,7 @@ async function submit() {
               </p>
               <UInput
                 v-model="siteBaseUrl"
-                :placeholder="t('setup.siteBaseUrlPlaceholder')"
+                :placeholder="detectedOriginPlaceholder || t('setup.siteBaseUrlPlaceholder')"
                 class="w-full font-mono text-sm"
               />
             </div>
@@ -240,6 +377,97 @@ async function submit() {
           :disabled="!canSubmit"
         />
       </form>
+
+      <div
+        v-else
+        class="flex w-full flex-col gap-5"
+      >
+        <div class="space-y-1.5">
+          <label class="text-xs text-muted">{{ t('storage.backup.restoreUploadLabel') }}</label>
+          <button
+            type="button"
+            class="flex w-full flex-col items-center gap-1.5 rounded-lg border-2 border-dashed px-3 py-4 text-center transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+            :class="restoreFile
+              ? 'border-primary/50 bg-primary/5'
+              : 'border-warning/40 bg-warning/5 hover:border-warning/60 hover:bg-warning/10'"
+            :disabled="restoreLoading"
+            @click="pickRestoreFile"
+          >
+            <div
+              class="flex size-8 items-center justify-center rounded-full"
+              :class="restoreFile ? 'bg-primary/15 text-primary' : 'bg-warning/15 text-warning'"
+            >
+              <UIcon
+                :name="restoreFile ? 'i-lucide-check' : 'i-lucide-upload'"
+                class="size-4.5"
+              />
+            </div>
+            <span class="max-w-full truncate text-sm font-medium text-default">
+              {{ restoreFile?.name ?? t('storage.backup.restoreUpload') }}
+            </span>
+            <span
+              v-if="!restoreFile"
+              class="text-xs text-muted"
+            >
+              {{ t('storage.backup.restoreUploadHint') }}
+            </span>
+          </button>
+        </div>
+
+        <div class="rounded-lg bg-muted/15 px-3 py-2.5 text-xs leading-relaxed text-muted">
+          {{ t('setup.restoreHint') }}
+        </div>
+
+        <StorageBackupJobProgress
+          v-if="restoreLoading"
+          :message="restoreProgress.message || t('setup.restoreSubmit')"
+          :progress="restoreProgress.progress"
+          :total="restoreProgress.total"
+        />
+
+        <UButton
+          :label="t('setup.restoreSubmit')"
+          icon="i-lucide-upload"
+          size="lg"
+          block
+          class="w-full"
+          :loading="restoreLoading"
+          :disabled="!restoreFile"
+          @click="submitRestore"
+        />
+
+        <input
+          ref="restoreFileInput"
+          type="file"
+          accept=".phost.tar.gz,.tar.gz"
+          class="hidden"
+          @change="onRestoreFileChange"
+        >
+      </div>
     </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>

app/pages/stats.vue

@@ -1,617 +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,
-  fetchList,
-  fetchSearch,
-  fetchTotal,
-  setActiveFolder,
-  submitSearch,
-  goToPage,
-  removeItems,
-  activeStorageBackend,
-  storageBackendOptions,
-  setActiveStorageBackend,
-  loadStorageBackendOptions
-} = useImageList()
-
-const { formatFileSize } = useFileSize()
-const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = 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 currentFolder = ref('all')
-const currentStorage = ref('all')
-const folderOptions = ref<string[]>(['images'])
-
-const folderSelectItems = computed(() => [
-  { label: t('stats.allFolders'), value: 'all' },
-  ...folderOptions.value.map(folder => ({ label: folder, value: folder }))
-])
-
-const storageSelectItems = computed(() => [
-  { label: t('stats.filterStorageAll'), value: 'all' },
-  ...storageBackendOptions.value.map(backend => ({
-    label: backend.name,
-    value: backend.id
-  }))
-])
-
-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: t('stats.uploadToday'), value: s?.uploadToday ?? '—' },
-    { label: t('stats.uploadMonth'), value: s?.uploadMonth ?? '—' },
-    { label: t('stats.uploadTotal'), value: s?.uploadTotal ?? '—' },
-    { label: t('stats.storedCount'), value: s?.storedCount ?? '—' },
-    { label: t('stats.deleteToday'), value: s?.deleteToday ?? '—' },
-    { label: t('stats.deleteMonth'), value: s?.deleteMonth ?? '—' },
-    isAdmin.value
-      ? { label: t('stats.userCount'), value: s?.userCount ?? '—' }
-      : { label: t('stats.deleteTotal'), value: s?.deleteTotal ?? '—' },
-    { label: t('stats.uploadBytes'), 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: t('stats.loadFailed'), color: 'error' })
-    }
-  } finally {
-    statsLoading.value = false
-  }
-}
-
-async function refreshGallery() {
-  if (!isAuthenticated.value) return
-  selectedKeys.value = new Set()
-  try {
-    await Promise.all([refreshList(), loadFolders(), loadStorageBackendOptions()])
-    currentStorage.value = activeStorageBackend.value
-  } catch (error: unknown) {
-    handleAuthError(error)
-  }
-}
-
-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(),
-      loadFolders(),
-      loadStorageBackendOptions()
-    ])
-    currentStorage.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 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 handleStorageChange(backendId: string) {
-  if (!isAuthenticated.value) return
-  currentStorage.value = backendId
-  selectedKeys.value = new Set()
-  try {
-    await setActiveStorageBackend(backendId)
-  } 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: t('stats.selectFirst'), 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: t('stats.deleted', { n: deleted.length }),
-        color: 'success'
-      })
-      await refreshStats()
-    }
-
-    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()
-  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()
-  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>
-
-      <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">
-            {{ t('stats.folderDistribution') }}
-          </h2>
-          <div
-            v-if="!uploadChartTotal"
-            class="py-6 text-center text-xs text-muted"
-          >
-            {{ t('stats.noData') }}
-          </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">
-            {{ t('stats.folderUsage') }}
-          </h2>
-          <div
-            v-if="!folderStats.length"
-            class="py-6 text-center text-xs text-muted"
-          >
-            {{ t('stats.noData') }}
-          </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">
-                  {{ t('stats.folderCount', { count: item.count, size: 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">
-        <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-3">
-          <div class="min-w-0">
-            <h2 class="text-lg font-medium">
-              {{ t('stats.gallery') }}
-            </h2>
-            <p
-              v-if="!galleryLoading"
-              class="mt-0.5 text-sm text-muted"
-            >
-              {{ listSummary }}
-            </p>
-          </div>
-
-          <form
-            class="flex flex-wrap items-center justify-end gap-2"
-            @submit.prevent="handleSearch"
-          >
-            <UBadge
-              v-if="selectedCount"
-              color="primary"
-              variant="subtle"
-              class="shrink-0"
-            >
-              {{ t('stats.selected', { n: selectedCount }) }}
-            </UBadge>
-            <USelect
-              v-model="currentFolder"
-              :items="folderSelectItems"
-              class="w-[5.5rem] shrink-0 sm:w-32"
-              size="sm"
-              :aria-label="t('stats.folder')"
-              @update:model-value="handleFolderChange"
-            />
-            <USelect
-              v-model="currentStorage"
-              :items="storageSelectItems"
-              class="w-[6.5rem] shrink-0 sm:w-36"
-              size="sm"
-              :aria-label="t('stats.storage')"
-              @update:model-value="handleStorageChange"
-            />
-            <UInput
-              v-model="searchQuery"
-              icon="i-lucide-search"
-              :placeholder="t('stats.searchPlaceholder')"
-              class="w-36 shrink-0 sm:w-44"
-              size="sm"
-              :disabled="galleryLoading"
-            />
-            <UButton
-              type="submit"
-              icon="i-lucide-search"
-              size="sm"
-              class="shrink-0"
-              :aria-label="t('common.search')"
-              :loading="galleryLoading"
-            >
-              <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>
-            <UButton
-              type="button"
-              icon="i-lucide-trash-2"
-              color="error"
-              variant="soft"
-              size="sm"
-              class="shrink-0"
-              :aria-label="t('stats.batchDelete')"
-              :disabled="!selectedCount"
-              @click="requestBatchDelete"
-            >
-              <span class="hidden sm:inline">{{ t('stats.batchDelete') }}</span>
-            </UButton>
-          </form>
-        </div>
-
-        <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
-          :show-key="false"
-          show-storage
-          :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="t('common.imagesUnit')"
-          :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="t('stats.scrollTop')"
-        color="primary"
-        class="fixed bottom-6 right-6 z-50 shadow-lg"
-        size="lg"
-        @click="scrollToTop"
-      />
-    </AppShell>
-  </div>
-</template>

app/pages/storage.vue

@@ -21,6 +21,58 @@ const deleteTarget = ref<StorageBackendItem | null>(null)
 const deleteConfirmName = ref('')
 const deleting = ref(false)
 
+const backupPanelRef = ref<{ applySyncDraft: (draft: { fromBackendId: string, toBackendId: string }) => void } | null>(null)
+
+function onMigrateIn(backend: StorageBackendItem) {
+  const defaultBackend = storageData.value?.backends.find(item => item.isDefault)
+  if (!defaultBackend || defaultBackend.id === backend.id) return
+  backupPanelRef.value?.applySyncDraft({
+    fromBackendId: defaultBackend.id,
+    toBackendId: backend.id
+  })
+}
+
+function onMigrateOut(backend: StorageBackendItem) {
+  const backends = storageData.value?.backends ?? []
+  if (backend.isDefault) {
+    const target = backends.find(item => !item.isDefault && item.enabled)
+    if (!target) return
+    backupPanelRef.value?.applySyncDraft({
+      fromBackendId: backend.id,
+      toBackendId: target.id
+    })
+    return
+  }
+
+  const defaultBackend = backends.find(item => item.isDefault)
+  if (!defaultBackend) return
+  backupPanelRef.value?.applySyncDraft({
+    fromBackendId: backend.id,
+    toBackendId: defaultBackend.id
+  })
+}
+
+function showMigrateIn(backend: StorageBackendItem): boolean {
+  const backends = storageData.value?.backends ?? []
+  return !backend.isDefault
+    && backend.enabled
+    && backends.some(item => item.isDefault)
+}
+
+function showMigrateOut(backend: StorageBackendItem): boolean {
+  const backends = storageData.value?.backends ?? []
+  if (backend.usage.count === 0) return false
+  if (backend.isDefault) {
+    return backends.some(item => !item.isDefault && item.enabled)
+  }
+  return backends.some(item => item.isDefault)
+}
+
+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 {
@@ -43,6 +95,7 @@ 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,
@@ -232,77 +285,92 @@ watch(isAuthenticated, async (authed) => {
     <AdminLoginGate v-else-if="!isAuthenticated" />
 
     <AppShell v-else-if="isAdmin">
-      <section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
+      <div class="flex items-start justify-between gap-3">
-        <div class="flex flex-wrap items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6">
+        <div class="min-w-0">
-          <div class="flex items-start gap-2">
+          <h1 class="text-2xl font-semibold tracking-tight">
-            <UIcon
+            {{ t('storage.pageTitle') }}
-              name="i-lucide-hard-drive"
+          </h1>
-              class="mt-0.5 size-5 shrink-0 text-primary"
+          <p class="text-sm text-muted">
-            />
+            {{ t('storage.pageSubtitle') }}
-            <div>
+          </p>
-              <h1 class="text-base font-semibold">
+        </div>
-                {{ t('storage.pageTitle') }}
+
-              </h1>
+        <UButton
-              <p class="mt-0.5 text-xs text-muted">
+          :label="t('storage.addBackend')"
-                {{ t('storage.pageSubtitle') }}
+          icon="i-lucide-plus"
-              </p>
+          size="sm"
-            </div>
+          :disabled="storageData?.envOverride"
-          </div>
+          @click="openCreate"
-          <UButton
+        />
-            :label="t('storage.addBackend')"
+      </div>
-            icon="i-lucide-plus"
+
-            size="sm"
+      <section class="mt-5 space-y-5">
-            :disabled="storageData?.envOverride"
+        <UAlert
-            @click="openCreate"
+          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>
 
-        <div class="p-5 sm:p-6">
+        <template v-else-if="storageData">
-          <UAlert
+          <StorageOverview
-            v-if="storageData?.envOverride"
+            :backends="storageData.backends"
-            color="warning"
+            :loading="loading"
-            variant="subtle"
-            class="mb-5"
-            :title="t('storage.envOverride')"
-            icon="i-lucide-triangle-alert"
           />
 
-          <p class="mb-5 text-xs text-muted">
+          <UAlert
-            {{ t('storage.switchHint') }}
+            v-if="!storageData.envOverride"
-          </p>
+            color="success"
+            variant="subtle"
+            icon="i-lucide-info"
+            :description="t('storage.defaultStorageTip', { name: defaultBackendName })"
+          />
 
-          <div
+          <div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
-            v-if="loading"
-            class="flex justify-center py-16"
-          >
-            <UIcon
-              name="i-lucide-loader-circle"
-              class="size-6 animate-spin text-muted"
-            />
-          </div>
-
-          <div
-            v-else-if="storageData"
-            class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
-          >
             <StorageBackendCard
               v-for="backend in storageData.backends"
               :key="backend.id"
               :backend="backend"
               :env-override="storageData.envOverride"
               :busy="busyId === backend.id"
+              :show-migrate-in="showMigrateIn(backend)"
+              :show-migrate-out="showMigrateOut(backend)"
               @set-default="setDefault(backend)"
               @edit="openEdit(backend)"
               @test="testBackend(backend)"
               @toggle-enabled="toggleEnabled(backend)"
               @delete="confirmDelete(backend)"
+              @migrate-in="onMigrateIn(backend)"
+              @migrate-out="onMigrateOut(backend)"
             />
           </div>
-        </div>
+
+          <StorageBackupPanel
+            v-if="!storageData.envOverride"
+            ref="backupPanelRef"
+            :backends="storageData.backends"
+          />
+
+          <StorageSupportedBackends />
+        </template>
       </section>
     </AppShell>
 
-    <UModal v-model:open="formOpen">
+    <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">

app/types/auth.ts

@@ -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
+}

app/types/backup.ts

@@ -0,0 +1,53 @@
+export type BackupJobType = 'full_export' | 'full_restore' | 'backend_sync'
+export type BackupJobStatus = 'pending' | 'running' | 'done' | 'failed'
+
+export interface BackupJobItem {
+  id: string
+  type: BackupJobType
+  status: BackupJobStatus
+  progress: number
+  total: number
+  message: string
+  payload: Record<string, unknown>
+  outputPath: string | null
+  archiveName: string | null
+  downloadable: boolean
+  error: string | null
+  createdAt: string
+  finishedAt: string | null
+}
+
+export interface BackupEstimate {
+  imageCount: number
+  imageBytes: number
+  databaseBytes: number
+  totalBytes: number
+}
+
+export interface BackupPackageItem {
+  name: string
+  bytes: number
+  modifiedAt: string
+}
+
+export interface BackupRestorePreview {
+  imageCount: number
+  imageBytes: number
+  newImages: number
+  conflictingImages: number
+  formatVersion: number
+  appVersion: string
+  createdAt: string
+}
+
+export interface BackendSyncPreview {
+  imageCount: number
+  imageBytes: number
+  fromBackendId: string
+  toBackendId: string
+}
+
+export interface SyncDraft {
+  fromBackendId: string
+  toBackendId: string
+}

app/types/image.ts

@@ -42,6 +42,8 @@ export interface ImageItem {
     name: string
     type: 'local' | 's3'
   }
+  /** 上传来源：网页或 API（来自活动日志） */
+  uploadSource?: 'web' | 'api'
 }
 
 export interface UploadErrorItem {

app/types/logs.ts

@@ -1,15 +1,10 @@
 export type LogAction = 'upload' | 'delete'
-export type LogSource = 'web' | 'api' | 'twikoo'
+export type LogSource = 'web' | 'api'
-
-export interface ActivityLogUser {
-  id: number
-  username: string
-}
 
 export interface ActivityLogStorage {
   id: string
   name: string
-  type: 'local' | 's3'
+  type: string
 }
 
 export interface ActivityLogItem {
@@ -26,18 +21,16 @@ export interface ActivityLogItem {
   createdAt: string
 }
 
-export interface ActivityLogSummary {
-  total: number
-  upload: number
-  delete: number
-}
-
 export interface ActivityLogListResponse {
   items: ActivityLogItem[]
   total: number
   page: number
   pageSize: number
   totalPages: number
-  summary: ActivityLogSummary
+  summary: {
-  users?: ActivityLogUser[]
+    total: number
+    upload: number
+    delete: number
+  }
+  users?: Array<{ id: number, username: string }>
 }

app/types/settings.ts

@@ -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']

app/utils/domain-separation.ts

@@ -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)
+}

app/utils/image-display.ts

@@ -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`
+}

docker-compose.yml

@@ -10,6 +10,7 @@ services:
       - "6892:6892"
     # 首次访问 Web 引导创建管理员，无需预先配置环境变量
     # 可选：environment 中设置 API_UPLOAD_TOKEN、ALLOWED_REFERER_HOSTS 等
+    # 运维：docker exec pichost reset-password | slider | clear-domains | backup-export | backup-restore | storage-sync
     volumes:
       # 冒号左边改成 NAS 上的实际存图目录（飞牛示例：/vol1/1000/pichost-data）
       - ./data:/data

docker-entrypoint.sh

@@ -2,7 +2,27 @@
 set -e
 
 if [ "$1" = "reset-password" ]; then
-  exec node /app/server/cli/reset-password.mjs
+  exec node /app/server/cli/reset-password.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
+
+if [ "$1" = "backup-export" ]; then
+  exec node /app/server/cli/backup-export.mjs "${@:2}"
+fi
+
+if [ "$1" = "backup-restore" ]; then
+  exec node /app/server/cli/backup-restore.mjs "${@:2}"
+fi
+
+if [ "$1" = "storage-sync" ]; then
+  exec node /app/server/cli/storage-sync.mjs "${@:2}"
 fi
 
 exec node /app/.output/server/index.mjs "$@"

docs-site/.vitepress/config.ts

@@ -0,0 +1,140 @@
+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: '常见问题', 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: '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 上编辑此页'
+    }
+  }
+  })
+)

docs-site/.vitepress/theme/custom.css

@@ -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);
+}

docs-site/.vitepress/theme/index.ts

@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme

docs-site/copy-screenshots.mjs

@@ -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}`)

docs-site/en/guide/api.md

@@ -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)

docs-site/en/guide/changelog.md

@@ -0,0 +1,179 @@
+# 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/`; parallel top-level folders beside `images` are no longer used
+
+### Added
+
+- Startup index sync (disk scan, legacy key normalization, orphan cleanup)
+
+---
+
+## [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).

docs-site/en/guide/cloudflare-deployment.md

@@ -0,0 +1,236 @@
+# Cloudflare & preferred-edge deployment
+
+In dual-domain mode, PicHost distinguishes **site** vs **image** traffic from the request **Host** (and `X-Forwarded-Host` from a trusted reverse proxy). Cloudflare orange cloud, preferred-edge IPs, Workers, and Pages are all fine — as long as the hostname identity reaching PicHost stays correct.
+
+> **One-line rule:** The network path may change; the hostname identity must not — `admin → admin`, `img → img`, never `img → admin`.
+
+See [Dual-domain separation](./domain-separation.md) for middleware behavior and [Reverse proxy](./reverse-proxy.md) for general proxy requirements.
+
+---
+
+## Quick checklist
+
+| # | Check | Expected |
+| - | ----- | -------- |
+| 1 | Browser hostname | `admin.*` or `img.*`; do not mix IP / `pages.dev` |
+| 2 | Pages / Worker in the middle | Image host must **not** `fetch(admin…)` |
+| 3 | Reverse-proxy upstream | Both hostnames → `http://127.0.0.1:6892` |
+| 4 | Nginx `proxy_set_header Host` | `$host` (preserve client hostname) |
+| 5 | PicHost settings | `SITE_BASE_URL` / `IMAGE_BASE_URL` match `server_name` |
+| 6 | Port `6892` | Reachable only from localhost or internal proxy |
+
+---
+
+## Recommended layout
+
+Both hostnames go through Cloudflare (proxied) and **independently** reverse-proxy to one PicHost instance:
+
+```mermaid
+flowchart TB
+  internet[Internet]
+  cf[Cloudflare proxied]
+  admin[admin.example.com]
+  img[img.example.com]
+  panel[1Panel / Nginx]
+  app[PicHost :6892]
+
+  internet --> cf
+  cf --> admin
+  cf --> img
+  admin --> panel
+  img --> panel
+  panel --> app
+```
+
+```env
+SITE_BASE_URL=https://admin.example.com
+IMAGE_BASE_URL=https://img.example.com
+```
+
+```text
+admin.example.com → http://127.0.0.1:6892
+img.example.com   → http://127.0.0.1:6892
+```
+
+You do **not** need separate ports for “frontend / backend / images” — one PicHost instance on port `6892` is enough.
+
+### Site hostname ≠ frontend domain
+
+| Hostname | Serves |
+| -------- | ------ |
+| `admin.example.com` | Admin UI, login, settings, gallery, API, upload |
+| `img.example.com` | Image delivery, hotlinks, CDN |
+
+Use **site / image hostname**, not “frontend / backend”. PicHost does **not** require `frontend :3000 + backend :6892` in production.
+
+---
+
+## Orange cloud & preferred edge
+
+**DNS Proxied (orange cloud)** is normal and recommended:
+
+```text
+admin.example.com, img.example.com
+  A/CNAME → origin → Proxied
+```
+
+Opening `admin.example.com` should yield `Host: admin.example.com` at PicHost; `img.example.com` should yield `Host: img.example.com`.
+
+**Preferred-edge** setups (alternate IPs, entry hostnames) are also fine. Preferred routing may change the path to Cloudflare’s edge, but must **not** rewrite the image hostname’s origin identity to the site hostname:
+
+```text
+admin → CF → admin.example.com → origin → PicHost
+img   → CF → img.example.com   → origin → PicHost
+```
+
+---
+
+## 6. Typical bad topologies
+
+These patterns break Host isolation even when the browser still shows the image hostname:
+
+### ❌ Bad 1: Image host fetches site host
+
+```mermaid
+flowchart LR
+  user[User on img.example.com]
+  worker[Pages / Worker]
+  admin[fetch admin.example.com]
+  app[PicHost]
+
+  user --> worker --> admin --> app
+```
+
+The last hop has `Host: admin.example.com`, so PicHost treats it as site traffic — `https://img.example.com/` may show the admin UI. This is **Host rewrite**, not a cache bug.
+
+### ❌ Bad 2: Preferred proxy upstreams to site host
+
+```text
+img.example.com → preferred hostname → admin.example.com → origin
+```
+
+Even for routing only, using the site hostname as upstream breaks image isolation.
+
+### ❌ Bad 3: Public exposure of port 6892
+
+```text
+any host / IP:6892 → PicHost
+```
+
+Users can bypass Cloudflare and Nginx `server_name` rules. Port `6892` should be reachable only from `127.0.0.1` or an internal reverse proxy.
+
+### ✅ Correct pattern
+
+```text
+admin → admin → PicHost
+img   → img   → PicHost
+```
+
+Do **not** use Pages / Workers as a **full-site reverse proxy** for PicHost (extra `pages.dev` / `workers.dev` entry points). PicHost needs `node-server`, SQLite, `sharp`, and local `data/` — it **cannot** run as a Node app on Pages/Workers. Keep Docker/VPS for the app; use orange-cloud DNS and optional R2 on CF.
+
+---
+
+## Workers / Pages guidance
+
+If you only need headers, auth, Referer rules, logging, or cache — and PicHost remains your origin:
+
+| Prefer | Avoid |
+| ------ | ----- |
+| `img.example.com` → **Worker Route** → existing `img` origin | `img` → Worker → `fetch(admin.example.com)` |
+
+Cloudflare recommends [Routes](https://developers.cloudflare.com/workers/configuration/routing/routes/) when an external origin already exists, rather than [Custom Domains](https://developers.cloudflare.com/workers/configuration/routing/custom-domains/) used to chain cross-host `fetch()`.
+
+Code like this on the image hostname is a smoking gun:
+
+```js
+fetch(`https://admin.example.com${url.pathname}`)
+```
+
+---
+
+## Nginx / 1Panel layout
+
+Two `server` blocks, same upstream. Critical line: `proxy_set_header Host $host;`
+
+```nginx
+server {
+    server_name admin.example.com;
+    location / {
+        proxy_pass http://127.0.0.1:6892;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        client_max_body_size 12m;
+    }
+}
+
+server {
+    server_name img.example.com;
+    location / {
+        proxy_pass http://127.0.0.1:6892;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+}
+
+# Reject bare IP and unknown hostnames (strongly recommended)
+server {
+    listen 80 default_server;
+    listen 443 ssl default_server;
+    server_name _;
+    return 444;
+}
+```
+
+With orange cloud, restrict the origin firewall to **[Cloudflare IP ranges](https://www.cloudflare.com/ips/)** only.
+
+---
+
+## Two-layer Host protection
+
+Use reverse proxy and application layers **together**:
+
+| Layer | Role |
+| ----- | ---- |
+| **Nginx default server** | Reject bare IP, `pages.dev`, and other undeclared hostnames |
+| **PicHost middleware (v1.2.x+)** | When dual-domain is on, unconfigured hosts get 404 at the app (`localhost` / `127.0.0.1` exempt in development) |
+
+Even with app-layer blocking, keep a default server at the proxy to reduce junk traffic to PicHost.
+
+---
+
+## X-Forwarded-Host
+
+PicHost may consult `X-Forwarded-Host` behind a reverse proxy, but that header is **forgeable** by clients. Therefore:
+
+- Do not expose port `6892` publicly
+- Only trusted proxies should reach the app
+- Prefer keeping `Host` correct from the first hop
+
+---
+
+## Troubleshooting: admin UI on image hostname?
+
+**Inspect the proxy chain first — do not purge CF cache first.**
+
+Cache issues usually mean stale JS/CSS/images or occasional 404s. If `/`, `/login`, and `/settings` work **reliably** on the image host, the Host was almost certainly rewritten.
+
+```text
+① Browser hostname?
+② Pages / Worker / preferred proxy in the middle?
+③ What URL does the proxy fetch?
+④ Does it fetch admin.example.com?
+⑤ Which Host does 1Panel / PicHost see?
+```
+
+---
+
+## Related
+
+- [Dual-domain separation](./domain-separation.md)
+- [Reverse proxy](./reverse-proxy.md)
+- [Environment variables](./configuration.md)
+- [FAQ](./faq.md)

docs-site/en/guide/configuration.md

@@ -0,0 +1,117 @@
+# Environment variables
+
+Configure PicHost via environment variables (Docker / `.env`) or the in-app **Settings** page. Admins use **Settings** (`/settings`) with sidebar sections **Basic**, **Domains & paths**, **Access control**, and **Activity log**. Most values prefer **SQLite** when saved; some env vars override or lock UI editing.
+
+## Priority overview
+
+| Setting | Priority (high → low) | Env overrides UI |
+| ------- | --------------------- | ---------------- |
+| API upload token | Env → SQLite | **Yes** (cannot regenerate in UI) |
+| WebP quality | SQLite → env → default 80 | No |
+| Referer whitelist | SQLite → env | No |
+| Site / image base URL | SQLite → env (configured in API); links use `effective*` or request origin | No |
+| Short image links | SQLite → env → default false | No |
+| Date-based paths | SQLite → env → default true | No |
+| Global auto-delete days | SQLite → env → default 0 | No |
+| Login verification | SQLite (Settings → Access control) | No |
+
+## Variables
+
+### `API_UPLOAD_TOKEN`
+
+Token for external uploads (Twikoo, userscripts, blogs). Header: `Auth-Token: <token>`; form field `token` still works.
+
+- Generate in **API** page when unset
+- **When set in env, it wins** — UI shows “overridden by environment” and cannot regenerate
+- Alias: `NUXT_API_UPLOAD_TOKEN`
+
+### `ALLOWED_REFERER_HOSTS`
+
+Comma-separated Referer whitelist. Own hostnames are allowed automatically. Optional; configurable in Settings.
+
+### `SITE_BASE_URL` / `IMAGE_BASE_URL`
+
+- **Site URL**: admin UI, API, Twikoo upload
+- **Image URL**: copied links and public image URLs
+
+Single-domain: set `IMAGE_BASE_URL` only or leave empty (request origin). Dual-domain: hostnames must differ — see [Dual-domain separation](./domain-separation.md) and [Cloudflare deployment](./cloudflare-deployment.md). Values must match proxy `server_name`; do not use `localhost`, IP, or unlisted hostnames for production admin access.
+
+In **Settings**, enable dual-domain explicitly and fill both URLs; disabling clears the site URL (with confirmation). Configured values vs effective link URLs are separate in the API — see [Changelog](./changelog.md#1-2-2-2026-08-30).
+
+### `HIDE_FOLDER_IN_URL`
+
+`true`: short links (domain + filename only), e.g. `img.example.com/a8K3xP.webp`. `false`: keep date or custom folders, e.g. `img.example.com/2026/08/a8K3xP.webp`. Public URLs never expose the internal `images/` prefix; legacy `/images/...` paths still work.
+
+### `STORAGE_USE_DATE_PATH` / `STORAGE_LAYOUT`
+
+- `true` or `STORAGE_LAYOUT=date` (default): `images/YYYY/MM/id.webp`
+- `false` or `STORAGE_LAYOUT=flat`: `images/id.webp`
+
+Also toggled in Settings.
+
+### `DATA_DIR`
+
+Root for images and SQLite. Default `./data`; `/data` in container.
+
+### `WEBP_QUALITY`
+
+Server WebP quality 1–100, default **80**.
+
+### `AUTO_DELETE_DAYS`
+
+Delete images older than N days globally; `0` disables. Affects **new uploads after enable** only. Also in Settings.
+
+### `DEV_BYPASS_ACCESS`
+
+Local dev only: `true` bypasses login. Never use in production.
+
+### Login verification (Settings only)
+
+Configure under **Settings → Access control** (stored in SQLite; no env vars):
+
+| Method | Notes |
+| ------ | ----- |
+| **Local slider** (default) | No third-party service |
+| **Cloudflare Turnstile** | Site key + secret key |
+| **Cap** | API endpoint + secret |
+
+Login and registration share the same method. If misconfigured: `docker exec pichost slider` (or `npm run slider`) resets to the slider.
+
+### Storage backends (optional)
+
+Admins usually add backends in **Storage** UI; env vars such as `STORAGE_BACKEND=s3` and `S3_*` are also supported. See [Storage](./storage.md).
+
+## Docker Compose example
+
+```yaml
+services:
+  pichost:
+    image: muxui/pichost:latest
+    ports:
+      - "6892:6892"
+    volumes:
+      - ./data:/data
+    environment:
+      SITE_BASE_URL: https://admin.example.com
+      IMAGE_BASE_URL: https://pic.example.com
+      API_UPLOAD_TOKEN: your-secret-token
+      WEBP_QUALITY: "85"
+```
+
+Restart the container after changing env vars.
+
+## Settings mapping
+
+| In-app setting | Environment variable |
+| -------------- | ---------------------- |
+| API token | `API_UPLOAD_TOKEN` |
+| Referer protection | `ALLOWED_REFERER_HOSTS` |
+| Site URL | `SITE_BASE_URL` |
+| Image URL | `IMAGE_BASE_URL` |
+| Hide folder prefix | `HIDE_FOLDER_IN_URL` |
+| Date-based paths | `STORAGE_USE_DATE_PATH` / `STORAGE_LAYOUT` |
+| WebP quality | `WEBP_QUALITY` |
+| Auto-delete | `AUTO_DELETE_DAYS` |
+| Login verification | (Settings → Access control only) |
+
+Template: [`.env.example`](https://github.com/O96u/PicHost/blob/main/.env.example) in the repo root.

docs-site/en/guide/domain-separation.md

@@ -0,0 +1,186 @@
+# Dual-domain separation · Recommended deployment
+
+When admin and image domains are split, the admin UI, API, and public image links use different hostnames. PicHost enforces isolation in **application middleware**: the image host only serves image paths; other requests return 404.
+
+## Architecture
+
+**One Docker instance + two domains**, both **fully reverse-proxied** to port `6892` (isolation is handled by PicHost middleware; no path splitting in Nginx).
+
+| Domain | Purpose |
+| ------ | ------- |
+| `admin.example.com` | Admin UI, API, Twikoo upload |
+| `pic.example.com` | Public image links (non-image paths blocked) |
+
+Set during `/setup` or in **Settings**:
+
+- **Site URL**: `https://admin.example.com`
+- **Image URL**: `https://pic.example.com`
+
+Setup and Settings **do not** auto-fill the site URL from `window.location.origin`; use manual input or “Use detected URL”. Disabling dual-domain requires confirmation and clears the site URL. Saves include `domainSeparation: true/false`. See [Changelog](./changelog.md#1-2-2-2026-08-30).
+
+## Nginx example
+
+```nginx
+# admin.example.com — admin + API
+server {
+  server_name admin.example.com;
+  location / {
+    proxy_pass http://127.0.0.1:6892;
+    proxy_set_header Host $host;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    client_max_body_size 12m;
+  }
+}
+
+# pic.example.com — same full proxy; PicHost middleware blocks non-image paths
+server {
+  server_name pic.example.com;
+  location / {
+    proxy_pass http://127.0.0.1:6892;
+    proxy_set_header Host $host;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+}
+
+# Default server: reject bare IP and unknown Host values (strongly recommended in production)
+server {
+  listen 443 ssl default_server;
+  listen 80 default_server;
+  server_name _;
+  return 444;
+}
+```
+
+> Caddy, NPM, and similar tools work the same: proxy both hostnames to `http://<host>:6892` and forward `Host` and `X-Forwarded-Proto`.
+
+## Security notes
+
+### Middleware isolation and third hosts
+
+PicHost uses the request **Host** (and `X-Forwarded-Host` when proxied) to decide site vs image domain:
+
+- **Image host**: non-image paths (e.g. `/`, `/settings`) → 404
+- **Site host**: image URL paths (e.g. `/images/...`) → 404
+- **Unconfigured third hosts** (e.g. `*.pages.dev`, bare IP, old image domains): **from v1.2.x the app returns 404 for all methods** (`localhost` / `127.0.0.1` are exempt in development for `npm run dev`)
+
+This is independent of hyphenated or long domain names. Older versions did not block third hosts; rely on a reverse-proxy default server as a complement in production.
+
+**Production recommendations:**
+
+1. Configure `server_name` only for the site and image hosts; add a **default server** to reject other Host values and bare IP access (see Nginx example above; complements app-layer blocking)
+2. With Cloudflare **orange-cloud** DNS, restrict the origin firewall to **[Cloudflare IP ranges](https://www.cloudflare.com/ips/)** so traffic cannot bypass the CDN
+3. **Before saving**, read the risk confirmation in Settings / setup; saving via IP, LAN, or a proxy that does not forward Host correctly may lock you out — see **Recovery when locked out** below
+4. Sign in only on the **site hostname** from Settings; do not mix `localhost`, IP, or unlisted domains
+5. Do **not** put Cloudflare Pages / Workers in front of PicHost as a **full-site reverse proxy** (`IMAGE_BASE_URL` may point at a CDN URL, but the app itself should run on Docker/VPS)
+6. If you must proxy at the edge, preserve the client **`Host` or `X-Forwarded-Host`** (Lucky/NPM “force hostname” must match PicHost settings) or isolation fails or you get locked out after save
+7. PicHost **cannot** run as-is on Pages/Workers (needs `node-server`, SQLite, `sharp`, local `data/`). Keep Docker/VPS; use orange-cloud DNS and optional R2 storage on CF
+
+### Recovery when locked out
+
+If IP / LAN access returns 404 after a bad save:
+
+```bash
+docker exec pichost clear-domains
+```
+
+Local: `npm run clear-domains`. Then reconfigure using the site hostname and verify proxy `Host` headers.
+
+### Cloudflare orange cloud (incl. preferred edge IPs)
+
+Full guide: [Cloudflare deployment](./cloudflare-deployment.md).
+
+**Recommended:** both `admin.example.com` and `pic.example.com` **DNS Proxied** → origin Nginx / 1Panel → port `6892`, SSL **Full (strict)**.
+
+| Feature | Notes |
+| ------- | ----- |
+| Orange-cloud CDN | Compatible with dual-domain; preserve `Host` and `X-Forwarded-Proto` on origin |
+| DNS “preferred IP” setups | Only changes which CF edge IP clients hit; origin identity must stay **admin → admin**, **img → img** |
+| R2 storage | Add an R2 backend under **Storage**; independent of orange cloud |
+| `cloudflare` Git branch | R2-focused deployment line; still Docker, **not** Workers hosting |
+
+**Do not confuse** “Create Worker” in the CF dashboard (Git + `wrangler deploy`) with deploying PicHost — the repo uses `nitro.preset: 'node-server'` and is not Workers-ready.
+
+**Do not** chain the image hostname to `fetch(admin…)` via Pages/Workers — that rewrites Host and breaks isolation ([bad topologies](./cloudflare-deployment.md#6-typical-bad-topologies)).
+
+See [Reverse proxy](./reverse-proxy.md#cloudflare-orange-cloud) for origin hardening.
+
+## FN NAS · Lucky reverse proxy
+
+In [Lucky](https://github.com/gdy666/lucky), create one **reverse proxy** rule per domain. **Frontend** is the public hostname; **backend** is PicHost on your LAN (e.g. `http://192.168.8.3:6892`).
+
+**Site domain (admin)**
+
+| Field | Example |
+| ----- | ------- |
+| Service type | Reverse proxy |
+| Frontend | `admin.pichost.com` |
+| Backend | `http://192.168.8.3:6892` |
+
+**Image domain**
+
+| Field | Example |
+| ----- | ------- |
+| Service type | Reverse proxy |
+| Frontend | `image.pichost.com` |
+| Backend | `http://192.168.8.3:6892` |
+
+Both rules can point to the same backend; PicHost applies host-based isolation automatically.
+
+## Environment variables (optional)
+
+```env
+SITE_BASE_URL=https://admin.example.com
+IMAGE_BASE_URL=https://pic.example.com
+```
+
+See [Environment variables](./configuration.md).
+
+## Local testing (Windows / macOS)
+
+### 1. Edit hosts
+
+```text
+127.0.0.1 admin.pichost.test
+127.0.0.1 pic.pichost.test
+```
+
+Prefer the `.test` TLD; avoid `.local` where it conflicts with mDNS.
+
+### 2. Start dev server
+
+```bash
+npm run dev
+```
+
+Dev binds `127.0.0.1:3000` by default. If the hostname resolves but the browser cannot connect, check whether dev is listening on IPv6 `::1` only.
+
+### 3. Configure dual domains
+
+| Field | Example |
+| ----- | ------- |
+| Site URL | `http://admin.pichost.test:3000` |
+| Image URL | `http://pic.pichost.test:3000` |
+
+Always open admin on the **site hostname**, not `localhost` (cookies and Host must match).
+
+### 4. Expected behavior
+
+| URL | Expected |
+| --- | -------- |
+| `http://admin.pichost.test:3000/` | Admin UI works |
+| `http://admin.pichost.test:3000/images/...` or `/2026/08/xxx.webp` | **404** (use image host) |
+| `http://pic.pichost.test:3000/` | **404** (image host has no admin) |
+| `http://pic.pichost.test:3000/images/...` | Image served |
+| `http://localhost:3000/` or `http://127.0.0.1:3000/` | **Admin still loads** (development exception; block unconfigured hosts at proxy in production) |
+
+After upload, copied links should use `pic.pichost.test`; gallery thumbnails should load.
+
+## Notes
+
+- Hostnames must **differ** (same machine, different subdomains is fine)
+- Site / image URLs in Settings must **exactly match** proxy `server_name` (including `www` or not)
+- No separate static root on the image domain; unlike EasyImages, PicHost isolates in-app
+- Single-domain setups can skip separation and use `IMAGE_BASE_URL` or the request host
+- When Referer protection is enabled, site and image hosts are whitelisted automatically
+
+For single-domain proxy basics see [Reverse proxy](./reverse-proxy.md). Chinese version: [双域名分离](/guide/domain-separation)

docs-site/en/guide/faq.md

@@ -0,0 +1,95 @@
+# FAQ
+
+## Forgot the admin password?
+
+With `docker exec` access:
+
+```bash
+docker exec pichost reset-password
+docker exec pichost reset-password <username>
+```
+
+Local: `npm run reset-password`. See [Quick start](./getting-started.md#forgot-password).
+
+## Why can’t I regenerate the API token in the UI?
+
+`API_UPLOAD_TOKEN` in the environment **locks** the token. Change env and **restart**. See [Environment variables](./configuration.md#api-upload-token).
+
+## Hotlink / Referer errors?
+
+Check the **Referer whitelist** (`ALLOWED_REFERER_HOSTS` or Settings). Referring sites must be listed; PicHost’s own hosts and dual-domain pair are allowed automatically.
+
+## Admin 404 / locked out after dual-domain setup?
+
+**Cause:** With dual-domain enabled, PicHost returns **404 for every request** whose Host is not the configured site or image hostname. Common triggers:
+
+1. Saving dual-domain URLs while browsing via IP or an internal address
+2. Reverse proxy “force hostname” or wrong `Host` header so PicHost sees a different host than configured
+
+**Recovery (when locked out):**
+
+```bash
+docker exec pichost clear-domains
+# Site URL only: docker exec pichost clear-domains --site
+```
+
+Local dev: `npm run clear-domains`. Then reopen admin via your previous IP/internal URL and reconfigure using the [dual-domain guide](./domain-separation.md#middleware-isolation-and-third-hosts).
+
+**Prevention:** Read the risk confirmation when saving dual-domain settings; proxy must send `Host $host` and `X-Forwarded-Proto`. See [Dual-domain separation](./domain-separation.md#middleware-isolation-and-third-hosts).
+
+## Why can admin load on pages.dev / workers.dev / IP with dual-domain?
+
+**From v1.2.2:** when dual-domain is on, PicHost returns **404** for Host values **other than** the configured site and image hostnames (`localhost` / `127.0.0.1` exempt in development). See [Changelog](./changelog.md#1-2-2-2026-08-30).
+
+If admin still loads:
+
+1. **Dual-domain not active** (image URL set but site URL empty) — neither path split nor third-host blocking applies
+2. **Proxy rewrote Host to site hostname** — e.g. Pages/Worker `fetch(admin…)` on the image hostname
+3. **Port `6892` exposed publicly** — bypasses Cloudflare and Nginx `server_name`
+
+Fix: configure both URLs in Settings; add a default server block; with orange cloud, allow only CF IPs on origin; do not full-proxy through Pages/Workers. See [Dual-domain separation](./domain-separation.md#middleware-isolation-and-third-hosts), [Cloudflare deployment](./cloudflare-deployment.md), and [Changelog](./changelog.md#1-2-2-2026-08-30).
+
+## Can I deploy PicHost on Cloudflare Workers / Pages?
+
+**Not with the current codebase.** PicHost needs `node-server`, SQLite, `sharp`, and local `data/` — use Docker/VPS. Connecting the repo in “Create Worker” will not deploy successfully.
+
+Recommended: run PicHost on origin; use **proxied DNS** (and optional **R2** storage). Do not full-proxy the app through Pages/Workers.
+
+## Dual-domain: admin works but thumbnails break?
+
+- Verify **IMAGE_BASE_URL** and proxy to the same instance
+- Always open admin on the **site hostname**, not mixed with `localhost`
+- See [Dual-domain separation](./domain-separation.md)
+
+## Undeletable gallery items?
+
+Likely **orphan index** rows (no file on disk). Startup sync removes them on restart; you can also delete them from the gallery.
+
+## How do I back up or migrate the full site?
+
+From v1.3.0, use **Storage → Backup & migration**, or CLI:
+
+```bash
+docker exec pichost backup-export
+docker exec pichost backup-restore /data/backups/pichost-xxx.phost.tar.gz
+docker exec pichost storage-sync --from local --to s3-xxx --dry-run
+```
+
+Packages include the database and all images but **not** cloud storage secrets — re-enter them on the Storage page after restore. See [Storage → Backup & migration](./storage.md#backup--migration-v130).
+
+## Skip login during development?
+
+`DEV_BYPASS_ACCESS=true` (local only). Use `/setup` for normal flows.
+
+## Docs vs README?
+
+This **VitePress site** is the full guide; README is a short overview. Online: <https://o96u.github.io/PicHost/>
+
+## What should the GitHub repo About say?
+
+For **main**:
+
+- **Description**: `Lightweight self-hosted image hosting — Docker, multi-user, gallery & API, local disk or S3-compatible storage.`
+- **Website**: `https://o96u.github.io/PicHost/` (docs, not a live demo)
+
+Do not claim the app runs on Cloudflare Pages/Workers. The **cloudflare** branch demo is [pic.roven.cc](https://pic.roven.cc).

docs-site/en/guide/getting-started.md

@@ -0,0 +1,96 @@
+# Quick start
+
+PicHost is a self-hosted image host for NAS, home servers, or VPS. Docker is recommended; the first visit runs a web wizard to create the admin account.
+
+## Try it online
+
+| Branch | Notes |
+| ------ | ----- |
+| **main** | No public demo — see [screenshots](./index.md#screenshots) or the repository README |
+| **cloudflare** | R2-only live demo: [pic.roven.cc](https://pic.roven.cc) |
+
+## Docker (recommended)
+
+```bash
+docker run -d \
+  --name pichost \
+  -p 6892:6892 \
+  -v ./data:/data \
+  --restart unless-stopped \
+  muxui/pichost:latest
+```
+
+Default port: **6892**. Open `http://<host>:6892` and complete setup.
+
+If you cloned the repo:
+
+```bash
+docker compose up -d
+```
+
+See `docker-compose.yml` in the repository.
+
+## First-time setup
+
+1. Open your instance URL (Docker default `http://<host>:6892`).
+2. On `/setup`, choose **Create admin** or **Restore backup**:
+   - **Create admin** — username, password, optional registration and dual-domain options.
+   - **Restore backup** — upload a `.phost.tar.gz` full-site package (replaces current data; re-enter cloud storage secrets after restore).
+3. (Optional) Configure site URL, image URL, Referer rules — see [Environment variables](./configuration.md) and [Dual-domain separation](./domain-separation.md).
+4. Upload from the home page; use the top nav for **Gallery**, **Storage** (admin), **Settings**, and **API**.
+
+| Create admin | Restore from backup |
+| :----------: | :-----------------: |
+| ![Setup](/screenshots/setup.png) | ![Setup restore](/screenshots/setup-restore.png) |
+
+For an already-initialized instance, use [Storage → Backup & migration](./storage.md#backup--migration-v130) instead of `/setup`.
+
+## Sign in
+
+Management pages (upload, gallery, settings, etc.) require login. Enter username and password, complete the verification challenge, then click **Sign in**.
+
+The default is a **local slider** (align the thumb with the gap). Admins can switch to **Cloudflare Turnstile** or **Cap** under **Settings → Access control**, with the matching site key / secret or API endpoint.
+
+![Login](/screenshots/login.png)
+
+If registration is enabled, create an account from the register page (same verification). Legacy deployments may still use a secret key (see the on-screen hint).
+
+### Locked out of verification
+
+If Turnstile / Cap is misconfigured and you cannot sign in, reset to the local slider on the server:
+
+```bash
+docker exec pichost slider
+```
+
+Local dev: `npm run slider`
+
+## Forgot password
+
+Requires `docker exec` (server access):
+
+```bash
+docker exec pichost reset-password              # admin only when there is exactly one
+docker exec pichost reset-password <username> # admin or regular user
+```
+
+A random password is printed. Change it after login.
+
+Local dev: `npm run reset-password` or `npm run reset-password -- <username>`
+
+## Dual-domain lockout
+
+If dual-domain is enabled and IP / LAN access returns 404:
+
+```bash
+docker exec pichost clear-domains
+```
+
+Local: `npm run clear-domains`. See [FAQ — Admin 404 after dual-domain setup](./faq.md#admin-404--locked-out-after-dual-domain-setup).
+
+## Next steps
+
+- [Local development](./local-dev.md)
+- [Environment variables](./configuration.md)
+- [Storage](./storage.md)
+- [API](./api.md)

docs-site/en/guide/index.md

@@ -0,0 +1,40 @@
+# PicHost documentation
+
+Welcome to the PicHost user guide. This site is the single source of truth; the repository README keeps a short overview and quick start.
+
+## Suggested reading order
+
+1. [Quick start](./getting-started.md) — Docker and first-time setup
+2. [Environment variables](./configuration.md) — Production config vs in-app settings
+3. [Changelog](./changelog.md) — Version history and upgrade notes
+4. [Storage](./storage.md) — Backends and URL modes
+5. [API](./api.md) — REST endpoints and tokens
+
+## Screenshots
+
+**main** has no public demo. Below are current product screenshots (v1.3.0+).
+
+| API | Gallery (detail) |
+| :-: | :--------------: |
+| ![API](/screenshots/api.png) | ![Gallery](/screenshots/gallery.png) |
+
+| Storage | Settings |
+| :-----: | :-------: |
+| ![Storage](/screenshots/storage.png) | ![Settings](/screenshots/settings-en.png) |
+
+| First-time setup | Restore from backup |
+| :--------------: | :-----------------: |
+| ![Setup](/screenshots/setup.png) | ![Setup restore](/screenshots/setup-restore.png) |
+
+| Activity log |
+| :----------: |
+| ![Activity log](/screenshots/logs.png) |
+
+## Branches
+
+| Branch | Notes |
+| ------ | ----- |
+| [**main**](https://github.com/O96u/PicHost/tree/main) | Full product; screenshots above |
+| [**cloudflare**](https://github.com/O96u/PicHost/tree/cloudflare) | R2-only; live demo [pic.roven.cc](https://pic.roven.cc) |
+
+Use **main** for multiple cloud backends; use **cloudflare** if you only deploy with Cloudflare R2.

docs-site/en/guide/local-dev.md

@@ -0,0 +1,55 @@
+# Local development
+
+Full-stack Nuxt 4 development at the repository root. Data defaults to `./data`.
+
+## Requirements
+
+- Node.js **22**
+- npm **11** (see `packageManager` in `package.json`)
+
+## Start
+
+```bash
+npm install
+cp .env.example .env   # optional
+npm run dev
+```
+
+Open `http://localhost:3000/setup` to create the admin account. Data directory defaults to `./data` (`DATA_DIR` overrides).
+
+## Common commands
+
+| Command | Description |
+| ------- | ----------- |
+| `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 |
+| `npm run reset-password` | Reset password (optional username) |
+| `npm run slider` | Reset login verification to local slider |
+| `npm run clear-domains` | Clear site/image URL settings from DB (recover from dual-domain lockout) |
+
+## Dev-only variables
+
+| Variable | Description |
+| -------- | ----------- |
+| `DEV_BYPASS_ACCESS` | `true` bypasses login (skips `/setup`; rarely needed) |
+| `DATA_DIR` | Data directory, default `./data` |
+
+Full list: [Environment variables](./configuration.md).
+
+## Dual-domain local test
+
+Edit `hosts` and follow [Dual-domain separation](./domain-separation.md) for local verification.
+
+## Documentation site
+
+```bash
+npm run docs:dev
+npm run docs:build
+npm run docs:preview
+```
+
+Sources live in `docs-site/`; screenshot sources are in `docs/screenshots/` (including `login.png`, `setup.png`, `setup-restore.png`, etc.), copied to `docs-site/public/screenshots/` before build. Live docs: <https://o96u.github.io/PicHost/>

docs-site/en/guide/reverse-proxy.md

@@ -0,0 +1,85 @@
+# Reverse proxy
+
+In production, terminate HTTPS with Nginx, Caddy, NPM (Nginx Proxy Manager), or your NAS proxy and forward to PicHost on port **6892**.
+
+## Basics
+
+- Upstream: `http://127.0.0.1:6892` (or host IP)
+- Forward: `Host`, `X-Forwarded-Proto` (and `X-Forwarded-For` as needed)
+- Body size: Nginx `client_max_body_size 12m` or larger
+- Use **HTTPS** on the public edge
+
+## Single domain (Nginx)
+
+Admin, API, and images on one hostname:
+
+```nginx
+server {
+  server_name pic.example.com;
+  location / {
+    proxy_pass http://127.0.0.1:6892;
+    proxy_set_header Host $host;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    client_max_body_size 12m;
+  }
+}
+```
+
+Optional:
+
+```env
+IMAGE_BASE_URL=https://pic.example.com
+```
+
+Without `IMAGE_BASE_URL`, PicHost infers the public URL from forwarded headers.
+
+## Dual domains
+
+Both hostnames can fully proxy to the same port; isolation is enforced in PicHost middleware.
+
+See [Dual-domain separation](./domain-separation.md).
+
+## Cloudflare orange cloud
+
+See [Cloudflare deployment](./cloudflare-deployment.md).
+
+| Practice | Notes |
+| -------- | ----- |
+| **Proxied DNS** | Both admin and image hostnames → origin proxy to `6892`, SSL **Full (strict)** |
+| Preferred edge IPs | Compatible; keep **admin → admin**, **img → img** on origin |
+| **R2** | Object storage backend in **Storage**; not the same as hosting the app on Pages |
+| Origin firewall | Allow only [Cloudflare IPs](https://www.cloudflare.com/ips/); do not expose `6892` publicly |
+
+**Avoid:**
+
+- **Cloudflare Pages** (`*.pages.dev`) or **Workers** (`*.workers.dev`) as a **full-site reverse proxy**, or chaining the image host to `fetch(admin…)` — rewrites Host and bypasses dual-domain isolation ([guide](./cloudflare-deployment.md))
+- “Create Worker” from Git on this repo — `node-server` preset is not Workers-ready
+
+## Origin hardening (dual-domain)
+
+Complement PicHost middleware with:
+
+1. **`server_name` allowlist** — site + image hosts only; `default_server` blocks bare IP and unknown Host
+2. **Do not expose 6892 on the public Internet** — only local reverse proxy; public 80/443 only
+3. **Orange cloud** — origin firewall limited to Cloudflare IP ranges
+
+**From v1.2.2**, when dual-domain is active PicHost also returns **404 at the app layer** for Host values other than the configured site and image names (complementing, not replacing, a default server block). If misconfiguration locks you out, run `docker exec pichost clear-domains` — see [FAQ](./faq.md#admin-404--locked-out-after-dual-domain-setup).
+
+## Caddy
+
+```caddy
+pic.example.com {
+  reverse_proxy 127.0.0.1:6892
+}
+```
+
+Add a second site block for the second hostname with the same upstream.
+
+## Caching
+
+Image 404/403 and domain-isolation 404 responses are **no-cache** to avoid sticky CDN errors. Be careful caching API paths behind a CDN.
+
+## See also
+
+- [Environment variables](./configuration.md)
+- [Quick start](./getting-started.md)

docs-site/en/guide/storage.md

@@ -0,0 +1,103 @@
+# Storage
+
+PicHost supports **local disk** and **S3-compatible object storage** (Cloudflare R2, Tencent COS, Alibaba OSS, AWS S3, etc.). Admins manage backends at **Storage** (`/storage`); new uploads go to the **default** backend. The page shows a **storage overview** (total, used, remaining, usage rate, capacity chart) plus per-backend cards and supported backend types.
+
+![Storage management](/screenshots/storage.png)
+
+## Layout (local)
+
+```
+/data
+├── pichost.db          # SQLite: users, sessions, settings, storage_backends, images index
+└── images/             # All files when using local backend
+```
+
+- New uploads: `images/randomId.webp` or `images/YYYY/MM/randomId.webp` (flat mode in Settings)
+- Migrated legacy: `images/blog/...` and similar
+- With cloud backends, blobs live in the bucket; index stays in SQLite `images`
+
+All **keys** start with `images/`. The upload API does **not** accept a `folder` parameter.
+
+## Adding a backend
+
+1. Sign in as admin → **Storage** → **Add backend**.
+2. Choose **local disk** or **S3-compatible** (R2 / COS / OSS presets).
+3. Enter connection details (bucket, endpoint, keys).
+4. **Set as default** so new uploads use it.
+
+New object-storage backends get an auto-generated **storage ID** prefix: `local` for disk; `r2-*` for R2; `cos-*` for COS; `oss-*` for OSS; `s3-*` for AWS S3 and custom S3-compatible endpoints (immutable after creation; the image index references this ID).
+
+### Cloudflare R2
+
+| Field | Value |
+| ----- | ----- |
+| Endpoint | `https://<account_id>.r2.cloudflarestorage.com` |
+| Region | `auto` |
+| Bucket | Your R2 bucket name |
+| Keys | R2 API token access / secret |
+
+The **cloudflare** branch streamlines R2-only deploys; see branch notes on the [docs overview](./index.md).
+
+### Environment variables (optional)
+
+Some installs seed a default S3 backend via `STORAGE_BACKEND=s3`, `S3_ENDPOINT`, `S3_BUCKET`, `S3_ACCESS_KEY`, `S3_SECRET_KEY`, `S3_REGION`. **UI-configured backends live in SQLite** alongside env-based defaults.
+
+## URL modes
+
+| Mode | Behavior |
+| ---- | -------- |
+| **proxy** | Serve via PicHost (`GET /images/...`) |
+| **public** | 302 redirect to bucket/CDN public URL |
+
+Copied links use **IMAGE_BASE_URL**. “Hide folder prefix” may shorten URLs; the server resolves by path or basename.
+
+## Usage & gallery filter
+
+- Per-backend usage on the Storage page
+- Gallery filters by **storage backend** and **upload source**; grid/list view toggle; click a thumbnail for the detail modal (dimensions, storage path, link formats)
+
+## Backup & migration (v1.3.0+)
+
+The **Backup & migration** panel has three action cards and a paginated **Recent jobs** table below:
+
+| Feature | Description |
+| ------- | ------------- |
+| **Create site backup** | Export `.phost.tar.gz` with `pichost.db` and all images (including objects on cloud backends); shows estimated size and package contents |
+| **Restore from backup** | Upload locally or pick an existing package under `data/backups/`, preview, then confirm; skip or overwrite conflicting images |
+| **Cross-backend sync** | Copy images between configured backends and update the index; shows pending count/size, dry-run, optional delete-source and set-default |
+
+![Backup & migration](/screenshots/storage.png)
+
+- Exports are saved under `data/backups/`; only one backup/migration job may run at a time
+- Job list supports pagination; download exports, view restore summaries, retry failed sync jobs
+- Packages **do not** include cloud storage secrets — re-enter them on the Storage page after restore
+- Uninitialized instances can use the **Restore backup** tab on `/setup` (always overwrite mode)
+
+![Setup restore](/screenshots/setup-restore.png)
+
+### CLI
+
+```bash
+docker exec pichost backup-export
+docker exec pichost backup-restore /data/backups/pichost-xxx.phost.tar.gz
+docker exec pichost backup-restore /data/backups/pichost-xxx.phost.tar.gz --overwrite
+docker exec pichost storage-sync --from local --to s3-xxx --dry-run
+docker exec pichost storage-sync --from local --to s3-xxx --set-default
+```
+
+Local development (project root):
+
+```bash
+npm run backup-export
+npm run backup-restore -- data/backups/pichost-xxx.phost.tar.gz
+npm run storage-sync -- --from local --to s3-xxx --dry-run
+```
+
+### Manual backup
+
+You can still back up `data/images/`, `data/pichost.db`, and bucket objects directly; prefer the full-site export above.
+
+## See also
+
+- [Environment variables](./configuration.md)
+- [Users & permissions](./users-and-permissions.md)

docs-site/en/guide/twikoo.md

@@ -0,0 +1,49 @@
+# Twikoo
+
+PicHost supports **Twikoo** and **EasyImage 2.0** image upload — configure your comment system like EasyImage.
+
+## Twikoo settings
+
+| Setting | Value |
+| ------- | ----- |
+| `IMAGE_CDN` | `easyimage` |
+| `IMAGE_CDN_URL` | `https://your-domain/api/index.php` |
+| `IMAGE_CDN_TOKEN` | Same as global `API_UPLOAD_TOKEN` |
+
+- Use your **site hostname** (admin domain) in `IMAGE_CDN_URL`
+- Generate the token in PicHost **API** or set `API_UPLOAD_TOKEN`
+
+## Upload endpoint
+
+`POST /api/index.php`
+
+| Field | Description |
+| ----- | ----------- |
+| `image` | Image file |
+| `token` | Global API token (same as `Auth-Token`) |
+
+```bash
+curl -X POST "https://admin.example.com/api/index.php" \
+  -F "token=YOUR_TOKEN" \
+  -F "image=@./demo.png"
+```
+
+Files are stored under `images/` and owned by the **global token** account (admin).
+
+## REST vs Twikoo
+
+| Aspect | REST `/api/images/upload` | Twikoo `/api/index.php` |
+| ------ | ------------------------- | ------------------------ |
+| Auth | `Auth-Token` header | form `token` |
+| Response | PicHost JSON | EasyImage-compatible JSON |
+| Token | Global or personal | Global only |
+
+## Dual-domain
+
+Point Twikoo uploads at **SITE_BASE_URL**; public images use **IMAGE_BASE_URL**. See [Dual-domain separation](./domain-separation.md).
+
+## See also
+
+- [API](./api.md)
+- [Users & permissions](./users-and-permissions.md)
+- [Environment variables](./configuration.md)

docs-site/en/guide/users-and-permissions.md

@@ -0,0 +1,60 @@
+# Users & permissions
+
+PicHost uses role-based access control (RBAC): **admin** and **user**. Enforcement is server-side.
+
+## Role capabilities
+
+| Capability | Admin | User |
+| ---------- | :---: | :--: |
+| Upload images | ✓ | ✓ |
+| Own gallery | ✓ | ✓ |
+| All galleries / uploader badges | ✓ | — |
+| Storage management (`/storage`) | ✓ | — |
+| System settings (`/settings`) | ✓ | — |
+| Allow registration | ✓ | — |
+| Login verification (slider / Turnstile / Cap) | ✓ | — |
+| Global API token | ✓ | — |
+| Personal API token | ✓ | ✓ |
+| Gallery stats overview (incl. user count) | ✓ | partial |
+| Activity log (Settings → Activity log) | ✓ | — |
+
+Regular users see **API**, **Gallery** in the nav; user menu: **Change password**, **Sign out**.
+
+## Auth scenarios
+
+| Scenario | Auth | Ownership / visibility |
+| -------- | ---- | ---------------------- |
+| Web upload | Session cookie | Current user |
+| API upload + **user token** | `Auth-Token` header | Token owner |
+| API upload + **global token** | `Auth-Token` header | Admin (`userId` null) |
+| Twikoo `POST /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 |
+
+## Accounts
+
+- By default only admins create users; **allow registration** is an admin setting
+- Passwords hashed with scrypt
+- Web login/register requires verification: local slider by default; admins can switch to Turnstile or Cap under **Settings → Access control**
+- If verification is misconfigured: `docker exec pichost slider` resets to the local slider
+- Login rate limiting
+
+## Upload preferences & auto-delete
+
+- **Upload preferences**: admins configure client compression and auto-copy in **Settings → Basic**; regular users can flip the home upload card for personal preferences
+- **Auto-delete**: global (admin) and per-user policies; affects **new uploads after enable** only
+
+## API tokens
+
+| Type | Managed by | Upload owner | Typical use |
+| ---- | ---------- | ------------ | ----------- |
+| **Global** | Admin (API page) | Admin account | Twikoo, site-wide scripts |
+| **Personal** | Each user (API page) | That user | Personal blog, private scripts |
+
+`API_UPLOAD_TOKEN` in env locks the global token — see [Environment variables](./configuration.md).
+
+## See also
+
+- [API](./api.md)
+- [Twikoo](./twikoo.md)
+- [Storage](./storage.md)

docs-site/en/index.md

@@ -0,0 +1,32 @@
+---
+layout: home
+
+hero:
+  name: PicHost
+  text: Lightweight image hosting
+  tagline: Self-hosted · Multi-user · Docker · API · Twikoo · Local disk or object storage
+  actions:
+    - theme: brand
+      text: Quick start
+      link: /en/guide/getting-started
+    - theme: alt
+      text: API reference
+      link: /en/guide/api
+    - theme: alt
+      text: GitHub
+      link: https://github.com/O96u/PicHost
+
+features:
+  - title: Drag, click, paste
+    details: Server-side WebP compression and Referer hotlink protection.
+  - title: Multi-backend storage
+    details: Local disk plus S3-compatible backends (R2 / COS / OSS / AWS); proxy or public URLs.
+  - title: Users & RBAC
+    details: Admin and regular users; global and per-user API tokens; gallery scoped by owner.
+  - title: Zero-config Docker
+    details: First-run web wizard; reset passwords with `docker exec pichost reset-password`.
+  - title: Dual-domain separation
+    details: One instance, two hostnames, full reverse proxy; middleware enforces isolation.
+  - title: Twikoo compatible
+    details: "POST /api/index.php follows EasyImage 2.0 for comment systems."
+---

docs-site/guide/api.md

@@ -0,0 +1,99 @@
+# API
+
+PicHost 提供 REST 接口与 Twikoo 兼容端点。登录后打开顶栏 **API** 页：左侧为接口目录与 Token 管理，中间为参数说明与 cURL 示例，右侧可 **在线调试** 发送请求。
+
+## 鉴权
+
+所有 REST 接口使用请求头：
+
+```http
+Auth-Token: YOUR_TOKEN
+```
+
+| Token 类型 | 获取方式 | 说明 |
+| ---------- | -------- | ---- |
+| **全局 Token** | 管理员 **API** 页生成；或 `API_UPLOAD_TOKEN` 环境变量 | 环境变量优先且锁定后台重新生成 |
+| **个人 Token** | 各用户 **API** 页 | 仅用于该用户脚本，上传归属本人 |
+
+表单上传仍可使用字段 `token`（Twikoo 协议）。
+
+## 接口列表
+
+### 1. 上传图片
+
+`POST /api/images/upload`
+
+上传单张或多张图片。字段 `image` 传图片；仍兼容 `file`、`files`。存入 `images/`。
+
+```bash
+curl -X POST "https://admin.example.com/api/images/upload" \
+  -H "Auth-Token: YOUR_TOKEN" \
+  -F "image=@./demo.png"
+```
+
+### 2. 获取图片列表
+
+`GET /api/images`
+
+分页列出图库。`limit` 默认 20、最大 100。
+
+```bash
+curl "https://admin.example.com/api/images?limit=20&page=1" \
+  -H "Auth-Token: YOUR_TOKEN"
+```
+
+### 3. 搜索图片
+
+`GET /api/images/search`
+
+按文件名或路径关键词搜索，参数 `q` 必填。
+
+```bash
+curl "https://admin.example.com/api/images/search?q=demo&limit=20&page=1" \
+  -H "Auth-Token: YOUR_TOKEN"
+```
+
+### 4. 删除图片
+
+`DELETE /api/images`
+
+通过 `key` 删除单张，`key` 为存储路径（如 `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. 批量删除
+
+`POST /api/images/batch-delete`
+
+请求体 JSON：`{"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"]}'
+```
+
+## 错误格式
+
+REST 接口返回 JSON，含 `code` 与 `message`（如 `UNAUTHORIZED`、`FORBIDDEN`、`INVALID_REQUEST`）。Twikoo 端点使用 EasyImage 兼容 JSON 格式。
+
+## 权限与可见范围
+
+- 普通用户 Token：列表/搜索/删除仅作用于自己的图片
+- 管理员 Token：可访问全部图片
+- 全局 Token 上传的图片归属管理员
+
+详见 [用户与权限](./users-and-permissions.md)。
+
+## Twikoo
+
+`POST /api/index.php` 见 [Twikoo](./twikoo.md)。
+
+## 相关
+
+- [环境变量](./configuration.md) — `API_UPLOAD_TOKEN`
+- [反向代理](./reverse-proxy.md) — 公网 URL 与 HTTPS

docs-site/guide/changelog.md

@@ -0,0 +1,179 @@
+# 更新日志
+
+PicHost 版本历史与重要变更说明。完整记录亦见仓库根目录 [CHANGELOG.md](https://github.com/O96u/PicHost/blob/main/CHANGELOG.md)。
+
+---
+
+## [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 重构；API 页支持在线调试
+- **图库筛选**：按存储后端筛选
+- **存储标识**：新建 R2 / COS / OSS / S3 后端按类型生成 `r2-*`、`cos-*`、`oss-*`、`s3-*` 前缀
+
+### 改进
+
+- 操作日志表格样式与路径截断
+- 存储后端卡片信息行布局
+- 文档站与 README 截图更新
+
+## [1.2.5] — 2026-08-31
+
+### 新增
+
+- **图库页**：导航「统计」改为「图库」（`/gallery`）；点击图片打开详情弹层（大图、尺寸、上传方式、存储路径、链接复制）
+- **列表操作**：全选 / 反选；单张删除移至详情弹层
+- **上传来源**：图库 API 返回网页 / API 上传方式（来自活动日志）
+
+### 改进
+
+- README 补充技术栈章节
+
+### 移除
+
+- `/stats` 路由（不再保留兼容跳转）
+
+## [1.2.4] — 2026-08-31
+
+### 修复
+
+- **访问控制留空仍拦截外链**：未配置 Referer 白名单时，浏览器直开图片正常，但博客/论坛嵌入会因 Referer 校验返回 403 图裂；现仅在配置了白名单时才启用防盗链
+
+## [1.2.3] — 2026-08-30
+
+### 修复
+
+- **简短图片链接 + 按年/月分组**：纯文件名直链（如 `https://域名/xxx.webp`）不再误当成 `images/xxx.webp`，改为经 SQLite 索引反查 `images/年/月/xxx.webp`，缩略图与短链恢复正常
+
+---
+
+## [1.2.2] — 2026-08-30
+
+> 升级后请**重启服务**使中间件与 API 生效。
+
+### 双域名配置与 Host 隔离
+
+#### 修复
+
+| 问题 | 说明 |
+| ---- | ---- |
+| 管理域被误清空 | 设置页保存时，关闭双域名或仅改图片域可能把 `site_base_url` 写成空字符串，导致 UI 切回单域、管理域「消失」 |
+| 配置与生效 URL 混淆 | `GET /api/settings` 的 `siteBaseUrl` / `imageBaseUrl` 曾混入当前请求的 `origin`，设置页「当前生效」与数据库配置难以区分 |
+| 第三 Host 绕过隔离 | `pages.dev`、裸 IP、旧图片域等未纳入配置的 Host 此前不被中间件拦截，后台/API 可能仍可访问 |
+
+#### 改进
+
+**设置 API（`GET /api/settings`）**
+
+| 字段 | 含义 |
+| ---- | ---- |
+| `siteBaseUrl` / `imageBaseUrl` | **配置值**（DB → 环境变量），不含 request fallback |
+| `effectiveSiteBaseUrl` / `effectiveImageBaseUrl` | **直链生成用**，未配置时回退到当前请求 origin |
+| `runtime.currentOrigin` | 检测到的当前访问地址（仅展示，不写入配置） |
+| `runtime.hostRole` | `site` / `image` / `unknown` / `single` |
+
+**保存 API（`PATCH /api/settings`）**
+
+- 新增 body 字段 `domainSeparation`（`true` / `false`），显式表达是否启用双域名
+- `domainSeparation: true` 时网站域与图片域**均必填**，且主机名不能相同
+- `domainSeparation: false` 时允许清空网站域
+- 未传 `domainSeparation` 且双域名已配置时，**禁止**单独把 `siteBaseUrl` 置空
+
+**设置页 / 首次设置**
+
+- 表单回填配置值；「当前生效」显示 `effective*` 字段
+- 展示「检测到当前访问」地址，**不再**自动写入 `window.location.origin`
+- 提供「填入检测地址」按钮（用户主动点击才填）
+- 关闭双域名需确认弹窗
+- 双域名开启且 `hostRole === 'unknown'` 时显示反代绕过警告
+
+**Host 中间件**
+
+- 双域名开启时，非 site/image 的 Host **应用层一律 404**（所有 HTTP 方法）
+- 开发环境 `localhost` / `127.0.0.1` 例外，便于 `npm run dev`
+- 与 Nginx `default_server` **互补**，建议两层都配置
+
+#### 文档
+
+- 重写 [Cloudflare / CF 优选部署](./cloudflare-deployment.md)（精简结构、检查清单、双层防护）
+- 更新 [双域名分离](./domain-separation.md) 第三 Host 与应用层拦截说明
+- 新增本页 **更新日志**
+
+#### 升级说明
+
+- **无需**数据库迁移或 CLI 操作
+- 若管理域此前已被误清空：在 **设置** 中重新填写网站域，或设置环境变量 `SITE_BASE_URL` 后重启
+- 生产双域名部署：确认反代 `server_name` 与设置一致；建议保留 Nginx default server
+
+---
+
+## [1.2.1] — 2026-08-29
+
+### 新增
+
+- 登录滑动拼图验证（缺口对齐）；验证与登录分两步
+- VitePress 文档站（`docs-site/`），部署至 GitHub Pages
+- `npm run docs:dev` / `docs:build` / `docs:preview`
+
+### 修复
+
+- 统计页删除图片后图库不刷新
+- 分页跳转输入框在 `type="number"` 下无法跳转
+- 非首页路由下复制链接格式偏好不持久化
+- 滑动验证 UI：滑块垂直居中、缺口尺寸与滑块一致
+
+### 改进
+
+- README 精简，详细说明迁入文档站
+- 双域名文档补充未知 Host 风险与 Cloudflare 部署说明
+
+---
+
+## [1.2.0] — 2026-08-28
+
+### 变更
+
+- 图片统一存放在 `data/images/`；不再使用与 `images` 并列的顶层目录
+
+### 新增
+
+- 启动时自动同步图片索引（扫描磁盘、归一化遗留 key、清理孤儿记录）
+
+---
+
+## [1.1.x] 摘要
+
+| 版本 | 要点 |
+| ---- | ---- |
+| 1.1.5 | API 上传后预览偶发失败修复；出图前校验文件存在 |
+| 1.1.4 | 按年/月分组存储；网站域禁止直链出图 |
+| 1.1.3 | 双域名分离（`SITE_BASE_URL` / `IMAGE_BASE_URL`）；Host 中间件 |
+| 1.1.0 | 多存储后端（S3 / R2 等） |
+
+更早版本见 [GitHub CHANGELOG](https://github.com/O96u/PicHost/blob/main/CHANGELOG.md)。

docs-site/guide/cloudflare-deployment.md

@@ -0,0 +1,240 @@
+# Cloudflare / CF 优选部署说明
+
+PicHost 双域名模式下，应用根据请求 **Host**（及可信反代转发的 `X-Forwarded-Host`）区分**管理域**与**图片域**。使用 Cloudflare 橙云、优选线路、Workers 或 Pages 时，只要最终到达 PicHost 的 Host 身份不变，即可正常工作。
+
+> **一句话原则：** 网络线路可以改变，请求的域名身份不能改变 — `admin → admin`，`img → img`，不要 `img → admin`。
+
+基础概念见 [双域名分离](./domain-separation.md)；反代通用要求见 [反向代理](./reverse-proxy.md)。
+
+---
+
+## 快速检查清单
+
+部署或排错时，按顺序确认：
+
+| # | 检查项 | 期望 |
+| - | ------ | ---- |
+| 1 | 浏览器地址栏域名 | `admin.*` 或 `img.*`，不要用 IP / `pages.dev` 混用 |
+| 2 | 中间是否经过 Pages / Worker | 图片域**不得** `fetch(admin…)` |
+| 3 | 反代 upstream | 两个域名均指向 `http://127.0.0.1:6892` |
+| 4 | Nginx `proxy_set_header Host` | `$host`（保持客户端域名） |
+| 5 | PicHost 设置 | `SITE_BASE_URL` / `IMAGE_BASE_URL` 与 `server_name` 一致 |
+| 6 | 端口 `6892` | 仅本机或内网反代可达，不对公网裸露 |
+
+---
+
+## 推荐拓扑
+
+两个域名经 Cloudflare（橙云）后，**各自独立**反代到同一 PicHost 实例：
+
+```mermaid
+flowchart TB
+  internet[Internet]
+  cf[Cloudflare 橙云]
+  admin[admin.example.com]
+  img[img.example.com]
+  panel[1Panel / Nginx]
+  app[PicHost :6892]
+
+  internet --> cf
+  cf --> admin
+  cf --> img
+  admin --> panel
+  img --> panel
+  panel --> app
+```
+
+```env
+SITE_BASE_URL=https://admin.example.com
+IMAGE_BASE_URL=https://img.example.com
+```
+
+```text
+admin.example.com → http://127.0.0.1:6892
+img.example.com   → http://127.0.0.1:6892
+```
+
+不需要为「前端 / 后端 / 图片」开不同端口；一个 PicHost 实例、一个内部端口（默认 `6892`）即可。
+
+### 管理域 ≠ 前端域名
+
+| 域名 | 用途 |
+| ---- | ---- |
+| `admin.example.com` | 后台、登录、设置、图库、API、上传 |
+| `img.example.com` | 图片直链、外链、CDN 分发 |
+
+更准确的说法是**管理域 / 图片域**，而非「前端 / 后端」。PicHost 生产环境也**不需要** `前端 :3000 + 后端 :6892` 这种拆分。
+
+---
+
+## Cloudflare 橙云与 CF 优选
+
+**橙云（DNS Proxied）** 是正常且推荐的方式：
+
+```text
+admin.example.com、img.example.com
+  A / CNAME → 源站 → Proxied
+```
+
+用户访问 `admin.example.com` 时，PicHost 应收到 `Host: admin.example.com`；访问 `img.example.com` 时应收到 `Host: img.example.com`。
+
+**CF 优选**（优选 IP、优选域名、边缘入口）同样可用。优选可以改变用户到 Cloudflare 边缘的路径，但**不能**把图片域的回源身份变成管理域。两个域名应保持平行、独立的回源链：
+
+```text
+admin → CF → admin.example.com → 源站 → PicHost
+img   → CF → img.example.com   → 源站 → PicHost
+```
+
+---
+
+## 六、典型错误拓扑
+
+以下方案会破坏 Host 隔离，即使浏览器地址栏仍显示图片域：
+
+### ❌ 错误 1：图片域 fetch 到管理域
+
+```mermaid
+flowchart LR
+  user[用户 img.example.com]
+  worker[Pages / Worker]
+  admin[fetch admin.example.com]
+  app[PicHost]
+
+  user --> worker --> admin --> app
+```
+
+最后一跳 Host 变成 `admin.example.com`，PicHost 会认为这是管理域 — `https://img.example.com/` 可能看到后台。这是 **Host 被改写**，不是缓存问题。
+
+### ❌ 错误 2：优选回源到管理域
+
+```text
+img.example.com → 优选域名 → admin.example.com → 源站
+```
+
+即使只为改善线路，只要 upstream 使用管理域，图片域隔离即失效。
+
+### ❌ 错误 3：公网直接暴露 6892
+
+```text
+任意域名 / IP:6892 → PicHost
+```
+
+用户可绕开 Cloudflare 与 Nginx 的 `server_name` 限制。`6892` 应仅允许 `127.0.0.1` 或内网反代访问。
+
+### ✅ 正确做法
+
+```text
+admin → admin → PicHost
+img   → img   → PicHost
+```
+
+**不要** Pages / Workers **整站反代** PicHost（会多出 `pages.dev` / `workers.dev` 等第三入口）。PicHost 依赖 `node-server`、SQLite、`sharp` 与本地 `data/`，**不能**作为 Node 应用直接部署到 Pages/Workers；应用本体继续 Docker/VPS 部署，CF 侧用橙云 DNS + 可选 R2 即可。
+
+---
+
+## Workers / Pages 使用建议
+
+若只需改响应头、鉴权、防盗链、日志或缓存，且源站仍是自己的 PicHost：
+
+| 推荐 | 不推荐 |
+| ---- | ------ |
+| `img.example.com` → **Worker Route** → 原 `img` 源站 | `img` → Worker → `fetch(admin.example.com)` |
+
+Cloudflare 对已有外部源站的场景更推荐 [Routes](https://developers.cloudflare.com/workers/configuration/routing/routes/)（在现有 proxied 域名与源站之前运行），而非用 [Custom Domain](https://developers.cloudflare.com/workers/configuration/routing/custom-domains/) 把 Worker 当作跨域 fetch 的中转。
+
+Worker 中若出现：
+
+```js
+fetch(`https://admin.example.com${url.pathname}`)
+```
+
+即基本可确定隔离被破坏。
+
+---
+
+## Nginx / 1Panel 配置
+
+两个 `server` 块，upstream 相同，**关键行**是 `proxy_set_header Host $host;`：
+
+```nginx
+server {
+    server_name admin.example.com;
+    location / {
+        proxy_pass http://127.0.0.1:6892;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        client_max_body_size 12m;
+    }
+}
+
+server {
+    server_name img.example.com;
+    location / {
+        proxy_pass http://127.0.0.1:6892;
+        proxy_set_header Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+}
+
+# 拒绝裸 IP 与未配置域名（强烈建议）
+server {
+    listen 80 default_server;
+    listen 443 ssl default_server;
+    server_name _;
+    return 444;
+}
+```
+
+橙云部署时，源站防火墙建议**仅放行 [Cloudflare IP 段](https://www.cloudflare.com/ips/)**，避免绕过 CDN 直连。
+
+---
+
+## 双层 Host 防护
+
+生产环境建议反代层与应用层**互补**，而非二选一：
+
+| 层级 | 作用 |
+| ---- | ---- |
+| **Nginx default server** | 拒绝裸 IP、`pages.dev` 等未在 `server_name` 中声明的 Host |
+| **PicHost 中间件（v1.2.x+）** | 双域名开启时，非 site/image 的 Host 应用层返回 404（开发环境 `localhost` / `127.0.0.1` 例外） |
+
+即使应用层已拦截第三 Host，仍建议在反代配置 default server — 减少无效流量到达 PicHost。
+
+---
+
+## X-Forwarded-Host 说明
+
+PicHost 在反代场景会参考 `X-Forwarded-Host` 识别请求域名，但**不能无条件信任**该 Header（客户端可伪造）。因此：
+
+- 不要让 `6892` 对公网裸露
+- 确保只有可信反代能到达应用
+- 首选方案仍是让 `Host` 从第一跳起就保持正确
+
+---
+
+## 排查：图片域能看到后台？
+
+**先查反代链，不要先清 CF 缓存。**
+
+缓存问题通常表现为旧 JS/CSS/图片或偶发 404；若图片域能**稳定**访问 `/`、`/login`、`/settings`，几乎都是 Host 被改写。
+
+```text
+① 浏览器实际域名？
+② 是否经过 Pages / Worker / 优选反代？
+③ 代理最终 fetch 的 URL？
+④ 是否 fetch 到 admin.example.com？
+⑤ 1Panel / PicHost 最终收到的 Host？
+```
+
+---
+
+## 相关
+
+- [双域名分离](./domain-separation.md) — 中间件行为与本地测试
+- [反向代理](./reverse-proxy.md) — 单域名与源站加固
+- [环境变量](./configuration.md) — `SITE_BASE_URL`、`IMAGE_BASE_URL`
+- [常见问题](./faq.md) — Pages / Workers 与第三 Host

docs-site/guide/configuration.md

@@ -0,0 +1,115 @@
+PicHost 支持通过环境变量（Docker / `.env`）与后台 **设置** 页配置。管理员在 **设置与偏好**（`/settings`）左侧切换 **基础设置**、**域名与路径**、**访问控制**、**操作日志**；多数项 **SQLite 优先**；部分项环境变量可覆盖或锁定后台编辑。
+
+## 优先级总览
+
+| 配置项 | 优先级（高 → 低） | 环境变量覆盖后台 |
+| ------ | ----------------- | ---------------- |
+| API 上传 Token | 环境变量 → SQLite | **是**（设了则后台无法重新生成） |
+| WebP 质量 | SQLite → 环境变量 → 默认 80 | 否（未在 DB 存时读 env） |
+| 防盗链白名单 | SQLite → 环境变量 | 否 |
+| 网站 / 图片域名 | SQLite → 环境变量（设置 API 配置值）；直链生成另用 `effective*` 或请求 origin | 否 |
+| 简短图片链接 | SQLite → 环境变量 → 默认 false | 否 |
+| 按年/月分组存储 | SQLite → 环境变量 → 默认 true | 否 |
+| 全局自动删除天数 | SQLite → 环境变量 → 默认 0 | 否 |
+| 登录人机验证 | SQLite（设置 → 访问控制） | 否 |
+
+## 变量说明
+
+### `API_UPLOAD_TOKEN`
+
+外部脚本上传 Token（Twikoo / 油猴 / 博客）。请求头：`Auth-Token: <token>`；表单上传仍可用 `token` 字段。
+
+- 未配置时可在后台 **API** 页生成
+- **环境变量一旦设置，优先级最高**，后台显示「由环境变量覆盖」且无法重新生成
+- 别名：`NUXT_API_UPLOAD_TOKEN`
+
+### `ALLOWED_REFERER_HOSTS`
+
+防盗链白名单，逗号分隔域名。自身域名自动放行。可选；不填可在设置页配置。若环境变量有值且 SQLite 未存，则使用环境变量。
+
+### `SITE_BASE_URL` / `IMAGE_BASE_URL`
+
+- **网站域名**：管理后台、API、Twikoo 上传入口
+- **图片域名**：复制链接与直链使用的公网地址
+
+双域名分离需两者主机名不同，详见 [双域名分离](./domain-separation.md) 与 [Cloudflare / CF 优选部署](./cloudflare-deployment.md)。填写后须与反代 `server_name` 一致；**勿**通过 `localhost`、IP 或未配置的域名访问生产后台。
+
+在后台 **设置** 中保存时须显式勾选「启用后台与图片域名分离」，并同时填写两个域名；关闭双域名会清除网站域配置（需确认）。设置 API 返回的配置值与「当前生效」直链地址已分离，详见 [更新日志](./changelog.md#1-2-2-2026-08-30)。
+
+### `HIDE_FOLDER_IN_URL`
+
+`true` 时使用简短图片链接（仅域名 + 文件名，如 `img.example.com/a8K3xP.webp`）；`false` 时保留日期或自定义目录（如 `img.example.com/2026/08/a8K3xP.webp`）。对外 URL **不会** 暴露内部 `images/` 前缀；旧版含 `images/` 的直链仍兼容。
+
+### `STORAGE_USE_DATE_PATH` / `STORAGE_LAYOUT`
+
+- `STORAGE_USE_DATE_PATH=true`（默认）或 `STORAGE_LAYOUT=date`：新图保存为 `images/年/月/随机ID.webp`
+- `false` 或 `STORAGE_LAYOUT=flat`：保存为 `images/随机ID.webp`
+
+也可在设置页切换。
+
+### `DATA_DIR`
+
+图片与 SQLite 根目录。默认 `./data`，容器内为 `/data`。
+
+### `WEBP_QUALITY`
+
+服务端 WebP 压缩质量 1–100，默认 **80**。
+
+### `AUTO_DELETE_DAYS`
+
+全局自动删除超过 N 天的图片，`0` 表示关闭。启用后仅影响**之后新上传**的图片（与按用户策略一致）。也可在设置页配置。
+
+### `DEV_BYPASS_ACCESS`
+
+仅本地开发：`true` 绕过登录验证。生产环境勿用。
+
+### 登录人机验证（仅后台设置）
+
+在 **设置 → 访问控制** 配置，存入 SQLite，无对应环境变量：
+
+| 方式 | 说明 |
+| ---- | ---- |
+| **本地滑块**（默认） | 无需第三方服务 |
+| **Cloudflare Turnstile** | 填写 Site Key 与 Secret Key |
+| **Cap** | 填写 API Endpoint 与 Secret |
+
+登录与注册共用同一验证方式。若第三方配置错误导致无法登录，执行 `docker exec pichost slider`（或 `npm run slider`）恢复为本地滑块。
+
+### 存储后端（可选）
+
+管理员通常在 **存储** 页添加后端；也可用环境变量引导（如 `STORAGE_BACKEND=s3` 与 `S3_*`）。详见 [存储](./storage.md)。
+
+## Docker Compose 示例
+
+```yaml
+services:
+  pichost:
+    image: muxui/pichost:latest
+    ports:
+      - "6892:6892"
+    volumes:
+      - ./data:/data
+    environment:
+      SITE_BASE_URL: https://admin.example.com
+      IMAGE_BASE_URL: https://pic.example.com
+      API_UPLOAD_TOKEN: your-secret-token
+      WEBP_QUALITY: "85"
+```
+
+修改环境变量后需 **重启容器** 才能生效（Token、质量等读取在启动时或请求时按实现读取）。
+
+## 与后台设置对照
+
+| 后台设置项 | 对应环境变量 |
+| ---------- | ------------ |
+| API Token | `API_UPLOAD_TOKEN` |
+| 防盗链 | `ALLOWED_REFERER_HOSTS` |
+| 网站域名 | `SITE_BASE_URL` |
+| 图片域名 | `IMAGE_BASE_URL` |
+| 隐藏目录前缀 | `HIDE_FOLDER_IN_URL` |
+| 按年/月分组 | `STORAGE_USE_DATE_PATH` / `STORAGE_LAYOUT` |
+| WebP 质量 | `WEBP_QUALITY` |
+| 自动删除 | `AUTO_DELETE_DAYS` |
+| 登录验证 | （仅后台 **设置 → 访问控制**） |
+
+完整模板见仓库根目录 [`.env.example`](https://github.com/O96u/PicHost/blob/main/.env.example)。