feat:更新前端
This commit is contained in:
fangyunong
parent
636e60157e
commit
001fb036d9
@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/logo.jpg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + Vue + TS</title>
|
<title>Vite + Vue + TS</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
BIN
public/logo.jpg
Normal file
BIN
public/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
@ -0,0 +1,4 @@
|
|||||||
|
$primaryColor: #3D8EFF; // 主色保持不变的蓝色
|
||||||
|
$primaryColorHover: #6AA1FF; // 比主色亮20%的浅蓝色
|
||||||
|
$primaryColorPressed: #2B7AEB;// 比主色深10%的深蓝色
|
||||||
|
$primaryColorSuppl: #5A95FF; // 介于主色和hover之间的蓝色
|
||||||
@ -2,7 +2,6 @@
|
|||||||
import { DO_MAIN, CLIENT_ID } from "@/utils/secret";
|
import { DO_MAIN, CLIENT_ID } from "@/utils/secret";
|
||||||
// 样式引入
|
// 样式引入
|
||||||
import "@/assets/styles/reset.scss";
|
import "@/assets/styles/reset.scss";
|
||||||
import "@/assets/styles/variable.scss";
|
|
||||||
import "@/assets/styles/common.scss";
|
import "@/assets/styles/common.scss";
|
||||||
// 引入仓库
|
// 引入仓库
|
||||||
import pinia from "@/store";
|
import pinia from "@/store";
|
||||||
@ -26,7 +25,7 @@ app.use(
|
|||||||
clientId: CLIENT_ID,
|
clientId: CLIENT_ID,
|
||||||
authorizationParams: {
|
authorizationParams: {
|
||||||
redirect_uri: `${window.location.origin}/callback`,
|
redirect_uri: `${window.location.origin}/callback`,
|
||||||
audience: "https://dev-f8lrenkd107vqnti.us.auth0.com/api/v2",
|
audience: "https://AGSSadmin.ASGG.com",
|
||||||
scope: 'read:data', // 请求用户基本信息
|
scope: 'read:data', // 请求用户基本信息
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,28 +1,76 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>这是callback页面 {{ token }}</div>
|
<div class="callback-page">
|
||||||
|
<div class="spotlight18" data-cont="页面准备跳转中...">页面准备跳转中...</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useAuth0 } from '@auth0/auth0-vue';
|
import { useAuth0 } from '@auth0/auth0-vue';
|
||||||
import { useMessage } from 'naive-ui';
|
import { useMessage } from 'naive-ui';
|
||||||
const { getAccessTokenSilently } = useAuth0();
|
const { getAccessTokenSilently } = useAuth0();
|
||||||
const token = ref('');
|
const token = ref('');
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const message = useMessage();
|
const message = useMessage();
|
||||||
const oSomethingWithToken = async () => {
|
const oSomethingWithToken = async () => {
|
||||||
try {
|
try {
|
||||||
token.value = await getAccessTokenSilently();
|
token.value = await getAccessTokenSilently();
|
||||||
|
setTimeout(() => {
|
||||||
message.success('登录成功！');
|
message.success('登录成功！');
|
||||||
router.push('/layout');
|
router.push('/layout');
|
||||||
}catch(error){
|
}, 5000);
|
||||||
router.push('/');
|
} catch (error) {
|
||||||
message.error('错误！');
|
router.push('/');
|
||||||
|
message.error('错误！');
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
onMounted(()=>{
|
onMounted(() => {
|
||||||
oSomethingWithToken();
|
oSomethingWithToken();
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped>
|
||||||
|
.callback-page {
|
||||||
|
background: #d1d1d1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spotlight18 {
|
||||||
|
color: #eaeaea;
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 900;
|
||||||
|
text-transform: uppercase;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spotlight18:before {
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
content: attr(data-cont);
|
||||||
|
color: transparent;
|
||||||
|
background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 30%, #FFCC70 66%, #56e28d 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
animation: spotlight18 8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spotlight18 {
|
||||||
|
0% {
|
||||||
|
clip-path: ellipse(32px 32px at 0 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
clip-path: ellipse(32px 32px at 100% 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
clip-path: ellipse(32px 32px at 0 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,19 +1,294 @@
|
|||||||
<template>
|
<template>
|
||||||
<n-button type="primary" @click="login">登录</n-button>
|
<div class="deepseek-home">
|
||||||
|
<header class="deepseek-home__header">
|
||||||
|
<div class="deepseek-home__logo">
|
||||||
|
<span class="deepseek-home__logo-text">Identity V</span>
|
||||||
|
<span class="deepseek-home__logo-beta">AGS</span>
|
||||||
|
</div>
|
||||||
|
<nav class="deepseek-home__nav">
|
||||||
|
第五人格ASG赛事-陪玩后台管理系统
|
||||||
|
</nav>
|
||||||
|
<div class="deepseek-home__actions">
|
||||||
|
<n-button type="primary" @click="handleLogin">登录</n-button>
|
||||||
|
<n-button @click="handleLogout">注册</n-button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="deepseek-home__main">
|
||||||
|
<section class="deepseek-home__hero">
|
||||||
|
<h1 class="deepseek-home__title">科技赋能数字化管理</h1>
|
||||||
|
<p class="deepseek-home__subtitle">先进的陪玩管理系统，为您提供智能陪玩店体验</p>
|
||||||
|
<div class="deepseek-home__search">
|
||||||
|
<input type="text" placeholder="输入您的问题..." class="deepseek-home__search-input" />
|
||||||
|
<button class="deepseek-home__search-button">
|
||||||
|
<svg class="deepseek-home__search-icon" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<n-button @click="handleLogin">Log out</n-button>
|
<section class="deepseek-home__features">
|
||||||
|
<div class="deepseek-home__feature">
|
||||||
|
<div class="deepseek-home__feature-icon">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path d="M12 3L1 9l11 6 9-4.91V17h2V9M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="deepseek-home__feature-title">稳定系统</h3>
|
||||||
|
<p class="deepseek-home__feature-desc">基于.NET9 + Vue3研发，提供更稳定的系统体验。</p>
|
||||||
|
</div>
|
||||||
|
<div class="deepseek-home__feature">
|
||||||
|
<div class="deepseek-home__feature-icon">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M12 15c1.66 0 3-1.34 3-3V6c0-1.66-1.34-3-3-3S9 4.34 9 6v6c0 1.66 1.34 3 3 3zm5.91-3c-.49 0-.9.36-.98.85C16.52 15.22 14.47 17 12 17s-4.52-1.78-4.93-4.15c-.08-.49-.49-.85-.98-.85-.61 0-1.09.54-1 1.14.49 3 2.89 5.35 5.91 5.78V21c0 .55.45 1 1 1s1-.45 1-1v-2.08c3.02-.43 5.42-2.78 5.91-5.78.1-.6-.39-1.14-1-1.14z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="deepseek-home__feature-title">科技赋能</h3>
|
||||||
|
<p class="deepseek-home__feature-desc">实施动态数据抓取，为您带来更高效的数据管理。</p>
|
||||||
|
</div>
|
||||||
|
<div class="deepseek-home__feature">
|
||||||
|
<div class="deepseek-home__feature-icon">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="deepseek-home__feature-title">融创集群</h3>
|
||||||
|
<p class="deepseek-home__feature-desc">将系统产品与第五人格陪玩产业融合，打造数字化集群统一平台。</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="deepseek-home__footer">
|
||||||
|
<div class="deepseek-home__footer-content">
|
||||||
|
<div class="deepseek-home__footer-links">
|
||||||
|
<a href="#" class="deepseek-home__footer-link">使用条款</a>
|
||||||
|
<a href="#" class="deepseek-home__footer-link">隐私政策</a>
|
||||||
|
<a href="#" class="deepseek-home__footer-link">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="deepseek-home__footer-copyright">
|
||||||
|
© 2025 AvengerS Gaming. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useAuth0 } from '@auth0/auth0-vue';
|
import { useAuth0 } from '@auth0/auth0-vue';
|
||||||
const { loginWithRedirect,logout } = useAuth0();
|
const { loginWithRedirect, logout } = useAuth0();
|
||||||
const login = () => {
|
const handleLogin = () => {
|
||||||
loginWithRedirect();
|
loginWithRedirect();
|
||||||
}
|
}
|
||||||
const handleLogin = () => {
|
const handleLogout = () => {
|
||||||
logout({ logoutParams: { returnTo: window.location.origin } });
|
logout({ logoutParams: { returnTo: window.location.origin } });
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped>
|
||||||
|
.deepseek-home {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||||||
|
color: #333;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
color: #3D8EFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-beta {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nav {
|
||||||
|
display: flex;
|
||||||
|
color:$primaryColor;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
&__main {
|
||||||
|
flex: 1;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hero {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 3rem auto;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subtitle {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__search {
|
||||||
|
display: flex;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:focus-within {
|
||||||
|
border-color: #3D8EFF;
|
||||||
|
box-shadow: 0 2px 15px rgba(61, 142, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-button {
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
background: #3D8EFF;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: darken(#3D8EFF, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__features {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 5rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__feature {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: transform 0.3s, box-shadow 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
background-color: rgba(61, 142, 255, 0.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #3D8EFF;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-desc {
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
padding: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer-content {
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer-link {
|
||||||
|
color: #666;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #3D8EFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer-copyright {
|
||||||
|
color: #999;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -13,6 +13,13 @@ export default defineConfig({
|
|||||||
dirs: ["./src/api"],
|
dirs: ["./src/api"],
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
scss: {
|
||||||
|
additionalData: `@use "@/assets/styles/variable.scss" as *;` // 使用 @use 代替 @import
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user