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

package/components/YunClassifyPopover.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useMotion } from '@vueuse/motion'
+import Popover from 'primevue/popover'
+import { onMounted, ref } from 'vue'
+
+const op = ref<typeof Popover>()
+
+const pContentRef = ref<HTMLElement>()
+const motion = useMotion(pContentRef, {
+  initial: {
+    opacity: 0,
+    translateY: 30,
+  },
+  enter: {
+    opacity: 1,
+    translateY: 0,
+    transition: {
+      type: 'spring',
+      duration: 200,
+      damping: 9,
+    },
+  },
+})
+
+onMounted(() => {
+  motion.variant.value = 'initial'
+
+  // 滚动时隐藏
+  window.addEventListener('scroll', () => {
+    motion.variant.value = 'initial'
+    setTimeout(() => {
+      op.value?.hide()
+    }, 200)
+  })
+})
+
+function toggle(event: Event) {
+  op.value?.toggle(event)
+  motion.variant.value = op.value?.visible ? 'enter' : 'initial'
+}
+</script>
+
+<template>
+  <YunNavMenuItem
+    icon="i-ri-mind-map" @click="toggle"
+  />
+  <Popover
+    ref="op"
+  >
+    <div
+      ref="pContentRef"
+      class="p-4 shadow-xl"
+      bg="$va-c-bg-light"
+    >
+      <YunSiteInfo class="text-center" />
+      <YunPostsInfo />
+    </div>
+  </Popover>
+</template>

package/components/YunCloud.vue

@@ -17,26 +17,21 @@
 <style lang="scss">
 @use 'valaxy/client/styles/mixins/index.scss' as *;
 
