From 806888cce8249c48993687130dc4dff1bd86477d Mon Sep 17 00:00:00 2001
From: xiaohong <1315228474@qq.com>
Date: Tue, 16 Jul 2024 17:36:46 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=9F=B3?=
 =?UTF-8?q?=E9=A2=91=E6=92=AD=E6=94=BE=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/music/components/index.vue       |  4 +-
 .../music/components/list/audioBar/index.vue  | 61 ++++++++++++++++++-
 src/views/ai/music/components/list/index.vue  |  2 +-
 src/views/ai/music/components/mode/index.vue  |  7 +--
 4 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/src/views/ai/music/components/index.vue b/src/views/ai/music/components/index.vue
index 21272522..e1395b56 100644
--- a/src/views/ai/music/components/index.vue
+++ b/src/views/ai/music/components/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-1/1">
+  <div class="flex ">
     <!-- 模式 -->
     <Mode class="flex-none" @generate-music="generateMusic"/>
     <!-- 音频列表 -->
@@ -13,7 +13,7 @@ import List from './list/index.vue'
 
 defineOptions({ name: 'Index' })
 
-const listRef = ref<{generateMusic: (...args) => void} | null>(null)
+const listRef = ref<Nullable<{generateMusic: (...args) => void}>>(null)
 
 function generateMusic (args: {formData: Recordable}) {
  unref(listRef)?.generateMusic(args.formData)
diff --git a/src/views/ai/music/components/list/audioBar/index.vue b/src/views/ai/music/components/list/audioBar/index.vue
index 2b25e40f..412d7fef 100644
--- a/src/views/ai/music/components/list/audioBar/index.vue
+++ b/src/views/ai/music/components/list/audioBar/index.vue
@@ -1,9 +1,68 @@
 <template>
-  <div class="h-72px bg-[var(--el-bg-color-overlay)] b-solid b-1 b-[var(--el-border-color)] b-l-none">播放器</div>
+  <div class="flex items-center justify-between px-2 h-72px bg-[var(--el-bg-color-overlay)] b-solid b-1 b-[var(--el-border-color)] b-l-none">
+    <!-- 歌曲信息 -->
+    <div class="flex gap-[10px]">
+      <el-image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" class="w-[45px]"/>
+      <div>
+        <div>我很好</div>
+        <div class="text-[12px] text-gray-400">刘大壮</div>
+      </div>
+    </div>
+      
+    <!-- 音频controls -->
+    <div class="flex gap-[12px] items-center">
+      <Icon icon="majesticons:back-circle" :size="20" class="text-gray-300 cursor-pointer"/>
+      <Icon :icon="audioProps.paused ? 'mdi:arrow-right-drop-circle' : 'solar:pause-circle-bold'" :size="30" class=" cursor-pointer" @click="toggleStatus('paused')"/>
+      <Icon icon="majesticons:next-circle" :size="20" class="text-gray-300 cursor-pointer"/>
+      <div class="flex gap-[16px] items-center">
+        <span>{{audioProps.currentTime}}</span>
+        <el-slider v-model="audioProps.duration" color="#409eff" class="w-[160px!important] "/>
+        <span>{{ audioProps.duration }}</span>
+      </div>
+      <!-- 音频 -->
+      <audio v-bind="audioProps" ref="audioRef" controls v-show="!audioProps" @timeupdate="audioTimeUpdate">
+        <source :src="response"/>
+      </audio>
+    </div>
+
+    <!-- 音量控制器 -->
+    <div class="flex gap-[16px] items-center">
+      <Icon :icon="audioProps.muted ? 'tabler:volume-off' : 'tabler:volume'" :size="20" class="cursor-pointer" @click="toggleStatus('muted')"/>
+      <el-slider v-model="audioProps.volume" color="#409eff" class="w-[160px!important] "/>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { formatPast } from '@/utils/formatTime'
+import response from '@/assets/audio/response.mp3'
 
 defineOptions({ name: 'Index' })
 
+  const audioRef = ref<Nullable<HTMLElement>>(null)
+    // 音频相关属性https://www.runoob.com/tags/ref-av-dom.html
+  const audioProps = reactive({
+    autoplay: true,
+    paused: false,
+    currentTime: '00:00',
+    duration: '00:00',
+    muted:  false,
+    volume: 50,
+  })
+
+  function toggleStatus (type: string) {
+    audioProps[type] = !audioProps[type]
+    if (type === 'paused' && audioRef.value) {
+      if (audioProps[type]) {
+        audioRef.value.pause()
+      } else {
+        audioRef.value.play()
+      }
+    }
+  }
+
+  // 更新播放位置
+  function audioTimeUpdate (args) {
+    audioProps.currentTime = formatPast(new Date(args.timeStamp), 'mm:ss')
+  }
 </script>
diff --git a/src/views/ai/music/components/list/index.vue b/src/views/ai/music/components/list/index.vue
index 6dce9b8c..1b8a46e5 100644
--- a/src/views/ai/music/components/list/index.vue
+++ b/src/views/ai/music/components/list/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex flex-col h-[600px]">
     <div class="flex-auto flex overflow-hidden">
       <el-tabs v-model="currentType" class="flex-auto px-[var(--app-content-padding)]">
         <!-- 我的创作 -->
diff --git a/src/views/ai/music/components/mode/index.vue b/src/views/ai/music/components/mode/index.vue
index bb6cf116..61cf238e 100644
--- a/src/views/ai/music/components/mode/index.vue
+++ b/src/views/ai/music/components/mode/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <ContentWrap class="w-300px h-full">
+  <ContentWrap class="w-300px h-full mb-[0!important]">
     <el-radio-group v-model="generateMode" class="mb-15px">
       <el-radio-button label="desc">
         描述模式
@@ -28,10 +28,7 @@ const emits = defineEmits(['generate-music'])
 
 const generateMode = ref('lyric')
 
-interface ModeRef {
-  formData: Recordable
-}
-const modeRef = ref<ModeRef | null>(null)
+const modeRef = ref<Nullable<{ formData: Recordable }>>(null)
 
 /*
  *@Description: 根据信息生成音乐

From 922b0c4e6335c5f5b44a16dd7c18c24f83c69892 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 16 Jul 2024 18:02:48 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E3=80=90=E5=A2=9E=E5=8A=A0=E3=80=91?=
 =?UTF-8?q?=E7=94=BB=E5=BB=8A=E9=A1=B5=E9=9D=A2=EF=BC=8C=E4=B8=B4=E6=97=B6?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ai/image/index.ts           |  7 ++++-
 src/views/ai/image/square/index.vue | 42 +++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/views/ai/image/square/index.vue

diff --git a/src/api/ai/image/index.ts b/src/api/ai/image/index.ts
index 43ddc7ec..8eb16105 100644
--- a/src/api/ai/image/index.ts
+++ b/src/api/ai/image/index.ts
@@ -99,5 +99,10 @@ export const ImageApi = {
   // 删除绘画
   deleteImage: async (id: number) => {
     return await request.delete({ url: `/ai/image/delete?id=` + id })
-  }
+  },
+
+  // release 列表
+  publicList: async (params) => {
+    return await request.get({ url: `/ai/image/public-list`, params})
+  },
 }
diff --git a/src/views/ai/image/square/index.vue b/src/views/ai/image/square/index.vue
new file mode 100644
index 00000000..c8e2c4bf
--- /dev/null
+++ b/src/views/ai/image/square/index.vue
@@ -0,0 +1,42 @@
+<template>
+   <div class="card-list">
+     <div v-for="item in publicList" :key="item" class="card">
+       <img :src="item.picUrl" class="img"/>
+     </div>
+   </div>
+</template>
+<script setup lang="ts">
+import { ImageApi, ImageVO, ImageMidjourneyButtonsVO } from '@/api/ai/image'
+
+/** 属性 */
+const pageNo = ref<number>(1)
+const pageSize = ref<number>(20)
+const publicList = ref<ImageVO[]>([])
+
+/** 获取数据 */
+const getListData = async () => {
+  const res = await ImageApi.publicList({pageNo: pageNo.value, pageSize: pageSize.value});
+  publicList.value = res.list as ImageVO[];
+  console.log('publicList.value', publicList.value)
+}
+
+onMounted(async () => {
+  await getListData()
+})
+</script>
+<style scoped lang="scss">
+
+.card-list {
+  //display: flex;
+  //flex-direction: column;
+  column-count: 4;
+  column-gap: 3px;
+}
+
+.card {
+
+  .img {
+    width: 50%;
+  }
+}
+</style>