前端和后端源码，合并到一个git仓库中，方便用户下载，避免前后端不匹配的问题

jeecgboot-vue3/src/views/demo/jeecg/ImgTurnPage.vue

@@ -0,0 +1,170 @@
+<template>
+  <div style="min-width: 800px">
+    <a-row>
+      <!-- 左侧文件树 -->
+      <a-col :span="6">
+        <a-tree
+          showLine
+          :treeData="treeData"
+          :expandedKeys="[expandedKeys[0]]"
+          :selectedKeys="selectedKeys"
+          :style="{ height: '500px', 'border-right': '2px solid #c1c1c1', 'overflow-y': 'auto' }"
+          @expand="onExpand"
+          @select="onSelect"
+        ></a-tree>
+      </a-col>
+
+      <!--右侧缩略图-->
+      <a-col :span="18">
+        <a-row style="margin-top: 10px; padding-left: 2%">
+          <a-col :span="24" style="margin-bottom: 10px">
+            <a-button @click="prev" preIcon="ant-design:left-outlined" type="primary">上一页</a-button>
+            <a-button @click="next" preIcon="ant-design:right-outlined" style="margin-left: 8px" type="primary">下一页</a-button>
+            <span style="margin-left: 100px; font-weight: bolder">{{ navName }}</span>
+          </a-col>
+          <a-col :span="24">
+            <img :src="imgUrl" preview />
+          </a-col>
+        </a-row>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, onMounted } from 'vue';
+  //mock数据
+  const mockdata = [
+    {
+      title: '第一页',
+      key: '0-0',
+      children: [
+        {
+          title: '1页',
+          key: '0-0-0',
+          imgUrl: 'https://static.jeecg.com/upload/test/1_1588149743473.jpg',
+        },
+        {
+          title: '2页',
+          key: '0-0-1',
+          imgUrl: 'https://static.jeecg.com/upload/test/u27356337152749454924fm27gp0_1588149731821.jpg',
+        },
+      ],
+    },
+    {
+      title: '第二页',
+      key: '0-1',
+      children: [
+        {
+          title: '1页',
+          key: '0-1-0',
+          imgUrl: 'https://static.jeecg.com/upload/test/u24454681402491956848fm27gp0_1588149712663.jpg',
+        },
+        {
+          title: '2页',
+          key: '0-1-1',
+          imgUrl: 'https://static.jeecg.com/upload/test/u8891206113801177793fm27gp0_1588149704459.jpg',
+        },
+      ],
+    },
+    {
+      title: '第三页',
+      key: '0-2',
+      children: [
+        {
+          title: '1页',
+          key: '0-2-0',
+          imgUrl: 'https://static.jeecg.com/upload/test/1374962_1587621329085.jpg',
+        },
+      ],
+    },
+  ];
+  /**
+   * 左侧树形数据
+   */
+  const treeData = ref(mockdata);
+  //选中的key
+  const selectedKeys = ref([]);
+  //展开的key
+  const expandedKeys = ref([]);
+  const sort = ref(0);
+  //图片链接
+  const imgUrl = ref('');
+  //页码标题
+  const navName = ref('');
+  //图片集合
+  const imgList = ref([]);
+
+  onMounted(getImgList);
+
+  /**
+   * 加载图片集合
+   */
+  function getImgList() {
+    var count = 0;
+    for (var i = 0; i < unref(treeData).length; i++) {
+      for (var j = 0; j < unref(treeData)[i].children.length; j++) {
+        imgList.value.push({
+          key: unref(treeData)[i].children[j].key,
+          pkey: unref(treeData)[i].key,
+          sort: count++,
+          imgUrl: unref(treeData)[i].children[j].imgUrl,
+          navName: unref(treeData)[i].title + '/' + unref(treeData)[i].children[j].title,
+        });
+      }
+    }
+    setValue(imgList.value[unref(sort)]);
+  }
+  /**
+   * 节点选中事件
+   */
+  function onSelect(selectedKeys, info) {
+    for (var i = 0; i < unref(imgList).length; i++) {
+      if (unref(imgList)[i].key === selectedKeys[0]) {
+        sort.value = unref(imgList)[i].sort;
+        setValue(unref(imgList)[i]);
+        break;
+      }
+    }
+  }
+  /**
+   * 节点展开事件
+   */
+  function onExpand(expandedKey) {
+    expandedKeys.value = [];
+    if (expandedKey !== null && expandedKey !== '') {
+      expandedKeys.value[0] = expandedKey[1];
+    }
+  }
+  /**
+   * 上一页
+   */
+  function prev() {
+    if (unref(sort) === 0) {
+      sort.value = unref(imgList).length - 1;
+    } else {
+      sort.value = sort.value - 1;
+    }
+    setValue(unref(imgList)[unref(sort)]);
+  }
+  /**
+   * 下一页
+   */
+  function next() {
+    if (unref(sort) === unref(imgList).length - 1) {
+      sort.value = 0;
+    } else {
+      sort.value = unref(sort) + 1;
+    }
+    setValue(unref(imgList)[unref(sort)]);
+  }
+
+  // 设置受控节点值
+  function setValue(value) {
+    selectedKeys.value = [];
+    imgUrl.value = value.imgUrl;
+    selectedKeys.value[0] = value.key;
+    expandedKeys.value[0] = value.pkey;
+    navName.value = value.navName;
+  }
+</script>