1.1.2

Author: Edge-coordinates

README.md

@@ -37,9 +37,9 @@
 - 如果图片过大，硬盘性能不好，可能会造成加载浏览卡顿，这时候，建议使用固态硬盘，或者调小每一页展示的图片数量！！
 
 ## 使用示例
-
-### 其一
-**[TG preview link](https://t.me/edge_wasteland/6464)**
+- **[YouTube](https://www.youtube.com/watch?v=MHicKz_QJ1w)**
+- **[Telegram](https://t.me/edge_wasteland/6526)**
+- **[哔哩哔哩](https://www.bilibili.com/video/BV1tm411Q7Js/)**
 <!-- **[GIF preview link](https://postimg.cc/ctZfPV1q)** -->
 
 ### For NSFW Use

package.json

@@ -1,6 +1,6 @@
 {
   "name": "waterfall-picture-viewer",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A simple picture viewer",
   "productName": "W Viewer",
   "author": "边缘坐标 <[email protected]>",

src-electron/traverseFolder.ts

@@ -118,9 +118,8 @@ export function imageRetrieval (thepath, pFormats) {
   imageLinks = [];
   picLinks = [];
   traverseFolderObjects(thepath);
+  console.log('Finish traverseFolderObjects!');
   return picLinks;
-  // traverseFolder(thepath);
-  // return imageLinks;
 }
 // // 开始遍历
 // traverseFolder(rootPath);

src/App.vue

@@ -19,7 +19,8 @@ async function initData() {
   let tmpdata: any
   if (tmpdata = await window.storeAPI.get('itemNum')) setStore.perPageNum = tmpdata
   if (tmpdata = await window.storeAPI.get('WBreakpoint')) setStore.waterfallBreakpoint = tmpdata
-  console.log(await window.storeAPI.get('WBreakpoint'), setStore.waterfallBreakpoint)
+  if (tmpdata = await window.storeAPI.get('cycleUpdate')) setStore.cycleUpdate = tmpdata
+  // console.log(await window.storeAPI.get('WBreakpoint'), setStore.waterfallBreakpoint)
   console.log('APP setData inited!')
 }
 

src/components/SetComponent.vue

@@ -26,6 +26,7 @@
           <template v-slot:after>
             <q-tab-panels v-model="tab" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up">
               <q-tab-panel name="mails">
+                <!-- ANCHOR 基础设置 -->
                 <div class="text-h4 q-mb-md">基础设置</div>
                 <q-input v-model="simpleSetData.perPageNum" :label="'每页展示图片数目 当前:' + setStore.perPageNum + '/页'">
                   <template v-slot:after>
@@ -43,6 +44,15 @@
                       </q-tooltip></q-btn>
                   </template>
                 </q-input>
+                <q-toggle :label="`自动重排开启状态${setStore.cycleUpdate}`" v-model="setStore.cycleUpdate" />
+                <q-icon round dense flat color="primary" name="mdi-help"><q-tooltip class="bg-purple text-body2"
+                    :offset="[10, 10]">
+                    自动重排：如果您经常遇到瀑布流排版不正确导致需要手动点击以重新排版的情况，可以开启此选项。
+                  </q-tooltip></q-icon>
+                <q-btn class="float-right" round dense flat icon="mdi-content-save"
+                  @click="saveData('cycleUpdate')"><q-tooltip class="bg-purple text-body2" :offset="[10, 10]">
+                    保存设置
+                  </q-tooltip></q-btn>
                 <!-- <div>是否开启图片查看器画廊：<q-toggle disable v-model="simpleSetData.vNavbar" /></div> -->
                 <div>
                   <br />
@@ -184,7 +194,9 @@ function saveData(id) {
       setStore.waterfallBreakpoint = WBV2WB(WBValue.value)
       window.storeAPI.set('WBreakpoint', JSON.parse(JSON.stringify(setStore.waterfallBreakpoint)))
       break
-
+    case 'cycleUpdate':
+      window.storeAPI.set('cycleUpdate', setStore.cycleUpdate)
+      break
   }
 }
 

src/components/WaterFall.vue

@@ -41,15 +41,6 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <!-- eslint-disable @typescript-eslint/no-unused-vars -->
 <script setup lang="ts">
-
-function getFolder(filePath: string, regexPattern: RegExp): string {
-  var directory = filePath.substring(
-    0,
-    filePath.lastIndexOf('\\'),
-  );
-  return directory.replace(regexPattern, '')
-}
-
 import { NInputNumber } from 'naive-ui'
 import { onMounted, onUnmounted, reactive, ref, computed, watch } from 'vue'
 import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
@@ -69,7 +60,7 @@ const props = defineProps({
   }
 })
 
-let oImgs = ref(props.imgs)
+let oImgs = ref(props.imgs) // 啥玩意《
 const inputPageValue = ref(1)
 // import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
 // import 'vue-waterfall-plugin-next/dist/style.css'
@@ -116,6 +107,7 @@ function scrollToTop() {
 
 // 加载更多
 function handleLoadMore() {
+  console.log('handleLoadMore!');
   getList({
     page: page.value,
     pageSize: setStore.perPageNum,
@@ -124,12 +116,13 @@ function handleLoadMore() {
   })
 }
 
-
+// ANCHOR 查看器初始化
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import 'photoswipe/style.css';
 let lightbox: any, thisPic: string
+let isLightboxOpen = ref(false)
 
-function handleViewerKeyDown(event) {// 检查是否按下了特定的键，例如 Ctrl + S
+function handleViewerKeyDown(event) {// * 查看器内部 检查是否按下了特定的键，例如 Ctrl + S
   if (event.key === 'Delete') {
     event.preventDefault(); // 阻止默认行为（例如保存网页）
     console.log('pressed Delete.');
@@ -155,10 +148,51 @@ function handleViewerKeyDown(event) {// 检查是否按下了特定的键，例
   // 可以添加其他条件检查
 }
 
+let theCycleUpdateInterval
+function turnOnCycleUpdate() {
+  console.log('Turn on cycleUpdate');
+  theCycleUpdateInterval = window.setInterval(handleLoadMore, 500);
+}
+
+function tEventListening() { // * 一些乱七八糟的事件的监听
+  if (setStore.cycleUpdate) {
+    turnOnCycleUpdate()
+  }
+  document.addEventListener('keydown', function (event: any) {
+    const key = event.key
+    if (isLightboxOpen.value == false) {
+      if (key == 'ArrowRight') {
+        if (page.value < pageNum.value) {
+          page.value = page.value + 1
+          handleLoadMore()
+        }
+      }
+      if (key == 'ArrowLeft') {
+        if (page.value > 1) {
+          page.value = page.value - 1
+          handleLoadMore()
+        }
+      }
+    }
+  });
+  setStore.$subscribe((mutation: any, state) => {
+    // console.log(mutation, state)
+    // 监听 章节正则表达式变化，之后重绘书籍
+    if (mutation.events.key == 'cycleUpdate') {
+      // console.log(state.cycleUpdate)
+      if (state.cycleUpdate)
+        turnOnCycleUpdate()
+      else
+        window.clearInterval(theCycleUpdateInterval);
+    }
+  })
+
+}
 
 // 首次加载
 onMounted(() => {
   handleLoadMore()
+  tEventListening()
   if (!lightbox) {
     lightbox = new PhotoSwipeLightbox({
       gallery: '#pic-wrapper',
@@ -208,11 +242,13 @@ onMounted(() => {
     lightbox.on('openingAnimationStart', () => {
       // 开始监听 查看器内 快捷键
       document.addEventListener('keydown', handleViewerKeyDown);
+      isLightboxOpen.value = true
       console.log('openingAnimationStart');
     });
 
     lightbox.on('closingAnimationStart', () => {
       document.removeEventListener('keydown', handleViewerKeyDown);
+      isLightboxOpen.value = false
       console.log('closingAnimationStart');
     });
 

src/pages/AboutPage.vue

@@ -11,7 +11,7 @@
       <img src="~assets/20240128.png" class="max-w-sm rounded-lg shadow-2xl" />
       <div>
         <h1 class="text-5xl font-bold">About Program</h1>
-        <p class="text-subtitle2 text-xl">简约瀑布流查看器哦~<br /><b>Version:1.1.1</b></p>
+        <p class="text-subtitle2 text-xl">简约瀑布流查看器哦~<br /><b>Version:1.1.2</b></p>
         <button @click="openLink('https://github.com/Edge-coordinates/Waterfall_picture_viewer')"
           class="btn btn-primary">给个Star吧~</button>
       </div>

src/pages/IndexPage.vue

@@ -1,10 +1,5 @@
 <template>
   <q-page style="margin-top: 20px;">
-    <!-- <div class="row items-center justify-evenly">
-      <router-link to="/test" class="btn">Go to Test</router-link>
-      <button class="btn" @click="querydb">Button</button>
-      <button class="btn" @click="picInfoInit">Button</button>
-    </div> -->
     <div v-if="ifImgPreOK" class="h-full">
       <water-fall :imgs="imgs"></water-fall>
       <!-- <water-fall /> -->
@@ -113,22 +108,23 @@ async function picInfoInit(fpath) {
   ifImgPreOK.value = true
 }
 
+import { normalizePath } from './normalize-path'
+
+function getFolderPath(fpath, fullfpath) {
+  fpath = normalizePath(fpath)
+  fullfpath = normalizePath(fullfpath)
+  let root = '/' + fpath.split('/')[1] + '/'
+  return fullfpath.replace(fpath, root)
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function onUpload(e: any) {
+  console.log('onUpload!');
+  // ! 修改计算逻辑，不用正则了，采用原始字符串匹配？
   let fpath = e.file.fullPath // 相对路径
   const fullfpath = e.file.file.path // 绝对路径
-  let rt = new RegExp(String.raw`\\${fpath.split('/')[1]}\\`)
-  const match = rt.exec(fullfpath);
-  const matchedText = match![0];
-  const beforeMatch = fullfpath.substring(0, match!.index);
-  fpath = beforeMatch + matchedText
-  console.log(e)
-  console.log(rt, fpath, fullfpath);
-  console.log(match, matchedText, beforeMatch)
-  // fpath = fullfpath.split(rt)[0] + rt + '\\'
-  // console.log(fpath);
-
-  // console.log(rt, fpath, fullfpath)
+  fpath = getFolderPath(fpath, fullfpath)
+  console.log(fpath);
 
   picInfoInit(fpath)
 }

src/pages/normalize-path.ts

@@ -0,0 +1,35 @@
+/*!
+ * normalize-path <https://github.com/jonschlinkert/normalize-path>
+ *
+ * Copyright (c) 2014-2018, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+
+export function normalizePath (path, stripTrailing: boolean = true) {
+  if (typeof path !== 'string') {
+    throw new TypeError('expected path to be a string');
+  }
+
+  if (path === '\\' || path === '/') return '/';
+
+  const len = path.length;
+  if (len <= 1) return path;
+
+  // ensure that win32 namespaces has two leading slashes, so that the path is
+  // handled properly by the win32 version of path.parse() after being normalized
+  // https://msdn.microsoft.com/library/windows/desktop/aa365247(v=vs.85).aspx#namespaces
+  let prefix = '';
+  if (len > 4 && path[3] === '\\') {
+    const ch = path[2];
+    if ((ch === '?' || ch === '.') && path.slice(0, 2) === '\\\\') {
+      path = path.slice(2);
+      prefix = '//';
+    }
+  }
+
+  const segs = path.split(/[/\\]+/);
+  if (stripTrailing !== false && segs[segs.length - 1] === '') {
+    segs.pop();
+  }
+  return prefix + segs.join('/');
+}

src/stores/viewerSet-store.ts

@@ -4,6 +4,7 @@ export const useSettingStore = defineStore('setting', {
   state: () => ({
     isOpen: false,
     perPageNum: 20,
+    cycleUpdate: false,
     imageFormat: [
       '.webp',
       '.jxl',