Merge branch 'master' of http://124.70.149.18:10880/lianghj/queenshow

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 = {

src/modules/resource/actions/promotion.ts

@@ -1,5 +1,7 @@
 import { queenApi } from "queenjs";
 import { ResourceModule } from "..";
+import { PromotionController } from "../controllers/PromotionController";
+import { PageListController } from "@queenjs/controllers";
 
 export const promotionAction = ResourceModule.action({
   async renamePromotion(record: any) {
@@ -30,5 +32,6 @@ export const promotionAction = ResourceModule.action({
     const res = await this.https.createPromotion({ title });
     const url = `${location.origin}/editor.html#/?id=${res.result}`;
     location.href = url;
-  },
+  }
+
 });

src/pages/website/Material2/components/MaterialController.ts → src/modules/resource/controllers/MaterialController.ts

@@ -6,13 +6,23 @@ export class MaterialController  {
     imageCtrl = new PageListController<any, any>();
     vidoeCtrl = new PageListController<any, any>();
     taskCtrl = new PageListController<any, any>();
+    tplCtrl = new PageListController<any, any>();
 
+    async showDialog(type:string) {
+        const ctrl = this.tplCtrl;
+        ctrl.state.query = type == "video" ? { hasVideo: true } : {}
+        ctrl.loadPage(1);
+        const record:any = await this.onShowDialog(ctrl, type);
+        if (record && record._id) {
+            const url = `${location.origin}/index.html#/create/${record._id}`;
+            location.href = url;
+        }
+    }
     switchTab(name: string, fresh = true) {
         this.state.currTab = name;
         const ctrol = this.getCurrControl();
         if(fresh)  ctrol.fresh();
     }
-
     getCurrControl() : PageListController<any, any> {
         switch (this.state.currTab) {
             case "image": return this.imageCtrl;
@@ -21,12 +31,16 @@ export class MaterialController  {
         }
     }
 
+
     onBtnClick(name:string) {
         console.log("onBtnClick", name)
     }
     onItemClick(name: "delete" | "download", record:any) {
         console.log("onItemClick", name, record)
     }
+    async onShowDialog(listCtrl: PageListController<any, any>, type:string) {
+        console.log("onShowDialog", type)
+    }
 }
 
 export const TabNames = {

src/modules/resource/helper.ts

@@ -1,4 +1,7 @@
+import { PageListController } from "@queenjs/controllers";
 import { ResourceModule } from ".";
+import { PromotionController } from "./controllers/PromotionController";
+import { MaterialController } from "./controllers/MaterialController";
 
 export const helper = ResourceModule.helper({
   createFileName(fileName: string, dir: string) {
@@ -10,4 +13,38 @@ export const helper = ResourceModule.helper({
       6
     )}_${fileName}`;
   },
+
+  createPromotinController() {
+    const ctrl= new PromotionController();
+    ctrl.ListCtrl = new PageListController(this.config?.httpConfig);
+    ctrl.ListCtrl.setCrudPrefix("/h5")
+    ctrl.createPromotion = this.actions.createPromotion;
+
+    return ctrl;
+  },
+
+  createSourceController(isSelectModel:boolean, selectType :string) {
+      const {controls, actions} = this;
+      
+      const ctrl = new MaterialController();
+      ctrl.imageCtrl = controls.materialImageListCtrl;
+      ctrl.vidoeCtrl = controls.materialVideoListCtrl;
+      ctrl.taskCtrl = controls.renderTaskListCtrl;
+      ctrl.tplCtrl = controls.matTempListCtrl;
+
+      ctrl.onBtnClick = async function (name: string) {
+        if (name == "upload") {
+          const uploaded = await actions.uploadMaterial();
+          ctrl.switchTab(uploaded.fileType, false);
+          ctrl.getCurrControl().loadPage(1);
+          return;
+        }
+        ctrl.showDialog(name);
+      };
+      ctrl.onItemClick = function (name, record) {
+        if (name == "delete") return actions.deleteMaterial(record);
+        return actions.downloadMaterial(record);
+      };
+      return ctrl
+  }
 });

src/modules/resource/index.ts

@@ -18,7 +18,7 @@ export class ResourceModule extends ModuleRoot {
   components = this.useComponents(compoents);
   store = this.createStore([store]);
   https = this.createHttps(http);
-  helpers = this.createHelper(helper);
+  helper = this.createHelper(helper);
 
   controls = {
     uploader: new UploadController({

src/pages/website/Material/index.tsx

@@ -1,10 +1,10 @@
-import { useResource } from "@/modules/resource";
+import { initResource, useResource } from "@/modules/resource";
 import { defineComponent } from "vue";
 
 export default defineComponent({
   setup() {
     const resource = useResource();
-
+    
     return () => {
       return (
         <div>

src/pages/website/Material2/components/Material.tsx

@@ -5,8 +5,8 @@ import { Button } from "ant-design-vue";
 import AssetsList from "@/components/AssetsList";
 import { any } from "vue-types";
 import MaterialItem from "./MaterialItem";
-import {MaterialController } from "./MaterialController";
 import { onMounted } from "vue";
+import { MaterialController } from "@/modules/resource/controllers/MaterialController";
 
 
 export default defineUI({

src/pages/website/Material2/components/MaterialToolbar.tsx

@@ -2,7 +2,7 @@ import { Button } from "ant-design-vue";
 import { defineComponent } from "vue";
 import { css, cx } from "@linaria/core";
 import { any } from "vue-types";
-import { BtnNames, MaterialController, TabNames } from "./MaterialController";
+import { BtnNames, MaterialController, TabNames } from "../../../../modules/resource/controllers/MaterialController";
 import { defineUI } from "queenjs";
 
 const materialType = [

src/pages/website/Material2/controller.tsx

@@ -1,5 +1,5 @@
 import SelectListItemModal from "./components/SelectListItemModal";
-import { MaterialController } from "./components/MaterialController";
+import { MaterialController } from "../../../modules/resource/controllers/MaterialController";
 
 export default function createController(resource:any, isSelectModel:boolean, selectType :string) {
     const {controls, actions} = resource;

src/pages/website/Promotion2/components/index.tsx

@@ -5,7 +5,7 @@ import Header from "./Header";
 import PromotionItem from "./PromotionItem"
 import { defineUI } from "queenjs";
 import { any } from "vue-types";
-import { PromotionController } from "./PromotionController";
+import { PromotionController } from "@/modules/resource/controllers/PromotionController";
 
 
 export default defineUI({

src/pages/website/Promotion2/index.tsx

@@ -1,18 +1,11 @@
 import { useResource } from "@/modules/resource";
 import { defineComponent } from "vue";
-import PromotionUI from "./components";
-import { PromotionController } from "./components/PromotionController";
-import { PageListController } from "@queenjs/controllers";
 
+import PromotionUI from "./components";
 export default defineComponent({
   setup() {
-    
     const resource = useResource();
-    const ctrl= new PromotionController();
-    ctrl.ListCtrl = new PageListController(resource.config?.httpConfig);
-    ctrl.ListCtrl.setCrudPrefix("/h5")
-    ctrl.createPromotion = resource.actions.createPromotion;
-    
+    const ctrl = resource.helper.createPromotinController();
     return () => (
       <PromotionUI
         Controller={ctrl}