+.dark .yun-cloud {
+  --yun-c-cloud: var(--va-c-bg-soft);
+}
+
 .yun-cloud {
   display: flex;
   width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
   z-index: var(--yun-z-cloud);
   box-sizing: border-box;
-  mix-blend-mode: overlay;
 
   .waves {
     display: flex;
     position: relative;
     width: 100%;
-    height: 100px;
-
-    @include screen('md') {
-      height: 40px;
-    }
+    height: 40px;
   }
 
   .parallax {

package/components/YunConfig.vue

@@ -1,27 +1,10 @@
 <script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
-import { useAppStore } from 'valaxy'
-
-const appStore = useAppStore()
-const { t } = useI18n()
-
-const themeTitle = computed(() => {
-  return appStore.isDark ? t('button.toggle_light') : t('button.toggle_dark')
-})
-
-const styles = computed(() => {
-  return {
-    color: appStore.isDark ? '' : '#f1cb64',
-  }
-})
+// sidebar config
 </script>
 
 <template>
   <div>
-    <button class="yun-icon-btn" :title="themeTitle" :style="styles" @click="appStore.toggleDarkWithTransition">
-      <div i="ri-sun-line dark:ri-moon-line" />
-    </button>
+    <YunToggleDark />
 
     <YunToggleLocale />
   </div>

package/components/YunDebug.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useYunAppStore } from '../stores'
+
+const yun = useYunAppStore()
+
+const infoList = computed(() => {
+  return [
+    {
+      label: 'xs',
+      value: yun.size.isXs,
+    },
+    {
+      label: 'sm',
+      value: yun.size.isSm,
+    },
+    {
+      label: 'md',
+      value: yun.size.isMd,
+    },
+    {
+      label: 'lg',
+      value: yun.size.isLg,
+    },
+    {
+      label: 'xl',
+      value: yun.size.isXl,
+    },
+    {
+      label: '2xl',
+      value: yun.size.is2xl,
+    },
+  ]
+})
+</script>
+
+<template>
+  <div
+    class="bg-black/50 fixed bottom-2 left-2 p-2 gap-1 rounded z-9999"
+    text="xs white" flex="~ col"
+  >
+    <div v-for="item in infoList" :key="item.label" class="gap-2 inline-flex">
+      <span class="w-6" font="bold">{{ item.label }}: </span>
+      <span>{{ item.value ? '✅' : '❌' }}</span>
+    </div>
+  </div>
+</template>

package/components/YunDock.vue

@@ -0,0 +1,223 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useToast } from 'primevue/usetoast'
+import TerminalService from 'primevue/terminalservice'
+import Dock from 'primevue/dock'
+import Toast from 'primevue/toast'
+import { useYunAppStore } from '../stores'
+
+onMounted(() => {
+  TerminalService.on('command', commandHandler)
+})
+
+onBeforeUnmount(() => {
+  TerminalService.off('command', commandHandler)
+})
+
+const yunApp = useYunAppStore()
+const showDock = ref(false)
+watch(() => yunApp.scrollY, () => {
+  if (yunApp.scrollY > 10)
+    showDock.value = true
+  else
+    showDock.value = false
+})
+
+const displayFinder = ref(false)
+const displayTerminal = ref(false)
+const displayPhotos = ref(false)
+const toast = useToast()
+const items = ref([
+  {
+    label: 'Finder',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/finder.svg',
+    command: () => {
+      displayFinder.value = true
+    },
+  },
+  {
+    label: 'Terminal',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/terminal.svg',
+    command: () => {
+      displayTerminal.value = true
+    },
+  },
+  {
+    label: 'App Store',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/appstore.svg',
+    command: () => {
+      toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 })
+    },
+  },
+  {
+    label: 'Safari',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/safari.svg',
+    command: () => {
+      toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 })
+    },
+  },
+  {
+    label: 'Photos',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/photos.svg',
+    command: () => {
+      displayPhotos.value = true
+    },
+  },
+  {
+    label: 'GitHub',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/github.svg',
+  },
+  {
+    label: 'Trash',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/trash.png',
+    command: () => {
+      toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 })
+    },
+  },
+])
+
+function onDockItemClick(event, item) {
+  if (item.command)
+    item.command()
+
+  event.preventDefault()
+}
+
+function commandHandler(text) {
+  let response
+  const argsIndex = text.indexOf(' ')
+  const command = argsIndex !== -1 ? text.substring(0, argsIndex) : text
+
+  switch (command) {
+    case 'date':
+      response = `Today is ${new Date().toDateString()}`
+      break
+
+    case 'greet':
+      response = `Hola ${text.substring(argsIndex + 1)}`
+      break
+
+    case 'random':
+      response = Math.floor(Math.random() * 100)
+      break
+
+    default:
+      response = `Unknown command: ${command}`
+  }
+
+  TerminalService.emit('response', response)
+}
+</script>
+
+<template>
+  <Toast position="top-center" group="tc" />
+
+  <!-- yun-dock slide in -->
+  <Transition
+    name="custom-classes"
+    enter-from-class="opacity-0 translate-y-10"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 translate-y-10"
+  >
+    <Dock
+      v-show="showDock"
+      class="fixed bottom-0 left-0 right-0 z-99 transition" flex="~"
+      :model="items"
+    >
+      <template #item="{ item }">
+        <a
+          v-tooltip.top="item.label" href="#"
+          class="yun-dock-item-link" @click="onDockItemClick($event, item)"
+        >
+          <img :alt="item.label" :src="item.icon" style="width: 100%">
+        </a>
+      </template>
+    </Dock>
+  </Transition>
+
+  <!-- <div class="dock-window dock-advanced">
+    <Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
+      <Terminal welcome-message="Welcome to PrimeVue(cmd: 'date', 'greet {0}' and 'random')" prompt="primevue $" />
+    </Dialog>
+
+    <Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
+      <Tree :value="nodes" />
+    </Dialog>
+
+    <Galleria v-model:visible="displayPhotos" :value="images" :responsive-options="responsiveOptions" :num-visible="2" container-style="width: 400px" :circular="true" :full-screen="true" :show-thumbnails="false" :show-item-navigators="true">
+      <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%">
+      </template>
+    </Galleria>
+  </div> -->
+</template>
+
+<style lang="scss">
+:root {
+  --p-dock-background: rgb(255 255 255 / 0.1);
+  --p-dock-border-color: rgb(255 255 255 / 0.2);
+  --p-dock-padding: 0.5rem;
+  --p-dock-border-radius: var(--p-border-radius-xl);
+  --p-dock-item-border-radius: var(--p-content-border-radius);
+  --p-dock-item-padding: 0.5rem;
+  --p-dock-item-size: 3rem;
+  --p-dock-item-focus-ring-width: var(--p-focus-ring-width);
+  --p-dock-item-focus-ring-style: var(--p-focus-ring-style);
+  --p-dock-item-focus-ring-color: var(--p-focus-ring-color);
+  --p-dock-item-focus-ring-offset: var(--p-focus-ring-offset);
+  --p-dock-item-focus-ring-shadow: var(--p-focus-ring-shadow);
+}
+
+.yun-dock {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--yun-z-dock);
+
+  &-bottom {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .yun-dock-list-container {
+    display: flex;
+    pointer-events: auto;
+    background: var(--p-dock-background);
+    border: 1px solid var(--p-dock-border-color);
+    padding: var(--p-dock-padding);
+    border-radius: var(--p-dock-border-radius);
+  }
+}
+
+.yun-dock-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: 0 none;
+}
+
+.yun-dock-item {
+  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
+  will-change: transform;
+  padding: var(--p-dock-item-padding);
+  border-radius: var(--p-dock-item-border-radius);
+}
+
+.yun-dock-item-link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  width: var(--p-dock-item-size);
+  height: var(--p-dock-item-size);
+}
+</style>

