hy-dispatch-ui-v3 0.1.6 → 0.2.1

package/es/components/appAudioPlayer/js/index.mjs

@@ -0,0 +1,327 @@
+import { ref, computed, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import { useAudioPlayerConfig } from '../../../hooks/useAudioPlayerConfig.mjs';
+import { useLocale } from '../../../hooks/useLocale.mjs';
+import { formatDuration } from '../../../utils/date.mjs';
+
+const useAudioPlayer = (hy) => {
+  const { props, emits, audioRef } = hy;
+  const { t } = useLocale();
+  const { audioPlayerConfig } = useAudioPlayerConfig();
+  const speed = ref(1);
+  const playRules = ref(1);
+  const loading = ref(false);
+  const audioItem = ref({});
+  const audioUrl = ref("");
+  const totalTime = ref(0);
+  const curTime = ref(0);
+  const progress = ref(0);
+  const isDrop = ref(false);
+  const isFullScreen = ref(false);
+  const volumeValue = ref(100);
+  const audioState = ref("NO_LOAD");
+  const speedList = [
+    { value: 0.5, label: "0.5 X" },
+    { value: 1, label: "1.0 X" },
+    { value: 1.5, label: "1.5 X" },
+    { value: 2, label: "2.0 X" },
+    { value: 3, label: "3.0 X" }
+  ];
+  const playRulesList = [
+    {
+      value: 1,
+      label: t("audioPlayer.stopAfterPlayback"),
+      svgName: "player-mediaCenter_stopPlaying"
+    },
+    {
+      value: 2,
+      label: t("audioPlayer.continuousPlayback"),
+      svgName: "player-mediaCenter_autoplay"
+    },
+    {
+      value: 3,
+      label: t("audioPlayer.loopPlayback"),
+      svgName: "player-mediaCenter_loopPlayback"
+    }
+  ];
+  const isAnalyseType = computed(() => {
+    return props.type === "analyse";
+  });
+  const speedLabel = computed(() => {
+    if (speed.value === 1) {
+      return t("audioPlayer.multiples");
+    } else {
+      return speedList.find((item) => item.value === speed.value).label;
+    }
+  });
+  const isCanPlay = computed(() => {
+    return audioState.value !== "NO_LOAD" || audioState.value !== "CAN_NOT_PLAY";
+  });
+  const isPlaying = computed(() => {
+    return audioState.value === "PLAYING";
+  });
+  const currentDuration = computed(() => {
+    const time = formatDuration(curTime.value, true);
+    if (!time) return "- -";
+    return `${time}"`;
+  });
+  const totalDuration = computed(() => {
+    const time = formatDuration(totalTime.value, true);
+    if (!time) return "- -";
+    return `${time}"`;
+  });
+  async function initPlayer() {
+    await nextTick();
+    audioRef.value.addEventListener("canplay", (e) => {
+      loading.value = false;
+      audioState.value = "IS_LOAD";
+      totalTime.value = Math.floor(audioRef.value.duration);
+      emits("canplay", e);
+    });
+    audioRef.value.addEventListener("play", () => {
+      audioRef.value.playbackRate = speed.value;
+      audioState.value = "PLAYING";
+      if (audioUrl.value && audioItem.value) {
+        emits("play-start", audioUrl.value, audioItem.value);
+      }
+    });
+    audioRef.value.addEventListener("pause", (e) => {
+      audioState.value = "PAUSE";
+    });
+    audioRef.value.addEventListener("volumechange", () => {
+      volumeValue.value = audioRef.value.volume * 100;
+    });
+    audioRef.value.addEventListener("ended", () => {
+      audioState.value = "PLAY_END";
+      if (playRules.value === 2) {
+        playNext();
+      } else if (playRules.value === 3) {
+        audioRef.value.load();
+        audioRef.value.play();
+      }
+      emits("play-ended");
+    });
+    audioRef.value.addEventListener(
+      "timeupdate",
+      (e) => {
+        audioState.value = "PLAYING";
+        if (!isDrop.value && audioRef.value) {
+          const currentTime = audioRef.value.currentTime;
+          if (audioRef.value) {
+            curTime.value = Math.floor(currentTime);
+          } else {
+            setTimeout(() => {
+              if (audioRef.value) {
+                curTime.value = Math.floor(currentTime);
+              }
+            }, 1e3);
+          }
+          progress.value = curTime.value / totalTime.value * 100;
+          emits("timeupdate", e);
+        }
+      },
+      false
+    );
+    audioRef.value.addEventListener("error", (e) => {
+      loading.value = false;
+      audioState.value = "CAN_NOT_PLAY";
+      console.error("error", e);
+      audioRef.value = null;
+    });
+  }
+  async function playAudio(filePath, item) {
+    if (audioState.value === "CAN_NOT_PLAY") {
+      audioState.value = "NO_LOAD";
+      await nextTick();
+      initPlayer();
+    }
+    if (item) {
+      if (item.id !== audioItem.value.id || !audioRef.value.src) {
+        loading.value = true;
+        audioItem.value = item;
+        audioUrl.value = filePath;
+        audioRef.value.src = filePath;
+      }
+    } else if (audioUrl.value === "") {
+      return false;
+    }
+    if (audioItem.value.playSeconds) {
+      jumpDuration(audioItem.value.playSeconds);
+    }
+    await nextTick();
+    audioRef.value.play();
+    audioState.value = "PLAYING";
+  }
+  function pauseAudio() {
+    if (audioState.value === "CAN_NOT_PLAY") return;
+    audioRef.value && audioRef.value.pause();
+    audioState.value = "PAUSE";
+  }
+  function playPrevious() {
+    if (props.type === "default") {
+      const index = props.playList.findIndex(
+        (item) => item.id === audioItem.value.id
+      );
+      if (index > 0 && index !== props.playList.length) {
+        const item = props.playList[index - 1];
+        playAudio(item.filePath, item);
+        emits("play-previous");
+      } else {
+        ElMessage.warning(t("audioPlayer.currentIsTheFirstItem"));
+      }
+    } else if (isAnalyseType.value) {
+      if (!isCanPlay.value) return;
+      emits("play-previous");
+    }
+  }
+  function playNext() {
+    if (props.type === "default") {
+      const index = props.playList.findIndex(
+        (item) => item.id === audioItem.value.id
+      );
+      if (index !== props.playList.length - 1) {
+        const item = props.playList[index + 1];
+        playAudio(item.filePath, item);
+        emits("play-next");
+      } else {
+        ElMessage.warning(t("audioPlayer.currentIsTheLastItem"));
+      }
+    } else if (isAnalyseType.value) {
+      if (!isCanPlay.value) return;
+      emits("play-next");
+    }
+  }
+  function playRulesHandler(value) {
+    if (value === 3) {
+      playRules.value = 1;
+    } else {
+      playRules.value = value + 1;
+    }
+  }
+  function speedHandler(value) {
+    speed.value = value;
+    if (!audioRef.value) return;
+    audioRef.value.playbackRate = value;
+  }
+  function changeVolume() {
+    if (!audioRef.value) return;
+    audioRef.value.volume = volumeValue.value / 100;
+  }
+  function getNowWh() {
+    curTime.value = totalTime.value * (progress.value / 100);
+    audioRef.value.currentTime = curTime.value;
+    isDrop.value = false;
+  }
+  function setAudioCurrentTime(currentTime) {
+    if (!audioRef.value || typeof currentTime !== "number") return;
+    audioRef.value.currentTime = currentTime;
+  }
+  function getPercent(num, total) {
+    num = parseFloat(num);
+    total = parseFloat(total);
+    if (isNaN(num) || isNaN(total)) {
+      return 0;
+    }
+    return total <= 0 ? 0 : Math.round(num / total * 1e4) / 100;
+  }
+  function isCantPlayType(e) {
+    if (e.target.error) {
+      const { code, message } = e.target.error;
+      return code === 4 && !message.includes("Format error") || message.includes("PIPELINE_ERROR_DECODE");
+    }
+    return false;
+  }
+  function jumpDuration(s) {
+    audioRef.value.currentTime = s;
+  }
+  function initFullScreenEvent() {
+    document.addEventListener("fullscreenchange", fullscreenchangeHandler);
+  }
+  function destroyFullScreenEvent() {
+    document.removeEventListener("fullscreenchange", fullscreenchangeHandler);
+  }
+  function fullscreenchangeHandler(e) {
+    if (document.fullscreenElement) ; else {
+      isFullScreen.value = false;
+    }
+  }
+  function onFullScreenHandler() {
+    if (isFullScreen.value) {
+      const el = document;
+      if (el.exitFullscreen) {
+        el.exitFullscreen();
+      }
+    } else {
+      const el = document.documentElement;
+      if (el.requestFullscreen) {
+        isFullScreen.value = true;
+        el.requestFullscreen();
+      }
+    }
+  }
+  function audioCutting() {
+    const canvas = document.createElement("canvas");
+    const img = document.getElementById("img");
+    const audio = audioRef.value;
+    audio.setAttribute("crossOrigin", "anonymous");
+    canvas.width = audio.clientWidth;
+    canvas.height = audio.clientHeight;
+    canvas.getContext("2d").drawImage(audio, 0, 0, canvas.width, canvas.height);
+    const dataURL = canvas.toDataURL("image/png");
+    img.setAttribute("src", dataURL);
+  }
+  function onDownloadHandler() {
+    if (props.downloadFn) {
+      props.downloadFn(audioItem.value, props.playList);
+      return;
+    }
+    if (audioPlayerConfig.value.downloadFn) {
+      audioPlayerConfig.value.downloadFn(audioItem.value, props.playList);
+      return;
+    }
+  }
+  playRulesHandler(props.playRules);
+  speedHandler(props.speed);
+  initPlayer();
+  return {
+    speed,
+    playRules,
+    loading,
+    audioItem,
+    audioUrl,
+    currentDuration,
+    totalDuration,
+    progress,
+    isDrop,
+    isFullScreen,
+    volumeValue,
+    audioState,
+    speedLabel,
+    isCanPlay,
+    isPlaying,
+    isAnalyseType,
+    // 配置
+    speedList,
+    playRulesList,
+    // 函数
+    playAudio,
+    pauseAudio,
+    playPrevious,
+    playNext,
+    playRulesHandler,
+    speedHandler,
+    changeVolume,
+    getNowWh,
+    setAudioCurrentTime,
+    getPercent,
+    isCantPlayType,
+    jumpDuration,
+    initFullScreenEvent,
+    destroyFullScreenEvent,
+    onFullScreenHandler,
+    audioCutting,
+    onDownloadHandler
+  };
+};
+
+export { useAudioPlayer };

package/es/components/appAudioPlayer/style/appAudioPlayer.scss

@@ -0,0 +1,319 @@
+.audio-player {
+  width: 100%;
+  height: 256px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(var(--hy-border));
+  border-radius: 12px;
+  overflow: hidden;
+  .audio-play-box {
+    width: 100%;
+    height: 0;
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(var(--hy-background-3));
+    box-shadow: rgba(var(--hy-dialog-box-shadow));
+    border: 1px solid rgba(var(--hy-dialog-border));
+    border-radius: rgba(var(--hy-dialog-border-radius))
+      rgba(var(--hy-dialog-border-radius)) 0px 0px;
+
+    .point_area {
+      text-align: center;
+      position: relative;
+      width: 160px;
+      height: 160px;
+      transition: opacity 0.5s ease-out;
+      .point {
+        position: absolute !important;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 60%;
+        height: 60%;
+        margin: auto;
+        -webkit-border-radius: 50%;
+        -webkit-background-clip: padding-box;
+        -moz-border-radius: 50%;
+        -moz-background-clip: padding;
+      }
+      .point_dot {
+        width: 96px;
+        height: 96px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        color: rgba(var(--hy-main));
+        background-color: rgba(var(--hy-background-2));
+        z-index: 1;
+        .app-icon {
+          width: 58px;
+          height: 58px;
+        }
+      }
+      .point_10 {
+        width: 100%;
+        height: 100%;
+      }
+      .point_10:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: 50%;
+        border: 4px solid rgba(var(--hy-theme));
+        opacity: 0;
+        -webkit-animation: ripple 4.5s ease-out 225ms infinite;
+        animation: ripple 4.5s ease-out 225ms infinite;
+      }
+      .point_40 {
+        width: 100%;
+        height: 100%;
+      }
+      .point_40:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: 50%;
+        border: 4px solid rgba(var(--hy-theme));
+        opacity: 0;
+        -webkit-animation: ripple 4.5s ease-out 0.9s infinite;
+        animation: ripple 4.5s ease-out 0.9s infinite;
+      }
+      .point_80 {
+        width: 100%;
+        height: 100%;
+      }
+      .point_80:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-radius: 50%;
+        border: 4px solid rgba(var(--hy-theme));
+        opacity: 0;
+        -webkit-animation: ripple 4.5s ease-out 1.8s infinite;
+        animation: ripple 4.5s ease-out 1.8s infinite;
+      }
+    }
+  }
+
+  .operator-box {
+    width: 100%;
+    height: 54px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 20px;
+    position: relative;
+    padding: 0 12px 0;
+    color: rgba(var(--hy-main));
+    background: #040814;
+
+    .progress-operator {
+      display: flex;
+
+      input[type='range'] {
+        width: 100%;
+        height: 4px;
+        outline: none;
+        border-radius: 20px;
+        -webkit-appearance: none; /*清除系统默认样式*/
+        background-color: #eaf5f9;
+      }
+
+      input[type='range']::-webkit-slider-thumb {
+        -webkit-appearance: none; /*清除系统默认样式*/
+        width: 6px;
+        height: 6px;
+        border-radius: 20px;
+        background: rgba(var(--hy-main));
+        box-shadow: 0px 0px 6px 3px rgba(var(--hy-theme));
+        cursor: pointer;
+      }
+
+      input[type='range']::-ms-fill-lower {
+        -webkit-appearance: none;
+      }
+
+      &.progress-analyse {
+        width: 100%;
+        height: 6px;
+        position: absolute;
+        left: 0px;
+        top: 13px;
+        padding: 0 12px;
+      }
+      &:not(.progress-analyse) {
+        width: 0;
+        flex: 1;
+        flex-direction: column;
+        row-gap: 6px;
+
+        input[type='range'] {
+          height: 6px;
+        }
+
+        input[type='range']::-webkit-slider-thumb {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    }
+
+    .duration-operator {
+      display: flex;
+      align-items: center;
+      column-gap: 4px;
+      font-size: 12px;
+      color: rgba(var(--hy-auxiliary));
+      white-space: nowrap;
+    }
+
+    .play-operator {
+      display: flex;
+      align-items: center;
+      column-gap: 10px;
+      & > div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+      .app-icon {
+        width: 26px;
+        height: 26px;
+      }
+      &.play-analyse {
+        position: absolute;
+        top: calc(50% + 8px);
+        left: 50%;
+        transform: translate(-50%, -50%);
+        .app-icon {
+          &.last-icon,
+          &.next-icon {
+            width: 22px;
+            height: 22px;
+          }
+        }
+      }
+    }
+
+    .tools-operator {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      column-gap: 10px;
+      .speed-box {
+        min-width: 60px;
+        height: 24px;
+        font-size: 12px;
+        color: rgba(var(--hy-auxiliary));
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        user-select: none;
+        padding: 0 6px;
+        border: 1px solid rgba(var(--hy-border));
+        border-radius: 4px;
+        background-color: rgba(var(--hy-background-2));
+      }
+      .app-icon {
+        width: 26px;
+        height: 26px;
+        cursor: pointer;
+      }
+      &.tools-analyse {
+        .speed-box {
+          height: 20px;
+        }
+        .app-icon {
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+
+    &.operator-analyse {
+      padding-top: 20px;
+    }
+  }
+
+  &.audio-player-analyse {
+    height: 56px;
+  }
+}
+
+.popover-volume-slider {
+  min-width: auto !important;
+  width: 40px !important;
+  padding: 16px 0;
+}
+
+.popover-speed {
+  min-width: auto !important;
+  width: 62px !important;
+  padding: 0px !important;
+  .speed-list {
+    width: 100%;
+    color: rgba(var(--hy-auxiliary));
+    font-size: 12px;
+    li {
+      transition: 0.5s;
+      height: 26px;
+      line-height: 26px;
+      text-align: center;
+      &:after {
+        transition: 0s;
+      }
+      &:hover,
+      &.selectBox {
+        color: rgba(var(--hy-theme));
+        background: rgba(var(--hy-background-3));
+      }
+    }
+  }
+}
+
+@-webkit-keyframes ripple {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.1);
+  }
+  5% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale(1);
+  }
+}
+@keyframes ripple {
+  0% {
+    opacity: 0;
+    -webkit-transform: scale(0.1);
+    transform: scale(0.1);
+  }
+  5% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}

package/es/components/appButton/style/appButton.scss

@@ -7,7 +7,6 @@
   margin: 0;
   font: inherit;
   color: inherit;
-  box-sizing: border-box;
   white-space: nowrap;
   font-size: 14px;
 

package/es/components/appConfigProvider/appConfigProvider.vue.mjs

@@ -22,6 +22,11 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       required: false,
       default: () => /* @__PURE__ */ new Map()
     },
+    permissionMap: {
+      type: Map,
+      required: false,
+      default: () => /* @__PURE__ */ new Map()
+    },
     size: {
       type: String,
       required: false,
@@ -58,13 +63,29 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     table: {
       type: Object,
       required: false
+    },
+    audioPlayer: {
+      type: Object,
+      required: false
+    },
+    videoPlayer: {
+      type: Object,
+      required: false
     }
   },
   setup(__props) {
     const props = __props;
     const globalConfig = provideGlobalConfig(props, null, !unref(useGlobalConfig()));
     const config = computed(() => {
-      const { locale, api, userAvatarMap, ...config2 } = globalConfig.value;
+      const {
+        locale,
+        api,
+        userAvatarMap,
+        permissionMap,
+        audioPlayer,
+        videoPlayer,
+        ...config2
+      } = globalConfig.value;
       return {
         locale: ElementLocale[locale] || ElementLocale["zhCn"],
         ...config2