4 changed files with 32 additions and 168 deletions
--- a/src/renderer/src/components/grid-pic/index.vue
+++ b/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">
-      <template #item="{ 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="header-btn"></div>
-          <ViewerItem :gridPicList="gridPicList" :index="index" :images="element"></ViewerItem>
-        </div>
-      </template>
-    </draggable>
-    <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>
-    <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>
+  <draggable handle=".header-btn" :draggable="false" item-key="backgroundColor" v-model="gridPicList" class="grid-pic-wrap" :style="getGrid">
+    <template #item="{ 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="header-btn"></div>
+        <ViewerItem :gridPicList="gridPicList" :index="index" :images="[element.src]"></ViewerItem>
+      </div>
+    </template>
+  </draggable>
+  <el-input style="position:fixed;bottom: 20px;right: 80px;width: 1000px" v-model="inputValue" type="text" />
+  <el-button class="add-btn" @click="addPic">
+    添加
+  </el-button>
 </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;
--- a/src/renderer/src/components/grid-pic/viewer-item.vue
+++ b/src/renderer/src/components/grid-pic/viewer-item.vue
@ -1,19 +1,13 @@
 <template>
-  <div class="viewer-item-wrap" :id="'viewer_id'+index">
-    <Viewer @move="move" @moved="moved" @inited="inited" @zoomed="zoomed" :ref="collectRef('viewerRef'+index)" :options="optins" :images="[images.src]" class="images clearfix">
-      <template #default="scope">
-        <div class="viewer-img-box">
-          <img v-for="src in scope.images" :key="index" :src="src" style="display: none">
-        </div>
-      </template>
-    </Viewer>
-  </div>
+  <viewer :ref="collectRef('viewerRef'+index)" :options="optins" :images="images" class="images clearfix">
+    <template #default="scope">
+      <img v-for="src in scope.images" :key="index" :src="src" style="display: none">
+    </template>
+  </viewer>
 </template>
 <script setup>
-import {ref, watch, nextTick, onMounted} from "vue";
-import { component as Viewer } from 'v-viewer'
-import Fabric from 'fabric';
-import 'viewerjs/dist/viewer.css'
+import {ref, watch, nextTick} from "vue";
+
 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>
--- a/src/renderer/src/main.js
+++ b/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)
--- a/src/renderer/src/views/prepare/index.vue
+++ b/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>