ppt渲染 应该算是搞完了

src/api/ppt.js

@@ -59,7 +59,7 @@ export function apiPPTShare(params){
  * @param GroupId
  */
 export function apiPPTCopy(params){
-    return post('/pptv2/copy')
+    return post('/pptv2/copy',params)
 }
 
 /**

src/api/sheet.js

@@ -0,0 +1,11 @@
+// ETA表格
+import { get,post } from "./index";
+
+
+/**
+ * 通过code获取表格详情
+ * @param UniqueCode 
+ */
+export function apiSheetInfoByCode(params){
+    return get('/datamanage/excel_info/table_data',params)
+}

src/assets/styles/common.scss

@@ -23,4 +23,18 @@ input{
     display: block;
     border: none;
     box-sizing: border-box;
+}
+P{
+    margin: 0;
+    padding: 0;
+}
+// 全局滚动条样式
+::-webkit-scrollbar {
+    width: 10PX;
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+  
+::-webkit-scrollbar-thumb {
+    background: #7a7a7a;
+    border-radius: 5PX;
 }

src/assets/styles/var.scss

@@ -1,5 +1,6 @@
 
 $theme-color:#0052D9;//主题色
 $font-grey:#666666;
+$font-grey_999:#999;
 $border-color:#DCDFE6;
 $theme-red:#C54322;

src/router/ppt.js

@@ -11,5 +11,11 @@ export const pptRoutes=[
         name:"PPTDetail",
         component: () => import("@/views/ppt/Detail.vue"),
         meta: { title: "智能PPT" },
+    },
+    {
+        path:"/ppt/search",
+        name:"PPTSearch",
+        component: () => import("@/views/ppt/Search.vue"),
+        meta: { title: "搜索PPT" },
     }
 ]

src/views/ppt/Detail.vue

@@ -24,8 +24,9 @@ getPPTDetail()
 
 // 监听页面尺寸变化缩放页面
 function onResize({width}){
-    const scale=width/1000
+    const scale=width/900
     const el=document.getElementsByClassName('ppt-detail-page')[0]
+    if(!el) return
     el.style.transform=`scale(${scale})`
 }
 
@@ -48,7 +49,5 @@ function onResize({width}){
     width: 100%;
     position: absolute;
     transform-origin: 0 0;
-    // overflow-x: auto;
-    // transform: scale();
 }
 </style>

src/views/ppt/Index.vue

@@ -2,9 +2,14 @@
 import {ref,reactive} from 'vue'
 import {apiPPTClassify} from '@/api/ppt'
 import MobileClassifyWrap from './components/MobileClassifyWrap.vue'
+import { useRouter } from 'vue-router'
 
-const searchVal=ref('')
+const router=useRouter()
 
+// 跳转搜索
+function goMobileSearch(){
+    router.push('/ppt/search')
+}
 
 
 
@@ -13,7 +18,12 @@ const searchVal=ref('')
 <template>
     <div class="ppt-index-page">
         <div class="search-box">
-            <van-search shape="round" readonly placeholder="请输入搜索关键词" />
+            <van-search 
+                shape="round" 
+                readonly 
+                placeholder="请输入搜索关键词" 
+                @click="goMobileSearch"
+            />
         </div>
         <MobileClassifyWrap/>
     </div>

src/views/ppt/Search.vue

@@ -0,0 +1,44 @@
+<script setup>
+import {ref} from 'vue'
+
+const searchVal=ref('')
+
+</script>
+
+<template>
+    <div class="mobile-ppt-search-page">
+        <div class="search-wrap">
+            <van-search 
+                v-model="searchVal"
+                shape="round"  
+                placeholder="请输入搜索关键词"
+            />
+        </div>
+        <ul class="list-wrap">
+            <li class="item">
+                <div class="title">名称</div>
+                <div class="time">ccw 2023-01-16创建</div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.search-wrap{
+    position: sticky;
+    top: 0;
+    z-index: 99;
+}
+
+.list-wrap{
+    padding: 34px;
+    .item{
+        padding: 30px 0 20px 0;
+        border-bottom: 1px solid $border-color;
+        .time{
+            color: $font-grey_999;
+            margin-top: 10px;
+        }
+    }
+}
+</style>

src/views/ppt/components/ChartWrap.vue

@@ -48,6 +48,8 @@ onMounted(()=>{
 .ppt-chart-box{
     width: 100%;
     height: 100%;
+    position: relative;
+    z-index: 10;
     .chart-box{
         width: 100%;
         height: 100%;

src/views/ppt/components/ImageWrap.vue

@@ -0,0 +1,26 @@
+<script setup>
+const props=defineProps({
+    itemData:{
+        type:Object,
+        default:{}
+    }
+})
+</script>
+
+<template>
+    <div class="image-box">
+        <img :src="itemData.src" alt="">
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.image-box{
+    width: 100%;
+    height: 100%;
+    img{
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+}
+</style>

src/views/ppt/components/MobileClassifyWrap.vue

@@ -44,7 +44,7 @@ getPPTClassifyData()
                         <template #title>
                             <div class="title-second">
                                 <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
-                                <span>{{item.GroupName}}</span>
+                                <span class="van-ellipsis">{{item.GroupName}}</span>
                                 <img @click.stop="handleShowFileOpt(item)" class="menu-icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                             </div>
                         </template>
@@ -54,7 +54,7 @@ getPPTClassifyData()
                             :key="_item.GroupId"
                             @click.stop="goPPTDetail(_item)"
                         >
-                            <span>{{ _item.Title }}</span>
+                            <span class="van-ellipsis text">{{ _item.Title }}</span>
                             <img @click.stop="handleShowPPTOpt(_item)" class="menu-icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                         </div>
                     </van-collapse-item>
@@ -74,7 +74,7 @@ getPPTClassifyData()
                         <template #title>
                             <div class="title-second">
                                 <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
-                                <span>{{item.GroupName}}</span>
+                                <span class="van-ellipsis">{{item.GroupName}}</span>
                             </div>
                         </template>
                         <div 
@@ -83,8 +83,8 @@ getPPTClassifyData()
                             :key="_item.GroupId"
                             @click.stop="goPPTDetail(_item)"
                         >
-                            <span>{{ _item.Title }}</span>
-                            <img class="menu-icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
+                            <span class="van-ellipsis text">{{ _item.Title }}</span>
+                            <img @click.stop="handleShowPPTOpt(_item,true)" class="menu-icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
                         </div>
                     </van-collapse-item>
                 </van-collapse>
@@ -164,7 +164,7 @@ getPPTClassifyData()
                 <img src="@/assets/imgs/ppt/ppt_icon_copy.png" alt="">
                 <span>复制</span>
             </div>
-            <div class="item border red" @click="handlePPTDel">
+            <div class="item border red" @click="handlePPTDel" v-if="!PPTOptState.isCommon">
                 <img src="@/assets/imgs/icon_del.png" alt="">
                 <span>删除</span>
             </div>
@@ -231,6 +231,10 @@ getPPTClassifyData()
             width: 32px;
             margin-right: 20px;
         }
+        span{
+            display: block;
+            width: 80%;
+        }
         .menu-icon{
             width: 4px;
             position: absolute;
@@ -246,10 +250,15 @@ getPPTClassifyData()
         padding-bottom: 10px;
         position: relative;
         color: $font-grey;
+        .text{
+            width: 90%;
+            display: block;
+        }
         .menu-icon{
             width: 4px;
             position: absolute;
-            right: 0vh;
+            right: 0;
+            top: 40px;
         }
     }
 }

src/views/ppt/components/SheetWrap.vue

@@ -0,0 +1,64 @@
+<script setup>
+import {onMounted,ref} from 'vue'
+import {apiSheetInfoByCode} from '@/api/sheet.js'
+
+const props=defineProps({
+    itemData:{
+        type:Object,
+        default:{}
+    }
+})
+
+// 获取表格数据
+let list=ref([])
+async function getSheetInfo(){
+    const res=await apiSheetInfoByCode({UniqueCode:props.itemData.sheetId})
+    if(res.Ret===200){
+        list.value=res.Data?.TableInfo?.TableDataList||[]
+    }
+}
+
+
+onMounted(()=>{
+    getSheetInfo()
+})
+
+</script>
+
+<template>
+    <div class="sheet-box">
+        <table>
+            <tbody>
+                <tr v-for="(row,rowIndex) in list" :key="rowIndex">
+                    <td v-for="(col,colIndex) in row" 
+                        :key="colIndex"
+                        :rowspan="col.mc.rs===0?1:col.mc.rs"
+                        :colspan="col.mc.cs===0?1:col.mc.cs">
+                        <div>{{col.m}}</div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.sheet-box{
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    &::-webkit-scrollbar{
+        width: 4px;
+    }
+    table{
+        width:100%;
+        border-collapse: collapse;
+        border-spacing: 0;
+        td{
+			border: 1px solid #747474;
+			height: 45px;
+			text-align: center;
+		}
+    }
+}
+</style>

src/views/ppt/components/layers/LineMarker.vue

@@ -0,0 +1,61 @@
+<script setup>
+import {computed} from 'vue'
+const props=defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    position: {
+        type: String,
+        required: true,
+    },
+    type: {
+        type: String,
+        required: true,
+    },
+    color: {
+        type: String,
+    },
+    baseSize: {
+        type: Number,
+        required: true,
+    },
+})
+
+const pathMap = {
+  arrow: 'M0,0 L10,5 0,10 Z',
+}
+const rotateMap = {
+  'arrow-start': 180,
+  'arrow-end': 0,
+}
+
+const path=computed(()=>{
+    return pathMap[props.type]
+})
+const rotate=computed(()=>{
+    return rotateMap[`${props.type}-${props.position}`] || 0
+})
+const size=computed(()=>{
+    return props.baseSize < 2 ? 2 : props.baseSize
+})
+
+</script>
+<template>
+    <marker 
+        :id="`${id}-${type}-${position}`" 
+        orient="auto" 
+        markerUnits="userSpaceOnUse"
+        :markerWidth="size * 5" 
+        :markerHeight="size * 5" 
+        :refX="size*2.5" 
+        :refY="size*2.5"
+    >
+		<path 
+            :d="path" 
+            :fill="color"
+            :transform="`scale(${size*0.5}) rotate(${rotate}, 5, 5)`"
+        ></path>
+	</marker>
+</template>
+

src/views/ppt/components/layers/LineShape.vue

@@ -0,0 +1,97 @@
+<script setup>
+import {computed,onMounted,ref} from 'vue'
+import { useDebounceFn  } from '@vueuse/core'
+import LineMarker from './LineMarker.vue'
+const props=defineProps({
+    itemData:{
+        type:Object,
+        default:{}
+    }
+})
+
+const svgWidth=computed(()=>{
+    const width = Math.abs(props.itemData.start[0] - props.itemData.end[0])
+    return width < 25 ? 25 : width
+}) 
+
+const svgHeight=computed(()=>{
+    const height = Math.abs(props.itemData.start[1] - props.itemData.end[1])
+    return height < 25 ? 25 : height
+}) 
+
+// 需要单独缩放图层模块
+let scale=ref('')
+const domResize=useDebounceFn (()=>{
+    console.log('更新layer大小');
+    const w= document.getElementsByClassName('ppt-detail-page')[0].clientWidth
+    scale.value=`scale(${w/906},${w/906})`
+},0)
+
+onMounted(() => {
+    window.addEventListener("resize", () => {
+        // domResize()
+    }, false)
+})
+
+</script>
+
+
+
+
+
+<template>
+    <div 
+        class="line-shape-box"
+        :style="{
+            top: itemData.percentageTop*100 + '%',
+            left: itemData.percentageLeft*100 + '%',
+            transform:scale
+        }"
+    >
+        <svg 
+            overflow="visible" 
+            :width="svgWidth"
+            :height="svgHeight"
+        >
+            <defs>
+                <LineMarker
+                    v-if="itemData.points[0]"
+                    :id="itemData.id"
+                    position="start"
+                    :type="itemData.points[0]"
+                    :color="itemData.color"
+                    :baseSize="itemData.strokeWidth"
+                />
+                <LineMarker
+                    v-if="itemData.points[1]"
+                    :id="itemData.id"
+                    position="end"
+                    :type="itemData.points[1]"
+                    :color="itemData.color"
+                    :baseSize="itemData.strokeWidth"
+                />
+            </defs>
+            <path   
+                :d="`M ${itemData.start[0]}, ${itemData.start[1]} L ${itemData.end[0]}, ${itemData.end[1]}`" 
+                fill="none"
+                :stroke="itemData.color"
+                :stroke-width="itemData.strokeWidth" 
+                :stroke-dasharray="itemData.style === 'dashed' ? '10 6' : '0 0'"
+                :marker-start="itemData.points[0] ? `url(#${itemData.id}-${itemData.points[0]}-start)` : ''"
+                :marker-end="itemData.points[1] ? `url(#${itemData.id}-${itemData.points[1]}-end)` : ''" 
+            ></path>
+        </svg>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.line-shape-box{
+    position: absolute;
+    pointer-events: none;
+    transform-origin: 0 0;
+    svg{
+        overflow:visible;
+        transform-origin: 0 0;
+    }
+}
+</style>

src/views/ppt/components/layers/RectShape.vue

@@ -0,0 +1,73 @@
+<script setup>
+import {onMounted,ref} from  'vue'
+import { useDebounceFn  } from '@vueuse/core'
+const props=defineProps({
+    itemData:{
+        type:Object,
+        default:{}
+    }
+})
+
+// 需要单独缩放图层模块
+let scale=ref('')
+const domResize=useDebounceFn (()=>{
+    console.log('更新layer大小');
+    const w= document.getElementsByClassName('ppt-detail-page')[0].clientWidth
+    console.log('ppt-detail-page',w);
+    scale.value=`scale(${w/906},${w/906})`
+},0)
+
+onMounted(() => {
+    window.addEventListener("resize", () => {
+        // domResize()
+    }, false)
+})
+
+
+</script>
+
+<template>
+    <div 
+        class="rect-shape-box"
+        :style="{
+            top: itemData.percentageTop*100 + '%',
+            left: itemData.percentageLeft*100 + '%',
+            transform:scale
+        }"
+    >
+        <svg 
+            overflow="visible" 
+            :width="itemData.width"
+            :height="itemData.height"
+        >
+            <g 
+            :transform="`scale(${itemData.width / itemData.viewBox[0]}, ${itemData.height / itemData.viewBox[1]}) translate(0,0) matrix(1,0,0,1,0,0)`"
+            >
+                <path 
+                    class="shape-path"
+                    vector-effect="non-scaling-stroke" 
+                    stroke-linecap="butt" 
+                    stroke-miterlimit="8"
+                    stroke-linejoin="" 
+                    :d="itemData.path" 
+                    :fill="itemData.fill"
+                    :stroke="itemData.outline.color"
+                    :stroke-width="itemData.outline.width" 
+                    :stroke-dasharray="itemData.outline.style === 'dashed' ? '10 6' : '0 0'" 
+                ></path>
+            </g>
+        </svg>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.rect-shape-box{
+    position: absolute;
+    pointer-events: none;
+    transform-origin: 0 0;
+    svg{
+        overflow:visible;
+        transform-origin: 0 0;
+    }
+}
+</style>

