mod:使用编译模式的vue

frontend/src/components/ColorPicker/canvasEyeDropper.vue

@@ -1,161 +0,0 @@
-<template>
-  <div ref="wrap" class="picture-editor-wrap flex">
-    <div
-      class="picture-editor-wrap_canvas"
-      :style="{
-        width:canvas.width+'px',
-        height:canvas.height+'px',
-      }"
-    >
-      <template v-if="viewStatus">
-
-        <div class="picture-editor-canvas">
-          <canvas id="colorCanvas" :width="canvas.width" :height="canvas.height"  />
-          <div class="picture-editor-canvas_zoom" v-if="!showStraw">
-            <el-button-group >
-              <el-button  icon="el-icon-zoom-in" size="mini" @click="setZoom('in')"></el-button>
-              <el-button  size="mini"  @click="setZoom(1)">1:1</el-button>
-              <el-button icon="el-icon-zoom-out"  size="mini"  @click="setZoom('out')"></el-button>
-            </el-button-group>
-          </div>
-        </div>
-      </template>
-    </div>
-  </div>
-
-</template>
-<script>
-import fabric  from '@/views/components/PictureEditor/js/fabric-adapter'
-import viewMixins  from '@/views/components/PictureEditor/mixin/view/index'
-import colorMixins from '@/views/components/PictureEditor/mixin/color/index'
-export default {
-  name: 'canvasEyeDropper',
-  mixins: [ viewMixins,colorMixins],
-
-  props: {
-    imageUrl: {
-      type: String,
-      default: ''
-    },
-  },
-  data() {
-    return {
-      fcanvas: {},
-      color:"",
-      deviceZoom:1
-    }
-  },
-  components:{
-  },
-  computed: {
-  },
-  watch: {
-  },
-  mounted() {
-    this.init()
-  },
-  methods: {
-    // 初始化
-    async init() {
-      this.deviceZoom = detectZoom.device()
-      await this.viewInit();
-      await  this.$nextTick()
-      this.fcanvas = new fabric.Canvas('colorCanvas', {
-        backgroundColor:"#ffffff",
-        hoverCursor: 'pointer',
-        selection: false,
-        // 元素对象被选中时保持在当前z轴，不会跳到最顶层
-        preserveObjectStacking:true,
-        width: this.canvas.width,
-        height: this.canvas.height,
-      })
-
-      this.minimapInit()
-
-     // this.setStraw();
-
-
-      this.fcanvas.on('mouse:down', (opt)=>{
-        var evt = opt.e;
-        if (!evt.altKey) {
-          let zoom = this.fcanvas.getZoom();
-          var mouse = this.fcanvas.getPointer(opt.e,zoom);
-          let deviceZoom =  window.devicePixelRatio || 1
-          let x = parseInt(mouse.x*deviceZoom)
-          let y = parseInt(mouse.y*deviceZoom)
-          var imageData = this.fcanvas.contextContainer.getImageData(x, y, 1, 1)
-          const color = this.getHexColor(`rgba(${imageData.data[0]},${imageData.data[1]},${imageData.data[2]},1)`)
-          this.$emit('input',color)
-          this.$emit('change')
-        }else{
-          this.isDragging = true;
-          this.selection = false;
-          this.lastPosX = evt.clientX;
-          this.lastPosY = evt.clientY;
-        }
-      });
-
-      fabric.Image.fromURL(this.imageUrl, (img) => {
-
-        img.setControlsVisibility({
-          'mtr':false,
-        })
-
-        //获取缩放比列
-        let scale = 1
-        if(img.width > this.canvas.width){
-          scale =  this.canvas.width/img.width
-        }
-        if(img.height > this.canvas.height){
-          let scaleY =  this.canvas.height/img.height
-          scale = Math.min(scaleY,scale)
-        }
-        //获取图片定位点
-        let left = 0;
-        let top = 0;
-        let realityWidth = img.width*scale
-        let realityHeight = img.height*scale
-        if(realityWidth < this.canvas.width){
-          left = (this.canvas.width - realityWidth )/2
-        }
-        if(realityHeight < this.canvas.height){
-          top = (this.canvas.height - realityHeight )/2
-        }
-
-        this.fcanvas.add(img.set({
-          left,
-          top,
-          name:"image",
-          erasable:false,
-          selectable:false
-        }).scale(scale))
-        this.fcanvas.renderAll();
-      }, {
-        crossOrigin: 'anonymous',
-      })
-    }
-
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.picture-editor-wrap {
-
-  .picture-editor-wrap_canvas {
-    position: relative;
-    .picture-editor-canvas {
-      border-radius: 5px;
-      overflow: hidden;
-      ::v-deep{
-        .upper-canvas {
-          cursor: crosshair !important;
-        }
-      }
-    }
-  }
-  @import '@/views/components/PictureEditor/mixin/view/index.scss';
-  @import '@/views/components/PictureEditor/mixin/color/index.scss';
-}
-
-</style>

frontend/src/components/ColorPicker/index.vue

@@ -1,206 +0,0 @@
-<template>
-  <div
-    :class="[
-      'el-color-picker',
-      colorDisabled ? 'is-disabled' : '',
-      colorSize ? `el-color-picker--${ colorSize }` : ''
-    ]"
-    v-clickoutside="hide">
-    <div class="el-color-picker__trigger" @click="handleTrigger">
-      <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
-        <span class="el-color-picker__color-inner"
-              :style="{
-            backgroundColor: value
-          }"></span>
-      </span>
-    </div>
-
-
-
-    <picker-dropdown
-      ref="dropdown"
-      :class="['el-color-picker__panel', popperClass || '']"
-      v-model="showPicker"
-      @pick="confirmValue"
-      :image-url="imageUrl"
-      @clear="clearValue"
-      :color="color"
-      :show-alpha="showAlpha"
-      :predefine="predefine"
-      :showTips="showTips">
-    </picker-dropdown>
-  </div>
-</template>
-<script>
-import Color from 'element-ui/packages/color-picker/src/color';
-import PickerDropdown from './picker-dropdown.vue';
-import Clickoutside from 'element-ui/src/utils/clickoutside';
-import Emitter from 'element-ui/src/mixins/emitter';
-
-export default {
-  name: 'ColorPicker',
-
-  mixins: [Emitter],
-
-  props: {
-    value: String,
-    showAlpha: Boolean,
-    colorFormat: String,
-    disabled: Boolean,
-    size: String,
-    popperClass: String,
-    predefine: Array,
-    imageUrl:String,
-    showTips:{
-      type: Boolean,
-      default: true
-    }
-  },
-
-  inject: {
-    elForm: {
-      default: ''
-    },
-    elFormItem: {
-      default: ''
-    }
-  },
-
-  directives: { Clickoutside },
-
-  computed: {
-    displayedColor() {
-      if (!this.value && !this.showPanelColor) {
-        return 'transparent';
-      }
-
-      return this.displayedRgb(this.color, this.showAlpha);
-    },
-
-    _elFormItemSize() {
-      return (this.elFormItem || {}).elFormItemSize;
-    },
-
-    colorSize() {
-      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
-    },
-
-    colorDisabled() {
-      return this.disabled || (this.elForm || {}).disabled;
-    }
-  },
-
-  watch: {
-    value(val) {
-      if (!val) {
-        this.showPanelColor = false;
-      } else if (val && val !== this.color.value) {
-        this.color.fromString(val);
-      }
-    },
-    color: {
-      deep: true,
-      handler() {
-        this.showPanelColor = true;
-      }
-    },
-    displayedColor(val) {
-      if (!this.showPicker) return;
-      const currentValueColor = new Color({
-        enableAlpha: this.showAlpha,
-        format: this.colorFormat
-      });
-      currentValueColor.fromString(this.value);
-
-      const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);
-      if (val !== currentValueColorRgb) {
-        this.$emit('active-change', val);
-      }
-    }
-  },
-
-  methods: {
-    handleTrigger() {
-      if (this.colorDisabled) return;
-      this.showPicker = !this.showPicker;
-    },
-    confirmValue() {
-      const value = this.color.value;
-      this.$emit('input', value);
-      this.$emit('change', value);
-      this.dispatch('ElFormItem', 'el.form.change', value);
-      this.showPicker = false;
-    },
-    clearValue() {
-      this.$emit('input', "");
-      this.$emit('change', "");
-      if (this.value !== null || !this.value) {
-        this.dispatch('ElFormItem', 'el.form.change', "");
-      }
-      this.showPanelColor = false;
-      this.showPicker = false;
-      this.resetColor();
-    },
-    hide() {
-      this.showPicker = false;
-      this.resetColor();
-    },
-    resetColor() {
-      this.$nextTick(_ => {
-        if (this.value) {
-          this.color.fromString(this.value);
-        } else {
-          this.showPanelColor = false;
-        }
-      });
-    },
-    displayedRgb(color, showAlpha) {
-      if (!(color instanceof Color)) {
-        throw Error('color should be instance of Color Class');
-      }
-
-      const { r, g, b } = color.toRgb();
-      return showAlpha
-        ? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`
-        : `rgb(${ r }, ${ g }, ${ b })`;
-    }
-  },
-
-  mounted() {
-    const value = this.value;
-    if (value) {
-      this.color.fromString(value);
-    }
-    this.popperElm = this.$refs.dropdown.$el;
-  },
-
-  data() {
-    const color = new Color({
-      enableAlpha: this.showAlpha,
-      format: this.colorFormat
-    });
-
-    return {
-      color,
-      showPicker: false,
-      showPanelColor: false
-    };
-  },
-
-  components: {
-    PickerDropdown
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.el-color-picker__trigger {
-  border: none;
-  width: 100% !important;
-}
-.el-color-picker__color {
-  border: 1px solid #666;
-}
-
-
-</style>

frontend/src/components/ColorPicker/picker-dropdown.vue

@@ -1,462 +0,0 @@
-<template>
-  <transition name="el-zoom-in-top" @after-leave="doDestroy">
-    <div
-      v-show="showPopper"
-      class="el-color-dropdown app-color-dropdown"
-      :style="{
-       zIndex:zIndex
-      }"
-    >
-      <div class="flex between app-color-header">
-        <div class="app-color-tabs flex left">
-          <div class="tab" :class="{'active button--primary1':tab===1 }" @click="toggelTab(1)">{{ $t('选色器.选择色号')}}</div>
-          <template v-if="$store.getters.device !== 'mobile'">
-            <div class="tab" v-if="imageUrl" :class="{'active button--primary1':tab===2 }" @click="toggelTab(2)">{{ $t('选色器.从预览图中选择')}}</div>
-            <div class="tab" :class="{'active button--primary1':tab===3 }" @click="toggelTab(3)">{{ $t('选色器.指定图片选择')}}</div>
-          </template>
-        </div>
-        <div class="close flex right line-30"><i class="el-icon-close" @click="showPopper = false" /></div>
-      </div>
-      <div  v-if="showTips" class="app-color-dropdown-tips__title flex between">
-        <div>
-          <span class="fs-12">{{ $t('选色器.提示：白色、灰色、黑色等改色效果较差，请替换其他颜色') }}</span>
-          <span class="fs-12" v-if="tab == 3">，{{$t('选区换料.请尽量保持浏览器缩放为100%')}}，{{$t('选区换料.非100%可能会导致拾取不准确')}}。</span>
-        </div>
-      </div>
-      <div class="flex left top app-color-dropdown-hb">
-        <template v-if="tab === 1 && showPopper">
-
-          <div class="app-color-dropdown-tips">
-            <div class="app-color-dropdown-tips__color">
-              <div
-                v-for="item in colorList"
-                :key="item"
-                class="app-color-dropdown-tips__item"
-                :style="'background-color: '+item"
-                @click="customInput = item;handleConfirm()"
-              />
-            </div>
-
-            <span class="el-color-dropdown__value mar-top-10">
-              <el-input
-                v-model="customInput"
-                :placeholder="$t('选色器.请输入hex色值，#号开头')"
-                :validate-event="false"
-                size="mini"
-                @keyup.native.enter="handleConfirm"
-                @blur="handleConfirm"
-              />
-            </span>
-
-            <span class="el-color-dropdown__value mar-top-10 flex">
-              <div class="c-fff">r:<el-input
-                v-model="r"
-                :validate-event="false"
-                size="mini"
-                maxlength="3"
-                @input="(val)=>changeRGB(val,'r')"
-                @keyup.native.enter="handleRGBConfirm"
-                @blur="handleRGBConfirm"
-              /></div>
-             <div class="mar-left-10 c-fff">g: <el-input
-                v-model="g"
-                :validate-event="false"
-                size="mini"
-                maxlength="3"
-                @input="(val)=>changeRGB(val,'g')"
-                @keyup.native.enter="handleRGBConfirm"
-                @blur="handleRGBConfirm"
-              />
-             </div>
-             <div class="mar-left-10 c-fff">b:
-              <el-input
-                v-model="b"
-                :validate-event="false"
-                size="mini"
-                maxlength="3"
-                @input="(val)=>changeRGB(val,'b')"
-                @keyup.native.enter="handleRGBConfirm"
-                @blur="handleRGBConfirm"
-              />
-              </div>
-            </span>
-
-            <div class="app-color-dropdown-tips__color_last ">
-              <div class="line-40 c-fff fs-14 mar-top-10">{{ $t('选色器.最近选择')}}</div>
-
-              <div class="app-color-dropdown-tips__color" style="max-height: 60px; overflow-y: auto">
-              <div class="app-color-dropdown-tips__item" v-for="item,index in colorPCList"  :key="item+'_'+index" :style="'background:'+item " @click="customInput = item;handleConfirm()"></div>
-              </div>
-            </div>
-          </div>
-          <div class="wrapper">
-            <div class="el-color-dropdown__main-wrapper mar-top-5">
-              <hue-slider ref="hue" :color="color" vertical style="float: right;" />
-              <sv-panel ref="sl" :color="color" />
-            </div>
-            <alpha-slider v-if="showAlpha" ref="alpha" :color="color" />
-            <predefine v-if="predefine" :color="color" :colors="predefine" />
-
-          </div>
-
-
-        </template>
-
-        <template v-if="tab === 2 && showPopper">
-          <canvasEyeDropper
-            :image-url="imageUrl"
-            v-model="customInput"
-            @change="handleConfirm"
-            :canvas-style="{
-              width:680,
-              height:400,
-            }"
-          />
-        </template>
-
-        <template v-if="tab === 3 && showPopper">
-          <uploadEyeDropper
-            :img.sync="fileUrl"
-            v-model="customInput"
-            @change="handleConfirm"
-          />
-        </template>
-
-      </div>
-      <div class="flex right el-color-dropdown__btns flex between">
-        <div class="app-color-dropdown_active-color">
-          <div >{{ $t('选色器.已选颜色')}}：<span  v-if="customInput" :style="{background:customInput}"></span></div>
-        </div>
-        <div>
-          <el-button
-            size="mini"
-
-            class="el-color-dropdown__link-btn"
-            @click="showPopper = false"
-          >
-            {{ $t('通用.取消') }}
-          </el-button>
-          <el-button
-            size="mini"
-            class="el-color-dropdown__link-btn"
-            @click="$emit('clear')"
-          >
-            {{ $t('公共组件.清空') }}
-          </el-button>
-          <el-button
-            plain
-            size="mini"
-            class="el-color-dropdown__btn button--primary1"
-            @click="confirmValue"
-          >
-            {{ $t('公共组件.确定') }}
-          </el-button>
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-import SvPanel from 'element-ui/packages/color-picker/src/components/sv-panel'
-import HueSlider from 'element-ui/packages/color-picker/src/components/hue-slider'
-import AlphaSlider from 'element-ui/packages/color-picker/src/components/alpha-slider'
-import Predefine from 'element-ui/packages/color-picker/src/components/predefine'
-import Popper from 'element-ui/src/utils/vue-popper'
-import Locale from 'element-ui/src/mixins/locale'
-import ElInput from 'element-ui/packages/input'
-import ElButton from 'element-ui/packages/button'
-import canvasEyeDropper from '@/views/customized/components/ColorPicker/canvasEyeDropper'
-import uploadEyeDropper from '@/views/customized/components/ColorPicker/uploadEyeDropper'
-import { get, set } from '@/utils/cookie'
-import popupManager from 'element-ui/lib/utils/popup/popup-manager'
-import Color from 'element-ui/packages/color-picker/src/color'
-import { rgb } from '@/utils/reg'
-export default {
-  name: 'ColorPickerDropdown',
-
-  components: {
-    SvPanel,
-    HueSlider,
-    AlphaSlider,
-    ElInput,
-    canvasEyeDropper,
-    uploadEyeDropper,
-    ElButton,
-    Predefine
-  },
-
-  mixins: [Popper, Locale],
-
-  props: {
-    color: {
-      required: true
-    },
-    imageUrl:String,
-    showAlpha: Boolean,
-    predefine: Array,
-    showTips:{
-      type: Boolean,
-      default: true
-    }
-  },
-
-  data() {
-    return {
-      customInput: '',
-      colorList: [
-        '#000000', '#aa0000', '#005500', '#aa5500', '#00aa00', '#aaaa00', '#00ff00', '#aaff00',
-        '#00007f', '#aa007f', '#00557f', '#aa557f', '#00aa7f', '#aaaa7f', '#00ff7f', '#aaff7f',
-        '#0000ff', '#aa00ff', '#0055ff', '#aa55ff', '#00aaff', '#aaaaff', '#00ffff', '#aaffff',
-        '#550000', '#ff0000', '#555500', '#ff5500', '#55aa00', '#ffaa00', '#55ff00', '#ffff00',
-        '#55007f', '#ff007f', '#55557f', '#ff557f', '#55aa7f', '#ffaa7f', '#55ff7f', '#ffff7f',
-        '#5500ff', '#ff00ff', '#5555ff', '#ff55ff', '#55aaff', '#ffaaff', '#55ffff', '#ffffff'
-      ],
-      r:"",
-      g:"",
-      b:"",
-      colorPCList:['#FFFFFF','#000000'],
-      tab:1,
-      fileUrl:"",
-      zIndex:popupManager.nextZIndex()
-    }
-  },
-
-  computed: {
-    currentColor() {
-      const parent = this.$parent
-      return !parent.value && !parent.showPanelColor ? '' : parent.color.value
-    }
-  },
-
-  watch: {
-    showPopper(val) {
-      if (val === true) {
-        this.$emit('showPopper')
-        this.tab = 1;
-        this.getcolorList();
-        this.$nextTick(() => {
-
-          this.zIndex = popupManager.nextZIndex()
-          const { sl, hue, alpha } = this.$refs
-          sl && sl.update()
-          hue && hue.update()
-          alpha && alpha.update()
-        })
-      }
-    },
-
-    currentColor: {
-      immediate: true,
-      handler(val) {
-        this.customInput = val
-        this.HEXTotRGB()
-      }
-    }
-  },
-
-  mounted() {
-    this.$parent.popperElm = this.popperElm = this.$el
-    this.referenceElm = this.$parent.$el
-  },
-
-  methods: {
-    toggelTab(tab){
-      this.tab = tab
-    },
-    confirmValue() {
-      this.$emit('pick')
-      this.setcolorList()
-      this.getcolorList();
-    },
-    handleConfirm() {
-      this.color.fromString(this.customInput)
-      this.HEXTotRGB();
-
-    },
-    changeRGB(value,type){
-      if(!rgb.test(value)){
-        let v = parseInt(value)
-        v =  isNaN(v) ? "" : v
-        v = v > 255 ? 255 : ""
-        this[type] = v
-      }else{
-        this[type] = parseInt(value)
-      }
-    },
-    handleRGBConfirm(){
-      console.log('a')
-      console.log(this.b)
-      console.log(typeof this.b)
-
-      if(typeof this.r !== 'number' || typeof this.g !== 'number' || typeof this.b !== 'number'){
-        return;
-      }
-      console.log('b')
-      const currentValueColor = new Color({
-        enableAlpha: false,
-        format: 'hex'
-      });
-      currentValueColor.fromString(`rgb(${this.r},${this.g},${this.b})`);
-      if(currentValueColor.value){
-        this.customInput = currentValueColor.value
-        this.color.fromString(this.customInput)
-      }
-    },
-    HEXTotRGB(){
-      if(!this.customInput){
-
-        this.r = "";
-        this.g = "";
-        this.b = "";
-        return;
-      };
-      const currentValueColor = new Color({
-        enableAlpha: false,
-        format: 'rgb'
-      });
-      currentValueColor.fromString(this.customInput);
-      const {r,g,b} = this.displayedRgb(currentValueColor, false);
-      this.r = r;
-      this.g = g;
-      this.b = b;
-    },
-    displayedRgb(color, showAlpha) {
-      if (!(color instanceof Color)) {
-        throw Error('color should be instance of Color Class');
-      }
-
-      return color.toRgb();
-    },
-    setcolorList(){
-
-      let color = []
-      try {
-        color = JSON.parse(get('colorList'))
-      } catch(e)
-      {
-        console.log(e)
-      }
-      if(color.includes(this.customInput)){
-        return;
-      }
-      if(color.length >= 100){
-        color.splice(0,1)
-      }
-      color.push(this.customInput)
-      set('colorList',color)
-      this.getcolorList()
-
-    },
-    getcolorList(){
-      let arr = ['#FFFFFF','#000000']
-      let color = []
-      try {
-
-        color = JSON.parse(get('colorList'))
-      } catch(e)
-      {
-        console.log(e)
-
-      }
-      this.colorPCList = [...arr,...color].splice(0,56)
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-</style>
-
-<style lang="scss">
-.app-color-dropdown {
-  width: 710px;
-  background: #212121;
-  border:1px solid #212121;
-  padding:0 ;
-
-
-  .app-color-header {
-    background: #383838;
-    padding-right: 15px;
-    margin-bottom: 10px;
-    .app-color-tabs {
-      .tab {
-        color: #fff;
-        font-size: 14px;
-        padding: 10px 15px;
-        cursor: pointer;
-        &.active {
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-    }
-  }
-
-
-  .app-color-dropdown-tips__title {
-    color: #fff;
-
-    padding:  0 10px;
-    line-height: 30px;
-  }
-  .app-color-dropdown-hb {
-    padding:  0 10px;
-    height: 400px;
-  }
-  .app-color-dropdown-tips {
-    width: 200px;
-    margin-right: 10px;
-    .app-color-dropdown-tips__color {
-      display: flex;
-      flex-wrap: wrap;
-        .app-color-dropdown-tips__item {
-          cursor: pointer;
-          width: 20px;
-          height: 20px;
-          margin-right: 5px;
-          margin-top:5px;
-        }
-    }
-
-  }
-  .el-color-dropdown__value {
-    width: 200px;
-  }
-  .el-color-dropdown__main-wrapper {
-    width: 480px;
-    height: 390px;
-    .el-color-hue-slider {
-      height: 390px !important;
-    }
-    .el-color-svpanel {
-
-      width: 460px !important;
-      height: 390px !important;
-
-    }
-  }
-  .el-color-dropdown__btns {
-    padding:  5px 10px;
-    .app-color-dropdown_active-color {
-      color: #fff;
-      font-size: 14px;
-      span {
-        padding: 0px 30px;
-      }
-    }
-    border-top: 1px solid #333;
-    .el-button {
-      width: 80px;
-    }
-  }
-  .close {
-    color: #fff;
-    height: 30px;
-    .el-icon-close {
-      cursor: pointer;
-    }
-  }
-}
-</style>

frontend/src/components/ColorPicker/uploadEyeDropper.vue

@@ -1,143 +0,0 @@
-<template>
-  <div  class="upload-eye-dropper_wrap flex">
-    <el-upload
-      action="/"
-      v-show="!imageUrl"
-      ref="uploader"
-      :accept="'.' + imagesUploadLimit.accept.join(',.')"
-      list-type="picture-card"
-
-      :http-request="upload">
-      <div class="image-main flex">
-        <div class="center flex">
-          <img class="add-icon " @dragstart.prevent style="width: 28px;" src="@/assets/images/tupian.png"/>
-          <div class="fs-14" > {{ $t('选色器.上传图片')}}</div>
-        </div>
-      </div>
-    </el-upload>
-    <div class="canvas" v-if="imageUrl">
-
-      <canvasEyeDropper
-        :image-url="imageUrl"
-        v-model="color"
-        :key="imageUrl"
-        @change="handleConfirm"
-        :canvas-style="{
-              width:680,
-              height:400,
-            }"
-      />
-
-      <el-button class="rest-upload button--primary1" @click="againUpload">{{ $t('选色器.重新上传')}}</el-button>
-
-    </div>
-  </div>
-
-</template>
-<script>
-import { imagesUploadLimit } from '@/utils/appconfig'
-import { blobtoBase64 } from '@/utils/components/htmlToImg'
-import canvasEyeDropper from '@/views/customized/components/ColorPicker/canvasEyeDropper'
-
-export default {
-  name: 'uploadEyeDropper',
-
-  props: {
-    img:String,
-  },
-  components:{
-    canvasEyeDropper,
-  },
-  data() {
-    return {
-      imagesUploadLimit,
-      imageUrl:"",
-      color:"",
-    }
-  },
-  computed: {
-  },
-  watch: {
-  },
-  mounted() {
-    if(this.img)  this.imageUrl = this.img
-  },
-  methods: {
-    // 初始化
-    async upload(params){
-      const isLt2M = params.file.size / 1024 < this.imagesUploadLimit.fileSize
-      if (this.imagesUploadLimit.accept.indexOf(params.file.name.toLocaleLowerCase().split('.')[params.file.name.toLocaleLowerCase().split('.').length - 1]) < 0) {
-        this.$message.error($t('选色器.请上传') + this.imagesUploadLimit.accept.join(',') +  $t('选色器.格式文件'))
-        return false
-      }
-      if (!isLt2M) {
-        this.$message.error( $t('选色器.上传文件大小不能超过') + this.imagesUploadLimit.fileLimit)
-        return false
-      }
-      const url = await  blobtoBase64(params.file)
-      this.imageUrl = url
-      this.$emit('update:img',url)
-    },
-    handleConfirm(){
-      this.$emit('input',this.color)
-      this.$emit('change')
-    },
-    async againUpload(){
-      await this.$nextTick()
-      this.$refs.uploader.$children[1].$refs.input.click()
-
-    }
-
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-.upload-eye-dropper_wrap {
-  width:100%;
-  height:400px;
-  position: relative;
-  .rest-upload {
-    position: absolute;
-    left: 50%;
-    bottom:15px;
-    margin-left: -30px;
-  }
-  ::v-deep {
-    .el-upload--picture-card{
-      background: none;
-      border: none;
-    }
-  }
-  .image-main {
-    border-radius: 10px;
-    width: 145px;
-    height: 145px;
-    background: url('~@/assets/images/bg-image.png');
-    background-color: #585858;
-    background-size: 24px 24px;
-    overflow: hidden;
-
-
-    .center {
-      flex-direction: column;
-      width: 145pxpx;
-      font-size: 14px;
-      line-height: 20px;
-      color: #fff;
-      align-items: center;
-
-      .add-icon {
-        font-size: 32px;
-      }
-    }
-
-    .upload-text {
-      color: $primary2;
-    }
-
-  }
-}
-
-</style>

frontend/src/views/components/marketingEdit/index.vue

@@ -1,6 +1,5 @@
-<template>
 
-</template>
+
 <script>
 import fabric from '../PictureEditor/js/fabric-adapter'
 import tpl from './tpl/index'
@@ -64,6 +63,7 @@ export default {
       sceneTplImg:"",//生成的时候记录下来，用户重做
     }
   },
+  template: tpl(),
   computed: {
   },
   watch: {

frontend/vite.config.ts

@@ -12,7 +12,7 @@ export default ({mode, command})=> {
   return defineConfig({
     // 插件配置，这里使用了Vue插件，以便支持Vue项目的构建
     plugins: [
-        vue(),
+       vue(),
       /* 替换字符串 */
       replace({
         preventAssignment: true,
@@ -50,6 +50,7 @@ export default ({mode, command})=> {
       // 这有助于减少路径引用的复杂性，提高代码的可读性和可维护性
       alias: {
         '@': path.resolve(__dirname, './src'),
+        vue: 'vue/dist/vue.esm-bundler.js' // 使用带 compiler 的构建版本
       },
     },
     // 配置服务器相关设置