Merge branch 'master' of http://git.dayaedu.com/lex/dy-admin-live

package.json

@@ -19,6 +19,7 @@
     "umi-request": "^1.4.0",
     "vue": "^3.2.25",
     "vue-router": "^4.0.12",
+    "vue-virtual-list-v3": "^1.3.6",
     "vue-virtual-scroll-list": "^2.3.3"
   },
   "devDependencies": {

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

@@ -17,13 +17,16 @@
   font-size: 14px;
   .bar-btn-text {
     padding-top: 6px;
-    line-height: 1;
+    line-height: 20px;
+  }
+  & + & {
+    margin-left: 25px;
   }
 }
 :global {
   .el-button:active {
     border-color: transparent;
-    background-color: transparent;
+    background: rgba(94, 98, 109, 0.33);
   }
   .el-dropdown__popper.el-popper {
     border-color: var(--live-main-color) !important;
@@ -72,4 +75,14 @@
     height: 15px;
     padding-right: 8px;
   }
+}
+
+.btnInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 32px;
+  background: rgba(94, 98, 109, 0.33);
+  border-radius: 16px;
 }

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

@@ -1,5 +1,5 @@
-import { defineComponent  } from 'vue'
-import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElSlider } from 'element-plus'
+import { defineComponent } from 'vue'
+import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElSlider, ElIcon } from 'element-plus'
 import runtime, * as RuntimeUtils from './runtime'
 import styles from './action-bar.module.less'
 
