@pubinfo/core 2.0.0-beta.9 → 2.0.0-rc.2

package/src/layout/components/Header/TopMode/NotCursor.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'NotCursor',
-});
-
-withDefaults(defineProps<{
-  isCursor?: boolean
-  skidding?: number
-}>(), {
-  isCursor: false,
-  skidding: 0,
-});
-</script>
-
-<template>
-  <slot v-if="!isCursor" />
-  <VMenu
-    v-else
-    :triggers="['hover']"
-    :skidding="skidding"
-    :delay="0"
-    :auto-hide="false"
-    theme="not-cursor"
-  >
-    <slot />
-    <template #popper>
-      <div class="not-cursor-container" box-border flex="~ col justify-center items-center">
-        <img src="~@/assets/images/not-cursor.png" w-60px alt="">
-        <div text="#B8BBBD 14px" mt-10px>
-          该功能暂未上线，敬请期待！
-        </div>
-      </div>
-    </template>
-  </VMenu>
-</template>
-
-<style lang="scss" scoped>
-.not-cursor-container {
-  width: 100%;
-  height: 100%;
-}
-</style>
-
-<style lang="scss">
-.v-popper--theme-not-cursor {
-  z-index: 1000;
-
-  .v-popper__inner {
-    width: 228px;
-    height: 123px;
-    background-image: linear-gradient(-55deg, #fff 0%, #eaf3ff 87%);
-    border: 1px solid #fff;
-    border-radius: 6px;
-    box-shadow: 4px 8px 14px -4px #8195b74f;
-
-    >div {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .v-popper__arrow-container {
-    display: none;
-  }
-}
-
-.dark {
-  .v-popper--theme-not-cursor {
-    .v-popper__inner {
-      background-image: linear-gradient(-43deg, #141414  0%, #141414 87%);
-      border: 1px solid #4b4f53;
-      border-radius: 8px;
-      box-shadow: none;
-    }
-  }
-}
-</style>

package/src/layout/components/Header/index.vue

@@ -1,263 +0,0 @@
-<script setup lang="ts">
-import { useContext } from '../../composables/useContext';
-import Logo from '../Logo/index.vue';
-import Tools from '../Tools/index.vue';
-
-defineOptions({
-  name: 'LayoutHeader',
-});
-
-const TopMode = defineAsyncComponent(() => import('./TopMode/index.vue'));
-const TopThinMode = defineAsyncComponent(() => import('./TopThinMode.vue'));
-
-const { settingsStore } = useContext();
-</script>
-
-<template>
-  <Transition name="header">
-    <header v-if="settingsStore.mode === 'pc' && ['head', 'only-head'].includes(settingsStore.settings.menu.menuMode)">
-      <div class="header-container">
-        <div class="main">
-          <slot name="logo">
-            <Logo />
-          </slot>
-
-          <slot name="menu">
-            <!-- 顶部模式 -->
-            <TopMode v-if="settingsStore.settings.menu.menuMode === 'head'" />
-            <!-- 顶部精简模式 -->
-            <TopThinMode v-else-if="settingsStore.settings.menu.menuMode === 'only-head'" />
-          </slot>
-        </div>
-
-        <slot name="tools">
-          <Tools />
-        </slot>
-      </div>
-    </header>
-  </Transition>
-</template>
-
-<style lang="scss" scoped>
-[data-app-width-mode="center"],
-[data-app-width-mode="center-max-width"] {
-  header {
-    width: var(--g-app-width);
-    max-width: 100%;
-  }
-}
-
-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: var(--g-header-height);
-  padding: 0 20px;
-  margin: 0 auto;
-  color: var(--g-header-color);
-  background-color: var(--g-header-bg);
-  // box-shadow: -1px 0 0 0 var(--g-border-color), 1px 0 0 0 var(--g-border-color), 0 1px 0 0 var(--g-border-color);
-  transition: background-color 0.3s;
-
-  .header-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: var(--g-header-width);
-    height: 100%;
-    margin: 0 auto;
-
-    :deep(.main) {
-      display: flex;
-      flex: auto;
-      flex-wrap: nowrap;
-      align-items: center;
-      width: 0;
-      height: 100%;
-
-      .menu-active {
-        &-arrow {
-          .item-container::before,
-          .menu-item::before {
-            bottom: 0;
-            width: 0;
-            height: 0;
-            content: "";
-            border-right: 5px solid transparent;
-            border-bottom: 5px solid var(--g-header-bg);
-            border-left: 5px solid transparent;
-            opacity: 0;
-            transition: all 0.3s;
-
-            @include position-center(x);
-          }
-
-          .item-container.active::before,
-          .menu-item.active::before {
-            bottom: 8px;
-            opacity: 1;
-          }
-        }
-
-        &-line {
-          .item-container::before,
-          .menu-item::before {
-            bottom: 6px;
-            width: 0;
-            height: 4px;
-            content: "";
-            background-color: var(--g-header-menu-active-bg);
-            border-radius: 2px;
-            box-shadow: 0 0 0 1px var(--g-header-bg);
-            opacity: 0;
-            transition: all 0.3s;
-
-            @include position-center(x);
-          }
-
-          .item-container.active::before,
-          .menu-item.active::before {
-            width: 20px;
-            opacity: 1;
-          }
-        }
-
-        &-dot {
-          .item-container::before,
-          .menu-item::before {
-            bottom: 0;
-            width: 10px;
-            height: 10px;
-            content: "";
-            background-color: var(--g-header-menu-active-bg);
-            border-radius: 50%;
-            box-shadow: 0 0 0 1px var(--g-main-sidebar-bg);
-            opacity: 0;
-            transition: all 0.3s;
-
-            @include position-center(x);
-          }
-
-          .item-container.active::before,
-          .menu-item.active::before {
-            bottom: 4px;
-            opacity: 1;
-          }
-        }
-      }
-    }
-  }
-
-  @media screen and (max-width: $g-header-width) {
-    .header-container {
-      width: 100%;
-    }
-  }
-
-  :deep(.menu-container) {
-    flex: 1;
-    height: 100%;
-    padding: 0 20px;
-    margin: 0 30px;
-    overflow-x: auto;
-
-    // firefox隐藏滚动条
-    scrollbar-width: none;
-    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
-
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    &.nothin {
-      display: flex;
-    }
-
-    .menu-item-container-layout {
-      display: flex;
-      flex-direction: row;
-      width: auto;
-    }
-  }
-
-  :deep(.menu) {
-    display: inline-flex;
-    height: 100%;
-    background-color: var(--g-header-bg);
-
-    .menu-item {
-      .v-popper--theme-not-cursor {
-        height: 100%;
-      }
-
-      .menu-item-container {
-        padding: 0 6px;
-        color: var(--g-header-menu-color);
-        background-color: var(--g-header-menu-bg);
-
-        &:hover {
-          color: var(--g-header-menu-hover-color);
-          background-color: var(--g-header-menu-hover-bg);
-        }
-
-        .menu-item-container-icon {
-          transform: scale(1);
-        }
-
-        svg {
-          color: transparent;
-        }
-      }
-
-      &.is-dev {
-        .menu-item-container {
-          cursor: not-allowed;
-
-          i {
-            filter: grayscale(100%);
-          }
-
-          span {
-            opacity: 0.8;
-          }
-        }
-      }
-
-      &.active .menu-item-container {
-        color: var(--g-header-menu-active-color);
-        background-color: var(--g-header-menu-active-bg);
-      }
-    }
-  }
-
-  :deep(.tools) {
-    padding: 0;
-
-    .buttons .item .icon {
-      color: var(--g-header-color);
-    }
-
-    .user-container {
-      font-size: 16px;
-      color: var(--g-header-color);
-    }
-  }
-}
-
-// 头部动画
-.header-enter-active,
-.header-leave-active {
-  transition: transform 0.3s;
-}
-
-.header-enter-from,
-.header-leave-to {
-  transform: translateY(calc(var(--g-header-height) * -1));
-}
-</style>

package/src/layout/components/SettingBar/components/SettingEnableTransition.vue

@@ -1,215 +0,0 @@
-<script setup lang="ts">
-import { useContext } from '../../../composables/useContext';
-
-defineOptions({
-  name: 'SettingEnableTransition',
-});
-const { settingsStore } = useContext();
-
-const { enableTransition, transitionMode } = toRefs(settingsStore.settings.mainPage);
-
-function clickHandle(item: Settings.mainPage['transitionMode']) {
-  if (item) {
-    transitionMode.value = item;
-  }
-}
-const transitionModeList = reactive<
-  {
-    describe: string
-    active: Settings.mainPage['transitionMode']
-    class: string
-  }[]
->([
-  {
-    describe: '淡入淡出',
-    active: 'fade',
-    class: 'mode-fade',
-  },
-  {
-    describe: '向左滑动',
-    active: 'slide-left',
-    class: 'mode-slide-left',
-  },
-  {
-    describe: '向右滑动',
-    active: 'slide-right',
-    class: 'mode-slide-right',
-  },
-  {
-    describe: '向上滑动',
-    active: 'slide-top',
-    class: 'mode-slide-top',
-  },
-  {
-    describe: '向下滑动',
-    active: 'slide-bottom',
-    class: 'mode-slide-bottom',
-  },
-]);
-</script>
-
-<template>
-  <HDivider title="页面切换动画">
-    <div class="flex items-center justify-center pb-4">
-      <HToggle v-model="enableTransition" />
-    </div>
-    <div v-if="enableTransition" class="transition-mode">
-      <HTooltip
-        v-for="(transition, index) in transitionModeList"
-        :key="index"
-        :text="transition.describe"
-        placement="bottom"
-        :delay="500"
-      >
-        <div
-          class="mode"
-          :class="[transitionMode === transition.active ? 'active' : '', transition.class]"
-          @click="clickHandle(transition.active)"
-        />
-      </HTooltip>
-    </div>
-  </HDivider>
-</template>
-
-<style lang="scss" scoped>
-.transition-mode {
-  --at-apply: flex items-center justify-center gap-4 pb-4;
-
-  .mode {
-    --at-apply: relative flex items-center justify-center w-14 h-10 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer;
-
-    &.active {
-      --at-apply: ring-ui-primary ring-2;
-    }
-
-    &::after {
-      --at-apply: content-empty absolute w-3/5 h-3/5 top-1/5 left-1/5 rounded-2 bg-stone-2 dark:bg-stone-9 transition;
-    }
-
-    &.mode-fade {
-      &::after {
-        animation: transition-mode-fade-after 1.5s infinite;
-      }
-
-      @keyframes transition-mode-fade-after {
-        0% {
-          opacity: 1;
-        }
-
-        30%,
-        35% {
-          opacity: 0;
-        }
-
-        65% {
-          opacity: 1;
-        }
-      }
-    }
-
-    &.mode-slide-left {
-      &::after {
-        animation: transition-mode-slide-left 1.5s infinite;
-      }
-
-      @keyframes transition-mode-slide-left {
-        0% {
-          opacity: 1;
-        }
-
-        30% {
-          opacity: 0;
-          transform: translate(-30%, 0);
-        }
-
-        35% {
-          opacity: 0;
-          transform: translate(30%, 0);
-        }
-
-        65% {
-          opacity: 1;
-        }
-      }
-    }
-
-    &.mode-slide-right {
-      &::after {
-        animation: transition-mode-slide-right 1.5s infinite;
-      }
-
-      @keyframes transition-mode-slide-right {
-        0% {
-          opacity: 1;
-        }
-
-        30% {
-          opacity: 0;
-          transform: translate(30%, 0);
-        }
-
-        35% {
-          opacity: 0;
-          transform: translate(-30%, 0);
-        }
-
-        100% {
-          opacity: 1;
-        }
-      }
-    }
-
-    &.mode-slide-top {
-      &::after {
-        animation: transition-mode-slide-top 1.5s infinite;
-      }
-
-      @keyframes transition-mode-slide-top {
-        0% {
-          opacity: 1;
-        }
-
-        30% {
-          opacity: 0;
-          transform: translate(0, -30%);
-        }
-
-        35% {
-          opacity: 0;
-          transform: translate(0, 30%);
-        }
-
-        100% {
-          opacity: 1;
-        }
-      }
-    }
-
-    &.mode-slide-bottom {
-      &::after {
-        animation: transition-mode-slide-bottom 1.5s infinite;
-      }
-
-      @keyframes transition-mode-slide-bottom {
-        0% {
-          opacity: 1;
-        }
-
-        30% {
-          opacity: 0;
-          transform: translate(0, 30%);
-        }
-
-        35% {
-          opacity: 0;
-          transform: translate(0, -30%);
-        }
-
-        100% {
-          opacity: 1;
-        }
-      }
-    }
-  }
-}
-</style>

package/src/layout/components/SettingBar/components/SettingMode.vue

@@ -1,164 +0,0 @@
-<script setup lang="ts">
-import { useContext } from '../../../composables/useContext';
-
-defineOptions({
-  name: 'SettingMode',
-});
-const { settingsStore } = useContext();
-const menu = toRef(settingsStore.settings.menu, 'menuMode');
-
-const modeSide = reactive<
-  {
-    describe: string
-    placement: string
-    active: Settings.menu['menuMode']
-  }[]
->([
-  {
-    describe: '侧边栏模式 (含主导航)',
-    placement: 'bottom',
-    active: 'side',
-  },
-  {
-    describe: '顶部模式',
-    placement: 'bottom',
-    active: 'head',
-  },
-  {
-    describe: '侧边栏模式 (不含主导航)',
-    placement: 'bottom',
-    active: 'single',
-  },
-  {
-    describe: '侧边栏精简模式',
-    placement: 'bottom',
-    active: 'only-side',
-  },
-  {
-    describe: '顶部精简模式',
-    placement: 'bottom',
-    active: 'only-head',
-  },
-]);
-function clickHandle(item: Settings.menu['menuMode']) {
-  if (item) {
-    menu.value = item;
-  }
-}
-</script>
-
-<template>
-  <HDivider title="导航栏模式">
-    <div class="menu-mode">
-      <template v-for="mode in modeSide" :key="mode.active">
-        <HTooltip
-          :text="mode.describe"
-          :placement="mode.placement"
-          :delay="500"
-        >
-          <div
-            class="mode"
-            :class="[menu === mode.active ? 'active' : '', `mode-${mode.active}`]"
-            @click="clickHandle(mode.active)"
-          >
-            <div class="mode-container" />
-          </div>
-        </HTooltip>
-      </template>
-    </div>
-  </HDivider>
-</template>
-
-<style scoped lang="scss">
-.menu-mode {
-  --at-apply: flex items-center justify-center gap-4 pb-4;
-
-  .mode {
-    --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark:ring-stone-7 cursor-pointer transition;
-
-    &.active {
-      --at-apply: ring-ui-primary ring-2;
-    }
-
-    &::before,
-    &::after,
-    .mode-container {
-      --at-apply: absolute pointer-events-none;
-    }
-
-    &::before {
-      --at-apply: content-empty bg-ui-primary;
-    }
-
-    &::after {
-      --at-apply: content-empty bg-ui-primary/60;
-    }
-
-    .mode-container {
-      --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
-
-      &::before {
-        --at-apply: content-empty absolute w-full h-full;
-      }
-    }
-
-    &-side {
-      &::before {
-        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
-      }
-
-      &::after {
-        --at-apply: top-2 bottom-2 left-4.5 w-3;
-      }
-
-      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
-      }
-    }
-
-    &-head {
-      &::before {
-        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
-      }
-
-      &::after {
-        --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
-      }
-
-      .mode-container {
-        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
-      }
-    }
-
-    &-single {
-      &::after {
-        --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
-      }
-
-      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
-      }
-    }
-
-    &-only-side {
-      &::before {
-        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
-      }
-
-      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
-      }
-    }
-
-    &-only-head {
-      &::before {
-        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
-      }
-
-      .mode-container {
-        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
-      }
-    }
-  }
-}
-</style>