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

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

@@ -40,6 +40,8 @@ export * from "./components/IconMove";
 export * from "./components/IconMusic";
 export * from "./components/IconNext";
 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

@@ -0,0 +1,93 @@
+import { useEditor } from "@/modules/editor";
+import { useResource } from "@/modules/resource";
+import { PlusOutlined } from "@ant-design/icons-vue";
+import { Button, Divider, Select } from "ant-design-vue";
+import { queenApi } from "queenjs";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+
+export default defineComponent({
+  props: {
+    otherProps: any(),
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const { helper, controls } = useEditor();
+
+    const resource = useResource();
+
+    const addMusic = async () => {
+      const { successRow, failRow } =
+        await resource.actions.createAudioMaterial();
+      if (failRow.length > 0) {
+        queenApi.messageError(
+          `${failRow.length}条数据上传失败，超过限制大小。`
+        );
+      }
+      if (successRow.length > 0) {
+        queenApi.messageSuccess("上传成功");
+        const ctrl = resource.controls.materialAudioListCtrl;
+        await ctrl.loadPage(1, 1);
+        if (ctrl.state.list.length > 0) {
+          const item: any = ctrl.state.list[0];
+          const fileUrl = item.file.url;
+          const option = {
+            label: "自定义",
+            value: "custom",
+            src: fileUrl,
+          };
+          const options = [...controls.mediaCtrl.state.musicOptions];
+          const customIndex = options.findIndex((e) => {
+            return e.value == "custom";
+          });
+          if (customIndex != -1) {
+            options.splice(customIndex, 1, option);
+          } else {
+            options.push(option);
+          }
+          controls.mediaCtrl.setMusicOptions(options);
+          emit("change", "custom");
+        }
+      }
+    };
+    return () => {
+      const { musicOptions } = controls.mediaCtrl.state;
+      const compMusic = helper.findRootComp()?.value.music || "";
+      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) => {
+            emit("change", value);
+          }}
+        >
+          {{
+            dropdownRender: ({ menuNode }: any) => {
+              return (
+                <>
+                  {menuNode}
+                  <Divider style={{ margin: 0 }} />
+                  <Button
+                    type="link"
+                    icon={<PlusOutlined />}
+                    onMousedown={(e) => {
+                      e.stopPropagation();
+                    }}
+                    onClick={addMusic}
+                  >
+                    自定义音乐
+                  </Button>
+                </>
+              );
+            },
+          }}
+        </Select>
+      );
+    };
+  },
+});

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

@@ -5,11 +5,11 @@ import { defineComponent } from "vue";
 import { any } from "vue-types";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 import { PageMusic } from "./PageMusic";
-import { Select } from "ant-design-vue";
-import { MusicOptions } from "./localMusic";
+
 import { css } from "@linaria/core";
+import MusicSelect from "./MusicSelect";
 import screen from "./screen";
