From 5046d0d13dc6a8563b8e54e31913bc44cfa1072f Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 26 四月 2022 19:23:18 +0800 Subject: [PATCH] 2022-04-26 --- src/mob/components/topbar/normal-navbar/index.jsx | 55 +++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 35 insertions(+), 20 deletions(-) diff --git a/src/mob/components/topbar/normal-navbar/index.jsx b/src/mob/components/topbar/normal-navbar/index.jsx index 3473c20..b8ece4c 100644 --- a/src/mob/components/topbar/normal-navbar/index.jsx +++ b/src/mob/components/topbar/normal-navbar/index.jsx @@ -2,11 +2,12 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { Popover } from 'antd' -import { ExpandOutlined, ReloadOutlined, EllipsisOutlined, LogoutOutlined, ToolOutlined, ScanOutlined, LeftOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons' +import { ExpandOutlined, ReloadOutlined, EllipsisOutlined, LogoutOutlined, ToolOutlined, ScanOutlined, LeftOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined, SearchOutlined, MenuOutlined } from '@ant-design/icons' import asyncIconComponent from '@/utils/asyncIconComponent' import getWrapForm from './options' import MKEmitter from '@/utils/events.js' +import avatar from '@/assets/img/avatar.jpg' import './index.scss' const NormalForm = asyncIconComponent(() => import('@/components/normalform')) @@ -20,6 +21,7 @@ } state = { + avatar: sessionStorage.getItem('CloudAvatar') || avatar, card: null, back: false } @@ -31,12 +33,12 @@ let _card = { uuid: card.uuid, type: card.type, - floor: card.floor, width: 24, subtype: card.subtype, wrap: { type: 'navbar', height: 50, title: 'NavBar', back: 'true', logout: 'false' }, style: {boxShadow: '0 0 3px #D9D9D9', shadowColor: '#D9D9D9', shadowBlur: '3px', paddingLeft: '10px', paddingRight: '10px', lineHeight: '2.8', fontSize: '18px' }, - searchStyle: {} + searchStyle: {}, + titleStyle: {} } if (card.config) { @@ -101,6 +103,8 @@ if (comIds[1] === 'search') { _card.searchStyle = style + } else if (comIds[1] === 'title') { + _card.titleStyle = style } else { _card.style = style } @@ -118,6 +122,12 @@ MKEmitter.emit('changeStyle', [card.uuid], ['font', 'background', 'border', 'padding', 'shadow'], card.style) } + changeTitleStyle = () => { + const { card } = this.state + + MKEmitter.emit('changeStyle', [card.uuid, 'title'], ['font'], card.titleStyle || {}) + } + changeSearchStyle = () => { const { card } = this.state @@ -128,19 +138,6 @@ if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { e.stopPropagation() MKEmitter.emit('clickComponent', this.state.card) - } - } - - changeMenu = (menu) => { - if (menu.property === 'link') { - window.open(menu.link) - } else { - MKEmitter.emit('changeEditMenu', { - MenuID: menu.property === 'linkmenu' ? menu.linkMenuId : menu.MenuID, - copyMenuId: menu.property === 'menu' ? menu.copyMenuId : '', - MenuNo: menu.MenuNo, - MenuName: menu.name, - }) } } @@ -178,6 +175,14 @@ } updateWrap = (res) => { + let funs = res.funs || [] + + delete res.funs + + funs.forEach(n => { + res[n] = 'true' + }) + this.updateComponent({...this.state.card, wrap: res}) } @@ -195,7 +200,7 @@ } render() { - const { card } = this.state + const { card, avatar } = this.state let right = null if (card.wrap.logout === 'true') { @@ -207,12 +212,15 @@ if (card.wrap.refresh === 'true') { right = !right ? <ReloadOutlined /> : <EllipsisOutlined onDoubleClick={this.skip}/> } + if (card.wrap.menus && card.wrap.menus.length > 0) { + right = !right ? <MenuOutlined /> : <EllipsisOutlined onDoubleClick={this.skip}/> + } return ( <div className="normal-topbar-edit-box" style={card.style} onClick={this.clickComponent} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <NormalForm title="瀵艰埅鏍忚缃�" width={750} update={this.updateWrap} getForms={this.getWrapForms}> + <NormalForm title="瀵艰埅鏍忚缃�" width={850} update={this.updateWrap} getForms={this.getWrapForms}> <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="topbar" card={card}/> @@ -224,10 +232,17 @@ </Popover> <div className="am-navbar"> <div className="am-navbar-left"> - {card.wrap.back !== 'false' ? <LeftOutlined /> : null} + {card.wrap.back !== 'false' && card.wrap.menuPosition !== 'left' ? <LeftOutlined /> : null} + {card.wrap.menuPosition === 'left' ? <div className="img" style={{backgroundImage: `url(${avatar})`}}></div> : null} </div> {card.wrap.type !== 'search' ? - <div className="am-navbar-title">{card.wrap.title || ''}</div> : + <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ + <div className="mk-popover-control"> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeTitleStyle}/> + </div> + } trigger="hover"> + <div className="am-navbar-title" style={card.titleStyle}>{card.wrap.title || ''}</div> + </Popover> : <div className="am-navbar-search" onDoubleClick={this.setSearch}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> -- Gitblit v1.8.0