bhg-helper 1.0.0

package/src/pages/Install.tsx

@@ -0,0 +1,195 @@
+import { useEffect, useRef, useState } from 'react'
+import { api } from '../lib/api'
+import { Terminal, Download, AlertTriangle, CheckCircle2, Loader2, Play } from 'lucide-react'
+
+interface InstallStatus {
+  projectRoot: string
+  hasNodeModules: boolean
+  hasPackageJson: boolean
+  needsInstall: boolean
+  isRunning: boolean
+  logCount: number
+  node: { ok: boolean; version?: string; error?: string }
+  npm: { ok: boolean; version?: string; error?: string }
+}
+
+export default function Install() {
+  const [status, setStatus] = useState<InstallStatus | null>(null)
+  const [logs, setLogs] = useState<string[]>([])
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string>('')
+  const logRef = useRef<HTMLDivElement>(null)
+
+  // 拉状态
+  useEffect(() => {
+    let stop = false
+    async function tick() {
+      try {
+        const s = await api.getInstallStatus()
+        if (!stop) setStatus(s as InstallStatus)
+      } catch (e) {
+        if (!stop) setError(String(e))
+      }
+    }
+    void tick()
+    const t = setInterval(tick, 2000)
+    return () => { stop = true; clearInterval(t) }
+  }, [])
+
+  // SSE 拉日志
+  useEffect(() => {
+    const es = new EventSource('/api/install/logs')
+    es.onmessage = (e) => {
+      try {
+        const data = JSON.parse(e.data) as { line: string; ts: number }
+        setLogs((prev) => {
+          const next = [...prev, data.line]
+          return next.length > 1000 ? next.slice(-1000) : next
+        })
+      } catch { /* ignore */ }
+    }
+    es.onerror = () => { /* will reconnect */ }
+    return () => es.close()
+  }, [])
+
+  // 自动滚到底
+  useEffect(() => {
+    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight
+  }, [logs])
+
+  async function handleInstall() {
+    setBusy(true)
+    setError('')
+    setLogs([])
+    try {
+      await api.runInstall()
+    } catch (e) {
+      setError(String(e))
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function handleCancel() {
+    setBusy(true)
+    try { await api.cancelInstall() } catch { /* */ } finally { setBusy(false) }
+  }
+
+  // 安装完成且 needsInstall=false → 自动刷新进入主界面
+  useEffect(() => {
+    if (status && !status.isRunning && !status.needsInstall && status.hasNodeModules) {
+      const t = setTimeout(() => window.location.reload(), 500)
+      return () => clearTimeout(t)
+    }
+  }, [status])
+
+  if (!status) {
+    return (
+      <div className="install-page">
+        <div className="install-card">
+          <Loader2 className="spin" size={32} />
+          <p>检查环境...</p>
+        </div>
+      </div>
+    )
+  }
+
+  const { node, npm, hasNodeModules, hasPackageJson, needsInstall, isRunning } = status
+  const envOK = node.ok && npm.ok
+
+  return (
+    <div className="install-page">
+      <div className="install-card">
+        <div className="install-header">
+          <Terminal size={28} />
+          <div>
+            <h1>BHG-helper</h1>
+            <p className="install-subtitle">
+              {needsInstall ? '首次使用 — 完成安装即可启动' : '依赖已就绪 — 直接进入'}
+            </p>
+          </div>
+        </div>
+
+        {/* 环境检查 */}
+        <div className="install-checks">
+          <CheckRow ok={hasPackageJson} label="package.json" detail={status.projectRoot} />
+          <CheckRow ok={hasNodeModules} label="node_modules" detail={hasNodeModules ? '已安装' : '缺失'} />
+          <CheckRow ok={node.ok} label="Node.js" detail={node.version || node.error || '未检测到'} />
+          <CheckRow ok={npm.ok} label="npm" detail={npm.version || npm.error || '未检测到'} />
+        </div>
+
+        {!envOK && (
+          <div className="install-error">
+            <AlertTriangle size={20} />
+            <div>
+              <strong>环境缺失</strong>
+              <p>需要先安装 Node.js 18+（自带 npm）：<a href="https://nodejs.org/" target="_blank" rel="noreferrer">nodejs.org</a></p>
+              <p>安装完后点下方「重新检查」。</p>
+            </div>
+            <button className="btn" onClick={() => window.location.reload()}>重新检查</button>
+          </div>
+        )}
+
+        {envOK && needsInstall && !isRunning && (
+          <div className="install-action">
+            <button className="btn btn-primary btn-large" onClick={handleInstall} disabled={busy}>
+              <Download size={20} />
+              一键安装依赖（约 1-2 分钟）
+            </button>
+            <p className="install-hint">会执行 <code>npm install</code>，约 200+ 包，无网络代理需求。</p>
+          </div>
+        )}
+
+        {envOK && !needsInstall && !isRunning && (
+          <div className="install-done">
+            <CheckCircle2 size={28} />
+            <div>
+              <strong>已就绪</strong>
+              <p>所有依赖已安装，正在进入 Cockpit...</p>
+            </div>
+          </div>
+        )}
+
+        {isRunning && (
+          <div className="install-action">
+            <div className="install-running">
+              <Loader2 className="spin" size={20} />
+              <span>正在安装依赖...</span>
+            </div>
+            <button className="btn" onClick={handleCancel} disabled={busy}>取消</button>
+          </div>
+        )}
+
+        {/* 日志区 */}
+        {logs.length > 0 && (
+          <div className="install-logs" ref={logRef}>
+            {logs.map((line, i) => (
+              <div key={i} className={line.includes('[stderr]') || line.includes('failed') ? 'log-err' : 'log-line'}>
+                {line}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {error && <div className="install-error-text">{error}</div>}
+
+        <div className="install-footer">
+          <span>路径：<code>{status.projectRoot}</code></span>
+          <a href="https://github.com/" target="_blank" rel="noreferrer" className="install-link">
+            <Play size={12} /> 查看文档
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function CheckRow({ ok, label, detail }: { ok: boolean; label: string; detail: string }) {
+  return (
+    <div className="check-row">
+      {ok ? <CheckCircle2 size={18} className="check-ok" /> : <AlertTriangle size={18} className="check-warn" />}
+      <span className="check-label">{label}</span>
+      <code className="check-detail">{detail}</code>
+    </div>
+  )
+}

package/src/pages/Relay.tsx

@@ -0,0 +1,409 @@
+import { useEffect, useState } from 'react'
+import { useStore } from '../lib/store'
+import { api } from '../lib/api'
+import Page, { Panel, StatusCard } from '../components/Page'
+import {
+  Play,
+  Square,
+  RotateCcw,
+  Save,
+  Eye,
+  EyeOff,
+  Zap,
+  Server,
+} from 'lucide-react'
+
+interface RelayConfigState {
+  port: number
+  deepseekBaseUrl: string
+  deepseekApiKey: string
+  spoofProvider: string
+  verbose: boolean
+  modelMap: Record<string, string>
+  configPath?: string
+  apiKeyConfigured?: boolean
+}
+
+export default function RelayPage() {
+  const config = useStore((s) => s.config)
+  const loadAll = useStore((s) => s.loadAll)
+  const [status, setStatus] = useState<{ running: boolean; info: { port: number; running: boolean; baseUrl: string; modelMap: Record<string, string>; deepseekApiKey: string } | null; config: RelayConfigState } | null>(null)
+  const [draft, setDraft] = useState<RelayConfigState | null>(null)
+  const [showKey, setShowKey] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  // 复制启动命令到剪贴板
+  async function copyLaunchCmd() {
+    try {
+      await navigator.clipboard.writeText('claude')
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch { /* ignore */ }
+  }
+
+  useEffect(() => {
+    void refresh()
+    const t = setInterval(refresh, 5000)
+    return () => {
+      clearInterval(t)
+    }
+  }, [])
+
+  async function refresh() {
+    try {
+      const s = await api.getRelayStatus()
+      setStatus(s as never)
+      if (!draft) setDraft(s.config)
+    } catch {
+      // ignore
+    }
+  }
+
+  if (!status || !draft) {
+    return (
+      <Page title="中转服务" code="07">
+        <div className="empty">加载中…</div>
+      </Page>
+    )
+  }
+
+  async function handleStart() {
+    setBusy(true)
+    try {
+      await api.startRelay()
+      await refresh()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function handleStop() {
+    setBusy(true)
+    try {
+      await api.stopRelay()
+      await refresh()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function handleRestart() {
+    setBusy(true)
+    try {
+      await api.restartRelay()
+      await refresh()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function handleSave() {
+    if (!draft) return
+    setBusy(true)
+    try {
+      // 如果 key 是脱敏的（中间有 ••••），不提交 deepseekApiKey 字段，避免覆盖真实密钥
+      const patch: Record<string, unknown> = {
+        port: draft.port,
+        deepseekBaseUrl: draft.deepseekBaseUrl,
+        spoofProvider: draft.spoofProvider,
+        verbose: draft.verbose,
+      }
+      if (!draft.deepseekApiKey.includes('••••')) patch.deepseekApiKey = draft.deepseekApiKey
+      await api.updateRelayConfig(patch)
+      await refresh()
+      await loadAll()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function handleOneClickActivate() {
+    // 一键：保存当前 draft + 启动中转
+    await handleSave()
+    if (!status.running) await handleStart()
+  }
+
+  const running = status.running
+  const currentModel = config?.settings?.model ?? '—'
+  const hasKey = !!(status?.config?.deepseekApiKey?.trim()) || !!(status?.info?.deepseekApiKey?.trim())
+  const isFirstRun = !hasKey && !running
+
+  return (
+    <>
+      {isFirstRun && <FirstRunBanner onDismiss={() => void refresh()} />}
+      {running && hasKey && <ReadyBanner onCopy={copyLaunchCmd} copied={copied} />}
+    <Page
+      title="中转服务"
+      code="07"
+      subtitle="本地 Anthropic ↔ DeepSeek 中转，集中管理 API Key 与模型映射"
+      actions={
+        <>
+          {running ? (
+            <button className="btn btn-danger" onClick={handleStop} disabled={busy}>
+              <Square size={14} /> 停止
+            </button>
+          ) : (
+            <button className="btn btn-primary" onClick={handleStart} disabled={busy}>
+              <Play size={14} /> 启动
+            </button>
+          )}
+          <button className="btn" onClick={handleRestart} disabled={busy || !running}>
+            <RotateCcw size={14} /> 重启
+          </button>
+        </>
+      }
+    >
+      <div className="panel-grid cols-3" style={{ marginBottom: 'var(--sp-5)' }}>
+        <StatusCard
+          tone={running ? 'green' : 'red'}
+          label="中转服务"
+          value={running ? `RUNNING :${draft.port}` : 'STOPPED'}
+          meta={running ? `listening on 127.0.0.1:${draft.port}` : '点击「启动」开启'}
+        />
+        <StatusCard
+          tone={draft.deepseekApiKey && !draft.deepseekApiKey.includes('••••') ? 'green' : 'red'}
+          label="DeepSeek Key"
+          value={
+            draft.deepseekApiKey
+              ? showKey
+                ? draft.deepseekApiKey
+                : draft.deepseekApiKey
+              : '未填写'
+          }
+          meta="platform.deepseek.com 申请的 sk-…"
+        />
+        <StatusCard
+          tone={config?.settings?.model?.startsWith('deepseek') ? 'green' : 'amber'}
+          label="Bridge 当前模型"
+          value={currentModel}
+          meta="切换到 deepseek-* 才能用中转"
+        />
+      </div>
+
+      <Panel title="CONFIG · 中转配置">
+        <div className="panel-grid cols-2">
+          <div className="field" style={{ margin: 0 }}>
+            <label className="field-label">
+              <span className="key">port /</span> 监听端口
+            </label>
+            <input
+              className="input"
+              type="number"
+              value={draft.port}
+              onChange={(e) => setDraft({ ...draft, port: Number(e.target.value) || 8787 })}
+            />
+            <div className="field-hint">默认 8787，仅监听 127.0.0.1</div>
+          </div>
+          <div className="field" style={{ margin: 0 }}>
+            <label className="field-label">
+              <span className="key">spoof /</span> 伪装 Provider
+            </label>
+            <input
+              className="input"
+              value={draft.spoofProvider}
+              onChange={(e) => setDraft({ ...draft, spoofProvider: e.target.value })}
+            />
+            <div className="field-hint">写到 /v1/models 的 owned_by 字段</div>
+          </div>
+        </div>
+
+        <div className="field">
+          <label className="field-label">
+            <span className="key">upstream /</span> DeepSeek Base URL
+          </label>
+          <input
+            className="input"
+            value={draft.deepseekBaseUrl}
+            onChange={(e) => setDraft({ ...draft, deepseekBaseUrl: e.target.value })}
+          />
+          <div className="field-hint">默认 https://api.deepseek.com</div>
+        </div>
+
+        <div className="field">
+          <label className="field-label">
+            <span className="key">api_key /</span> DeepSeek API Key
+          </label>
+          <div className="input-group">
+            <input
+              className="input"
+              type={showKey ? 'text' : 'password'}
+              value={draft.deepseekApiKey}
+              onChange={(e) => setDraft({ ...draft, deepseekApiKey: e.target.value })}
+              placeholder="sk-..."
+            />
+            <button className="btn" onClick={() => setShowKey(!showKey)}>
+              {showKey ? <EyeOff size={14} /> : <Eye size={14} />}
+            </button>
+          </div>
+          <div className="field-hint">API Key 只保存在本机 BHG-helper 配置文件中，页面读取时自动脱敏。</div>
+        </div>
+
+        <div className="divider" />
+
+        <div style={{ display: 'flex', gap: 'var(--sp-2)' }}>
+          <button className="btn btn-primary" onClick={handleSave} disabled={busy}>
+            <Save size={14} /> 保存配置
+          </button>
+          <button className="btn" onClick={handleOneClickActivate} disabled={busy}>
+            <Zap size={14} /> 一键：保存 + 启动
+          </button>
+        </div>
+      </Panel>
+
+      <div style={{ marginTop: 'var(--sp-5)' }}>
+        <Panel title="MODEL MAP · 模型名映射">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--sp-2)' }}>
+            {Object.entries(draft.modelMap).map(([from, to]) => (
+              <div
+                key={from}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '1fr auto 1fr auto',
+                  gap: 'var(--sp-3)',
+                  alignItems: 'center',
+                  padding: 'var(--sp-2) var(--sp-3)',
+                  background: 'var(--bg-1)',
+                  border: '1px solid var(--line-1)',
+                }}
+              >
+                <code className="cell-mono">{from}</code>
+                <span style={{ color: 'var(--ink-3)' }}>→</span>
+                <input
+                  className="input"
+                  value={to}
+                  onChange={(e) =>
+                    setDraft({
+                      ...draft,
+                      modelMap: { ...draft.modelMap, [from]: e.target.value },
+                    })
+                  }
+                />
+                <button
+                  className="btn btn-ghost"
+                  onClick={() => {
+                    const next = { ...draft.modelMap }
+                    delete next[from]
+                    setDraft({ ...draft, modelMap: next })
+                  }}
+                >
+                  ✕
+                </button>
+              </div>
+            ))}
+            <button
+              className="btn"
+              onClick={() => {
+                const id = `custom-${Date.now()}`
+                setDraft({ ...draft, modelMap: { ...draft.modelMap, [id]: 'deepseek-chat' } })
+              }}
+            >
+              + 新增映射
+            </button>
+          </div>
+        </Panel>
+      </div>
+
+      <div style={{ marginTop: 'var(--sp-5)' }}>
+        <Panel title="DEPLOY · 怎么让 Claude Code 走中转">
+          <ol style={{ paddingLeft: 20, color: 'var(--ink-1)', lineHeight: 1.8, fontSize: 13 }}>
+            <li>
+              <strong>启动中转</strong>：本页面点「启动」，确保状态变绿。
+            </li>
+            <li>
+              <strong>写 <code>~/.claude/settings.json</code></strong>：让 claude.exe 把请求发到本地中转：
+              <pre style={{
+                margin: '8px 0', padding: 12, background: 'var(--bg-1)',
+                border: '1px solid var(--line-1)', borderRadius: 4,
+                fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-1)'
+              }}>{`{
+  "env": {
+    "ANTHROPIC_BASE_URL": "http://127.0.0.1:${draft.port}",
+    "ANTHROPIC_AUTH_TOKEN": "any-dummy-value"
+  }
+}`}</pre>
+              <span style={{ color: 'var(--ink-3)' }}>其中 <code>ANTHROPIC_AUTH_TOKEN</code> 是任意字符串，中转不验证它。</span>
+            </li>
+            <li>
+              <strong>重启 claude.exe</strong>：让 SDK 重新读 <code>settings.json</code> 的环境变量。
+            </li>
+            <li>
+              <strong>验证</strong>：发起一次对话，看「事件日志」里是否出现
+              <code style={{ marginLeft: 4 }}>[INFO] relay POST /v1/messages from 127.0.0.1</code>。
+            </li>
+          </ol>
+          <div
+            style={{
+              marginTop: 'var(--sp-3)',
+              padding: 'var(--sp-3) var(--sp-4)',
+              background: 'var(--bg-1)',
+              border: '1px dashed var(--line-2)',
+              fontFamily: 'var(--font-mono)',
+              fontSize: 12,
+            }}
+          >
+            <div style={{ color: 'var(--ink-2)', marginBottom: 4 }}># 直接 curl 测一下本地中转</div>
+            <div>curl http://127.0.0.1:{draft.port}/v1/models</div>
+            <div style={{ color: 'var(--ink-2)', marginTop: 8 }}># 模拟一次 Anthropic 请求</div>
+            <div>
+              curl -X POST http://127.0.0.1:{draft.port}/v1/messages \<br />
+              &nbsp;&nbsp;-H "Content-Type: application/json" \<br />
+              &nbsp;&nbsp;-d '{`{`}"model":"deepseek-chat","max_tokens":32,"messages":[{`{`}"role":"user","content":"hi"{`}`}]{`}`}'
+            </div>
+          </div>
+        </Panel>
+      </div>
+
+      <div style={{ marginTop: 'var(--sp-4)', display: 'flex', gap: 'var(--sp-2)', alignItems: 'center' }}>
+        <span className="led-dot gray" />
+        <span style={{ fontSize: 11, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
+          配置文件: {draft.configPath ?? '~/.bhg-helper/relay.config.json'} · 端口 {draft.port} · 仅本机监听
+        </span>
+      </div>
+    </Page>
+    </>
+  )
+}
+
+function FirstRunBanner({ onDismiss }: { onDismiss: () => void }) {
+  return (
+    <div style={{
+      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
+      background: 'linear-gradient(90deg, #f59e0b, #f97316)',
+      color: '#000', padding: '12px 24px', display: 'flex', gap: 16, alignItems: 'center',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.2)'
+    }}>
+      <div style={{ fontWeight: 700, fontSize: 14 }}>⚡ 首次使用</div>
+      <div style={{ flex: 1, fontSize: 13 }}>
+        1) 申请 DeepSeek API Key（platform.deepseek.com）
+        &nbsp;→&nbsp; 2) 粘贴到下方「DeepSeek API Key」并「保存配置」
+        &nbsp;→&nbsp; 3) 点「启动」
+      </div>
+      <button
+        onClick={onDismiss}
+        style={{ background: 'rgba(0,0,0,0.15)', border: 'none', padding: '4px 12px', borderRadius: 4, cursor: 'pointer', color: '#000' }}
+      >知道了</button>
+    </div>
+  )
+}
+
+function ReadyBanner({ onCopy, copied }: { onCopy: () => void; copied: boolean }) {
+  return (
+    <div style={{
+      position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 50,
+      background: 'linear-gradient(90deg, #10b981, #14b8a6)',
+      color: '#000', padding: '12px 24px', display: 'flex', gap: 16, alignItems: 'center',
+      boxShadow: '0 -4px 12px rgba(0,0,0,0.2)'
+    }}>
+      <div style={{ fontWeight: 700, fontSize: 14 }}>✓ 中转已就绪</div>
+      <div style={{ flex: 1, fontSize: 13 }}>
+        打开<strong>新终端</strong>，跑下面的命令启动 Claude Code：
+      </div>
+      <code style={{ background: 'rgba(0,0,0,0.2)', padding: '4px 10px', borderRadius: 4, fontFamily: 'monospace' }}>claude</code>
+      <button
+        onClick={onCopy}
+        style={{ background: '#000', color: '#10b981', border: 'none', padding: '6px 14px', borderRadius: 4, cursor: 'pointer', fontWeight: 600 }}
+      >{copied ? '已复制' : '复制命令'}</button>
+    </div>
+  )
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+
+export default {
+  darkMode: "class",
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    container: {
+      center: true,
+    },
+    extend: {},
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": false,
+    "noUncheckedSideEffectImports": false,
+    "forceConsistentCasingInFileNames": false,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "types": [
+      "node",
+      "express"
+    ]
+  },
+  "include": [
+    "src",
+    "api"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'node:path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      // 把 /api/* 转到 Cockpit 后端 (3001)
+      '/api': {
+        target: 'http://127.0.0.1:3001',
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+    watch: {
+      // 不监听 node_modules 下的 tsconfig.json（避免被 transient 路径搞乱）
+      ignored: ['**/node_modules/**'],
+    },
+  },
+})