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

feat(panel): 文件组件拖拽是样式编辑改为悬浮式设计，在编辑仪表板是可以看到实时的效果

Browse Source
This commit is contained in:
wangjiahao 2021-07-02 14:25:12 +08:00
parent 995b9ea178
commit 1d316804e0
13 changed files with 672 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/DeDrag/index.vue
View File

@ -10,7 +10,7 @@
[classNameResizable]: resizable,
[classNameRotating]: rotating,
[classNameRotatable]: rotatable,
[classNameMouseOn]: mouseOn
[classNameMouseOn]: mouseOn || active
},
className
]"

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

@ -31,8 +31,6 @@ export default {
copyData: null,
editFilter: [
'view',
'v-text',
'rect-shape',
'custom'
]
}

6
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -54,10 +54,10 @@ const list = [
width: 300,
height: 100,
fontSize: 18,
fontWeight: 500,
fontWeight: 400,
lineHeight: '',
letterSpacing: 0,
textAlign: '',
textAlign: 'left',
color: '#000000'
}
},
@ -75,7 +75,7 @@ const list = [
borderColor: '',
borderRadius: '',
fontSize: 14,
fontWeight: 500,
fontWeight: 400,
lineHeight: '',
letterSpacing: 0,
textAlign: '',

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

@ -54,6 +54,60 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe659;</span>
<div class="name">font-weight-bold</div>
<div class="code-name">&amp;#xe659;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">letter_spacing</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe679;</span>
<div class="name">letter-spacing</div>
<div class="code-name">&amp;#xe679;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60e;</span>
<div class="name">字体颜色</div>
<div class="code-name">&amp;#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c3;</span>
<div class="name">format_letter_spacing_2</div>
<div class="code-name">&amp;#xe6c3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe710;</span>
<div class="name">font_size</div>
<div class="code-name">&amp;#xe710;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe972;</span>
<div class="name">居中</div>
<div class="code-name">&amp;#xe972;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe608;</span>
<div class="name">居右</div>
<div class="code-name">&amp;#xe608;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe688;</span>
<div class="name">居左</div>
<div class="code-name">&amp;#xe688;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64a;</span>
<div class="name">实线</div>
@ -210,9 +264,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1625127498350') format('woff2'),
url('iconfont.woff?t=1625127498350') format('woff'),
url('iconfont.ttf?t=1625127498350') format('truetype');
src: url('iconfont.woff2?t=1625198204132') format('woff2'),
url('iconfont.woff?t=1625198204132') format('woff'),
url('iconfont.ttf?t=1625198204132') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -238,6 +292,87 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-font-weight-bold"></span>
<div class="name">
font-weight-bold
</div>
<div class="code-name">.icon-font-weight-bold
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-letter_spacing"></span>
<div class="name">
letter_spacing
</div>
<div class="code-name">.icon-letter_spacing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-letter-spacing"></span>
<div class="name">
letter-spacing
</div>
<div class="code-name">.icon-letter-spacing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-zimua"></span>
<div class="name">
字体颜色
</div>
<div class="code-name">.icon-zimua
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-format_letter_spacing_"></span>
<div class="name">
format_letter_spacing_2
</div>
<div class="code-name">.icon-format_letter_spacing_
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-font_size"></span>
<div class="name">
font_size
</div>
<div class="code-name">.icon-font_size
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-align-center"></span>
<div class="name">
居中
</div>
<div class="code-name">.icon-align-center
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-juyou"></span>
<div class="name">
居右
</div>
<div class="code-name">.icon-juyou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-juzuo"></span>
<div class="name">
居左
</div>
<div class="code-name">.icon-juzuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-solid_line"></span>
<div class="name">
@ -472,6 +607,78 @@
<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-font-weight-bold"></use>
</svg>
<div class="name">font-weight-bold</div>
<div class="code-name">#icon-font-weight-bold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-letter_spacing"></use>
</svg>
<div class="name">letter_spacing</div>
<div class="code-name">#icon-letter_spacing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-letter-spacing"></use>
</svg>
<div class="name">letter-spacing</div>
<div class="code-name">#icon-letter-spacing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-zimua"></use>
</svg>
<div class="name">字体颜色</div>
<div class="code-name">#icon-zimua</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-format_letter_spacing_"></use>
</svg>
<div class="name">format_letter_spacing_2</div>
<div class="code-name">#icon-format_letter_spacing_</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-font_size"></use>
</svg>
<div class="name">font_size</div>
<div class="code-name">#icon-font_size</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-align-center"></use>
</svg>
<div class="name">居中</div>
<div class="code-name">#icon-align-center</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-juyou"></use>
</svg>
<div class="name">居右</div>
<div class="code-name">#icon-juyou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-juzuo"></use>
</svg>
<div class="name">居左</div>
<div class="code-name">#icon-juzuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-solid_line"></use>

42
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=1625127498350') format('woff2'),
url('iconfont.woff?t=1625127498350') format('woff'),
url('iconfont.ttf?t=1625127498350') format('truetype');
src: url('iconfont.woff2?t=1625198204132') format('woff2'),
url('iconfont.woff?t=1625198204132') format('woff'),
url('iconfont.ttf?t=1625198204132') format('truetype');
}
.iconfont {
@ -13,6 +13,42 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-font-weight-bold:before {
content: "\e659";
}
.icon-letter_spacing:before {
content: "\e601";
}
.icon-letter-spacing:before {
content: "\e679";
}
.icon-zimua:before {
content: "\e60e";
}
.icon-format_letter_spacing_:before {
content: "\e6c3";
}
.icon-font_size:before {
content: "\e710";
}
.icon-align-center:before {
content: "\e972";
}
.icon-juyou:before {
content: "\e608";
}
.icon-juzuo:before {
content: "\e688";
}
.icon-solid_line:before {
content: "\e64a";
}

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

File diff suppressed because one or more lines are too long

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

@ -5,6 +5,69 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "4283405",
"name": "font-weight-bold",
"font_class": "font-weight-bold",
"unicode": "e659",
"unicode_decimal": 58969
},
{
"icon_id": "9356145",
"name": "letter_spacing",
"font_class": "letter_spacing",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "13169265",
"name": "letter-spacing",
"font_class": "letter-spacing",
"unicode": "e679",
"unicode_decimal": 59001
},
{
"icon_id": "7620139",
"name": "字体颜色",
"font_class": "zimua",
"unicode": "e60e",
"unicode_decimal": 58894
},
{
"icon_id": "13016621",
"name": "format_letter_spacing_2",
"font_class": "format_letter_spacing_",
"unicode": "e6c3",
"unicode_decimal": 59075
},
{
"icon_id": "18354433",
"name": "font_size",
"font_class": "font_size",
"unicode": "e710",
"unicode_decimal": 59152
},
{
"icon_id": "3717684",
"name": "居中",
"font_class": "align-center",
"unicode": "e972",
"unicode_decimal": 59762
},
{
"icon_id": "14764786",
"name": "居右",
"font_class": "juyou",
"unicode": "e608",
"unicode_decimal": 58888
},
{
"icon_id": "22405859",
"name": "居左",
"font_class": "juzuo",
"unicode": "e688",
"unicode_decimal": 59016
},
{
"icon_id": "20374711",
"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.

174
frontend/src/views/Tinymce/RectangleAttr.vue Normal file
View File

@ -0,0 +1,174 @@
<template>
<el-card class="el-card-main" :style="mainStyle">
<div style="position: relative;">
<div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
<el-tooltip content="边框风格">
<el-select v-model="styleInfo.borderStyle" size="mini">
<el-option
v-for="item in lineStyle"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left;">
<i :class="item.icon" />
</span>
<span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
</el-option>
</el-select>
</el-tooltip>
</div>
<div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="边框宽度">
<el-select v-model="styleInfo.borderWidth" size="mini" placeholder="">
<el-option
v-for="item in lineFont"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-tooltip>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="边框颜色">
<i class="iconfont icon-huabi" @click="goBoardColor" />
</el-tooltip>
<div :style="boardDivColor" />
<el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" style="margin-top: 7px;height: 0px" size="mini" />
</div>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="背景颜色">
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
</div>
</div>
</div>
</el-card>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
lineStyle: [{
icon: 'iconfont icon-solid_line',
value: 'solid',
label: '实线'
}, {
icon: 'iconfont icon-xuxian',
value: 'dashed',
label: '虚线'
}, {
icon: 'iconfont icon-dianxian',
value: 'dotted',
label: '点线'
}],
lineFont: [{
value: '0',
label: '0'
}, {
value: '1',
label: '1'
}, {
value: '2',
label: '2'
}, {
value: '3',
label: '3'
}, {
value: '4',
label: '4'
}, {
value: '5',
label: '5'
}]
}
},
computed: {
boardDivColor() {
const style = {
height: '2px',
background: this.styleInfo.borderColor
}
return style
},
backgroundDivColor() {
const style = {
height: '2px',
background: this.styleInfo.backgroundColor
}
return style
},
mainStyle() {
const style = {
left: this.getPositionX(this.curComponent.style.left) + 'px',
top: (this.getPositionY(this.curComponent.style.top) - 3) + 'px'
}
return style
},
styleInfo() {
return this.$store.state.curComponent.style
},
...mapState([
'curComponent',
'curCanvasScale',
'canvasStyleData'
])
},
methods: {
goBoardColor() {
this.$refs.boardColorPicker.handleTrigger()
},
goBackgroundColor() {
this.$refs.backgroundColorPicker.handleTrigger()
},
getPositionX(x) {
if (this.canvasStyleData.selfAdaption) {
return (x * this.curCanvasScale.scaleWidth / 100) + 60
} else {
return x + 190
}
},
getPositionY(y) {
if (this.canvasStyleData.selfAdaption) {
return y * this.curCanvasScale.scaleHeight / 100
} else {
return y
}
}
}
}
</script>
<style lang="scss" scoped>
.attr-list {
overflow: auto;
padding: 20px;
padding-top: 0;
height: 100%;
}
.el-card-main {
height: 34px;
z-index: 1000000000;
width: 210px;
position: absolute;
}
.el-card-main ::v-deep .el-card__body {
padding: 0px!important;
}
</style>

