@fecommunity/reactpress 4.0.0-beta.14 → 4.0.0-beta.17

package/plugins/image-optimizer/admin/OptimizeDashboard.tsx

@@ -0,0 +1,249 @@
+import type { PluginSettingsPanelProps } from "@fecommunity/reactpress-toolkit/plugin/admin";
+import { App, Button, Progress, Spin } from "antd";
+import { useEffect, useRef, useState } from "react";
+
+import {
+  fetchOptimizeJob,
+  fetchOptimizeReport,
+  readApiErrorMessage,
+  startOptimizeJob,
+  type ImageOptimizeReport,
+  type OptimizeJob,
+} from "./api";
+import { usePluginDashboardText } from "./locale";
+
+import styles from "./optimize-dashboard.module.css";
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+
+function resolveConfig(config: Record<string, unknown>) {
+  const batchSize = Number(config.batchSize);
+  return {
+    batchSize: Number.isFinite(batchSize) ? Math.min(Math.max(batchSize, 1), 200) : 50,
+    skipGif: config.skipGif !== false,
+    rewriteContent: config.rewriteContent === true,
+    cleanupOriginals: config.cleanupOriginals === true,
+  };
+}
+
+export function OptimizeDashboard({ pluginId, pluginActive, config }: PluginSettingsPanelProps) {
+  const { message } = App.useApp();
+  const t = usePluginDashboardText(pluginId);
+
+  const [report, setReport] = useState<ImageOptimizeReport | null>(null);
+  const [job, setJob] = useState<OptimizeJob | null>(null);
+  const [loadingReport, setLoadingReport] = useState(false);
+  const [startingJob, setStartingJob] = useState(false);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const stopPolling = useCallback(() => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+  }, []);
+
+  const loadReport = useCallback(async () => {
+    setLoadingReport(true);
+    try {
+      const data = await fetchOptimizeReport();
+      setReport(data);
+    } catch (err) {
+      message.error(readApiErrorMessage(err, t("analyzeFailed", "分析失败")));
+    } finally {
+      setLoadingReport(false);
+    }
+  }, [message, t]);
+
+  const pollJob = useCallback(
+    (jobId: string) => {
+      stopPolling();
+
+      const refresh = () => {
+        void fetchOptimizeJob(jobId)
+          .then((next) => {
+            setJob(next);
+            if (next.status === "completed" || next.status === "failed") {
+              stopPolling();
+              void loadReport();
+            }
+          })
+          .catch((err) => {
+            stopPolling();
+            message.error(readApiErrorMessage(err, t("jobPollFailed", "获取任务进度失败")));
+          });
+      };
+
+      refresh();
+      pollRef.current = setInterval(refresh, 800);
+    },
+    [loadReport, message, stopPolling, t],
+  );
+
+  useEffect(() => {
+    if (pluginActive) {
+      void loadReport();
+    }
+  }, [loadReport, pluginActive]);
+
+  useEffect(() => () => stopPolling(), [stopPolling]);
+
+  const runJob = async (dryRun: boolean) => {
+    if (!pluginActive) return;
+    const opts = resolveConfig(config);
+    setStartingJob(true);
+    try {
+      const started = await startOptimizeJob({
+        dryRun,
+        batchSize: opts.batchSize,
+        limit: opts.batchSize,
+        skipGif: opts.skipGif,
+        rewriteContent: opts.rewriteContent,
+        cleanupOriginals: opts.cleanupOriginals,
+      });
+      setJob(started);
+      if (started.status === "completed" || started.status === "failed") {
+        void loadReport();
+        if (started.total === 0) {
+          message.info(t("jobEmpty", "没有待优化的图片（可能已全部优化，或原文件已不存在）。"));
+        } else if (dryRun) {
+          message.success(t("dryRunDone", "试运行完成（未写入数据库）。"));
+        }
+      } else {
+        pollJob(started.id);
+        if (dryRun) {
+          message.info(t("dryRun", "试运行（不写入）"));
+        }
+      }
+    } catch (err) {
+      message.error(readApiErrorMessage(err, t("runFailed", "启动任务失败")));
+    } finally {
+      setStartingJob(false);
+    }
+  };
+
+  if (!pluginActive) {
+    return (
+      <div className={styles.warn} data-testid="image-optimizer-inactive">
+        {t("inactiveHint", "请先在插件列表中启用本插件，才能执行分析与优化。")}
+      </div>
+    );
+  }
+
+  const jobRunning = job?.status === "pending" || job?.status === "running";
+  const jobDone = job?.status === "completed" || job?.status === "failed";
+  const jobPercent =
+    job && job.total > 0 ? Math.round((job.processed / job.total) * 100) : undefined;
+  const failedItems = job?.items.filter((item) => item.status === "failed").slice(0, 5) ?? [];
+
+  return (
+    <div className={styles.optimizeDashboard} data-testid="image-optimizer-dashboard">
+      <h2 className={styles.sectionTitle}>{t("title", "资源分析")}</h2>
+
+      <div className={styles.actions}>
+        <Button loading={loadingReport} onClick={() => void loadReport()}>
+          {t("analyze", "分析现状")}
+        </Button>
+        <Button loading={startingJob} onClick={() => void runJob(true)}>
+          {t("dryRun", "试运行（不写入）")}
+        </Button>
+        <Button type="primary" loading={startingJob || jobRunning} onClick={() => void runJob(false)}>
+          {t("run", "开始批量优化")}
+        </Button>
+      </div>
+
+      {loadingReport && !report ? (
+        <Spin />
+      ) : report ? (
+        <div className={styles.statsGrid}>
+          <div className={styles.statCard}>
+            <p className={styles.statLabel}>{t("total", "素材总数")}</p>
+            <p className={styles.statValue}>{report.total}</p>
+          </div>
+          <div className={styles.statCard}>
+            <p className={styles.statLabel}>{t("optimized", "已优化")}</p>
+            <p className={styles.statValue}>{report.alreadyOptimized}</p>
+          </div>
+          <div className={styles.statCard}>
+            <p className={styles.statLabel}>{t("pending", "待优化")}</p>
+            <p className={styles.statValue}>{report.needsOptimization}</p>
+          </div>
+          <div className={styles.statCard}>
+            <p className={styles.statLabel}>{t("estimatedSaved", "预估可节省")}</p>
+            <p className={styles.statValue}>{formatBytes(report.storageBytes.estimatedSaved)}</p>
+          </div>
+          <div className={styles.statCard}>
+            <p className={styles.statLabel}>{t("contentRefs", "内容引用")}</p>
+            <p className={styles.statValue}>
+              {report.contentRefs.articles} {t("articles", "文章")} / {report.contentRefs.pages}{" "}
+              {t("pages", "页面")}
+            </p>
+          </div>
+          <div className={styles.statCard}>
+            <p className={styles.statLabel}>{t("skipped", "已跳过")}</p>
+            <p className={styles.statValue}>
+              {report.skipped.nonImage + report.skipped.svg + report.skipped.gif + report.skipped.missing}
+            </p>
+          </div>
+        </div>
+      ) : null}
+
+      {job ? (
+        <div className={styles.progressBlock}>
+          <Progress
+            percent={jobPercent}
+            status={
+              job.status === "failed"
+                ? "exception"
+                : jobRunning
+                  ? "active"
+                  : job.total === 0
+                    ? "normal"
+                    : "success"
+            }
+            showInfo={job.total > 0}
+          />
+          <p className={styles.hint}>
+            {job.status === "failed"
+              ? `${t("jobFailed", "任务失败")}: ${job.error ?? ""}`
+              : jobRunning
+                ? job.total === 0
+                  ? t("jobScanning", "正在扫描待优化素材…")
+                  : t("jobRunning", "优化任务进行中…")
+                : t("jobDone", "任务已完成")}
+            {" · "}
+            {t("processed", "已处理")} {job.processed}/{job.total} · {t("succeeded", "成功")}{" "}
+            {job.succeeded} · {t("failed", "失败")} {job.failed}
+            {job.savedBytes > 0 ? ` · ${t("savedBytes", "已节省空间")} ${formatBytes(job.savedBytes)}` : ""}
+          </p>
+          {jobDone && job.total === 0 ? (
+            <p className={styles.emptyJob}>
+              {t("jobEmpty", "没有待优化的图片（可能已全部优化，或原文件已不存在）。")}
+            </p>
+          ) : null}
+          {job.contentRewrite ? (
+            <p className={styles.hint}>
+              URL 回写：{job.contentRewrite.articles} {t("articles", "文章")}、{job.contentRewrite.pages}{" "}
+              {t("pages", "页面")}、{job.contentRewrite.revisions} 修订
+            </p>
+          ) : null}
+          {failedItems.length > 0 ? (
+            <ul className={styles.errorList}>
+              {failedItems.map((item) => (
+                <li key={item.fileId}>
+                  {item.originalname}: {item.error}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export { OptimizeDashboard as SettingsPanel };

package/plugins/image-optimizer/admin/api.ts

@@ -0,0 +1,133 @@
+import { resolveApiBaseUrl } from "@fecommunity/reactpress-toolkit/plugin/react";
+
+const DEFAULT_API_BASE = "/api";
+
+export interface ImageOptimizeReport {
+  total: number;
+  alreadyOptimized: number;
+  needsOptimization: number;
+  skipped: {
+    nonImage: number;
+    svg: number;
+    gif: number;
+    missing: number;
+  };
+  storageBytes: {
+    current: number;
+    estimatedAfter: number;
+    estimatedSaved: number;
+  };
+  contentRefs: {
+    articles: number;
+    pages: number;
+  };
+}
+
+export interface OptimizeRunOptions {
+  dryRun?: boolean;
+  batchSize?: number;
+  skipGif?: boolean;
+  rewriteContent?: boolean;
+  cleanupOriginals?: boolean;
+  limit?: number;
+}
+
+export interface OptimizeJobItemResult {
+  fileId: string;
+  originalname: string;
+  status: "success" | "skipped" | "failed";
+  oldUrl?: string;
+  newUrl?: string;
+  savedBytes?: number;
+  error?: string;
+}
+
+export interface OptimizeJob {
+  id: string;
+  status: "pending" | "running" | "completed" | "failed";
+  dryRun: boolean;
+  total: number;
+  processed: number;
+  succeeded: number;
+  failed: number;
+  skipped: number;
+  savedBytes: number;
+  urlMap: Record<string, string>;
+  items: OptimizeJobItemResult[];
+  rewriteContent: boolean;
+  contentRewrite?: {
+    articles: number;
+    pages: number;
+    revisions: number;
+  };
+  error?: string;
+  startedAt: string;
+  finishedAt?: string;
+}
+
+function readAccessToken(): string | null {
+  if (typeof localStorage === "undefined") return null;
+  try {
+    const raw = localStorage.getItem("auth-storage");
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as { state?: { tokens?: { accessToken?: string } } };
+    return parsed.state?.tokens?.accessToken ?? null;
+  } catch {
+    return null;
+  }
+}
+
+function readApiErrorMessage(err: unknown, fallback: string): string {
+  if (err instanceof Error && err.message.trim()) return err.message;
+  return fallback;
+}
+
+async function optimizeFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const base = (await resolveApiBaseUrl(DEFAULT_API_BASE)).replace(/\/$/, "");
+  const token = readAccessToken();
+  const res = await fetch(`${base}${path}`, {
+    ...init,
+    headers: {
+      "Content-Type": "application/json",
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...init?.headers,
+    },
+  });
+  const body = (await res.json()) as {
+    success?: boolean;
+    code?: number;
+    data?: T;
+    msg?: string;
+    message?: string;
+  };
+  if (res.status === 401) {
+    throw new Error("SESSION_EXPIRED");
+  }
+  if (!res.ok) {
+    throw new Error(body.msg ?? body.message ?? `Request failed: ${res.status}`);
+  }
+  if (typeof body.code === "number" && body.code !== 0) {
+    throw new Error(body.message ?? "Request failed");
+  }
+  if (body.success === false) {
+    throw new Error(body.msg ?? "Request failed");
+  }
+  return body.data as T;
+}
+
+export function fetchOptimizeReport() {
+  return optimizeFetch<ImageOptimizeReport>("/file/optimize/report");
+}
+
+export function startOptimizeJob(options: OptimizeRunOptions) {
+  return optimizeFetch<OptimizeJob>("/file/optimize/run", {
+    method: "POST",
+    body: JSON.stringify(options),
+  });
+}
+
+export function fetchOptimizeJob(jobId: string) {
+  return optimizeFetch<OptimizeJob>(`/file/optimize/job/${encodeURIComponent(jobId)}`);
+}
+
+export { readApiErrorMessage };

package/plugins/image-optimizer/admin/index.ts

@@ -0,0 +1,16 @@
+import type { PluginAdminModule } from "@fecommunity/reactpress-toolkit/plugin/admin";
+
+export { SettingsPanel } from "./OptimizeDashboard";
+
+import { SettingsPanel } from "./OptimizeDashboard";
+
+export function registerAdmin(): void {
+  // Dashboard is mounted via SettingsPanel on the plugin settings page.
+}
+
+const pluginAdmin: PluginAdminModule = {
+  registerAdmin,
+  SettingsPanel,
+};
+
+export default pluginAdmin;

package/plugins/image-optimizer/admin/locale.ts

@@ -0,0 +1,68 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { resolveApiBaseUrl } from "@fecommunity/reactpress-toolkit/plugin/react";
+
+type LocaleMessages = Record<string, unknown>;
+
+function readNestedMessage(messages: LocaleMessages, path: string): string | undefined {
+  const parts = path.split(".");
+  let current: unknown = messages;
+  for (const part of parts) {
+    if (!current || typeof current !== "object") return undefined;
+    current = (current as Record<string, unknown>)[part];
+  }
+  return typeof current === "string" ? current : undefined;
+}
+
+function detectLocale(): string {
+  if (typeof document === "undefined") return "en";
+  const lang = document.documentElement.lang || navigator.language || "en";
+  return lang.toLowerCase().startsWith("zh") ? "zh" : "en";
+}
+
+async function fetchPluginLocale(pluginId: string, locale: string): Promise<LocaleMessages> {
+  const base = (await resolveApiBaseUrl("/api")).replace(/\/$/, "");
+  const token = (() => {
+    try {
+      const raw = localStorage.getItem("auth-storage");
+      if (!raw) return null;
+      const parsed = JSON.parse(raw) as { state?: { tokens?: { accessToken?: string } } };
+      return parsed.state?.tokens?.accessToken ?? null;
+    } catch {
+      return null;
+    }
+  })();
+  const res = await fetch(
+    `${base}/extension/plugins/${encodeURIComponent(pluginId)}/locales/${encodeURIComponent(locale)}`,
+    {
+      headers: {
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+    },
+  );
+  if (!res.ok) return {};
+  const body = (await res.json()) as { data?: { messages?: LocaleMessages } };
+  return body.data?.messages ?? {};
+}
+
+export function usePluginDashboardText(pluginId: string) {
+  const locale = detectLocale();
+  const [messages, setMessages] = useState<LocaleMessages>({});
+
+  useEffect(() => {
+    let cancelled = false;
+    void fetchPluginLocale(pluginId, locale).then((next) => {
+      if (!cancelled) setMessages(next);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [locale, pluginId]);
+
+  return useMemo(
+    () =>
+      (key: string, fallback: string) =>
+        readNestedMessage(messages, `dashboard.${key}`) ?? fallback,
+    [messages],
+  );
+}

package/plugins/image-optimizer/admin/optimize-dashboard.module.css

@@ -0,0 +1,80 @@
+.optimizeDashboard {
+  margin-bottom: 24px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+
+.sectionTitle {
+  margin: 0 0 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ant-color-text);
+}
+
+.statsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.statCard {
+  padding: 12px 14px;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 8px;
+  background: var(--ant-color-fill-quaternary);
+}
+
+.statLabel {
+  margin: 0 0 4px;
+  font-size: 12px;
+  color: var(--ant-color-text-secondary);
+}
+
+.statValue {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: var(--ant-color-text);
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.progressBlock {
+  margin-top: 12px;
+}
+
+.hint {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: var(--ant-color-text-secondary);
+}
+
+.emptyJob {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.warn {
+  margin: 0 0 16px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--ant-color-warning-bg);
+  border: 1px solid var(--ant-color-warning-border);
+  color: var(--ant-color-text);
+  font-size: 13px;
+}
+
+.errorList {
+  margin: 8px 0 0;
+  padding-left: 18px;
+  font-size: 13px;
+  color: var(--ant-color-error);
+}

package/plugins/image-optimizer/dist/config.d.ts

@@ -0,0 +1,8 @@
+import type { PluginContext } from '@fecommunity/reactpress-toolkit/plugin/server';
+export interface ImageOptimizerConfig {
+    batchSize: number;
+    skipGif: boolean;
+    rewriteContent: boolean;
+    cleanupOriginals: boolean;
+}
+export declare function resolveConfig(ctx: PluginContext): ImageOptimizerConfig;

package/plugins/image-optimizer/dist/config.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveConfig = resolveConfig;
+function resolveConfig(ctx) {
+    const raw = ctx.config ?? {};
+    const batchSize = Number(raw.batchSize);
+    return {
+        batchSize: Number.isFinite(batchSize) ? Math.min(Math.max(batchSize, 1), 200) : 50,
+        skipGif: raw.skipGif !== false,
+        rewriteContent: raw.rewriteContent === true,
+        cleanupOriginals: raw.cleanupOriginals === true,
+    };
+}

package/plugins/image-optimizer/dist/index.d.ts

@@ -0,0 +1,10 @@
+import type { HookService, PluginContext } from '@fecommunity/reactpress-toolkit/plugin/server';
+/**
+ * 图片资源优化：批量压缩历史素材由 Core FileOptimizationService 执行；
+ * 本插件负责注册与配置，管理端仪表盘见 admin/OptimizeDashboard。
+ */
+export declare function register(_hooks: HookService, ctx: PluginContext): void;
+declare const _default: {
+    register: typeof register;
+};
+export default _default;

package/plugins/image-optimizer/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.register = register;
+const config_1 = require("./config");
+/**
+ * 图片资源优化：批量压缩历史素材由 Core FileOptimizationService 执行；
+ * 本插件负责注册与配置，管理端仪表盘见 admin/OptimizeDashboard。
+ */
+function register(_hooks, ctx) {
+    const config = (0, config_1.resolveConfig)(ctx);
+    ctx.logger.log(`registered (batchSize=${config.batchSize}, skipGif=${config.skipGif}, rewriteContent=${config.rewriteContent})`);
+}
+exports.default = { register };

package/plugins/image-optimizer/locales/en.json

@@ -0,0 +1,51 @@
+{
+  "meta": {
+    "name": "Image Optimizer",
+    "description": "Analyze legacy media and batch-compress to WebP variants; optionally rewrite URLs in articles and pages."
+  },
+  "settings": {
+    "batchSize": {
+      "title": "Batch size",
+      "description": "Maximum images processed per job (1–200)."
+    },
+    "skipGif": {
+      "title": "Skip GIF",
+      "description": "GIF to WebP loses animation; skipped by default."
+    },
+    "rewriteContent": {
+      "title": "Rewrite content URLs after optimize",
+      "description": "Replace old image URLs in articles and pages when the job completes."
+    },
+    "cleanupOriginals": {
+      "title": "Delete originals after optimize",
+      "description": "Enable only after verification; old URLs will stop working."
+    }
+  },
+  "dashboard": {
+    "title": "Asset analysis",
+    "analyze": "Analyze",
+    "dryRun": "Dry run",
+    "run": "Start batch optimize",
+    "refresh": "Refresh",
+    "total": "Total assets",
+    "optimized": "Optimized",
+    "pending": "Pending",
+    "estimatedSaved": "Est. savings",
+    "contentRefs": "Content references",
+    "articles": "Articles",
+    "pages": "Pages",
+    "skipped": "Skipped",
+    "jobRunning": "Optimization in progress…",
+    "jobScanning": "Scanning for optimizable assets…",
+    "jobEmpty": "No images to optimize (already optimized or source files missing).",
+    "jobDone": "Job completed",
+    "jobFailed": "Job failed",
+    "processed": "Processed",
+    "succeeded": "Succeeded",
+    "failed": "Failed",
+    "savedBytes": "Space saved",
+    "inactiveHint": "Activate this plugin from the plugin list before running analysis or optimization.",
+    "analyzeFailed": "Analysis failed",
+    "runFailed": "Failed to start job"
+  }
+}