@mptw/skylens-ui 1.4.49 → 1.4.51

package/components/SLSidebarNav.vue

@@ -1,57 +1,72 @@
 <template lang="pug">
-.sidebar(:class="{ closure: closuredProxy, dark }")
+.sidebar(:class="{ closure: closuredProxy, dark, introing }")
   .sidebar-modal(@click="onClickedToggle")
-  .sidebar-logo
-    a.logo(href="javascript:;" @click="onClickedLogo")
-      img.color-big(src="~/assets/images/commons/app-logo-big.svg")
-      img.white-big(src="~/assets/images/commons/app-logo-big-white.svg")
-      img.color-small(src='~/assets/images/commons/app-logo-small.svg')
-      img.white-small(src='~/assets/images/commons/app-logo-small-white.svg')
-  nav.site-nav
-    .nav-wrapper.custom-scrollbar-y
-      template(v-for='item in config')
-        SLSidebarNavLinkItem(
-          v-if='item.navType === "link"'
-          :nav-collapsed='closured'
-          :item-config='item'
-          @click:item='onClickedItem'
-        )
-        SLSidebarNavSectionItem(
-          v-else-if='item.navType === "section"'
-          :nav-collapsed='closured'
-          :item-config='item'
-          @click:item='onClickedItem'
-        )
-        SLSidebarNavGroupItem(
-          v-else-if='item.navType === "group"'
-          :nav-collapsed='closured'
-          :nav-dark='dark'
-          :item-config='item'
-          @click:item='onClickedItem'
-        )
-        .sidebar-nav-divide-item(
-          v-else
-        )
-  .sidebar-mode-setting
-    .sidebar-mode-setting-title 模式
-    SLIOSSwitch(
-      :modelValue="dark"
-      trueLabel="深色"
-      minTrueLabel="深"
-      falseLabel="淺色"
-      minFalseLabel="淺"
-      :size="closuredProxy ? 'min' : ''"
-      :color='switchColor'
-      @update:modelValue="onUpdatedMode"
-    )
-  a.sidebar-toggle(href="javascript:;", @click="onClickedToggle")
-    SLIcon(icon="chevron-left")
-    SLIcon(icon="chevron-right")
+  .sidebar-intro-modal
+  .sidebar-wrapper
+    .sidebar-logo
+      a.logo(href="javascript:;" @click="onClickedLogo")
+        img.color-big(src="~/assets/images/commons/app-logo-big.svg", @load='onLogoLoaded')
+        img.white-big(src="~/assets/images/commons/app-logo-big-white.svg", @load='onLogoLoaded')
+        img.color-small(src='~/assets/images/commons/app-logo-small.svg', @load='onLogoLoaded')
+        img.white-small(src='~/assets/images/commons/app-logo-small-white.svg', @load='onLogoLoaded')
+    nav.site-nav
+      .nav-wrapper.custom-scrollbar-y
+        template(v-for='item in config')
+          SLSidebarNavLinkItem(
+            v-if='item.navType === "link"'
+            :nav-collapsed='closured'
+            :item-config='item'
+            @click:item='onClickedItem'
+          )
+          SLSidebarNavSectionItem(
+            v-else-if='item.navType === "section"'
+            :nav-collapsed='closured'
+            :item-config='item'
+            @click:item='onClickedItem'
+          )
+          SLSidebarNavGroupItem(
+            v-else-if='item.navType === "group"'
+            :nav-collapsed='closured'
+            :nav-dark='dark'
+            :item-config='item'
+            @click:item='onClickedItem'
+          )
+          .sidebar-nav-divide-item(
+            v-else
+          )
+    .sidebar-mode-setting
+      .sidebar-mode-setting-title 模式
+      SLIOSSwitch(
+        :modelValue="dark"
+        trueLabel="深色"
+        minTrueLabel="深"
+        falseLabel="淺色"
+        minFalseLabel="淺"
+        :size="closuredProxy ? 'min' : ''"
+        :color='switchColor'
+        @update:modelValue="onUpdatedMode"
+      )
+    a.sidebar-toggle(href="javascript:;", @click="onClickedToggle")
+      SLIcon(icon="chevron-left")
+      SLIcon(icon="chevron-right")
+  .sidebar-nav-intro(ref='introEl')
+    .sidebar-nav-intro-header {{ navLinkIntro ? navLinkIntro.title : '' }}
+    .sidebar-nav-intro-body {{ navLinkIntro ? navLinkIntro.content : ''}}
+    .sidebar-nav-intro-footer
+      SLButton(
+        title='我知道了',
+        color='primary'
+        size='sm'
+        @click='onClickedCloseIntro'
+      )
+    .sidebar-nav-intro-arrow
 </template>
 
 <script lang="ts">
 import type { PropType } from "vue";
