@versa_ai/vmml-editor 1.0.2

package/src/assets/css/closeLayer.scss

@@ -0,0 +1,50 @@
+.closeLayer{
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: rgba(0,0,0,0.55);
+  &>div{
+    width: 74.667vw;
+    height: 34.933vw;
+    background: #fff;
+    border-radius: 3.2vw;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    &>p{
+      width: 100%;
+      height: 21.6vw;
+      font-size: 4vw;
+      line-height: 5.6vw;
+      color: #333;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    &>div{
+      display: flex;
+      border-top: 1px solid #e5e5e5;
+      position: relative;
+      &>p{
+        width: 50%;
+        height: 13.067vw;
+        line-height: 13.067vw;
+        text-align: center;
+        color: #1677FF;
+        cursor: pointer;
+      }
+      &>div{
+        width: 1px;
+        height: 13.067vw;
+        background-color: #e5e5e5;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
+      }
+    }
+  }
+}

package/src/assets/css/colorSelector.scss

@@ -0,0 +1,59 @@
+$vm_base: 750;
+
+@function vm($px) {
+
+    @return ($px / 750) * 100vw;
+
+}
+
+.color-selector{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  padding-right: vm(20);
+  .text_bg_change{
+    width: vm(48);
+    height: vm(48);
+    flex: 0 0 auto;
+    text-align: center;
+    line-height: vm(48);
+    padding:0 vm(36);
+    margin-right: vm(30);
+    border-right: 2px solid #FFFFFF66; /* 设置左边框的宽度、样式和颜色 */
+  }
+  .text_color_change{
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: row nowrap;
+    overflow-x: auto; // 允许横向滚动
+    white-space: nowrap; // 确保文本不会换行
+    height:100%;
+    padding-right: vm(10);
+    align-items: center;
+    & > * {
+      flex-shrink: 0; // 防止子元素缩小
+    }
+    .color-item{
+      width: vm(48);
+      height:vm(48);
+      border-radius: 50%;
+      margin: 0 vm(15);
+      box-sizing: border-box;
+    }
+    .black-border{
+      border:vm(2) solid #333333FF
+    }
+    .current{
+      // border: vm(6) solid #1677FF;
+      box-shadow: 0 0 0 vm(6) #1677FF;
+    }
+    // 隐藏滚动条，但仍然保持滚动功能
+    &::-webkit-scrollbar { 
+        display: none; 
+    }
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+}

package/src/assets/css/editorTextMenu.less

@@ -0,0 +1,130 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 24px;
+  overflow: hidden;
+}
+.overlay > .text-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 11.467vw;
+  padding-left: 4.4vw;
+  padding-right: 3.2vw;
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  transition: all 0.01s;
+  z-index: 16;
+}
+.overlay > .text-header > .close {
+  width: 5.0666666667vw;
+  height: 5.0666666667vw;
+}
+.overlay > .text-header > .close img {
+  width: 100%;
+  height: 100%;
+}
+.overlay > .text-header > .history-operate {
+  height: 7.2vw;
+  display: none;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.overlay > .text-header > .history-operate img {
+  width: 4.667vw;
+  height: 5.067vw;
+}
+.overlay > .text-header > .history-operate > img:last-child {
+  margin-left: 8vw;
+}
+.overlay > .text-header > .next-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16vw;
+  height: 7.2vw;
+  line-height: 7.2vw;
+  background: #1677FF;
+  border-radius: 6.533vw;
+  text-align: center;
+  font-size: 3.2vw;
+  color: #fff;
+  border: 0;
+}
+.overlay .cover {
+  position: fixed;
+  bottom: 8vw;
+  width: 100%;
+  height: 10.6666666667vw;
+  z-index: 999;
+  transition: all 0.1s;
+}
+.overlay .text-input, .overlay .mappingarea {
+  font-family: PingFangSC, PingFang SC;
+  border: none;
+  font-size: 22px;
+  /* 取消外边框 */
+  outline: none;
+  background-color: rgba(0, 0, 0, 0);
+  line-height: 30px;
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+  transition: all 0.1s;
+}
+.overlay .text-input::-webkit-scrollbar, .overlay .mappingarea::-webkit-scrollbar {
+  display: none;
+}
+.overlay .text-input {
+  padding-top: 1.0666666667vw;
+  padding-bottom: 1.0666666667vw;
+  padding-left: 1.6vw;
+  padding-right: 1.3333333333vw;
+  z-index: 10;
+  width: 84vw;
+  caret-color: #1677FFFF;
+  position: absolute;
+  top: 30%;
+  left: 5%;
+  height: 200px;
+  word-break: break-all;
+}
+.overlay .mappingarea {
+  padding-top: 1.0666666667vw;
+  padding-bottom: 1.0666666667vw;
+  padding-left: 1.6vw;
+  padding-right: 1.3333333333vw;
+  border-radius: 1.3333333333vw;
+  border: 0;
+  position: fixed;
+  top: 30%;
+  left: 5%;
+  height: fit-content;
+  max-height: 200px;
+  color: transparent;
+  overflow-y: scroll;
+  z-index: 9;
+  display: flex;
+  flex-flow: column nowrap;
+  box-sizing: content-box;
+}
+.overlay .mappingarea .mappingarea_span {
+  font-size: 22px;
+  max-width: 84vw;
+  white-space: pre-wrap;
+  word-break: break-all;
+}

