feat(组件): 列表处理

src/app.scss

@@ -1,6 +1,10 @@
+
+@import "/@/assets/_base.scss";
+@import "/@/assets/_base-vars.scss";
 @import "/@/assets/theme.editor.scss";
 @import "/@/components//basic/dialog/dialog.scss";
 @import "/@/components//basic/dialog/toast.scss";
+@import "/@/components//basic/button/button.scss";
 .tab-layer {
   width: 100%;
   text-align: center;

src/assets/_base-vars.scss

@@ -0,0 +1,63 @@
+
+:root {
+  --colors-primary-fill: 255, 255, 255;
+  --colors-primary-base-fill: 237, 93, 1;
+  --colors-primary-base: rgb(var(--colors-primary-base-fill));
+  --colors-primary-hover: #f16928;
+  // --colors-primary-hover: #008B7A;
+  --colors-primary-active: #f3550a;
+  --colors-primary-click: #db5313;
+  --colors-warn: #FA3F48;
+  --colors-color: #999;
+  --colors-border-color: rgba(var(--colors-primary-fill), 0.16);
+  --colors-content-color: rgb(--colors-primary-fill);
+  
+  
+  --colors-normal-back: rgba(var(--colors-primary-fill), 0.1);
+  --colors-normal-base: rgba(var(--colors-primary-fill), 0.4);
+  --colors-normal-hover: rgba(var(--colors-primary-fill), 1);
+  --colors-normal-click: var(--colors-primary-click);
+
+  --colors-normal-fill-back: var(--colors-normal-back);
+  --colors-normal-fill-base: var(--colors-normal-base);
+  --colors-normal-fill-hover: var(--colors-normal-hover);
+  --colors-normal-fill-click: var(--colors-primary-click);
+
+  --colors-error-fill: 250, 63, 72;
+  
+  --small-size: 12px;
+  --medium-size: 14px;
+  --big-size: 16px;
+
+
+  // 正常
+  --color-main-normal: var(--colors-primary-base);
+  // 悬停
+  --color-main-hover: var(--colors-primary-hover);
+  // 点击
+  --color-main-focus: var(--colors-primary-click);
+
+
+  --editor-head-filter: blur(0px);
+  --editor-head-height: 50px;
+  
+  --editor-head-back: rgba(20, 20, 20, 0.86);
+
+  --editor-menu-filter: var(--editor-head-filter);
+  --editor-menu-width: 80px;
+  --editor-menu-left: 0px;
+  --editor-menu-right: 0px;
+  --editer-menu-fill: 27, 27, 28;
+  --editor-menu-back: rgba(var(--editer-menu-fill), 0.8);
+  --editor-menu-active-back: rgba(var(--colors-primary-fill), 0.06);
+  --editor-menu-color: #999;
+  --editor-menu-active: rgba(255,255,255,0.06);;
+
+
+  --editor-toolbox-top: var(--editor-head-height);
+  --editor-toolbox-left: calc(var(--editor-menu-left) + var(--editor-menu-width));
+  --editor-toolbox-width: 340px;
+  --editor-toolbox-back: var(--editor-menu-back);
+  --editor-toolbox-padding: 20px;
+  --editor-toolbar-height: 60px;
+}

src/assets/_base.scss

@@ -0,0 +1,293 @@
+/*!
+ * ress.css • v4.0.0
+ * MIT License
+ * github.com/filipelinhares/ress
+ */
+
+/* # =================================================================
+   # Global selectors
+   # ================================================================= */
+
+html {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
+    word-break: normal;
+    -moz-tab-size: 4;
+    tab-size: 4;
+}
+
+*,
+::before,
+::after {
+    background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
+    box-sizing: inherit;
+    appearance: none;
+    -webkit-tap-highlight-color: rgba(255,255,255,0);
+    text-rendering: optimizeLegibility!important;
+    -webkit-font-smoothing: antialiased!important;
+}
+
+::before,
+::after {
+    text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
+    vertical-align: inherit;
+}
+
+* {
+    padding: 0; /* Reset `padding` and `margin` of all elements */
+    margin: 0;
+}
+
+/* # =================================================================
+     # General elements
+     # ================================================================= */
+
+hr {
+    overflow: visible; /* Show the overflow in Edge and IE */
+    height: 0; /* Add the correct box sizing in Firefox */
+    color: inherit; /* Correct border color in Firefox. */
+}
+
+details,
+main {
+    display: block; /* Render the `main` element consistently in IE. */
+}
+
+summary {
+    display: list-item; /* Add the correct display in all browsers */
+}
+
+small {
+    font-size: 80%; /* Set font-size to 80% in `small` elements */
+}
+
+[hidden] {
+    display: none; /* Add the correct display in IE */
+}
+
+abbr[title] {
+    border-bottom: none; /* Remove the bottom border in Chrome 57 */
+    /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
+    text-decoration: underline;
+    text-decoration: underline dotted;
+}
+
+a {
+    background-color: transparent; /* Remove the gray background on active links in IE 10 */
+}
+
+a:active,
+a:hover {
+    outline-width: 0; /* Remove the outline when hovering in all browsers */
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace; /* Specify the font family of code elements */
+}
+
+pre {
+    font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
+}
+
+b,
+strong {
+    font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
+}
+
+/* https://gist.github.com/unruthless/413930 */
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+table {
+    border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
+    text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
+}
+
+/* # =================================================================
+     # Forms
+     # ================================================================= */
+
+input {
+    border-radius: 0;
+}
+
+/* Replace pointer cursor in disabled elements */
+[disabled] {
+    cursor: default;
+    user-select: none;
+}
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+    height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
+}
+
+[type='search'] {
+    -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
+    outline-offset: -2px; /* Correct the outline style in Safari */
+}
+
+[type='search']::-webkit-search-decoration {
+    -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
+}
+
+textarea {
+    overflow: auto; /* Internet Explorer 11+ */
+    resize: vertical; /* Specify textarea resizability */
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font: inherit; /* Specify font inheritance of form elements */
+}
+
+optgroup {
+    font-weight: bold; /* Restore the font weight unset by the previous rule */
+}
+
+button {
+    overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
+}
+
+button,
+select {
+    text-transform: none; /* Firefox 40+, Internet Explorer 11- */
+}
+
+/* Apply cursor pointer to button elements */
+button,
+[type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
+    cursor: pointer;
+    color: inherit;
+}
+
+/* Remove inner padding and border in Firefox 4+ */
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/* Replace focus style removed in the border reset above */
+button:-moz-focusring,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+    outline: 1px dotted #ccc;
+}
+
+button,
+  html [type='button'], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
+}
+
+/* Remove the default button styling in all browsers */
+button,
+input,
+select,
+textarea {
+    background-color: transparent;
+    border-style: none;
+}
+
+a:focus,
+button:focus,
+input:focus,
+select:focus,
+textarea:focus {
+    outline-width: 0;
+}
+
+/* Style select like a standard input */
+select {
+    -moz-appearance: none; /* Firefox 36+ */
+    -webkit-appearance: none; /* Chrome 41+ */
+}
+
+select::-ms-expand {
+    display: none; /* Internet Explorer 11+ */
+}
+
+select::-ms-value {
+    color: currentColor; /* Internet Explorer 11+ */
+}
+
+legend {
+    border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
+    color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
+    display: table; /* Correct the text wrapping in Edge and IE */
+    max-width: 100%; /* Correct the text wrapping in Edge and IE */
+    white-space: normal; /* Correct the text wrapping in Edge and IE */
+    max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
+}
+
+::-webkit-file-upload-button {
+    /* Correct the inability to style clickable types in iOS and Safari */
+    -webkit-appearance: button;
+    color: inherit;
+    font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
+}
+
+/* # =================================================================
+     # Specify media element style
+     # ================================================================= */
+
+img {
+    border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
+}
+
+/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
+progress {
+    vertical-align: baseline;
+}
+
+/* # =================================================================
+     # Accessibility
+     # ================================================================= */
+
+/* Specify the progress cursor of updating elements */
+[aria-busy='true'] {
+    cursor: progress;
+}
+
+/* Specify the pointer cursor of trigger elements */
+[aria-controls] {
+    cursor: pointer;
+}
+
+/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
+[aria-disabled='true'] {
+    cursor: default;
+}
+
+.disabled,
+:disabled{
+    opacity: 0.3 !important;
+    pointer-events: none !important;
+}

