更新

package-lock.json

@@ -5710,6 +5710,11 @@
         "vscode-vue-languageservice": "0.29.8"
       }
     },
+    "vue-virtual-scroll-list": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-2.3.3.tgz",
+      "integrity": "sha512-heuwlZ+lEdcVSp66CpVXnyNdsiHl/XU1cvqJb0yUHGlLv6DGK8OX16FH8I3w/wKNXtHSPF9itdBBGJFrXkyHeg=="
+    },
     "webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",

package.json

@@ -18,7 +18,8 @@
     "nprogress": "^0.2.0",
     "umi-request": "^1.4.0",
     "vue": "^3.2.25",
-    "vue-router": "^4.0.12"
+    "vue-router": "^4.0.12",
+    "vue-virtual-scroll-list": "^2.3.3"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.1",

src/App.vue

@@ -36,6 +36,24 @@ body {
   background-color: #eef4f9 !important;
 }
 
+::-webkit-scrollbar {
+  width: 8px; /* 纵向滚动条*/
+  height: 8px; /* 横向滚动条 */
+  background-color: #fff;
+}
+
+/*定义滚动条轨道 内阴影*/
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0);
+  background-color: #fff;
+}
+
+/*定义滑块 内阴影*/
+::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0);
+  background-color: #d5d5d5;
+}
+
 .el-dialog {
   margin-bottom: 10vh;
   .el-dialog__header {

src/components/empty/index.module.less

@@ -0,0 +1,13 @@
+.empty-container {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  color: #A4A6A9;
+  font-size: 14px;
+  padding-top: 20px;
+  .icon {
+    width: 126px;
+    height: 89px;
+    margin-bottom: 8px;
+  }
+}

src/components/empty/index.tsx

@@ -0,0 +1,27 @@
+import { defineComponent } from "vue";
+import styles from './index.module.less'
+
+export default defineComponent({
+  props: {
+    text: {
+      type: String,
+      default: '暂无数据'
+    },
+    iconClass: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: 'noData-no-message'
+    }
+  },
+  render() {
+    return (
+      <div class={styles["empty-container"]}>
+        <SvgIcon name={this.icon} class={[styles.icon, this.iconClass]} />
+        <p class={styles['empty-text']}>{this.text}</p>
+      </div>
+    )
+  }
+})

src/components/live-broadcast/action-bar.module.less

@@ -4,7 +4,19 @@
   padding: 14px 22px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   button{
     overflow: hidden;
   }
 }
+.bar-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--live-color);
+  font-size: 14px;
+  .bar-btn-text {
+    padding-top: 6px;
+    line-height: 1;
+  }
+}

src/components/live-broadcast/action-bar.tsx