package/src/assets/css/editorTextMenu.scss

@@ -0,0 +1,149 @@
+$vm_base: 750;
+
+@function vm($px) {
+
+    @return ($px / 750) * 100vw;
+
+}
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  // backdrop-filter: blur(10px);
+  // -webkit-backdrop-filter: blur(10px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 24px;
+  overflow: hidden;
+  // 顶部
+  &>.text-header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 11.467vw;
+    padding-left: 4.4vw;
+    padding-right: 3.2vw;
+    box-sizing: border-box;
+    position: fixed;
+    top: 0;
+    transition: all 0.01s;
+    z-index:16;
+    &>.close {
+      width: vm(38);
+      height: vm(38);
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &>.history-operate {
+      height: 7.2vw;
+      display: none;
+      align-items: center;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      img {
+        width: 4.667vw;
+        height: 5.067vw;
+      }
+
+      &>img:last-child {
+        margin-left: 8vw;
+      }
+    }
+
+    &>.next-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 16vw;
+      height: 7.2vw;
+      line-height: 7.2vw;
+      background: #1677FF;
+      border-radius: 6.533vw;
+      text-align: center;
+      font-size: 3.2vw;
+      color: #fff;
+      border: 0;
+    }
+  }
+
+  .cover {
+    position: fixed;
+    bottom: vm(60);
+    width: 100%;
+    height:vm(80);
+    z-index: 999;
+    transition: all 0.1s;
+  }
+
+  .text-input,.mappingarea{
+    // font-family:;
+    font-family: PingFangSC, PingFang SC;
+    border: none;
+    // font-weight: 600;
+    font-size: 22px;
+    /* 取消外边框 */
+    outline: none;
+    background-color: rgba(0, 0, 0, 0);
+    line-height: 30px;
+    // 隐藏滚动条，但仍然保持滚动功能
+    &::-webkit-scrollbar { 
+      display: none; 
+    }
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+    transition: all 0.1s;
+  }
+  .text-input{
+    padding-top: vm(8);
+    padding-bottom: vm(8);
+    padding-left: vm(12);
+    padding-right: vm(10);
+    z-index: 10;
+    width: 84vw;
+    caret-color: #1677FFFF;
+    position: absolute;
+    top: 30%;
+    left: 5%;
+    height: 200px;
+    word-break: break-all;
+    // padding: vm(18);
+  }
+  .mappingarea{
+    padding-top: vm(8);
+    padding-bottom: vm(8);
+    padding-left: vm(12);
+    padding-right: vm(10);
+    border-radius: vm(10);
+    border:0;
+    position: fixed;
+    top: 30%;
+    left: 5%;
+    height: fit-content;
+    max-height: 200px;
+    color: transparent; //设置颜色透明，保证背景颜色
+    overflow-y: scroll;
+    z-index: 9;
+    display: flex;
+    flex-flow: column nowrap;
+    box-sizing: content-box;
+    .mappingarea_span{
+      font-size: 22px;
+      max-width: 84vw;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+  }
+}

package/src/assets/css/index.scss

