@pactor-app/skills 1.24.0

package/prd-to-app/template/src/pactor/components/debug-chat.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Button, ChatInput } from "@pactor-app/ui";
+
+/**
+ * 调试台共享对话面板（客户端调试 / 模型调试 左侧对话区），DSL 自定义组件。
+ * PRD《调试台/00-总览》：Chat 对话式左右分栏，左栏 = 对话记录 + 输入框 + 清空对话。
+ * 纯展示组件：messages / sendDisabled / streaming 等经 DSL props 表达式下发，
+ * 交互经 events 上行（onSend(text) / onStop / onClear / onSelectRound(round)），
+ * 对话状态与流式模拟由页面注册的自定义 action 持有（见各页 *-actions.ts）。
+ */
+
+export interface DebugChatMessage {
+  id: string;
+  role: "user" | "assistant" | "error";
+  content: string;
+  /** 关联的调用轮次对象（客户端调试：点击消息经 onSelectRound 整体上行，DSL 写入 selectedRound） */
+  round?: { id?: string };
+  /** assistant 消息下方的紧凑摘要（Token 用量 / TTFT / 延迟 / 上游状态码） */
+  meta?: string;
+  /** 流式输出中（内容边收边长，尾部带光标） */
+  streaming?: boolean;
+}
+
+/** 模拟流式输出：按固定节奏把 full 逐段吐出；onChunk 收到的是累计文本。
+ *  返回取消函数（停止生成 / 清空对话时调用）。 */
+export function streamText(
+  full: string,
+  onChunk: (text: string) => void,
+  onDone: () => void,
+  opts?: { interval?: number; chunkSize?: number },
+): () => void {
+  const interval = opts?.interval ?? 36;
+  const chunkSize = opts?.chunkSize ?? 3;
+  let pos = 0;
+  const timer = setInterval(() => {
+    pos = Math.min(full.length, pos + chunkSize);
+    onChunk(full.slice(0, pos));
+    if (pos >= full.length) {
+      clearInterval(timer);
+      onDone();
+    }
+  }, interval);
+  return () => clearInterval(timer);
+}
+
+const ROLE_CONFIG: Record<
+  DebugChatMessage["role"],
+  { label: string; dot: string }
+> = {
+  user: { label: "你", dot: "bg-primary" },
+  assistant: { label: "助手", dot: "bg-emerald-500" },
+  error: { label: "错误", dot: "bg-red-500" },
+};
+
+export interface DebugChatProps {
+  /** 消息列表（`${state.messages}` 整体表达式下发，数组类型保留） */
+  messages?: DebugChatMessage[];
+  /** 禁用发送（未选齐调用身份 / 供应商模型等） */
+  sendDisabled?: boolean;
+  /** 输入框占位文案（禁用时建议传入原因提示） */
+  placeholder?: string;
+  /** 流式生成中：输入区上方展示「停止生成」 */
+  streaming?: boolean;
+  /** 当前选中轮次 ID（高亮对应消息；与消息 round.id 比对） */
+  selectedRoundId?: string;
+  /** 空会话提示文案 */
+  emptyHint?: string;
+  // ── DSL events 注入（Renderer 包装为同名函数 prop，单参 event）──
+  onSend?: (event?: unknown) => void;
+  onStop?: (event?: unknown) => void;
+  onClear?: (event?: unknown) => void;
+  onSelectRound?: (event?: unknown) => void;
+}
+
+export function DebugChat({
+  messages,
+  sendDisabled,
+  placeholder,
+  streaming,
+  selectedRoundId,
+  emptyHint,
+  onSend,
+  onStop,
+  onClear,
+  onSelectRound,
+}: DebugChatProps) {
+  const [draft, setDraft] = useState("");
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // 新消息 / 流式追加时滚到底部
+  useEffect(() => {
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [messages]);
+
+  const handleSubmit = (text: string) => {
+    onSend?.(text);
+    setDraft("");
+  };
+
+  return (
+    <div className="debug-chat-root flex min-h-[420px] flex-col gap-3">
+      {/* ── 对话记录 ── */}
+      <div
+        ref={listRef}
+        className="debug-chat-list h-[52vh] min-h-[320px] overflow-y-auto rounded-lg border bg-background p-4"
+      >
+        {!messages || messages.length === 0 ? (
+          <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+            {emptyHint ?? "暂无对话，输入消息开始调试"}
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {messages.map((msg) => {
+              const cfg = ROLE_CONFIG[msg.role];
+              const clickable = !!msg.round && !!onSelectRound;
+              const selected =
+                !!msg.round?.id && msg.round.id === selectedRoundId;
+              return (
+                <div
+                  key={msg.id}
+                  className={`rounded-lg p-1 ${clickable ? "cursor-pointer" : ""} ${
+                    selected ? "ring-1 ring-primary" : ""
+                  }`}
+                  onClick={clickable ? () => onSelectRound(msg.round) : undefined}
+                >
+                  <div className="mb-1 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                    <span className={`size-2 rounded-full ${cfg.dot}`} />
+                    {cfg.label}
+                    {msg.streaming && (
+                      <span className="text-muted-foreground/70">（生成中…）</span>
+                    )}
+                  </div>
+                  <div
+                    className={`whitespace-pre-wrap rounded-md px-3 py-2 text-sm leading-6 ${
+                      msg.role === "user"
+                        ? "bg-muted"
+                        : msg.role === "error"
+                          ? "text-red-600 [data-pactor-theme=dark]:text-red-400"
+                          : ""
+                    }`}
+                  >
+                    {msg.content}
+                    {msg.streaming && (
+                      <span className="ml-0.5 inline-block animate-pulse">▍</span>
+                    )}
+                  </div>
+                  {msg.meta && (
+                    <div className="mt-1 px-1 text-xs text-muted-foreground">
+                      {msg.meta}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ── 停止生成（流式中） ── */}
+      {streaming && onStop && (
+        <div className="flex justify-center">
+          <Button text="停止生成" size="small" onClick={() => onStop()} />
+        </div>
+      )}
+
+      {/* ── 输入框（Enter 发送 / Shift+Enter 换行，ChatInput 内建） ── */}
+      <ChatInput
+        value={draft}
+        placeholder={placeholder ?? "输入消息..."}
+        disabled={sendDisabled || streaming}
+        onChange={setDraft}
+        onSubmit={handleSubmit}
+      />
+
+      {/* ── 清空对话 ── */}
+      <div className="flex justify-end">
+        <Button
+          text="清空对话"
+          size="small"
+          disabled={!messages || messages.length === 0}
+          onClick={() => onClear?.()}
+        />
+      </div>
+    </div>
+  );
+}

package/prd-to-app/template/src/pactor/components/index.ts

@@ -0,0 +1,28 @@
+"use client";
+
+/**
+ * 页面 DSL 引用的自定义组件注册表（页面级自定义组件
+ * `components={{...}}`），经 SitemapApp 的 `components` prop 全局注册。
+ */
+import { ChipNode } from "./chip-node";
+import { ChipFilter } from "./chip-filter";
+import { StatusBadge } from "./status-badge";
+import { LogStatus } from "./log-status";
+import { DebugChat } from "./debug-chat";
+import { CardLink, StatusToggleIcon, TextLink } from "./card-links";
+import { ThemeSwitcher } from "./theme-switcher";
+
+export const pactorComponents: Record<string, unknown> = {
+  ChipNode,
+  ChipFilter,
+  StatusBadge,
+  LogStatus,
+  DebugChat,
+  ProviderCardLink: CardLink,
+  ModelCardLink: CardLink,
+  RouteCardLink: CardLink,
+  TemplateCardLink: CardLink,
+  TextLink,
+  StatusToggleIcon,
+  ThemeSwitcher,
+};

package/prd-to-app/template/src/pactor/components/log-status.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+/**
+ * 调用日志状态色点徽标（运行管理 / 调用日志 共享的自定义组件）。
+ * 映射规则（PRD《运行管理/01-调用日志列表与详情》状态图例）：
+ *   success / 成功     → 绿点 成功（HTTP 2xx 且上游调用完成）
+ *   error / 错误       → 红点 错误（4xx/5xx 或上游失败）
+ *   unfinished / 未完成 → 橙点 未完成（请求中断、超时未完成）
+ *   cancelled / 已取消 → 紫点 已取消（客户端或网关主动取消）
+ *   其他               → 灰点（未归类状态 / 未知值原样展示）
+ * status 由 DSL props 表达式求值后传入，
+ * 如 props: { status: "${row.status}" } / { status: "${data.detail.status}" }。
+ */
+const STATUS_CONFIG: Record<string, { label: string; className: string }> = {
+  success: {
+    label: "成功",
+    className: "text-emerald-600 [data-pactor-theme=dark]:text-emerald-400",
+  },
+  error: {
+    label: "错误",
+    className: "text-red-600 [data-pactor-theme=dark]:text-red-400",
+  },
+  unfinished: {
+    label: "未完成",
+    className: "text-amber-600 [data-pactor-theme=dark]:text-amber-400",
+  },
+  cancelled: {
+    label: "已取消",
+    className: "text-violet-600 [data-pactor-theme=dark]:text-violet-400",
+  },
+  other: { label: "其他", className: "text-muted-foreground" },
+  成功: {
+    label: "成功",
+    className: "text-emerald-600 [data-pactor-theme=dark]:text-emerald-400",
+  },
+  错误: {
+    label: "错误",
+    className: "text-red-600 [data-pactor-theme=dark]:text-red-400",
+  },
+  未完成: {
+    label: "未完成",
+    className: "text-amber-600 [data-pactor-theme=dark]:text-amber-400",
+  },
+  已取消: {
+    label: "已取消",
+    className: "text-violet-600 [data-pactor-theme=dark]:text-violet-400",
+  },
+  其他: { label: "其他", className: "text-muted-foreground" },
+};
+
+export function LogStatus({ status }: { status?: string }) {
+  const cfg = STATUS_CONFIG[status ?? ""] ?? {
+    label: status ?? "—",
+    className: "text-muted-foreground",
+  };
+  return (
+    <span
+      className={`inline-flex w-fit shrink-0 items-center gap-1.5 whitespace-nowrap text-xs font-medium ${cfg.className}`}
+    >
+      <span className="size-2 rounded-full bg-current" />
+      {cfg.label}
+    </span>
+  );
+}

package/prd-to-app/template/src/pactor/components/status-badge.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+/**
+ * 启停状态徽标（Provider / Model / Route 页面共享的自定义组件）。
+ * 映射规则：
+ *   enabled / 启用   → ● 启用（绿色底纹，globals.css .badge-enabled）
+ *   disabled / 停用  → ● 停用（secondary 灰底）
+ *   expired / 已过期 → ● 已过期（warning 琥珀底纹）
+ *   draft / 草稿     → 草稿（secondary 灰底，无圆点）
+ *   其他             → ● <原值>
+ * status 由 DSL props 表达式求值后传入，
+ * 如 props: { status: "${data.detail.status}" } / { status: "${row.status}" }。
+ */
+const STATUS_LABELS: Record<string, string> = {
+  enabled: "● 启用",
+  disabled: "● 停用",
+  expired: "● 已过期",
+  draft: "草稿",
+  启用: "● 启用",
+  停用: "● 停用",
+  已过期: "● 已过期",
+  草稿: "草稿",
+};
+
+const BASE =
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap";
+
+export function StatusBadge({ status }: { status?: string }) {
+  const enabled = status === "enabled" || status === "启用";
+  const expired = status === "expired" || status === "已过期";
+  const text = STATUS_LABELS[status ?? ""] ?? `● ${status ?? "—"}`;
+  return (
+    <span
+      data-slot="badge"
+      className={`${BASE} ${
+        enabled
+          ? "badge-enabled border-transparent bg-primary text-primary-foreground"
+          : expired
+            ? "border-amber-500/45 bg-amber-500/15 text-amber-600 [data-pactor-theme=dark]:text-amber-400"
+            : "border-transparent bg-secondary text-secondary-foreground"
+      }`}
+    >
+      {text}
+    </span>
+  );
+}

package/prd-to-app/template/src/pactor/components/theme-switcher.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Icon } from "@pactor-app/ui";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@pactor-app/ui/ui";
+import {
+  applySkinStylesheet,
+  DEFAULT_SKIN,
+  SKINS,
+  SKIN_STORAGE_KEY,
+} from "../skin";
+
+/**
+ * 外壳 Header 右侧的皮肤切换器：
+ * - 皮肤下拉：三套 Theme Studio 皮肤（色点 + 名称，当前项打勾），
+ *   切换即换 <link data-pactor-skin> 皮肤样式表（app/skin.ts）并持久化
+ *   localStorage(mc-skin)；
+ * - 明暗切换：太阳/月亮按钮，写 `<html data-pactor-theme="dark">` 并
+ *   持久化 localStorage(mc-mode)；缺省（system）跟随系统深浅色。
+ * 首屏皮肤 link 与明暗属性由 layout.tsx 内联脚本预置，组件挂载后接管切换。
+ */
+
+type SkinValue = (typeof SKINS)[number]["value"];
+type Mode = "light" | "dark" | "system";
+
+function isDarkMode(mode: Mode) {
+  return (
+    mode === "dark" ||
+    (mode === "system" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches)
+  );
+}
+
+function applyMode(mode: Mode) {
+  const root = document.documentElement;
+  const dark = isDarkMode(mode);
+  if (dark) {
+    root.setAttribute("data-pactor-theme", "dark");
+  } else {
+    root.removeAttribute("data-pactor-theme");
+  }
+  return dark;
+}
+
+const triggerClass =
+  "flex items-center gap-1.5 rounded-md px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground outline-hidden cursor-pointer";
+
+export function ThemeSwitcher() {
+  const [skin, setSkin] = useState<SkinValue>(DEFAULT_SKIN);
+  const [mode, setMode] = useState<Mode>("system");
+  const [dark, setDark] = useState(false);
+
+  // 挂载后读取持久化偏好并接管系统深浅色监听（mode 为 system 时）
+  useEffect(() => {
+    const savedSkin = (localStorage.getItem(SKIN_STORAGE_KEY) ??
+      DEFAULT_SKIN) as SkinValue;
+    const savedMode = (localStorage.getItem("mc-mode") ?? "system") as Mode;
+    setSkin(savedSkin);
+    setMode(savedMode);
+    setDark(applyMode(savedMode));
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const onSystemChange = () => {
+      if (savedMode === "system") setDark(applyMode("system"));
+    };
+    media.addEventListener("change", onSystemChange);
+    return () => media.removeEventListener("change", onSystemChange);
+  }, []);
+
+  const selectSkin = (value: SkinValue) => {
+    setSkin(value);
+    localStorage.setItem(SKIN_STORAGE_KEY, value);
+    applySkinStylesheet(value);
+  };
+
+  const toggleMode = () => {
+    const next: Mode = dark ? "light" : "dark";
+    setMode(next);
+    localStorage.setItem("mc-mode", next);
+    setDark(applyMode(next));
+  };
+
+  const current = SKINS.find((s) => s.value === skin) ?? SKINS[0];
+
+  return (
+    <div data-slot="theme-switcher" className="ml-auto flex items-center gap-1">
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          data-slot="theme-switcher-trigger"
+          className={triggerClass}
+        >
+          <span
+            aria-hidden="true"
+            className="size-3 rounded-full border border-black/10"
+            style={{ backgroundColor: current.color }}
+          />
+          {current.label}
+          <Icon name="chevron-down" size="sm" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {SKINS.map((s) => (
+            <DropdownMenuItem
+              key={s.value}
+              className="cursor-pointer"
+              onClick={() => selectSkin(s.value)}
+            >
+              <span
+                aria-hidden="true"
+                className="size-3 rounded-full border border-black/10"
+                style={{ backgroundColor: s.color }}
+              />
+              {s.label}
+              {s.value === skin && (
+                <Icon name="check" size="sm" className="ml-auto" />
+              )}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <button
+        type="button"
+        data-slot="theme-mode-toggle"
+        aria-label={dark ? "切换为浅色" : "切换为深色"}
+        className={triggerClass}
+        onClick={toggleMode}
+      >
+        <Icon name={dark ? "sun" : "moon"} size="sm" />
+      </button>
+    </div>
+  );
+}

package/prd-to-app/template/src/pactor/config.ts

@@ -0,0 +1,28 @@
+/**
+ * 入口配置（design/dynamic-page.md）：开发者在此配置一个或多个
+ * 返回 sitemap 对象的接口 URL。多源时 pages / menus / layouts 按键合并
+ * （id / path 冲突后源覆盖前源并告警），app / user / permissions / auth
+ * 取第一个源。
+ *
+ * 外部接口：sources 只写相对路径，由 apiBaseUrl 补全为外部绝对地址；
+ * 服务端已开通 CORS（cookie 会话见 src/server/cors.ts），浏览器直连，
+ * 无需项目内代理。
+ */
+export const sitemapSources: string[] = ["/api/sitemap"];
+
+/**
+ * 懒加载页面端点（SitemapApp pageEndpoint）。
+ * 框架缺省为 /api/pages/{id}；本仓库服务端路由在 app/api/public/pages/[id]，
+ * 需显式覆盖，否则客户端仍会请求框架缺省路径。
+ */
+export const pageEndpoint = (pageId: string) =>
+  `/api/public/pages/${pageId}`;
+
+/**
+ * 外部接口基准地址（SitemapApp baseUrl）。
+ * 由 next.config.js 的 API_BASE_URLS 按构建环境（APP_ENV：
+ * build / build:dev / build:test → production / development / test）
+ * 解析，经 env 配置内联进客户端包；缺省回退本地开发地址。
+ */
+export const apiBaseUrl =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:9011";