卡片内容
+
+
+
+ {/* 主要内容区 */}
+ 页面标题
+页面描述信息
+
+ {/* 页面内容 */}
+
+
+
+ ),
+ okText: '确认删除',
+ cancelText: '取消',
+ okType: 'danger',
+ centered: true,
+ icon: 您确定要删除以下项目吗？
+
+
+ {itemName}
+ {itemInfo && ( +{itemInfo}
+ )} ++ 此操作不可恢复，请谨慎操作！ +
+
+
+ ),
+ okText: '确认删除',
+ cancelText: '取消',
+ okType: 'danger',
+ centered: true,
+ icon: 您确定要删除选中的 {count} 个项目吗？
+
+ {items.map((item, index) => (
+
+
+ {item.name}
+ {item.info && (
+
+ ({item.info})
+
+ )}
+
+ ))}
+ + 此操作不可恢复，请谨慎操作！ +
+
+ {/* Logo 区域 */}
+
+
+ {/* 右侧：搜索 + 功能按钮 + 用户信息 */}
+
+ 
+
+
+ {/* 折叠按钮 */}
+
+ {collapsed ?
+
+ {/* 搜索框 */}
+ }
+ style={{ width: 200 }}
+ />
+
+ {/* 功能图标 */}
+
+ {/* 动态渲染 header 菜单 */}
+ {headerMenuData.map((item) => (
+
+
+
+ {/* 用户下拉菜单 */}
+
+
+
+
+ handleHeaderMenuClick(item.key)}
+ >
+ {iconMap[item.icon]}
+ {item.label}
+
+ ))}
+
+ {/* 消息中心 */}
+
+
+
+
+
+ {children}
+
+
+
+ )
+}
+
+export default PageHeader
diff --git a/src/components/PageTitleBar/PageTitleBar.css b/src/components/PageTitleBar/PageTitleBar.css
new file mode 100644
index 0000000..9913e32
--- /dev/null
+++ b/src/components/PageTitleBar/PageTitleBar.css
@@ -0,0 +1,165 @@
+.page-title-bar {
+ background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%);
+ border-radius: 12px;
+ padding: 16px 24px;
+ margin-bottom: 16px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+ position: relative;
+ overflow: hidden;
+ border: 1px solid rgba(139, 92, 246, 0.1);
+}
+
+.page-title-bar::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -5%;
+ width: 200px;
+ height: 200px;
+ background: rgba(139, 92, 246, 0.05);
+ border-radius: 50%;
+}
+
+.title-bar-content {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.title-bar-left {
+ flex: 1;
+}
+
+.title-row {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.title-group {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.page-title {
+ font-size: 20px;
+ font-weight: 600;
+ color: #1e293b;
+ margin: 0;
+ letter-spacing: 0.3px;
+}
+
+.title-badge {
+ background: rgba(139, 92, 246, 0.15);
+ color: #7c3aed;
+ padding: 2px 10px;
+ border-radius: 10px;
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.page-description {
+ font-size: 13px;
+ color: #64748b;
+ margin: 0;
+ white-space: nowrap;
+}
+
+.title-bar-right {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.title-actions {
+ display: flex;
+ gap: 10px;
+}
+
+.title-actions button {
+ padding: 8px 16px;
+ border-radius: 6px;
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s;
+ border: none;
+ outline: none;
+}
+
+.title-actions button.primary {
+ background: #7c3aed;
+ color: #ffffff;
+}
+
+.title-actions button.primary:hover {
+ background: #6d28d9;
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
+}
+
+.title-actions button.secondary {
+ background: rgba(139, 92, 246, 0.1);
+ color: #7c3aed;
+ border: 1px solid rgba(139, 92, 246, 0.2);
+}
+
+.title-actions button.secondary:hover {
+ background: rgba(139, 92, 246, 0.15);
+ transform: translateY(-1px);
+}
+
+.toggle-button {
+ width: 32px;
+ height: 32px;
+ border-radius: 6px;
+ background: rgba(139, 92, 246, 0.1);
+ border: 1px solid rgba(139, 92, 246, 0.2);
+ color: #7c3aed;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transition: all 0.3s;
+ font-size: 14px;
+}
+
+.toggle-button:hover {
+ background: rgba(139, 92, 246, 0.2);
+ transform: translateY(-1px);
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+ .title-bar-content {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ }
+
+ .title-row {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 4px;
+ }
+
+ .page-description {
+ white-space: normal;
+ }
+
+ .title-bar-right {
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .title-actions {
+ flex: 1;
+ }
+
+ .title-actions button {
+ flex: 1;
+ }
+}
diff --git a/src/components/PageTitleBar/PageTitleBar.jsx b/src/components/PageTitleBar/PageTitleBar.jsx
new file mode 100644
index 0000000..870b861
--- /dev/null
+++ b/src/components/PageTitleBar/PageTitleBar.jsx
@@ -0,0 +1,53 @@
+import { useState } from 'react'
+import { UpOutlined, DownOutlined } from '@ant-design/icons'
+import './PageTitleBar.css'
+
+function PageTitleBar({
+ title,
+ badge,
+ description,
+ actions,
+ showToggle = false,
+ onToggle,
+ defaultExpanded = true,
+}) {
+ const [expanded, setExpanded] = useState(defaultExpanded)
+
+ const handleToggle = () => {
+ const newExpanded = !expanded
+ setExpanded(newExpanded)
+ if (onToggle) {
+ onToggle(newExpanded)
+ }
+ }
+
+ return (
+
+ {showBack && (
+
+ )}
+
+ {extra &&
+ {icon &&
+ {icon}
}
+
+
+ {title}
+ {description && ( +{description}
+ )} +{extra}
}
+
+
+ )
+}
+
+export default PageTitleBar
diff --git a/src/components/Toast/Toast.jsx b/src/components/Toast/Toast.jsx
new file mode 100644
index 0000000..94862e3
--- /dev/null
+++ b/src/components/Toast/Toast.jsx
@@ -0,0 +1,114 @@
+import { notification } from 'antd'
+import {
+ CheckCircleOutlined,
+ CloseCircleOutlined,
+ ExclamationCircleOutlined,
+ InfoCircleOutlined,
+} from '@ant-design/icons'
+
+// 配置全局通知位置和样式
+notification.config({
+ placement: 'topRight',
+ top: 24,
+ duration: 3,
+ maxCount: 3,
+})
+
+/**
+ * 标准通知反馈组件
+ * 从右上角滑出，默认3秒后消失
+ */
+const Toast = {
+ /**
+ * 成功通知
+ * @param {string} message - 消息内容
+ * @param {string} description - 详细描述（可选）
+ * @param {number} duration - 显示时长（秒），默认3秒
+ */
+ success: (message, description = '', duration = 3) => {
+ notification.success({
+ message,
+ description,
+ duration,
+ icon:
+
+
+
+
+
+
+
+ {description && {title}
+ {badge && {badge}} +{description}
} +
+ {actions &&
+ {actions}
}
+ {showToggle && (
+
+ )}
+
+
+ )
+
+ return (
+
+ {tempSelectedGroup ? (
+
+
+ 已选择分组：
+ setTempSelectedGroup(null)}>
+ {(() => {
+ const findName = (nodes, id) => {
+ for (const node of nodes) {
+ if (node.id === id) return node.name
+ if (node.children) {
+ const found = findName(node.children, id)
+ if (found) return found
+ }
+ }
+ return ''
+ }
+ return findName(hostData.hostGroups, tempSelectedGroup)
+ })()}
+
+
+ ) : (
+
+ 请选择终端分组进行筛选
+
+ )}
+
+
+ 终端分组
+
+
+
+
+
+
+
+ {/* 页面标题栏 */}
+ setShowStatsPanel(expanded)}
+ />
+
+ {/* 数据统计面板 - 可折叠 */}
+ {showStatsPanel && (
+
+
+ {/* 数据表格 */}
+
+
+
+
+
+ handleStatusFilterClick('online')}
+ style={{ cursor: 'pointer' }}
+ >
+ h.status === 'online').length}
+ prefix={
+
+ handleStatusFilterClick('offline')}
+ style={{ cursor: 'pointer' }}
+ >
+ h.status === 'offline').length}
+ prefix={
+
+
+
+
+
+
+ )}
+
+ {/* 操作栏 */}
+
+
+
+ }
+ onClick={() => {
+ setEditMode('add')
+ setSelectedHost(null)
+ setShowDetailDrawer(false) // 关闭详情抽屉
+ setShowEditDrawer(true)
+ }}
+ >
+ 新增主机
+
+ }
+ disabled={selectedRowKeys.length === 0}
+ >
+ 批量开机
+
+ }
+ disabled={selectedRowKeys.length === 0}
+ >
+ 批量关机
+
+ } disabled={selectedRowKeys.length === 0} danger onClick={handleBatchDelete}>
+ 批量删除
+
+
+
+
+ handleSearch(e.target.value)}
+ value={searchKeyword}
+ />
+
+
+ }
+ trigger="click"
+ open={showFilterPopover}
+ onOpenChange={(visible) => {
+ setShowFilterPopover(visible)
+ if (visible) {
+ setTempSelectedGroup(selectedGroup)
+ }
+ }}
+ placement="bottomRight"
+ overlayClassName="filter-popover"
+ >
+ }
+ type={selectedGroup ? 'primary' : 'default'}
+ >
+ {selectedGroupName || '筛选'}
+
+
+
+ }>刷新
+
+ `共 ${total} 条`,
+ }}
+ scroll={{ x: 1600 }}
+ onRow={(record) => ({
+ onClick: () => handleRowClick(record),
+ className: selectedHost?.id === record.id ? 'row-selected' : '',
+ })}
+ />
+
+
+ {/* 详情抽屉 */}
+
+
+
+
+
+
+
+
+ 主机管理
+ 查看和管理接入主机
+
+
+
+
+
+
+ 用户管理
+ 管理系统用户信息
+
+
+
+
+
+
+ 系统日志
+ 查看系统操作日志
+
+
+
+
+
+
+ 告警中心
+ 查看系统告警信息
+
+
+ + 图表区域（可集成 ECharts、Recharts 等图表库展示终端接入趋势） +
+
+
+ )
+
+ return (
+
+ {tempSelectedGroup ? (
+
+
+ 已选择分组：
+ setTempSelectedGroup(null)}>
+ {(() => {
+ const findName = (nodes, id) => {
+ for (const node of nodes) {
+ if (node.id === id) return node.name
+ if (node.children) {
+ const found = findName(node.children, id)
+ if (found) return found
+ }
+ }
+ return ''
+ }
+ return findName(userData.userGroups, tempSelectedGroup)
+ })()}
+
+
+ ) : (
+
+ 请选择用户分组进行筛选
+
+ )}
+
+
+ 用户分组
+
+
+
+
+
+
+
+ {/* 页面标题栏 */}
+ setShowStatsPanel(expanded)}
+ />
+
+ {/* 数据统计面板 */}
+ {showStatsPanel && (
+
+
+ {/* 数据表格 */}
+
+
+
+
+
+ handleStatusFilterClick('enabled')}
+ style={{ cursor: 'pointer' }}
+ >
+ u.status === 'enabled').length}
+ prefix={
+
+ handleStatusFilterClick('disabled')}
+ style={{ cursor: 'pointer' }}
+ >
+ u.status === 'disabled').length}
+ prefix={
+
+
+
+
+
+
+ )}
+
+ {/* 操作栏 */}
+
+
+
+ }
+ onClick={() => {
+ setEditMode('add')
+ setSelectedUser(null)
+ setShowDetailDrawer(false) // 关闭详情抽屉
+ setShowEditDrawer(true)
+ }}
+ >
+ 新增用户
+
+ } disabled={selectedRowKeys.length === 0} danger onClick={handleBatchDelete}>
+ 批量删除
+
+
+
+
+ handleSearch(e.target.value)}
+ value={searchKeyword}
+ />
+
+
+ }
+ trigger="click"
+ open={showFilterPopover}
+ onOpenChange={(visible) => {
+ setShowFilterPopover(visible)
+ if (visible) {
+ setTempSelectedGroup(selectedGroup)
+ }
+ }}
+ placement="bottomRight"
+ overlayClassName="filter-popover"
+ >
+ } type={selectedGroup ? 'primary' : 'default'}>
+ {selectedGroupName || '筛选'}
+
+
+
+ }>刷新
+
+ `共 ${total} 条`,
+ }}
+ scroll={{ x: 1400 }}
+ onRow={(record) => ({
+ onClick: () => handleRowClick(record),
+ className: selectedUser?.id === record.id ? 'row-selected' : '',
+ })}
+ />
+
+
+ {/* 详情抽屉 */}
+