han
/
Build_God
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

聊天框不再折叠，该成大面板 

角色信息显示在左侧，不再需要点击
master
hanqin 1 week ago
parent
08b873cf0c
commit
42fe9e904a
2 changed files with 336 additions and 277 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 100
      Build_God_Game/src/components/ChatBox.vue
  2. 413
      Build_God_Game/src/views/GameView.vue

100
Build_God_Game/src/components/ChatBox.vue
View File

@ -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,16 +99,30 @@ 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
v-show="isExpanded || embedded"
class="chat-content"
:class="{ 'chat-content--embedded': embedded }"
>
<div ref="messagesContainer" class="messages-container">
<div
v-for="msg in messages"
@ -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;

413
Build_God_Game/src/views/GameView.vue
View File

@ -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,29 +96,96 @@ 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>
<button type="button" class="sidebar-switch-btn" @click="handleSwitchCharacter">
切换角色
</button>
</div>
<span class="switch-btn">切换角色</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>
</StarBorder>
<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>
<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>
<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>
</div>
</aside>
<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" />
@ -197,87 +250,10 @@ const closeCharacterDetail = () => {
</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>
<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>
<div class="info-row">
<span class="info-label">境界</span>
<span class="info-value">{{ characterStore.currentCharacter?.levelName }}</span>
</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>
<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>
<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>
<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>
<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);
}
.sidebar-title-block {
display: flex;
flex-direction: column;
gap: 4px;
}
.character-name {
.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>

Write Preview
Loading…
Cancel
Save