fix: sync package-lock.json for vitepress devDependency

npm ci failed in CI because vitepress was added to package.json without
updating the lockfile.

.env.example

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

.github/workflows/ci.yml

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

.github/workflows/docker-publish.yml

@@ -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
+      - name: Resolve version
-        id: images
+        id: version
         run: |
-          names="ghcr.io/${OWNER}/${IMAGE_NAME}"
+          if [ "${{ github.ref_type }}" = "tag" ]; then
-          if [ -n "${DOCKERHUB_USERNAME}" ]; then
+            echo "value=${GITHUB_REF#refs/tags/v}" >> "$GITHUB_OUTPUT"
-            names="${names}
+          else
-          ${DOCKERHUB_USERNAME}/${IMAGE_NAME}"
+            echo "value=dev" >> "$GITHUB_OUTPUT"
           fi
-          {
-            echo "list<<EOF"
-            echo "${names}"
-            echo "EOF"
-          } >> "$GITHUB_OUTPUT"
-        env:
-          OWNER: ${{ github.repository_owner }}
 
-      - name: Extract metadata
+      - name: Build and push platform image
-        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
         uses: docker/build-push-action@v6
         with:
           context: .
           push: true
-          platforms: linux/amd64,linux/arm64
+          platforms: ${{ matrix.platform }}
-          tags: ${{ steps.meta.outputs.tags }}
+          tags: |
-          labels: ${{ steps.meta.outputs.labels }}
+            ${{ env.DOCKERHUB_USERNAME }}/${{ env.IMAGE_NAME }}:${{ steps.version.outputs.value }}-${{ matrix.suffix }}
-          cache-from: type=gha
+          cache-from: type=gha,scope=${{ matrix.suffix }}
-          cache-to: type=gha,mode=max
+          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"

.github/workflows/docs.yml

@@ -0,0 +1,59 @@
+name: docs
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'docs-site/**'
+      - 'docs/screenshots/**'
+      - '.github/workflows/docs.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v7
+
+      - name: Install node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install npm 11
+        run: |
+          npm install -g npm@11.12.1
+          npm --version
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build docs
+        run: npm run docs:build
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v4
+        with:
+          path: docs-site/.vitepress/dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/release.yml

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

.gitignore

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

CHANGELOG.md

@@ -2,6 +2,182 @@
 
 本仓库自 **v1.0.0** 起作为正式版维护；此前历史提交已归档重置。
 
