[组件-自定义顶栏] feat: 为导航栏使用 nav-link style 的弹窗增加更多的对齐样式

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;
+  }
+}

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()
 }

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: {

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,
+  )
+}