refactor: replace some icons with svg

src/icons/svg/audio.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
+<path d="M17,32C8.7,32,2,25.3,2,17S8.7,2,17,2s15,6.7,15,15S25.3,32,17,32z M17,4C9.8,4,4,9.8,4,17s5.8,13,13,13s13-5.8,13-13
+	S24.2,4,17,4z"/>
+<path d="M17,10L17,10c0.6,0,1,0.4,1,1v12c0,0.6-0.4,1-1,1l0,0c-0.6,0-1-0.4-1-1V11C16,10.4,16.4,10,17,10z"/>
+<path d="M13,13L13,13c0.6,0,1,0.4,1,1v6c0,0.6-0.4,1-1,1l0,0c-0.6,0-1-0.4-1-1v-6C12,13.4,12.4,13,13,13z"/>
+<path d="M9,15L9,15c0.6,0,1,0.4,1,1v2c0,0.6-0.4,1-1,1l0,0c-0.6,0-1-0.4-1-1v-2C8,15.4,8.4,15,9,15z"/>
+<path d="M25,15L25,15c0.6,0,1,0.4,1,1v2c0,0.6-0.4,1-1,1l0,0c-0.6,0-1-0.4-1-1v-2C24,15.4,24.4,15,25,15z"/>
+<path d="M21,13L21,13c0.6,0,1,0.4,1,1v6c0,0.6-0.4,1-1,1l0,0c-0.6,0-1-0.4-1-1v-6C20,13.4,20.4,13,21,13z"/>
+</svg>

src/icons/svg/cm.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
+<path d="M31.5,6l-2.3,20.7c-0.2,1.5-1.5,2.7-3,2.7c-0.5,0-0.9-0.1-1.3-0.3l-8-3.8c-0.5-0.3-0.7-0.9-0.4-1.3c0.2-0.5,0.8-0.7,1.3-0.5
+	l8,3.8c0.3,0.1,0.6,0.1,0.9,0c0.3-0.2,0.5-0.4,0.5-0.8l2.3-20.7c0-0.1,0-0.2,0-0.4L15.1,22.5c-0.1,0.2-0.2,0.4-0.2,0.6v7.2
+	c0,0.6-0.4,1-1,1s-1-0.4-1-1v-7.2c0-0.7,0.2-1.4,0.7-1.9L27,5.2L5.1,15.5c-0.4,0.2-0.6,0.5-0.6,0.9s0.2,0.7,0.6,0.9l4.8,2.3
+	c0.5,0.2,0.7,0.9,0.5,1.4s-0.9,0.7-1.3,0.5l-4.8-2.3c-1.5-0.7-2.1-2.5-1.4-4c0.3-0.6,0.8-1.1,1.4-1.4l23-10.7c1.5-0.7,3.3-0.1,4,1.4
+	C31.4,4.9,31.5,5.4,31.5,6z"/>
+</svg>

src/icons/svg/dm.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
+<path d="M27,24.5H7c-2.8,0-5-2.2-5-5v-10c0-2.8,2.2-5,5-5h20c2.8,0,5,2.2,5,5v10C32,22.3,29.8,24.5,27,24.5z M7,6.5
+	c-1.7,0-3,1.3-3,3v10c0,1.7,1.3,3,3,3h20c1.7,0,3-1.3,3-3v-10c0-1.7-1.3-3-3-3H7z"/>
+<path d="M7.5,26.5h19c0.6,0,1,0.4,1,1l0,0c0,0.6-0.4,1-1,1h-19c-0.6,0-1-0.4-1-1l0,0C6.5,26.9,6.9,26.5,7.5,26.5z"/>
+</svg>

