From c28fc4c1ba03292044ecee9f746bf3f36e0e24a0 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Wed, 3 Jan 2024 15:47:07 +0800
Subject: [PATCH] chore(audio): split demo (#2815)

---
 src/packages/__VUE/audio/demo.vue          | 166 ---------------------
 src/packages/__VUE/audio/demo/basic.vue    |   6 +
 src/packages/__VUE/audio/demo/control.vue  |  47 ++++++
 src/packages/__VUE/audio/demo/index.vue    |  38 +++++
 src/packages/__VUE/audio/demo/play.vue     |  32 ++++
 src/packages/__VUE/audio/demo/progress.vue |  13 ++
 src/packages/__VUE/audio/doc.en-US.md      | 118 +--------------
 src/packages/__VUE/audio/doc.md            | 118 +--------------
 8 files changed, 144 insertions(+), 394 deletions(-)
 delete mode 100644 src/packages/__VUE/audio/demo.vue
 create mode 100644 src/packages/__VUE/audio/demo/basic.vue
 create mode 100644 src/packages/__VUE/audio/demo/control.vue
 create mode 100644 src/packages/__VUE/audio/demo/index.vue
 create mode 100644 src/packages/__VUE/audio/demo/play.vue
 create mode 100644 src/packages/__VUE/audio/demo/progress.vue

diff --git a/src/packages/__VUE/audio/demo.vue b/src/packages/__VUE/audio/demo.vue
deleted file mode 100644
index f984e81046..0000000000
--- a/src/packages/__VUE/audio/demo.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-audio
-      style="margin-left: 20px"
-      url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-      :muted="muted"
-      :autoplay="autoplay"
-      :loop="true"
-      type="icon"
-    ></nut-audio>
-
-    <h2>{{ translate('voicePlay') }}</h2>
-    <nut-audio
-      ref="audioDemo"
-      style="margin-left: 20px"
-      url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-      :muted="muted"
-      :autoplay="autoplay"
-      :loop="false"
-      type="none"
-      @can-play="onCanplay"
-    >
-      <div class="nut-voice">
-        <Voice></Voice>
-        <div>{{ duration }}"</div>
-      </div>
-    </nut-audio>
-
-    <h2>{{ translate('progress') }}</h2>
-    <nut-audio
-      style="margin-left: 20px"
-      url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-      :muted="muted"
-      :autoplay="autoplay"
-      :loop="true"
-      type="progress"
-    >
-      <div class="nut-audio-operate-group">
-        <nut-audio-operate type="back"></nut-audio-operate>
-        <nut-audio-operate type="play"></nut-audio-operate>
-        <nut-audio-operate type="forward"></nut-audio-operate>
-        <nut-audio-operate type="mute"></nut-audio-operate>
-      </div>
-    </nut-audio>
-
-    <h2>{{ translate('customControl') }}</h2>
-    <nut-audio
-      style="margin-left: 20px"
-      url="http://storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-      :muted="muted"
-      :autoplay="autoplay"
-      :loop="false"
-      type="progress"
-      @forward="forward"
-      @fast-back="fastBack"
-      @play="changeStatus"
-      @ended="ended"
-      @change-progress="changeProgress"
-    >
-      <div class="nut-audio-operate-group">
-        <nut-audio-operate type="back">
-          <PlayDoubleBack width="35px" height="35px"></PlayDoubleBack>
-        </nut-audio-operate>
-        <nut-audio-operate type="play">
-          <PlayStart v-if="!playing" width="35px" height="35px"></PlayStart>
-          <PlayStop v-else width="35px" height="35px"></PlayStop>
-        </nut-audio-operate>
-        <nut-audio-operate type="forward">
-          <PlayDoubleForward width="35px" height="35px"></PlayDoubleForward>
-        </nut-audio-operate>
-      </div>
-    </nut-audio>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop, Voice } from '@nutui/icons-vue';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    voicePlay: '语音播放',
-    progress: '进度条展示',
-    customControl: '自定义操作按钮'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    voicePlay: 'Voice Playing',
-    progress: 'Progress',
-    customControl: 'Custom Control'
-  }
-});
-
-const audioDemo = ref({
-  second: 0
-});
-const playing = ref(false);
-const duration = ref<string>('');
-const muted = ref(false);
-const autoplay = ref(false);
-
-const fastBack = () => {
-  console.log('倒退');
-};
-
-const forward = (progress: number) => {
-  console.log('快进', '当前时间' + progress);
-};
-
-const changeStatus = (status: boolean) => {
-  console.log('当前播放状态', status);
-  playing.value = status;
-};
-
-const ended = () => {
-  console.log('播放结束');
-};
-
-const changeProgress = (val: number) => {
-  console.log('改变进度条', val);
-};
-
-const onCanplay = (e: Event) => {
-  duration.value = audioDemo.value.second.toFixed();
-  console.log(e, duration.value);
-};
-
-onMounted(() => {
-  console.log(audioDemo.value);
-});
-</script>
-<style lang="scss" scoped>
-.nut-theme-dark {
-  .demo {
-    .nut-voice {
-      background: $dark-color;
-      border: 1px solid $dark-color;
-      border-radius: 18px;
-    }
-
-    .nut-audio-operate {
-      color: $dark-color;
-    }
-  }
-}
-
-.demo {
-  .nut-voice {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100px;
-    height: 20px;
-    padding: 8px;
-    border: 1px solid rgba(0, 0, 0, 0.6);
-    border-radius: 18px;
-  }
-
-  :deep(svg.nut-icon-am-rotate) {
-    --animate-duration: 1s !important;
-    --animate-delay: 0s;
-  }
-}
-</style>
diff --git a/src/packages/__VUE/audio/demo/basic.vue b/src/packages/__VUE/audio/demo/basic.vue
new file mode 100644
index 0000000000..94a7e8bbeb
--- /dev/null
+++ b/src/packages/__VUE/audio/demo/basic.vue
@@ -0,0 +1,6 @@
+<template>
+  <nut-audio :url="url" loop type="icon"></nut-audio>
+</template>
+<script setup lang="ts">
+const url = '//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav';
+</script>
diff --git a/src/packages/__VUE/audio/demo/control.vue b/src/packages/__VUE/audio/demo/control.vue
new file mode 100644
index 0000000000..9c3c785bc6
--- /dev/null
+++ b/src/packages/__VUE/audio/demo/control.vue
@@ -0,0 +1,47 @@
+<template>
+  <nut-audio
+    :url="url"
+    :loop="false"
+    type="progress"
+    @forward="forward"
+    @fast-back="fastBack"
+    @play="changeStatus"
+    @ended="ended"
+    @change-progress="changeProgress"
+  >
+    <div class="nut-audio-operate-group">
+      <nut-audio-operate type="back">
+        <PlayDoubleBack width="35px" height="35px"></PlayDoubleBack>
+      </nut-audio-operate>
+      <nut-audio-operate type="play">
+        <PlayStart v-if="!playing" width="35px" height="35px"></PlayStart>
+        <PlayStop v-else width="35px" height="35px"></PlayStop>
+      </nut-audio-operate>
+      <nut-audio-operate type="forward">
+        <PlayDoubleForward width="35px" height="35px"></PlayDoubleForward>
+      </nut-audio-operate>
+    </div>
+  </nut-audio>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop } from '@nutui/icons-vue';
+const url = '//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav';
+const playing = ref(false);
+const fastBack = () => {
+  console.log('Backwards');
+};
+const forward = (progress: string) => {
+  console.log('Fast forward', 'Current Time' + progress);
+};
+const changeStatus = (status: boolean) => {
+  console.log('Current play status', status);
+  playing.value = status;
+};
+const ended = () => {
+  console.log('Playing ended');
+};
+const changeProgress = (val: string) => {
+  console.log('Change progress', val);
+};
+</script>
diff --git a/src/packages/__VUE/audio/demo/index.vue b/src/packages/__VUE/audio/demo/index.vue
new file mode 100644
index 0000000000..6e1fac3593
--- /dev/null
+++ b/src/packages/__VUE/audio/demo/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('play') }}</h2>
+    <Play />
+
+    <h2>{{ t('progress') }}</h2>
+    <Progress />
+
+    <h2>{{ t('control') }}</h2>
+    <Control />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Play from './play.vue';
+import Progress from './progress.vue';
+import Control from './control.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    play: '语音播放',
+    progress: '进度条展示',
+    control: '自定义操作按钮'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    play: 'Voice Playing',
+    progress: 'Progress',
+    control: 'Custom Control'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/audio/demo/play.vue b/src/packages/__VUE/audio/demo/play.vue
new file mode 100644
index 0000000000..2d2a74ece8
--- /dev/null
+++ b/src/packages/__VUE/audio/demo/play.vue
@@ -0,0 +1,32 @@
+<template>
+  <nut-audio ref="audioRef" :url="url" :loop="false" type="none">
+    <div class="custom-audio">
+      <div><Voice></Voice></div>
+      <div>{{ duration }}"</div>
+    </div>
+  </nut-audio>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Voice } from '@nutui/icons-vue';
+const url = '//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav';
+const audioRef = ref();
+const duration = ref(0);
+onMounted(() => {
+  setTimeout(() => {
+    duration.value = audioRef.value?.second?.toFixed();
+  }, 500);
+});
+</script>
+<style>
+.custom-audio {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100px;
+  height: 20px;
+  padding: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  border-radius: 18px;
+}
+</style>
diff --git a/src/packages/__VUE/audio/demo/progress.vue b/src/packages/__VUE/audio/demo/progress.vue
new file mode 100644
index 0000000000..3ee11c9b48
--- /dev/null
+++ b/src/packages/__VUE/audio/demo/progress.vue
@@ -0,0 +1,13 @@
+<template>
+  <nut-audio :url="url" loop type="progress">
+    <nut-space>
+      <nut-audio-operate type="back"></nut-audio-operate>
+      <nut-audio-operate type="play"></nut-audio-operate>
+      <nut-audio-operate type="forward"></nut-audio-operate>
+      <nut-audio-operate type="mute"></nut-audio-operate>
+    </nut-space>
+  </nut-audio>
+</template>
+<script setup lang="ts">
+const url = '//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav';
+</script>
diff --git a/src/packages/__VUE/audio/doc.en-US.md b/src/packages/__VUE/audio/doc.en-US.md
index f24dc12ff6..0f5adea6d2 100644
--- a/src/packages/__VUE/audio/doc.en-US.md
+++ b/src/packages/__VUE/audio/doc.en-US.md
@@ -16,129 +16,19 @@ app.use(Audio);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-audio url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav" :loop="true" type="icon"></nut-audio>
-</template>
-```
-
-:::
+> demo: audio basic
 
 ### Voice Playing
 
-:::demo
-
-```vue
-<template>
-  <nut-audio url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav" :loop="false" type="none" ref="audioDemo">
-    <div class="nut-voice">
-      <div><Voice></Voice></div>
-      <div>{{ duration }}"</div>
-    </div>
-  </nut-audio>
-</template>
-<script setup>
-import { ref, onMounted } from 'vue';
-import { Voice } from '@nutui/icons-vue';
-const audioDemo = ref(null);
-const duration = ref(0);
-onMounted(() => {
-  setTimeout(() => {
-    duration.value = audioDemo.value.second.toFixed();
-  }, 500);
-});
-</script>
-
-<style>
-.nut-voice {
-  display: flex;
-  justify-content: space-between;
-  width: 100px;
-  height: 20px;
-  padding: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.6);
-  border-radius: 18px;
-}
-</style>
-```
-
-:::
+> demo: audio play
 
 ### Progress
 
-:::demo
-
-```vue
-<template>
-  <nut-audio url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav" :loop="true" type="progress">
-    <div class="nut-audio-operate-group">
-      <nut-audio-operate type="back"></nut-audio-operate>
-      <nut-audio-operate type="play"></nut-audio-operate>
-      <nut-audio-operate type="forward"></nut-audio-operate>
-      <nut-audio-operate type="mute"></nut-audio-operate>
-    </div>
-  </nut-audio>
-</template>
-```
-
-:::
+> demo: audio progress
 
 ### Custom Control
 
-:::demo
-
-```vue
-<template>
-  <nut-audio
-    url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-    :loop="false"
-    type="progress"
-    @forward="forward"
-    @fastBack="fastBack"
-    @play="changeStatus"
-    @ended="ended"
-    @changeProgress="changeProgress"
-  >
-    <div class="nut-audio-operate-group">
-      <nut-audio-operate type="back">
-        <PlayDoubleBack width="35px" height="35px"></PlayDoubleBack>
-      </nut-audio-operate>
-      <nut-audio-operate type="play">
-        <PlayStart v-if="!playing" width="35px" height="35px"></PlayStart>
-        <PlayStop v-else width="35px" height="35px"></PlayStop>
-      </nut-audio-operate>
-      <nut-audio-operate type="forward">
-        <PlayDoubleForward width="35px" height="35px"></PlayDoubleForward>
-      </nut-audio-operate>
-    </div>
-  </nut-audio>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop } from '@nutui/icons-vue';
-const playing = ref(false);
-const fastBack = () => {
-  console.log('Backwards');
-};
-const forward = (progress) => {
-  console.log('Fast forward', 'Current Time' + progress);
-};
-const changeStatus = (status) => {
-  console.log('Current play status', status);
-  playing.value = status;
-};
-const ended = () => {
-  console.log('Playing ended');
-};
-const changeProgress = (val) => {
-  console.log('Change progress', val);
-};
-</script>
-```
-
-:::
+> demo: audio control
 
 ## API
 
diff --git a/src/packages/__VUE/audio/doc.md b/src/packages/__VUE/audio/doc.md
index 13278988f6..119c348d35 100644
--- a/src/packages/__VUE/audio/doc.md
+++ b/src/packages/__VUE/audio/doc.md
@@ -16,129 +16,19 @@ app.use(Audio);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-audio url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav" :loop="true" type="icon"></nut-audio>
-</template>
-```
-
-:::
+> demo: audio basic
 
 ### 语音播放
 
