@sugarat/theme 0.5.11 → 0.5.12-beta.0

package/src/components/Pagination.vue

@@ -0,0 +1,397 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  total: {
+    type: Number,
+    default: 0,
+  },
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  layout: {
+    type: String,
+    default: 'prev, pager, next, jumper',
+  },
+  background: {
+    type: Boolean,
+    default: false,
+  },
+  small: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:current-page', 'currentChange'])
+
+const innerCurrentPage = ref(props.currentPage)
+
+watch(() => props.currentPage, (val) => {
+  innerCurrentPage.value = val
+})
+
+const pageCount = computed(() => {
+  const count = Math.ceil(props.total / props.pageSize)
+  return count > 0 ? count : 1
+})
+
+const pagers = computed(() => {
+  const count = pageCount.value
+  const current = innerCurrentPage.value
+  const pagerCount = 7 // Default Element Plus pager count
+
+  const showPrevMore = false
+  const showNextMore = false
+
+  if (count <= pagerCount) {
+    const array = []
+    for (let i = 1; i <= count; i++) {
+      array.push(i)
+    }
+    return array
+  }
+
+  // Logic for large number of pages
+  // Simplified logic for now, Element Plus logic is complex
+  // If we want exact replica, we need more logic.
+  // For now, let's implement a simpler version that shows current +/- 2 and first/last
+
+  const array: (number | string)[] = []
+
+  if (current <= 4) {
+    for (let i = 1; i <= 6; i++) {
+      array.push(i)
+    }
+    array.push('more-next') // ...
+    array.push(count)
+  }
+  else if (current >= count - 3) {
+    array.push(1)
+    array.push('more-prev') // ...
+    for (let i = count - 5; i <= count; i++) {
+      array.push(i)
+    }
+  }
+  else {
+    array.push(1)
+    array.push('more-prev') // ...
+    for (let i = current - 2; i <= current + 2; i++) {
+      array.push(i)
+    }
+    array.push('more-next') // ...
+    array.push(count)
+  }
+
+  return array
+})
+
+function handleCurrentChange(val: number) {
+  if (val < 1)
+    val = 1
+  if (val > pageCount.value)
+    val = pageCount.value
+
+  if (innerCurrentPage.value !== val) {
+    innerCurrentPage.value = val
+    emit('update:current-page', val)
+    emit('currentChange', val)
+  }
+}
+
+function prev() {
+  handleCurrentChange(innerCurrentPage.value - 1)
+}
+
+function next() {
+  handleCurrentChange(innerCurrentPage.value + 1)
+}
+
+function onPagerClick(page: number | string) {
+  if (typeof page === 'number') {
+    handleCurrentChange(page)
+  }
+  else {
+    const pagerCountOffset = 5
+    let newPage = innerCurrentPage.value
+    if (page === 'more-prev') {
+      newPage -= pagerCountOffset
+    }
+    else if (page === 'more-next') {
+      newPage += pagerCountOffset
+    }
+    handleCurrentChange(newPage)
+  }
+}
+
+// Jumper
+function handleJumperChange(evt: Event) {
+  const target = evt.target as HTMLInputElement
+  const val = parseInt(target.value)
+  if (!isNaN(val)) {
+    handleCurrentChange(val)
+    target.value = '' // Clear or keep? Element Plus keeps it until blur/enter
+  }
+}
+</script>
+
+<template>
+  <div class="sugar-pagination" :class="{ 'is-background': background, 'sugar-pagination--small': small }">
+    <!-- Prev -->
+    <button
+      type="button"
+      class="btn-prev"
+      :disabled="innerCurrentPage <= 1"
+      @click="prev"
+    >
+      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z" /></svg>
+    </button>
+
+    <!-- Pager -->
+    <ul class="sugar-pager">
+      <li
+        v-for="(page, index) in pagers"
+        :key="index"
+        :class="{ 'is-active': innerCurrentPage === page, 'more': typeof page === 'string' }"
+        class="number"
+        @click="onPagerClick(page)"
+      >
+        <template v-if="typeof page === 'number'">
+          {{ page }}
+        </template>
+        <template v-else>
+          <svg v-if="page === 'more-prev'" class="icon-more" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill="currentColor" d="M529.408 149.376a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L259.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L197.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224zm256 0a29.12 29.12 0 0 1 41.728 0 30.592 30.592 0 0 1 0 42.688L515.264 511.936l311.872 319.936a30.592 30.592 0 0 1-.512 43.264 29.12 29.12 0 0 1-41.216-.512L453.76 534.272a32 32 0 0 1 0-44.672l331.648-340.224z" /></svg>
+          <svg v-else-if="page === 'more-next'" class="icon-more" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1em" height="1em"><path fill="currentColor" d="M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688m-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z" /></svg>
+          <svg class="icon-more-text" viewBox="0 0 1024 1024" width="1em" height="1em"><path fill="currentColor" d="M176 416a112 112 0 1 1 0 224 112 112 0 0 1 0-224m336 0a112 112 0 1 1 0 224 112 112 0 0 1 0-224m336 0a112 112 0 1 1 0 224 112 112 0 0 1 0-224" /></svg>
+        </template>
+      </li>
+    </ul>
+
+    <!-- Next -->
+    <button
+      type="button"
+      class="btn-next"
+      :disabled="innerCurrentPage >= pageCount"
+      @click="next"
+    >
+      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z" /></svg>
+    </button>
+
+    <!-- Jumper -->
+    <span v-if="layout.includes('jumper')" class="sugar-pagination__jump">
+      <span style="margin-right: 4px;white-space: nowrap;">Go to</span>
+      <div class="sugar-input sugar-pagination__editor is-in-pagination">
+        <div class="sugar-input__wrapper">
+          <input
+            class="sugar-input__inner"
+            type="number"
+            :min="1"
+            :max="pageCount"
+            :value="innerCurrentPage"
+            @change="handleJumperChange"
+          >
+        </div>
+      </div>
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.sugar-pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 5px;
+  color: var(--vp-c-text-1);
+  font-size: 12px;
+
+  &--small {
+    .btn-prev, .btn-next, .sugar-pager li {
+        height: 24px;
+        line-height: 24px;
+        min-width: 24px;
+        font-size: 12px;
+    }
+  }
+
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 0 6px;
+    min-width: 24px;
+    height: 24px;
+    line-height: 24px;
+    color: var(--vp-c-text-1);
+
+    &:disabled {
+      color: var(--vp-c-text-3);
+      cursor: not-allowed;
+    }
+
+    &:hover:not(:disabled) {
+        color: var(--vp-c-brand-2);
+    }
+  }
+
+  .sugar-pager {
+    user-select: none;
+    list-style: none;
+    display: flex;
+    padding: 0;
+    margin: 0;
+
+    li {
+      padding: 0 4px;
+      background: transparent;
+      vertical-align: top;
+      display: inline-block;
+      font-size: 12px;
+      min-width: 24px;
+      height: 24px;
+      line-height: 24px;
+      cursor: pointer;
+      box-sizing: border-box;
+      text-align: center;
+      margin: 0 4px;
+      border-radius: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &.is-active {
+        color: var(--vp-c-brand-2);
+        cursor: default;
+        font-weight: normal;
+      }
+
+      &:hover:not(.is-active):not(.more) {
+        color: var(--vp-c-brand-2);
+      }
+
+      &.more {
+        cursor: pointer;
+
+        .icon-more {
+          display: none;
+        }
+
+        .icon-more-text {
+          display: block;
+        }
+
+        &:hover {
+          color: var(--vp-c-brand-2);
+
+          .icon-more {
+            display: inline-block;
+          }
+
+          .icon-more-text {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  &.is-background {
+    .btn-prev, .btn-next, .sugar-pager li {
+        background-color: var(--vp-c-bg-alt);
+        color: var(--vp-c-text-2);
+        margin: 0 3px;
+        border-radius: 2px;
+        font-weight: normal;
+    }
+
+    .btn-prev:disabled, .btn-next:disabled {
+        color: var(--vp-c-text-3);
+        background-color: var(--vp-c-bg-alt);
+    }
+
+    .sugar-pager li:not(.disabled).is-active {
+        background-color: var(--vp-c-brand-2);
+        color: #fff;
+    }
+
+    .sugar-pager li:not(.disabled):hover:not(.is-active):not(.more) {
+        color: var(--vp-c-brand-2);
+    }
+  }
+
+  &__jump {
+    display: flex;
+    align-items: center;
+    margin-left: 24px;
+    font-weight: normal;
+    color: var(--vp-c-text-2);
+  }
+
+  &__editor {
+      margin: 0 8px;
+      width: 50px;
+  }
+}
+
+.sugar-input {
+    display: inline-flex;
+    position: relative;
+    font-size: 12px;
+    line-height: 24px;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.sugar-input__wrapper {
+    display: inline-flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 1px 11px;
+    background-color: var(--vp-c-bg);
+    background-image: none;
+    border-radius: 4px;
+    transition: box-shadow .2s cubic-bezier(.645,.045,.355,1);
+
+    &:focus-within {
+         box-shadow: 0 0 0 1px var(--vp-c-brand-2) inset;
+    }
+}
+
+.sugar-input__inner {
+    width: 100%;
+    flex-grow: 1;
+    -webkit-appearance: none;
+    color: var(--vp-c-text-1);
+    font-size: inherit;
+    height: 24px;
+    line-height: 24px;
+    padding: 0;
+    outline: none;
+    border: none;
+    background: none;
+    box-sizing: border-box;
+    text-align: center;
+
+    /* Chrome, Safari, Edge, Opera */
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    /* Firefox */
+    &[type=number] {
+      -moz-appearance: textfield;
+    }
+}
+</style>

package/src/components/Tag.vue

@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+defineProps({
+  type: { type: String, default: 'primary' },
+  closable: { type: Boolean, default: false }
+})
+
+defineEmits(['close', 'click'])
+</script>
+
+<template>
+  <span class="blog-tag" :class="[`blog-tag--${type || 'primary'}`]" @click="$emit('click', $event)">
+    <slot />
+    <span v-if="closable" class="close" @click.stop="$emit('close', $event)">
+      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
+        <path
+          fill="currentColor"
+          d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
+        />
+      </svg>
+    </span>
+  </span>
+</template>
+
+<style lang="scss">
+.blog-tag {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+  padding: 0 9px;
+  font-size: 12px;
+  line-height: 1;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  vertical-align: middle;
+  color: #fff;
+
+  >.close {
+    margin-left: 6px;
+    font-size: 12px;
+    cursor: pointer;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    transition: all 0.3s;
+  }
+}
+
+/* Primary */
+.blog-tag--primary {
+  background-color: #409eff;
+  border-color: #409eff;
+
+  .close:hover {
+    background-color: #79bbff;
+  }
+}
+
+/* Success */
+.blog-tag--success {
+  background-color: #67c23a;
+  border-color: #67c23a;
+
+  .close:hover {
+    background-color: #95d475;
+  }
+}
+
+/* Info */
+.blog-tag--info {
+  background-color: #909399;
+  border-color: #909399;
+
+  .close:hover {
+    background-color: #b1b3b8;
+  }
+}
+
+/* Warning */
+.blog-tag--warning {
+  background-color: #e6a23c;
+  border-color: #e6a23c;
+
+  .close:hover {
+    background-color: #eebe77;
+  }
+}
+
+/* Danger */
+.blog-tag--danger {
+  background-color: #f56c6c;
+  border-color: #f56c6c;
+
+  .close:hover {
+    background-color: #f89898;
+  }
+}
+</style>
+
+<style lang="scss">
+html.dark {
+  .blog-tag--primary {
+    background-color: #18222c;
+    border-color: #1d3043;
+    color: #409eff;
+
+    .close:hover {
+      background-color: #409eff;
+      color: #fff;
+    }
+  }
+
+  .blog-tag--success {
+    background-color: #1c2518;
+    border-color: #25371c;
+    color: #67c23a;
+
+    .close:hover {
+      background-color: #95d475;
+      color: #fff;
+    }
+  }
+
+  .blog-tag--info {
+    background-color: #202121;
+    border-color: #2d2d2f;
+    color: #909399;
+
+    .close:hover {
+      background-color: #909399;
+      color: #fff;
+    }
+  }
+
+  .blog-tag--warning {
+    background-color: #292218;
+    border-color: #3e301c;
+    color: #e6a23c;
+
+    .close:hover {
+      background-color: #e6a23c;
+      color: #fff;
+    }
+  }
+
+  .blog-tag--danger {
+    background-color: #2b1d1d;
+    border-color: #412626;
+    color: #f56c6c;
+
+    .close:hover {
+      background-color: #f56c6c;
+      color: #fff;
+    }
+  }
+}
+</style>

package/src/components/UserWorks.vue

@@ -1,21 +1,19 @@
 <script lang="ts" setup>
-import { ElCarousel, ElCarouselItem, ElImage, ElMessage } from 'element-plus'
 import VPDocAsideOutline from 'vitepress/dist/client/theme-default/components/VPDocAsideOutline.vue'
 import { computed, reactive, ref, watch, watchEffect } from 'vue'
-import { slugify } from '@mdit-vue/shared'
 import { useWindowSize } from '@vueuse/core'
-import {
-  formatDate,
-  getGithubDirUpdateTime,
-  getGithubUpdateTime
-} from '../utils/client'
+import { formatDate, getGithubDirUpdateTime, getGithubUpdateTime, slugify } from '../utils/client'
 import {
   useActiveAnchor,
   useAutoUpdateAnchor,
-  useUserWorks
+  useUserWorks,
 } from '../composables/config/blog'
 import type { Theme } from '../composables/config'
+import Carousel from './Carousel.vue'
+import CarouselItem from './CarouselItem.vue'
+import Image from './Image.vue'
 
+// TODO：作品集组件
 const currentAnchor = useAutoUpdateAnchor()
 // 更新锚点的时候更新 url 中的 hash
 watch(
@@ -165,10 +163,10 @@ watchEffect(() => {
 const { width } = useWindowSize()
 const isCardMode = computed(() => width.value > 768)
 function handleChooseTag(tag: string) {
-  ElMessage({
-    message: `点击了${tag}标签，标签过滤功能开发中ing...`,
-    type: 'warning'
-  })
+  // Message({
+  //   message: `点击了${tag}标签，标签过滤功能开发中ing...`,
+  //   type: 'warning',
+  // })
 }
 </script>
 
@@ -276,18 +274,17 @@ function handleChooseTag(tag: string) {
         <div v-if="work.covers?.length" class="images">
           <!-- swiper -->
           <div v-if="work.coverLayout === 'swiper'" class="swiper-mode">
-            <ElCarousel autoplay height="260px" :type="isCardMode && work.covers.length >= 3 ? 'card' : ''">
-              <ElCarouselItem v-for="(url, idx) in work.covers" :key="url" style="text-align: center">
-                <ElImage
-                  :key="url" preview-teleported :src="url" loading="lazy" :preview-src-list="work.covers"
-                  :initial-index="idx" hide-on-click-modal :alt="`${work.title}-${idx}`"
+            <Carousel autoplay height="260px" :type="isCardMode && work.covers.length >= 3 ? 'card' : ''">
+              <CarouselItem v-for="(url) in work.covers" :key="url" style="text-align: center">
+                <Image
+                  :src="url" loading="lazy"
                 />
-              </ElCarouselItem>
-            </ElCarousel>
+              </CarouselItem>
+            </Carousel>
           </div>
           <!-- list -->
           <div v-if="work.coverLayout === 'list'" class="list-mode">
-            <ElImage
+            <Image
               v-for="(url, idx) in work.covers" :key="url" :src="url" loading="lazy"
               :preview-src-list="work.covers" :initial-index="idx" hide-on-click-modal
             />
@@ -504,7 +501,7 @@ function handleChooseTag(tag: string) {
   flex-wrap: wrap;
   justify-content: center;
 
-  .el-image {
+  .sugar-image {
     :deep(img) {
       object-fit: contain;
       // max-height: 360px;
@@ -515,7 +512,7 @@ function handleChooseTag(tag: string) {
 .swiper-mode {
   margin-top: 16px;
 
-  .el-image {
+  .sugar-image {
     :deep(img) {
       object-fit: contain;
       max-height: 260px;

package/src/composables/config/blog.ts

@@ -262,7 +262,12 @@ export function useActiveAnchor() {
   onMounted(() => {
     const { hash } = window.location
     if (hash) {
-      el.value = document.querySelector(decodeURIComponent(hash)) as any
+      try {
+        el.value = document.querySelector(decodeURIComponent(hash)) as any
+      }
+      catch (error) {
+        console.warn('useActiveAnchor error', error)
+      }
     }
   })
   return el

package/src/composables/config/index.ts

@@ -272,7 +272,7 @@ export namespace Theme {
     tag?: string
   }
   export interface Alert {
-    type: 'success' | 'warning' | 'info' | 'error'
+    type: 'success' | 'warning' | 'info' | 'error' | 'primary'
     /**
      * 细粒度的时间控制
      * 默认展示时间，-1 只展示1次，其它数字为每次都展示，一定时间后自动消失，0为不自动消失
@@ -424,7 +424,7 @@ export namespace Theme {
     authorList?: Omit<FriendLink, 'avatar'>[]
     /**
      * 启用 [vitepress-plugin-tabs](https://www.npmjs.com/package/vitepress-plugin-tabs)
-     * @default false
+     * @default true
      */
     tabs?: boolean
     works?: UserWorks