@sugarat/theme 0.5.11 → 0.5.12-beta.0

package/src/components/BlogFriendLink.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import { ElAvatar } from 'element-plus'
 import { useDark, useIntervalFn } from '@vueuse/core'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import Swiper from 'swiper'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useFriendData } from '../composables/config/blog'
-import { getImageUrl, shuffleArray } from '../utils/client'
+import { getImageUrl } from '../utils/client'
 import type { Theme } from '../'
 import { friendLinkSvgStr } from '../constants/svg'
+import Avatar from './Avatar.vue'
 
 const isDark = useDark({
   storageKey: 'vitepress-theme-appearance'
@@ -37,10 +36,10 @@ const openScroll = computed(() => {
 
 const friendList = computed(() => {
   const data = [...friendConfig.value.list]
-  // 简单的随机打乱
-  if (friendConfig.value.random) {
-    data.splice(0, data.length, ...shuffleArray(data))
-  }
+  // 简单的随机打乱，在数据导入侧打乱，避免SSG与CSR内容不一致
+  // if (friendConfig.value.random) {
+  //   data.splice(0, data.length, ...shuffleArray(data))
+  // }
 
   // 展示个数限制，删除多余的
   if (scrollSpeed.value === 0 && limit.value) {
@@ -71,25 +70,55 @@ const containerHeight = computed(() => {
   return scrollWrapperHeight.value ? `${scrollWrapperHeight.value}px` : 'auto'
 })
 
-const swiper = ref<Swiper>()
-const { resume, pause } = useIntervalFn(() => {
-  swiper.value?.slideNext()
-}, scrollSpeed.value)
+const currentIndex = ref(0)
+const isTransitioning = ref(false)
 
-onMounted(() => {
-  pause()
+const displayList = computed(() => {
   if (openScroll.value) {
-    // eslint-disable-next-line no-new
-    swiper.value = new Swiper('.scroll-wrapper', {
-      direction: 'vertical',
-      slidesPerView: limit.value,
-      loop: true,
-    })
+    return [...friendList.value, ...friendList.value.slice(0, limit.value)]
+  }
+  return friendList.value
+})
+
+const listStyle = computed(() => {
+  const translate = -1 * currentIndex.value * cardHeight
+  return {
+    transform: `translateY(${translate}px)`,
+    transition: isTransitioning.value ? 'transform 0.5s ease-in-out' : 'none'
+  }
+})
+
+const { resume, pause } = useIntervalFn(() => {
+  if (!openScroll.value)
+    return
+
+  currentIndex.value++
+  isTransitioning.value = true
+
+  if (currentIndex.value === friendList.value.length) {
+    setTimeout(() => {
+      isTransitioning.value = false
+      currentIndex.value = 0
+    }, 500)
+  }
+}, scrollSpeed)
+
+watch(openScroll, (val) => {
+  if (val) {
     resume()
   }
+  else {
+    pause()
+    currentIndex.value = 0
+    isTransitioning.value = false
+  }
+})
+
+onMounted(() => {
+  if (openScroll.value)
+    resume()
 })
 
-// TODO: SSR渲染支持
 onUnmounted(() => {
   pause()
 })
@@ -107,10 +136,10 @@ onUnmounted(() => {
         height: containerHeight,
       }"
     >
-      <ol class="friend-list swiper-wrapper">
-        <li v-for=" (v, idx) in friendList" :key="idx" class="swiper-slide">
+      <ol class="friend-list" :style="listStyle">
+        <li v-for="(v, idx) in displayList" :key="idx" class="scroll-item">
           <a :href="v.url" target="_blank">
-            <ElAvatar :size="50" :src="v.avatar" :alt="v.alt" />
+            <Avatar :size="50" :src="v.avatar" :alt="v.alt" />
             <div class="info-wrapper">
               <span class="nickname">{{ v.nickname }}</span>
               <p class="des">{{ v.des }}</p>
@@ -178,9 +207,7 @@ onUnmounted(() => {
     box-sizing: border-box;
     padding: 0 5px;
     height: 76px;
-    .el-avatar {
-      min-width: 50px;
-    }
+    cursor: pointer;
 
     a {
       display: flex;

package/src/components/BlogHomeInfo.vue

@@ -14,9 +14,7 @@ import BlogFriendLink from './BlogFriendLink.vue'
     <BlogHotArticle />
 
     <!-- 友链 -->
-    <ClientOnly>
-      <BlogFriendLink />
-    </ClientOnly>
+    <BlogFriendLink />
 
     <!-- 标签 -->
     <BlogHomeTags />

package/src/components/BlogHomeTags.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
-import { ElTag } from 'element-plus'
-import { useBrowserLocation, useDark, useUrlSearchParams } from '@vueuse/core'
+import { useBrowserLocation, useUrlSearchParams } from '@vueuse/core'
 import { useRoute, useRouter } from 'vitepress'
 import {
   useActiveTag,
@@ -10,6 +9,7 @@ import {
   useHomeTagsConfig,
 } from '../composables/config/blog'
 import { tagsSvgStr } from '../constants/svg'
+import Tag from './Tag.vue'
 
 const route = useRoute()
 const docs = useArticles()
@@ -25,12 +25,6 @@ const tags = computed(() => {
 
 const activeTag = useActiveTag()
 
-const isDark = useDark({
-  storageKey: 'vitepress-theme-appearance'
-})
-
-const colorMode = computed(() => (isDark.value ? 'light' : 'dark'))
-
 const tagType: any = ['', 'info', 'success', 'warning', 'danger']
 const currentPage = useCurrentPageNum()
 const router = useRouter()
@@ -88,22 +82,22 @@ watch(
     <!-- 头部 -->
     <div class="card-header">
       <span class="title svg-icon" v-html="title" />
-      <ElTag
-        v-if="activeTag.label" :type="activeTag.type || 'primary'" :effect="colorMode" closable
+      <Tag
+        v-if="activeTag.label" :type="activeTag.type || 'primary'" closable
         @close="handleCloseTag"
       >
         {{ activeTag.label }}
-      </ElTag>
+      </Tag>
     </div>
     <!-- 标签列表 -->
     <ul class="tag-list">
       <li v-for="(tag, idx) in tags" :key="tag">
-        <ElTag
-          :type="tagType[idx % tagType.length] || 'primary'" :effect="colorMode"
+        <Tag
+          :type="tagType[idx % tagType.length] || 'primary'"
           @click="handleTagClick(tag, tagType[idx % tagType.length])"
         >
           {{ tag }}
-        </ElTag>
+        </Tag>
       </li>
     </ul>
   </div>

package/src/components/BlogHotArticle.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { ElButton } from 'element-plus'
 import { useRouter, withBase } from 'vitepress'
 import { useArticles, useCleanUrls, useFormatShowDate, useHotArticleConfig, useShowHotArticle } from '../composables/config/blog'
 import { wrapperCleanUrls } from '../utils/client'
 import { fireSVG } from '../constants/svg'
+import Button from './Button.vue'
 
 const formatShowDate = useFormatShowDate()
 
@@ -59,9 +59,9 @@ const showChangeBtn = computed(() => {
     <!-- 头部 -->
     <div class="card-header">
       <span class="title svg-icon" v-html="title" />
-      <ElButton v-if="showChangeBtn" size="small" type="primary" text @click="changePage">
+      <Button v-if="showChangeBtn" size="small" type="primary" text @click="changePage">
         {{ nextText }}
-      </ElButton>
+      </Button>
     </div>
     <!-- 文章列表 -->
     <ol v-if="currentWikiData.length" class="recommend-container">

package/src/components/BlogImagePreview.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ElImageViewer } from 'element-plus'
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
+import ImageViewer from './ImageViewer.vue'
 
 const show = ref(false)
 const previewImageInfo = reactive<{ url: string; list: string[]; idx: number }>(
@@ -15,7 +15,7 @@ function previewImage(e: Event) {
   const currentTarget = e.currentTarget as HTMLElement
   if (target.tagName.toLowerCase() === 'img') {
     const imgs = currentTarget.querySelectorAll<HTMLImageElement>(
-      '.content-container .main img'
+      '.content-container .main img,.VPPage img'
     )
     const idx = Array.from(imgs).findIndex(el => el === target)
     const urls = Array.from(imgs).map(el => el.src)
@@ -45,7 +45,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <ElImageViewer
+  <ImageViewer
     v-if="show" :infinite="false" hide-on-click-modal teleported :url-list="previewImageInfo.list"
     :initial-index="previewImageInfo.idx" @close="show = false"
   />

package/src/components/BlogList.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { computed, nextTick, watch } from 'vue'
-import { ElPagination } from 'element-plus'
 import { useData, useRoute, useRouter } from 'vitepress'
 import {
   useActiveTag,
   useArticles,
   useCurrentPageNum,
   useGlobalAuthor,
-  useHomeConfig
+  useHomeConfig,
 } from '../composables/config/blog'
 import type { Theme } from '../composables/config'
 import BlogItem from './BlogItem.vue'
+import Pagination from './Pagination.vue'
 
 const { frontmatter } = useData<Theme.Config>()
 const globalAuthor = useGlobalAuthor()
@@ -111,11 +111,10 @@ router.onAfterRouteChange = () => {
   <!-- 解决element-ui bug -->
   <ClientOnly>
     <div class="el-pagination-wrapper">
-      <ElPagination
+      <Pagination
         v-if="wikiList.length >= pageSize"
         small
         background
-        :default-current-page="1"
         :current-page="currentPage"
         :page-size="pageSize"
         :total="filterData.length"
@@ -128,17 +127,17 @@ router.onAfterRouteChange = () => {
 
 <style lang="scss" scoped>
 .el-pagination-wrapper {
-  :deep(.el-pagination li.is-active.number) {
+  :deep(.sugar-pagination li.is-active.number) {
     background-color: var(--vp-c-brand-2);
   }
-  :deep(.el-pagination button:hover) {
+  :deep(.sugar-pagination button:hover) {
     color: var(--vp-c-brand-2);
   }
 
-  :deep(.el-pager li:not(.is-active):hover) {
+  :deep(.sugar-pager li:not(.is-active):hover) {
     color: var(--vp-c-brand-2);
   }
-  :deep(.el-input__wrapper.is-focus) {
+  :deep(.sugar-input__wrapper:focus-within) {
     box-shadow: 0 0 0 1px var(--vp-c-brand-2) inset;
   }
 }

package/src/components/BlogRecommendArticle.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter, withBase } from 'vitepress'
-import { ElButton } from 'element-plus'
 import { wrapperCleanUrls } from '../utils/client'
 import { useArticles, useCleanUrls, useFormatShowDate, useRecommendConfig, useShowRecommend } from '../composables/config/blog'
 import { recommendSVG } from '../constants/svg'
 import type { Theme } from '../composables/config/index'
+import Button from './Button.vue'
 
 const formatShowDate = useFormatShowDate()
 
@@ -162,9 +162,9 @@ function handleLinkClick(link: string) {
     <!-- 头部 -->
     <div class="card-header">
       <span v-if="title" class="title" v-html="title" />
-      <ElButton v-if="showChangeBtn" size="small" type="primary" text @click="changePage">
+      <Button v-if="showChangeBtn" size="small" type="primary" text @click="changePage">
         {{ nextText }}
-      </ElButton>
+      </Button>
     </div>
     <!-- 文章列表 -->
     <ol

package/src/components/Button.vue

@@ -0,0 +1,165 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'default',
+    validator: (val: string) => ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(val),
+  },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (val: string) => ['large', 'default', 'small'].includes(val),
+  },
+  text: {
+    type: Boolean,
+    default: false,
+  },
+  round: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['click'])
+
+function handleClick(evt: MouseEvent) {
+  if (props.disabled)
+    return
+  emit('click', evt)
+}
+
+const classes = computed(() => {
+  return [
+    'sugar-button',
+    `sugar-button--${props.type}`,
+    `sugar-button--${props.size}`,
+    {
+      'is-text': props.text,
+      'is-round': props.round,
+      'is-disabled': props.disabled,
+    },
+  ]
+})
+</script>
+
+<template>
+  <button :class="classes" :disabled="disabled" @click="handleClick">
+    <slot />
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.sugar-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  height: 32px;
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--vp-c-text-1);
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  transition: .1s;
+  font-weight: 500;
+  user-select: none;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  background-color: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  padding: 8px 15px;
+  font-size: 14px;
+
+  &:hover {
+    color: var(--vp-c-brand-1);
+    border-color: var(--vp-c-brand-2);
+    background-color: var(--vp-c-bg-alt);
+  }
+
+  &:active {
+    color: var(--vp-c-brand-3);
+    border-color: var(--vp-c-brand-3);
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Types */
+  &--primary {
+    color: #fff;
+    background-color: var(--vp-c-brand-1);
+    border-color: var(--vp-c-brand-1);
+
+    &:hover {
+      background-color: var(--vp-c-brand-2);
+      border-color: var(--vp-c-brand-2);
+      color: #fff;
+    }
+
+    &:active {
+      background-color: var(--vp-c-brand-3);
+      border-color: var(--vp-c-brand-3);
+      color: #fff;
+    }
+
+    &.is-text {
+      color: var(--vp-c-brand-1);
+      background-color: transparent;
+      border-color: transparent;
+
+      &:hover {
+        background-color: var(--vp-c-bg-alt);
+        color: var(--vp-c-brand-2);
+      }
+
+      &:active {
+        color: var(--vp-c-brand-3);
+      }
+    }
+  }
+
+  &--danger {
+    color: #fff;
+    background-color: var(--vp-c-danger-2);
+    border-color: var(--vp-c-danger-2);
+
+    &:hover {
+      background-color: var(--vp-c-danger-3);
+      border-color: var(--vp-c-danger-3);
+      color: #fff;
+    }
+
+    &:active {
+      background-color: var(--vp-c-danger-3);
+      border-color: var(--vp-c-danger-3);
+      color: #fff;
+    }
+  }
+
+  // 其它有需要再引入
+  /* Sizes */
+  &--small {
+    height: 24px;
+    padding: 5px 11px;
+    font-size: 12px;
+    border-radius: 3px;
+  }
+
+  &--large {
+    height: 40px;
+    padding: 12px 19px;
+    font-size: 16px;
+    border-radius: 4px;
+  }
+}
+</style>