refactor: 更新 logo 图标并调整布局

- 将 logo 图标从 logo.png 更改为 xiaoyugan.png
-调整了多个组件的布局结构
- 更新了部分样式，如按钮、文本等

package-lock.json

@@ -7,7 +7,7 @@
     "": {
       "name": "xyzw-token-manager",
       "version": "2.0.0",
-      "license": "MIT",
+      "license": "CC-BY-NC-SA-4.0",
       "dependencies": {
         "@vicons/ionicons5": "^0.12.0",
         "@vicons/material": "^0.12.0",

src/views/Dashboard.vue

@@ -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 
+              <n-avatar
-                size="medium" 
+                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 
+              <n-button
-                type="primary" 
+                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 { 
+import {
-  Home, 
+  Home,
-  PersonCircle, 
+  PersonCircle,
-  Cube, 
+  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>

src/views/Home.vue

@@ -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 
+              <n-button
-                text 
+                text
-                type="primary" 
+                type="primary"
-                size="large" 
+                size="large"
                 @click="router.push('/login')"
               >
                 登录
               </n-button>
-              <n-button 
+              <n-button
-                type="primary" 
+                type="primary"
-                size="large" 
+                size="large"
                 @click="router.push('/register')"
               >
                 注册
               </n-button>
             </template>
             <template v-else>
-              <n-button 
+              <n-button
-                type="primary" 
+                type="primary"
-                size="large" 
+                size="large"
                 @click="router.push('/dashboard')"
               >
                 进入控制台
@@ -59,18 +59,18 @@
                 让游戏变得更简单，让管理变得更高效
               </p>
               <div class="hero-actions">
-                <n-button 
+                <n-button
-                  type="primary" 
+                  type="primary"
-                  size="large" 
+                  size="large"
                   class="hero-button"
                   @click="router.push(authStore.isAuthenticated ? '/dashboard' : '/register')"
                 >
                   {{ authStore.isAuthenticated ? '进入控制台' : '立即开始' }}
                 </n-button>
-                <n-button 
+                <n-button
-                  text 
+                  text
-                  type="primary" 
+                  type="primary"
-                  size="large" 
+                  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 
+            <div
-              v-for="feature in features" 
+              v-for="feature in features"
-              :key="feature.id" 
+              :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 { 
+import {
-  PersonCircle, 
+  PersonCircle,
-  Cube, 
+  Cube,
-  Ribbon, 
+  Ribbon,
-  Home, 
+  Home,
-  Settings 
+  Settings
 } from '@vicons/ionicons5'
 
 const router = useRouter()
@@ -272,8 +272,8 @@ const stats = ref([
 // 滚动到功能区域
 const scrollToFeatures = () => {
   if (featuresSection.value) {
-    featuresSection.value.scrollIntoView({ 
+    featuresSection.value.scrollIntoView({
-      behavior: 'smooth' 
+      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>

src/views/Login.vue

@@ -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 
+            <n-button
-              size="large" 
+              size="large"
               class="social-button"
               @click="handleSocialLogin('qq')"
             >
@@ -99,9 +99,9 @@
               </template>
               QQ登录
             </n-button>
-            
+
-            <n-button 
+            <n-button
-              size="large" 
+              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>

src/views/Register.vue

@@ -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>

src/views/TokenImport.vue

@@ -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 
+                  <span
-                    class="status-dot" 
+                    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>