From 42fe9e904a47b05de069766b1a31674bbd2e9a31 Mon Sep 17 00:00:00 2001
From: hanqin <qinhan@cupower.com>
Date: Wed, 6 May 2026 17:18:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E6=A1=86=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0=EF=BC=8C=E8=AF=A5=E6=88=90=E5=A4=A7=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=20=E8=A7=92=E8=89=B2=E4=BF=A1=E6=81=AF=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=9C=A8=E5=B7=A6=E4=BE=A7=EF=BC=8C=E4=B8=8D=E5=86=8D?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=E7=82=B9=E5=87=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Build_God_Game/src/components/ChatBox.vue | 102 ++++-
 Build_God_Game/src/views/GameView.vue     | 511 +++++++++++-----------
 2 files changed, 336 insertions(+), 277 deletions(-)

diff --git a/Build_God_Game/src/components/ChatBox.vue b/Build_God_Game/src/components/ChatBox.vue
index 78d5c63..c240697 100644
--- a/Build_God_Game/src/components/ChatBox.vue
+++ b/Build_God_Game/src/components/ChatBox.vue
@@ -1,21 +1,28 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick, computed } from 'vue'
+import { ref, onMounted, nextTick, computed, watch } from 'vue'
 import { useChat, type ChatMessage } from '@/composables/useChat'
 import { useCharacterStore } from '@/stores/character'
 
+const props = withDefaults(
+  defineProps<{
+    /** 嵌入主布局：大面积消息区，非底部悬浮折叠条 */
+    embedded?: boolean
+  }>(),
+  { embedded: false }
+)
+
 const {
   messages,
   isConnected,
   isLoading,
   connect,
-  disconnect,
   sendMessage
 } = useChat()
 
 const characterStore = useCharacterStore()
 const inputText = ref('')
 const messagesContainer = ref<HTMLElement | null>(null)
-const isExpanded = ref(false)
+const isExpanded = ref(props.embedded)
 
 const currentCharacterId = computed(() => characterStore.currentCharacter?.id)
 
@@ -25,6 +32,14 @@ onMounted(async () => {
   scrollToBottom()
 })
 
