提交

src/components/Consultation/components/meetingView.vue

@@ -5,23 +5,45 @@
     v-model:h="element.height"
     v-model:w="element.width"
     v-model:active="element.isActive"
+    :draggable="true"
+    :resizable="true"
+    :handles="['tl','tr','bl','br']"
+    handles-type="handles"
+    :active-on-hover="false"
+    :prevent-deactivation="true"
+    class-name-handle="drs-handle"
     class="container"
   >
     <div ref="mainContentRef" class="conference-box">
-      <!-- 会议主题 -->
+      <!-- Header Area -->
-      <div v-show="displaySubject" class="subject">
+      <div class="conference-header">
-        <h3 v-if="!editSubject" @click="editSubject = true">
+        <div class="header-top">
-            {{ displaySubject }} ({{ activeMeetingConfig?.meeting.number }})
+          <div class="title-section" v-show="displaySubject">
+             <h3 v-if="!editSubject" @click="editSubject = true" class="conference-title">
+                {{ displaySubject }}
              </h3>
-        <el-input v-else v-model="subject" autofocus allow-clear @blur="updateSubject"/>
+             <el-input v-else v-model="subject" autofocus allow-clear @blur="updateSubject" class="title-input"/>
+             
+             <div class="meeting-id-tag" @click="copyMeetingNumber" v-if="activeMeetingConfig?.meeting?.number">
+                <span class="id-label">会议号:</span>
+                <span class="id-value">{{ activeMeetingConfig?.meeting?.number }}</span>
+                <el-icon class="copy-icon"><CopyDocument /></el-icon>
+             </div>
+          </div>
+        </div>
+        <div class="participants-info">
+             <el-icon><User /></el-icon>
+             <span class="count-text">参会人员 {{ activeMeetingConfig?.members?.length || 0 }}</span>
+        </div>
       </div>
 
+      <!-- Video Content Area -->
+      <div class="video-content-area">
           <div class="top-box">
             <!-- 当前正在讲话 -->
             <el-row justify="space-around">
               <el-tag v-for="name in speakingMemberNames" :key="name" bordered color="green" >{{ name }}</el-tag>
             </el-row>
-
             <!-- 共享者 -->
             <el-tag v-if="activeMeetingConfig?.sharingMember" bordered color="orange">
                 {{ activeMeetingConfig?.sharingMember?.alias}}正在共享屏幕
@@ -34,7 +56,7 @@
 
           <!-- 广播相关（此处借用 video 标签获取对应的流） -->
           <video id="conference_localvideo" ref="localVideoRef" autoplay playsinline :hidden="!showlocalVideo" class="video" />
-      <img v-if="isMicEnable" v-show="activeMeetingConfig?.broadcast"  @click="stopBroadcast" src="@/assets/images/webPuc/svgs/img_broadcast.svg" alt="">
+          <img v-if="isMicEnable" v-show="activeMeetingConfig?.broadcast"  @click="stopBroadcast" src="@/assets/images/webPuc/svgs/img_broadcast.svg" alt="" class="img_broadcast">
           <el-upload
             v-show="false"
             :show-file-list="false"
@@ -49,94 +71,63 @@
           />
 
           <video id="conference_pushVideo" ref="pushVideoRef" autoplay playsinline :hidden="!showPushlVideo" class="video"/>
-
           <audio ref="fileAudioRef" autoplay :hidden="true" />
 
-      <el-row class="buttonContainer" justify="space-around">
+          <div class="control-bar">
             <!-- 锁定 -->
-
+            <el-button circle @click="lockConference" class="control-btn">
-        <el-button circle @click="lockConference">
                 <el-icon size="20px" v-if="activeMeetingConfig?.lockStatus == 1"><Lock/></el-icon>
                 <el-icon size="20px" v-else ><Unlock/></el-icon>
             </el-button>
 
             <!-- 麦克风 -->
-        <el-button circle @click="setMuteMic">
+            <el-button circle @click="setMuteMic" class="control-btn">
                 <img v-if="isMicEnable" src="@/assets/images/webPuc/svgs/microphone.svg" alt="">
                 <img v-else src="@/assets/images/webPuc/svgs/microphone_mute.svg" alt="">
             </el-button>
 
             <el-popover title="选择麦克风" trigger="click" position="bottom-end">
                 <template #reference>
