完成一个可交互的k8s管理平台的页面开发

❀͜͡傀儡师2025-06-05 14:49

使用deepseek完成设计一个k8s管理平台，关键词如下：

bash 复制代码 
完成一个可交互的k8s管理平台的页面开发

Kubernetes 管理平台页面设计

下面是一个基于现代Web技术的可交互Kubernetes管理平台的页面设计方案，使用React作为前端框架，配合Ant Design组件库实现。

1、主要功能模块

2、集群概览仪表盘

3、工作负载管理

4、服务与入口管理

5、存储管理

6、配置管理

7、节点管理

8、命名空间管理

9、日志与监控

bash 复制代码 
import React, { useState, useEffect } from 'react';
import { 
  Layout, Menu, Card, Table, Tag, Space, Button, 
  Statistic, Row, Col, Breadcrumb, Dropdown, 
  Badge, Avatar, Input, Select, Modal, message 
} from 'antd';
import {
  DashboardOutlined, AppstoreOutlined, 
  CloudServerOutlined, DatabaseOutlined,
  SettingOutlined, ClusterOutlined,
  FolderOutlined, BarChartOutlined,
  MenuUnfoldOutlined, MenuFoldOutlined,
  LogoutOutlined, UserOutlined,
  PlusOutlined, SyncOutlined
} from '@ant-design/icons';
import './App.css';

const { Header, Sider, Content, Footer } = Layout;
const { SubMenu } = Menu;
const { Option } = Select;
const { Search } = Input;

