@jet-w/astro-blog 0.1.0

package/src/components/EChartsCard.vue

@@ -0,0 +1,118 @@
+<template>
+  <div ref="chartContainer" :style="containerStyle" class="echarts-container"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue'
+import * as echarts from 'echarts'
+
+const props = defineProps({
+  // 图表配置项
+  option: {
+    type: Object,
+    required: true
+  },
+  // 图表宽度
+  width: {
+    type: String,
+    default: '100%'
+  },
+  // 图表高度
+  height: {
+    type: String,
+    default: '400px'
+  },
+  // 主题：'light' | 'dark'
+  theme: {
+    type: String,
+    default: 'light'
+  },
+  // 是否自动调整大小
+  autoResize: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const chartContainer = ref<HTMLDivElement>()
+let chartInstance: echarts.ECharts | null = null
+
+const containerStyle = computed(() => ({
+  width: props.width,
+  height: props.height
+}))
+
+// 初始化图表
+const initChart = () => {
+  if (!chartContainer.value) {
+    console.error('[ECharts] Container not found')
+    return
+  }
+
+  // 如果已存在实例，先销毁
+  if (chartInstance) {
+    chartInstance.dispose()
+  }
+
+  try {
+    // 创建新实例
+    chartInstance = echarts.init(chartContainer.value, props.theme)
+    chartInstance.setOption(props.option)
+    console.log('[ECharts] Chart initialized successfully')
+  } catch (error) {
+    console.error('[ECharts] Error initializing chart:', error)
+  }
+}
+
+// 更新图表配置
+const updateChart = () => {
+  if (chartInstance) {
+    chartInstance.setOption(props.option, true)
+  }
+}
+
+// 调整图表大小
+const handleResize = () => {
+  if (chartInstance) {
+    chartInstance.resize()
+  }
+}
+
+onMounted(async () => {
+  await nextTick()
+  initChart()
+
+  if (props.autoResize) {
+    window.addEventListener('resize', handleResize)
+  }
+})
+
+onUnmounted(() => {
+  if (props.autoResize) {
+    window.removeEventListener('resize', handleResize)
+  }
+
+  if (chartInstance) {
+    chartInstance.dispose()
+    chartInstance = null
+  }
+})
+
+// 监听配置变化
+watch(() => props.option, updateChart, { deep: true })
+
+// 监听主题变化
+watch(() => props.theme, initChart)
+
+// 暴露方法供外部调用
+defineExpose({
+  getInstance: () => chartInstance,
+  resize: handleResize
+})
+</script>
+
+<style scoped>
+.echarts-container {
+  min-height: 200px;
+}
+</style>

package/src/components/Mermaid.vue

@@ -0,0 +1,73 @@
+<template>
+  <div ref="mermaidContainer" class="mermaid-container"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import mermaid from 'mermaid'
+
+const props = defineProps({
+  chart: {
+    type: String,
+    required: true
+  }
+})
+
+const mermaidContainer = ref()
+
+// 配置mermaid
+mermaid.initialize({
+  startOnLoad: false,
+  theme: 'default',
+  securityLevel: 'loose',
+  fontFamily: 'ui-sans-serif, system-ui, sans-serif'
+})
+
+const renderChart = async () => {
+  if (!mermaidContainer.value) return
+
+  try {
+    // 清空容器
+    mermaidContainer.value.innerHTML = ''
+
+    // 生成唯一ID
+    const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`
+
+    // 渲染图表
+    const { svg } = await mermaid.render(id, props.chart)
+    mermaidContainer.value.innerHTML = svg
+  } catch (error) {
+    console.error('Mermaid rendering error:', error)
+    mermaidContainer.value.innerHTML = `
+      <div class="text-red-600 border border-red-300 rounded p-4">
+        <h4 class="font-semibold">Mermaid渲染错误</h4>
+        <pre class="text-sm mt-2">${error.message}</pre>
+      </div>
+    `
+  }
+}
+
+onMounted(() => {
+  renderChart()
+})
+
+// 监听chart属性变化
+watch(() => props.chart, () => {
+  renderChart()
+})
+</script>
+
+<style scoped>
+.mermaid-container {
+  @apply flex justify-center my-4;
+}
+
+.mermaid-container :deep(svg) {
+  @apply max-w-full h-auto;
+}
+
+/* 深色主题适配 */
+.dark .mermaid-container :deep(svg) {
+  @apply invert;
+}
+</style>

package/src/components/about/ContentCard.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * 内容卡片组件
+ * 用于展示带标题的 Markdown 内容
+ *
+ * 使用方式:
+ * <ContentCard title="关于这个博客">
+ *   这里是 **Markdown** 内容...
+ * </ContentCard>
+ */
+
+export interface Props {
+  title: string;
+  class?: string;
+}
+
+const { title, class: className = '' } = Astro.props;
+---
+
+<div class={`card ${className}`}>
+  <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-6">
+    {title}
+  </h2>
+  <div class="prose-custom">
+    <slot />
+  </div>
+</div>

package/src/components/about/IconCard.astro

@@ -0,0 +1,77 @@
+---
+/**
+ * 图标卡片组件
+ * 用于展示兴趣爱好、特点等带图标的列表
+ *
+ * 使用方式:
+ * <IconCard title="兴趣爱好">
+ *   <IconCard.Item icon="code" color="primary" title="编程" description="热爱探索新技术" />
+ * </IconCard>
+ *
+ * 或者简单用法:
+ * <IconCard title="兴趣爱好" items={[{icon: 'code', title: '编程', description: '...'}]} />
+ */
+
+export interface IconItem {
+  icon: 'code' | 'book' | 'music' | 'game' | 'travel' | 'photo' | 'movie' | 'sport' | 'video';
+  title: string;
+  description: string;
+  color?: 'primary' | 'secondary' | 'accent';
+}
+
+export interface Props {
+  title: string;
+  items?: IconItem[];
+}
+
+const { title, items } = Astro.props;
+
+const bgColorMap = {
+  primary: 'bg-primary-100 dark:bg-primary-900/30',
+  secondary: 'bg-secondary-100 dark:bg-secondary-900/30',
+  accent: 'bg-accent-100 dark:bg-accent-900/30'
+};
+
+const iconColorMap = {
+  primary: 'text-primary-500',
+  secondary: 'text-secondary-500',
+  accent: 'text-accent-500'
+};
+
+const icons = {
+  code: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
+  book: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253',
+  music: 'M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3',
+  game: 'M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664zM21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+  travel: 'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+  photo: 'M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9zM15 13a3 3 0 11-6 0 3 3 0 016 0z',
+  movie: 'M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z',
+  sport: 'M13 10V3L4 14h7v7l9-11h-7z',
+  video: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z'
+};
+---
+
+<div class="card mb-6 last:mb-0 h-full">
+  <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-6">
+    {title}
+  </h2>
+  <div class="space-y-4">
+    {items ? (
+      items.map((item) => (
+        <div class="flex items-start space-x-3">
+          <div class={`w-8 h-8 ${bgColorMap[item.color || 'primary']} rounded-lg flex items-center justify-center flex-shrink-0 mt-1`}>
+            <svg class={`w-4 h-4 ${iconColorMap[item.color || 'primary']}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icons[item.icon]} />
+            </svg>
+          </div>
+          <div>
+            <h3 class="font-semibold text-slate-900 dark:text-slate-100">{item.title}</h3>
+            <p class="text-slate-600 dark:text-slate-400 text-sm">{item.description}</p>
+          </div>
+        </div>
+      ))
+    ) : (
+      <slot />
+    )}
+  </div>
+</div>

