feat(electron): add Electron UI components and layout integration

2026-03-03 00:54:24 +08:00
parent fc394f4412
commit 65774f3afc
8 changed files with 708 additions and 4 deletions
--- a/dashboard/src/components/electron/TitleBar.tsx
+++ b/dashboard/src/components/electron/TitleBar.tsx
@@ -0,0 +1,64 @@
+import { Copy, Minus, Square, X } from 'lucide-react'
+import { useMemo } from 'react'
+
+import { useWindowControls } from '@/hooks/useWindowControls'
+import { getPlatform, isElectron } from '@/lib/runtime'
+
+const dragStyle = { WebkitAppRegion: 'drag' } as React.CSSProperties & { WebkitAppRegion: string }
+const noDragStyle = { WebkitAppRegion: 'no-drag' } as React.CSSProperties & { WebkitAppRegion: string }
+
+export function TitleBar() {
+  const { close, isMaximized, minimize, toggleMaximize } = useWindowControls()
+  const isMac = useMemo(() => getPlatform() === 'darwin', [])
+
+  if (!isElectron()) return null
+
+  return (
+    <div
+      className={`flex items-center justify-between border-b border-border bg-background select-none ${isMac ? 'h-7' : 'h-8'}`}
+      style={dragStyle}
+    >
+      {/* macOS traffic light padding */}
+      {isMac && <div className="h-full w-[78px]" style={noDragStyle} />}
+
+      {/* Title / Drag area */}
+      <div className="flex flex-1 items-center justify-center text-xs font-semibold text-foreground/80">
+        MaiBot
+      </div>
+
+      {/* Windows / Linux Controls */}
+      {!isMac && (
+        <div className="flex h-full items-center" style={noDragStyle}>
+          <button
+            className="flex h-8 w-11 items-center justify-center hover:bg-accent hover:text-accent-foreground"
+            onClick={minimize}
+            tabIndex={-1}
+            type="button"
+          >
+            <Minus className="h-3.5 w-3.5" />
+          </button>
+          <button
+            className="flex h-8 w-11 items-center justify-center hover:bg-accent hover:text-accent-foreground"
+            onClick={toggleMaximize}
+            tabIndex={-1}
+            type="button"
+          >
+            {isMaximized ? (
+              <Copy className="h-3.5 w-3.5" />
+            ) : (
+              <Square className="h-3.5 w-3.5" />
+            )}
+          </button>
+          <button
+            className="flex h-8 w-11 items-center justify-center hover:bg-destructive hover:text-destructive-foreground"
+            onClick={close}
+            tabIndex={-1}
+            type="button"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}