src/components/basic/button/_button.scss

@@ -0,0 +1,79 @@
+@use "sass:map";
+
+.ui-button {
+    width: 100%;
+    height: 34px;
+    border: none;
+    outline: none;
+    border-radius: 4px;
+    font-size: 14px;
+    background: none !important;
+
+    transition: all .3s ease;
+
+    .ui-button-icon {
+        margin-right: 0.6em;
+    }
+}
+
+.ui-button.customize {
+    background: none;
+    color: rgba(var(--color), 0.8);
+    border: 1px solid rgba(var(--color), 0.6);
+}
+
+.ui-button.normal{
+    color: var(--colors-color);
+    border: 1px solid var(--colors-normal-base);
+    &:hover {
+        color: var(--colors-normal-hover);
+        border: 1px solid var(--colors-normal-hover);
+    }
+    &:active {
+        color: var(--colors-normal-click);
+        border: 1px solid var(--colors-normal-click);
+    }
+}
+
+.ui-button.submit {
+    color: var( --color-main-hover);
+    border: 1px solid var( --color-main-normal);
+    background-color: var( --color-main-normal);
+    &:hover {
+        border-color: var( --color-main-hover);
+        background-color: var( --color-main-hover);
+    }
+    &:active {
+        border-color: var( --color-main-focus);
+        background-color: var( --color-main-focus);
+    }
+}
+
+.ui-button.cancel {
+    color: var( --color-main-normal);
+    border: 1px solid var( --color-main-normal);
+    &:hover {
+        border-color: var( --color-main-hover);
+    }
+    &:active {
+        border-color: var( --color-main-focus);
+    }
+}
+
+.ui-button.primary {
+    background-color: var(--colors-primary-base) !important;
+    color: var(--colors-normal-fill-hover);
+    border: none;
+    opacity: 1;
+
+    // &:active,
+    &:hover {
+        // opacity: 0.8;
+        // background: var(--colors-primary-hover) !important;
+        // background: #4DD8C7 !important;
+    }
+    &:active {
+        background-color: var(--colors-primary-active) !important;
+        color: rgba(255,255,255,0.6);
+    }
+}

