Feature: optimize memory use and loading and searching speed of manage page for 30 fold

This commit is contained in:
萌萌哒赫萝
2023-09-11 07:25:42 -07:00
parent 5392d9e9e7
commit fb070e7740
18 changed files with 462 additions and 402 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -6,15 +6,16 @@
stretch
style="height: calc(100vh - 50px);width: 100%;overflow-x: hidden;"
tab-position="left"
lazy
@tab-change="getExistingConfig(activeName)"
>
<el-tab-pane
name="login"
:label="$T('MANAGE_LOGIN_PAGE_PANE_NAME')"
style="width: 100%;overflow-y: scroll;height: calc(100vh - 50px);"
lazy
>
<el-alert
v-loading="isLoading"
:title="$T('MANAGE_LOGIN_PAGE_PANE_DESC')"
type="success"
show-icon
@@ -42,6 +43,8 @@
placement="top"
:width="300"
trigger="click"
:persistent="false"
teleported
>
<el-table
:data="formObjToTableData(item.config)"
@@ -75,6 +78,8 @@
:content="item.alias"
placement="top"
:disabled="isNeedToShorten(item.alias)"
:persistent="false"
teleported
>
{{ isNeedToShorten(item.alias) ? safeSliceF(item.alias, 17) + '...' : item.alias }}
</el-tooltip>
@@ -152,6 +157,8 @@
effect="dark"
:content="supportedPicBedList[item.icon].configOptions[option].tooltip"
placement="right"
:persistent="false"
teleported
>
<el-icon
color="#409EFF"
@@ -169,8 +176,7 @@
<el-switch
v-else-if="supportedPicBedList[item.icon].configOptions[option].type === 'boolean'"
v-model="configResult[item.icon + '.' + option]"
active-color="#13ce66"
inactive-color="#ff4949"
style="--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
/>
<el-input
v-else-if="supportedPicBedList[item.icon].configOptions[option].type === 'number'"
@@ -181,6 +187,8 @@
v-else-if="supportedPicBedList[item.icon].configOptions[option].type === 'select'"
v-model="configResult[item.icon + '.' + option]"
:placeholder="$T('MANAGE_LOGIN_PAGE_PANE_SELECT_PLACEHOLDER')"
:persistent="false"
teleported
>
<el-option
v-for="i in Object.entries(supportedPicBedList[item.icon].configOptions[option].selectOptions)"
@@ -198,6 +206,7 @@
style="margin-left: 10vw"
placement="top"
:disabled="currentAliasList.length === 0"
teleported
>
{{ $T('MANAGE_LOGIN_PAGE_PANE_IMPORT') }}
<template #dropdown>
@@ -298,7 +307,6 @@ import { T as $T } from '@/i18n'
const manageStore = useManageStore()
const router = useRouter()
const isLoading = ref(false)
const activeName = ref('login')
const configResult:IStringKeyMap = reactive({})
@@ -820,9 +828,8 @@ async function transUpToManage (config: IUploaderConfigListItem, picBedName: str
importedNewConfig[alias] = resultMap
}
onMounted(async () => {
await getCurrentConfigList()
getAllConfigAliasArray()
onMounted(() => {
getCurrentConfigList()
})
</script>

View File

@@ -27,6 +27,8 @@
effect="dark"
:content="$T('MANAGE_MAIN_PAGE_NEW_BUCKET')"
placement="right"
:persistent="false"
teleported
popper-class="layout__menu__button__divider__tooltip"
>
<el-icon
@@ -143,6 +145,7 @@
<el-dialog
v-model="picBedSwitchDialogVisible"
top="30vh"
append-to-body
>
<div
class="choice-cos"
@@ -195,6 +198,7 @@
<el-drawer
v-model="nweBucketDrawerVisible"
class="layout__addNewBucket"
append-to-body
>
<el-form
label-position="top"
@@ -240,6 +244,8 @@
v-if="newBucketConfig[currentPicBedName].configOptions[option].component === 'select'"
v-model="newBucketConfigResult[currentPicBedName+'.'+option]"
size="large"
:persistent="false"
teleported
>
<el-option
v-for="item in Object.keys(newBucketConfig[currentPicBedName].configOptions[option].options)"

View File

@@ -34,6 +34,8 @@
effect="dark"
:content="$T('MANAGE_SETTING_AUTO_FRESH_TIPS')"
placement="right"
:persistent="false"
teleported
>
<el-icon>
<InfoFilled />
@@ -43,9 +45,7 @@
</template>
<el-switch
v-model="form.isAutoRefresh"
style="position:absolute;right: 0;"
active-color="#13ce66"
inactive-color="#ff4949"
style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
@change="handleIsAutoRefreshChange"
/>
</el-form-item>
@@ -66,6 +66,8 @@
effect="dark"
:content="$T('MANAGE_SETTING_CLEAR_CACHE_TIPS')"
placement="right"
:persistent="false"
teleported
>
<el-icon>
<InfoFilled />
@@ -78,6 +80,8 @@
:confirm-button-text="$T('CONFIRM')"
:cancel-button-text="$T('CANCEL')"
hide-icon
:persistent="false"
teleported
@confirm="handleClearDb"
>
<template #reference>
@@ -101,9 +105,7 @@
</template>
<el-switch
v-model="form.isShowThumbnail"
style="position:absolute;right: 0;"
active-color="#13ce66"
inactive-color="#ff4949"
style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
@change="handleIsShowThumbnailChange"
/>
</el-form-item>
@@ -117,11 +119,9 @@
</template>
<el-switch
v-model="form.isShowList"
style="position:absolute;right: 0;"
style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
:active-text="$T('MANAGE_SETTING_SHOW_FILE_LIST_TYPE_LIST')"
:inactive-text="$T('MANAGE_SETTING_SHOW_FILE_LIST_TYPE_CARD')"
active-color="#13ce66"
inactive-color="orange"
@change="handleIsShowListChange"
/>
</el-form-item>
@@ -135,6 +135,8 @@
effect="dark"
:content="$T('MANAGE_SETTING_FORCE_CUSTOM_URL_HTTPS_TIPS')"
placement="right"
:persistent="false"
teleported
>
<el-icon>
<InfoFilled />
@@ -144,9 +146,7 @@
</template>
<el-switch
v-model="form.isForceCustomUrlHttps"
style="position:absolute;right: 0;"
active-color="#13ce66"
inactive-color="#ff4949"
style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
@change="handleIsForceCustomUrlHttpsChange"
/>
</el-form-item>
@@ -160,6 +160,8 @@
effect="dark"
:content="$T('MANAGE_SETTING_ENCODE_URL_WHEN_COPY_TIPS')"
placement="right"
:persistent="false"
teleported
>
<el-icon>
<InfoFilled />
@@ -169,9 +171,7 @@
</template>
<el-switch
v-model="form.isEncodeUrl"
style="position:absolute;right: 0;"
active-color="#13ce66"
inactive-color="#ff4949"
style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
@change="handleIsEncodeUrlChange"
/>
</el-form-item>
@@ -185,6 +185,8 @@
effect="dark"
:content="$T('MANAGE_SETTING_KEEP_FOLDER_STRUCTURE_UPLOAD_TIPS')"
placement="right"
:persistent="false"
teleported
>
<el-icon>
<InfoFilled />
@@ -194,9 +196,7 @@
</template>
<el-switch
v-model="form.isUploadKeepDirStructure"
style="position:absolute;right: 0;"
active-color="#13ce66"
inactive-color="#ff4949"
style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
@change="handleIsUploadKeepDirStructureChange"
/>
</el-form-item>
@@ -212,6 +212,8 @@
effect="dark"
:content="$T('MANAGE_SETTING_KEEP_FOLDER_STRUCTURE_DOWNLOAD_FILE_TIPS')"
placement="right"
:persistent="false"
teleported
>
<el-icon>
<InfoFilled />
@@ -221,9 +223,7 @@
</template>
<el-switch
v-model="form.isDownloadFileKeepDirStructure"
style="position:absolute;right: 0;"
active-color="#13ce66"
inactive-color="#ff4949"
style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
@change="handleIsDownloadFileKeepDirStructureChange"
/>
</el-form-item>
@@ -239,6 +239,8 @@
effect="dark"
:content="$T('MANAGE_SETTING_KEEP_FOLDER_STRUCTURE_DOWNLOAD_FILE_TIPS')"
placement="right"
:persistent="false"
teleported
>
<el-icon>
<InfoFilled />
@@ -248,9 +250,7 @@
</template>
<el-switch
v-model="form.isDownloadFolderKeepDirStructure"
style="position:absolute;right: 0;"
active-color="#13ce66"
inactive-color="#ff4949"
style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
@change="handleIsDownloadFolderKeepDirStructureChange"
/>
</el-form-item>
@@ -264,6 +264,8 @@
effect="dark"
:content="$T('MANAGE_SETTING_MAX_DOWNLOAD_FILE_SIZE_TIPS')"
placement="right"
:persistent="false"
teleported
>
<el-icon>
<InfoFilled />
@@ -290,6 +292,8 @@
effect="dark"
:content="$T('MANAGE_SETTING_SEARCH_IGNORE_CASE_TIPS')"
placement="right"
:persistent="false"
teleported
>
<el-icon>
<InfoFilled />
@@ -299,9 +303,7 @@
</template>
<el-switch
v-model="form.isIgnoreCase"
style="position:absolute;right: 0;"
active-color="#13ce66"
inactive-color="#ff4949"
style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
@change="handleisIgnoreCaseChange"
/>
</el-form-item>
@@ -315,6 +317,8 @@
effect="dark"
:content="$T('MANAGE_SETTING_TIMESTAMP_RENAME_TIPS')"
placement="right"
:persistent="false"
teleported
>
<el-icon>
<InfoFilled />
@@ -324,9 +328,7 @@
</template>
<el-switch
v-model="form.timestampRename"
style="position:absolute;right: 0;"
active-color="#13ce66"
inactive-color="#ff4949"
style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
@change="handleTimestampRenameChange"
/>
</el-form-item>
@@ -340,6 +342,8 @@
effect="dark"
:content="$T('MANAGE_SETTING_RANDOM_STRING_RENAME_TIPS')"
placement="right"
:persistent="false"
teleported
>
<el-icon>
<InfoFilled />
@@ -349,9 +353,7 @@
</template>
<el-switch
v-model="form.randomStringRename"
style="position:absolute;right: 0;"
active-color="#13ce66"
inactive-color="#ff4949"
style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
@change="handleRandomStringRenameChange"
/>
</el-form-item>
@@ -365,6 +367,8 @@
effect="dark"
:content="$T('MANAGE_SETTING_CUSTOM_RENAME_TIPS')"
placement="right"
:persistent="false"
teleported
>
<el-icon>
<InfoFilled />
@@ -374,9 +378,7 @@
</template>
<el-switch
v-model="form.customRename"
style="position:absolute;right: 0;"
active-color="#13ce66"
inactive-color="#ff4949"
style="position:absolute;right: 0;--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;"
@change="handleCustomRenameChange"
/>
</el-form-item>