mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-05-24 17:50:24 +08:00
✨ Feature(custom): enhance upload page UI and functionality
This commit is contained in:
Kuingsmile
@@ -2,138 +2,281 @@
|
||||
<el-form
|
||||
label-position="top"
|
||||
require-asterisk-position="right"
|
||||
label-width="10vw"
|
||||
size="default"
|
||||
:model="waterMarkForm"
|
||||
class="image-process-form"
|
||||
>
|
||||
<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-radio-group v-model="waterMarkForm.watermarkType">
|
||||
<el-radio value="text">
|
||||
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
|
||||
</el-radio>
|
||||
<el-radio value="image">
|
||||
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}
|
||||
</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>
|
||||
<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'"
|
||||
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT')"
|
||||
>
|
||||
<el-input v-model="waterMarkForm.watermarkText" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
|
||||
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT_FONT_PATH')"
|
||||
>
|
||||
<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>
|
||||
<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-form-item>
|
||||
<el-form-item
|
||||
v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'image'"
|
||||
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPATH')"
|
||||
>
|
||||
<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]">
|
||||
{{ 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>
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY')">
|
||||
<el-input-number v-model="compressForm.quality" :min="1" :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>
|
||||
<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-input
|
||||
v-model="formatConvertObj"
|
||||
placeholder='{"jpg": "png", "png": "jpg"}'
|
||||
type="textarea"
|
||||
: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>
|
||||
<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>
|
||||
<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>
|
||||
<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-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-form-item>
|
||||
<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>
|
||||
<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>
|
||||
<el-form-item>
|
||||
<div class="settings-grid">
|
||||
<!-- Left Column -->
|
||||
<div class="settings-column">
|
||||
<!-- Watermark Settings Section -->
|
||||
<section class="settings-section">
|
||||
<div class="section-header">
|
||||
<el-icon><Picture /></el-icon>
|
||||
<h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM') }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<el-form-item class="toggle-control">
|
||||
<el-switch v-model="waterMarkForm.isAddWatermark" :style="switchStyle" />
|
||||
<span class="toggle-label">{{ waterMarkForm.isAddWatermark ? $T('ENABLE') : $T('DISABLE') }}</span>
|
||||
</el-form-item>
|
||||
|
||||
<div v-show="waterMarkForm.isAddWatermark" class="subsection">
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')">
|
||||
<el-radio-group v-model="waterMarkForm.watermarkType" class="radio-group">
|
||||
<el-radio value="text">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}</el-radio>
|
||||
<el-radio value="image">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')" class="toggle-control">
|
||||
<el-switch v-model="waterMarkForm.isFullScreenWatermark" :style="switchStyle" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')">
|
||||
<el-radio-group v-model="waterMarkForm.watermarkPosition" class="position-grid">
|
||||
<el-radio v-for="item in waterMarkPositionMap" :key="item[0]" :value="item[0]">
|
||||
{{ item[1] }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<div class="form-row">
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')">
|
||||
<el-input-number v-model="waterMarkForm.watermarkDegree" :step="1" controls-position="right" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')">
|
||||
<el-input-number
|
||||
v-model="waterMarkForm.watermarkScaleRatio"
|
||||
:min="0"
|
||||
:max="1"
|
||||
:step="0.01"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- Text Watermark Options -->
|
||||
<div v-show="waterMarkForm.watermarkType === 'text'" class="subsection variant-subsection">
|
||||
<h4 class="subsection-title">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}</h4>
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT')">
|
||||
<el-input v-model="waterMarkForm.watermarkText" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT_FONT_PATH')">
|
||||
<el-input v-model="waterMarkForm.watermarkFontPath" placeholder="/path/to/font.ttf" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMCOLOR')">
|
||||
<div class="color-picker-container">
|
||||
<el-color-picker v-model="waterMarkForm.watermarkColor" show-alpha />
|
||||
<span class="color-value">{{ waterMarkForm.watermarkColor }}</span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<!-- Image Watermark Options -->
|
||||
<div v-show="waterMarkForm.watermarkType === 'image'" class="subsection variant-subsection">
|
||||
<h4 class="subsection-title">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}</h4>
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPATH')">
|
||||
<el-input v-model="waterMarkForm.watermarkImagePath" placeholder="/path/to/watermark.png" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Format Conversion Settings Section -->
|
||||
<section class="settings-section">
|
||||
<div class="section-header">
|
||||
<el-icon><Document /></el-icon>
|
||||
<h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT') }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<el-form-item class="toggle-control">
|
||||
<el-switch v-model="compressForm.isConvert" :style="switchStyle" />
|
||||
<span class="toggle-label">{{ compressForm.isConvert ? $T('ENABLE') : $T('DISABLE') }}</span>
|
||||
</el-form-item>
|
||||
|
||||
<div v-show="compressForm.isConvert" class="subsection">
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT')">
|
||||
<el-select v-model="compressForm.convertFormat" :persistent="false" teleported class="full-width">
|
||||
<el-option v-for="item in availableFormat" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')">
|
||||
<el-input
|
||||
v-model="formatConvertObj"
|
||||
placeholder='{"jpg": "png", "png": "jpg"}'
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
class="code-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Right Column -->
|
||||
<div class="settings-column">
|
||||
<!-- Image Processing Settings Section -->
|
||||
<section class="settings-section">
|
||||
<div class="section-header">
|
||||
<el-icon><Edit /></el-icon>
|
||||
<h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY') }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<el-form-item class="toggle-control">
|
||||
<el-switch v-model="compressForm.isRemoveExif" :style="switchStyle" />
|
||||
<span class="toggle-label">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF') }}</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY')">
|
||||
<el-slider v-model="compressForm.quality" :min="1" :max="100" :step="1" show-input class="full-width" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Resize Settings Section -->
|
||||
<section class="settings-section">
|
||||
<div class="section-header">
|
||||
<el-icon><ZoomIn /></el-icon>
|
||||
<h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE') }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<el-form-item class="toggle-control">
|
||||
<el-switch v-model="compressForm.isReSize" :style="switchStyle" />
|
||||
<span class="toggle-label">{{ compressForm.isReSize ? $T('ENABLE') : $T('DISABLE') }}</span>
|
||||
</el-form-item>
|
||||
|
||||
<div v-show="compressForm.isReSize" class="subsection">
|
||||
<div class="form-row">
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEWIDTH')">
|
||||
<el-input-number v-model="compressForm.reSizeWidth" :min="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEHEIGHT')">
|
||||
<el-input-number v-model="compressForm.reSizeHeight" :min="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item
|
||||
v-show="compressForm.reSizeHeight! > 0 && compressForm.reSizeWidth === 0"
|
||||
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_HEIGHT')"
|
||||
class="toggle-control"
|
||||
>
|
||||
<el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-show="compressForm.reSizeWidth! > 0 && compressForm.reSizeHeight === 0"
|
||||
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_WIDTH')"
|
||||
class="toggle-control"
|
||||
>
|
||||
<el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Resize by Percent Section -->
|
||||
<section class="settings-section">
|
||||
<div class="section-header">
|
||||
<el-icon><ScaleToOriginal /></el-icon>
|
||||
<h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZEBYPERCENT') }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<el-form-item class="toggle-control">
|
||||
<el-switch v-model="compressForm.isReSizeByPercent" :style="switchStyle" />
|
||||
<span class="toggle-label">{{ compressForm.isReSizeByPercent ? $T('ENABLE') : $T('DISABLE') }}</span>
|
||||
</el-form-item>
|
||||
|
||||
<div v-show="compressForm.isReSizeByPercent" class="subsection">
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEPERCENT')">
|
||||
<el-slider
|
||||
v-model="compressForm.reSizePercent"
|
||||
:min="1"
|
||||
:max="100"
|
||||
:step="1"
|
||||
show-input
|
||||
class="full-width"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Flip and Rotation Section -->
|
||||
<section class="settings-section">
|
||||
<div class="section-header">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
<h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_TRANSFORMATION') }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="form-row">
|
||||
<el-form-item class="toggle-control">
|
||||
<el-switch v-model="compressForm.isFlip" :style="switchStyle" />
|
||||
<span class="toggle-label">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP') }}</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="toggle-control">
|
||||
<el-switch v-model="compressForm.isFlop" :style="switchStyle" />
|
||||
<span class="toggle-label">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP') }}</span>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item class="toggle-control">
|
||||
<el-switch v-model="compressForm.isRotate" :style="switchStyle" />
|
||||
<span class="toggle-label">{{
|
||||
compressForm.isRotate
|
||||
? $T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')
|
||||
: $T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')
|
||||
}}</span>
|
||||
</el-form-item>
|
||||
|
||||
<div v-show="compressForm.isRotate" class="subsection">
|
||||
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ROTATEDEGREE')">
|
||||
<div class="rotation-control">
|
||||
<el-input-number v-model="compressForm.rotateDegree" :step="1" controls-position="right" />
|
||||
<div class="rotation-buttons">
|
||||
<el-button size="small" @click="compressForm.rotateDegree = 0">0°</el-button>
|
||||
<el-button size="small" @click="compressForm.rotateDegree = 90">90°</el-button>
|
||||
<el-button size="small" @click="compressForm.rotateDegree = 180">180°</el-button>
|
||||
<el-button size="small" @click="compressForm.rotateDegree = 270">270°</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="form-actions">
|
||||
<el-button type="primary" @click="handleSaveConfig">
|
||||
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CONFIRM') }}
|
||||
</el-button>
|
||||
<el-button @click="closeDialog">
|
||||
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CANCEL') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
|
||||
import { onBeforeMount, reactive, ref, toRaw } from 'vue'
|
||||
import { Picture, Edit, Document, ZoomIn, ScaleToOriginal, Refresh } from '@element-plus/icons-vue'
|
||||
|
||||
import { T as $T } from '@/i18n/index'
|
||||
import { getConfig, saveConfig } from '@/utils/dataSender'
|
||||
@@ -262,3 +405,233 @@ onBeforeMount(async () => {
|
||||
await initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.image-process-form {
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
scrollbar-width: thin;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(144, 147, 153, 0.3);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.settings-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
background: var(--el-bg-color-overlay, #ffffff);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
transition: all 0.25s ease;
|
||||
border: 1px solid var(--el-border-color-lighter, #EBEEF5);
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 18px;
|
||||
background: linear-gradient(90deg, var(--el-color-primary-light-9, #ecf5ff) 0%, transparent 100%);
|
||||
border-bottom: 1px solid var(--el-border-color-light, #E4E7ED);
|
||||
border-left: 4px solid var(--el-color-primary, #409eff);
|
||||
|
||||
.el-icon {
|
||||
color: var(--el-color-primary, #409eff);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary, #303133);
|
||||
}
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.subsection {
|
||||
background: var(--el-fill-color-light, #f5f7fa);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-top: 10px;
|
||||
animation: fade-in 0.3s ease;
|
||||
}
|
||||
|
||||
.variant-subsection {
|
||||
background: var(--el-color-primary-light-9, #ecf5ff);
|
||||
border-left: 3px solid var(--el-color-primary-light-5, #a0cfff);
|
||||
}
|
||||
|
||||
.subsection-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin: 0 0 12px 0;
|
||||
color: var(--el-color-primary, #409eff);
|
||||
border-bottom: 1px dashed var(--el-border-color-light, #E4E7ED);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.toggle-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
|
||||
:deep(.el-form-item__content) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular, #606266);
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.position-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
|
||||
:deep(.el-radio) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.el-radio__label {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-picker-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.color-value {
|
||||
font-family: monospace;
|
||||
background: var(--el-fill-color-lighter, #f5f7fa);
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.rotation-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.rotation-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.el-button {
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-input {
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.helper-text {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary, #909399);
|
||||
margin-top: 4px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 28px;
|
||||
padding: 16px 0;
|
||||
background: linear-gradient(to top, var(--el-bg-color, #ffffff) 60%, transparent);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
|
||||
.el-button {
|
||||
min-width: 120px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(-5px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.settings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.position-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,99 +1,108 @@
|
||||
<template>
|
||||
<div id="upload-view">
|
||||
<el-row :gutter="16" align="middle">
|
||||
<el-col :span="24">
|
||||
<div class="view-title">
|
||||
<el-tooltip placement="top" effect="light" :content="$T('UPLOAD_VIEW_HINT')" :persistent="false" teleported>
|
||||
<span id="upload-view-title" @click="handlePicBedNameClick(picBedName, picBedConfigName)">
|
||||
{{ picBedName }} - {{ picBedConfigName || 'Default' }}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<el-icon style="cursor: pointer; margin-left: 4px" @click="handleChangePicBed">
|
||||
<CaretBottom />
|
||||
</el-icon>
|
||||
<el-button
|
||||
type="primary"
|
||||
round
|
||||
size="small"
|
||||
class="quick-upload"
|
||||
style="margin-left: 6px"
|
||||
@click="handleImageProcess"
|
||||
>
|
||||
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_NAME') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div
|
||||
id="upload-area"
|
||||
:class="{ 'is-dragover': dragover }"
|
||||
@drop.prevent="onDrop"
|
||||
@dragover.prevent="dragover = true"
|
||||
@dragleave.prevent="dragover = false"
|
||||
>
|
||||
<div id="upload-dragger" @click="openUplodWindow">
|
||||
<el-icon>
|
||||
<UploadFilled />
|
||||
</el-icon>
|
||||
<div class="upload-dragger__text">
|
||||
{{ $T('DRAG_FILE_TO_HERE') }}
|
||||
<span>{{ $T('CLICK_TO_UPLOAD') }}</span>
|
||||
<div id="upload-view" class="upload-container">
|
||||
<div class="container-inner">
|
||||
<div class="view-title">
|
||||
<el-tooltip placement="top" effect="light" :content="$T('UPLOAD_VIEW_HINT')" :persistent="false" teleported>
|
||||
<span id="upload-view-title" @click="handlePicBedNameClick(picBedName, picBedConfigName)">
|
||||
{{ picBedName }} - {{ picBedConfigName || 'Default' }}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<el-button class="icon-button" type="info" size="small" circle @click="handleChangePicBed">
|
||||
<el-icon><CaretBottom /></el-icon>
|
||||
</el-button>
|
||||
<el-button type="primary" round size="small" class="quick-upload" @click="handleImageProcess">
|
||||
<el-icon><Edit /></el-icon>
|
||||
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_NAME') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="upload-area"
|
||||
class="upload-area"
|
||||
:class="{ 'is-dragover': dragover }"
|
||||
@drop.prevent="onDrop"
|
||||
@dragover.prevent="dragover = true"
|
||||
@dragleave.prevent="dragover = false"
|
||||
>
|
||||
<transition name="scale-fade">
|
||||
<div v-if="showProgress" class="upload-overlay">
|
||||
<el-progress
|
||||
type="dashboard"
|
||||
:percentage="progress"
|
||||
:status="showError ? 'exception' : 'success'"
|
||||
:stroke-width="8"
|
||||
/>
|
||||
<div class="upload-status-text">
|
||||
{{ showError ? $T('UPLOAD_FAILED') : $T('UPLOADING') }}
|
||||
</div>
|
||||
<input id="file-uploader" type="file" multiple @change="onChange" />
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div id="upload-dragger" class="upload-dragger" @click="openUplodWindow">
|
||||
<el-icon class="upload-icon"><UploadFilled /></el-icon>
|
||||
<div class="upload-dragger__text">
|
||||
{{ $T('DRAG_FILE_TO_HERE') }}
|
||||
<span class="upload-action-text">{{ $T('CLICK_TO_UPLOAD') }}</span>
|
||||
</div>
|
||||
<input id="file-uploader" type="file" multiple @change="onChange" />
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="progress"
|
||||
:show-text="false"
|
||||
class="upload-progress"
|
||||
:class="{ show: showProgress }"
|
||||
:status="showError ? 'exception' : undefined"
|
||||
/>
|
||||
<div class="paste-style">
|
||||
<div class="el-col-12">
|
||||
<div class="paste-style__text">
|
||||
</div>
|
||||
|
||||
<div class="upload-options">
|
||||
<div class="option-card link-format-card">
|
||||
<div class="option-header">
|
||||
<div class="option-label">
|
||||
{{ $T('LINK_FORMAT') }}
|
||||
</div>
|
||||
<el-radio-group v-model="pasteStyle" size="small" @change="handlePasteStyleChange">
|
||||
<el-radio-button v-for="(item, key) in pasteFormatList" :key="key" :value="key" :title="item">
|
||||
<el-switch
|
||||
v-model="useShortUrl"
|
||||
class="short-url-switch"
|
||||
active-text=""
|
||||
inactive-text=""
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
@change="handleUseShortUrlChange"
|
||||
/>
|
||||
<span class="switch-label">{{ useShortUrl ? $T('UPLOAD_SHORT_URL') : $T('UPLOAD_NORMAL_URL') }}</span>
|
||||
</div>
|
||||
<div class="option-content">
|
||||
<el-radio-group
|
||||
v-model="pasteStyle"
|
||||
size="small"
|
||||
class="format-radio-group"
|
||||
@change="handlePasteStyleChange"
|
||||
>
|
||||
<el-radio-button
|
||||
v-for="(item, key) in pasteFormatList"
|
||||
:key="key"
|
||||
:value="key"
|
||||
:title="item"
|
||||
class="format-radio-btn"
|
||||
>
|
||||
{{ key }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-radio-group v-model="useShortUrl" size="small" @change="handleUseShortUrlChange">
|
||||
<el-radio-button :value="true" style="border-radius: 5px">
|
||||
{{ $T('UPLOAD_SHORT_URL') }}
|
||||
</el-radio-button>
|
||||
<el-radio-button :value="false" style="border-radius: 5px">
|
||||
{{ $T('UPLOAD_NORMAL_URL') }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="el-col-8">
|
||||
<div class="paste-style__text">
|
||||
{{ $T('QUICK_UPLOAD') }}
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
round
|
||||
size="small"
|
||||
class="quick-upload"
|
||||
style="width: 50%"
|
||||
@click="uploadClipboardFiles"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="option-card quick-upload-card">
|
||||
<div class="option-label">
|
||||
{{ $T('QUICK_UPLOAD') }}
|
||||
</div>
|
||||
<div class="option-content quick-upload-content">
|
||||
<el-button type="primary" class="quick-upload-btn" @click="uploadClipboardFiles">
|
||||
<el-icon><Picture /></el-icon>
|
||||
{{ $T('CLIPBOARD_PICTURE') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
round
|
||||
size="small"
|
||||
class="quick-upload"
|
||||
style="width: 46%; margin-left: 6px"
|
||||
@click="uploadURLFiles"
|
||||
>
|
||||
<el-button type="primary" class="quick-upload-btn" @click="uploadURLFiles">
|
||||
<el-icon><Link /></el-icon>
|
||||
URL
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="imageProcessDialogVisible"
|
||||
:title="$T('UPLOAD_PAGE_IMAGE_PROCESS_DIALOG_TITLE')"
|
||||
@@ -110,10 +119,11 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ipcRenderer, IpcRendererEvent } from 'electron'
|
||||
import { ElMessage as $message } from 'element-plus'
|
||||
import { UploadFilled, CaretBottom } from '@element-plus/icons-vue'
|
||||
import { ElMessage as $message, ElSwitch } from 'element-plus'
|
||||
import { UploadFilled, CaretBottom, Picture, Link, Edit } from '@element-plus/icons-vue'
|
||||
import { ref, onBeforeMount, onBeforeUnmount, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useDebounceFn, useThrottleFn } from '@vueuse/core'
|
||||
|
||||
import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
|
||||
import { T as $T } from '@/i18n'
|
||||
@@ -132,6 +142,7 @@ import { useDragEventListeners } from '@/utils/drag'
|
||||
useDragEventListeners()
|
||||
const $router = useRouter()
|
||||
|
||||
// State variables
|
||||
const imageProcessDialogVisible = ref(false)
|
||||
const useShortUrl = ref(false)
|
||||
const dragover = ref(false)
|
||||
@@ -154,32 +165,36 @@ watch(picBedGlobal, () => {
|
||||
getDefaultPicBed()
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
updatePicBedGlobal()
|
||||
ipcRenderer.on('uploadProgress', (_event: IpcRendererEvent, _progress: number) => {
|
||||
if (_progress !== -1) {
|
||||
showProgress.value = true
|
||||
progress.value = _progress
|
||||
} else {
|
||||
progress.value = 100
|
||||
showError.value = true
|
||||
}
|
||||
})
|
||||
getUseShortUrl()
|
||||
getPasteStyle()
|
||||
getDefaultPicBed()
|
||||
ipcRenderer.on('syncPicBed', () => {
|
||||
getDefaultPicBed()
|
||||
})
|
||||
watch(progress, onProgressChange)
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await updatePicBedGlobal()
|
||||
ipcRenderer.on('uploadProgress', handleUploadProgress)
|
||||
ipcRenderer.on('syncPicBed', getDefaultPicBed)
|
||||
$bus.on(SHOW_INPUT_BOX_RESPONSE, handleInputBoxValue)
|
||||
await Promise.all([getUseShortUrl(), getPasteStyle(), getDefaultPicBed()])
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
$bus.off(SHOW_INPUT_BOX_RESPONSE)
|
||||
ipcRenderer.removeAllListeners('uploadProgress')
|
||||
ipcRenderer.removeAllListeners('syncPicBed')
|
||||
})
|
||||
|
||||
const handleUploadProgress = useThrottleFn((_event: IpcRendererEvent, _progress: number) => {
|
||||
if (_progress !== -1) {
|
||||
showProgress.value = true
|
||||
progress.value = _progress
|
||||
} else {
|
||||
progress.value = 100
|
||||
showError.value = true
|
||||
}
|
||||
}, 50)
|
||||
|
||||
const handleImageProcess = () => {
|
||||
imageProcessDialogVisible.value = true
|
||||
}
|
||||
|
||||
watch(progress, onProgressChange)
|
||||
|
||||
function onProgressChange(val: number) {
|
||||
if (val === 100) {
|
||||
setTimeout(() => {
|
||||
@@ -211,16 +226,8 @@ async function handlePicBedNameClick(_picBedName: string, picBedConfigName: stri
|
||||
})
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
$bus.off(SHOW_INPUT_BOX_RESPONSE)
|
||||
ipcRenderer.removeAllListeners('uploadProgress')
|
||||
ipcRenderer.removeAllListeners('syncPicBed')
|
||||
})
|
||||
|
||||
function onDrop(e: DragEvent) {
|
||||
const onDrop = useDebounceFn((e: DragEvent) => {
|
||||
dragover.value = false
|
||||
|
||||
// send files first
|
||||
if (e.dataTransfer?.files?.length) {
|
||||
ipcSendFiles(e.dataTransfer.files)
|
||||
} else if (e.dataTransfer?.items) {
|
||||
@@ -236,11 +243,9 @@ function onDrop(e: DragEvent) {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 200)
|
||||
|
||||
function handleURLDrag(items: DataTransferItemList, dataTransfer: DataTransfer) {
|
||||
// text/html
|
||||
// Use this data to get a more precise URL
|
||||
const urlString = dataTransfer.getData(items[1].type)
|
||||
const urlMatch = urlString.match(/<img.*src="(.*?)"/)
|
||||
if (urlMatch) {
|
||||
@@ -344,82 +349,372 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.view-title
|
||||
display flex
|
||||
color #eee
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin 10px auto
|
||||
align-items center
|
||||
justify-content center
|
||||
#upload-view-title
|
||||
&:hover
|
||||
cursor pointer
|
||||
color #409EFF
|
||||
#upload-view
|
||||
.upload-container
|
||||
position absolute
|
||||
left 142px
|
||||
right 0
|
||||
height 100%
|
||||
.view-title
|
||||
margin 10vh auto 10px
|
||||
#upload-area
|
||||
height 50vh
|
||||
border 2px dashed #dddddd
|
||||
border-radius 8px
|
||||
text-align center
|
||||
width 60vw
|
||||
margin 0 auto
|
||||
color #dddddd
|
||||
cursor pointer
|
||||
transition all .2s ease-in-out
|
||||
align-items center
|
||||
#upload-dragger
|
||||
height 100%
|
||||
item-align center
|
||||
&.is-dragover,
|
||||
padding 0
|
||||
transition all 0.3s ease
|
||||
overflow-y auto
|
||||
overflow-x hidden
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
|
||||
.container-inner
|
||||
max-width 800px
|
||||
width 100%
|
||||
padding 20px
|
||||
max-height 90vh // Limit maximum height
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center // Center content vertically
|
||||
margin auto // Center the container
|
||||
gap 20px // Add consistent spacing between elements
|
||||
|
||||
.view-title
|
||||
display flex
|
||||
color #f2f2f2
|
||||
font-size 20px
|
||||
text-align center
|
||||
margin-bottom 0
|
||||
align-items center
|
||||
justify-content center
|
||||
flex-wrap wrap
|
||||
padding 12px
|
||||
border-radius 10px
|
||||
max-width 800px
|
||||
|
||||
@media (max-width: 640px), (max-height: 700px)
|
||||
font-size 16px
|
||||
padding 10px
|
||||
|
||||
.icon-button
|
||||
margin-left 8px
|
||||
transition transform 0.2s ease
|
||||
&:hover
|
||||
border 2px dashed #A4D8FA
|
||||
background-color rgba(164, 216, 250, 0.3)
|
||||
color #fff
|
||||
i
|
||||
height 80%
|
||||
font-size 10vh
|
||||
margin 0
|
||||
span
|
||||
color #409EFF
|
||||
#file-uploader
|
||||
display none
|
||||
.upload-progress
|
||||
opacity 0
|
||||
transition all .2s ease-in-out
|
||||
width 450px
|
||||
margin 20px auto 0
|
||||
&.show
|
||||
opacity 1
|
||||
.el-progress-bar__inner
|
||||
transition all .2s ease-in-out
|
||||
.paste-style
|
||||
justify-content center
|
||||
text-align center
|
||||
margin-top 16px
|
||||
transform scale(1.1)
|
||||
|
||||
.quick-upload
|
||||
margin-left 12px
|
||||
display flex
|
||||
align-items flex-end
|
||||
&__text
|
||||
font-size 12px
|
||||
color #eeeeee
|
||||
margin-bottom 4px
|
||||
.el-radio-button:first-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
.el-radio-button:first-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 14px 0 0 14px
|
||||
.el-radio-button:last-child
|
||||
.el-radio-button__inner
|
||||
border-left none
|
||||
border-radius 0 14px 14px 0
|
||||
.el-icon-caret-bottom
|
||||
align-items center
|
||||
gap 4px
|
||||
transition all 0.3s ease
|
||||
&:hover
|
||||
transform translateY(-2px)
|
||||
box-shadow 0 4px 12px rgba(0, 0, 0, 0.2)
|
||||
|
||||
@media (max-width: 640px)
|
||||
margin-top 8px
|
||||
margin-left 0
|
||||
|
||||
#upload-view-title
|
||||
transition all 0.2s ease
|
||||
position relative
|
||||
overflow hidden
|
||||
display inline-block
|
||||
|
||||
&:after
|
||||
content ''
|
||||
position absolute
|
||||
left 0
|
||||
bottom -2px
|
||||
width 0
|
||||
height 2px
|
||||
background #409EFF
|
||||
transition width 0.3s ease
|
||||
|
||||
&:hover
|
||||
cursor pointer
|
||||
color #409EFF
|
||||
|
||||
&:after
|
||||
width 100%
|
||||
|
||||
.upload-area
|
||||
flex 1
|
||||
min-height 250px
|
||||
max-height 550px
|
||||
border 2px dashed rgba(255, 255, 255, 0.2)
|
||||
border-radius 16px
|
||||
text-align center
|
||||
width 100%
|
||||
margin 0 auto
|
||||
color #eee
|
||||
cursor pointer
|
||||
transition all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.0)
|
||||
position relative
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
backdrop-filter blur(5px)
|
||||
background linear-gradient(135deg, rgba(50, 50, 50, 0.1) 0%, rgba(30, 30, 30, 0.2) 100%)
|
||||
box-shadow 0 8px 20px rgba(0, 0, 0, 0.1)
|
||||
|
||||
@media (max-height: 600px)
|
||||
min-height 180px
|
||||
max-height 250px
|
||||
|
||||
@media (min-height: 800px)
|
||||
min-height 350px
|
||||
max-height 550px
|
||||
|
||||
&.is-dragover,
|
||||
&:hover
|
||||
border 2px dashed #409EFF
|
||||
background-color rgba(64, 158, 255, 0.1)
|
||||
transform scale(1.01)
|
||||
box-shadow 0 10px 25px rgba(0, 0, 0, 0.15)
|
||||
color #fff
|
||||
|
||||
.upload-overlay
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
right 0
|
||||
bottom 0
|
||||
background rgba(0, 0, 0, 0.7)
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
align-items center
|
||||
z-index 10
|
||||
border-radius 15px
|
||||
backdrop-filter blur(5px)
|
||||
|
||||
.upload-status-text
|
||||
margin-top 16px
|
||||
color #ffffff
|
||||
font-size 16px
|
||||
font-weight 500
|
||||
|
||||
.upload-dragger
|
||||
height 100%
|
||||
width 100%
|
||||
display flex
|
||||
flex-direction column
|
||||
justify-content center
|
||||
align-items center
|
||||
|
||||
.upload-icon
|
||||
font-size 55px
|
||||
margin-bottom 20px
|
||||
color rgba(255, 255, 255, 0.8)
|
||||
transition all 0.3s ease
|
||||
filter drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1))
|
||||
|
||||
@media (max-height: 600px)
|
||||
font-size 40px
|
||||
margin-bottom 12px
|
||||
|
||||
&__text
|
||||
font-size 16px
|
||||
color rgba(255, 255, 255, 0.9)
|
||||
margin-bottom 8px
|
||||
max-width 80%
|
||||
text-align center
|
||||
line-height 1.5
|
||||
|
||||
@media (max-height: 600px)
|
||||
font-size 14px
|
||||
line-height 1.3
|
||||
|
||||
.upload-action-text
|
||||
color #409EFF
|
||||
font-weight 500
|
||||
margin-left 6px
|
||||
position relative
|
||||
display inline-block
|
||||
|
||||
&:after
|
||||
content ''
|
||||
position absolute
|
||||
left 0
|
||||
bottom -2px
|
||||
width 100%
|
||||
height 1px
|
||||
background #409EFF
|
||||
|
||||
#file-uploader
|
||||
display none
|
||||
|
||||
.upload-options
|
||||
display flex
|
||||
justify-content space-between
|
||||
gap 15px
|
||||
margin-bottom 0
|
||||
width 100%
|
||||
max-width: 800px
|
||||
|
||||
@media (max-width: 768px)
|
||||
flex-direction column
|
||||
gap 12px
|
||||
|
||||
.option-card
|
||||
background rgba(255, 255, 255, 0.05)
|
||||
border-radius 12px
|
||||
padding 12px
|
||||
backdrop-filter blur(5px)
|
||||
box-shadow 0 5px 15px rgba(0, 0, 0, 0.1)
|
||||
transition all 0.3s ease
|
||||
|
||||
&:hover
|
||||
transform translateY(-3px)
|
||||
box-shadow 0 8px 20px rgba(0, 0, 0, 0.15)
|
||||
|
||||
@media (max-height: 600px)
|
||||
padding 10px
|
||||
|
||||
.option-header
|
||||
display flex
|
||||
align-items center
|
||||
margin-bottom 12px
|
||||
flex-wrap wrap
|
||||
gap 8px
|
||||
|
||||
.option-label
|
||||
font-size 14px
|
||||
color #f2f2f2
|
||||
font-weight 500
|
||||
border-left 3px solid #409EFF
|
||||
padding-left 10px
|
||||
margin-right auto
|
||||
|
||||
@media (max-height: 600px)
|
||||
font-size 13px
|
||||
|
||||
.option-content
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
gap 10px
|
||||
|
||||
.link-format-card
|
||||
flex 3
|
||||
min-width 0
|
||||
max-width 580px
|
||||
|
||||
.quick-upload-card
|
||||
flex 1
|
||||
min-width 200px
|
||||
max-width 280px
|
||||
display flex
|
||||
flex-direction column
|
||||
|
||||
.option-label
|
||||
margin-bottom 12px
|
||||
|
||||
.short-url-switch
|
||||
margin-left auto
|
||||
|
||||
.switch-label
|
||||
font-size 12px
|
||||
color #e0e0e0
|
||||
white-space nowrap
|
||||
|
||||
.format-radio-group
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
gap 5px
|
||||
width 100%
|
||||
|
||||
.format-radio-btn
|
||||
flex-grow 1
|
||||
min-width 0
|
||||
|
||||
.el-radio-button__inner
|
||||
padding 8px 10px
|
||||
width 100%
|
||||
font-size 13px
|
||||
border-radius 4px !important
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
|
||||
|
||||
.quick-upload-content
|
||||
display flex
|
||||
gap 10px
|
||||
flex 1
|
||||
|
||||
@media (max-width: 768px) and (min-width: 641px)
|
||||
flex-direction column
|
||||
gap 8px
|
||||
|
||||
@media (max-width: 640px)
|
||||
flex-direction row
|
||||
|
||||
.quick-upload-btn
|
||||
flex 1
|
||||
padding 8px 12px
|
||||
border-radius 8px
|
||||
transition all 0.3s ease
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
gap 5px
|
||||
font-size 13px
|
||||
height 40px
|
||||
|
||||
@media (max-width: 768px) and (min-width: 641px)
|
||||
height 36px
|
||||
|
||||
&:hover
|
||||
transform translateY(-2px)
|
||||
box-shadow 0 4px 12px rgba(0, 0, 0, 0.2)
|
||||
|
||||
// Animations
|
||||
.scale-fade-enter-active,
|
||||
.scale-fade-leave-active
|
||||
transition all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
|
||||
|
||||
.scale-fade-enter-from,
|
||||
.scale-fade-leave-to
|
||||
opacity 0
|
||||
transform scale(0.9)
|
||||
|
||||
// Radio button styling
|
||||
.el-radio-button
|
||||
transition all 0.2s ease
|
||||
|
||||
&__inner
|
||||
border-radius 8px !important
|
||||
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
|
||||
margin 0 2px
|
||||
|
||||
&:first-child
|
||||
.el-radio-button__inner
|
||||
border-radius 8px 0 0 8px !important
|
||||
|
||||
&:last-child
|
||||
.el-radio-button__inner
|
||||
border-radius 0 8px 8px 0 !important
|
||||
|
||||
// Custom scrollbar for the container
|
||||
.upload-container::-webkit-scrollbar
|
||||
width 5px
|
||||
|
||||
.upload-container::-webkit-scrollbar-thumb
|
||||
background rgba(255, 255, 255, 0.2)
|
||||
border-radius 5px
|
||||
|
||||
&:hover
|
||||
background rgba(255, 255, 255, 0.3)
|
||||
|
||||
.upload-container::-webkit-scrollbar-track
|
||||
background transparent
|
||||
|
||||
// Add responsive adjustments for larger screens
|
||||
@media (min-height: 900px)
|
||||
.container-inner
|
||||
gap 30px // Increase gap for larger screens
|
||||
justify-content center
|
||||
|
||||
.upload-area
|
||||
flex 1 1 auto
|
||||
min-height 400px
|
||||
|
||||
.view-title, .upload-options
|
||||
flex-shrink 0 // Prevent these elements from shrinking
|
||||
</style>
|
||||
|
||||
1
src/universal/types/i18n.d.ts
vendored
1
src/universal/types/i18n.d.ts
vendored
@@ -122,6 +122,7 @@ interface ILocales {
|
||||
UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT: string
|
||||
UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT: string
|
||||
UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC: string
|
||||
UPLOAD_PAGE_IMAGE_PROCESS_TRANSFORMATION: string
|
||||
UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP: string
|
||||
UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP: string
|
||||
UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE: string
|
||||
|
||||
Reference in New Issue
Block a user