Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

package.json

@@ -46,6 +46,7 @@
     "@vueuse/integrations": "^10.1.2",
     "ali-oss": "^6.17.1",
     "ant-design-vue": "^3.2.12",
+    "ckeditor5-line-height-latest": "^1.0.2",
     "clipboard": "^2.0.11",
     "co": "^4.6.0",
     "core-js": "^3.8.3",

src/modules/editor/components/CompUI/basicUI/Text/TextForm.tsx

@@ -1,28 +1,26 @@
 import { useEditor } from "@/modules/editor";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
-import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
-import { defineComponent } from "vue";
-import { any } from "vue-types";
-import { isEmpty } from "lodash";
-import { css } from "@linaria/core";
-import { bgColumns, layoutColumns } from "../../defines/createAttrsForm";
-import {
-  InputNumber,
-  Button,
-  Space,
-  Tooltip,
-  Select,
-  Input,
-} from "ant-design-vue";
 import {
+  AlignCenterOutlined,
+  AlignLeftOutlined,
+  AlignRightOutlined,
   BoldOutlined,
   ItalicOutlined,
-  UnderlineOutlined,
   StrikethroughOutlined,
-  AlignLeftOutlined,
-  AlignCenterOutlined,
-  AlignRightOutlined,
+  UnderlineOutlined,
 } from "@ant-design/icons-vue";