src/components/basic/button/index.ts

@@ -0,0 +1,4 @@
+import Button from './index.vue'
+import { withInstall } from '/@/utils/install'
+const UIButton = withInstall(Button)
+export default UIButton

src/components/basic/button/index.vue

@@ -5,42 +5,47 @@
   </button>
 </template>
 
-<script setup lang="ts">
-import { defineProps, computed } from "vue";
+<script lang="ts">
+import { computed, defineComponent } from "vue";
 // import { normalizeUnitToStyle } from '../../utils/index'
 // import UIIcon from '../icon'
 
-const props = defineProps({
-  type: {
-    type: String,
-    default: "normal",
+export default defineComponent({
+  name: "ui-button",
+  props: {
+    type: {
+      type: String,
+      default: "normal",
+    },
+    color: {
+      type: String,
+    },
+    width: {
+      type: [String, Number],
+    },
+    icon: {
+      type: String,
+    },
   },
-  color: {
-    type: String,
-  },
-  width: {
-    type: [String, Number],
-  },
-  icon: {
-    type: String,
-  },
-});
+  setup(props) {
+    const custom = `customize`;
+    const className = computed(() => (props.color ? custom : props.type));
 
-const custom = `customize`;
-const className = computed(() => (props.color ? custom : props.type));
+    const style = computed(() => {
+      const style = {
+        width: props.width + "px",
+      };
 
-const style = computed(() => {
-  const style = {
-    width: props.width + "px",
-  };
-
-  if (className.value === custom) {
-    style["--color"] = props.color;
-  }
-  return style;
+      if (className.value === custom) {
+        style["--color"] = props.color;
+      }
+      return style;
+    });
+    return {
+      className,
+      style,
+    };
+  },
 });
 </script>
 
-<script>
-export default { name: "ui-button" };
-</script>

src/components/basic/dialog/Confirm.vue

@@ -1,58 +1,63 @@
 <template>
-    <ui-dialog>
-        <template v-slot:header>
-            <span>{{ title }}</span>
-            <i class="iconfont icon-close" @click="close('no')"></i>
-        </template>
-        <template v-if="$slots.content">
-            <slot name="content" />
-        </template>
-        <template v-else>
-            <div class="message" v-html="content"></div>
-        </template>
-        <template v-slot:footer>
-            <ui-button v-if="!single" type="cancel" @click="close('no')">{{ noText }}</ui-button>
-            <ui-button type="primary" @click="close('ok')">{{ okText }}</ui-button>
-        </template>
-    </ui-dialog>
+  <ui-dialog>
+    <template v-slot:header>
+      <span>{{ title }}</span>
+      <i class="iconfont icon-close" @click="close('no')"></i>
+    </template>
+    <template v-if="$slots.content">
+      <slot name="content" />
+    </template>
+    <template v-else>
+      <div class="message" v-html="content"></div>
+    </template>
+    <template v-slot:footer>
+      <UIbutton v-if="!single" type="cancel" @click="close('no')">{{
+        noText
+      }}</UIbutton>
+      <UIbutton type="primary" @click="close('ok')">{{ okText }}</UIbutton>
+    </template>
+  </ui-dialog>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { isFunction, omit } from './utils'
+import { defineComponent } from "vue";
+import { isFunction, omit } from "./utils";
+import UIbutton from "../button";
 export default defineComponent({
-    name: 'ui-confirm',
-    props: {
-        title: {
-            type: String,
-            default: '提示',
-        },
-        okText: {
-            type: String,
-            default: '确定',
-        },
-        noText: {
-            type: String,
-            default: '取消',
-        },
-        single: {
-            type: Boolean,
-            default: false,
-        },
-        func: Function,
-        content: String,
-        destroy: Function,
+  name: "ui-confirm",
+  components: { UIbutton },
+  props: {
+    title: {
+      type: String,
+      default: "提示",
     },
-    setup: function (props, ctx) {
-        const close = result => {
-            if (isFunction(props.func) && props.func(result) === false) {
-                return
-            }
-            isFunction(props.destroy) && props.destroy()
-        }
-        return {
-            ...omit(props, 'destroy', 'func'),
-            close,
-        }
+    okText: {
+      type: String,
+      default: "确定",
     },
-})
+    noText: {
+      type: String,
+      default: "取消",
+    },
+    single: {
+      type: Boolean,
+      default: false,
+    },
+    func: Function,
+    content: String,
+    destroy: Function,
+    showCloseIcon: Function,
+  },
+  setup: function (props, ctx) {
+    const close = (result) => {
+      if (isFunction(props.func) && props.func(result) === false) {
+        return;
+      }
+      isFunction(props.destroy) && props.destroy();
+    };
+    return {
+      ...omit(props, "destroy", "func"),
+      close,
+    };
+  },
+});
 </script>

src/components/chatRoom/controls/actions.ts

@@ -15,10 +15,11 @@ interface ActionDataType {
     user?: UserInfoType,
     userId?: string,
     words?: boolean
+    muted?: boolean
 
 }
 
-export function handleActions({ data, type, members, open, user, userId, words }: ActionDataType) {
+export function handleActions({ data, type, members, open, user, userId, words, muted }: ActionDataType) {
     switch (type) {
         case 'user-init':
             handleUserInit()
@@ -38,12 +39,14 @@ export function handleActions({ data, type, members, open, user, userId, words }
             break;
 
         case "users-muted":
+            handleUserMuted(userId, muted, members)
             break
 
         case "users-words":
             handleUserSetWords(userId, words, members)
             break;
         case "leader-dismiss":
+            handleUserLeave(user, members)
             break;
         case "user-paint":
             handleUserPaint(open)
@@ -192,4 +195,19 @@ const handleUserSetWords = (UserId?: string, words?: boolean, members?: UserInfo
                 : `主持人已解除禁言`,
         });
     }
+}
+const handleUserMuted = (UserId?: string, muted?: boolean, members?: UserInfoType[]) => {
+    const rtcStore = useRtcStore();
+    console.log('handleUserSetWords', UserId, muted)
+    UserId && rtcStore.updateMemberDatabyId(UserId, {
+        IsMuted: muted
+    })
+    if (UserId == rtcStore.userId) {
+        rtcStore.setMute(!!muted)
+    }
+}
+
+//被动处理用离开
+const handleUserLeave = (user, members) => {
+
 }

src/components/chatRoom/index.vue

@@ -14,11 +14,15 @@
     <!-- 当前人数 end -->
     <!-- 控制条 start -->
     <div class="controlBar" v-if="!showInput">
-      <div class="saySomething" @click="onFocus">
+      <div
+        class="saySomething"
+        @click="onFocus"
+        :class="{ disabled: !inputStatus }"
+      >
         <!-- <i class="speakIcon"
            :class="{'dis':!user_info.IsWords}"></i> -->
-        <span>说点什么~</span>
-        <!-- <span>已被禁言</span> -->
+        <span v-if="inputStatus">说点什么~</span>
+        <span v-else>已被禁言</span>
 
         <div
           class="disSpeakBtn"
@@ -44,7 +48,7 @@
         <div class="invitation"></div>
         <!-- @click="openMember" -->
         <div class="members" @click="openMember"></div>
-        <template >
+        <template v-if="isNativeLeader">
           <div class="mic_on" v-if="!audioMuted" @click="handleMute"></div>
           <div class="mic_no" v-if="audioMuted" @click="handleNoMute"></div>
         </template>
@@ -52,7 +56,7 @@
         <div style="font-size: 0.65rem" v-if="isNativeLeader">
           <ImageIcon type="scene" @click="showScenes = !showScenes" />
         </div>
-        <div class="exit"></div>
+        <div class="exit" @click="handleCloseRoom"></div>
       </div>
     </div>
     <!-- 控制条 start -->
@@ -117,11 +121,12 @@ import {
   onUnmounted,
   ref,
   unref,
+  watch,
   watchEffect,
 } from "vue";
 import { getApp, useApp } from "/@/hooks/userApp";
 import { initSocketEvent } from "./roomControl";
-import { createSocket } from "/@/hooks/userSocket";
+import { createSocket, useSocket } from "/@/hooks/userSocket";
 import { useRtcSdk } from "/@/hooks/useTRTC";
 import { useDraw } from "/@/hooks/useDraw";
 import browser from "/@/utils/browser";
@@ -133,6 +138,8 @@ import memberList from "./memberList.vue";
 import SceneList from "./sceneList.vue";
 import { useRoom } from "/@/hooks/useRoom";
 import consola from "consola";
+import Dialog from "../basic/dialog";
+import { storeToRefs } from "pinia";
 
 // hook
 const { isDrawing, setDraw, setCloseDraw } = useDraw();
@@ -153,15 +160,25 @@ const role = computed(() => rtcStore.role);
 const text = ref<string>("");
 const chatList = computed(() => rtcStore.chatList);
 const currentUser = computed(() => rtcStore.userId);
+const inputStatus = computed(() => rtcStore.inputStatus);
+
 const members = computed(() => rtcStore.memberList);
 const showScenes = ref(false);
 const audioMuted = computed(() => rtcStore.audioMuted);
 const remoteStreams = computed(() => rtcStore.remoteStreams);
+const currentSession = computed(() => rtcStore.currentSession);
 
-watchEffect(() => {
-  console.log("当前audioMuted", audioMuted.value);
-});
+// watchEffect(() => {
 
+// });
+watch(
+  () => currentSession,
+  (val) => {
+    console.log("当前currentSession", val.value?.IsWords);
+    rtcStore.setinputStatus(!!val.value?.IsWords);
+  },
+  { deep: true, immediate: true }
+);
 //设置socket 参数
 const initParams: SocketParams = {
   userId:
@@ -313,6 +330,23 @@ const handleMute = () => {
   rtcStore.mute();
   localStream.muteVideo();
 };
+
+const handleCloseRoom = () => {
+  Dialog.confirm({
+    showCloseIcon: false,
+    okText: "立即結束",
+    content:
+      "<span style='font-size: 16px; line-height: 1.5;'>是否結束帶看。<span/>",
+    title: "溫馨提示",
+    single: false,
+    func: (state: string) => {
+      if (state == "ok") {
+        const { closeSocket } = useSocket();
+        closeSocket();
+      }
+    },
+  });
+};
 </script>
 
 <style scoped lang="scss">

src/components/chatRoom/memberList.vue

@@ -32,12 +32,14 @@
                 v-if="i?.Role !== 'leader'"
                 :class="i.IsWords ? 'ban_speak_on' : 'ban_speak_off'"
                 :wo="i.IsWords"
-                @click="isNativeLeader && userCanSpeak(i)"
+                @click="isNativeLeader && userCanInput(i)"
               ></div>
               <!-- mic -->
               <div
-                class="micBtn mute_one_mic_on"
+                class="micBtn"
+                :class="i.IsMuted ? 'mute_one_mic_off' : 'mute_one_mic_on'"
                 v-if="i?.Role == 'leader'"
+                @click="isNativeLeader && userCanSpeak(i)"
               ></div>
               <!-- mic -->
               <!-- <div
@@ -86,8 +88,8 @@ const emit = defineEmits(["openMember", "closeMember"]);
 function closeMember(): void {
   emit("closeMember");
 }
-function userCanSpeak(member: UserInfoType) {
-  const socket = useSocket();
+function userCanInput(member: UserInfoType) {
+  const { socket } = useSocket();
   member.IsWords = !member.IsWords;
   socket.emit("action", {
     type: "users-words",
@@ -95,6 +97,16 @@ function userCanSpeak(member: UserInfoType) {
     userId: member.UserId,
   });
 }
+
+function userCanSpeak(member: UserInfoType) {
+  const { socket } = useSocket();
+  member.IsMuted = !member.IsMuted;
+  socket.emit("action", {
+    type: "users-muted",
+    muted: member.IsMuted,
+    userId: member.UserId,
+  });
+}
 </script>
 
 <style lang="scss">

src/components/registerComponent.ts

@@ -1,6 +1,7 @@
 
 // import Dialog, { Toast, Alert } from '/@/components/basic/dialog'
 import Dialog, { Window, Toast, Alert, DialogContent } from '/@/components/basic/dialog'
+import Button from '/@/components/basic/button/index.vue'
 import type { App } from 'vue'
 
 function setup(...Components) {
@@ -13,7 +14,7 @@ function setup(...Components) {
     return Components
 }
 // 注册带install与use hook
-const registerComponent = setup(Dialog, Window, Toast, Alert, DialogContent)
+const registerComponent = setup(Dialog, Window, Toast, Alert, DialogContent, Button)
 // console.log('registerComponent', registerComponent)
 export default {
     install: (app: App) => {

src/store/modules/rtc.ts

@@ -29,7 +29,9 @@ interface RtcState {
     mode: string,
     chatList: ChatContentType[],
     memberList: UserInfoType[],
-    audioMuted: boolean
+    audioMuted: boolean,
+    inputStatus: boolean,
+    currentSession: Nullable<UserInfoType>
 }
 
 interface DeviceListParams {
@@ -99,12 +101,14 @@ export const useRtcStore = defineStore({
         mode: '',
         chatList: [],
         memberList: [],
-        audioMuted: true
+        audioMuted: true,
+        inputStatus: true,
+        currentSession: null
     }),
     persist: {
         storage: localStorage,
         paths: ['memberList'],
-      },
+    },
     getters: {
         checkUserInMemberList() {
             return (userId: string) => this.memberList.find(item => item.UserId === userId)
@@ -128,7 +132,7 @@ export const useRtcStore = defineStore({
                 return this.remoteStreams.some(item => item.getUserId() === userId)
             }
         }
-    },    
+    },
     actions: {
         setSocketParams(params: SocketParams): void {
             this.avatar = params.avatar
@@ -201,6 +205,7 @@ export const useRtcStore = defineStore({
                     }
                     if (current.UserId === this.userId) {
                         current.order = 1
+                        this.currentSession = current
                     }
 
                     prev.push(current);
@@ -211,19 +216,37 @@ export const useRtcStore = defineStore({
             console.log('sortList', sortList)
             this.memberList = sortList
         },
+
+        clearMemberList(): void {
+            this.memberList = []
+        },
         updateMemberDatabyId(UserId: string, data: Partial<UserInfoType>) {
             const updateIndex = this.memberList.findIndex(member => member.UserId === UserId)
             if (updateIndex > -1) {
                 this.memberList[updateIndex] = Object.assign({}, this.memberList[updateIndex], data)
+                //单点更新并是当事人也更一份数据
+                if (UserId === this.userId) {
+                    this.currentSession = this.memberList[updateIndex]
+                }
             }
-
         },
         mute() {
-            this.audioMuted = true
+            this.setMute(false)
         },
         unmute() {
-            this.audioMuted = false
+            this.setMute(true)
+        },
+        setMute(mute: boolean) {
+            this.audioMuted = mute
+            this.updateMemberDatabyId(this.userId, {
+                IsMuted: mute,
+              });
         },
+
+        setinputStatus(status: boolean) {
+            this.inputStatus = status
+        },
+
         pushRemoteStreams(stream: RemoteStream) {
             this.remoteStreams.push(stream)
         },
@@ -233,6 +256,7 @@ export const useRtcStore = defineStore({
                 this.remoteStreams.splice(existStreamIndex, 1)
             }
         }
-    }
+    },
+
 
 })