171
frontend/src/views/Tinymce/TextAttr.vue Normal file
View File

@ -0,0 +1,171 @@
<template>
<el-card class="el-card-main" :style="mainStyle">
<div style="position: relative;">
<div style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;">
<el-radio-group v-model="styleInfo.textAlign" size="mini">
<el-radio-button
v-for="item in textAlignOptions"
:key="item.label"
:label="item.label"
>
<el-tooltip :content="item.tooltip">
<span style="float: left;">
<i :class="item.icon" />
</span>
</el-tooltip>
</el-radio-button>
</el-radio-group>
</div>
<el-tooltip :content="$t('panel.fontSize')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="iconfont icon-font_size" />
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" />
</div>
<el-tooltip :content="$t('panel.fontWeight')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-font-weight-bold" />
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" />
</div>
<el-tooltip :content="$t('panel.letterSpacing')">
<i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-letter_spacing" />
</el-tooltip>
<div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
<el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" />
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip :content="$t('panel.color')">
<i class="icon iconfont icon-zimua" @click="goColor" />
</el-tooltip>
<div :style="letterDivColor" />
<el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" />
</div>
</div>
<div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="背景颜色">
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
</el-tooltip>
<div :style="backgroundDivColor" />
<el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
</div>
</div>
</div>
</el-card>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
textAlignOptions: [
{
icon: 'iconfont icon-juzuo',
tooltip: this.$t('panel.text_align_left'),
label: 'left'
},
{
icon: 'iconfont icon-align-center',
tooltip: this.$t('panel.text_align_center'),
label: 'center'
},
{
icon: 'iconfont icon-juyou',
tooltip: this.$t('panel.text_align_right'),
label: 'right'
}
] }
},
computed: {
letterDivColor() {
const style = {
height: '2px',
background: this.styleInfo.color
}
return style
},
backgroundDivColor() {
const style = {
height: '2px',
background: this.styleInfo.backgroundColor
}
return style
},
mainStyle() {
const style = {
left: this.getPositionX(this.curComponent.style.left) + 'px',
top: (this.getPositionY(this.curComponent.style.top) - 3) + 'px'
}
return style
},
styleInfo() {
return this.$store.state.curComponent.style
},
...mapState([
'curComponent',
'curCanvasScale',
'canvasStyleData'
])
},
methods: {
goColor() {
this.$refs.colorPicker.handleTrigger()
},
goBackgroundColor() {
this.$refs.backgroundColorPicker.handleTrigger()
},
getPositionX(x) {
if (this.canvasStyleData.selfAdaption) {
return (x * this.curCanvasScale.scaleWidth / 100) + 60
} else {
return x + 190
}
},
getPositionY(y) {
if (this.canvasStyleData.selfAdaption) {
return y * this.curCanvasScale.scaleHeight / 100
} else {
return y
}
}
}
}
</script>
<style lang="scss" scoped>
.attr-list {
overflow: auto;
padding: 20px;
padding-top: 0;
height: 100%;
}
.el-card-main {
height: 34px;
z-index: 1000000000;
width: 450px;
position: absolute;
}
.el-card-main ::v-deep .el-card__body {
padding: 0px!important;
}
>>> .el-radio-button__inner{
padding: 5px;
width: 30px;
}
</style>

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

