From 4dc87e3a03afe4d2b11c08d52c2f8c5062cf059c Mon Sep 17 00:00:00 2001 From: Leo_Ding <2405260743@qq.com> Date: Fri, 4 Jul 2025 12:27:30 +0800 Subject: [PATCH] =?UTF-8?q?=E9=9B=86=E6=88=90=E9=98=BF=E9=87=8C=E5=B7=B4?= =?UTF-8?q?=E5=B7=B4=E5=9B=BE=E6=A0=87=E5=BA=93=E5=B9=B6=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=B1=95=E7=A4=BA=E5=9B=BE=E6=A0=87=E7=9A=84?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.dev | 2 +- src/assets/iconfont/demo.css | 539 +++++++++++++++++++++++++++ src/assets/iconfont/demo_index.html | 211 +++++++++++ src/assets/iconfont/iconfont.css | 19 + src/assets/iconfont/iconfont.js | 1 + src/assets/iconfont/iconfont.json | 16 + src/assets/iconfont/iconfont.ttf | Bin 0 -> 1912 bytes src/assets/iconfont/iconfont.woff | Bin 0 -> 1280 bytes src/assets/iconfont/iconfont.woff2 | Bin 0 -> 936 bytes src/layouts/components/BasicMenu.vue | 19 +- src/main.js | 4 +- src/views/system/menu/index.vue | 60 +-- 12 files changed, 821 insertions(+), 50 deletions(-) create mode 100644 src/assets/iconfont/demo.css create mode 100644 src/assets/iconfont/demo_index.html create mode 100644 src/assets/iconfont/iconfont.css create mode 100644 src/assets/iconfont/iconfont.js create mode 100644 src/assets/iconfont/iconfont.json create mode 100644 src/assets/iconfont/iconfont.ttf create mode 100644 src/assets/iconfont/iconfont.woff create mode 100644 src/assets/iconfont/iconfont.woff2 diff --git a/.env.dev b/.env.dev index 1c9a1a1..bfec94b 100644 --- a/.env.dev +++ b/.env.dev @@ -12,7 +12,7 @@ VITE_ROUTER_BASE=/ VITE_ROUTER_HISTORY=hash # api -VITE_API_BASIC=/ +VITE_API_BASIC=http://10.10.1.6:8071 VITE_API_HTTP=/api/v1/ # storage VITE_STORAGE_NAMESPACE = gin-admin_local_ \ No newline at end of file diff --git a/src/assets/iconfont/demo.css b/src/assets/iconfont/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/assets/iconfont/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/assets/iconfont/demo_index.html b/src/assets/iconfont/demo_index.html new file mode 100644 index 0000000..4c24f3f --- /dev/null +++ b/src/assets/iconfont/demo_index.html @@ -0,0 +1,211 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    公告
    +
    &#xe62a;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1751597994649') format('woff2'),
