feat(web): add me storage page

src/app/me/page.tsx

@@ -21,6 +21,11 @@ export default async function MePage() {
       <HeaderTitle title="我的" />
       <div className="flex flex-col gap-3 px-[18px] pb-5">
         <ProfileHero user={state.user} />
+        <MenuRow
+          href="/me/storage"
+          title="附件与存储"
+          description="当前附件存储模式、服务器文件存储与阿里 OSS"
+        />
         <MenuRow
           href="/me/security"
           title="账号与安全"

src/app/me/storage/page.tsx

@@ -0,0 +1,20 @@
+import { AppShell, PageNav, StatusBar } from "@/components/app-ui";
+import { AttachmentStorageClient } from "@/components/attachment-storage-client";
+import { requirePageSession } from "@/lib/boss-auth";
+import { getAttachmentStorageConfig } from "@/lib/boss-data";
+import { sanitizeAttachmentStorageConfig } from "@/lib/boss-storage";
+
+export const dynamic = "force-dynamic";
+
+export default async function StoragePage() {
+  const session = await requirePageSession();
+  const config = sanitizeAttachmentStorageConfig(await getAttachmentStorageConfig(session.account));
+
+  return (
+    <AppShell bottomNav={false}>
+      <StatusBar />
+      <PageNav title="附件与存储" backHref="/me" />
+      <AttachmentStorageClient key={`${config.mode}:${config.updatedAt}`} config={config} />
+    </AppShell>
+  );
+}

src/components/attachment-storage-client.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import clsx from "clsx";
+import type { SanitizedUserAttachmentStorageConfig } from "@/lib/boss-storage";
+
+type StorageMode = SanitizedUserAttachmentStorageConfig["mode"];
+
+type StorageDraft = {
+  mode: StorageMode;
+  ossProvider: "aliyun_oss";
+  accessKeyId: string;
+  accessKeySecret: string;
+  bucket: string;
+  endpoint: string;
+  region: string;
+  prefix: string;
+};
+
+function draftFromConfig(config: SanitizedUserAttachmentStorageConfig): StorageDraft {
+  return {
+    mode: config.mode,
+    ossProvider: config.ossProvider ?? "aliyun_oss",
+    accessKeyId: config.aliyunOss?.accessKeyId ?? "",
+    accessKeySecret: "",
+    bucket: config.aliyunOss?.bucket ?? "",
+    endpoint: config.aliyunOss?.endpoint ?? "",
+    region: config.aliyunOss?.region ?? "",
+    prefix: config.aliyunOss?.prefix ?? "",
+  };
+}
+
+function Field({
+  label,
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  type?: "text" | "password";
+}) {
+  return (
+    <label className="space-y-1">
+      <div className="text-[12px] text-[#8C8C8C]">{label}</div>
+      <input
+        type={type}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        className="w-full rounded-xl border border-[#E5E5EA] bg-[#F7F8FA] px-3 py-2 text-[14px] text-[#111111] outline-none"
+      />
+    </label>
+  );
+}
+
+export function AttachmentStorageClient({
+  config,
+}: {
+  config: SanitizedUserAttachmentStorageConfig;
+}) {
+  const router = useRouter();
+  const [draft, setDraft] = useState<StorageDraft>(() => draftFromConfig(config));
+  const [busyKey, setBusyKey] = useState<"save" | "validate" | null>(null);
+  const [message, setMessage] = useState("");
+
+  async function submit(kind: "save" | "validate") {
+    setBusyKey(kind);
+
+    const body =
+      draft.mode === "oss"
+        ? {
+            mode: "oss" as const,
+            ossProvider: "aliyun_oss" as const,
+            aliyunOss: {
+              accessKeyId: draft.accessKeyId,
+              bucket: draft.bucket,
+              endpoint: draft.endpoint,
+              region: draft.region,
+              prefix: draft.prefix,
+              ...(draft.accessKeySecret.trim() ? { accessKeySecret: draft.accessKeySecret } : {}),
+            },
+          }
+        : {
+            mode: "server_file" as const,
+          };
+
+    const response = await fetch(
+      kind === "validate" ? "/api/v1/storage/config/validate" : "/api/v1/storage/config",
+      {
+        method: kind === "validate" ? "POST" : "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      },
+    );
+    const result = (await response.json()) as { ok: boolean; message?: string };
+    setBusyKey(null);
+    setMessage(result.ok ? "附件存储配置已保存。" : result.message ?? "保存失败。");
+    if (result.ok) {
+      router.refresh();
+    }
+  }
+
+  const modeLabel = draft.mode === "server_file" ? "服务器文件存储" : "OSS";
+  const buttonLabel =
+    draft.mode === "server_file"
+      ? "切回服务器文件存储"
+      : busyKey === "validate"
+        ? "测试中"
+        : "测试并保存";
+
+  return (
+    <div className="space-y-3 px-[18px] pb-6">
+      <div className="rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
+        <div className="text-[16px] font-semibold text-[#111111]">当前用户附件存储模式</div>
+        <div className="mt-2 text-[13px] leading-6 text-[#57606A]">
+          当前模式：<span className="font-semibold text-[#111111]">{modeLabel}</span>
+          <br />
+          绑定账号：{config.account}
+          <br />
+          {draft.mode === "oss"
+            ? `OSS 提供方：阿里 OSS · 密钥${config.aliyunOss?.accessKeySecretConfigured ? "已保存" : "未保存"}`
+            : "附件将继续写入服务器文件存储。"}
+        </div>
+        <div className="mt-3 flex gap-2">
+          {(["server_file", "oss"] as const).map((mode) => {
+            const active = draft.mode === mode;
+            return (
+              <button
+                key={mode}
+                type="button"
+                onClick={() => setDraft((current) => ({ ...current, mode }))}
+                className={clsx(
+                  "rounded-full px-3 py-2 text-[12px] font-semibold",
+                  active ? "bg-[#07C160] text-white" : "bg-[#F5F5F7] text-[#57606A]",
+                )}
+              >
+                {mode === "server_file" ? "服务器文件存储" : "OSS"}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {draft.mode === "oss" ? (
+        <div className="space-y-3 rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
+          <div className="text-[16px] font-semibold text-[#111111]">阿里 OSS 配置</div>
+          <div className="rounded-2xl bg-[#F7F8FA] px-4 py-3 text-[12px] leading-6 text-[#57606A]">
+            当前仅支持阿里 OSS。AccessKey Secret 不会回显，留空表示沿用已保存的密钥。
+          </div>
+          <Field
+            label="AccessKey ID"
+            value={draft.accessKeyId}
+            onChange={(value) => setDraft((current) => ({ ...current, accessKeyId: value }))}
+            placeholder="请输入 AccessKey ID"
+          />
+          <Field
+            label="AccessKey Secret"
+            value={draft.accessKeySecret}
+            onChange={(value) => setDraft((current) => ({ ...current, accessKeySecret: value }))}
+            placeholder="请输入 AccessKey Secret"
+            type="password"
+          />
+          <Field
+            label="Bucket"
+            value={draft.bucket}
+            onChange={(value) => setDraft((current) => ({ ...current, bucket: value }))}
+            placeholder="例如 boss-attachments"
+          />
+          <Field
+            label="Endpoint"
+            value={draft.endpoint}
+            onChange={(value) => setDraft((current) => ({ ...current, endpoint: value }))}
+            placeholder="例如 oss-cn-hangzhou.aliyuncs.com"
+          />
+          <Field
+            label="Region"
+            value={draft.region}
+            onChange={(value) => setDraft((current) => ({ ...current, region: value }))}
+            placeholder="例如 oss-cn-hangzhou"
+          />
+          <Field
+            label="Prefix（可选）"
+            value={draft.prefix}
+            onChange={(value) => setDraft((current) => ({ ...current, prefix: value }))}
+            placeholder="例如 boss/"
+          />
+          <div className="grid grid-cols-2 gap-3">
+            <button
+              type="button"
+              onClick={() => void submit("validate")}
+              disabled={busyKey !== null}
+              className="rounded-full bg-[#07C160] px-4 py-2 text-[13px] font-semibold text-white disabled:opacity-60"
+            >
+              {buttonLabel}
+            </button>
+            <button
+              type="button"
+              onClick={() => void submit("save")}
+              disabled={busyKey !== null}
+              className="rounded-full border border-[#E5E5EA] bg-white px-4 py-2 text-[13px] font-semibold text-[#111111] disabled:opacity-60"
+            >
+              {busyKey === "save" ? "保存中" : "仅保存"}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-3 rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
+          <div className="text-[16px] font-semibold text-[#111111]">服务器文件存储</div>
+          <div className="rounded-2xl bg-[#F7F8FA] px-4 py-3 text-[12px] leading-6 text-[#57606A]">
+            切回后附件继续保存在服务器本地文件存储，不会走 OSS 配置校验。
+          </div>
+          <button
+            type="button"
+            onClick={() => void submit("save")}
+            disabled={busyKey !== null}
+            className="rounded-full bg-[#07C160] px-4 py-2 text-[13px] font-semibold text-white disabled:opacity-60"
+          >
+            {busyKey === "save" ? "保存中" : buttonLabel}
+          </button>
+        </div>
+      )}
+
+      {message ? (
+        <div className="rounded-2xl bg-[#F7F8FA] px-4 py-3 text-[12px] leading-6 text-[#57606A]">
+          {message}
+        </div>
+      ) : null}
+
+      {draft.mode === "oss" ? (
+        <div className="rounded-2xl bg-[#F7F8FA] px-4 py-3 text-[12px] leading-6 text-[#57606A]">
+          保存前请确认 Bucket、Endpoint 和 Region 都完整可用，测试通过后会同步写回当前账号配置。
+        </div>
+      ) : null}
+    </div>
+  );
+}