-                <el-icon style="align-self: flex-end" color="#000"><ArrowDown/></el-icon>
+                    <el-icon class="control-arrow" color="#fff"><ArrowDown/></el-icon>
                 </template>
                 <MicPop @changeDevice="changeDevice" />
             </el-popover>
 
             <!-- 扬声器 --> 
-        <el-button circle @click="setMuteEar">
+            <el-button circle @click="setMuteEar" class="control-btn">
                 <img v-if="audioOuputStatus == 1" src="@/assets/images/webPuc/svgs/earpiece.svg" alt="">
                 <img v-else src="@/assets/images/webPuc/svgs/trumpet_mute.svg" alt="">
             </el-button>
             <el-popover title="选择扬声器" trigger="click" position="bottom-end">
                 <template #reference>
-                <el-icon style="align-self: flex-end" color="#000"><ArrowDown/></el-icon>
+                    <el-icon class="control-arrow" color="#fff"><ArrowDown/></el-icon>
                 </template>
                 <!-- <AudioPop @changeDevice="changeDevice" /> -->
             </el-popover>
 
             <!-- 摄像头 -->
-        <el-button circle @click="setCamera">
+            <el-button circle @click="setCamera" class="control-btn">
                 <img v-if="userInfo?.camera_status === CAMERA_STATUS_OPEN" src="@/assets/images/webPuc/svgs/camera.svg" alt="">
                 <img v-else src="@/assets/images/webPuc/svgs/camera_mute.svg" alt="">
             </el-button>
             <el-popover title="选择摄像头" trigger="click" position="bottom-end">
                 <template #reference>
-                <el-icon style="align-self: flex-end" color="#000"><ArrowDown/></el-icon>
+                    <el-icon class="control-arrow" color="#fff"><ArrowDown/></el-icon>
                 </template>
                 <!-- <CameraPop @changeDevice="changeDevice" /> -->
             </el-popover>
 
             <!-- 屏幕共享 -->
-        <el-button circle @click="setShareScreenStatus(1)">
+            <el-button circle @click="setShareScreenStatus(1)" class="control-btn">
                 <img src="@/assets/images/webPuc/svgs/share_video.svg" alt="">
             </el-button>
 
-        <!-- 成员管理 -->
+            <!-- 结束共享 / 结束会议 (Center) -->
-        <el-button circle @click="showMembers">
-            <el-icon color="#84888E" size="20"><Auatar/></el-icon>
-        </el-button>
-
-        <!-- 语音激励 -->
-        <el-button circle @click="setVoiceStimulation()">
-            <img v-if="activeMeetingConfig?.voiceStimulation" src="@/assets/images/webPuc/svgs/icon_embrave.svg" alt="">
-            <img v-else src="@/assets/images/webPuc/svgs/conference_icom_cancel_voice_stimulation.svg" alt="">
-        </el-button>
-
-        <!-- 布局 -->
-        <!-- <LaoutType @setConfernceLayoutType="setConfernceLayoutType" /> -->
-
-        <!-- 画面抓取-截图 -->
-        <el-button circle @click="startScreenshot">
-          <el-icon color="#84888E" size="20"><Scissor/></el-icon>
-        </el-button>
-
-        <!-- 视频广播 -->
-        <el-button circle @click="broadcastAction">
-            <img src="@/assets/images/webPuc/svgs/icon_broadcast.svg" alt="">
-        </el-button>
-
-        <!-- 录屏 -->
-        <el-button circle @click="!isRecording ? mediaRecorder.start() : mediaRecorder.stop()">
-            <el-icon v-if="!isRecording"><Camera/></el-icon>
-            <el-icon v-else style="color: red"><Videopause/></el-icon>
-        </el-button>
-
-        <!-- 结束共享 -->
             <el-button v-if="activeMeetingConfig?.sharingMember?.basedata_id === userInfo?.basedata_id"
               type="danger"
               shape="round"
               status="danger"
+              class="hangup-btn"
               @click="setShareScreenStatus(0)">
               结束共享
             </el-button>
@@ -146,23 +137,48 @@
               <el-button
                 type="danger"
                 shape="round"
+                class="hangup-btn"
                 @click="endConference">
                 结束会议
               </el-button>
-
-          <!-- 退出会议 -->
-          <!-- <el-button
-            v-else
-            type="danger"
-            shape="round"
-            @click="hangupCall"
-            >退出会议</el-button
-          > -->
             </template>
