src/renderer/src/components/grid-pic/index.vue

@@ -1,35 +1,26 @@
 <template>
-  <div style="position: relative;height: 100%;width: 100%;">
+  <draggable handle=".header-btn" :draggable="false" item-key="backgroundColor" v-model="gridPicList" class="grid-pic-wrap" :style="getGrid">
-    <draggable handle=".header-btn" :draggable="false" item-key="backgroundColor" v-model="gridPicList" class="grid-pic-wrap" :style="getGrid">
+    <template #item="{ element, index }">
-      <template #item="{ element, index }">
+      <div class="grid-pic-item" :key="element.backgroundColor" :style="getWH(element,index)">
-        <div class="grid-pic-item" :key="element.backgroundColor" :style="getWH(element,index)">
+        <div class="delete-btn" @click="gridPicList.splice(index,1)">X</div>
-          <div class="delete-btn" @click="gridPicList.splice(index,1)">X</div>
+        <div class="header-btn"></div>
-          <div class="header-btn"></div>
+        <ViewerItem :gridPicList="gridPicList" :index="index" :images="[element.src]"></ViewerItem>
-          <ViewerItem :gridPicList="gridPicList" :index="index" :images="element"></ViewerItem>
+      </div>
-        </div>
+    </template>
-      </template>
+  </draggable>
-    </draggable>
+  <el-input style="position:fixed;bottom: 20px;right: 80px;width: 1000px" v-model="inputValue" type="text" />
-    <el-input style="position:fixed;bottom: 20px;right: 180px;width: 1000px" v-model="inputValue" type="text" />
+  <el-button class="add-btn" @click="addPic">
-    <el-button class="add-btn" @click="addPic">
+    添加
-      添加
+  </el-button>
-    </el-button>
-    <el-button style="position:fixed;bottom: 20px;right: 80px;" @click="startPencil">
-      画笔
-    </el-button>
-    <div class="modal-mode">
-      <canvas id="canvas_pic_001" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></canvas>
-    </div>
-  </div>
 </template>
 
 <script setup>
-  import {ref, computed, onMounted} from 'vue'
+  import {ref, computed} from 'vue'
   import Draggable from 'vuedraggable'
   import ViewerItem from "./viewer-item.vue";
-  import Fabric from 'fabric';
+
   const gridPicList = ref([])
   const inputValue = ref('')
-  const isShow = ref(false)
   // 获取图片样式
   const getWH = (item,index)=>{
     return {
@@ -38,14 +29,6 @@
     }
   }
 
