From d62c168d0656fac4242581609c3c5c0d88cf6a48 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 29 一月 2021 18:03:47 +0800
Subject: [PATCH] 2021-01-29

---
 src/menu/bgcontroller/index.scss                                 |    6 
 src/menu/modulesource/index.scss                                 |    0 
 src/menu/picturecontroller/index.jsx                             |  119 +++
 src/menu/components/card/cardcellcomponent/elementform/index.jsx |   37 -
 src/menu/picturecontroller/index.scss                            |   23 
 src/menu/components/share/sourcecomponent/popsource/index.jsx    |  131 ++++
 src/menu/modulesource/dragsource/index.jsx                       |    0 
 src/menu/stylecontroller/index.scss                              |   12 
 src/api/index.js                                                 |    3 
 src/menu/components/share/sourcecomponent/index.scss             |   41 +
 src/tabviews/zshare/actionList/normalbutton/index.jsx            |    3 
 src/menu/bgcontroller/index.jsx                                  |   51 -
 src/menu/picturecontroller/video/index.scss                      |  999 -----------------------------------
 src/views/menudesign/index.jsx                                   |    8 
 src/menu/modulesource/option.jsx                                 |    0 
 src/utils/utils.js                                               |    8 
 src/menu/stylecontroller/index.jsx                               |   50 -
 src/menu/components/share/sourcecomponent/index.jsx              |   62 ++
 src/menu/components/share/sourcecomponent/popsource/index.scss   |   49 +
 src/menu/modulesource/dragsource/index.scss                      |    0 
 src/menu/components/card/cardcellcomponent/formconfig.jsx        |   11 
 src/menu/picturecontroller/video/index.jsx                       |   18 
 src/menu/picturecontroller/editform/index.jsx                    |    4 
 src/menu/popview/index.jsx                                       |    2 
 src/components/Image/index.jsx                                   |    6 
 src/menu/modulesource/index.jsx                                  |    0 
 26 files changed, 490 insertions(+), 1,153 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index e260816..a5350e0 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -133,7 +133,8 @@
       params.data = param
     }
 
-    _url = window.btoa(_url)
+    _url = _url.replace(/&/ig, '%26')
+    // _url = window.btoa(_url)
     params.url = '/trans/redirect?rd=' + _url + '&method=' + method
 
     return axios(params)
diff --git a/src/components/Image/index.jsx b/src/components/Image/index.jsx
index e2a7989..01bd23e 100644
--- a/src/components/Image/index.jsx
+++ b/src/components/Image/index.jsx
@@ -26,7 +26,11 @@
 
     let ratio = (width / height) / (clientWidth / clientHeight)
 
