feat:1.任务大纲编排删除功能新增2.编辑窗口放大缩小功能

This commit is contained in:
liailing1026
2026-02-28 13:40:58 +08:00
parent 8b9c493393
commit f267462e70
4 changed files with 128 additions and 16 deletions

View File

@@ -11,6 +11,7 @@ const agentsStore = useAgentsStore()
// 面板显示状态
const visible = ref(false)
const activeTab = ref('outline')
const isMaximized = ref(false)
// 判断是否有流程数据
const planReady = computed(() => {
@@ -65,6 +66,11 @@ const handleTabChange = (tabKey: string) => {
activeTab.value = tabKey
}
// 切换最大化/还原
const toggleMaximize = () => {
isMaximized.value = !isMaximized.value
}
// 暴露给父组件
defineExpose({
open,
@@ -76,7 +82,7 @@ defineExpose({
<Teleport to="body">
<!-- 面板主体 -->
<Transition name="slide-up">
<div v-if="visible" class="settings-panel">
<div v-if="visible" :class="['settings-panel', { 'is-maximized': isMaximized }]">
<!-- 标签栏 -->
<div class="panel-header">
<div class="tabs-container">
@@ -98,6 +104,9 @@ defineExpose({
</span>
</div>
</div>
<button class="maximize-btn" @click="toggleMaximize">
<SvgIcon :icon-class="isMaximized ? 'SuoXiao' : 'FangDa'" size="20px" />
</button>
<button class="close-btn" @click="close">
<SvgIcon icon-class="close" size="20px" />
</button>
@@ -129,11 +138,12 @@ defineExpose({
// 面板主体
.settings-panel {
position: fixed;
bottom: 20px;
left: 50%;
margin-left: -40%;
bottom: 6%;
left: 0;
right: 0;
width: 80%;
max-width: 1200px;
margin: 0 auto;
height: 70vh;
background: var(--color-bg-three);
border-radius: 20px;
@@ -142,6 +152,17 @@ defineExpose({
display: flex;
flex-direction: column;
overflow: hidden;
transition: width 0.4s ease, height 0.4s ease, bottom 0.4s ease, border-radius 0.4s ease;
&.is-maximized {
max-width: none;
left: 24px;
right: 24px;
width: auto;
height: calc(100% - 194px);
bottom: 24px;
border-radius: 20px;
}
}
// 标题栏(包含标签栏)
@@ -161,6 +182,26 @@ defineExpose({
gap: 8px;
}
.maximize-btn {
background: none;
border: none;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: var(--color-text-secondary);
transition: all 0.3s;
position: absolute;
right: 60px;
&:hover {
transform: rotate(180deg);
}
}
.close-btn {
background: none;
border: none;
@@ -177,7 +218,7 @@ defineExpose({
right: 20px;
&:hover {
transform: rotate(360deg);
transform: rotate(180deg);
}
}
@@ -297,7 +338,7 @@ defineExpose({
// 动画效果
.slide-up-enter-active,
.slide-up-leave-active {
transition: all 0.5s ease;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.slide-up-enter-from,