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

src/assets/icons/components/IconMusic.tsx

@@ -0,0 +1,18 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconMusic = createIcon(<svg viewBox="0 0 30 30">
+
+    <g transform="translate(-21833 -3559)">
+        <path fill="none" stroke="#fff" stroke-width="2px"
+            d="M18,32A14,14,0,1,0,4,18,14,14,0,0,0,18,32Z" transform="translate(21830 3556)" />
+        <path stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"
+            stroke-width="2px" d="M26,14v9.8"
+            transform="translate(21823.4 3553)" />
+        <path stroke-linejoin="round" fill="none" stroke="#fff" stroke-width="2px"
+            d="M14,27.566A2.823,2.823,0,0,1,17.024,25H22.4v3.034A2.823,2.823,0,0,1,19.376,30.6H17.024A2.823,2.823,0,0,1,14,28.034Z"
+            transform="translate(21827 3549.7)" />
+        <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="#fff"
+            stroke-width="2px" d="M30.2,14.7,26,14"
+            transform="translate(21823.4 3553)" />
+    </g>
+</svg>)

src/assets/icons/index.ts

@@ -14,6 +14,7 @@ export * from "./components/IconLayerDown";
 export * from "./components/IconLayerUp";
 export * from "./components/IconLocked";
 export * from "./components/IconMove";
+export * from "./components/IconMusic";
 export * from "./components/IconQueen";
 export * from "./components/IconResizeY";
 export * from "./components/IconRotate";

src/assets/icons/svg/music.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 30 30">
+
+    <g transform="translate(-21833 -3559)">
+        <path fill="none" stroke="#fff" stroke-width="2px"
+            d="M18,32A14,14,0,1,0,4,18,14,14,0,0,0,18,32Z" transform="translate(21830 3556)" />
+        <path stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff"
+            stroke-width="2px" d="M26,14v9.8"
+            transform="translate(21823.4 3553)" />
+        <path stroke-linejoin="round" fill="none" stroke="#fff" stroke-width="2px"
+            d="M14,27.566A2.823,2.823,0,0,1,17.024,25H22.4v3.034A2.823,2.823,0,0,1,19.376,30.6H17.024A2.823,2.823,0,0,1,14,28.034Z"
+            transform="translate(21827 3549.7)" />
+        <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="#fff"
+            stroke-width="2px" d="M30.2,14.7,26,14"
+            transform="translate(21823.4 3553)" />
+    </g>
+</svg>

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

@@ -4,36 +4,53 @@ import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
 import { defineComponent } from "vue";
 import { any } from "vue-types";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
