tcjlj/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2025-01-23 06:38:13 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

🔨 Refactor(custom): refactored for new version of element

Browse Source
This commit is contained in:
Kuingsmile 2024-06-06 16:23:25 +08:00
parent 9a23d5fb99
commit 66cd522d96
20 changed files with 108 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/main.ts
View File

@ -14,9 +14,6 @@ import VueVideoPlayer from '@videojs-player/vue'
// Electron 相关
import { webFrame } from 'electron'
// Axios
import axios from 'axios'
// Mixins
import { mainMixin } from './renderer/utils/mainMixin'
import { dragMixin } from '@/utils/mixin'
@ -25,7 +22,7 @@ import { dragMixin } from '@/utils/mixin'
import db from './renderer/utils/db'
// 国际化
import { i18nManager, T } from './renderer/i18n/index'
import { T } from './renderer/i18n/index'
// 工具函数
import { getConfig, saveConfig, sendToMain, triggerRPC } from '@/utils/dataSender'
@ -45,27 +42,8 @@ webFrame.setVisualZoomLevelLimits(1, 1)
const app = createApp(App)
app.config.globalProperties.$builtInPicBed = [
'smms',
'imgur',
'qiniu',
'tcyun',
'upyun',
'aliyun',
'github',
'webdavplist',
'local',
'sftpplist',
'telegraphplist',
'piclist',
'lskyplist',
'aws-s3-plist'
]
app.config.globalProperties.$$db = db
app.config.globalProperties.$http = axios
app.config.globalProperties.$T = T
app.config.globalProperties.$i18n = i18nManager
app.config.globalProperties.getConfig = getConfig
app.config.globalProperties.triggerRPC = triggerRPC
app.config.globalProperties.saveConfig = saveConfig

9
src/renderer/App.vue
View File

@ -5,19 +5,10 @@
</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'
import { useATagClick } from './hooks/useATagClick'

6
src/renderer/components/ConfigForm.vue
View File

@ -46,7 +46,7 @@
/>
</template>
<el-icon class="ml-[4px] cursor-pointer hover:text-blue">
<QuestionFilled />
<InfoFilled />
</el-icon>
</el-tooltip>
</template>
@ -105,8 +105,7 @@ import { cloneDeep, union } from 'lodash'
import { getConfig } from '@/utils/dataSender'
import { useRoute } from 'vue-router'
import type { FormInstance } from 'element-plus'
import { T as $T } from '@/i18n'
import { QuestionFilled } from '@element-plus/icons-vue'
import { InfoFilled } from '@element-plus/icons-vue'
import { marked } from 'marked'
interface IProps {
@ -141,7 +140,6 @@ async function validate (): Promise<IStringKeyMap | false> {
resolve(ruleForm)
} else {
resolve(false)
return false
}
})
})

1
src/renderer/components/ConfigFormForPlugin.vue
View File

@ -114,7 +114,6 @@ async function validate (): Promise<IStringKeyMap | false> {
resolve(ruleForm)
} else {
resolve(false)
return false
}
})
})

22
src/renderer/components/ImageLocal.vue
View File