@@ -0,0 +1,252 @@
+.editor{
+  background: #000;
+  width: 100%;
+  min-height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .padding-box {
+    flex: 1;
+  }
+  // 顶部
+  &>.header{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 11.467vw;
+    padding-left: 4.4vw;
+    padding-right: 3.2vw;
+    box-sizing: border-box;
+    position: relative;
+    &>.close{
+      width: 4vw;
+      height: 4vw;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    &>.history-operate{
+      height: 7.2vw;
+      display: none;
+      align-items: center;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      img{
+        width: 4.667vw;
+        height: 5.067vw;
+      }
+      &>img:last-child{
+        margin-left: 8vw;
+      }
+    }
+    &>.next-button{
+      width: 16vw;
+      height: 7.2vw;
+      line-height: 7.2vw;
+      background: #1677FF;
+      border-radius: 6.533vw;
+      text-align: center;
+      font-size: 3.2vw;
+      color: #fff;
+    }
+  }
+  .text-style{
+    filter:blur(10px)
+  }
+
+  .editor-vessel {
+    padding-top: 3.2vw;
+  }
+  //player与画布
+  .main{
+    width: 81.467vw;
+    height: 144.8vw;
+    margin: auto;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    border-radius: 3.2vw;
+    overflow: hidden;
+    .vessel {
+      width: 100%;
+      height: 100%;
+    }
+    .controls-box {
+      height: 12vw;
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      border-radius: 3.2vw;
+    }
+    .player-controls {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      padding: 0 2.13vw;
+      box-sizing: border-box;
+      background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
+      .mr-16 {
+        margin-right: 2.13vw;
+      }
+      .player-controls-toggle {
+        >img {
+          display: block;
+          width: 4.8vw;
+          height: 4.8vw;
+          cursor: pointer;
+        }
+      }
+      .player-controls-seekbar {
+        flex: 1;
+        position: relative;
+        .seekbar-container {
+          height: 100%;
+          user-select: none;
+          touch-action: none;
+          position: relative;
+          cursor: pointer;
+          box-sizing: border-box;
+          .seekbar-background {
+            user-select: none;
+            height: 1.6vw;
+            width: 100%;
+            background-color: rgba(255, 255, 255, 0.2);
+            border-radius: 1vw;
+            .seekbar-fill {
+              position: absolute;
+              user-select: none;
+              width: 100%;
+              height: 100%;
+              border-radius: 1vw;
+            }
+            .seekbar-line {
+              height: 100%;
+              border-radius: 1vw;
+              background-color: #eeeeee;
+            }
+            .seekbar-sign {
+              width: 10px;
+              position: absolute;
+              top: 50%;
+              margin-top: -6px;
+            }
+            .seekbar-cirle {
+              position: absolute;
+              top: -0.8vw;
+              width: 3.2vw;
+              height: 3.2vw;
+              border-radius: 50%;
+              background: #eeeeee;
+            }
+          }
+        }
+      }
+      .player-controls-time {
+        width: 10vw;
+        color: #fff;
+      }
+    }
+    .play-btn {
+      position: absolute;
+      bottom: 4vw;
+      left: 3vw;
+      width: 4.8vw;
+      height: 4.8vw;
+      img {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+    .opacity-06 {
+      opacity: 0.6;
+    }
+  }
+
+  //底部
+  .footer{
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 20.333vw 10.933vw;
+    &>div{
+      width: 30%;
+      margin: 0 15%;
+      img{
+        width: 6.4vw;
+        height: 6.4vw;
+        display: block;
+        margin: auto;
+      }
+      p{
+        font-size: 3.2vw;
+        color: #fff;
+        margin-top: 1.867vw;
+        text-align: center;
+      }
+    }
+  }
+
+  .not-show-text{
+    justify-content: space-around;
+  }
+
+  .editor-video-menu {
+    position: fixed;
+    // height: 38.13vh;
+    height: 0;
+    width: 100%;
+    background: #1E1E1E;
+    bottom: 0;
+    border-radius: 8px 8px 0 0;
+    transition: all 0.5s ease-in-out;  
+    &.active {
+      height: 38.13vh;
+    }
+    .editor-video-menu-header {
+      display: flex;
+      padding: 1.6vw 1.6vw 0;
+      height: 4.81vh;
+      line-height: 4.81vh;
+      color: rgba(255, 255, 255, 0.40);
+      overflow: hidden;
+      overflow-x: auto;
+      &::-webkit-scrollbar {
+        display: none; /* 隐藏滚动条 */
+      }
+      >div {
+        margin: 0 3.2vw;
+        white-space: nowrap;
+      }
+      .active {
+        color: #FFFFFF;
+      }
+    }
+    .editor-video-menu-itmes {
+      padding: 0 3.33vw;
+      max-height: calc(100% - 4.81vh - 1.6vw);
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      row-gap: 3.2vw;
+      column-gap: 2.6vw;
+      overflow: auto;
+      >div {
+        width: 21.33vw;
+        height: 21.33vw;
+        background-color: #1e1e1e;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+    }
+  }
+
+}

package/src/assets/css/loading.scss

@@ -0,0 +1,31 @@
+
+.page-loader {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+  overflow: hidden;
+  .light {
+    width: 75%;
+    height: 100%;
+    background: linear-gradient(90deg,
+        rgba(255, 255, 255, 0),
+        rgba(255, 255, 255, 0.15),
+        rgba(255, 255, 255, 0.3),
+        rgba(255, 255, 255, 0.15),
+        rgba(255, 255, 255, 0.0),
+      );
+    transform: skew(-45deg) translateX(-400%);
+    animation: animate_light 1s infinite;
+  }
+}
+
+@keyframes animate_light {
+  100% {
+    transform: skew(-45deg) translateX(200%);
+  }
+}

package/src/assets/css/maxTextLayer.scss

@@ -0,0 +1,31 @@
+$vm_base: 750;
+
+@function vm($px) {
+
+    @return ($px / 750) * 100vw;
+
+}
+
+.container{
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  .main_text{
+    background: #000000;
+    border-radius: 16px;
+    backdrop-filter: blur(40px);
+    padding: vm(24);
+    font-weight: 400;
+    font-size: vm(30);
+    color: #FFFFFF;
+    line-height: vm(42);
+    text-align: right;
+    font-style: normal;
+  }
+}