一大波更新
parent
f725cf74a8
commit
e6d70956d7
|
|
@ -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')
|
||||
// })
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<svg width="1920" height="75" xmlns="http://www.w3.org/2000/svg"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
|
||||
<style>
|
||||
.cat {transform: translateX(-223px);animation: cat 20s ease-out infinite}
|
||||
@keyframes cat {to {transform: translateX(1720px);}}
|
||||
</style>
|
||||
<defs>
|
||||
<g id="cat" fill="none" stroke="rgba(255,255,255,.6)" stroke-width="1.5">
|
||||
<path
|
||||
d="M198.167 52.515c0-3.891-3.336-4.466-3.336-14.894m6.924 4.821v9.997m3.485-.169c0-3.435 2.17-7.598 2.17-13.068 0-5.471-.66-10.29-.836-13.274m-1.265.431s3.384-.265 4.553-5.546"/>
|
||||
<path
|
||||
d="M200.146 15.96s-1.42-4.408-2.62-4.408c-1.2 0-3.298 5.753-3.298 14.428 0 2.24-11.69 8.123-9.211 21.709.398 2.18 1.394 6.337 1.394 6.353 0 .016 2.518 9.529-2.87 9.529-1.12 0-1.657-.62-2.778-.62-1.12 0-2.024.765-2.024 1.758s1.11 3.434 5.065 3.434c7.147 0 7.419-5.987 7.419-9.867 0-3.88-.036-2.68-.036-3.314 0-2.127 1.772-2.56 2.43-2.801"/>
|
||||
<ellipse cx="203" cy="19" rx=".5" ry="0.8" fill="#fff" />
|
||||
<path
|
||||
d="M202.432 14.465c3.543 0 4.374 4.288 7.066 4.288m-4.572-5.561s-1.015-2.334-1.891-2.334c-.876 0-2.14 2.429-2.14 2.429"/>
|
||||
</g>
|
||||
</defs>
|
||||
<use href="#cat" class="cat" />
|
||||
<use href="#cat" class="cat" style="animation-delay:2s;animation-duration:25s" />
|
||||
<use href="#cat" class="cat" style="animation-delay:4s;animation-duration:30s" />
|
||||
<use href="#cat" class="cat" style="animation-delay:6s;animation-duration:35s" />
|
||||
<use href="#cat" class="cat" style="animation-delay:8s;animation-duration:40s" />
|
||||
<path fill="rgba(255,255,255,.3)" d="M0 53h1920v2H0z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 B |
|
|
@ -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`
|
||||
<main class="container">
|
||||
<wc-titlebar></wc-titlebar>
|
||||
<wc-titlebar
|
||||
minimize
|
||||
@close=${this.#hide}
|
||||
@minimize=${this.#hide}
|
||||
></wc-titlebar>
|
||||
<div class="content">
|
||||
<header class="name">APP STORE</header>
|
||||
<cite>v1.0.0</cite>
|
||||
<mark>dd</mark>
|
||||
|
||||
<summary>
|
||||
Linux在线应用商店, 是一个应用分享平台, 每个人都可以提交应用信息,
|
||||
并分享使用体验。本平台并不支持在线安装到本地,
|
||||
仅提供应用的基本信息、使用体验, 以及官方的安装方法,
|
||||
不保证该软件能适配所有的发行版或某个发行版的所有版本,
|
||||
具体请参考官方说明, 或分享者自己的发行版信息。
|
||||
</summary>
|
||||
<span class="holder"></span>
|
||||
<footer>
|
||||
© Powered By yutent, with
|
||||
<a href="https://git.wkit.fun/bytedo/wkitd" target="_blank"
|
||||
|
|
|
|||
|
|
@ -29,7 +29,13 @@ class Dock extends Component {
|
|||
padding: 12px;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
`,
|
||||
css`
|
||||
|
|
@ -80,8 +86,11 @@ class Dock extends Component {
|
|||
|
||||
render() {
|
||||
return html`
|
||||
<div class="container">
|
||||
<span class="dashboard"></span>
|
||||
<main class="container">
|
||||
<span
|
||||
class="dashboard"
|
||||
@click=${_ => (this.$store.storeAppShow = true)}
|
||||
></span>
|
||||
<mark class="pipe"></mark>
|
||||
<nav class="apps">
|
||||
<a class="item"></a>
|
||||
|
|
@ -90,8 +99,11 @@ class Dock extends Component {
|
|||
<a class="item"></a>
|
||||
</nav>
|
||||
<mark class="pipe"></mark>
|
||||
<span class="trash"></span>
|
||||
</div>
|
||||
<span
|
||||
class="trash"
|
||||
@click=${_ => (this.$store.aboutAppShow = true)}
|
||||
></span>
|
||||
</main>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
/**
|
||||
* {}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @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`
|
||||
<main class="container">
|
||||
<ul class="list">
|
||||
<li class="item"></li>
|
||||
<li class="item"></li>
|
||||
<li class="item"></li>
|
||||
</ul>
|
||||
</main>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
Slider.reg('slider')
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,192 @@
|
|||
/**
|
||||
* {}
|
||||
* @author yutent<yutent.io@gmail.com>
|
||||
* @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`
|
||||
<main class="container">
|
||||
<wc-titlebar
|
||||
minimize
|
||||
maximize
|
||||
@close=${this.#hide}
|
||||
@minimize=${this.#hide}
|
||||
></wc-titlebar>
|
||||
<div class="body">
|
||||
<aside class="sidebar">
|
||||
<search class="searchbar">
|
||||
<input placeholder="搜索应用" />
|
||||
</search>
|
||||
|
||||
<menu class="category">
|
||||
<li class="item active">
|
||||
<wc-icon name="client"></wc-icon>装机必备
|
||||
</li>
|
||||
<li class="item"><wc-icon name="doc"></wc-icon>办公软件</li>
|
||||
<li class="item"><wc-icon name="setting"></wc-icon>开发工具</li>
|
||||
</menu>
|
||||
</aside>
|
||||
<div class="content">
|
||||
<wc-slider></wc-slider>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
Home.reg('home')
|
||||
|
|
@ -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`
|
||||
<main class="container">
|
||||
<wc-titlebar @close=${this.#hide}></wc-titlebar>
|
||||
${this.$store.user.id
|
||||
? html`
|
||||
<div class="user-card">
|
||||
<img class="avatar" :src=${this.$store.user.avatar} />
|
||||
<h3 class="name">${this.$store.user.name}</h3>
|
||||
<cite class="homepage">
|
||||
<span><wc-icon name="home"></wc-icon>HOME:</span>
|
||||
<a target="_blank" :href=${this.$store.user.homepage}
|
||||
>${this.$store.user.homepage}</a
|
||||
>
|
||||
</cite>
|
||||
<wc-button type="danger" class="logout" @click=${this.#logout}
|
||||
>Log out</wc-button
|
||||
>
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div class="login-form">
|
||||
<section class="title">SIGN IN</section>
|
||||
<section class="third-part">
|
||||
<a
|
||||
class="github"
|
||||
title="github"
|
||||
@click=${_ => this.#jumpLogin('github')}
|
||||
>
|
||||
<svg
|
||||
class="ico"
|
||||
viewBox="0 0 16 16"
|
||||
width="48"
|
||||
height="48"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 01-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 010 8c0-4.42 3.58-8 8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
`}
|
||||
</main>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
Login.reg('login')
|
||||
Loading…
Reference in New Issue