update

package.json

@@ -16,6 +16,8 @@
   "dependencies": {
     "@electron/remote": "^2.1.1",
     "@quasar/extras": "^1.16.4",
+    "electron-store": "^8.1.0",
+    "fs-extra": "^11.2.0",
     "pinia": "^2.0.11",
     "quasar": "^2.6.0",
     "vue": "^3.0.0",
@@ -34,11 +36,13 @@
     "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-vue": "^9.0.0",
+    "naive-ui": "^2.36.0",
     "postcss": "^8.4.32",
     "prettier": "^2.5.1",
     "tailwindcss": "^3.4.0",
     "typescript": "^4.5.4",
-    "vite-plugin-electron-renderer": "^0.14.5"
+    "vite-plugin-electron-renderer": "^0.14.5",
+    "vue-waterfall-plugin-next": "^2.3.1"
   },
   "engines": {
     "node": "^18 || ^16 || ^14.19",

quasar.config.js

@@ -88,7 +88,7 @@ module.exports = configure(function (/* ctx */) {
             include: path.resolve(__dirname, './src/i18n/**'),
           },
         ],
-        [require('vite-plugin-electron-renderer'), {}],
+        // [require('vite-plugin-electron-renderer'), {}],
       ],
     },
 
@@ -102,7 +102,7 @@ module.exports = configure(function (/* ctx */) {
     framework: {
       config: {},
 
-      // iconSet: 'material-icons', // Quasar icon set
+      iconSet: 'mdi-v7', // Quasar icon set
       // lang: 'en-US', // Quasar language pack
 
       // For special cases outside of where the auto-import strategy can have an impact

src-electron/IPC-main.ts

@@ -0,0 +1,38 @@
+import { ipcMain } from 'electron';
+import Store from 'electron-store';
+import { schema } from './default-data';
+
+const store = new Store();
+// 重构判断是否为空并
+
+import { imageRetrieval } from './traverseFolder';
+
+function init () {
+  if (!store.get('itemNum')) store.store = schema;
+  console.log('pre inited.');
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+export function ipcMains (value: void): any {
+  init();
+  ipcMain.on('read-file', event => {
+    // const fileContent = fs.readFileSync('./file-to-read.txt', { encoding: 'utf-8' })
+    const fileContent = 'ddd';
+    // Send back an IPC event to the renderer process with the file content.
+    event.sender.send('read-file-success', fileContent);
+  });
+
+  ipcMain.handle('store-get', (event, key) => {
+    // console.log(store.get(key));
+    return store.get(key);
+  });
+
+  ipcMain.handle('store-set', (event, key, value) => {
+    return store.set(key, value);
+  });
+
+  ipcMain.handle('tool-traverseFolder', (event, path) => {
+    console.log(path);
+    return imageRetrieval(path);
+  });
+}

src-electron/default-data.ts

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const schema: any = {
+  itemNum: {
+    type: 'number',
+    maximum: 10000,
+    minimum: 1,
+    default: 50
+  },
+  viewer_navbar: {
+    type: 'number',
+    maximum: 5,
+    minimum: 0,
+    default: 0
+  },
+  foo: {
+    type: 'number',
+    maximum: 100,
+    minimum: 1,
+    default: 50
+  },
+  bar: {
+    type: 'string',
+    format: 'url'
+  }
+};

src-electron/electron-main.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow } from 'electron';
+import { app, protocol, BrowserWindow } from 'electron';
 import { initialize, enable } from '@electron/remote/main';
 import path from 'path';
 import os from 'os';
@@ -18,12 +18,12 @@ function createWindow () {
     width: 1000,
     height: 600,
     // transparent: true,
-    backgroundColor: '##34eb7d',
+    // backgroundColor: '##34eb7d',
     useContentSize: true,
     frame: false,
     webPreferences: {
       contextIsolation: true,
-      nodeIntegration: true,
+      // nodeIntegration: true,
       sandbox: false,
       // More info: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/electron-preload-script
       preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
@@ -49,24 +49,27 @@ function createWindow () {
   });
 }
 
-app.whenReady().then(createWindow);
-
 app.on('window-all-closed', () => {
   if (platform !== 'darwin') {
     app.quit();
   }
 });
 
-// app.on('activate', () => {
-//   if (mainWindow === undefined) {
-//     createWindow();
-//   }
-// });
-
-function onAppReady () {
+app.whenReady().then(() => {
   if (mainWindow === undefined) {
     createWindow();
   }
-}
+});
+
+app.whenReady().then(() => {
+  // 这个需要在app.ready触发之后使用
+  protocol.registerFileProtocol('atom', (request, callback) => {
+    const url = request.url.substring(7);
+    callback(decodeURI(path.normalize(url)));
+  });
+});
+
+import { ipcMains } from './IPC-main';
+app.whenReady().then(ipcMains());
 
-app.on('ready', () => setTimeout(onAppReady, 100));
+// app.on('ready', () => setTimeout(onAppReady, 100));

src-electron/electron-preload.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 
 /**
@@ -30,9 +31,57 @@
  * }
  */
 
-import { contextBridge } from 'electron';
+export type storeAPI = {
+  // Declare a `readFile` function that will return a promise. This promise
+  // will contain the data of the file read from the main process.
+  get: (key: any) => any;
+  set: (key: any, value: any) => any;
+  initData: () => any;
+};
+
+export type myWindowAPI = {
+  minimize: () => Promise<any>;
+  toggleMaximize: () => Promise<any>;
+  close: () => Promise<any>;
+};
+
+export type myToolAPI = {
+  traverseFolder: (path: string) => any;
+};
+
+import { contextBridge, ipcRenderer } from 'electron';
 import { BrowserWindow } from '@electron/remote';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const myToolAPIs: myToolAPI = {
+  async traverseFolder (path) {
+    return await ipcRenderer.invoke('tool-traverseFolder', path);
+  }
+};
+
+contextBridge.exposeInMainWorld('myToolAPI', myToolAPIs);
+
+const myStoreAPI: storeAPI = {
+  async get (key) {
+    return await ipcRenderer.invoke('store-get', key);
+  },
+
+  async set (key, value) {
+    return await ipcRenderer.invoke('store-set', key, value);
+    // store.set(key, value);
+  },
+
+  initData () {
+    // store = new Store();
+    // // 重构判断是否为空并
+    // if (!store.get('itemNum')) store.store = schema;
+    console.log('data inited');
+  }
+};
+
+contextBridge.exposeInMainWorld('storeAPI', myStoreAPI);
+
 contextBridge.exposeInMainWorld('myWindowAPI', {
   minimize () {
     BrowserWindow.getFocusedWindow()!.minimize();

src-electron/traverseFolder.ts

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// import remote from '@electron/remote'
+import fs from 'fs-extra';
+import * as path from 'path';
+
+// 指定要遍历的根路径
+const rootPath = 'D:\\Picture\\五维介质';
+
+// 存储图片文件链接的数组
+const imageLinks: any[] = [];
+
+// 递归遍历文件夹
+export function traverseFolder (currentPath) {
+  const files = fs.readdirSync(currentPath);
+  // console.log(files);
+  files.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
+
+  for (const file of files) {
+    const filePath = path.join(currentPath, file);
+    // const thefile = fs.statSync(filePath);
+    // console.log(sha256sum(filePath))
+    if (isPathDirectory(filePath)) {
+      // 如果是文件夹，递归遍历
+      traverseFolder(filePath);
+    } else {
+      // 如果是文件，检查文件扩展名是否是图片格式
+      const extname = path.extname(filePath).toLowerCase();
+      if (
+        [
+          '.webp',
+          '.jxl',
+          '.jpg',
+          '.jpeg',
+          '.png',
+          '.gif',
+          '.bmp',
+          '.jfif'
+        ].includes(extname)
+      ) {
+        // 如果是图片文件，将其链接添加到数组中
+        // const relativePath = path.relative(rootPath, filePath);
+        imageLinks.push('atom://' + filePath);
+      }
+    }
+  }
+}
+
+function isPathDirectory (thepath: string) {
+  const thefile = fs.statSync(thepath);
+  return thefile.isDirectory();
+}
+
+export function imageRetrieval (thepath) {
+  traverseFolder(thepath);
+  return imageLinks;
+}
+// // 开始遍历
+// traverseFolder(rootPath);
+
+// // 打印图片链接列表
+// console.log(imageLinks);

src/App.vue

@@ -1,8 +1,28 @@
 
 
 <template>
-  <router-view />
+  <n-config-provider :theme-overrides="themeOverrides">
+    <router-view />
+  </n-config-provider>
 </template>
 
 <script setup lang="ts">
+// window.storeAPI.initData()
+import { NConfigProvider } from 'naive-ui'
+
+const themeOverrides = {
+  common: {
+    primaryColor: '#1976d2'
+  },
+  // Button: {
+  //   textColor: '#FF0000'
+  // },
+  // Select: {
+  //   peers: {
+  //     InternalSelection: {
+  //       textColor: '#FF0000'
+  //     }
+  //   }
+  // }
+}
 </script>