GithubBackup/PicList
1
0
Fork 0
mirror of https://github.com/Kuingsmile/PicList.git synced 2026-09-07 08:26:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

🔙 Revert(custom): revert UI chage, delayed to next major version

Browse Source
This commit is contained in:
Kuingsmile
2025-06-07 21:08:49 +08:00
parent e17b578685
commit 8b925019ba
7 changed files with 791 additions and 2053 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -26,3 +26,4 @@ scripts/generateYmlFile.js
/dist_electron /dist_electron
/docs /docs
cloc.exe cloc.exe
desktop.ini
src/renderer/components/ImageProcessSetting.vue
+123 -496
View File
@@ -2,281 +2,138 @@
<el-form <el-form
label-position="top" label-position="top"
require-asterisk-position="right" require-asterisk-position="right"
label-width="10vw"
size="default" size="default"
:model="waterMarkForm" :model="waterMarkForm"
class="image-process-form"
> >
<div class="settings-grid"> <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM')">
<!-- Left Column --> <el-switch v-model="waterMarkForm.isAddWatermark" :style="switchStyle" />
<div class="settings-column"> </el-form-item>
<!-- Watermark Settings Section --> <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')">
<section class="settings-section"> <el-radio-group v-model="waterMarkForm.watermarkType">
<div class="section-header"> <el-radio value="text">
<el-icon><Picture /></el-icon> {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}
<h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISADDWM') }}</h3> </el-radio>
</div> <el-radio value="image">
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}
<div class="section-content"> </el-radio>
<el-form-item class="toggle-control"> </el-radio-group>
<el-switch v-model="waterMarkForm.isAddWatermark" :style="switchStyle" /> </el-form-item>
<span class="toggle-label">{{ waterMarkForm.isAddWatermark ? $T('ENABLE') : $T('DISABLE') }}</span> <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')">
</el-form-item> <el-switch v-model="waterMarkForm.isFullScreenWatermark" :style="switchStyle" />
</el-form-item>
<div v-show="waterMarkForm.isAddWatermark" class="subsection"> <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')">
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE')"> <el-input-number v-model="waterMarkForm.watermarkDegree" :step="1" />
<el-radio-group v-model="waterMarkForm.watermarkType" class="radio-group"> </el-form-item>
<el-radio value="text">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}</el-radio> <el-form-item
<el-radio value="image">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}</el-radio> v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
</el-radio-group> :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT')"
</el-form-item> >
<el-input v-model="waterMarkForm.watermarkText" />
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFULLSCREEN_WM')" class="toggle-control"> </el-form-item>
<el-switch v-model="waterMarkForm.isFullScreenWatermark" :style="switchStyle" /> <el-form-item
</el-form-item> v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
:label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT_FONT_PATH')"
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')"> >
<el-radio-group v-model="waterMarkForm.watermarkPosition" class="position-grid"> <el-input v-model="waterMarkForm.watermarkFontPath" />
<el-radio v-for="item in waterMarkPositionMap" :key="item[0]" :value="item[0]"> </el-form-item>
{{ item[1] }} <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')">
</el-radio> <el-input-number v-model="waterMarkForm.watermarkScaleRatio" :min="0" :max="1" :step="0.01" />
</el-radio-group> </el-form-item>
</el-form-item> <el-form-item
v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'text'"
<div class="form-row"> :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMCOLOR')"
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMDEGREE')"> >
<el-input-number v-model="waterMarkForm.watermarkDegree" :step="1" controls-position="right" /> <el-color-picker v-model="waterMarkForm.watermarkColor" show-alpha />
</el-form-item> </el-form-item>
<el-form-item
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMRATIO')"> v-show="waterMarkForm.isAddWatermark && waterMarkForm.watermarkType === 'image'"
<el-input-number :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPATH')"
v-model="waterMarkForm.watermarkScaleRatio" >
:min="0" <el-input v-model="waterMarkForm.watermarkImagePath" />
:max="1" </el-form-item>
:step="0.01" <el-form-item v-show="waterMarkForm.isAddWatermark" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPOSITION')">
controls-position="right" <el-radio-group v-model="waterMarkForm.watermarkPosition">
/> <el-radio v-for="item in waterMarkPositionMap" :key="item[0]" :value="item[0]">
</el-form-item> {{ item[1] }}
</div> </el-radio>
</el-radio-group>
<!-- Text Watermark Options --> </el-form-item>
<div v-show="waterMarkForm.watermarkType === 'text'" class="subsection variant-subsection"> <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISREMOVEEXIF')">
<h4 class="subsection-title">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_TEXT') }}</h4> <el-switch v-model="compressForm.isRemoveExif" :style="switchStyle" />
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMTEXT')"> </el-form-item>
<el-input v-model="waterMarkForm.watermarkText" /> <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_QUALITY')">
</el-form-item> <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_WMTEXT_FONT_PATH')"> <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT')">
<el-input v-model="waterMarkForm.watermarkFontPath" placeholder="/path/to/font.ttf" /> <el-switch v-model="compressForm.isConvert" :style="switchStyle" />
</el-form-item> </el-form-item>
<el-form-item v-show="compressForm.isConvert" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT')">
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMCOLOR')"> <el-select v-model="compressForm.convertFormat" :persistent="false" teleported>
<div class="color-picker-container"> <el-option v-for="item in availableFormat" :key="item" :label="item" :value="item" />
<el-color-picker v-model="waterMarkForm.watermarkColor" show-alpha /> </el-select>
<span class="color-value">{{ waterMarkForm.watermarkColor }}</span> </el-form-item>
</div> <el-form-item v-show="compressForm.isConvert" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')">
</el-form-item> <el-input
</div> v-model="formatConvertObj"
placeholder='{"jpg": "png", "png": "jpg"}'
<!-- Image Watermark Options --> type="textarea"
<div v-show="waterMarkForm.watermarkType === 'image'" class="subsection variant-subsection"> :autosize="{ minRows: 2, maxRows: 4 }"
<h4 class="subsection-title">{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_WMTYPE_IMAGE') }}</h4> />
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_WMPATH')"> </el-form-item>
<el-input v-model="waterMarkForm.watermarkImagePath" placeholder="/path/to/watermark.png" /> <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLIP')">
</el-form-item> <el-switch v-model="compressForm.isFlip" :style="switchStyle" />
</div> </el-form-item>
</div> <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISFLOP')">
</div> <el-switch v-model="compressForm.isFlop" :style="switchStyle" />
</section> </el-form-item>
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZE')">
<!-- Format Conversion Settings Section --> <el-switch v-model="compressForm.isReSize" :style="switchStyle" />
<section class="settings-section"> </el-form-item>
<div class="section-header"> <el-form-item v-show="compressForm.isReSize" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEWIDTH')">
<el-icon><Document /></el-icon> <el-input-number v-model="compressForm.reSizeWidth" :min="0" />
<h3>{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_ISCONVERT') }}</h3> </el-form-item>
</div> <el-form-item v-show="compressForm.isReSize" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEHEIGHT')">
<el-input-number v-model="compressForm.reSizeHeight" :min="0" />
<div class="section-content"> </el-form-item>
<el-form-item class="toggle-control"> <el-form-item
<el-switch v-model="compressForm.isConvert" :style="switchStyle" /> v-show="compressForm.isReSize && compressForm.reSizeHeight! > 0 && compressForm.reSizeWidth === 0"
<span class="toggle-label">{{ compressForm.isConvert ? $T('ENABLE') : $T('DISABLE') }}</span> :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_HEIGHT')"
</el-form-item> >
<el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
<div v-show="compressForm.isConvert" class="subsection"> </el-form-item>
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT')"> <el-form-item
<el-select v-model="compressForm.convertFormat" :persistent="false" teleported class="full-width"> v-show="compressForm.isReSize && compressForm.reSizeWidth! > 0 && compressForm.reSizeHeight === 0"
<el-option v-for="item in availableFormat" :key="item" :label="item" :value="item" /> :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_SKIPRESIZEOfSMALLIMG_WIDTH')"
</el-select> >
</el-form-item> <el-switch v-model="compressForm.skipReSizeOfSmallImg" :style="switchStyle" />
</el-form-item>
<el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_CONVERTFORMAT_SPECIFIC')"> <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISRESIZEBYPERCENT')">
<el-input <el-switch v-model="compressForm.isReSizeByPercent" :style="switchStyle" />
v-model="formatConvertObj" </el-form-item>
placeholder='{"jpg": "png", "png": "jpg"}' <el-form-item v-show="compressForm.isReSizeByPercent" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_RESIZEPERCENT')">
type="textarea" <el-input-number v-model="compressForm.reSizePercent" :min="0" />
:autosize="{ minRows: 2, maxRows: 4 }" </el-form-item>
class="code-input" <el-form-item :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ISROTATE')">
/> <el-switch v-model="compressForm.isRotate" :style="switchStyle" />
</el-form-item> </el-form-item>
</div> <el-form-item v-show="compressForm.isRotate" :label="$T('UPLOAD_PAGE_IMAGE_PROCESS_ROTATEDEGREE')">
</div> <el-input-number v-model="compressForm.rotateDegree" :step="1" />
</section> </el-form-item>
</div> <el-form-item>
<!-- 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"> <el-button type="primary" @click="handleSaveConfig">
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CONFIRM') }} {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CONFIRM') }}
</el-button> </el-button>
<el-button @click="closeDialog"> <el-button @click="closeDialog">
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CANCEL') }} {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_CANCEL') }}
</el-button> </el-button>
</div> </el-form-item>
</el-form> </el-form>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist' import { IBuildInCompressOptions, IBuildInWaterMarkOptions } from 'piclist'
import { onBeforeMount, reactive, ref, toRaw } from 'vue' 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 { T as $T } from '@/i18n/index'
import { getConfig, saveConfig } from '@/utils/dataSender' import { getConfig, saveConfig } from '@/utils/dataSender'
@@ -285,15 +142,15 @@ import { configPaths } from '#/utils/configPaths'
const imageProcessDialogVisible = defineModel<boolean>() const imageProcessDialogVisible = defineModel<boolean>()
const waterMarkPositionMap = new Map([ const waterMarkPositionMap = new Map([
['northwest', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP_LEFT')],
['north', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP')], ['north', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP')],
['northeast', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP_RIGHT')], ['northeast', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP_RIGHT')],
['west', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_LEFT')], ['southeast', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM_RIGHT')],
['centre', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_CENTER')],
['east', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_RIGHT')],
['southwest', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM_LEFT')],
['south', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM')], ['south', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM')],
['southeast', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM_RIGHT')] ['southwest', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_BOTTOM_LEFT')],
['northwest', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_TOP_LEFT')],
['west', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_LEFT')],
['east', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_RIGHT')],
['centre', $T('UPLOAD_PAGE_IMAGE_PROCESS_POSITION_CENTER')]
]) ])
const imageExtList = ['jpg', 'jpeg', 'png', 'webp', 'bmp', 'tiff', 'tif', 'svg', 'ico', 'avif', 'heif', 'heic'] const imageExtList = ['jpg', 'jpeg', 'png', 'webp', 'bmp', 'tiff', 'tif', 'svg', 'ico', 'avif', 'heif', 'heic']
const availableFormat = [ const availableFormat = [
@@ -405,233 +262,3 @@ onBeforeMount(async () => {
await initData() await initData()
}) })
</script> </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>
src/renderer/layouts/Main.vue
+81 -185
View File
@@ -4,20 +4,21 @@
<div class="fake-title-bar__title">PicList - {{ version }}</div> <div class="fake-title-bar__title">PicList - {{ version }}</div>
<div v-if="osGlobal !== 'darwin'" class="handle-bar"> <div v-if="osGlobal !== 'darwin'" class="handle-bar">
<el-icon <el-icon
class="control-icon always-on-top" class="minus"
:color="isAlwaysOnTop ? '#409EFF' : '#fff'" :color="isAlwaysOnTop ? '#409EFF' : '#fff'"
size="20" size="20"
style="margin-right: 10px"
@click="setAlwaysOnTop" @click="setAlwaysOnTop"
> >
<ArrowUpBold /> <ArrowUpBold />
</el-icon> </el-icon>
<el-icon class="control-icon minimize" color="#fff" size="20" @click="minimizeWindow"> <el-icon class="minus" color="#fff" size="20" style="margin-right: 10px" @click="minimizeWindow">
<SemiSelect /> <SemiSelect />
</el-icon> </el-icon>
<el-icon class="control-icon mini-window" color="#FFA500" size="20" @click="openMiniWindow"> <el-icon class="plus" color="orange" size="20" style="margin-right: 10px" @click="openMiniWindow">
<ArrowDownBold /> <ArrowDownBold />
</el-icon> </el-icon>
<el-icon class="control-icon close" color="#fff" size="20" @click="closeWindow"> <el-icon class="close" color="#fff" size="20" @click="closeWindow">
<CloseBold /> <CloseBold />
</el-icon> </el-icon>
</div> </div>
@@ -25,30 +26,38 @@
<el-progress <el-progress
v-if="isShowprogress" v-if="isShowprogress"
:percentage="progress" :percentage="progress"
:stroke-width="4" :stroke-width="7"
:text-inside="true" :text-inside="true"
:show-text="false" :show-text="false"
status="success" status="success"
class="progress-bar" class="progress-bar"
/> />
<el-row class="main-content"> <el-row style="padding-top: 22px" class="main-content">
<el-col class="side-bar-menu"> <el-col class="side-bar-menu">
<el-menu class="picgo-sidebar" :default-active="defaultActive" :unique-opened="true" @select="handleSelect"> <el-menu class="picgo-sidebar" :default-active="defaultActive" :unique-opened="true" @select="handleSelect">
<el-menu-item :index="routerConfig.UPLOAD_PAGE" class="side-menu-item"> <el-menu-item :index="routerConfig.UPLOAD_PAGE">
<el-icon class="menu-icon"><UploadFilled /></el-icon> <el-icon>
<UploadFilled />
</el-icon>
<span>{{ $T('UPLOAD_AREA') }}</span> <span>{{ $T('UPLOAD_AREA') }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item :index="routerConfig.MANAGE_LOGIN_PAGE" class="side-menu-item"> <el-menu-item :index="routerConfig.MANAGE_LOGIN_PAGE">
<el-icon class="menu-icon"><PieChart /></el-icon> <el-icon>
<PieChart />
</el-icon>
<span>{{ $T('MANAGE_PAGE') }}</span> <span>{{ $T('MANAGE_PAGE') }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item :index="routerConfig.GALLERY_PAGE" class="side-menu-item"> <el-menu-item :index="routerConfig.GALLERY_PAGE">
<el-icon class="menu-icon"><PictureFilled /></el-icon> <el-icon>
<PictureFilled />
</el-icon>
<span>{{ $T('GALLERY') }}</span> <span>{{ $T('GALLERY') }}</span>
</el-menu-item> </el-menu-item>
<el-sub-menu index="sub-menu" :show-timeout="0" :hide-timeout="0" :popper-offset="0" class="side-menu-sub"> <el-sub-menu index="sub-menu" :show-timeout="0" :hide-timeout="0" :popper-offset="0">
<template #title> <template #title>
<el-icon class="menu-icon"><Menu /></el-icon> <el-icon>
<Menu />
</el-icon>
<span>{{ $T('PICBEDS_SETTINGS') }}</span> <span>{{ $T('PICBEDS_SETTINGS') }}</span>
</template> </template>
<template v-for="item in picBedGlobal"> <template v-for="item in picBedGlobal">
@@ -56,32 +65,35 @@
v-if="item.visible" v-if="item.visible"
:key="item.type" :key="item.type"
:index="`${routerConfig.UPLOADER_CONFIG_PAGE}-${item.type}`" :index="`${routerConfig.UPLOADER_CONFIG_PAGE}-${item.type}`"
class="side-submenu-item"
> >
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</el-menu-item> </el-menu-item>
</template> </template>
</el-sub-menu> </el-sub-menu>
<el-menu-item :index="routerConfig.SETTING_PAGE" class="side-menu-item"> <el-menu-item :index="routerConfig.SETTING_PAGE">
<el-icon class="menu-icon"><Tools /></el-icon> <el-icon>
<Tools />
</el-icon>
<span>{{ $T('PICLIST_SETTINGS') }}</span> <span>{{ $T('PICLIST_SETTINGS') }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item :index="routerConfig.PLUGIN_PAGE" class="side-menu-item"> <el-menu-item :index="routerConfig.PLUGIN_PAGE">
<el-icon class="menu-icon"><Share /></el-icon> <el-icon>
<Share />
</el-icon>
<span>{{ $T('PLUGIN_SETTINGS') }}</span> <span>{{ $T('PLUGIN_SETTINGS') }}</span>
</el-menu-item> </el-menu-item>
<el-menu-item :index="routerConfig.DocumentPage" class="side-menu-item"> <el-menu-item :index="routerConfig.DocumentPage">
<el-icon class="menu-icon"><Link /></el-icon> <el-icon>
<Link />
</el-icon>
<span>{{ $T('MANUAL') }}</span> <span>{{ $T('MANUAL') }}</span>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</el-col>
<div class="info-window-container">
<el-icon class="info-window" @click="openMenu"> <el-icon class="info-window" @click="openMenu">
<InfoFilled /> <InfoFilled />
</el-icon> </el-icon>
</div> </el-col>
<el-col :span="21" :offset="3" class="main-wrapper"> <el-col :span="21" :offset="3" style="height: 100%" class="main-wrapper">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition name="picgo-fade" mode="out-in"> <transition name="picgo-fade" mode="out-in">
<keep-alive :include="keepAlivePages"> <keep-alive :include="keepAlivePages">
@@ -293,20 +305,13 @@ export default {
name: 'MainPage' name: 'MainPage'
} }
</script> </script>
<style lang="stylus"> <style lang="stylus">
$darwinBg = transparentify(#172426, #000, 0.7) $darwinBg = transparentify(#172426, #000, 0.7)
$menuActiveBg = rgba(64, 158, 255, 0.15)
$menuHoverBg = rgba(255, 255, 255, 0.08)
$borderRadius = 8px
$transitionDefault = all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
.setting-list-scroll .setting-list-scroll
height 800px height 800px
overflow-y auto overflow-y auto
overflow-x hidden overflow-x hidden
margin-right 0!important margin-right 0!important
.picgo-fade .picgo-fade
&-enter, &-enter,
&-leave, &-leave,
@@ -314,44 +319,14 @@ $transitionDefault = all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
opacity 0 opacity 0
&-enter-active, &-enter-active,
&-leave-active &-leave-active
transition all 200ms cubic-bezier(0.4, 0, 0.2, 1) transition all 150ms linear
.view-title .view-title
color #eee color #eee
font-size 20px font-size 20px
text-align center text-align center
margin 10px auto margin 10px auto
#main-page #main-page
height 100% height 100%
background linear-gradient(135deg, rgba(40, 44, 52, 0.85) 0%, rgba(30, 34, 42, 0.9) 100%)
display flex
flex-direction column
overflow hidden
.info-window-container
position fixed
bottom 4px
left 4px
z-index 50
width 40px
height 40px
.info-window
cursor pointer
color #878d99
padding 6px
background rgba(40, 44, 52, 0.5)
border-radius 50%
box-shadow 0 2px 8px rgba(0, 0, 0, 0.15)
transition $transitionDefault
&:hover
color #409EFF
background rgba(64, 158, 255, 0.15)
transform translateY(-2px)
box-shadow 0 4px 12px rgba(0, 0, 0, 0.25)
.qrcode-dialog .qrcode-dialog
.qrcode-container .qrcode-container
display flex display flex
@@ -360,26 +335,16 @@ $transitionDefault = all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
padding-top 10px padding-top 10px
.copy-picbed-config .copy-picbed-config
margin-left 10px margin-left 10px
transition $transitionDefault
&:hover
transform translateY(-2px)
box-shadow 0 4px 12px rgba(0, 0, 0, 0.2)
.fake-title-bar .fake-title-bar
-webkit-app-region drag -webkit-app-region drag
height h = 28px height h = 22px
width 100% width 100%
text-align center text-align center
color #eee color #eee
font-size 13px font-size 12px
font-weight 500
line-height h line-height h
position fixed position fixed
z-index 100 z-index 100
backdrop-filter blur(5px)
background rgba(30, 34, 42, 0.7)
box-shadow 0 1px 3px rgba(0, 0, 0, 0.2)
&.darwin &.darwin
background transparent background transparent
background-image linear-gradient( background-image linear-gradient(
@@ -391,167 +356,98 @@ $transitionDefault = all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
) )
.fake-title-bar__title .fake-title-bar__title
padding-left 167px padding-left 167px
.fake-title-bar__title
letter-spacing 0.5px
.handle-bar .handle-bar
position absolute position absolute
top 4px top 2px
right 8px right 4px
z-index 10000 z-index 10000
-webkit-app-region no-drag -webkit-app-region no-drag
display flex .el-icon
gap 12px
.control-icon
cursor pointer cursor pointer
font-size 16px font-size 16px
transition $transitionDefault margin-left 5px
border-radius 4px .el-icon.minus
padding 2px &:hover
color #409EFF
&.always-on-top .el-icon.close
&:hover &:hover
color #409EFF color #F15140
background rgba(64, 158, 255, 0.15) .el-icon.plus
&:hover
&.minimize color #69C282
&:hover
color #409EFF
background $menuHoverBg
&.close
&:hover
color #F15140
background rgba(241, 81, 64, 0.15)
&.mini-window
&:hover
color #FFC107
background rgba(255, 193, 7, 0.15)
.progress-bar
position fixed
top 28px
width 100%
z-index 90
transition opacity 0.3s ease
.main-wrapper .main-wrapper
&.darwin &.darwin
background $darwinBg background $darwinBg
padding 10px
border-radius $borderRadius
background rgba(30, 34, 42, 0.5)
.side-bar-menu .side-bar-menu
position fixed position fixed
height calc(100vh - 28px) height calc(100vh - 22px)
overflow-x hidden overflow-x hidden
overflow-y auto overflow-y auto
width 142px width 142px
padding-top 35px .info-window
padding-bottom 40px cursor pointer
transition $transitionDefault position fixed
background rgba(30, 34, 42, 0.5) bottom 4px
backdrop-filter blur(10px) left 4px
cursor poiter
&:hover color #878d99
width 145px transition .2s all ease-in-out
&:hover
color #409EFF
.el-menu .el-menu
border-right none border-right none
background transparent background transparent
width 142px width 142px
&-item &-item
color #eee color #eee
position relative position relative
border-radius $borderRadius
margin 4px 8px
height 40px
line-height 40px
transition $transitionDefault
&:focus, &:focus,
&:hover &:hover
color #fff color #fff
background $menuHoverBg background transparent
&.is-active &.is-active
color active-color = #409EFF color active-color = #409EFF
background $menuActiveBg &:before
font-weight 500 content ''
position absolute
.menu-icon width 1px
color active-color height 20px
right 0
.side-menu-item top 18px
padding-left 16px!important background active-color
.menu-icon
margin-right 8px
transition $transitionDefault
.el-sub-menu__title .el-sub-menu__title
color #eee color #eee
border-radius $borderRadius
margin 4px 8px
height 40px
line-height 40px
transition $transitionDefault
&:hover &:hover
background $menuHoverBg background transparent
span span
color #fff color #fff
.menu-icon
margin-right 8px
.el-sub-menu .el-sub-menu
.el-menu-item .el-menu-item
min-width 142px min-width 142px
&.is-active &.is-active
background $menuActiveBg &:before
top 16px
.side-submenu-item
margin-left 0!important
border-radius $borderRadius
padding-left 38px!important
.main-content .main-content
padding-top 28px padding-top 22px
position relative position relative
height calc(100vh - 28px) height calc(100vh - 22px)
z-index 10 z-index 10
.el-dialog__body .el-dialog__body
padding 20px padding 20px
.support .support
text-align center text-align center
&-title &-title
text-align center text-align center
color #878d99 color #878d99
.align-center .align-center
input input
text-align center text-align center
*::-webkit-scrollbar *::-webkit-scrollbar
width 4px width 2px
height 8px height 8px
*::-webkit-scrollbar-thumb *::-webkit-scrollbar-thumb
border-radius 10px border-radius 4px
background rgba(111, 111, 111, 0.5) background #6f6f6f
&:hover
background rgba(140, 140, 140, 0.7)
*::-webkit-scrollbar-track *::-webkit-scrollbar-track
background-color transparent background-color transparent
</style> </style>
src/renderer/pages/Gallery.vue
+54 -312
View File
@@ -1,27 +1,19 @@
<template> <template>
<div id="gallery-view" :style="handleBarActive ? 'height: 95%;' : 'height: 95%;'"> <div id="gallery-view" :style="handleBarActive ? 'height: 85%;' : 'height: 95%;'">
<div class="view-title"> <div class="view-title">
<div class="left-controls"> {{ $T('GALLERY') }} - {{ filterList.length }}
<span class="gallery-sync-delete"> <el-icon style="margin-left: 4px" class="cursor-pointer" @click="toggleHandleBar">
{{ $T('GALLERY_SYNC_DELETE') }} <CaretBottom v-show="!handleBarActive" />
<el-switch <CaretTop v-show="handleBarActive" />
v-model="deleteCloud" </el-icon>
:active-text="$T('SETTINGS_OPEN')" <span style="position: absolute; right: 0; top: 0; margin-right: 20px; font-size: 0.8em; color: #fff">
:inactive-text="$T('SETTINGS_CLOSE')" {{ $T('GALLERY_SYNC_DELETE') }}
@change="handleDeleteCloudFile" <el-switch
/> v-model="deleteCloud"
</span> :active-text="$T('SETTINGS_OPEN')"
</div> :inactive-text="$T('SETTINGS_CLOSE')"
@change="handleDeleteCloudFile"
<div class="title-content"> />
{{ $T('GALLERY') }} - {{ filterList.length }}
<el-icon class="cursor-pointer toggle-icon" @click="toggleHandleBar">
<CaretBottom v-show="!handleBarActive" />
<CaretTop v-show="handleBarActive" />
</el-icon>
</div>
<div class="right-controls">
<el-button type="primary" :link="true" @click="refreshPage"> <el-button type="primary" :link="true" @click="refreshPage">
<el-tooltip <el-tooltip
class="item" class="item"
@@ -31,12 +23,12 @@
:persistent="false" :persistent="false"
teleported teleported
> >
<el-icon size="22"> <el-icon size="25" style="cursor: pointer; margin-left: 10px">
<Refresh /> <Refresh />
</el-icon> </el-icon>
</el-tooltip> </el-tooltip>
</el-button> </el-button>
</div> </span>
</div> </div>
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<el-row v-show="handleBarActive"> <el-row v-show="handleBarActive">
@@ -976,96 +968,41 @@ export default {
display none display none
&__Counter &__Counter
margin-top 20px margin-top 20px
font-weight 500
color #f5f5f7
.view-title .view-title
color #f5f5f7 color #eee
font-size 22px font-size 20px
text-align center text-align center
margin 16px auto 22px margin 10px auto
font-weight 500 .sub-title
position relative
display flex
justify-content space-between
align-items center
padding 0 20px
.title-content
display flex
align-items center
justify-content center
flex-grow 1
.toggle-icon
margin-left 8px
transition all .3s cubic-bezier(0.4, 0, 0.2, 1)
&:hover
color #49B1F5
transform scale(1.1)
.left-controls, .right-controls
min-width 200px
display flex
align-items center
.left-controls
justify-content flex-start
.right-controls
justify-content flex-end
.gallery-sync-delete
display flex
align-items center
font-size 14px font-size 14px
background rgba(48, 48, 48, 0.7) .el-icon-caret-bottom
padding 6px 12px cursor: pointer
border-radius 8px transition all .2s ease-in-out
backdrop-filter blur(5px) &.active
box-shadow 0 2px 8px rgba(0, 0, 0, 0.15) transform: rotate(180deg)
.el-switch
margin-left 10px
#gallery-view #gallery-view
position absolute position absolute
left 142px left 142px
right 0 right 0
height 95% height 85%
transition all .3s cubic-bezier(0.4, 0, 0.2, 1)
.cursor-pointer .cursor-pointer
cursor pointer cursor pointer
.item-base .item-base
background #363636 background #2E2E2E
text-align center text-align center
padding 5px 0
cursor pointer cursor pointer
font-size 13px font-size 13px
transition all .3s cubic-bezier(0.4, 0, 0.2, 1) transition all .2s ease-in-out
height 28px height: 28px
box-sizing border-box box-sizing: border-box
border-radius 16px
font-weight 500
box-shadow 0 2px 8px rgba(0, 0, 0, 0.15)
display flex
align-items center
justify-content center
width 100%
padding 0 10px
&.copy &.copy
cursor not-allowed cursor not-allowed
background #49b1f5 background #49B1F5
&.active &.active
cursor pointer cursor pointer
background #1B9EF3 background #1B9EF3
color #fff color #fff
box-shadow 0 4px 12px rgba(27, 158, 243, 0.3)
transform translateY(-1px)
&.delete &.delete
cursor not-allowed cursor not-allowed
background #F47466 background #F47466
@@ -1073,9 +1010,6 @@ export default {
cursor pointer cursor pointer
background #F15140 background #F15140
color #fff color #fff
box-shadow 0 4px 12px rgba(241, 81, 64, 0.3)
transform translateY(-1px)
&.all-pick &.all-pick
cursor not-allowed cursor not-allowed
background #69C282 background #69C282
@@ -1083,60 +1017,37 @@ export default {
cursor pointer cursor pointer
background #44B363 background #44B363
color #fff color #fff
box-shadow 0 4px 12px rgba(68, 179, 99, 0.3)
transform translateY(-1px)
.handle-bar
.item-base
min-width 80px
white-space nowrap
overflow hidden
text-overflow ellipsis
.el-col:nth-child(n+4):nth-child(-n+7)
padding-left: 6px
padding-right: 6px
#gallery-view #gallery-view
.round .round
border-radius 16px border-radius 14px
.pull-right .pull-right
float right float right
.gallery-list .gallery-list
height calc(100% - 60px) height 100%
box-sizing border-box box-sizing border-box
padding 12px 0 padding 8px 0
overflow-y auto overflow-y auto
overflow-x hidden overflow-x auto
position absolute position absolute
top 60px top: 38px
transition all .3s cubic-bezier(0.4, 0, 0.2, 1) transition all .2s ease-in-out .1s
width 100% width 100%
&.small &.small
height calc(100% - 180px) height: 100%
top 180px top: 113px
margin-top 0
bottom 0 // Ensure it extends to the bottom
&__img &__img
// height 150px
position relative position relative
margin-bottom 16px margin-bottom 8px
&__item &__item
width 100% width 100%
height 130px height 120px
transition all .3s cubic-bezier(0.4, 0, 0.2, 1) transition all .2s ease-in-out
cursor pointer cursor pointer
margin-bottom 8px margin-bottom 4px
overflow hidden overflow hidden
display flex display flex
border-radius 8px margin-bottom 6px
box-shadow 0 3px 12px rgba(0, 0, 0, 0.15)
background #2a2a2a
&-fake &-fake
position absolute position absolute
top 0 top 0
@@ -1144,209 +1055,40 @@ export default {
opacity 0 opacity 0
width 100% width 100%
z-index -1 z-index -1
&:hover &:hover
transform scale(1.05) transform scale(1.1)
box-shadow 0 6px 16px rgba(0, 0, 0, 0.2)
&-img &-img
width 100% width 100%
object-fit contain object-fit contain
padding 4px
&__tool-panel &__tool-panel
color #f0f0f0 color #ddd
margin 0 2px 8px 2px margin-bottom 4px
display flex display flex
align-items center
background rgba(42, 42, 42, 0.7)
border-radius 6px
padding 4px 8px
backdrop-filter blur(5px)
box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)
.el-checkbox .el-checkbox
height 16px height 16px
i i
cursor pointer cursor pointer
transition all .2s ease-in-out transition all .2s ease-in-out
margin-right 8px margin-right 4px
font-size 16px
&.document &.document
&:hover &:hover
color #49B1F5 color #49B1F5
transform scale(1.2)
&.edit &.edit
&:hover &:hover
color #69C282 color #69C282
transform scale(1.2)
&.delete &.delete
&:hover &:hover
color #F15140 color #F15140
transform scale(1.2)
&__file-name &__file-name
overflow hidden overflow hidden
text-overflow ellipsis text-overflow ellipsis
white-space nowrap white-space nowrap
color #f0f0f0 color #ddd
font-size 14px font-size 14px
margin-bottom 6px margin-bottom 4px
text-align center text-align center
align-self center align-self center
font-weight 500
padding 0 4px
.handle-bar .handle-bar
color #f0f0f0 color #ddd
margin-bottom 16px margin-bottom 10px
background rgba(48, 48, 48, 0.7)
border-radius 10px
padding 8px 12px 10px
backdrop-filter blur(10px)
box-shadow 0 4px 16px rgba(0, 0, 0, 0.2)
position relative
z-index 2
align-items center
.el-row
margin-bottom 0 !important
.el-col
display flex
align-items center
min-height 28px
padding-top: 2px
padding-bottom: 2px
.el-input, .el-select, .el-date-picker
.el-input__wrapper
padding 0 8px
line-height 1.4
height 28px
.el-button
height 28px
padding 6px 12px
.item-base
height 28px
display flex
align-items center
justify-content center
padding 0
&:last-child
margin-bottom 30px
&:after
content ""
position absolute
left 0
right 0
bottom -20px
height 8px
.handle-bar + .handle-bar
margin-top 0
margin-bottom 14px
padding-top 0
border-top none
position relative
&:before
content ""
position absolute
left 10%
right 10%
top -6px
height 1px
background rgba(255, 255, 255, 0.1)
border-radius 1px
.handle-bar-container
position relative
&:after
content ""
position absolute
left 5%
right 5%
bottom -10px
height 2px
background linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent)
border-radius 2px
z-index 2
.el-select,
.el-input,
.el-date-editor
.el-input__wrapper
background rgba(60, 60, 60, 0.7) !important
border-radius 8px !important
box-shadow none !important
border 1px solid rgba(100, 100, 100, 0.3) !important
&:hover, &:focus
border-color rgba(73, 177, 245, 0.5) !important
box-shadow 0 0 0 1px rgba(73, 177, 245, 0.1) !important
.el-button
border-radius 8px
transition all .3s cubic-bezier(0.4, 0, 0.2, 1)
&:hover
transform translateY(-1px)
box-shadow 0 4px 12px rgba(0, 0, 0, 0.15)
.el-dialog
border-radius 12px
overflow hidden
box-shadow 0 20px 40px rgba(0, 0, 0, 0.3)
.el-dialog__header
background #363636
margin 0
padding 16px 20px
.el-dialog__body
padding 24px
.el-dialog__footer
padding 16px 20px
background #2a2a2a
::-webkit-scrollbar
width 8px
height 8px
::-webkit-scrollbar-track
background rgba(40, 40, 40, 0.8)
border-radius 4px
::-webkit-scrollbar-thumb
background rgba(120, 120, 120, 0.8)
border-radius 4px
&:hover
background rgba(140, 140, 140, 0.8)
// Ensure transitions are smooth for the gallery area adjusting to handle bar visibility
.el-zoom-in-top-enter-active,
.el-zoom-in-top-leave-active
transition all .3s cubic-bezier(0.4, 0, 0.2, 1)
position relative
z-index 3
.el-zoom-in-top-enter-from,
.el-zoom-in-top-leave-to
opacity 0
transform translateY(-20px)
// Optimize the transition when toggling the handle bar
.gallery-list
transition all .35s cubic-bezier(0.4, 0, 0.2, 1) 0.05s // Slight delay to allow handle bar to animate first
</style> </style>
src/renderer/pages/Plugin.vue
+239 -374
View File
@@ -1,144 +1,122 @@
<template> <template>
<div id="plugin-view"> <div id="plugin-view">
<div class="view-header"> <div class="view-title">
<div class="view-title"> {{ $T('PLUGIN_SETTINGS') }} -
<span>{{ $T('PLUGIN_SETTINGS') }}</span> <el-tooltip :content="pluginListToolTip" placement="right" :persistent="false" teleported>
<div class="view-actions"> <el-icon class="el-icon-goods" @click="goAwesomeList">
<el-tooltip :content="pluginListToolTip" placement="top" :persistent="false" teleported> <Goods />
<el-button class="action-button" circle @click="goAwesomeList"> </el-icon>
<el-icon><Goods /></el-icon> </el-tooltip>
</el-button> <el-tooltip :content="updateAllToolTip" placement="left" :persistent="false" teleported>
</el-tooltip> <el-icon class="el-icon-update" @click="handleUpdateAllPlugin">
<el-tooltip :content="updateAllToolTip" placement="top" :persistent="false" teleported> <Refresh />
<el-button class="action-button" circle @click="handleUpdateAllPlugin"> </el-icon>
<el-icon><Refresh /></el-icon> </el-tooltip>
</el-button> <el-tooltip :content="importLocalPluginToolTip" placement="left">
</el-tooltip> <el-icon class="el-icon-download" :persistent="false" teleported @click="handleImportLocalPlugin">
<el-tooltip :content="importLocalPluginToolTip" placement="top" :persistent="false" teleported> <Download />
<el-button class="action-button" circle @click="handleImportLocalPlugin"> </el-icon>
<el-icon><Download /></el-icon> </el-tooltip>
</el-button>
</el-tooltip>
</div>
</div>
<div class="search-bar">
<el-input v-model="searchText" :placeholder="$T('PLUGIN_SEARCH_PLACEHOLDER')" size="large" class="search-input">
<template #prefix>
<el-icon class="search-icon"><Search /></el-icon>
</template>
<template #suffix>
<el-icon v-if="searchText" class="clear-icon" @click="cleanSearch">
<Close />
</el-icon>
</template>
</el-input>
</div>
</div> </div>
<el-row class="handle-bar" :class="{ 'cut-width': pluginList.length > 6 }">
<div id="pluginList" v-loading="loading" class="plugin-list" element-loading-text="Loading..."> <el-input v-model="searchText" :placeholder="$T('PLUGIN_SEARCH_PLACEHOLDER')" size="small">
<el-row :gutter="16"> <template #suffix>
<el-col <el-icon class="el-input__icon" style="cursor: pointer" @click="cleanSearch">
v-for="item in pluginList" <close />
:key="item.fullName" </el-icon>
class="plugin-item__container" </template>
:xs="24" </el-input>
:sm="12" </el-row>
:md="8" <el-row id="pluginList" v-loading="loading" :gutter="10" class="plugin-list">
:lg="8" <el-col
:xl="6" v-for="item in pluginList"
> :key="item.fullName"
<div class="plugin-card" :class="{ disabled: !item.enabled, darwin: osGlobal === 'darwin' }"> class="plugin-item__container"
<div v-if="!item.gui" class="cli-only-badge">CLI</div> :xs="24"
<div class="plugin-header"> :sm="pluginList.length === 1 ? 24 : 12"
<img class="plugin-logo" :src="item.logo" :onerror="defaultLogo" /> :md="pluginList.length === 1 ? 24 : 12"
<div class="plugin-title" @click="openHomepage(item.homepage)"> :lg="pluginList.length === 1 ? 24 : 12"
<div class="plugin-name"> :xl="pluginList.length === 1 ? 24 : 12"
{{ item.name }} >
<el-tag <div class="plugin-item" :class="{ darwin: osGlobal === 'darwin' }">
v-if="latestVersionMap[item.fullName] && latestVersionMap[item.fullName] !== item.version" <div v-if="!item.gui" class="cli-only-badge" title="CLI only">CLI</div>
type="success" <img class="plugin-item__logo" :src="item.logo" :onerror="defaultLogo" />
size="small" <div class="plugin-item__content" :class="{ disabled: !item.enabled }">
effect="dark" <div class="plugin-item__name" @click="openHomepage(item.homepage)">
class="version-tag" {{ item.name }} <small>{{ ' ' + item.version }}</small> &nbsp;
> <!-- 升级提示 -->
new <el-tag
</el-tag> v-if="latestVersionMap[item.fullName] && latestVersionMap[item.fullName] !== item.version"
</div> type="success"
<div class="plugin-version">v{{ item.version }}</div> size="small"
</div> round
effect="plain"
>
new
</el-tag>
</div> </div>
<div class="plugin-item__desc" :title="item.description">
<div class="plugin-description" :title="item.description">
{{ item.description }} {{ item.description }}
</div> </div>
<div class="plugin-item__info-bar">
<div class="plugin-footer"> <span class="plugin-item__author">
<div class="plugin-author">
<el-icon><User /></el-icon>
{{ item.author.replace(/<.*>/, '') }} {{ item.author.replace(/<.*>/, '') }}
</div> </span>
<span class="plugin-item__config">
<div class="plugin-actions">
<template v-if="searchText"> <template v-if="searchText">
<template v-if="!item.hasInstall"> <template v-if="!item.hasInstall">
<el-button <span v-if="!item.ing" class="config-button install" @click="installPlugin(item)">
v-if="!item.ing"
type="primary"
size="small"
:loading="item.ing"
@click="installPlugin(item)"
>
{{ $T('PLUGIN_INSTALL') }} {{ $T('PLUGIN_INSTALL') }}
</el-button> </span>
<el-button v-else type="info" size="small" loading> <span v-else-if="item.ing" class="config-button ing">
{{ $T('PLUGIN_INSTALLING') }} {{ $T('PLUGIN_INSTALLING') }}
</el-button> </span>
</template> </template>
<el-button v-else type="success" size="small" disabled> <span v-else class="config-button ing">
{{ $T('PLUGIN_INSTALLED') }} {{ $T('PLUGIN_INSTALLED') }}
</el-button> </span>
</template> </template>
<template v-else> <template v-else>
<el-button v-if="item.ing" type="info" size="small" loading> <span v-if="item.ing" class="config-button ing">
{{ $T('PLUGIN_DOING_SOMETHING') }} {{ $T('PLUGIN_DOING_SOMETHING') }}
</el-button> </span>
<template v-else> <template v-else>
<el-button v-if="item.enabled" type="primary" size="small" circle @click="buildContextMenu(item)"> <el-icon v-if="item.enabled" class="el-icon-setting" @click="buildContextMenu(item)">
<el-icon><Tools /></el-icon> <Tools />
</el-button> </el-icon>
<el-button v-else type="danger" size="small" circle @click="buildContextMenu(item)"> <el-icon v-else class="el-icon-remove-outline" @click="buildContextMenu(item)">
<el-icon><Remove /></el-icon> <Remove />
</el-button> </el-icon>
</template> </template>
</template> </template>
</div> </span>
</div> </div>
</div> </div>
</el-col> </div>
</el-row> </el-col>
</div> </el-row>
<el-row v-show="needReload" class="reload-mask" :class="{ 'cut-width': pluginList.length > 6 }" justify="center">
<div v-show="needReload" class="reload-mask"> <el-button type="primary" size="small" round @click="reloadApp">
<el-button type="primary" size="large" @click="reloadApp">
<el-icon class="reload-icon"><Refresh /></el-icon>
{{ $T('TIPS_NEED_RELOAD') }} {{ $T('TIPS_NEED_RELOAD') }}
</el-button> </el-button>
</div> </el-row>
<el-dialog <el-dialog
v-model="dialogVisible" v-model="dialogVisible"
:modal-append-to-body="false" :modal-append-to-body="false"
:title="$T('CONFIG_THING', { c: configName })" :title="
$T('CONFIG_THING', {
c: configName
})
"
width="70%" width="70%"
class="config-dialog"
append-to-body append-to-body
> >
<config-form :id="configName" ref="$configForm" :config="config" :type="currentType" color-mode="white" /> <config-form :id="configName" ref="$configForm" :config="config" :type="currentType" color-mode="white" />
<template #footer> <template #footer>
<el-button @click="dialogVisible = false"> <el-button round @click="dialogVisible = false">
{{ $T('CANCEL') }} {{ $T('CANCEL') }}
</el-button> </el-button>
<el-button type="primary" @click="handleConfirmConfig"> <el-button type="primary" round @click="handleConfirmConfig">
{{ $T('CONFIRM') }} {{ $T('CONFIRM') }}
</el-button> </el-button>
</template> </template>
@@ -151,7 +129,7 @@ import axios from 'axios'
import { ipcRenderer, IpcRendererEvent } from 'electron' import { ipcRenderer, IpcRendererEvent } from 'electron'
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from 'element-plus'
import { debounce, DebouncedFunc } from 'lodash' import { debounce, DebouncedFunc } from 'lodash'
import { Close, Download, Refresh, Goods, Remove, Tools, Search, User } from '@element-plus/icons-vue' import { Close, Download, Refresh, Goods, Remove, Tools } from '@element-plus/icons-vue'
import { computed, ref, onBeforeMount, onBeforeUnmount, watch, onMounted, reactive, toRaw } from 'vue' import { computed, ref, onBeforeMount, onBeforeUnmount, watch, onMounted, reactive, toRaw } from 'vue'
import ConfigForm from '@/components/ConfigFormForPlugin.vue' import ConfigForm from '@/components/ConfigFormForPlugin.vue'
@@ -331,8 +309,7 @@ async function buildContextMenu(plugin: IPicGoPlugin) {
function handleResize() { function handleResize() {
const myDiv = document.getElementById('pluginList') as HTMLElement const myDiv = document.getElementById('pluginList') as HTMLElement
const windowHeight = window.innerHeight const windowHeight = window.innerHeight
const headerHeight = 120 // Adjusted for new header layout const newHeight = windowHeight * 0.75
const newHeight = windowHeight - headerHeight - 30
myDiv.style.height = newHeight + 'px' myDiv.style.height = newHeight + 'px'
} }
@@ -515,283 +492,171 @@ export default {
} }
</script> </script>
<style lang="stylus"> <style lang="stylus">
$primaryColor = #409EFF $darwinBg = #172426
$dangerColor = #F56C6C
$successColor = #67C23A
$warningColor = #E6A23C
$infoColor = #909399
$textColor = #FFFFFF
$subtextColor = #E8EAED
$disabledColor = #A0A0A0
$cardBg = rgba(55, 60, 70, 0.55)
$headerBg = rgba(35, 40, 50, 0.9)
$hoverBg = rgba(65, 70, 85, 0.9)
$borderRadius = 8px
$transitionEase = all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
$boxShadow = 0 4px 12px rgba(0, 0, 0, 0.2)
$hoverShadow = 0 8px 16px rgba(0, 0, 0, 0.3)
#plugin-view #plugin-view
position absolute position absolute
left 142px left 142px
right 0 right 0
height 100% .el-loading-mask
padding 0 16px background-color rgba(0, 0, 0, 0.8)
box-sizing border-box
overflow hidden
color $textColor
.view-header
position sticky
top 0
z-index 90
padding 16px 0
background linear-gradient(to bottom, rgba(30, 34, 42, 0.95), rgba(30, 34, 42, 0.85))
backdrop-filter blur(8px)
border-bottom 1px solid rgba(255, 255, 255, 0.1)
.view-title
display flex
justify-content space-between
align-items center
margin-bottom 16px
font-size 24px
font-weight 600
span
flex 1
.view-actions
display flex
gap 8px
.action-button
background rgba(255, 255, 255, 0.1)
border none
color $textColor
transition $transitionEase
&:hover
background rgba(255, 255, 255, 0.2)
transform translateY(-2px)
.search-bar
margin-bottom 8px
.search-input
.el-input__wrapper
background rgba(255, 255, 255, 0.1)
border-radius $borderRadius
border none
box-shadow none !important
transition $transitionEase
&:hover, &:focus-within
background rgba(255, 255, 255, 0.15)
.el-input__inner
color $textColor
.search-icon
color $disabledColor
.clear-icon
color $disabledColor
cursor pointer
transition $transitionEase
&:hover
color $textColor
.plugin-list .plugin-list
height calc(100vh - 175px) align-content flex-start
overflow-y auto height: 600px;
overflow-x hidden box-sizing: border-box;
padding 16px 0 // Increased padding from 8px to 16px padding: 8px 15px;
scroll-behavior smooth overflow-y: auto;
overflow-x: hidden;
.el-row position: absolute;
margin-bottom 0 !important // Ensure el-row doesn't add its own margins top: 70px;
left: 5px;
transition: all 0.2s ease-in-out 0.1s;
width: 100%
.el-loading-mask .el-loading-mask
background-color rgba(0, 0, 0, 0.8) left: 20px
backdrop-filter blur(4px) width: calc(100% - 40px)
.view-title
.plugin-item__container color #eee
margin-bottom 24px // Increased from 16px to provide more space between rows font-size 20px
text-align center
.plugin-card margin 10px auto
background $cardBg position relative
border-radius $borderRadius i.el-icon-goods
padding 16px margin-left 4px
min-height 220px font-size 20px
box-shadow $boxShadow vertical-align middle
transition $transitionEase cursor pointer
display flex transition color .2s ease-in-out
flex-direction column
position relative
overflow hidden
border 1px solid rgba(255, 255, 255, 0.1) // Added subtle border
&:hover &:hover
transform translateY(-3px) color #49B1F5
box-shadow $hoverShadow i.el-icon-update
background $hoverBg position absolute
border-color rgba(255, 255, 255, 0.2) // Brighter border on hover right 35px
top 8px
&.disabled font-size 20px
opacity 0.7 vertical-align middle
cursor pointer
&:before transition color .2s ease-in-out
content "" &:hover
position absolute color #49B1F5
top 0 i.el-icon-download
left 0 position absolute
right 0 right 5px
bottom 0 top 8px
background rgba(0, 0, 0, 0.3) font-size 20px
z-index 1 vertical-align middle
pointer-events none cursor pointer
transition color .2s ease-in-out
&:hover
color #49B1F5
.handle-bar
margin-bottom 20px
&.cut-width
padding-right: 8px
.el-input__inner
border-radius 0
.plugin-item
box-sizing border-box
height 80px
background #444
padding 8px
user-select text
transition all .2s ease-in-out
position relative
&__container
height 80px
margin-bottom 10px
.cli-only-badge .cli-only-badge
position absolute position absolute
right 0 right 0px
top 0 top 0
font-size 11px font-size 12px
font-weight 600 padding 3px 8px
padding 4px 10px background #49B1F5
background $warningColor color #eee
color #fff &.darwin
z-index 5 background transparentify($darwinBg, #000, 0.75)
border-bottom-left-radius $borderRadius
.plugin-header
display flex
align-items center
margin-bottom 12px
.plugin-logo
width 48px
height 48px
border-radius 12px
object-fit cover
background rgba(0, 0, 0, 0.2)
box-shadow 0 2px 6px rgba(0, 0, 0, 0.2)
.plugin-title
margin-left 12px
cursor pointer
transition $transitionEase
&:hover &:hover
color $primaryColor background transparentify($darwinBg, #000, 0.85)
&:hover
.plugin-name background #333
font-size 16px &__logo
font-weight 600 width 64px
display flex height 64px
align-items center float left
max-width 200px &__content
overflow hidden float left
text-overflow ellipsis width calc(100% - 72px)
white-space nowrap height 64px
color #ddd
.version-tag margin-left 8px
margin-left 8px
font-size 10px
height 18px
line-height 1
padding 2px 6px
border-radius 10px
.plugin-version
font-size 12px
color $disabledColor
margin-top 2px
.plugin-description
flex 1
font-size 14px
line-height 1.5
margin-bottom 16px
display -webkit-box
-webkit-line-clamp 3
-webkit-box-orient vertical
overflow hidden
color rgba(255, 255, 255, 0.95)
font-weight 400
.plugin-footer
display flex
justify-content space-between
align-items center
margin-top auto
padding-top 12px
border-top 1px solid rgba(255, 255, 255, 0.1)
.plugin-author
font-size 13px
color $disabledColor
display flex display flex
align-items center flex-direction column
max-width 60% justify-content space-between
&.disabled
color #aaa
&__name
font-size 16px
height 22px
line-height 22px
font-weight 600
cursor pointer
text-overflow ellipsis
white-space nowrap
overflow hidden
transition all .2s ease-in-out
&:hover
color: #1B9EF3
&__desc
font-size 14px
height 21px
line-height 21px
overflow hidden overflow hidden
text-overflow ellipsis text-overflow ellipsis
white-space nowrap white-space nowrap
&__info-bar
.el-icon font-size 14px
margin-right 6px height 21px
font-size 14px line-height 28px
position relative
.plugin-actions &__author
display flex overflow hidden
gap 8px text-overflow ellipsis
white-space nowrap
&__config
float right
font-size 16px
cursor pointer
transition all .2s ease-in-out
&:hover
color: #1B9EF3
.config-button
font-size 12px
color #ddd
background #222
padding 1px 8px
height 18px
line-height 18px
text-align center
position absolute
top 4px
right 20px
transition all .2s ease-in-out
&.reload
right 0px
&.ing
right 0px
&.install
right 0px
&:hover
background: #1B9EF3
color #fff
.reload-mask .reload-mask
position fixed position absolute
bottom 0 width calc(100% - 40px)
left 142px bottom -320px
right 0 text-align center
padding 16px background rgba(0,0,0,0.4)
background rgba(0, 0, 0, 0.7) padding 10px 0
display flex &.cut-width
justify-content center width calc(100% - 48px)
align-items center
backdrop-filter blur(8px)
z-index 100
box-shadow 0 -2px 10px rgba(0, 0, 0, 0.3)
animation slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1)
.reload-icon
margin-right 8px
.config-dialog
.el-dialog__header
border-bottom 1px solid rgba(255, 255, 255, 0.1)
padding-bottom 16px
.el-dialog__footer
border-top 1px solid rgba(255, 255, 255, 0.1)
padding-top 16px
@keyframes slideUp
from
transform translateY(100%)
to
transform translateY(0)
// Scrollbar styling
*::-webkit-scrollbar
width 6px
height 6px
*::-webkit-scrollbar-thumb
border-radius 10px
background rgba(255, 255, 255, 0.2)
&:hover
background rgba(255, 255, 255, 0.3)
*::-webkit-scrollbar-track
background-color transparent
</style> </style>
src/renderer/pages/Upload.vue
+186 -481
View File
@@ -1,108 +1,99 @@
<template> <template>
<div id="upload-view" class="upload-container"> <div id="upload-view">
<div class="container-inner"> <el-row :gutter="16" align="middle">
<div class="view-title"> <el-col :span="24">
<el-tooltip placement="top" effect="light" :content="$T('UPLOAD_VIEW_HINT')" :persistent="false" teleported> <div class="view-title">
<span id="upload-view-title" @click="handlePicBedNameClick(picBedName, picBedConfigName)"> <el-tooltip placement="top" effect="light" :content="$T('UPLOAD_VIEW_HINT')" :persistent="false" teleported>
{{ picBedName }} - {{ picBedConfigName || 'Default' }} <span id="upload-view-title" @click="handlePicBedNameClick(picBedName, picBedConfigName)">
</span> {{ picBedName }} - {{ picBedConfigName || 'Default' }}
</el-tooltip> </span>
<el-button class="icon-button" type="info" size="small" circle @click="handleChangePicBed"> </el-tooltip>
<el-icon><CaretBottom /></el-icon> <el-icon style="cursor: pointer; margin-left: 4px" @click="handleChangePicBed">
</el-button> <CaretBottom />
<el-button type="primary" round size="small" class="quick-upload" @click="handleImageProcess"> </el-icon>
<el-icon><Edit /></el-icon> <el-button
{{ $T('UPLOAD_PAGE_IMAGE_PROCESS_NAME') }} type="primary"
</el-button> round
</div> size="small"
class="quick-upload"
<div style="margin-left: 6px"
id="upload-area" @click="handleImageProcess"
class="upload-area" >
:class="{ 'is-dragover': dragover }" {{ $T('UPLOAD_PAGE_IMAGE_PROCESS_NAME') }}
@drop.prevent="onDrop" </el-button>
@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>
</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> </div>
</div> <div
id="upload-area"
<div class="upload-options"> :class="{ 'is-dragover': dragover }"
<div class="option-card link-format-card"> @drop.prevent="onDrop"
<div class="option-header"> @dragover.prevent="dragover = true"
<div class="option-label"> @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>
<input id="file-uploader" type="file" multiple @change="onChange" />
</div>
</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">
{{ $T('LINK_FORMAT') }} {{ $T('LINK_FORMAT') }}
</div> </div>
<el-switch <el-radio-group v-model="pasteStyle" size="small" @change="handlePasteStyleChange">
v-model="useShortUrl" <el-radio-button v-for="(item, key) in pasteFormatList" :key="key" :value="key" :title="item">
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 }} {{ key }}
</el-radio-button> </el-radio-button>
</el-radio-group> </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>
</div> <div class="el-col-8">
<div class="paste-style__text">
<div class="option-card quick-upload-card"> {{ $T('QUICK_UPLOAD') }}
<div class="option-label"> </div>
{{ $T('QUICK_UPLOAD') }} <el-button
</div> type="primary"
<div class="option-content quick-upload-content"> round
<el-button type="primary" class="quick-upload-btn" @click="uploadClipboardFiles"> size="small"
<el-icon><Picture /></el-icon> class="quick-upload"
style="width: 50%"
@click="uploadClipboardFiles"
>
{{ $T('CLIPBOARD_PICTURE') }} {{ $T('CLIPBOARD_PICTURE') }}
</el-button> </el-button>
<el-button type="primary" class="quick-upload-btn" @click="uploadURLFiles"> <el-button
<el-icon><Link /></el-icon> type="primary"
round
size="small"
class="quick-upload"
style="width: 46%; margin-left: 6px"
@click="uploadURLFiles"
>
URL URL
</el-button> </el-button>
</div> </div>
</div> </div>
</div> </el-col>
</div> </el-row>
<el-dialog <el-dialog
v-model="imageProcessDialogVisible" v-model="imageProcessDialogVisible"
:title="$T('UPLOAD_PAGE_IMAGE_PROCESS_DIALOG_TITLE')" :title="$T('UPLOAD_PAGE_IMAGE_PROCESS_DIALOG_TITLE')"
@@ -119,11 +110,10 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ipcRenderer, IpcRendererEvent } from 'electron' import { ipcRenderer, IpcRendererEvent } from 'electron'
import { ElMessage as $message, ElSwitch } from 'element-plus' import { ElMessage as $message } from 'element-plus'
import { UploadFilled, CaretBottom, Picture, Link, Edit } from '@element-plus/icons-vue' import { UploadFilled, CaretBottom } from '@element-plus/icons-vue'
import { ref, onBeforeMount, onBeforeUnmount, watch } from 'vue' import { ref, onBeforeMount, onBeforeUnmount, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useDebounceFn, useThrottleFn } from '@vueuse/core'
import ImageProcessSetting from '@/components/ImageProcessSetting.vue' import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
import { T as $T } from '@/i18n' import { T as $T } from '@/i18n'
@@ -142,7 +132,6 @@ import { useDragEventListeners } from '@/utils/drag'
useDragEventListeners() useDragEventListeners()
const $router = useRouter() const $router = useRouter()
// State variables
const imageProcessDialogVisible = ref(false) const imageProcessDialogVisible = ref(false)
const useShortUrl = ref(false) const useShortUrl = ref(false)
const dragover = ref(false) const dragover = ref(false)
@@ -165,36 +154,32 @@ watch(picBedGlobal, () => {
getDefaultPicBed() getDefaultPicBed()
}) })
watch(progress, onProgressChange) onBeforeMount(() => {
updatePicBedGlobal()
onBeforeMount(async () => { ipcRenderer.on('uploadProgress', (_event: IpcRendererEvent, _progress: number) => {
await updatePicBedGlobal() if (_progress !== -1) {
ipcRenderer.on('uploadProgress', handleUploadProgress) showProgress.value = true
ipcRenderer.on('syncPicBed', getDefaultPicBed) progress.value = _progress
} else {
progress.value = 100
showError.value = true
}
})
getUseShortUrl()
getPasteStyle()
getDefaultPicBed()
ipcRenderer.on('syncPicBed', () => {
getDefaultPicBed()
})
$bus.on(SHOW_INPUT_BOX_RESPONSE, handleInputBoxValue) $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 = () => { const handleImageProcess = () => {
imageProcessDialogVisible.value = true imageProcessDialogVisible.value = true
} }
watch(progress, onProgressChange)
function onProgressChange(val: number) { function onProgressChange(val: number) {
if (val === 100) { if (val === 100) {
setTimeout(() => { setTimeout(() => {
@@ -226,8 +211,16 @@ async function handlePicBedNameClick(_picBedName: string, picBedConfigName: stri
}) })
} }
const onDrop = useDebounceFn((e: DragEvent) => { onBeforeUnmount(() => {
$bus.off(SHOW_INPUT_BOX_RESPONSE)
ipcRenderer.removeAllListeners('uploadProgress')
ipcRenderer.removeAllListeners('syncPicBed')
})
function onDrop(e: DragEvent) {
dragover.value = false dragover.value = false
// send files first
if (e.dataTransfer?.files?.length) { if (e.dataTransfer?.files?.length) {
ipcSendFiles(e.dataTransfer.files) ipcSendFiles(e.dataTransfer.files)
} else if (e.dataTransfer?.items) { } else if (e.dataTransfer?.items) {
@@ -243,9 +236,11 @@ const onDrop = useDebounceFn((e: DragEvent) => {
} }
} }
} }
}, 200) }
function handleURLDrag(items: DataTransferItemList, dataTransfer: DataTransfer) { 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 urlString = dataTransfer.getData(items[1].type)
const urlMatch = urlString.match(/<img.*src="(.*?)"/) const urlMatch = urlString.match(/<img.*src="(.*?)"/)
if (urlMatch) { if (urlMatch) {
@@ -349,372 +344,82 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
.upload-container .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
position absolute position absolute
left 142px left 142px
right 0 right 0
height 100% height 100%
padding 0 .view-title
transition all 0.3s ease margin 10vh auto 10px
overflow-y auto #upload-area
overflow-x hidden height 50vh
display flex border 2px dashed #dddddd
align-items center border-radius 8px
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
transform scale(1.1)
.quick-upload
margin-left 12px
display flex
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 text-align center
line-height 1.5 width 60vw
margin 0 auto
@media (max-height: 600px) color #dddddd
font-size 14px cursor pointer
line-height 1.3 transition all .2s ease-in-out
.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.02)
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 align-items center
margin-bottom 12px #upload-dragger
flex-wrap wrap height 100%
gap 8px item-align center
&.is-dragover,
.option-label &:hover
font-size 14px border 2px dashed #A4D8FA
color #f2f2f2 background-color rgba(164, 216, 250, 0.3)
font-weight 500 color #fff
border-left 3px solid #409EFF i
padding-left 10px height 80%
margin-right auto font-size 10vh
margin 0
@media (max-height: 600px) span
font-size 13px color #409EFF
#file-uploader
.option-content display none
display flex .upload-progress
flex-wrap wrap opacity 0
gap 10px transition all .2s ease-in-out
width 450px
.link-format-card margin 20px auto 0
flex 3 &.show
min-width 0 opacity 1
max-width 580px .el-progress-bar__inner
transition all .2s ease-in-out
.quick-upload-card .paste-style
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 justify-content center
text-align center
.upload-area margin-top 16px
flex 1 1 auto display flex
min-height 400px align-items flex-end
&__text
.view-title, .upload-options font-size 12px
flex-shrink 0 // Prevent these elements from shrinking 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
cursor pointer
</style> </style>
src/renderer/pages/UploaderConfigPage.vue
+107 -205
View File
@@ -3,61 +3,60 @@
<div class="view-title"> <div class="view-title">
{{ $T('SETTINGS') }} {{ $T('SETTINGS') }}
</div> </div>
<div class="config-list-container"> <el-row :gutter="15" justify="space-between" align="middle" type="flex" class="config-list">
<el-row :gutter="20" justify="start" class="config-list"> <el-col
<el-col v-for="item in curConfigList"
v-for="item in curConfigList" :key="item._id"
:key="item._id" class="config-item-col"
class="config-item-col" :xs="24"
:xs="24" :sm="curConfigList.length === 1 ? 24 : 12"
:sm="curConfigList.length === 1 ? 24 : 12" :md="curConfigList.length === 1 ? 24 : 12"
:md="curConfigList.length === 1 ? 24 : 12" :lg="curConfigList.length === 1 ? 12 : 6"
:lg="curConfigList.length === 1 ? 12 : 8" :xl="curConfigList.length === 1 ? 12 : 3"
:xl="curConfigList.length === 1 ? 12 : 6" >
<div
:class="`config-item ${defaultConfigId === item._id ? 'selected' : ''}`"
@click="() => selectItem(item._id)"
> >
<div <div class="config-name">
:class="`config-card ${defaultConfigId === item._id ? 'selected' : ''}`" {{ item._configName }}
@click="() => selectItem(item._id)"
>
<div class="config-card-content">
<div class="config-name">{{ item._configName }}</div>
<div class="config-update-time">{{ formatTime(item._updatedAt) }}</div>
</div>
<div v-if="defaultConfigId === item._id" class="default-badge">
{{ $T('SELECTED_SETTING_HINT') }}
</div>
<div class="config-card-actions">
<el-button class="action-btn edit-btn" circle type="primary" @click.stop="openEditPage(item._id)">
<el-icon><Edit /></el-icon>
</el-button>
<el-button
class="action-btn delete-btn"
circle
type="danger"
:disabled="curConfigList.length <= 1"
@click.stop="() => deleteConfig(item._id)"
>
<el-icon><Delete /></el-icon>
</el-button>
</div>
</div> </div>
</el-col> <div class="config-update-time">
<el-col {{ formatTime(item._updatedAt) }}
class="config-item-col"
:xs="24"
:sm="curConfigList.length === 1 ? 24 : 12"
:md="curConfigList.length === 1 ? 24 : 12"
:lg="curConfigList.length === 1 ? 12 : 8"
:xl="curConfigList.length === 1 ? 12 : 6"
>
<div class="config-card add-card" @click="addNewConfig">
<el-icon class="add-icon"><Plus /></el-icon>
<span class="add-text">{{ $T('SETTINGS') }}</span>
</div> </div>
</el-col> <div v-if="defaultConfigId === item._id" class="default-text">
</el-row> {{ $T('SELECTED_SETTING_HINT') }}
</div> </div>
<div class="set-default-container"> <div class="operation-container">
<el-icon class="el-icon-edit" @click="openEditPage(item._id)">
<Edit />
</el-icon>
<el-icon
class="el-icon-delete"
:class="curConfigList.length <= 1 ? 'disabled' : ''"
@click.stop="() => deleteConfig(item._id)"
>
<Delete />
</el-icon>
</div>
</div>
</el-col>
<el-col
class="config-item-col"
:xs="24"
:sm="curConfigList.length === 1 ? 24 : 12"
:md="curConfigList.length === 1 ? 24 : 12"
:lg="curConfigList.length === 1 ? 12 : 6"
:xl="curConfigList.length === 1 ? 12 : 3"
>
<div class="config-item config-item-add" @click="addNewConfig">
<el-icon class="el-icon-plus">
<Plus />
</el-icon>
</div>
</el-col>
</el-row>
<el-row type="flex" justify="center" :span="24" class="set-default-container">
<el-button <el-button
class="set-default-btn" class="set-default-btn"
type="success" type="success"
@@ -67,7 +66,7 @@
> >
{{ $T('SETTINGS_SET_DEFAULT_PICBED') }} {{ $T('SETTINGS_SET_DEFAULT_PICBED') }}
</el-button> </el-button>
</div> </el-row>
</div> </div>
</template> </template>
@@ -181,15 +180,6 @@ export default {
} }
</script> </script>
<style lang="stylus"> <style lang="stylus">
$transitionDefault = all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
$borderRadius = 8px
$cardBg = rgba(55, 60, 70, 0.55)
$hoverBg = rgba(50, 54, 62, 0.7)
$selectedBorder = #409EFF
$cardShadow = 0 3px 8px rgba(0, 0, 0, 0.25)
$cardShadowHover = 0 5px 15px rgba(0, 0, 0, 0.35)
$normalBorder = rgba(150, 150, 150, 0.25)
#config-list-view #config-list-view
position absolute position absolute
min-height 100% min-height 100%
@@ -197,160 +187,72 @@ $normalBorder = rgba(150, 150, 150, 0.25)
right 0 right 0
overflow-x hidden overflow-x hidden
overflow-y auto overflow-y auto
padding 0 20px 90px padding-bottom 50px
box-sizing border-box box-sizing border-box
display flex
flex-direction column
.view-title
color #eee
font-size 24px
font-weight 500
margin 20px 0
text-align center
letter-spacing 0.5px
.config-list-container
flex 1
width 100%
box-sizing border-box
.config-list .config-list
margin 0 flex-wrap wrap
width 100% width: 98%
.config-item
.config-item-col height 85px
margin-bottom 20px margin-bottom 20px
border-radius 4px
.config-card cursor pointer
position relative box-sizing border-box
height 110px padding 8px
border-radius $borderRadius background rgba(130, 130, 130, .2)
background $cardBg border 1px solid transparent
backdrop-filter blur(5px) box-shadow 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
box-shadow $cardShadow
transition $transitionDefault
cursor pointer
overflow hidden
display flex
align-items center
justify-content space-between
padding 0 15px 0 20px
border 1px solid $normalBorder
&:hover
transform translateY(-3px)
box-shadow $cardShadowHover
background $hoverBg
&.selected
border 1px solid $selectedBorder
background rgba(64, 158, 255, 0.15) // Slightly more visible selected state
.default-badge
position absolute
right 0
top 0
font-size 11px
font-weight 600
padding 4px 10px
background $selectedBorder
color #fff
z-index 5
border-bottom-left-radius $borderRadius
.config-card-content
flex-grow 1
padding 15px 0
overflow hidden
position relative position relative
.config-name .config-name
color #fff color #eee
font-size 16px font-size 16px
font-weight 500
margin-bottom 10px
white-space nowrap
overflow hidden
text-overflow ellipsis
.config-update-time .config-update-time
color #aaa color #aaa
font-size 14px font-size 14px
margin-top 10px
.config-card-actions .default-text
display flex color #67C23A
flex-direction row font-size 12px
gap 10px margin-top 5px
align-items center .operation-container
position absolute
.action-btn right 5px
transition $transitionDefault top 8px
border none left 0
width 32px font-size 18pxc
height 32px word-break break-all
display flex display flex
align-items center align-items center
justify-content center color #eee
.el-icon-edit
&.edit-btn right 20px
&:hover position absolute
transform scale(1.1) top 2px
margin-right 10px
&.delete-btn cursor pointer
&:hover:not(:disabled) .el-icon-delete
transform scale(1.1) position absolute
top 2px
&:disabled margin-right 10px
opacity 0.5 right 0
cursor not-allowed cursor pointer
.el-icon-edit
.add-card margin-right 10px
display flex .disabled
flex-direction column cursor not-allowed
align-items center color #aaa
justify-content center .config-item-add
background rgba(50, 54, 62, 0.4) display: flex
border 1px dashed rgba(255, 255, 255, 0.4) justify-content: center
align-items: center
&:hover color: #eee
border-color rgba(255, 255, 255, 0.8) font-size: 28px
background rgba(64, 158, 255, 0.15) .selected
border 1px solid #409EFF
.add-icon
transform rotate(90deg)
.add-icon
font-size 32px
color #eee
margin-bottom 8px
transition $transitionDefault
.add-text
color #eee
font-size 14px
.set-default-container .set-default-container
position fixed position absolute
bottom 0 bottom 10px
left 162px width 100%
right 0
display flex
justify-content center
align-items center
padding 15px 0
height 70px
background linear-gradient(to top, rgba(30, 34, 42, 0.95) 0%, rgba(30, 34, 42, 0.8) 60%, rgba(30, 34, 42, 0) 100%)
z-index 10
.set-default-btn .set-default-btn
width 250px width 250px
height 40px
font-weight 500
transition $transitionDefault
margin-bottom 0
&:not(:disabled):hover
transform translateY(-2px)
box-shadow 0 4px 12px rgba(0, 0, 0, 0.3)
</style> </style>