-    if (ratio > 1) {
+    if (ratio > 1.5) {
+      let _height = Math.floor(height * (clientWidth / width))
+      this.ImageDom.style.height = 'auto'
+      this.ImageDom.style.top = ((clientHeight - _height) / 2) + 'px'
+    } else if (ratio > 1 && ratio < 1.5) {
       let _width = Math.floor(width / (height / clientHeight))
       this.ImageDom.style.width = _width + 'px'
       this.ImageDom.style.left = '-' + ((_width - clientWidth) / 2) + 'px'
diff --git a/src/menu/bgcontroller/index.jsx b/src/menu/bgcontroller/index.jsx
index bb8b043..ab2155c 100644
--- a/src/menu/bgcontroller/index.jsx
+++ b/src/menu/bgcontroller/index.jsx
@@ -1,13 +1,15 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import { is, fromJS } from 'immutable'
-import { Form, Input } from 'antd'
+import { Form } from 'antd'
 
 import zhCN from '@/locales/zh-CN/mob.js'
 import enUS from '@/locales/en-US/mob.js'
-import ColorSketch from '@/mob/colorsketch'
-import FileUpload from '@/tabviews/zshare/fileupload'
+import asyncComponent from '@/utils/asyncComponent'
 import './index.scss'
+
+const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
+const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
 
 class MobController extends Component {
   static propTpyes = {
@@ -19,7 +21,6 @@
     dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
     backgroundColor: '',
     backgroundImage: '',
-    bgimages: [],
   }
 
   UNSAFE_componentWillMount () {
@@ -27,10 +28,7 @@
 
     let bgImg = config.style.backgroundImage || ''
 
-    if (bgImg && /^linear-gradient/.test(bgImg)) {
-      bgImg = bgImg.replace('linear-gradient(', '')
-      bgImg = bgImg.replace(')', '')
-    } else if (bgImg && /^url/.test(bgImg)) {
+    if (bgImg && /^url/.test(bgImg)) {
       bgImg = bgImg.replace('url(', '')
       bgImg = bgImg.replace(')', '')
     }
@@ -59,45 +57,23 @@
     this.props.updateConfig(config)
   }
 
-  /**
-   * @description 鎵嬪姩淇敼璺緞
-   */
-  changeImage = (e) => {
-    let val = e.target.value
+  imgChange = (val) => {
     this.setState({
       backgroundImage: val
     })
 
     let config = fromJS(this.props.config).toJS()
-    val = val.replace(/^\s*|\s*$/ig, '')
 
-    if (/^http|^\/\//.test(val)) {
-      val = `url(${val})`
-    } else if (/,/ig.test(val) && !/^(radial-gradient|linear-gradient)/ig.test(val)) {
-      val = `linear-gradient(${val})`
+    if (val) {
+      config.style.backgroundImage = `url(${val})`
+    } else {
+      delete config.style.backgroundImage
     }
-
-    config.style.backgroundImage = val
     this.props.updateConfig(config)
   }
 
-  imgChange = (list) => {
-    if (list[0] && list[0].response) {
-      this.setState({
-        bgimages: [],
-        backgroundImage: list[0].response
-      })
-
-      let config = fromJS(this.props.config).toJS()
-      config.style.backgroundImage = `url(${list[0].response})`
-      this.props.updateConfig(config)
-    } else {
-      this.setState({bgimages: list})
-    }
-  }
-
   render () {
-    const { backgroundColor, backgroundImage, bgimages } = this.state
+    const { backgroundColor, backgroundImage } = this.state
     const formItemLayout = {
       labelCol: {
         xs: { span: 24 },
@@ -116,8 +92,7 @@
             <ColorSketch value={backgroundColor} onChange={this.changeBackgroundColor} />
           </Form.Item>
           <Form.Item colon={false} label="鍥剧墖">
-            <FileUpload accept=".jpg,.png,.gif,.svg" value={bgimages} maxFile={2} fileType="text" onChange={this.imgChange}/>
-            <Input placeholder="" value={backgroundImage} autoComplete="off" onChange={this.changeImage}/>
+            <SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/>
           </Form.Item>
         </Form>
       </div>
diff --git a/src/menu/bgcontroller/index.scss b/src/menu/bgcontroller/index.scss
index cccd02f..0d6ed73 100644
--- a/src/menu/bgcontroller/index.scss
+++ b/src/menu/bgcontroller/index.scss
@@ -6,6 +6,12 @@
     padding-top: 10px;
     line-height: 35px;
   }
+  .mk-source-wrap {
+    height: 32px;
+    .mk-source-item-info {
+      top: 5px;
+    }
+  }
 }
 
 .margin-popover {
diff --git a/src/menu/components/card/cardcellcomponent/elementform/index.jsx b/src/menu/components/card/cardcellcomponent/elementform/index.jsx
index 4f1819e..7ffdfb7 100644
--- a/src/menu/components/card/cardcellcomponent/elementform/index.jsx
+++ b/src/menu/components/card/cardcellcomponent/elementform/index.jsx
@@ -4,16 +4,18 @@
 import { Form, Row, Col, Input, Select, Icon, Radio, Tooltip, InputNumber, notification } from 'antd'
 
 import { formRule } from '@/utils/option.js'
-import FileUpload from '@/tabviews/zshare/fileupload'
-import ColorSketch from '@/mob/colorsketch'
+import asyncComponent from '@/utils/asyncComponent'
 import './index.scss'
+
+const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
+const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
 
 const cardTypeOptions = {
   sequence: ['eleType', 'width'],
   text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link'],
   number: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix'],
   picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'link'],
-  video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay'],
+  video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop'],
   icon: ['eleType', 'icon', 'datatype', 'width'],
   slider: ['eleType', 'datatype', 'width', 'color', 'maxValue'],
   splitline: ['eleType', 'color', 'width', 'borderWidth'],
@@ -356,22 +358,11 @@
           </Col>
         )
       } else if (item.type === 'file') {
-        let filelist = []
-        if (item.initVal) {
-          filelist = [{
-            uid: `1`,
-            name: item.initVal.slice(item.initVal.lastIndexOf('/') + 1),
-            status: 'done',
-            url: item.initVal,
-            origin: true
-          }]
-        }
-
         fields.push(
           <Col span={12} key={index}>
             <Form.Item label={item.label}>
               {getFieldDecorator(item.key, {
-                initialValue: filelist,
+                initialValue: item.initVal,
                 rules: [
                   {
                     required: !!item.required,
@@ -379,7 +370,7 @@
                   }
                 ]
               })(
-                <FileUpload accept=".jpg,.png,.gif,.pjp,.pjpeg,.jpeg,.jfif,.webp,.mp4,.webm,.ogg" maxFile={item.maxfile} fileType={'text'} />
+                <SourceComponent type={this.state.eleType} />
               )}
             </Form.Item>
           </Col>
@@ -396,20 +387,6 @@
         if (!err) {
           values.uuid = this.props.card.uuid
           values.marks = this.props.card.marks || null
-
-          if (values.url) {
-            if (values.url.length > 0) {
-              if (values.url[0].origin && values.url[0].url) {
-                values.url = values.url[0].url
-              } else if (!values.url[0].origin && values.url[0].status === 'done' && values.url[0].response) {
-                values.url = values.url[0].response
-              } else {
-                values.url = ''
-              }
-            } else {
-              values.url = ''
-            }
-          }
 
           if (values.eleType === 'picture' && values.datatype === 'static' && !values.url) {
             notification.warning({
diff --git a/src/menu/components/card/cardcellcomponent/formconfig.jsx b/src/menu/components/card/cardcellcomponent/formconfig.jsx
index 39b0ab3..189bab3 100644
--- a/src/menu/components/card/cardcellcomponent/formconfig.jsx
+++ b/src/menu/components/card/cardcellcomponent/formconfig.jsx
@@ -124,6 +124,17 @@
     },
     {
       type: 'radio',
+      key: 'loop',
+      label: '寰幆鎾斁',
+      initVal: card.loop || 'false',
+      required: false,
+      options: [
+        { value: 'true', text: '鏄�' },
+        { value: 'false', text: '鍚�' }
+      ]
+    },
+    {
+      type: 'radio',
       key: 'link',
       label: '閾炬帴',
       initVal: card.link || '',
diff --git a/src/menu/components/share/sourcecomponent/index.jsx b/src/menu/components/share/sourcecomponent/index.jsx
new file mode 100644
index 0000000..8f1f40c
--- /dev/null
+++ b/src/menu/components/share/sourcecomponent/index.jsx
@@ -0,0 +1,62 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { is, fromJS } from 'immutable'
+import { Popover, Button, Icon } from 'antd'
+
+import PopSource from './popsource'
+import './index.scss'
+
+class CopyComponent extends Component {
+  static propTpyes = {
+    type: PropTypes.string,
+    placement: PropTypes.any,
+    onChange: PropTypes.func
+  }
+
+  state = {
+    url: this.props.value
+  }
+
+  UNSAFE_componentWillMount () {
+
+  }
+
+  shouldComponentUpdate (nextProps, nextState) {
+    return !is(fromJS(this.state), fromJS(nextState))
+  }
+
+  deleteUrl = () => {
+    this.setState({url: ''})
+    this.props.onChange('')
+  }
+
+  changePopover = (visible) => {
+    if (!visible && this.SourceWrap.state.url) {
+      this.setState({url: this.SourceWrap.state.url})
+      this.props.onChange(this.SourceWrap.state.url)
+    } else if (visible && this.SourceWrap) {
+      this.SourceWrap.init()
+    }
+  }
+
+  render () {
+    const { url } = this.state
+    const { type, placement } = this.props
+    let name = url ? url.slice(url.lastIndexOf('/') + 1) : ''
+
+    return (
+      <div className="mk-source-wrap">
+        {!url ? <Popover overlayClassName="mk-source-manage" placement={placement || 'top'} content={<PopSource type={type} ref={dom => { this.SourceWrap = dom }} />} trigger="click" onVisibleChange={this.changePopover}>
+          <Button icon="upload">鐐瑰嚮娣诲姞</Button>
+        </Popover> : null}
+        {url ? <div className="mk-source-item-info">
+          <Icon type="paper-clip" />
+          <a target="_blank" rel="noopener noreferrer" href={url}>{name}</a>
+          <Icon title="鍒犻櫎鏂囦欢" type="delete" onClick={this.deleteUrl}/>
+        </div> : null}
+      </div>
+    )
+  }
+}
+
+export default CopyComponent
\ No newline at end of file
diff --git a/src/menu/components/share/sourcecomponent/index.scss b/src/menu/components/share/sourcecomponent/index.scss
new file mode 100644
index 0000000..6a2b87f
--- /dev/null
+++ b/src/menu/components/share/sourcecomponent/index.scss
@@ -0,0 +1,41 @@
+.mk-source-wrap {
+  .mk-source-item-info {
+    position: relative;
+    line-height: 1.3;
+    top: 3px;
+    .anticon-paper-clip {
+      position: absolute;
+      top: 3px;
+      color: rgba(0,0,0,.45);
+      font-size: 14px;
+    }
+    .anticon-delete {
+      position: absolute;
+      top: 3px;
+      right: 0px;
+      padding-right: 6px;
+      color: rgba(0,0,0,.45);
+      cursor: pointer;
+      display: none;
+    }
+    a {
+      display: inline-block;
+      width: 100%;
+      padding-left: 22px;
+      padding-right: 14px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+  .mk-source-item-info:hover {
+    background-color: #e6f7ff;
+    .anticon-delete {
+      display: inline-block;
+    }
+  }
+}
+
+.mk-source-manage {
+  z-index: 1170 !important;
+}
diff --git a/src/menu/components/share/sourcecomponent/popsource/index.jsx b/src/menu/components/share/sourcecomponent/popsource/index.jsx
new file mode 100644
index 0000000..812da24
--- /dev/null
+++ b/src/menu/components/share/sourcecomponent/popsource/index.jsx
@@ -0,0 +1,131 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import { is, fromJS } from 'immutable'
+import { Input, Form, Row, Col, Pagination } from 'antd'
+
+import asyncComponent from '@/utils/asyncComponent'
+import './index.scss'
+
+const { TextArea } = Input
+const { Search } = Input
+const FileUpload = asyncComponent(() => import('@/tabviews/zshare/fileupload'))
+const Video = asyncComponent(() => import('@/menu/picturecontroller/video'))
+const Image = asyncComponent(() => import('@/components/Image'))
+
+class PopSource extends Component {
+  static propTpyes = {
+    btnlog: PropTypes.array,
+    handlelog: PropTypes.func
+  }
+
+  state = {
+    url: '',
+    originlist: [],
+    list: [],
+    pagelist: [],
+    fileList: [],
+    searchKey: '',
+    pageSize: 12,
+    pageIndex: 1
+  }
+
+  UNSAFE_componentWillMount () {
+    this.init()
+  }
+
+  shouldComponentUpdate (nextProps, nextState) {
+    return !is(fromJS(this.state), fromJS(nextState))
+  }
+
+  init = () => {
+    const { type } = this.props
+
+    let originlist = []
+    if (type === 'video') {
+      let videos = sessionStorage.getItem('app_videos')
+      try {
+        originlist = JSON.parse(videos)
+      } catch {
+        originlist = []
+      }
+    } else {
+      let pictures = sessionStorage.getItem('app_pictures')
+      try {
+        originlist = JSON.parse(pictures)
+      } catch {
+        originlist = []
+      }
+    }
+
+    let list = originlist
+    let pagelist = list.filter((item, index) => index < this.state.pageSize)
+
+    this.setState({originlist, list, url: '', searchKey: '', pageIndex: 1, fileList: [], pagelist})
+  }
+
+  changeSearch = () => {
+    const { originlist, pageSize, searchKey } = this.state
+    let list = originlist.filter(item => item.remark.indexOf(searchKey) > -1)
+    let pagelist = list.filter((item, index) => index < pageSize)
+
+    this.setState({list, pagelist, pageIndex: 1})
+  }
+
+  changeValue = (e) => {
+    this.setState({url: e.target.value})
+  }
+
+  changeSize = (page) => {
+    const { list, pageSize } = this.state
+    let pagelist = list.filter((item, index) => index < pageSize * page && index >= pageSize * (page - 1))
+    this.setState({pageIndex: page, pagelist})
+  }
+
+  changeFile = (vals) => {
+    this.setState({fileList: vals})
+
+    if (vals && vals[0] && vals[0].status === 'done' && vals[0].response) {
+      this.setState({url: vals[0].response})
+    }
+  }
+
+  selectItem = (item) => {
+    if (item.linkurl) {
+      this.setState({url: item.linkurl})
+    }
+  }
+
+  render () {
+    const { type } = this.props
+    const { list, url, pagelist, fileList, searchKey, pageIndex, pageSize } = this.state
+
+    return (
+      <div className="mk-source-pop-wrap">
+        <Form.Item label="鍦板潃" labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={{xs: { span: 24 }, sm: { span: 21 }}}>
+          <TextArea value={url} rows={2} onChange={this.changeValue}/>
+        </Form.Item>
+        <Form.Item label="涓婁紶" labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={{xs: { span: 24 }, sm: { span: 21 }}}>
+          <FileUpload value={fileList} onChange={this.changeFile} accept={type === 'video' ? '.mp4,.webm,.ogg' : '.jpg,.png,.gif,.pjp,.pjpeg,.jpeg,.jfif,.webp'} maxFile={1} fileType={'text'} />
+        </Form.Item>
+        {list.length ? <Form.Item label="绯荤粺" labelCol={{xs: { span: 24 }, sm: { span: 3 }}} wrapperCol={{xs: { span: 24 }, sm: { span: 21 }}}>
+          <Search value={searchKey} placeholder="" onChange={(e) => this.setState({searchKey: e.target.value})} onSearch={this.changeSearch}/>
+          <Row gutter={10}>
+            {pagelist.map(item => (
+              <Col span={4} key={item.id}>
+                <div className="image-video-box" onClick={() => this.selectItem(item)}>
+                  <div className="image-video-box-body">
+                    {type !== 'video' ? <Image url={item.linkurl} /> : null}
+                    {type === 'video' ? <Video value={item.linkurl} /> : null}
+                  </div>
+                </div>
+              </Col>
+            ))}
+          </Row>
+          {list.length > pageSize ? <Pagination size="small" current={pageIndex} pageSize={pageSize} onChange={this.changeSize} total={list.length} /> : null}
+        </Form.Item> : null}
+      </div>
+    )
+  }
+}
+
+export default PopSource
\ No newline at end of file
diff --git a/src/menu/components/share/sourcecomponent/popsource/index.scss b/src/menu/components/share/sourcecomponent/popsource/index.scss
new file mode 100644
index 0000000..3ff92bd
--- /dev/null
+++ b/src/menu/components/share/sourcecomponent/popsource/index.scss
@@ -0,0 +1,49 @@
+.mk-source-pop-wrap {
+  width: 500px;
+  padding: 15px 10px;
+
+  .image-video-box {
+    position: relative;
+    padding-top: 75%;
+    cursor: pointer;
+    margin-bottom: 10px;
+    .image-video-box-body {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+      .video-react-big-play-button {
+        display: none;
+      }
+      .video-react-control-bar {
+        display: none;
+      }
+    }
+    .image-video-box-body::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+  .fileupload-form-container {
+    display: inline-block;
+    width: 50%;
+  }
+  .ant-input-search {
+    position: absolute;
+    width: 150px;
+    right: 0px;
+    top: -40px;
+    input.ant-input {
+      height: 25px;
+      border-color: #eeeeee;
+    }
+  }
+  .ant-pagination {
+    text-align: right;
+  }
+}
\ No newline at end of file
diff --git a/src/menu/modelsource/dragsource/index.jsx b/src/menu/modulesource/dragsource/index.jsx
similarity index 100%
rename from src/menu/modelsource/dragsource/index.jsx
rename to src/menu/modulesource/dragsource/index.jsx
diff --git a/src/menu/modelsource/dragsource/index.scss b/src/menu/modulesource/dragsource/index.scss
similarity index 100%
rename from src/menu/modelsource/dragsource/index.scss
rename to src/menu/modulesource/dragsource/index.scss
diff --git a/src/menu/modelsource/index.jsx b/src/menu/modulesource/index.jsx
similarity index 100%
rename from src/menu/modelsource/index.jsx
rename to src/menu/modulesource/index.jsx
diff --git a/src/menu/modelsource/index.scss b/src/menu/modulesource/index.scss
similarity index 100%
rename from src/menu/modelsource/index.scss
rename to src/menu/modulesource/index.scss
diff --git a/src/menu/modelsource/option.jsx b/src/menu/modulesource/option.jsx
similarity index 100%
rename from src/menu/modelsource/option.jsx
rename to src/menu/modulesource/option.jsx
diff --git a/src/menu/picturecontroller/editform/index.jsx b/src/menu/picturecontroller/editform/index.jsx
index b764d35..b0671af 100644
--- a/src/menu/picturecontroller/editform/index.jsx
+++ b/src/menu/picturecontroller/editform/index.jsx
@@ -68,11 +68,11 @@
     const formItemLayout = {
       labelCol: {
         xs: { span: 24 },
-        sm: { span: 7 }
+        sm: { span: 5 }
       },
       wrapperCol: {
         xs: { span: 24 },
-        sm: { span: 16 }
+        sm: { span: 18 }
       }
     }
     return (
diff --git a/src/menu/picturecontroller/index.jsx b/src/menu/picturecontroller/index.jsx
index 4582492..12cabfa 100644
--- a/src/menu/picturecontroller/index.jsx
+++ b/src/menu/picturecontroller/index.jsx
@@ -1,6 +1,5 @@
 import React, {Component} from 'react'
-// import { fromJS } from 'immutable'
-import { Modal, Button, Row, Col, Input, Icon, message, Tabs, Empty } from 'antd'
+import { Modal, Button, Row, Col, Input, Icon, message, Tabs, Empty, Pagination } from 'antd'
 
 import Api from '@/api'
 import Utils from '@/utils/utils.js'
@@ -10,7 +9,9 @@
 const { Search } = Input
 const { confirm } = Modal
 const { TabPane } = Tabs
+
 const EditForm = asyncComponent(() => import('./editform'))
+const Video = asyncComponent(() => import('./video'))
 const Image = asyncComponent(() => import('@/components/Image'))
 
 class PasteController extends Component {
@@ -21,12 +22,20 @@
     imageKey: '',
     videoKey: '',
     videos: [],
-    card: null
+    card: null,
+    pageSize: 12,
+    filpictures: [],
+    filvideos: [],
+    piclist: [],
+    vidlist: [],
+    picIndex: 1,
+    vidIndex: 1,
   }
 
   trigger = () => {
     let pictures = sessionStorage.getItem('app_pictures')
     let videos = sessionStorage.getItem('app_videos')
+
     try {
       pictures = JSON.parse(pictures)
       videos = JSON.parse(videos)
@@ -35,7 +44,25 @@
       videos = []
     }
 
-    this.setState({visible: true, pictures, videos})
+    let filpictures = pictures
+    let filvideos = videos
+
+    let piclist = filpictures.filter((item, index) => index < this.state.pageSize)
+    let vidlist = filvideos.filter((item, index) => index < this.state.pageSize)
+
+    this.setState({
+      visible: true,
+      filpictures,
+      filvideos,
+      pictures,
+      picIndex: 1,
+      vidIndex: 1,
+      imageKey: '',
+      videoKey: '',
+      piclist,
+      vidlist,
+      videos
+    })
   }
   
   handleSource = (item) => {
@@ -67,11 +94,12 @@
         if (result.status) {
           if (card.typecharone === 'image') {
             sessionStorage.setItem('app_pictures', JSON.stringify(result.data || []))
-            this.setState({pictures: result.data || [], editvisible: false})
+            this.resetPicture(result.data || [])
           } else {
             sessionStorage.setItem('app_videos', JSON.stringify(result.data || []))
-            this.setState({videos: result.data || [], editvisible: false})
+            this.resetVideo(result.data || [])
           }
+          this.setState({editvisible: false})
         }
       })
     })
@@ -111,10 +139,10 @@
             if (res.status) {
               if (item.typecharone === 'image') {
                 sessionStorage.setItem('app_pictures', JSON.stringify(res.data || []))
-                _this.setState({pictures: res.data || []})
+                _this.resetPicture(res.data || [])
               } else {
                 sessionStorage.setItem('app_videos', JSON.stringify(res.data || []))
-                _this.setState({videos: res.data || []})
+                _this.resetVideo(res.data || [])
               }
             }
             resolve()
@@ -124,12 +152,59 @@
       onCancel() {}
     })
   }
+
+  resetPicture = (data) => {
+    const { imageKey, pageSize } = this.state
+
+    let filpictures = data.filter(item => !imageKey || item.remark.indexOf(imageKey) > -1)
+    let piclist = filpictures.filter((item, index) => index < pageSize)
+
+    this.setState({picIndex: 1, filpictures, piclist, pictures: data})
+  }
+  
+  resetVideo = (data) => {
+    const { videoKey, pageSize } = this.state
+
+    let filvideos = data.filter(item => !videoKey || item.remark.indexOf(videoKey) > -1)
+    let vidlist = filvideos.filter((item, index) => index < pageSize)
+
+    this.setState({vidIndex: 1, filvideos, vidlist, videos: data})
+  }
+
+  filterPicture = () => {
+    const { imageKey, pictures, pageSize } = this.state
+
+    let filpictures = pictures.filter(item => !imageKey || item.remark.indexOf(imageKey) > -1)
+    let piclist = filpictures.filter((item, index) => index < pageSize)
+
+    this.setState({picIndex: 1, filpictures, piclist})
+  }
+  
+  filterVideo = () => {
+    const { videoKey, videos, pageSize } = this.state
+
+    let filvideos = videos.filter(item => !videoKey || item.remark.indexOf(videoKey) > -1)
+    let vidlist = filvideos.filter((item, index) => index < pageSize)
+
+    this.setState({vidIndex: 1, filvideos, vidlist})
+  }
+
+  changePicSize = (page) => {
+    const { filpictures, pageSize } = this.state
+    let piclist = filpictures.filter((item, index) => index < pageSize * page && index >= pageSize * (page - 1))
+
+    this.setState({picIndex: page, piclist})
+  }
+
+  changeVidSize = (page) => {
+    const { filvideos, pageSize } = this.state
+    let vidlist = filvideos.filter((item, index) => index < pageSize * page && index >= pageSize * (page - 1))
+    
+    this.setState({vidIndex: page, vidlist})
+  }
   
   render() {
-    const { visible, editvisible, card, imageKey, videoKey } = this.state
-
-    const pictures = this.state.pictures.filter(item => !imageKey || item.remark.indexOf(imageKey) > -1)
-    const videos = this.state.videos.filter(item => !videoKey || item.remark.indexOf(videoKey) > -1)
+    const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex } = this.state
 
     return (
       <div style={{display: 'inline-block'}}>
@@ -152,7 +227,7 @@
             <TabPane tab="鍥剧墖绠＄悊" key="picture">
               <Row style={{marginBottom: '15px'}}>
                 <Col span={8}>
-                  <Search placeholder="" onSearch={value => this.setState({imageKey: value})} enterButton />
+                  <Search placeholder="" value={imageKey} onChange={(e) => this.setState({imageKey: e.target.value})} onSearch={this.filterPicture} enterButton />
                 </Col>
                 <Col span={16}>
                   <Button className="picture-plus" type="link" icon="plus" onClick={() => this.handleSource({typecharone: 'image'})}>
@@ -160,8 +235,8 @@
                   </Button>
                 </Col>
               </Row>
-              <Row gutter={16}>
-                {pictures.length && pictures.map(item => (
+              <Row gutter={16} style={{height: '340px'}}>
+                {piclist.length && piclist.map(item => (
                   <Col span={4} key={item.id}>
                     <div className="image-video-box">
                       <div className="image-video-box-body">
@@ -176,13 +251,14 @@
                     <p className="image-video-remark">{item.remark}</p>
                   </Col>
                 ))}
-                {!pictures.length ? <Empty description={null}/> : null}
+                {!piclist.length ? <Empty description={null}/> : null}
               </Row>
+              {filpictures.length > pageSize ? <Pagination size="small" current={picIndex} pageSize={pageSize} onChange={this.changePicSize} total={filpictures.length} /> : null}
             </TabPane>
             <TabPane tab="瑙嗛绠＄悊" key="video">
               <Row style={{marginBottom: '15px'}}>
                 <Col span={8}>
-                  <Search placeholder="" onSearch={value => this.setState({videoKey: value})} enterButton />
+                  <Search placeholder="" value={videoKey} onChange={e => this.setState({videoKey: e.target.value})} onSearch={this.filterVideo} enterButton />
                 </Col>
                 <Col span={16}>
                   <Button className="picture-plus" type="link" icon="plus" onClick={() => this.handleSource({typecharone: 'video'})}>
@@ -190,12 +266,12 @@
                   </Button>
                 </Col>
               </Row>
-              <Row gutter={16}>
-                {videos.length && videos.map(item => (
+              <Row gutter={16} style={{height: '340px'}}>
+                {vidlist.length && vidlist.map(item => (
                   <Col span={4} key={item.id}>
                     <div className="image-video-box">
                       <div className="image-video-box-body">
-                        <Image url={item.linkurl} />
+                        <Video value={item.linkurl} />
                       </div>
                       <div className="image-video-control">
                         <Icon type="copy" onClick={() => this.copySource(item)}/>
@@ -206,8 +282,9 @@
                     <p className="image-video-remark">{item.remark}</p>
                   </Col>
                 ))}
-                {!videos.length ? <Empty description={null}/> : null}
+                {!vidlist.length ? <Empty description={null}/> : null}
               </Row>
+              {filvideos.length > pageSize ? <Pagination size="small" current={vidIndex} pageSize={pageSize} onChange={this.changeVidSize} total={filvideos.length} /> : null}
             </TabPane>
           </Tabs>
         </Modal>
diff --git a/src/menu/picturecontroller/index.scss b/src/menu/picturecontroller/index.scss
index 6484f2a..86430f0 100644
--- a/src/menu/picturecontroller/index.scss
+++ b/src/menu/picturecontroller/index.scss
@@ -3,9 +3,13 @@
     top: 60px;
     .ant-modal-body {
       max-height: calc(100vh - 120px);
-      min-height: 450px;
+      min-height: 510px;
       padding-top: 5px;
     }
+  }
+  .ant-tabs-tabpane {
+    padding-left: 3px;
+    padding-right: 3px;
   }
   .picture-plus {
     float: right;
@@ -15,12 +19,19 @@
   .image-video-box {
     position: relative;
     padding-top: 75%;
+    box-shadow: 0 0 2px #bcbcbc;
     .image-video-box-body {
       position: absolute;
       top: 0px;
       left: 0px;
       right: 0px;
       bottom: 0px;
+      .video-react-big-play-button {
+        display: none;
+      }
+      .video-react-control-bar {
+        display: none;
+      }
     }
     .image-video-control {
       position: absolute;
@@ -34,16 +45,16 @@
       opacity: 0;
       transition: all 0.3s;
       i {
-        font-size: 18px;
+        font-size: 20px;
         cursor: pointer;
       }
       .anticon-copy {
         color: rgb(38, 194, 129);
-        margin-right: 10px;
+        margin-right: 15px;
       }
       .anticon-edit {
         color: #1890ff;
-        margin-right: 10px;
+        margin-right: 15px;
       }
       .anticon-delete {
         color: #ff4d4f;
@@ -62,6 +73,10 @@
     word-break: break-all;
     font-size: 13px;
     margin-bottom: 0;
+    margin-top: 2px;
     height: 35px;
   }
+  .ant-pagination {
+    text-align: right;
+  }
 }
\ No newline at end of file
diff --git a/src/menu/picturecontroller/video/index.jsx b/src/menu/picturecontroller/video/index.jsx
index 55be7dd..1ac5f18 100644
--- a/src/menu/picturecontroller/video/index.jsx
+++ b/src/menu/picturecontroller/video/index.jsx
@@ -1,33 +1,27 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
-import { is, fromJS } from 'immutable'
 import { Player } from 'video-react'
 
 import './index.scss'
 
 class Video extends Component {
   static propTpyes = {
-    card: PropTypes.object,  // 鏉＄爜璁剧疆
-    value: PropTypes.any,    // 鏉＄爜鍊�
+    value: PropTypes.string,    // 瑙嗛鍦板潃
   }
 
   componentDidMount () {
     this.player.seek(1)
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return !is(fromJS(this.props), fromJS(nextProps))
+  shouldComponentUpdate () {
+    return false
   }
 
   render() {
-    const { value, card } = this.props
-
     return (
-      <div style={{overflow: 'hidden'}}>
-        <Player poster="" ref={player => { this.player = player }} autoPlay={card.autoPlay === 'true'} aspectRatio={card.aspectRatio || '16:9'}>
-          <source src={value} />
-        </Player>
-      </div>
+      <Player ref={player => { this.player = player }} aspectRatio={'4:3'}>
+        <source src={this.props.value} />
+      </Player>
     )
   }
 }
diff --git a/src/menu/picturecontroller/video/index.scss b/src/menu/picturecontroller/video/index.scss
index 1c11bbc..0acabae 100644
--- a/src/menu/picturecontroller/video/index.scss
+++ b/src/menu/picturecontroller/video/index.scss
@@ -1,181 +1,5 @@
-@charset "UTF-8";
-.video-react .video-react-control:before, .video-react .video-react-big-play-button:before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.video-react .video-react-control:before, .video-react .video-react-big-play-button:before {
-  text-align: center;
-}
-
-@font-face {
-  font-family: "video-react";
-  src: url(data:application/vnd.ms-fontobject;base64,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?#iefix) format("eot");
-}
-@font-face {
-  font-family: "video-react";
-  src: url(data:application/font-woff;base64,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) format("woff"), url(data:application/x-font-ttf;base64,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) format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-.video-react-icon, .video-react .video-react-closed-caption, .video-react .video-react-bezel .video-react-bezel-icon, .video-react .video-react-volume-level, .video-react .video-react-mute-control,
-.video-react .video-react-volume-menu-button, .video-react .video-react-play-control, .video-react .video-react-play-progress, .video-react .video-react-big-play-button {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: "video-react" !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  /* Better Font Rendering =========== */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.video-react-icon-play-arrow:before, .video-react .video-react-bezel .video-react-bezel-icon-play:before, .video-react .video-react-play-control:before, .video-react .video-react-big-play-button:before {
-  content: "飯�";
-}
-
-.video-react-icon-play-circle-filled:before {
-  content: "飯�";
-}
-
-.video-react-icon-play-circle-outline:before {
-  content: "飯�";
-}
-
-.video-react-icon-pause:before, .video-react .video-react-bezel .video-react-bezel-icon-pause:before, .video-react .video-react-play-control.video-react-playing:before {
-  content: "飯�";
-}
-
-.video-react-icon-pause-circle-filled:before {
-  content: "飯�";
-}
-
-.video-react-icon-pause-circle-outline:before {
-  content: "飯�";
-}
-
-.video-react-icon-stop:before {
-  content: "飯�";
-}
-
-.video-react-icon-fast-rewind:before, .video-react .video-react-bezel .video-react-bezel-icon-fast-rewind:before {
-  content: "飯�";
-}
-
-.video-react-icon-fast-forward:before, .video-react .video-react-bezel .video-react-bezel-icon-fast-forward:before {
-  content: "飯�";
-}
-
-.video-react-icon-skip-previous:before {
-  content: "飯�";
-}
-
-.video-react-icon-skip-next:before {
-  content: "飯�";
-}
-
-.video-react-icon-replay-5:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-5:before {
-  content: "飯�";
-}
-
-.video-react-icon-replay-10:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-10:before {
-  content: "飯�";
-}
-
-.video-react-icon-replay-30:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-30:before {
-  content: "飯�";
-}
-
-.video-react-icon-forward-5:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-5:before {
-  content: "飯�";
-}
-
-.video-react-icon-forward-10:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-10:before {
-  content: "飯�";
-}
-
-.video-react-icon-forward-30:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-30:before {
-  content: "飯�";
-}
-
-.video-react-icon-volume-off:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-off:before, .video-react .video-react-mute-control.video-react-vol-muted:before,
-.video-react .video-react-volume-menu-button.video-react-vol-muted:before {
-  content: "飯�";
-}
-
-.video-react-icon-volume-mute:before, .video-react .video-react-mute-control.video-react-vol-0:before,
-.video-react .video-react-volume-menu-button.video-react-vol-0:before {
-  content: "飯�";
-}
-
-.video-react-icon-volume-down:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-down:before, .video-react .video-react-mute-control.video-react-vol-2:before,
-.video-react .video-react-volume-menu-button.video-react-vol-2:before, .video-react .video-react-mute-control.video-react-vol-1:before,
-.video-react .video-react-volume-menu-button.video-react-vol-1:before {
-  content: "飯�";
-}
-
-.video-react-icon-volume-up:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-up:before, .video-react .video-react-mute-control:before,
-.video-react .video-react-volume-menu-button:before {
-  content: "飯�";
-}
-
-.video-react-icon-fullscreen:before {
-  content: "飯�";
-}
-
-.video-react-icon-fullscreen-exit:before {
-  content: "飯�";
-}
-
-.video-react-icon-closed-caption:before, .video-react .video-react-closed-caption:before {
-  content: "飯�";
-}
-
-.video-react-icon-hd:before {
-  content: "飯�";
-}
-
-.video-react-icon-settings:before {
-  content: "飯�";
-}
-
-.video-react-icon-share:before {
-  content: "飯�";
-}
-
-.video-react-icon-info:before {
-  content: "飯�";
-}
-
-.video-react-icon-info-outline:before {
-  content: "飯�";
-}
-
-.video-react-icon-close:before {
-  content: "飯�";
-}
-
-.video-react-icon-circle:before, .video-react .video-react-volume-level:before, .video-react .video-react-play-progress:before {
-  content: "飯�";
-}
-
-.video-react-icon-circle-outline:before {
-  content: "飯�";
-}
-
-.video-react-icon-circle-inner-circle:before {
-  content: "飯�";
-}
-
 .video-react {
   display: block;
-  vertical-align: top;
   box-sizing: border-box;
   color: #fff;
   background-color: #000;
@@ -188,13 +12,7 @@
   -ms-user-select: none;
   user-select: none;
 }
-.video-react:-moz-full-screen {
-  position: absolute;
-}
-.video-react:-webkit-full-screen {
-  width: 100% !important;
-  height: 100% !important;
-}
+
 .video-react *,
 .video-react *:before,
 .video-react *:after {
@@ -232,818 +50,3 @@
   width: 100%;
   height: 100%;
 }
-.video-react.video-react-fullscreen {
-  width: 100% !important;
-  height: 100% !important;
-  padding-top: 0 !important;
-}
-.video-react.video-react-fullscreen.video-react-user-inactive {
-  cursor: none;
-}
-
-body.video-react-full-window {
-  padding: 0;
-  margin: 0;
-  height: 100%;
-  overflow-y: auto;
-}
-body.video-react-full-window .video-react-fullscreen {
-  position: fixed;
-  overflow: hidden;
-  z-index: 1000;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-
-.video-react button {
-  background: none;
-  border: none;
-  color: inherit;
-  display: inline-block;
-  cursor: pointer;
-  overflow: visible;
-  font-size: inherit;
-  line-height: inherit;
-  text-transform: none;
-  text-decoration: none;
-  transition: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-.video-react .video-react-loading-spinner {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin: -25px 0 0 -25px;
-  opacity: 0.85;
-  text-align: left;
-  border: 6px solid rgba(43, 51, 63, 0.7);
-  box-sizing: border-box;
-  background-clip: padding-box;
-  width: 50px;
-  height: 50px;
-  border-radius: 25px;
-}
-.video-react .video-react-loading-spinner:before, .video-react .video-react-loading-spinner:after {
-  content: "";
-  position: absolute;
-  margin: -6px;
-  box-sizing: inherit;
-  width: inherit;
-  height: inherit;
-  border-radius: inherit;
-  opacity: 1;
-  border: inherit;
-  border-color: transparent;
-  border-top-color: white;
-  -webkit-animation: video-react-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, video-react-spinner-fade 1.1s linear infinite;
-  animation: video-react-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, video-react-spinner-fade 1.1s linear infinite;
-}
-
-.video-react-seeking .video-react-loading-spinner,
-.video-react-waiting .video-react-loading-spinner {
-  display: block;
-}
-
-.video-react-seeking .video-react-loading-spinner:before,
-.video-react-waiting .video-react-loading-spinner:before {
-  border-top-color: white;
-}
-
-.video-react-seeking .video-react-loading-spinner:after,
-.video-react-waiting .video-react-loading-spinner:after {
-  border-top-color: white;
-  -webkit-animation-delay: 0.44s;
-  animation-delay: 0.44s;
-}
-
-@keyframes video-react-spinner-spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes video-react-spinner-spin {
-  100% {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@keyframes video-react-spinner-fade {
-  0% {
-    border-top-color: #73859f;
-  }
-  20% {
-    border-top-color: #73859f;
-  }
-  35% {
-    border-top-color: white;
-  }
-  60% {
-    border-top-color: #73859f;
-  }
-  100% {
-    border-top-color: #73859f;
-  }
-}
-@-webkit-keyframes video-react-spinner-fade {
-  0% {
-    border-top-color: #73859f;
-  }
-  20% {
-    border-top-color: #73859f;
-  }
-  35% {
-    border-top-color: white;
-  }
-  60% {
-    border-top-color: #73859f;
-  }
-  100% {
-    border-top-color: #73859f;
-  }
-}
-.video-react .video-react-big-play-button {
-  font-size: 26px;
-  line-height: 38px;
-  height: 40px;
-  width: 40px;
-  display: block;
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  padding: 0;
-  cursor: pointer;
-  opacity: 1;
-  border: 0.06666em solid #fff;
-  background-color: #2B333F;
-  background-color: rgba(43, 51, 63, 0.7);
-  -webkit-border-radius: 40px;
-  -moz-border-radius: 40px;
-  border-radius: 40px;
-  -webkit-transition: all 0.4s;
-  -moz-transition: all 0.4s;
-  -o-transition: all 0.4s;
-  transition: all 0.4s;
-}
-.video-react .video-react-big-play-button.video-react-big-play-button-center {
-  top: 50%;
-  left: 50%;
-  margin-top: -20px;
-  margin-left: -20px;
-}
-.video-react .video-react-big-play-button.big-play-button-hide {
-  display: none;
-}
-.video-react:hover .video-react-big-play-button,
-.video-react .video-react-big-play-button:focus {
-  outline: 0;
-  border-color: #fff;
-  background-color: #73859f;
-  background-color: rgba(115, 133, 159, 0.5);
-  -webkit-transition: all 0s;
-  -moz-transition: all 0s;
-  -o-transition: all 0s;
-  transition: all 0s;
-}
-
-.video-react-menu-button {
-  cursor: pointer;
-}
-.video-react-menu-button.video-react-disabled {
-  cursor: default;
-}
-
-.video-react-menu .video-react-menu-content {
-  display: block;
-  padding: 0;
-  margin: 0;
-  overflow: auto;
-  font-family: serif, Times, "Times New Roman";
-}
-.video-react-menu li {
-  list-style: none;
-  margin: 0;
-  padding: 0.2em 0;
-  line-height: 1.4em;
-  font-size: 1.2em;
-  text-align: center;
-}
-.video-react-menu li:focus, .video-react-menu li:hover {
-  outline: 0;
-  background-color: #73859f;
-  background-color: rgba(115, 133, 159, 0.5);
-}
-.video-react-menu li.video-react-selected, .video-react-menu li.video-react-selected:focus, .video-react-menu li.video-react-selected:hover {
-  background-color: #fff;
-  color: #2B333F;
-}
-.video-react-menu li.vjs-menu-title {
-  text-align: center;
-  text-transform: uppercase;
-  font-size: 1em;
-  line-height: 2em;
-  padding: 0;
-  margin: 0 0 0.3em 0;
-  font-weight: bold;
-  cursor: default;
-}
-
-.video-react-scrubbing .vjs-menu-button:hover .video-react-menu {
-  display: none;
-}
-
-.video-react .video-react-menu-button-popup .video-react-menu {
-  display: none;
-  position: absolute;
-  bottom: 0;
-  width: 10em;
-  left: -3em;
-  height: 0em;
-  margin-bottom: 1.5em;
-  border-top-color: rgba(43, 51, 63, 0.7);
-}
-.video-react .video-react-menu-button-popup .video-react-menu .video-react-menu-content {
-  background-color: #2B333F;
-  background-color: rgba(43, 51, 63, 0.7);
-  position: absolute;
-  width: 100%;
-  bottom: 1.5em;
-  max-height: 15em;
-}
-
-.video-react-menu-button-popup .video-react-menu.video-react-lock-showing {
-  display: block;
-}
-
-.video-react .video-react-menu-button-inline {
-  -webkit-transition: all 0.4s;
-  -moz-transition: all 0.4s;
-  -o-transition: all 0.4s;
-  transition: all 0.4s;
-  overflow: hidden;
-}
-.video-react .video-react-menu-button-inline:before {
-  width: 2.222222222em;
-}
-.video-react .video-react-menu-button-inline:hover, .video-react .video-react-menu-button-inline:focus, .video-react .video-react-menu-button-inline.video-react-slider-active {
-  width: 12em;
-}
-.video-react .video-react-menu-button-inline:hover .video-react-menu, .video-react .video-react-menu-button-inline:focus .video-react-menu, .video-react .video-react-menu-button-inline.video-react-slider-active .video-react-menu {
-  display: block;
-  opacity: 1;
-}
-.video-react .video-react-menu-button-inline.video-react-slider-active {
-  -webkit-transition: none;
-  -moz-transition: none;
-  -o-transition: none;
-  transition: none;
-}
-.video-react .video-react-menu-button-inline .video-react-menu {
-  opacity: 0;
-  height: 100%;
-  width: auto;
-  position: absolute;
-  left: 4em;
-  top: 0;
-  padding: 0;
-  margin: 0;
-  -webkit-transition: all 0.4s;
-  -moz-transition: all 0.4s;
-  -o-transition: all 0.4s;
-  transition: all 0.4s;
-}
-.video-react .video-react-menu-button-inline .video-react-menu-content {
-  width: auto;
-  height: 100%;
-  margin: 0;
-  overflow: hidden;
-}
-
-.video-react-no-flex .video-react-menu-button-inline .video-react-menu {
-  display: block;
-  opacity: 1;
-  position: relative;
-  width: auto;
-}
-.video-react-no-flex .video-react-menu-button-inline:hover, .video-react-no-flex .video-react-menu-button-inline:focus, .video-react-no-flex .video-react-menu-button-inline.video-react-slider-active {
-  width: auto;
-}
-
-.video-react .video-react-poster {
-  display: inline-block;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  background-size: contain;
-  background-color: #000000;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: 100%;
-}
-.video-react .video-react-poster img {
-  display: block;
-  vertical-align: middle;
-  margin: 0 auto;
-  max-height: 100%;
-  padding: 0;
-  width: 100%;
-}
-
-.video-react .video-react-slider {
-  outline: 0;
-  position: relative;
-  cursor: pointer;
-  padding: 0;
-  margin: 0 0.45em 0 0.45em;
-  background-color: #73859f;
-  background-color: rgba(115, 133, 159, 0.5);
-}
-.video-react .video-react-slider:focus {
-  -webkit-box-shadow: 0 0 1em #fff;
-  -moz-box-shadow: 0 0 1em #fff;
-  box-shadow: 0 0 1em #fff;
-}
-
-.video-react .video-react-control {
-  outline: none;
-  position: relative;
-  text-align: center;
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  width: 4em;
-  -webkit-box-flex: none;
-  -moz-box-flex: none;
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-}
-.video-react .video-react-control:before {
-  font-size: 1.8em;
-  line-height: 1.67;
-}
-.video-react .video-react-control:focus:before, .video-react .video-react-control:hover:before, .video-react .video-react-control:focus {
-  text-shadow: 0em 0em 1em #fff, 0em 0em 0.5em #fff;
-}
-
-.video-react .video-react-control-text {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.video-react-no-flex .video-react-control {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.video-react .video-react-control-bar {
-  display: none;
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 3em;
-  background-color: #2B333F;
-  background-color: rgba(43, 51, 63, 0.7);
-}
-
-.video-react-has-started .video-react-control-bar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  visibility: visible;
-  opacity: 1;
-  -webkit-transition: visibility 0.1s, opacity 0.1s;
-  -moz-transition: visibility 0.1s, opacity 0.1s;
-  -o-transition: visibility 0.1s, opacity 0.1s;
-  transition: visibility 0.1s, opacity 0.1s;
-}
-
-.video-react-has-started.video-react-user-inactive.video-react-playing .video-react-control-bar.video-react-control-bar-auto-hide {
-  visibility: visible;
-  opacity: 0;
-  -webkit-transition: visibility 1s, opacity 1s;
-  -moz-transition: visibility 1s, opacity 1s;
-  -o-transition: visibility 1s, opacity 1s;
-  transition: visibility 1s, opacity 1s;
-}
-
-.video-react-controls-disabled .video-react-control-bar,
-.video-react-using-native-controls .video-react-control-bar,
-.video-react-error .video-react-control-bar {
-  display: none !important;
-}
-
-.video-react-audio.video-react-has-started.video-react-user-inactive.video-react-playing .video-react-control-bar {
-  opacity: 1;
-  visibility: visible;
-}
-
-.video-react-has-started.video-react-no-flex .video-react-control-bar {
-  display: table;
-}
-
-.video-react .video-react-progress-control {
-  -webkit-box-flex: auto;
-  -moz-box-flex: auto;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-width: 4em;
-}
-
-.video-react-live .video-react-progress-control {
-  display: none;
-}
-
-.video-react .video-react-progress-holder {
-  -webkit-box-flex: auto;
-  -moz-box-flex: auto;
-  -webkit-flex: auto;
-  -ms-flex: auto;
-  flex: auto;
-  -webkit-transition: all 0.2s;
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  transition: all 0.2s;
-  height: 0.3em;
-}
-
-.video-react .video-react-progress-control:hover .video-react-progress-holder {
-  font-size: 1.6666666667em;
-}
-
-/* If we let the font size grow as much as everything else, the current time tooltip ends up
- ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
- to avoid a weird hitch when you roll off the hover. */
-.video-react .video-react-progress-control:hover .video-react-time-tooltip,
-.video-react .video-react-progress-control:hover .video-react-mouse-display:after,
-.video-react .video-react-progress-control:hover .video-react-play-progress:after {
-  visibility: visible;
-  font-size: 0.6em;
-}
-
-.video-react .video-react-progress-holder .video-react-play-progress,
-.video-react .video-react-progress-holder .video-react-load-progress,
-.video-react .video-react-progress-holder .video-react-tooltip-progress-bar,
-.video-react .video-react-progress-holder .video-react-load-progress div {
-  position: absolute;
-  display: block;
-  height: 0.3em;
-  margin: 0;
-  padding: 0;
-  width: 0;
-  left: 0;
-  top: 0;
-}
-
-.video-react .video-react-play-progress {
-  background-color: #fff;
-}
-.video-react .video-react-play-progress:before {
-  position: absolute;
-  top: -0.3333333333em;
-  right: -0.5em;
-  font-size: 0.9em;
-}
-
-.video-react .video-react-time-tooltip,
-.video-react .video-react-mouse-display:after,
-.video-react .video-react-play-progress:after {
-  visibility: hidden;
-  pointer-events: none;
-  position: absolute;
-  top: -3.4em;
-  right: -1.9em;
-  font-size: 0.9em;
-  color: #000;
-  content: attr(data-current-time);
-  padding: 6px 8px 8px 8px;
-  background-color: #fff;
-  background-color: rgba(255, 255, 255, 0.8);
-  -webkit-border-radius: 0.3em;
-  -moz-border-radius: 0.3em;
-  border-radius: 0.3em;
-}
-
-.video-react .video-react-time-tooltip,
-.video-react .video-react-play-progress:before,
-.video-react .video-react-play-progress:after {
-  z-index: 1;
-}
-
-.video-react .video-react-progress-control .video-react-keep-tooltips-inside:after {
-  display: none;
-}
-
-.video-react .video-react-load-progress {
-  background: #bfc7d3;
-  background: rgba(115, 133, 159, 0.5);
-}
-
-.video-react .video-react-load-progress div {
-  background: white;
-  background: rgba(115, 133, 159, 0.75);
-}
-
-.video-react.video-react-no-flex .video-react-progress-control {
-  width: auto;
-}
-
-.video-react .video-react-time-tooltip {
-  display: inline-block;
-  height: 2.4em;
-  position: relative;
-  float: right;
-  right: -1.9em;
-}
-
-.video-react .video-react-tooltip-progress-bar {
-  visibility: hidden;
-}
-
-.video-react .video-react-progress-control .video-react-mouse-display {
-  display: none;
-  position: absolute;
-  width: 1px;
-  height: 100%;
-  background-color: #000;
-  z-index: 1;
-}
-
-.video-react-no-flex .video-react-progress-control .video-react-mouse-display {
-  z-index: 0;
-}
-
-.video-react .video-react-progress-control:hover .video-react-mouse-display {
-  display: block;
-}
-
-.video-react.video-react-user-inactive .video-react-progress-control .video-react-mouse-display,
-.video-react.video-react-user-inactive .video-react-progress-control .video-react-mouse-display:after {
-  visibility: hidden;
-  opacity: 0;
-  -webkit-transition: visibility 1s, opacity 1s;
-  -moz-transition: visibility 1s, opacity 1s;
-  -o-transition: visibility 1s, opacity 1s;
-  transition: visibility 1s, opacity 1s;
-}
-
-.video-react.video-react-user-inactive.video-react-no-flex .video-react-progress-control .video-react-mouse-display,
-.video-react.video-react-user-inactive.video-react-no-flex .video-react-progress-control .video-react-mouse-display:after {
-  display: none;
-}
-
-.video-react .video-react-mouse-display .video-react-time-tooltip,
-.video-react .video-react-progress-control .video-react-mouse-display:after {
-  color: #fff;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, 0.8);
-}
-
-.video-react .video-react-play-control {
-  cursor: pointer;
-  -webkit-box-flex: none;
-  -moz-box-flex: none;
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-}
-.video-react .video-react-fullscreen-control {
-  cursor: pointer;
-  -webkit-box-flex: none;
-  -moz-box-flex: none;
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-}
-
-.video-react.video-react-fullscreen {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 9999;
-}
-
-.video-react .video-react-time-control {
-  -webkit-box-flex: none;
-  -moz-box-flex: none;
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-  font-size: 1em;
-  line-height: 3em;
-  min-width: 2em;
-  width: auto;
-  padding-left: 1em;
-  padding-right: 1em;
-}
-.video-react .video-react-time-divider {
-  line-height: 3em;
-  min-width: initial;
-  padding: 0;
-}
-
-.video-react .video-react-mute-control,
-.video-react .video-react-volume-menu-button {
-  cursor: pointer;
-  -webkit-box-flex: none;
-  -moz-box-flex: none;
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-}
-.video-react .video-react-volume-control {
-  width: 5em;
-  -webkit-box-flex: none;
-  -moz-box-flex: none;
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-.video-react .video-react-volume-bar {
-  margin: 1.35em 0.45em;
-}
-.video-react .video-react-volume-bar.video-react-slider-horizontal {
-  width: 5em;
-  height: 0.3em;
-}
-.video-react .video-react-volume-bar.video-react-slider-horizontal .video-react-volume-level {
-  width: 100%;
-}
-.video-react .video-react-volume-bar.video-react-slider-vertical {
-  width: 0.3em;
-  height: 5em;
-  margin: 1.35em auto;
-}
-.video-react .video-react-volume-bar.video-react-slider-vertical .video-react-volume-level {
-  height: 100%;
-}
-.video-react .video-react-volume-level {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  background-color: #fff;
-}
-.video-react .video-react-volume-level:before {
-  position: absolute;
-  font-size: 0.9em;
-}
-.video-react .video-react-slider-vertical .video-react-volume-level {
-  width: 0.3em;
-}
-.video-react .video-react-slider-vertical .video-react-volume-level:before {
-  top: -0.5em;
-  left: -0.3em;
-}
-.video-react .video-react-slider-horizontal .video-react-volume-level {
-  height: 0.3em;
-}
-.video-react .video-react-slider-horizontal .video-react-volume-level:before {
-  top: -0.3em;
-  right: -0.5em;
-}
-.video-react .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu {
-  display: block;
-  width: 0;
-  height: 0;
-  border-top-color: transparent;
-}
-.video-react .video-react-menu-button-popup.video-react-volume-menu-button-vertical .video-react-menu {
-  left: 0.5em;
-  height: 8em;
-}
-.video-react .video-react-menu-button-popup.video-react-volume-menu-button-horizontal .video-react-menu {
-  left: -2em;
-}
-.video-react .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu-content {
-  height: 0;
-  width: 0;
-  overflow-x: hidden;
-  overflow-y: hidden;
-}
-.video-react .video-react-volume-menu-button-vertical:hover .video-react-menu-content,
-.video-react .video-react-volume-menu-button-vertical:focus .video-react-menu-content,
-.video-react .video-react-volume-menu-button-vertical.video-react-slider-active .video-react-menu-content,
-.video-react .video-react-volume-menu-button-vertical .video-react-lock-showing .video-react-menu-content {
-  height: 8em;
-  width: 2.9em;
-}
-.video-react .video-react-volume-menu-button-horizontal:hover .video-react-menu-content,
-.video-react .video-react-volume-menu-button-horizontal:focus .video-react-menu-content,
-.video-react .video-react-volume-menu-button-horizontal .video-react-slider-active .video-react-menu-content,
-.video-react .video-react-volume-menu-button-horizontal .video-react-lock-showing .video-react-menu-content {
-  height: 2.9em;
-  width: 8em;
-}
-.video-react .video-react-volume-menu-button.video-react-menu-button-inline .video-react-menu-content {
-  background-color: transparent !important;
-}
-
-.video-react .video-react-playback-rate .video-react-playback-rate-value {
-  line-height: 3em;
-  text-align: center;
-}
-.video-react .video-react-playback-rate .video-react-menu {
-  width: 4em;
-  left: 0em;
-}
-
-.video-react .video-react-bezel {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 52px;
-  height: 52px;
-  z-index: 17;
-  margin-left: -26px;
-  margin-top: -26px;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 26px;
-}
-.video-react .video-react-bezel.video-react-bezel-animation {
-  -moz-animation: video-react-bezel-fadeout 0.5s linear 1 normal forwards;
-  -webkit-animation: video-react-bezel-fadeout 0.5s linear 1 normal forwards;
-  animation: video-react-bezel-fadeout 0.5s linear 1 normal forwards;
-  pointer-events: none;
-}
-.video-react .video-react-bezel.video-react-bezel-animation-alt {
-  -moz-animation: video-react-bezel-fadeout-alt 0.5s linear 1 normal forwards;
-  -webkit-animation: video-react-bezel-fadeout-alt 0.5s linear 1 normal forwards;
-  animation: video-react-bezel-fadeout-alt 0.5s linear 1 normal forwards;
-  pointer-events: none;
-}
-.video-react .video-react-bezel .video-react-bezel-icon {
-  width: 36px;
-  height: 36px;
-  margin: 8px;
-  font-size: 26px;
-  line-height: 36px;
-  text-align: center;
-}
-@keyframes video-react-bezel-fadeout {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: scale(2);
-  }
-}
-@keyframes video-react-bezel-fadeout-alt {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: scale(2);
-  }
-}
-.video-react .video-react-closed-caption {
-  cursor: pointer;
-  -webkit-box-flex: none;
-  -moz-box-flex: none;
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-}
-.video-react video::-webkit-media-text-track-container {
-  -webkit-transform: translateY(-30px);
-  transform: translateY(-30px);
-}
\ No newline at end of file
diff --git a/src/menu/popview/index.jsx b/src/menu/popview/index.jsx
index 93b026c..18d2fb6 100644
--- a/src/menu/popview/index.jsx
+++ b/src/menu/popview/index.jsx
@@ -21,7 +21,7 @@
 const { confirm } = Modal
 
 const MenuForm = asyncComponent(() => import('./menuform'))
-const SourceWrap = asyncComponent(() => import('@/menu/modelsource'))
+const SourceWrap = asyncComponent(() => import('@/menu/modulesource'))
 const MenuShell = asyncComponent(() => import('@/menu/menushell'))
 const BgController = asyncComponent(() => import('@/menu/bgcontroller'))
 const PasteController = asyncComponent(() => import('@/menu/pastecontroller'))
diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx
index 1185818..ee460b5 100644
--- a/src/menu/stylecontroller/index.jsx
+++ b/src/menu/stylecontroller/index.jsx
@@ -1,18 +1,19 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import { is, fromJS } from 'immutable'
-import { Collapse, Form, Input, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd'
+import { Collapse, Form, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd'
 
 import MKEmitter from '@/utils/events.js'
 import zhCN from '@/locales/zh-CN/mob.js'
 import enUS from '@/locales/en-US/mob.js'
-import ColorSketch from '@/mob/colorsketch'
+import asyncComponent from '@/utils/asyncComponent'
 import StyleInput from './styleInput'
-import FileUpload from '@/tabviews/zshare/fileupload'
 import './index.scss'
 
 const { Panel } = Collapse
 const { Option } = Select
+const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
+const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
 
 class MobController extends Component {
   static propTpyes = {
@@ -24,7 +25,6 @@
     dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
     card: null,
     comIds: [],
-    bgimages: [],
     backgroundImage: '',
     options: [],
     borposition: 'outer'
@@ -50,12 +50,8 @@
 
   initStyle = (comIds, options, style = {}) => {
     let backgroundImage = ''
-    if (style.backgroundImage) {
-      if (/^url/ig.test(style.backgroundImage)) {
-        backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
-      } else if (/^linear-gradient/ig.test(style.backgroundImage)) {
-        backgroundImage = style.backgroundImage.replace(/^linear-gradient\(/ig, '').replace(/\)$/ig, '')
-      }
+    if (style.backgroundImage && /^url/ig.test(style.backgroundImage)) {
+      backgroundImage = style.backgroundImage.replace(/^url\(/ig, '').replace(/\)$/ig, '')
     }
 
     this.setState({
@@ -204,30 +200,15 @@
     this.updateStyle({shadow: val})
   }
 
-  imgChange = (list) => {
-    if (list[0] && list[0].response) {
-      this.setState({
-        bgimages: [],
-        backgroundImage: list[0].response
-      })
-      this.updateStyle({backgroundImage: `url(${list[0].response})`})
+  imgChange = (val) => {
+    this.setState({
+      backgroundImage: val
+    })
+    if (val) {
+      this.updateStyle({backgroundImage: `url(${val})`})
     } else {
-      this.setState({bgimages: list})
+      this.updateStyle({backgroundImage: ''})
     }
-  }
-
-  changeBackgroundImageInput = (e) => {
-    let val = e.target.value
-    val = val.replace(/^\s*|\s*$/ig, '')
-
-    if (/^http|^\/\//.test(val)) {
-      val = `url(${val})`
-    } else if (/,/ig.test(val) && !/^(radial-gradient|linear-gradient)/ig.test(val)) {
-      val = `linear-gradient(${val})`
-    }
-
-    this.setState({backgroundImage: e.target.value})
-    this.updateStyle({backgroundImage: val})
   }
 
   changeBorderStyle = (val) => {
@@ -301,7 +282,7 @@
   }
 
   render () {
-    const { card, options, backgroundImage, bgimages, borposition } = this.state
+    const { card, options, backgroundImage, borposition } = this.state
     const formItemLayout = {
       labelCol: {
         xs: { span: 24 },
@@ -444,8 +425,7 @@
                     label={<Icon title="鑳屾櫙鍥剧墖" type="picture" />}
                     labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} }
                   >
-                    <FileUpload accept=".jpg,.png,.gif,.svg" value={bgimages} maxFile={2} fileType="text" onChange={this.imgChange}/>
-                    <Input placeholder="" value={backgroundImage} autoComplete="off" onChange={this.changeBackgroundImageInput} />
+                    <SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/>
                   </Form.Item>
                 </Col> : null}
               </Panel> : null}
diff --git a/src/menu/stylecontroller/index.scss b/src/menu/stylecontroller/index.scss
index e17070f..082735e 100644
--- a/src/menu/stylecontroller/index.scss
+++ b/src/menu/stylecontroller/index.scss
@@ -28,6 +28,18 @@
         .ant-input-number {
           width: 100%;
         }
+        .mk-source-wrap {
+          height: 32px;
+          .anticon-paper-clip {
+            color:rgba(255, 255, 255, 0.7);
+          }
+          .anticon-delete {
+            color:rgba(255, 255, 255, 0.7);
+          }
+          .mk-source-item-info:hover {
+            background-color: transparent;
+          }
+        }
         .ant-form-item {
           margin-bottom: 2px;
 
diff --git a/src/tabviews/zshare/actionList/normalbutton/index.jsx b/src/tabviews/zshare/actionList/normalbutton/index.jsx
index 7eda245..aa503fb 100644
--- a/src/tabviews/zshare/actionList/normalbutton/index.jsx
+++ b/src/tabviews/zshare/actionList/normalbutton/index.jsx
@@ -885,8 +885,7 @@
         param.ID = record.ID
       }
 
-      let _prevCustomScript = `${record.callbacksql || 'declare @ErrorCode nvarchar(50),@retmsg nvarchar(4000)'}
-        Select @ErrorCode='',@retmsg=''
+      let _prevCustomScript = `${record.callbacksql}
         ${errSql}
       `
       let _backCustomScript = ''
diff --git a/src/utils/utils.js b/src/utils/utils.js
index ba6cfde..ce58c46 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -1202,10 +1202,6 @@
       `
   }
 
-  if (retmsg) {
-    _callbacksql = _sql
-  }
-
   // 鍘婚櫎绂佺敤鐨勯獙璇�
   if (verify.contrasts) {
     verify.contrasts = verify.contrasts.filter(item => item.status !== 'false')
@@ -1234,6 +1230,10 @@
       select @BVoucher='',@FIBVoucherDate='',@FiYear='',@ErrorCode='',@retmsg='',@UserName='${userName}', @FullName='${fullName}', @BillCode='', @ModularDetailCode=''
       `
 
+  if (retmsg) {
+    _callbacksql = _sql
+  }
+
   if (_initCustomScript) {
     _sql += _initCustomScript
   }
diff --git a/src/views/menudesign/index.jsx b/src/views/menudesign/index.jsx
index 2d179a4..b1371d0 100644
--- a/src/views/menudesign/index.jsx
+++ b/src/views/menudesign/index.jsx
@@ -26,19 +26,19 @@
 
 const MenuForm = asyncComponent(() => import('./menuform'))
 const HomeForm = asyncComponent(() => import('./homeform'))
-const PrintMenuForm = asyncComponent(() => import('./printmenuform'))
 const Header = asyncComponent(() => import('@/menu/header'))
-const SourceWrap = asyncComponent(() => import('@/menu/modelsource'))
 const MenuShell = asyncComponent(() => import('@/menu/menushell'))
+const PrintMenuForm = asyncComponent(() => import('./printmenuform'))
+const SourceWrap = asyncComponent(() => import('@/menu/modulesource'))
+const PopviewController = asyncComponent(() => import('@/menu/popview'))
 const BgController = asyncComponent(() => import('@/menu/bgcontroller'))
 const PasteController = asyncComponent(() => import('@/menu/pastecontroller'))
 const PaddingController = asyncComponent(() => import('@/menu/padcontroller'))
 const StyleController = asyncComponent(() => import('@/menu/stylecontroller'))
 const PictureController = asyncComponent(() => import('@/menu/picturecontroller'))
+const ModalController = asyncComponent(() => import('@/menu/modalconfig/controller'))
 const StyleCombController = asyncComponent(() => import('@/menu/stylecombcontroller'))
 const StyleCombControlButton = asyncComponent(() => import('@/menu/stylecombcontrolbutton'))
-const ModalController = asyncComponent(() => import('@/menu/modalconfig/controller'))
-const PopviewController = asyncComponent(() => import('@/menu/popview'))
 const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))
 
 sessionStorage.setItem('isEditState', 'true')

--
Gitblit v1.8.0