-import type { NavConfigType } from "~ui/interface/NavConfigType";
+import { createPopper } from '@popperjs/core';
+import type { Instance as PopperInstance } from '@popperjs/core';
+import { NavType, type NavConfigType } from "~/interface/NavConfigType";
 
 export default defineComponent({
   name: "SLSidebarNav",
@@ -68,22 +83,40 @@ export default defineComponent({
       type: Array as PropType<NavConfigType>,
         default: () => [],
     },
+    navIntros: {
+      type: Array as PropType<{
+        code: string;
+        title: string;
+        content: string;
+        targetCode: string;
+      }[]>,
+      default: () => [],
+    },
     switchColor: {
       type: String,
       default: '',
       validator: (v: string) => ['', 'primary-600', 'primary'].includes(v),
     },
   },
-  emits: ["click:logo", "update:dark", "update:closured", "click:insight"],
+  emits: ["click:logo", "update:dark", "update:closured", "click:insight", 'close:intro', 'logo:loaded'],
   setup(props, { emit }) {
-    const { closured } = toRefs(props);
+    const { closured, navIntros } = toRefs(props);
+
+    const introEl = ref<HTMLElement | null>(null);
+    const introing = ref(false);
 
     const closuredProxy = computed({
       get: () => closured.value,
       set: (newValue) => emit('update:closured', newValue),
     });
 
+    let introPopperInstance: PopperInstance | null = null;
+
+    const navLinkIntro = computed(() => navIntros.value[0]);
+
     function onClickedToggle() {
+      if (introing.value) return;
+      
       closuredProxy.value = !closuredProxy.value;
     }
 
@@ -105,12 +138,98 @@ export default defineComponent({
       emit("update:dark", isDark);
     }
 
+    function createIntroPopper() {
+      destroyIntroPopper();
+
+      if (!navLinkIntro.value) return;
+
+      const navLinkIndexEl = document.getElementById(`nav-link-${navLinkIntro.value.targetCode}`);
+
+      if (!introEl.value || !navLinkIndexEl) return;
+
+      introPopperInstance = createPopper(navLinkIndexEl, introEl.value, {
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [-6, 39],
+            },
+          },
+        ],
+        placement: 'right-start',
+      });
+    }
+
+    function destroyIntroPopper() {
+      if (introPopperInstance) {
+        introPopperInstance.destroy();
+      }
+      introPopperInstance = null;
+    }
+
+    async function showLinkIntro() {
+      await nextTick();
+
+      if (!introEl.value || !introPopperInstance) return;
+
+      introEl.value.setAttribute('data-show', '');
+      introPopperInstance.setOptions((options) => ({
+        ...options,
+        modifiers: [
+          ...(options.modifiers || []),
+          { name: 'eventListeners', enabled: true },
+        ],
+      }));
+      introPopperInstance.update();
+      introing.value = true;
+    }
+
+    function hideLinkIntro() {
+      introing.value = false;
+
+      if (!introEl.value || !introPopperInstance) return;
+
+      introEl.value.removeAttribute('data-show');
+      introPopperInstance.setOptions((options) => ({
+        ...options,
+        modifiers: [
+          ...(options.modifiers || []),
+          { name: 'eventListeners', enabled: false },
+        ],
+      }));
+    }
+
+    function displayLinkIntro() {
+      if (!navLinkIntro.value) return;
+
+      createIntroPopper();
+      showLinkIntro();
+    }
+
+    function onClickedCloseIntro() {
+      hideLinkIntro();
+
+      if (!navLinkIntro.value) return;
+
+      emit('close:intro', navLinkIntro.value.code);
+    }
+
+    function onLogoLoaded() {
+      emit('logo:loaded');
+    }
+
     return {
+      introEl,
+      introing,
       closuredProxy,
+      navLinkIntro,
       onClickedToggle,
       onClickedLogo,
       onClickedItem,
       onUpdatedMode,
+      displayLinkIntro,
+      onClickedCloseIntro,
+      onLogoLoaded,
     };
   },
 });
