搭出前端骨架和入站列表
设计基调定为：层次靠底色和一像素描边而不是投影，一屏最多两层容器，间距给足。 tokens.css 顶部写了这三条规则，后面的组件都是它们的推论。 入站列表把两套写法合并成一张表：老式顶层端口字段（mixed-port 这些）和 listeners 数组。 只画 listeners 的话，一台只用 mixed-port 的机器打开会是空板，而那个端口正在跑—— 这等于对用户撒谎。合并逻辑在 shared/inbounds.ts，带 10 个测试。 后端顺带能提供打包后的静态文件了，一个进程就能跑起来。
This commit is contained in:
im0o
+197
@@ -0,0 +1,197 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { ApiError, api, getToken, setToken } from './api'
|
||||
import type { ConfigSnapshot } from './api'
|
||||
import InboundList from './views/InboundList.vue'
|
||||
import TokenGate from './views/TokenGate.vue'
|
||||
|
||||
const snapshot = ref<ConfigSnapshot | null>(null)
|
||||
const kernel = ref<{ online: boolean; version?: string }>({ online: false })
|
||||
const needsToken = ref(!getToken())
|
||||
const loadError = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
loadError.value = ''
|
||||
try {
|
||||
const [config, status] = await Promise.all([api.readConfig(), api.kernel()])
|
||||
snapshot.value = config
|
||||
kernel.value = status
|
||||
needsToken.value = false
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError && error.unauthorized) {
|
||||
needsToken.value = true
|
||||
} else {
|
||||
loadError.value = error instanceof Error ? error.message : String(error)
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function submitToken(value: string) {
|
||||
setToken(value)
|
||||
void load()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!needsToken.value) void load()
|
||||
})
|
||||
|
||||
const problems = computed(
|
||||
() => snapshot.value?.diagnostics.filter((d) => d.severity === 'error') ?? [],
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TokenGate v-if="needsToken" @submit="submitToken" />
|
||||
|
||||
<div v-else class="shell">
|
||||
<header class="bar">
|
||||
<div class="brand">
|
||||
<span class="mark" aria-hidden="true"></span>
|
||||
<span class="name">Patchbay</span>
|
||||
</div>
|
||||
<div class="status">
|
||||
<span :class="['dot', kernel.online ? 'dot-ok' : 'dot-off']" aria-hidden="true"></span>
|
||||
<span>{{ kernel.online ? `内核 ${kernel.version ?? ''}` : '内核未连接' }}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="page">
|
||||
<p v-if="loading" class="hint">读取配置中…</p>
|
||||
|
||||
<div v-else-if="loadError" class="panel panel-bad">
|
||||
<h2>读不到配置</h2>
|
||||
<p>{{ loadError }}</p>
|
||||
</div>
|
||||
|
||||
<template v-else-if="snapshot">
|
||||
<div v-if="problems.length" class="panel panel-bad">
|
||||
<h2>配置里有 {{ problems.length }} 处问题</h2>
|
||||
<ul>
|
||||
<li v-for="(p, i) in problems" :key="i">
|
||||
<code>{{ p.path.join('.') }}</code> {{ p.message }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<InboundList :data="snapshot.data" :kernel-online="kernel.online" />
|
||||
</template>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--s-4);
|
||||
padding: var(--s-3) var(--s-6);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
background: var(--c-surface);
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-3);
|
||||
}
|
||||
|
||||
/* 插线板的意象：两个接口加一条线 */
|
||||
.mark {
|
||||
width: 22px;
|
||||
height: 10px;
|
||||
border: 1.5px solid var(--c-accent);
|
||||
border-radius: 999px;
|
||||
position: relative;
|
||||
}
|
||||
.mark::before,
|
||||
.mark::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
margin-top: -2px;
|
||||
border-radius: 50%;
|
||||
background: var(--c-accent);
|
||||
}
|
||||
.mark::before {
|
||||
left: 2px;
|
||||
}
|
||||
.mark::after {
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: var(--t-lg);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-2);
|
||||
color: var(--c-text-soft);
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.dot-ok {
|
||||
background: var(--c-ok);
|
||||
}
|
||||
.dot-off {
|
||||
background: var(--c-text-faint);
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 880px;
|
||||
margin: 0 auto;
|
||||
padding: var(--s-7) var(--s-6);
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: var(--c-text-soft);
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--r-md);
|
||||
padding: var(--s-4) var(--s-5);
|
||||
margin-bottom: var(--s-5);
|
||||
}
|
||||
|
||||
.panel-bad {
|
||||
border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-border));
|
||||
background: var(--c-danger-soft);
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
font-size: var(--t-base);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--s-2);
|
||||
}
|
||||
|
||||
.panel ul {
|
||||
margin: 0;
|
||||
padding-left: 1.2em;
|
||||
color: var(--c-text-soft);
|
||||
font-size: var(--t-sm);
|
||||
}
|
||||
</style>
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* 后端接口的客户端。
|
||||
*
|
||||
* 令牌存在 localStorage 里。它等同于密码，但这个页面本来就只有能访问 127.0.0.1
|
||||
* （或者持有 SSH 隧道）的人才打得开，存在浏览器里不额外扩大暴露面。
|
||||
*/
|
||||
import type { ConfigDiagnostic, ConfigObject } from '../vendor/config-editor/index.ts'
|
||||
|
||||
const TOKEN_KEY = 'patchbay.token'
|
||||
|
||||
export function getToken(): string {
|
||||
return localStorage.getItem(TOKEN_KEY) ?? ''
|
||||
}
|
||||
|
||||
export function setToken(value: string): void {
|
||||
localStorage.setItem(TOKEN_KEY, value.trim())
|
||||
}
|
||||
|
||||
export function clearToken(): void {
|
||||
localStorage.removeItem(TOKEN_KEY)
|
||||
}
|
||||
|
||||
/** 接口报错时抛这个，界面据此决定是提示重填令牌还是显示错误内容。 */
|
||||
export class ApiError extends Error {
|
||||
constructor(
|
||||
readonly status: number,
|
||||
readonly payload: Record<string, unknown>,
|
||||
) {
|
||||
super(typeof payload.message === 'string' ? payload.message : `请求失败（${String(status)}）`)
|
||||
this.name = 'ApiError'
|
||||
}
|
||||
|
||||
get unauthorized(): boolean {
|
||||
return this.status === 401
|
||||
}
|
||||
}
|
||||
|
||||
async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
|
||||
const res = await fetch(path, {
|
||||
method,
|
||||
headers: {
|
||||
Authorization: `Bearer ${getToken()}`,
|
||||
...(body === undefined ? {} : { 'Content-Type': 'application/json' }),
|
||||
},
|
||||
body: body === undefined ? undefined : JSON.stringify(body),
|
||||
})
|
||||
const text = await res.text()
|
||||
const payload = text ? (JSON.parse(text) as Record<string, unknown>) : {}
|
||||
if (!res.ok) throw new ApiError(res.status, payload)
|
||||
return payload as T
|
||||
}
|
||||
|
||||
export interface ConfigSnapshot {
|
||||
data: ConfigObject
|
||||
yaml: string
|
||||
revision: string
|
||||
diagnostics: ConfigDiagnostic[]
|
||||
}
|
||||
|
||||
export interface ApplySuccess {
|
||||
ok: true
|
||||
snapshot: ConfigSnapshot
|
||||
reloaded: boolean
|
||||
reloadMessage: string
|
||||
}
|
||||
|
||||
export interface ApplyFailure {
|
||||
ok: false
|
||||
stage: 'stale' | 'self-check' | 'kernel-check' | 'write' | 'reload'
|
||||
message: string
|
||||
hint: string
|
||||
restored: boolean
|
||||
}
|
||||
|
||||
export const api = {
|
||||
readConfig: () => request<ConfigSnapshot>('GET', '/api/config'),
|
||||
|
||||
applyConfig: (data: ConfigObject, baseRevision: string) =>
|
||||
request<ApplySuccess>('PUT', '/api/config', { data, baseRevision }),
|
||||
|
||||
listBackups: () => request<{ backups: string[] }>('GET', '/api/config/backups'),
|
||||
|
||||
restoreBackup: (name: string) =>
|
||||
request<ApplySuccess>('POST', `/api/config/backups/${encodeURIComponent(name)}/restore`),
|
||||
|
||||
kernel: () => request<{ online: boolean; version?: string }>('GET', '/api/kernel'),
|
||||
|
||||
/** 订阅里当前有哪些线路。配置文件给不出这个答案，只能问运行中的内核。 */
|
||||
providers: () =>
|
||||
request<{ providers: Record<string, { vehicleType: string; proxies: { name: string }[] }> }>(
|
||||
'GET',
|
||||
'/api/kernel/providers/proxies',
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<title>Patchbay</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './styles/tokens.css'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@@ -0,0 +1,143 @@
|
||||
/*
|
||||
* 设计基调。
|
||||
*
|
||||
* 三条规则，其余都是它们的推论：
|
||||
* 1. 层次靠底色深浅和一像素描边，不靠投影
|
||||
* 2. 不要卡片套卡片。一屏最多两层容器，再深就换成分割线
|
||||
* 3. 信息密度偏低。行高、间距给足，宁可多滚动也不要挤
|
||||
*
|
||||
* 颜色只留一个强调色，用在「当前选中」和「主要操作」上。状态色（成功/警告/危险）
|
||||
* 只在真的表示状态时用，不拿来装饰。
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* 中性色阶。带一点点冷调，避免纯灰的死板 */
|
||||
--c-bg: #fbfbfc;
|
||||
--c-surface: #ffffff;
|
||||
--c-surface-sunken: #f4f5f7;
|
||||
--c-border: #e4e6ea;
|
||||
--c-border-strong: #d0d3d9;
|
||||
|
||||
--c-text: #1c1e21;
|
||||
--c-text-soft: #5c6169;
|
||||
--c-text-faint: #8b9098;
|
||||
|
||||
/* 强调色：偏青的蓝，冷静，不抢戏 */
|
||||
--c-accent: #2b7a78;
|
||||
--c-accent-soft: #e6f2f1;
|
||||
--c-accent-text: #1f5c5a;
|
||||
|
||||
--c-danger: #b3261e;
|
||||
--c-danger-soft: #fdedec;
|
||||
--c-warn: #8a6100;
|
||||
--c-warn-soft: #fdf5e3;
|
||||
--c-ok: #1f6b3a;
|
||||
--c-ok-soft: #e9f5ed;
|
||||
|
||||
/* 间距。低密度的来源，别调小 */
|
||||
--s-1: 4px;
|
||||
--s-2: 8px;
|
||||
--s-3: 12px;
|
||||
--s-4: 16px;
|
||||
--s-5: 24px;
|
||||
--s-6: 32px;
|
||||
--s-7: 48px;
|
||||
|
||||
--r-sm: 6px;
|
||||
--r-md: 10px;
|
||||
--r-lg: 14px;
|
||||
|
||||
--f-sans:
|
||||
system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC',
|
||||
sans-serif;
|
||||
--f-mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
|
||||
|
||||
--t-xs: 12px;
|
||||
--t-sm: 13px;
|
||||
--t-base: 14px;
|
||||
--t-lg: 16px;
|
||||
--t-xl: 20px;
|
||||
--t-2xl: 26px;
|
||||
|
||||
--line: 1.7;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--c-bg: #16181c;
|
||||
--c-surface: #1d2025;
|
||||
--c-surface-sunken: #121417;
|
||||
--c-border: #2b2f36;
|
||||
--c-border-strong: #3a3f48;
|
||||
|
||||
--c-text: #e6e8eb;
|
||||
--c-text-soft: #9ba1a9;
|
||||
--c-text-faint: #6c727a;
|
||||
|
||||
--c-accent: #4db6ac;
|
||||
--c-accent-soft: #1b3330;
|
||||
--c-accent-text: #7fd4cb;
|
||||
|
||||
--c-danger: #f2b8b5;
|
||||
--c-danger-soft: #3a1f1e;
|
||||
--c-warn: #e8c37a;
|
||||
--c-warn-soft: #33290f;
|
||||
--c-ok: #86d6a0;
|
||||
--c-ok-soft: #16301f;
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--c-bg);
|
||||
color: var(--c-text);
|
||||
font-family: var(--f-sans);
|
||||
font-size: var(--t-base);
|
||||
line-height: var(--line);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p,
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
.mono {
|
||||
font-family: var(--f-mono);
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--c-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--c-accent-soft);
|
||||
color: var(--c-accent-text);
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { collectInbounds } from '@shared/inbounds.ts'
|
||||
import type { Inbound, OutboundMode } from '@shared/inbounds.ts'
|
||||
import type { ConfigObject } from '../../vendor/config-editor/index.ts'
|
||||
|
||||
const props = defineProps<{ data: ConfigObject; kernelOnline: boolean }>()
|
||||
|
||||
const inbounds = computed(() => collectInbounds(props.data))
|
||||
|
||||
/** 出站去向在表格里怎么显示。「跟着规则走」是弱化的，因为它是默认状态而非用户的选择。 */
|
||||
function outboundLabel(mode: OutboundMode): { text: string; muted: boolean } {
|
||||
if (mode.kind === 'rules') return { text: '跟着规则走', muted: true }
|
||||
if (mode.kind === 'direct') return { text: '直连', muted: false }
|
||||
if (mode.kind === 'global') return { text: '全局', muted: false }
|
||||
return { text: mode.name, muted: false }
|
||||
}
|
||||
|
||||
function typeLabel(inbound: Inbound): string {
|
||||
if (inbound.type === 'mixed') return 'HTTP + SOCKS5'
|
||||
if (inbound.type === 'http') return 'HTTP'
|
||||
if (inbound.type === 'socks') return 'SOCKS5'
|
||||
if (inbound.type === 'redir') return '透明代理'
|
||||
if (inbound.type === 'tproxy') return '透明代理'
|
||||
return inbound.type
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<header class="head">
|
||||
<div>
|
||||
<h2>入站</h2>
|
||||
<p class="sub">每一路进来的流量，以及它从哪里出去。</p>
|
||||
</div>
|
||||
<button class="add" type="button" disabled title="下一步做">新增</button>
|
||||
</header>
|
||||
|
||||
<ol class="rows">
|
||||
<li v-for="inbound in inbounds" :key="inbound.id" class="row">
|
||||
<div class="port">
|
||||
<span class="num">{{ inbound.port }}</span>
|
||||
<span class="type">{{ typeLabel(inbound) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="mid">
|
||||
<div class="name">
|
||||
{{ inbound.name }}
|
||||
<span v-if="inbound.isDefault" class="tag">默认</span>
|
||||
</div>
|
||||
<div v-if="inbound.listen" class="listen mono">{{ inbound.listen }}</div>
|
||||
</div>
|
||||
|
||||
<div class="wire" aria-hidden="true"></div>
|
||||
|
||||
<div class="out">
|
||||
<span :class="['out-text', outboundLabel(inbound.outbound).muted && 'is-muted']">
|
||||
{{ outboundLabel(inbound.outbound).text }}
|
||||
</span>
|
||||
<span v-if="inbound.ruleSet" class="ruleset">附加规则 {{ inbound.ruleSet }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p v-if="inbounds.length === 0" class="empty">
|
||||
这份配置里没有任何入站。mihomo 不会监听任何端口。
|
||||
</p>
|
||||
|
||||
<p v-if="inbounds.some((i) => i.isDefault)" class="footnote">
|
||||
标着「默认」的入站由配置文件顶层的端口字段声明，这种写法没法单独指定出站，流量一律走分流规则。
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--s-4);
|
||||
margin-bottom: var(--s-5);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--t-xl);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.sub {
|
||||
color: var(--c-text-soft);
|
||||
font-size: var(--t-sm);
|
||||
margin-top: var(--s-1);
|
||||
}
|
||||
|
||||
.add {
|
||||
padding: var(--s-2) var(--s-4);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--c-surface);
|
||||
cursor: pointer;
|
||||
}
|
||||
.add:disabled {
|
||||
color: var(--c-text-faint);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 一层容器，内部用分割线分行——不做卡片套卡片 */
|
||||
.rows {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--c-surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 7.5rem 1fr 3rem minmax(8rem, auto);
|
||||
align-items: center;
|
||||
gap: var(--s-4);
|
||||
padding: var(--s-4) var(--s-5);
|
||||
}
|
||||
|
||||
.row + .row {
|
||||
border-top: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.port {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-family: var(--f-mono);
|
||||
font-size: var(--t-lg);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: var(--t-xs);
|
||||
color: var(--c-text-faint);
|
||||
}
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--s-2);
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 1px var(--s-2);
|
||||
border: 1px solid var(--c-border-strong);
|
||||
border-radius: 999px;
|
||||
font-size: var(--t-xs);
|
||||
color: var(--c-text-soft);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.listen {
|
||||
font-size: var(--t-xs);
|
||||
color: var(--c-text-faint);
|
||||
}
|
||||
|
||||
/* 插线板的那根线。它承载的信息是「左边这个口通向右边那个出口」 */
|
||||
.wire {
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--c-border-strong),
|
||||
color-mix(in srgb, var(--c-accent) 55%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
.out {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.out-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.out-text.is-muted {
|
||||
font-weight: 400;
|
||||
color: var(--c-text-faint);
|
||||
}
|
||||
|
||||
.ruleset {
|
||||
font-size: var(--t-xs);
|
||||
color: var(--c-text-faint);
|
||||
}
|
||||
|
||||
.empty,
|
||||
.footnote {
|
||||
color: var(--c-text-faint);
|
||||
font-size: var(--t-sm);
|
||||
margin-top: var(--s-4);
|
||||
line-height: 1.7;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user