chore: 样式调整

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",

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';
 }

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;

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,14 +141,57 @@
 </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'];
 
   const form = inject<Sub | Collection>('form');
   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;