This commit is contained in:
2021-06-30 11:43:20 +08:00
98 changed files with 5392 additions and 1618 deletions

View File

@@ -20,7 +20,6 @@ class ComponentDynamic extends Component {
if (this.props.onRef) {
this.props.onRef(this)
}
return true
}
@@ -73,6 +72,40 @@ class ComponentDynamic extends Component {
}
}
class Iframe extends Component {
shouldComponentUpdate() {
if (this.props.onRef) {
this.props.onRef(this)
}
return true
}
componentDidMount() {
if (this.props.onRef) {
this.props.onRef(this)
}
this.loadComponent()
}
loadComponent() {
NProgress.start()
const iframe = this.refs.content
iframe.onload = () => {
NProgress.done()
}
iframe.onerror = () => {
NProgress.done()
}
iframe.src = this.props.src
}
render() {
const { title } = this.props
return <iframe ref="content" title={title} />
}
}
export default class index extends Component {
state = {
actived: '',
@@ -113,13 +146,15 @@ export default class index extends Component {
render() {
this.panes = []
const { actived } = this.state
return (
<Layout.Content>
<div className="yo-tab-external-mount">
<Tabs
type="editable-card"
hideAdd
activeKey={this.state.actived}
activeKey={actived}
onChange={activeKey => this.onChange(activeKey)}
onEdit={(targetKey, action) => this.onClose(targetKey, action)}
>
@@ -183,19 +218,29 @@ export default class index extends Component {
<div
key={pane.key}
className={
(pane.key === this.state.actived
(pane.key === actived
? 'yo-tab-external-tabpane-active'
: 'yo-tab-external-tabpane-inactive') +
' yo-tab-external-tabpane'
}
>
<ComponentDynamic
path={pane.path}
id={pane.key}
key={pane.key}
param={pane.param}
onRef={p => this.panes.push(p)}
/>
{pane.openType === 1 ? (
<ComponentDynamic
path={pane.path}
id={pane.key}
key={pane.key}
param={pane.param}
paneActived={pane.key === actived}
onRef={p => this.panes.push(p)}
/>
) : pane.openType === 2 ? (
<Iframe
src={pane.path}
title={pane.key}
id={pane.key}
onRef={p => this.panes.push(p)}
/>
) : null}
</div>
)
})}

View File

@@ -33,13 +33,20 @@ export default class index extends Component {
}
render() {
const { allowSiderCollapsed } = this.state
return (
<Layout.Header>
<Container mode="fluid">
<div className="header-actions">
<span className="header-action mr-md" onClick={() => this.onCollapsed()}>
<AntIcon type="menu" />
</span>
{allowSiderCollapsed && (
<span
className="header-action mr-md"
onClick={() => this.onCollapsed()}
>
<AntIcon type="menu" />
</span>
)}
<Logo />
<Search />
</div>

View File

@@ -78,7 +78,7 @@ export default class search extends Component {
}
onSelect(value, option) {
const { id, meta, component } = option.menu
const { id, meta, component, link, redirect, openType } = option.menu
// 选中时清空输入框内容,并失去焦点
this.setState({ searchValue: '' })
@@ -88,7 +88,19 @@ export default class search extends Component {
key: id,
title: meta.title,
icon: meta.icon,
path: component,
path: (() => {
switch (openType) {
case 1:
return component
case 2:
return link
case 3:
return redirect
default:
return null
}
})(),
openType,
})
}

View File

@@ -83,7 +83,7 @@ class User extends Component {
)}
{user.roles &&
user.roles.map(role => (
<Tag color="purple" className="mb-xs">
<Tag key={role.id} color="purple" className="mb-xs">
{role.name}
</Tag>
))}

View File

@@ -9,8 +9,7 @@ Swiper.use([Mousewheel, Scrollbar])
const { getState, subscribe } = store
let timer,
swiper
let timer, swiper
const siderSwiperOptions = {
direction: 'vertical',
@@ -31,17 +30,15 @@ const UpdateSwiper = () => {
}, 300)
}
export default class index extends Component {
state = {
...getState('layout')
...getState('layout'),
}
constructor(props) {
super(props)
this.unsubscribe = subscribe('layout', (state) => {
this.unsubscribe = subscribe('layout', state => {
this.setState(state)
})
}
@@ -78,7 +75,10 @@ export default class index extends Component {
<div className="swiper-container" id="layout--swiper-container">
<div className="swiper-wrapper">
<div className="swiper-slide">
<Menu parent={this} menuStyle={{ height: '100%', borderRight: 0 }} />
<Menu
parent={this}
menuStyle={{ height: '100%', borderRight: 0 }}
/>
</div>
</div>
<div className="swiper-scrollbar" id="layout--swiper-scrollbar"></div>

View File

@@ -6,9 +6,8 @@ import store from 'store'
const { getState, subscribe } = store
export default class index extends Component {
state = {
...getState('nav')
...getState('nav'),
}
constructor(props) {
@@ -23,21 +22,25 @@ export default class index extends Component {
this.unsubscribe()
}
renderMenu = (menu) => {
return menu.map((p) => {
renderMenu = menu => {
return menu.map(p => {
return p.children ? this.renderSubMenu(p) : this.renderMenuItem(p)
})
}
renderSubMenu = (menu) => {
renderSubMenu = menu => {
return (
<Menu.SubMenu key={menu.id} title={menu.meta.title} icon={menu.meta.icon && <AntIcon type={menu.meta.icon} />}>
<Menu.SubMenu
key={menu.id}
title={menu.meta.title}
icon={menu.meta.icon && <AntIcon type={menu.meta.icon} />}
>
{this.renderMenu(menu.children)}
</Menu.SubMenu>
)
}
renderMenuItem = (menu) => {
renderMenuItem = menu => {
return (
<Menu.Item key={menu.id} onClick={() => this.onOpenContentWindow(menu)}>
{menu.meta.icon && <AntIcon type={menu.meta.icon} />}
@@ -46,12 +49,26 @@ export default class index extends Component {
)
}
onOpenContentWindow = (menu) => {
onOpenContentWindow = menu => {
const { id, meta, component, link, redirect, openType } = menu
window.openContentWindow({
key: menu.id,
title: menu.meta.title,
icon: menu.meta.icon,
path: menu.component
key: id,
title: meta.title,
icon: meta.icon,
path: (() => {
switch (openType) {
case 1:
return component
case 2:
return link
case 3:
return redirect
default:
return null
}
})(),
openType,
})
}
@@ -60,12 +77,11 @@ export default class index extends Component {
}
render() {
const props = {
mode: 'inline',
selectable: false,
style: this.props.menuStyle,
theme: 'light'
theme: 'light',
}
const on = {
@@ -74,16 +90,20 @@ export default class index extends Component {
return (
<>
{
this.state.nav.map((item, i) => {
{this.state.nav.map((item, i) => {
if (item.menu.length) {
return (
<section key={i}>
<div className="yo-sider-nav--app">{item.app.name}</div>
<Menu {...props} {...on}>{this.renderMenu(item.menu)}</Menu>
<Menu {...props} {...on}>
{this.renderMenu(item.menu)}
</Menu>
</section>
)
})
}
} else {
return false
}
})}
</>
)
}

View File

@@ -1,10 +1,9 @@
import React, { Component } from 'react'
import { Spin, Layout } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import { api } from 'common/api'
import { cloneDeep, groupBy, findIndex, last } from 'lodash'
import store from 'store'
import { EMPTY_ID } from 'util/global'
import { EMPTY_ID, SIDER_BREAK_POINT } from 'util/global'
import Header from './_layout/header'
import Sider from './_layout/sider'
@@ -83,6 +82,9 @@ export default class index extends Component {
})
})
})
window.addEventListener('resize', this.onResizeSider)
this.onResizeSider()
}
/**
@@ -103,7 +105,31 @@ export default class index extends Component {
return
}
const path = settings.path.startsWith('/') ? settings.path : `/${settings.path}`
let path = (p => {
if (p.startsWith('http')) return p
if (p.startsWith('/')) return p
else return `/${p}`
})(settings.path)
if ([2, 3].includes(settings.openType)) {
const param = (p => {
const arr = []
if (p && p.constructor === Object) {
Object.keys(p).forEach(key => {
arr.push(`${key}=${(p[key] || '').toString()}`)
})
}
return arr.join('&')
})(settings.param)
path += param ? `?${param}` : ''
if (settings.openType === 3) {
// 打开新的浏览器窗口
window.open(path)
return
}
}
/**
* 向标签页队列中添加一个新的标签页
@@ -118,7 +144,9 @@ export default class index extends Component {
path,
param: settings.param,
loaded: false,
openType: settings.openType || 1,
}
this.setState({
panes: [...this.state.panes, newPane],
})
@@ -231,6 +259,13 @@ export default class index extends Component {
})
}
onResizeSider = () => {
dispatch({
type: 'AUTO_TOGGLE_COLLAPSED',
siderCollapsed: window.innerWidth <= SIDER_BREAK_POINT,
})
}
render() {
const { loading, panes, actived } = this.state