V1.1.1

.vscode/settings.json

@@ -6,5 +6,14 @@
   "editor.codeActionsOnSave": ["source.fixAll.eslint"],
   "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
   "typescript.tsdk": "node_modules/typescript/lib",
-  "i18n-ally.localesPaths": ["src/i18n"]
+  "i18n-ally.localesPaths": ["src/i18n"],
+  "cSpell.words": [
+    "autorenew",
+    "fpath",
+    "fullfpath",
+    "photoswipe",
+    "pswp",
+    "todos",
+    "viewerjs"
+  ]
 }

README.md

@@ -52,3 +52,4 @@
 ## 最后
 
 希望大家赏个**Star**，以满足吾辈这小小的虚荣心吧！！！
+

Todos.md

@@ -0,0 +1,10 @@
+
+## 任务
+
+- [ ] 添加视频格式支持！  （怎样获取大小数据呢？）
+通过 https://www.npmjs.com/package/file-type 判断文件类型，通过 前端方案，动态载入（瀑布流变动？） 大小数据。
+
+- 如果上述方案不可行，用户可选择 图片查看器引擎，从而支持图片+视频查看。
+viewer.js v-viewer。 https://videojs.com/city 不好？
+
+bigger-picture    这些都是参考的库。

package.json

@@ -1,6 +1,6 @@
 {
   "name": "waterfall-picture-viewer",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "A simple picture viewer",
   "productName": "W Viewer",
   "author": "边缘坐标 <Edgecoordinates@gmail.com>",
@@ -16,15 +16,13 @@
   "dependencies": {
     "@electron/remote": "^2.1.1",
     "@quasar/extras": "^1.16.4",
-    "bigger-picture": "^1.1.14",
     "electron-store": "^8.1.0",
     "fs-extra": "^11.2.0",
     "image-size": "^1.1.1",
     "photoswipe": "^5.4.3",
     "pinia": "^2.0.11",
     "quasar": "^2.6.0",
-    "v-viewer": "^3.0.13",
-    "viewerjs": "^1.11.6",
+    "trash": "^7.2.0",
     "vue": "^3.0.0",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.0.0"

src-electron/IPC-main.ts

@@ -2,6 +2,27 @@ import { ipcMain, shell } from 'electron';
 import Store from 'electron-store';
 import { schema } from './default-data';
 
+const fs = require('fs-extra');
+import trash from 'trash';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function isFileSync (path) {
+  try {
+    // 使用 fs.existsSync 检查路径是否存在
+    if (fs.existsSync(path)) {
+      // 使用 fs.statSync 获取路径的状态
+      const stats = fs.statSync(path);
+      // 判断是否是文件
+      return stats.isFile();
+    }
+    return false;
+  } catch (err) {
+    // 处理错误
+    console.error('Error checking file synchronously:', err);
+    return false;
+  }
+}
+
 let store = new Store();
 // 重构判断是否为空并
 
@@ -45,4 +66,16 @@ export function ipcMains (value: void): any {
     console.log(link);
     return shell.openExternal(link);
   });
+
+  ipcMain.handle('tool-openPath', (event, link) => {
+    shell.openPath(link);
+  });
+
+  ipcMain.handle('tool-delPic', (event, src) => {
+    // fs.removeSync(src);
+    if (isFileSync(src)) {
+      trash(src);
+    }
+    console.log('Del: ', src);
+  });
 }

src-electron/electron-preload.ts

@@ -52,10 +52,13 @@ export type myWindowAPI = {
 export type myToolAPI = {
   traverseFolder: (path: string, pFormats: any) => any;
   openLink: (link: string) => any;
+  delPic: (src: string) => any;
+  openPath: (src: string) => any;
+  showItemInFolder: (src: string) => any;
 };
 
 import { contextBridge, ipcRenderer } from 'electron';
-import { BrowserWindow, app } from '@electron/remote';
+import { BrowserWindow, app, shell } from '@electron/remote';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
@@ -65,6 +68,15 @@ const myToolAPIs: myToolAPI = {
   },
   async openLink (link) {
     return await ipcRenderer.invoke('tool-openLink', link);
+  },
+  async delPic (src) {
+    return await ipcRenderer.invoke('tool-delPic', src);
+  },
+  async openPath (src) {
+    return await ipcRenderer.invoke('tool-openPath', src);
+  },
+  async showItemInFolder (src) {
+    shell.showItemInFolder(src);
   }
 };
 

src/App.vue

@@ -18,7 +18,8 @@ async function initData() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let tmpdata: any
   if (tmpdata = await window.storeAPI.get('itemNum')) setStore.perPageNum = tmpdata
