feat: refine BoosAPI console and user workspace

2026-06-09 16:48:18 +08:00
parent aaba6f152e
commit 59106e6a96
284 changed files with 59886 additions and 5594 deletions
@@ -0,0 +1,203 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type * as ThreeNamespace from "three";
+
+type ThreeRuntime = typeof ThreeNamespace;
+
+function shouldSkipWebgl() {
+  if (typeof window === "undefined") {
+    return true;
+  }
+
+  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const coarsePointer = window.matchMedia("(pointer: coarse)").matches;
+  const narrowScreen = window.matchMedia("(max-width: 720px)").matches;
+  const memory = typeof navigator !== "undefined"
+    ? (navigator as Navigator & { deviceMemory?: number }).deviceMemory
+    : undefined;
+
+  return reduceMotion || (coarsePointer && narrowScreen) || (typeof memory === "number" && memory <= 3);
+}
+
+export default function AcidThreeField() {
+  const mountRef = useRef<HTMLDivElement>(null);
+  const [fallback, setFallback] = useState(false);
+
+  useEffect(() => {
+    const mount = mountRef.current;
+    if (!mount) {
+      return undefined;
+    }
+
+    if (shouldSkipWebgl()) {
+      setFallback(true);
+      return undefined;
+    }
+
+    let frameId = 0;
+    let disposed = false;
+    let cleanup: (() => void) | undefined;
+
+    import("three")
+      .then((THREE) => {
+        if (disposed || !mountRef.current) {
+          return;
+        }
+
+        cleanup = createScene(THREE, mountRef.current);
+      })
+      .catch(() => {
+        if (!disposed) {
+          setFallback(true);
+        }
+      });
+
+    function createScene(THREE: ThreeRuntime, target: HTMLDivElement) {
+      const renderer = new THREE.WebGLRenderer({
+        alpha: true,
+        antialias: false,
+        preserveDrawingBuffer: true,
+        powerPreference: "low-power",
+      });
+      renderer.setClearColor(0x000000, 0);
+      renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.35));
+      renderer.setSize(target.clientWidth, target.clientHeight, false);
+      target.appendChild(renderer.domElement);
+
+      const scene = new THREE.Scene();
+      const camera = new THREE.PerspectiveCamera(46, 1, 0.1, 100);
+      camera.position.set(0, 0, 9);
+
+      const group = new THREE.Group();
+      scene.add(group);
+
+      const geometry = new THREE.BufferGeometry();
+      const count = 340;
+      const positions = new Float32Array(count * 3);
+      const colors = new Float32Array(count * 3);
+      const color = new THREE.Color();
+
+      for (let index = 0; index < count; index += 1) {
+        const radius = 1.3 + Math.random() * 4.2;
+        const angle = index * 0.43;
+        const spin = Math.sin(index * 1.17) * 0.8;
+        positions[index * 3] = Math.cos(angle) * radius + spin;
+        positions[index * 3 + 1] = Math.sin(angle * 1.14) * radius * 0.72;
+        positions[index * 3 + 2] = (Math.random() - 0.5) * 4.4;
+
+        const hue = (0.28 + (index % 96) / 180) % 1;
+        color.setHSL(hue, 0.92, index % 3 === 0 ? 0.66 : 0.53);
+        colors[index * 3] = color.r;
+        colors[index * 3 + 1] = color.g;
+        colors[index * 3 + 2] = color.b;
+      }
+
+      geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+      geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+
+      const material = new THREE.PointsMaterial({
+        size: 0.075,
+        vertexColors: true,
+        transparent: true,
+        opacity: 0.76,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+      });
+
+      const particles = new THREE.Points(geometry, material);
+      group.add(particles);
+
+      const knot = new THREE.Mesh(
+        new THREE.TorusKnotGeometry(1.24, 0.22, 96, 12, 2, 5),
+        new THREE.MeshBasicMaterial({
+          color: 0xd7ff2d,
+          transparent: true,
+          opacity: 0.24,
+          wireframe: true,
+        }),
+      );
+      knot.position.set(1.4, -0.2, -0.8);
+      group.add(knot);
+
+      const ring = new THREE.Mesh(
+        new THREE.TorusGeometry(3.1, 0.018, 8, 120),
+        new THREE.MeshBasicMaterial({
+          color: 0x69ffe0,
+          transparent: true,
+          opacity: 0.34,
+        }),
+      );
+      ring.rotation.set(1.12, 0.14, -0.24);
+      group.add(ring);
+
+      const syncSize = () => {
+        const width = Math.max(target.clientWidth, 1);
+        const height = Math.max(target.clientHeight, 1);
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+        renderer.setSize(width, height, false);
+      };
+
+      const onPointerMove = (event: PointerEvent) => {
+        const x = event.clientX / Math.max(window.innerWidth, 1) - 0.5;
+        const y = event.clientY / Math.max(window.innerHeight, 1) - 0.5;
+        group.rotation.y = x * 0.34;
+        group.rotation.x = y * -0.18;
+      };
+
+      const animate = () => {
+        const time = performance.now() * 0.001;
+        particles.rotation.z = time * 0.055;
+        particles.rotation.y = time * 0.04;
+        knot.rotation.x = time * 0.21;
+        knot.rotation.y = time * 0.28;
+        ring.rotation.z = time * -0.08;
+        renderer.render(scene, camera);
+        frameId = window.requestAnimationFrame(animate);
+      };
+
+      syncSize();
+      window.addEventListener("resize", syncSize, { passive: true });
+      window.addEventListener("pointermove", onPointerMove, { passive: true });
+      frameId = window.requestAnimationFrame(animate);
+
+      return () => {
+        window.cancelAnimationFrame(frameId);
+        window.removeEventListener("resize", syncSize);
+        window.removeEventListener("pointermove", onPointerMove);
+        group.clear();
+        geometry.dispose();
+        material.dispose();
+        knot.geometry.dispose();
+        if (Array.isArray(knot.material)) {
+          knot.material.forEach((item) => item.dispose());
+        } else {
+          knot.material.dispose();
+        }
+        ring.geometry.dispose();
+        if (Array.isArray(ring.material)) {
+          ring.material.forEach((item) => item.dispose());
+        } else {
+          ring.material.dispose();
+        }
+        renderer.dispose();
+        renderer.domElement.remove();
+      };
+    }
+
+    return () => {
+      disposed = true;
+      window.cancelAnimationFrame(frameId);
+      cleanup?.();
+    };
+  }, []);
+
+  return (
+    <div
+      ref={mountRef}
+      className={fallback ? "new-acid-three is-fallback" : "new-acid-three"}
+      aria-hidden="true"
+    />
+  );
+}
@@ -0,0 +1,171 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import AcidThreeField from "./AcidThreeField";
+
+export const metadata: Metadata = {
+  title: "BossAI / New Signal",
+  description:
+    "BossAI 官网实验页：以高反差酸性图形语言展示统一 API 网关、模型路由、Comfy 工作流和创作生产平台。",
+};
+
+const signalCards = [
+  ["Gateway", "/v1/*", "OpenAI、Claude、图像、视频和语音请求进入同一套鉴权、路由、日志和计费。"],
+  ["Router", "P0 / P1", "按站点、账号、模型能力、失败冷却和成本信号选择可用通道。"],
+  ["Comfy", "Cloud API", "Comfy Cloud、RunningHub、External 和 BoosAPI 执行器统一进工作流前端。"],
+  ["Studio", "Media OS", "生图助手、短视频工厂、数字人和工作空间共享模型资产与产出归档。"],
+];
+
+const routeRows = [
+  ["chat", "gpt-5.5", "reasoning"],
+  ["image", "gpt-image-2", "archive"],
+  ["video", "Comfy API", "queue"],
+  ["voice", "tts", "timeline"],
+];
+
+const stackItems = [
+  "API aggregation",
+  "Token billing",
+  "Model marketplace",
+  "Workspace archive",
+  "Comfy workflow",
+  "User self-service",
+];
+
+const proofItems = [
+  ["01", "用户调用", "下游 API Key 或创作应用发起请求。"],
+  ["02", "模型路由", "系统选择健康、可用、成本合理的账号通道。"],
+  ["03", "生产归档", "图片、视频、音频和日志进入用户工作空间。"],
+];
+
+export default function NewWebsiteExperiment() {
+  return (
+    <main className="new-acid-page">
+      <AcidThreeField />
+      <div className="new-acid-noise" aria-hidden="true" />
+      <header className="new-acid-nav" aria-label="BossAI 实验页导航">
+        <Link className="new-acid-brand" href="/" aria-label="BossAI 首页">
+          <Image src="/logo.png" width={40} height={40} alt="" priority />
+          <span>BossAI</span>
+        </Link>
+        <nav aria-label="实验页锚点导航">
+          <a href="#gateway">Gateway</a>
+          <a href="#workflow">Workflow</a>
+          <a href="#studio">Studio</a>
+        </nav>
+        <Link className="new-acid-console-link" href="/user/register">
+          开始使用
+        </Link>
+      </header>
+
+      <section className="new-acid-hero">
+        <div className="new-acid-hero-copy">
+          <div className="new-acid-kicker">
+            <span />
+            EXPERIMENTAL WEBSITE ROUTE / NEW
+          </div>
+          <h1>
+            BoosAPI
+            <span>acid control plane</span>
+          </h1>
+          <p>
+            统一 API 网关、智能模型路由、Comfy 工作流和创作生产平台，被压缩成一个可以运营、可以计费、可以归档的 BossAI 系统。
+          </p>
+          <div className="new-acid-actions">
+            <Link className="new-acid-primary" href="/user/register">
+              创建用户工作台
+            </Link>
+            <Link className="new-acid-secondary" href="/boos">
+              进入控制台
+            </Link>
+          </div>
+        </div>
+
+        <div className="new-acid-router" aria-label="BossAI 路由演示">
+          <div className="new-acid-router-top">
+            <span>Live mesh</span>
+            <strong>route: healthy</strong>
+          </div>
+          <div className="new-acid-router-core">
+            <div>
+              <span>API</span>
+              <strong>/v1</strong>
+            </div>
+            <div>
+              <span>Cost</span>
+              <strong>ledger</strong>
+            </div>
+            <div>
+              <span>Output</span>
+              <strong>workspace</strong>
+            </div>
+          </div>
+          <div className="new-acid-route-list">
+            {routeRows.map(([type, model, state]) => (
+              <div key={type}>
+                <span>{type}</span>
+                <strong>{model}</strong>
+                <em>{state}</em>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section id="gateway" className="new-acid-signal-grid">
+        {signalCards.map(([label, value, body]) => (
+          <article key={label}>
+            <div>
+              <span>{label}</span>
+              <strong>{value}</strong>
+            </div>
+            <p>{body}</p>
+          </article>
+        ))}
+      </section>
+
+      <section id="workflow" className="new-acid-band">
+        <div>
+          <span>Workflow Field</span>
+          <h2>把 Comfy API、模型路由和用户余额放进同一条生产链路</h2>
+        </div>
+        <div className="new-acid-stack">
+          {stackItems.map((item) => (
+            <span key={item}>{item}</span>
+          ))}
+        </div>
+      </section>
+
+      <section id="studio" className="new-acid-proof">
+        <div className="new-acid-proof-copy">
+          <span>Creation Loop</span>
+          <h2>从调用到产出，每一步都有日志、成本和归档位置</h2>
+          <p>
+            这不是另一个单点工具。BossAI 把 API 聚合、用户自助工作台和创作生产平台接在同一套后台里，让团队能真正运营多模型多模态能力。
+          </p>
+        </div>
+        <div className="new-acid-proof-steps">
+          {proofItems.map(([step, title, body]) => (
+            <article key={step}>
+              <span>{step}</span>
+              <strong>{title}</strong>
+              <p>{body}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className="new-acid-final">
+        <h2>同一个 BoosAPI 内核，另一种官网表达。</h2>
+        <div className="new-acid-actions">
+          <Link className="new-acid-primary" href="/">
+            返回当前官网
+          </Link>
+          <Link className="new-acid-secondary" href="/user/login">
+            用户登录
+          </Link>
+        </div>
+      </section>
+    </main>
+  );
+}