新增模版 调整

src/components/home/temDesign.vue

@@ -5,11 +5,33 @@
         <template #header>
             <div class="text-title text-center fz16 PingFangSC">创建设计</div>
         </template>
+        <div class="addTemplateBox fz14">
+            
+            <div class="q-mt-xs q-mb-lg row">
+                <template v-for="(item,index) in typeArr">
+                    <div class="MarketButton cursor-pointer" 
+                        v-if="item.type>0"
+                        :class="[setTemplateType == item.type?'active':'']" :key="index"
+                        @click="onTypeChangeHandler(item.type,2)">
+                            {{item.typeName}}
+                    </div>
+                </template>
+            </div>
+        </div>
         <div class="addTemplateBox fz14">
             <div class="color0 q-mb-lg text-left">推荐尺寸</div>
             <div class="q-mt-xs">
                 <div v-for="(item,index) in RecommendedSizes">
-                    <div class="row addTemplateBoxRec rounded6 cursor-pointer"
+                    <div v-if="setTemplateType==1&&item.type" class="row addTemplateBoxRec rounded6 cursor-pointer"
+                    :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'active':'']" @click="Recommended(item)">
+                        <span class="color0"
+                        :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'color0']">{{item.Name}}</span>
+                        <p class="q-pl-md"
+                        :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'colorBA']">
+                            <span class="q-ml-xs">{{item.width}} * {{item.height}} px</span>
+                        </p>
+                    </div>
+                    <div v-if="setTemplateType==2&&!item.type" class="row addTemplateBoxRec rounded6 cursor-pointer"
                     :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'active':'']" @click="Recommended(item)">
                         <span class="color0"
                         :class="[datas.TemplateBoxRec&&datas.TemplateBoxRec.Id==item.Id?'colorF':'color0']">{{item.Name}}</span>
@@ -21,18 +43,8 @@
                 </div>
             </div>
         </div>
-        <div class="addTemplateBox fz14">
-            <div class="color0 text-left">自义定尺寸</div>
-            <div class="q-mt-xs q-mb-lg row">
-                <template v-for="(item,index) in typeArr">
-                    <div class="MarketButton cursor-pointer" 
-                        v-if="item.type>0"
-                        :class="[setTemplateType == item.type?'active':'']" :key="index"
-                        @click="onTypeChangeHandler(item.type,2)">
-                            {{item.typeName}}
-                    </div>
-                </template>
-            </div>
+        <div class="addTemplateBox fz14" v-if="setTemplateType==2">
+            <div class="color0 text-left q-pb-lg">自义定尺寸</div>
             <div class="addTemplateInput q-mt-xs  row items-center">
                 <el-input type="number" min="750" v-model="datas.CustomSize.width"
                 placeholder="宽" class="input-with-select" @change="setDimension"></el-input>
@@ -84,8 +96,9 @@ const marketRef = ref<any>()
 const RecommendedSizes = ref([
     {Name: '手机海报',width:750,height:1334,Id:1,checked:false},
     {Name: '小红书配图',width:1242,height:1660,Id:2,checked:false},
-    {Name: 'PPT(16:9)',width:1920,height:1080,Id:3,checked:false},
-    {Name: '公众号首图',width:900,height:383,Id:4,checked:false},
+    {Name: '公众号首图',width:900,height:383,Id:3,checked:false},
+    {Name: 'PPT(16:9)',width:1754,height:1240,Id:4,checked:false,type:1},
+    {Name: 'PPT(9:16)',width:1240,height:1754,Id:5,checked:false,type:1},
 ])
 const scrollContainer = ref<any>()
 const scrollToElement = ref<any>()
