2022-05-12

king

2022-05-12 b8aa5da1b2873bea760483cc5ab335fde9fb6de6

2022-05-12

 src/menu/components/card/balcony/index.jsx

@@ -230,6 +230,7 @@
        </Popover>
        {card.wrap.checkAll === 'show' ? <div className="check-all"><Checkbox>全选</Checkbox></div> : null}
        <CardCellComponent cards={card} cardCell={card} elements={card.elements} updateElement={this.updateCard}/>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/card/data-card/index.jsx

@@ -674,7 +674,7 @@
        <div style={{clear: 'both'}}></div>
        {card.wrap.pagestyle === 'page' && card.setting.laypage === 'true' && appType !== 'mob' ? <Pagination total={85} size="small" showTotal={total => `共 ${total} 条`} pageSize={20} defaultCurrent={1}/> : null}
        {card.wrap.pagestyle === 'page' && card.setting.laypage === 'true' && appType === 'mob' ? <MobPagination /> : null}
        {/* <div className="component-name"><div className="center">{card.name}</div></div> */}
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/card/prop-card/index.jsx

@@ -494,7 +494,7 @@
        <div className={(card.wrap.layout || 'grid') + '-layout float-' + (card.wrap.cardFloat || 'left')}>
          {card.subcards.map(subcard => (<CardComponent key={subcard.uuid} cards={card} card={subcard} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))}
        </div>
        {/* <div className="component-name"><div className="center">{card.name}</div></div> */}
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/card/table-card/index.jsx

@@ -564,6 +564,7 @@
        </div>
        {card.setting.laypage === 'true' && card.wrap.pagestyle !== 'slide' && appType !== 'mob' ? <Pagination size="small" total={50} /> : null}
        {card.setting.laypage === 'true' && card.wrap.pagestyle !== 'slide' && appType === 'mob' ? <MobPagination /> : null}
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/carousel/data-card/index.jsx

@@ -291,6 +291,7 @@
          <ToolOutlined/>
        </Popover>
        <CardSimpleComponent cards={card} card={card.subcards[0]} updateElement={this.updateCard} deleteElement={this.deleteCard}/>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/carousel/prop-card/index.jsx

@@ -373,6 +373,7 @@
        {card.subcards.length > 0 ? <Carousel dotPosition={card.wrap.dotPosition || 'bottom'} effect={card.wrap.effect || 'scrollx'}>
          {card.subcards.map((subcard) => (<CardSimpleComponent key={subcard.uuid} cards={card} card={subcard} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))}
        </Carousel> : null}
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/chart/antv-bar/index.jsx

@@ -1358,6 +1358,7 @@
          config={card}
          updateaction={this.updateComponent}
        /> : null}
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/chart/antv-dashboard/index.jsx

@@ -534,6 +534,7 @@
        </Popover>
        <NormalHeader hideSearch="true" config={card} updateComponent={this.updateComponent}/>
        <div className="canvas" id={card.uuid + 'dashboard'} ref={ref => this.wrap = ref}></div>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/chart/antv-pie/index.jsx

@@ -686,6 +686,7 @@
        </Popover>
        <NormalHeader config={card} updateComponent={this.updateComponent}/>
        <div className="canvas" id={card.uuid + 'canvas'} ref={ref => this.wrap = ref}></div>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/chart/antv-scatter/index.jsx

@@ -392,6 +392,7 @@
        <NormalHeader config={card} updateComponent={this.updateComponent}/>
        <div className="canvas" id={card.uuid + 'canvas'} ref={ref => this.wrap = ref}></div>
        {appType !== 'mob' ? <ActionComponent type="chart" config={card} updateaction={this.updateComponent}/> : null}
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/chart/chart-custom/index.jsx

@@ -263,6 +263,7 @@
        </Popover>
        <NormalHeader config={card} updateComponent={this.updateComponent}/>
        <div className="canvas" id={card.uuid + 'canvas'} ref={ref => this.wrap = ref}></div>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/code/sandbox/index.jsx

@@ -188,6 +188,7 @@
          <ToolOutlined />
        </Popover>
        <CodeContent name={card.name} html={card.html} css={card.css} js={card.js}/>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/editor/braft-editor/index.jsx

@@ -186,6 +186,7 @@
          value={card.wrap.datatype !== 'static' ? '<p class="empty-content">富文本</p>' : card.html}
          encryption="false"
        />
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/form/normal-form/index.jsx

@@ -731,6 +731,7 @@
          />}
          <FormAction config={card} group={group} updateconfig={this.updateGroup}/>
        </div> : null}
        <div className="component-name"><div className="center">{card.name}</div></div>
        <Modal
          title={this.state.dict['model.edit']}
          visible={this.state.visible}

 src/menu/components/form/tab-form/index.jsx

@@ -738,6 +738,7 @@
          />}
          <FormAction config={card} group={group} updateconfig={this.updateGroup}/>
        </div> : null}
        <div className="component-name"><div className="center">{card.name}</div></div>
        <Modal
          title={this.state.dict['model.edit']}
          visible={this.state.visible}

 src/menu/components/search/main-search/index.jsx

@@ -440,6 +440,7 @@
        } trigger="hover">
          <ToolOutlined />
        </Popover>
        <div className="component-name"><div className="center">{card.name}</div></div>
        {/* 编辑搜索条件 */}
        <Modal
          title="搜索条件-编辑"

 src/menu/components/share/clockcomponent/index.jsx

