diff --git a/backend/src/main/java/io/dataease/controller/sys/SystemInfoController.java b/backend/src/main/java/io/dataease/controller/sys/SystemInfoController.java new file mode 100644 index 0000000000..4177a004a1 --- /dev/null +++ b/backend/src/main/java/io/dataease/controller/sys/SystemInfoController.java @@ -0,0 +1,24 @@ +package io.dataease.controller.sys; + +import io.dataease.dto.UserLoginInfoDTO; +import io.dataease.service.SystemInfoService; +import org.springframework.web.bind.annotation.GetMapping; +import org.springframework.web.bind.annotation.RequestMapping; +import org.springframework.web.bind.annotation.RestController; +import springfox.documentation.annotations.ApiIgnore; + +import javax.annotation.Resource; +import java.io.IOException; + +@ApiIgnore +@RestController +@RequestMapping("systemInfo") +public class SystemInfoController { + @Resource + private SystemInfoService systemInfoService; + + @GetMapping("userLoginInfo") + public UserLoginInfoDTO userLoginInfo() throws IOException { + return systemInfoService.getUserLoginInfo(); + } +} diff --git a/backend/src/main/java/io/dataease/dto/UserLoginInfoDTO.java b/backend/src/main/java/io/dataease/dto/UserLoginInfoDTO.java new file mode 100644 index 0000000000..35be339932 --- /dev/null +++ b/backend/src/main/java/io/dataease/dto/UserLoginInfoDTO.java @@ -0,0 +1,25 @@ +package io.dataease.dto; + +import io.dataease.auth.api.dto.CurrentUserDto; +import lombok.Data; + +/** + * Author: wangjiahao + * Date: 2022/11/10 + * Description: + */ +@Data +public class UserLoginInfoDTO { + + private CurrentUserDto userInfo; + + private String ip; + + public UserLoginInfoDTO() { + } + + public UserLoginInfoDTO(CurrentUserDto userInfo, String ip) { + this.userInfo = userInfo; + this.ip = ip; + } +} diff --git a/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java b/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java index 00b570a236..746f230067 100644 --- a/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java +++ b/backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java @@ -2,9 +2,11 @@ package io.dataease.dto.panel; import io.dataease.dto.chart.ChartViewDTO; import io.dataease.plugins.common.base.domain.PanelGroupWithBLOBs; +import io.dataease.plugins.common.base.domain.PanelWatermark; import io.dataease.plugins.common.model.ITreeBase; import io.swagger.annotations.ApiModelProperty; import lombok.Data; + import java.util.List; import java.util.Map; @@ -43,4 +45,7 @@ public class PanelGroupDTO extends PanelGroupWithBLOBs implements ITreeBase tree(PanelGroupRequest panelGroupRequest) { String userId = String.valueOf(AuthUtils.getUser().getUserId()); @@ -304,6 +309,7 @@ public class PanelGroupService { panelGroup.setPanelStyle(sourcePanel.getPanelStyle()); panelGroup.setSourcePanelName(sourcePanel.getName()); } + panelGroup.setWatermarkInfo(panelWatermarkMapper.selectByPrimaryKey("system_default")); return panelGroup; } @@ -750,7 +756,9 @@ public class PanelGroupService { if (cache == null) { return null; } else { - return (PanelGroupRequest) cache; + PanelGroupDTO result = (PanelGroupRequest) cache; + result.setWatermarkInfo(panelWatermarkMapper.selectByPrimaryKey("system_default")); + return result; } } diff --git a/backend/src/main/resources/db/migration/V44__1.17.sql b/backend/src/main/resources/db/migration/V44__1.17.sql index 213e8c73ea..e878d7fda3 100644 --- a/backend/src/main/resources/db/migration/V44__1.17.sql +++ b/backend/src/main/resources/db/migration/V44__1.17.sql @@ -3,6 +3,27 @@ ALTER TABLE `sys_log` CHANGE COLUMN `login_name` `login_name` VARCHAR (255) NULL COMMENT '登录账号', CHANGE COLUMN `nick_name` `nick_name` VARCHAR (255) NULL COMMENT '姓名'; +ALTER TABLE `panel_group` + ADD COLUMN `watermark_open` tinyint(1) NULL DEFAULT 1 COMMENT '是否单独打开水印' AFTER `update_time`; + +INSERT INTO `panel_watermark` (`id`, `version`, `setting_content`, `create_by`, `create_time`) +VALUES ('system_default', '1.0', + '{\"enable\":false,\"enablePanelCustom\":true,\"type\":\"custom\",\"content\":\"${time}-${nickName}\",\"watermark_color\":\"#999999\",\"watermark_x_space\":20,\"watermark_y_space\":100,\"watermark_fontsize\":20}', + 'admin', NULL); + +CREATE TABLE `panel_watermark` +( + `id` varchar(50) NOT NULL, + `name` varchar(255) DEFAULT NULL, + `version` varchar(255) DEFAULT NULL COMMENT '版本', + `type` varchar(255) DEFAULT NULL COMMENT '类型', + `content` varchar(255) DEFAULT NULL, + PRIMARY KEY (`id`) +) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci; + +SET +FOREIGN_KEY_CHECKS = 1; + UPDATE `sys_menu` SET `component` = 'dataset/Form' WHERE (`menu_id` = '800'); diff --git a/frontend/src/api/panel/panel.js b/frontend/src/api/panel/panel.js index 9d5d7198c6..8819018514 100644 --- a/frontend/src/api/panel/panel.js +++ b/frontend/src/api/panel/panel.js @@ -66,6 +66,7 @@ export function viewData(id, panelId, data) { data }) } + export function panelSave(data) { return request({ url: 'panel/group/save', @@ -174,7 +175,9 @@ export function initPanelData(panelId, useCache = false, callback) { creatorName: response.data.creatorName, updateBy: response.data.updateBy, updateName: response.data.updateName, - updateTime: response.data.updateTime + updateTime: response.data.updateTime, + watermarkOpen: response.data.watermarkOpen, + watermarkInfo: response.data.watermarkInfo }) // 刷新联动信息 getPanelAllLinkageInfo(panelId).then(rsp => { @@ -230,6 +233,7 @@ export function initViewCache(panelId) { loading: false }) } + export function exportDetails(data) { // 初始化仪表板视图缓存 return request({ @@ -268,6 +272,7 @@ export function saveCache(data) { data }) } + export function findUserCacheRequest(panelId) { return request({ url: 'panel/group/findUserCache/' + panelId, diff --git a/frontend/src/api/panel/shareProxy.js b/frontend/src/api/panel/shareProxy.js index 2ee5fcab34..241a7dbc24 100644 --- a/frontend/src/api/panel/shareProxy.js +++ b/frontend/src/api/panel/shareProxy.js @@ -23,7 +23,9 @@ export function proxyInitPanelData(panelId, proxy, callback) { creatorName: response.data.creatorName, updateBy: response.data.updateBy, updateName: response.data.updateName, - updateTime: response.data.updateTime + updateTime: response.data.updateTime, + watermarkOpen: response.data.watermarkOpen, + watermarkInfo: response.data.watermarkInfo }) // 刷新联动信息 getPanelAllLinkageInfo(panelId, proxy).then(rsp => { diff --git a/frontend/src/api/systemInfo/userLogin.js b/frontend/src/api/systemInfo/userLogin.js new file mode 100644 index 0000000000..95add502fb --- /dev/null +++ b/frontend/src/api/systemInfo/userLogin.js @@ -0,0 +1,13 @@ +import request from '@/utils/request' + +export function userLoginInfo() { + return request({ + url: '/systemInfo/userLoginInfo', + method: 'get', + loading: false + }) +} + +export default { + userLoginInfo +} diff --git a/frontend/src/assets/watermark-demo.png b/frontend/src/assets/watermark-demo.png new file mode 100644 index 0000000000..a6353af3ff Binary files /dev/null and b/frontend/src/assets/watermark-demo.png differ diff --git a/frontend/src/components/canvas/DeCanvas.vue b/frontend/src/components/canvas/DeCanvas.vue index e954e3fb4c..3e5c528aa1 100644 --- a/frontend/src/components/canvas/DeCanvas.vue +++ b/frontend/src/components/canvas/DeCanvas.vue @@ -8,7 +8,7 @@ @mouseup="deselectCurComponent" @scroll="canvasScroll" > - + { @@ -252,6 +261,14 @@ export default { bus.$off('button-dialog-edit', this.editButtonDialog) }, methods: { + initWatermark() { + if (this.panelInfo.watermarkInfo) { + userLoginInfo().then(res => { + const userInfo = res.data + activeWatermark(JSON.parse(this.panelInfo.watermarkInfo.settingContent), userInfo, this.canvasDomId, this.canvasId, this.panelInfo.watermarkOpen) + }) + } + }, initEvents() { bus.$on('component-dialog-edit', this.editDialog) bus.$on('button-dialog-edit', this.editButtonDialog) diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue index 31d1992cc5..9bc1fb28d4 100644 --- a/frontend/src/components/canvas/components/Toolbar.vue +++ b/frontend/src/components/canvas/components/Toolbar.vue @@ -7,10 +7,10 @@ @change="openMobileLayout" > - + - + @@ -95,7 +95,7 @@ - + {{ $t('panel.new_element_distribution') }} - + {{ $t('panel.aided_grid') }} - + {{ $t('panel.params_setting') }} - + {{ $t('panel.clean_canvas') }} + + + {{ $t('panel.watermark') }} + + @@ -182,8 +191,8 @@ {{ - $t('panel.panel_save_warn_tips') - }} + $t('panel.panel_save_warn_tips') + }}
- +
{ + const userInfo = res.data + activeWatermark(JSON.parse(this.panelInfo.watermarkInfo.settingContent), userInfo, 'preview-main-canvas-main', this.canvasId, this.panelInfo.watermarkOpen) + }) + }, isMainCanvas() { return this.canvasId === 'canvas-main' }, diff --git a/frontend/src/components/canvas/tools/watermark.js b/frontend/src/components/canvas/tools/watermark.js new file mode 100644 index 0000000000..808f7daef1 --- /dev/null +++ b/frontend/src/components/canvas/tools/watermark.js @@ -0,0 +1,156 @@ +//动态创建水印元素的封装函数 + +export function watermark(settings, domId) { + const watermarkDom = document.getElementById(domId) + //默认设置 + let defaultSettings = { + watermark_txt: '', + watermark_x: 20, //水印起始位置x轴坐标 + watermark_y: 20, //水印起始位置Y轴坐标 + watermark_rows: 20, //水印行数 + watermark_cols: 20, //水印列数 + watermark_x_space: 100, //水印x轴间隔 + watermark_y_space: 50, //水印y轴间隔 + watermark_color: '#aaa', //水印字体颜色 + watermark_alpha: 0.4, //水印透明度 + watermark_fontsize: '15px', //水印字体大小 + watermark_font: '微软雅黑', //水印字体 + watermark_width: 210, //水印宽度 + watermark_height: 80, //水印长度 + watermark_angle: 20 //水印倾斜度数 + } + //根据函数的入参调整设置 + if (settings && typeof settings === 'object') { + let src = settings || {} + for (const key in src) { + if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) { + continue + } else if (src[key]) defaultSettings[key] = src[key] + } + } + //创建虚拟节点对象,在该节点对象中可以放元素,最后只需在页面中添加该节点对象即可。可提高性能 + let oTemp = document.createElement('p') + //获取页面最大宽度 + let page_width = watermarkDom.clientWidth + let cutWidth = page_width * 0.0150 + page_width = page_width - cutWidth + //获取页面最大高度 + let page_height = watermarkDom.clientHeight - 56 + page_height = page_height < 400 ? 400 : page_height + // page_height = Math.max(page_height, window.innerHeight - 30) + //如果将水印列数设置为0,或水印列数设置过大,超过页面最大宽度,则重新计算水印列数和水印x轴间隔 + if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) { + defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space)) + defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1)) + } + //如果将水印行数设置为0,或水印行数设置过大,超过页面最大长度,则重新计算水印行数和水印y轴间隔 + if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) { + defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space)) + defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1)) + } + defaultSettings.watermark_rows = defaultSettings.watermark_rows < 2 ? 2 : defaultSettings.watermark_rows + defaultSettings.watermark_cols = defaultSettings.watermark_cols < 2 ? 2 : defaultSettings.watermark_cols + let x + let y + for (let i = 0; i < defaultSettings.watermark_rows; i++) { + y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i + for (let j = 0; j < defaultSettings.watermark_cols; j++) { + x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j + let mask_div = document.createElement('div') + mask_div.id = 'mask_div' + i + j + mask_div.className = 'mask_div' + mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt)) + //设置水印div倾斜显示 + mask_div.style.webkitTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)' + mask_div.style.MozTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)' + mask_div.style.msTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)' + mask_div.style.OTransform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)' + mask_div.style.transform = 'rotate(-' + defaultSettings.watermark_angle + 'deg)' + mask_div.style.visibility = '' + mask_div.style.position = 'absolute' + mask_div.style.left = x + 'px' + mask_div.style.top = y + 'px' + mask_div.style.overflow = 'hidden' + mask_div.style.zIndex = '9999' + //让水印不遮挡页面的点击事件 + mask_div.style.pointerEvents = 'none' + mask_div.style.opacity = defaultSettings.watermark_alpha + mask_div.style.fontSize = defaultSettings.watermark_fontsize + mask_div.style.fontFamily = defaultSettings.watermark_font + mask_div.style.color = defaultSettings.watermark_color + mask_div.style.textAlign = 'center' + mask_div.style.width = defaultSettings.watermark_width + 'px' + mask_div.style.height = defaultSettings.watermark_height + 'px' + mask_div.style.display = 'block' + oTemp.appendChild(mask_div) + } + } + oTemp.setAttribute('id', 'de-watermark-server') + watermarkDom.appendChild(oTemp) + +} + +export function getNow() { + let d = new Date() + let year = d.getFullYear() + let month = change(d.getMonth() + 1) + let day = change(d.getDate()) + let hour = change(d.getHours()) + let minute = change(d.getMinutes()) + let second = change(d.getSeconds()) + + function change(t) { + if (t < 10) { + return '0' + t + } else { + return t + } + } + + let time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + return time +} + +export function activeWatermark(watermarkForm, userLoginInfo, domId, canvasId, watermarkOpen) { + //清理历史水印 + const historyWatermarkDom = document.getElementById('de-watermark-server') + if (historyWatermarkDom) { + historyWatermarkDom.remove() + } + if (!(canvasId === 'canvas-main' && ((watermarkForm.enable && !watermarkForm.enablePanelCustom) + || (watermarkForm.enable && watermarkOpen)))) { + return + } + let watermark_txt + let watermark_width = 120 + if (watermarkForm.type === 'custom') { + watermark_txt = watermarkForm.content + watermark_txt = watermark_txt.replaceAll('${ip}', userLoginInfo.ip) + watermark_txt = watermark_txt.replaceAll('${userName}', userLoginInfo.userInfo.userName) + watermark_txt = watermark_txt.replaceAll('${nickName}', userLoginInfo.userInfo.nickName) + watermark_txt = watermark_txt.replaceAll('${time}', getNow()) + watermark_width = watermark_txt.length * watermarkForm.watermark_fontsize * 0.75 + watermark_width = watermark_width > 350 ? 350 : watermark_width + } else if (watermarkForm.type === 'nickName') { + watermark_txt = userLoginInfo.userInfo.nickName + } else if (watermarkForm.type === 'ip') { + watermark_txt = userLoginInfo.ip + watermark_width = 150 + } else if (watermarkForm.type === 'time') { + watermark_txt = getNow() + watermark_width = 200 + } else { + watermark_txt = userLoginInfo.userInfo.userName + } + const settings = { + watermark_txt: watermark_txt, + watermark_width: watermark_width, + watermark_color: watermarkForm.watermark_color, + watermark_x_space: watermarkForm.watermark_x_space, + watermark_y_space: watermarkForm.watermark_y_space, + watermark_fontsize: watermarkForm.watermark_fontsize + 'px' + } + watermark(settings, domId) +} + +export default { watermark, getNow, activeWatermark } diff --git a/frontend/src/components/deViewSelect/index.vue b/frontend/src/components/deViewSelect/index.vue index 2e0c15d0b2..3fd16e1cb9 100644 --- a/frontend/src/components/deViewSelect/index.vue +++ b/frontend/src/components/deViewSelect/index.vue @@ -148,7 +148,9 @@ export default { createBy: response.data.createBy, createTime: response.data.createTime, updateBy: response.data.updateBy, - updateTime: response.data.updateTime + updateTime: response.data.updateTime, + watermarkOpen: response.data.watermarkOpen, + watermarkInfo: response.data.watermarkInfo } this.$store.dispatch('panel/setPanelInfo', this.panelInfo) panelDataPrepare(JSON.parse(response.data.panelData), JSON.parse(response.data.panelStyle), rsp => { diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index 6d57de7bac..e5e7effdc3 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1451,7 +1451,7 @@ export default { field_rename: 'Rename Field', params_work: 'Effective only when editing SQL', sql_variable_limit_1: '1、SQL variables can only be used in where conditions', - sql_variable_limit_2: "2、Example:select * from table_name where column_name1='${param_name1}' and column_name2 in '${param_name2}'", + sql_variable_limit_2: '2、Example:select * from table_name where column_name1=\'${param_name1}\' and column_name2 in \'${param_name2}\'', select_year: 'Select Year', select_month: 'Select Month', select_date: 'Select Date', @@ -1865,10 +1865,11 @@ export default { sure_bt: 'Confirm' }, panel: { + watermark: 'Watermark', panel_get_data_error: 'Failed to obtain panel information. The panel may have been deleted. Please check the panel status', panel_no_save_tips: 'There are unsaved panel', panel_cache_use_tips: 'It was checked that the last dashboard could not be saved normally. Do you want to use the panel that was not saved last time?', - template_name_tips: "Panel\'s name should not be null", + template_name_tips: 'Panel\'s name should not be null', panel_background_item: 'Customize panel background', panel_background_image_tips: 'Currently.Jpeg,.Jpg,.Png,.Gif files are supported, and the size should not exceed 15m', reUpload: 'reUpload', @@ -1934,15 +1935,15 @@ export default { repeat_params: 'Repeat Params Exist', enable_outer_param_set: 'Enable Outer Param Set', select_param: 'Please Select Param...', - add_param_link_field: "Add Params' Linked Field", + add_param_link_field: 'Add Params\' Linked Field', add_param: 'Add Param', enable_param: 'Enable Param', param_name: 'Param Name', outer_param_set: 'Outer Param Set', outer_param_decode_error: 'External Parameter Parsing Error And Does Not Take Effect, Please Check', - input_param_name: "Please Input Param's Name", + input_param_name: 'Please Input Param\'s Name', params_setting: 'Outer Params Setting', - template_view_tips: "Template's Views. Please Change", + template_view_tips: 'Template\'s Views. Please Change', edit_web_tips: 'The Inner Event Can Be Used When Then Panel Not In Edit Status', no_auth_role: 'Unshared roles', auth_role: 'Shared roles', @@ -2098,8 +2099,8 @@ export default { content_style: 'Content Style', canvas_self_adaption: 'Canvas Self Adaption', panel_save_tips: 'Do you want to save the changes you made to.', - panel_save_warn_tips: "Your changes will be lost if you don't save them!", - do_not_save: "Don't Save", + panel_save_warn_tips: 'Your changes will be lost if you don\'t save them!', + do_not_save: 'Don\'t Save', save_and_close: 'Save', drill: 'drill', linkage: 'linkage', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 3e58d01853..9cded7a035 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1451,7 +1451,7 @@ export default { field_rename: '字段重命名', params_work: '僅在編輯 sql 時生效', sql_variable_limit_1: '1、SQL變數只能在WHERE條件中使用', - sql_variable_limit_2: "2、示例:select * from table_name where column_name1='${param_name1}' and column_name2 in '${param_name2}'", + sql_variable_limit_2: '2、示例:select * from table_name where column_name1=\'${param_name1}\' and column_name2 in \'${param_name2}\'', selesql_variable_limit_2ct_year: '選擇年', select_month: '選擇月', select_date: '選擇日期', @@ -1865,6 +1865,7 @@ export default { sure_bt: '確定' }, panel: { + watermark: '水印', panel_get_data_error: '獲取儀表板信息失敗,儀表板可能已經被刪除,請檢查儀表板狀態', panel_no_save_tips: '存在未保存的儀表板', panel_cache_use_tips: '檢查到上次有儀表板未能正常保存,是否使用上次未保存的儀表板?', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 70ae0dac33..09686cb9b5 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1451,7 +1451,7 @@ export default { params_work: '仅在编辑sql时生效', select_year: '选择年', sql_variable_limit_1: '1、SQL 变量只能在 WHERE 条件中使用', - sql_variable_limit_2: "2、示例:select * from table_name where column_name1='${param_name1}' and column_name2 in '${param_name2}'", + sql_variable_limit_2: '2、示例:select * from table_name where column_name1=\'${param_name1}\' and column_name2 in \'${param_name2}\'', select_month: '选择月', select_date: '选择日期', select_time: '选择时间', @@ -1865,6 +1865,7 @@ export default { sure_bt: '确定' }, panel: { + watermark: '水印', panel_get_data_error: '获取仪表板信息失败,仪表板可能已经被删除,请检查仪表板状态', panel_no_save_tips: '存在未保存的仪表板', panel_cache_use_tips: '检查到上次有仪表板未能正常保存,是否使用上次未保存的仪表板?', diff --git a/frontend/src/styles/deicon/demo.css b/frontend/src/styles/deicon/demo.css new file mode 100644 index 0000000000..a67054a0a0 --- /dev/null +++ b/frontend/src/styles/deicon/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/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html new file mode 100644 index 0000000000..1d6af76fd2 --- /dev/null +++ b/frontend/src/styles/deicon/demo_index.html @@ -0,0 +1,2971 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+ +
+
+
    + +
  • + +
    WATERMARK
    +
    &#xea16;
    +
  • + +
  • + +
    图层
    +
    &#xe63b;
    +
  • + +
  • + +
    application
    +
    &#xe89e;
    +
  • + +
  • + +
    data-source-24
    +
    &#xe6ef;
    +
  • + +
  • + +
    重置
    +
    &#xe63c;
    +
  • + +
  • + +
    None_Select
    +
    &#xe638;
    +
  • + +
  • + +
    button_right
    +
    &#xe635;
    +
  • + +
  • + +
    icon-maybe
    +
    &#xe631;
    +
  • + +
  • + +
    icon_up-left_outlined
    +
    &#xe632;
    +
  • + +
  • + +
    close
    +
    &#xe633;
    +
  • + +
  • + +
    Frame 3425
    +
    &#xe634;
    +
  • + +
  • + +
    icon-filter
    +
    &#xe636;
    +
  • + +
  • + +
    icon_Batch_outlined
    +
    &#xe630;
    +
  • + +
  • + +
    icon_clear_outlined
    +
    &#xe61d;
    +
  • + +
  • + +
    icon_dialpad_outlined
    +
    &#xe61e;
    +
  • + +
  • + +
    icon_effects_outlined
    +
    &#xe620;
    +
  • + +
  • + +
    icon_magnify_outlined
    +
    &#xe621;
    +
  • + +
  • + +
    icon_moments-categories_outlined
    +
    &#xe623;
    +
  • + +
  • + +
    icon_pc_outlined
    +
    &#xe626;
    +
  • + +
  • + +
    icon_phone_outlined
    +
    &#xe627;
    +
  • + +
  • + +
    icon_redo_outlined
    +
    &#xe629;
    +
  • + +
  • + +
    icon_undo_outlined
    +
    &#xe62b;
    +
  • + +
  • + +
    icon-more
    +
    &#xe62e;
    +
  • + +
  • + +
    icon-quicksetting
    +
    &#xe62f;
    +
  • + +
  • + +
    square-selected
    +
    &#xe73e;
    +
  • + +
  • + +
    italic
    +
    &#xe777;
    +
  • + +
  • + +
    箭头
    +
    &#xe622;
    +
  • + +
  • + +
    magic-line
    +
    &#xe63a;
    +
  • + +
  • + +
    更多
    +
    &#xe60c;
    +
  • + +
  • + +
    清空
    +
    &#xe61c;
    +
  • + +
  • + +
    查看
    +
    &#xe610;
    +
  • + +
  • + +
    outline-redo
    +
    &#xe68c;
    +
  • + +
  • + +
    outline-undo
    +
    &#xe68d;
    +
  • + +
  • + +
    定位
    +
    &#xe60a;
    +
  • + +
  • + +
    富文本框
    +
    &#xe670;
    +
  • + +
  • + +
    下架
    +
    &#xe6e5;
    +
  • + +
  • + +
    上架
    +
    &#xe6e6;
    +
  • + +
  • + +
    发布
    +
    &#xe71f;
    +
  • + +
  • + +
    批量操作
    +
    &#xe61b;
    +
  • + +
  • + +
    图片
    +
    &#xe666;
    +
  • + +
  • + +
    超链接
    +
    &#xe6e4;
    +
  • + +
  • + +
    跳转
    +
    &#xe618;
    +
  • + +
  • + +
    跳转
    +
    &#xe616;
    +
  • + +
  • + +
    网格\表格
    +
    &#xe60b;
    +
  • + +
  • + +
    关闭网格
    +
    &#xe609;
    +
  • + +
  • + +
    流媒体,媒体列表
    +
    &#xe607;
    +
  • + +
  • + +
    iframe
    +
    &#xe6de;
    +
  • + +
  • + +
    参数
    +
    &#xe6d7;
    +
  • + +
  • + +
    更换
    +
    &#xe606;
    +
  • + +
  • + +
    发送邮件
    +
    &#xe605;
    +
  • + +
  • + +
    github
    +
    &#xe6f8;
    +
  • + +
  • + +
    电话
    +
    &#xe681;
    +
  • + +
  • + +
    关闭
    +
    &#xe60d;
    +
  • + +
  • + +
    矩形
    +
    &#xe67e;
    +
  • + +
  • + +
    移动端
    +
    &#xe653;
    +
  • + +
  • + +
    video
    +
    &#xe625;
    +
  • + +
  • + +
    悬浮按钮发动态
    +
    &#xe6e8;
    +
  • + +
  • + +
    吸附选择
    +
    &#xe697;
    +
  • + +
  • + +
    margin
    +
    &#xe902;
    +
  • + +
  • + +
    padding
    +
    &#xe91b;
    +
  • + +
  • + +
    时间
    +
    &#xe665;
    +
  • + +
  • + +
    时间格式转换
    +
    &#xe6fb;
    +
  • + +
  • + +
    超链接
    +
    &#xe9b2;
    +
  • + +
  • + +
    科学技术
    +
    &#xe60f;
    +
  • + +
  • + +
    符号-数据矩阵
    +
    &#xe69c;
    +
  • + +
  • + +
    视图矩阵_o
    +
    &#xeb85;
    +
  • + +
  • + +
    悬浮
    +
    &#xe62c;
    +
  • + +
  • + +
    右悬浮-选中
    +
    &#xe6db;
    +
  • + +
  • + +
    悬浮
    +
    &#xe6f6;
    +
  • + +
  • + +
    悬浮按钮
    +
    &#xe8e6;
    +
  • + +
  • + +
    右悬浮-选中
    +
    &#xeb86;
    +
  • + +
  • + +
    44.tabs
    +
    &#xe62a;
    +
  • + +
  • + +
    洗浴
    +
    &#xe619;
    +
  • + +
  • + +
    线性图标-取消下钻
    +
    &#xe973;
    +
  • + +
  • + +
    线性图标-取消下钻
    +
    &#xe6ed;
    +
  • + +
  • + +
    联动
    +
    &#xe6f7;
    +
  • + +
  • + +
    下钻
    +
    &#xe613;
    +
  • + +
  • + +
    上钻
    +
    &#xe61f;
    +
  • + +
  • + +
    取消联动
    +
    &#xe637;
    +
  • + +
  • + +
    edit-2
    +
    &#xe604;
    +
  • + +
  • + +
    edit-2
    +
    &#xe612;
    +
  • + +
  • + +
    详情
    +
    &#xe706;
    +
  • + +
  • + +
    弧形框
    +
    &#xe603;
    +
  • + +
  • + +
    弧形框
    +
    &#xe602;
    +
  • + +
  • + +
    透明
    +
    &#xe642;
    +
  • + +
  • + +
    弧度
    +
    &#xe61a;
    +
  • + +
  • + +
    放大
    +
    &#xe62d;
    +
  • + +
  • + +
    设 置
    +
    &#xe696;
    +
  • + +
  • + +
    屏幕_全屏
    +
    &#xe655;
    +
  • + +
  • + +
    font-weight-bold
    +
    &#xe659;
    +
  • + +
  • + +
    letter_spacing
    +
    &#xe601;
    +
  • + +
  • + +
    letter-spacing
    +
    &#xe679;
    +
  • + +
  • + +
    字体颜色
    +
    &#xe60e;
    +
  • + +
  • + +
    format_letter_spacing_2
    +
    &#xe6c3;
    +
  • + +
  • + +
    font_size
    +
    &#xe710;
    +
  • + +
  • + +
    居中
    +
    &#xe972;
    +
  • + +
  • + +
    居右
    +
    &#xe608;
    +
  • + +
  • + +
    居左
    +
    &#xe688;
    +
  • + +
  • + +
    实线
    +
    &#xe64a;
    +
  • + +
  • + +
    画笔
    +
    &#xe640;
    +
  • + +
  • + +
    点线
    +
    &#xe614;
    +
  • + +
  • + +
    虚线
    +
    &#xe617;
    +
  • + +
  • + +
    背景色‘
    +
    &#xe600;
    +
  • + +
  • + +
    矩形
    +
    &#xe648;
    +
  • + +
  • + +
    text
    +
    &#xe959;
    +
  • + +
  • + +
    picture
    +
    &#xe643;
    +
  • + +
  • + +
    输入
    +
    &#xe6ab;
    +
  • + +
  • + +
    +
    &#xe628;
    +
  • + +
  • + +
    查询搜索
    +
    &#xe615;
    +
  • + +
  • + +
    季度
    +
    &#xe624;
    +
  • + +
  • + +
    数字顺序
    +
    &#xe7de;
    +
  • + +
  • + +
    树列表
    +
    &#xe6a6;
    +
  • + +
  • + +
    日期
    +
    &#xe639;
    +
  • + +
  • + +
    左侧-区间
    +
    &#xe6dd;
    +
  • + +
  • + +
    列表
    +
    &#xe66f;
    +
  • + +
  • + +
    下拉框
    +
    &#xe8ca;
    +
  • + +
  • + +
    下拉树
    +
    &#xe8d0;
    +
  • + +
  • + +
    重置
    +
    &#xe611;
    +
  • + +
  • + +
    +
    &#xe691;
    +
  • + +
  • + +
    +
    &#xe692;
    +
  • + +
  • + +
    +
    &#xe695;
    +
  • + +
