Improve feeds filter

This commit is contained in:
the1812 2020-03-27 15:39:05 +08:00
parent cc0090a152
commit 91c5b80bea
10 changed files with 87 additions and 40 deletions

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

View File

@ -58,6 +58,7 @@
"dark-navbar.min.css": "A2D91F11127D165571ACCC53004EDDB118CEE110F9B020D7E0541E1C8FAEA478", "dark-navbar.min.css": "A2D91F11127D165571ACCC53004EDDB118CEE110F9B020D7E0541E1C8FAEA478",
"dark-schedule.min.js": "853C446547603F4F0425F19F09F73335C9EC451A790C1C07E5E5B88A09E9B453", "dark-schedule.min.js": "853C446547603F4F0425F19F09F73335C9EC451A790C1C07E5E5B88A09E9B453",
"dark-slice-10.min.css": "A4CFDF0C69953E69890CF97B9E5497F4F323B85FB3E166DCC6E55BD19B7DF1C8", "dark-slice-10.min.css": "A4CFDF0C69953E69890CF97B9E5497F4F323B85FB3E166DCC6E55BD19B7DF1C8",
"dark-slice-11.min.css": "181D302500583F0D7B3103B92854CEA2D640C6551EC34CF6D76336164A21A94F",
"dark-styles.min.js": "71AF9CBD74BD3F570515C46801AE66A52665DCEDE2F4941AA90D12A4F1381A6E", "dark-styles.min.js": "71AF9CBD74BD3F570515C46801AE66A52665DCEDE2F4941AA90D12A4F1381A6E",
"debounce.min.js": "54D33E1273C1F3FE19550BF1844339C3D54D6B01DF8A39C3162D95B93B079CFA", "debounce.min.js": "54D33E1273C1F3FE19550BF1844339C3D54D6B01DF8A39C3162D95B93B079CFA",
"default-danmaku-settings.min.css": "D9942B184FEDA7B08CFA0C34920E97D7A83B81762DCBF757642EBB60F95FF25D", "default-danmaku-settings.min.css": "D9942B184FEDA7B08CFA0C34920E97D7A83B81762DCBF757642EBB60F95FF25D",
@ -82,8 +83,8 @@
"expand-description.min.js": "A56857AD6B1C9F431B233D188E857D30DD5A2EB644986DE32A21280B1B7BC7A7", "expand-description.min.js": "A56857AD6B1C9F431B233D188E857D30DD5A2EB644986DE32A21280B1B7BC7A7",
"favorites-redirect.min.js": "70D6ECCE0402AA76387D2A3288C1148C60CC88D5378B7A2BDC813F3F78E4EE84", "favorites-redirect.min.js": "70D6ECCE0402AA76387D2A3288C1148C60CC88D5378B7A2BDC813F3F78E4EE84",
"feeds-apis.min.js": "FB079652CED58A4442B95D407955E9E5207E9434DE2BA0019AD52F9C35B92FBD", "feeds-apis.min.js": "FB079652CED58A4442B95D407955E9E5207E9434DE2BA0019AD52F9C35B92FBD",
"feeds-filter.min.js": "10557E498B8BADA3C1C03E8C1DCD6FB24DBA2DA27A5A03BD861054F7E2989D46", "feeds-filter.min.js": "B0C6884958870914F6583C4BA86936C3E7A24E27570B1837BAB69F0611EA8FDD",
"feeds-filter-card.vue.min.js": "922E7201AD48573E00123C36A61246ECB3F957AC9C97712A7E0CD5B01C2BEBA8", "feeds-filter-card.vue.min.js": "15441F7CEDD13594D848233F9BAE3CE1A8635EA9446CB71180977CBA3D4F6665",
"feeds-translate.min.css": "704EF1AAE13C4F7D33244E0EC30069AE449C4DBA0310E94C6A6B6ECC33570E5E", "feeds-translate.min.css": "704EF1AAE13C4F7D33244E0EC30069AE449C4DBA0310E94C6A6B6ECC33570E5E",
"feeds-translate.min.js": "3BFACEC337137ABA7EA27184A03F42523DE24F96596BA14AD16A012749D919B1", "feeds-translate.min.js": "3BFACEC337137ABA7EA27184A03F42523DE24F96596BA14AD16A012749D919B1",
"feeds-translate-providers.min.js": "DD3B48C051ED1CD89AB79B2563723B2639D8737EF2194136D63ABAA8D4B64F6C", "feeds-translate-providers.min.js": "DD3B48C051ED1CD89AB79B2563723B2639D8737EF2194136D63ABAA8D4B64F6C",

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
(()=>{return(e,t)=>{(async()=>{if(document.URL.replace(location.search,"")!=="https://t.bilibili.com/"){return}const e=await SpinQuery.select(".home-container .left-panel");if(e===null){return}e.insertAdjacentHTML("beforeend",html`<feeds-filter-card></feeds-filter-card>`);new Vue({el:"feeds-filter-card",components:{FeedsFilterCard:()=>t.importAsync("feeds-filter-card.vue")}})})();return{reload:()=>document.body.classList.remove("disable-feeds-filter"),unload:()=>document.body.classList.add("disable-feeds-filter")}}})(); (()=>{return(e,t)=>{(async()=>{if(document.URL.replace(location.search,"")!=="https://t.bilibili.com/"){return}const e=await SpinQuery.select(".home-container .left-panel .scroll-content");if(e===null){return}e.insertAdjacentHTML("afterbegin",html`<feeds-filter-card></feeds-filter-card>`);new Vue({el:"feeds-filter-card",components:{FeedsFilterCard:()=>t.importAsync("feeds-filter-card.vue")}})})();return{reload:()=>document.body.classList.remove("disable-feeds-filter"),unload:()=>document.body.classList.add("disable-feeds-filter")}}})();

