feat:1.任务大纲编排删除功能新增2.编辑窗口放大缩小功能
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user