From 3543e3983ed53541e2a6428af46525fcdf1c3d8d Mon Sep 17 00:00:00 2001
From: Hufe921 <huangyunfeihufe@hotmail.com>
Date: Sun, 27 Nov 2022 21:01:22 +0800
Subject: [PATCH] feat:add content block menu

---
 index.html                  |  3 +++
 src/assets/images/block.svg |  1 +
 src/main.ts                 | 47 ++++++++++++++++++++++++++++++++++++-
 src/mock.ts                 | 16 +------------
 src/style.css               |  4 ++++
 5 files changed, 55 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/images/block.svg

diff --git a/index.html b/index.html
index fc8d3cb..ea30d9b 100644
--- a/index.html
+++ b/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">
diff --git a/src/assets/images/block.svg b/src/assets/images/block.svg
new file mode 100644
index 0000000..38b1704
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 380a73f..8ef14cb 100644
--- a/src/main.ts
+++ b/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')!
diff --git a/src/mock.ts b/src/mock.ts
index d3d0bcc..0924fcc 100644
--- a/src/mock.ts
+++ b/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'
 }])
diff --git a/src/style.css b/src/style.css
index d9a9507..f2f3520 100644
--- a/src/style.css
+++ b/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;
 }