@pubinfo/core 2.0.0-beta.8 → 2.0.0-rc.1

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

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import { useContext } from '../../composables/useContext';
-import IframeView from './IframeView.vue';
-import LinkView from './LinkView.vue';
-
-defineOptions({
-  name: 'LayoutContent',
-});
-
-const routeInfo = useRoute();
-const { settingsStore, keepAliveStore } = useContext();
-
-const isIframe = computed(() => !!routeInfo.meta.iframe);
-const isLink = computed(() => !!routeInfo.meta.link);
-</script>
-
-<template>
-  <RouterView v-slot="{ Component, route }">
-    <Transition :name="settingsStore.settings.mainPage.enableTransition ? settingsStore.settings.mainPage.transitionMode : ''" mode="out-in" appear>
-      <KeepAlive :include="keepAliveStore.list">
-        <component
-          :is="Component"
-          v-show="!(isIframe || isLink)"
-          :key="route.fullPath"
-          class="page-container"
-        />
-      </KeepAlive>
-    </Transition>
-  </RouterView>
-
-  <IframeView v-show="isIframe && !isLink" />
-  <LinkView v-if="isLink" />
-</template>
-
-<style scoped lang="scss">
-// 主内容区动画
-.fade-enter-active,
-.slide-left-enter-active,
-.slide-right-enter-active,
-.slide-top-enter-active,
-.slide-bottom-enter-active {
-  transition: 0.2s;
-}
-
-.fade-leave-active,
-.slide-left-leave-active,
-.slide-right-leave-active,
-.slide-top-leave-active,
-.slide-bottom-leave-active {
-  transition: 0.15s;
-}
-
-.fade-enter-from {
-  opacity: 0;
-}
-
-.fade-leave-to {
-  opacity: 0;
-}
-
-.slide-left-enter-from {
-  margin-left: 20px;
-  opacity: 0;
-}
-
-.slide-left-leave-to {
-  margin-left: -20px;
-  opacity: 0;
-}
-
-.slide-right-enter-from {
-  margin-left: -20px;
-  opacity: 0;
-}
-
-.slide-right-leave-to {
-  margin-left: 20px;
-  opacity: 0;
-}
-
-.slide-top-enter-from {
-  margin-top: 20px;
-  opacity: 0;
-}
-
-.slide-top-leave-to {
-  margin-top: -20px;
-  opacity: 0;
-}
-
-.slide-bottom-enter-from {
-  margin-top: -20px;
-  opacity: 0;
-}
-
-.slide-bottom-leave-to {
-  margin-top: 20px;
-  opacity: 0;
-}
-</style>

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>