Merge branch 'dev' into release

CHANGELOG.md

@@ -1,3 +1,19 @@
+## :tada: 2.9.2 (2024-07-30)
+
+
+### :sparkles: Features
+
+* **custom:** add advanced picbed ([60d2a01](https://github.com/Kuingsmile/piclist/commit/60d2a01))
+* **custom:** optimize gallery page performance ([3cfa9f5](https://github.com/Kuingsmile/piclist/commit/3cfa9f5)), closes [#225](https://github.com/Kuingsmile/piclist/issues/225)
+
+
+### :pencil: Documentation
+
+* **custom:** prepare for 2.9.2 ([5ebe10c](https://github.com/Kuingsmile/piclist/commit/5ebe10c))
+* **custom:** update readme ([48d24f6](https://github.com/Kuingsmile/piclist/commit/48d24f6))
+
+
+
 ## :tada: 2.9.1 (2024-07-07)
 
 

README.md

@@ -58,30 +58,20 @@ Please install my matching plugin [VS-PicList](https://marketplace.visualstudio.
 
 #### **Version 1.6.0-dev and above**
 
-**Typora 1.6.0-dev and above versions now support PicList natively**
+**Typora 1.6.0-dev and above versions now support PicList natively if you set language of Typora to Chinese.**
 
-Now you need to set the upload service PicList and PicGo (app) to the installation path of PicList at the same time, it has been fixed in latest dev version.
+If your Typora version is lower than 1.8.0, you need to set the upload service PicList and PicGo (app) to the installation path of PicList at the same time.
 
 [download link](https://typora.io/releases/all)
 
 #### **Version < 1.6.0-dev**
 
-Windows:
-
-Enter the Typora settings page, select the image, set the upload service to `PicGo(app)`, and then fill in the installation path of PicList in `PicGo path`, as shown below:
+For windows, Enter the Typora settings page, select the image, set the upload service to `PicGo(app)`, and then fill in the installation path of PicList in `PicGo path`, as shown below:
 
 ![image](https://user-images.githubusercontent.com/96409857/226522101-b3531b7b-534c-4149-b527-8738d4ebb041.png)
 
 Or, you can also use the `npm install piclist` command to install PicList-core, and then set the upload service to `PicGo-Core(command line)`.
 
-MacOS:
-
-Enter the Typora settings page, select the image, set the upload service to `Custom Command`, and then fill in `/Applications/PicList.app/Contents/MacOS/PicList upload` in `Command`, as shown below:
-
-![image](https://user-images.githubusercontent.com/96409857/226645570-4c6e06a5-5bd9-40c3-a21d-8446c66325e3.png)
-
-The verification of the upload option may have problems, you can ignore it, and use it directly.
-
 ### How to use in Obsidian
 
 In the community plugins, search for and install the Image auto upload Plugin. Next, go to the plugin settings page and change the default uploader to PicGo(app). Set the PicGo server to `http://127.0.0.1:36677/upload` as shown in the image below. Additionally, this plugin also supports cloud-based deletion through PicList. To use this feature, enter `http://127.0.0.1:36677/delete` in the deletion interface.
@@ -151,6 +141,7 @@ docker-compose up -d
 |    PicList(Lasso-Doll)     |          ✔️           |            ✔️             |
 |         Telegra.ph         |          ✔️           |            ×             |
 |          Lsky Pro          |          ✔️           |            ✔️             |
+|    Custom API platform     |          ×           |            ×             |
 
 |                                           Plugin                                           | Album cloud deletion |
 | :----------------------------------------------------------------------------------------: | :------------------: |

README_cn.md

@@ -58,9 +58,9 @@ PicList的内核使用的是原版PicGo-Core基础上修改的[PicList-core](htt
 
 #### **1.6.0版本及以上**
 
-**Typora 1.6.0-dev以及以上版本现在已经原生支持PicList了**
+**Typora 1.6.0-dev以及以上版本现在已经原生支持PicList了, 但你需要将Typora的语言设置为中文**
 
-目前Typora中需要同时设置上传服务PicList和PicGo（app）的路径为PicList的安装路径，已经在最新的Dev版本中修复。
+1.8.0以下版本的Typora中需要同时设置上传服务PicList和PicGo（app）的路径为PicList的安装路径。
 
 [下载地址](https://typora.io/releases/all)
 
@@ -74,14 +74,6 @@ Windows:
 
 或者，您也可以使用 `npm install piclist`命令安装PicList-core，然后上传服务设置为 `PicGo-Core(command line)`。
 
-MacOS:
-
-进入Typora设置界面，选择图像，将上传服务设置为 `Custom Command`，然后在 `Command`中填写 `/Applications/PicList.app/Contents/MacOS/PicList upload`，如下图所示：
-
-![image](https://user-images.githubusercontent.com/96409857/226645570-4c6e06a5-5bd9-40c3-a21d-8446c66325e3.png)
-
-验证上传选项可能会出现问题，可以忽略，直接使用是正常的。
-
 ### 如何在Obsidian中使用
 
 在社区插件中搜索安装 `Image auto upload Plugin`，然后进入插件设置页面，修改默认上传器为 `PicGo(app)`，设置 `PicGo server`为 `http://127.0.0.1:36677/upload`即可，如下图所示, 此外该插件还额外支持通过PicList进行云端删除，请在删除接口内填入 `http://127.0.0.1:36677/delete`：
@@ -151,6 +143,7 @@ docker-compose up -d
 | PicList(套娃)  |     ✔️      |     ✔️      |
 |   Telegra.ph   |     ✔️      |     x      |
 |    兰空图床    |     ✔️      |     ✔️      |
+|   自定义图床   |     x      |     x      |
 
 |                                            插件                                            | 相册云删除 |
 | :----------------------------------------------------------------------------------------: | :--------: |

currentVersion.md

@@ -1,14 +1,5 @@
 ### ✨ Features
 
-- 新增内置AList上传支持
-- 优化了设置了图片处理操作时的上传进度通知
-- 优化了部分图床的i18n设置
-- 修改内置兰空图床显示名，由`lsky`修改为`兰空图床`
-- core版本现在使用piclist桌面版配置文件时支持设置`configName`参数
-
-### 🐛 Bug Fixes
-
-- 修复了s3图床文件名含有特殊字符时无法删除的问题
-- 修复了特定情况下开启手动重命名后会导致软件闪退的问题
-- 修复了图床设置页面按钮的样式问题
-- 优化了多个图床存在的重复记录错误日志的问题
+- 新增高级自定义图床
+- 相册页面现在加载图片时会显示loading图
+- 优化了相册页面的加载速度

currentVersion_en.md

@@ -1,14 +1,5 @@
 ### ✨ Features
 
-- Add built-in AList upload support
-- Optimize the upload progress notification when image processing operations are set
-- Optimize the i18n settings of some image beds
-- Modify the display name of the built-in Lan Kong image bed from `lsky` to `Lan Kong image bed`
-- The core version now supports setting the `configName` parameter when using the piclist desktop version configuration file
-
-### 🐛 Bug Fixes
-
-- Fix the problem that the s3 image bed cannot be deleted when the file name contains special characters
-- Fix the problem that the software crashes under specific conditions after enabling manual renaming
-- Fix the style problem of the button on the image bed setting page
-- Optimize the problem of repeated recording error logs for multiple image beds
+- Add advanced custom image bed
+- The album page now displays a loading image when loading pictures
+- Optimized the loading speed of the album page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "piclist",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "author": {
     "name": "Kuingsmile",
     "email": "[email protected]"
@@ -52,7 +52,7 @@
     "cos-nodejs-sdk-v5": "^2.12.5",
     "dexie": "^3.2.4",
     "electron-updater": "^6.1.4",
-    "element-plus": "2.7.6",
+    "element-plus": "2.7.7",
     "epipebomb": "^1.0.0",
     "fast-xml-parser": "^4.3.2",
     "form-data": "^4.0.0",
@@ -67,7 +67,7 @@
     "multer": "^1.4.5-lts.1",
     "node-ssh-no-cpu-features": "^2.0.0",
     "nodejs-file-downloader": "^4.12.1",
-    "piclist": "^1.9.0",
+    "piclist": "^1.9.1",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "proxy-agent": "^5.0.0",
@@ -79,7 +79,7 @@
     "upyun": "^3.4.6",
     "uuid": "^9.0.1",
     "video.js": "^8.6.1",
-    "vue": "^3.4.30",
+    "vue": "^3.4.31",
     "vue-router": "^4.4.0",
     "vue3-lazyload": "^0.3.8",
     "vue3-photo-preview": "^0.3.0",

src/main.ts

@@ -25,7 +25,6 @@ import db from '@/utils/db'
 import { T } from '@/i18n/index'
 import { store } from '@/store'
 import { initTalkingData } from '@/utils/analytic'
-import { dragMixin } from '@/utils/mixin'
 
 webFrame.setVisualZoomLevelLimits(1, 1)
 
@@ -37,11 +36,12 @@ app.config.globalProperties.triggerRPC = triggerRPC
 app.config.globalProperties.sendRPC = sendRPC
 app.config.globalProperties.sendToMain = sendToMain
 
-app.mixin(dragMixin)
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
 app.use(VueLazyLoad, {
-  error: `file://${__static.replace(/\\/g, '/')}/unknown-file-type.svg`
+  loading: `file://${__static.replace(/\\/g, '/')}/loading.jpg`,
+  error: `file://${__static.replace(/\\/g, '/')}/unknown-file-type.svg`,
+  delay: 500
 })
 app.use(ElementUI)
 app.use(router)

src/renderer/pages/Gallery.vue

@@ -184,7 +184,12 @@
             class="gallery-list__img"
           >
             <div class="gallery-list__item" @click="zoomImage(index)">
-              <img v-lazy="item.galleryPath || item.imgUrl" class="gallery-list__item-img" />
+              <img
+                v-lazy="{
+                  src: item.galleryPath || item.imgUrl
+                }"
+                class="gallery-list__item-img"
+              />
             </div>
             <div class="gallery-list__file-name" :title="item.fileName">
               {{ formatFileName(item.fileName || '') }}
@@ -385,6 +390,7 @@ const isShowBatchRenameDialog = ref(false)
 const batchRenameMatch = ref('')
 const batchRenameReplace = ref('')
 const dateRange = ref('')
+
 const mathcedCount = computed(() => {
   return filterList.value.filter((item: any) => {
     return customStrMatch(item.imgUrl, batchRenameMatch.value)
@@ -411,7 +417,6 @@ onBeforeMount(async () => {
     })
   })
   updateGallery()
-
   document.addEventListener('keydown', handleDetectShiftKey)
   document.addEventListener('keyup', handleDetectShiftKey)
 })
@@ -423,7 +428,10 @@ function handleDetectShiftKey(event: KeyboardEvent) {
 }
 
 const filterList = computed(() => {
-  return getGallery()
+  const start = new Date().getTime()
+  const res = getGallery()
+  console.log(`filterList: ${new Date().getTime() - start}ms`)
+  return res
 })
 
 const isAllSelected = computed(() => {
@@ -479,7 +487,9 @@ function getGallery(): IGalleryItem[] {
 }
 
 async function updateGallery() {
+  const start = new Date().getTime()
   images.value = (await $$db.get({ orderBy: 'desc' }))!.data
+  console.log(`updateGallery: ${new Date().getTime() - start}ms`)
 }
 
 watch(

src/renderer/pages/Upload.vue

@@ -127,7 +127,9 @@ import { SHOW_INPUT_BOX, SHOW_INPUT_BOX_RESPONSE } from '#/events/constants'
 import { IPasteStyle, IRPCActionType } from '#/types/enum'
 import { isUrl } from '#/utils/common'
 import { configPaths } from '#/utils/configPaths'
+import { useDragEventListeners } from '@/utils/drag'
 
+useDragEventListeners()
 const $router = useRouter()
 
 const imageProcessDialogVisible = ref(false)

src/renderer/utils/drag.ts

@@ -0,0 +1,23 @@
+import { onBeforeUnmount, onMounted } from 'vue'
+
+function disableDrag(e: DragEvent) {
+  const dropzone = document.getElementById('upload-area')
+  if (dropzone === null || !dropzone.contains(<Node>e.target)) {
+    e.preventDefault()
+    e.dataTransfer!.effectAllowed = 'none'
+    e.dataTransfer!.dropEffect = 'none'
+  }
+}
+
+export function useDragEventListeners() {
+  onMounted(() => {
+    window.addEventListener('dragenter', disableDrag, false)
+    window.addEventListener('dragover', disableDrag)
+    window.addEventListener('drop', disableDrag)
+  })
+  onBeforeUnmount(() => {
+    window.removeEventListener('dragenter', disableDrag, false)
+    window.removeEventListener('dragover', disableDrag)
+    window.removeEventListener('drop', disableDrag)
+  })
+}

src/universal/types/shims-module.d.ts

@@ -1,10 +1,5 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
-// // third-party
-// declare module 'fix-path' {
-//   function fixPath(): void
-//   export default fixPath
-// }
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/universal/types/shims-tsx.d.ts

@@ -1,19 +1,19 @@
-import Vue, { VNode } from 'vue'
-
-declare global {
-  namespace JSX {
-    // tslint:disable no-empty-interface
-    interface Element extends VNode {}
-    // tslint:disable no-empty-interface
-    interface ElementClass extends Vue {}
-    interface IntrinsicElements {
-      [elem: string]: any
-    }
-  }
-
-  interface Window {
-    TDAPP: {
-      onEvent: (EventId: string, Label?: string, MapKv?: IStringKeyMap) => void
-    }
-  }
-}
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends  Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+
+  interface Window {
+    TDAPP: {
+      onEvent: (EventId: string, Label?: string, MapKv?: IStringKeyMap) => void
+    }
+  }
+}