diff --git a/frontend/package.json b/frontend/package.json index a781763f..9c59abbf 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -39,6 +39,7 @@ "vue": "^3.5.13", "vue-i18n": "^10.0.5", "vue-router": "^4.5.0", + "vuedraggable": "^4.1.0", "xterm": "^5.3.0", "xterm-addon-fit": "^0.8.0", "xterm-addon-search": "^0.13.0", @@ -61,7 +62,7 @@ "prettier": "^3.2.5", "sass": "^1.82.0", "typescript": "^5.7.2", - "vite": "^6.0.3", + "vite": "^6.0.6", "vue-eslint-parser": "^9.4.3" }, "browserslist": [ diff --git a/frontend/src/assets/icon/db/dm.svg b/frontend/src/assets/icon/db/dm.svg new file mode 100644 index 00000000..dfdeb039 --- /dev/null +++ b/frontend/src/assets/icon/db/dm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/db/guass.svg b/frontend/src/assets/icon/db/guass.svg new file mode 100644 index 00000000..837c479d --- /dev/null +++ b/frontend/src/assets/icon/db/guass.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/db/kingbase.svg b/frontend/src/assets/icon/db/kingbase.svg new file mode 100644 index 00000000..1c57d068 --- /dev/null +++ b/frontend/src/assets/icon/db/kingbase.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/db/mariadb.svg b/frontend/src/assets/icon/db/mariadb.svg new file mode 100644 index 00000000..7527934c --- /dev/null +++ b/frontend/src/assets/icon/db/mariadb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/db/mysql.svg b/frontend/src/assets/icon/db/mysql.svg new file mode 100644 index 00000000..aff2ff73 --- /dev/null +++ b/frontend/src/assets/icon/db/mysql.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/db/oracle.svg b/frontend/src/assets/icon/db/oracle.svg new file mode 100644 index 00000000..2333a4cd --- /dev/null +++ b/frontend/src/assets/icon/db/oracle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/db/postgres.svg b/frontend/src/assets/icon/db/postgres.svg new file mode 100644 index 00000000..1686b299 --- /dev/null +++ b/frontend/src/assets/icon/db/postgres.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/db/sqlite.svg b/frontend/src/assets/icon/db/sqlite.svg new file mode 100644 index 00000000..61db9068 --- /dev/null +++ b/frontend/src/assets/icon/db/sqlite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/db/sqlserver.svg b/frontend/src/assets/icon/db/sqlserver.svg new file mode 100644 index 00000000..255fc220 --- /dev/null +++ b/frontend/src/assets/icon/db/sqlserver.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/db/vastbase.svg b/frontend/src/assets/icon/db/vastbase.svg new file mode 100644 index 00000000..ca06c0f7 --- /dev/null +++ b/frontend/src/assets/icon/db/vastbase.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/audio.svg b/frontend/src/assets/icon/file/audio.svg new file mode 100644 index 00000000..f9e35e4c --- /dev/null +++ b/frontend/src/assets/icon/file/audio.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/css.svg b/frontend/src/assets/icon/file/css.svg new file mode 100644 index 00000000..c83fe313 --- /dev/null +++ b/frontend/src/assets/icon/file/css.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/excel.svg b/frontend/src/assets/icon/file/excel.svg new file mode 100644 index 00000000..9372a342 --- /dev/null +++ b/frontend/src/assets/icon/file/excel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/file.svg b/frontend/src/assets/icon/file/file.svg new file mode 100644 index 00000000..593d9f88 --- /dev/null +++ b/frontend/src/assets/icon/file/file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/html.svg b/frontend/src/assets/icon/file/html.svg new file mode 100644 index 00000000..093a7867 --- /dev/null +++ b/frontend/src/assets/icon/file/html.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/image.svg b/frontend/src/assets/icon/file/image.svg new file mode 100644 index 00000000..5e4078f6 --- /dev/null +++ b/frontend/src/assets/icon/file/image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/js.svg b/frontend/src/assets/icon/file/js.svg new file mode 100644 index 00000000..78a6c627 --- /dev/null +++ b/frontend/src/assets/icon/file/js.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/md.svg b/frontend/src/assets/icon/file/md.svg new file mode 100644 index 00000000..00d34986 --- /dev/null +++ b/frontend/src/assets/icon/file/md.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/pdf.svg b/frontend/src/assets/icon/file/pdf.svg new file mode 100644 index 00000000..faa0ab03 --- /dev/null +++ b/frontend/src/assets/icon/file/pdf.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/ppt.svg b/frontend/src/assets/icon/file/ppt.svg new file mode 100644 index 00000000..9cd64e3f --- /dev/null +++ b/frontend/src/assets/icon/file/ppt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/txt.svg b/frontend/src/assets/icon/file/txt.svg new file mode 100644 index 00000000..dd694008 --- /dev/null +++ b/frontend/src/assets/icon/file/txt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/video.svg b/frontend/src/assets/icon/file/video.svg new file mode 100644 index 00000000..6e2cf671 --- /dev/null +++ b/frontend/src/assets/icon/file/video.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/word.svg b/frontend/src/assets/icon/file/word.svg new file mode 100644 index 00000000..516a8190 --- /dev/null +++ b/frontend/src/assets/icon/file/word.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/xml.svg b/frontend/src/assets/icon/file/xml.svg new file mode 100644 index 00000000..43d61e84 --- /dev/null +++ b/frontend/src/assets/icon/file/xml.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/yaml.svg b/frontend/src/assets/icon/file/yaml.svg new file mode 100644 index 00000000..fc5b85bd --- /dev/null +++ b/frontend/src/assets/icon/file/yaml.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/file/zip.svg b/frontend/src/assets/icon/file/zip.svg new file mode 100644 index 00000000..c24f4082 --- /dev/null +++ b/frontend/src/assets/icon/file/zip.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/icon.js b/frontend/src/assets/icon/icon.js new file mode 100644 index 00000000..36b9d558 --- /dev/null +++ b/frontend/src/assets/icon/icon.js @@ -0,0 +1,114 @@ +const allSvgIcons = import.meta.glob('./**/*.svg', { eager: true, as: 'raw' }); + +const iconNames = []; + +/** + * 获取本地图标 + * @returns 本地图标 + */ +export function getLocalIcons() { + return iconNames; +} + +function convertSvgToSymbol(svgString, symbolId) { + // 创建一个 DOMParser 实例 + const parser = new DOMParser(); + // 解析 SVG 字符串为文档对象 + const doc = parser.parseFromString(svgString, 'image/svg+xml'); + // 获取外层的 元素 + const svgElement = doc.querySelector('svg'); + // 创建一个新的 元素 + const symbolElement = document.createElementNS('http://www.w3.org/2000/svg', 'symbol'); + // 设置 元素的 id 属性 + symbolElement.setAttribute('id', symbolId); + // 复制 元素的 viewBox 属性到 元素 + if (svgElement.hasAttribute('viewBox')) { + symbolElement.setAttribute('viewBox', svgElement.getAttribute('viewBox')); + } + // 将 元素的所有子节点复制到 元素中 + while (svgElement.firstChild) { + symbolElement.appendChild(svgElement.firstChild); + } + // 创建一个临时的 div 元素来存储 元素的内容 + const tempDiv = document.createElement('div'); + tempDiv.appendChild(symbolElement); + // 返回 标签的内容 + return tempDiv.innerHTML; +} + +// iconfont 代码 +(function (c) { + let svgsymbols = ''; + // 初始化icons + for (const path in allSvgIcons) { + // ./df/input.svg + // 转为 df/input + const name = path.replace('.svg', '').replace(/^\.\//, ''); + iconNames.push(`icon ${name}`); + svgsymbols += convertSvgToSymbol(allSvgIcons[path], name); + } + svgsymbols += ''; + + 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 = svgsymbols), + (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); diff --git a/frontend/src/assets/icon/layout/cn.svg b/frontend/src/assets/icon/layout/cn.svg new file mode 100644 index 00000000..8bd64ae1 --- /dev/null +++ b/frontend/src/assets/icon/layout/cn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/layout/en.svg b/frontend/src/assets/icon/layout/en.svg new file mode 100644 index 00000000..81bc1ae8 --- /dev/null +++ b/frontend/src/assets/icon/layout/en.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/layout/tag-view-active.svg b/frontend/src/assets/icon/layout/tag-view-active.svg new file mode 100644 index 00000000..e9cf80ad --- /dev/null +++ b/frontend/src/assets/icon/layout/tag-view-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/mongo/mongo-color.svg b/frontend/src/assets/icon/mongo/mongo-color.svg new file mode 100644 index 00000000..bb0bbce9 --- /dev/null +++ b/frontend/src/assets/icon/mongo/mongo-color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/mongo/mongo.svg b/frontend/src/assets/icon/mongo/mongo.svg new file mode 100644 index 00000000..9674ed4d --- /dev/null +++ b/frontend/src/assets/icon/mongo/mongo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/redis/redis-color.svg b/frontend/src/assets/icon/redis/redis-color.svg new file mode 100644 index 00000000..60be66c1 --- /dev/null +++ b/frontend/src/assets/icon/redis/redis-color.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/icon/redis/redis.svg b/frontend/src/assets/icon/redis/redis.svg new file mode 100644 index 00000000..186c36cb --- /dev/null +++ b/frontend/src/assets/icon/redis/redis.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/iconfont/iconfont.js b/frontend/src/assets/iconfont/iconfont.js deleted file mode 100644 index e2c97106..00000000 --- a/frontend/src/assets/iconfont/iconfont.js +++ /dev/null @@ -1,66 +0,0 @@ -(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); diff --git a/frontend/src/assets/iconfont/iconfont.json b/frontend/src/assets/iconfont/iconfont.json deleted file mode 100644 index 2a8a6441..00000000 --- a/frontend/src/assets/iconfont/iconfont.json +++ /dev/null @@ -1,121 +0,0 @@ -{ - "id": "3953964", - "name": "mayfly-go", - "font_family": "iconfont", - "css_prefix_text": "icon-", - "description": "", - "glyphs": [ - { - "icon_id": "2967035", - "name": "符号-英文", - "font_class": "fuhao-yingwen", - "unicode": "e712", - "unicode_decimal": 59154 - }, - { - "icon_id": "26283783", - "name": "符号-中文", - "font_class": "fuhao-zhongwen", - "unicode": "e603", - "unicode_decimal": 58883 - }, - { - "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": "12295203", - "name": "达梦数据库", - "font_class": "db-dm", - "unicode": "e6f0", - "unicode_decimal": 59120 - }, - { - "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 - }, - { - "icon_id": "25271976", - "name": "oracle", - "font_class": "oracle", - "unicode": "e507", - "unicode_decimal": 58631 - }, - { - "icon_id": "8105644", - "name": "mariadb", - "font_class": "mariadb", - "unicode": "e513", - "unicode_decimal": 58643 - }, - { - "icon_id": "13601813", - "name": "sqlite", - "font_class": "sqlite", - "unicode": "e546", - "unicode_decimal": 58694 - }, - { - "icon_id": "29340317", - "name": "temp-mssql", - "font_class": "MSSQLNATIVE", - "unicode": "e600", - "unicode_decimal": 58880 - }, - { - "icon_id": "7699332", - "name": "gaussdb", - "font_class": "gauss", - "unicode": "e683", - "unicode_decimal": 59011 - }, - { - "icon_id": "34836637", - "name": "kingbase", - "font_class": "kingbase", - "unicode": "e882", - "unicode_decimal": 59522 - }, - { - "icon_id": "33047500", - "name": "vastbase", - "font_class": "vastbase", - "unicode": "e62b", - "unicode_decimal": 58923 - } - ] -} \ No newline at end of file diff --git a/frontend/src/common/commonEnum.ts b/frontend/src/common/commonEnum.ts index 9eae5aad..fd2ee936 100644 --- a/frontend/src/common/commonEnum.ts +++ b/frontend/src/common/commonEnum.ts @@ -5,8 +5,8 @@ import enLocale from 'element-plus/es/locale/lang/en'; // i18n export const I18nEnum = { - ZhCn: EnumValue.of('zh-cn', '简体中文').setExtra({ icon: 'iconfont icon-fuhao-zhongwen', el: zhcnLocale }), - En: EnumValue.of('en', 'English').setExtra({ icon: 'iconfont icon-fuhao-yingwen', el: enLocale }), + ZhCn: EnumValue.of('zh-cn', '简体中文').setExtra({ icon: 'icon layout/cn', el: zhcnLocale }), + En: EnumValue.of('en', 'English').setExtra({ icon: 'icon layout/en', el: enLocale }), }; // 资源类型 diff --git a/frontend/src/common/utils/svgIcons.ts b/frontend/src/common/utils/svgIcons.ts index 616b3021..a77380db 100644 --- a/frontend/src/common/utils/svgIcons.ts +++ b/frontend/src/common/utils/svgIcons.ts @@ -1,7 +1,7 @@ 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'; +import { getLocalIcons } from '@/assets/icon/icon.js'; /** * 导出全局注册 element plus svg 图标 @@ -16,44 +16,6 @@ export function registElSvgIcon(app: any) { app.component('SvgIcon', SvgIcon); } -// 获取阿里字体图标 -const getAlicdnIconfont = () => { - return new Promise((resolve, reject) => { - nextTick(() => { - const styles: any = document.styleSheets; - let sheetsList = []; - let sheetsIconList = []; - for (let i = 0; i < styles.length; i++) { - console.log(styles[i]); - if (styles[i].href && styles[i].href.indexOf('iconfont') > -1) { - sheetsList.push(styles[i]); - } - } - for (let i = 0; i < sheetsList.length; i++) { - for (let j = 0; j < sheetsList[i].cssRules.length; j++) { - if (sheetsList[i].cssRules[j].selectorText && sheetsList[i].cssRules[j].selectorText.indexOf('.icon-') > -1) { - sheetsIconList.push( - `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}` - ); - } - } - } - if (sheetsIconList.length > 0) resolve(sheetsIconList); - else reject('未获取到值，请刷新重试'); - }); - }); -}; - -// 获取本地阿里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) => { @@ -69,48 +31,14 @@ const elementPlusIconfont = () => { }); }; -// 初始化获取 css 样式，这里使用 fontawesome 的图标 -const awesomeIconfont = () => { - return new Promise((resolve, reject) => { - nextTick(() => { - const styles: any = document.styleSheets; - let sheetsList = []; - let sheetsIconList = []; - for (let i = 0; i < styles.length; i++) { - if (styles[i].href && styles[i].href.indexOf('netdna.bootstrapcdn.com') > -1) { - sheetsList.push(styles[i]); - } - } - for (let i = 0; i < sheetsList.length; i++) { - for (let j = 0; j < sheetsList[i].cssRules.length; j++) { - if ( - sheetsList[i].cssRules[j].selectorText && - sheetsList[i].cssRules[j].selectorText.indexOf('.fa-') === 0 && - sheetsList[i].cssRules[j].selectorText.indexOf(',') === -1 - ) { - sheetsIconList.push( - `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}` - ); - } - } - } - if (sheetsIconList.length > 0) resolve(sheetsIconList); - else reject('未获取到值，请刷新重试'); - }); - }); -}; - // 定义导出方法集合 const initIconfont = { - ali: () => { - return getLocalAliIconfont(); - }, ele: () => { return elementPlusIconfont(); }, - // awe: () => { - // return awesomeIconfont(); - // }, + other: () => { + return getLocalIcons(); + }, }; // 导出方法 diff --git a/frontend/src/components/iconSelector/index.vue b/frontend/src/components/iconSelector/index.vue index 4c466ea7..524dd653 100644 --- a/frontend/src/components/iconSelector/index.vue +++ b/frontend/src/components/iconSelector/index.vue @@ -31,12 +31,9 @@ - + - @@ -108,9 +105,8 @@ const state = reactive({ fontIconPlaceholder: '', fontIconTabActive: 'ele', fontIconList: { - ali: [], ele: [], - awe: [], + other: [], }, }); @@ -128,6 +124,7 @@ const onIconBlur = () => { if (icon.length <= 0) state.fontIconSearch = ''; }, 300); }; + // 图标搜索及图标数据显示 const fontIconSheetsFilterList = computed(() => { const list = fontIconTabNameList(); @@ -137,14 +134,15 @@ const fontIconSheetsFilterList = computed(() => { if (item.toLowerCase().indexOf(search) !== -1) return item; }); }); + // 根据 tab name 类型设置图标 const fontIconTabNameList = () => { let iconList: any = []; - if (state.fontIconTabActive === 'ali') iconList = state.fontIconList.ali; - else if (state.fontIconTabActive === 'ele') iconList = state.fontIconList.ele; - else if (state.fontIconTabActive === 'awe') iconList = state.fontIconList.awe; + if (state.fontIconTabActive === 'ele') iconList = state.fontIconList.ele; + else if (state.fontIconTabActive === 'other') iconList = state.fontIconList.other; return iconList; }; + // 处理 icon 双向绑定数值回显 const initModeValueEcho = () => { if (props.modelValue === '') return ((state.fontIconPlaceholder) = props.placeholder); @@ -154,36 +152,24 @@ const initModeValueEcho = () => { // 处理 icon 类型，用于回显时，tab 高亮与初始化数据 const initFontIconName = () => { let name = 'ele'; - if (props.modelValue!.indexOf('iconfont') > -1) { - name = 'ali'; - } else { - name = 'ele'; + if (props.modelValue!.indexOf('icon ') > -1) { + name = 'other'; } - // else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele'; - // else if (props.modelValue!.indexOf('fa') > -1) name = 'awe'; // 初始化 tab 高亮回显 state.fontIconTabActive = name; return name; }; // 初始化数据 const initFontIconData = async (name: string) => { - if (name === 'ali') { - // 阿里字体图标使用 `iconfont xxx` - if (state.fontIconList.ali.length > 0) return; - const res: any = await initIconfont.ali(); - state.fontIconList.ali = res.map((i: string) => `iconfont ${i}`); - } else if (name === 'ele') { + if (name === 'ele') { // element plus 图标 if (state.fontIconList.ele.length > 0) return; await initIconfont.ele().then((res: any) => { state.fontIconList.ele = res; }); - } else if (name === 'awe') { - // fontawesome字体图标使用 `fa xxx` - // if (state.fontIconList.awe.length > 0) return; - // await initIconfont.awe().then((res: any) => { - // state.fontIconList.awe = res.map((i: string) => `fa ${i}`); - // }); + } else if (name === 'other') { + // 本地导入svg图标, icon xxx + state.fontIconList.other = initIconfont.other() as any; } // 初始化 input 的 placeholder // 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81 diff --git a/frontend/src/components/monaco/MonacoEditorDialog.ts b/frontend/src/components/monaco/MonacoEditorDialog.ts index c849f7cf..4230a5bb 100644 --- a/frontend/src/components/monaco/MonacoEditorDialog.ts +++ b/frontend/src/components/monaco/MonacoEditorDialog.ts @@ -7,6 +7,7 @@ export type MonacoEditorDialogProps = { language: string; height?: string; width?: string; + showConfirmButton?: boolean; confirmFn?: Function; // 点击确认的回调函数，入参editor value cancelFn?: Function; // 点击取消 或 关闭弹窗的回调函数 }; @@ -16,7 +17,8 @@ const boxId = 'monaco-editor-dialog-id'; let boxInstance: VNode; const MonacoEditorDialog = (props: MonacoEditorDialogProps): void => { - if (!boxInstance) { + const container = document.getElementById(boxId); + if (!container) { const container = document.createElement('div'); container.id = boxId; // 创建 虚拟dom diff --git a/frontend/src/components/monaco/MonacoEditorDialogComp.vue b/frontend/src/components/monaco/MonacoEditorDialogComp.vue index 514034c6..64496351 100644 --- a/frontend/src/components/monaco/MonacoEditorDialogComp.vue +++ b/frontend/src/components/monaco/MonacoEditorDialogComp.vue @@ -4,8 +4,8 @@ - 取消 - 确定 + {{ i18n.global.t('common.cancel') }} + {{ i18n.global.t('common.confirm') }} @@ -18,6 +18,7 @@ import { ElDialog, ElButton, ElMessage } from 'element-plus'; // import base style import MonacoEditor from '@/components/monaco/MonacoEditor.vue'; import { MonacoEditorDialogProps } from './MonacoEditorDialog'; +import { i18n } from '@/i18n'; const editorRef: any = ref(null); @@ -28,6 +29,7 @@ const state = reactive({ contentValue: '', title: '', language: '', + showConfirmButton: true, }); let confirmFn: any; @@ -105,6 +107,12 @@ const open = (optionProps: MonacoEditorDialogProps) => { confirmFn = optionProps.confirmFn; cancelFn = optionProps.cancelFn; + if (optionProps.showConfirmButton === undefined) { + state.showConfirmButton = true; + } else { + state.showConfirmButton = optionProps.showConfirmButton; + } + const language = optionProps.language; state.language = language; state.title = optionProps.title; diff --git a/frontend/src/components/svgIcon/index.vue b/frontend/src/components/svgIcon/index.vue index d9aa0e85..e0cb55db 100644 --- a/frontend/src/components/svgIcon/index.vue +++ b/frontend/src/components/svgIcon/index.vue @@ -3,8 +3,8 @@ -
@@ -39,10 +39,13 @@ const props = defineProps({ }); // 在线链接、本地引入地址前缀 -const linesString = ['https', 'http', '/src', '/assets', 'data:image', import.meta.env.VITE_PUBLIC_PATH]; +const linesString = ['https', 'http', '/src', '/assets', 'icon ', 'data:image', import.meta.env.VITE_PUBLIC_PATH]; // 获取 icon 图标名称 const getIconName = computed(() => { + // if (props.name?.startsWith('icon ')) { + // return getIcon(props?.name?.split(' ')[1] as any); + // } return props?.name as any; }); @@ -55,12 +58,12 @@ const isShowIconSvg = computed(() => { return ss.length == 1; }); -const isIconfont = () => { - return props?.name?.startsWith('iconfont'); +const isLocalIcon = () => { + return props?.name?.startsWith('icon '); }; -const getIconfontName = () => { - // iconfont icon-xxxx 获取icon-xxx即可 +const getLocalIconName = () => { + // icon icon-xxxx 获取icon-xxx即可 return props?.name?.split(' ')[1]; }; @@ -76,20 +79,24 @@ const setIconSvgStyle = computed(() => { // 设置图片样式 const setIconImgOutStyle = computed(() => { - return `width: ${props.size}px;height: ${props.size}px;display: inline-block;overflow: hidden;`; + return `width: ${props.size}px;height: ${props.size}px;display: inline-block;overflow: hidden;line-height:${props.size}px;vertical-align: middle;`; }); // 设置图片样式 const setIconSvgInsStyle = computed(() => { - const filterStyle: string[] = []; - const compatibles: string[] = ['-webkit', '-ms', '-o', '-moz']; - compatibles.forEach((j) => filterStyle.push(`${j}-filter: drop-shadow(${props.color} 30px 0);`)); - return `width: ${props.size}px;height: ${props.size}px;position: relative;left: -${props.size}px;${filterStyle.join('')}`; + if (props.color) { + const filterStyle: string[] = []; + const compatibles: string[] = ['-webkit', '-ms', '-o', '-moz']; + compatibles.forEach((j) => filterStyle.push(`${j}-filter: drop-shadow(${props.color} ${props.size}px 0);`)); + return `width: ${props.size}px;height: ${props.size}px;position: relative;left: -${props.size}px;${filterStyle.join('')}`; + } + + return `width: ${props.size}px;height: ${props.size}px;position: relative;`; }); -