Merge branch 'hqyDev' of http://git.dayaedu.com/liushengqiang/classroom-app into jenkins-test

src/views/creation/audioVisualDraw.ts

@@ -9,7 +9,10 @@
       type propsType = { canvWidth: number; canvHeight: number; canvFillColor: string; lineColor: string; lineGap: number }
       // canvas
       const canvasCtx = canvasDom.getContext("2d")!
-      const { width, height } = canvasDom.getBoundingClientRect()
+      let { width, height } = canvasDom.getBoundingClientRect()
+      // 向上取整，当with为小数或者小于当前dom时候，切换app之后 会出现黑边
+      width = Math.ceil(width)
+      height = Math.ceil(height)
       canvasDom.width = width
       canvasDom.height = height
       // audio
@@ -84,8 +87,8 @@
               return
             }
             //analyser?.getByteFrequencyData(dataArray)
-            draw(generateMixedData(38), canvasCtx, {
-              lineGap: 3,
+            draw(generateMixedData(48), canvasCtx, {
+              lineGap: 2,
               canvWidth: width,
               canvHeight: height,
               canvFillColor: "transparent",
@@ -114,20 +117,27 @@
       }
     }
 
-export function generateMixedData(size:number) {
+export function generateMixedData(size: number) {
   const dataArray = new Uint8Array(size);
   const baseNoiseAmplitude = 30;
   const minFrequency = 0.01;
   const maxFrequency = 0.2;
   const minAmplitude = 50;
   const maxAmplitude = 150;
+
+  let lastAmplitude = maxAmplitude;  // 初始振幅设置为最大值
+  let lastFrequency = minFrequency + Math.random() * (maxFrequency - minFrequency);
+
   for (let i = 0; i < size; i++) {
-      const frequency = minFrequency + Math.random() * (maxFrequency - minFrequency);
-      const amplitude = minAmplitude + Math.random() * (maxAmplitude - minAmplitude);
+      const decayFactor = 1 - (i / size);  // 使振幅随时间递减
+      const amplitude = lastAmplitude * decayFactor + (Math.random() - 0.5) * 10;
+      const frequency = lastFrequency + (Math.random() - 0.5) * 0.01;
       const wave = amplitude * (0.5 + 0.5 * Math.sin(frequency * i));
       const noise = Math.floor(Math.random() * baseNoiseAmplitude) - baseNoiseAmplitude / 2;
       dataArray[i] = Math.min(255, Math.max(0, Math.floor(wave + noise)));
+      lastAmplitude += (amplitude - lastAmplitude) * 0.05;
+      lastFrequency += (frequency - lastFrequency) * 0.05;
   }
+
   return dataArray;
 }
-

src/views/creation/edit/index.module.less

@@ -1,3 +1,7 @@
+// 平板
+.creationTablet .sectionVideo .videoBg {
+  height: 314px;
+}
 .sectionVideo {
   position: relative;
   line-height: 0;

src/views/creation/edit/index.tsx

@@ -8,10 +8,12 @@ import { api_userMusicDetail, api_userMusicSave } from '../api';
 import { useRoute, useRouter } from 'vue-router';
 import videoBg from '../images/videobg.png';
 import { postMessage } from '@/helpers/native-message';
+import { browser} from '@/helpers/utils';
 
 export default defineComponent({
   name: 'creation-edit',
   setup() {
+    const {isTablet} = browser()
     const route = useRoute();
     const router = useRouter();
     const state = reactive({
@@ -84,7 +86,7 @@ export default defineComponent({
       setStatusBarTextColor(true);
     });
     return () => (
-      <div>
+      <div class={isTablet ? styles.creationTablet : ''}>
         <MSticky position="top">
           <MHeader background={'#F1F1F1'} border={false} />
         </MSticky>

src/views/creation/index-share.tsx

@@ -68,6 +68,7 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
     const isScreenScroll = ref(false)
+    const creationHeight = ref(0)
     const state = reactive({
       id: route.query.id,
       isEmpty:false,
@@ -530,13 +531,19 @@ export default defineComponent({
         content: { statusBarTextColor: isWhite }
       })
     }
+    function setFullHeight(){
+      creationHeight.value = window.innerHeight
+    }
     onMounted(async () => {
       if(isApp) { setStatusBarTextColor(true) }
       __init();
+      setFullHeight()
+      window.addEventListener('resize', setFullHeight)
     });
 
     onUnmounted(() => {
       cleanScrollEvent()
+      window.removeEventListener('resize', setFullHeight)
       state._plrl?.destroy()
     });
 
@@ -566,6 +573,7 @@ export default defineComponent({
         style={
           {
             '--barheight':state.heightV + "px",
+            "--creationHeight":creationHeight.value ? creationHeight.value+"px" : "100vh"
           }
         }
         class={[

src/views/creation/index.module.less

@@ -235,7 +235,7 @@
 
 .musicSection {
   width: 100%;
-  min-height: calc(100% - var(--barheight) - 20px - 14vh - 210px - 55px - 80px);
+  min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20px - 14vh - 210px - 55px - 80px);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -512,7 +512,7 @@
     left: 13px;
     width: calc(100% - 26px);
     height: 1px;
-    background-color: rgba(255, 255, 255, 0.5) ;
+    background-color: rgba(255, 255, 255, 0.3) ;
   }
   .logoImg{
     width: 159px;
@@ -571,7 +571,7 @@
   }
 }
 .musicShareSection{
-  min-height: calc(100% - var(--barheight) - 20vh - 210px - 55px);
+  min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20vh - 210px - 55px);
 }
 .likeShareItem{
   background-color: initial;
@@ -600,7 +600,7 @@
       z-index: 1;
       width: 100%;
       height: 100%;
-      border-radius: 8px;
+      border-radius: 8.5px;
     }
     .imgLabel{
       position: absolute;
@@ -664,7 +664,7 @@
   }
 }
 .isEmpty{
-  height: calc(100% - var(--barheight));
+  height: calc(var(--creationHeight, 100vh) - var(--barheight));
   display: flex;
   align-items: center;
 }
@@ -682,10 +682,10 @@
       }
     }
     .musicSection{
-      min-height: calc(100% - var(--barheight) - 20px - 14vh - 340px - 55px - 80px);
+      min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20px - 14vh - 340px - 55px - 80px);
     }
     .musicShareSection{
-      min-height: calc(100% - var(--barheight) - 20vh - 340px - 55px);
+      min-height: calc(var(--creationHeight, 100vh) - var(--barheight) - 20vh - 340px - 55px);
     }
   }
 }

src/views/creation/index.tsx

@@ -280,7 +280,9 @@ export default defineComponent({
       type propsType = { canvWidth: number; canvHeight: number; canvFillColor: string; lineColor: string; lineGap: number }
       // canvas
       const canvasCtx = canvasDom.getContext("2d")!
-      const { width, height } = canvasDom.getBoundingClientRect()
+      let { width, height } = canvasDom.getBoundingClientRect()
+      width = Math.ceil(width)
+      height = Math.ceil(height)
       canvasDom.width = width
       canvasDom.height = height
       // audio
@@ -352,8 +354,8 @@ export default defineComponent({
             return
           }
           //analyser?.getByteFrequencyData(dataArray)
-          draw(generateMixedData(38), canvasCtx, {
-            lineGap: 3,
+          draw(generateMixedData(48), canvasCtx, {
+            lineGap: 2,
             canvWidth: width,
             canvHeight: height,
             canvFillColor: "transparent",

src/views/creation/share-model/index.module.less

@@ -115,7 +115,7 @@
     padding: 3px;
     border-radius: 4px;
     // opacity: 0.53;
-    border: 1px solid rgba(37, 156, 254, 1);
+    border: 1px solid rgba(37, 156, 254, 0.5);
     // border-image: linear-gradient(130deg, rgba(37, 156, 254, 1), rgba(68, 201, 255, 1)) 1 1;
     flex-shrink: 0;
     overflow: hidden;