75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<script setup>
|
||
import { computed, onMounted, ref } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import { getToken, setToken } from "../../lib/extStorage";
|
||
|
||
const router = useRouter();
|
||
|
||
const token = ref("");
|
||
const loggedIn = computed(() => Boolean(token.value));
|
||
|
||
const webBaseUrl = import.meta.env.VITE_WEB_BASE_URL || "http://localhost:5173";
|
||
|
||
async function refresh() {
|
||
token.value = await getToken();
|
||
}
|
||
|
||
function openWeb() {
|
||
const url = String(webBaseUrl || "").trim();
|
||
if (!url) return;
|
||
if (typeof chrome !== "undefined" && chrome.tabs?.create) chrome.tabs.create({ url });
|
||
else window.open(url, "_blank", "noopener,noreferrer");
|
||
}
|
||
|
||
async function logout() {
|
||
await setToken("");
|
||
await refresh();
|
||
await router.replace("/login");
|
||
}
|
||
|
||
onMounted(refresh);
|
||
</script>
|
||
|
||
<template>
|
||
<section class="page">
|
||
<h1 class="h1">更多操作</h1>
|
||
|
||
<p v-if="!loggedIn" class="muted">当前未登录，将跳转到登录页。</p>
|
||
|
||
<div class="card">
|
||
<button class="btn" type="button" @click="openWeb">跳转 Web</button>
|
||
<button class="btn btn--secondary" type="button" @click="logout">退出登录</button>
|
||
<p class="hint">Web 地址来自环境变量：VITE_WEB_BASE_URL</p>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page { padding: 14px; }
|
||
.h1 { margin: 0 0 10px; font-size: 18px; }
|
||
.card {
|
||
max-width: 560px;
|
||
border: 1px solid rgba(255,255,255,0.65);
|
||
background: var(--bb-card);
|
||
border-radius: 18px;
|
||
padding: 12px;
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
.btn {
|
||
border: 1px solid rgba(255,255,255,0.25);
|
||
border-radius: 14px;
|
||
padding: 10px 12px;
|
||
background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta));
|
||
color: white;
|
||
cursor: pointer;
|
||
}
|
||
.btn--secondary {
|
||
background: rgba(255,255,255,0.55);
|
||
color: var(--bb-text);
|
||
border-color: var(--bb-border);
|
||
}
|
||
.muted { color: rgba(19, 78, 74, 0.72); font-size: 12px; }
|
||
.hint { color: rgba(19, 78, 74, 0.72); font-size: 12px; margin: 0; }
|
||
</style>
|