package/src/components/about/SocialLinks.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * 社交链接组件
+ *
+ * 使用方式:
+ * <SocialLinks /> // 使用配置文件中的社交链接
+ *
+ * 或传入自定义链接:
+ * <SocialLinks links={[
+ *   { type: 'github', url: 'https://github.com/username' },
+ *   { type: 'twitter', url: 'https://twitter.com/username', icon: '...' }
+ * ]} />
+ */
+
+import {
+  socialLinks as configSocialLinks,
+  defaultIcons,
+  type SocialLink
+} from '../../config';
+
+export interface Props {
+  links?: SocialLink[];
+}
+
+const { links } = Astro.props;
+
+// 如果没有传入 links，则使用配置文件中的社交链接
+const socialLinksData: SocialLink[] = links || configSocialLinks;
+
+/**
+ * 获取图标路径，优先使用自定义icon，否则使用默认图标
+ */
+function getIcon(link: SocialLink): string {
+  return link.icon || defaultIcons[link.type] || '';
+}
+---
+
+{socialLinksData.length > 0 && (
+  <div class="flex justify-center space-x-6 mt-8">
+    {socialLinksData.map((link) => (
+      <a
+        href={link.url}
+        target={link.type === 'email' ? undefined : '_blank'}
+        rel={link.type === 'email' ? undefined : 'noopener noreferrer'}
+        class="text-slate-600 dark:text-slate-400 hover:text-primary-500 transition-colors"
+        aria-label={link.label || link.type}
+      >
+        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
+          <path d={getIcon(link)} />
+        </svg>
+      </a>
+    ))}
+  </div>
+)}

package/src/components/about/TagCard.astro