-  console.log(await window.storeAPI.get('itemNum'), setStore.perPageNum)
+  if (tmpdata = await window.storeAPI.get('WBreakpoint')) setStore.waterfallBreakpoint = tmpdata
+  console.log(await window.storeAPI.get('WBreakpoint'), setStore.waterfallBreakpoint)
   console.log('APP setData inited!')
 }
 

src/components/SetComponent.vue

@@ -62,13 +62,18 @@
 
               <q-tab-panel name="alarms">
                 <div class="text-h4 q-mb-md">查看器设置</div>
-                <p>暂时没有！</p>
-                <p>
-                  早晨起来，泡一碗浓茶，向院子一坐，你也能看得到很高很高的碧绿的天色，听得到青天下驯鸽的飞声。从槐树叶底，朝东细数着一丝一丝漏下来的日光，或在破壁腰中，静对着像喇叭似的牵牛花（朝荣）的蓝朵，自然而然地也能够感觉到十分的秋意。
-                </p>
-                <p>
-                  入秋以后，蜻蜓变弱了，肉体死后，只剩灵魂，摇摇晃晃飞来飞去。透过秋日的阳光，能看到蜻蜓的身体是透明的。
-                </p>
+                <n-dynamic-input v-model:value="WBValue" preset="pair" key-placeholder="环境变量名"
+                  value-placeholder="环境变量值" />
+                <q-btn class="float-right" round dense flat icon="mdi-content-save"
+                  @click="saveData('WBreakpoint')"><q-tooltip class="bg-purple text-body2" :offset="[10, 10]">
+                    保存设置
+                  </q-tooltip></q-btn>
+                <div>
+                  <br />
+                  键值对设置 瀑布流断点：e.g. <b>1200 4</b> 代表宽度大于 1200 之后每行显示四张图片~<br />
+                  但是众所周知，软件是不会显示具体宽度的，所以你们量子调整一下就好。
+                </div>
+                <!-- <pre>{{ JSON.stringify(WBValue, null, 2) }}</pre> -->
               </q-tab-panel>
 
               <q-tab-panel name="movies">
@@ -97,13 +102,13 @@
                   </template>
 
                   <template v-slot:after>
-                    <q-btn round dense flat icon="mdi-send" />
+                    <q-btn disable round dense flat icon="mdi-send" />
                   </template>
                 </q-input>
 
                 <q-input bottom-slots v-model="text" label="Label">
                   <template v-slot:after>
-                    <q-btn round dense flat icon="mdi-send" />
+                    <q-btn disable round dense flat icon="mdi-send" />
                   </template>
                 </q-input>
               </q-tab-panel>
@@ -123,6 +128,7 @@
 <script setup lang="ts">
 let text, dense
 import { ref, reactive, onMounted } from 'vue'
+import { NDynamicInput } from 'naive-ui'
 
 import { useSettingStore } from 'stores/viewerSet-store';
 const setStore = useSettingStore()
@@ -135,6 +141,22 @@ const simpleSetData = reactive({
 
 const tab = ref('mails')
 const splitterModel = ref(20) // 这啥啊？
+const WBValue: any = ref(WB2WBV(setStore.waterfallBreakpoint))
+
+function WB2WBV(fValue: any) {
+  let resultArray: any = Object.entries(fValue)
+  resultArray = resultArray.map(([key, { rowPerView }]) => ({ key: parseInt(key), value: rowPerView }));
+  return resultArray
+}
+
+function WBV2WB(fValue: any) {
+  // let resultArray: any = Object.entries(fValue)
+  let resultArray = fValue.reduce((acc, { key, value }) => {
+    acc[key] = { rowPerView: value };
+    return acc;
+  }, {});
+  return resultArray
+}
 
 function checked(a, b) {
   if (a) return a
@@ -145,8 +167,10 @@ function updateStore() {
   if (simpleSetData.perPageNum) setStore.perPageNum = <any>simpleSetData.perPageNum
   setStore.imageFormat = <any>simpleSetData.imageFormat.replace(/\s/g, '').split(',');
   setStore.vNavbar = Number(simpleSetData.vNavbar)
+  setStore.waterfallBreakpoint = WBV2WB(WBValue.value)
   console.log(simpleSetData)
   console.log(setStore.vNavbar)
+  // console.log(WBV2WB(WBValue.value))
 }
 
 function saveData(id) {
@@ -156,6 +180,11 @@ function saveData(id) {
       setStore.perPageNum = checked(<any>simpleSetData.perPageNum, setStore.perPageNum)
       window.storeAPI.set('itemNum', setStore.perPageNum)
       break;
+    case 'WBreakpoint':
+      setStore.waterfallBreakpoint = WBV2WB(WBValue.value)
+      window.storeAPI.set('WBreakpoint', JSON.parse(JSON.stringify(setStore.waterfallBreakpoint)))
+      break
+
   }
 }