From ff5e6eafad73e1c3bacf9048a56eeddfcd650f06 Mon Sep 17 00:00:00 2001
From: violarong <zxrong@gmail.com>
Date: Tue, 26 Apr 2022 17:45:06 +0800
Subject: [PATCH] :sparkles: narbarMulti add divider

---
 src/components/u-navbar-multi.vue/api.yaml    | 17 ++++++++
 .../u-navbar-multi.vue/docs/blocks.md         | 42 ++++++++-----------
 .../u-navbar-multi.vue/docs/examples.md       | 42 ++++++++-----------
 src/components/u-navbar-multi.vue/index.vue   | 29 +++++++++----
 src/styles/theme.css                          |  2 +
 5 files changed, 77 insertions(+), 55 deletions(-)

diff --git a/src/components/u-navbar-multi.vue/api.yaml b/src/components/u-navbar-multi.vue/api.yaml
index 3489e0d8f..b728dcee8 100644
--- a/src/components/u-navbar-multi.vue/api.yaml
+++ b/src/components/u-navbar-multi.vue/api.yaml
@@ -32,6 +32,23 @@
       type: boolean
       default: false
       description: 是否禁用
+  slots:
+    - name: default
+      description: 链接区域
+      title: 链接区域
+      support:
+        - name: u-navbar-item-multi
+          title: 添加导航项
+          snippet: <u-navbar-item-multi>导航项</u-navbar-item-multi>
+        - name: u-navbar-divider-multi
+          title: 添加分隔线
+          snippet: <u-navbar-divider-multi></u-navbar-divider-multi>
+    - name: left
+      title: 左部区域
+      description: 左部区域，一般放置 logo 等
+    - name: right
+      title: 右部区域
+      description: 右部区域，一般放置用户个人信息等
 - name: u-navbar-item-multi
   title: 导航栏项
   attrs:
diff --git a/src/components/u-navbar-multi.vue/docs/blocks.md b/src/components/u-navbar-multi.vue/docs/blocks.md
index 75aab2ea6..26903bb30 100644
--- a/src/components/u-navbar-multi.vue/docs/blocks.md
+++ b/src/components/u-navbar-multi.vue/docs/blocks.md
@@ -3,32 +3,26 @@
 ``` html
 <u-navbar-multi>
     <template #left>
-        <u-multi-layout-item align-items="center" style="width: 200px;">
-            <u-image fit="cover" src="https://static-vusion.163yun.com/assets/lcap-logo-light.svg"
-                    style="width: 28px; height: 28px; margin: 16px 14px; --custom-start: auto; vertical-align: middle;"></u-image>
-            <u-text text="应用名称" size="large" style="color: white; --custom-start: auto; vertical-align: middle;"></u-text>
-        </u-multi-layout-item>
+        <u-image fit="cover" src="https://static-vusion.163yun.com/assets/lcap-logo-light.svg"
+                style="width: 28px; height: 28px; margin: 16px 14px; --custom-start: auto; vertical-align: middle;"></u-image>
+        <u-text text="应用名称" size="large" style="color: white; --custom-start: auto; vertical-align: middle;"></u-text>
     </template>
-    <u-multi-layout-item align-items="center">
-        <u-navbar-item-multi text="Item 1"></u-navbar-item-multi>
-        <u-navbar-item-multi text="Item 2"></u-navbar-item-multi>
-    </u-multi-layout-item>
+    <u-navbar-item-multi text="Item 1"></u-navbar-item-multi>
+    <u-navbar-item-multi text="Item 2"></u-navbar-item-multi>
     <template #right>
-        <u-multi-layout-item align-items="center" justify="end">
-            <u-dropdown style="margin-right: 10px; color: inherit">
-                <template #title>
-                    <u-linear-layout gap="small" v-if="$global.userInfo">
-                        <u-image fit="cover" src="https://static-vusion.163yun.com/assets/avatar-default.svg" style="width: 36px; height: 36px; vertical-align: middle;"></u-image>
-                        <span style="display: inline-block; vertical-align: top; margin-left: 10px; margin-right: 10px; color: white;">
-                            <u-text :text="$global.userInfo.UserName"></u-text>
-                        </span>
-                    </u-linear-layout>
-                </template>
-                <template #default>
-                        <u-dropdown-item text="安全退出"></u-dropdown-item>
-                </template>
-            </u-dropdown>
-        </u-multi-layout-item>
+        <u-dropdown style="margin-right: 10px; color: inherit">
+            <template #title>
+                <u-linear-layout gap="small" v-if="$global.userInfo">
+                    <u-image fit="cover" src="https://static-vusion.163yun.com/assets/avatar-default.svg" style="width: 36px; height: 36px; vertical-align: middle;"></u-image>
+                    <span style="display: inline-block; vertical-align: top; margin-left: 10px; margin-right: 10px; color: white;">
+                        <u-text :text="$global.userInfo.UserName"></u-text>
+                    </span>
+                </u-linear-layout>
+            </template>
+            <template #default>
+                    <u-dropdown-item text="安全退出"></u-dropdown-item>
+            </template>
+        </u-dropdown>
     </template>
 </u-navbar-multi>
 ```
