im0o
272a0931a1
原来三个组件各写一份、筛选输入框哪份都没有，落到全局的外圈 outline， 和订阅选择器长得不一样。规则上收到 tokens.css 一处，组件里的重复定义 删掉。按钮保留外圈焦点环，那是键盘可达性。
89 lines
1.7 KiB
Vue
89 lines
1.7 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);
|
||
}
|
||
|
||
.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>
|