Sfoglia il codice sorgente

feat: 添加样式配置项折叠功能

jiaxing.liao 1 mese fa
parent
commit
044edf9ebd

+ 14 - 4
src/renderer/src/views/designer/config/property/CusFormItem.vue

@@ -173,20 +173,28 @@
     <!-- 样式配置 -->
     <el-card
       v-if="isStyle"
-      :body-class="value ? 'p-8px!' : 'hidden'"
-      :header-class="value ? '' : 'border-b-none!'"
+      :body-class="value && expandStyle ? 'p-8px!' : 'hidden'"
+      :header-class="value && expandStyle ? '' : 'border-b-none!'"
       class="mb-12px"
     >
       <template #header>
         <div class="flex items-center justify-between">
-          <span>{{ schema.label }}</span>
+          <span class="flex items-center gap-1">
+            <span>{{ schema.label }}</span>
+            <el-tooltip ref="expandTooltipRef" content="折叠/展开">
+              <span class="flex" @click="expandStyle = !expandStyle">
+                <lu-chevrons-down v-if="!expandStyle" size="12px" class="cursor-pointer" />
+                <lu-chevrons-up v-else size="12px" class="cursor-pointer" />
+              </span>
+            </el-tooltip>
+          </span>
           <el-checkbox
             :model-value="!!value"
             @change="(val) => $emit('changeStateStyle', schema?.field!, val ? 'add' : 'delete')"
           />
         </div>
       </template>
-      <template v-if="value">
+      <template v-if="value && expandStyle">
         <!-- 模块 -->
         <!-- <StylePart v-if="schema.valueType === 'part'" v-model="value" /> -->
         <!-- 背景 -->
@@ -266,6 +274,7 @@ import { computed, defineComponent, nextTick, ref } from 'vue'
 import { get, set } from 'lodash-es'
 import { v4 } from 'uuid'
 import { useProjectStore } from '@/store/modules/project'
+import { LuChevronsDown, LuChevronsUp } from 'vue-icons-plus/lu'
 
 import CusCheckbox from './components/CusCheckbox.vue'
 import CusTextarea from './components/CusTextarea.vue'
@@ -320,6 +329,7 @@ const componentProps = computed(() => {
   const { onValueChange: _onValueChange, ...rest } = props.schema?.componentProps || {}
   return rest
 })
+const expandStyle = ref(true)
 
 // 绑定数据
 const value = computed({