release: v1.1.2 — activity logs, storage filter, upload rate limits

Bump version and changelog; fix lint issues before release.
feat: activity logs, gallery storage filter, and upload rate limits
2026-08-26 17:14:50 +08:00 · 2026-08-26 17:09:38 +08:00 · 2026-08-26 15:38:56 +08:00 · 2026-08-26 14:49:46 +08:00 · 2026-08-25 16:11:50 +08:00 · 2026-08-24 10:41:52 +08:00
108 changed files with 9630 additions and 1275 deletions
@@ -2,22 +2,30 @@ name: Publish Docker image

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

 permissions:
  contents: read
-  packages: write

 env:
  IMAGE_NAME: pichost

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

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

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

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

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

 # 本地 Git hooks 模板（仅安装在 .git/hooks/，不进仓库）
 git-hooks/
+
+# 飞牛 fpk 工程与产物（仅本地维护，不进仓库）
+scripts/fpk/
+dist-fpk/
@@ -2,6 +2,95 @@

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

+## [1.1.2] - 2026-08-26
+
+### 新增
+
+- 操作日志页（`/logs`）：记录上传/删除，管理员可查看全部用户并筛选
+- 图库记录支持按存储后端筛选
+- 上传 IP / API Token 限流（15 分钟窗口）
+
+### 改进
+
+- 操作日志记录存储后端；图库卡片可展示存储来源
+- 存储筛选下拉固定「本地磁盘」排在第二位
+- 系统设置页版本号链接至 GitHub Releases
+
+### 修复
+
+- 修复删除存储后端后确认弹窗闪出空名称
+
+## [1.1.1] - 2026-08-26
+
+### 修复
+
+- 移除启动时自动创建的空白「S3 兼容存储」占位；升级后自动清理旧占位记录
+- 修复管理页切换路由时反复闪现「正在验证登录状态」
+- 修复静默会话校验后设置 / 统计 / API 页不加载数据
+
+### 改进
+
+- Docker 日志：4xx/5xx 分级输出，记录错误原因与堆栈；上传/启动任务失败写入详细错误
+
+## [1.1.0] - 2026-08-26
+
+### 新增
+
+- S3 兼容对象存储后端（R2 / AWS S3 / 腾讯云 COS / 阿里云 OSS）
+- `storage_backends` + `images` 索引表，列表/搜索/统计改查 SQLite
+- 混合直链：`proxy`（默认，PicHost 代理）与 `public`（302 到 CDN）
+- 管理员 `/storage` 存储管理页：多后端卡片、用量条、添加/编辑/删除云存储实例
+- 可选环境变量覆盖存储配置（`STORAGE_BACKEND`、`S3_*`）
+
+### 改进
+
+- 启动时自动将本地磁盘图片扫描迁入 `images` 索引（幂等）
+- 上传/删除/直链/auto-delete 按 `backend_id` 路由到对应后端
+
+## [1.0.4] - 2026-08-25
+
+### 新增
+
+- 密码输入框支持显示/隐藏切换（`PasswordInput` 组件，含无障碍文案）
+
+### 改进
+
+- 遗留 `ADMIN_SECRET` 部署：`/setup`、`/register` 路由与 `needsMigration` 检测对齐
+- 合并重复的密码不一致 i18n 文案；移除未使用的 `jose` 依赖
+
+### 修复
+
+- 修复 `PasswordInput` 导致 CI typecheck 失败
+
+## [1.0.3] - 2026-08-23
+
+### 修复
+
+- 修复 CI typecheck 失败（移动端菜单、i18n、统计页图库刷新）
+- Docker 构建：arm64 改用原生 ARM Runner，避免 QEMU 下 `npm ci` 极慢
+- Docker 构建：启用 npm 缓存挂载，加快依赖安装
+
+## [1.0.2] - 2026-08-23
+
+### 新增
+
+- 中英文界面（`@nuxtjs/i18n`），语言切换与主题切换独立菜单
+- 移动端导航：汉堡菜单 + 分组用户菜单（语言 / 外观 / 账户）
+- Docker 忘记密码：`docker exec pichost reset-password`（随机密码，见 `server/cli/`）
+
+### 改进
+
+- 统计页工具栏与图库布局（桌面单行、移动端适配）
+- 上传卡片视觉优化（背景图、插图、悬停边框动效）
+- Logo 与上传区图片压缩，减小体积
+
+## [1.0.1] - 2026-08-22
+
+### 修复
+
+- 系统设置页底部显示当前应用版本号
+- 修复移动端上传偏好面板内容被裁剪、无法完整展示的问题
+
 ## [1.0.0] - 2026-08-22

 ### 新增
@@ -24,6 +113,13 @@

 ### 路线图

- **v1.1.0**（计划中）：S3、Cloudflare R2 及更多对象存储后端
+- **v1.1.2**（当前 `main`）：操作日志、图库存储筛选、上传限流

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

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

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

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

 COPY --from=build /app/.output ./.output
+COPY server/cli/reset-password.mjs ./server/cli/reset-password.mjs
+COPY docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh

 EXPOSE 6892
 VOLUME /data

-CMD ["node", ".output/server/index.mjs"]
+ENTRYPOINT ["/docker-entrypoint.sh"]
@@ -6,7 +6,7 @@

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

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

 <p align="center">
  <a href="https://github.com/O96u/PicHost/blob/main/package.json"><img src="https://img.shields.io/github/package-json/v/O96u/PicHost?style=flat-square&color=22c55e" alt="version" /></a>
@@ -17,6 +17,7 @@
 </p>

 <p align="center">
+  <a href="#branches">Branches</a> ·
  <a href="#quick-start">Quick Start</a> ·
  <a href="#screenshots">Screenshots</a> ·
  <a href="#features">Features</a> ·
@@ -27,26 +28,43 @@

 ---

