feat(appearance): 主题与壁纸搬到服务端（账号级）—— 回答"为什么背景存在本地"

用户质问：「为什么背景是保存在本地而不是服务器！」当时的实情是主题与壁纸只写
localStorage：换设备/换浏览器就没了，而且**多账号共用一份**（键是全局常量
`agentmail.background`）—— 同一台机器换账号背景不跟着走。而 localStorage 的 ~5MB
配额也解释了客户端那套"压到 2.4MB 以内"的限制本来就是为本地存储设计的。

现在：**服务端是权威（账号级），本地只是缓存**（首屏秒开、离线可用）。

## 服务端

- 新表 `user_appearance`（两种方言），用**列**而不是 JSON：blob GC 要一眼看出
  "这张图还有没有人用"。
- `/api/v1/me/appearance`：GET / PUT（主题+背景档）/ POST image（multipart）/
  GET image / DELETE image。鉴权同其余 /me/*（cookie 或 Bearer）。
- 图片走**内容寻址的 blob 存储**（与附件同一套），库里只存 sha256；上限 4MB 兜底
  （客户端会先压到 ~2.4MB），只收图片类型（非图片 415 —— 浏览器会把非图片渲染成
  空白，用户只会看到"设置了却没变化"），超限 413 不静默截断。
- ★ **blob GC 的引用源加了这张表**：我在实现前先读了 `SweepUnreferencedBlobs`，
  它只认 attachments / calendar_attachments。漏了这一处，壁纸会在下次 GC 时被当
  孤儿删掉，而库里那行还在 —— 表现为"图 404、设置却显示已设置"。判据同时验了
  壁纸存活**与**孤儿确实被清（否则"还在"可能只是因为 GC 没跑）。

## 客户端

- `lib/appearance.ts`（纯函数：两侧形状换算、data URL→Blob）+ `stores/appearanceSync.ts`
  （pull / push / 去抖订阅 / 账号切换重新拉取）。
- 三条不变量都有判据：拉取以服务端为准；★ **拉取不会再推回去**（否则是自触发回环，
  一次拉取顺带一次 PUT，服务端 updated_at 被无意义刷新）；本地改动会推上去。
- 壁纸**只在换图时上传一次**（几 MB 不该每次 PUT 都跟着走）。
- 降级**必须可见**：未登录/不可达 → `local-only`，推失败 → `pending`，背景设置里
  有徽标与说明（"已同步 / 待同步 / 仅本机"）。静默降级会让人以为已经同步，
  然后在另一台机器上发现没有 —— 正是这次的缺陷。
- 图片用**带认证的 fetch** 取回再转 data URL：`<img src>` 发不出 Bearer，而
  `?token=` 会把密钥写进历史记录与服务端日志（明确不做）。

## 判据

- Go 10 条：往返、★多账号隔离、非法值归一、上传/取回字节一致、非图片 415、
  超限 413、删除、未登录 401（五个端点）、★GC 存活 + 孤儿对照。
- 客户端 10 条：形状换算、image 无图退回 none、越界夹取、拉取生效、
  ★拉取不推送、推送 payload、未登录/500 → local-only、推失败 → pending、
  ★壁纸只上传一次。
- 全量：server 10 包全绿、客户端 249 通过（含打包一致性判据 —— 它先红后绿，
  因为前端改了必须重打安装包，这条护栏是先前特意留下的）。

## 线上验证与交付

- jianf 设置 → 回包 saved=true；**gui-lab 读到自己那份默认值**（隔离生效）；
  gui-lab 上传 67B PNG → 取回 sha256 一致、`has_image=true`；DELETE 后 404。
- 网关已重打（WebUI 内嵌）并部署；Electron 安装包已重打（AppImage + deb）。

遗留：鸿蒙端还没有外观功能（数据已在服务端，将来可直接读）；本地缓存仍在（离线可用）。

client/electron/src/components/BackgroundPicker.tsx

@@ -1,4 +1,6 @@
 import { useRef, useState } from 'react';
+
+import { useAppearanceSync } from '../stores/appearanceSync';
 import {
   DEFAULT_BACKGROUND,
   MAX_DATA_URL_BYTES,
@@ -64,6 +66,7 @@ export default function BackgroundPicker() {
     <div>
       <div className="flex items-center gap-2 mb-1">
         <h3 className="text-sm font-medium text-gray-900">背景</h3>
+        <SyncBadge />
         {active && (
           <button
             onClick={reset}
@@ -239,3 +242,42 @@ function Slider({
 
 /** 「恢复默认」用到，导出以便测试断言默认值形状。 */
 export { DEFAULT_BACKGROUND };
+
+/**
+ * 同步状态徽标。
+ *
+ * 存在的理由：外观已经搬到服务端（账号级），但**服务端不可达/未登录时只能留在本机**。
+ * 那种情况下必须让用户看见 —— 静默降级会让人以为"已经同步了"，然后在另一台机器上
+ * 发现没有，而这正是 2026-09-13 报的那个缺陷（"为什么背景是保存在本地而不是服务器"）。
+ */
+function SyncBadge() {
+  const status = useAppearanceSync(s => s.status);
+  if (status === 'idle') return null;
+  const map: Record<string, { text: string; cls: string; title: string }> = {
+    synced: {
+      text: '已同步',
+      cls: 'text-green-700 bg-green-50',
+      title: '已保存到你的账号，换设备/换浏览器也在'
+    },
+    pending: {
+      text: '待同步',
+      cls: 'text-amber-700 bg-amber-50',
+      title: '改动只在本机，服务端暂时没存上（网络或权限问题），稍后会自动重试'
+    },
+    'local-only': {
+      text: '仅本机',
+      cls: 'text-gray-600 bg-gray-100',
+      title: '未登录或服务端不可达，这份外观只保存在这台设备上'
+    }
+  };
+  const it = map[status];
+  if (!it) return null;
+  return (
+    <span
+      className={`ml-auto text-2xs px-1.5 py-0.5 rounded-full ${it.cls}`}
+      title={it.title}
+    >
+      {it.text}
+    </span>
+  );
+}