@ -30,22 +30,14 @@ import mime from 'mime-types'
import path from 'path'
const base64Image = ref('')
const props = defineProps(
{
isShowThumbnail: {
type: Boolean,
required: true
},
item: {
type: Object,
required: true
},
localPath: {
type: String,
required: true
}
const props = defineProps<{
isShowThumbnail: boolean
item: {
isImage: boolean
fileName: string
}
)
localPath: string
}>()
const createBase64Image = async () => {
const filePath = path.normalize(props.localPath)

32
src/renderer/components/ImageWebdav.vue
View File

@ -29,26 +29,16 @@ import { formatEndpoint } from '~/main/manage/utils/common'
const base64Url = ref('')
const success = ref(false)
const props = defineProps(
{
isShowThumbnail: {
type: Boolean,
required: true
},
item: {
type: Object,
required: true
},
url: {
type: String,
required: true
},
config: {
type: Object,
required: true
}
const props = defineProps<{
item: {
key: string
isImage: boolean
fileName: string | null | undefined
}
)
url: string
config: any
isShowThumbnail: boolean
}>()
const imageSource = computed(() => {
return (props.isShowThumbnail && props.item.isImage && success.value)
@ -58,7 +48,7 @@ const imageSource = computed(() => {
const iconPath = computed(() => require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`))
async function getheaderOfWebdav (key: string) {
async function getWebdavHeader (key: string) {
let headers = {} as any
if (props.config.authType === 'digest') {
const authHeader = await getAuthHeader(
@ -81,7 +71,7 @@ async function getheaderOfWebdav (key: string) {
const fetchImage = async () => {
try {
const headers = await getheaderOfWebdav(props.item.key)
const headers = await getWebdavHeader(props.item.key)
const res = await fetch(props.url, { method: 'GET', headers })
if (res.status >= 200 && res.status < 300) {
const blob = await res.blob()

4
src/renderer/components/ImageWebdavTsx.tsx
View File

@ -36,7 +36,7 @@ export default defineComponent({
})
const iconPath = computed(() => require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`))
async function getheaderOfWebdav (key: string) {
async function getWebdavHeader (key: string) {
let headers = {} as any
if (props.config.authType === 'digest') {
const authHeader = await getAuthHeader(
@ -59,7 +59,7 @@ export default defineComponent({
const fetchImage = async () => {
try {
const headers = await getheaderOfWebdav(props.item.key)
const headers = await getWebdavHeader(props.item.key)
const res = await fetch(props.url, { method: 'GET', headers })
if (res.status >= 200 && res.status < 300) {
const blob = await res.blob()

3
src/renderer/components/ToolboxHandler.vue
View File

@ -1,7 +1,8 @@
<template>
<div class="toolbox-handler">
<ElButton
type="text"
type="primary"
:link="true"
@click="() => props.handler(value)"
>
{{ props.handlerText }}

66
src/renderer/components/settings/CheckboxFormItem.vue
View File

@ -1,66 +0,0 @@
<template>
<el-form-item>
<template #label>
<el-row align="middle">
{{ props.settingText }}
<template v-if="props.tooltips">
<el-tooltip
class="item"
effect="dark"
:content="props.tooltips"
placement="right"
:persistent="false"
teleported
>
<el-icon style="margin-left: 4px">
<QuestionFilled />
</el-icon>
</el-tooltip>
</template>
</el-row>
</template>
<el-switch
v-model="value"
:active-text="$T('SETTINGS_OPEN')"
:inactive-text="$T('SETTINGS_CLOSE')"
@change="handleChange"
/>
</el-form-item>
</template>
<script lang="ts" setup>
import { T as $T } from '@/i18n'
import { saveConfig } from '@/utils/dataSender'
import { ref, watch } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue'
interface IProps {
tooltips?: string
settingProps: string
settingText: string
defaultValue: boolean
}
const props = defineProps<IProps>()
// to fix v-model blank bug
watch(() => props.defaultValue, (v) => {
value.value = v
})
const value = ref<boolean>(props.defaultValue)
const emit = defineEmits(['change'])
const handleChange = (val: ICheckBoxValueType) => {
saveConfig(props.settingProps, val)
emit('change', val)
}
</script>
<script lang="ts">
export default {
name: 'CheckboxFormItem'
}
</script>
<style lang='stylus'>
</style>

6
src/renderer/i18n/index.ts
View File

@ -10,14 +10,14 @@ export class I18nManager {
#getLanguageList () {
ipcRenderer.send(GET_LANGUAGE_LIST)
ipcRenderer.once(GET_LANGUAGE_LIST, (event, list: II18nItem[]) => {
ipcRenderer.once(GET_LANGUAGE_LIST, (_, list: II18nItem[]) => {
this.#i18nFileList = list
})
}
#getCurrentLanguage () {
ipcRenderer.send(GET_CURRENT_LANGUAGE)
ipcRenderer.once(GET_CURRENT_LANGUAGE, (event, lang: string, locales: ILocales) => {
ipcRenderer.once(GET_CURRENT_LANGUAGE, (_, lang: string, locales: ILocales) => {
this.#setLocales(lang, locales)
bus.emit(FORCE_UPDATE)
})
@ -36,7 +36,7 @@ export class I18nManager {
constructor () {
this.#getCurrentLanguage()
this.#getLanguageList()
ipcRenderer.on(SET_CURRENT_LANGUAGE, (event, lang: string, locales: ILocales) => {
ipcRenderer.on(SET_CURRENT_LANGUAGE, (_, lang: string, locales: ILocales) => {
this.#setLocales(lang, locales)
bus.emit(FORCE_UPDATE)
})

4
src/renderer/manage/components/DynamicSwitch.vue
View File

@ -35,12 +35,12 @@
import { InfoFilled } from '@element-plus/icons-vue'
defineProps<{
tooltip: string,
tooltip?: string,
activeText?: string,
inactiveText?: string,
segments?: { text: string, style: string }[],
}>()
const value = defineModel()
const value = defineModel<boolean>()
</script>

38
src/renderer/manage/pages/bucketPage.vue
View File

@ -50,7 +50,10 @@
style="display: flex;"
@click="showUploadDialog"
>
<el-button type="text">
<el-button
type="primary"
:link="true"
>
<el-tooltip
class="item"
effect="dark"
@ -70,7 +73,8 @@
</div>
<div>
<el-button
type="text"
type="primary"
:link="true"
@click="showUrlDialog"
>
<el-tooltip
@ -95,7 +99,8 @@
v-if="isShowCreateNewFolder"
>
<el-button
type="text"
type="primary"
:link="true"
@click="handleCreateFolder"
>
<el-tooltip
@ -119,7 +124,10 @@
<div
@click="showDownloadDialog"
>
<el-button type="text">
<el-button
type="primary"
:link="true"
>
<el-tooltip
class="item"
effect="dark"
@ -142,7 +150,10 @@
v-if="isShowRenameFileIcon"
@click="handleBatchRenameFile"
>
<el-button type="text">
<el-button
type="primary"
:link="true"
>
<el-tooltip
class="item"
effect="dark"
@ -162,7 +173,10 @@
</el-button>
</div>
<div>
<el-button type="text">
<el-button
type="primary"
:link="true"
>
<el-tooltip
class="item"
effect="dark"
@ -177,7 +191,7 @@
<el-icon
class="icon"
size="25px"
:color="selectedItems.length > 0 ? 'red' : 'gray'"
:color="selectedItems.length > 0 ? '#409EFF' : 'gray'"
style="margin-left: 10px;"
@click="handleBatchCopyLink(manageStore.config.settings.pasteFormat)"
>
@ -207,7 +221,10 @@
</el-button>
</div>
<div>
<el-button type="text">
<el-button
type="primary"
:link="true"
>
<el-tooltip
class="item"
effect="dark"
@ -219,7 +236,7 @@
<el-icon
class="icon"
size="25px"
:color="selectedItems.length > 0 ? 'red' : 'gray'"
:color="selectedItems.length > 0 ? '#409EFF' : 'gray'"
style="margin-left: 10px;"
@click="handleBatchCopyInfo"
>
@ -230,7 +247,8 @@
</div>
<div>
<el-button
type="text"
type="primary"
:link="true"
@click="forceRefreshFileList"
>
<el-tooltip

2
src/renderer/manage/pages/manageSetting.vue
View File

@ -186,7 +186,7 @@
<el-radio
v-for="item in pasteFormatList"
:key="item"
:label="item"
:value="item"
>
{{ $T(`MANAGE_SETTING_CHOOSE_COPY_FORMAT_${item.toUpperCase().replace(/-/g, '_')}` as any) }}
</el-radio>

3
src/renderer/pages/Gallery.vue
View File

@ -24,7 +24,8 @@
@change="handleDeleteCloudFile"
/>
<el-button
type="text"
type="primary"
:link="true"
@click="refreshPage"
>
<el-tooltip

11
src/renderer/pages/PicGoSetting.vue
View File

@ -556,7 +556,7 @@
teleported
>
<el-icon style="margin-left: 4px">
<QuestionFilled />
<InfoFilled />
</el-icon>
</el-tooltip>
</el-row>
@ -590,6 +590,7 @@
v-for="item in picBed"
:key="item.name"
:label="item.name"
:value="item.name"
/>
</el-checkbox-group>
</el-form-item>
@ -1480,10 +1481,10 @@
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')"
>
<el-radio-group v-model="waterMarkForm.watermarkType">
<el-radio label="text">
<el-radio value="text">
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
</el-radio>
<el-radio label="image">
<el-radio value="image">
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}
</el-radio>
</el-radio-group>
@ -1554,7 +1555,7 @@
<el-radio
v-for="item in waterMarkPositionMap"
:key="item[0]"
:label="item[0]"
:value="item[0]"
>
{{ item[1] }}
</el-radio>
@ -2230,8 +2231,6 @@ function confirmCustomLink () {
saveConfig(configPaths.settings.customLink, customLink.value)
customLinkVisible.value = false
sendToMain('updateCustomLink')
} else {
return false
}
})
}

1
src/renderer/pages/Plugin.vue
View File

@ -534,7 +534,6 @@ async function handleConfirmConfig () {
}
function _getSearchResult (val: string) {
// this.$http.get(`https://api.npms.io/v2/search?q=${val}`)
axios.get(`https://registry.npmjs.com/-/v1/search?text=${val}`)
.then((res: INPMSearchResult) => {
pluginList.value = res.data.objects

6
src/renderer/pages/ShortKey.vue
View File

@ -58,7 +58,8 @@
:class="{
disabled: scope.row.enable
}"
type="text"
type="info"
:link="true"
@click="toggleEnable(scope.row)"
>
{{ scope.row.enable ? $T('SHORTCUT_DISABLE') : $T('SHORTCUT_ENABLE') }}
@ -66,7 +67,8 @@
<el-button
class="edit"
size="small"
type="text"
type="info"
:link="true"
@click="openKeyBindingDialog(scope.row, scope.$index)"
>
{{ $T('SHORTCUT_EDIT') }}

99
src/renderer/pages/Upload.vue
View File

@ -82,27 +82,13 @@
@change="handlePasteStyleChange"
>
<el-radio-button
label="markdown"
title="![alt](url)"
v-for="(item, key) in pasteFormatList"
:key="key"
:value="key"
:title="item"
>
Markdown
{{ key }}
</el-radio-button>
<el-radio-button
label="HTML"
title="<img src='url'/>"
/>
<el-radio-button
label="URL"
title="http://test.com/test.png"
/>
<el-radio-button
label="UBB"
title="[img]url[/img]"
/>
<el-radio-button
label="Custom"
:title="customLink"
/>
</el-radio-group>
<el-radio-group
v-model="useShortUrl"
@ -110,13 +96,13 @@
@change="handleUseShortUrlChange"
>
<el-radio-button
:label="true"
:value="true"
style="border-radius: 5px"
>
{{ $T('UPLOAD_SHORT_URL') }}
</el-radio-button>
<el-radio-button
:label="false"
:value="false"
style="border-radius: 5px"
>
{{ $T('UPLOAD_NORMAL_URL') }}
@ -180,10 +166,10 @@
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')"
>
<el-radio-group v-model="waterMarkForm.watermarkType">
<el-radio label="text">
<el-radio value="text">
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
</el-radio>
<el-radio label="image">
<el-radio value="image">
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}
</el-radio>
</el-radio-group>
@ -254,7 +240,7 @@
<el-radio
v-for="item in waterMarkPositionMap"
:key="item[0]"
:label="item[0]"
:value="item[0]"
>
{{ item[1] }}
</el-radio>
@ -473,6 +459,22 @@ const $router = useRouter()
const imageProcessDialogVisible = ref(false)
const useShortUrl = ref(false)
const dragover = ref(false)
const progress = ref(0)
const showProgress = ref(false)
const showError = ref(false)
const pasteStyle = ref('')
const picBed = ref<IPicBedType[]>([])
const picBedName = ref('')
const picBedConfigName = ref('')
const pasteFormatList = ref({
[IPasteStyle.MARKDOWN]: '![alt](url)',
[IPasteStyle.HTML]: '<img src="url"/>',
[IPasteStyle.URL]: 'http://test.com/test.png',
[IPasteStyle.UBB]: '[img]url[/img]',
[IPasteStyle.CUSTOM]: ''
})
const waterMarkPositionMap = new Map([
['north', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP')],
@ -519,6 +521,8 @@ const compressForm = reactive<any>({
isFlip: false,
isFlop: false
})
const waterMarkFormKeys = Object.keys(waterMarkForm)
const compressFormKeys = Object.keys(compressForm)
const formatConvertObj = ref('{}')
@ -548,20 +552,9 @@ async function initData () {
const compress = await getConfig<IBuildInCompressOptions>(configPaths.buildIn.compress)
const watermark = await getConfig<IBuildInWaterMarkOptions>(configPaths.buildIn.watermark)
if (compress) {
compressForm.quality = compress.quality ?? 100
compressForm.isConvert = compress.isConvert ?? false
compressForm.convertFormat = compress.convertFormat ?? 'jpg'
compressForm.isReSize = compress.isReSize ?? false
compressForm.reSizeWidth = compress.reSizeWidth ?? 500
compressForm.reSizeHeight = compress.reSizeHeight ?? 500
compressForm.skipReSizeOfSmallImg = compress.skipReSizeOfSmallImg ?? false
compressForm.isReSizeByPercent = compress.isReSizeByPercent ?? false
compressForm.reSizePercent = compress.reSizePercent ?? 50
compressForm.isRotate = compress.isRotate ?? false
compressForm.rotateDegree = compress.rotateDegree ?? 0
compressForm.isRemoveExif = compress.isRemoveExif ?? false
compressForm.isFlip = compress.isFlip ?? false
compressForm.isFlop = compress.isFlop ?? false
compressFormKeys.forEach((key) => {
compressForm[key] = compress[key] ?? compressForm[key]
})
try {
if (typeof compress.formatConvertObj === 'object') {
formatConvertObj.value = JSON.stringify(compress.formatConvertObj)
@ -573,29 +566,13 @@ async function initData () {
}
}
if (watermark) {
waterMarkForm.isAddWatermark = watermark.isAddWatermark ?? false
waterMarkForm.watermarkType = watermark.watermarkType ?? 'text'
waterMarkForm.isFullScreenWatermark = watermark.isFullScreenWatermark ?? false
waterMarkForm.watermarkDegree = watermark.watermarkDegree ?? 0
waterMarkForm.watermarkText = watermark.watermarkText ?? ''
waterMarkForm.watermarkFontPath = watermark.watermarkFontPath ?? ''
waterMarkForm.watermarkScaleRatio = watermark.watermarkScaleRatio ?? 0.15
waterMarkForm.watermarkColor = watermark.watermarkColor === undefined || watermark.watermarkColor === '' ? '#CCCCCC73' : watermark.watermarkColor
waterMarkForm.watermarkImagePath = watermark.watermarkImagePath ?? ''
waterMarkForm.watermarkPosition = watermark.watermarkPosition ?? 'southeast'
waterMarkFormKeys.forEach((key) => {
waterMarkForm[key] = watermark[key as keyof IBuildInWaterMarkOptions] ?? waterMarkForm[key]
})
waterMarkForm.watermarkColor = watermark.watermarkColor === '' ? '#CCCCCC73' : watermark.watermarkColor
}
}
const dragover = ref(false)
const progress = ref(0)
const showProgress = ref(false)
const showError = ref(false)
const pasteStyle = ref('')
const picBed = ref<IPicBedType[]>([])
const picBedName = ref('')
const customLink = ref('')
const picBedConfigName = ref('')
onBeforeMount(() => {
ipcRenderer.on('uploadProgress', (_event: IpcRendererEvent, _progress: number) => {
if (_progress !== -1) {
@ -723,7 +700,7 @@ function ipcSendFiles (files: FileList) {
async function getPasteStyle () {
pasteStyle.value = await getConfig(configPaths.settings.pasteStyle) || IPasteStyle.MARKDOWN
customLink.value = await getConfig(configPaths.settings.customLink) || '![$fileName]($url)'
pasteFormatList.value.Custom = await getConfig(configPaths.settings.customLink) || '![$fileName]($url)'
}
async function getUseShortUrl () {
@ -736,9 +713,9 @@ async function handleUseShortUrlChange () {
})
}
function handlePasteStyleChange (val: string | number | boolean) {
function handlePasteStyleChange (val: string | number | boolean | undefined) {
saveConfig({
[configPaths.settings.pasteStyle]: val
[configPaths.settings.pasteStyle]: val || IPasteStyle.MARKDOWN
})
}

7
src/renderer/utils/mainMixin.ts
View File

@ -1,13 +1,6 @@
// 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 = {

3
src/universal/types/extra-vue.d.ts vendored
View File

@ -17,11 +17,8 @@ declare module 'vue/types/vue' {
declare module 'vue' {
interface ComponentCustomProperties {
$http: typeof axios
$builtInPicBed: string[]
$$db: IGalleryDB
$T: typeof import('~/renderer/i18n/index').T
$i18n: import('~/renderer/i18n/index').I18nManager
saveConfig(data: IObj | string, value?: any): void
getConfig<T>(key?: string): Promise<T | undefined>
setDefaultPicBed(picBed: string): void