-
-const styleColumns: ColumnItem[] = [
-  // {
-  //   label: "内边距",
-  //   dataIndex: "layout.padding",
-  //   component: "Input",
-  // },
-  {
-    label: "背景颜色",
-    dataIndex: "layout.background.color",
-    ...createColorOpts(),
-  },
-];
-
+import { PageMusic } from "./PageMusic";
+import { Select } from "ant-design-vue";
+import { MusicOptions } from "./localMusic";
+const styleColumns = (muisc: string): ColumnItem[] => {
+  return [
+    {
+      label: "背景颜色",
+      dataIndex: "layout.background.color",
+      ...createColorOpts(),
+    },
+    {
+      label: "背景音乐",
+      dataIndex: "value.music",
+      component: Select,
+      props: {
+        class: "w-full",
+        defaultValue: muisc,
+        options: [{ label: "无", value: "" }, ...MusicOptions],
+      },
+    },
+    {
+      dataIndex: "value.music",
+      component: PageMusic,
+      isVisible: (value, data) => data?.value?.music != "",
+    },
+  ];
+};
 export const PageForm = defineComponent({
   props: {
     component: any<DesignComp>().isRequired,
   },
   setup(props) {
-    const { actions } = useEditor();
+    const { actions, helper } = useEditor();
     function changeVal(e: { dataIndex: string; value: any }) {
       actions.updateCompData(props.component, e.dataIndex, e.value);
     }
 
     return () => {
-      const { layout } = props.component;
+      const music = helper.findRootComp()?.value.music || "";
       return (
         <>
           <div>页面样式</div>
-          <FormUI data={layout} columns={styleColumns} onChange={changeVal} />
+          <FormUI
+            data={props.component}
+            columns={styleColumns(music)}
+            onChange={changeVal}
+          />
         </>
       );
     };

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

@@ -0,0 +1,222 @@
+import { useEditor } from "@/modules/editor";
+import { PauseCircleOutlined, PlayCircleOutlined } from "@ant-design/icons-vue";
+import { css } from "@linaria/core";
+import { Button, Slider } from "ant-design-vue";
+import { defineComponent, reactive, ref, watch } from "vue";
+import { number, bool } from "vue-types";
+import { IconMusic } from "@/assets/icons";
+export const PageMusic = defineComponent({
+  setup(props) {
+    const { store, actions, helper } = useEditor();
+    const state = reactive({
+      playStatus: false,
+      duration: 0,
+      currentTime: 0,
+    });
+    const rootComp = helper.findRootComp();
+
+    const audioRef = ref();
+
+    const playAudio = (status: boolean) => {
+      if (status) {
+        audioRef.value.play();
+      } else {
+        audioRef.value.pause();
+        audioRest();
+      }
+      state.playStatus = status;
+    };
+    watch(
+      () => rootComp?.value.music,
+      () => {
+        audioRest();
+      }
+    );
+    const audioRest = () => {
+      state.playStatus = false;
+      audioRef.value.currentTime = 0;
+    };
+
+    const timeChange = (v: number) => {
+      state.currentTime = v;
+      audioRef.value.currentTime = v;
+    };
+    return () => {
+      const music = rootComp?.value.music;
+      return (
+        <div class={store.isEditMode ? MusicEditStyle : MusicStyle}>
+          {store.isEditMode ? (
+            <AudioPlayer
+              key={music}
+              playStatus={state.playStatus}
+              onStatus={playAudio}
+              onDuration={timeChange}
+              duration={state.duration}
+              currentTime={state.currentTime}
+            />
+          ) : (
+            <div
+              onClick={() => {
+                playAudio(!state.playStatus);
+              }}
+            >
+              <IconMusic />
+            </div>
+          )}
+          {music}
+          <audio
+            controls={false}
+            ref={audioRef}
+            key={music}
+            autoplay={store.isEditMode ? false : true}
+            loop={store.isEditMode ? false : true}
+            onLoadedmetadata={(e: any) => {
+              state.duration = e.target?.duration;
+            }}
+            onTimeupdate={(e: any) => {
+              state.currentTime = e.target.currentTime;
+            }}
+            onEnded={() => {
+              audioRest();
+            }}
+          >
+            <source src={music} type="audio/mpeg" />
+            <p>你的浏览器不支持音频播放</p>
+          </audio>
+        </div>
+      );
+    };
+  },
+});
+
+const AudioPlayer = defineComponent({
+  props: {
+    playStatus: bool(),
+    currentTime: number(),
+    duration: number(),
+  },
+  emits: ["status", "duration"],
+  setup(props, { emit }) {
+    const audioControl = (playStatus: boolean) => {
+      emit("status", playStatus);
+    };
+    const durationChange = (v: any) => {
+      emit("duration", v);
+    };
+    const transTime = (value?: number) => {
+      let time = "";
+      if (!value) {
+        return "00:00";
+      }
+      const h = parseInt(`${value / 3600}`);
+      value %= 3600;
+      let m = parseInt(`${value / 60}`);
+      let s = parseInt(`${value % 60}`);
+      if (h > 0) {
+        time = formatTime(h + ":" + m + ":" + s);
+      } else {
+        time = formatTime(m + ":" + s);
+      }
+
+      return time;
+    };
+    const formatTime = (value: string) => {
+      let time = "";
+      const s = value.split(":");
+      let i = 0;
+      for (; i < s.length - 1; i++) {
+        time += s[i].length === 1 ? "0" + s[i] : s[i];
+        time += ":";
+      }
+      time += s[i].length === 1 ? "0" + s[i] : s[i];
+
+      return time;
+    };
+    return () => {
+      return (
+        <div class={AudioPlayerStyle}>
+          {!props.playStatus ? (
+            <Button
+              type="link"
+              icon={<PlayCircleOutlined style={{ fontSize: "24px" }} />}
+              onClick={() => audioControl(true)}
+            ></Button>
+          ) : (
+            <Button
+              type="link"
+              icon={<PauseCircleOutlined style={{ fontSize: "24px" }} />}
+              onClick={() => audioControl(false)}
+            ></Button>
+          )}
+          <div class={"flex-1 px-10px"}>
+            <Slider
+              disabled={!props.playStatus}
+              tooltipVisible={false}
+              min={0}
+              max={props.duration}
+              value={props.currentTime}
+              onChange={durationChange}
+            ></Slider>
+          </div>
+          <div>
+            {transTime(props.currentTime)}/{transTime(props.duration)}
+          </div>
+        </div>
+      );
+    };
+  },
+});
+const MusicEditStyle = css`
+  flex: 1;
+`;
+const AudioPlayerStyle = css`
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  /* slider style */
+  .ant-slider-disabled {
+    opacity: 0.7;
+  }
+  .ant-slider-step {
+    background-color: rgba(255, 255, 255, 0.27);
+  }
+  .ant-slider-track {
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 1);
+  }
+
+  .ant-slider:not(.ant-slider-disabled):hover {
+    .ant-slider-handle {
+      background-color: @inf-primary-color;
+      &:not(.ant-tooltip-open) {
+        border-color: #fff;
+      }
+    }
+  }
+  .ant-slider {
+    &.ant-slider-disabled {
+      .ant-slider-handle {
+        background-color: #bbb;
+        opacity: 0.8;
+      }
+    }
+  }
+  .ant-slider-handle {
+    width: 8px;
+    border-radius: 2px;
+    border-color: #fff;
+    background-color: #fff;
+  }
+
+  .ant-slider-handle-click-focused {
+    border-color: #fff;
+    background-color: @inf-primary-color;
+  }
+`;
+const MusicStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+`;

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

@@ -4,6 +4,7 @@ import { useCompData } from ".";
 import { useEditor } from "../../../..";
 import { useCompRef } from "../hooks";
 import { css } from "@linaria/core";
+import { PageMusic } from "./PageMusic";
 
 export const Component = defineComponent({
   props: {
@@ -12,7 +13,7 @@ export const Component = defineComponent({
   setup(props, { slots }) {
     const editor = useEditor();
     const { helper } = editor;
-    const { children, layout } = useCompData(props.compId);
+    const { children, layout, value } = useCompData(props.compId);
     const compRef = useCompRef(props.compId);
 
     return () => (
@@ -28,6 +29,7 @@ export const Component = defineComponent({
               return slots.CompItem?.(comp);
             })
           )}
+          {value.music && !editor.store.isEditMode && <PageMusic />}
         </div>
       </div>
     );

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

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

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

@@ -95,6 +95,7 @@ export default defineUI({
                         >
                           {children}
                         </Container>
+
                         {/* {store.currStreamCardId && (
                           <StreamCardTransfer
                             key={store.currStreamCardId + streamCardIndex}
@@ -109,6 +110,7 @@ export default defineUI({
                           !state.draging && (
                             <Transfer key={store.currCompId + streamCardIndex} />
                           )} */}
+
                         {!state.draging && <SelectTransfer />}
                       </>
                     );
@@ -125,16 +127,14 @@ export default defineUI({
                   },
                 }}
               </CompUI.Page.Component>
-
             </div>
-            <canvas class={selectCls}  ref={selectCanvasRef} />
-            
+            <canvas class={selectCls} ref={selectCanvasRef} />
           </div>
           <div class={meatureStyle}>
-             <div class="ruler top" id="rulerTop"></div>
-             <div class="ruler left" id="rulerLeft"></div>
-             <div class="ruler right" id="rulerRight"></div>
-             <div class="ruler bottom" id="rulerBottom"></div>
+            <div class="ruler top" id="rulerTop"></div>
+            <div class="ruler left" id="rulerLeft"></div>
+            <div class="ruler right" id="rulerRight"></div>
+            <div class="ruler bottom" id="rulerBottom"></div>
           </div>
         </div>
       );
@@ -166,7 +166,6 @@ const meatureStyle = css`
   z-index: 1001;
   pointer-events: none;
 
-
   .ruler {
     position: absolute;
     cursor: ns-resize;
@@ -198,4 +197,4 @@ const meatureStyle = css`
     width: 10px;
     cursor: ew-resize;
   }
-`
+`;

src/modules/editor/objects/DesignTemp/creates/createCompStyle.ts

@@ -63,8 +63,6 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
   if (layout.transformMatrix) {
     style.transform = layout.transformMatrix;
     style.transformOrigin = "0 0";
-
-    
   } else {
     const v = parseTransform(transform);
     if (v) style.transform = v;
@@ -75,6 +73,7 @@ export function createCompStyle(module: EditorModule, layout: Layout) {
       style.backgroundColor = layout.background.color;
     }
   }
+
   return style;
 }