create promotion

src/assets/icons/components/IconIconPc.tsx

@@ -0,0 +1,15 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconIconPc = createIcon(<svg viewBox="0 0 40 40">
+
+    <g transform="translate(-7019 13076)">
+        <g transform="translate(7021.165 -13074.461)">
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px"
+                stroke-linecap="round"
+                d="M9.534,26.074H4V7.4A1.383,1.383,0,0,1,5.384,6.014h24.9A1.383,1.383,0,0,1,31.67,7.4V26.074H26.136"
+                transform="translate(0 0)" />
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px"
+                d="M20.028,32,14,38.917H26.055Z" transform="translate(-2.193 -8.01)" />
+        </g>
+    </g>
+</svg>)

src/assets/icons/components/IconIconPhone.tsx

@@ -0,0 +1,14 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconIconPhone = createIcon(<svg viewBox="0 0 40 40">
+    <g transform="translate(-7019 13076)">
+        <g transform="translate(7018.073 -13074.69)">
+            <rect fill="none" stroke="currentColor" stroke-width="1.2px" width="20" height="28"
+                rx="2" transform="translate(10.927 4.69)" />
+            <path stroke="currentColor" stroke-width="1.2px" stroke-linecap="round"
+                stroke-linejoin="round" d="M22,10h3.116" transform="translate(-2.431 -1.352)" />
+            <path stroke="currentColor" stroke-width="1.2px" stroke-linecap="round"
+                stroke-linejoin="round" d="M20,38h6.232" transform="translate(-1.989 -9.143)" />
+        </g>
+    </g>
+</svg>)

src/assets/icons/components/IconPc.tsx

@@ -0,0 +1,15 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconPc = createIcon(<svg viewBox="0 0 40 40">
+
+    <g transform="translate(-7019 13076)">
+        <g transform="translate(7021.165 -13074.461)">
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px"
+                stroke-linecap="round"
+                d="M9.534,26.074H4V7.4A1.383,1.383,0,0,1,5.384,6.014h24.9A1.383,1.383,0,0,1,31.67,7.4V26.074H26.136"
+                transform="translate(0 0)" />
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px"
+                d="M20.028,32,14,38.917H26.055Z" transform="translate(-2.193 -8.01)" />
+        </g>
+    </g>
+</svg>)

src/assets/icons/components/IconPhone.tsx

@@ -0,0 +1,14 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconPhone = createIcon(<svg viewBox="0 0 40 40">
+    <g transform="translate(-7019 13076)">
+        <g transform="translate(7018.073 -13074.69)">
+            <rect fill="none" stroke="currentColor" stroke-width="1.2px" width="20" height="28"
+                rx="2" transform="translate(10.927 4.69)" />
+            <path stroke="currentColor" stroke-width="1.2px" stroke-linecap="round"
+                stroke-linejoin="round" d="M22,10h3.116" transform="translate(-2.431 -1.352)" />
+            <path stroke="currentColor" stroke-width="1.2px" stroke-linecap="round"
+                stroke-linejoin="round" d="M20,38h6.232" transform="translate(-1.989 -9.143)" />
+        </g>
+    </g>
+</svg>)

src/assets/icons/index.ts

@@ -1,3 +1,4 @@
+
 export * from "./components/Icon3D";
 export * from "./components/IconAdd";
 export * from "./components/IconAi";
@@ -37,6 +38,8 @@ export * from "./components/IconLocked";
 export * from "./components/IconMove";
 export * from "./components/IconMusic";
 export * from "./components/IconPalette";
+export * from "./components/IconPc";
+export * from "./components/IconPhone";
 export * from "./components/IconPicker";
 export * from "./components/IconPlay";
 export * from "./components/IconPlay2";

src/assets/icons/svg/pc.svg

