Skip to content

Commit

Permalink
feat(console): add icon to side menu (#2017)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jo-hnny
jo-hnny committed Jul 12, 2022
1 parent d9cc4e1 commit 034ca08
Show file tree
Hide file tree
Showing 17 changed files with 176 additions and 311 deletions.
203 changes: 71 additions & 132 deletions web/console/Wrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ 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 } from 'tea-component';
import { Icon, Text, Bubble, NavMenu, List, ExternalLink, StatusTip, H2, Menu } from 'tea-component';
import { TkeVersion } from '@/src/modules/common/components/tke-version';
import { ConsoleModuleEnum } from '@config/platform';
import 'tea-component/dist/tea.css';
Expand Down Expand Up @@ -67,19 +67,25 @@ interface RouterConfig {

/** 二级下拉列表的配置 */
subRouterConfig?: RouterConfig[];

icon?: [string, string];
}

console.log('svg----->', require('./public/static/icon/overview.svg'));

/** 基础的侧边栏导航栏配置 */
const commonRouterConfig: RouterConfig[] = [
{
url: '/tkestack/overview',
title: '概览',
watchModule: ConsoleModuleEnum.Monitor
watchModule: ConsoleModuleEnum.Monitor,
icon: [require('./public/static/icon/overview.svg'), require('./public/static/icon/overview-hover.svg')]
},
{
url: '/tkestack/cluster',
title: '集群管理',
watchModule: ConsoleModuleEnum.PLATFORM
watchModule: ConsoleModuleEnum.PLATFORM,
icon: [require('./public/static/icon/cluster.svg'), require('./public/static/icon/cluster-hover.svg')]
},
// {
// url: '/tkestack/project',
Expand All @@ -93,6 +99,7 @@ const commonRouterConfig: RouterConfig[] = [
// },
{
title: '组织资源',
icon: [require('./public/static/icon/registry.svg'), require('./public/static/icon/registry-hover.svg')],
watchModule: [ConsoleModuleEnum.Registry, ConsoleModuleEnum.Auth],
subRouterConfig: [
{
Expand Down Expand Up @@ -120,6 +127,7 @@ const commonRouterConfig: RouterConfig[] = [
{
title: '访问管理',
watchModule: [ConsoleModuleEnum.Auth],
icon: [require('./public/static/icon/uam.svg'), require('./public/static/icon/uam-hover.svg')],
subRouterConfig: [
{
url: '/tkestack/uam/user',
Expand All @@ -136,6 +144,7 @@ const commonRouterConfig: RouterConfig[] = [
{
title: '监控&告警',
watchModule: [ConsoleModuleEnum.Monitor, ConsoleModuleEnum.Notify],
icon: [require('./public/static/icon/alarm.svg'), require('./public/static/icon/alarm-hover.svg')],
subRouterConfig: [
{
url: '/tkestack/alarm',
Expand All @@ -156,6 +165,7 @@ const commonRouterConfig: RouterConfig[] = [
},
{
title: '运维中心',
icon: [require('./public/static/icon/app.svg'), require('./public/static/icon/app-hover.svg')],
watchModule: [
ConsoleModuleEnum.Application,
ConsoleModuleEnum.PLATFORM,
Expand Down Expand Up @@ -578,7 +588,11 @@ export class Wrapper extends React.Component<ConsoleWrapperProps, ConsoleWrapper
left={
<React.Fragment>
<NavMenu.Item>
<img src="/static/icon/tkeAnywhere-logo-white-text.svg" style={{ height: 35 }} alt="logo" />
<img
src={require('./public/static/icon/tkeAnywhere-logo-white-text.svg')}
style={{ height: 35 }}
alt="logo"
/>
</NavMenu.Item>
</React.Fragment>
}
Expand Down Expand Up @@ -611,141 +625,66 @@ export class Wrapper extends React.Component<ConsoleWrapperProps, ConsoleWrapper
);
}

/**
* 展示侧边导航栏
*/
private _renderSideBar(query: string) {
const { platformType } = this.props;
const { userType, projects } = this.state;
const routerConfig: RouterConfig[] = this.state.routerConfig;
const title = this.props.platformType === PlatformTypeEnum.Manager ? 'TKE 平台管理' : '业务管理';
const routerList = this.state.routerConfig;
const selected = this.state.selected;
const openedIndex = this.state.asideRouterSelect.index;

return (
<div className="aside qc-aside-new">
<div className="qc-aside-area">
<div className="qc-aside-area-main">
<h2 className="qc-aside-headline">
<Text verticalAlign="middle">{platformType === PlatformTypeEnum.Manager ? '平台管理' : '业务管理'}</Text>
{userType === UserType.admin && projects.length ? (
<Bubble
content={platformType === PlatformTypeEnum.Manager ? '切换至业务管理控制台' : '切换至平台管理控制台'}
placement="right"
>
<Icon
type="convertip"
className="tea-ml-2n"
style={{ verticalAlign: '-9px' }}
<Menu theme="dark" 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={() => {
location.href =
location.origin +
(platformType === PlatformTypeEnum.Manager ? '/tkestack-project' : '/tkestack');
if (url === selected) return;

this.onNav(url);
}}
/>
</Bubble>
) : (
<noscript />
)}
</h2>
<ul className="qc-aside-list def-scroll keyboard-focus-obj">
{routerConfig.map((routerIns, index) => {
let routerContent: React.ReactNode;
if (routerIns.isTitle) {
routerContent = (
<li className="qc-aside-title">
<span>{routerIns.title}</span>
</li>
);
} else {
let isSelected =
this.state.selected.includes(routerIns.url) ||
(this.state.selected.split('/').length <= 2 && index === 0);

/** 需要判断当前路由设置是否为二级路由设置 */
if (routerIns.subRouterConfig) {
const subRouterUrl = routerIns.subRouterConfig.map(item => item.url);
isSelected = subRouterUrl.includes(this.state.selected);
const selectedIndex = subRouterUrl.findIndex(item => item === this.state.selected);
const { index: asideIndex, isShow } = this.state.asideRouterSelect;

routerContent = (
<li
key={index}
className={asideIndex === index && isShow ? 'qc-aside-select qc-aside-child-select' : ''}
>
<a
style={{ paddingLeft: '24px' }}
className="qc-aside-level-1"
href="javascript:;"
onClick={() => {
this.setState({
asideRouterSelect: {
index,
isShow: asideIndex !== index ? true : !isShow
}
});
}}
>
<Text style={{ marginLeft: 0 }}>{routerIns.title}</Text>
<i className="qc-aside-up-icon" />
</a>
<ul className="qc-aside-subitem">
{routerIns.subRouterConfig.map((subRouter, subIndex) => {
return (
<li key={subIndex}>
<a
className={classnames('qc-aside-level-2', {
'qc-aside-select': selectedIndex === subIndex
})}
href="javascript:;"
onClick={() => {
if (selectedIndex !== subIndex) {
this.onNav(subRouter.url);
}
}}
target="_self"
>
<span>{subRouter.title}</span>
</a>
</li>
);
})}
</ul>
</li>
);
))}
</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 {
routerContent = (
<li key={index}>
<a
style={{ paddingLeft: '24px' }}
className={classnames('qc-aside-level-1', {
'qc-aside-select': isSelected
})}
href="javascript:;"
onClick={e => {
if (!isSelected) {
// 这里需要区分是否为别的业务，如果是别的业务，是进行业务的跳转
if (this.props.platformType === PlatformTypeEnum.Manager) {
this.onNav(routerIns.url);
} else {
this.onNav(routerIns.url + query);
}
}
}}
target="_self"
>
<span style={isSelected ? { marginLeft: 0, color: '#4093ff' } : { marginLeft: 0 }}>
{routerIns.title}
</span>
</a>
</li>
);
this.onNav(url + query);
}
}
return routerContent;
})}
</ul>
</div>
</div>
<TkeVersion />
</div>
}}
/>
);
}
})}
</Menu>
);
}
}
45 changes: 27 additions & 18 deletions web/console/index.tke.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,32 +35,41 @@ import { Overview } from '@src/modules/overview';
import { PlatformTypeEnum } from './config';
import { VNCPage } from '@src/modules/vnc';

const ClusterPromise = import(/* webpackPrefetch: true */ './src/modules/cluster');
const Cluster = React.lazy(() => ClusterPromise);
// const ClusterPromise = import(/* webpackPrefetch: true */ './src/modules/cluster');
// const Cluster = React.lazy(() => ClusterPromise);
import Cluster from './src/modules/cluster';

const UamPromise = import(/* webpackPrefetch: true */ './src/modules/uam');
const Uam = React.lazy(() => UamPromise);
// const UamPromise = import(/* webpackPrefetch: true */ './src/modules/uam');
// const Uam = React.lazy(() => UamPromise);
import Uam from './src/modules/uam';

const RegistryPromise = import(/* webpackPrefetch: true */ './src/modules/registry');
const Registry = React.lazy(() => RegistryPromise);
// const RegistryPromise = import(/* webpackPrefetch: true */ './src/modules/registry');
// const Registry = React.lazy(() => RegistryPromise);
import Registry from './src/modules/registry';

const LogStashPromise = import(/* webpackPrefetch: true */ './src/modules/logStash');
const LogStash = React.lazy(() => LogStashPromise);
// const LogStashPromise = import(/* webpackPrefetch: true */ './src/modules/logStash');
// const LogStash = React.lazy(() => LogStashPromise);
import LogStash from './src/modules/logStash';

const ProjectPromise = import(/* webpackPrefetch: true */ './src/modules/project');
const Project = React.lazy(() => ProjectPromise);
// const ProjectPromise = import(/* webpackPrefetch: true */ './src/modules/project');
// const Project = React.lazy(() => ProjectPromise);
import Project from './src/modules/project';

const HelmPromise = import(/* webpackPrefetch: true */ './src/modules/helm');
const Helm = React.lazy(() => HelmPromise);
// const HelmPromise = import(/* webpackPrefetch: true */ './src/modules/helm');
// const Helm = React.lazy(() => HelmPromise);
import Helm from './src/modules/helm';

const ApplicationPromise = import(/* webpackPrefetch: true */ './src/modules/application');
const Application = React.lazy(() => ApplicationPromise);
// const ApplicationPromise = import(/* webpackPrefetch: true */ './src/modules/application');
// const Application = React.lazy(() => ApplicationPromise);
import Application from './src/modules/application';

const AlarmPolicyPromise = import(/* webpackPrefetch: true */ './src/modules/alarmPolicy');
const AlarmPolicy = React.lazy(() => AlarmPolicyPromise);
// const AlarmPolicyPromise = import(/* webpackPrefetch: true */ './src/modules/alarmPolicy');
// const AlarmPolicy = React.lazy(() => AlarmPolicyPromise);
import AlarmPolicy from './src/modules/alarmPolicy';

const NotifyPromise = import(/* webpackPrefetch: true */ './src/modules/notify');
const Notify = React.lazy(() => NotifyPromise);
// const NotifyPromise = import(/* webpackPrefetch: true */ './src/modules/notify');
// const Notify = React.lazy(() => NotifyPromise);
import Notify from './src/modules/notify';

insertCSS(
'hidden-checkbox',
Expand Down
41 changes: 41 additions & 0 deletions web/console/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions web/console/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@
"thread-loader": "^3.0.4",
"ts-loader": "^9.2.1",
"typescript": "^4.3.5",
"url-loader": "^4.1.1",
"webpack": "^5.37.0",
"webpack-bundle-analyzer": "^4.4.1",
"webpack-cli": "^4.7.0",
Expand Down
Loading

0 comments on commit 034ca08

Please sign in to comment.