Convert to Vue3 syntax

This commit is contained in:
the1812 2025-07-15 08:20:52 +08:00
parent a61922ecc5
commit 32dbb93758

View File

@ -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>