fix: 修复节点操作单独展开收起状态

sub-store-org · Apr 21, 2024 · be1ad04 · be1ad04
1 parent 9a9c5ab
commit be1ad04
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.223",
+  "version": "2.14.225",
   "private": true,
   "scripts": {
     "dev": "vite --host",

diff --git a/src/views/editor/ActionBlock.vue b/src/views/editor/ActionBlock.vue
@@ -33,11 +33,11 @@
 }" @end="drag = false" @start="drag = true" item-key="id">
       <template #item="{ element, index }">
         <nut-cell class="list-group-item" aria-hidden="true">
-          <div :class="{ 'list-group-item-title': true, 'collapsed': !expandedElements.includes(index) }">
+          <div :class="{ 'list-group-item-title': true, 'collapsed': collapsedElements.includes(index) }">
             <div class="title-text left">
               <span class="collapsed" @click="toggleElementCollapsed(index)">
-                <nut-icon v-if="expandedElements.includes(index)" name="rect-down" size="12px"></nut-icon>
-                <nut-icon v-if="!expandedElements.includes(index)" name="rect-right" size="12px"></nut-icon>
+                <nut-icon v-if="!collapsedElements.includes(index)" name="rect-down" size="12px"></nut-icon>
+                <nut-icon v-if="collapsedElements.includes(index)" name="rect-right" size="12px"></nut-icon>
               </span>
               <span class="name" @click="toggleElementCollapsed(index)">{{
                 $t(`editorPage.subConfig.nodeActions['${element.type}'].label`)
@@ -63,7 +63,7 @@
               </div>
             </div>
           </div>
-          <Component v-show="expandedElements.includes(index)" :is="element.component" :type="element.type" :id="element.id" :sourceType="sourceType"/>
+          <Component v-show="!collapsedElements.includes(index)" :is="element.component" :type="element.type" :id="element.id" :sourceType="sourceType"/>
         </nut-cell>
       </template>
     </Draggable>
@@ -142,7 +142,7 @@ const pasteboard = ref("");
 const showPasteboard = ref(false);
 const drag = ref(true);
 const isCollapsed = ref(localStorage.getItem('actions-block-collapsed') === '1');
-const expandedElements = ref([]);
+const collapsedElements = ref([]);
 const form = inject<Sub | Collection>('form');
 // 列表渲染的数据
 // 预览开关数组，数组第一项为 id，对应 list 中的同 id 项目，控制该 id 开启关闭预览
@@ -170,30 +170,32 @@ const columns = ref(items);
 // useMousePicker();
 
 if(isCollapsed.value) {
-  expandedElements.value = [];
+  collapsedElements.value = [...Array(list.length).keys()];
 } else {
-  expandedElements.value = [...Array(list.length).keys()];
+  collapsedElements.value = [];
 }
 const setCollapsed = (v) => {
   isCollapsed.value = v;
   if (v) {
     localStorage.setItem('actions-block-collapsed', '1')
-    expandedElements.value = [];
+    collapsedElements.value = [...Array(list.length).keys()];
   } else {
     localStorage.removeItem('actions-block-collapsed')
-    expandedElements.value = [...Array(list.length).keys()];
+    collapsedElements.value = [];
   }
 };
 const toggleElementCollapsed = (index) => {
-  if (expandedElements.value.includes(index)) {
-    expandedElements.value = expandedElements.value.filter(item => item !== index);
+  if (collapsedElements.value.includes(index)) {
+    collapsedElements.value = collapsedElements.value.filter(item => item !== index);
   } else {
-    expandedElements.value.push(index);
+    collapsedElements.value.push(index);
   }
-  if(expandedElements.value.length === list.length) {
-    setCollapsed(false)
-  } else if(expandedElements.value.length === 0){
+  if(collapsedElements.value.length === list.length) {
     setCollapsed(true)
+  } else if(collapsedElements.value.length === 0){
+    setCollapsed(false)
+  } else {
+    isCollapsed.value = false;
   }
 };
 const onButtonClick = (item) => {