From c79f647bc764783a7a65741fedfc15badc02fb07 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Tue, 29 Nov 2022 21:23:31 +0800 Subject: [PATCH] feat:optimize add content block --- src/components/dialog/Dialog.ts | 4 ++++ src/components/dialog/dialog.css | 9 +++++++ src/editor/assets/css/block/block.css | 1 + src/editor/core/command/CommandAdapt.ts | 4 +++- src/editor/utils/element.ts | 13 +++++++--- src/main.ts | 32 +++++++++++++++++++------ 6 files changed, 52 insertions(+), 11 deletions(-) diff --git a/src/components/dialog/Dialog.ts b/src/components/dialog/Dialog.ts index e2093b8..0586462 100644 --- a/src/components/dialog/Dialog.ts +++ b/src/components/dialog/Dialog.ts @@ -10,6 +10,7 @@ export interface IDialogData { placeholder?: string; width?: number; height?: number; + required?: boolean; } export interface IDialogConfirm { @@ -84,6 +85,9 @@ export class Dialog { const optionName = document.createElement('span') optionName.append(document.createTextNode(option.label)) optionItemContainer.append(optionName) + if (option.required) { + optionName.classList.add('dialog-option__item--require') + } } // 选项输入框 let optionInput: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement diff --git a/src/components/dialog/dialog.css b/src/components/dialog/dialog.css index 5f63203..10f5187 100644 --- a/src/components/dialog/dialog.css +++ b/src/components/dialog/dialog.css @@ -61,6 +61,7 @@ margin-right: 12px; font-size: 14px; color: #3d4757; + position: relative; } .dialog-option__item input, @@ -84,6 +85,14 @@ border-color: #4991f2; } +.dialog-option__item--require::before { + content: "*"; + color: #f56c6c; + margin-right: 4px; + position: absolute; + left: -8px; +} + .dialog-menu { display: flex; align-items: center; diff --git a/src/editor/assets/css/block/block.css b/src/editor/assets/css/block/block.css index 6f6e177..d889140 100644 --- a/src/editor/assets/css/block/block.css +++ b/src/editor/assets/css/block/block.css @@ -3,5 +3,6 @@ z-index: 0; overflow: hidden; border-radius: 8px; + background-color: #ffffff; border: 1px solid rgb(235 236 240); } \ No newline at end of file diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 122f729..3a9457f 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -430,7 +430,9 @@ export class CommandAdapt { trList } // 格式化element - formatElementList([element]) + formatElementList([element], { + editorOptions: this.options + }) const curIndex = startIndex + 1 if (startIndex === endIndex) { elementList.splice(curIndex, 0, element) diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts index 061a3ea..7352aab 100644 --- a/src/editor/utils/element.ts +++ b/src/editor/utils/element.ts @@ -9,10 +9,10 @@ import { ControlComponent, ControlType } from '../dataset/enum/Control' interface IFormatElementListOption { isHandleFirstElement?: boolean; - editorOptions?: Required; + editorOptions: Required; } -export function formatElementList(elementList: IElement[], options: IFormatElementListOption = {}) { +export function formatElementList(elementList: IElement[], options: IFormatElementListOption) { const { isHandleFirstElement, editorOptions } = { isHandleFirstElement: true, ...options @@ -237,9 +237,16 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme if (el.value === '\n') { el.value = ZERO } - if (el.type === ElementType.IMAGE || el.type === ElementType.BLOCK) { + if (el.type === ElementType.IMAGE) { el.id = getUUID() } + if (el.type === ElementType.BLOCK) { + el.id = getUUID() + if (!el.width) { + const { editorOptions: { width, margins } } = options + el.width = width - margins[1] - margins[3] + } + } if (el.type === ElementType.LATEX) { const { svg, width, height } = LaTexParticle.convertLaTextToSVG(el.value) el.width = el.width || width diff --git a/src/main.ts b/src/main.ts index f151db3..50727c9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -273,11 +273,13 @@ window.onload = function () { type: 'text', label: '文本', name: 'name', + required: true, placeholder: '请输入文本' }, { type: 'text', label: '链接', name: 'url', + required: true, placeholder: '请输入链接' }], onConfirm: (payload) => { @@ -340,16 +342,19 @@ window.onload = function () { type: 'text', label: '内容', name: 'data', + required: true, placeholder: '请输入内容' }, { type: 'color', label: '颜色', name: 'color', + required: true, value: '#AEB5C0' }, { type: 'number', label: '字体大小', name: 'size', + required: true, value: '120' }], onConfirm: (payload) => { @@ -435,6 +440,7 @@ window.onload = function () { type: 'text', label: '占位符', name: 'placeholder', + required: true, placeholder: '请输入占位符' }, { type: 'text', @@ -469,6 +475,7 @@ window.onload = function () { type: 'text', label: '占位符', name: 'placeholder', + required: true, placeholder: '请输入占位符' }, { type: 'text', @@ -479,6 +486,7 @@ window.onload = function () { type: 'textarea', label: '值集', name: 'valueSets', + required: true, height: 100, placeholder: `请输入值集JSON，例：\n[{\n"value":"有",\n"code":"98175"\n}]` }], @@ -514,6 +522,7 @@ window.onload = function () { type: 'textarea', label: '值集', name: 'valueSets', + required: true, height: 100, placeholder: `请输入值集JSON，例：\n[{\n"value":"有",\n"code":"98175"\n}]` }], @@ -622,6 +631,7 @@ window.onload = function () { label: '类型', name: 'type', value: 'iframe', + required: true, options: [{ label: '网址', value: 'iframe' @@ -633,17 +643,19 @@ window.onload = function () { type: 'number', label: '宽度', name: 'width', - placeholder: '请输入宽度' + placeholder: '请输入宽度（默认页面内宽度）' }, { type: 'number', - label: '宽度', + label: '高度', name: 'height', - placeholder: '请输入宽度' + required: true, + placeholder: '请输入高度' }, { type: 'textarea', label: '地址', height: 100, name: 'value', + required: true, placeholder: '请输入地址' }], onConfirm: (payload) => { @@ -652,7 +664,6 @@ window.onload = function () { const value = payload.find(p => p.name === 'value')?.value if (!value) return const width = payload.find(p => p.name === 'width')?.value - if (!width) return const height = payload.find(p => p.name === 'height')?.value if (!height) return const block: IBlock = { @@ -667,13 +678,16 @@ window.onload = function () { src: value } } - instance.command.executeInsertElementList([{ + const blockElement: IElement = { type: ElementType.BLOCK, value: '', - width: Number(width), height: Number(height), block - }]) + } + if (width) { + blockElement.width = Number(width) + } + instance.command.executeInsertElementList([blockElement]) } }) } @@ -798,24 +812,28 @@ window.onload = function () { type: 'text', label: '上边距', name: 'top', + required: true, value: `${topMargin}`, placeholder: '请输入上边距' }, { type: 'text', label: '下边距', name: 'bottom', + required: true, value: `${bottomMargin}`, placeholder: '请输入下边距' }, { type: 'text', label: '左边距', name: 'left', + required: true, value: `${leftMargin}`, placeholder: '请输入左边距' }, { type: 'text', label: '右边距', name: 'right', + required: true, value: `${rightMargin}`, placeholder: '请输入右边距' }],