Initial commit: OmniAI Web Frontend

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-02 12:38:01 +08:00
commit bedee3ba8d
183 changed files with 94805 additions and 0 deletions
@@ -0,0 +1,406 @@
+import {
+  ArrowLeftOutlined,
+  CheckCircleOutlined,
+  FileTextOutlined,
+  LoginOutlined,
+  PictureOutlined,
+  UploadOutlined,
+} from "@ant-design/icons";
+import { useEffect, useMemo, useRef, useState, type ChangeEvent } from "react";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { communityClient } from "../../api/communityClient";
+import WorkspacePageShell from "../../components/WorkspacePageShell";
+import type { WebCanvasWorkflow, WebUserSession } from "../../types";
+import { getWorkflowCoverUrl, isCanvasWorkflow } from "../community/communityCaseUtils";
+import { canManageCommunityCases } from "./communityPermissions";
+
+interface CommunityCaseAddPageProps {
+  session: WebUserSession | null;
+  onOpenLogin: () => void;
+  onOpenReview: () => void;
+}
+
+type CaseTarget = "generation" | "canvas";
+
+const RATIO_OPTIONS = ["16:9", "9:16", "1:1", "4:5", "3:4", "21:9"];
+
+function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error || new Error("图片读取失败"));
+    reader.readAsDataURL(file);
+  });
+}
+
+function readFileAsText(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error || new Error("JSON 读取失败"));
+    reader.readAsText(file);
+  });
+}
+
+function textToDataUrl(text: string, mimeType: string): string {
+  const bytes = new TextEncoder().encode(text);
+  let binary = "";
+  bytes.forEach((byte) => {
+    binary += String.fromCharCode(byte);
+  });
+  return `data:${mimeType};base64,${btoa(binary)}`;
+}
+
+function parseWorkflowText(text: string): WebCanvasWorkflow {
+  const parsed = JSON.parse(text) as unknown;
+  if (!isCanvasWorkflow(parsed)) {
+    throw new Error("JSON 需要包含完整画布工作流：nodes、edges 和 settings。");
+  }
+  return parsed;
+}
+
+function shortDescription(value: string): string {
+  return value.trim().replace(/\s+/g, " ").slice(0, 120);
+}
+
+function ratioToCssAspectRatio(value: string): string {
+  const [width, height] = value.split(":").map((item) => Number(item));
+  return width > 0 && height > 0 ? `${width} / ${height}` : "16 / 9";
+}
+
+export default function CommunityCaseAddPage({ session, onOpenLogin, onOpenReview }: CommunityCaseAddPageProps) {
+  const allowed = canManageCommunityCases(session);
+  const imageInputRef = useRef<HTMLInputElement | null>(null);
+  const workflowInputRef = useRef<HTMLInputElement | null>(null);
+  const [target, setTarget] = useState<CaseTarget>("generation");
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [category, setCategory] = useState("图片案例");
+  const [ratio, setRatio] = useState("16:9");
+  const [prompt, setPrompt] = useState("");
+  const [imageUrl, setImageUrl] = useState("");
+  const [imageDataUrl, setImageDataUrl] = useState("");
+  const [imageFileName, setImageFileName] = useState("");
+  const [workflowText, setWorkflowText] = useState("");
+  const [workflowFileName, setWorkflowFileName] = useState("");
+  const [workflow, setWorkflow] = useState<WebCanvasWorkflow | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [notice, setNotice] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const previewUrl = imageDataUrl || imageUrl.trim();
+  const workflowCoverUrl = useMemo(() => getWorkflowCoverUrl(workflow), [workflow]);
+  const targetCopy = target === "generation" ? "生成页面社区" : "画布页面社区";
+  const previewAspectRatio = target === "generation" ? ratioToCssAspectRatio(ratio) : "16 / 10";
+
+  useEffect(() => {
+    setCategory((current) => {
+      if (target === "generation" && current === "工作流案例") return "图片案例";
+      if (target === "canvas" && current === "图片案例") return "工作流案例";
+      return current;
+    });
+  }, [target]);
+
+  const handleImageChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    setError(null);
+    setImageFileName(file.name);
+    setImageDataUrl(await readFileAsDataUrl(file));
+  };
+
+  const applyWorkflowText = (text: string, fileName = "") => {
+    setWorkflowText(text);
+    setWorkflowFileName(fileName);
+    try {
+      const parsedWorkflow = parseWorkflowText(text);
+      setWorkflow(parsedWorkflow);
+      setError(null);
+      if (!title.trim()) setTitle(parsedWorkflow.title || "画布社区案例");
+      if (!description.trim()) setDescription(parsedWorkflow.description || "");
+      if (!category.trim()) setCategory("工作流案例");
+    } catch (parseError) {
+      setWorkflow(null);
+      setError(parseError instanceof Error ? parseError.message : "JSON 解析失败");
+    }
+  };
+
+  const handleWorkflowChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    applyWorkflowText(await readFileAsText(file), file.name);
+  };
+
+  const handleSubmit = async () => {
+    if (submitting) return;
+    setSubmitting(true);
+    setNotice(null);
+    setError(null);
+    try {
+      const cleanTitle = title.trim();
+      if (!cleanTitle) throw new Error("请填写案例标题。");
+
+      if (target === "generation") {
+        if (!prompt.trim()) throw new Error("请填写生成页面展示的提示词。");
+        if (!previewUrl) throw new Error("请上传案例图片或填写图片 URL。");
+
+        let coverUrl = imageUrl.trim();
+        let ossKey: string | undefined;
+        if (imageDataUrl) {
+          const uploaded = await aiGenerationClient.uploadAsset({
+            dataUrl: imageDataUrl,
+            name: imageFileName || `${cleanTitle}.png`,
+            scope: "community-case-cover",
+          });
+          coverUrl = uploaded.url || imageDataUrl;
+          ossKey = uploaded.ossKey;
+        }
+
+        await communityClient.publishCase({
+          title: cleanTitle,
+          description: description.trim() || shortDescription(prompt),
+          coverUrl,
+          tags: [category.trim() || "图片案例", "生成页面社区"],
+          metadata: {
+            source: "admin-case-add",
+            communitySurface: "generation",
+            prompt: prompt.trim(),
+            ratio,
+            category: category.trim() || "图片案例",
+          },
+          assets: [
+            {
+              assetType: "cover",
+              title: cleanTitle,
+              url: coverUrl,
+              ossKey,
+              metadata: { prompt: prompt.trim(), ratio },
+            },
+          ],
+        });
+      } else {
+        if (!workflow) throw new Error("请上传或粘贴有效的画布工作流 JSON。");
+        const workflowJson = JSON.stringify(workflow);
+        const uploadedWorkflow = await aiGenerationClient.uploadAsset({
+          dataUrl: textToDataUrl(workflowJson, "application/json"),
+          name: workflowFileName || `${cleanTitle}.json`,
+          mimeType: "application/json",
+          scope: "community-case-workflow",
+        });
+        const coverUrl = workflowCoverUrl || imageUrl.trim();
+        await communityClient.publishCase({
+          title: cleanTitle,
+          description: description.trim() || workflow.description || "管理员添加的画布工作流案例。",
+          coverUrl,
+          tags: [category.trim() || "工作流案例", "画布页面社区"],
+          metadata: {
+            source: "admin-case-add",
+            communitySurface: "canvas",
+            category: category.trim() || "工作流案例",
+            workflow,
+            workflowOssKey: uploadedWorkflow.ossKey || null,
+            workflowUrl: uploadedWorkflow.url || null,
+          },
+          assets: [
+            {
+              assetType: "workflow",
+              title: cleanTitle,
+              url: uploadedWorkflow.url,
+              ossKey: uploadedWorkflow.ossKey,
+              metadata: { workflow, fileName: workflowFileName || null, contentType: "application/json" },
+            },
+          ],
+        });
+      }
+
+      setNotice(`已提交到${targetCopy}审核列表，审核通过后会展示到对应社区。`);
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : "案例提交失败");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (!session) {
+    return (
+      <WorkspacePageShell title="添加案例" fullWidth className="community-review-page page-motion">
+        <section className="community-review-access">
+          <LoginOutlined />
+          <h1>请登录工作人员账号</h1>
+          <p>添加社区案例需要登录后访问。</p>
+          <button type="button" onClick={onOpenLogin}>登录 / 注册</button>
+        </section>
+      </WorkspacePageShell>
+    );
+  }
+
+  if (!allowed) {
+    return (
+      <WorkspacePageShell title="添加案例" fullWidth className="community-review-page page-motion">
+        <section className="community-review-access">
+          <FileTextOutlined />
+          <h1>当前账号没有管理权限</h1>
+          <p>请切换到 admin 角色账号后再添加案例。</p>
+        </section>
+      </WorkspacePageShell>
+    );
+  }
+
+  return (
+    <WorkspacePageShell title="添加案例" fullWidth className="community-review-page page-motion">
+      <div className="community-review-page__inner">
+        <section className="community-review-toolbar">
+          <div>
+            <span>内部案例录入</span>
+            <h1>添加社区案例</h1>
+            <p>管理员录入的案例会先进入社区审核，审核通过后才展示给用户。</p>
+          </div>
+          <div className="community-review-toolbar__actions">
+            <button type="button" onClick={onOpenReview}>
+              <ArrowLeftOutlined />
+              返回审核
+            </button>
+          </div>
+        </section>
+
+        <div className="community-review-tabs community-case-add-targets" role="tablist" aria-label="案例展示位置">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={target === "generation"}
+            className={target === "generation" ? "is-active" : ""}
+            onClick={() => setTarget("generation")}
+          >
+            <PictureOutlined />
+            生成页面社区
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={target === "canvas"}
+            className={target === "canvas" ? "is-active" : ""}
+            onClick={() => setTarget("canvas")}
+          >
+            <FileTextOutlined />
+            画布页面社区
+          </button>
+        </div>
+
+        {error ? <p className="community-review-error">{error}</p> : null}
+        {notice ? (
+          <p className="community-case-add-success">
+            <CheckCircleOutlined />
+            {notice}
+          </p>
+        ) : null}
+
+        <section className="community-case-add-layout">
+          <form className="community-case-add-form" onSubmit={(event) => event.preventDefault()}>
+            <div className="community-case-add-form__grid">
+              <label>
+                <span>案例标题</span>
+                <input value={title} onChange={(event) => setTitle(event.target.value)} placeholder="例如：横版商品主图" />
+              </label>
+              <label>
+                <span>分类标签</span>
+                <input value={category} onChange={(event) => setCategory(event.target.value)} placeholder="图片案例 / 工作流案例" />
+              </label>
+              {target === "generation" ? (
+                <label>
+                  <span>展示比例</span>
+                  <select value={ratio} onChange={(event) => setRatio(event.target.value)}>
+                    {RATIO_OPTIONS.map((option) => (
+                      <option key={option} value={option}>{option}</option>
+                    ))}
+                  </select>
+                </label>
+              ) : null}
+            </div>
+
+            <label>
+              <span>案例简介</span>
+              <textarea value={description} onChange={(event) => setDescription(event.target.value)} placeholder="审核页和社区卡片使用的简短说明" />
+            </label>
+
+            {target === "generation" ? (
+              <>
+                <label>
+                  <span>提示词</span>
+                  <textarea value={prompt} onChange={(event) => setPrompt(event.target.value)} placeholder="输入用户点击案例后可套用的提示词" />
+                </label>
+                <div className="community-case-add-upload-row">
+                  <input ref={imageInputRef} type="file" accept="image/*" hidden onChange={handleImageChange} />
+                  <button type="button" onClick={() => imageInputRef.current?.click()}>
+                    <UploadOutlined />
+                    上传图片
+                  </button>
+                  <label>
+                    <span>或填写图片 URL</span>
+                    <input value={imageUrl} onChange={(event) => setImageUrl(event.target.value)} placeholder="https://..." />
+                  </label>
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="community-case-add-upload-row">
+                  <input ref={workflowInputRef} type="file" accept="application/json,.json" hidden onChange={handleWorkflowChange} />
+                  <button type="button" onClick={() => workflowInputRef.current?.click()}>
+                    <UploadOutlined />
+                    上传 JSON
+                  </button>
+                  <label>
+                    <span>可选封面 URL</span>
+                    <input value={imageUrl} onChange={(event) => setImageUrl(event.target.value)} placeholder="未填写时从节点预览图提取" />
+                  </label>
+                </div>
+                <label>
+                  <span>画布工作流 JSON</span>
+                  <textarea
+                    value={workflowText}
+                    onChange={(event) => applyWorkflowText(event.target.value, workflowFileName)}
+                    placeholder='{"id":"...","version":1,"title":"...","nodes":[...],"edges":[...],"settings":{...}}'
+                  />
+                </label>
+              </>
+            )}
+
+            <div className="community-case-add-actions">
+              <button type="button" onClick={() => void handleSubmit()} disabled={submitting}>
+                <CheckCircleOutlined />
+                {submitting ? "提交中..." : "提交审核"}
+              </button>
+              <button type="button" onClick={onOpenReview}>
+                查看审核列表
+              </button>
+            </div>
+          </form>
+
+          <aside className="community-case-add-preview">
+            <span>{targetCopy}</span>
+            <strong>{title.trim() || "未命名案例"}</strong>
+            <p>{description.trim() || (target === "generation" ? shortDescription(prompt) : workflow?.description) || "提交前可在这里预览案例信息。"}</p>
+            {target === "generation" ? (
+              previewUrl ? (
+                <img src={previewUrl} alt="" style={{ aspectRatio: previewAspectRatio }} />
+              ) : (
+                <div className="community-case-add-preview__empty" style={{ aspectRatio: previewAspectRatio }}>等待图片</div>
+              )
+            ) : workflowCoverUrl || imageUrl.trim() ? (
+              <img src={workflowCoverUrl || imageUrl.trim()} alt="" />
+            ) : (
+              <div className="community-case-add-preview__empty">等待工作流封面</div>
+            )}
+            <dl>
+              <dt>目标</dt>
+              <dd>{targetCopy}</dd>
+              <dt>{target === "generation" ? "比例" : "节点"}</dt>
+              <dd>{target === "generation" ? ratio : workflow ? workflow.nodes.length : 0}</dd>
+              <dt>文件</dt>
+              <dd>{target === "generation" ? imageFileName || "未上传" : workflowFileName || "未上传"}</dd>
+            </dl>
+          </aside>
+        </section>
+      </div>
+    </WorkspacePageShell>
+  );
+}