+
+

Unicode 引用

+
+ +

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

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

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

+
+

Unicode 使用步骤如下:

+

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

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1668397590143') format('woff2'),
+       url('iconfont.woff?t=1668397590143') format('woff'),
+       url('iconfont.ttf?t=1668397590143') 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"。

+
+
+
+
+
    + +
  • + +
    + WATERMARK +
    +
    .icon-WATERMARK +
    +
  • + +
  • + +
    + 图层 +
    +
    .icon-layer +
    +
  • + +
  • + +
    + application +
    +
    .icon-application +
    +
  • + +
  • + +
    + data-source-24 +
    +
    .icon-datasource-select +
    +
  • + +
  • + +
    + 重置 +
    +
    .icon-zhongzhi2 +
    +
  • + +
  • + +
    + None_Select +
    +
    .icon-None_Select +
    +
  • + +
  • + +
    + button_right +
    +
    .icon-button_right +
    +
  • + +
  • + +
    + icon-maybe +
    +
    .icon-icon-maybe +
    +
  • + +
  • + +
    + icon_up-left_outlined +
    +
    .icon-icon_up-left_outlined +
    +
  • + +
  • + +
    + close +
    +
    .icon-close +
    +
  • + +
  • + +
    + Frame 3425 +
    +
    .icon-a-Frame3425 +
    +
  • + +
  • + +
    + icon-filter +
    +
    .icon-icon-filter +
    +
  • + +
  • + +
    + icon_Batch_outlined +
    +
    .icon-icon_Batch_outlined +
    +
  • + +
  • + +
    + icon_clear_outlined +
    +
    .icon-icon_clear_outlined +
    +
  • + +
  • + +
    + icon_dialpad_outlined +
    +
    .icon-icon_dialpad_outlined +
    +
  • + +
  • + +
    + icon_effects_outlined +
    +
    .icon-icon_effects_outlined +
    +
  • + +
  • + +
    + icon_magnify_outlined +
    +
    .icon-icon_magnify_outlined +
    +
  • + +
  • + +
    + icon_moments-categories_outlined +
    +
    .icon-icon_moments-categories_outlined +
    +
  • + +
  • + +
    + icon_pc_outlined +
    +
    .icon-icon_pc_outlined +
    +
  • + +
  • + +
    + icon_phone_outlined +
    +
    .icon-icon_phone_outlined +
    +
  • + +
  • + +
    + icon_redo_outlined +
    +
    .icon-icon_redo_outlined +
    +
  • + +
  • + +
    + icon_undo_outlined +
    +
    .icon-icon_undo_outlined +
    +
  • + +
  • + +
    + icon-more +
    +
    .icon-icon-more +
    +
  • + +
  • + +
    + icon-quicksetting +
    +
    .icon-icon-quicksetting +
    +
  • + +
  • + +
    + square-selected +
    +
    .icon-square-selected +
    +
  • + +
  • + +
    + italic +
    +
    .icon-italic +
    +
  • + +
  • + +
    + 箭头 +
    +
    .icon-jiantou +
    +
  • + +
  • + +
    + magic-line +
    +
    .icon-magic-line +
    +
  • + +
  • + +
    + 更多 +
    +
    .icon-gengduo +
    +
  • + +
  • + +
    + 清空 +
    +
    .icon-qingkong +
    +
  • + +
  • + +
    + 查看 +
    +
    .icon-chakan +
    +
  • + +
  • + +
    + outline-redo +
    +
    .icon-outline-redo +
    +
  • + +
  • + +
    + outline-undo +
    +
    .icon-outline-undo +
    +
  • + +
  • + +
    + 定位 +
    +
    .icon-dingwei +
    +
  • + +
  • + +
    + 富文本框 +
    +
    .icon-fuwenbenkuang +
    +
  • + +
  • + +
    + 下架 +
    +
    .icon-unpublish +
    +
  • + +
  • + +
    + 上架 +
    +
    .icon-publish +
    +
  • + +
  • + +
    + 发布 +
    +
    .icon-fabu +
    +
  • + +
  • + +
    + 批量操作 +
    +
    .icon-piliang-copy +
    +
  • + +
  • + +
    + 图片 +
    +
    .icon-tupian +
    +
  • + +
  • + +
    + 超链接 +
    +
    .icon-chaolianjie1 +
    +
  • + +
  • + +
    + 跳转 +
    +
    .icon-com-jump +
    +
  • + +
  • + +
    + 跳转 +
    +
    .icon-component-tiaozhuan +
    +
  • + +
  • + +
    + 网格\表格 +
    +
    .icon-wangge-open +
    +
  • + +
  • + +
    + 关闭网格 +
    +
    .icon-wangge-close +
    +
  • + +
  • + +
    + 流媒体,媒体列表 +
    +
    .icon-a-liumeitimeitiliebiao +
    +
  • + +
  • + +
    + iframe +
    +
    .icon-iframe +
    +
  • + +
  • + +
    + 参数 +
    +
    .icon-canshu +
    +
  • + +
  • + +
    + 更换 +
    +
    .icon-genghuan +
    +
  • + +
  • + +
    + 发送邮件 +
    +
    .icon-fasongyoujian +
    +
  • + +
  • + +
    + github +
    +
    .icon-github +
    +
  • + +
  • + +
    + 电话 +
    +
    .icon-dianhua +
    +
  • + +
  • + +
    + 关闭 +
    +
    .icon-guanbi +
    +
  • + +
  • + +
    + 矩形 +
    +
    .icon-juxing1 +
    +
  • + +
  • + +
    + 移动端 +
    +
    .icon-yidongduan +
    +
  • + +
  • + +
    + video +
    +
    .icon-video +
    +
  • + +
  • + +
    + 悬浮按钮发动态 +
    +
    .icon-xuanfuanniufadongtai +
    +
  • + +
  • + +
    + 吸附选择 +
    +
    .icon-xifuxuanze +
    +
  • + +
  • + +
    + margin +
    +
    .icon-margin +
    +
  • + +
  • + +
    + padding +
    +
    .icon-padding +
    +
  • + +
  • + +
    + 时间 +
    +
    .icon-shijian +
    +
  • + +
  • + +
    + 时间格式转换 +
    +
    .icon-shijiangeshizhuanhuan +
    +
  • + +
  • + +
    + 超链接 +
    +
    .icon-chaolianjie +
    +
  • + +
  • + +
    + 科学技术 +
    +
    .icon-kexuejishu +
    +
  • + +
  • + +
    + 符号-数据矩阵 +
    +
    .icon-shujujuzhen +
    +
  • + +
  • + +
    + 视图矩阵_o +
    +
    .icon-shitujuzhen_o +
    +
  • + +
  • + +
    + 悬浮 +
    +
    .icon-xuanfu1 +
    +
  • + +
  • + +
    + 右悬浮-选中 +
    +
    .icon-youxuanfu-copy +
    +
  • + +
  • + +
    + 悬浮 +
    +
    .icon-xuanfu +
    +
  • + +
  • + +
    + 悬浮按钮 +
    +
    .icon-xuanfuanniu +
    +
  • + +
  • + +
    + 右悬浮-选中 +
    +
    .icon-youxuanfu-copy-copy +
    +
  • + +
  • + +
    + 44.tabs +
    +
    .icon-tabs +
    +
  • + +
  • + +
    + 洗浴 +
    +
    .icon-xiyu +
    +
  • + +
  • + +
    + 线性图标-取消下钻 +
    +
    .icon-quxiaoshangzuan +
    +
  • + +
  • + +
    + 线性图标-取消下钻 +
    +
    .icon-quxiaoxiazuan +
    +
  • + +
  • + +
    + 联动 +
    +
    .icon-linkage +
    +
  • + +
  • + +
    + 下钻 +
    +
    .icon-xiazuan +
    +
  • + +
  • + +
    + 上钻 +
    +
    .icon-shangzuan +
    +
  • + +
  • + +
    + 取消联动 +
    +
    .icon-quxiaoliandong +
    +
  • + +
  • + +
    + edit-2 +
    +
    .icon-edit-outline +
    +
  • + +
  • + +
    + edit-2 +
    +
    .icon-edit +
    +
  • + +
  • + +
    + 详情 +
    +
    .icon-xiangqing1 +
    +
  • + +
  • + +
    + 弧形框 +
    +
    .icon-weibiaoti-1 +
    +
  • + +
  • + +
    + 弧形框 +
    +
    .icon-weibiaoti- +
    +
  • + +
  • + +
    + 透明 +
    +
    .icon-touming +
    +
  • + +
  • + +
    + 弧度 +
    +
    .icon-fangxing- +
    +
  • + +
  • + +
    + 放大 +
    +
    .icon-fangda +
    +
  • + +
  • + +
    + 设 置 +
    +
    .icon-shezhi +
    +
  • + +
  • + +
    + 屏幕_全屏 +
    +
    .icon-quanping1 +
    +
  • + +
  • + +
    + font-weight-bold +
    +
    .icon-font-weight-bold +
    +
  • + +
  • + +
    + letter_spacing +
    +
    .icon-letter_spacing +
    +
  • + +
  • + +
    + letter-spacing +
    +
    .icon-letter-spacing +
    +
  • + +
  • + +
    + 字体颜色 +
    +
    .icon-zimua +
    +
  • + +
  • + +
    + format_letter_spacing_2 +
    +
    .icon-format_letter_spacing_ +
    +
  • + +
  • + +
    + font_size +
    +
    .icon-font_size +
    +
  • + +
  • + +
    + 居中 +
    +
    .icon-align-center +
    +
  • + +
  • + +
    + 居右 +
    +
    .icon-juyou +
    +
  • + +
  • + +
    + 居左 +
    +
    .icon-juzuo +
    +
  • + +
  • + +
    + 实线 +
    +
    .icon-solid_line +
    +
  • + +
  • + +
    + 画笔 +
    +
    .icon-huabi +
    +
  • + +
  • + +
    + 点线 +
    +
    .icon-dianxian +
    +
  • + +
  • + +
    + 虚线 +
    +
    .icon-xuxian +
    +
  • + +
  • + +
    + 背景色‘ +
    +
    .icon-beijingse1 +
    +
  • + +
  • + +
    + 矩形 +
    +
    .icon-juxing +
    +
  • + +
  • + +
    + text +
    +
    .icon-text +
    +
  • + +
  • + +
    + picture +
    +
    .icon-picture +
    +
  • + +
  • + +
    + 输入 +
    +
    .icon-shuru +
    +
  • + +
  • + +
    + 树 +
    +
    .icon-tree +
    +
  • + +
  • + +
    + 查询搜索 +
    +
    .icon-chaxunsousuo +
    +
  • + +
  • + +
    + 季度 +
    +
    .icon-jidu +
    +
  • + +
  • + +
    + 数字顺序 +
    +
    .icon-shuzishunxu +
    +
  • + +
  • + +
    + 树列表 +
    +
    .icon-Group- +
    +
  • + +
  • + +
    + 日期 +
    +
    .icon-riqi +
    +
  • + +
  • + +
    + 左侧-区间 +
    +
    .icon-zuoce-qujian +
    +
  • + +
  • + +
    + 列表 +
    +
    .icon-liebiao +
    +
  • + +
  • + +
    + 下拉框 +
    +
    .icon-xialakuang +
    +
  • + +
  • + +
    + 下拉树 +
    +
    .icon-xialashu +
    +
  • + +
  • + +
    + 重置 +
    +
    .icon-zhongzhi +
    +
  • + +
  • + +
    + 日 +
    +
    .icon-ri +
    +
  • + +
  • + +
    + 年 +
    +
    .icon-nian +
    +
  • + +
  • + +
    + 月 +
    +
    .icon-yue +
    +
  • + +