@@ -42,7 +42,7 @@
    const { visible, loading } = this.state

    return (
      <div className="clock-component-wrap">
      <div className={'clock-component-wrap' + (config.timer ? ' tip-sign' : '')}>
        <ClockCircleOutlined title="定时器" onClick={this.trigger} />
        <Modal
          title="定时器设置"

 src/menu/components/share/clockcomponent/index.scss

@@ -1,7 +1,20 @@
.clock-component-wrap {
  position: relative;
  display: inline-block;

  >.anticon-clock-circle {
    color: rgb(38, 194, 129);
  }
}

.clock-component-wrap.tip-sign::after {
  content: ' ';
  position: absolute;
  top: -2px;
  right: 2px;
  height: 8px;
  width: 8px;
  border-radius: 100%;
  background: #ff5b05;
  z-index: 1;
}

 src/menu/components/share/logcomponent/index.jsx

@@ -103,10 +103,11 @@
  }

  render () {
    const { btnlog } = this.props
    const { visible, dict, data, columns } = this.state

    return (
      <div className="btn-log-wrap">
      <div className={'btn-log-wrap' + (btnlog && btnlog.length > 0 ? ' tip-sign' : '')}>
        <RollbackOutlined title="解除冻结" onClick={this.trigger} />
        <Modal
          wrapClassName="popview-modal"

 src/menu/components/share/logcomponent/index.scss

@@ -1,4 +1,5 @@
.btn-log-wrap {
  position: relative;
  display: inline-block;

  >.anticon-rollback {
@@ -18,4 +19,15 @@
      padding: 5px;
    }
  }
}
.btn-log-wrap.tip-sign::after {
  content: ' ';
  position: absolute;
  top: -2px;
  right: 2px;
  height: 8px;
  width: 8px;
  border-radius: 100%;
  background: #ff5b05;
  z-index: 1;
}

 src/menu/components/table/edit-table/columns/index.jsx

@@ -149,7 +149,7 @@
        val = column.formula
        if (column.eval === 'false') {
          val = val.replace(/\n/ig, '<br/>').replace(/\s/ig, '&nbsp;')
          val = <span dangerouslySetInnerHTML={{__html: val}}></span>
          val = <span style={{fontWeight: 'inherit'}} dangerouslySetInnerHTML={{__html: val}}></span>
        }
      }
      return (
@@ -199,18 +199,17 @@
      return uuid.join('')
    }) ()

    if (config.wrap && config.wrap.borderColor) { // 边框颜色
      let style = `#${tableId} table, #${tableId} tr, #${tableId} th, #${tableId} td {border-color: ${config.wrap.borderColor}}`
      let ele = document.createElement('style')
      ele.innerHTML = style
      document.getElementsByTagName('head')[0].appendChild(ele)
    }

    this.setState({
      tableId,
      columns: fromJS(config.cols).toJS(),
      fields: fromJS(config.columns).toJS(),
      lineMarks: config.lineMarks ? fromJS(config.lineMarks).toJS() : []
    }, () => {
      const element = document.getElementById(tableId)
      element && element.style.setProperty('--mk-table-border-color', config.wrap.borderColor || '#e8e8e8')
      element && element.style.setProperty('--mk-table-color', config.wrap.color || 'rgba(0, 0, 0, 0.65)')
      element && element.style.setProperty('--mk-table-font-size', config.wrap.fontSize || '14px')
      element && element.style.setProperty('--mk-table-font-weight', config.wrap.fontWeight || 'normal')
    })
  }

@@ -224,11 +223,12 @@
      }
    } else if (!is(fromJS(this.state.fields), fromJS(nextProps.config.columns))) {
      this.setState({fields: fromJS(nextProps.config.columns).toJS()})
    } else if (this.props.config.wrap.borderColor !== nextProps.config.wrap.borderColor) {
      let style = `#${this.state.tableId} table, #${this.state.tableId} tr, #${this.state.tableId} th, #${this.state.tableId} td {border-color: ${nextProps.config.wrap.borderColor}}`
      let ele = document.createElement('style')
      ele.innerHTML = style
      document.getElementsByTagName('head')[0].appendChild(ele)
    } else if (!is(fromJS(this.props.config.wrap), fromJS(nextProps.config.wrap))) {
      const element = document.getElementById(this.state.tableId)
      element && element.style.setProperty('--mk-table-border-color', nextProps.config.wrap.borderColor || '#e8e8e8')
      element && element.style.setProperty('--mk-table-color', nextProps.config.wrap.color || 'rgba(0, 0, 0, 0.65)')
      element && element.style.setProperty('--mk-table-font-size', nextProps.config.wrap.fontSize || '14px')
      element && element.style.setProperty('--mk-table-font-weight', nextProps.config.wrap.fontWeight || 'normal')
    }
  }

