feat: ✨新增图片放大

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
+    "@fancyapps/ui": "^5.0.22",
     "@icon-park/vue-next": "^1.4.2",
     "@lottiefiles/lottie-player": "^2.0.2",
     "@vueuse/core": "^10.1.2",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ dependencies:
   '@element-plus/icons-vue':
     specifier: ^2.1.0
     version: 2.1.0(vue@3.3.4)
+  '@fancyapps/ui':
+    specifier: ^5.0.22
+    version: 5.0.22
   '@icon-park/vue-next':
     specifier: ^1.4.2
     version: 1.4.2(vue@3.3.4)
@@ -1033,6 +1036,10 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@fancyapps/ui@5.0.22:
+    resolution: {integrity: sha512-44A5/Hm59mn53FqZRyM4HO/R7UWE79UxgNyHmaudSe+HuU5Kl1g6lxR4Ol1QFaqNS97Pbdytlu4SxYsOX1BTxw==}
+    dev: false
+
   /@floating-ui/core@1.3.1:
     resolution: {integrity: sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==}
     dev: false
@@ -3988,7 +3995,7 @@ packages:
       lodash-es: 4.17.21
       vanilla-jsoneditor: 0.17.8
       vue: 3.3.4
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.6(vue@3.3.4)
       vue-global-config: 0.4.0(vue@3.3.4)
     dev: true
 
@@ -5750,6 +5757,21 @@ packages:
     dependencies:
       vue: 3.3.4
 
+  /vue-demi@0.14.6(vue@3.3.4):
+    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.3.4
+    dev: true
+
   /vue-eslint-parser@9.3.1(eslint@8.40.0):
     resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -5772,7 +5794,7 @@ packages:
     resolution: {integrity: sha512-283vpYOhVHJCpMkjNVEwZdgaAb+Y93zFaXGAWTI378MLoNuwQydjD/BAy1e81QYEmyA+JbxqcmMZVWcM9rbriw==}
     dependencies:
       eslint-config-vue-global-api: 0.4.1
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.6(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue

src/main.ts

@@ -19,6 +19,7 @@ import 'vue-global-api';
 import 'element-plus/dist/index.css';
 import 'element-plus/theme-chalk/dark/css-vars.css';
 import '@icon-park/vue-next/styles/index.css';
+import '@fancyapps/ui/dist/fancybox/fancybox.css';
 import '@/styles/index.scss';
 import 'uno.css';
 

src/pages/workplace/configuration/components/Banner.vue

@@ -49,7 +49,8 @@
 </template>
 
 <script lang="tsx" name="Banner" setup>
-import { ElButton, ElSpace, ElImage, ElMessageBox, ElMessage } from 'element-plus';
+import { ElButton, ElSpace, ElMessageBox, ElMessage } from 'element-plus';
+import { Fancybox } from '@fancyapps/ui';
 import Sortable from 'sortablejs';
 import BannerDialog from './BannerDialog.vue';
 import { BU_DOU_CONFIG } from '@/config';
@@ -60,6 +61,20 @@ import { bannerGet, bannerDelete } from '@/api/workplace/banner';
 /**
  * 表格
  */
+// 图片预览
+const previewPicture = (url: string) => {
+  const imgList = [];
+  imgList.push({ src: url });
+  Fancybox.show(imgList, {
+    Toolbar: {
+      display: {
+        left: ['infobar'],
+        middle: ['zoomIn', 'zoomOut', 'toggle1to1', 'rotateCCW', 'rotateCW', 'flipX', 'flipY'],
+        right: ['slideshow', 'thumbs', 'close']
+      }
+    }
+  });
+};
 const column = reactive<Column.ColumnOptions[]>([
   {
     prop: 'title',
@@ -68,12 +83,13 @@ const column = reactive<Column.ColumnOptions[]>([
   {
     prop: 'cover',
     label: '图片',
+    width: 146,
     render: (scope: any) => {
       let img_url = '';
       if (scope.row['cover']) {
         img_url = `${BU_DOU_CONFIG.APP_URL}${scope.row.cover}`;
       }
-      return <ElImage src={img_url} fit={'scale-down'} class={'w-120px h-60px'} />;
+      return <img src={img_url} class={'w-120px h-60px cursor-pointer'} onClick={() => previewPicture(img_url)} />;
     }
   },
   {

src/pages/workplace/manage/index.vue

@@ -68,7 +68,8 @@ meta:
 </route>
 
 <script lang="tsx" setup>
-import { ElButton, ElMessageBox, ElMessage, ElSpace, ElImage } from 'element-plus';
+import { ElButton, ElMessageBox, ElMessage, ElSpace } from 'element-plus';
+import { Fancybox } from '@fancyapps/ui';
 import Apply from './components/Apply.vue';
 import { BU_DOU_CONFIG } from '@/config';
 
@@ -92,6 +93,20 @@ const onApplyClick = () => {
   getTableList();
 };
 
+const previewPicture = (url: string) => {
+  const imgList = [];
+  imgList.push({ src: url });
+  Fancybox.show(imgList, {
+    Toolbar: {
+      display: {
+        left: ['infobar'],
+        middle: ['zoomIn', 'zoomOut', 'toggle1to1', 'rotateCCW', 'rotateCW', 'flipX', 'flipY'],
+        right: ['slideshow', 'thumbs', 'close']
+      }
+    }
+  });
+};
+
 /**
  * 表格
  */
@@ -106,7 +121,7 @@ const column = reactive<Column.ColumnOptions[]>([
       if (scope.row['icon']) {
         img_url = `${BU_DOU_CONFIG.APP_URL}${scope.row.icon}`;
       }
-      return <ElImage src={img_url} fit={'scale-down'} class={'w-60px h-60px'} />;
+      return <img src={img_url} class={'w-60px h-60px cursor-pointer'} onClick={() => previewPicture(img_url)} />;
     }
   },
   {