GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-05-22 16:50:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Style(custom): format with prettier

Browse Source
This commit is contained in:
Kuingsmile
2024-06-15 19:37:50 +08:00
parent 096f564c31
commit 5af8a6b529
157 changed files with 21365 additions and 22952 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,25 +1,8 @@
<template>
<div
id="config-form"
:class="props.colorMode === 'white' ? 'white' : ''"
>
<el-form
ref="$form"
label-position="left"
label-width="50%"
:model="ruleForm"
size="small"
>
<el-form-item
:label="$T('UPLOADER_CONFIG_NAME')"
required
prop="_configName"
>
<el-input
v-model="ruleForm._configName"
type="input"
:placeholder="$T('UPLOADER_CONFIG_PLACEHOLDER')"
/>
<div id="config-form" :class="props.colorMode === 'white' ? 'white' : ''">
<el-form ref="$form" label-position="left" label-width="50%" :model="ruleForm" size="small">
<el-form-item :label="$T('UPLOADER_CONFIG_NAME')" required prop="_configName">
<el-input v-model="ruleForm._configName" type="input" :placeholder="$T('UPLOADER_CONFIG_PLACEHOLDER')" />
</el-form-item>
<!-- dynamic config -->
<el-form-item
@@ -32,18 +15,9 @@
<el-row align="middle">
{{ item.alias || item.name }}
<template v-if="item.tips">
<el-tooltip
class="item"
effect="dark"
placement="right"
:persistent="false"
teleported
>
<el-tooltip class="item" effect="dark" placement="right" :persistent="false" teleported>
<template #content>
<span
class="config-form-common-tips"
v-html="transformMarkdownToHTML(item.tips)"
/>
<span class="config-form-common-tips" v-html="transformMarkdownToHTML(item.tips)" />
</template>
<el-icon class="ml-[4px] cursor-pointer hover:text-blue">
<InfoFilled />
@@ -124,19 +98,23 @@ const $form = ref<FormInstance>()
const configList = ref<IPicGoPluginConfig[]>([])
const ruleForm = reactive<IStringKeyMap>({})
watch(toRefs(props.config), (val: IPicGoPluginConfig[]) => {
handleConfigChange(val)
}, {
deep: true,
immediate: true
})
watch(
toRefs(props.config),
(val: IPicGoPluginConfig[]) => {
handleConfigChange(val)
},
{
deep: true,
immediate: true
}
)
function handleConfigChange (val: any) {
function handleConfigChange(val: any) {
handleConfig(val)
}
async function validate (): Promise<IStringKeyMap | false> {
return new Promise((resolve) => {
async function validate(): Promise<IStringKeyMap | false> {
return new Promise(resolve => {
$form.value?.validate((valid: boolean) => {
if (valid) {
resolve(ruleForm)
@@ -147,7 +125,7 @@ async function validate (): Promise<IStringKeyMap | false> {
})
}
function transformMarkdownToHTML (markdown: string) {
function transformMarkdownToHTML(markdown: string) {
try {
return marked.parse(markdown)
} catch (e) {
@@ -155,7 +133,7 @@ function transformMarkdownToHTML (markdown: string) {
}
}
function getConfigType () {
function getConfigType() {
switch (props.type) {
case 'plugin': {
return props.id
@@ -171,22 +149,21 @@ function getConfigType () {
}
}
async function handleConfig (val: IPicGoPluginConfig[]) {
async function handleConfig(val: IPicGoPluginConfig[]) {
const config = await getCurConfigFormData()
const configId = $route.params.configId
Object.assign(ruleForm, config)
if (val.length > 0) {
configList.value = cloneDeep(val).map((item) => {
configList.value = cloneDeep(val).map(item => {
if (!configId) return item
let defaultValue = item.default !== undefined
? item.default
: item.type === 'checkbox'
? []
: null
let defaultValue = item.default !== undefined ? item.default : item.type === 'checkbox' ? [] : null
if (item.type === 'checkbox') {
const defaults = item.choices?.filter((i: any) => {
return i.checked
}).map((i: any) => i.value) || []
const defaults =
item.choices
?.filter((i: any) => {
return i.checked
})
.map((i: any) => i.value) || []
defaultValue = union(defaultValue, defaults)
}
if (config && config[item.name] !== undefined) {
@@ -198,13 +175,13 @@ async function handleConfig (val: IPicGoPluginConfig[]) {
}
}
async function getCurConfigFormData () {
async function getCurConfigFormData() {
const configId = $route.params.configId
const curTypeConfigList = await getConfig<IStringKeyMap[]>(`uploader.${props.id}.configList`) || []
const curTypeConfigList = (await getConfig<IStringKeyMap[]>(`uploader.${props.id}.configList`)) || []
return curTypeConfigList.find(i => i._id === configId) || {}
}
function updateRuleForm (key: string, value: any) {
function updateRuleForm(key: string, value: any) {
try {
ruleForm[key] = value
} catch (e) {
@@ -218,7 +195,7 @@ defineExpose({
getConfigType
})
</script>
<style lang='stylus'>
<style lang="stylus">
.config-form-common-tips
a
color #409EFF

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

@@ -1,25 +1,8 @@
<template>
<div
id="config-form"
:class="props.colorMode === 'white' ? 'white' : ''"
>
<el-form
ref="$form"
label-position="left"
label-width="50%"
:model="ruleForm"
size="small"
>
<el-form-item
:label="$T('UPLOADER_CONFIG_NAME')"
required
prop="_configName"
>
<el-input
v-model="ruleForm._configName"
type="input"
:placeholder="$T('UPLOADER_CONFIG_PLACEHOLDER')"
/>
<div id="config-form" :class="props.colorMode === 'white' ? 'white' : ''">
<el-form ref="$form" label-position="left" label-width="50%" :model="ruleForm" size="small">
<el-form-item :label="$T('UPLOADER_CONFIG_NAME')" required prop="_configName">
<el-input v-model="ruleForm._configName" type="input" :placeholder="$T('UPLOADER_CONFIG_PLACEHOLDER')" />
</el-form-item>
<!-- dynamic config -->
<el-form-item
@@ -98,19 +81,23 @@ const $form = ref<FormInstance>()
const configList = ref<IPicGoPluginConfig[]>([])
const ruleForm = reactive<IStringKeyMap>({})
watch(() => props.config, (val: IPicGoPluginConfig[]) => {
handleConfigChange(val)
}, {
deep: true,
immediate: true
})
watch(
() => props.config,
(val: IPicGoPluginConfig[]) => {
handleConfigChange(val)
},
{
deep: true,
immediate: true
}
)
function handleConfigChange (val: any) {
function handleConfigChange(val: any) {
handleConfig(val)
}
async function validate (): Promise<IStringKeyMap | false> {
return new Promise((resolve) => {
async function validate(): Promise<IStringKeyMap | false> {
return new Promise(resolve => {
$form.value?.validate((valid: boolean) => {
if (valid) {
resolve(ruleForm)
@@ -121,7 +108,7 @@ async function validate (): Promise<IStringKeyMap | false> {
})
}
function getConfigType () {
function getConfigType() {
switch (props.type) {
case 'plugin': {
return props.id
@@ -137,20 +124,19 @@ function getConfigType () {
}
}
async function handleConfig (val: IPicGoPluginConfig[]) {
async function handleConfig(val: IPicGoPluginConfig[]) {
const config = await getCurConfigFormData()
Object.assign(ruleForm, config)
if (val.length > 0) {
configList.value = cloneDeep(val).map((item) => {
let defaultValue = item.default !== undefined
? item.default
: item.type === 'checkbox'
? []
: null
configList.value = cloneDeep(val).map(item => {
let defaultValue = item.default !== undefined ? item.default : item.type === 'checkbox' ? [] : null
if (item.type === 'checkbox') {
const defaults = item.choices?.filter((i: any) => {
return i.checked
}).map((i: any) => i.value) || []
const defaults =
item.choices
?.filter((i: any) => {
return i.checked
})
.map((i: any) => i.value) || []
defaultValue = union(defaultValue, defaults)
}
if (config && config[item.name] !== undefined) {
@@ -162,11 +148,11 @@ async function handleConfig (val: IPicGoPluginConfig[]) {
}
}
async function getCurConfigFormData () {
return await getConfig<IStringKeyMap>(`${props.id}`) || {}
async function getCurConfigFormData() {
return (await getConfig<IStringKeyMap>(`${props.id}`)) || {}
}
function updateRuleForm (key: string, value: any) {
function updateRuleForm(key: string, value: any) {
try {
ruleForm[key] = value
} catch (e) {
@@ -180,7 +166,7 @@ defineExpose({
getConfigType
})
</script>
<style lang='stylus'>
<style lang="stylus">
#config-form
.el-form
label

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

@@ -1,10 +1,12 @@
<template>
<el-image
:src="isShowThumbnail && item.isImage ?
base64Image
: require(`../manage/pages/assets/icons/${getFileIconPath(item.fileName ?? '')}`)"
:src="
isShowThumbnail && item.isImage
? base64Image
: require(`../manage/pages/assets/icons/${getFileIconPath(item.fileName ?? '')}`)
"
fit="contain"
style="height: 100px;width: 100%;margin: 0 auto;"
style="height: 100px; width: 100%; margin: 0 auto"
>
<template #placeholder>
<el-icon>
@@ -15,7 +17,7 @@
<el-image
:src="require(`../manage/pages/assets/icons/${getFileIconPath(item.fileName ?? '')}`)"
fit="contain"
style="height: 100px;width: 100%;margin: 0 auto;"
style="height: 100px; width: 100%; margin: 0 auto"
/>
</template>
</el-image>

259
src/renderer/components/ImageProcessSetting.vue
View File

@@ -6,18 +6,10 @@
size="default"
:model="waterMarkForm"
>
<el-form-item
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM')"
>
<el-switch
v-model="waterMarkForm.isAddWatermark"
:style="switchStyle"
/>
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM')">
<el-switch v-model="waterMarkForm.isAddWatermark" :style="switchStyle" />
</el-form-item>
<el-form-item
v-show="waterMarkForm.isAddWatermark"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')"
>
<el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')">
<el-radio-group v-model="waterMarkForm.watermarkType">
<el-radio value="text">
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
@@ -27,23 +19,11 @@
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-show="waterMarkForm.isAddWatermark"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')"
>
<el-switch
v-model="waterMarkForm.isFullScreenWatermark"
:style="switchStyle"
/>
<el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')">
<el-switch v-model="waterMarkForm.isFullScreenWatermark" :style="switchStyle" />
</el-form-item>
<el-form-item
v-show="waterMarkForm.isAddWatermark"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')"
>
<el-input-number
v-model="waterMarkForm.watermarkDegree"
:step="1"
/>
<el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')">
<el-input-number v-model="waterMarkForm.watermarkDegree" :step="1" />
</el-form-item>
<el-form-item
v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
@@ -57,25 +37,14 @@
>
<el-input v-model="waterMarkForm.watermarkFontPath" />
</el-form-item>
<el-form-item
v-show="waterMarkForm.isAddWatermark"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')"
>
<el-input-number
v-model="waterMarkForm.watermarkScaleRatio"
:min="0"
:max="1"
:step="0.01"
/>
<el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')">
<el-input-number v-model="waterMarkForm.watermarkScaleRatio" :min="0" :max="1" :step="0.01" />
</el-form-item>
<el-form-item
v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMCOLOR')"
>
<el-color-picker
v-model="waterMarkForm.watermarkColor"
show-alpha
/>
<el-color-picker v-model="waterMarkForm.watermarkColor" show-alpha />
</el-form-item>
<el-form-item
v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'image'"
@@ -83,175 +52,76 @@
>
<el-input v-model="waterMarkForm.watermarkImagePath" />
</el-form-item>
<el-form-item
v-show="waterMarkForm.isAddWatermark"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')"
>
<el-radio-group
v-model="waterMarkForm.watermarkPosition"
>
<el-radio
v-for="item in waterMarkPositionMap"
:key="item[0]"
:value="item[0]"
>
<el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')">
<el-radio-group v-model="waterMarkForm.watermarkPosition">
<el-radio v-for="item in waterMarkPositionMap" :key="item[0]" :value="item[0]">
{{ item[1] }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF')"
>
<el-switch
v-model="compressForm.isRemoveExif"
:style="switchStyle"
/>
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF')">
<el-switch v-model="compressForm.isRemoveExif" :style="switchStyle" />
</el-form-item>
<el-form-item
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY')"
>
<el-input-number
v-model="compressForm.quality"
:min="0"
:max="100"
:step="1"
/>
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY')">
<el-input-number v-model="compressForm.quality" :min="0" :max="100" :step="1" />
</el-form-item>
<el-form-item
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT')"
>
<el-switch
v-model="compressForm.isConvert"
:style="switchStyle"
/>
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT')">
<el-switch v-model="compressForm.isConvert" :style="switchStyle" />
</el-form-item>
<el-form-item
v-show="compressForm.isConvert"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT')"
>
<el-select
v-model="compressForm.convertFormat"
:persistent="false"
teleported
>
<el-option
v-for="item in availableFormat"
:key="item"
:label="item"
:value="item"
/>
<el-form-item v-show="compressForm.isConvert" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT')">
<el-select v-model="compressForm.convertFormat" :persistent="false" teleported>
<el-option v-for="item in availableFormat" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item
v-show="compressForm.isConvert"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')"
>
<el-form-item v-show="compressForm.isConvert" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')">
<el-input
v-model="formatConvertObj"
placeholder="{&quot;jpg&quot;: &quot;png&quot;, &quot;png&quot;: &quot;jpg&quot;}"
placeholder='{"jpg": "png", "png": "jpg"}'
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</el-form-item>
<el-form-item
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP')"
>
<el-switch
v-model="compressForm.isFlip"
:style="switchStyle"
/>
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP')">
<el-switch v-model="compressForm.isFlip" :style="switchStyle" />
</el-form-item>
<el-form-item
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP')"
>
<el-switch
v-model="compressForm.isFlop"
:style="switchStyle"
/>
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP')">
<el-switch v-model="compressForm.isFlop" :style="switchStyle" />
</el-form-item>
<el-form-item
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE')"
>
<el-switch
v-model="compressForm.isReSize"
:style="switchStyle"
/>
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE')">
<el-switch v-model="compressForm.isReSize" :style="switchStyle" />
</el-form-item>
<el-form-item
v-show="compressForm.isReSize"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEWIDTH')"
>
<el-input-number
v-model="compressForm.reSizeWidth"
:min="0"
/>
<el-form-item v-show="compressForm.isReSize" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEWIDTH')">
<el-input-number v-model="compressForm.reSizeWidth" :min="0" />
</el-form-item>
<el-form-item
v-show="compressForm.isReSize"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEHEIGHT')"
>
<el-input-number
v-model="compressForm.reSizeHeight"
:min="0"
/>
<el-form-item v-show="compressForm.isReSize" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEHEIGHT')">
<el-input-number v-model="compressForm.reSizeHeight" :min="0" />
</el-form-item>
<el-form-item
v-show="compressForm.isReSize && compressForm.reSizeHeight! > 0 && compressForm.reSizeWidth === 0"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_HEIGHT')"
>
<el-switch
v-model="compressForm.skipReSizeOfSmallImg"
:style="switchStyle"
/>
<el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
</el-form-item>
<el-form-item
v-show="compressForm.isReSize && compressForm.reSizeWidth! > 0 && compressForm.reSizeHeight === 0"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_WIDTH')"
>
<el-switch
v-model="compressForm.skipReSizeOfSmallImg"
:style="switchStyle"
/>
<el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
</el-form-item>
<el-form-item
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZEBYPERCENT')"
>
<el-switch
v-model="compressForm.isReSizeByPercent"
:style="switchStyle"
/>
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZEBYPERCENT')">
<el-switch v-model="compressForm.isReSizeByPercent" :style="switchStyle" />
</el-form-item>
<el-form-item
v-show="compressForm.isReSizeByPercent"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEPERCENT')"
>
<el-input-number
v-model="compressForm.reSizePercent"
:min="0"
/>
<el-form-item v-show="compressForm.isReSizeByPercent" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEPERCENT')">
<el-input-number v-model="compressForm.reSizePercent" :min="0" />
</el-form-item>
<el-form-item
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')"
>
<el-switch
v-model="compressForm.isRotate"
:style="switchStyle"
/>
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')">
<el-switch v-model="compressForm.isRotate" :style="switchStyle" />
</el-form-item>
<el-form-item
v-show="compressForm.isRotate"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ROTATEDEGREE')"
>
<el-input-number
v-model="compressForm.rotateDegree"
:step="1"
/>
<el-form-item v-show="compressForm.isRotate" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ROTATEDEGREE')">
<el-input-number v-model="compressForm.rotateDegree" :step="1" />
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="handleSaveConfig"
>
<el-button type="primary" @click="handleSaveConfig">
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CONFIRM') }}
</el-button>
<el-button @click="closeDialog">
@@ -283,7 +153,29 @@ const waterMarkPositionMap = new Map([
['centre', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_CENTER')]
])
const imageExtList = ['jpg', 'jpeg', 'png', 'webp', 'bmp', 'tiff', 'tif', 'svg', 'ico', 'avif', 'heif', 'heic']
const availableFormat = ['avif', 'dz', 'fits', 'gif', 'heif', 'input', 'jpeg', 'jpg', 'jp2', 'jxl', 'magick', 'openslide', 'pdf', 'png', 'ppm', 'raw', 'svg', 'tiff', 'tif', 'v', 'webp']
const availableFormat = [
'avif',
'dz',
'fits',
'gif',
'heif',
'input',
'jpeg',
'jpg',
'jp2',
'jxl',
'magick',
'openslide',
'pdf',
'png',
'ppm',
'raw',
'svg',
'tiff',
'tif',
'v',
'webp'
]
const waterMarkForm = reactive<IBuildInWaterMarkOptions>({
isAddWatermark: false,
@@ -320,12 +212,11 @@ const compressFormKeys = Object.keys(compressForm) as (keyof typeof compressForm
const switchStyle = '--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;'
function handleSaveConfig () {
function handleSaveConfig() {
let iformatConvertObj = {}
try {
iformatConvertObj = JSON.parse(formatConvertObj.value)
} catch (error) {
}
} catch (error) {}
const formatConvertObjEntries = Object.entries(iformatConvertObj)
const formatConvertObjEntriesFilter = formatConvertObjEntries.filter((item: any) => {
return imageExtList.includes(item[0]) && availableFormat.includes(item[1])
@@ -338,11 +229,11 @@ function handleSaveConfig () {
closeDialog()
}
async function initData () {
async function initData() {
const compress = await getConfig<any>(configPaths.buildIn.compress)
const watermark = await getConfig<any>(configPaths.buildIn.watermark)
if (compress) {
compressFormKeys.forEach((key) => {
compressFormKeys.forEach(key => {
compressForm[key] = compress[key] ?? compressForm[key]
})
try {
@@ -356,14 +247,14 @@ async function initData () {
}
}
if (watermark) {
waterMarkFormKeys.forEach((key) => {
waterMarkFormKeys.forEach(key => {
waterMarkForm[key] = watermark[key] ?? waterMarkForm[key]
})
waterMarkForm.watermarkColor = watermark.watermarkColor === '' ? '#CCCCCC73' : watermark.watermarkColor
}
}
function closeDialog () {
function closeDialog() {
imageProcessDialogVisible.value = false
}

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

@@ -1,20 +1,12 @@
<template>
<el-image
:src="imageSource"
fit="contain"
style="height: 100px;width: 100%;margin: 0 auto;"
>
<el-image :src="imageSource" fit="contain" style="height: 100px; width: 100%; margin: 0 auto">
<template #placeholder>
<el-icon>
<Loading />
</el-icon>
</template>
<template #error>
<el-image
:src="iconPath"
fit="contain"
style="height: 100px;width: 100%;margin: 0 auto;"
/>
<el-image :src="iconPath" fit="contain" style="height: 100px; width: 100%; margin: 0 auto" />
</template>
</el-image>
</template>
@@ -43,14 +35,14 @@ const props = defineProps<{
}>()
const imageSource = computed(() => {
return (props.isShowThumbnail && props.item.isImage && success.value)
return props.isShowThumbnail && props.item.isImage && success.value
? base64Url.value
: require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
})
const iconPath = computed(() => require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`))
async function getWebdavHeader (key: string) {
async function getWebdavHeader(key: string) {
let headers = {} as any
if (props.config.authType === 'digest') {
const authHeader = await getAuthHeader(
@@ -91,5 +83,4 @@ const fetchImage = async () => {
watch(() => [props.url, props.item], fetchImage, { deep: true })
onMounted(fetchImage)
</script>

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

@@ -27,18 +27,20 @@ export default defineComponent({
}
},
setup (props) {
setup(props) {
const base64Url = ref('')
const success = ref(false)
const imageSource = computed(() => {
return (props.isShowThumbnail && props.item.isImage && success.value)
return props.isShowThumbnail && props.item.isImage && success.value
? base64Url.value
: require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
})
const iconPath = computed(() => require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`))
const iconPath = computed(() =>
require(`../manage/pages/assets/icons/${getFileIconPath(props.item.fileName ?? '')}`)
)
async function getWebdavHeader (key: string) {
async function getWebdavHeader(key: string) {
let headers = {} as any
if (props.config.authType === 'digest') {
const authHeader = await getAuthHeader(
@@ -79,24 +81,14 @@ export default defineComponent({
onMounted(fetchImage)
return () => (
<ElImage
src={imageSource.value}
fit="contain"
style="height: 100px;width: 100%;margin: 0 auto;"
>
<ElImage src={imageSource.value} fit='contain' style='height: 100px;width: 100%;margin: 0 auto;'>
{{
placeholder: () => (
<ElIcon>
<Loading />
</ElIcon>
),
error: () => (
<ElImage
src={iconPath.value}
fit="contain"
style="height: 100px;width: 100%;margin: 0 auto;"
/>
)
error: () => <ElImage src={iconPath.value} fit='contain' style='height: 100px;width: 100%;margin: 0 auto;' />
}}
</ElImage>
)

33
src/renderer/components/InputBoxDialog.vue
View File

@@ -5,22 +5,12 @@
:modal-append-to-body="false"
append-to-body
>
<el-input
v-model="inputBoxValue"
:placeholder="inputBoxOptions.placeholder"
/>
<el-input v-model="inputBoxValue" :placeholder="inputBoxOptions.placeholder" />
<template #footer>
<el-button
round
@click="handleInputBoxCancel"
>
<el-button round @click="handleInputBoxCancel">
{{ $T('CANCEL') }}
</el-button>
<el-button
type="primary"
round
@click="handleInputBoxConfirm"
>
<el-button type="primary" round @click="handleInputBoxConfirm">
{{ $T('CONFIRM') }}
</el-button>
</template>
@@ -35,10 +25,7 @@ import { T as $T } from '@/i18n/index'
import $bus from '@/utils/bus'
import { sendToMain } from '@/utils/common'
import {
SHOW_INPUT_BOX,
SHOW_INPUT_BOX_RESPONSE
} from '#/events/constants'
import { SHOW_INPUT_BOX, SHOW_INPUT_BOX_RESPONSE } from '#/events/constants'
const inputBoxValue = ref('')
const showInputBoxVisible = ref(false)
@@ -52,25 +39,25 @@ onBeforeMount(() => {
$bus.on(SHOW_INPUT_BOX, initInputBoxValue)
})
function ipcEventHandler (_: IpcRendererEvent, options: IShowInputBoxOption) {
function ipcEventHandler(_: IpcRendererEvent, options: IShowInputBoxOption) {
initInputBoxValue(options)
}
function initInputBoxValue (options: IShowInputBoxOption) {
function initInputBoxValue(options: IShowInputBoxOption) {
inputBoxValue.value = options.value || ''
inputBoxOptions.title = options.title || ''
inputBoxOptions.placeholder = options.placeholder || ''
showInputBoxVisible.value = true
}
function handleInputBoxCancel () {
function handleInputBoxCancel() {
// TODO: RPCServer
showInputBoxVisible.value = false
sendToMain(SHOW_INPUT_BOX, '')
$bus.emit(SHOW_INPUT_BOX_RESPONSE, '')
}
function handleInputBoxConfirm () {
function handleInputBoxConfirm() {
showInputBoxVisible.value = false
sendToMain(SHOW_INPUT_BOX, inputBoxValue.value)
$bus.emit(SHOW_INPUT_BOX_RESPONSE, inputBoxValue.value)
@@ -80,12 +67,10 @@ onBeforeUnmount(() => {
ipcRenderer.removeListener(SHOW_INPUT_BOX, ipcEventHandler)
$bus.off(SHOW_INPUT_BOX)
})
</script>
<script lang="ts">
export default {
name: 'InputBoxDialog'
}
</script>
<style lang='stylus'>
</style>
<style lang="stylus"></style>

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

@@ -1,10 +1,6 @@
<template>
<div class="toolbox-handler">
<ElButton
type="primary"
:link="true"
@click="() => props.handler(value)"
>
<ElButton type="primary" :link="true" @click="() => props.handler(value)">
{{ props.handlerText }}
</ElButton>
</div>
@@ -21,12 +17,10 @@ interface IProps {
}
const props = defineProps<IProps>()
</script>
<script lang="ts">
export default {
name: 'ToolboxHandler'
}
</script>
<style lang='stylus'>
</style>
<style lang="stylus"></style>

8
src/renderer/components/ToolboxStatusIcon.vue
View File

@@ -1,8 +1,5 @@
<template>
<el-icon
:color="color"
class="toolbox-status-icon"
>
<el-icon :color="color" class="toolbox-status-icon">
<template v-if="props.status === IToolboxItemCheckStatus.SUCCESS">
<SuccessFilled />
</template>
@@ -37,14 +34,13 @@ const color = computed(() => {
return '#909399'
}
})
</script>
<script lang="ts">
export default {
name: 'ToolboxStatusIcon'
}
</script>
<style lang='stylus'>
<style lang="stylus">
.toolbox-status-icon {
margin-left: 8px;
}