组件库

建站
0 字 / 约 0 分钟

组件库 ​

图标与 UI ​

  • allIcon.vue 汇总内置图标
  • 按需引入按钮、卡片等组件

代码片段：统一图标组件 ​

vue
<!-- docs/.vitepress/theme/components/allIcon.vue（节选） -->
<template>
  <component :is="iconMap[name]" class="vp-icon" :style="{ fontSize: size }" aria-hidden="true" />
  
</template>
<script setup lang="ts">
import { h, type FunctionalComponent } from 'vue'
const CalendarIcon: FunctionalComponent = () => h('svg', { viewBox: '0 0 1024 1024' }, [/* ... */])
const TagIcon: FunctionalComponent = () => h('svg', { viewBox: '0 0 1024 1024' }, [/* ... */])
const CatIcon: FunctionalComponent = () => h('svg', { viewBox: '0 0 1024 1024' }, [/* ... */])
const iconMap = { CalendarIcon, TagIcon, CatIcon } as const
interface Props { name: keyof typeof iconMap; size?: string | number }
withDefaults(defineProps<Props>(), { size: '1em' })
</script>

图标配色与 Tailwind ​

  • 通过 fill: 'currentColor' 使图标随文本色切换，同时在主题样式中定义：
    css
    .vp-icon { color: var(--vp-c-text-2); }
.vp-icon:hover { color: var(--vp-c-brand-1); }

列表与卡片 ​

  • ArticleIndex.vue 实现文章分页、加载更多

公共工具 ​

  • articleMeta.ts 统一解析 frontmatter