@@ -0,0 +1,13 @@
+<svg viewBox="0 0 40 40">
+
+    <g transform="translate(-7019 13076)">
+        <g transform="translate(7021.165 -13074.461)">
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px"
+                stroke-linecap="round"
+                d="M9.534,26.074H4V7.4A1.383,1.383,0,0,1,5.384,6.014h24.9A1.383,1.383,0,0,1,31.67,7.4V26.074H26.136"
+                transform="translate(0 0)" />
+            <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.2px"
+                d="M20.028,32,14,38.917H26.055Z" transform="translate(-2.193 -8.01)" />
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/phone.svg

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 40 40">
+    <g transform="translate(-7019 13076)">
+        <g transform="translate(7018.073 -13074.69)">
+            <rect fill="none" stroke="currentColor" stroke-width="1.2px" width="20" height="28"
+                rx="2" transform="translate(10.927 4.69)" />
+            <path stroke="currentColor" stroke-width="1.2px" stroke-linecap="round"
+                stroke-linejoin="round" d="M22,10h3.116" transform="translate(-2.431 -1.352)" />
+            <path stroke="currentColor" stroke-width="1.2px" stroke-linecap="round"
+                stroke-linejoin="round" d="M20,38h6.232" transform="translate(-1.989 -9.143)" />
+        </g>
+    </g>
+</svg>

src/modules/editor/components/CompUI/basicUI/Page/MusicSelect.tsx

