@sugarat/theme 0.5.11 → 0.5.12-beta.1

package/src/components/Alert.vue

@@ -0,0 +1,269 @@
+<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 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 0.2s;
+}
+.sugar-alert.is-center {
+  justify-content: center;
+}
+.sugar-alert.is-center .sugar-alert__content {
+  text-align: center;
+}
+.sugar-alert--success {
+  background-color: #f0f9eb;
+  color: #67c23a;
+}
+.sugar-alert--success .sugar-alert__description {
+  color: #67c23a;
+}
+.sugar-alert--info {
+  background-color: #f4f4f5;
+  color: #909399;
+}
+.sugar-alert--info .sugar-alert__description {
+  color: #909399;
+}
+.sugar-alert--warning {
+  background-color: #fdf6ec;
+  color: #e6a23c;
+}
+.sugar-alert--warning .sugar-alert__description {
+  color: #e6a23c;
+}
+.sugar-alert--error {
+  background-color: #fef0f0;
+  color: #f56c6c;
+}
+.sugar-alert--error .sugar-alert__description {
+  color: #f56c6c;
+}
+.sugar-alert--primary {
+  background-color: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+.sugar-alert--primary .sugar-alert__description {
+  color: var(--vp-c-brand-1);
+}
+.sugar-alert__content {
+  display: table-cell;
+  padding: 0 8px;
+  width: 100%;
+}
+.sugar-alert__icon {
+  font-size: 16px;
+  width: 16px;
+  display: table-cell;
+  color: inherit;
+  vertical-align: middle;
+}
+.sugar-alert__icon.is-big {
+  font-size: 28px;
+  width: 28px;
+}
+.sugar-alert__title {
+  font-size: 13px;
+  line-height: 18px;
+  vertical-align: text-top;
+}
+.sugar-alert__title.is-bold {
+  font-weight: 700;
+}
+.sugar-alert__description {
+  font-size: 12px;
+  margin: 5px 0 0 0;
+  line-height: 1.5;
+}
+.sugar-alert__close-btn {
+  font-size: 12px;
+  opacity: 1;
+  position: absolute;
+  top: 12px;
+  right: 15px;
+  cursor: pointer;
+  color: var(--vp-c-text-2);
+}
+.sugar-alert__close-btn.is-customed {
+  font-style: normal;
+  font-size: 11px;
+  line-height: 18px;
+}
+.sugar-alert__close-btn: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;
+}
+html.dark .sugar-alert--success .sugar-alert__description {
+  color: #67c23a;
+}
+html.dark .sugar-alert--info {
+  background-color: #202121;
+  color: #909399;
+}
+html.dark .sugar-alert--info .sugar-alert__description {
+  color: #909399;
+}
+html.dark .sugar-alert--warning {
+  background-color: #292218;
+  color: #e6a23c;
+}
+html.dark .sugar-alert--warning .sugar-alert__description {
+  color: #e6a23c;
+}
+html.dark .sugar-alert--error {
+  background-color: #2b1d1d;
+  color: #f56c6c;
+}
+html.dark .sugar-alert--error .sugar-alert__description {
+  color: #f56c6c;
+}
+html.dark .sugar-alert--primary {
+  background-color: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+html.dark .sugar-alert--primary .sugar-alert__description {
+  color: var(--vp-c-brand-1);
+}
+</style>

package/src/components/Avatar.vue

@@ -0,0 +1,65 @@
+<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 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;
+}
+.blog-avatar > 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,11 +59,11 @@ function handleClose() {
       @close="handleClose"
     >
       <div v-if="alertProps?.html" v-html="alertProps?.html" />
-    </ElAlert>
+    </Alert>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .global-alert {
   position: fixed;
   z-index: 999;
@@ -73,16 +73,16 @@ function handleClose() {
   left: 50%;
   transform: translateX(-50%);
   width: auto;
-  :deep(.el-alert__content) {
-    padding-right: 20px;
-  }
 }
+.global-alert :deep(.sugar-alert__content) {
+  padding-right: 20px;
+}
+
 @media screen and (max-width: 1100px) {
   .global-alert {
     width: 50%;
   }
 }
-
 @media screen and (max-width: 600px) {
   .global-alert {
     width: 90%;

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" />
@@ -184,7 +188,7 @@ const openTransition = useDarkTransitionConfig()
   </Layout>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .home {
   margin: 0 auto;
   padding: 20px;
@@ -196,7 +200,6 @@ const openTransition = useDarkTransitionConfig()
     padding-top: var(--vp-nav-height);
   }
 }
-
 .header-banner {
   width: 100%;
   padding: 60px 0;
@@ -225,31 +228,25 @@ const openTransition = useDarkTransitionConfig()
     top: 40px;
   }
 }
-
 @media screen and (max-width: 767px) {
   .content-wrapper {
     flex-wrap: wrap;
   }
-
   .blog-info-wrapper {
     margin: 20px 0;
     width: 100%;
   }
-
   .normal-mode {
     display: none;
   }
-
   .minify-mode {
     display: block;
   }
 }
-
 @media screen and (min-width: 768px) {
   .minify-mode {
     display: none;
   }
-
   .normal-mode {
     display: block;
   }

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>
@@ -206,23 +237,18 @@ const timeTitle = computed(() =>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .doc-analyze {
   color: var(--vp-c-text-2);
   font-size: 14px;
   margin-bottom: 20px;
   display: flex;
   justify-content: center;
-
-  span {
-    margin-right: 16px;
-    display: flex;
-    align-items: center;
-
-    .el-icon {
-      margin-right: 4px;
-    }
-  }
+}
+.doc-analyze span {
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
 }
 
 .meta-des,
@@ -233,35 +259,42 @@ const timeTitle = computed(() =>
   margin-top: 6px;
   display: flex;
   flex-wrap: wrap;
-
-  >span {
-    margin-right: 16px;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .el-icon {
-      margin-right: 4px;
-    }
-  }
-
-  .link {
-    color: var(--vp-c-text-2);
-
-    &:hover {
-      color: var(--vp-c-brand-1);
-      cursor: pointer;
-    }
-  }
+}
+.meta-des > span,
+.new-line-meta-des > span {
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.meta-des > span .icon,
+.new-line-meta-des > span .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;
+}
+.meta-des .link,
+.new-line-meta-des .link {
+  color: var(--vp-c-text-2);
+}
+.meta-des .link:hover,
+.new-line-meta-des .link:hover {
+  color: var(--vp-c-brand-1);
+  cursor: pointer;
 }
 
-.tags {
-  a.link:not(:last-child) {
-    &::after {
-      content: '·';
-      display: inline-block;
-      padding: 0 4px;
-    }
-  }
+.tags a.link:not(:last-child)::after {
+  content: "·";
+  display: inline-block;
+  padding: 0 4px;
 }
 </style>