🎨 Style(custom): format with prettier

This commit is contained in:
Kuingsmile
2024-06-15 19:37:50 +08:00
parent 096f564c31
commit 5af8a6b529
157 changed files with 21365 additions and 22952 deletions

View File

@@ -1,48 +1,24 @@
<template>
<div id="main-page">
<div
class="fake-title-bar"
>
<div class="fake-title-bar__title">
PicList - {{ version }}
</div>
<div
v-if="osGlobal !== 'darwin'"
class="handle-bar"
>
<div class="fake-title-bar">
<div class="fake-title-bar__title">PicList - {{ version }}</div>
<div v-if="osGlobal !== 'darwin'" class="handle-bar">
<el-icon
class="minus"
:color="isAlwaysOnTop ? '#409EFF' : '#fff'"
size="20"
style="margin-right: 10px;"
style="margin-right: 10px"
@click="setAlwaysOnTop"
>
<ArrowUpBold />
</el-icon>
<el-icon
class="minus"
color="#fff"
size="20"
style="margin-right: 10px;"
@click="minimizeWindow"
>
<el-icon class="minus" color="#fff" size="20" style="margin-right: 10px" @click="minimizeWindow">
<SemiSelect />
</el-icon>
<el-icon
class="plus"
color="orange"
size="20"
style="margin-right: 10px;"
@click="openMiniWindow"
>
<el-icon class="plus" color="orange" size="20" style="margin-right: 10px" @click="openMiniWindow">
<ArrowDownBold />
</el-icon>
<el-icon
class="close"
color="#fff"
size="20"
@click="closeWindow"
>
<el-icon class="close" color="#fff" size="20" @click="closeWindow">
<CloseBold />
</el-icon>
</div>
@@ -56,19 +32,9 @@
status="success"
class="progress-bar"
/>
<el-row
style="padding-top: 22px;"
class="main-content"
>
<el-col
class="side-bar-menu"
>
<el-menu
class="picgo-sidebar"
:default-active="defaultActive"
:unique-opened="true"
@select="handleSelect"
>
<el-row style="padding-top: 22px" class="main-content">
<el-col class="side-bar-menu">
<el-menu class="picgo-sidebar" :default-active="defaultActive" :unique-opened="true" @select="handleSelect">
<el-menu-item :index="routerConfig.UPLOAD_PAGE">
<el-icon>
<UploadFilled />
@@ -87,21 +53,14 @@
</el-icon>
<span>{{ $T('GALLERY') }}</span>
</el-menu-item>
<el-sub-menu
index="sub-menu"
:show-timeout="0"
:hide-timeout="0"
:popper-offset="0"
>
<el-sub-menu index="sub-menu" :show-timeout="0" :hide-timeout="0" :popper-offset="0">
<template #title>
<el-icon>
<Menu />
</el-icon>
<span>{{ $T('PICBEDS_SETTINGS') }}</span>
</template>
<template
v-for="item in picBedGlobal"
>
<template v-for="item in picBedGlobal">
<el-menu-item
v-if="item.visible"
:key="item.type"
@@ -123,39 +82,22 @@
</el-icon>
<span>{{ $T('PLUGIN_SETTINGS') }}</span>
</el-menu-item>
<el-menu-item
:index="routerConfig.DocumentPage"
>
<el-menu-item :index="routerConfig.DocumentPage">
<el-icon>
<Link />
</el-icon>
<span>{{ $T('MANUAL') }}</span>
</el-menu-item>
</el-menu>
<el-icon
class="info-window"
@click="openMenu"
>
<el-icon class="info-window" @click="openMenu">
<InfoFilled />
</el-icon>
</el-col>
<el-col
:span="21"
:offset="3"
style="height: 100%"
class="main-wrapper"
>
<router-view
v-slot="{ Component }"
>
<transition
name="picgo-fade"
mode="out-in"
>
<el-col :span="21" :offset="3" style="height: 100%" class="main-wrapper">
<router-view v-slot="{ Component }">
<transition name="picgo-fade" mode="out-in">
<keep-alive :include="keepAlivePages">
<component
:is="Component"
/>
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
@@ -171,27 +113,10 @@
lock-scroll
append-to-body
>
<el-form
label-position="left"
label-width="70px"
size="small"
>
<el-form-item
:label="$T('CHOOSE_PICBED')"
>
<el-select
v-model="choosedPicBedForQRCode"
multiple
collapse-tags
:persistent="false"
teleported
>
<el-option
v-for="item in picBedGlobal"
:key="item.type"
:label="item.name"
:value="item.type"
/>
<el-form label-position="left" label-width="70px" size="small">
<el-form-item :label="$T('CHOOSE_PICBED')">
<el-select v-model="choosedPicBedForQRCode" multiple collapse-tags :persistent="false" teleported>
<el-option v-for="item in picBedGlobal" :key="item.type" :label="item.name" :value="item.type" />
</el-select>
<el-button
v-show="choosedPicBedForQRCode.length > 0"
@@ -205,11 +130,7 @@
</el-form-item>
</el-form>
<div class="qrcode-container">
<qrcode-vue
v-show="choosedPicBedForQRCode.length > 0"
:size="280"
:value="picBedConfigString"
/>
<qrcode-vue v-show="choosedPicBedForQRCode.length > 0" :size="280" :value="picBedConfigString" />
</div>
</el-dialog>
<input-box-dialog />
@@ -231,11 +152,7 @@ import {
Link,
ArrowUpBold
} from '@element-plus/icons-vue'
import {
ipcRenderer,
IpcRendererEvent,
clipboard
} from 'electron'
import { ipcRenderer, IpcRendererEvent, clipboard } from 'electron'
import { ElMessage as $message, ElMessageBox } from 'element-plus'
import pick from 'lodash/pick'
import QrcodeVue from 'qrcode.vue'
@@ -249,9 +166,7 @@ import { getConfig, saveConfig } from '@/utils/dataSender'
import { sendRPC } from '@/utils/common'
import { osGlobal, picBedGlobal, updatePicBedGlobal } from '@/utils/global'
import {
SHOW_MAIN_PAGE_QRCODE
} from '#/events/constants'
import { SHOW_MAIN_PAGE_QRCODE } from '#/events/constants'
import { configPaths, manualPageOpenType } from '#/utils/configPaths'
import { II18nLanguage, IRPCActionType } from '#/types/enum'
@@ -265,7 +180,10 @@ const qrcodeVisible = ref(false)
const picBedConfigString = ref('')
const choosedPicBedForQRCode: Ref<string[]> = ref([])
const isAlwaysOnTop = ref(false)
const keepAlivePages = $router.getRoutes().filter(item => item.meta.keepAlive).map(item => item.name as string)
const keepAlivePages = $router
.getRoutes()
.filter(item => item.meta.keepAlive)
.map(item => item.name as string)
const isShowprogress = ref(false)
const progress = ref(0)
@@ -275,29 +193,37 @@ onBeforeMount(() => {
ipcRenderer.on(SHOW_MAIN_PAGE_QRCODE, () => {
qrcodeVisible.value = true
})
ipcRenderer.on('updateProgress', (_event: IpcRendererEvent, data: { progress: number}) => {
ipcRenderer.on('updateProgress', (_event: IpcRendererEvent, data: { progress: number }) => {
isShowprogress.value = data.progress !== 100 && data.progress !== 0
progress.value = data.progress
})
})
watch(() => choosedPicBedForQRCode, (val) => {
if (val.value.length > 0) {
nextTick(async () => {
const picBedConfig = await getConfig('picBed')
const config = pick(picBedConfig, ...choosedPicBedForQRCode.value)
picBedConfigString.value = JSON.stringify(config)
})
}
}, { deep: true })
watch(
() => choosedPicBedForQRCode,
val => {
if (val.value.length > 0) {
nextTick(async () => {
const picBedConfig = await getConfig('picBed')
const config = pick(picBedConfig, ...choosedPicBedForQRCode.value)
picBedConfigString.value = JSON.stringify(config)
})
}
},
{ deep: true }
)
const handleSelect = async (index: string) => {
defaultActive.value = index
if (index === routerConfig.DocumentPage) {
const manualPageOpenSetting = await getConfig<manualPageOpenType>(configPaths.settings.manualPageOpen)
const lang = await getConfig(configPaths.settings.language) || II18nLanguage.ZH_CN
const lang = (await getConfig(configPaths.settings.language)) || II18nLanguage.ZH_CN
const openManual = () => sendRPC(IRPCActionType.OPEN_MANUAL_WINDOW)
const openExternal = () => sendRPC(IRPCActionType.OPEN_URL, lang === II18nLanguage.ZH_CN ? 'https://piclist.cn/app.html' : 'https://piclist.cn/en/app.html')
const openExternal = () =>
sendRPC(
IRPCActionType.OPEN_URL,
lang === II18nLanguage.ZH_CN ? 'https://piclist.cn/app.html' : 'https://piclist.cn/en/app.html'
)
if (!manualPageOpenSetting) {
ElMessageBox.confirm($T('MANUAL_PAGE_OPEN_TIP'), $T('MANUAL_PAGE_OPEN_TIP_TITLE'), {
@@ -305,13 +231,15 @@ const handleSelect = async (index: string) => {
cancelButtonText: $T('MANUAL_PAGE_OPEN_BY_BUILD_IN'),
type: 'info',
center: true
}).then(() => {
saveConfig(configPaths.settings.manualPageOpen, 'browser')
openExternal()
}).catch(() => {
saveConfig(configPaths.settings.manualPageOpen, 'window')
openManual()
})
.then(() => {
saveConfig(configPaths.settings.manualPageOpen, 'browser')
openExternal()
})
.catch(() => {
saveConfig(configPaths.settings.manualPageOpen, 'window')
openManual()
})
} else {
manualPageOpenSetting === 'window' ? openManual() : openExternal()
}
@@ -333,33 +261,33 @@ const handleSelect = async (index: string) => {
}
}
function minimizeWindow () {
function minimizeWindow() {
sendRPC(IRPCActionType.MINIMIZE_WINDOW)
}
function closeWindow () {
function closeWindow() {
sendRPC(IRPCActionType.CLOSE_WINDOW)
}
function openMenu () {
function openMenu() {
sendRPC(IRPCActionType.SHOW_MAIN_PAGE_MENU)
}
function openMiniWindow () {
function openMiniWindow() {
sendRPC(IRPCActionType.OPEN_MINI_WINDOW)
}
function handleCopyPicBedConfig () {
function handleCopyPicBedConfig() {
clipboard.writeText(picBedConfigString.value)
$message.success($T('COPY_PICBED_CONFIG_SUCCEED'))
}
function setAlwaysOnTop () {
function setAlwaysOnTop() {
isAlwaysOnTop.value = !isAlwaysOnTop.value
sendRPC(IRPCActionType.MAIN_WINDOW_ON_TOP)
}
onBeforeRouteUpdate(async (to) => {
onBeforeRouteUpdate(async to => {
if (to.params.type) {
defaultActive.value = `${routerConfig.UPLOADER_CONFIG_PAGE}-${to.params.type}`
} else {
@@ -371,14 +299,13 @@ onBeforeUnmount(() => {
ipcRenderer.removeAllListeners(SHOW_MAIN_PAGE_QRCODE)
ipcRenderer.removeAllListeners('updateProgress')
})
</script>
<script lang="ts">
export default {
name: 'MainPage'
}
</script>
<style lang='stylus'>
<style lang="stylus">
$darwinBg = transparentify(#172426, #000, 0.7)
.setting-list-scroll
height 800px