bhg-helper 1.0.0

package/src/components/Page.tsx

@@ -0,0 +1,130 @@
+import { useStore } from '../lib/store'
+import type { LogEntry } from '../lib/types'
+
+interface PageProps {
+  title: string
+  code: string
+  subtitle?: string
+  actions?: React.ReactNode
+  children: React.ReactNode
+}
+
+export default function Page({ title, code, subtitle, actions, children }: PageProps) {
+  const saving = useStore((s) => s.saving)
+  const lastSavedAt = useStore((s) => s.lastSavedAt)
+  const error = useStore((s) => s.errorMessage)
+  const clearError = useStore((s) => s.clearError)
+
+  return (
+    <div className="page">
+      <header className="page-header">
+        <div style={{ flex: 1 }}>
+          <h1 className="page-title">
+            <span className="page-title-prefix">[{code}]</span>
+            {title}
+          </h1>
+          {subtitle && <p className="page-subtitle">{subtitle}</p>}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-3)' }}>
+          <span className="led">
+            <span className={'led-dot ' + (saving ? 'amber' : 'green')} />
+            {saving ? 'SYNCING' : 'IDLE'}
+          </span>
+          {lastSavedAt && (
+            <span
+              style={{
+                fontFamily: 'var(--font-mono)',
+                fontSize: 10,
+                color: 'var(--ink-3)',
+                textTransform: 'uppercase',
+                letterSpacing: '0.1em',
+              }}
+            >
+              LAST SAVE · {new Date(lastSavedAt).toLocaleTimeString()}
+            </span>
+          )}
+          {actions && <div className="page-actions">{actions}</div>}
+        </div>
+      </header>
+
+      {error && (
+        <div
+          style={{
+            margin: 'var(--sp-4) var(--sp-7) 0',
+            padding: 'var(--sp-3) var(--sp-4)',
+            background: 'rgba(248, 81, 73, 0.08)',
+            border: '1px solid var(--accent-red-dim)',
+            color: 'var(--accent-red)',
+            fontFamily: 'var(--font-mono)',
+            fontSize: 12,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--sp-3)',
+          }}
+        >
+          <span style={{ fontWeight: 600 }}>ERR</span>
+          <span style={{ flex: 1 }}>{error}</span>
+          <button className="btn btn-ghost" onClick={clearError} style={{ color: 'var(--accent-red)' }}>
+            ✕
+          </button>
+        </div>
+      )}
+
+      <div className="page-body">{children}</div>
+    </div>
+  )
+}
+
+export function Panel({
+  title,
+  children,
+}: {
+  title: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className="panel">
+      <div className="panel-header">{title}</div>
+      <div className="panel-body">{children}</div>
+    </div>
+  )
+}
+
+export function StatusCard({
+  label,
+  value,
+  meta,
+  tone = 'amber',
+}: {
+  label: string
+  value: string | React.ReactNode
+  meta?: string
+  tone?: 'amber' | 'green' | 'red' | 'gray'
+}) {
+  return (
+    <div className={'status-card ' + tone}>
+      <div className="status-card-label">
+        <span className={'led-dot ' + tone} /> {label}
+      </div>
+      <div className="status-card-value">{value}</div>
+      {meta && <div className="status-card-meta">{meta}</div>}
+    </div>
+  )
+}
+
+export function CopyableText({ text, max = 36 }: { text: string; max?: number }) {
+  const display = text.length > max ? text.slice(0, max) + '…' : text
+  return (
+    <span
+      className="cell-mono copyable"
+      title={text}
+      onClick={() => {
+        if (navigator.clipboard) navigator.clipboard.writeText(text)
+      }}
+    >
+      {display}
+    </span>
+  )
+}
+
+export type { LogEntry }

package/src/components/Sidebar.tsx

@@ -0,0 +1,56 @@
+import { NavLink } from 'react-router-dom'
+import { LayoutDashboard, Terminal, Server } from 'lucide-react'
+import { useStore } from '../lib/store'
+
+const links = [
+  { to: '/', label: '主控台', icon: LayoutDashboard, code: '01' },
+  { to: '/relay', label: '中转服务', icon: Server, code: '02', highlight: true },
+  { to: '/console', label: '事件日志', icon: Terminal, code: '03' },
+]
+
+export default function Sidebar() {
+  const config = useStore((s) => s.config)
+
+  return (
+    <aside className="app-sidebar">
+      <div className="sidebar-brand">
+        <div className="sidebar-brand-row">
+          <div className="sidebar-logo">D</div>
+          <div>
+            <div className="sidebar-title">DeepSeek Bridge</div>
+            <div className="sidebar-subtitle">Claude Code → DeepSeek</div>
+          </div>
+        </div>
+        <div className="sidebar-meta">
+          <div className="sidebar-meta-row">
+            <span className="key">env</span>
+            <span className="val">127.0.0.1:8787</span>
+          </div>
+        </div>
+      </div>
+
+      <nav className="sidebar-nav">
+        <div className="sidebar-section">— Modules</div>
+        {links.map(({ to, label, icon: Icon, code }) => (
+          <NavLink
+            key={to}
+            to={to}
+            end={to === '/'}
+            className={({ isActive }) => 'sidebar-link' + (isActive ? ' active' : '')}
+          >
+            <Icon size={16} strokeWidth={1.5} />
+            <span>{label}</span>
+            <span className="badge">{code}</span>
+          </NavLink>
+        ))}
+      </nav>
+
+      <div className="sidebar-footer">
+        <span className="led">
+          <span className="led-dot green" /> ONLINE
+        </span>
+        <span style={{ marginLeft: 'auto' }}>v1.0</span>
+      </div>
+    </aside>
+  )
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+
+type Theme = 'light' | 'dark';
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const savedTheme = localStorage.getItem('theme') as Theme;
+    if (savedTheme) {
+      return savedTheme;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(theme);
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+  };
+
+  return {
+    theme,
+    toggleTheme,
+    isDark: theme === 'dark'
+  };
+}