src/icons/svg/em.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
+<style type="text/css">
+	.st0{display:none;fill:#040000;}
+</style>
+<path class="st0" d="M31.5,6l-2.3,20.7c-0.2,1.5-1.5,2.7-3,2.7c-0.5,0-0.9-0.1-1.3-0.3l-8-3.8c-0.5-0.3-0.7-0.9-0.4-1.3
+	c0.2-0.5,0.8-0.7,1.3-0.5l8,3.8c0.3,0.1,0.6,0.1,0.9,0c0.3-0.2,0.5-0.4,0.5-0.8l2.3-20.7c0-0.1,0-0.2,0-0.4L15.1,22.5
+	c-0.1,0.2-0.2,0.4-0.2,0.6v7.2c0,0.6-0.4,1-1,1s-1-0.4-1-1v-7.2c0-0.7,0.2-1.4,0.7-1.9l13.4-16L5.1,15.5c-0.4,0.2-0.6,0.5-0.6,0.9
+	c0,0.4,0.2,0.7,0.6,0.9l4.8,2.3c0.5,0.2,0.7,0.9,0.5,1.4c-0.2,0.5-0.9,0.7-1.3,0.5l-4.8-2.3c-1.5-0.7-2.1-2.5-1.4-4
+	c0.3-0.6,0.8-1.1,1.4-1.4l23-10.7c1.5-0.7,3.3-0.1,4,1.4C31.4,4.9,31.5,5.4,31.5,6z"/>
+<polygon points="17,32.2 3.6,24.4 3.6,8.9 10.4,5 11.4,6.7 5.6,10.1 5.6,23.3 17,29.9 28.4,23.3 28.4,10.1 22.6,6.7 23.6,5 
+	30.4,8.9 30.4,24.4 "/>
+<path d="M23.2,17.5l-6.4,6.4l-6.4-6.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l3.9,4V2.8c0-0.5,0.5-1,1-1c0.6,0,1,0.5,1,1v17.2l4-4
+	c0.4-0.4,1-0.4,1.4,0C23.6,16.5,23.6,17.2,23.2,17.5z"/>
+</svg>

src/icons/svg/home.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><path d="M26,31.07H8a5,5,0,0,1-5-5V14.16a5,5,0,0,1,2.15-4.11l9-6.23a5,5,0,0,1,5.69,0l9,6.23A5,5,0,0,1,31,14.17v11.9A5,5,0,0,1,26,31.07ZM17,4.94a3,3,0,0,0-1.71.53l-9,6.23A3,3,0,0,0,5,14.16V26.07a3,3,0,0,0,3,3H26a3,3,0,0,0,3-3V14.17a3,3,0,0,0-1.29-2.47l-9-6.24A3,3,0,0,0,17,4.94Z"/><path d="M21,27.07H13v-6a4,4,0,0,1,8,0Zm-6-2h4v-4a2,2,0,0,0-4,0Z"/></svg>

src/icons/svg/image.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
+<path d="M26,3H8C5.2,3,3,5.2,3,8v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V8C31,5.2,28.8,3,26,3z M29,26c0,1.7-1.3,3-3,3H8
+	c-1.7,0-3-1.3-3-3V8c0-1.7,1.3-3,3-3h18c1.7,0,3,1.3,3,3V26z"/>
+<path d="M26.5,25c-0.5,0.3-1.1,0.1-1.4-0.4c0,0,0,0,0,0l-3.6-6.3l-1.6,2.8l2.1,3.7c0.3,0.5,0.1,1.1-0.4,1.4c0,0,0,0,0,0
+	c-0.5,0.3-1.1,0.1-1.4-0.4l-2.4-4.2l0-0.1l-3.3-5.7l-5.8,10c-0.3,0.5-0.9,0.7-1.3,0.4C6.9,26,6.7,25.4,7,24.9c0,0,0,0,0-0.1l5.8-10
+	c0.6-1,1.8-1.3,2.7-0.7c0.3,0.2,0.6,0.4,0.7,0.7l2.5,4.3l1.1-1.8c0.6-1,1.8-1.3,2.7-0.7c0.3,0.2,0.6,0.4,0.7,0.7l3.7,6.3
+	C27.2,24.1,27,24.7,26.5,25C26.5,25,26.5,25,26.5,25z"/>
+<circle cx="20" cy="10" r="2"/>
+</svg>

src/icons/svg/logger.svg

@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 34"><path d="M25.46,31.54h-18a5,5,0,0,1-5-5v-18a5,5,0,0,1,5-5h12a1,1,0,0,1,0,2h-12a3,3,0,0,0-3,3v18a3,3,0,0,0,3,3h18a3,3,0,0,0,3-3v-12a1,1,0,0,1,2,0v12A5,5,0,0,1,25.46,31.54Z"/><rect x="11.47" y="10.53" width="22" height="2" rx="1" transform="translate(-1.58 19.26) rotate(-45)"/></svg>

src/icons/svg/pm.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
+<path d="M17,20.5c-0.8,0-1.6-0.2-2.3-0.6L4.6,14.7c-1.5-0.8-2-2.6-1.3-4.1c0.3-0.5,0.7-1,1.3-1.3L14.7,4c1.4-0.8,3.2-0.8,4.6,0
+	l10.1,5.3c1.5,0.8,2,2.6,1.3,4.1c-0.3,0.5-0.7,1-1.3,1.3L19.3,20C18.6,20.3,17.8,20.5,17,20.5z M15.6,18.2c0.9,0.5,1.9,0.5,2.8,0
+	l10.1-5.3c0.5-0.3,0.7-0.9,0.4-1.4c-0.1-0.2-0.2-0.3-0.4-0.4L18.4,5.9c-0.9-0.5-1.9-0.5-2.8,0L5.5,11.1C5,11.4,4.8,12,5.1,12.5
+	c0.1,0.2,0.2,0.3,0.4,0.4L15.6,18.2z"/>
+<path d="M17,25.5c-0.8,0-1.6-0.2-2.4-0.6l-11.1-6C3,18.6,2.9,18,3.1,17.5l0,0C3.4,17,4,16.9,4.5,17.1l11.1,6c0.9,0.5,2,0.5,2.8,0
+	l11.1-6c0.5-0.3,1.1-0.1,1.4,0.4s0.1,1.1-0.4,1.4l0,0l-11.1,6C18.6,25.3,17.8,25.5,17,25.5z"/>
+<path d="M17,30.5c-0.8,0-1.6-0.2-2.4-0.6l-11.1-6C3,23.6,2.9,23,3.1,22.5l0,0C3.4,22,4,21.8,4.5,22.1l11.1,6c0.9,0.5,2,0.5,2.8,0
+	l11.1-6c0.5-0.3,1.1-0.1,1.4,0.4s0.1,1.1-0.4,1.4l0,0l-11.1,6C18.6,30.3,17.8,30.5,17,30.5z"/>
+</svg>

src/icons/svg/upgrade.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
+<path d="M23,30c-0.6,0-1-0.4-1-1s0.4-1,1-1c3.9,0,7-3.1,7-7c0-3.2-2.2-6-5.3-6.8L23.9,14l0.1-0.9V13c0-3.9-3.1-7-7-7s-7,3.1-7,7v0.1
+	l0.1,0.9l-0.8,0.2c-3.7,1-6,4.8-5,8.5C5,25.8,7.8,28,11,28c0.6,0,1,0.4,1,1s-0.4,1-1,1c-5,0-9-4-9-9c0-3.8,2.4-7.2,6-8.5
+	c0-5,4-9,9-9s9,4,9,9c4.7,1.6,7.2,6.8,5.5,11.5C30.2,27.6,26.8,30,23,30z"/>
+<path d="M22,21.7c-0.2,0.2-0.4,0.3-0.7,0.3c-0.3,0-0.5-0.1-0.7-0.3L18,19.2V27c0,0.6-0.4,1-1,1s-1-0.4-1-1v-7.8l-2.5,2.5
+	c-0.4,0.4-1,0.4-1.4,0s-0.4-1,0-1.4l0,0l4.2-4.2c0.4-0.4,1-0.4,1.4,0l0,0l4.3,4.2C22.4,20.7,22.4,21.3,22,21.7L22,21.7z"/>
+</svg>

src/icons/svg/video.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" xml:space="preserve">
+<path d="M25.5,3h-18c-2.8,0-5,2.2-5,5v18c0,2.8,2.2,5,5,5h18c2.8,0,5-2.2,5-5V8C30.5,5.2,28.3,3,25.5,3z M28.5,10h-3
+	c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v2h-3c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v2h-3c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v2h-3c-0.6,0-1,0.4-1,1
+	s0.4,1,1,1h3v2c0,1.7-1.3,3-3,3h-18c-1.7,0-3-1.3-3-3V8c0-1.7,1.3-3,3-3h18c1.7,0,3,1.3,3,3V10z"/>
+<path d="M14.8,23.1c-0.5,0-1-0.1-1.5-0.4c-0.9-0.5-1.5-1.5-1.5-2.6V14c0-1.7,1.4-3,3-3c0.5,0,1,0.1,1.5,0.4l5.3,3
+	c1.4,0.8,1.9,2.7,1.1,4.1c-0.3,0.5-0.6,0.8-1.1,1.1l-5.3,3C15.8,22.9,15.3,23,14.8,23.1z M14.8,13c-0.2,0-0.3,0.1-0.5,0.1
+	c-0.3,0.2-0.5,0.5-0.5,0.9v6.1c0,0.6,0.5,1,1,1c0.2,0,0.3,0,0.5-0.1l5.3-3c0.5-0.3,0.6-0.9,0.4-1.4c-0.1-0.2-0.2-0.3-0.4-0.4l-5.3-3
+	C15.1,13.1,14.9,13,14.8,13L14.8,13z"/>
+</svg>

src/layout/components/Sidebar/index.vue

@@ -94,7 +94,7 @@ export default {
   flex-direction: column;
   width: 240px;
   background-color: #fff;
-  box-shadow: 1px 0 4px rgb(0 21 41 / 8%);
+  box-shadow: 1px 0 4px rgba(0, 21, 41, 0.08);
   z-index: 9;
 
   &__header {
@@ -129,6 +129,12 @@ export default {
         width: 100%;
       }
 
+      .el-menu-item,
+      .el-submenu__title {
+        display: flex;
+        align-items: center;
+      }
+
       .nest-menu .el-menu-item {
         padding-left: 48px !important;
       }
@@ -149,15 +155,17 @@ export default {
         color: $blue !important;
       }
 
-      .svg-icon,
-      .sub-el-icon {
-        color: inherit;
-        width: 20px;
+      .svg-icon {
         margin-right: 8px;
+        color: inherit;
+        font-size: 20px;
       }
 
       .sub-el-icon {
+        color: inherit;
+        width: 20px;
         height: 22px;
+        margin-right: 8px;
       }
     }
   }

src/views/external/camera/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>Gateway</div>
+</template>
+
+<script>
+export default {
+  name: 'Gateway'
+}
+</script>

src/views/media/index.vue

@@ -11,7 +11,10 @@
         :class="{ active: isImage }"
         @click="to('IMAGE')"
       >
-        <i class="c-sidebar__icon img has-bg" />
+        <svg-icon
+          class="c-sidebar__icon"
+          icon-class="image"
+        />
         图片
       </div>
       <div
@@ -19,7 +22,10 @@
         :class="{ active: isVideo }"
         @click="to('VIDEO')"
       >
-        <i class="c-sidebar__icon video has-bg" />
+        <svg-icon
+          class="c-sidebar__icon"
+          icon-class="video"
+        />
         视频
       </div>
       <div
@@ -27,7 +33,10 @@
         :class="{ active: isAudio }"
         @click="to('AUDIO')"
       >
-        <i class="c-sidebar__icon audio has-bg" />
+        <svg-icon
+          class="c-sidebar__icon"
+          icon-class="audio"
+        />
         音频
       </div>
     </div>
@@ -354,20 +363,6 @@ export default {
       &.active {
         color: #fff;
         background-color: $blue;
-
-        .c-sidebar__icon {
-          &.img {
-            background-image: url("~@/assets/icon_image_focus.png");
-          }
-
-          &.video {
-            background-image: url("~@/assets/icon_video_focus.png");
-          }
-
-          &.audio {
-            background-image: url("~@/assets/icon_audio_focus.png");
-          }
-        }
       }
     }
   }
@@ -376,18 +371,6 @@ export default {
     width: 24px;
     height: 24px;
     margin-right: 10px;
-
-    &.img {
-      background-image: url("~@/assets/icon_image_normal.png");
-    }
-
-    &.video {
-      background-image: url("~@/assets/icon_video_normal.png");
-    }
-
-    &.audio {
-      background-image: url("~@/assets/icon_audio_normal.png");
-    }
   }
 }
 </style>