Skip to content

D
dataease
提交 ceb18050 authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

feat: 新增组件辅助设计 可以精确定位组件坐标 宽高透明度

上级 8ebb3597
隐藏空白字符变更
内嵌 并排
正在显示 包含 204 行增加 和 111 行删除
frontend/src/components/canvas/components/AttrList.vue
浏览文件 @ ceb18050
<template> <template>
<div class="attr-list"> <div class="attr-list">
<el-form> <el-form>
<el-form-item v-for="(key, index) in styleKeys.filter(item => item != 'rotate')" :key="index" :label="map[key]"> <el-form-item v-for="(key, index) in styleKeys.filter(item => (item != 'rotate' && item != 'borderWidth'))" :key="index" :label="map[key]">
<el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]"></el-color-picker> <el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" />
<el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]"></el-color-picker> <el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" />
<el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]"></el-color-picker> <el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" />
<el-select v-else-if="key == 'textAlign'" v-model="curComponent.style[key]"> <el-select v-else-if="key == 'textAlign'" v-model="curComponent.style[key]">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
></el-option> />
</el-select> </el-select>
<el-input type="number" v-else v-model="curComponent.style[key]" /> <el-input v-if="key ==='opacity'" v-model="curComponent.style[key]" type="number" :min="0" :step="0.1" :max="1" />
</el-form-item> <el-input v-else v-model="curComponent.style[key]" type="number" />
<el-form-item label="内容" v-if="curComponent && !excludes.includes(curComponent.component)"> </el-form-item>
<el-input type="textarea" v-model="curComponent.propValue" /> <!-- <el-form-item v-if="curComponent && !excludes.includes(curComponent.component)" label="内容">-->
</el-form-item> <!-- <el-input v-model="curComponent.propValue" type="textarea" />-->
</el-form> <!-- </el-form-item>-->
</div> </el-form>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
excludes: ['Picture', 'Group'], // 这些组件不显示内容 excludes: ['Picture', 'Group'], // 这些组件不显示内容
options: [ options: [
{ {
label: '左对齐', label: this.$t('panel.aline_left'),
value: 'left', value: 'left'
},
{
label: '居中',
value: 'center',
},
{
label: '右对齐',
value: 'right',
},
],
map: {
left: 'x 坐标',
top: 'y 坐标',
height: '高',
width: '宽',
color: '颜色',
backgroundColor: '背景色',
borderWidth: '边框宽度',
borderColor: '边框颜色',
borderRadius: '边框半径',
fontSize: '字体大小',
fontWeight: '字体粗细',
lineHeight: '行高',
letterSpacing: '字间距',
textAlign: '对齐方式',
opacity: '透明度',
},
}
},
computed: {
styleKeys() {
return this.$store.state.curComponent? Object.keys(this.$store.state.curComponent.style) : []
}, },
curComponent() { {
return this.$store.state.curComponent label: this.$t('panel.aline_center'),
value: 'center'
}, },
{
label: this.$t('panel.aline_right'),
value: 'right'
}
],
map: {
left: this.$t('panel.left'),
top: this.$t('panel.top'),
height: this.$t('panel.height'),
width: this.$t('panel.width'),
color: this.$t('panel.color'),
backgroundColor: this.$t('panel.backgroundColor'),
borderWidth: this.$t('panel.borderWidth'),
borderColor: this.$t('panel.borderColor'),
borderRadius: this.$t('panel.borderRadius'),
fontSize: this.$t('panel.fontSize'),
fontWeight: this.$t('panel.fontWeight'),
lineHeight: this.$t('panel.lineHeight'),
letterSpacing: this.$t('panel.letterSpacing'),
textAlign: this.$t('panel.textAlign'),
opacity: this.$t('panel.opacity')
}
}
},
computed: {
styleKeys() {
return this.$store.state.curComponent ? Object.keys(this.$store.state.curComponent.style) : []
}, },
curComponent() {
return this.$store.state.curComponent
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.attr-list { .attr-list {
overflow: auto; overflow: auto;
padding: 20px; padding: 0px;
padding-top: 0; padding-top: 0;
height: 100%; height: 100%;
} }
</style> </style>
\ No newline at end of file
frontend/src/components/canvas/components/Toolbar.vue
浏览文件 @ ceb18050
...@@ -11,6 +11,19 @@ ...@@ -11,6 +11,19 @@
<!-- <span> {{ $t('panel.canvas_scale') }} </span>--> <!-- <span> {{ $t('panel.canvas_scale') }} </span>-->
<!-- <input v-model="scale" @input="handleScaleChange"> %--> <!-- <input v-model="scale" @input="handleScaleChange"> %-->
<!-- </div>--> <!-- </div>-->
<el-tooltip :content="$t('panel.style')">
<el-button :class="styleButtonActive?'button-show':'button-closed'" class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
</el-tooltip>
<el-tooltip v-if="!aidedButtonActive" :content="$t('panel.open_aided_design') ">
<el-button class="el-icon-help button-closed" size="mini" circle @click="changeAidedDesign" />
</el-tooltip>
<el-tooltip v-if="aidedButtonActive" :content="$t('panel.close_aided_design') ">
<el-button class="el-icon-help button-show" size="mini" circle @click="changeAidedDesign" />
</el-tooltip>
<el-tooltip :content="$t('panel.undo') "> <el-tooltip :content="$t('panel.undo') ">
<el-button class="el-icon-refresh-right" size="mini" circle @click="undo" /> <el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
</el-tooltip> </el-tooltip>
...@@ -56,11 +69,8 @@ import { ...@@ -56,11 +69,8 @@ import {
export default { export default {
name: 'Toolbar', name: 'Toolbar',
props: { props: {
buttonActive: { styleButtonActive: Boolean,
type: Boolean, aidedButtonActive: Boolean
required: false,
default: false
}
}, },
data() { data() {
return { return {
...@@ -233,6 +243,9 @@ export default { ...@@ -233,6 +243,9 @@ export default {
clickPreview() { clickPreview() {
this.$emit('previewFullScreen') this.$emit('previewFullScreen')
},
changeAidedDesign() {
this.$emit('changeAidedDesign')
} }
} }
} }
......
frontend/src/lang/en.js
浏览文件 @ ceb18050
...@@ -906,7 +906,30 @@ export default { ...@@ -906,7 +906,30 @@ export default {
topComponent: 'Top Component', topComponent: 'Top Component',
bottomComponent: 'Bottom Component', bottomComponent: 'Bottom Component',
upComponent: 'Up One Level', upComponent: 'Up One Level',
downComponent: 'Down One Level' downComponent: 'Down One Level',
open_aided_design: 'Open Component Aided Design',
close_aided_design: 'Close Component Aided Design',
open_style_design: 'Open Style Design',
close_style_design: 'Close Style Design',
left: 'X-Axis',
top: 'Y-Axis',
height: 'Height',
width: 'Width',
color: 'Color',
backgroundColor: 'BackgroundColor',
borderWidth: 'BorderWidth',
borderColor: 'BorderColor',
borderRadius: 'BorderRadius',
fontSize: 'FontSize',
fontWeight: 'FontWeight',
lineHeight: 'LineHeight',
letterSpacing: 'LetterSpacing',
textAlign: 'TextAlign',
opacity: 'Opacity',
aline_left: 'Aline Left',
aline_center: 'Aline Center',
aline_right: 'Aline Right',
select_component: 'Check Component'
}, },
plugin: { plugin: {
local_install: 'Local installation', local_install: 'Local installation',
......
frontend/src/lang/tw.js
浏览文件 @ ceb18050
...@@ -906,7 +906,30 @@ export default { ...@@ -906,7 +906,30 @@ export default {
topComponent: '置于顶层', topComponent: '置于顶层',
bottomComponent: '置于底层', bottomComponent: '置于底层',
upComponent: '上移一层', upComponent: '上移一层',
downComponent: '下移一层' downComponent: '下移一层',
open_aided_design: '打开组件辅助设计',
close_aided_design: '关闭组件辅助设计',
open_style_design: '打开样式设计',
close_style_design: '关闭样式设计',
left: 'x 坐标',
top: 'y 坐标',
height: '高',
width: '宽',
color: '颜色',
backgroundColor: '背景色',
borderWidth: '边框宽度',
borderColor: '边框颜色',
borderRadius: '边框半径',
fontSize: '字体大小',
fontWeight: '字体粗细',
lineHeight: '行高',
letterSpacing: '字间距',
textAlign: '对齐方式',
opacity: '透明度',
aline_left: '左对齐',
aline_center: '居中',
aline_right: '右对齐',
select_component: '请选择组件'
}, },
plugin: { plugin: {
local_install: '本地安裝', local_install: '本地安裝',
......
frontend/src/lang/zh.js
浏览文件 @ ceb18050
...@@ -906,8 +906,30 @@ export default { ...@@ -906,8 +906,30 @@ export default {
topComponent: '置于顶层', topComponent: '置于顶层',
bottomComponent: '置于底层', bottomComponent: '置于底层',
upComponent: '上移一层', upComponent: '上移一层',
downComponent: '下移一层' downComponent: '下移一层',
open_aided_design: '打开组件辅助设计',
close_aided_design: '关闭组件辅助设计',
open_style_design: '打开样式设计',
close_style_design: '关闭样式设计',
left: 'x 坐标',
top: 'y 坐标',
height: '高',
width: '宽',
color: '颜色',
backgroundColor: '背景色',
borderWidth: '边框宽度',
borderColor: '边框颜色',
borderRadius: '边框半径',
fontSize: '字体大小',
fontWeight: '字体粗细',
lineHeight: '行高',
letterSpacing: '字间距',
textAlign: '对齐方式',
opacity: '透明度',
aline_left: '左对齐',
aline_center: '居中',
aline_right: '右对齐',
select_component: '请选择组件'
}, },
plugin: { plugin: {
local_install: '本地安装', local_install: '本地安装',
......
frontend/src/views/panel/edit/index.vue
浏览文件 @ ceb18050
...@@ -8,28 +8,34 @@ ...@@ -8,28 +8,34 @@
</el-col> </el-col>
<!--横向工具栏--> <!--横向工具栏-->
<el-col :span="16"> <el-col :span="16">
<Toolbar :button-active="show&&showIndex===2" @showPanel="showPanel" @close-left-panel="closeLeftPanel" @previewFullScreen="previewFullScreen" /> <Toolbar
:style-button-active="show&&showIndex===2"
:aided-button-active="aidedButtonActive"
@showPanel="showPanel"
@previewFullScreen="previewFullScreen"
@changeAidedDesign="changeAidedDesign"
/>
</el-col> </el-col>
</el-header> </el-header>
<de-container> <de-container>
<!--左侧导航栏-->
<de-aside-container class="ms-aside-container"> <de-aside-container class="ms-aside-container">
<div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute"> <div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
<div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto; font-size: 14px"> <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto; font-size: 14px">
<!-- 视图图表 --> <!-- 视图图表 start -->
<div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;"> <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
<el-button :class="show&&showIndex===0? 'button-show':'button-closed'" circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" /> <el-button :class="show&&showIndex===0? 'button-show':'button-closed'" circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
</div> </div>
<!-- 视图文字 -->
<div style="position: relative; margin: 18px auto 16px;"> <div style="position: relative; margin: 18px auto 16px;">
<div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;"> <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
{{ $t('panel.view') }} {{ $t('panel.view') }}
</div> </div>
</div> </div>
<!-- 视图分割线 -->
<div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;"> <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
<div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" /> <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
</div> </div>
<!-- 过滤组件 --> <!-- 视图图表 end -->
<!-- 过滤组件 start -->
<div tabindex="-1" style="position: relative; margin: 16px auto"> <div tabindex="-1" style="position: relative; margin: 16px auto">
<div style="height: 60px; position: relative"> <div style="height: 60px; position: relative">
<div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; "> <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
...@@ -42,43 +48,18 @@ ...@@ -42,43 +48,18 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 分割线 -->
<div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
<div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
</div>
<!-- 视图图表 -->
<div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
<el-button :class="show&&showIndex===2? 'button-show':'button-closed'" circle class="el-icon-magic-stick" size="mini" @click="showPanel(2)" />
</div>
<!-- 视图文字 -->
<div style="position: relative; margin: 18px auto 16px;">
<div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
{{ $t('panel.style') }}
</div>
</div>
<!-- 视图分割线 -->
<div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;"> <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
<div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" /> <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
</div> </div>
<!-- 过滤组件 end -->
</div> </div>
</div> </div>
<!-- <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">-->
<!-- <div />-->
<!-- <div v-if="show" class="leftPanel">-->
<!-- <div style="height:100%;overflow-y: auto">-->
<!-- <view-select v-show=" show && showIndex===0" />-->
<!-- <filter-group v-show=" show &&showIndex===1" />-->
<!-- <subject-setting v-show=" show &&showIndex===2" />-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</de-aside-container> </de-aside-container>
<!--画布区域--> <!--画布区域-->
<el-main> <de-main-container style="margin-left: 5px;margin-right: 5px">
<!--左侧抽屉-->
<el-drawer <el-drawer
title="我是标题"
:visible.sync="show" :visible.sync="show"
:with-header="false" :with-header="false"
style="position: absolute;" style="position: absolute;"
...@@ -101,9 +82,14 @@ ...@@ -101,9 +82,14 @@
@mousedown="handleMouseDown" @mousedown="handleMouseDown"
@mouseup="deselectCurComponent" @mouseup="deselectCurComponent"
> >
<Editor /> <Editor style="margin: 15px;" />
</div> </div>
</el-main> </de-main-container>
<de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">
<AttrList v-if="curComponent" />
<p v-else class="placeholder">{{ $t('panel.select_component') }}</p>
</de-aside-container>
</de-container> </de-container>
<el-dialog <el-dialog
...@@ -160,6 +146,7 @@ import Toolbar from '@/components/canvas/components/Toolbar' ...@@ -160,6 +146,7 @@ import Toolbar from '@/components/canvas/components/Toolbar'
import { findOne } from '@/api/panel/panel' import { findOne } from '@/api/panel/panel'
import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen' import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
import Preview from '@/components/canvas/components/Editor/Preview' import Preview from '@/components/canvas/components/Editor/Preview'
import AttrList from '@/components/canvas/components/AttrList.vue'
// 引入样式 // 引入样式
import '@/components/canvas/assets/iconfont/iconfont.css' import '@/components/canvas/assets/iconfont/iconfont.css'
...@@ -181,7 +168,8 @@ export default { ...@@ -181,7 +168,8 @@ export default {
FilterDialog, FilterDialog,
SubjectSetting, SubjectSetting,
PreviewFullScreen, PreviewFullScreen,
Preview Preview,
AttrList
}, },
data() { data() {
return { return {
...@@ -197,7 +185,9 @@ export default { ...@@ -197,7 +185,9 @@ export default {
currentWidget: null, currentWidget: null,
currentFilterCom: null, currentFilterCom: null,
subjectVisible: false, subjectVisible: false,
previewVisible: false previewVisible: false,
componentStyleShow: true,
aidedButtonActive: false
} }
}, },
...@@ -417,6 +407,9 @@ export default { ...@@ -417,6 +407,9 @@ export default {
}, },
previewFullScreen() { previewFullScreen() {
this.previewVisible = true this.previewVisible = true
},
changeAidedDesign() {
this.aidedButtonActive = !this.aidedButtonActive
} }
} }
...@@ -511,5 +504,24 @@ export default { ...@@ -511,5 +504,24 @@ export default {
.button-closed{ .button-closed{
background-color: #ffffff!important; background-color: #ffffff!important;
} }
.style-aside{
width: 85px;
max-width:85px!important;
border: 1px solid #E6E6E6;
padding: 3px;
transition: all 0.3s;
}
.placeholder{
font-size: 14px;
color: gray;
}
.show {
transform: translateX(0);
}
.hidden {
transform: translateX(100%);
}
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论