mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add side card filter
This commit is contained in:
parent
bee15d2bfc
commit
aa4d0dd596
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -53,9 +53,9 @@
|
||||
"expand-description.min.js": "A56857AD6B1C9F431B233D188E857D30DD5A2EB644986DE32A21280B1B7BC7A7",
|
||||
"favorites-redirect.min.js": "70D6ECCE0402AA76387D2A3288C1148C60CC88D5378B7A2BDC813F3F78E4EE84",
|
||||
"feeds-apis.min.js": "ED1FFDEBC22680C5089F9D30CF667535FB99881C96A969DB47BC70BF095A99E8",
|
||||
"feeds-filter-card.vue.min.js": "5922DD76080D5DD57C860018749BD3D82530DDBD537DBFB5D540D10C03645775",
|
||||
"feeds-filter-card.vue.min.js": "3A7F8F402EA46E43B718506329814953C9E358A8AF94088D4E5745D48296D80B",
|
||||
"feeds-filter.min.js": "10557E498B8BADA3C1C03E8C1DCD6FB24DBA2DA27A5A03BD861054F7E2989D46",
|
||||
"filter-type-switch.vue.min.js": "86F40D40C2464A56A2A0D32A0B94860DD376D1FE7850836B4CE37B767312BBE7",
|
||||
"filter-type-switch.vue.min.js": "E06B00EF48F3CCFACC82B858A266CE0DF48F8332C5900B3AD579330D4C6D3125",
|
||||
"fix-fullscreen.min.js": "C0628A7CABB4421FCBD7663700EF9965C96F6D79979B9F7523A9F9B0B009C8B6",
|
||||
"fold-comment.min.css": "74DF4566EB80AD7078E65E8B68633E05FC41D3B4E47A20D6E415E8A743F35378",
|
||||
"fold-comment.min.js": "B149A9A8EA03DCB39BC4FF59591BE9D8E7BA45B2049A545F9611251EBE85FEA9",
|
||||
|
||||
BIN
min/bundle.zip
BIN
min/bundle.zip
Binary file not shown.
2
min/feeds-filter-card.vue.min.js
vendored
2
min/feeds-filter-card.vue.min.js
vendored
File diff suppressed because one or more lines are too long
2
min/filter-type-switch.vue.min.js
vendored
2
min/filter-type-switch.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(e,t)=>{const i=`<div class=filter-type-switch><label :class={disabled}><span class=name :class={disabled}>{{type.name}}</span><input type=checkbox v-model=disabled><icon class=disabled type=mdi icon=cancel v-if=disabled></icon><icon type=mdi icon=check v-else></icon></label></div>`;t.applyStyleFromText(`.filter-type-switch label{cursor:pointer;margin:0;padding:4px 8px;border-radius:4px;background-color:#0001;display:flex;align-items:center;justify-content:space-between;border:1px solid transparent}.filter-type-switch label .name{font-size:12px}.filter-type-switch label .disabled{color:var(--theme-color)!important}.filter-type-switch label:hover{background-color:#0002}.filter-type-switch label.disabled{border-color:var(--theme-color)}.filter-type-switch label input{display:none}.filter-type-switch label .be-icon{font-size:16px}`,"filter-type-switch-style");return{export:Object.assign({template:i},{components:{Icon:()=>t.importAsync("icon.vue")},props:["name","type"],methods:{setFilter(t,i=true){document.body.classList[t?"add":"remove"](`feeds-filter-block-${this.name}`);if(!i){return}if(t){e.feedsFilterTypes.push(this.type.id)}else{const t=e.feedsFilterTypes.indexOf(this.type.id);if(t!==-1){e.feedsFilterTypes.splice(t,1)}}e.feedsFilterTypes=e.feedsFilterTypes}},data(){const t=e.feedsFilterTypes.includes(this.type.id);this.setFilter(t,false);return{disabled:t}},watch:{disabled(e){this.setFilter(e)}}})}}})();
|
||||
(()=>{return(e,s)=>{const i=`<div class="filter-type-switch feeds-filter-swtich"><label :class={disabled}><span class=name :class={disabled}>{{type.name}}</span><input type=checkbox v-model=disabled><icon class=disabled type=mdi icon=cancel v-if=disabled></icon><icon type=mdi icon=check v-else></icon></label></div>`;return{export:Object.assign({template:i},{components:{Icon:()=>s.importAsync("icon.vue")},props:["name","type"],methods:{setFilter(s,i=true){document.body.classList[s?"add":"remove"](`feeds-filter-block-${this.name}`);if(!i){return}if(s){e.feedsFilterTypes.push(this.type.id)}else{const s=e.feedsFilterTypes.indexOf(this.type.id);if(s!==-1){e.feedsFilterTypes.splice(s,1)}}e.feedsFilterTypes=e.feedsFilterTypes}},data(){const s=e.feedsFilterTypes.includes(this.type.id);this.setFilter(s,false);return{disabled:s}},watch:{disabled(e){this.setFilter(e)}}})}}})();
|
||||
@ -21,11 +21,53 @@
|
||||
/>
|
||||
<icon title="添加" type="mdi" icon="plus" @click.native="addPattern(newPattern)"></icon>
|
||||
</div>
|
||||
<h2>侧边栏</h2>
|
||||
<div class="filter-side-card">
|
||||
<div
|
||||
class="filter-side-card-switch feeds-filter-swtich"
|
||||
v-for="[id, type] of Object.entries(allSideCards)"
|
||||
:key="id"
|
||||
@click="toggleBlockSide(id)"
|
||||
>
|
||||
<label :class="{disabled: sideDisabled(id)}">
|
||||
<span class="name" :class="{disabled: sideDisabled(id)}">{{type.displayName}}</span>
|
||||
<icon class="disabled" type="mdi" icon="cancel"></icon>
|
||||
<icon type="mdi" icon="check"></icon>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { FeedsCard, FeedsCardType } from '../feeds-apis'
|
||||
interface SideCardType {
|
||||
className: string
|
||||
displayName: string
|
||||
}
|
||||
const sideCards: { [id: number]: SideCardType } = {
|
||||
0: {
|
||||
className: 'profile',
|
||||
displayName: '个人资料'
|
||||
},
|
||||
1: {
|
||||
className: 'following-tags',
|
||||
displayName: '关注的话题'
|
||||
},
|
||||
2: {
|
||||
className: 'notice',
|
||||
displayName: '公告栏'
|
||||
},
|
||||
3: {
|
||||
className: 'live',
|
||||
displayName: '正在直播'
|
||||
},
|
||||
4: {
|
||||
className: 'trending-tags',
|
||||
displayName: '热门话题'
|
||||
}
|
||||
}
|
||||
const sideBlock = 'feeds-filter-side-block-'
|
||||
export default {
|
||||
components: {
|
||||
FilterTypeSwitch: () => import('./filter-type-switch.vue'),
|
||||
@ -43,8 +85,10 @@ export default {
|
||||
return settings.feedsFilterPatterns.some(pattern => {
|
||||
const upNameMatch = pattern.match(/(.+) up:([^ ]+)/)
|
||||
if (upNameMatch) {
|
||||
return testPattern(upNameMatch[1], card.text) &&
|
||||
return (
|
||||
testPattern(upNameMatch[1], card.text) &&
|
||||
testPattern(upNameMatch[2], card.username)
|
||||
)
|
||||
}
|
||||
return testPattern(pattern, card.text)
|
||||
})
|
||||
@ -66,6 +110,29 @@ export default {
|
||||
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)
|
||||
}
|
||||
settings.feedsFilterSideCards = this.blockSideCards
|
||||
},
|
||||
sideDisabled(id: number) {
|
||||
return this.blockSideCards.includes(id)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -83,10 +150,13 @@ export default {
|
||||
allTypes: [] as [string, FeedsCardType][],
|
||||
patterns: [...settings.feedsFilterPatterns],
|
||||
newPattern: '',
|
||||
feedsCardsManager: null
|
||||
feedsCardsManager: null,
|
||||
allSideCards: sideCards,
|
||||
blockSideCards: [...settings.feedsFilterSideCards]
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.updateBlockSide()
|
||||
const tabBar = await SpinQuery.select('.feed-card .tab-bar')
|
||||
if (!tabBar) {
|
||||
console.error('tabBar not found')
|
||||
@ -137,6 +207,37 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
$side-block: 'feeds-filter-side-block';
|
||||
.left-panel > *,
|
||||
.right-panel > * {
|
||||
margin: 0 !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
&.#{$side-block}-profile {
|
||||
.left-panel .user-wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
&.#{$side-block}-following-tags {
|
||||
.left-panel .tag-panel {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
&.#{$side-block}-notice {
|
||||
.right-panel .notice-panel {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
&.#{$side-block}-live {
|
||||
.right-panel .live-panel {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
&.#{$side-block}-trending-tags {
|
||||
.right-panel .tag-panel {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.feed-card .card.pattern-block {
|
||||
display: none !important;
|
||||
}
|
||||
@ -147,7 +248,6 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
|
||||
padding: 12px 16px;
|
||||
float: left;
|
||||
border-radius: 4px;
|
||||
margin-top: 8px;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
@ -175,17 +275,61 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.feeds-filter-swtich {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #0001;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid transparent;
|
||||
|
||||
.name {
|
||||
font-size: 12px;
|
||||
}
|
||||
.disabled {
|
||||
color: var(--theme-color) !important;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #0002;
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.be-icon {
|
||||
font-size: 16px;
|
||||
&.disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.disabled {
|
||||
border-color: var(--theme-color);
|
||||
.be-icon {
|
||||
display: none;
|
||||
&.disabled {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter-type-switch {
|
||||
flex: 0 0 49%;
|
||||
}
|
||||
.filter-side-card-switch {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
.filter-types {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18px;
|
||||
.filter-type-switch {
|
||||
flex: 0 0 49%;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter-patterns {
|
||||
&:not(:empty) {
|
||||
@ -211,6 +355,7 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
|
||||
.add-pattern {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
input {
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="filter-type-switch">
|
||||
<div class="filter-type-switch feeds-filter-swtich">
|
||||
<label :class="{disabled}">
|
||||
<span class="name" :class="{disabled}">{{type.name}}</span>
|
||||
<input type="checkbox" v-model="disabled" />
|
||||
@ -47,39 +47,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.filter-type-switch {
|
||||
label {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
background-color: #0001;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid transparent;
|
||||
|
||||
.name {
|
||||
font-size: 12px;
|
||||
}
|
||||
.disabled {
|
||||
color: var(--theme-color) !important;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #0002;
|
||||
}
|
||||
&.disabled {
|
||||
border-color: var(--theme-color);
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.be-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user