const K8SManagementPlatform = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [selectedMenu, setSelectedMenu] = useState('dashboard');
  const [loading, setLoading] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [pods, setPods] = useState([]);
  const [nodes, setNodes] = useState([]);
  const [namespaces, setNamespaces] = useState(['default', 'kube-system', 'production']);
  const [currentNamespace, setCurrentNamespace] = useState('default');

  // 模拟API获取数据
  useEffect(() => {
    fetchData();
  }, [currentNamespace]);

  const fetchData = () => {
    setLoading(true);
    // 模拟API调用
    setTimeout(() => {
      setPods([
        {
          name: 'nginx-deployment-75675f5897-7ci7o',
          status: 'Running',
          namespace: currentNamespace,
          node: 'node-1',
          ip: '10.244.0.6',
          age: '2d',
          restarts: 0,
          cpu: '10m',
          memory: '50Mi'
        },
        {
          name: 'redis-master-0',
          status: 'Running',
          namespace: currentNamespace,
          node: 'node-2',
          ip: '10.244.0.7',
          age: '1d',
          restarts: 2,
          cpu: '5m',
          memory: '30Mi'
        }
      ]);
      
      setNodes([
        {
          name: 'node-1',
          status: 'Ready',
          roles: 'worker',
          version: 'v1.20.2',
          cpu: '4/8',
          memory: '6/16Gi',
          pods: '10/110',
          age: '30d'
        },
        {
          name: 'node-2',
          status: 'Ready',
          roles: 'worker',
          version: 'v1.20.2',
          cpu: '3/8',
          memory: '4/16Gi',
          pods: '8/110',
          age: '30d'
        }
      ]);
      setLoading(false);
    }, 800);
  };

  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };

  const handleMenuClick = (e) => {
    setSelectedMenu(e.key);
  };

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
    message.success('资源创建请求已提交');
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const handleNamespaceChange = (value) => {
    setCurrentNamespace(value);
  };

  const refreshData = () => {
    fetchData();
    message.info('数据已刷新');
  };

  // 表格列定义
  const podColumns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: status => (
        <Tag color={status === 'Running' ? 'green' : 'red'}>{status}</Tag>
      ),
    },
    {
      title: '命名空间',
      dataIndex: 'namespace',
      key: 'namespace',
    },
    {
      title: '节点',
      dataIndex: 'node',
      key: 'node',
    },
    {
      title: 'IP',
      dataIndex: 'ip',
      key: 'ip',
    },
    {
      title: '运行时间',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>日志</a>
          <a>终端</a>
          <a>删除</a>
        </Space>
      ),
    },
  ];

  const nodeColumns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: status => (
        <Tag color={status === 'Ready' ? 'green' : 'red'}>{status}</Tag>
      ),
    },
    {
      title: '角色',
      dataIndex: 'roles',
      key: 'roles',
    },
    {
      title: '版本',
      dataIndex: 'version',
      key: 'version',
    },
    {
      title: 'CPU使用',
      dataIndex: 'cpu',
      key: 'cpu',
    },
    {
      title: '内存使用',
      dataIndex: 'memory',
      key: 'memory',
    },
    {
      title: 'Pods',
      dataIndex: 'pods',
      key: 'pods',
    },
  ];

  // 根据选择的菜单渲染不同内容
  const renderContent = () => {
    switch (selectedMenu) {
      case 'dashboard':
        return (
          <div className="dashboard-content">
            <Row gutter={16}>
              <Col span={6}>
                <Card>
                  <Statistic 
                    title="运行中的Pod" 
                    value={pods.filter(p => p.status === 'Running').length} 
                    prefix={<AppstoreOutlined />}
                  />
                </Card>
              </Col>
              <Col span={6}>
                <Card>
                  <Statistic 
                    title="节点数量" 
                    value={nodes.length} 
                    prefix={<ClusterOutlined />}
                  />
                </Card>
              </Col>
              <Col span={6}>
                <Card>
                  <Statistic 
                    title="命名空间" 
                    value={namespaces.length} 
                    prefix={<FolderOutlined />}
                  />
                </Card>
              </Col>
              <Col span={6}>
                <Card>
                  <Statistic 
                    title="集群健康状态" 
                    value="正常" 
                    prefix={<CloudServerOutlined />}
                  />
                </Card>
              </Col>
            </Row>
            
            <Row gutter={16} style={{ marginTop: 16 }}>
              <Col span={12}>
                <Card title="Pod状态分布" style={{ height: 300 }}>
                  {/* 这里可以放置图表 */}
                  <div style={{ textAlign: 'center', padding: 40 }}>
                    <BarChartOutlined style={{ fontSize: 48, color: '#1890ff' }} />
                    <p>Pod状态分布图表</p>
                  </div>
                </Card>
              </Col>
              <Col span={12}>
                <Card title="资源使用情况" style={{ height: 300 }}>
                  {/* 这里可以放置图表 */}
                  <div style={{ textAlign: 'center', padding: 40 }}>
                    <BarChartOutlined style={{ fontSize: 48, color: '#1890ff' }} />
                    <p>资源使用情况图表</p>
                  </div>
                </Card>
              </Col>
            </Row>
          </div>
        );
      case 'pods':
        return (
          <Card 
            title="Pod管理" 
            extra={
              <Space>
                <Select 
                  defaultValue={currentNamespace} 
                  style={{ width: 180 }} 
                  onChange={handleNamespaceChange}
                >
                  {namespaces.map(ns => (
                    <Option key={ns} value={ns}>{ns}</Option>
                  ))}
                </Select>
                <Button icon={<SyncOutlined />} onClick={refreshData}>刷新</Button>
                <Button type="primary" icon={<PlusOutlined />} onClick={showModal}>
                  创建Pod
                </Button>
              </Space>
            }
          >
            <Table 
              columns={podColumns} 
              dataSource={pods} 
              loading={loading} 
              rowKey="name" 
            />
          </Card>
        );
      case 'nodes':
        return (
          <Card 
            title="节点管理" 
            extra={
              <Space>
                <Button icon={<SyncOutlined />} onClick={refreshData}>刷新</Button>
              </Space>
            }
          >
            <Table 
              columns={nodeColumns} 
              dataSource={nodes} 
              loading={loading} 
              rowKey="name" 
            />
          </Card>
        );
      case 'deployments':
        return <div>部署管理内容</div>;
      case 'services':
        return <div>服务管理内容</div>;
      case 'storage':
        return <div>存储管理内容</div>;
      case 'config':
        return <div>配置管理内容</div>;
      default:
        return <div>仪表盘内容</div>;
    }
  };

  const userMenu = (
    <Menu>
      <Menu.Item key="profile" icon={<UserOutlined />}>
        个人资料
      </Menu.Item>
      <Menu.Item key="settings" icon={<SettingOutlined />}>
        设置
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="logout" icon={<LogoutOutlined />}>
        退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo">
          {collapsed ? 'K8S' : 'Kubernetes管理平台'}
        </div>
        <Menu 
          theme="dark" 
          mode="inline" 
          defaultSelectedKeys={['dashboard']} 
          onClick={handleMenuClick}
        >
          <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
            仪表盘
          </Menu.Item>
          <SubMenu key="workloads" icon={<AppstoreOutlined />} title="工作负载">
            <Menu.Item key="pods">Pods</Menu.Item>
            <Menu.Item key="deployments">部署</Menu.Item>
            <Menu.Item key="statefulsets">有状态集</Menu.Item>
            <Menu.Item key="daemonsets">守护进程集</Menu.Item>
            <Menu.Item key="jobs">任务</Menu.Item>
            <Menu.Item key="cronjobs">定时任务</Menu.Item>
          </SubMenu>
          <SubMenu key="networking" icon={<CloudServerOutlined />} title="网络">
            <Menu.Item key="services">服务</Menu.Item>
            <Menu.Item key="ingresses">入口</Menu.Item>
          </SubMenu>
          <SubMenu key="storage" icon={<DatabaseOutlined />} title="存储">
            <Menu.Item key="persistentvolumes">持久卷</Menu.Item>
            <Menu.Item key="persistentvolumeclaims">持久卷声明</Menu.Item>
            <Menu.Item key="storageclasses">存储类</Menu.Item>
          </SubMenu>
          <SubMenu key="config" icon={<SettingOutlined />} title="配置">
            <Menu.Item key="configmaps">配置映射</Menu.Item>
            <Menu.Item key="secrets">密钥</Menu.Item>
          </SubMenu>
          <Menu.Item key="nodes" icon={<ClusterOutlined />}>
            节点
          </Menu.Item>
          <Menu.Item key="namespaces" icon={<FolderOutlined />}>
            命名空间
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }}>
          <Row justify="space-between" align="middle">
            <Col>
              {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: toggleCollapsed,
              })}
            </Col>
            <Col style={{ paddingRight: 24 }}>
              <Space size="large">
                <Search placeholder="搜索资源..." style={{ width: 200 }} />
                <Badge count={5}>
                  <Avatar shape="square" icon={<UserOutlined />} />
                </Badge>
                <Dropdown overlay={userMenu}>
                  <span style={{ cursor: 'pointer' }}>
                    管理员 <UserOutlined />
                  </span>
                </Dropdown>
              </Space>
            </Col>
          </Row>
        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          <Breadcrumb style={{ marginBottom: 16 }}>
            <Breadcrumb.Item>Kubernetes</Breadcrumb.Item>
            <Breadcrumb.Item>
              {selectedMenu.charAt(0).toUpperCase() + selectedMenu.slice(1)}
            </Breadcrumb.Item>
          </Breadcrumb>
          {renderContent()}
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Kubernetes管理平台 ©2023 由React和Ant Design驱动
        </Footer>
      </Layout>

      {/* 创建资源的模态框 */}
      <Modal 
        title="创建新资源" 
        visible={isModalVisible} 
        onOk={handleOk} 
        onCancel={handleCancel}
        width={800}
      >
        <div style={{ textAlign: 'center', padding: 40 }}>
          <p>这里放置资源创建表单</p>
          <p>根据选择的资源类型显示不同的表单字段</p>
        </div>
      </Modal>
    </Layout>
  );
};

