@sugarat/theme 0.5.11 → 0.5.12-beta.1

package/src/components/BlogAuthor.vue

@@ -36,22 +36,20 @@ useHoverSpin(imgRef, home?.value?.hoverSpin)
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .blog-author {
   margin-bottom: 20px;
-
-  img {
-    display: block;
-    margin: 10px auto;
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    background-color: rgba(var(--bg-gradient-home));
-    cursor: pointer;
-  }
-
-  p {
-    text-align: center;
-  }
+}
+.blog-author img {
+  display: block;
+  margin: 10px auto;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: rgba(var(--bg-gradient-home));
+  cursor: pointer;
+}
+.blog-author p {
+  text-align: center;
 }
 </style>

package/src/components/BlogBackToTop.vue

@@ -40,7 +40,7 @@ const iconSVGStr = computed(() => backToTopConfig?.value?.icon)
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .back-to-top {
   position: fixed;
   width: v-bind(docWidth);
@@ -52,29 +52,26 @@ const iconSVGStr = computed(() => backToTopConfig?.value?.icon)
   display: flex;
   justify-content: right;
   z-index: 200;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  .icon-wrapper {
-    cursor: pointer;
-    border-radius: 50%;
-    position: relative;
-    right: -80px;
-    background-color: var(--vp-c-bg);
-    box-shadow: var(--box-shadow);
-    padding: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--vp-c-brand-soft);
-    color: var(--vp-c-brand-1);
-
-    &:hover {
-      box-shadow: var(--box-shadow-hover);
-    }
-  }
+}
+.back-to-top:hover {
+  opacity: 1;
+}
+.back-to-top .icon-wrapper {
+  cursor: pointer;
+  border-radius: 50%;
+  position: relative;
+  right: -80px;
+  background-color: var(--vp-c-bg);
+  box-shadow: var(--box-shadow);
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+.back-to-top .icon-wrapper:hover {
+  box-shadow: var(--box-shadow-hover);
 }
 
 @media screen and (max-width: 1200px) {

package/src/components/BlogButtonAfterArticle.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { ElButton } from 'element-plus'
 import { computed, ref, watch } from 'vue'
 import { useButtonAfterConfig } from '../composables/config/blog'
 import { aliPaySVG, weChatPaySVG } from '../constants/svg'
+import Button from './Button.vue'
 
 const buttonAfterArticleConfig = useButtonAfterConfig()
 
@@ -36,27 +36,27 @@ function toggleContent() {
 
 <template>
   <div v-if="buttonAfterArticleConfig" class="appreciation-container">
-    <ElButton :size="buttonAfterArticleConfig.size || 'default'" class="content-button" :type="showContent ? 'danger' : 'primary'" @click="toggleContent">
+    <Button :size="buttonAfterArticleConfig.size || 'default'" class="content-button" :type="showContent ? 'danger' : 'primary'" @click="toggleContent">
       <span class="content-icon" v-html="svg" />
       {{ showContent ? buttonAfterArticleConfig.closeTitle : buttonAfterArticleConfig.openTitle }}
-    </ElButton>
+    </Button>
     <transition name="content">
       <div v-if="showContent" class="content-container" v-html="buttonAfterArticleConfig.content" />
     </transition>
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
+@charset "UTF-8";
 .appreciation-container {
   text-align: center;
   padding: 20px;
   font-size: 14px;
   color: #606266;
-
-  :deep(.el-button.el-button--primary){
-    background-color: var(--vp-c-brand-2);
-    border-color: var(--vp-c-brand-2);
-  }
+}
+.appreciation-container :deep(.sugar-button.sugar-button--primary) {
+  background-color: var(--vp-c-brand-2);
+  border-color: var(--vp-c-brand-2);
 }
 
 .content-container {
@@ -65,9 +65,9 @@ function toggleContent() {
   justify-content: center;
   align-items: center;
   margin-top: 20px;
-  :deep(img){
-    height: 260px;
-  }
+}
+.content-container :deep(img) {
+  height: 260px;
 }
 
 .content-icon {
@@ -94,18 +94,15 @@ function toggleContent() {
   from {
     opacity: 0;
   }
-
   to {
     opacity: 1;
   }
 }
-
 /* 淡出 */
 @keyframes fadeOut {
   from {
     opacity: 1;
   }
-
   to {
     opacity: 0;
   }

package/src/components/BlogCommentWrapper.vue

@@ -52,7 +52,7 @@ const labelText = computed(() => {
   </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .comment-btn-wrapper {
   position: fixed;
   width: v-bind(docWidth);
@@ -64,49 +64,42 @@ const labelText = computed(() => {
   display: flex;
   justify-content: right;
   z-index: 200;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  .icon-wrapper,
-  .icon-wrapper-text {
-    cursor: pointer;
-    border-radius: 50%;
-    position: relative;
-    right: -80px;
-    background-color: var(--vp-c-bg);
-    box-shadow: var(--box-shadow);
-    padding: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--vp-c-brand-soft);
-    color: var(--vp-c-brand-1);
-
-    &:hover {
-      box-shadow: var(--box-shadow-hover);
-    }
-  }
-
-  .icon-wrapper-text {
-    border-radius: 2px;
-    padding: 2px 6px;
-
-    span.text {
-      font-size: 12px;
-      margin-left: 4px;
-    }
-  }
+}
+.comment-btn-wrapper:hover {
+  opacity: 1;
+}
+.comment-btn-wrapper .icon-wrapper,
+.comment-btn-wrapper .icon-wrapper-text {
+  cursor: pointer;
+  border-radius: 50%;
+  position: relative;
+  right: -80px;
+  background-color: var(--vp-c-bg);
+  box-shadow: var(--box-shadow);
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+.comment-btn-wrapper .icon-wrapper:hover,
+.comment-btn-wrapper .icon-wrapper-text:hover {
+  box-shadow: var(--box-shadow-hover);
+}
+.comment-btn-wrapper .icon-wrapper-text {
+  border-radius: 2px;
+  padding: 2px 6px;
+}
+.comment-btn-wrapper .icon-wrapper-text span.text {
+  font-size: 12px;
+  margin-left: 4px;
 }
 
 @media screen and (max-width: 1200px) {
-  .comment-btn-wrapper {
-
-    .icon-wrapper,
-    .icon-wrapper-text {
-      position: static;
-    }
+  .comment-btn-wrapper .icon-wrapper,
+  .comment-btn-wrapper .icon-wrapper-text {
+    position: static;
   }
 }
 </style>

package/src/components/BlogDocCover.vue

@@ -19,7 +19,7 @@ const hiddenCover = computed(
   <img v-if="cover && !hiddenCover" class="blog-doc-cover" :src="realCover">
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 img.blog-doc-cover.blog-doc-cover.blog-doc-cover {
   width: 100%;
   object-fit: cover;

package/src/components/BlogFooter.vue

@@ -115,20 +115,19 @@ const renderData = computed(() => {
   </footer>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 footer.blog-footer {
   text-align: center;
   position: relative;
   border-top: 1px solid var(--vp-c-gutter);
   padding: 20px 12px;
   background-color: var(--vp-c-bg);
-
-  p {
-    line-height: 24px;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--vp-c-text-2);
-  }
+}
+footer.blog-footer p {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
 }
 
 .footer-item-list {
@@ -143,33 +142,28 @@ footer.blog-footer {
     align-items: center;
   }
 }
-
 .footer-item {
   display: flex;
   align-items: center;
   margin: 0 8px;
-
-  i {
-    margin-right: 4px;
-    font-style: normal;
-  }
-
-  i :deep(svg) {
-    fill: var(--vp-c-text-2);
-    width: 16px;
-    height: 16px;
-  }
-
-  i :deep(img) {
-    width: 16px;
-    height: 16px;
-  }
-
-  a:hover {
-    color: var(--vp-c-brand-1);
-    text-decoration: underline;
-    text-decoration-color: var(--vp-c-brand-1);
-    text-decoration-style: dashed;
-  }
+}
+.footer-item i {
+  margin-right: 4px;
+  font-style: normal;
+}
+.footer-item i :deep(svg) {
+  fill: var(--vp-c-text-2);
+  width: 16px;
+  height: 16px;
+}
+.footer-item i :deep(img) {
+  width: 16px;
+  height: 16px;
+}
+.footer-item a:hover {
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+  text-decoration-color: var(--vp-c-brand-1);
+  text-decoration-style: dashed;
 }
 </style>

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>
@@ -122,7 +151,7 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .card {
   position: relative;
   margin: 0 auto 10px;
@@ -135,10 +164,9 @@ onUnmounted(() => {
   transition: all 0.3s;
   background-color: rgba(var(--bg-gradient));
   display: flex;
-
-  &:hover {
-    box-shadow: var(--box-shadow-hover);
-  }
+}
+.card:hover {
+  box-shadow: var(--box-shadow-hover);
 }
 
 .card-header {
@@ -146,12 +174,11 @@ onUnmounted(() => {
   width: 100%;
   justify-content: space-between;
   align-items: center;
-
-  .title {
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-  }
+}
+.card-header .title {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
 }
 
 .friend-wrapper {
@@ -170,45 +197,36 @@ onUnmounted(() => {
   margin: 0;
   padding: 10px 10px 0 0px;
   width: 100%;
-
   position: relative;
   width: 100%;
-
-  li {
-    box-sizing: border-box;
-    padding: 0 5px;
-    height: 76px;
-    .el-avatar {
-      min-width: 50px;
-    }
-
-    a {
-      display: flex;
-      align-items: center;
-    }
-
-    div {
-      padding-left: 10px;
-    }
-
-    .info-wrapper {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    .nickname {
-      font-size: 16px;
-      font-weight: 450;
-    }
-
-    .des {
-      color: var(--vp-c-text-2);
-      font-size: 14px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
+}
+.friend-list li {
+  box-sizing: border-box;
+  padding: 0 5px;
+  height: 76px;
+  cursor: pointer;
+}
+.friend-list li a {
+  display: flex;
+  align-items: center;
+}
+.friend-list li div {
+  padding-left: 10px;
+}
+.friend-list li .info-wrapper {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.friend-list li .nickname {
+  font-size: 16px;
+  font-weight: 450;
+}
+.friend-list li .des {
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 </style>

package/src/components/BlogHomeBanner.vue

@@ -85,28 +85,26 @@ async function changeSlogan() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 h1 {
   text-align: center;
-  .name {
-    transition: all 0.25s ease-in-out 0.04s;
-    transform: translateY(0px);
-    opacity: 1;
-    font-weight: bold;
-    margin: 0 auto;
-    font-size: 36px;
-  }
-
-  .motto {
-    position: relative;
-    bottom: 0px;
-    font-size: 14px;
-    margin-left: 10px;
-
-    &::before {
-      content: '- ';
-    }
-  }
+}
+h1 .name {
+  transition: all 0.25s ease-in-out 0.04s;
+  transform: translateY(0px);
+  opacity: 1;
+  font-weight: bold;
+  margin: 0 auto;
+  font-size: 36px;
+}
+h1 .motto {
+  position: relative;
+  bottom: 0px;
+  font-size: 14px;
+  margin-left: 10px;
+}
+h1 .motto::before {
+  content: "- ";
 }
 
 @media screen and (max-width: 500px) {
@@ -114,28 +112,24 @@ h1 {
     display: none;
   }
 }
-
 @keyframes fade-in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 .inspiring-wrapper {
   margin: 16px 0;
   height: 32px;
   width: auto;
-
-  h2 {
-    animation: fade-in 0.5s ease-in-out;
-    cursor: pointer;
-    text-align: center;
-    font-size: 20px;
-    line-height: 1.6;
-  }
+}
+.inspiring-wrapper h2 {
+  animation: fade-in 0.5s ease-in-out;
+  cursor: pointer;
+  text-align: center;
+  font-size: 20px;
+  line-height: 1.6;
 }
 </style>