-      </el-row>
+
+            <!-- 成员管理 -->
+            <el-button circle @click="showMembers" class="control-btn">
+                <el-icon color="#fff" size="20"><Auatar/></el-icon>
+            </el-button>
+
+            <!-- 语音激励 -->
+            <el-button circle @click="setVoiceStimulation()" class="control-btn">
+                <img v-if="activeMeetingConfig?.voiceStimulation" src="@/assets/images/webPuc/svgs/icon_embrave.svg" alt="">
+                <img v-else src="@/assets/images/webPuc/svgs/conference_icom_cancel_voice_stimulation.svg" alt="">
+            </el-button>
+
+            <!-- 布局 -->
+            <!-- <LaoutType @setConfernceLayoutType="setConfernceLayoutType" /> -->
+
+            <!-- 画面抓取-截图 -->
+            <el-button circle @click="startScreenshot" class="control-btn">
+              <el-icon color="#fff" size="20"><Scissor/></el-icon>
+            </el-button>
+
+            <!-- 视频广播 -->
+            <el-button circle @click="broadcastAction" class="control-btn">
+                <img src="@/assets/images/webPuc/svgs/icon_broadcast.svg" alt="">
+            </el-button>
+
+            <!-- 录屏 -->
+            <el-button circle @click="!isRecording ? mediaRecorder.start() : mediaRecorder.stop()" class="control-btn">
+                <el-icon v-if="!isRecording"><Camera/></el-icon>
+                <el-icon v-else style="color: red"><Videopause/></el-icon>
+            </el-button>
+          </div>
+      </div>
 
       <!-- 关闭按钮 -->
-      <el-button class="close" type="primary" icon="Close" circle @click="close"></el-button>
+      <el-button class="close-card-btn" type="text" circle @click="close">
+        <el-icon size="20"><Close /></el-icon>
+      </el-button>
     </div>
 
     <!-- 成员管理面板 暂时未改-->
@@ -189,9 +205,9 @@ const store = useStore();
 const element = ref({
   x: 500,
   y: -600,
-  width: 500,
+  width: 960,
   height: 500,
-  isActive: false,
+  isActive: true,
 });
 const globalStore = store.state.useGlobalStore;
 // 音视频会议-会控管理模块
@@ -241,9 +257,10 @@ const speakers = ref([]);
 const selfGranted = ref(false);
 
 const displaySubject = computed(() => {
-    const text = globalStore.activeMeetingConfig?.subject || '';
+    const text = globalStore.activeMeetingConfig?.subject;
-    subject.value = text;
+    const defaultText = text && String(text).trim() ? text : '会议的标题';
-    return text;
+    subject.value = defaultText;
+    return defaultText;
 });
 
 // 0=关闭，1=打开，2=无扬声器
@@ -725,6 +742,17 @@ const setAudio = (stream) => {
     }
   };
 
