mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
1 line
16 KiB
JavaScript
1 line
16 KiB
JavaScript
(()=>{return(i,e)=>{const t=`<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><div class=rank><div class=area-header>排行榜</div><a class=rank-item v-for="(c, index) of rank.videos":key=c.id target=_blank :href="'https://www.bilibili.com/av' + c.aid"><div class=cover><dpi-img :src=c.coverUrl :size="{ width: 370 }"></dpi-img></div><div class=rank-number>{{index + 1}}</div><div v-if="index === 0 || index > 2"class=title :title="index === 0 ? c.title : null">{{c.title}}</div><div class=watchlater v-if="c.watchlater !== null":title="watchlaterList.includes(c.aid) ? '已添加' : '稍后再看'"@click.prevent=toggleWatchlater(c.aid)><icon v-if=watchlaterList.includes(c.aid) type=mdi icon=check-circle></icon><icon v-else type=mdi icon=clock-outline></icon></div><div class=details><div v-if="index > 0 && index < 3"class=title :title=c.title>{{c.title}}</div><div v-if="index > 0 && index < 3"class=cover><dpi-img :src=c.coverUrl :size="{ width: 370 }"></dpi-img></div><div class=up><div class=points><icon icon=fire type=mdi></icon>{{c.points | bigNumber}}</div><div class=up-info><icon icon=up type=extended></icon><div class=up-name>{{c.upName}}</div></div></div><div class=stats><icon type=extended icon=play></icon><div class=number>{{c.playCount | bigNumber}}</div><icon type=extended icon=coin></icon><div class=number>{{c.coins | bigNumber}}</div><icon type=extended icon=favorites></icon><div class=number>{{c.favorites | bigNumber}}</div></div></div></a></div><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:300px;--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:288px;--rank-width:350px}}@media screen and (max-width:1700px){.category-view{--card-height:276px;--rank-width:330px}}@media screen and (max-width:1600px){.category-view{--card-height:264px;--rank-width:310px}}@media screen and (max-width:1500px){.category-view{--card-height:252px;--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:216px;--rank-width:230px}}@media screen and (max-width:1100px){.category-view{--card-height:204px;--rank-width:210px}}@media screen and (max-width:1000px){.category-view{--card-height:192px;--rank-width:190px}}@media screen and (max-width:900px){.category-view{--card-height:180px;--rank-width:170px}}@media screen and (max-width:800px){.category-view{--card-height:168px;--rank-width:150px}}@media screen and (max-width:700px){.category-view{--card-height:156px;--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 watchlater" 2fr "cover up up" 1fr/120px 1fr auto}.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{grid-area:watchlater}.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:228px;--rank-width:250px;grid-template:"new-activity" 1fr "new-post" 1fr "rank" auto/1fr;--card-height:300px}.category-view .rank{--rank-width:420px;justify-self:center}}`,"simple-home-normal-category-style");return{export:Object.assign({template:t},{components:{SlideshowCards:()=>e.importAsync("slideshow-cards.vue"),Icon:()=>e.importAsync("icon.vue"),DpiImg:()=>e.importAsync("dpi-img.vue")},store:store,filters:{bigNumber(i){return formatCount(i)}},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(i,e,t){if(t===undefined){t=(i=>{const e=getUID();const t=_.get(i,"data.archives",[]);return t.map(i=>{return{id:i.aid,aid:i.aid,coverUrl:i.pic.replace("http:","https:"),title:i.title,upName:i.owner.name,upFaceUrl:i.owner.face.replace("http:","https:"),upID:i.owner.mid,playCount:i.stat.view,danmakuCount:i.stat.danmaku,like:i.stat.like,coins:i.stat.coin,description:i.desc,type:i.tname,watchlater:e?this.watchlaterList.includes(i.aid):null}})})}try{this[i].loading=true;const a=await Ajax.getJson(e);if(a.code!==0){this[i].error=true}this[i].videos=t(a)}catch(e){logError(e);this[i].error=true}finally{this[i].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`,i=>{const e=getUID();const t=i.data;return t.map(i=>{return{id:i.aid,aid:parseInt(i.aid),title:i.title,playCount:i.play,favorites:i.favorites,upID:i.mid,upName:i.author,description:i.description,coverUrl:i.pic.replace("http:","https:"),coins:i.coins,durationText:i.duration,points:i.pts,watchlater:e?this.watchlaterList.includes(parseInt(i.aid)):null}})})},...Vuex.mapActions(["toggleWatchlater"]),updateVideos(){this.loadNewActivity();this.loadNewPost();this.loadRank()}},watch:{rid(i){if(i>0){if(this.loaded){this.updateVideos()}}else{console.warn(`rid=${i}`)}}},mounted(){const i=new IntersectionObserver(()=>{this.updateVideos();this.loaded=true;i.disconnect()});i.observe(this.$el)}})}}})(); |