+import { css } from "@linaria/core";
+import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
+import {
+  Button,
+  InputNumber,
+  Select,
+  Tooltip
+} from "ant-design-vue";
+import { isEmpty } from "lodash";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+import { bgColumns, layoutColumns } from "../../defines/createAttrsForm";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 
 const StyleButtons = defineComponent({

src/modules/editor/components/CompUI/basicUI/Text/component.tsx

@@ -4,6 +4,7 @@ import { Bold, Italic } from "@ckeditor/ckeditor5-basic-styles";
 import { InlineEditor } from "@ckeditor/ckeditor5-editor-inline";
 import { Essentials } from "@ckeditor/ckeditor5-essentials";
 import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
+import LineHeight from "ckeditor5-line-height-latest/src/lineheight";
 import { Link } from "@ckeditor/ckeditor5-link";
 import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
 import { css } from "@linaria/core";
@@ -29,6 +30,7 @@ function GetConfig() {
     fontSizeOptions.push({ title: s + "", model: s + "px" });
   }
   const fontFamilyOptions = [
+    { title: "默认字体", model: "" },
     { title: "宋体", model: "宋体,Songti,STSong,serif" },
     { title: "黑体", model: "黑体,Heiti,STHeiti,sans-serif" },
     { title: "仿宋", model: "仿宋,FangSong,STFangsong,serif" },
@@ -47,6 +49,7 @@ function GetConfig() {
       FontSize,
       FontFamily,
       Alignment,
+      LineHeight,
     ],
     fontSize: {
       options: fontSizeOptions,
@@ -56,6 +59,9 @@ function GetConfig() {
       options: fontFamilyOptions,
       supportAllValues: true,
     },
+    lineHeight: {
+      options: [1, 1.5, 2, 2.5, 3],
+    },
     toolbar: {
       items: [
         // "undo",
@@ -63,7 +69,8 @@ function GetConfig() {
         // "|",
         "fontColor",
         "fontFamily",
-        "fontsize",
+        "fontSize",
+        "lineHeight",
         "bold",
         "italic",
         "|",
@@ -109,12 +116,17 @@ export const Component = defineComponent({
           }
         }}
       >
-      {
-          state.editableId ? <EditorComp compId={props.compId} key={state.editableId} onLost={()=>{
-            state.editableId = "";
-          }} /> 
-          : <div innerHTML={comp.value} class={readOnlyText} />
-      }
+        {state.editableId ? (
+          <EditorComp
+            compId={props.compId}
+            key={state.editableId}
+            onLost={() => {
+              state.editableId = "";
+            }}
+          />
+        ) : (
+          <div innerHTML={comp.value} class={readOnlyText} />
+        )}
       </View>
     );
   },
@@ -164,49 +176,54 @@ const EditorComp = defineComponent({
 
     const preHeight = ref<number>(0);
 
-    return ()=><ckeditor
-          class={textStyle}
-          ref={inputRef}
-          editor={InlineEditor}
-          onInput={(value: any) => {
-            if (editorInstance.value && comp.value !== value) {
-              actions.updateCompData(comp, "value", value);
-              nextTick(()=>{
-              
-                const h = helper.pxToDesignSize(inputRef.value?.$el.clientHeight);
-                const isChange = Math.abs(preHeight.value - h) > 1;
-                preHeight.value = h;
-                actions.updateCompDatas(comp, ["value", "layout.size.1"], [value, preHeight.value])
-                helper.extendStreamCard(store.currStreamCardId);
-                if (isChange) {
-                  console.log("changing=>", isChange);
-                   actions.selectObjs([]);
-                   setTimeout(() => {
-                      actions.selectObjs([props.compId]);
-                   }, 0);
-                }
-              })
-            }
-          }}
-          onReady={(editor: InlineEditor) => {
-            editorInstance.value = editor;
-            console.log("editor")
-            editor.setData(comp.value);
-            editor.focus();
-            const range = document.createRange();
-            range.selectNodeContents(inputRef.value.$el);
-            const  selection = window.getSelection();
-            selection?.removeAllRanges();
-            selection?.addRange(range);
-          }}
-          config={GetConfig()}
-        />
+    return () => (
+      <ckeditor
+        class={textStyle}
+        ref={inputRef}
+        editor={InlineEditor}
+        onInput={(value: any) => {
+          if (editorInstance.value && comp.value !== value) {
+            actions.updateCompData(comp, "value", value);
+            nextTick(() => {
+              const h = helper.pxToDesignSize(inputRef.value?.$el.clientHeight);
+              const isChange = Math.abs(preHeight.value - h) > 1;
+              preHeight.value = h;
+              actions.updateCompDatas(
+                comp,
+                ["value", "layout.size.1"],
+                [value, preHeight.value]
+              );
+              helper.extendStreamCard(store.currStreamCardId);
+              if (isChange) {
+                console.log("changing=>", isChange);
+                actions.selectObjs([]);
+                setTimeout(() => {
+                  actions.selectObjs([props.compId]);
+                }, 0);
+              }
+            });
+          }
+        }}
+        onReady={(editor: InlineEditor) => {
+          editorInstance.value = editor;
+          console.log("editor");
+          editor.setData(comp.value);
+          editor.focus();
+          const range = document.createRange();
+          range.selectNodeContents(inputRef.value.$el);
+          const selection = window.getSelection();
+          selection?.removeAllRanges();
+          selection?.addRange(range);
+        }}
+        config={GetConfig()}
+      />
+    );
   },
-})
+});
 
 const readOnlyText = css`
   pointer-events: none;
-`
+`;
 
 const textStyle = css`
   font-size: 12px;

src/modules/editor/components/CompUI/basicUI/Text/index.ts

@@ -10,7 +10,7 @@ export const options = {
 };
 
 export const { createComp, useCompData } = createCompHooks({
-  value: `<p style="text-align:center;"><span style="font-size:18px;">请输入内容</span></p>`,
+  value: `<p style="text-align:center;line-height:1.5;"><span style="font-size:18px;">请输入内容</span></p>`,
   layout: {
     size: [750, 60],
   },

src/typings/pro.d.ts

@@ -20,3 +20,4 @@ declare module "vue-dndrop" {
   export const Draggable: any;
   export const vueDndrop: any;
 }
+declare module "ckeditor5-line-height-latest/src/lineheight";

yarn.lock

@@ -3431,6 +3431,11 @@ ci-info@^1.5.0:
   resolved "http://124.70.149.18:4873/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
   integrity sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==
 
+ckeditor5-line-height-latest@^1.0.2:
+  version "1.0.2"
+  resolved "http://124.70.149.18:4873/ckeditor5-line-height-latest/-/ckeditor5-line-height-latest-1.0.2.tgz#f66131bc41d606fd33566363dad95d31066c10c8"
+  integrity sha512-VO2nPFH82XsI/pDsPUzT4G7QXnPF0JZhjx+4ZfNdn1tDOtuzBo++W5n1sh3CoroyqMeSs2VMsvCBM6jpAd9Mng==
+
 ckeditor5@^38.0.1:
   version "38.0.1"
   resolved "http://124.70.149.18:4873/ckeditor5/-/ckeditor5-38.0.1.tgz#ab50532c436e019f2e1fd95fde5f981d124d3f03"