2021-08-30

king

2021-08-30 5306aa30949e7a4cb7632da46ed7a786c5e61bde

2021-08-30

 src/pc/components/login/normal-login/index.jsx

@@ -46,7 +46,7 @@
        wrap: { name: card.name, width: card.width || 24, loginWays: ['uname_pwd'] },
        style: { background: '#ffffff', width: '330px', borderRadius: '4px', marginLeft: '55vw'},
        loginWays: [
          {type: 'uname_pwd', label: '账号密码', remember: 'true'},
          {type: 'uname_pwd', label: '账号密码登录', remember: 'true'},
          {type: 'sms_vcode', label: '短信验证码'},
          {type: 'app_scan', label: '扫码登录'},
        ]

 src/pc/components/login/normal-login/index.scss

@@ -130,9 +130,9 @@

.mk-mob-view .login-edit-box {
  display: block;
  .login-way-wrap.simple {
    display: none;
  }
  // .login-way-wrap.simple {
  //   display: none;
  // }
  .login-way-wrap {
    padding: 0 15px;
    border-radius: 0;

 src/router/index.js

@@ -13,6 +13,7 @@
const Login = asyncLoadComponent(() => import('@/views/login'))
const NotFound = asyncComponent(() => import('@/views/404'))
const AppManage = asyncLoadComponent(() => import('@/views/appmanage'))
const AppCheck = asyncLoadComponent(() => import('@/views/appcheck'))
const PCDesign = asyncLoadComponent(() => import('@/views/pcdesign'))
const MobDesign = asyncLoadComponent(() => import('@/views/mobdesign'))
const MenuDesign = asyncLoadComponent(() => import('@/views/menudesign'))
@@ -29,6 +30,7 @@
  {path: '/main', name: 'main', component: Main, auth: true},
  {path: '/design', name: 'design', component: Design, auth: true},
  {path: '/appmanage', name: 'appmanage', component: AppManage, auth: true},
  {path: '/appcheck', name: 'appcheck', component: AppCheck, auth: true},
  {path: '/pcdesign/:param', name: 'pcdesign', component: PCDesign, auth: true},
  {path: '/mobdesign/:param', name: 'mobdesign', component: MobDesign, auth: true},
  {path: '/menudesign/:param', name: 'menudesign', component: MenuDesign, auth: true},

 src/views/appcheck/header/index.jsx

New file
@@ -0,0 +1,31 @@
import React, {Component} from 'react'

import avatar from '@/assets/img/avatar.jpg'
import MainLogo from '@/assets/img/main-logo.png'
import './index.scss'

class AppManageHeader extends Component {
  state = {
    avatar: sessionStorage.getItem('CloudAvatar') || avatar,
    userName: sessionStorage.getItem('CloudUserName')
  }

  render () {
    return (
      <header className="app-manage-header-container">
        <div className="header-logo"><img src={MainLogo} alt=""/></div>
        <div className="title">
          应用管理
        </div>
        <div className="header-user">
          <img src={this.state.avatar} alt=""/>
          <span>
            <span className="username">{this.state.userName}</span>
          </span>
        </div>
      </header>
    )
  }
}

export default AppManageHeader

 src/views/appcheck/header/index.scss

New file
@@ -0,0 +1,57 @@
.app-manage-header-container {
  width: 100%;
  height: 48px;
  color: rgba(255, 255, 255, 0.65);
  position: fixed;
  top: 0px;
  z-index: 10;
  padding-right: 0px;
  left: 0;
  
  background: #001529;
  border-bottom: 1px solid #000;

  .header-logo {
    float: left;
    width: 180px;
    line-height: 48px;
    text-align: center;
    padding-left: 5px;
    box-sizing: border-box;
    opacity: 1;
    img {
      max-width: 100%;
      max-height: 40px;
    }
  }
  .header-user {
    float: right;
    line-height: 48px;
    margin-right: 10px;
    img {
      width: 29px;
      height: 29px;
      border-radius: 30px;
      margin-right: 7px;
    }
    span {
      color: #ffffff;
      font-size: 0.95rem;
      .username {
        display: inline-block;
        height: 30px;
        max-width: 95px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .title {
    position: absolute;
    left: calc(50% - 36px);
    top: 10px;
    color: #ffffff;
    font-size: 18px;
  }
}

 src/views/appcheck/index.jsx

New file
@@ -0,0 +1,260 @@
import React, {Component} from 'react'
import { Spin, notification, Table, ConfigProvider, Typography, Row, Col, Tooltip, Icon } from 'antd'
import enUS from 'antd/es/locale/en_US'
import zhCN from 'antd/es/locale/zh_CN'

import Api from '@/api'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const { Paragraph } = Typography

const _locale = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const Header = asyncComponent(() => import('./header'))

let base_url = ''
if (process.env.NODE_ENV === 'production') {
  base_url = document.location.origin + '/' + window.GLOB.service
} else {
  base_url = window.GLOB.location + '/' + window.GLOB.service
}

const skinStyle = {
  bg_black_style_blue: {name: '蓝色', color: '#1890ff'},
  bg_black_style_red: {name: '红色', color: '#f5222d'},
  bg_black_style_orange_red: {name: '橙红色', color: '#fa541c'},
  bg_black_style_orange: {name: '橙色', color: '#fa8c16'},
  bg_black_style_orange_yellow: {name: '橙黄色', color: '#faad14'},
  bg_black_style_yellow: {name: '黄色', color: '#fadb14'},
  bg_black_style_yellow_green: {name: '黄绿色', color: '#a0d911'},
  bg_black_style_green: {name: '绿色', color: '#52c41a'},
  bg_black_style_cyan: {name: '青色', color: '#13c2c2'},
  bg_black_style_blue_purple: {name: '蓝紫色', color: '#2f54eb'},
  bg_black_style_purple: {name: '紫色', color: '#722ed1'},
  bg_black_style_magenta: {name: '洋红色', color: '#eb2f96'},
  bg_black_style_grass_green: {name: '草绿色', color: '#aeb303'},
  bg_black_style_deep_red: {name: '深红色', color: '#c32539'}
}

class AppCheck extends Component {
  state = {
    loading: false,
    applist: [],
    columns: [
      { title: '应用名称', dataIndex: 'remark', key: 'remark', align: 'center', width: '45%' },
      { title: '应用编码', dataIndex: 'kei_no', key: 'kei_no', align: 'center', width: '45%' },
    ],
    selectApp: null
  }

  UNSAFE_componentWillMount() {
    document.body.className = ''
    this.getAppList()
  }

  /**
   * @description 组件销毁，清除state更新
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

  getAppList = () => {
    let param = {
      func: 's_get_kei'
    }

    param.rduri = window.GLOB.mainSystemApi

    this.setState({
      loading: true
    })

    Api.getLocalConfig(param).then(result => {
      if (result.status) {
        let selectApp = null
        let applist = result.data.map(item => {
          item.sublist = item.data_detail || []
          item.sublist = item.sublist.map(cell => {
            cell.ID = cell.d_id

            if (cell.customize_param) {
              let _param = {}
              try {
                _param = JSON.parse(window.decodeURIComponent(window.atob(cell.customize_param)))
              } catch (e) {
                _param = {}
              }
              cell.copyright = _param.copyright || ''
              cell.logo = _param.logo || ''
            }

            return cell
          })

          if (this.state.selectApp && this.state.selectApp.ID === item.ID) {
            selectApp = item
          }

          return item
        })

        if (!selectApp && applist[0]) {
          selectApp = applist[0]
        }

        this.setState({
          loading: false,
          applist: applist,
          selectApp
        })
      } else {
        this.setState({
          loading: false
        })
        notification.warning({
          top: 92,
          message: result.message,
          duration: 5
        })
      }
    })
  }

  onSelectChange = selectedRowKeys => {
    const { applist } = this.state
    let selectApp = applist.filter(item => item.ID === selectedRowKeys[0])[0]

    this.setState({ selectApp })
  }

  /**
   * @description 点击整行，触发切换， 判断是否可选，单选或多选，进行对应操作
   */
  changeRow = (record) => {
    this.setState({ selectApp: record })
  }

  render () {
    const { loading, columns, applist, selectApp } = this.state

    return (
      <div className="mk-app-check">
        <ConfigProvider locale={_locale}>
          <Header view="manage" />
          {loading ?
            <div className="loading-mask">
              <Spin size="large" />
            </div> : null
          }
          <div className="view-wrap">
            <div className="left-view">
              <div className="app-table">
                <Table
                  rowKey="ID"
                  columns={columns}
                  dataSource={applist}
                  pagination={false}
                  rowSelection={{ type: 'radio', selectedRowKeys: selectApp ? [selectApp.ID] : [], onChange: this.onSelectChange }}
                  onRow={(record) => ({ onClick: () => this.setState({ selectApp: record })})}
                />
              </div>
            </div>
            <div className="right-view">
              {selectApp ? <div className="app-title">{selectApp.remark}</div> : null}
              {selectApp && selectApp.sublist.map((item, index) => {
                let css = skinStyle[item.css] ? skinStyle[item.css].name : ''
                let color = skinStyle[item.css] ? skinStyle[item.css].color : '#e8e8e8'
                let binding = ''
                if (item.user_binding) {
                  if (item.user_binding.indexOf('uname_pwd') > -1) {
                    binding = '用户名'
                  }
                  if (item.user_binding.indexOf('sms_vcode') > -1) {
                    binding = binding ? binding + '，手机号' : '手机号'
                  }
                }
                return (
                  <div className="sub-app" key={index} style={{borderColor: color}}>
                    <Row>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">应用类型:</div>
                          <div className="content" style={{fontSize: '18px', fontWeight: 600}}>{item.typename}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">语言:</div>
                          <div className="content" style={{textDecoration: 'underline'}}>{item.lang === 'en-US' ? '英文' : '中文'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">权限管理:</div>
                          <div className="content">{item.role_type === 'false' ? '不启用' : '启用'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">皮肤:</div>
                          <div className="content" style={{color: color}}>{css}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          {binding ? <div className="label">
                            <Tooltip placement="topLeft" title="微信公众号登录时，系统用户与微信用户的绑定方式。">
                              <Icon type="question-circle" />
                              用户绑定:
                            </Tooltip>
                          </div> : null}
                          <div className="content">{binding}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">标题:</div>
                          <div className="content">{item.title || '无'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">网站头像:</div>
                          <div className="content">{item.favicon ? <img style={{width: '18px', height: '18px'}} src={item.favicon} alt="" /> : '无'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">版权:</div>
                          <div className="content">{item.copyright || '无'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">LOGO:</div>
                          <div className="content">{item.logo ? <img style={{height: '18px'}} src={item.logo} alt="" /> : '无'}</div>
                        </div>
                      </Col>
                    </Row>
                    <div className="action">
                      <Paragraph style={{display: 'inline-block', margin: 0}} copyable={{ text: `${base_url}${item.typename === 'pad' ? 'mob' : item.typename}/index.html#/index/${this.state.selectApp.kei_no}/${item.typename !== 'pc' ? item.typename + '/' : ''}${item.lang}` }}></Paragraph>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </ConfigProvider>
      </div>
    )
  }
}

export default AppCheck

 src/views/appcheck/index.scss

New file
@@ -0,0 +1,104 @@
.mk-app-check {
  background: #fff;
  min-height: 100vh;
  padding: 70px 30px;

  .loading-mask {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.35);

    .ant-spin {
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }
  .view-wrap {
    width: 100%;
    position: relative;
    display: flex;

    .left-view {
      flex: 1;
      width: 60%;
      padding-right: 5px;
      .app-table {
        padding-top: 30px;
      }
    }
    .right-view {
      width: 40%;
      padding-left: 20px;

      .app-title {
        font-size: 16px;
        font-weight: 500;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #d8d8d8;
        margin-bottom: 17px;
      }
      .sub-app {
        margin: 10px 10px 25px;
        border: 1px solid #e8e8e8;
        height: 210px;
        border-radius: 4px;
        padding-top: 10px;

        .app-item {
          height: 30px;
          line-height: 30px;
          div {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            line-height: 30px;
          }
          .label {
            width: 40%;
            text-align: right;
            color: rgba(0, 0, 0, 0.65);
            .anticon-question-circle {
              color: #c49f47;
              margin-right: 3px;
            }
          }
          .content {
            width: 60%;
            padding-left: 10px;
            color: rgba(0, 0, 0, 0.85);
          }
        }
        .action {
          text-align: right;
          padding: 5px 20px;
          margin-top: 5px;
          border-top: 1px solid #e8e8e8;

          .ant-typography-copy {
            color: #26C281;
          }
        }
      }
    }
  }
  .ant-table-wrapper {
    .ant-table-body {
      border: 1px solid #e8e8e8;
      border-bottom: 0;
      border-radius: 4px;
    }
    .ant-table-tbody {
      > tr.ant-table-row-selected td {
        background: #bae7ff;
      }
    }
  }
}

 src/views/appmanage/index.jsx

@@ -458,6 +458,18 @@
          item.sublist = item.data_detail || []
          item.sublist = item.sublist.map(cell => {
            cell.ID = cell.d_id

            if (cell.customize_param) {
              let _param = {}
              try {
                _param = JSON.parse(window.decodeURIComponent(window.atob(cell.customize_param)))
              } catch (e) {
                _param = {}
              }
              cell.copyright = _param.copyright || ''
              cell.logo = _param.logo || ''
            }

            return cell
          })

@@ -471,13 +483,12 @@
        if (!selectApp && applist[0]) {
          selectApp = applist[0]
        }
        

        this.setState({
          loading: false,
          applist: applist,
          selectApp
        })

      } else {
        this.setState({
          loading: false
@@ -578,6 +589,7 @@
      exec_type: 'y',
      remark: selectApp.remark,
      kei_no: selectApp.kei_no,
      cus_param_type: 'A',
      LText: ''
    }

@@ -588,7 +600,7 @@
    sublist = sublist.filter(item => item.ID !== record.ID)

    // param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','${item.link_type || 'true'}','${item.role_type || 'true'}','${item.lang || 'zh-CN'}'`)
    param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','false','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}','${item.user_binding || ''}','${item.sms_id || ''}'`)
    param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','false','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}','${item.user_binding || ''}','${item.sms_id || ''}','${window.btoa(window.encodeURIComponent(JSON.stringify({copyright: item.copyright || '', logo: item.logo || ''})))}'`)
    param.LText = param.LText.join(' union all ')
    param.LText = Utils.formatOptions(param.LText)
    
@@ -803,6 +815,7 @@
        exec_type: 'y',
        remark: res.remark,
        kei_no: res.kei_no,
        cus_param_type: 'A',
        LText: ''
      }

@@ -811,7 +824,7 @@

      if (visible === 'edit') {
        // param.LText = selectApp.sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','${item.link_type || 'true'}','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}'`)
        param.LText = selectApp.sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','false','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}','${item.user_binding || ''}','${item.sms_id || ''}'`)
        param.LText = selectApp.sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','false','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}','${item.user_binding || ''}','${item.sms_id || ''}','${window.btoa(window.encodeURIComponent(JSON.stringify({copyright: item.copyright || '', logo: item.logo || ''})))}'`)
        param.LText = param.LText.join(' union all ')
        param.LText = Utils.formatOptions(param.LText)
      }
@@ -872,6 +885,7 @@
        exec_type: 'y',
        remark: selectApp.remark,
        kei_no: selectApp.kei_no,
        cus_param_type: 'A',
        LText: ''
      }

@@ -896,7 +910,7 @@
      }

      // param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','${item.link_type || 'true'}','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}'`)
      param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','false','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}','${item.user_binding || ''}','${item.sms_id || ''}'`)
      param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','false','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}','${item.user_binding || ''}','${item.sms_id || ''}','${window.btoa(window.encodeURIComponent(JSON.stringify({copyright: item.copyright || '', logo: item.logo || ''})))}'`)
      param.LText = param.LText.join(' union all ')
      param.LText = Utils.formatOptions(param.LText)

@@ -1045,8 +1059,8 @@
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          {/* <div className="label">登录:</div>
                          <div className="content">{item.login_types === 'false' ? '不需要' : '需要'}</div> */}
                          {/* <div className="label">皮肤:</div>
                          <div className="content" style={{color: color}}>{css}</div> */}
                        </div>
                      </Col>
                      <Col span={12}>
@@ -1074,10 +1088,22 @@
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">网站图标:</div>
                          <div className="label">网站头像:</div>
                          <div className="content">{item.favicon ? <img style={{width: '18px', height: '18px'}} src={item.favicon} alt="" /> : '无'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">版权:</div>
                          <div className="content">{item.copyright || '无'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">LOGO:</div>
                          <div className="content">{item.logo ? <img style={{height: '18px'}} src={item.logo} alt="" /> : '无'}</div>
                        </div>
                      </Col>
                    </Row>
                    <div className="action">
                      <Button type="link" onClick={() => this.jumpMenu(item)} style={{color: 'rgba(30, 228, 224, 1)'}}>菜单&权限</Button>

 src/views/appmanage/index.scss

@@ -58,7 +58,7 @@
      .sub-app {
        margin: 10px 10px 25px;
        border: 1px solid #e8e8e8;
        height: 180px;
        height: 210px;
        border-radius: 4px;
        padding-top: 10px;


 src/views/appmanage/submutilform/index.jsx

@@ -194,7 +194,7 @@
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="图标">
            <Form.Item label="网站头像">
              {getFieldDecorator('favicon', {
                initialValue: card ? card.favicon : ''
              })(
@@ -202,6 +202,27 @@
              )}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label={
              <Tooltip placement="topLeft" title="使用微信授权登录时，绑定用户页面的版权声明，注：可添加html标签。">
                <Icon type="question-circle" />
                版权
              </Tooltip>
            }>
              {getFieldDecorator('copyright', {
                initialValue: card ? card.copyright || '' : ''
              })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="LOGO">
              {getFieldDecorator('logo', {
                initialValue: card ? card.logo : ''
              })(
                <SourceComponent type="picture" placement="right"/>
              )}
            </Form.Item>
          </Col>
        </Row>
      </Form>
    )

 src/views/design/header/index.jsx

@@ -295,7 +295,7 @@
  }

  render () {
    const { mainMenu, editLevel } = this.props
    const { mainMenu, editLevel, tabviews } = this.props
    const { menulist } = this.state

    return (
@@ -325,16 +325,45 @@
        {/* 进入编辑按钮 */}
        {!editLevel ? <Icon onClick={this.enterEdit} className="edit-check" type="edit" /> : null}
        {!editLevel && options.sysType === 'local' && window.GLOB.systemType !== 'production' && this.props.memberLevel >= 20 ?
          <span onClick={() => {window.open('#/appmanage')}} className="mobile" type="edit"> 应用管理 <Icon type="arrow-right" /></span> : null
          <div className="app-entrance entrance">
            <div className="icon"><Icon type="appstore" /></div>
            <div className="title">应用管理</div>
            <div className="detail">可创建及管理PC、pad及移动端等不同设备的应用，实现明科云APP、微信公众号、小程序等多平台的应用共享。</div>
            <Button type="primary" onClick={() => {window.open('#/appmanage')}}>
              编辑
            </Button>
          </div> : null
        }
        {editLevel === 'HS' && tabviews.length === 0 && options.sysType === 'local' && window.GLOB.systemType === 'production' && this.props.memberLevel >= 20 ?
          <div className="app-prod-entrance entrance">
            <div className="icon"><Icon type="appstore" /></div>
            <div className="title">应用管理</div>
            <div className="detail">可创建及管理PC、pad及移动端等不同设备的应用，实现明科云APP、微信公众号、小程序等多平台的应用共享。</div>
            <Button type="primary" onClick={() => {window.open('#/appcheck')}}>
              查看
            </Button>
          </div> : null
        }
        {!editLevel && options.sysType === 'local' && this.props.memberLevel >= 20 ?
          <span onClick={() => {window.open('#/interface')}} className="interface" type="edit"> 接口调试 <Icon type="arrow-right" /></span> : null
          <div className="api-entrance entrance">
            <div className="icon"><Icon type="api" /></div>
            <div className="title">接口调试</div>
            <div className="detail">可自动处理登录接口的参数加密，以及业务接口的签名计算，方便开发人员的接口测试工作。</div>
            <Button type="primary" onClick={() => {window.open('#/interface')}}>
              编辑
            </Button>
          </div> : null
        }
        {/* window.btoa(window.encodeURIComponent(JSON.stringify({ MenuType: 'home', MenuId: 'home_page_id', MenuName: '首页' }))) */}
        {!editLevel && window.GLOB.systemType !== 'production' && this.props.memberLevel >= 20 ?
          <span className="home-edit" onClick={() => {window.open('#/menudesign/JTdCJTIyTWVudVR5cGUlMjIlM0ElMjJob21lJTIyJTJDJTIyTWVudUlkJTIyJTNBJTIyaG9tZV9wYWdlX2lkJTIyJTJDJTIyTWVudU5hbWUlMjIlM0ElMjIlRTklQTYlOTYlRTklQTElQjUlMjIlN0Q=')}}>
            首页 <Icon type="arrow-right" />
          </span> : null
          <div className="home-entrance entrance">
            <div className="icon"><Icon type="home" /></div>
            <div className="title">首页</div>
            <div className="detail">基于自定义页面的首页设计，可实现灵活的元素配置及样式调整，展现当前系统的风格。</div>
            <Button type="primary" onClick={() => {window.open('#/menudesign/JTdCJTIyTWVudVR5cGUlMjIlM0ElMjJob21lJTIyJTJDJTIyTWVudUlkJTIyJTNBJTIyaG9tZV9wYWdlX2lkJTIyJTJDJTIyTWVudU5hbWUlMjIlM0ElMjIlRTklQTYlOTYlRTklQTElQjUlMjIlN0Q=')}}>
              编辑
            </Button>
          </div> : null
        }
        {/* 编辑菜单 */}
        {editLevel === 'level1' ? <EditMenu menulist={this.state.menulist} reload={this.reload} exitEdit={this.exitEdit}/> : null}

 src/views/design/header/index.scss

@@ -137,12 +137,57 @@
    color: #1890ff;
    cursor: pointer;
  }
  .home-edit {
  .home-entrance {
    left: 300px;
  }
  .api-entrance {
    left: 600px;
  }
  .app-entrance {
    left: 900px;
  }
  .app-prod-entrance {
    left: 300px;
  }
  .entrance {
    position: absolute;
    top: 100px;
    right: 50px;
    cursor: pointer;
    color: #1890ff;
    top: 200px;
    background: #ffffff;
    box-shadow: 0 0 5px #d9d9d9;
    border-radius: 5px;
    width: 250px;
    height: 250px;
    color: rgba(0, 0, 0, 0.85);
    text-align: center;
    .icon {
      text-align: center;
      padding: 15px 0px;
      .anticon {
        background-color: #1890ff;
        color: #ffffff;
        font-size: 24px;
        width: 35px;
        height: 35px;
        line-height: 38px;
        border-radius: 35px;
      }
    }
    .title {
      font-size: 16px;
      text-align: center;
      padding-bottom: 10px;
    }
    .detail {
      font-size: 13px;
      color: rgba(0, 0, 0, 0.65);
      text-align: center;
      padding: 0 10px;
    }
    .ant-btn {
      margin-top: 15px;
      height: 28px;
      padding: 0 25px;
    }
  }
}
.sys-header-container.mask::after {

 src/views/design/index.jsx

@@ -20,7 +20,7 @@
  
  render () {
    return (
      <div className="mk-main-view">
      <div className="mk-main-view mk-design-view">
        <ConfigProvider locale={_locale}>
          <Header key="header"/>
          <Sidemenu key="sidemenu"/>

 src/views/design/index.scss

@@ -2,4 +2,7 @@
  display: flex;
  flex: auto;
  min-height: 100%;
}
}
// .mk-design-view {
//   background-color: rgb(238, 241, 246);
// }