DBT/clawgo
1
0
Fork 0
mirror of https://github.com/YspCoder/clawgo.git synced 2026-05-03 08:37:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

refine whatsapp bridge defaults and webui polish

Browse Source
This commit is contained in:
lpf
2026-03-10 12:07:56 +08:00
parent 8a6a2755de
commit c7b159d2ed
29 changed files with 1389 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
webui/src/components/Header.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { Terminal, Globe, Github, Menu, Moon, RefreshCw, SunMedium } from 'lucide-react';
import { Github, Moon, RefreshCw, SunMedium, Terminal } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useAppContext } from '../context/AppContext';
import { useUI } from '../context/UIContext';
@@ -12,7 +12,7 @@ function normalizeVersion(value: string) {
const Header: React.FC = () => {
const { t, i18n } = useTranslation();
const { isGatewayOnline, setSidebarOpen, sidebarCollapsed, gatewayVersion, webuiVersion } = useAppContext();
const { isGatewayOnline, sidebarCollapsed, gatewayVersion, webuiVersion } = useAppContext();
const { theme, toggleTheme, notify } = useUI();
const [checkingVersion, setCheckingVersion] = React.useState(false);
@@ -56,28 +56,23 @@ const Header: React.FC = () => {
};
return (
<header className="app-header h-14 md:h-16 border-b border-zinc-800 flex items-center justify-between px-3 md:px-6 shrink-0 z-10">
<header className="app-header ui-border-subtle h-14 md:h-16 border-b flex items-center justify-between px-3 md:px-6 shrink-0 z-10">
<div className="flex items-center gap-2 md:gap-3 min-w-0">
<button className="md:hidden p-2 rounded-lg hover:bg-zinc-800 text-zinc-300" onClick={() => setSidebarOpen(true)}>
<Menu className="w-5 h-5" />
</button>
<div className="hidden md:flex items-center gap-3 rounded-xl px-2 py-1.5 min-w-0">
<div className="brand-badge w-9 h-9 rounded-xl flex items-center justify-center shadow-lg shrink-0">
<Terminal className="w-5 h-5 text-zinc-950" />
</div>
{!sidebarCollapsed && (
<span className="font-semibold text-lg md:text-xl tracking-tight truncate">{t('appName')}</span>
)}
<div className="brand-badge hidden md:flex h-9 w-9 items-center justify-center rounded-xl shadow-lg shrink-0">
<Terminal className="h-5 w-5 text-white" />
</div>
<div className="brand-badge md:hidden w-8 h-8 rounded-xl flex items-center justify-center shadow-lg shrink-0">
<Terminal className="w-4 h-4 text-zinc-950" />
<div className="brand-badge flex h-8 w-8 items-center justify-center rounded-xl shadow-lg shrink-0 md:hidden">
<Terminal className="h-4 w-4 text-white" />
</div>
{!sidebarCollapsed && (
<span className="hidden md:inline font-semibold text-lg md:text-xl tracking-tight truncate">{t('appName')}</span>
)}
<span className="md:hidden font-semibold text-lg tracking-tight truncate">{t('appName')}</span>
</div>
<div className="flex items-center gap-2 md:gap-6">
<div className="flex items-center gap-1.5 md:gap-2.5 bg-zinc-900 border border-zinc-800 px-2 md:px-3 py-1 rounded-lg max-w-[140px] md:max-w-none overflow-hidden">
<span className="hidden md:inline text-sm font-medium text-zinc-400">{t('gatewayStatus')}:</span>
<div className="ui-toolbar-chip flex items-center gap-1.5 md:gap-2.5 px-2 md:px-3 py-1 rounded-lg max-w-[140px] md:max-w-none overflow-hidden">
<span className="ui-text-muted hidden md:inline text-sm font-medium">{t('gatewayStatus')}:</span>
{isGatewayOnline ? (
<div className="status-pill-online flex items-center gap-1.5 px-2.5 py-0.5 rounded-md text-xs font-semibold border">
<div className="status-dot-online w-1.5 h-1.5 rounded-full" />
@@ -91,13 +86,13 @@ const Header: React.FC = () => {
)}
</div>
<div className="hidden md:block h-5 w-px bg-zinc-800" />
<div className="ui-border-subtle hidden md:block h-5 w-px bg-transparent border-l" />
<a
href={REPO_URL}
target="_blank"
rel="noreferrer"
className="inline-flex h-9 w-9 items-center justify-center text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-lg"
className="ui-button ui-button-neutral ui-button-icon text-sm font-medium"
title={t('githubRepo')}
>
<Github className="w-4 h-4" />
@@ -106,7 +101,7 @@ const Header: React.FC = () => {
<button
onClick={checkVersion}
disabled={checkingVersion}
className="inline-flex h-9 w-9 items-center justify-center text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-lg disabled:opacity-60"
className="ui-button ui-button-neutral ui-button-icon text-sm font-medium disabled:opacity-60"
title={t('checkVersion')}
>
<RefreshCw className={`w-4 h-4 ${checkingVersion ? 'animate-spin' : ''}`} />
@@ -114,18 +109,19 @@ const Header: React.FC = () => {
<button
onClick={toggleTheme}
className="inline-flex h-9 w-9 items-center justify-center text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-lg"
className="ui-button ui-button-neutral ui-button-icon text-sm font-medium"
title={theme === 'dark' ? t('themeLight') : t('themeDark')}
>
{theme === 'dark' ? <SunMedium className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
</button>
<button
<button
onClick={toggleLang}
className="flex items-center gap-2 text-sm font-medium text-zinc-400 hover:text-zinc-200 transition-colors bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 px-3 py-1.5 rounded-lg"
className="ui-button ui-button-neutral ui-button-square text-sm font-semibold"
title={i18n.language === 'en' ? t('languageZh') : t('languageEn')}
aria-label={i18n.language === 'en' ? t('languageZh') : t('languageEn')}
>
<Globe className="w-4 h-4" />
{i18n.language === 'en' ? t('languageZh') : t('languageEn')}
{i18n.language === 'en' ? '中' : 'EN'}
</button>
</div>
</header>