+  const copyMeetingNumber = () => {
+    const number = activeMeetingConfig.value?.meeting?.number;
+    if (number) {
+      navigator.clipboard.writeText(number).then(() => {
+        ElMessage.success('会议号已复制');
+      }).catch(() => {
+        ElMessage.error('复制失败');
+      });
+    }
+  };
+
 
 onMounted(()=>{
   console.log(globalStore,'=====0000000000000');
@@ -759,85 +787,223 @@ onUnmounted(() => {
     position: absolute;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-
     margin: 2px;
-    background: rgb(28,32,41);
+    background: #fff;
-    border: 2px dashed #e8e8e8;
+    border: none;
-    border-radius: 16px;
+    border-radius: 12px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+    cursor: default;
+    overflow: visible;
+  }
+
+  .conference-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  /* Header Styles */
+  .conference-header {
+    padding: 16px 20px 10px;
+    background: #fff;
+    border-bottom: 1px solid #f0f0f0;
+    flex-shrink: 0;
+  }
+
+  .header-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 2px solid #c0c4cc;
+  }
+
+  .title-section {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .conference-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
     cursor: pointer;
   }
 
+  .title-input {
+    width: 200px;
+  }
+
+  .meeting-id-tag {
+    display: flex;
+    align-items: center;
+    background: #e6f7ff;
+    color: #1890ff;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .meeting-id-tag:hover {
+    background: #bae7ff;
+  }
+
+  .id-label {
+    margin-right: 4px;
+  }
+
+  .copy-icon {
+    margin-left: 4px;
+  }
+
+  .participants-info {
+    display: flex;
+    align-items: center;
+    color: #666;
+    font-size: 13px;
+    gap: 6px;
+  }
+
+  /* Video Area Styles */
+  .video-content-area {
+    flex: 1;
+    position: relative;
+    background: #000;
+    margin: 10px;
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
   .video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
+    pointer-events: none;
-    height: 100%;
-    object-fit: scale-down;
-  }
-
-  .buttonContainer {
-    position: absolute;
-    bottom: 0;
-    width: 96%;
-    margin: 8px;
-    padding: 5px 3px;
-    background: #fff;
-    border-radius: 3px;
-  }
-
-  .speaks {
-    align-items: center;
-  }
-
-  .wave {
-    top: 0;
-    width: 100%;
-    height: 100px;
-  }
-
-  .close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 5px;
-  }
-
-  .subject {
-    position: absolute;
-    top: -53px;
-    padding: 0 5px;
-    color: #ffff;
-    background: #1c2029;
-    border-radius: 5px;
-  }
-
-  .subject .arco-input-wrapper {
-    margin: 8px 0;
-  }
-
-  .icon_broadcast {
-    fill: #fff;
-  }
-
-  .img_broadcast {
-    position: absolute;
-    right: 20px;
-    bottom: 60px;
   }
 
+  /* Top Box (Tags) */
   .top-box {
     position: absolute;
     top: 10px;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    pointer-events: none;
   }
 
-  .top-box .arco-tag {
+  .top-box .el-tag {
-    margin: 5px;
+    margin: 4px;
+    pointer-events: auto;
   }
 
-  ::v-deep .el-button.is-circle{
+  /* Control Bar Styles */
-    width: 32px;
+  .control-bar {
-    height: 32px;
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.65);
+    backdrop-filter: blur(10px);
+    border-radius: 40px;
+    padding: 8px 24px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    z-index: 20;
+    white-space: nowrap;
+  }
+
+  .control-btn {
+    background: transparent !important;
+    border: none !important;
+    color: #fff !important;
+    width: 40px !important;
+    height: 40px !important;
+    padding: 0 !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background 0.3s;
+  }
+
+  .control-btn:hover {
+    background: rgba(255, 255, 255, 0.15) !important;
+    border-radius: 50%;
+  }
+
+  .control-btn img {
+    width: 24px;
+    height: 24px;
+    filter: brightness(0) invert(1); /* Make black icons white */
+  }
+
+  .control-arrow {
+    margin-left: -12px;
+    margin-top: 10px;
+    cursor: pointer;
+  }
+
+  .hangup-btn {
+    background-color: #f56c6c !important;
+    border-color: #f56c6c !important;
+    color: #fff !important;
+    height: 36px;
+    padding: 0 20px;
+  }
+  
+  .hangup-btn:hover {
+    background-color: #f78989 !important;
+    border-color: #f78989 !important;
+  }
+
+  /* Close Card Button */
+  .close-card-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: #999;
+    z-index: 100;
+  }
+  
+  .close-card-btn:hover {
+    color: #666;
+    background: transparent;
+  }
+
+  /* Misc */
+  .img_broadcast {
+    position: absolute;
+    right: 20px;
+    bottom: 80px; /* Adjusted to be above control bar */
+    width: 40px;
+    height: 40px;
+  }
+
+  ::v-deep .el-button.is-circle {
+    /* Reset element plus styles if needed */
+  }
+  
+  ::v-deep .drs-handle {
+    width: 10px;
+    height: 10px;
+    background: #1890ff;
+    border: 2px solid #fff;
+    border-radius: 2px;
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
+    z-index: 1000;
+    pointer-events: auto;
   }
 </style>

src/components/Consultation/demo.vue

@@ -216,7 +216,7 @@ const  getLoginAccountInfo =() =>{
 const openInit = (it,type) =>{
     modleType.value = type;
     if(type == '会议'){
-        // 判断是否有会议号
+        判断是否有会议号
         let into = it.number ? '确定开始会议?' : '没有找到会议，是否创建会议?'
         ElMessageBox.confirm(into,'提示',{
             confirmButtonText:'确定',