@mptw/skylens-ui 1.0.0

package/components/SLSiderbarNav.vue

@@ -0,0 +1,394 @@
+<template lang="pug">
+.siderbar(:class="{ closure: isClosure, dark }")
+  .siderbar-modal(@click="onClickedToggle")
+  .siderbar-logo
+    a.logo(href="javascript:;" @click="onClickedLogo")
+      img.color(src="images/commons/app-logo.png")
+      img.white(src="images/commons/app-logo-white.png")
+  nav.site-nav
+    .nav-wrapper.custom-scrollbar-y
+      ul(v-if="firstConfig.length > 0")
+        SLSiderbarNavItem(
+          v-for="item, i in firstConfig"
+          :config="item"
+          :isSiderbarClosure="isClosure"
+          :key="i"
+          @toggle="onClickedToggle"
+          @click-item="onClickedItem"
+        )
+  nav.mng-nav
+    .nav-wrapper.custom-scrollbar-y
+      ul(v-if="secondConfig.length > 0")
+        SLSiderbarNavItem(
+          v-for="item, i in secondConfig"
+          :config="item"
+          :isSiderbarClosure="isClosure"
+          :key="i"
+          @toggle="onClickedToggle"
+          @click-item="onClickedItem"
+        )
+  .siderbar-mode-setting
+    .siderbar-mode-setting-title 模式
+    SLIOSSwitch(
+      :modelValue="dark"
+      trueLabel="深色"
+      minTrueLabel="深"
+      falseLabel="淺色"
+      minFalseLabel="淺"
+      :size="isClosure ? 'min' : ''"
+      @update:modelValue="onUpdatedMode"
+    )
+  a.siderbar-toggle(href="javascript:;", @click="onClickedToggle")
+    SLIcon(icon="chevron-left")
+    SLIcon(icon="chevron-right")
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import type { NavConfigType } from "~ui/interface/NavConfigType";
+
+export default defineComponent({
+  name: "SLSidebarNav",
+  props: {
+    dark: {
+      type: Boolean,
+      default: false,
+    },
+    firstConfig: {
+      type: Array as PropType<NavConfigType>,
+      default: () => [],
+    },
+    secondConfig: {
+      type: Array as PropType<NavConfigType>,
+      default: () => [],
+    },
+  },
+  emits: ["click:logo", "update:dark", "update:closure", "click:insight"],
+  setup(_, { emit }) {
+    const isClosure = ref(false);
+
+    function onClickedToggle() {
+      isClosure.value = !isClosure.value;
+    }
+
+    function onClickedLogo() {
+      emit("click:logo");
+    }
+
+    function onClickedItem(
+      eventName:
+        | "click:logo"
+        | "update:dark"
+        | "update:closure"
+        | "click:insight"
+    ) {
+      emit(eventName);
+    }
+
+    function onUpdatedMode(isDark: boolean) {
+      emit("update:dark", isDark);
+    }
+
+    watch(isClosure, () => {
+      emit("update:closure", isClosure.value);
+    });
+
+    return {
+      isClosure,
+      onClickedToggle,
+      onClickedLogo,
+      onClickedItem,
+      onUpdatedMode,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.siderbar
+  @apply relative flex flex-col h-full bg-white shadow transition-all
+  width 188px
+
+  &.dark
+    @apply bg-primary
+
+    &.closure
+      nav
+        .siderbar-nav-item
+          &.included
+            @apply text-primary-hover
+
+            & > .nav-item-container
+              .nav-item-wrapper
+                @apply bg-card-primary-light
+
+      .siderbar-toggle
+        &:hover
+          @apply bg-primary-lighter text-white
+
+    .siderbar-logo
+      .logo
+        img.color
+          @apply hidden
+
+        img.white
+          @apply block
+
+    nav
+      .nav-wrapper.custom-scrollbar-y
+        /* Handle */
+        &::-webkit-scrollbar-thumb
+          @apply bg-primary-hover
+
+        /* Handle on hover */
+        &::-webkit-scrollbar-thumb:hover
+          @apply bg-primary-hover
+
+      .siderbar-nav-item
+        @apply text-white
+
+        &.highlighted
+          @apply text-primary-hover
+
+          & > .nav-item-container
+            &:hover
+              .nav-item-wrapper
+                @apply bg-card-primary-light
+
+            .nav-item-wrapper
+              @apply bg-card-primary-light
+
+        .nav-item-container
+          &:hover
+            .nav-item-wrapper
+              @apply bg-primary-hover
+
+          .nav-item-wrapper
+            .nav-item-highlight-border
+              @apply bg-insight-hint-line
+
+    .siderbar-mode-setting
+      @apply text-white
+
+      .ios-switch
+        label
+          @apply border-primary-hover
+          background #2D2F57
+
+          &:before
+            @apply border-2 border-primary-hover bg-primary-lighter
+
+    .siderbar-toggle
+      @apply bg-primary-lighter text-white
+
+      &:hover
+        @apply bg-card-primary-light text-primary
+
+  &.closure
+    margin-left -188px
+
+    @media screen and (min-width: 1024px)
+      width 86px
+      margin-left 0
+
+    .siderbar-modal
+      @apply hidden
+
+    .siderbar-toggle
+      @apply bg-primary-hover text-white
+      margin-right -20px
+      border-radius 0px 12px 12px 0px
+
+      &:hover
+        @apply bg-primary-lighter text-white
+
+      .icon-chevron-left
+        @apply hidden
+
+      .icon-chevron-right
+        @apply inline-block
+
+    nav
+      .siderbar-nav-item
+        &.included
+          @apply text-white
+
+          & > .nav-item-container
+            .nav-item-wrapper
+              @apply bg-primary-hover
+
+        .nav-item-container
+          @apply rounded-r-full
+          width 37px
+
+          .nav-item-wrapper
+            @apply pl-0
+
+            .nav-item-button
+              .button-pre-icon
+                @apply text-lg
+                width 37px
+                height 37px
+
+              .button-title
+                @apply opacity-0
+
+            .nav-item-toggle
+              @apply opacity-0
+
+    .siderbar-mode-setting
+      @apply p-0 justify-center space-x-0
+
+      &-title
+        @apply hidden
+
+      .ios-switch
+        @apply flex-grow-0 flex-shrink-0
+
+  &-modal
+    @apply fixed top-0 left-0 w-full h-full bg-white opacity-0
+    @apply s('lg:hidden')
+
+  &-logo
+    @apply flex-grow-0 flex-shrink-0 relative flex justify-center py-5
+
+    .logo
+      @apply block
+
+      img.white
+        @apply hidden
+
+  nav + nav
+    @apply border-t border-primary-lighter
+
+  nav
+    @apply flex-grow relative flex flex-col overflow-hidden
+
+    &.mng-nav
+      @apply flex-grow-0 flex-shrink-0 pt-2 mt-auto
+
+    .nav-wrapper
+      @apply flex-grow
+
+      &.custom-scrollbar-y
+        @apply overflow-hidden s('hover:overflow-auto')
+
+      ul
+        @apply flex flex-col space-y-2
+
+    .siderbar-nav-item
+      @apply relative flex flex-col items-center w-full text-primary text-base
+
+      &.opened
+        .nav-item-toggle
+          @apply rotate-90
+
+      &.included
+        & > .nav-item-container
+          .nav-item-wrapper
+            .nav-item-button
+              .button-title
+                @apply font-bold
+
+      &.highlighted
+        @apply text-white
+
+        & > .nav-item-container
+          &:hover
+            .nav-item-wrapper
+              @apply bg-primary-hover
+
+          .nav-item-wrapper
+            @apply bg-primary-hover
+
+            .nav-item-button
+              .button-title
+                @apply font-bold
+
+            .nav-item-highlight-border
+              @apply opacity-100
+
+      &.disabled
+        .nav-item-wrapper
+          .nav-item-button
+            @apply cursor-default
+
+          .nav-item-toggle
+            @apply text-gray-4 cursor-default
+
+
+      .nav-item-container
+        @apply relative w-full rounded-l-full overflow-hidden transition-siderbar-nav-item
+        height 37px
+
+        &:hover
+          .nav-item-wrapper
+            @apply bg-bg
+
+          .nav-item-button
+            @apply font-bold
+
+        .nav-item-wrapper
+          @apply absolute top-0 left-0 flex items-center pl-4 transition-padding
+          width 188px
+          height 37px
+
+          .nav-item-button
+            @apply flex-grow flex items-center space-x-2
+
+            .button-pre-icon
+              @apply flex-shrink-0 flex-grow-0 flex items-center justify-center text-base leading-none transition-siderbar-nav-item-icon
+              width 16px
+              height 16px
+
+            .button-title
+              @apply flex-grow block truncate opacity-100 transition-opacity
+
+          .nav-item-toggle
+            @apply flex-grow-0 flex-shrink-0 inline-flex justify-center items-center w-5 h-5 mr-px text-xs leading-none opacity-100 origin-center transition-opacity
+
+          .nav-item-highlight-border
+            @apply flex-grow-0 flex-shrink-0 w-1 h-full bg-primary opacity-0
+
+      .sub-items-wrapper
+        @apply w-full h-0 pl-4 overflow-hidden transition-height
+
+        ul
+          @apply pt-2
+
+      .siderbar-nav-item
+        .nav-item-container
+          .nav-item-wrapper
+            @apply pl-6
+            width 172px
+
+  .siderbar-mode-setting
+    @apply flex items-center justify-start mt-6 mb-4 space-x-4 text-base text-primary
+    padding-right 10px
+    padding-left 40px
+
+    &-title
+      @apply flex-grow-0 flex-shrink-0
+
+    .ios-switch
+      @apply flex-grow
+
+      label
+        @apply border-bg bg-card-primary-light
+
+        &:before
+          @apply border-2 border-bg
+
+  &-toggle
+    @apply absolute top-0 right-0 flex justify-center items-center bg-bg-middle text-sm text-primary-light leading-none transition-all
+    width 20px
+    height 40px
+    margin-top 25px
+    border-radius 12px 0px 0px 12px
+
+    &:hover
+      @apply bg-primary-lighter text-white
+
+    .icon-chevron-right
+      @apply hidden
+</style>

package/components/SLSiderbarNavItem.vue

@@ -0,0 +1,204 @@
+<template lang="pug">
+li.siderbar-nav-item(:class="{ opened: isOpen, highlighted: isHighlight, included: isInclude, disabled: config && config.to === '' && config.subItems && config.subItems.length === 0 }")
+  .nav-item-container
+    .nav-item-wrapper
+      a(href="javascript:;", @click="onClickedItem").nav-item-button
+        .button-pre-icon(v-if="config && config.preIcon")
+          SLIcon(:icon="config.preIcon")
+        span.button-title {{ config ? config.title : '' }}
+      a.nav-item-toggle(
+        v-if="config && config.postIcon"
+        href="javascript:;"
+        @click="onClickedToggle"
+      )
+        SLIcon.button-post-icon(
+          :icon="config.postIcon"
+        )
+      .nav-item-highlight-border
+  .sub-items-wrapper(
+    v-if="config && config.subItems && config.subItems.length > 0"
+    :style="{ height: `${isOpen && !isSiderbarClosure ? subItemsWrapperHeight : 0}px` }"
+  )
+    ul(ref="subItemsUL")
+      SLSiderbarNavItem(
+        v-for="item, i in config.subItems"
+        :config="item"
+        :key="i"
+      )
+</template>
+
+<script lang="ts">
+import type { PropType } from "vue";
+import { fromEvent, interval, Subscription } from "rxjs";
+import { debounce, startWith } from "rxjs/operators";
+import type { NavItemConfigType } from "~ui/interface/NavConfigType";
+
+function getConfigPaths(paths: string[], config: NavItemConfigType | null) {
+  if (!config) {
+    return paths;
+  }
+
+  let newPaths = [...paths];
+
+  if (config.subItems) {
+    config.subItems.forEach((itemConfig) => {
+      newPaths = getConfigPaths(newPaths, itemConfig);
+    });
+  }
+
+  if (config.to) {
+    newPaths.push(config.to);
+  }
+
+  if (config.include) {
+    newPaths.push(...config.include);
+  }
+
+  return newPaths;
+}
+
+export default defineComponent({
+  name: "SLSiderbarNavItem",
+  components: {},
+  props: {
+    config: {
+      type: Object as PropType<NavItemConfigType | null>,
+      default: () => null,
+    },
+    isSiderbarClosure: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["toggle", "click-item"],
+  setup(props, { emit }) {
+    const route = useRoute();
+    const router = useRouter();
+
+    const { config, isSiderbarClosure } = toRefs(props);
+
+    const subItemsUL = shallowRef<HTMLElement | null>(null);
+    const isOpen = ref(false);
+    const subItemsWrapperHeight = ref(0);
+
+    let resizeSubscriber: Subscription | null = null;
+
+    const configPaths = computed(() => {
+      return getConfigPaths([], config.value);
+    });
+
+    const isInclude = computed(() => {
+      let included = false;
+      const matched = route.matched[route.matched.length - 1];
+
+      configPaths.value.forEach((path) => {
+        const regex = new RegExp(`${path}(/)?$`);
+        if (regex.test(matched.path)) {
+          included = true;
+        }
+      });
+
+      return included;
+    });
+
+    const isHighlight = computed(() => {
+      if (!config.value?.to) return false;
+
+      const regex = new RegExp(`${config.value.to}(/)?$`);
+      const matched = route.matched[route.matched.length - 1];
+
+      return (
+        regex.test(matched.path) ||
+        ((config.value.subItems || []).length === 0 && isInclude.value)
+      );
+    });
+
+    function isDefaultOpen() {
+      let defaultOpen = false;
+
+      configPaths.value.forEach((path) => {
+        if (route.path.includes(path)) {
+          defaultOpen = true;
+        }
+      });
+
+      isOpen.value = defaultOpen;
+    }
+
+    function setSubItemsWrapperHeight() {
+      nextTick(() => {
+        if (subItemsUL.value) {
+          subItemsWrapperHeight.value =
+            subItemsUL.value.getBoundingClientRect().height;
+        }
+      });
+    }
+
+    function subscribeResize() {
+      resizeSubscriber = fromEvent(window, "resize")
+        .pipe(debounce(() => interval(500)))
+        .pipe(startWith(0))
+        .subscribe(setSubItemsWrapperHeight);
+    }
+
+    function unsubscribeResize() {
+      if (resizeSubscriber) {
+        resizeSubscriber.unsubscribe();
+      }
+      resizeSubscriber = null;
+    }
+
+    function onClickedItem() {
+      if (isSiderbarClosure.value) {
+        emit("toggle");
+        return;
+      }
+
+      isOpen.value = !isOpen.value;
+
+      if (config.value?.to && config.value?.to !== "") {
+        router.push(config.value.to);
+        return;
+      }
+
+      if (config.value?.emit && config.value?.emit !== "") {
+        emit("click-item", config.value.emit);
+      }
+    }
+
+    function onClickedToggle() {
+      isOpen.value = !isOpen.value;
+    }
+
+    watch(route, () => {
+      isDefaultOpen();
+    });
+
+    watch(config, () => {
+      setSubItemsWrapperHeight();
+      isDefaultOpen();
+    });
+
+    onMounted(() => {
+      isDefaultOpen();
+      subscribeResize();
+    });
+
+    onBeforeUnmount(() => {
+      unsubscribeResize();
+    });
+
+    return {
+      subItemsUL,
+      isOpen,
+      isHighlight,
+      isInclude,
+      subItemsWrapperHeight,
+      onClickedItem,
+      onClickedToggle,
+    };
+  },
+});
+</script>
+
+<style lang="stylus"></style>

package/components/SLSitePage.vue

@@ -0,0 +1,96 @@
+<template lang="pug">
+.site-page
+  slot(name="site-page-header")
+    .site-page-header
+      .site-page-header-left
+        .site-page-header-left-top
+          #breadcrumbs
+          #site-page-datasources(
+            :style="`margin-left: ${dataSourcesMargin}px;`"
+            ref="dataSourcesTarget"
+          )
+        #site-page-header-left-bottom
+      .site-page-header-right
+  .site-page-notice(v-if="notice !== '' || $slots.notice")
+    slot(name="notice") {{ notice }}
+  .site-page-content
+    slot
+  .site-page-footer
+    slot(name='site-page-footer')
+</template>
+
+<script lang="ts">
+export default defineComponent({
+  name: "SLSitePage",
+  components: {},
+  props: {
+    notice: {
+      type: String,
+      default: "",
+    },
+  },
+  setup() {
+    const dataSourcesTarget = shallowRef<HTMLElement | null>(null);
+    const dataSourcesMargin = ref(0);
+
+    let mutationObserver: MutationObserver | null = null;
+
+    function onDataSourcesTargetChange() {
+      nextTick(() => {
+        dataSourcesMargin.value =
+          dataSourcesTarget.value && dataSourcesTarget.value.children.length > 0
+            ? 16
+            : 0;
+      });
+    }
+
+    onMounted(() => {
+      if (dataSourcesTarget.value) {
+        mutationObserver = new MutationObserver(() => {
+          onDataSourcesTargetChange();
+        });
+        mutationObserver.observe(dataSourcesTarget.value, {
+          childList: true,
+          attributes: false,
+          characterData: false,
+          subtree: false,
+        });
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (mutationObserver) {
+        mutationObserver.disconnect();
+      }
+      mutationObserver = null;
+    });
+
+    return {
+      dataSourcesTarget,
+      dataSourcesMargin,
+      onDataSourcesTargetChange,
+    };
+  },
+});
+</script>
+
+<style lang="stylus">
+.site-page
+  @apply flex flex-col w-full min-h-full pt-1
+
+  &-header
+    @apply flex justify-between mb-4
+
+    &-left
+      &-top
+        @apply flex items-center justify-start
+
+      #site-page-header-left-bottom
+        @apply flex mt-2
+
+  &-notice
+    @apply mb-4 pl-2 pr-20 py-3 s('bg-[#FBFCFF]') rounded-lg text-sm text-gray-2
+
+  &-content
+    @apply flex flex-col flex-grow w-full px-4 pt-4 pb-8 rounded-lg bg-white
+</style>

package/components/SLSkyInsightSitePage.vue

@@ -0,0 +1,27 @@
+<template lang="pug">
+.sky-insight-site-page
+  .sky-insight-site-page-header(v-if="$slots['site-page-header']")
+    slot(name="site-page-header")
+  .sky-insight-site-page-content
+    slot
+</template>
+
+<script>
+export default {
+  name: 'SkyInsightSitePage',
+  props: {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="stylus">
+.sky-insight-site-page
+  @apply flex-grow flex flex-col
+
+  &-header
+    @apply s('-mx-4')
+
+  &-content
+    @apply flex flex-col flex-grow w-full p-4 rounded bg-bg-middle
+</style>