mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Improve custom navbar
This commit is contained in:
parent
d3ce747492
commit
d69066a85e
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
min/custom-navbar.min.css
vendored
2
min/custom-navbar.min.css
vendored
@ -1 +1 @@
|
||||
@font-face{font-family:custom-navbar-font;src:url(//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf) format('truetype')}.custom-navbar-iconfont{color:inherit;font-family:custom-navbar-font!important;font-size:24px;font-style:normal}.custom-navbar-icon-logo::before{content:"\\E725"}.custom-navbar{--navbar-height:50px;position:fixed;top:0;left:0;height:var(--navbar-height);width:100vw;background:#fff;color:#000;z-index:10001}.custom-navbar.shadow{box-shadow:#0004 0 2px 10px 1px}.custom-navbar .popup,.custom-navbar.dark:not(.fill){color:#eee;background:#222}.custom-navbar,.custom-navbar *{transition:.2s ease-out}.custom-navbar.fill{background-color:var(--theme-color);color:#fffd}.custom-navbar.fill.shadow{box-shadow:var(--theme-color-30) 0 2px 10px 1px}.custom-navbar>ul{display:flex;align-items:center;justify-content:space-between;margin:0 5%;height:100%}.custom-navbar>ul>li{position:relative;height:100%;padding:0 16px;display:flex;align-items:center}.custom-navbar>ul>li:not(.disabled){cursor:pointer}.custom-navbar>ul>li:not(.disabled):hover{background:rgba(0,0,0,.1)}.custom-navbar .popup{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding:16px;box-shadow:#0002 0 4px 8px 8px}.custom-navbar a{color:inherit}#custom-navbar-home-popup{max-height:50vh;display:flex;flex-direction:column;flex-wrap:wrap;width:100px}#custom-navbar-home-popup .category-item{font-size:12pt;padding:4px 0;display:flex;justify-content:space-between;cursor:pointer}#custom-navbar-home-popup .category-item:hover{background-color:#0001}#custom-navbar-home-popup .category-item>span{opacity:.5}
|
||||
@font-face{font-family:custom-navbar-font;src:url(//s1.hdslb.com/bfs/seed/jinkela/header/asserts/iconfont.ttf) format('truetype')}.custom-navbar-iconfont{color:inherit;font-family:custom-navbar-font!important;font-size:24px;font-style:normal}.custom-navbar-icon-logo::before{content:"\\E725"}.custom-navbar{--navbar-height:50px;position:fixed;top:0;left:0;height:var(--navbar-height);width:100vw;background:#fff;color:#000;z-index:10001}.custom-navbar.shadow{box-shadow:#0004 0 2px 10px 1px}.custom-navbar .popup,.custom-navbar.dark:not(.fill){color:#eee;background:#222}.custom-navbar,.custom-navbar *{transition:.2s ease-out}.custom-navbar.fill{background-color:var(--theme-color);color:#fffd}.custom-navbar.fill.shadow{box-shadow:var(--theme-color-30) 0 2px 10px 1px}.custom-navbar>ul{display:flex;align-items:center;justify-content:space-between;margin:0 5%;height:100%}.custom-navbar>ul>li{position:relative;height:100%;display:flex;align-items:center}.custom-navbar>ul>li:not(.disabled){cursor:pointer}.custom-navbar>ul>li:not(.disabled):hover{background:rgba(0,0,0,.1)}.custom-navbar .main-content{font-size:10pt;height:100%;display:flex;align-items:center;padding:0 16px}.custom-navbar .popup{position:absolute;top:100%;left:50%;transform:translateX(-50%) scale(0);padding:16px;box-shadow:#0002 0 4px 8px 8px;pointer-events:none;opacity:0;transform-origin:top;transition:.15s cubic-bezier(.18,.89,.38,1.15)}.custom-navbar>ul>li:not(.disabled):hover .popup{transform:translateX(-50%) scale(1);pointer-events:initial;opacity:1}.custom-navbar a{color:inherit}#custom-navbar-home-popup{max-height:50vh;display:flex;flex-direction:column;flex-wrap:wrap;width:300px}#custom-navbar-home-popup .category-item{font-size:12pt;padding:8px 16px;cursor:pointer}#custom-navbar-home-popup .category-item:hover{background-color:#0001}#custom-navbar-home-popup .category-item a{display:flex;justify-content:space-between}#custom-navbar-home-popup .category-item span{opacity:.5}
|
||||
@ -1 +1 @@
|
||||
<div class=custom-navbar><ul><li v-for="component of components"v-bind:class="{disabled: component.disabled}"v-bind:style="{flex: component.flex}"><div class=content v-on:click=togglePopup(component) v-html=component.html></div><div class=popup v-if=component.popupHtml v-show=component.showPopup v-html=component.popupHtml></div></ul></div>
|
||||
<div class=custom-navbar><ul><li v-for="component of components"v-bind:class="{disabled: component.disabled}"v-bind:style="{flex: component.flex}"><a class=main-content v-bind:href=component.href v-html=component.html></a><div class=popup v-if=component.popupHtml v-html=component.popupHtml></div></ul></div>
|
||||
2
min/custom-navbar.min.js
vendored
2
min/custom-navbar.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(t,e)=>{if(isIframe()){return}const s=["/www.bilibili.com"];if(!s.some(t=>document.URL.includes(t))){return}class o{constructor(){this.html=``;this.popupHtml=``;this.flex=`0 0 auto`;this.disabled=false;this.showPopup=false}}class n extends o{constructor(){super();this.flex="1 0 auto";this.disabled=true}}class i extends o{constructor(){super();this.html=`<a href="https://www.bilibili.com/"><i class="custom-navbar-iconfont custom-navbar-icon-logo"></i></a>`}}class a extends o{constructor(){super();this.html=`<a href="https://www.bilibili.com/">主站</a>`;this.popupHtml=`\n <ul id="custom-navbar-home-popup">\n <li class="category-item" v-for="item of info">\n {{item[0]}}<span>{{item[1]}}</span>\n </li>\n </ul>\n `;this.getOnlineInfo().then(t=>{new Vue({el:"#custom-navbar-home-popup",data:{info:Object.entries(t)}})})}async getOnlineInfo(){const t=await Ajax.getJson("https://api.bilibili.com/x/web-interface/online");if(parseInt(t.code)!==0){throw new Error(`[自定义顶栏] 分区投稿信息获取失败: ${t.message}`)}const e=t.data.region_count;await SpinQuery.select("#custom-navbar-home-popup");return{"动画":e[1],"番剧":e[13],"国创":e[167],"音乐":e[3],"舞蹈":e[129],"游戏":e[4],"生活":e[160],"鬼畜":e[119],"时尚":e[155],"广告":e[165],"娱乐":e[5],"影视":e[181],"科技":e[36],"数码":e[188],"放映厅":e[177]+e[23]}}}(async()=>{const s=await e.importAsync("customNavbarHtml");document.body.insertAdjacentHTML("beforeend",s);const o=document.querySelector(".custom-navbar");for(const[e,s]of Object.entries(t.customNavbarSettings)){if(s===true){o.classList.add(e)}}if(t.useDarkStyle){o.classList.add("dark")}const c=[new i,new a,new n];new Vue({el:o,data:{components:c},methods:{togglePopup(t){t.showPopup=!t.showPopup}}})})()}})();
|
||||
(()=>{return(i,t)=>{if(isIframe()){return}const n=["/www.bilibili.com"];if(!n.some(i=>document.URL.includes(i))){return}class o{constructor(){this.html=``;this.popupHtml=``;this.flex=`0 0 auto`;this.disabled=false;this.href=``}}class l extends o{constructor(){super();this.flex="1 0 auto";this.disabled=true}}class s extends o{constructor(){super();this.href=`https://www.bilibili.com/`;this.html=`<i class="custom-navbar-iconfont custom-navbar-icon-logo"></i>`}}class c extends o{constructor(i,t){super();this.html=i;this.href=t}}class e extends o{constructor(){super();this.html=`主站`;this.popupHtml=`\n <ul id="custom-navbar-home-popup">\n <li class="category-item" v-for="item of info">\n <a v-bind:href="item[1].link">\n {{item[0]}}<span>{{item[1].count}}</span>\n </a>\n </li>\n </ul>\n `;this.getOnlineInfo().then(i=>{new Vue({el:"#custom-navbar-home-popup",data:{info:Object.entries(i)}})})}async getOnlineInfo(){const i=await Ajax.getJson("https://api.bilibili.com/x/web-interface/online");if(parseInt(i.code)!==0){throw new Error(`[自定义顶栏] 分区投稿信息获取失败: ${i.message}`)}const t=i.data.region_count;await SpinQuery.select("#custom-navbar-home-popup");return{"动画":{count:t[1],link:`https://www.bilibili.com/v/douga/`},"番剧":{count:t[13],link:`https://www.bilibili.com/anime/`},"国创":{count:t[167],link:`https://www.bilibili.com/guochuang/`},"音乐":{count:t[3],link:`https://www.bilibili.com/v/music/`},"舞蹈":{count:t[129],link:`https://www.bilibili.com/v/dance/`},"游戏":{count:t[4],link:`https://www.bilibili.com/v/game/`},"科技":{count:t[36],link:`https://www.bilibili.com/v/technology/`},"数码":{count:t[188],link:`https://www.bilibili.com/v/digital/`},"生活":{count:t[160],link:`https://www.bilibili.com/v/life/`},"鬼畜":{count:t[119],link:`https://www.bilibili.com/v/kichiku/`},"时尚":{count:t[155],link:`https://www.bilibili.com/v/fashion/`},"广告":{count:t[165],link:`https://www.bilibili.com/v/ad/ad/`},"娱乐":{count:t[5],link:`https://www.bilibili.com/v/ent/`},"影视":{count:t[181],link:`https://www.bilibili.com/v/cinephile/`},"放映厅":{count:t[177]+t[23],link:`https://www.bilibili.com/cinema/`},"专栏":{count:``,link:`https://www.bilibili.com/read/home`},"直播":{count:``,link:`https://live.bilibili.com`},"小黑屋":{count:``,link:`https://www.bilibili.com/blackroom/`},"话题":{count:``,link:`https://www.bilibili.com/blackboard/topic_list.html`},"活动":{count:``,link:`https://www.bilibili.com/blackboard/x/act_list`}}}}(async()=>{const n=await t.importAsync("customNavbarHtml");document.body.insertAdjacentHTML("beforeend",n);const o=document.querySelector(".custom-navbar");for(const[t,n]of Object.entries(i.customNavbarSettings)){if(n===true){o.classList.add(t)}}if(i.useDarkStyle){o.classList.add("dark")}const w=[new s,new e,new c("画友","https://h.bilibili.com"),new c("音频","https://www.bilibili.com/audio/home/?type=10"),new c("会员购","https://show.bilibili.com/platform/home.html?msource=pc_web"),new c("漫画","https://manga.bilibili.com"),new l];new Vue({el:o,data:{components:w}})})()}})();
|
||||
@ -63,7 +63,6 @@
|
||||
{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -75,40 +74,62 @@
|
||||
{
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
.custom-navbar .main-content
|
||||
{
|
||||
font-size: 10pt;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.custom-navbar .popup
|
||||
{
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(-50%) scale(0);
|
||||
padding: 16px;
|
||||
box-shadow: #0002 0 4px 8px 8px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform-origin: top;
|
||||
transition: all 0.15s cubic-bezier(0.18, 0.89, 0.38, 1.15);
|
||||
}
|
||||
.custom-navbar>ul>li:not(.disabled):hover .popup
|
||||
{
|
||||
transform: translateX(-50%) scale(1);
|
||||
pointer-events: initial;
|
||||
opacity: 1;
|
||||
}
|
||||
.custom-navbar a
|
||||
{
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#custom-navbar-home-popup
|
||||
{
|
||||
max-height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
width: 100px;
|
||||
width: 300px;
|
||||
}
|
||||
#custom-navbar-home-popup .category-item
|
||||
{
|
||||
font-size: 12pt;
|
||||
padding: 4px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#custom-navbar-home-popup .category-item:hover
|
||||
{
|
||||
background-color: #0001;
|
||||
}
|
||||
#custom-navbar-home-popup .category-item>span
|
||||
#custom-navbar-home-popup .category-item a
|
||||
{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#custom-navbar-home-popup .category-item span
|
||||
{
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -2,8 +2,8 @@
|
||||
<ul>
|
||||
<li v-for="component of components" v-bind:class="{disabled: component.disabled}"
|
||||
v-bind:style="{flex: component.flex}">
|
||||
<div class="content" v-on:click="togglePopup(component)" v-html="component.html"></div>
|
||||
<div class="popup" v-if="component.popupHtml" v-show="component.showPopup" v-html="component.popupHtml">
|
||||
<a class="main-content" v-bind:href="component.href" v-html="component.html"></a>
|
||||
<div class="popup" v-if="component.popupHtml" v-html="component.popupHtml">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -18,7 +18,7 @@ class NavbarComponent
|
||||
this.popupHtml = ``;
|
||||
this.flex = `0 0 auto`;
|
||||
this.disabled = false;
|
||||
this.showPopup = false;
|
||||
this.href = ``;
|
||||
}
|
||||
}
|
||||
class Blank extends NavbarComponent
|
||||
@ -35,19 +35,31 @@ class Logo extends NavbarComponent
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
this.html = /*html*/`<a href="https://www.bilibili.com/"><i class="custom-navbar-iconfont custom-navbar-icon-logo"></i></a>`;
|
||||
this.href = `https://www.bilibili.com/`;
|
||||
this.html = /*html*/`<i class="custom-navbar-iconfont custom-navbar-icon-logo"></i>`;
|
||||
}
|
||||
}
|
||||
class Home extends NavbarComponent
|
||||
class SimpleLink extends NavbarComponent
|
||||
{
|
||||
constructor(name, link)
|
||||
{
|
||||
super();
|
||||
this.html = name;
|
||||
this.href = link;
|
||||
}
|
||||
}
|
||||
class Category extends NavbarComponent
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
this.html = /*html*/`<a href="https://www.bilibili.com/">主站</a>`;
|
||||
this.html = `主站`;
|
||||
this.popupHtml = /*html*/`
|
||||
<ul id="custom-navbar-home-popup">
|
||||
<li class="category-item" v-for="item of info">
|
||||
{{item[0]}}<span>{{item[1]}}</span>
|
||||
<a v-bind:href="item[1].link">
|
||||
{{item[0]}}<span>{{item[1].count}}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
@ -71,22 +83,27 @@ class Home extends NavbarComponent
|
||||
const regionCount = json.data.region_count;
|
||||
await SpinQuery.select("#custom-navbar-home-popup");
|
||||
return {
|
||||
动画: regionCount[1],
|
||||
番剧: regionCount[13],
|
||||
国创: regionCount[167],
|
||||
音乐: regionCount[3],
|
||||
舞蹈: regionCount[129],
|
||||
游戏: regionCount[4],
|
||||
生活: regionCount[160],
|
||||
鬼畜: regionCount[119],
|
||||
时尚: regionCount[155],
|
||||
广告: regionCount[165],
|
||||
娱乐: regionCount[5],
|
||||
影视: regionCount[181],
|
||||
科技: regionCount[36],
|
||||
数码: regionCount[188],
|
||||
放映厅: regionCount[177] + regionCount[23],
|
||||
动画: { count: regionCount[1], link: `https://www.bilibili.com/v/douga/` },
|
||||
番剧: { count: regionCount[13], link: `https://www.bilibili.com/anime/` },
|
||||
国创: { count: regionCount[167], link: `https://www.bilibili.com/guochuang/` },
|
||||
音乐: { count: regionCount[3], link: `https://www.bilibili.com/v/music/` },
|
||||
舞蹈: { count: regionCount[129], link: `https://www.bilibili.com/v/dance/` },
|
||||
游戏: { count: regionCount[4], link: `https://www.bilibili.com/v/game/` },
|
||||
科技: { count: regionCount[36], link: `https://www.bilibili.com/v/technology/` },
|
||||
数码: { count: regionCount[188], link: `https://www.bilibili.com/v/digital/` },
|
||||
生活: { count: regionCount[160], link: `https://www.bilibili.com/v/life/` },
|
||||
鬼畜: { count: regionCount[119], link: `https://www.bilibili.com/v/kichiku/` },
|
||||
时尚: { count: regionCount[155], link: `https://www.bilibili.com/v/fashion/` },
|
||||
广告: { count: regionCount[165], link: `https://www.bilibili.com/v/ad/ad/` },
|
||||
娱乐: { count: regionCount[5], link: `https://www.bilibili.com/v/ent/` },
|
||||
影视: { count: regionCount[181], link: `https://www.bilibili.com/v/cinephile/` },
|
||||
放映厅: { count: regionCount[177] + regionCount[23], link: `https://www.bilibili.com/cinema/` },
|
||||
// TODO: regionCount[11]?
|
||||
专栏: { count: ``, link: `https://www.bilibili.com/read/home` },
|
||||
直播: { count: ``, link: `https://live.bilibili.com` },
|
||||
小黑屋: { count: ``, link: `https://www.bilibili.com/blackroom/` },
|
||||
话题: { count: ``, link: `https://www.bilibili.com/blackboard/topic_list.html` },
|
||||
活动: { count: ``, link: `https://www.bilibili.com/blackboard/x/act_list` },
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -109,7 +126,11 @@ class Home extends NavbarComponent
|
||||
}
|
||||
const components = [
|
||||
new Logo,
|
||||
new Home,
|
||||
new Category,
|
||||
new SimpleLink("画友", "https://h.bilibili.com"),
|
||||
new SimpleLink("音频", "https://www.bilibili.com/audio/home/?type=10"),
|
||||
new SimpleLink("会员购", "https://show.bilibili.com/platform/home.html?msource=pc_web"),
|
||||
new SimpleLink("漫画", "https://manga.bilibili.com"),
|
||||
new Blank,
|
||||
];
|
||||
new Vue({
|
||||
@ -117,11 +138,5 @@ class Home extends NavbarComponent
|
||||
data: {
|
||||
components,
|
||||
},
|
||||
methods: {
|
||||
togglePopup(component)
|
||||
{
|
||||
component.showPopup = !component.showPopup;
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
Loading…
Reference in New Issue
Block a user