im0o
7a764f5fe1
设计基调定为：层次靠底色和一像素描边而不是投影，一屏最多两层容器，间距给足。 tokens.css 顶部写了这三条规则，后面的组件都是它们的推论。 入站列表把两套写法合并成一张表：老式顶层端口字段（mixed-port 这些）和 listeners 数组。 只画 listeners 的话，一台只用 mixed-port 的机器打开会是空板，而那个端口正在跑—— 这等于对用户撒谎。合并逻辑在 shared/inbounds.ts，带 10 个测试。 后端顺带能提供打包后的静态文件了，一个进程就能跑起来。
94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
|
||
const emit = defineEmits<{ submit: [token: string] }>()
|
||
const value = ref('')
|
||
</script>
|
||
|
||
<template>
|
||
<div class="gate">
|
||
<form class="box" @submit.prevent="emit('submit', value)">
|
||
<h1>Patchbay</h1>
|
||
<p class="lead">输入访问令牌。</p>
|
||
<input
|
||
v-model="value"
|
||
class="field mono"
|
||
type="password"
|
||
autocomplete="off"
|
||
spellcheck="false"
|
||
placeholder="令牌"
|
||
autofocus
|
||
/>
|
||
<button class="go" type="submit" :disabled="!value.trim()">进入</button>
|
||
<p class="where">
|
||
令牌在服务端配置文件旁边的 <code>.patchbay-token</code> 里，启动时也会打印在控制台上。
|
||
</p>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.gate {
|
||
display: grid;
|
||
place-items: center;
|
||
min-height: 100%;
|
||
padding: var(--s-6);
|
||
}
|
||
|
||
.box {
|
||
width: 100%;
|
||
max-width: 360px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
h1 {
|
||
font-size: var(--t-2xl);
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.lead {
|
||
color: var(--c-text-soft);
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
.field {
|
||
width: 100%;
|
||
padding: var(--s-3) var(--s-4);
|
||
border: 1px solid var(--c-border-strong);
|
||
border-radius: var(--r-sm);
|
||
background: var(--c-surface);
|
||
}
|
||
|
||
.field:focus {
|
||
border-color: var(--c-accent);
|
||
outline: none;
|
||
}
|
||
|
||
.go {
|
||
padding: var(--s-3) var(--s-4);
|
||
border: 1px solid transparent;
|
||
border-radius: var(--r-sm);
|
||
background: var(--c-accent);
|
||
color: #fff;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.go:disabled {
|
||
background: var(--c-surface-sunken);
|
||
color: var(--c-text-faint);
|
||
border-color: var(--c-border);
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.where {
|
||
color: var(--c-text-faint);
|
||
font-size: var(--t-sm);
|
||
line-height: 1.6;
|
||
margin-top: var(--s-2);
|
||
}
|
||
</style>
|