refactor: 更新 logo 图标并调整布局
- 将 logo 图标从 logo.png 更改为 xiaoyugan.png -调整了多个组件的布局结构 - 更新了部分样式，如按钮、文本等
This commit is contained in:
steve
@@ -5,13 +5,13 @@
|
||||
<div class="nav-container">
|
||||
<div class="nav-brand">
|
||||
<img
|
||||
src="/icons/logo.png"
|
||||
src="/icons/xiaoyugan.png"
|
||||
alt="XYZW"
|
||||
class="brand-logo"
|
||||
>
|
||||
<span class="brand-text">XYZW 控制台</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="nav-menu">
|
||||
<router-link
|
||||
to="/dashboard"
|
||||
@@ -62,15 +62,15 @@
|
||||
<span>个人设置</span>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="nav-user">
|
||||
<n-dropdown
|
||||
:options="userMenuOptions"
|
||||
@select="handleUserAction"
|
||||
>
|
||||
<div class="user-info">
|
||||
<n-avatar
|
||||
size="medium"
|
||||
<n-avatar
|
||||
size="medium"
|
||||
fallback-src="/icons/xiaoyugan.png"
|
||||
/>
|
||||
<span class="username">{{ tokenStore.selectedToken?.name || '未选择Token' }}</span>
|
||||
@@ -92,14 +92,14 @@
|
||||
<p>今天是 {{ currentDate }}，继续您的游戏管理之旅吧</p>
|
||||
</div>
|
||||
<div class="welcome-actions">
|
||||
<n-button
|
||||
type="primary"
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="router.push('/game-features')"
|
||||
>
|
||||
进入游戏功能
|
||||
</n-button>
|
||||
<n-button
|
||||
<n-button
|
||||
size="large"
|
||||
@click="router.push('/tokens')"
|
||||
>
|
||||
@@ -147,7 +147,7 @@
|
||||
快速操作
|
||||
</h2>
|
||||
<div class="actions-grid">
|
||||
<div
|
||||
<div
|
||||
v-for="action in quickActions"
|
||||
:key="action.id"
|
||||
class="action-card"
|
||||
@@ -178,12 +178,12 @@
|
||||
刷新
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
v-if="recentActivities.length"
|
||||
class="activity-list"
|
||||
>
|
||||
<div
|
||||
<div
|
||||
v-for="activity in recentActivities"
|
||||
:key="activity.id"
|
||||
class="activity-item"
|
||||
@@ -204,7 +204,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="empty-activity"
|
||||
@@ -222,10 +222,10 @@ import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useMessage } from 'naive-ui'
|
||||
import { useTokenStore } from '@/stores/tokenStore'
|
||||
import {
|
||||
Home,
|
||||
PersonCircle,
|
||||
Cube,
|
||||
import {
|
||||
Home,
|
||||
PersonCircle,
|
||||
Cube,
|
||||
Settings,
|
||||
ChevronDown,
|
||||
Ribbon,
|
||||
@@ -428,7 +428,7 @@ const formatTime = (timestamp) => {
|
||||
const minutes = Math.floor(diff / (1000 * 60))
|
||||
const hours = Math.floor(diff / (1000 * 60 * 60))
|
||||
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
||||
|
||||
|
||||
if (days > 0) {
|
||||
return `${days}天前`
|
||||
} else if (hours > 0) {
|
||||
@@ -512,12 +512,12 @@ onMounted(async () => {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: all var(--transition-fast);
|
||||
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
background: var(--primary-color-light);
|
||||
color: var(--primary-color);
|
||||
@@ -536,7 +536,7 @@ onMounted(async () => {
|
||||
border-radius: var(--border-radius-medium);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
@@ -579,7 +579,7 @@ onMounted(async () => {
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
font-size: var(--font-size-lg);
|
||||
opacity: 0.9;
|
||||
@@ -609,7 +609,7 @@ onMounted(async () => {
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-light);
|
||||
transition: all var(--transition-normal);
|
||||
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-medium);
|
||||
transform: translateY(-2px);
|
||||
@@ -620,7 +620,7 @@ onMounted(async () => {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: var(--spacing-md);
|
||||
|
||||
|
||||
:deep(svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -643,11 +643,11 @@ onMounted(async () => {
|
||||
.stat-change {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
|
||||
|
||||
&.positive {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
|
||||
&.negative {
|
||||
color: var(--error-color);
|
||||
}
|
||||
@@ -678,7 +678,7 @@ onMounted(async () => {
|
||||
box-shadow: var(--shadow-light);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal);
|
||||
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-medium);
|
||||
transform: translateY(-2px);
|
||||
@@ -690,7 +690,7 @@ onMounted(async () => {
|
||||
height: 40px;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: var(--spacing-md);
|
||||
|
||||
|
||||
:deep(svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -704,7 +704,7 @@ onMounted(async () => {
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
@@ -739,7 +739,7 @@ onMounted(async () => {
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--border-radius-medium);
|
||||
transition: background var(--transition-fast);
|
||||
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
@@ -753,22 +753,22 @@ onMounted(async () => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
|
||||
&.success {
|
||||
background: rgba(24, 160, 88, 0.1);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
|
||||
&.warning {
|
||||
background: rgba(240, 160, 32, 0.1);
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
|
||||
&.info {
|
||||
background: rgba(32, 128, 240, 0.1);
|
||||
color: var(--info-color);
|
||||
}
|
||||
|
||||
|
||||
:deep(svg) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@@ -801,7 +801,7 @@ onMounted(async () => {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
}
|
||||
@@ -811,30 +811,30 @@ onMounted(async () => {
|
||||
.dashboard-main {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
|
||||
.nav-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.welcome-section {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
|
||||
.welcome-text h1 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
|
||||
.welcome-actions {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.actions-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -6,35 +6,35 @@
|
||||
<div class="nav-content">
|
||||
<div class="nav-brand">
|
||||
<img
|
||||
src="/icons/logo.png"
|
||||
src="/icons/xiaoyugan.png"
|
||||
alt="XYZW"
|
||||
class="brand-logo"
|
||||
>
|
||||
<span class="brand-text">XYZW 游戏管理系统</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="nav-actions">
|
||||
<template v-if="!authStore.isAuthenticated">
|
||||
<n-button
|
||||
text
|
||||
type="primary"
|
||||
size="large"
|
||||
<n-button
|
||||
text
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="router.push('/login')"
|
||||
>
|
||||
登录
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="router.push('/register')"
|
||||
>
|
||||
注册
|
||||
</n-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="router.push('/dashboard')"
|
||||
>
|
||||
进入控制台
|
||||
@@ -59,18 +59,18 @@
|
||||
让游戏变得更简单，让管理变得更高效
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
<n-button
|
||||
type="primary"
|
||||
size="large"
|
||||
class="hero-button"
|
||||
@click="router.push(authStore.isAuthenticated ? '/dashboard' : '/register')"
|
||||
>
|
||||
{{ authStore.isAuthenticated ? '进入控制台' : '立即开始' }}
|
||||
</n-button>
|
||||
<n-button
|
||||
text
|
||||
type="primary"
|
||||
size="large"
|
||||
<n-button
|
||||
text
|
||||
type="primary"
|
||||
size="large"
|
||||
class="hero-button"
|
||||
@click="scrollToFeatures"
|
||||
>
|
||||
@@ -78,7 +78,7 @@
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="hero-visual">
|
||||
<div class="feature-cards">
|
||||
<div
|
||||
@@ -114,11 +114,11 @@
|
||||
为您提供全方位的游戏管理解决方案
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="features-grid">
|
||||
<div
|
||||
v-for="feature in features"
|
||||
:key="feature.id"
|
||||
<div
|
||||
v-for="feature in features"
|
||||
:key="feature.id"
|
||||
class="feature-item"
|
||||
>
|
||||
<div class="feature-icon">
|
||||
@@ -162,7 +162,7 @@
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<img
|
||||
src="/icons/logo.png"
|
||||
src="/icons/xiaoyugan.png"
|
||||
alt="XYZW"
|
||||
class="footer-logo"
|
||||
>
|
||||
@@ -199,12 +199,12 @@
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import {
|
||||
PersonCircle,
|
||||
Cube,
|
||||
Ribbon,
|
||||
Home,
|
||||
Settings
|
||||
import {
|
||||
PersonCircle,
|
||||
Cube,
|
||||
Ribbon,
|
||||
Home,
|
||||
Settings
|
||||
} from '@vicons/ionicons5'
|
||||
|
||||
const router = useRouter()
|
||||
@@ -272,8 +272,8 @@ const stats = ref([
|
||||
// 滚动到功能区域
|
||||
const scrollToFeatures = () => {
|
||||
if (featuresSection.value) {
|
||||
featuresSection.value.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
featuresSection.value.scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -399,7 +399,7 @@ onMounted(() => {
|
||||
border-radius: var(--border-radius-large);
|
||||
padding: var(--spacing-lg);
|
||||
transition: all var(--transition-normal);
|
||||
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
@@ -411,7 +411,7 @@ onMounted(() => {
|
||||
height: 48px;
|
||||
color: #fff;
|
||||
margin-bottom: var(--spacing-md);
|
||||
|
||||
|
||||
:deep(svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -468,7 +468,7 @@ onMounted(() => {
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--border-radius-large);
|
||||
transition: all var(--transition-normal);
|
||||
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-heavy);
|
||||
@@ -480,7 +480,7 @@ onMounted(() => {
|
||||
height: 64px;
|
||||
margin: 0 auto var(--spacing-lg);
|
||||
color: var(--primary-color);
|
||||
|
||||
|
||||
:deep(svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -564,7 +564,7 @@ onMounted(() => {
|
||||
.footer-link {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
transition: color var(--transition-fast);
|
||||
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
@@ -583,23 +583,23 @@ onMounted(() => {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
|
||||
.hero-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
|
||||
.nav-actions {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="card-header">
|
||||
<div class="brand">
|
||||
<img
|
||||
src="/icons/logo.png"
|
||||
src="/icons/xiaoyugan.png"
|
||||
alt="XYZW"
|
||||
class="brand-logo"
|
||||
>
|
||||
@@ -87,8 +87,8 @@
|
||||
</n-divider>
|
||||
|
||||
<div class="social-login">
|
||||
<n-button
|
||||
size="large"
|
||||
<n-button
|
||||
size="large"
|
||||
class="social-button"
|
||||
@click="handleSocialLogin('qq')"
|
||||
>
|
||||
@@ -99,9 +99,9 @@
|
||||
</template>
|
||||
QQ登录
|
||||
</n-button>
|
||||
|
||||
<n-button
|
||||
size="large"
|
||||
|
||||
<n-button
|
||||
size="large"
|
||||
class="social-button"
|
||||
@click="handleSocialLogin('wechat')"
|
||||
>
|
||||
@@ -133,7 +133,7 @@
|
||||
<h2>为什么选择 XYZW？</h2>
|
||||
<p>专业的游戏管理平台，让游戏变得更轻松</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="features-list">
|
||||
<div
|
||||
v-for="feature in features"
|
||||
@@ -237,7 +237,7 @@ const handleLogin = async () => {
|
||||
|
||||
try {
|
||||
await loginFormRef.value.validate()
|
||||
|
||||
|
||||
const result = await authStore.login({
|
||||
username: loginForm.username,
|
||||
password: loginForm.password,
|
||||
@@ -246,7 +246,7 @@ const handleLogin = async () => {
|
||||
|
||||
if (result.success) {
|
||||
message.success('登录成功')
|
||||
|
||||
|
||||
// 跳转到dashboard或之前访问的页面
|
||||
const redirect = router.currentRoute.value.query.redirect || '/dashboard'
|
||||
router.push(redirect)
|
||||
@@ -370,7 +370,7 @@ onMounted(() => {
|
||||
.social-button {
|
||||
height: 44px;
|
||||
border: 1px solid var(--border-light);
|
||||
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
@@ -379,7 +379,7 @@ onMounted(() => {
|
||||
.register-prompt {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
|
||||
|
||||
span {
|
||||
margin-right: var(--spacing-sm);
|
||||
}
|
||||
@@ -394,13 +394,13 @@ onMounted(() => {
|
||||
.showcase-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
font-size: var(--font-size-lg);
|
||||
opacity: 0.9;
|
||||
@@ -423,7 +423,7 @@ onMounted(() => {
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all var(--transition-normal);
|
||||
|
||||
|
||||
&:hover {
|
||||
transform: translateX(8px);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
@@ -435,7 +435,7 @@ onMounted(() => {
|
||||
height: 48px;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
|
||||
|
||||
:deep(svg) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -444,13 +444,13 @@ onMounted(() => {
|
||||
|
||||
.feature-content {
|
||||
flex: 1;
|
||||
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
opacity: 0.8;
|
||||
line-height: var(--line-height-relaxed);
|
||||
@@ -515,11 +515,11 @@ onMounted(() => {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
|
||||
.features-showcase {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
|
||||
.showcase-header h2 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
@@ -529,26 +529,26 @@ onMounted(() => {
|
||||
.login-container {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
|
||||
.login-card {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
|
||||
.brand-title {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
|
||||
.social-login {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.feature-item {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.decoration-circle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="card-header">
|
||||
<div class="brand">
|
||||
<img
|
||||
src="/icons/logo.png"
|
||||
src="/icons/xiaoyugan.png"
|
||||
alt="XYZW"
|
||||
class="brand-logo"
|
||||
>
|
||||
@@ -209,12 +209,12 @@ const handleRegister = async () => {
|
||||
|
||||
try {
|
||||
await registerFormRef.value.validate()
|
||||
|
||||
|
||||
if (!registerForm.agreeTerms) {
|
||||
message.warning('请先同意服务条款和隐私政策')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
const result = await authStore.register({
|
||||
username: registerForm.username,
|
||||
email: registerForm.email,
|
||||
@@ -299,7 +299,7 @@ const handleRegister = async () => {
|
||||
|
||||
.form-options {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
|
||||
|
||||
:deep(.n-checkbox) {
|
||||
line-height: var(--line-height-relaxed);
|
||||
}
|
||||
@@ -315,7 +315,7 @@ const handleRegister = async () => {
|
||||
.login-prompt {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
|
||||
|
||||
span {
|
||||
margin-right: var(--spacing-sm);
|
||||
}
|
||||
@@ -325,9 +325,9 @@ const handleRegister = async () => {
|
||||
.register-card {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
|
||||
.brand-title {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="page-header">
|
||||
<div class="header-content">
|
||||
<img
|
||||
src="/icons/logo.png"
|
||||
src="/icons/xiaoyugan.png"
|
||||
alt="XYZW"
|
||||
class="brand-logo"
|
||||
>
|
||||
@@ -37,7 +37,7 @@
|
||||
</n-alert>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<n-form
|
||||
ref="importFormRef"
|
||||
:model="importForm"
|
||||
@@ -55,7 +55,7 @@
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
|
||||
<n-form-item
|
||||
label="Base64 Token"
|
||||
path="base64Token"
|
||||
@@ -68,7 +68,7 @@
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
|
||||
<!-- 可选信息 -->
|
||||
<n-collapse>
|
||||
<n-collapse-item
|
||||
@@ -82,7 +82,7 @@
|
||||
placeholder="服务器名称"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
|
||||
<n-form-item label="等级">
|
||||
<n-input-number
|
||||
v-model:value="importForm.level"
|
||||
@@ -91,7 +91,7 @@
|
||||
placeholder="角色等级"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
|
||||
<n-form-item label="职业">
|
||||
<n-select
|
||||
v-model:value="importForm.profession"
|
||||
@@ -99,7 +99,7 @@
|
||||
placeholder="选择职业"
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
|
||||
<n-form-item label="WebSocket URL (可选)">
|
||||
<n-input
|
||||
v-model:value="importForm.wsUrl"
|
||||
@@ -114,7 +114,7 @@
|
||||
</div>
|
||||
</n-collapse-item>
|
||||
</n-collapse>
|
||||
|
||||
|
||||
<div class="form-actions">
|
||||
<n-button
|
||||
type="primary"
|
||||
@@ -128,7 +128,7 @@
|
||||
</template>
|
||||
导入Token
|
||||
</n-button>
|
||||
|
||||
|
||||
<n-button
|
||||
v-if="tokenStore.hasTokens"
|
||||
size="large"
|
||||
@@ -160,7 +160,7 @@
|
||||
</template>
|
||||
添加Token
|
||||
</n-button>
|
||||
|
||||
|
||||
<n-dropdown
|
||||
:options="bulkOptions"
|
||||
@select="handleBulkAction"
|
||||
@@ -174,13 +174,13 @@
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tokens-grid">
|
||||
<div
|
||||
v-for="token in tokenStore.gameTokens"
|
||||
:key="token.id"
|
||||
class="token-card"
|
||||
:class="{
|
||||
:class="{
|
||||
active: token.id === tokenStore.selectedTokenId,
|
||||
connected: getConnectionStatus(token.id) === 'connected'
|
||||
}"
|
||||
@@ -206,7 +206,7 @@
|
||||
>{{ token.profession }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card-actions">
|
||||
<n-dropdown
|
||||
:options="getTokenActions(token)"
|
||||
@@ -220,24 +220,24 @@
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card-body">
|
||||
<div class="token-display">
|
||||
<span class="token-label">Token:</span>
|
||||
<code class="token-value">{{ maskToken(token.token) }}</code>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="connection-status">
|
||||
<div class="status-indicator">
|
||||
<span
|
||||
class="status-dot"
|
||||
<span
|
||||
class="status-dot"
|
||||
:class="getConnectionStatus(token.id)"
|
||||
/>
|
||||
<span class="status-text">
|
||||
{{ getConnectionStatusText(token.id) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
<n-button
|
||||
size="small"
|
||||
:type="getConnectionStatus(token.id) === 'connected' ? 'warning' : 'primary'"
|
||||
@@ -246,7 +246,7 @@
|
||||
{{ getConnectionStatus(token.id) === 'connected' ? '断开' : '连接' }}
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="token-timestamps">
|
||||
<div class="timestamp-item">
|
||||
<span class="timestamp-label">创建：</span>
|
||||
@@ -258,7 +258,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
v-if="token.id === tokenStore.selectedTokenId"
|
||||
class="card-footer"
|
||||
@@ -342,7 +342,7 @@
|
||||
<n-input v-model:value="editForm.wsUrl" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
|
||||
<template #footer>
|
||||
<div class="modal-actions">
|
||||
<n-button @click="showEditModal = false">
|
||||
@@ -442,11 +442,11 @@ const bulkOptions = [
|
||||
// 方法
|
||||
const handleImport = async () => {
|
||||
if (!importFormRef.value) return
|
||||
|
||||
|
||||
try {
|
||||
await importFormRef.value.validate()
|
||||
isImporting.value = true
|
||||
|
||||
|
||||
const result = tokenStore.importBase64Token(
|
||||
importForm.name,
|
||||
importForm.base64Token,
|
||||
@@ -457,7 +457,7 @@ const handleImport = async () => {
|
||||
wsUrl: importForm.wsUrl
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
if (result.success) {
|
||||
message.success(result.message)
|
||||
resetImportForm()
|
||||
@@ -503,7 +503,7 @@ const getConnectionStatusText = (tokenId) => {
|
||||
|
||||
const toggleConnection = (token) => {
|
||||
const status = getConnectionStatus(token.id)
|
||||
|
||||
|
||||
if (status === 'connected') {
|
||||
tokenStore.closeWebSocketConnection(token.id)
|
||||
message.info('WebSocket连接已断开')
|
||||
@@ -552,10 +552,10 @@ const editToken = (token) => {
|
||||
|
||||
const saveEdit = async () => {
|
||||
if (!editFormRef.value || !editingToken.value) return
|
||||
|
||||
|
||||
try {
|
||||
await editFormRef.value.validate()
|
||||
|
||||
|
||||
tokenStore.updateToken(editingToken.value.id, {
|
||||
name: editForm.name,
|
||||
server: editForm.server,
|
||||
@@ -563,7 +563,7 @@ const saveEdit = async () => {
|
||||
profession: editForm.profession,
|
||||
wsUrl: editForm.wsUrl
|
||||
})
|
||||
|
||||
|
||||
message.success('Token信息已更新')
|
||||
showEditModal.value = false
|
||||
editingToken.value = null
|
||||
@@ -627,12 +627,12 @@ const exportTokens = () => {
|
||||
const data = tokenStore.exportTokens()
|
||||
const dataStr = JSON.stringify(data, null, 2)
|
||||
const dataBlob = new Blob([dataStr], { type: 'application/json' })
|
||||
|
||||
|
||||
const link = document.createElement('a')
|
||||
link.href = URL.createObjectURL(dataBlob)
|
||||
link.download = `tokens_backup_${new Date().toISOString().split('T')[0]}.json`
|
||||
link.click()
|
||||
|
||||
|
||||
message.success('Token数据已导出')
|
||||
} catch (error) {
|
||||
message.error('导出失败')
|
||||
@@ -709,7 +709,7 @@ const goToDashboard = () => {
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
tokenStore.initTokenStore()
|
||||
|
||||
|
||||
// 如果没有token，显示导入表单
|
||||
if (!tokenStore.hasTokens) {
|
||||
showImportForm.value = true
|
||||
@@ -782,7 +782,7 @@ onMounted(() => {
|
||||
.card-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
|
||||
|
||||
h2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -792,16 +792,16 @@ onMounted(() => {
|
||||
font-size: var(--font-size-xl);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
|
||||
.help-info {
|
||||
margin-top: var(--spacing-md);
|
||||
text-align: left;
|
||||
|
||||
|
||||
code {
|
||||
background: rgba(24, 160, 88, 0.1);
|
||||
color: var(--success-color);
|
||||
@@ -838,7 +838,7 @@ onMounted(() => {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
|
||||
|
||||
h2 {
|
||||
color: var(--text-primary);
|
||||
font-size: var(--font-size-xl);
|
||||
@@ -863,17 +863,17 @@ onMounted(() => {
|
||||
padding: var(--spacing-lg);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-normal);
|
||||
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--shadow-medium);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
|
||||
&.connected {
|
||||
border-left: 4px solid var(--success-color);
|
||||
}
|
||||
@@ -956,15 +956,15 @@ onMounted(() => {
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-tertiary);
|
||||
|
||||
|
||||
&.connected {
|
||||
background: var(--success-color);
|
||||
}
|
||||
|
||||
|
||||
&.connecting {
|
||||
background: var(--warning-color);
|
||||
}
|
||||
|
||||
|
||||
&.error {
|
||||
background: var(--error-color);
|
||||
}
|
||||
@@ -1022,23 +1022,23 @@ onMounted(() => {
|
||||
.container {
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
|
||||
.tokens-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.optional-fields {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
.token-timestamps {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user