-  const picList = [
-    'https://prev.ysaix.com:7868/src/assets/images/homecard4.jpg',
-    'https://prev.ysaix.com:7868/src/assets/images/homecard3.jpg',
-    'https://prev.ysaix.com:7868/src/assets/images/homecard2.jpg',
-    'https://prev.ysaix.com:7868/src/assets/images/homecard1.jpg',
-    'https://prev.ysaix.com:7868/profile/avatar/2024/06/26/blob_20240626135106A001.png',
-    'https://prev.ysaix.com:7868/assets/app_download.b3fb227b.png'
-  ]
   // 获取grid样式
   const getGrid = computed(() => {
     switch (gridPicList.value.length) {
@@ -123,20 +106,12 @@
     if (gridPicList.value.length >= 9) {
       return
     }
-    let src = inputValue.value||picList[gridPicList.value.length]
-    if (!src) {
-      return;
-    }
     gridPicList.value.push({
-      src: src,
+      src: inputValue.value,
       backgroundColor: getRandomColor()
     })
     inputValue.value = ''
   }
-  //开始画笔
-  const startPencil = () => {
-    isShow.value = !isShow.value
-  }
   // 生成随机颜色
   function getRandomColor() {
     let r = Math.floor(Math.random() * 256).toString(16);
@@ -148,38 +123,13 @@
     b = b.length === 1? '0' + b : b;
     return `#${r}${g}${b}`;
   }
-  //初始化画笔
+
-  const initPend = () => {
-    let canvas = new Fabric.fabric.Canvas('canvas_pic_001',{
-      interactive: false,
-      selection: true,
-      backgroundColor: "rgba(15,15,15,0)"
-    })
-    canvas.defaultCursor = 'default'
-    canvas.setHeight(300)
-    canvas.setWidth(400)
-    canvas.isDrawingMode = true;
-    canvas.freeDrawingBrush = new Fabric.fabric.PencilBrush(canvas)
-    canvas.freeDrawingBrush.width = 1//设置画笔粗细
-    canvas.freeDrawingBrush.color = "red"//设置画笔颜色
-  }
-  onMounted(() => {
-    initPend()
-  })
 </script>
 <style scoped lang="scss">
-.modal-mode{
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 1001;
-  background-color: rgba(0, 0, 0, 0.2);
-}
 .grid-pic-wrap{
   width: 100%;
   height: 100%;
   display: grid;
-  position: absolute;
   overflow: hidden;
   .grid-pic-item{
     //animation: fadeIn 0.5s ease-in-out forwards;

src/renderer/src/components/grid-pic/viewer-item.vue

@@ -1,19 +1,13 @@
 <template>
-  <div class="viewer-item-wrap" :id="'viewer_id'+index">
+  <viewer :ref="collectRef('viewerRef'+index)" :options="optins" :images="images" class="images clearfix">
-    <Viewer @move="move" @moved="moved" @inited="inited" @zoomed="zoomed" :ref="collectRef('viewerRef'+index)" :options="optins" :images="[images.src]" class="images clearfix">
+    <template #default="scope">
-      <template #default="scope">
+      <img v-for="src in scope.images" :key="index" :src="src" style="display: none">
-        <div class="viewer-img-box">
+    </template>
-          <img v-for="src in scope.images" :key="index" :src="src" style="display: none">
+  </viewer>
-        </div>
-      </template>
-    </Viewer>
-  </div>
 </template>
 <script setup>
-import {ref, watch, nextTick, onMounted} from "vue";
+import {ref, watch, nextTick} from "vue";
-import { component as Viewer } from 'v-viewer'
+
-import Fabric from 'fabric';
-import 'viewerjs/dist/viewer.css'
 const props = defineProps({
   images: {
     type: Object,
@@ -28,54 +22,7 @@ const props = defineProps({
     default: () => []
   }
 })
-let $viewer = null;
 const refs = ref([]);
-//初始化时
-const inited = (viewer) => {
-  $viewer = viewer
-}
-//缩放时
-const zoomed = (e) => {
-  setImgStyle()
-  // console.log('zoomed', e)
-}
-//移动时
-const moved = (e) => {
-  setImgStyle()
-  // console.log('moved',e)
-}
-const move = (e) => {
-  // console.log('move', e)
-}
-const appendCanvasToShow = () => {
-  initImgStyle()
-}
-
-const setImgStyle = () => {
-  let item = window.document.getElementById('viewer_id'+props.index)
-  let canvas = item.querySelectorAll('.viewer-canvas')[0]
-  let img = canvas.querySelectorAll('img')[0]
-  let imgStyle = img.getAttribute('style')
-  imgStyle = imgStyle.replace('relative', 'absolute') + 'z-index: 1002';
-  img.style = imgStyle;
-  let canvasNew = canvas.querySelectorAll('canvas')[0]
-  canvasNew.style = imgStyle;
-}
-
-const initImgStyle = () => {
-  let item = window.document.getElementById('viewer_id'+props.index)
-  let canvas = item.querySelectorAll('.viewer-canvas')[0]
-  let img = canvas.querySelectorAll('img')[0];
-  let imgStyle = img.getAttribute('style')
-  imgStyle = imgStyle.replace('relative', 'absolute') + 'z-index: 1002';
-  img.style = imgStyle;
-  const canvasNew = document.createElement('canvas');
-  canvasNew.style = imgStyle;
-  canvasNew.id = 'canvas_pic_'+props.index
-  canvas.appendChild(canvasNew);
-
-  initPend()
-}
 
 const collectRef = (key) => {
   return (el) => {
@@ -83,65 +30,30 @@ const collectRef = (key) => {
   };
 };
 //viewer配置
-const optins = ref({
+const optins = {
   "inline": true,
   "button": false,
   "navbar": false,
   "title": false,
   "toolbar": false,
   "tooltip": true,
+  "movable": true,
   "zoomable": true,
   "rotatable": true,
-  "movable": false,
   "scalable": true,
   "transition": true,
   "fullscreen": true,
   "keyboard": true
-})
+}
 const initViewers = () => {
   refs.value['viewerRef'+props.index]?.rebuildViewer()
-  setTimeout(()=>{
-    initImgStyle()
-  },300)
 }
-//初始化画笔
-const initPend = () => {
-  let canvas = new Fabric.fabric.Canvas('canvas_pic_'+props.index,{
-    interactive: false,
-    selection: true,
-    backgroundColor: "rgba(15,15,15,0)"
-  })
-  canvas.defaultCursor = 'default'
-  canvas.setHeight(300)
-  canvas.setWidth(400)
-  canvas.isDrawingMode = true;
-  canvas.freeDrawingBrush = new Fabric.fabric.PencilBrush(canvas)
-  canvas.freeDrawingBrush.width = 1//设置画笔粗细
-  canvas.freeDrawingBrush.color = "red"//设置画笔颜色
-}
-
 watch(props.gridPicList, (newValue, oldValue) => {
   nextTick(()=>{
     initViewers()
   })
 });
-
-/*
-watch(props.images, (newValue, oldValue) => {
-    // optins.value.movable = newValue.dragable
-  initPend()
-});
-*/
-
-onMounted(()=>{
-  setTimeout(()=>{
-    appendCanvasToShow()
-  }, 300)
-})
 </script>
 <style scoped lang="scss">
-.viewer-item-wrap{
+
-  width: 100%;
-  height: 100%;
-}
 </style>

src/renderer/src/main.js

@@ -17,7 +17,8 @@ import log from 'electron-log/renderer' // 渲染进程日志-文件记录
 import customComponent from '@/components/common' // 自定义组件
 import plugins from './plugins' // plugins插件
 import useUserStore from '@/store/modules/user'
-
+import VueViewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
 if(process.env.NODE_ENV != 'development') { // 非开发环境，将日志打印到日志文件
   Object.assign(console, log.functions) // 渲染进程日志-控制台替换
 }
@@ -41,6 +42,7 @@ import Directive from '@/AixPPTist/src/plugins/directive'
 
 app.use(router)
     .use(store)
+    .use(VueViewer)
     .use(ElementPlus, { locale: zhLocale })
     .use(customComponent) // 自定义组件
     .use(plugins)

src/renderer/src/views/prepare/index.vue

@@ -10,7 +10,7 @@
           <el-dropdown-menu>
             <el-dropdown-item @click="createAIPPT">新建文枢课件</el-dropdown-item>
             <el-dropdown-item @click="aiTOPPT">AI一键生成</el-dropdown-item>
-<!--            <el-dropdown-item @click="openGridPic">打开宫格</el-dropdown-item>-->
+            <el-dropdown-item @click="openGridPic">打开宫格</el-dropdown-item>
             <el-dropdown-item @click="openFilePicker">导入PPT</el-dropdown-item>
             <input type="file" ref="fileInput" style="display: none;" @change="handleFileChange" accept="application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation">
           </el-dropdown-menu>