feat:add content block menu

index.html

@@ -188,6 +188,9 @@
             </ul>
           </div>
         </div>
+        <div class="menu-item__block" title="内容块">
+          <i></i>
+        </div>
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">

src/assets/images/block.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="#3D4757"><path d="M8.923 11v1h-2A2 2 0 015 10.55c.328-.15.638-.335.923-.55a1 1 0 001 1h2zm0-6h-2a1 1 0 00-1 1A4.997 4.997 0 005 5.45 2 2 0 016.923 4h2v1z"/><path d="M4 10a2 2 0 100-4 2 2 0 000 4zm0 1a3 3 0 110-6 3 3 0 010 6zm6-9a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1V3a1 1 0 00-1-1h-3zm0-1h3a2 2 0 012 2v3a2 2 0 01-2 2h-3a2 2 0 01-2-2V3a2 2 0 012-2zm0 10a1 1 0 00-1 1v1a1 1 0 001 1h3a1 1 0 001-1v-1a1 1 0 00-1-1h-3zm0-1h3a2 2 0 012 2v1a2 2 0 01-2 2h-3a2 2 0 01-2-2v-1a2 2 0 012-2z"/></g></svg>

src/main.ts

@@ -1,7 +1,7 @@
 import { data, options } from './mock'
 import './style.css'
 import prism from 'prismjs'
-import Editor, { Command, ControlType, EditorMode, ElementType, IElement, KeyMap, PageMode } from './editor'
+import Editor, { BlockType, Command, ControlType, EditorMode, ElementType, IElement, KeyMap, PageMode } from './editor'
 import { Dialog } from './components/dialog/Dialog'
 import { formatPrismToken } from './utils/prism'
 import { Signature } from './components/signature/Signature'
@@ -612,6 +612,51 @@ window.onload = function () {
     }])
   }
 
+  const blockDom = document.querySelector<HTMLDivElement>('.menu-item__block')!
+  blockDom.onclick = function () {
+    console.log('block')
+    new Dialog({
+      title: '内容块',
+      data: [{
+        type: 'number',
+        label: '宽度',
+        name: 'width',
+        placeholder: '请输入宽度'
+      }, {
+        type: 'number',
+        label: '宽度',
+        name: 'height',
+        placeholder: '请输入宽度'
+      }, {
+        type: 'textarea',
+        label: '地址',
+        height: 100,
+        name: 'value',
+        placeholder: '请输入地址'
+      }],
+      onConfirm: (payload) => {
+        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
+        instance.command.executeInsertElementList([{
+          type: ElementType.BLOCK,
+          value: '',
+          width: Number(width),
+          height: Number(height),
+          block: {
+            type: BlockType.IFRAME,
+            iframeBlock: {
+              src: value
+            }
+          }
+        }])
+      }
+    })
+  }
+
   // 5. | 搜索&替换 | 打印 |
   const searchCollapseDom = document.querySelector<HTMLDivElement>('.menu-item__search__collapse')!
   const searchInputDom = document.querySelector<HTMLInputElement>('.menu-item__search__collapse__search input')!

src/mock.ts

@@ -1,4 +1,4 @@
-import { BlockType, ControlType, ElementType, IEditorOption, IElement, RowFlex } from './editor'
+import { ControlType, ElementType, IEditorOption, IElement, RowFlex } from './editor'
 
 const text = `人民医院门诊病历\n主诉：\n发热三天，咳嗽五天。\n现病史：\n患者于三天前无明显诱因，感冒后发现面部水肿，无皮疹，尿量减少，出现乏力，在外治疗无好转，现来我院就诊。\n既往史：\n有糖尿病10年，有高血压2年，有传染性疾病1年。报告其他既往疾病。\n流行病史：\n否认14天内接触过确诊患者、疑似患者、无症状感染者及其密切接触者；否认14天内去过以下场所：水产、肉类批发市场，农贸市场，集市，大型超市，夜市；否认14天内与以下场所工作人员密切接触：水产、肉类批发市场，农贸市场，集市，大型超市；否认14天内周围（如家庭、办公室）有2例以上聚集性发病；否认14天内接触过有发热或呼吸道症状的人员；否认14天内自身有发热或呼吸道症状；否认14天内接触过纳入隔离观察的人员及其他可能与新冠肺炎关联的情形；陪同家属无以上情况。\n体格检查：\nT：39.5℃，P：80bpm，R：20次/分，BP：120/80mmHg；\n辅助检查：\n2020年6月10日，普放：血细胞比容36.50%（偏低）40～50；单核细胞绝对值0.75*10/L（偏高）参考值：0.1～0.6；\n门诊诊断：\n1.高血压\n2.糖尿病\n3.病毒性感冒\n4.过敏性鼻炎\n5.过敏性鼻息肉\n处置治疗：\n1.超声引导下甲状腺细针穿刺术；\n2.乙型肝炎表面抗体测定；\n3.膜式病变细胞采集术、后颈皮下肤层；\n电子签名：【】\n其他记录：`
 
@@ -289,20 +289,6 @@ elementList.push(...<IElement[]>[{
     value: `2022-08-10 17:30:01`
   }],
   type: ElementType.DATE
-}])
-
-// 内容快
-elementList.push(...<IElement[]>[{
-  value: '',
-  type: ElementType.BLOCK,
-  width: 520,
-  height: 400,
-  block: {
-    type: BlockType.IFRAME,
-    iframeBlock: {
-      src: 'https://hufe.club'
-    }
-  }
 }, {
   value: '\n'
 }])

src/style.css

@@ -463,6 +463,10 @@ ul {
   width: 150px;
 }
 
+.menu-item__block i {
+  background-image: url('./assets/images/block.svg');
+}
+
 .menu-item .menu-item__control .options {
   width: 55px;
 }