diff --git a/src/components/u-navbar-multi.vue/docs/examples.md b/src/components/u-navbar-multi.vue/docs/examples.md
index 75aab2ea6..26903bb30 100644
--- a/src/components/u-navbar-multi.vue/docs/examples.md
+++ b/src/components/u-navbar-multi.vue/docs/examples.md
@@ -3,32 +3,26 @@
 ``` html
 <u-navbar-multi>
     <template #left>
-        <u-multi-layout-item align-items="center" style="width: 200px;">
-            <u-image fit="cover" src="https://static-vusion.163yun.com/assets/lcap-logo-light.svg"
-                    style="width: 28px; height: 28px; margin: 16px 14px; --custom-start: auto; vertical-align: middle;"></u-image>
-            <u-text text="应用名称" size="large" style="color: white; --custom-start: auto; vertical-align: middle;"></u-text>
-        </u-multi-layout-item>
+        <u-image fit="cover" src="https://static-vusion.163yun.com/assets/lcap-logo-light.svg"
+                style="width: 28px; height: 28px; margin: 16px 14px; --custom-start: auto; vertical-align: middle;"></u-image>
+        <u-text text="应用名称" size="large" style="color: white; --custom-start: auto; vertical-align: middle;"></u-text>
     </template>
-    <u-multi-layout-item align-items="center">
-        <u-navbar-item-multi text="Item 1"></u-navbar-item-multi>
-        <u-navbar-item-multi text="Item 2"></u-navbar-item-multi>
-    </u-multi-layout-item>
+    <u-navbar-item-multi text="Item 1"></u-navbar-item-multi>
+    <u-navbar-item-multi text="Item 2"></u-navbar-item-multi>
     <template #right>
-        <u-multi-layout-item align-items="center" justify="end">
-            <u-dropdown style="margin-right: 10px; color: inherit">
-                <template #title>
-                    <u-linear-layout gap="small" v-if="$global.userInfo">
-                        <u-image fit="cover" src="https://static-vusion.163yun.com/assets/avatar-default.svg" style="width: 36px; height: 36px; vertical-align: middle;"></u-image>
-                        <span style="display: inline-block; vertical-align: top; margin-left: 10px; margin-right: 10px; color: white;">
-                            <u-text :text="$global.userInfo.UserName"></u-text>
-                        </span>
-                    </u-linear-layout>
-                </template>
-                <template #default>
-                        <u-dropdown-item text="安全退出"></u-dropdown-item>
-                </template>
-            </u-dropdown>
-        </u-multi-layout-item>
+        <u-dropdown style="margin-right: 10px; color: inherit">
+            <template #title>
+                <u-linear-layout gap="small" v-if="$global.userInfo">
+                    <u-image fit="cover" src="https://static-vusion.163yun.com/assets/avatar-default.svg" style="width: 36px; height: 36px; vertical-align: middle;"></u-image>
+                    <span style="display: inline-block; vertical-align: top; margin-left: 10px; margin-right: 10px; color: white;">
+                        <u-text :text="$global.userInfo.UserName"></u-text>
+                    </span>
+                </u-linear-layout>
+            </template>
+            <template #default>
+                    <u-dropdown-item text="安全退出"></u-dropdown-item>
+            </template>
+        </u-dropdown>
     </template>
 </u-navbar-multi>
 ```
diff --git a/src/components/u-navbar-multi.vue/index.vue b/src/components/u-navbar-multi.vue/index.vue
index 6b6716798..2bb2c5a76 100644
--- a/src/components/u-navbar-multi.vue/index.vue
+++ b/src/components/u-navbar-multi.vue/index.vue
@@ -5,24 +5,33 @@
         :readonly="readonly"
         :disabled="disabled"
     >
-        <u-multi-layout
-            :vusion-scope-id="$vnode.context.$options._scopeId"
-            vusion-node-tag="u-multi-layout"
-        >
-            <slot name="left"></slot>
-            <slot></slot>
-            <slot name="right"></slot>
+        <u-multi-layout>
+            <u-multi-layout-item align-items="center" :class="$style.layoutleft" vusion-slot-name="left" v-if="$slots.left || $env.VUE_APP_DESIGNER">
+                <slot name="left">
+                    <s-empty v-if="(!$slots.left) && $env.VUE_APP_DESIGNER"></s-empty>
+                </slot>
+            </u-multi-layout-item>
+            <u-multi-layout-item align-items="center">
+                <slot></slot>
+            </u-multi-layout-item>
+             <u-multi-layout-item align-items="center" justify="end" :class="$style.layoutright" v-if="$slots.right || $env.VUE_APP_DESIGNER" vusion-slot-name="right">
+                <slot name="right">
+                    <s-empty v-if="(!$slots.left) && $env.VUE_APP_DESIGNER"></s-empty>
+                </slot>
+            </u-multi-layout-item>
         </u-multi-layout>
     </div>
 </template>
 
 <script>
 import { MSinglex } from '../m-singlex.vue';
+import SEmpty from '../../components/s-empty.vue';
 
 export default {
     name: 'u-navbar-multi',
     childName: 'u-navbar-item-multi',
     extends: MSinglex,
+    components: {  SEmpty },
     props: {
         router: { type: Boolean, default: true },
         animation: { type: String, default: '1' },
@@ -237,4 +246,10 @@ export default {
 .root [class^="u-dropdown__"][type=text]:not([disabled]):hover {
     color: inherit;
 }
+.layoutleft {
+    max-width: var(--navbar-left-width);
+}
+.layoutright {
+    max-width: var(--navbar-right-width);
+}
 </style>
diff --git a/src/styles/theme.css b/src/styles/theme.css
index a6030f6ce..0a4864b96 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -348,6 +348,8 @@
     --navbar-select-item-background-selected: white;
     --navbar-select-divider-background: var(--list-view-divider-background);
     --navbar-select-box-shadow: 0 0 6px rgba(47, 53, 58, 0.3);
+    --navbar-left-width: 200px;
+    --navbar-right-width: auto;
 
     /* @component u-sidebar @hidden */
     --sidebar-width: 240px;