From e6d70956d7777ddcf298f8d2d302c15e1e8aba69 Mon Sep 17 00:00:00 2001 From: yutent Date: Wed, 20 Dec 2023 19:06:35 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E5=A4=A7=E6=B3=A2=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/app.js | 44 +++---- dist/assets/app.css | 1 + dist/assets/app.scss | 17 +++ dist/assets/img/cat.svg | 24 ++++ dist/assets/img/round.webp | Bin 0 -> 140 bytes dist/components/about.js | 48 ++++++-- dist/components/dock.js | 20 +++- dist/components/slider.js | 61 ++++++++++ dist/components/titlebar.js | 27 +++-- dist/lib/ui/css/reset-basic.css | 121 ++++++++++++++++--- dist/store.js | 11 +- dist/views/home.js | 192 ++++++++++++++++++++++++++++++ dist/views/login.js | 205 ++++++++++++++++++++++++++++++++ 13 files changed, 697 insertions(+), 74 deletions(-) create mode 100644 dist/assets/app.css create mode 100644 dist/assets/app.scss create mode 100644 dist/assets/img/cat.svg create mode 100644 dist/assets/img/round.webp create mode 100644 dist/components/slider.js diff --git a/dist/app.js b/dist/app.js index 017c617..8c6dd91 100644 --- a/dist/app.js +++ b/dist/app.js @@ -38,6 +38,7 @@ const app = createApp({ display: flex; flex-direction: column; width: 100vw; + min-width: 1024px; height: 100vh; background: radial-gradient(ellipse, var(--color-red-a), transparent), radial-gradient(ellipse at bottom, var(--color-teal-a), transparent), @@ -48,27 +49,16 @@ const app = createApp({ var(--color-blue-1) ); } - :host::before, + :host::after { - position: fixed; - bottom: -100px; display: block; - width: 1280px; - height: 480px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.1); + position: absolute; + bottom: 0; + width: 100%; + height: 75px; + background: url(/assets/img/cat.svg) no-repeat; content: ''; } - :host::before { - left: -256px; - transform: rotate(30deg); - } - :host::after { - right: -144px; - bottom: -160px; - width: 960px; - transform: rotate(-30deg); - } .main-body { flex: 1; } @@ -82,16 +72,16 @@ const app = createApp({ 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') - }) + // 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/assets/app.css b/dist/assets/app.css new file mode 100644 index 0000000..8ed9a59 --- /dev/null +++ b/dist/assets/app.css @@ -0,0 +1 @@ +::-webkit-scrollbar{width:0;height:0;background-color:rgba(0,0,0,0)}::-webkit-scrollbar-thumb{background-color:#c6c7ca;border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:#a1a1a1}::-webkit-scrollbar-track{background-color:rgba(0,0,0,0)} \ No newline at end of file diff --git a/dist/assets/app.scss b/dist/assets/app.scss new file mode 100644 index 0000000..69a4ef3 --- /dev/null +++ b/dist/assets/app.scss @@ -0,0 +1,17 @@ +::-webkit-scrollbar { + width: 0; + height: 0; + background-color: transparent; +} + +::-webkit-scrollbar-thumb { + background-color: #c6c7ca; + border-radius: 10px; + &:hover { + background-color: #a1a1a1; + } +} + +::-webkit-scrollbar-track { + background-color: transparent; +} diff --git a/dist/assets/img/cat.svg b/dist/assets/img/cat.svg new file mode 100644 index 0000000..7614fd3 --- /dev/null +++ b/dist/assets/img/cat.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/dist/assets/img/round.webp b/dist/assets/img/round.webp new file mode 100644 index 0000000000000000000000000000000000000000..d537b9c447ce5f89ad2516cb2bf746a1c74451d9 GIT binary patch literal 140 zcmWIYbaQKAU|#GI-s(B^h|I zk0GRF;RJtY7axWjGrU&J(ONlirsFPYMZO8vU*2)A-MZ#STjWKvAM8Lg6;wcGGBV6% k)Z$^_VPJBwP+h{nT)^<}qf7li{rUg93;zEX?EtC)0NuSTi2wiq literal 0 HcmV?d00001 diff --git a/dist/components/about.js b/dist/components/about.js index 91d62e1..3b467d1 100644 --- a/dist/components/about.js +++ b/dist/components/about.js @@ -5,23 +5,25 @@ */ import { html, css, Component } from 'wkit' +import { watch } from 'wkitd' import './titlebar.js' class About extends Component { + static animation = { type: 'scale' } + static styles = [ css` :host { display: flex; position: fixed; - left: 50%; - top: 50%; + left: calc(50vw - 360px); + top: calc(50vh - 280px); z-index: 2; - width: 800px; - height: 640px; + width: 720px; + height: 560px; font-size: 14px; color: var(--color-dark-1); - transform: translate(-50%, -50%); -webkit-user-select: none; user-select: none; } @@ -32,7 +34,7 @@ class About extends Component { width: 100%; height: 100%; border-radius: 8px; - background: rgba(255, 255, 255, 0.75); + background: rgba(255, 255, 255, 0.93); box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); } `, @@ -43,7 +45,9 @@ class About extends Component { flex-direction: column; align-items: center; justify-content: space-between; + gap: 12px; padding: 32px 64px; + line-height: 1.5; } .name { @@ -53,22 +57,44 @@ class About extends Component { text-decoration: none; color: var(--color-blue-1); } + summary { + text-indent: 2em; + } + .holder { + flex: 1; + } ` ] - #date = new Date().format('m月d日 H:i') + #hide() { + this.$store.aboutAppShow = false + } - mounted() {} + mounted() { + watch('$store.aboutAppShow', v => { + this.$animate(!v) + }) + } render() { return html`
- +
APP STORE
v1.0.0 - dd - + + Linux在线应用商店, 是一个应用分享平台, 每个人都可以提交应用信息, + 并分享使用体验。本平台并不支持在线安装到本地, + 仅提供应用的基本信息、使用体验, 以及官方的安装方法, + 不保证该软件能适配所有的发行版或某个发行版的所有版本, + 具体请参考官方说明, 或分享者自己的发行版信息。 + +
+ (this.$store.aboutAppShow = true)} + > +
` } } diff --git a/dist/components/slider.js b/dist/components/slider.js new file mode 100644 index 0000000..9dea13b --- /dev/null +++ b/dist/components/slider.js @@ -0,0 +1,61 @@ +/** + * {} + * @author yutent + * @date 2023/12/19 16:53:27 + */ + +import { html, css, Component } from 'wkit' + +class Slider extends Component { + static styles = [ + css` + :host { + display: flex; + width: 100%; + height: 256px; + } + + .container { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + height: 100%; + } + li { + list-style: none; + } + `, + css` + .list { + position: relative; + width: 100%; + height: 100%; + + .item { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border-radius: 16px; + background: var(--color-blue-1); + } + } + ` + ] + + render() { + return html` +
+
    +
  • +
  • +
  • +
+
+ ` + } +} + +Slider.reg('slider') diff --git a/dist/components/titlebar.js b/dist/components/titlebar.js index 72ba5c6..96a692c 100644 --- a/dist/components/titlebar.js +++ b/dist/components/titlebar.js @@ -20,6 +20,7 @@ class Titlebar extends Component { height: 48px; padding: 0 16px; border-radius: 8px 8px 0 0; + background: var(--titlebar-background, transparent); color: var(--color-dark-1); } .btns { @@ -32,17 +33,29 @@ class Titlebar extends Component { width: 12px; height: 12px; border-radius: 50%; - background: var(--color-red-1); - cursor: pointer; + background: var(--color-grey-1); + cursor: default; - &:nth-child(2) { - background: var(--color-orange-1); - } - &:nth-child(3) { - background: var(--color-green-1); + &:nth-child(1) { + background: var(--color-red-1); + cursor: pointer; } } } + + :host([minimize]) .btns { + i:nth-child(2) { + background: var(--color-orange-1); + cursor: pointer; + } + } + + :host([maximize]) .btns { + i:nth-child(3) { + background: var(--color-green-1); + cursor: pointer; + } + } ` #handleClick(ev) { diff --git a/dist/lib/ui/css/reset-basic.css b/dist/lib/ui/css/reset-basic.css index fd76d61..22bd2be 100644 --- a/dist/lib/ui/css/reset-basic.css +++ b/dist/lib/ui/css/reset-basic.css @@ -17,25 +17,112 @@ * */ -* {margin: 0;padding: 0;vertical-align: baseline;box-sizing: border-box;} -::before, ::after {box-sizing: border-box;} +* { + margin: 0; + padding: 0; + vertical-align: baseline; + box-sizing: border-box; +} + +::before, +::after { + box-sizing: border-box; +} + /* HTML5 display-role reset for older browsers */ -article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,content {display: block;} -img {border: 0;display: inline-block;} -ol,ul {list-style: none;} -blockquote, q {quotes: none;} -blockquote::before, blockquote::after, q::before, q::after {content: '';content: none;} -table {border-collapse: collapse;border-spacing: 0;} -a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline: none;} -::-moz-focus-inner {border: none;outline: none;} +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section, +content { + display: block; +} -body {font-family: 'Helvetica Neue', Arial, 'WenQuanYi Micro Hei', 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', 'Microsoft Yahei', sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;} -code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;white-space:pre-wrap;} +img { + border: 0; + display: inline-block; +} -.noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;} -.noselect img, .noselect a {-webkit-user-drag: none;} -.text-ell {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} -.text-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +a:focus, +input, +textarea, +button:focus, +input:focus, +textarea:focus { + outline: none; +} + +::-moz-focus-inner { + border: none; + outline: none; +} + +body { + font-family: 'Helvetica Neue', Arial, 'WenQuanYi Micro Hei', 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', 'Microsoft Yahei', sans-serif; + -webkit-font-smoothing: antialiased; + text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; +} + +code, +pre, +samp { + font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; + white-space: pre-wrap; +} + +.noselect { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.noselect img, +.noselect a { + -webkit-user-drag: none; +} + +.text-ell { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.text-thin { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} :root { /* primary */ @@ -83,4 +170,4 @@ code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; --color-drag-background: #fdf6ec; --color-readonly-background: #f7f8fb; --color-disabled-background: #fef0f0; -} +} \ No newline at end of file diff --git a/dist/store.js b/dist/store.js index f1778d7..1b58ea2 100644 --- a/dist/store.js +++ b/dist/store.js @@ -2,12 +2,7 @@ import { createStore } from 'wkitd' export default createStore({ user: {}, - stats: { - 0: '❌已删除', - 1: '🕒待审核中', - 2: '✅正常', - 9: '🙅🏻拒绝收录' - }, - searchInput: '', - result: { version: '', versions: [], id: '' } // 搜索结果 + aboutAppShow: false, + storeAppShow: true, + powerAppShow: false }) diff --git a/dist/views/home.js b/dist/views/home.js index e69de29..61ae763 100644 --- a/dist/views/home.js +++ b/dist/views/home.js @@ -0,0 +1,192 @@ +/** + * {} + * @author yutent + * @date 2023/12/19 16:53:27 + */ + +import { html, css, Component } from 'wkit' +import { watch } from 'wkitd' + +import '../components/titlebar.js' +import '../components/slider.js' + +class Home extends Component { + static animation = { type: 'scale', immediate: true } + + static styles = [ + css` + :host { + display: flex; + position: fixed; + left: calc(50vw - 512px); + top: calc(50vh - 380px); + z-index: 2; + width: 1024px; + height: 760px; + font-size: 14px; + color: var(--color-dark-1); + -webkit-user-select: none; + user-select: none; + } + + .container { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + border-radius: 8px; + background: rgba(233, 233, 233, 0.9); + box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); + + --titlebar-background: linear-gradient( + 90deg, + transparent 180px, + #fff 180px + ); + } + + li { + list-style: none; + } + `, + css` + .body { + flex: 1; + display: flex; + line-height: 1.5; + } + .sidebar { + flex-shrink: 0; + width: 180px; + height: 100%; + border-radius: 0 0 0 8px; + backdrop-filter: blur(5px); + } + + .content { + flex: 1; + height: 100%; + padding: 0 32px 32px; + border-radius: 0 0 8px 0; + background: #fff; + } + `, + + css` + .searchbar { + padding: 0 16px; + + input { + width: 100%; + height: 30px; + padding: 0 16px; + line-height: 1; + border: 1px solid var(--color-grey-1); + border-radius: 16px; + background: rgba(255, 255, 255, 0.5); + font-size: 12px; + color: inherit; + outline: none; + transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out; + + &:focus { + background: rgba(255, 255, 255, 1); + border-color: transparent; + } + + &::placeholder { + color: var(--color-grey-2); + } + } + } + + .category { + display: flex; + flex-direction: column; + gap: 6px; + margin-top: 16px; + padding-left: 16px; + --wc-icon-size: 16px; + + .item { + position: relative; + display: flex; + align-items: center; + height: 36px; + padding: 0 16px; + gap: 4px; + border-radius: 8px 0 0 8px; + transition: background 0.2s ease-in-out; + + &:hover { + background: rgba(255, 255, 255, 0.5); + } + + &.active { + background: rgba(255, 255, 255, 1); + + &::before, + &::after { + position: absolute; + right: 0; + top: -12px; + width: 12px; + height: 12px; + background: url(/assets/img/round.webp); + content: ''; + } + &::after { + top: unset; + bottom: -12px; + transform: rotate(-90deg); + } + } + } + } + ` + ] + + #hide() { + this.$store.storeAppShow = false + } + + mounted() { + // this.$store.storeAppShow = true + watch('$store.storeAppShow', v => { + this.$animate(!v) + }) + } + + render() { + return html` +
+ +
+ +
+ +
+
+
+ ` + } +} + +Home.reg('home') diff --git a/dist/views/login.js b/dist/views/login.js index e69de29..517d853 100644 --- a/dist/views/login.js +++ b/dist/views/login.js @@ -0,0 +1,205 @@ +import { html, css, Component } from 'wkit' +import fetch from '/lib/fetch.js' + +import '../components/titlebar.js' + +class Login extends Component { + static animation = { type: 'scale' } + + static styles = css` + :host { + display: flex; + position: fixed; + left: calc(50vw - 320px); + top: calc(50vh - 220px); + z-index: 2; + width: 640px; + height: 440px; + font-size: 14px; + color: var(--color-dark-1); + -webkit-user-select: none; + user-select: none; + } + + .container { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + border-radius: 8px; + background: rgba(255, 255, 255, 0.75); + box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); + + .login-form, + .user-card { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + padding: 0 32px 32px; + } + + .login-form { + .title { + line-height: 2; + border-bottom: 1px solid var(--color-plain-2); + font: 52px/2 'Sol Thin'; + text-align: center; + color: var(--color-grey-3); + } + + .third-part { + display: flex; + justify-content: center; + margin-top: 64px; + } + + & a { + display: inline-flex; + width: 48px; + height: 48px; + margin: 0 16px; + } + } + + .user-card { + align-items: center; + + .avatar { + width: 128px; + height: 128px; + border: 3px solid var(--color-plain-1); + border-radius: 50%; + box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); + } + + .name { + margin-top: 32px; + line-height: 2; + } + .homepage { + display: flex; + align-items: center; + margin-top: 16px; + line-height: 1; + font-style: normal; + --wc-icon-size: 14px; + + & a { + margin-left: 6px; + text-decoration: underline; + color: var(--color-blue-1); + } + } + + .logout { + margin-top: 32px; + --wc-button-background: transparent; + } + } + } + ` + + #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') + } + + #hide() { + let lastPath = localStorage.getItem('login_callback_path') || '/' + + this.$animate(true).then(_ => this.$router.replace(lastPath)) + } + + mounted() { + let route = this.$route + this.$animate() + 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}

+ + HOME: + ${this.$store.user.homepage} + + Log out +
+ ` + : html` + + `} +
+ ` + } +} + +Login.reg('login')