@@ -0,0 +1,65 @@
+---
+/**
+ * 标签卡片组件
+ * 用于展示技术栈、技能等带标签的内容
+ *
+ * 使用方式:
+ * <TagCard title="技术栈">
+ *   <TagCard.Group name="前端" color="primary" tags={['Vue', 'React']} />
+ *   <TagCard.Group name="后端" color="secondary" tags={['Node.js']} />
+ * </TagCard>
+ *
+ * 或者简单用法:
+ * <TagCard title="技术栈" groups={[{name: '前端', tags: ['Vue'], color: 'primary'}]} />
+ */
+
+export interface TagGroup {
+  name: string;
+  tags: string[];
+  color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+}
+
+export interface Props {
+  title: string;
+  groups?: TagGroup[];
+}
+
+const { title, groups } = Astro.props;
+
+const colorStyles = {
+  primary: { bg: '#dbeafe', text: '#1d4ed8' },
+  secondary: { bg: '#e0e7ff', text: '#4338ca' },
+  accent: { bg: '#ede9fe', text: '#6d28d9' },
+  success: { bg: '#dcfce7', text: '#15803d' },
+  warning: { bg: '#fef9c3', text: '#a16207' },
+  danger: { bg: '#fee2e2', text: '#b91c1c' },
+  info: { bg: '#cffafe', text: '#0e7490' }
+};
+---
+
+<div class="card mb-6 last:mb-0 h-full">
+  <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-6">
+    {title}
+  </h2>
+  <div class="space-y-1">
+    {groups ? (
+      groups.map((group) => (
+        <div>
+          <h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">{group.name}</h3>
+          <div class="flex flex-wrap gap-2">
+            {group.tags.map((tag) => (
+              <span
+                class="px-3 py-1 rounded-full text-sm"
+                style={`background-color: ${colorStyles[group.color || 'primary'].bg}; color: ${colorStyles[group.color || 'primary'].text};`}
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        </div>
+      ))
+    ) : (
+      <slot />
+    )}
+  </div>
+</div>

package/src/components/about/TagGroup.astro

@@ -0,0 +1,33 @@
+---
+/**
+ * 标签组组件 - 配合 TagCard 使用
+ *
+ * 使用方式:
+ * <TagGroup name="前端技术" color="primary" tags={['Vue', 'React', 'TypeScript']} />
+ */
+
+export interface Props {
+  name: string;
+  tags: string[];
+  color?: 'primary' | 'secondary' | 'accent';
+}
+
+const { name, tags, color = 'primary' } = Astro.props;
+
+const colorMap = {
+  primary: 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300',
+  secondary: 'bg-secondary-100 dark:bg-secondary-900/30 text-secondary-700 dark:text-secondary-300',
+  accent: 'bg-accent-100 dark:bg-accent-900/30 text-accent-700 dark:text-accent-300'
+};
+---
+
+<div>
+  <h3 class="font-semibold text-slate-900 dark:text-slate-100 mb-2">{name}</h3>
+  <div class="flex flex-wrap gap-2">
+    {tags.map((tag) => (
+      <span class={`px-3 py-1 rounded-full text-sm ${colorMap[color]}`}>
+        {tag}
+      </span>
+    ))}
+  </div>
+</div>

package/src/components/about/TimelineCard.astro

@@ -0,0 +1,52 @@
+---
+/**
+ * 时间线卡片组件
+ * 用于展示发展历程、里程碑等
+ *
+ * 使用方式:
+ * <TimelineCard title="发展历程" events={[
+ *   { year: '2025', title: '博客创建', description: '...', color: 'primary' }
+ * ]} />
+ */
+
+export interface TimelineEvent {
+  year: string;
+  title: string;
+  description: string;
+  color?: 'primary' | 'secondary' | 'accent';
+}
+
+export interface Props {
+  title: string;
+  events: TimelineEvent[];
+}
+
+const { title, events } = Astro.props;
+
+const bgColorMap = {
+  primary: 'bg-primary-500',
+  secondary: 'bg-secondary-500',
+  accent: 'bg-accent-500'
+};
+---
+
+<div class="card">
+  <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-6">
+    {title}
+  </h2>
+  <div class="space-y-8">
+    {events.map((event) => (
+      <div class="flex items-start space-x-4">
+        <div class={`flex-shrink-0 w-12 h-12 ${bgColorMap[event.color || 'primary']} rounded-full flex items-center justify-center text-white font-bold`}>
+          {event.year}
+        </div>
+        <div>
+          <h3 class="font-semibold text-slate-900 dark:text-slate-100">{event.title}</h3>
+          <p class="text-slate-600 dark:text-slate-400 text-sm">
+            {event.description}
+          </p>
+        </div>
+      </div>
+    ))}
+  </div>
+</div>

package/src/components/blog/FloatingToc.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="fixed top-24 right-4 z-40">
+    <!-- 触发按钮 -->
+    <div
+      class="relative"
+      @mouseenter="showToc = true"
+      @mouseleave="showToc = false"
+    >
+      <button
+        class="p-3 bg-white dark:bg-slate-800 rounded-full shadow-lg border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+        :class="{ 'bg-primary-50 dark:bg-primary-900/30': showToc }"
+        aria-label="显示目录"
+      >
+        <svg class="w-5 h-5 text-slate-600 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+        </svg>
+      </button>
+
+      <!-- 目录面板 -->
+      <transition
+        enter-active-class="transition ease-out duration-200"
+        enter-from-class="opacity-0 translate-x-2"
+        enter-to-class="opacity-100 translate-x-0"
+        leave-active-class="transition ease-in duration-150"
+        leave-from-class="opacity-100 translate-x-0"
+        leave-to-class="opacity-0 translate-x-2"
+      >
+        <div
+          v-if="showToc && headings.length > 0"
+          class="absolute top-0 right-14 w-72 max-h-[70vh] bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 overflow-hidden"
+        >
+          <!-- 标题 -->
+          <div class="px-4 py-3 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50">
+            <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-2">
+              <svg class="w-4 h-4 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+              </svg>
+              页面目录
+            </h3>
+          </div>
+
+          <!-- 目录列表 -->
+          <nav class="p-3 overflow-y-auto max-h-[calc(70vh-50px)]">
+            <ul class="space-y-1">
+              <li
+                v-for="heading in headings"
+                :key="heading.id"
+                :class="getIndentClass(heading.level)"
+              >
+                <a
+                  :href="`#${heading.id}`"
+                  @click.prevent="scrollToHeading(heading.id)"
+                  class="block px-3 py-2 text-sm rounded-lg transition-colors"
+                  :class="[
+                    activeId === heading.id
+                      ? 'bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 font-medium'
+                      : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700/50 hover:text-slate-900 dark:hover:text-slate-200'
+                  ]"
+                >
+                  <span class="line-clamp-2">{{ heading.text }}</span>
+                </a>
+              </li>
+            </ul>
+          </nav>
+
+          <!-- 进度条 -->
+          <div class="px-4 py-2 border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50">
+            <div class="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400 mb-1">
+              <span>阅读进度</span>
+              <span>{{ Math.round(progress * 100) }}%</span>
+            </div>
+            <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-1.5">
+              <div
+                class="bg-primary-500 h-1.5 rounded-full transition-all duration-300"
+                :style="{ width: `${progress * 100}%` }"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+
+interface Heading {
+  id: string
+  text: string
+  level: number
+}
+
+const showToc = ref(false)
+const headings = ref<Heading[]>([])
+const activeId = ref('')
+const progress = ref(0)
+
+// 获取缩进样式
+function getIndentClass(level: number): string {
+  switch (level) {
+    case 2: return 'pl-0'
+    case 3: return 'pl-3'
+    case 4: return 'pl-6'
+    default: return 'pl-0'
+  }
+}
+
+// 滚动到指定标题
+function scrollToHeading(id: string) {
+  const element = document.getElementById(id)
+  if (element) {
+    const offsetTop = element.offsetTop - 100
+    window.scrollTo({
+      top: offsetTop,
+      behavior: 'smooth'
+    })
+  }
+}
+
+// 提取页面标题（只提取文章内容区域中有 id 的标题）
+function extractHeadings() {
+  // 只选择 article 内有 id 属性的标题
+  const articleHeadings = document.querySelectorAll('article h2[id], article h3[id], article h4[id]')
+  headings.value = Array.from(articleHeadings)
+    .filter((heading) => heading.id) // 确保有 id
+    .map((heading) => ({
+      id: heading.id,
+      text: heading.textContent || '',
+      level: parseInt(heading.tagName.charAt(1))
+    }))
+}
+
+// 更新当前激活的标题
+function updateActiveHeading() {
+  const articleHeadings = document.querySelectorAll('article h2[id], article h3[id], article h4[id]')
+  let current = ''
+
+  articleHeadings.forEach((heading) => {
+    if (!heading.id) return
+    const rect = heading.getBoundingClientRect()
+    if (rect.top <= 120) {
+      current = heading.id
+    }
+  })
+
+  activeId.value = current
+}
+
+// 更新阅读进度
+function updateProgress() {
+  const article = document.querySelector('article')
+  if (!article) return
+
+  const articleTop = article.offsetTop
+  const articleHeight = article.offsetHeight
+  const windowTop = window.pageYOffset
+  const windowHeight = window.innerHeight
+
+  progress.value = Math.min(
+    Math.max((windowTop - articleTop + windowHeight / 2) / articleHeight, 0),
+    1
+  )
+}
+
+// 滚动处理
+let ticking = false
+function handleScroll() {
+  if (!ticking) {
+    requestAnimationFrame(() => {
+      updateActiveHeading()
+      updateProgress()
+      ticking = false
+    })
+    ticking = true
+  }
+}
+
+onMounted(() => {
+  extractHeadings()
+  updateActiveHeading()
+  updateProgress()
+  window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<style scoped>
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>