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-schedule.min.js": "853C446547603F4F0425F19F09F73335C9EC451A790C1C07E5E5B88A09E9B453",
"dark-slice-10.min.css": "A4CFDF0C69953E69890CF97B9E5497F4F323B85FB3E166DCC6E55BD19B7DF1C8",
"dark-slice-11.min.css": "181D302500583F0D7B3103B92854CEA2D640C6551EC34CF6D76336164A21A94F",
"dark-styles.min.js": "71AF9CBD74BD3F570515C46801AE66A52665DCEDE2F4941AA90D12A4F1381A6E",
"debounce.min.js": "54D33E1273C1F3FE19550BF1844339C3D54D6B01DF8A39C3162D95B93B079CFA",
"default-danmaku-settings.min.css": "D9942B184FEDA7B08CFA0C34920E97D7A83B81762DCBF757642EBB60F95FF25D",
@ -82,8 +83,8 @@
"expand-description.min.js": "A56857AD6B1C9F431B233D188E857D30DD5A2EB644986DE32A21280B1B7BC7A7",
"favorites-redirect.min.js": "70D6ECCE0402AA76387D2A3288C1148C60CC88D5378B7A2BDC813F3F78E4EE84",
"feeds-apis.min.js": "FB079652CED58A4442B95D407955E9E5207E9434DE2BA0019AD52F9C35B92FBD",
"feeds-filter.min.js": "10557E498B8BADA3C1C03E8C1DCD6FB24DBA2DA27A5A03BD861054F7E2989D46",
"feeds-filter-card.vue.min.js": "922E7201AD48573E00123C36A61246ECB3F957AC9C97712A7E0CD5B01C2BEBA8",
"feeds-filter.min.js": "B0C6884958870914F6583C4BA86936C3E7A24E27570B1837BAB69F0611EA8FDD",
"feeds-filter-card.vue.min.js": "15441F7CEDD13594D848233F9BAE3CE1A8635EA9446CB71180977CBA3D4F6665",
"feeds-translate.min.css": "704EF1AAE13C4F7D33244E0EC30069AE449C4DBA0310E94C6A6B6ECC33570E5E",
"feeds-translate.min.js": "3BFACEC337137ABA7EA27184A03F42523DE24F96596BA14AD16A012749D919B1",
"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>
<div class="feeds-filter">
<h1>动态过滤</h1>
<div class="feeds-filter" :class="{collapse}">
<div class="feeds-filter-header" @click="collapse = !collapse">
<h1>动态过滤</h1>
<icon type="mdi" icon="chevron-up"></icon>
</div>
<h2>类型</h2>
<div class="filter-types">
<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: {
className: 'live',
displayName: '正在直播'
},
}
// 4: {
// className: 'trending-tags',
// displayName: ''
@ -73,6 +76,17 @@ export default {
FilterTypeSwitch: () => import('./filter-type-switch.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: {
updateCard(card: FeedsCard) {
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() {
this.updateBlockSide()
const tabBar = await SpinQuery.select('.feed-card .tab-bar')
@ -166,7 +170,10 @@ export default {
'.tab:nth-child(1) .tab-text'
) as HTMLAnchorElement
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 success = await feedsCardsManager.startWatching()
@ -180,7 +187,7 @@ export default {
return [name, _.clone(type)]
})
feedsCardsManager.cards.forEach(card => this.updateCard(card))
feedsCardsManager.addEventListener('addCard', (e) => {
feedsCardsManager.addEventListener('addCard', e => {
const card = e.detail
this.updateCard(card)
})
@ -190,6 +197,7 @@ export default {
</script>
<style lang="scss">
@import "src/style/common";
body.enable-feeds-filter:not(.disable-feeds-filter) {
@each $name,
$value
@ -210,18 +218,22 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
}
}
$side-block: 'feeds-filter-side-block';
.left-panel > *,
.right-panel > * {
.left-panel .scroll-content > *,
.right-panel .scroll-content > * {
margin: 0 !important;
margin-bottom: 8px !important;
}
.left-panel .user-panel.f-left {
float: none !important;
}
&.#{$side-block}-profile {
.left-panel .user-wrapper {
display: none !important;
}
}
&.#{$side-block}-following-tags {
.left-panel .tag-panel {
.left-panel .tag-panel,
.right-panel .new-topic-panel {
display: none !important;
}
}
@ -231,7 +243,7 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
}
}
&.#{$side-block}-live {
.right-panel .live-panel {
.left-panel .live-panel {
display: none !important;
}
}
@ -244,15 +256,28 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
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 {
background-color: white;
width: 100%;
padding: 12px 16px;
float: left;
// float: left;
border-radius: 4px;
box-sizing: border-box;
display: none;
flex-direction: column;
overflow: auto;
max-height: 80vh;
@include no-scrollbar();
body.enable-feeds-filter:not(.disable-feeds-filter) & {
display: flex;
@ -265,11 +290,28 @@ body.enable-feeds-filter:not(.disable-feeds-filter) {
color: #eee;
background-color: #444;
}
h1 {
font-weight: normal;
font-size: 14px;
margin: 0;
.feeds-filter-header {
cursor: pointer;
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 {
font-weight: bold;

View File

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