-const styleColumns = (muisc?: string): ColumnItem[] => {
+const styleColumns = (): ColumnItem[] => {
   return [
     {
       label: "背景颜色",
@@ -19,12 +19,7 @@ const styleColumns = (muisc?: string): ColumnItem[] => {
     {
       label: "背景音乐",
       dataIndex: "value.music",
-      component: Select,
-      props: {
-        class: "w-full flex-1 overflow-hidden",
-        value: muisc,
-        options: [{ label: "无", value: "" }, ...MusicOptions],
-      },
+      component: MusicSelect,
     },
     // {
     //   label: "页面模式",
@@ -38,11 +33,14 @@ const styleColumns = (muisc?: string): ColumnItem[] => {
     {
       dataIndex: "value.music",
       component: PageMusic,
-      isVisible: (value, data) => data?.value?.music != "" && muisc != "",
+      isVisible: (value, data) => {
+        const music = data?.value?.music || "";
+        return music != "";
+      },
     },
     {
       component: screen,
-    }
+    },
   ];
 };
 export const PageForm = defineComponent({
@@ -56,17 +54,12 @@ export const PageForm = defineComponent({
     }
 
     return () => {
-      const compMusic = helper.findRootComp()?.value.music || "";
-      const curValue = MusicOptions.find((e) => {
-        return e.value == compMusic;
-      });
-
       return (
         <div class={formStyle}>
           <div class="text-white">作品属性</div>
           <FormUI
             data={props.component}
-            columns={styleColumns(curValue?.value || "")}
+            columns={styleColumns()}
             onChange={changeVal}
           />
         </div>

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

@@ -8,20 +8,19 @@ import {
 } from "@ant-design/icons-vue";
 import { css } from "@linaria/core";
 
+import { isPc } from "@queenjs/utils";
 import { Button, Dropdown, Slider } from "ant-design-vue";
 import { Howl } from "howler";
 import { nanoid } from "nanoid";
-import { isPc } from "@queenjs/utils";
 import {
   defineComponent,
+  onMounted,
+  onUnmounted,
   reactive,
   ref,
   watch,
-  onUnmounted,
-  onMounted,
 } from "vue";
 import { bool, number } from "vue-types";
-import { MusicOptions } from "./localMusic";
 declare const WeixinJSBridge: any;
 export const PageMusic = defineComponent({
   setup() {
@@ -42,10 +41,13 @@ export const PageMusic = defineComponent({
 
     const initAudioBgm = () => {
       audioBgm.value = null;
-      const curAudio = MusicOptions.find((e) => {
+      const curAudio = controls.mediaCtrl.state.musicOptions.find((e) => {
         return e.value == rootComp?.value.music;
       });
-      const src = curAudio?.src || "";
+      if (!curAudio) {
+        return;
+      }
+      const src = curAudio.src || "";
       audioBgm.value = new Howl({
         src: [src],
         loop: store.isEditMode ? false : true,
@@ -145,6 +147,13 @@ export const PageMusic = defineComponent({
         initAudioBgm();
       }
     );
+    watch(
+      () => controls.mediaCtrl.state.musicOptions,
+      () => {
+        audioRest();
+        initAudioBgm();
+      }
+    );
     onMounted(() => {
       initAudioBgm();
     });

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

@@ -6,12 +6,12 @@ import { defineComponent, nextTick, onMounted, onUnmounted } from "vue";
 import { string } from "vue-types";
 
 import { IconArrowUp } from "@/assets/icons";
+import { useResource } from "@/modules/resource";
+import { CompPageObj } from ".";
 import { useEditor } from "../../../..";
+import { useCompData } from "../../defines/hook";
 import { useCompRef } from "../hooks";
 import { PageMusic } from "./PageMusic";
-import { MusicOptions } from "./localMusic";
-import { useCompData } from "../../defines/hook";
-import { CompPageObj } from ".";
 
 export const Component = defineComponent({
   props: {
@@ -21,7 +21,23 @@ export const Component = defineComponent({
     const editor = useEditor();
     const { helper, store, controls } = editor;
     const compRef = useCompRef(props.compId);
-
+    const resource = useResource();
+    const ctrl = resource.controls.materialAudioListCtrl;
+    const getCustomMusic = async () => {
+      await ctrl.loadPage(1, 1);
+      if (ctrl.state.list.length > 0) {
+        const item: any = ctrl.state.list[0];
+        const fileUrl = item.file.url;
+        const option = {
+          label: "自定义",
+          value: "custom",
+          src: fileUrl,
+        };
+        const options = [...controls.mediaCtrl.state.musicOptions, option];
+        controls.mediaCtrl.setMusicOptions(options);
+      }
+    };
+    getCustomMusic();
     // const getContextStyles = () => {
     //   let contextStyle: any = null;
     //   if (store.rootPage.value.pageMode == "short" && !store.isEditMode) {
@@ -46,7 +62,7 @@ export const Component = defineComponent({
         style.overflow = "unset";
         return style;
       }
-      
+
       const isPcDesign = value.useFor == "pc";
       const isShortDesign = comp.value.pageMode == "short";
 
@@ -102,8 +118,8 @@ export const Component = defineComponent({
       const { children, value } = comp;
       const isPcDesign = value.useFor == "pc";
 
-      const compMusic = value.music || "";
-      const curValue = MusicOptions.find((e) => {
+      const compMusic = value?.music || "";
+      const curValue = controls.mediaCtrl.state.musicOptions.find((e) => {
         return e.value == compMusic;
       });
 

src/modules/editor/components/CompUI/basicUI/Page/localMusic.ts

@@ -1,62 +0,0 @@
-export const MusicOptions = [
-  {
-    label: "安静舒缓",
-    value: "soothing&quiet",
-    src: require("@/assets/audio/soothing&quiet.mp3"),
-  },
-  {
-    label: "和煦的风",
-    value: "balmy_wind",
-    src: require("@/assets/audio/balmy_wind.mp3"),
-  },
-  {
-    label: "纽约落日",
-    value: "sunset_in_newyork",
-    src: require("@/assets/audio/sunset_in_newyork.mp3"),
-  },
-  {
-    label: "温情回忆",
-    value: "warm_memories",
-    src: require("@/assets/audio/warm_memories.mp3"),
-  },
-  {
-    label: "春华秋实",
-    value: "spring&autumn",
-    src: require("@/assets/audio/spring&autumn.mp3"),
-  },
-  {
-    label: "明媚阳光",
-    value: "bright_sunshine",
-    src: require("@/assets/audio/bright_sunshine.mp3"),
-  },
-  {
-    label: "动感活力",
-    value: "dynamic&energetic",
-    src: require("@/assets/audio/dynamic&energetic.mp3"),
-  },
-  {
-    label: "冲上云霄",
-    value: "soar_into_the_sky",
-    src: require("@/assets/audio/soar_into_the_sky.mp3"),
-  },
-  {
-    label: "命运希望",
-    value: "destiny&hope",
-    src: require("@/assets/audio/destiny&hope.mp3"),
-  },
-  {
-    label: "励志活力",
-    value: "inspirational_vitality",
-    src: require("@/assets/audio/inspirational_vitality.mp3"),
-  },
-  {
-    label: "励志希望",
-    value: "inspirational_hope",
-    src: require("@/assets/audio/inspirational_hope.mp3"),
-  },
-  {
-    label: "活力鼓舞",
-    value: "inspiration_vigour",
-    src: require("@/assets/audio/inspiration_vigour.mp3"),
-  },
-];

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

@@ -10,8 +10,8 @@ export default defineComponent({
     return () => {
       return (
         <div class="px-16px">
-          <div class="flex items-center">
-            <span class="w-70px">屏幕类型</span>
+          {/* <div class="flex items-center my-15px">
+            <span class="w-70px text-12px">屏幕类型</span>
             <Select
               value={ctrl.state.screen.useFor}
               onChange={(v) => {
@@ -32,9 +32,9 @@ export default defineComponent({
                 { label: "PC", value: "pc" },
               ]}
             />
-          </div>
-          <div class="flex items-center mt-5px">
-            <span class="w-70px">页面模式</span>
+          </div> */}
+          <div class="flex items-center my-15px">
+            <span class="w-70px text-12px">页面模式</span>
             <Select
               onChange={(v) => {
                 ctrl.saveScreenPage();
@@ -61,8 +61,8 @@ export default defineComponent({
           </div>
           {ctrl.state.screen.pageMode == "short" &&
             ctrl.state.screen.useFor == "mobile" && (
-              <div class="flex items-center mt-5px">
-                <span class="w-70px">屏幕长度</span>
+              <div class="flex items-center my-15px">
+                <span class="w-70px text-12px">屏幕长度</span>
                 <Select
                   onChange={(v) => {
                     ctrl.saveScreenPage();

src/modules/editor/controllers/MediaCtrl/indext.ts

@@ -1,10 +1,73 @@
 import { ModuleControl } from "queenjs";
 import { reactive } from "vue";
 import { EditorModule } from "../../module";
+const MusicOptions = [
+  {
+    label: "安静舒缓",
+    value: "soothing&quiet",
+    src: require("@/assets/audio/soothing&quiet.mp3"),
+  },
+  {
+    label: "和煦的风",
+    value: "balmy_wind",
+    src: require("@/assets/audio/balmy_wind.mp3"),
+  },
+  {
+    label: "纽约落日",
+    value: "sunset_in_newyork",
+    src: require("@/assets/audio/sunset_in_newyork.mp3"),
+  },
+  {
+    label: "温情回忆",
+    value: "warm_memories",
+    src: require("@/assets/audio/warm_memories.mp3"),
+  },
+  {
+    label: "春华秋实",
+    value: "spring&autumn",
+    src: require("@/assets/audio/spring&autumn.mp3"),
+  },
+  {
+    label: "明媚阳光",
+    value: "bright_sunshine",
+    src: require("@/assets/audio/bright_sunshine.mp3"),
+  },
+  {
+    label: "动感活力",
+    value: "dynamic&energetic",
+    src: require("@/assets/audio/dynamic&energetic.mp3"),
+  },
+  {
+    label: "冲上云霄",
+    value: "soar_into_the_sky",
+    src: require("@/assets/audio/soar_into_the_sky.mp3"),
+  },
+  {
+    label: "命运希望",
+    value: "destiny&hope",
+    src: require("@/assets/audio/destiny&hope.mp3"),
+  },
+  {
+    label: "励志活力",
+    value: "inspirational_vitality",
+    src: require("@/assets/audio/inspirational_vitality.mp3"),
+  },
+  {
+    label: "励志希望",
+    value: "inspirational_hope",
+    src: require("@/assets/audio/inspirational_hope.mp3"),
+  },
+  {
+    label: "活力鼓舞",
+    value: "inspiration_vigour",
+    src: require("@/assets/audio/inspiration_vigour.mp3"),
+  },
+];
 
 export class MediaCtrl extends ModuleControl<EditorModule> {
   state = reactive({
     medias: new Map<string, any>(),
+    musicOptions: [{ label: "无", value: "", src: "" }, ...MusicOptions],
   });
   init() {
     this.state.medias.clear();
@@ -22,4 +85,7 @@ export class MediaCtrl extends ModuleControl<EditorModule> {
   removeMedia(currKey: string) {
     this.state.medias.delete(currKey);
   }
+  setMusicOptions(options: any) {
+    this.state.musicOptions = options;
+  }
 }

src/modules/editor/module/actions/init.ts

@@ -1,10 +1,6 @@
 import { EditorModule } from "..";
-import { CompObject } from "../../controllers/SelectCtrl/compObj";
-import { DesignTemp } from "../../objects/DesignTemp";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { createProxyEffect } from "../../objects/ProxyStore/create";
 import { EditorMode } from "../../typings";
-import { editActions } from "./edit";
 
 export const initActions = EditorModule.action({
   // 模块初始化
@@ -12,7 +8,7 @@ export const initActions = EditorModule.action({
     // const { historyCtrl } = this.controls;
     // historyCtrl.bindActions(Object.keys(editActions));
     this.controls.compUICtrl.init();
-      this.controls.mediaCtrl.init();
+    this.controls.mediaCtrl.init();
 
     // createProxyEffect(this.store, (type, paths, value, oldValue) => {
     //   if (
@@ -30,9 +26,16 @@ export const initActions = EditorModule.action({
   // 初始化数据
   async initDesign(id: string, isSys = false) {
     const ret = await this.https.getDesignDetail(id, { isSys });
-
+    if (!ret.result.compMap) {
+      const cate: any = this.store.tplCategory || [];
+      const item = cate.find((d: any) => ret.result.categories.includes(d.id));
+      if (item && item.value == "PC") {
+        ret.result.platform = "pc";
+      } else {
+        ret.result.platform = "mobile";
+      }
+    }
     const page = this.controls.pageCtrl;
-
     page.setDesignData(ret.result);
   },
 
@@ -54,7 +57,8 @@ export const initActions = EditorModule.action({
     this.controls.selectCtrl.initEvents(pageEl, selEl, viewPort);
   },
 
-  onCompLayoutUpdated(comp: DesignComp) {//组件自身延迟加载了，影响了布局
+  onCompLayoutUpdated(comp: DesignComp) {
+    //组件自身延迟加载了，影响了布局
     if (this.helper.isCurrComp(comp.id)) {
       const  obj= this.controls.selectCtrl.gizmo.selected[0];
       obj.setSize(this.helper.designSizeToPx(comp.getW()), this.helper.designSizeToPx(comp.getH()));

src/modules/editor/module/stores/index.ts

@@ -1,27 +1,16 @@
-import { nanoid } from "nanoid";
 import { EditorModule } from "..";
 import { DesignTemp } from "../../objects/DesignTemp";
-import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { EditorMode, ICompKeys } from "../../typings";
-import { eachValuesAndPathsDeep } from "@/utils";
-import { set } from "lodash";
-import { createObj } from "../../objects/DesignTemp/factory";
+import { EditorMode } from "../../typings";
 
 export const store = EditorModule.store({
   state: () => ({
     textEditingState: false,
     mode: "editPage" as EditorMode,
     isWk: false, //作品集内作品
-    
     croppImage: "", //裁剪图片
     compEditMode: false, //组件编辑模式
     compEditReslut: 0, // -1 取消， 1 确定
-    // shortPage: {
-    //   index: 0,
-    //   offset: 0,
-    //   isMoving: false,
-    //   next: -2,
-    // },
+    tplCategory: undefined,
   }),
   getters: {
     currCompId() {
@@ -54,7 +43,7 @@ export const store = EditorModule.store({
     currStreamCard(state) {
       return this.controls.pageCtrl.currStreamCard;
     },
-    
+
     previewImageList(state) {
       const res: string[] = [];
       let scope = this;
@@ -93,7 +82,9 @@ export const store = EditorModule.store({
     setWk(v: boolean) {
       this.store.isWk = v;
     },
-   
+    setTplCategory(data) {
+      this.store.tplCategory = data;
+    },
     setDesignData(data: Partial<DesignTemp>) {
       this.controls.pageCtrl.designData = new DesignTemp(data);
     },

src/modules/editor/objects/DesignTemp/versions/1.0.1.ts

@@ -1,5 +1,4 @@
 import { ScreenCtrl } from "@/modules/editor/controllers/ScreenCtrl";
-import { DesignComp } from "../DesignComp";
 import { createObj } from "../factory";
 export function dataTransform(data: any) {
   if (data.version == "1.0.1") {
@@ -9,6 +8,7 @@ export function dataTransform(data: any) {
   if (!data.compMap) {
     const root = createObj({compKey: "Page"}, false);
     root.id = "root";
+    root.value.useFor = data.platform;
     data.compMap = {
         root,
     };

src/modules/resource/actions/material.ts

@@ -6,7 +6,7 @@ import { ResourceModule } from "..";
 export const materialActions = ResourceModule.action({
   async createMaterial() {
     const { successRow, failRow } = await this.helper.uploadMaterials({
-      accept: "image/*, video/mp4",
+      accept: "image/*,video/mp4,audio/mp3",
       multiple: true,
     });
 
@@ -21,6 +21,18 @@ export const materialActions = ResourceModule.action({
     this.controls.materialListCtrl.loadPage(1);
     return { successRow, failRow };
   },
+  async createAudioMaterial() {
+    const { successRow, failRow } = await this.helper.uploadMaterials({
+      accept: "audio/mp3",
+      multiple: false,
+    });
+
+    for (const key in successRow) {
+      const souceObj = successRow[key];
+      await this.https.createResource(souceObj);
+    }
+    return { successRow, failRow };
+  },
 
   async deleteMaterial(record) {
     const res = await queenApi.showConfirm({

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/controllers/MaterialController.ts

@@ -1,58 +1,71 @@
 import { PageListController } from "@queenjs/controllers";
 import { reactive } from "vue";
 
-export class MaterialController  {
-    state = reactive({isSelect:false, selectType:"image", currTab: "image", tabs:["image", "video", "task"], btns:["upload", "image","video"] , uploadType:"Default" as "image"|"video"|"Default"});
-    imageCtrl = new PageListController<any, any>();
-    vidoeCtrl = new PageListController<any, any>();
-    taskCtrl = new PageListController<any, any>();
-    tplCtrl = new PageListController<any, any>();
+export class MaterialController {
+  state = reactive({
+    isSelect: false,
+    selectType: "image",
+    currTab: "image",
+    tabs: ["image", "video", "task"],
+    btns: ["upload", "image", "video"],
+    uploadType: "Default" as "image" | "video" | "Default",
+  });
+  imageCtrl = new PageListController<any, any>();
+  videoCtrl = new PageListController<any, any>();
+  audioCtrl = 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;
-        }
+  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();
+  }
+  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;
+      case "video":
+        return this.videoCtrl;
+      case "audio":
+        return this.audioCtrl;
+      default:
+        return this.taskCtrl;
     }
-    getCurrControl() : PageListController<any, any> {
-        switch (this.state.currTab) {
-            case "image": return this.imageCtrl;
-            case "video": return this.vidoeCtrl;
-            default: return  this.taskCtrl;
-        }
-    }
-
+  }
 
-    onBtnClick(name:string) {
-        console.log("onBtnClick", name)
-    }
-    onItemClick(name: "delete" | "download" | "preview" |"use", record:any) {
-        console.log("onItemClick", name, record)
-    }
-    async onShowDialog(listCtrl: PageListController<any, any>, type:string) {
-        console.log("onShowDialog", type)
-    }
-     onCloseDialog(data:any) {
-        console.log("onCloseDialog", data)
-    }
+  onBtnClick(name: string) {
+    console.log("onBtnClick", name);
+  }
+  onItemClick(name: "delete" | "download" | "preview" | "use", record: any) {
+    console.log("onItemClick", name, record);
+  }
+  async onShowDialog(listCtrl: PageListController<any, any>, type: string) {
+    console.log("onShowDialog", type);
+  }
+  onCloseDialog(data: any) {
+    console.log("onCloseDialog", data);
+  }
 }
 
 export const TabNames = {
-     "video":"视频",
-    "image": "图片",
-    "task": "渲染任务"
-}
+  video: "视频",
+  image: "图片",
+  //   audio: "音频",
+  task: "渲染任务",
+};
 export const BtnNames = {
-    "video":"生成视频",
-    "image": "生成图片",
-    "upload": "上传素材"
-}
+  video: "生成视频",
+  image: "生成图片",
+  upload: "上传素材",
+};

src/modules/resource/helper.ts

@@ -67,7 +67,6 @@ export const helper = ResourceModule.helper({
 
     queenApi.showLoading("上传中……");
 
-    
     for (const key in blobs) {
       const blob = blobs[key];
       if (blob.type.indexOf("image") !== -1 && blob.size >= 10 * 1024 * 1024) {
@@ -77,13 +76,19 @@ export const helper = ResourceModule.helper({
         blob.size >= 200 * 1024 * 1024
       ) {
         result.failRow.push(blob);
+      } else if (
+        blob.type.indexOf("audio") !== -1 &&
+        blob.size >= 20 * 1024 * 1024
+      ) {
+        result.failRow.push(blob);
       } else {
         const file = await this.controls.uploader.uploadFile(blob, "queenshow");
         const souceObj = {
           file,
           fileType: blob.type.split("/")[0],
           from: "upload",
-          isSvg:  blob.name.toLowerCase().lastIndexOf(".svg") == blob.name.length -4
+          isSvg:
+            blob.name.toLowerCase().lastIndexOf(".svg") == blob.name.length - 4,
         };
         result.successRow.push(souceObj);
       }

src/modules/resource/index.ts

@@ -37,6 +37,7 @@ export class ResourceModule extends ModuleRoot {
 
     materialImageListCtrl: new PageListController(this.config?.httpConfig),
     materialVideoListCtrl: new PageListController(this.config?.httpConfig),
+    materialAudioListCtrl: new PageListController(this.config?.httpConfig),
 
     // 用户资源
     custImageListCtrl: new PageListController(this.config?.httpConfig),
@@ -64,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");
@@ -82,6 +82,10 @@ export class ResourceModule extends ModuleRoot {
     this.controls.materialVideoListCtrl.state.size = 18;
     this.controls.materialVideoListCtrl.state.query = { fileType: "video" };
 
+    this.controls.materialAudioListCtrl.setCrudPrefix("/source");
+    this.controls.materialAudioListCtrl.state.size = 18;
+    this.controls.materialAudioListCtrl.state.query = { fileType: "audio" };
+
     this.controls.custImageListCtrl.setCrudPrefix("/source");
     this.controls.custImageListCtrl.state.size = 20;
     this.controls.custImageListCtrl.state.query = { fileType: "image" };

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]);
@@ -23,6 +24,10 @@ export default defineComponent(() => {
         editor.actions.initWkDesign(prodId);
         return;
       }
+      const categories = resource.controls.categoryCtrl.state.categories;
+      const list: any = categories.find((d: any) => d.type == "h5");
+      const res = list?.children.find((e: any) => e.name == "平台");
+      editor.store.setTplCategory(res?.children);
       editor.actions.initDesign(prodId, isSys);
     } else {
       editor.jumpIndexHtml();

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/Material2/components/Material.tsx

@@ -32,7 +32,7 @@ export default defineUI({
             <div class="flex items-baseline">
               <h3 class="text-22px m-0">我的素材</h3>
               <span class="ml-5px text-gray-300 text-12px">
-                (图片支持jpg、png、gif、svg，不超过10M，视频支持mp4，不超过200M)
+                (图片支持jpg、png、gif、svg，不超过10M；视频支持mp4，不超过200M；)
               </span>
             </div>
           )}

src/pages/website/Material2/controller.tsx

@@ -46,7 +46,8 @@ export default function createController(
 
   const ctrl = new MaterialController();
   ctrl.imageCtrl = controls.materialImageListCtrl;
-  ctrl.vidoeCtrl = controls.materialVideoListCtrl;
+  ctrl.videoCtrl = controls.materialVideoListCtrl;
+  ctrl.audioCtrl = controls.materialAudioListCtrl;
   ctrl.taskCtrl = controls.renderTaskListCtrl;
   ctrl.state.isSelect = isSelectModel;
   if (selectType) ctrl.state.selectType = selectType;

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>;
+    };
   },
 });