mirror of
https://github.com/iLay1678/i-tools.git
synced 2025-05-23 19:17:42 +08:00
布局调整
This commit is contained in:
我若为王
parent
502074f2dd
commit
a415b06f16
7
app.vue
7
app.vue
@ -1,8 +1,5 @@
|
||||
<template>
|
||||
<head>
|
||||
<title>爱拓工具箱</title>
|
||||
</head>
|
||||
<div>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</div>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
66
layouts/default.vue
Normal file
66
layouts/default.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<a-layout class="layout">
|
||||
<a-layout-header class="header">
|
||||
<div class="header-content max-w-3xl mx-auto px-4 flex items-center">
|
||||
<NuxtLink to="/" class="logo">
|
||||
<a-typography-title :level="4" class="!mb-0 !text-white">爱拓工具箱</a-typography-title>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
|
||||
<a-layout-content class="site-layout-content">
|
||||
<div class="max-w-3xl mx-auto w-full">
|
||||
<slot />
|
||||
</div>
|
||||
</a-layout-content>
|
||||
|
||||
<a-layout-footer style="text-align: center">
|
||||
<a-typography-link href="https://github.com/iLay1678/i-tools" target="_blank">
|
||||
<template #icon>
|
||||
<GithubOutlined />
|
||||
</template>
|
||||
GitHub
|
||||
</a-typography-link>
|
||||
</a-layout-footer>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { GithubOutlined } from '@ant-design/icons-vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
float: left;
|
||||
height: 31px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.site-layout-content {
|
||||
padding: 0 24px;
|
||||
margin-top: 64px;
|
||||
min-height: calc(100vh - 64px - 70px);
|
||||
}
|
||||
|
||||
:deep(.ant-layout-header) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-menu) {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,10 +1,15 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: '2024-11-01',
|
||||
devtools: { enabled: true },
|
||||
devtools: { enabled: false },
|
||||
ssr: true,
|
||||
nitro: {
|
||||
prerender: {
|
||||
autoSubfolderIndex: false
|
||||
autoSubfolderIndex: false,
|
||||
routes: [
|
||||
'/',
|
||||
'/alipan-tv-token'
|
||||
]
|
||||
}
|
||||
},
|
||||
experimental: {
|
||||
@ -16,6 +21,9 @@ export default defineNuxtConfig({
|
||||
],
|
||||
|
||||
routeRules: {
|
||||
'/': { prerender: true },
|
||||
'/alipan-tv-token': { prerender: false },
|
||||
'/api/**': { cors: true }
|
||||
},
|
||||
|
||||
antd: {
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<main class="min-h-screen bg-gray-100 p-4">
|
||||
<head>
|
||||
<title>与「阿里云盘」连接</title>
|
||||
</head>
|
||||
<div class="p-4">
|
||||
<!-- 主体部分 -->
|
||||
<div class="mx-auto w-full max-w-3xl bg-white shadow-lg rounded-lg p-8 mb-8">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
@ -82,8 +85,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
<a-modal v-model:open="isNoticeOpen" title="使用说明" @ok="closeNotice" :maskClosable="false" :closable="false"
|
||||
:keyboard="false">
|
||||
<p>本工具能帮助你一键获取「阿里云盘TV版」的刷新令牌，完全免费。TV接口能绕过三方应用权益包的速率限制，但前提你得是SVIP。</p>
|
||||
@ -94,7 +96,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import ClipboardJS from 'clipboard'
|
||||
|
||||
@ -108,6 +110,9 @@ const isNoticeOpen = ref(false)
|
||||
const accessToken = ref('')
|
||||
const refreshToken = ref('')
|
||||
|
||||
const checkTimer = ref(null)
|
||||
const isComponentMounted = ref(true)
|
||||
|
||||
async function generateAuthUrl() {
|
||||
try {
|
||||
isLoading.value = true
|
||||
@ -124,6 +129,8 @@ function closeNotice() {
|
||||
}
|
||||
|
||||
async function checkStatus(sid) {
|
||||
if (!isComponentMounted.value) return
|
||||
|
||||
try {
|
||||
const data = await $fetch("/api/alipan-tv-token/check_status/" + sid)
|
||||
if (data.status === "LoginSuccess") {
|
||||
@ -134,14 +141,14 @@ async function checkStatus(sid) {
|
||||
hasRefreshToken.value = !!data.refresh_token
|
||||
message.success('登录成功')
|
||||
initializeClipboard() // 在 token 设置后初始化 ClipboardJS
|
||||
} else if (data.status === "ScanSuccess") {
|
||||
setTimeout(() => checkStatus(sid), 2000)
|
||||
} else if (data.status === "ScanSuccess" && isComponentMounted.value) {
|
||||
checkTimer.value = setTimeout(() => checkStatus(sid), 2000)
|
||||
} else if (data.status === "LoginFailed") {
|
||||
message.error('登录失败，请刷新页面重试')
|
||||
} else if (data.status === "QRCodeExpired") {
|
||||
message.error('链接过期，请刷新页面重试')
|
||||
} else {
|
||||
setTimeout(() => checkStatus(sid), 2000)
|
||||
} else if (isComponentMounted.value) {
|
||||
checkTimer.value = setTimeout(() => checkStatus(sid), 2000)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("检查状态时出错：", error)
|
||||
@ -181,6 +188,12 @@ onMounted(() => {
|
||||
hasGenerated.value = true
|
||||
}
|
||||
})
|
||||
onUnmounted(() => {
|
||||
isComponentMounted.value = false
|
||||
if (checkTimer.value) {
|
||||
clearTimeout(checkTimer.value)
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,64 +1,29 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-12 px-4 flex flex-col">
|
||||
<div class="max-w-4xl mx-auto flex-grow">
|
||||
<div class="text-center mb-12">
|
||||
<h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-400">
|
||||
爱拓工具箱
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 px-4">
|
||||
<a-card hoverable class="transform transition-all duration-300 hover:-translate-y-1 hover:shadow-lg min-h-[200px]">
|
||||
<a-card-meta>
|
||||
<head>
|
||||
<title>爱拓工具箱</title>
|
||||
</head>
|
||||
<main class="max-h-screen bg-gray-100 p-4">
|
||||
<div class="mx-auto w-full max-w-3xl mb-8">
|
||||
<div class="space-y-4">
|
||||
<NuxtLink to="/alipan-tv-token" class="block">
|
||||
<a-card hoverable>
|
||||
<template #title>
|
||||
<div class="flex items-center space-x-2 mb-4">
|
||||
<span class="text-xl font-medium">阿里云盘TV授权</span>
|
||||
</div>
|
||||
<h2 class="text-xl font-medium text-gray-800">阿里云盘TV授权</h2>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="mt-4 flex flex-col justify-between h-full">
|
||||
<p class="text-gray-600 mb-8 text-base">获取阿里云盘TV端的授权令牌</p>
|
||||
<NuxtLink to="/alipan-tv-token" target="_blank"
|
||||
class="inline-block px-8 py-2.5 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg hover:from-blue-600 hover:to-blue-700 transition-all shadow-sm">
|
||||
立即使用
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</template>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
<p class="text-gray-600">获取阿里云盘TV端的授权令牌</p>
|
||||
</a-card>
|
||||
</NuxtLink>
|
||||
|
||||
<a-card hoverable class="transform transition-all duration-300 hover:-translate-y-1 hover:shadow-lg min-h-[200px]">
|
||||
<a-card-meta>
|
||||
<template #title>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-lg font-medium text-gray-400">敬请期待</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="mt-4">
|
||||
<p class="text-gray-400">更多工具正在开发中...</p>
|
||||
</div>
|
||||
</template>
|
||||
</a-card-meta>
|
||||
<a-card hoverable>
|
||||
<template #title>
|
||||
<h2 class="text-xl font-medium text-gray-400">敬请期待</h2>
|
||||
</template>
|
||||
<p class="text-gray-400">更多工具正在开发中...</p>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- GitHub 链接放在页面最底部 -->
|
||||
<div class="max-w-4xl mx-auto w-full mt-12">
|
||||
<div class="text-center border-t pt-6">
|
||||
<a href="https://github.com/iLay1678/i-tools"
|
||||
target="_blank"
|
||||
class="inline-flex items-center space-x-2 text-gray-500 hover:text-gray-700 transition-colors">
|
||||
<svg height="20" width="20" viewBox="0 0 16 16" class="fill-current">
|
||||
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user