mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
1 line
13 KiB
JavaScript
1 line
13 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><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 v-if="index < 3"class=cover><dpi-img :src=c.coverUrl :size="{ width: 200, height: 120 }"></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=details><div v-if="index > 0"class=title :title=c.title>{{c.title}}</div><div v-if="index > 0"class=cover><dpi-img :src=c.coverUrl :size="{ width: 200, height: 120 }"></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 class=area-header>排行榜</div></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:420px;--rank-height:250px;--slideshow-ratio:1.2;display:grid;grid-template:"new-activity rank" 1fr "new-post rank" 1fr/1fr var(--rank-width);grid-gap:24px;gap:24px;position:relative;--card-height:calc((8 * 34px + 20px + 1.5 * var(--rank-height)) / 2 - 32px);--card-width:calc(var(--card-height) * (42 / 25))}@media screen and (max-width:1800px){.category-view{--slideshow-ratio:1.2;--rank-width:390px;--rank-height:232.1428571429px}}@media screen and (max-width:1700px){.category-view{--slideshow-ratio:1.1333333333;--rank-width:360px;--rank-height:214.2857142857px}}@media screen and (max-width:1600px){.category-view{--slideshow-ratio:1.0666666667;--rank-width:330px;--rank-height:196.4285714286px}}@media screen and (max-width:1500px){.category-view{--slideshow-ratio:1;--rank-width:300px;--rank-height:178.5714285714px}}@media screen and (max-width:1400px){.category-view{--slideshow-ratio:0.9333333333;--rank-width:270px;--rank-height:160.7142857143px}}@media screen and (max-width:1300px){.category-view{--slideshow-ratio:0.8666666667;--rank-width:240px;--rank-height:142.8571428571px}}@media screen and (max-width:1200px){.category-view{--slideshow-ratio:0.8;--rank-width:210px;--rank-height:125px}}@media screen and (max-width:1000px){.category-view{--slideshow-ratio:0.8;--rank-width:210px;--rank-height:125px}}@media screen and (max-width:900px){.category-view{--slideshow-ratio:0.7333333333;--rank-width:180px;--rank-height:107.1428571429px}}@media screen and (max-width:800px){.category-view{--slideshow-ratio:0.6666666667;--rank-width:150px;--rank-height:89.2857142857px}}@media screen and (max-width:700px){.category-view{--slideshow-ratio:0.6;--rank-width:120px;--rank-height:71.4285714286px}}.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;animation:.64s ease-in-out infinite alternate normal-category-loading;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:var(--rank-width);justify-self:right;grid-template:"header header" auto "first first" calc(10px + var(--rank-height)) "second third" calc(var(--rank-height)/ 2 + 10px)/1fr 1fr}.category-view .rank .rank-item{grid-column:1/3;box-shadow:0 4px 8px 0 #0001;background-color:#fff;color:inherit!important;position:relative}body.dark .category-view .rank .rank-item{background-color:#282828}.category-view .rank .rank-item .cover{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:16px;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:6px;left:6px;width:22px;height:22px;line-height:22px;border-radius:50%;box-sizing:border-box;text-align:center;font-weight:700;font-size:13px;z-index:9;background-color:#8884}.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(:first-child)>.title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:13px;line-height:34px;padding:0 8px 0 34px;opacity:.9}.category-view .rank .rank-item:not(:first-child):hover{background-color:var(--theme-color-30)}.category-view .rank .rank-item:not(:first-child):hover>.title{opacity:1}.category-view .rank .rank-item:not(:first-child) .details{position:absolute;top:50%;right:calc(100% + 10px);transform:translateY(-50%);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:not(:first-child) .details .title{font-weight:700;font-size:14px;line-height:1.5;color:#fff;padding:8px;z-index:10}.category-view .rank .rank-item:not(:first-child) .details .cover{overflow:hidden;background-color:#000}.category-view .rank .rank-item:not(:first-child) .details .cover img{filter:blur(16px) brightness(.5);transform:scale(1.5)}.category-view .rank .rank-item:not(:first-child) .details .stats,.category-view .rank .rank-item:not(:first-child) .details .up{z-index:10;display:flex;color:#fff}.category-view .rank .rank-item:not(:first-child) .details .stats .be-icon:not(.mdi-fire),.category-view .rank .rank-item:not(:first-child) .details .up .be-icon:not(.mdi-fire){margin:0 4px 0 8px}.category-view .rank .rank-item:not(:first-child) .details .up{justify-content:space-between;margin:0 10px 0 6px}.category-view .rank .rank-item:not(:first-child) .details .up>*{display:flex;align-items:center}.category-view .rank .rank-item:not(:first-child) .details .stats{margin:8px}.category-view .rank .rank-item:not(:first-child) .details .stats .be-icon:first-child{margin-left:0}.category-view .rank .rank-item:not(:first-child):hover .details{opacity:1}.category-view .rank .rank-item:first-child,.category-view .rank .rank-item:nth-child(2),.category-view .rank .rank-item:nth-child(3){border-radius:16px}.category-view .rank .rank-item:first-child .rank-number,.category-view .rank .rank-item:nth-child(2) .rank-number,.category-view .rank .rank-item:nth-child(3) .rank-number{background-color:var(--theme-color);color:var(--foreground-color);opacity:.9}.category-view .rank .rank-item:nth-child(4){border-radius:16px 16px 0 0}.category-view .rank .rank-item:nth-last-child(2){border-radius:0 0 16px 16px}.category-view .rank .rank-item:first-child{grid-area:first;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;margin-bottom:10px}.category-view .rank .rank-item:first-child .details{align-self:stretch}.category-view .rank .rank-item:first-child .cover::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:16px;background-image:linear-gradient(to top,#000C 0,transparent 100%);z-index:0}.category-view .rank .rank-item:first-child .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:first-child .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:first-child .up>*{display:flex;align-items:center}.category-view .rank .rank-item:first-child .up .be-iconfont-up{margin-right:4px}.category-view .rank .rank-item:first-child .up .points{flex-shrink:0;margin-right:8px}.category-view .rank .rank-item:first-child .up .up-info{max-width:61%}.category-view .rank .rank-item:first-child .up .up-info .up-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.category-view .rank .rank-item:first-child .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:first-child .stats .be-icon{margin:0 2px 0 8px}.category-view .rank .rank-item:first-child .stats .be-icon:first-child{margin-left:0}.category-view .rank .rank-item:first-child:hover .up{opacity:0}.category-view .rank .rank-item:first-child:hover .stats{opacity:.75}.category-view .rank .rank-item:nth-child(2){grid-area:second;margin-right:5px;margin-bottom:10px}.category-view .rank .rank-item:nth-child(3){grid-area:third;margin-left:5px;margin-bottom:10px}.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;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;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;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:1100px){.category-view{--slideshow-ratio:0.8666666667;--rank-width:240px;--rank-height:142.8571428571px;grid-template:"new-activity" 1fr "new-post" 1fr "rank" auto/1fr}.category-view .rank{--rank-width:420px;--rank-height:250px}}`,"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")},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:[]},watchlaterList:null,loaded:false}},methods:{async loadCards(i,t,a){if(a===undefined){a=(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 r=await Ajax.getJson(t);if(r.code!==0){this[i].error=true}const{getWatchlaterList:n}=await e.importAsync("watchlater-api");if(this.watchlaterList===null){const i=getUID();this.watchlaterList=i?await n():[]}this[i].videos=a(r)}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}})})},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)}})}}})(); |