重构为 HTTP SSO 扫码方案并引入 Vue3 前端
移除 Playwright 浏览器自动化，改用 passport/SSO HTTP 接口获取二维码与轮询登录；后端模块化拆分，前端替换为 Vue3 SPA。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
travel
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#1890ff" />
|
||||
<meta name="color-scheme" content="light" />
|
||||
<title>抖音 Cookie 提取器</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+1717
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "douyin-cookie-frontend",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.7.9",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"vite": "^6.0.7"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
@@ -0,0 +1,26 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const http = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_BASE || '',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
timeout: 120000,
|
||||
})
|
||||
|
||||
export async function post(path, body = {}, axiosConfig = {}) {
|
||||
const { data } = await http.post(path, body, axiosConfig)
|
||||
return data
|
||||
}
|
||||
|
||||
export async function get(path, params = {}, axiosConfig = {}) {
|
||||
const { data } = await http.get(path, { ...axiosConfig, params })
|
||||
return data
|
||||
}
|
||||
|
||||
export function formatApiError(err, fallback = '请求失败') {
|
||||
const d = err?.response?.data
|
||||
if (typeof d?.message === 'string' && d.message.trim()) return d.message
|
||||
if (typeof d === 'string' && d.trim()) return d
|
||||
return err?.message || fallback
|
||||
}
|
||||
|
||||
export default http
|
||||
@@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<div class="layout-cloud" :class="{ 'is-nav-open': sidebarOpen }">
|
||||
<div class="nav-backdrop" aria-hidden="true" @click="sidebarOpen = false" />
|
||||
|
||||
<aside class="sidebar" role="navigation" :aria-hidden="desktopNav ? undefined : !sidebarOpen">
|
||||
<div class="sidebar-brand">
|
||||
<button type="button" class="sidebar-close" aria-label="关闭菜单" @click="sidebarOpen = false">
|
||||
×
|
||||
</button>
|
||||
<div class="brand-title">抖音 Cookie 提取</div>
|
||||
<div class="brand-sub">扫码登录 · JSON 导出</div>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<router-link
|
||||
v-for="item in navItems"
|
||||
:key="item.name"
|
||||
:to="{ name: item.name }"
|
||||
class="nav-item"
|
||||
exact-active-class="nav-item-active"
|
||||
@click="onNavClick"
|
||||
>
|
||||
{{ item.label }}
|
||||
</router-link>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<button type="button" class="btn btn-soft full-width" @click="refreshAll">刷新状态</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrap">
|
||||
<header class="mobile-topbar">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-toggle"
|
||||
aria-label="打开菜单"
|
||||
:aria-expanded="sidebarOpen"
|
||||
@click="sidebarOpen = true"
|
||||
>
|
||||
<span class="nav-toggle-bar"></span>
|
||||
<span class="nav-toggle-bar"></span>
|
||||
<span class="nav-toggle-bar"></span>
|
||||
</button>
|
||||
<span class="mobile-title">Cookie 提取</span>
|
||||
</header>
|
||||
<main class="main-inner">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
const sidebarOpen = ref(false)
|
||||
const desktopNav = ref(true)
|
||||
|
||||
const navItems = [
|
||||
{ name: 'home', label: '扫码提取' },
|
||||
{ name: 'debug', label: 'SSO 调试' },
|
||||
]
|
||||
|
||||
let mq
|
||||
function syncMq() {
|
||||
desktopNav.value = typeof window !== 'undefined' && window.matchMedia('(min-width: 900px)').matches
|
||||
if (desktopNav.value) sidebarOpen.value = false
|
||||
}
|
||||
|
||||
function refreshAll() {
|
||||
window.dispatchEvent(new CustomEvent('douyin-refresh-all'))
|
||||
}
|
||||
|
||||
function onNavClick() {
|
||||
if (!desktopNav.value) sidebarOpen.value = false
|
||||
}
|
||||
|
||||
function onKeydown(e) {
|
||||
if (e.key === 'Escape' && sidebarOpen.value) sidebarOpen.value = false
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
if (!desktopNav.value) sidebarOpen.value = false
|
||||
},
|
||||
)
|
||||
|
||||
watch(sidebarOpen, (open) => {
|
||||
if (typeof document === 'undefined') return
|
||||
document.body.style.overflow = open && !desktopNav.value ? 'hidden' : ''
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
syncMq()
|
||||
mq = window.matchMedia('(min-width: 900px)')
|
||||
mq.addEventListener('change', syncMq)
|
||||
window.addEventListener('keydown', onKeydown)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
if (mq) mq.removeEventListener('change', syncMq)
|
||||
window.removeEventListener('keydown', onKeydown)
|
||||
document.body.style.overflow = ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout-cloud {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
max-height: 100vh;
|
||||
max-height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--border-light);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.04);
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
padding: 1rem 0.75rem 0.85rem;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.sidebar-close {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0.75rem;
|
||||
right: 0.65rem;
|
||||
width: var(--tap-min, 44px);
|
||||
height: var(--tap-min, 44px);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: #f5f7fa;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-strong);
|
||||
letter-spacing: -0.02em;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.brand-sub {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 0.55rem 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: var(--tap-min, 44px);
|
||||
padding: 0.45rem 0.6rem;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-strong);
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid #e8e8e8;
|
||||
background: #ffffff;
|
||||
text-decoration: none;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: #f7f8fa;
|
||||
border-color: #dcdfe6;
|
||||
}
|
||||
|
||||
.nav-item-active {
|
||||
background: #eef5fe !important;
|
||||
color: #3b82f6 !important;
|
||||
font-weight: 600;
|
||||
border-color: #bfdbfe !important;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
flex-shrink: 0;
|
||||
padding: 0.55rem 0.5rem;
|
||||
border-top: 1px solid var(--border-light);
|
||||
padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-footer .btn-soft {
|
||||
background: #f5f5f5;
|
||||
border-color: #e8e8e8;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-wrap {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-inner {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
box-sizing: border-box;
|
||||
padding-top: var(--main-pad-y);
|
||||
padding-bottom: max(var(--main-pad-y), env(safe-area-inset-bottom));
|
||||
padding-left: var(--main-pad-start);
|
||||
padding-right: var(--main-pad-end);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.12s ease;
|
||||
}
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 899px) {
|
||||
.sidebar-close {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 250;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease, visibility 0.2s;
|
||||
}
|
||||
|
||||
.layout-cloud.is-nav-open .nav-backdrop {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: min(260px, 86vw);
|
||||
z-index: 300;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.22s ease;
|
||||
}
|
||||
|
||||
.layout-cloud.is-nav-open .sidebar {
|
||||
transform: translateX(0);
|
||||
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.mobile-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
padding: 0.5rem var(--main-pad-end, var(--main-pad-x));
|
||||
padding-top: max(0.5rem, env(safe-area-inset-top));
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: var(--tap-min, 44px);
|
||||
height: var(--tap-min, 44px);
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-toggle-bar {
|
||||
display: block;
|
||||
height: 2px;
|
||||
background: var(--text-strong);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.mobile-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<transition name="toast-slide">
|
||||
<div v-if="visible" class="toast-host" :class="{ 'toast-host--err': isError }" role="status">
|
||||
<span class="toast-icon">{{ isError ? '✕' : '✓' }}</span>
|
||||
<span class="toast-msg">{{ message }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
visible: { type: Boolean, default: false },
|
||||
message: { type: String, default: '' },
|
||||
isError: { type: Boolean, default: false },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.toast-host {
|
||||
position: fixed;
|
||||
bottom: max(1.25rem, env(safe-area-inset-bottom));
|
||||
right: max(1.25rem, env(safe-area-inset-right));
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.75rem 1.1rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-light);
|
||||
border-left: 4px solid var(--success);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-strong);
|
||||
max-width: min(360px, calc(100vw - 2rem));
|
||||
}
|
||||
|
||||
.toast-host--err {
|
||||
border-left-color: var(--danger);
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
font-weight: 700;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.toast-host--err .toast-icon {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.toast-slide-enter-active,
|
||||
.toast-slide-leave-active {
|
||||
transition: transform 0.25s ease, opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.toast-slide-enter-from,
|
||||
.toast-slide-leave-to {
|
||||
transform: translateX(120%);
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
|
||||
/**
|
||||
* 自适应间隔轮询：tick 返回后按 getInterval() 调度下一次
|
||||
* @param {() => Promise<void>|void} tickFn
|
||||
* @param {() => number} getIntervalMs
|
||||
*/
|
||||
export function useLivePoll(tickFn, getIntervalMs = () => 1000) {
|
||||
const lastTickAt = ref(null)
|
||||
const ticking = ref(false)
|
||||
let timer = null
|
||||
let inFlight = false
|
||||
let running = false
|
||||
|
||||
async function runTick() {
|
||||
if (inFlight) return
|
||||
inFlight = true
|
||||
ticking.value = true
|
||||
try {
|
||||
await tickFn()
|
||||
lastTickAt.value = Date.now()
|
||||
} catch (e) {
|
||||
console.error('[livePoll]', e)
|
||||
} finally {
|
||||
inFlight = false
|
||||
ticking.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function scheduleNext() {
|
||||
if (!running) return
|
||||
clearTimeout(timer)
|
||||
const ms = Math.max(500, getIntervalMs())
|
||||
timer = setTimeout(async () => {
|
||||
await runTick()
|
||||
scheduleNext()
|
||||
}, ms)
|
||||
}
|
||||
|
||||
function start() {
|
||||
if (running) return
|
||||
running = true
|
||||
runTick().then(scheduleNext)
|
||||
}
|
||||
|
||||
function stop() {
|
||||
running = false
|
||||
clearTimeout(timer)
|
||||
timer = null
|
||||
}
|
||||
|
||||
function restart() {
|
||||
stop()
|
||||
start()
|
||||
}
|
||||
|
||||
onUnmounted(stop)
|
||||
|
||||
return { start, stop, restart, runTick, lastTickAt, ticking }
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import './style.css'
|
||||
|
||||
createApp(App).use(router).mount('#app')
|
||||
@@ -0,0 +1,23 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import LayoutShell from '../components/LayoutShell.vue'
|
||||
|
||||
const HomeView = () => import('../views/HomeView.vue')
|
||||
const DebugView = () => import('../views/DebugView.vue')
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: LayoutShell,
|
||||
children: [
|
||||
{ path: '', name: 'home', component: HomeView },
|
||||
{ path: 'debug', name: 'debug', component: DebugView },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,471 @@
|
||||
/* Telegram Session — 浅色云端后台 · 双端适配（对齐 Ant Design / 常见后台布局） */
|
||||
:root {
|
||||
--bg-page: #f0f2f5;
|
||||
--surface: #ffffff;
|
||||
--sidebar-bg: #ffffff;
|
||||
--border: #e4e7ed;
|
||||
--border-light: #ebeef5;
|
||||
--text: #303133;
|
||||
--text-strong: #1d2129;
|
||||
--muted: #909399;
|
||||
--muted-light: #c0c4cc;
|
||||
--primary: #1890ff;
|
||||
--primary-light: #e6f4ff;
|
||||
--primary-hover: #40a9ff;
|
||||
--success: #52c41a;
|
||||
--success-bg: #f6ffed;
|
||||
--danger: #ff4d4f;
|
||||
--danger-hover: #ff7875;
|
||||
--warn: #faad14;
|
||||
--info-banner-bg: #e6fffb;
|
||||
--info-banner-border: #87e8de;
|
||||
--info-banner-text: #006d75;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.04);
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
/* 参考常见云端后台：侧栏略窄、主区靠侧栏一侧内边距更小，减少「缝隙」感 */
|
||||
--sidebar-width: 208px;
|
||||
--layout-break: 900px;
|
||||
--tap-min: 44px;
|
||||
--main-pad-y: 0.75rem;
|
||||
--main-pad-start: 0.2rem;
|
||||
--main-pad-end: 0.85rem;
|
||||
--main-pad-x: 0.85rem;
|
||||
--section-gap: 0.65rem;
|
||||
/* 主内容铺满可用宽度，避免 max-width 居中造成侧栏与卡片之间大块留白 */
|
||||
--content-max-width: none;
|
||||
}
|
||||
|
||||
@media (max-width: 899px) {
|
||||
:root {
|
||||
--main-pad-start: 0.75rem;
|
||||
--main-pad-end: 0.75rem;
|
||||
--main-pad-y: 0.7rem;
|
||||
--main-pad-x: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 仪表盘 / 设置 / 账号等业务页根容器（与主区同宽，不额外居中收窄） */
|
||||
.page-cloud {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
max-width: var(--content-max-width);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 参考云端后台：主工作区单一大卡片，内容贴齐四边、减少「侧栏外一块空白」的松散感 */
|
||||
.cloud-workspace {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.85rem 1rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
|
||||
.cloud-workspace > .page-head:first-child {
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.cloud-workspace .stats-row {
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.cloud-workspace > .filter-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.cloud-workspace {
|
||||
padding: 0.75rem 0.85rem;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei",
|
||||
sans-serif;
|
||||
background: var(--bg-page);
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
a:focus-visible,
|
||||
button:focus-visible,
|
||||
.nav-item:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮 · 触控端加大可点区域 */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.5rem 1rem;
|
||||
min-height: 2.25rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s, color 0.15s;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.btn:hover {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
border-color: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: var(--danger-hover);
|
||||
border-color: var(--danger-hover);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
}
|
||||
.btn-soft {
|
||||
background: var(--primary-light);
|
||||
border-color: #91d5ff;
|
||||
color: #096dd9;
|
||||
}
|
||||
.btn-soft:hover {
|
||||
background: #bae0ff;
|
||||
border-color: var(--primary);
|
||||
color: #0050b3;
|
||||
}
|
||||
.btn-sm {
|
||||
padding: 0.35rem 0.65rem;
|
||||
font-size: 0.8125rem;
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 899px) {
|
||||
.btn:not(.btn-sm) {
|
||||
min-height: var(--tap-min);
|
||||
padding-left: 1.1rem;
|
||||
padding-right: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 表单 */
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.55rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.12);
|
||||
}
|
||||
|
||||
@media (max-width: 899px) {
|
||||
input:not([type="checkbox"]):not([type="radio"]),
|
||||
select,
|
||||
textarea {
|
||||
min-height: var(--tap-min);
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.85rem 1rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
@media (max-width: 599px) {
|
||||
.card {
|
||||
padding: 0.75rem 0.85rem;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 0.45rem 0.55rem;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
th {
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
background: #fafafa;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
tr:hover td {
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.badge-ok {
|
||||
background: rgba(82, 196, 26, 0.12);
|
||||
color: var(--success);
|
||||
}
|
||||
.badge-off {
|
||||
background: #fef0f0;
|
||||
color: var(--danger);
|
||||
}
|
||||
.badge-info {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary);
|
||||
}
|
||||
.badge-twofa-yes {
|
||||
background: rgba(82, 196, 26, 0.12);
|
||||
color: var(--success);
|
||||
}
|
||||
.badge-twofa-no {
|
||||
background: #f5f5f5;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* 概览数字卡片（仪表盘 / 账号页共用） */
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
.stat-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.6rem 0.75rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-strong);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.stat-success .stat-value {
|
||||
color: var(--success);
|
||||
}
|
||||
.stat-warn .stat-value {
|
||||
color: var(--danger);
|
||||
}
|
||||
.stat-accent .stat-value {
|
||||
color: var(--warn);
|
||||
}
|
||||
.stat-muted .stat-value {
|
||||
color: var(--muted);
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
@media (max-width: 599px) {
|
||||
.stats-row {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 提示条（说明/信息） */
|
||||
.info-strip {
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.45rem 0.65rem;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.45;
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
.info-strip--teal {
|
||||
background: var(--info-banner-bg);
|
||||
border: 1px solid var(--info-banner-border);
|
||||
color: var(--info-banner-text);
|
||||
}
|
||||
.info-strip--primary {
|
||||
background: var(--primary-light);
|
||||
border: 1px solid #bae0ff;
|
||||
color: #0958d9;
|
||||
}
|
||||
|
||||
/* 弹层 */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 1rem;
|
||||
padding-left: max(1rem, env(safe-area-inset-left));
|
||||
padding-right: max(1rem, env(safe-area-inset-right));
|
||||
padding-bottom: max(1rem, env(safe-area-inset-bottom));
|
||||
}
|
||||
.modal {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius);
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
max-height: min(90vh, 100dvh - 2rem);
|
||||
overflow-y: auto;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.06);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.modal.modal-elevated {
|
||||
padding: 0;
|
||||
}
|
||||
.modal-elevated .modal-hd {
|
||||
padding: 1.25rem 1.35rem 1rem;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
.modal-elevated .modal-title {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.modal-elevated .modal-sub {
|
||||
margin: 0.35rem 0 0;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
.modal-elevated .modal-body {
|
||||
padding: 1.25rem 1.35rem 1rem;
|
||||
}
|
||||
.modal-elevated .modal-ft {
|
||||
padding: 0.85rem 1.35rem 1.25rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid var(--border-light);
|
||||
background: #fafafa;
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
}
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.modal .field-block {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.modal .field-block:last-of-type {
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.modal-input {
|
||||
width: 100%;
|
||||
}
|
||||
.code-pill {
|
||||
display: inline-block;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 0.8rem;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid var(--border-light);
|
||||
padding: 0.35rem 0.55rem;
|
||||
border-radius: 6px;
|
||||
color: var(--text-strong);
|
||||
word-break: break-all;
|
||||
}
|
||||
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<div class="page-cloud">
|
||||
<header class="page-head">
|
||||
<h1 class="page-title">SSO 调试</h1>
|
||||
<p class="page-desc">查看 HTTP 扫码轮询状态与 Cookie 采集进度</p>
|
||||
</header>
|
||||
|
||||
<div v-if="err" class="card banner-err">{{ err }}</div>
|
||||
|
||||
<div class="cloud-workspace">
|
||||
<div class="toolbar">
|
||||
<button type="button" class="btn btn-primary" :disabled="loading" @click="refresh">
|
||||
{{ loading ? '刷新中…' : '立即刷新' }}
|
||||
</button>
|
||||
<button type="button" class="btn" :class="autoOn ? 'btn-soft' : ''" @click="toggleAuto">
|
||||
{{ autoOn ? '停止实时刷新' : '开启实时刷新' }}
|
||||
</button>
|
||||
<span class="live-tag" v-if="autoOn"><span class="live-pulse"></span>实时</span>
|
||||
<span class="auto-hint">{{ lastRefreshText }}</span>
|
||||
</div>
|
||||
|
||||
<div class="debug-grid">
|
||||
<section class="card">
|
||||
<h3 class="col-title">会话信息</h3>
|
||||
<dl class="info-dl">
|
||||
<template v-for="row in infoRows" :key="row.label">
|
||||
<dt>{{ row.label }}</dt>
|
||||
<dd :class="row.class">{{ row.value }}</dd>
|
||||
</template>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h3 class="col-title">扫码轮询</h3>
|
||||
<div v-if="qrMessage" class="poll-box">{{ qrMessage }}</div>
|
||||
<div v-else class="shot-placeholder">暂无活跃扫码会话</div>
|
||||
<p v-if="pollError" class="poll-error">{{ pollError }}</p>
|
||||
</section>
|
||||
|
||||
<section class="card cookie-card">
|
||||
<h3 class="col-title">Cookie 列表 ({{ cookieCount }})</h3>
|
||||
<div class="cookie-list">
|
||||
<div v-if="!cookieNames.length" class="empty-hint">暂无 Cookie</div>
|
||||
<div v-for="name in cookieNames" :key="name" class="cookie-row">
|
||||
<span class="mono">{{ name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { get, formatApiError } from '../api/http.js'
|
||||
import { useLivePoll } from '../composables/useLivePoll.js'
|
||||
|
||||
const loading = ref(false)
|
||||
const err = ref('')
|
||||
const data = ref(null)
|
||||
const autoOn = ref(true)
|
||||
const now = ref(Date.now())
|
||||
let clockTimer = null
|
||||
|
||||
const cookieCount = computed(() => data.value?.cookie_count || 0)
|
||||
const cookieNames = computed(() => data.value?.cookie_names || [])
|
||||
const qrMessage = computed(() => data.value?.qr_message || '')
|
||||
const pollError = computed(() => data.value?.poll_error || '')
|
||||
|
||||
const lastRefreshText = computed(() => {
|
||||
if (!livePoll.lastTickAt.value) return '等待刷新…'
|
||||
const sec = Math.max(0, Math.floor((now.value - livePoll.lastTickAt.value) / 1000))
|
||||
if (sec === 0) return '刚刚更新'
|
||||
if (sec < 60) return `${sec}s 前更新`
|
||||
return new Date(livePoll.lastTickAt.value).toLocaleTimeString()
|
||||
})
|
||||
|
||||
const infoRows = computed(() => {
|
||||
const d = data.value || {}
|
||||
const rows = [
|
||||
{ label: '会话 ID', value: d.session_id || '无' },
|
||||
{ label: '状态', value: d.status || '—' },
|
||||
{ label: '接口模式', value: d.api_mode || '—' },
|
||||
{ label: '扫码阶段', value: d.qr_phase || '—' },
|
||||
{ label: 'Token', value: d.token_prefix ? `${d.token_prefix}…` : '无' },
|
||||
{ label: 'HTTP 会话', value: d.has_session ? '活跃' : '未启动' },
|
||||
]
|
||||
if (d.poll_error) {
|
||||
rows.push({ label: '轮询错误', value: d.poll_error, class: 'text-danger' })
|
||||
}
|
||||
return rows
|
||||
})
|
||||
|
||||
async function refresh() {
|
||||
loading.value = true
|
||||
err.value = ''
|
||||
try {
|
||||
data.value = await get('/api/debug')
|
||||
} catch (e) {
|
||||
err.value = formatApiError(e, '请求失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const livePoll = useLivePoll(refresh, () => (autoOn.value ? 1500 : 60000))
|
||||
|
||||
function toggleAuto() {
|
||||
autoOn.value = !autoOn.value
|
||||
livePoll.restart()
|
||||
}
|
||||
|
||||
function onGlobalRefresh() {
|
||||
livePoll.runTick()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
livePoll.start()
|
||||
clockTimer = setInterval(() => {
|
||||
now.value = Date.now()
|
||||
}, 1000)
|
||||
window.addEventListener('douyin-refresh-all', onGlobalRefresh)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
livePoll.stop()
|
||||
if (clockTimer) clearInterval(clockTimer)
|
||||
window.removeEventListener('douyin-refresh-all', onGlobalRefresh)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
margin: 0.35rem 0 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.page-head {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.banner-err {
|
||||
margin-bottom: 0.65rem;
|
||||
color: var(--danger);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.auto-hint {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.live-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
color: var(--success);
|
||||
background: var(--success-bg);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.live-pulse {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--success);
|
||||
animation: pulse 1.2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.45;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.debug-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.col-title {
|
||||
margin: 0 0 0.65rem;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
.info-dl {
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 100px 1fr;
|
||||
gap: 0.35rem 0.5rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.info-dl dt {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.info-dl dd {
|
||||
margin: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.poll-box {
|
||||
padding: 0.75rem;
|
||||
background: #fafbfc;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.poll-error {
|
||||
margin: 0.5rem 0 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.shot-placeholder,
|
||||
.empty-hint {
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
background: #fafbfc;
|
||||
border: 1px dashed var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.cookie-list {
|
||||
max-height: 320px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.cookie-row {
|
||||
padding: 0.35rem 0;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,657 @@
|
||||
<template>
|
||||
<div class="page-cloud">
|
||||
<ToastMessage :visible="toast.show" :message="toast.msg" :is-error="toast.isError" />
|
||||
|
||||
<div class="cloud-workspace">
|
||||
<header class="page-head">
|
||||
<h1 class="page-title">扫码提取</h1>
|
||||
<p class="page-desc">使用抖音 App 扫码登录，一键导出 JSON 格式 Cookie</p>
|
||||
</header>
|
||||
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">提取次数</div>
|
||||
<div class="stat-value">{{ stats.total }}</div>
|
||||
</div>
|
||||
<div class="stat-card stat-success">
|
||||
<div class="stat-label">成功</div>
|
||||
<div class="stat-value">{{ stats.success }}</div>
|
||||
</div>
|
||||
<div class="stat-card stat-accent">
|
||||
<div class="stat-label">平均耗时</div>
|
||||
<div class="stat-value">{{ avgTime }}</div>
|
||||
</div>
|
||||
<div class="stat-card stat-muted">
|
||||
<div class="stat-label">成功率</div>
|
||||
<div class="stat-value">{{ successRate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-panel">
|
||||
<div class="status-top">
|
||||
<span class="status-badge" :class="'status-badge--' + sessionStatus">
|
||||
<span class="status-dot" :class="'status-dot--' + sessionStatus"></span>
|
||||
{{ statusLabel }}
|
||||
<span v-if="isLiveSession" class="live-tag">
|
||||
<span class="live-pulse"></span>实时
|
||||
</span>
|
||||
</span>
|
||||
<span class="status-time" :title="lastRefreshTitle">{{ lastRefreshText }}</span>
|
||||
</div>
|
||||
<p class="status-msg">{{ statusText }}</p>
|
||||
</div>
|
||||
|
||||
<div class="info-strip info-strip--primary">
|
||||
通过抖音官方 SSO HTTP 接口获取二维码，无需启动浏览器。若提示 IP 被拦截，请配置住宅代理 API 后重试。
|
||||
</div>
|
||||
|
||||
<div class="work-grid">
|
||||
<section class="work-main card">
|
||||
<div class="action-row">
|
||||
<button type="button" class="btn btn-primary btn-lg" :disabled="loading" @click="startQR">
|
||||
{{ loading ? '启动中…' : '获取二维码' }}
|
||||
</button>
|
||||
<button type="button" class="btn" title="重置会话" :disabled="loading" @click="resetSession">
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="qrImage" class="qr-block">
|
||||
<div class="qr-frame" :class="{ scanning }">
|
||||
<img class="qr-img" :src="qrImage" alt="登录二维码" />
|
||||
</div>
|
||||
<span class="badge" :class="badgeClass">{{ badgeText }}</span>
|
||||
<a class="qr-dl" href="/qrcode.png" target="_blank" rel="noopener">下载二维码图片</a>
|
||||
</div>
|
||||
|
||||
<div v-if="apiMode" class="api-mode-tag">接口模式：{{ apiMode }}</div>
|
||||
|
||||
<div v-if="cookies" class="cookie-block">
|
||||
<div class="cookie-head">
|
||||
<h3 class="col-title">Cookie 结果</h3>
|
||||
<button type="button" class="btn btn-sm" :class="copied ? 'btn-soft' : 'btn-primary'" @click="copyCookies">
|
||||
{{ copied ? '已复制' : '复制 JSON' }}
|
||||
</button>
|
||||
</div>
|
||||
<pre class="cookie-pre">{{ cookieJson }}</pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="work-side card">
|
||||
<h3 class="col-title">使用说明</h3>
|
||||
<ol class="steps-list">
|
||||
<li>点击「获取二维码」（HTTP 接口）</li>
|
||||
<li>用抖音 App 扫描页面二维码</li>
|
||||
<li>手机确认登录</li>
|
||||
<li>页面自动轮询并完成 Cookie 导出</li>
|
||||
</ol>
|
||||
|
||||
<h3 class="col-title side-gap">代理配置</h3>
|
||||
<p class="field-label">代理 API（选填）</p>
|
||||
<input v-model="proxyApi" class="inp full" placeholder="https://api.example.com/proxy" autocomplete="off" />
|
||||
<p class="proxy-hint">{{ proxyApi ? '已配置自定义代理' : '当前：服务器默认 IP' }}</p>
|
||||
<button type="button" class="btn btn-soft full" :disabled="testingProxy" @click="testProxy">
|
||||
{{ testingProxy ? '测试中…' : '测试代理' }}
|
||||
</button>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { get, post, formatApiError } from '../api/http.js'
|
||||
import { useLivePoll } from '../composables/useLivePoll.js'
|
||||
import ToastMessage from '../components/ToastMessage.vue'
|
||||
|
||||
const ACTIVE_SESSION = new Set(['loading', 'qr_ready', 'scanning'])
|
||||
|
||||
const loading = ref(false)
|
||||
const scanning = ref(false)
|
||||
const qrImage = ref('')
|
||||
const cookies = ref(null)
|
||||
const copied = ref(false)
|
||||
const proxyApi = ref('')
|
||||
const testingProxy = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const stats = reactive({
|
||||
total: parseInt(localStorage.getItem('ck_total') || '0', 10),
|
||||
success: parseInt(localStorage.getItem('ck_ok') || '0', 10),
|
||||
totalTime: parseInt(localStorage.getItem('ck_time') || '0', 10),
|
||||
})
|
||||
|
||||
const toast = reactive({ show: false, msg: '', isError: false })
|
||||
let toastTimer = null
|
||||
|
||||
const sessionId = ref('')
|
||||
const sessionStatus = ref('idle')
|
||||
const sessionMsg = ref('')
|
||||
const nickname = ref('')
|
||||
let startTime = 0
|
||||
const cookieCount = ref(0)
|
||||
const loginMatched = ref(0)
|
||||
const loginKeysFound = ref([])
|
||||
const apiMode = ref('')
|
||||
|
||||
const now = ref(Date.now())
|
||||
let clockTimer = null
|
||||
|
||||
const isLiveSession = computed(() => ACTIVE_SESSION.has(sessionStatus.value))
|
||||
|
||||
const livePoll = useLivePoll(liveTick, () => (isLiveSession.value ? 1000 : 3000))
|
||||
|
||||
const lastRefreshText = computed(() => {
|
||||
if (!livePoll.lastTickAt.value) return now.value && new Date(now.value).toLocaleTimeString()
|
||||
const sec = Math.max(0, Math.floor((now.value - livePoll.lastTickAt.value) / 1000))
|
||||
if (sec === 0) return '刚刚更新'
|
||||
if (sec < 60) return `${sec}s 前更新`
|
||||
return new Date(livePoll.lastTickAt.value).toLocaleTimeString()
|
||||
})
|
||||
|
||||
const lastRefreshTitle = computed(() => {
|
||||
if (!livePoll.lastTickAt.value) return '等待首次刷新'
|
||||
return `上次刷新: ${new Date(livePoll.lastTickAt.value).toLocaleString()}`
|
||||
})
|
||||
|
||||
const statusLabel = computed(() => {
|
||||
const m = {
|
||||
idle: '就绪',
|
||||
loading: '启动中',
|
||||
scanning: '扫码中',
|
||||
qr_ready: '二维码已就绪',
|
||||
success: '成功',
|
||||
error: '错误',
|
||||
}
|
||||
return m[sessionStatus.value] || '就绪'
|
||||
})
|
||||
|
||||
const statusText = computed(() => {
|
||||
if (error.value) return error.value
|
||||
if (nickname.value && sessionStatus.value === 'success') {
|
||||
return `${nickname.value}，登录成功！`
|
||||
}
|
||||
if (sessionStatus.value === 'scanning') {
|
||||
const keys = loginKeysFound.value.length ? ` [${loginKeysFound.value.join(', ')}]` : ''
|
||||
return `已在手机扫码，等待确认… Cookie ${cookieCount.value} 个，登录匹配 ${loginMatched.value}${keys}`
|
||||
}
|
||||
if (sessionStatus.value === 'qr_ready') {
|
||||
return '请使用抖音 App 扫描二维码'
|
||||
}
|
||||
return sessionMsg.value || '点击「获取二维码」开始'
|
||||
})
|
||||
|
||||
const avgTime = computed(() => {
|
||||
if (stats.success === 0) return '—'
|
||||
return `${Math.round(stats.totalTime / stats.success)}s`
|
||||
})
|
||||
|
||||
const successRate = computed(() => {
|
||||
if (stats.total === 0) return '0%'
|
||||
return `${Math.round((stats.success / stats.total) * 100)}%`
|
||||
})
|
||||
|
||||
const cookieJson = computed(() => (cookies.value ? JSON.stringify(cookies.value, null, 2) : ''))
|
||||
|
||||
const badgeText = computed(() => {
|
||||
if (cookies.value) return '登录成功'
|
||||
if (sessionStatus.value === 'scanning') return '等待手机确认'
|
||||
if (sessionStatus.value === 'qr_ready') return '请使用抖音扫码'
|
||||
return '请获取二维码'
|
||||
})
|
||||
|
||||
const badgeClass = computed(() => {
|
||||
if (cookies.value) return 'badge-ok'
|
||||
if (sessionStatus.value === 'scanning') return 'badge-info'
|
||||
return 'badge-info'
|
||||
})
|
||||
|
||||
function showToast(msg, isErr = false) {
|
||||
toast.msg = msg
|
||||
toast.isError = isErr
|
||||
toast.show = true
|
||||
clearTimeout(toastTimer)
|
||||
toastTimer = setTimeout(() => {
|
||||
toast.show = false
|
||||
}, 4000)
|
||||
}
|
||||
|
||||
function saveStats() {
|
||||
localStorage.setItem('ck_total', String(stats.total))
|
||||
localStorage.setItem('ck_ok', String(stats.success))
|
||||
localStorage.setItem('ck_time', String(stats.totalTime))
|
||||
}
|
||||
|
||||
async function liveTick() {
|
||||
await pollStatus()
|
||||
if (ACTIVE_SESSION.has(sessionStatus.value) || sessionId.value) {
|
||||
await checkLogin()
|
||||
}
|
||||
}
|
||||
|
||||
function applyPollMeta(data) {
|
||||
if (data.api_mode) apiMode.value = data.api_mode
|
||||
}
|
||||
|
||||
async function pollStatus() {
|
||||
try {
|
||||
const data = await get('/api/status')
|
||||
sessionMsg.value = data.message || ''
|
||||
applyPollMeta(data)
|
||||
if (data.status === 'error') {
|
||||
error.value = data.message || ''
|
||||
sessionStatus.value = 'error'
|
||||
} else if (data.status === 'success') {
|
||||
sessionStatus.value = 'success'
|
||||
}
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
|
||||
async function checkLogin() {
|
||||
try {
|
||||
const params = sessionId.value ? { session_id: sessionId.value } : {}
|
||||
const data = await get('/api/check_login', params)
|
||||
|
||||
if (data.status === 'success') {
|
||||
sessionStatus.value = 'success'
|
||||
nickname.value = data.nickname || '用户'
|
||||
cookies.value = data.cookies
|
||||
scanning.value = false
|
||||
loading.value = false
|
||||
const elapsed = Math.round((Date.now() - startTime) / 1000)
|
||||
showToast(`${nickname.value}，登录成功！耗时 ${elapsed}s`)
|
||||
stats.success++
|
||||
stats.totalTime += elapsed
|
||||
saveStats()
|
||||
} else if (data.status === 'error') {
|
||||
sessionStatus.value = 'error'
|
||||
error.value = data.message || ''
|
||||
scanning.value = false
|
||||
loading.value = false
|
||||
showToast(data.message || '登录失败', true)
|
||||
} else if (data.status === 'qr_ready') {
|
||||
sessionStatus.value = 'qr_ready'
|
||||
scanning.value = false
|
||||
cookieCount.value = data.cookie_count || 0
|
||||
loginMatched.value = data.login_matched || 0
|
||||
} else if (data.status === 'scanning') {
|
||||
sessionStatus.value = 'scanning'
|
||||
cookieCount.value = data.cookie_count || 0
|
||||
loginMatched.value = data.login_matched || 0
|
||||
loginKeysFound.value = data.login_keys_found || []
|
||||
scanning.value = true
|
||||
} else if (data.status === 'idle') {
|
||||
showToast('会话已过期，请重新获取二维码', true)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('checkLogin', e)
|
||||
}
|
||||
}
|
||||
|
||||
async function startQR() {
|
||||
try {
|
||||
const status = await get('/api/status')
|
||||
if (status.status === 'loading' || status.status === 'scanning') {
|
||||
showToast('已有任务正在执行', true)
|
||||
return
|
||||
}
|
||||
} catch {
|
||||
/* continue */
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
scanning.value = false
|
||||
qrImage.value = ''
|
||||
cookies.value = null
|
||||
error.value = ''
|
||||
apiMode.value = ''
|
||||
sessionStatus.value = 'loading'
|
||||
startTime = Date.now()
|
||||
stats.total++
|
||||
saveStats()
|
||||
|
||||
try {
|
||||
const data = await post('/api/start_qr', { proxy_api: proxyApi.value.trim() })
|
||||
if (data.status === 'qr_ready') {
|
||||
qrImage.value = data.qr_image
|
||||
sessionId.value = data.session_id || ''
|
||||
sessionStatus.value = 'qr_ready'
|
||||
apiMode.value = data.api_mode || ''
|
||||
loading.value = false
|
||||
nickname.value = ''
|
||||
if (data.message) showToast(data.message)
|
||||
livePoll.restart()
|
||||
} else {
|
||||
error.value = data.message || '获取二维码失败'
|
||||
sessionStatus.value = 'error'
|
||||
loading.value = false
|
||||
showToast(data.message || '获取二维码失败', true)
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = '连接服务器失败'
|
||||
sessionStatus.value = 'error'
|
||||
loading.value = false
|
||||
showToast(formatApiError(e, '无法连接服务器'), true)
|
||||
}
|
||||
}
|
||||
|
||||
async function resetSession() {
|
||||
try {
|
||||
await post('/api/reset')
|
||||
sessionId.value = ''
|
||||
sessionStatus.value = 'idle'
|
||||
sessionMsg.value = '会话已重置'
|
||||
nickname.value = ''
|
||||
qrImage.value = ''
|
||||
cookies.value = null
|
||||
scanning.value = false
|
||||
loading.value = false
|
||||
error.value = ''
|
||||
apiMode.value = ''
|
||||
showToast('已重置')
|
||||
} catch (e) {
|
||||
showToast(formatApiError(e, '重置失败'), true)
|
||||
}
|
||||
}
|
||||
|
||||
async function testProxy() {
|
||||
const url = proxyApi.value.trim()
|
||||
if (!url) {
|
||||
showToast('请先输入代理 API', true)
|
||||
return
|
||||
}
|
||||
testingProxy.value = true
|
||||
try {
|
||||
const data = await post('/api/test_proxy', { proxy_api: url })
|
||||
if (data.status === 'success') {
|
||||
showToast(`代理可用，IP: ${data.ip || 'ok'}`)
|
||||
} else {
|
||||
showToast(data.message || '代理失败', true)
|
||||
}
|
||||
} catch (e) {
|
||||
showToast(formatApiError(e, '网络错误'), true)
|
||||
} finally {
|
||||
testingProxy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function copyCookies() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(cookieJson.value)
|
||||
copied.value = true
|
||||
showToast('已复制到剪贴板')
|
||||
setTimeout(() => {
|
||||
copied.value = false
|
||||
}, 2000)
|
||||
} catch {
|
||||
showToast('复制失败', true)
|
||||
}
|
||||
}
|
||||
|
||||
function onGlobalRefresh() {
|
||||
livePoll.runTick()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
livePoll.start()
|
||||
clockTimer = setInterval(() => {
|
||||
now.value = Date.now()
|
||||
}, 1000)
|
||||
window.addEventListener('douyin-refresh-all', onGlobalRefresh)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
livePoll.stop()
|
||||
if (clockTimer) clearInterval(clockTimer)
|
||||
clearTimeout(toastTimer)
|
||||
window.removeEventListener('douyin-refresh-all', onGlobalRefresh)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
margin: 0.35rem 0 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
background: #fafafa;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.75rem 0.85rem;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.status-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
.status-dot--loading {
|
||||
background: var(--warn);
|
||||
animation: pulse 1.4s infinite;
|
||||
}
|
||||
|
||||
.status-dot--scanning,
|
||||
.status-dot--qr_ready {
|
||||
background: var(--primary);
|
||||
animation: pulse 1.4s infinite;
|
||||
}
|
||||
|
||||
.status-dot--success {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.status-dot--error {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.45;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.status-time {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.live-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
margin-left: 0.35rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
color: var(--success);
|
||||
background: var(--success-bg);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.live-pulse {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--success);
|
||||
animation: pulse 1.2s infinite;
|
||||
}
|
||||
|
||||
.status-msg {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.work-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 240px;
|
||||
gap: 0.65rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.work-main,
|
||||
.work-side {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
flex: 1;
|
||||
min-height: 2.5rem;
|
||||
}
|
||||
|
||||
.qr-block {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
background: #fafbfc;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.qr-frame {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0.5rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.qr-img {
|
||||
display: block;
|
||||
width: 220px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.qr-dl {
|
||||
display: inline-block;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.api-mode-tag {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.steps-list {
|
||||
margin: 0 0 1rem;
|
||||
padding-left: 1.2rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.side-gap {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.cookie-block {
|
||||
border-top: 1px solid var(--border-light);
|
||||
padding-top: 0.85rem;
|
||||
}
|
||||
|
||||
.cookie-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.col-title {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
.cookie-pre {
|
||||
margin: 0;
|
||||
padding: 0.75rem;
|
||||
background: #1a1a1a;
|
||||
color: #e8e8e8;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.inp.full {
|
||||
width: 100%;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.proxy-hint {
|
||||
font-size: 0.78rem;
|
||||
color: var(--muted);
|
||||
margin: 0.35rem 0 0.65rem;
|
||||
}
|
||||
|
||||
.work-side .full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 899px) {
|
||||
.work-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.qr-img {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
emptyOutDir: true,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
vue: ['vue', 'vue-router'],
|
||||
http: ['axios'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
server: {
|
||||
host: true,
|
||||
port: 5173,
|
||||
strictPort: false,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://127.0.0.1:5001',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/qrcode.png': {
|
||||
target: 'http://127.0.0.1:5001',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user