+       url('iconfont.woff?t=1751597994649') format('woff'),
+       url('iconfont.ttf?t=1751597994649') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 公告 +
    +
    .icon-gonggao +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    公告
    +
    #icon-gonggao
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/src/assets/iconfont/iconfont.css b/src/assets/iconfont/iconfont.css new file mode 100644 index 0000000..c67bdd0 --- /dev/null +++ b/src/assets/iconfont/iconfont.css @@ -0,0 +1,19 @@ +@font-face { + font-family: "iconfont"; /* Project id 4966438 */ + src: url('iconfont.woff2?t=1751597994649') format('woff2'), + url('iconfont.woff?t=1751597994649') format('woff'), + url('iconfont.ttf?t=1751597994649') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-gonggao:before { + content: "\e62a"; +} + diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js new file mode 100644 index 0000000..84ec440 --- /dev/null +++ b/src/assets/iconfont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4966438='',(n=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var o,i,c,d,s,l=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4966438,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?l(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(c=o,d=n.document,s=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,a())})}function a(){s||(s=!0,c())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}a()}})(window); \ No newline at end of file diff --git a/src/assets/iconfont/iconfont.json b/src/assets/iconfont/iconfont.json new file mode 100644 index 0000000..72a8648 --- /dev/null +++ b/src/assets/iconfont/iconfont.json @@ -0,0 +1,16 @@ +{ + "id": "4966438", + "name": "近山", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "8765148", + "name": "公告", + "font_class": "gonggao", + "unicode": "e62a", + "unicode_decimal": 58922 + } + ] +} diff --git a/src/assets/iconfont/iconfont.ttf b/src/assets/iconfont/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..fe3c5a4c0038e213b437b2f0218663fb40bc7600 GIT binary patch literal 1912 zcmd^AOK%%h6h3#J@i=~AJ2rVV6NlJon%JpH(~zc=k~Bf0N+AhZ&`4xzkDXLwk2RiF z4X_Ae1ELb__yMfgu|goRVAoA0mPl2piiF$+&5E)CO8D-~m`B=wz`eTne&;*iJ?B0= z*Tje@O#39#^ve1hFY6zTy-mdCz;0YxFO?V0z493LP1xI&hS7Sk_T@P2M`*3OwO3pH z;nP(j(c<=wX;dd)np}hSKHBUK2(=@A0Q?Qwb2|<9MvnqS>>;`y%dQyo6}QDII;COU zXt6j!&$6)frqM9tpDlbrB;6$v>MgtNe)r?O7LmFH|4G8y#r?y5+L93U@K91Y^PeJk z4A|edp3S@!Tlkg2k|+4-=A#J?{PA#KQpNXR_K@JYu>_0)y-U8Fvl=SW{L8P=G`&c| z((=U(idu%-r2atf&-ds0m|44Z1Mve3I__m)81XaV`6NkXpOB2i9}2f&f9#L!XDTzy z6i61qKBc@?yHKTXI}@D=?>tDnOZ$-VnEw=kC*&uEf*iPUqDeH+Y$MRFg5|R&F=Dsi zCCYgkiSwO_L+s!0Vf#BE=EsEWe_VRKy$=Q_;GGpeDcJrk@ZUMkEBK`yrweqM-hs2o z3Pq+yS*Fjg>6EI(n9`Ry#-1W{b7xzh86G}0ynQD#p31~hsrYe86*_WUZpX6OSUaRh>MyJv($jKi zX>@98WH~heDxpfstA!b{KRrGq)TE>s6|~SuEE3U^gM%Z57p8NiWF)7_V2ARVv9YPr z%KQ|&n9klGp35ERbGc47ok)#~jnQQMk2f{pK<>##4`NwKP=4!=is_N)rIjtCdU^5n z;Q>X&2c&GSTh99G`ST@y70=MU;QWb_f8PcF>XHF3kV*pq7QyENECEjhSjG!k4zL3L zY=AX7fqV4tH;jla{`E*9w=pCE)J^EK?sn2(SYFaey`2 zWRU=eDbFg4j%m1NRll;Q?^f()&2GBgam}n>vka$ecE?TAY46%i{bX^vORbnq)9Hq3 zU$2*4x2D$|yP+>5o@rUO-g4}#X2mV;xNd8{RN{F!U#!>-S|o=|GRQ?=C7rI&9{OFX zkWEdhdA<9Dy#{riu91bA&J*6Fvp1o3s0|&DspHu%;@Lf_T7jzRDUYtEP1ljFj5WGg zk&fmdQUho?Sf7cNSim|iko&G8P6g^B?Rc|VG*2be?tZ%ZqPNcmf0+Hk{~w-K1ST+% N)VkfQ*A3fK`~|zF04M+e literal 0 HcmV?d00001 diff --git a/src/assets/iconfont/iconfont.woff b/src/assets/iconfont/iconfont.woff new file mode 100644 index 0000000000000000000000000000000000000000..3a2562e36bece62c9b43833677241e5aa40674f4 GIT binary patch literal 1280 zcmY+Ddr%Ws6vl6ot{iA2+n|r?Bo;`PG?zwrK z@Nhr?Fw6k3##amJzaG#3A3Ng{LI5CGLK*h{q?K&FjG&2dlyg1MKKvr26|U}ZSrB2%Sks$ z-Irv-RW$yAVj^%2Fk=J!TMXl?4Tf%mVX#Y5B$wAZhWNDcncOGfu(#gZ2Q?!I>o=1v zYJ{x2T+#d^gTb)>5P|K@tfO;@Ad^XM!h4`-I+Qt=O5c*I2EF|HCQ^i0p{5FY2$z z$sW)~4JcKv+KN%ZfRj*rW}Qde;im1eS`$kBs943=E4kA?+@(`hj)o2ne%m@b_p;T| z#>sNIl|pE*^V=HY^SX>8q0PuNvgG0GC^12v*lYewvdEjVnR{)dBSDk$pM$AMr106l zm7Ej@#gL6^w9%}f*+y81EHKU6Nb6tR-+cScAJnDAI%SW(%w>0XX?J3T8@tG%(<#;2 z>A3HgO_AZTu6~OJ86G+QdGWtb`@i~en0ux>=~@&bx>2#9_$qlOL>oFUQ%pIuO6{*- z%IiJnKY)aAPOljWKi~Jjj_Rg%-gnNuW#7e#u$Ga6x}LV{lZ_jyZt>OXXE((Bq^!Q% z{iC(*4dm~x%efD+0CgXU!WU{gf@IuB&IU9LEJZFT3LC`v3L0+(T{J^$6? zXH4lZ-Zadv1X%}=Vh}SX0c6i3dl5Kr2tKiRz?lUEC?ePo@E3RnfE9cISivoT{S@Ua zkujK}IQ5$nIY$3f>nlv$Oty$;XwGUZE>G;ddN0M3J?I~GL}~ZLa$1mcn4Leg zgA~?!e>m%5TP3v%Jl7vOG}ki8818VneAKPka9Vu)txC@+SX*CPQX@Y3_Pm(nDYX+d z@NTZEDZFt(k%!qd%~R@4=BJDaGpWXH3!gO?Su9!J)2%zRm|s21cuHq7Ym=4=_! zB?tyOwa=wT-f-oC1*gjc=4Wy*h@uCpri{rvOeLqGLaU0L;o zUcz|VG*UjbU0_Q_YrPaa^$x6vI&SqLIW9CzlCf~&xtU*avT!ArGj+97=a{Wv5G8$| zZ~SGzn7=jZh)3$v*j$O5sHf_n@3E9y5!{9`o50bFx`Trx_tJCZZyK-F*%ik0DwhaD ks;u4kz2eFM!~B`7q`aiOQqE!pd9qkur{n~%W-D>!AF>kmZ~y=R literal 0 HcmV?d00001 diff --git a/src/assets/iconfont/iconfont.woff2 b/src/assets/iconfont/iconfont.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..36fc3a1769d3dfdcfeac926b3327a58a99583e52 GIT binary patch literal 936 zcmV;Z16TZaPew8T0RR9100XE13jhEB00(#g00UY80RR9100000000000000000000 z0000SR0d!Gf^Z6gaDqqyHUcCA2nz-P1Rw>3X9qDGg$BsJKsJU$<2@onY!1@e#gKfm zxb2@Nh5N=jcqASk_v3f&wl5+{HAB-Rn#g!liDng&NvD#DMD>v0|E^^z5dRV_x&m`L zo0;Xz%ci7jiG?E&3dq$F9f4wX?-~#QNM<7#jR6{%=Y)7EvV!dk@lsL-)AQmkG`J}= zN0f4h^5j6SuMD6B2%>KlE=F@zkZ;7PoJIH`l!TJbZDUOgSbb}-xR=!mvVnT_f_WW? zw=VM%fksR6*sm$8X+hoxF}I>{j*P}2PLG2I2_sitr_`i}dZD)M%97&-P(!*1o#nd! z`S@!ANlj*CZQfm~Lx=0kG5J68JI1TR=!6<%%&p82+v{x`IfQ{Z4jRjBjz*~RBKSd7 zx$L_Ccmz?)NNongV9$xO`BP0zprH3ONboIiey3n&!r>IL) z5WFy>aj2*v^5Ui8xGT7}UeWS)`}Sr{{L_dUS_LteF0mUzwo z#0`;@--qwaUumCX-v8})@HynRO-+7eCV$LH=f=3QjBc#U=z^lshP(~;ir^<`TB}-< znzSZnzcs8jupqhM(jipm3!X3hmf!emSV+Ims-X+`);gbW=b-+)ZNX3IZ&#_MstV4> zlL~5z1(MSS^(8c#ZYqYW({o={*Ud&ky{=n!)ESDA)f*uSGlLpUR#2@0c9n+(mefrO$f;lGmNz)+5(J?0rG*Gf~o~kE?8UDUCBN+ z!z3CUCjufyLKdKmw-9C}KmoaYm=Pi16!blOvMfqdN^C1A=2uuAZ4)#y)G5q?S=}CL Kl_X3N0ssK}=BaA{ literal 0 HcmV?d00001 diff --git a/src/layouts/components/BasicMenu.vue b/src/layouts/components/BasicMenu.vue index 1e8335e..bdbaa26 100644 --- a/src/layouts/components/BasicMenu.vue +++ b/src/layouts/components/BasicMenu.vue @@ -79,11 +79,22 @@ watch( h(Badge, { count: item?.meta?.badge || 0 }), ]), icon: (item) => { - const icon = item?.meta?.icon - if (icon) { - return h(icon) + const iconName = item?.meta?.icon; + // 处理阿里巴巴Iconfont图标 (以'icon-'开头) + if (typeof (iconName)==='string') { + const iconfontName = iconName; + return h('span', { + class: 'ceshi', + 'aria-hidden': true, + innerHTML: `` + }); + } else { + const icon = item?.meta?.icon + if (icon) { + return h(icon) + } + return '' } - return '' }, children: 'children', }, diff --git a/src/main.js b/src/main.js index 14af9f2..d03dabe 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,10 @@ import { createApp } from 'vue' - +import {spliceUrl} from '@/utils/util' import App from '@/App.vue' import { useCore } from '@/core' +import './assets/iconfont/iconfont.css'; const app = createApp(App) +app.config.globalProperties.$spliceUrl=spliceUrl useCore(app) app.mount('#app') diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue index e47c7af..7f32475 100644 --- a/src/views/system/menu/index.vue +++ b/src/views/system/menu/index.vue @@ -1,17 +1,11 @@ + + 引入阿里巴巴图标 - + {{ $t('pages.system.menu.add') }} - +