mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-05-21 16:20:46 +08:00
1681 lines
56 KiB
Vue
1681 lines
56 KiB
Vue
<template>
|
||
<div id="piclist-setting">
|
||
<el-row class="view-title" align="middle" justify="center">
|
||
{{ $T('PICLIST_SETTINGS') }} -
|
||
<el-icon class="el-icon-document" @click="goConfigPage">
|
||
<Reading />
|
||
</el-icon>
|
||
</el-row>
|
||
<el-tabs
|
||
v-model="activeName"
|
||
stretch
|
||
style="height: calc(100vh - 50px); width: 100%; overflow-x: hidden; top: 50px; position: absolute"
|
||
tab-position="left"
|
||
lazy
|
||
>
|
||
<el-tab-pane
|
||
name="system"
|
||
:label="$T('SETTINGS_TAB_SYSTEM')"
|
||
style="height: 100%; overflow-y: scroll; height: calc(100vh - 50px); color: #fff"
|
||
>
|
||
<el-row class="setting-list">
|
||
<el-col :span="22" :offset="1">
|
||
<el-row style="width: 100%">
|
||
<el-form label-position="left" label-width="50%" size="small">
|
||
<el-form-item :label="$T('SETTINGS_CHOOSE_LANGUAGE')">
|
||
<el-select
|
||
v-model="currentLanguage"
|
||
size="small"
|
||
style="width: 50%"
|
||
:placeholder="$T('SETTINGS_CHOOSE_LANGUAGE')"
|
||
:persistent="false"
|
||
teleported
|
||
@change="handleLanguageChange"
|
||
>
|
||
<el-option v-for="item in languageList" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_START_MODE')">
|
||
<el-select
|
||
v-model="currentStartMode"
|
||
size="small"
|
||
style="width: 50%"
|
||
:placeholder="$T('SETTINGS_START_MODE')"
|
||
:persistent="false"
|
||
teleported
|
||
@change="handleStartModeChange"
|
||
>
|
||
<el-option key="quiet" :label="$T('SETTINGS_START_MODE_QUIET')" :value="'quiet'" />
|
||
<el-option
|
||
v-if="osGlobal !== 'darwin'"
|
||
key="mini"
|
||
:label="$T('SETTINGS_START_MODE_MINI')"
|
||
:value="'mini'"
|
||
/>
|
||
<el-option
|
||
v-if="osGlobal === 'darwin'"
|
||
key="no-tray"
|
||
:label="$T('SETTINGS_START_MODE_NO_TRAY')"
|
||
:value="'no-tray'"
|
||
/>
|
||
<el-option key="main" :label="$T('SETTINGS_START_MODE_MAIN')" :value="'main'" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('MANUAL_PAGE_OPEN_SETTING_TIP')">
|
||
<el-select
|
||
v-model="currentManualPageOpen"
|
||
size="small"
|
||
style="width: 50%"
|
||
:placeholder="$T('MANUAL_PAGE_OPEN_SETTING_TIP')"
|
||
:persistent="false"
|
||
teleported
|
||
@change="handleManualPageOpenChange"
|
||
>
|
||
<el-option
|
||
v-for="item in manualPageOpenList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item v-if="osGlobal === 'darwin'" :label="$T('SETTINGS_ISHIDEDOCK')">
|
||
<el-switch
|
||
v-model="formOfSetting.isHideDock"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
@change="handleHideDockChange"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_MAIN_WINDOW_SIZE')">
|
||
<el-button type="primary" round size="small" @click="mainWindowSizeVisible = true">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item v-if="osGlobal !== 'darwin'" :label="$T('SETTINGS_CLOSE_MINI_WINDOW_SYNC')">
|
||
<el-switch
|
||
v-model="formOfSetting.autoCloseMiniWindow"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item v-if="osGlobal !== 'darwin'" :label="$T('SETTINGS_CLOSE_MAIN_WINDOW_SYNC')">
|
||
<el-switch
|
||
v-model="formOfSetting.autoCloseMainWindow"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item v-if="osGlobal !== 'darwin'" :label="$T('SETTINGS_MINI_WINDOW_ON_TOP')">
|
||
<el-switch
|
||
v-model="formOfSetting.miniWindowOntop"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
@change="handleMiniWindowOntop"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item v-if="osGlobal !== 'darwin'" :label="$T('SETTINGS_CUSTOM_MINI_ICON')">
|
||
<el-switch
|
||
v-model="formOfSetting.isCustomMiniIcon"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-if="osGlobal !== 'darwin' && formOfSetting.isCustomMiniIcon"
|
||
:label="$T('SETTINGS_CUSTOM_MINI_ICON_PATH')"
|
||
>
|
||
<el-button type="primary" round size="small" @click="handleMiniIconPath">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_LAUNCH_ON_BOOT')">
|
||
<el-switch
|
||
v-model="formOfSetting.autoStart"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
@change="handleAutoStartChange"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SET_SHORTCUT')">
|
||
<el-button type="primary" round size="small" @click="goShortCutPage">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
<el-tab-pane
|
||
name="syncAndConfigure"
|
||
:label="$T('SETTINGS_TAB_SYNC_CONFIG')"
|
||
style="height: 100%; overflow-y: scroll; height: calc(100vh - 50px); color: #fff"
|
||
>
|
||
<el-row class="setting-list">
|
||
<el-col :span="22" :offset="1">
|
||
<el-row style="width: 100%">
|
||
<el-form label-position="left" label-width="50%" size="small">
|
||
<el-form-item :label="$T('SETTINGS_SYNC_CONFIG')">
|
||
<el-button type="primary" round size="small" @click="syncVisible = true">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_UP_DOWN_DESC')">
|
||
<el-button type="primary" round size="small" @click="upDownConfigVisible = true">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_MIGRATE_FROM_PICGO')">
|
||
<el-button type="primary" round size="small" @click="handleMigrateFromPicGo">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_OPEN_CONFIG_FILE')">
|
||
<el-button type="primary" round size="small" @click="openFile('data.json')">
|
||
{{ $T('SETTINGS_CLICK_TO_OPEN') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_CONFIG_FILE_PATH')">
|
||
<el-button type="primary" round size="small" @click="openDirectory()">
|
||
{{ $T('SETTINGS_CLICK_TO_OPEN') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
<el-tab-pane
|
||
name="upload"
|
||
:label="$T('SETTINGS_TAB_UPLOAD')"
|
||
style="height: 100%; overflow-y: scroll; height: calc(100vh - 50px); color: #fff"
|
||
>
|
||
<el-row class="setting-list">
|
||
<el-col :span="22" :offset="1">
|
||
<el-row style="width: 100%">
|
||
<el-form label-position="left" label-width="50%" size="small">
|
||
<el-form-item :label="$T('SETTINGS_AUTO_IMPORT')">
|
||
<el-switch
|
||
v-model="formOfSetting.autoImport"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item v-if="formOfSetting.autoImport" :label="$T('SETTINGS_AUTO_IMPORT_SELECT_PICBED')">
|
||
<el-select
|
||
v-model="formOfSetting.autoImportPicBed"
|
||
multiple
|
||
size="small"
|
||
style="width: 50%"
|
||
:placeholder="$T('SETTINGS_AUTO_IMPORT_SELECT_PICBED')"
|
||
:persistent="false"
|
||
teleported
|
||
>
|
||
<el-option v-for="item in picBedGlobal" :key="item.type" :label="item.name" :value="item.type" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SYNC_DELETE_CLOUD')">
|
||
<el-switch
|
||
v-model="formOfSetting.deleteCloudFile"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_OPEN_UPLOAD_TIPS')">
|
||
<el-switch
|
||
v-model="formOfSetting.uploadNotification"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_OPEN_UPLOAD_RESULT_TIPS')">
|
||
<el-switch
|
||
v-model="formOfSetting.uploadResultNotification"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_COMPRESS_AND_WATERMARK')">
|
||
<el-button type="primary" round size="small" @click="imageProcessDialogVisible = true">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_RENAME_BEFORE_UPLOAD')">
|
||
<el-switch
|
||
v-model="formOfSetting.rename"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_TIMESTAMP_RENAME')">
|
||
<el-switch
|
||
v-model="formOfSetting.autoRename"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_ADVANCED_RENAME')">
|
||
<el-button type="primary" round size="small" @click="advancedRenameVisible = true">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_DELETE_LOCAL_FILE_AFTER_UPLOAD')">
|
||
<el-switch
|
||
v-model="formOfSetting.deleteLocalFile"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_AUTO_COPY_URL_AFTER_UPLOAD')">
|
||
<el-switch
|
||
v-model="formOfSetting.autoCopy"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_CUSTOM_LINK_FORMAT')">
|
||
<el-button type="primary" round size="small" @click="customLinkVisible = true">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SHORT_URL')">
|
||
<el-switch
|
||
v-model="formOfSetting.useShortUrl"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item v-if="formOfSetting.useShortUrl" :label="$T('SETTINGS_SHORT_URL_SERVER')">
|
||
<el-select
|
||
v-model="currentShortUrlServer"
|
||
size="small"
|
||
style="width: 50%"
|
||
:placeholder="$T('SETTINGS_SHORT_URL_SERVER')"
|
||
:persistent="false"
|
||
teleported
|
||
@change="handleShortUrlServerChange"
|
||
>
|
||
<el-option
|
||
v-for="item in shortUrlServerList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'c1n'"
|
||
:label="$T('SETTINGS_SHORT_URL_C1N_TOKEN')"
|
||
>
|
||
<el-input
|
||
v-model="formOfSetting.c1nToken"
|
||
size="small"
|
||
style="width: 50%"
|
||
:placeholder="$T('SETTINGS_SHORT_URL_C1N_TOKEN')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'yourls'"
|
||
:label="$T('SETTINGS_SHORT_URL_YOURLS_DOMAIN')"
|
||
>
|
||
<el-input
|
||
v-model="formOfSetting.yourlsDomain"
|
||
size="small"
|
||
style="width: 50%"
|
||
:placeholder="$T('SETTINGS_SHORT_URL_YOURLS_DOMAIN')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'yourls'"
|
||
:label="$T('SETTINGS_SHORT_URL_YOURLS_SIGNATURE')"
|
||
>
|
||
<el-input
|
||
v-model="formOfSetting.yourlsSignature"
|
||
size="small"
|
||
style="width: 50%"
|
||
:placeholder="$T('SETTINGS_SHORT_URL_YOURLS_SIGNATURE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'cf_worker'"
|
||
:label="$T('SETTINGS_SHORT_URL_CF_WORKER_HOST')"
|
||
>
|
||
<el-input
|
||
v-model="formOfSetting.cfWorkerHost"
|
||
size="small"
|
||
style="width: 50%"
|
||
:placeholder="$T('SETTINGS_SHORT_URL_CF_WORKER_HOST')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_ENCODE_OUTPUT_URL')">
|
||
<el-switch
|
||
v-model="formOfSetting.encodeOutputURL"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<template #label>
|
||
<el-row align="middle">
|
||
{{ $T('SETTINGS_USE_BUILTIN_CLIPBOARD_UPLOAD') }}
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
:content="$T('BUILTIN_CLIPBOARD_TIPS')"
|
||
placement="right"
|
||
:persistent="false"
|
||
teleported
|
||
>
|
||
<el-icon style="margin-left: 4px">
|
||
<InfoFilled />
|
||
</el-icon>
|
||
</el-tooltip>
|
||
</el-row>
|
||
</template>
|
||
<el-switch
|
||
v-model="formOfSetting.useBuiltinClipboard"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_WATCH_CLIPBOARD')">
|
||
<el-switch
|
||
v-model="formOfSetting.isAutoListenClipboard"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :style="{ marginRight: '-64px' }" :label="$T('CHOOSE_SHOWED_PICBED')">
|
||
<el-checkbox-group v-model="showPicBedList" @change="handleShowPicBedListChange">
|
||
<el-checkbox v-for="item in picBedGlobal" :key="item.name" :label="item.name" :value="item.name" />
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-divider border-style="none" />
|
||
<el-form-item />
|
||
</el-form>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
<el-tab-pane
|
||
name="advanced"
|
||
:label="$T('SETTINGS_TAB_ADVANCED')"
|
||
style="height: 100%; overflow-y: scroll; height: calc(100vh - 50px); color: #fff"
|
||
>
|
||
<el-row class="setting-list">
|
||
<el-col :span="22" :offset="1">
|
||
<el-row style="width: 100%">
|
||
<el-form label-position="left" label-width="50%" size="small">
|
||
<el-form-item :label="$T('SETTINGS_LOG_FILE_PATH')">
|
||
<el-button type="primary" round size="small" @click="openDirectory()">
|
||
{{ $T('SETTINGS_CLICK_TO_OPEN') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SET_LOG_FILE')">
|
||
<el-button type="primary" round size="small" @click="openLogSetting">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SET_PROXY_AND_MIRROR')">
|
||
<el-button type="primary" round size="small" @click="proxyVisible = true">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SET_WEB_SERVER')">
|
||
<el-button type="primary" round size="small" @click="webServerVisible = true">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SET_SERVER')">
|
||
<el-button type="primary" round size="small" @click="serverVisible = true">
|
||
{{ $T('SETTINGS_CLICK_TO_SET') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SET_SERVER_AES_KEY')">
|
||
<el-input
|
||
v-model.trim="formOfSetting.aesPassword"
|
||
type="input"
|
||
:placeholder="$T('SETTINGS_SET_SERVER_AES_KEY')"
|
||
size="small"
|
||
style="width: 50%"
|
||
@change="handleAesPasswordChange"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
<el-tab-pane
|
||
name="upadte"
|
||
:label="$T('SETTINGS_TAB_UPDATE')"
|
||
style="height: 100%; overflow-y: scroll; height: calc(100vh - 50px)"
|
||
>
|
||
<el-row class="setting-list">
|
||
<el-col :span="22" :offset="1">
|
||
<el-row style="width: 100%">
|
||
<el-form label-position="left" label-width="50%" size="small">
|
||
<el-form-item :label="$T('SETTINGS_CHECK_UPDATE')">
|
||
<el-button type="primary" round size="small" @click="checkUpdate">
|
||
{{ $T('SETTINGS_CLICK_TO_CHECK') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_OPEN_UPDATE_HELPER')">
|
||
<el-switch
|
||
v-model="formOfSetting.showUpdateTip"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<el-dialog
|
||
v-model="customLinkVisible"
|
||
:title="$T('SETTINGS_CUSTOM_LINK_FORMAT')"
|
||
:modal-append-to-body="false"
|
||
center
|
||
draggable
|
||
append-to-body
|
||
>
|
||
<el-form ref="$customLink" label-position="top" :model="customLink" :rules="rules" size="small">
|
||
<el-form-item prop="value">
|
||
<div class="custom-title">
|
||
{{ $T('SETTINGS_TIPS_PLACEHOLDER_URL') }}
|
||
<br />
|
||
{{ $T('SETTINGS_TIPS_PLACEHOLDER_FILENAME') }}
|
||
<br />
|
||
{{ $T('SETTINGS_TIPS_PLACEHOLDER_EXTNAME') }}
|
||
</div>
|
||
<el-input v-model="customLink.value" class="align-center" :autofocus="true" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<div>{{ $T('SETTINGS_TIPS_SUCH_AS') }}[$fileName]($url)</div>
|
||
<template #footer>
|
||
<el-button round @click="cancelCustomLink">
|
||
{{ $T('CANCEL') }}
|
||
</el-button>
|
||
<el-button type="primary" round @click="confirmCustomLink">
|
||
{{ $T('CONFIRM') }}
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog
|
||
v-model="proxyVisible"
|
||
:title="$T('SETTINGS_SET_PROXY_AND_MIRROR')"
|
||
:modal-append-to-body="false"
|
||
width="70%"
|
||
center
|
||
draggable
|
||
append-to-body
|
||
>
|
||
<el-form label-position="right" label-width="120px">
|
||
<el-form-item :label="$T('SETTINGS_UPLOAD_PROXY')">
|
||
<el-input
|
||
v-model="proxy"
|
||
clearable
|
||
:autofocus="true"
|
||
:placeholder="`${$T('SETTINGS_TIPS_SUCH_AS')}：http://127.0.0.1:1080`"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_PLUGIN_INSTALL_PROXY')">
|
||
<el-input
|
||
v-model="formOfSetting.proxy"
|
||
clearable
|
||
:placeholder="`${$T('SETTINGS_TIPS_SUCH_AS')}：http://127.0.0.1:1080`"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_PLUGIN_INSTALL_MIRROR')">
|
||
<el-input
|
||
v-model="formOfSetting.registry"
|
||
clearable
|
||
:placeholder="`${$T('SETTINGS_TIPS_SUCH_AS')}：https://registry.npmmirror.com`"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
<el-dialog
|
||
v-model="mainWindowSizeVisible"
|
||
:title="$T('SETTINGS_MAIN_WINDOW_SIZE')"
|
||
:modal-append-to-body="false"
|
||
width="70%"
|
||
center
|
||
draggable
|
||
append-to-body
|
||
>
|
||
<el-form label-position="right" label-width="120px">
|
||
<el-form-item :label="$T('SETTINGS_MAIN_WINDOW_SIZE_WIDTH')">
|
||
<el-input
|
||
v-model="formOfSetting.mainWindowWidth"
|
||
:autofocus="true"
|
||
:placeholder="$T('SETTINGS_MAIN_WINDOW_WIDTH_HINT')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_MAIN_WINDOW_SIZE_HEIGHT')">
|
||
<el-input
|
||
v-model="formOfSetting.mainWindowHeight"
|
||
:autofocus="true"
|
||
:placeholder="$T('SETTINGS_MAIN_WINDOW_HEIGHT_HINT')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_RAW_PICGO_SIZE')">
|
||
<el-switch v-model="rawPicGoSize" :active-text="$T('SETTINGS_OPEN')" :inactive-text="$T('SETTINGS_CLOSE')" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button round @click="cancelWindowSize">
|
||
{{ $T('CANCEL') }}
|
||
</el-button>
|
||
<el-button type="primary" round @click="confirmWindowSize">
|
||
{{ $T('CONFIRM') }}
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog
|
||
v-model="checkUpdateVisible"
|
||
:title="$T('SETTINGS_CHECK_UPDATE')"
|
||
:modal-append-to-body="false"
|
||
center
|
||
draggable
|
||
append-to-body
|
||
>
|
||
<div>{{ $T('SETTINGS_CURRENT_VERSION') }}: {{ version }}</div>
|
||
<div>
|
||
{{ $T('SETTINGS_NEWEST_VERSION') }}:
|
||
{{ latestVersion ? latestVersion : `${$T('SETTINGS_GETING')}...` }}
|
||
</div>
|
||
<div v-if="needUpdate">
|
||
{{ $T('SETTINGS_TIPS_HAS_NEW_VERSION') }}
|
||
</div>
|
||
<template #footer>
|
||
<el-button round @click="cancelCheckVersion">
|
||
{{ $T('CANCEL') }}
|
||
</el-button>
|
||
<el-button type="primary" round @click="confirmCheckVersion">
|
||
{{ $T('CONFIRM') }}
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog
|
||
v-model="advancedRenameVisible"
|
||
:title="$T('SETTINGS_ADVANCED_RENAME')"
|
||
center
|
||
align-center
|
||
draggable
|
||
destroy-on-close
|
||
append-to-body
|
||
>
|
||
<el-link :underline="false" style="margin-bottom: 10px">
|
||
{{ $T('SETTINGS_ADVANCED_RENAME_ENABLE') }}
|
||
</el-link>
|
||
<br />
|
||
<el-switch
|
||
v-model="advancedRename.enable"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
<br />
|
||
<el-link :underline="false" style="margin-bottom: 10px; margin-top: 10px">
|
||
<span>
|
||
{{ $T('SETTINGS_ADVANCED_RENAME_FORMAT') }}
|
||
<el-popover effect="light" placement="right" width="350" :persistent="false" teleported>
|
||
<template #reference>
|
||
<el-icon color="#409EFF">
|
||
<InfoFilled />
|
||
</el-icon>
|
||
</template>
|
||
<el-descriptions :column="1" style="width: 320px" border>
|
||
<el-descriptions-item
|
||
v-for="(item, index) in buildInRenameFormatTable"
|
||
:key="index"
|
||
:label="item.placeholder"
|
||
align="center"
|
||
label-style="width: 100px;"
|
||
>
|
||
{{ item.description }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item
|
||
v-for="(item, index) in buildInRenameFormatTable.slice(0, buildInRenameFormatTable.length - 1)"
|
||
:key="index"
|
||
:label="item.placeholderB"
|
||
align="center"
|
||
label-style="width: 100px;"
|
||
>
|
||
{{ item.descriptionB }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-popover>
|
||
</span>
|
||
</el-link>
|
||
<el-input v-model="advancedRename.format" placeholder="Ex. {Y}-{m}-{uuid}" clearable />
|
||
<div style="margin-top: 10px; align-items: center; display: flex; justify-content: flex-end">
|
||
<el-button type="danger" style="margin-right: 30px" plain :icon="Close" @click="handleCancelAdvancedRename">
|
||
{{ $T('CANCEL') }}
|
||
</el-button>
|
||
<el-button type="primary" plain :icon="Edit" @click="handleSaveAdvancedRename">
|
||
{{ $T('CONFIRM') }}
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog
|
||
v-model="logFileVisible"
|
||
:title="$T('SETTINGS_SET_LOG_FILE')"
|
||
:modal-append-to-body="false"
|
||
width="500px"
|
||
center
|
||
draggable
|
||
append-to-body
|
||
>
|
||
<el-form label-position="right" label-width="150px">
|
||
<el-form-item :label="$T('SETTINGS_LOG_FILE')">
|
||
<el-button type="primary" round size="small" @click="openFile('piclist.log')">
|
||
{{ $T('SETTINGS_CLICK_TO_OPEN') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_GUI_LOG_FILE')">
|
||
<el-button type="primary" round size="small" @click="openFile('piclist-gui-local.log')">
|
||
{{ $T('SETTINGS_CLICK_TO_OPEN') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_MANAGE_LOG_FILE')">
|
||
<el-button type="primary" round size="small" @click="openFile('manage.log')">
|
||
{{ $T('SETTINGS_CLICK_TO_OPEN') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_LOG_LEVEL')">
|
||
<el-select
|
||
v-model="formOfSetting.logLevel"
|
||
multiple
|
||
collapse-tags
|
||
style="width: 100%"
|
||
:persistent="false"
|
||
teleported
|
||
>
|
||
<el-option
|
||
v-for="(value, key) of logLevel"
|
||
:key="key"
|
||
:label="value"
|
||
:value="key"
|
||
:disabled="handleLevelDisabled(key)"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item :label="`${$T('SETTINGS_LOG_FILE_SIZE')} (MB)`">
|
||
<el-input-number
|
||
v-model="formOfSetting.logFileSizeLimit"
|
||
style="width: 100%"
|
||
:placeholder="`${$T('SETTINGS_TIPS_SUCH_AS')}：10`"
|
||
:controls="false"
|
||
:min="1"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button round @click="cancelLogLevelSetting">
|
||
{{ $T('CANCEL') }}
|
||
</el-button>
|
||
<el-button type="primary" round @click="confirmLogLevelSetting">
|
||
{{ $T('CONFIRM') }}
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog
|
||
v-model="serverVisible"
|
||
class="server-dialog"
|
||
width="60%"
|
||
:title="$T('SETTINGS_SET_PICGO_SERVER')"
|
||
:modal-append-to-body="false"
|
||
center
|
||
draggable
|
||
append-to-body
|
||
>
|
||
<div class="notice-text">
|
||
{{ $T('SETTINGS_TIPS_SERVER_NOTICE') }}
|
||
</div>
|
||
<el-form label-position="right" label-width="120px">
|
||
<el-form-item :label="$T('SETTINGS_ENABLE_SERVER')">
|
||
<el-switch v-model="server.enable" :active-text="$T('SETTINGS_OPEN')" :inactive-text="$T('SETTINGS_CLOSE')" />
|
||
</el-form-item>
|
||
<template v-if="server.enable">
|
||
<el-form-item :label="$T('SETTINGS_SET_SERVER_HOST')">
|
||
<el-input v-model="server.host" type="input" :placeholder="$T('SETTINGS_TIP_PLACEHOLDER_HOST')" />
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SET_SERVER_PORT')">
|
||
<el-input v-model="server.port" type="number" :placeholder="$T('SETTINGS_TIP_PLACEHOLDER_PORT')" />
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SET_SERVER_KEY')">
|
||
<el-input
|
||
v-model="formOfSetting.serverKey"
|
||
type="input"
|
||
:placeholder="$T('SETTINGS_TIP_PLACEHOLDER_KEY')"
|
||
/>
|
||
</el-form-item>
|
||
</template>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button round @click="cancelServerSetting">
|
||
{{ $T('CANCEL') }}
|
||
</el-button>
|
||
<el-button type="primary" round @click="confirmServerSetting">
|
||
{{ $T('CONFIRM') }}
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog
|
||
v-model="webServerVisible"
|
||
class="server-dialog"
|
||
width="60%"
|
||
:title="$T('SETTINGS_SET_WEB_SERVER')"
|
||
:modal-append-to-body="false"
|
||
align-center
|
||
draggable
|
||
append-to-body
|
||
@close="confirmWebServerSetting"
|
||
>
|
||
<div class="notice-text">
|
||
{{ $T('SETTINGS_TIPS_WEB_SERVER_NOTICE') }}
|
||
</div>
|
||
<el-form label-position="right" label-width="180px">
|
||
<el-form-item :label="$T('SETTINGS_SET_ENABLE_WEB_SERVER')">
|
||
<el-switch
|
||
v-model="formOfSetting.enableWebServer"
|
||
:active-text="$T('SETTINGS_OPEN')"
|
||
:inactive-text="$T('SETTINGS_CLOSE')"
|
||
/>
|
||
</el-form-item>
|
||
<template v-if="formOfSetting.enableWebServer">
|
||
<el-form-item :label="$T('SETTINGS_SET_WEB_SERVER_HOST')">
|
||
<el-input
|
||
v-model="formOfSetting.webServerHost"
|
||
type="input"
|
||
:placeholder="$T('SETTINGS_TIP_PLACEHOLDER_WEB_HOST')"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SET_WEB_SERVER_PORT')">
|
||
<el-input-number
|
||
v-model="formOfSetting.webServerPort"
|
||
:min="1"
|
||
:max="65535"
|
||
:placeholder="$T('SETTINGS_TIP_PLACEHOLDER_WEB_PORT')"
|
||
@change="handleWebServerPortChange"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SET_WEB_SERVER_PATH')">
|
||
<el-input
|
||
v-model="formOfSetting.webServerPath"
|
||
type="input"
|
||
:placeholder="$T('SETTINGS_SET_WEB_SERVER_PATH')"
|
||
/>
|
||
</el-form-item>
|
||
</template>
|
||
</el-form>
|
||
</el-dialog>
|
||
<el-dialog
|
||
v-model="syncVisible"
|
||
class="server-dialog"
|
||
width="60%"
|
||
:title="$T('SETTINGS_SYNC_CONFIG_TITLE')"
|
||
:modal-append-to-body="false"
|
||
center
|
||
draggable
|
||
append-to-body
|
||
>
|
||
<div class="notice-text">
|
||
{{ $T('SETTINGS_SYNC_CONFIG_NOTE') }}
|
||
</div>
|
||
<el-form label-position="right" label-width="120px">
|
||
<el-form-item :label="$T('SETTINGS_SYNC_CONFIG_SELECT_TYPE')">
|
||
<el-select v-model="sync.type" style="width: 100%" :persistent="false" teleported>
|
||
<el-option
|
||
v-for="typeitem of syncType"
|
||
:key="typeitem"
|
||
:label="typeitem.slice(0, 1).toUpperCase() + typeitem.slice(1)"
|
||
:value="typeitem"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item v-if="sync.type === 'gitea'" :label="$T('SETTINGS_SYNC_CONFIG_GITEA_HOST')">
|
||
<el-input v-model.trim="sync.endpoint" type="input" :placeholder="$T('SETTINGS_SYNC_CONFIG_GITEA_HOST')" />
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-for="inputItem in ['username', 'repo', 'branch', 'token']"
|
||
:key="inputItem"
|
||
:label="$T(`SETTINGS_SYNC_CONFIG_${sync.type.toUpperCase()}_${inputItem.toUpperCase()}` as any)"
|
||
>
|
||
<el-input
|
||
v-model.trim="sync[inputItem as any]"
|
||
type="input"
|
||
:placeholder="
|
||
$T(`SETTINGS_SYNC_CONFIG_${sync.type.toUpperCase()}_${inputItem.toUpperCase()}_PLACEHOLDER` as any)
|
||
"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item v-if="sync.type === 'github'" :label="$T('SETTINGS_SYNC_CONFIG_PROXY')">
|
||
<el-input
|
||
v-model.trim="sync.proxy"
|
||
type="input"
|
||
:placeholder="$T('SETTINGS_SYNC_CONFIG_PROXY_PLACEHOLDER')"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button round @click="cancelSyncSetting">
|
||
{{ $T('CANCEL') }}
|
||
</el-button>
|
||
<el-button type="primary" round @click="confirmSyncSetting">
|
||
{{ $T('CONFIRM') }}
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog
|
||
v-model="upDownConfigVisible"
|
||
class="server-dialog"
|
||
width="60%"
|
||
:title="$T('SETTINGS_UP_DOWN_DESC')"
|
||
:modal-append-to-body="false"
|
||
center
|
||
draggable
|
||
append-to-body
|
||
>
|
||
<el-form label-position="right" label-width="120px">
|
||
<el-form-item :label="$T('SETTINGS_SYNC_UPLOAD')">
|
||
<el-button-group>
|
||
<el-button
|
||
v-for="item in syncTaskList.slice(0, 3)"
|
||
:key="item.task"
|
||
type="primary"
|
||
plain
|
||
size="small"
|
||
@click="syncTaskFn(item.task, item.number)"
|
||
>
|
||
{{ item.label }}
|
||
</el-button>
|
||
</el-button-group>
|
||
</el-form-item>
|
||
<el-form-item :label="$T('SETTINGS_SYNC_DOWNLOAD')">
|
||
<el-button-group>
|
||
<el-button
|
||
v-for="item in syncTaskList.slice(3)"
|
||
:key="item.task"
|
||
type="primary"
|
||
plain
|
||
size="small"
|
||
@click="syncTaskFn(item.task, item.number)"
|
||
>
|
||
{{ item.label }}
|
||
</el-button>
|
||
</el-button-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
<el-dialog
|
||
v-model="imageProcessDialogVisible"
|
||
:title="$T('UPLOAD_PAGE_IMAGE_PROCESS_DIALOG_TITLE')"
|
||
width="50%"
|
||
draggable
|
||
center
|
||
align-center
|
||
append-to-body
|
||
>
|
||
<ImageProcessSetting v-model="imageProcessDialogVisible" />
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { compare } from 'compare-versions'
|
||
import { ElForm, ElMessage as $message, ElMessage, ElMessageBox, FormRules } from 'element-plus'
|
||
import { Reading, Close, Edit, InfoFilled } from '@element-plus/icons-vue'
|
||
import { IConfig } from 'piclist'
|
||
import { computed, onBeforeMount, reactive, ref, toRaw, watch } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
|
||
import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
|
||
import { i18nManager, T as $T } from '@/i18n/index'
|
||
import { buildInRenameFormatTable } from '@/manage/utils/common'
|
||
import { SHORTKEY_PAGE } from '@/router/config'
|
||
import { getConfig, saveConfig } from '@/utils/dataSender'
|
||
import { osGlobal, picBedGlobal, updatePicBedGlobal } from '@/utils/global'
|
||
|
||
import { II18nLanguage, IRPCActionType, ISartMode } from '#/types/enum'
|
||
import { enforceNumber } from '#/utils/common'
|
||
import { configPaths, ISartModeValues } from '#/utils/configPaths'
|
||
import { getLatestVersion } from '#/utils/getLatestVersion'
|
||
|
||
import pkg from 'root/package.json'
|
||
import { invokeToMain, sendRPC, triggerRPC } from '@/utils/common'
|
||
|
||
const $router = useRouter()
|
||
const activeName = ref<'system' | 'syncAndConfigure' | 'upload' | 'advanced' | 'upadte'>('system')
|
||
|
||
const shortUrlServerList = [
|
||
{
|
||
label: 'c1n',
|
||
value: 'c1n'
|
||
},
|
||
{
|
||
label: 'yourls',
|
||
value: 'yourls'
|
||
},
|
||
{
|
||
label: 'xyTom/Url-Shorten-Worker',
|
||
value: 'cf_worker'
|
||
}
|
||
]
|
||
|
||
const languageList = i18nManager.languageList.map(item => ({
|
||
label: item.label,
|
||
value: item.value
|
||
}))
|
||
|
||
const startModeList = Object.values(ISartMode).map(item => ({
|
||
label: $T(`SETTINGS_START_MODE_${item.toUpperCase().replace(/-/g, '_')}` as any),
|
||
value: item
|
||
}))
|
||
|
||
const manualPageOpenList = [
|
||
{
|
||
label: $T('MANUAL_PAGE_OPEN_BY_BUILD_IN'),
|
||
value: 'window'
|
||
},
|
||
{
|
||
label: $T('MANUAL_PAGE_OPEN_BY_BROWSER'),
|
||
value: 'browser'
|
||
}
|
||
]
|
||
|
||
const showPicBedList = computed(
|
||
() =>
|
||
picBedGlobal.value
|
||
.map(item => {
|
||
if (item.visible) {
|
||
return item.name
|
||
}
|
||
return null
|
||
})
|
||
.filter(item => item) as string[]
|
||
)
|
||
|
||
const $customLink = ref<InstanceType<typeof ElForm> | null>(null)
|
||
|
||
const customLinkRule = (_: any, value: string, callback: (arg0?: Error) => void) => {
|
||
if (!/\$url/.test(value) && !/\$fileName/.test(value) && !/\$extName/.test(value)) {
|
||
return callback(new Error($T('TIPS_MUST_CONTAINS_URL')))
|
||
} else {
|
||
return callback()
|
||
}
|
||
}
|
||
|
||
const formOfSetting = ref<ISettingForm>({
|
||
showUpdateTip: true,
|
||
autoStart: false,
|
||
rename: false,
|
||
autoRename: false,
|
||
uploadNotification: false,
|
||
uploadResultNotification: true,
|
||
miniWindowOntop: false,
|
||
autoCloseMiniWindow: false,
|
||
autoCloseMainWindow: false,
|
||
logLevel: ['all'],
|
||
autoCopy: true,
|
||
useBuiltinClipboard: true,
|
||
logFileSizeLimit: 10,
|
||
deleteCloudFile: false,
|
||
isCustomMiniIcon: false,
|
||
customMiniIcon: '',
|
||
isHideDock: false,
|
||
autoImport: false,
|
||
autoImportPicBed: [],
|
||
encodeOutputURL: false,
|
||
isAutoListenClipboard: false,
|
||
useShortUrl: false,
|
||
shortUrlServer: 'c1n',
|
||
c1nToken: '',
|
||
yourlsDomain: '',
|
||
yourlsSignature: '',
|
||
cfWorkerHost: '',
|
||
deleteLocalFile: false,
|
||
serverKey: '',
|
||
aesPassword: 'PicList-aesPassword',
|
||
enableWebServer: false,
|
||
webServerHost: '0.0.0.0',
|
||
webServerPort: 37777,
|
||
webServerPath: '',
|
||
registry: '',
|
||
proxy: '',
|
||
mainWindowWidth: 1200,
|
||
mainWindowHeight: 800
|
||
})
|
||
|
||
const proxy = ref('')
|
||
const formKeys = Object.keys(formOfSetting.value)
|
||
const autoWatchKeys = [
|
||
'showUpdateTip',
|
||
'autoImport',
|
||
'autoImportPicBed',
|
||
'useBuiltinClipboard',
|
||
'isAutoListenClipboard',
|
||
'deleteCloudFile',
|
||
'deleteLocalFile',
|
||
'rename',
|
||
'autoRename',
|
||
'enableWebServer',
|
||
'webServerHost',
|
||
'webServerPath',
|
||
'serverKey',
|
||
'uploadNotification',
|
||
'uploadResultNotification',
|
||
'autoCloseMainWindow',
|
||
'autoCloseMiniWindow',
|
||
'isCustomMiniIcon',
|
||
'c1nToken',
|
||
'yourlsDomain',
|
||
'yourlsSignature',
|
||
'cfWorkerHost',
|
||
'registry',
|
||
'proxy',
|
||
'autoCopy',
|
||
'encodeOutputURL',
|
||
'useShortUrl'
|
||
]
|
||
|
||
const addWatch = () => {
|
||
autoWatchKeys.forEach(key => {
|
||
watch(
|
||
() => formOfSetting.value[key as keyof ISettingForm],
|
||
value => {
|
||
saveConfig({
|
||
[`settings.${key}`]: value
|
||
})
|
||
}
|
||
)
|
||
})
|
||
}
|
||
|
||
const addProxyWatch = () => {
|
||
watch(proxy, value => {
|
||
saveConfig({
|
||
'picBed.proxy': value
|
||
})
|
||
})
|
||
}
|
||
|
||
const valueToOptionItem = (value: any, list: { label: string; value: any }[]) => {
|
||
return list.find(item => item.value === value) || list[0]
|
||
}
|
||
|
||
const currentLanguage = ref()
|
||
const currentStartMode = ref()
|
||
const currentManualPageOpen = ref()
|
||
const currentShortUrlServer = ref()
|
||
|
||
const logFileVisible = ref(false)
|
||
const customLinkVisible = ref(false)
|
||
const checkUpdateVisible = ref(false)
|
||
const serverVisible = ref(false)
|
||
const webServerVisible = ref(false)
|
||
const syncVisible = ref(false)
|
||
const upDownConfigVisible = ref(false)
|
||
const proxyVisible = ref(false)
|
||
const mainWindowSizeVisible = ref(false)
|
||
const advancedRenameVisible = ref(false)
|
||
const imageProcessDialogVisible = ref(false)
|
||
|
||
const rawPicGoSize = ref(false)
|
||
|
||
const customLink = reactive({
|
||
value: ''
|
||
})
|
||
|
||
const rules = reactive<FormRules>({
|
||
value: [{ validator: customLinkRule, trigger: 'blur' }]
|
||
})
|
||
|
||
const logLevel = {
|
||
all: $T('SETTINGS_LOG_LEVEL_ALL'),
|
||
success: $T('SETTINGS_LOG_LEVEL_SUCCESS'),
|
||
error: $T('SETTINGS_LOG_LEVEL_ERROR'),
|
||
info: $T('SETTINGS_LOG_LEVEL_INFO'),
|
||
warn: $T('SETTINGS_LOG_LEVEL_WARN'),
|
||
none: $T('SETTINGS_LOG_LEVEL_NONE')
|
||
}
|
||
|
||
const server = ref({
|
||
port: 36677,
|
||
host: '0.0.0.0',
|
||
enable: true
|
||
})
|
||
|
||
const advancedRename = ref({
|
||
enable: false,
|
||
format: '{filename}'
|
||
})
|
||
|
||
const sync = ref<any>({
|
||
type: 'github',
|
||
username: '',
|
||
repo: '',
|
||
branch: '',
|
||
token: '',
|
||
endpoint: '',
|
||
proxy: '',
|
||
interval: 60
|
||
})
|
||
|
||
const syncType = ['github', 'gitee', 'gitea']
|
||
|
||
async function cancelSyncSetting() {
|
||
syncVisible.value = false
|
||
sync.value = (await getConfig(configPaths.settings.sync)) || {
|
||
type: 'github',
|
||
username: '',
|
||
repo: '',
|
||
branch: '',
|
||
token: '',
|
||
endpoint: '',
|
||
proxy: '',
|
||
interval: 60
|
||
}
|
||
}
|
||
|
||
function confirmSyncSetting() {
|
||
saveConfig({
|
||
[configPaths.settings.sync]: sync.value
|
||
})
|
||
syncVisible.value = false
|
||
}
|
||
|
||
const version = pkg.version
|
||
const latestVersion = ref('')
|
||
|
||
const needUpdate = computed(() => {
|
||
if (latestVersion.value) {
|
||
return compareVersion2Update(version, latestVersion.value)
|
||
}
|
||
return false
|
||
})
|
||
|
||
onBeforeMount(() => {
|
||
initData()
|
||
})
|
||
|
||
async function initData() {
|
||
const config = (await getConfig<IConfig>()) || ({} as IConfig)
|
||
const settings = config.settings || {}
|
||
const picBed = config.picBed
|
||
formKeys.forEach(key => {
|
||
;(formOfSetting.value as any)[key as keyof ISettingForm] =
|
||
settings[key] ?? formOfSetting.value[key as keyof ISettingForm]
|
||
})
|
||
formOfSetting.value.logLevel = initArray(settings.logLevel || [], ['all'])
|
||
formOfSetting.value.autoImportPicBed = initArray(settings.autoImportPicBed || [], [])
|
||
currentLanguage.value = valueToOptionItem(settings.language || 'zh-CN', languageList)
|
||
currentStartMode.value = valueToOptionItem(settings.startMode || ISartMode.QUIET, startModeList)
|
||
currentManualPageOpen.value = valueToOptionItem(settings.manualPageOpen || 'window', manualPageOpenList)
|
||
currentShortUrlServer.value = valueToOptionItem(settings.shortUrlServer || 'c1n', shortUrlServerList)
|
||
customLink.value = settings.customLink || ''
|
||
proxy.value = picBed.proxy || ''
|
||
server.value = settings.server || {
|
||
port: 36677,
|
||
host: '0.0.0.0',
|
||
enable: true
|
||
}
|
||
advancedRename.value = config.buildIn?.rename || {
|
||
enable: false,
|
||
format: '{filename}'
|
||
}
|
||
if (advancedRename.value.enable) {
|
||
formOfSetting.value.autoRename = false
|
||
saveConfig({
|
||
[configPaths.settings.autoRename]: false
|
||
})
|
||
}
|
||
sync.value = settings.sync || {
|
||
type: 'github',
|
||
username: '',
|
||
repo: '',
|
||
branch: '',
|
||
token: '',
|
||
endpoint: '',
|
||
proxy: '',
|
||
interval: 60
|
||
}
|
||
formOfSetting.value.logFileSizeLimit = enforceNumber(settings.logFileSizeLimit) || 10
|
||
addProxyWatch()
|
||
addWatch()
|
||
}
|
||
|
||
function initArray(arrayT: string | string[], defaultValue: string[]) {
|
||
if (!Array.isArray(arrayT)) {
|
||
if (arrayT && arrayT.length > 0) {
|
||
arrayT = [arrayT]
|
||
} else {
|
||
arrayT = defaultValue
|
||
}
|
||
}
|
||
return arrayT
|
||
}
|
||
|
||
function openFile(file: string) {
|
||
sendRPC(IRPCActionType.PICLIST_OPEN_FILE, file)
|
||
}
|
||
|
||
function handleManualPageOpenChange(val: string) {
|
||
saveConfig({
|
||
[configPaths.settings.manualPageOpen]: val
|
||
})
|
||
}
|
||
|
||
function openDirectory(directory?: string, inStorePath = true) {
|
||
sendRPC(IRPCActionType.PICLIST_OPEN_DIRECTORY, directory, inStorePath)
|
||
}
|
||
|
||
function openLogSetting() {
|
||
logFileVisible.value = true
|
||
}
|
||
|
||
async function cancelCustomLink() {
|
||
customLinkVisible.value = false
|
||
customLink.value = (await getConfig<string>(configPaths.settings.customLink)) || ''
|
||
}
|
||
|
||
function confirmCustomLink() {
|
||
$customLink.value?.validate((valid: boolean) => {
|
||
if (valid) {
|
||
saveConfig(configPaths.settings.customLink, customLink.value)
|
||
customLinkVisible.value = false
|
||
}
|
||
})
|
||
}
|
||
|
||
async function handleCancelAdvancedRename() {
|
||
advancedRenameVisible.value = false
|
||
advancedRename.value = toRaw(
|
||
(await getConfig<any>(configPaths.buildIn.rename)) || {
|
||
enable: false,
|
||
format: '{filename}'
|
||
}
|
||
)
|
||
}
|
||
|
||
function handleSaveAdvancedRename() {
|
||
saveConfig(configPaths.buildIn.rename, toRaw(advancedRename.value))
|
||
if (advancedRename.value.enable) {
|
||
formOfSetting.value.autoRename = false
|
||
saveConfig(configPaths.settings.autoRename, false)
|
||
}
|
||
advancedRenameVisible.value = false
|
||
}
|
||
|
||
function handleMigrateFromPicGo() {
|
||
ElMessageBox.confirm($T('SETTINGS_MIGRATE_FROM_PICGO_CONTENT'), $T('SETTINGS_MIGRATE_FROM_PICGO_TITLE'), {
|
||
confirmButtonText: $T('CONFIRM'),
|
||
cancelButtonText: $T('CANCEL'),
|
||
type: 'warning',
|
||
center: true
|
||
})
|
||
.then(() => {
|
||
triggerRPC<boolean>(IRPCActionType.CONFIGURE_MIGRATE_FROM_PICGO)
|
||
.then(() => {
|
||
ElMessage.success($T('SETTINGS_MIGRATE_FROM_PICGO_SUCCESS'))
|
||
})
|
||
.catch(() => {
|
||
ElMessage.error($T('SETTINGS_MIGRATE_FROM_PICGO_FAILED'))
|
||
})
|
||
})
|
||
.catch(() => {
|
||
return false
|
||
})
|
||
}
|
||
|
||
function handleHideDockChange(val: ICheckBoxValueType) {
|
||
if (val && currentStartMode.value.value === ISartMode.NO_TRAY) {
|
||
ElMessage.warning($T('SETTINGS_ISHIDEDOCK_TIPS'))
|
||
formOfSetting.value.isHideDock = false
|
||
return
|
||
}
|
||
saveConfig(configPaths.settings.isHideDock, val)
|
||
sendRPC(IRPCActionType.HIDE_DOCK, val)
|
||
}
|
||
|
||
function handleShowPicBedListChange(val: ICheckBoxValueType[]) {
|
||
const list = picBedGlobal.value.map(item => {
|
||
if (!val.includes(item.name)) {
|
||
item.visible = false
|
||
} else {
|
||
item.visible = true
|
||
}
|
||
return item
|
||
})
|
||
saveConfig({
|
||
[configPaths.picBed.list]: list
|
||
})
|
||
updatePicBedGlobal()
|
||
}
|
||
|
||
function handleAutoStartChange(val: ICheckBoxValueType) {
|
||
saveConfig(configPaths.settings.autoStart, val)
|
||
sendRPC(IRPCActionType.PICLIST_AUTO_START, val)
|
||
}
|
||
|
||
function compareVersion2Update(current: string, latest: string): boolean {
|
||
return compare(current, latest, '<')
|
||
}
|
||
|
||
async function checkUpdate() {
|
||
checkUpdateVisible.value = true
|
||
latestVersion.value = (await getLatestVersion()) || $T('TIPS_NETWORK_ERROR')
|
||
}
|
||
|
||
function confirmCheckVersion() {
|
||
if (needUpdate.value) {
|
||
sendRPC(IRPCActionType.RELOAD_APP)
|
||
}
|
||
checkUpdateVisible.value = false
|
||
}
|
||
|
||
function cancelCheckVersion() {
|
||
checkUpdateVisible.value = false
|
||
}
|
||
|
||
function handleWebServerPortChange(val?: number, _?: number) {
|
||
saveConfig(configPaths.settings.webServerPort, Number(val) || 37777)
|
||
}
|
||
|
||
function confirmWebServerSetting() {
|
||
if (formOfSetting.value.enableWebServer) {
|
||
sendRPC(IRPCActionType.ADVANCED_RESTART_WEB_SERVER)
|
||
} else {
|
||
sendRPC(IRPCActionType.ADVANCED_STOP_WEB_SERVER)
|
||
}
|
||
}
|
||
|
||
async function getMainWindowSize() {
|
||
formOfSetting.value.mainWindowWidth = (await getConfig<number>(configPaths.settings.mainWindowWidth)) || 1200
|
||
formOfSetting.value.mainWindowHeight = (await getConfig<number>(configPaths.settings.mainWindowHeight)) || 800
|
||
}
|
||
|
||
async function cancelWindowSize() {
|
||
mainWindowSizeVisible.value = false
|
||
await getMainWindowSize()
|
||
}
|
||
|
||
async function confirmWindowSize() {
|
||
mainWindowSizeVisible.value = false
|
||
const width = enforceNumber(formOfSetting.value.mainWindowWidth)
|
||
const height = enforceNumber(formOfSetting.value.mainWindowHeight)
|
||
saveConfig({
|
||
[configPaths.settings.mainWindowWidth]: rawPicGoSize.value ? 800 : width < 100 ? 100 : width,
|
||
[configPaths.settings.mainWindowHeight]: rawPicGoSize.value ? 450 : height < 100 ? 100 : height
|
||
})
|
||
await getMainWindowSize()
|
||
}
|
||
|
||
function handleMiniWindowOntop(val: ICheckBoxValueType) {
|
||
saveConfig(configPaths.settings.miniWindowOntop, val)
|
||
sendRPC(IRPCActionType.MINI_WINDOW_ON_TOP, val)
|
||
}
|
||
|
||
async function handleMiniIconPath(_: Event) {
|
||
const result = await invokeToMain('openFileSelectDialog')
|
||
if (result && result[0]) {
|
||
formOfSetting.value.customMiniIcon = result[0]
|
||
saveConfig(configPaths.settings.customMiniIcon, formOfSetting.value.customMiniIcon)
|
||
sendRPC(IRPCActionType.UPDATE_MINI_WINDOW_ICON, formOfSetting.value.customMiniIcon)
|
||
}
|
||
}
|
||
|
||
function handleShortUrlServerChange(val: string) {
|
||
formOfSetting.value.shortUrlServer = val
|
||
saveConfig(configPaths.settings.shortUrlServer, val)
|
||
}
|
||
|
||
function handleAesPasswordChange(val: string) {
|
||
saveConfig(configPaths.settings.aesPassword, val || 'PicList-aesPassword')
|
||
}
|
||
|
||
function confirmLogLevelSetting() {
|
||
if (formOfSetting.value.logLevel.length === 0) {
|
||
return $message.error($T('TIPS_PLEASE_CHOOSE_LOG_LEVEL'))
|
||
}
|
||
saveConfig({
|
||
[configPaths.settings.logLevel]: formOfSetting.value.logLevel,
|
||
[configPaths.settings.logFileSizeLimit]: formOfSetting.value.logFileSizeLimit
|
||
})
|
||
logFileVisible.value = false
|
||
}
|
||
|
||
async function cancelLogLevelSetting() {
|
||
logFileVisible.value = false
|
||
let logLevel = await getConfig<string | string[]>(configPaths.settings.logLevel)
|
||
const logFileSizeLimit = (await getConfig<number>(configPaths.settings.logFileSizeLimit)) || 10
|
||
if (!Array.isArray(logLevel)) {
|
||
if (logLevel && logLevel.length > 0) {
|
||
logLevel = [logLevel]
|
||
} else {
|
||
logLevel = ['all']
|
||
}
|
||
}
|
||
formOfSetting.value.logLevel = logLevel
|
||
formOfSetting.value.logFileSizeLimit = logFileSizeLimit
|
||
}
|
||
|
||
function syncMessage(failed: number, taskType: 'UPLOAD' | 'DOWNLOAD') {
|
||
if (failed) {
|
||
$message.error($T(`SETTINGS_SYNC_${taskType}_FAILED`, { failed }))
|
||
} else {
|
||
$message.success($T(`SETTINGS_SYNC_${taskType}_SUCCESS`))
|
||
}
|
||
}
|
||
|
||
const syncTaskList = [
|
||
{
|
||
task: IRPCActionType.CONFIGURE_UPLOAD_COMMON_CONFIG,
|
||
label: $T('SETTINGS_SYNC_COMMON_CONFIG'),
|
||
number: 2
|
||
},
|
||
{
|
||
task: IRPCActionType.CONFIGURE_UPLOAD_MANAGE_CONFIG,
|
||
label: $T('SETTINGS_SYNC_MANAGE_CONFIG'),
|
||
number: 2
|
||
},
|
||
{
|
||
task: IRPCActionType.CONFIGURE_UPLOAD_ALL_CONFIG,
|
||
label: $T('SETTINGS_SYNC_UPLOAD_ALL'),
|
||
number: 4
|
||
},
|
||
{
|
||
task: IRPCActionType.CONFIGURE_DOWNLOAD_COMMON_CONFIG,
|
||
label: $T('SETTINGS_SYNC_COMMON_CONFIG'),
|
||
number: 2
|
||
},
|
||
{
|
||
task: IRPCActionType.CONFIGURE_DOWNLOAD_MANAGE_CONFIG,
|
||
label: $T('SETTINGS_SYNC_MANAGE_CONFIG'),
|
||
number: 2
|
||
},
|
||
{
|
||
task: IRPCActionType.CONFIGURE_DOWNLOAD_ALL_CONFIG,
|
||
label: $T('SETTINGS_SYNC_DOWNLOAD_ALL'),
|
||
number: 4
|
||
}
|
||
]
|
||
|
||
async function syncTaskFn(task: IRPCActionType, number: number) {
|
||
const failed = number - ((await triggerRPC<number>(task)) || 0)
|
||
syncMessage(failed, task.includes('UPLOAD') ? 'UPLOAD' : 'DOWNLOAD')
|
||
}
|
||
|
||
function confirmServerSetting() {
|
||
server.value.port = parseInt(server.value.port as unknown as string, 10)
|
||
saveConfig({
|
||
[configPaths.settings.server]: server.value
|
||
})
|
||
serverVisible.value = false
|
||
sendRPC(IRPCActionType.ADVANCED_UPDATE_SERVER)
|
||
}
|
||
|
||
async function cancelServerSetting() {
|
||
serverVisible.value = false
|
||
server.value = (await getConfig(configPaths.settings.server)) || {
|
||
port: 36677,
|
||
host: '0.0.0.0',
|
||
enable: true
|
||
}
|
||
}
|
||
|
||
function handleLevelDisabled(val: string) {
|
||
const currentLevel = val
|
||
let flagLevel
|
||
const result = formOfSetting.value.logLevel.some((item: string) => {
|
||
if (item === 'all' || item === 'none') {
|
||
flagLevel = item
|
||
}
|
||
return item === 'all' || item === 'none'
|
||
})
|
||
if (result) {
|
||
if (currentLevel !== flagLevel) {
|
||
return true
|
||
}
|
||
} else if (formOfSetting.value.logLevel.length > 0) {
|
||
if (val === 'all' || val === 'none') {
|
||
return true
|
||
}
|
||
}
|
||
return false
|
||
}
|
||
|
||
function handleLanguageChange(val: string) {
|
||
i18nManager.setCurrentLanguage(val)
|
||
saveConfig({
|
||
[configPaths.settings.language]: val
|
||
})
|
||
updatePicBedGlobal()
|
||
}
|
||
|
||
function handleStartModeChange(val: ISartModeValues) {
|
||
if (val === ISartMode.NO_TRAY) {
|
||
if (formOfSetting.value.isHideDock) {
|
||
ElMessage.warning($T('SETTINGS_ISHIDEDOCK_TIPS'))
|
||
currentStartMode.value = valueToOptionItem(ISartMode.QUIET, startModeList)
|
||
return
|
||
}
|
||
$message.info($T('TIPS_NEED_RELOAD'))
|
||
}
|
||
saveConfig({
|
||
[configPaths.settings.startMode]: val
|
||
})
|
||
}
|
||
|
||
async function goConfigPage() {
|
||
const lang = (await getConfig(configPaths.settings.language)) || II18nLanguage.ZH_CN
|
||
const url =
|
||
lang === II18nLanguage.ZH_CN ? 'https://piclist.cn/configure.html' : 'https://piclist.cn/en/configure.html'
|
||
sendRPC(IRPCActionType.OPEN_URL, url)
|
||
}
|
||
|
||
function goShortCutPage() {
|
||
$router.push({
|
||
name: SHORTKEY_PAGE
|
||
})
|
||
}
|
||
</script>
|
||
<script lang="ts">
|
||
export default {
|
||
name: 'SettingPage'
|
||
}
|
||
</script>
|
||
<style lang="stylus">
|
||
.el-message
|
||
left 60%
|
||
.view-title
|
||
.el-icon-document
|
||
margin-left 8px
|
||
cursor pointer
|
||
transition color .2s ease-in-out
|
||
&:hover
|
||
color #49B1F5
|
||
.el-tabs__item
|
||
color:white
|
||
#piclist-setting
|
||
height 100%
|
||
position absolute
|
||
left 142px
|
||
right 0
|
||
.sub-title
|
||
font-size 14px
|
||
.setting-list
|
||
height 100%
|
||
box-sizing border-box
|
||
overflow-y auto
|
||
overflow-x hidden
|
||
width 100%
|
||
.setting-list
|
||
.el-form
|
||
width: 100%
|
||
&-item
|
||
display: flex
|
||
justify-content space-between
|
||
padding-top 8px
|
||
padding-bottom 8px
|
||
border-bottom 1px solid darken(#eee, 50%)
|
||
margin-bottom 0
|
||
&:last-child
|
||
border-bottom none
|
||
&::after
|
||
display none
|
||
&::before
|
||
display none
|
||
&__content
|
||
display flex
|
||
justify-content flex-end
|
||
flex-basis: 50%
|
||
.el-form-item__label
|
||
line-height 32px
|
||
padding-bottom 0
|
||
color #eee
|
||
flex-basis: 50%
|
||
flex-shrink: 0
|
||
.el-form-item__custom-label
|
||
display flex
|
||
align-items center
|
||
.el-button-group
|
||
width 100%
|
||
.el-button
|
||
width 50%
|
||
.el-radio-group
|
||
margin-left 25px
|
||
.el-switch__label
|
||
color #eee
|
||
&.is-active
|
||
color #409EFF
|
||
.el-icon-question
|
||
margin-left 4px
|
||
color #eee
|
||
cursor pointer
|
||
transition .2s color ease-in-out
|
||
&:hover
|
||
color #409EFF
|
||
.el-checkbox-group
|
||
label
|
||
margin-right 30px
|
||
width 100px
|
||
.el-checkbox+.el-checkbox
|
||
margin-right 30px
|
||
margin-left 0
|
||
.confirm-button
|
||
width 100%
|
||
.server-dialog
|
||
.notice-text
|
||
text-align center
|
||
color: #49B1F5
|
||
.el-dialog__body
|
||
padding-top: 0
|
||
.el-form-item
|
||
margin-bottom: 10px
|
||
</style>
|