update

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -11,7 +11,7 @@ export const View = defineComponent({
     layout: any<Layout>(),
   },
   setup(props, { slots }) {
-    const { store, actions } = useEditor();
+    const { store, actions, helper } = useEditor();
     const viewRef = ref<HTMLElement>();
     const state = reactive({
       compId: "",
@@ -20,16 +20,47 @@ export const View = defineComponent({
       const compEl = viewRef.value;
       state.compId = compEl?.getAttribute("data-id") || "";
     });
+
+    function createStyle(): any {
+      const style: any = {};
+      const { textAlign, offsetY, zIndex } = props.layout || {};
+      if (textAlign) {
+        style.textAlign = textAlign;
+      }
+      if (offsetY) {
+        style[`margin` + ((offsetY as number) > 0 ? "Top" : "Bottom")] =
+          helper.designToNaturalSize(Math.abs(offsetY as number) * -1);
+      }
+      if (zIndex) {
+        style["zIndex"] = zIndex;
+      }
+      return style;
+    }
+
+    function createContentStyle() {
+      const style: any = {};
+      const { background, layout } = props;
+      const [w, h] = (layout?.size as number[]) || [];
+      if (background?.image) {
+        style["backgroundImage"] = `url(${background.image})`;
+      } else if (background?.color) {
+        style["backgroundColor"] = background.color;
+      }
+      if (w) style["width"] = helper.designToNaturalSize(w);
+      if (h) style["height"] = helper.designToNaturalSize(h);
+      if (layout?.offsetX) {
+        style["marginLeft"] = helper.designToNaturalSize(
+          layout.offsetX as number
+        );
+      }
+
+      return style;
+    }
+
     return () => {
       const isComp = state.compId;
       const isSelected = store.isEditMode && store.currCompId === state.compId;
 
-      const styleObj: any = {};
-      if (props.background?.image) {
-        styleObj["backgroundImage"] = `url(${props.background.image})`;
-      } else if (props.background?.color) {
-        styleObj["backgroundColor"] = props.background.color;
-      }
       const bgOpts = Object.values(omit(props.background, ["image", "color"]));
       const bgClasses = bgOpts.length ? `bg-${bgOpts.join(" bg-")}` : "";
 
@@ -41,7 +72,7 @@ export const View = defineComponent({
             store.isEditMode && isSelected && "view_selected",
             bgClasses,
           ]}
-          style={styleObj}
+          style={createStyle()}
           onClick={
             state.compId
               ? () => {
@@ -51,7 +82,9 @@ export const View = defineComponent({
               : undefined
           }
         >
-          {slots.default?.()}
+          <div class={viewContainerStyle} style={createContentStyle()}>
+            {slots.default?.()}
+          </div>
         </div>
       );
     };
@@ -88,3 +121,9 @@ const viewStyle = css`
     position: relative;
   }
 `;
+
+const viewContainerStyle = css`
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+`;

src/modules/editor/components/CompUI/customUI/CardDemo/options.ts

@@ -1,12 +1,13 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createOptions } from "../../defines/createOptions";
+import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 
 export const options = createOptions({
   name: "卡片",
   value: {
     cardColumns: 3,
-    themeColor: "#333",
+    themeColor: "#333333",
     list: Array.from({ length: 3 }, (d, i) => ({
       name: `demo${i + 1}`,
       desc: "xxxxx",
@@ -15,7 +16,7 @@ export const options = createOptions({
     title: "新科技反光面料 引领潮流新风尚",
     desc: "时尚 ｜ 精致 ｜ 百搭",
   },
-  background: { color: "#333" },
+  background: { color: "#333333" },
 });
 
 export const Form = createAttrsForm([
@@ -27,7 +28,7 @@ export const Form = createAttrsForm([
   {
     label: "主题颜色",
     dataIndex: "value.themeColor",
-    getValue: () => [1, 0, 0],
     component: "ColorPicker",
+    ...createColorOpts(),
   },
 ]);

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -3,27 +3,58 @@ import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
 import { set } from "lodash";
 import { defineComponent } from "vue";
 import { any } from "vue-types";
+import { GroupNumber } from "../formItems/GroupNumber";
+import { InputNumber } from "ant-design-vue";
 
 const layoutColumns: ColumnItem[] = [
   {
-    label: "宽度",
-    dataIndex: "layout.width",
-    component: "Input",
+    label: "尺寸",
+    dataIndex: "layout.size",
+    component: GroupNumber,
+    props: {
+      labels: ["宽度", "高度"],
+    },
+  },
+  {
+    label: "对齐",
+    dataIndex: "layout.textAlign",
+    component: "Select",
+    props: {
+      options: [
+        { label: "左对齐", value: "left" },
+        { label: "居中", value: "center" },
+        { label: "右对齐", value: "right" },
+      ],
+    },
   },
   {
-    label: "高度",
-    dataIndex: "layout.height",
-    component: "Input",
+    label: "左右偏移",
+    dataIndex: "layout.offsetX",
+    component: "Slider",
+    props: {
+      min: -375,
+      max: 375,
+    },
+    getValue: (v) => v || 0,
   },
   {
-    label: "外边距",
-    dataIndex: "layout.margin",
-    component: "Input",
+    label: "上下偏移",
+    dataIndex: "layout.offsetY",
+    component: "Slider",
+    props: {
+      min: -375,
+      max: 375,
+    },
+    getValue: (v) => v || 0,
   },
   {
-    label: "内边距",
-    dataIndex: "layout.padding",
-    component: "Input",
+    label: "层级",
+    dataIndex: "layout.zIndex",
+    component: InputNumber,
+    props: {
+      min: 0,
+      max: 99,
+    },
   },
 ];
 

src/modules/editor/components/CompUI/defines/formOpts/createColorOpts.ts

@@ -0,0 +1,17 @@
+import { ColumnItem } from "@queenjs/components/FormUI";
+import { colorToHex, hexToColor } from "@queenjs/utils";
+
+export function createColorOpts(): Pick<
+  ColumnItem,
+  "getValue" | "changeExtra"
+> {
+  return {
+    getValue(v) {
+      return hexToColor(v);
+    },
+    changeExtra(data) {
+      data.value = colorToHex(data.value);
+      return data;
+    },
+  };
+}

src/modules/editor/components/CompUI/formItems/GroupNumber.tsx

@@ -0,0 +1,31 @@
+import { InputNumber } from "ant-design-vue";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+
+export const GroupNumber = defineComponent({
+  props: {
+    value: any<number[]>().def([]),
+    labels: any<string[]>().def([]),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    function changeVal(index: number, v: any) {
+      const { value } = props;
+      value[index] = parseInt(v) || 0;
+      emit("change", value);
+    }
+
+    return () => (
+      <div class="flex space-x-4px">
+        {props.labels.map((label, i) => (
+          <InputNumber
+            value={props.value[i]}
+            key={i}
+            addon-before={label}
+            onChange={changeVal.bind(null, i)}
+          />
+        ))}
+      </div>
+    );
+  },
+});

src/modules/editor/components/Viewport/Content/index.tsx

@@ -1,3 +1,4 @@
+import { css } from "@linaria/core";
 import { defineUI } from "queenjs";
 import { onUnmounted } from "vue";
 import { Container, Draggable } from "vue-dndrop";
@@ -21,6 +22,7 @@ export default defineUI({
       <div class="min-h-750px bg-white">
         {store.isEditMode ? (
           <Container
+            class={dragContainerStyle}
             style={store.designData.pageStyle}
             onDrop={(e: any) => actions.moveComp(e.removedIndex, e.addedIndex)}
             non-drag-area-selector={".drag-disable"}
@@ -49,3 +51,9 @@ export default defineUI({
     );
   },
 });
+
+const dragContainerStyle = css`
+  &.dndrop-container.vertical > .dndrop-draggable-wrapper {
+    overflow: unset;
+  }
+`;

src/modules/editor/components/Viewport/Slider/index.tsx

@@ -1,11 +0,0 @@
-import { useEditor } from "@/modules/editor";
-import { defineUI } from "queenjs";
-
-export default defineUI({
-  setup() {
-    const { store } = useEditor();
-    return () => (
-      <div class="break-all">{JSON.stringify(store.designData)}</div>
-    );
-  },
-});

src/modules/editor/components/Viewport/Toolbar/index.tsx

@@ -4,8 +4,7 @@ import { defineUI } from "queenjs";
 
 export default defineUI({
   setup() {
-    const { controls } = useEditor();
-    const { history } = controls.historyCtrl;
+    const { history } = useEditor().controls.historyCtrl;
     return () => (
       <div>
         <Button

src/modules/editor/components/Viewport/index.tsx

@@ -23,7 +23,7 @@ export default defineUI({
             {/* <slots.Toolbar /> */}
             <slots.Content class="w-375px mx-auto my-30px" />
           </div>
-          <slots.SliderRight class="w-300px bg-component border-left !border-2px" />
+          <slots.SliderRight class="w-360px bg-component border-left !border-2px" />
         </div>
       </div>
     );

src/modules/editor/defines/DesignTemp/DesignComp.ts

@@ -1,12 +1,12 @@
 import { nanoid } from "nanoid";
-import { ICompKeys } from "../../typings";
+import { Background, ICompKeys, Layout } from "../../typings";
 
 export class DesignComp {
   id = nanoid();
   compKey: ICompKeys = "Text";
   value: any = undefined;
-  layout?: any;
-  background?: any;
+  layout?: Layout;
+  background?: Background;
 
   constructor(data?: Partial<DesignComp>) {
     if (!data) return;

src/modules/editor/helpers/index.ts

@@ -0,0 +1,7 @@
+import { EditorModule } from "..";
+
+export const helpers = EditorModule.helper({
+  designToNaturalSize(value: number) {
+    return value / 100 + "rem";
+  },
+});

src/modules/editor/index.ts

@@ -5,6 +5,7 @@ import components from "./components";
 import config from "./config";
 import { HistoryCtrl } from "./controllers/HistoryCtrl";
 import { store } from "./stores";
+import { helpers } from "./helpers";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig(config);
@@ -12,6 +13,7 @@ export class EditorModule extends ModuleRoot {
 
   actions = this.createActions([initActions, editActions]);
   store = this.createStore(store);
+  helper = this.createHelper(helpers)
 
   controls = {
     historyCtrl: new HistoryCtrl(this),

src/modules/editor/typings.ts

@@ -3,10 +3,11 @@ import components from "./components";
 export type ICompKeys = keyof typeof components.CompUI;
 
 export type Layout = {
-  width?: string;
-  height?: string;
-  margin?: string;
-  padding?: string;
+  size?: number[]; // width height
+  textAlign?: string;
+  offsetX?: number;
+  offsetY?: number;
+  zIndex?: number;
 };
 
 export type Background = {