Skip to content

Commit d71b62a

Browse files
committed
fix(app-preview-importMap): fix importmap missing element-plus when app preview
1 parent 7623de4 commit d71b62a

14 files changed

Lines changed: 794 additions & 781 deletions

File tree

designer-demo/public/mock/bundle.json

Lines changed: 637 additions & 0 deletions
Large diffs are not rendered by default.

mockServer/src/mock/get/app-center/v1/apps/schema/1.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2057,6 +2057,27 @@
20572057
"destructuring": true,
20582058
"version": "2.4.2"
20592059
},
2060+
{
2061+
"componentName": "TinyHuichartsLine",
2062+
"package": "@opentiny/vue-huicharts",
2063+
"exportName": "TinyHuichartsLine",
2064+
"destructuring": true,
2065+
"version": "3.22.0"
2066+
},
2067+
{
2068+
"componentName": "TinyHuichartsHistogram",
2069+
"package": "@opentiny/vue-huicharts",
2070+
"exportName": "TinyHuichartsHistogram",
2071+
"destructuring": true,
2072+
"version": "3.22.0"
2073+
},
2074+
{
2075+
"componentName": "TinyHuichartsPie",
2076+
"package": "@opentiny/vue-huicharts",
2077+
"exportName": "TinyHuichartsPie",
2078+
"destructuring": true,
2079+
"version": "3.22.0"
2080+
},
20602081
{
20612082
"componentName": "PortalHome",
20622083
"main": "common/components/home",

packages/canvas/DesignCanvas/src/DesignCanvas.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,9 @@ export default {
8787
footData.value = useCanvas().getNodePath(node?.id)
8888
pageState.currentSchema = {}
8989
pageState.properties = null
90+
// 删除节点后,重置pageState中组件的属性
91+
// 后续需要改造
92+
useProperties().getProps(null, null)
9093
}
9194
9295
const isBlock = useCanvas().isBlock
@@ -106,9 +109,9 @@ export default {
106109
empty: () => '应用下暂无页面,需新建页面后体验画布功能',
107110
release: (type) => `当前${componentType[type]}未锁定,点击右上角 “锁定” 图标后编辑${componentType[type]}`,
108111
lock: (type) =>
109-
`当前${componentType[type]}${pageInfo?.username || ''} 锁定,如需编辑请先联系他解锁文件,然后再锁定该${
112+
`当前${componentType[type]}${pageInfo?.username || ''} 锁定,您可以创建新页面,如需编辑请先联系他解锁${
110113
componentType[type]
111-
}后编辑!`
114+
},然后再锁定该${componentType[type]}后编辑!`
112115
}
113116
114117
const renderMsg = message[pageStatus.state](pageSchema.componentName)

packages/canvas/container/src/components/CanvasAction.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,12 @@ export default {
251251
}
252252
253253
const hide = () => {
254-
getRenderer().setCondition(getCurrent().schema?.id, false)
254+
if (getCurrent().schema?.id) {
255+
const { clearSelect } = useCanvas().canvasApi.value
256+
getRenderer().setCondition(getCurrent().schema.id, false)
257+
useCanvas().pageState.nodesStatus[getCurrent().schema.id] = false
258+
clearSelect()
259+
}
255260
updateRect()
256261
}
257262

packages/canvas/container/src/container.ts

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -466,6 +466,34 @@ const setSelectRect = (
466466
)
467467
}
468468