src/views/ppt/components/layers/TextShape.vue

@@ -0,0 +1,46 @@
+<script setup>
+const props=defineProps({
+    itemData:{
+        type:Object,
+        default:{}
+    }
+})
+</script>
+
+
+<template>
+    <div 
+        class="text-shape-box"
+        :style="{
+            top: itemData.percentageTop*100 + '%',
+            left: itemData.percentageLeft*100 + '%',
+            width: itemData.percentageWidth*100 + '%',
+            height: itemData.percentageHeight*100 + '%',
+        }"
+    >
+        <div class="text-content">
+            <div style="width:100%;height:100%">
+                <div class="rich-text-box" v-html="itemData.richContent"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.text-shape-box{
+    position: absolute;
+    pointer-events: none;
+    // padding: 10PX;
+    .text-content{
+        width: 100%;
+        height: 100%;
+        padding: 10PX;
+        .rich-text-box{
+            padding: 10PX;
+            font-size: 16PX;
+        }
+    }
+    
+}
+</style>
+

src/views/ppt/hooks/createPPTContent.js

@@ -15,6 +15,12 @@ import FormatEight from '../template/FormatEight.vue'
 import FormatNine from '../template/FormatNine.vue'
 import ChartWrap from '../components/ChartWrap.vue'
 import RichText from '../components/RichText.vue'
