diff --git a/dist/app.js b/dist/app.js index c7a47ba..91d68de 100644 --- a/dist/app.js +++ b/dist/app.js @@ -1,4 +1,11 @@ -import { createApp, css, html } from 'wkitd' +/** + * {} + * @author yutent + * @date 2023/11/14 18:52:57 + */ + +import { createApp } from 'wkitd' +import { css, html } from 'wkit' import 'es.shim' // import '//jscdn.ink/@bd/ui/latest/form/input.js' @@ -15,6 +22,10 @@ import 'es.shim' import router from './router.js' import store from './store.js' +import fetch from '/lib/fetch.js' + +import './components/header.js' +import './components/footer.js' const app = createApp({ render() { @@ -23,6 +34,39 @@ const app = createApp({
` + }, + + styles: css` + :host { + display: flex; + flex-direction: column; + width: 100%; + min-height: 100vh; + } + .main-body { + flex: 1; + } + `, + + mounted() { + var user = localStorage.getItem('user') + var checked = sessionStorage.getItem('session_checked') + + if (user) { + if (checked) { + return (this.$store.user = JSON.parse(user)) + } + fetch('/login/check') + .then(r => { + localStorage.setItem('token', r.data.token) + sessionStorage.setItem('session_checked', 1) + this.$store.user = JSON.parse(user) + }) + .catch(r => { + localStorage.removeItem('token') + localStorage.removeItem('user') + }) + } } }) diff --git a/dist/app.vue b/dist/app.vue deleted file mode 100644 index 8927487..0000000 --- a/dist/app.vue +++ /dev/null @@ -1,70 +0,0 @@ - - - - - diff --git a/dist/assets/app.css b/dist/assets/app.css new file mode 100644 index 0000000..4db0a91 --- /dev/null +++ b/dist/assets/app.css @@ -0,0 +1,22 @@ +::-webkit-scrollbar { + width: 6px; + background: var(--color-plain-3); +} +::-webkit-scrollbar-thumb { + background: var(--color-dark-a); + + &:hover { + background: var(--color-dark-1); + } +} +body { + line-height: 1.5; + font-size: 14px; + color: var(--color-dark-1); +} +a { + color: inherit; + text-decoration: none; +} + + diff --git a/dist/components/footer.js b/dist/components/footer.js new file mode 100644 index 0000000..6242ba1 --- /dev/null +++ b/dist/components/footer.js @@ -0,0 +1,35 @@ +import { html, css, Component } from 'wkit' + +class Footer extends Component { + static styles = css` + .copyright { + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 128px; + background: var(--color-plain-1); + color: var(--color-grey-2); + + .link { + margin-left: 6px; + color: var(--color-blue-1); + text-decoration: underline; + } + } + ` + + render() { + return html` + + ` + } +} + +Footer.reg('footer') diff --git a/dist/components/footer.vue b/dist/components/footer.vue deleted file mode 100644 index 011cd00..0000000 --- a/dist/components/footer.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - - - diff --git a/dist/components/header.js b/dist/components/header.js new file mode 100644 index 0000000..b58c94d --- /dev/null +++ b/dist/components/header.js @@ -0,0 +1,172 @@ +import { html, css, Component, classMap } from 'wkit' + +import fetch from '/lib/fetch.js' + +class Header extends Component { + static props = { + input: '' + } + + static styles = css` + .common-header { + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + width: 100%; + height: 240px; + background: var(--color-red-1); + color: #fff; + + .wrapper { + display: flex; + width: 1024px; + justify-content: space-between; + align-items: center; + } + + .navibar { + height: 36px; + margin-top: 24px; + + .logo { + font-weight: bold; + font-size: 26px; + + & img { + display: block; + height: 36px; + } + } + + .navi { + display: flex; + align-items: center; + font-size: 16px; + + & router-link { + margin: 0 16px; + padding: 3px 6px; + border-radius: 4px; + transition: background 0.2s ease-in-out; + + &:hover { + background: rgba(255, 255, 255, 0.3); + } + + &.router-link-active { + text-decoration: underline; + } + } + } + } + + .banner { + width: 640px; + text-align: center; + } + + .search { + display: none; + width: 520px; + color: #fff; + --bg-color: rgba(0, 0, 0, 0.3); + } + + &.search-show { + height: 320px; + .search { + display: inline-block; + } + } + + &::after { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 48px; + font-size: 16px; + background: rgba(0, 0, 0, 0.1); + content: '免费、快速、开放的 CDN 服务'; + } + } + @media screen and (max-width: 1024px) { + .common-header { + .navibar { + width: 100%; + padding: 0 32px; + } + .wrapper { + width: 100%; + } + } + } + ` + + search() { + let id = this.input.trim() + 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] + } + } + this.$store.result = dict + }) + } else { + this.$store.result = null + } + } + + render() { + return html` +
+ + + + + +
+ ` + } +} + +Header.reg('header') diff --git a/dist/components/header.vue b/dist/components/header.vue deleted file mode 100644 index 0504cc1..0000000 --- a/dist/components/header.vue +++ /dev/null @@ -1,177 +0,0 @@ - - - - - diff --git a/dist/index.html b/dist/index.html index 74a2bc9..2033944 100644 --- a/dist/index.html +++ b/dist/index.html @@ -8,6 +8,7 @@ +