feat(style-panel): add style-panel can be collapsed or expanded

betterdancing · Oct 14, 2024 · f9cf9a2 · f9cf9a2
1 parent 91a72eb
commit f9cf9a2
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 16 deletions.
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
@@ -2,10 +2,15 @@
   <div id="tiny-right-panel">
     <tiny-tabs v-model="layoutState.settings.render">
       <tiny-tab-item v-for="(setting, index) in settings" :key="index" :title="setting.title" :name="setting.name">
-        <component :is="setting.entry"></component>
+        <component :is="setting.entry" :is-collapsed="isCollapsed"></component>
         <div v-show="activating" class="active"></div>
       </tiny-tab-item>
     </tiny-tabs>
+    <div class="tabs-setting">
+      <tiny-tooltip effect="dark" :content="isCollapsed ? '展开' : '折叠'" placement="top" :visible-arrow="false">
+        <template #default> <svg-icon name="setting" @click="isCollapsed = !isCollapsed"></svg-icon> </template>
+      </tiny-tooltip>
+    </div>
   </div>
 </template>
 
@@ -29,9 +34,11 @@ export default {
     const { layoutState } = useLayout()
     const activating = computed(() => layoutState.settings.activating)
     const showMask = ref(true)
+    const isCollapsed = ref(false)
 
     return {
       showMask,
+      isCollapsed,
       activating,
       layoutState
     }
@@ -49,12 +56,22 @@ export default {
   padding-top: 12px;
   background-color: var(--ti-lowcode-setting-panel-bg-color);
 
+  .tabs-setting {
+    position: absolute;
+    top: 12px;
+    right: 16px;
+    line-height: 24px;
+    cursor: pointer;
+  }
   .tiny-tabs {
     height: 100%;
   }
   :deep(.tiny-tabs) {
     display: flex;
     flex-direction: column;
+    .tiny-tabs__header .tiny-tabs__nav {
+      width: 60%;
+    }
     .tiny-tabs__nav-scroll {
       margin-left: 12px;
       .tiny-tabs__active-bar {
@@ -73,6 +90,7 @@ export default {
       flex: 1;
       background-color: var(--ti-lowcode-setting-panel-bg-color);
       color: var(--ti-lowcode-setting-panel-tabs-item-title-color);
+      margin-right: 5px;
       &:hover {
         color: var(--ti-lowcode-setting-panel-tabs-item-title-hover-color);
       }

diff --git a/packages/settings/styles/src/Main.vue b/packages/settings/styles/src/Main.vue
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { ref, watch } from 'vue'
+import { computed, watch } from 'vue'
 import { Collapse, CollapseItem, Input } from '@opentiny/vue'
 import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-meta-register'
 import { CodeConfigurator, VariableConfigurator } from '@opentiny/tiny-engine-configurator'
@@ -105,17 +105,18 @@ export default {
     TinyInput: Input,
     VariableConfigurator
   },
-  setup() {
-    const activeNames = ref([
-      'layout',
-      'spacing',
-      'size',
-      'position',
-      'typography',
-      'backgrounds',
-      'borders',
-      'effects'
-    ])
+  props: {
+    isCollapsed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const activeNames = computed(() =>
+      props.isCollapsed
+        ? []
+        : ['layout', 'spacing', 'size', 'position', 'typography', 'backgrounds', 'borders', 'effects']
+    )
     const { getCurrentSchema } = useCanvas()
     // 获取当前节点 style 对象
     const { state, updateStyle } = useStyle() // updateStyle
@@ -246,4 +247,12 @@ export default {
     }
   }
 }
+
+.dots {
+  display: inline-block;
+  margin-left: 4px;
+  vertical-align: middle;
+  border: 2px solid #1476ff;
+  border-radius: 2px;
+}
 </style>
diff --git a/packages/settings/styles/src/components/inputs/ResetButton.vue b/packages/settings/styles/src/components/inputs/ResetButton.vue
@@ -32,15 +32,15 @@ export default {
 <style lang="less" scoped>
 .reset-btn.tiny-button {
   display: block;
-  width: 100%;
   max-width: 100%;
   border: 0;
-  border: 1px solid var(--ti-lowcode-toolbar-border-color);
+  color: var(--ti-lowcode-base-primary-color-1);
+  border: 1px solid var(--ti-lowcode-base-primary-color-1);
 }
 .reset-desc {
   display: block;
   padding: 8px 4px;
   text-align: center;
-  color: var(--ti-lowcode-common-third-text-color);
+  color: var(--ti-lowcode-radio-button-active-bg);
 }
 </style>