+
+

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"。

+
+
+
+
+
    + +
  • + +
    WATERMARK
    +
    #icon-WATERMARK
    +
  • + +
  • + +
    图层
    +
    #icon-layer
    +
  • + +
  • + +
    application
    +
    #icon-application
    +
  • + +
  • + +
    data-source-24
    +
    #icon-datasource-select
    +
  • + +
  • + +
    重置
    +
    #icon-zhongzhi2
    +
  • + +
  • + +
    None_Select
    +
    #icon-None_Select
    +
  • + +
  • + +
    button_right
    +
    #icon-button_right
    +
  • + +
  • + +
    icon-maybe
    +
    #icon-icon-maybe
    +
  • + +
  • + +
    icon_up-left_outlined
    +
    #icon-icon_up-left_outlined
    +
  • + +
  • + +
    close
    +
    #icon-close
    +
  • + +
  • + +
    Frame 3425
    +
    #icon-a-Frame3425
    +
  • + +
  • + +
    icon-filter
    +
    #icon-icon-filter
    +
  • + +
  • + +
    icon_Batch_outlined
    +
    #icon-icon_Batch_outlined
    +
  • + +
  • + +
    icon_clear_outlined
    +
    #icon-icon_clear_outlined
    +
  • + +
  • + +
    icon_dialpad_outlined
    +
    #icon-icon_dialpad_outlined
    +
  • + +
  • + +
    icon_effects_outlined
    +
    #icon-icon_effects_outlined
    +
  • + +
  • + +
    icon_magnify_outlined
    +
    #icon-icon_magnify_outlined
    +
  • + +
  • + +
    icon_moments-categories_outlined
    +
    #icon-icon_moments-categories_outlined
    +
  • + +
  • + +
    icon_pc_outlined
    +
    #icon-icon_pc_outlined
    +
  • + +
  • + +
    icon_phone_outlined
    +
    #icon-icon_phone_outlined
    +
  • + +
  • + +
    icon_redo_outlined
    +
    #icon-icon_redo_outlined
    +
  • + +
  • + +
    icon_undo_outlined
    +
    #icon-icon_undo_outlined
    +
  • + +
  • + +
    icon-more
    +
    #icon-icon-more
    +
  • + +
  • + +
    icon-quicksetting
    +
    #icon-icon-quicksetting
    +
  • + +
  • + +
    square-selected
    +
    #icon-square-selected
    +
  • + +
  • + +
    italic
    +
    #icon-italic
    +
  • + +
  • + +
    箭头
    +
    #icon-jiantou
    +
  • + +
  • + +
    magic-line
    +
    #icon-magic-line
    +
  • + +
  • + +
    更多
    +
    #icon-gengduo
    +
  • + +
  • + +
    清空
    +
    #icon-qingkong
    +
  • + +
  • + +
    查看
    +
    #icon-chakan
    +
  • + +
  • + +
    outline-redo
    +
    #icon-outline-redo
    +
  • + +
  • + +
    outline-undo
    +
    #icon-outline-undo
    +
  • + +
  • + +
    定位
    +
    #icon-dingwei
    +
  • + +
  • + +
    富文本框
    +
    #icon-fuwenbenkuang
    +
  • + +
  • + +
    下架
    +
    #icon-unpublish
    +
  • + +
  • + +
    上架
    +
    #icon-publish
    +
  • + +
  • + +
    发布
    +
    #icon-fabu
    +
  • + +
  • + +
    批量操作
    +
    #icon-piliang-copy
    +
  • + +
  • + +
    图片
    +
    #icon-tupian
    +
  • + +
  • + +
    超链接
    +
    #icon-chaolianjie1
    +
  • + +
  • + +
    跳转
    +
    #icon-com-jump
    +
  • + +
  • + +
    跳转
    +
    #icon-component-tiaozhuan
    +
  • + +
  • + +
    网格\表格
    +
    #icon-wangge-open
    +
  • + +
  • + +
    关闭网格
    +
    #icon-wangge-close
    +
  • + +
  • + +
    流媒体,媒体列表
    +
    #icon-a-liumeitimeitiliebiao
    +
  • + +
  • + +
    iframe
    +
    #icon-iframe
    +
  • + +
  • + +
    参数
    +
    #icon-canshu
    +
  • + +
  • + +
    更换
    +
    #icon-genghuan
    +
  • + +
  • + +
    发送邮件
    +
    #icon-fasongyoujian
    +
  • + +
  • + +
    github
    +
    #icon-github
    +
  • + +
  • + +
    电话
    +
    #icon-dianhua
    +
  • + +
  • + +
    关闭
    +
    #icon-guanbi
    +
  • + +
  • + +
    矩形
    +
    #icon-juxing1
    +
  • + +
  • + +
    移动端
    +
    #icon-yidongduan
    +
  • + +
  • + +
    video
    +
    #icon-video
    +
  • + +
  • + +
    悬浮按钮发动态
    +
    #icon-xuanfuanniufadongtai
    +
  • + +
  • + +
    吸附选择
    +
    #icon-xifuxuanze
    +
  • + +
  • + +
    margin
    +
    #icon-margin
    +
  • + +
  • + +
    padding
    +
    #icon-padding
    +
  • + +
  • + +
    时间
    +
    #icon-shijian
    +
  • + +
  • + +
    时间格式转换
    +
    #icon-shijiangeshizhuanhuan
    +
  • + +
  • + +
    超链接
    +
    #icon-chaolianjie
    +
  • + +
  • + +
    科学技术
    +
    #icon-kexuejishu
    +
  • + +
  • + +
    符号-数据矩阵
    +
    #icon-shujujuzhen
    +
  • + +
  • + +
    视图矩阵_o
    +
    #icon-shitujuzhen_o
    +
  • + +
  • + +
    悬浮
    +
    #icon-xuanfu1
    +
  • + +
  • + +
    右悬浮-选中
    +
    #icon-youxuanfu-copy
    +
  • + +
  • + +
    悬浮
    +
    #icon-xuanfu
    +
  • + +
  • + +
    悬浮按钮
    +
    #icon-xuanfuanniu
    +
  • + +
  • + +
    右悬浮-选中
    +
    #icon-youxuanfu-copy-copy
    +
  • + +
  • + +
    44.tabs
    +
    #icon-tabs
    +
  • + +
  • + +
    洗浴
    +
    #icon-xiyu
    +
  • + +
  • + +
    线性图标-取消下钻
    +
    #icon-quxiaoshangzuan
    +
  • + +
  • + +
    线性图标-取消下钻
    +
    #icon-quxiaoxiazuan
    +
  • + +
  • + +
    联动
    +
    #icon-linkage
    +
  • + +
  • + +
    下钻
    +
    #icon-xiazuan
    +
  • + +
  • + +
    上钻
    +
    #icon-shangzuan
    +
  • + +
  • + +
    取消联动
    +
    #icon-quxiaoliandong
    +
  • + +
  • + +
    edit-2
    +
    #icon-edit-outline
    +
  • + +
  • + +
    edit-2
    +
    #icon-edit
    +
  • + +
  • + +
    详情
    +
    #icon-xiangqing1
    +
  • + +
  • + +
    弧形框
    +
    #icon-weibiaoti-1
    +
  • + +
  • + +
    弧形框
    +
    #icon-weibiaoti-
    +
  • + +
  • + +
    透明
    +
    #icon-touming
    +
  • + +
  • + +
    弧度
    +
    #icon-fangxing-
    +
  • + +
  • + +
    放大
    +
    #icon-fangda
    +
  • + +
  • + +
    设 置
    +
    #icon-shezhi
    +
  • + +
  • + +
    屏幕_全屏
    +
    #icon-quanping1
    +
  • + +
  • + +
    font-weight-bold
    +
    #icon-font-weight-bold
    +
  • + +
  • + +
    letter_spacing
    +
    #icon-letter_spacing
    +
  • + +
  • + +
    letter-spacing
    +
    #icon-letter-spacing
    +
  • + +
  • + +
    字体颜色
    +
    #icon-zimua
    +
  • + +
  • + +
    format_letter_spacing_2
    +
    #icon-format_letter_spacing_
    +
  • + +
  • + +
    font_size
    +
    #icon-font_size
    +
  • + +
  • + +
    居中
    +
    #icon-align-center
    +
  • + +
  • + +
    居右
    +
    #icon-juyou
    +
  • + +
  • + +
    居左
    +
    #icon-juzuo
    +
  • + +
  • + +
    实线
    +
    #icon-solid_line
    +
  • + +
  • + +
    画笔
    +
    #icon-huabi
    +
  • + +
  • + +
    点线
    +
    #icon-dianxian
    +
  • + +
  • + +
    虚线
    +
    #icon-xuxian
    +
  • + +
  • + +
    背景色‘
    +
    #icon-beijingse1
    +
  • + +
  • + +
    矩形
    +
    #icon-juxing
    +
  • + +
  • + +
    text
    +
    #icon-text
    +
  • + +
  • + +
    picture
    +
    #icon-picture
    +
  • + +
  • + +
    输入
    +
    #icon-shuru
    +
  • + +
  • + +
    +
    #icon-tree
    +
  • + +
  • + +
    查询搜索
    +
    #icon-chaxunsousuo
    +
  • + +
  • + +
    季度
    +
    #icon-jidu
    +
  • + +
  • + +
    数字顺序
    +
    #icon-shuzishunxu
    +
  • + +
  • + +
    树列表
    +
    #icon-Group-
    +
  • + +
  • + +
    日期
    +
    #icon-riqi
    +
  • + +
  • + +
    左侧-区间
    +
    #icon-zuoce-qujian
    +
  • + +
  • + +
    列表
    +
    #icon-liebiao
    +
  • + +
  • + +
    下拉框
    +
    #icon-xialakuang
    +
  • + +
  • + +
    下拉树
    +
    #icon-xialashu
    +
  • + +
  • + +
    重置
    +
    #icon-zhongzhi
    +
  • + +
  • + +
    +
    #icon-ri
    +
  • + +
  • + +
    +
    #icon-nian
    +
  • + +
  • + +
    +
    #icon-yue
    +
  • + +
