feat: 引入iconfont

src/assets/iconfont/iconfont.css

@@ -0,0 +1,147 @@
+@font-face {
+  font-family: "asw-icon"; /* Project id 4624922 */
+  src: url('iconfont.woff2?t=1721283605901') format('woff2'),
+       url('iconfont.woff?t=1721283605901') format('woff'),
+       url('iconfont.ttf?t=1721283605901') format('truetype');
+}
+
+.asw-icon {
+  font-family: "asw-icon" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-sign-out:before {
+  content: "\e605";
+}
+
+.icon-Search:before {
+  content: "\e81b";
+}
+
+.icon-bofang:before {
+  content: "\e817";
+}
+
+.icon-Activity:before {
+  content: "\e818";
+}
+
+.icon-wenbenqiehuan:before {
+  content: "\e819";
+}
+
+.icon-shaixuan:before {
+  content: "\e81a";
+}
+
+.icon-table:before {
+  content: "\e808";
+}
+
+.icon-a-Remotedesktop:before {
+  content: "\e809";
+}
+
+.icon-View:before {
+  content: "\e80a";
+}
+
+.icon-down:before {
+  content: "\e80b";
+}
+
+.icon-Close:before {
+  content: "\e80c";
+}
+
+.icon-chart:before {
+  content: "\e80d";
+}
+
+.icon-a-TemporaryConditions:before {
+  content: "\e80e";
+}
+
+.icon-Member:before {
+  content: "\e80f";
+}
+
+.icon-collect:before {
+  content: "\e810";
+}
+
+.icon-Delete:before {
+  content: "\e811";
+}
+
+.icon-yunhang:before {
+  content: "\e812";
+}
+
+.icon-zhiding:before {
+  content: "\e813";
+}
+
+.icon-Download:before {
+  content: "\e814";
+}
+
+.icon-mingliang:before {
+  content: "\e815";
+}
+
+.icon-Analyze:before {
+  content: "\e816";
+}
+
+.icon-More:before {
+  content: "\e805";
+}
+
+.icon-zuidahua:before {
+  content: "\e806";
+}
+
+.icon-Personal:before {
+  content: "\e807";
+}
+
+.icon-Add:before {
+  content: "\e804";
+}
+
+.icon-Pcaps:before {
+  content: "\e7fd";
+}
+
+.icon-Playbooks:before {
+  content: "\e7fe";
+}
+
+.icon-Signatures:before {
+  content: "\e7ff";
+}
+
+.icon-Runners:before {
+  content: "\e800";
+}
+
+.icon-Packages:before {
+  content: "\e801";
+}
+
+.icon-Jobs:before {
+  content: "\e802";
+}
+
+.icon-Applications:before {
+  content: "\e803";
+}
+
+.icon-Workbooks:before {
+  content: "\e7fc";
+}
+

src/assets/iconfont/iconfont.json

@@ -0,0 +1,240 @@
+{
+  "id": "4624922",
+  "name": "ASW",
+  "font_family": "asw-icon",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "21683035",
+      "name": "sign-out",
+      "font_class": "sign-out",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "41130229",
+      "name": "Search",
+      "font_class": "Search",
+      "unicode": "e81b",
+      "unicode_decimal": 59419
+    },
+    {
+      "icon_id": "41130112",
+      "name": "播放",
+      "font_class": "bofang",
+      "unicode": "e817",
+      "unicode_decimal": 59415
+    },
+    {
+      "icon_id": "41130114",
+      "name": "Activity",
+      "font_class": "Activity",
+      "unicode": "e818",
+      "unicode_decimal": 59416
+    },
+    {
+      "icon_id": "41130109",
+      "name": "文本切换",
+      "font_class": "wenbenqiehuan",
+      "unicode": "e819",
+      "unicode_decimal": 59417
+    },
+    {
+      "icon_id": "41130108",
+      "name": "筛选",
+      "font_class": "shaixuan",
+      "unicode": "e81a",
+      "unicode_decimal": 59418
+    },
+    {
+      "icon_id": "41130131",
+      "name": "table",
+      "font_class": "table",
+      "unicode": "e808",
+      "unicode_decimal": 59400
+    },
+    {
+      "icon_id": "41130129",
+      "name": "Remote desktop",
+      "font_class": "a-Remotedesktop",
+      "unicode": "e809",
+      "unicode_decimal": 59401
+    },
+    {
+      "icon_id": "41130128",
+      "name": "View",
+      "font_class": "View",
+      "unicode": "e80a",
+      "unicode_decimal": 59402
+    },
+    {
+      "icon_id": "41130120",
+      "name": "down",
+      "font_class": "down",
+      "unicode": "e80b",
+      "unicode_decimal": 59403
+    },
+    {
+      "icon_id": "41130121",
+      "name": "Close",
+      "font_class": "Close",
+      "unicode": "e80c",
+      "unicode_decimal": 59404
+    },
+    {
+      "icon_id": "41130127",
+      "name": "chart",
+      "font_class": "chart",
+      "unicode": "e80d",
+      "unicode_decimal": 59405
+    },
+    {
+      "icon_id": "41130126",
+      "name": "Temporary Conditions",
+      "font_class": "a-TemporaryConditions",
+      "unicode": "e80e",
+      "unicode_decimal": 59406
+    },
+    {
+      "icon_id": "41130125",
+      "name": "Member",
+      "font_class": "Member",
+      "unicode": "e80f",
+      "unicode_decimal": 59407
+    },
+    {
+      "icon_id": "41130119",
+      "name": "collect",
+      "font_class": "collect",
+      "unicode": "e810",
+      "unicode_decimal": 59408
+    },
+    {
+      "icon_id": "41130123",
+      "name": "Delete",
+      "font_class": "Delete",
+      "unicode": "e811",
+      "unicode_decimal": 59409
+    },
+    {
+      "icon_id": "41130110",
+      "name": "运行",
+      "font_class": "yunhang",
+      "unicode": "e812",
+      "unicode_decimal": 59410
+    },
+    {
+      "icon_id": "41130111",
+      "name": "置顶",
+      "font_class": "zhiding",
+      "unicode": "e813",
+      "unicode_decimal": 59411
+    },
+    {
+      "icon_id": "41130117",
+      "name": "Download",
+      "font_class": "Download",
+      "unicode": "e814",
+      "unicode_decimal": 59412
+    },
+    {
+      "icon_id": "41130118",
+      "name": "明亮",
+      "font_class": "mingliang",
+      "unicode": "e815",
+      "unicode_decimal": 59413
+    },
+    {
+      "icon_id": "41130116",
+      "name": "Analyze",
+      "font_class": "Analyze",
+      "unicode": "e816",
+      "unicode_decimal": 59414
+    },
+    {
+      "icon_id": "41130162",
+      "name": "More",
+      "font_class": "More",
+      "unicode": "e805",
+      "unicode_decimal": 59397
+    },
+    {
+      "icon_id": "41130160",
+      "name": "最大化",
+      "font_class": "zuidahua",
+      "unicode": "e806",
+      "unicode_decimal": 59398
+    },
+    {
+      "icon_id": "41130161",
+      "name": "Personal",
+      "font_class": "Personal",
+      "unicode": "e807",
+      "unicode_decimal": 59399
+    },
+    {
+      "icon_id": "41130164",
+      "name": "Add",
+      "font_class": "Add",
+      "unicode": "e804",
+      "unicode_decimal": 59396
+    },
+    {
+      "icon_id": "41129282",
+      "name": "Pcaps",
+      "font_class": "Pcaps",
+      "unicode": "e7fd",
+      "unicode_decimal": 59389
+    },
+    {
+      "icon_id": "41129281",
+      "name": "Playbooks",
+      "font_class": "Playbooks",
+      "unicode": "e7fe",
+      "unicode_decimal": 59390
+    },
+    {
+      "icon_id": "41129280",
+      "name": "Signatures",
+      "font_class": "Signatures",
+      "unicode": "e7ff",
+      "unicode_decimal": 59391
+    },
+    {
+      "icon_id": "41129279",
+      "name": "Runners",
+      "font_class": "Runners",
+      "unicode": "e800",
+      "unicode_decimal": 59392
+    },
+    {
+      "icon_id": "41129278",
+      "name": "Packages",
+      "font_class": "Packages",
+      "unicode": "e801",
+      "unicode_decimal": 59393
+    },
+    {
+      "icon_id": "41129277",
+      "name": "Jobs",
+      "font_class": "Jobs",
+      "unicode": "e802",
+      "unicode_decimal": 59394
+    },
+    {
+      "icon_id": "41129276",
+      "name": "Applications",
+      "font_class": "Applications",
+      "unicode": "e803",
+      "unicode_decimal": 59395
+    },
+    {
+      "icon_id": "41129274",
+      "name": "Workbooks",
+      "font_class": "Workbooks",
+      "unicode": "e7fc",
+      "unicode_decimal": 59388
+    }
+  ]
+}

