mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
1 line
15 KiB
JavaScript
1 line
15 KiB
JavaScript
(()=>{return(t,e)=>{const i=`<div class=category-view :class="{'new-activity-loading': newActivity.loading,'new-post-loading': newPost.loading,'rank-loading': rank.loading}"><slideshow-cards class=new-activity :cards=newActivity.videos :error=newActivity.error :show-stat=true @refresh=loadNewActivity() title=有新动态></slideshow-cards><slideshow-cards class=new-post :cards=newPost.videos :error=newPost.errors :show-stat=false @refresh=loadNewPost() title=最新发布></slideshow-cards><rank-list :videos=rank.videos></rank-list><div class="new-activity loading"></div><div class="new-post loading"></div><div class="rank loading"></div></div>`;e.applyStyleFromText(`.category-view{--loading-from:#d4d4d4;--loading-to:#ddd;--rank-width:370px;--rank-height:calc(var(--rank-width) / 16 * 9);--slideshow-ratio:0.6;--card-height:280px;--card-width:calc(var(--card-height) * (42 / 25));display:grid;grid-template:"new-activity rank" 1fr "new-post rank" 1fr/1fr calc(1.5 * var(--rank-width) + 10px);grid-row-gap:24px;row-gap:24px;grid-column-gap:32px;column-gap:32px;position:relative}@media screen and (max-width:1800px){.category-view{--card-height:272px;--rank-width:350px}}@media screen and (max-width:1700px){.category-view{--card-height:264px;--rank-width:330px}}@media screen and (max-width:1600px){.category-view{--card-height:256px;--rank-width:310px}}@media screen and (max-width:1500px){.category-view{--card-height:248px;--rank-width:290px}}@media screen and (max-width:1400px){.category-view{--card-height:240px;--rank-width:270px}}@media screen and (max-width:1200px){.category-view{--card-height:224px;--rank-width:230px}}@media screen and (max-width:1100px){.category-view{--card-height:216px;--rank-width:210px}}@media screen and (max-width:1000px){.category-view{--card-height:208px;--rank-width:190px}}@media screen and (max-width:900px){.category-view{--card-height:200px;--rank-width:170px}}@media screen and (max-width:800px){.category-view{--card-height:192px;--rank-width:150px}}@media screen and (max-width:700px){.category-view{--card-height:184px;--rank-width:130px}}.category-view,.category-view *,.category-view ::after,.category-view ::before{transition:.2s ease-out}@keyframes normal-category-loading{from{background-color:var(--loading-from)}to{background-color:var(--loading-to)}}body.dark .category-view{--loading-from:#333;--loading-to:#262626}.category-view .loading{opacity:0;pointer-events:none;border-radius:16px;position:absolute}.category-view .area-header{grid-area:header;display:flex;align-items:center;justify-content:flex-start;font-weight:700;font-size:11pt;margin-bottom:12px}.category-view .area-header::before{content:"";display:inline-flex;height:10px;width:10px;background-color:var(--theme-color);border-radius:50%;margin-right:8px}.category-view .rank{display:grid;width:calc(1.5 * var(--rank-width) + 10px);height:calc(2 * (var(--card-height) + 20px) + 48px);justify-self:right;overflow:auto;scrollbar-width:none!important;grid-template:"header header" auto "first second" calc(var(--rank-height)/ 2 + 10px) "first third" calc(var(--rank-height)/ 2 + 10px)/calc(var(--rank-width)) calc(10px + var(--rank-width)/ 2)}.category-view .rank::-webkit-scrollbar{height:0!important;width:0!important}.category-view .rank .area-header{margin-bottom:0;padding-bottom:12px;position:-webkit-sticky;position:sticky;top:0;z-index:1000;background-color:#f4f4f4}body.dark .category-view .rank .area-header{background-color:#161616}.category-view .rank .rank-item{grid-column:1/3;color:inherit!important;position:relative}.category-view .rank .rank-item:not(:nth-child(n+5)){background-color:#fff}body.dark .category-view .rank .rank-item:not(:nth-child(n+5)){background-color:#282828}.category-view .rank .rank-item .cover{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:12px;overflow:hidden}.category-view .rank .rank-item .cover img{width:100%;height:100%;object-fit:cover}.category-view .rank .rank-item:hover .cover img{transform:scale(1.05)}.category-view .rank .rank-item .rank-number{position:absolute;top:4px;left:4px;width:20px;height:20px;line-height:20px;border-radius:50%;box-sizing:border-box;text-align:center;font-weight:700;font-size:12px;z-index:9;background-color:#000c;color:#fff}.category-view .rank .rank-item .watchlater{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;box-sizing:border-box;z-index:9;background-color:#000a;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0}.category-view .rank .rank-item:hover .watchlater{opacity:1}.category-view .rank .rank-item .be-icon{font-size:16px}.category-view .rank .rank-item .be-icon.mdi-fire{transform:scale(calc(18 / 16));margin-right:2px}.category-view .rank .rank-item:not(:nth-child(2))>.title{overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:2.8em;word-break:break-all;line-height:1.4;padding:0 8px;margin-top:4px}.category-view .rank .rank-item:nth-child(2),.category-view .rank .rank-item:nth-child(3),.category-view .rank .rank-item:nth-child(4){border-radius:16px}.category-view .rank .rank-item:nth-child(2) .rank-number,.category-view .rank .rank-item:nth-child(3) .rank-number,.category-view .rank .rank-item:nth-child(4) .rank-number{background-color:var(--theme-color);color:var(--foreground-color);opacity:.9}.category-view .rank .rank-item:nth-child(2){grid-area:first;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;margin-bottom:10px}.category-view .rank .rank-item:nth-child(2) .details{align-self:stretch}.category-view .rank .rank-item:nth-child(2) .cover::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(to top,#000c 0,transparent 100%);z-index:0}.category-view .rank .rank-item:nth-child(2) .title{font-weight:700;font-size:16px;line-height:1.5;color:#fff;padding:0 8px;z-index:10;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}.category-view .rank .rank-item:nth-child(2) .up{display:flex;align-self:stretch;justify-content:space-between;align-items:center;opacity:.75;color:#fff;padding:0 12px 0 6px;margin:4px 0 8px;z-index:10}.category-view .rank .rank-item:nth-child(2) .up>*{display:flex;align-items:center}.category-view .rank .rank-item:nth-child(2) .up .be-iconfont-up{margin-right:4px}.category-view .rank .rank-item:nth-child(2) .up .points{flex-shrink:0;margin-right:8px}.category-view .rank .rank-item:nth-child(2) .up .up-info{max-width:61%}.category-view .rank .rank-item:nth-child(2) .up .up-info .up-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.category-view .rank .rank-item:nth-child(2) .stats{display:flex;justify-content:flex-start;align-items:center;color:#fff;opacity:0;padding:0 8px;position:absolute;bottom:8px;left:0;z-index:10}.category-view .rank .rank-item:nth-child(2) .stats .be-icon{margin:0 2px 0 8px}.category-view .rank .rank-item:nth-child(2) .stats .be-icon:first-child{margin-left:0}.category-view .rank .rank-item:nth-child(2):hover .up{opacity:0}.category-view .rank .rank-item:nth-child(2):hover .stats{opacity:.75}.category-view .rank .rank-item:nth-child(3){grid-area:second;margin-bottom:10px;margin-left:10px}.category-view .rank .rank-item:nth-child(3) .details{position:absolute;top:0;right:calc(100% + 10px);width:var(--rank-width);padding:4px;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;z-index:10;opacity:0;pointer-events:none}.category-view .rank .rank-item:nth-child(3) .details .title{font-weight:700;font-size:14px;line-height:1.5;color:#fff;padding:8px;z-index:10}.category-view .rank .rank-item:nth-child(3) .details .cover{overflow:hidden;background-color:#000}.category-view .rank .rank-item:nth-child(3) .details .cover img{filter:blur(16px) brightness(.5);transform:scale(1.5)}.category-view .rank .rank-item:nth-child(3) .details .stats,.category-view .rank .rank-item:nth-child(3) .details .up{z-index:10;display:flex;color:#fff}.category-view .rank .rank-item:nth-child(3) .details .stats .be-icon:not(.mdi-fire),.category-view .rank .rank-item:nth-child(3) .details .up .be-icon:not(.mdi-fire){margin:0 4px 0 8px}.category-view .rank .rank-item:nth-child(3) .details .up{justify-content:space-between;margin:0 10px 0 6px}.category-view .rank .rank-item:nth-child(3) .details .up>*{display:flex;align-items:center}.category-view .rank .rank-item:nth-child(3) .details .stats{margin:8px}.category-view .rank .rank-item:nth-child(3) .details .stats .be-icon:first-child{margin-left:0}.category-view .rank .rank-item:nth-child(3):hover .details{opacity:1}.category-view .rank .rank-item:nth-child(4){grid-area:third;margin-bottom:10px;margin-left:10px}.category-view .rank .rank-item:nth-child(4) .details{position:absolute;top:0;right:calc(100% + 10px);width:var(--rank-width);padding:4px;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;z-index:10;opacity:0;pointer-events:none}.category-view .rank .rank-item:nth-child(4) .details .title{font-weight:700;font-size:14px;line-height:1.5;color:#fff;padding:8px;z-index:10}.category-view .rank .rank-item:nth-child(4) .details .cover{overflow:hidden;background-color:#000}.category-view .rank .rank-item:nth-child(4) .details .cover img{filter:blur(16px) brightness(.5);transform:scale(1.5)}.category-view .rank .rank-item:nth-child(4) .details .stats,.category-view .rank .rank-item:nth-child(4) .details .up{z-index:10;display:flex;color:#fff}.category-view .rank .rank-item:nth-child(4) .details .stats .be-icon:not(.mdi-fire),.category-view .rank .rank-item:nth-child(4) .details .up .be-icon:not(.mdi-fire){margin:0 4px 0 8px}.category-view .rank .rank-item:nth-child(4) .details .up{justify-content:space-between;margin:0 10px 0 6px}.category-view .rank .rank-item:nth-child(4) .details .up>*{display:flex;align-items:center}.category-view .rank .rank-item:nth-child(4) .details .stats{margin:8px}.category-view .rank .rank-item:nth-child(4) .details .stats .be-icon:first-child{margin-left:0}.category-view .rank .rank-item:nth-child(4):hover .details{opacity:1}.category-view .rank .rank-item:nth-child(n+5){background-color:transparent;display:grid;grid-template:"cover title" 2fr "cover up" 1fr/120px 1fr}.category-view .rank .rank-item:nth-child(n+5):not(:nth-child(5)){margin-top:12px}.category-view .rank .rank-item:nth-child(n+5):not(:nth-child(5))::before{content:"";width:100%;height:1px;background-color:#8882;position:absolute;bottom:calc(100% + 6px);left:0}.category-view .rank .rank-item:nth-child(n+5)>.cover{grid-area:cover;position:static;width:120px;height:70px}.category-view .rank .rank-item:nth-child(n+5)>.title{grid-area:title}.category-view .rank .rank-item:nth-child(n+5) .watchlater{right:unset;left:96px}.category-view .rank .rank-item:nth-child(n+5) .details{grid-area:up;opacity:.75}.category-view .rank .rank-item:nth-child(n+5) .details,.category-view .rank .rank-item:nth-child(n+5) .details *{display:flex;align-items:center}.category-view .rank .rank-item:nth-child(n+5) .details .up{margin:4px 6px;position:absolute;bottom:0}.category-view .rank .rank-item:nth-child(n+5) .details .up .up-info{margin-left:16px}.category-view .rank .rank-item:nth-child(n+5) .details .up .up-info .up-name{margin-left:4px}.category-view .rank .rank-item:nth-child(n+5) .details .stats{position:absolute;bottom:0;display:flex;align-items:center;margin:4px 8px;opacity:0}.category-view .rank .rank-item:nth-child(n+5) .details .stats .number{margin:0 12px 0 4px}.category-view .rank .rank-item:nth-child(n+5):hover .up{opacity:0}.category-view .rank .rank-item:nth-child(n+5):hover .stats{opacity:1}.category-view .new-activity{align-self:start;grid-area:new-activity}.category-view .new-post{align-self:end;grid-area:new-post}.category-view.new-activity-loading .new-activity.loading{position:static;animation:.64s ease-in-out infinite alternate normal-category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.category-view.new-activity-loading .new-activity:not(.loading){opacity:0;pointer-events:none}.category-view.new-post-loading .new-post.loading{position:static;animation:.64s ease-in-out infinite alternate normal-category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.category-view.new-post-loading .new-post:not(.loading){opacity:0;pointer-events:none}.category-view .rank{grid-area:rank}.category-view.rank-loading .rank.loading{position:static;animation:.64s ease-in-out infinite alternate normal-category-loading;opacity:1;pointer-events:initial;width:100%;height:100%}.category-view.rank-loading .rank:not(.loading){opacity:0;pointer-events:none}@media screen and (max-width:1300px){.category-view{--card-height:232px;--rank-width:250px;grid-template:"new-activity" 1fr "new-post" 1fr "rank" auto/1fr}.category-view .rank{justify-self:center}}`,"simple-home-normal-category-style");return{export:Object.assign({template:i},{components:{SlideshowCards:()=>e.importAsync("slideshow-cards.vue"),RankList:()=>e.importAsync("rank-list.vue")},store:store,props:{rid:{type:Number,required:true}},data(){return{newActivity:{error:false,loading:true,videos:[]},newPost:{error:false,loading:true,videos:[]},rank:{error:false,loading:true,videos:[]},loaded:false}},computed:{...Vuex.mapState(["watchlaterList"])},methods:{async loadCards(t,e,i){if(i===undefined){i=(t=>{const e=getUID();const i=_.get(t,"data.archives",[]);return i.map(t=>{return{id:t.aid,aid:t.aid,coverUrl:t.pic.replace("http:","https:"),title:t.title,upName:t.owner.name,upFaceUrl:t.owner.face.replace("http:","https:"),upID:t.owner.mid,playCount:t.stat.view,danmakuCount:t.stat.danmaku,like:t.stat.like,coins:t.stat.coin,description:t.desc,type:t.tname,watchlater:e?this.watchlaterList.includes(t.aid):null}})})}try{this[t].loading=true;const a=await Ajax.getJson(e);if(a.code!==0){this[t].error=true}this[t].videos=i(a)}catch(e){logError(e);this[t].error=true}finally{this[t].loading=false}},async loadNewActivity(){await this.loadCards("newActivity",`https://api.bilibili.com/x/web-interface/dynamic/region?ps=10&rid=${this.rid}`)},async loadNewPost(){await this.loadCards("newPost",`https://api.bilibili.com/x/web-interface/newlist?ps=10&rid=${this.rid}`)},async loadRank(){await this.loadCards("rank",`https://api.bilibili.com/x/web-interface/ranking/region?rid=${this.rid}&day=3&original=0`,t=>{const e=getUID();const i=t.data;return i.map(t=>{return{id:t.aid,aid:parseInt(t.aid),title:t.title,playCount:t.play,favorites:t.favorites,upID:t.mid,upName:t.author,description:t.description,coverUrl:t.pic.replace("http:","https:"),coins:t.coins,durationText:t.duration,points:t.pts,watchlater:e?this.watchlaterList.includes(parseInt(t.aid)):null}})})},...Vuex.mapActions(["toggleWatchlater"]),updateVideos(){this.loadNewActivity();this.loadNewPost();this.loadRank()}},watch:{rid(t){if(t>0){if(this.loaded){this.updateVideos()}}else{console.warn(`rid=${t}`)}}},mounted(){const t=new IntersectionObserver(()=>{this.updateVideos();this.loaded=true;t.disconnect()});t.observe(this.$el)}})}}})(); |