mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Use single component
This commit is contained in:
parent
44eb77c5e7
commit
e02a1b0541
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
@ -30,18 +30,16 @@
|
||||
"compact-layout.min.js": "B20609A7CBBDB1845FA0156FB5BE6B1E1A1B8B069EA85F65D16241DD2C12D738",
|
||||
"custom-control-background.min.css": "1981FD2BF3B17ECF33F98D5DEDAF0D32ACBE9532A51FDB70822286991AB98EF3",
|
||||
"custom-control-background.min.js": "2A439B045A51D24F5115DD25995ED37E3D0371A074199FE6C727F2235F39C4D9",
|
||||
"custom-navbar.min.css": "B59EAD6B917EF426E2C1D1DF0F1E64FFF9EF93E84C0D309A100003FE729817FB",
|
||||
"custom-navbar.min.css": "3626ADB03B3FC2FC514AEDDC8FD53751075B3520C56659FA5417BCF25BB37001",
|
||||
"custom-navbar.min.html": "17FD1B1727E8D62E7997F10002FE7BF23472F390042D44DE3376A7A5A5FF2FDF",
|
||||
"custom-navbar.min.js": "A93BB5ABDED07764B3BF39A085BFF75CC0427A214B900127717583230B066836",
|
||||
"custom-navbar.min.js": "D5A7AE55BC92E1B4C883E9A568EE7BC61C9998ED63D50016383F20D872CD75D3",
|
||||
"custom-navbar-activities.min.js": "7CCA4AF4555CF9E9D338FE7285879C9F1396112F1FCD7293AD92EEE965E656C3",
|
||||
"custom-navbar-article-history.vue.min.js": "E19AF7EEFCAAA3F4C89931E60A172D7FCE3118199230E3E846A646FB05DA1007",
|
||||
"custom-navbar-blank.min.js": "DC2B75D5760EECD3A257785FDFBB7E5DEBF61CD9083C68DD5BCE468B093F54F3",
|
||||
"custom-navbar-category.min.js": "4CF38ACE1D0501217266D1E35DFCBF9D5C1D9A3838C54D53C614878BB8CF55E2",
|
||||
"custom-navbar-component.min.js": "D1B98EDF5C32D19E4A009D2303F69207B35ED35DD06E0F161E7D0BBB313F3C37",
|
||||
"custom-navbar-favorites-list.min.js": "6321DC8C5EB93E2FEEC0D424EE9B0F4282066018D44DFE66FEAD079F29F7F040",
|
||||
"custom-navbar-history-list.min.js": "5188143C7628452F99F3A8F3659A9889A9E9892045A518DBFBB2D3F7DD5D237D",
|
||||
"custom-navbar-history-list.min.js": "66F85DBCE415E88A9EEAA54110CF7C62E6F4AD7F4090E33667D191CAA890C2EC",
|
||||
"custom-navbar-iframe.min.js": "C4EE469EC09655F9FF535ACBBD2A5F7C332DA2081936F8F485F5FB015EBD794B",
|
||||
"custom-navbar-live-history.vue.min.js": "6C6E331D83D0E5DEBC88BF2FE466DFEA9BB6E36208219AA6FDF67E06EE9C2AE1",
|
||||
"custom-navbar-logo.min.js": "236CCC887A3917A6D4840889B7380B648197765B8CDA27CB233F3F1E3215F7BB",
|
||||
"custom-navbar-messages.min.js": "D7B315A4D8FD9E2EF9C1E40C1F3CA7EC18C5A87AC7A9410049061A0D851868DE",
|
||||
"custom-navbar-search-box.min.js": "F91CB1678AE6E353148134A16184BDC67C8310099000986451F3668E7F505345",
|
||||
@ -50,7 +48,6 @@
|
||||
"custom-navbar-subscriptions.min.js": "40F7ACEB501462A72D6BC15D1814DFD8A75B9FA6867748F362593CB00260C51E",
|
||||
"custom-navbar-upload.min.js": "0CDEEA46DCF0D6187C86BB12DE8CD36737116EF171AA1F63AB20C5DC7549C976",
|
||||
"custom-navbar-user-info.min.js": "F0C8D9FC280BA0A69746EC36079FA97AD9F0B69EB7D8FB56C6ED815C46791321",
|
||||
"custom-navbar-video-history.vue.min.js": "5D1A1A65F2927D0608CCF4218CA20EA50C85DD8A0E98F9DE557E6FACAAAEDB56",
|
||||
"custom-navbar-video-list.min.js": "08D6713144E910C1303CB610A5890A5663B92BE82630BDA3C8E6299FB4A429E2",
|
||||
"custom-navbar-watchlater-list.min.js": "2742EAFAA8C716A9E937F70DE1D222DAA97A83EA6323B56DA001F609757240DE",
|
||||
"danmaku-converter.min.js": "FDAB4DB2E3C79730A39CDA7C5FD193693621FED206C6549E9B8F13778080CC12",
|
||||
@ -74,7 +71,7 @@
|
||||
"download-video.min.html": "B7EC01DF01DBA78A7B009BDA78865891A974F84A1D72964B7393A07E50D5E5F5",
|
||||
"download-video.min.js": "6A43BC28D28CCB2B047E3E7AAF75314F0DB5B2004F75D1414D282FC3A0129888",
|
||||
"download-video-package.min.js": "B10FF11DE7DFBACEC38F195B8E836511E527215B5E177CB1D223D14F30EB1435",
|
||||
"dpi-img.vue.min.js": "3615C42E816CD638EE320BB6FE37713921604E78F380E438D18DE99F0CDD27CB",
|
||||
"dpi-img.vue.min.js": "11DF7577B754D8C01E8331E4FDAC9494E72523099845A0D6B0D897849CD841D6",
|
||||
"expand-danmaku.min.js": "B21658C40085AEA8DC49652AE62EB8610BB2EBEAF7A9C9AF69EF3B11E08EEC8D",
|
||||
"expand-description.min.css": "58C7710A50521B80F7D872BDC4C652610D84C4FABC6874BA66DA37B4F8759224",
|
||||
"expand-description.min.js": "A56857AD6B1C9F431B233D188E857D30DD5A2EB644986DE32A21280B1B7BC7A7",
|
||||
|
||||
BIN
min/bundle.zip
BIN
min/bundle.zip
Binary file not shown.
1
min/custom-navbar-article-history.vue.min.js
vendored
1
min/custom-navbar-article-history.vue.min.js
vendored
@ -1 +0,0 @@
|
||||
(()=>{return(t,e)=>{const r=`<div class=article-history>article</div>`;return{export:Object.assign({template:r},{})}}})();
|
||||
2
min/custom-navbar-history-list.min.js
vendored
2
min/custom-navbar-history-list.min.js
vendored
File diff suppressed because one or more lines are too long
1
min/custom-navbar-live-history.vue.min.js
vendored
1
min/custom-navbar-live-history.vue.min.js
vendored
@ -1 +0,0 @@
|
||||
(()=>{return(e,t)=>{const i=`<div class=live-history>live</div>`;return{export:Object.assign({template:i},{})}}})();
|
||||
1
min/custom-navbar-video-history.vue.min.js
vendored
1
min/custom-navbar-video-history.vue.min.js
vendored
@ -1 +0,0 @@
|
||||
(()=>{return(e,t)=>{const i=`<div class=video-history>video</div>`;return{export:Object.assign({template:i},{})}}})();
|
||||
2
min/custom-navbar.min.css
vendored
2
min/custom-navbar.min.css
vendored
File diff suppressed because one or more lines are too long
2
min/custom-navbar.min.js
vendored
2
min/custom-navbar.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(t,i)=>{const a=["//www.bilibili.com","//t.bilibili.com","//search.bilibili.com","//space.bilibili.com","//account.bilibili.com","//pay.bilibili.com","//member.bilibili.com","//big.bilibili.com","//message.bilibili.com","//app.bilibili.com","//passport.bilibili.com","//game.bilibili.com","//live.bilibili.com/blackboard/"];const s=["//t.bilibili.com/vote/h5/index/#/result","//t.bilibili.com/lottery/h5/index/#/result","//member.bilibili.com/video/upload","//space.bilibili.com/ajax/","//www.bilibili.com/h5/comment/","//www.bilibili.com/blackboard/"];const o=()=>{document.body.style.setProperty("--navbar-bounds-padding",`0 ${t.customNavbarBoundsPadding}%`);document.body.style.setProperty("--navbar-blur-opacity",(t.customNavbarBlurOpacity||.7).toString());addSettingsListener("customNavbarBlurOpacity",t=>{document.body.style.setProperty("--navbar-blur-opacity",t)})};const n=(t,i,a)=>{a.classList.toggle(t,i)};const e=t=>{dq(".custom-navbar").classList.toggle("dark",t);dq(".custom-navbar-settings").classList.toggle("dark",t)};return(()=>{if(isIframe()){return}o();const c=!(!a.some(t=>document.URL.includes(t))||s.some(t=>document.URL.includes(t)))||document.URL.includes("//www.bilibili.com/blackboard/bnj2020.html");if(c){document.body.classList.add("custom-navbar-loading");(async()=>{const a=await i.importAsync((()=>"customNavbarHtml")());document.body.insertAdjacentHTML("beforeend",a);addSettingsListener("useDarkStyle",e,true);const s=()=>dq(".custom-navbar");["Fill","Shadow","Compact","Blur"].forEach(t=>{const i="customNavbar"+t;addSettingsListener(i,i=>n(t.toLowerCase(),i,s()),true)});SpinQuery.condition(()=>dq("#banner_link,.international-header .bili-banner"),t=>t===null?false:Boolean(t.style.backgroundImage),i=>{Observer.attributes(i,()=>{const a=dqa(".custom-navbar .blur-layer");a.forEach(t=>{t.style.backgroundImage=i.style.backgroundImage;t.setAttribute("data-image",i.style.backgroundImage)});addSettingsListener("customNavbarTransparent",i=>{if(!t.hideBanner){s().classList.toggle("transparent",i)}},true);addSettingsListener("hideBanner",i=>{if(t.customNavbarTransparent){s().classList.toggle("transparent",!i)}})})});const{Blank:o}=await i.importAsync("custom-navbar-blank");const{Logo:c}=await i.importAsync("custom-navbar-logo");const{Category:r}=await i.importAsync("custom-navbar-category");const{SimpleLink:l}=await i.importAsync("custom-navbar-simple-link");const{UserInfo:m}=await i.importAsync("custom-navbar-user-info");const{SearchBox:b}=await i.importAsync("custom-navbar-search-box");const{Iframe:u}=await i.importAsync("custom-navbar-iframe");const d=[new o(1),new c,new r,new l("排行","https://www.bilibili.com/ranking","ranking"),new l("相簿","https://h.bilibili.com","drawing"),new l("音频","https://www.bilibili.com/audio/home/","music"),new u("游戏中心","https://game.bilibili.com/",{src:`https://www.bilibili.com/page-proxy/game-nav.html`,width:`680px`,height:`260px`,lazy:true,iframeName:"games"}),new u("直播","https://live.bilibili.com",{src:`https://live.bilibili.com/blackboard/dropdown-menu.html`,width:`528px`,height:`266px`,lazy:true,iframeName:"lives"}),new l("会员购","https://show.bilibili.com","shop"),new l("漫画","https://manga.bilibili.com","manga"),new o(2),new b,new m];if(getUID()){const{WatchlaterList:t}=await i.importAsync("custom-navbar-watchlater-list");const{Messages:a}=await i.importAsync("custom-navbar-messages");const{Activities:s}=await i.importAsync("custom-navbar-activities");const{Subscriptions:o}=await i.importAsync("custom-navbar-subscriptions");const{FavoritesList:n}=await i.importAsync("custom-navbar-favorites-list");const{HistoryList:e}=await i.importAsync("custom-navbar-history-list");d.push(new a,new o,new s,new t,new n,new e)}const{Upload:p}=await i.importAsync("custom-navbar-upload");d.push(new p,new o(3));new Vue({el:".custom-navbar",data:{components:d},methods:{requestPopup(t){if(!t.requestedPopup&&!t.disabled&&!t.active){this.$set(t,`requestedPopup`,true);t.initialPopup&&t.initialPopup()}t.onPopup&&t.onPopup()}},mounted(){document.body.classList.remove("custom-navbar-loading")}})})()}return{widget:{content:`\n<div class="gui-settings-flat-button" id="custom-navbar-settings">\n<i class="mdi mdi-24px mdi-auto-fix"></i>\n<span>顶栏布局</span>\n</div>`,condition:()=>c,success:async()=>{const{initSettingsPanel:t}=await i.importAsync("custom-navbar-settings");await t()}},unload:()=>{const t=dqa(".custom-navbar,.custom-navbar-settings");t.forEach(t=>t.style.display="none");i.removeStyle("customNavbarStyle")},reload:()=>{const t=dqa(".custom-navbar,.custom-navbar-settings");t.forEach(t=>t.style.display="flex");i.applyImportantStyle("customNavbarStyle")}}})()}})();
|
||||
(()=>{return(t,i)=>{const a=["//www.bilibili.com","//t.bilibili.com","//search.bilibili.com","//space.bilibili.com","//account.bilibili.com","//pay.bilibili.com","//member.bilibili.com","//big.bilibili.com","//message.bilibili.com","//app.bilibili.com","//passport.bilibili.com","//game.bilibili.com","//live.bilibili.com/blackboard/"];const s=["//t.bilibili.com/vote/h5/index/#/result","//t.bilibili.com/lottery/h5/index/#/result","//member.bilibili.com/video/upload","//space.bilibili.com/ajax/","//www.bilibili.com/h5/comment/","//www.bilibili.com/blackboard/"];const o=()=>{document.body.style.setProperty("--navbar-bounds-padding",`0 ${t.customNavbarBoundsPadding}%`);document.body.style.setProperty("--navbar-blur-opacity",(t.customNavbarBlurOpacity||.7).toString());addSettingsListener("customNavbarBlurOpacity",t=>{document.body.style.setProperty("--navbar-blur-opacity",t)})};const n=(t,i,a)=>{a.classList.toggle(t,i)};const e=t=>{dq(".custom-navbar").classList.toggle("dark",t);dq(".custom-navbar-settings").classList.toggle("dark",t)};return(()=>{if(isIframe()){return}o();const c=!(!a.some(t=>document.URL.includes(t))||s.some(t=>document.URL.includes(t)))||document.URL.includes("//www.bilibili.com/blackboard/bnj2020.html");if(c){document.body.classList.add("custom-navbar-loading");(async()=>{const a=await i.importAsync("customNavbarHtml");document.body.insertAdjacentHTML("beforeend",a);addSettingsListener("useDarkStyle",e,true);const s=()=>dq(".custom-navbar");["Fill","Shadow","Compact","Blur"].forEach(t=>{const i="customNavbar"+t;addSettingsListener(i,i=>n(t.toLowerCase(),i,s()),true)});SpinQuery.condition(()=>dq("#banner_link,.international-header .bili-banner"),t=>t===null?false:Boolean(t.style.backgroundImage),i=>{Observer.attributes(i,()=>{const a=dqa(".custom-navbar .blur-layer");a.forEach(t=>{t.style.backgroundImage=i.style.backgroundImage;t.setAttribute("data-image",i.style.backgroundImage)});addSettingsListener("customNavbarTransparent",i=>{if(!t.hideBanner){s().classList.toggle("transparent",i)}},true);addSettingsListener("hideBanner",i=>{if(t.customNavbarTransparent){s().classList.toggle("transparent",!i)}})})});const{Blank:o}=await i.importAsync("custom-navbar-blank");const{Logo:c}=await i.importAsync("custom-navbar-logo");const{Category:r}=await i.importAsync("custom-navbar-category");const{SimpleLink:l}=await i.importAsync("custom-navbar-simple-link");const{UserInfo:m}=await i.importAsync("custom-navbar-user-info");const{SearchBox:b}=await i.importAsync("custom-navbar-search-box");const{Iframe:u}=await i.importAsync("custom-navbar-iframe");const d=[new o(1),new c,new r,new l("排行","https://www.bilibili.com/ranking","ranking"),new l("相簿","https://h.bilibili.com","drawing"),new l("音频","https://www.bilibili.com/audio/home/","music"),new u("游戏中心","https://game.bilibili.com/",{src:`https://www.bilibili.com/page-proxy/game-nav.html`,width:`680px`,height:`260px`,lazy:true,iframeName:"games"}),new u("直播","https://live.bilibili.com",{src:`https://live.bilibili.com/blackboard/dropdown-menu.html`,width:`528px`,height:`266px`,lazy:true,iframeName:"lives"}),new l("会员购","https://show.bilibili.com","shop"),new l("漫画","https://manga.bilibili.com","manga"),new o(2),new b,new m];if(getUID()){const{WatchlaterList:t}=await i.importAsync("custom-navbar-watchlater-list");const{Messages:a}=await i.importAsync("custom-navbar-messages");const{Activities:s}=await i.importAsync("custom-navbar-activities");const{Subscriptions:o}=await i.importAsync("custom-navbar-subscriptions");const{FavoritesList:n}=await i.importAsync("custom-navbar-favorites-list");const{HistoryList:e}=await i.importAsync("custom-navbar-history-list");d.push(new a,new o,new s,new t,new n,new e)}const{Upload:p}=await i.importAsync("custom-navbar-upload");d.push(new p,new o(3));new Vue({el:".custom-navbar",data:{components:d},methods:{requestPopup(t){if(!t.requestedPopup&&!t.disabled&&!t.active){this.$set(t,`requestedPopup`,true);t.initialPopup&&t.initialPopup()}t.onPopup&&t.onPopup()}},mounted(){document.body.classList.remove("custom-navbar-loading")}})})()}return{widget:{content:`\n<div class="gui-settings-flat-button" id="custom-navbar-settings">\n<i class="mdi mdi-24px mdi-auto-fix"></i>\n<span>顶栏布局</span>\n</div>`,condition:()=>c,success:async()=>{const{initSettingsPanel:t}=await i.importAsync("custom-navbar-settings");await t()}},unload:()=>{const t=dqa(".custom-navbar,.custom-navbar-settings");t.forEach(t=>t.style.display="none");i.removeStyle("customNavbarStyle")},reload:()=>{const t=dqa(".custom-navbar,.custom-navbar-settings");t.forEach(t=>t.style.display="flex");i.applyImportantStyle("customNavbarStyle")}}})()}})();
|
||||
2
min/dpi-img.vue.min.js
vendored
2
min/dpi-img.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(t,s)=>{const r=`<img :width=width :height=height :srcset=srcset :src=actualSrc :style="{filter: blur ? 'blur(' + blur + 'px)' : undefined}">`;return{export:Object.assign({template:r},{props:["size","src","blur","root","rootMargin","threshold"],data(){return{srcset:null,actualSrc:null}},watch:{size(){this.sourceChange()},src(){this.sourceChange()}},methods:{sourceChange(){if(this.actualSrc===null||this.srcset===null){return}this.calcSrc()},calcSrc(){if(!this.src||!this.size){return}if(this.src.startsWith("http:")){this.src=this.src.replace("http:","https:")}if(this.src.includes("//static.hdslb.com/images/member/noface.gif")){this.srcset=this.src;this.actualSrc=this.src;return}const t=this.src.substring(this.src.lastIndexOf(".")+1);this.srcset=getDpiSourceSet(this.src,this.size,t);this.actualSrc=this.src}},mounted(){const t={root:this.root,rootMargin:this.rootMargin||"200px",threshold:this.threshold};const s=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting){this.calcSrc();s.disconnect()}})},t);s.observe(this.$el)},computed:{width(){if(typeof this.size==="object"&&"width"in this.size){return this.size.width}return null},height(){if(typeof this.size==="object"&&"height"in this.size){return this.size.height}return null}}})}}})();
|
||||
(()=>{return(t,e)=>{const s=`<img :width=width :height=height :srcset=srcset :src=actualSrc :class="{placeholder: isPlaceholderActive}":style={filter}>`;return{export:Object.assign({template:s},{props:{size:[Object,Number],src:String,blur:Number,root:HTMLElement,rootMargin:String,threshold:Number,placeholderImage:Boolean},data(){return{srcset:null,actualSrc:null,isPlaceholderActive:false}},watch:{size(){this.sourceChange()},src(){this.sourceChange()}},methods:{sourceChange(){if(this.actualSrc===null||this.srcset===null){return}this.calcSrc()},calcSrc(){const t=!this.src||!this.size;this.isPlaceholderActive=t&&this.placeholderImage;if(t){this.srcset=null;if(this.placeholderImage){this.actualSrc=`https://s1.hdslb.com/bfs/static/blive/live-web-center/static/img/no-cover.1ebe4d5.jpg`}else{this.actualSrc=null}return}let e=this.src;if(e.startsWith("http:")){e=e.replace("http:","https:")}if(e.includes("//static.hdslb.com/images/member/noface.gif")){this.srcset=e;this.actualSrc=e;return}const s=e.substring(e.lastIndexOf(".")+1);this.srcset=getDpiSourceSet(e,this.size,s);this.actualSrc=e}},mounted(){const t={root:this.root,rootMargin:this.rootMargin||"200px",threshold:this.threshold};const e=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting){this.calcSrc();e.disconnect()}})},t);e.observe(this.$el)},computed:{width(){if(typeof this.size==="object"&&"width"in this.size){return this.size.width}return null},height(){if(typeof this.size==="object"&&"height"in this.size){return this.size.height}return null},filter(){const t=[];if(this.blur){t.push(`blur(${this.blur}px)`)}return t.join(" ")}}})}}})();
|
||||
@ -28,3 +28,13 @@
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
@mixin max-line($line, $line-height: 1.5) {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
-webkit-line-clamp: $line;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: $line-height;
|
||||
max-height: #{$line * $line-height}em;
|
||||
}
|
||||
|
||||
@ -1,6 +1,28 @@
|
||||
@import "../../common";
|
||||
@mixin tabs-animation {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: 0.2s ease-out;
|
||||
}
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
}
|
||||
@mixin items-animation {
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-16px) scale(0.9);
|
||||
}
|
||||
&-leave-active {
|
||||
transition: 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.custom-navbar .history-list {
|
||||
width: 300px;
|
||||
width: 350px;
|
||||
height: 600px;
|
||||
font-size: 12px;
|
||||
@include v-stretch();
|
||||
@ -31,14 +53,6 @@
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
.floating {
|
||||
@include round-bar(20);
|
||||
@include h-center();
|
||||
background-color: #000c;
|
||||
color: white;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header {
|
||||
@include h-center();
|
||||
justify-content: space-between;
|
||||
@ -48,11 +62,14 @@
|
||||
margin-right: 48px;
|
||||
padding: 0 6px;
|
||||
@include h-center();
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
.tab {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
&:not(:last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
width: calc(80%);
|
||||
@ -86,7 +103,15 @@
|
||||
@include round-bar(26);
|
||||
padding: 4px 6px 4px 10px;
|
||||
background-color: #8882;
|
||||
&:hover {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
&:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #8884;
|
||||
}
|
||||
.mdi {
|
||||
@ -95,15 +120,7 @@
|
||||
}
|
||||
}
|
||||
.history-content {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: 0.2s ease-out;
|
||||
}
|
||||
&-enter,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(12px);
|
||||
}
|
||||
@include items-animation();
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
@ -112,6 +129,129 @@
|
||||
@include no-scrollbar();
|
||||
padding: 0 12px;
|
||||
padding-bottom: 12px;
|
||||
.time-group {
|
||||
padding-bottom: 16px;
|
||||
@include items-animation();
|
||||
&-name {
|
||||
padding-bottom: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
&-items {
|
||||
.floating {
|
||||
@include round-bar(20);
|
||||
@include h-center();
|
||||
background-color: #000c;
|
||||
color: white;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
.time-group-item {
|
||||
display: grid;
|
||||
grid-template:
|
||||
"cover title title" 3fr
|
||||
"cover up time" 2fr / 80px 1fr auto;
|
||||
border-radius: 4px;
|
||||
color: black;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 4px 8px 0 #0001;
|
||||
body.dark & {
|
||||
background-color: #282828;
|
||||
color: #eee;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
&:hover {
|
||||
.cover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.floating {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.cover-container {
|
||||
$height: 55px;
|
||||
$padding: 4px;
|
||||
grid-area: cover;
|
||||
position: relative;
|
||||
height: $height;
|
||||
overflow: hidden;
|
||||
border-radius: 4px 0 0 4px;
|
||||
.cover {
|
||||
object-fit: cover;
|
||||
width: 80px;
|
||||
height: $height;
|
||||
body.dark &.placeholder {
|
||||
filter: invert(0.9);
|
||||
}
|
||||
}
|
||||
.duration {
|
||||
left: $padding;
|
||||
bottom: $padding;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.progress-number {
|
||||
left: $padding;
|
||||
top: $padding;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.progress {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
border-radius: 1px;
|
||||
background-color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
.title {
|
||||
grid-area: title;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
align-self: center;
|
||||
padding-left: 8px;
|
||||
padding-right: 6px;
|
||||
font-size: 13px;
|
||||
&:hover {
|
||||
color: var(--theme-color) !important;
|
||||
}
|
||||
}
|
||||
.up,
|
||||
.time {
|
||||
font-size: 11px;
|
||||
opacity: 0.75;
|
||||
align-self: start;
|
||||
}
|
||||
.up {
|
||||
grid-area: up;
|
||||
@include h-center();
|
||||
padding-left: 8px;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.be-icon {
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
&-name {
|
||||
white-space: nowrap;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
font-size: 11px;
|
||||
grid-area: time;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<div class="article-history">article</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
@ -1,27 +1,150 @@
|
||||
import { NavbarComponent } from '../custom-navbar-component'
|
||||
|
||||
interface HistoryItem {
|
||||
id: number
|
||||
title: string
|
||||
coverUrl: string
|
||||
upName: string
|
||||
upID: number
|
||||
href: string
|
||||
}
|
||||
interface TimeData {
|
||||
timestamp: number
|
||||
time: Date
|
||||
timeText: string
|
||||
}
|
||||
interface ProgressHistoryItem extends HistoryItem {
|
||||
progress: number
|
||||
progressText: string
|
||||
duration: number
|
||||
durationText: string
|
||||
isBangumi: boolean
|
||||
}
|
||||
interface TimelineItem {
|
||||
name: string
|
||||
items: HistoryItem[]
|
||||
}
|
||||
type Timeline = TimelineItem[]
|
||||
interface HistoryTab {
|
||||
name: string
|
||||
componentName: string
|
||||
type: string
|
||||
api: string
|
||||
moreLink: string
|
||||
getTimeline: (json: any) => Timeline
|
||||
}
|
||||
const tabs = [
|
||||
const simpleTimeGrouper = (historyItems: (HistoryItem & TimeData)[]) => {
|
||||
const now = new Date()
|
||||
const today = Number(new Date(now.getFullYear(), now.getMonth(), now.getDate()))
|
||||
const oneDay = 24 * 3600000
|
||||
const yesterday = today - oneDay
|
||||
const lastWeek = today - 7 * oneDay
|
||||
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 formatTime = (date: Date) => {
|
||||
return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
|
||||
}
|
||||
const tabs: HistoryTab[] = [
|
||||
{
|
||||
name: '视频',
|
||||
componentName: 'VideoHistory',
|
||||
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 => {
|
||||
const list: any[] = json.data.list
|
||||
const historyItems = list.map(item => {
|
||||
const timestamp = item.view_at * 1000
|
||||
const isBangumi = Boolean(item.uri)
|
||||
const progressParam = item.progress > 0 ? `t=${item.progress}` : 't=0'
|
||||
const progress = item.progress === -1 ? 1 : item.progress / item.duration
|
||||
const historyItem = {
|
||||
isBangumi,
|
||||
id: item.kid,
|
||||
title: item.title,
|
||||
coverUrl: item.cover,
|
||||
upName: item.author_name || item.show_title,
|
||||
upID: item.author_mid || item.kid,
|
||||
href: isBangumi ? item.uri + `?${progressParam}` : `https://www.bilibili.com/video/av${item.kid}?p=${item.history.page}&${progressParam}`,
|
||||
duration: item.duration,
|
||||
durationText: formatDuration(item.duration),
|
||||
progress,
|
||||
progressText: fixed(progress * 100, 1) + '%',
|
||||
timestamp: timestamp,
|
||||
time: new Date(timestamp),
|
||||
} as ProgressHistoryItem & TimeData
|
||||
historyItem.timeText = formatTime(historyItem.time)
|
||||
return historyItem
|
||||
})
|
||||
return simpleTimeGrouper(historyItems)
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '专栏',
|
||||
componentName: 'ArticleHistory',
|
||||
type: 'article',
|
||||
api: 'https://api.bilibili.com/x/web-interface/history/cursor?type=article&ps=30',
|
||||
moreLink: '',
|
||||
getTimeline: json => {
|
||||
const list: any[] = json.data.list
|
||||
const historyItems = list.map(item => {
|
||||
const timestamp = item.view_at * 1000
|
||||
const historyItem = {
|
||||
id: item.kid,
|
||||
title: item.title,
|
||||
coverUrl: item.covers[0],
|
||||
upName: item.author_name,
|
||||
upID: item.author_mid,
|
||||
href: `https://www.bilibili.com/read/cv${item.kid}`,
|
||||
timestamp: timestamp,
|
||||
time: new Date(timestamp),
|
||||
} as HistoryItem & TimeData
|
||||
historyItem.timeText = formatTime(historyItem.time)
|
||||
return historyItem
|
||||
})
|
||||
return simpleTimeGrouper(historyItems)
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '直播',
|
||||
componentName: 'LiveHistory',
|
||||
moreLink: 'https://link.bilibili.com/p/center/index#/user-center/view-history/live'
|
||||
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 => {
|
||||
const list: any[] = json.data.list
|
||||
const historyItems = list.map(item => {
|
||||
return {
|
||||
id: item.roomid,
|
||||
href: `https://live.bilibili.com/${item.roomid}`,
|
||||
upID: item.uid,
|
||||
upName: item.uname,
|
||||
coverUrl: item.user_cover,
|
||||
title: item.title,
|
||||
} as HistoryItem
|
||||
})
|
||||
return [
|
||||
{
|
||||
name: '最近观看',
|
||||
items: historyItems
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
] as HistoryTab[]
|
||||
]
|
||||
export class HistoryList extends NavbarComponent {
|
||||
constructor() {
|
||||
super()
|
||||
@ -41,14 +164,42 @@ export class HistoryList extends NavbarComponent {
|
||||
<div class="tab-name">{{tab.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="more-info" :href="selectedTab.moreLink || null" title="查看更多" target="_blank">
|
||||
<button class="more-info" :disabled="!selectedTab.moreLink || null" @click="viewMore()" title="查看更多">
|
||||
查看更多
|
||||
<i class="mdi mdi-dots-horizontal"></i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<transition name="history-content" mode="out-in">
|
||||
<component class="history-content" :is="selectedTab.componentName"></component>
|
||||
</transition>
|
||||
<transition-group name="history-content" tag="div" class="history-content">
|
||||
<div class="empty-tip" v-if="!timelineLoading && timeline.length === 0" key="empty-tip">
|
||||
空空如也哦 = ̄ω ̄=
|
||||
</div>
|
||||
<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-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">
|
||||
<a class="cover-container" target="_blank" :href="h.href">
|
||||
<dpi-img class="cover" :src="h.coverUrl" :size="{width: 160, height: 110}" placeholder-image></dpi-img>
|
||||
<div v-if="h.progress" class="progress" :style="{width: h.progress * 100 + '%'}"></div>
|
||||
<div v-if="h.progressText" class="floating progress-number">{{h.progress >= 1 ? '已看完' : h.progressText}}</div>
|
||||
<div v-if="h.durationText" class="floating duration">{{h.durationText}}</div>
|
||||
</a>
|
||||
<a class="title" target="_blank" :href="h.href">
|
||||
{{h.title}}
|
||||
</a>
|
||||
<a class="up" target="_blank" :href="h.isBangumi ? h.href : 'https://space.bilibili.com/' + h.upID">
|
||||
<!--<icon type="extended" icon="up"></icon>-->
|
||||
<div class="up-name">{{h.upName}}</div>
|
||||
</a>
|
||||
<div v-if="h.timeText" class="time">
|
||||
{{h.timeText}}
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
@ -63,17 +214,47 @@ export class HistoryList extends NavbarComponent {
|
||||
store,
|
||||
components: {
|
||||
DpiImg: () => import('../../dpi-img.vue'),
|
||||
VideoHistory: () => import('./custom-navbar-video-history.vue'),
|
||||
ArticleHistory: () => import('./custom-navbar-article-history.vue'),
|
||||
LiveHistory: () => import('./custom-navbar-live-history.vue'),
|
||||
Icon: () => import('../../icon.vue'),
|
||||
},
|
||||
data: {
|
||||
tabs,
|
||||
selectedTab: tabs[0],
|
||||
|
||||
timeline: [],
|
||||
timelineLoading: true,
|
||||
},
|
||||
methods: {
|
||||
async updateTimeline() {
|
||||
try {
|
||||
this.timelineLoading = true
|
||||
this.timeline = []
|
||||
const tab = this.selectedTab as HistoryTab
|
||||
const json = await Ajax.getJsonWithCredentials(tab.api)
|
||||
if (json.code !== 0) {
|
||||
throw new Error(`加载历史记录失败: ${json.message}`)
|
||||
}
|
||||
this.timeline = tab.getTimeline(json)
|
||||
console.log(_.cloneDeep(this.timeline))
|
||||
} catch (error) {
|
||||
logError(error)
|
||||
} finally {
|
||||
this.timelineLoading = false
|
||||
}
|
||||
},
|
||||
viewMore() {
|
||||
const tab = this.selectedTab as HistoryTab
|
||||
if (tab.moreLink) {
|
||||
open(tab.moreLink, '_blank')
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedTab() {
|
||||
this.updateTimeline()
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
this.$el.classList.remove('loading')
|
||||
this.updateTimeline()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<div class="live-history">live</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
@ -1,10 +0,0 @@
|
||||
<template>
|
||||
<div class="video-history">video</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
// https://api.bilibili.com/x/web-interface/history/cursor?type=article&ps=30
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
@ -4,17 +4,28 @@
|
||||
:height="height"
|
||||
:srcset="srcset"
|
||||
:src="actualSrc"
|
||||
:style="{filter: blur ? 'blur(' + blur + 'px)' : undefined}"
|
||||
:class="{placeholder: isPlaceholderActive}"
|
||||
:style="{filter}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['size', 'src', 'blur', 'root', 'rootMargin', 'threshold'],
|
||||
// props: ['size', 'src', 'blur', 'root', 'rootMargin', 'threshold', 'placeholderImage'],
|
||||
props: {
|
||||
size: [Object, Number],
|
||||
src: String,
|
||||
blur: Number,
|
||||
root: HTMLElement,
|
||||
rootMargin: String,
|
||||
threshold: Number,
|
||||
placeholderImage: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
srcset: null,
|
||||
actualSrc: null
|
||||
actualSrc: null,
|
||||
isPlaceholderActive: false,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -33,21 +44,30 @@ export default {
|
||||
this.calcSrc()
|
||||
},
|
||||
calcSrc() {
|
||||
if (!this.src || !this.size) {
|
||||
const isSourceInvalid = !this.src || !this.size
|
||||
this.isPlaceholderActive = isSourceInvalid && this.placeholderImage
|
||||
if (isSourceInvalid) {
|
||||
this.srcset = null
|
||||
if (this.placeholderImage) {
|
||||
this.actualSrc = `https://s1.hdslb.com/bfs/static/blive/live-web-center/static/img/no-cover.1ebe4d5.jpg`
|
||||
} else {
|
||||
this.actualSrc = null
|
||||
}
|
||||
return
|
||||
}
|
||||
if (this.src.startsWith('http:')) {
|
||||
this.src = this.src.replace('http:', 'https:')
|
||||
let src = this.src
|
||||
if (src.startsWith('http:')) {
|
||||
src = src.replace('http:', 'https:')
|
||||
}
|
||||
if (this.src.includes('//static.hdslb.com/images/member/noface.gif')) {
|
||||
if (src.includes('//static.hdslb.com/images/member/noface.gif')) {
|
||||
// 这张图无法缩放
|
||||
this.srcset = this.src
|
||||
this.actualSrc = this.src
|
||||
this.srcset = src
|
||||
this.actualSrc = src
|
||||
return
|
||||
}
|
||||
const extension = this.src.substring(this.src.lastIndexOf('.') + 1)
|
||||
this.srcset = getDpiSourceSet(this.src, this.size, extension)
|
||||
this.actualSrc = this.src
|
||||
const extension = src.substring(src.lastIndexOf('.') + 1)
|
||||
this.srcset = getDpiSourceSet(src, this.size, extension)
|
||||
this.actualSrc = src
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -78,6 +98,16 @@ export default {
|
||||
return this.size.height
|
||||
}
|
||||
return null
|
||||
},
|
||||
filter() {
|
||||
const filter = []
|
||||
if (this.blur) {
|
||||
filter.push(`blur(${this.blur}px)`)
|
||||
}
|
||||
// if (this.isPlaceholderActive) {
|
||||
// filter.push(`invert(.9)`)
|
||||
// }
|
||||
return filter.join(' ')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user