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>
|