Feat：toolbar style improvement (#755)

* feat: add grouping to toolbar * feat:sort out the status and API of the layout * fix:remove unused bags * feat: 工具栏左侧调整 * feat: 间距调整 * fix: remove methods that do not exist * fix: 去掉多余配置
opentiny · Aug 23, 2024 · 52d2432 · 52d2432
1 parent 7a50b54
commit 52d2432
Show file tree

Hide file tree

Showing 21 changed files with 283 additions and 85 deletions.
diff --git a/designer-demo/registry.js b/designer-demo/registry.js
@@ -15,6 +15,7 @@ import {
   Fullscreen,
   Lang,
   Logo,
+  Lock,
   Media,
   Redoundo,
   Save,
@@ -49,11 +50,7 @@ import engineConfig from './engine.config'
 export default {
   root: {
     id: 'engine.root',
-    metas: [
-      EditorInfoService,
-      AppService,
-      GenerateCodeService
-    ]
+    metas: [EditorInfoService, AppService, GenerateCodeService]
   },
   config: engineConfig,
   layout: Layout,
@@ -68,6 +65,7 @@ export default {
   toolbars: [
     Logo,
     Breadcrumb,
+    Lock,
     Media,
     Redoundo,
     Collaboration,

diff --git a/packages/design-core/assets/locked.svg b/packages/design-core/assets/locked.svg
diff --git a/packages/design-core/assets/unlocked.svg b/packages/design-core/assets/unlocked.svg
diff --git a/packages/design-core/index.js b/packages/design-core/index.js
@@ -6,6 +6,7 @@ export { default as Fullscreen } from '@opentiny/tiny-engine-toolbar-fullscreen'
 export { default as Lang } from '@opentiny/tiny-engine-toolbar-lang'
 export { default as Checkinout } from '@opentiny/tiny-engine-toolbar-checkinout'
 export { default as Logo } from '@opentiny/tiny-engine-toolbar-logo'
+export { default as Lock } from '@opentiny/tiny-engine-toolbar-checkinout'
 export { default as Media } from '@opentiny/tiny-engine-toolbar-media'
 export { default as Redoundo, HistoryService } from '@opentiny/tiny-engine-toolbar-redoundo'
 export { default as Save } from '@opentiny/tiny-engine-toolbar-save'

diff --git a/packages/layout/index.js b/packages/layout/index.js
@@ -9,7 +9,10 @@ export default {
   component,
   options: {
     configProvider: TinyConfigProvider,
-    configProviderDesign: designSmbConfig
+    configProviderDesign: designSmbConfig,
+    isShowLine: true,
+    isShowCollapse: true,
+    toolbars: {}
   },
   metas: [LayoutService]
 }

diff --git a/packages/layout/src/DesignPlugins.vue b/packages/layout/src/DesignPlugins.vue
@@ -55,14 +55,14 @@
   <div
     v-show="renderPanel && components[renderPanel]"
     id="tiny-engine-left-panel"
-    :class="[renderPanel, { 'is-fixed': pluginsState.fixedPanels.includes(renderPanel) }]"
+    :class="[renderPanel, { 'is-fixed': pluginState.fixedPanels.includes(renderPanel) }]"
   >
     <div class="left-panel-wrap">
       <keep-alive>
         <component
           :is="components[renderPanel]"
           ref="pluginRef"
-          :fixed-panels="pluginsState.fixedPanels"
+          :fixed-panels="pluginState.fixedPanels"
           @close="close"
           @fixPanel="fixPanel"
         ></component>
@@ -74,7 +74,7 @@
 <script>
 import { reactive, ref, watch } from 'vue'
 import { Popover, Tooltip } from '@opentiny/vue'
-import { useLayout, usePage } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, usePage, META_APP } from '@opentiny/tiny-engine-meta-register'
 import { PublicIcon } from '@opentiny/tiny-engine-common'
 
 export default {
@@ -98,12 +98,7 @@ export default {
     const iconComponents = {}
     const pluginRef = ref(null)
     const { isTemporaryPage } = usePage()
-
-    const {
-      PLUGIN_NAME,
-      pluginState,
-      layoutState: { plugins: pluginsState }
-    } = useLayout()
+    const pluginState = useLayout().getPluginState()
 
     props.plugins.forEach(({ id, entry, icon }) => {
       components[id] = entry
@@ -113,12 +108,11 @@ export default {
     const state = reactive({
       prevIdex: -2,
       topNavLists: props.plugins.filter((item) => item.align === 'top'),
-      bottomNavLists: props.plugins.filter((item) => item.align === 'bottom'),
-      independence: props.plugins.find((item) => item.align === 'independence')
+      bottomNavLists: props.plugins.filter((item) => item.align === 'bottom')
     })
 
     const clickMenu = ({ item, index }) => {
-      if (item.id === PLUGIN_NAME.EditorHelp || item.id === PLUGIN_NAME.Robot) return
+      if (item.id === META_APP.EditorHelp || item.id === META_APP.Robot) return
 
       state.prevIdex = index
 
@@ -143,8 +137,8 @@ export default {
 
     watch(isTemporaryPage, () => {
       if (isTemporaryPage.saved) {
-        const pagePanel = state.topNavLists?.find((item) => item.id === PLUGIN_NAME.AppManage) || null
-        const pageIndex = state.topNavLists?.findIndex((item) => item.id === PLUGIN_NAME.AppManage) || -1
+        const pagePanel = state.topNavLists?.find((item) => item.id === META_APP.AppManage) || null
+        const pageIndex = state.topNavLists?.findIndex((item) => item.id === META_APP.AppManage) || -1
         if (pagePanel !== props.renderPanel) {
           clickMenu({ item: pagePanel, index: pageIndex })
         }
@@ -157,9 +151,9 @@ export default {
     }
 
     const fixPanel = (pluginName) => {
-      pluginsState.fixedPanels = pluginsState.fixedPanels?.includes(pluginName)
-        ? pluginsState.fixedPanels?.filter((item) => item !== pluginName)
-        : [...pluginsState.fixedPanels, pluginName]
+      pluginState.fixedPanels = pluginState.fixedPanels?.includes(pluginName)
+        ? pluginState.fixedPanels?.filter((item) => item !== pluginName)
+        : [...pluginState.fixedPanels, pluginName]
     }
 
     return {
@@ -168,10 +162,9 @@ export default {
       pluginRef,
       close,
       fixPanel,
-      pluginsState,
+      pluginState,
       components,
-      iconComponents,
-      pluginState
+      iconComponents
     }
   }
 }

diff --git a/packages/layout/src/DesignToolbars.vue b/packages/layout/src/DesignToolbars.vue
@@ -88,15 +88,9 @@ export default {
     justify-content: space-between;
     align-items: center;
   }
-  .toolbar-left {
-    margin: 0 1px;
-  }
 
+  .toolbar-left,
   .toolbar-right {
-    margin: 0 6px;
-    margin-right: 24px;
-    column-gap: 6px;
-    align-items: center;
     :deep(.icon) {
       display: inline-flex;
       justify-content: center;
@@ -106,11 +100,33 @@ export default {
       height: 26px;
       border-radius: 4px;
       position: relative;
+      margin-right: 4px;
       svg {
         cursor: pointer;
         font-size: 20px;
         color: var(--ti-lowcode-toolbar-title-color);
       }
+    }
+  }
+
+  .toolbar-left {
+    margin: 0 1px;
+    :deep(.icon) {
+      background: var(--ti-lowcode-toolbar-view-active-bg);
+      svg {
+        font-size: 16px;
+      }
+      &:not(.disabled):hover {
+        background: var(--ti-lowcode-toolbar-left-icon-bg-hover);
+      }
+    }
+  }
+
+  .toolbar-right {
+    margin: 0 6px;
+    margin-right: 24px;
+    align-items: center;
+    :deep(.icon) {
       &:not(.disabled):hover {
         background: var(--ti-lowcode-toolbar-view-active-bg);
       }
@@ -121,6 +137,23 @@ export default {
         cursor: not-allowed;
       }
     }
+    .toolbar-right-content {
+      display: flex;
+      .toolbar-right-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 0 2px;
+        .toolbar-right-item-comp {
+          margin-right: 6px;
+        }
+      }
+    }
+
+    .toolbar-right-line {
+      color: var(--ti-lowcode-toolbar-right-line);
+      margin: 0 6px;
+    }
     .tiny-locales {
       height: 35px;
       padding: 5px 12px;
@@ -141,6 +174,11 @@ export default {
     }
   }
 }
+.toolbar-right-content .toolbar-right-item:last-child {
+  .toolbar-right-line {
+    display: none;
+  }
+}
 
 @media only screen and (max-width: 1280px) {
   .tiny-engine-toolbar {

diff --git a/packages/layout/src/Main.vue b/packages/layout/src/Main.vue
@@ -1,7 +1,7 @@
 <template>
   <component :is="configProvider" :design="configProviderDesign">
     <div id="tiny-engine">
-      <design-toolbars :toolbars="registry.toolbars"></design-toolbars>
+      <design-toolbars :toolbars="registry.toolbars" :layoutRegistry="layoutRegistry"></design-toolbars>
       <div class="tiny-engine-main">
         <div class="tiny-engine-left-wrap">
           <div class="tiny-engine-content-wrap">
@@ -63,6 +63,7 @@ export default {
     }
 
     return {
+      layoutRegistry,
       configProvider,
       configProviderDesign,
       plugins,

diff --git a/packages/layout/src/ToolbarCollapse.vue b/packages/layout/src/ToolbarCollapse.vue
@@ -41,6 +41,7 @@ export default {
   height: 24px;
   border-radius: 4px;
   line-height: 24px;
+  margin-left: 4px;
 
   &:hover {
     background: var(--ti-lowcode-toolbar-view-active-bg);
@@ -53,7 +54,6 @@ export default {
   .toolbar-list-button {
     padding-top: 4px;
     box-sizing: border-box;
-    height: 24px;
 
     &:hover {
       background-color: var(--ti-lowcode-toolbar-ellipsis-hover-bg);