@nextclaw/ui 0.12.24 → 0.12.26

package/src/features/marketplace/components/curated-shelves/marketplace-curated-shelves.tsx

@@ -0,0 +1,355 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+  MarketplaceSceneView,
+} from "@/shared/lib/api";
+import type { InstallState } from "@/features/marketplace/components/marketplace-list-card";
+import {
+  buildLocaleFallbacks,
+} from "@/features/marketplace/components/marketplace-localization";
+import { MarketplaceListSkeleton } from "@/features/marketplace/components/marketplace-page-parts";
+import { cn } from "@/shared/lib/utils";
+import {
+  ArrowLeft,
+  Clock3,
+  Compass,
+} from "lucide-react";
+import { type ComponentType } from "react";
+import { SkillShelfCard } from "@/features/marketplace/components/curated-shelves/marketplace-shelf-card";
+import {
+  MARKETPLACE_SHELF_FALLBACK_VISUAL,
+  MARKETPLACE_SHELF_SCENE_VISUALS,
+  MARKETPLACE_SHELF_TONE_STYLES,
+  type MarketplaceShelfLocalizedText,
+  type MarketplaceShelfSceneVisual,
+} from "@/features/marketplace/components/curated-shelves/marketplace-curated-shelves.config";
+
+const SCENE_CARD_GRID_CLASS =
+  "grid grid-cols-[repeat(auto-fill,minmax(240px,320px))] justify-start gap-3";
+const SCENE_SKELETON_CARD_COUNT = 24;
+
+export type MarketplaceShelfEntry = {
+  item: MarketplaceItemSummary;
+  record?: MarketplaceInstalledRecord;
+};
+
+export function MarketplaceCuratedShelves(props: {
+  entries: MarketplaceShelfEntry[];
+  scenes: MarketplaceSceneView[];
+  language: string;
+  installState: InstallState;
+  onOpen: (entry: MarketplaceShelfEntry) => void;
+  onInstall: (item: MarketplaceItemSummary) => void;
+  onOpenScene: (scene: string) => void;
+}) {
+  const {
+    entries,
+    scenes,
+    language,
+    installState,
+    onOpen,
+    onInstall,
+    onOpenScene,
+  } = props;
+  const localeFallbacks = buildLocaleFallbacks(language);
+  const recentEntries = [...entries]
+    .sort((left, right) => compareUpdatedAt(left.item, right.item))
+    .slice(0, 6);
+
+  return (
+    <div className="mb-4 space-y-5">
+      <section className="space-y-2.5">
+        <ShelfHeader
+          icon={Compass}
+          title={readLocalized({ zh: "场景", en: "Scenes" }, language)}
+          description={readLocalized(
+            {
+              zh: "按使用场景浏览适合的技能组合。",
+              en: "Browse skills by how you plan to use them.",
+            },
+            language,
+          )}
+        />
+        <div className="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+          {scenes.map((scene) => (
+            <GoalCard
+              key={scene.scene}
+              scene={scene}
+              language={language}
+              onSelect={onOpenScene}
+            />
+          ))}
+        </div>
+      </section>
+
+      {recentEntries.length > 0 && (
+        <ShelfItemRow
+          icon={Clock3}
+          title={readLocalized({ zh: "最近更新", en: "Recently updated" }, language)}
+          description={readLocalized(
+            {
+              zh: "看看生态最近在补齐哪些能力。",
+              en: "See what the ecosystem has been improving lately.",
+            },
+            language,
+          )}
+          entries={recentEntries}
+          language={language}
+          localeFallbacks={localeFallbacks}
+          installState={installState}
+          onOpen={onOpen}
+          onInstall={onInstall}
+        />
+      )}
+    </div>
+  );
+}
+
+function GoalCard(props: {
+  scene: MarketplaceSceneView;
+  language: string;
+  onSelect: (scene: string) => void;
+}) {
+  const { scene, language, onSelect } = props;
+  const visual = resolveSceneVisual(scene.scene);
+  const Icon = visual.icon;
+  const tone = MARKETPLACE_SHELF_TONE_STYLES[visual.tone];
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(scene.scene)}
+      className={cn(
+        "group flex min-h-[74px] flex-col justify-center rounded-lg border px-3 py-2.5 text-left shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50/70",
+        tone.card,
+      )}
+    >
+      <div className="min-w-0">
+        <div className="flex min-w-0 items-center gap-2">
+          <span
+            className={cn(
+              "flex h-7 w-7 shrink-0 items-center justify-center rounded-md border",
+              tone.icon,
+            )}
+          >
+            <Icon className="h-3.5 w-3.5" />
+          </span>
+          <div className="min-w-0 flex-1 truncate text-[13px] font-semibold text-gray-950">
+            {readSceneTitle(scene, visual, language)}
+          </div>
+          {typeof scene.count === "number" && (
+            <span className="shrink-0 text-[11px] font-medium text-gray-400">
+              {readSceneCount(scene.count, language)}
+            </span>
+          )}
+        </div>
+        <p className={cn("mt-1 line-clamp-1 text-[11px] leading-relaxed", tone.text)}>
+          {readSceneSummary(scene, visual, language)}
+        </p>
+      </div>
+    </button>
+  );
+}
+
+export function MarketplaceCuratedSceneView(props: {
+  scene: MarketplaceSceneView;
+  entries: MarketplaceShelfEntry[];
+  isLoading: boolean;
+  language: string;
+  localeFallbacks: string[];
+  installState: InstallState;
+  onBack: () => void;
+  onOpen: (entry: MarketplaceShelfEntry) => void;
+  onInstall: (item: MarketplaceItemSummary) => void;
+}) {
+  const {
+    scene,
+    entries,
+    isLoading,
+    language,
+    localeFallbacks,
+    installState,
+    onBack,
+    onOpen,
+    onInstall,
+  } = props;
+  const visual = resolveSceneVisual(scene.scene);
+  const Icon = visual.icon;
+  const tone = MARKETPLACE_SHELF_TONE_STYLES[visual.tone];
+
+  return (
+    <section className="flex min-h-full flex-col">
+      <div className="mb-4 flex min-w-0 items-start gap-2.5">
+        <button
+          type="button"
+          onClick={onBack}
+          className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+          aria-label={readLocalized({ zh: "返回", en: "Back" }, language)}
+        >
+          <ArrowLeft className="h-4 w-4" />
+        </button>
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 items-center gap-2">
+            <span
+              className={cn(
+                "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border",
+                tone.icon,
+              )}
+            >
+              <Icon className="h-4 w-4" />
+            </span>
+            <h3 className="min-w-0 flex-1 truncate text-[15px] font-semibold text-gray-950">
+              {readSceneTitle(scene, visual, language)}
+            </h3>
+            <span className="shrink-0 text-[11px] font-medium text-gray-400">
+              {readLocalized(
+                isLoading
+                  ? { zh: "加载中", en: "Loading" }
+                  : { zh: `${entries.length} 个技能`, en: `${entries.length} skills` },
+                language,
+              )}
+            </span>
+          </div>
+          <div className="mt-1.5 flex min-w-0 items-center gap-2">
+            <p className="min-w-0 flex-1 truncate text-[12px] leading-relaxed text-gray-500">
+              {readSceneSummary(scene, visual, language)}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {isLoading ? (
+        <div
+          data-testid="marketplace-scene-skeleton"
+          className={cn(
+            SCENE_CARD_GRID_CLASS,
+            "min-h-0 flex-1 auto-rows-[166px] content-start",
+          )}
+        >
+          <MarketplaceListSkeleton count={SCENE_SKELETON_CARD_COUNT} />
+        </div>
+      ) : entries.length > 0 ? (
+        <div className={SCENE_CARD_GRID_CLASS}>
+          {entries.map((entry) => (
+            <SkillShelfCard
+              key={entry.item.id}
+              entry={entry}
+              language={language}
+              localeFallbacks={localeFallbacks}
+              installState={installState}
+              layout="grid"
+              onOpen={onOpen}
+              onInstall={onInstall}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="rounded-lg border border-dashed border-gray-200 py-8 text-center text-[12px] text-gray-500">
+          {readLocalized({ zh: "这个模块暂无技能。", en: "No skills in this module yet." }, language)}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function ShelfItemRow(props: {
+  icon: ComponentType<{ className?: string }>;
+  title: string;
+  description: string;
+  entries: MarketplaceShelfEntry[];
+  language: string;
+  localeFallbacks: string[];
+  installState: InstallState;
+  onOpen: (entry: MarketplaceShelfEntry) => void;
+  onInstall: (item: MarketplaceItemSummary) => void;
+}) {
+  const {
+    icon: Icon,
+    title,
+    description,
+    entries,
+    language,
+    localeFallbacks,
+    installState,
+    onOpen,
+    onInstall,
+  } = props;
+
+  return (
+    <section className="space-y-2.5">
+      <ShelfHeader icon={Icon} title={title} description={description} />
+      <div className="-mx-1 flex gap-2.5 overflow-x-auto px-1 pb-1.5 custom-scrollbar">
+        {entries.map((entry) => (
+          <SkillShelfCard
+            key={entry.item.id}
+            entry={entry}
+            language={language}
+            localeFallbacks={localeFallbacks}
+            installState={installState}
+            onOpen={onOpen}
+            onInstall={onInstall}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function ShelfHeader({
+  icon: Icon,
+  title,
+  description,
+}: {
+  icon: ComponentType<{ className?: string }>;
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="flex items-end justify-between gap-4">
+      <div>
+        <h3 className="flex items-center gap-2 text-[14px] font-semibold text-gray-950">
+          <Icon className="h-4 w-4 text-primary" />
+          {title}
+        </h3>
+        <p className="mt-0.5 text-[12px] leading-relaxed text-gray-500">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function compareUpdatedAt(left: MarketplaceItemSummary, right: MarketplaceItemSummary) {
+  const leftTs = Date.parse(left.updatedAt);
+  const rightTs = Date.parse(right.updatedAt);
+  if (Number.isNaN(leftTs) || Number.isNaN(rightTs)) {
+    return right.updatedAt.localeCompare(left.updatedAt);
+  }
+  return rightTs - leftTs;
+}
+
+function readLocalized(text: MarketplaceShelfLocalizedText, language: string) {
+  return language.startsWith("zh") ? text.zh : text.en;
+}
+
+function resolveSceneVisual(scene: string): MarketplaceShelfSceneVisual {
+  return MARKETPLACE_SHELF_SCENE_VISUALS.find((visual) => visual.scene === scene) ?? {
+    scene,
+    ...MARKETPLACE_SHELF_FALLBACK_VISUAL,
+  };
+}
+
+function readSceneTitle(scene: MarketplaceSceneView, visual: MarketplaceShelfSceneVisual, language: string) {
+  return visual.title ? readLocalized(visual.title, language) : scene.title;
+}
+
+function readSceneSummary(scene: MarketplaceSceneView, visual: MarketplaceShelfSceneVisual, language: string) {
+  if (visual.summary) {
+    return readLocalized(visual.summary, language);
+  }
+  return scene.description ?? scene.scene;
+}
+
+function readSceneCount(count: number, language: string) {
+  return language.startsWith("zh") ? `${count} 个技能` : `${count} skills`;
+}

package/src/features/marketplace/components/curated-shelves/marketplace-shelf-card.tsx

@@ -0,0 +1,118 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+} from "@/shared/lib/api";
+import type { InstallState } from "@/features/marketplace/components/marketplace-list-card";
+import { MarketplaceItemIcon } from "@/features/marketplace/components/marketplace-item-icon";
+import { pickLocalizedText } from "@/features/marketplace/components/marketplace-localization";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+import { CheckCircle2, Download } from "lucide-react";
+
+type SkillShelfCardEntry = {
+  item: MarketplaceItemSummary;
+  record?: MarketplaceInstalledRecord;
+};
+
+export function SkillShelfCard(props: {
+  entry: SkillShelfCardEntry;
+  language: string;
+  localeFallbacks: string[];
+  installState: InstallState;
+  layout?: "rail" | "grid";
+  onOpen: (entry: SkillShelfCardEntry) => void;
+  onInstall: (item: MarketplaceItemSummary) => void;
+}) {
+  const {
+    entry,
+    language,
+    localeFallbacks,
+    installState,
+    layout = "rail",
+    onOpen,
+    onInstall,
+  } = props;
+  const { item, record } = entry;
+  const summary = pickLocalizedText(item.summaryI18n, item.summary, localeFallbacks);
+  const installSpec = item.install.spec;
+  const isInstalling = installState.installingSpecs.has(installSpec);
+  const isInstalled = Boolean(record);
+
+  return (
+    <article
+      onClick={() => onOpen(entry)}
+      className={cn(
+        "group flex min-h-[166px] cursor-pointer flex-col justify-between rounded-xl border border-gray-200/70 bg-white p-3 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50/60",
+        layout === "rail" ? "w-[260px] shrink-0" : "w-full min-w-0",
+      )}
+    >
+      <div>
+        <div className="mb-2.5 flex min-w-0 items-start gap-2.5">
+          <MarketplaceItemIcon name={item.name} fallback={item.install.spec} />
+          <div className="min-w-0 flex-1 pt-0.5">
+            <div className="truncate text-[13px] font-semibold leading-tight text-gray-950">
+              {item.name}
+            </div>
+            <div className="mt-0.5 truncate text-[11px] font-mono leading-tight text-gray-400">
+              {formatShelfMeta(item)}
+            </div>
+          </div>
+        </div>
+        <p className="line-clamp-2 text-[12px] leading-relaxed text-gray-500">
+          {summary}
+        </p>
+        <TagLine tags={item.tags} />
+      </div>
+
+      <div className="mt-3 flex items-center justify-between gap-3 border-t border-gray-100 pt-2.5">
+        <span className="min-w-0 truncate text-[11px] text-gray-400">
+          {formatUpdatedAt(item.updatedAt)}
+        </span>
+        {isInstalled ? (
+          <span className="inline-flex h-7 items-center gap-1.5 text-[11px] font-semibold text-emerald-700">
+            <CheckCircle2 className="h-3.5 w-3.5" />
+            {readLocalized({ zh: "已安装", en: "Installed" }, language)}
+          </span>
+        ) : (
+          <button
+            type="button"
+            disabled={isInstalling}
+            onClick={(event) => {
+              event.stopPropagation();
+              onInstall(item);
+            }}
+            className="inline-flex h-7 items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2 text-[11px] font-semibold text-gray-700 transition-colors hover:border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+          >
+            <Download className="h-3.5 w-3.5" />
+            {isInstalling ? t("marketplaceInstalling") : t("marketplaceInstall")}
+          </button>
+        )}
+      </div>
+    </article>
+  );
+}
+
+function formatShelfMeta(item: MarketplaceItemSummary) {
+  return item.slug || item.install.spec;
+}
+
+function TagLine({ tags }: { tags: string[] }) {
+  const visibleTags = tags.slice(0, 2);
+  if (visibleTags.length === 0) {
+    return null;
+  }
+  return (
+    <div className="mt-2 truncate text-[11px] font-medium text-gray-400">
+      {visibleTags.join(" / ")}
+    </div>
+  );
+}
+
+function formatUpdatedAt(value: string) {
+  const date = value.slice(0, 10);
+  return date || value;
+}
+
+function readLocalized(text: { zh: string; en: string }, language: string) {
+  return language.startsWith("zh") ? text.zh : text.en;
+}

package/src/features/marketplace/components/detail-doc/marketplace-detail-doc-renderer.ts

@@ -0,0 +1,201 @@
+export function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function stripYamlFrontmatter(text: string): string {
+  const lines = text.replace(/\r\n/g, "\n").split("\n");
+  if (lines[0]?.trim() !== "---") {
+    return text;
+  }
+  const closingIndex = lines.findIndex((line, index) => index > 0 && line.trim() === "---");
+  return closingIndex > 0 ? lines.slice(closingIndex + 1).join("\n").trim() : text;
+}
+
+function renderInlineMarkdown(text: string): string {
+  return escapeHtml(text)
+    .replace(/`([^`]+)`/g, "<code>$1</code>")
+    .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+    .replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+}
+
+function isMarkdownBlockStart(line: string): boolean {
+  return /^(#{1,4})\s+/.test(line)
+    || /^([-*])\s+/.test(line)
+    || /^\d+\.\s+/.test(line)
+    || /^>\s?/.test(line)
+    || /^```/.test(line);
+}
+
+type MarkdownRenderResult = {
+  html: string;
+  nextIndex: number;
+};
+
+function renderCodeBlock(lines: string[], index: number, fenceMatch: RegExpMatchArray): MarkdownRenderResult {
+  const codeLines: string[] = [];
+  let nextIndex = index + 1;
+  while (nextIndex < lines.length && !lines[nextIndex]?.trim().startsWith("```")) {
+    codeLines.push(lines[nextIndex] ?? "");
+    nextIndex += 1;
+  }
+  const language = fenceMatch[1] ? `<span class="code-language">${escapeHtml(fenceMatch[1])}</span>` : "";
+  return {
+    html: `<div class="code-block">${language}<pre><code>${escapeHtml(codeLines.join("\n"))}</code></pre></div>`,
+    nextIndex: nextIndex + 1,
+  };
+}
+
+function renderHeadingBlock(headingMatch: RegExpMatchArray, index: number): MarkdownRenderResult {
+  const level = Math.min(4, headingMatch[1]?.length ?? 2);
+  return {
+    html: `<h${level}>${renderInlineMarkdown(headingMatch[2] ?? "")}</h${level}>`,
+    nextIndex: index + 1,
+  };
+}
+
+function renderListBlock(lines: string[], index: number, ordered: boolean): MarkdownRenderResult {
+  const items: string[] = [];
+  let nextIndex = index;
+  const matcher = ordered ? /^\d+\.\s+/ : /^[-*]\s+/;
+  while (nextIndex < lines.length && matcher.test(lines[nextIndex]?.trim() ?? "")) {
+    items.push(`<li>${renderInlineMarkdown((lines[nextIndex] ?? "").trim().replace(matcher, ""))}</li>`);
+    nextIndex += 1;
+  }
+  return {
+    html: ordered ? `<ol>${items.join("")}</ol>` : `<ul>${items.join("")}</ul>`,
+    nextIndex,
+  };
+}
+
+function renderQuoteBlock(lines: string[], index: number): MarkdownRenderResult {
+  const quotes: string[] = [];
+  let nextIndex = index;
+  while (nextIndex < lines.length && /^>\s?/.test(lines[nextIndex]?.trim() ?? "")) {
+    quotes.push((lines[nextIndex] ?? "").trim().replace(/^>\s?/, ""));
+    nextIndex += 1;
+  }
+  return {
+    html: `<blockquote>${renderInlineMarkdown(quotes.join(" "))}</blockquote>`,
+    nextIndex,
+  };
+}
+
+function renderParagraphBlock(lines: string[], index: number): MarkdownRenderResult {
+  const paragraphLines: string[] = [];
+  let nextIndex = index;
+  while (nextIndex < lines.length) {
+    const paragraphLine = lines[nextIndex]?.trim() ?? "";
+    if (!paragraphLine || isMarkdownBlockStart(paragraphLine)) {
+      break;
+    }
+    paragraphLines.push(paragraphLine);
+    nextIndex += 1;
+  }
+  return {
+    html: `<p>${renderInlineMarkdown(paragraphLines.join(" "))}</p>`,
+    nextIndex,
+  };
+}
+
+function renderMarkdownBlock(lines: string[], index: number): MarkdownRenderResult {
+  const trimmed = lines[index]?.trim() ?? "";
+  const fenceMatch = trimmed.match(/^```(\S*)/);
+  if (fenceMatch) {
+    return renderCodeBlock(lines, index, fenceMatch);
+  }
+
+  const headingMatch = trimmed.match(/^(#{1,4})\s+(.+)$/);
+  if (headingMatch) {
+    return renderHeadingBlock(headingMatch, index);
+  }
+
+  if (/^[-*]\s+/.test(trimmed)) {
+    return renderListBlock(lines, index, false);
+  }
+  if (/^\d+\.\s+/.test(trimmed)) {
+    return renderListBlock(lines, index, true);
+  }
+  if (/^>\s?/.test(trimmed)) {
+    return renderQuoteBlock(lines, index);
+  }
+  return renderParagraphBlock(lines, index);
+}
+
+export function renderDetailMarkdown(markdown: string): string {
+  const lines = stripYamlFrontmatter(markdown).replace(/\r\n/g, "\n").split("\n");
+  const blocks: string[] = [];
+  let index = 0;
+
+  while (index < lines.length) {
+    if (!(lines[index] ?? "").trim()) {
+      index += 1;
+      continue;
+    }
+
+    const result = renderMarkdownBlock(lines, index);
+    blocks.push(result.html);
+    index = result.nextIndex;
+  }
+
+  return blocks.join("");
+}
+
+type MetadataEntry = {
+  key: string;
+  value: string;
+};
+
+function stringifyMetadataValue(value: unknown): string {
+  if (Array.isArray(value)) {
+    return value.map((entry) => stringifyMetadataValue(entry)).join(", ");
+  }
+  if (value && typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  return String(value ?? "");
+}
+
+function readJsonMetadata(raw: string): MetadataEntry[] {
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return [];
+    }
+    return Object.entries(parsed)
+      .map(([key, value]) => ({ key, value: stringifyMetadataValue(value) }))
+      .filter((entry) => entry.value.trim().length > 0);
+  } catch {
+    return [];
+  }
+}
+
+function readYamlLikeMetadata(raw: string): MetadataEntry[] {
+  return raw
+    .replace(/\r\n/g, "\n")
+    .split("\n")
+    .map((line) => line.match(/^([A-Za-z0-9_.-]+):\s*(.+)$/))
+    .filter((match): match is RegExpMatchArray => Boolean(match))
+    .map((match) => ({
+      key: match[1] ?? "",
+      value: match[2]?.replace(/^["']|["']$/g, "") ?? "",
+    }))
+    .filter((entry) => entry.key && entry.value.trim().length > 0);
+}
+
+export function renderDetailMetadata(raw: string): string {
+  const entries = readJsonMetadata(raw);
+  const metadataEntries = entries.length > 0 ? entries : readYamlLikeMetadata(raw);
+  if (metadataEntries.length === 0) {
+    return `<pre class="code">${escapeHtml(raw)}</pre>`;
+  }
+  return `<dl class="metadata-list">${metadataEntries
+    .map(
+      (entry) => `<div><dt>${escapeHtml(entry.key)}</dt><dd>${escapeHtml(entry.value)}</dd></div>`,
+    )
+    .join("")}</dl>`;
+}