解析 Hello World 扩展组件

在前一节中，您已学习如何在本地运行 KubeSphere Console 并成功加载扩展组件。现在，让我们深入了解它的工作原理。

加载 Hello World 扩展组件时，它执行了以下三个关键任务，这对于 KubeSphere 扩展组件的开发至关重要。

  1. 在顶部导航栏注册了一个菜单按钮，以方便用户快速访问该扩展组件的页面。
  2. 添加了独立的页面路由，当用户访问 http://localhost:8000/hello-world 时可以正确地渲染扩展组件页面。
  3. 实现了扩展组件的页面内容。

现在，让我们更详细地查看 Hello World 扩展组件的文件结构和源代码，以深入了解这些功能是如何实现的。

扩展组件的目录结构

$ tree extensions/hello-world
extensions/hello-world
├── Dockerfile
├── README.md
├── package.json
└── src
    ├── App.jsx
    ├── index.js
    ├── locales
    │   ├── en
    │   │   ├── base.json
    │   │   └── index.js
    │   ├── index.js
    │   └── zh
    │       ├── base.json
    │       └── index.js
    └── routes
        └── index.js

扩展组件的基础信息

package.json 文件中包含了扩展组件的基础信息与 Node.js 元数据。

{
  "name": "hello-world",
  "version": "1.0.0",
  "private": true,
  "description": "Hello World!",
  "homepage": "",
  "author": "",
  "main": "dist/index.js",
  "files": ["dist"],
  "dependencies": {}
}

扩展组件功能点

通过 src/index.js 向 ks-console 注册导航栏按钮、多语言等配置信息。

import routes from './routes';
import locales from './locales';

const menus = [
  {
    parent: 'topbar',
    name: 'hello-world',
    title: 'Hello World',
    icon: 'cluster',
    order: 0,
    desc: 'Hello World!',
    skipAuth: true,
    isCheckLicense: false,
  },
];

const extensionConfig = {
  routes,
  menus,
  locales,
};

export default extensionConfig;

通过 src/routes/index.js 向 ks-console 注册页面路由，访问该路由地址会渲染扩展组件的功能页面。

import React from 'react';
import App from '../App';

export default [
  {
    path: '/hello-world',
    element: <App />,
  },
];

扩展组件功能实现

通过 src/App.jsx 实现具体的功能，例如：展示 Hello World! 字样。

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.h3`
  margin: 8rem auto;
  text-align: center;
`;

export default function App() {
  return <Wrapper>Hello World!</Wrapper>;
}