+watch(
+  () => messages.value.length,
+  async () => {
+    await nextTick()
+    scrollToBottom()
+  }
+)
+
 const scrollToBottom = () => {
   if (messagesContainer.value) {
     messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
@@ -75,6 +90,7 @@ const formatTime = (dateStr: string) => {
 }
 
 const toggleExpand = () => {
+  if (props.embedded) return
   isExpanded.value = !isExpanded.value
   if (isExpanded.value) {
     nextTick(() => scrollToBottom())
@@ -83,17 +99,31 @@ const toggleExpand = () => {
 </script>
 
 <template>
-  <div class="chat-box" :class="{ expanded: isExpanded }">
-    <div class="chat-header" @click="toggleExpand">
-      <span class="chat-title">聊天</span>
+  <div
+    class="chat-box"
+    :class="{
+      expanded: isExpanded || embedded,
+      'chat-box--embedded': embedded
+    }"
+  >
+    <div
+      class="chat-header"
+      :class="{ 'chat-header--static': embedded }"
+      @click="toggleExpand"
+    >
+      <span class="chat-title">{{ embedded ? '聊天大厅' : '聊天' }}</span>
       <span class="chat-status" :class="{ connected: isConnected }">
-        {{ isConnected ? '●' : '○' }}
+        {{ isConnected ? '已连接' : '未连接' }}
       </span>
-      <span class="expand-icon">{{ isExpanded ? '▼' : '▲' }}</span>
+      <span v-if="!embedded" class="expand-icon">{{ isExpanded ? '▼' : '▲' }}</span>
     </div>
 
-    <div v-show="isExpanded" class="chat-content">
-        <div ref="messagesContainer" class="messages-container">
+    <div
+      v-show="isExpanded || embedded"
+      class="chat-content"
+      :class="{ 'chat-content--embedded': embedded }"
+    >
+      <div ref="messagesContainer" class="messages-container">
         <div
           v-for="msg in messages"
           :key="msg.id"
@@ -145,6 +175,22 @@ const toggleExpand = () => {
   z-index: 100;
 }
 
+.chat-box--embedded {
+  position: relative;
+  max-width: none;
+  width: 100%;
+  margin: 0;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 14px;
+  background: rgba(12, 14, 20, 0.92);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1;
+}
+
 .chat-header {
   display: flex;
   align-items: center;
@@ -153,6 +199,13 @@ const toggleExpand = () => {
   background: rgba(255, 255, 255, 0.03);
 }
 
+.chat-header--static {
+  cursor: default;
+  border-radius: 14px 14px 0 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.05);
+}
+
 .chat-title {
   color: #aaaaaa;
   font-size: 0.85rem;
@@ -160,13 +213,13 @@ const toggleExpand = () => {
 }
 
 .chat-status {
-  font-size: 0.6rem;
+  font-size: 0.72rem;
   color: #666666;
   margin-right: 8px;
 }
 
 .chat-status.connected {
-  color: #44ff44;
+  color: #4ade80;
 }
 
 .expand-icon {
@@ -180,6 +233,12 @@ const toggleExpand = () => {
   max-height: 250px;
 }
 
+.chat-content--embedded {
+  max-height: none;
+  flex: 1;
+  min-height: 0;
+}
+
 .messages-container {
   flex: 1;
   overflow-y: auto;
@@ -187,7 +246,18 @@ const toggleExpand = () => {
   max-height: 180px;
 }
 
-/* 自定义滚动条 */
+.chat-box--embedded .messages-container {
+  max-height: none;
+  min-height: 220px;
+  flex: 1;
+}
+
+@media (min-width: 900px) {
+  .chat-box--embedded .messages-container {
+    min-height: 320px;
+  }
+}
+
 .messages-container::-webkit-scrollbar {
   width: 6px;
 }
@@ -207,12 +277,16 @@ const toggleExpand = () => {
 }
 
 .message {
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   line-height: 1.6;
   padding: 2px 0;
   word-break: break-all;
 }
 
+.chat-box--embedded .message {
+  font-size: 0.85rem;
+}
+
 .message-time {
   color: #555555;
   margin-right: 6px;
diff --git a/Build_God_Game/src/views/GameView.vue b/Build_God_Game/src/views/GameView.vue
index eda4a1c..89d0449 100644
--- a/Build_God_Game/src/views/GameView.vue
+++ b/Build_God_Game/src/views/GameView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { ElProgress } from 'element-plus'
 import { useAuthStore } from '@/stores/auth'
 import { useCharacterStore } from '@/stores/character'
@@ -12,7 +12,6 @@ import StarBorder from '@/components/StarBorder/StarBorder.vue'
 import meditationIcon from '@/assets/images/meditation.svg'
 import missionIcon from '@/assets/images/mission.svg'
 import scrapIcon from '@/assets/images/scrap.svg'
-import characterIco from '@/assets/images/character.svg'
 import bagIcon from '@/assets/images/bag.svg'
 import monsterIcon from '@/assets/images/monster.svg'
 import shopIcon from '@/assets/images/shop.svg'
@@ -44,7 +43,6 @@ const showBreakthroughMessage = ref(false)
 
 const menuItems = computed(() => [
   { label: '任务', icon: missionIcon, useImage: true },
-  { label: '角色', icon: characterIco, useImage: true },
   { label: isTraining.value ? '打坐中' : '打坐', icon: meditationIcon, useImage: true, isTraining: isTraining.value },
   { label: '背包', icon: bagIcon, useImage: true },
   { label: '捡垃圾', icon: scrapIcon, useImage: true },
@@ -84,23 +82,11 @@ const navigateTo = (item: { label: string }) => {
     router.push('/monster-list')
   } else if (item.label === '商店') {
     router.push('/shop')
-  } else if (item.label === '角色') {
-    openCharacterDetail()
   } else if (item.label === '图鉴') {
     router.push('/catalog')
   }
 }
 
-const openCharacterDetail = async () => {
-  await characterStore.fetchCharacters()
-  const current = characterStore.characters.find(c => c.id === characterStore.currentCharacter?.id)
-  if (current) {
-    characterStore.currentCharacter = current
-    localStorage.setItem('current_character', JSON.stringify(current))
-  }
-  showCharacterDetail.value = true
-}
-
 const handleBreakthrough = async () => {
   const result = await characterStore.breakthrough()
   breakthroughMessage.value = result.message
@@ -110,174 +96,164 @@ const handleBreakthrough = async () => {
   }, 3000)
 }
 
-const showCharacterDetail = ref(false)
-
-const closeCharacterDetail = () => {
-  showCharacterDetail.value = false
-}
+onMounted(async () => {
+  await characterStore.fetchCharacters()
+  const current = characterStore.characters.find(c => c.id === characterStore.currentCharacter?.id)
+  if (current) {
+    characterStore.currentCharacter = current
+    localStorage.setItem('current_character', JSON.stringify(current))
+  }
+})
 </script>
 
 <template>
   <div class="game-page">
     <Particles :particle-count="50" :particle-colors="['#ffffff', '#cccccc']" class="particles-bg" />
-    <div class="game-container">
-      <div style="text-align: center; margin-bottom: 20px;">
-        <StarBorder as="div" color="#22c55e" speed="5s" :thickness="2"
-          style="display: block; width: 100%; max-width: 480px;">
-          <div class="character-header" @click="handleSwitchCharacter">
-            <div class="character-info">
-              <span class="character-name">{{ characterStore.currentCharacter?.name || '未选择角色' }}</span>
-              <span class="character-level">{{ characterStore.currentCharacter?.levelName || '' }}</span>
+    <div class="game-shell">
+      <aside id="character-sidebar" class="character-sidebar">
+        <div class="sidebar-card">
+          <div class="sidebar-header">
+            <div class="sidebar-title-block">
+              <span class="sidebar-char-name">{{ characterStore.currentCharacter?.name || '未选择角色' }}</span>
+              <span class="sidebar-char-level">{{ characterStore.currentCharacter?.levelName || '' }}</span>
             </div>
-            <span class="switch-btn">切换角色</span>
+            <button type="button" class="sidebar-switch-btn" @click="handleSwitchCharacter">
+              切换角色
+            </button>
           </div>
-        </StarBorder>
-      </div>
-      <div style="text-align: center;">
-        <ShinyText class="welcome-text" text="✨ 欢迎来到我的世界" :speed="2" :delay="0.5" :disabled="false" :color="'#b5b5b5'"
-          :shine-color="'#34fef1'" :spread="120" :direction="'left'" :yoyo="false" :pause-on-hover="false" />
-      </div>
-      <div style="text-align: center; margin-bottom: 16px;">
-        <button class="tutorial-btn" @click="navigateToTutorial">游戏指南</button>
-      </div>
 
-      <div class="menu-grid">
-        <GlareHover v-for="item in menuItems" :key="item.label" width="100%" height="100px"
-          :background="item.isTraining ? 'rgba(255,136,68,0.1)' : 'rgba(255,255,255,0.02)'" border-radius="16px"
-          :border-color="item.isTraining ? 'rgba(255,136,68,0.3)' : 'rgba(255,255,255,0.08)'"
-          :glare-color="item.isTraining ? '#ff8844' : '#ffffff'" :glare-opacity="0.1" class="menu-card"
-          :class="{ 'training-active': item.isTraining }" @click="navigateTo(item)">
-          <div class="menu-content">
-            <img v-if="item.useImage" :src="item.icon" class="menu-icon-img" />
-            <span v-else class="menu-icon">{{ item.icon }}</span>
-            <span class="menu-label">{{ item.label }}</span>
+          <div class="detail-section">
+            <div class="section-title">基础信息</div>
+            <div class="info-row">
+              <span class="info-label">职业</span>
+              <span class="info-value">{{ characterStore.currentCharacter?.professionName || '未选择' }}</span>
+            </div>
+            <div class="info-row">
+              <span class="info-label">灵石</span>
+              <span class="info-value">{{ formatNumber(characterStore.currentCharacter?.money || 0) }}</span>
+            </div>
           </div>
-        </GlareHover>
-      </div>
 
-      <div v-if="nextLevelName" class="breakthrough-section">
-        <div class="breakthrough-header">
-          <span class="breakthrough-title">境界突破</span>
-        </div>
-        <div class="breakthrough-info">
-          <div class="level-info">
-            <span class="current-level">{{ currentLevelName }}</span>
-            <span class="arrow">→</span>
-            <span class="next-level">{{ nextLevelName }}</span>
-          </div>
-          <div class="exp-info">
-            <span class="exp-text">{{ formatNumber(currentExp) }} / {{ formatNumber(nextLevelMinExp) }} 经验</span>
-            <el-progress :percentage="Math.floor(expProgress)" color="#ff8844" :show-text="false" :stroke-width="8" />
-            <span class="exp-percent">{{ Math.floor(expProgress) }}%</span>
-          </div>
-          <div class="rate-info">
-            <span class="rate-label">突破成功率</span>
-            <el-progress :percentage="breakthroughRate" color="#22c55e" :show-text="false" :stroke-width="8" />
-            <span class="exp-percent">{{ breakthroughRate + `%` }}</span>
-          </div>
-          <div v-if="hasPillCost" class="pill-cost-info">
-            <span class="pill-cost-label">突破消耗</span>
-            <span class="pill-cost-value">{{ requiredPillName }} ×{{ requiredPillQuantity }}</span>
+          <div class="detail-section">
+            <div class="section-title">属性</div>
+            <div class="attr-row">
+              <span class="attr-label"><span class="attr-icon hp-icon">❤️</span>生命</span>
+              <span class="attr-value">
+                <span class="base-value">{{ formatNumber(characterStore.currentCharacter?.baseMaxHP || 0) }}</span>
+                <span v-if="(characterStore.currentCharacter?.bonusMaxHP || 0) > 0" class="bonus-value">+{{
+                  formatNumber(characterStore.currentCharacter?.bonusMaxHP || 0) }}</span>
+              </span>
+            </div>
+            <div class="attr-row">
+              <span class="attr-label"><span class="attr-icon atk-icon">⚔️</span>攻击</span>
+              <span class="attr-value">
+                <span class="base-value">{{ formatNumber(characterStore.currentCharacter?.baseAttack || 0) }}</span>
+                <span v-if="(characterStore.currentCharacter?.bonusAttack || 0) > 0" class="bonus-value">+{{
+                  formatNumber(characterStore.currentCharacter?.bonusAttack || 0) }}</span>
+              </span>
+            </div>
+            <div class="attr-row">
+              <span class="attr-label"><span class="attr-icon def-icon">🛡️</span>防御</span>
+              <span class="attr-value">
+                <span class="base-value">{{ formatNumber(characterStore.currentCharacter?.baseDefend || 0) }}</span>
+                <span v-if="(characterStore.currentCharacter?.bonusDefend || 0) > 0" class="bonus-value">+{{
+                  formatNumber(characterStore.currentCharacter?.bonusDefend || 0) }}</span>
+              </span>
+            </div>
+            <div class="attr-row">
+              <span class="attr-label"><span class="attr-icon crit-icon">💥</span>暴击率</span>
+              <span class="attr-value">
+                <span class="base-value">{{ (characterStore.currentCharacter?.baseCriticalRate || 0).toFixed(1) }}%</span>
+                <span v-if="(characterStore.currentCharacter?.bonusCriticalRate || 0) > 0" class="bonus-value">+{{
+                  (characterStore.currentCharacter?.bonusCriticalRate || 0).toFixed(1) }}%</span>
+              </span>
+            </div>
           </div>
-          <button class="breakthrough-btn" :class="{ 'can-breakthrough': canBreakthrough }" :disabled="!canBreakthrough"
-            @click="handleBreakthrough">
-            {{ canBreakthrough ? '突破' : '未满足突破条件' }}
-          </button>
-        </div>
-      </div>
-
-      <div v-if="showBreakthroughMessage" class="toast-message">
-        {{ breakthroughMessage }}
-      </div>
 
-      <div class="page-footer">
-        <StarBorder as="div" color="#e63d3d" speed="3s" :thickness="3">
-          <div class="btn-out" @click="handleLogout">
-            退出登录
+          <div class="detail-section detail-section--last">
+            <div class="section-title">经验</div>
+            <div class="exp-row">
+              <span class="exp-label">当前经验</span>
+              <span class="exp-value">{{ formatNumber(characterStore.currentCharacter?.currentExp || 0) }}</span>
+            </div>
+            <div v-if="characterStore.currentCharacter?.nextLevelMinExp" class="exp-row">
+              <span class="exp-label">升级所需</span>
+              <span class="exp-value">{{ formatNumber(characterStore.currentCharacter?.nextLevelMinExp || 0) }}</span>
+            </div>
           </div>
-        </StarBorder>
-      </div>
-
-      <ChatBox />
-    </div>
-
-    <div v-if="showCharacterDetail" class="character-detail-overlay" @click="closeCharacterDetail">
-      <div class="character-detail-dialog" @click.stop>
-        <div class="detail-header">
-          <span class="detail-title">角色详情</span>
-          <span class="detail-close" @click="closeCharacterDetail">×</span>
         </div>
+      </aside>
 
-        <div class="detail-section">
-          <div class="section-title">基础信息</div>
-          <div class="info-row">
-            <span class="info-label">角色名</span>
-            <span class="info-value">{{ characterStore.currentCharacter?.name }}</span>
-          </div>
-          <div class="info-row">
-            <span class="info-label">职业</span>
-            <span class="info-value">{{ characterStore.currentCharacter?.professionName || '未选择' }}</span>
+      <div class="game-main">
+        <div class="game-container">
+          <div style="text-align: center;">
+            <ShinyText class="welcome-text" text="✨ 欢迎来到我的世界" :speed="2" :delay="0.5" :disabled="false" :color="'#b5b5b5'"
+              :shine-color="'#34fef1'" :spread="120" :direction="'left'" :yoyo="false" :pause-on-hover="false" />
           </div>
-          <div class="info-row">
-            <span class="info-label">境界</span>
-            <span class="info-value">{{ characterStore.currentCharacter?.levelName }}</span>
+          <div style="text-align: center; margin-bottom: 16px;">
+            <button class="tutorial-btn" @click="navigateToTutorial">游戏指南</button>
           </div>
-          <div class="info-row">
-            <span class="info-label">灵石</span>
-            <span class="info-value">{{ formatNumber(characterStore.currentCharacter?.money || 0) }}</span>
-          </div>
-        </div>
 
-        <div class="detail-section">
-          <div class="section-title">属性</div>
-          <div class="attr-row">
-            <span class="attr-label"><span class="attr-icon hp-icon">❤️</span>生命</span>
-            <span class="attr-value">
-              <span class="base-value">{{ formatNumber(characterStore.currentCharacter?.baseMaxHP || 0) }}</span>
-              <span v-if="(characterStore.currentCharacter?.bonusMaxHP || 0) > 0" class="bonus-value">+{{
-                formatNumber(characterStore.currentCharacter?.bonusMaxHP || 0) }}</span>
-            </span>
-          </div>
-          <div class="attr-row">
-            <span class="attr-label"><span class="attr-icon atk-icon">⚔️</span>攻击</span>
-            <span class="attr-value">
-              <span class="base-value">{{ formatNumber(characterStore.currentCharacter?.baseAttack || 0) }}</span>
-              <span v-if="(characterStore.currentCharacter?.bonusAttack || 0) > 0" class="bonus-value">+{{
-                formatNumber(characterStore.currentCharacter?.bonusAttack || 0) }}</span>
-            </span>
+          <div class="menu-grid">
+            <GlareHover v-for="item in menuItems" :key="item.label" width="100%" height="100px"
+              :background="item.isTraining ? 'rgba(255,136,68,0.1)' : 'rgba(255,255,255,0.02)'" border-radius="16px"
+              :border-color="item.isTraining ? 'rgba(255,136,68,0.3)' : 'rgba(255,255,255,0.08)'"
+              :glare-color="item.isTraining ? '#ff8844' : '#ffffff'" :glare-opacity="0.1" class="menu-card"
+              :class="{ 'training-active': item.isTraining }" @click="navigateTo(item)">
+              <div class="menu-content">
+                <img v-if="item.useImage" :src="item.icon" class="menu-icon-img" />
+                <span v-else class="menu-icon">{{ item.icon }}</span>
+                <span class="menu-label">{{ item.label }}</span>
+              </div>
+            </GlareHover>
           </div>
-          <div class="attr-row">
-            <span class="attr-label"><span class="attr-icon def-icon">🛡️</span>防御</span>
-            <span class="attr-value">
-              <span class="base-value">{{ formatNumber(characterStore.currentCharacter?.baseDefend || 0) }}</span>
-              <span v-if="(characterStore.currentCharacter?.bonusDefend || 0) > 0" class="bonus-value">+{{
-                formatNumber(characterStore.currentCharacter?.bonusDefend || 0) }}</span>
-            </span>
-          </div>
-          <div class="attr-row">
-            <span class="attr-label"><span class="attr-icon crit-icon">💥</span>暴击率</span>
-            <span class="attr-value">
-              <span class="base-value">{{ (characterStore.currentCharacter?.baseCriticalRate || 0).toFixed(1) }}%</span>
-              <span v-if="(characterStore.currentCharacter?.bonusCriticalRate || 0) > 0" class="bonus-value">+{{
-                (characterStore.currentCharacter?.bonusCriticalRate || 0).toFixed(1) }}%</span>
-            </span>
+
+          <div v-if="nextLevelName" class="breakthrough-section">
+            <div class="breakthrough-header">
+              <span class="breakthrough-title">境界突破</span>
+            </div>
+            <div class="breakthrough-info">
+              <div class="level-info">
+                <span class="current-level">{{ currentLevelName }}</span>
+                <span class="arrow">→</span>
+                <span class="next-level">{{ nextLevelName }}</span>
+              </div>
+              <div class="exp-info">
+                <span class="exp-text">{{ formatNumber(currentExp) }} / {{ formatNumber(nextLevelMinExp) }} 经验</span>
+                <el-progress :percentage="Math.floor(expProgress)" color="#ff8844" :show-text="false" :stroke-width="8" />
+                <span class="exp-percent">{{ Math.floor(expProgress) }}%</span>
+              </div>
+              <div class="rate-info">
+                <span class="rate-label">突破成功率</span>
+                <el-progress :percentage="breakthroughRate" color="#22c55e" :show-text="false" :stroke-width="8" />
+                <span class="exp-percent">{{ breakthroughRate + `%` }}</span>
+              </div>
+              <div v-if="hasPillCost" class="pill-cost-info">
+                <span class="pill-cost-label">突破消耗</span>
+                <span class="pill-cost-value">{{ requiredPillName }} ×{{ requiredPillQuantity }}</span>
+              </div>
+              <button class="breakthrough-btn" :class="{ 'can-breakthrough': canBreakthrough }" :disabled="!canBreakthrough"
+                @click="handleBreakthrough">
+                {{ canBreakthrough ? '突破' : '未满足突破条件' }}
+              </button>
+            </div>
           </div>
-        </div>
 
-        <div class="detail-section">
-          <div class="section-title">经验</div>
-          <div class="exp-row">
-            <span class="exp-label">当前经验</span>
-            <span class="exp-value">{{ formatNumber(characterStore.currentCharacter?.currentExp || 0) }}</span>
+          <div v-if="showBreakthroughMessage" class="toast-message">
+            {{ breakthroughMessage }}
           </div>
-          <div v-if="characterStore.currentCharacter?.nextLevelMinExp" class="exp-row">
-            <span class="exp-label">升级所需</span>
-            <span class="exp-value">{{ formatNumber(characterStore.currentCharacter?.nextLevelMinExp || 0) }}</span>
+
+          <div class="page-footer">
+            <StarBorder as="div" color="#e63d3d" speed="3s" :thickness="3">
+              <div class="btn-out" @click="handleLogout">
+                退出登录
+              </div>
+            </StarBorder>
           </div>
         </div>
 
-        <div class="detail-footer">
-          <button class="switch-character-btn" @click="handleSwitchCharacter">切换角色</button>
+        <div class="chat-panel">
+          <ChatBox embedded />
         </div>
       </div>
     </div>
@@ -288,10 +264,10 @@ const closeCharacterDetail = () => {
 .game-page {
   min-height: 100vh;
   background: #000000;
-  padding: 20px;
-  padding-bottom: 60px;
+  padding: 16px;
+  padding-bottom: 24px;
   position: relative;
-  overflow: hidden;
+  overflow-x: hidden;
 }
 
 .particles-bg {
@@ -302,60 +278,141 @@ const closeCharacterDetail = () => {
   height: 100% !important;
 }
 
-.game-container {
-  max-width: 480px;
-  margin: 0 auto;
-  padding-top: 20px;
+.game-shell {
   position: relative;
   z-index: 10;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  min-height: calc(100vh - 48px);
 }
 
-.character-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 12px;
-  padding: 12px 16px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  height: 100%;
+.character-sidebar {
+  flex: 0 0 280px;
+  min-width: 0;
+  align-self: flex-start;
+  position: sticky;
+  top: 16px;
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
 }
 
-.character-header:hover {
-  background: rgba(255, 255, 255, 0.05);
+.sidebar-card {
+  background: rgba(16, 18, 24, 0.92);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
 }
 
-.character-info {
+.sidebar-header {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-.character-name {
+.sidebar-title-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sidebar-char-name {
   color: #ffffff;
-  font-size: 1rem;
-  font-weight: 500;
+  font-size: 1.1rem;
+  font-weight: 600;
 }
 
-.character-level {
-  color: #888888;
+.sidebar-char-level {
+  color: #22c55e;
   font-size: 0.8rem;
 }
 
-.switch-btn {
-  color: #666666;
-  font-size: 0.75rem;
+.sidebar-switch-btn {
+  width: 100%;
+  padding: 10px 12px;
+  background: rgba(34, 197, 94, 0.12);
+  border: 1px solid rgba(34, 197, 94, 0.35);
+  border-radius: 10px;
+  color: #86efac;
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.sidebar-switch-btn:hover {
+  background: rgba(34, 197, 94, 0.2);
+  color: #bbf7d0;
+}
+
+.detail-section--last {
+  margin-bottom: 0;
+}
+
+.game-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 0;
+}
+
+.game-container {
+  max-width: 560px;
+  width: 100%;
+  margin: 0 auto;
+  padding-top: 8px;
+  position: relative;
+  z-index: 10;
+  flex-shrink: 0;
+}
+
+.chat-panel {
+  flex: 1;
+  min-height: 280px;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+@media (max-width: 900px) {
+  .game-shell {
+    flex-direction: column;
+    min-height: auto;
+  }
+
+  .character-sidebar {
+    flex: none;
+    width: 100%;
+    max-width: 560px;
+    margin: 0 auto;
+    position: relative;
+    top: 0;
+    max-height: none;
+  }
+
+  .chat-panel {
+    min-height: 240px;
+    max-width: 560px;
+    margin: 0 auto;
+    width: 100%;
+  }
 }
 
 .welcome-text {
-  font-size: 1.5rem;
+  font-size: 1.35rem;
   font-weight: 300;
   text-align: center;
   color: #ffffff;
   letter-spacing: 0.1em;
-  margin-bottom: 24px;
+  margin-bottom: 20px;
   font-weight: bold;
 }
 
@@ -620,58 +677,8 @@ const closeCharacterDetail = () => {
   color: #ffffff;
 }
 
-.character-detail-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.85);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.character-detail-dialog {
-  background: rgba(20, 20, 25, 0.95);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 16px;
-  width: 90%;
-  max-width: 400px;
-  max-height: 80vh;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-.detail-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.detail-title {
-  color: #ffffff;
-  font-size: 1.2rem;
-  font-weight: 600;
-}
-
-.detail-close {
-  color: #666666;
-  font-size: 1.5rem;
-  cursor: pointer;
-  line-height: 1;
-}
-
-.detail-close:hover {
-  color: #ffffff;
-}
-
 .detail-section {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 
 .section-title {
@@ -768,26 +775,4 @@ const closeCharacterDetail = () => {
   color: #cccccc;
   font-size: 0.85rem;
 }
-
-.detail-footer {
-  margin-top: 20px;
-  text-align: center;
-}
-
-.switch-character-btn {
-  padding: 12px 24px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 10px;
-  color: #888888;
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.switch-character-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.25);
-  color: #ffffff;
-}
 </style>