diff --git a/mayfly_go_web/src/assets/icon/mongo.png b/mayfly_go_web/src/assets/icon/mongo.png deleted file mode 100644 index 0288ee5f..00000000 Binary files a/mayfly_go_web/src/assets/icon/mongo.png and /dev/null differ diff --git a/mayfly_go_web/src/assets/icon/mysql.png b/mayfly_go_web/src/assets/icon/mysql.png deleted file mode 100644 index 7caeeed5..00000000 Binary files a/mayfly_go_web/src/assets/icon/mysql.png and /dev/null differ diff --git a/mayfly_go_web/src/assets/icon/postgres.png b/mayfly_go_web/src/assets/icon/postgres.png deleted file mode 100644 index 4db23760..00000000 Binary files a/mayfly_go_web/src/assets/icon/postgres.png and /dev/null differ diff --git a/mayfly_go_web/src/assets/icon/redis.png b/mayfly_go_web/src/assets/icon/redis.png deleted file mode 100644 index 0a26f9e0..00000000 Binary files a/mayfly_go_web/src/assets/icon/redis.png and /dev/null differ diff --git a/mayfly_go_web/src/assets/iconfont/iconfont.js b/mayfly_go_web/src/assets/iconfont/iconfont.js new file mode 100644 index 00000000..515f52f5 --- /dev/null +++ b/mayfly_go_web/src/assets/iconfont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_3953964='',function(c){var t=(t=document.getElementsByTagName("script"))[t.length-1],a=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var l,e,i,o,n,h=function(t,a){a.parentNode.insertBefore(t,a)};if(a&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}l=function(){var t,a=document.createElement("div");a.innerHTML=c._iconfont_svg_string_3953964,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(t=document.body).firstChild?h(a,t.firstChild):t.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),l()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(i=l,o=c.document,n=!1,s(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,d())})}function d(){n||(n=!0,i())}function s(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(s,50)}d()}}(window); \ No newline at end of file diff --git a/mayfly_go_web/src/assets/iconfont/iconfont.json b/mayfly_go_web/src/assets/iconfont/iconfont.json new file mode 100644 index 00000000..baab9418 --- /dev/null +++ b/mayfly_go_web/src/assets/iconfont/iconfont.json @@ -0,0 +1,51 @@ +{ + "id": "3953964", + "name": "mayfly-go", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "23957582", + "name": "MongoDB", + "font_class": "mongo", + "unicode": "e646", + "unicode_decimal": 58950 + }, + { + "icon_id": "4969649", + "name": "Redis", + "font_class": "op-redis", + "unicode": "e728", + "unicode_decimal": 59176 + }, + { + "icon_id": "22442993", + "name": "PostgreSQL", + "font_class": "op-postgres", + "unicode": "e8b7", + "unicode_decimal": 59575 + }, + { + "icon_id": "10055634", + "name": "云数据库MongoDB", + "font_class": "op-mongo", + "unicode": "e7d7", + "unicode_decimal": 59351 + }, + { + "icon_id": "10055642", + "name": "云数据库 RDS MySQL", + "font_class": "op-mysql", + "unicode": "e7d8", + "unicode_decimal": 59352 + }, + { + "icon_id": "3876165", + "name": "redis", + "font_class": "redis", + "unicode": "e619", + "unicode_decimal": 58905 + } + ] +} diff --git a/mayfly_go_web/src/common/utils/setIconfont.ts b/mayfly_go_web/src/common/utils/setIconfont.ts index f7cc3fa3..b05fd51f 100644 --- a/mayfly_go_web/src/common/utils/setIconfont.ts +++ b/mayfly_go_web/src/common/utils/setIconfont.ts @@ -1,42 +1,47 @@ // 字体图标 url const cssCdnUrlList: Array = [ - '//at.alicdn.com/t/font_2298093_ysc3z187xhh.css', - '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', + ]; // 第三方 js url const jsCdnUrlList: Array = []; -// 动态设置字体图标 +// 动态批量设置字体图标 export function setCssCdn() { - if (cssCdnUrlList.length <= 0) return false; - cssCdnUrlList.map((v) => { - let link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = v; - link.crossOrigin = 'anonymous'; - document.getElementsByTagName('head')[0].appendChild(link); - }); + if (cssCdnUrlList.length <= 0) return false; + cssCdnUrlList.map((v) => { + let link = document.createElement('link'); + link.rel = 'stylesheet'; + link.href = v; + link.crossOrigin = 'anonymous'; + document.getElementsByTagName('head')[0].appendChild(link); + }); } -// 批量设置第三方js +// 动态批量设置第三方js export function setJsCdn() { - if (jsCdnUrlList.length <= 0) return false; - jsCdnUrlList.map((v) => { - let link = document.createElement('script'); - link.src = v; - document.body.appendChild(link); - }); + if (jsCdnUrlList.length <= 0) return false; + jsCdnUrlList.map((v) => { + let link = document.createElement('script'); + link.src = v; + document.body.appendChild(link); + }); } -// 设置执行函数 +/** + * 批量设置字体图标、动态js + * @method cssCdn 动态批量设置字体图标 + * @method jsCdn 动态批量设置第三方js + */ const setIntroduction = { - cssCdn: () => { - setCssCdn(); - }, - jsCdn: () => { - setJsCdn(); - }, + // 设置css + cssCdn: () => { + setCssCdn(); + }, + // 设置js + jsCdn: () => { + setJsCdn(); + }, }; // 导出函数方法 -export default setIntroduction; +export default setIntroduction; \ No newline at end of file diff --git a/mayfly_go_web/src/common/utils/getStyleSheets.ts b/mayfly_go_web/src/common/utils/svgIcons.ts similarity index 77% rename from mayfly_go_web/src/common/utils/getStyleSheets.ts rename to mayfly_go_web/src/common/utils/svgIcons.ts index 67e0a78c..e789a7c1 100644 --- a/mayfly_go_web/src/common/utils/getStyleSheets.ts +++ b/mayfly_go_web/src/common/utils/svgIcons.ts @@ -1,5 +1,20 @@ import { nextTick } from 'vue'; import * as svg from '@element-plus/icons-vue'; +import iconfontJson from '@/assets/iconfont/iconfont.json' +import SvgIcon from '@/components/svgIcon/index.vue'; + +/** + * 导出全局注册 element plus svg 图标 + * @param app vue 实例 + * @description 使用：https://element-plus.gitee.io/zh-CN/component/icon.html + */ +export function registElSvgIcon(app: any) { + const icons = svg as any; + for (const i in icons) { + app.component(`${icons[i].name}`, icons[i]); + } + app.component('SvgIcon', SvgIcon); +} // 获取阿里字体图标 const getAlicdnIconfont = () => { @@ -9,7 +24,8 @@ const getAlicdnIconfont = () => { let sheetsList = []; let sheetsIconList = []; for (let i = 0; i < styles.length; i++) { - if (styles[i].href && styles[i].href.indexOf('at.alicdn.com') > -1) { + console.log(styles[i]); + if (styles[i].href && styles[i].href.indexOf('iconfont') > -1) { sheetsList.push(styles[i]); } } @@ -28,6 +44,16 @@ const getAlicdnIconfont = () => { }); }; +// 获取本地阿里icons +const getLocalAliIconfont = () => { + return new Promise((resolve, reject) => { + nextTick(() => { + const prefix = iconfontJson.css_prefix_text; + resolve(iconfontJson.glyphs.map((x: any) => prefix + x.font_class)); + }); + }); +} + // 初始化获取 css 样式，获取 element plus 自带图标 const elementPlusIconfont = () => { return new Promise((resolve, reject) => { @@ -76,9 +102,9 @@ const awesomeIconfont = () => { // 定义导出方法集合 const initIconfont = { - // ali: () => { - // return getAlicdnIconfont(); - // }, + ali: () => { + return getLocalAliIconfont(); + }, ele: () => { return elementPlusIconfont(); }, diff --git a/mayfly_go_web/src/components/iconSelector/index.vue b/mayfly_go_web/src/components/iconSelector/index.vue index a2bfb3cc..ef2d0f67 100644 --- a/mayfly_go_web/src/components/iconSelector/index.vue +++ b/mayfly_go_web/src/components/iconSelector/index.vue @@ -16,7 +16,6 @@ :name="state.fontIconPrefix === '' ? prepend : state.fontIconPrefix" class="font14" /> -
{{ title }}
- + + + @@ -51,7 +50,7 @@ \ No newline at end of file + + + \ No newline at end of file diff --git a/mayfly_go_web/src/main.ts b/mayfly_go_web/src/main.ts index f97feeaa..876f3384 100644 --- a/mayfly_go_web/src/main.ts +++ b/mayfly_go_web/src/main.ts @@ -1,36 +1,24 @@ import { createApp } from 'vue'; import App from '@/App.vue'; + import router from './router'; import pinia from '@/store/index'; import { directive } from '@/directive/index'; import { globalComponentSize } from '@/common/utils/componentSize'; +import { registElSvgIcon } from '@/common/utils/svgIcons'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import zhCn from 'element-plus/es/locale/lang/zh-cn' -import '@/theme/index.scss'; import { ElMessage } from 'element-plus'; -import * as svg from '@element-plus/icons-vue'; -import SvgIcon from '@/components/svgIcon/index.vue'; +import '@/theme/index.scss'; import '@/assets/font/font.css' +import '@/assets/iconfont/iconfont.js' const app = createApp(App); -/** - * 导出全局注册 element plus svg 图标 - * @param app vue 实例 - * @description 使用：https://element-plus.gitee.io/zh-CN/component/icon.html - */ -function elSvg(app: any) { - const icons = svg as any; - for (const i in icons) { - app.component(`${icons[i].name}`, icons[i]); - } - app.component('SvgIcon', SvgIcon); -} - -elSvg(app); +registElSvgIcon(app); directive(app); app.use(pinia) diff --git a/mayfly_go_web/src/theme/app.scss b/mayfly_go_web/src/theme/app.scss index 82a04976..95ccf8b4 100644 --- a/mayfly_go_web/src/theme/app.scss +++ b/mayfly_go_web/src/theme/app.scss @@ -340,24 +340,4 @@ body, .f12 { font-size: 12px -} - -// 图标垂直居中 -.icon-middle { - .el-icon { - display: inline-flex; - justify-content: center; - align-items: center; - cursor: pointer; - vertical-align: middle; - } -} -.img-icon { - display: inline-flex; - justify-content: center; - align-items: center; - cursor: pointer; - vertical-align: middle; - height: 16px; - width: 16px; } \ No newline at end of file diff --git a/mayfly_go_web/src/views/layout/navMenu/horizontal.vue b/mayfly_go_web/src/views/layout/navMenu/horizontal.vue index 2d0db212..abc8ec18 100644 --- a/mayfly_go_web/src/views/layout/navMenu/horizontal.vue +++ b/mayfly_go_web/src/views/layout/navMenu/horizontal.vue @@ -6,19 +6,19 @@