🔨 Refactor: refactored the import section of the code

src/renderer/App.vue

@@ -5,10 +5,19 @@
 </template>
 
 <script lang="ts" setup>
+// 状态管理
 import { useStore } from '@/hooks/useStore'
+
+// Vue 生命周期钩子
 import { onBeforeMount, onMounted, onUnmounted } from 'vue'
+
+// 数据发送工具函数
 import { getConfig } from './utils/dataSender'
+
+// 类型声明
 import type { IConfig } from 'piclist'
+
+// 其他工具
 import bus from './utils/bus'
 import { FORCE_UPDATE } from '~/universal/events/constants'
 

src/renderer/apis/aliyun.ts

@@ -24,7 +24,7 @@ export default class AliyunApi {
 
   private static getKey (fileName: string, path?: string): string {
     return path && path !== '/'
-      ? `${path.replace(/^\//, '').replace(/\/$/, '')}/${fileName}`
+      ? `${path.replace(/^\/+|\/+$/, '')}/${fileName}`
       : fileName
   }
 

src/renderer/apis/awss3.ts

@@ -36,7 +36,7 @@ export default class AwsS3Api {
       })
       const result = await client.deleteObject({
         Bucket: bucketName,
-        Key: fileKey.replace(/^\//, '')
+        Key: fileKey.replace(/^\/+/, '')
       }).promise()
       return result.$response.httpResponse.statusCode === 204
     } catch (error) {

src/renderer/apis/github.ts

@@ -20,7 +20,7 @@ export default class GithubApi {
 
   private static createKey (path: string | undefined, fileName: string): string {
     return path && path !== '/'
-      ? `${path.replace(/^\//, '').replace(/\/$/, '')}/${fileName}`
+      ? `${path.replace(/^\/+|\/+$/, '')}/${fileName}`
       : fileName
   }
 

src/renderer/apis/qiniu.ts

@@ -17,7 +17,7 @@ export default class QiniuApi {
     const qiniuConfig = new Qiniu.conf.Config()
     try {
       const bucketManager = new Qiniu.rs.BucketManager(mac, qiniuConfig)
-      const formattedPath = path?.replace(/^\//, '').replace(/\/$/, '') || ''
+      const formattedPath = path?.replace(/^\/+|\/+$/, '') || ''
       const key = path === '/' || !path ? fileName : `${formattedPath}/${fileName}`
       const res = await new Promise((resolve, reject) => {
         bucketManager.delete(bucket, key, (err, respBody, respInfo) => {

src/renderer/apis/tcyun.ts

@@ -27,7 +27,7 @@ export default class TcyunApi {
       if (path === '/' || !path) {
         key = `/${fileName}`
       } else {
-        key = `/${path.replace(/^\//, '').replace(/\/$/, '')}/${fileName}`
+        key = `/${path.replace(/^\/+|\/+$/, '')}/${fileName}`
       }
       const result = await cos.deleteObject({
         Bucket: bucket,

src/renderer/apis/upyun.ts

@@ -11,7 +11,7 @@ export default class UpyunApi {
       if (path === '/' || !path) {
         key = fileName
       } else {
-        key = `${path.replace(/^\//, '').replace(/\/$/, '')}/${fileName}`
+        key = `${path.replace(/^\/+|\/+$/, '')}/${fileName}`
       }
       return await client.deleteFile(key)
     } catch (error) {

src/renderer/apis/webdav.ts

@@ -16,7 +16,7 @@ export default class WebdavApi {
     if (path === '/' || !path) {
       key = fileName
     } else {
-      key = `${path.replace(/^\//, '').replace(/\/$/, '')}/${fileName}`
+      key = `${path.replace(/^\/+|\/+$/, '')}/${fileName}`
     }
     try {
       await ctx.deleteFile(key)

src/renderer/components/InputBoxDialog.vue

@@ -34,6 +34,8 @@ import {
 } from '~/universal/events/constants'
 import $bus from '@/utils/bus'
 import { sendToMain } from '@/utils/dataSender'
+import { T as $T } from '@/i18n/index'
+
 const inputBoxValue = ref('')
 const showInputBoxVisible = ref(false)
 const inputBoxOptions = reactive({

src/renderer/components/ToolboxHandler.vue

@@ -10,6 +10,7 @@
 </template>
 <script lang="ts" setup>
 import { IToolboxItemCheckStatus } from '~/universal/types/enum'
+
 interface IProps {
   status: IToolboxItemCheckStatus
   value: any

src/renderer/components/ToolboxStatusIcon.vue

@@ -18,6 +18,7 @@
 import { CircleCloseFilled, Loading, SuccessFilled } from '@element-plus/icons-vue'
 import { computed } from 'vue'
 import { IToolboxItemCheckStatus } from '~/universal/types/enum'
+
 interface IProps {
   status: IToolboxItemCheckStatus
 }

src/renderer/layouts/Main.vue

@@ -233,7 +233,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-// import { Component, Vue, Watch } from 'vue-property-decorator'
+// Element Plus 图标
 import {
   Tools,
   UploadFilled,
@@ -248,20 +248,42 @@ import {
   Link,
   ArrowUpBold
 } from '@element-plus/icons-vue'
+
+// Element Plus 消息框组件
 import { ElMessage as $message, ElMessageBox } from 'element-plus'
+
+// 国际化函数
 import { T as $T } from '@/i18n/index'
+
+// Vue 相关
 import { ref, onBeforeUnmount, Ref, onBeforeMount, watch, nextTick, reactive } from 'vue'
+
+// Vue Router 相关
 import { onBeforeRouteUpdate, useRouter } from 'vue-router'
+
+// 二维码组件
 import QrcodeVue from 'qrcode.vue'
+
+// Lodash pick 函数
 import pick from 'lodash/pick'
+
+// 根目录 package.json
 import pkg from 'root/package.json'
+
+// 路由配置常量
 import * as config from '@/router/config'
+
+// Electron 相关
 import {
   ipcRenderer,
   IpcRendererEvent,
   clipboard
 } from 'electron'
+
+// 输入框对话框组件
 import InputBoxDialog from '@/components/InputBoxDialog.vue'
+
+// 事件常量
 import {
   MINIMIZE_WINDOW,
   CLOSE_WINDOW,
@@ -271,8 +293,13 @@ import {
   GET_PICBEDS,
   OPEN_URL
 } from '~/universal/events/constants'
+
+// 数据发送工具函数
 import { getConfig, sendToMain } from '@/utils/dataSender'
+
+// Piclist 配置类型声明
 import { IConfig } from 'piclist'
+
 const version = ref(process.env.NODE_ENV === 'production' ? pkg.version : 'Dev')
 const routerConfig = reactive(config)
 const defaultActive = ref(routerConfig.UPLOAD_PAGE)

src/renderer/manage/pages/bucketPage.vue

@@ -1408,16 +1408,37 @@ https://www.baidu.com/img/bd_logo1.png"
 </template>
 
 <script lang="tsx" setup>
+// Vue 相关
 import { ref, reactive, watch, onBeforeMount, computed, onBeforeUnmount } from 'vue'
+
+// Vue Router 相关
 import { useRoute } from 'vue-router'
+
+// Element Plus 图标
 import { InfoFilled, Grid, Fold, Close, Folder, FolderAdd, Upload, CircleClose, Loading, CopyDocument, Edit, DocumentAdd, Link, Refresh, ArrowRight, HomeFilled, Document, Coin, Download, DeleteFilled, Sort, FolderOpened } from '@element-plus/icons-vue'
+
+// 状态管理相关
 import { useManageStore } from '../store/manageStore'
+
+// 工具函数
 import { customRenameFormatTable, customStrMatch, customStrReplace, renameFile, formatLink, formatFileName, getFileIconPath, formatFileSize, getExtension, isValidUrl, svg } from '../utils/common'
+
+// 静态工具函数
 import { cancelDownloadLoadingFileList, refreshDownloadFileTransferList } from '../utils/static'
+
+// Electron 相关
 import { ipcRenderer, clipboard, IpcRendererEvent } from 'electron'
+
+// 数据库操作
 import { fileCacheDbInstance } from '../store/bucketFileDb'
+
+// 工具函数
 import { trimPath } from '~/main/manage/utils/common'
+
+// Axios
 import axios from 'axios'
+
+// Element Plus 组件
 import {
   ElMessage, ElMessageBox, ElNotification,
   ElButton,
@@ -1434,19 +1455,42 @@ import {
   ElTag,
   ElCard
 } from 'element-plus'
+
+// 类型声明
 import type { Column, RowClassNameGetter } from 'element-plus'
+
+// 状态管理相关
 import { useFileTransferStore, useDownloadFileTransferStore } from '@/manage/store/manageStore'
+
+// UUID
 import { v4 as uuidv4 } from 'uuid'
+
+// 路径处理库
 import path from 'path'
-import { IUploadTask, IDownloadTask } from '~/main/manage/datastore/upDownTaskQueue'
+
+// 文件系统库
 import fs from 'fs-extra'
+
+// 数据发送工具函数
 import { getConfig, saveConfig } from '../utils/dataSender'
+
+// Markdown 解析库
 import { marked } from 'marked'
+
+// 文本文件扩展名列表
 import { textFileExt } from '../utils/textfile'
+
+// 视频文件扩展名列表
 import { videoExt } from '../utils/videofile'
+
+// 组件
 import ImageWebdav from '@/components/ImageWebdav.vue'
+
+// 国际化函数
 import { T as $T } from '@/i18n'
 
+import { IUploadTask, IDownloadTask } from '~/main/manage/datastore/upDownTaskQueue'
+
 /*
 configMap:{
     prefix: string, -> baseDir
@@ -2408,7 +2452,7 @@ async function handleFolderBatchDownload (item: any) {
         Location: configMap.bucketConfig.Location
       },
       paging: paging.value,
-      prefix: `/${item.key.replace(/\/+$/, '').replace(/^\/+/, '')}/`,
+      prefix: `/${item.key.replace(/^\/+|\/+$/, '')}/`,
       marker: pagingMarker.value,
       itemsPerPage: itemsPerPage.value,
       customUrl: currentCustomUrl.value,
@@ -2443,7 +2487,7 @@ async function handleFolderBatchDownload (item: any) {
                 bucketName: configMap.bucketName,
                 region: configMap.bucketConfig.Location,
                 key: item.key,
-                fileName: [undefined, true].includes(manageStore.config.settings.isDownloadFolderKeepDirStructure) ? `/${item.key.replace(/\/+$/, '').replace(/^\/+/, '')}` : item.fileName,
+                fileName: [undefined, true].includes(manageStore.config.settings.isDownloadFolderKeepDirStructure) ? `/${item.key.replace(/^\/+|\/+$/, '')}` : item.fileName,
                 customUrl: currentCustomUrl.value,
                 downloadUrl: item.downloadUrl,
                 githubUrl: item.url,
@@ -2486,7 +2530,7 @@ async function handleBatchDownload () {
         bucketName: configMap.bucketName,
         region: configMap.bucketConfig.Location,
         key: item.key,
-        fileName: manageStore.config.settings.isDownloadFileKeepDirStructure ? `/${item.key.replace(/\/+$/, '').replace(/^\/+/, '')}` : item.fileName,
+        fileName: manageStore.config.settings.isDownloadFileKeepDirStructure ? `/${item.key.replace(/^\/+|\/+$/, '')}` : item.fileName,
         customUrl: currentCustomUrl.value,
         downloadUrl: item.downloadUrl,
         githubUrl: item.url,

src/renderer/manage/pages/logIn.vue

@@ -258,17 +258,40 @@
 </template>
 
 <script lang="ts" setup>
+// Vue 相关
 import { reactive, ref, onMounted, computed } from 'vue'
+
+// 支持的图床列表
 import { supportedPicBedList } from '../utils/constants'
+
+// Element Plus 图标
 import { Delete, Edit, Pointer, InfoFilled } from '@element-plus/icons-vue'
+
+// Element Plus 消息组件
 import { ElMessage, ElNotification } from 'element-plus'
+
+// 数据发送工具函数
 import { getConfig, saveConfig, removeConfig } from '../utils/dataSender'
+
+// Electron 相关
 import { shell } from 'electron'
+
+// Vue Router 相关
 import { useRouter } from 'vue-router'
+
+// 状态管理相关
 import { useManageStore } from '../store/manageStore'
+
+// 工具函数
 import { formObjToTableData, svg } from '../utils/common'
+
+// 数据发送工具函数
 import { getConfig as getPicBedsConfig } from '@/utils/dataSender'
+
+// 端点地址格式化
 import { formatEndpoint } from '~/main/manage/utils/common'
+
+// 国际化函数
 import { T as $T } from '@/i18n'
 
 const activeName = ref('login')

src/renderer/manage/pages/manageMain.vue

@@ -273,15 +273,34 @@
 </template>
 
 <script lang="ts" setup>
+// Vue 相关
 import { ref, reactive, computed, onBeforeMount, watch } from 'vue'
+
+// Electron 相关
 import { shell } from 'electron'
+
+// 支持的图床列表
 import { supportedPicBedList } from '../utils/constants'
+
+// Element Plus 图标
 import { CirclePlus, SuccessFilled, Folder, Switch, Tools, ChromeFilled, HomeFilled, FolderOpened } from '@element-plus/icons-vue'
+
+// Vue Router 相关
 import { useRouter, useRoute } from 'vue-router'
+
+// Element Plus 通知组件
 import { ElNotification } from 'element-plus'
+
+// 数据发送工具函数
 import { invokeToMain } from '../utils/dataSender'
+
+// 新建图床配置
 import { newBucketConfig } from '../utils/newBucketConfig'
+
+// 状态管理相关
 import { useManageStore } from '../store/manageStore'
+
+// 国际化函数
 import { T as $T } from '@/i18n'
 
 const manageStore = useManageStore() as any

src/renderer/manage/pages/manageSetting.vue

@@ -513,14 +513,29 @@
 </template>
 
 <script lang="ts" setup>
+// Element Plus 图标
 import { InfoFilled, Folder } from '@element-plus/icons-vue'
+
+// Vue 相关
 import { ref, reactive, onBeforeMount, watch, onBeforeUnmount } from 'vue'
+
+// 数据发送工具函数
 import { getConfig, saveConfig, invokeToMain } from '../utils/dataSender'
+
+// Element Plus 消息组件
 import { ElMessage } from 'element-plus'
+
+// 状态管理相关
 import { useManageStore } from '../store/manageStore'
 import { fileCacheDbInstance } from '../store/bucketFileDb'
+
+// 工具函数
 import { formatFileSize, customRenameFormatTable } from '../utils/common'
+
+// 国际化函数
 import { T as $T } from '@/i18n'
+
+// 静态路径选择
 import { selectDownloadFolder } from '../utils/static'
 
 const manageStore = useManageStore()

src/renderer/manage/utils/common.ts

@@ -1,8 +1,19 @@
+// UUID
 import { v4 as uuidv4 } from 'uuid'
+
+// 路径处理库
 import path from 'path'
+
+// 加密库
 import crypto from 'crypto'
+
+// 可用图标列表
 import { availableIconList } from './icon'
+
+// 数据发送工具函数
 import { getConfig } from './dataSender'
+
+// 工具函数
 import { handleUrlEncode } from '~/universal/utils/common'
 
 export function randomStringGenerator (length: number): string {

src/renderer/pages/Gallery.vue

@@ -422,22 +422,46 @@
   </div>
 </template>
 <script lang="ts" setup>
+// 类型声明
 import type { IResult } from '@picgo/store/dist/types'
+
+// 事件常量
 import { PASTE_TEXT, GET_PICBEDS } from '#/events/constants'
+
+// Element Plus 组件
 import { CheckboxValueType, ElMessageBox, ElNotification, ElMessage } from 'element-plus'
+
+// Element Plus 图标
 import { InfoFilled, Close, CaretBottom, Document, Edit, Delete, CaretTop, Sort } from '@element-plus/icons-vue'
+
+// Electron 相关
 import {
   ipcRenderer,
   clipboard,
   IpcRendererEvent
 } from 'electron'
+
+// Vue 相关
 import { computed, nextTick, onActivated, onBeforeUnmount, onBeforeMount, reactive, ref, watch } from 'vue'
+
+// 数据发送工具函数
 import { getConfig, saveConfig, sendToMain } from '@/utils/dataSender'
+
+// Vue Router 相关
 import { onBeforeRouteUpdate } from 'vue-router'
+
+// 国际化函数
 import { T as $T } from '@/i18n/index'
+
+// 数据库操作
 import $$db from '@/utils/db'
+
+// API 接口
 import ALLApi from '@/apis/allApi'
+
+// 工具函数
 import { customRenameFormatTable, customStrMatch, customStrReplace } from '../manage/utils/common'
+
 const images = ref<ImgInfo[]>([])
 const dialogVisible = ref(false)
 const imgInfo = reactive({

src/renderer/pages/MiniPage.vue

@@ -30,21 +30,38 @@
   </div>
 </template>
 <script lang="ts" setup>
-
+// 国际化函数
 import { T as $T } from '@/i18n/index'
+
+// Element Plus 消息框组件
 import { ElMessage as $message } from 'element-plus'
+
+// Electron 相关
 import {
   ipcRenderer,
   IpcRendererEvent
 } from 'electron'
+
+// Vue 生命周期钩子
 import { onBeforeUnmount, onBeforeMount, ref, watch, reactive } from 'vue'
+
+// 事件常量
 import { SHOW_MINI_PAGE_MENU, SET_MINI_WINDOW_POS } from '~/universal/events/constants'
+
+// 工具函数
 import {
   isUrl
 } from '~/universal/utils/common'
+
+// 数据发送工具函数
 import { getConfig, sendToMain } from '@/utils/dataSender'
+
+// Piclist 配置类型声明
 import { IConfig } from 'piclist'
+
+// 数据发送工具函数
 import { invokeToMain } from '@/manage/utils/dataSender'
+
 const logoPath = reactive({
   value: ''
 })

src/renderer/pages/PicGoSetting.vue

@@ -1470,23 +1470,49 @@
 <script lang="ts" setup>
 // @ts-ignore
 import { ElForm, ElMessage as $message, ElMessage, ElMessageBox, FormRules } from 'element-plus'
+
+// Element Plus 图标
 import { Reading, Close, Edit, InfoFilled } from '@element-plus/icons-vue'
+
+// 根目录 package.json
 import pkg from 'root/package.json'
+
+// 事件常量
 import { PICGO_OPEN_FILE, OPEN_URL, GET_PICBEDS, HIDE_DOCK } from '#/events/constants'
+
+// Electron 相关
 import {
   ipcRenderer
 } from 'electron'
+
+// 国际化管理器
 import { i18nManager, T as $T } from '@/i18n/index'
+
+// 工具函数
 import { enforceNumber } from '~/universal/utils/common'
 import { getLatestVersion } from '#/utils/getLatestVersion'
 import { compare } from 'compare-versions'
 import { STABLE_RELEASE_URL } from '#/utils/static'
+
+// Vue 相关
 import { computed, onBeforeMount, onBeforeUnmount, reactive, ref, toRaw } from 'vue'
+
+// 数据发送工具函数
 import { getConfig, saveConfig, sendToMain } from '@/utils/dataSender'
+
+// Vue Router 相关
 import { useRouter } from 'vue-router'
+
+// 路由配置常量
 import { SHORTKEY_PAGE } from '@/router/config'
+
+// Piclist 相关类型声明
 import { IConfig, IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
+
+// 数据发送工具函数
 import { invokeToMain } from '@/manage/utils/dataSender'
+
+// 内置重命名格式表
 import { buildInRenameFormatTable } from '../manage/utils/common'
 
 const imageProcessDialogVisible = ref(false)

src/renderer/pages/Plugin.vue

@@ -200,15 +200,28 @@
   </div>
 </template>
 <script lang="ts" setup>
+// Element Plus 图标
 import { Close, Download, Goods, Remove, Tools } from '@element-plus/icons-vue'
+
+// 国际化函数
 import { T as $T } from '@/i18n/index'
+
+// 组件
 import ConfigForm from '@/components/ConfigFormForPlugin.vue'
+
+// Lodash 函数节流
 import { debounce, DebouncedFunc } from 'lodash'
+
+// Electron 相关
 import {
   ipcRenderer,
   IpcRendererEvent
 } from 'electron'
+
+// 工具函数
 import { handleStreamlinePluginName } from '~/universal/utils/common'
+
+// 事件常量
 import {
   OPEN_URL,
   PICGO_CONFIG_PLUGIN,
@@ -218,10 +231,20 @@ import {
   GET_PICBEDS,
   PICGO_HANDLE_PLUGIN_DONE
 } from '#/events/constants'
+
+// Vue 相关
 import { computed, ref, onBeforeMount, onBeforeUnmount, watch, onMounted } from 'vue'
+
+// 数据发送工具函数
 import { getConfig, saveConfig, sendRPC, sendToMain } from '@/utils/dataSender'
+
+// Element Plus 消息框组件
 import { ElMessageBox } from 'element-plus'
+
+// Axios
 import axios from 'axios'
+
+// 枚举类型声明
 import { IRPCActionType } from '~/universal/types/enum'
 
 const $confirm = ElMessageBox.confirm

src/renderer/pages/RenamePage.vue

@@ -52,16 +52,28 @@
   </div>
 </template>
 <script lang="ts" setup>
+// Element Plus 图标
 import { Close } from '@element-plus/icons-vue'
+
+// 事件常量
 import { GET_RENAME_FILE_NAME, RENAME_FILE_NAME } from '#/events/constants'
+
+// 数据发送工具函数
 import { sendToMain } from '@/utils/dataSender'
+
+// 国际化函数
 import { T as $T } from '@/i18n/index'
-import {
-  ipcRenderer,
-  IpcRendererEvent
-} from 'electron'
+
+// Electron 相关
+import { ipcRenderer, IpcRendererEvent } from 'electron'
+
+// Vue 生命周期钩子
 import { onBeforeUnmount, onBeforeMount, ref, reactive } from 'vue'
+
+// 自定义钩子
 import { useIPCOn } from '@/hooks/useIPC'
+
+// Element Plus 表单实例类型
 import { FormInstance } from 'element-plus'
 
 const id = ref<string | null>(null)

src/renderer/pages/ShortKey.vue

@@ -114,11 +114,22 @@
   </div>
 </template>
 <script lang="ts" setup>
+// 按键绑定工具函数
 import keyBinding from '@/utils/key-binding'
+
+// Electron 相关
 import { ipcRenderer, IpcRendererEvent } from 'electron'
+
+// 事件常量
 import { TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants'
+
+// Vue 生命周期钩子
 import { onBeforeUnmount, onBeforeMount, ref, watch } from 'vue'
+
+// 数据发送工具函数
 import { getConfig, sendToMain } from '@/utils/dataSender'
+
+// 国际化函数
 import { T as $T } from '@/i18n'
 
 const list = ref<IShortKeyConfig[]>([])

src/renderer/pages/Toolbox.vue

@@ -95,12 +95,25 @@
   </div>
 </template>
 <script lang="ts" setup>
+// 自定义钩子
 import { useIPC } from '@/hooks/useIPC'
+
+// 数据发送工具函数
 import { sendRPC, triggerRPC } from '@/utils/dataSender'
+
+// Element Plus 消息框组件
 import { ElMessageBox } from 'element-plus'
+
+// Vue 相关
 import { computed, reactive, ref } from 'vue'
+
+// 枚举类型声明
 import { IToolboxItemType, IToolboxItemCheckStatus, IRPCActionType } from '~/universal/types/enum'
+
+// 国际化函数
 import { T as $T } from '@/i18n'
+
+// 组件
 import ToolboxStatusIcon from '@/components/ToolboxStatusIcon.vue'
 import ToolboxHandler from '@/components/ToolboxHandler.vue'
 

src/renderer/pages/TrayPage.vue

@@ -62,14 +62,31 @@
 </template>
 
 <script lang="ts" setup>
+// Vue 相关
 import { reactive, ref, onBeforeUnmount, onBeforeMount } from 'vue'
+
+// Electron 相关
 import { clipboard, ipcRenderer } from 'electron'
+
+// 数据库操作
 import $$db from '@/utils/db'
+
+// 国际化函数
 import { T as $T } from '@/i18n/index'
+
+// Picgo Store 相关类型
 import { IResult } from '@picgo/store/dist/types'
+
+// 事件常量
 import { OPEN_WINDOW } from '#/events/constants'
+
+// 枚举类型声明
 import { IPasteStyle, IWindowList } from '#/types/enum'
+
+// 数据发送工具函数
 import { getConfig, sendToMain } from '@/utils/dataSender'
+
+// 工具函数
 import { handleUrlEncode } from '#/utils/common'
 
 const files = ref<IResult<ImgInfo>[]>([])

src/renderer/pages/Upload.vue

@@ -399,28 +399,49 @@
   </div>
 </template>
 <script lang="ts" setup>
+// Element Plus 图标
 import { UploadFilled, CaretBottom } from '@element-plus/icons-vue'
-import {
-  ipcRenderer,
-  IpcRendererEvent
-} from 'electron'
+
+// Electron 相关
+import { ipcRenderer, IpcRendererEvent } from 'electron'
+
+// Vue 相关
 import { ref, reactive, onBeforeMount, onBeforeUnmount, watch, toRaw } from 'vue'
+
+// 国际化函数
 import { T as $T } from '@/i18n'
+
+// 事件总线
 import $bus from '@/utils/bus'
+
+// 事件常量
 import {
   SHOW_INPUT_BOX,
   SHOW_INPUT_BOX_RESPONSE,
   SHOW_UPLOAD_PAGE_MENU,
   GET_PICBEDS
 } from '~/universal/events/constants'
+
+// 工具函数
 import {
   isUrl
 } from '~/universal/utils/common'
+
+// Element Plus 消息提示
 import { ElMessage as $message } from 'element-plus'
+
+// 数据发送工具函数
 import { getConfig, saveConfig, sendToMain } from '@/utils/dataSender'
+
+// 类型声明
 import { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
+
+// Vue Router 相关
 import { useRouter } from 'vue-router'
+
+// 路由配置常量
 import { PICBEDS_PAGE } from '@/router/config'
+
 const $router = useRouter()
 
 const imageProcessDialogVisible = ref(false)

src/renderer/pages/UploaderConfigPage.vue

@@ -92,15 +92,33 @@
   </div>
 </template>
 <script lang="ts" setup>
+// Element Plus 图标
 import { Edit, Delete, Plus } from '@element-plus/icons-vue'
+
+// 数据发送工具函数
 import { saveConfig, triggerRPC } from '@/utils/dataSender'
+
+// 时间处理库
 import dayjs from 'dayjs'
+
+// 枚举类型声明
 import { IRPCActionType } from '~/universal/types/enum'
+
+// 国际化函数
 import { T as $T } from '@/i18n/index'
+
+// Vue Router 相关
 import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
+
+// Vue 生命周期钩子
 import { onBeforeMount, ref } from 'vue'
+
+// 路由配置常量
 import { PICBEDS_PAGE, UPLOADER_CONFIG_PAGE } from '@/router/config'
+
+// 状态管理
 import { useStore } from '@/hooks/useStore'
+
 const $router = useRouter()
 const $route = useRoute()
 

src/renderer/pages/picbeds/index.vue

@@ -85,20 +85,40 @@
   </div>
 </template>
 <script lang="ts" setup>
+// 枚举类型声明
 import { IRPCActionType } from '~/universal/types/enum'
+
+// Vue 相关
 import { ref, onBeforeUnmount, onBeforeMount } from 'vue'
+
+// 国际化函数
 import { T as $T } from '@/i18n/index'
+
+// 数据发送工具函数
 import { sendToMain, triggerRPC } from '@/utils/dataSender'
+
+// Vue Router 相关
 import { useRoute, useRouter } from 'vue-router'
+
+// 组件
 import ConfigForm from '@/components/ConfigForm.vue'
-// import mixin from '@/utils/ConfirmButtonMixin'
+
+// Electron 相关
 import {
   ipcRenderer,
   IpcRendererEvent
 } from 'electron'
+
+// 事件常量
 import { OPEN_URL } from '~/universal/events/constants'
+
+// Element Plus 图标
 import { Link } from '@element-plus/icons-vue'
+
+// 时间处理库
 import dayjs from 'dayjs'
+
+// Element Plus 下拉菜单组件
 import { ElDropdown } from 'element-plus'
 
 const type = ref('')

src/renderer/router/config.ts

@@ -1,17 +1,17 @@
 export const GALLERY_PAGE = 'GalleryPage'
-export const TRAY_PAGE = 'TrayPage'
-export const RENAME_PAGE = 'RenamePage'
-export const MINI_PAGE = 'MiniPage'
-export const MAIN_PAGE = 'MainPage'
-export const UPLOAD_PAGE = 'UploadPage'
-export const PICBEDS_PAGE = 'PicbedsPage'
-export const SETTING_PAGE = 'SettingPage'
-export const PLUGIN_PAGE = 'PluginPage'
-export const SHORTKEY_PAGE = 'ShortkeyPage'
-export const UPLOADER_CONFIG_PAGE = 'UploaderConfigPage'
-export const MANAGE_MAIN_PAGE = 'ManageMainPage'
-export const MANAGE_LOGIN_PAGE = 'ManageLoginPage'
-export const MANAGE_SETTING_PAGE = 'ManageSettingPage'
-export const MANAGE_EMPTY_PAGE = 'ManageEmptyPage'
 export const MANAGE_BUCKET_PAGE = 'ManageBucketPage'
+export const MANAGE_EMPTY_PAGE = 'ManageEmptyPage'
+export const MANAGE_LOGIN_PAGE = 'ManageLoginPage'
+export const MANAGE_MAIN_PAGE = 'ManageMainPage'
+export const MANAGE_SETTING_PAGE = 'ManageSettingPage'
+export const MAIN_PAGE = 'MainPage'
+export const MINI_PAGE = 'MiniPage'
+export const PICBEDS_PAGE = 'PicbedsPage'
+export const PLUGIN_PAGE = 'PluginPage'
+export const RENAME_PAGE = 'RenamePage'
+export const SETTING_PAGE = 'SettingPage'
+export const SHORTKEY_PAGE = 'ShortkeyPage'
 export const TOOLBOX_CONFIG_PAGE = 'ToolBoxPage'
+export const TRAY_PAGE = 'TrayPage'
+export const UPLOAD_PAGE = 'UploadPage'
+export const UPLOADER_CONFIG_PAGE = 'UploaderConfigPage'

src/renderer/utils/dataSender.ts

@@ -1,7 +1,16 @@
+// Electron 相关
 import { ipcRenderer, IpcRendererEvent } from 'electron'
+
+// 事件常量
 import { PICGO_SAVE_CONFIG, PICGO_GET_CONFIG, RPC_ACTIONS } from '#/events/constants'
+
+// UUID
 import { v4 as uuid } from 'uuid'
+
+// 枚举类型声明
 import { IRPCActionType } from '~/universal/types/enum'
+
+// 公共工具函数
 import { getRawData } from './common'
 
 export function saveConfig (config: IObj | string, value?: any) {

src/renderer/utils/db.ts

@@ -1,6 +1,13 @@
+// Picgo Store 相关类型
 import { IObject, IResult, IGetResult, IFilter } from '@picgo/store/dist/types'
+
+// Electron 相关
 import { ipcRenderer, IpcRendererEvent } from 'electron'
+
+// UUID
 import { v4 as uuid } from 'uuid'
+
+// 数据库操作常量
 import {
   PICGO_GET_DB,
   PICGO_INSERT_DB,
@@ -9,8 +16,13 @@ import {
   PICGO_GET_BY_ID_DB,
   PICGO_REMOVE_BY_ID_DB
 } from '#/events/constants'
+
+// 数据库类型声明
 import { IGalleryDB } from '#/types/extra-vue'
+
+// 公共工具函数
 import { getRawData } from './common'
+
 export class GalleryDB implements IGalleryDB {
   async get<T> (filter?: IFilter): Promise<IGetResult<T>> {
     const res = await this.msgHandler<IGetResult<T>>(PICGO_GET_DB, filter)

src/renderer/utils/mainMixin.ts

@@ -1,7 +1,15 @@
+// Vue 组件选项
 import { ComponentOptions } from 'vue'
+
+// 事件常量
 import { FORCE_UPDATE, GET_PICBEDS } from '~/universal/events/constants'
+
+// 事件总线
 import bus from '~/renderer/utils/bus'
+
+// Electron 相关
 import { ipcRenderer } from 'electron'
+
 export const mainMixin: ComponentOptions = {
   inject: ['forceUpdateTime'],
 

src/renderer/utils/mixin.ts

@@ -1,4 +1,5 @@
 import { ComponentOptions } from 'vue'
+
 export const dragMixin: ComponentOptions = {
   mounted () {
     this.disableDragEvent()