Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 congsh
|
4dd15dceab | ||
|
congsh
|
c5d5484f9e |
@@ -4,7 +4,7 @@ services:
|
||||
pocketbase:
|
||||
image: ghcr.io/muchobien/pocketbase:0.22.4
|
||||
container_name: gamegroup-pb
|
||||
user: "${PB_UID:-1000}:${PB_GID:-1000}"
|
||||
# user: "${PB_UID:-1000}:${PB_GID:-1000}"
|
||||
ports:
|
||||
- "${PB_PORT:-8711}:8090"
|
||||
volumes:
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// src/api/pocketbase.ts
|
||||
import PocketBase from 'pocketbase'
|
||||
|
||||
const pbUrl = import.meta.env.VITE_PB_URL || '/api'
|
||||
const pbUrl = import.meta.env.VITE_PB_URL || 'http://localhost:8090'
|
||||
|
||||
export const pb = new PocketBase(pbUrl)
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ export async function createTeamSession(data: {
|
||||
gameName: string
|
||||
members: string[]
|
||||
}): Promise<TeamSession> {
|
||||
return pb.collection('teamSessions').create({
|
||||
return pb.collection('team_sessions').create({
|
||||
...data,
|
||||
status: 'recruiting'
|
||||
}) as unknown as TeamSession
|
||||
@@ -20,7 +20,7 @@ export async function getActiveTeamSession(): Promise<TeamSession | null> {
|
||||
const user = pb.authStore.model
|
||||
if (!user) return null
|
||||
|
||||
const result = await pb.collection('teamSessions').getList(1, 1, {
|
||||
const result = await pb.collection('team_sessions').getList(1, 1, {
|
||||
filter: `members ~ "${user.id}" && status != "dissolved" && status != "finished"`,
|
||||
sort: '-created'
|
||||
})
|
||||
@@ -30,7 +30,7 @@ export async function getActiveTeamSession(): Promise<TeamSession | null> {
|
||||
|
||||
// 获取群组的临时小组列表
|
||||
export async function getGroupTeamSessions(groupId: string): Promise<TeamSession[]> {
|
||||
const result = await pb.collection('teamSessions').getList(1, 20, {
|
||||
const result = await pb.collection('team_sessions').getList(1, 20, {
|
||||
filter: `sourceGroup="${groupId}"`,
|
||||
sort: '-created'
|
||||
})
|
||||
@@ -46,7 +46,7 @@ export async function updateTeamStatus(sessionId: string, status: TeamStatus): P
|
||||
updateData.dissolvedAt = new Date().toISOString()
|
||||
}
|
||||
|
||||
return pb.collection('teamSessions').update(sessionId, updateData) as unknown as TeamSession
|
||||
return pb.collection('team_sessions').update(sessionId, updateData) as unknown as TeamSession
|
||||
}
|
||||
|
||||
// 结束游戏（解散临时小组）
|
||||
@@ -59,21 +59,21 @@ export async function joinTeamSession(sessionId: string) {
|
||||
const user = pb.authStore.model
|
||||
if (!user) throw new Error('未登录')
|
||||
|
||||
const session = await pb.collection('teamSessions').getOne(sessionId) as { members: string[] }
|
||||
const session = await pb.collection('team_sessions').getOne(sessionId) as { members: string[] }
|
||||
const members = session.members as string[]
|
||||
|
||||
if (members.includes(user.id)) {
|
||||
throw new Error('已在小组中')
|
||||
}
|
||||
|
||||
return pb.collection('teamSessions').update(sessionId, {
|
||||
return pb.collection('team_sessions').update(sessionId, {
|
||||
members: [...members, user.id]
|
||||
})
|
||||
}
|
||||
|
||||
// 订阅临时小组变更
|
||||
export function subscribeTeamSession(sessionId: string, callback: (session: TeamSession) => void) {
|
||||
return pb.collection('teamSessions').subscribe('*', (payload) => {
|
||||
return pb.collection('team_sessions').subscribe('*', (payload) => {
|
||||
if (payload.record.id === sessionId) {
|
||||
callback(payload.record as unknown as TeamSession)
|
||||
}
|
||||
|
||||
@@ -1,28 +1,30 @@
|
||||
:root {
|
||||
/* 主色调 */
|
||||
--gg-primary: #6366f1;
|
||||
--gg-primary-light: #818cf8;
|
||||
--gg-primary-dark: #4f46e5;
|
||||
--gg-accent: #a855f7;
|
||||
--gg-accent-light: #c084fc;
|
||||
/* 主色调：微绿 */
|
||||
--gg-primary: #059669;
|
||||
--gg-primary-light: #10b981;
|
||||
--gg-primary-dark: #047857;
|
||||
|
||||
/* 背景色 */
|
||||
--gg-bg: #0f172a;
|
||||
--gg-bg-card: #1e293b;
|
||||
--gg-bg-elevated: #334155;
|
||||
--gg-bg-hover: #334155;
|
||||
/* 辅助色：深紫 */
|
||||
--gg-accent: #7c3aed;
|
||||
--gg-accent-light: #8b5cf6;
|
||||
|
||||
/* 背景色（亮色） */
|
||||
--gg-bg: #f0fdf4;
|
||||
--gg-bg-card: #ffffff;
|
||||
--gg-bg-elevated: #f1f5f9;
|
||||
--gg-bg-hover: #e2e8f0;
|
||||
|
||||
/* 文字色 */
|
||||
--gg-text: #f1f5f9;
|
||||
--gg-text-secondary: #94a3b8;
|
||||
--gg-text-muted: #64748b;
|
||||
--gg-text: #1e293b;
|
||||
--gg-text-secondary: #475569;
|
||||
--gg-text-muted: #94a3b8;
|
||||
|
||||
/* 边框 */
|
||||
--gg-border: #334155;
|
||||
--gg-border-light: #475569;
|
||||
--gg-border: #e2e8f0;
|
||||
--gg-border-light: #cbd5e1;
|
||||
|
||||
/* 状态色 */
|
||||
--gg-success: #22c55e;
|
||||
--gg-success: #10b981;
|
||||
--gg-danger: #ef4444;
|
||||
--gg-warning: #f59e0b;
|
||||
--gg-info: #3b82f6;
|
||||
@@ -34,50 +36,51 @@
|
||||
--gg-radius-xl: 20px;
|
||||
|
||||
/* 阴影 */
|
||||
--gg-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||
--gg-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
|
||||
--gg-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
--gg-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* 渐变 */
|
||||
--gg-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
|
||||
--gg-gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
|
||||
--gg-gradient: linear-gradient(135deg, #059669 0%, #7c3aed 100%);
|
||||
--gg-gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
--gg-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
--gg-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
|
||||
/* ── Element Plus 覆盖 ── */
|
||||
--el-color-primary: #6366f1;
|
||||
--el-color-primary-light-3: #818cf8;
|
||||
--el-color-primary-light-5: #a5b4fc;
|
||||
--el-color-primary-light-7: #c7d2fe;
|
||||
--el-color-primary-light-9: #312e81;
|
||||
--el-color-primary-dark-2: #4f46e5;
|
||||
--el-color-primary: #059669;
|
||||
--el-color-primary-light-3: #10b981;
|
||||
--el-color-primary-light-5: #34d399;
|
||||
--el-color-primary-light-7: #6ee7b7;
|
||||
--el-color-primary-light-9: #ecfdf5;
|
||||
--el-color-primary-dark-2: #047857;
|
||||
|
||||
--el-color-success: #22c55e;
|
||||
--el-color-success: #10b981;
|
||||
--el-color-warning: #f59e0b;
|
||||
--el-color-danger: #ef4444;
|
||||
--el-color-info: #64748b;
|
||||
|
||||
--el-bg-color: #1e293b;
|
||||
--el-bg-color-page: #0f172a;
|
||||
--el-bg-color-overlay: #1e293b;
|
||||
--el-bg-color: #ffffff;
|
||||
--el-bg-color-page: #f0fdf4;
|
||||
--el-bg-color-overlay: #ffffff;
|
||||
|
||||
--el-text-color-primary: #f1f5f9;
|
||||
--el-text-color-regular: #e2e8f0;
|
||||
--el-text-color-secondary: #94a3b8;
|
||||
--el-text-color-placeholder: #64748b;
|
||||
--el-text-color-primary: #1e293b;
|
||||
--el-text-color-regular: #334155;
|
||||
--el-text-color-secondary: #64748b;
|
||||
--el-text-color-placeholder: #94a3b8;
|
||||
|
||||
--el-border-color: #334155;
|
||||
--el-border-color-light: #475569;
|
||||
--el-border-color-lighter: #334155;
|
||||
--el-border-color-extra-light: #1e293b;
|
||||
--el-border-color: #e2e8f0;
|
||||
--el-border-color-light: #f1f5f9;
|
||||
--el-border-color-lighter: #f8fafc;
|
||||
--el-border-color-extra-light: #f0fdf4;
|
||||
|
||||
--el-fill-color: #334155;
|
||||
--el-fill-color-light: #1e293b;
|
||||
--el-fill-color-lighter: #0f172a;
|
||||
--el-fill-color-extra-light: #1e293b;
|
||||
--el-fill-color-blank: #1e293b;
|
||||
--el-fill-color-dark: #475569;
|
||||
--el-fill-color: #f1f5f9;
|
||||
--el-fill-color-light: #f8fafc;
|
||||
--el-fill-color-lighter: #ffffff;
|
||||
--el-fill-color-extra-light: #f0fdf4;
|
||||
--el-fill-color-blank: #ffffff;
|
||||
--el-fill-color-dark: #e2e8f0;
|
||||
|
||||
--el-mask-color: rgba(0, 0, 0, 0.6);
|
||||
--el-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
|
||||
--el-mask-color: rgba(0, 0, 0, 0.4);
|
||||
--el-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* ── 全局基础 ── */
|
||||
@@ -95,7 +98,7 @@ body {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--gg-primary-light);
|
||||
color: var(--gg-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -132,7 +135,7 @@ a:hover {
|
||||
|
||||
/* Input */
|
||||
.el-input__wrapper {
|
||||
background: var(--gg-bg) !important;
|
||||
background: #ffffff !important;
|
||||
box-shadow: 0 0 0 1px var(--gg-border) inset !important;
|
||||
border-radius: var(--gg-radius-sm) !important;
|
||||
}
|
||||
@@ -149,7 +152,7 @@ a:hover {
|
||||
color: var(--gg-text-muted) !important;
|
||||
}
|
||||
.el-textarea__inner {
|
||||
background: var(--gg-bg) !important;
|
||||
background: #ffffff !important;
|
||||
color: var(--gg-text) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
}
|
||||
@@ -160,6 +163,7 @@ a:hover {
|
||||
border-color: var(--gg-border) !important;
|
||||
border-radius: var(--gg-radius-md) !important;
|
||||
padding: 6px !important;
|
||||
box-shadow: var(--gg-shadow-lg) !important;
|
||||
}
|
||||
.el-dropdown-menu__item {
|
||||
color: var(--gg-text) !important;
|
||||
@@ -168,7 +172,7 @@ a:hover {
|
||||
}
|
||||
.el-dropdown-menu__item:hover {
|
||||
background: var(--gg-bg-hover) !important;
|
||||
color: var(--gg-primary-light) !important;
|
||||
color: var(--gg-primary) !important;
|
||||
}
|
||||
.el-dropdown-menu__item--divided::before {
|
||||
background: var(--gg-border) !important;
|
||||
@@ -190,7 +194,7 @@ a:hover {
|
||||
|
||||
/* Button */
|
||||
.el-button--primary {
|
||||
background: var(--gg-gradient) !important;
|
||||
background: var(--gg-gradient-green) !important;
|
||||
border: none !important;
|
||||
border-radius: var(--gg-radius-sm) !important;
|
||||
}
|
||||
@@ -198,14 +202,14 @@ a:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.el-button--default {
|
||||
background: var(--gg-bg-elevated) !important;
|
||||
background: var(--gg-bg-card) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
color: var(--gg-text) !important;
|
||||
border-radius: var(--gg-radius-sm) !important;
|
||||
}
|
||||
.el-button--default:hover {
|
||||
border-color: var(--gg-primary) !important;
|
||||
color: var(--gg-primary-light) !important;
|
||||
color: var(--gg-primary) !important;
|
||||
}
|
||||
|
||||
/* Badge */
|
||||
@@ -224,6 +228,7 @@ a:hover {
|
||||
background: var(--gg-bg-card) !important;
|
||||
border-color: var(--gg-border) !important;
|
||||
border-radius: var(--gg-radius-md) !important;
|
||||
box-shadow: var(--gg-shadow-lg) !important;
|
||||
}
|
||||
.el-message__content {
|
||||
color: var(--gg-text) !important;
|
||||
@@ -232,14 +237,14 @@ a:hover {
|
||||
/* Pagination */
|
||||
.el-pagination {
|
||||
--el-pagination-button-bg-color: var(--gg-bg-elevated);
|
||||
--el-pagination-hover-color: var(--gg-primary-light);
|
||||
--el-pagination-hover-color: var(--gg-primary);
|
||||
}
|
||||
.el-pager li {
|
||||
background: var(--gg-bg-elevated) !important;
|
||||
color: var(--gg-text-secondary) !important;
|
||||
}
|
||||
.el-pager li.is-active {
|
||||
background: var(--gg-gradient) !important;
|
||||
background: var(--gg-gradient-green) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
@@ -256,7 +261,7 @@ a:hover {
|
||||
background: var(--gg-bg-hover) !important;
|
||||
}
|
||||
.el-select-dropdown__item.selected {
|
||||
color: var(--gg-primary-light) !important;
|
||||
color: var(--gg-primary) !important;
|
||||
}
|
||||
|
||||
/* Checkbox */
|
||||
@@ -287,7 +292,7 @@ a:hover {
|
||||
|
||||
/* Loading */
|
||||
.el-loading-mask {
|
||||
background: rgba(15, 23, 42, 0.8) !important;
|
||||
background: rgba(240, 253, 244, 0.8) !important;
|
||||
}
|
||||
|
||||
/* ── 工具类 ── */
|
||||
@@ -296,7 +301,7 @@ a:hover {
|
||||
}
|
||||
|
||||
.gg-glow {
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
|
||||
box-shadow: 0 0 20px rgba(5, 150, 105, 0.2);
|
||||
}
|
||||
|
||||
.gg-card {
|
||||
@@ -309,7 +314,7 @@ a:hover {
|
||||
|
||||
.gg-card:hover {
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
|
||||
box-shadow: 0 0 20px rgba(5, 150, 105, 0.1);
|
||||
}
|
||||
|
||||
.gg-text-gradient {
|
||||
|
||||
@@ -50,7 +50,7 @@ export function useRealtime() {
|
||||
const session = teamStore.currentSession
|
||||
if (!session) return
|
||||
|
||||
const unsub = await pb.collection('teamSessions').subscribe('*', (payload) => {
|
||||
const unsub = await pb.collection('team_sessions').subscribe('*', (payload) => {
|
||||
if (payload.record.id === session.id) {
|
||||
// 更新临时小组状态
|
||||
teamStore.loadActiveSession()
|
||||
|
||||
@@ -214,8 +214,8 @@ function goHome() {
|
||||
}
|
||||
|
||||
.nav-item--active {
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: var(--gg-primary-light);
|
||||
background: rgba(5, 150, 105, 0.1);
|
||||
color: var(--gg-primary);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
@@ -295,7 +295,7 @@ function goHome() {
|
||||
}
|
||||
|
||||
.group-item--active {
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
background: rgba(5, 150, 105, 0.1);
|
||||
border-left: 3px solid var(--gg-primary);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
<!-- src/views/Login.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import PasswordInput from '@/components/common/PasswordInput.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const email = ref('')
|
||||
@@ -24,7 +23,7 @@ async function handleLogin() {
|
||||
loading.value = true
|
||||
await userStore.login(email.value, password.value)
|
||||
|
||||
const redirect = route.query.redirect as string || '/'
|
||||
const redirect = '/'
|
||||
router.push(redirect)
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '登录失败')
|
||||
@@ -32,18 +31,10 @@ async function handleLogin() {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goToRegister() {
|
||||
router.push({ name: 'Register', query: route.query })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<!-- CSS 星星背景 -->
|
||||
<div class="stars" aria-hidden="true"></div>
|
||||
<div class="stars stars--sm" aria-hidden="true"></div>
|
||||
|
||||
<div class="login-card">
|
||||
<div class="card-header">
|
||||
<h1 class="brand">
|
||||
@@ -55,7 +46,7 @@ function goToRegister() {
|
||||
<form class="login-form" @submit.prevent="handleLogin">
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<input
|
||||
<el-input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
@@ -81,78 +72,34 @@ function goToRegister() {
|
||||
</form>
|
||||
|
||||
<div class="footer-links">
|
||||
<span>还没有账号？</span>
|
||||
<a @click="goToRegister">立即注册</a>
|
||||
还没有账号？
|
||||
<router-link :to="{ name: 'Register', query: $route.query }">立即注册</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ── 深空背景 ── */
|
||||
.login-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 30%, #f5f3ff 100%);
|
||||
}
|
||||
|
||||
/* ── CSS 星星 ── */
|
||||
.stars {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7) 50%, transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.5) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
|
||||
radial-gradient(1.2px 1.2px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 50%, transparent 100%);
|
||||
animation: twinkle 4s ease-in-out infinite alternate;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stars--sm {
|
||||
background-image:
|
||||
radial-gradient(0.8px 0.8px at 5% 50%, rgba(255,255,255,0.4) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 20% 10%, rgba(255,255,255,0.3) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 45% 70%, rgba(255,255,255,0.35) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 60% 25%, rgba(255,255,255,0.3) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 78% 85%, rgba(255,255,255,0.4) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 95% 55%, rgba(255,255,255,0.3) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 35% 95%, rgba(255,255,255,0.35) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 65% 5%, rgba(255,255,255,0.3) 50%, transparent 100%);
|
||||
animation: twinkle 6s ease-in-out 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% { opacity: 0.6; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── 毛玻璃卡片 ── */
|
||||
/* ── 卡片 ── */
|
||||
.login-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 48px 40px 40px;
|
||||
background: rgba(30, 41, 59, 0.55);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-xl);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 8px 40px rgba(5, 150, 105, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* ── 头部品牌 ── */
|
||||
@@ -202,26 +149,6 @@ function goToRegister() {
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 12px 16px;
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
color: var(--gg-text);
|
||||
font-size: 14px;
|
||||
transition: border-color 0.25s, box-shadow 0.25s;
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
/* ── 提交按钮 ── */
|
||||
.submit-btn {
|
||||
position: relative;
|
||||
@@ -229,7 +156,7 @@ function goToRegister() {
|
||||
margin-top: 4px;
|
||||
border: none;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-gradient);
|
||||
background: var(--gg-gradient-green);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
@@ -238,7 +165,7 @@ function goToRegister() {
|
||||
}
|
||||
|
||||
.submit-btn:hover:not(:disabled) {
|
||||
box-shadow: 0 0 24px rgba(99, 102, 241, 0.45), 0 0 8px rgba(168, 85, 247, 0.3);
|
||||
box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -276,7 +203,7 @@ function goToRegister() {
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--gg-primary-light);
|
||||
color: var(--gg-accent);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
margin-left: 4px;
|
||||
@@ -284,6 +211,6 @@ function goToRegister() {
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--gg-accent-light);
|
||||
color: var(--gg-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,67 +11,32 @@ function goHome() {
|
||||
|
||||
<template>
|
||||
<div class="not-found">
|
||||
<!-- CSS 星星背景 -->
|
||||
<div class="stars" aria-hidden="true"></div>
|
||||
|
||||
<div class="content">
|
||||
<div class="error-code">404</div>
|
||||
<h1 class="error-title">迷失在星域之中</h1>
|
||||
<p class="error-desc">你访问的页面已消失在浩瀚宇宙中，或许它从未存在过。</p>
|
||||
<h1 class="error-title">页面走丢了</h1>
|
||||
<p class="error-desc">你访问的页面不存在，可能已被移动或删除。</p>
|
||||
<button class="home-btn" @click="goHome">
|
||||
<span class="btn-icon">➤</span>
|
||||
返回基地
|
||||
返回首页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ── 深空背景 ── */
|
||||
.not-found {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 30%, #f5f3ff 100%);
|
||||
}
|
||||
|
||||
/* ── CSS 星星 ── */
|
||||
.stars {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7) 50%, transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.5) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
|
||||
radial-gradient(1.2px 1.2px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 50%, transparent 100%);
|
||||
animation: twinkle 4s ease-in-out infinite alternate;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% { opacity: 0.6; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── 内容区 ── */
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
/* ── 404 数字 ── */
|
||||
.error-code {
|
||||
font-size: 140px;
|
||||
font-weight: 900;
|
||||
@@ -81,18 +46,10 @@ function goHome() {
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: none;
|
||||
filter: drop-shadow(0 0 40px rgba(99, 102, 241, 0.35));
|
||||
animation: pulse-glow 3s ease-in-out infinite alternate;
|
||||
filter: drop-shadow(0 0 30px rgba(5, 150, 105, 0.2));
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0% { filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.25)); }
|
||||
100% { filter: drop-shadow(0 0 50px rgba(168, 85, 247, 0.4)); }
|
||||
}
|
||||
|
||||
/* ── 标题 ── */
|
||||
.error-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
@@ -100,7 +57,6 @@ function goHome() {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
/* ── 描述文字 ── */
|
||||
.error-desc {
|
||||
font-size: 15px;
|
||||
color: var(--gg-text-secondary);
|
||||
@@ -108,7 +64,6 @@ function goHome() {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ── 返回按钮 ── */
|
||||
.home-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -116,7 +71,7 @@ function goHome() {
|
||||
padding: 14px 36px;
|
||||
border: none;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-gradient);
|
||||
background: var(--gg-gradient-green);
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
@@ -125,16 +80,11 @@ function goHome() {
|
||||
}
|
||||
|
||||
.home-btn:hover {
|
||||
box-shadow: 0 0 24px rgba(99, 102, 241, 0.45), 0 0 8px rgba(168, 85, 247, 0.3);
|
||||
box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.home-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 16px;
|
||||
display: inline-flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -48,18 +48,10 @@ async function handleRegister() {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goToLogin() {
|
||||
router.push({ name: 'Login' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="register-page">
|
||||
<!-- CSS 星星背景 -->
|
||||
<div class="stars" aria-hidden="true"></div>
|
||||
<div class="stars stars--sm" aria-hidden="true"></div>
|
||||
|
||||
<div class="register-card">
|
||||
<div class="card-header">
|
||||
<h1 class="brand">
|
||||
@@ -71,10 +63,9 @@ function goToLogin() {
|
||||
<form class="register-form" @submit.prevent="handleRegister">
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<input
|
||||
<el-input
|
||||
id="username"
|
||||
v-model="username"
|
||||
type="text"
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
/>
|
||||
@@ -82,7 +73,7 @@ function goToLogin() {
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<input
|
||||
<el-input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
@@ -118,78 +109,34 @@ function goToLogin() {
|
||||
</form>
|
||||
|
||||
<div class="footer-links">
|
||||
<span>已有账号？</span>
|
||||
<a @click="goToLogin">立即登录</a>
|
||||
已有账号？
|
||||
<router-link :to="{ name: 'Login' }">立即登录</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ── 深空背景 ── */
|
||||
.register-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 24px;
|
||||
background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 30%, #f5f3ff 100%);
|
||||
}
|
||||
|
||||
/* ── CSS 星星 ── */
|
||||
.stars {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 50% 10%, rgba(255,255,255,0.9) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.5) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.7) 50%, transparent 100%),
|
||||
radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,0.5) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 92% 15%, rgba(255,255,255,0.7) 50%, transparent 100%),
|
||||
radial-gradient(1.2px 1.2px at 40% 45%, rgba(255,255,255,0.6) 50%, transparent 100%),
|
||||
radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.4) 50%, transparent 100%);
|
||||
animation: twinkle 4s ease-in-out infinite alternate;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stars--sm {
|
||||
background-image:
|
||||
radial-gradient(0.8px 0.8px at 5% 50%, rgba(255,255,255,0.4) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 20% 10%, rgba(255,255,255,0.3) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 45% 70%, rgba(255,255,255,0.35) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 60% 25%, rgba(255,255,255,0.3) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 78% 85%, rgba(255,255,255,0.4) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 95% 55%, rgba(255,255,255,0.3) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 35% 95%, rgba(255,255,255,0.35) 50%, transparent 100%),
|
||||
radial-gradient(0.8px 0.8px at 65% 5%, rgba(255,255,255,0.3) 50%, transparent 100%);
|
||||
animation: twinkle 6s ease-in-out 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% { opacity: 0.6; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── 毛玻璃卡片 ── */
|
||||
/* ── 卡片 ── */
|
||||
.register-card {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 44px 40px 40px;
|
||||
background: rgba(30, 41, 59, 0.55);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-xl);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 8px 40px rgba(5, 150, 105, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* ── 头部品牌 ── */
|
||||
@@ -239,26 +186,6 @@ function goToLogin() {
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 12px 16px;
|
||||
background: var(--gg-bg);
|
||||
border: 1px solid var(--gg-border);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
color: var(--gg-text);
|
||||
font-size: 14px;
|
||||
transition: border-color 0.25s, box-shadow 0.25s;
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--gg-primary);
|
||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
|
||||
}
|
||||
|
||||
/* ── 提交按钮 ── */
|
||||
.submit-btn {
|
||||
position: relative;
|
||||
@@ -266,7 +193,7 @@ function goToLogin() {
|
||||
margin-top: 4px;
|
||||
border: none;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
background: var(--gg-gradient);
|
||||
background: var(--gg-gradient-green);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
@@ -275,7 +202,7 @@ function goToLogin() {
|
||||
}
|
||||
|
||||
.submit-btn:hover:not(:disabled) {
|
||||
box-shadow: 0 0 24px rgba(99, 102, 241, 0.45), 0 0 8px rgba(168, 85, 247, 0.3);
|
||||
box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -313,7 +240,7 @@ function goToLogin() {
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--gg-primary-light);
|
||||
color: var(--gg-accent);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
margin-left: 4px;
|
||||
@@ -321,6 +248,6 @@ function goToLogin() {
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--gg-accent-light);
|
||||
color: var(--gg-primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,7 +13,7 @@ export default defineConfig({
|
||||
port: Number(process.env.VITE_PORT) || 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: process.env.VITE_PB_URL || 'http://192.168.1.14:8711',
|
||||
target: process.env.VITE_PB_URL || 'http://localhost:8090',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user