bilibili-bangumi-component/dist/bilibili-bangumi-component/p-e86c4d8b.entry.js

展示 bilibili 与 Bangumi 追番列表的 WebComponent 组件

import{h as n,r as t}from"./p-e887a78f.js";function i(n){return Object.entries(n).filter((([,n])=>!!n)).map((([n,t])=>`${n}=${t}`)).join("&")}function e(n){if(!n.startsWith("http"))return n;const t=new URL(n);return`${t.origin}${"/"===t.pathname?"":t.pathname}`}const a={全部:"0",想看:"1",在看:"2",看过:"3",搁置:"4",抛弃:"5"},b={全部:"0",想读:"1",在读:"2",读过:"3",搁置:"4",抛弃:"5"},s={动画:a,游戏:{全部:"0",想玩:"1",在玩:"2",玩过:"3",搁置:"4",抛弃:"5"},书籍:b,音乐:b,三次元:a},o={动画:"1",游戏:"2",书籍:"3",音乐:"4",三次元:"5"},r={动画:["全部","想看","在看","看过","搁置","抛弃"],游戏:["全部","想玩","在玩","玩过","搁置","抛弃"],书籍:["全部","想读","在读","读过","搁置","抛弃"],音乐:["全部","想听","在听","听过","搁置","抛弃"],三次元:["全部","想看","在看","看过","搁置","抛弃"]};function l({activeLabel:t,labels:i,containerState:e,onChange:a}){return n("div",{class:"bbc-tabs"},i.map((i=>n("div",{class:{"bbc-tab-item":!0,"bbc-tab-item-active":i===t,"bbc-md-tab-item":"large"!==e},key:i,onClick:()=>(n=>{t!==n&&a(n)})(i)},i))))}function c(){return n("div",{class:"bbc-skeleton-container bbc-bangumi-item"},n("div",{class:"bbc-skeleton-avatar"}),n("div",{class:"bbc-skeleton-content bbc-bangumi-content"},n("div",{class:"bbc-skeleton-row",style:{width:"30%"}}),n("div",{class:"bbc-skeleton-row",style:{width:"60%",height:"40px"}}),n("div",{class:"bbc-skeleton-row",style:{width:"90%",height:"32px"}})))}const h=({containerState:t,labels:i})=>{let e=[...i];return"middle"===t&&(e=e.slice(0,4)),"small"===t&&(e=e.slice(0,3)),n("div",{class:"bbc-bangumi-labels"},e.map((i=>n("div",{class:{"bbc-bangumi-label":!0,"bbc-md-label-text":"large"!==t}},n("p",{class:"bbc-bangumi-label-title"},i.label),i.value&&n("p",null,i.value)))))},p=({list:t,loading:i,containerState:e})=>n("div",{class:"bbc-bangumi"},t.map((t=>n("div",null,i?n(c,null):n("div",{class:"bbc-bangumi-item"},n("a",{href:t.url,target:"_blank",rel:"noreferrer"},n("img",{src:t.cover,alt:"cover",loading:"lazy",referrerpolicy:"no-referrer"})),n("div",{class:"bbc-bangumi-content"},n("h3",{class:"bbc-bangumi-title"},n("a",{href:t.url,target:"_blank",rel:"noreferrer",innerHTML:t.name?t.name:t.nameCN}),t.name&&n("small",{innerHTML:t.nameCN})),n(h,{containerState:e,labels:t.labels}),n("p",{class:"bbc-bangumi-summary",innerHTML:t.summary})))))));function d({pageNumber:t,totalPages:i,onChange:e,onInputChange:a}){return n("div",{class:"bbc-pagination"},n("a",{class:"bbc-pagination-button",onClick:()=>e("head")},"首页"),n("a",{class:"bbc-pagination-button",onClick:()=>e("prev")},"上一页"),n("span",{class:"bbc-pagination-pagenum"},`${t} / ${i}`),n("a",{class:"bbc-pagination-button",onClick:()=>e("next")},"下一页"),n("a",{class:"bbc-pagination-button",onClick:()=>e("tail")},"尾页"),n("div",{class:"bbc-pagination-input"},n("span",null,"跳至"),n("input",{type:"text",maxLength:4,onChange:a}),n("span",null,"页")))}function g(){return n("div",{class:"bbc-empty"},n("img",{src:"https://s1.hdslb.com/bfs/static/webssr/article/empty.png",alt:"empty",referrerpolicy:"no-referrer"}))}function u({error:t}){return n("div",{class:"bbc-error"},n("img",{src:"https://s1.hdslb.com/bfs/static/jinkela/long/bitmap/error_01.png",alt:"parse failed",referrerpolicy:"no-referrer"}),n("p",null,"Σ(oﾟдﾟoﾉ) 发生了一些错误"),n("p",null,`message: ${t.message}`))}const m=class{constructor(n){t(this,n),this.platformLabels=["Bilibili","Bangumi"],this.subjectLabels=["动画","游戏","书籍","音乐","三次元"],this.fetchData=async()=>{try{let n;this.loading=!0,this.error=null;const t={uid:this.bilibiliUid,collectionType:this.activeCollection,pageSize:this.pageSize,pageNumber:this.pageNumber};n="Bilibili"===this.activePlatform?await async function(n,t){const b=Object.assign(Object.assign({},t),{collectionType:a[t.collectionType]}),s=await fetch(`${e(n)}/bilibili?${i(b)}`);return await s.json()}(this.api,t):"Bangumi"===this.activePlatform?await async function(n,t){const{subjectType:a}=t,b=Object.assign(Object.assign({},t),{collectionType:s[a][t.collectionType],subjectType:o[t.subjectType]}),r=await fetch(`${e(n)}/bgm?${i(b)}`);return await r.json()}(this.api,Object.assign(Object.assign({},t),{uid:this.bgmUid,subjectType:this.activeSubject})):await async function(n,t){const{subjectType:a}=t,b=Object.assign(Object.assign({},t),{collectionType:s[a][t.collectionType],subjectType:o[t.subjectType]}),r=await fetch(`${e(n)}/custom?${i(b)}`);return await r.json()}(this.api,Object.assign(Object.assign({},t),{subjectType:this.activeSubject})),200===n.code?this.responseData=n.data:(this.error=n,this.responseData=null)}catch(n){this.error=n,this.responseData=null}this.loading=!1},this.handlePlatformChange=n=>{this.collectionLabels="Bilibili"===n?["全部","想看","在看","看过"]:r["动画"],this.activePlatform=n,this.pageNumber=1,this.activeSubject="动画",this.activeCollection="全部",this.fetchData()},this.handleSubjectChange=n=>{this.collectionLabels="Bilibili"===this.activePlatform?["全部","想看","在看","看过"]:r[n],this.activeSubject=n,this.pageNumber=1,this.activeCollection="全部",this.fetchData()},this.handleCollectionChange=n=>{this.activeCollection=n,this.pageNumber=1,this.fetchData()},this.scrollToTop=()=>{document.documentElement.scrollTo({top:0,behavior:"smooth"})},this.handlePageChange=n=>{const{totalPages:t}=this.responseData;switch(n){case"head":this.pageNumber=1;break;case"prev":if(1===this.pageNumber)return;this.pageNumber--;break;case"next":if(this.pageNumber===t)return;this.pageNumber++;break;case"tail":this.pageNumber=t}this.scrollToTop(),this.fetchData()},this.handleInputChange=n=>{const t=Number.parseInt(n.target.value);if(Object.is(t,Number.NaN))return;const{totalPages:i}=this.responseData;this.pageNumber=t<1?1:t>i?i:t,this.scrollToTop(),this.fetchData()},this.api=void 0,this.bilibiliUid=void 0,this.bgmUid=void 0,this.bilibiliEnabled=!0,this.bgmEnabled=!0,this.pageSize=15,this.customEnabled=!1,this.customLabel="自定义",this.loading=!1,this.error=void 0,this.pageNumber=1,this.responseData=void 0,this.activePlatform="Bilibili",this.activeSubject="动画",this.collectionLabels=["全部","想看","在看","看过"],this.activeCollection="全部",this.containerRef=null,this.containerState="large"}componentWillLoad(){const n=[...this.platformLabels];this.customEnabled&&n.push(this.customLabel);const t=[this.bilibiliEnabled,this.bgmEnabled,this.customEnabled];this.platformLabels=n.filter(((n,i)=>t[i])),this.activePlatform=this.platformLabels[0],this.fetchData()}componentDidLoad(){const n=function(n){let t;return function(...i){t||(t=setTimeout((()=>{t=null,n.apply(this,i)}),100))}}((n=>{let t="large";n<=640&&(t="middle"),n<=465&&(t="small"),this.containerState=t})).bind(this);new ResizeObserver((t=>{for(const i of t)n(i.contentRect.width)})).observe(this.containerRef)}render(){return n("div",{ref:n=>this.containerRef=n},n("div",{class:"bbc-header-platform"},n(l,{containerState:this.containerState,activeLabel:this.activePlatform,labels:this.platformLabels,onChange:this.handlePlatformChange}),"Bilibili"!==this.activePlatform&&n("div",{class:"divider"}),"Bilibili"!==this.activePlatform&&n(l,{containerState:this.containerState,activeLabel:this.activeSubject,labels:this.subjectLabels,onChange:this.handleSubjectChange})),n("div",null,n(l,{containerState:this.containerState,activeLabel:this.activeCollection,labels:this.collectionLabels,onChange:this.handleCollectionChange})),this.loading&&n(c,null),this.error&&n(u,{error:this.error}),this.responseData&&n(p,{containerState:this.containerState,loading:this.loading,list:this.responseData.list}),this.responseData&&0===this.responseData.total&&n(g,null),this.responseData&&n(d,{pageNumber:this.pageNumber,totalPages:this.responseData.totalPages,onChange:this.handlePageChange,onInputChange:this.handleInputChange}))}};m.style="@layer bilibili-bangumi-component {\n  :host {\n    display: block;\n    /* 基础文本颜色 */\n    --bbc-text-base-color: #4c4948;\n    /* 标签颜色 */\n    --bbc-label-color: #FF9843;\n    /* 下划线、背景之类的颜色 */\n    --bbc-primary-color: #425aef;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  .bbc-tabs {\n    display: flex;\n    gap: 8px;\n  }\n\n  .bbc-tab-item {\n    padding: 4px 16px;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: bold;\n    color: var(--bbc-text-base-color);\n    cursor: pointer;\n  }\n\n  .bbc-md-tab-item {\n    padding: 4px 12px;\n  }\n\n  .bbc-tab-item:hover {\n    background-color: var(--bbc-primary-color);\n    color: white;\n  }\n\n  .bbc-tab-item-active {\n    color: white;\n    background-color: var(--bbc-primary-color);\n  }\n\n  .bbc-header-platform {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 16px;\n    margin-bottom: 16px;\n  }\n\n  .bbc-header-platform .divider {\n    width: 3px;\n    border-radius: 2px;\n    height: 32px;\n    background-color: var(--bbc-primary-color);\n  }\n\n  .bbc-bangumi:last-child {\n    border-bottom: none;\n  }\n\n  .bbc-bangumi-item {\n    display: flex;\n    margin: 12px 0;\n    gap: 16px;\n    padding: 16px;\n    border-bottom: 1px solid #ddd;\n  }\n\n  .bbc-bangumi-item img {\n    border-radius: 8px;\n    cursor: pointer;\n    height: 140px;\n    object-fit: cover;\n    aspect-ratio: 3 / 4;\n  }\n\n  .bbc-bangumi-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n\n  .bbc-bangumi-title {\n    margin: 0;\n    margin-bottom: 8px;\n  }\n\n  .bbc-bangumi-title a {\n    color: var(--bbc-text-base-color);\n  }\n\n  .bbc-bangumi-title a:hover {\n    border-bottom: 2px solid var(--bbc-primary-color);\n  }\n\n  .bbc-bangumi-title small {\n    margin-left: 8px;\n    font-weight: normal;\n    font-size: 14px;\n    color: var(--bbc-text-base-color);\n    height: 24px;\n  }\n\n  .bbc-bangumi-labels {\n    color: var(--bbc-label-color);\n    display: flex;\n  }\n\n  .bbc-bangumi-label {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 12px;\n    height: 36px;\n    font-size: 14px;\n    border-right: 1px solid var(--bbc-label-color);\n  }\n\n  .bbc-bangumi-label:last-child {\n    border-right: none;\n  }\n\n  .bbc-bangumi-label p {\n    margin: 0;\n    padding: 0 4px;\n  }\n\n  .bbc-bangumi-label:not(.bbc-bangumi-label > .bbc-bangumi-label-title) {\n    justify-content: center;\n  }\n\n  .bbc-md-label-text {\n    font-size: 12px;\n  }\n\n  .bbc-bangumi-summary {\n    margin-bottom: 0;\n    font-size: 12px;\n    color: var(--bbc-text-base-color);\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n  }\n\n  .bbc-pagination {\n    height: 40px;\n    text-align: center;\n    padding-right: 20px;\n  }\n\n  .bbc-pagination-button {\n    border-radius: 4px;\n    font-size: 14px;\n    padding: 4px 8px;\n    margin: 0 4px;\n    color: #bbb;\n    cursor: pointer;\n  }\n\n  .bbc-pagination-button:hover {\n    background-color: var(--bbc-primary-color);\n    color: white;\n  }\n\n  .bbc-pagination-pagenum {\n    color: #bbb;\n    font-size: 14px;\n  }\n  \n  .bbc-pagination-input {\n    display: inline-block;\n    color: #bbb;\n    font-size: 12px;\n  }\n\n  .bbc-pagination-input input {\n    display: inline-block;\n    margin: 0 8px;\n    font-size: 12px;\n    color: #bbb;\n    width: 30px;\n    height: 24px;\n    line-height: 24px;\n    border-radius: 4px;\n    border: 1px solid #bbb;\n    text-align: center;\n    outline: none;\n    transition: border .2s ease;\n  }\n\n  .bbc-skeleton-container {\n    animation: skeleton-blink 1.2s ease-in-out infinite;\n  }\n\n  @keyframes skeleton-blink {\n    50% {\n      opacity: 0.6;\n    }\n  }\n\n  .bbc-skeleton-avatar {\n    height: 140px;\n    border-radius: 12px;\n    background-color: #f2f3f5;\n    aspect-ratio: 3 / 4;\n  }\n\n  .bbc-skeleton-row {\n    height: 24px;\n    border-radius: 8px;\n    background-color: #f2f3f5;\n  }\n\n  .bbc-empty {\n    display: flex;\n    padding: 40px 0;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .bbc-empty img {\n    height: 140px;\n    object-fit: cover;\n  }\n\n  .bbc-error {\n    margin: 20px 0;\n    display: flex;\n    gap: 12px;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .bbc-error img {\n    display: block;\n    width: 260px;\n  }\n\n  .bbc-error p {\n    margin: 0;\n    color: var(--bbc-text-base-color);\n    font-size: 18px;\n  }\n}";export{m as bilibili_bangumi}