@ -157,8 +157,8 @@
<input id="input" ref="files" type="file" accept="image/*" hidden @change="handleFileChange">
<!--矩形样式组件-->
test--------{{ curComponent&&curComponent.type }}
<RectangleAttr v-if="curComponent&&curComponent.type==='rect-shape'" />
<TextAttr v-if="curComponent&&curComponent.type==='v-text'" />
</el-row>
</template>
@ -199,6 +199,7 @@ import toast from '@/components/canvas/utils/toast'
import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
import generateID from '@/components/canvas/utils/generateID'
import RectangleAttr from '@/components/canvas/components/RectangleAttr'
import TextAttr from '@/views/Tinymce/TextAttr'
export default {
name: 'PanelEdit',
@ -218,7 +219,8 @@ export default {
AttrListExtend,
AssistComponent,
PanelTextEditor,
RectangleAttr
RectangleAttr,
TextAttr
},
data() {
return {
@ -455,12 +457,12 @@ export default {
this.$store.commit('recordSnapshot')
this.clearCurrentInfo()
// 文字组件
if (component.type === 'v-text') {
this.$store.commit('setCurComponent', { component: component, index: this.componentData.length })
this.styleDialogVisible = true
this.show = false
}
// // 文字组件
// if (component.type === 'v-text') {
// this.$store.commit('setCurComponent', { component: component, index: this.componentData.length })
// this.styleDialogVisible = true
// this.show = false
// }
},
clearCurrentInfo() {
this.currentWidget = null