Feature/multi exp charts

swanlab/server/controller/utils/charts.py

@@ -57,7 +57,7 @@ def get_proj_charts(id: int):
     """
     # 获取当前项目下所有的多实验对比表
     # 暂时只请求chart.type为default或者line的图表
-    allow_types = ["default", "line"]
+    allow_types = ["default", "line","image", "audio"]
     multi_charts = Chart.filter(Chart.project_id == id, Chart.type.in_(allow_types))
     # 获取图表配置
     charts = []

vue/src/charts/components/LinChartTooltip.vue

@@ -108,6 +108,7 @@ defineExpose({
 <style lang="scss" scoped>
 .lc-tooltip {
   @apply py-2 px-3 absolute bg-default border rounded z-10;
+  min-width: 180px;
   box-shadow: rgba(21, 24, 31, 0.16) 0px 12px 24px 0px;
   visibility: visible;
   p {

vue/src/charts/components/SlideBar.vue

@@ -51,6 +51,11 @@ const props = defineProps({
   turnByArrow: {
     type: Boolean,
     default: false
+  },
+  // 方向键的类型，false：左右键，true：上下键
+  verticalArrow: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -105,9 +110,9 @@ const handleChange = (e) => {
 
 const handleKeydown = (e) => {
   if (!props.turnByArrow) return
-  if (e.key == 'ArrowLeft') {
+  if (e.key == (props.verticalArrow ? 'ArrowDown' : 'ArrowLeft')) {
     handleClickDown()
-  } else if (e.key == 'ArrowRight') {
+  } else if (e.key == (props.verticalArrow ? 'ArrowUp' : 'ArrowRight')) {
     handleClickUp()
   }
 }

vue/src/charts/modules/AudioModule.vue

@@ -1,25 +1,27 @@
 <template>
   <!-- 音频容器，完成响应式 -->
   <div class="audios-container" :class="setGrid()" ref="audiosRef">
-    <div
-      class="audio-container"
-      :ref="(el) => handleAddAudio(index, el)"
-      v-for="(audio, index) in audios"
-      :key="audio.title"
-    >
-      <div class="flex items-center mt-2">
-        <PlayButton
-          v-model="playingList[index]"
-          :color="colors[0]"
-          @play="handlePlay(index)"
-          @pause="handelPause(index)"
-        />
-        <!-- 当前时间 -->
-        <p class="text-sm ml-1" v-if="audioRef[index]">{{ formatTime(index) }}</p>
-        <!-- 文件名称 -->
-        <p class="text-sm w-full text-center -ml-10">{{ audios[index].caption }}</p>
-        <!-- 下载按钮 -->
-        <DownloadButton @click="download(index)" />
+    <div v-for="(audio, index) in audios" :key="audio.title">
+      <!-- 多实验时，展示实验标题 -->
+      <div class="text-xs flex items-center pb-1" :title="audio.exp" v-if="audio.exp">
+        <div class="h-2 w-2 rounded-full shrink-0" :style="{ backgroundColor: audio.color }"></div>
+        <p class="pl-1 truncate">{{ audio.exp }}</p>
+      </div>
+      <div class="audio-container" :ref="(el) => handleAddAudio(index, el)">
+        <div class="flex items-center mt-2">
+          <PlayButton
+            v-model="playingList[index]"
+            :color="colors[0]"
+            @play="handlePlay(index)"
+            @pause="handelPause(index)"
+          />
+          <!-- 当前时间 -->
+          <p class="text-sm ml-1" v-if="audioRef[index]">{{ formatTime(index) }}</p>
+          <!-- 文件名称 -->
+          <p class="text-sm w-full text-center -ml-10">{{ audios[index].caption }}</p>
+          <!-- 下载按钮 -->
+          <DownloadButton @click="download(index)" />
+        </div>
       </div>
     </div>
   </div>
@@ -37,7 +39,7 @@ import PlayButton from '../components/PlayButton.vue'
 import { debounce } from '@swanlab-vue/utils/common'
 import DownloadButton from '../components/DownloadButton.vue'
 const props = defineProps({
-  // 接受的音频数据，格式为 [{ audioBuffer: AudioBuffer, title: String, caption: , tag: String, caption: String } ]
+  // 接受的音频数据，格式为 [{ audioBuffer: AudioBuffer, title: String, tag: String, caption: String } ]
   audios: {
     type: Object,
     required: true