@@ -191,13 +204,21 @@ const Recommended = (row:Object) => {
     datas.CustomSize.height = null
 }
 const ConfirmCreation = () => {
-    if(!datas.TemplateBoxRec&&(!datas.CustomSize.width&&!datas.CustomSize.height)) {
+    if(setTemplateType.value==1&&!datas.TemplateBoxRec) {
+        return ElMessage.warning({
+            showClose: true,
+            message: `请选择推荐尺寸`,
+        })
+    }
+    if(setTemplateType.value==2&&!datas.TemplateBoxRec&&!datas.CustomSize.width&&!datas.CustomSize.height) {
         return ElMessage.warning({
             showClose: true,
             message: `请选择推荐尺寸或自定义尺寸`,
         })
     }
-    if(!datas.TemplateBoxRec&&(!datas.CustomSize.width||!datas.CustomSize.height)){
+    if(setTemplateType.value==2&&!datas.TemplateBoxRec&&
+    ((datas.CustomSize.width&&!datas.CustomSize.height)
+    ||(!datas.CustomSize.width&&datas.CustomSize.height))){
         if(!datas.width){
             return ElMessage.warning({
                 showClose: true,
@@ -215,12 +236,16 @@ const ConfirmCreation = () => {
     if(datas.TemplateBoxRec&&datas.TemplateBoxRec.Id){
         VIEWPORT_SIZE.value = datas.TemplateBoxRec.width
         VIEWPORT_VER_SIZE.value = datas.TemplateBoxRec.height
-        viewportRatios = datas.TemplateBoxRec.height/datas.TemplateBoxRec.width
-        slidesStore.setViewportRatio(viewportRatios)
-        if(datas.TemplateBoxRec.Id==3) {
+        
+        
+        if(datas.TemplateBoxRec.Id==4||datas.TemplateBoxRec.Id==5) {
+            viewportRatios = datas.TemplateBoxRec.Id==4? 0.7069 : 1.414
+            slidesStore.setViewportRatio(viewportRatios)
             datas.TemplateBoxRec = null
             addTemplate(1)
         }else {
+            viewportRatios = datas.TemplateBoxRec.height/datas.TemplateBoxRec.width
+            slidesStore.setViewportRatio(viewportRatios)
             datas.TemplateBoxRec = null
             addTemplate(2)
         }

src/views/Editor/Thumbnails/index.vue

@@ -134,7 +134,6 @@ const acquiesceLogo = ref([
 
 const tempDatas = ({} as any)
 const colorList = ref([] as any)
-
 watch(() => slideIndex.value, () => {
   // 清除多选状态的幻灯片
   if (selectedSlidesIndex.value.length) {

src/views/Editor/Toolbar/SlideDesignPanel.vue

@@ -126,6 +126,22 @@
         />
       </div>
     </template>
+    <template v-else>
+      <Divider />
+
+      <div class="row">
+        <div style="width: 40%;">画布尺寸：</div>
+        
+      </div>
+      <div class="addTemplateInput q-mt-xs row items-center">
+        <el-input size="small" type="number" min="750" v-model="datas.CustomSize.width"
+        placeholder="宽" class="input-with-selectWH" @change="setDimension"></el-input>
+        <span class="q-px-md">*</span>
+        <el-input size="small" type="number" min="383" v-model="datas.CustomSize.height"
+        placeholder="高" class="input-with-selectWH" @change="setDimension"></el-input>
+        <span class="q-ml-md" >px</span>
+    </div>
+    </template>
     
 
     <Divider />
@@ -336,7 +352,13 @@ import Select from '@/components/Select.vue'
 import Popover from '@/components/Popover.vue'
 import NumberInput from '@/components/NumberInput.vue'
 
+import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
+
 const datas = reactive({
+  CustomSize:{ // 自定义尺寸
+    width: VIEWPORT_SIZE.value,
+    height: VIEWPORT_VER_SIZE.value,
+  },
   DataSource:{
     DataSourceOverlay: false
   }
@@ -370,6 +392,14 @@ const {
   applyThemeToAllSlides,
 } = useSlideTheme()
 
+// 更改广告尺寸
+const setDimension = () => {
+  VIEWPORT_SIZE.value = datas.CustomSize.width
+  VIEWPORT_VER_SIZE.value = datas.CustomSize.height
+  let viewportRatios = datas.CustomSize.height/datas.CustomSize.width
+  slidesStore.setViewportRatio(viewportRatios)
+}
+
 // 设置背景模式：纯色、图片、渐变色
 const updateBackgroundType = (type: 'solid' | 'image' | 'gradient') => {
   if (type === 'solid') {
@@ -445,6 +475,14 @@ const updateViewportRatio = (value: number) => {
 </script>
 
 <style lang="scss" scoped>
+  .input-with-selectWH{
+    height: 30px;
+    border-radius: 3px;
+  }
+  .input-with-selectWH::v-deep(.el-input__wrapper){
+    border-radius: 2px;
+    font-size: 14px;
+  }
 .selectText::v-deep(.el-input__wrapper){
   border-radius: 2px;
   padding: 1px 10px;

src/views/Editor/index.vue

@@ -95,7 +95,7 @@ let TemplatesType = 0
 if(searchData.value.TempId) TempIds = searchData.value.TempId
 else if(TempId.value) TempIds = TempId.value
 if(searchData.value.TemplateType) TemplatesType = searchData.value.TemplateType
-if(searchData.value.TemplateType!=2&&!searchData.value.TempId) useSlidesStore().setViewportRatio(1.414)
+// if(searchData.value.TemplateType!=2&&!searchData.value.TempId) useSlidesStore().setViewportRatio(1.414)
 const refThumbnails = ref(null)
 const param = router.currentRoute.value.params
 const viewSlideShow = param.status