+import ImageWrap from '../components/ImageWrap.vue'
+import SheetWrap from '../components/SheetWrap.vue'
+
+import RectShape from '../components/layers/RectShape.vue'
+import LineShape from '../components/layers/LineShape.vue'
+import TextShape from '../components/layers/TextShape.vue'
 
 /**
  * 格式化ppt内容
@@ -70,7 +76,6 @@ export function createPPTContent(params){
 /**
  * ppt模板Map
  * 根据modelId获取是哪个模板组件
- * 此处动态组件需要用markRaw
  */
 export function getTemplate(modelId){
     const modelMap=new Map([
@@ -96,8 +101,10 @@ export function getTemplate(modelId){
  */
 export function getPPTContentType(position,list){
     const typeMap=new Map([
-        ['chart',markRaw(ChartWrap)],
-        ['text',markRaw(RichText)]
+        ['chart',ChartWrap],
+        ['text',RichText],
+        ['image',ImageWrap],
+        ['sheet',SheetWrap]
     ])
     // 查找出list中的position和position对应的类型
     let type=''
@@ -124,3 +131,14 @@ export function getPPTContentItemData(position,data){
     return {...obj,pptPageIndex:data.pptPageIndex}
 }
 
+/**
+ * 设置ppt每页中的layer图层类型
+ */
+export function getPPTLayerType(data){
+    const typeMap=new Map([
+        ['shape',RectShape],
+        ['line',LineShape],
+        ['text',TextShape]
+    ])
+    return typeMap.get(data.type)
+}

src/views/ppt/hooks/useClassify.js

@@ -105,14 +105,18 @@ export function useClassify(){
 
     // 显示ppt录编辑弹窗
     const PPTOptState=reactive({
+        isCommon:false,//是否为公共ppt目录下的
         show:false,
         data:{},
         showCopy:false,//显示选择复制到目录的弹窗
         copyActions:[],//选择复制到目录数
         copySelectData:{},//复制选择的目录
+        
     })
-    const handleShowPPTOpt=(e)=>{
+    // e ppt的数据   isCommon：true 是否为公共ppt下面的ppt
+    const handleShowPPTOpt=(e,isCommon)=>{
         PPTOptState.data=e
+        PPTOptState.isCommon=isCommon||false
         PPTOptState.show=true
     }
     // 删除ppt
@@ -153,6 +157,11 @@ export function useClassify(){
     }
     // 保存 复制ppt
     const handlePPTCopy=()=>{
+        if(!PPTOptState.copySelectData.GroupId){
+            showToast('请选择目录');
+            return
+        }
+        
         apiPPTCopy({
             PptId:PPTOptState.data.PptId,
             GroupId:PPTOptState.copySelectData.GroupId

src/views/ppt/style/common.scss

@@ -1,5 +1,5 @@
-$pptItemW:1000PX;
-$pptItemH:700PX;
+$pptItemW:900PX;
+$pptItemH:630PX;
 
 .ppt-item-box{
     width: $pptItemW;
@@ -7,9 +7,10 @@ $pptItemH:700PX;
     background: url('https://hzstatic.hzinsights.com/static/ppt_m/pptitem_bg.png');
     background-size: cover;
     background-repeat: no-repeat;
-    margin-top: 10PX;
+    margin-top: 20PX;
     position: relative;
     overflow: hidden;
+    // border: 4PX solid transparent;
     .ppt-title-box{
         width: 68%;
         height: 7%;
@@ -28,10 +29,22 @@ $pptItemH:700PX;
         top: 14%;
         width: 100%;
         height: 86%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
         .container{
             width: 90%;
             height: 90%;
             margin: auto;
         }
+        .layer-wrap{
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            z-index: 5;
+            pointer-events: none;
+        }
     }
 }

src/views/ppt/template/FormatEight.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {getPPTContentType,getPPTContentItemData} from '../hooks/createPPTContent'
+import {getPPTContentType,getPPTContentItemData,getPPTLayerType} from '../hooks/createPPTContent'
 
 const props=defineProps({
     pageData:{
@@ -28,6 +28,14 @@ const props=defineProps({
 					/>
 				</div>
 			</div>
+			<div class="layer-wrap">
+				<template v-for="item in pageData.layers" :key="item.id">
+					<component 
+						:is="getPPTLayerType(item)"
+						:itemData="item"
+					/>
+				</template>
+			</div>
 		</div>
 	</div>
 </template>

src/views/ppt/template/FormatFive.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {getPPTContentType,getPPTContentItemData} from '../hooks/createPPTContent'
+import {getPPTContentType,getPPTContentItemData,getPPTLayerType} from '../hooks/createPPTContent'
 
 const props=defineProps({
     pageData:{
@@ -40,6 +40,14 @@ const props=defineProps({
 					/>
 				</div>
 			</div>
+			<div class="layer-wrap">
+				<template v-for="item in pageData.layers" :key="item.id">
+					<component 
+						:is="getPPTLayerType(item)"
+						:itemData="item"
+					/>
+				</template>
+			</div>
 		</div>
 	</div>
 </template>

src/views/ppt/template/FormatFour.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {getPPTContentType,getPPTContentItemData} from '../hooks/createPPTContent'
+import {getPPTContentType,getPPTContentItemData,getPPTLayerType} from '../hooks/createPPTContent'
 
 const props=defineProps({
     pageData:{
@@ -23,14 +23,14 @@ const props=defineProps({
 				</div>
 				<div class="item-half-box">
 					<component 
-						:is="getPPTContentType(2,pageData.elements)"
-						:itemData="getPPTContentItemData(2,pageData)"
+						:is="getPPTContentType(3,pageData.elements)"
+						:itemData="getPPTContentItemData(3,pageData)"
 					/>
 				</div>
 				<div class="item-half-box">
 					<component 
-						:is="getPPTContentType(3,pageData.elements)"
-						:itemData="getPPTContentItemData(3,pageData)"
+						:is="getPPTContentType(2,pageData.elements)"
+						:itemData="getPPTContentItemData(2,pageData)"
 					/>
 				</div>
 				<div class="item-half-box">
@@ -40,6 +40,14 @@ const props=defineProps({
 					/>
 				</div>
 			</div>
+			<div class="layer-wrap">
+				<template v-for="item in pageData.layers" :key="item.id">
+					<component 
+						:is="getPPTLayerType(item)"
+						:itemData="item"
+					/>
+				</template>
+			</div>
 		</div>
 	</div>
 </template>

src/views/ppt/template/FormatNine.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {getPPTContentType,getPPTContentItemData} from '../hooks/createPPTContent'
+import {getPPTContentType,getPPTContentItemData,getPPTLayerType} from '../hooks/createPPTContent'
 
 const props=defineProps({
     pageData:{
@@ -36,6 +36,14 @@ const props=defineProps({
 					/>
 				</div>
 			</div>
+			<div class="layer-wrap">
+				<template v-for="item in pageData.layers" :key="item.id">
+					<component 
+						:is="getPPTLayerType(item)"
+						:itemData="item"
+					/>
+				</template>
+			</div>
 		</div>
 	</div>
 </template>

src/views/ppt/template/FormatOne.vue

@@ -1,6 +1,5 @@
 <script setup>
-
-import {getPPTContentType,getPPTContentItemData} from '../hooks/createPPTContent'
+import {getPPTContentType,getPPTContentItemData,getPPTLayerType} from '../hooks/createPPTContent'
 
 const props=defineProps({
     pageData:{
@@ -21,6 +20,14 @@ const props=defineProps({
 					:itemData="getPPTContentItemData(1,pageData)"
 				/>
 			</div>
+			<div class="layer-wrap">
+				<template v-for="item in pageData.layers" :key="item.id">
+					<component 
+						:is="getPPTLayerType(item)"
+						:itemData="item"
+					/>
+				</template>
+			</div>
         </div>
 	</div>
 </template>

src/views/ppt/template/FormatSeven.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {getPPTContentType,getPPTContentItemData} from '../hooks/createPPTContent'
+import {getPPTContentType,getPPTContentItemData,getPPTLayerType} from '../hooks/createPPTContent'
 
 const props=defineProps({
     pageData:{
@@ -28,6 +28,14 @@ const props=defineProps({
 					/>
 				</div>
 			</div>
+			<div class="layer-wrap">
+				<template v-for="item in pageData.layers" :key="item.id">
+					<component 
+						:is="getPPTLayerType(item)"
+						:itemData="item"
+					/>
+				</template>
+			</div>
 		</div>
 	</div>
 </template>

src/views/ppt/template/FormatSix.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {getPPTContentType,getPPTContentItemData} from '../hooks/createPPTContent'
+import {getPPTContentType,getPPTContentItemData,getPPTLayerType} from '../hooks/createPPTContent'
 
 const props=defineProps({
     pageData:{
@@ -20,6 +20,14 @@ const props=defineProps({
 					:itemData="getPPTContentItemData(1,pageData)"
 				/>
 			</div>
+			<div class="layer-wrap">
+				<template v-for="item in pageData.layers" :key="item.id">
+					<component 
+						:is="getPPTLayerType(item)"
+						:itemData="item"
+					/>
+				</template>
+			</div>
 		</div>
 	</div>
 </template>

src/views/ppt/template/FormatThree.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {getPPTContentType,getPPTContentItemData} from '../hooks/createPPTContent'
+import {getPPTContentType,getPPTContentItemData,getPPTLayerType} from '../hooks/createPPTContent'
 
 const props=defineProps({
     pageData:{
@@ -36,6 +36,14 @@ const props=defineProps({
 					/>
 				</div>
 			</div>
+			<div class="layer-wrap">
+				<template v-for="item in pageData.layers" :key="item.id">
+					<component 
+						:is="getPPTLayerType(item)"
+						:itemData="item"
+					/>
+				</template>
+			</div>
 		</div>
 	</div>
 </template>

src/views/ppt/template/FormatTwo.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import {getPPTContentType,getPPTContentItemData} from '../hooks/createPPTContent'
+import {getPPTContentType,getPPTContentItemData,getPPTLayerType} from '../hooks/createPPTContent'
 
 const props=defineProps({
     pageData:{
@@ -29,6 +29,14 @@ const props=defineProps({
 					/>
 				</div>
 			</div>
+			<div class="layer-wrap">
+				<template v-for="item in pageData.layers" :key="item.id">
+					<component 
+						:is="getPPTLayerType(item)"
+						:itemData="item"
+					/>
+				</template>
+			</div>
 		</div>
 	</div>
 </template>

src/views/tabbar/Home.vue

@@ -62,6 +62,7 @@ function goNext(path){
                 height: 326px;
                 margin: 0 20px;
                 font-size: 20px;
+                border-radius: 32px;
                 img{
                     width: 120px;
                     height: 120px;