jettask 0.2.1__py3-none-any.whl → 0.2.4__py3-none-any.whl

jettask/webui/frontend/src/components/layout/AppLayout.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { Layout } from 'antd';
+import { Outlet } from 'react-router-dom';
+import SideMenu from './SideMenu';
+import TabsNav from './TabsNav';
+import UserInfo from './UserInfo';
+import NamespaceSelector from '../NamespaceSelector';
+import { useNamespace } from '../../contexts/NamespaceContext';
+import './AppLayout.css';
+
+const { Header, Content } = Layout;
+
+const AppLayout = () => {
+  const { currentNamespace, setCurrentNamespace } = useNamespace();
+  
+  console.log('🔧 AppLayout渲染，currentNamespace:', currentNamespace);
+  console.log('🔧 AppLayout渲染，setCurrentNamespace:', typeof setCurrentNamespace);
+  
+  return (
+    <Layout className="app-layout">
+      {/* 左侧菜单 */}
+      <SideMenu />
+      
+      {/* 右侧主体 */}
+      <Layout className="main-layout" style={{ marginLeft: 64 }}>
+        {/* 顶部导航栏 */}
+        <Header className="app-header">
+          <div className="header-left">
+            <TabsNav />
+          </div>
+          <div className="header-right">
+            <NamespaceSelector 
+              value={currentNamespace}
+              onChange={setCurrentNamespace}
+            />
+            <UserInfo />
+          </div>
+        </Header>
+        
+        {/* 内容区域 */}
+        <Content className="app-content">
+          <Outlet />
+        </Content>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default AppLayout;

jettask/webui/frontend/src/components/layout/Header.css

@@ -1,11 +1,10 @@
 .app-header {
-  background: rgba(20, 20, 20, 0.8) !important;
-  backdrop-filter: blur(20px);
+  background: rgba(20, 20, 20, 0.95) !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   padding: 0;
-  position: sticky;
-  top: 0;
-  z-index: 1000;
+  position: relative;
+  height: 48px !important;
+  line-height: 48px !important;
 }
 
 .header-container {
@@ -15,7 +14,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 64px;
+  height: 48px;
 }
 
 .header-left {
@@ -26,15 +25,15 @@
 .app-logo {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   color: white;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 700;
   cursor: pointer;
 }
 
 .logo-icon {
-  font-size: 24px;
+  font-size: 18px;
   color: var(--primary-color);
 }
 
@@ -54,10 +53,13 @@
 .header-menu {
   background: transparent !important;
   border: none !important;
+  line-height: 48px !important;
 }
 
 .header-menu .ant-menu-item {
   color: rgba(255, 255, 255, 0.65) !important;
+  height: 48px !important;
+  line-height: 48px !important;
 }
 
 .header-menu .ant-menu-item:hover {
@@ -79,4 +81,26 @@
 
 .refresh-btn:hover {
   color: white !important;
-}
+}
+
+/* 命名空间选择器样式 */
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* 脉动动画 */
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* 响应式设计 */

jettask/webui/frontend/src/components/layout/Header.jsx

@@ -1,15 +1,19 @@
 import React from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
-import { Layout, Menu, Space, Button, Badge } from 'antd'
+import { Layout, Menu } from 'antd'
 import { 
   DashboardOutlined, 
   AppstoreOutlined, 
   TeamOutlined,
   RocketOutlined,
-  ReloadOutlined,
-  LoadingOutlined
+  LoadingOutlined,
+  ClockCircleOutlined,
+  AlertOutlined,
+  CloudServerOutlined
 } from '@ant-design/icons'
 import { useLoading } from '../../contexts/LoadingContext'
+import { useNamespace } from '../../contexts/NamespaceContext'
+import NamespaceSelector from '../NamespaceSelector'
 import './Header.css'
 
 const { Header: AntHeader } = Layout
@@ -18,6 +22,7 @@ const Header = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const { isLoading } = useLoading()
+  const { currentNamespace, setCurrentNamespace } = useNamespace()
 
   const menuItems = [
     {
@@ -30,10 +35,20 @@ const Header = () => {
       icon: <AppstoreOutlined />,
       label: '队列',
     },
+    // {
+    //   key: '/workers',
+    //   icon: <TeamOutlined />,
+    //   label: 'Workers',
+    // },
     {
-      key: '/workers',
-      icon: <TeamOutlined />,
-      label: 'Workers',
+      key: '/scheduled-tasks',
+      icon: <ClockCircleOutlined />,
+      label: '定时任务',
+    },
+    {
+      key: '/alerts',
+      icon: <AlertOutlined />,
+      label: '监控告警',
     },
   ]
 
@@ -41,10 +56,6 @@ const Header = () => {
     navigate(key)
   }
 
-  const handleRefresh = () => {
-    window.location.reload()
-  }
-
   return (
     <AntHeader className="app-header">
       <div className="header-container">
@@ -54,7 +65,7 @@ const Header = () => {
               <LoadingOutlined 
                 className="logo-icon"
                 style={{ 
-                  fontSize: 24,
+                  fontSize: 18,
                   color: '#1890ff'
                 }} 
                 spin 
@@ -77,19 +88,16 @@ const Header = () => {
         </div>
         
         <div className="header-right">
-          <Space>
-            <Badge dot status="success">
-              <Button 
-                type="text" 
-                icon={<ReloadOutlined />} 
-                onClick={handleRefresh}
-                className="refresh-btn"
-              >
-                刷新
-              </Button>
-            </Badge>
-          </Space>
+          <NamespaceSelector 
+            value={currentNamespace}
+            onChange={(namespace) => {
+              console.log('🔧 Header收到命名空间切换:', namespace);
+              setCurrentNamespace(namespace);
+            }}
+            style={{ marginLeft: 'auto' }}
+          />
         </div>
+        
       </div>
     </AntHeader>
   )

jettask/webui/frontend/src/components/layout/SideMenu.css

@@ -0,0 +1,137 @@
+/* 侧边栏样式 */
+.app-sider {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Logo区域 */
+.sider-header {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid #303030;
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo-icon {
+  color: #1890ff;
+  font-size: 20px;
+  font-weight: bold;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(24, 144, 255, 0.1);
+  border-radius: 4px;
+}
+
+/* 菜单样式 */
+.side-menu {
+  padding: 12px 0;
+}
+
+/* 紧凑菜单样式 */
+.side-menu.compact .ant-menu-item {
+  height: 56px;
+  line-height: 56px;
+  margin: 0 0 8px 0 !important;
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.65);
+  transition: all 0.2s;
+}
+
+.side-menu.compact .ant-menu-item:hover {
+  color: #fff !important;
+  background: rgba(24, 144, 255, 0.1) !important;
+}
+
+.side-menu.compact .ant-menu-item-selected {
+  background: transparent !important;
+  color: #1890ff !important;
+  position: relative;
+}
+
+.side-menu.compact .ant-menu-item-selected::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 24px;
+  background: #1890ff;
+  border-radius: 0 2px 2px 0;
+}
+
+.side-menu.compact .ant-menu-item-selected::after {
+  display: none;
+}
+
+/* 菜单项内容容器 */
+.menu-item-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* 图标包装器 */
+.menu-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  margin-bottom: 6px;
+}
+
+/* 菜单标签 */
+.menu-label {
+  font-size: 11px;
+  line-height: 1;
+  white-space: nowrap;
+  opacity: 0.85;
+  font-weight: 400;
+}
+
+/* 图标和文字垂直排列 */
+.side-menu.compact .ant-menu-item .ant-menu-item-icon {
+  margin: 0;
+  min-width: auto;
+}
+
+.side-menu.compact .ant-menu-title-content {
+  margin: 0;
+  padding: 0;
+}
+
+/* 分割线样式 */
+.ant-menu-item-divider {
+  margin: 12px 8px;
+  border-color: #303030;
+}
+
+/* 移除默认的内边距 */
+.side-menu.compact .ant-menu-inline {
+  border: none;
+}
+
+.side-menu.compact .ant-menu-sub {
+  background: transparent !important;
+}

jettask/webui/frontend/src/components/layout/SideMenu.jsx

@@ -0,0 +1,209 @@
+import React, { useState, useEffect } from 'react';
+import { Layout, Menu, Tooltip } from 'antd';
+import { useNavigate, useLocation } from 'react-router-dom';
+import {
+  DashboardOutlined,
+  AppstoreOutlined,
+  ClockCircleOutlined,
+  AlertOutlined,
+  SettingOutlined,
+  DatabaseOutlined,
+  BarChartOutlined,
+  TeamOutlined,
+  CloudServerOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  FundOutlined,
+  FileTextOutlined,
+  SafetyOutlined,
+  ApiOutlined
+} from '@ant-design/icons';
+import './SideMenu.css';
+
+const { Sider } = Layout;
+
+const SideMenu = ({ onMenuClick }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [collapsed, setCollapsed] = useState(false);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+
+  const menuItems = [
+    {
+      key: 'dashboard',
+      icon: <DashboardOutlined />,
+      label: '概览',
+      shortLabel: '概览',
+      path: '/dashboard',
+    },
+    {
+      key: 'queues',
+      icon: <AppstoreOutlined />,
+      label: '任务队列',
+      shortLabel: '队列',
+      path: '/queues',
+    },
+    {
+      key: 'scheduled-tasks',
+      icon: <ClockCircleOutlined />,
+      label: '定时任务',
+      shortLabel: '定时',
+      path: '/scheduled-tasks',
+    },
+    {
+      key: 'alerts',
+      icon: <AlertOutlined />,
+      label: '监控告警',
+      shortLabel: '告警',
+      path: '/alerts',
+    },
+    {
+      key: 'analytics',
+      icon: <BarChartOutlined />,
+      label: '数据分析',
+      shortLabel: '分析',
+      path: '/analytics',
+    },
+    // {
+    //   key: 'performance',
+    //   icon: <FundOutlined />,
+    //   label: '性能监控',
+    //   shortLabel: '性能',
+    //   path: '/performance',
+    // },
+    // {
+    //   key: 'logs',
+    //   icon: <FileTextOutlined />,
+    //   label: '日志查询',
+    //   shortLabel: '日志',
+    //   path: '/logs',
+    // },
+    {
+      key: 'divider2',
+      type: 'divider',
+    },
+    {
+      key: 'api-docs',
+      icon: <ApiOutlined />,
+      label: 'API文档',
+      shortLabel: 'API',
+      path: '/api-docs',
+    },
+    {
+      key: 'settings',
+      icon: <SettingOutlined />,
+      label: '系统设置',
+      shortLabel: '设置',
+      path: '/settings',
+    },
+  ];
+
+  useEffect(() => {
+    const currentItem = menuItems.find(item => item.path === location.pathname);
+    if (currentItem) {
+      setSelectedKeys([currentItem.key]);
+    }
+  }, [location.pathname]);
+
+  const handleMenuClick = ({ key }) => {
+    // 查找菜单项（包括子菜单项）
+    let targetItem = null;
+    for (const item of menuItems) {
+      if (item.key === key) {
+        targetItem = item;
+        break;
+      }
+      if (item.children) {
+        const childItem = item.children.find(child => child.key === key);
+        if (childItem) {
+          targetItem = childItem;
+          break;
+        }
+      }
+    }
+    
+    if (targetItem && targetItem.path) {
+      navigate(targetItem.path);
+      if (onMenuClick) {
+        onMenuClick(targetItem);
+      }
+    }
+  };
+
+  return (
+    <Sider
+      trigger={null}
+      collapsible
+      collapsed={false}
+      className="app-sider"
+      width={64}
+      style={{
+        background: '#1a1d21',
+        borderRight: '1px solid #303030',
+      }}
+    >
+      <div className="sider-header">
+        <div className="logo-container">
+          <span className="logo-icon">A</span>
+        </div>
+      </div>
+      
+      <Menu
+        mode="inline"
+        selectedKeys={selectedKeys}
+        onClick={handleMenuClick}
+        className="side-menu compact"
+        style={{
+          background: 'transparent',
+          borderRight: 0,
+        }}
+        items={menuItems.map(item => {
+          if (item.type === 'divider') {
+            return {
+              type: 'divider',
+              style: { margin: '8px 0', borderColor: '#303030' }
+            };
+          }
+          
+          // 如果有子菜单项
+          if (item.children) {
+            return {
+              key: item.key,
+              label: (
+                <Tooltip placement="right" title={item.label}>
+                  <div className="menu-item-content">
+                    <div className="menu-icon-wrapper">
+                      {item.icon}
+                    </div>
+                    <span className="menu-label">{item.shortLabel}</span>
+                  </div>
+                </Tooltip>
+              ),
+              children: item.children.map(child => ({
+                key: child.key,
+                label: child.label,
+                icon: child.icon,
+              }))
+            };
+          }
+          
+          return {
+            key: item.key,
+            label: (
+              <Tooltip placement="right" title={item.label}>
+                <div className="menu-item-content">
+                  <div className="menu-icon-wrapper">
+                    {item.icon}
+                  </div>
+                  <span className="menu-label">{item.shortLabel}</span>
+                </div>
+              </Tooltip>
+            ),
+          };
+        })}
+      />
+    </Sider>
+  );
+};
+
+export default SideMenu;