valaxy-theme-yun 0.20.0-beta.1 → 0.20.0-beta.11

package/components/prologue/PrologueSquare.vue

@@ -1,66 +1,10 @@
 <script setup lang="ts">
-import { useMotion } from '@vueuse/motion'
 import { ref } from 'vue'
-import { useSiteConfig } from 'valaxy'
-import { cubicBezier } from '../../client/constants'
 import { useThemeConfig } from '../../composables'
 
-const siteConfig = useSiteConfig()
 const themeConfig = useThemeConfig()
 
 const showContent = ref(false)
-const avatarRef = ref<HTMLElement>()
-const motionInstance = useMotion(avatarRef, {
-  initial: {
-    borderRadius: '0%',
-    width: 'var(--total-char-height)',
-    height: 'var(--total-char-height)',
-    rotate: 135,
-    y: '0%',
-  },
-  enter: {
-    borderRadius: '50%',
-    rotate: 0,
-    y: '0%',
-    width: '120px',
-    height: '120px',
-    boxShadow: 'none',
-    transition: {
-      type: 'keyframes',
-      ease: cubicBezier.easeIn,
-      duration: 800,
-      onComplete: () => {
-        motionInstance.variant.value = 'leave'
-        showContent.value = true
-      },
-    },
-  },
-  leave: {
-    // y: '-50%',
-    boxShadow: '0 5px 100px rgba(0, 0, 0, 0.15)',
-    transition: {
-      type: 'keyframes',
-      ease: cubicBezier.easeInOut,
-      duration: 500,
-    },
-  },
-})
-
-const introRef = ref<HTMLElement>()
-useMotion(introRef, {
-  initial: {
-    y: '0%',
-  },
-  enter: {
-    y: 'calc(-50%)',
-    transition: {
-      delay: 800,
-      type: 'keyframes',
-      ease: cubicBezier.easeInOut,
-      duration: 400,
-    },
-  },
-})
 </script>
 
 <template>
@@ -74,66 +18,77 @@ useMotion(introRef, {
     <slot />
 
     <div
-      ref="introRef"
       flex="~ col center"
-      class="info relative"
+      class="info relative duration-800 transition-cubic-bezier-ease-in"
+      :class="{
+        'translate-y--1/2': showContent,
+      }"
     >
-      <div
-        ref="avatarRef" flex="~ col" class="absolute yun-square bg-$va-c-text square-rotate w-full"
-      >
-        <LineBurstEffects
-          class="absolute top-0 left-0 right-0 bottom-0 size-full scale-200"
-          :duration="800"
-        />
-        <YunAuthorAvatar />
-      </div>
-
-      <div
-        v-if="showContent"
-        v-motion
-        :initial="{
-          opacity: 0,
-          y: '0',
-        }"
-        :enter="{
-          opacity: 1,
-          y: 'calc(50% + 60px)',
-          transition: {
-            type: 'keyframes',
-            ease: cubicBezier.easeInOut,
-            duration: 400,
-          },
-        }"
+      <Transition
+        enter-from-class="enter-from"
+        enter-to-class="enter-to"
+        appear
+        @after-appear="showContent = true"
       >
-        <YunAuthorName class="mt-3" />
-        <YunAuthorIntro />
-        <YunSiteTitle />
-        <h4 v-if="siteConfig.subtitle" class="site-subtitle block text-$va-c-text op-80" text="sm">
-          {{ siteConfig.subtitle }}
-        </h4>
-        <div v-if="siteConfig.description" class="site-description my-1">
-          {{ siteConfig.description }}
-        </div>
-
         <div
-          class="mt-4 flex-center w-50 md:w-100 m-auto gap-2"
-          flex="~ wrap"
-          p="x-$rect-margin"
+          flex="~ col"
+          class="absolute yun-square bg-$va-c-text square-rotate w-full z-1"
         >
-          <YunSiteLinkItem
-            :page="{
-              name: '博客文章',
-              icon: 'i-ri-article-line',
-              url: '/posts/',
-            }"
-          />
-          <slot />
-          <YunSiteLinkItem
-            v-for="item, i in themeConfig.pages"
-            :key="i" :page="item"
+          <LineBurstEffects
+            class="absolute top-0 left-0 right-0 bottom-0 size-full scale-200"
+            :delay="1000"
+            :duration="600"
           />
+          <Transition
+            enter-from-class="op-0"
+            enter-to-class="op-100"
+            enter-active-class="transition-400 delay-400"
+            appear
+          >
+            <YunAuthorAvatar />
+          </Transition>
         </div>
