diff --git a/dist/app.js b/dist/app.js index 91d68de..67fd260 100644 --- a/dist/app.js +++ b/dist/app.js @@ -8,17 +8,12 @@ import { createApp } from 'wkitd' import { css, html } from 'wkit' import 'es.shim' -// import '//jscdn.ink/@bd/ui/latest/form/input.js' -// import '//jscdn.ink/@bd/ui/latest/form/button.js' -// import '//jscdn.ink/@bd/ui/latest/form/checkbox.js' -// import '//jscdn.ink/@bd/ui/latest/form/switch.js' -// import '//jscdn.ink/@bd/ui/latest/form/link.js' -// import '//jscdn.ink/@bd/ui/latest/layer/index.js' -// // import 'http://127.0.0.1:8090/dist/layer/index.js' -// import '//jscdn.ink/@bd/ui/latest/pager/index.js' -// import '//jscdn.ink/@bytedo/wcui/1.0.12/form/dropdown.js' - -// import App from './app.vue' +import '@ui/form/input.js' +import '@ui/form/button.js' +import '@ui/form/switch.js' +import '@ui/form/link.js' +import '@ui/layer/index.js' +import '@ui/pager/index.js' import router from './router.js' import store from './store.js' diff --git a/dist/assets/app.css b/dist/assets/app.css index 4db0a91..5600d38 100644 --- a/dist/assets/app.css +++ b/dist/assets/app.css @@ -9,6 +9,7 @@ background: var(--color-dark-1); } } + body { line-height: 1.5; font-size: 14px; diff --git a/dist/components/header.js b/dist/components/header.js index b58c94d..96cbc73 100644 --- a/dist/components/header.js +++ b/dist/components/header.js @@ -1,13 +1,13 @@ import { html, css, Component, classMap } from 'wkit' +import { watch } from 'wkitd' import fetch from '/lib/fetch.js' class Header extends Component { - static props = { - input: '' - } - static styles = css` + ::selection { + background: var(--color-plain-a); + } .common-header { flex-shrink: 0; display: flex; @@ -51,13 +51,10 @@ class Header extends Component { border-radius: 4px; transition: background 0.2s ease-in-out; - &:hover { + &:hover, + &.active { background: rgba(255, 255, 255, 0.3); } - - &.router-link-active { - text-decoration: underline; - } } } } @@ -78,6 +75,7 @@ class Header extends Component { height: 320px; .search { display: inline-block; + --wc-input-border-color: none; } } @@ -105,36 +103,59 @@ class Header extends Component { } ` - search() { - let id = this.input.trim() + #search(ev) { + let id = this.$store.searchInput + if (id) { - fetch('/package/search/' + encodeURIComponent(id)).then(r => { - let dict = { versions: [], id } - let last = null - for (let it of r.data) { - let tmp = it.split('/') - let v = tmp.shift() - let n = tmp.join('/') - if (last === v) { - dict[last].push(n) - } else { - last = v - dict.versions.push(last) - dict[last] = [n] + fetch('/package/search/' + encodeURIComponent(id)) + .then(r => { + let dict = { versions: [], id } + let last = null + for (let it of r.data) { + let tmp = it.split('/') + let v = tmp.shift() + let n = tmp.join('/') + if (last === v) { + dict[last].push(n) + } else { + last = v + dict.versions.push(last) + dict[last] = [n] + } } - } - this.$store.result = dict - }) + dict.version = last + this.$store.result = dict + }) + .catch(err => { + this.$store.result = { version: '', versions: [], id: '' } + }) } else { - this.$store.result = null + this.$store.result = { version: '', versions: [], id: '' } } } + #handleInput(ev) { + this.$store.searchInput = ev.target.value + } + + mounted() { + watch('$store.searchInput', val => { + this.#search() + }) + watch('$route', route => { + if (route.path === '/' && !route.query.name) { + this.$store.searchInput = '' + } + }) + } + render() { return html`
@@ -161,8 +182,9 @@ class Header extends Component { no-border placeholder="请输入开源库的名字~~" clearable - value=${this.input} - @submit=${this.search} + value=${this.$store.searchInput} + @submit=${this.#handleInput} + @change=${this.#handleInput} >
` diff --git a/dist/index.html b/dist/index.html index 2033944..e8bae2c 100644 --- a/dist/index.html +++ b/dist/index.html @@ -15,8 +15,10 @@ "es.shim": "//jscdn.ink/es.shim/2.1.0/index.js", "fetch": "//jscdn.ink/@bytedo/fetch/latest/next.js", "wkit": "//jscdn.ink/wkit/latest/index.js", + "wkit2": "http://127.0.0.1:9999/src/index.js", "wkitd": "//jscdn.ink/wkitd/latest/index.js", - "@ui/": "/assets/lib/ui/" + "wkitd2": "http://127.0.0.1:23333/src/index.js", + "@ui/": "/lib/ui/" } } diff --git a/dist/lib/ui/layer/index.js b/dist/lib/ui/layer/index.js index c84e0f6..0bcf751 100644 --- a/dist/lib/ui/layer/index.js +++ b/dist/lib/ui/layer/index.js @@ -1,4 +1,4 @@ -import{css as c,html as y,Component as x,bind as g,styleMap as d}from"wkit";import"../form/input.js";let s=null,p=null;const a="\u63D0\u793A",u=["\u53D6\u6D88","\u786E\u5B9A"],h=["alert","confirm","prompt"],k=h.concat(["toast"]);class w extends x{static animation={};static props={type:{type:String,default:null,observer(t){this.#t=!k.includes(t)}},left:{type:String,attribute:!1},right:{type:String,attribute:!1},top:{type:String,attribute:!1},bottom:{type:String,attribute:!1},background:{type:String,attribute:!1},maskColor:{type:String,attribute:!1},mask:!1,maskClose:!1,title:{type:String,default:"",attribute:!1},content:{type:String,default:"",attribute:!1},btns:[]};static styles=[c`:host{display:none;justify-content:center;align-items:center;position:fixed;z-index:65534;left:0;top:0;width:100%;height:0}:host([type]){display:flex}:host([type=toast]) .layer,:host([type=common]) .layer{position:absolute}.noselect{-webkit-touch-callout:none;user-select:none}.noselect img,.noselect a{-webkit-user-drag:none}`,c`.layer{flex:0 auto;position:relative;z-index:65535;border-radius:3px;color:#666;font-size:14px;background:rgba(255,255,255,.8);box-shadow:0 5px 20px rgba(0,0,0,.3);transition:opacity .2s ease-in-out,left .2s ease-in-out,right .2s ease-in-out,top .2s ease-in-out,bottom .2s ease-in-out}.layer:active{z-index:65536}`,c`.layer__title{display:flex;justify-content:space-between;align-items:center;width:100%;height:60px;padding:15px;font-size:16px;color:var(--color-dark-2)}.layer__title wc-icon{--wc-icon-size: 14px}.layer__title wc-icon:hover{color:var(--color-red-1)}.layer__content{display:flex;position:relative;width:100%;height:auto;min-height:50px;word-break:break-all;word-wrap:break-word}::slotted(.layer__content__input){flex:1}::slotted(.layer__content__toast){flex-shrink:0;flex:1;display:flex;align-items:center;width:300px;min-height:40px;margin-bottom:15px !important;padding:0 10px !important;border-radius:3px;font-weight:normal;text-indent:8px;--wc-icon-size: 16px;color:var(--color-dark-1);box-shadow:0 2px 12px rgba(0,0,0,.1)}::slotted(.layer__content__toast+.layer__content__toast){margin-top:30px}::slotted(.layer__content__toast.style-info){border:1px solid #ebeef5;background:#edf2fc;color:var(--color-grey-3)}::slotted(.layer__content__toast.style-success){border:1px solid #e1f3d8;background:#f0f9eb;color:var(--color-green-3)}::slotted(.layer__content__toast.style-warning){border:1px solid #faebb4;background:#faecd8;color:var(--color-red-1)}::slotted(.layer__content__toast.style-error){border:1px solid #f5c4c4;background:#fde2e2;color:var(--color-red-1)}.layer__ctrl{display:flex;justify-content:flex-end;width:100%;height:60px;padding:15px;line-height:30px;font-size:14px;color:#454545;text-align:right}.layer__ctrl button{min-width:64px;height:30px;padding:0 10px;margin:0 5px;border:1px solid var(--color-plain-3);border-radius:3px;white-space:nowrap;background:#fff;font-size:inherit;font-family:inherit;outline:none;color:inherit}.layer__ctrl button:hover{background:var(--color-plain-1)}.layer__ctrl button:active{border-color:var(--color-grey-1)}.layer__ctrl button:focus{box-shadow:0 0 0 2px var(--color-plain-a)}.layer__ctrl button:last-child{color:#fff;background:var(--color-teal-2);border-color:rgba(0,0,0,0)}.layer__ctrl button:last-child:hover{background:var(--color-teal-1)}.layer__ctrl button:last-child:active{background:var(--color-teal-3)}.layer__ctrl button:last-child:focus{box-shadow:0 0 0 2px var(--color-teal-a)}.layer__ctrl button::-moz-focus-inner{border:none}`,c`:host([mask]){height:100%;background:rgba(0,0,0,.2)}:host([type=alert]) .layer,:host([type=confirm]) .layer,:host([type=prompt]) .layer{max-width:600px;min-width:300px;background:#fff}:host([type=alert]) .layer__content,:host([type=confirm]) .layer__content,:host([type=prompt]) .layer__content{padding:0 15px}:host([type=toast]) .layer{box-shadow:none;background:none}:host([type=toast]) .layer__content{flex-direction:column;min-height:40px}:host([blurry]) .layer{backdrop-filter:blur(5px)}`];#t=!0;#o=null;#i=null;constructor(){super(),this.promise=new Promise((t,e)=>{this.#o=t,this.#i=e}),this.promise.host=this}#e(t){this.intercept?this.intercept(t,e=>{delete this.intercept,this.#o(t),this.$animate(!0),this.$refs.box.$animate(!0).then(o=>this.close())}):(this.#o(t),this.$animate(!0),this.$refs.box.$animate(!0).then(e=>this.close()))}#r(){switch(this.type){case"toast":let t=this.lastElementChild;t._anim=t.animate([{marginTop:"-30px",opacity:0},{marginTop:"0",opacity:1}],{duration:200,fill:"forwards"}),setTimeout(()=>{t._anim.reverse(),t._anim.onfinish=e=>{t.remove(),this.children.length===0&&(this.close(),p=null)}},3e3);break;default:this.$animate(),this.$refs.box.$animate();break}}mounted(){this.type==="prompt"?(this.$refs.input=this.firstElementChild,g(this.$refs.input,"submit",t=>{this.#e(t.target.value)})):this.type==="toast"&&(this.style.display=""),this.mask&&(this.$on("click",t=>{if(t.composedPath()[0]===t.currentTarget){if(h.includes(this.type))return;this.maskClose&&(this.#t===!1&&this.#i(),this.$refs.box.$animate(!0).then(o=>this.close()))}}),this.maskColor&&(this.style.backgroundColor=this.maskColor)),this.background&&(this.$refs.box.style.backgroundColor=this.background),this.#r()}updated(t,e){e&&this.#r()}moveTo(t={}){var e="";for(var o in t)e+=`${o}:${t[o]};`;this.$refs.box.style.cssText+=e}show(){this.#t&&(this.type="common")}close(){this.#t?(this.type=null,this.$emit("close")):(h.includes(this.type)&&(s=null),this.$emit("close"),this.remove())}handleBtnClick(t){if(t.target.tagName==="BUTTON"){let e=+t.target.dataset.idx||0;switch(this.type){case"alert":this.#e(null);break;case"confirm":case"prompt":if(e===0)this.#i(),this.$animate(!0),this.$refs.box.$animate(!0).then(o=>this.close());else{let o=this.type==="prompt"?this.$refs.input.value:null;this.#e(o)}break;default:this.#e(e);break}}}render(){let{type:t,mask:e,left:o,right:n,top:r,bottom:m}=this,f="";return t==="common"&&e===!1&&(r=r||0),f=d({left:o,right:n,top:r,bottom:m}),y` +import{css as c,html as y,Component as x,bind as g,styleMap as d}from"wkit";import"../form/input.js";let s=null,p=null;const a="\u63D0\u793A",u=["\u53D6\u6D88","\u786E\u5B9A"],h=["alert","confirm","prompt"],k=h.concat(["toast"]);class w extends x{static animation={};static props={type:{type:String,default:null,observer(t){this.#t=!k.includes(t)}},left:{type:String,attribute:!1},right:{type:String,attribute:!1},top:{type:String,attribute:!1},bottom:{type:String,attribute:!1},background:{type:String,attribute:!1},maskColor:{type:String,attribute:!1},mask:!1,maskClose:!1,title:{type:String,default:"",attribute:!1},content:{type:String,default:"",attribute:!1},btns:[]};static styles=[c`:host{display:none;justify-content:center;align-items:center;position:fixed;z-index:65534;left:0;top:0;width:100%;height:0}:host([type]){display:flex}:host([type=toast]) .layer,:host([type=common]) .layer{position:absolute}.noselect{-webkit-touch-callout:none;user-select:none}.noselect img,.noselect a{-webkit-user-drag:none}`,c`.layer{flex:0 auto;position:relative;z-index:65535;border-radius:3px;color:#666;font-size:14px;background:rgba(255,255,255,.8);box-shadow:0 5px 20px rgba(0,0,0,.3);transition:opacity .2s ease-in-out,left .2s ease-in-out,right .2s ease-in-out,top .2s ease-in-out,bottom .2s ease-in-out}.layer:active{z-index:65536}`,c`.layer__title{display:flex;justify-content:space-between;align-items:center;width:100%;height:60px;padding:15px;font-size:16px;color:var(--color-dark-2)}.layer__title wc-icon{--wc-icon-size: 14px}.layer__title wc-icon:hover{color:var(--color-red-1)}.layer__content{display:flex;position:relative;width:100%;height:auto;min-height:50px;word-break:break-all;word-wrap:break-word}::slotted(.layer__content__input){flex:1}::slotted(.layer__content__toast){flex-shrink:0;flex:1;display:flex;align-items:center;width:300px;min-height:40px;margin-bottom:15px !important;padding:0 10px !important;border-radius:3px;font-weight:normal;text-indent:8px;--wc-icon-size: 16px;color:var(--color-dark-1);box-shadow:0 2px 12px rgba(0,0,0,.1)}::slotted(.layer__content__toast+.layer__content__toast){margin-top:30px}::slotted(.layer__content__toast.style-info){border:1px solid #ebeef5;background:#edf2fc;color:var(--color-grey-3)}::slotted(.layer__content__toast.style-success){border:1px solid #e1f3d8;background:#f0f9eb;color:var(--color-green-3)}::slotted(.layer__content__toast.style-warning){border:1px solid #faebb4;background:#faecd8;color:var(--color-red-1)}::slotted(.layer__content__toast.style-error){border:1px solid #f5c4c4;background:#fde2e2;color:var(--color-red-1)}.layer__ctrl{display:flex;justify-content:flex-end;width:100%;height:60px;padding:15px;line-height:30px;font-size:14px;color:#454545;text-align:right}.layer__ctrl button{min-width:64px;height:30px;padding:0 10px;margin:0 5px;border:1px solid var(--color-plain-3);border-radius:3px;white-space:nowrap;background:#fff;font-size:inherit;font-family:inherit;outline:none;color:inherit}.layer__ctrl button:hover{background:var(--color-plain-1)}.layer__ctrl button:active{border-color:var(--color-grey-1)}.layer__ctrl button:focus{box-shadow:0 0 0 2px var(--color-plain-a)}.layer__ctrl button:last-child{color:#fff;background:var(--color-teal-2);border-color:rgba(0,0,0,0)}.layer__ctrl button:last-child:hover{background:var(--color-teal-1)}.layer__ctrl button:last-child:active{background:var(--color-teal-3)}.layer__ctrl button:last-child:focus{box-shadow:0 0 0 2px var(--color-teal-a)}.layer__ctrl button::-moz-focus-inner{border:none}`,c`:host([mask]){height:100%;background:rgba(0,0,0,.2)}:host([type=alert]) .layer,:host([type=confirm]) .layer,:host([type=prompt]) .layer{max-width:600px;min-width:300px;background:#fff}:host([type=alert]) .layer__content,:host([type=confirm]) .layer__content,:host([type=prompt]) .layer__content{padding:0 15px}:host([type=toast]) .layer{box-shadow:none;background:none}:host([type=toast]) .layer__content{flex-direction:column;min-height:40px}:host([blurry]) .layer{backdrop-filter:blur(5px)}`];#t=!0;#o=null;#i=null;constructor(){super(),this.promise=new Promise((t,e)=>{this.#o=t,this.#i=e}),this.promise.host=this}#e(t){this.intercept?this.intercept(t,e=>{delete this.intercept,this.#o(t),this.$animate(!0),this.$refs.box.$animate(!0).then(o=>this.close())}):(this.#o(t),this.$animate(!0),this.$refs.box.$animate(!0).then(e=>this.close()))}#r(){switch(this.type){case"toast":let t=this.lastElementChild;t._anim=t.animate([{marginTop:"-30px",opacity:0},{marginTop:"0",opacity:1}],{duration:200,fill:"forwards"}),setTimeout(()=>{t._anim.reverse(),t._anim.onfinish=e=>{t.remove(),this.children.length===0&&(this.close(),p=null)}},3e3);break;default:this.$animate(),this.$refs.box.$animate();break}}mounted(){this.type==="prompt"?(this.$refs.input=this.firstElementChild,g(this.$refs.input,"submit",t=>{this.#e(t.target.value)})):this.type==="toast"&&(this.style.display=""),this.mask&&(this.$on("click",t=>{if(t.composedPath()[0]===t.currentTarget){if(h.includes(this.type))return;this.maskClose&&(this.#t===!1&&this.#i(),this.$refs.box.$animate(!0).then(o=>this.close()))}}),this.maskColor&&(this.style.backgroundColor=this.maskColor)),this.background&&(this.$refs.box.style.backgroundColor=this.background),this.#r()}updated(t,e){e&&this.#r()}moveTo(t={}){var e="";for(var o in t)e+=`${o}:${t[o]};`;this.$refs.box.style.cssText+=e}show(){this.#t&&(this.type="common",this.#r())}close(){this.#t?(this.type=null,this.$emit("close")):(h.includes(this.type)&&(s=null),this.$emit("close"),this.remove())}handleBtnClick(t){if(t.target.tagName==="BUTTON"){let e=+t.target.dataset.idx||0;switch(this.type){case"alert":this.#e(null);break;case"confirm":case"prompt":if(e===0)this.#i(),this.$animate(!0),this.$refs.box.$animate(!0).then(o=>this.close());else{let o=this.type==="prompt"?this.$refs.input.value:null;this.#e(o)}break;default:this.#e(e);break}}}render(){let{type:t,mask:e,left:o,right:n,top:r,bottom:m}=this,f="";return t==="common"&&e===!1&&(r=r||0),f=d({left:o,right:n,top:r,bottom:m}),y`
`,curr:a=>n`${a}`,info:(a,e)=>n`共 ${a}条, ${e}页`,jump(a){return n`
+ >`,curr:a=>n`${a}`,info:(a,t)=>n`共 ${a}条, ${t}页`,jump(a){return n`
Go to -
`}};function u(a,e){let i=[],o=0,s=a<3?6-a:2;if(e<2)return i.push({to:a,txt:a}),i;if(a-s>1&&e>5){let t=a-2*s;t=t<1?1:t,i.push({to:t,txt:"..."})}e-a0&&i.push({to:t,txt:t});if(a+se?e:t,i.push({to:t,txt:"..."})}return i}class h extends p{static props={layout:"str!home, prev, pages, next, end",total:{type:Number,default:0,attribute:!1,observer(e){this.totalpage=Math.ceil(e/this.pagesize)}},totalpage:{type:Number,default:1,attribute:!1,observer(e){this.page>e&&(this.page=e)}},page:{type:Number,default:1,attribute:!1,observer(e){e>this.totalpage?this.page=this.totalpage:e<1&&(this.page=1)}},pagesize:{type:Number,default:20,attribute:!1,observer(e){this.total>0&&(this.totalpage=Math.ceil(this.total/e))}}};static styles=[c`:host{display:block;line-height:1;font-size:14px;user-select:none;-moz-user-select:none;color:var(--color-dark-1)}:host .layout{display:flex;justify-content:center;align-items:center;margin:10px auto;--wc-button-icon-size: 10px;--wc-button-border-color: none;--wc-button-background: var(--color-plain-1);--wc-button-color-hover: var(--color-teal-1)}:host .item{min-width:32px;width:auto;margin:0 5px;border-radius:3px}:host .item.curr{display:inline-flex;align-items:center;justify-content:center;height:32px;background:var(--color-teal-1);color:#fff}:host .item.jump{display:flex;align-items:center}:host input{width:48px;height:24px;padding:0 4px;margin-left:4px;border:1px solid var(--color-grey-2);border-radius:3px;text-align:center;outline:none;transition:box-shadow .15s linear}:host input:focus{box-shadow:0 0 0 2px var(--color-plain-a)}`,c``];#t(e){let i=e.target;if(i.tagName==="WC-BUTTON"){let{page:o,totalpage:s}=this,t=i.dataset.act;if(i.disabled)return;switch(t){case"prev":t=o-1;break;case"next":console.log(t,o),t=o+1;break;case"end":t=s;break}if(+t===o)return;this.page=t,this.$refs.input&&(this.$refs.input.value=t),this.$emit("page-change",{data:t})}}__gotoPage(e){if(e.keyCode===13){let i=+e.target.value;i===i&&(this.page=i,this.$emit("page-change",{data:i})),e.target.value=this.page}}render(){let e=this.layout.split(",").map(t=>t.trim()),{page:i,total:o,totalpage:s}=this;return n` +
`}};function u(a,t){let i=[],o=0,s=a<3?6-a:2;if(t<2)return i.push({to:a,txt:a}),i;if(a-s>1&&t>5){let e=a-2*s;e=e<1?1:e,i.push({to:e,txt:"..."})}t-a0&&i.push({to:e,txt:e});if(a+st?t:e,i.push({to:e,txt:"..."})}return i}class h extends p{static props={layout:"str!home, prev, pages, next, end",total:{type:Number,default:0,attribute:!1,observer(t){this.totalpage=Math.ceil(t/this.pagesize)||1}},totalpage:{type:Number,default:1,attribute:!1,observer(t){t<1&&(t=1),this.page>t&&(this.page=t)}},page:{type:Number,default:1,attribute:!1,observer(t){t>this.totalpage?this.page=this.totalpage:t<1&&(this.page=1)}},pagesize:{type:Number,default:20,attribute:!1,observer(t){this.total>0&&(this.totalpage=Math.ceil(this.total/t))}}};static styles=[c`:host{display:block;line-height:1;font-size:14px;user-select:none;-moz-user-select:none;color:var(--color-dark-1)}:host .layout{display:flex;justify-content:center;align-items:center;margin:10px auto;--wc-button-icon-size: 10px;--wc-button-border-color: none;--wc-button-background: var(--color-plain-1);--wc-button-color-hover: var(--color-teal-1)}:host .item{min-width:32px;width:auto;margin:0 5px;border-radius:3px}:host .item.curr{display:inline-flex;align-items:center;justify-content:center;height:32px;background:var(--color-teal-1);color:#fff}:host .item.jump{display:flex;align-items:center}:host input{width:48px;height:24px;padding:0 4px;margin-left:4px;border:1px solid var(--color-grey-2);border-radius:3px;text-align:center;outline:none;transition:box-shadow .15s linear}:host input:focus{box-shadow:0 0 0 2px var(--color-plain-a)}`,c``];#t(t){let i=t.target;if(i.tagName==="WC-BUTTON"){let{page:o,totalpage:s}=this,e=i.dataset.act;if(i.disabled)return;switch(e){case"prev":e=o-1;break;case"next":console.log(e,o),e=o+1;break;case"end":e=s;break}if(+e===o)return;this.page=e,this.$refs.input&&(this.$refs.input.value=e),this.$emit("page-change",{data:e})}}__gotoPage(t){if(t.keyCode===13){let i=+t.target.value;i===i&&(this.page=i,this.$emit("page-change",{data:i})),t.target.value=this.page}}render(){let t=this.layout.split(",").map(e=>e.trim()),{page:i,total:o,totalpage:s}=this;return n`
- ${e.map(t=>{switch(t){case"pages":return u(i,s).map(l=>i===l.to?r.curr(i):n`{switch(e){case"pages":return u(i,s).map(l=>i===l.to?r.curr(i):n`${l.txt}`);case"home":return r.home(i===1);case"prev":return r.prev(i===1);case"next":return r.next(i>=s);case"end":return r.end(i>=s);case"curr":return r.curr(i);case"info":return r.info(o,s);case"jump":return r.jump.call(this,i);default:return""}})}
diff --git a/dist/store.js b/dist/store.js index 1594f54..f1778d7 100644 --- a/dist/store.js +++ b/dist/store.js @@ -8,5 +8,6 @@ export default createStore({ 2: '✅正常', 9: '🙅🏻拒绝收录' }, - result: null // 搜索结果 + searchInput: '', + result: { version: '', versions: [], id: '' } // 搜索结果 }) diff --git a/dist/views/about.js b/dist/views/about.js index e69de29..d817cd9 100644 --- a/dist/views/about.js +++ b/dist/views/about.js @@ -0,0 +1,94 @@ +import { html, css, Component } from 'wkit' + +class About extends Component { + static styles = css` + ::selection { + background: var(--color-plain-a); + } + .about-page { + width: 1024px; + margin: 0 auto; + padding: 16px; + + & dl { + font-size: 16px; + + & dt { + margin-top: 32px; + font-size: 22px; + font-weight: bold; + color: var(--color-grey-3); + } + & dd { + margin-top: 16px; + } + } + + & p { + margin-top: 8px; + } + + & a { + color: var(--color-red-1); + text-decoration: underline; + } + } + ` + mounted() { + this.$store.searchShow = false + } + + render() { + return html` +
+
+
一、背景和目标
+
+

国内免费的几个js cdn加速站, 要么收录太少, 要么已经不维护。

+

+ 我们的目标是提供这样一个仓库，让它尽可能全面收录优秀的支持ESM访问的开源库，并免费为之提供 + CDN加速服务，使之有更好的访问速度和稳定的环境。 +

+

同时我们也提供自主提交开源库的收录(前提是在npm上发布的)

+
+ +
二、更新开源库
+
+

+ 理论上, 程序会自动更新开源库, 目前更新周期为1个星期, + 如果你有需要使用新版而我们还未更新, 可以来手动同步。 +

+

+ 原则上我们不会删除旧版本(如发现该开源库包含无用的大文件如图片, + 音视频及其他附件时, 则会清除所有的旧版本, 只保留最新的一份, + 严重时直接下架该库)。 +

+
+ +
三、收录事项
+
+

+ 开源库未发布到npm上时, + 我们原则上不会收录(如有特殊且合理原因未提交到npm又想收录的, + 可在意见反馈处提交相关信息)。 +

+

原则上我们只收录支持esm方式访问的开源库。

+
+ +
四、维护者
+
+

yutent

+

+ 建议和反馈 +

+

项目托管于阿里云oss。

+
+
+
+ ` + } +} + +About.reg('about') diff --git a/dist/views/about.vue b/dist/views/about.vue deleted file mode 100644 index 013971b..0000000 --- a/dist/views/about.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - - - diff --git a/dist/views/home.js b/dist/views/home.js index e69de29..9229cec 100644 --- a/dist/views/home.js +++ b/dist/views/home.js @@ -0,0 +1,191 @@ +import { html, css, Component } from 'wkit' + +class Home extends Component { + static styles = css` + .home { + display: flex; + flex-direction: column; + align-items: center; + padding: 16px 0 32px; + user-select: none; + + .card { + width: 1024px; + margin-top: 24px; + border: 1px solid var(--color-plain-2); + + .title { + display: flex; + align-items: center; + padding: 12px 16px; + font-size: 22px; + background: var(--color-plain-1); + } + + .select { + position: relative; + display: inline-flex; + margin: 0 15px; + border: 1px solid var(--color-grey-2); + border-radius: 4px; + + & select { + appearance: none; + width: 113px; + height: 24px; + padding: 0 6px; + border: 0; + border-radius: inherit; + font: inherit; + font-size: 12px; + background: #fff; + color: inherit; + outline: none; + } + + .trigon { + position: absolute; + right: 8px; + top: 8px; + width: 6px; + height: 6px; + border: 1px solid var(--color-grey-2); + border-top: 0; + border-right: 0; + content: ''; + transform: rotate(-45deg); + } + + & option { + appearance: none; + border: 0; + } + } + + .list { + padding: 16px 8px; + font-size: 14px; + } + + .link { + display: block; + padding: 2px 6px; + border-radius: 4px; + transition: background 0.1s ease; + + & b { + color: var(--color-teal-1); + } + & i { + color: var(--color-blue-1); + } + + &:hover { + background: var(--color-plain-1); + } + &:active { + background: var(--color-plain-a); + } + } + } + } + ` + + #libs = [ + { + name: 'wkit', + version: '1.10.11', + files: ['index.es6.js', 'index.js'] + }, + { + name: 'wkitd', + version: '1.3.0', + files: ['index.es6.js', 'index.js'] + } + ] + + #copy(ev) { + let elem = ev.target + if (elem.tagName === 'CODE' || elem.parentNode.tagName === 'CODE') { + if (elem.parentNode.tagName === 'CODE') { + elem = elem.parentNode + } + navigator.clipboard.writeText(elem.textContent.trim()) + layer.toast('复制成功', 'success') + } + } + + #versionChanged(ev) { + this.$store.result.version = ev.target.value + } + + mounted() { + let route = this.$route + this.$store.searchShow = true + if (route.query.name) { + this.$store.searchInput = route.query.name + } + } + + render() { + let { result, searchInput } = this.$store + let { version, versions } = result + let list = result[version] + + return html` +
+ ${searchInput + ? html` +
+
+ ${result.id || searchInput} - +
+ + +
+
+
+ ${list + ? list.map( + f => html` + + //jscdn.ink/${result.id}/${version}/${f} + + ` + ) + : '没有你要找的库'} +
+
+ ` + : this.#libs.map( + it => html` +
+
${it.name} - v${it.version}
+
+ ${it.files.map( + f => html` + + //jscdn.ink/${it.name}/${it.version}/${f} + + ` + )} +
+
+ ` + )} +
+ ` + } +} + +Home.reg('home') diff --git a/dist/views/home.vue b/dist/views/home.vue deleted file mode 100644 index f767c54..0000000 --- a/dist/views/home.vue +++ /dev/null @@ -1,151 +0,0 @@ - - - - - diff --git a/dist/views/login.js b/dist/views/login.js index e69de29..539abf5 100644 --- a/dist/views/login.js +++ b/dist/views/login.js @@ -0,0 +1,178 @@ +import { html, css, Component } from 'wkit' +import fetch from '/lib/fetch.js' + +class Login extends Component { + static styles = css` + .login-page { + display: flex; + justify-content: center; + width: 1024px; + margin: 0 auto; + padding: 16px; + user-select: none; + + .login-form, + .user-card { + display: flex; + flex-direction: column; + width: 320px; + min-height: 160px; + padding: 32px; + margin-top: 32px; + box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); + } + + .login-form { + .title { + margin-bottom: 32px; + line-height: 2; + border-bottom: 1px solid var(--color-plain-2); + font-size: 20px; + text-align: center; + color: var(--color-grey-3); + } + + .third-part { + display: flex; + } + + & a { + display: inline-flex; + width: 32px; + height: 32px; + margin: 0 16px; + } + } + + .user-card { + align-items: center; + + .avatar { + width: 96px; + height: 96px; + border: 3px solid var(--color-plain-1); + border-radius: 50%; + box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); + } + + .name { + line-height: 2; + } + .homepage { + display: flex; + align-items: center; + --wc-icon-size: 14px; + font-style: normal; + + & a { + margin-left: 6px; + text-decoration: underline; + color: var(--color-blue-1); + } + } + + .logout { + margin-top: 32px; + } + } + } + ` + + #jumpLogin(site = 'github') { + switch (site) { + case 'github': + location.replace( + 'https://github.com/login/oauth/authorize?' + + `client_id=57d9d247bda6302fd9d1&redirect_uri=https://www.jscdn.ink/login` + ) + break + } + } + + #logout() { + this.$store.user = {} + localStorage.removeItem('user') + localStorage.removeItem('token') + } + + mounted() { + let route = this.$route + this.$store.searchShow = false + + if (route.query.code) { + fetch('/login/github', { + method: 'post', + body: { + code: route.query.code + } + }) + .then(r => { + let lastPath = localStorage.getItem('login_callback_path') + layer.toast('登录成功', 'success') + this.$store.user = r.data.user + localStorage.setItem('user', JSON.stringify(r.data.user)) + localStorage.setItem('token', r.data.token) + if (lastPath) { + localStorage.removeItem('login_callback_path') + this.$router.replace(lastPath) + } else { + this.$router.replace('/login') + } + }) + .catch(r => { + console.log(r) + layer.toast(r.msg, 'error') + }) + } + } + + render() { + return html` +
+ ${this.$store.user.id + ? html` +
+ +

${this.$store.user.name}

+ + 主页: + ${this.$store.user.homepage} + + 注销登录 +
+ ` + : html` + + `} +
+ ` + } +} + +Login.reg('login') diff --git a/dist/views/login.vue b/dist/views/login.vue deleted file mode 100644 index 446600d..0000000 --- a/dist/views/login.vue +++ /dev/null @@ -1,169 +0,0 @@ - - - - - diff --git a/dist/views/request.js b/dist/views/request.js index e13be6a..56a1be5 100644 --- a/dist/views/request.js +++ b/dist/views/request.js @@ -1,8 +1,22 @@ import { html, css, Component } from 'wkit' +import '//jscdn.ink/@bytedo/wcui/1.0.12/table/index.js' +import fetch from '/lib/fetch.js' + class Request extends Component { + static props = { + list: [], + page: 'num!1', + total: 'num!0', + loading: false, + disabled: true + } + static styles = [ css` + ::selection { + background: var(--color-plain-a); + } .packages { display: flex; flex-direction: column; @@ -20,19 +34,17 @@ class Request extends Component { align-items: center; margin: 16px 0; - wc-input { + & wc-input { width: 480px; } - wc-link { - height: 20px; - } } .pager { margin-top: 16px; } } - + `, + css` .request-form { width: 640px; background: #fff; @@ -47,6 +59,7 @@ class Request extends Component { } .content { + display: block; padding: 16px 16px 32px; .field { @@ -62,7 +75,7 @@ class Request extends Component { .label { width: 120px; } - wc-input, + & wc-input, .value { flex: 1; } @@ -72,104 +85,319 @@ class Request extends Component { ` ] + #thead = JSON.stringify([ + '开源库', + '作者', + '最后同步版本', + '最后同步日期', + '收录状态', + '备注', + '操作' + ]) + + #filter = '' + + #list = [] + #onlyShowWaited = false + + #lib = { + name: '', + author: '-', + description: '-', + latest: '-' + } + + #fetchList() { + fetch('/package/list').then(r => { + this.#list = r.data.map( + it => ((it.sync_date = new Date(it.sync_date).format('Y/m/d')), it) + ) + this.#fetchPage() + }) + } + + #fetchPage() { + let start = (this.page - 1) * 20 + let end = start + 20 + let filter = this.#filter + let waited = this.#onlyShowWaited + + this.list = this.#list + .filter(it => it.id.includes(filter) && (waited ? it.stat === 1 : true)) + .slice(start, end) + this.total = this.list.length + } + + #pageChanged(ev) { + this.page = ev.data + this.#fetchPage() + } + + #search(ev) { + let filter = ev.type === 'submit' ? ev.target.value.trim() : this.#filter + let waited = ev.type === 'change' ? ev.value : this.#onlyShowWaited + + this.#filter = filter + this.#onlyShowWaited = waited + + this.list = this.#list.filter( + it => it.id.includes(filter) && (waited ? it.stat === 1 : true) + ) + this.total = this.list.length + } + + #openDialog() { + if (this.$store.user.id) { + this.$refs.form.show() + } else { + layer.confirm('你还没有登录, 请先登录之后, 再申请').then(_ => { + localStorage.setItem('login_callback_path', this.$route.path) + this.$router.push('/login') + }) + } + } + + #resetForm(force) { + force && (this.#lib.name = '') + this.#lib.author = '-' + this.#lib.description = '-' + this.#lib.latest = '-' + this.disabled = true + } + + #autoUpdateInfo(ev) { + let name = ev.target.value.trim() + this.#lib.name = name + + clearTimeout(this.$timer) + if (name) { + if (name.startsWith('@') && name.indexOf('/') === -1) { + return + } + + this.$timer = setTimeout(async _ => { + await this.#getPackageInfo(name) + this.$requestUpdate() + }, 800) + } else { + this.#resetForm() + } + } + + #getPackageInfo(name) { + return fetch('https://registry.npmmirror.com/' + name) + .then(r => { + let author = r.author + ? r.author.name + : r.maintainers + ? r.maintainers[0].name + : 'unknow' + + this.#lib.author = author + this.#lib.description = r.description || r.homepage + this.#lib.latest = r['dist-tags'].latest + + this.disabled = false + return { + author, + description: this.#lib.description, + latest: this.#lib.latest + } + }) + .catch(_ => { + this.#resetForm() + layer.toast( + `开源库【${name}】在npm上找不到, 请确认名称是否正确`, + 'error' + ) + }) + } + + #uploadPackge(body) { + fetch('/package/upload', { method: 'post', body }) + .then(r => { + layer.toast('提交成功,等待审核', 'success') + this.#resetForm(true) + this.#fetchList() + this.$refs.form.close() + }) + .catch(e => { + layer.toast(e.msg, 'error') + }) + } + + #submit() { + let name = this.#lib.name.trim() + if (name) { + if (name.startsWith('@') && name.indexOf('/') === -1) { + return + } + this.loading = true + this.#getPackageInfo(name) + .then(({ author, description, latest }) => { + // + this.#uploadPackge({ name, author, description, latest }) + }) + + .finally(_ => (this.loading = false)) + } else { + layer.toast(`请填写正确的名称`, 'warning') + } + } + + #handlePackgae(act, id) { + if (act !== 'sync' && !this.$store.user.admin) { + return layer.alert('别闹, 老实等管理员通过~~') + } + let req + if (act === 'reject' || act === 'delete') { + req = layer.prompt('请输入理由').then(remark => { + return fetch(`/package/${act}/${encodeURIComponent(id)}`, { + method: 'PUT', + body: { remark } + }) + }) + } else if (act === 'accept') { + req = layer.prompt('请输入文件目录', 'dist').then(dist => { + return fetch(`/package/${act}/${encodeURIComponent(id)}`, { + method: 'PUT', + body: { dist } + }) + }) + } else { + req = fetch(`/package/${act}/${encodeURIComponent(id)}`, { + method: 'PUT' + }) + } + this.loading = true + req + .then(r => { + layer.toast('操作成功', 'success') + this.#fetchList() + }) + .catch(r => { + r && layer.toast(r.msg, 'error') + }) + .finally(_ => (this.loading = false)) + } + + mounted() { + this.$store.searchShow = false + this.#fetchList() + } + render() { return html`
+ @submit=${this.#search} + > - 只显示待审核 - + 没找到你想的库?点击申请收录
- - - - {{ it.id }} - - {{ it.author }} - {{ it.latest || '-' }} - {{ it.latest ? it.sync_date : '-' }} - {{ $store.stats[it.stat] }} - {{ it.remark || '-' }} - - 更新 - 通过 - 拒绝 - 删除 - - + + ${this.list.map( + it => html` + + + + ${it.id} + + + ${it.author} + ${it.latest || '-'} + ${it.latest ? it.sync_date : '-'} + ${this.$store.stats[it.stat]} + ${it.remark || '-'} + + ${it.stat === 2 + ? html` this.#handlePackgae('sync', it.id)} + type="info" + >更新` + : ''} + ${this.$store.user.admin && it.stat !== 2 + ? html` this.#handlePackgae('accept', it.id)} + type="info" + >通过` + : ''} + ${this.$store.user.admin && it.stat !== 0 + ? html` this.#handlePackgae('reject', it.id)} + type="warning" + >拒绝` + : ''} + ${this.$store.user.admin && it.stat !== 0 + ? html` this.#handlePackgae('delete', it.id)} + type="danger" + >删除` + : ''} + + + ` + )}
申请收录开源库
- +
开源库名称: - +
作者: - {{ lib.author }} + ${this.#lib.author}
简介: - {{ lib.description }} + ${this.#lib.description}
最新版本: - {{ lib.latest }} + ${this.#lib.latest}
提交申请
- +
` @@ -177,214 +405,3 @@ class Request extends Component { } Request.reg('request') - -import '//jscdn.ink/@bytedo/wcui/1.0.12/table/index.js' -import fetch from '/lib/fetch.js' - -export default { - data() { - return { - content: '这是关于我们页面', - list: [], - thead: JSON.stringify([ - '开源库', - '作者', - '最后同步版本', - '最后同步日期', - '收录状态', - '备注', - '操作' - ]), - page: 1, - total: 0, - filter: '', - onlyShowWaited: false, - loading: false, - disabled: true, - lib: { - name: '', - author: '-', - description: '-', - latest: '-' - } - } - }, - mounted() { - this.$store.searchShow = false - - this.fetchList() - }, - methods: { - fetchList() { - fetch('/package/list').then(r => { - this.$list = r.data.map( - it => ((it.sync_date = new Date(it.sync_date).format('Y/m/d')), it) - ) - this.fetchPage() - this.total = this.$list.length - }) - }, - - fetchPage() { - let start = (this.page - 1) * 20 - let end = start + 20 - this.list = this.$list - .filter(it => (this.onlyShowWaited ? it.stat === 1 : true)) - .slice(start, end) - }, - - pageChanged(ev) { - this.page = ev.data - console.log('<><><>', this.page) - this.fetchPage() - }, - - search() { - let filter = this.filter.trim() - let onlyShowWaited = this.onlyShowWaited - - if (filter) { - this.list = this.$list.filter( - it => - it.id.indexOf(filter) > -1 && - (onlyShowWaited ? it.stat === 1 : true) - ) - } else { - this.list = this.$list.filter(it => - onlyShowWaited ? it.stat === 1 : true - ) - } - this.total = this.list.length - }, - - openDialog() { - if (this.$store.user.id) { - this.$refs.form.show() - } else { - layer.confirm('你还没有登录, 请先登录之后, 再申请').then(_ => { - localStorage.setItem('login_callback_path', this.$route.path) - this.$router.push('/login') - }) - } - }, - - resetForm(force) { - force && (this.lib.name = '') - this.lib.author = '-' - this.lib.description = '-' - this.lib.latest = '-' - this.disabled = true - }, - - autoUpdateInfo() { - let name = this.lib.name.trim() - clearTimeout(this.$timer) - if (name) { - if (name.startsWith('@') && name.indexOf('/') === -1) { - return - } - - this.$timer = setTimeout(_ => { - this.getPackageInfo(name) - }, 800) - } - }, - - getPackageInfo(name) { - return fetch('https://registry.npmmirror.com/' + name) - .then(r => { - let author = r.author - ? r.author.name - : r.maintainers - ? r.maintainers[0].name - : 'unknow' - - this.lib.author = author - this.lib.description = r.description || r.homepage - this.lib.latest = r['dist-tags'].latest - - this.disabled = false - return { - author, - description: this.lib.description, - latest: r['dist-tags'].latest - } - }) - .catch(_ => { - this.resetForm() - layer.toast( - `开源库【${name}】在npm上找不到, 请确认名称是否正确`, - 'error' - ) - }) - }, - - uploadPackge(body) { - fetch('/package/upload', { method: 'post', body }) - .then(r => { - layer.toast('提交成功,等待审核', 'success') - this.resetForm(true) - this.fetchList() - this.$refs.form.close() - }) - .catch(e => { - layer.toast(e.msg, 'error') - }) - }, - - submit() { - let name = this.lib.name.trim() - if (name) { - if (name.startsWith('@') && name.indexOf('/') === -1) { - return - } - this.loading = true - this.getPackageInfo(name) - .then(({ author, description, latest }) => { - // - this.uploadPackge({ name, author, description, latest }) - }) - - .finally(_ => (this.loading = false)) - } else { - layer.toast(`请填写正确的名称`, 'warning') - } - }, - - handlePackgae(act, id) { - if (act !== 'sync' && !this.$store.user.admin) { - return layer.alert('别闹, 老实等管理员通过~~') - } - let req - if (act === 'reject' || act === 'delete') { - req = layer.prompt('请输入理由').then(remark => { - return fetch(`/package/${act}/${encodeURIComponent(id)}`, { - method: 'PUT', - body: { remark } - }) - }) - } else if (act === 'accept') { - req = layer.prompt('请输入文件目录', 'dist').then(dist => { - return fetch(`/package/${act}/${encodeURIComponent(id)}`, { - method: 'PUT', - body: { dist } - }) - }) - } else { - req = fetch(`/package/${act}/${encodeURIComponent(id)}`, { - method: 'PUT' - }) - } - this.loading = true - req - .then(r => { - layer.toast('操作成功', 'success') - this.fetchList() - }) - .catch(r => { - r && layer.toast(r.msg, 'error') - }) - .finally(_ => (this.loading = false)) - } - } -} diff --git a/dist/views/request.vue b/dist/views/request.vue deleted file mode 100644 index d7bf383..0000000 --- a/dist/views/request.vue +++ /dev/null @@ -1,382 +0,0 @@ - - - - -