mod:调整

frontend/src/components/upload/indexSlot.vue

@@ -114,77 +114,21 @@ export default {
       const isLt2M = params.file.size / 1024 < this.fileSize
 
       if (this.accept.indexOf(params.file.name.toLocaleLowerCase().split('.')[params.file.name.toLocaleLowerCase().split('.').length - 1]) < 0) {
-        this.$message.error($t('公共组件.请上传') + this.accept.join(',') +  $t('公共组件.格式文件'))
+        this.$message.error('请上传' + this.accept.join(',') +  '格式文件')
         return false
       }
 
       if (!isLt2M) {
-        this.$message.error($t('公共组件.上传文件大小不能超过') + imagesUploadLimit.fileLimit + '!')
+        this.$message.error('上传文件大小不能超过' + imagesUploadLimit.fileLimit + '!')
         return false
       }
 
-      //此判断宽高只针对图片
-      const keys = Object.keys(this.checkImageDimensions)
-       if(keys.length > 0){
 
-       const image = await  this.$appfun.getImageDimensions(params.file)
-        let  errStr = ''
-        let check  = true;
-        keys.map(key=>{
-            switch (key){
-              case "minWidth":
-                  if(image.width < this.checkImageDimensions.minWidth){
-                    check = false;
-                    errStr += '宽度不能小于'+ this.checkImageDimensions.minWidth +'；'
-                  }
-                break;
-              case "maxWidth":
-                  if(image.width > this.checkImageDimensions.maxWidth){
-                    check = false;
-                    errStr += '宽度不能大于'+ this.checkImageDimensions.maxWidth+'；'
-                  }
-                break;
-              case "minHeight":
-                if(image.height < this.checkImageDimensions.minHeight) {
-                  check = false;
-                  errStr += '高度不能小于'+ this.checkImageDimensions.minHeight+'；'
-                }
-                break;
-              case "maxHeight":
-                if(image.height > this.checkImageDimensions.maxHeight){
-                  check = false;
-                  errStr += '高度不能大于'+ this.checkImageDimensions.maxHeight+'；'
-                }
-                break;
-              case "minFileSize":
-                if(params.file.size  < this.checkImageDimensions.minFileSize){
-                  check = false;
-                  errStr += '大小不能小于'+ parseInt(this.checkImageDimensions.minFileSize/1024) + 'kb；'
-                }
-                break;
-              case "maxFileSize":
-                if(params.file.size  > this.checkImageDimensions.maxFileSize ){
-                  check = false;
-                  errStr += '大小不能大于'+ parseInt(this.checkImageDimensions.maxFileSize/1024) + 'kb；'
-                }
-                break;
-            }
-        })
-       if(!check){
-         //提示语写死
-         const action = await this.$confirm($t('公共组件.请注意，您上传的图片尺寸过小（最小边＞512，图片大小＞50k），AI生成结果质量可能较差，建议您上传干净背景的高清大图') ,{
-           confirmButtonText:$t('公共组件.继续使用'),
-           cancelButtonText:$t('公共组件.重新上传')
-         })
-         if(action !== 'confirm') return ;
-       }
-
-      }
       const res = await this.uploadApi({
         file: params.file,
         ...this.otherParams
       })
-      this.$emit('input', res.data.url)
+     this.$emit('input', res.data.url)
     },
     del() {
       this.$emit('input', '')

frontend/src/views/Tpl/Edit/index.vue

@@ -1,8 +1,13 @@
 <template>
-  <headerBar title="编辑模板" />
+  <headerBar :title="title" />
 
-  <marketingEdit>
-  </marketingEdit>
+  <marketingEdit
+      :canvasStyle="{
+          width:1020,
+          height:4000,
+      }"
+    @save="save"
+  />
 
 
 
@@ -13,15 +18,11 @@ import { ref, reactive } from 'vue';
 import headerBar from "@/components/header-bar/index.vue";
 import marketingEdit from '@/views/components/marketingEdit'
 
-// 定义相关变量
-const fcanvasKey = ref(0); // 控制 marketingEdit 组件的重新渲染
-const image = ref(''); // 模板主图路径
-const scene = ref(null); // 场景数据
-const empty = ref(false); // 是否为空状态
-const step = ref(1); // 当前编辑步骤
-const controlToolConfig = reactive(['zoom', 'rotate']); // 控制工具配置
-const result_image = ref(''); // 最终生成的图片结果
+const title = ref('编辑-公用模板')
 