@@ -560,14 +560,6 @@
      }
    })

    let style = {}
    if (config.wrap.color) {
      style.color = config.wrap.color
    }
    if (config.wrap.fontSize) {
      style.fontSize = config.wrap.fontSize
    }

    return (
      <div className={`edit-table-columns ${config.setting.laypage} ${config.wrap.mode || ''}`} id={tableId}>
        <div className="col-control">
@@ -589,7 +581,6 @@
            rowKey="uuid"
            size={config.wrap.size || 'middle'}
            rowClassName="editable-row"
            style={style}
            bordered={config.wrap.bordered !== 'false'}
            rowSelection={rowSelection}
            components={components}

 src/menu/components/table/edit-table/columns/index.scss

@@ -1,5 +1,10 @@
.edit-table-columns {
  position: relative;
  --mk-table-border-color: #e8e8e8;
  --mk-table-color: rgba(0, 0, 0, 0.65);
  --mk-table-font-size: 14px;
  --mk-table-font-weight: normal;

  .ant-table {
    color: inherit;
    font-size: inherit;
@@ -88,6 +93,22 @@
  .ant-table-small > .ant-table-content > .ant-table-body {
    margin: 0;
  }

  table, tr, th, td {
    border-color: var(--mk-table-border-color)!important;
  }
  table tr {
    th .ant-table-column-title, th .ant-table-column-title > span {
      // color: var(--mk-table-color)!important;
      font-size: var(--mk-table-font-size)!important;
      font-weight: var(--mk-table-font-weight)!important;
    }
    td {
      color: var(--mk-table-color)!important;
      font-size: var(--mk-table-font-size)!important;
      font-weight: var(--mk-table-font-weight)!important;
    }
  }
}
.edit-table-columns.false {
  .ant-pagination {

 src/menu/components/table/edit-table/index.jsx

@@ -194,7 +194,12 @@
  changeStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin', 'shadow'], card.style)
    let style = {...card.style}
    style.color = card.wrap.color || 'rgba(0, 0, 0, 0.65)'
    style.fontSize = card.wrap.fontSize || 14
    style.fontWeight = card.wrap.fontWeight || 'normal'

    MKEmitter.emit('changeStyle', [card.uuid], ['font1', 'background', 'border', 'padding', 'margin', 'shadow'], style)
  }

  getStyle = (comIds, style) => {
@@ -202,7 +207,21 @@

    if (comIds[0] !== card.uuid || comIds.length !== 1) return

    let _card = {...card, style}
    let _card = fromJS(card).toJS()
    let _style = fromJS(style).toJS()

    let color = style.color
    let fontSize = style.fontSize
    let fontWeight = style.fontWeight

    delete _style.color
    delete _style.fontSize
    delete _style.fontWeight

    _card.style = _style
    _card.wrap.color = color
    _card.wrap.fontSize = fontSize
    _card.wrap.fontWeight = fontWeight

    this.setState({
      card: _card
@@ -310,13 +329,19 @@
  }

  updateWrap = (res) => {
    let card = {...this.state.card, wrap: res}
    const { card } = this.state

    res.color = card.wrap.color
    res.fontSize = card.wrap.fontSize
    res.fontWeight = card.wrap.fontWeight

    let _card = {...card, wrap: res}

    if (res.tableType) {
      card.switchable = true
      _card.switchable = true
    }
    
    this.updateComponent(card)
    this.updateComponent(_card)
  }

  clickComponent = (e) => {
@@ -354,6 +379,7 @@
        <SearchComponent config={card} updatesearch={this.updateconfig}/>
        <ActionComponent type="editable" config={card} setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/>
        <ColumnComponent config={card} updatecolumn={this.updateconfig}/>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/table/edit-table/options.jsx

@@ -225,24 +225,24 @@
      tooltip: '默认值 #e8e8e8。',
      required: false
    },
    {
      type: 'color',
      field: 'color',
      label: '字体颜色',
      initval: wrap.color || 'rgba(0, 0, 0, 0.65)',
      tooltip: '默认值 rgba(0, 0, 0, 0.65)。',
      required: false
    },
    {
      type: 'number',
      field: 'fontSize',
      label: '字体大小',
      initval: wrap.fontSize || 14,
      min: 12,
      max: 30,
      precision: 0,
      required: false
    },
    // {
    //   type: 'color',
    //   field: 'color',
    //   label: '字体颜色',
    //   initval: wrap.color || 'rgba(0, 0, 0, 0.65)',
    //   tooltip: '默认值 rgba(0, 0, 0, 0.65)。',
    //   required: false
    // },
    // {
    //   type: 'number',
    //   field: 'fontSize',
    //   label: '字体大小',
    //   initval: wrap.fontSize || 14,
    //   min: 12,
    //   max: 30,
    //   precision: 0,
    //   required: false
    // },
    {
      type: 'number',
      field: 'advanceWidth',

 src/menu/components/table/normal-table/columns/index.jsx

@@ -164,7 +164,7 @@
        val = column.formula
        if (column.eval === 'false') {
          val = val.replace(/\n/ig, '<br/>').replace(/\s/ig, '&nbsp;')
          val = <span dangerouslySetInnerHTML={{__html: val}}></span>
          val = <span style={{fontWeight: 'inherit'}} dangerouslySetInnerHTML={{__html: val}}></span>
        }
      }
      return (
@@ -214,18 +214,17 @@
      return uuid.join('')
    }) ()

    if (config.wrap && config.wrap.borderColor) { // 边框颜色
      let style = `#${tableId} table, #${tableId} tr, #${tableId} th, #${tableId} td {border-color: ${config.wrap.borderColor}}`
      let ele = document.createElement('style')
      ele.innerHTML = style
      document.getElementsByTagName('head')[0].appendChild(ele)
    }

    this.setState({
      tableId,
      columns: fromJS(config.cols).toJS(),
      fields: fromJS(config.columns).toJS(),
      lineMarks: config.lineMarks ? fromJS(config.lineMarks).toJS() : []
    }, () => {
      const element = document.getElementById(tableId)
      element && element.style.setProperty('--mk-table-border-color', config.wrap.borderColor || '#e8e8e8')
      element && element.style.setProperty('--mk-table-color', config.wrap.color || 'rgba(0, 0, 0, 0.65)')
      element && element.style.setProperty('--mk-table-font-size', config.wrap.fontSize || '14px')
      element && element.style.setProperty('--mk-table-font-weight', config.wrap.fontWeight || 'normal')
    })
  }

@@ -239,11 +238,12 @@
      }
    } else if (!is(fromJS(this.state.fields), fromJS(nextProps.config.columns))) {
      this.setState({fields: fromJS(nextProps.config.columns).toJS()})
    } else if (this.props.config.wrap.borderColor !== nextProps.config.wrap.borderColor) {
      let style = `#${this.state.tableId} table, #${this.state.tableId} tr, #${this.state.tableId} th, #${this.state.tableId} td {border-color: ${nextProps.config.wrap.borderColor}}`
      let ele = document.createElement('style')
      ele.innerHTML = style
      document.getElementsByTagName('head')[0].appendChild(ele)
    } else if (!is(fromJS(this.props.config.wrap), fromJS(nextProps.config.wrap))) {
      const element = document.getElementById(this.state.tableId)
      element && element.style.setProperty('--mk-table-border-color', nextProps.config.wrap.borderColor || '#e8e8e8')
      element && element.style.setProperty('--mk-table-color', nextProps.config.wrap.color || 'rgba(0, 0, 0, 0.65)')
      element && element.style.setProperty('--mk-table-font-size', nextProps.config.wrap.fontSize || '14px')
      element && element.style.setProperty('--mk-table-font-weight', nextProps.config.wrap.fontWeight || 'normal')
    }
  }

