Add search box for history

This commit is contained in:
the1812 2020-04-02 16:25:46 +08:00
parent 9ceb91a42e
commit 2d32b79200
13 changed files with 125 additions and 102 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

@ -32,7 +32,7 @@
"compact-layout.min.js": "B20609A7CBBDB1845FA0156FB5BE6B1E1A1B8B069EA85F65D16241DD2C12D738",
"custom-control-background.min.css": "1981FD2BF3B17ECF33F98D5DEDAF0D32ACBE9532A51FDB70822286991AB98EF3",
"custom-control-background.min.js": "2A439B045A51D24F5115DD25995ED37E3D0371A074199FE6C727F2235F39C4D9",
"custom-navbar.min.css": "774F1BF8DE8FC5526468571909B3FD2875404721BC44C6346EC60807485833C4",
"custom-navbar.min.css": "6EADE807DC6AC0457599076FF67F126FBC9214F33EB0F78A66EB892545D33BA8",
"custom-navbar.min.html": "FA6ACF1CA1DB6D3BD2BE310646B89B028756A36BF434BEBABE2BF00789581A09",
"custom-navbar.min.js": "1D1BBBD9482EAFAF1F12DBAD7FC3E34FFE36CA55AC42839ACBB34FA4142C3646",
"custom-navbar-activities.min.js": "7AC74BBC42C4AEB3DF50A169AF46F03998BF5E74722D78BFEF885F00B1AB003A",
@ -40,7 +40,7 @@
"custom-navbar-category.min.js": "A8A6190C090C92525EBA0A3C0C70EFC37AC7D1AFEEAB2834F1D69934C1B1F4D1",
"custom-navbar-component.min.js": "5CA104E636521F21BBD05D23E17BDDF945566DDA3042710D4D7E1DDD1677E30B",
"custom-navbar-favorites-list.min.js": "71931EEBCF0BA3B33D8E72FF56BD92F2A089907F7E54E863D1EDDE0EAA9242FE",
"custom-navbar-history-list.min.js": "117EA03267C36C7DFCA17FE3270851135AA1FB8E49C9D2E875C3783B710B9BD6",
"custom-navbar-history-list.min.js": "08B3AE7CF9351E801BD644A92E6719C0A370336C3CC152DD2D6EBE7B6B55464C",
"custom-navbar-iframe.min.js": "DBE5844C2AA36057DBD33BBC5724D7D7F881AB15EC45A80228961942CD810A32",
"custom-navbar-logo.min.js": "236CCC887A3917A6D4840889B7380B648197765B8CDA27CB233F3F1E3215F7BB",
"custom-navbar-messages.min.js": "D7B315A4D8FD9E2EF9C1E40C1F3CA7EC18C5A87AC7A9410049061A0D851868DE",
@ -54,12 +54,10 @@
"custom-navbar-watchlater-list.min.js": "5503A751DD2FDC19A6F138201B8C1654916F2D9B467E6D8B845635A920BBC595",
"danmaku-converter.min.js": "908389A7D4E5F8546075B74F41BF03BD974073B4203723A575CF22082B358692",
"dark.min.css": "86D2B120F4C46847F420F940673F184571EFDCA7079ECD9A1D791637E9F8A687",
"dark.user.css": "5DCDC91167D39CFD04948447A99B72BD55A7A603ADE3AA48B45F316756717A3F",
"dark.user.css": "B87F6CD0331497D8FB88199C9CCFD68358036F1A7B59CA1223A9DF4A10342D2A",
"dark-important.min.css": "9381B563726BCA701DD77C7AD572793538A45CB839F56008A55EE46821EA1B05",
"dark-navbar.min.css": "A2D91F11127D165571ACCC53004EDDB118CEE110F9B020D7E0541E1C8FAEA478",
"dark-schedule.min.js": "853C446547603F4F0425F19F09F73335C9EC451A790C1C07E5E5B88A09E9B453",
"dark-slice-11.min.css": "CF1A2FF0B248F61DC5112B7E589A94F5A5E5BC576A36CF5766089D57D082E3A1",
"dark-slice-9.min.css": "64F4B626BD335BE08E3043431DEC58E5331C4832DBA56F1D14C74D9879C0CC7B",
"dark-styles.min.js": "BF0AAA18064DFE8378160EB6BE65B1EF706B20BC01141355265D2EB18A72EE55",
"debounce.min.js": "54D33E1273C1F3FE19550BF1844339C3D54D6B01DF8A39C3162D95B93B079CFA",
"default-danmaku-settings.min.css": "D9942B184FEDA7B08CFA0C34920E97D7A83B81762DCBF757642EBB60F95FF25D",

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -3,7 +3,7 @@
@namespace Bilibili-Evolved
@homepageURL https://github.com/the1812/Bilibili-Evolved
@updateURL https://cdn.jsdelivr.net/gh/the1812/Bilibili-Evolved@preview/min/dark.user.css
@version 624.20
@version
@license MIT
@author Grant Howard (https://github.com/the1812), Coulomb-G (https://github.com/Coulomb-G)
==/UserStyle== */

View File

@ -0,0 +1,33 @@
@mixin search-box {
.search {
position: relative;
flex-grow: 1;
margin-right: 16px;
input {
width: 100%;
padding: 4px;
border: none;
outline: none !important;
color: inherit;
background-color: transparent;
border-radius: 4px;
}
&::after {
content: "";
position: absolute;
top: calc(100%);
left: 0;
width: 100%;
height: 2px;
border-radius: 2px;
transition: 0.24s ease-out;
background-color: #8882;
}
&.not-empty,
&:focus-within {
&::after {
background-color: var(--theme-color);
}
}
}
}

View File

@ -1,4 +1,5 @@
@import "../../common";
@import "../search-box";
@mixin tabs-animation {
&-enter-active,
&-leave-active {
@ -55,11 +56,12 @@
overflow: auto;
.header {
@include h-center();
@include search-box();
justify-content: space-between;
margin: 16px 12px;
.tabs {
flex-grow: 1;
margin-right: 48px;
flex: 0;
margin-right: 16px;
padding: 0 6px;
@include h-center();
justify-content: flex-start;
@ -101,6 +103,7 @@
.more-info {
@include h-center();
@include round-bar(26);
flex-shrink: 0;
padding: 4px 6px 4px 10px;
background-color: #8882;
border: none;

View File

@ -30,7 +30,7 @@ interface HistoryTab {
type: string
api: string
moreLink: string
getTimeline: (json: any) => Timeline
getItems: (json: any) => HistoryItem[]
}
const getTimeData = () => {
const now = new Date()
@ -46,26 +46,38 @@ const getTimeData = () => {
lastWeek,
}
}
const simpleTimeGrouper = (historyItems: (HistoryItem & TimeData)[]) => {
const { today, yesterday, lastWeek } = getTimeData()
const groups = _.groupBy(historyItems, h => {
if (h.timestamp >= today) {
return '今天'
}
if (h.timestamp >= yesterday) {
return '昨天'
}
if (h.timestamp >= lastWeek) {
return '本周'
}
return '更早'
})
return Object.entries(groups).map(([key, value]) => {
return {
name: key,
items: value,
}
})
const historyTimeGrouper = (historyItems: HistoryItem[]) => {
if (historyItems.length === 0) {
return []
}
if ('timestamp' in historyItems[0]) {
const { today, yesterday, lastWeek } = getTimeData()
const groups = _.groupBy(historyItems as (HistoryItem & TimeData)[], h => {
if (h.timestamp >= today) {
return '今天'
}
if (h.timestamp >= yesterday) {
return '昨天'
}
if (h.timestamp >= lastWeek) {
return '本周'
}
return '更早'
})
return Object.entries(groups).map(([key, value]) => {
return {
name: key,
items: value,
}
})
} else {
return [
{
name: '最近观看',
items: historyItems
}
]
}
}
const formatTime = (date: Date) => {
const { yesterday } = getTimeData()
@ -81,7 +93,7 @@ const tabs: HistoryTab[] = [
type: 'video',
api: 'https://api.bilibili.com/x/web-interface/history/cursor?type=archive&ps=30',
moreLink: 'https://www.bilibili.com/account/history',
getTimeline: json => {
getItems: json => {
const list: any[] = json.data.list
const historyItems = list.map(item => {
const timestamp = item.view_at * 1000
@ -106,7 +118,7 @@ const tabs: HistoryTab[] = [
historyItem.timeText = formatTime(historyItem.time)
return historyItem
})
return simpleTimeGrouper(historyItems)
return historyItems
},
},
{
@ -114,7 +126,7 @@ const tabs: HistoryTab[] = [
type: 'article',
api: 'https://api.bilibili.com/x/web-interface/history/cursor?type=article&ps=30',
moreLink: '',
getTimeline: json => {
getItems: json => {
const list: any[] = json.data.list
const historyItems = list.map(item => {
const timestamp = item.view_at * 1000
@ -132,7 +144,7 @@ const tabs: HistoryTab[] = [
historyItem.timeText = formatTime(historyItem.time)
return historyItem
})
return simpleTimeGrouper(historyItems)
return historyItems
},
},
{
@ -140,7 +152,7 @@ const tabs: HistoryTab[] = [
type: 'live',
api: 'https://api.live.bilibili.com/xlive/web-ucenter/v1/history/get_history_by_uid',
moreLink: 'https://link.bilibili.com/p/center/index#/user-center/view-history/live',
getTimeline: json => {
getItems: json => {
const list: any[] = json.data.list
const historyItems = list.map(item => {
return {
@ -152,12 +164,7 @@ const tabs: HistoryTab[] = [
title: item.title,
} as HistoryItem
})
return [
{
name: '最近观看',
items: historyItems
}
]
return historyItems
}
},
]
@ -181,6 +188,9 @@ export class HistoryList extends NavbarComponent {
<div class="tab-name">{{tab.name}}</div>
</div>
</div>
<div class="search">
<input type="text" placeholder="搜索" v-model="search">
</div>
<button class="more-info" :disabled="!selectedTab.moreLink || null" @click="viewMore()" title="查看更多">
<i class="mdi mdi-dots-horizontal"></i>
@ -193,7 +203,7 @@ export class HistoryList extends NavbarComponent {
<div class="loading-tip" v-if="timelineLoading" key="loading-tip">
...
</div>
<div class="time-group" v-for="t of timeline" :key="t.name">
<div class="time-group" v-for="t of filteredTimeline" :key="t.name">
<div class="time-group-name">{{t.name}}</div>
<transition-group name="time-group" tag="div" class="time-group-items">
<div class="time-group-item" v-for="h of t.items" :key="h.id">
@ -236,8 +246,24 @@ export class HistoryList extends NavbarComponent {
data: {
tabs,
selectedTab: tabs[0],
/** 全部的历史项目 */
items: [],
/** 按时间段分组后的历史项目 */
timeline: [],
timelineLoading: true,
search: '',
},
computed: {
/** 按时间段分组, 关键词过滤后的历史项目 */
filteredTimeline(): Timeline {
if (!this.search) {
return this.timeline
}
const search: string = this.search.toLowerCase()
return historyTimeGrouper((this.items as HistoryItem[]).filter(it => {
return it.title.toLowerCase().includes(search) || it.upName.toLowerCase().includes(search)
}))
}
},
methods: {
async updateTimeline() {
@ -249,8 +275,8 @@ export class HistoryList extends NavbarComponent {
if (json.code !== 0) {
throw new Error(`加载历史记录失败: ${json.message}`)
}
this.timeline = tab.getTimeline(json)
// console.log(_.cloneDeep(this.timeline))
this.items = tab.getItems(json)
this.timeline = historyTimeGrouper(this.items)
} catch (error) {
logError(error)
} finally {

View File

@ -1,4 +1,5 @@
@import "../../common";
@import "../search-box";
.custom-navbar {
@mixin button-background {
background-color: #8882;
@ -63,39 +64,9 @@
}
.header {
@include h-center();
@include search-box();
justify-content: space-between;
margin: 16px 12px;
.search {
position: relative;
flex-grow: 1;
margin-right: 16px;
input {
width: 100%;
padding: 4px;
border: none;
outline: none !important;
color: inherit;
background-color: transparent;
border-radius: 4px;
}
&::after {
content: "";
position: absolute;
top: calc(100%);
left: 0;
width: 100%;
height: 2px;
border-radius: 2px;
transition: 0.24s ease-out;
background-color: #8882;
}
&.not-empty,
&:focus-within {
&::after {
background-color: var(--theme-color);
}
}
}
.operations {
@include h-center();
.round-button {