Spaces:
Running
Running
| import { Check, Moon, Settings, Sun, Trash2 } from "lucide-react"; | |
| import { useEffect, useRef } from "react"; | |
| import { formatBytes } from "../lib/format"; | |
| interface SettingsMenuProps { | |
| open: boolean; | |
| dark: boolean; | |
| addSpecialTokens: boolean; | |
| cacheCleared: boolean; | |
| cacheSizeBytes: number | null; | |
| onOpenChange: (open: boolean) => void; | |
| onDarkChange: (dark: boolean) => void; | |
| onAddSpecialTokensChange: (value: boolean) => void; | |
| onClearCache: () => void; | |
| } | |
| export function SettingsMenu({ | |
| open, | |
| dark, | |
| addSpecialTokens, | |
| cacheCleared, | |
| cacheSizeBytes, | |
| onOpenChange, | |
| onDarkChange, | |
| onAddSpecialTokensChange, | |
| onClearCache, | |
| }: SettingsMenuProps) { | |
| const containerRef = useRef<HTMLDivElement>(null); | |
| useEffect(() => { | |
| if (!open) return; | |
| const closeOnOutsideClick = (event: PointerEvent) => { | |
| if (!containerRef.current?.contains(event.target as Node)) onOpenChange(false); | |
| }; | |
| const closeOnEscape = (event: KeyboardEvent) => { | |
| if (event.key === "Escape") onOpenChange(false); | |
| }; | |
| document.addEventListener("pointerdown", closeOnOutsideClick); | |
| document.addEventListener("keydown", closeOnEscape); | |
| return () => { | |
| document.removeEventListener("pointerdown", closeOnOutsideClick); | |
| document.removeEventListener("keydown", closeOnEscape); | |
| }; | |
| }, [open, onOpenChange]); | |
| return ( | |
| <div className="relative" ref={containerRef}> | |
| <button | |
| className="toolbar-control" | |
| type="button" | |
| aria-expanded={open} | |
| onClick={() => onOpenChange(!open)} | |
| > | |
| <Settings size={16} /> | |
| <span className="hidden sm:inline">设置</span> | |
| </button> | |
| {open ? ( | |
| <div className="popover-panel absolute right-0 top-[calc(100%+10px)] z-30 w-72 p-4"> | |
| <p className="text-xs font-semibold text-[var(--ink)]">显示与编码</p> | |
| <label className="settings-row mt-3"> | |
| <span> | |
| <strong>边界 Special Tokens</strong> | |
| <small>按模型配置添加 BOS 和 EOS</small> | |
| </span> | |
| <input | |
| className="peer sr-only" | |
| type="checkbox" | |
| checked={addSpecialTokens} | |
| onChange={(event) => onAddSpecialTokensChange(event.target.checked)} | |
| /> | |
| <span className="toggle" /> | |
| </label> | |
| <button className="settings-row mt-1 w-full" type="button" onClick={() => onDarkChange(!dark)}> | |
| <span> | |
| <strong>外观</strong> | |
| <small>{dark ? "当前为深色模式" : "当前为浅色模式"}</small> | |
| </span> | |
| {dark ? <Moon size={17} /> : <Sun size={17} />} | |
| </button> | |
| <button className="settings-row mt-1 w-full" type="button" onClick={onClearCache}> | |
| <span> | |
| <strong>浏览器缓存</strong> | |
| <small> | |
| {cacheSizeBytes === null | |
| ? "正在计算…" | |
| : `当前占用 ${formatBytes(cacheSizeBytes)}`} | |
| </small> | |
| </span> | |
| {cacheCleared ? <Check className="text-[var(--success)]" size={17} /> : <Trash2 size={17} />} | |
| </button> | |
| </div> | |
| ) : null} | |
| </div> | |
| ); | |
| } | |