@@ -182,6 +187,22 @@ export default {
const { setPosition } = useModal()
const fontFamilyOptions = [
+ {
+ label: '微软雅黑',
+ value: '"Microsoft YaHei", "微软雅黑", sans-serif'
+ },
+ {
+ label: '苹方',
+ value: 'PingFang SC'
+ },
+ {
+ label: '黑体',
+ value: 'SimHei'
+ },
+ {
+ label: '宋体',
+ value: 'SimSun'
+ },
{
label: 'Arial',
value: 'Arial, "Helvetica Neue", Helvetica'
@@ -312,6 +333,9 @@ export default {
}
]
+ const sizes = ['9', '10', '11', '12', '14', '16', '18', '20', '24']
+ const sizeOptions = sizes.map((size) => ({ label: size, value: size }))
+
const alignOptions = [
{
icon: 'text-align-left',
@@ -389,7 +413,8 @@ export default {
const state = reactive({
value: '400',
- fontFamilyValue: 'Arial, "Helvetica Neue", Helvetica'
+ fontFamilyValue: '"Microsoft YaHei", "微软雅黑", sans-serif',
+ sizeValue: ''
})
const selectedAlign = ref('')
@@ -460,6 +485,12 @@ export default {
}
}
+ const selectFontSize = (type) => {
+ if (type) {
+ updateStyle({ 'font-size': type + 'px' })
+ }
+ }
+
const selectFontFamily = (type) => {
if (type) {
updateStyle({ [TYPO_PROPERTY.FontFamily]: type })
@@ -480,8 +511,10 @@ export default {
selectFontStyle,
selectedTextDecoration,
selectTextDecoration,
+ selectFontSize,
openSetting,
selectOptions,
+ sizeOptions,
state,
selectFontWeight,
fontFamilyOptions,
@@ -513,6 +546,11 @@ export default {
grid-template-columns: 45% auto;
}
+ &.font-split {
+ gap: 4px 8px;
+ grid-template-columns: 56% auto;
+ }
+
&.more {
grid-template-columns: 1fr;
}
@@ -609,6 +647,13 @@ export default {
.color-wrap {
width: 210px;
}
+ .font-size {
+ display: flex;
+ font-size: 12px;
+ color: var(--te-common-text-weaken);
+ align-items: center;
+ gap: 4px;
+ }
}
.typography-font-row {
diff --git a/packages/settings/styles/src/js/useStyle.js b/packages/settings/styles/src/js/useStyle.js
index cf93da8f5..f705aec27 100644
--- a/packages/settings/styles/src/js/useStyle.js
+++ b/packages/settings/styles/src/js/useStyle.js
@@ -12,7 +12,7 @@
import { computed, reactive, watch } from 'vue'
import { useBroadcastChannel } from '@vueuse/core'
-import { useCanvas, useHistory, useProperties as useProps } from '@opentiny/tiny-engine-meta-register'
+import { useCanvas, useHistory, useProperties as useProps, getOptions } from '@opentiny/tiny-engine-meta-register'
import { formatString } from '@opentiny/tiny-engine-common/js/ast'
import { constants, utils } from '@opentiny/tiny-engine-utils'
import { parser, stringify, getSelectorArr } from './parser'
@@ -255,7 +255,7 @@ watch(
(value) => value.pureSelector === classNameList && value.mouseState === mouseState
)
const style = matchStyles.length ? matchStyles[0].rules : {}
- state.style = style
+ state.style = { ...style }
},
{
deep: true
@@ -288,7 +288,7 @@ const updateGlobalStyle = (newSelector) => {
state.styleObject[currentSelector] = {
...(state.styleObject[currentSelector] || {}),
- rules: state.style
+ rules: { ...state.style }
}
if (!Object.keys(state.style).length) {
@@ -307,6 +307,13 @@ const updateStyle = (properties) => {
const { addHistory } = useHistory()
const { getSchema: getCanvasPageSchema, updateRect } = canvasApi.value
const schema = getSchema() || getCanvasPageSchema()
+ const pageOptions = getOptions('engine.plugins.appmanage')
+ const materialsOptions = getOptions('engine.plugins.materials')
+ const baseClassGroup = [
+ `.${pageOptions.pageBaseStyle.className}`,
+ `.${materialsOptions.blockBaseStyle.className}`,
+ `.${materialsOptions.componentBaseStyle.className}`
+ ]
schema.props = schema.props || {}
if (properties) {
@@ -321,7 +328,7 @@ const updateStyle = (properties) => {
const classNames = schema.props.className || ''
// 不存在选择器，需要生成一个随机类名，添加到当前选中组件中，然后写入到全局样式
- if (!currentSelector && typeof classNames === 'string') {
+ if ((!currentSelector || baseClassGroup.includes(currentSelector)) && typeof classNames === 'string') {
randomClassName = genRandomClassNames(schema?.componentName || 'component')
let newClassNames = randomClassName.slice(1)
diff --git a/packages/utils/src/utils/index.js b/packages/utils/src/utils/index.js
index d7f16ddf2..5e570f1a5 100644
--- a/packages/utils/src/utils/index.js
+++ b/packages/utils/src/utils/index.js
@@ -381,3 +381,68 @@ export const string2Obj = (string) => {
return obj
}
+
+/**
+ * 指定-转化为驼峰命名
+ * @param {*} string
+ * @returns
+ */
+
+export const toCamelCase = (str) => {
+ return str.replace(/[-\s]+(.)?/g, (match, group1) => (group1 ? group1.toUpperCase() : ''))
+}
+
+/**
+ * 驼峰转化为连字符形式
+ * @param {*} string
+ * @returns
+ */
+
+export const convertCamelToKebab = (string) => {
+ return string
+ .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+ .replace(/([a-z])([A-Z])/g, '$1-$2')
+ .toLowerCase()
+}
+
+/**
+ * 样式字符串转对象
+ * @param {*} string
+ * @returns
+ */
+
+export const styleString2Obj = (styleString) => {
+ if (!styleString || typeof styleString !== 'string') {
+ return {}
+ }
+
+ const styles = styleString.trim().split(';')
+ const styleObject = styles.reduce((obj, pair) => {
+ const colonIndex = pair.indexOf(':')
+ if (colonIndex === -1) return obj
+ const key = pair.slice(0, colonIndex)
+ const value = pair.slice(colonIndex + 1)
+ if (key && value) {
+ obj[toCamelCase(key.trim())] = value.trim()
+ }
+ return obj
+ }, {})
+ return styleObject
+}
+
+/**
+ * 对象转样式字符串
+ * @param {*} string
+ * @returns
+ */
+
+export const obj2StyleString = (obj) => {
+ if (!obj || typeof obj !== 'object') {
+ return ''
+ }
+
+ return Object.entries(obj)
+ .filter(([, value]) => value != null)
+ .map(([key, value]) => `${convertCamelToKebab(key)}: ${value}`)
+ .join('; ')
+}
diff --git a/packages/vue-generator/src/constant/index.js b/packages/vue-generator/src/constant/index.js
index b45bf828c..eb0d9c719 100644
--- a/packages/vue-generator/src/constant/index.js
+++ b/packages/vue-generator/src/constant/index.js
@@ -2195,6 +2195,20 @@ export const BUILTIN_COMPONENTS_MAP = [
package: '@opentiny/tiny-engine-builtin-component',
version: '^1.0.1',
destructuring: true
+ },
+ {
+ componentName: 'CanvasFlexBox',
+ exportName: 'CanvasFlexBox',
+ package: '@opentiny/tiny-engine-builtin-component',
+ version: '^1.0.1',
+ destructuring: true
+ },
+ {
+ componentName: 'CanvasSection',
+ exportName: 'CanvasSection',
+ package: '@opentiny/tiny-engine-builtin-component',
+ version: '^1.0.1',
+ destructuring: true
}
]