Home Explore Help
Register Sign In
lianghj
/
queenshow
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

text

bianjiang 1 year ago
parent
c303006fde
commit
01e92f6acc
9 changed files with 218 additions and 38 deletions
Unified View Show Diff Stats
  1. 1 1
      package.json
  2. 44 25
      public/index.html
  3. 155 0
      src/modules/editor/components/CompUI/basicUI/Text/TextForm.tsx
  4. 1 1
      src/modules/editor/components/CompUI/basicUI/Text/component.tsx
  5. 3 1
      src/modules/editor/components/CompUI/basicUI/Text/component2.tsx
  6. 5 2
      src/modules/editor/components/CompUI/basicUI/Text/index.ts
  7. 4 4
      src/modules/editor/components/CompUI/defines/createAttrsForm.tsx
  8. 1 0
      src/styles/theme.less
  9. 4 4
      yarn.lock

+ 1 - 1
package.json
View File 

@@ -31,7 +31,7 @@
 
     "@queenjs-modules/queentree": "^0.0.10",
 
     "@queenjs-modules/queentree": "^0.0.10",
 
     "@queenjs-modules/queentree-explorer": "^0.0.6",
 
     "@queenjs-modules/queentree-explorer": "^0.0.6",
 
     "@queenjs-modules/queentree-explorer-viewer": "^0.0.3",
 
     "@queenjs-modules/queentree-explorer-viewer": "^0.0.3",
 
-    "@queenjs/components": "^0.0.15",
 
+    "@queenjs/components": "^0.0.19",
 
     "@queenjs/controllers": "^0.0.6",
 
     "@queenjs/controllers": "^0.0.6",
 
     "@queenjs/icons": "^0.0.20",
 
     "@queenjs/icons": "^0.0.20",
 
     "@queenjs/theme": "^0.0.8",
 
     "@queenjs/theme": "^0.0.8",

+ 44 - 25
public/index.html
View File 

@@ -1,29 +1,48 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="">
 
 <html lang="">
 
+  <head>
 
+    <meta charset="utf-8" />
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 
+    <title><%= htmlWebpackPlugin.options.title %></title>
 
+    <style type="text/css">
 
+      .footer_copy {
 
+        padding: 10px 0;
 
+        text-align: center;
 
+        color: #999;
 
+      }
 
 
 
-<head>
 
-  <meta charset="utf-8">
 
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-  <title>
 
-    <%= htmlWebpackPlugin.options.title %>
 
-  </title>
 
-  <script type="text/javascript">
 
-    var userAgent = navigator.userAgent;
 
-    if (/micromessenger/i.test(userAgent)) {
 
-      document.write('<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"><\/script>');
 
-    }
 
-  </script>
 
-</head>
 
+      .footer_copy a {
 
+        margin-right: 5px;
 
+        color: #fff;
 
+      }
 
+    </style>
 
+    <script type="text/javascript">
 
+      var userAgent = navigator.userAgent;
 
+      if (/micromessenger/i.test(userAgent)) {
 
+        document.write(
 
+          '<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"><\/script>'
 
+        );
 
+      }
 
+    </script>
 
+  </head>
 
 
 
-<body>
 
-  <noscript>
 
-    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
 
-        Please enable it to continue.</strong>
 
-  </noscript>
 
-  <div id="app"></div>
 
-  <!-- built files will be auto injected -->
 
-</body>
 
-
 
-</html>
 
+  <body>
 
+    <noscript>
 
+      <strong
 
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
 
+        properly without JavaScript enabled. Please enable it to
 
+        continue.</strong
 
+      >
 
+    </noscript>
 
+    <div id="app"></div>
 
+    <!-- built files will be auto injected -->
 
+    <div class="footer_copy">
 
+      <a href="https://beian.miit.gov.cn" target="_blank">
 
+        蜀ICP备18008991号-3
 
+      </a>
 
+      版权所有：3Dqueen
 
+    </div>
 
+  </body>
 
+</html>

+ 155 - 0
src/modules/editor/components/CompUI/basicUI/Text/TextForm.tsx
View File 

@@ -0,0 +1,155 @@
 
