Skip to content

Commit

Permalink
feat：UI specification adjustment (#938)
Browse files Browse the repository at this point in the history 
* feat: 添加页面初始间距

* feat: 调整间距配置

* feat: 调整样式面板字体交互

* feat: 调整CanvasRowColContainer组件间距

* feat: 画布页面添加背景色

* feat: 区块组件添加间距

* feat: 添加样式字符串转对象方法

* feat: 添加基础样式类

* feat:添加弹性盒子组件

* feat: 调整flexBox组件

* feat: 增加Section组件以及清空画布保留基础样式

* fix:样调整时增加基础类名判断

* fix：修复在样式面板选择样式时，两个类名同时改动

* fix：调整容器默认内容样式

* fix:容器组件名以及属性改为中文
  • Loading branch information
@lichunn
lichunn authored Dec 19, 2024
1 parent 7360072 commit 9f9447d
Show file tree
Hide file tree
Showing 22 changed files with 634 additions and 45 deletions.
2 changes: 2 additions & 0 deletions packages/builtinComponent/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
export { default as CanvasCol } from './src/components/CanvasCol.vue'
export { default as CanvasRow } from './src/components/CanvasRow.vue'
export { default as CanvasRowColContainer } from './src/components/CanvasRowColContainer.vue'
export { default as CanvasFlexBox } from './src/components/CanvasFlexBox.vue'
export { default as CanvasSection } from './src/components/CanvasSection.vue'
export { default as meta } from './src/meta'
55 changes: 55 additions & 0 deletions packages/builtinComponent/src/components/CanvasFlexBox.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<template>
<div class="canvas-flex-box">
<slot> </slot>
</div>
</template>

<script setup>
import { computed, defineProps } from 'vue'
import { getStyleValue } from './helper'
const props = defineProps({
flexDirection: {
type: String,
default: 'row'
},
gap: {
type: [String, Number],
default: '8px'
},
padding: {
type: [String, Number],
default: '8px'
},
alignItems: {
type: String,
default: 'center'
},
justifyContent: {
type: String,
default: 'flex-start'
}
})
const styles = computed(() => ({
flexDirection: props.flexDirection,
gap: getStyleValue(props.gap),
padding: getStyleValue(props.padding),
alignItems: props.alignItems,
justifyContent: props.justifyContent
}))
</script>
<style lang="less" scoped>
.canvas-flex-box {
display: flex;
flex: 1 1 0px;
flex-direction: v-bind('styles.flexDirection');
gap: v-bind('styles.gap');
padding: v-bind('styles.padding');
align-items: v-bind('styles.alignItems');
justify-content: v-bind('styles.justifyContent');
:deep(.canvas-container) {
width: 100%;
}
}
</style>
15 changes: 15 additions & 0 deletions packages/builtinComponent/src/components/CanvasSection.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<template>
<div class="canvas-section">
<slot> </slot>
</div>
</template>

<style lang="less" scoped>
.canvas-section {
width: 100%;
display: flex;
flex: 1 1 0;
align-items: center;
justify-content: center;
}
</style>
221 changes: 221 additions & 0 deletions packages/builtinComponent/src/meta/CanvasFlexBox.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
{
"component": {
"icon": "Box",
"name": {
"zh_CN": "弹性容器"
},
"component": "CanvasFlexBox",
"schema": {
"slots": {},
"properties": [
{
"label": {
"zh_CN": "基础信息"
},
"description": {
"zh_CN": "基础信息"
},
"collapse": {
"number": 6,
"text": {
"zh_CN": "显示更多"
}
},
"content": [
{
"property": "flexDirection",
"type": "String",
"defaultValue": "row",
"bindState": true,
"label": {
"text": {
"zh_CN": "排列方向"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "SelectConfigurator",
"props": {
"options": [
{
"label": "水平,起点在左端",
"value": "row"
},
{
"label": "水平,起点在右端",
"value": "row-reverse"
},
{
"label": "垂直,起点在上沿",
"value": "column"
},
{
"label": "垂直,起点在下沿",
"value": "column-reverse"
}
]
}
}
},
{
"property": "gap",
"defaultValue": "8px",
"label": {
"text": {
"zh_CN": "间距"
}
},
"widget": {
"component": "InputConfigurator"
},
"description": {
"zh_CN": "控制容器内水平和垂直的间距"
},
"labelPosition": "left"
},
{
"property": "padding",
"defaultValue": "8px",
"label": {
"text": {
"zh_CN": "内边距"
}
},
"widget": {
"component": "InputConfigurator"
},
"labelPosition": "left"
},
{
"property": "justifyContent",
"type": "String",
"defaultValue": "flex-start",
"bindState": true,
"label": {
"text": {
"zh_CN": "水平对齐方式"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "SelectConfigurator",
"props": {
"options": [
{
"label": "左对齐",
"value": "flex-start"
},
{
"label": "右对齐",
"value": "flex-end"
},
{
"label": "居中",
"value": "center"
},
{
"label": "两端对齐,子元素间隔相等",
"value": "space-between"
},
{
"label": "子元素两侧间隔相等",
"value": "space-around"
}
]
}
}
},
{
"property": "alignItems",
"type": "String",
"defaultValue": "center",
"bindState": true,
"label": {
"text": {
"zh_CN": "垂直对齐方式"
}
},
"cols": 12,
"rules": [],
"widget": {
"component": "SelectConfigurator",
"props": {
"options": [
{
"label": "交叉轴的中点对齐",
"value": "center"
},
{
"label": "交叉轴的起点对齐",
"value": "flex-start"
},
{
"label": "交叉轴的终点对齐",
"value": "flex-end"
},
{
"label": "以子元素第一行文字的基线对齐",
"value": "baseline"
},
{
"label": "占满容器高度",
"value": "stretch"
}
]
}
}
}
]
}
],
"events": {
"onClick": {
"label": {
"zh_CN": "点击事件"
},
"description": {
"zh_CN": "点击时触发的回调函数"
},
"type": "event",
"functionInfo": {
"params": [],
"returns": {}
},
"defaultValue": ""
}
},
"shortcuts": {
"properties": []
},
"contentMenu": {
"actions": []
}
},
"configure": {
"loop": true,
"isContainer": true,
"nestingRule": {
"childWhitelist": [],
"descendantBlacklist": []
}
}
},
"snippet": {
"name": {
"zh_CN": "弹性容器"
},
"screenshot": "",
"snippetName": "CanvasFlexBox",
"icon": "Box",
"schema": {
"componentName": "CanvasFlexBox",
"props": {
"flexDirection": "row",
"gap": "8px",
"padding": "8px"
}
}
}
}
10 changes: 5 additions & 5 deletions packages/builtinComponent/src/meta/CanvasRowColContainer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,21 +68,21 @@
"schema": {
"componentName": "CanvasRowColContainer",
"props": {
"rowGap": "20px"
"rowGap": "16px"
},
"children": [
{
"componentName": "CanvasRow",
"props": {
"rowGap": "20px",
"colGap": "20px"
"rowGap": "16px",
"colGap": "16px"
},
"children": [
{
"componentName": "CanvasCol",
"props": {
"rowGap": "20px",
"colGap": "20px",
"rowGap": "16px",
"colGap": "16px",
"grow": true,
"shrink": true,
"widthType": "auto"
Expand Down
71 changes: 71 additions & 0 deletions packages/builtinComponent/src/meta/CanvasSection.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
{
"component": {
"icon": "Box",
"name": {
"zh_CN": "全宽居中布局"
},
"component": "CanvasSection",
"schema": {
"slots": {},
"properties": [
{
"label": {
"zh_CN": "基础信息"
},
"description": {
"zh_CN": "基础信息"
},
"collapse": {
"number": 6,
"text": {
"zh_CN": "显示更多"
}
},
"content": []
}
],
"events": {
"onClick": {
"label": {
"zh_CN": "点击事件"
},
"description": {
"zh_CN": "点击时触发的回调函数"
},
"type": "event",
"functionInfo": {
"params": [],
"returns": {}
},
"defaultValue": ""
}
},
"shortcuts": {
"properties": []
},
"contentMenu": {
"actions": []
}
},
"configure": {
"loop": true,
"isContainer": true,
"nestingRule": {
"childWhitelist": [],
"descendantBlacklist": []
}
}
},
"snippet": {
"name": {
"zh_CN": "全宽居中布局"
},
"screenshot": "",
"snippetName": "CanvasSection",
"icon": "Box",
"schema": {
"componentName": "CanvasSection",
"props": {}
}
}
}
Loading

0 comments on commit 9f9447d

Please sign in to comment.