package/components/YunFooter.vue

@@ -1,10 +1,25 @@
 <script lang="ts" setup>
 import { capitalize, computed } from 'vue'
-import { useSiteConfig, useValaxyConfig } from 'valaxy'
+import { useSiteConfig, useValaxyConfig, useValaxyDark } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import pkg from 'valaxy/package.json'
 import { useThemeConfig } from '../composables'
 
+// background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+const { isDark } = useValaxyDark()
+const gradientStyles = computed(() => {
+  if (isDark.value) {
+    return {
+      '--gradient-from': '0 0 0',
+      '--gradient-to': '0 0 0',
+    }
+  }
+  return {
+    '--gradient-from': '161 196 253',
+    '--gradient-to': '194 233 251',
+  }
+})
+
 const { t } = useI18n()
 const config = useValaxyConfig()
 const siteConfig = useSiteConfig()
@@ -15,7 +30,7 @@ const isThisYear = computed(() => {
   return year === themeConfig.value.footer.since
 })
 
-const poweredHtml = computed(() => t('footer.powered', [`<a href="${pkg.repository.url}" target="_blank" rel="noopener">Valaxy</a> v${pkg.version}`]))
+const poweredHtml = computed(() => t('footer.powered', [`<a href="${pkg.repository.url}" target="_blank" rel="noopener">Valaxy</a> <span class="op-60">v${pkg.version}</span>`]))
 const footerIcon = computed(() => themeConfig.value.footer.icon || {
   url: pkg.repository.url,
   name: 'i-ri-cloud-line',
@@ -24,7 +39,14 @@ const footerIcon = computed(() => themeConfig.value.footer.icon || {
 </script>
 
 <template>
-  <footer class="va-footer p-4 text-$va-c-text-light" text="center sm">
+  <footer
+    flex="~ col"
+    class="relative yun-footer va-footer px-4 py-4 pt-0 text-$va-c-text-light w-full mt-14"
+    bg="white dark:$va-c-bg-soft"
+    text="center sm"
+  >
+    <YunCloud class="absolute top--10 left-0 right-0" />
+
     <div v-if="themeConfig.footer.beian?.enable && themeConfig.footer.beian.icp" class="beian" m="y-2">
       <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">
         {{ themeConfig.footer.beian.icp }}
@@ -54,9 +76,39 @@ const footerIcon = computed(() => themeConfig.value.footer.icon || {
     </div>
 
     <div v-if="themeConfig.footer.powered" class="powered" m="2">
-      <span v-html="poweredHtml" /> | <span>{{ t('footer.theme') }} - <a :href="themeConfig.pkg.repository.url" :title="themeConfig.pkg.name" target="_blank">{{ capitalize(config.theme) }}</a> v{{ themeConfig.pkg.version }}</span>
+      <span v-html="poweredHtml" />
+      <span mx-1>|</span>
+      <span>
+        <span>{{ t('footer.theme') }}</span>
+        <span mx-1>-</span>
+        <a :href="themeConfig.pkg.repository.url" :title="themeConfig.pkg.name" target="_blank">{{ capitalize(config.theme) }}</a>
+        <span class="ml-1 op-60">v{{ themeConfig.pkg.version }}</span>
+      </span>
     </div>
 
     <slot />
+
+    <div class="yun-footer-gradient" :style="gradientStyles" />
   </footer>
 </template>
+
+<style lang="scss">
+.yun-footer {
+  letter-spacing: 0.05rem;
+  line-height: 1.8;
+}
+
+.yun-footer-gradient {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 300px;
+  z-index: 999;
+  pointer-events: none;
+  background: linear-gradient(to right,rgb(var(--gradient-from) / 0.2) 0,rgb(var(--gradient-to) / .2) 100%);
+  mask-image: linear-gradient(#fff0,#000 70%);
+  animation: fade-in 2s;
+}
+</style>

package/components/YunFullscreenMenu.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useYunAppStore } from '../stores'
+
+const yunApp = useYunAppStore()
+const fullscreenMenuRef = ref<HTMLElement>()
+</script>
+
+<template>
+  <Transition name="slide-down">
+    <div
+      v-if="yunApp.fullscreenMenu.isOpen"
+      ref="fullscreenMenuRef"
+      p="t-20 md:t-26"
+      class="yun-fullscreen-menu fixed left-0 right-0 bottom-0 top-0 bg-$va-c-bg-soft z-$yun-z-fullscreen-menu overflow-auto"
+    >
+      <div class="flex-center gap-2">
+        <YunToggleDark transition />
+        <YunToggleLocale />
+      </div>
+
+      <YunFullscreenMenuList>
+        <YunFullscreenMenuItem
+          :page="{
+            name: '站点主页',
+            icon: 'i-ri-home-2-line',
+            url: '/',
+          }"
+        />
+      </YunFullscreenMenuList>
+
+      <div v-if="!yunApp.size.isLg" class="mt-4">
+        <YunSiteInfo class="text-center" />
+        <YunPostsInfo />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style lang="scss">
+@use 'sass:map';
+@use 'valaxy-theme-yun/styles/vars.scss' as *;
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+  opacity: 1;
+  transition: transform 0.4s map.get($cubic-bezier, 'ease-in-out'),
+    opacity 0.2s map.get($cubic-bezier, 'ease-in-out');
+  transform: translateY(0);
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+</style>

package/components/YunGirlItem.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useMotion } from '@vueuse/motion'
+import { onImgError } from '../utils'
+import type { GirlType } from '../types'
+
+const props = defineProps<{
+  i: number
+  girl: GirlType
+}>()
+
+const itemRef = ref()
+useMotion(itemRef, {
+  initial: {
+    opacity: 0,
+    translateY: 40,
+  },
+  enter: {
+    opacity: 1,
+    translateY: 0,
+    transition: {
+      type: 'spring',
+      duration: 400,
+      damping: 8,
+      delay: props.i * 50,
+    },
+  },
+})
+</script>
+
+<template>
+  <li ref="itemRef" class="girl-item">
+    <a
+      class="girl-item-link"
+      :href="girl.url || `https://zh.moegirl.org/${girl.name}`"
+      :title="girl.reason" alt="portrait" target="_blank" rel="noopener"
+    >
+      <figure class="girl-info">
+        <img class="girl-avatar" loading="lazy" :src="girl.avatar" :alt="girl.name" :onError="onImgError">
+        <figcaption class="girl-name" :title="(i + 1).toString()">{{ girl.name }}</figcaption>
+        <figcaption class="girl-from">{{ girl.from }}</figcaption>
+      </figure>
+    </a>
+  </li>
+</template>
+
+<style lang="scss">
+.girl-item {
+  display: inline-flex;
+  text-align: center;
+  justify-content: center;
+  width: 8rem;
+  margin: 1rem;
+
+  .girl {
+    &-info {
+      width: 100%;
+      padding: 0;
+      margin: 0;
+    }
+
+    &-avatar {
+      object-fit: cover;
+      object-position: center top;
+      width: 4rem;
+      height: 4rem;
+      border-radius: 50%;
+      padding: 0.2rem;
+      background-color: #fff;
+      box-shadow: 0 0 1rem rgb(0 0 0 / 0.12);
+      transition: 0.5s;
+
+      &:hover {
+        box-shadow: 0 0 2rem rgb(0 0 0 / 0.12);
+      }
+    }
+
+    &-name {
+      font-size: 0.9rem;
+    }
+
+    &-from {
+      font-size: 12px;
+      font-family: var(--va-font-serif);
+      font-weight: bold;
+      color: var(--va-c-text-light);
+
+      &::before {
+        content: '「';
+      }
+
+      &::after {
+        content: '」';
+      }
+    }
+  }
+}
+</style>