├── .backup └── .github │ └── workflows.zip ├── .editorconfig ├── .eslintignore ├── .eslintrc.cjs ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── config.yml │ └── feature_request.md └── renovate.json ├── .gitignore ├── .idea ├── codeStyles │ ├── Project.xml │ └── codeStyleConfig.xml ├── deployment.xml ├── inspectionProfiles │ └── Project_Default.xml ├── jsLibraryMappings.xml ├── jsLinters │ └── eslint.xml ├── jsonSchemas.xml ├── modules.xml ├── prettier.xml ├── vcs.xml ├── vite-electron-builder.iml └── webResources.xml ├── .npmrc ├── .prettierrc ├── .vscode ├── extensions.json ├── launch.json └── settings.json ├── Notes.md ├── README-CN.md ├── README-quasar.md ├── README.md ├── Todos.md ├── builder-nsis.nsh ├── docs ├── 00.png ├── 01.png ├── 02.png ├── 1.png └── doc_home.png ├── index.html ├── package.json ├── postcss.config.cjs ├── public ├── css │ └── font-awesome-6.4.2-pro.css ├── favicon.ico ├── icon.png ├── icons │ ├── aaa.ico │ ├── aaa.png │ ├── bbb.ico │ ├── bbb.png │ ├── favicon-128x128.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ └── icon.ico └── webfonts │ ├── KFOmCnqEu92Fr1Mu4mxK.woff2 │ ├── fa-brands-400.ttf │ ├── fa-brands-400.woff2 │ ├── fa-duotone-900.ttf │ ├── fa-duotone-900.woff2 │ ├── fa-light-300.ttf │ ├── fa-light-300.woff2 │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff2 │ ├── fa-sharp-light-300.ttf │ ├── fa-sharp-light-300.woff2 │ ├── fa-sharp-regular-400.ttf │ ├── fa-sharp-regular-400.woff2 │ ├── fa-sharp-solid-900.ttf │ ├── fa-sharp-solid-900.woff2 │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff2 │ ├── fa-thin-100.ttf │ ├── fa-thin-100.woff2 │ ├── fa-v4compatibility.ttf │ └── fa-v4compatibility.woff2 ├── quasar.config.ts ├── src-electron ├── AsyncReadFilePath.ts ├── IPC-main.ts ├── default-data.ts ├── electron-flag.d.ts ├── electron-main.ts ├── electron-preload.ts ├── icons │ ├── electron-env.d.ts │ ├── icon.icns │ ├── icon.ico │ └── icon.png └── traverseFolder.ts ├── src-old └── old-components │ ├── SetComponent.vue │ └── WaterFall.vue ├── src ├── App.vue ├── assets │ ├── 20240128.png │ ├── edge-avatar.jpg │ ├── error.png │ ├── favicon.ico │ ├── icon.png │ ├── loading.png │ └── quasar-logo-vertical.svg ├── boot │ ├── .gitkeep │ └── i18n.ts ├── components │ ├── DropdownReader.vue │ ├── EssentialLink.vue │ ├── ExampleComponent.vue │ ├── UploadComponent.vue │ ├── WaterFall_biggerpicture.vue │ ├── WaterFall_photoswipe.vue │ ├── WaterFall_viewerjs.vue │ ├── models.ts │ ├── settings │ │ ├── BaseSetting.vue │ │ ├── LanguageChoose.vue │ │ ├── ViewerSelection.vue │ │ └── initLanguage.vue │ ├── testc │ │ ├── TEST.vue │ │ ├── WaterFall.vue │ │ └── waterfall.ts │ ├── w-viewer │ │ ├── BPControllers.vue │ │ └── WPagination.vue │ └── waterfall.ts ├── css │ ├── app.scss │ └── quasar.variables.scss ├── env.d.ts ├── i18n │ ├── en-US │ │ └── index.ts │ ├── index.ts │ └── zh-CN │ │ └── index.ts ├── layouts │ ├── MainLayout.vue │ ├── SettingsLayout.vue │ ├── TestLayout.vue │ └── WViewerLayout.vue ├── pages │ ├── AboutPage.vue │ ├── ErrorNotFound.vue │ ├── IndexPage.vue │ └── test │ │ ├── APage.vue │ │ ├── IndexPage.vue │ │ ├── WIndexPage.vue │ │ ├── initLanguage.vue │ │ └── normalize-path.ts ├── quasar.d.ts ├── router │ ├── index.ts │ └── routes.ts ├── shims-vue.d.ts ├── stores │ ├── example-store.ts │ ├── index.ts │ ├── store-flag.d.ts │ ├── viewerSet-store.ts │ └── wViewerState-store.ts └── window.d.ts ├── tailwind.config.js ├── tmp └── a.ts ├── tsconfig.json ├── tsconfig.vue-tsc.json └── yarn.lock /.backup/.github/workflows.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Edge-coordinates/Waterfall_picture_viewer/2373a51d8468baa03a62fd7a00c132f7990f734f/.backup/.github/workflows.zip -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /dist 2 | /src-capacitor 3 | /src-cordova 4 | /.quasar 5 | /node_modules 6 | .eslintrc.cjs 7 | .eslintrc.js 8 | /src-ssr 9 | /quasar.config.*.temporary.compiled* -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy 3 | // This option interrupts the configuration hierarchy at this file 4 | // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos) 5 | root: true, 6 | 7 | // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser 8 | // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working 9 | // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted 10 | parserOptions: { 11 | parser: require.resolve('@typescript-eslint/parser'), 12 | extraFileExtensions: [ '.vue' ] 13 | }, 14 | 15 | env: { 16 | browser: true, 17 | es2021: true, 18 | node: true, 19 | 'vue/setup-compiler-macros': true 20 | }, 21 | 22 | // Rules order is important, please avoid shuffling them 23 | extends: [ 24 | // Base ESLint recommended rules 25 | // 'eslint:recommended', 26 | 27 | // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage 28 | // ESLint typescript rules 29 | 'plugin:@typescript-eslint/recommended', 30 | 31 | // Uncomment any of the lines below to choose desired strictness, 32 | // but leave only one uncommented! 33 | // See https://eslint.vuejs.org/rules/#available-rules 34 | 'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention) 35 | // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability) 36 | // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) 37 | 38 | // https://github.com/prettier/eslint-config-prettier#installation 39 | // usage with Prettier, provided by 'eslint-config-prettier'. 40 | 'prettier' 41 | ], 42 | 43 | plugins: [ 44 | // required to apply rules which need type information 45 | '@typescript-eslint', 46 | 47 | // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files 48 | // required to lint *.vue files 49 | 'vue' 50 | 51 | // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674 52 | // Prettier has not been included as plugin to avoid performance impact 53 | // add it as an extension for your IDE 54 | 55 | ], 56 | 57 | globals: { 58 | ga: 'readonly', // Google Analytics 59 | cordova: 'readonly', 60 | __statics: 'readonly', 61 | __QUASAR_SSR__: 'readonly', 62 | __QUASAR_SSR_SERVER__: 'readonly', 63 | __QUASAR_SSR_CLIENT__: 'readonly', 64 | __QUASAR_SSR_PWA__: 'readonly', 65 | process: 'readonly', 66 | Capacitor: 'readonly', 67 | chrome: 'readonly' 68 | }, 69 | 70 | // add your custom rules here 71 | rules: { 72 | 'reportUnusedDisableDirectives': 0, 73 | 74 | quotes: ['warn', 'single', { avoidEscape: true }], 75 | 76 | // this rule, if on, would require explicit return type on the `render` function 77 | '@typescript-eslint/explicit-function-return-type': 'off', 78 | 79 | // in plain CommonJS modules, you can't use `import foo = require('foo')` to pass this rule, so it has to be disabled 80 | '@typescript-eslint/no-var-requires': 'off', 81 | 82 | // The core 'no-unused-vars' rules (in the eslint:recommended ruleset) 83 | // does not work with type definitions 84 | 'no-unused-vars': 'off', 85 | 86 | // allow debugger during development only 87 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | custom: [] 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: cawa-93 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 16 | 1. Go to '...' 17 | 2. Click on '....' 18 | 3. Scroll down to '....' 19 | 4. See error 20 | 21 | **Expected behavior** 22 | A clear and concise description of what you expected to happen. 23 | 24 | **Screenshots** 25 | If applicable, add screenshots to help explain your problem. 26 | 27 | **Additional context** 28 | Add any other context about the problem here. 29 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Questions & Discussions 4 | url: https://github.com/cawa-93/vite-electron-builder/discussions/categories/q-a 5 | about: Use GitHub discussions for message-board style questions and discussions. 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: enhancement 6 | assignees: cawa-93 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base", 4 | ":semanticCommits", 5 | ":semanticCommitTypeAll(deps)", 6 | ":semanticCommitScopeDisabled", 7 | ":automergeAll", 8 | ":automergeBranch", 9 | ":disableDependencyDashboard", 10 | ":pinVersions", 11 | ":onlyNpm", 12 | ":label(dependencies)" 13 | ], 14 | "packageRules": [ 15 | { 16 | "groupName": "Vite packages", 17 | "matchUpdateTypes": "major", 18 | "matchSourceUrlPrefixes": [ 19 | "https://github.com/vitejs/" 20 | ] 21 | } 22 | ], 23 | "gitNoVerify": [ 24 | "commit", 25 | "push" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .thumbs.db 3 | node_modules 4 | 5 | # Quasar core related directories 6 | .quasar 7 | /dist 8 | /quasar.config.*.temporary.compiled* 9 | 10 | # local .env files 11 | .env.local* 12 | 13 | # Cordova related directories and files 14 | /src-cordova/node_modules 15 | /src-cordova/platforms 16 | /src-cordova/plugins 17 | /src-cordova/www 18 | 19 | # Capacitor related directories and files 20 | /src-capacitor/www 21 | /src-capacitor/node_modules 22 | 23 | # Log files 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # Editor directories and files 29 | .idea 30 | *.suo 31 | *.ntvs* 32 | *.njsproj 33 | *.sln -------------------------------------------------------------------------------- /.idea/codeStyles/Project.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 65 | -------------------------------------------------------------------------------- /.idea/codeStyles/codeStyleConfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /.idea/deployment.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/jsLinters/eslint.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | -------------------------------------------------------------------------------- /.idea/jsonSchemas.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/prettier.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/vite-electron-builder.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /.idea/webResources.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # pnpm-related options 2 | shamefully-hoist=true 3 | strict-peer-dependencies=false 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "semi": true 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "esbenp.prettier-vscode", 5 | "editorconfig.editorconfig", 6 | "vue.volar", 7 | "wayou.vscode-todo-highlight" 8 | ], 9 | "unwantedRecommendations": [ 10 | "octref.vetur", 11 | "hookyqr.beautify", 12 | "dbaeumer.jshint", 13 | "ms-vscode.vscode-typescript-tslint-plugin" 14 | ] 15 | } -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "type": "node", 6 | "request": "launch", 7 | "name": "Debug Main Process", 8 | "skipFiles": ["/**"], 9 | "program": "${workspaceFolder}\\scripts\\watch.mjs", 10 | "autoAttachChildProcesses": true 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.bracketPairColorization.enabled": true, 3 | "editor.guides.bracketPairs": true, 4 | "editor.formatOnSave": false, 5 | "editor.defaultFormatter": "esbenp.prettier-vscode", 6 | "editor.codeActionsOnSave": ["source.fixAll.eslint"], 7 | "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"], 8 | "typescript.tsdk": "node_modules/typescript/lib", 9 | "i18n-ally.localesPaths": ["src/i18n"], 10 | "i18n-ally.displayLanguage": "zh-CN", 11 | "i18n-ally.enabledParsers": ["js", "ts"], 12 | "cSpell.words": [ 13 | "autorenew", 14 | "fpath", 15 | "fullfpath", 16 | "lazyload", 17 | "photoswipe", 18 | "pinia", 19 | "pswp", 20 | "thefile", 21 | "thepath", 22 | "todos", 23 | "viewerjs", 24 | "Wviewer" 25 | ], 26 | "[vue]": { 27 | "editor.defaultFormatter": "esbenp.prettier-vscode" 28 | }, 29 | "i18n-ally.keystyle": "nested" 30 | } 31 | -------------------------------------------------------------------------------- /Notes.md: -------------------------------------------------------------------------------- 1 | Now Viewer: 2 | import Wviewer from 'components/WaterFall_full.vue' 3 | 4 | Viewer Component: 5 | 6 | 7 | 使用 -------------------------------------------------------------------------------- /README-CN.md: -------------------------------------------------------------------------------- 1 | # WViewer 瀑布流图片查看器 2 | 3 | ![doc_home.png](./docs/doc_home.png) 4 | 5 | **瀑布流**图片查看器，可以遍历文件夹和所有子文件夹并读取其中的全部图片，对于每个文件夹下的图片**按照名称排序**展示。 6 | 如果图片过多，会按照 定制数量（默认40张图片）/一页进行拆分，支持页面跳转，翻页。 7 | 8 | ## 适用范围 9 |
10 | 11 | 当看画师图包的时候，很有可能会碰到这种情况： 12 | ![样例](./docs/1.png) 13 | 14 | - 非常多的子文件夹，每个子文件夹中图片又不是很多。图片看起来，很不能尽兴。 15 | - 同时，文件浏览器哪怕是**超大图标**，浏览起来仍然让人不很舒服。 16 | - 想要放大查看某张图片，需要调用图片查看器程序，比较麻烦。 17 | - 使用第三方查看软件，需要复制建库，持续添加…… 但是我只是想浏览一下这个文件夹的图片啊？ 18 | 19 | **于是，本软件诞生以解决您的所有需求！！！** 20 | 21 | 具体请查看[使用示例](#使用示例) 22 | 23 |
24 | 25 | ## 特性 26 | - 💡 **展示所有**：递归遍历展示选择文件夹**及其所有子文件夹**中的图片，并按照名称排序展示。 27 | - 🔑 **方便**： 直接拖入一个文件夹，即可查看图片，**0配置，0副作用**！！！ 28 | - ⚡ **快捷**： 可配置每一页展示的图片数量，以避免图片加载卡顿。 29 | - 🦋 **瀑布流**：美观，大方 30 | - ⌨️ **快捷键支持**：~~翻页快捷键~~，翻图片快捷键（均为 左右键）支持。 31 | - 🛠️ **实用的图片查看器**：([photoswipe](https://github.com/dimsemenov/photoswipe))支持 图片查看的常规操作，放大，旋转，同样支持浏览上一张，下一张图片。 32 | - 🖥️ **可设置**：支持定制 每页显示图片数量（当硬盘一般且单张图片过大时，建议选择较少的数量，10~20张比较不错），可设置图片筛选器（选定图片类型）…… 33 | 34 | ## 警告 35 | 36 | - 加载大量图片时可能会软件卡顿，这是电脑硬盘读取过慢造成的，耐心等待即可。 37 | - 如果图片过大，硬盘性能不好，可能会造成加载浏览卡顿，这时候，建议使用固态硬盘，或者调小每一页展示的图片数量！！ 38 | 39 | ## 使用示例 40 | - **[YouTube](https://www.youtube.com/watch?v=MHicKz_QJ1w)** 41 | - **[Telegram](https://t.me/edge_wasteland/6526)** 42 | - **[哔哩哔哩](https://www.bilibili.com/video/BV1tm411Q7Js/)** 43 | 44 | 45 | ### For NSFW Use 46 | **[TG preview link](https://t.me/edge_wasteland/6465)** 47 | 48 | ## 致歉 49 | 50 | 因为本人时间原因（~~高三~~），个人能力有限（~~是个废物~~）。软件可能存在诸多问题，优化上也很烂，请诸位多多包涵，也欢迎大佬贡献代码。 51 | 52 | ## 最后 53 | 54 | 希望大家赏个**Star**，以满足吾辈这小小的虚荣心吧！！！ 55 | 56 | -------------------------------------------------------------------------------- /README-quasar.md: -------------------------------------------------------------------------------- 1 | # Quasar App (ETools) 2 | 3 | A Quasar Project 4 | 5 | ## Install the dependencies 6 | ```bash 7 | yarn 8 | # or 9 | npm install 10 | ``` 11 | 12 | ### Start the app in development mode (hot-code reloading, error reporting, etc.) 13 | ```bash 14 | quasar dev 15 | ``` 16 | 17 | 18 | ### Lint the files 19 | ```bash 20 | yarn lint 21 | # or 22 | npm run lint 23 | ``` 24 | 25 | 26 | ### Format the files 27 | ```bash 28 | yarn format 29 | # or 30 | npm run format 31 | ``` 32 | 33 | 34 | 35 | ### Build the app for production 36 | ```bash 37 | quasar build 38 | ``` 39 | 40 | ### Customize the configuration 41 | See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js). 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WViewer: Waterfall-Style Image Viewer 2 | 3 | ![doc_home.png](./docs/doc_home.png) 4 | 5 | A **waterfall-style** image viewer that traverses a folder and all its subfolders to read and display all images. Images within each folder are shown **sorted by name**. 6 | If there are too many images, the software splits them into pages based on a configurable number of images per page (default: 40). It supports page navigation and flipping. 7 | 8 | ## Suitable Use Cases 9 |
10 | 11 | When browsing an artist's image pack, you might encounter situations like this: 12 | ![Example](./docs/1.png) 13 | 14 | - Many subfolders, each containing only a few images, making it hard to browse them enjoyably. 15 | - Even with **extra-large icons** in file explorer, browsing can feel cumbersome. 16 | - To enlarge and view a specific image, you must open a separate image viewer, which can be inconvenient. 17 | - Third-party viewers often require library setup, continuous additions, etc., but sometimes you just want to browse a folder's images quickly! 18 | 19 | **That's why this software was created—to solve all your needs!!!** 20 | 21 | For details, see [Usage Examples](#usage-examples). 22 | 23 |
24 | 25 | ## Features 26 | - 💡 **Show Everything**: Recursively traverse the selected folder **and all its subfolders**, displaying images sorted by name. 27 | - 🔑 **Convenience**: Simply drag a folder into the program to view its images—**zero configuration, zero side effects**!!! 28 | - ⚡ **Speed**: Configurable images per page to avoid lag during image loading. 29 | - 🦋 **Waterfall Layout**: Aesthetic and elegant. 30 | - ⌨️ **Keyboard Shortcuts**: ~~Page navigation shortcuts~~ and image navigation shortcuts (Left/Right keys supported). 31 | - 🛠️ **Practical Image Viewer**: ([photoswipe](https://github.com/dimsemenov/photoswipe)) Supports standard image viewer operations like zooming, rotating, and browsing previous/next images. 32 | - 🖥️ **Customizable Settings**: Configurable number of images per page (if your hard drive is slow or individual images are large, a smaller number like 10–20 is recommended). Includes a filter for selecting specific image types. 33 | 34 | ## Warnings 35 | - Loading a large number of images may cause lag due to slow hard drive read speeds—please be patient. 36 | - If the images are large and your hard drive performs poorly, browsing may be sluggish. In such cases, consider using an SSD or reducing the number of images displayed per page. 37 | 38 | ## Usage Examples 39 | - **[YouTube](https://www.youtube.com/watch?v=MHicKz_QJ1w)** 40 | - **[Telegram](https://t.me/edge_wasteland/6526)** 41 | - **[Bilibili](https://www.bilibili.com/video/BV1tm411Q7Js/)** 42 | 43 | 44 | ### For NSFW Use 45 | **[TG Preview Link](https://t.me/edge_wasteland/6465)** 46 | 47 | ## Apologies 48 | Due to time constraints (~~final year of high school~~) and limited personal skills (~~just a noob~~), the software may have several issues and suboptimal performance. Please be understanding and feel free to contribute code improvements! 49 | 50 | ## Finally 51 | If you like this project, please consider giving it a **Star**—it would satisfy my tiny bit of vanity!!! 😊 -------------------------------------------------------------------------------- /Todos.md: -------------------------------------------------------------------------------- 1 | - [Part1](#part1) 2 | - [缩略图](#缩略图) 3 | - [当前版本记事](#当前版本记事) 4 | - [Bugs](#bugs) 5 | - [规范化](#规范化) 6 | - [自定义灯箱](#自定义灯箱) 7 | - [TODO](#todo) 8 | - [Note](#note) 9 | - [布局](#布局) 10 | 11 | ## Part1 12 | ### 缩略图 13 | 支援缩略图目录，及同级目录下有 thumbnails 文件夹都支援（及读取图片的时候判断一下同级目录下是否有 thumbnails 文件夹 或者 根目录下 有无 thumbnails 及 thumbnails文件夹内是否有该图片的缩略图） 14 | 该结构受 Steam 支持？ 15 | 16 | ### 当前版本记事 17 | - Fix 文件读取少读的Bug 18 | - 19 | 20 | ### Bugs 21 | - [ ] 直接记录时当文件夹中文件个数小于pagenumber时，会发生读少的情况 22 | - [ ] 长文件名（中间有空格和-的文件名）展示错误："kieed23232 - 1829852267304140916 - Copy (2).gif" 23 | - [ ] 当重载新的文件夹，应当放弃对旧文件夹的读取，防止旧文件夹非常大，浪费过多的时间去读 24 | 25 | 26 | ## 规范化 27 | - 规范后端交互接口，可以让不同的前端给出不同的收集要求，比如photoswipe需要大小，viewerjs不需要。 28 | 29 | 30 | - https://github.com/dimsemenov/photoswipe-video-plugin 31 | 我仍然想知道，是否自己重写灯箱，或者利用好现有灯箱 32 | 33 | 还是自己重写灯箱更好一点，不好不好，重写灯箱要自己处理手势之类的东西，太烦人了，想办法解决Video封面图以及大小 34 | 35 | 将所有逻辑独立出来，toolbox, 比如图片删除逻辑，应该是公用的才对 36 | 37 | 还是研究 Photoswipe 的 API 以及插件的运作方式吧。。。 38 | 39 | ## 自定义灯箱 40 | 新解决方案，用 bigger-picture 重构，目前唯一问题就是 视频尺寸 41 | 42 | https://codesandbox.io/p/sandbox/bigger-picture-video-hua-lang-forked-8gdtlj 43 | 44 | 通过 45 | https://photoswipe.com/data-sources/#custom-html-markup 46 | 实现动态的获取图片/视频的尺寸 47 | 48 | 49 | 灯箱设计： 50 | - Core： 当灯箱打开后，我们要有一个指向当前ID的指针 51 | 这在删除的时候会出现问题，设计滞后 52 | 53 | 我们有一个图片列表 54 | 55 | 图片查看器使用 bigger-picture（X），我需要一个不带灯箱的图片查看器，要不就是 56 | 57 | 58 | - 不要把分页移出去，把查看器移出去，然后把现在的 Wviewer 放到 Layout 里面？ 59 | - 把 setting 也放到 Layout 里面 60 | 61 | ## TODO 62 | - [ ] 增加介绍，时间顺序仅针对单文件夹 63 | - [x] 添加增加按照时间排序查看图片吗 64 | - [ ] 自动翻页：滚动到页面底部自动识别继续滚动的话加载下一页，包括动画效果 65 | - [ ] 添加到右键目录菜单 66 | - [ ] 图片打标记功能，和 复制，移动功能分开 67 | - [ ] 判断 用户自定义安装目录 68 | - [ ] 找一个本地数据库调试工具 69 | - [ ] 浏览器开发者插件: https://devtools.vuejs.org/guide/standalone 70 | - [ ] 打包大小分析 71 | - [x] 瀑布流：默认开启的定位图片支持 72 | - [ ] 瀑布流：滚动持续加载支持 73 | - [ ] This PIC is not good, use ThisPicIndex instead 74 | - [ ] 添加视频格式支持！（怎样获取大小数据呢？采用必须生成预览图的设计） 75 | - [x] 更改软件名称为 WViewer 76 | - [x] 优化文件夹获取算法 77 | - [x] 已经加载了文件夹的前提下，能不能再直接拖动别的文件夹进软件边框范围内重新加载新的文件夹 78 | 79 | 80 | 81 | 82 | 通过 https://www.npmjs.com/package/file-type 判断文件类型，通过 前端方案，动态载入（瀑布流变动？） 大小数据。 83 | 84 | - 如果上述方案不可行，用户可选择 图片查看器引擎，从而支持图片+视频查看。 85 | viewer.js v-viewer。 https://videojs.com/city 不好？ 86 | 87 | bigger-picture: https://github.com/henrygd/bigger-picture 88 | ``` 89 | // open (will be a child of the target element above) 90 | bp.open({ 91 | items: document.querySelectorAll('#images a'), 92 | }) 93 | ``` 94 | 选择器使用 ID + Class 95 | 所以支持视频， a 标签 或者