@@ -573,14 +573,6 @@

    const columns = this.handlecolumns(this.state.columns, fields, config)

    let style = {}
    if (config.wrap.color) {
      style.color = config.wrap.color
    }
    if (config.wrap.fontSize) {
      style.fontSize = config.wrap.fontSize
    }

    return (
      <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType} ${config.wrap.mode || ''}`} id={tableId}>
        <div className="col-control">
@@ -594,7 +586,6 @@
            rowKey="uuid"
            size={config.wrap.size || 'middle'}
            rowClassName="editable-row"
            style={style}
            bordered={config.wrap.bordered !== 'false'}
            components={components}
            dataSource={this.state.data}

 src/menu/components/table/normal-table/columns/index.scss

@@ -1,8 +1,14 @@
.normal-table-columns {
  position: relative;
  --mk-table-border-color: #e8e8e8;
  --mk-table-color: rgba(0, 0, 0, 0.65);
  --mk-table-font-size: 14px;
  --mk-table-font-weight: normal;

  .ant-table {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }
  .ant-table-body {
    overflow-x: auto;
@@ -79,6 +85,22 @@
  .ant-table-small > .ant-table-content > .ant-table-body {
    margin: 0;
  }

  table, tr, th, td {
    border-color: var(--mk-table-border-color)!important;
  }
  table tr {
    th .ant-table-column-title {
      // color: var(--mk-table-color)!important;
      font-size: var(--mk-table-font-size)!important;
      font-weight: var(--mk-table-font-weight)!important;
    }
    td {
      color: var(--mk-table-color)!important;
      font-size: var(--mk-table-font-size)!important;
      font-weight: var(--mk-table-font-weight)!important;
    }
  }
}
.normal-table-columns.false {
  .ant-pagination {

 src/menu/components/table/normal-table/index.jsx

@@ -248,20 +248,34 @@
  changeStyle = () => {
    const { card } = this.state

    MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin', 'shadow'], card.style)
    let style = {...card.style}
    style.color = card.wrap.color || 'rgba(0, 0, 0, 0.65)'
    style.fontSize = card.wrap.fontSize || 14
    style.fontWeight = card.wrap.fontWeight || 'normal'

    MKEmitter.emit('changeStyle', [card.uuid], ['font1', 'background', 'border', 'padding', 'margin', 'shadow'], style)
  }

  getStyle = (comIds, style) => {
    const { card } = this.state

    if (comIds[0] !== card.uuid) return
    if (comIds[0] !== card.uuid || comIds.length !== 1) return

    let _card = {}
    if (comIds.length === 1) {
      _card = {...card, style}
    } else {
      return
    }
    let _card = fromJS(card).toJS()
    let _style = fromJS(style).toJS()

    let color = style.color
    let fontSize = style.fontSize
    let fontWeight = style.fontWeight

    delete _style.color
    delete _style.fontSize
    delete _style.fontWeight

    _card.style = _style
    _card.wrap.color = color
    _card.wrap.fontSize = fontSize
    _card.wrap.fontWeight = fontWeight

    this.setState({
      card: _card
@@ -416,7 +430,13 @@
  }

  updateWrap = (res) => {
    this.updateComponent({...this.state.card, wrap: res})
    const { card } = this.state

    res.color = card.wrap.color
    res.fontSize = card.wrap.fontSize
    res.fontWeight = card.wrap.fontWeight

    this.updateComponent({...card, wrap: res})
  }

  clickComponent = (e) => {
@@ -460,6 +480,7 @@
        <SearchComponent config={card} updatesearch={this.updateconfig}/>
        <ActionComponent config={card} setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/>
        <ColumnComponent config={card} updatecolumn={this.updateconfig}/>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/table/normal-table/options.jsx

@@ -161,24 +161,24 @@
      tooltip: '默认值 #e8e8e8。',
      required: false
    },
    {
      type: 'color',
      field: 'color',
      label: '字体颜色',
      initval: wrap.color || 'rgba(0, 0, 0, 0.65)',
      tooltip: '默认值 rgba(0, 0, 0, 0.65)。',
      required: false
    },
    {
      type: 'number',
      field: 'fontSize',
      label: '字体大小',
      initval: wrap.fontSize || 14,
      min: 12,
      max: 30,
      precision: 0,
      required: false
    },
    // {
    //   type: 'color',
    //   field: 'color',
    //   label: '字体颜色',
    //   initval: wrap.color || 'rgba(0, 0, 0, 0.65)',
    //   tooltip: '默认值 rgba(0, 0, 0, 0.65)。',
    //   required: false
    // },
    // {
    //   type: 'number',
    //   field: 'fontSize',
    //   label: '字体大小',
    //   initval: wrap.fontSize || 14,
    //   min: 12,
    //   max: 30,
    //   precision: 0,
    //   required: false
    // },
    {
      type: 'number',
      field: 'advanceWidth',

 src/menu/components/timeline/normal-timeline/index.jsx

@@ -192,6 +192,7 @@
        </Popover>
        <NormalHeader hideSearch="true" config={card} updateComponent={this.updateComponent}/>
        {card.subcards.map(subcard => (<CardSimpleComponent key={subcard.uuid} cards={card} card={subcard} updateElement={this.updateCard}/>))}
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/components/tree/antd-tree/index.jsx

@@ -194,6 +194,7 @@
            </TreeNode>
          </Tree>
        </div>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/menu/popview/index.jsx

@@ -5,6 +5,7 @@
import moment from 'moment'
import HTML5Backend from 'react-dnd-html5-backend'
import { notification, Modal, Collapse, Card, Switch, Button } from 'antd'
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'

import Api from '@/api'
import Utils from '@/utils/utils.js'
@@ -47,7 +48,8 @@
    oriConfig: null,
    config: null,
    customComponents: [],
    comloading: false
    comloading: false,
    eyeopen: false
  }

  UNSAFE_componentWillMount() {
@@ -660,7 +662,7 @@

  render () {
    const { btn } = this.props
    const { activeKey, comloading, dict, config, menuloading, customComponents, MenuId } = this.state
    const { activeKey, comloading, dict, config, menuloading, customComponents, MenuId, eyeopen } = this.state

    return (
      <div className="pc-poper-view">
@@ -691,11 +693,12 @@
                </Panel>
              </Collapse>
            </div>
            <div className={'menu-view ' + (menuloading ? 'saving' : '')}>
            <div className={'menu-view' + (menuloading ? ' saving' : '') + (eyeopen ? ' eye-open' : '')}>
              <Card title={
                <div> {config && config.MenuName} </div>
              } bordered={false} extra={
                <div>
                  <Button className="mk-border-purple" onClick={() => this.setState({eyeopen: !eyeopen})}>{!eyeopen ? <EyeOutlined /> : <EyeInvisibleOutlined />} 组件名</Button>
                  <Versions MenuId={MenuId} open_edition={config ? config.open_edition : ''} updateConfig={this.refreshConfig}/>
                  <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/>
                  <StyleCombControlButton menu={config} />

 src/menu/popview/index.scss

@@ -1,6 +1,16 @@
.pc-poper-view {
  background: #000;
  min-height: 100vh;

  .eye-open {
    .component-name {
      display: block;
    }
    .anticon-tool {
      display: none;
    }
  }
  
  >.menu-body {
    width: 100vw;
    height: 100vh;

 src/menu/stylecontroller/index.jsx

@@ -149,7 +149,13 @@
  changeFontSize = (val) => {
    let value = parseInt(val)

    if (isNaN(value) || value < 12 || value > 100) return
    if (isNaN(value)) return

    if (value < 12) {
      value = 12
    } else if (value > 300) {
      value = 300
    }

    this.updateStyle({fontSize: `${value}px`})
  }
@@ -512,6 +518,41 @@
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('font1') ? <Panel header="字体" key="font1">
                <Col span={12}>
                  <Form.Item colon={false} label={<FontSizeOutlined title="字体大小"/>}>
                    <InputNumber defaultValue={card.fontSize || 14} min={12} max={300} precision={0} onChange={this.changeFontSize} />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item colon={false} label={<BoldOutlined title="字体粗细"/>}>
                    <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}>
                      <Option value="normal">normal</Option>
                      <Option value="bold">bold</Option>
                      <Option value="bolder">bolder</Option>
                      <Option value="lighter">lighter</Option>
                      <Option value="100">100</Option>
                      <Option value="200">200</Option>
                      <Option value="300">300</Option>
                      <Option value="400">400</Option>
                      <Option value="500">500</Option>
                      <Option value="600">600</Option>
                      <Option value="700">700</Option>
                      <Option value="800">800</Option>
                      <Option value="900">900</Option>
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    colon={false}
                    label={<FontColorsOutlined title="字体颜色"/>}
                    labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                  >
                    <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} />
                  </Form.Item>
                </Col>
              </Panel> : null}
              {options.includes('background') || options.includes('backgroundColor') ? <Panel header="背景" key="background">
                <Col span={24}>
                  <Form.Item

 src/mob/components/menubar/common-menubar/index.jsx

@@ -182,6 +182,7 @@
            </div>
          </Col>
        </div>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/mob/components/menubar/normal-menubar/index.jsx

@@ -299,6 +299,7 @@
        <div className={(card.wrap.layout || 'grid') + '-layout'}>
          {card.subMenus.map((menu, index) => (<MenuComponent key={menu.uuid} cards={card} card={menu} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))}
        </div>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/mob/components/search/single-search/index.jsx

@@ -152,6 +152,7 @@
        } trigger="hover">
          <ToolOutlined />
        </Popover>
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

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

@@ -188,6 +188,7 @@
          <ToolOutlined />
        </Popover>
        <LoginForm loginWays={card.loginWays} wrap={card.wrap} />
        <div className="component-name"><div className="center">{card.name}</div></div>
      </div>
    )
  }

 src/tabviews/custom/components/card/cardcellList/index.jsx

@@ -361,8 +361,6 @@
        _style.cursor = 'pointer'
      }
  
      if (!card.link)

      if (card.bgImage && data[card.bgImage]) {
        _style.backgroundImage = `url('${data[card.bgImage]}')`
      }

 src/tabviews/custom/components/share/normalTable/index.jsx

@@ -485,12 +485,12 @@
      return uuid.join('')
    }) ()

    if (setting.borderColor) { // 边框颜色
      let style = `#${tableId} table, #${tableId} tr, #${tableId} th, #${tableId} td {border-color: ${setting.borderColor}}`
      let ele = document.createElement('style')
      ele.innerHTML = style
      document.getElementsByTagName('head')[0].appendChild(ele)
    }
    // if (setting.borderColor) { // 边框颜色
    //   let style = `#${tableId} table, #${tableId} tr, #${tableId} th, #${tableId} td {border-color: ${setting.borderColor}}`
    //   let ele = document.createElement('style')
    //   ele.innerHTML = style
    //   document.getElementsByTagName('head')[0].appendChild(ele)
    // }

    let size = (setting.pageSize || 10) + ''
    let pageOptions = ['10', '25', '50', '100', '500', '1000']