+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 {
 
+  BoldOutlined,
 
+  ItalicOutlined,
 
+  UnderlineOutlined,
 
+  StrikethroughOutlined,
 
+  AlignLeftOutlined,
 
+  AlignCenterOutlined,
 
+  AlignRightOutlined,
 
+} from "@ant-design/icons-vue";
 
+import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 
+
 
+const StyleButtons = defineComponent({
 
+  setup() {
 
+    return () => (
 
+      <div class={ButtonsStyle}>
 
+        <Tooltip title={"加粗"}>
 
+          <Button icon={<BoldOutlined />} class={"active"} type="text"></Button>
 
+        </Tooltip>
 
+        <Tooltip title={"斜体"}>
 
+          <Button icon={<ItalicOutlined />} type="text"></Button>
 
+        </Tooltip>
 
+        <Tooltip title={"下划线"}>
 
+          <Button icon={<UnderlineOutlined />} type="text"></Button>
 
+        </Tooltip>
 
+        <Tooltip title={"删除线"}>
 
+          <Button icon={<StrikethroughOutlined />} type="text"></Button>
 
+        </Tooltip>
 
+        <Tooltip title={"左对齐"}>
 
+          <Button icon={<AlignLeftOutlined />} type="text"></Button>
 
+        </Tooltip>
 
+        <Tooltip title={"居中对齐"}>
 
+          <Button icon={<AlignCenterOutlined />} type="text"></Button>
 
+        </Tooltip>
 
+        <Tooltip title={"右对齐"}>
 
+          <Button icon={<AlignRightOutlined />} type="text"></Button>
 
+        </Tooltip>
 
+      </div>
 
+    );
 
+  },
 
+});
 
+
 
+const TextColumns: ColumnItem[] = [
 
+  {
 
+    label: "字体",
 
+    dataIndex: "fontFamily",
 
+    component: Select,
 
+    props: {
 
+      class: "w-full",
 
+      options: [{ label: "默认字体", value: "" }]
 
+        .concat
 
+        // Object.entries(compMasks).map(([key, value]) => {
 
+        //   return {
 
+        //     label: value.name,
 
+        //     value: key,
 
+        //   };
 
+        // })
 
+        (),
 
+    },
 
+  },
 
+  {
 
+    label: "字号",
 
+    dataIndex: "fontSize",
 
+    component: InputNumber,
 
+    props: {
 
+      class: "w-full",
 
+      min: 12,
 
+      max: 99,
 
+    },
 
+  },
 
+  {
 
+    label: "颜色",
 
+    dataIndex: "color",
 
+    ...createColorOpts(),
 
+  },
 
+  {
 
+    label: "",
 
+    dataIndex: "style",
 
+    component: StyleButtons,
 
+  },
 
+];
 
+
 
+export const TextForm = defineComponent({
 
+  props: {
 
+    component: any<DesignComp>().isRequired,
 
+  },
 
+  setup(props) {
 
+    const { actions } = useEditor();
 
+    function changeVal(e: { dataIndex: string; value: any }) {
 
+      actions.updateCompData(props.component, e.dataIndex, e.value);
 
+    }
 
+    return () => {
 
+      const { component } = props;
 
+      return (
 
+        <div>
 
+          <FormUI
 
+            columns={TextColumns}
 
+            data={{}}
 
+            onChange={(v) => {
 
+              console.log(v);
 
+            }}
 
+          />
 
+          <div>布局</div>
 
+          <div>
 
+            <FormUI
 
+              data={component}
 
+              columns={layoutColumns}
 
+              onChange={changeVal}
 
+            />
 
+            {!isEmpty(component?.layout?.background) ? (
 
+              <>
 
+                <div>背景</div>
 
+                <FormUI
 
+                  data={component}
 
+                  columns={bgColumns}
 
+                  onChange={changeVal}
 
+                />
 
+              </>
 
+            ) : null}
 
+          </div>
 
+        </div>
 
+      );
 
+    };
 
+  },
 
+});
 