@@ -118,10 +237,11 @@ export default defineComponent({
 
 <style lang="stylus">
 .sidebar
-  @apply relative flex flex-col s('w-[188px]') h-full bg-white rounded-r-lg shadow transition-all
+  @apply relative h-full
 
   &.dark
-    @apply bg-primary-800
+    .sidebar-wrapper
+      @apply bg-primary-800
 
     &.closure
       .sidebar-logo
@@ -176,12 +296,13 @@ export default defineComponent({
         @apply bg-primary-600
 
   &.closure
-    @apply s('-ml-[188px]')
-    @apply s('lg:ml-0') s('lg:w-[84px]')
-
     .sidebar-modal
       @apply hidden
 
+    .sidebar-wrapper
+      @apply s('-ml-[188px]')
+      @apply s('lg:ml-0') s('lg:w-[84px]')
+
     .sidebar-logo
       @apply s('lg:py-3') s('lg:px-0')
       .logo
@@ -216,10 +337,23 @@ export default defineComponent({
       .ios-switch
         @apply flex-grow-0 flex-shrink-0
 
+  &.introing
+    .sidebar-intro-modal
+      @apply block
+
+    .sidebar-wrapper
+      @apply pointer-events-none
+
   &-modal
     @apply fixed top-0 left-0 w-full h-full bg-white opacity-0
     @apply s('lg:hidden')
 
+  &-intro-modal
+    @apply fixed top-0 left-0 w-full h-full s('bg-mask/80') hidden
+
+  &-wrapper
+    @apply relative flex flex-col s('w-[188px]') h-full bg-white rounded-r-lg shadow transition-all
+
   &-logo
     @apply flex-grow-0 flex-shrink-0 relative flex justify-center py-4 pr-11 pl-6 transition-all
 
@@ -261,5 +395,34 @@ export default defineComponent({
 
     .icon-chevron-right
       @apply hidden
+
+  &-nav-intro
+    @apply s('w-[288px]') p-4 bg-white rounded-lg hidden
+
+    &[data-show]
+      @apply block
+
+    &[data-popper-placement^='right'] > &-arrow
+      @apply s('-left-3.75') s('top-4')
+
+    &-header
+      @apply mb-2 text-base font-bold text-primary
+
+    &-body
+      @apply mb-4 text-base text-pgray-2 whitespace-pre-line
+
+    &-footer
+      @apply text-right
+
+    &-arrow, &-arrow:before
+      @apply absolute s('w-[17px]') s('h-[20px]') bg-contain
+      background url('~/assets/images/commons/nav-intro-arrow.svg') top left no-repeat
+
+    &-arrow
+      @apply invisible
+
+      &:before
+        content ''
+        @apply visible
 </style>
   

package/components/SLSidebarNavGroupItem.vue

@@ -42,5 +42,5 @@ export default defineComponent({
     @apply bg-primary-900
 
 .sidebar-nav-group-item
-  @apply w-full mt-1 p-2 space-y-1 bg-primary-50 rounded-lg overflow-hidden
+  @apply w-full mt-1 p-2 space-y-1 bg-primary-50 rounded-lg
 </style>

package/components/SLSidebarNavGroupItemSection.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 .sidebar-nav-group-item-section(:class='{ collapsed }')
   .sidebar-nav-group-item-section-header(
+    :id='`nav-link-${itemConfig.code}`'
     :class='{ "router-link-active": isLinkActive, "router-link-exact-active": isLinkExactActive, active: actived }'
     ref='headerEl'
     @mouseenter='onIconMouseEnter',
@@ -35,6 +36,7 @@
     .sidebar-nav-group-item-section-body-wrapper
       NuxtLink.sidebar-nav-group-item-section-link(
         v-for='(link, i) in itemConfig.links'
+        :id='`nav-link-${link.code}`'
         :to='link.to ? link.to : "javascript:;"',
         :external='!link.to',
         :key='link.code'
@@ -56,8 +58,6 @@
           .sidebar-nav-group-item-section-popup-link-title {{ itemConfig.title }}
           .sidebar-nav-group-item-section-popup-link-icon(v-if='itemConfig.status === "plus"')
             SLIcon(icon='add')
-          .sidebar-nav-group-item-section-popup-link-icon(v-else)
-            SLIcon(icon='sort-down')
         .sidebar-nav-group-item-section-popup-divide(v-if='itemConfig.links.length > 0')
         NuxtLink.sidebar-nav-group-item-section-popup-link(
           v-for='(link, i) in itemConfig.links'
@@ -180,11 +180,13 @@ export default defineComponent({
       const wrapperRect = bodyWrapper.getBoundingClientRect();
       collapseTween = gsap.to(bodyEl.value, {
         height: 0,
+        alpha: 0,
         duration: 0.3,
         ease: 'power2.out',
         onStart: () => {
           if (!bodyEl.value) return;
           bodyEl.value.style.height = `${wrapperRect.height + 4}px`;
+          bodyEl.value.style.opacity = '1';
         },
       });
     }
@@ -198,6 +200,7 @@ export default defineComponent({
       const wrapperRect = bodyWrapper.getBoundingClientRect();
       collapseTween = gsap.to(bodyEl.value, {
         height: wrapperRect.height + 4,
+        alpha: 1,
         duration: 0.3,
         ease: 'power2.out',
         onComplete: () => {

package/components/SLSidebarNavLinkItem.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
 NuxtLink.sidebar-nav-link-item(
+  :id='`nav-link-${itemConfig.code}`',
   :to='itemConfig.to ? itemConfig.to : "javascript:;"',
   :external='!itemConfig.to',
   :class='{ "sidebar-nav-link-item--home": itemConfig.to === "/application", "router-link-active": linkActive }'
@@ -59,12 +60,6 @@ NuxtLink.sidebar-nav-link-item(
               v-if='itemConfig.status === "lock"',
               icon='lock'
             )
-            SLIcon(
-              v-else-if='itemConfig.status === "new"',
-              icon='new-circle'
-            )
-            .inline-flex.items-center.justify-center.w-4.h-4(v-else)
-              .bg-danger.rounded-full(class='w-1.5 h-1.5')
 </template>
 
 <script lang="ts">

package/interface/NavConfigType.ts

@@ -35,6 +35,11 @@ export type NavItemLink = {
   include?: string[];
   inDev?: boolean;
   status: NavItemStatus;
+  intro?: {
+    code: string;
+    content: string;
+    needShowIntro: boolean;
+  };
 }
 
 export type NavItemSection = {
@@ -47,6 +52,11 @@ export type NavItemSection = {
   preIcon?: string;
   links?: NavItemLink[];
   status: NavItemStatus;
+  intro?: {
+    code: string;
+    content: string;
+    needShowIntro: boolean;
+  };
 }
 
 export type NavItemGroup = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.49",
+  "version": "1.4.51",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",