congsh/gamegroup2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: congsh/gamegroup2:6895fd05be902a55b591ded08816b52931c82359
Branches Tags
congsh/gamegroup2:master congsh/gamegroup2:uat congsh/gamegroup2:eletron
..
compare: congsh/gamegroup2:4dd15dceabad5eafe21970151b1edb0c18f9c224
Branches Tags
congsh/gamegroup2:uat congsh/gamegroup2:eletron congsh/gamegroup2:master

2 Commits
6895fd05be .. 4dd15dceab

Author SHA1 Message Date
congsh 4dd15dceab fix: collection name mismatch, login/register navigation, and connection config 
- Fix teamSessions → team_sessions to match PocketBase collection name
- Replace <a @click> with <router-link> in Login and Register views
- Update PocketBase default URL and vite proxy target
- Comment out docker-compose user directive for permission fix

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-04-17 19:28:53 +08:00
congsh c5d5484f9e feat: switch to light green + deep purple theme, fix input colors 
- Primary: emerald green (#059669), accent: deep purple (#7c3aed)
- Light backgrounds: #f0fdf4 page, #ffffff cards
- Login/Register: light gradient bg, white card, Element Plus inputs
- NotFound: matching light theme
- All pages follow via CSS variables

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