+const ButtonsStyle = css`
 
+  width: 100%;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: space-between;
 
+  background-color: @inf-form-bg;
 
+  border-radius: 2px;
 
+  .ant-btn {
 
+    flex: 1;
 
+    &.active {
 
+      color: @inf-primary-color;
 
+    }
 
+  }
 
+`;
 
+const FormStyle = css``;

+ 1 - 1
src/modules/editor/components/CompUI/basicUI/Text/component.tsx
View File 

@@ -33,7 +33,7 @@ export const Component = defineComponent({
 
         Alignment,
 
         Alignment,
 
       ],
 
       ],
 
       fontSize: {
 
       fontSize: {
 
-        options: [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60],
 
+        options: [12, 14, 16, 18, 20, 24, 28, 32, 38, "2rem", 46, 52, 60],
 
       },
 
       },
 
       toolbar: {
 
       toolbar: {
 
         items: [
 
         items: [

+ 3 - 1
src/modules/editor/components/CompUI/basicUI/Text/component2.tsx
View File 

@@ -68,6 +68,7 @@ export const Component = defineComponent({
 
       if (!dom) return;
 
       if (!dom) return;
 
       editorInstance = await InlineEditor.create(dom as any, config);
 
       editorInstance = await InlineEditor.create(dom as any, config);
 
       editorInstance.setData(comp.value);
 
       editorInstance.setData(comp.value);
 
+      console.log(comp);
 
       if (store.isPreview) {
 
       if (store.isPreview) {
 
         editorInstance.enableReadOnlyMode("editor");
 
         editorInstance.enableReadOnlyMode("editor");
 
       }
 
       }
 
@@ -107,7 +108,8 @@ export const Component = defineComponent({
 
 });
 
 });
 
 
 
 const textStyle = css`
 
 const textStyle = css`
 
-  font-size: 12px;
 
+  height: 100%;
 
+  font-size: 16px;
 
   color: #666;
 
   color: #666;
 
   p {
 
   p {
 
     margin: 0;
 
     margin: 0;

+ 5 - 2
src/modules/editor/components/CompUI/basicUI/Text/index.ts
View File 

@@ -1,6 +1,7 @@
 
 import { createAttrsForm } from "../../defines/createAttrsForm";
 
 import { createAttrsForm } from "../../defines/createAttrsForm";
 
 import { createCompHooks } from "../../defines/createCompHooks";
 
 import { createCompHooks } from "../../defines/createCompHooks";
 
 import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
 
 import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
 
+// import { TextForm } from "./TextForm";
 
 export { Component } from "./component";
 
 export { Component } from "./component";
 
 
 
 export const options = {
 
 export const options = {
 
@@ -11,10 +12,12 @@ export const options = {
 
 export const { createComp, useCompData } = createCompHooks({
 
 export const { createComp, useCompData } = createCompHooks({
 
   value: "<p>请输入内容</p>",
 
   value: "<p>请输入内容</p>",
 
   layout: {
 
   layout: {
 
-    size: [750, 60]
 
-  }
 
+    size: [750, 60],
 
+  },
 
 });
 
 });
 
 
 
+// export const Form = TextForm;
 
+
 
 export const Form = createAttrsForm([
 
 export const Form = createAttrsForm([
 
   {
 
   {
 
     label: "文本",
 
     label: "文本",

+ 4 - 4
src/modules/editor/components/CompUI/defines/createAttrsForm.tsx
View File 

@@ -2,14 +2,14 @@ import { useEditor } from "@/modules/editor";
 
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 
 import { compMasks } from "@/modules/editor/objects/DesignTemp/creates/CompMasks";
 
 import { compMasks } from "@/modules/editor/objects/DesignTemp/creates/CompMasks";
 
 import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
 
 import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
 
-import { InputNumber, Select } from "ant-design-vue";
 
+import { InputNumber, Select, Input } from "ant-design-vue";
 
 import { isEmpty } from "lodash";
 
 import { isEmpty } from "lodash";
 
 import { defineComponent } from "vue";
 
 import { defineComponent } from "vue";
 
 import { any } from "vue-types";
 
 import { any } from "vue-types";
 
 import { GroupNumber } from "../formItems/GroupNumber";
 
 import { GroupNumber } from "../formItems/GroupNumber";
 
 import { createColorOpts } from "./formOpts/createColorOpts";
 
 import { createColorOpts } from "./formOpts/createColorOpts";
 
 
 
-const layoutColumns: ColumnItem[] = [
 
+export const layoutColumns: ColumnItem[] = [
 
   {
 
   {
 
     label: "尺寸",
 
     label: "尺寸",
 
     dataIndex: "layout.size",
 
     dataIndex: "layout.size",
 
@@ -44,7 +44,7 @@ const layoutColumns: ColumnItem[] = [
 
   {
 
   {
 
     label: "偏移矩阵",
 
     label: "偏移矩阵",
 
     dataIndex: "layout.transformMatrix",
 
     dataIndex: "layout.transformMatrix",
 
-    component: "Input",
 
+    component: Input,
 
   },
 
   },
 
   // {
 
   // {
 
   //   label: "上下偏移",
 
   //   label: "上下偏移",
 
@@ -83,7 +83,7 @@ const layoutColumns: ColumnItem[] = [
 
   },
 
   },
 
 ];
 
 ];
 
 
 
-const bgColumns: ColumnItem[] = [
 
+export const bgColumns: ColumnItem[] = [
 
   {
 
   {
 
     label: "背景颜色",
 
     label: "背景颜色",
 
     dataIndex: "layout.background.color",
 
     dataIndex: "layout.background.color",

+ 1 - 0
src/styles/theme.less
View File 

@@ -28,4 +28,5 @@
 
 @inf-primary-hover-bg: darken(@inf-primary-bg, 10%);
 
 @inf-primary-hover-bg: darken(@inf-primary-bg, 10%);
 
 
 
 @inf-header-height: 72px;
 
 @inf-header-height: 72px;
 
+@inf-form-bg: #383838;
 
 @inf-input-padding-inline: 0;
 
 @inf-input-padding-inline: 0;

+ 4 - 4
yarn.lock
View File 

@@ -1763,10 +1763,10 @@
 
   resolved "http://124.70.149.18:4873/@queenjs-modules%2fqueentree/-/queentree-0.0.10.tgz#f6344ab32ba0163a3b8cf4f4b9fe6641aef2bea7"
 
   resolved "http://124.70.149.18:4873/@queenjs-modules%2fqueentree/-/queentree-0.0.10.tgz#f6344ab32ba0163a3b8cf4f4b9fe6641aef2bea7"
 
   integrity sha512-P4cIjXKgcvd8h3vVs4f1rGLNf3/Kd5G+qGiZN+idkLjiu22HU6SNmOVLUwV6PuKg+9sTPRn7FKamSHuFxXWX5g==
 
   integrity sha512-P4cIjXKgcvd8h3vVs4f1rGLNf3/Kd5G+qGiZN+idkLjiu22HU6SNmOVLUwV6PuKg+9sTPRn7FKamSHuFxXWX5g==
 
 
 
-"@queenjs/components@^0.0.15":
 
-  version "0.0.15"
 
-  resolved "http://124.70.149.18:4873/@queenjs%2fcomponents/-/components-0.0.15.tgz#5dcb42d8615ab2d64441e3ecb0c0d097d7361669"
 
-  integrity sha512-c6yqk7NxIMrrE5ULX8d7iubBJoUKYlDGvCjfmPGSQV6i8UZJHzcnauH2BIsm5ASO5XeTuFxsuRCuXq8AKA0gpQ==
 
+"@queenjs/components@^0.0.19":
 
+  version "0.0.19"
 
+  resolved "http://124.70.149.18:4873/@queenjs%2fcomponents/-/components-0.0.19.tgz#b3a0a91cf24fd2b46610c338ab1f0d68e0e6af60"
 
+  integrity sha512-XEuCLkyy9o2CFZu1nPf+9ND/m+1D+ib6zn8oSfKtwcB1rvz/lL6e/iqSqdZnUZ6ia2GAI0gRKcA0/3FRYJDL6g==
 
   dependencies:
 
   dependencies:
 
     "@queenjs/utils" "^0.0.1"
 
     "@queenjs/utils" "^0.0.1"