feat:调整

张含笑

2026-02-09 4297b77b15e1418ca46021147d4473e9ddf38ed5

feat:调整

 applications/mobile-web-view/src/appPages/voiceCallDetail/index.vue

@@ -20,6 +20,12 @@
            <div class="contactAvatar">
                <img :src="defaultAvatar" alt=""></img>
            </div>
			
            <!--  联系人名称-->
            <div class="contactName">
                {{ contactName }}
            </div>

            <div class="status-group">
                <strong v-if="state==='ringing'" class="status-text incoming-status">来电中...</strong>
                <strong v-if="state==='calling'" class="status-text calling-status">呼叫中...</strong>
@@ -124,6 +130,8 @@

const uid = ref('3')
const peerUid = ref('2')
// 联系人名称
const contactName = ref('张三')

const connected = ref(false)
const state = ref('idle') // idle | calling | ringing | in-call
@@ -133,19 +141,6 @@
const callEnded = ref(false)
const endMessage = ref('对方已挂断')
const endTimer = ref(null)

/**
 * 根据状态返回对应颜色
 */
const getStateColor = (state) => {
    const colors = {
        'idle': '#666',
        'calling': '#2196F3',
        'ringing': '#FF9800',
        'in-call': '#4CAF50'
    }
    return colors[state] || '#666'
}

let ws = null
let pc = null
@@ -297,7 +292,7 @@
            send('candidate', peerUid.value, { candidate: e.candidate.toJSON ? e.candidate.toJSON() : e.candidate })
        }
    }

// 步骤七：建立连接
    pc.ontrack = (e) => {
        log('✅ 收到远端音频流')
        const stream = e.streams[0]
@@ -312,7 +307,7 @@
        log('pc.connectionState =', pc.connectionState)
    }
}

// 步骤六：连接音频
async function getLocalAudio() {
    if (localStream) return localStream

@@ -330,7 +325,7 @@
        throw e
    }
}

// 步骤5 确保本地音频流已添加
/** ✅ 关键：只 addTrack 一次，避免 “sender already exists” */
async function ensureLocalTracksAdded() {
    if (!pc) createPC()
@@ -351,7 +346,7 @@

    return stream
}

// 步骤4 发送本地音频流
async function flushCandidates() {
    if (!pc || !pc.remoteDescription) return
    while (pendingCandidates.length) {
@@ -426,12 +421,12 @@
            lastOfferSdp = msg.payload?.sdp
            return
        }

  // 步骤2
        // 已接听：直接 answer
        await answerOffer(msg.payload?.sdp, incomingFrom)
        return
    }

// 步骤3 接收 answer
    if (t === 'answer') {
        log('✅ 收到 answer，通话建立')
        if (!pc) createPC()
@@ -563,14 +558,14 @@

    // ✅ 不会重复 addTrack
    await ensureLocalTracksAdded()

// 步骤1：创建 offer
    const offer = await pc.createOffer()
    await pc.setLocalDescription(offer)

    send('offer', peerUid.value, { sdp: pc.localDescription })
    log('➡️ 已发送 offer 给', peerUid.value)
}

// 步骤2：等待 answer
async function answerOffer(offerSdp, from) {
    if (!offerSdp) {
        log('❌ offer sdp 为空，无法接听')
@@ -678,8 +673,9 @@
            const contact = JSON.parse(decodeURIComponent(receiveParameters.value))
            if (contact.friendId) {
                peerUid.value = contact.friendId
                contactName.value = contact.friendNickName || '未知联系人'
                log('🔗 从contact参数获取peerUid:', contact.friendId)
                log('👤 联系人名称:', contact.friendNickName || '未知联系人')
                log('👤 联系人名称:', contactName.value)
            }
        } catch (e) {
            log('❌ 解析contact参数失败:', String(e))
@@ -863,6 +859,17 @@
    margin-bottom: 20px;
}

    /* 联系人名称样式 */
    .contactName {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        text-align: center;
        margin-top: 10px;
            margin-bottom: 40px;

    }

/* 来电状态样式 */
.status-text.incoming-status {
    font-size: 24px;
@@ -939,7 +946,6 @@
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    border-radius: 50%;
    background-color: #f0f0f0;
    overflow: hidden;