+## [Unreleased]
+
+## [1.2.1] - 2026-08-29
+
+### 新增
+
+- 登录滑动拼图验证（缺口对齐）；验证与登录分两步，登录接口校验 `captchaId` / `captchaPosition`
+- VitePress 文档站（`docs-site/`）：中英文指南，部署至 GitHub Pages <https://o96u.github.io/PicHost/>
+- `npm run docs:dev` / `docs:build` / `docs:preview`；CI 增加 `docs:build`；`.github/workflows/docs.yml` 发布文档
+
+### 修复
+
+- 修复统计页删除图片后图库不刷新的问题
+- 修复分页跳转输入框在 `type="number"` 下无法跳转的问题
+- 修复非首页路由下复制链接格式偏好不持久化的问题（`useUploadPreferences` 首次使用时自动加载）
+- 滑动验证 UI：滑块垂直居中、缺口尺寸与滑块一致
+
+### 改进
+
+- README 精简为产品宣传页，详细说明指向文档站
+- 双域名文档补充：未知 Host 风险、Cloudflare 橙云部署、勿用 Pages/Workers 整站反代
+- 文档截图更新（登录页等）；旧 `docs/*.md` 长文迁入 `docs-site/`
+
+## [1.2.0] - 2026-08-28
+
+### 变更
+
+- 图片统一存放在 `data/images/`；遗留 `blog/`、`twikoo/` 等并列目录需迁移后升级
+
+### 新增
+
+- CLI 迁移工具：`docker exec pichost migrate` / `migrate --apply`（`server/cli/migrate-to-single-images.mjs`）
+- 扫描 `data/` 下除 `images` 外所有顶层目录中的图片，输出 `data/mapping.json`
+- 启动时自动同步图片索引（扫描磁盘、归一化遗留 key、清理孤儿记录），并打印同步日志
+- 迁移文档：[文档站 · v1.2 迁移](https://o96u.github.io/PicHost/guide/migration)
+
+### 改进
+
+- 启动时归一化遗留 SQLite key、清理无文件的孤儿索引；支持删除仅索引无文件的记录
+
+## [1.1.5] - 2026-08-28
+
+### 修复
+
+- 修复 API 上传后图库预览偶发失败、需等待刷新才显示的问题
+- 图库卡片加载失败后自动重试，刷新列表时重置预览状态
+
+### 改进
+
+- 出图前校验存储文件实际存在，避免索引与磁盘短暂不一致
+- 图片 404/403 与域名隔离 404 禁止 CDN 缓存，降低反代误判影响
+
+## [1.1.4] - 2026-08-28
+
+### 新增
+
+- 上传目录可按年/月分组或扁平保存（`storage_use_date_path` / `STORAGE_USE_DATE_PATH`），设置页可切换
+- 双域名分离下网站域禁止直链出图，仅图片域可访问图片路径
+
+### 改进
+
+- 隐藏 `images/` 前缀时外链改为仅文件名（如 `xxx.webp`）；图片域仍兼容旧版 `/2026/08/xxx.webp` 短链
+- 设置页重构：功能开关、域名配置、存储路径分组展示
+- 本地磁盘索引扫描支持扁平路径；文件夹列表 `images` 置顶
+
+## [1.1.3] - 2026-08-27
+
+### 新增
+
+- 后台与图片域名分离（`SITE_BASE_URL` / `IMAGE_BASE_URL`）：单实例双域名，Host 中间件隔离图片域非图片路径
+- `/setup` 与系统设置支持启用/关闭域名分离，设置页可后续关闭并恢复单域
+- 可选隐藏外链中的 `images/` 前缀（多文件夹时确认提示）
+- 设置页加载时检测 GitHub 最新版本并提示更新
+- 双域名部署文档（Nginx / Lucky / 本地 hosts 测试）：[文档站 · 双域名分离](https://o96u.github.io/PicHost/guide/domain-separation)
+
+### 改进
+
+- 双域名下防盗链自动放行网站域与图片域主机名
+- 开发服务器默认绑定 `127.0.0.1:3000`，便于 hosts 双域本地测试
+- API 文档补充自定义文件夹的 cURL 示例
+
+### 其他
+
+- 许可证变更为 GPL-3.0-only
+- `scripts/` 目录改为本地维护，不再纳入仓库
+
+## [1.1.2] - 2026-08-26
+
+### 新增
+
+- 操作日志页（`/logs`）：记录上传/删除，管理员可查看全部用户并筛选
+- 图库记录支持按存储后端筛选
+- 上传 IP / API Token 限流（15 分钟窗口）
+
+### 改进
+
+- 操作日志记录存储后端；图库卡片可展示存储来源
+- 存储筛选下拉固定「本地磁盘」排在第二位
+- 系统设置页版本号链接至 GitHub Releases
+
+### 修复
+
+- 修复删除存储后端后确认弹窗闪出空名称
+
+## [1.1.1] - 2026-08-26
+
+### 修复
+
+- 移除启动时自动创建的空白「S3 兼容存储」占位；升级后自动清理旧占位记录
+- 修复管理页切换路由时反复闪现「正在验证登录状态」
+- 修复静默会话校验后设置 / 统计 / API 页不加载数据
+
+### 改进
+
+- Docker 日志：4xx/5xx 分级输出，记录错误原因与堆栈；上传/启动任务失败写入详细错误
+
+## [1.1.0] - 2026-08-26
+
+### 新增
+
+- S3 兼容对象存储后端（R2 / AWS S3 / 腾讯云 COS / 阿里云 OSS）
+- `storage_backends` + `images` 索引表，列表/搜索/统计改查 SQLite
+- 混合直链：`proxy`（默认，PicHost 代理）与 `public`（302 到 CDN）
+- 管理员 `/storage` 存储管理页：多后端卡片、用量条、添加/编辑/删除云存储实例
+- 可选环境变量覆盖存储配置（`STORAGE_BACKEND`、`S3_*`）
+
+### 改进
+
+- 启动时自动将本地磁盘图片扫描迁入 `images` 索引（幂等）
+- 上传/删除/直链/auto-delete 按 `backend_id` 路由到对应后端
+
+## [1.0.4] - 2026-08-25
+
+### 新增
+
+- 密码输入框支持显示/隐藏切换（`PasswordInput` 组件，含无障碍文案）
+
+### 改进
+
+- 遗留 `ADMIN_SECRET` 部署：`/setup`、`/register` 路由与 `needsMigration` 检测对齐
+- 合并重复的密码不一致 i18n 文案；移除未使用的 `jose` 依赖
+
+### 修复
+
+- 修复 `PasswordInput` 导致 CI typecheck 失败
+
+## [1.0.3] - 2026-08-23
+
+### 修复
+
+- 修复 CI typecheck 失败（移动端菜单、i18n、统计页图库刷新）
+- Docker 构建：arm64 改用原生 ARM Runner，避免 QEMU 下 `npm ci` 极慢
+- Docker 构建：启用 npm 缓存挂载，加快依赖安装
+
+## [1.0.2] - 2026-08-23
+
+### 新增
+
+- 中英文界面（`@nuxtjs/i18n`），语言切换与主题切换独立菜单
+- 移动端导航：汉堡菜单 + 分组用户菜单（语言 / 外观 / 账户）
+- Docker 忘记密码：`docker exec pichost reset-password`（随机密码，见 `server/cli/`）
+- Docker 升级到 v1.2.0 前迁移遗留目录：`docker exec pichost migrate` / `migrate --apply`
+
+### 改进
+
+- 统计页工具栏与图库布局（桌面单行、移动端适配）
+- 上传卡片视觉优化（背景图、插图、悬停边框动效）
+- Logo 与上传区图片压缩，减小体积
+
+## [1.0.1] - 2026-08-22
+
+### 修复
+
+- 系统设置页底部显示当前应用版本号
+- 修复移动端上传偏好面板内容被裁剪、无法完整展示的问题
+
 ## [1.0.0] - 2026-08-22
 
 ### 新增
@@ -24,6 +200,13 @@
 
 ### 路线图
 
-- **v1.1.0**（计划中）：S3、Cloudflare R2 及更多对象存储后端
+- **v1.2.0**（开发中）：统一 `images/` 存储、遗留目录迁移 CLI、启动索引同步
 
+[1.2.0]: https://github.com/O96u/PicHost/releases/tag/v1.2.0
+[1.1.1]: https://github.com/O96u/PicHost/releases/tag/v1.1.1
+[1.1.0]: https://github.com/O96u/PicHost/releases/tag/v1.1.0
+[1.0.4]: https://github.com/O96u/PicHost/releases/tag/v1.0.4
+[1.0.3]: https://github.com/O96u/PicHost/releases/tag/v1.0.3
+[1.0.2]: https://github.com/O96u/PicHost/releases/tag/v1.0.2
+[1.0.1]: https://github.com/O96u/PicHost/releases/tag/v1.0.1
 [1.0.0]: https://github.com/O96u/PicHost/releases/tag/v1.0.0

Dockerfile

@@ -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,12 @@ ENV NODE_ENV=production \
     DATA_DIR=/data
 
 COPY --from=build /app/.output ./.output
+COPY server/cli/reset-password.mjs ./server/cli/reset-password.mjs
+COPY server/cli/migrate-to-single-images.mjs ./server/cli/migrate-to-single-images.mjs
+COPY 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"]

LICENSE

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

README.en.md

@@ -6,22 +6,21 @@
 
 <p align="center"><strong>Lightweight personal image hosting</strong> · Simple uploads, clean management</p>
 
-<p align="center">Self-hosted / Multi-user / Docker / API / Twikoo · Zero-config setup</p>
+<p align="center">Self-hosted / Multi-user / Docker / API / Twikoo · Local disk or object storage</p>
 
 <p align="center">
   <a href="https://github.com/O96u/PicHost/blob/main/package.json"><img src="https://img.shields.io/github/package-json/v/O96u/PicHost?style=flat-square&color=22c55e" alt="version" /></a>
   <a href="https://github.com/O96u/PicHost/actions/workflows/ci.yml"><img src="https://github.com/O96u/PicHost/actions/workflows/ci.yml/badge.svg" alt="CI" /></a>
   <img src="https://img.shields.io/badge/Nuxt-4-00DC82?style=flat-square&logo=nuxt.js&logoColor=white" alt="Nuxt 4" />
   <a href="https://hub.docker.com/r/muxui/pichost"><img src="https://img.shields.io/badge/Docker-muxui%2Fpichost-2496ED?style=flat-square&logo=docker&logoColor=white" alt="Docker" /></a>
-  <img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT" />
+  <img src="https://img.shields.io/badge/license-GPL--3.0-blue?style=flat-square" alt="GPL-3.0" />
 </p>
 
 <p align="center">
-  <a href="#quick-start">Quick Start</a> ·
+  <a href="https://o96u.github.io/PicHost/en/">Docs</a> ·
   <a href="#screenshots">Screenshots</a> ·
   <a href="#features">Features</a> ·
-  <a href="#tech-stack">Tech Stack</a> ·
+  <a href="#quick-start">Quick Start</a> ·
-  <a href="#roadmap">Roadmap</a> ·
   <a href="README.md">简体中文</a>
 </p>
 
@@ -29,160 +28,49 @@
 
 ## Screenshots
 
-| Login | Upload |
+**main** has no public demo. **cloudflare** branch live demo: [pic.roven.cc](https://pic.roven.cc)
-|:---:|:---:|
-| ![Login](docs/screenshots/login.png) | ![Upload](docs/screenshots/upload.png) |
 
-| Upload preferences | Stats & gallery |
+| Home | Storage |
-|:---:|:---:|
+| :--: | :-----: |
-| ![Preferences](docs/screenshots/preferences.png) | ![Stats](docs/screenshots/stats.png) |
+| ![Home](docs/screenshots/upload.png) | ![Storage](docs/screenshots/storage.png) |
 
-| Settings | |
+| Stats | Settings |
-|:---:|:---:|
+| :---: | :-------: |
-| ![Settings](docs/screenshots/settings.png) | |
+| ![Stats](docs/screenshots/stats.png) | ![Settings](docs/screenshots/settings-en.png) |
 
 ## Features
 
-- **Drag, click, or Ctrl+V paste** to upload; admins can use custom `folder` paths
+- **Drag, click, or Ctrl+V paste** — server-side WebP, Referer hotlink protection
-- **Server-side WebP** (sharp), Referer hotlink protection, configurable public base URL
+- **Multi-user** — login with slider captcha, optional registration; users see only their images
-- **Multi-user** — username/password login; optional registration; users see only their images
+- **Multi-backend storage** — local disk + S3-compatible (R2 / COS / OSS / AWS); hybrid `proxy` / `public` URLs
-- **Upload preferences** (card flip UI): client-side compression, auto-copy links, per-user auto-delete
+- **Gallery & stats** — browse, search, batch delete; upload trends and source breakdown
-- **Gallery** — browse, search, batch delete; admin sees uploader badges
+- **API & Twikoo** — global / per-user tokens; `POST /api/index.php` compatible
-- **Stats** — upload/delete metrics, folder breakdown; admin sees registered user count
+- **Zero-config Docker** — first-run web wizard, no secrets upfront
-- **API** — global token (admin) + per-user tokens; in-app cURL snippets
-- **Twikoo** — `POST /api/index.php` (`image` + `token`)
-- **Zero-config Docker** — first-run web wizard, no secrets required upfront
 
 ## Quick Start
 
-### Docker (recommended)
-
 ```bash
-git clone https://github.com/O96u/PicHost.git
+docker run -d \
-cd PicHost
+  --name pichost \
-docker compose up -d
+  -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`).
+Open `http://<host>:6892` and complete the setup wizard.
 
-### Local development
+**Full guide** (env vars, upgrades, dual-domain setup, API, Twikoo, reverse proxy, local dev, etc.): **[Documentation](https://o96u.github.io/PicHost/en/)**.
 
-```bash
+| Branch | Notes |
-npm install
+| ------ | ----- |
-cp .env.example .env   # optional
+| [**main**](https://github.com/O96u/PicHost/tree/main) | Default: multi-backend, dual-domain, unified `images/` storage |
-npm run dev
+| [**cloudflare**](https://github.com/O96u/PicHost/tree/cloudflare) | Cloudflare R2 only; live demo [pic.roven.cc](https://pic.roven.cc) |
-```
-
-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).
-
-## Users & permissions
-
-| Scenario | Auth | Ownership / visibility |
-|----------|------|------------------------|
-| Web upload | Session | Current user |
-| API upload + **user token** | `Auth-Token` | Token owner |
-| API upload + **global token** | `Auth-Token` | Admin (`userId` null) |
-| Twikoo `/api/index.php` | form `token` | Same as global token |
-| Gallery list / search / delete | Session or token | Users: own only; admin: all |
-| Direct link `GET /images/...` | None (Referer rules) | Public if URL is known |
-
-Regular users are limited to the `images/` folder; custom `folder` requires admin or global token.
-
-## Storage layout
-
-```
-/data
-├── pichost.db          # SQLite: users, sessions, settings, logs
-├── images/             # Default upload folder
-├── blog/               # Example custom folder
-└── twikoo/             # Twikoo comment images
-```
-
-Pattern: `folder/YYYY/MM/randomId.webp` + `.meta.json`. Back up the entire `/data` directory.
-
-## API overview
-
-| Method | Path | Description |
-|--------|------|-------------|
-| POST | `/api/images/upload` | Upload image |
-| GET | `/api/images` | Paginated list |
-| DELETE | `/api/images` | Delete one (`key`) |
-| POST | `/api/index.php` | Twikoo / EasyImage 2.0 |
-
-Upload example:
-
-```bash
-curl -X POST "https://pic.example.com/api/images/upload" \
-  -H "Auth-Token: YOUR_TOKEN" \
-  -F "folder=blog" \
-  -F "image=@./demo.png"
-```
-
-Full docs and copyable cURL snippets are on the **API** page after deployment.
-
-## Twikoo
-
-| Setting | Value |
-|---------|-------|
-| `IMAGE_CDN` | `easyimage` |
-| `IMAGE_CDN_URL` | `https://your-domain/api/index.php` |
-| `IMAGE_CDN_TOKEN` | Same as `API_UPLOAD_TOKEN` |
-
-## Reverse proxy
-
-- Proxy to port **6892**; HTTPS recommended
-- Nginx: `client_max_body_size` ≥ 12m
-- Set `IMAGE_BASE_URL` for public access
-
-## Development
-
-```bash
-npm run dev          # Dev server
-npm run build        # Production build
-npm run start        # Run .output
-npm run lint         # ESLint
-npm run typecheck    # Type check
-npm test             # Unit tests
-```
-
-## Roadmap
-
-| Version | Plan |
-|---------|------|
-| **v1.0.0** | Local storage, multi-user, API, Twikoo (current) |
-| **v1.1.0** | S3, Cloudflare R2, and more object storage backends |
 
 ## License
 
-[MIT](LICENSE)
+[GPL-3.0](LICENSE)
+
+## Friend links
+
+[LINUX DO](https://linux.do/)

README.md

@@ -6,22 +6,21 @@
 
 <p align="center"><strong>个人轻量图床</strong> · 图片放好，管理也要顺手</p>
 
-<p align="center">自托管图床 / 多用户 / Docker / API / Twikoo · 零配置引导</p>
+<p align="center">自托管图床 / 多用户 / Docker / API / Twikoo · 本地磁盘或对象存储</p>
 
 <p align="center">
   <a href="https://github.com/O96u/PicHost/blob/main/package.json"><img src="https://img.shields.io/github/package-json/v/O96u/PicHost?style=flat-square&color=22c55e" alt="version" /></a>
   <a href="https://github.com/O96u/PicHost/actions/workflows/ci.yml"><img src="https://github.com/O96u/PicHost/actions/workflows/ci.yml/badge.svg" alt="CI" /></a>
   <img src="https://img.shields.io/badge/Nuxt-4-00DC82?style=flat-square&logo=nuxt.js&logoColor=white" alt="Nuxt 4" />
   <a href="https://hub.docker.com/r/muxui/pichost"><img src="https://img.shields.io/badge/Docker-muxui%2Fpichost-2496ED?style=flat-square&logo=docker&logoColor=white" alt="Docker" /></a>
-  <img src="https://img.shields.io/badge/license-MIT-blue?style=flat-square" alt="MIT" />
+  <img src="https://img.shields.io/badge/license-GPL--3.0-blue?style=flat-square" alt="GPL-3.0" />
 </p>
 
 <p align="center">
-  <a href="#快速开始">快速开始</a> ·
+  <a href="https://o96u.github.io/PicHost/">文档</a> ·
   <a href="#界面预览">预览</a> ·
   <a href="#特性">特性</a> ·
-  <a href="#技术栈">技术栈</a> ·
+  <a href="#快速开始">快速开始</a> ·
-  <a href="#路线图">路线图</a> ·
   <a href="README.en.md">English</a>
 </p>
 
@@ -29,160 +28,49 @@
 
 ## 界面预览
 
-| 登录 | 上传 |
+**main** 分支暂无公网演示；**cloudflare** 分支在线体验：[pic.roven.cc](https://pic.roven.cc)
-|:---:|:---:|
-| ![登录](docs/screenshots/login.png) | ![上传](docs/screenshots/upload.png) |
 
-| 上传偏好 | 统计与图库 |
+| 首页 | 存储 |
-|:---:|:---:|
+| :--: | :--: |
-| ![上传偏好](docs/screenshots/preferences.png) | ![统计](docs/screenshots/stats.png) |
+| ![首页](docs/screenshots/upload.png) | ![存储](docs/screenshots/storage.png) |
 
-| 系统设置 | |
+| 统计 | 设置 |
-|:---:|:---:|
+| :--: | :--: |
-| ![设置](docs/screenshots/settings.png) | |
+| ![统计](docs/screenshots/stats.png) | ![设置](docs/screenshots/settings.png) |
 
 ## 特性
 
-- **拖拽 / 点击 / Ctrl+V 粘贴**上传；管理员可自定义 `folder` 目录
+- **拖拽 / 点击 / Ctrl+V 粘贴**上传；服务端 WebP 压缩、Referer 防盗链
-- **服务端 WebP 压缩**（sharp）、Referer 防盗链、可配置访问域名
+- **多用户**：账号密码登录（滑动验证）、可选开放注册；普通用户仅见自己的图片
-- **多用户**：账号密码登录；管理员可开放注册；普通用户仅见自己的图片
+- **多后端存储**：本地磁盘 + S3 兼容（R2 / COS / OSS / AWS）；混合直链 `proxy` / `public`
-- **上传偏好**（卡片翻转设置）：客户端预压缩、自动复制链接、按用户自动删除
+- **图库与统计**：浏览、搜索、批量删除；上传趋势与来源分布
-- **图库**：浏览、搜索、批量删除；管理员可查看上传者标签
+- **API 与 Twikoo**：全局 / 个人 Token；`POST /api/index.php` 兼容
-- **统计**：上传/删除趋势、目录分布；管理员额外显示注册用户数量
+- **Docker 零配置**：首次访问 Web 引导创建管理员
-- **API**：全局 Token（管理员）+ 每用户个人 Token；后台可复制 cURL
-- **Twikoo**：`POST /api/index.php`（`image` + `token`）
-- **Docker 零配置**：首次访问 Web 引导创建管理员，无需预先写密钥
 
 ## 快速开始
 
-### Docker（推荐）
-
 ```bash
-git clone https://github.com/O96u/PicHost.git
+docker run -d \
-cd PicHost
+  --name pichost \
-docker compose up -d
+  -p 6892:6892 \
+  -v ./data:/data \
+  --restart unless-stopped \
+  muxui/pichost:latest
 ```
 
-默认端口 **6892**。浏览器打开后按引导创建管理员即可。镜像：`muxui/pichost:latest`（备用 `ghcr.io/o96u/pichost:latest`）。
+浏览器打开 `http://<主机IP>:6892`，按引导完成设置即可。
 
-### 本地开发
+**详细说明**（环境变量、升级迁移、双域名、API、Twikoo、反向代理、本地开发等）见 **[用户文档](https://o96u.github.io/PicHost/)**。
 
-```bash
+| 分支 | 说明 |
-npm install
+| ---- | ---- |
-cp .env.example .env   # 可选
+| [**main**](https://github.com/O96u/PicHost/tree/main) | 默认主线：多后端、双域名、统一 `images/` 存储 |
-npm run dev
+| [**cloudflare**](https://github.com/O96u/PicHost/tree/cloudflare) | 仅 Cloudflare R2；在线演示 [pic.roven.cc](https://pic.roven.cc) |
-```
-
-访问 `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)。
-
-## 用户与权限
-
-| 场景 | 鉴权 | 图片归属 / 可见范围 |
-|------|------|---------------------|
-| 网页上传 | Session | 当前登录用户 |
-| API 上传 + **个人 Token** | `Auth-Token` | 该 Token 所属用户 |
-| API 上传 + **全局 Token** | `Auth-Token` | 管理员（`userId` 为空） |
-| Twikoo `/api/index.php` | 表单 `token` | 与全局 Token 相同 |
-| 图库列表 / 搜索 / 删除 | Session 或 Token | 普通用户仅自己；管理员全部 |
-| 图片直链 `GET /images/...` | 无（Referer 防盗链） | 知道 URL 即可访问 |
-
-普通用户上传目录固定为 `images/`；自定义 `folder` 仅管理员或全局 Token 可用。
-
-## 存储结构
-
-```
-/data
-├── pichost.db          # SQLite：用户、会话、设置、操作日志
-├── images/             # 默认上传目录
-├── blog/               # 管理员自定义 folder 示例
-└── twikoo/             # Twikoo 评论图片
-```
-
-路径规则：`目录/年/月/随机ID.webp` + 同名 `.meta.json`。备份整个 `/data` 即可。
-
-## API 概览
-
-| 方法 | 路径 | 说明 |
-|------|------|------|
-| POST | `/api/images/upload` | 上传图片 |
-| GET | `/api/images` | 分页列表 |
-| DELETE | `/api/images` | 删除单张（`key`） |
-| POST | `/api/index.php` | Twikoo / EasyImage 2.0 |
-
-上传示例：
-
-```bash
-curl -X POST "https://pic.example.com/api/images/upload" \
-  -H "Auth-Token: YOUR_TOKEN" \
-  -F "folder=blog" \
-  -F "image=@./demo.png"
-```
-
-完整接口与可复制 cURL 见部署后后台 **API** 页。
-
-## Twikoo
-
-| 配置项 | 值 |
-|--------|-----|
-| `IMAGE_CDN` | `easyimage` |
-| `IMAGE_CDN_URL` | `https://你的域名/api/index.php` |
-| `IMAGE_CDN_TOKEN` | 与 `API_UPLOAD_TOKEN` 相同 |
-
-## 反向代理
-
-- 反代到容器 **6892** 端口，建议 HTTPS
-- Nginx：`client_max_body_size` ≥ 12m
-- 公网访问请配置 `IMAGE_BASE_URL`
-
-## 开发
-
-```bash
-npm run dev          # 开发服务器
-npm run build        # 生产构建
-npm run start        # 运行 .output
-npm run lint         # ESLint
-npm run typecheck    # 类型检查
-npm test             # 单元测试
-```
-
-## 路线图
-
-| 版本 | 计划 |
-|------|------|
-| **v1.0.0** | 本地存储、多用户、API、Twikoo（当前） |
-| **v1.1.0** | S3、Cloudflare R2 等对象存储后端 |
 
 ## License
 
-[MIT](LICENSE)
+[GPL-3.0](LICENSE)
+
+## 友链
+
+[LINUX DO](https://linux.do/)

app/app.vue

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

app/assets/css/main.css

@@ -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) 72%, transparent);
-  background-color: color-mix(in oklab, var(--ui-bg-elevated) 50%, 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;
 }

app/components/AdminLoginGate.vue

@@ -2,26 +2,38 @@
 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('')
 const secret = ref('')
 const loading = ref(false)
+const captchaRef = ref<{ reset: () => Promise<void> } | null>(null)
+const captchaPayload = ref<{ captchaId: string, captchaPosition: number } | null>(null)
 
 const legacyMode = computed(() => authStatus.value?.legacyMode ?? false)
 const allowRegistration = computed(() => authStatus.value?.allowRegistration ?? false)
 
 const canSubmit = computed(() =>
-  legacyMode.value ? Boolean(secret.value) : Boolean(username.value && password.value)
+  Boolean(captchaPayload.value)
+  && (legacyMode.value ? Boolean(secret.value) : Boolean(username.value && password.value))
 )
 
+function onCaptchaVerified(payload: { id: string, positionPercent: number }) {
+  captchaPayload.value = {
+    captchaId: payload.id,
+    captchaPosition: payload.positionPercent
+  }
+}
+
+async function resetCaptcha() {
+  captchaPayload.value = null
+  await captchaRef.value?.reset()
+}
+
 onMounted(async () => {
   const status = await fetchStatus()
   if (!status.initialized && !status.legacyMode) {
@@ -30,13 +42,14 @@ onMounted(async () => {
 })
 
 async function submit() {
-  if (!canSubmit.value || loading.value) return
+  if (!canSubmit.value || loading.value || !captchaPayload.value) return
   loading.value = true
 
   try {
+    const captcha = captchaPayload.value
     const result = legacyMode.value
-      ? await login({ secret: secret.value })
+      ? await login({ secret: secret.value }, captcha)
-      : await login({ username: username.value.trim(), password: password.value })
+      : await login({ username: username.value.trim(), password: password.value }, captcha)
 
     if (result.ok) {
       if (result.needsMigration) {
@@ -46,11 +59,12 @@ async function submit() {
       username.value = ''
       password.value = ''
       secret.value = ''
-      emit('success')
+      await resetCaptcha()
-      toast.add({ title: '登录成功', color: 'success' })
+      toast.add({ title: t('auth.loginSuccess'), color: 'success' })
     } else {
+      await resetCaptcha()
       toast.add({
-        title: result.error ?? (legacyMode.value ? '登录失败，请检查密钥' : '用户名或密码错误'),
+        title: result.error ?? (legacyMode.value ? t('auth.loginFailedSecret') : t('auth.loginFailedCredentials')),
         color: 'error'
       })
     }
@@ -61,7 +75,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 +104,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 +119,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="t('auth.adminSecretPlaceholder')"
-              placeholder="输入 ADMIN_SECRET"
               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 +140,12 @@ async function submit() {
               for="login-username"
               class="block text-sm font-medium text-default"
             >
-              用户名
+              {{ t('auth.username') }}
             </label>
             <UInput
               id="login-username"
               v-model="username"
-              placeholder="用户名"
+              :placeholder="t('auth.username')"
               autocomplete="username"
               size="lg"
               class="w-full"
@@ -145,25 +158,26 @@ 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="t('auth.password')"
-              placeholder="密码"
               autocomplete="current-password"
-              size="lg"
-              class="w-full"
-              :ui="{ root: 'w-full' }"
               @keyup.enter="submit"
             />
           </div>
         </template>
 
+        <SliderCaptcha
+          ref="captchaRef"
+          @verified="onCaptchaVerified"
+        />
+
         <UButton
           type="submit"
-          label="登录"
+          :label="t('auth.login')"
           icon="i-lucide-log-in"
           size="lg"
           block
@@ -176,18 +190,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>

app/components/ApiCurlBlock.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    code: string
+    scrollable?: boolean
+  }>(),
+  {
+    scrollable: true
+  }
+)
+
+const toast = useToast()
+const { t } = useI18n()
+
+async function copyCode() {
+  try {
+    await navigator.clipboard.writeText(props.code)
+    toast.add({ title: t('copy.curl'), color: 'success' })
+  } catch {
+    toast.add({ title: t('copy.failed'), color: 'error' })
+  }
+}
+</script>
+
+<template>
+  <div class="overflow-hidden rounded-xl bg-neutral-950">
+    <div
+      class="flex items-center justify-between border-b border-neutral-800/80 bg-neutral-900 px-3.5 py-2.5"
+    >
+      <div
+        class="flex items-center gap-2"
+        aria-hidden="true"
+      >
+        <span class="size-3 rounded-full border border-black/15 bg-[#ff5f56]" />
+        <span class="size-3 rounded-full border border-black/15 bg-[#ffbd2e]" />
+        <span class="size-3 rounded-full border border-black/15 bg-[#27c93f]" />
+      </div>
+      <UButton
+        icon="i-lucide-copy"
+        :label="t('common.copy')"
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        class="text-neutral-300 hover:text-white"
+        @click="copyCode"
+      />
+    </div>
+    <pre
+      class="overflow-auto p-4 text-xs leading-relaxed text-neutral-100"
+      :class="props.scrollable ? 'max-h-80' : ''"
+    ><code class="font-mono">{{ props.code }}</code></pre>
+  </div>
+</template>

app/components/AppShell.vue

@@ -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: t('nav.api'), to: '/api', icon: 'i-lucide-code-2' },
-    { label: '统计', to: '/stats', icon: 'i-lucide-chart-column' }
+    { 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(() => {
+const accountMenuItems = computed<DropdownMenuItem[]>(() => [
-  if (colorMode.preference === 'system') return 'i-lucide-monitor'
-  return colorMode.preference === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'
-})
-
-const themeItems = computed<DropdownMenuItem[][]>(() => [[
   {
-    label: '浅色',
+    label: t('nav.logs'),
-    icon: 'i-lucide-sun',
+    icon: 'i-lucide-scroll-text',
-    type: 'checkbox',
+    to: '/logs'
-    checked: colorMode.preference === 'light',
-    onUpdateChecked(checked: boolean) {
-      if (checked) colorMode.preference = 'light'
-    }
   },
   {
-    label: '深色',
+    label: t('nav.changePassword'),
-    icon: 'i-lucide-moon',
+    icon: 'i-lucide-key-round',
-    type: 'checkbox',
+    to: '/account/password'
-    checked: colorMode.preference === 'dark',
-    onUpdateChecked(checked: boolean) {
-      if (checked) colorMode.preference = 'dark'
-    }
   },
   {
-    label: '跟随系统',
+    label: t('nav.logout'),
-    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: '退出登录',
     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">
+      <div class="mx-auto max-w-7xl px-4 py-2.5 sm:px-6">
-        <NuxtLink
+        <div class="flex items-center justify-between gap-3">
-          to="/"
+          <NuxtLink
-          title="返回上传"
+            to="/"
-          class="group flex shrink-0 items-center gap-2.5 transition-opacity hover:opacity-90 sm:gap-3"
+            :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="logoLight"
-            alt="PicHost"
-            class="h-10 w-auto shrink-0 object-contain sm:h-11 dark:hidden"
-            decoding="async"
-            draggable="false"
           >
-          <img
+            <img
-            :src="logoDark"
+              :src="logoLight"
-            alt="PicHost"
+              alt="PicHost"
-            class="hidden h-10 w-auto shrink-0 object-contain sm:h-11 dark:block"
+              class="h-9 w-auto shrink-0 object-contain sm:h-11 dark:hidden"
-            decoding="async"
+              decoding="async"
-            draggable="false"
+              draggable="false"
-          >
+            >
-          <div class="min-w-0 leading-tight">
+            <img
-            <p class="text-[15px] font-bold tracking-tight sm:text-base">
+              :src="logoDark"
-              <span class="text-highlighted">Pic</span><span class="text-primary">Host</span>
+              alt="PicHost"
-            </p>
+              class="hidden h-9 w-auto shrink-0 object-contain sm:h-11 dark:block"
-            <p class="mt-0.5 text-[11px] text-muted sm:text-xs">
+              decoding="async"
-              个人轻量图床
+              draggable="false"
-            </p>
+            >
-          </div>
+            <div class="min-w-0 leading-tight">
-        </NuxtLink>
+              <p class="text-[15px] font-bold tracking-tight sm:text-base">
-
+                <span class="text-highlighted">Pic</span><span class="text-primary">Host</span>
-        <div class="flex flex-wrap items-center justify-end gap-1 sm:gap-2">
+              </p>
-          <nav class="flex flex-wrap items-center gap-1">
+              <p class="mt-0.5 hidden text-[11px] text-muted min-[380px]:block sm:text-xs">
-            <UButton
+                {{ t('app.tagline') }}
-              v-for="item in navItems"
+              </p>
-              :key="item.to"
+            </div>
-              :to="item.to"
+          </NuxtLink>
-              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" />
 
           <ClientOnly>
-            <UDropdownMenu
+            <div class="flex shrink-0 items-center gap-0.5 sm:gap-1">
-              v-if="user"
+              <nav class="hidden items-center gap-1 sm:flex">
-              :items="userMenuItems"
+                <UButton
-            >
+                  v-for="item in navItems"
-              <UButton
+                  :key="item.to"
-                variant="ghost"
+                  :to="item.to"
-                color="neutral"
+                  size="sm"
-                size="sm"
+                  :variant="isNavActive(item.to) ? 'soft' : 'ghost'"
-                class="max-w-[10rem] gap-1.5"
+                  :color="isNavActive(item.to) ? 'primary' : 'neutral'"
-              >
+                  :icon="item.icon"
-                <UIcon
+                  :label="item.label"
-                  name="i-lucide-user"
-                  class="size-4 shrink-0"
                 />
-                <span class="truncate">{{ user.username }}</span>
+              </nav>
-                <UIcon
+
-                  name="i-lucide-chevron-down"
+              <div class="mx-1 hidden h-5 w-px bg-muted sm:block" />
-                  class="size-3.5 shrink-0 opacity-60"
+
+              <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>
+                <MobileNavMenu
-            </UDropdownMenu>
+                  v-model:open="mobileNavOpen"
-            <UDropdownMenu :items="themeItems">
+                  :items="navItems"
-              <UButton
+                />
-                :icon="themeIcon"
+              </div>
-                variant="ghost"
+
-                color="neutral"
+              <div class="hidden sm:block">
-                size="sm"
+                <UDropdownMenu
-                aria-label="切换主题"
+                  v-if="user"
-              />
+                  :items="desktopUserMenuItems"
-            </UDropdownMenu>
+                >
+                  <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>

app/components/AuthPagePreferences.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="flex items-center gap-1">
+    <LocaleMenu />
+    <ThemeMenu />
+  </div>
+</template>

app/components/CopyButton.vue

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

app/components/DeleteConfirmModal.vue

@@ -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="确认删除"
+    :title="t('delete.confirmTitle')"
-    :description="`确定要删除选中的 ${count} 张图片吗？此操作不可恢复。`"
+    :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"

app/components/ImageCard.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { ImageItem } from '~/types/image'
-
+import type { CopyFormat } from '~/composables/useUploadPreferences'
-type CopyFormat = 'url' | 'markdown' | 'html'
 
 const props = withDefaults(defineProps<{
   image: ImageItem
@@ -9,9 +8,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 +23,63 @@ const emit = defineEmits<{
 }>()
 
 const { formatFileSize } = useFileSize()
+const { t, locale } = useI18n()
+const { copyFormat } = useUploadPreferences()
 const imageError = ref(false)
-const copyFormat = ref<CopyFormat>('url')
+const retryCount = ref(0)
 
-const copyFormatItems = [
+function selectCopyFormat(value: CopyFormat) {
-  { label: '直链', value: 'url' as const },
+  copyFormat.value = value
-  { label: 'Markdown', value: 'markdown' as const },
+}
-  { label: 'HTML', value: 'html' as const }
+
-]
+const MAX_PREVIEW_RETRIES = 3
+const PREVIEW_RETRY_DELAYS_MS = [1000, 2000, 4000]
+
+const previewSrc = computed(() => {
+  if (retryCount.value === 0) return props.image.url
+  const separator = props.image.url.includes('?') ? '&' : '?'
+  return `${props.image.url}${separator}retry=${retryCount.value}`
+})
+
+watch(() => props.image.key, () => {
+  imageError.value = false
+  retryCount.value = 0
+})
+
+let retryTimer: ReturnType<typeof setTimeout> | undefined
+
+function clearRetryTimer() {
+  if (retryTimer !== undefined) {
+    clearTimeout(retryTimer)
+    retryTimer = undefined
+  }
+}
+
+function onPreviewError() {
+  if (retryCount.value >= MAX_PREVIEW_RETRIES) {
+    imageError.value = true
+    return
+  }
+
+  const delay = PREVIEW_RETRY_DELAYS_MS[retryCount.value] ?? PREVIEW_RETRY_DELAYS_MS.at(-1)!
+  clearRetryTimer()
+  retryTimer = setTimeout(() => {
+    retryCount.value += 1
+    retryTimer = undefined
+  }, delay)
+}
+
+onUnmounted(clearRetryTimer)
+
+const copyFormatItems = computed(() => [
+  { label: t('copy.url'), value: 'url' as const },
+  { label: t('copy.markdown'), value: 'markdown' as const },
+  { label: t('copy.html'), value: 'html' as const }
+])
 
 const uploadedLabel = computed(() => {
   try {
-    return new Date(props.image.uploadedAt).toLocaleString('zh-CN', { hour12: false })
+    return new Date(props.image.uploadedAt).toLocaleString(locale.value, { hour12: false })
   } catch {
     return props.image.uploadedAt
   }
@@ -51,14 +99,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)
 }
@@ -69,17 +121,18 @@ function toggleSelected(value: boolean | 'indeterminate') {
     <div class="relative aspect-square shrink-0 overflow-hidden bg-muted">
       <img
         v-if="!imageError"
-        :src="image.url"
+        :key="`${image.key}-${retryCount}`"
+        :src="previewSrc"
         :alt="image.originalName"
         loading="lazy"
         class="absolute inset-0 size-full object-cover object-center"
-        @error="imageError = true"
+        @error="onPreviewError"
       >
       <div
         v-else
         class="flex h-full items-center justify-center text-sm text-muted"
       >
-        预览失败
+        {{ t('image.previewFailed') }}
       </div>
       <div
         v-if="selectable"
@@ -96,18 +149,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 +169,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"
@@ -138,7 +234,7 @@ function toggleSelected(value: boolean | 'indeterminate') {
           :variant="copyFormat === item.value ? 'solid' : 'ghost'"
           :color="copyFormat === item.value ? 'primary' : 'neutral'"
           :label="item.label"
-          @click="() => { copyFormat = item.value }"
+          @click="selectCopyFormat(item.value)"
         />
       </div>
 
@@ -151,7 +247,7 @@ function toggleSelected(value: boolean | 'indeterminate') {
         />
         <CopyButton
           icon="i-lucide-copy"
-          label="复制"
+          :label="t('common.copy')"
           :value="previewValue"
           :success-title="copySuccessTitle"
         />

app/components/ImageGrid.vue

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

app/components/ImageUploader.vue

@@ -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() {
+function openSettings(event: Event) {
-  if (!props.disabled) hovering.value = true
+  event.stopPropagation()
-}
-
-function onMouseLeave() {
-  hovering.value = false
-}
-
-function openSettings() {
   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"
+    role="button"
-    :class="isActive
+    tabindex="0"
-      ? 'scale-[1.01] border-primary bg-primary/5 shadow-md shadow-primary/10'
+    class="upload-card-surface group/upload relative cursor-pointer overflow-hidden text-center outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
-      : 'hover:border-primary/50 hover:bg-primary/[0.04] hover:shadow-sm'"
+    :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"
+        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="上传设置"
+        :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="relative z-10 mx-auto flex max-w-lg flex-col items-center">
-      <div
+      <div class="flex flex-col items-center">
-        class="mx-auto flex size-16 items-center justify-center rounded-2xl bg-primary/10 transition-transform duration-300 ease-out"
+        <img
-        :class="isActive ? 'scale-110' : 'group-hover/upload:scale-105'"
+          :src="uploadCardHero"
-      >
+          alt=""
-        <UIcon
+          aria-hidden="true"
-          name="i-lucide-cloud-upload"
+          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="size-8 text-primary transition-transform duration-300"
+          :class="dragging ? 'scale-105' : 'group-hover/upload:scale-[1.02]'"
-          :class="isActive ? '-translate-y-0.5' : ''"
+          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 class="mt-4 max-w-md text-xs leading-relaxed text-dimmed sm:text-sm">
-          拖拽图片到此处上传
+        {{ t('upload.formats') }}
-        </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>
-      <UButton
-        label="选择图片"
-        icon="i-lucide-upload"
-        size="lg"
-        :disabled="disabled"
-        @click="openFilePicker"
-      />
     </div>
   </div>
 </template>

app/components/LocaleMenu.vue

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

app/components/MobileNavMenu.vue

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

app/components/MobileUserMenu.vue

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

app/components/PaginationBar.vue

@@ -11,14 +11,33 @@ const emit = defineEmits<{
   'update:page': [page: number]
 }>()
 
-const unitLabel = computed(() => props.unit ?? '条')
+const { t } = useI18n()
+
+const unitLabel = computed(() => props.unit ?? t('common.itemsUnit'))
+const jumpInput = ref('')
 
 function goTo(target: number) {
-  if (target < 1 || target > props.totalPages || target === props.page || props.loading) {
+  if (target < 1 || target > props.totalPages || props.loading) {
+    return
+  }
+  if (target === props.page) {
+    jumpInput.value = ''
     return
   }
   emit('update:page', target)
 }
+
+function submitJump() {
+  const raw = String(jumpInput.value ?? '').trim()
+  if (!raw) return
+  const parsed = Number.parseInt(raw, 10)
+  if (!Number.isFinite(parsed)) return
+  goTo(parsed)
+}
+
+watch(() => props.page, () => {
+  jumpInput.value = ''
+})
 </script>
 
 <template>
@@ -30,24 +49,24 @@ 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
       v-if="totalPages > 1"
-      class="flex items-center gap-1"
+      class="flex flex-wrap items-center justify-center gap-1"
     >
       <UButton
         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 +74,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 +82,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,10 +90,35 @@ 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)"
       />
+      <form
+        class="ml-1 flex items-center gap-1"
+        @submit.prevent="submitJump"
+      >
+        <UInput
+          v-model="jumpInput"
+          type="number"
+          :min="1"
+          :max="totalPages"
+          size="sm"
+          class="w-16"
+          :placeholder="t('pagination.pagePlaceholder')"
+          :disabled="loading"
+          :aria-label="t('pagination.pagePlaceholder')"
+          @keyup.enter="submitJump"
+        />
+        <UButton
+          type="button"
+          size="sm"
+          variant="outline"
+          :label="t('pagination.goTo')"
+          :disabled="loading || !String(jumpInput ?? '').trim()"
+          @click="submitJump"
+        />
+      </form>
     </div>
   </div>
 </template>

app/components/PasswordInput.vue

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

app/components/PasswordStrength.vue

@@ -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: 'minLength', label: t('password.ruleMinLength', { n: PASSWORD_MIN_LENGTH }) },
-  { key: 'mixedCase', label: '包含大小写字母' },
+  { key: 'mixedCase', label: t('password.ruleMixedCase') },
-  { key: 'hasNumber', label: '包含数字' },
+  { key: 'hasNumber', label: t('password.ruleNumber') },
-  { key: 'hasSpecial', label: '包含特殊字符' }
+  { 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>
 

app/components/SliderCaptcha.vue

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  verified: [payload: { id: string, positionPercent: number }]
+}>()
+
+const { t } = useI18n()
+
+const THUMB_SIZE = 40
+const TRACK_INSET = 4
+
+const trackRef = ref<HTMLElement | null>(null)
+const challengeId = ref('')
+const trackSvg = ref('')
+const sliderPercent = ref(0)
+const verified = ref(false)
+const loading = ref(false)
+const dragging = ref(false)
+const shake = ref(false)
+const confirming = ref(false)
+
+const trackWidth = ref(0)
+
+function updateTrackWidth() {
+  trackWidth.value = trackRef.value?.clientWidth ?? 0
+}
+
+function percentToPx(percent: number) {
+  const max = Math.max(trackWidth.value - THUMB_SIZE - TRACK_INSET * 2, 0)
+  return TRACK_INSET + (percent / 100) * max
+}
+
+const thumbLeft = computed(() => percentToPx(sliderPercent.value))
+const isActive = computed(() => dragging.value || sliderPercent.value > 0.5)
+const fillWidth = computed(() => `${Math.max(thumbLeft.value + THUMB_SIZE - TRACK_INSET, 0)}px`)
+const trackSvgUrl = computed(() =>
+  trackSvg.value
+    ? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(trackSvg.value)}`
+    : ''
+)
+const hintOpacity = computed(() => {
+  if (verified.value) return 0
+  if (!isActive.value) return 1
+  return Math.max(0, 1 - sliderPercent.value / 40)
+})
+const successLabelLeft = computed(() => `${thumbLeft.value + THUMB_SIZE + 8}px`)
+
+async function loadChallenge() {
+  loading.value = true
+  verified.value = false
+  dragging.value = false
+  shake.value = false
+  sliderPercent.value = 0
+  trackSvg.value = ''
+  try {
+    const data = await $fetch<{ id: string, svg: string }>('/api/auth/captcha')
+    challengeId.value = data.id
+    trackSvg.value = data.svg
+  } finally {
+    loading.value = false
+    await nextTick()
+    updateTrackWidth()
+  }
+}
+
+function setSliderFromClientX(clientX: number) {
+  if (!trackRef.value || verified.value || loading.value || confirming.value) return
+  const rect = trackRef.value.getBoundingClientRect()
+  const max = Math.max(rect.width - THUMB_SIZE - TRACK_INSET * 2, 1)
+  const x = Math.min(
+    Math.max(clientX - rect.left - THUMB_SIZE / 2 - TRACK_INSET, 0),
+    max
+  )
+  sliderPercent.value = (x / max) * 100
+}
+
+async function tryConfirm() {
+  if (verified.value || !challengeId.value || confirming.value) return
+
+  confirming.value = true
+  try {
+    const position = Math.round(sliderPercent.value)
+    await $fetch('/api/auth/captcha/confirm', {
+      method: 'POST',
+      body: {
+        id: challengeId.value,
+        captchaPosition: position
+      }
+    })
+    verified.value = true
+    emit('verified', {
+      id: challengeId.value,
+      positionPercent: position
+    })
+  } catch {
+    shake.value = true
+    sliderPercent.value = 0
+    window.setTimeout(() => {
+      shake.value = false
+    }, 450)
+  } finally {
+    confirming.value = false
+  }
+}
+
+function onThumbPointerDown(event: PointerEvent) {
+  if (verified.value || loading.value || confirming.value) return
+  dragging.value = true
+  updateTrackWidth()
+  ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+}
+
+function onThumbPointerMove(event: PointerEvent) {
+  if (!dragging.value) return
+  setSliderFromClientX(event.clientX)
+}
+
+function onThumbPointerUp() {
+  if (!dragging.value) return
+  dragging.value = false
+  if (!verified.value) {
+    void tryConfirm()
+  }
+}
+
+onMounted(() => {
+  void loadChallenge()
+})
+
+let resizeObserver: ResizeObserver | undefined
+
+watch(trackRef, (el, _, onCleanup) => {
+  resizeObserver?.disconnect()
+  resizeObserver = undefined
+  if (!el) return
+  updateTrackWidth()
+  if (typeof ResizeObserver === 'undefined') return
+  resizeObserver = new ResizeObserver(updateTrackWidth)
+  resizeObserver.observe(el)
+  onCleanup(() => {
+    resizeObserver?.disconnect()
+    resizeObserver = undefined
+  })
+})
+
+defineExpose({ reset: loadChallenge })
+</script>
+
+<template>
+  <div
+    ref="trackRef"
+    class="captcha-track relative h-12 select-none overflow-hidden rounded-lg border transition-[background-color,border-color] duration-300"
+    :class="[
+      verified
+        ? 'border-primary/35 bg-primary/10'
+        : 'border-default bg-muted/20',
+      loading ? 'opacity-70' : '',
+      shake ? 'captcha-shake' : ''
+    ]"
+  >
+    <div
+      v-if="loading"
+      class="absolute inset-0 flex items-center justify-center"
+    >
+      <UIcon
+        name="i-lucide-loader-2"
+        class="size-5 animate-spin text-muted"
+      />
+    </div>
+
+    <template v-else>
+      <img
+        v-if="trackSvgUrl"
+        :src="trackSvgUrl"
+        alt=""
+        aria-hidden="true"
+        class="pointer-events-none absolute inset-0 size-full object-fill transition-opacity duration-300"
+        :class="verified ? 'opacity-0' : 'opacity-100'"
+        draggable="false"
+      >
+
+      <div
+        v-if="isActive && !verified"
+        class="pointer-events-none absolute inset-y-1 left-1 rounded-md bg-primary/20 transition-[width] duration-75"
+        :style="{ width: fillWidth }"
+      />
+
+      <p
+        v-if="!verified"
+        class="pointer-events-none absolute inset-0 flex items-center justify-center pl-12 text-sm text-muted transition-opacity duration-150"
+        :style="{ opacity: hintOpacity }"
+      >
+        {{ t('auth.captchaHint') }}
+      </p>
+
+      <p
+        v-if="verified"
+        class="pointer-events-none absolute inset-y-0 flex items-center pr-3 text-sm font-medium text-primary"
+        :style="{ left: successLabelLeft }"
+      >
+        {{ t('auth.captchaSuccess') }}
+      </p>
+
+      <div
+        class="absolute top-1/2 -translate-y-1/2 touch-none rounded-md border transition-[left,background-color,border-color,color,box-shadow,transform] duration-150"
+        :class="[
+          verified
+            ? 'z-20 border-primary bg-primary text-white shadow-sm shadow-primary/25'
+            : isActive
+              ? 'z-10 border-primary/45 bg-elevated text-primary shadow-md'
+              : 'z-10 border-default/90 bg-elevated text-muted shadow-sm',
+          dragging ? 'scale-[1.02] cursor-grabbing' : verified ? 'cursor-default' : 'cursor-grab'
+        ]"
+        :style="{
+          left: `${thumbLeft}px`,
+          width: `${THUMB_SIZE}px`,
+          height: `${THUMB_SIZE}px`
+        }"
+        @pointerdown="onThumbPointerDown"
+        @pointermove="onThumbPointerMove"
+        @pointerup="onThumbPointerUp"
+        @pointercancel="onThumbPointerUp"
+      >
+        <div class="flex size-full items-center justify-center">
+          <UIcon
+            v-if="confirming"
+            name="i-lucide-loader-2"
+            class="size-4 animate-spin"
+            :class="verified ? 'text-white' : isActive ? 'text-primary' : 'text-muted'"
+          />
+          <UIcon
+            v-else
+            :name="verified ? 'i-lucide-check' : 'i-lucide-chevrons-right'"
+            class="size-4"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.captcha-shake {
+  animation: captcha-shake 0.4s ease;
+}
+
+@keyframes captcha-shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  25%,
+  75% {
+    transform: translateX(-4px);
+  }
+
+  50% {
+    transform: translateX(4px);
+  }
+}
+</style>

app/components/StatsDonut.vue

@@ -1,111 +0,0 @@
-<script setup lang="ts">
-export interface DonutSegment {
-  label: string
-  value: number
-  color: string
-}
-
-const props = defineProps<{
-  segments: DonutSegment[]
-  size?: number
-}>()
-
-const total = computed(() =>
-  props.segments.reduce((sum, item) => sum + item.value, 0)
-)
-
-const gradient = computed(() => {
-  if (!total.value) {
-    return 'conic-gradient(var(--ui-bg-muted) 0% 100%)'
-  }
-
-  let offset = 0
-  const stops = props.segments
-    .filter(item => item.value > 0)
-    .map((item) => {
-      const start = offset
-      const percent = (item.value / total.value) * 100
-      offset += percent
-      return `${item.color} ${start}% ${offset}%`
-    })
-
-  if (!stops.length) {
-    return 'conic-gradient(var(--ui-bg-muted) 0% 100%)'
-  }
-
-  return `conic-gradient(${stops.join(', ')})`
-})
-
-function percent(value: number) {
-  if (!total.value) return 0
-  return Math.round((value / total.value) * 100)
-}
-
-function formatCount(value: number) {
-  if (value >= 100000000) {
-    return `${(value / 100000000).toFixed(value >= 1000000000 ? 0 : 1)}亿`
-  }
-  if (value >= 10000) {
-    return `${(value / 10000).toFixed(value >= 100000 ? 0 : 1)}万`
-  }
-  return String(value)
-}
-
-const centerText = computed(() => formatCount(total.value))
-
-const centerTextClass = computed(() => {
-  const raw = String(total.value)
-  if (raw.length >= 7) return 'text-[9px] font-semibold leading-none'
-  if (raw.length >= 5) return 'text-xs font-semibold leading-none'
-  if (raw.length >= 4) return 'text-sm font-semibold leading-none'
-  return 'text-lg font-semibold leading-none'
-})
-</script>
-
-<template>
-  <div class="flex items-center gap-4">
-    <div
-      class="relative shrink-0 rounded-full"
-      :style="{
-        width: `${size ?? 88}px`,
-        height: `${size ?? 88}px`,
-        background: gradient
-      }"
-    >
-      <div
-        class="absolute inset-[20%] flex flex-col items-center justify-center rounded-full bg-elevated px-1 text-center"
-      >
-        <p
-          class="max-w-full truncate tabular-nums"
-          :class="centerTextClass"
-          :title="String(total)"
-        >
-          {{ centerText }}
-        </p>
-        <p class="mt-0.5 text-[10px] text-muted">
-          次
-        </p>
-      </div>
-    </div>
-
-    <ul class="min-w-0 flex-1 space-y-1.5">
-      <li
-        v-for="item in segments"
-        :key="item.label"
-        class="flex items-center gap-2 text-xs"
-      >
-        <span
-          class="size-2 shrink-0 rounded-full"
-          :style="{ background: item.color }"
-        />
-        <span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
-        <span
-          class="shrink-0 tabular-nums text-muted"
-          :title="`${item.value}`"
-        >
-          {{ formatCount(item.value) }} ({{ percent(item.value) }}%)
-        </span>
-      </li>
-    </ul>
-  </div>
-</template>

app/components/ThemeMenu.vue

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

app/components/UploadPreferencesPanel.vue

@@ -20,6 +20,8 @@ const {
   loadPreferences
 } = useUploadPreferences()
 
+const { t } = useI18n()
+
 const {
   userSettings,
   enabled: userAutoDeleteEnabled,
@@ -27,16 +29,16 @@ const {
   load: loadUserSettings
 } = useUserAutoDeleteSettings()
 
-const copyFormatItems = [
+const copyFormatItems = computed(() => [
-  { label: '直链', value: 'url' as const },
+  { label: t('copy.url'), value: 'url' as const },
-  { label: 'Markdown', value: 'markdown' as const },
+  { label: t('copy.markdown'), value: 'markdown' as const },
-  { label: 'HTML', value: 'html' as const }
+  { label: t('copy.html'), value: 'html' as const }
-]
+])
 
 const clientQualityLevel = computed(() => {
-  if (clientWebpQuality.value >= 85) return '高质量'
+  if (clientWebpQuality.value >= 85) return t('preferences.qualityHigh')
-  if (clientWebpQuality.value >= 60) return '中等质量'
+  if (clientWebpQuality.value >= 60) return t('preferences.qualityMedium')
-  return '有损压缩'
+  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>

app/components/UploadResult.vue

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

app/components/storage/StorageBackendCard.vue

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

app/components/storage/StorageBackendForm.vue

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

app/components/storage/StorageUsageBar.vue

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

app/composables/useAppearanceMenus.ts

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

app/composables/useAuth.ts

@@ -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
 }
@@ -64,12 +66,20 @@ export function getFetchErrorMessage(error: unknown, fallback: string): string {
 
 export type AuthActionResult = { ok: true } | { ok: false, error: string }
 
+export interface LoginCaptchaPayload {
+  captchaId: string
+  captchaPosition: number
+}
+
 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 +91,14 @@ export function useAuth() {
     return data
   }
 
-  async function checkSession() {
+  async function checkSession(options?: { force?: boolean }) {
-    status.value = 'checking'
+    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 +108,7 @@ export function useAuth() {
       status.value = 'unauthenticated'
       return false
     } catch {
+      hasValidatedOnce.value = true
       user.value = null
       status.value = 'unauthenticated'
       return false
@@ -107,7 +122,8 @@ export function useAuth() {
 
   async function login(
     credentials: { username: string, password: string }
-      | { secret: string }
+      | { secret: string },
+    captcha: LoginCaptchaPayload
   ): Promise<{ ok: boolean, needsMigration?: boolean, error?: string }> {
     try {
       const result = await $fetch<{
@@ -117,7 +133,11 @@ export function useAuth() {
       }>('/api/auth/login', {
         method: 'POST',
         credentials: 'include',
-        body: credentials
+        body: {
+          ...credentials,
+          captchaId: captcha.captchaId,
+          captchaPosition: captcha.captchaPosition
+        }
       })
       if (result.needsMigration) {
         return { ok: true, needsMigration: true }
@@ -126,12 +146,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 +163,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 +177,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'))
       }
     }
   }
@@ -170,10 +192,13 @@ export function useAuth() {
     username: string
     password: string
     allowRegistration: boolean
+    domainSeparation?: boolean
+    siteBaseUrl?: string
+    imageBaseUrl?: string
   }): Promise<AuthActionResult> {
     const validationError = validateAuthInput(input.username, input.password)
     if (validationError) {
-      return { ok: false, error: validationError }
+      return { ok: false, error: t(`auth.errors.${validationError}`) }
     }
 
     try {
@@ -185,18 +210,22 @@ export function useAuth() {
           body: {
             username: input.username.trim(),
             password: input.password,
-            allowRegistration: input.allowRegistration
+            allowRegistration: input.allowRegistration,
+            domainSeparation: input.domainSeparation,
+            siteBaseUrl: input.siteBaseUrl,
+            imageBaseUrl: input.imageBaseUrl
           }
         }
       )
       user.value = result.user
       status.value = 'authenticated'
+      hasValidatedOnce.value = true
       await fetchStatus()
       return { ok: true }
     } catch (error: unknown) {
       return {
         ok: false,
-        error: getFetchErrorMessage(error, '初始化失败，请检查输入')
+        error: getFetchErrorMessage(error, t('auth.setupFailed'))
       }
     }
   }
@@ -208,7 +237,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 +255,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 +271,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 +284,7 @@ export function useAuth() {
     } catch (error: unknown) {
       return {
         ok: false,
-        error: getFetchErrorMessage(error, '修改密码失败')
+        error: getFetchErrorMessage(error, t('password.changeFailed'))
       }
     }
   }
@@ -268,6 +298,7 @@ export function useAuth() {
       status.value = 'unauthenticated'
       user.value = null
       authStatus.value = null
+      hasValidatedOnce.value = true
     }
   }
 

app/composables/useFileSize.ts

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

app/composables/useImageList.ts

@@ -6,27 +6,49 @@ import type {
 const PAGE_SIZE = 12
 
 export function useImageList() {
+  const { t } = useI18n()
   const items = ref<ImageItem[]>([])
   const page = ref(1)
   const totalPages = ref(1)
   const total = ref(0)
   const loading = ref(false)
-  const folderTotal = ref<number | null>(null)
+  const totalCount = ref<number | null>(null)
   const loadingTotal = ref(false)
   const searchQuery = ref('')
   const activeSearch = ref('')
-  const activeFolder = ref('all')
+  const activeStorageBackend = ref('all')
+  const storageBackendOptions = ref<Array<{ id: string, name: string }>>([])
 
-  function folderQueryParams(): Record<string, string> {
+  function storageQueryParams(): Record<string, string> {
-    const folder = activeFolder.value.trim()
+    const backendId = activeStorageBackend.value.trim()
-    if (!folder || folder === 'all') return {}
+    if (!backendId || backendId === 'all') return {}
-    return { folder }
+    return { backendId }
   }
 
-  function matchesActiveFolder(key: string) {
+  function listQueryParams(): Record<string, string> {
-    const folder = activeFolder.value.trim()
+    return storageQueryParams()
-    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() {
@@ -34,11 +56,11 @@ export function useImageList() {
     try {
       const data = await $fetch<{ total: number }>('/api/images/count', {
         credentials: 'include',
-        query: folderQueryParams()
+        query: listQueryParams()
       })
-      folderTotal.value = data.total
+      totalCount.value = data.total
     } catch {
-      folderTotal.value = null
+      totalCount.value = null
     } finally {
       loadingTotal.value = false
     }
@@ -52,7 +74,7 @@ export function useImageList() {
         query: {
           limit: PAGE_SIZE,
           page: targetPage,
-          ...folderQueryParams()
+          ...listQueryParams()
         }
       })
 
@@ -80,7 +102,7 @@ export function useImageList() {
           q,
           limit: PAGE_SIZE,
           page: targetPage,
-          ...folderQueryParams()
+          ...listQueryParams()
         }
       })
 
@@ -100,19 +122,17 @@ export function useImageList() {
     await Promise.all([fetchList(1), fetchTotal()])
   }
 
-  async function initializeList(folder = 'all') {
+  async function initializeList() {
-    const next = folder.trim() || 'all'
-    activeFolder.value = next
     page.value = 1
     activeSearch.value = ''
     searchQuery.value = ''
-    await Promise.all([fetchList(1), fetchTotal()])
+    await Promise.all([fetchList(1), fetchTotal(), loadStorageBackendOptions()])
   }
 
-  async function setActiveFolder(folder: string) {
+  async function setActiveStorageBackend(backendId: string) {
-    const next = folder.trim() || 'all'
+    const next = backendId.trim() || 'all'
-    if (next === activeFolder.value) return
+    if (next === activeStorageBackend.value) return
-    activeFolder.value = next
+    activeStorageBackend.value = next
     page.value = 1
     if (activeSearch.value) {
       await Promise.all([fetchSearch(1), fetchTotal()])
@@ -142,12 +162,12 @@ export function useImageList() {
   }
 
   function prependItems(newItems: ImageItem[]) {
-    const matched = newItems.filter(item => matchesActiveFolder(item.key))
+    const matched = newItems.filter(item => matchesActiveStorage(item))
     if (!matched.length || page.value !== 1) return
     items.value = [...matched, ...items.value]
     total.value += matched.length
-    if (folderTotal.value !== null) {
+    if (totalCount.value !== null) {
-      folderTotal.value += matched.length
+      totalCount.value += matched.length
     }
   }
 
@@ -158,24 +178,43 @@ export function useImageList() {
     if (removed > 0) {
       total.value = Math.max(0, total.value - removed)
     }
-    if (folderTotal.value !== null && removed > 0) {
+    if (totalCount.value !== null && removed > 0) {
-      folderTotal.value = Math.max(0, folderTotal.value - removed)
+      totalCount.value = Math.max(0, totalCount.value - removed)
     }
   }
 
+  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 storageLabel = activeStorageLabel.value
-    const folderLabel = folder === 'all' ? '全部' : folder
+    if (loadingTotal.value && totalCount.value === null) {
-    if (loadingTotal.value && folderTotal.value === null) {
+      return storageLabel
-      return `${folderLabel} · 统计中…`
+        ? `${storageLabel} · ${t('stats.counting')}`
+        : t('stats.counting')
     }
     if (activeSearch.value) {
-      return `${folderLabel} · 搜索「${activeSearch.value}」· 共 ${total.value} 张`
+      if (storageLabel) {
+        return t('stats.summarySearchStorage', {
+          q: activeSearch.value,
+          total: total.value,
+          storage: storageLabel
+        })
+      }
+      return t('stats.summarySearch', { q: activeSearch.value, total: total.value })
     }
-    if (folderTotal.value === null) {
+    const count = totalCount.value === null ? total.value : totalCount.value
-      return `${folderLabel} · 共 ${total.value} 张`
+    if (storageLabel) {
+      return t('stats.summaryTotalStorage', {
+        total: count,
+        storage: storageLabel
+      })
     }
-    return `${folderLabel} · 共 ${folderTotal.value} 张`
+    return t('stats.summaryTotal', { total: count })
   })
 
   return {
@@ -184,15 +223,18 @@ export function useImageList() {
     totalPages,
     total,
     loading,
-    activeFolder,
+    activeStorageBackend,
+    storageBackendOptions,
     searchQuery,
     activeSearch,
     listSummary,
     fetchList,
+    fetchSearch,
     fetchTotal,
     refreshList,
     initializeList,
-    setActiveFolder,
+    setActiveStorageBackend,
+    loadStorageBackendOptions,
     submitSearch,
     goToPage,
     prependItems,

app/composables/useImageUpload.ts

@@ -9,6 +9,7 @@ const MAX_FILES = 10
 
 export function useImageUpload() {
   const toast = useToast()
+  const { t } = useI18n()
   const { compressEnabled, clientWebpQuality } = useUploadPreferences()
   const uploading = ref(false)
   const progressItems = ref<UploadProgressItem[]>([])
@@ -16,19 +17,18 @@ export function useImageUpload() {
 
   async function uploadFiles(
     files: File[],
-    folder = 'images',
+    options?: { notify?: boolean }
-    options?: { notify?: boolean, includeFolder?: boolean }
   ) {
     if (uploading.value) return
 
     if (!files.length) {
-      toast.add({ title: '请选择图片', color: 'warning' })
+      toast.add({ title: t('upload.selectImages'), color: 'warning' })
       return
     }
 
     if (files.length > MAX_FILES) {
       toast.add({
-        title: `每次最多上传 ${MAX_FILES} 张图片`,
+        title: t('upload.maxFiles', { n: MAX_FILES }),
         color: 'warning'
       })
       return
@@ -54,9 +54,6 @@ export function useImageUpload() {
       }))
 
       const formData = new FormData()
-      if (options?.includeFolder !== false) {
-        formData.append('folder', folder.trim() || 'images')
-      }
       for (const file of prepared) {
         formData.append('files', file, file.name)
       }
@@ -80,14 +77,14 @@ export function useImageUpload() {
 
       if (response.items.length && options?.notify !== false) {
         toast.add({
-          title: `成功上传 ${response.items.length} 张图片`,
+          title: t('upload.uploadSuccess', { n: response.items.length }),
           color: 'success'
         })
       }
 
       if (response.errors.length) {
         toast.add({
-          title: `${response.errors.length} 张图片上传失败`,
+          title: t('upload.uploadPartialFail', { n: response.errors.length }),
           color: 'warning'
         })
       }
@@ -97,7 +94,7 @@ export function useImageUpload() {
       if (isUnauthorizedError(error)) {
         throw error
       }
-      const message = error instanceof Error ? error.message : '上传失败'
+      const message = error instanceof Error ? error.message : t('upload.uploadFailed')
       progressItems.value = progressItems.value.map(item => ({
         ...item,
         status: 'error',

app/composables/useUploadPreferences.ts

@@ -3,7 +3,6 @@ const STORAGE_KEY = 'pichost.upload-preferences'
 export type CopyFormat = 'url' | 'markdown' | 'html'
 
 export interface UploadPreferences {
-  defaultFolder: string
   compressEnabled: boolean
   autoCopyMarkdown: boolean
   copyFormat: CopyFormat
@@ -11,7 +10,6 @@ export interface UploadPreferences {
 }
 
 const DEFAULTS: UploadPreferences = {
-  defaultFolder: 'images',
   compressEnabled: false,
   autoCopyMarkdown: false,
   copyFormat: 'markdown',
@@ -36,9 +34,6 @@ function readStored(): UploadPreferences {
     if (!raw) return { ...DEFAULTS }
     const parsed = JSON.parse(raw) as Partial<UploadPreferences>
     return {
-      defaultFolder: typeof parsed.defaultFolder === 'string' && parsed.defaultFolder.trim()
-        ? parsed.defaultFolder.trim()
-        : DEFAULTS.defaultFolder,
       compressEnabled: parsed.compressEnabled === true,
       autoCopyMarkdown: parsed.autoCopyMarkdown === true,
       copyFormat: isCopyFormat(parsed.copyFormat) ? parsed.copyFormat : DEFAULTS.copyFormat,
@@ -55,7 +50,6 @@ function writeStored(prefs: UploadPreferences) {
 }
 
 export function useUploadPreferences() {
-  const defaultFolder = useState('upload-pref-folder', () => DEFAULTS.defaultFolder)
   const compressEnabled = useState('upload-pref-compress', () => DEFAULTS.compressEnabled)
   const autoCopyMarkdown = useState('upload-pref-auto-md', () => DEFAULTS.autoCopyMarkdown)
   const copyFormat = useState<CopyFormat>('upload-pref-copy-format', () => DEFAULTS.copyFormat)
@@ -64,7 +58,6 @@ export function useUploadPreferences() {
 
   function loadPreferences() {
     const stored = readStored()
-    defaultFolder.value = stored.defaultFolder
     compressEnabled.value = stored.compressEnabled
     autoCopyMarkdown.value = stored.autoCopyMarkdown
     copyFormat.value = stored.copyFormat
@@ -72,9 +65,12 @@ export function useUploadPreferences() {
     loaded.value = true
   }
 
+  if (import.meta.client && !loaded.value) {
+    loadPreferences()
+  }
+
   function savePreferences() {
     writeStored({
-      defaultFolder: defaultFolder.value.trim() || DEFAULTS.defaultFolder,
       compressEnabled: compressEnabled.value,
       autoCopyMarkdown: autoCopyMarkdown.value,
       copyFormat: copyFormat.value,
@@ -82,14 +78,13 @@ export function useUploadPreferences() {
     })
   }
 
-  watch([defaultFolder, compressEnabled, autoCopyMarkdown, copyFormat, clientWebpQuality], () => {
+  watch([compressEnabled, autoCopyMarkdown, copyFormat, clientWebpQuality], () => {
     if (loaded.value) {
       savePreferences()
     }
   })
 
   return {
-    defaultFolder,
     compressEnabled,
     autoCopyMarkdown,
     copyFormat,

app/composables/useUserAutoDeleteSettings.ts

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

app/pages/account/password.vue

@@ -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="t('password.newPlaceholder')"
-              placeholder="设置新密码"
               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="/"

app/pages/api.vue

@@ -6,6 +6,7 @@ interface SettingsResponse {
   env: {
     webpQuality: number
     refererConfigured: boolean
+    siteBaseUrl: string
     imageBaseUrl: string
     appVersion: string
   }
@@ -22,6 +23,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)
@@ -31,6 +33,8 @@ const regenerateResultOpen = ref(false)
 const newToken = ref('')
 
 const baseUrl = computed(() => {
+  const configured = settings.value?.env.siteBaseUrl
+  if (configured) return configured
   if (import.meta.client) {
     return window.location.origin
   }
@@ -48,34 +52,13 @@ const authHeader = computed(() =>
 const authHeaderFlag = computed(() => `-H 'Auth-Token: ${authHeader.value}'`)
 
 const apiDocs = computed<ApiDocItem[]>(() => {
-  const uploadDescription = isAdmin.value
+  const uploadDescription = t('api.docs.upload.desc')
-    ? '上传单张或多张图片。字段 image 传图片，folder 指定目录（不存在则自动创建）；仍兼容 file、files、type。'
+  const uploadCurl = `curl -X POST "${baseUrl.value}/api/images/upload" \\
-    : '上传单张或多张图片。字段 image 传图片；仍兼容 file、files。图片固定存入 images/ 目录。'
-  const uploadCurl = isAdmin.value
-    ? `curl -X POST "${baseUrl.value}/api/images/upload" \\
-  ${authHeaderFlag.value} \\
-  -F "image=@./demo.png"
-
-# 上传到自定义目录 blog/
-curl -X POST "${baseUrl.value}/api/images/upload" \\
-  ${authHeaderFlag.value} \\
-  -F "folder=blog" \\
-  -F "image=@./demo.png"`
-    : `curl -X POST "${baseUrl.value}/api/images/upload" \\
   ${authHeaderFlag.value} \\
   -F "image=@./demo.png"`
 
-  const listDescription = isAdmin.value
+  const listDescription = t('api.docs.list.desc')
-    ? '分页列出图库，folder 可筛选目录，limit 默认 20、最大 100。'
+  const listCurl = `curl "${baseUrl.value}/api/images?limit=20&page=1" \\
-    : '分页列出您的图库，limit 默认 20、最大 100。'
-  const listCurl = isAdmin.value
-    ? `curl "${baseUrl.value}/api/images?limit=20&page=1" \\
-  ${authHeaderFlag.value}
-
-# 按目录筛选
-curl "${baseUrl.value}/api/images?folder=blog&limit=20&page=1" \\
-  ${authHeaderFlag.value}`
-    : `curl "${baseUrl.value}/api/images?limit=20&page=1" \\
   ${authHeaderFlag.value}`
 
   return [
@@ -83,7 +66,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 +74,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 +82,8 @@ curl "${baseUrl.value}/api/images?folder=blog&limit=20&page=1" \\
       index: 3,
       method: 'GET',
       path: '/api/images/search',
-      title: '搜索图片',
+      title: t('api.docs.search.title'),
-      description: '按文件名或路径关键词搜索，参数 q 必填。',
+      description: t('api.docs.search.desc'),
       curl: `curl "${baseUrl.value}/api/images/search?q=demo&limit=20&page=1" \\
   ${authHeaderFlag.value}`
     },
@@ -108,8 +91,8 @@ curl "${baseUrl.value}/api/images?folder=blog&limit=20&page=1" \\
       index: 4,
       method: 'DELETE',
       path: '/api/images',
-      title: '删除图片',
+      title: t('api.docs.delete.title'),
-      description: '通过 key 删除单张图片，key 为存储路径（如 images/2026/08/xxx.webp）。',
+      description: t('api.docs.delete.desc'),
       curl: `curl -X DELETE "${baseUrl.value}/api/images?key=images/2026/08/xxxx.webp" \\
   ${authHeaderFlag.value}`
     },
@@ -117,8 +100,8 @@ curl "${baseUrl.value}/api/images?folder=blog&limit=20&page=1" \\
       index: 5,
       method: 'POST',
       path: '/api/images/batch-delete',
-      title: '批量删除',
+      title: t('api.docs.batchDelete.title'),
-      description: '一次删除多张图片，请求体为 keys 数组。',
+      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 +113,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 兼容上传',
+  title: t('api.docs.twikoo.title'),
-  description: '兼容 Twikoo / EasyImage 2.0 协议，图片存入 twikoo/ 目录；字段 image + token。',
+  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 +123,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')
   }
 }
 
@@ -152,10 +135,12 @@ function methodBadgeColor(method: ApiDocItem['method']) {
   switch (method) {
     case 'GET':
       return 'info' as const
+    case 'POST':
+      return 'warning' as const
     case 'DELETE':
       return 'error' as const
     default:
-      return 'primary' as const
+      return 'neutral' as const
   }
 }
 
@@ -169,7 +154,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 +188,11 @@ async function confirmRegenerate() {
         : 0
       if (status === 409) {
         toast.add({
-          title: '环境变量已配置 Token，无法在后台重新生成',
+          title: t('api.regenerateEnvBlocked'),
           color: 'warning'
         })
       } else {
-        toast.add({ title: '重新生成 Token 失败', color: 'error' })
+        toast.add({ title: t('api.regenerateFailed'), color: 'error' })
       }
     }
   } finally {
@@ -215,15 +200,6 @@ async function confirmRegenerate() {
   }
 }
 
-async function copyCurl(text: string) {
-  try {
-    await navigator.clipboard.writeText(text)
-    toast.add({ title: '已复制 cURL 示例', color: 'success' })
-  } catch {
-    toast.add({ title: '复制失败', color: 'error' })
-  }
-}
-
 function closeConfirmRegenerate() {
   confirmRegenerateOpen.value = false
 }
@@ -239,10 +215,13 @@ onMounted(async () => {
     return
   }
   await checkSession()
+  if (isAuthenticated.value) {
+    await loadSettings()
+  }
 })
 
-watch(isAuthenticated, async (authed) => {
+watch(isAuthenticated, async (authed, prev) => {
-  if (authed) {
+  if (authed && prev === false) {
     await nextTick()
     await loadSettings()
   } else {
@@ -263,7 +242,7 @@ watch(isAuthenticated, async (authed) => {
           class="size-8 animate-spin"
         />
         <p class="text-sm">
-          正在验证登录状态…
+          {{ t('common.loadingSession') }}
         </p>
       </div>
     </div>
@@ -278,7 +257,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 +267,8 @@ watch(isAuthenticated, async (authed) => {
             color="warning"
             variant="subtle"
             icon="i-lucide-triangle-alert"
-            title="Token 由环境变量覆盖"
+            :title="t('api.envOverrideTitle')"
-            description="修改 API_UPLOAD_TOKEN 后需重启服务；后台无法重新生成。"
+            :description="t('api.envOverrideDesc')"
           />
 
           <UAlert
@@ -297,8 +276,8 @@ watch(isAuthenticated, async (authed) => {
             color="info"
             variant="subtle"
             icon="i-lucide-info"
-            title="个人 API Token"
+            :title="t('api.personalTitle')"
-            description="此 Token 仅用于您自己的脚本上传，上传的图片归属您的账号。"
+            :description="t('api.personalDesc')"
           />
 
           <UAlert
@@ -306,25 +285,25 @@ watch(isAuthenticated, async (authed) => {
             color="info"
             variant="subtle"
             icon="i-lucide-info"
-            title="尚未配置 Token"
+            :title="t('api.notConfiguredTitle')"
-            description="点击「重新生成」创建 Token，用于下方所有接口的 Auth-Token 鉴权。"
+            :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 +318,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 +334,7 @@ watch(isAuthenticated, async (authed) => {
             class="size-5 text-primary"
           />
           <h2 class="text-base font-semibold">
-            API 文档
+            {{ t('api.docsTitle') }}
           </h2>
         </div>
 
@@ -395,20 +374,9 @@ 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">
+              <ApiCurlBlock :code="doc.curl" />
-                <UButton
-                  icon="i-lucide-copy"
-                  label="复制"
-                  size="xs"
-                  variant="ghost"
-                  color="neutral"
-                  class="absolute top-2 right-2 z-10 text-neutral-300 hover:text-white"
-                  @click="copyCurl(doc.curl)"
-                />
-                <pre class="max-h-80 overflow-auto p-4 pt-10 text-xs leading-relaxed text-neutral-100"><code class="font-mono">{{ doc.curl }}</code></pre>
-              </div>
             </div>
           </article>
         </div>
@@ -424,7 +392,7 @@ watch(isAuthenticated, async (authed) => {
             <div class="min-w-0 space-y-2">
               <div class="flex flex-wrap items-center gap-2">
                 <UBadge
-                  color="neutral"
+                  :color="methodBadgeColor(twikooDoc.method)"
                   variant="subtle"
                   size="sm"
                 >
@@ -445,20 +413,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">
+            <ApiCurlBlock
-              <UButton
+              :code="twikooDoc.curl"
-                icon="i-lucide-copy"
+              :scrollable="false"
-                label="复制"
+            />
-                size="xs"
-                variant="ghost"
-                color="neutral"
-                class="absolute top-2 right-2 z-10 text-neutral-300 hover:text-white"
-                @click="copyCurl(twikooDoc.curl)"
-              />
-              <pre class="overflow-auto p-4 pt-10 text-xs leading-relaxed text-neutral-100"><code class="font-mono">{{ twikooDoc.curl }}</code></pre>
-            </div>
           </div>
         </div>
       </section>
@@ -466,20 +426,20 @@ watch(isAuthenticated, async (authed) => {
 
     <UModal
       :open="confirmRegenerateOpen"
-      title="确认重新生成 Token？"
+      :title="t('api.confirmRegenerateTitle')"
-      description="旧 Token 将立即失效，使用旧 Token 的脚本与自动化任务将无法继续调用接口，直到你更新为新 Token。"
+      :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 +450,8 @@ watch(isAuthenticated, async (authed) => {
 
     <UModal
       :open="regenerateResultOpen"
-      title="新 Token 已生成"
+      :title="t('api.newTokenTitle')"
-      description="请立即复制保存。关闭弹窗后仍可在上方输入框复制，但请尽快更新到你的脚本配置中。"
+      :description="t('api.newTokenDesc')"
       @update:open="regenerateResultOpen = $event"
     >
       <template #body>
@@ -504,11 +464,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>

app/pages/index.vue

@@ -4,16 +4,14 @@ import type { ImageItem } from '~/types/image'
 const { uploading, progressItems, uploadFiles } = useImageUpload()
 
 const {
-  defaultFolder,
   autoCopyMarkdown,
   copyFormat,
   loadPreferences
 } = useUploadPreferences()
 
-const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin }
+const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus } = useAuth()
-  = useAuth()
 const toast = useToast()
-const folderOptions = ref<string[]>(['images'])
+const { t } = useI18n()
 const sessionItems = ref<ImageItem[]>([])
 const deletingKeys = ref<Set<string>>(new Set())
 const emptySelection = ref(new Set<string>())
@@ -29,22 +27,9 @@ const showProgress = computed(
     )
 )
 
-async function loadFolders() {
-  const data = await $fetch<{ folders: string[] }>('/api/folders', {
-    credentials: 'include'
-  })
-  folderOptions.value = [...data.folders]
-  if (!folderOptions.value.includes(defaultFolder.value)) {
-    defaultFolder.value = folderOptions.value[0] ?? 'images'
-  }
-}
-
 async function loadPage() {
   try {
     loadPreferences()
-    if (isAdmin.value) {
-      await loadFolders()
-    }
   } catch (error: unknown) {
     handleAuthError(error)
   }
@@ -76,11 +61,11 @@ watch(isAuthenticated, async (authed, prev) => {
 function copyFormatLabel() {
   switch (copyFormat.value) {
     case 'url':
-      return '直链'
+      return t('copy.url')
     case 'html':
-      return 'HTML'
+      return t('copy.html')
     default:
-      return 'Markdown'
+      return t('copy.markdown')
   }
 }
 
@@ -98,33 +83,22 @@ async function copyUploadLink(text: string) {
       document.execCommand('copy')
       document.body.removeChild(textarea)
     }
-    toast.add({ title: `已复制 ${copyFormatLabel()}`, color: 'success' })
+    toast.add({ title: t('copy.copiedFormat', { format: copyFormatLabel() }), color: 'success' })
   } catch {
-    toast.add({ title: '复制失败', color: 'error' })
+    toast.add({ title: t('copy.failed'), color: 'error' })
   }
 }
 
 async function handleUpload(files: File[]) {
   if (!isAuthenticated.value) {
-    toast.add({ title: '请先登录', color: 'warning' })
+    toast.add({ title: t('upload.loginRequired'), color: 'warning' })
     return
   }
 
   try {
-    const uploadTarget = isAdmin.value
+    const result = await uploadFiles(files)
-      ? (defaultFolder.value.trim() || 'images')
-      : 'images'
-    const result = await uploadFiles(files, uploadTarget, {
-      includeFolder: isAdmin.value
-    })
     if (result?.items.length) {
       sessionItems.value = [...result.items, ...sessionItems.value]
-      if (isAdmin.value) {
-        const folder = uploadTarget
-        if (!folderOptions.value.includes(folder)) {
-          folderOptions.value = [...folderOptions.value, folder]
-        }
-      }
       if (autoCopyMarkdown.value && result.items[0]) {
         const first = result.items[0]
         const text
@@ -149,10 +123,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 +146,7 @@ async function handleDelete(key: string) {
           class="size-8 animate-spin"
         />
         <p class="text-sm">
-          正在验证登录状态…
+          {{ t('common.loadingSession') }}
         </p>
       </div>
     </div>
@@ -196,7 +170,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 +181,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"
         />

app/pages/logs.vue

@@ -0,0 +1,618 @@
+<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 imageLinkBase = ref('')
+const hideFolderInUrl = ref(false)
+
+const pageSize = 10
+
+const summaryLabel = computed(() => {
+  const summary = listData.value?.summary
+  if (!summary) return ''
+  return t('logs.summaryAll', {
+    total: summary.total,
+    upload: summary.upload,
+    delete: summary.delete
+  })
+})
+
+const actionItems = computed(() => [
+  { label: t('logs.filterActionAll'), value: 'all' as const },
+  { label: t('logs.actionUpload'), value: 'upload' as const },
+  { label: t('logs.actionDelete'), value: 'delete' as const }
+])
+
+const sourceItems = computed(() => [
+  { label: t('logs.filterSourceAll'), value: 'all' as const },
+  { label: t('logs.sourceWeb'), value: 'web' as const },
+  { label: t('logs.sourceApi'), value: 'api' as const }
+])
+
+const userItems = computed(() => {
+  const items: Array<{ label: string, value: 'all' | number }> = [
+    { label: t('logs.filterUserAll'), value: 'all' }
+  ]
+  for (const user of listData.value?.users ?? []) {
+    items.push({ label: user.username, value: user.id })
+  }
+  return items
+})
+
+function formatTime(value: string) {
+  try {
+    return new Date(value).toLocaleString(locale.value, { hour12: false })
+  } catch {
+    return value
+  }
+}
+
+function formatTimeShort(value: string) {
+  try {
+    return new Date(value).toLocaleString(locale.value, {
+      month: 'numeric',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    })
+  } catch {
+    return value
+  }
+}
+
+function 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')
+  }
+}
+
+function storageIcon(storage: ActivityLogStorage | null) {
+  return storage?.type === 'local' ? 'i-lucide-hard-drive' : 'i-lucide-cloud'
+}
+
+function publicPathFromKey(key: string) {
+  if (!hideFolderInUrl.value) return key
+  const slash = key.lastIndexOf('/')
+  return slash >= 0 ? key.slice(slash + 1) : key
+}
+
+function imageUrl(key: string) {
+  const base = imageLinkBase.value.replace(/\/$/, '')
+  const path = publicPathFromKey(key)
+  if (!base) return `/${path}`
+  return `${base}/${path}`
+}
+
+async function loadImageLinkBase() {
+  try {
+    if (isAdmin.value) {
+      const data = await $fetch<{ imageBaseUrl: string, hideFolderInUrl: boolean }>('/api/settings', {
+        credentials: 'include'
+      })
+      imageLinkBase.value = data.imageBaseUrl
+      hideFolderInUrl.value = data.hideFolderInUrl
+      return
+    }
+    const data = await $fetch<{ env: { imageBaseUrl: string, hideFolderInUrl: boolean } }>('/api/user/api-token', {
+      credentials: 'include'
+    })
+    imageLinkBase.value = data.env.imageBaseUrl
+    hideFolderInUrl.value = data.env.hideFolderInUrl
+  } catch {
+    if (import.meta.client) {
+      imageLinkBase.value = window.location.origin
+    }
+  }
+}
+
+async function loadLogs() {
+  loading.value = true
+  try {
+    const query: Record<string, string | number> = {
+      page: page.value,
+      limit: pageSize
+    }
+    if (actionFilter.value !== 'all') {
+      query.action = actionFilter.value
+    }
+    if (sourceFilter.value !== 'all') {
+      query.source = sourceFilter.value
+    }
+    if (isAdmin.value && userFilter.value !== 'all') {
+      query.userId = userFilter.value
+    }
+    if (activeSearch.value) {
+      query.q = activeSearch.value
+    }
+
+    listData.value = await $fetch<ActivityLogListResponse>('/api/logs', {
+      credentials: 'include',
+      query
+    })
+    page.value = listData.value.page
+  } catch (error: unknown) {
+    handleAuthError(error)
+    if (isAuthenticated.value) {
+      toast.add({ title: t('logs.loadFailed'), color: 'error' })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function applyFilters() {
+  page.value = 1
+  void loadLogs()
+}
+
+function submitSearch() {
+  activeSearch.value = searchQuery.value.trim()
+  applyFilters()
+}
+
+function clearSearch() {
+  searchQuery.value = ''
+  activeSearch.value = ''
+  applyFilters()
+}
+
+function handlePageChange(target: number) {
+  page.value = target
+  void loadLogs()
+}
+
+onMounted(async () => {
+  const status = await fetchStatus()
+  if (!status.initialized && !status.legacyMode) {
+    await navigateTo('/setup')
+    return
+  }
+  await checkSession()
+  if (!isAuthenticated.value) {
+    await navigateTo('/')
+    return
+  }
+  await loadImageLinkBase()
+  await loadLogs()
+})
+
+watch(isAuthenticated, async (authed, prev) => {
+  if (authed && prev === false) {
+    await loadImageLinkBase()
+    await loadLogs()
+  }
+})
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div
+      v-if="isChecking"
+      class="flex min-h-screen items-center justify-center"
+    >
+      <div class="flex flex-col items-center gap-3 text-muted">
+        <UIcon
+          name="i-lucide-loader-circle"
+          class="size-8 animate-spin"
+        />
+        <p class="text-sm">
+          {{ t('common.loadingSession') }}
+        </p>
+      </div>
+    </div>
+
+    <AdminLoginGate v-else-if="!isAuthenticated" />
+
+    <AppShell v-else>
+      <section class="min-w-0 overflow-x-hidden rounded-2xl border border-default bg-elevated shadow-sm">
+        <div class="flex flex-wrap items-start justify-between gap-3 border-b border-default px-4 py-4 sm:px-6">
+          <div class="flex items-start gap-2">
+            <UIcon
+              name="i-lucide-scroll-text"
+              class="mt-0.5 size-5 shrink-0 text-primary"
+            />
+            <div>
+              <h1 class="text-base font-semibold">
+                {{ t('logs.pageTitle') }}
+              </h1>
+              <p class="mt-0.5 text-xs text-muted">
+                {{ isAdmin ? t('logs.pageSubtitleAdmin') : t('logs.pageSubtitle') }}
+              </p>
+            </div>
+          </div>
+          <UButton
+            icon="i-lucide-refresh-cw"
+            variant="ghost"
+            color="neutral"
+            size="sm"
+            :aria-label="t('common.refresh')"
+            :loading="loading"
+            @click="loadLogs"
+          />
+        </div>
+
+        <form
+          class="border-b border-default px-4 py-3 sm:px-6"
+          @submit.prevent="submitSearch"
+        >
+          <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <p
+              v-if="summaryLabel"
+              class="text-xs text-muted"
+            >
+              {{ summaryLabel }}
+            </p>
+            <p
+              v-else
+              class="text-xs text-muted"
+            >
+              {{ t('stats.counting') }}
+            </p>
+
+            <div class="flex min-w-0 flex-wrap items-center gap-2 sm:justify-end">
+              <USelect
+                v-if="isAdmin"
+                v-model="userFilter"
+                :items="userItems"
+                value-key="value"
+                class="min-w-0 w-full sm:w-36"
+                size="sm"
+                @update:model-value="applyFilters"
+              />
+              <USelect
+                v-model="actionFilter"
+                :items="actionItems"
+                value-key="value"
+                class="min-w-0 w-[calc(50%-0.25rem)] sm:w-32"
+                size="sm"
+                @update:model-value="applyFilters"
+              />
+              <USelect
+                v-model="sourceFilter"
+                :items="sourceItems"
+                value-key="value"
+                class="min-w-0 w-[calc(50%-0.25rem)] sm:w-36"
+                size="sm"
+                @update:model-value="applyFilters"
+              />
+              <div class="flex min-w-0 w-full items-center gap-2 sm:w-auto">
+                <UInput
+                  v-model="searchQuery"
+                  icon="i-lucide-search"
+                  :placeholder="t('logs.searchPlaceholder')"
+                  class="min-w-0 flex-1 sm:w-40 sm:flex-none"
+                  size="sm"
+                  :disabled="loading"
+                />
+                <UButton
+                  type="submit"
+                  icon="i-lucide-search"
+                  size="sm"
+                  class="shrink-0"
+                  :aria-label="t('common.search')"
+                  :loading="loading"
+                >
+                  <span class="hidden sm:inline">{{ t('common.search') }}</span>
+                </UButton>
+                <UButton
+                  v-if="activeSearch"
+                  type="button"
+                  icon="i-lucide-x"
+                  size="sm"
+                  variant="ghost"
+                  color="neutral"
+                  class="shrink-0"
+                  :aria-label="t('stats.clear')"
+                  @click="clearSearch"
+                >
+                  <span class="hidden sm:inline">{{ t('stats.clear') }}</span>
+                </UButton>
+              </div>
+            </div>
+          </div>
+        </form>
+
+        <div
+          v-if="loading"
+          class="p-4 sm:p-6"
+        >
+          <div class="space-y-3 sm:hidden">
+            <USkeleton
+              v-for="n in 6"
+              :key="`mobile-${n}`"
+              class="h-24 rounded-lg"
+            />
+          </div>
+          <div class="hidden space-y-2 sm:block">
+            <USkeleton
+              v-for="n in 8"
+              :key="`desktop-${n}`"
+              class="h-12 rounded-lg"
+            />
+          </div>
+        </div>
+
+        <template v-else-if="listData && listData.items.length">
+          <div class="min-w-0 sm:hidden">
+            <div class="divide-y divide-default">
+              <article
+                v-for="row in listData.items"
+                :key="row.id"
+                class="min-w-0 px-4 py-3.5"
+              >
+                <div class="flex items-start justify-between gap-3">
+                  <time class="text-xs text-muted">
+                    {{ formatTimeShort(row.createdAt) }}
+                  </time>
+                  <span class="shrink-0 text-xs tabular-nums text-muted">
+                    {{ formatFileSize(row.size) }}
+                  </span>
+                </div>
+
+                <div class="mt-2 flex min-w-0 max-w-full flex-wrap items-center gap-1.5">
+                  <UBadge
+                    :color="actionColor(row.action)"
+                    variant="subtle"
+                    size="xs"
+                  >
+                    <UIcon
+                      :name="actionIcon(row.action)"
+                      class="mr-1 size-3"
+                    />
+                    {{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
+                  </UBadge>
+                  <UBadge
+                    color="neutral"
+                    variant="subtle"
+                    size="xs"
+                  >
+                    {{ sourceLabel(row.source) }}
+                  </UBadge>
+                  <span
+                    v-if="isAdmin"
+                    class="text-xs text-muted"
+                  >
+                    {{ row.username ?? '—' }}
+                  </span>
+                  <UBadge
+                    v-if="row.storage"
+                    color="neutral"
+                    variant="subtle"
+                    size="xs"
+                    class="max-w-full truncate"
+                  >
+                    <UIcon
+                      :name="storageIcon(row.storage)"
+                      class="mr-1 size-3"
+                    />
+                    {{ row.storage.name }}
+                  </UBadge>
+                </div>
+
+                <p
+                  class="mt-2 truncate text-sm"
+                  :title="row.originalName"
+                >
+                  {{ row.originalName }}
+                </p>
+
+                <div class="mt-2 flex min-w-0 items-center gap-1">
+                  <a
+                    v-if="row.action === 'upload'"
+                    :href="imageUrl(row.key)"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="min-w-0 flex-1 truncate font-mono text-xs text-primary hover:underline"
+                    :title="row.key"
+                  >
+                    {{ row.key }}
+                  </a>
+                  <span
+                    v-else
+                    class="min-w-0 flex-1 truncate font-mono text-xs text-dimmed"
+                    :title="row.key"
+                  >
+                    {{ row.key }}
+                  </span>
+                  <CopyButton
+                    icon="i-lucide-copy"
+                    icon-only
+                    class="shrink-0"
+                    :label="t('common.copy')"
+                    :value="row.key"
+                    :success-title="t('copy.copiedUrl')"
+                  />
+                </div>
+              </article>
+            </div>
+          </div>
+
+          <div class="hidden overflow-x-auto sm:block">
+            <table class="min-w-full text-left text-sm">
+              <thead class="border-b border-default bg-muted/30 text-xs text-muted">
+                <tr>
+                  <th class="px-4 py-3 font-medium sm:px-6">
+                    {{ t('logs.colTime') }}
+                  </th>
+                  <th
+                    v-if="isAdmin"
+                    class="px-4 py-3 font-medium"
+                  >
+                    {{ t('logs.colUser') }}
+                  </th>
+                  <th class="px-4 py-3 font-medium">
+                    {{ t('logs.colAction') }}
+                  </th>
+                  <th class="px-4 py-3 font-medium">
+                    {{ t('logs.colSource') }}
+                  </th>
+                  <th class="px-4 py-3 font-medium">
+                    {{ t('logs.colStorage') }}
+                  </th>
+                  <th class="hidden px-4 py-3 font-medium md:table-cell">
+                    {{ t('logs.colFile') }}
+                  </th>
+                  <th class="hidden px-4 py-3 font-medium lg:table-cell">
+                    {{ t('logs.colFolder') }}
+                  </th>
+                  <th class="px-4 py-3 font-medium">
+                    {{ t('logs.colSize') }}
+                  </th>
+                  <th class="hidden px-4 py-3 font-medium xl:table-cell">
+                    {{ t('logs.colKey') }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-default">
+                <tr
+                  v-for="row in listData.items"
+                  :key="row.id"
+                  class="hover:bg-muted/20"
+                >
+                  <td class="whitespace-nowrap px-4 py-3 text-xs text-muted sm:px-6">
+                    {{ formatTime(row.createdAt) }}
+                  </td>
+                  <td
+                    v-if="isAdmin"
+                    class="px-4 py-3 text-xs"
+                  >
+                    {{ row.username ?? '—' }}
+                  </td>
+                  <td class="px-4 py-3">
+                    <UBadge
+                      :color="actionColor(row.action)"
+                      variant="subtle"
+                      size="xs"
+                    >
+                      <UIcon
+                        :name="actionIcon(row.action)"
+                        class="mr-1 size-3"
+                      />
+                      {{ row.action === 'upload' ? t('logs.actionUpload') : t('logs.actionDelete') }}
+                    </UBadge>
+                  </td>
+                  <td class="px-4 py-3">
+                    <UBadge
+                      color="neutral"
+                      variant="subtle"
+                      size="xs"
+                    >
+                      {{ sourceLabel(row.source) }}
+                    </UBadge>
+                  </td>
+                  <td class="px-4 py-3 text-xs">
+                    <span
+                      v-if="row.storage"
+                      class="inline-flex max-w-[8rem] items-center gap-1 truncate"
+                      :title="row.storage.name"
+                    >
+                      <UIcon
+                        :name="storageIcon(row.storage)"
+                        class="size-3.5 shrink-0 opacity-70"
+                      />
+                      <span class="truncate">{{ row.storage.name }}</span>
+                    </span>
+                    <span
+                      v-else
+                      class="text-muted"
+                    >—</span>
+                  </td>
+                  <td
+                    class="hidden max-w-[12rem] truncate px-4 py-3 md:table-cell"
+                    :title="row.originalName"
+                  >
+                    {{ row.originalName }}
+                  </td>
+                  <td class="hidden px-4 py-3 font-mono text-xs text-muted lg:table-cell">
+                    {{ folderFromKey(row.key) }}
+                  </td>
+                  <td class="whitespace-nowrap px-4 py-3 tabular-nums text-muted">
+                    {{ formatFileSize(row.size) }}
+                  </td>
+                  <td class="hidden px-4 py-3 xl:table-cell">
+                    <div class="flex max-w-[16rem] items-center gap-1">
+                      <a
+                        v-if="row.action === 'upload'"
+                        :href="imageUrl(row.key)"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="truncate font-mono text-xs text-primary hover:underline"
+                        :title="row.key"
+                      >
+                        {{ row.key }}
+                      </a>
+                      <span
+                        v-else
+                        class="truncate font-mono text-xs text-dimmed"
+                        :title="row.key"
+                      >
+                        {{ row.key }}
+                      </span>
+                      <CopyButton
+                        icon="i-lucide-copy"
+                        icon-only
+                        :label="t('common.copy')"
+                        :value="row.key"
+                        :success-title="t('copy.copiedUrl')"
+                      />
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </template>
+
+        <div
+          v-else
+          class="px-4 py-16 text-center text-sm text-muted sm:px-6"
+        >
+          {{ t('logs.empty') }}
+        </div>
+
+        <div
+          v-if="listData && listData.total > 0"
+          class="border-t border-default px-4 py-4 sm:px-6"
+        >
+          <PaginationBar
+            :page="listData.page"
+            :total-pages="listData.totalPages"
+            :total="listData.total"
+            :unit="t('logs.entriesUnit')"
+            :loading="loading"
+            @update:page="handlePageChange"
+          />
+        </div>
+      </section>
+    </AppShell>
+  </div>
+</template>

app/pages/register.vue

@@ -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="t('setup.passwordPlaceholder')"
-            placeholder="设置登录密码"
             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="t('setup.confirmPlaceholder')"
-            placeholder="再次输入密码"
             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>

app/pages/settings.vue

@@ -1,359 +0,0 @@
-<script setup lang="ts">
-type SettingSource = 'env' | 'db' | 'none'
-type WebpQualitySource = 'env' | 'db' | 'default'
-
-interface SettingsResponse {
-  apiUploadToken: string
-  tokenSource: SettingSource
-  envTokenOverride: boolean
-  webpQuality: number
-  webpQualitySource: WebpQualitySource
-  allowedRefererHosts: string
-  refererSource: SettingSource
-  refererEnvFallback: string
-  imageBaseUrl: string
-  imageBaseUrlConfigured: string
-  imageBaseUrlSource: SettingSource
-  allowRegistration: boolean
-  appVersion: string
-}
-
-const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
-const { defaultFolder, loadPreferences } = useUploadPreferences()
-const toast = useToast()
-
-const settings = ref<SettingsResponse | null>(null)
-const folderOptions = ref<string[]>(['images'])
-const savingServer = ref(false)
-
-const refererDraft = ref('')
-const imageBaseUrlDraft = ref('')
-const allowRegistrationDraft = ref(false)
-
-const folderSelectItems = computed(() =>
-  folderOptions.value.map(folder => ({ label: folder, value: folder }))
-)
-
-const hasServerChanges = computed(() => {
-  if (!settings.value) return false
-  return refererDraft.value !== settings.value.allowedRefererHosts
-    || imageBaseUrlDraft.value !== settings.value.imageBaseUrlConfigured
-    || allowRegistrationDraft.value !== settings.value.allowRegistration
-})
-
-function sourceBadge(source: SettingSource | WebpQualitySource) {
-  switch (source) {
-    case 'env':
-      return { label: '.env', color: 'warning' as const }
-    case 'db':
-      return { label: '已保存', color: 'success' as const }
-    case 'default':
-      return { label: '默认', color: 'neutral' as const }
-    default:
-      return { label: '未设置', color: 'neutral' as const }
-  }
-}
-
-function tokenSourceText(source: SettingSource) {
-  switch (source) {
-    case 'env':
-      return '环境变量'
-    case 'db':
-      return '后台生成'
-    default:
-      return '未配置'
-  }
-}
-
-function errorStatus(error: unknown): number {
-  if (typeof error === 'object' && error !== null && 'statusCode' in error) {
-    return (error as { statusCode: number }).statusCode
-  }
-  return 0
-}
-
-function applySettings(data: SettingsResponse) {
-  settings.value = data
-  refererDraft.value = data.allowedRefererHosts
-  imageBaseUrlDraft.value = data.imageBaseUrlConfigured
-  allowRegistrationDraft.value = data.allowRegistration
-}
-
-async function patchSettings(body: Record<string, unknown>) {
-  const data = await $fetch<SettingsResponse>('/api/settings', {
-    method: 'PATCH',
-    credentials: 'include',
-    body
-  })
-  applySettings(data)
-  return data
-}
-
-function handlePatchError(error: unknown, fallback: string) {
-  handleAuthError(error)
-  if (!isAuthenticated.value) return
-  if (errorStatus(error) === 409) {
-    toast.add({ title: '该项已由环境变量覆盖，无法在后台修改', color: 'warning' })
-    void loadSettings()
-    return
-  }
-  toast.add({ title: fallback, color: 'error' })
-}
-
-async function saveServerSettings() {
-  if (!isAuthenticated.value || !hasServerChanges.value) return
-
-  savingServer.value = true
-  try {
-    await patchSettings({
-      allowedRefererHosts: refererDraft.value,
-      imageBaseUrl: imageBaseUrlDraft.value,
-      allowRegistration: allowRegistrationDraft.value
-    })
-    toast.add({ title: '服务器配置已保存', color: 'success' })
-  } catch (error: unknown) {
-    handlePatchError(error, '保存服务器配置失败')
-  } finally {
-    savingServer.value = false
-  }
-}
-
-async function loadFolders() {
-  const data = await $fetch<{ folders: string[] }>('/api/folders', {
-    credentials: 'include'
-  })
-  folderOptions.value = [...data.folders]
-  if (!folderOptions.value.includes(defaultFolder.value)) {
-    defaultFolder.value = folderOptions.value[0] ?? 'images'
-  }
-}
-
-async function loadSettings() {
-  try {
-    const data = await $fetch<SettingsResponse>('/api/settings', {
-      credentials: 'include'
-    })
-    applySettings(data)
-  } catch (error: unknown) {
-    handleAuthError(error)
-    if (isAuthenticated.value) {
-      toast.add({ title: '加载设置失败', color: 'error' })
-    }
-  }
-}
-
-async function loadPage() {
-  if (!isAdmin.value) {
-    await navigateTo('/')
-    return
-  }
-  loadPreferences()
-  await Promise.all([loadSettings(), loadFolders()])
-}
-
-onMounted(async () => {
-  const status = await fetchStatus()
-  if (!status.initialized && !status.legacyMode) {
-    await navigateTo('/setup')
-    return
-  }
-  await checkSession()
-  if (isAuthenticated.value && !isAdmin.value) {
-    await navigateTo('/')
-  }
-})
-
-watch(isAuthenticated, async (authed) => {
-  if (authed) {
-    if (!isAdmin.value) {
-      await navigateTo('/')
-      return
-    }
-    await nextTick()
-    await loadPage()
-  } else {
-    settings.value = null
-  }
-})
-</script>
-
-<template>
-  <div class="min-h-screen">
-    <div
-      v-if="isChecking"
-      class="flex min-h-screen items-center justify-center"
-    >
-      <div class="flex flex-col items-center gap-3 text-muted">
-        <UIcon
-          name="i-lucide-loader-circle"
-          class="size-8 animate-spin"
-        />
-        <p class="text-sm">
-          正在验证登录状态…
-        </p>
-      </div>
-    </div>
-
-    <AdminLoginGate v-else-if="!isAuthenticated" />
-
-    <AppShell v-else-if="isAdmin">
-      <section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
-        <UploadPreferencesPanel embedded />
-      </section>
-
-      <section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
-        <div class="flex items-start gap-2 border-b border-default px-5 py-4 sm:px-6">
-          <UIcon
-            name="i-lucide-server"
-            class="mt-0.5 size-5 shrink-0 text-primary"
-          />
-          <div class="min-w-0">
-            <h1 class="text-base font-semibold">
-              系统设置
-            </h1>
-            <p class="mt-0.5 text-xs text-muted">
-              保存后写入数据库；环境变量优先级更高
-            </p>
-          </div>
-        </div>
-
-        <div
-          v-if="settings"
-          class="p-5 sm:p-6"
-        >
-          <div class="grid gap-5 sm:grid-cols-3 sm:gap-6">
-            <div class="space-y-4">
-              <h3 class="text-sm font-semibold">
-                上传与账号
-              </h3>
-
-              <div class="space-y-2">
-                <label class="text-sm">默认上传目录</label>
-                <p class="text-xs leading-relaxed text-muted">
-                  保存在本机浏览器，仅影响您的上传目标目录
-                </p>
-                <USelect
-                  v-model="defaultFolder"
-                  :items="folderSelectItems"
-                  class="w-full"
-                />
-              </div>
-
-              <label class="flex cursor-pointer items-start gap-2.5">
-                <UCheckbox
-                  v-model="allowRegistrationDraft"
-                  class="mt-0.5"
-                />
-                <span>
-                  <span class="block text-sm">开放用户注册</span>
-                  <span class="mt-1 block text-xs leading-relaxed text-muted">
-                    允许新用户自行注册（普通用户仅可见自己的图片）
-                  </span>
-                </span>
-              </label>
-            </div>
-
-            <div class="space-y-4">
-              <div class="flex items-center justify-between gap-2">
-                <h3 class="text-sm font-semibold">
-                  访问控制
-                </h3>
-                <UBadge
-                  :color="sourceBadge(settings.refererSource).color"
-                  variant="subtle"
-                  size="xs"
-                >
-                  {{ sourceBadge(settings.refererSource).label }}
-                </UBadge>
-              </div>
-              <p class="text-xs leading-relaxed text-muted">
-                Referer 防盗链，逗号分隔允许引用的域名，留空不限制
-              </p>
-              <UTextarea
-                v-model="refererDraft"
-                placeholder="example.com, www.example.com"
-                :rows="4"
-                class="w-full font-mono text-sm"
-              />
-            </div>
-
-            <div class="space-y-4">
-              <div class="flex items-center justify-between gap-2">
-                <h3 class="text-sm font-semibold">
-                  链接生成
-                </h3>
-                <UBadge
-                  :color="sourceBadge(settings.imageBaseUrlSource).color"
-                  variant="subtle"
-                  size="xs"
-                >
-                  {{ sourceBadge(settings.imageBaseUrlSource).label }}
-                </UBadge>
-              </div>
-              <p class="text-xs leading-relaxed text-muted">
-                生成图片链接的 URL 前缀，内网访问建议填公网域名
-              </p>
-              <UInput
-                v-model="imageBaseUrlDraft"
-                placeholder="https://pic.example.com"
-                class="w-full font-mono text-sm"
-              />
-              <p
-                v-if="settings.imageBaseUrl"
-                class="text-xs text-muted"
-              >
-                当前生效：<span class="font-mono break-all">{{ settings.imageBaseUrl }}</span>
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div
-          v-else
-          class="flex justify-center py-12"
-        >
-          <UIcon
-            name="i-lucide-loader-circle"
-            class="size-6 animate-spin text-muted"
-          />
-        </div>
-
-        <div
-          v-if="settings"
-          class="flex flex-wrap items-center justify-between gap-3 border-t border-default px-5 py-4 sm:px-6"
-        >
-          <div class="flex min-w-0 items-center gap-2 text-xs text-muted">
-            <UIcon
-              name="i-lucide-key-round"
-              class="size-3.5 shrink-0"
-            />
-            <span>
-              API Token · {{ tokenSourceText(settings.tokenSource) }}
-              <template v-if="hasServerChanges">
-                · <span class="text-warning">有未保存的更改</span>
-              </template>
-            </span>
-          </div>
-          <div class="flex flex-wrap items-center gap-2">
-            <UButton
-              label="管理 Token"
-              icon="i-lucide-external-link"
-              variant="outline"
-              color="neutral"
-              size="sm"
-              to="/api"
-            />
-            <UButton
-              label="保存"
-              icon="i-lucide-save"
-              size="sm"
-              :loading="savingServer"
-              :disabled="!hasServerChanges"
-              @click="saveServerSettings"
-            />
-          </div>
-        </div>
-      </section>
-    </AppShell>
-  </div>
-</template>

app/pages/settings/index.vue

@@ -0,0 +1,592 @@
+<script setup lang="ts">
+type SettingSource = 'env' | 'db' | 'none'
+type WebpQualitySource = 'env' | 'db' | 'default'
+
+interface SettingsResponse {
+  apiUploadToken: string
+  tokenSource: SettingSource
+  envTokenOverride: boolean
+  webpQuality: number
+  webpQualitySource: WebpQualitySource
+  allowedRefererHosts: string
+  refererSource: SettingSource
+  refererEnvFallback: string
+  imageBaseUrl: string
+  imageBaseUrlConfigured: string
+  imageBaseUrlSource: SettingSource
+  siteBaseUrl: string
+  siteBaseUrlConfigured: string
+  siteBaseUrlSource: SettingSource
+  domainSeparation: boolean
+  hideFolderInUrl: boolean
+  hideFolderInUrlSource: SettingSource
+  storageUseDatePath: boolean
+  storageUseDatePathSource: SettingSource
+  allowRegistration: boolean
+  appVersion: string
+}
+
+const { isChecking, isAuthenticated, checkSession, handleAuthError, fetchStatus, isAdmin } = useAuth()
+const toast = useToast()
+const { t, locale } = useI18n()
+
+const domainSeparationDocUrl = computed(() =>
+  locale.value === 'en'
+    ? 'https://o96u.github.io/PicHost/en/guide/domain-separation'
+    : 'https://o96u.github.io/PicHost/guide/domain-separation'
+)
+
+const settings = ref<SettingsResponse | null>(null)
+const savingServer = ref(false)
+
+const refererDraft = ref('')
+const siteBaseUrlDraft = ref('')
+const imageBaseUrlDraft = ref('')
+const hideFolderInUrlDraft = ref(false)
+const storageUseDatePathDraft = ref(true)
+const allowRegistrationDraft = ref(false)
+const domainSeparationDraft = ref(false)
+
+interface ReleaseCheckResponse {
+  currentVersion: string
+  latestVersion: string | null
+  updateAvailable: boolean
+  releaseUrl: string | null
+}
+
+const releaseCheck = ref<ReleaseCheckResponse | null>(null)
+
+const hasServerChanges = computed(() => {
+  if (!settings.value) return false
+  return refererDraft.value !== settings.value.allowedRefererHosts
+    || domainSeparationDraft.value !== settings.value.domainSeparation
+    || siteBaseUrlDraft.value !== (settings.value.domainSeparation ? settings.value.siteBaseUrlConfigured : '')
+    || imageBaseUrlDraft.value !== settings.value.imageBaseUrlConfigured
+    || hideFolderInUrlDraft.value !== settings.value.hideFolderInUrl
+    || storageUseDatePathDraft.value !== settings.value.storageUseDatePath
+    || allowRegistrationDraft.value !== settings.value.allowRegistration
+})
+
+function sourceBadge(source: SettingSource | WebpQualitySource) {
+  switch (source) {
+    case 'env':
+      return { label: t('settings.badgeEnv'), color: 'warning' as const }
+    case 'db':
+      return { label: t('settings.badgeSaved'), color: 'success' as const }
+    case 'default':
+      return { label: t('settings.badgeDefault'), color: 'neutral' as const }
+    default:
+      return { label: t('settings.badgeUnset'), color: 'neutral' as const }
+  }
+}
+
+function tokenSourceText(source: SettingSource) {
+  switch (source) {
+    case 'env':
+      return t('settings.tokenEnv')
+    case 'db':
+      return t('settings.tokenDb')
+    default:
+      return t('settings.tokenNone')
+  }
+}
+
+function errorStatus(error: unknown): number {
+  if (typeof error === 'object' && error !== null && 'statusCode' in error) {
+    return (error as { statusCode: number }).statusCode
+  }
+  return 0
+}
+
+function applySettings(data: SettingsResponse) {
+  settings.value = data
+  refererDraft.value = data.allowedRefererHosts
+  siteBaseUrlDraft.value = data.domainSeparation ? data.siteBaseUrlConfigured : ''
+  imageBaseUrlDraft.value = data.imageBaseUrlConfigured
+  hideFolderInUrlDraft.value = data.hideFolderInUrl
+  storageUseDatePathDraft.value = data.storageUseDatePath
+  allowRegistrationDraft.value = data.allowRegistration
+  domainSeparationDraft.value = data.domainSeparation
+}
+
+async function patchSettings(body: Record<string, unknown>) {
+  const data = await $fetch<SettingsResponse>('/api/settings', {
+    method: 'PATCH',
+    credentials: 'include',
+    body
+  })
+  applySettings(data)
+  return data
+}
+
+function handlePatchError(error: unknown, fallback: string) {
+  handleAuthError(error)
+  if (!isAuthenticated.value) return
+  if (errorStatus(error) === 409) {
+    toast.add({ title: t('settings.envOverride'), color: 'warning' })
+    void loadSettings()
+    return
+  }
+  toast.add({ title: fallback, color: 'error' })
+}
+
+function onDomainSeparationDraftChange(next: boolean | 'indeterminate') {
+  const enabled = next === true
+  domainSeparationDraft.value = enabled
+  if (!enabled) {
+    siteBaseUrlDraft.value = ''
+    return
+  }
+  if (!siteBaseUrlDraft.value && import.meta.client) {
+    siteBaseUrlDraft.value = window.location.origin
+  }
+}
+
+async function saveServerSettings() {
+  if (!isAuthenticated.value || !hasServerChanges.value) return
+
+  savingServer.value = true
+  try {
+    await patchSettings({
+      allowedRefererHosts: refererDraft.value,
+      siteBaseUrl: domainSeparationDraft.value ? siteBaseUrlDraft.value : '',
+      imageBaseUrl: imageBaseUrlDraft.value,
+      hideFolderInUrl: hideFolderInUrlDraft.value,
+      storageUseDatePath: storageUseDatePathDraft.value,
+      allowRegistration: allowRegistrationDraft.value
+    })
+    toast.add({ title: t('settings.saved'), color: 'success' })
+  } catch (error: unknown) {
+    handlePatchError(error, t('settings.saveFailed'))
+  } finally {
+    savingServer.value = false
+  }
+}
+
+async function loadSettings() {
+  try {
+    const data = await $fetch<SettingsResponse>('/api/settings', {
+      credentials: 'include'
+    })
+    applySettings(data)
+  } catch (error: unknown) {
+    handleAuthError(error)
+    if (isAuthenticated.value) {
+      toast.add({ title: t('settings.loadFailed'), color: 'error' })
+    }
+  }
+}
+
+async function checkLatestRelease() {
+  try {
+    releaseCheck.value = await $fetch<ReleaseCheckResponse>('/api/version/latest', {
+      credentials: 'include'
+    })
+  } catch {
+    releaseCheck.value = null
+  }
+}
+
+async function loadPage() {
+  if (!isAdmin.value) {
+    await navigateTo('/')
+    return
+  }
+  await Promise.all([loadSettings(), checkLatestRelease()])
+}
+
+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
+  }
+  if (isAuthenticated.value && isAdmin.value) {
+    await loadPage()
+  }
+})
+
+watch(isAuthenticated, async (authed, prev) => {
+  if (authed && prev === false) {
+    if (!isAdmin.value) {
+      await navigateTo('/')
+      return
+    }
+    await nextTick()
+    await loadPage()
+  } else {
+    settings.value = null
+    releaseCheck.value = null
+  }
+})
+</script>
+
+<template>
+  <div class="min-h-screen">
+    <div
+      v-if="isChecking"
+      class="flex min-h-screen items-center justify-center"
+    >
+      <div class="flex flex-col items-center gap-3 text-muted">
+        <UIcon
+          name="i-lucide-loader-circle"
+          class="size-8 animate-spin"
+        />
+        <p class="text-sm">
+          {{ t('common.loadingSession') }}
+        </p>
+      </div>
+    </div>
+
+    <AdminLoginGate v-else-if="!isAuthenticated" />
+
+    <AppShell v-else-if="isAdmin">
+      <section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
+        <UploadPreferencesPanel embedded />
+      </section>
+
+      <section class="overflow-hidden rounded-2xl border border-default bg-elevated shadow-sm">
+        <div class="flex items-start gap-2 border-b border-default px-5 py-4 sm:px-6">
+          <UIcon
+            name="i-lucide-server"
+            class="mt-0.5 size-5 shrink-0 text-primary"
+          />
+          <div class="min-w-0">
+            <h1 class="text-base font-semibold">
+              {{ t('settings.title') }}
+            </h1>
+            <p class="mt-0.5 text-xs text-muted">
+              {{ t('settings.subtitle') }}
+            </p>
+          </div>
+        </div>
+
+        <div
+          v-if="settings"
+          class="p-5 sm:p-6"
+        >
+          <div class="space-y-5">
+            <div class="grid min-w-0 gap-5 lg:grid-cols-2 lg:items-stretch">
+              <div class="flex h-full min-w-0 flex-col space-y-3 rounded-xl border border-default/60 bg-muted/10 p-4 sm:p-5">
+                <h3 class="text-sm font-semibold">
+                  {{ t('settings.featureToggles') }}
+                </h3>
+
+                <label class="flex cursor-pointer items-start gap-2.5 rounded-lg border border-default/50 bg-default/40 p-3">
+                  <UCheckbox
+                    v-model="allowRegistrationDraft"
+                    class="mt-0.5 shrink-0"
+                  />
+                  <span class="min-w-0">
+                    <span class="block text-sm font-medium">{{ t('settings.allowRegistration') }}</span>
+                    <span class="mt-1 block text-xs leading-relaxed text-muted">
+                      {{ t('settings.allowRegistrationHint') }}
+                    </span>
+                  </span>
+                </label>
+
+                <label class="flex cursor-pointer items-start gap-2.5 rounded-lg border border-default/50 bg-default/40 p-3">
+                  <UCheckbox
+                    :model-value="storageUseDatePathDraft"
+                    class="mt-0.5 shrink-0"
+                    :disabled="settings.storageUseDatePathSource === 'env'"
+                    @update:model-value="(v) => storageUseDatePathDraft = v === true"
+                  />
+                  <span class="min-w-0">
+                    <span class="flex flex-wrap items-center gap-2 text-sm font-medium">
+                      {{ t('settings.storageUseDatePath') }}
+                      <UBadge
+                        v-if="settings.storageUseDatePathSource === 'env'"
+                        :color="sourceBadge(settings.storageUseDatePathSource).color"
+                        variant="subtle"
+                        size="xs"
+                      >
+                        {{ sourceBadge(settings.storageUseDatePathSource).label }}
+                      </UBadge>
+                    </span>
+                    <span class="mt-1 block text-xs leading-relaxed text-muted">
+                      {{ t('settings.storageUseDatePathHint') }}
+                    </span>
+                  </span>
+                </label>
+
+                <label class="flex cursor-pointer items-start gap-2.5 rounded-lg border border-default/50 bg-default/40 p-3">
+                  <UCheckbox
+                    :model-value="hideFolderInUrlDraft"
+                    class="mt-0.5 shrink-0"
+                    :disabled="settings.hideFolderInUrlSource === 'env'"
+                    @update:model-value="(v) => hideFolderInUrlDraft = v === true"
+                  />
+                  <span class="min-w-0">
+                    <span class="flex flex-wrap items-center gap-2 text-sm font-medium">
+                      {{ t('settings.hideFolderInUrl') }}
+                      <UBadge
+                        v-if="settings.hideFolderInUrlSource === 'env'"
+                        :color="sourceBadge(settings.hideFolderInUrlSource).color"
+                        variant="subtle"
+                        size="xs"
+                      >
+                        {{ sourceBadge(settings.hideFolderInUrlSource).label }}
+                      </UBadge>
+                    </span>
+                    <span class="mt-1 block text-xs leading-relaxed text-muted">
+                      {{ t('settings.hideFolderInUrlHint') }}
+                    </span>
+                  </span>
+                </label>
+              </div>
+
+              <div class="flex h-full min-w-0 flex-col space-y-4 rounded-xl border border-default/60 bg-muted/10 p-4 sm:p-5">
+                <h3 class="text-sm font-semibold">
+                  {{ t('settings.domainSettings') }}
+                </h3>
+
+                <label class="flex cursor-pointer items-start gap-2.5 rounded-lg border border-default/50 bg-default/40 p-3">
+                  <UCheckbox
+                    :model-value="domainSeparationDraft"
+                    class="mt-0.5 shrink-0"
+                    @update:model-value="onDomainSeparationDraftChange"
+                  />
+                  <span class="min-w-0">
+                    <span class="block text-sm font-medium">{{ t('setup.domainSeparation') }}</span>
+                    <span class="mt-1 block text-xs leading-relaxed text-muted">
+                      {{ t('setup.domainSeparationHint') }}
+                    </span>
+                  </span>
+                </label>
+
+                <p
+                  v-if="domainSeparationDraft"
+                  class="rounded-lg border border-warning/25 bg-warning/5 px-3 py-2.5 text-xs leading-relaxed text-warning"
+                >
+                  {{ t('setup.domainSeparationProxyHint') }}
+                  <a
+                    :href="domainSeparationDocUrl"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-primary hover:underline"
+                  >
+                    {{ t('setup.domainSeparationProxyExample') }}
+                  </a>
+                </p>
+
+                <div
+                  v-if="domainSeparationDraft"
+                  class="grid gap-4 sm:grid-cols-2"
+                >
+                  <div class="space-y-1.5">
+                    <div class="flex flex-wrap items-center gap-2">
+                      <label class="text-sm font-medium">{{ t('settings.siteBaseUrl') }}</label>
+                      <UBadge
+                        :color="sourceBadge(settings.siteBaseUrlSource).color"
+                        variant="subtle"
+                        size="xs"
+                      >
+                        {{ sourceBadge(settings.siteBaseUrlSource).label }}
+                      </UBadge>
+                    </div>
+                    <p class="text-xs leading-relaxed text-muted">
+                      {{ t('settings.siteBaseUrlHint') }}
+                    </p>
+                    <UInput
+                      v-model="siteBaseUrlDraft"
+                      :placeholder="t('settings.siteBaseUrlPlaceholder')"
+                      class="w-full font-mono text-sm"
+                    />
+                    <p
+                      v-if="settings.siteBaseUrl"
+                      class="truncate text-xs text-muted"
+                      :title="settings.siteBaseUrl"
+                    >
+                      {{ t('settings.siteBaseUrlActive', { url: settings.siteBaseUrl }) }}
+                    </p>
+                  </div>
+
+                  <div class="space-y-1.5">
+                    <div class="flex flex-wrap items-center gap-2">
+                      <label class="text-sm font-medium">{{ t('settings.imageBaseUrl') }}</label>
+                      <UBadge
+                        :color="sourceBadge(settings.imageBaseUrlSource).color"
+                        variant="subtle"
+                        size="xs"
+                      >
+                        {{ sourceBadge(settings.imageBaseUrlSource).label }}
+                      </UBadge>
+                    </div>
+                    <p class="text-xs leading-relaxed text-muted">
+                      {{ t('settings.imageBaseUrlHint') }}
+                    </p>
+                    <UInput
+                      v-model="imageBaseUrlDraft"
+                      :placeholder="t('settings.imageBaseUrlPlaceholder')"
+                      class="w-full font-mono text-sm"
+                    />
+                    <p
+                      v-if="settings.imageBaseUrl"
+                      class="truncate text-xs text-muted"
+                      :title="settings.imageBaseUrl"
+                    >
+                      {{ t('settings.imageBaseUrlActive', { url: settings.imageBaseUrl }) }}
+                    </p>
+                  </div>
+                </div>
+
+                <div
+                  v-else
+                  class="space-y-1.5"
+                >
+                  <div class="flex flex-wrap items-center gap-2">
+                    <label class="text-sm font-medium">{{ t('settings.imageBaseUrl') }}</label>
+                    <UBadge
+                      :color="sourceBadge(settings.imageBaseUrlSource).color"
+                      variant="subtle"
+                      size="xs"
+                    >
+                      {{ sourceBadge(settings.imageBaseUrlSource).label }}
+                    </UBadge>
+                  </div>
+                  <p class="text-xs leading-relaxed text-muted">
+                    {{ t('settings.imageBaseUrlSingleHint') }}
+                  </p>
+                  <UInput
+                    v-model="imageBaseUrlDraft"
+                    :placeholder="t('settings.imageBaseUrlPlaceholder')"
+                    class="w-full font-mono text-sm"
+                  />
+                  <p
+                    v-if="settings.imageBaseUrl"
+                    class="truncate text-xs text-muted"
+                    :title="settings.imageBaseUrl"
+                  >
+                    {{ t('settings.imageBaseUrlActive', { url: settings.imageBaseUrl }) }}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div class="settings-referer-section space-y-1.5 rounded-xl border border-default/60 bg-muted/10 p-4 sm:p-5">
+              <div class="flex flex-wrap items-center gap-2">
+                <h3 class="text-sm font-semibold">
+                  {{ t('settings.accessControl') }}
+                </h3>
+                <UBadge
+                  :color="sourceBadge(settings.refererSource).color"
+                  variant="subtle"
+                  size="xs"
+                >
+                  {{ sourceBadge(settings.refererSource).label }}
+                </UBadge>
+              </div>
+              <p class="text-xs leading-relaxed text-muted">
+                {{ t('settings.refererHint') }}
+              </p>
+              <UTextarea
+                v-model="refererDraft"
+                :placeholder="t('settings.refererPlaceholder')"
+                :rows="4"
+                :autoresize="false"
+                class="settings-referer-field w-full font-mono text-sm"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div
+          v-else
+          class="flex justify-center py-12"
+        >
+          <UIcon
+            name="i-lucide-loader-circle"
+            class="size-6 animate-spin text-muted"
+          />
+        </div>
+
+        <div
+          v-if="settings"
+          class="flex flex-col gap-3 border-t border-default px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6"
+        >
+          <div class="flex min-w-0 items-center gap-2 text-xs text-muted">
+            <UIcon
+              name="i-lucide-key-round"
+              class="size-3.5 shrink-0"
+            />
+            <span class="min-w-0">
+              {{ t('settings.apiTokenLine', { source: tokenSourceText(settings.tokenSource) }) }}
+              <a
+                :href="releaseCheck?.updateAvailable && releaseCheck.releaseUrl
+                  ? releaseCheck.releaseUrl
+                  : 'https://github.com/O96u/PicHost/releases'"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="inline-flex items-center gap-0.5 underline-offset-2 hover:underline"
+                :class="releaseCheck?.updateAvailable ? 'text-warning' : 'text-primary'"
+                :title="t('settings.viewReleases')"
+              >
+                v{{ settings.appVersion }}
+                <UIcon
+                  name="i-lucide-external-link"
+                  class="size-3 opacity-70"
+                />
+              </a>
+              <template v-if="releaseCheck?.updateAvailable && releaseCheck.latestVersion">
+                ·
+                <a
+                  :href="releaseCheck.releaseUrl || 'https://github.com/O96u/PicHost/releases'"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-warning hover:underline"
+                >
+                  {{ t('settings.updateAvailable', { version: `v${releaseCheck.latestVersion}` }) }}
+                </a>
+              </template>
+              <template v-if="hasServerChanges">
+                · <span class="text-warning">{{ t('settings.unsavedChanges') }}</span>
+              </template>
+            </span>
+          </div>
+          <div class="flex flex-wrap items-center justify-end gap-2">
+            <UButton
+              :label="t('settings.manageToken')"
+              icon="i-lucide-external-link"
+              variant="outline"
+              color="neutral"
+              size="sm"
+              to="/api"
+            />
+            <UButton
+              :label="t('common.save')"
+              icon="i-lucide-save"
+              size="sm"
+              :loading="savingServer"
+              :disabled="!hasServerChanges"
+              @click="saveServerSettings"
+            />
+          </div>
+        </div>
+      </section>
+    </AppShell>
+  </div>
+</template>
+
+<style scoped>
+.settings-referer-section {
+  min-width: 0;
+}
+
+.settings-referer-field :deep(textarea),
+.settings-referer-field :deep(> div) {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
+.settings-referer-field :deep(textarea) {
+  min-height: 5.5rem;
+  resize: none;
+}
+</style>

app/pages/setup.vue

@@ -7,26 +7,50 @@ const route = useRoute()
 const router = useRouter()
 const { setup, migrate, fetchStatus } = useAuth()
 const toast = useToast()
+const { t, locale } = useI18n()
 
-const isMigrate = computed(() => route.query.migrate === '1')
+const domainSeparationDocUrl = computed(() =>
+  locale.value === 'en'
+    ? 'https://o96u.github.io/PicHost/en/guide/domain-separation'
+    : 'https://o96u.github.io/PicHost/guide/domain-separation'
+)
+
+const needsMigration = ref(false)
+const isMigrate = computed(() => needsMigration.value || route.query.migrate === '1')
 
 const username = ref('')
 const password = ref('')
 const confirmPassword = ref('')
 const allowRegistration = ref(false)
+const domainSeparation = ref(false)
+const siteBaseUrl = ref('')
+const imageBaseUrl = ref('')
 const loading = ref(false)
 
-const canSubmit = computed(() =>
+const canSubmit = computed(() => {
-  Boolean(username.value && password.value && confirmPassword.value)
+  if (!username.value || !password.value || !confirmPassword.value) return false
-  && password.value === confirmPassword.value
+  if (password.value !== confirmPassword.value) return false
-  && isPasswordValid(password.value)
+  if (!isPasswordValid(password.value)) return false
-  && AUTH_USERNAME_PATTERN.test(username.value.trim())
+  if (!AUTH_USERNAME_PATTERN.test(username.value.trim())) return false
-)
+  if (domainSeparation.value) {
+    return Boolean(siteBaseUrl.value.trim() && imageBaseUrl.value.trim())
+  }
+  return true
+})
 
 onMounted(async () => {
   const status = await fetchStatus()
+  needsMigration.value = status.needsMigration
+  if (status.legacyMode && !status.needsMigration) {
+    await router.replace('/')
+    return
+  }
   if (status.initialized && !status.needsMigration) {
     await router.replace('/')
+    return
+  }
+  if (import.meta.client) {
+    siteBaseUrl.value = window.location.origin
   }
 })
 
@@ -34,7 +58,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
   }
 
@@ -43,7 +67,10 @@ async function submit() {
     const payload = {
       username: username.value.trim(),
       password: password.value,
-      allowRegistration: allowRegistration.value
+      allowRegistration: allowRegistration.value,
+      domainSeparation: domainSeparation.value,
+      siteBaseUrl: domainSeparation.value ? siteBaseUrl.value.trim() : undefined,
+      imageBaseUrl: domainSeparation.value ? imageBaseUrl.value.trim() : undefined
     }
     const result = isMigrate.value
       ? await migrate(payload)
@@ -51,7 +78,7 @@ async function submit() {
 
     if (result.ok) {
       toast.add({
-        title: isMigrate.value ? '账号迁移完成' : '初始化完成',
+        title: isMigrate.value ? t('setup.migrateSuccess') : t('setup.initSuccess'),
         color: 'success'
       })
       await router.replace('/')
@@ -65,8 +92,11 @@ async function submit() {
 </script>
 
 <template>
-  <div class="flex min-h-screen items-center justify-center bg-muted/30 p-4 sm:p-6">
+  <div class="relative flex min-h-screen items-center justify-center bg-muted/30 p-4 sm:p-6">
-    <div class="w-full max-w-sm rounded-2xl border border-default bg-elevated p-6 shadow-lg sm:p-8">
+    <div class="absolute top-4 right-4">
+      <AuthPagePreferences />
+    </div>
+    <div class="w-full max-w-sm rounded-2xl border border-default bg-elevated p-6 shadow-lg sm:max-w-md sm:p-8">
       <div class="mb-8 space-y-3 text-center">
         <div class="mx-auto inline-flex items-center justify-center">
           <img
@@ -91,7 +121,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 +135,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 +153,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="t('setup.passwordPlaceholder')"
-            placeholder="设置登录密码"
             autocomplete="new-password"
-            size="lg"
-            class="w-full"
-            :ui="{ root: 'w-full' }"
           />
           <PasswordStrength :password="password" />
         </div>
@@ -143,28 +169,75 @@ async function submit() {
             for="setup-confirm"
             class="block text-sm font-medium text-default"
           >
-            确认密码
+            {{ t('auth.confirmPassword') }}
           </label>
-          <UInput
+          <PasswordInput
             id="setup-confirm"
             v-model="confirmPassword"
-            type="password"
+            :placeholder="t('setup.confirmPlaceholder')"
-            placeholder="再次输入密码"
             autocomplete="new-password"
-            size="lg"
-            class="w-full"
-            :ui="{ root: 'w-full' }"
           />
         </div>
 
         <label class="flex cursor-pointer items-center gap-2 text-sm text-default">
           <UCheckbox v-model="allowRegistration" />
-          允许其他用户注册
+          {{ t('setup.allowRegistration') }}
         </label>
 
+        <div class="space-y-3 rounded-xl border border-default bg-muted/20 p-4">
+          <label class="flex cursor-pointer items-start gap-2.5">
+            <UCheckbox
+              v-model="domainSeparation"
+              class="mt-0.5"
+            />
+            <span>
+              <span class="block text-sm font-medium">{{ t('setup.domainSeparation') }}</span>
+              <span class="mt-1 block text-xs leading-relaxed text-muted">
+                {{ t('setup.domainSeparationHint') }}
+              </span>
+            </span>
+          </label>
+
+          <template v-if="domainSeparation">
+            <p class="text-xs leading-relaxed text-warning">
+              {{ t('setup.domainSeparationProxyHint') }}
+              <a
+                :href="domainSeparationDocUrl"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="text-primary hover:underline"
+              >
+                {{ t('setup.domainSeparationProxyExample') }}
+              </a>
+            </p>
+            <div class="space-y-2">
+              <label class="text-sm">{{ t('setup.siteBaseUrl') }}</label>
+              <p class="text-xs text-muted">
+                {{ t('setup.siteBaseUrlHint') }}
+              </p>
+              <UInput
+                v-model="siteBaseUrl"
+                :placeholder="t('setup.siteBaseUrlPlaceholder')"
+                class="w-full font-mono text-sm"
+              />
+            </div>
+            <div class="space-y-2">
+              <label class="text-sm">{{ t('setup.imageBaseUrl') }}</label>
+              <p class="text-xs text-muted">
+                {{ t('setup.imageBaseUrlHint') }}
+              </p>
+              <UInput
+                v-model="imageBaseUrl"
+                :placeholder="t('setup.imageBaseUrlPlaceholder')"
+                class="w-full font-mono text-sm"
+              />
+            </div>
+          </template>
+        </div>
+
         <UButton
           type="submit"
-          :label="isMigrate ? '完成迁移' : '创建并进入'"
+          :label="isMigrate ? t('setup.migrateSubmit') : t('setup.initSubmit')"
           icon="i-lucide-user-plus"
           size="lg"
           block

app/pages/stats.vue

@@ -12,17 +12,7 @@ interface StatsResponse {
   bySource: {
     web: number
     api: number
-    twikoo: number
   }
-  byFolder: Array<{
-    folder: string
-    count: number
-    bytes: number
-  }>
-  byFolderUploads: Array<{
-    folder: string
-    count: number
-  }>
 }
 
 const {
@@ -35,19 +25,26 @@ const {
   activeSearch,
   listSummary,
   refreshList,
-  initializeList,
+  fetchList,
-  setActiveFolder,
+  fetchSearch,
+  fetchTotal,
   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())
@@ -55,65 +52,55 @@ const deleteModalOpen = ref(false)
 const deleteTargetKeys = ref<string[]>([])
 const batchDeleting = ref(false)
 const showScrollTop = ref(false)
-const currentFolder = ref('all')
+const currentStorage = ref('all')
-const folderOptions = ref<string[]>(['images'])
 
-const folderSelectItems = computed(() => [
+const storageSelectItems = computed(() => [
-  { label: '全部', value: 'all' },
+  { label: t('stats.filterStorageAll'), value: 'all' },
-  ...folderOptions.value.map(folder => ({ label: folder, value: folder }))
+  ...storageBackendOptions.value.map(backend => ({
+    label: backend.name,
+    value: backend.id
+  }))
 ])
 
 const selectedCount = computed(() => selectedKeys.value.size)
 
-const FOLDER_CHART_COLORS = [
+const SOURCE_CHART_COLORS = [
   'var(--ui-primary)',
-  '#10b981',
+  '#10b981'
-  '#f59e0b',
-  '#8b5cf6',
-  '#ec4899',
-  '#06b6d4'
 ]
 
-const folderUploadItems = computed(() =>
+const sourceUploadItems = computed(() => {
-  (stats.value?.byFolderUploads ?? []).map((item, index) => ({
+  const bySource = stats.value?.bySource
-    key: item.folder,
+  if (!bySource) return []
-    label: item.folder,
+  return [
-    count: item.count,
+    { key: 'web', label: t('stats.sourceWeb'), count: bySource.web, color: SOURCE_CHART_COLORS[0]! },
-    color: FOLDER_CHART_COLORS[index % FOLDER_CHART_COLORS.length]!
+    { key: 'api', label: t('stats.sourceApi'), count: bySource.api, color: SOURCE_CHART_COLORS[1]! }
-  }))
+  ]
+})
+
+const sourceUploadTotal = computed(() =>
+  sourceUploadItems.value.reduce((sum, item) => sum + item.count, 0)
 )
 
-const donutSegments = computed(() =>
+function sourcePercent(count: number) {
-  folderUploadItems.value.map(item => ({
+  const total = sourceUploadTotal.value
-    label: item.label,
+  if (!total) return 0
-    value: item.count,
+  return Math.round((count / total) * 100)
-    color: item.color
+}
-  }))
-)
-
-const folderStats = computed(() => stats.value?.byFolder ?? [])
-
-const folderMaxBytes = computed(() =>
-  Math.max(...folderStats.value.map(item => item.bytes), 1)
-)
-
-const uploadChartTotal = computed(() =>
-  folderUploadItems.value.reduce((sum, item) => sum + item.count, 0)
-)
 
 const statCards = computed(() => {
   const s = stats.value
   const base = [
-    { label: '今日上传', value: s?.uploadToday ?? '—' },
+    { label: t('stats.uploadToday'), value: s?.uploadToday ?? '—' },
-    { label: '本月上传', value: s?.uploadMonth ?? '—' },
+    { label: t('stats.uploadMonth'), value: s?.uploadMonth ?? '—' },
-    { label: '累计上传', value: s?.uploadTotal ?? '—' },
+    { label: t('stats.uploadTotal'), value: s?.uploadTotal ?? '—' },
-    { label: '当前库存', value: s?.storedCount ?? '—' },
+    { label: t('stats.storedCount'), value: s?.storedCount ?? '—' },
-    { label: '今日删除', value: s?.deleteToday ?? '—' },
+    { label: t('stats.deleteToday'), value: s?.deleteToday ?? '—' },
-    { label: '本月删除', value: s?.deleteMonth ?? '—' },
+    { label: t('stats.deleteMonth'), value: s?.deleteMonth ?? '—' },
     isAdmin.value
-      ? { label: '注册用户数量', value: s?.userCount ?? '—' }
+      ? { label: t('stats.userCount'), value: s?.userCount ?? '—' }
-      : { label: '累计删除', value: s?.deleteTotal ?? '—' },
+      : { label: t('stats.deleteTotal'), value: s?.deleteTotal ?? '—' },
-    { label: '累计上传体积', value: s ? formatFileSize(s.uploadBytesTotal) : '—' }
+    { label: t('stats.uploadBytes'), value: s ? formatFileSize(s.uploadBytesTotal) : '—' }
   ]
   return base
 })
@@ -126,17 +113,6 @@ function scrollToTop() {
   window.scrollTo({ top: 0, behavior: 'smooth' })
 }
 
-function folderPercent(bytes: number) {
-  return Math.round((bytes / folderMaxBytes.value) * 100)
-}
-
-async function loadFolders() {
-  const data = await $fetch<{ folders: string[] }>('/api/folders', {
-    credentials: 'include'
-  })
-  folderOptions.value = [...data.folders]
-}
-
 async function fetchStats() {
   stats.value = await $fetch<StatsResponse>('/api/stats', {
     credentials: 'include'
@@ -150,7 +126,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,27 +137,49 @@ async function refreshGallery() {
   if (!isAuthenticated.value) return
   selectedKeys.value = new Set()
   try {
-    await Promise.all([refreshList(), loadFolders()])
+    await Promise.all([refreshList(), loadStorageBackendOptions()])
+    currentStorage.value = activeStorageBackend.value
   } catch (error: unknown) {
     handleAuthError(error)
   }
 }
 
-async function refreshAll() {
+async function reloadGallery() {
-  if (!isAuthenticated.value) return
+  if (activeSearch.value) {
-  currentFolder.value = 'all'
+    await fetchSearch(galleryPage.value)
-  await Promise.all([
+  } else {
-    refreshStats(),
+    await fetchList(galleryPage.value)
-    initializeList('all').then(() => loadFolders())
+  }
-  ])
+  await fetchTotal()
 }
 
-async function handleFolderChange(folder: string) {
+async function refreshAll() {
   if (!isAuthenticated.value) return
-  currentFolder.value = folder
+  selectedKeys.value = new Set()
+  statsLoading.value = true
+  try {
+    await Promise.all([
+      fetchStats(),
+      reloadGallery(),
+      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 handleStorageChange(backendId: string) {
+  if (!isAuthenticated.value) return
+  currentStorage.value = backendId
   selectedKeys.value = new Set()
   try {
-    await setActiveFolder(folder)
+    await setActiveStorageBackend(backendId)
   } catch (error: unknown) {
     handleAuthError(error)
   }
@@ -212,7 +210,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,15 +247,19 @@ 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()
+      await reloadGallery()
+      if (items.value.length === 0 && galleryPage.value > 1) {
+        await goToPage(galleryPage.value - 1)
+      }
     }
 
     if (failed.length) {
       toast.add({
-        title: `${failed.length} 张图片删除失败`,
+        title: t('stats.deletePartialFail', { n: failed.length }),
         color: 'error'
       })
     }
@@ -267,7 +269,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 +294,9 @@ onMounted(async () => {
     return
   }
   await checkSession()
+  if (isAuthenticated.value) {
+    await refreshAll()
+  }
 })
 
 onUnmounted(() => {
@@ -322,7 +327,7 @@ watch(isAuthenticated, async (authed, prev) => {
           class="size-8 animate-spin"
         />
         <p class="text-sm">
-          正在验证登录状态…
+          {{ t('common.loadingSession') }}
         </p>
       </div>
     </div>
@@ -330,86 +335,82 @@ 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 class="flex items-start justify-between gap-3">
-        <div>
+        <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="ghost"
-          variant="outline"
+          color="neutral"
-          :loading="statsLoading || galleryLoading"
+          size="sm"
+          class="mt-0.5 shrink-0"
+          :aria-label="t('common.refresh')"
+          :loading="pageRefreshing"
           @click="refreshAll"
         />
       </div>
 
-      <section class="grid grid-cols-2 gap-3 lg:grid-cols-4">
+      <section class="grid gap-3 lg:grid-cols-3 lg:items-stretch">
-        <div
+        <div class="grid grid-cols-2 gap-3 lg:col-span-2 lg:grid-cols-4">
-          v-for="item in statCards"
-          :key="item.label"
-          class="rounded-xl border border-default bg-elevated p-4"
-        >
-          <p class="text-xs text-muted">
-            {{ item.label }}
-          </p>
-          <p class="mt-1 text-2xl font-semibold tabular-nums">
-            {{ item.value }}
-          </p>
-        </div>
-      </section>
-
-      <section class="grid gap-4 lg:grid-cols-2">
-        <div class="rounded-xl border border-default bg-elevated p-4">
-          <h2 class="mb-3 text-sm font-medium text-muted">
-            上传目录分布
-          </h2>
           <div
-            v-if="!uploadChartTotal"
+            v-for="item in statCards"
-            class="py-6 text-center text-xs text-muted"
+            :key="item.label"
+            class="rounded-xl border border-default bg-elevated p-4"
           >
-            暂无数据
+            <p class="text-xs text-muted">
+              {{ item.label }}
+            </p>
+            <p class="mt-1 text-2xl font-semibold tabular-nums">
+              {{ item.value }}
+            </p>
           </div>
-          <StatsDonut
-            v-else
-            :segments="donutSegments"
-            :size="88"
-          />
         </div>
 
-        <div class="rounded-xl border border-default bg-elevated p-4">
+        <div class="flex h-full min-h-0 flex-col rounded-xl border border-default bg-elevated p-4 lg:col-span-1">
-          <h2 class="mb-3 text-sm font-medium text-muted">
+          <h2 class="shrink-0 text-sm font-medium text-muted">
-            目录占用
+            {{ t('stats.sourceDistribution') }}
           </h2>
           <div
-            v-if="!folderStats.length"
+            v-if="!sourceUploadTotal"
-            class="py-6 text-center text-xs text-muted"
+            class="flex flex-1 items-center justify-center text-center text-xs text-muted"
           >
-            暂无数据
+            {{ t('stats.noData') }}
           </div>
           <ul
             v-else
-            class="space-y-2.5"
+            class="mt-4 flex min-h-0 flex-1 flex-col"
           >
             <li
-              v-for="item in folderStats"
+              v-for="item in sourceUploadItems"
-              :key="item.folder"
+              :key="item.key"
+              class="flex flex-1 flex-col justify-center gap-2 py-1"
             >
-              <div class="mb-1 flex items-center justify-between gap-2 text-xs">
+              <div class="flex items-center justify-between gap-2 text-xs">
-                <span class="font-medium">{{ item.folder }}</span>
+                <span class="flex min-w-0 items-center gap-1.5">
-                <span class="tabular-nums text-muted">
+                  <span
-                  {{ item.count }} 张 · {{ formatFileSize(item.bytes) }}
+                    class="size-2 shrink-0 rounded-full"
+                    :style="{ background: item.color }"
+                  />
+                  <span class="truncate">{{ item.label }}</span>
+                </span>
+                <span class="shrink-0 tabular-nums text-muted">
+                  {{ item.count }} ({{ sourcePercent(item.count) }}%)
                 </span>
               </div>
-              <div class="h-1.5 overflow-hidden rounded-full bg-muted/50">
+              <div class="h-2 rounded-full bg-muted/40">
                 <div
-                  class="h-full rounded-full bg-primary/70"
+                  class="h-full rounded-full transition-[width]"
-                  :style="{ width: `${Math.max(folderPercent(item.bytes), item.bytes ? 4 : 0)}%` }"
+                  :style="{
+                    width: `${sourcePercent(item.count)}%`,
+                    backgroundColor: item.color
+                  }"
                 />
               </div>
             </li>
@@ -418,86 +419,85 @@ watch(isAuthenticated, async (authed, prev) => {
       </section>
 
       <section class="space-y-4">
-        <form
+        <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-3">
-          class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+          <div class="min-w-0">
-          @submit.prevent="handleSearch"
-        >
-          <div class="min-w-0 shrink-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">
+          <form
-            <div class="flex items-center gap-1.5">
+            class="flex flex-wrap items-center justify-end gap-2"
-              <span class="text-xs text-muted shrink-0">目录</span>
+            @submit.prevent="handleSearch"
-              <USelect
+          >
-                v-model="currentFolder"
-                :items="folderSelectItems"
-                class="w-28"
-                @update:model-value="handleFolderChange"
-              />
-            </div>
-
-            <UInput
-              v-model="searchQuery"
-              icon="i-lucide-search"
-              placeholder="搜索文件名"
-              class="w-40 sm:w-48"
-              size="sm"
-              :disabled="galleryLoading"
-            />
-
-            <UButton
-              type="submit"
-              label="搜索"
-              size="sm"
-              :loading="galleryLoading"
-            />
-            <UButton
-              v-if="activeSearch"
-              type="button"
-              label="清除"
-              size="sm"
-              variant="ghost"
-              color="neutral"
-              @click="clearSearch"
-            />
-
-            <UButton
-              type="button"
-              icon="i-lucide-refresh-cw"
-              label="刷新"
-              variant="outline"
-              size="sm"
-              :loading="galleryLoading"
-              @click="refreshGallery"
-            />
             <UBadge
               v-if="selectedCount"
               color="primary"
               variant="subtle"
+              class="shrink-0"
             >
-              已选 {{ selectedCount }}
+              {{ t('stats.selected', { n: selectedCount }) }}
             </UBadge>
+            <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>
+              <span class="hidden sm:inline">{{ t('stats.batchDelete') }}</span>
-        </form>
+            </UButton>
+          </form>
+        </div>
 
         <div
           v-if="galleryLoading"
@@ -512,6 +512,8 @@ watch(isAuthenticated, async (authed, prev) => {
 
         <ImageGrid
           v-else
+          :show-key="false"
+          show-storage
           :items="items"
           :selected-keys="selectedKeys"
           :deleting-keys="deletingKeys"
@@ -524,7 +526,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 +542,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"

app/pages/storage.vue

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

app/types/image.ts

@@ -36,6 +36,12 @@ export interface ImageItem {
     userId: number | null
     username: string
   }
+  /** 图片所在存储后端（统计/管理列表） */
+  storage?: {
+    id: string
+    name: string
+    type: 'local' | 's3'
+  }
 }
 
 export interface UploadErrorItem {

app/types/logs.ts

@@ -0,0 +1,36 @@
+export type LogAction = 'upload' | 'delete'
+export type LogSource = 'web' | 'api'
+
+export interface ActivityLogStorage {
+  id: string
+  name: string
+  type: string
+}
+
+export interface ActivityLogItem {
+  id: number
+  action: LogAction
+  key: string
+  originalName: string
+  size: number
+  contentType: string
+  source: LogSource
+  userId: number | null
+  username: string | null
+  storage: ActivityLogStorage | null
+  createdAt: string
+}
+
+export interface ActivityLogListResponse {
+  items: ActivityLogItem[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+  summary: {
+    total: number
+    upload: number
+    delete: number
+  }
+  users?: Array<{ id: number, username: string }>
+}

app/types/storage.ts

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

app/utils/password-strength.ts

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

docker-compose.yml

@@ -4,14 +4,13 @@ services:
     # 飞牛 Docker 对 Docker Hub 的「更新镜像」支持更好
     image: muxui/pichost:latest
     pull_policy: always
-    # 备用：GitHub Container Registry
-    # image: ghcr.io/O96u/pichost:latest
     container_name: pichost
     restart: unless-stopped
     ports:
       - "6892:6892"
     # 首次访问 Web 引导创建管理员，无需预先配置环境变量
     # 可选：environment 中设置 API_UPLOAD_TOKEN、ALLOWED_REFERER_HOSTS 等
+    # 运维：docker exec pichost reset-password | migrate [--apply]
     volumes:
       # 冒号左边改成 NAS 上的实际存图目录（飞牛示例：/vol1/1000/pichost-data）
       - ./data:/data

docker-entrypoint.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+set -e
+
+if [ "$1" = "reset-password" ]; then
+  exec node /app/server/cli/reset-password.mjs "${@:2}"
+fi
+
+if [ "$1" = "migrate" ]; then
+  exec node /app/server/cli/migrate-to-single-images.mjs "${@:2}"
+fi
+
+exec node /app/.output/server/index.mjs "$@"

docs-site/.vitepress/config.ts

@@ -0,0 +1,129 @@
+import { defineConfig } from 'vitepress'
+
+const docsBase = 'https://o96u.github.io/PicHost'
+
+const zhSidebar = [
+  {
+    text: '开始',
+    items: [
+      { text: '文档首页', link: '/guide/' },
+      { text: '快速开始', link: '/guide/getting-started' },
+      { text: '本地开发', link: '/guide/local-dev' }
+    ]
+  },
+  {
+    text: '部署与配置',
+    items: [
+      { text: '环境变量', link: '/guide/configuration' },
+      { text: '反向代理', link: '/guide/reverse-proxy' },
+      { text: '双域名分离', link: '/guide/domain-separation' }
+    ]
+  },
+  {
+    text: '使用',
+    items: [
+      { text: '存储', link: '/guide/storage' },
+      { text: '用户与权限', link: '/guide/users-and-permissions' },
+      { text: 'API', link: '/guide/api' },
+      { text: 'Twikoo', link: '/guide/twikoo' }
+    ]
+  },
+  {
+    text: '升级',
+    items: [
+      { text: 'v1.2 迁移', link: '/guide/migration' },
+      { text: '常见问题', link: '/guide/faq' }
+    ]
+  }
+]
+
+const enSidebar = [
+  {
+    text: 'Getting started',
+    items: [
+      { text: 'Overview', link: '/en/guide/' },
+      { text: 'Quick start', link: '/en/guide/getting-started' },
+      { text: 'Local development', link: '/en/guide/local-dev' }
+    ]
+  },
+  {
+    text: 'Deploy & configure',
+    items: [
+      { text: 'Environment variables', link: '/en/guide/configuration' },
+      { text: 'Reverse proxy', link: '/en/guide/reverse-proxy' },
+      { text: 'Dual-domain separation', link: '/en/guide/domain-separation' }
+    ]
+  },
+  {
+    text: 'Usage',
+    items: [
+      { text: 'Storage', link: '/en/guide/storage' },
+      { text: 'Users & permissions', link: '/en/guide/users-and-permissions' },
+      { text: 'API', link: '/en/guide/api' },
+      { text: 'Twikoo', link: '/en/guide/twikoo' }
+    ]
+  },
+  {
+    text: 'Upgrade',
+    items: [
+      { text: 'v1.2 migration', link: '/en/guide/migration' },
+      { text: 'FAQ', link: '/en/guide/faq' }
+    ]
+  }
+]
+
+export default defineConfig({
+  base: '/PicHost/',
+  title: 'PicHost',
+  description: '自托管图床文档 · Self-hosted image hosting docs',
+  head: [['link', { rel: 'icon', href: '/PicHost/favicon.ico' }]],
+  locales: {
+    root: {
+      label: '简体中文',
+      lang: 'zh-CN',
+      themeConfig: {
+        nav: [
+          { text: '指南', link: '/guide/getting-started' },
+          { text: 'API', link: '/guide/api' },
+          { text: 'GitHub', link: 'https://github.com/O96u/PicHost' }
+        ],
+        sidebar: zhSidebar,
+        docFooter: { prev: '上一页', next: '下一页' },
+        outline: { label: '本页目录' },
+        lastUpdated: { text: '最后更新' },
+        returnToTopLabel: '回到顶部',
+        sidebarMenuLabel: '菜单',
+        darkModeSwitchLabel: '主题',
+        langMenuLabel: '语言'
+      }
+    },
+    en: {
+      label: 'English',
+      lang: 'en-US',
+      link: '/en/',
+      themeConfig: {
+        nav: [
+          { text: 'Guide', link: '/en/guide/getting-started' },
+          { text: 'API', link: '/en/guide/api' },
+          { text: 'GitHub', link: 'https://github.com/O96u/PicHost' }
+        ],
+        sidebar: enSidebar,
+        docFooter: { prev: 'Previous', next: 'Next' },
+        outline: { label: 'On this page' },
+        lastUpdated: { text: 'Last updated' },
+        returnToTopLabel: 'Back to top',
+        sidebarMenuLabel: 'Menu',
+        darkModeSwitchLabel: 'Appearance',
+        langMenuLabel: 'Language'
+      }
+    }
+  },
+  themeConfig: {
+    socialLinks: [{ icon: 'github', link: 'https://github.com/O96u/PicHost' }],
+    search: { provider: 'local' },
+    editLink: {
+      pattern: `${docsBase}/edit/main/docs-site/:path`,
+      text: '在 GitHub 上编辑此页'
+    }
+  }
+})

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

@@ -0,0 +1,6 @@
+:root {
+  --vp-c-brand-1: #22c55e;
+  --vp-c-brand-2: #16a34a;
+  --vp-c-brand-3: #15803d;
+  --vp-c-brand-soft: rgba(34, 197, 94, 0.14);
+}

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

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

docs-site/copy-screenshots.mjs

@@ -0,0 +1,16 @@
+import { cpSync, existsSync, mkdirSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '..')
+const src = join(root, 'docs', 'screenshots')
+const dest = join(root, 'docs-site', 'public', 'screenshots')
+
+if (!existsSync(src)) {
+  console.error(`Screenshot source missing: ${src}`)
+  process.exit(1)
+}
+
+mkdirSync(dest, { recursive: true })
+cpSync(src, dest, { recursive: true })
+console.log(`Copied screenshots to ${dest}`)

docs-site/en/guide/api.md

@@ -0,0 +1,99 @@
+# API
+
+PicHost exposes REST endpoints and a Twikoo-compatible upload. After deployment, open the in-app **API** page for your token and copyable cURL snippets.
+
+## Authentication
+
+All REST calls use:
+
+```http
+Auth-Token: YOUR_TOKEN
+```
+
+| Token type | How to obtain | Notes |
+| ---------- | ------------- | ----- |
+| **Global** | Admin **API** page or `API_UPLOAD_TOKEN` env | Env wins and blocks UI regenerate |
+| **Personal** | Each user’s **API** page | Uploads belong to that user |
+
+Form uploads may use field `token` (Twikoo protocol).
+
+## Endpoints
+
+### 1. Upload images
+
+`POST /api/images/upload`
+
+Upload one or more images via `image`; also accepts `file`, `files`. Stored under `images/`.
+
+```bash
+curl -X POST "https://admin.example.com/api/images/upload" \
+  -H "Auth-Token: YOUR_TOKEN" \
+  -F "image=@./demo.png"
+```
+
+### 2. List images
+
+`GET /api/images`
+
+Paginated gallery. `limit` default 20, max 100.
+
+```bash
+curl "https://admin.example.com/api/images?limit=20&page=1" \
+  -H "Auth-Token: YOUR_TOKEN"
+```
+
+### 3. Search images
+
+`GET /api/images/search`
+
+Search by filename or path; `q` is required.
+
+```bash
+curl "https://admin.example.com/api/images/search?q=demo&limit=20&page=1" \
+  -H "Auth-Token: YOUR_TOKEN"
+```
+
+### 4. Delete image
+
+`DELETE /api/images`
+
+Delete by `key` (storage path, e.g. `images/2026/08/xxx.webp`).
+
+```bash
+curl -X DELETE "https://admin.example.com/api/images?key=images/2026/08/xxxx.webp" \
+  -H "Auth-Token: YOUR_TOKEN"
+```
+
+### 5. Batch delete
+
+`POST /api/images/batch-delete`
+
+JSON body: `{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}`
+
+```bash
+curl -X POST "https://admin.example.com/api/images/batch-delete" \
+  -H "Auth-Token: YOUR_TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{"keys":["images/2026/08/a.webp","images/2026/08/b.webp"]}'
+```
+
+## Errors
+
+REST responses are JSON with `code` and `message` (`UNAUTHORIZED`, `FORBIDDEN`, `INVALID_REQUEST`, etc.). Twikoo uses EasyImage-compatible JSON.
+
+## Visibility
+
+- User token: list/search/delete own images only
+- Admin token: all images
+- Global token uploads belong to admin
+
+See [Users & permissions](./users-and-permissions.md).
+
+## Twikoo
+
+`POST /api/index.php` — [Twikoo](./twikoo.md).
+
+## See also
+
+- [Environment variables](./configuration.md)
+- [Reverse proxy](./reverse-proxy.md)

docs-site/en/guide/configuration.md

@@ -0,0 +1,101 @@
+# Environment variables
+
+Configure PicHost via environment variables (Docker / `.env`) or the in-app **Settings** page. Most values prefer **SQLite** when saved; some env vars override or lock UI editing.
+
+## Priority overview
+
+| Setting | Priority (high → low) | Env overrides UI |
+| ------- | --------------------- | ---------------- |
+| API upload token | Env → SQLite | **Yes** (cannot regenerate in UI) |
+| WebP quality | SQLite → env → default 80 | No |
+| Referer whitelist | SQLite → env | No |
+| Site / image base URL | SQLite → env → request origin | No |
+| Hide `images/` prefix | SQLite → env → default false | No |
+| Date-based paths | SQLite → env → default true | No |
+| Global auto-delete days | SQLite → env → default 0 | No |
+
+## Variables
+
+### `API_UPLOAD_TOKEN`
+
+Token for external uploads (Twikoo, userscripts, blogs). Header: `Auth-Token: <token>`; form field `token` still works.
+
+- Generate in **API** page when unset
+- **When set in env, it wins** — UI shows “overridden by environment” and cannot regenerate
+- Alias: `NUXT_API_UPLOAD_TOKEN`
+
+### `ALLOWED_REFERER_HOSTS`
+
+Comma-separated Referer whitelist. Own hostnames are allowed automatically. Optional; configurable in Settings.
+
+### `SITE_BASE_URL` / `IMAGE_BASE_URL`
+
+- **Site URL**: admin UI, API, Twikoo upload
+- **Image URL**: copied links and public image URLs
+
+Single-domain: set `IMAGE_BASE_URL` only or leave empty (request origin). Dual-domain: hostnames must differ — see [Dual-domain separation](./domain-separation.md). Values must match proxy `server_name`; do not use `localhost`, IP, or unlisted hostnames for production admin access.
+
+### `HIDE_FOLDER_IN_URL`
+
+`true` hides the `images/` prefix in public URLs.
+
+### `STORAGE_USE_DATE_PATH` / `STORAGE_LAYOUT`
+
+- `true` or `STORAGE_LAYOUT=date` (default): `images/YYYY/MM/id.webp`
+- `false` or `STORAGE_LAYOUT=flat`: `images/id.webp`
+
+Also toggled in Settings.
+
+### `DATA_DIR`
+
+Root for images and SQLite. Default `./data`; `/data` in container.
+
+### `WEBP_QUALITY`
+
+Server WebP quality 1–100, default **80**.
+
+### `AUTO_DELETE_DAYS`
+
+Delete images older than N days globally; `0` disables. Affects **new uploads after enable** only. Also in Settings.
+
+### `DEV_BYPASS_ACCESS`
+
+Local dev only: `true` bypasses login. Never use in production.
+
+### Storage backends (optional)
+
+Admins usually add backends in **Storage** UI; env vars such as `STORAGE_BACKEND=s3` and `S3_*` are also supported. See [Storage](./storage.md).
+
+## Docker Compose example
+
+```yaml
+services:
+  pichost:
+    image: muxui/pichost:latest
+    ports:
+      - "6892:6892"
+    volumes:
+      - ./data:/data
+    environment:
+      SITE_BASE_URL: https://admin.example.com
+      IMAGE_BASE_URL: https://pic.example.com
+      API_UPLOAD_TOKEN: your-secret-token
+      WEBP_QUALITY: "85"
+```
+
+Restart the container after changing env vars.
+
+## Settings mapping
+
+| In-app setting | Environment variable |
+| -------------- | ---------------------- |
+| API token | `API_UPLOAD_TOKEN` |
+| Referer protection | `ALLOWED_REFERER_HOSTS` |
+| Site URL | `SITE_BASE_URL` |
+| Image URL | `IMAGE_BASE_URL` |
+| Hide folder prefix | `HIDE_FOLDER_IN_URL` |
+| Date-based paths | `STORAGE_USE_DATE_PATH` / `STORAGE_LAYOUT` |
+| WebP quality | `WEBP_QUALITY` |
+| Auto-delete | `AUTO_DELETE_DAYS` |
+
+Template: [`.env.example`](https://github.com/O96u/PicHost/blob/main/.env.example) in the repo root.

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

@@ -0,0 +1,167 @@
+# Dual-domain separation · Recommended deployment
+
+When admin and image domains are split, the admin UI, API, and public image links use different hostnames. PicHost enforces isolation in **application middleware**: the image host only serves image paths; other requests return 404.
+
+## Architecture
+
+**One Docker instance + two domains**, both **fully reverse-proxied** to port `6892` (isolation is handled by PicHost middleware; no path splitting in Nginx).
+
+| Domain | Purpose |
+| ------ | ------- |
+| `admin.example.com` | Admin UI, API, Twikoo upload |
+| `pic.example.com` | Public image links (non-image paths blocked) |
+
+Set during `/setup` or in **Settings**:
+
+- **Site URL**: `https://admin.example.com`
+- **Image URL**: `https://pic.example.com`
+
+## Nginx example
+
+```nginx
+# admin.example.com — admin + API
+server {
+  server_name admin.example.com;
+  location / {
+    proxy_pass http://127.0.0.1:6892;
+    proxy_set_header Host $host;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    client_max_body_size 12m;
+  }
+}
+
+# pic.example.com — same full proxy; PicHost middleware blocks non-image paths
+server {
+  server_name pic.example.com;
+  location / {
+    proxy_pass http://127.0.0.1:6892;
+    proxy_set_header Host $host;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+}
+
+# Default server: reject bare IP and unknown Host values (strongly recommended in production)
+server {
+  listen 443 ssl default_server;
+  listen 80 default_server;
+  server_name _;
+  return 444;
+}
+```
+
+> Caddy, NPM, and similar tools work the same: proxy both hostnames to `http://<host>:6892` and forward `Host` and `X-Forwarded-Proto`.
+
+## Security notes
+
+### Middleware only splits the two configured hostnames
+
+PicHost uses the request **Host** (and `X-Forwarded-Host` when proxied) to decide site vs image domain:
+
+- **Image host**: non-image paths (e.g. `/`, `/settings`) → 404
+- **Site host**: image URL paths (e.g. `/images/...`) → 404
+
+If the Host is **neither** the configured site nor image hostname (e.g. `localhost`, the server **public IP**, Cloudflare **Pages** `*.pages.dev`, **Workers** `*.workers.dev`, or any other unlisted name), **the app does not block the request today** — admin and API may still be reachable. This is not about hyphenated or long domain names; it is an extra entry point outside your dual-domain pair.
+
+**Production recommendations:**
+
+1. Configure `server_name` only for the site and image hosts; add a **default server** to reject other Host values and bare IP access (see Nginx example above)
+2. With Cloudflare **orange-cloud** DNS, restrict the origin firewall to **[Cloudflare IP ranges](https://www.cloudflare.com/ips/)** so traffic cannot bypass the CDN
+3. Sign in only on the **site hostname** from Settings; do not mix `localhost`, IP, or unlisted domains
+4. Do **not** put Cloudflare Pages / Workers in front of PicHost as a **full-site reverse proxy** (extra `pages.dev` / `workers.dev` entry points worsen this issue)
+5. PicHost **cannot** run as-is on Pages/Workers (needs `node-server`, SQLite, `sharp`, local `data/`). Keep Docker/VPS; use orange-cloud DNS and optional R2 storage on CF
+
+### Cloudflare orange cloud (incl. preferred edge IPs)
+
+**Recommended:** both `admin.example.com` and `pic.example.com` **DNS Proxied** → origin Nginx / 1Panel → port `6892`, SSL **Full (strict)** (origin cert or Cloudflare Origin Certificate).
+
+| Feature | Notes |
+| ------- | ----- |
+| Orange-cloud CDN | Compatible with dual-domain; preserve `Host` and `X-Forwarded-Proto` on origin |
+| DNS “preferred IP” setups | Only changes which CF edge IP clients hit; Host stays your real domain |
+| R2 storage | Add an R2 backend under **Storage**; independent of orange cloud |
+| `cloudflare` Git branch | R2-focused deployment line; still Docker, **not** Workers hosting |
+
+**Do not confuse** “Create Worker” in the CF dashboard (Git + `wrangler deploy`) with deploying PicHost — the repo uses `nitro.preset: 'node-server'` and is not Workers-ready.
+
+See [Reverse proxy](./reverse-proxy.md#cloudflare-orange-cloud) for origin hardening.
+
+## FN NAS · Lucky reverse proxy
+
+In [Lucky](https://github.com/gdy666/lucky), create one **reverse proxy** rule per domain. **Frontend** is the public hostname; **backend** is PicHost on your LAN (e.g. `http://192.168.8.3:6892`).
+
+**Site domain (admin)**
+
+| Field | Example |
+| ----- | ------- |
+| Service type | Reverse proxy |
+| Frontend | `admin.pichost.com` |
+| Backend | `http://192.168.8.3:6892` |
+
+**Image domain**
+
+| Field | Example |
+| ----- | ------- |
+| Service type | Reverse proxy |
+| Frontend | `image.pichost.com` |
+| Backend | `http://192.168.8.3:6892` |
+
+Both rules can point to the same backend; PicHost applies host-based isolation automatically.
+
+## Environment variables (optional)
+
+```env
+SITE_BASE_URL=https://admin.example.com
+IMAGE_BASE_URL=https://pic.example.com
+```
+
+See [Environment variables](./configuration.md).
+
+## Local testing (Windows / macOS)
+
+### 1. Edit hosts
+
+```text
+127.0.0.1 admin.pichost.test
+127.0.0.1 pic.pichost.test
+```
+
+Prefer the `.test` TLD; avoid `.local` where it conflicts with mDNS.
+
+### 2. Start dev server
+
+```bash
+npm run dev
+```
+
+Dev binds `127.0.0.1:3000` by default. If the hostname resolves but the browser cannot connect, check whether dev is listening on IPv6 `::1` only.
+
+### 3. Configure dual domains
+
+| Field | Example |
+| ----- | ------- |
+| Site URL | `http://admin.pichost.test:3000` |
+| Image URL | `http://pic.pichost.test:3000` |
+
+Always open admin on the **site hostname**, not `localhost` (cookies and Host must match).
+
+### 4. Expected behavior
+
+| URL | Expected |
+| --- | -------- |
+| `http://admin.pichost.test:3000/` | Admin UI works |
+| `http://admin.pichost.test:3000/images/...` or `/2026/08/xxx.webp` | **404** (use image host) |
+| `http://pic.pichost.test:3000/` | **404** (image host has no admin) |
+| `http://pic.pichost.test:3000/images/...` | Image served |
+| `http://localhost:3000/` or `http://127.0.0.1:3000/` | **Admin still loads** (third Host — isolation skipped; OK for dev only; block at proxy in production) |
+
+After upload, copied links should use `pic.pichost.test`; gallery thumbnails should load.
+
+## Notes
+
+- Hostnames must **differ** (same machine, different subdomains is fine)
+- Site / image URLs in Settings must **exactly match** proxy `server_name` (including `www` or not)
+- No separate static root on the image domain; unlike EasyImages, PicHost isolates in-app
+- Single-domain setups can skip separation and use `IMAGE_BASE_URL` or the request host
+- When Referer protection is enabled, site and image hosts are whitelisted automatically
+
+For single-domain proxy basics see [Reverse proxy](./reverse-proxy.md). Chinese version: [双域名分离](/guide/domain-separation)

docs-site/en/guide/faq.md

@@ -0,0 +1,64 @@
+# FAQ
+
+## Forgot the admin password?
+
+With `docker exec` access:
+
+```bash
+docker exec pichost reset-password
+docker exec pichost reset-password <username>
+```
+
+Local: `npm run reset-password`. See [Quick start](./getting-started.md#forgot-password).
+
+## Why can’t I regenerate the API token in the UI?
+
+`API_UPLOAD_TOKEN` in the environment **locks** the token. Change env and **restart**. See [Environment variables](./configuration.md#api-upload-token).
+
+## Hotlink / Referer errors?
+
+Check the **Referer whitelist** (`ALLOWED_REFERER_HOSTS` or Settings). Referring sites must be listed; PicHost’s own hosts and dual-domain pair are allowed automatically.
+
+## Why can admin load on pages.dev / workers.dev / IP with dual-domain?
+
+Dual-domain isolation only splits paths on the **configured site and image hostnames**. Other Host values (`localhost`, public IP, Cloudflare **Pages** `*.pages.dev`, **Workers** `*.workers.dev`, etc.) are **not blocked today**, so admin may appear on unexpected URLs.
+
+Common cause: **full-site reverse proxy** via Pages/Workers on top of orange-cloud DNS, or an origin that accepts any Host / bare IP.
+
+Fix: use only the two configured domains; add a default `server_name` block; with orange cloud, allow only CF IPs on the origin. See [Security notes](./domain-separation.md#security-notes).
+
+## Can I deploy PicHost on Cloudflare Workers / Pages?
+
+**Not with the current codebase.** PicHost needs `node-server`, SQLite, `sharp`, and local `data/` — use Docker/VPS. Connecting the repo in “Create Worker” will not deploy successfully.
+
+Recommended: run PicHost on origin; use **proxied DNS** (and optional **R2** storage). Do not full-proxy the app through Pages/Workers.
+
+## Dual-domain: admin works but thumbnails break?
+
+- Verify **IMAGE_BASE_URL** and proxy to the same instance
+- Always open admin on the **site hostname**, not mixed with `localhost`
+- See [Dual-domain separation](./domain-separation.md)
+
+## Undeletable gallery items after v1.2 upgrade?
+
+Likely **orphan index** rows (no file on disk). Startup sync removes them on restart. See [v1.2 migration](./migration.md#step-2-startup-index-sync-automatic).
+
+## Do I still need `data/blog/` after migration?
+
+After `migrate --apply`, files live under `data/images/blog/`. Remove leftover empty dirs after backup if you like; dirs with non-image files are kept by the CLI.
+
+## Object storage only — run migrate?
+
+No. Skip the CLI; startup sync focuses on local `data/images/` scanning.
+
+## Replace old image URLs in posts?
+
+Use `data/mapping.json` from `migrate` preview. Keys are **storage paths**, not full legacy URLs. See [Migration](./migration.md#urls).
+
+## Skip login during development?
+
+`DEV_BYPASS_ACCESS=true` (local only). Use `/setup` for normal flows.
+
+## Docs vs README?
+
+This **VitePress site** is the full guide; README is a short overview. Online: <https://o96u.github.io/PicHost/>

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

@@ -0,0 +1,72 @@
+# Quick start
+
+PicHost is a self-hosted image host for NAS, home servers, or VPS. Docker is recommended; the first visit runs a web wizard to create the admin account.
+
+## Try it online
+
+| Branch | Notes |
+| ------ | ----- |
+| **main** | No public demo — see [screenshots](./index.md#screenshots) or the repository README |
+| **cloudflare** | R2-only live demo: [pic.roven.cc](https://pic.roven.cc) |
+
+## Docker (recommended)
+
+```bash
+docker run -d \
+  --name pichost \
+  -p 6892:6892 \
+  -v ./data:/data \
+  --restart unless-stopped \
+  muxui/pichost:latest
+```
+
+Default port: **6892**. Open `http://<host>:6892` and complete setup.
+
+If you cloned the repo:
+
+```bash
+docker compose up -d
+```
+
+See `docker-compose.yml` in the repository.
+
+## First-time setup
+
+1. Open your instance URL (Docker default `http://<host>:6892`).
+2. Complete `/setup` with admin username and password.
+3. (Optional) Configure site URL, image URL, Referer rules — see [Environment variables](./configuration.md) and [Dual-domain separation](./domain-separation.md).
+4. Upload from the home page; admins can open **Storage**, **Settings**, and **API**.
+
+## Sign in
+
+Management pages (upload, stats, settings, etc.) require login. Enter username and password, **drag the slider to align with the gap**, then click **Sign in**.
+
+![Login](/screenshots/login.png)
+
+If registration is enabled, create an account from the register page. Legacy deployments may still use a secret key (see the on-screen hint).
+
+## Forgot password
+
+Requires `docker exec` (server access):
+
+```bash
+docker exec pichost reset-password              # admin only when there is exactly one
+docker exec pichost reset-password <username> # admin or regular user
+```
+
+A random password is printed. Change it after login.
+
+Local dev: `npm run reset-password` or `npm run reset-password -- <username>`
+
+## Upgrading to v1.2.0
+
+If `data/` has legacy top-level folders next to `images` (e.g. `blog/`, `twikoo/`), read the [v1.2 migration guide](./migration.md) first.
+
+Object-storage-only or files already under `data/images/` — pull the new image and restart.
+
+## Next steps
+
+- [Local development](./local-dev.md)
+- [Environment variables](./configuration.md)
+- [Storage](./storage.md)
+- [API](./api.md)

docs-site/en/guide/index.md

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

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

@@ -0,0 +1,54 @@
+# Local development
+
+Full-stack Nuxt 4 development at the repository root. Data defaults to `./data`.
+
+## Requirements
+
+- Node.js **22**
+- npm **11** (see `packageManager` in `package.json`)
+
+## Start
+
+```bash
+npm install
+cp .env.example .env   # optional
+npm run dev
+```
+
+Open `http://localhost:3000/setup` to create the admin account. Data directory defaults to `./data` (`DATA_DIR` overrides).
+
+## Common commands
+
+| Command | Description |
+| ------- | ----------- |
+| `npm run dev` | Dev server |
+| `npm run build` | Production build |
+| `npm run start` | Run `.output` |
+| `npm run lint` | ESLint |
+| `npm run typecheck` | Type check |
+| `npm test` | Unit tests |
+| `npm run reset-password` | Reset password (optional username) |
+| `npm run migrate` | Preview legacy dir migration (`-- --apply` to run) |
+
+## Dev-only variables
+
+| Variable | Description |
+| -------- | ----------- |
+| `DEV_BYPASS_ACCESS` | `true` bypasses login (skips `/setup`; rarely needed) |
+| `DATA_DIR` | Data directory, default `./data` |
+
+Full list: [Environment variables](./configuration.md).
+
+## Dual-domain local test
+
+Edit `hosts` and follow [Dual-domain separation](./domain-separation.md) for local verification.
+
+## Documentation site
+
+```bash
+npm run docs:dev
+npm run docs:build
+npm run docs:preview
+```
+
+Sources live in `docs-site/`; screenshot sources are in `docs/screenshots/` (including `login.png`), copied to `docs-site/public/screenshots/` before build.

docs-site/en/guide/migration.md

@@ -0,0 +1,129 @@
+# v1.2.0 local disk migration guide
+
+From v1.2.0, **all local image files** live under `data/images/`; SQLite `keys` also start with `images/`. Legacy top-level folders next to `images` (e.g. `data/blog/`, `data/twikoo/`) are no longer used.
+
+Migration is **two steps**: run the **CLI** to move files on disk, then let **startup sync** align the SQLite index.
+
+---
+
+## Migrating from other image hosts (EasyImage, Lsky, Chevereto, …)
+
+There is **no** dedicated “pull from URLs” or “import via vendor API” tool. Moving from **legacy PicHost** or **another self-hosted** install uses the same **local file** workflow:
+
+1. Locate the **image files** on the old server (copy the tree, not just the database).
+2. Place them under PicHost `data/` as a **top-level folder** next to `images` (any name — it becomes `images/{name}/...`).
+3. Run `migrate` / `migrate --apply`, then restart PicHost.
+
+| Source | Typical path on old server | After copy into PicHost |
+| ------ | -------------------------- | ----------------------- |
+| PicHost v1.1.x | `data/blog/`, `data/twikoo/` | Already under `data/` → run `migrate` |
+| EasyImage(s) | `i/` or `upload/` | e.g. `data/easyimage/` → `migrate` |
+| Lsky | `public/uploads/` etc. | e.g. `data/lsky/` → `migrate` |
+| Chevereto etc. | `images/` or `content/` | e.g. `data/chevereto/` → `migrate` |
+| Custom | your folder name | `data/your-folder/` → `migrate` |
+
+The CLI scans **every top-level directory under `data/` except `images`**, not only `blog` / `twikoo`.
+
+**Limits:** files only — accounts, tokens, and old public URLs are not imported. `mapping.json` maps old **storage keys**, not full old-site URLs. For S3/R2-only legacy hosts, sync blobs to `data/…` or attach the bucket in PicHost **Storage** settings.
+
+---
+
+## Layout before and after
+
+### Before (typical v1.1.x)
+
+```
+/data
+├── pichost.db
+├── blog/
+│   └── 2026/08/TeKJ2fD6cB6j.webp
+├── twikoo/
+└── images/
+```
+
+Index keys might look like `blog/2026/08/TeKJ2fD6cB6j.webp`.
+
+### After (v1.2.0)
+
+```
+/data
+├── pichost.db
+├── mapping.json
+└── images/
+    ├── blog/
+    │   └── 2026/08/TeKJ2fD6cB6j.webp
+    └── twikoo/
+```
+
+Index key: `images/blog/2026/08/TeKJ2fD6cB6j.webp`.
+
+---
+
+## Step 1: CLI file migration
+
+Run **before or after** upgrading the image; backup `data/` first.
+
+```bash
+docker exec pichost migrate          # preview + mapping.json
+docker exec pichost migrate --apply  # move files
+```
+
+Local: `npm run migrate` / `npm run migrate -- --apply`.
+
+| Item | Behavior |
+| ---- | -------- |
+| Scan | Every top-level directory under `data/` **except `images`** |
+| Target | `data/images/{original-top-dir}/{relative-path}` |
+| Extensions | jpg, jpeg, png, webp, gif, svg, ico |
+| Sidecar | `.meta.json` next to an image is moved if present |
+| Other files | Not moved; parent directory kept if anything remains |
+| Mapping | `data/mapping.json` — old key → new key |
+
+Script: `server/cli/migrate-to-single-images.mjs`.
+
+---
+
+## Step 2: Startup index sync (automatic)
+
+Runs on every start (`npm run dev`, Docker). No manual command.
+
+```text
+[INFO] 开始同步图片索引：扫描本地磁盘 ...
+[INFO] 磁盘扫描完成：...
+[INFO] 开始归一化遗留图片路径 ...
+[INFO] 开始校验索引与磁盘一致性，清理无文件的孤儿记录
+[INFO] 图片索引同步结束
+```
+
+| Step | Purpose |
+| ---- | ------- |
+| Scan `data/images/` | Insert missing index rows for files on disk |
+| Normalize legacy keys | `blog/...` → `images/blog/...` when files are in place |
+| Purge orphans | Remove index rows with no file on disk |
+| Repair Content-Type | Fix `application/octet-stream` entries |
+
+The CLI only **moves files**. Index alignment runs at startup — **restart** after `migrate --apply`.
+
+---
+
+## Recommended upgrade flow
+
+1. Backup `data/`.
+2. `docker exec pichost migrate` — review output and `mapping.json`.
+3. `docker exec pichost migrate --apply`.
+4. Deploy v1.2.0 and restart.
+5. Check logs for successful index sync.
+6. Use `mapping.json` to update external URLs if needed.
+
+Skip step 1 if you only use object storage or everything is already under `data/images/`.
+
+---
+
+## URLs
+
+| Old key | `blog/TeKJ2fD6cB6j.webp` |
+| New key | `images/blog/TeKJ2fD6cB6j.webp` |
+
+With “hide folder” mode, short URLs like `/TeKJ2fD6cB6j.webp` may still resolve by filename. Use `mapping.json` for bulk replacements.
+
+Chinese version: [v1.2 迁移指南](/guide/migration)

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

@@ -0,0 +1,83 @@
+# Reverse proxy
+
+In production, terminate HTTPS with Nginx, Caddy, NPM (Nginx Proxy Manager), or your NAS proxy and forward to PicHost on port **6892**.
+
+## Basics
+
+- Upstream: `http://127.0.0.1:6892` (or host IP)
+- Forward: `Host`, `X-Forwarded-Proto` (and `X-Forwarded-For` as needed)
+- Body size: Nginx `client_max_body_size 12m` or larger
+- Use **HTTPS** on the public edge
+
+## Single domain (Nginx)
+
+Admin, API, and images on one hostname:
+
+```nginx
+server {
+  server_name pic.example.com;
+  location / {
+    proxy_pass http://127.0.0.1:6892;
+    proxy_set_header Host $host;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    client_max_body_size 12m;
+  }
+}
+```
+
+Optional:
+
+```env
+IMAGE_BASE_URL=https://pic.example.com
+```
+
+Without `IMAGE_BASE_URL`, PicHost infers the public URL from forwarded headers.
+
+## Dual domains
+
+Both hostnames can fully proxy to the same port; isolation is enforced in PicHost middleware.
+
+See [Dual-domain separation](./domain-separation.md).
+
+## Cloudflare orange cloud
+
+Run PicHost on **your server / Docker** (port `6892`). On Cloudflare:
+
+| Practice | Notes |
+| -------- | ----- |
+| **Proxied DNS** | Both admin and image hostnames → origin proxy to `6892`, SSL **Full (strict)** |
+| Preferred edge IPs | Compatible; Host remains your real domain |
+| **R2** | Object storage backend in **Storage**; not the same as hosting the app on Pages |
+| Origin firewall | Allow only [Cloudflare IPs](https://www.cloudflare.com/ips/); do not expose `6892` publicly |
+
+**Avoid:**
+
+- **Cloudflare Pages** (`*.pages.dev`) or **Workers** (`*.workers.dev`) as a **full-site reverse proxy** to PicHost — extra hostnames can bypass dual-domain isolation ([Security notes](./domain-separation.md#security-notes))
+- “Create Worker” from Git on this repo — `node-server` preset is not Workers-ready
+
+## Origin hardening (dual-domain)
+
+PicHost middleware does **not** reject unlisted Host values. Complement with:
+
+1. **`server_name` allowlist** — site + image hosts only; `default_server` blocks bare IP and unknown Host
+2. **Do not expose 6892 on the public Internet** — only local reverse proxy; public 80/443 only
+3. **Orange cloud** — origin firewall limited to Cloudflare IP ranges
+
+## Caddy
+
+```caddy
+pic.example.com {
+  reverse_proxy 127.0.0.1:6892
+}
+```
+
+Add a second site block for the second hostname with the same upstream.
+
+## Caching
+
+Image 404/403 and domain-isolation 404 responses are **no-cache** to avoid sticky CDN errors. Be careful caching API paths behind a CDN.
+
+## See also
+
+- [Environment variables](./configuration.md)
+- [Quick start](./getting-started.md)

docs-site/en/guide/storage.md

@@ -0,0 +1,66 @@
+# Storage
+
+PicHost supports **local disk** and **S3-compatible object storage** (Cloudflare R2, Tencent COS, Alibaba OSS, AWS S3, etc.). Admins manage backends at **Storage** (`/storage`); new uploads go to the **default** backend.
+
+![Storage management](/screenshots/storage.png)
+
+## Layout (local)
+
+```
+/data
+├── pichost.db          # SQLite: users, sessions, settings, storage_backends, images index
+└── images/             # All files when using local backend
+```
+
+- New uploads: `images/randomId.webp` or `images/YYYY/MM/randomId.webp` (flat mode in Settings)
+- Migrated legacy: `images/blog/...` and similar
+- With cloud backends, blobs live in the bucket; index stays in SQLite `images`
+
+All **keys** start with `images/`. The upload API does **not** accept a `folder` parameter.
+
+## Adding a backend
+
+1. Sign in as admin → **Storage** → **Add backend**.
+2. Choose **local disk** or **S3-compatible** (R2 / COS / OSS presets).
+3. Enter connection details (bucket, endpoint, keys).
+4. **Set as default** so new uploads use it.
+
+### Cloudflare R2
+
+| Field | Value |
+| ----- | ----- |
+| Endpoint | `https://<account_id>.r2.cloudflarestorage.com` |
+| Region | `auto` |
+| Bucket | Your R2 bucket name |
+| Keys | R2 API token access / secret |
+
+The **cloudflare** branch streamlines R2-only deploys; see branch notes on the [docs overview](./index.md).
+
+### Environment variables (optional)
+
+Some installs seed a default S3 backend via `STORAGE_BACKEND=s3`, `S3_ENDPOINT`, `S3_BUCKET`, `S3_ACCESS_KEY`, `S3_SECRET_KEY`, `S3_REGION`. **UI-configured backends live in SQLite** alongside env-based defaults.
+
+## URL modes
+
+| Mode | Behavior |
+| ---- | -------- |
+| **proxy** | Serve via PicHost (`GET /images/...`) |
+| **public** | 302 redirect to bucket/CDN public URL |
+
+Copied links use **IMAGE_BASE_URL**. “Hide folder prefix” may shorten URLs; the server resolves by path or basename.
+
+## Usage & gallery filter
+
+- Per-backend usage on the Storage page
+- Gallery filter by backend (admin)
+
+## Backup
+
+Back up `data/images/`, `data/pichost.db`, and bucket objects.
+
+Upgrading from v1.1.x with parallel folders: [v1.2 migration](./migration.md).
+
+## See also
+
+- [Environment variables](./configuration.md)
+- [Users & permissions](./users-and-permissions.md)

docs-site/en/guide/twikoo.md

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

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

@@ -0,0 +1,58 @@
+# Users & permissions
+
+PicHost uses role-based access control (RBAC): **admin** and **user**. Enforcement is server-side.
+
+## Role capabilities
+
+| Capability | Admin | User |
+| ---------- | :---: | :--: |
+| Upload images | ✓ | ✓ |
+| Own gallery | ✓ | ✓ |
+| All galleries / uploader badges | ✓ | — |
+| Storage management (`/storage`) | ✓ | — |
+| System settings (`/settings`) | ✓ | — |
+| Allow registration | ✓ | — |
+| Global API token | ✓ | — |
+| Personal API token | ✓ | ✓ |
+| Stats (incl. user count) | ✓ | partial |
+| Activity log | ✓ | — |
+
+Regular users see **API**, **Stats** in the nav; user menu: **Change password**, **Sign out**.
+
+## Auth scenarios
+
+| Scenario | Auth | Ownership / visibility |
+| -------- | ---- | ---------------------- |
+| Web upload | Session cookie | Current user |
+| API upload + **user token** | `Auth-Token` header | Token owner |
+| API upload + **global token** | `Auth-Token` header | Admin (`userId` null) |
+| Twikoo `POST /api/index.php` | form `token` | Same as global token |
+| Gallery list / search / delete | Session or token | Users: own only; admin: all |
+| Direct link `GET /images/...` | None (Referer rules) | Public if URL is known |
+
+## Accounts
+
+- By default only admins create users; **allow registration** is an admin setting
+- Passwords hashed with scrypt
+- Web login requires a slider captcha (align the thumb with the gap)
+- Login rate limiting
+
+## Upload preferences & auto-delete
+
+- **Upload preferences** (home card flip): client compression, auto-copy links, per user
+- **Auto-delete**: global (admin) and per-user policies; affects **new uploads after enable** only
+
+## API tokens
+
+| Type | Managed by | Upload owner | Typical use |
+| ---- | ---------- | ------------ | ----------- |
+| **Global** | Admin (API page) | Admin account | Twikoo, site-wide scripts |
+| **Personal** | Each user (API page) | That user | Personal blog, private scripts |
+
+`API_UPLOAD_TOKEN` in env locks the global token — see [Environment variables](./configuration.md).
+
+## See also
+
+- [API](./api.md)
+- [Twikoo](./twikoo.md)
+- [Storage](./storage.md)

docs-site/en/index.md

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

docs-site/guide/api.md

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

docs-site/guide/configuration.md

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

docs-site/guide/domain-separation.md

@@ -0,0 +1,172 @@
+# 双域名分离 · 推荐部署架构
+
+启用「后台与图片域名分离」后，管理后台、API 与图片直链使用不同域名。PicHost 通过 **Host 中间件** 双向隔离：
+
+- **网站域**：后台、API、上传；**禁止**直链出图（图片路径返回 404）
+- **图片域**：仅放行图片路径；其余请求返回 404
+
+## 架构说明
+
+**单 Docker 实例 + 两个域名**，均可 **全量反代** 到 `6892`（隔离由 PicHost 中间件负责，无需在 Nginx 层拆分路径）。
+
+| 域名 | 用途 |
+| ---- | ---- |
+| `admin.example.com` | 管理后台、API、Twikoo 上传 |
+| `pic.example.com` | 图片直链（中间件拦截非图片路径） |
+
+初始化时在 `/setup` 或后台 **设置** 中填写：
+
+- **网站域名**：`https://admin.example.com`
+- **图片域名**：`https://pic.example.com`
+
+## Nginx 示例
+
+```nginx
+# admin.example.com — 后台 + API（不出图，直链请走图片域）
+server {
+  server_name admin.example.com;
+  location / {
+    proxy_pass http://127.0.0.1:6892;
+    proxy_set_header Host $host;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    client_max_body_size 12m;
+  }
+}
+
+# pic.example.com — 同样全量反代；PicHost 中间件会拦截非图片路径
+server {
+  server_name pic.example.com;
+  location / {
+    proxy_pass http://127.0.0.1:6892;
+    proxy_set_header Host $host;
+    proxy_set_header X-Forwarded-Proto $scheme;
+  }
+}
+
+# 默认 server：拒绝裸 IP、未配置域名等其它 Host（生产环境强烈建议）
+server {
+  listen 443 ssl default_server;
+  listen 80 default_server;
+  server_name _;
+  return 444;
+}
+```
+
+> Caddy、NPM（Nginx Proxy Manager）等工具同理：两个域名均反代到 `http://<主机>:6892`，并保留 `Host` 与 `X-Forwarded-Proto` 头。
+
+## 安全与注意事项
+
+### 中间件只隔离「已配置的两个域名」
+
+PicHost 根据请求 **Host**（反代会转发为 `X-Forwarded-Host`，应用会一并识别）判断当前是网站域还是图片域：
+
+- **图片域**：非图片路径（如 `/`、`/settings`）→ 404
+- **网站域**：图片直链路径（如 `/images/...`）→ 404
+
+若 Host **既不是网站域也不是图片域**（例如 `localhost`、服务器 **公网 IP**、Cloudflare **Pages** 的 `*.pages.dev`、**Workers** 的 `*.workers.dev`、或其它未在设置里填写的域名），**当前版本不会拦截**，后台与 API 仍可能被访问。这与域名是否带 `-`、长短无关，而是多了一条未纳入双域名配置的入口。
+
+**生产环境建议：**
+
+1. 反代层仅为网站域、图片域配置 `server_name`，并增加 **default server** 拒绝其它 Host 与裸 IP（见上方 Nginx 示例）
+2. 使用 Cloudflare **橙云** 时，源站防火墙 **仅放行 [Cloudflare IP 段](https://www.cloudflare.com/ips/)**，避免绕过 CDN 直连源站
+3. **仅使用** 设置中的网站域名登录后台，不要用 `localhost`、IP 或未配置的域名混用
+4. **不要** 用 Cloudflare Pages / Workers 对 PicHost **整站反代**（会多出 `pages.dev` / `workers.dev` 等第三入口，且易出现上述绕过）
+5. PicHost **不能** 作为 Node 应用直接部署到 Pages/Workers（依赖 `node-server`、SQLite、`sharp` 与本地 `data/`）；应用请继续 Docker/VPS 部署，CF 侧用橙云 DNS + 可选 R2 存储即可
+
+### Cloudflare 橙云（含 DNS 优选）
+
+**推荐架构：** `admin.example.com` 与 `pic.example.com` 均 **DNS Proxied（橙云）** → 源站 Nginx / 1Panel 反代 `6892`，SSL 模式 **Full (strict)**（源站可用 Cloudflare Origin Certificate）。
+
+| 能力 | 说明 |
+| ---- | ---- |
+| 橙云 CDN | 与 PicHost 双域名兼容；回源须保留 `Host`、`X-Forwarded-Proto` |
+| DNS 优选 | 仅改变用户连到 CF 边缘的 IP，Host 仍为正式域名，无额外配置 |
+| R2 对象存储 | 在 **存储** 页添加 R2 后端即可，与是否橙云无关 |
+| `cloudflare` Git 分支 | R2 专用部署线，仍是 Docker 运行，**不是** Workers 托管 |
+
+**勿混淆：** CF 控制台「创建 Worker」并连接本仓库 **无法** 直接部署 PicHost；`npm run build` + `wrangler deploy` 与当前 `node-server` 预设不兼容。
+
+反代与源站加固详见 [反向代理](./reverse-proxy.md#cloudflare-橙云)。
+
+## 飞牛 NAS · Lucky 反向代理
+
+在 [Lucky](https://github.com/gdy666/lucky) 中为两个域名各建一条 **反向代理** 规则，**前端地址** 填公网域名，**后端地址** 填 PicHost 所在内网 IP 与端口（如 `http://192.168.8.3:6892`）。
+
+**网站域名（管理后台）**
+
+| 项 | 示例值 |
+| -- | ------ |
+| 服务类型 | 反向代理 |
+| 前端地址 | `admin.pichost.com` |
+| 后端地址 | `http://192.168.8.3:6892` |
+
+**图片域名**
+
+| 项 | 示例值 |
+| -- | ------ |
+| 服务类型 | 反向代理 |
+| 前端地址 | `image.pichost.com` |
+| 后端地址 | `http://192.168.8.3:6892` |
+
+两条规则的后端地址相同即可；域名分离与路径隔离由 PicHost 根据请求 `Host` 自动处理。
+
+## 环境变量（可选）
+
+除 Web 设置外，也可在 `.env` 或 Docker 环境中配置：
+
+```env
+SITE_BASE_URL=https://admin.example.com
+IMAGE_BASE_URL=https://pic.example.com
+```
+
+详见 [环境变量](./configuration.md)。
+
+## 本地测试（Windows / macOS）
+
+### 1. 修改 hosts
+
+```text
+127.0.0.1 admin.pichost.test
+127.0.0.1 pic.pichost.test
+```
+
+建议使用 `.test` 后缀，避免 `.local` 在部分系统上与 mDNS 冲突。
+
+### 2. 启动开发服务
+
+```bash
+npm run dev
+```
+
+项目已默认绑定 `127.0.0.1:3000`（与 hosts 的 IPv4 一致）。若曾出现 `ping` 通但浏览器连不上，多半是 dev 只监听了 IPv6 `::1`。
+
+### 3. 填写双域名
+
+| 项 | 示例 |
+| -- | ---- |
+| 网站域名 | `http://admin.pichost.test:3000` |
+| 图片域名 | `http://pic.pichost.test:3000` |
+
+**后台请始终用网站域名打开**，不要用 `localhost`（Cookie 与 Host 不一致）。
+
+### 4. 预期结果
+
+| 地址 | 预期 |
+| ---- | ---- |
+| `http://admin.pichost.test:3000/` | 正常进入后台 |
+| `http://admin.pichost.test:3000/images/...` 或 `/2026/08/xxx.webp` | **404**（请用图片域直链） |
+| `http://pic.pichost.test:3000/` | **404**（正常，图片域不提供后台） |
+| `http://pic.pichost.test:3000/images/...` | 能出图 |
+| `http://localhost:3000/` 或 `http://127.0.0.1:3000/` | **能打开后台**（第三 Host，隔离不生效；仅开发可接受，生产须用反代封禁） |
+
+上传一张图后，复制链接应指向 `pic.pichost.test` 域名；在后台图库中缩略图也应能正常显示。
+
+## 相关说明
+
+- 两个域名 **主机名不能相同**（可同机、不同子域）
+- 设置里的网站域 / 图片域须与反代 `server_name` **完全一致**（含是否带 `www`）
+- 图片域无需单独部署静态目录；与 EasyImages 等不同，PicHost 在应用内完成隔离
+- 单域名部署可不启用分离，仅配置 `IMAGE_BASE_URL` 或使用默认当前访问域名
+- 配置了 Referer 防盗链时，网站域与图片域会自动加入白名单，无需手写两个域名
+
+单域名反代要点见 [反向代理](./reverse-proxy.md)。英文版：[Dual-domain separation](/en/guide/domain-separation)

docs-site/guide/faq.md

@@ -0,0 +1,65 @@
+# 常见问题
+
+## 忘记管理员密码怎么办？
+
+能执行 `docker exec` 时：
+
+```bash
+docker exec pichost reset-password
+# 或指定用户名
+docker exec pichost reset-password 用户名
+```
+
+本地：`npm run reset-password`。详见 [快速开始](./getting-started.md#忘记密码)。
+
+## 为什么后台无法重新生成 API Token？
+
+若设置了环境变量 `API_UPLOAD_TOKEN`，Token 由环境变量 **锁定**，需修改 env 并 **重启服务**。见 [环境变量](./configuration.md#api-upload-token)。
+
+## 图片外链显示「盗链」或无法加载？
+
+检查 **防盗链白名单**（`ALLOWED_REFERER_HOSTS` 或设置页）。引用图片的站点域名需在白名单中；PicHost 自身域名与双域名场景下的网站域、图片域会自动放行。
+
+## 双域名下为什么用 pages.dev / workers.dev / IP 也能进后台？
+
+PicHost 双域名隔离**只对已配置的网站域、图片域做路径分流**；其它 Host（`localhost`、公网 IP、Cloudflare Pages 的 `*.pages.dev`、Workers 的 `*.workers.dev` 等）**当前不会拦截**，因此可能出现「奇怪地址也能开后台」。
+
+常见原因：在橙云之外又用 **Pages/Workers 整站反代** 到源站，或源站未限制 `server_name` / 允许裸 IP 访问。
+
+处理：仅用正式两个域名访问；反代加 default server；橙云时源站只放行 CF IP。详见 [双域名分离 · 安全与注意事项](./domain-separation.md#安全与注意事项)。
+
+## 能把 PicHost 部署到 Cloudflare Workers / Pages 吗？
+
+**不能（现状）。** 项目使用 `node-server`、SQLite、`sharp` 与本地 `data/`，需 Docker / VPS。CF 控制台「从 Git 创建 Worker」连本仓库会部署失败。
+
+推荐：源站跑 PicHost，CF 用 **橙云 DNS**（含优选）+ 可选 **R2 存储**；不要用 Pages/Workers 反代整站。
+
+## 双域名下后台能打开但缩略图裂图？
+
+- 确认 **图片域名** 配置正确且反代到同一实例
+- 后台请用 **网站域名** 打开，不要用 `localhost` 混用
+- 见 [双域名分离](./domain-separation.md)
+
+## 升级 v1.2 后图库有删不掉的记录？
+
+可能是 **孤儿索引**（有记录无文件）。重启后启动同步会自动清理；也可手动删除仅索引项。见 [v1.2 迁移](./migration.md#第二步启动时自动同步索引)。
+
+## 遗留 `data/blog/` 目录还要吗？
+
+执行 `migrate --apply` 后文件已迁入 `data/images/blog/`。若原目录只剩空壳或非图片文件，可自行备份后删除；迁移脚本不会删除仍含非图片文件的目录。
+
+## 只用对象存储需要跑 migrate 吗？
+
+不需要。图片在桶内时跳过 CLI；启动同步主要面向本地 `data/images/` 磁盘扫描。
+
+## 如何替换博客里的旧图片 URL？
+
+使用 `data/mapping.json`（`migrate` 预览时生成）批量替换旧 key。注意映射的是 **存储 key**，不是完整旧站 URL。见 [迁移指南](./migration.md#外链与直链)。
+
+## 开发时如何跳过登录？
+
+`DEV_BYPASS_ACCESS=true`（仅本地，勿用于生产）。正常流程请访问 `/setup` 创建管理员。
+
+## 文档与仓库 README 哪个为准？
+
+**本 VitePress 文档站** 为完整用户指南；README 保留摘要与快速开始。在线地址：<https://o96u.github.io/PicHost/>

docs-site/guide/getting-started.md

@@ -0,0 +1,75 @@
+# 快速开始
+
+PicHost 适合在 NAS、家用服务器或 VPS 上自托管图床。推荐用 Docker 部署，首次访问通过 Web 向导创建管理员。
+
+## 在线体验
+
+| 分支 | 说明 |
+| ---- | ---- |
+| **main** | 无公网演示；产品界面见 [文档首页](./index.md#截图预览) 或仓库 README |
+| **cloudflare** | R2 专用线在线演示：[pic.roven.cc](https://pic.roven.cc) |
+
+## Docker（推荐）
+
+```bash
+docker run -d \
+  --name pichost \
+  -p 6892:6892 \
+  -v ./data:/data \
+  --restart unless-stopped \
+  muxui/pichost:latest
+```
+
+默认端口 **6892**。浏览器打开 `http://<主机IP>:6892`，按引导创建管理员即可。
+
+已克隆仓库时也可用：
+
+```bash
+docker compose up -d
+```
+
+见仓库内 `docker-compose.yml`。
+
+## 首次设置
+
+1. 访问实例 URL（Docker 默认 `http://<主机>:6892`）。
+2. 在 `/setup` 填写管理员用户名与密码。
+3. （可选）配置网站域名、图片域名、防盗链等 — 详见 [环境变量](./configuration.md) 与 [双域名分离](./domain-separation.md)。
+4. 登录后可在首页上传图片；管理员可进入 **存储**、**设置**、**API** 页。
+
+## 登录
+
+访问上传、统计、设置等管理页面前需登录。在登录卡片中填写用户名与密码，**拖动滑块对齐缺口**完成验证后点击 **登录**。
+
+![登录页](/screenshots/login.png)
+
+若管理员开启了开放注册，可前往注册页创建账号。遗留部署仍可能使用密钥登录（见界面提示）。
+
+## 忘记密码
+
+需能执行 `docker exec`（相当于服务器权限）：
+
+```bash
+# 无参数：重置管理员（仅当系统中只有一个管理员时）
+docker exec pichost reset-password
+
+# 指定用户名：可重置管理员或普通用户
+docker exec pichost reset-password 用户名
+```
+
+终端会打印随机新密码；用户不存在时会报错。登录后请到「修改密码」更换。
+
+本地开发：`npm run reset-password` 或 `npm run reset-password -- 用户名`
+
+## 升级到 v1.2.0
+
+若 `data/` 下存在与 `images` 并列的遗留目录（如 `blog/`、`twikoo/`），升级前请阅读 [v1.2 迁移指南](./migration.md)。
+
+仅对象存储、或图片已在 `data/images/` 下时，拉取新镜像并重启即可。
+
+## 下一步
+
+- [本地开发](./local-dev.md) — `npm run dev` 与 `.env`
+- [环境变量](./configuration.md) — 生产配置
+- [存储](./storage.md) — 多后端与直链
+- [API](./api.md) — Token 与 REST 接口

docs-site/guide/index.md

@@ -0,0 +1,39 @@
+# PicHost 文档
+
+欢迎使用 PicHost 用户文档。本站为完整指南的单一事实来源；仓库 README 保留特性摘要与快速开始。
+
+## 推荐阅读顺序
+
+1. [快速开始](./getting-started.md) — Docker 部署与首次设置
+2. [环境变量](./configuration.md) — 生产环境配置与后台设置对照
+3. [存储](./storage.md) — 多后端与直链模式
+4. [API](./api.md) — REST 接口与 Token
+
+## 截图预览
+
+**main** 分支暂无公网演示，以下为 v1.2.0 产品界面。
+
+| 首次设置 | 登录 |
+| :------: | :--: |
+| ![首次设置](/screenshots/setup.png) | ![登录](/screenshots/login.png) |
+
+| API | 统计与图库 |
+| :-: | :--------: |
+| ![API](/screenshots/api.png) | ![统计与图库](/screenshots/stats.png) |
+
+| 存储管理 | 系统设置 |
+| :------: | :------: |
+| ![存储管理](/screenshots/storage.png) | ![系统设置](/screenshots/settings.png) |
+
+| 操作日志 |
+| :------: |
+| ![操作日志](/screenshots/logs.png) |
+
+## 分支说明
+
+| 分支 | 说明 |
+| ---- | ---- |
+| [**main**](https://github.com/O96u/PicHost/tree/main) | 主线：多后端、双域名、统一 `images/` 存储；界面见上表 |
+| [**cloudflare**](https://github.com/O96u/PicHost/tree/cloudflare) | 仅 Cloudflare R2；在线演示 [pic.roven.cc](https://pic.roven.cc) |
+
+需要多种云存储或完整管理界面请用 **main**；图床只接 R2 可选用 **cloudflare** 分支。

docs-site/guide/local-dev.md

@@ -0,0 +1,54 @@
+# 本地开发
+
+在仓库根目录进行 Nuxt 4 全栈开发，数据默认写入 `./data`。
+
+## 环境要求
+
+- Node.js **22**
+- npm **11**（与 `package.json` 中 `packageManager` 一致）
+
+## 启动
+
+```bash
+npm install
+cp .env.example .env   # 可选
+npm run dev
+```
+
+访问 `http://localhost:3000/setup` 创建管理员。数据目录默认 `./data`（`DATA_DIR` 可改）。
+
+## 常用命令
+
+| 命令 | 说明 |
+| ---- | ---- |
+| `npm run dev` | 开发服务器 |
+| `npm run build` | 生产构建 |
+| `npm run start` | 运行 `.output` |
+| `npm run lint` | ESLint |
+| `npm run typecheck` | 类型检查 |
+| `npm test` | 单元测试 |
+| `npm run reset-password` | 重置密码（可选用户名） |
+| `npm run migrate` | 预览遗留目录迁移（加 `-- --apply` 执行） |
+
+## 开发专用环境变量
+
+| 变量 | 说明 |
+| ---- | ---- |
+| `DEV_BYPASS_ACCESS` | 设为 `true` 可绕过登录（跳过 `/setup`，一般无需开启） |
+| `DATA_DIR` | 数据目录，默认 `./data` |
+
+完整变量列表见 [环境变量](./configuration.md)。
+
+## 双域名本地测试
+
+修改系统 `hosts` 后可用两个测试域名验证分离逻辑，步骤见 [双域名分离](./domain-separation.md#本地测试-windows-macos)。
+
+## 文档站
+
+```bash
+npm run docs:dev      # VitePress 开发
+npm run docs:build    # 构建静态站点
+npm run docs:preview  # 预览构建结果
+```
+
+文档源码在 `docs-site/`；截图源文件在 `docs/screenshots/`（含 `login.png` 登录页），构建前会复制到 `docs-site/public/screenshots/`。

docs-site/guide/migration.md

@@ -0,0 +1,178 @@
+# v1.2.0 本地磁盘迁移指南
+
+v1.2.0 起，**所有本地图片文件**统一放在 `data/images/` 下；SQLite `images` 表中的 `key` 也以 `images/` 开头。旧版在 `data/blog/`、`data/twikoo/` 等与 `images` **并列的顶层目录**不再符合新模型。
+
+迁移分 **两步**：先用手动 CLI **搬文件**，再由服务 **启动时自动同步索引**。
+
+---
+
+## 从其它图床迁入（EasyImage / 兰空 / Chevereto 等）
+
+**没有**单独的「一键从外链拉取」或「对接某某图床 API」工具。从 **PicHost 旧版** 或其它自托管图床迁入，走的是同一套 **本地文件迁移**：
+
+1. 在旧图床服务器上找到图片**物理目录**（整目录拷贝，不要只拷数据库）。
+2. 把该目录放到 PicHost 的 `data/` 下，作为与 `images` **并列的顶层文件夹**（文件夹名任意，会保留为 `images/{文件夹名}/...`）。
+3. 执行 `migrate` / `migrate --apply`，再重启 PicHost。
+
+### 常见来源示例
+
+| 来源 | 典型图片目录（在旧服务器上） | 放入 PicHost 后示例 |
+| ---- | ---------------------------- | ------------------- |
+| PicHost v1.1.x | `data/blog/`、`data/twikoo/` | 已在 `data/` 下，直接 `migrate` |
+| EasyImage / EasyImages | `i/` 或安装目录下的 `upload/` | 拷到 `data/easyimage/` 再 `migrate` |
+| 兰空图床 (Lsky) | `public/uploads/` 等 | 拷到 `data/lsky/` 再 `migrate` |
+| Chevereto 等 | `images/` 或 `content/` | 拷到 `data/chevereto/` 再 `migrate` |
+| 任意自定义目录 | 你的顶层文件夹名 | 拷到 `data/你的目录名/` 再 `migrate` |
+
+脚本会扫描 `data/` 下**除 `images` 外所有顶层目录**里的图片，不限于 `blog` / `twikoo`。子目录结构会原样保留在 `images/{顶层名}/` 下。
+
+### 操作示例（Docker）
+
+```bash
+# 在宿主机：把从旧图床打包的目录放进挂载卷（名称自定）
+# 例如：./data/easyimage/2026/01/photo.jpg
+
+docker exec pichost migrate          # 预览
+docker exec pichost migrate --apply
+# 重启容器 → 启动日志会补全 SQLite 索引
+```
+
+### 说明与限制
+
+- **只迁移文件**：旧图床的账号、Token、外链 URL **不会**自动导入；`mapping.json` 里的 key 是「旧磁盘相对 key → 新 key」，**不是**旧站完整 URL，替换外链需自行对照。
+- **对象存储**：若旧图床图片在 S3/R2 桶里，请用桶工具同步到本地 `data/某目录/`，或直接在 PicHost **存储**页配置同一桶（不经过本 CLI）。
+- **已直接在 `data/images/` 下**：无需 `migrate`，重启后启动同步会自动建索引。
+
+---
+
+## 存储结构对比
+
+### 迁移前（v1.1.x 常见）
+
+```
+/data
+├── pichost.db
+├── blog/
+│   └── 2026/08/TeKJ2fD6cB6j.webp
+├── twikoo/
+│   └── xxx.webp
+└── images/          # 可能已有部分新图
+    └── ...
+```
+
+SQLite 中 `key` 可能是 `blog/2026/08/TeKJ2fD6cB6j.webp`（与磁盘顶层目录一致）。
+
+### 迁移后（v1.2.0）
+
+```
+/data
+├── pichost.db
+├── mapping.json     # CLI 生成：旧 key → 新 key（供替换外链）
+└── images/
+    ├── blog/
+    │   └── 2026/08/TeKJ2fD6cB6j.webp
+    ├── twikoo/
+    │   └── xxx.webp
+    └── ...            # 新上传：images/随机ID.webp 或 images/年/月/随机ID.webp
+```
+
+对应 `key`：`images/blog/2026/08/TeKJ2fD6cB6j.webp`。
+
+---
+
+## 第一步：CLI 迁移磁盘文件
+
+在 **升级镜像之前或之后**均可执行；建议在升级前完成，并先备份整个 `data/` 目录。
+
+### Docker
+
+```bash
+# 预览：列出待迁移文件，写入 data/mapping.json（旧 key → 新 key）
+docker exec pichost migrate
+
+# 确认无误后执行文件移动
+docker exec pichost migrate --apply
+```
+
+### 本地开发
+
+```bash
+npm run migrate              # 预览
+npm run migrate -- --apply   # 执行
+```
+
+### 脚本行为
+
+| 项目 | 说明 |
+| ---- | ---- |
+| 扫描范围 | `data/` 下**除 `images` 外所有顶层目录**（不限于 blog/twikoo） |
+| 迁移目标 | `data/images/{原顶层目录名}/{相对路径}` |
+| 图片类型 | `.jpg` `.jpeg` `.png` `.webp` `.gif` `.svg` `.ico` |
+| 伴随文件 | 若存在同名的 `.meta.json` 会一并移动 |
+| 非图片文件 | 不移动；若目录内仍有其它文件，**保留原目录**不删除 |
+| 映射表 | `data/mapping.json`，例如 `"blog/foo.webp": "images/blog/foo.webp"` |
+
+脚本路径：`server/cli/migrate-to-single-images.mjs`。
+
+---
+
+## 第二步：启动时自动同步索引
+
+每次 PicHost 启动（`npm run dev`、Docker 容器启动）会自动执行，**无需手动命令**。日志示例：
+
+```text
+[INFO] 开始同步图片索引：扫描本地磁盘 {"path":".../data/images/"}
+[INFO] 磁盘扫描完成：已补全缺失索引 {"inserted":3}
+[INFO] 开始归一化遗留图片路径（如 blog/ → images/blog/）
+[INFO] 遗留路径归一化完成：无需调整
+[INFO] 开始校验索引与磁盘一致性，清理无文件的孤儿记录
+[INFO] 孤儿索引清理完成：未发现孤儿记录
+[INFO] 开始修复存量 Content-Type 元数据
+[INFO] Content-Type 修复完成：无需修复
+[INFO] 图片索引同步结束
+```
+
+| 步骤 | 作用 |
+| ---- | ---- |
+| 扫描 `data/images/` | 磁盘上有、索引里没有 → **补全** `images` 表 |
+| 归一化遗留 key | 将 `blog/...` 等旧 key 更新为 `images/blog/...`（文件已在正确路径时） |
+| 清理孤儿索引 | 索引里有记录、磁盘无文件 → **删除**幽灵记录（避免图库出现删不掉的项） |
+| 修复 Content-Type | 修正错误的 `application/octet-stream` |
+
+CLI 只负责**搬文件**；索引对齐、遗留 key、孤儿记录由启动同步处理。执行 `migrate --apply` 后**重启一次**服务即可。
+
+---
+
+## 推荐升级流程
+
+1. **备份** `data/`（含 `pichost.db` 与各目录）。
+2. `docker exec pichost migrate` 预览，检查输出与 `mapping.json`。
+3. `docker exec pichost migrate --apply` 执行迁移。
+4. 拉取 / 部署 **v1.2.0** 镜像并重启容器。
+5. 查看启动日志，确认「图片索引同步结束」无报错。
+6. 用 `mapping.json` 批量替换博客、Twikoo 等外链中的旧路径（若需要）。
+
+仅使用对象存储、或图片早已全部在 `data/images/` 下时，**跳过第一步**；第二步仍会在启动时运行，通常几秒内完成且无变更日志。
+
+---
+
+## 外链与直链
+
+| 场景 | 说明 |
+| ---- | ---- |
+| 旧 key | `blog/TeKJ2fD6cB6j.webp` |
+| 新 key | `images/blog/TeKJ2fD6cB6j.webp` |
+| 隐藏目录模式 | 若开启「隐藏 images 前缀」，短链可能为 `/TeKJ2fD6cB6j.webp`；服务按文件名反查索引 |
+| 替换建议 | 以 `mapping.json` 为准；或重新在图库复制新链接 |
+
+---
+
+## 相关命令
+
+| 命令 | 说明 |
+| ---- | ---- |
+| `docker exec pichost migrate` | 预览磁盘迁移 |
+| `docker exec pichost migrate --apply` | 执行磁盘迁移 |
+| `docker exec pichost reset-password` | 重置密码（与迁移无关） |
+
+英文版：[v1.2 migration guide](/en/guide/migration)

docs-site/guide/reverse-proxy.md

@@ -0,0 +1,85 @@
+# 反向代理
+
+生产环境建议通过 Nginx、Caddy、NPM（Nginx Proxy Manager）或 NAS 自带反代，将 HTTPS 流量转发到 PicHost 容器 **6892** 端口。
+
+## 基本要求
+
+- 反代目标：`http://127.0.0.1:6892`（或容器所在主机 IP）
+- 保留请求头：`Host`、`X-Forwarded-Proto`（及常见的 `X-Forwarded-For`）
+- 上传大小：Nginx 建议 `client_max_body_size 12m` 或更大
+- 公网访问请配置 **HTTPS**
+
+## 单域名示例（Nginx）
+
+管理、API、出图同一域名：
+
+```nginx
+server {
+  server_name pic.example.com;
+  location / {
+    proxy_pass http://127.0.0.1:6892;
+    proxy_set_header Host $host;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    client_max_body_size 12m;
+  }
+}
+```
+
+环境变量（可选）：
+
+```env
+IMAGE_BASE_URL=https://pic.example.com
+```
+
+未设置 `IMAGE_BASE_URL` 时，PicHost 会根据反代转发的 `Host` 与 `X-Forwarded-Proto` 推断公网地址。
+
+## 双域名
+
+若后台与图片使用不同域名，两个 `server` 块均可 **全量反代** 到同一端口；隔离由 PicHost 中间件完成。
+
+详见专章：[双域名分离](./domain-separation.md)。
+
+## Cloudflare 橙云
+
+PicHost 应用运行在 **自有服务器 / Docker**（端口 `6892`），Cloudflare 侧推荐：
+
+| 做法 | 说明 |
+| ---- | ---- |
+| **DNS 橙云** | `admin` / `pic` 两个子域 Proxied → 源站反代 `6892`，SSL **Full (strict)** |
+| **DNS 优选** | 与 PicHost 兼容；Host 仍为正式域名 |
+| **R2** | 在存储页作对象后端，非 Pages 托管应用 |
+| **源站防火墙** | 仅放行 [Cloudflare IP](https://www.cloudflare.com/ips/)，禁止公网直连 `6892` |
+
+**不建议：**
+
+- 用 **Cloudflare Pages**（`*.pages.dev`）或 **Workers**（`*.workers.dev`）对 PicHost **整站反代** — 会多出第三 Host，且可能绕过双域名隔离（见 [双域名分离 · 安全与注意事项](./domain-separation.md#安全与注意事项)）
+- 在 CF 控制台「从 Git 创建 Worker」部署本仓库 — 当前为 `node-server` 预设，无法直接 `wrangler deploy`
+
+## 源站安全（双域名推荐）
+
+除 PicHost 中间件外，建议在反代 / 防火墙层加固：
+
+1. **`server_name` 白名单** — 仅网站域与图片域；`default_server` 拒绝裸 IP 与其它 Host
+2. **禁止公网暴露 6892** — 仅本机或内网反代访问；公网只开 80/443
+3. **橙云时限制源站来源 IP** — 仅 Cloudflare 回源 IP 段
+
+双域名场景下 PicHost **不会** 拒绝未配置的 Host；上述措施由运维层补齐。
+
+## Caddy 示例
+
+```caddy
+pic.example.com {
+  reverse_proxy 127.0.0.1:6892
+}
+```
+
+双域名时添加第二个站点块，后端地址相同即可。
+
+## 缓存注意
+
+图片 404/403 与域名隔离 404 响应带 **禁止缓存** 头，避免 CDN 长时间缓存错误页面。若在前端再加 CDN，请对动态 API 路径谨慎缓存。
+
+## 相关
+
+- [环境变量](./configuration.md) — `SITE_BASE_URL`、`IMAGE_BASE_URL`
+- [快速开始](./getting-started.md) — Docker 端口

docs-site/guide/storage.md

@@ -0,0 +1,72 @@
+# 存储
+
+PicHost 支持 **本地磁盘** 与 **S3 兼容对象存储**（Cloudflare R2、腾讯云 COS、阿里云 OSS、AWS S3 等）。管理员在 **存储**（`/storage`）页管理后端；新上传写入 **默认后端**。
+
+![存储管理](/screenshots/storage.png)
+
+## 存储结构（本地）
+
+```
+/data
+├── pichost.db          # SQLite：用户、会话、设置、storage_backends、images 索引
+└── images/             # 本地后端时的全部图片文件
+```
+
+- 新上传：`images/随机ID.webp` 或 `images/年/月/随机ID.webp`（可在设置中切换扁平模式）
+- 迁移遗留：`images/blog/...` 等子路径
+- 云存储时文件在对应桶内，索引仍在 SQLite `images` 表
+
+所有图片 **key** 以 `images/` 开头。上传 API **不再接受** `folder` 参数。
+
+## 添加存储后端
+
+1. 以管理员登录，打开 **存储** → **添加存储**。
+2. 选择类型：**本地磁盘** 或 **S3 兼容**（含 R2 / COS / OSS 预设）。
+3. 填写连接信息（桶名、Endpoint、Access Key 等）。
+4. 保存后可 **设默认**，新上传将写入该后端。
+
+### Cloudflare R2 要点
+
+| 项 | 值 |
+| -- | -- |
+| Endpoint | `https://<account_id>.r2.cloudflarestorage.com` |
+| Region | `auto` |
+| 桶 | 你的 R2 桶名 |
+| 密钥 | R2 API Token 的 Access Key / Secret Key |
+
+若仓库 **cloudflare** 分支专用于「仅 R2」部署，也可用环境变量预设，见 [文档首页](./index.md) 分支说明。
+
+### 环境变量（可选）
+
+部分部署用环境变量初始化默认 S3 后端（如 `STORAGE_BACKEND=s3`、`S3_ENDPOINT`、`S3_BUCKET`、`S3_ACCESS_KEY`、`S3_SECRET_KEY`、`S3_REGION`）。**UI 中配置的后端信息存于 SQLite**，与环境变量并存时以管理界面为准管理多后端。
+
+## 直链模式
+
+每个后端可配置公开 URL 行为：
+
+| 模式 | 说明 |
+| ---- | ---- |
+| **proxy** | 通过 PicHost 同源代理出图（`GET /images/...`） |
+| **public** | 302 重定向到桶/CDN 公网地址 |
+
+复制链接时使用 **图片域名**（`IMAGE_BASE_URL`）拼接路径。开启「隐藏 images 前缀」后 URL 可能更短，服务按文件名或路径反查索引。
+
+## 用量与筛选
+
+- 存储页展示各后端用量（本地扫描目录，对象存储查询 API）
+- 图库可按存储后端筛选（管理员）
+
+## 备份
+
+请同时备份：
+
+- `data/images/`（本地后端）
+- `data/pichost.db`
+- 各云桶中的对象
+
+从 v1.1.x 升级且存在 `data/blog/` 等并列目录时，见 [v1.2 迁移](./migration.md)。
+
+## 相关
+
+- [环境变量](./configuration.md) — `STORAGE_USE_DATE_PATH`、`HIDE_FOLDER_IN_URL`
+- [用户与权限](./users-and-permissions.md) — 谁可以管理存储

docs-site/guide/twikoo.md

@@ -0,0 +1,53 @@
+# Twikoo
+
+PicHost 兼容 **Twikoo** 与 **EasyImage 2.0** 图片上传协议，评论系统可像接 EasyImage 一样配置。
+
+## Twikoo 配置
+
+在 Twikoo 环境变量或配置中设置：
+
+| 配置项 | 值 |
+| ------ | -- |
+| `IMAGE_CDN` | `easyimage` |
+| `IMAGE_CDN_URL` | `https://你的域名/api/index.php` |
+| `IMAGE_CDN_TOKEN` | 与全局 `API_UPLOAD_TOKEN` 相同 |
+
+- 使用 **网站域名**（管理后台域）作为 `IMAGE_CDN_URL` 的主机名
+- Token 需在 PicHost **API** 页生成，或通过 `API_UPLOAD_TOKEN` 环境变量设置
+
+## 上传接口
+
+`POST /api/index.php`
+
+表单字段：
+
+| 字段 | 说明 |
+| ---- | ---- |
+| `image` | 图片文件 |
+| `token` | 全局 API Token（与 `Auth-Token` 等效） |
+
+```bash
+curl -X POST "https://admin.example.com/api/index.php" \
+  -F "token=YOUR_TOKEN" \
+  -F "image=@./demo.png"
+```
+
+上传的图片存入 `images/` 目录，归属与 **全局 Token** 相同（管理员）。
+
+## 与 REST API 的区别
+
+| 项目 | REST `/api/images/upload` | Twikoo `/api/index.php` |
+| ---- | ------------------------- | ------------------------ |
+| 鉴权 | `Auth-Token` 请求头 | 表单 `token` |
+| 响应格式 | PicHost JSON | EasyImage 兼容 JSON |
+| Token | 全局或个人 | 仅全局 Token |
+
+## 双域名部署
+
+Twikoo 上传应走 **网站域名**（`SITE_BASE_URL`），图片展示走 **图片域名**（`IMAGE_BASE_URL`）。详见 [双域名分离](./domain-separation.md)。
+
+## 相关
+
+- [API](./api.md)
+- [用户与权限](./users-and-permissions.md)
+- [环境变量](./configuration.md)

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

@@ -0,0 +1,58 @@
+# 用户与权限
+
+PicHost 使用基于角色的访问控制（RBAC）：**管理员（admin）** 与 **普通用户（user）**。权限在服务端强制，不可仅靠前端绕过。
+
+## 角色能力
+
+| 能力 | 管理员 | 普通用户 |
+| ---- | :----: | :------: |
+| 上传图片 | ✓ | ✓ |
+| 查看自己的图库 | ✓ | ✓ |
+| 查看全部图库 / 上传者标签 | ✓ | — |
+| 存储后端管理（`/storage`） | ✓ | — |
+| 系统设置（`/settings`） | ✓ | — |
+| 开放注册开关 | ✓ | — |
+| 全局 API Token 管理 | ✓ | — |
+| 个人 API Token | ✓ | ✓ |
+| 统计页（含注册用户数） | ✓ | 部分 |
+| 操作日志 | ✓ | — |
+
+普通用户顶栏：**API**、**统计**；用户菜单：**修改密码**、**退出登录**。
+
+## 鉴权场景
+
+| 场景 | 鉴权方式 | 图片归属 / 可见范围 |
+| ---- | -------- | ------------------- |
+| 网页上传 | Session Cookie | 当前登录用户 |
+| API 上传 + **个人 Token** | `Auth-Token` 头 | Token 所属用户 |
+| API 上传 + **全局 Token** | `Auth-Token` 头 | 管理员（`userId` 为空） |
+| Twikoo `POST /api/index.php` | 表单 `token` | 与全局 Token 相同 |
+| 图库列表 / 搜索 / 删除 | Session 或 Token | 普通用户仅自己；管理员全部 |
+| 图片直链 `GET /images/...` | 无（Referer 防盗链） | 知道 URL 即可访问 |
+
+## 注册与账号
+
+- 默认仅管理员可创建用户；管理员可在设置中 **开放注册**
+- 密码使用 scrypt 哈希存储
+- Web 登录需先完成滑动拼图验证（拖动滑块对齐缺口）
+- 登录失败有速率限制
+
+## 上传偏好与自动删除
+
+- **上传偏好**（首页卡片翻转）：客户端预压缩、自动复制链接等，按用户保存
+- **自动删除**：管理员可设全局策略；用户可设个人策略。启用后仅影响 **之后新上传** 的图片
+
+## API Token 说明
+
+| 类型 | 谁管理 | 上传归属 | 典型用途 |
+| ---- | ------ | -------- | -------- |
+| **全局 Token** | 管理员（API 页） | 管理员账号 | Twikoo、站点级脚本 |
+| **个人 Token** | 各用户（API 页） | 该用户 | 个人博客、私有脚本 |
+
+若设置了环境变量 `API_UPLOAD_TOKEN`，则全局 Token 被锁定，见 [环境变量](./configuration.md)。
+
+## 相关
+
+- [API](./api.md)
+- [Twikoo](./twikoo.md)
+- [存储](./storage.md)

docs-site/index.md

@@ -0,0 +1,32 @@
+---
+layout: home
+
+hero:
+  name: PicHost
+  text: 个人轻量图床
+  tagline: 自托管 · 多用户 · Docker · API · Twikoo · 本地磁盘或对象存储
+  actions:
+    - theme: brand
+      text: 快速开始
+      link: /guide/getting-started
+    - theme: alt
+      text: 查看 API
+      link: /guide/api
+    - theme: alt
+      text: GitHub
+      link: https://github.com/O96u/PicHost
+
+features:
+  - title: 拖拽 / 粘贴上传
+    details: 支持点击、拖拽与 Ctrl+V 粘贴；服务端 WebP 压缩与 Referer 防盗链。
+  - title: 多后端存储
+    details: 本地磁盘 + S3 兼容（R2 / COS / OSS / AWS）；proxy 或 public 直链模式。
+  - title: 多用户与权限
+    details: 管理员与普通用户 RBAC；全局 Token 与个人 Token；图库按归属隔离。
+  - title: Docker 零配置
+    details: 首次访问 Web 引导创建管理员；`docker exec pichost reset-password` 重置密码。
+  - title: 双域名分离
+    details: 单实例 + 两个域名全量反代；应用内中间件隔离后台与图片域。
+  - title: Twikoo 兼容
+    details: "POST /api/index.php 兼容 EasyImage 2.0 协议，评论系统一键接入。"
+---