@@ -8,6 +8,26 @@ export default defineComponent({
   data() {
     return {
       volume: 30,
+      barStatus: {
+        camera: false, // 摄像头
+        volume: false, // 声音调节
+        microphone: false, // 麦克风
+        screen: false, // 共享屏幕
+        share: false, // 分享
+      } as {[key: string]: boolean},
+    }
+  },
+  computed: {
+    isCameraDisabled() {
+      // @ts-ignore
+      return this.barStatus.camera && runtime.deviceStatus.camera !== 'denied'
+    },
+    isMicrophoneDisabled() {
+      console.log(this)
+      return this.barStatus.microphone && runtime.deviceStatus.microphone !== 'denied'
+    },
+    isVolumeDisabled() {
+      return this.barStatus.volume && this.volume === 0
     }
   },
   methods: {
@@ -20,112 +40,149 @@ export default defineComponent({
     return (
       <div class={styles['action-bar']} id="action-bar">
         <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>
-              )
-            }}
-          >
-            <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 class={styles['bar-btn']}>
+            <div class={styles.btnInner}>
+              <SvgIcon
+                onClick={() => { this.barStatus.camera = !this.barStatus.camera }}
+                name={this.isCameraDisabled ? 'bar-camera-disabled' : 'bar-camera'}
+                style={{
+                  width: '22px',
+                  cursor: 'pointer'
+                }}
+              />
+              <ElDropdown
+                placement="top"
+                onCommand={RuntimeUtils.setSelectCamera}
+                // @ts-ignore
+                vSlots={{
+                  dropdown: () => (
+                    <ElDropdownMenu>
+                      {runtime.cameras.map(item => (<ElDropdownItem command={item}>{item.label}</ElDropdownItem>))}
+                    </ElDropdownMenu>
+                  )
+                }}
+              >
+                <div class={styles['bar-btn']} style={{ height: '32px' }}>
+                  <SvgIcon
+                    name="bar-arrow-down"
+                    style={{
+                      width: '18px'
+                    }}
+                  />
+                </div>
+              </ElDropdown>
             </div>
-          </ElDropdown>
-          <ElDropdown
-            placement="top-start"
-            popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
-            // @ts-ignore
-            vSlots={{
-              dropdown: () => (
-                <div class={styles.volumeSlider}>
-                  <SvgIcon class={styles.volumeIcon} name="message-voice" color="#fff" />
-                  <ElSlider modelValue={this.volume} onInput={this.volumeChange} size="small" />
+            <span class={styles['bar-btn-text']}>摄像头</span>
+          </div>
+          <div class={styles['bar-btn']}>
+            <div class={styles.btnInner}>
+              <SvgIcon
+                onClick={() => { this.barStatus.volume = !this.barStatus.volume; this.volume = 0; }}
+                name={this.isVolumeDisabled ? 'bar-volume-disabled' : 'bar-volume'}
+                style={{
+                  width: '22px',
+                  cursor: 'pointer'
+                }}
+              />
+              <ElDropdown
+                placement="top-start"
+                popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
+                // @ts-ignore
+                vSlots={{
+                  dropdown: () => (
+                    <div class={styles.volumeSlider}>
+                      <SvgIcon class={styles.volumeIcon} name="message-voice" color="#fff" />
+                      <ElSlider modelValue={this.volume} onInput={this.volumeChange} size="small" />
+                    </div>
+                  )
+                }}
+              >
+                <div class={styles['bar-btn']} style={{ height: '32px' }}>
+                  <SvgIcon
+                    name="bar-arrow-down"
+                    style={{
+                      width: '18px'
+                    }}
+                  />
                 </div>
-              )
-            }}
-          >
-            <div class={styles['bar-btn']}>
-              <ElButton type="primary" color="transparent">
-                <SvgIcon
-                  name="volume"
-                  style={{
-                    width: '52px'
-                  }}
-                />
-              </ElButton>
-              <span class={styles['bar-btn-text']}>音量调节</span>
+              </ElDropdown>
             </div>
-          </ElDropdown>
+            <span class={styles['bar-btn-text']}>音量调节</span>
+          </div>
+
           <div class={styles['bar-btn']} onClick={RuntimeUtils.shareScreenVideo}>
-            <ElButton type="primary" color="transparent">
+            <div class={styles.btnInner}>
               <SvgIcon
-                name="screen-share"
+                name="bar-screen-share"
                 style={{
-                  width: '52px'
+                  width: '22px',
+                  cursor: 'pointer'
                 }}
               />
-            </ElButton>
+            </div>
             <span class={styles['bar-btn-text']}>屏幕共享</span>
           </div>
-          {/* <div class={styles['bar-btn']}>
-            <ElButton type="primary" color="transparent">
+
+          {/* <div class={styles['bar-btn']} >
+            <div class={styles.btnInner}>
               <SvgIcon
-                name="beauty"
+                name="bar-beauty"
                 style={{
-                  width: '52px'
+                  width: '22px',
+                  cursor: 'pointer'
                 }}
               />
-            </ElButton>
+            </div>
             <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>
-              )
-            }}
-          >
-            <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 class={styles['bar-btn']}>
+            <div class={styles.btnInner}>
+              <SvgIcon
+                onClick={() => { this.barStatus.microphone = !this.barStatus.microphone }}
+                name={this.isMicrophoneDisabled ? 'bar-mike-disabled' : 'bar-mike'}
+                style={{
+                  width: '22px',
+                  cursor: 'pointer'
+                }}
+              />
+              <ElDropdown
+                placement="top-start"
+                popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
+                onCommand={RuntimeUtils.setSelectMicrophone}
+                // @ts-ignore
+                vSlots={{
+                  dropdown: () => (
+                    <ElDropdownMenu>
+                      {runtime.microphones.map(item => (<ElDropdownItem command={item}>{item.label}</ElDropdownItem>))}
+                    </ElDropdownMenu>
+                  )
+                }}
+              >
+                <div class={styles['bar-btn']} style={{ height: '32px' }}>
+                  <SvgIcon
+                    name="bar-arrow-down"
+                    style={{
+                      width: '18px'
+                    }}
+                  />
+                </div>
+              </ElDropdown>
             </div>
-          </ElDropdown>
+            <span class={styles['bar-btn-text']}>麦克风</span>
+          </div>
+
         </div>
         <div style={{ display: 'flex' }}>
-          <div class={styles['bar-btn']}>
-            <ElButton type="primary" color="transparent">
+          <div class={styles['bar-btn']} >
+            <div class={styles.btnInner}>
               <SvgIcon
-                name="share"
+                name="bar-share"
                 style={{
-                  width: '52px'
+                  width: '22px',
+                  cursor: 'pointer'
                 }}
               />
-            </ElButton>
+            </div>
             <span class={styles['bar-btn-text']}>分享</span>
           </div>
         </div>

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

@@ -7,6 +7,7 @@
   display: flex;
   flex-direction: column;
   height: calc(100vh - var(--header-bar-height));
+  overflow: hidden;
   .video{
     width: 100%;
     max-height: calc(100vh - var(--header-bar-height) - var(--header-height) - var(--action-bar-height));

src/components/live-broadcast/index.tsx

@@ -42,7 +42,8 @@ export default defineComponent({
         runtime.videoStatus = 'stream'
         // runtime.mediaStreamTrack = mediaStreams.getTracks()
         // await RuntimeUtils.setTrack([microphoneAudioTrack], 'microphone')
-        const join = await RuntimeUtils.joinRoom('w_3fi4PXQcooe5_VUseReE', RTC.RCLivingType.VIDEO, {
+        // w_3fi4PXQcooe5_VUseReE
+        const join = await RuntimeUtils.joinRoom('w_3fi4PXQcooe5_VUseReA', RTC.RCLivingType.VIDEO, {
           onMessageReceive(name, content) {
             console.log(name, content)
           },

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

@@ -7,7 +7,7 @@
 
 .dataCount {
   text-align: center;
-  margin: 16px;
+  margin: 16px 16px 0;
   border-radius: 2px;
   background-color: var(--message-color);
   display: flex;
@@ -55,6 +55,7 @@
     .el-tabs__item {
       color: var(--live-color);
       font-size: 16px;
+      padding: 0 31px;
       &.is-active {
         color: #00FFF0;
       }

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

@@ -8,6 +8,12 @@ import Empty from "/src/components/empty";
 import runtime, * as RuntimeUtils from '/src/components/live-broadcast/runtime'
 
 export default defineComponent({
+  props: {
+    data: {
+      type: Array,
+      default: () => ([])
+    }
+  },
   data() {
     return {
       joinList: {} as {[key: string]: any}, // 连麦学生列表
@@ -97,7 +103,7 @@ export default defineComponent({
               )}
             </div>
           </div>
-        )) : this.loadingJoin ? <div class={styles.loadingStyle} v-loading={this.loadingJoin} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员发起连麦！" icon="noData-no-join" />}
+        )) : this.loadingJoin ? <div class={styles.loadingStyle} v-loading={this.loadingJoin} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员发起连麦！" icon="noData-no-join" />}
       </div>
     )
   }

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

@@ -60,14 +60,14 @@ export default defineComponent({
             <div class={styles.itemInfo} >
               <div class={styles.itemName}>
                 <p class={styles.userName}>{item.name}</p>
-                <a href="javascript:;" onClick={() => RuntimeUtils.sendMessage(
+                <a href="javascript:;" class={styles.btn} onClick={() => RuntimeUtils.sendMessage(
                   {seatBan:false, ...RuntimeUtils.getSendMessageUser()},
                   'SeatsCtrl'
                 )}>上麦</a>
               </div>
             </div>
           </div>
-        )) : this.loadingLook ? <div class={styles.loadingStyle} v-loading={this.loadingLook} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员观看！" icon="noData-no-user" />}
+        )) : this.loadingLook ? <div class={styles.loadingStyle} v-loading={this.loadingLook} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员观看！" icon="noData-no-user" />}
       </div>
     )
   }

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

@@ -1,5 +1,6 @@
 import { defineComponent } from "vue";
 import { ElTag } from "element-plus";
+import VirtualList from 'vue-virtual-scroll-v3'
 import styles from './index.module.less'
 import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
 import { state } from '/src/state'
@@ -56,10 +57,40 @@ export default defineComponent({
   },
   render() {
     return (
+      //     <VirtualList class="list-dynamic scroll-touch"
+      //     :data-key="'id'"
+      //     :data-sources="items"
+      //     :estimate-size="80"
+      //     :item-class="'list-item-dynamic'"
+      //     ref="virtualList"
+      //   >
+      //   <template #={source}>
+      //       <div class="item-inner">
+      //           <div class="head">
+      //               <span># {{ source.index }}</span>
+      //               <span>{{ source.name }}</span>
+      //           </div>
+      //           <div class="desc">{{ source.desc }}</div>
+      //       </div>
+      //   </template>
+      // </VirtualList>
+
+      // <VirtualList class={styles.itemContent}
+      // dataKey="id"
+      // dataSources={this.messageList}
+      // estimateSize="85"
+      // itemClass="'itemInfo'"
+      // ref="virtualList">
+      //   <template #default={source}>
+      //     <div class="item-inner">
+      //       111
+      //     </div>
+      //   </template>
+      // </VirtualList>
       <div style={{ minHeight: '100%', position: 'relative' }}>
         {this.messageList.length > 0 ? this.messageList.map((item : any) => (
           <div class={styles.itemContent}>
-            <img src="/src/assets/home/placehorder-icon.png" alt="" />
+            <img src="/src/assets/home/placeholder-icon.png" alt="" />
             <div class={styles.itemInfo}>
               <div class={styles.itemName}>
                 <p class={styles.userName}>{item.name} {item.isSelf ? <ElTag>主播</ElTag> : null}</p>
@@ -70,7 +101,7 @@ export default defineComponent({
               </div>
             </div>
           </div>
-        )) : this.loadingMessage ? <div class={styles.loadingStyle} v-loading={this.loadingMessage} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员互动！" icon="noData-no-message" />}
+        )) : this.loadingMessage ? <div class={styles.loadingStyle} v-loading={this.loadingMessage} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员互动！" icon="noData-no-message" />}
       </div>
     )
   }

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

@@ -26,6 +26,7 @@
       padding-left: 20px;
       background-color: transparent;
       border: 0;
+      color: var(--live-color)
     }
     .el-button {
       border: 0;

src/icons/bar/arrow-down.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>展开备份 8</title>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标页面状态" transform="translate(-93.000000, -63.000000)">
+            <g id="编组-24" transform="translate(56.000000, 56.000000)">
+                <g id="展开备份-8" transform="translate(46.000000, 16.000000) rotate(-90.000000) translate(-46.000000, -16.000000) translate(37.000000, 7.000000)">
+                    <g id="编组-5" transform="translate(6.000000, 5.000000)" fill="#888888" fill-rule="nonzero">
+                        <path d="M3.34802842,0.124092239 C3.4966067,-0.0407423089 3.73808755,-0.0414370139 3.88751743,0.122458103 C4.03694015,0.286361115 4.03755559,0.552859422 3.88898446,0.717583449 L0.65200746,4.29785614 C0.503429179,4.46269069 0.261898231,4.46339329 0.112468356,4.29948238 C-0.0368899574,4.13559516 -0.0375769584,3.86908106 0.111001322,3.70424651 L3.34802842,0.124100133 L3.34802842,0.124092239 Z" id="路径"></path>
+                        <path d="M3.88898446,7.28229519 C4.03755559,7.44712973 4.03693299,7.71363594 3.88751743,7.87753105 C3.73809471,8.04144196 3.4966067,8.04073936 3.34803557,7.87591271 L0.110994166,4.29575054 C-0.0375841147,4.13093178 -0.0368971137,3.86441768 0.112461199,3.70051467 C0.261883919,3.53661166 0.503422023,3.53741689 0.652000304,3.70214881 L3.88899162,7.28230308 L3.88898446,7.28229519 Z" id="路径"></path>
+                    </g>
+                    <rect id="矩形" x="0" y="0" width="18" height="18"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/bar/camera.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>摄像头备份 6</title>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标页面状态" transform="translate(-66.000000, -61.000000)">
+            <g id="编组-24" transform="translate(58.000000, 56.000000)">
+                <g id="形状结合-2" transform="translate(8.000000, 5.000000)">
+                    <rect id="矩形" x="0" y="0" width="22" height="22"></rect>
+                    <g id="编组" transform="translate(4.000000, 2.000000)" fill="#FFFFFF" fill-rule="nonzero">
+                        <path d="M7.41450612,0 C11.5025952,0 14.8290122,3.43969022 14.8290122,7.66698934 C14.8290122,10.6501452 13.1708591,13.2394966 10.7544041,14.5115198 L10.7544041,14.5115198 L12.1193473,16.9475315 C12.2406756,17.1636011 12.2406756,17.4284608 12.1193473,17.6445305 C11.998019,17.8606002 11.7755838,17.99303 11.5362975,17.99303 L11.5362975,17.99303 L3.40056213,18 C3.1612758,18 2.9388406,17.8675702 2.81751232,17.6515005 C2.69618404,17.4354308 2.69618404,17.1705712 2.81751232,16.9545014 L2.81751232,16.9545014 L4.15549366,14.5533398 C1.69859595,13.3022265 0,10.6849952 0,7.66698934 C0,3.43969022 3.32641707,0 7.41450612,0 Z M7.41450612,4.1819942 C5.55750936,4.1819942 4.04427606,5.74675701 4.04427606,7.66698934 C4.04427606,9.58722168 5.55750936,11.1519845 7.41450612,11.1519845 C9.27150289,11.1519845 10.7847362,9.58722166 10.7847362,7.66698934 C10.7847362,5.74675703 9.27150289,4.1819942 7.41450612,4.1819942 Z M7.41450612,5.57599224 C8.53130213,5.57599224 9.43664417,6.51216353 9.43664417,7.66698934 C9.43664417,8.82181516 8.53130213,9.75798645 7.41450612,9.75798645 C6.29771012,9.75798645 5.39236808,8.82181516 5.39236808,7.66698934 C5.39236808,6.51216353 6.29771012,5.57599224 7.41450612,5.57599224 Z M7.41450612,2.3802517 C7.04224079,2.3802517 6.7404601,2.69230879 6.7404601,3.07725072 C6.7404601,3.4606002 7.04378081,3.77424976 7.41450612,3.77424976 C7.78523144,3.77424976 8.08855214,3.46060018 8.08855214,3.07725072 C8.08855214,2.69390127 7.78523144,2.3802517 7.41450612,2.3802517 Z" id="形状结合"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/bar/mike-disabled.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>麦克风（静音）</title>
+    <defs>
+        <path d="M16.1424,4.7067 L2.7074,18.1417 C2.3174,18.5317 2.3174,19.1657 2.7074,19.5567 L2.7074,19.5567 C3.0984,19.9467 3.7304,19.9467 4.1214,19.5567 L4.1214,19.5567 L17.5564,6.1207 C17.9474,5.7307 17.9474,5.0977 17.5564,4.7067 L17.5564,4.7067 C17.3614,4.5117 17.1054,4.4137 16.8494,4.4137 L16.8494,4.4137 C16.5944,4.4137 16.3384,4.5117 16.1424,4.7067 L16.1424,4.7067 Z" id="path-1"></path>
+    </defs>
+    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="图标页面状态" transform="translate(-246.000000, -141.000000)">
+            <g id="编组-27" transform="translate(238.000000, 136.000000)">
+                <g id="麦克风（静音）" transform="translate(8.000000, 5.000000)">
+                    <rect id="矩形" x="0" y="0" width="22" height="22"></rect>
+                    <g id="编组" transform="translate(2.000000, 1.000000)">
+                        <path d="M16.0596,8.9147 C16.5816,8.9147 17.0026,9.3337 17.0006071,9.8497 C17.0006071,14.1017 13.7876,17.6257 9.6336,18.1767 L9.6336,18.1767 L9.6336,18.8797 C9.6336,19.4957 9.1226,19.9997 8.5006,19.9997 C7.8776,19.9997 7.3676,19.4957 7.3676,18.8797 L7.3676,18.8797 L7.3676,18.1767 C6.3226,18.0387 5.3366,17.7107 4.4466,17.2317 L4.4466,17.2317 L5.8466,15.8307 C6.6606,16.1857 7.5576,16.3857 8.5026,16.3857 C12.1486,16.3857 15.1146,13.4547 15.1146,9.8497 C15.1146,9.3337 15.5376,8.9147 16.0596,8.9147 Z M0.946,8.9143 C1.468,8.9143 1.891,9.3333 1.891,9.8493 C1.891,11.7913 2.756,13.5323 4.119,14.7303 L4.119,14.7303 L2.79,16.0593 C1.08,14.5223 0,12.3103 0,9.8493 C0,9.3333 0.424,8.9143 0.946,8.9143 Z M13.5334,8.1445 L13.5334,9.3385 C13.5294,12.1075 11.3024,14.3515 8.5544,14.3535 C8.1764,14.3535 7.8114,14.3025 7.4564,14.2205 L7.4564,14.2205 L13.5334,8.1445 Z M8.5552,0 C11.3032,0.001 13.5302,2.246 13.5332,5.015 L13.5332,5.015 L13.5332,5.316 L5.5452,13.305 C4.3582,12.388 3.5812,10.961 3.5792,9.338 L3.5792,9.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>
+    </g>
+</svg>

src/icons/bar/mike.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" 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(-246.000000, -61.000000)">
+            <g id="编组-25" transform="translate(238.000000, 56.000000)">
+                <g id="麦克风" transform="translate(8.000000, 5.000000)">
+                    <rect id="矩形" x="0" y="0" width="22" height="22"></rect>
+                    <path d="M19,10.85 C19,15.102 15.786,18.626 11.632,19.177 L11.632,19.88 C11.632,20.496 11.122,21 10.5,21 C9.877,21 9.367,20.496 9.367,19.88 L9.367,19.177 C5.213,18.626 2,15.105 2,10.85 C2,10.334 2.423,9.915 2.945,9.915 C3.467,9.915 3.891,10.334 3.891,10.85 C3.891,14.455 6.856,17.386 10.502,17.386 C14.148,17.386 17.113,14.455 17.113,10.85 C17.113,10.334 17.537,9.915 18.059,9.915 C18.581,9.915 19.002,10.334 19,10.85 Z M5.579,6.015 L5.579,10.339 C5.581,13.107 7.807,15.351 10.554,15.354 C13.302,15.352 15.529,13.108 15.533,10.339 L15.533,6.015 C15.53,3.246 13.302,1.002 10.554,1 C7.807,1.004 5.581,3.247 5.579,6.015 Z M13.931,6.015 L13.931,6.734 L7.18,6.734 L7.18,6.015 C7.18,4.14 8.694,2.614 10.554,2.614 C12.418,2.616 13.928,4.137 13.931,6.015 Z" id="Fill-1" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/bar/screen-share-disabled.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" 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(-346.000000, -61.000000)">
+            <g id="屏幕分享备份-7" transform="translate(328.000000, 56.000000)">
+                <g id="分享屏幕" transform="translate(18.000000, 5.000000)">
+                    <rect id="矩形" x="0" y="0" width="22" height="22"></rect>
+                    <path d="M3.80000001,4 C3.32261033,4 2.86477328,4.18813721 2.5272078,4.5230236 C2.18964231,4.85790998 2,5.3121134 2,5.78571428 L2,14.7142857 C2,15.1878866 2.18964231,15.64209 2.5272078,15.9769764 C2.86477328,16.3118628 3.32261033,16.5 3.80000001,16.5 L18.2,16.5 C18.6773897,16.5 19.1352267,16.3118628 19.4727922,15.9769764 C19.8103577,15.64209 20,15.1878866 20,14.7142857 L20,5.78571428 C20,5.3121134 19.8103577,4.85790998 19.4727922,4.5230236 C19.1352267,4.18813721 18.6773897,4 18.2,4 L3.80000001,4 Z M7.4,18.4196428 C7.4,18.2657226 7.46163375,18.1181064 7.57134253,18.0092684 C7.68105132,17.9004303 7.82984836,17.8392857 7.98500001,17.8392857 L14.015,17.8392857 C14.3380866,17.8392857 14.6,18.0991205 14.6,18.4196429 C14.6,18.7401653 14.3380866,19 14.015,19 L7.98500001,19 C7.82984836,19 7.68105131,18.9388554 7.57134253,18.8300173 C7.46163374,18.7211792 7.4,18.5735631 7.4,18.4196428 Z M11.1540358,7.16204122 C11.1554531,6.95729299 11.2810322,6.77253192 11.4745358,6.69049841 C11.6680394,6.60846489 11.8932171,6.64452684 12.049229,6.78253487 L14.4257154,8.89055784 C14.5412713,8.99279754 14.6048538,9.13896765 14.5997104,9.29055613 C14.5945671,9.44214461 14.5212138,9.58394766 14.3989773,9.67860382 L12.0011003,11.5388071 C11.8401883,11.663386 11.6197897,11.6873217 11.4344343,11.6003479 C11.2490789,11.5133741 11.1317013,11.3309447 11.1326453,11.1313044 L11.140132,9.71282161 C9.66467809,9.71453815 8.46952481,10.8746283 8.46952588,12.3050781 C8.46952588,12.5914109 8.23010435,12.8235294 7.93476294,12.8235294 C7.63942152,12.8235294 7.4,12.5914109 7.4,12.3050781 C7.4,11.3425653 7.79438652,10.4194744 8.49639906,9.73887509 C9.19841159,9.05827573 10.1505449,8.675919 11.1433406,8.675919 L11.1454796,8.675919 L11.1540358,7.16204122 L11.1540358,7.16204122 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/bar/screen-share.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" 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(-346.000000, -141.000000)">
+            <g id="屏幕分享备份-8" transform="translate(328.000000, 136.000000)">
+                <g id="分享屏幕" transform="translate(18.000000, 5.000000)">
+                    <rect id="矩形" x="0" y="0" width="22" height="22"></rect>
+                    <path d="M3.80000001,4 C3.32261033,4 2.86477328,4.18813721 2.5272078,4.5230236 C2.18964231,4.85790998 2,5.3121134 2,5.78571428 L2,14.7142857 C2,15.1878866 2.18964231,15.64209 2.5272078,15.9769764 C2.86477328,16.3118628 3.32261033,16.5 3.80000001,16.5 L18.2,16.5 C18.6773897,16.5 19.1352267,16.3118628 19.4727922,15.9769764 C19.8103577,15.64209 20,15.1878866 20,14.7142857 L20,5.78571428 C20,5.3121134 19.8103577,4.85790998 19.4727922,4.5230236 C19.1352267,4.18813721 18.6773897,4 18.2,4 L3.80000001,4 Z M7.4,18.4196428 C7.4,18.2657226 7.46163375,18.1181064 7.57134253,18.0092684 C7.68105132,17.9004303 7.82984836,17.8392857 7.98500001,17.8392857 L14.015,17.8392857 C14.3380866,17.8392857 14.6,18.0991205 14.6,18.4196429 C14.6,18.7401653 14.3380866,19 14.015,19 L7.98500001,19 C7.82984836,19 7.68105131,18.9388554 7.57134253,18.8300173 C7.46163374,18.7211792 7.4,18.5735631 7.4,18.4196428 Z M11.1540358,7.16204122 C11.1554531,6.95729299 11.2810322,6.77253192 11.4745358,6.69049841 C11.6680394,6.60846489 11.8932171,6.64452684 12.049229,6.78253487 L14.4257154,8.89055784 C14.5412713,8.99279754 14.6048538,9.13896765 14.5997104,9.29055613 C14.5945671,9.44214461 14.5212138,9.58394766 14.3989773,9.67860382 L12.0011003,11.5388071 C11.8401883,11.663386 11.6197897,11.6873217 11.4344343,11.6003479 C11.2490789,11.5133741 11.1317013,11.3309447 11.1326453,11.1313044 L11.140132,9.71282161 C9.66467809,9.71453815 8.46952481,10.8746283 8.46952588,12.3050781 C8.46952588,12.5914109 8.23010435,12.8235294 7.93476294,12.8235294 C7.63942152,12.8235294 7.4,12.5914109 7.4,12.3050781 C7.4,11.3425653 7.79438652,10.4194744 8.49639906,9.73887509 C9.19841159,9.05827573 10.1505449,8.675919 11.1433406,8.675919 L11.1454796,8.675919 L11.1540358,7.16204122 L11.1540358,7.16204122 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/bar/share-disabled.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" 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(-526.000000, -61.000000)">
+            <g id="编组-18备份-2" transform="translate(508.000000, 56.000000)">
+                <g id="编组-21" transform="translate(18.000000, 5.000000)">
+                    <rect id="矩形" x="0" y="0" width="22" height="22"></rect>
+                    <path d="M18.0553331,10.5555556 C17.5338307,10.5555556 17.1108886,10.9784976 17.1108886,11.5 C17.1108886,15.1453998 14.1451773,18.1111111 10.4997775,18.1111111 C6.8543777,18.1111111 3.88888889,15.1453998 3.88888889,11.5 C3.88888889,7.85460018 6.85460018,4.88888889 10.5,4.88888889 C11.0215024,4.88888889 11.4444444,4.46594687 11.4444444,3.94444444 C11.4444444,3.42294202 11.0215024,3 10.5,3 C5.81337521,3 2,6.81337521 2,11.5 C2,16.1866248 5.81315273,20 10.5,20 C15.1866248,20 19,16.1866248 19,11.5 C18.9997775,10.9782751 18.577058,10.5555556 18.0553331,10.5555556 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
+                    <path d="M14.0344828,4.99097056 L15.6125509,4.98396504 L10.2893164,10.3039617 C9.90356121,10.6894991 9.90356121,11.32023 10.2893164,11.7057675 C10.4858155,11.9021557 10.7381569,12.0002331 10.9907319,12 C11.2433069,12 11.4956483,11.9019222 11.6921474,11.7057675 L17.0153819,6.38553732 L17.0083724,7.9627148 C17.0083724,8.50937937 17.457213,8.95796657 18.0041862,8.95796657 C18.5511595,8.95796657 19,8.50937937 19,7.9627148 L19,3.99525176 C19,3.86915229 18.9719621,3.74305282 18.9228957,3.62372535 C18.9018672,3.57468667 18.8878483,3.53265351 18.8528009,3.49762588 C18.7756966,3.35050983 18.6492922,3.22417684 18.5020931,3.14711605 C18.4670457,3.11208842 18.4179793,3.09107184 18.3759224,3.07706079 C18.2567612,3.02802211 18.1303569,3 18.0041862,3 L14.0344828,3 C13.4875095,3 13.038669,3.4485872 13.038669,3.99525176 C13.0384353,4.54238336 13.4872758,4.99097056 14.0344828,4.99097056 L14.0344828,4.99097056 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/bar/share.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" 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(-526.000000, -141.000000)">
+            <g id="编组-18备份-3" transform="translate(508.000000, 136.000000)">
+                <g id="编组-21" transform="translate(18.000000, 5.000000)">
+                    <rect id="矩形" x="0" y="0" width="22" height="22"></rect>
+                    <path d="M18.0553331,10.5555556 C17.5338307,10.5555556 17.1108886,10.9784976 17.1108886,11.5 C17.1108886,15.1453998 14.1451773,18.1111111 10.4997775,18.1111111 C6.8543777,18.1111111 3.88888889,15.1453998 3.88888889,11.5 C3.88888889,7.85460018 6.85460018,4.88888889 10.5,4.88888889 C11.0215024,4.88888889 11.4444444,4.46594687 11.4444444,3.94444444 C11.4444444,3.42294202 11.0215024,3 10.5,3 C5.81337521,3 2,6.81337521 2,11.5 C2,16.1866248 5.81315273,20 10.5,20 C15.1866248,20 19,16.1866248 19,11.5 C18.9997775,10.9782751 18.577058,10.5555556 18.0553331,10.5555556 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
+                    <path d="M14.0344828,4.99097056 L15.6125509,4.98396504 L10.2893164,10.3039617 C9.90356121,10.6894991 9.90356121,11.32023 10.2893164,11.7057675 C10.4858155,11.9021557 10.7381569,12.0002331 10.9907319,12 C11.2433069,12 11.4956483,11.9019222 11.6921474,11.7057675 L17.0153819,6.38553732 L17.0083724,7.9627148 C17.0083724,8.50937937 17.457213,8.95796657 18.0041862,8.95796657 C18.5511595,8.95796657 19,8.50937937 19,7.9627148 L19,3.99525176 C19,3.86915229 18.9719621,3.74305282 18.9228957,3.62372535 C18.9018672,3.57468667 18.8878483,3.53265351 18.8528009,3.49762588 C18.7756966,3.35050983 18.6492922,3.22417684 18.5020931,3.14711605 C18.4670457,3.11208842 18.4179793,3.09107184 18.3759224,3.07706079 C18.2567612,3.02802211 18.1303569,3 18.0041862,3 L14.0344828,3 C13.4875095,3 13.038669,3.4485872 13.038669,3.99525176 C13.0384353,4.54238336 13.4872758,4.99097056 14.0344828,4.99097056 L14.0344828,4.99097056 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/icons/camera.svg

@@ -1,14 +0,0 @@
-<?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>摄像头备份</title>
-    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <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>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/icons/mike-disabled.svg

@@ -1,21 +0,0 @@
-<?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

@@ -1,21 +0,0 @@
-<?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/screen-share-disabled.svg

@@ -1,14 +0,0 @@
-<?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>屏幕分享备份 3</title>
-    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <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>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/icons/screen-share.svg

@@ -1,14 +0,0 @@
-<?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>屏幕分享备份</title>
-    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <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>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/icons/share-disabled.svg

@@ -1,15 +0,0 @@
-<?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>分享</title>
-    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <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>
-                    <path d="M12.0344828,1.99097056 L13.6125509,1.98396504 L8.28931638,7.30396168 C7.90356121,7.68949914 7.90356121,8.32023002 8.28931638,8.70576748 C8.48581553,8.90215573 8.7381569,9.0002331 8.99073191,9 C9.24330692,9 9.49564828,8.90192222 9.69214743,8.70576748 L15.0153819,3.38553732 L15.0083724,4.9627148 C15.0083724,5.50937937 15.457213,5.95796657 16.0041862,5.95796657 C16.5511595,5.95796657 17,5.50937937 17,4.9627148 L17,0.995251764 C17,0.869152291 16.9719621,0.743052818 16.9228957,0.623725355 C16.9018672,0.574686671 16.8878483,0.532653513 16.8528009,0.497625882 C16.7756966,0.35050983 16.6492922,0.22417684 16.5020931,0.147116051 C16.4670457,0.11208842 16.4179793,0.0910718414 16.3759224,0.0770607888 C16.2567612,0.028022105 16.1303569,0 16.0041862,0 L12.0344828,0 C11.4875095,0 11.038669,0.448587198 11.038669,0.995251764 C11.0384353,1.54238336 11.4872758,1.99097056 12.0344828,1.99097056 L12.0344828,1.99097056 Z" id="路径"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/icons/share.svg

@@ -1,15 +0,0 @@
-<?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>编组 18备份</title>
-    <g id="后台直播界面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <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>
-                    <path d="M12.0344828,1.99097056 L13.6125509,1.98396504 L8.28931638,7.30396168 C7.90356121,7.68949914 7.90356121,8.32023002 8.28931638,8.70576748 C8.48581553,8.90215573 8.7381569,9.0002331 8.99073191,9 C9.24330692,9 9.49564828,8.90192222 9.69214743,8.70576748 L15.0153819,3.38553732 L15.0083724,4.9627148 C15.0083724,5.50937937 15.457213,5.95796657 16.0041862,5.95796657 C16.5511595,5.95796657 17,5.50937937 17,4.9627148 L17,0.995251764 C17,0.869152291 16.9719621,0.743052818 16.9228957,0.623725355 C16.9018672,0.574686671 16.8878483,0.532653513 16.8528009,0.497625882 C16.7756966,0.35050983 16.6492922,0.22417684 16.5020931,0.147116051 C16.4670457,0.11208842 16.4179793,0.0910718414 16.3759224,0.0770607888 C16.2567612,0.028022105 16.1303569,0 16.0041862,0 L12.0344828,0 C11.4875095,0 11.038669,0.448587198 11.038669,0.995251764 C11.0384353,1.54238336 11.4872758,1.99097056 12.0344828,1.99097056 L12.0344828,1.99097056 Z" id="路径"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/pages/login/index.tsx

@@ -76,8 +76,8 @@ export default defineComponent({
               data: {
                 username: loginForm.username,
                 password: loginForm.password,
-                clientId: "system",
-                clientSecret: "system"
+                clientId: "teacher",
+                clientSecret: "teacher"
               }
             })
             console.log(res, 'res');

yarn.lock

@@ -4337,6 +4337,16 @@ vue-tsc@^0.29.8:
     "@volar/shared" "0.29.8"
     vscode-vue-languageservice "0.29.8"
 
+vue-virtual-list-v3@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.npmmirror.com/vue-virtual-list-v3/-/vue-virtual-list-v3-1.3.6.tgz#ed02ac6cc52327181c7c11ab06daa67a2aa33de3"
+  integrity sha512-vH+IDifHAxDUKc832SNtLYpY6bhy/zkKxlyHsneTC3Aw9SkKHD6IbVYz/nQYnedHLVulazG7c17neG/R13KbLQ==
+
+vue-virtual-scroll-list@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.npmmirror.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-2.3.3.tgz#290f0d04be814b93585f2ef232097b671141e5b1"
+  integrity sha512-heuwlZ+lEdcVSp66CpVXnyNdsiHl/XU1cvqJb0yUHGlLv6DGK8OX16FH8I3w/wKNXtHSPF9itdBBGJFrXkyHeg==
+
 vue@^3.2.25:
   version "3.2.31"
   resolved "https://registry.npmmirror.com/vue/-/vue-3.2.31.tgz#e0c49924335e9f188352816788a4cca10f817ce6"