@@ -56,10 +56,10 @@ export default defineComponent({
       const curValue = musicOptions.find((e: any) => {
         return e.value == compMusic;
       });
-
       return (
         <Select
           class={"w-full flex-1 overflow-hidden"}
+          defaultValue={""}
           options={musicOptions}
           value={curValue?.value || ""}
           onChange={(value: any) => {

src/modules/editor/components/CompUI/basicUI/Page/PageForm.tsx

@@ -33,7 +33,10 @@ const styleColumns = (): ColumnItem[] => {
     {
       dataIndex: "value.music",
       component: PageMusic,
-      isVisible: (value, data) => data?.value?.music != "",
+      isVisible: (value, data) => {
+        const music = data?.value?.music || "";
+        return music != "";
+      },
     },
     {
       component: screen,

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

@@ -114,7 +114,7 @@ export const Component = defineComponent({
       const { children, value } = comp;
       const isPcDesign = value.useFor == "pc";
 
-      const compMusic = value.music || "";
+      const compMusic = value?.music || "";
       const curValue = controls.mediaCtrl.state.musicOptions.find((e) => {
         return e.value == compMusic;
       });

src/modules/resource/actions/promotion.tsx

@@ -44,7 +44,7 @@ export const promotionAction = ResourceModule.action({
     if (!res) return;
     await this.https.deleteComp(record._id);
   },
-  async editSource(record: any, sourceType: string, editCategory = true) {
+  async editSource(record: any, sourceType: string) {
     // const itemRes = await this.https.detailComp(record._id);
     // if (itemRes.errorNo != 200) {
     //   queenApi.messageWarn("未查询到数据！");
@@ -52,11 +52,7 @@ export const promotionAction = ResourceModule.action({
     // }
     let type = sourceType.toLowerCase();
     const res = await this.showModal(
-      <this.components.SouceModal
-        item={record}
-        sourceType={type}
-        editCategory={editCategory}
-      />,
+      <this.components.SouceModal item={record} sourceType={type} />,
       {
         width: "360px",
         title: "编辑",
@@ -75,11 +71,19 @@ export const promotionAction = ResourceModule.action({
   },
 
   async createPromotion() {
-    const title = await queenApi.showInput({
-      title: "请输入标题",
-    });
-    if (!title) return;
-    const res = await this.https.createPromotion({ title });
+    // const title = await queenApi.showInput({
+    //   title: "请输入标题",
+    // });
+    const data = await this.showModal(
+      <this.components.PromotionCreate sourceType="template" />,
+      {
+        width: "340px",
+        maskClosable: false,
+        title: "新建",
+      }
+    );
+    if (!data) return;
+    const res = await this.https.createPromotion(data);
     //console.log(location.host, location.host == "www.infish.cn");
     // if (location.host == "www.infish.cn") {
     //   const url = `${location.origin}/projects/queenshowv1/editor.html#/?id=${res.result}`;

src/modules/resource/components/PromotionCreate.tsx

@@ -0,0 +1,162 @@
+import { css } from "@linaria/core";
+import { Button, Form, Input, Divider } from "ant-design-vue";
+import { useModal } from "queenjs";
+import { IconPc, IconPhone } from "@/assets/icons";
+import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
+import { any, string } from "vue-types";
+import { useResource } from "..";
+export default defineComponent({
+  props: {
+    sourceType: string().isRequired,
+  },
+  setup(props) {
+    const { controls } = useResource();
+
+    const formState: { [name: string]: any } = reactive({
+      title: "",
+      categories: "",
+    });
+
+    const state = reactive({
+      categoryList: [] as any,
+    });
+
+    const getCate = () => {
+      const categories = controls.categoryCtrl.state.categories;
+      const currCate: any = categories.find((e: any) => {
+        return e.value == props.sourceType;
+      });
+      getDefultCate(currCate?.children);
+    };
+    const getDefultCate = (options: any) => {
+      if (!options) return;
+      options.map((e: any) => {
+        if (e.name == "平台") {
+          state.categoryList = e.children;
+          formState.categories = e.children[0].id;
+          return;
+        }
+      });
+    };
+    onMounted(() => {
+      getCate();
+    });
+
+    const rules = ref({
+      title: [
+        {
+          required: true,
+          message: "标题不能为空！",
+        },
+      ],
+    });
+
+    const { validate, validateInfos } = Form.useForm(formState, rules);
+
+    const modal = useModal();
+
+    const submit = () => {
+      validate().then(async (values) => {
+        formState.categories = [formState.categories];
+        modal.submit(formState);
+      });
+    };
+    const platformChange = (id: string) => {
+      formState.categories = id;
+    };
+
+    return () => {
+      return (
+        <div class={configFormStyle}>
+          <div class="modal_form">
+            <Form name="basic">
+              <Form.Item name="title" {...validateInfos.title}>
+                <Input
+                  v-model={[formState.title, "value"]}
+                  placeholder={"请输入作品标题"}
+                />
+              </Form.Item>
+              <Divider style={{ borderColor: "#1f1f1f" }} />
+              <Form.Item name="categories">
+                <SelectPlatforms
+                  value={formState.categories}
+                  options={state.categoryList}
+                  onChange={platformChange}
+                />
+              </Form.Item>
+            </Form>
+          </div>
+          <div class="modal_footer">
+            <Button type="primary" block onClick={submit}>
+              创建设计
+            </Button>
+          </div>
+        </div>
+      );
+    };
+  },
+});
+const SelectPlatforms = defineComponent({
+  props: {
+    value: any(),
+    options: any(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    return () => (
+      <div class={SelectStyle}>
+        <div>选择屏幕类型</div>
+        <div class={"select_wapper mt-20px"}>
+          {props.options.map((e: any) => {
+            return (
+              <div
+                class={["select_item", props.value == e.id ? "actvie" : ""]}
+                onClick={() => {
+                  emit("change", e.id);
+                }}
+              >
+                {e.name == "手机" ? (
+                  <IconPhone class={"text-40px"} />
+                ) : (
+                  <IconPc class={"text-40px"} />
+                )}
+                <div class={"mt-15px"}>
+                  {e.name == "手机" ? "H5移动端" : "PC端"}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+});
+const SelectStyle = css`
+  .select_wapper {
+    display: flex;
+    align-items: center;
+    .select_item {
+      padding: 22px 0;
+      flex: 1;
+      border: 1px solid transparent;
+      border-radius: 6px;
+      text-align: center;
+      background-color: #303030;
+      cursor: pointer;
+      &:last-child {
+        margin-left: 20px;
+      }
+      &.actvie {
+        background-color: #262626;
+        border-color: @inf-primary-color;
+      }
+    }
+  }
+`;
+const configFormStyle = css`
+  .thumb_wapper {
+    height: 180px;
+  }
+  .modal_footer {
+  }
+`;

src/modules/resource/components/SouceModal.tsx

@@ -1,17 +1,15 @@
+import Thumbnail from "@/components/Thumbnail";
+import { SelectOneImage } from "@/pages/website/Material2/modal";
 import { css } from "@linaria/core";
-import { Image } from "@queenjs/ui";
 import { Button, Form, Input, TreeSelect } from "ant-design-vue";
 import { useModal } from "queenjs";
 import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
-import { any, bool, string } from "vue-types";
+import { any, string } from "vue-types";
 import { useResource } from "..";
-import { SelectOneImage } from "@/pages/website/Material2/modal";
-import Thumbnail from "@/components/Thumbnail";
 export default defineComponent({
   props: {
     item: any(),
     sourceType: string().isRequired,
-    editCategory: bool(),
   },
   setup(props) {
     const { controls } = useResource();
@@ -137,29 +135,29 @@ export default defineComponent({
                   <Input v-model={[formState.title, "value"]} />
                 </Form.Item>
               )}
-              {props.editCategory &&
-                state.categoryList.map((item: any, index: number) => {
-                  return (
-                    <Form.Item key={index} name={`categories.${index}`}>
-                      <TreeSelect
-                        value={state.categoriesVal[item.id]}
-                        allowClear
-                        treeCheckable
-                        dropdownStyle={{ maxHeight: "500px", overflow: "auto" }}
-                        placeholder={`请选择${item.name}`}
-                        treeData={item?.children}
-                        replaceFields={{
-                          children: "children",
-                          label: "name",
-                          value: "id",
-                        }}
-                        onChange={(v) => {
-                          state.categoriesVal[item.id] = v;
-                        }}
-                      />
-                    </Form.Item>
-                  );
-                })}
+              {state.categoryList.map((item: any, index: number) => {
+                if (!item.isEdit) return null;
+                return (
+                  <Form.Item key={index} name={`categories.${index}`}>
+                    <TreeSelect
+                      value={state.categoriesVal[item.id]}
+                      allowClear
+                      treeCheckable
+                      dropdownStyle={{ maxHeight: "500px", overflow: "auto" }}
+                      placeholder={`请选择${item.name}`}
+                      treeData={item?.children}
+                      replaceFields={{
+                        children: "children",
+                        label: "name",
+                        value: "id",
+                      }}
+                      onChange={(v) => {
+                        state.categoriesVal[item.id] = v;
+                      }}
+                    />
+                  </Form.Item>
+                );
+              })}
             </Form>
           </div>
           <div class="modal_footer">

src/modules/resource/components/index.ts

@@ -1,5 +1,6 @@
 import MaterialItem from "./MaterialItem";
 import PromotionItem from "./PromotionItem";
+import PromotionCreate from "./PromotionCreate";
 import ResourceManager from "./ResourceManager";
 import SouceModal from "./SouceModal";
 import CollectionEditModal from "./Collection/CollectionEditModal";
@@ -7,6 +8,7 @@ import CollectionListModal from "./Collection/CollectionListModal";
 
 export const compoents = {
   MaterialItem,
+  PromotionCreate,
   PromotionItem,
   ResourceManager,
   CollectionEditModal,

src/modules/resource/controllers/CategoryCtrl/index.ts

@@ -43,6 +43,7 @@ export class CategoryCtrl extends ModuleControl<ResourceModule> {
         item.children.push({
           name: changeItem.name,
           value: changeItem.name,
+          isEdit: true,
           type: item.type,
           id: nanoid(),
         });

src/modules/resource/index.ts

@@ -65,7 +65,6 @@ export class ResourceModule extends ModuleRoot {
   treeController = new TreeController(this.natsBus);
 
   onReady() {
-    this.controls.categoryCtrl.init();
     this.controls.promotionListCtrl.setCrudPrefix("/h5");
     this.controls.promotionListCtrl.state.size = 12;
     this.controls.materialListCtrl.setCrudPrefix("/source");

src/pages/editor/EditPage/index.tsx

@@ -9,6 +9,7 @@ import { defineComponent } from "vue";
 export default defineComponent(() => {
   const editor = initEditor();
   const resource = useResource();
+  resource.controls.categoryCtrl.init();
   const auth = useAuth();
 
   const params = new URLSearchParams(location.hash.split("?")[1]);

src/pages/website/Category/CategoryTree.tsx

@@ -18,6 +18,7 @@ export default defineComponent({
     const formatTreeData = (data: any, level = 0) => {
       let res = [] as any;
       data?.map((item: any, index: number) => {
+        if (!item.isEdit) return;
         res[index] = {};
         res[index].id = item.id;
         res[index].level = level;
@@ -82,7 +83,6 @@ const TreeNode = defineComponent({
     };
     return () => {
       const { item } = props;
-      console.log(item);
       return (
         <div class={"tree_item"} key={item.id}>
           <div class="item_txt">{item.name || "undefined"}</div>

src/pages/website/Promotion2/controller.tsx

@@ -71,7 +71,7 @@ export function createPromotinController(
         break;
 
       case "edit":
-        await resource.actions.editSource(record, "template", isSys);
+        await resource.actions.editSource(record, "template");
         ctrl.ListCtrl.fresh();
         break;
       case "thumbnail":

src/pages/website/components/layout/LeftContent.tsx

@@ -24,6 +24,8 @@ export default defineUI({
 
   setup(props) {
     const auth = useAuth();
+    //@ts-ignore
+    let isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
     const footerOptions: TextListProps[] = [
       {
         label: "退出",
@@ -38,12 +40,14 @@ export default defineUI({
         icon: IconDashboard,
         // suffix: "7",
       },
-      {
-        link: "/workbench/collection",
-        label: "作品集",
-        icon: IconCube,
-        // suffix: "32",
-      },
+      isSys
+        ? null
+        : {
+            link: "/workbench/collection",
+            label: "作品集",
+            icon: IconCube,
+            // suffix: "32",
+          },
       {
         link: "/workbench/category",
         label: "我的分类",
@@ -111,11 +115,14 @@ export default defineUI({
           </router-link> */}
           <Divider class="!-mt-10px" />
           <div class="flex-1">
-            {menuOptions?.map((option, index) => (
-              <router-link to={option.link} key={index}>
-                <TextListItem key={index} option={option} />
-              </router-link>
-            ))}
+            {menuOptions?.map((option, index) => {
+              if (!option) return null;
+              return (
+                <router-link to={option.link} key={index}>
+                  <TextListItem key={index} option={option} />
+                </router-link>
+              );
+            })}
           </div>
           <div class="mb-30px">
             <TextList options={footerOptions} />

src/pages/website/index.ts

@@ -2,7 +2,7 @@ import { startApp } from "@/App";
 import { initAuthDef } from "@/hooks/initAuthDef";
 import { initViewportSize } from "@/hooks/initViewportSize";
 import { initEditor } from "@/modules/editor";
-import { initResource } from "@/modules/resource";
+import { initResource, useResource } from "@/modules/resource";
 // import CKEditor from "@ckeditor/ckeditor5-vue";
 import router from "./router";
 import { initRemSize } from "@/hooks/initRemSize";

src/pages/website/layout.tsx

@@ -2,21 +2,18 @@ import Layout from "./components/layout";
 import { UserController } from "./components/layout/UserController";
 import { defineComponent } from "vue";
 import { useAuth } from "@queenjs-modules/auth";
+import { useResource } from "@/modules/resource";
 
 export default defineComponent({
   setup() {
     const auth = useAuth();
-    const ctrl= new UserController();
+    const ctrl = new UserController();
     ctrl.loginOut = auth.actions.logout;
-
+    const { controls } = useResource();
+    controls.categoryCtrl.init();
     return () => {
-        ctrl.state.userInfo = auth.store.userInfo;
-        return (
-        <Layout
-            Controller={ctrl}
-            slots={{}}
-        ></Layout>
-    );
-    }
+      ctrl.state.userInfo = auth.store.userInfo;
+      return <Layout Controller={ctrl} slots={{}}></Layout>;
+    };
   },
 });