@sugarat/theme 0.5.11 → 0.5.12-beta.0

package/src/components/Alert.vue

@@ -0,0 +1,308 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: 'info',
+    validator: (val: string) => ['success', 'warning', 'info', 'error', 'primary'].includes(val),
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  closable: {
+    type: Boolean,
+    default: true,
+  },
+  center: {
+    type: Boolean,
+    default: false,
+  },
+  closeText: {
+    type: String,
+    default: '',
+  },
+  showIcon: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['close'])
+
+const visible = ref(true)
+
+function close() {
+  visible.value = false
+  emit('close')
+}
+
+const typeClass = computed(() => `sugar-alert--${props.type}`)
+const isBigIcon = computed(() => props.description || !!props.title)
+const isBoldTitle = computed(() => props.description || !!props.title)
+</script>
+
+<template>
+  <transition name="sugar-alert-fade">
+    <div v-show="visible" class="sugar-alert" :class="[typeClass, center ? 'is-center' : '']" role="alert">
+      <div v-if="showIcon" class="sugar-alert__icon" :class="[isBigIcon ? 'is-big' : '']">
+        <svg
+          v-if="type === 'success'" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em"
+          height="1em"
+        >
+          <path
+            fill="currentColor"
+            d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"
+          />
+        </svg>
+        <svg
+          v-else-if="type === 'warning'" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em"
+          height="1em"
+        >
+          <path
+            fill="currentColor"
+            d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256m0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4"
+          />
+        </svg>
+        <svg
+          v-else-if="type === 'error'" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em"
+          height="1em"
+        >
+          <path
+            fill="currentColor"
+            d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336z"
+          />
+        </svg>
+        <svg
+          v-else-if="type === 'primary'" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em"
+          height="1em"
+        >
+          <path
+            fill="currentColor"
+            d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 832a384 384 0 1 0 0-768 384 384 0 0 0 0 768m48-176a48 48 0 1 1-96 0 48 48 0 0 1 96 0m-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V256a32 32 0 0 1 32-32"
+          />
+        </svg>
+        <svg v-else viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em">
+          <path
+            fill="currentColor"
+            d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 832a384 384 0 1 0 0-768 384 384 0 0 0 0 768m48-176a48 48 0 1 1-96 0 48 48 0 0 1 96 0m-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V256a32 32 0 0 1 32-32"
+          />
+        </svg>
+      </div>
+      <div class="sugar-alert__content">
+        <span v-if="title || $slots.title" class="sugar-alert__title" :class="[isBoldTitle ? 'is-bold' : '']">
+          <slot name="title">{{ title }}</slot>
+        </span>
+        <p v-if="$slots.default || description" class="sugar-alert__description">
+          <slot>
+            {{ description }}
+          </slot>
+        </p>
+        <div v-if="closable" class="sugar-alert__close-btn" :class="{ 'is-customed': closeText !== '' }" @click="close">
+          <template v-if="closeText">
+            {{ closeText }}
+          </template>
+          <svg v-else 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>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style lang="scss" scoped>
+html.dark .sugar-alert {
+  background-color: transparent;
+}
+
+.sugar-alert {
+  width: 100%;
+  padding: 8px 16px;
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: 4px;
+  position: relative;
+  background-color: #fff;
+  overflow: hidden;
+  opacity: 1;
+
+  display: flex;
+  align-items: center;
+  transition: opacity .2s;
+
+  &.is-center {
+    justify-content: center;
+
+    .sugar-alert__content {
+      text-align: center;
+    }
+  }
+
+  &--success {
+    background-color: #f0f9eb;
+    color: #67c23a;
+
+    .sugar-alert__description {
+      color: #67c23a;
+    }
+
+  }
+
+  &--info {
+    background-color: #f4f4f5;
+    color: #909399;
+
+    .sugar-alert__description {
+      color: #909399;
+    }
+
+  }
+
+  &--warning {
+    background-color: #fdf6ec;
+    color: #e6a23c;
+
+    .sugar-alert__description {
+      color: #e6a23c;
+    }
+
+  }
+
+  &--error {
+    background-color: #fef0f0;
+    color: #f56c6c;
+
+    .sugar-alert__description {
+      color: #f56c6c;
+    }
+
+  }
+
+  &--primary {
+    background-color: var(--vp-c-brand-soft);
+    color: var(--vp-c-brand-1);
+
+    .sugar-alert__description {
+      color: var(--vp-c-brand-1);
+    }
+  }
+
+  &__content {
+    display: table-cell;
+    padding: 0 8px;
+    width: 100%; // Ensure content takes available space
+  }
+
+  &__icon {
+    font-size: 16px;
+    width: 16px;
+    display: table-cell;
+    color: inherit;
+    vertical-align: middle;
+
+    &.is-big {
+      font-size: 28px;
+      width: 28px;
+    }
+  }
+
+  &__title {
+    font-size: 13px;
+    line-height: 18px;
+    vertical-align: text-top;
+
+    &.is-bold {
+      font-weight: 700;
+    }
+  }
+
+  &__description {
+    font-size: 12px;
+    margin: 5px 0 0 0;
+    line-height: 1.5;
+  }
+
+  &__close-btn {
+    font-size: 12px;
+    opacity: 1;
+    position: absolute;
+    top: 12px;
+    right: 15px;
+    cursor: pointer;
+    color: var(--vp-c-text-2); // Use element colors if light
+
+    &.is-customed {
+      font-style: normal;
+      font-size: 11px;
+      line-height: 18px;
+    }
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+}
+
+.sugar-alert-fade-enter-from,
+.sugar-alert-fade-leave-to {
+  opacity: 0;
+}
+
+html.dark {
+  .sugar-alert {
+    &--success {
+      background-color: #1c2518;
+      color: #67c23a;
+
+      .sugar-alert__description {
+        color: #67c23a;
+      }
+    }
+
+    &--info {
+      background-color: #202121;
+      color: #909399;
+
+      .sugar-alert__description {
+        color: #909399;
+      }
+    }
+
+    &--warning {
+      background-color: #292218;
+      color: #e6a23c;
+
+      .sugar-alert__description {
+        color: #e6a23c;
+      }
+    }
+
+    &--error {
+      background-color: #2b1d1d;
+      color: #f56c6c;
+
+      .sugar-alert__description {
+        color: #f56c6c;
+      }
+    }
+
+    &--primary {
+      background-color: var(--vp-c-brand-soft);
+      color: var(--vp-c-brand-1);
+
+      .sugar-alert__description {
+        color: var(--vp-c-brand-1);
+      }
+    }
+  }
+}
+</style>

package/src/components/Avatar.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  alt: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: Number,
+    default: 50,
+  },
+})
+
+const sizeStyle = computed(() => {
+  const { size } = props
+  return {
+    width: `${size}px`,
+    height: `${size}px`,
+  }
+})
+</script>
+
+<template>
+  <span
+    class="blog-avatar blog-avatar--circle"
+    :style="sizeStyle"
+  >
+    <img
+      v-if="src"
+      :src="src"
+      :alt="alt"
+    >
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.blog-avatar {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+  color: #fff;
+  background: #c0c4cc;
+  font-size: 14px;
+  vertical-align: middle;
+  min-width: 50px;
+
+  > img {
+    display: block;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+}
+
+.blog-avatar--circle {
+  border-radius: 50%;
+}
+</style>

package/src/components/BlogAlert.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { ElAlert } from 'element-plus'
 import { onMounted, ref } from 'vue'
 import { useAlertConfig } from '../composables/config/blog'
+import Alert from './Alert.vue'
 
 // TODO：拆分插件，对标公告插件
 const alertProps = useAlertConfig()
@@ -48,7 +48,7 @@ function handleClose() {
 
 <template>
   <div v-if="show" class="global-alert" data-pagefind-ignore="all">
-    <ElAlert
+    <Alert
       :title="alertProps?.title"
       :type="alertProps?.type"
       :show-icon="alertProps?.showIcon"
@@ -59,7 +59,7 @@ function handleClose() {
       @close="handleClose"
     >
       <div v-if="alertProps?.html" v-html="alertProps?.html" />
-    </ElAlert>
+    </Alert>
   </div>
 </template>
 
@@ -73,7 +73,7 @@ function handleClose() {
   left: 50%;
   transform: translateX(-50%);
   width: auto;
-  :deep(.el-alert__content) {
+  :deep(.sugar-alert__content) {
     padding-right: 20px;
   }
 }

package/src/components/BlogApp.vue

@@ -128,6 +128,10 @@ const openTransition = useDarkTransitionConfig()
     <!-- content -->
     <template #page-top>
       <slot name="page-top" />
+      <ClientOnly>
+        <!-- 图片预览 -->
+        <BlogImagePreview />
+      </ClientOnly>
     </template>
     <template #page-bottom>
       <slot name="page-bottom" />

package/src/components/BlogArticleAnalyze.vue

@@ -2,19 +2,50 @@
 // 阅读时间计算方式参考
 // https://zhuanlan.zhihu.com/p/36375802
 import { useData } from 'vitepress'
-import { computed, onMounted, ref } from 'vue'
-import { ElIcon } from 'element-plus'
-import {
-  AlarmClock,
-  Clock,
-  CollectionTag,
-  EditPen,
-  UserFilled
-} from '@element-plus/icons-vue'
+
+// 移除外部依赖，图标内置
+// import { ElIcon } from 'element-plus'
+// import {
+//   UserFilled
+// } from '@element-plus/icons-vue'
+
+import { computed, defineComponent, h, onMounted, ref } from 'vue'
 import { useAnalyzeTitles, useArticleConfig, useAuthorList, useCurrentArticle, useDocMetaInsertPosition, useDocMetaInsertSelector, useFormatShowDate, useGlobalAuthor } from '../composables/config/blog'
 import countWord, { formatDate } from '../utils/client'
 import BlogDocCover from './BlogDocCover.vue'
 
+function createIcon(d: string | string[]) {
+  return defineComponent({
+    render: () => h('svg', {
+      xmlns: 'http://www.w3.org/2000/svg',
+      viewBox: '0 0 1024 1024',
+    }, [d].flatMap(d => h('path', { fill: 'currentColor', d })))
+  })
+}
+
+const AlarmClock = createIcon(
+  [
+    'M512 832a320 320 0 1 0 0-640 320 320 0 0 0 0 640m0 64a384 384 0 1 1 0-768 384 384 0 0 1 0 768',
+    'm292.288 824.576 55.424 32-48 83.136a32 32 0 1 1-55.424-32zm439.424 0-55.424 32 48 83.136a32 32 0 1 0 55.424-32zM512 512h160a32 32 0 1 1 0 64H480a32 32 0 0 1-32-32V320a32 32 0 0 1 64 0zM90.496 312.256A160 160 0 0 1 312.32 90.496l-46.848 46.848a96 96 0 0 0-128 128L90.56 312.256zm835.264 0A160 160 0 0 0 704 90.496l46.848 46.848a96 96 0 0 1 128 128z'
+  ]
+)
+
+const Clock = createIcon([
+  'M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896',
+  'M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32',
+  'M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32'
+])
+
+const CollectionTag = createIcon(
+  'M256 128v698.88l196.032-156.864a96 96 0 0 1 119.936 0L768 826.816V128zm-32-64h576a32 32 0 0 1 32 32v797.44a32 32 0 0 1-51.968 24.96L531.968 720a32 32 0 0 0-39.936 0L243.968 918.4A32 32 0 0 1 192 893.44V96a32 32 0 0 1 32-32'
+)
+const EditPen = createIcon(
+  'm199.04 672.64 193.984 112 224-387.968-193.92-112-224 388.032zm-23.872 60.16 32.896 148.288 144.896-45.696zM455.04 229.248l193.92 112 56.704-98.112-193.984-112-56.64 98.112zM104.32 708.8l384-665.024 304.768 175.936L409.152 884.8h.064l-248.448 78.336zm384 254.272v-64h448v64h-448z'
+)
+const UserFilled = createIcon(
+  'M288 320a224 224 0 1 0 448 0 224 224 0 1 0-448 0m544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z'
+)
+
 const formatShowDate = useFormatShowDate()
 const article = useArticleConfig()
 const authorList = useAuthorList()
@@ -131,24 +162,24 @@ const timeTitle = computed(() =>
 <template>
   <div v-if="showAnalyze && readingTimePosition === 'top'" class="doc-analyze" data-pagefind-ignore="all">
     <span>
-      <ElIcon>
+      <i class="icon">
         <EditPen />
-      </ElIcon>
+      </i>
       {{ topWordCount }}
     </span>
     <span>
-      <ElIcon>
+      <i class="icon">
         <AlarmClock />
-      </ElIcon>
+      </i>
       {{ topReadTime }}
     </span>
   </div>
   <div id="hack-article-des" ref="$des" class="meta-des">
     <!-- TODO：是否需要原创？转载等标签，理论上可以添加标签解决，可以参考 charles7c -->
     <span v-if="author && !hiddenAuthor" class="author" :title="authorTitle">
-      <ElIcon>
+      <i class="icon">
         <UserFilled />
-      </ElIcon>
+      </i>
       <a v-if="currentAuthorInfo" class="link" :href="currentAuthorInfo.url" :title="currentAuthorInfo.des">
         {{ currentAuthorInfo.nickname }}
       </a>
@@ -157,45 +188,45 @@ const timeTitle = computed(() =>
       </template>
     </span>
     <span v-if="publishDate && !hiddenTime" class="publishDate" :title="timeTitle + hoverDate">
-      <ElIcon>
+      <i class="icon">
         <Clock />
-      </ElIcon>
+      </i>
       {{ publishDate }}
     </span>
     <template v-if="readingTimePosition === 'inline' && showAnalyze">
       <span :title="wordCountTitle">
-        <ElIcon>
+        <i class="icon">
           <EditPen />
-        </ElIcon>
+        </i>
         {{ inlineWordCount }}
       </span>
       <span :title="readTimeTitle">
-        <ElIcon>
+        <i class="icon">
           <AlarmClock />
-        </ElIcon>
+        </i>
         {{ inlineReadTime }}
       </span>
     </template>
     <template v-if="readingTimePosition === 'newLine' && showAnalyze">
       <div style="width: 100%;" class="new-line-meta-des">
         <span :title="wordCountTitle">
-          <ElIcon>
+          <i class="icon">
             <EditPen />
-          </ElIcon>
+          </i>
           {{ inlineWordCount }}
         </span>
         <span :title="readTimeTitle">
-          <ElIcon>
+          <i class="icon">
             <AlarmClock />
-          </ElIcon>
+          </i>
           {{ inlineReadTime }}
         </span>
       </div>
     </template>
     <span v-if="tags.length" class="tags" :title="tagTitle">
-      <ElIcon>
+      <i class="icon">
         <CollectionTag />
-      </ElIcon>
+      </i>
       <a v-for="tag in tags" :key="tag" class="link" :href="`/?tag=${tag}`">{{ tag }}
       </a>
     </span>
@@ -218,10 +249,6 @@ const timeTitle = computed(() =>
     margin-right: 16px;
     display: flex;
     align-items: center;
-
-    .el-icon {
-      margin-right: 4px;
-    }
   }
 }
 
@@ -240,8 +267,19 @@ const timeTitle = computed(() =>
     align-items: center;
     flex-wrap: wrap;
 
-    .el-icon {
+    .icon {
       margin-right: 4px;
+      --color: inherit;
+      align-items: center;
+      display: inline-flex;
+      height: 1em;
+      justify-content: center;
+      line-height: 1em;
+      position: relative;
+      width: 1em;
+      fill: currentColor;
+      color: var(--color) inherit;
+      font-size: inherit;
     }
   }
 

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,10 +36,10 @@ 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>
@@ -53,7 +53,7 @@ function toggleContent() {
   font-size: 14px;
   color: #606266;
 
-  :deep(.el-button.el-button--primary){
+  :deep(.sugar-button.sugar-button--primary){
     background-color: var(--vp-c-brand-2);
     border-color: var(--vp-c-brand-2);
   }