View File

@ -1,6 +1,9 @@
<template> <template>
<div class="feeds-filter"> <div class="feeds-filter" :class="{collapse}">
<h1>动态过滤</h1> <div class="feeds-filter-header" @click="collapse = !collapse">
<h1>动态过滤</h1>
<icon type="mdi" icon="chevron-up"></icon>
</div>
<h2>类型</h2> <h2>类型</h2>
<div class="filter-types"> <div class="filter-types">
<filter-type-switch v-for="[name, type] of allTypes" :name="name" :type="type" :key="type.id"></filter-type-switch> <filter-type-switch v-for="[name, type] of allTypes" :name="name" :type="type" :key="type.id"></filter-type-switch>
@ -61,7 +64,7 @@ const sideCards: { [id: number]: SideCardType } = {
3: { 3: {
className: 'live', className: 'live',
displayName: '正在直播' displayName: '正在直播'
}, }
// 4: { // 4: {
// className: 'trending-tags', // className: 'trending-tags',
// displayName: '' // displayName: ''
@ -73,6 +76,17 @@ export default {
FilterTypeSwitch: () => import('./filter-type-switch.vue'), FilterTypeSwitch: () => import('./filter-type-switch.vue'),
Icon: () => import('../../style/icon.vue') Icon: () => import('../../style/icon.vue')
}, },
data() {
return {
allTypes: [] as [string, FeedsCardType][],
patterns: [...settings.feedsFilterPatterns],
newPattern: '',
feedsCardsManager: null,
allSideCards: sideCards,
blockSideCards: [...settings.feedsFilterSideCards],
collapse: true
}
},
methods: { methods: {
updateCard(card: FeedsCard) { updateCard(card: FeedsCard) {
const testPattern = (pattern: Pattern, text: string) => { const testPattern = (pattern: Pattern, text: string) => {
@ -145,16 +159,6 @@ export default {
} }
} }
}, },
data() {
return {
allTypes: [] as [string, FeedsCardType][],
patterns: [...settings.feedsFilterPatterns],
newPattern: '',
feedsCardsManager: null,
allSideCards: sideCards,
blockSideCards: [...settings.feedsFilterSideCards]
}
},
async mounted() { async mounted() {
this.updateBlockSide() this.updateBlockSide()
const tabBar = await SpinQuery.select('.feed-card .tab-bar') const tabBar = await SpinQuery.select('.feed-card .tab-bar')
@ -166,7 +170,10 @@ export default {
'.tab:nth-child(1) .tab-text' '.tab:nth-child(1) .tab-text'
) as HTMLAnchorElement ) as HTMLAnchorElement
Observer.attributes(tab, () => { Observer.attributes(tab, () => {
document.body.classList.toggle('enable-feeds-filter', tab.classList.contains('selected')) document.body.classList.toggle(
'enable-feeds-filter',
tab.classList.contains('selected')
)
}) })
const { feedsCardsManager, feedsCardTypes } = await import('../feeds-apis') const { feedsCardsManager, feedsCardTypes } = await import('../feeds-apis')
const success = await feedsCardsManager.startWatching() const success = await feedsCardsManager.startWatching()
@ -180,7 +187,7 @@ export default {
return [name, _.clone(type)] return [name, _.clone(type)]
}) })
feedsCardsManager.cards.forEach(card => this.updateCard(card)) feedsCardsManager.cards.forEach(card => this.updateCard(card))
feedsCardsManager.addEventListener('addCard', (e) => { feedsCardsManager.addEventListener('addCard', e => {
const card = e.detail const card = e.detail
this.updateCard(card) this.updateCard(card)
}) })
@ -190,6 +197,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "src/style/common";
body.enable-feeds-filter:not(.disable-feeds-filter) { body.enable-feeds-filter:not(.disable-feeds-filter) {
@each $name, @each $name,
$value $value
@ -210,18 +218,22 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
} }
} }
$side-block: 'feeds-filter-side-block'; $side-block: 'feeds-filter-side-block';
.left-panel > *, .left-panel .scroll-content > *,
.right-panel > * { .right-panel .scroll-content > * {
margin: 0 !important; margin: 0 !important;
margin-bottom: 8px !important; margin-bottom: 8px !important;
} }
.left-panel .user-panel.f-left {
float: none !important;
}
&.#{$side-block}-profile { &.#{$side-block}-profile {
.left-panel .user-wrapper { .left-panel .user-wrapper {
display: none !important; display: none !important;
} }
} }
&.#{$side-block}-following-tags { &.#{$side-block}-following-tags {
.left-panel .tag-panel { .left-panel .tag-panel,
.right-panel .new-topic-panel {
display: none !important; display: none !important;
} }
} }
@ -231,7 +243,7 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
} }
} }
&.#{$side-block}-live { &.#{$side-block}-live {
.right-panel .live-panel { .left-panel .live-panel {
display: none !important; display: none !important;
} }
} }
@ -244,15 +256,28 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
display: none !important; display: none !important;
} }
} }
.adaptive-scroll {
> div:first-child:empty {
display: none !important;
}
.scroll-content {
position: static !important;
top: unset !important;
bottom: unset !important;
}
}
.feeds-filter { .feeds-filter {
background-color: white; background-color: white;
width: 100%; width: 100%;
padding: 12px 16px; padding: 12px 16px;
float: left; // float: left;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
display: none; display: none;
flex-direction: column; flex-direction: column;
overflow: auto;
max-height: 80vh;
@include no-scrollbar();
body.enable-feeds-filter:not(.disable-feeds-filter) & { body.enable-feeds-filter:not(.disable-feeds-filter) & {
display: flex; display: flex;
@ -265,11 +290,28 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
color: #eee; color: #eee;
background-color: #444; background-color: #444;
} }
h1 { .feeds-filter-header {
font-weight: normal; cursor: pointer;
font-size: 14px;
margin: 0;
margin-bottom: 14px; margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
h1 {
font-weight: normal;
font-size: 14px;
margin: 0;
}
}
&.collapse {
.feeds-filter-header {
margin-bottom: 0;
.be-icon {
transform: rotate(180deg);
}
}
> :not(.feeds-filter-header) {
display: none;
}
} }
h2 { h2 {
font-weight: bold; font-weight: bold;

View File

@ -2,11 +2,11 @@
if (document.URL.replace(location.search, '') !== 'https://t.bilibili.com/') { if (document.URL.replace(location.search, '') !== 'https://t.bilibili.com/') {
return return
} }
const leftPanel = await SpinQuery.select('.home-container .left-panel') const leftPanel = await SpinQuery.select('.home-container .left-panel .scroll-content')
if (leftPanel === null) { if (leftPanel === null) {
return return
} }
leftPanel.insertAdjacentHTML('beforeend', html`<feeds-filter-card></feeds-filter-card>`) leftPanel.insertAdjacentHTML('afterbegin', html`<feeds-filter-card></feeds-filter-card>`)
new Vue({ new Vue({
el: 'feeds-filter-card', el: 'feeds-filter-card',
components: { components: {