SikongJueluo/FPGA_WebLab
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: upload and download bitstream from the component of project view

Browse Source
This commit is contained in:
SikongJueluo
2025-05-13 18:14:57 +08:00
parent eae67d04d4
commit eea03f5bc8
15 changed files with 4243 additions and 1365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/CollapsibleSection.vue
View File

@@ -3,35 +3,39 @@
interface Props {
title: string;
isExpanded?: boolean;
status?: 'default' | 'success' | 'error';
status?: "default" | "success" | "error";
}
const props = withDefaults(defineProps<Props>(), {
isExpanded: false,
status: 'default'
status: "default",
});
const emit = defineEmits<{
(e: 'update:isExpanded', value: boolean): void
(e: "update:isExpanded", value: boolean): void;
}>();
// 切换展开/收起状态
const toggleExpand = () => {
emit('update:isExpanded', !props.isExpanded);
emit("update:isExpanded", !props.isExpanded);
};
// 动画处理函数
const enter = (element: Element, done: () => void) => {
if (element instanceof HTMLElement) {
const height = element.scrollHeight;
element.style.height = '0px';
element.style.height = "0px";
// 触发重绘
element.offsetHeight;
element.style.height = height + 'px';
element.addEventListener('transitionend', () => {
done();
}, { once: true });
element.style.height = height + "px";
element.addEventListener(
"transitionend",
() => {
done();
},
{ once: true },
);
} else {
done();
}
@@ -39,21 +43,25 @@ const enter = (element: Element, done: () => void) => {
const afterEnter = (element: Element) => {
if (element instanceof HTMLElement) {
element.style.height = 'auto';
element.style.height = "auto";
}
};
const leave = (element: Element, done: () => void) => {
if (element instanceof HTMLElement) {
const height = element.scrollHeight;
element.style.height = height + 'px';
element.style.height = height + "px";
// 触发重绘
element.offsetHeight;
element.style.height = '0px';
element.addEventListener('transitionend', () => {
done();
}, { once: true });
element.style.height = "0px";
element.addEventListener(
"transitionend",
() => {
done();
},
{ once: true },
);
} else {
done();
}
@@ -61,17 +69,12 @@ const leave = (element: Element, done: () => void) => {
</script>
<template>
<div class="section" :class="[`status-${status}`]">
<div class="section-header" @click="toggleExpand">
<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"
>
<transition name="collapse" @enter="enter" @after-enter="afterEnter" @leave="leave">
<div v-show="isExpanded" class="section-content">
<div class="section-inner">
<slot></slot>
@@ -88,7 +91,6 @@ const leave = (element: Element, done: () => void) => {
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);
}
@@ -119,26 +121,58 @@ const leave = (element: Element, done: () => void) => {
}
@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));}
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));}
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));}
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;
@@ -148,10 +182,6 @@ const leave = (element: Element, done: () => void) => {
transition: all var(--transition-normal, 0.3s);
}
.section-header:hover {
background-color: hsl(var(--b2));
}
.section-header h2 {
margin: 0;
font-size: 1.1em;
@@ -188,10 +218,12 @@ const leave = (element: Element, done: () => void) => {
}
.content-wrapper {
overflow: visible; /* 允许内容溢出 */
overflow: visible;
/* 允许内容溢出 */
}
.card-body {
overflow: visible; /* 允许内容溢出 */
overflow: visible;
/* 允许内容溢出 */
}
</style>