@allbluecn/web-app 0.17.1 → 0.18.0

package/src/components/bug/settings/install-commands.tsx

@@ -0,0 +1,226 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 安装命令区（任务 15，规格 §8.7）：npm install @allbluecn/bug-sdk + 预填 key 的
+// 初始化代码块 + 浏览器/React/Vue/Node 四环境 tab + 文档链接。
+// 命令文本已与 @allbluecn/bug-sdk 实际 exports（./、./react、./vue、./node）对齐：
+// 浏览器/React/Vue 用主入口 initBugSdk；Node 必须走 ./node 子路径的
+// initNodeBugSdk（endpoint 必填绝对 URL，宽范围审查修复——主入口 initBugSdk
+// 是浏览器 SDK，Node 下复制即不可用）。契约测试锁定：
+// components/bug/__tests__/install-commands-contract.test.ts。
+// 密钥明文仅在创建后立即可预填（freshToken）；历史凭证只有 prefix，
+// 代码块以 prefix 占位并提示粘贴创建时保存的完整密钥。
+import { useEffect, useMemo, useState } from "react";
+import { BookOpen, Copy } from "lucide-react";
+import { toast } from "@allbluecn/ui/toast";
+import { Button } from "@allbluecn/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@allbluecn/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { BugTokenListItem } from "./token-list";
+import { m } from "@/paraglide/messages.js";
+
+const INSTALL_CMD = "npm install @allbluecn/bug-sdk";
+const DOC_URL = "/zh/docs/bug-sdk";
+
+type EnvKey = "browser" | "react" | "vue" | "node";
+
+interface InstallCommandsProps {
+  tokens: BugTokenListItem[];
+  /** 本次会话刚创建的凭证（明文仅此时可预填） */
+  freshToken: { tokenId: string; plaintext: string } | null;
+}
+
+export function InstallCommands({ tokens, freshToken }: InstallCommandsProps) {
+  const activeTokens = useMemo(() => tokens.filter((t) => !t.revoked), [tokens]);
+  const [selectedId, setSelectedId] = useState<string>("");
+
+  useEffect(() => {
+    if (freshToken) {
+      setSelectedId(freshToken.tokenId);
+      return;
+    }
+    if (!selectedId && activeTokens.length > 0) {
+      setSelectedId(activeTokens[0]!.id);
+    }
+  }, [freshToken, activeTokens, selectedId]);
+
+  const selected = activeTokens.find((t) => t.id === selectedId) ?? null;
+  const keyText =
+    selected && freshToken && freshToken.tokenId === selected.id
+      ? freshToken.plaintext
+      : selected
+        ? `${selected.tokenPrefix}…<${m.bug_settings_install_pasteFullKey()}>`
+        : "<YOUR_BUG_KEY>";
+
+  const codeByEnv: Record<EnvKey, string> = {
+    // 浏览器免打包场景走 esm.sh CDN（包发布 npm 后由其按 exports 提供 ESM）；
+    // 任务 15 时此处为 `${reportUrl}/sdk` 规格占位，任务 16 SDK 落地后对齐真实包导出。
+    browser: [
+      `<script type="module">`,
+      `  import { initBugSdk } from "https://esm.sh/@allbluecn/bug-sdk";`,
+      ``,
+      `  initBugSdk({`,
+      `    key: "${keyText}",`,
+      `  });`,
+      `</script>`,
+    ].join("\n"),
+    react: [
+      `// main.tsx（应用入口，Router 之前）`,
+      `import { initBugSdk } from "@allbluecn/bug-sdk";`,
+      ``,
+      `initBugSdk({`,
+      `  key: "${keyText}",`,
+      `});`,
+      ``,
+      `// 可选：渲染树错误边界（上报后 rethrow，不改变崩溃语义）`,
+      `// import { BugSdkErrorBoundary } from "@allbluecn/bug-sdk/react";`,
+      `// <BugSdkErrorBoundary><App /></BugSdkErrorBoundary>`,
+    ].join("\n"),
+    vue: [
+      `// main.ts（应用入口）`,
+      `import { initBugSdk } from "@allbluecn/bug-sdk";`,
+      `import { createBugSdkVuePlugin } from "@allbluecn/bug-sdk/vue";`,
+      ``,
+      `initBugSdk({`,
+      `  key: "${keyText}",`,
+      `});`,
+      ``,
+      `app.use(createBugSdkVuePlugin());`,
+    ].join("\n"),
+    node: [
+      `// entry.ts / server 入口（Node 专属子路径，endpoint 必填绝对 URL）`,
+      `import { initNodeBugSdk } from "@allbluecn/bug-sdk/node";`,
+      ``,
+      `initNodeBugSdk({`,
+      `  key: "${keyText}",`,
+      `  endpoint: "https://your-allblue.example.com/api/bugs/report",`,
+      `});`,
+    ].join("\n"),
+  };
+
+  const copyText = async (text: string, successMsg: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(successMsg);
+    } catch {
+      toast.error(m.bug_settings_token_copyFailed());
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">{m.bug_settings_install_desc()}</p>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-sm text-muted-foreground">
+          {m.bug_settings_install_selectToken()}
+        </span>
+        <Select
+          value={selectedId}
+          onValueChange={(v) => setSelectedId(v ?? "")}
+          disabled={activeTokens.length === 0}
+        >
+          <SelectTrigger className="w-64">
+            <SelectValue placeholder={m.bug_settings_install_noToken()} />
+          </SelectTrigger>
+          <SelectContent>
+            {activeTokens.map((t) => (
+              <SelectItem key={t.id} value={t.id}>
+                {t.name}（{t.tokenPrefix}…）
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 安装依赖 */}
+      <div>
+        <div className="mb-1.5 flex items-center justify-between">
+          <span className="text-xs font-medium text-muted-foreground">
+            {m.bug_settings_install_installCmd()}
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => void copyText(INSTALL_CMD, m.bug_settings_install_copied())}
+          >
+            <Copy className="size-4" />
+            {m.bug_settings_token_copy()}
+          </Button>
+        </div>
+        <pre className="overflow-x-auto rounded-md bg-muted px-3 py-2.5 font-mono text-xs">
+          {INSTALL_CMD}
+        </pre>
+      </div>
+
+      {/* 初始化代码：浏览器 / React / Vue / Node 四环境示例（各自一键复制） */}
+      <div>
+        <div className="mb-1.5">
+          <span className="text-xs font-medium text-muted-foreground">
+            {m.bug_settings_install_initCode()}
+          </span>
+        </div>
+        <Tabs defaultValue="browser">
+          <div className="mb-1.5 flex items-center justify-between">
+            <TabsList>
+              <TabsTrigger value="browser">{m.bug_settings_install_env_browser()}</TabsTrigger>
+              <TabsTrigger value="react">React</TabsTrigger>
+              <TabsTrigger value="vue">Vue</TabsTrigger>
+              <TabsTrigger value="node">Node</TabsTrigger>
+            </TabsList>
+          </div>
+          {(Object.keys(codeByEnv) as EnvKey[]).map((env) => (
+            <TabsContent key={env} value={env} className="mt-0">
+              <div className="relative">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="absolute top-1.5 right-1.5"
+                  onClick={() => void copyText(codeByEnv[env], m.bug_settings_install_copied())}
+                >
+                  <Copy className="size-4" />
+                </Button>
+                <pre className="overflow-x-auto rounded-md bg-muted px-3 py-2.5 font-mono text-xs">
+                  {codeByEnv[env]}
+                </pre>
+              </div>
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <p className="text-xs text-muted-foreground">{m.bug_settings_install_endpointNote()}</p>
+        <a
+          href={DOC_URL}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+        >
+          <BookOpen className="size-4" />
+          {m.bug_settings_install_docLink()}
+        </a>
+      </div>
+    </div>
+  );
+}

package/src/components/bug/settings/token-list.tsx

@@ -0,0 +1,275 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// BUG 接入凭证列表（任务 15，规格 §8.7）：bug.report scope token 的列表
+// （name/tokenPrefix/lastUsedAt/状态）+ 创建（明文仅一次展示）+ 吊销。
+// 凭证数据与增删回调由 BugSettingsPanel 持有，本组件只管交互与展示。
+import { useState } from "react";
+import { Copy, KeyRound, Loader2, Plus } from "lucide-react";
+import { toast } from "@allbluecn/ui/toast";
+import { Button } from "@allbluecn/ui/button";
+import { Input } from "@allbluecn/ui/input";
+import { Label } from "@allbluecn/ui/label";
+import { Badge } from "@allbluecn/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@allbluecn/ui/dialog";
+import { ConfirmDialog } from "@allbluecn/ui/components/confirm-dialog";
+import { formatRelative } from "@/components/bug/detail/activity-timeline";
+import { m } from "@/paraglide/messages.js";
+
+/** 凭证列表项（与 listBugTokensFn 返回形状对齐，无明文无 hash 全文） */
+export interface BugTokenListItem {
+  id: string;
+  name: string;
+  tokenPrefix: string;
+  lastUsedAt: string | null;
+  revoked: boolean;
+  revokedAt: string | null;
+  createdAt: string;
+  createdByUsername: string | null;
+}
+
+/** 创建成功结果（明文仅此一次经手 UI，关闭弹窗即从内存清除） */
+export interface CreatedTokenResult {
+  name: string;
+  plaintext: string;
+}
+
+interface TokenListProps {
+  tokens: BugTokenListItem[];
+  loading: boolean;
+  creating: boolean;
+  /** 创建成功返回明文结果（面板同步存为 freshToken 供安装命令预填）；失败返回 null */
+  onCreate: (name: string) => Promise<CreatedTokenResult | null>;
+  onRevoke: (tokenId: string) => Promise<boolean>;
+}
+
+export function TokenList({ tokens, loading, creating, onCreate, onRevoke }: TokenListProps) {
+  const [createOpen, setCreateOpen] = useState(false);
+  const [tokenName, setTokenName] = useState("");
+  // 创建成功后的明文一次性展示态（关闭即清空，服务端也不再留存）
+  const [created, setCreated] = useState<CreatedTokenResult | null>(null);
+  const [revokeTarget, setRevokeTarget] = useState<BugTokenListItem | null>(null);
+  const [revoking, setRevoking] = useState(false);
+
+  const handleCreate = async () => {
+    if (!tokenName.trim()) {
+      toast.error(m.bug_settings_token_nameRequired());
+      return;
+    }
+    const result = await onCreate(tokenName.trim());
+    if (!result) return;
+    setCreateOpen(false);
+    setCreated(result);
+  };
+
+  const handleRevoke = async () => {
+    if (!revokeTarget) return;
+    setRevoking(true);
+    try {
+      const ok = await onRevoke(revokeTarget.id);
+      if (ok) toast.success(m.bug_settings_token_revoked());
+    } finally {
+      setRevoking(false);
+      setRevokeTarget(null);
+    }
+  };
+
+  const copyPlaintext = async () => {
+    if (!created) return;
+    try {
+      await navigator.clipboard.writeText(created.plaintext);
+      toast.success(m.bug_settings_token_copied());
+    } catch {
+      toast.error(m.bug_settings_token_copyFailed());
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-sm text-muted-foreground">{m.bug_settings_token_desc()}</p>
+        <Button size="sm" onClick={() => { setTokenName(""); setCreateOpen(true); }}>
+          <Plus className="size-4" />
+          {m.bug_settings_token_create()}
+        </Button>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
+          <Loader2 className="mr-2 size-4 animate-spin" />
+        </div>
+      ) : tokens.length === 0 ? (
+        <div className="flex flex-col items-center gap-2 rounded-md border border-dashed py-8 text-sm text-muted-foreground">
+          <KeyRound className="size-6" />
+          {m.bug_settings_token_empty()}
+        </div>
+      ) : (
+        <div className="overflow-hidden rounded-md border">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b bg-muted/50 text-left text-xs text-muted-foreground">
+                <th className="px-3 py-2 font-medium">{m.bug_settings_token_name()}</th>
+                <th className="px-3 py-2 font-medium">{m.bug_settings_token_prefix()}</th>
+                <th className="hidden px-3 py-2 font-medium sm:table-cell">
+                  {m.bug_settings_token_lastUsed()}
+                </th>
+                <th className="px-3 py-2 font-medium">{m.bug_settings_token_status()}</th>
+                <th className="hidden px-3 py-2 font-medium md:table-cell">
+                  {m.bug_settings_token_createdAt()}
+                </th>
+                <th className="px-3 py-2 text-right font-medium">
+                  {m.bug_settings_token_actions()}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {tokens.map((t) => (
+                <tr key={t.id} className="border-b last:border-b-0">
+                  <td className="px-3 py-2">
+                    <span className="font-medium">{t.name}</span>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">
+                      {t.tokenPrefix}…
+                    </code>
+                  </td>
+                  <td className="hidden px-3 py-2 text-muted-foreground sm:table-cell">
+                    {t.lastUsedAt ? formatRelative(t.lastUsedAt) : m.bug_settings_token_neverUsed()}
+                  </td>
+                  <td className="px-3 py-2">
+                    {t.revoked ? (
+                      <Badge variant="outline" className="text-muted-foreground">
+                        {m.bug_settings_token_revoked()}
+                      </Badge>
+                    ) : (
+                      <Badge>{m.bug_settings_token_active()}</Badge>
+                    )}
+                  </td>
+                  <td className="hidden px-3 py-2 text-muted-foreground md:table-cell">
+                    {formatRelative(t.createdAt)}
+                  </td>
+                  <td className="px-3 py-2 text-right">
+                    {!t.revoked && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-destructive hover:text-destructive"
+                        onClick={() => setRevokeTarget(t)}
+                      >
+                        {m.bug_settings_token_revoke()}
+                      </Button>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* 创建弹窗 */}
+      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{m.bug_settings_token_create()}</DialogTitle>
+            <DialogDescription>{m.bug_settings_token_createDesc()}</DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-2">
+            <Label htmlFor="bug-token-name">{m.bug_settings_token_name()}</Label>
+            <Input
+              id="bug-token-name"
+              value={tokenName}
+              onChange={(e) => setTokenName(e.target.value)}
+              placeholder={m.bug_settings_token_namePlaceholder()}
+              maxLength={50}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  void handleCreate();
+                }
+              }}
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCreateOpen(false)}>
+              {m.bug_comment_cancel()}
+            </Button>
+            <Button onClick={() => void handleCreate()} disabled={creating}>
+              {creating && <Loader2 className="mr-2 size-4 animate-spin" />}
+              {m.bug_settings_token_create()}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 明文一次性展示弹窗（关闭后无法再查看） */}
+      <Dialog
+        open={created !== null}
+        onOpenChange={(open) => {
+          if (!open) setCreated(null);
+        }}
+      >
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{m.bug_settings_token_createdTitle()}</DialogTitle>
+            <DialogDescription>
+              {m.bug_settings_token_plaintextOnceWarning({ name: created?.name ?? "" })}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex items-center gap-2">
+            <code className="min-w-0 flex-1 truncate rounded-md bg-muted px-3 py-2 font-mono text-xs">
+              {created?.plaintext}
+            </code>
+            <Button variant="outline" size="sm" onClick={() => void copyPlaintext()}>
+              <Copy className="size-4" />
+              {m.bug_settings_token_copy()}
+            </Button>
+          </div>
+          <DialogFooter>
+            <Button onClick={() => setCreated(null)}>
+              {m.bug_settings_token_done()}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 吊销确认 */}
+      <ConfirmDialog
+        open={revokeTarget !== null}
+        onOpenChange={(o) => !o && setRevokeTarget(null)}
+        title={m.bug_settings_token_revokeConfirmTitle()}
+        description={m.bug_settings_token_revokeConfirmDesc({ name: revokeTarget?.name ?? "" })}
+        cancelLabel={m.bug_comment_cancel()}
+        confirmLabel={
+          <>
+            {revoking && <Loader2 className="mr-2 size-4 animate-spin" />}
+            {m.bug_settings_token_revoke()}
+          </>
+        }
+        confirmDisabled={revoking}
+        onConfirm={() => void handleRevoke()}
+      />
+    </div>
+  );
+}