@@ -507,6 +507,12 @@
      rowspans,
      tableId,
      orderfields
    }, () => {
      const element = document.getElementById(tableId)
      element && element.style.setProperty('--mk-table-border-color', setting.borderColor || '#e8e8e8')
      element && element.style.setProperty('--mk-table-color', setting.color || 'rgba(0, 0, 0, 0.65)')
      element && element.style.setProperty('--mk-table-font-size', setting.fontSize || '14px')
      element && element.style.setProperty('--mk-table-font-weight', setting.fontWeight || 'normal')
    })
  }

@@ -897,7 +903,7 @@
        }
        <Table
          components={components}
          style={setting.style}
          // style={setting.style}
          size={setting.size || 'middle'}
          bordered={setting.bordered !== 'false'}
          rowSelection={rowSelection}

 src/tabviews/custom/components/share/normalTable/index.scss

@@ -1,6 +1,10 @@
.normal-custom-table {
  position: relative;
  padding: 0px;
  --mk-table-border-color: #e8e8e8;
  --mk-table-color: rgba(0, 0, 0, 0.65);
  --mk-table-font-size: 14px;
  --mk-table-font-weight: normal;

  .normal-table-footer {
    padding: 10px 0px;
@@ -188,6 +192,26 @@
      display: block;
    }
  }

  table, tr, th, td {
    border-color: var(--mk-table-border-color)!important;
  }
  table tr {
    th .ant-table-column-title {
      // color: var(--mk-table-color)!important;
      font-size: var(--mk-table-font-size)!important;
      font-weight: var(--mk-table-font-weight)!important;
    }
    td {
      color: var(--mk-table-color)!important;
      font-size: var(--mk-table-font-size)!important;
      font-weight: var(--mk-table-font-weight)!important;

      >span, div:not(.card-cell-list), div:not(.card-cell-list) div, div:not(.card-cell-list) span {
        font-weight: var(--mk-table-font-weight)!important;
      }
    }
  }
}
.normal-custom-table:not(.fixed-height) {
  .ant-table-body::-webkit-scrollbar {

 src/tabviews/custom/components/table/edit-table/index.jsx

@@ -54,7 +54,7 @@
    const { BID, BData } = this.props
    let _config = fromJS(this.props.config).toJS()
    let _cols = new Map()
    let setting = {..._config.setting, ..._config.wrap, style: {}}
    let setting = {..._config.setting, ..._config.wrap}
    setting.tableId = Utils.getuuid()

    _config.submit.style = _config.submit.style || {}
@@ -132,12 +132,12 @@
      }
    }

    if (setting.color) {
      setting.style.color = setting.color
    }
    if (setting.fontSize) {
      setting.style.fontSize = setting.fontSize
    }
    // if (setting.color) {
    //   setting.style.color = setting.color
    // }
    // if (setting.fontSize) {
    //   setting.style.fontSize = setting.fontSize
    // }

    if (!_config.lineMarks || _config.lineMarks.length === 0) {
      _config.lineMarks = null

 src/tabviews/custom/components/table/edit-table/normalTable/index.jsx

@@ -963,12 +963,12 @@
      })
    }

    if (setting.borderColor) { // 边框颜色
      let style = `#${setting.tableId} table, #${setting.tableId} tr, #${setting.tableId} th, #${setting.tableId} td {border-color: ${setting.borderColor}}`
      let ele = document.createElement('style')
      ele.innerHTML = style
      document.getElementsByTagName('head')[0].appendChild(ele)
    }
    // if (setting.borderColor) { // 边框颜色
    //   let style = `#${setting.tableId} table, #${setting.tableId} tr, #${setting.tableId} th, #${setting.tableId} td {border-color: ${setting.borderColor}}`
    //   let ele = document.createElement('style')
    //   ele.innerHTML = style
    //   document.getElementsByTagName('head')[0].appendChild(ele)
    // }

    let size = (setting.pageSize || 10) + ''
    let pageOptions = ['10', '25', '50', '100', '500', '1000']
