feat: Refactor code structure for improved readability and maintainability
This commit is contained in:
alivender
197
src/components/CollapsibleSection.vue
Normal file
197
src/components/CollapsibleSection.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<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" :class="[`status-${status}`]">
|
||||
<div class="section-header" @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));
|
||||
box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
|
||||
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);
|
||||
background-color: hsl(var(--b1));
|
||||
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:hover {
|
||||
background-color: hsl(var(--b2));
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user