center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

refactor: 优化图标和仪表板镜像记录

Browse Source
This commit is contained in:
wangjiahao 2022-06-13 13:17:52 +08:00
parent 9d272ed573
commit c91c403170
13 changed files with 288 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/canvas/components/Editor/EditBar.vue
View File

@ -24,7 +24,7 @@
<i v-if="activeModel==='edit'&&!curComponent.auxiliaryMatrix" class="icon iconfont icon-xuanfuanniu" @click.stop="auxiliaryMatrixChange" />
</span>
<span :title="$t('panel.details')">
<i v-if="curComponent.type==='view'" class="icon iconfont icon-fuwenbenkuang" @click.stop="showViewDetails('details')" />
<i v-if="curComponent.type==='view'" class="icon iconfont icon-chakan" @click.stop="showViewDetails('details')" />
</span>
<span :title="$t('panel.enlarge')">
<i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails('enlarge')" />

2
frontend/src/components/canvas/components/Editor/EditBarView.vue
View File

@ -5,7 +5,7 @@
<i class="icon iconfont icon-edit" @click.stop="edit" />
</span>
<span :title="$t('panel.details')">
<i class="icon iconfont icon-fuwenbenkuang" @click.stop="showViewDetails('details')" />
<i class="icon iconfont icon-chakan" @click.stop="showViewDetails('details')" />
</span>
</div>
<div v-if="positionCheck('multiplexing')" style="margin-right: -1px;width: 18px;z-index: 5">

104
frontend/src/components/canvas/components/Toolbar.vue
View File

