refactor(frontend): colocate admin components and split service layer

Move route-specific admin components from components/common/admin into
app/(main)/admin/<feature>/components/. Split AdminService god object into
domain services, fix UploadService to use BaseService, add AdminUploadService,
consolidate DB export into DbManageService, and migrate consumers to the
unified services entry.

frontend/app/(main)/admin/files/components/storage-config-tab.tsx

@@ -0,0 +1,420 @@
+"use client"
+
+import * as React from "react"
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query"
+import {Database, Loader2, Play, Save} from "lucide-react"
+import {toast} from "sonner"
+
+import {Badge} from "@/components/ui/badge"
+import {Button} from "@/components/ui/button"
+import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card"
+import {Field, FieldDescription, FieldGroup, FieldLabel} from "@/components/ui/field"
+import {Input} from "@/components/ui/input"
+import {Progress} from "@/components/ui/progress"
+import {Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"
+import {Switch} from "@/components/ui/switch"
+import services from "@/lib/services"
+import type {
+  ObjectStorageConfig,
+  StorageConfig,
+  StorageDriver,
+  TaskExecution,
+  TaskExecutionStatus
+} from "@/lib/services/admin/types"
+
+const storageConfigKey = "storage_config"
+const storageMigrationTaskType = "storage_migration"
+
+const driverLabels: Record<StorageDriver, string> = {
+  local: "本地文件系统",
+  s3: "AWS S3",
+  r2: "Cloudflare R2",
+  minio: "MinIO",
+  oss: "阿里云 OSS",
+  webdav: "WebDAV",
+}
+
+const emptyObjectConfig: ObjectStorageConfig = {
+  endpoint: "",
+  region: "",
+  bucket: "",
+  access_key_id: "",
+  secret_access_key: "",
+  path_style: false,
+  key_prefix: "",
+  cdn_url: "",
+}
+
+function normalizeConfig(config: StorageConfig): StorageConfig {
+  const s3 = {...emptyObjectConfig, ...config.s3}
+  const r2 = {...emptyObjectConfig, ...config.r2}
+  const minio = {...emptyObjectConfig, ...config.minio}
+  const oss = {...emptyObjectConfig, ...config.oss}
+  const webdav = {...config.webdav}
+  return {
+    ...config,
+    local: {root: config.local?.root || "."},
+    s3: {...s3, region: s3.region || "us-east-1"},
+    r2: {...r2, region: r2.region || "auto"},
+    minio: {...minio, region: minio.region || "us-east-1", path_style: config.minio?.path_style ?? true},
+    oss,
+    webdav: {
+      endpoint: webdav.endpoint || "",
+      username: webdav.username || "",
+      password: webdav.password || "",
+      base_path: webdav.base_path || "",
+    },
+  }
+}
+
+type StorageMigrationView = {
+  state: "idle" | TaskExecutionStatus
+  id?: string
+  task_id?: string
+  source_driver?: StorageDriver
+  target_driver?: StorageDriver
+  error?: string
+}
+
+type StorageMigrationPayload = {
+  target: StorageConfig
+}
+
+function parseMigrationPayload(payload: string): StorageConfig | undefined {
+  try {
+    const parsed = JSON.parse(payload) as Partial<StorageMigrationPayload>
+    return parsed.target ? normalizeConfig(parsed.target) : undefined
+  } catch {
+    return undefined
+  }
+}
+
+function driverLabel(driver?: StorageDriver): string {
+  return driver ? driverLabels[driver] : "未知"
+}
+
+function latestMigration(executions: TaskExecution[], current?: StorageConfig): StorageMigrationView {
+  const execution = executions[0]
+  if (!execution || execution.status === "succeeded") {
+    return {state: "idle"}
+  }
+  const target = parseMigrationPayload(execution.payload)
+  return {
+    state: execution.status,
+    id: execution.id,
+    task_id: execution.task_id,
+    source_driver: current?.driver,
+    target_driver: target?.driver,
+    error: execution.error_message,
+  }
+}
+
+export function StorageConfigTab() {
+  const queryClient = useQueryClient()
+  const [config, setConfig] = React.useState<StorageConfig | null>(null)
+  const query = useQuery({
+    queryKey: ["admin", "storage-config"],
+    queryFn: async () => {
+      const [configRecord, executions] = await Promise.all([
+        services.adminSystemConfig.getSystemConfig(storageConfigKey),
+        services.adminTask.listTaskExecutions({task_type: storageMigrationTaskType, page: 1, page_size: 1}),
+      ])
+      const current = normalizeConfig(JSON.parse(configRecord.value) as StorageConfig)
+      const migration = latestMigration(executions.items, current)
+      return {
+        config: current,
+        migration,
+      }
+    },
+    refetchInterval: (result) => {
+      const state = result.state.data?.migration.state
+      return state === "pending" || state === "running" ? 2000 : false
+    },
+  })
+
+  React.useEffect(() => {
+    if (query.data?.config) {
+      setConfig((current) => {
+        const normalized = normalizeConfig(query.data.config)
+        if (current) {
+          return {
+            ...normalized,
+            driver: current.driver,
+          }
+        }
+        return normalized
+      })
+    }
+  }, [query.data?.config])
+
+  const saveMutation = useMutation({
+    mutationFn: async (value: StorageConfig) => {
+      const activeDriver = query.data?.config.driver || value.driver
+      const valueToSave = {
+        ...value,
+        driver: activeDriver,
+      }
+      await services.adminSystemConfig.updateSystemConfig(storageConfigKey, {
+        value: JSON.stringify(valueToSave),
+      })
+    },
+    onSuccess: () => {
+      toast.success("存储配置已保存")
+      void queryClient.invalidateQueries({queryKey: ["admin", "storage-config"]})
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "保存存储配置失败")
+      void queryClient.invalidateQueries({queryKey: ["admin", "storage-config"]})
+    },
+  })
+
+  const migrateMutation = useMutation({
+    mutationFn: async (value: StorageConfig) => {
+      const payload: StorageMigrationPayload = {target: value}
+      return services.adminTask.dispatchTask({
+        task_type: storageMigrationTaskType,
+        payload: JSON.stringify(payload),
+      })
+    },
+    onSuccess: () => {
+      toast.success("存储迁移任务已下发")
+      void queryClient.invalidateQueries({queryKey: ["admin", "storage-config"]})
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "下发存储迁移任务失败")
+      void queryClient.invalidateQueries({queryKey: ["admin", "storage-config"]})
+    },
+  })
+  const runMutation = useMutation({
+    mutationFn: (executionID: string) => services.adminTask.retryTaskExecution(executionID),
+    onSuccess: () => {
+      toast.success("存储迁移任务已重新下发")
+      void queryClient.invalidateQueries({queryKey: ["admin", "storage-config"]})
+    },
+    onError: (error: Error) => toast.error(error.message || "运行存储迁移失败"),
+  })
+
+  if (query.isPending || !config) {
+    return <div className="flex justify-center py-20"><Loader2 className="animate-spin" /></div>
+  }
+
+  const migration = query.data?.migration
+  const isReadOnly = migration ? migration.state !== "idle" : false
+  const isFormDisabled =
+    (migration ? (migration.state === "pending" || migration.state === "running") : false) ||
+    saveMutation.isPending ||
+    migrateMutation.isPending
+
+  const updateObject = (driver: "s3" | "r2" | "minio" | "oss", patch: Partial<ObjectStorageConfig>) => {
+    setConfig((current) => current ? {
+      ...current,
+      [driver]: {...current[driver], ...patch},
+    } : current)
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-6">
+      {isReadOnly && migration && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              存储维护模式
+              <Badge variant={migration.state === "failed" ? "destructive" : "secondary"}>
+                {migration.state}
+              </Badge>
+            </CardTitle>
+            <CardDescription>
+              {driverLabel(migration.source_driver)} → {driverLabel(migration.target_driver)}。迁移期间文件只允许读取，禁止上传、删除和清理。
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3">
+            <Progress value={migration.state === "succeeded" ? 100 : undefined} />
+            <p className="text-sm text-muted-foreground">
+              迁移进度请查看任务执行日志：{migration.task_id || "尚未下发"}
+            </p>
+            {migration.error && <p className="text-sm text-destructive">{migration.error}</p>}
+          </CardContent>
+          <CardFooter>
+            <Button
+              variant="outline"
+              disabled={migration.state !== "failed" || !migration.id || runMutation.isPending}
+              onClick={() => migration.id && runMutation.mutate(migration.id)}
+            >
+              {runMutation.isPending ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Play data-icon="inline-start" />}
+              重试迁移
+            </Button>
+          </CardFooter>
+        </Card>
+      )}
+
+      <Card className="border border-dashed shadow-sm">
+        <CardHeader className="border-b border-dashed pb-4">
+          <div className="flex items-center gap-2">
+            <div className="rounded-lg bg-indigo-500/10 p-1.5 text-indigo-500">
+              <Database className="size-4" />
+            </div>
+            <div>
+              <CardTitle className="text-base font-semibold">文件存储</CardTitle>
+              <CardDescription className="text-xs">
+                默认使用本地存储。配置系统文件的存储媒介，切换存储类型且已有文件时，系统会自动进入维护模式并迁移文件。
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="pt-6">
+          <FieldGroup className="space-y-6">
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <Field className="flex flex-col gap-1.5 md:col-span-2">
+                <FieldLabel className="text-xs font-semibold">存储类型</FieldLabel>
+                <Select
+                  value={config.driver}
+                  disabled={isFormDisabled}
+                  onValueChange={(value) => setConfig({...config, driver: value as StorageDriver})}
+                >
+                  <SelectTrigger className="w-full border-dashed bg-card text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {(Object.keys(driverLabels) as StorageDriver[]).map((driver) => (
+                        <SelectItem key={driver} value={driver}>{driverLabels[driver]}</SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </Field>
+
+              {config.driver === "local" && (
+                <div className="md:col-span-2">
+                  <TextField
+                    label="根目录"
+                    value={config.local.root}
+                    placeholder="."
+                    onChange={(root) => setConfig({...config, local: {root}})}
+                  />
+                </div>
+              )}
+
+              {(config.driver === "s3" || config.driver === "r2" || config.driver === "minio" || config.driver === "oss") && (
+                <ObjectFields
+                  driver={config.driver as "s3" | "r2" | "minio" | "oss"}
+                  value={config[config.driver as "s3" | "r2" | "minio" | "oss"]}
+                  onChange={(patch) => updateObject(config.driver as "s3" | "r2" | "minio" | "oss", patch)}
+                />
+              )}
+
+              {config.driver === "webdav" && (
+                <>
+                  <div className="md:col-span-2">
+                    <TextField label="服务地址" value={config.webdav.endpoint} placeholder="https://dav.example.com" onChange={(endpoint) => setConfig({...config, webdav: {...config.webdav, endpoint}})} />
+                  </div>
+                  <TextField label="用户名" value={config.webdav.username} onChange={(username) => setConfig({...config, webdav: {...config.webdav, username}})} />
+                  <TextField label="密码" type="password" value={config.webdav.password} onChange={(password) => setConfig({...config, webdav: {...config.webdav, password}})} />
+                  <div className="md:col-span-2">
+                    <TextField label="基础路径" value={config.webdav.base_path} placeholder="wavelet" onChange={(base_path) => setConfig({...config, webdav: {...config.webdav, base_path}})} />
+                  </div>
+                </>
+              )}
+            </div>
+          </FieldGroup>
+        </CardContent>
+        <CardFooter className="justify-end gap-2 flex-col sm:flex-row items-end sm:items-center border-t border-dashed pt-4 mt-6">
+          {config.driver !== query.data?.config.driver && (
+            <span className="text-xs text-amber-500 mr-auto text-left max-w-md">
+              ⚠️ 您已切换存储类型。请先点击“保存配置”保存各存储端的配置凭据，然后点击“开始迁移”手动执行文件迁移。
+            </span>
+          )}
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              disabled={isFormDisabled}
+              onClick={() => saveMutation.mutate(config)}
+              className="border-dashed"
+            >
+              {saveMutation.isPending ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Save data-icon="inline-start" />}
+              保存配置
+            </Button>
+            {config.driver !== query.data?.config.driver && (
+              <Button
+                disabled={isFormDisabled}
+                onClick={() => migrateMutation.mutate(config)}
+              >
+                {migrateMutation.isPending ? <Loader2 data-icon="inline-start" className="animate-spin" /> : <Play data-icon="inline-start" />}
+                开始迁移
+              </Button>
+            )}
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}
+
+function ObjectFields({
+  driver,
+  value,
+  onChange,
+}: {
+  driver: "s3" | "r2" | "minio" | "oss"
+  value: ObjectStorageConfig
+  onChange: (patch: Partial<ObjectStorageConfig>) => void
+}) {
+  return (
+    <>
+      {driver === "r2" && (
+        <div className="md:col-span-2">
+          <TextField label="Account ID" value={value.account_id || ""} onChange={(account_id) => onChange({account_id})} />
+        </div>
+      )}
+      {driver !== "s3" && (
+        <div className="md:col-span-2">
+          <TextField label="Endpoint" value={value.endpoint} placeholder="https://..." onChange={(endpoint) => onChange({endpoint})} />
+        </div>
+      )}
+      <TextField label="Region" value={value.region} onChange={(region) => onChange({region})} />
+      <TextField label="Bucket" value={value.bucket} onChange={(bucket) => onChange({bucket})} />
+      <TextField label="Access Key ID" value={value.access_key_id} onChange={(access_key_id) => onChange({access_key_id})} />
+      <TextField label="Secret Access Key" type="password" value={value.secret_access_key} onChange={(secret_access_key) => onChange({secret_access_key})} />
+      <TextField label="对象前缀" value={value.key_prefix} placeholder="uploads" onChange={(key_prefix) => onChange({key_prefix})} />
+      <TextField label="CDN 地址" value={value.cdn_url} placeholder="https://cdn.example.com" onChange={(cdn_url) => onChange({cdn_url})} />
+      {(driver === "s3" || driver === "minio") && (
+        <div className="md:col-span-2">
+          <Field orientation="horizontal" className="flex items-center justify-between border border-dashed rounded-lg p-4 bg-muted/30">
+            <div className="flex flex-col gap-0.5">
+              <FieldLabel className="text-xs font-semibold cursor-pointer">Path Style</FieldLabel>
+              <FieldDescription className="text-[11px] leading-relaxed text-muted-foreground">MinIO 等自托管 S3 通常需要开启。</FieldDescription>
+            </div>
+            <Switch checked={value.path_style} onCheckedChange={(path_style) => onChange({path_style})} />
+          </Field>
+        </div>
+      )}
+    </>
+  )
+}
+
+function TextField({
+  label,
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+}: {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  type?: React.HTMLInputTypeAttribute
+}) {
+  return (
+    <Field className="flex flex-col gap-1.5">
+      <FieldLabel className="text-xs font-semibold">{label}</FieldLabel>
+      <Input
+        type={type}
+        value={value}
+        placeholder={placeholder}
+        onChange={(event) => onChange(event.target.value)}
+        className="border-dashed bg-card text-xs"
+      />
+    </Field>
+  )
+}