Merge pull request #4365 from Tinhone/preview-features

[组件-自定义顶栏] feat: 为导航栏使用 `nav-link` style 的弹窗增加更多的对齐样式
the1812 · Aug 24, 2023 · 333dc13 · 333dc13
2 parents fd5cf95 + ae19ff5
commit 333dc13
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 2 deletions.
diff --git a/registry/lib/components/style/custom-navbar/_nav-link.scss b/registry/lib/components/style/custom-navbar/_nav-link.scss
@@ -6,8 +6,9 @@
   border-bottom: 2px solid transparent;
   font-size: 15px;
   line-height: normal;
+
   &::before {
-    content: "";
+    content: '';
     position: absolute;
     top: calc(100% - 4px);
     left: 8px;
@@ -18,7 +19,23 @@
     transition: 0.16s 0.1s ease-out;
     transform: scaleX(0);
   }
+
   &:hover::before {
     transform: scaleX(1);
   }
-}
+
+  html[data-navbar-link-popup-content-align-style='left'] &,
+  &.left {
+    justify-content: flex-start;
+  }
+
+  html[data-navbar-link-popup-content-align-style='center'] &,
+  &.center {
+    justify-content: center;
+  }
+
+  html[data-navbar-link-popup-content-align-style='right'] &,
+  &.right {
+    justify-content: flex-end;
+  }
+}
diff --git a/registry/lib/components/style/custom-navbar/entry.ts b/registry/lib/components/style/custom-navbar/entry.ts
@@ -2,6 +2,7 @@ import { ComponentEntry } from '@/components/types'
 import { addComponentListener } from '@/core/settings'
 import { isIframe, isNotHtml, matchUrlPattern, mountVueComponent } from '@/core/utils'
 import { setupNotifyStyle } from './notify-style'
+import { setupLinkPopupContentAlignStyle } from './link-popup-content-align-style'
 
 export const entry: ComponentEntry = async ({ metadata: { name } }) => {
   // const url = document.URL.replace(location.search, '')
@@ -52,4 +53,5 @@ export const entry: ComponentEntry = async ({ metadata: { name } }) => {
     addComponentListener(`${name}.${style}`, value => customNavbar.toggleStyle(value, style), true)
   })
   setupNotifyStyle()
+  setupLinkPopupContentAlignStyle()
 }
diff --git a/registry/lib/components/style/custom-navbar/index.ts b/registry/lib/components/style/custom-navbar/index.ts
@@ -8,6 +8,7 @@ import { urlInclude, urlExclude } from './urls'
 import { entry } from './entry'
 import { getNumberValidator } from '@/core/utils'
 import { NavbarNotifyStyle } from './notify-style'
+import { NavbarLinkPopupContentAlignStyle } from './link-popup-content-align-style'
 
 const styleID = 'custom-navbar-style'
 const options = defineOptionsMetadata({
@@ -91,6 +92,11 @@ const options = defineOptionsMetadata({
     dropdownEnum: NavbarNotifyStyle,
     displayName: '消息提醒样式',
   },
+  linkPopupContentAlignStyle: {
+    defaultValue: NavbarLinkPopupContentAlignStyle.Left,
+    dropdownEnum: NavbarLinkPopupContentAlignStyle,
+    displayName: '链接对齐样式',
+  },
   searchBarWidth: {
     defaultValue: 15,
     slider: {

diff --git a/registry/lib/components/style/custom-navbar/link-popup-content-align-style.ts b/registry/lib/components/style/custom-navbar/link-popup-content-align-style.ts
@@ -0,0 +1,25 @@
+import { addComponentListener } from '@/core/settings'
+
+export enum NavbarLinkPopupContentAlignStyle {
+  Left = '左侧对齐',
+  Center = '居中对齐',
+  Right = '右侧对齐',
+}
+
+export const setupLinkPopupContentAlignStyle = () => {
+  const map = {
+    [NavbarLinkPopupContentAlignStyle.Left]: 'left',
+    [NavbarLinkPopupContentAlignStyle.Center]: 'center',
+    [NavbarLinkPopupContentAlignStyle.Right]: 'right',
+  }
+  addComponentListener(
+    'customNavbar.linkPopupContentAlignStyle',
+    (value: NavbarLinkPopupContentAlignStyle) => {
+      document.documentElement.setAttribute(
+        'data-navbar-link-popup-content-align-style',
+        map[value],
+      )
+    },
+    true,
+  )
+}