FPGA_WebLab/src/components/CollapsibleSection.vue

<script setup lang="ts">
// 定义属性接口
interface Props {
  title: string;
  isExpanded?: boolean;
  status?: "default" | "success" | "error";
}

const props = withDefaults(defineProps<Props>(), {
  isExpanded: false,
  status: "default",
});

const emit = defineEmits<{
  (e: "update:isExpanded", value: boolean): void;
}>();

// 切换展开/收起状态
const toggleExpand = () => {
  emit("update:isExpanded", !props.isExpanded);
};

// 动画处理函数
const enter = (element: Element, done: () => void) => {
  if (element instanceof HTMLElement) {
    const height = element.scrollHeight;
    element.style.height = "0px";
    // 触发重绘
    element.offsetHeight;
    element.style.height = height + "px";

    element.addEventListener(
      "transitionend",
      () => {
        done();
      },
      { once: true },
    );
  } else {
    done();
  }
};

const afterEnter = (element: Element) => {
  if (element instanceof HTMLElement) {
    element.style.height = "auto";
  }
};

const leave = (element: Element, done: () => void) => {
  if (element instanceof HTMLElement) {
    const height = element.scrollHeight;
    element.style.height = height + "px";
    // 触发重绘
    element.offsetHeight;
    element.style.height = "0px";

    element.addEventListener(
      "transitionend",
      () => {
        done();
      },
      { once: true },
    );
  } else {
    done();
  }
};
</script>

<template>
  <div class="section m-4 shadow-xl" :class="[`status-${status}`]">
    <div class="section-header bg-primary text-primary-content" @click="toggleExpand">
      <h2>{{ title }}</h2>
      <span class="expand-icon" :class="{ 'is-expanded': isExpanded }">▶</span>
    </div>
    <transition name="collapse" @enter="enter" @after-enter="afterEnter" @leave="leave">
      <div v-show="isExpanded" class="section-content">
        <div class="section-inner">
          <slot></slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped>
.section {
  margin-bottom: var(--spacing-md, 0.75rem);
  border: 1px solid hsl(var(--b3));
  border-radius: var(--radius-md, 0.375rem);
  overflow: hidden;
  background-color: hsl(var(--b1));
  transition: all var(--transition-normal, 0.3s);
}

/* 默认状态 */
.section.status-default {
  border-color: hsl(var(--b3));
}

/* 成功状态 */
.section.status-success {
  animation: borderPulseSuccess 2s cubic-bezier(0.4, 0, 0.2, 1);
  border-color: hsl(var(--su));
  box-shadow: 0px 0px 3px hsl(var(--su));
}

/* 失败状态 */
.section.status-error {
  animation: borderPulseError 2s cubic-bezier(0.4, 0, 0.2, 1);
  border-color: hsl(var(--er));
  box-shadow: 0px 0px 3px hsl(var(--er));
}

/* 信息状态 */
.section.status-info {
  animation: borderPulseInfo 2s cubic-bezier(0.4, 0, 0.2, 1);
  border-color: hsl(var(--in));
  box-shadow: 0px 0px 3px hsl(var(--in));
}

@keyframes borderPulseSuccess {
  0% {
    border-color: hsl(var(--b3));
    box-shadow: 0px 0px 0px transparent;
  }

  50% {
    border-color: hsl(var(--su));
    box-shadow: 0px 0px 5px hsl(var(--su));
  }

  100% {
    border-color: hsl(var(--su));
    box-shadow: 0px 0px 3px hsl(var(--su));
  }
}

@keyframes borderPulseError {
  0% {
    border-color: hsl(var(--b3));
    box-shadow: 0px 0px 0px transparent;
  }

  50% {
    border-color: hsl(var(--er));
    box-shadow: 0px 0px 5px hsl(var(--er));
  }

  100% {
    border-color: hsl(var(--er));
    box-shadow: 0px 0px 3px hsl(var(--er));
  }
}

@keyframes borderPulseInfo {
  0% {
    border-color: hsl(var(--b3));
    box-shadow: 0px 0px 0px transparent;
  }

  50% {
    border-color: hsl(var(--in));
    box-shadow: 0px 0px 5px hsl(var(--in));
  }

  100% {
    border-color: hsl(var(--in));
    box-shadow: 0px 0px 3px hsl(var(--in));
  }
}

.section-header {
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 0.75rem);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  border-bottom: 1px solid hsl(var(--b3));
  transition: all var(--transition-normal, 0.3s);
}

.section-header h2 {
  margin: 0;
  font-size: 1.1em;
  font-weight: 500;
  color: hsl(var(--p));
  transition: color var(--transition-normal, 0.3s);
}

.expand-icon {
  font-size: 16px;
  color: hsl(var(--bc));
  transition: all var(--transition-normal, 0.3s);
}

.expand-icon.is-expanded {
  transform: rotate(90deg);
}

.section-content {
  overflow: hidden;
  transition: all var(--transition-normal, 0.3s);
  background-color: transparent;
}

.section-inner {
  padding: var(--spacing-md, 0.75rem);
  color: hsl(var(--bc));
}

@media (max-width: 900px) {
  .section-inner {
    padding: var(--spacing-sm, 0.5rem);
  }
}

.content-wrapper {
  overflow: visible;
  /* 允许内容溢出 */
}

.card-body {
  overflow: visible;
  /* 允许内容溢出 */
}
</style>