renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: Compare two arrays, get the differing elements, and delete or add them to the dockItemVisibilityList

Browse Source
This commit is contained in:
Hakadao
2023-12-21 01:35:56 +08:00
parent 3ee6ff434a
commit 45baf9d578
2 changed files with 28 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Dock/Dock.vue
View File

@@ -53,6 +53,31 @@ watch(() => settings.value.autoHideDock, (newValue) => {
onMounted(() => {
if (settings.value.autoHideDock)
hideDock.value = true
if (dockItemVisibilityList.value.length < dockItems.value.length || dockItemVisibilityList.value.length > dockItems.value.length) {
const newDockItemVisibilityList = ref<{ page: AppPage; visible: boolean }[]>([])
dockItems.value.forEach((item) => {
newDockItemVisibilityList.value.push({ page: item.page, visible: true })
})
// Compare two arrays, get the differing elements, and delete or add them to the dockItemVisibilityList
const notInNewDockItemVisibilityList = dockItemVisibilityList.value.filter(obj1 =>
!newDockItemVisibilityList.value.some(obj2 => obj1.page === obj2.page),
)
const notInDockItemVisibilityList = newDockItemVisibilityList.value.filter(obj1 =>
!dockItemVisibilityList.value.some(obj2 => obj1.page === obj2.page),
)
const allDifferences = [...notInDockItemVisibilityList, ...notInNewDockItemVisibilityList]
if (dockItemVisibilityList.value.length < dockItems.value.length) {
dockItemVisibilityList.value.push(...allDifferences)
}
else {
allDifferences.forEach((obj1) => {
dockItemVisibilityList.value = dockItemVisibilityList.value.filter(obj2 => obj2.page !== obj1.page)
})
}
}
})
function toggleDark() {
@@ -93,13 +118,13 @@ function toggleDockHide(hide: boolean) {
>
<template v-for="dockItemVisibility in dockItemVisibilityList" :key="dockItemVisibility.page">
<template v-if="dockItemVisibility.visible">
<Tooltip :content="dockItems.find((item) => item.page === dockItemVisibility.page)!.label" :placement="tooltipPlacement">
<Tooltip :content="dockItems.find((item) => item.page === dockItemVisibility.page)?.label ?? ''" :placement="tooltipPlacement">
<button
class="dock-item"
:class="{ active: activatedPage === dockItemVisibility.page }"
@click="emit('change-page', dockItemVisibility.page)"
>
<Icon :icon="dockItems.find((item) => item.page === dockItemVisibility.page)!.icon" />
<Icon :icon="dockItems.find((item) => item.page === dockItemVisibility.page)?.icon ?? ''" />
</button>
</Tooltip>
</template>

12
src/components/Settings/components/General.vue
View File

@@ -126,20 +126,10 @@ watch(() => settings.value.language, (newValue) => {
<line-md:watch v-if="element.visible" cursor-pointer />
<line-md:watch-off v-else cursor-pointer />
</div>
{{ pageOptions.find(option => option.value === element.page)!.label }}
{{ pageOptions.find(option => option.value === element.page)?.label }}
</div>
</template>
</draggable>
<!-- <ul flex="~ gap-2">
<li
v-for="page in pageOptions" :key="page.value"
flex="~ gap-2 items-center" p="x-4 y-2" bg="$bew-fill-1" rounded="$bew-radius"
>
<line-md:watch />
{{ page.label }}
</li>
</ul> -->
</SettingsItem>
</SettingsItemGroup>
</div>