export default K8SManagementPlatform;

配套CSS样式

bash 复制代码 
/* App.css */
#root {
  height: 100%;
}

.logo {
  height: 32px;
  margin: 16px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

.site-layout .site-layout-background {
  background: #fff;
}

.trigger {
  padding: 0 24px;
  font-size: 18px;
  line-height: 64px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.dashboard-content {
  background: #fff;
  padding: 24px;
  min-height: 360px;
}

.ant-layout {
  min-height: 100vh;
}

.ant-layout-header {
  padding: 0;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.ant-layout-sider {
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
}

.ant-layout-footer {
  padding: 16px 50px;
}

功能说明

响应式布局：左侧菜单可折叠，适应不同屏幕尺寸

多模块管理：通过菜单切换不同Kubernetes资源管理模块

命名空间过滤：可以按命名空间查看资源

数据刷新：提供手动刷新数据功能

资源创建：通过模态框创建新资源

状态可视化：使用标签和颜色区分不同资源状态

搜索功能：全局资源搜索

扩展建议

集成API：连接真实的Kubernetes API后端

图表增强：使用ECharts或Chart.js实现更丰富的监控图表

终端模拟：集成xterm.js实现Web终端功能

日志查看：实现日志实时查看和搜索功能

权限控制：根据RBAC实现细粒度的权限管理

多集群管理：支持管理多个Kubernetes集群

要运行这个 Kubernetes 管理平台前端应用，你需要按照以下步骤操作。这里假设你已经具备基本的 Node.js 和 npm/yarn 开发环境。

运行步骤

  1. 创建 React 项目
    如果你还没有创建 React 项目，先创建一个：
bash 复制代码 
npx create-react-app k8s-dashboard
cd k8s-dashboard
  1. 安装依赖
    安装所需的依赖库（Ant Design 和图标库）：
bash 复制代码 
npm install antd @ant-design/icons

或者使用 yarn

bash 复制代码 
yarn add antd @ant-design/icons
  1. 替换代码
    将上面的代码分别保存到以下文件中：

主代码保存为 src/App.js

CSS 样式保存为 src/App.css

  1. 修改 index.js
    确保你的 src/index.js 文件如下：
bash 复制代码 
jsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
  1. 启动开发服务器
    运行以下命令启动开发服务器：
bash 复制代码 
npm start

或者使用 yarn

bash 复制代码 
yarn start
应用将在默认浏览器中打开 http://localhost:3000。

生产环境构建

如果你想构建生产版本：

bash 复制代码 
npm run build

或者使用 yarn

yarn build

构建完成后，你可以在 build 文件夹中找到所有静态文件，可以部署到任何 Web 服务器。

与后端 API 集成

目前这是一个纯前端演示，要与真实的 Kubernetes API 交互，你需要：

设置 API 代理（在 package.json 中添加 proxy 配置）

实现 API 调用（替换示例中的模拟数据）

处理认证（通常使用 kubeconfig 或 token）

使用 Docker 运行

如果你想使用 Docker 运行这个应用：

创建 Dockerfile：

使用官方 Node.js 镜像

bash 复制代码 
FROM node:16 as build

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

使用 Nginx 作为生产服务器

bash 复制代码 
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建并运行容器：

bash 复制代码 
docker build -t k8s-dashboard .
docker run -p 80:80 k8s-dashboard
然后访问 http://localhost 即可。

注意事项

这只是一个前端界面，需要后端 API 支持才能管理真实的 Kubernetes 集群

生产环境需要考虑安全措施，如 HTTPS、认证等

你可以根据需要扩展功能，如添加监控图表、日志查看器等

bash 复制代码 
+---------------------------------------------------------------------+
|  K8S Dashboard  [搜索框]   🔔  👤 管理员 ▼                          |
+---------------------+-----------------------------------------------+
|  ▤ 仪表盘           |                                               |
|  📦 工作负载 ▼      |                                               |
|    Pods            |               集群概览                         |
|    部署            |                                               |
|  🌐 网络 ▼         |  +--------+  +--------+  +--------+  +--------+|
|    服务            |  | Pods   |  | 节点   |  | 命名   |  | 集群   ||
|    入口            |  | 12     |  | 3      |  | 空间 5 |  | 健康   ||
|  💾 存储 ▼         |  +--------+  +--------+  +--------+  +--------+|
|    持久卷          |                                               |
|  ⚙️ 配置 ▼         |  +--------------------------+                  |
|    ConfigMaps      |  | Pod状态分布图表          |                  |
|    Secrets         |  |                          |                  |
|  🖥️ 节点           |  +--------------------------+                  |
|  📁 命名空间       |                                               |
|                     |  +--------------------------+                  |
|                     |  | 资源使用情况图表         |                  |
|                     |  |                          |                  |
|                     |  +--------------------------+                  |
+---------------------+-----------------------------------------------+
相关推荐
lichenyang4532 天前
Docker 学习笔记（四）：Dockerfile，把项目打成自己的镜像
docker·容器
lichenyang4532 天前
Docker 学习笔记（三）：Docker 网络、bridge、子网和容器互通
docker·容器
lichenyang4532 天前
Docker 学习笔记（二）：docker run 的参数到底在控制什么？
docker·容器
运维开发故事5 天前
基于 Arthas 的多集群在线诊断系统设计与实现
kubernetes
Patrick_Wilson6 天前
从「改个端口」到 502：Next.js on k8s 的容器端口、Service 映射与 env 覆盖
docker·kubernetes·next.js
探索云原生7 天前
K8s 1.36 这个 GA 特性，把 initContainer 拉模型的 hack 干掉了
ai·云原生·kubernetes
云恒要逆袭7 天前
运行你的第一个Docker容器
后端·docker·容器
Java之美8 天前
一次k8s升级引发的DevicePlugin注册失败
云原生·kubernetes
程序员老赵9 天前
10 分钟部署 OpenCode：Docker 一键安装，浏览器打开就能用 AI 写代码（附完整命令与排错）
docker·容器·ai编程
热门推荐
012026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？032026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？04Trae国际版与国内版深度测评：AI原生IDE的双生花05GitHub 镜像站点06飞书长连接_事件订阅（接收消息，审批任务状态变更）07【AI】2026 年具身智能模型和世界模型总结08Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析092026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？102026年AI架构实战：彻底解决OpenAI接口超时与封号，Python调用GPT-5.2/Sora2企业级架构详解（附源码+压测报告）