+
+

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/frontend/src/styles/deicon/iconfont.css b/frontend/src/styles/deicon/iconfont.css index e289ba0493..4602023a5f 100644 --- a/frontend/src/styles/deicon/iconfont.css +++ b/frontend/src/styles/deicon/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 2459092 */ - src: url('iconfont.woff2?t=1662616551987') format('woff2'), - url('iconfont.woff?t=1662616551987') format('woff'), - url('iconfont.ttf?t=1662616551987') format('truetype'); + src: url('iconfont.woff2?t=1668397590143') format('woff2'), + url('iconfont.woff?t=1668397590143') format('woff'), + url('iconfont.ttf?t=1668397590143') format('truetype'); } .iconfont { @@ -13,6 +13,14 @@ -moz-osx-font-smoothing: grayscale; } +.icon-WATERMARK:before { + content: "\ea16"; +} + +.icon-layer:before { + content: "\e63b"; +} + .icon-application:before { content: "\e89e"; } diff --git a/frontend/src/styles/deicon/iconfont.js b/frontend/src/styles/deicon/iconfont.js index 7eebb5f8f7..3e8e62d958 100644 --- a/frontend/src/styles/deicon/iconfont.js +++ b/frontend/src/styles/deicon/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_2459092 = '', (function(a) { var l = (l = document.getElementsByTagName('script'))[l.length - 1]; var c = l.getAttribute('data-injectcss'); var l = l.getAttribute('data-disable-injectsvg'); if (!l) { var h; var i; var t; var v; var o; var z = function(l, c) { c.parentNode.insertBefore(l, c) }; if (c && !a.__iconfont__svg__cssinject__) { a.__iconfont__svg__cssinject__ = !0; try { document.write('') } catch (l) { console && console.log(l) } }h = function() { var l; var c = document.createElement('div'); c.innerHTML = a._iconfont_svg_string_2459092, (c = c.getElementsByTagName('svg')[0]) && (c.setAttribute('aria-hidden', 'true'), c.style.position = 'absolute', c.style.width = 0, c.style.height = 0, c.style.overflow = 'hidden', c = c, (l = document.body).firstChild ? z(c, l.firstChild) : l.appendChild(c)) }, document.addEventListener ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState) ? setTimeout(h, 0) : (i = function() { document.removeEventListener('DOMContentLoaded', i, !1), h() }, document.addEventListener('DOMContentLoaded', i, !1)) : document.attachEvent && (t = h, v = a.document, o = !1, p(), v.onreadystatechange = function() { v.readyState == 'complete' && (v.onreadystatechange = null, m()) }) } function m() { o || (o = !0, t()) } function p() { try { v.documentElement.doScroll('left') } catch (l) { return void setTimeout(p, 50) }m() } }(window)) +window._iconfont_svg_string_2459092='',function(a){var l=(l=document.getElementsByTagName("script"))[l.length-1],c=l.getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var h,i,t,v,o,z=function(l,c){c.parentNode.insertBefore(l,c)};if(c&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(l){console&&console.log(l)}}h=function(){var l,c=document.createElement("div");c.innerHTML=a._iconfont_svg_string_2459092,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(l=document.body).firstChild?z(c,l.firstChild):l.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),h()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(t=h,v=a.document,o=!1,p(),v.onreadystatechange=function(){"complete"==v.readyState&&(v.onreadystatechange=null,m())})}function m(){o||(o=!0,t())}function p(){try{v.documentElement.doScroll("left")}catch(l){return void setTimeout(p,50)}m()}}(window); diff --git a/frontend/src/styles/deicon/iconfont.json b/frontend/src/styles/deicon/iconfont.json index f985c518b4..b3a60559df 100644 --- a/frontend/src/styles/deicon/iconfont.json +++ b/frontend/src/styles/deicon/iconfont.json @@ -5,6 +5,20 @@ "css_prefix_text": "icon-", "description": "", "glyphs": [ + { + "icon_id": "23072499", + "name": "WATERMARK", + "font_class": "WATERMARK", + "unicode": "ea16", + "unicode_decimal": 59926 + }, + { + "icon_id": "10904998", + "name": "图层", + "font_class": "layer", + "unicode": "e63b", + "unicode_decimal": 58939 + }, { "icon_id": "12253601", "name": "application", diff --git a/frontend/src/styles/deicon/iconfont.ttf b/frontend/src/styles/deicon/iconfont.ttf index 9a7012a110..250300b27e 100644 Binary files a/frontend/src/styles/deicon/iconfont.ttf and b/frontend/src/styles/deicon/iconfont.ttf differ diff --git a/frontend/src/styles/deicon/iconfont.woff b/frontend/src/styles/deicon/iconfont.woff index 0131c85c2d..6dfe2b312d 100644 Binary files a/frontend/src/styles/deicon/iconfont.woff and b/frontend/src/styles/deicon/iconfont.woff differ diff --git a/frontend/src/styles/deicon/iconfont.woff2 b/frontend/src/styles/deicon/iconfont.woff2 index e40e790d9c..2952bdbe04 100644 Binary files a/frontend/src/styles/deicon/iconfont.woff2 and b/frontend/src/styles/deicon/iconfont.woff2 differ diff --git a/frontend/src/views/link/view/index.vue b/frontend/src/views/link/view/index.vue index 4c4e66ccd6..2e2395172f 100644 --- a/frontend/src/views/link/view/index.vue +++ b/frontend/src/views/link/view/index.vue @@ -76,7 +76,9 @@ export default { createBy: res.data.createBy, createTime: res.data.createTime, updateBy: res.data.updateBy, - updateTime: res.data.updateTime + updateTime: res.data.updateTime, + watermarkOpen: res.data.watermarkOpen, + watermarkInfo: res.data.watermarkInfo } this.$store.dispatch('panel/setPanelInfo', this.panelInfo) diff --git a/frontend/src/views/panel/list/PanelList.vue b/frontend/src/views/panel/list/PanelList.vue index 5d63a8b899..6f67ea0151 100644 --- a/frontend/src/views/panel/list/PanelList.vue +++ b/frontend/src/views/panel/list/PanelList.vue @@ -161,7 +161,7 @@ /> - + - + {{ $t('panel.groupAdd') }} - +
{{ - $t('panel.cancel') - }} + $t('panel.cancel') + }} {{ - $t('dataset.cancel') - }} + $t('dataset.cancel') + }}