469+
const getElementDurationTime = (elementId?: string) => {
470+
const element = elementId ? querySelectById(elementId) : getDocument().body
471+
const transitionDuration = window.getComputedStyle(element).getPropertyValue('transition-duration')
472+
const transitionDelay = window.getComputedStyle(element).getPropertyValue('transition-delay')
473+
let delayTime = 0
474+
const getMaxMillisecondNumber = (arr: string[]) => {
475+
const millisecondNumber = arr.map((item) => {
476+
if (item.endsWith('ms')) {
477+
return parseFloat(item)
478+
} else {
479+
return parseFloat(item) * 1000
480+
}
481+
})
482+
return millisecondNumber.length ? Math.max(...millisecondNumber) : 0
483+
}
484+
if (transitionDuration) {
485+
const transitionDurations = transitionDuration.split(',')
486+
delayTime += getMaxMillisecondNumber(transitionDurations)
487+
}
488+
489+
if (transitionDelay) {
490+
const transitionDelays = transitionDelay.split(',')
491+
delayTime += getMaxMillisecondNumber(transitionDelays)
492+
}
493+
494+
return delayTime
495+
}
496+
469497
export const updateRect = (id?: string) => {
470498
id = (typeof id === 'string' && id) || getCurrent().schema?.id
471499
clearHover()
@@ -481,7 +509,9 @@ export const updateRect = (id?: string) => {
481509
const isBodySelected = !selectState.componentName && selectState.width > 0
482510

483511
if (id || isBodySelected) {
484-
setTimeout(() => setSelectRect(id))
512+
// 获取元素动画持续时间
513+
const waitTime = getElementDurationTime(id)
514+
setTimeout(() => setSelectRect(id), waitTime)
485515
} else {
486516
clearSelect()
487517
}
@@ -816,7 +846,6 @@ export const dragMove = (event: DragEvent, isHover: boolean) => {
816846
// type == clickTree, 为点击大纲; type == loop-id=xxx ,为点击循环数据
817847
export const selectNode = async (id: string, type?: string, isMultiple = false) => {
818848
const { node } = useCanvas().getNodeWithParentById(id) || {}
819-
820849
let element = querySelectById(id)
821850

822851
if (element && node) {
@@ -825,7 +854,6 @@ export const selectNode = async (id: string, type?: string, isMultiple = false)
825854
}
826855

827856
const nodeIsSelected = setSelectRect(id, element, { isMultiple, type, schema: node })
828-
829857
// 执行setSelectRect之后再去判断multiSelectedStates的长度
830858
if (multiSelectedStates.value.length === 1) {
831859
const { schema: node, parent, type } = multiSelectedStates.value[0]
@@ -851,6 +879,7 @@ export const selectNode = async (id: string, type?: string, isMultiple = false)
851879
if (multiSelectedStates.value.length === 1) {
852880
const { schema: node, parent, type, id } = multiSelectedStates.value[0]
853881
canvasState.emit('selected', node, parent, type, id)
882+
854883
return node
855884
} else {
856885
canvasState.emit('selected')

packages/common/component/toolbar-built-in/ToolbarBaseIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<tiny-popover
33
:trigger="trigger"
4-
:open-delay="1000"
4+
:open-delay="500"
55
popper-class="toolbar-right-popover"
66
append-to-body
77
:content="content"

packages/common/js/import-map.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@opentiny/vue-common": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.20${fileDelimiter}/dist3/tiny-vue-common.mjs",
1818
"@opentiny/vue-locale": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.20${fileDelimiter}/dist3/tiny-vue-locale.mjs",
1919
"@opentiny/vue-renderless/": "${VITE_CDN_DOMAIN}/@opentiny/vue-renderless${versionDelimiter}~3.20${fileDelimiter}/",
20+
"@opentiny/vue-huicharts": "${VITE_CDN_DOMAIN}/@opentiny/vue-runtime${versionDelimiter}~3.22${fileDelimiter}/dist3/tiny-vue-huicharts.mjs",
2021
"echarts": "${VITE_CDN_DOMAIN}/echarts${versionDelimiter}5.4.1${fileDelimiter}/dist/echarts.esm.js",
2122
"@tailwindcss/browser": "${VITE_CDN_DOMAIN}/@tailwindcss/browser${versionDelimiter}^4${fileDelimiter}/dist/index.global.js"
2223
},

packages/configurator/src/html-attributes-configurator/HtmlAttributesConfigurator.vue

Lines changed: 47 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="attr-header">
3-
<span class="header-title">自定义属性</span>
3+
<span class="header-title">原生属性</span>
44
<tiny-popover
55
v-model="state.visible"
66
placement="bottom"
@@ -11,11 +11,18 @@
1111
>
1212
<div class="attr-form">
1313
<icon-close class="icon-close" @click="closePopover"></icon-close>
14-
<tiny-form label-position="left" label-width="53px">
15-
<tiny-form-item label="name">
14+
<tiny-form
15+
ref="attrFormRef"
16+
:model="state.formData"
17+
:rules="rules"
18+
validate-type="text"
19+
label-position="left"
20+
label-width="53px"
21+
>
22+
<tiny-form-item label="name" prop="key">
1623
<tiny-input v-model="state.formData.key"></tiny-input>
1724
</tiny-form-item>
18-
<tiny-form-item label="value">
25+
<tiny-form-item label="value" prop="value">
1926
<tiny-input v-model="state.formData.value"></tiny-input>
2027
</tiny-form-item>
2128
<div class="footer">
@@ -81,9 +88,18 @@ export default {
8188
currentAttr: {}
8289
})
8390
91+
const attrFormRef = ref()
8492
const attrs = ref([])
8593
const properties = ['style']
8694
95+
const rules = {
96+
key: [
97+
{ required: true, message: '名称必填', trigger: 'blur' },
98+
{ max: 20, message: '长度不大于20', trigger: 'change' }
99+
],
100+
value: [{ max: 200, message: '长度不大于200', trigger: 'change' }]
101+
}
102+
87103
watchEffect(() => {
88104
if (!useProperties().getSchema()?.props) {
89105
return
@@ -144,24 +160,29 @@ export default {
144160
}
145161
146162
const save = () => {
147-
state.visible = false
148-
const data = {}
149-
let index = -1
163+
attrFormRef.value.validate((valid) => {
164+
if (!valid) {
165+
return
166+
}
167+
state.visible = false
168+
const data = {}
169+
let index = -1
150170
151-
if (state.currentAttr.id) {
152-
index = attrs.value.findIndex((item) => item.id === state.currentAttr.id)
153-
data.id = state.currentAttr.id
154-
state.currentAttr = {}
155-
} else {
156-
data.id = utils.guid()
157-
index = attrs.value.length
158-
}
171+
if (state.currentAttr.id) {
172+
index = attrs.value.findIndex((item) => item.id === state.currentAttr.id)
173+
data.id = state.currentAttr.id
174+
state.currentAttr = {}
175+
} else {
176+
data.id = utils.guid()
177+
index = attrs.value.length
178+
}
159179
160-
data.text = `${state.formData.key} = '${state.formData.value}'`
161-
data.data = { key: state.formData.key, value: state.formData.value }
180+
data.text = `${state.formData.key} = '${state.formData.value}'`
181+
data.data = { key: state.formData.key, value: state.formData.value }
162182
163-
attrs.value.splice(index, 1, data)
164-
updateSchema()
183+
attrs.value.splice(index, 1, data)
184+
updateSchema()
185+
})
165186
}
166187
167188
const edit = (attr) => {
@@ -187,7 +208,9 @@ export default {
187208
}
188209
189210
return {
211+
attrFormRef,
190212
state,
213+
rules,
191214
cancel,
192215
save,
193216
attrs,
@@ -248,6 +271,11 @@ export default {
248271
display: grid;
249272
grid-template-columns: 3fr auto;
250273
274+
.item-content {
275+
word-wrap: break-word;
276+
white-space: normal;
277+
word-break: break-all;
278+
}
251279
.item-controller {
252280
display: grid;
253281
column-gap: 3px;

packages/configurator/src/slot-configurator/SlotConfigurator.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export default {
186186
.e__switch-core::after {
187187
content: '';
188188
position: absolute;
189-
top: 1px;
189+
top: 2px;
190190
left: 1px;
191191
border-radius: 100%;
192192
transition: all 0.3s;

0 commit comments

Comments
 (0)