-      </div>
+      </Transition>
+
+      <Transition
+        enter-from-class="translate-y-0"
+        enter-active-class="duration-800 transition-cubic-bezier-ease-in"
+        appear
+      >
+        <div v-if="showContent" class="translate-y-[calc(50%+50px)] animate-fade-in">
+          <YunAuthorName class="mt-3" />
+          <YunAuthorIntro />
+
+          <YunDivider />
+
+          <div flex="~ col" class="gap-2 items-center justify-center">
+            <YunSiteTitle />
+            <YunSiteSubtitle />
+            <YunSiteDescription />
+          </div>
+
+          <YunDivider />
+
+          <div
+            class="mt-4 flex-center w-64 md:w-100 m-auto gap-2"
+            flex="~ wrap"
+            p="x-$rect-margin"
+          >
+            <YunSiteLinkItem
+              :page="{
+                name: '博客文章',
+                icon: 'i-ri-article-line',
+                url: '/posts/',
+              }"
+            />
+            <slot />
+            <YunSiteLinkItem
+              v-for="item, i in themeConfig.pages"
+              :key="i" :page="item"
+            />
+          </div>
+        </div>
+      </Transition>
     </div>
   </div>
 </template>
@@ -141,4 +96,21 @@ useMotion(introRef, {
 <style lang="scss">
 @use 'sass:map';
 @use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+.yun-square {
+  transition: all 0.8s map.get($cubic-bezier, 'ease-in');
+  border-radius: 50%;
+  transform: rotate(0deg) translateY(0%);
+  width: 100px;
+  height: 100px;
+  box-shadow: 0 5px 100px rgb(0 0 0 / 0.15);
+
+  &.enter-from {
+    border-radius: 0%;
+    width: var(--total-char-height);
+    height: var(--total-char-height);
+    transform: rotate(135deg) translateY(0%);
+    box-shadow: none;
+  }
+}
 </style>

package/components/prologue/YunAEFrame.vue

@@ -1,100 +1,44 @@
 <script setup lang="ts">
-import type { PopmotionTransitionProps } from '@vueuse/motion'
-import { useMotion } from '@vueuse/motion'
-import { useAppStore } from 'valaxy'
-import { computed, ref } from 'vue'
-
-const tlRef = ref<HTMLElement>()
-const trRef = ref<HTMLElement>()
-const blRef = ref<HTMLElement>()
-const brRef = ref<HTMLElement>()
-
-const app = useAppStore()
-const cornerSize = computed(() => {
-  return app.isMobile ? 40 : 50
-})
-const cornerMargin = computed(() => {
-  return app.isMobile ? 10 : 30
-})
-const cornerBorderSize = computed(() => {
-  return app.isMobile ? 3 : 5
-})
-
-const cornerTransitionProps: PopmotionTransitionProps = {
-  type: 'spring',
-  duration: 600,
-}
+import { onMounted, ref } from 'vue'
 
-useMotion(tlRef, {
-  initial: {
-    x: -cornerMargin.value,
-    y: -cornerMargin.value,
-  },
-  enter: {
-    x: 0,
-    y: 0,
-    transition: cornerTransitionProps,
-  },
-})
-
-useMotion(trRef, {
-  initial: {
-    x: cornerMargin.value,
-    y: -cornerMargin.value,
-  },
-  enter: {
-    x: 0,
-    y: 0,
-    transition: cornerTransitionProps,
-  },
-})
-
-useMotion(blRef, {
-  initial: {
-    x: -cornerMargin.value,
-    y: cornerMargin.value,
-  },
-  enter: {
-    x: 0,
-    y: 0,
-    transition: cornerTransitionProps,
-  },
-})
-
-useMotion(brRef, {
-  initial: {
-    x: cornerMargin.value,
-    y: cornerMargin.value,
-  },
-  enter: {
-    x: 0,
-    y: 0,
-    transition: cornerTransitionProps,
-  },
-})
-
-const cssVarStyles = computed(() => {
-  return {
-    '--corner-size': `${cornerSize.value}px`,
-    '--corner-margin': `${cornerMargin.value}px`,
-    '--corner-border-size': `${cornerBorderSize.value}px`,
-  }
+const playAnim = ref(false)
+onMounted(() => {
+  playAnim.value = true
 })
 </script>
 
 <template>
   <div
-    class="ae-frame" :style="cssVarStyles"
+    class="yun-ae-frame"
+    :class="{
+      play: playAnim,
+    }"
   >
-    <div ref="tlRef" class="absolute" />
-    <div ref="trRef" class="absolute" />
-    <div ref="blRef" class="absolute" />
-    <div ref="brRef" class="absolute" />
+    <div class="tl absolute" />
+    <div class="tr absolute" />
+    <div class="bl absolute" />
+    <div class="br absolute" />
   </div>
 </template>
 
 <style lang="scss">
-.ae-frame {
+@use 'sass:map';
+@use 'valaxy/client/styles/mixins/index.scss' as *;
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+@include screen('md') {
+  .yun-ae-frame {
+    --corner-size: 50px;
+    --corner-margin: 30px;
+    --corner-border-size: 5px;
+  }
+}
+
+.yun-ae-frame {
+  --corner-size: 40px;
+  --corner-margin: 8px;
+  --corner-border-size: 3px;
+
   div {
     width: var(--corner-size);
     height: var(--corner-size);
@@ -151,5 +95,44 @@ const cssVarStyles = computed(() => {
       }
     }
   }
+
+  .tl, .tr, .bl, .br {
+    position: absolute;
+    transition: transform 0.6s map.get($cubic-bezier, 'ease-in');
+  }
+
+  .tl {
+    transform: translate(calc(var(--corner-margin) * -1), calc(var(--corner-margin) * -1));
+  }
+
+  .tr {
+    transform: translate(calc(var(--corner-margin)), calc(var(--corner-margin) * -1));
+  }
+
+  .bl {
+    transform: translate(calc(var(--corner-margin) * -1), calc(var(--corner-margin)));
+  }
+
+  .br {
+    transform: translate(calc(var(--corner-margin)), calc(var(--corner-margin)));
+  }
+
+  &.play {
+    .tl {
+      transform: translate(0, 0);
+    }
+
+    .tr {
+      transform: translate(0, 0);
+    }
+
+    .bl {
+      transform: translate(0, 0);
+    }
+
+    .br {
+      transform: translate(0, 0);
+    }
+  }
 }
 </style>

package/components/site/YunSiteDescription.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <div v-if="siteConfig.description" class="site-description text-$va-c-text text-sm">
+    {{ siteConfig.description }}
+  </div>
+</template>

package/components/site/YunSiteLinkItem.vue

@@ -15,7 +15,7 @@ const yunApp = useYunAppStore()
     inline-flex
     :to="page.url" :title="page.name"
     :style="`color:${page.color}`"
-    hover="bg-gray-100/50 dark:bg-gray-800/50"
+    hover="bg-white/80 dark:bg-black/80"
     @click="yunApp.fullscreenMenu.isOpen = false"
   >
     <div :class="page.icon" class="icon" />

package/components/site/YunSiteSubtitle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useSiteConfig } from 'valaxy'
+
+const siteConfig = useSiteConfig()
+</script>
+
+<template>
+  <h4
+    v-if="siteConfig.subtitle"
+    class="site-subtitle block text-$va-c-text op-80" text="sm"
+  >
+    {{ siteConfig.subtitle }}
+  </h4>
+</template>

package/components/ui/YunDivider.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="h-1px bg-black/50 dark:bg-white/80 my-4 md:my-6" />
+</template>

package/composables/animation.ts

@@ -0,0 +1,37 @@
+import { useMotion } from '@vueuse/motion'
+import type { MaybeRef } from 'vue'
+import { cubicBezier } from '../client/constants'
+
+/**
+ * 统一的弹跳出现动画
+ */
+export function useYunSpringAnimation(target: MaybeRef<HTMLElement | undefined>, options: {
+  /**
+   * index order
+   */
+  i: number
+  y?: number
+  duration?: number
+  /**
+   * delay in ms
+   */
+  delay?: number
+}) {
+  useMotion(target, {
+    initial: {
+      opacity: 0,
+      y: options.y || 40,
+    },
+    enter: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: options.i * (options.delay || 50),
+        type: 'spring',
+        ease: cubicBezier.easeIn,
+        damping: 8,
+        duration: options.duration || 400,
+      },
+    },
+  })
+}

package/layouts/404.vue

@@ -7,8 +7,6 @@ const { back } = useBack()
 </script>
 
 <template>
-  <YunSidebar :show-hamburger="true" />
-
   <main class="va-main w-full h-screen" text="center" flex="~ col" justify="center" items="center">
     <div class="not-found" title="404" font="mono">
       404
@@ -27,6 +25,6 @@ const { back } = useBack()
 <style lang="scss" scoped>
 .not-found {
   font-size: 10rem;
-  text-shadow: 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
+  text-shadow: 0 5px 10px rgb(0 0 0 / .25), 0 20px 20px rgb(0 0 0 / .15);
 }
 </style>

package/layouts/albums.vue

@@ -20,28 +20,29 @@ const albums = computed(() => frontmatter.value.albums || [])
 </script>
 
 <template>
-  <YunSidebar v-if="$slots['sidebar-child']">
-    <slot name="sidebar-child" />
-  </YunSidebar>
-  <YunSidebar v-else />
-
-  <RouterView v-slot="{ Component }">
-    <component :is="Component">
-      <template #main-header>
-        <YunPageHeader
-          :title="title || t('title.album')"
-          :icon="frontmatter.icon || 'i-ri-gallery-line'"
-          :color="frontmatter.color"
-          :page-title-class="frontmatter.pageTitleClass"
-        />
-      </template>
-      <template #main-content>
-        <div text="center" class="yun-text-light" p="2">
-          {{ t('counter.albums', albums.length) }}
-        </div>
-        <YunAlbumList :albums="albums" />
-        <RouterView />
-      </template>
-    </component>
-  </RouterView>
+  <YunLayoutWrapper>
+    <YunLayoutLeft />
+
+    <RouterView v-slot="{ Component }">
+      <component :is="Component">
+        <template #main-header>
+          <YunPageHeader
+            :title="title || t('title.album')"
+            :icon="frontmatter.icon || 'i-ri-gallery-line'"
+            :color="frontmatter.color"
+            :page-title-class="frontmatter.pageTitleClass"
+          />
+        </template>
+        <template #main-content>
+          <div text="center" class="yun-text-light" p="2">
+            {{ t('counter.albums', albums.length) }}
+          </div>
+          <YunAlbumList :albums="albums" />
+          <RouterView />
+        </template>
+      </component>
+    </RouterView>
+  </YunLayoutWrapper>
+
+  <YunFooter />
 </template>

package/layouts/archives.vue

@@ -33,7 +33,6 @@ const pageIcon = computed(() => {
       <component :is="Component">
         <template #main-header>
           <YunPageHeader
-            class="mt-8"
             :title="title || t('menu.archives')"
             :icon="pageIcon"
             :color="frontmatter.color"

package/layouts/categories.vue

@@ -53,7 +53,6 @@ useSchemaOrg([
       <component :is="Component">
         <template #main-header>
           <YunPageHeader
-            class="mt-8"
             :title="title || t('menu.categories')"
             :icon="pageIcon"
             :color="frontmatter.color"
@@ -61,9 +60,14 @@ useSchemaOrg([
           />
         </template>
         <template #main-content>
-          <div text="center" class="yun-text-light" p="2">
-            {{ t('counter.categories', Array.from(categories.children).length) }}
-          </div>
+          <Transition
+            enter-active-class="animate-fade-in animate-duration-400"
+            appear
+          >
+            <div text="center" class="yun-text-light" p="2">
+              {{ t('counter.categories', Array.from(categories.children).length) }}
+            </div>
+          </Transition>
           <YunCategories :categories="categories.children" />
           <RouterView />
         </template>

package/layouts/gallery.vue

@@ -29,34 +29,35 @@ const YunGallery = runtimeConfig.value.addons['valaxy-addon-lightgallery']
 </script>
 
 <template>
-  <YunSidebar v-if="$slots['sidebar-child']">
-    <slot name="sidebar-child" />
-  </YunSidebar>
-  <YunSidebar v-else />
-
-  <RouterView v-slot="{ Component }">
-    <component :is="Component">
-      <template #main-header>
-        <YunPageHeader
-          :title="title || t('title.gallery')"
-          :icon="frontmatter.icon || 'i-ri-gallery-line'"
-          :color="frontmatter.color"
-          :page-title-class="frontmatter.pageTitleClass"
-        />
-      </template>
-      <template #main-content>
-        <div text="center" class="yun-text-light" p="2">
-          {{ t('counter.photos', photos.length) }}
-        </div>
-        <div class="page-action" text="center">
-          <a class="yun-icon-btn" :title="t('accessibility.back')" @click="() => router.back()">
-            <div i-ri-arrow-go-back-line />
-          </a>
-        </div>
-        <ValaxyGalleryDecrypt v-if="frontmatter.encryptedPhotos" :encrypted-photos="frontmatter.encryptedPhotos" />
-        <YunGallery v-else :photos="photos" />
-        <RouterView />
-      </template>
-    </component>
-  </RouterView>
+  <YunLayoutWrapper>
+    <YunLayoutLeft />
+
+    <RouterView v-slot="{ Component }">
+      <component :is="Component">
+        <template #main-header>
+          <YunPageHeader
+            :title="title || t('title.gallery')"
+            :icon="frontmatter.icon || 'i-ri-gallery-line'"
+            :color="frontmatter.color"
+            :page-title-class="frontmatter.pageTitleClass"
+          />
+        </template>
+        <template #main-content>
+          <div text="center" class="yun-text-light" p="2">
+            {{ t('counter.photos', photos.length) }}
+          </div>
+          <div class="page-action" text="center">
+            <a class="yun-icon-btn" :title="t('accessibility.back')" @click="() => router.back()">
+              <div i-ri-arrow-go-back-line />
+            </a>
+          </div>
+          <ValaxyGalleryDecrypt v-if="frontmatter.encryptedPhotos" :encrypted-photos="frontmatter.encryptedPhotos" />
+          <YunGallery v-else :photos="photos" />
+          <RouterView />
+        </template>
+      </component>
+    </RouterView>
+  </YunLayoutWrapper>
+
+  <YunFooter />
 </template>