@@ -8,49 +8,105 @@ export default defineComponent({
   render() {
     return (
       <div class={styles['action-bar']}>
-        <ElButton onClick={RuntimeUtils.shareScreenVideo} type="primary" color="transparent">
-          <SvgIcon
-            name="screen-share"
-            style={{
-              width: '52px'
+        <div style={{ display: 'flex' }}>
+          <ElDropdown
+            placement="top"
+            onCommand={RuntimeUtils.setSelectCamera}
+            // @ts-ignore
+            vSlots={{
+              dropdown: () => (
+                <ElDropdownMenu>
+                  {runtime.cameras.map(item => (<ElDropdownItem command={item}>{item.label}</ElDropdownItem>))}
+                </ElDropdownMenu>
+              )
             }}
-          />
-        </ElButton>
-        <ElDropdown
-          placement="top"
-          onCommand={RuntimeUtils.setSelectCamera}
-          // @ts-ignore
-          vSlots={{
-            dropdown: () => (
-              <ElDropdownMenu>
-                {runtime.cameras.map(item => (<ElDropdownItem command={item}>{item.label}</ElDropdownItem>))}
-              </ElDropdownMenu>
-            )
-          }}
-        >
-          <ElButton type="primary" color="transparent">
-            <SvgIcon
-              name="camera"
-              style={{
-                width: '52px'
-              }}
-            />
-          </ElButton>
-        </ElDropdown>
-        <ElDropdown
-          placement="top"
-          onCommand={RuntimeUtils.setSelectMicrophone}
-          // @ts-ignore
-          vSlots={{
-            dropdown: () => (
-              <ElDropdownMenu>
-                {runtime.microphones.map(item => (<ElDropdownItem command={item}>{item.label}</ElDropdownItem>))}
-              </ElDropdownMenu>
-            )
-          }}
-        >
-          <ElButton type="primary">音频设备</ElButton>
-        </ElDropdown>
+          >
+            <div class={styles['bar-btn']}>
+              <ElButton type="primary" color="transparent">
+                <SvgIcon
+                  name="camera"
+                  style={{
+                    width: '52px'
+                  }}
+                />
+              </ElButton>
+              <span class={styles['bar-btn-text']}>摄像头</span>
+            </div>
+          </ElDropdown>
+          <div class={styles['bar-btn']}>
+            <ElButton type="primary" color="transparent">
+              <SvgIcon
+                name="volume"
+                style={{
+                  width: '52px'
+                }}
+              />
+            </ElButton>
+            <span class={styles['bar-btn-text']}>音量调节</span>
+          </div>
+          <div class={styles['bar-btn']} onClick={RuntimeUtils.shareScreenVideo}>
+            <ElButton type="primary" color="transparent">
+              <SvgIcon
+                name="screen-share"
+                style={{
+                  width: '52px'
+                }}
+              />
+            </ElButton>
+            <span class={styles['bar-btn-text']}>屏幕共享</span>
+          </div>
+          {/* <div class={styles['bar-btn']}>
+            <ElButton type="primary" color="transparent">
+              <SvgIcon
+                name="beauty"
+                style={{
+                  width: '52px'
+                }}
+              />
+            </ElButton>
+            <span class={styles['bar-btn-text']}>美颜</span>
+          </div> */}
+          <div class={styles['bar-btn']}>
+            <ElButton type="primary" color="transparent">
+              <SvgIcon
+                name="mike"
+                style={{
+                  width: '52px'
+                }}
+              />
+            </ElButton>
+            <span class={styles['bar-btn-text']}>麦克风</span>
+          </div>
+
+          {/* <ElDropdown
+            placement="top"
+            onCommand={RuntimeUtils.setSelectMicrophone}
+            // @ts-ignore
+            vSlots={{
+              dropdown: () => (
+                <ElDropdownMenu>
+                  {runtime.microphones.map(item => (<ElDropdownItem command={item}>{item.label}</ElDropdownItem>))}
+                </ElDropdownMenu>
+              )
+            }}
+          >
+            <ElButton type="primary">音频设备</ElButton>
+          </ElDropdown> */}
+        </div>
+        <div style={{ display: 'flex' }}>
+          <div class={styles['bar-btn']}>
+            <ElButton type="primary" color="transparent">
+              <SvgIcon
+                name="share"
+                style={{
+                  width: '52px'
+                }}
+              />
+            </ElButton>
+            <span class={styles['bar-btn-text']}>分享</span>
+          </div>
+        </div>
+        {/* <ElButton onClick={RuntimeUtils.shareScreenVideo}>屏幕共享</ElButton> */}
       </div>
     )
   }

src/components/live-message/index.module.less

@@ -6,6 +6,7 @@
 }
 
 .dataCount {
+  text-align: center;
   margin: 16px;
   border-radius: 2px;
   background-color: var(--message-color);
@@ -20,11 +21,23 @@
     padding-bottom: 16px;
   }
   .text {
+    display: flex;
     font-size: 14px;
   }
+
+  .dataIcon {
+    padding-right: 5px;
+    width: 20px;
+    height: 20px;
+  }
 }
 
 .tabContainer {
+  .tabIcon {
+    margin-right: 6px;
+    width: 20px;
+    height: 20px;
+  }
   :global {
     .el-tabs__header {
       margin-bottom: 0;
@@ -64,4 +77,8 @@
   position: relative;
   height: calc(100vh - var(--header-bar-height) - var(--message-bar-height) - 216px);
   padding-bottom: var(--message-bar-height);
+  .tabList {
+    height: calc(100vh - var(--header-bar-height) - var(--message-bar-height) - 276px);
+    overflow: auto;
+  }
 }

src/components/live-message/index.tsx

@@ -2,8 +2,8 @@ import { defineComponent } from "vue"
 import { ElTabs, ElTabPane } from "element-plus"
 import styles from './index.module.less'
 import Message from './message'
-import SendMessage from './sendMessage';
-import ItemList from './itemList'
+import SendMessage from './send-message';
+import ItemList from './item-list'
 
 type tabStatus = 'message' | 'join' | 'look'
 
@@ -25,25 +25,38 @@ export default defineComponent({
         <div class={styles.dataCount}>
           <div>
             <p class={styles.num}>1361</p>
-            <p class={styles.text}>当前观看</p>
+            <p class={styles.text}><SvgIcon name="message-look" color="red" class={styles.dataIcon} />当前观看</p>
           </div>
           <div>
             <p class={styles.num}>1361</p>
-            <p class={styles.text}>累计点赞</p>
+            <p class={styles.text}><SvgIcon name="message-giveUp" class={styles.dataIcon} />累计点赞</p>
           </div>
         </div>
 
         <ElTabs modelValue={this.modelIndex} onTab-click={this.tabChange} class={styles.tabContainer} >
-          <ElTabPane label="聊天" name="message"></ElTabPane>
-          <ElTabPane label="连麦" name="join"></ElTabPane>
-          <ElTabPane label="观看" name="look"></ElTabPane>
+          <ElTabPane
+            // @ts-ignore
+            vSlots={{
+              label: () => <span style={{ display: 'flex', alignItems: 'center' }}><SvgIcon name="message-message" class={styles.tabIcon} />聊天</span>
+            }} name="message"></ElTabPane>
+          <ElTabPane
+            // @ts-ignore
+            vSlots={{
+              label: () => <span style={{ display: 'flex', alignItems: 'center' }}><SvgIcon name="message-evenEtc" class={styles.tabIcon} />连麦</span>
+            }} name="join"></ElTabPane>
+          <ElTabPane
+            // @ts-ignore
+            vSlots={{
+              label: () => <span style={{ display: 'flex', alignItems: 'center' }}><SvgIcon name="message-look" class={styles.tabIcon} />观看</span>
+            }} name="look"></ElTabPane>
         </ElTabs>
         <div class={styles.tabContent}>
           <Message />
-          {this.modelIndex === 'message' && <ItemList type="message" />}
-          {this.modelIndex === 'join' && <ItemList type="join" />}
-          {this.modelIndex === 'look' && <ItemList type="look" />}
-
+          <div class={styles.tabList}>
+            {this.modelIndex === 'message' && <ItemList type="message" />}
+            {this.modelIndex === 'join' && <ItemList type="join" />}
+            {this.modelIndex === 'look' && <ItemList type="look" />}
+          </div>
           <SendMessage />
         </div>
       </div>

src/components/live-message/itemList.module.less → src/components/live-message/item-list.module.less

@@ -9,6 +9,7 @@
   }
 }
 
+
 .itemInfo {
   width: 100%;
 }

src/components/live-message/item-list.tsx

@@ -0,0 +1,107 @@
+import { defineComponent } from "vue";
+import { ElTag, ElIcon, ElButton } from "element-plus";
+import styles from './item-list.module.less';
+import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
+import dayjs from 'dayjs';
+import Empty from "../empty";
+// import VirtualList from 'vue-virtual-scroll-list';
+import LookModel from './model/look-model';
+
+type itemType = 'message' | 'join' | 'look'
+
+export default defineComponent({
+  props: {
+    type: {
+      type: String,
+      default: 'join' as itemType
+    }
+  },
+  data() {
+    return {
+      lookList: [] as any[],
+    }
+  },
+  mounted() {
+    event.on(LIVE_EVENT_MESSAGE["RC:Chatroom:Welcome"], this.onWelcome);
+    event.on(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onmessage);
+  },
+  methods: {
+    onmessage(val: any) {
+      console.log(val);
+    },
+    onWelcome(value: any) {
+      console.log(value)
+      const sendTime = dayjs(value.$EventMessage.sentTime || new Date()).format('HH:mm:ss')
+      let tempObj = {
+        name: value.user.name,
+        id: value.user.id,
+        sendTime
+      }
+      this.lookList.push(tempObj);
+    }
+  },
+  beforeUnmount() {
+    event.off(LIVE_EVENT_MESSAGE["RC:Chatroom:Welcome"], this.onmessage);
+    event.off(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onmessage);
+  },
+  render() {
+    return (
+      <div>
+        { this.type === 'message' ? 
+          this.lookList && this.lookList.length > 0 ? this.lookList.map(item => (
+            <div class={styles.itemContent}>
+              <img src="/src/assets/home/placehorder-icon.png" alt="" />
+              <div class={styles.itemInfo}>
+                <div class={styles.itemName}>
+                  <p class={styles.userName}>唐老师 <ElTag >主播</ElTag></p>
+                  <p class={styles.rightTime}>18:30:00</p>
+                </div>
+                <div class={styles.itemText}>
+                  请问老师，我在乐团学习长笛已经2年了，目前可以把1-4级都熟练吹奏，接下来要怎么继续提高呢？
+                </div>
+              </div>
+            </div>
+          )) : <Empty text="暂无学员互动！" iconClass="" icon="noData-no-message" />
+        : null }
+
+        { this.type === 'join' ?
+          this.lookList && this.lookList.length > 0 ? this.lookList.map(item => (
+            <div class={styles.itemContent}>
+              <img src="/src/assets/home/placehorder-icon.png" alt="" />
+              <div class={styles.itemInfo}>
+                <div class={styles.itemName}>
+                  <p class={styles.userName}>唐老师 </p>
+                </div>
+                <div class={styles.joinText}>
+                  <div class={styles.join}>
+                    申请连麦
+                  </div>
+                  <div class={styles.btn}>下麦</div>
+                </div>
+              </div>
+            </div>
+          )) : <Empty text="暂无学员发起连麦！" icon="noData-no-join" />
+        : null }
+
+        { this.type === 'look' ?
+        // <VirtualList
+        //   data-key="id"
+        //   data-sources={this.lookList}
+        //   data-component={LookModel}
+        // />
+        this.lookList && this.lookList.length > 0 ? this.lookList.map(item => (
+          <div class={styles.itemContent}>
+            <img src="/src/assets/home/placehorder-icon.png" alt="" />
+            <div class={styles.itemInfo} >
+              <div class={styles.itemName}>
+                <p class={styles.userName}>{item.name}</p>
+              </div>
+            </div>
+          </div>
+        )) : <Empty text="暂无学员观看！" icon="noData-no-user" />
+
+        : null }
+      </div>
+    )
+  }
+})

src/components/live-message/itemList.tsx

@@ -1,47 +0,0 @@
-import { defineComponent } from "vue";
-import { ElTag, ElIcon, ElButton } from "element-plus";
-import styles from './itemList.module.less';
-type itemType = 'message' | 'join' | 'look'
-
-export default defineComponent({
-  props: {
-    type: {
-      type: String,
-      default: 'join' as itemType
-    }
-  },
-  render() {
-    return (
-      <div class={styles.itemContent}>
-        <img src="/src/assets/home/placehorder-icon.png" alt="" />
-        { this.type === 'message' ? <div class={styles.itemInfo}>
-          <div class={styles.itemName}>
-            <p class={styles.userName}>唐老师 <ElTag >主播</ElTag></p>
-            <p class={styles.rightTime}>18:30:00</p>
-          </div>
-          <div class={styles.itemText}>
-            请问老师，我在乐团学习长笛已经2年了，目前可以把1-4级都熟练吹奏，接下来要怎么继续提高呢？
-          </div>
-        </div> : null }
-
-        { this.type === 'join' ? <div class={styles.itemInfo}>
-          <div class={styles.itemName}>
-            <p class={styles.userName}>唐老师 </p>
-          </div>
-          <div class={styles.joinText}>
-            <div class={styles.join}>
-              申请连麦
-            </div>
-            <div class={styles.btn}>下麦</div>
-          </div>
-        </div> : null }
-
-        { this.type === 'look' ? <div class={styles.itemInfo}>
-          <div class={styles.itemName}>
-            <p class={styles.userName}>唐老师</p>
-          </div>
-        </div> : null }
-      </div>
-    )
-  }
-})

src/components/live-message/model/index.module.less

@@ -0,0 +1,54 @@
+.itemInfo {
+  width: 100%;
+}
+
+.itemName {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 3px;
+  padding-bottom: 8px;
+  .userName {
+    font-size: 16px;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+  }
+  .rightTime {
+    font-size: 12px;
+  }
+  :global {
+    .el-tag--default {
+      border-radius: 20px;
+      margin-left: 8px;
+      padding: 0 12px;
+      height: 20px;
+      line-height: 20px;
+      color: var(--live-color);
+      background: var(--message-color);
+      border-color: var(--message-color);
+    }
+  }
+}
+.itemText {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.joinText {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .join {
+    display: flex;
+    align-items: center;
+  }
+  .btn {
+    font-size: 13px;
+    line-height: 20px;
+    background-color: var(--live-light-color);
+    text-align: center;
+    padding: 3px 15px 1px;
+    border-radius: 2px;
+  }
+}

src/components/live-message/model/look-model.tsx

@@ -0,0 +1,14 @@
+import { defineComponent } from "vue";
+import styles from './index.module.less'
+
+export default defineComponent({
+  render() {
+    return (
+      <div class={styles.itemInfo}>
+        <div class={styles.itemName}>
+          <p class={styles.userName}>唐老师</p>
+        </div>
+      </div>
+    )
+  }
+})

src/components/live-message/sendMessage.tsx → src/components/live-message/send-message.tsx

@@ -1,6 +1,6 @@
 import { defineComponent } from "vue";
 import { ElInput, ElButton } from "element-plus";
-import styles from "./sendMessage.module.less";
+import styles from "./send-message.module.less";
 
 export default defineComponent({
   render() {

src/env.d.ts

@@ -8,3 +8,5 @@ declare module '*.vue' {
 }
 
 declare const SvgIcon: any
+
+// declare module 'vue-virtual-scroll-list';

src/icons/camera.svg

@@ -2,8 +2,8 @@
 <svg width="52px" height="32px" viewBox="0 0 52 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>摄像头备份</title>
     <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="图标状态" transform="translate(-22.000000, -26.000000)">
-            <g id="摄像头备份" transform="translate(22.000000, 26.000000)">
+        <g id="图标状态" transform="translate(-32.000000, -26.000000)">
+            <g id="摄像头备份" transform="translate(32.000000, 26.000000)">
                 <rect id="矩形" fill-opacity="0.33" fill="#5E626D" x="0" y="0" width="52" height="32" rx="16"></rect>
                 <g id="编组" transform="translate(19.000000, 7.000000)" fill="#FFFFFF" fill-rule="nonzero">
                     <path d="M8,0 C12.4109091,0 16,3.63078412 16,8.0929332 C16,11.2418199 14.2109091,13.9750242 11.6036364,15.3177154 L11.6036364,15.3177154 L13.0763636,17.889061 C13.2072727,18.1171345 13.2072727,18.3967086 13.0763636,18.6247822 C12.9454546,18.8528558 12.7054546,18.9926428 12.4472727,18.9926428 L12.4472727,18.9926428 L3.66909091,19 C3.41090909,19 3.17090908,18.860213 3.03999999,18.6321394 C2.90909091,18.4040658 2.90909091,18.1244918 3.03999999,17.8964182 L3.03999999,17.8964182 L4.48363636,15.3618587 C1.83272727,14.0412391 0,11.278606 0,8.0929332 C0,3.63078412 3.58909091,0 8,0 Z M8,4.41432721 C5.99636363,4.41432721 4.36363636,6.06602128 4.36363636,8.0929332 C4.36363636,10.1198451 5.99636363,11.7715392 8,11.7715392 C10.0036364,11.7715392 11.6363636,10.1198451 11.6363636,8.0929332 C11.6363636,6.0660213 10.0036364,4.41432721 8,4.41432721 Z M8,5.88576959 C9.20498491,5.88576959 10.1818182,6.8739504 10.1818182,8.0929332 C10.1818182,9.311916 9.20498491,10.3000968 8,10.3000968 C6.79501509,10.3000968 5.81818181,9.311916 5.81818181,8.0929332 C5.81818181,6.8739504 6.79501509,5.88576959 8,5.88576959 Z M8,2.51248791 C7.59833837,2.51248791 7.27272726,2.8418815 7.27272726,3.2482091 C7.27272726,3.65285576 7.59999999,3.98393031 8,3.98393031 C8.40000001,3.98393031 8.72727274,3.65285574 8.72727274,3.2482091 C8.72727274,2.84356245 8.40000001,2.51248791 8,2.51248791 Z" id="形状结合"></path>

src/icons/message/activeVoice.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="13px" viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="聊天/连麦/观看（列表）" transform="translate(-522.000000, -372.000000)" fill="currentColor" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(406.000000, 0.000000)">
+                <g id="账号姓名备份-9" transform="translate(16.000000, 339.000000)">
+                    <g id="编组" transform="translate(100.000000, 33.000000)">
+                        <path d="M3.59362094,2.99468313 L3.59362094,10.0017548 L1.1965182,10.0017548 C0.535739246,10.0017548 0,9.47448998 0,8.84415087 L0,4.15129595 C0,3.51302804 0.530656331,2.99468313 1.1965182,2.99468313 L3.59362094,2.99468313 Z M7.42613889,0.191854476 C7.95577864,-0.194674228 8.38477667,0.0233676051 8.38477667,0.661635517 L8.38477667,12.3348024 C8.38477667,12.9809991 7.95984497,13.1950765 7.42715547,12.8045834 L3.59463752,10.0017548 L3.59463752,2.99468313 L7.42715547,0.191854476 L7.42613889,0.191854476 Z M12.7804816,11.4130801 C12.4470424,11.0939461 12.4470424,10.6677735 12.7804816,10.3476484 C14.8898914,8.32382376 14.8898914,5.1285198 12.7804816,3.10469515 C12.4470424,2.7845701 12.4470424,2.35839742 12.7804816,2.03926346 C13.1129043,1.71913841 13.557151,1.71913841 13.8905903,2.03926346 C15.222314,3.31778149 16,4.91543347 16,6.62012417 C16,8.32481486 15.2233306,10.0285145 13.8905903,11.1999938 C13.7377662,11.3336133 13.5407767,11.4092379 13.3355359,11.4130801 C13.1129043,11.6261664 12.8912892,11.5201188 12.7804816,11.4130801 L12.7804816,11.4130801 Z M10.5592477,10.2416008 C10.3540069,10.2377586 10.1570174,10.1621339 10.0041934,10.0285145 C9.67075418,9.7093805 9.67075418,9.28320783 10.0041934,8.96308278 C11.3359171,7.68456475 11.3359171,5.76777882 10.0041934,4.48926079 C9.67075418,4.16913574 9.67075418,3.74395416 10.0041934,3.42382911 C10.336616,3.10469515 10.7808628,3.10469515 11.1143021,3.42382911 C13.1129043,5.23456742 13.1129043,8.11172853 11.1143021,9.92246684 C10.892687,10.1355532 10.7808628,10.2416008 10.5592477,10.2416008 L10.5592477,10.2416008 Z" id="形状"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/message/evenEtc.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>连麦</title>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="聊天/连麦/观看（列表）" transform="translate(-164.000000, -159.000000)">
+            <g id="编组-8备份" transform="translate(164.000000, 158.000000)">
+                <g id="连麦" transform="translate(0.000000, 1.000000)">
+                    <rect id="矩形" x="0" y="0" width="20" height="20"></rect>
+                    <path d="M11.4745,16.8524118 C11.4915,16.9429113 11.5,17.0364108 11.5,17.1314103 L11.5,17.367909 C11.5,17.9509057 11.1665,18.4899027 10.625,18.7814011 C10.078075,19.0728663 9.42192494,19.0728663 8.87499999,18.7814011 C8.33349999,18.4899027 8,17.9514057 8,17.367909 L8,17.1314103 C8,16.996411 8.01749999,16.8649118 8.051,16.7394125 C5.14099999,15.9414169 3,13.401931 3,10.3684479 C3,9.88845057 3.38249999,9.49995273 3.8545,9.49995273 C4.32649999,9.49995273 4.709,9.88895057 4.709,10.3684479 C4.709,13.054433 7.063,15.2634207 10,15.2634207 C12.937,15.2634207 15.291,13.055433 15.291,10.3684479 C15.291,9.88845057 15.6735,9.49995273 16.1455,9.49995273 C16.6175,9.49995273 17,9.88895057 17,10.3684479 C17,13.5634301 14.624,16.2124154 11.4745,16.8524118 Z M9.949,1 L10.051,1 C13.017,1 14.5,2.48949171 14.5,5.46847515 L14.5,9.53145256 C14.5,12.509936 13.017,13.9999277 10.051,13.9999277 L9.949,13.9999277 C6.98299999,13.9999277 5.49999999,12.510436 5.49999999,9.53145256 L5.49999999,5.46847515 C5.49999999,2.48999171 6.98299999,1 9.949,1 Z" id="形状" fill="currentColor" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/message/giveUp.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="聊天/连麦/观看（列表）" transform="translate(-232.000000, -93.000000)">
+            <g id="编组-7" transform="translate(16.000000, 16.000000)">
+                <g id="编组" transform="translate(216.000000, 77.000000)">
+                    <rect id="矩形" x="0" y="0" width="20" height="20"></rect>
+                    <path d="M5.94138118,7.47778117 C6.63139912,7.47778117 7.19077706,8.05004454 7.19077706,8.75595723 L7.19077706,15.7218239 C7.19077706,16.4277366 6.63139912,17 5.94138118,17 L5.24939587,17 C4.55937794,17 4,16.4277366 4,15.7218239 L4,8.75595723 C4,8.05004454 4.55937794,7.47778117 5.24939587,7.47778117 L5.94138118,7.47778117 Z M9.7509706,4.04993461 C9.89153011,2.58002876 11.3154433,3.08304885 11.3154433,3.08304885 C13.5608576,4.48120825 11.9664114,7.84410753 11.8278193,8.20398989 L11.8278193,8.20398989 L12.327,8.207 L12.3275644,8.20505543 L14.8762182,8.20505543 C14.9056786,8.20505543 14.934629,8.21445907 14.962963,8.22918823 L15.5701875,8.23595613 C15.7571703,8.29858629 15.9048057,8.4489291 15.9674475,8.63957644 C15.9884603,8.70355966 16,8.77183887 16,8.84307792 L16,8.84307792 L15.4370841,16.3204045 C15.4370841,16.6733693 15.1560477,16.9594925 14.8110305,16.9594925 L14.8110305,16.9594925 L7.68675276,16.985353 L7.68675276,7.82183264 C9.6706556,7.08123065 9.63775588,5.23398785 9.7509706,4.04993461 Z" id="形状结合" fill="currentColor" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/message/look.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>观看</title>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="聊天/连麦/观看（列表）" transform="translate(-284.000000, -159.000000)">
+            <g id="编组-9备份" transform="translate(284.000000, 158.000000)">
+                <g id="观看" transform="translate(0.000000, 1.000000)">
+                    <path d="M18.9707317,6.13895216 C18.9707317,5.13211845 18.297561,4.71753986 17.4780488,5.22095672 L15.604878,6.34624146 L15.604878,5.45785877 C15.604878,4.12528474 14.5219512,3 13.1756098,3 L3.42926829,3 C2.11219512,3 1,4.09567198 1,5.45785877 L1,13.5421412 C1,14.8747153 2.08292683,16 3.42926829,16 L13.1756098,16 C14.4926829,16 15.604878,14.904328 15.604878,13.5421412 L15.604878,12.594533 L17.5365854,13.7790433 C18.3560976,14.2824601 19,13.8678815 19,12.8610478 L18.9707317,6.13895216 L18.9707317,6.13895216 Z M11.3317073,9.89977221 L7.3804878,12.5056948 C7.29268293,12.5649203 7.20487805,12.5649203 7.11707317,12.5649203 C6.85365854,12.5649203 6.6195122,12.3280182 6.6195122,12.0615034 L6.6195122,6.87927107 C6.6195122,6.7904328 6.64878049,6.70159453 6.67804878,6.61275626 C6.82439024,6.37585421 7.11707317,6.28701595 7.35121951,6.43507973 L11.302439,9.04100228 C11.3609756,9.07061503 11.4195122,9.12984055 11.4780488,9.21867882 C11.6536585,9.45558087 11.5658537,9.78132118 11.3317073,9.89977221 L11.3317073,9.89977221 Z" id="形状" fill="currentColor" fill-rule="nonzero"></path>
+                    <rect id="矩形" x="0" y="0" width="20" height="20"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/message/message.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>聊天互动</title>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="聊天/连麦/观看（列表）" transform="translate(-450.000000, -159.000000)">
+            <g id="编组-4" transform="translate(406.000000, 0.000000)">
+                <g id="编组-7备份-2" transform="translate(44.000000, 158.000000)">
+                    <g id="聊天互动" transform="translate(0.000000, 1.000000)">
+                        <rect id="矩形" x="0" y="0" width="20" height="20"></rect>
+                        <path d="M17.5502165,9.16109872 C18.3507762,9.16109872 19,9.80055549 19,10.5904921 L19,14.4847221 C19,15.2740479 18.3507762,15.9141409 17.5502165,15.9141409 L16.5250923,15.9141409 L16.525686,16.5320679 C16.5331715,16.783682 16.3743501,17.0432617 16.0759632,16.9939162 L15.9458707,16.9544448 L15.7714073,16.8606907 L14.3416023,15.91409 L11.4851156,15.91409 C10.6845043,15.91409 10.0353321,15.273997 10.0353321,14.4846966 L10.0353321,10.5904921 C10.0353321,9.80114082 10.6845559,9.16109872 11.4851156,9.16109872 L17.5502165,9.16109872 Z M14.5391933,3 C15.8751974,3 16.9578566,4.06748334 16.9578566,5.38462127 L16.9578566,7.91972243 L11.251775,7.91972243 C9.91579665,7.91974788 8.83313747,8.98723122 8.83313747,10.3043692 L8.83313747,14.8892338 L7.38645142,15.8469047 L7.09498214,16.0029325 L6.8785742,16.0689217 C6.38073786,16.1508929 6.11613889,15.718031 6.12803823,15.2980718 L6.12930301,14.267006 L4.4186633,14.267006 C3.08265918,14.267006 2,13.1995226 2,11.8823847 L2,5.38462127 C2,4.06743244 3.08271081,3 4.4186633,3 L14.5391933,3 Z" id="形状结合" fill="currentColor" fill-rule="nonzero"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/message/voice.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="13px" viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="聊天/连麦/观看（列表）" transform="translate(-522.000000, -303.000000)" fill="currentColor" fill-rule="nonzero">
+            <g id="编组-4" transform="translate(406.000000, 0.000000)">
+                <g id="账号姓名备份-8" transform="translate(16.000000, 270.000000)">
+                    <g id="编组" transform="translate(100.000000, 33.000000)">
+                        <path d="M3.59362094,2.99468313 L3.59362094,10.0017548 L1.1965182,10.0017548 C0.535739246,10.0017548 0,9.47448998 0,8.84415087 L0,4.15129595 C0,3.51302804 0.530656331,2.99468313 1.1965182,2.99468313 L3.59362094,2.99468313 Z M7.42613889,0.191854476 C7.95577864,-0.194674228 8.38477667,0.0233676051 8.38477667,0.661635517 L8.38477667,12.3348024 C8.38477667,12.9809991 7.95984497,13.1950765 7.42715547,12.8045834 L3.59463752,10.0017548 L3.59463752,2.99468313 L7.42715547,0.191854476 L7.42613889,0.191854476 Z M12.7804816,11.4130801 C12.4470424,11.0939461 12.4470424,10.6677735 12.7804816,10.3476484 C14.8898914,8.32382376 14.8898914,5.1285198 12.7804816,3.10469515 C12.4470424,2.7845701 12.4470424,2.35839742 12.7804816,2.03926346 C13.1129043,1.71913841 13.557151,1.71913841 13.8905903,2.03926346 C15.222314,3.31778149 16,4.91543347 16,6.62012417 C16,8.32481486 15.2233306,10.0285145 13.8905903,11.1999938 C13.7377662,11.3336133 13.5407767,11.4092379 13.3355359,11.4130801 C13.1129043,11.6261664 12.8912892,11.5201188 12.7804816,11.4130801 L12.7804816,11.4130801 Z M10.5592477,10.2416008 C10.3540069,10.2377586 10.1570174,10.1621339 10.0041934,10.0285145 C9.67075418,9.7093805 9.67075418,9.28320783 10.0041934,8.96308278 C11.3359171,7.68456475 11.3359171,5.76777882 10.0041934,4.48926079 C9.67075418,4.16913574 9.67075418,3.74395416 10.0041934,3.42382911 C10.336616,3.10469515 10.7808628,3.10469515 11.1143021,3.42382911 C13.1129043,5.23456742 13.1129043,8.11172853 11.1143021,9.92246684 C10.892687,10.1355532 10.7808628,10.2416008 10.5592477,10.2416008 L10.5592477,10.2416008 Z" id="形状"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/mike-disabled.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="32px" viewBox="0 0 52 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 19备份</title>
+    <defs>
+        <path d="M16.1424,5.7067 L2.7074,19.1417 C2.3174,19.5317 2.3174,20.1657 2.7074,20.5567 L2.7074,20.5567 C3.0984,20.9467 3.7304,20.9467 4.1214,20.5567 L4.1214,20.5567 L17.5564,7.1207 C17.9474,6.7307 17.9474,6.0977 17.5564,5.7067 L17.5564,5.7067 C17.3614,5.5117 17.1054,5.4137 16.8494,5.4137 L16.8494,5.4137 C16.5944,5.4137 16.3384,5.5117 16.1424,5.7067 L16.1424,5.7067 Z" id="path-1"></path>
+    </defs>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标状态" transform="translate(-228.000000, -116.000000)">
+            <g id="编组-19备份" transform="translate(228.000000, 116.000000)">
+                <rect id="矩形备份-13" fill-opacity="0.33" fill="#5E626D" x="0" y="0" width="52" height="32" rx="16"></rect>
+                <g id="编组" transform="translate(17.000000, 6.000000)">
+                    <path d="M16.0596,9.9147 C16.5816,9.9147 17.0026,10.3337 17.0006071,10.8497 C17.0006071,15.1017 13.7876,18.6257 9.6336,19.1767 L9.6336,19.1767 L9.6336,19.8797 C9.6336,20.4957 9.1226,20.9997 8.5006,20.9997 C7.8776,20.9997 7.3676,20.4957 7.3676,19.8797 L7.3676,19.8797 L7.3676,19.1767 C6.3226,19.0387 5.3366,18.7107 4.4466,18.2317 L4.4466,18.2317 L5.8466,16.8307 C6.6606,17.1857 7.5576,17.3857 8.5026,17.3857 C12.1486,17.3857 15.1146,14.4547 15.1146,10.8497 C15.1146,10.3337 15.5376,9.9147 16.0596,9.9147 Z M0.946,9.9143 C1.468,9.9143 1.891,10.3333 1.891,10.8493 C1.891,12.7913 2.756,14.5323 4.119,15.7303 L4.119,15.7303 L2.79,17.0593 C1.08,15.5223 0,13.3103 0,10.8493 C0,10.3333 0.424,9.9143 0.946,9.9143 Z M13.5334,9.1445 L13.5334,10.3385 C13.5294,13.1075 11.3024,15.3515 8.5544,15.3535 C8.1764,15.3535 7.8114,15.3025 7.4564,15.2205 L7.4564,15.2205 L13.5334,9.1445 Z M8.5552,0 C11.3032,0.001 13.5302,2.246 13.5332,5.015 L13.5332,5.015 L13.5332,6.316 L5.5452,14.305 C4.3582,13.388 3.5812,11.961 3.5792,10.338 L3.5792,10.338 L3.5792,5.015 C3.5822,2.247 5.8082,0.003 8.5552,0 Z M8.5552,1.614 C6.6952,1.614 5.1812,3.139 5.1812,5.015 L5.1812,5.015 L5.1812,5.733 L11.9312,5.733 L11.9312,5.015 C11.9292,3.137 10.4182,1.616 8.5552,1.614 Z" id="形状结合" fill="#FFFFFF"></path>
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Clip-12" fill="#FF3D00" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/mike.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="52px" height="32px" viewBox="0 0 52 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 17备份</title>
+    <defs>
+        <polygon id="path-1" points="0 0 16.9996 0 16.9996 21 0 21"></polygon>
+    </defs>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标状态" transform="translate(-228.000000, -26.000000)">
+            <g id="编组-17备份" transform="translate(228.000000, 26.000000)">
+                <rect id="矩形备份-22" fill-opacity="0.33" fill="#5E626D" x="0" y="0" width="52" height="32" rx="16"></rect>
+                <g id="编组" transform="translate(17.000000, 6.000000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="Clip-2"></g>
+                    <path d="M8.554,0 C5.807,0.004 3.581,2.247 3.579,5.015 L3.579,10.339 C3.581,13.107 5.807,15.351 8.554,15.354 C11.302,15.352 13.529,13.108 13.533,10.339 L13.533,5.015 C13.53,2.246 11.302,0.002 8.554,0 M16.059,9.915 C16.581,9.915 17.002,10.334 17,10.85 C17,15.102 13.786,18.626 9.632,19.177 L9.632,19.88 C9.632,20.496 9.122,21 8.5,21 C7.877,21 7.367,20.496 7.367,19.88 L7.367,19.177 C3.213,18.626 0,15.105 0,10.85 C0,10.334 0.423,9.915 0.945,9.915 C1.467,9.915 1.891,10.334 1.891,10.85 C1.891,14.455 4.856,17.386 8.502,17.386 C12.148,17.386 15.113,14.455 15.113,10.85 C15.113,10.334 15.537,9.915 16.059,9.915 M8.554,1.614 C10.418,1.616 11.928,3.137 11.931,5.015 L11.931,5.734 L5.18,5.734 L5.18,5.015 C5.18,3.14 6.694,1.614 8.554,1.614" id="Fill-1" fill="#FFFFFF" mask="url(#mask-2)"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/noData/no-join.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="126px" height="89px" viewBox="0 0 126 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 10</title>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="聊天/连麦/观看（空状态）" transform="translate(-536.000000, -405.000000)">
+            <g id="编组-10" transform="translate(536.000000, 405.000000)">
+                <rect id="矩形" x="0" y="0" width="126" height="89"></rect>
+                <g id="编组-3" transform="translate(28.462486, 16.000000)">
+                    <path d="M33.4985893,45.6251178 C13.2592731,49.4541776 3.13961494,47.2661434 3.13961494,39.0610152 C3.13961494,26.7533229 20.7152641,30.5321265 17.0883329,40.7020408 C14.6703787,47.4819837 9.47379755,51.5845478 1.4985893,53.0097331" id="路径-5" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" transform="translate(17.498589, 42.170844) rotate(-9.000000) translate(-17.498589, -42.170844) "></path>
+                    <g id="编组" transform="translate(18.000000, 0.000000)" fill-rule="nonzero">
+                        <path d="M30.1142857,28.0059096 C30.1142857,34.2491768 25.1042198,39.3103448 18.9239902,39.3103448 L15.0760105,39.3103448 C8.89578101,39.3103448 3.88571429,34.2491768 3.88571429,28.0059096 L3.88571429,11.304436 C3.88459775,8.30596748 5.06321311,5.4299843 7.16204285,3.30974674 C9.26087259,1.18950918 12.1078173,-0.00112792729 15.0760105,0 L18.9239902,0 C25.1042198,0 30.1142857,5.06116883 30.1142857,11.304436 L30.1142857,28.0059096 L30.1142857,28.0059096 Z" id="路径" fill="#979FCB"></path>
+                        <path d="M31.9317013,21.6206897 L31.9317013,28.5851106 C31.9317013,35.5452668 26.230355,41.1875992 19.1931457,41.1875992 L14.8110159,41.1875992 C7.77380661,41.1875992 2.06829865,35.5452668 2.06829865,28.5851106 L2.06829865,21.6206897 L0,21.6206897 L0,29.8773455 C0,37.8013468 6.49620563,44.2241379 14.50306,44.2241379 L19.4927785,44.2241379 C27.5079559,44.2241379 34,37.8013468 34,29.8773455 L34,21.6206897 L31.9317013,21.6206897 Z" id="路径" fill="#394B97"></path>
+                        <polygon id="路径" fill="#394B97" points="14.5714286 42.2586207 20.4 42.2586207 20.4 53.0689655 14.5714286 53.0689655"></polygon>
+                        <path d="M33.0285714,57 L33.0285714,56.1645094 C33.0285714,53.3693339 30.4549988,51.1034483 27.2686709,51.1034483 L7.70275771,51.1034483 C4.52488153,51.1034483 1.94285714,53.3737082 1.94285714,56.1645094 L1.94285714,57 L33.0285714,57 Z" id="路径" fill="#394B97"></path>
+                        <path d="M18.5710042,9.82758621 L30.1142857,9.82758621 L30.1142857,12.4293141 L18.5710042,12.4293141 L18.5710042,9.82758621 Z M3.88571429,9.82758621 L15.4289958,9.82758621 L15.4289958,12.4293141 L3.88571429,12.4293141 L3.88571429,9.82758621 Z M18.5710042,14.4079221 L30.1142857,14.4079221 L30.1142857,17.00965 L18.5710042,17.00965 L18.5710042,14.4079221 Z M3.88571429,14.4079221 L15.4289958,14.4079221 L15.4289958,17.00965 L3.88571429,17.00965 L3.88571429,14.4079221 Z M18.5710042,19.3483727 L30.1142857,19.3483727 L30.1142857,21.9541469 L18.5710042,21.9541469 L18.5710042,19.3483727 Z M3.88571429,19.3483727 L15.4289958,19.3483727 L15.4289958,21.9541469 L3.88571429,21.9541469 L3.88571429,19.3483727 Z M18.5710042,23.9368011 L30.1142857,23.9368011 L30.1142857,26.5344828 L18.5710042,26.5344828 L18.5710042,23.9368011 Z M3.88571429,23.9368011 L15.4289958,23.9368011 L15.4289958,26.5344828 L3.88571429,26.5344828 L3.88571429,23.9368011 Z" id="形状" fill="#5161A4"></path>
+                    </g>
+                    <path d="M62.6085813,41 C63.1608661,41 63.6085813,41.4477153 63.6085813,42 L63.6075813,45 L66.6085813,45 C67.1608661,45 67.6085813,45.4477153 67.6085813,46 C67.6085813,46.5522847 67.1608661,47 66.6085813,47 L63.6075813,47 L63.6085813,50 C63.6085813,50.5522847 63.1608661,51 62.6085813,51 C62.0562966,51 61.6085813,50.5522847 61.6085813,50 L61.6075813,47 L58.6085813,47 C58.0562966,47 57.6085813,46.5522847 57.6085813,46 C57.6085813,45.4477153 58.0562966,45 58.6085813,45 L61.6075813,45 L61.6085813,42 C61.6085813,41.4477153 62.0562966,41 62.6085813,41 Z" id="形状结合备份" fill="#FFFFFF" transform="translate(62.608581, 46.000000) rotate(-315.000000) translate(-62.608581, -46.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/noData/no-message.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="126px" height="89px" viewBox="0 0 126 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 9</title>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="聊天/连麦/观看（空状态）" transform="translate(-130.000000, -405.000000)">
+            <g id="编组-9" transform="translate(130.000000, 405.000000)">
+                <rect id="矩形" x="0" y="0" width="126" height="89"></rect>
+                <g id="编组-7" transform="translate(27.000000, 22.000000)">
+                    <g id="编组" transform="translate(10.071068, 0.000000)" fill-rule="nonzero">
+                        <path d="M37.75,0 C40.2341569,0.0027284697 42.2472874,2.02762303 42.25,4.52629654 L42.25,4.52629654 L42.25,9.05259314 L24.25,9.05259314 C20.5280078,9.05259314 17.9289322,12.2562577 17.9289322,16 L17.9289322,16 L17.9289322,27 L15.9289322,27 L9.84951813,33.8002351 C9.52776723,34.1239401 9.04382046,34.2207885 8.62338875,34.0456107 C8.20295703,33.8704328 7.92885871,33.4577358 7.92893219,33 L7.92893219,33 L7.92893219,27 L4.92893219,27 C2.44477529,26.9972715 0.00271261803,25.1301563 0,22.6314828 L0,22.6314828 L0,4.52629654 C0.00271261803,2.02762303 2.01584309,0.0027284697 4.5,0 L4.5,0 Z M13.8610377,11.4880133 C13.0202703,11.1377209 12.0525052,11.3313463 11.4090097,11.9786022 C10.7655142,12.6258581 10.5730137,13.5992785 10.921271,14.4449591 C11.2695283,15.2906396 12.08996,15.842038 13,15.842038 C14.2426407,15.842038 15.25,14.8287919 15.25,13.5788897 C15.25,12.6635316 14.7018051,11.8383056 13.8610377,11.4880133 Z" id="形状结合" fill="#5161A4"></path>
+                        <g id="编组-2" transform="translate(20.000000, 11.000000)">
+                            <path d="M35.2941177,0 L4.70588234,0 C2.10807118,0.00284177399 0.00283669435,2.11182347 0,4.71425857 L0,23.5712927 C0.00283672474,26.1737277 2.1080712,28.2827094 4.70588234,28.2855512 L15.9834559,28.2855512 L20.3444853,32.6547113 C20.565124,32.8757932 20.8644046,33 21.1764706,33 C21.4885365,33 21.7878171,32.8757932 22.0084559,32.6547113 L26.3694853,28.2855512 L35.2941177,28.2855512 C37.8919288,28.2827094 39.9971633,26.1737277 40,23.5712927 L40,4.71425857 C39.9971633,2.11182347 37.8919288,0.00284177399 35.2941177,0 Z" id="路径" fill="#979FCB"></path>
+                            <path d="M11.7647059,16.4999049 C10.4652123,16.4999049 9.41176467,15.4445821 9.41176467,14.1427756 C9.41176467,12.840969 10.4652123,11.7856463 11.7647059,11.7856463 C13.0641994,11.7856463 14.1176471,12.840969 14.1176471,14.1427756 C14.1176471,15.4445821 13.0641994,16.4999049 11.7647059,16.4999049 L11.7647059,16.4999049 Z" id="路径" fill="#FFFFFF"></path>
+                            <path d="M21.1764706,16.4999049 C20.2247947,16.4999049 19.366827,15.9256088 19.0026363,15.04481 C18.6384457,14.1640111 18.8397534,13.1501678 19.5126898,12.4760335 C20.1856263,11.8018992 21.1976683,11.6002333 22.0769021,11.9650721 C22.956136,12.3299109 23.5294117,13.1894058 23.5294117,14.1427756 C23.5294117,15.4445821 22.4759641,16.4999049 21.1764706,16.4999049 L21.1764706,16.4999049 Z" id="路径" fill="#FFFFFF"></path>
+                            <path d="M30.5882353,16.4999049 C29.2887417,16.4999049 28.2352941,15.4445821 28.2352941,14.1427756 C28.2352941,12.840969 29.2887417,11.7856463 30.5882353,11.7856463 C31.8877288,11.7856463 32.9411765,12.840969 32.9411765,14.1427756 C32.9411765,15.4445821 31.8877288,16.4999049 30.5882353,16.4999049 Z" id="路径" fill="#FFFFFF"></path>
+                        </g>
+                    </g>
+                    <circle id="椭圆形" fill="#FFFFFF" cx="68.0710678" cy="12" r="4"></circle>
+                    <path d="M7.07106781,32 C7.62335256,32 8.07106781,32.4477153 8.07106781,33 L8.07006781,36 L11.0710678,36 C11.6233526,36 12.0710678,36.4477153 12.0710678,37 C12.0710678,37.5522847 11.6233526,38 11.0710678,38 L8.07006781,38 L8.07106781,41 C8.07106781,41.5522847 7.62335256,42 7.07106781,42 C6.51878306,42 6.07106781,41.5522847 6.07106781,41 L6.07006781,38 L3.07106781,38 C2.51878306,38 2.07106781,37.5522847 2.07106781,37 C2.07106781,36.4477153 2.51878306,36 3.07106781,36 L6.07006781,36 L6.07106781,33 C6.07106781,32.4477153 6.51878306,32 7.07106781,32 Z" id="形状结合备份-2" fill="#FFFFFF" transform="translate(7.071068, 37.000000) rotate(-315.000000) translate(-7.071068, -37.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/noData/no-user.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="126px" height="89px" viewBox="0 0 126 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 11</title>
+    <defs>
+        <ellipse id="path-1" cx="11.240991" cy="11.2444444" rx="11.240991" ry="11.2444444"></ellipse>
+    </defs>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="聊天/连麦/观看（空状态）" transform="translate(-942.000000, -405.000000)">
+            <g id="编组-11" transform="translate(942.000000, 405.000000)">
+                <rect id="矩形" x="0" y="0" width="126" height="89"></rect>
+                <g id="编组-8" transform="translate(32.000000, 27.000000)">
+                    <rect id="矩形" fill="#979FCB" x="3.90990991" y="5.86666667" width="58.0900901" height="38.1333333" rx="3.91111111"></rect>
+                    <path d="M48.7387387,0 C49.2785846,-9.91680838e-17 49.7162162,0.437631573 49.7162162,0.977477477 L49.7153514,3.911 L52.6483483,3.91111111 C53.1883601,3.91111111 53.6261261,4.34887713 53.6261261,4.88888889 C53.6261261,5.42890064 53.1883601,5.86666667 52.6483483,5.86666667 L49.7153514,5.866 L49.7162162,8.8003003 C49.7162162,9.3401462 49.2785846,9.77777778 48.7387387,9.77777778 C48.1988928,9.77777778 47.7612613,9.3401462 47.7612613,8.8003003 L47.7603514,5.866 L44.8291291,5.86666667 C44.2891174,5.86666667 43.8513514,5.42890064 43.8513514,4.88888889 C43.8513514,4.34887713 44.2891174,3.91111111 44.8291291,3.91111111 L47.7603514,3.911 L47.7612613,0.977477477 C47.7612613,0.437631573 48.1988928,9.91680838e-17 48.7387387,0 Z" id="形状结合" fill="#FFFFFF"></path>
+                    <g id="编组-6" transform="translate(0.000000, 0.977778)">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use id="椭圆形" fill="#FFFFFF" xlink:href="#path-1"></use>
+                        <path d="M9.77477477,-1.95555556 C17.5945946,-1.95555556 18.5720721,0.977777778 18.5720721,0.977777778 C18.5720721,0.977777778 17.5945946,6.84444444 11.7297297,7.82222222 L11.7297297,3.91111111 C9.12312312,9.12592593 4.88738739,10.7555556 -0.977477477,8.8 C-1.95495495,4.88888889 1.95495495,-1.95555556 9.77477477,-1.95555556 Z" id="路径-3" fill="#5161A4" mask="url(#mask-2)"></path>
+                    </g>
+                    <path d="M30.4961245,18.58683 L40.0677362,28.1584417 C41.2132741,29.3039796 41.2132741,31.1612635 40.0677362,32.3068015 C39.6518385,32.7226991 39.1205179,33.0039649 38.5427504,33.1140848 L26.717251,35.3679726 C25.1258628,35.6712841 23.5899052,34.6270917 23.2865936,33.0357035 C23.2174335,32.6728401 23.2174335,32.3001786 23.2865936,31.9373152 L25.5404814,20.1118158 C25.8437929,18.5204276 27.3797506,17.4762352 28.9711387,17.7795467 C29.5489063,17.8896666 30.0802269,18.1709324 30.4961245,18.58683 Z" id="矩形" fill="#5161A4" transform="translate(33.232344, 25.422222) rotate(-135.000000) translate(-33.232344, -25.422222) "></path>
+                    <g id="路径-4" transform="translate(3.909910, 15.644444)">
+                        <path d="M0,11.7333333 L20.527027,11.7333333 C21.8303303,11.7333333 22.481982,11.0814815 22.481982,9.77777778 C22.481982,9.04444444 22.481982,8.27037037 22.481982,7.45555556 L22.481982,3.90990991 C22.481982,1.75052629 24.2325083,3.96672335e-16 26.3918919,0 C28.5512755,1.52124559e-15 30.3018018,1.75052629 30.3018018,3.90990991 L30.3018018,10.7555556 L30.3018018,10.7555556 C30.6276276,16.6222222 27.125,19.5555556 19.7939189,19.5555556 L20.8935811,28.3555556 L3.91111111,28.3555556 C1.75106409,28.3555556 7.08618677e-16,26.6044915 0,24.4444444 L0,11.7333333 L0,11.7333333 Z" id="路径-2" fill="#FFFFFF"></path>
+                        <polygon id="矩形" fill="#5161A4" transform="translate(7.121184, 13.165254) rotate(-45.000000) translate(-7.121184, -13.165254) " points="4.48062907 8.49965744 11.4357049 15.4547332 2.80666334 17.83085"></polygon>
+                    </g>
+                    <path d="M11.240991,19.6444444 C13.1304517,19.6444444 14.6621622,18.4233745 14.6621622,16.5333333 C14.6621622,16.5333333 7.81981982,16.5333333 7.81981982,16.5333333 C7.81981982,18.4233745 9.35153033,19.6444444 11.240991,19.6444444 Z" id="椭圆形备份-3" fill="#979FCB"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/screen-share-disabled.svg

@@ -2,8 +2,8 @@
 <svg width="52px" height="32px" viewBox="0 0 52 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>屏幕分享备份 3</title>
     <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="图标状态" transform="translate(-218.000000, -117.000000)">
-            <g id="屏幕分享备份-3" transform="translate(218.000000, 117.000000)">
+        <g id="图标状态" transform="translate(-326.000000, -117.000000)">
+            <g id="屏幕分享备份-3" transform="translate(326.000000, 117.000000)">
                 <rect id="矩形备份-14" fill-opacity="0.33" fill="#5E626D" x="0" y="0" width="52" height="32" rx="16"></rect>
                 <g id="编组" transform="translate(17.000000, 9.000000)" fill="#A4A6A9" fill-rule="nonzero">
                     <path d="M1.80000001,0 C1.32261033,0 0.864773283,0.188137206 0.527207799,0.523023596 C0.189642315,0.857909985 0,1.3121134 0,1.78571428 L0,10.7142857 C0,11.1878866 0.189642315,11.64209 0.527207799,11.9769764 C0.864773283,12.3118628 1.32261033,12.5 1.80000001,12.5 L16.2,12.5 C16.6773897,12.5 17.1352267,12.3118628 17.4727922,11.9769764 C17.8103577,11.64209 18,11.1878866 18,10.7142857 L18,1.78571428 C18,1.3121134 17.8103577,0.857909985 17.4727922,0.523023596 C17.1352267,0.188137206 16.6773897,0 16.2,0 L1.80000001,0 Z M5.4,14.4196428 C5.4,14.2657226 5.46163375,14.1181064 5.57134253,14.0092684 C5.68105132,13.9004303 5.82984836,13.8392857 5.98500001,13.8392857 L12.015,13.8392857 C12.3380866,13.8392857 12.6,14.0991205 12.6,14.4196429 C12.6,14.7401653 12.3380866,15 12.015,15 L5.98500001,15 C5.82984836,15 5.68105131,14.9388554 5.57134253,14.8300173 C5.46163374,14.7211792 5.4,14.5735631 5.4,14.4196428 Z M9.1540358,3.16204122 C9.15545308,2.95729299 9.28103216,2.77253192 9.47453576,2.69049841 C9.66803936,2.60846489 9.89321706,2.64452684 10.049229,2.78253487 L12.4257154,4.89055784 C12.5412713,4.99279754 12.6048538,5.13896765 12.5997104,5.29055613 C12.5945671,5.44214461 12.5212138,5.58394766 12.3989773,5.67860382 L10.0011003,7.53880708 C9.8401883,7.66338604 9.61978965,7.68732168 9.43443428,7.60034789 C9.2490789,7.51337411 9.13170132,7.33094467 9.13264529,7.13130436 L9.14013198,5.71282161 C7.66467809,5.71453815 6.46952481,6.8746283 6.46952588,8.30507811 C6.46952588,8.59141086 6.23010435,8.82352941 5.93476294,8.82352941 C5.63942152,8.82352941 5.4,8.59141086 5.4,8.30507811 C5.4,7.34256527 5.79438652,6.41947445 6.49639906,5.73887509 C7.19841159,5.05827573 8.15054491,4.675919 9.14334056,4.675919 L9.1454796,4.675919 L9.1540358,3.16204122 L9.1540358,3.16204122 Z" id="形状"></path>

src/icons/screen-share.svg

@@ -2,8 +2,8 @@
 <svg width="52px" height="32px" viewBox="0 0 52 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>屏幕分享备份</title>
     <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="图标状态" transform="translate(-218.000000, -26.000000)">
-            <g id="屏幕分享备份" transform="translate(218.000000, 26.000000)">
+        <g id="图标状态" transform="translate(-326.000000, -26.000000)">
+            <g id="屏幕分享备份" transform="translate(326.000000, 26.000000)">
                 <rect id="矩形备份-14" fill-opacity="0.33" fill="#5E626D" x="0" y="0" width="52" height="32" rx="16"></rect>
                 <g id="编组" transform="translate(17.000000, 9.000000)" fill="#FFFFFF" fill-rule="nonzero">
                     <path d="M1.80000001,0 C1.32261033,0 0.864773283,0.188137206 0.527207799,0.523023596 C0.189642315,0.857909985 0,1.3121134 0,1.78571428 L0,10.7142857 C0,11.1878866 0.189642315,11.64209 0.527207799,11.9769764 C0.864773283,12.3118628 1.32261033,12.5 1.80000001,12.5 L16.2,12.5 C16.6773897,12.5 17.1352267,12.3118628 17.4727922,11.9769764 C17.8103577,11.64209 18,11.1878866 18,10.7142857 L18,1.78571428 C18,1.3121134 17.8103577,0.857909985 17.4727922,0.523023596 C17.1352267,0.188137206 16.6773897,0 16.2,0 L1.80000001,0 Z M5.4,14.4196428 C5.4,14.2657226 5.46163375,14.1181064 5.57134253,14.0092684 C5.68105132,13.9004303 5.82984836,13.8392857 5.98500001,13.8392857 L12.015,13.8392857 C12.3380866,13.8392857 12.6,14.0991205 12.6,14.4196429 C12.6,14.7401653 12.3380866,15 12.015,15 L5.98500001,15 C5.82984836,15 5.68105131,14.9388554 5.57134253,14.8300173 C5.46163374,14.7211792 5.4,14.5735631 5.4,14.4196428 Z M9.1540358,3.16204122 C9.15545308,2.95729299 9.28103216,2.77253192 9.47453576,2.69049841 C9.66803936,2.60846489 9.89321706,2.64452684 10.049229,2.78253487 L12.4257154,4.89055784 C12.5412713,4.99279754 12.6048538,5.13896765 12.5997104,5.29055613 C12.5945671,5.44214461 12.5212138,5.58394766 12.3989773,5.67860382 L10.0011003,7.53880708 C9.8401883,7.66338604 9.61978965,7.68732168 9.43443428,7.60034789 C9.2490789,7.51337411 9.13170132,7.33094467 9.13264529,7.13130436 L9.14013198,5.71282161 C7.66467809,5.71453815 6.46952481,6.8746283 6.46952588,8.30507811 C6.46952588,8.59141086 6.23010435,8.82352941 5.93476294,8.82352941 C5.63942152,8.82352941 5.4,8.59141086 5.4,8.30507811 C5.4,7.34256527 5.79438652,6.41947445 6.49639906,5.73887509 C7.19841159,5.05827573 8.15054491,4.675919 9.14334056,4.675919 L9.1454796,4.675919 L9.1540358,3.16204122 L9.1540358,3.16204122 Z" id="形状"></path>

src/icons/share-disabled.svg

@@ -2,8 +2,8 @@
 <svg width="52px" height="32px" viewBox="0 0 52 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>分享</title>
     <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="图标状态" transform="translate(-414.000000, -117.000000)">
-            <g id="分享" transform="translate(414.000000, 117.000000)">
+        <g id="图标状态" transform="translate(-522.000000, -117.000000)">
+            <g id="分享" transform="translate(522.000000, 117.000000)">
                 <rect id="矩形备份-21" fill-opacity="0.33" fill="#5E626D" x="0" y="0" width="52" height="32" rx="16"></rect>
                 <g id="编组" transform="translate(18.000000, 8.000000)" fill="#A4A6A9" fill-rule="nonzero">
                     <path d="M16.0553331,7.55555556 C15.5338307,7.55555556 15.1108886,7.97849758 15.1108886,8.5 C15.1108886,12.1453998 12.1451773,15.1111111 8.49977752,15.1111111 C4.8543777,15.1111111 1.88888889,12.1453998 1.88888889,8.5 C1.88888889,4.85460018 4.85460018,1.88888889 8.5,1.88888889 C9.02150242,1.88888889 9.44444444,1.46594687 9.44444444,0.944444444 C9.44444444,0.422942023 9.02150242,0 8.5,0 C3.81337521,0 0,3.81337521 0,8.5 C0,13.1866248 3.81315273,17 8.5,17 C13.1866248,17 17,13.1866248 17,8.5 C16.9997775,7.97827509 16.577058,7.55555556 16.0553331,7.55555556 Z" id="路径"></path>

src/icons/share.svg

@@ -2,8 +2,8 @@
 <svg width="52px" height="32px" viewBox="0 0 52 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>编组 18备份</title>
     <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="图标状态" transform="translate(-414.000000, -26.000000)">
-            <g id="编组-18备份" transform="translate(414.000000, 26.000000)">
+        <g id="图标状态" transform="translate(-522.000000, -26.000000)">
+            <g id="编组-18备份" transform="translate(522.000000, 26.000000)">
                 <rect id="矩形备份-21" fill-opacity="0.33" fill="#5E626D" x="0" y="0" width="52" height="32" rx="16"></rect>
                 <g id="编组" transform="translate(18.000000, 8.000000)" fill="#FFFFFF" fill-rule="nonzero">
                     <path d="M16.0553331,7.55555556 C15.5338307,7.55555556 15.1108886,7.97849758 15.1108886,8.5 C15.1108886,12.1453998 12.1451773,15.1111111 8.49977752,15.1111111 C4.8543777,15.1111111 1.88888889,12.1453998 1.88888889,8.5 C1.88888889,4.85460018 4.85460018,1.88888889 8.5,1.88888889 C9.02150242,1.88888889 9.44444444,1.46594687 9.44444444,0.944444444 C9.44444444,0.422942023 9.02150242,0 8.5,0 C3.81337521,0 0,3.81337521 0,8.5 C0,13.1866248 3.81315273,17 8.5,17 C13.1866248,17 17,13.1866248 17,8.5 C16.9997775,7.97827509 16.577058,7.55555556 16.0553331,7.55555556 Z" id="路径"></path>