@sugarat/theme 0.5.11 → 0.5.12-beta.1

package/src/components/BlogHomeHeaderAvatar.vue

@@ -25,33 +25,26 @@ useHoverSpin(imgRef, home?.value?.hoverSpin)
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .blog-home-header-avatar {
-    padding-top: 40px;
-    display: flex;
-    align-items: center;
-
-    img {
-        display: block;
-        margin: 0 auto;
-        width: 130px;
-        height: 130px;
-        border-radius: 50%;
-        background-color: transparent;
-        border: 5px solid rgba(var(--bg-gradient-home));
-        box-sizing: border-box;
-        cursor: pointer;
-    }
-
-    // img:hover {
-    //     transform: rotate(666turn);
-    //     transition-duration: 59s;
-    //     transition-timing-function: cubic-bezier(.34, 0, .84, 1)
-    // }
+  padding-top: 40px;
+  display: flex;
+  align-items: center;
+}
+.blog-home-header-avatar img {
+  display: block;
+  margin: 0 auto;
+  width: 130px;
+  height: 130px;
+  border-radius: 50%;
+  background-color: transparent;
+  border: 5px solid rgba(var(--bg-gradient-home));
+  box-sizing: border-box;
+  cursor: pointer;
 }
 
 @media screen and (min-width: 768px) {
-  .blog-home-header-avatar{
+  .blog-home-header-avatar {
     display: none;
   }
 }

package/src/components/BlogHomeInfo.vue

@@ -14,16 +14,14 @@ import BlogFriendLink from './BlogFriendLink.vue'
     <BlogHotArticle />
 
     <!-- 友链 -->
-    <ClientOnly>
-      <BlogFriendLink />
-    </ClientOnly>
+    <BlogFriendLink />
 
     <!-- 标签 -->
     <BlogHomeTags />
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .blog-info {
   display: flex;
   flex-direction: column;

package/src/components/BlogHomeOverview.vue

@@ -60,7 +60,7 @@ const titles = computed(() => (frontmatter.value?.blog?.analysis?.articles?.titl
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .card {
   position: relative;
   margin: 0 auto 10px;
@@ -74,10 +74,9 @@ const titles = computed(() => (frontmatter.value?.blog?.analysis?.articles?.titl
   background-color: rgba(var(--bg-gradient));
   display: flex;
   flex-direction: column;
-
-  &:hover {
-    box-shadow: var(--box-shadow-hover);
-  }
+}
+.card:hover {
+  box-shadow: var(--box-shadow-hover);
 }
 
 .overview-data {
@@ -101,15 +100,13 @@ const titles = computed(() => (frontmatter.value?.blog?.analysis?.articles?.titl
   align-items: center;
   position: relative;
   margin: 0 10px;
-
-  .count {
-    font-size: 18px;
-  }
-
-  .label {
-    margin-top: 6px;
-    font-size: 12px;
-    color: var(--description-font-color);
-  }
+}
+.overview-item .count {
+  font-size: 18px;
+}
+.overview-item .label {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--description-font-color);
 }
 </style>

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,28 +82,28 @@ 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>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .card {
   position: relative;
   margin: 0 auto 10px;
@@ -122,10 +116,9 @@ watch(
   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 {
@@ -133,12 +126,11 @@ watch(
   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;
 }
 
 .tags {
@@ -149,11 +141,10 @@ watch(
   display: flex;
   flex-wrap: wrap;
   margin-top: 10px;
-
-  li {
-    margin-right: 10px;
-    margin-bottom: 10px;
-    cursor: pointer;
-  }
+}
+.tag-list li {
+  margin-right: 10px;
+  margin-bottom: 10px;
+  cursor: pointer;
 }
 </style>

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">
@@ -98,7 +98,7 @@ const showChangeBtn = computed(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .card {
   position: relative;
   margin: 0 auto 10px;
@@ -111,10 +111,9 @@ const showChangeBtn = computed(() => {
   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 {
@@ -122,12 +121,11 @@ const showChangeBtn = computed(() => {
   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;
 }
 
 .recommend {
@@ -141,72 +139,63 @@ const showChangeBtn = computed(() => {
   margin: 0;
   padding: 0 10px 0 0px;
   width: 100%;
-
-  li {
-    display: flex;
-
-    &:nth-child(1) .num {
-      background-color: #f56c6c;
-      color: #fff;
-      font-size: 12px;
-      border-radius: 8px 0 8px 0;
-    }
-
-    &:nth-child(2) .num {
-      background-color: #67c23a;
-      color: #fff;
-      font-size: 12px;
-      border-radius: 0 8px 0 8px;
-    }
-
-    &:nth-child(3) .num {
-      background-color: var(--vp-c-brand-2);
-      color: #fff;
-      font-size: 12px;
-      border-radius: 6px;
-    }
-
-    .num {
-      display: block;
-      font-size: 14px;
-      color: var(--description-font-color);
-      font-weight: 600;
-      margin: 6px 12px 10px 0;
-      width: 18px;
-      height: 18px;
-      line-height: 18px;
-      text-align: center;
-    }
-
-    .des {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .title {
-      font-size: 14px;
-      color: var(--vp-c-text-1);
-      font-weight: 500;
-      position: relative;
-      cursor: pointer;
-    }
-
-    .title:hover::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      right: 0;
-      height: 0;
-      bottom: -3px;
-      border-bottom: 1px solid #b1b3b8;
-    }
-
-    .suffix {
-      font-size: 12px;
-      color: var(--vp-c-text-2);
-    }
-  }
+}
+.recommend-container li {
+  display: flex;
+}
+.recommend-container li:nth-child(1) .num {
+  background-color: #f56c6c;
+  color: #fff;
+  font-size: 12px;
+  border-radius: 8px 0 8px 0;
+}
+.recommend-container li:nth-child(2) .num {
+  background-color: #67c23a;
+  color: #fff;
+  font-size: 12px;
+  border-radius: 0 8px 0 8px;
+}
+.recommend-container li:nth-child(3) .num {
+  background-color: var(--vp-c-brand-2);
+  color: #fff;
+  font-size: 12px;
+  border-radius: 6px;
+}
+.recommend-container li .num {
+  display: block;
+  font-size: 14px;
+  color: var(--description-font-color);
+  font-weight: 600;
+  margin: 6px 12px 10px 0;
+  width: 18px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+}
+.recommend-container li .des {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.recommend-container li .title {
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+  font-weight: 500;
+  position: relative;
+  cursor: pointer;
+}
+.recommend-container li .title:hover::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0;
+  bottom: -3px;
+  border-bottom: 1px solid #b1b3b8;
+}
+.recommend-container li .suffix {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
 }
 
 .empty-text {

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/BlogItem.vue

@@ -111,7 +111,7 @@ const resultCover = computed(() => {
   </a>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .blog-item .pin {
   position: absolute;
   overflow: hidden;
@@ -127,13 +127,11 @@ const resultCover = computed(() => {
 }
 
 .blog-item .pin::before {
-  content: '';
+  content: "";
   position: absolute;
   width: 120%;
   height: 30px;
-  background-image: linear-gradient(45deg,
-      var(--blog-theme-color),
-      var(--blog-theme-color));
+  background-image: linear-gradient(45deg, var(--blog-theme-color), var(--blog-theme-color));
   transform: rotate(-45deg) translateY(-20px);
   display: flex;
   align-items: center;
@@ -155,10 +153,9 @@ const resultCover = computed(() => {
   cursor: pointer;
   display: flex;
   flex-direction: column;
-
-  &:hover {
-    box-shadow: var(--box-shadow-hover);
-  }
+}
+.blog-item:hover {
+  box-shadow: var(--box-shadow-hover);
 }
 
 .info-container {
@@ -181,7 +178,6 @@ const resultCover = computed(() => {
   color: var(--description-font-color);
   font-size: 14px;
   margin-bottom: 8px;
-  // 多行换行
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -197,17 +193,14 @@ const resultCover = computed(() => {
   font-size: 13px;
   color: var(--badge-font-color);
   margin-top: 8px;
-
-  .split:not(:last-child) {
-    &::after {
-      content: '';
-      display: inline-block;
-      width: 1px;
-      height: 8px;
-      margin: 0 10px;
-      background-color: #4e5969;
-    }
-  }
+}
+.badge-list .split:not(:last-child)::after {
+  content: "";
+  display: inline-block;
+  width: 1px;
+  height: 8px;
+  margin: 0 10px;
+  background-color: #4e5969;
 }
 
 .cover-img {
@@ -235,11 +228,9 @@ const resultCover = computed(() => {
     background-size: contain;
     background-position: center;
   }
-
   .pc-visible {
     display: none;
   }
-
   .mobile-visible {
     display: block;
   }

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"
@@ -126,20 +125,17 @@ router.onAfterRouteChange = () => {
   </ClientOnly>
 </template>
 
-<style lang="scss" scoped>
-.el-pagination-wrapper {
-  :deep(.el-pagination li.is-active.number) {
-    background-color: var(--vp-c-brand-2);
-  }
-  :deep(.el-pagination button:hover) {
-    color: var(--vp-c-brand-2);
-  }
-
-  :deep(.el-pager li:not(.is-active):hover) {
-    color: var(--vp-c-brand-2);
-  }
-  :deep(.el-input__wrapper.is-focus) {
-    box-shadow: 0 0 0 1px var(--vp-c-brand-2) inset;
-  }
+<style scoped>
+.el-pagination-wrapper :deep(.sugar-pagination li.is-active.number) {
+  background-color: var(--vp-c-brand-2);
+}
+.el-pagination-wrapper :deep(.sugar-pagination button:hover) {
+  color: var(--vp-c-brand-2);
+}
+.el-pagination-wrapper :deep(.sugar-pager li:not(.is-active):hover) {
+  color: var(--vp-c-brand-2);
+}
+.el-pagination-wrapper :deep(.sugar-input__wrapper:focus-within) {
+  box-shadow: 0 0 0 1px var(--vp-c-brand-2) inset;
 }
 </style>