From 8e19a8326a747b034c00b4707a9d4855066b2402 Mon Sep 17 00:00:00 2001
From: xream <xream@icloud.com>
Date: Wed, 7 Feb 2024 14:06:12 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |  2 +-
 src/assets/styles/global.scss    | 11 +++++
 src/views/editor/ActionBlock.vue |  8 ++--
 src/views/editor/CommonBlock.vue | 75 +++++++++++++++++++++++++++++---
 4 files changed, 86 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 1ea1079e1..b04e2de0b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.133",
+  "version": "2.14.134",
   "private": true,
   "scripts": {
     "dev": "vite --host",
diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index fd1e1b401..30159cf0b 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -115,6 +115,17 @@ img {
   content: '\e6cb'; // \2003 占位符
   color: var(--lowest-text-color); // 更多设置
 }
+.nut-icon-rect-down:before {
+  content: "\e6cc";
+}
+
+.nut-icon-triangle-down:before {
+  content: "\eb6d";
+}
+
+.nut-icon-triangle-up:before {
+  content: "\eb6e";
+}
 .nut-icon-arrow-right2:before {
   content: '\e6a9';
 }
diff --git a/src/views/editor/ActionBlock.vue b/src/views/editor/ActionBlock.vue
index e02ac125b..fc280be3a 100644
--- a/src/views/editor/ActionBlock.vue
+++ b/src/views/editor/ActionBlock.vue
@@ -295,10 +295,10 @@ const pop = (type: string, tipsDes: string) => {
   border-radius: var(--item-card-radios);
   border: solid 1px var(--divider-color);
   position: fixed;
-  width: 80vw;
-  height: 40vw;
-  left: calc(50vw - 40vw);
-  top: calc(50vh - 20vw);
+  width: 300px;
+  height: 140px;
+  left: calc(50vw - 150px);
+  top: calc(50vh - 70px);
 }
 .add-action-btn {
   font-size: 14px;
diff --git a/src/views/editor/CommonBlock.vue b/src/views/editor/CommonBlock.vue
index a34a498f6..fbaae2a63 100644
--- a/src/views/editor/CommonBlock.vue
+++ b/src/views/editor/CommonBlock.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="form-block-wrapper">
     <div class="sticky-title-wrapper">
-      <p>
-        {{ $t(`editorPage.subConfig.commonOptions.label`) }}
-      </p>
+      <div class="title" @click="toggleFold">
+        <p>
+          {{ $t(`editorPage.subConfig.commonOptions.label`) }}
+        </p>
+        <nut-icon v-if="!isFold" name="rect-left" size="12px"></nut-icon>
+        <nut-icon v-else name="rect-down" size="12px"></nut-icon>
+      </div>
     </div>
-    <nut-form class="form">
+    <nut-form v-if="!isFold" class="form">
       <nut-form-item>
         <p class="options-label">
           {{ $t(`editorPage.subConfig.commonOptions.useless.label`) }}
@@ -137,7 +141,46 @@
 </template>
 
 <script lang="ts" setup>
-  import { inject, watchEffect } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import { inject, watchEffect, ref } from 'vue';
+  const route = useRoute();
+
+  const storageKey = 'common-block-fold';
+
+  function getFoldState() {
+    let states = []
+    try {
+      let raw = localStorage.getItem(storageKey)
+      states = raw ? JSON.parse(raw) : []
+      if (!Array.isArray(states)) {
+        states = []
+      }
+    } catch (e) {}
+
+    
+
+    return states.find(item => item.path === route.path)?.isFold ? true : false;
+  }
+  function setFoldState(isFold) {
+    let states = []
+    try {
+      let raw = localStorage.getItem(storageKey)
+      states = raw ? JSON.parse(raw) : []
+      if (!Array.isArray(states)) {
+        states = []
+      }
+    } catch (e) {}
+    states = states.filter((state) => state.path !== route.path && state.isFold);
+    if (isFold) {
+      states.unshift({ path: route.path, isFold: 1 });
+      if (states.length > 50) {
+        states.pop();
+      }
+    }
+
+    localStorage.setItem(storageKey, JSON.stringify(states));
+  }
+  const isFold = ref(getFoldState());
 
   const item = ['DEFAULT', 'ENABLED', 'DISABLED'];
 
@@ -145,6 +188,10 @@
   const quick = form.process.find(
     item => item.type === 'Quick Setting Operator'
   );
+  const toggleFold = () => {
+    isFold.value = !isFold.value;
+    setFoldState(isFold.value)
+  };
   watchEffect(() => {
     if (!quick.args) {
       quick.args = {
@@ -159,6 +206,24 @@
 </script>
 
 <style lang="scss" scoped>
+  .form-block-wrapper {
+    .sticky-title-wrapper {
+      .title {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        cursor: pointer;
+        p {
+          margin-right: 6px;
+        }
+        :deep(.nut-icon) {
+          transform: rotate(270deg);
+          font-size: 12px;
+          height: 12px;
+        }
+      }
+    }
+  }
   .options-label {
     font-size: 12px;
     margin-bottom: 16px;