src/components/layout/index.vue

@@ -23,7 +23,7 @@ import leftMenu from '@/components/layout/leftMenu.vue';
     height: calc(100vh - 70px);
     position: relative;
     .pageContent {
-      padding: 18px 45px 32px 107px;
+      padding: 25px 50px 25px calc(64px + 50px);
       width: 100%;
       height: 100%;
       display: flex;

src/components/layout/layoutHeader.vue

@@ -68,9 +68,7 @@
               </div>
             </el-dropdown-item>
             <el-dropdown-item>
-              <el-icon :size="16">
-                <CircleClose />
-              </el-icon>
+              <i class="asw-icon icon-sign-out"></i>
               <span class="profile-text">Sign Out</span>
             </el-dropdown-item>
           </el-dropdown-menu>
@@ -84,7 +82,7 @@
         popper-class="headerMore-popper"
       >
         <button class="headerMore-dropdown-button">
-          <el-icon><Grid /></el-icon>
+          <i class="asw-icon icon-More"></i>
         </button>
         <template #dropdown>
           <el-dropdown-menu>
@@ -256,12 +254,14 @@ const themeChange = (val) => {
         cursor: pointer;
         outline: none;
         color: var(--text);
-        font-size: 22px;
         width: 28px;
         height: 28px;
         display: flex;
         justify-content: center;
         align-items: center;
+        i{
+          font-size: 18px;
+        }
         &:hover {
           color: var(--primary);
         }
@@ -276,7 +276,11 @@ const themeChange = (val) => {
 </style>
 <style lang="scss">
 .avatar-popper {
-  .profile-text, .el-icon {
+  .profile-text  {
+    color: var(--text);
+  }
+  i{
+    font-size: 18px;
     color: var(--text);
   }
   .profile-info{

src/components/layout/leftMenu.vue

@@ -11,7 +11,7 @@
         @click="jummp(item.route)"
       >
         <div class="leftMenu-icon">
-          <el-icon><Notebook /></el-icon>
+          <i class="asw-icon" :class="item.icon"></i>
         </div>
         <div class="leftMenu-text">{{ item.name }}</div>
       </li>
@@ -53,34 +53,42 @@ const menuList = ref([
   {
     name: 'Workbooks',
     route: '/workbooks',
+    icon: 'icon-Workbooks',
   },
   {
     name: 'Applications',
     route: '/applications',
+    icon: 'icon-Applications',
   },
   {
     name: 'Signatures',
     route: '/signatures',
+    icon: 'icon-Signatures',
   },
   {
     name: 'Pcaps',
     route: '/pcaps',
+    icon: 'icon-Pcaps',
   },
   {
     name: 'Packages',
     route: '/packages',
+    icon: 'icon-Packages',
   },
   {
     name: 'Jobs',
     route: '/jobs',
+    icon: 'icon-Jobs',
   },
   {
     name: 'Playbooks',
     route: '/playbooks',
+    icon: 'icon-Playbooks',
   },
   {
     name: 'Runners',
     route: '/runners',
+    icon: 'icon-Runners',
   },
 ]);
 </script>
@@ -139,8 +147,11 @@ const menuList = ref([
         display: flex;
         justify-content: center;
         align-items: center;
-        font-size: 32px;
+        font-size: 30px;
         color: var(--text_secondary);
+        i{
+          font-size: inherit;
+        }
       }
       .leftMenu-text {
         display: none;

src/main.js

@@ -3,6 +3,8 @@ import App from './App.vue'
 
 import './styles/element/index.scss'
 import './styles/index.scss'
+import '@/assets/iconfont/iconfont.css'
+import '@/assets/iconfont/iconfont.js'
 
 import router from "./router"
 import { createPinia } from 'pinia'