166 lines
3.7 KiB
JavaScript
166 lines
3.7 KiB
JavaScript
/**
|
|
* {}
|
|
* @author yutent<yutent.io@gmail.com>
|
|
* @date 2023/08/08 18:19:17
|
|
*/
|
|
import { html, css, Component, classMap, nextTick } from 'wkit'
|
|
|
|
import { noop } from '../utils/index.js'
|
|
|
|
class Sidebar extends Component {
|
|
static styles = css`
|
|
:host {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 180px;
|
|
height: 100vh;
|
|
background: var(--color-plain-2);
|
|
}
|
|
.noselect {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.domain-list {
|
|
overflow: hidden;
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
.domain-list .item {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
height: 40px;
|
|
padding: 0 12px;
|
|
cursor: pointer;
|
|
transition: background 0.15s ease-in-out;
|
|
}
|
|
|
|
.item wc-icon {
|
|
--wc-icon-size: 12px;
|
|
margin-left: 8px;
|
|
color: var(--color-grey-2);
|
|
}
|
|
|
|
.item:hover,
|
|
.item.active {
|
|
background: #fff;
|
|
}
|
|
.item.active {
|
|
border-right: 2px solid var(--color-orange-1);
|
|
color: var(--color-orange-1);
|
|
}
|
|
.item.active wc-icon {
|
|
color: var(--color-orange-1);
|
|
}
|
|
.item.blank {
|
|
justify-content: center;
|
|
cursor: default;
|
|
}
|
|
|
|
.item.blank:hover {
|
|
background: none;
|
|
}
|
|
|
|
.action {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 50px;
|
|
padding: 0 10px;
|
|
}
|
|
`
|
|
|
|
addDomain() {
|
|
layer
|
|
.prompt('请输入根域名', function (val, done) {
|
|
if (
|
|
val === 'localhost' ||
|
|
val === 'local' ||
|
|
/^[\w.\-]+\.[a-z]+$/.test(val)
|
|
) {
|
|
done()
|
|
} else {
|
|
layer.toast('域名格式错误', 'error')
|
|
}
|
|
})
|
|
.then(val => {
|
|
let { HOST_DATA, records } = this.$store
|
|
this.$store.domains.push(val)
|
|
HOST_DATA[val] = []
|
|
if (!this.$store.activeDomain) {
|
|
this.toggleDomain(null, val)
|
|
}
|
|
this.$emit('save')
|
|
})
|
|
.catch(noop)
|
|
}
|
|
|
|
toggleDomain(ev, name) {
|
|
let { HOST_DATA, records } = this.$store
|
|
name = name || ev.currentTarget.dataset.name
|
|
this.$store.activeDomain = name
|
|
|
|
this.$store.records = records = (HOST_DATA[name] || []).sort((a, b) =>
|
|
a.record.localeCompare(b.record)
|
|
)
|
|
|
|
let tmp_records = Object.create(null)
|
|
for (let it of records) {
|
|
if (tmp_records[it.record]) {
|
|
tmp_records[it.record].push(it)
|
|
} else {
|
|
tmp_records[it.record] = [it]
|
|
}
|
|
}
|
|
this.$store.tmp_records = tmp_records
|
|
|
|
document.title = `伪域名解析 ${name} `
|
|
localStorage.setItem('last_domain', name)
|
|
nextTick(() => {
|
|
this.$emit('toggle-domain')
|
|
})
|
|
}
|
|
|
|
mounted() {
|
|
this.toggleDomain(null, this.$store.activeDomain)
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<wc-scroll class="domain-list noselect">
|
|
<ul
|
|
@contextmenu.prevent=${ev => this.$emit('show-menu', { event: ev })}
|
|
>
|
|
${this.$store.domains.map(
|
|
it => html`
|
|
<li
|
|
class=${classMap({
|
|
item: true,
|
|
active: it === this.$store.activeDomain
|
|
})}
|
|
data-name=${it}
|
|
@click=${this.toggleDomain}
|
|
>
|
|
<span>${it}</span>
|
|
<wc-icon name="right"></wc-icon>
|
|
</li>
|
|
`
|
|
)}
|
|
${this.$store.domains.length < 1
|
|
? html`<li class="item blank">没有域名</li>`
|
|
: ''}
|
|
</ul>
|
|
</wc-scroll>
|
|
<section class="action">
|
|
<wc-button circle icon="plus" @click=${this.addDomain}> </wc-button>
|
|
</section>
|
|
`
|
|
}
|
|
}
|
|
|
|
Sidebar.reg('sidebar')
|