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>
|
<template>
|
||||||
<head>
|
<NuxtLayout>
|
||||||
<title>爱拓工具箱</title>
|
|
||||||
</head>
|
|
||||||
<div>
|
|
||||||
<NuxtPage />
|
<NuxtPage />
|
||||||
</div>
|
</NuxtLayout>
|
||||||
</template>
|
</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
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
compatibilityDate: '2024-11-01',
|
compatibilityDate: '2024-11-01',
|
||||||
devtools: { enabled: true },
|
devtools: { enabled: false },
|
||||||
|
ssr: true,
|
||||||
nitro: {
|
nitro: {
|
||||||
prerender: {
|
prerender: {
|
||||||
autoSubfolderIndex: false
|
autoSubfolderIndex: false,
|
||||||
|
routes: [
|
||||||
|
'/',
|
||||||
|
'/alipan-tv-token'
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
experimental: {
|
experimental: {
|
||||||
@ -16,6 +21,9 @@ export default defineNuxtConfig({
|
|||||||
],
|
],
|
||||||
|
|
||||||
routeRules: {
|
routeRules: {
|
||||||
|
'/': { prerender: true },
|
||||||
|
'/alipan-tv-token': { prerender: false },
|
||||||
|
'/api/**': { cors: true }
|
||||||
},
|
},
|
||||||
|
|
||||||
antd: {
|
antd: {
|
||||||
|
|||||||
@ -1,5 +1,8 @@
|
|||||||
<template>
|
<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="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">
|
<div class="flex justify-between items-center mb-6">
|
||||||
@ -82,8 +85,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
|
|
||||||
<a-modal v-model:open="isNoticeOpen" title="使用说明" @ok="closeNotice" :maskClosable="false" :closable="false"
|
<a-modal v-model:open="isNoticeOpen" title="使用说明" @ok="closeNotice" :maskClosable="false" :closable="false"
|
||||||
:keyboard="false">
|
:keyboard="false">
|
||||||
<p>本工具能帮助你一键获取「阿里云盘TV版」的刷新令牌，完全免费。TV接口能绕过三方应用权益包的速率限制，但前提你得是SVIP。</p>
|
<p>本工具能帮助你一键获取「阿里云盘TV版」的刷新令牌，完全免费。TV接口能绕过三方应用权益包的速率限制，但前提你得是SVIP。</p>
|
||||||
@ -94,7 +96,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
import ClipboardJS from 'clipboard'
|
import ClipboardJS from 'clipboard'
|
||||||
|
|
||||||
@ -108,6 +110,9 @@ const isNoticeOpen = ref(false)
|
|||||||
const accessToken = ref('')
|
const accessToken = ref('')
|
||||||
const refreshToken = ref('')
|
const refreshToken = ref('')
|
||||||
|
|
||||||
|
const checkTimer = ref(null)
|
||||||
|
const isComponentMounted = ref(true)
|
||||||
|
|
||||||
async function generateAuthUrl() {
|
async function generateAuthUrl() {
|
||||||
try {
|
try {
|
||||||
isLoading.value = true
|
isLoading.value = true
|
||||||
@ -124,6 +129,8 @@ function closeNotice() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function checkStatus(sid) {
|
async function checkStatus(sid) {
|
||||||
|
if (!isComponentMounted.value) return
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const data = await $fetch("/api/alipan-tv-token/check_status/" + sid)
|
const data = await $fetch("/api/alipan-tv-token/check_status/" + sid)
|
||||||
if (data.status === "LoginSuccess") {
|
if (data.status === "LoginSuccess") {
|
||||||
@ -134,14 +141,14 @@ async function checkStatus(sid) {
|
|||||||
hasRefreshToken.value = !!data.refresh_token
|
hasRefreshToken.value = !!data.refresh_token
|
||||||
message.success('登录成功')
|
message.success('登录成功')
|
||||||
initializeClipboard() // 在 token 设置后初始化 ClipboardJS
|
initializeClipboard() // 在 token 设置后初始化 ClipboardJS
|
||||||
} else if (data.status === "ScanSuccess") {
|
} else if (data.status === "ScanSuccess" && isComponentMounted.value) {
|
||||||
setTimeout(() => checkStatus(sid), 2000)
|
checkTimer.value = setTimeout(() => checkStatus(sid), 2000)
|
||||||
} else if (data.status === "LoginFailed") {
|
} else if (data.status === "LoginFailed") {
|
||||||
message.error('登录失败，请刷新页面重试')
|
message.error('登录失败，请刷新页面重试')
|
||||||
} else if (data.status === "QRCodeExpired") {
|
} else if (data.status === "QRCodeExpired") {
|
||||||
message.error('链接过期，请刷新页面重试')
|
message.error('链接过期，请刷新页面重试')
|
||||||
} else {
|
} else if (isComponentMounted.value) {
|
||||||
setTimeout(() => checkStatus(sid), 2000)
|
checkTimer.value = setTimeout(() => checkStatus(sid), 2000)
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("检查状态时出错：", error)
|
console.error("检查状态时出错：", error)
|
||||||
@ -181,6 +188,12 @@ onMounted(() => {
|
|||||||
hasGenerated.value = true
|
hasGenerated.value = true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
isComponentMounted.value = false
|
||||||
|
if (checkTimer.value) {
|
||||||
|
clearTimeout(checkTimer.value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,64 +1,29 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-12 px-4 flex flex-col">
|
<head>
|
||||||
<div class="max-w-4xl mx-auto flex-grow">
|
<title>爱拓工具箱</title>
|
||||||
<div class="text-center mb-12">
|
</head>
|
||||||
<h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-blue-400">
|
<main class="max-h-screen bg-gray-100 p-4">
|
||||||
爱拓工具箱
|
<div class="mx-auto w-full max-w-3xl mb-8">
|
||||||
</h1>
|
<div class="space-y-4">
|
||||||
</div>
|
<NuxtLink to="/alipan-tv-token" class="block">
|
||||||
|
<a-card hoverable>
|
||||||
<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>
|
|
||||||
<template #title>
|
<template #title>
|
||||||
<div class="flex items-center space-x-2 mb-4">
|
<h2 class="text-xl font-medium text-gray-800">阿里云盘TV授权</h2>
|
||||||
<span class="text-xl font-medium">阿里云盘TV授权</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<template #description>
|
<p class="text-gray-600">获取阿里云盘TV端的授权令牌</p>
|
||||||
<div class="mt-4 flex flex-col justify-between h-full">
|
</a-card>
|
||||||
<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>
|
</NuxtLink>
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-card-meta>
|
|
||||||
</a-card>
|
|
||||||
|
|
||||||
<a-card hoverable class="transform transition-all duration-300 hover:-translate-y-1 hover:shadow-lg min-h-[200px]">
|
<a-card hoverable>
|
||||||
<a-card-meta>
|
|
||||||
<template #title>
|
<template #title>
|
||||||
<div class="flex items-center space-x-2">
|
<h2 class="text-xl font-medium text-gray-400">敬请期待</h2>
|
||||||
<span class="text-lg font-medium text-gray-400">敬请期待</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<template #description>
|
|
||||||
<div class="mt-4">
|
|
||||||
<p class="text-gray-400">更多工具正在开发中...</p>
|
<p class="text-gray-400">更多工具正在开发中...</p>
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-card-meta>
|
|
||||||
</a-card>
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</main>
|
||||||
<!-- 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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user