From b02bfac40cdb476d92241d0a5caec7ed7c556e79 Mon Sep 17 00:00:00 2001
From: jo-hnny <wuzhiqiang94@hotmail.com>
Date: Thu, 3 Nov 2022 14:45:05 +0800
Subject: [PATCH] feat(console): add version to side menu (#2151)

* feat(console): add version to side menu

* fix(console): add ExternalLink
---
 web/console/Wrapper.tsx | 109 +++++++++++++++++++++-------------------
 1 file changed, 56 insertions(+), 53 deletions(-)

diff --git a/web/console/Wrapper.tsx b/web/console/Wrapper.tsx
index 410d1fe23..65149b192 100644
--- a/web/console/Wrapper.tsx
+++ b/web/console/Wrapper.tsx
@@ -26,8 +26,7 @@ import {
 import { ResourceInfo, RequestParams } from './src/modules/common/models';
 import { resourceConfig, PlatformTypeEnum } from './config';
 import { isEmpty } from './src/modules/common/utils';
-import * as classnames from 'classnames';
-import { Icon, Text, Bubble, NavMenu, List, ExternalLink, StatusTip, H2, Menu } from 'tea-component';
+import { NavMenu, List, StatusTip, Menu, Layout, ExternalLink } from 'tea-component';
 import { TkeVersion } from '@/src/modules/common/components/tke-version';
 import { ConsoleModuleEnum } from '@config/platform';
 import 'tea-component/dist/tea.css';
@@ -658,59 +657,63 @@ export class Wrapper extends React.Component<ConsoleWrapperProps, ConsoleWrapper
     const openedIndex = this.state.asideRouterSelect.index;
 
     return (
-      <Menu theme="dark" className="_custom_theme_menu" title={title}>
-        {routerList.map(({ url, title, subRouterConfig, icon }, index) => {
-          if (subRouterConfig) {
-            return (
-              <Menu.SubMenu
-                title={title}
-                icon={icon}
-                opened={openedIndex === index}
-                onOpenedChange={opened => {
-                  this.setState({
-                    asideRouterSelect: {
-                      index: opened ? index : -1,
-                      isShow: this.state.asideRouterSelect.isShow
+      <Layout.Sider>
+        <Menu theme="dark" className="_custom_theme_menu" title={title}>
+          {routerList.map(({ url, title, subRouterConfig, icon }, index) => {
+            if (subRouterConfig) {
+              return (
+                <Menu.SubMenu
+                  title={title}
+                  icon={icon}
+                  opened={openedIndex === index}
+                  onOpenedChange={opened => {
+                    this.setState({
+                      asideRouterSelect: {
+                        index: opened ? index : -1,
+                        isShow: this.state.asideRouterSelect.isShow
+                      }
+                    });
+                  }}
+                >
+                  {subRouterConfig?.map(({ title, url, icon }) => (
+                    <Menu.Item
+                      title={title}
+                      icon={icon}
+                      selected={url === selected}
+                      onClick={() => {
+                        if (url === selected) return;
+
+                        this.onNav(url);
+                      }}
+                    />
+                  ))}
+                </Menu.SubMenu>
+              );
+            } else {
+              const isSelected = selected.includes(url) || (selected.split('/').length <= 2 && index === 0);
+
+              return (
+                <Menu.Item
+                  title={title}
+                  icon={icon}
+                  selected={isSelected}
+                  onClick={() => {
+                    if (isSelected) return;
+
+                    if (this.props.platformType === PlatformTypeEnum.Manager) {
+                      this.onNav(url);
+                    } else {
+                      this.onNav(url + query);
                     }
-                  });
-                }}
-              >
-                {subRouterConfig?.map(({ title, url, icon }) => (
-                  <Menu.Item
-                    title={title}
-                    icon={icon}
-                    selected={url === selected}
-                    onClick={() => {
-                      if (url === selected) return;
+                  }}
+                />
+              );
+            }
+          })}
+        </Menu>
 
-                      this.onNav(url);
-                    }}
-                  />
-                ))}
-              </Menu.SubMenu>
-            );
-          } else {
-            const isSelected = selected.includes(url) || (selected.split('/').length <= 2 && index === 0);
-
-            return (
-              <Menu.Item
-                title={title}
-                icon={icon}
-                selected={isSelected}
-                onClick={() => {
-                  if (isSelected) return;
-
-                  if (this.props.platformType === PlatformTypeEnum.Manager) {
-                    this.onNav(url);
-                  } else {
-                    this.onNav(url + query);
-                  }
-                }}
-              />
-            );
-          }
-        })}
-      </Menu>
+        <TkeVersion />
+      </Layout.Sider>
     );
   }
 }