添加菜单图标 iconfont

src/assets/iconfont/iconfont.css

+@font-face {
+  font-family: "iconfont2"; /* Project id 5031296 */
+  src: url('iconfont.woff2?t=1759030230701') format('woff2'),
+       url('iconfont.woff?t=1759030230701') format('woff'),
+       url('iconfont.ttf?t=1759030230701') format('truetype'),
+       url('iconfont.svg?t=1759030230701#iconfont') format('svg');
+}
+
+.iconfont2 {
+  font-family: "iconfont2" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-dataEncryptionMhomepage:before {
+  content: "\e667";
+}
+
+.icon-dataEncryptionuser:before {
+  content: "\e65f";
+}
+
+.icon-dataEncryptionlog:before {
+  content: "\e65d";
+}
+
+.icon-dataEncryptiondesensitization:before {
+  content: "\e660";
+}
+
+.icon-dataEncryptionruleManagement:before {
+  content: "\e661";
+}
+
+.icon-dataEncryptionprojectManagement:before {
+  content: "\e662";
+}
+
+.icon-dataEncryptiondiscover:before {
+  content: "\e663";
+}
+
+.icon-dataEncryptionSystemSSettings:before {
+  content: "\e664";
+}
+
+.icon-dataEncryptionassetLlibrary:before {
+  content: "\e665";
+}
+
+.icon-dataEncryptionencryption:before {
+  content: "\e666";
+}
+

src/assets/iconfont/iconfont.json

+{
+  "id": "5031296",
+  "name": "dataEncryption",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-dataEncryption",
+  "description": "数据加密系统",
+  "glyphs": [
+    {
+      "icon_id": "45671847",
+      "name": "Mhomepage",
+      "font_class": "Mhomepage",
+      "unicode": "e667",
+      "unicode_decimal": 58983
+    },
+    {
+      "icon_id": "45671675",
+      "name": "user",
+      "font_class": "user",
+      "unicode": "e65f",
+      "unicode_decimal": 58975
+    },
+    {
+      "icon_id": "45671674",
+      "name": "log",
+      "font_class": "log",
+      "unicode": "e65d",
+      "unicode_decimal": 58973
+    },
+    {
+      "icon_id": "45671666",
+      "name": "desensitization",
+      "font_class": "desensitization",
+      "unicode": "e660",
+      "unicode_decimal": 58976
+    },
+    {
+      "icon_id": "45671672",
+      "name": "ruleManagement",
+      "font_class": "ruleManagement",
+      "unicode": "e661",
+      "unicode_decimal": 58977
+    },
+    {
+      "icon_id": "45671671",
+      "name": "projectManagement",
+      "font_class": "projectManagement",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "45671669",
+      "name": "discover",
+      "font_class": "discover",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
+    {
+      "icon_id": "45671670",
+      "name": "SystemSSettings",
+      "font_class": "SystemSSettings",
+      "unicode": "e664",
+      "unicode_decimal": 58980
+    },
+    {
+      "icon_id": "45671668",
+      "name": "assetLlibrary",
+      "font_class": "assetLlibrary",
+      "unicode": "e665",
+      "unicode_decimal": 58981
+    },
+    {
+      "icon_id": "45671667",
+      "name": "encryption",
+      "font_class": "encryption",
+      "unicode": "e666",
+      "unicode_decimal": 58982
+    }
+  ]
+}

src/assets/styles/index.scss

@@ -5,6 +5,7 @@
 @use './btn.scss';
 @use './ruoyi.scss';
 @use './font.scss';
+@import '../../assets/iconfont/iconfont.css';
 body {
   height: 100%;
   margin: 0;

src/layout/components/Sidebar/SidebarItem.vue

@@ -7,7 +7,9 @@
           :index="resolvePath(onlyOneChild.path)" 
           @click="handleNoChildrenClick(item)"
         >
-          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
+          <!-- <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
+            -->
+          <i :class="`iconfont2 icon-${item.meta.icon}`"></i>
           <span class="menu-title" style="color: #fff;">{{ onlyOneChild.meta.title }}</span>
         </el-menu-item>
       </app-link>
@@ -19,7 +21,9 @@
       :index="resolvePath(item.path)"
       @click="handleItemClick(item)"
     >
-      <svg-icon :icon-class="item.meta && item.meta.icon" />
+      <!-- <svg-icon :icon-class="item.meta && item.meta.icon" />
+        -->
+      <i :class="`iconfont2 icon-${item.meta.icon}`"></i>
       <span class="menu-title" style="color: #fff;">{{ item.meta.title }}</span>
     </el-menu-item>
   </div>
@@ -121,3 +125,22 @@ function resolvePath(routePath, routeQuery) {
   return getNormalPath(props.basePath + '/' + routePath)
 }
 </script>
+<style lang="scss" scoped>
+  :deep(.el-menu-item){
+    display: flex;
+    flex-direction: column;
+    line-height: unset;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 16px;
+    padding-bottom: 9px;
+    .iconfont2 {
+      font-size: 20px;
+      color: #fff;
+       display: inline;
+    }
+    .menu-title {
+      display: inline;
+    }
+  }
+</style>
\ No newline at end of file

src/layout/components/Sidebar/index.vue

@@ -53,7 +53,7 @@
       <div class="submenu-wrapper">
         <template v-for="(child, index) in submenuItems" :key="child.path + index">
           <div v-if="!child.hidden" class="submenu-item" :class="[child.fullPath === route.fullPath ? 'active-submenu-item' : '']" @click="remberChild(child)">
-            <app-link :to="child.fullPath"> <!-- 使用完整路径 -->
+            <app-link :to="child.fullPath"> 
               <div class="submenu-link" >
                 <svg-icon :icon-class="child.meta.icon" />
                 <span>{{ child.meta.title }}</span>
@@ -80,8 +80,9 @@ import useUserStore from '@/store/modules/user'
 import usePermissionStore from '@/store/modules/permission'
 import { ref, computed,onMounted } from 'vue'
 import { getNormalPath } from '@/utils/ruoyi'
-import { useRoute } from 'vue-router'
+import { useRoute,useRouter } from 'vue-router'
 const route = useRoute()
+const router = useRouter()
 const submenuItems = ref([])
 const appStore = useAppStore()
 const userStore = useUserStore()