feat: Panel tab style (#649)

* Panel tab style * feat:Panel tab style
opentiny · Aug 23, 2024 · 4b0bf19 · 4b0bf19
1 parent 52d2432
commit 4b0bf19
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/layout/src/DesignSettings.vue b/packages/layout/src/DesignSettings.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="tiny-right-panel">
-    <tiny-tabs v-model="layoutState.settings.render" tab-style="button-card">
+    <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>
         <div v-show="activating" class="active"></div>
@@ -46,7 +46,7 @@ export default {
   transition: 0.3s linear;
   position: relative;
   border-left: 1px solid var(--ti-lowcode-plugin-setting-panel-border-left-color);
-  padding-top: 20px;
+  padding-top: 12px;
   background-color: var(--ti-lowcode-setting-panel-bg-color);
 
   .tiny-tabs {
@@ -55,14 +55,21 @@ export default {
   :deep(.tiny-tabs) {
     display: flex;
     flex-direction: column;
-    // 居中显示
     .tiny-tabs__nav-scroll {
-      text-align: center;
+      margin-left: 12px;
       .tiny-tabs__nav {
         display: inline-flex;
         justify-content: center;
         float: none;
       }
+      .tiny-tabs__active-bar {
+        width: 40px !important;
+        height: 2px;
+        background-color: var(--ti-lowcode-setting-panel-tabs-item-title-active-color);
+      }
+      .tiny-tabs__item__title {
+        margin-left: 6px;
+      }
     }
     .tiny-tabs__header {
       padding-bottom: 12px;
@@ -74,6 +81,7 @@ export default {
       margin: 0;
     }
     .tiny-tabs__item {
+      margin-right: 26px;
       color: var(--ti-lowcode-setting-panel-tabs-item-title-color);
       &:hover {
         color: var(--ti-lowcode-setting-panel-tabs-item-title-hover-color);

diff --git a/packages/toolbars/breadcrumb/src/Main.vue b/packages/toolbars/breadcrumb/src/Main.vue
@@ -31,7 +31,7 @@ export default {
     TinyButton: Button
   },
   setup() {
-    const CONTENTS = {
+    const PLUGINS_ID = {
       PAGEID: 'engine.plugins.appmanage',
       BLOCKID: 'engine.plugins.blockmanage'
     }
@@ -67,7 +67,7 @@ export default {
     })
 
     const open = () => {
-      plugins.render = breadcrumbData.value[0] === CONSTANTS.PAGETEXT ? CONTENTS.PAGEID : CONTENTS.BLOCKID
+      plugins.render = breadcrumbData.value[0] === CONSTANTS.PAGETEXT ? PLUGINS_ID.PAGEID : PLUGINS_ID.BLOCKID
     }
 
     return {