jettask 0.2.7__py3-none-any.whl → 0.2.8__py3-none-any.whl

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;

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

@@ -0,0 +1,244 @@
+/* 标签导航容器 */
+.tabs-nav-container {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  padding-right: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+/* 标签样式 - 扁平化设计 */
+.tabs-nav {
+  height: 100%;
+  width: 100%;
+}
+
+.tabs-nav .ant-tabs-nav {
+  height: 100%;
+  margin: 0;
+  background: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+}
+
+.tabs-nav .ant-tabs-nav::before {
+  border: none;
+}
+
+.tabs-nav .ant-tabs-nav-wrap {
+  display: flex;
+  align-items: center;
+  height: auto;
+}
+
+.tabs-nav .ant-tabs-nav-list {
+  height: 48px;
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  padding-top: 8px;
+}
+
+.tabs-nav .ant-tabs-tab {
+  background: transparent;
+  border: none;
+  border-radius: 4px 4px 0 0;
+  margin: 0;
+  padding: 0 12px;
+  height: 40px;
+  line-height: 40px;
+  min-width: 90px;
+  color: rgba(255, 255, 255, 0.65);
+  transition: all 0.2s;
+}
+
+/* 第一个标签特殊处理 - 左侧无圆角 */
+.tabs-nav .ant-tabs-tab:first-child {
+  border-top-left-radius: 0;
+  padding-left: 16px;
+}
+
+.tabs-nav .ant-tabs-tab:hover {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.tabs-nav .ant-tabs-tab-active {
+  background: #f0f2f5;
+  color: #262626;
+  position: relative;
+  border-left: 1px solid #d9d9d9;
+  border-top: 1px solid #d9d9d9;
+  border-right: 1px solid #d9d9d9;
+  border-bottom: 1px solid #f0f2f5;
+  font-weight: 500;
+  z-index: 20;
+  height: 41px;
+  padding: 0 12px;
+  margin-bottom: -1px;
+}
+
+/* 第一个激活标签左侧无边框 */
+.tabs-nav .ant-tabs-tab-active:first-child {
+  padding-left: 16px;
+  border-left: none;
+}
+
+.tabs-nav .ant-tabs-tab-active:hover {
+  background: #f0f2f5;
+  color: #262626;
+}
+
+.tabs-nav .ant-tabs-tab-btn {
+  color: inherit;
+}
+
+/* 标签内容样式 */
+.tab-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  user-select: none;
+  font-size: 13px;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+/* 概览标签特殊样式 - 居中显示 */
+.tab-label-center {
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+}
+
+.tab-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+/* 关闭按钮样式 */
+.tabs-nav .ant-tabs-tab-remove {
+  margin-left: 8px;
+  margin-right: -6px;
+  color: rgba(255, 255, 255, 0.45);
+  font-size: 10px;
+  transition: all 0.2s;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  opacity: 0;
+  visibility: hidden;
+}
+
+/* 鼠标悬停在标签上时显示关闭按钮 */
+.tabs-nav .ant-tabs-tab:hover .ant-tabs-tab-remove {
+  opacity: 1;
+  visibility: visible;
+}
+
+.tabs-nav .ant-tabs-tab-remove:hover {
+  color: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+}
+
+/* 激活标签的关闭按钮 - 始终显示 */
+.tabs-nav .ant-tabs-tab-active .ant-tabs-tab-remove {
+  color: rgba(0, 0, 0, 0.45);
+  opacity: 1;
+  visibility: visible;
+}
+
+.tabs-nav .ant-tabs-tab-active .ant-tabs-tab-remove:hover {
+  color: rgba(0, 0, 0, 0.65);
+  background: rgba(0, 0, 0, 0.06);
+}
+
+/* 禁用Ant Design的卡片样式 */
+.tabs-nav.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
+.tabs-nav.ant-tabs-editable-card > .ant-tabs-nav .ant-tabs-tab {
+  background: transparent;
+  border: none;
+}
+
+.tabs-nav.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
+.tabs-nav.ant-tabs-editable-card > .ant-tabs-nav .ant-tabs-tab-active {
+  background: #f0f2f5;
+  border-left: 1px solid #d9d9d9;
+  border-top: 1px solid #d9d9d9;
+  border-right: 1px solid #d9d9d9;
+  border-bottom: 1px solid #f0f2f5;
+  margin-bottom: -1px;
+}
+
+/* 导航操作按钮 */
+.tabs-nav .ant-tabs-nav-operations {
+  display: none;
+}
+
+/* 标签ink bar隐藏 */
+.tabs-nav .ant-tabs-ink-bar {
+  display: none;
+}
+
+/* 滚动条样式 */
+.tabs-nav .ant-tabs-nav-wrap {
+  overflow: hidden;
+}
+
+.tabs-nav .ant-tabs-nav-list {
+  transition: transform 0.3s;
+}
+
+/* 上下文菜单样式 */
+.ant-dropdown-menu {
+  min-width: 120px;
+}
+
+.ant-dropdown-menu-item {
+  padding: 8px 12px;
+}
+
+.ant-dropdown-menu-item .anticon {
+  margin-right: 8px;
+}
+
+/* 移除多余的边距和填充 */
+.tabs-nav.ant-tabs {
+  line-height: 1;
+}
+
+.tabs-nav .ant-tabs-content-holder {
+  display: none;
+}
+
+/* 标签分隔线 - 仅非激活标签显示 */
+.tabs-nav .ant-tabs-tab {
+  position: relative;
+}
+
+.tabs-nav .ant-tabs-tab:not(.ant-tabs-tab-active)::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 14px;
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.tabs-nav .ant-tabs-tab:last-child::after,
+.tabs-nav .ant-tabs-tab-active::after,
+.tabs-nav .ant-tabs-tab-active + .ant-tabs-tab::after {
+  display: none;
+}