-:::demo
-
-```vue
-<template>
-  <nut-audio url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav" :loop="false" type="none" ref="audioDemo">
-    <div class="nut-voice">
-      <div><Voice></Voice></div>
-      <div>{{ duration }}"</div>
-    </div>
-  </nut-audio>
-</template>
-<script setup>
-import { ref, onMounted } from 'vue';
-import { Voice } from '@nutui/icons-vue';
-const audioDemo = ref(null);
-const duration = ref(0);
-onMounted(() => {
-  setTimeout(() => {
-    duration.value = audioDemo.value.second.toFixed();
-  }, 500);
-});
-</script>
-
-<style>
-.nut-voice {
-  display: flex;
-  justify-content: space-between;
-  width: 100px;
-  height: 20px;
-  padding: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.6);
-  border-radius: 18px;
-}
-</style>
-```
-
-:::
+> demo: audio play
 
 ### 进度条展示
 
-:::demo
-
-```vue
-<template>
-  <nut-audio url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav" :loop="true" type="progress">
-    <div class="nut-audio-operate-group">
-      <nut-audio-operate type="back"></nut-audio-operate>
-      <nut-audio-operate type="play"></nut-audio-operate>
-      <nut-audio-operate type="forward"></nut-audio-operate>
-      <nut-audio-operate type="mute"></nut-audio-operate>
-    </div>
-  </nut-audio>
-</template>
-```
-
-:::
+> demo: audio progress
 
 ### 自定义操作按钮
 