+## Branches
+
+| Branch | Notes |
+| ------ | ----- |
+| [**main**](https://github.com/O96u/PicHost/tree/main) (default) | **v1.1.2** — local disk + multi-backend object storage (R2 / COS / OSS / AWS), [`/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

-| Login | Upload |
-|:---:|:---:|
-| ![Login](docs/screenshots/login.png) | ![Upload](docs/screenshots/upload.png) |
+|                 Upload                 |              Storage               |
+| :------------------------------------: | :--------------------------------: |
+| ![Upload](docs/screenshots/upload.png) | ![Storage](docs/screenshots/storage.png) |

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

 ## Features

 - **Drag, click, or Ctrl+V paste** to upload; admins can use custom `folder` paths
 - **Server-side WebP** (sharp), Referer hotlink protection, configurable public base URL
 - **Multi-user** — username/password login; optional registration; users see only their images
- **Upload preferences** (card flip UI): client-side compression, auto-copy links, per-user auto-delete
+- **Upload preferences** (home card flip): client-side compression, auto-copy links, per-user auto-delete
+- **Multi-backend storage**: local disk + S3-compatible (Cloudflare R2 / Tencent COS / Alibaba OSS / AWS S3); admins manage backends at **Storage** (`/storage`)
+- **Hybrid URLs**: `proxy` (same-origin via PicHost) or `public` (302 to CDN / bucket URL)
 - **Gallery** — browse, search, batch delete; admin sees uploader badges
 - **Stats** — upload/delete metrics, folder breakdown; admin sees registered user count
 - **API** — global token (admin) + per-user tokens; in-app cURL snippets
@@ -58,12 +76,26 @@
 ### Docker (recommended)

 ```bash
-git clone https://github.com/O96u/PicHost.git
-cd PicHost
-docker compose up -d
+docker run -d \
+  --name pichost \
+  -p 6892:6892 \
+  -v ./data:/data \
+  --restart unless-stopped \
+  muxui/pichost:latest
 ```

-Default port: **6892**. Complete the setup wizard in the browser. Image: `muxui/pichost:latest` (fallback: `ghcr.io/o96u/pichost:latest`).
+Default port: **6892**. Open `http://<host>:6892` in your browser and complete the setup wizard.
+
+**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. 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

@@ -75,47 +107,28 @@ npm run dev

 Open `http://localhost:3000/setup` to create the admin account. Data defaults to `./data`.

-### Legacy migration
-
-If you only had `ADMIN_SECRET` and no user table, log in with the secret once and follow the migration wizard.
-
 ## Tech Stack

-| Layer | Technology |
-|-------|------------|
-| Frontend | Nuxt 4, Vue 3, Nuxt UI 4, Tailwind CSS 4 |
-| Backend | Nitro (Node.js), SQLite |
-| Images | sharp (WebP transcoding & compression) |
-| Auth | Session cookie, scrypt password hashing, API tokens |
-| Storage | Local disk (`DATA_DIR`) |
-| Deploy | Docker (amd64 / arm64), docker compose |
-| Tests | Vitest |
-
-## Environment variables
-
-| Variable | Description |
-|----------|-------------|
-| `API_UPLOAD_TOKEN` | Global upload token (`Auth-Token` header); can be generated in the API page |
-| `ALLOWED_REFERER_HOSTS` | Hotlink allowlist (comma-separated hostnames) |
-| `IMAGE_BASE_URL` | Public base URL for image links |
-| `WEBP_QUALITY` | Server WebP quality 1–100, default 80 |
-| `AUTO_DELETE_DAYS` | Global auto-delete days (0 = off); admin + orphan images only |
-| `DATA_DIR` | Data directory, default `/data` (container) or `./data` (local) |
-| `ADMIN_SECRET` | Legacy v1.0 migration only |
-| `DEV_BYPASS_ACCESS` | Dev only — bypass auth (never in production) |
-
-Environment variables override database settings. See [`.env.example`](.env.example).
+| 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 |
+| 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.

@@ -123,22 +136,22 @@ Regular users are limited to the `images/` folder; custom `folder` requires admi

 ```
 /data
-├── pichost.db          # SQLite: users, sessions, settings, logs
-├── images/             # Default upload folder
+├── 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`. Back up the entire `/data` directory.
+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 |
+| 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:

@@ -153,11 +166,11 @@ 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` |
+| Setting           | Value                               |
+| ----------------- | ----------------------------------- |
+| `IMAGE_CDN`       | `easyimage`                         |
+| `IMAGE_CDN_URL`   | `https://your-domain/api/index.php` |
+| `IMAGE_CDN_TOKEN` | Same as `API_UPLOAD_TOKEN`          |

 ## Reverse proxy

@@ -178,11 +191,21 @@ npm test             # Unit tests

 ## Roadmap

-| Version | Plan |
-|---------|------|
-| **v1.0.0** | Local storage, multi-user, API, Twikoo (current) |
-| **v1.1.0** | S3, Cloudflare R2, and more object storage backends |
+| Version    | Plan                                                           |
+| ---------- | -------------------------------------------------------------- |
+| **v1.1.2** | Activity logs, gallery storage filter, upload rate limits (current `main`) |
+| **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

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

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

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

 <p align="center">
  <a href="https://github.com/O96u/PicHost/blob/main/package.json"><img src="https://img.shields.io/github/package-json/v/O96u/PicHost?style=flat-square&color=22c55e" alt="version" /></a>
@@ -17,6 +17,7 @@
 </p>

 <p align="center">
+  <a href="#分支">分支</a> ·
  <a href="#快速开始">快速开始</a> ·
  <a href="#界面预览">预览</a> ·
  <a href="#特性">特性</a> ·
@@ -27,26 +28,43 @@

 ---

+## 分支
+
+| 分支 | 说明 |
+| ---- | ---- |
+| [**main**](https://github.com/O96u/PicHost/tree/main)（默认） | **v1.1.2** 主线：本地磁盘 + 多对象存储后端（R2 / COS / OSS / AWS）、[`/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
+```
+
+---
+
 ## 界面预览

-| 登录 | 上传 |
-|:---:|:---:|
-| ![登录](docs/screenshots/login.png) | ![上传](docs/screenshots/upload.png) |
+|                 上传                  |                存储管理                 |
+| :-----------------------------------: | :-------------------------------------: |
+| ![上传](docs/screenshots/upload.png) | ![存储](docs/screenshots/storage.png) |

-| 上传偏好 | 统计与图库 |
-|:---:|:---:|
-| ![上传偏好](docs/screenshots/preferences.png) | ![统计](docs/screenshots/stats.png) |
-
-| 系统设置 | |
-|:---:|:---:|
-| ![设置](docs/screenshots/settings.png) | |
+|             统计与图库              |                系统设置                 |
+| :---------------------------------: | :-------------------------------------: |
+| ![统计](docs/screenshots/stats.png) | ![设置](docs/screenshots/settings.png) |

 ## 特性

 - **拖拽 / 点击 / Ctrl+V 粘贴**上传；管理员可自定义 `folder` 目录
 - **服务端 WebP 压缩**（sharp）、Referer 防盗链、可配置访问域名
 - **多用户**：账号密码登录；管理员可开放注册；普通用户仅见自己的图片
- **上传偏好**（卡片翻转设置）：客户端预压缩、自动复制链接、按用户自动删除
+- **上传偏好**（首页卡片翻转）：客户端预压缩、自动复制链接、按用户自动删除
+- **多后端存储**：本地磁盘 + S3 兼容（Cloudflare R2 / 腾讯云 COS / 阿里云 OSS / AWS S3）；管理员在 **存储**（`/storage`）页管理，新上传写入默认后端
+- **混合直链**：`proxy`（PicHost 同源代理）或 `public`（302 到 CDN / 桶公网地址）
 - **图库**：浏览、搜索、批量删除；管理员可查看上传者标签
 - **统计**：上传/删除趋势、目录分布；管理员额外显示注册用户数量
 - **API**：全局 Token（管理员）+ 每用户个人 Token；后台可复制 cURL
@@ -58,12 +76,31 @@
 ### Docker（推荐）

 ```bash
-git clone https://github.com/O96u/PicHost.git
-cd PicHost
-docker compose up -d
+docker run -d \
+  --name pichost \
+  -p 6892:6892 \
+  -v ./data:/data \
+  --restart unless-stopped \
+  muxui/pichost:latest
 ```

-默认端口 **6892**。浏览器打开后按引导创建管理员即可。镜像：`muxui/pichost:latest`（备用 `ghcr.io/o96u/pichost:latest`）。
+默认端口 **6892**。浏览器打开 `http://<主机IP>:6892`，按引导创建管理员即可。
+
+**忘记密码**（需能执行 `docker exec`，相当于服务器权限）：
+
+```bash
+# 无参数：重置管理员（仅当系统中只有一个管理员时）
+docker exec pichost reset-password
+
+# 指定用户名：可重置管理员或普通用户
+docker exec pichost reset-password 用户名
+```
+
+终端会打印随机新密码；用户不存在时会报错。登录后请到「修改密码」更换。
+
+本地：`npm run reset-password` 或 `npm run reset-password -- 用户名`
+
+已克隆仓库时也可用 `docker compose up -d`（见仓库内 `docker-compose.yml`）。

 ### 本地开发

@@ -75,47 +112,28 @@ npm run dev

 访问 `http://localhost:3000/setup` 创建管理员；数据目录默认 `./data`。

-### 遗留部署迁移
-
-若旧版仅配置了 `ADMIN_SECRET`、尚无用户表，可用密钥登录一次，Web 引导迁移为账号密码。
-
 ## 技术栈

-| 层级 | 技术 |
-|------|------|
-| 前端 | Nuxt 4、Vue 3、Nuxt UI 4、Tailwind CSS 4 |
-| 后端 | Nitro（Node.js）、SQLite |
-| 图片处理 | sharp（WebP 转码与压缩） |
-| 鉴权 | Session Cookie、scrypt 密码哈希、API Token |
-| 存储 | 本地磁盘（`DATA_DIR`） |
-| 部署 | Docker（amd64 / arm64）、docker compose |
-| 测试 | Vitest |
-
-## 环境变量
-
-| 变量 | 说明 |
-|------|------|
-| `API_UPLOAD_TOKEN` | 全局上传 Token（`Auth-Token` 头）；未配置可在后台 API 页生成 |
-| `ALLOWED_REFERER_HOSTS` | 防盗链白名单（逗号分隔 hostname） |
-| `IMAGE_BASE_URL` | 图片直链公网域名（反代时建议填写） |
-| `WEBP_QUALITY` | 服务端 WebP 质量 1–100，默认 80 |
-| `AUTO_DELETE_DAYS` | 全局自动删除天数（0 关闭）；仅影响管理员及无归属历史图 |
-| `DATA_DIR` | 数据目录，默认 `/data`（容器）或 `./data`（本地） |
-| `ADMIN_SECRET` | 仅遗留 v1.0 迁移，新安装不需要 |
-| `DEV_BYPASS_ACCESS` | 开发用，跳过登录（生产勿开） |
-
-环境变量优先级高于后台设置。详见 [`.env.example`](.env.example)。
+| 层级     | 技术                                       |
+| -------- | ------------------------------------------ |
+| 前端     | 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 即可访问 |
+| 场景                       | 鉴权                 | 图片归属 / 可见范围        |
+| -------------------------- | -------------------- | -------------------------- |
+| 网页上传                   | 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 可用。

@@ -123,22 +141,22 @@ npm run dev

 ```
 /data
-├── pichost.db          # SQLite：用户、会话、设置、操作日志
-├── images/             # 默认上传目录
+├── pichost.db          # SQLite：用户、会话、设置、storage_backends、images 索引
+├── images/             # 默认上传目录（本地后端时）
 ├── blog/               # 管理员自定义 folder 示例
 └── twikoo/             # Twikoo 评论图片
 ```

-路径规则：`目录/年/月/随机ID.webp` + 同名 `.meta.json`。备份整个 `/data` 即可。
+路径规则：`目录/年/月/随机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 |
+| 方法   | 路径                 | 说明                   |
+| ------ | -------------------- | ---------------------- |
+| POST   | `/api/images/upload` | 上传图片               |
+| GET    | `/api/images`        | 分页列表               |
+| DELETE | `/api/images`        | 删除单张（`key`）      |
+| POST   | `/api/index.php`     | Twikoo / EasyImage 2.0 |

 上传示例：

@@ -153,11 +171,11 @@ curl -X POST "https://pic.example.com/api/images/upload" \

 ## Twikoo

-| 配置项 | 值 |
-|--------|-----|
-| `IMAGE_CDN` | `easyimage` |
-| `IMAGE_CDN_URL` | `https://你的域名/api/index.php` |
-| `IMAGE_CDN_TOKEN` | 与 `API_UPLOAD_TOKEN` 相同 |
+| 配置项            | 值                               |
+| ----------------- | -------------------------------- |
+| `IMAGE_CDN`       | `easyimage`                      |
+| `IMAGE_CDN_URL`   | `https://你的域名/api/index.php` |
+| `IMAGE_CDN_TOKEN` | 与 `API_UPLOAD_TOKEN` 相同       |

 ## 反向代理

@@ -178,11 +196,21 @@ npm test             # 单元测试

 ## 路线图

-| 版本 | 计划 |
-|------|------|
-| **v1.0.0** | 本地存储、多用户、API、Twikoo（当前） |
-| **v1.1.0** | S3、Cloudflare R2 等对象存储后端 |
+| 版本       | 说明                                              |
+| ---------- | ------------------------------------------------- |
+| **v1.1.2** | 操作日志、图库存储筛选、上传限流（当前 main）     |
+| **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

 [MIT](LICENSE)
+
+## 友链
+
+[LINUX DO](https://linux.do/)
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+const { t } = useI18n()
+
 useHead({
-  title: 'PicHost - 个人图床',
+  title: () => t('app.title'),
  meta: [
-    { name: 'description', content: '个人自用的轻量图床系统' }
+    { name: 'description', content: () => t('app.description') }
  ]
 })
 </script>
@@ -26,19 +26,64 @@
  transform: rotateY(180deg);
 }

+@media (max-width: 639px) {
+  .upload-card-flip.is-flipped {
+    perspective: none;
+  }
+
+  .upload-card-flip.is-flipped .upload-card-flip-inner {
+    transform: none;
+  }
+
+  .upload-card-flip .upload-card-face--back {
+    display: none;
+  }
+
+  .upload-card-flip.is-flipped .upload-card-face--front {
+    display: none;
+  }
+
+  .upload-card-flip.is-flipped .upload-card-face--back {
+    display: block;
+    position: static;
+    transform: none;
+  }
+
+  .upload-card-flip.is-flipped .upload-card-surface {
+    min-height: 0;
+  }
+}
+
 .upload-card-surface {
  min-height: 20.5rem;
  border-radius: 1rem;
  border-width: 2px;
  border-style: dashed;
-  border-color: var(--ui-border);
-  background-color: color-mix(in oklab, var(--ui-bg-elevated) 50%, transparent);
+  background-color: color-mix(in oklab, var(--ui-bg-elevated) 72%, transparent);
  padding: 2.5rem;
+  transition:
+    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.upload-card-surface:not(.upload-card-surface--panel) {
+  border-color: var(--ui-border);
+}
+
+.upload-card-surface:not(.upload-card-surface--panel):hover,
+.upload-card-surface:not(.upload-card-surface--panel).upload-card-surface--active {
+  border-color: var(--ui-primary);
+  background-color: color-mix(in oklab, var(--ui-primary) 10%, var(--ui-bg-elevated) 72%);
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--ui-primary) 25%, transparent),
+    0 8px 24px color-mix(in oklab, var(--ui-primary) 18%, transparent);
 }

 .upload-card-surface--panel {
  border-style: solid;
+  border-color: var(--ui-border);
  background-color: var(--ui-bg-elevated);
+  background-image: none;
  box-shadow: var(--ui-shadow-sm);
  padding: 0;
 }
@@ -2,13 +2,10 @@
 import logoLight from '~/assets/image/logo-light.png'
 import logoDark from '~/assets/image/logo-dark.png'

-const emit = defineEmits<{
-  success: []
-}>()
-
 const router = useRouter()
 const { login, fetchStatus, authStatus } = useAuth()
 const toast = useToast()
+const { t } = useI18n()

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

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

        <UButton
          type="submit"
-          label="登录"
+          :label="t('auth.login')"
          icon="i-lucide-log-in"
          size="lg"
          block
@@ -176,18 +167,18 @@ async function submit() {
          v-if="allowRegistration"
          class="text-center text-sm text-muted"
        >
-          没有账号？
+          {{ t('auth.noAccount') }}
          <NuxtLink
            to="/register"
            class="text-primary hover:underline"
          >
-            注册
+            {{ t('auth.register') }}
          </NuxtLink>
        </p>
      </form>

      <p class="mt-6 text-center text-xs leading-relaxed text-dimmed">
-        未登录时无法访问上传和管理功能
+        {{ t('auth.loginFooter') }}
      </p>
    </div>
  </div>
@@ -4,87 +4,63 @@ import logoLight from '~/assets/image/logo-light.png'
 import logoDark from '~/assets/image/logo-dark.png'

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

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

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

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

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

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

          <ClientOnly>
-            <UDropdownMenu
-              v-if="user"
-              :items="userMenuItems"
-            >
-              <UButton
-                variant="ghost"
-                color="neutral"
-                size="sm"
-                class="max-w-[10rem] gap-1.5"
-              >
-                <UIcon
-                  name="i-lucide-user"
-                  class="size-4 shrink-0"
+            <div class="flex shrink-0 items-center gap-0.5 sm:gap-1">
+              <nav class="hidden items-center gap-1 sm:flex">
+                <UButton
+                  v-for="item in navItems"
+                  :key="item.to"
+                  :to="item.to"
+                  size="sm"
+                  :variant="isNavActive(item.to) ? 'soft' : 'ghost'"
+                  :color="isNavActive(item.to) ? 'primary' : 'neutral'"
+                  :icon="item.icon"
+                  :label="item.label"
                />
-                <span class="truncate">{{ user.username }}</span>
-                <UIcon
-                  name="i-lucide-chevron-down"
-                  class="size-3.5 shrink-0 opacity-60"
+              </nav>
+
+              <div class="mx-1 hidden h-5 w-px bg-muted sm:block" />
+
+              <div class="hidden items-center gap-0.5 sm:flex">
+                <LocaleMenu />
+                <ThemeMenu />
+              </div>
+
+              <div class="flex items-center gap-0.5 sm:hidden">
+                <MobileUserMenu
+                  v-if="user"
+                  v-model:open="mobileUserOpen"
                />
-              </UButton>
-            </UDropdownMenu>
-            <UDropdownMenu :items="themeItems">
-              <UButton
-                :icon="themeIcon"
-                variant="ghost"
-                color="neutral"
-                size="sm"
-                aria-label="切换主题"
-              />
-            </UDropdownMenu>
+                <MobileNavMenu
+                  v-model:open="mobileNavOpen"
+                  :items="navItems"
+                />
+              </div>
+
+              <div class="hidden sm:block">
+                <UDropdownMenu
+                  v-if="user"
+                  :items="desktopUserMenuItems"
+                >
+                  <UButton
+                    variant="ghost"
+                    color="neutral"
+                    size="sm"
+                    class="max-w-[10rem] gap-1.5"
+                  >
+                    <UIcon
+                      name="i-lucide-user"
+                      class="size-4 shrink-0"
+                    />
+                    <span class="truncate">{{ user.username }}</span>
+                    <UIcon
+                      name="i-lucide-chevron-down"
+                      class="size-3.5 shrink-0 opacity-60"
+                    />
+                  </UButton>
+                </UDropdownMenu>
+              </div>
+            </div>
            <template #fallback>
              <div class="size-8" />
            </template>
@@ -0,0 +1,6 @@
+<template>
+  <div class="flex items-center gap-1">
+    <LocaleMenu />
+    <ThemeMenu />
+  </div>
+</template>
@@ -13,6 +13,7 @@ const emit = defineEmits<{
 }>()

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

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

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

+const { t } = useI18n()
+
+const description = computed(() => t('delete.confirmDesc', { count: props.count }))
+
 function close() {
  emit('update:open', false)
 }
@@ -22,20 +26,20 @@ function confirm() {
 <template>
  <UModal
    :open="open"
-    title="确认删除"
-    :description="`确定要删除选中的 ${count} 张图片吗？此操作不可恢复。`"
+    :title="t('delete.confirmTitle')"
+    :description="description"
    @update:open="emit('update:open', $event)"
  >
    <template #footer>
      <div class="flex justify-end gap-2">
        <UButton
-          label="取消"
+          :label="t('common.cancel')"
          color="neutral"
          variant="outline"
          @click="close"
        />
        <UButton
-          label="确认删除"
+          :label="t('delete.confirm')"
          color="error"
          :loading="loading"
          @click="confirm"
@@ -9,9 +9,13 @@ const props = withDefaults(defineProps<{
  deleting?: boolean
  selectable?: boolean
  showKey?: boolean
+  showStorage?: boolean
+  compact?: boolean
 }>(), {
  selectable: true,
-  showKey: true
+  showKey: true,
+  showStorage: false,
+  compact: false
 })

 const emit = defineEmits<{
@@ -20,18 +24,19 @@ const emit = defineEmits<{
 }>()

 const { formatFileSize } = useFileSize()
+const { t, locale } = useI18n()
 const imageError = ref(false)
 const copyFormat = ref<CopyFormat>('url')

-const copyFormatItems = [
-  { label: '直链', value: 'url' as const },
-  { label: 'Markdown', value: 'markdown' as const },
-  { label: 'HTML', value: 'html' as const }
-]
+const copyFormatItems = computed(() => [
+  { label: t('copy.url'), value: 'url' as const },
+  { label: t('copy.markdown'), value: 'markdown' as const },
+  { label: t('copy.html'), value: 'html' as const }
+])

 const uploadedLabel = computed(() => {
  try {
-    return new Date(props.image.uploadedAt).toLocaleString('zh-CN', { hour12: false })
+    return new Date(props.image.uploadedAt).toLocaleString(locale.value, { hour12: false })
  } catch {
    return props.image.uploadedAt
  }
@@ -51,14 +56,18 @@ const previewValue = computed(() => {
 const copySuccessTitle = computed(() => {
  switch (copyFormat.value) {
    case 'markdown':
-      return '已复制 Markdown'
+      return t('copy.copiedMarkdown')
    case 'html':
-      return '已复制 HTML'
+      return t('copy.copiedHtml')
    default:
-      return '已复制直链'
+      return t('copy.copiedUrl')
  }
 })

+const storageIcon = computed(() =>
+  props.image.storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
+)
+
 function toggleSelected(value: boolean | 'indeterminate') {
  emit('update:selected', value === true)
 }
@@ -79,7 +88,7 @@ function toggleSelected(value: boolean | 'indeterminate') {
        v-else
        class="flex h-full items-center justify-center text-sm text-muted"
      >
-        预览失败
+        {{ t('image.previewFailed') }}
      </div>
      <div
        v-if="selectable"
@@ -96,18 +105,18 @@ function toggleSelected(value: boolean | 'indeterminate') {
          color="error"
          variant="solid"
          icon="i-lucide-trash-2"
-          aria-label="删除"
+          :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(100%-1rem)]"
+        class="absolute bottom-2 left-2 max-w-[calc(50%-0.5rem)]"
      >
        <span
          class="inline-flex max-w-full items-center gap-1 rounded-md bg-black/65 px-2 py-0.5 text-xs font-medium text-white shadow-sm backdrop-blur-sm"
-          :title="`上传者：${image.owner.username}`"
+          :title="t('image.uploader', { name: image.owner.username })"
        >
          <UIcon
            name="i-lucide-user"
@@ -116,9 +125,52 @@ function toggleSelected(value: boolean | 'indeterminate') {
          <span class="truncate">{{ image.owner.username }}</span>
        </span>
      </div>
+      <div
+        v-if="showStorage && image.storage"
+        class="absolute bottom-2 max-w-[calc(50%-0.5rem)]"
+        :class="image.owner ? 'right-2' : 'left-2'"
+      >
+        <span
+          class="inline-flex max-w-full items-center gap-1 rounded-md bg-black/65 px-2 py-0.5 text-xs font-medium text-white shadow-sm backdrop-blur-sm"
+          :title="t('image.storageBackend', { name: image.storage.name })"
+        >
+          <UIcon
+            :name="storageIcon"
+            class="size-3 shrink-0"
+          />
+          <span class="truncate">{{ image.storage.name }}</span>
+        </span>
+      </div>
    </div>

-    <div class="flex flex-1 flex-col gap-2 p-3">
+    <div
+      v-if="compact"
+      class="flex items-center gap-1.5 p-2 sm:hidden"
+    >
+      <div class="min-w-0 flex-1">
+        <p
+          class="truncate text-xs font-medium"
+          :title="image.originalName"
+        >
+          {{ image.originalName }}
+        </p>
+        <p class="text-[11px] text-muted">
+          {{ formatFileSize(image.size) }}
+        </p>
+      </div>
+      <CopyButton
+        icon="i-lucide-copy"
+        icon-only
+        :label="t('common.copy')"
+        :value="image.url"
+        :success-title="t('copy.copiedUrl')"
+      />
+    </div>
+
+    <div
+      class="flex flex-1 flex-col gap-2 p-3"
+      :class="{ 'hidden sm:flex': compact }"
+    >
      <p
        class="truncate text-sm font-medium"
        :title="image.originalName"
@@ -151,7 +203,7 @@ function toggleSelected(value: boolean | 'indeterminate') {
        />
        <CopyButton
          icon="i-lucide-copy"
-          label="复制"
+          :label="t('common.copy')"
          :value="previewValue"
          :success-title="copySuccessTitle"
        />
@@ -7,11 +7,16 @@ const props = withDefaults(defineProps<{
  deletingKeys: Set<string>
  selectable?: boolean
  showKey?: boolean
+  showStorage?: boolean
  emptyText?: string
+  dense?: boolean
+  compact?: boolean
 }>(), {
  selectable: true,
  showKey: true,
-  emptyText: '暂无图片'
+  showStorage: false,
+  dense: false,
+  compact: false
 })

 const emit = defineEmits<{
@@ -19,6 +24,10 @@ const emit = defineEmits<{
  'delete': [key: string]
 }>()

+const { t } = useI18n()
+
+const displayEmptyText = computed(() => props.emptyText ?? t('image.empty'))
+
 function updateSelection(key: string, selected: boolean) {
  const next = new Set(props.selectedKeys)
  if (selected) next.add(key)
@@ -30,7 +39,8 @@ function updateSelection(key: string, selected: boolean) {
 <template>
  <div
    v-if="items.length"
-    class="grid grid-cols-1 items-start gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+    class="grid items-start sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+    :class="dense ? 'grid-cols-2 gap-3' : 'grid-cols-1 gap-4'"
  >
    <ImageCard
      v-for="image in items"
@@ -40,6 +50,8 @@ function updateSelection(key: string, selected: boolean) {
      :deleting="deletingKeys.has(image.key)"
      :selectable="selectable"
      :show-key="showKey"
+      :show-storage="showStorage"
+      :compact="compact"
      @update:selected="updateSelection(image.key, $event)"
      @delete="emit('delete', image.key)"
    />
@@ -48,6 +60,6 @@ function updateSelection(key: string, selected: boolean) {
    v-else
    class="rounded-xl border border-dashed border-default py-16 text-center text-sm text-muted"
  >
-    {{ emptyText }}
+    {{ displayEmptyText }}
  </div>
 </template>
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import uploadCardBg from '~/assets/image/upload-card-bg.webp'
+import uploadCardHero from '~/assets/image/upload-card-hero.webp'
+
 const props = defineProps<{
  disabled?: boolean
 }>()
@@ -10,12 +13,10 @@ const emit = defineEmits<{

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

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

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

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

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

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

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

-const unitLabel = computed(() => props.unit ?? '条')
+const { t } = useI18n()
+
+const unitLabel = computed(() => props.unit ?? t('common.itemsUnit'))

 function goTo(target: number) {
  if (target < 1 || target > props.totalPages || target === props.page || props.loading) {
@@ -30,13 +32,13 @@ function goTo(target: number) {
      v-if="totalPages > 1"
      class="text-sm text-muted"
    >
-      第 {{ page }} / {{ totalPages }} 页 · 共 {{ total }} {{ unitLabel }}
+      {{ t('pagination.pageOf', { page, totalPages, total, unit: unitLabel }) }}
    </p>
    <p
      v-else
      class="text-sm text-muted"
    >
-      共 {{ total }} {{ unitLabel }}
+      {{ t('pagination.totalOnly', { total, unit: unitLabel }) }}
    </p>

    <div
@@ -47,7 +49,7 @@ function goTo(target: number) {
        icon="i-lucide-chevrons-left"
        variant="outline"
        size="sm"
-        aria-label="第一页"
+        :aria-label="t('pagination.first')"
        :disabled="page <= 1 || loading"
        @click="goTo(1)"
      />
@@ -55,7 +57,7 @@ function goTo(target: number) {
        icon="i-lucide-chevron-left"
        variant="outline"
        size="sm"
-        aria-label="上一页"
+        :aria-label="t('pagination.prev')"
        :disabled="page <= 1 || loading"
        @click="goTo(page - 1)"
      />
@@ -63,7 +65,7 @@ function goTo(target: number) {
        icon="i-lucide-chevron-right"
        variant="outline"
        size="sm"
-        aria-label="下一页"
+        :aria-label="t('pagination.next')"
        :disabled="page >= totalPages || loading"
        @click="goTo(page + 1)"
      />
@@ -71,7 +73,7 @@ function goTo(target: number) {
        icon="i-lucide-chevrons-right"
        variant="outline"
        size="sm"
-        aria-label="最后一页"
+        :aria-label="t('pagination.last')"
        :disabled="page >= totalPages || loading"
        @click="goTo(totalPages)"
      />
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false
+})
+
+const model = defineModel<string>({ default: '' })
+
+defineProps<{
+  id?: string
+  placeholder?: string
+  autocomplete?: string
+}>()
+
+const show = ref(false)
+const { t } = useI18n()
+</script>
+
+<template>
+  <UInput
+    :id="id"
+    v-model="model"
+    :type="show ? 'text' : 'password'"
+    :placeholder="placeholder"
+    :autocomplete="autocomplete"
+    size="lg"
+    class="w-full"
+    :ui="{ root: 'w-full', trailing: 'pe-1' }"
+    v-bind="$attrs"
+  >
+    <template #trailing>
+      <UButton
+        color="neutral"
+        variant="link"
+        size="sm"
+        :icon="show ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+        :aria-label="show ? t('auth.hidePassword') : t('auth.showPassword')"
+        :aria-pressed="show"
+        :aria-controls="id"
+        type="button"
+        @click="() => { show = !show }"
+      />
+    </template>
+  </UInput>
+</template>
+
+<style scoped>
+:deep(::-ms-reveal) {
+  display: none;
+}
+</style>
@@ -5,15 +5,17 @@ const props = defineProps<{
  password: string
 }>()

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const { themeIcon, themeMenuItems } = useAppearanceMenus()
+const { t } = useI18n()
+</script>
+
+<template>
+  <UDropdownMenu :items="themeMenuItems">
+    <UButton
+      :icon="themeIcon"
+      variant="ghost"
+      color="neutral"
+      size="sm"
+      :aria-label="t('theme.switch')"
+    />
+  </UDropdownMenu>
+</template>
@@ -20,6 +20,8 @@ const {
  loadPreferences
 } = useUploadPreferences()

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

-const copyFormatItems = [
-  { label: '直链', value: 'url' as const },
-  { label: 'Markdown', value: 'markdown' as const },
-  { label: 'HTML', value: 'html' as const }
-]
+const copyFormatItems = computed(() => [
+  { label: t('copy.url'), value: 'url' as const },
+  { label: t('copy.markdown'), value: 'markdown' as const },
+  { label: t('copy.html'), value: 'html' as const }
+])

 const clientQualityLevel = computed(() => {
-  if (clientWebpQuality.value >= 85) return '高质量'
-  if (clientWebpQuality.value >= 60) return '中等质量'
-  return '有损压缩'
+  if (clientWebpQuality.value >= 85) return t('preferences.qualityHigh')
+  if (clientWebpQuality.value >= 60) return t('preferences.qualityMedium')
+  return t('preferences.qualityLow')
 })

 function setCopyFormat(value: 'url' | 'markdown' | 'html') {
@@ -56,9 +58,11 @@ onMounted(() => {

 <template>
  <div
-    class="flex flex-col overflow-hidden"
+    class="flex flex-col overflow-hidden max-sm:overflow-visible"
    :class="
-      embedded ? '' : 'upload-card-surface upload-card-surface--panel h-full'
+      embedded
+        ? ''
+        : 'upload-card-surface upload-card-surface--panel max-sm:min-h-0 sm:h-full'
    "
  >
    <div
@@ -71,22 +75,22 @@ onMounted(() => {
        />
        <div class="min-w-0">
          <h2 class="text-base font-semibold">
-            上传偏好
+            {{ t('preferences.title') }}
          </h2>
          <p class="mt-0.5 text-xs text-muted">
-            浏览器本地与账号设置，仅影响您的上传体验
+            {{ t('preferences.subtitle') }}
          </p>
        </div>
      </div>
      <UButton
        v-if="!embedded"
-        label="返回"
+        :label="t('common.back')"
        icon="i-lucide-arrow-left"
        variant="ghost"
        color="neutral"
        size="sm"
        class="shrink-0"
-        aria-label="返回上传"
+        :aria-label="t('preferences.back')"
        @click="emit('back')"
      />
    </div>
@@ -98,7 +102,7 @@ onMounted(() => {
      <div class="grid gap-5 sm:grid-cols-3 sm:gap-6">
        <div class="space-y-4">
          <h3 class="text-sm font-semibold">
-            图片处理
+            {{ t('preferences.processing') }}
          </h3>

          <label class="flex cursor-pointer items-start gap-2.5">
@@ -107,9 +111,9 @@ onMounted(() => {
              class="mt-0.5"
            />
            <span>
-              <span class="block text-sm">客户端预压缩</span>
+              <span class="block text-sm">{{ t('preferences.clientCompress') }}</span>
              <span class="mt-1 block text-xs leading-relaxed text-muted">
-                上传前在浏览器端压缩（服务端仍会转 WebP）
+                {{ t('preferences.clientCompressHint') }}
              </span>
            </span>
          </label>
@@ -127,7 +131,7 @@ onMounted(() => {
                <span
                  class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm"
                >
-                  <span>自动删除超过</span>
+                  <span>{{ t('preferences.autoDeletePrefix') }}</span>
                  <UInput
                    v-model.number="userAutoDeleteDaysDraft"
                    type="number"
@@ -141,10 +145,10 @@ onMounted(() => {
                        : 'pointer-events-none opacity-40'
                    "
                  />
-                  <span>天的图片</span>
+                  <span>{{ t('preferences.autoDeleteSuffix') }}</span>
                </span>
                <span class="mt-1 block text-xs leading-relaxed text-muted">
-                  仅清理开启后上传的图片，不影响此前已存的图片
+                  {{ t('preferences.autoDeleteHint') }}
                </span>
              </span>
            </label>
@@ -162,15 +166,15 @@ onMounted(() => {

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

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

 <template>
@@ -12,7 +27,7 @@ defineProps<{
    class="space-y-2 rounded-lg border border-default p-4"
  >
    <p class="text-sm font-medium text-muted">
-      上传进度
+      {{ t('upload.progress') }}
    </p>
    <div
      v-for="item in items"
@@ -26,7 +41,7 @@ defineProps<{
          variant="subtle"
          size="xs"
        >
-          {{ item.status === 'pending' ? '等待' : item.status === 'uploading' ? '上传中' : item.status === 'success' ? '成功' : '失败' }}
+          {{ statusLabel(item.status) }}
        </UBadge>
      </div>
      <UProgress
@@ -0,0 +1,215 @@
+<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
+}>()
+
+const emit = defineEmits<{
+  setDefault: []
+  edit: []
+  test: []
+  toggleEnabled: []
+  delete: []
+}>()
+
+const { t } = useI18n()
+
+const typeIcon = computed(() =>
+  props.backend.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
+)
+
+const typeLabel = computed(() =>
+  props.backend.type === 'local' ? t('storage.backendLocal') : t('storage.backendCloud')
+)
+
+const 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 = props.backend.type === 'local'
+  const items: CardAction[] = []
+
+  if (!props.backend.isDefault && props.backend.enabled) {
+    items.push({
+      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') {
+    items.push({
+      key: 'edit',
+      icon: 'i-lucide-pencil',
+      label: t('common.edit'),
+      shortLabel: t('common.edit'),
+      onClick: () => emit('edit')
+    })
+  }
+
+  items.push({
+    key: 'test',
+    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') {
+    items.push({
+      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="{
+      '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 min-w-0 items-start gap-2.5">
+        <div
+          class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"
+        >
+          <UIcon
+            :name="typeIcon"
+            class="size-4.5"
+          />
+        </div>
+        <div class="min-w-0">
+          <h3 class="truncate text-sm font-semibold">
+            {{ backend.name }}
+          </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">
+        <UBadge
+          v-if="backend.enabled"
+          color="success"
+          variant="subtle"
+          size="xs"
+        >
+          {{ t('storage.badgeEnabled') }}
+        </UBadge>
+        <UBadge
+          v-if="backend.isDefault"
+          color="primary"
+          variant="subtle"
+          size="xs"
+        >
+          {{ t('storage.badgeDefault') }}
+        </UBadge>
+        <UBadge
+          v-if="!backend.enabled"
+          color="warning"
+          variant="subtle"
+          size="xs"
+        >
+          {{ t('storage.badgeDisabled') }}
+        </UBadge>
+      </div>
+    </div>
+
+    <StorageUsageBar
+      :capacity="backend.capacity"
+      :index-bytes="backend.usage.bytes"
+    />
+
+    <p class="mt-3 text-xs text-muted">
+      {{ t('storage.servingMode') }}: {{ servingLabel }}
+    </p>
+
+    <div class="mt-4 border-t border-default pt-4">
+      <div
+        class="grid gap-1.5"
+        :class="actionGridClass"
+      >
+        <button
+          v-for="action in actions"
+          :key="action.key"
+          type="button"
+          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>
+    </div>
+  </article>
+</template>
@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import type { QuotaUnit } from '~/composables/useFileSize'
+import type { StorageBackendItem } from '~/types/storage'
+
+type StorageProvider = 'r2' | 'cos' | 'oss' | 'aws' | 'custom'
+
+export interface StorageFormPayload {
+  name: string
+  config: {
+    endpoint: string
+    region: string
+    bucket: string
+    prefix?: string
+    forcePathStyle: boolean
+  }
+  secrets: {
+    accessKeyId: string
+    secretAccessKey: string
+  }
+  servingMode: 'proxy' | 'public'
+  publicUrl: string
+  quotaValue: string
+  quotaUnit: QuotaUnit
+}
+
+const props = defineProps<{
+  backend?: StorageBackendItem | null
+  createMode?: boolean
+  saving?: boolean
+}>()
+
+const emit = defineEmits<{
+  submit: [payload: StorageFormPayload]
+  cancel: []
+}>()
+
+const { t } = useI18n()
+const { bytesToQuotaInput, QUOTA_UNITS } = useFileSize()
+
+const name = ref('')
+const provider = ref<StorageProvider>('r2')
+const endpoint = ref('')
+const region = ref('auto')
+const bucket = ref('')
+const prefix = ref('')
+const forcePathStyle = ref(false)
+const accessKeyId = ref('')
+const secretAccessKey = ref('')
+const servingMode = ref<'proxy' | 'public'>('proxy')
+const publicUrl = ref('')
+const quotaValue = ref('')
+const quotaUnit = ref<QuotaUnit>('GB')
+
+const quotaUnitOptions = computed(() =>
+  QUOTA_UNITS.map(unit => ({ label: unit, value: unit }))
+)
+
+const providerOptions = computed(() => [
+  { label: t('storage.providerR2'), value: 'r2' as const },
+  { label: t('storage.providerCos'), value: 'cos' as const },
+  { label: t('storage.providerOss'), value: 'oss' as const },
+  { label: t('storage.providerAws'), value: 'aws' as const },
+  { label: t('storage.providerCustom'), value: 'custom' as const }
+])
+
+const servingModeOptions = computed(() => [
+  { label: t('storage.servingProxy'), value: 'proxy' },
+  { label: t('storage.servingPublic'), value: 'public' }
+])
+
+function providerLabel(value: StorageProvider): string {
+  return providerOptions.value.find(option => option.value === value)?.label
+    ?? t('storage.backendCloud')
+}
+
+function applyProviderTemplate(value: StorageProvider) {
+  if (!props.createMode && props.backend) return
+  if (props.createMode) {
+    name.value = providerLabel(value)
+  }
+  switch (value) {
+    case 'r2':
+      endpoint.value = 'https://{account_id}.r2.cloudflarestorage.com'
+      region.value = 'auto'
+      forcePathStyle.value = false
+      break
+    case 'cos':
+      endpoint.value = 'https://cos.{region}.myqcloud.com'
+      region.value = 'ap-guangzhou'
+      forcePathStyle.value = true
+      break
+    case 'oss':
+      endpoint.value = 'https://oss-{region}.aliyuncs.com'
+      region.value = 'cn-hangzhou'
+      forcePathStyle.value = false
+      break
+    case 'aws':
+      endpoint.value = 'https://s3.{region}.amazonaws.com'
+      region.value = 'us-east-1'
+      forcePathStyle.value = false
+      break
+    default:
+      break
+  }
+}
+
+function detectProvider(config: StorageBackendItem['config']): StorageProvider {
+  const ep = config.endpoint ?? ''
+  if (ep.includes('r2.cloudflarestorage.com')) return 'r2'
+  if (ep.includes('myqcloud.com')) return 'cos'
+  if (ep.includes('aliyuncs.com')) return 'oss'
+  if (ep.includes('amazonaws.com')) return 'aws'
+  return 'custom'
+}
+
+function loadBackend(backend: StorageBackendItem | null | undefined) {
+  if (!backend || backend.type !== 's3') {
+    if (props.createMode) {
+      name.value = ''
+      provider.value = 'r2'
+      applyProviderTemplate('r2')
+      bucket.value = ''
+      prefix.value = ''
+      accessKeyId.value = ''
+      secretAccessKey.value = ''
+      servingMode.value = 'proxy'
+      publicUrl.value = ''
+      quotaValue.value = ''
+      quotaUnit.value = 'GB'
+    }
+    return
+  }
+
+  name.value = backend.name
+  provider.value = detectProvider(backend.config)
+  endpoint.value = backend.config.endpoint ?? ''
+  region.value = backend.config.region ?? 'auto'
+  bucket.value = backend.config.bucket ?? ''
+  prefix.value = backend.config.prefix ?? ''
+  forcePathStyle.value = backend.config.forcePathStyle ?? false
+  servingMode.value = backend.servingMode
+  publicUrl.value = backend.publicUrl
+  const quota = bytesToQuotaInput(backend.quotaBytes)
+  quotaValue.value = quota.value
+  quotaUnit.value = quota.unit
+  accessKeyId.value = ''
+  secretAccessKey.value = ''
+}
+
+watch(() => props.backend, loadBackend, { immediate: true })
+
+watch(provider, (value) => {
+  if (props.createMode) {
+    applyProviderTemplate(value)
+  }
+})
+
+function handleSubmit() {
+  emit('submit', {
+    name: name.value.trim() || providerLabel(provider.value),
+    config: {
+      endpoint: endpoint.value.trim(),
+      region: region.value.trim() || 'auto',
+      bucket: bucket.value.trim(),
+      prefix: prefix.value.trim() || undefined,
+      forcePathStyle: forcePathStyle.value
+    },
+    secrets: {
+      accessKeyId: accessKeyId.value.trim(),
+      secretAccessKey: secretAccessKey.value.trim()
+    },
+    servingMode: servingMode.value,
+    publicUrl: publicUrl.value.trim(),
+    quotaValue: String(quotaValue.value ?? '').trim(),
+    quotaUnit: quotaUnit.value
+  })
+}
+</script>
+
+<template>
+  <form
+    class="space-y-4"
+    @submit.prevent="handleSubmit"
+  >
+    <div class="space-y-2">
+      <label class="text-sm">{{ t('storage.provider') }}</label>
+      <USelect
+        v-model="provider"
+        :items="providerOptions"
+        class="w-full"
+      />
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm">{{ t('storage.backendName') }}</label>
+      <UInput
+        v-model="name"
+        class="w-full"
+      />
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm">{{ t('storage.endpoint') }}</label>
+      <UInput
+        v-model="endpoint"
+        class="w-full font-mono text-sm"
+      />
+    </div>
+
+    <div class="grid gap-3 sm:grid-cols-2">
+      <div class="space-y-2">
+        <label class="text-sm">{{ t('storage.region') }}</label>
+        <UInput
+          v-model="region"
+          class="w-full font-mono text-sm"
+        />
+      </div>
+      <div class="space-y-2">
+        <label class="text-sm">
+          {{ t('storage.bucket') }}
+          <span class="text-error">*</span>
+        </label>
+        <UInput
+          v-model="bucket"
+          class="w-full font-mono text-sm"
+          required
+        />
+      </div>
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm">{{ t('storage.prefix') }}</label>
+      <UInput
+        v-model="prefix"
+        :placeholder="t('storage.prefixPlaceholder')"
+        class="w-full font-mono text-sm"
+      />
+    </div>
+
+    <label class="flex cursor-pointer items-center gap-2">
+      <UCheckbox v-model="forcePathStyle" />
+      <span class="text-sm">{{ t('storage.forcePathStyle') }}</span>
+    </label>
+
+    <div class="grid gap-3 sm:grid-cols-2">
+      <div class="space-y-2">
+        <label class="text-sm">
+          {{ t('storage.accessKey') }}
+          <span
+            v-if="createMode"
+            class="text-error"
+          >*</span>
+        </label>
+        <UInput
+          v-model="accessKeyId"
+          :placeholder="backend?.secretsMasked.accessKeyId || ''"
+          class="w-full font-mono text-sm"
+          :required="createMode"
+        />
+      </div>
+      <div class="space-y-2">
+        <label class="text-sm">
+          {{ t('storage.secretKey') }}
+          <span
+            v-if="createMode"
+            class="text-error"
+          >*</span>
+        </label>
+        <UInput
+          v-model="secretAccessKey"
+          type="password"
+          :placeholder="backend?.secretsMasked.secretAccessKey || ''"
+          class="w-full font-mono text-sm"
+          :required="createMode"
+        />
+      </div>
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm">{{ t('storage.servingMode') }}</label>
+      <URadioGroup
+        v-model="servingMode"
+        :items="servingModeOptions"
+      />
+      <p class="text-xs text-muted">
+        {{ t('storage.servingHint') }}
+      </p>
+    </div>
+
+    <div
+      v-if="servingMode === 'public'"
+      class="space-y-2"
+    >
+      <label class="text-sm">{{ t('storage.publicUrl') }}</label>
+      <UInput
+        v-model="publicUrl"
+        :placeholder="t('storage.publicUrlPlaceholder')"
+        class="w-full font-mono text-sm"
+      />
+    </div>
+
+    <div class="space-y-2">
+      <label class="text-sm">
+        {{ t('storage.quotaTotal') }}
+        <span class="text-error">*</span>
+      </label>
+      <div class="flex gap-2">
+        <UInput
+          :model-value="String(quotaValue)"
+          type="number"
+          min="0"
+          step="any"
+          required
+          :placeholder="t('storage.quotaPlaceholder')"
+          class="min-w-0 flex-1"
+          @update:model-value="quotaValue = String($event ?? '')"
+        />
+        <USelect
+          v-model="quotaUnit"
+          :items="quotaUnitOptions"
+          class="w-24 shrink-0"
+        />
+      </div>
+      <p class="text-xs text-muted">
+        {{ t('storage.quotaHint') }}
+      </p>
+    </div>
+
+    <div class="flex justify-end gap-2 pt-2">
+      <UButton
+        type="button"
+        :label="t('common.cancel')"
+        variant="outline"
+        color="neutral"
+        @click="emit('cancel')"
+      />
+      <UButton
+        type="submit"
+        :label="t('common.save')"
+        icon="i-lucide-save"
+        :loading="saving"
+      />
+    </div>
+  </form>
+</template>
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { StorageCapacity } from '~/types/storage'
+
+const props = defineProps<{
+  capacity: StorageCapacity
+  indexBytes: number
+}>()
+
+const { formatFileSize } = useFileSize()
+
+const displayUsedBytes = computed(() =>
+  props.capacity.source === 'disk' ? props.capacity.usedBytes : props.indexBytes
+)
+
+const hasBar = computed(() =>
+  props.capacity.totalBytes != null && props.capacity.totalBytes > 0
+)
+
+const displayPercent = computed(() => props.capacity.percent ?? 0)
+
+const overQuota = computed(() =>
+  props.capacity.source === 'quota' && displayPercent.value > 100
+)
+
+const barWidth = computed(() => {
+  if (!hasBar.value) return 0
+  const percent = Math.min(displayPercent.value, 100)
+  return Math.max(percent, displayUsedBytes.value > 0 ? 4 : 0)
+})
+
+function formatOptional(bytes: number | null): string {
+  if (bytes == null) return '—'
+  return formatFileSize(bytes)
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="grid grid-cols-3 gap-2 text-center text-xs">
+      <div class="rounded-lg bg-muted/30 px-2 py-2">
+        <p class="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">
+          {{ formatFileSize(displayUsedBytes) }}
+        </p>
+      </div>
+      <div class="rounded-lg bg-muted/30 px-2 py-2">
+        <p class="text-muted">
+          {{ $t('storage.statFree') }}
+        </p>
+        <p
+          class="mt-1 font-medium tabular-nums"
+          :class="overQuota ? 'text-error' : 'text-highlighted'"
+        >
+          {{ formatOptional(capacity.freeBytes) }}
+        </p>
+      </div>
+    </div>
+
+    <div
+      v-if="hasBar"
+      class="space-y-1"
+    >
+      <div class="flex items-center justify-between text-xs">
+        <span class="text-muted">{{ $t('storage.usageRate') }}</span>
+        <span
+          class="tabular-nums font-medium"
+          :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>
@@ -0,0 +1,100 @@
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+export function useAppearanceMenus() {
+  const colorMode = useColorMode()
+  const { locale, locales, setLocale, t } = useI18n()
+
+  const themeIcon = computed(() => {
+    if (colorMode.preference === 'system') return 'i-lucide-monitor'
+    return colorMode.preference === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'
+  })
+
+  const localeMenuItems = computed<DropdownMenuItem[][]>(() => [[
+    ...locales.value.map(loc => ({
+      label: t(`locale.${loc.code}`),
+      icon: 'i-lucide-languages',
+      type: 'checkbox' as const,
+      checked: locale.value === loc.code,
+      onUpdateChecked(checked: boolean) {
+        if (checked && typeof loc.code === 'string') {
+          void setLocale(loc.code)
+        }
+      }
+    }))
+  ]])
+
+  const themeMenuItems = computed<DropdownMenuItem[][]>(() => [[
+    {
+      label: t('theme.light'),
+      icon: 'i-lucide-sun',
+      type: 'checkbox',
+      checked: colorMode.preference === 'light',
+      onUpdateChecked(checked: boolean) {
+        if (checked) colorMode.preference = 'light'
+      }
+    },
+    {
+      label: t('theme.dark'),
+      icon: 'i-lucide-moon',
+      type: 'checkbox',
+      checked: colorMode.preference === 'dark',
+      onUpdateChecked(checked: boolean) {
+        if (checked) colorMode.preference = 'dark'
+      }
+    },
+    {
+      label: t('theme.system'),
+      icon: 'i-lucide-monitor',
+      type: 'checkbox',
+      checked: colorMode.preference === 'system',
+      onUpdateChecked(checked: boolean) {
+        if (checked) colorMode.preference = 'system'
+      }
+    }
+  ]])
+
+  const themeOptions = computed(() => [
+    {
+      value: 'light' as const,
+      label: t('theme.light'),
+      icon: 'i-lucide-sun'
+    },
+    {
+      value: 'dark' as const,
+      label: t('theme.dark'),
+      icon: 'i-lucide-moon'
+    },
+    {
+      value: 'system' as const,
+      label: t('theme.system'),
+      icon: 'i-lucide-monitor'
+    }
+  ])
+
+  const localeOptions = computed(() =>
+    locales.value.map(loc => ({
+      code: String(loc.code),
+      label: t(`locale.${loc.code}`)
+    }))
+  )
+
+  function setThemePreference(value: 'light' | 'dark' | 'system') {
+    colorMode.preference = value
+  }
+
+  async function setLocalePreference(code: string) {
+    if (code === 'zh-CN' || code === 'en') {
+      await setLocale(code)
+    }
+  }
+
+  return {
+    themeIcon,
+    localeMenuItems,
+    themeMenuItems,
+    localeOptions,
+    themeOptions,
+    setThemePreference,
+    setLocalePreference
+  }
+}
@@ -26,13 +26,15 @@ export function isUnauthorizedError(error: unknown): boolean {
 export const AUTH_USERNAME_PATTERN = /^[a-zA-Z0-9_]{3,32}$/
 export const AUTH_MIN_PASSWORD_LENGTH = 8

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

 export function useAuth() {
+  const { t } = useI18n()
  const status = useState<AuthStatus>('auth-status', () => 'checking')
  const user = useState<AuthUser | null>('auth-user', () => null)
  const authStatus = useState<AuthStatusResponse | null>('auth-status-response', () => null)
+  /** 是否已完成至少一次会话校验（用于避免路由切换时反复全屏 loading） */
+  const hasValidatedOnce = useState('auth-validated-once', () => false)

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

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

-  async function checkSession() {
-    status.value = 'checking'
+  async function checkSession(options?: { force?: boolean }) {
+    const silent = !options?.force && hasValidatedOnce.value
+    if (!silent) {
+      status.value = 'checking'
+    }
    try {
      const data = await fetchStatus()
+      hasValidatedOnce.value = true
      if (data.user) {
        user.value = data.user
        status.value = 'authenticated'
@@ -94,6 +103,7 @@ export function useAuth() {
      status.value = 'unauthenticated'
      return false
    } catch {
+      hasValidatedOnce.value = true
      user.value = null
      status.value = 'unauthenticated'
      return false
@@ -126,12 +136,13 @@ export function useAuth() {
        user.value = result.user
      }
      status.value = 'authenticated'
+      hasValidatedOnce.value = true
      await fetchStatus()
      return { ok: true }
    } catch (error: unknown) {
      return {
        ok: false,
-        error: getFetchErrorMessage(error, '登录失败，请检查用户名和密码')
+        error: getFetchErrorMessage(error, t('auth.loginFailed'))
      }
    }
  }
@@ -142,7 +153,7 @@ export function useAuth() {
  ): Promise<AuthActionResult> {
    const validationError = validateAuthInput(username, password)
    if (validationError) {
-      return { ok: false, error: validationError }
+      return { ok: false, error: t(`auth.errors.${validationError}`) }
    }

    try {
@@ -156,12 +167,13 @@ export function useAuth() {
      )
      user.value = result.user
      status.value = 'authenticated'
+      hasValidatedOnce.value = true
      await fetchStatus()
      return { ok: true }
    } catch (error: unknown) {
      return {
        ok: false,
-        error: getFetchErrorMessage(error, '注册失败，请检查输入')
+        error: getFetchErrorMessage(error, t('auth.registerFailed'))
      }
    }
  }
@@ -173,7 +185,7 @@ export function useAuth() {
  }): Promise<AuthActionResult> {
    const validationError = validateAuthInput(input.username, input.password)
    if (validationError) {
-      return { ok: false, error: validationError }
+      return { ok: false, error: t(`auth.errors.${validationError}`) }
    }

    try {
@@ -191,12 +203,13 @@ export function useAuth() {
      )
      user.value = result.user
      status.value = 'authenticated'
+      hasValidatedOnce.value = true
      await fetchStatus()
      return { ok: true }
    } catch (error: unknown) {
      return {
        ok: false,
-        error: getFetchErrorMessage(error, '初始化失败，请检查输入')
+        error: getFetchErrorMessage(error, t('auth.setupFailed'))
      }
    }
  }
@@ -208,7 +221,7 @@ export function useAuth() {
  }): Promise<AuthActionResult> {
    const validationError = validateAuthInput(input.username, input.password)
    if (validationError) {
-      return { ok: false, error: validationError }
+      return { ok: false, error: t(`auth.errors.${validationError}`) }
    }

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

    try {
@@ -254,7 +268,7 @@ export function useAuth() {
    } catch (error: unknown) {
      return {
        ok: false,
-        error: getFetchErrorMessage(error, '修改密码失败')
+        error: getFetchErrorMessage(error, t('password.changeFailed'))
      }
    }
  }
@@ -268,6 +282,7 @@ export function useAuth() {
      status.value = 'unauthenticated'
      user.value = null
      authStatus.value = null
+      hasValidatedOnce.value = true
    }
  }

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

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

 export function useImageList() {
+  const { t } = useI18n()
  const items = ref<ImageItem[]>([])
  const page = ref(1)
  const totalPages = ref(1)
@@ -16,6 +17,8 @@ export function useImageList() {
  const searchQuery = ref('')
  const activeSearch = ref('')
  const activeFolder = ref('all')
+  const activeStorageBackend = ref('all')
+  const storageBackendOptions = ref<Array<{ id: string, name: string }>>([])

  function folderQueryParams(): Record<string, string> {
    const folder = activeFolder.value.trim()
@@ -23,18 +26,53 @@ export function useImageList() {
    return { folder }
  }

+  function storageQueryParams(): Record<string, string> {
+    const backendId = activeStorageBackend.value.trim()
+    if (!backendId || backendId === 'all') return {}
+    return { backendId }
+  }
+
+  function listQueryParams(): Record<string, string> {
+    return {
+      ...folderQueryParams(),
+      ...storageQueryParams()
+    }
+  }
+
  function matchesActiveFolder(key: string) {
    const folder = activeFolder.value.trim()
    if (!folder || folder === 'all') return true
    return key.startsWith(`${folder}/`)
  }

+  function matchesActiveStorage(item: ImageItem) {
+    const backendId = activeStorageBackend.value.trim()
+    if (!backendId || backendId === 'all') return true
+    return item.storage?.id === backendId
+  }
+
+  async function loadStorageBackendOptions() {
+    try {
+      const data = await $fetch<{
+        backends: Array<{ id: string, name: string, type: string }>
+      }>('/api/storage-backends', {
+        credentials: 'include'
+      })
+      storageBackendOptions.value = data.backends.map(backend => ({
+        id: backend.id,
+        name: backend.name
+      }))
+    } catch {
+      storageBackendOptions.value = []
+    }
+  }
+
  async function fetchTotal() {
    loadingTotal.value = true
    try {
      const data = await $fetch<{ total: number }>('/api/images/count', {
        credentials: 'include',
-        query: folderQueryParams()
+        query: listQueryParams()
      })
      folderTotal.value = data.total
    } catch {
@@ -52,7 +90,7 @@ export function useImageList() {
        query: {
          limit: PAGE_SIZE,
          page: targetPage,
-          ...folderQueryParams()
+          ...listQueryParams()
        }
      })

@@ -80,7 +118,7 @@ export function useImageList() {
          q,
          limit: PAGE_SIZE,
          page: targetPage,
-          ...folderQueryParams()
+          ...listQueryParams()
        }
      })

@@ -106,7 +144,7 @@ export function useImageList() {
    page.value = 1
    activeSearch.value = ''
    searchQuery.value = ''
-    await Promise.all([fetchList(1), fetchTotal()])
+    await Promise.all([fetchList(1), fetchTotal(), loadStorageBackendOptions()])
  }

  async function setActiveFolder(folder: string) {
@@ -121,6 +159,18 @@ export function useImageList() {
    }
  }

+  async function setActiveStorageBackend(backendId: string) {
+    const next = backendId.trim() || 'all'
+    if (next === activeStorageBackend.value) return
+    activeStorageBackend.value = next
+    page.value = 1
+    if (activeSearch.value) {
+      await Promise.all([fetchSearch(1), fetchTotal()])
+    } else {
+      await Promise.all([fetchList(1), fetchTotal()])
+    }
+  }
+
  async function submitSearch() {
    const q = searchQuery.value.trim()
    activeSearch.value = q
@@ -142,7 +192,9 @@ export function useImageList() {
  }

  function prependItems(newItems: ImageItem[]) {
-    const matched = newItems.filter(item => matchesActiveFolder(item.key))
+    const matched = newItems.filter(item =>
+      matchesActiveFolder(item.key) && matchesActiveStorage(item)
+    )
    if (!matched.length || page.value !== 1) return
    items.value = [...matched, ...items.value]
    total.value += matched.length
@@ -163,19 +215,42 @@ export function useImageList() {
    }
  }

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

  return {
@@ -185,14 +260,19 @@ export function useImageList() {
    total,
    loading,
    activeFolder,
+    activeStorageBackend,
+    storageBackendOptions,
    searchQuery,
    activeSearch,
    listSummary,
    fetchList,
+    fetchSearch,
    fetchTotal,
    refreshList,
    initializeList,
    setActiveFolder,
+    setActiveStorageBackend,
+    loadStorageBackendOptions,
    submitSearch,
    goToPage,
    prependItems,
@@ -9,6 +9,7 @@ const MAX_FILES = 10

 export function useImageUpload() {
  const toast = useToast()
+  const { t } = useI18n()
  const { compressEnabled, clientWebpQuality } = useUploadPreferences()
  const uploading = ref(false)
  const progressItems = ref<UploadProgressItem[]>([])
@@ -22,13 +23,13 @@ export function useImageUpload() {
    if (uploading.value) return

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

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

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

      if (response.errors.length) {
        toast.add({
-          title: `${response.errors.length} 张图片上传失败`,
+          title: t('upload.uploadPartialFail', { n: response.errors.length }),
          color: 'warning'
        })
      }
@@ -97,7 +98,7 @@ export function useImageUpload() {
      if (isUnauthorizedError(error)) {
        throw error
      }
-      const message = error instanceof Error ? error.message : '上传失败'
+      const message = error instanceof Error ? error.message : t('upload.uploadFailed')
      progressItems.value = progressItems.value.map(item => ({
        ...item,
        status: 'error',
@@ -1,6 +1,7 @@
 export function useUserAutoDeleteSettings() {
  const { isAuthenticated, handleAuthError } = useAuth()
  const toast = useToast()
+  const { t } = useI18n()

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

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

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

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

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

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

          <div class="flex gap-2 pt-1">
            <UButton
              type="submit"
-              label="保存"
+              :label="t('common.save')"
              icon="i-lucide-save"
              :loading="loading"
              :disabled="!canSubmit"
            />
            <UButton
-              label="取消"
+              :label="t('common.cancel')"
              variant="ghost"
              color="neutral"
              to="/"
@@ -22,6 +22,7 @@ interface ApiDocItem {

 const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
 const toast = useToast()
+const { t } = useI18n()

 const settings = ref<SettingsResponse | null>(null)
 const loading = ref(false)
@@ -49,8 +50,8 @@ const authHeaderFlag = computed(() => `-H 'Auth-Token: ${authHeader.value}'`)

 const apiDocs = computed<ApiDocItem[]>(() => {
  const uploadDescription = isAdmin.value
-    ? '上传单张或多张图片。字段 image 传图片，folder 指定目录（不存在则自动创建）；仍兼容 file、files、type。'
-    : '上传单张或多张图片。字段 image 传图片；仍兼容 file、files。图片固定存入 images/ 目录。'
+    ? t('api.docs.upload.descAdmin')
+    : t('api.docs.upload.descUser')
  const uploadCurl = isAdmin.value
    ? `curl -X POST "${baseUrl.value}/api/images/upload" \\
  ${authHeaderFlag.value} \\
@@ -66,8 +67,8 @@ curl -X POST "${baseUrl.value}/api/images/upload" \\
  -F "image=@./demo.png"`

  const listDescription = isAdmin.value
-    ? '分页列出图库，folder 可筛选目录，limit 默认 20、最大 100。'
-    : '分页列出您的图库，limit 默认 20、最大 100。'
+    ? 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}
@@ -83,7 +84,7 @@ curl "${baseUrl.value}/api/images?folder=blog&limit=20&page=1" \\
      index: 1,
      method: 'POST',
      path: '/api/images/upload',
-      title: '上传图片',
+      title: t('api.docs.upload.title'),
      description: uploadDescription,
      curl: uploadCurl
    },
@@ -91,7 +92,7 @@ curl "${baseUrl.value}/api/images?folder=blog&limit=20&page=1" \\
      index: 2,
      method: 'GET',
      path: '/api/images',
-      title: '获取图片列表',
+      title: t('api.docs.list.title'),
      description: listDescription,
      curl: listCurl
    },
@@ -99,8 +100,8 @@ curl "${baseUrl.value}/api/images?folder=blog&limit=20&page=1" \\
      index: 3,
      method: 'GET',
      path: '/api/images/search',
-      title: '搜索图片',
-      description: '按文件名或路径关键词搜索，参数 q 必填。',
+      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}`
    },
@@ -108,8 +109,8 @@ curl "${baseUrl.value}/api/images?folder=blog&limit=20&page=1" \\
      index: 4,
      method: 'DELETE',
      path: '/api/images',
-      title: '删除图片',
-      description: '通过 key 删除单张图片，key 为存储路径（如 images/2026/08/xxx.webp）。',
+      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}`
    },
@@ -117,8 +118,8 @@ curl "${baseUrl.value}/api/images?folder=blog&limit=20&page=1" \\
      index: 5,
      method: 'POST',
      path: '/api/images/batch-delete',
-      title: '批量删除',
-      description: '一次删除多张图片，请求体为 keys 数组。',
+      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" \\
@@ -130,8 +131,8 @@ curl "${baseUrl.value}/api/images?folder=blog&limit=20&page=1" \\
 const twikooDoc = computed(() => ({
  method: 'POST' as const,
  path: '/api/index.php',
-  title: 'twikoo 兼容上传',
-  description: '兼容 Twikoo / EasyImage 2.0 协议，图片存入 twikoo/ 目录；字段 image + token。',
+  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"`
@@ -140,11 +141,11 @@ const twikooDoc = computed(() => ({
 function tokenSourceLabel(source: SettingsResponse['tokenSource']) {
  switch (source) {
    case 'env':
-      return '来源：环境变量 API_UPLOAD_TOKEN'
+      return t('api.tokenSourceEnv')
    case 'db':
-      return '来源：后台生成（可重新生成）'
+      return t('api.tokenSourceDb')
    default:
-      return '来源：未配置'
+      return t('api.tokenSourceNone')
  }
 }

@@ -169,7 +170,7 @@ async function loadSettings() {
  } catch (error: unknown) {
    handleAuthError(error)
    if (isAuthenticated.value) {
-      toast.add({ title: '加载 API 设置失败', color: 'error' })
+      toast.add({ title: t('api.loadFailed'), color: 'error' })
    }
  } finally {
    loading.value = false
@@ -203,11 +204,11 @@ async function confirmRegenerate() {
        : 0
      if (status === 409) {
        toast.add({
-          title: '环境变量已配置 Token，无法在后台重新生成',
+          title: t('api.regenerateEnvBlocked'),
          color: 'warning'
        })
      } else {
-        toast.add({ title: '重新生成 Token 失败', color: 'error' })
+        toast.add({ title: t('api.regenerateFailed'), color: 'error' })
      }
    }
  } finally {
@@ -218,9 +219,9 @@ async function confirmRegenerate() {
 async function copyCurl(text: string) {
  try {
    await navigator.clipboard.writeText(text)
-    toast.add({ title: '已复制 cURL 示例', color: 'success' })
+    toast.add({ title: t('copy.curl'), color: 'success' })
  } catch {
-    toast.add({ title: '复制失败', color: 'error' })
+    toast.add({ title: t('copy.failed'), color: 'error' })
  }
 }

@@ -239,10 +240,13 @@ onMounted(async () => {
    return
  }
  await checkSession()
+  if (isAuthenticated.value) {
+    await loadSettings()
+  }
 })

-watch(isAuthenticated, async (authed) => {
-  if (authed) {
+watch(isAuthenticated, async (authed, prev) => {
+  if (authed && prev === false) {
    await nextTick()
    await loadSettings()
  } else {
@@ -263,7 +267,7 @@ watch(isAuthenticated, async (authed) => {
          class="size-8 animate-spin"
        />
        <p class="text-sm">
-          正在验证登录状态…
+          {{ t('common.loadingSession') }}
        </p>
      </div>
    </div>
@@ -278,7 +282,7 @@ watch(isAuthenticated, async (authed) => {
            class="size-5 text-primary"
          />
          <h2 class="text-base font-semibold">
-            API Token
+            {{ t('api.tokenTitle') }}
          </h2>
        </div>

@@ -288,8 +292,8 @@ watch(isAuthenticated, async (authed) => {
            color="warning"
            variant="subtle"
            icon="i-lucide-triangle-alert"
-            title="Token 由环境变量覆盖"
-            description="修改 API_UPLOAD_TOKEN 后需重启服务；后台无法重新生成。"
+            :title="t('api.envOverrideTitle')"
+            :description="t('api.envOverrideDesc')"
          />

          <UAlert
@@ -297,8 +301,8 @@ watch(isAuthenticated, async (authed) => {
            color="info"
            variant="subtle"
            icon="i-lucide-info"
-            title="个人 API Token"
-            description="此 Token 仅用于您自己的脚本上传，上传的图片归属您的账号。"
+            :title="t('api.personalTitle')"
+            :description="t('api.personalDesc')"
          />

          <UAlert
@@ -306,25 +310,25 @@ watch(isAuthenticated, async (authed) => {
            color="info"
            variant="subtle"
            icon="i-lucide-info"
-            title="尚未配置 Token"
-            description="点击「重新生成」创建 Token，用于下方所有接口的 Auth-Token 鉴权。"
+            :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 : '（未配置）'"
+              :model-value="hasToken ? tokenDisplay : t('common.notConfigured')"
              readonly
              class="min-w-0 flex-1 font-mono text-xs sm:text-sm"
              :loading="loading"
            />
            <div class="flex gap-2">
              <CopyButton
-                label="复制"
+                :label="t('common.copy')"
                :value="tokenDisplay"
              />
              <UButton
                icon="i-lucide-refresh-cw"
-                label="重新生成"
+                :label="t('api.regenerate')"
                color="warning"
                variant="soft"
                :loading="regenerating"
@@ -339,10 +343,10 @@ watch(isAuthenticated, async (authed) => {
            class="text-xs text-muted"
          >
            {{ tokenSourceLabel(settings.tokenSource) }}
-            · 请求头：
+            · {{ t('api.tokenHeader') }}
            <code class="font-mono">Auth-Token: &lt;token&gt;</code>
            <template v-if="hasToken && !settings.envTokenOverride">
-              · 重新生成后旧 Token 立即失效
+              · {{ t('api.tokenInvalidate') }}
            </template>
          </p>
        </div>
@@ -355,7 +359,7 @@ watch(isAuthenticated, async (authed) => {
            class="size-5 text-primary"
          />
          <h2 class="text-base font-semibold">
-            API 文档
+            {{ t('api.docsTitle') }}
          </h2>
        </div>

@@ -395,12 +399,12 @@ watch(isAuthenticated, async (authed) => {

            <div>
              <p class="mb-2 text-xs font-medium text-muted">
-                cURL 示例
+                {{ t('api.curlExample') }}
              </p>
              <div class="relative overflow-hidden rounded-xl bg-neutral-950">
                <UButton
                  icon="i-lucide-copy"
-                  label="复制"
+                  :label="t('common.copy')"
                  size="xs"
                  variant="ghost"
                  color="neutral"
@@ -445,12 +449,12 @@ watch(isAuthenticated, async (authed) => {

          <div>
            <p class="mb-2 text-xs font-medium text-muted">
-              cURL 示例
+              {{ t('api.curlExample') }}
            </p>
            <div class="relative overflow-hidden rounded-xl bg-neutral-950">
              <UButton
                icon="i-lucide-copy"
-                label="复制"
+                :label="t('common.copy')"
                size="xs"
                variant="ghost"
                color="neutral"
@@ -466,20 +470,20 @@ watch(isAuthenticated, async (authed) => {

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

    <UModal
      :open="regenerateResultOpen"
-      title="新 Token 已生成"
-      description="请立即复制保存。关闭弹窗后仍可在上方输入框复制，但请尽快更新到你的脚本配置中。"
+      :title="t('api.newTokenTitle')"
+      :description="t('api.newTokenDesc')"
      @update:open="regenerateResultOpen = $event"
    >
      <template #body>
@@ -504,11 +508,11 @@ watch(isAuthenticated, async (authed) => {
      <template #footer>
        <div class="flex w-full flex-wrap justify-end gap-2">
          <CopyButton
-            label="复制 Token"
+            :label="t('api.copyToken')"
            :value="newToken"
          />
          <UButton
-            label="我已保存"
+            :label="t('api.saved')"
            @click="closeRegenerateResult"
          />
        </div>
@@ -13,6 +13,7 @@ const {
 const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin }
  = useAuth()
 const toast = useToast()
+const { t } = useI18n()
 const folderOptions = ref<string[]>(['images'])
 const sessionItems = ref<ImageItem[]>([])
 const deletingKeys = ref<Set<string>>(new Set())
@@ -76,11 +77,11 @@ watch(isAuthenticated, async (authed, prev) => {
 function copyFormatLabel() {
  switch (copyFormat.value) {
    case 'url':
-      return '直链'
+      return t('copy.url')
    case 'html':
-      return 'HTML'
+      return t('copy.html')
    default:
-      return 'Markdown'
+      return t('copy.markdown')
  }
 }

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

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

@@ -149,10 +150,10 @@ async function handleDelete(key: string) {
      query: { key }
    })
    sessionItems.value = sessionItems.value.filter(item => item.key !== key)
-    toast.add({ title: '已删除', color: 'success' })
+    toast.add({ title: t('stats.deletedSingle'), color: 'success' })
  } catch (error: unknown) {
    handleAuthError(error)
-    toast.add({ title: '删除失败', color: 'error' })
+    toast.add({ title: t('stats.deleteFailed'), color: 'error' })
  } finally {
    deletingKeys.value.delete(key)
    deletingKeys.value = new Set(deletingKeys.value)
@@ -172,7 +173,7 @@ async function handleDelete(key: string) {
          class="size-8 animate-spin"
        />
        <p class="text-sm">
-          正在验证登录状态…
+          {{ t('common.loadingSession') }}
        </p>
      </div>
    </div>
@@ -196,7 +197,7 @@ async function handleDelete(key: string) {
      >
        <div class="flex items-center justify-between gap-2">
          <h2 class="text-lg font-medium">
-            本次上传
+            {{ t('upload.sessionTitle') }}
            <span class="ml-1 text-sm font-normal text-muted">({{ sessionItems.length }})</span>
          </h2>
        </div>
@@ -207,7 +208,7 @@ async function handleDelete(key: string) {
          :deleting-keys="deletingKeys"
          :selectable="false"
          :show-key="false"
-          empty-text="暂无本次上传"
+          :empty-text="t('upload.sessionEmpty')"
          @update:selected-keys="() => {}"
          @delete="handleDelete"
        />
@@ -0,0 +1,587 @@
+<script setup lang="ts">
+import type { ActivityLogListResponse, ActivityLogStorage, LogAction, LogSource } from '~/types/logs'
+
+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 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 imageUrl(key: string) {
+  if (!import.meta.client) return ''
+  return `${window.location.origin}/${key}`
+}
+
+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 loadLogs()
+})
+
+watch(isAuthenticated, async (authed, prev) => {
+  if (authed && prev === false) {
+    await loadLogs()
+  }
+})
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div
+      v-if="isChecking"
+      class="flex min-h-screen items-center justify-center"
+    >
+      <div class="flex flex-col items-center gap-3 text-muted">
+        <UIcon
+          name="i-lucide-loader-circle"
+          class="size-8 animate-spin"
+        />
+        <p class="text-sm">
+          {{ t('common.loadingSession') }}
+        </p>
+      </div>
+    </div>
+
+    <AdminLoginGate v-else-if="!isAuthenticated" />
+
+    <AppShell v-else>
+      <section class="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>
@@ -6,6 +6,7 @@ import { isPasswordValid } from '~/utils/password-strength'
 const router = useRouter()
 const { register, fetchStatus } = useAuth()
 const toast = useToast()
+const { t } = useI18n()

 const username = ref('')
 const password = ref('')
@@ -21,7 +22,7 @@ const canSubmit = computed(() =>

 onMounted(async () => {
  const status = await fetchStatus()
-  if (!status.initialized) {
+  if (!status.initialized && !status.legacyMode) {
    await router.replace('/setup')
    return
  }
@@ -34,7 +35,7 @@ async function submit() {
  if (!canSubmit.value || loading.value) return

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

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

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

        <UButton
          type="submit"
-          label="注册"
+          :label="t('auth.register')"
          icon="i-lucide-user-plus"
          size="lg"
          block
@@ -158,12 +154,12 @@ async function submit() {
        />

        <p class="text-center text-sm text-muted">
-          已有账号？
+          {{ t('auth.hasAccount') }}
          <NuxtLink
            to="/"
            class="text-primary hover:underline"
          >
-            返回登录
+            {{ t('auth.backToLogin') }}
          </NuxtLink>
        </p>
      </form>
@@ -21,6 +21,7 @@ interface SettingsResponse {
 const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
 const { defaultFolder, loadPreferences } = useUploadPreferences()
 const toast = useToast()
+const { t } = useI18n()

 const settings = ref<SettingsResponse | null>(null)
 const folderOptions = ref<string[]>(['images'])
@@ -44,24 +45,24 @@ const hasServerChanges = computed(() => {
 function sourceBadge(source: SettingSource | WebpQualitySource) {
  switch (source) {
    case 'env':
-      return { label: '.env', color: 'warning' as const }
+      return { label: t('settings.badgeEnv'), color: 'warning' as const }
    case 'db':
-      return { label: '已保存', color: 'success' as const }
+      return { label: t('settings.badgeSaved'), color: 'success' as const }
    case 'default':
-      return { label: '默认', color: 'neutral' as const }
+      return { label: t('settings.badgeDefault'), color: 'neutral' as const }
    default:
-      return { label: '未设置', color: 'neutral' as const }
+      return { label: t('settings.badgeUnset'), color: 'neutral' as const }
  }
 }

 function tokenSourceText(source: SettingSource) {
  switch (source) {
    case 'env':
-      return '环境变量'
+      return t('settings.tokenEnv')
    case 'db':
-      return '后台生成'
+      return t('settings.tokenDb')
    default:
-      return '未配置'
+      return t('settings.tokenNone')
  }
 }

@@ -93,7 +94,7 @@ function handlePatchError(error: unknown, fallback: string) {
  handleAuthError(error)
  if (!isAuthenticated.value) return
  if (errorStatus(error) === 409) {
-    toast.add({ title: '该项已由环境变量覆盖，无法在后台修改', color: 'warning' })
+    toast.add({ title: t('settings.envOverride'), color: 'warning' })
    void loadSettings()
    return
  }
@@ -110,9 +111,9 @@ async function saveServerSettings() {
      imageBaseUrl: imageBaseUrlDraft.value,
      allowRegistration: allowRegistrationDraft.value
    })
-    toast.add({ title: '服务器配置已保存', color: 'success' })
+    toast.add({ title: t('settings.saved'), color: 'success' })
  } catch (error: unknown) {
-    handlePatchError(error, '保存服务器配置失败')
+    handlePatchError(error, t('settings.saveFailed'))
  } finally {
    savingServer.value = false
  }
@@ -137,7 +138,7 @@ async function loadSettings() {
  } catch (error: unknown) {
    handleAuthError(error)
    if (isAuthenticated.value) {
-      toast.add({ title: '加载设置失败', color: 'error' })
+      toast.add({ title: t('settings.loadFailed'), color: 'error' })
    }
  }
 }
@@ -160,11 +161,15 @@ onMounted(async () => {
  await checkSession()
  if (isAuthenticated.value && !isAdmin.value) {
    await navigateTo('/')
+    return
+  }
+  if (isAuthenticated.value && isAdmin.value) {
+    await loadPage()
  }
 })

-watch(isAuthenticated, async (authed) => {
-  if (authed) {
+watch(isAuthenticated, async (authed, prev) => {
+  if (authed && prev === false) {
    if (!isAdmin.value) {
      await navigateTo('/')
      return
@@ -189,7 +194,7 @@ watch(isAuthenticated, async (authed) => {
          class="size-8 animate-spin"
        />
        <p class="text-sm">
-          正在验证登录状态…
+          {{ t('common.loadingSession') }}
        </p>
      </div>
    </div>
@@ -209,10 +214,10 @@ watch(isAuthenticated, async (authed) => {
          />
          <div class="min-w-0">
            <h1 class="text-base font-semibold">
-              系统设置
+              {{ t('settings.title') }}
            </h1>
            <p class="mt-0.5 text-xs text-muted">
-              保存后写入数据库；环境变量优先级更高
+              {{ t('settings.subtitle') }}
            </p>
          </div>
        </div>
@@ -224,13 +229,13 @@ watch(isAuthenticated, async (authed) => {
          <div class="grid gap-5 sm:grid-cols-3 sm:gap-6">
            <div class="space-y-4">
              <h3 class="text-sm font-semibold">
-                上传与账号
+                {{ t('settings.uploadAccount') }}
              </h3>

              <div class="space-y-2">
-                <label class="text-sm">默认上传目录</label>
+                <label class="text-sm">{{ t('settings.defaultFolder') }}</label>
                <p class="text-xs leading-relaxed text-muted">
-                  保存在本机浏览器，仅影响您的上传目标目录
+                  {{ t('settings.defaultFolderHint') }}
                </p>
                <USelect
                  v-model="defaultFolder"
@@ -245,9 +250,9 @@ watch(isAuthenticated, async (authed) => {
                  class="mt-0.5"
                />
                <span>
-                  <span class="block text-sm">开放用户注册</span>
+                  <span class="block text-sm">{{ t('settings.allowRegistration') }}</span>
                  <span class="mt-1 block text-xs leading-relaxed text-muted">
-                    允许新用户自行注册（普通用户仅可见自己的图片）
+                    {{ t('settings.allowRegistrationHint') }}
                  </span>
                </span>
              </label>
@@ -256,7 +261,7 @@ watch(isAuthenticated, async (authed) => {
            <div class="space-y-4">
              <div class="flex items-center justify-between gap-2">
                <h3 class="text-sm font-semibold">
-                  访问控制
+                  {{ t('settings.accessControl') }}
                </h3>
                <UBadge
                  :color="sourceBadge(settings.refererSource).color"
@@ -267,11 +272,11 @@ watch(isAuthenticated, async (authed) => {
                </UBadge>
              </div>
              <p class="text-xs leading-relaxed text-muted">
-                Referer 防盗链，逗号分隔允许引用的域名，留空不限制
+                {{ t('settings.refererHint') }}
              </p>
              <UTextarea
                v-model="refererDraft"
-                placeholder="example.com, www.example.com"
+                :placeholder="t('settings.refererPlaceholder')"
                :rows="4"
                class="w-full font-mono text-sm"
              />
@@ -280,7 +285,7 @@ watch(isAuthenticated, async (authed) => {
            <div class="space-y-4">
              <div class="flex items-center justify-between gap-2">
                <h3 class="text-sm font-semibold">
-                  链接生成
+                  {{ t('settings.linkGeneration') }}
                </h3>
                <UBadge
                  :color="sourceBadge(settings.imageBaseUrlSource).color"
@@ -291,18 +296,18 @@ watch(isAuthenticated, async (authed) => {
                </UBadge>
              </div>
              <p class="text-xs leading-relaxed text-muted">
-                生成图片链接的 URL 前缀，内网访问建议填公网域名
+                {{ t('settings.imageBaseUrlHint') }}
              </p>
              <UInput
                v-model="imageBaseUrlDraft"
-                placeholder="https://pic.example.com"
+                :placeholder="t('settings.imageBaseUrlPlaceholder')"
                class="w-full font-mono text-sm"
              />
              <p
                v-if="settings.imageBaseUrl"
                class="text-xs text-muted"
              >
-                当前生效：<span class="font-mono break-all">{{ settings.imageBaseUrl }}</span>
+                {{ t('settings.imageBaseUrlActive', { url: settings.imageBaseUrl }) }}
              </p>
            </div>
          </div>
@@ -328,15 +333,28 @@ watch(isAuthenticated, async (authed) => {
              class="size-3.5 shrink-0"
            />
            <span>
-              API Token · {{ tokenSourceText(settings.tokenSource) }}
+              {{ t('settings.apiTokenLine', { source: tokenSourceText(settings.tokenSource) }) }}
+              <a
+                href="https://github.com/O96u/PicHost/releases"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="inline-flex items-center gap-0.5 text-primary underline-offset-2 hover:underline"
+                :title="t('settings.viewReleases')"
+              >
+                v{{ settings.appVersion }}
+                <UIcon
+                  name="i-lucide-external-link"
+                  class="size-3 opacity-70"
+                />
+              </a>
              <template v-if="hasServerChanges">
-                · <span class="text-warning">有未保存的更改</span>
+                · <span class="text-warning">{{ t('settings.unsavedChanges') }}</span>
              </template>
            </span>
          </div>
          <div class="flex flex-wrap items-center gap-2">
            <UButton
-              label="管理 Token"
+              :label="t('settings.manageToken')"
              icon="i-lucide-external-link"
              variant="outline"
              color="neutral"
@@ -344,7 +362,7 @@ watch(isAuthenticated, async (authed) => {
              to="/api"
            />
            <UButton
-              label="保存"
+              :label="t('common.save')"
              icon="i-lucide-save"
              size="sm"
              :loading="savingServer"
@@ -7,8 +7,10 @@ const route = useRoute()
 const router = useRouter()
 const { setup, migrate, fetchStatus } = useAuth()
 const toast = useToast()
+const { t } = useI18n()

-const isMigrate = computed(() => route.query.migrate === '1')
+const needsMigration = ref(false)
+const isMigrate = computed(() => needsMigration.value || route.query.migrate === '1')

 const username = ref('')
 const password = ref('')
@@ -25,6 +27,11 @@ const canSubmit = computed(() =>

 onMounted(async () => {
  const status = await fetchStatus()
+  needsMigration.value = status.needsMigration
+  if (status.legacyMode && !status.needsMigration) {
+    await router.replace('/')
+    return
+  }
  if (status.initialized && !status.needsMigration) {
    await router.replace('/')
  }
@@ -34,7 +41,7 @@ async function submit() {
  if (!canSubmit.value || loading.value) return

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

@@ -51,7 +58,7 @@ async function submit() {

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

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

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

        <UButton
          type="submit"
-          :label="isMigrate ? '完成迁移' : '创建并进入'"
+          :label="isMigrate ? t('setup.migrateSubmit') : t('setup.initSubmit')"
          icon="i-lucide-user-plus"
          size="lg"
          block
@@ -35,19 +35,27 @@ const {
  activeSearch,
  listSummary,
  refreshList,
-  initializeList,
+  fetchList,
+  fetchSearch,
+  fetchTotal,
  setActiveFolder,
  submitSearch,
  goToPage,
-  removeItems
+  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())
@@ -56,13 +64,22 @@ 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: '全部', value: 'all' },
+  { 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 = [
@@ -104,16 +121,16 @@ const uploadChartTotal = computed(() =>
 const statCards = computed(() => {
  const s = stats.value
  const base = [
-    { label: '今日上传', value: s?.uploadToday ?? '—' },
-    { label: '本月上传', value: s?.uploadMonth ?? '—' },
-    { label: '累计上传', value: s?.uploadTotal ?? '—' },
-    { label: '当前库存', value: s?.storedCount ?? '—' },
-    { label: '今日删除', value: s?.deleteToday ?? '—' },
-    { label: '本月删除', value: s?.deleteMonth ?? '—' },
+    { 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: '注册用户数量', value: s?.userCount ?? '—' }
-      : { label: '累计删除', value: s?.deleteTotal ?? '—' },
-    { label: '累计上传体积', value: s ? formatFileSize(s.uploadBytesTotal) : '—' }
+      ? { 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
 })
@@ -150,7 +167,7 @@ async function refreshStats() {
  } catch (error: unknown) {
    handleAuthError(error)
    if (isAuthenticated.value) {
-      toast.add({ title: '加载统计失败', color: 'error' })
+      toast.add({ title: t('stats.loadFailed'), color: 'error' })
    }
  } finally {
    statsLoading.value = false
@@ -161,19 +178,42 @@ async function refreshGallery() {
  if (!isAuthenticated.value) return
  selectedKeys.value = new Set()
  try {
-    await Promise.all([refreshList(), loadFolders()])
+    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
-  currentFolder.value = 'all'
-  await Promise.all([
-    refreshStats(),
-    initializeList('all').then(() => loadFolders())
-  ])
+  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) {
@@ -187,6 +227,17 @@ async function handleFolderChange(folder: string) {
  }
 }

+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()
@@ -212,7 +263,7 @@ function requestDelete(key: string) {
 function requestBatchDelete() {
  if (!isAuthenticated.value) return
  if (!selectedCount.value) {
-    toast.add({ title: '请先选择图片', color: 'warning' })
+    toast.add({ title: t('stats.selectFirst'), color: 'warning' })
    return
  }
  deleteTargetKeys.value = Array.from(selectedKeys.value)
@@ -249,7 +300,7 @@ async function confirmDelete() {
      }
      selectedKeys.value = new Set(selectedKeys.value)
      toast.add({
-        title: `已删除 ${deleted.length} 张图片`,
+        title: t('stats.deleted', { n: deleted.length }),
        color: 'success'
      })
      await refreshStats()
@@ -257,7 +308,7 @@ async function confirmDelete() {

    if (failed.length) {
      toast.add({
-        title: `${failed.length} 张图片删除失败`,
+        title: t('stats.deletePartialFail', { n: failed.length }),
        color: 'error'
      })
    }
@@ -267,7 +318,7 @@ async function confirmDelete() {
  } catch (error: unknown) {
    handleAuthError(error)
    if (isAuthenticated.value) {
-      toast.add({ title: '删除失败', color: 'error' })
+      toast.add({ title: t('stats.deleteFailed'), color: 'error' })
    }
  } finally {
    batchDeleting.value = false
@@ -292,6 +343,9 @@ onMounted(async () => {
    return
  }
  await checkSession()
+  if (isAuthenticated.value) {
+    await refreshAll()
+  }
 })

 onUnmounted(() => {
@@ -322,7 +376,7 @@ watch(isAuthenticated, async (authed, prev) => {
          class="size-8 animate-spin"
        />
        <p class="text-sm">
-          正在验证登录状态…
+          {{ t('common.loadingSession') }}
        </p>
      </div>
    </div>
@@ -330,21 +384,24 @@ watch(isAuthenticated, async (authed, prev) => {
    <AdminLoginGate v-else-if="!isAuthenticated" />

    <AppShell v-else>
-      <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div>
+      <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"
-          label="刷新"
-          variant="outline"
-          :loading="statsLoading || galleryLoading"
+          variant="ghost"
+          color="neutral"
+          size="sm"
+          class="mt-0.5 shrink-0"
+          :aria-label="t('common.refresh')"
+          :loading="pageRefreshing"
          @click="refreshAll"
        />
      </div>
@@ -367,13 +424,13 @@ watch(isAuthenticated, async (authed, prev) => {
      <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
@@ -384,13 +441,13 @@ watch(isAuthenticated, async (authed, prev) => {

        <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
@@ -403,7 +460,7 @@ watch(isAuthenticated, async (authed, prev) => {
              <div class="mb-1 flex items-center justify-between gap-2 text-xs">
                <span class="font-medium">{{ item.folder }}</span>
                <span class="tabular-nums text-muted">
-                  {{ item.count }} 张 · {{ formatFileSize(item.bytes) }}
+                  {{ t('stats.folderCount', { count: item.count, size: formatFileSize(item.bytes) }) }}
                </span>
              </div>
              <div class="h-1.5 overflow-hidden rounded-full bg-muted/50">
@@ -418,86 +475,93 @@ watch(isAuthenticated, async (authed, prev) => {
      </section>

      <section class="space-y-4">
-        <form
-          class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
-          @submit.prevent="handleSearch"
-        >
-          <div class="min-w-0 shrink-0">
+        <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="text-sm text-muted"
+              class="mt-0.5 text-sm text-muted"
            >
              {{ listSummary }}
            </p>
          </div>

-          <div class="flex flex-wrap items-center justify-end gap-2">
-            <div class="flex items-center gap-1.5">
-              <span class="text-xs text-muted shrink-0">目录</span>
-              <USelect
-                v-model="currentFolder"
-                :items="folderSelectItems"
-                class="w-28"
-                @update:model-value="handleFolderChange"
-              />
-            </div>
-
-            <UInput
-              v-model="searchQuery"
-              icon="i-lucide-search"
-              placeholder="搜索文件名"
-              class="w-40 sm:w-48"
-              size="sm"
-              :disabled="galleryLoading"
-            />
-
-            <UButton
-              type="submit"
-              label="搜索"
-              size="sm"
-              :loading="galleryLoading"
-            />
-            <UButton
-              v-if="activeSearch"
-              type="button"
-              label="清除"
-              size="sm"
-              variant="ghost"
-              color="neutral"
-              @click="clearSearch"
-            />
-
-            <UButton
-              type="button"
-              icon="i-lucide-refresh-cw"
-              label="刷新"
-              variant="outline"
-              size="sm"
-              :loading="galleryLoading"
-              @click="refreshGallery"
-            />
+          <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"
            >
-              已选 {{ selectedCount }}
+              {{ 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"
-              label="批量删除"
              color="error"
              variant="soft"
              size="sm"
+              class="shrink-0"
+              :aria-label="t('stats.batchDelete')"
              :disabled="!selectedCount"
              @click="requestBatchDelete"
-            />
-          </div>
-        </form>
+            >
+              <span class="hidden sm:inline">{{ t('stats.batchDelete') }}</span>
+            </UButton>
+          </form>
+        </div>

        <div
          v-if="galleryLoading"
@@ -512,6 +576,8 @@ watch(isAuthenticated, async (authed, prev) => {

        <ImageGrid
          v-else
+          :show-key="false"
+          show-storage
          :items="items"
          :selected-keys="selectedKeys"
          :deleting-keys="deletingKeys"
@@ -524,7 +590,7 @@ watch(isAuthenticated, async (authed, prev) => {
          :page="galleryPage"
          :total-pages="galleryTotalPages"
          :total="galleryTotal"
-          unit="张"
+          :unit="t('common.imagesUnit')"
          :loading="galleryLoading"
          @update:page="handleGalleryPageChange"
        />
@@ -540,7 +606,7 @@ watch(isAuthenticated, async (authed, prev) => {
      <UButton
        v-show="showScrollTop"
        icon="i-lucide-arrow-up"
-        aria-label="回到顶部"
+        :aria-label="t('stats.scrollTop')"
        color="primary"
        class="fixed bottom-6 right-6 z-50 shadow-lg"
        size="lg"
@@ -0,0 +1,352 @@
+<script setup lang="ts">
+import type { StorageFormPayload } from '~/components/storage/StorageBackendForm.vue'
+import type { StorageBackendItem, StorageListResponse } from '~/types/storage'
+
+const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
+const toast = useToast()
+const { t } = useI18n()
+
+const loading = ref(true)
+const busyId = ref<string | null>(null)
+const storageData = ref<StorageListResponse | null>(null)
+
+const formOpen = ref(false)
+const formMode = ref<'create' | 'edit'>('create')
+const editingBackend = ref<StorageBackendItem | null>(null)
+const formInstanceKey = ref('create')
+const savingForm = ref(false)
+
+const deleteOpen = ref(false)
+const deleteTarget = ref<StorageBackendItem | null>(null)
+const deleteConfirmName = ref('')
+const deleting = ref(false)
+
+async function loadStorage() {
+  loading.value = true
+  try {
+    storageData.value = await $fetch<StorageListResponse>('/api/admin/storage', {
+      credentials: 'include'
+    })
+  } catch (error: unknown) {
+    handleAuthError(error)
+    if (isAuthenticated.value) {
+      toast.add({ title: t('storage.loadFailed'), color: 'error' })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+const { quotaToBytes } = useFileSize()
+
+function buildPatchBody(payload: StorageFormPayload) {
+  const quotaBytes = quotaToBytes(payload.quotaValue, payload.quotaUnit)
+  const body: Record<string, unknown> = {
+    name: payload.name,
+    servingMode: payload.servingMode,
+    publicUrl: payload.publicUrl,
+    quotaBytes,
+    config: payload.config
+  }
+  if (payload.secrets.accessKeyId || payload.secrets.secretAccessKey) {
+    body.secrets = payload.secrets
+  }
+  return body
+}
+
+function openCreate() {
+  formMode.value = 'create'
+  editingBackend.value = null
+  formInstanceKey.value = `create-${Date.now()}`
+  formOpen.value = true
+}
+
+function openEdit(backend: StorageBackendItem) {
+  formMode.value = 'edit'
+  editingBackend.value = backend
+  formInstanceKey.value = backend.id
+  formOpen.value = true
+}
+
+async function onFormSubmit(payload: StorageFormPayload) {
+  if (!quotaToBytes(payload.quotaValue, payload.quotaUnit)) {
+    toast.add({ title: t('storage.quotaRequired'), color: 'warning' })
+    return
+  }
+
+  if (formMode.value === 'create') {
+    if (!payload.secrets.accessKeyId || !payload.secrets.secretAccessKey) {
+      toast.add({ title: t('storage.secretsRequired'), color: 'warning' })
+      return
+    }
+  }
+
+  savingForm.value = true
+  try {
+    const body = buildPatchBody(payload)
+    if (formMode.value === 'create') {
+      await $fetch('/api/admin/storage', {
+        method: 'POST',
+        credentials: 'include',
+        body
+      })
+      toast.add({ title: t('storage.created'), color: 'success' })
+    } else if (editingBackend.value) {
+      await $fetch(`/api/admin/storage/${editingBackend.value.id}`, {
+        method: 'PATCH',
+        credentials: 'include',
+        body
+      })
+      toast.add({ title: t('storage.saved'), color: 'success' })
+    }
+    formOpen.value = false
+    await loadStorage()
+  } catch {
+    toast.add({ title: t('storage.saveFailed'), color: 'error' })
+  } finally {
+    savingForm.value = false
+  }
+}
+
+async function setDefault(backend: StorageBackendItem) {
+  busyId.value = backend.id
+  try {
+    await $fetch(`/api/admin/storage/${backend.id}`, {
+      method: 'PATCH',
+      credentials: 'include',
+      body: { isDefault: true, enabled: true }
+    })
+    toast.add({ title: t('storage.defaultUpdated'), color: 'success' })
+    await loadStorage()
+  } catch {
+    toast.add({ title: t('storage.saveFailed'), color: 'error' })
+  } finally {
+    busyId.value = null
+  }
+}
+
+async function testBackend(backend: StorageBackendItem) {
+  busyId.value = backend.id
+  try {
+    const result = await $fetch<{ ok: boolean, message: string }>(
+      `/api/admin/storage/${backend.id}/test`,
+      { method: 'POST', credentials: 'include' }
+    )
+    toast.add({
+      title: result.ok ? t('storage.testSuccess') : t('storage.testFailed'),
+      description: result.message,
+      color: result.ok ? 'success' : 'error'
+    })
+  } catch {
+    toast.add({ title: t('storage.testFailed'), color: 'error' })
+  } finally {
+    busyId.value = null
+  }
+}
+
+async function toggleEnabled(backend: StorageBackendItem) {
+  busyId.value = backend.id
+  try {
+    await $fetch(`/api/admin/storage/${backend.id}`, {
+      method: 'PATCH',
+      credentials: 'include',
+      body: { enabled: !backend.enabled }
+    })
+    await loadStorage()
+  } catch {
+    toast.add({ title: t('storage.saveFailed'), color: 'error' })
+  } finally {
+    busyId.value = null
+  }
+}
+
+function confirmDelete(backend: StorageBackendItem) {
+  if (backend.usage.count > 0) {
+    toast.add({ title: t('storage.deleteBlockedImages'), color: 'warning' })
+    return
+  }
+  deleteTarget.value = backend
+  deleteConfirmName.value = backend.name
+  deleteOpen.value = true
+}
+
+async function executeDelete() {
+  const target = deleteTarget.value
+  if (!target) return
+  deleting.value = true
+  try {
+    await $fetch(`/api/admin/storage/${target.id}`, {
+      method: 'DELETE',
+      credentials: 'include'
+    })
+    toast.add({ title: t('storage.deleted'), color: 'success' })
+    deleteOpen.value = false
+    deleteTarget.value = null
+    await loadStorage()
+  } catch (error: unknown) {
+    const message = typeof error === 'object' && error !== null && 'data' in error
+      ? String((error as { data?: { message?: string } }).data?.message ?? '')
+      : ''
+    toast.add({
+      title: message || t('storage.deleteFailed'),
+      color: 'error'
+    })
+  } finally {
+    deleting.value = false
+  }
+}
+
+onMounted(async () => {
+  const status = await fetchStatus()
+  if (!status.initialized && !status.legacyMode) {
+    await navigateTo('/setup')
+    return
+  }
+  await checkSession()
+  if (!isAuthenticated.value || !isAdmin.value) {
+    await navigateTo('/')
+    return
+  }
+  await loadStorage()
+})
+
+watch(isAuthenticated, async (authed) => {
+  if (authed && isAdmin.value) {
+    await loadStorage()
+  }
+})
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div
+      v-if="isChecking"
+      class="flex min-h-screen items-center justify-center"
+    >
+      <UIcon
+        name="i-lucide-loader-circle"
+        class="size-8 animate-spin text-muted"
+      />
+    </div>
+
+    <AdminLoginGate v-else-if="!isAuthenticated" />
+
+    <AppShell v-else-if="isAdmin">
+      <section class="overflow-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-5 py-4 sm:px-6">
+          <div class="flex items-start gap-2">
+            <UIcon
+              name="i-lucide-hard-drive"
+              class="mt-0.5 size-5 shrink-0 text-primary"
+            />
+            <div>
+              <h1 class="text-base font-semibold">
+                {{ t('storage.pageTitle') }}
+              </h1>
+              <p class="mt-0.5 text-xs text-muted">
+                {{ t('storage.pageSubtitle') }}
+              </p>
+            </div>
+          </div>
+          <UButton
+            :label="t('storage.addBackend')"
+            icon="i-lucide-plus"
+            size="sm"
+            :disabled="storageData?.envOverride"
+            @click="openCreate"
+          />
+        </div>
+
+        <div class="p-5 sm:p-6">
+          <UAlert
+            v-if="storageData?.envOverride"
+            color="warning"
+            variant="subtle"
+            class="mb-5"
+            :title="t('storage.envOverride')"
+            icon="i-lucide-triangle-alert"
+          />
+
+          <p class="mb-5 text-xs text-muted">
+            {{ t('storage.switchHint') }}
+          </p>
+
+          <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
+            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"
+              @set-default="setDefault(backend)"
+              @edit="openEdit(backend)"
+              @test="testBackend(backend)"
+              @toggle-enabled="toggleEnabled(backend)"
+              @delete="confirmDelete(backend)"
+            />
+          </div>
+        </div>
+      </section>
+    </AppShell>
+
+    <UModal v-model:open="formOpen">
+      <template #content>
+        <div class="p-5 sm:p-6">
+          <h2 class="mb-4 text-base font-semibold">
+            {{ formMode === 'create' ? t('storage.addBackend') : t('storage.editBackend') }}
+          </h2>
+          <div class="max-h-[75vh] overflow-y-auto pr-1">
+            <StorageBackendForm
+              :key="formInstanceKey"
+              :backend="editingBackend"
+              :create-mode="formMode === 'create'"
+              :saving="savingForm"
+              @submit="onFormSubmit"
+              @cancel="formOpen = false"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+
+    <UModal v-model:open="deleteOpen">
+      <template #content>
+        <div class="p-5 sm:p-6">
+          <h2 class="text-base font-semibold">
+            {{ t('storage.deleteConfirmTitle') }}
+          </h2>
+          <p class="mt-2 text-sm text-muted">
+            {{ t('storage.deleteConfirmBody', { name: deleteConfirmName }) }}
+          </p>
+          <div class="mt-5 flex justify-end gap-2">
+            <UButton
+              :label="t('common.cancel')"
+              variant="outline"
+              color="neutral"
+              @click="() => { deleteOpen = false }"
+            />
+            <UButton
+              :label="t('common.delete')"
+              color="error"
+              :loading="deleting"
+              @click="executeDelete"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
@@ -36,6 +36,12 @@ export interface ImageItem {
    userId: number | null
    username: string
  }
+  /** 图片所在存储后端（统计/管理列表） */
+  storage?: {
+    id: string
+    name: string
+    type: 'local' | 's3'
+  }
 }

 export interface UploadErrorItem {
@@ -0,0 +1,43 @@
+export type LogAction = 'upload' | 'delete'
+export type LogSource = 'web' | 'api' | 'twikoo'
+
+export interface ActivityLogUser {
+  id: number
+  username: string
+}
+
+export interface ActivityLogStorage {
+  id: string
+  name: string
+  type: 'local' | 's3'
+}
+
+export interface ActivityLogItem {
+  id: number
+  action: LogAction
+  key: string
+  originalName: string
+  size: number
+  contentType: string
+  source: LogSource
+  userId: number | null
+  username: string | null
+  storage: ActivityLogStorage | null
+  createdAt: string
+}
+
+export interface ActivityLogSummary {
+  total: number
+  upload: number
+  delete: number
+}
+
+export interface ActivityLogListResponse {
+  items: ActivityLogItem[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+  summary: ActivityLogSummary
+  users?: ActivityLogUser[]
+}
@@ -0,0 +1,39 @@
+export type ServingMode = 'proxy' | 'public'
+
+export interface StorageCapacity {
+  totalBytes: number | null
+  usedBytes: number
+  freeBytes: number | null
+  percent: number | null
+  source: 'disk' | 'quota'
+}
+
+export interface StorageBackendItem {
+  id: string
+  name: string
+  type: 'local' | 's3'
+  config: {
+    endpoint?: string
+    region?: string
+    bucket?: string
+    prefix?: string
+    forcePathStyle?: boolean
+  }
+  secretsMasked: {
+    accessKeyId?: string
+    secretAccessKey?: string
+  }
+  servingMode: ServingMode
+  publicUrl: string
+  quotaBytes: number | null
+  enabled: boolean
+  isDefault: boolean
+  usage: { count: number, bytes: number }
+  capacity: StorageCapacity
+}
+
+export interface StorageListResponse {
+  backends: StorageBackendItem[]
+  activeBackendId: string
+  envOverride: boolean
+}
@@ -7,7 +7,7 @@ export interface PasswordCriteria {
  hasSpecial: boolean
 }

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

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

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

  return {
    criteria,
@@ -4,8 +4,6 @@ services:
    # 飞牛 Docker 对 Docker Hub 的「更新镜像」支持更好
    image: muxui/pichost:latest
    pull_policy: always
-    # 备用：GitHub Container Registry
-    # image: ghcr.io/O96u/pichost:latest
    container_name: pichost
    restart: unless-stopped
    ports:
@@ -0,0 +1,8 @@
+#!/bin/sh
+set -e
+
+if [ "$1" = "reset-password" ]; then
+  exec node /app/server/cli/reset-password.mjs
+fi
+
+exec node /app/.output/server/index.mjs "$@"
@@ -0,0 +1,53 @@
+# PicHost 文档资源
+
+本目录主要存放 README 引用的界面截图与分支说明。
+
+## 分支
+
+| 分支 | 说明 |
+| ---- | ---- |
+| [**main**](https://github.com/O96u/PicHost/tree/main)（默认） | **v1.1.0** 主线：本地磁盘 + 多对象存储（R2 / COS / OSS / AWS）、`/storage` 管理页、混合直链 |
+| [**cloudflare**](https://github.com/O96u/PicHost/tree/cloudflare) | **Cloudflare R2 专用线**：面向「只用 R2」的部署场景，配置更聚焦 R2 |
+
+- 需要多种云存储或完整管理界面 → 使用 **main**
+- 图床只接 **Cloudflare R2** → 可选用 **`cloudflare`** 分支
+
+## 截图一览
+
+以下为 **main（v1.1.0）** 界面截图。
+
+| 文件 | 说明 |
+| ---- | ---- |
+| `screenshots/upload.png` | 首页上传区（顶栏含 API / 统计 / 存储 / 设置） |
+| `screenshots/storage.png` | 存储管理（`/storage`）：多后端卡片、用量、设默认 |
+| `screenshots/stats.png` | 统计与图库 |
+| `screenshots/settings.png` | 系统设置（上传偏好 + 系统设置） |
+| `screenshots/preferences.png` | 首页上传卡片翻转后的上传偏好 |
+| `screenshots/login.png` | 登录页 |
+
+## 相关页面路由（main / v1.1.0）
+
+| 路由 | 权限 | 说明 |
+| ---- | ---- | ---- |
+| `/` | 登录用户 | 上传与图库入口 |
+| `/storage` | 管理员 | 存储后端管理 |
+| `/settings` | 管理员 | 系统设置 |
+| `/stats` | 登录用户 | 统计 |
+| `/api` | 登录用户 | API 文档与 Token |
+
+管理员顶栏：**API** · **统计** · **存储** · **设置**。用户下拉菜单仅 **修改密码**、**退出登录**。
+
+## Cloudflare R2 配置对照
+
+**main**：后台 **存储 → 添加存储 → Cloudflare R2** 预设。
+
+**cloudflare 分支**（R2 专用）：通常以环境变量为主：
+
+| 配置项 | 值 |
+| ------ | -- |
+| `STORAGE_BACKEND` | `s3` |
+| `S3_ENDPOINT` | `https://<account_id>.r2.cloudflarestorage.com` |
+| `S3_REGION` | `auto` |
+| `S3_BUCKET` | 桶名 |
+| `S3_ACCESS_KEY` / `S3_SECRET_KEY` | R2 API Token |
+| 直链 | 默认 PicHost 代理；桶绑域名后可改公开 URL |
@@ -0,0 +1,422 @@
+{
+  "app": {
+    "title": "PicHost - Image Hosting",
+    "description": "A lightweight self-hosted image hosting system",
+    "tagline": "Personal lightweight image host"
+  },
+  "common": {
+    "loadingSession": "Verifying session…",
+    "save": "Save",
+    "cancel": "Cancel",
+    "copy": "Copy",
+    "delete": "Delete",
+    "edit": "Edit",
+    "search": "Search",
+    "refresh": "Refresh",
+    "back": "Back",
+    "all": "All",
+    "notConfigured": "(not configured)",
+    "countImages": "{count} images",
+    "itemsUnit": "items",
+    "imagesUnit": "images",
+    "more": "More"
+  },
+  "nav": {
+    "api": "API",
+    "stats": "Stats",
+    "logs": "Activity log",
+    "settings": "Settings",
+    "storage": "Storage",
+    "menu": "Menu",
+    "language": "Language",
+    "appearance": "Appearance",
+    "account": "Account",
+    "backToUpload": "Back to upload",
+    "changePassword": "Change password",
+    "systemSettings": "System settings",
+    "logout": "Log out"
+  },
+  "theme": {
+    "switch": "Switch theme",
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System"
+  },
+  "locale": {
+    "switch": "Switch language",
+    "zh-CN": "简体中文",
+    "en": "English"
+  },
+  "auth": {
+    "username": "Username",
+    "password": "Password",
+    "confirmPassword": "Confirm password",
+    "login": "Log in",
+    "register": "Register",
+    "adminSecret": "Admin secret",
+    "adminSecretPlaceholder": "Enter ADMIN_SECRET",
+    "legacyHint": "Legacy deployment: sign in with the secret to migrate to username/password",
+    "noAccount": "No account?",
+    "hasAccount": "Already have an account?",
+    "backToLogin": "Back to login",
+    "loginFooter": "Upload and management require sign-in",
+    "loginSuccess": "Signed in",
+    "loginFailedSecret": "Sign-in failed. Check your secret",
+    "loginFailedCredentials": "Invalid username or password",
+    "loginFailed": "Sign-in failed. Check username and password",
+    "registerFailed": "Registration failed. Check your input",
+    "setupFailed": "Setup failed. Check your input",
+    "migrateFailed": "Migration failed. Check your input",
+    "passwordMismatch": "Passwords do not match",
+    "showPassword": "Show password",
+    "hidePassword": "Hide password",
+    "registerSuccess": "Registered successfully",
+    "errors": {
+      "invalidUsername": "Username must be 3–32 letters, numbers, or underscores",
+      "invalidPassword": "Password must be at least 8 characters"
+    }
+  },
+  "setup": {
+    "migrateTitle": "Migrate to username/password",
+    "initTitle": "First run — create admin account",
+    "usernamePlaceholder": "3–32 letters, numbers, or underscores",
+    "passwordPlaceholder": "Set login password",
+    "confirmPlaceholder": "Enter password again",
+    "allowRegistration": "Allow user registration",
+    "migrateSubmit": "Complete migration",
+    "initSubmit": "Create and continue",
+    "migrateSuccess": "Migration complete",
+    "initSuccess": "Setup complete"
+  },
+  "register": {
+    "title": "Register",
+    "subtitle": "Create a PicHost user account"
+  },
+  "password": {
+    "title": "Change password",
+    "subtitle": "Update your login password",
+    "current": "Current password",
+    "new": "New password",
+    "confirmNew": "Confirm new password",
+    "newPlaceholder": "Set new password",
+    "changed": "Password updated",
+    "tooShort": "New password must be at least 8 characters",
+    "changeFailed": "Failed to change password",
+    "strength": "Password strength",
+    "weak": "Weak",
+    "medium": "Medium",
+    "strong": "Strong",
+    "ruleMinLength": "At least {n} characters",
+    "ruleMixedCase": "Upper and lower case letters",
+    "ruleNumber": "Contains a number",
+    "ruleSpecial": "Contains a special character"
+  },
+  "upload": {
+    "title": "Drop images here to upload",
+    "hint": "Or click to select files, press {ctrl} + {v} to paste",
+    "formats": "JPEG / PNG / WebP / GIF / SVG / ICO, max 10 MB each, up to 10 files per batch",
+    "selectFiles": "Select images",
+    "settings": "Upload settings",
+    "progress": "Upload progress",
+    "statusPending": "Pending",
+    "statusUploading": "Uploading",
+    "statusSuccess": "Done",
+    "statusError": "Failed",
+    "selectImages": "Select images to upload",
+    "maxFiles": "Up to {n} images per upload",
+    "uploadSuccess": "Uploaded {n} image(s)",
+    "uploadPartialFail": "{n} image(s) failed to upload",
+    "uploadFailed": "Upload failed",
+    "loginRequired": "Please sign in first",
+    "sessionTitle": "This session",
+    "sessionEmpty": "No uploads in this session"
+  },
+  "copy": {
+    "url": "URL",
+    "markdown": "Markdown",
+    "html": "HTML",
+    "copied": "Copied to clipboard",
+    "copiedLabel": "Copied {label}",
+    "copiedUrl": "URL copied",
+    "copiedMarkdown": "Markdown copied",
+    "copiedHtml": "HTML copied",
+    "copiedFormat": "Copied {format}",
+    "failed": "Copy failed",
+    "failedManual": "Copy failed — select the link manually",
+    "curl": "cURL example copied"
+  },
+  "preferences": {
+    "title": "Upload preferences",
+    "subtitle": "Browser-local and account settings for your uploads only",
+    "back": "Back to upload",
+    "processing": "Image processing",
+    "clientCompress": "Client-side compression",
+    "clientCompressHint": "Compress in the browser before upload (server still converts to WebP)",
+    "autoDeletePrefix": "Auto-delete after",
+    "autoDeleteSuffix": "days",
+    "autoDeleteHint": "Only affects images uploaded after enabling; existing images are kept",
+    "webpQuality": "WebP quality",
+    "webpQualityHint": "Client compression quality (1–100); requires client-side compression",
+    "current": "Current: {n}",
+    "qualityHigh": "High quality",
+    "qualityMedium": "Medium quality",
+    "qualityLow": "Lossy",
+    "convenience": "Convenience",
+    "autoCopy": "Copy link after upload",
+    "autoCopyHint": "Copy to clipboard in the selected format"
+  },
+  "settings": {
+    "title": "System settings",
+    "subtitle": "Saved to database; environment variables take precedence",
+    "uploadAccount": "Upload & accounts",
+    "defaultFolder": "Default upload folder",
+    "defaultFolderHint": "Stored in this browser only; affects your upload target",
+    "allowRegistration": "Open registration",
+    "allowRegistrationHint": "Allow new users to register (regular users see only their images)",
+    "accessControl": "Access control",
+    "refererHint": "Referer hotlink protection; comma-separated hostnames, empty = no restriction",
+    "refererPlaceholder": "example.com, www.example.com",
+    "linkGeneration": "Link generation",
+    "imageBaseUrlHint": "Public URL prefix for generated links; use your public domain behind a reverse proxy",
+    "imageBaseUrlPlaceholder": "https://pic.example.com",
+    "imageBaseUrlActive": "Active: {url}",
+    "badgeEnv": ".env",
+    "badgeSaved": "Saved",
+    "badgeDefault": "Default",
+    "badgeUnset": "Not set",
+    "tokenEnv": "Environment",
+    "tokenDb": "Generated in app",
+    "tokenNone": "Not configured",
+    "apiTokenLine": "API Token · {source} ·",
+    "viewReleases": "View releases",
+    "unsavedChanges": "Unsaved changes",
+    "manageToken": "Manage token",
+    "envOverride": "Overridden by environment variable; cannot edit in UI",
+    "saved": "Settings saved",
+    "saveFailed": "Failed to save settings",
+    "loadFailed": "Failed to load settings"
+  },
+  "storage": {
+    "title": "Storage",
+    "subtitle": "New uploads go to the active backend; existing images keep their backend",
+    "activeBackend": "Active backend",
+    "backendLocal": "Local disk",
+    "backendCloud": "Cloud storage",
+    "backendS3": "Cloud storage",
+    "switchHint": "Switching only affects new uploads",
+    "provider": "Preset",
+    "providerR2": "Cloudflare R2",
+    "providerCos": "Tencent COS",
+    "providerOss": "Alibaba OSS",
+    "providerAws": "AWS S3",
+    "providerCustom": "Custom",
+    "endpoint": "Endpoint",
+    "region": "Region",
+    "bucket": "Bucket",
+    "prefix": "Key prefix (optional)",
+    "prefixPlaceholder": "e.g. pichost",
+    "forcePathStyle": "Force path-style access",
+    "accessKey": "Access Key",
+    "secretKey": "Secret Key",
+    "servingMode": "Serving mode",
+    "servingProxy": "Proxy (same origin)",
+    "servingPublic": "Public URL (302 to CDN)",
+    "servingHint": "In public mode, configure referer protection on CDN/bucket",
+    "publicUrl": "Public base URL",
+    "publicUrlPlaceholder": "https://cdn.example.com",
+    "testConnection": "Test connection",
+    "testSuccess": "Connection successful",
+    "testFailed": "Connection failed",
+    "saved": "Storage settings saved",
+    "saveFailed": "Failed to save storage settings",
+    "loadFailed": "Failed to load storage settings",
+    "envOverride": "Storage is overridden by environment variables",
+    "pageTitle": "Storage management",
+    "pageSubtitle": "Manage backends; new uploads go to the default backend",
+    "addBackend": "Add storage",
+    "editBackend": "Edit storage",
+    "formCreateHint": "Configure cloud storage; set as default after saving to receive new uploads",
+    "formEditHint": "Update connection settings; leave keys blank to keep existing secrets",
+    "sectionBasic": "Basic",
+    "sectionConnection": "Connection",
+    "sectionCredentials": "Credentials",
+    "sectionAccess": "Access",
+    "sectionQuota": "Quota",
+    "advancedOptions": "Advanced",
+    "servingProxyShort": "Proxy",
+    "servingPublicShort": "Public",
+    "backendName": "Display name",
+    "badgeDefault": "Default",
+    "badgeDisabled": "Disabled",
+    "badgeEnabled": "Enabled",
+    "statTotal": "Total",
+    "statUsed": "Used",
+    "statFree": "Free",
+    "usageRate": "Usage",
+    "indexImages": "PicHost images {count} · {size}",
+    "setDefault": "Set as default",
+    "actionSetDefault": "Default",
+    "actionTest": "Test",
+    "disable": "Disable",
+    "enable": "Enable",
+    "usageCount": "{count} images",
+    "quotaTotal": "Plan size",
+    "quotaPlaceholder": "e.g. 10",
+    "quotaHint": "Enter your cloud plan size; used space is calculated from PicHost image index",
+    "quotaRequired": "Enter a valid plan size",
+    "notConfigured": "Not configured",
+    "created": "Storage backend added",
+    "deleted": "Storage backend deleted",
+    "deleteFailed": "Delete failed",
+    "deleteBlockedImages": "This backend still has images. Move or delete them before removing the backend.",
+    "defaultUpdated": "Default backend updated",
+    "deleteConfirmTitle": "Delete storage",
+    "deleteConfirmBody": "Delete “{name}”? This cannot be undone.",
+    "secretsRequired": "Access Key and Secret Key are required for new storage",
+    "manageStorage": "Manage object storage",
+    "manageStorageHint": "Configure R2 / S3 / COS backends and URL serving"
+  },
+  "stats": {
+    "title": "Statistics",
+    "subtitle": "Overview and gallery",
+    "uploadToday": "Uploaded today",
+    "uploadMonth": "Uploaded this month",
+    "uploadTotal": "Total uploads",
+    "storedCount": "Stored images",
+    "deleteToday": "Deleted today",
+    "deleteMonth": "Deleted this month",
+    "deleteTotal": "Total deleted",
+    "userCount": "Registered users",
+    "uploadBytes": "Total upload size",
+    "folderDistribution": "Uploads by folder",
+    "folderUsage": "Storage by folder",
+    "noData": "No data",
+    "folderCount": "{count} · {size}",
+    "gallery": "Gallery",
+    "folder": "Folder",
+    "filterStorageAll": "All storage",
+    "storage": "Storage",
+    "searchPlaceholder": "Search filename",
+    "clear": "Clear",
+    "selected": "{n} selected",
+    "batchDelete": "Delete selected",
+    "scrollTop": "Back to top",
+    "loadFailed": "Failed to load statistics",
+    "selectFirst": "Select images first",
+    "deleted": "Deleted {n} image(s)",
+    "deletePartialFail": "{n} image(s) failed to delete",
+    "deleteFailed": "Delete failed",
+    "deletedSingle": "Deleted",
+    "allFolders": "All",
+    "counting": "Counting…",
+    "summarySearch": "{folder} · Search “{q}” · {total} images",
+    "summaryTotal": "{folder} · {total} images",
+    "summarySearchStorage": "{folder} · {storage} · Search “{q}” · {total} images",
+    "summaryTotalStorage": "{folder} · {storage} · {total} images"
+  },
+  "logs": {
+    "pageTitle": "Activity log",
+    "pageSubtitle": "Your upload and delete history",
+    "pageSubtitleAdmin": "Upload and delete history for all users",
+    "loadFailed": "Failed to load activity log",
+    "empty": "No activity yet",
+    "entriesUnit": "entries",
+    "filterActionAll": "All actions",
+    "filterSourceAll": "All sources",
+    "filterUserAll": "All users",
+    "searchPlaceholder": "Search filename",
+    "summaryAll": "All · {total} entries, {upload} uploads, {delete} deletes",
+    "actionUpload": "Upload",
+    "actionDelete": "Delete",
+    "sourceWeb": "Web",
+    "sourceApi": "API",
+    "sourceTwikoo": "Twikoo",
+    "colTime": "Time",
+    "colUser": "User",
+    "colStorage": "Storage",
+    "colAction": "Action",
+    "colSource": "Source",
+    "colFile": "File",
+    "colFolder": "Folder",
+    "colSize": "Size",
+    "colKey": "Path"
+  },
+  "image": {
+    "empty": "No images",
+    "previewFailed": "Preview failed",
+    "uploader": "Uploader: {name}",
+    "storageBackend": "Storage: {name}"
+  },
+  "delete": {
+    "confirmTitle": "Confirm delete",
+    "confirmDesc": "Delete {count} selected image(s)? This cannot be undone.",
+    "confirm": "Delete"
+  },
+  "pagination": {
+    "pageOf": "Page {page} / {totalPages} · {total} {unit}",
+    "totalOnly": "{total} {unit}",
+    "first": "First page",
+    "prev": "Previous page",
+    "next": "Next page",
+    "last": "Last page"
+  },
+  "api": {
+    "tokenTitle": "API Token",
+    "envOverrideTitle": "Token overridden by environment",
+    "envOverrideDesc": "Restart after changing API_UPLOAD_TOKEN; cannot regenerate in UI.",
+    "personalTitle": "Personal API token",
+    "personalDesc": "For your scripts only; uploads belong to your account.",
+    "notConfiguredTitle": "No token configured",
+    "notConfiguredDesc": "Click Regenerate to create a token for Auth-Token on all endpoints below.",
+    "regenerate": "Regenerate",
+    "tokenSourceEnv": "Source: API_UPLOAD_TOKEN environment variable",
+    "tokenSourceDb": "Source: generated in app (can regenerate)",
+    "tokenSourceNone": "Source: not configured",
+    "tokenHeader": "Header:",
+    "tokenInvalidate": "Old token is invalidated immediately after regenerate",
+    "docsTitle": "API reference",
+    "curlExample": "cURL example",
+    "loadFailed": "Failed to load API settings",
+    "regenerateEnvBlocked": "Token is set via environment; cannot regenerate in UI",
+    "regenerateFailed": "Failed to regenerate token",
+    "confirmRegenerateTitle": "Regenerate token?",
+    "confirmRegenerateDesc": "The old token stops working immediately. Update scripts and automation before continuing.",
+    "confirmRegenerate": "Regenerate",
+    "newTokenTitle": "New token generated",
+    "newTokenDesc": "Copy and save it now. You can copy again from the field above after closing.",
+    "copyToken": "Copy token",
+    "saved": "Saved",
+    "docs": {
+      "upload": {
+        "title": "Upload images",
+        "descAdmin": "Upload one or more images. Use image field; folder creates directory if missing. Also accepts file, files, type.",
+        "descUser": "Upload one or more images via image field. Also accepts file, files. Stored under images/."
+      },
+      "list": {
+        "title": "List images",
+        "descAdmin": "Paginated gallery; optional folder filter. limit default 20, max 100.",
+        "descUser": "Paginated list of your images. limit default 20, max 100."
+      },
+      "search": {
+        "title": "Search images",
+        "desc": "Search by filename or path; q is required."
+      },
+      "delete": {
+        "title": "Delete image",
+        "desc": "Delete by key (storage path, e.g. images/2026/08/xxx.webp)."
+      },
+      "batchDelete": {
+        "title": "Batch delete",
+        "desc": "Delete multiple images; request body is a keys array."
+      },
+      "twikoo": {
+        "title": "Twikoo-compatible upload",
+        "desc": "Twikoo / EasyImage 2.0 protocol; stored under twikoo/. Fields: image + token."
+      }
+    }
+  },
+  "userSettings": {
+    "loadFailed": "Failed to load settings",
+    "saveFailed": "Failed to save settings"
+  }
+}
@@ -0,0 +1,422 @@
+{
+  "app": {
+    "title": "PicHost - 个人图床",
+    "description": "个人自用的轻量图床系统",
+    "tagline": "个人轻量图床"
+  },
+  "common": {
+    "loadingSession": "正在验证登录状态…",
+    "save": "保存",
+    "cancel": "取消",
+    "copy": "复制",
+    "delete": "删除",
+    "edit": "编辑",
+    "search": "搜索",
+    "refresh": "刷新",
+    "back": "返回",
+    "all": "全部",
+    "notConfigured": "（未配置）",
+    "countImages": "{count} 张",
+    "itemsUnit": "条",
+    "imagesUnit": "张",
+    "more": "更多"
+  },
+  "nav": {
+    "api": "API",
+    "stats": "统计",
+    "logs": "操作日志",
+    "settings": "设置",
+    "storage": "存储",
+    "menu": "菜单",
+    "language": "语言",
+    "appearance": "外观",
+    "account": "账户",
+    "backToUpload": "返回上传",
+    "changePassword": "修改密码",
+    "systemSettings": "系统设置",
+    "logout": "退出登录"
+  },
+  "theme": {
+    "switch": "切换主题",
+    "light": "浅色",
+    "dark": "深色",
+    "system": "跟随系统"
+  },
+  "locale": {
+    "switch": "切换语言",
+    "zh-CN": "简体中文",
+    "en": "English"
+  },
+  "auth": {
+    "username": "用户名",
+    "password": "密码",
+    "confirmPassword": "确认密码",
+    "login": "登录",
+    "register": "注册",
+    "adminSecret": "管理密钥",
+    "adminSecretPlaceholder": "输入 ADMIN_SECRET",
+    "legacyHint": "遗留部署：使用密钥登录后将引导创建账号",
+    "noAccount": "没有账号？",
+    "hasAccount": "已有账号？",
+    "backToLogin": "返回登录",
+    "loginFooter": "未登录时无法访问上传和管理功能",
+    "loginSuccess": "登录成功",
+    "loginFailedSecret": "登录失败，请检查密钥",
+    "loginFailedCredentials": "用户名或密码错误",
+    "loginFailed": "登录失败，请检查用户名和密码",
+    "registerFailed": "注册失败，请检查输入",
+    "setupFailed": "初始化失败，请检查输入",
+    "migrateFailed": "迁移失败，请检查输入",
+    "passwordMismatch": "两次输入的密码不一致",
+    "showPassword": "显示密码",
+    "hidePassword": "隐藏密码",
+    "registerSuccess": "注册成功",
+    "errors": {
+      "invalidUsername": "用户名需为 3–32 位字母、数字或下划线",
+      "invalidPassword": "密码至少 8 位"
+    }
+  },
+  "setup": {
+    "migrateTitle": "迁移到账号密码登录",
+    "initTitle": "首次使用，创建管理员账号",
+    "usernamePlaceholder": "3–32 位字母、数字或下划线",
+    "passwordPlaceholder": "设置登录密码",
+    "confirmPlaceholder": "再次输入密码",
+    "allowRegistration": "允许其他用户注册",
+    "migrateSubmit": "完成迁移",
+    "initSubmit": "创建并进入",
+    "migrateSuccess": "账号迁移完成",
+    "initSuccess": "初始化完成"
+  },
+  "register": {
+    "title": "注册账号",
+    "subtitle": "创建 PicHost 用户账号"
+  },
+  "password": {
+    "title": "修改密码",
+    "subtitle": "修改您的登录密码",
+    "current": "当前密码",
+    "new": "新密码",
+    "confirmNew": "确认新密码",
+    "newPlaceholder": "设置新密码",
+    "changed": "密码已修改",
+    "tooShort": "新密码至少 8 位",
+    "changeFailed": "修改密码失败",
+    "strength": "密码强度",
+    "weak": "弱",
+    "medium": "中",
+    "strong": "强",
+    "ruleMinLength": "至少 {n} 个字符",
+    "ruleMixedCase": "包含大小写字母",
+    "ruleNumber": "包含数字",
+    "ruleSpecial": "包含特殊字符"
+  },
+  "upload": {
+    "title": "拖拽图片到此处上传",
+    "hint": "或点击选择文件，按 {ctrl} + {v} 粘贴图片",
+    "formats": "支持 JPEG / PNG / WebP / GIF / SVG / ICO，单张最大 10 MB，每次最多 10 张",
+    "selectFiles": "选择图片",
+    "settings": "上传设置",
+    "progress": "上传进度",
+    "statusPending": "等待",
+    "statusUploading": "上传中",
+    "statusSuccess": "成功",
+    "statusError": "失败",
+    "selectImages": "请选择图片",
+    "maxFiles": "每次最多上传 {n} 张图片",
+    "uploadSuccess": "成功上传 {n} 张图片",
+    "uploadPartialFail": "{n} 张图片上传失败",
+    "uploadFailed": "上传失败",
+    "loginRequired": "请先登录",
+    "sessionTitle": "本次上传",
+    "sessionEmpty": "暂无本次上传"
+  },
+  "copy": {
+    "url": "直链",
+    "markdown": "Markdown",
+    "html": "HTML",
+    "copied": "已复制到剪贴板",
+    "copiedLabel": "已复制 {label}",
+    "copiedUrl": "已复制直链",
+    "copiedMarkdown": "已复制 Markdown",
+    "copiedHtml": "已复制 HTML",
+    "copiedFormat": "已复制 {format}",
+    "failed": "复制失败",
+    "failedManual": "复制失败，请手动选中链接复制",
+    "curl": "已复制 cURL 示例"
+  },
+  "preferences": {
+    "title": "上传偏好",
+    "subtitle": "浏览器本地与账号设置，仅影响您的上传体验",
+    "back": "返回上传",
+    "processing": "图片处理",
+    "clientCompress": "客户端预压缩",
+    "clientCompressHint": "上传前在浏览器端压缩（服务端仍会转 WebP）",
+    "autoDeletePrefix": "自动删除超过",
+    "autoDeleteSuffix": "天的图片",
+    "autoDeleteHint": "仅清理开启后上传的图片，不影响此前已存的图片",
+    "webpQuality": "WebP 压缩质量",
+    "webpQualityHint": "客户端预压缩质量（1–100），需开启「客户端预压缩」",
+    "current": "当前：{n}",
+    "qualityHigh": "高质量",
+    "qualityMedium": "中等质量",
+    "qualityLow": "有损压缩",
+    "convenience": "便捷功能",
+    "autoCopy": "上传成功自动复制链接",
+    "autoCopyHint": "按所选格式复制到剪贴板"
+  },
+  "settings": {
+    "title": "系统设置",
+    "subtitle": "保存后写入数据库；环境变量优先级更高",
+    "uploadAccount": "上传与账号",
+    "defaultFolder": "默认上传目录",
+    "defaultFolderHint": "保存在本机浏览器，仅影响您的上传目标目录",
+    "allowRegistration": "开放用户注册",
+    "allowRegistrationHint": "允许新用户自行注册（普通用户仅可见自己的图片）",
+    "accessControl": "访问控制",
+    "refererHint": "Referer 防盗链，逗号分隔允许引用的域名，留空不限制",
+    "refererPlaceholder": "example.com, www.example.com",
+    "linkGeneration": "链接生成",
+    "imageBaseUrlHint": "生成图片链接的 URL 前缀，内网访问建议填公网域名",
+    "imageBaseUrlPlaceholder": "https://pic.example.com",
+    "imageBaseUrlActive": "当前生效：{url}",
+    "badgeEnv": ".env",
+    "badgeSaved": "已保存",
+    "badgeDefault": "默认",
+    "badgeUnset": "未设置",
+    "tokenEnv": "环境变量",
+    "tokenDb": "后台生成",
+    "tokenNone": "未配置",
+    "apiTokenLine": "API Token · {source} ·",
+    "viewReleases": "查看发行版",
+    "unsavedChanges": "有未保存的更改",
+    "manageToken": "管理 Token",
+    "envOverride": "该项已由环境变量覆盖，无法在后台修改",
+    "saved": "服务器配置已保存",
+    "saveFailed": "保存服务器配置失败",
+    "loadFailed": "加载设置失败"
+  },
+  "storage": {
+    "title": "存储设置",
+    "subtitle": "新上传写入活动后端；已有图片仍按原后端读取",
+    "activeBackend": "活动后端",
+    "backendLocal": "本地磁盘",
+    "backendCloud": "云存储",
+    "backendS3": "云存储",
+    "switchHint": "切换仅影响新上传，已有图片不受影响",
+    "provider": "预设",
+    "providerR2": "Cloudflare R2",
+    "providerCos": "腾讯云 COS",
+    "providerOss": "阿里云 OSS",
+    "providerAws": "AWS S3",
+    "providerCustom": "自定义",
+    "endpoint": "Endpoint",
+    "region": "Region",
+    "bucket": "Bucket",
+    "prefix": "对象前缀（可选）",
+    "prefixPlaceholder": "例如 pichost",
+    "forcePathStyle": "强制 Path-Style 访问",
+    "accessKey": "Access Key",
+    "secretKey": "Secret Key",
+    "servingMode": "访问方式",
+    "servingProxy": "代理（PicHost 同源）",
+    "servingPublic": "公开 URL（302 到 CDN）",
+    "servingHint": "公开模式下 Referer 防盗链需在 CDN/桶策略侧配置",
+    "publicUrl": "公开访问 URL",
+    "publicUrlPlaceholder": "https://cdn.example.com",
+    "testConnection": "测试连接",
+    "testSuccess": "连接成功",
+    "testFailed": "连接失败",
+    "saved": "存储配置已保存",
+    "saveFailed": "保存存储配置失败",
+    "loadFailed": "加载存储配置失败",
+    "envOverride": "存储配置已由环境变量覆盖，无法在后台修改",
+    "pageTitle": "存储管理",
+    "pageSubtitle": "管理多个存储后端，新上传写入默认后端",
+    "addBackend": "添加存储",
+    "editBackend": "编辑存储",
+    "formCreateHint": "配置云存储连接，保存后可设为默认写入目标",
+    "formEditHint": "修改连接信息；留空密钥则保持原值",
+    "sectionBasic": "基本信息",
+    "sectionConnection": "连接配置",
+    "sectionCredentials": "访问凭证",
+    "sectionAccess": "访问方式",
+    "sectionQuota": "容量配额",
+    "advancedOptions": "高级选项",
+    "servingProxyShort": "代理",
+    "servingPublicShort": "公开",
+    "backendName": "显示名称",
+    "badgeDefault": "默认",
+    "badgeDisabled": "已停用",
+    "badgeEnabled": "已启用",
+    "statTotal": "总量",
+    "statUsed": "已用",
+    "statFree": "剩余",
+    "usageRate": "使用率",
+    "indexImages": "PicHost 图片 {count} 张 · {size}",
+    "setDefault": "设为默认",
+    "actionSetDefault": "设默认",
+    "actionTest": "测试",
+    "disable": "停用",
+    "enable": "启用",
+    "usageCount": "{count} 张图片",
+    "quotaTotal": "套餐总量",
+    "quotaPlaceholder": "例如 10",
+    "quotaHint": "填写云存储套餐总量；已用按 PicHost 图片索引自动统计",
+    "quotaRequired": "请填写有效的套餐总量",
+    "notConfigured": "未配置",
+    "created": "存储后端已添加",
+    "deleted": "存储后端已删除",
+    "deleteFailed": "删除失败",
+    "deleteBlockedImages": "该后端仍有图片，请先迁移或删除图片后再删除",
+    "defaultUpdated": "默认后端已更新",
+    "deleteConfirmTitle": "删除存储",
+    "deleteConfirmBody": "确定删除「{name}」？此操作不可撤销。",
+    "secretsRequired": "新建存储需填写 Access Key 与 Secret Key",
+    "manageStorage": "管理对象存储",
+    "manageStorageHint": "配置 R2 / S3 / COS 等多后端与直链策略"
+  },
+  "stats": {
+    "title": "统计",
+    "subtitle": "数据概览与图库记录",
+    "uploadToday": "今日上传",
+    "uploadMonth": "本月上传",
+    "uploadTotal": "累计上传",
+    "storedCount": "当前库存",
+    "deleteToday": "今日删除",
+    "deleteMonth": "本月删除",
+    "deleteTotal": "累计删除",
+    "userCount": "注册用户数量",
+    "uploadBytes": "累计上传体积",
+    "folderDistribution": "上传目录分布",
+    "folderUsage": "目录占用",
+    "noData": "暂无数据",
+    "folderCount": "{count} 张 · {size}",
+    "gallery": "图库记录",
+    "folder": "目录",
+    "filterStorageAll": "全部存储",
+    "storage": "存储",
+    "searchPlaceholder": "搜索文件名",
+    "clear": "清除",
+    "selected": "已选 {n}",
+    "batchDelete": "批量删除",
+    "scrollTop": "回到顶部",
+    "loadFailed": "加载统计失败",
+    "selectFirst": "请先选择图片",
+    "deleted": "已删除 {n} 张图片",
+    "deletePartialFail": "{n} 张图片删除失败",
+    "deleteFailed": "删除失败",
+    "deletedSingle": "已删除",
+    "allFolders": "全部",
+    "counting": "统计中…",
+    "summarySearch": "{folder} · 搜索「{q}」· 共 {total} 张",
+    "summaryTotal": "{folder} · 共 {total} 张",
+    "summarySearchStorage": "{folder} · {storage} · 搜索「{q}」· 共 {total} 张",
+    "summaryTotalStorage": "{folder} · {storage} · 共 {total} 张"
+  },
+  "logs": {
+    "pageTitle": "操作日志",
+    "pageSubtitle": "查看您的上传与删除记录",
+    "pageSubtitleAdmin": "查看所有用户的上传与删除记录",
+    "loadFailed": "加载操作日志失败",
+    "empty": "暂无操作记录",
+    "entriesUnit": "条记录",
+    "filterActionAll": "全部操作",
+    "filterSourceAll": "全部来源",
+    "filterUserAll": "全部用户",
+    "searchPlaceholder": "搜索文件名",
+    "summaryAll": "全部 · 共 {total} 条记录，上传 {upload} 条，删除 {delete} 条",
+    "actionUpload": "上传",
+    "actionDelete": "删除",
+    "sourceWeb": "网页",
+    "sourceApi": "API",
+    "sourceTwikoo": "Twikoo",
+    "colTime": "时间",
+    "colUser": "用户",
+    "colStorage": "存储",
+    "colAction": "操作",
+    "colSource": "来源",
+    "colFile": "文件名",
+    "colFolder": "目录",
+    "colSize": "大小",
+    "colKey": "路径"
+  },
+  "image": {
+    "empty": "暂无图片",
+    "previewFailed": "预览失败",
+    "uploader": "上传者：{name}",
+    "storageBackend": "存储：{name}"
+  },
+  "delete": {
+    "confirmTitle": "确认删除",
+    "confirmDesc": "确定要删除选中的 {count} 张图片吗？此操作不可恢复。",
+    "confirm": "确认删除"
+  },
+  "pagination": {
+    "pageOf": "第 {page} / {totalPages} 页 · 共 {total} {unit}",
+    "totalOnly": "共 {total} {unit}",
+    "first": "第一页",
+    "prev": "上一页",
+    "next": "下一页",
+    "last": "最后一页"
+  },
+  "api": {
+    "tokenTitle": "API Token",
+    "envOverrideTitle": "Token 由环境变量覆盖",
+    "envOverrideDesc": "修改 API_UPLOAD_TOKEN 后需重启服务；后台无法重新生成。",
+    "personalTitle": "个人 API Token",
+    "personalDesc": "此 Token 仅用于您自己的脚本上传，上传的图片归属您的账号。",
+    "notConfiguredTitle": "尚未配置 Token",
+    "notConfiguredDesc": "点击「重新生成」创建 Token，用于下方所有接口的 Auth-Token 鉴权。",
+    "regenerate": "重新生成",
+    "tokenSourceEnv": "来源：环境变量 API_UPLOAD_TOKEN",
+    "tokenSourceDb": "来源：后台生成（可重新生成）",
+    "tokenSourceNone": "来源：未配置",
+    "tokenHeader": "请求头：",
+    "tokenInvalidate": "重新生成后旧 Token 立即失效",
+    "docsTitle": "API 文档",
+    "curlExample": "cURL 示例",
+    "loadFailed": "加载 API 设置失败",
+    "regenerateEnvBlocked": "环境变量已配置 Token，无法在后台重新生成",
+    "regenerateFailed": "重新生成 Token 失败",
+    "confirmRegenerateTitle": "确认重新生成 Token？",
+    "confirmRegenerateDesc": "旧 Token 将立即失效，使用旧 Token 的脚本与自动化任务将无法继续调用接口，直到你更新为新 Token。",
+    "confirmRegenerate": "确认重新生成",
+    "newTokenTitle": "新 Token 已生成",
+    "newTokenDesc": "请立即复制保存。关闭弹窗后仍可在上方输入框复制，但请尽快更新到你的脚本配置中。",
+    "copyToken": "复制 Token",
+    "saved": "我已保存",
+    "docs": {
+      "upload": {
+        "title": "上传图片",
+        "descAdmin": "上传单张或多张图片。字段 image 传图片，folder 指定目录（不存在则自动创建）；仍兼容 file、files、type。",
+        "descUser": "上传单张或多张图片。字段 image 传图片；仍兼容 file、files。图片固定存入 images/ 目录。"
+      },
+      "list": {
+        "title": "获取图片列表",
+        "descAdmin": "分页列出图库，folder 可筛选目录，limit 默认 20、最大 100。",
+        "descUser": "分页列出您的图库，limit 默认 20、最大 100。"
+      },
+      "search": {
+        "title": "搜索图片",
+        "desc": "按文件名或路径关键词搜索，参数 q 必填。"
+      },
+      "delete": {
+        "title": "删除图片",
+        "desc": "通过 key 删除单张图片，key 为存储路径（如 images/2026/08/xxx.webp）。"
+      },
+      "batchDelete": {
+        "title": "批量删除",
+        "desc": "一次删除多张图片，请求体为 keys 数组。"
+      },
+      "twikoo": {
+        "title": "twikoo 兼容上传",
+        "desc": "兼容 Twikoo / EasyImage 2.0 协议，图片存入 twikoo/ 目录；字段 image + token。"
+      }
+    }
+  },
+  "userSettings": {
+    "loadFailed": "加载设置失败",
+    "saveFailed": "保存设置失败"
+  }
+}
@@ -11,7 +11,8 @@ const pkg = JSON.parse(readFileSync(join(rootDir, 'package.json'), 'utf8')) as {
 export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint',
-    '@nuxt/ui'
+    '@nuxt/ui',
+    '@nuxtjs/i18n'
  ],

  devtools: {
@@ -49,5 +50,19 @@ export default defineNuxtConfig({
        braceStyle: '1tbs'
      }
    }
+  },
+
+  i18n: {
+    locales: [
+      { code: 'zh-CN', name: '简体中文', language: 'zh-CN', file: 'zh-CN.json' },
+      { code: 'en', name: 'English', language: 'en', file: 'en.json' }
+    ],
+    defaultLocale: 'zh-CN',
+    langDir: 'locales',
+    strategy: 'no_prefix',
+    detectBrowserLanguage: {
+      cookieKey: 'pic_locale',
+      fallbackLocale: 'zh-CN'
+    }
  }
 })
@@ -1,7 +1,7 @@
 {
  "name": "pichost",
-  "version": "1.0.0",
-  "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.",
+  "version": "1.1.2",
+  "description": "Self-hosted image hosting for your NAS / home server — Nuxt admin UI, local disk or S3-compatible storage, server-side WebP compression, referer protection, Twikoo/EasyImage compatible.",
  "homepage": "https://github.com/O96u/PicHost#readme",
  "repository": {
    "type": "git",
@@ -32,12 +32,14 @@
    "typecheck": "nuxt typecheck",
    "test": "vitest run",
    "test:watch": "vitest",
-    "start": "node .output/server/index.mjs"
+    "start": "node .output/server/index.mjs",
+    "reset-password": "node server/cli/reset-password.mjs"
  },
  "dependencies": {
+    "@aws-sdk/client-s3": "^3.876.0",
    "@iconify-json/lucide": "^1.2.114",
    "@nuxt/ui": "^4.9.0",
-    "jose": "^6.0.11",
+    "@nuxtjs/i18n": "^10.6.0",
    "nuxt": "^4.4.8",
    "sharp": "^0.35.3",
    "tailwindcss": "^4.3.1"
@@ -0,0 +1,146 @@
+#Requires -Version 5.1
+<#
+.SYNOPSIS
+  Assign userId to image .meta.json files that are missing it (shows as 系统/API).
+
+.PARAMETER DataDir
+  PicHost data directory (contains images/, twikoo/, pichost.db). Default: ./data
+
+.PARAMETER UserId
+  Target user id. If omitted, uses the first admin from pichost.db.
+
+.PARAMETER Apply
+  Actually write files. Without this flag, only prints what would change (dry-run).
+
+.EXAMPLE
+  cd D:\Ou\PicHost
+  .\scripts\assign-image-owner.ps1
+
+.EXAMPLE
+  .\scripts\assign-image-owner.ps1 -DataDir D:\pic-host\data -Apply
+
+.EXAMPLE
+  .\scripts\assign-image-owner.ps1 -UserId 1 -Apply
+#>
+[CmdletBinding()]
+param(
+  [string] $DataDir = (Join-Path (Get-Location) 'data'),
+  [int] $UserId = 0,
+  [switch] $Apply
+)
+
+$ErrorActionPreference = 'Stop'
+
+function Resolve-AdminUserId {
+  param([string] $DbPath)
+
+  if (-not (Test-Path -LiteralPath $DbPath)) {
+    Write-Warning "pichost.db not found at $DbPath; using UserId = 1"
+    return 1
+  }
+
+  $repoRoot = Split-Path -Parent $PSScriptRoot
+  $nodeFile = Join-Path $env:TEMP "pichost-read-admin-$PID.mjs"
+  @'
+import { DatabaseSync } from "node:sqlite";
+const db = new DatabaseSync(process.argv[2]);
+const row = db.prepare("SELECT id FROM users WHERE role = 'admin' ORDER BY id ASC LIMIT 1").get();
+if (!row) process.exit(2);
+process.stdout.write(String(row.id));
+db.close();
+'@ | Set-Content -LiteralPath $nodeFile -Encoding utf8
+
+  Push-Location $repoRoot
+  try {
+    $output = & node $nodeFile $DbPath 2>&1
+    if ($LASTEXITCODE -eq 2) {
+      throw "No admin user in database. Run /setup first or pass -UserId explicitly."
+    }
+    if ($LASTEXITCODE -ne 0) {
+      throw "Failed to read admin from database: $output"
+    }
+    return [int]$output
+  }
+  finally {
+    Pop-Location
+    Remove-Item -LiteralPath $nodeFile -ErrorAction SilentlyContinue
+  }
+}
+
+function Read-MetaJson {
+  param([string] $Path)
+  $raw = [System.IO.File]::ReadAllText($Path, [System.Text.UTF8Encoding]::new($false))
+  return $raw | ConvertFrom-Json
+}
+
+function Write-MetaJson {
+  param(
+    [string] $Path,
+    [object] $Meta
+  )
+  # Compact single-line JSON, same style as PicHost putImage()
+  $json = $Meta | ConvertTo-Json -Compress -Depth 10
+  $utf8 = [System.Text.UTF8Encoding]::new($false)
+  [System.IO.File]::WriteAllText($Path, $json, $utf8)
+}
+
+if (-not (Test-Path -LiteralPath $DataDir)) {
+  throw "DataDir not found: $DataDir"
+}
+
+$resolved = Resolve-Path -LiteralPath $DataDir
+$DataDir = if ($resolved.ProviderPath) { $resolved.ProviderPath } else { $resolved.Path }
+
+if ($UserId -le 0) {
+  $UserId = Resolve-AdminUserId -DbPath (Join-Path $DataDir 'pichost.db')
+}
+
+Write-Host "DataDir : $DataDir"
+Write-Host "UserId  : $UserId"
+Write-Host "Mode    : $(if ($Apply) { 'APPLY (will modify files)' } else { 'DRY-RUN (pass -Apply to write)' })"
+Write-Host ''
+
+$metaFiles = Get-ChildItem -LiteralPath $DataDir -Recurse -File -Filter '*.meta.json' |
+  Where-Object { $_.Name -notlike 'pichost.db*' }
+
+if (-not $metaFiles) {
+  Write-Host 'No .meta.json files found under DataDir.'
+  exit 0
+}
+
+$patched = 0
+$skipped = 0
+$errors = 0
+
+foreach ($file in $metaFiles) {
+  try {
+    $meta = Read-MetaJson -Path $file.FullName
+    $current = $meta.PSObject.Properties['userId']
+    $hasUserId = $null -ne $current -and $null -ne $current.Value
+
+    if ($hasUserId) {
+      $skipped++
+      continue
+    }
+
+    $relative = [System.IO.Path]::GetRelativePath($DataDir, $file.FullName)
+    Write-Host "[patch] $relative -> userId $UserId"
+
+    if ($Apply) {
+      $meta | Add-Member -NotePropertyName userId -NotePropertyValue $UserId -Force
+      Write-MetaJson -Path $file.FullName -Meta $meta
+    }
+
+    $patched++
+  }
+  catch {
+    $errors++
+    Write-Warning "Failed: $($file.FullName) — $_"
+  }
+}
+
+Write-Host ''
+Write-Host "Done. patched=$patched skipped(already had userId)=$skipped errors=$errors"
+if (-not $Apply -and $patched -gt 0) {
+  Write-Host 'Re-run with -Apply to write changes.'
+}
@@ -0,0 +1,39 @@
+import { requireAdminAuth } from '../../../utils/access'
+import { createApiError } from '../../../utils/api-error'
+import {
+  deleteStorageBackend,
+  isStorageEnvConfigured,
+  LOCAL_BACKEND_ID
+} from '../../../utils/storage-backends'
+
+export default defineEventHandler(async (event) => {
+  await requireAdminAuth(event)
+
+  if (isStorageEnvConfigured()) {
+    createApiError(event, 'FORBIDDEN', '存储配置已由环境变量覆盖，无法在后台修改', 409)
+  }
+
+  const id = getRouterParam(event, 'id')
+  if (!id) {
+    createApiError(event, 'INVALID_REQUEST', '缺少存储后端 ID', 400)
+  }
+
+  if (id === LOCAL_BACKEND_ID) {
+    createApiError(event, 'INVALID_REQUEST', '本地磁盘后端不可删除', 400)
+  }
+
+  try {
+    deleteStorageBackend(id)
+  } catch (error) {
+    const message = error instanceof Error ? error.message : '删除失败'
+    if (message.includes('stored images')) {
+      createApiError(event, 'INVALID_REQUEST', '该后端仍有图片，无法删除', 400)
+    }
+    if (message.includes('default backend')) {
+      createApiError(event, 'INVALID_REQUEST', '请先切换默认后端后再删除', 400)
+    }
+    createApiError(event, 'INVALID_REQUEST', message, 400)
+  }
+
+  return { success: true }
+})
@@ -0,0 +1,129 @@
+import { requireAdminAuth } from '../../../utils/access'
+import { createApiError } from '../../../utils/api-error'
+import {
+  isStorageEnvConfigured,
+  LOCAL_BACKEND_ID,
+  updateStorageBackend,
+  getStorageBackendRow,
+  setDefaultBackend,
+  type StorageBackendPatch
+} from '../../../utils/storage-backends'
+import { parseS3Config, validateS3Config } from '../../../utils/storage/s3'
+import { parseQuotaBytes } from '../../../utils/storage-capacity'
+import type { ServingMode } from '../../../utils/storage/types'
+
+interface StoragePatchBody {
+  name?: string
+  config?: {
+    endpoint?: string
+    region?: string
+    bucket?: string
+    prefix?: string
+    forcePathStyle?: boolean
+  }
+  secrets?: {
+    accessKeyId?: string
+    secretAccessKey?: string
+  }
+  servingMode?: ServingMode
+  publicUrl?: string
+  quotaBytes?: number | null
+  enabled?: boolean
+  isDefault?: boolean
+}
+
+export default defineEventHandler(async (event) => {
+  await requireAdminAuth(event)
+
+  if (isStorageEnvConfigured()) {
+    createApiError(event, 'FORBIDDEN', '存储配置已由环境变量覆盖，无法在后台修改', 409)
+  }
+
+  const id = getRouterParam(event, 'id')
+  if (!id) {
+    createApiError(event, 'INVALID_REQUEST', '缺少存储后端 ID', 400)
+  }
+
+  const row = getStorageBackendRow(id)
+  if (!row) {
+    createApiError(event, 'INVALID_REQUEST', '存储后端不存在', 404)
+  }
+
+  const body = await readBody<StoragePatchBody>(event).catch(
+    (): StoragePatchBody => ({})
+  )
+
+  if (id === LOCAL_BACKEND_ID && body.isDefault === false) {
+    createApiError(event, 'INVALID_REQUEST', '必须保留一个默认存储后端', 400)
+  }
+
+  const patch: StorageBackendPatch = {}
+
+  if (body.name !== undefined) {
+    patch.name = body.name.trim() || row.name
+  }
+
+  if (body.config !== undefined && row.type === 's3') {
+    const current = parseS3Config(row.config_json) ?? {
+      endpoint: '',
+      region: 'auto',
+      bucket: ''
+    }
+    const next = {
+      endpoint: body.config.endpoint?.trim() ?? current.endpoint,
+      region: body.config.region?.trim() ?? current.region,
+      bucket: body.config.bucket?.trim() ?? current.bucket,
+      prefix: body.config.prefix?.trim() || undefined,
+      forcePathStyle: body.config.forcePathStyle ?? current.forcePathStyle
+    }
+    const error = validateS3Config(next)
+    if (error) {
+      createApiError(event, 'INVALID_REQUEST', error, 400)
+    }
+    patch.config = next
+  }
+
+  if (body.secrets !== undefined && row.type === 's3') {
+    patch.secrets = body.secrets
+  }
+
+  if (body.servingMode !== undefined) {
+    if (body.servingMode !== 'proxy' && body.servingMode !== 'public') {
+      createApiError(event, 'INVALID_REQUEST', '访问方式无效', 400)
+    }
+    patch.servingMode = body.servingMode
+  }
+
+  if (body.publicUrl !== undefined) {
+    patch.publicUrl = body.publicUrl.trim()
+  }
+
+  if (body.quotaBytes !== undefined) {
+    if (row.type === 's3') {
+      const quotaBytes = parseQuotaBytes(body.quotaBytes)
+      if (!quotaBytes) {
+        createApiError(event, 'INVALID_REQUEST', '请填写有效的存储套餐总量', 400)
+      }
+      patch.quotaBytes = quotaBytes
+    }
+  }
+
+  if (body.enabled !== undefined) {
+    if (id === LOCAL_BACKEND_ID && !body.enabled) {
+      createApiError(event, 'INVALID_REQUEST', '本地磁盘后端不可停用', 400)
+    }
+    patch.enabled = body.enabled
+  }
+
+  if (body.isDefault !== undefined) {
+    patch.isDefault = body.isDefault
+  }
+
+  updateStorageBackend(id, patch)
+
+  if (body.isDefault) {
+    setDefaultBackend(id)
+  }
+
+  return { success: true }
+})
@@ -0,0 +1,34 @@
+import { requireAdminAuth } from '../../../../utils/access'
+import { createApiError } from '../../../../utils/api-error'
+import {
+  createBackendInstance,
+  getStorageBackendRow,
+  isStorageEnvConfigured
+} from '../../../../utils/storage-backends'
+
+export default defineEventHandler(async (event) => {
+  await requireAdminAuth(event)
+
+  if (isStorageEnvConfigured()) {
+    createApiError(event, 'FORBIDDEN', '存储配置已由环境变量覆盖，无法在后台测试', 409)
+  }
+
+  const id = getRouterParam(event, 'id')
+  if (!id) {
+    createApiError(event, 'INVALID_REQUEST', '缺少存储后端 ID', 400)
+  }
+
+  const row = getStorageBackendRow(id)
+  if (!row) {
+    createApiError(event, 'INVALID_REQUEST', '存储后端不存在', 404)
+  }
+
+  try {
+    const backend = createBackendInstance(row)
+    const result = await backend.testConnection()
+    return result
+  } catch (error) {
+    const message = error instanceof Error ? error.message : '连接失败'
+    return { ok: false, message }
+  }
+})
@@ -0,0 +1,39 @@
+import { requireAdminAuth } from '../../../utils/access'
+import {
+  getBackendUsageStats,
+  isStorageEnvConfigured,
+  listStorageBackends
+} from '../../../utils/storage-backends'
+import { buildBackendCapacity } from '../../../utils/storage-capacity'
+import { getActiveBackendRow } from '../../../utils/storage/resolver'
+import type { StorageBackendInfo } from '../../../utils/storage/types'
+
+export default defineEventHandler(async (event) => {
+  await requireAdminAuth(event)
+
+  const rows = listStorageBackends()
+  const backends = await Promise.all(rows.map(async (backend: StorageBackendInfo & {
+    secretsMasked: Record<string, string>
+  }) => {
+    const usage = getBackendUsageStats(backend.id)
+    const capacity = await buildBackendCapacity(
+      backend.id,
+      backend.type,
+      usage.bytes,
+      backend.quotaBytes
+    )
+    return {
+      ...backend,
+      usage,
+      capacity
+    }
+  }))
+
+  const activeBackend = getActiveBackendRow()
+
+  return {
+    backends,
+    activeBackendId: activeBackend?.id ?? 'local',
+    envOverride: isStorageEnvConfigured()
+  }
+})
@@ -0,0 +1,83 @@
+import { requireAdminAuth } from '../../../utils/access'
+import { createApiError } from '../../../utils/api-error'
+import {
+  insertStorageBackend,
+  isStorageEnvConfigured
+} from '../../../utils/storage-backends'
+import { validateS3Config } from '../../../utils/storage/s3'
+import { parseQuotaBytes } from '../../../utils/storage-capacity'
+import type { ServingMode } from '../../../utils/storage/types'
+
+interface StorageCreateBody {
+  name?: string
+  config?: {
+    endpoint?: string
+    region?: string
+    bucket?: string
+    prefix?: string
+    forcePathStyle?: boolean
+  }
+  secrets?: {
+    accessKeyId?: string
+    secretAccessKey?: string
+  }
+  servingMode?: ServingMode
+  publicUrl?: string
+  quotaBytes?: number | null
+  enabled?: boolean
+  isDefault?: boolean
+}
+
+export default defineEventHandler(async (event) => {
+  await requireAdminAuth(event)
+
+  if (isStorageEnvConfigured()) {
+    createApiError(event, 'FORBIDDEN', '存储配置已由环境变量覆盖，无法在后台修改', 409)
+  }
+
+  const body = await readBody<StorageCreateBody>(event).catch(
+    (): StorageCreateBody => ({})
+  )
+
+  const name = body.name?.trim() || 'S3 兼容存储'
+  const config = {
+    endpoint: body.config?.endpoint?.trim() ?? '',
+    region: body.config?.region?.trim() || 'auto',
+    bucket: body.config?.bucket?.trim() ?? '',
+    prefix: body.config?.prefix?.trim() || undefined,
+    forcePathStyle: body.config?.forcePathStyle ?? false
+  }
+
+  const error = validateS3Config(config)
+  if (error) {
+    createApiError(event, 'INVALID_REQUEST', error, 400)
+  }
+
+  const accessKeyId = body.secrets?.accessKeyId?.trim() ?? ''
+  const secretAccessKey = body.secrets?.secretAccessKey?.trim() ?? ''
+  if (!accessKeyId || !secretAccessKey) {
+    createApiError(event, 'INVALID_REQUEST', 'Access Key 与 Secret Key 不能为空', 400)
+  }
+
+  if (body.servingMode && body.servingMode !== 'proxy' && body.servingMode !== 'public') {
+    createApiError(event, 'INVALID_REQUEST', '访问方式无效', 400)
+  }
+
+  const quotaBytes = parseQuotaBytes(body.quotaBytes)
+  if (!quotaBytes) {
+    createApiError(event, 'INVALID_REQUEST', '请填写有效的存储套餐总量', 400)
+  }
+
+  const id = insertStorageBackend({
+    name,
+    config,
+    secrets: { accessKeyId, secretAccessKey },
+    servingMode: body.servingMode,
+    publicUrl: body.publicUrl?.trim(),
+    quotaBytes,
+    enabled: body.enabled,
+    isDefault: body.isDefault
+  })
+
+  return { success: true, id }
+})
@@ -72,7 +72,9 @@ export default defineEventHandler(async (event) => {
          originalName: existing.originalName,
          size: existing.size,
          contentType: existing.contentType,
-          source: resolveActivitySource(event)
+          source: resolveActivitySource(event),
+          userId: existing.userId ?? null,
+          backendId: existing.backendId ?? null
        })

        logInfo('delete success', { key, size: existing.size })
@@ -1,5 +1,7 @@
 import { getImageUserFilter, requireApiOrAdminAuth } from '../../utils/access'
 import { isValidFolderName } from '../../utils/image-key'
+import { readBackendIdQuery } from '../../utils/image-query'
+import { createApiError } from '../../utils/api-error'
 import { countImages } from '../../utils/storage'

 export default defineEventHandler(async (event) => {
@@ -9,8 +11,12 @@ export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  const raw = typeof query.folder === 'string' ? query.folder.trim() : ''
  const folder = raw && raw !== 'all' && isValidFolderName(raw) ? raw : undefined
+  const backendId = readBackendIdQuery(query)
+  if (backendId === null) {
+    createApiError(event, 'INVALID_REQUEST', '无效的存储后端', 400)
+  }

-  const total = await countImages(folder, userFilter)
+  const total = await countImages(folder, userFilter, backendId)

  return { total }
 })
@@ -42,7 +42,9 @@ export default defineEventHandler(async (event) => {
      originalName: existing.originalName,
      size: existing.size,
      contentType: existing.contentType,
-      source: resolveActivitySource(event)
+      source: resolveActivitySource(event),
+      userId: existing.userId ?? null,
+      backendId: existing.backendId ?? null
    })

    logInfo('delete success', { key, size: existing.size })
@@ -5,9 +5,12 @@ import {
  DEFAULT_LIST_LIMIT,
  MAX_LIST_LIMIT
 } from '../../utils/constants'
+import { createApiError } from '../../utils/api-error'
 import { listUserIdUsernameMap } from '../../utils/db'
 import { mapStoredImageToItem } from '../../utils/image-response'
+import { listStorageBackendNameMap } from '../../utils/storage-backends'
 import { isValidFolderName } from '../../utils/image-key'
+import { readBackendIdQuery } from '../../utils/image-query'
 import { listImages } from '../../utils/storage'

 function readFolderQuery(query: Record<string, unknown>): string | undefined {
@@ -32,14 +35,19 @@ export default defineEventHandler(async (event) => {
    : 1

  const folder = readFolderQuery(query)
+  const backendId = readBackendIdQuery(query)
+  if (backendId === null) {
+    createApiError(event, 'INVALID_REQUEST', '无效的存储后端', 400)
+  }
  const userFilter = await getImageUserFilter(event)

-  const listing = await listImages({ limit, page, folder, userFilter })
+  const listing = await listImages({ limit, page, folder, userFilter, backendId })

  const user = await getCurrentUser(event)
  const ownerMap = user?.role === 'admin' ? listUserIdUsernameMap() : undefined
+  const backendMap = listStorageBackendNameMap()
  const items = listing.items.map(stored =>
-    mapStoredImageToItem(event, stored, { ownerMap })
+    mapStoredImageToItem(event, stored, { ownerMap, backendMap })
  )

  items.sort((a, b) => b.uploadedAt.localeCompare(a.uploadedAt))
@@ -8,7 +8,9 @@ import {
 import { createApiError } from '../../utils/api-error'
 import { listUserIdUsernameMap } from '../../utils/db'
 import { mapStoredImageToItem } from '../../utils/image-response'
+import { listStorageBackendNameMap } from '../../utils/storage-backends'
 import { isValidFolderName } from '../../utils/image-key'
+import { readBackendIdQuery } from '../../utils/image-query'
 import { searchImages } from '../../utils/storage'

 function readFolderQuery(query: Record<string, unknown>): string | undefined {
@@ -42,14 +44,19 @@ export default defineEventHandler(async (event) => {
    : 1

  const folder = readFolderQuery(query)
+  const backendId = readBackendIdQuery(query)
+  if (backendId === null) {
+    createApiError(event, 'INVALID_REQUEST', '无效的存储后端', 400)
+  }
  const userFilter = await getImageUserFilter(event)

-  const result = await searchImages({ query: q, limit, page, folder, userFilter })
+  const result = await searchImages({ query: q, limit, page, folder, userFilter, backendId })

  const user = await getCurrentUser(event)
  const ownerMap = user?.role === 'admin' ? listUserIdUsernameMap() : undefined
+  const backendMap = listStorageBackendNameMap()
  const items = result.items.map(stored =>
-    mapStoredImageToItem(event, stored, { ownerMap })
+    mapStoredImageToItem(event, stored, { ownerMap, backendMap })
  )

  items.sort((a, b) => b.uploadedAt.localeCompare(a.uploadedAt))
@@ -16,6 +16,7 @@ import {
  isValidFolderName,
  normalizeFolderName
 } from '../../utils/image-key'
+import { checkUploadRateLimit } from '../../utils/rate-limit'

 function readFormText(
  formData: { name?: string, data?: Buffer | Uint8Array }[],
@@ -29,14 +30,20 @@ function readFormText(
 export default defineEventHandler(async (event) => {
  await requireUploadAuth(event)

-  const source = verifyApiUploadToken(event) ? 'api' : 'web'
-  const uploadUserId = await getUploadUserId(event)
-
  const formData = await readMultipartFormData(event)
  if (!formData?.length) {
    createApiError(event, 'INVALID_REQUEST', '未收到上传文件', 400)
  }

+  const tokenField = formData.find(part => part.name === 'token')
+  const formToken = tokenField?.data?.length
+    ? new TextDecoder().decode(tokenField.data).trim()
+    : ''
+  checkUploadRateLimit(event, formToken)
+
+  const source = verifyApiUploadToken(event) ? 'api' : 'web'
+  const uploadUserId = await getUploadUserId(event)
+
  const query = getQuery(event)
  const folderFromForm = readFormText(formData, 'folder') || readFormText(formData, 'type')
  const folderFromQuery = typeof query.folder === 'string'
@@ -1,17 +1,21 @@
-import { requireAdminAuth } from '../../utils/access'
+import { requireUserAuth } from '../../utils/access'
 import { createApiError } from '../../utils/api-error'
+import { logException } from '../../utils/logger'
 import {
  listActivityLogs,
+  listUserIdUsernameMap,
+  summarizeActivityLogs,
  type LogAction,
  type LogSource
 } from '../../utils/db'
+import { ensureStorageSchema } from '../../utils/storage-backends'
 import {
  DEFAULT_LIST_LIMIT,
  MAX_LIST_LIMIT
 } from '../../utils/constants'

 export default defineEventHandler(async (event) => {
-  await requireAdminAuth(event)
+  const user = await requireUserAuth(event)

  const query = getQuery(event)

@@ -34,13 +38,34 @@ export default defineEventHandler(async (event) => {
    ? query.folder.trim()
    : undefined

+  const searchRaw = typeof query.q === 'string' ? query.q.trim() : ''
+  const search = searchRaw || undefined
+
  const pageRaw = Number(query.page ?? 1)
  const page = Number.isFinite(pageRaw) && pageRaw > 0
    ? Math.floor(pageRaw)
    : 1

+  let userId: number | undefined
+  if (user.role === 'admin') {
+    const userIdRaw = query.userId
+    if (userIdRaw !== undefined && userIdRaw !== '' && userIdRaw !== 'all') {
+      const parsed = Number(userIdRaw)
+      if (!Number.isFinite(parsed) || parsed <= 0) {
+        createApiError(event, 'INVALID_REQUEST', '无效的用户筛选', 400)
+      }
+      userId = Math.floor(parsed)
+    }
+  } else {
+    userId = user.id
+  }
+
  try {
-    const result = listActivityLogs({ limit, page, action, source, folder })
+    ensureStorageSchema()
+    const result = listActivityLogs({ limit, page, action, source, folder, userId, search })
+    const summary = summarizeActivityLogs({ source, folder, userId, search })
+    const userMap = user.role === 'admin' ? listUserIdUsernameMap() : undefined
+
    return {
      items: result.items.map(row => ({
        id: row.id,
@@ -50,15 +75,30 @@ export default defineEventHandler(async (event) => {
        size: row.size,
        contentType: row.content_type,
        source: row.source,
+        userId: row.user_id,
+        username: row.username,
+        storage: row.backend_id
+          ? {
+              id: row.backend_id,
+              name: row.backend_name ?? row.backend_id,
+              type: (row.backend_type === 'local' ? 'local' : 's3') as 'local' | 's3'
+            }
+          : null,
        createdAt: row.created_at
      })),
      total: result.total,
      page: result.page,
      pageSize: result.pageSize,
-      totalPages: result.totalPages
+      totalPages: result.totalPages,
+      summary,
+      users: userMap
+        ? Array.from(userMap.entries())
+            .map(([id, username]) => ({ id, username }))
+            .sort((a, b) => a.username.localeCompare(b.username))
+        : undefined
    }
  } catch (error) {
-    console.error('[logs] list failed', error)
+    logException('activity logs list failed', error)
    createApiError(event, 'INVALID_REQUEST', '读取操作记录失败', 500)
  }
 })
@@ -1,5 +1,6 @@
 import { getImageUserFilter, requireUserAuth } from '../utils/access'
 import { createApiError } from '../utils/api-error'
+import { logException } from '../utils/logger'
 import { countUsers, getActivityStats } from '../utils/db'
 import {
  countImages,
@@ -46,7 +47,7 @@ export default defineEventHandler(async (event) => {
      byFolder: scoped.byFolder
    }
  } catch (error) {
-    console.error('[stats] failed', error)
+    logException('stats failed', error)
    createApiError(event, 'INVALID_REQUEST', '读取统计失败', 500)
  }
 })
@@ -0,0 +1,30 @@
+import { requireUserAuth } from '../utils/access'
+import {
+  ensureStorageSchema,
+  listStorageBackendNameMap,
+  LOCAL_BACKEND_ID
+} from '../utils/storage-backends'
+
+function sortBackendsForFilter<T extends { id: string, name: string }>(backends: T[]): T[] {
+  return [...backends].sort((a, b) => {
+    if (a.id === LOCAL_BACKEND_ID) return -1
+    if (b.id === LOCAL_BACKEND_ID) return 1
+    return a.name.localeCompare(b.name, 'zh-CN')
+  })
+}
+
+export default defineEventHandler(async (event) => {
+  await requireUserAuth(event)
+  ensureStorageSchema()
+
+  const map = listStorageBackendNameMap()
+  const backends = sortBackendsForFilter(
+    Array.from(map.entries()).map(([id, backend]) => ({
+      id,
+      name: backend.name,
+      type: backend.type
+    }))
+  )
+
+  return { backends }
+})
@@ -0,0 +1,56 @@
+import { mkdirSync } from 'node:fs'
+import { join } from 'node:path'
+import { randomBytes, scryptSync } from 'node:crypto'
+import { DatabaseSync } from 'node:sqlite'
+
+const usernameArg = process.argv[2]?.trim() || ''
+
+if (process.argv.length > 3) {
+  console.error('Usage: reset-password [username]')
+  process.exit(1)
+}
+
+const dataDir = process.env.DATA_DIR || join(process.cwd(), 'data')
+mkdirSync(dataDir, { recursive: true })
+const db = new DatabaseSync(join(dataDir, 'pichost.db'))
+
+function fail(message) {
+  console.error(`Error: ${message}`)
+  process.exit(1)
+}
+
+let user
+if (usernameArg) {
+  user = db.prepare(`
+    SELECT id, username, role
+    FROM users
+    WHERE username = ?
+  `).get(usernameArg)
+  if (!user) fail(`user "${usernameArg}" not found`)
+} else {
+  const admins = db.prepare(`
+    SELECT id, username, role
+    FROM users
+    WHERE role = 'admin'
+    ORDER BY id ASC
+  `).all()
+  if (!admins.length) fail('no administrator account found')
+  if (admins.length > 1) {
+    const names = admins.map(row => row.username).join(', ')
+    fail(`multiple administrators (${names}); run: reset-password <username>`)
+  }
+  user = admins[0]
+}
+
+const password = randomBytes(9).toString('base64url')
+const salt = randomBytes(16).toString('hex')
+const derived = scryptSync(password, salt, 64, { N: 16384, r: 8, p: 1 })
+const passwordHash = `scrypt$16384$8$1$${salt}$${derived.toString('hex')}`
+
+db.prepare('UPDATE users SET password_hash = ? WHERE id = ?').run(passwordHash, user.id)
+db.prepare('DELETE FROM sessions WHERE user_id = ?').run(user.id)
+db.close()
+
+console.log(`[PicHost] User "${user.username}" (${user.role}) password reset.`)
+console.log(`[PicHost] New password: ${password}`)
+console.log('[PicHost] Sign in and change it under Account.')
@@ -0,0 +1,43 @@
+import { clientIp, logError, logException, logWarn, serializeError } from '../utils/logger'
+
+/**
+ * 记录未捕获的 H3/Nitro 错误（含 createApiError 抛出的 4xx/5xx）。
+ */
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook('error', (error, { event }) => {
+    const serialized = serializeError(error)
+    const status = typeof serialized.statusCode === 'number'
+      ? serialized.statusCode
+      : 500
+
+    if (!event) {
+      logError('unhandled error', serialized)
+      return
+    }
+
+    const path = getRequestURL(event).pathname
+    const method = getMethod(event)
+    const base = {
+      method,
+      path,
+      status,
+      ip: clientIp(event),
+      message: serialized.message,
+      ...(serialized.statusMessage ? { reason: serialized.statusMessage } : {}),
+      ...(serialized.data ? { data: serialized.data } : {})
+    }
+
+    if (!path.startsWith('/api/')) {
+      if (status >= 500) {
+        logException(`${method} ${path}`, error, base)
+      }
+      return
+    }
+
+    if (status >= 500) {
+      logException('API error', error, base)
+    } else if (status >= 400) {
+      logWarn('API rejected', base)
+    }
+  })
+})
@@ -1,4 +1,4 @@
-import { clientIp, logInfo } from '../utils/logger'
+import { clientIp, logError, logInfo, logWarn } from '../utils/logger'

 /**
 * 只记录 /api/*，避免 /images、/twikoo 直链刷屏。
@@ -19,11 +19,24 @@ export default defineNitroPlugin((nitroApp) => {
    const status = getResponseStatus(event)
    const started = event.context._reqStartedAt as number | undefined
    const ms = started ? Date.now() - started : undefined
+    const reason = status >= 400 ? getResponseStatusText(event) : undefined

-    logInfo(`${method} ${path}`, {
+    const detail: Record<string, unknown> = {
      status,
      ms,
      ip: clientIp(event)
-    })
+    }
+    if (reason && reason !== String(status)) {
+      detail.reason = reason
+    }
+
+    const line = `${method} ${path}`
+    if (status >= 500) {
+      logError(line, detail)
+    } else if (status >= 400) {
+      logWarn(line, detail)
+    } else {
+      logInfo(line, detail)
+    }
  })
 })
@@ -1,6 +1,8 @@
-import { getDataDir } from '../utils/storage'
+import { getDataDir } from '../utils/data-dir'
 import { runAutoDeleteCleanup } from '../utils/auto-delete'
-import { logInfo } from '../utils/logger'
+import { migrateLocalImagesToIndex } from '../utils/image-index'
+import { ensureDefaultBackends } from '../utils/storage-backends'
+import { logException, logInfo } from '../utils/logger'

 export default defineNitroPlugin(() => {
  const port = process.env.NITRO_PORT || process.env.PORT || '6892'
@@ -9,12 +11,24 @@ export default defineNitroPlugin(() => {
    dataDir: getDataDir(),
    nodeEnv: process.env.NODE_ENV || 'development',
    imageBaseUrl: process.env.IMAGE_BASE_URL || '(request origin)',
+    storageBackend: process.env.STORAGE_BACKEND || 'db',
    logLevel: process.env.LOG_LEVEL || 'info'
  })

+  ensureDefaultBackends()
+  void migrateLocalImagesToIndex().then((count) => {
+    if (count > 0) {
+      logInfo('migrated local images to index', { count })
+    }
+  }).catch((error) => {
+    logException('migrate local images to index failed', error)
+  })
+
  void runAutoDeleteCleanup().then((result) => {
    if (!result.skipped && (result.deleted > 0 || result.failed > 0)) {
      logInfo('startup auto-delete', { ...result })
    }
+  }).catch((error) => {
+    logException('startup auto-delete failed', error)
  })
 })
@@ -1,5 +1,6 @@
 import { readMultipartFormData } from 'h3'
 import { verifyUploadTokenValue } from '../../utils/access'
+import { checkUploadRateLimit } from '../../utils/rate-limit'
 import {
  detectMimeFromSignature,
  isAllowedMimeType
@@ -34,6 +35,7 @@ export default defineEventHandler(async (event) => {
    if (!verifyUploadTokenValue(event, token)) {
      return easyImageError(401, 'token 错误或无效')
    }
+    checkUploadRateLimit(event, token)
  }

  const imagePart = formData.find(
@@ -1,7 +1,8 @@
 import { insertActivityLog, listAdminUserIds, listUserAutoDeletePolicies, type AutoDeletePolicy } from './db'
 import { getGlobalAutoDeletePolicy } from './env'
-import { deleteImage, headImage, listImageKeys, type StoredImage } from './storage'
-import { logInfo, logWarn } from './logger'
+import { deleteImage, type StoredImage } from './storage'
+import { listImageKeysForAutoDelete } from './image-index'
+import { logInfo, logWarn, serializeError } from './logger'

 export interface AutoDeleteResult {
  deleted: number
@@ -73,31 +74,30 @@ export async function runAutoDeleteCleanup(): Promise<AutoDeleteResult> {
  }

  const nowMs = Date.now()
-  const keys = await listImageKeys()
+  const images = await listImageKeysForAutoDelete()
  let deleted = 0
  let failed = 0

-  for (const key of keys) {
-    const image = await headImage(key)
-    if (!image) continue
-
+  for (const image of images) {
    if (!shouldAutoDeleteImage(image, globalPolicy, adminUserIds, userPolicies, nowMs)) {
      continue
    }

    try {
-      await deleteImage(key)
+      await deleteImage(image.key)
      insertActivityLog({
        action: 'delete',
-        key,
+        key: image.key,
        originalName: image.originalName,
        size: image.size,
        contentType: image.contentType,
-        source: 'web'
+        source: 'web',
+        userId: image.userId ?? null,
+        backendId: image.backendId ?? null
      })
      deleted++
    } catch (error) {
-      logWarn('auto-delete failed', { key, error })
+      logWarn('auto-delete failed', { key: image.key, error: serializeError(error) })
      failed++
    }
  }
@@ -0,0 +1,5 @@
+import { join } from 'node:path'
+
+export function getDataDir(): string {
+  return process.env.DATA_DIR || join(process.cwd(), 'data')
+}
@@ -1,7 +1,8 @@
 import { DatabaseSync } from 'node:sqlite'
 import { mkdirSync } from 'node:fs'
 import { join } from 'node:path'
-import { getDataDir } from './storage'
+import { getDataDir } from './data-dir'
+import { logException } from './logger'

 export type LogAction = 'upload' | 'delete'
 export type LogSource = 'web' | 'api' | 'twikoo'
@@ -14,6 +15,11 @@ export interface ActivityLogRow {
  size: number
  content_type: string
  source: LogSource
+  user_id: number | null
+  username: string | null
+  backend_id: string | null
+  backend_name: string | null
+  backend_type: string | null
  created_at: string
 }

@@ -24,12 +30,14 @@ export interface ActivityLogInput {
  size: number
  contentType: string
  source: LogSource
+  userId?: number | null
+  backendId?: string | null
  createdAt?: string
 }

 let db: DatabaseSync | null = null

-function getDb(): DatabaseSync {
+export function getDb(): DatabaseSync {
  if (db) return db

  const dataDir = getDataDir()
@@ -117,6 +125,23 @@ function migrateSchema(database: DatabaseSync): void {
      VALUES ('auto_delete_enabled_at', ?, ?)
    `).run(now, now)
  }
+
+  const logColumns = database.prepare('PRAGMA table_info(activity_logs)').all() as Array<{
+    name: string
+  }>
+  if (!logColumns.some(column => column.name === 'user_id')) {
+    database.exec('ALTER TABLE activity_logs ADD COLUMN user_id INTEGER')
+    database.exec(`
+      CREATE INDEX IF NOT EXISTS idx_activity_logs_user_created
+        ON activity_logs(user_id, created_at DESC)
+    `)
+  }
+  const activityLogColumns = database.prepare('PRAGMA table_info(activity_logs)').all() as Array<{
+    name: string
+  }>
+  if (!activityLogColumns.some(column => column.name === 'backend_id')) {
+    database.exec('ALTER TABLE activity_logs ADD COLUMN backend_id TEXT')
+  }
 }

 const USER_COLUMNS = 'id, username, password_hash, role, created_at, api_token, auto_delete_days, auto_delete_enabled_at'
@@ -392,8 +417,8 @@ export function insertActivityLog(input: ActivityLogInput): void {
    const createdAt = input.createdAt ?? new Date().toISOString()
    getDb().prepare(`
      INSERT INTO activity_logs
-        (action, key, original_name, size, content_type, source, created_at)
-      VALUES (?, ?, ?, ?, ?, ?, ?)
+        (action, key, original_name, size, content_type, source, user_id, backend_id, created_at)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)
    `).run(
      input.action,
      input.key,
@@ -401,10 +426,15 @@ export function insertActivityLog(input: ActivityLogInput): void {
      input.size,
      input.contentType,
      input.source,
+      input.userId ?? null,
+      input.backendId ?? null,
      createdAt
    )
  } catch (error) {
-    console.error('[activity-log] insert failed', error)
+    logException('activity-log insert failed', error, {
+      action: input.action,
+      key: input.key
+    })
  }
 }

@@ -414,6 +444,8 @@ export function listActivityLogs(options: {
  action?: LogAction
  source?: LogSource
  folder?: string
+  userId?: number
+  search?: string
 }): {
  items: ActivityLogRow[]
  total: number
@@ -423,26 +455,11 @@ export function listActivityLogs(options: {
 } {
  const database = getDb()
  const pageSize = options.limit
-  const params: Array<string | number> = []
-  const where: string[] = []
+  const { whereSql, params } = buildActivityLogWhere(options)

-  if (options.action) {
-    where.push('action = ?')
-    params.push(options.action)
-  }
-  if (options.source) {
-    where.push('source = ?')
-    params.push(options.source)
-  }
-  if (options.folder) {
-    where.push('key LIKE ?')
-    params.push(`${options.folder}/%`)
-  }
-
-  const whereSql = where.length ? `WHERE ${where.join(' AND ')}` : ''
  const countRow = database.prepare(`
    SELECT COUNT(*) AS count
-    FROM activity_logs
+    FROM activity_logs al
    ${whereSql}
  `).get(...params) as { count: number }

@@ -453,10 +470,25 @@ export function listActivityLogs(options: {
  const offset = (safePage - 1) * pageSize

  const rows = database.prepare(`
-    SELECT id, action, key, original_name, size, content_type, source, created_at
-    FROM activity_logs
+    SELECT
+      al.id,
+      al.action,
+      al.key,
+      al.original_name,
+      al.size,
+      al.content_type,
+      al.source,
+      al.user_id,
+      u.username,
+      al.backend_id,
+      sb.name AS backend_name,
+      sb.type AS backend_type,
+      al.created_at
+    FROM activity_logs al
+    LEFT JOIN users u ON u.id = al.user_id
+    LEFT JOIN storage_backends sb ON sb.id = al.backend_id
    ${whereSql}
-    ORDER BY id DESC
+    ORDER BY al.id DESC
    LIMIT ? OFFSET ?
  `).all(...params, pageSize, offset) as unknown as ActivityLogRow[]

@@ -469,6 +501,74 @@ export function listActivityLogs(options: {
  }
 }

+export function summarizeActivityLogs(options: {
+  source?: LogSource
+  folder?: string
+  userId?: number
+  search?: string
+}): {
+  total: number
+  upload: number
+  delete: number
+} {
+  const database = getDb()
+  const { whereSql, params } = buildActivityLogWhere(options, { includeAction: false })
+  const row = database.prepare(`
+    SELECT
+      COUNT(*) AS total,
+      COALESCE(SUM(CASE WHEN al.action = 'upload' THEN 1 ELSE 0 END), 0) AS upload_count,
+      COALESCE(SUM(CASE WHEN al.action = 'delete' THEN 1 ELSE 0 END), 0) AS delete_count
+    FROM activity_logs al
+    ${whereSql}
+  `).get(...params) as { total: number, upload_count: number, delete_count: number } | undefined
+
+  return {
+    total: row?.total ?? 0,
+    upload: row?.upload_count ?? 0,
+    delete: row?.delete_count ?? 0
+  }
+}
+
+function buildActivityLogWhere(
+  options: {
+    action?: LogAction
+    source?: LogSource
+    folder?: string
+    userId?: number
+    search?: string
+  },
+  { includeAction = true }: { includeAction?: boolean } = {}
+): { whereSql: string, params: Array<string | number> } {
+  const params: Array<string | number> = []
+  const where: string[] = []
+
+  if (includeAction && options.action) {
+    where.push('al.action = ?')
+    params.push(options.action)
+  }
+  if (options.source) {
+    where.push('al.source = ?')
+    params.push(options.source)
+  }
+  if (options.folder) {
+    where.push('al.key LIKE ?')
+    params.push(`${options.folder}/%`)
+  }
+  if (options.userId !== undefined) {
+    where.push('al.user_id = ?')
+    params.push(options.userId)
+  }
+  if (options.search) {
+    where.push('al.original_name LIKE ?')
+    params.push(`%${options.search}%`)
+  }
+
+  return {
+    whereSql: where.length ? `WHERE ${where.join(' AND ')}` : '',
+    params
+  }
+}
+
 function countSince(action: LogAction, sinceIso: string): number {
  const row = getDb().prepare(`
    SELECT COUNT(*) AS total
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+import { validateImageKey } from './image-key'
+
+describe('image index key validation', () => {
+  it('accepts standard image keys used in index', () => {
+    expect(validateImageKey('images/2026/03/abc.webp')).toBe(true)
+    expect(validateImageKey('twikoo/2026/03/abc.webp')).toBe(true)
+  })
+
+  it('rejects path traversal keys', () => {
+    expect(validateImageKey('../secret')).toBe(false)
+    expect(validateImageKey('images/../../etc/passwd')).toBe(false)
+  })
+})
@@ -0,0 +1,433 @@
+import { promises as fs } from 'node:fs'
+import { join } from 'node:path'
+import { getDb } from './db'
+import { getDataDir } from './data-dir'
+import { isValidFolderName, validateImageKey, DEFAULT_FOLDER } from './image-key'
+import {
+  ensureDefaultBackends,
+  ensureStorageSchema,
+  LOCAL_BACKEND_ID
+} from './storage-backends'
+import type { PaginatedResult, StoredImage, StoredImageMeta } from './storage/types'
+
+const META_SUFFIX = '.meta.json'
+
+export interface ImageIndexRow {
+  key: string
+  backend_id: string
+  user_id: number | null
+  folder: string
+  original_name: string
+  content_type: string
+  size: number
+  uploaded_at: string
+}
+
+function keyToFilePath(key: string): string {
+  return join(getDataDir(), ...key.split('/'))
+}
+
+async function readLocalMeta(key: string): Promise<Partial<StoredImageMeta>> {
+  try {
+    const raw = await fs.readFile(keyToFilePath(key) + META_SUFFIX, 'utf8')
+    return JSON.parse(raw) as Partial<StoredImageMeta>
+  } catch {
+    return {}
+  }
+}
+
+function rowToStoredImage(row: ImageIndexRow): StoredImage {
+  const uploadedMs = new Date(row.uploaded_at).getTime()
+  return {
+    key: row.key,
+    backendId: row.backend_id,
+    originalName: row.original_name,
+    uploadedAt: row.uploaded_at,
+    contentType: row.content_type,
+    size: row.size,
+    userId: row.user_id,
+    mtimeMs: Number.isFinite(uploadedMs) ? uploadedMs : Date.now()
+  }
+}
+
+function buildUserFilterSql(
+  userFilter: number | 'admin' | undefined,
+  params: Array<string | number>
+): string {
+  if (userFilter === undefined || userFilter === 'admin') return ''
+  params.push(userFilter)
+  return ' AND user_id = ?'
+}
+
+export function insertImageIndex(input: {
+  key: string
+  backendId: string
+  userId?: number | null
+  originalName: string
+  contentType: string
+  size: number
+  uploadedAt: string
+}): void {
+  ensureStorageSchema()
+  const folder = input.key.split('/')[0] ?? DEFAULT_FOLDER
+  getDb().prepare(`
+    INSERT INTO images
+      (key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+    ON CONFLICT(key) DO UPDATE SET
+      backend_id = excluded.backend_id,
+      user_id = excluded.user_id,
+      folder = excluded.folder,
+      original_name = excluded.original_name,
+      content_type = excluded.content_type,
+      size = excluded.size,
+      uploaded_at = excluded.uploaded_at
+  `).run(
+    input.key,
+    input.backendId,
+    input.userId ?? null,
+    folder,
+    input.originalName,
+    input.contentType,
+    input.size,
+    input.uploadedAt
+  )
+}
+
+export function deleteImageIndex(key: string): void {
+  ensureStorageSchema()
+  getDb().prepare('DELETE FROM images WHERE key = ?').run(key)
+}
+
+export function getImageIndexRow(key: string): ImageIndexRow | null {
+  ensureStorageSchema()
+  const row = getDb().prepare(`
+    SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at
+    FROM images
+    WHERE key = ?
+  `).get(key) as ImageIndexRow | undefined
+  return row ?? null
+}
+
+export function getImageIndexAsStored(key: string): StoredImage | null {
+  const row = getImageIndexRow(key)
+  return row ? rowToStoredImage(row) : null
+}
+
+async function readDirNames(path: string): Promise<string[]> {
+  try {
+    const entries = await fs.readdir(path, { withFileTypes: true })
+    return entries.filter(e => e.isDirectory()).map(e => e.name)
+  } catch {
+    return []
+  }
+}
+
+async function readFileNames(path: string): Promise<string[]> {
+  try {
+    const entries = await fs.readdir(path, { withFileTypes: true })
+    return entries.filter(e => e.isFile()).map(e => e.name)
+  } catch {
+    return []
+  }
+}
+
+async function listLocalImageKeys(): Promise<string[]> {
+  const keys: string[] = []
+  const dataDir = getDataDir()
+  const prefixes = await readDirNames(dataDir)
+
+  for (const prefix of prefixes) {
+    if (!isValidFolderName(prefix)) continue
+    const root = join(dataDir, prefix)
+    const years = await readDirNames(root)
+    for (const year of years) {
+      const months = await readDirNames(join(root, year))
+      for (const month of months) {
+        const files = await readFileNames(join(root, year, month))
+        for (const file of files) {
+          if (file.endsWith(META_SUFFIX)) continue
+          const key = `${prefix}/${year}/${month}/${file}`
+          if (validateImageKey(key)) keys.push(key)
+        }
+      }
+    }
+  }
+
+  return keys
+}
+
+export async function migrateLocalImagesToIndex(): Promise<number> {
+  ensureDefaultBackends()
+  const keys = await listLocalImageKeys()
+  let inserted = 0
+
+  for (const key of keys) {
+    const existing = getImageIndexRow(key)
+    if (existing) continue
+
+    let stat
+    try {
+      stat = await fs.stat(keyToFilePath(key))
+    } catch {
+      continue
+    }
+
+    const meta = await readLocalMeta(key)
+    const uploadedAt = meta.uploadedAt ?? stat.mtime.toISOString()
+
+    insertImageIndex({
+      key,
+      backendId: LOCAL_BACKEND_ID,
+      userId: meta.userId ?? null,
+      originalName: meta.originalName ?? key.split('/').pop() ?? 'image',
+      contentType: meta.contentType ?? 'application/octet-stream',
+      size: stat.size,
+      uploadedAt
+    })
+    inserted++
+  }
+
+  return inserted
+}
+
+export async function listFolders(): Promise<string[]> {
+  ensureStorageSchema()
+  const rows = getDb().prepare(`
+    SELECT DISTINCT folder FROM images ORDER BY folder ASC
+  `).all() as Array<{ folder: string }>
+
+  const folders = rows.map(row => row.folder).filter(isValidFolderName)
+  if (!folders.includes(DEFAULT_FOLDER)) {
+    folders.push(DEFAULT_FOLDER)
+  }
+  return folders.sort((a, b) => a.localeCompare(b))
+}
+
+export async function listFoldersForUser(
+  userFilter?: number | 'admin'
+): Promise<string[]> {
+  ensureStorageSchema()
+  const params: Array<string | number> = []
+  const userSql = buildUserFilterSql(userFilter, params)
+
+  const rows = getDb().prepare(`
+    SELECT DISTINCT folder FROM images WHERE 1=1${userSql} ORDER BY folder ASC
+  `).all(...params) as Array<{ folder: string }>
+
+  const folders = rows.map(row => row.folder).filter(isValidFolderName)
+  if (!folders.length) {
+    folders.push(DEFAULT_FOLDER)
+  }
+  return folders.sort((a, b) => a.localeCompare(b))
+}
+
+function buildBackendFilterSql(
+  backendId: string | undefined,
+  params: Array<string | number>
+): string {
+  if (!backendId) return ''
+  params.push(backendId)
+  return ' AND backend_id = ?'
+}
+
+export async function countImages(
+  folder?: string,
+  userFilter?: number | 'admin',
+  backendId?: string
+): Promise<number> {
+  ensureStorageSchema()
+  const params: Array<string | number> = []
+  const clauses: string[] = ['1=1']
+
+  if (folder && isValidFolderName(folder)) {
+    clauses.push('folder = ?')
+    params.push(folder)
+  }
+
+  const userSql = buildUserFilterSql(userFilter, params)
+  const backendSql = buildBackendFilterSql(backendId, params)
+  const row = getDb().prepare(`
+    SELECT COUNT(*) AS count FROM images WHERE ${clauses.join(' AND ')}${userSql}${backendSql}
+  `).get(...params) as { count: number }
+
+  return row.count
+}
+
+function paginateSlice<T>(
+  all: T[],
+  limit: number,
+  page?: number
+): PaginatedResult<T> {
+  const total = all.length
+  const pageSize = limit
+  const totalPages = Math.max(1, Math.ceil(total / pageSize) || 1)
+  const requestedPage = Math.max(1, page ?? 1)
+  const safePage = Math.min(requestedPage, totalPages)
+  const start = (safePage - 1) * pageSize
+  const items = all.slice(start, start + pageSize)
+
+  return { items, total, page: safePage, pageSize, totalPages }
+}
+
+export async function listImages(options: {
+  limit: number
+  page?: number
+  folder?: string
+  userFilter?: number | 'admin'
+  backendId?: string
+}): Promise<PaginatedResult<StoredImage>> {
+  ensureStorageSchema()
+  const params: Array<string | number> = []
+  const clauses: string[] = ['1=1']
+
+  if (options.folder && isValidFolderName(options.folder)) {
+    clauses.push('folder = ?')
+    params.push(options.folder)
+  }
+
+  const userSql = buildUserFilterSql(options.userFilter, params)
+  const backendSql = buildBackendFilterSql(options.backendId, params)
+  const rows = getDb().prepare(`
+    SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at
+    FROM images
+    WHERE ${clauses.join(' AND ')}${userSql}${backendSql}
+    ORDER BY uploaded_at DESC, key DESC
+  `).all(...params) as unknown as ImageIndexRow[]
+
+  const sliced = paginateSlice(rows, options.limit, options.page)
+  return {
+    ...sliced,
+    items: sliced.items.map(rowToStoredImage)
+  }
+}
+
+export async function searchImages(options: {
+  query: string
+  limit: number
+  page?: number
+  folder?: string
+  userFilter?: number | 'admin'
+  backendId?: string
+}): Promise<PaginatedResult<StoredImage>> {
+  ensureStorageSchema()
+  const needle = options.query.trim().toLowerCase()
+  const params: Array<string | number> = []
+  const clauses: string[] = ['1=1']
+
+  if (options.folder && isValidFolderName(options.folder)) {
+    clauses.push('folder = ?')
+    params.push(options.folder)
+  }
+
+  const userSql = buildUserFilterSql(options.userFilter, params)
+  const backendSql = buildBackendFilterSql(options.backendId, params)
+  const rows = getDb().prepare(`
+    SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at
+    FROM images
+    WHERE ${clauses.join(' AND ')}${userSql}${backendSql}
+    ORDER BY uploaded_at DESC, key DESC
+  `).all(...params) as unknown as ImageIndexRow[]
+
+  const matches = rows.filter((row) => {
+    if (!needle) return true
+    return row.key.toLowerCase().includes(needle)
+      || row.original_name.toLowerCase().includes(needle)
+  })
+
+  const sliced = paginateSlice(matches, options.limit, options.page)
+  return {
+    ...sliced,
+    items: sliced.items.map(rowToStoredImage)
+  }
+}
+
+export async function getFolderStorageStats(
+  userFilter?: number | 'admin'
+): Promise<Array<{ folder: string, count: number, bytes: number }>> {
+  ensureStorageSchema()
+  const params: Array<string | number> = []
+  const userSql = buildUserFilterSql(userFilter, params)
+
+  const rows = getDb().prepare(`
+    SELECT folder, COUNT(*) AS count, COALESCE(SUM(size), 0) AS bytes
+    FROM images
+    WHERE 1=1${userSql}
+    GROUP BY folder
+    ORDER BY bytes DESC, folder ASC
+  `).all(...params) as Array<{ folder: string, count: number, bytes: number }>
+
+  return rows
+}
+
+function startOfDayIsoInShanghai(now = new Date()): string {
+  const shifted = new Date(now.getTime() + 8 * 60 * 60 * 1000)
+  const y = shifted.getUTCFullYear()
+  const m = shifted.getUTCMonth()
+  const d = shifted.getUTCDate()
+  return new Date(Date.UTC(y, m, d) - 8 * 60 * 60 * 1000).toISOString()
+}
+
+function startOfMonthIsoInShanghai(now = new Date()): string {
+  const shifted = new Date(now.getTime() + 8 * 60 * 60 * 1000)
+  const y = shifted.getUTCFullYear()
+  const m = shifted.getUTCMonth()
+  return new Date(Date.UTC(y, m, 1) - 8 * 60 * 60 * 1000).toISOString()
+}
+
+export async function getUserScopedStorageStats(userId: number): Promise<{
+  storedCount: number
+  uploadBytesTotal: number
+  uploadToday: number
+  uploadMonth: number
+  byFolder: Array<{ folder: string, count: number, bytes: number }>
+}> {
+  ensureStorageSchema()
+  const startOfDay = startOfDayIsoInShanghai()
+  const startOfMonth = startOfMonthIsoInShanghai()
+
+  const rows = getDb().prepare(`
+    SELECT folder, size, uploaded_at
+    FROM images
+    WHERE user_id = ?
+  `).all(userId) as Array<{ folder: string, size: number, uploaded_at: string }>
+
+  const map = new Map<string, { count: number, bytes: number }>()
+  let uploadBytesTotal = 0
+  let uploadToday = 0
+  let uploadMonth = 0
+
+  for (const row of rows) {
+    uploadBytesTotal += row.size
+    if (row.uploaded_at >= startOfDay) uploadToday += 1
+    if (row.uploaded_at >= startOfMonth) uploadMonth += 1
+
+    const current = map.get(row.folder) ?? { count: 0, bytes: 0 }
+    current.count += 1
+    current.bytes += row.size
+    map.set(row.folder, current)
+  }
+
+  const byFolder = [...map.entries()]
+    .map(([folder, stat]) => ({ folder, ...stat }))
+    .sort((a, b) => b.bytes - a.bytes || a.folder.localeCompare(b.folder))
+
+  return {
+    storedCount: rows.length,
+    uploadBytesTotal,
+    uploadToday,
+    uploadMonth,
+    byFolder
+  }
+}
+
+export async function listImageKeysForAutoDelete(): Promise<StoredImage[]> {
+  ensureStorageSchema()
+  const rows = getDb().prepare(`
+    SELECT key, backend_id, user_id, folder, original_name, content_type, size, uploaded_at
+    FROM images
+    ORDER BY uploaded_at ASC
+  `).all() as unknown as ImageIndexRow[]
+
+  return rows.map(rowToStoredImage)
+}
@@ -0,0 +1,9 @@
+import { getStorageBackendRow } from './storage-backends'
+
+export function readBackendIdQuery(
+  query: Record<string, unknown>
+): string | undefined | null {
+  const raw = typeof query.backendId === 'string' ? query.backendId.trim() : ''
+  if (!raw || raw === 'all') return undefined
+  return getStorageBackendRow(raw)?.id ?? null
+}
@@ -3,6 +3,10 @@ import type { ImageItem } from '~/types/image'
 import type { AllowedMimeType } from './constants'
 import type { StoredImage } from './storage'
 import { getImageBaseUrl } from './env'
+import { getActiveBackendRow } from './storage/resolver'
+import { getStorageBackendRow, getStorageBackendFromEnv } from './storage-backends'
+import type { StorageBackendType, StorageBackendRow } from './storage/types'
+import { buildObjectKey, parseS3Config } from './storage/s3'

 export function resolveImageOwner(
  userId: number | null | undefined,
@@ -20,14 +24,37 @@ export function resolveImageOwner(
  }
 }

+export function resolveImageStorage(
+  backendId: string | undefined,
+  backendMap?: Map<string, { name: string, type: StorageBackendType }>
+): ImageItem['storage'] | undefined {
+  if (!backendId) return undefined
+
+  const fromMap = backendMap?.get(backendId)
+  if (fromMap) {
+    return { id: backendId, name: fromMap.name, type: fromMap.type }
+  }
+
+  const row = getStorageBackendRow(backendId)
+  if (row) {
+    return { id: backendId, name: row.name, type: row.type }
+  }
+
+  return { id: backendId, name: backendId, type: 's3' }
+}
+
 export function mapStoredImageToItem(
  event: H3Event,
  stored: StoredImage,
-  options?: { ownerMap?: Map<number, string> }
+  options?: {
+    ownerMap?: Map<number, string>
+    backendMap?: Map<string, { name: string, type: StorageBackendType }>
+  }
 ): ImageItem {
  const item = buildImageItem({
    key: stored.key,
-    baseUrl: getImageBaseUrl(event),
+    event,
+    backendId: stored.backendId,
    originalName: stored.originalName,
    contentType: stored.contentType,
    size: stored.size,
@@ -35,8 +62,14 @@ export function mapStoredImageToItem(
  })

  const owner = resolveImageOwner(stored.userId, options?.ownerMap)
-  if (owner) {
-    return { ...item, owner }
+  const storage = resolveImageStorage(stored.backendId, options?.backendMap)
+
+  if (owner || storage) {
+    return {
+      ...item,
+      ...(owner ? { owner } : {}),
+      ...(storage ? { storage } : {})
+    }
  }

  return item
@@ -47,6 +80,42 @@ export function buildImageUrl(baseUrl: string, key: string): string {
  return `${normalizedBase}/${key}`
 }

+export function buildPublicImageUrl(backendRow: StorageBackendRow, key: string): string {
+  const base = backendRow.public_url.replace(/\/$/, '')
+  if (backendRow.type === 's3') {
+    const config = parseS3Config(backendRow.config_json)
+    const objectKey = buildObjectKey(config?.prefix, key)
+    return `${base}/${objectKey}`
+  }
+  return `${base}/${key}`
+}
+
+export function resolveImageUrl(
+  event: H3Event,
+  key: string,
+  backendId?: string
+): string {
+  const envConfig = getStorageBackendFromEnv()
+  if (envConfig && (!backendId || backendId === 's3-primary')) {
+    if (envConfig.servingMode === 'public' && envConfig.publicUrl) {
+      const prefix = envConfig.config.prefix as string | undefined
+      const objectKey = buildObjectKey(prefix, key)
+      return `${envConfig.publicUrl.replace(/\/$/, '')}/${objectKey}`
+    }
+    return buildImageUrl(getImageBaseUrl(event), key)
+  }
+
+  const backendRow = backendId
+    ? getStorageBackendRow(backendId)
+    : getActiveBackendRow()
+
+  if (backendRow?.serving_mode === 'public' && backendRow.public_url) {
+    return buildPublicImageUrl(backendRow, key)
+  }
+
+  return buildImageUrl(getImageBaseUrl(event), key)
+}
+
 export function buildMarkdown(url: string, alt: string): string {
  const safeAlt = alt.replace(/[[\]]/g, '')
  return `![${safeAlt}](${url})`
@@ -68,13 +137,17 @@ function escapeHtml(value: string): string {

 export function buildImageItem(input: {
  key: string
-  baseUrl: string
+  baseUrl?: string
+  event?: H3Event
+  backendId?: string
  originalName: string
  contentType: AllowedMimeType | string
  size: number
  uploadedAt: string
 }) {
-  const url = buildImageUrl(input.baseUrl, input.key)
+  const url = input.event
+    ? resolveImageUrl(input.event, input.key, input.backendId)
+    : buildImageUrl(input.baseUrl ?? '', input.key)
  const alt = sanitizeOriginalName(input.originalName)

  return {
@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { serializeError } from './logger'
+
+describe('serializeError', () => {
+  it('extracts message and status from H3-like errors', () => {
+    const error = new Error('bucket not found') as Error & {
+      statusCode: number
+      statusMessage: string
+      data: { error: { code: string } }
+    }
+    error.statusCode = 404
+    error.statusMessage = '存储桶不存在'
+    error.data = { error: { code: 'NOT_FOUND' } }
+
+    expect(serializeError(error)).toMatchObject({
+      name: 'Error',
+      message: 'bucket not found',
+      statusCode: 404,
+      statusMessage: '存储桶不存在',
+      data: { error: { code: 'NOT_FOUND' } }
+    })
+  })
+
+  it('includes stack for 5xx errors at info log level', () => {
+    const error = new Error('db locked') as Error & { statusCode: number }
+    error.statusCode = 500
+    error.stack = 'Error: db locked\n    at test'
+
+    const serialized = serializeError(error)
+    expect(serialized.stack).toBe(error.stack)
+  })
+})
@@ -7,6 +7,12 @@ const LEVEL_ORDER: Record<LogLevel, number> = {
  error: 40
 }

+type H3LikeError = Error & {
+  statusCode?: number
+  statusMessage?: string
+  data?: unknown
+}
+
 function currentLevel(): LogLevel {
  const raw = (process.env.LOG_LEVEL || 'info').toLowerCase()
  if (raw === 'debug' || raw === 'info' || raw === 'warn' || raw === 'error') {
@@ -27,6 +33,35 @@ function formatLine(level: LogLevel, message: string, extra?: Record<string, unk
  return `[${time}] [${level.toUpperCase()}] ${message}${payload}`
 }

+/** 将 unknown / Error / H3Error 转为可 JSON 输出的字段，便于 Docker 日志排查 */
+export function serializeError(error: unknown): Record<string, unknown> {
+  if (error instanceof Error) {
+    const h3 = error as H3LikeError
+    const out: Record<string, unknown> = {
+      name: error.name,
+      message: error.message
+    }
+    if (h3.statusCode !== undefined) out.statusCode = h3.statusCode
+    if (h3.statusMessage) out.statusMessage = h3.statusMessage
+    if (h3.data !== undefined) out.data = h3.data
+    if (error.stack && shouldLog('debug')) out.stack = error.stack
+    else if (error.stack && (h3.statusCode ?? 500) >= 500) out.stack = error.stack
+    if ('cause' in error && error.cause !== undefined) {
+      out.cause = serializeError(error.cause)
+    }
+    return out
+  }
+  if (typeof error === 'string') return { message: error }
+  if (error && typeof error === 'object') {
+    try {
+      return { detail: JSON.parse(JSON.stringify(error)) }
+    } catch {
+      return { message: String(error) }
+    }
+  }
+  return { message: String(error) }
+}
+
 export function logDebug(message: string, extra?: Record<string, unknown>) {
  if (!shouldLog('debug')) return
  console.debug(formatLine('debug', message, extra))
@@ -47,6 +82,11 @@ export function logError(message: string, extra?: Record<string, unknown>) {
  console.error(formatLine('error', message, extra))
 }

+/** message + 原始 error 对象（自动 serialize） */
+export function logException(message: string, error: unknown, extra?: Record<string, unknown>) {
+  logError(message, { ...extra, error: serializeError(error) })
+}
+
 export function clientIp(event: Parameters<typeof getRequestIP>[0]): string {
  return getRequestIP(event, { xForwardedFor: true }) || '-'
 }
@@ -14,10 +14,10 @@ import {
 import type { LogSource } from './db'
 import { generateImageKey } from './image-key'
 import { buildImageItem, sanitizeOriginalName } from './image-response'
-import { getImageBaseUrl, getWebpQuality } from './env'
+import { getWebpQuality } from './env'
 import { insertActivityLog } from './db'
 import { putImage } from './storage'
-import { logInfo, logWarn } from './logger'
+import { logInfo, logException } from './logger'

 /** 可转 WebP 的位图格式；SVG（矢量）、ICO、已是 WebP 的原样存储 */
 const WEBP_CONVERTIBLE: readonly AllowedMimeType[] = [
@@ -121,7 +121,6 @@ export async function processSingleImageUpload(

  const compressed = await compressToWebp(bytes, detectedMime, getWebpQuality(event))

-  const imageBaseUrl = getImageBaseUrl(event)
  const uploadedAt = new Date().toISOString()
  const key = generateImageKey(
    compressed.mime,
@@ -129,16 +128,17 @@ export async function processSingleImageUpload(
    input.prefix ?? 'images'
  )

+  let backendId: string
  try {
-    await putImage(key, compressed.bytes, {
+    backendId = await putImage(key, compressed.bytes, {
      originalName,
      uploadedAt,
      contentType: compressed.mime,
      size: compressed.bytes.byteLength,
      userId: input.userId ?? null
    })
-  } catch {
-    logWarn('upload failed: storage error', {
+  } catch (error) {
+    logException('upload failed: storage error', error, {
      name: originalName,
      source: input.source ?? 'web'
    })
@@ -160,6 +160,8 @@ export async function processSingleImageUpload(
    size: compressed.bytes.byteLength,
    contentType: compressed.mime,
    source: input.source ?? 'web',
+    userId: input.userId ?? null,
+    backendId,
    createdAt: uploadedAt
  })

@@ -173,7 +175,7 @@ export async function processSingleImageUpload(
  return {
    item: buildImageItem({
      key,
-      baseUrl: imageBaseUrl,
+      event,
      originalName,
      contentType: compressed.mime,
      size: compressed.bytes.byteLength,
@@ -0,0 +1,43 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { checkUploadRateLimit } from './rate-limit'
+
+vi.mock('./logger', () => ({
+  clientIp: (event: { __ip?: string }) => event.__ip ?? '127.0.0.1'
+}))
+
+function mockEvent(ip = '127.0.0.1', authToken = '') {
+  return {
+    __ip: ip,
+    node: {
+      req: {
+        headers: {
+          ...(authToken ? { 'auth-token': authToken } : {})
+        }
+      }
+    }
+  } as unknown as Parameters<typeof checkUploadRateLimit>[0]
+}
+
+describe('checkUploadRateLimit', () => {
+  it('allows requests under the IP limit', () => {
+    const event = mockEvent('10.0.0.1')
+    expect(() => checkUploadRateLimit(event)).not.toThrow()
+  })
+
+  it('limits repeated uploads by IP', () => {
+    const event = mockEvent('10.0.0.3')
+    for (let i = 0; i < 60; i++) {
+      checkUploadRateLimit(event)
+    }
+    expect(() => checkUploadRateLimit(event)).toThrow()
+  })
+
+  it('limits repeated API token uploads', () => {
+    const token = 'token-a'
+    for (let i = 0; i < 120; i++) {
+      checkUploadRateLimit(mockEvent(`10.0.${i % 200}`), token)
+    }
+    expect(() => checkUploadRateLimit(mockEvent('10.0.250'), token)).toThrow()
+  })
+})
@@ -0,0 +1,67 @@
+import { createHash } from 'node:crypto'
+import { createError, getHeader, type H3Event } from 'h3'
+import { clientIp } from './logger'
+
+const UPLOAD_IP_MAX = 60
+const UPLOAD_TOKEN_MAX = 120
+const UPLOAD_WINDOW_MS = 15 * 60 * 1000
+
+const stores = new Map<string, Map<string, { count: number, resetAt: number }>>()
+
+function getStore(name: string): Map<string, { count: number, resetAt: number }> {
+  let store = stores.get(name)
+  if (!store) {
+    store = new Map()
+    stores.set(name, store)
+  }
+  return store
+}
+
+function assertRateLimit(
+  storeName: string,
+  key: string,
+  max: number,
+  windowMs: number,
+  message: string
+): void {
+  const store = getStore(storeName)
+  const now = Date.now()
+  const entry = store.get(key)
+
+  if (!entry || now > entry.resetAt) {
+    store.set(key, { count: 1, resetAt: now + windowMs })
+    return
+  }
+
+  entry.count += 1
+  if (entry.count > max) {
+    throw createError({
+      statusCode: 429,
+      statusMessage: message
+    })
+  }
+}
+
+export function checkUploadRateLimit(event: H3Event, apiToken?: string): void {
+  const ip = clientIp(event)
+  assertRateLimit(
+    'upload-ip',
+    ip,
+    UPLOAD_IP_MAX,
+    UPLOAD_WINDOW_MS,
+    '上传过于频繁，请稍后再试'
+  )
+
+  const headerToken = getHeader(event, 'auth-token')?.trim() ?? ''
+  const token = apiToken?.trim() || headerToken
+  if (!token) return
+
+  const hash = createHash('sha256').update(token).digest('hex').slice(0, 32)
+  assertRateLimit(
+    'upload-token',
+    hash,
+    UPLOAD_TOKEN_MAX,
+    UPLOAD_WINDOW_MS,
+    '上传过于频繁，请稍后再试'
+  )
+}
@@ -2,7 +2,9 @@ import type { H3Event } from 'h3'
 import { IMAGE_CACHE_CONTROL } from './constants'
 import { getAllowedRefererHostsRaw } from './env'
 import { validateImageKey } from './image-key'
+import { buildPublicImageUrl } from './image-response'
 import { createImageStream, headImage } from './storage'
+import { getBackendRowForKey } from './storage/resolver'

 /**
 * 图片直链处理（/{type}/YYYY/MM/file）
@@ -82,6 +84,12 @@ export async function serveImageByKey(event: H3Event, key: string) {
    throw createError({ statusCode: 404, statusMessage: 'Not Found' })
  }

+  const backendRow = await getBackendRowForKey(key)
+  if (backendRow.serving_mode === 'public' && backendRow.public_url) {
+    const publicUrl = buildPublicImageUrl(backendRow, key)
+    return sendRedirect(event, publicUrl, 302)
+  }
+
  const etag = `"${stored.size}-${Math.round(stored.mtimeMs)}"`

  setHeader(event, 'ETag', etag)
@@ -116,9 +124,9 @@ export async function serveImageByKey(event: H3Event, key: string) {
    setResponseStatus(event, 206)
    setHeader(event, 'Content-Range', `bytes ${range.start}-${range.end}/${stored.size}`)
    setHeader(event, 'Content-Length', range.end - range.start + 1)
-    return sendStream(event, createImageStream(key, range))
+    return sendStream(event, await createImageStream(key, range))
  }

  setHeader(event, 'Content-Length', stored.size)
-  return sendStream(event, createImageStream(key))
+  return sendStream(event, await createImageStream(key))
 }
@@ -0,0 +1,437 @@
+import type { DatabaseSync } from 'node:sqlite'
+import { getDb } from './db'
+import { LocalStorageBackend } from './storage/local'
+import {
+  parseS3Config,
+  parseS3Secrets,
+  S3StorageBackend
+} from './storage/s3'
+import type {
+  S3BackendConfig,
+  ServingMode,
+  StorageBackendInfo,
+  StorageBackendRow,
+  StorageBackendType
+} from './storage/types'
+
+export const LOCAL_BACKEND_ID = 'local'
+export const S3_BACKEND_ID = 's3-primary'
+
+function migrateStorageTables(database: DatabaseSync): void {
+  database.exec(`
+    CREATE TABLE IF NOT EXISTS storage_backends (
+      id TEXT PRIMARY KEY,
+      name TEXT NOT NULL,
+      type TEXT NOT NULL CHECK(type IN ('local', 's3')),
+      config_json TEXT NOT NULL DEFAULT '{}',
+      secret_json TEXT NOT NULL DEFAULT '{}',
+      serving_mode TEXT NOT NULL DEFAULT 'proxy' CHECK(serving_mode IN ('proxy', 'public')),
+      public_url TEXT NOT NULL DEFAULT '',
+      quota_bytes INTEGER,
+      enabled INTEGER NOT NULL DEFAULT 1,
+      is_default INTEGER NOT NULL DEFAULT 0,
+      sort_order INTEGER NOT NULL DEFAULT 0
+    );
+    CREATE TABLE IF NOT EXISTS images (
+      key TEXT PRIMARY KEY,
+      backend_id TEXT NOT NULL,
+      user_id INTEGER,
+      folder TEXT NOT NULL,
+      original_name TEXT NOT NULL,
+      content_type TEXT NOT NULL,
+      size INTEGER NOT NULL,
+      uploaded_at TEXT NOT NULL,
+      FOREIGN KEY (backend_id) REFERENCES storage_backends(id)
+    );
+    CREATE INDEX IF NOT EXISTS idx_images_uploaded_at ON images(uploaded_at DESC);
+    CREATE INDEX IF NOT EXISTS idx_images_backend_id ON images(backend_id);
+    CREATE INDEX IF NOT EXISTS idx_images_user_id ON images(user_id);
+    CREATE INDEX IF NOT EXISTS idx_images_folder ON images(folder);
+  `)
+}
+
+export function ensureStorageSchema(): void {
+  migrateStorageTables(getDb())
+}
+
+export function ensureDefaultBackends(): void {
+  ensureStorageSchema()
+  const db = getDb()
+
+  const local = db.prepare(`
+    SELECT id FROM storage_backends WHERE id = ?
+  `).get(LOCAL_BACKEND_ID)
+
+  if (!local) {
+    db.prepare(`
+      INSERT INTO storage_backends
+        (id, name, type, config_json, secret_json, serving_mode, public_url,
+         quota_bytes, enabled, is_default, sort_order)
+      VALUES (?, ?, 'local', '{}', '{}', 'proxy', '', NULL, 1, 1, 0)
+    `).run(LOCAL_BACKEND_ID, '本地磁盘')
+  }
+
+  cleanupPlaceholderS3Backend(db)
+}
+
+/** 移除早期版本自动种下的空 S3 占位（未配置、未启用、非默认、无图片） */
+function cleanupPlaceholderS3Backend(db: DatabaseSync): void {
+  const row = db.prepare(`
+    SELECT * FROM storage_backends WHERE id = ?
+  `).get(S3_BACKEND_ID) as StorageBackendRow | undefined
+
+  if (!row || row.type !== 's3' || row.is_default === 1) {
+    return
+  }
+
+  const config = parseS3Config(row.config_json)
+  const secrets = parseS3Secrets(row.secret_json)
+  const configured = Boolean(
+    config?.bucket?.trim()
+    || config?.endpoint?.trim()
+    || secrets?.accessKeyId?.trim()
+    || secrets?.secretAccessKey?.trim()
+  )
+  if (configured) {
+    return
+  }
+
+  const usage = getBackendUsageStats(S3_BACKEND_ID)
+  if (usage.count > 0) {
+    return
+  }
+
+  db.prepare('DELETE FROM storage_backends WHERE id = ?').run(S3_BACKEND_ID)
+}
+
+function rowToInfo(row: StorageBackendRow, _maskSecrets = true): StorageBackendInfo & {
+  secretsMasked: Record<string, string>
+} {
+  const config = row.type === 's3'
+    ? (parseS3Config(row.config_json) ?? {})
+    : {}
+  let secretsMasked: Record<string, string> = {}
+  if (row.type === 's3') {
+    const secrets = parseS3Secrets(row.secret_json)
+    secretsMasked = {
+      accessKeyId: secrets?.accessKeyId
+        ? maskSecret(secrets.accessKeyId)
+        : '',
+      secretAccessKey: secrets?.secretAccessKey
+        ? maskSecret(secrets.secretAccessKey)
+        : ''
+    }
+  }
+
+  return {
+    id: row.id,
+    name: row.name,
+    type: row.type,
+    config,
+    servingMode: row.serving_mode,
+    publicUrl: row.public_url,
+    quotaBytes: row.quota_bytes,
+    enabled: row.enabled === 1,
+    isDefault: row.is_default === 1,
+    sortOrder: row.sort_order,
+    secretsMasked
+  }
+}
+
+function maskSecret(value: string): string {
+  if (value.length <= 4) return '****'
+  return `${value.slice(0, 4)}${'*'.repeat(Math.min(8, value.length - 4))}`
+}
+
+export function listStorageBackendRows(): StorageBackendRow[] {
+  ensureDefaultBackends()
+  return getDb().prepare(`
+    SELECT id, name, type, config_json, secret_json, serving_mode, public_url,
+           quota_bytes, enabled, is_default, sort_order
+    FROM storage_backends
+    ORDER BY sort_order ASC, id ASC
+  `).all() as unknown as StorageBackendRow[]
+}
+
+export function listStorageBackends(maskSecrets = true): Array<StorageBackendInfo & {
+  secretsMasked: Record<string, string>
+}> {
+  return listStorageBackendRows().map(row => rowToInfo(row, maskSecrets))
+}
+
+export function listStorageBackendNameMap(): Map<string, {
+  name: string
+  type: StorageBackendType
+}> {
+  ensureStorageSchema()
+  const rows = getDb().prepare(`
+    SELECT id, name, type FROM storage_backends
+  `).all() as Array<{ id: string, name: string, type: StorageBackendType }>
+  return new Map(rows.map(row => [row.id, { name: row.name, type: row.type }]))
+}
+
+export function getStorageBackendRow(id: string): StorageBackendRow | null {
+  ensureDefaultBackends()
+  const row = getDb().prepare(`
+    SELECT id, name, type, config_json, secret_json, serving_mode, public_url,
+           quota_bytes, enabled, is_default, sort_order
+    FROM storage_backends
+    WHERE id = ?
+  `).get(id) as StorageBackendRow | undefined
+  return row ?? null
+}
+
+export function getDefaultBackendRow(): StorageBackendRow | null {
+  ensureDefaultBackends()
+  const row = getDb().prepare(`
+    SELECT id, name, type, config_json, secret_json, serving_mode, public_url,
+           quota_bytes, enabled, is_default, sort_order
+    FROM storage_backends
+    WHERE is_default = 1 AND enabled = 1
+    LIMIT 1
+  `).get() as StorageBackendRow | undefined
+  return row ?? null
+}
+
+export function getBackendIdForKey(key: string): string | null {
+  ensureStorageSchema()
+  const row = getDb().prepare(`
+    SELECT backend_id FROM images WHERE key = ?
+  `).get(key) as { backend_id: string } | undefined
+  return row?.backend_id ?? null
+}
+
+export function setDefaultBackend(id: string): void {
+  ensureDefaultBackends()
+  const db = getDb()
+  db.exec('UPDATE storage_backends SET is_default = 0')
+  db.prepare(`
+    UPDATE storage_backends SET is_default = 1, enabled = 1 WHERE id = ?
+  `).run(id)
+}
+
+export interface StorageBackendPatch {
+  name?: string
+  config?: Record<string, unknown>
+  secrets?: { accessKeyId?: string, secretAccessKey?: string }
+  servingMode?: ServingMode
+  publicUrl?: string
+  quotaBytes?: number | null
+  enabled?: boolean
+  isDefault?: boolean
+}
+
+export function updateStorageBackend(id: string, patch: StorageBackendPatch): void {
+  const row = getStorageBackendRow(id)
+  if (!row) {
+    throw new Error(`Storage backend not found: ${id}`)
+  }
+
+  const name = patch.name ?? row.name
+  let configJson = row.config_json
+  let secretJson = row.secret_json
+
+  if (patch.config !== undefined) {
+    const current = row.type === 's3'
+      ? (parseS3Config(row.config_json) ?? {})
+      : {}
+    configJson = JSON.stringify({ ...current, ...patch.config })
+  }
+
+  if (patch.secrets !== undefined && row.type === 's3') {
+    const current = parseS3Secrets(row.secret_json) ?? {
+      accessKeyId: '',
+      secretAccessKey: ''
+    }
+    const next = {
+      accessKeyId: patch.secrets.accessKeyId?.trim()
+        ? patch.secrets.accessKeyId.trim()
+        : current.accessKeyId,
+      secretAccessKey: patch.secrets.secretAccessKey?.trim()
+        ? patch.secrets.secretAccessKey.trim()
+        : current.secretAccessKey
+    }
+    secretJson = JSON.stringify(next)
+  }
+
+  const servingMode = patch.servingMode ?? row.serving_mode
+  const publicUrl = patch.publicUrl ?? row.public_url
+  const quotaBytes = patch.quotaBytes !== undefined
+    ? patch.quotaBytes
+    : row.quota_bytes
+  const enabled = patch.enabled !== undefined
+    ? (patch.enabled ? 1 : 0)
+    : row.enabled
+
+  getDb().prepare(`
+    UPDATE storage_backends
+    SET name = ?, config_json = ?, secret_json = ?, serving_mode = ?,
+        public_url = ?, quota_bytes = ?, enabled = ?
+    WHERE id = ?
+  `).run(name, configJson, secretJson, servingMode, publicUrl, quotaBytes, enabled, id)
+
+  if (patch.isDefault) {
+    setDefaultBackend(id)
+  }
+}
+
+export function isStorageEnvConfigured(): boolean {
+  return getStorageBackendFromEnv() !== null
+}
+
+export function getStorageBackendFromEnv(): {
+  type: StorageBackendType
+  config: Record<string, unknown>
+  secrets: { accessKeyId: string, secretAccessKey: string }
+  servingMode: ServingMode
+  publicUrl: string
+} | null {
+  const backendType = process.env.STORAGE_BACKEND?.trim()
+  if (backendType !== 's3') return null
+
+  const endpoint = process.env.S3_ENDPOINT?.trim() ?? ''
+  const region = process.env.S3_REGION?.trim() ?? ''
+  const bucket = process.env.S3_BUCKET?.trim() ?? ''
+  const accessKeyId = process.env.S3_ACCESS_KEY?.trim() ?? ''
+  const secretAccessKey = process.env.S3_SECRET_KEY?.trim() ?? ''
+
+  if (!endpoint || !bucket || !accessKeyId || !secretAccessKey) {
+    return null
+  }
+
+  return {
+    type: 's3',
+    config: {
+      endpoint,
+      region: region || 'auto',
+      bucket,
+      prefix: process.env.S3_PREFIX?.trim() || undefined,
+      forcePathStyle: process.env.S3_FORCE_PATH_STYLE === 'true'
+    },
+    secrets: { accessKeyId, secretAccessKey },
+    servingMode: process.env.S3_PUBLIC_URL?.trim() ? 'public' : 'proxy',
+    publicUrl: process.env.S3_PUBLIC_URL?.trim() ?? ''
+  }
+}
+
+export function createBackendInstance(row: StorageBackendRow) {
+  if (row.type === 'local') {
+    return new LocalStorageBackend(
+      row.id,
+      row.serving_mode,
+      row.public_url
+    )
+  }
+
+  const config = parseS3Config(row.config_json)
+  const secrets = parseS3Secrets(row.secret_json)
+  if (!config || !secrets) {
+    throw new Error(`Invalid S3 configuration for backend ${row.id}`)
+  }
+
+  return new S3StorageBackend(
+    row.id,
+    config,
+    secrets,
+    row.serving_mode,
+    row.public_url
+  )
+}
+
+export function createBackendFromEnv() {
+  const env = getStorageBackendFromEnv()
+  if (!env) return null
+
+  return new S3StorageBackend(
+    S3_BACKEND_ID,
+    env.config as unknown as S3BackendConfig,
+    env.secrets,
+    env.servingMode,
+    env.publicUrl
+  )
+}
+
+export function getBackendUsageStats(backendId: string): { count: number, bytes: number } {
+  ensureStorageSchema()
+  const row = getDb().prepare(`
+    SELECT COUNT(*) AS count, COALESCE(SUM(size), 0) AS bytes
+    FROM images
+    WHERE backend_id = ?
+  `).get(backendId) as { count: number, bytes: number }
+  return { count: row.count, bytes: row.bytes }
+}
+
+function getNextSortOrder(): number {
+  const row = getDb().prepare(`
+    SELECT COALESCE(MAX(sort_order), 0) AS max_order FROM storage_backends
+  `).get() as { max_order: number }
+  return row.max_order + 1
+}
+
+export function generateStorageBackendId(): string {
+  const bytes = new Uint8Array(4)
+  crypto.getRandomValues(bytes)
+  const suffix = Array.from(bytes, b => b.toString(16).padStart(2, '0')).join('')
+  return `s3-${suffix}`
+}
+
+export function insertStorageBackend(input: {
+  id?: string
+  name: string
+  config: S3BackendConfig
+  secrets: { accessKeyId: string, secretAccessKey: string }
+  servingMode?: ServingMode
+  publicUrl?: string
+  quotaBytes?: number | null
+  enabled?: boolean
+  isDefault?: boolean
+}): string {
+  ensureDefaultBackends()
+  const id = input.id ?? generateStorageBackendId()
+  const sortOrder = getNextSortOrder()
+
+  getDb().prepare(`
+    INSERT INTO storage_backends
+      (id, name, type, config_json, secret_json, serving_mode, public_url,
+       quota_bytes, enabled, is_default, sort_order)
+    VALUES (?, ?, 's3', ?, ?, ?, ?, ?, ?, 0, ?)
+  `).run(
+    id,
+    input.name,
+    JSON.stringify(input.config),
+    JSON.stringify(input.secrets),
+    input.servingMode ?? 'proxy',
+    input.publicUrl ?? '',
+    input.quotaBytes ?? null,
+    input.enabled === false ? 0 : 1,
+    sortOrder
+  )
+
+  if (input.isDefault) {
+    setDefaultBackend(id)
+  }
+
+  return id
+}
+
+export function deleteStorageBackend(id: string): void {
+  if (id === LOCAL_BACKEND_ID) {
+    throw new Error('Cannot delete local backend')
+  }
+
+  const usage = getBackendUsageStats(id)
+  if (usage.count > 0) {
+    throw new Error('Cannot delete backend with stored images')
+  }
+
+  const row = getStorageBackendRow(id)
+  if (!row) {
+    throw new Error(`Storage backend not found: ${id}`)
+  }
+
+  if (row.is_default) {
+    throw new Error('Cannot delete the default backend')
+  }
+
+  getDb().prepare('DELETE FROM storage_backends WHERE id = ?').run(id)
+}
@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import { buildBackendCapacity } from './storage-capacity'
+
+describe('buildBackendCapacity', () => {
+  it('calculates quota-based capacity for s3 backends', async () => {
+    const quotaBytes = 10 * 1024 ** 3
+    const capacity = await buildBackendCapacity('s3-test', 's3', 72_390, quotaBytes)
+    expect(capacity.source).toBe('quota')
+    expect(capacity.totalBytes).toBe(quotaBytes)
+    expect(capacity.usedBytes).toBe(72_390)
+    expect(capacity.freeBytes).toBe(quotaBytes - 72_390)
+    expect(capacity.percent).toBeGreaterThanOrEqual(0)
+  })
+
+  it('allows usage percent to exceed 100 when over quota', async () => {
+    const quotaBytes = 1024
+    const capacity = await buildBackendCapacity('s3-test', 's3', 2048, quotaBytes)
+    expect(capacity.percent).toBe(200)
+    expect(capacity.freeBytes).toBe(0)
+  })
+
+  it('reads disk stats for local backend when available', async () => {
+    const capacity = await buildBackendCapacity('local', 'local', 1024, null)
+    expect(capacity.source).toBe('disk')
+    if (capacity.totalBytes != null) {
+      expect(capacity.totalBytes).toBeGreaterThan(0)
+      expect(capacity.freeBytes).not.toBeNull()
+      expect(capacity.percent).not.toBeNull()
+    } else {
+      expect(capacity.usedBytes).toBe(1024)
+      expect(capacity.freeBytes).toBeNull()
+      expect(capacity.percent).toBeNull()
+    }
+  })
+})
@@ -0,0 +1,92 @@
+import { statfs } from 'node:fs/promises'
+import { getDataDir } from './data-dir'
+import { LOCAL_BACKEND_ID } from './storage-backends'
+
+export interface StorageCapacity {
+  totalBytes: number | null
+  usedBytes: number
+  freeBytes: number | null
+  percent: number | null
+  source: 'disk' | 'quota'
+}
+
+export function parseQuotaBytes(raw: unknown): number | null {
+  const value = Number(raw)
+  if (!Number.isFinite(value) || value <= 0) return null
+  return Math.round(value)
+}
+
+export async function getLocalVolumeStats(): Promise<{
+  totalBytes: number
+  freeBytes: number
+  usedBytes: number
+} | null> {
+  try {
+    const stats = await statfs(getDataDir())
+    const totalBytes = Number(stats.bsize) * Number(stats.blocks)
+    const freeBytes = Number(stats.bsize) * Number(stats.bavail)
+    if (!Number.isFinite(totalBytes) || totalBytes <= 0) return null
+    return {
+      totalBytes,
+      freeBytes: Math.max(0, freeBytes),
+      usedBytes: Math.max(0, totalBytes - freeBytes)
+    }
+  } catch {
+    return null
+  }
+}
+
+function buildQuotaCapacity(quotaBytes: number, indexBytes: number): StorageCapacity {
+  const usedBytes = indexBytes
+  const freeBytes = Math.max(0, quotaBytes - usedBytes)
+  const percent = Math.round((usedBytes / quotaBytes) * 1000) / 10
+  return {
+    totalBytes: quotaBytes,
+    usedBytes,
+    freeBytes,
+    percent,
+    source: 'quota'
+  }
+}
+
+export async function buildBackendCapacity(
+  backendId: string,
+  backendType: 'local' | 's3',
+  indexBytes: number,
+  quotaBytes: number | null
+): Promise<StorageCapacity> {
+  if (backendType === 's3') {
+    if (quotaBytes && quotaBytes > 0) {
+      return buildQuotaCapacity(quotaBytes, indexBytes)
+    }
+    return {
+      totalBytes: null,
+      usedBytes: indexBytes,
+      freeBytes: null,
+      percent: null,
+      source: 'quota'
+    }
+  }
+
+  if (backendId === LOCAL_BACKEND_ID || backendType === 'local') {
+    const volume = await getLocalVolumeStats()
+    if (volume) {
+      const percent = Math.round((volume.usedBytes / volume.totalBytes) * 1000) / 10
+      return {
+        totalBytes: volume.totalBytes,
+        usedBytes: volume.usedBytes,
+        freeBytes: volume.freeBytes,
+        percent,
+        source: 'disk'
+      }
+    }
+  }
+
+  return {
+    totalBytes: null,
+    usedBytes: indexBytes,
+    freeBytes: null,
+    percent: null,
+    source: 'disk'
+  }
+}
@@ -1,314 +1,121 @@
-import { createReadStream, promises as fs } from 'node:fs'
 import type { ReadStream } from 'node:fs'
-import { dirname, join } from 'node:path'
-import { isValidFolderName, validateImageKey, DEFAULT_FOLDER } from './image-key'
+import type { Readable } from 'node:stream'
+import {
+  countImages as countImagesFromIndex,
+  deleteImageIndex,
+  getFolderStorageStats as getFolderStorageStatsFromIndex,
+  getImageIndexAsStored,
+  getUserScopedStorageStats as getUserScopedStorageStatsFromIndex,
+  insertImageIndex,
+  listFolders as listFoldersFromIndex,
+  listFoldersForUser as listFoldersForUserFromIndex,
+  listImageKeysForAutoDelete,
+  listImages as listImagesFromIndex,
+  searchImages as searchImagesFromIndex
+} from './image-index'
+import {
+  getActiveBackend,
+  getBackendForKey
+} from './storage/resolver'
+import type {
+  FolderStorageStat,
+  PaginatedResult,
+  StoredImage,
+  StoredImageMeta
+} from './storage/types'

-/**
- * 本地文件系统存储层
- *
- * 目录布局（DATA_DIR 默认 ./data，容器内挂载 /data）：
- *   <DATA_DIR>/<type>/YYYY/MM/<随机ID>.webp            按上传 type 分目录（默认 images）
- *   <DATA_DIR>/twikoo/YYYY/MM/<随机ID>.webp           twikoo 评论图片
- *   <DATA_DIR>/<type>/YYYY/MM/<随机ID>.webp.meta.json  元数据（原始文件名等）
- *
- * 列表按日期降序（新月份在前），meta 缺失时回退到文件属性。
- */
+export type {
+  FolderStorageStat,
+  PaginatedResult,
+  StoredImage,
+  StoredImageMeta
+} from './storage/types'

-export interface StoredImageMeta {
-  originalName: string
-  uploadedAt: string
-  contentType: string
-  size: number
-  userId?: number | null
-}
-
-export interface StoredImage extends StoredImageMeta {
-  key: string
-  mtimeMs: number
-}
-
-const META_SUFFIX = '.meta.json'
-
-export function getDataDir(): string {
-  return process.env.DATA_DIR || join(process.cwd(), 'data')
-}
-
-function keyToFilePath(key: string): string {
-  // key 均已通过 validateImageKey 校验，不存在路径穿越
-  return join(getDataDir(), ...key.split('/'))
-}
-
-function contentTypeFromKey(key: string): string {
-  const ext = key.split('.').pop()?.toLowerCase()
-  switch (ext) {
-    case 'jpg':
-    case 'jpeg':
-      return 'image/jpeg'
-    case 'png':
-      return 'image/png'
-    case 'gif':
-      return 'image/gif'
-    case 'webp':
-      return 'image/webp'
-    case 'svg':
-      return 'image/svg+xml'
-    case 'ico':
-      return 'image/x-icon'
-    default:
-      return 'application/octet-stream'
-  }
-}
-
-async function readMeta(key: string): Promise<Partial<StoredImageMeta>> {
-  try {
-    const raw = await fs.readFile(keyToFilePath(key) + META_SUFFIX, 'utf8')
-    return JSON.parse(raw) as Partial<StoredImageMeta>
-  } catch {
-    return {}
-  }
-}
+export { getDataDir } from './data-dir'

 export async function putImage(
  key: string,
  bytes: Uint8Array,
  meta: StoredImageMeta
-): Promise<void> {
-  const filePath = keyToFilePath(key)
-  await fs.mkdir(dirname(filePath), { recursive: true })
-  await fs.writeFile(filePath, bytes)
-  await fs.writeFile(filePath + META_SUFFIX, JSON.stringify(meta))
+): Promise<string> {
+  const backend = await getActiveBackend()
+  await backend.put(key, bytes, meta)
+  insertImageIndex({
+    key,
+    backendId: backend.id,
+    userId: meta.userId,
+    originalName: meta.originalName,
+    contentType: meta.contentType,
+    size: meta.size,
+    uploadedAt: meta.uploadedAt
+  })
+  return backend.id
 }

 export async function headImage(key: string): Promise<StoredImage | null> {
-  if (!validateImageKey(key)) return null
+  const indexed = getImageIndexAsStored(key)
+  if (indexed) return indexed

-  let stat
-  try {
-    stat = await fs.stat(keyToFilePath(key))
-  } catch {
-    return null
-  }
-  if (!stat.isFile()) return null
+  const backend = await getBackendForKey(key)
+  const stored = await backend.head(key)
+  if (!stored) return null

-  const meta = await readMeta(key)
-  return {
-    key,
-    size: stat.size,
-    mtimeMs: stat.mtimeMs,
-    contentType: meta.contentType ?? contentTypeFromKey(key),
-    originalName: meta.originalName ?? key.split('/').pop() ?? 'image',
-    uploadedAt: meta.uploadedAt ?? stat.mtime.toISOString(),
-    userId: meta.userId ?? null
-  }
+  insertImageIndex({
+    key: stored.key,
+    backendId: backend.id,
+    userId: stored.userId,
+    originalName: stored.originalName,
+    contentType: stored.contentType,
+    size: stored.size,
+    uploadedAt: stored.uploadedAt
+  })
+
+  return { ...stored, backendId: backend.id }
 }

-export function createImageStream(
+export async function createImageStream(
  key: string,
  range?: { start: number, end: number }
-): ReadStream {
-  return createReadStream(keyToFilePath(key), range)
+): Promise<ReadStream | Readable> {
+  const backend = await getBackendForKey(key)
+  return backend.createStream(key, range)
 }

 export async function deleteImage(key: string): Promise<void> {
-  const filePath = keyToFilePath(key)
-  await fs.unlink(filePath)
-  await fs.unlink(filePath + META_SUFFIX).catch(() => {
-    // meta 文件可能不存在（外部导入的历史图片）
-  })
-}
-
-export interface PaginatedResult<T> {
-  items: T[]
-  total: number
-  page: number
-  pageSize: number
-  totalPages: number
+  const backend = await getBackendForKey(key)
+  await backend.delete(key)
+  deleteImageIndex(key)
 }

 export async function listFolders(): Promise<string[]> {
-  const names = await readDirNames(getDataDir())
-  const folders = names.filter(isValidFolderName)
-  if (!folders.includes(DEFAULT_FOLDER)) {
-    folders.push(DEFAULT_FOLDER)
-  }
-  return folders.sort((a, b) => a.localeCompare(b))
+  return listFoldersFromIndex()
 }

-/** 遍历各 type 目录下的 YYYY/MM，返回按日期降序的 key 列表（新月份在前） */
-export async function listImageKeys(folder?: string): Promise<string[]> {
-  const keys: string[] = []
-  const prefixes = folder && isValidFolderName(folder)
-    ? [folder]
-    : await listFolders()
-
-  for (const prefix of prefixes) {
-    const root = join(getDataDir(), prefix)
-    const years = await readDirNames(root)
-    for (const year of years) {
-      const months = await readDirNames(join(root, year))
-      for (const month of months) {
-        const files = await readFileNames(join(root, year, month))
-        for (const file of files) {
-          if (file.endsWith(META_SUFFIX)) continue
-          const key = `${prefix}/${year}/${month}/${file}`
-          if (validateImageKey(key)) keys.push(key)
-        }
-      }
-    }
-  }
-
-  // 按 YYYY/MM/文件名 降序排，使不同 type 按时间交错而不是分块
-  return keys.sort((a, b) => {
-    const aDate = a.slice(a.indexOf('/') + 1)
-    const bDate = b.slice(b.indexOf('/') + 1)
-    return bDate.localeCompare(aDate) || b.localeCompare(a)
-  })
-}
-
-async function readDirNames(path: string): Promise<string[]> {
-  try {
-    const entries = await fs.readdir(path, { withFileTypes: true })
-    return entries.filter(e => e.isDirectory()).map(e => e.name)
-  } catch {
-    return []
-  }
-}
-
-function matchesUserFilter(
-  meta: StoredImageMeta,
-  userFilter: number | 'admin'
-): boolean {
-  if (userFilter === 'admin') return true
-  const ownerId = meta.userId ?? null
-  if (ownerId === null) return false
-  return ownerId === userFilter
-}
-
-async function filterKeysByUser(
-  keys: string[],
-  userFilter?: number | 'admin'
-): Promise<string[]> {
-  if (userFilter === undefined || userFilter === 'admin') {
-    return keys
-  }
-
-  const filtered: string[] = []
-  for (const key of keys) {
-    const meta = await readMeta(key)
-    if (matchesUserFilter(meta as StoredImageMeta, userFilter)) {
-      filtered.push(key)
-    }
-  }
-  return filtered
-}
-
-async function readFileNames(path: string): Promise<string[]> {
-  try {
-    const entries = await fs.readdir(path, { withFileTypes: true })
-    return entries.filter(e => e.isFile()).map(e => e.name)
-  } catch {
-    return []
-  }
-}
-
-function paginateSlice<T>(
-  all: T[],
-  limit: number,
-  page?: number
-): PaginatedResult<T> {
-  const total = all.length
-  const pageSize = limit
-  const totalPages = Math.max(1, Math.ceil(total / pageSize) || 1)
-  const requestedPage = Math.max(1, page ?? 1)
-  const safePage = Math.min(requestedPage, totalPages)
-  const start = (safePage - 1) * pageSize
-  const items = all.slice(start, start + pageSize)
-
-  return {
-    items,
-    total,
-    page: safePage,
-    pageSize,
-    totalPages
-  }
+export async function listImageKeys(): Promise<string[]> {
+  const images = await listImageKeysForAutoDelete()
+  return images.map(image => image.key)
 }

 export async function countImages(
  folder?: string,
-  userFilter?: number | 'admin'
+  userFilter?: number | 'admin',
+  backendId?: string
 ): Promise<number> {
-  let keys = await listImageKeys(folder)
-  keys = await filterKeysByUser(keys, userFilter)
-  return keys.length
+  return countImagesFromIndex(folder, userFilter, backendId)
 }

-export interface FolderStorageStat {
-  folder: string
-  count: number
-  bytes: number
-}
-
-/** 按顶层目录统计当前磁盘上的图片数量与体积 */
 export async function getFolderStorageStats(
  userFilter?: number | 'admin'
 ): Promise<FolderStorageStat[]> {
-  let keys = await listImageKeys()
-  keys = await filterKeysByUser(keys, userFilter)
-  const map = new Map<string, { count: number, bytes: number }>()
-
-  for (const key of keys) {
-    const folder = key.split('/')[0] ?? 'unknown'
-    const meta = await headImage(key)
-    if (!meta) continue
-    const current = map.get(folder) ?? { count: 0, bytes: 0 }
-    current.count += 1
-    current.bytes += meta.size
-    map.set(folder, current)
-  }
-
-  return [...map.entries()]
-    .map(([folder, stat]) => ({ folder, ...stat }))
-    .sort((a, b) => b.bytes - a.bytes || a.folder.localeCompare(b.folder))
+  return getFolderStorageStatsFromIndex(userFilter)
 }

 export async function listFoldersForUser(
  userFilter?: number | 'admin'
 ): Promise<string[]> {
-  if (userFilter === undefined || userFilter === 'admin') {
-    return listFolders()
-  }
-
-  let keys = await listImageKeys()
-  keys = await filterKeysByUser(keys, userFilter)
-  const folders = new Set<string>()
-  for (const key of keys) {
-    const folder = key.split('/')[0]
-    if (folder && isValidFolderName(folder)) {
-      folders.add(folder)
-    }
-  }
-  if (!folders.size) {
-    folders.add(DEFAULT_FOLDER)
-  }
-  return [...folders].sort((a, b) => a.localeCompare(b))
+  return listFoldersForUserFromIndex(userFilter)
 }

-function startOfDayIsoInShanghai(now = new Date()): string {
-  const shifted = new Date(now.getTime() + 8 * 60 * 60 * 1000)
-  const y = shifted.getUTCFullYear()
-  const m = shifted.getUTCMonth()
-  const d = shifted.getUTCDate()
-  return new Date(Date.UTC(y, m, d) - 8 * 60 * 60 * 1000).toISOString()
-}
-
-function startOfMonthIsoInShanghai(now = new Date()): string {
-  const shifted = new Date(now.getTime() + 8 * 60 * 60 * 1000)
-  const y = shifted.getUTCFullYear()
-  const m = shifted.getUTCMonth()
-  return new Date(Date.UTC(y, m, 1) - 8 * 60 * 60 * 1000).toISOString()
-}
-
-/** 普通用户统计：基于本人图片 meta，不依赖全局 activity_logs */
 export async function getUserScopedStorageStats(userId: number): Promise<{
  storedCount: number
  uploadBytesTotal: number
@@ -316,42 +123,7 @@ export async function getUserScopedStorageStats(userId: number): Promise<{
  uploadMonth: number
  byFolder: FolderStorageStat[]
 }> {
-  let keys = await listImageKeys()
-  keys = await filterKeysByUser(keys, userId)
-
-  const startOfDay = startOfDayIsoInShanghai()
-  const startOfMonth = startOfMonthIsoInShanghai()
-  const map = new Map<string, { count: number, bytes: number }>()
-  let uploadBytesTotal = 0
-  let uploadToday = 0
-  let uploadMonth = 0
-
-  for (const key of keys) {
-    const meta = await headImage(key)
-    if (!meta) continue
-
-    uploadBytesTotal += meta.size
-    if (meta.uploadedAt >= startOfDay) uploadToday += 1
-    if (meta.uploadedAt >= startOfMonth) uploadMonth += 1
-
-    const folder = key.split('/')[0] ?? 'unknown'
-    const current = map.get(folder) ?? { count: 0, bytes: 0 }
-    current.count += 1
-    current.bytes += meta.size
-    map.set(folder, current)
-  }
-
-  const byFolder = [...map.entries()]
-    .map(([folder, stat]) => ({ folder, ...stat }))
-    .sort((a, b) => b.bytes - a.bytes || a.folder.localeCompare(b.folder))
-
-  return {
-    storedCount: keys.length,
-    uploadBytesTotal,
-    uploadToday,
-    uploadMonth,
-    byFolder
-  }
+  return getUserScopedStorageStatsFromIndex(userId)
 }

 export async function listImages(options: {
@@ -359,17 +131,9 @@ export async function listImages(options: {
  page?: number
  folder?: string
  userFilter?: number | 'admin'
+  backendId?: string
 }): Promise<PaginatedResult<StoredImage>> {
-  let keys = await listImageKeys(options.folder)
-  keys = await filterKeysByUser(keys, options.userFilter)
-  const sliced = paginateSlice(keys, options.limit, options.page)
-  const items = (await Promise.all(sliced.items.map(headImage)))
-    .filter((item): item is StoredImage => item !== null)
-
-  return {
-    ...sliced,
-    items
-  }
+  return listImagesFromIndex(options)
 }

 export async function searchImages(options: {
@@ -378,21 +142,7 @@ export async function searchImages(options: {
  page?: number
  folder?: string
  userFilter?: number | 'admin'
+  backendId?: string
 }): Promise<PaginatedResult<StoredImage>> {
-  const needle = options.query.trim().toLowerCase()
-  let keys = await listImageKeys(options.folder)
-  keys = await filterKeysByUser(keys, options.userFilter)
-  const matches: StoredImage[] = []
-
-  for (const key of keys) {
-    const keyMatches = key.toLowerCase().includes(needle)
-    const item = await headImage(key)
-    if (!item) continue
-
-    if (keyMatches || item.originalName.toLowerCase().includes(needle)) {
-      matches.push(item)
-    }
-  }
-
-  return paginateSlice(matches, options.limit, options.page)
+  return searchImagesFromIndex(options)
 }
Author	SHA1	Message	Date
O96u	55effa204e	release: v1.1.2 — activity logs, storage filter, upload rate limits ci / ci (22, ubuntu-latest) (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s Bump version and changelog; fix lint issues before release.	2026-08-26 17:14:50 +08:00
O96u	6fc054328d	feat: activity logs, gallery storage filter, and upload rate limits Add per-user activity logs with storage backend tracking, gallery storage filter, and IP/token upload rate limiting. Fix storage delete modal flash, pin local backend in filter order, and link settings version to GitHub releases.	2026-08-26 17:09:38 +08:00
O96u	901fefb3f5	release: v1.1.1 — session fixes, storage cleanup, logging GitHub Release / release (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s	2026-08-26 15:38:56 +08:00
O96u	acc64751ef	release: v1.1.0 — S3 multi-backend storage and admin UI ci / ci (22, ubuntu-latest) (push) Canceled after 0s Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s	2026-08-26 14:49:46 +08:00
O96u	7c45a78572	release: v1.0.4 Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s Add PasswordInput with show/hide toggle, align legacy setup/register routing, merge duplicate i18n keys, and remove unused jose dependency.	2026-08-25 16:11:50 +08:00
O96u	661146ce20	docs: add Linux.do friend link and align README tables	2026-08-24 10:41:52 +08:00
O96u	9d2ee96af0	fix: CI typecheck and native ARM Docker builds for v1.0.3 Publish Docker image / build (linux/amd64, ubuntu-latest, amd64) (push) Canceled after 0s Publish Docker image / build (linux/arm64, ubuntu-24.04-arm, arm64) (push) Canceled after 0s Publish Docker image / merge (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s Fix TypeScript errors blocking CI, split Docker publish into native amd64/arm64 jobs with manifest merge, and add npm cache mounts.	2026-08-23 18:26:13 +08:00
O96u	22cb2ca8bc	release: v1.0.2 Publish Docker image / build-and-push (push) Canceled after 0s GitHub Release / release (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s Add i18n (zh-CN/en), mobile navigation menus, stats and upload UI improvements, and Docker reset-password CLI for emergency recovery.	2026-08-23 17:43:42 +08:00
O96u	074e4502c2	ci: auto-create GitHub Release from CHANGELOG on version tags Add workflow_dispatch to backfill releases for existing tags.	2026-08-22 19:14:25 +08:00
O96u	1096fa8635	docs: use docker run for quick start in README Users can pull muxui/pichost from Docker Hub without cloning the repo.	2026-08-22 18:55:16 +08:00
O96u	80d2bca4e0	ci: build Docker image only on version tags Stop publishing on main push and remove GHCR; images go to Docker Hub only.	2026-08-22 18:50:33 +08:00
O96u	0d58d38d50	release: PicHost v1.0.1 Publish Docker image / build-and-push (push) Canceled after 0s ci / ci (22, ubuntu-latest) (push) Canceled after 0s Show app version in admin settings footer and fix mobile upload preferences panel clipping.	2026-08-22 18:33:46 +08:00
O96u	fcc60c0762	ci: use 1.0.0 and latest Docker tags for ghcr.io and Docker Hub Drop v-prefixed image tags; version tags apply to both registries on release.	2026-08-22 14:41:24 +08:00