🎨 Style(custom): format with prettier

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
+75 -184
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
}