@@ -991,6 +991,12 @@
      if (deForms.length > 0) {
        this.improveActionForm(deForms)
      }

      const element = document.getElementById(setting.tableId)
      element && element.style.setProperty('--mk-table-border-color', setting.borderColor || '#e8e8e8')
      element && element.style.setProperty('--mk-table-color', setting.color || 'rgba(0, 0, 0, 0.65)')
      element && element.style.setProperty('--mk-table-font-size', setting.fontSize || '14px')
      element && element.style.setProperty('--mk-table-font-weight', setting.fontWeight || 'normal')
    })
  }

@@ -1963,7 +1969,7 @@
          <Table
            rowKey="$$uuid"
            components={components}
            style={setting.style}
            // style={setting.style}
            size={setting.size || 'middle'}
            bordered={setting.bordered !== 'false'}
            rowSelection={rowSelection}

 src/tabviews/custom/components/table/edit-table/normalTable/index.scss

@@ -2,6 +2,10 @@
  position: relative;
  min-height: 150px;
  padding: 0px;
  --mk-table-border-color: #e8e8e8;
  --mk-table-color: rgba(0, 0, 0, 0.65);
  --mk-table-font-size: 14px;
  --mk-table-font-weight: normal;

  .normal-table-footer {
    padding: 10px 0px;
@@ -24,6 +28,7 @@
    bottom: 2px;
    right: 5px;
    opacity: 0.7;
    font-size: 14px;
  }

  table {
@@ -290,6 +295,26 @@
    margin-top: 10px!important;
    margin-right: 10px!important;
  }

  table, tr, th, td {
    border-color: var(--mk-table-border-color)!important;
  }
  table tr {
    th .ant-table-column-title, th .ant-table-column-title span:not(.anticon) {
      // color: var(--mk-table-color)!important;
      font-size: var(--mk-table-font-size)!important;
      font-weight: var(--mk-table-font-weight)!important;
    }
    td {
      color: var(--mk-table-color)!important;
      font-size: var(--mk-table-font-size)!important;
      font-weight: var(--mk-table-font-weight)!important;

      >span, div:not(.card-cell-list), div:not(.card-cell-list) div, div:not(.card-cell-list) span {
        font-weight: var(--mk-table-font-weight)!important;
      }
    }
  }
}
.edit-custom-table.buoyMode {
  .ant-table-scroll {

 src/tabviews/custom/components/table/normal-table/index.jsx

@@ -67,7 +67,7 @@
      }
    }

    let setting = {..._config.setting, ..._config.wrap, style: {}}
    let setting = {..._config.setting, ..._config.wrap}

    if (setting.selected !== 'always' && setting.selected !== 'init') {
      setting.selected = 'false'
@@ -129,12 +129,12 @@
      }
    })

    if (setting.color) {
      setting.style.color = setting.color
    }
    if (setting.fontSize) {
      setting.style.fontSize = setting.fontSize
    }
    // if (setting.color) {
    //   setting.style.color = setting.color
    // }
    // if (setting.fontSize) {
    //   setting.style.fontSize = setting.fontSize
    // }

    if (_config.wrap.collapse === 'true') {
      _config.wrap.title = _config.wrap.title || ' '

 src/views/menudesign/index.jsx

@@ -4,7 +4,7 @@
import moment from 'moment'
import HTML5Backend from 'react-dnd-html5-backend'
import { ConfigProvider, notification, Modal, Collapse, Card, Switch, Button, Typography } from 'antd'
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons'
import { DoubleLeftOutlined, DoubleRightOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'
import html2canvas from 'html2canvas'

import Api from '@/api'
@@ -74,7 +74,8 @@
    visible: false,
    customComponents: [],
    comloading: false,
    settingshow: !['linkage_navigation', 'linkage', 'menu_board', 'menu_board_navigation'].includes(window.GLOB.navBar)
    settingshow: true,
    eyeopen: false
  }

  UNSAFE_componentWillMount() {
@@ -399,9 +400,7 @@
          config = null
        }

        let _settingshow = this.state.settingshow
        if (!config) {
          _settingshow = true
          config = {
            version: 1.0,
            uuid: MenuId,
@@ -446,7 +445,6 @@
        window.GLOB.urlFields = config.urlFields || []

        this.setState({
          settingshow: _settingshow,
          oriConfig: config,
          config: fromJS(config).toJS()
        })
@@ -1102,7 +1100,7 @@
  }

  render () {
    const { activeKey, comloading, MenuType, popBtn, visible, dict, MenuId, config, settingshow, ParentId, MenuName, MenuNo, menuloading, customComponents } = this.state
    const { activeKey, comloading, MenuType, popBtn, visible, dict, MenuId, config, settingshow, ParentId, MenuName, MenuNo, menuloading, customComponents, eyeopen } = this.state

    return (
      <ConfigProvider locale={_locale}>
@@ -1160,11 +1158,12 @@
                  </Panel>
                </Collapse>
              </div>
              <div className={'menu-view ' + (menuloading ? 'saving' : '')}>
              <div className={'menu-view' + (menuloading ? ' saving' : '') + (eyeopen ? ' eye-open' : '')}>
                <Card title={
                  <div style={{paddingLeft: '15px'}}> {config && config.MenuName} </div>
                } bordered={false} extra={
                  <div>
                    <Button className="mk-border-purple" onClick={() => this.setState({eyeopen: !eyeopen})}>{!eyeopen ? <EyeOutlined /> : <EyeInvisibleOutlined />} 组件名</Button>
                    <Versions MenuId={MenuId} open_edition={config ? config.open_edition : ''}/>
                    <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/>
                    <SysInterface config={config} updateConfig={this.updateConfig}/>

 src/views/menudesign/index.scss

@@ -10,21 +10,33 @@
      text-decoration: line-through!important;
    }
  }
  // .component-name {
  //   position: absolute;
  //   z-index: 10;
  //   left: 0;
  //   right: 0;
  //   top: 0;
  //   bottom: 0;
  //   background: rgba(255, 255, 255, 0.8);
  //   .center {
  //     position: absolute;
  //     left: 50%;
  //     top: 50%;
  //     transform: translate(-50%, -50%);
  //   }
  // }
  .eye-open {
    .component-name {
      display: block;
    }
    .anticon-tool {
      display: none;
    }
  }
  .component-name {
    position: absolute;
    z-index: 9;
    display: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #1890ff;
    .center {
      position: absolute;
      font-size: 16px;
      left: 50%;
      top: 50%;
      color: #1890ff;
      transform: translate(-50%, -50%);
    }
  }
  >.menu-body {
    width: 100vw;
    height: 100vh;

 src/views/mobdesign/index.jsx

@@ -6,7 +6,7 @@
import moment from 'moment'
import HTML5Backend from 'react-dnd-html5-backend'
import { ConfigProvider, notification, Modal, Collapse, Switch, Button, message, Spin, Typography } from 'antd'
import { DoubleLeftOutlined, DoubleRightOutlined, HomeOutlined, LoginOutlined, RedoOutlined, ArrowLeftOutlined } from '@ant-design/icons'
import { DoubleLeftOutlined, DoubleRightOutlined, HomeOutlined, LoginOutlined, RedoOutlined, ArrowLeftOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'

import Api from '@/api'
import Utils, { setGLOBFuncs } from '@/utils/utils.js'
@@ -74,7 +74,8 @@
    controlshow: true,
    comloading: false,
    adapters: [],
    viewType: 'menu'
    viewType: 'menu',
    eyeopen: false
  }

  UNSAFE_componentWillMount() {
@@ -1899,7 +1900,7 @@


  render () {
    const { viewType, localedict, comloading, loading, settingshow, controlshow, activeKey, dict, MenuId, config, menuloading, customComponents, adapters } = this.state
    const { viewType, localedict, comloading, loading, settingshow, controlshow, activeKey, dict, MenuId, config, menuloading, customComponents, adapters, eyeopen } = this.state

    return (
      <ConfigProvider locale={localedict}>
@@ -1942,7 +1943,7 @@
                </Collapse>
              </div>
            </div>
            <div className={'menu-control ' + (!controlshow ? 'hidden' : '')}>
            <div className={'menu-control' + (!controlshow ? ' hidden' : '')}>
              <div className="draw">
                {controlshow ? <DoubleRightOutlined onClick={() => {this.setState({controlshow: false})}}/> : null}
                {!controlshow ? <DoubleLeftOutlined onClick={() => {this.setState({controlshow: true})}}/> : null}
@@ -1951,6 +1952,7 @@
                <Button type="primary" onClick={this.submitConfig} id="save-config" loading={menuloading}>{dict['mob.save']}</Button>
                <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config && config.enabled} onChange={this.onEnabledChange} />
                <ArrowLeftOutlined title="后退" className="back-view" onClick={this.backView}/>
                <Button className="mk-border-purple" onClick={() => this.setState({eyeopen: !eyeopen})}>{!eyeopen ? <EyeOutlined /> : <EyeInvisibleOutlined />} 组件名</Button>
                <CreateView resetmenu={this.getAppMenus} />
                <PasteController insert={this.insert} />
                <ViewNodes config={config} MenuId={MenuId}/>
@@ -1967,7 +1969,7 @@
                <Button type="default" onClick={this.closeView}>关闭</Button>
              </div>
            </div>
            <div className={'menu-body menu-view' + (menuloading ? 'saving' : '')}>
            <div className={'menu-body menu-view' + (menuloading ? ' saving' : '') + (eyeopen ? ' eye-open' : '')}>
              {config && !comloading ? <div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}>
                <MobShell menu={config} handleList={this.updateConfig} />
              </div> : null}

 src/views/mobdesign/index.scss

@@ -1,6 +1,34 @@
.mk-mob-view {
  min-height: 100vh;

  .eye-open {
    .component-name {
      display: block;
    }
    .anticon-tool {
      display: none;
    }
  }
  .component-name {
    position: absolute;
    z-index: 9;
    display: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #1890ff;
    .center {
      position: absolute;
      font-size: 16px;
      left: 50%;
      top: 50%;
      color: #1890ff;
      transform: translate(-50%, -50%);
    }
  }

  .mk-hidden {
    text-decoration: line-through!important;
    span {

 src/views/pcdesign/index.jsx

@@ -6,7 +6,7 @@
import moment from 'moment'
import HTML5Backend from 'react-dnd-html5-backend'
import { ConfigProvider, notification, Modal, Collapse, Switch, Button, message, Spin, Typography } from 'antd'
import { DoubleLeftOutlined, DoubleRightOutlined, HomeOutlined, LoginOutlined, RedoOutlined, ArrowLeftOutlined } from '@ant-design/icons'
import { DoubleLeftOutlined, DoubleRightOutlined, HomeOutlined, LoginOutlined, RedoOutlined, ArrowLeftOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'

import Api from '@/api'
import Utils, { setGLOBFuncs } from '@/utils/utils.js'
@@ -76,7 +76,8 @@
    customComponents: [],
    settingshow: sessionStorage.getItem('settingshow') !== 'false',
    controlshow: sessionStorage.getItem('controlshow') !== 'false',
    comloading: false
    comloading: false,
    eyeopen: false
  }

  UNSAFE_componentWillMount() {
@@ -1898,7 +1899,7 @@
  }

  render () {
    const { localedict, loading, visible, popBtn, comloading, activeKey, settingshow, controlshow, dict, MenuId, config, menuloading, customComponents } = this.state
    const { localedict, loading, visible, popBtn, comloading, activeKey, settingshow, controlshow, dict, MenuId, config, menuloading, customComponents, eyeopen } = this.state

    return (
      <ConfigProvider locale={localedict}>
@@ -1948,6 +1949,7 @@
                <Button type="primary" id="save-config" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button>
                <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config && config.enabled} onChange={this.onEnabledChange} />
                <ArrowLeftOutlined title="后退" className="back-view" onClick={this.backView}/>
                <Button className="mk-border-purple" onClick={() => this.setState({eyeopen: !eyeopen})}>{!eyeopen ? <EyeOutlined /> : <EyeInvisibleOutlined />} 组件名</Button>
                <CreateView resetmenu={this.getAppMenus} />
                <PasteController insert={this.insert} />
                <ViewNodes config={config} MenuId={MenuId}/>
@@ -1964,7 +1966,7 @@
                <Button type="default" onClick={this.closeView}>关闭</Button>
              </div>
            </div>
            <div className={'menu-body menu-view' + (menuloading ? 'saving' : '')}>
            <div className={'menu-body menu-view' + (menuloading ? ' saving' : '') + (eyeopen ? ' eye-open' : '')}>
              {config && !comloading ? <MenuShell menu={config} handleList={this.updateConfig} /> : null}
            </div>
          </DndProvider> : null}

 src/views/pcdesign/index.scss

@@ -5,6 +5,34 @@
  background: #000;
  min-height: 100vh;

  .eye-open {
    .component-name {
      display: block;
    }
    .anticon-tool {
      display: none;
    }
  }
  .component-name {
    position: absolute;
    z-index: 9;
    display: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #1890ff;
    .center {
      position: absolute;
      font-size: 16px;
      left: 50%;
      top: 50%;
      color: #1890ff;
      transform: translate(-50%, -50%);
    }
  }

  .mk-hidden {
    text-decoration: line-through!important;
    span {