-:::demo
-
-```vue
-<template>
-  <nut-audio
-    url="//storage.360buyimg.com/jdcdkh/SMB/VCG231024564.wav"
-    :loop="false"
-    type="progress"
-    @forward="forward"
-    @fastBack="fastBack"
-    @play="changeStatus"
-    @ended="ended"
-    @changeProgress="changeProgress"
-  >
-    <div class="nut-audio-operate-group">
-      <nut-audio-operate type="back">
-        <PlayDoubleBack width="35px" height="35px"></PlayDoubleBack>
-      </nut-audio-operate>
-      <nut-audio-operate type="play">
-        <PlayStart v-if="!playing" width="35px" height="35px"></PlayStart>
-        <PlayStop v-else width="35px" height="35px"></PlayStop>
-      </nut-audio-operate>
-      <nut-audio-operate type="forward">
-        <PlayDoubleForward width="35px" height="35px"></PlayDoubleForward>
-      </nut-audio-operate>
-    </div>
-  </nut-audio>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { PlayDoubleBack, PlayDoubleForward, PlayStart, PlayStop } from '@nutui/icons-vue';
-const playing = ref(false);
-const fastBack = () => {
-  console.log('倒退');
-};
-const forward = (progress) => {
-  console.log('快进', '当前时间' + progress);
-};
-const changeStatus = (status) => {
-  console.log('当前播放状态', status);
-  playing.value = status;
-};
-const ended = () => {
-  console.log('播放结束');
-};
-const changeProgress = (val) => {
-  console.log('改变进度条', val);
-};
-</script>
-```
-
-:::
+> demo: audio control
 
 ## API