Refine webui layout and config defaults

2026-05-06 14:07:29 +08:00 · 2026-03-07 14:23:48 +08:00
parent fe0437b9cf
commit b5bb9a33e7
23 changed files with 1132 additions and 357 deletions
--- a/webui/src/components/Header.tsx
+++ b/webui/src/components/Header.tsx
@@ -5,7 +5,7 @@ import { useAppContext } from '../context/AppContext';

 const Header: React.FC = () => {
  const { t, i18n } = useTranslation();
-  const { isGatewayOnline, setSidebarOpen } = useAppContext();
+  const { isGatewayOnline, setSidebarOpen, sidebarCollapsed } = useAppContext();

  const toggleLang = () => {
    const nextLang = i18n.language === 'en' ? 'zh' : 'en';
@@ -18,10 +18,18 @@ const Header: React.FC = () => {
        <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="w-8 h-8 md:w-9 md:h-9 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20 shrink-0">
-          <Terminal className="w-4 h-4 md:w-5 md:h-5 text-white" />
+        <div className="hidden md:flex items-center gap-3 rounded-xl px-2 py-1.5 min-w-0">
+          <div className="w-9 h-9 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20 shrink-0">
+            <Terminal className="w-5 h-5 text-white" />
+          </div>
+          {!sidebarCollapsed && (
+            <span className="font-semibold text-lg md:text-xl tracking-tight truncate">{t('appName')}</span>
+          )}
        </div>
-        <span className="hidden md:inline font-semibold text-lg md:text-xl tracking-tight truncate">{t('appName')}</span>
+        <div className="md:hidden w-8 h-8 rounded-xl bg-indigo-500 flex items-center justify-center shadow-lg shadow-indigo-500/20 shrink-0">
+          <Terminal className="w-4 h-4 text-white" />
+        </div>
+        <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">
--- a/webui/src/components/Layout.tsx
+++ b/webui/src/components/Layout.tsx
@@ -25,7 +25,7 @@ const Layout: React.FC = () => {
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              transition={{ duration: 0.2 }}
-              className="absolute inset-0 overflow-y-auto"
+              className="absolute inset-0 overflow-y-auto overflow-x-hidden"
            >
              <Outlet />
            </motion.div>
--- a/webui/src/components/NavItem.tsx
+++ b/webui/src/components/NavItem.tsx
@@ -5,19 +5,21 @@ interface NavItemProps {
  icon: React.ReactNode;
  label: string;
  to: string;
+  collapsed?: boolean;
 }

-const NavItem: React.FC<NavItemProps> = ({ icon, label, to }) => (
+const NavItem: React.FC<NavItemProps> = ({ icon, label, to, collapsed = false }) => (
  <NavLink 
    to={to}
-    className={({ isActive }) => `w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
+    title={collapsed ? label : undefined}
+    className={({ isActive }) => `w-full flex items-center ${collapsed ? 'justify-center' : 'gap-3'} px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
      isActive
        ? 'bg-indigo-500/15 text-indigo-300 border border-indigo-500/30'
        : 'text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200 border border-transparent'
    }`}
  >
    {icon}
-    {label}
+    {!collapsed && label}
  </NavLink>
 );

--- a/webui/src/components/Sidebar.tsx
+++ b/webui/src/components/Sidebar.tsx
@@ -1,72 +1,92 @@
 import React from 'react';
-import { LayoutDashboard, MessageSquare, Settings, Clock, Terminal, Zap, FolderOpen, ClipboardList, BrainCircuit, Hash, Bot, Boxes } from 'lucide-react';
+import { LayoutDashboard, MessageSquare, Settings, Clock, Terminal, Zap, FolderOpen, ClipboardList, BrainCircuit, Hash, Bot, Boxes, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../context/AppContext';
 import NavItem from './NavItem';

 const Sidebar: React.FC = () => {
  const { t } = useTranslation();
-  const { token, setToken, sidebarOpen } = useAppContext();
+  const { token, setToken, sidebarOpen, sidebarCollapsed, setSidebarCollapsed } = useAppContext();

  const sections = [
    {
-      title: t('sidebarCore'),
+      title: t('sidebarMain'),
      items: [
        { icon: <LayoutDashboard className="w-5 h-5" />, label: t('dashboard'), to: '/' },
        { icon: <MessageSquare className="w-5 h-5" />, label: t('chat'), to: '/chat' },
        { icon: <Boxes className="w-5 h-5" />, label: t('subagentsRuntime'), to: '/subagents' },
-        { icon: <Terminal className="w-5 h-5" />, label: t('logs'), to: '/logs' },
-        { icon: <Hash className="w-5 h-5" />, label: t('logCodes'), to: '/log-codes' },
-        { icon: <Zap className="w-5 h-5" />, label: t('skills'), to: '/skills' },
      ],
    },
    {
-      title: t('sidebarSystem'),
-      items: [
-        { icon: <Settings className="w-5 h-5" />, label: t('config'), to: '/config' },
-        { icon: <Clock className="w-5 h-5" />, label: t('cronJobs'), to: '/cron' },
-        { icon: <FolderOpen className="w-5 h-5" />, label: t('memory'), to: '/memory' },
-        { icon: <Bot className="w-5 h-5" />, label: t('subagentProfiles'), to: '/subagent-profiles' },
-      ],
-    },
-    {
-      title: t('sidebarOps'),
+      title: t('sidebarRuntime'),
      items: [
        { icon: <ClipboardList className="w-5 h-5" />, label: t('taskAudit'), to: '/task-audit' },
+        { icon: <Terminal className="w-5 h-5" />, label: t('logs'), to: '/logs' },
+        { icon: <BrainCircuit className="w-5 h-5" />, label: t('ekg'), to: '/ekg' },
      ],
    },
    {
-      title: t('sidebarInsights'),
+      title: t('sidebarConfig'),
      items: [
-        { icon: <BrainCircuit className="w-5 h-5" />, label: t('ekg'), to: '/ekg' },
+        { icon: <Settings className="w-5 h-5" />, label: t('config'), to: '/config' },
+        { icon: <Bot className="w-5 h-5" />, label: t('subagentProfiles'), to: '/subagent-profiles' },
+        { icon: <Clock className="w-5 h-5" />, label: t('cronJobs'), to: '/cron' },
+      ],
+    },
+    {
+      title: t('sidebarKnowledge'),
+      items: [
+        { icon: <FolderOpen className="w-5 h-5" />, label: t('memory'), to: '/memory' },
+        { icon: <Zap className="w-5 h-5" />, label: t('skills'), to: '/skills' },
+        { icon: <Hash className="w-5 h-5" />, label: t('logCodes'), to: '/log-codes' },
      ],
    },
  ];

  return (
-    <aside className={`fixed md:static inset-y-16 left-0 z-40 w-64 border-r border-zinc-800 bg-zinc-900/95 md:bg-zinc-900/40 backdrop-blur-sm flex flex-col shrink-0 transform transition-transform duration-200 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}>
-      <nav className="flex-1 px-3 py-4 space-y-3 overflow-y-auto">
+    <aside className={`fixed md:static inset-y-14 md:inset-y-16 left-0 z-40 ${sidebarCollapsed ? 'md:w-20' : 'md:w-64'} w-[86vw] max-w-72 border-r border-zinc-800 bg-zinc-900/95 md:bg-zinc-900/40 backdrop-blur-sm flex flex-col shrink-0 transform transition-all duration-200 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}`}>
+      <nav className={`flex-1 ${sidebarCollapsed ? 'px-2' : 'px-3'} py-4 space-y-3 overflow-y-auto`}>
        {sections.map((sec) => (
-          <div key={sec.title} className="rounded-xl border border-zinc-800/60 bg-zinc-900/30 p-2">
-            <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest px-2 pb-2">{sec.title}</div>
+          <div key={sec.title} className={`rounded-xl border border-zinc-800/60 bg-zinc-900/30 ${sidebarCollapsed ? 'p-2' : 'p-2'}`}>
+            {!sidebarCollapsed && <div className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest px-2 pb-2">{sec.title}</div>}
            <div className="space-y-1">
              {sec.items.map((it) => (
-                <NavItem key={it.to} icon={it.icon} label={it.label} to={it.to} />
+                <NavItem key={it.to} icon={it.icon} label={it.label} to={it.to} collapsed={sidebarCollapsed} />
              ))}
            </div>
          </div>
        ))}
      </nav>

-      <div className="p-3 border-t border-zinc-800 bg-zinc-900/60">
-        <div className="text-[11px] font-medium text-zinc-500 mb-1 uppercase tracking-wider px-1">{t('gatewayToken')}</div>
-        <input
-          type="password"
-          value={token}
-          onChange={(e) => setToken(e.target.value)}
-          placeholder={t('enterToken')}
-          className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors placeholder:text-zinc-600"
-        />
+      {!sidebarCollapsed ? (
+        <div className="p-3 border-t border-zinc-800 bg-zinc-900/60">
+          <div className="text-[11px] font-medium text-zinc-500 mb-1 uppercase tracking-wider px-1">{t('gatewayToken')}</div>
+          <input
+            type="password"
+            value={token}
+            onChange={(e) => setToken(e.target.value)}
+            placeholder={t('enterToken')}
+            className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors placeholder:text-zinc-600"
+          />
+        </div>
+      ) : (
+        <div className="hidden md:flex justify-center p-3 border-t border-zinc-800 bg-zinc-900/60">
+          <div className="w-2 h-2 rounded-full bg-zinc-600" title={t('gatewayToken')} />
+        </div>
+      )}
+      <div className={`hidden md:flex border-t border-zinc-800 bg-zinc-900/60 ${sidebarCollapsed ? 'justify-center p-3' : 'p-3'}`}>
+        <button
+          onClick={() => setSidebarCollapsed((prev) => !prev)}
+          className={`flex items-center ${sidebarCollapsed ? 'justify-center' : 'justify-between'} gap-3 rounded-xl border border-zinc-800 bg-zinc-950/70 hover:bg-zinc-900 text-zinc-300 transition-colors ${sidebarCollapsed ? 'w-11 h-11' : 'w-full px-3 py-2.5'}`}
+          title={sidebarCollapsed ? t('expand') : t('collapse')}
+        >
+          {sidebarCollapsed ? <PanelLeftOpen className="w-4 h-4" /> : (
+            <>
+              <span className="text-sm font-medium">{t('collapse')}</span>
+              <PanelLeftClose className="w-4 h-4 shrink-0" />
+            </>
+          )}
+        </button>
      </div>
    </aside>
  );
--- a/webui/src/components/StatCard.tsx
+++ b/webui/src/components/StatCard.tsx
@@ -7,7 +7,7 @@ interface StatCardProps {
 }

 const StatCard: React.FC<StatCardProps> = ({ title, value, icon }) => (
-  <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-center gap-4">
+  <div className="h-full min-h-[124px] bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-center gap-4">
    <div className="w-12 h-12 rounded-xl bg-zinc-800/50 flex items-center justify-center border border-zinc-700/50">
      {icon}
    </div>