@ -36,10 +36,10 @@
</span>
</div>
<el-tooltip :content="$t('panel.undo') ">
<i class="el-icon-refresh-right insert" @click="undo" />
<span class="icon iconfont icon-outline-undo insert" @click="undo" />
</el-tooltip>
<el-tooltip :content="$t('panel.redo') ">
<i class="el-icon-refresh-left insert" @click="redo" />
<span class="icon iconfont icon-outline-redo insert" @click="redo" />
</el-tooltip>
<el-tooltip :content="$t('panel.fullscreen_preview')">
<span class="icon iconfont icon-fangda insert" @click="clickPreview" />
@ -49,19 +49,24 @@
<span class="button_self">
<el-dropdown trigger="click" placement="bottom-start" size="mini">
<el-button size="mini">
<i class="el-icon-arrow-down" />
<span class="icon iconfont icon-gengduo" />
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<el-dropdown placement="right-start" size="mini" style="width: 100%">
<span>
<span class="icon iconfont" :class="[canvasStyleData.auxiliaryMatrix?'icon-shujujuzhen':'icon-xuanfuanniu']" />
<span
class="icon iconfont"
:class="[canvasStyleData.auxiliaryMatrix?'icon-shujujuzhen':'icon-xuanfuanniu']"
/>
<span style="font-size: 12px">{{ $t('panel.new_element_distribution') }}</span>
<i class="el-icon-arrow-right el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="auxiliaryMatrixChange">
<span :class="[!canvasStyleData.auxiliaryMatrix?'font-active':'']"> {{ $t('panel.suspension') }} </span>
<span
:class="[!canvasStyleData.auxiliaryMatrix?'font-active':'']"
> {{ $t('panel.suspension') }} </span>
<i v-if="!canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check" />
</el-dropdown-item>
<el-dropdown-item @click.native="auxiliaryMatrixChange">
@ -72,20 +77,27 @@
</el-dropdown>
</el-dropdown-item>
<el-dropdown-item @click.native="showGridChange">
<span class="icon iconfont-tb" :class="[canvasStyleData.aidedDesign.showGrid?'icon-wangge-open':'icon-wangge-close']" />
<span
class="icon iconfont-tb"
:class="[canvasStyleData.aidedDesign.showGrid?'icon-wangge-open':'icon-wangge-close']"
/>
{{ $t('panel.aided_grid') }}:{{ canvasStyleData.aidedDesign.showGrid?$t('panel.aided_grid_open'):$t('panel.aided_grid_close') }}
</el-dropdown-item>
<el-dropdown-item @click.native="openOuterParamsSet">
<span class="icon iconfont-tb icon-canshu" />{{ $t('panel.params_setting') }}
</el-dropdown-item>
<el-dropdown-item @click.native="clearCanvas">
<i class="el-icon-document-delete" />{{ $t('panel.clean_canvas') }}
<span class="icon iconfont-tb icon-qingkong" />{{ $t('panel.clean_canvas') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
<el-button size="mini" class="el-icon-magic-stick el-icon--left" @click="showPanel">{{ $t('panel.panel_style') }}</el-button>
<el-button size="mini" @click="batchOption"> <span class="icon iconfont-tb icon-piliang-copy el-icon--left" />{{ $t('panel.batch_opt') }}</el-button>
<el-button size="mini" class="el-icon-magic-stick el-icon--left" @click="showPanel">{{ $t('panel.panel_style')
}}
</el-button>
<el-button size="mini" @click="batchOption"><span class="icon iconfont-tb icon-piliang-copy el-icon--left" />{{
$t('panel.batch_opt') }}
</el-button>
<span style="float: right;margin-left: 10px">
<el-button size="mini" type="primary" :disabled="saveButtonDisabled" @click="save(false)">
{{ $t('commons.save') }}
@ -94,7 +106,13 @@
</div>
<!--关闭弹框-->
<el-dialog :visible.sync="closePanelVisible" :title="$t('panel.panel_save_tips')" :show-close="false" width="30%" class="dialog-css">
<el-dialog
:visible.sync="closePanelVisible"
:title="$t('panel.panel_save_tips')"
:show-close="false"
width="30%"
class="dialog-css"
>
<el-row style="height: 20px">
<el-col :span="4">
<svg-icon icon-class="warn-tre" style="width: 20px;height: 20px;float: right" />
@ -321,8 +339,12 @@ export default {
}
const components = deepCopy(this.componentData)
components.forEach(view => {
if (view.DetailAreaCode) { view.DetailAreaCode = null }
if (view.filters && view.filters.length > 0) { view.filters = [] }
if (view.DetailAreaCode) {
view.DetailAreaCode = null
}
if (view.filters && view.filters.length > 0) {
view.filters = []
}
if (view.type === 'de-tabs') {
view.options.tabList && view.options.tabList.length > 0 && view.options.tabList.forEach(tab => {
if (tab.content && tab.content.filters && tab.content.filters.length > 0) {
@ -485,6 +507,7 @@ export default {
height: 35px;
line-height: 32px;
min-width: 400px;
.canvas-config {
display: inline-block;
margin-left: 10px;
@ -519,7 +542,7 @@ export default {
transition: .1s;
font-weight: 500;
padding: 5px 5px;
font-size: 16px!important;
font-size: 16px !important;
border-radius: 3px;
margin-left: 10px;
@ -537,23 +560,24 @@ export default {
}
}
.button-show{
background-color: #ebf2fe!important;
.button-show {
background-color: #ebf2fe !important;
}
.button-closed{
background-color: #ffffff!important;
.button-closed {
background-color: #ffffff !important;
}
> > > .el-switch__core {
width: 30px !important;
height: 15px;
}
>>>.el-switch__core{
width:30px!important;
height:15px;
}
/*设置圆*/
>>>.el-switch__core::after{
width:14px;
height:14px;
margin-top:-1px;
> > > .el-switch__core::after {
width: 14px;
height: 14px;
margin-top: -1px;
margin-bottom: 2px;
}
@ -565,36 +589,44 @@ export default {
-moz-osx-font-smoothing: grayscale;
}
.switch-position{
.switch-position {
position: absolute;
top: 3px;
right: 50%;
width: 100px;
}
.button_self{
.button_self {
margin-right: 5px;
}
.button_self ::v-deep .el-button--mini{
.button_self ::v-deep .el-button--mini {
padding: 7px 7px !important;
}
.font-active{
font-color: #3a8ee6!important;
.font-active {
font-color: #3a8ee6 !important;
}
.icon-active{
.icon-active {
color: #3a8ee6;
}
.icon-unactivated{
.icon-unactivated {
display: none;
}
.panel-info-area{
.panel-info-area {
position: absolute;
left: 10px;
.text{
.text {
font-size: 16px;
color: var(--TextPrimary, #606266);
};
.icon-back{
}
;
.icon-back {
font-size: 18px;
font-weight: bold;
color: var(--TextPrimary, #606266);

10
frontend/src/components/canvas/store/snapshot.js
View File

@ -3,8 +3,8 @@ import { deepCopy } from '@/components/canvas/utils/utils'
export default {
state: {
snapshotData: [], // 编辑器快照数据
snapshotStyleData: [], // 样式改变也记录快照
snapshotData: [{}], // 编辑器快照数据
snapshotStyleData: [{}], // 样式改变也记录快照
snapshotIndex: -1, // 快照索引
changeTimes: -1, // 修改次数
lastSaveSnapshotIndex: 0, // 最后保存是snapshotIndex的索引
@ -47,9 +47,9 @@ export default {
refreshSnapshot(state) {
// console.log('refreshSnapshot')
// 刷新快照
state.snapshotData = []
state.snapshotStyleData = []
state.snapshotIndex = -1
state.snapshotData = [deepCopy(state.componentData)]
state.snapshotStyleData = [deepCopy(state.canvasStyleData)]
state.snapshotIndex = 0
state.changeTimes = -1
state.lastSaveSnapshotIndex = 0
},

2
frontend/src/store/index.js
View File

@ -659,8 +659,6 @@ const data = {
this.commit('clearLinkageSettingInfo', false)
this.commit('resetViewEditInfo')
this.commit('initCurMultiplexingComponents')
// 清空当前缓存,快照
this.commit('refreshSnapshot')
state.batchOptStatus = false
// Currently selected components
state.curBatchOptComponents = []

144
frontend/src/styles/deicon/demo_index.html
View File

@ -54,6 +54,42 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe60c;</span>
<div class="name">更多</div>
<div class="code-name">&amp;#xe60c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61c;</span>
<div class="name">清空</div>
<div class="code-name">&amp;#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">查看</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68c;</span>
<div class="name">outline-redo</div>
<div class="code-name">&amp;#xe68c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68d;</span>
<div class="name">outline-undo</div>
<div class="code-name">&amp;#xe68d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60a;</span>
<div class="name">定位</div>
<div class="code-name">&amp;#xe60a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe670;</span>
<div class="name">富文本框</div>
@ -594,9 +630,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1652937715816') format('woff2'),
url('iconfont.woff?t=1652937715816') format('woff'),
url('iconfont.ttf?t=1652937715816') format('truetype');
src: url('iconfont.woff2?t=1655095335340') format('woff2'),
url('iconfont.woff?t=1655095335340') format('woff'),
url('iconfont.ttf?t=1655095335340') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -622,6 +658,60 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-gengduo"></span>
<div class="name">
更多
</div>
<div class="code-name">.icon-gengduo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qingkong"></span>
<div class="name">
清空
</div>
<div class="code-name">.icon-qingkong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-chakan"></span>
<div class="name">
查看
</div>
<div class="code-name">.icon-chakan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-outline-redo"></span>
<div class="name">
outline-redo
</div>
<div class="code-name">.icon-outline-redo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-outline-undo"></span>
<div class="name">
outline-undo
</div>
<div class="code-name">.icon-outline-undo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dingwei"></span>
<div class="name">
定位
</div>
<div class="code-name">.icon-dingwei
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fuwenbenkuang"></span>
<div class="name">
@ -1432,6 +1522,54 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gengduo"></use>
</svg>
<div class="name">更多</div>
<div class="code-name">#icon-gengduo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-qingkong"></use>
</svg>
<div class="name">清空</div>
<div class="code-name">#icon-qingkong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-chakan"></use>
</svg>
<div class="name">查看</div>
<div class="code-name">#icon-chakan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-outline-redo"></use>
</svg>
<div class="name">outline-redo</div>
<div class="code-name">#icon-outline-redo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-outline-undo"></use>
</svg>
<div class="name">outline-undo</div>
<div class="code-name">#icon-outline-undo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dingwei"></use>
</svg>
<div class="name">定位</div>
<div class="code-name">#icon-dingwei</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fuwenbenkuang"></use>

30
frontend/src/styles/deicon/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1652937715816') format('woff2'),
url('iconfont.woff?t=1652937715816') format('woff'),
url('iconfont.ttf?t=1652937715816') format('truetype');
src: url('iconfont.woff2?t=1655095335340') format('woff2'),
url('iconfont.woff?t=1655095335340') format('woff'),
url('iconfont.ttf?t=1655095335340') format('truetype');
}
.iconfont {
@ -13,6 +13,30 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-gengduo:before {
content: "\e60c";
}
.icon-qingkong:before {
content: "\e61c";
}
.icon-chakan:before {
content: "\e610";
}
.icon-outline-redo:before {
content: "\e68c";
}
.icon-outline-undo:before {
content: "\e68d";
}
.icon-dingwei:before {
content: "\e60a";
}
.icon-fuwenbenkuang:before {
content: "\e670";
}

2
frontend/src/styles/deicon/iconfont.js
View File

File diff suppressed because one or more lines are too long

42
frontend/src/styles/deicon/iconfont.json
View File

@ -5,6 +5,48 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "77822",
"name": "更多",
"font_class": "gengduo",
"unicode": "e60c",
"unicode_decimal": 58892
},
{
"icon_id": "1817728",
"name": "清空",
"font_class": "qingkong",
"unicode": "e61c",
"unicode_decimal": 58908
},
{
"icon_id": "2815705",
"name": "查看",
"font_class": "chakan",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "27472802",
"name": "outline-redo",
"font_class": "outline-redo",
"unicode": "e68c",
"unicode_decimal": 59020
},
{
"icon_id": "27472812",
"name": "outline-undo",
"font_class": "outline-undo",
"unicode": "e68d",
"unicode_decimal": 59021
},
{
"icon_id": "1382",
"name": "定位",
"font_class": "dingwei",
"unicode": "e60a",
"unicode_decimal": 58890
},
{
"icon_id": "2471358",
"name": "富文本框",

BIN
frontend/src/styles/deicon/iconfont.ttf
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff2
View File

Binary file not shown.

2
frontend/src/views/panel/edit/index.vue
View File

@ -670,6 +670,8 @@ export default {
this.$store.commit('initCanvas')
if (panelId) {
initPanelData(panelId, function() {
// 清空当前缓存,快照
_this.$store.commit('refreshSnapshot')
// 初始化视图缓存
initViewCache(panelId)
// 初始化记录的视图信息