Feat/group folding

vue/src/charts/ChartsContainer.vue

@@ -43,15 +43,19 @@ const props = defineProps({
   charts: {
     type: Array,
     required: true
+  },
+  isExpand: {
+    type: Boolean,
+    required: true
   }
 })
 
 // ---------------------------------- 控制展开和关闭的状态 ----------------------------------
 
-const isExpand = ref(true)
+const emit = defineEmits(['update:isExpanded'])
 
 const handleExpand = () => {
-  isExpand.value = !isExpand.value
+  emit('update:isExpanded', !props.isExpand)
 }
 
 // ---------------------------------- charts组件列表 ----------------------------------

vue/src/views/charts/components/ChartsPage.vue

@@ -1,5 +1,12 @@
 <template>
-  <ChartsContainer v-for="group in groups" :key="group.name" :label="group.name" :charts="group.charts" />
+  <ChartsContainer
+    v-for="group in groups"
+    :key="group.name"
+    :label="group.name"
+    :charts="group.charts"
+    :isExpand="groupsExpand[group.name] !== undefined ? groupsExpand[group.name] : true"
+    @update:isExpanded="(value) => handleExpand(group.name, value)"
+  />
 </template>
 
 <script setup>
@@ -11,8 +18,9 @@
  **/
 import ChartsContainer from '@swanlab-vue/charts/ChartsContainer.vue'
 import { useProjectStore } from '@swanlab-vue/store'
-import { provide, onUnmounted } from 'vue'
+import { provide, onUnmounted, onMounted, reactive } from 'vue'
 import http from '@swanlab-vue/api/http'
+
 const props = defineProps({
   // 图表组
   groups: {
@@ -25,8 +33,29 @@ const props = defineProps({
     required: true
   }
 })
+
 const projectStore = useProjectStore()
 
+// ---------------------------------- 控制charts的展开关闭 ----------------------------------
+// 使用对象来跟踪每个group的展开状态
+const groupsExpand = reactive(JSON.parse(localStorage.getItem('groupsExpand')) || {})
+
+// 初始化每个group的展开状态
+onMounted(() => {
+  console.log(props.groups)
+  const storedStates = JSON.parse(localStorage.getItem('groupsExpand')) || {}
+  Object.keys(storedStates).forEach((groupName) => {
+    groupsExpand[groupName] = storedStates[groupName]
+  })
+})
+
+// 处理展开状态改变
+const handleExpand = (groupName, newValue) => {
+  groupsExpand[groupName] = newValue
+  // 更新localStorage
+  localStorage.setItem('groupsExpand', JSON.stringify(groupsExpand))
+}
+
 // ---------------------------------- 轮询器 ----------------------------------
 const intervalMap = new Map()
 const createInterval = (exp_name, cid, callback) => {

vue/src/views/experiment/pages/chart/ChartPage.vue

@@ -6,6 +6,12 @@
       :key="group.name"
       :label="getGroupName(group.name)"
       :charts="getCharts(group)"
+      :isExpand="
+        groupExpand[experimentName] && groupExpand[experimentName][group.name] !== undefined
+          ? groupExpand[experimentName][group.name]
+          : true
+      "
+      @update:isExpanded="(value) => handleExpand(experimentName, group.name, value)"
     />
     <!-- 图表不存在 -->
     <p class="font-semibold pt-5 text-center" v-if="groups.length === 0">Empty Chart</p>
@@ -20,7 +26,7 @@
  **/
 import { useExperimentStore, useProjectStore } from '@swanlab-vue/store'
 import http from '@swanlab-vue/api/http'
-import { ref, provide } from 'vue'
+import { ref, provide, onMounted, reactive } from 'vue'
 import ChartsContainer from '@swanlab-vue/charts/ChartsContainer.vue'
 import { t } from '@swanlab-vue/i18n'
 import { useRoute } from 'vue-router'
@@ -120,6 +126,33 @@ const parseCharts = (data) => {
   groups.value = temp
 }
 
+// ---------------------------------- 控制charts的展开关闭 ----------------------------------
+
+// 获取实验名称
+const experimentName = ref(experimentStore.experiment.name)
+
+// 使用对象跟踪单个实验图表group的展开状态
+const groupExpand = reactive(JSON.parse(localStorage.getItem('groupExpand')) || {})
+
+// 初始化每个group的展开状态
+onMounted(() => {
+  console.log(groups.value)
+  const storedStates = JSON.parse(localStorage.getItem('groupExpand')) || {}
+  if (!groupExpand[experimentName]) {
+    groupExpand[experimentName] = storedStates[experimentName] || {}
+  }
+})
+
+// 处理展开状态改变
+const handleExpand = (experimentName, groupName, newValue) => {
+  if (!groupExpand[experimentName]) {
+    groupExpand[experimentName] = {}
+  }
+  groupExpand[experimentName][groupName] = newValue
+  // 更新Localstorage
+  localStorage.setItem('groupExpand', JSON.stringify(groupExpand))
+}
+
 // ---------------------------------- 发布、订阅模型 ----------------------------------
 // 请求映射表，反映映射状态
 class RequestMap {