mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Convert to Vue3 syntax
This commit is contained in:
parent
a61922ecc5
commit
32dbb93758
@ -37,10 +37,12 @@
|
||||
v-for="[id, type] of Object.entries(allSideCards)"
|
||||
:key="id"
|
||||
class="filter-side-card-switch feeds-filter-switch"
|
||||
@click="toggleBlockSide(id)"
|
||||
@click="toggleBlockSide(parseInt(id))"
|
||||
>
|
||||
<label :class="{ disabled: sideDisabled(id) }">
|
||||
<span class="name" :class="{ disabled: sideDisabled(id) }">{{ type.displayName }}</span>
|
||||
<label :class="{ disabled: sideDisabled(parseInt(id)) }">
|
||||
<span class="name" :class="{ disabled: sideDisabled(parseInt(id)) }">{{
|
||||
type.displayName
|
||||
}}</span>
|
||||
<VIcon :size="16" class="disabled" icon="mdi-cancel"></VIcon>
|
||||
<VIcon :size="16" icon="mdi-check"></VIcon>
|
||||
</label>
|
||||
@ -49,7 +51,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, onMounted, defineAsyncComponent } from 'vue'
|
||||
import {
|
||||
FeedsCard,
|
||||
FeedsCardType,
|
||||
@ -64,11 +67,15 @@ import { VIcon, TextBox, VButton } from '@/ui'
|
||||
import { FeedsFilterOptions } from './options'
|
||||
import { hasBlockedPattern } from './pattern'
|
||||
|
||||
const FilterTypeSwitch = defineAsyncComponent(() => import('./FilterTypeSwitch.vue'))
|
||||
|
||||
const { options } = getComponentSettings<FeedsFilterOptions>('feedsFilter')
|
||||
|
||||
interface SideCardType {
|
||||
className: string
|
||||
displayName: string
|
||||
}
|
||||
|
||||
const sideCards: { [id: number]: SideCardType } = {
|
||||
0: {
|
||||
className: 'profile',
|
||||
@ -103,126 +110,124 @@ const sideCards: { [id: number]: SideCardType } = {
|
||||
displayName: '热搜',
|
||||
},
|
||||
}
|
||||
|
||||
if (getComponentSettings('extendFeedsLive').enabled) {
|
||||
delete sideCards[3]
|
||||
}
|
||||
|
||||
let cardsManager: typeof import('@/components/feeds/api').feedsCardsManager
|
||||
const sideBlock = 'feeds-filter-side-block-'
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
FilterTypeSwitch: () => import('./FilterTypeSwitch.vue'),
|
||||
VIcon,
|
||||
TextBox,
|
||||
VButton,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
allTypes: [] as [string, FeedsCardType][],
|
||||
patterns: [...options.patterns],
|
||||
newPattern: '',
|
||||
allSideCards: sideCards,
|
||||
blockSideCards: [...options.sideCards],
|
||||
collapse: true,
|
||||
const allTypes = ref<[string, FeedsCardType][]>([])
|
||||
const patterns = reactive([...options.patterns])
|
||||
const newPattern = ref('')
|
||||
const allSideCards = reactive(sideCards)
|
||||
const blockSideCards = reactive([...options.sideCards])
|
||||
const collapse = ref(true)
|
||||
|
||||
const updateCard = (card: FeedsCard) => {
|
||||
const blockableCard = {
|
||||
...card,
|
||||
}
|
||||
if (card.type === feedsCardTypes.repost) {
|
||||
blockableCard.text += `\n${(card as RepostFeedsCard).repostText}`
|
||||
}
|
||||
const block = options.patterns.some(p => hasBlockedPattern(p, blockableCard))
|
||||
if (block) {
|
||||
card.element.classList.add('pattern-block')
|
||||
} else {
|
||||
card.element.classList.remove('pattern-block')
|
||||
}
|
||||
}
|
||||
|
||||
watch(patterns, () => {
|
||||
options.patterns = patterns
|
||||
if (cardsManager) {
|
||||
cardsManager.cards.forEach(card => updateCard(lodash.clone(card)))
|
||||
}
|
||||
})
|
||||
|
||||
const deletePattern = (pattern: string) => {
|
||||
const index = patterns.indexOf(pattern)
|
||||
if (index !== -1) {
|
||||
patterns.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
const addPattern = (pattern: string) => {
|
||||
if (pattern && !patterns.includes(pattern)) {
|
||||
patterns.push(pattern)
|
||||
}
|
||||
newPattern.value = ''
|
||||
}
|
||||
|
||||
const updateBlockSide = () => {
|
||||
Object.entries(sideCards).forEach(([id, type]) => {
|
||||
const name = sideBlock + type.className
|
||||
if (blockSideCards.includes(parseInt(id))) {
|
||||
document.body.classList.add(name)
|
||||
} else {
|
||||
document.body.classList.remove(name)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
patterns() {
|
||||
options.patterns = this.patterns
|
||||
if (cardsManager) {
|
||||
cardsManager.cards.forEach(card => this.updateCard(lodash.clone(card)))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const toggleBlockSide = (id: number) => {
|
||||
const index = blockSideCards.indexOf(id)
|
||||
const type = sideCards[id]
|
||||
if (index !== -1) {
|
||||
blockSideCards.splice(index, 1)
|
||||
document.body.classList.remove(sideBlock + type.className)
|
||||
} else {
|
||||
blockSideCards.push(id)
|
||||
document.body.classList.add(sideBlock + type.className)
|
||||
}
|
||||
options.sideCards = blockSideCards
|
||||
}
|
||||
|
||||
const sideDisabled = (id: number) => {
|
||||
return blockSideCards.includes(id)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
updateBlockSide()
|
||||
const tabBar = await select('.feed-card .tab-bar, .bili-dyn-list-tabs__list')
|
||||
if (!tabBar) {
|
||||
console.error('tabBar not found')
|
||||
return
|
||||
}
|
||||
document.body.classList.add('enable-feeds-filter')
|
||||
const specialTypes = {
|
||||
'self-repost': {
|
||||
id: -1,
|
||||
name: '自转发',
|
||||
} as FeedsCardType,
|
||||
}
|
||||
allTypes.value = Object.entries(feedsCardTypes)
|
||||
.concat(Object.entries(specialTypes))
|
||||
.filter(([, type]) => type.id <= 2048 && type.id !== 0)
|
||||
.map(([name, type]) => [name, lodash.clone(type)])
|
||||
cardsManager = await forEachFeedsCard({
|
||||
added: card => {
|
||||
updateCard(lodash.clone(card))
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
this.updateBlockSide()
|
||||
const tabBar = await select('.feed-card .tab-bar, .bili-dyn-list-tabs__list')
|
||||
if (!tabBar) {
|
||||
console.error('tabBar not found')
|
||||
return
|
||||
}
|
||||
document.body.classList.add('enable-feeds-filter')
|
||||
const specialTypes = {
|
||||
'self-repost': {
|
||||
id: -1,
|
||||
name: '自转发',
|
||||
} as FeedsCardType,
|
||||
}
|
||||
this.allTypes = Object.entries(feedsCardTypes)
|
||||
.concat(Object.entries(specialTypes))
|
||||
.filter(([, type]) => type.id <= 2048 && type.id !== 0)
|
||||
.map(([name, type]) => [name, lodash.clone(type)])
|
||||
cardsManager = await forEachFeedsCard({
|
||||
added: card => {
|
||||
this.updateCard(lodash.clone(card))
|
||||
},
|
||||
})
|
||||
if (cardsManager.managerType === 'v1') {
|
||||
const tab = tabBar.querySelector('.tab:nth-child(1) .tab-text') as HTMLAnchorElement
|
||||
attributes(tab, () => {
|
||||
document.body.classList.toggle('by-type', !tab.classList.contains('selected'))
|
||||
})
|
||||
if (cardsManager.managerType === 'v1') {
|
||||
const tab = tabBar.querySelector('.tab:nth-child(1) .tab-text') as HTMLAnchorElement
|
||||
attributes(tab, () => {
|
||||
document.body.classList.toggle('by-type', !tab.classList.contains('selected'))
|
||||
})
|
||||
}
|
||||
if (cardsManager.managerType === 'v2') {
|
||||
const mainContainer = (await select('.bili-dyn-home--member main')) as HTMLElement
|
||||
/** 类型过滤选中"全部" */
|
||||
const isAllTypesSelected = () => Boolean(dq('.bili-dyn-list-tabs__item:first-child.active'))
|
||||
/** 关注列表选中"全部动态" */
|
||||
const isAllUpsSelected = () => Boolean(dq('.bili-dyn-up-list__item:first-child.active'))
|
||||
attributesSubtree(mainContainer, () => {
|
||||
document.body.classList.toggle('by-type', isAllUpsSelected() && !isAllTypesSelected())
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateCard(card: FeedsCard) {
|
||||
const blockableCard = {
|
||||
...card,
|
||||
}
|
||||
if (card.type === feedsCardTypes.repost) {
|
||||
blockableCard.text += `\n${(card as RepostFeedsCard).repostText}`
|
||||
}
|
||||
const block = options.patterns.some(p => hasBlockedPattern(p, blockableCard))
|
||||
if (block) {
|
||||
card.element.classList.add('pattern-block')
|
||||
} else {
|
||||
card.element.classList.remove('pattern-block')
|
||||
}
|
||||
},
|
||||
deletePattern(pattern: string) {
|
||||
const index = options.patterns.indexOf(pattern)
|
||||
if (index !== -1) {
|
||||
this.patterns.splice(index, 1)
|
||||
}
|
||||
},
|
||||
addPattern(pattern: string) {
|
||||
if (pattern && !this.patterns.includes(pattern)) {
|
||||
this.patterns.push(pattern)
|
||||
}
|
||||
this.newPattern = ''
|
||||
},
|
||||
updateBlockSide() {
|
||||
Object.entries(sideCards).forEach(([id, type]) => {
|
||||
const name = sideBlock + type.className
|
||||
document.body.classList[this.blockSideCards.includes(id) ? 'add' : 'remove'](name)
|
||||
})
|
||||
},
|
||||
toggleBlockSide(id: number) {
|
||||
const index = this.blockSideCards.indexOf(id)
|
||||
const type = sideCards[id]
|
||||
if (index !== -1) {
|
||||
this.blockSideCards.splice(index, 1)
|
||||
document.body.classList.remove(sideBlock + type.className)
|
||||
} else {
|
||||
this.blockSideCards.push(id)
|
||||
document.body.classList.add(sideBlock + type.className)
|
||||
}
|
||||
options.sideCards = this.blockSideCards
|
||||
},
|
||||
sideDisabled(id: number) {
|
||||
return this.blockSideCards.includes(id)
|
||||
},
|
||||
},
|
||||
}
|
||||
if (cardsManager.managerType === 'v2') {
|
||||
const mainContainer = (await select('.bili-dyn-home--member main')) as HTMLElement
|
||||
/** 类型过滤选中"全部" */
|
||||
const isAllTypesSelected = () => Boolean(dq('.bili-dyn-list-tabs__item:first-child.active'))
|
||||
/** 关注列表选中"全部动态" */
|
||||
const isAllUpsSelected = () => Boolean(dq('.bili-dyn-up-list__item:first-child.active'))
|
||||
attributesSubtree(mainContainer, () => {
|
||||
document.body.classList.toggle('by-type', isAllUpsSelected() && !isAllTypesSelected())
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user