+const save = (data: any) => {
+  console.log(data)
+}
 </script>
 
 <style lang="scss" scoped>

frontend/src/views/components/PictureEditor/mixin/actions/index.js

@@ -166,7 +166,6 @@ export default  {
       left:50,
       bottom:50,
     }, ) {
-
       return  new Promise((resolve, reject) => {
 
         if(!this.fcanvas.add){
@@ -176,7 +175,7 @@ export default  {
 
 
           let sort =  options.sort || this.getNextLayersSort()
-          let erasable =  options.erasable === false ? false : true
+          let erasable = false
           let selectable =  options.selectable === false ? false : true
           let id = this.getNextLayersId()
           this.fcanvas.discardActiveObject()
@@ -190,7 +189,6 @@ export default  {
             sort,
             id,
             erasable:erasable,
-
           }))
           img.moveTo(sort)
           if(img.getScaledWidth() > options.maxWidth){
@@ -205,7 +203,6 @@ export default  {
           this.getLayers()
           if(selectable) this.select(img)
           this.fcanvas.renderAll();
-          console.log(img)
           resolve(img)
         }, {
           crossOrigin: 'anonymous',

frontend/src/views/components/PictureEditor/mixin/actions/tpl.js

@@ -79,11 +79,6 @@ export default  function (){
     </template>
 
 
-    <div class="item"  v-if="toolConfig.includes('reset')"  @click="toReset">
-      <div class="icon flex"><img src="${shanyibu}"></div>
-      <div class="text">重置</div>
-    </div>
-
     <div class="item"  v-if="toolConfig.includes('empty')"  @click="setEmpty">
       <div class="icon flex"><img src="${shanchu}"></div>
       <div class="text">清空</div>
@@ -99,4 +94,4 @@ export default  function (){
   </div>
 
 
-  `
+  `

frontend/src/views/components/PictureEditor/mixin/edit/index.scss

@@ -1,8 +1,8 @@
 .picture-editor-wrap_edit {
-  position: absolute;
-  width: 300px;
-  right: -400px;
-  top:0px;
+  position: fixed;
+  width: 200px;
+  right: 0px;
+  top:30px;
   z-index: 10;
   bottom: 0px;
   background: #fff;

frontend/src/views/components/PictureEditor/mixin/edit/module/textbox.js

@@ -14,7 +14,7 @@ const textbox = () => {
           <div class="label title_two">字体</div>
           <div class="flex left">
             <el-select
-            :value="fontFamilyStyle || editLayer.fontFamily"
+            v-model="fontFamilyStyle || editLayer.fontFamily"
             :clearable="false"
             placeholder="请选择"
             @change="setFontFamily"
@@ -106,11 +106,11 @@ const textbox = () => {
           <div class="title_two">新增/修改</div>
           <div>
             <el-input
-            :value="editLayer.text"
+            v-model="editLayer.text"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 8}"
              maxlength="255"
-             @input="(val)=> editObj({label:'text',value:val})"
+             @input.native="(val)=> editObj({label:'text',value:val})"
             />
 
           </div>

frontend/src/views/components/PictureEditor/mixin/edit/module/tools.js

@@ -22,18 +22,20 @@ export default  {
     return `
           <div class="title_two">透明度</div>
           <div class="flex left">
+         <!-- <el-input v-model="editLayer.opacity"/>-->
                 <el-slider
                  size="small"
-                  :value="editLayer.opacity*100"
+                  v-model="editLayer.opacity"
                   style="width:100%"
-                  :step="1"
-                   @input="(val)=>editObj({label:'opacity',value:val/100} )"
-                  :min="0"
-                  :max="100"
+                  :step="0.01"
+                  :min="0.01"
+                  :max="1"
+                  :show-tooltip="false"
+                   @input.native="(val)=>editObj({label:'opacity',value:val} )"
 
                 ></el-slider>
 
           </div>
       `
   }
-}
+}

frontend/src/views/components/PictureEditor/mixin/view/index.js

@@ -87,30 +87,7 @@ const viewMixins = {
   methods: {
     //自适应
     handleResize(){
-      let width = this.$refs.wrap?.clientWidth - this.padding.x;
-      let height = this.$refs.wrap?.clientHeight - this.padding.y
-      let min = Math.max(Math.min(width,height),100)
-      let width_old = this.canvas.width
-      this.canvas.width = min
-      this.canvas.height = min
-      let scaleRatio = (min/width_old).toFixed(4)
-      let objects = this.fcanvas.getObjects();
-
-      objects.forEach(function(object) {
-        // 调整对象的位置
-        object.left *= scaleRatio;
-        object.top *= scaleRatio;
 
-        // 调整对象的大小
-        object.scaleX *= scaleRatio;
-        object.scaleY *= scaleRatio;
-      });
-
-      // 调整画布的大小
-      var newWidth = this.fcanvas.getWidth() * scaleRatio;
-      var newHeight = this.fcanvas.getHeight() * scaleRatio;
-      this.fcanvas.setDimensions({ width: newWidth, height: newHeight });
-      this.fcanvas.requestRenderAll();
     },
     async proportionResize(){
        await this.setMax()

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

@@ -14,50 +14,20 @@ export default {
   mixins: [ viewMixins,actionsMixins,layerMixins,colorMixins,editMixins],
 
   props: {
-    scene: {
+    width: {
       type: String,
-      default: ''
+      default: '1024px'
     },
-    autoUpload:{
+    height:{
       type: Boolean,
-      default: true
+      default: '1024px'
     },
-    image: {
-      type: String,
-      default: ''
-    },
-    resultImage:{
-      type: String,
-      default: ''
-    },
-    template:{
-      type:Object,
-      default:()=>{
-          return {}
-      }
-    },
-    seniorEditor:{
-      type: Boolean,
-      default: false
-    },
-    disabled:{
-      type: Boolean,
-      default: false
-    },
-    //xy
-    padding:{
-      type:Object,
-      default:()=>{
-        return {
-          x:0,
-          y:0
-        }
-      }
 
-    },
   },
   data() {
     return {
+      disabled:false,
+
       fcanvas: {},
       scale: 1,
       sceneTplImg:"",//生成的时候记录下来，用户重做
@@ -82,23 +52,23 @@ export default {
       await this.viewInit()
       await  this.$nextTick()
       this.fcanvas = new fabric.Canvas('marketing-canvas', {
+        backgroundColor:"#ffffff",
         containerClass:"fcanvas",
         // 元素对象被选中时保持在当前z轴，不会跳到最顶层
         preserveObjectStacking:true,
-        width: this.canvas.width,
-        height: this.canvas.height
+        width: this.canvasStyle.width,
+        height: this.canvasStyle.height
       })
+      //保留最初的状态
+      this.updateCanvasState()
+      // this.minimapInit()
       this.actionInit()
       this.layerInit();
-      console.log(this)
-      console.log(this.template)
-      console.log(tpl())
-/*      if(this.template?.fcanvas) await this.setTpl()
-      if(this.scene) await this.setScene()*/
-///      await this.setImage()
-     await  this.$nextTick()
+      await  this.$nextTick()
       this.$emit('init')
 
+      this.addMaps('https://ossimg.valimart.net/uploads/vali_ai/20250606/174919236960718.png')
+
 
 
     },
@@ -114,17 +84,14 @@ export default {
   top:0;
   right: 0;
   bottom:0;
+  background: #efefef;
+  overflow: auto;
 
   .picture-editor-wrap_canvas {
     position: relative;
-    border: 1px #e1e1e1 dashed;
-    width: calc(100% - 400px) !important;
-    height: calc(100%)  !important;
-    border-radius: 10px;
+    margin-top: 30px;
     .picture-editor-canvas {
-      height: 100%;
-      border-radius: 5px;
-      overflow: hidden;
+      height: calc(100vh - 40px);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -146,18 +113,14 @@ export default {
   }
 
   .add-action-wrap {
-    position: absolute;
-    top:0px;
-    right: -95px;
+    position: fixed;
+    top:30px;
+    left: 0px;
     bottom: 0;
-    width: 81px;
+    width: 200px;
 
-    background: rgba(169,176,255,0.1);
+    background:#fff;
     box-shadow: 0px 2px 4px 0px rgba(170,177,255,0.54);
-    border-radius: 8px;
-    .add-action_title {
-      padding: 10px 0;
-    }
 
     .el-button {
       display: block;
@@ -168,7 +131,8 @@ export default {
       background: none;
       margin-top: 10px;
       border: none;
-      text-align: center;
+      margin-left: 20px;
+      text-align: left;
       &.el-button--primary {
         background: none;
         color: #000;
@@ -182,6 +146,7 @@ export default {
       margin: 0 auto;
       font-size: 28px;
       color: #000;
+      margin-right: 10px;
       background: #E2E5FC;
     }
 

frontend/src/views/components/marketingEdit/tpl/add.js

@@ -3,40 +3,43 @@ import tianjia from '@/views/components/PictureEditor/mixin/actions/images/tianj
 import shanyibu from '@/views/components/PictureEditor/images/shanyibu.png'
 
 let svg = () => {
+
   return `
       <div class="add-action-wrap">
-          <div class="flex between w-full">
-          <slot name="leftTitle"></slot>
+          <div class="flex left w-full">
           <div class="w-full" v-show="!disabled">
               <div class="text te-c fw-b add-action_title step-label"><div class="step-row_color small">调整工具</div></div>
               <el-dropdown class="w-full">
-                  <el-button>
+                    <el-button>
                        <div class="icon flex w-full"><img src="${tianjia}" class="icon"></div>
-                        <div class="w-full">新增/修改</div>
+                        <div class="w-full">新增</div>
                   </el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item>
-                  <UploadSlot background='none' ref="upload"
-                    class="upload-wrap " @input="addMaps">
-                        <div>新增图片</div>
-                  </UploadSlot>
-                 </el-dropdown-item>
-                <el-dropdown-item>
-                  <UploadSlot background='none' ref="upload"
-                    :accept="['svg']"
-                    class="upload-wrap" @input="addSvg">
-                        <div>新增svg</div>
-                  </UploadSlot>
-                </el-dropdown-item>
-                <el-dropdown-item @click.native="addText"> <div class="te-c">新增文字</div></el-dropdown-item>
-                <el-dropdown-item v-if="seniorEditor">
-                  <UploadSlot background='none' ref="upload"
-                    class="upload-wrap" @input="editScene">
-                         <div class="te-c">改背景</div>
-                  </UploadSlot>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item>
+                      <UploadSlot background='none' ref="upload"
+                        class="upload-wrap " @input="addMaps">
+                            <div>新增图片</div>
+                      </UploadSlot>
+                    </el-dropdown-item>
+                    
+                    <el-dropdown-item>
+                    
+                        <UploadSlot background='none' ref="upload"
+                        :accept="['svg']"
+                        class="upload-wrap" @input="addSvg">
+                            <div>新增svg</div>
+                      </UploadSlot>
+                        
+                    </el-dropdown-item>
+                    
+                    <el-dropdown-item  @click.native="addText"><div class="te-c">新增文字</div></el-dropdown-item>
+                
+                    
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+
               <el-button @click="toSelect" :type=" action == 'select' ? 'primary' : ''" class="mar-left-10">
                         <div class="icon flex"><img src="${xz}" class="icon"></div>
                         <div>选择</div>
@@ -54,4 +57,4 @@ let svg = () => {
       </div>
      `
 }
-export default svg
+export default svg

frontend/src/views/components/marketingEdit/tpl/index.js

@@ -7,26 +7,26 @@ import add from "./add";
 export  default function tpl(){
   return `
     <transition name="fade">
-      <div ref="wrap" class="picture-editor-wrap flex left">
+      <div ref="wrap" class="picture-editor-wrap flex">
+      
+          <!--新增-->
+          ${add()}
+          <!--新增-->
         <div
           class="picture-editor-wrap_canvas"
         >
-        <template v-if="viewStatus">
           <!--视图-->
            ${viewTpl()}
           <!--视图-->
 
-          <!--新增-->
-          ${add()}
-          <!--新增-->
+        </div>
+        
           <!--颜色图-->
            ${colorTpl()}
           <!--颜色图-->
           <!--图层-->
           ${editTpl()}
           <!--图层-->
-          </template>
-        </div>
       </div>
     </transition>
   `

frontend/src/views/components/marketingEdit/tpl/view.js

@@ -4,17 +4,11 @@ import shanyibu from '@/views/components/PictureEditor/images/shanyibu.png'
 
 export default function() {
   return `
-    <div class="picture-editor-empty flex" v-if="isEmpty" >
-        <slot name="empty">
-           <span class="c-333 fs-12">请在右侧点击素材或点击点击添加图层来添加素材}</span>
-        </slot>
-    </div>
     <div class="picture-editor-canvas">
-       <div  v-if="!isEmpty">
-            <canvas id="marketing-canvas" />
+       <div  v-if="!isEmpty" style="width: calc(100% + 8px); height: 100%; overflow: auto">
+            <canvas id="marketing-canvas" width="500" height="500"/>
       </div>
     </div>
-     <slot name="bottomBtn"></slot>
   `
 }