mirror of https://github.com/veypi/OneAuth.git
feat: add oaer
veypi
1 month ago
parent
42115a4cee
commit
3cadef35be
@ -0,0 +1,11 @@
|
|||||||
|
/*
|
||||||
|
* bus.ts
|
||||||
|
* Copyright (C) 2024 veypi <i@veypi.com>
|
||||||
|
* 2024-10-22 21:46
|
||||||
|
* Distributed under terms of the GPL license.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import mitt from "mitt";
|
||||||
|
|
||||||
|
const bus = mitt()
|
||||||
|
export default bus
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
/*
|
||||||
|
* base.ts
|
||||||
|
* Copyright (C) 2024 veypi <i@veypi.com>
|
||||||
|
* 2024-10-22 18:21
|
||||||
|
* Distributed under terms of the GPL license.
|
||||||
|
*/
|
||||||
|
interface buildOpts {
|
||||||
|
id?: string
|
||||||
|
typ?: 'div'
|
||||||
|
class?: string
|
||||||
|
style?: string
|
||||||
|
innerHtml?: string
|
||||||
|
onclick?: any
|
||||||
|
children?: HTMLElement[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class {
|
||||||
|
class_prefix: string
|
||||||
|
constructor(p?: string) {
|
||||||
|
this.class_prefix = p || 'voa-'
|
||||||
|
}
|
||||||
|
build(opts: buildOpts) {
|
||||||
|
let dom = document.createElement(opts.typ || 'div')
|
||||||
|
if (opts.id) {
|
||||||
|
dom.id = opts.id
|
||||||
|
}
|
||||||
|
if (opts.class) {
|
||||||
|
this.addClass(dom, opts.class)
|
||||||
|
}
|
||||||
|
if (opts.innerHtml) {
|
||||||
|
dom.innerHTML = opts.innerHtml
|
||||||
|
}
|
||||||
|
if (opts.onclick) {
|
||||||
|
dom.onclick = opts.onclick
|
||||||
|
}
|
||||||
|
if (opts.children) {
|
||||||
|
for (let c in opts.children) {
|
||||||
|
dom.appendChild(opts.children[c])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (opts.style) {
|
||||||
|
const regex = /([a-zA-Z-]+)\s*:\s*([^;]+);?/g;
|
||||||
|
let match;
|
||||||
|
while ((match = regex.exec(opts.style)) !== null) {
|
||||||
|
const key = match[1].trim();
|
||||||
|
const value = match[2].trim();
|
||||||
|
console.log([key, value])
|
||||||
|
dom.style.setProperty(key, value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return dom
|
||||||
|
}
|
||||||
|
addClass(dom: HTMLElement, c: string) {
|
||||||
|
let items = c.split(' ')
|
||||||
|
for (let i of items) {
|
||||||
|
if (i.startsWith(this.class_prefix)) {
|
||||||
|
dom.classList.add(i)
|
||||||
|
} else {
|
||||||
|
dom.classList.add(this.class_prefix + i)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
removeClass(dom: HTMLElement, c: string) {
|
||||||
|
let items = c.split(' ')
|
||||||
|
for (let i of items) {
|
||||||
|
if (i.startsWith(this.class_prefix)) {
|
||||||
|
dom.classList.remove(i)
|
||||||
|
} else {
|
||||||
|
dom.classList.remove(this.class_prefix + i)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
/*
|
||||||
|
* index.ts
|
||||||
|
* Copyright (C) 2024 veypi <i@veypi.com>
|
||||||
|
* 2024-10-22 17:51
|
||||||
|
* Distributed under terms of the GPL license.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import slide from './slide'
|
||||||
|
import Base from './base'
|
||||||
|
import bus from '../bus'
|
||||||
|
export default class extends Base {
|
||||||
|
slide: slide
|
||||||
|
frame: HTMLDivElement
|
||||||
|
frame_login?: HTMLDivElement
|
||||||
|
frame_user?: HTMLDivElement
|
||||||
|
constructor(frame: HTMLDivElement) {
|
||||||
|
super()
|
||||||
|
this.frame = frame
|
||||||
|
this.frame.classList.add('voa')
|
||||||
|
this.slide = new slide()
|
||||||
|
this.mount_user()
|
||||||
|
bus.on('logout', () => {
|
||||||
|
this.mount_login()
|
||||||
|
this.slide.hide()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
mount_login() {
|
||||||
|
this.frame_login = this.build({
|
||||||
|
class: 'off hover-line-b scale-in',
|
||||||
|
innerHtml: '登录',
|
||||||
|
onclick: () => {
|
||||||
|
console.log('click login')
|
||||||
|
this.addClass(this.frame_login!, 'scale-off')
|
||||||
|
this.mount_user()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (this.frame_user) {
|
||||||
|
this.frame.removeChild(this.frame_user)
|
||||||
|
}
|
||||||
|
this.frame.appendChild(this.frame_login)
|
||||||
|
}
|
||||||
|
mount_user() {
|
||||||
|
let icon = 'https://public.veypi.com/img/avatar/0001.jpg'
|
||||||
|
this.frame_user = this.build({
|
||||||
|
class: 'on scale-in',
|
||||||
|
innerHtml: `
|
||||||
|
<img style="" class="" src="${icon}" />
|
||||||
|
`,
|
||||||
|
onclick: () => {
|
||||||
|
this.slide.show()
|
||||||
|
// this.mount_login()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (this.frame_login) {
|
||||||
|
this.frame.removeChild(this.frame_login)
|
||||||
|
}
|
||||||
|
this.frame.appendChild(this.frame_user)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
/*
|
||||||
|
* slide.ts
|
||||||
|
* Copyright (C) 2024 veypi <i@veypi.com>
|
||||||
|
* 2024-10-22 17:57
|
||||||
|
* Distributed under terms of the GPL license.
|
||||||
|
*/
|
||||||
|
import Base from './base'
|
||||||
|
import bus from '../bus'
|
||||||
|
import account from './account'
|
||||||
|
|
||||||
|
/*
|
||||||
|
mask
|
||||||
|
slide
|
||||||
|
header
|
||||||
|
body
|
||||||
|
main
|
||||||
|
footer
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
export default class extends Base {
|
||||||
|
mask: HTMLDivElement
|
||||||
|
slide: HTMLDivElement
|
||||||
|
header: HTMLDivElement
|
||||||
|
body: HTMLElement
|
||||||
|
main: HTMLElement
|
||||||
|
footer: HTMLElement
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
this.header = this.build({
|
||||||
|
class: 'slide-header animate-slow',
|
||||||
|
})
|
||||||
|
this.footer = this.build({
|
||||||
|
class: 'slide-footer',
|
||||||
|
innerHtml: 'logout',
|
||||||
|
onclick: () => {
|
||||||
|
bus.emit('logout')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.main = this.build({
|
||||||
|
class: 'slide-main',
|
||||||
|
children: [new account().main]
|
||||||
|
})
|
||||||
|
this.body = this.build({
|
||||||
|
class: 'slide-body animate-slow',
|
||||||
|
style: 'animation-delay: 300ms',
|
||||||
|
children: [this.main, this.footer]
|
||||||
|
})
|
||||||
|
this.slide = this.build({
|
||||||
|
id: 'voa-slide',
|
||||||
|
class: 'slide',
|
||||||
|
children: [this.header, this.body]
|
||||||
|
})
|
||||||
|
this.mask = this.build({
|
||||||
|
class: 'slide-mask',
|
||||||
|
style: 'visibility: hidden',
|
||||||
|
children: [this.slide],
|
||||||
|
onclick: (e: MouseEvent) => {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
this.hide()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
document.body.appendChild(this.mask)
|
||||||
|
}
|
||||||
|
show() {
|
||||||
|
this.mask.style.visibility = 'visible'
|
||||||
|
this.addClass(this.header, 'slidein-right')
|
||||||
|
this.addClass(this.body, 'slidein-up')
|
||||||
|
}
|
||||||
|
hide() {
|
||||||
|
this.mask.style.visibility = 'hidden'
|
||||||
|
this.removeClass(this.header, 'slidein-right')
|
||||||
|
this.removeClass(this.body, 'slidein-up')
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,6 +1,6 @@
|
|||||||
import './style.css'
|
import './style.css'
|
||||||
import { OAer } from '../lib/main'
|
import { OAer } from '../lib/main'
|
||||||
|
|
||||||
let t = new OAer('123', '')
|
let t = new OAer('http://localhost:3000', 'voa')
|
||||||
console.log(t.domid)
|
console.log(t.domid)
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue