修复页面bug

src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue

@@ -1,8 +1,9 @@
 <template>
   <transition name="fade">
-    <div v-if="visible" class="liquify-panel">
+    <div v-if="visible" class="liquify-panel" :class="{active:!closePanel}">
+		<div class="btn" @click="setClosePanel"><i class="fi fi-br-angle-left"></i></div>
       <div class="liquify-panel-header">
-        <div class="header-title">液化工具</div>
+        <div class="header-title">{{ $t('liquifyPanel.LiquefactionTool') }}</div>
         <!-- <div class="header-actions">
           <button class="header-btn cancel-btn" @click="cancel">取消</button>
           <button class="header-btn confirm-btn" @click="confirm">完成</button>
@@ -251,6 +252,12 @@ const showDistortion = computed(() => {
   return ["crystal", "edge"].includes(currentMode.value);
 });
 
+//打开隐藏操作面板
+const closePanel = ref(false)
+const setClosePanel = ()=>{
+	closePanel.value = !closePanel.value
+}
+
 // 监听当前工具变化 - 参考 SelectionPanel 的实现方式
 watch(
   () => props.activeTool,
@@ -262,6 +269,7 @@ watch(
       // 如果面板未显示且有合适的目标对象，则显示面板
       if (!visible.value) {
         visible.value = true;
+		closePanel.value = true
         // 检查是否有可液化的对象
         checkAndShowPanel();
       }
@@ -451,6 +459,7 @@ function showPanel(event) {
       console.log("未选择有效图像或图层不适合液化操作");
     }
     visible.value = true; // 仍然显示面板以便用户看到提示
+  closePanel.value = true
     return;
   }
 
@@ -463,6 +472,7 @@ function showPanel(event) {
   if (!targetObj) {
     console.log("未选择有效的图像对象");
     visible.value = true; // 仍然显示面板以便显示提示
+	closePanel.value = true
     return;
   }
 
@@ -509,6 +519,7 @@ function showPanel(event) {
   }
 
   visible.value = true;
+  closePanel.value = true
   isEditing.value = true;
 
   // 初始化液化管理器并准备液化环境
@@ -1623,6 +1634,25 @@ function stopPressTimer() {
   color: #333;
   border: 1px solid rgba(0, 0, 0, 0.05);
   padding-bottom: 12px;
+   &.active{
+	transform: translateY(100%);
+	 > .btn{
+		> i{
+			transform: rotate(90deg);
+		}
+	}
+}
+  > .btn{
+	width: 100%;
+	text-align: center;
+	cursor: pointer;
+	
+	> i{
+		font-size: 1.4rem;
+		display: block;
+		transform: rotate(270deg);
+	}
+  }
 }
 
 .fade-enter-active,