@sugarat/theme 0.5.11 → 0.5.12-beta.1

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
             />
@@ -304,29 +301,27 @@ function handleChooseTag(tag: string) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
+@charset "UTF-8";
 .user-works-page {
   display: flex;
   justify-content: center;
   width: 100%;
   margin: 20px auto;
   padding: 16px;
-
-  h1 {
-    font-size: 32px;
-    font-weight: bold;
-  }
-
-  .description {
-    margin-top: 16px;
-    color: #999;
-    font-size: 16px;
-  }
-
-  a {
-    font-weight: 500;
-    color: var(--vp-c-brand-1);
-  }
+}
+.user-works-page h1 {
+  font-size: 32px;
+  font-weight: bold;
+}
+.user-works-page .description {
+  margin-top: 16px;
+  color: #999;
+  font-size: 16px;
+}
+.user-works-page a {
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
 }
 
 .works-container {
@@ -336,143 +331,113 @@ function handleChooseTag(tag: string) {
 
 .work {
   max-width: 900px;
-
-  h2 {
-    margin-top: 6px;
-    padding-top: 18px;
-    line-height: 32px;
-    font-size: 24px;
-    border-top: 1px solid var(--vp-c-divider);
-
-    a {
-      color: inherit;
-    }
-
-    &:hover {
-      a {
-        &::before {
-          opacity: 1;
-        }
-      }
-    }
-
-    a {
-      position: relative;
-
-      &::before {
-        position: absolute;
-        left: -16px;
-        opacity: 0;
-        content: var(--vp-header-anchor-symbol);
-      }
-    }
-  }
-
-  h3 {
-    margin: 32px 0 0;
-    line-height: 28px;
-    font-size: 20px;
-    position: relative;
-
-    &.title>a.pin {
-      position: absolute;
-      left: -16px;
-
-      &::before {
-        left: -16px;
-        opacity: 0;
-        content: var(--vp-header-anchor-symbol);
-      }
-    }
-
-    &:hover>a.pin {
-      &::before {
-        opacity: 1;
-      }
-    }
-  }
-
-  .info {
-    display: flex;
-    font-size: 14px;
-    margin-top: 10px;
-    flex-wrap: wrap;
-  }
-
-  .links,
-  .times,
-  .tags {
-    display: flex;
-    align-items: center;
-
-    .icon {
-      color: var(--vp-c-text-1);
-      display: block;
-      width: 20px;
-      height: 20px;
-      margin-right: 6px;
-    }
-  }
-
-  .times {
-    margin-right: 18px;
-  }
-
-  .links {
-    a {
-      display: flex;
-      align-items: center;
-    }
-
-    a.github-link {
-      margin-right: 10px;
-    }
-
-    a.link {
-      margin-right: 0;
-
-      &::after {
-        content: ',';
-        color: var(--vp-c-text-1);
-        margin-right: 6px;
-        margin-left: 2px;
-      }
-
-      &:last-child::after {
-        content: '';
-      }
-    }
-  }
-
-  .tags {
-    span.tag {
-      cursor: pointer;
-    }
-
-    span.tag:not(:last-child) {
-      &::after {
-        content: '·';
-        display: inline-block;
-        padding: 0 4px;
-      }
-    }
-  }
 }
+.work h2 {
+  margin-top: 6px;
+  padding-top: 18px;
+  line-height: 32px;
+  font-size: 24px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+.work h2 a {
+  color: inherit;
+}
+.work h2:hover a::before {
+  opacity: 1;
+}
+.work h2 a {
+  position: relative;
+}
+.work h2 a::before {
+  position: absolute;
+  left: -16px;
+  opacity: 0;
+  content: var(--vp-header-anchor-symbol);
+}
+.work h3 {
+  margin: 32px 0 0;
+  line-height: 28px;
+  font-size: 20px;
+  position: relative;
+}
+.work h3.title > a.pin {
+  position: absolute;
+  left: -16px;
+}
+.work h3.title > a.pin::before {
+  left: -16px;
+  opacity: 0;
+  content: var(--vp-header-anchor-symbol);
+}
+.work h3:hover > a.pin::before {
+  opacity: 1;
+}
+.work .info {
+  display: flex;
+  font-size: 14px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+}
+.work .links,
+.work .times,
+.work .tags {
+  display: flex;
+  align-items: center;
+}
+.work .links .icon,
+.work .times .icon,
+.work .tags .icon {
+  color: var(--vp-c-text-1);
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin-right: 6px;
+}
+.work .times {
+  margin-right: 18px;
+}
+.work .links a {
+  display: flex;
+  align-items: center;
+}
+.work .links a.github-link {
+  margin-right: 10px;
+}
+.work .links a.link {
+  margin-right: 0;
+}
+.work .links a.link::after {
+  content: ",";
+  color: var(--vp-c-text-1);
+  margin-right: 6px;
+  margin-left: 2px;
+}
+.work .links a.link:last-child::after {
+  content: "";
+}
+.work .tags span.tag {
+  cursor: pointer;
+}
+.work .tags span.tag:not(:last-child)::after {
+  content: "·";
+  display: inline-block;
+  padding: 0 4px;
+}
+
 .works {
   flex: 1;
 }
+
 @media (min-width: 1440px) {
   .works {
     max-width: 784px;
   }
 }
-
 @media (min-width: 960px) {
   .works {
     max-width: 752px;
   }
 }
-
 .aside-container {
   display: none;
   flex: 1;
@@ -486,7 +451,6 @@ function handleChooseTag(tag: string) {
     display: block;
   }
 }
-
 .aside-outline-container {
   position: sticky;
   top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 32px);
@@ -503,24 +467,17 @@ function handleChooseTag(tag: string) {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-
-  .el-image {
-    :deep(img) {
-      object-fit: contain;
-      // max-height: 360px;
-    }
-  }
+}
+.list-mode .sugar-image :deep(img) {
+  object-fit: contain;
 }
 
 .swiper-mode {
   margin-top: 16px;
-
-  .el-image {
-    :deep(img) {
-      object-fit: contain;
-      max-height: 260px;
-    }
-  }
+}
+.swiper-mode .sugar-image :deep(img) {
+  object-fit: contain;
+  max-height: 260px;
 }
 
 .split {

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

package/src/index.ts

@@ -1,27 +1,18 @@
 // @sugarat/theme index
 // override style
-import './styles/index.scss'
-
-// element-ui
-// import 'element-plus/dist/index.css'
-import 'element-plus/theme-chalk/base.css'
-import 'element-plus/theme-chalk/el-button.css'
-import 'element-plus/theme-chalk/el-tag.css'
-import 'element-plus/theme-chalk/el-icon.css'
-import 'element-plus/theme-chalk/el-avatar.css'
-import 'element-plus/theme-chalk/el-image.css'
-import 'element-plus/theme-chalk/el-image-viewer.css'
-import 'element-plus/theme-chalk/el-pagination.css'
-import 'element-plus/theme-chalk/el-carousel.css'
-import 'element-plus/theme-chalk/el-carousel-item.css'
-import 'element-plus/theme-chalk/el-alert.css'
-import 'element-plus/theme-chalk/dark/css-vars.css'
+import './styles/index.css'
+
+// element-ui-copy
+import './styles/el-base.css'
 
 // 引入时间线组件样式
-import 'vitepress-markdown-timeline/dist/theme/index.css'
+// replace-timeline-import-code
+// import 'vitepress-markdown-timeline/dist/theme/index.css'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
+
+// replace-tabs-import-code
+// import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
 
 // 图表渲染组件
 // replace-mermaid-import-code
@@ -36,13 +27,15 @@ import UserWorksPage from './components/UserWorks.vue'
 import './styles/theme/inline-theme.var.css'
 
 // 导入group icons，改由自定义插件导入
+// replace-group-icon-import-code
 // import 'virtual:group-icons.css'
 
 export const BlogTheme: Theme = {
   ...DefaultTheme,
   Layout: withConfigProvider(BlogApp),
   enhanceApp(ctx) {
-    enhanceAppWithTabs(ctx.app as any)
+    // replace-tabs-enhance-app-code
+    // enhanceAppWithTabs(ctx.app)
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('UserWorksPage', UserWorksPage as any)
     // replace-mermaid-mounted-code

package/src/node.ts

@@ -80,9 +80,6 @@ export function defineLocaleConfig(cfg: Omit<Theme.BlogConfig, 'locales' | 'page
   return cfg
 }
 
-// 重新导包 tabsMarkdownPlugin 导出CJS格式支持
-export { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
-
 export function footerHTML(footerData: Theme.FooterItem | Theme.FooterItem[]) {
   const data = [footerData || []].flat()
   return data.map((d) => {