diff --git a/src/components/Consultation/components/meetingView.vue b/src/components/Consultation/components/meetingView.vue index bd66d96..aae89c7 100644 --- a/src/components/Consultation/components/meetingView.vue +++ b/src/components/Consultation/components/meetingView.vue @@ -5,164 +5,180 @@ 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" >
- -
-

- {{ displaySubject }} ({{ activeMeetingConfig?.meeting.number }}) -

- + +
+
+
+

+ {{ displaySubject }} +

+ + +
+ 会议号: + {{ activeMeetingConfig?.meeting?.number }} + +
+
+
+
+ + 参会人员 {{ activeMeetingConfig?.members?.length || 0 }} +
-
- - - {{ name }} - + +
+
+ + + {{ name }} + + + + {{ activeMeetingConfig?.sharingMember?.alias}}正在共享屏幕 + +
- - - {{ activeMeetingConfig?.sharingMember?.alias}}正在共享屏幕 - + +
- -
@@ -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 || ''; - subject.value = text; - return text; + const text = globalStore.activeMeetingConfig?.subject; + const defaultText = text && String(text).trim() ? 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); - border: 2px dashed #e8e8e8; - border-radius: 16px; + background: #fff; + border: none; + 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%; - 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; + pointer-events: none; } + /* 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 { - margin: 5px; + .top-box .el-tag { + margin: 4px; + pointer-events: auto; } - ::v-deep .el-button.is-circle{ - width: 32px; - height: 32px; + /* Control Bar Styles */ + .control-bar { + 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; } diff --git a/src/components/Consultation/demo.vue b/src/components/Consultation/demo.vue index f264efe..a45670e 100644 --- a/src/components/Consultation/demo.vue +++ b/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:'确定',