@velonor/theme 1.0.0

package/src/components/Categories.vue

@@ -0,0 +1,84 @@
+<template>
+  <ThemeLayout>
+    <div
+      class="flex w-full flex-col bg-opacity-85 backdrop-blur-md dark:shadow-none shadow-lg border-2 border-[var(--blog-border-c)] bg-[var(--vp-c-blog-bg)] rounded-2xl py-10 px-6 md:px-10 gap-8">
+      <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
+        <div class="flex flex-col gap-2">
+          <div class="text-3xl md:text-4xl font-bold tracking-tight">{{ categoriesText }}</div>
+          <div class="text-sm opacity-70">
+            {{ totalPosts }} {{ postsText }}  {{ uniqueCategoryCount }} {{ categoriesText }}
+          </div>
+        </div>
+        <div class="flex items-center gap-2 text-xs">
+          <span class="px-3 py-1 rounded-full border border-[var(--blog-border-c)] bg-[var(--vp-c-bg)]/60">
+            {{ ActiveCategory ? ActiveCategory : allText }}
+          </span>
+          <a v-if="blogHomeLink" :href="withBase(blogHomeLink)"
+            class="px-3 py-1 rounded-full border border-[var(--blog-border-c)]/70 bg-[var(--vp-c-bg)]/40 hover:bg-[var(--vp-c-bg)]/60 transition">
+            {{ backToBlogText }}
+          </a>
+        </div>
+      </div>
+
+      <!-- categories list -->
+      <div class="flex justify-left items-center flex-wrap md:mx-2 md:gap-3 gap-2">
+        <button v-for="categoryItem in categoryArray" :key="categoryItem[0]"
+          class="px-3 py-1 rounded-full cursor-pointer border text-sm transition duration-150 ease-out hover:-translate-y-0.5 hover:shadow-sm"
+          :class="{
+            'bg-[var(--blog-tag-bg-2)] text-[var(--blog-tag-text-2)] border-[var(--blog-tag-text-2)]': ActiveCategory == categoryItem[0],
+            'bg-[var(--blog-tag-bg-1)] text-[var(--blog-tag-text-1)] border-[var(--blog-tag-text-1)]': ActiveCategory != categoryItem[0]
+          }" @click="ActiveCategory = categoryItem[0]">
+          <span>{{ categoryItem[0] == '' ? allText : categoryItem[0] }}</span>
+          <span class="ml-2 opacity-70"> {{ categoryItem[1] }}</span>
+        </button>
+      </div>
+
+      <div class="w-full border-dashed border-t-2 border-[var(--blog-border-c)]"></div>
+
+      <!-- posts with categories -->
+      <div class="flex justify-center flex-col gap-6 md:gap-5">
+        <div
+          class="flex items-center gap-3 flex-col md:flex-row md:gap-12 md:justify-between rounded-xl px-4 py-3 border border-transparent hover:border-[var(--blog-border-c)] hover:bg-[var(--vp-c-bg)]/40 transition"
+          v-for="post in filteredList" :key="post.url">
+          <a :href="withBase(post.url)" class="hover:underline text-base font-medium">
+            {{ post.frontmatter.title }}
+          </a>
+          <div class="flex justify-end items-end gap-2 flex-wrap">
+            <span class="text-xs px-2 py-0.5 rounded-full border bg-[var(--blog-tag-bg-1)] text-[var(--blog-tag-text-1)] border-[var(--blog-tag-text-1)]"
+              v-for="(tag, idx) in post.frontmatter.tags" :key="`${post.url}-tag-${idx}`">
+              {{ tag }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ThemeLayout>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { withBase, useData } from 'vitepress';
+import ThemeLayout from './ThemeLayout.vue';
+import { getLocalizedString } from '@velonor/engine';
+import { useCategories } from '../composables/useCategories';
+import { data as pageLinks } from '../page-links.data';
+import { data as categoriesIndex } from '../categories.data';
+
+const { lang, theme } = useData();
+const allText = computed(() => getLocalizedString('all', lang.value));
+const categoriesText = computed(() => getLocalizedString('category', lang.value));
+const postsText = computed(() => getLocalizedString('posts', lang.value));
+const backToBlogText = computed(() => getLocalizedString('backToBlog', lang.value));
+const blogHomeLink = computed(() => theme.value.blog?.homePageLink || pageLinks?.blog || '/page/blog');
+
+const { activeCategory: ActiveCategory, getCategoryArray, filterPostsByActiveCategory, uniqueCategoryCount: uniqueCategoryCountRaw, categoriesMap } = useCategories({
+  otherLabel: getLocalizedString('other', lang.value),
+});
+
+const categoryArray = computed(() => categoriesIndex.categoryArray || getCategoryArray());
+const totalPosts = computed(() => categoriesIndex.totalPosts ?? (categoriesMap.value[''] || 0));
+const uniqueCategoryCount = computed(() => categoriesIndex.uniqueCategoryCount ?? uniqueCategoryCountRaw.value);
+
+const filteredList = computed(() => filterPostsByActiveCategory());
+</script>
+

package/src/components/Comment.vue

@@ -0,0 +1,25 @@
+<template>
+    <!-- giscus评论 -->
+    <div class="comment mt-5 opacity-80" v-if="useComment && refreshFlag">
+        <Giscus v-if="CommentConfig" :repo="CommentConfig.repo" :repo-id="CommentConfig.repoId"
+            :category="CommentConfig.category" :category-id="CommentConfig.categoryId" :mapping="CommentConfig.mapping"
+            :strict="CommentConfig.strict" :reactions-enabled="CommentConfig.reactionsEnabled"
+            :emit-metadata="CommentConfig.emitMetadata" :input-position="CommentConfig.inputPosition"
+            :lang="CommentConfig.lang" :theme="commentTheme" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import Giscus from '@giscus/vue';
+import { useData } from 'vitepress';
+import { useRefreshOnRouteChange } from '../composables/useRefreshOnRouteChange';
+import { computed } from 'vue';
+const { frontmatter, isDark, theme } = useData<Open17Config>();
+const CommentConfig = theme.value.comment;
+const { refreshFlag } = useRefreshOnRouteChange();
+const useComment = computed(() => {
+    if (frontmatter.value.comment === false) return false;
+    return theme.value.comment?.use || frontmatter.value.comment !== undefined;
+});
+const commentTheme = computed(() => (isDark.value ? 'dark_tritanopia' : 'light_tritanopia'));
+</script>

package/src/components/Tags.vue

@@ -0,0 +1,105 @@
+<template>
+  <ThemeLayout>
+    <div
+      class="flex w-full flex-col bg-opacity-85 backdrop-blur-md dark:shadow-none shadow-lg border-2 border-[var(--blog-border-c)] bg-[var(--vp-c-blog-bg)] rounded-2xl py-10 px-6 md:px-10 gap-8">
+      <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
+        <div class="flex flex-col gap-2">
+          <div class="text-3xl md:text-4xl font-bold tracking-tight">{{ tagsText }}</div>
+          <div class="text-sm opacity-70">
+            {{ totalPosts }} {{ postsText }}  {{ uniqueTagCount }} {{ tagsText }}
+          </div>
+        </div>
+        <div class="flex items-center gap-2 text-xs">
+          <span class="px-3 py-1 rounded-full border border-[var(--blog-border-c)] bg-[var(--vp-c-bg)]/60">
+            {{ activeLabel }}
+          </span>
+          <a v-if="blogHomeLink" :href="withBase(blogHomeLink)"
+            class="px-3 py-1 rounded-full border border-[var(--blog-border-c)]/70 bg-[var(--vp-c-bg)]/40 hover:bg-[var(--vp-c-bg)]/60 transition">
+            {{ backToBlogText }}
+          </a>
+        </div>
+      </div>
+
+      <!-- tags list -->
+      <div class="flex justify-left items-center flex-wrap md:mx-2 md:gap-3 gap-2">
+        <button v-for="tagItem in tagArray" :key="tagItem[0]"
+          class="px-3 py-1 rounded-full cursor-pointer border text-sm transition duration-150 ease-out hover:-translate-y-0.5 hover:shadow-sm"
+          :class="{
+            'bg-[var(--blog-tag-bg-2)] text-[var(--blog-tag-text-2)] border-[var(--blog-tag-text-2)]': isTagSelected(tagItem[0]),
+            'bg-[var(--blog-tag-bg-1)] text-[var(--blog-tag-text-1)] border-[var(--blog-tag-text-1)]': !isTagSelected(tagItem[0])
+          }" @click="toggleTag(tagItem[0])">
+          <span>{{ tagItem[0] == '' ? allText : tagItem[0] }}</span>
+          <span class="ml-2 opacity-70"> {{ tagItem[1] }}</span>
+        </button>
+      </div>
+
+      <div class="w-full border-dashed border-t-2 border-[var(--blog-border-c)]"></div>
+
+      <!-- posts with tags -->
+      <div class="flex justify-center flex-col gap-6 md:gap-5">
+        <div
+          class="flex items-center gap-3 flex-col md:flex-row md:gap-12 md:justify-between rounded-xl px-4 py-3 border border-transparent hover:border-[var(--blog-border-c)] hover:bg-[var(--vp-c-bg)]/40 transition"
+          v-for="post in filteredList" :key="post.url">
+          <a :href="withBase(post.url)" class="hover:underline text-base font-medium">
+            {{ post.frontmatter.title }}
+          </a>
+          <div class="flex justify-end items-end gap-2 flex-wrap">
+            <span class="cursor-pointer text-xs px-2 py-0.5 rounded-full border" :class="{
+              'bg-[var(--blog-tag-bg-2)] text-[var(--blog-tag-text-2)] border-[var(--blog-tag-text-2)]': isTagSelected(tag),
+              'bg-[var(--blog-tag-bg-1)] text-[var(--blog-tag-text-1)] border-[var(--blog-tag-text-1)]': !isTagSelected(tag)
+            }" v-for="(tag, idx) in post.frontmatter.tags" :key="`${post.url}-tag-${idx}`"
+              @click="toggleTag(tag)">
+              {{ tag }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ThemeLayout>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { withBase, useData } from 'vitepress';
+import ThemeLayout from './ThemeLayout.vue';
+import { getLocalizedString } from '@velonor/engine';
+import { useTagFilter } from '../composables/useTagFilter';
+import { data as pageLinks } from '../page-links.data';
+import { data as tagIndex } from '../tags.data';
+
+const { lang, theme } = useData();
+const allText = computed(() => getLocalizedString('all', lang.value));
+const tagsText = computed(() => getLocalizedString('tags', lang.value));
+const postsText = computed(() => getLocalizedString('posts', lang.value));
+const backToBlogText = computed(() => getLocalizedString('backToBlog', lang.value));
+const blogHomeLink = computed(() => theme.value.blog?.homePageLink || pageLinks?.blog || '/page/blog');
+
+const {
+  selectedTags,
+  getTagArray,
+  uniqueTagCount: uniqueTagCountRaw,
+  tagsMap,
+  filterPostsByActiveTag,
+  toggleTag,
+  isTagSelected,
+} = useTagFilter();
+
+const tagArray = computed(() => tagIndex.tagArray || getTagArray());
+const totalPosts = computed(() => tagIndex.totalPosts ?? (tagsMap.value[''] || 0));
+const uniqueTagCount = computed(() => tagIndex.uniqueTagCount ?? uniqueTagCountRaw.value);
+
+const activeLabel = computed(() => {
+  if (!selectedTags.value.length) return allText.value;
+  return selectedTags.value.join(' / ');
+});
+
+const filteredList = computed(() => {
+  const allPosts = filterPostsByActiveTag('');
+  if (!selectedTags.value.length) return allPosts;
+  return allPosts.filter((item) => {
+    const tags = item.frontmatter.tags || [];
+    return selectedTags.value.some((tag) => tags.includes(tag));
+  });
+});
+</script>
+

package/src/components/ThemeLayout.vue

@@ -0,0 +1,215 @@
+<script setup>
+import { useData } from 'vitepress';
+import { computed, watch, ref } from 'vue';
+import UserCard from './UserCard.vue';
+import WidgetCard from './WidgetCard.vue';
+import UpdateHeatmap from './UpdateHeatmap.vue';
+import { getLocalizedString } from '@velonor/engine';
+import { useTagFilter } from '../composables/useTagFilter';
+import { useCategories } from '../composables/useCategories';
+import { data as pageLinks } from '../page-links.data';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps({
+  showContent: Boolean,
+});
+
+const { theme, lang, frontmatter } = useData();
+
+const blogConfig = computed(() => theme.value.blog || {});
+const direct = computed(() => blogConfig.value.direct || 'lft');
+const isBlogHome = computed(() => frontmatter.value?.layout === 'blog');
+const resolvedTagPageLink = computed(
+  () => blogConfig.value.tagPageLink || pageLinks?.tags || ''
+);
+const resolvedArchivePageLink = computed(
+  () => blogConfig.value.archivePageLink || pageLinks?.archive || ''
+);
+const resolvedCategoryPageLink = computed(
+  () => blogConfig.value.categoryPageLink || pageLinks?.categories || ''
+);
+
+const {
+  selectedTags,
+  getTagArray,
+  addTag,
+  removeTag,
+  setSelectedTags,
+} = useTagFilter();
+const { activeCategory, getCategoryArray, filterPostsByActiveCategory } = useCategories({
+  otherLabel: getLocalizedString('other', lang.value),
+});
+
+const allText = computed(() => getLocalizedString('all', lang.value));
+
+const tagQuery = ref('');
+
+const tagSuggestions = computed(() => {
+  const query = tagQuery.value.trim().toLowerCase();
+  if (!query) return [];
+  return getTagArray()
+    .filter(([name]) => name && name.toLowerCase().includes(query))
+    .filter(([name]) => !selectedTags.value.includes(name))
+    .slice(0, 12);
+});
+
+const displayedTags = computed(() => {
+  if (tagQuery.value.trim()) return tagSuggestions.value;
+  return [];
+});
+
+const addTagFromQuery = () => {
+  const query = tagQuery.value.trim();
+  if (!query) return;
+  const lower = query.toLowerCase();
+  const match = getTagArray().find(([name]) => name.toLowerCase() === lower);
+  const target = match?.[0] || tagSuggestions.value[0]?.[0];
+  if (!target) return;
+  addTag(target);
+  tagQuery.value = '';
+};
+
+watch(
+  activeCategory,
+  (newCat) => {
+    if (!selectedTags.value.length) return;
+    const postsInCategory = filterPostsByActiveCategory(newCat);
+    const allowed = new Set();
+    postsInCategory.forEach((post) => {
+      const tags = post.frontmatter.tags || [];
+      tags.forEach((tag) => allowed.add(tag));
+    });
+    const nextTags = selectedTags.value.filter((tag) => allowed.has(tag));
+    if (nextTags.length !== selectedTags.value.length) {
+      setSelectedTags(nextTags);
+    }
+  },
+  { immediate: true }
+);
+
+
+watch(
+  selectedTags,
+  (tags) => {
+    if (!activeCategory.value) return;
+    if (!tags.length) return;
+    const postsInCategory = filterPostsByActiveCategory(activeCategory.value);
+    const tagExistsInCategory = tags.some((tag) =>
+      postsInCategory.some((p) => p.frontmatter.tags && p.frontmatter.tags.includes(tag))
+    );
+    if (!tagExistsInCategory) {
+      activeCategory.value = '';
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="w-full flex justify-center">
+    <div class="flex w-full max-w-screen-2xl justify-center items-start pt-0 my-0 gap-5 md:px-20 flex-col-reverse"
+      :class="{
+        'md:flex-row': direct == 'lft',
+        'md:flex-row-reverse': direct == 'rgt',
+      }">
+      <!-- 博客侧边栏 -->
+      <div class="flex bg-transparent w-full md:w-[23%] md:max-w-[23%] md:flex-none md:shrink-0 min-w-0 justify-center items-start pt-16 pb-12 flex-col gap-5"
+        v-if="!blogConfig.pureMode">
+        <!-- 电脑端个人信息 -->
+        <UserCard :isMobile="false" />
+
+        <!-- 侧边栏Category -->
+        <div v-if="isBlogHome"
+          class="flex w-full md:rounded-2xl px-5 py-5 flex-col justify-center gap-3 dark:shadow-none shadow-lg border-2 border-[var(--blog-border-c)] bg-[var(--vp-c-blog-bg)]/95 backdrop-blur-md">
+          <div class="flex items-center justify-between text-xs uppercase tracking-wider opacity-70">
+            <span>{{ getLocalizedString('category', lang) || 'Category' }}</span>
+            <div class="flex items-center gap-2">
+              <a v-if="resolvedCategoryPageLink" :href="resolvedCategoryPageLink"
+                class="normal-case text-xs opacity-70 hover:opacity-100 transition">
+                {{ getLocalizedString('details', lang) || 'Details' }}
+              </a>
+              <span class="px-2 py-0.5 rounded-full border border-[var(--blog-border-c)]/70">
+                {{ getCategoryArray().length - 1 }}
+              </span>
+            </div>
+          </div>
+          <div class="flex justify-start items-center flex-wrap gap-2 pt-1">
+            <div v-for="(cat, i) in getCategoryArray()" :key="cat[0]" class="cursor-pointer relative mt-1"
+              @click="activeCategory = cat[0]">
+              <div class="text-xs px-3 py-0.5 rounded-full border border-dashed transition hover:-translate-y-0.5" :class="{
+                'bg-[var(--blog-tag-bg-2)] text-[var(--blog-tag-text-2)] border-[var(--blog-tag-text-2)]': activeCategory === cat[0],
+                'bg-[var(--blog-tag-bg-1)] text-[var(--blog-tag-text-1)] border-[var(--blog-tag-text-1)]': activeCategory !== cat[0]
+              }">
+                {{ cat[0] == '' ? allText : cat[0] }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 侧边栏Tag -->
+        <div v-if="isBlogHome"
+          class="flex w-full md:rounded-2xl px-5 py-5 flex-col justify-center gap-3 dark:shadow-none shadow-lg border-2 border-[var(--blog-border-c)] bg-[var(--vp-c-blog-bg)]/95 backdrop-blur-md">
+          <!-- Tags -->
+          <div class="flex items-center justify-between text-xs uppercase tracking-wider opacity-70">
+            <span>{{ getLocalizedString('tags', lang) || 'Tags' }}</span>
+            <div class="flex items-center gap-2">
+              <a v-if="resolvedTagPageLink" :href="resolvedTagPageLink"
+                class="normal-case text-xs opacity-70 hover:opacity-100 transition">
+                {{ getLocalizedString('details', lang) || 'Details' }}
+              </a>
+              <span class="px-2 py-0.5 rounded-full border border-[var(--blog-border-c)]/70">
+                {{ getTagArray().length - 1 }}
+              </span>
+            </div>
+          </div>
+          <input
+            v-model="tagQuery"
+            type="text"
+            class="w-full h-8 border border-[var(--blog-border-c)]/70 rounded-md bg-[var(--vp-c-bg)]/60 px-2 text-xs outline-none focus:border-[var(--vp-c-brand-2)]"
+            :placeholder="(getLocalizedString('tags', lang) || 'Tags') + '...'"
+            @keydown.enter.prevent="addTagFromQuery"
+          />
+          <div class="flex justify-start items-center flex-wrap gap-2 pt-1">
+            <div v-for="tag in selectedTags" :key="tag"
+              class="flex items-center gap-1 text-xs px-2.5 py-0.5 rounded-full border border-solid bg-[var(--blog-tag-bg-2)] text-[var(--blog-tag-text-2)] border-[var(--blog-tag-text-2)]">
+              <span>{{ tag }}</span>
+              <button type="button" class="ml-0.5 opacity-70 hover:opacity-100" @click.stop="removeTag(tag)">x</button>
+            </div>
+          </div>
+          <div v-if="displayedTags.length" class="flex justify-start items-center flex-wrap gap-2 pt-1">
+            <button v-for="(tag, i) in displayedTags" :key="tag[0]"
+              class="text-xs px-2.5 py-0.5 rounded-full border border-dashed transition hover:-translate-y-0.5 bg-[var(--blog-tag-bg-1)] text-[var(--blog-tag-text-1)] border-[var(--blog-tag-text-1)]"
+              @click="addTag(tag[0]); tagQuery = '';">
+              + {{ tag[0] }}
+            </button>
+          </div>
+        </div>
+        <!-- 用户自定义组件 -->
+        <UpdateHeatmap
+          :archiveLink="resolvedArchivePageLink"
+          :archiveLabel="getLocalizedString('details', lang) || 'Details'"
+          :titleLabel="getLocalizedString('activity', lang) || 'Activity'"
+        />
+        <WidgetCard />
+      </div>
+      <!-- 博客文章 -->
+      <div class="flex md:w-[77%] md:max-w-[77%] md:flex-none md:shrink-0 py-20 justify-center items-center gap-5 flex-col w-full px-3">
+        <slot :selectedTags="selectedTags" :activeCategory="activeCategory" />
+      </div>
+      <!-- 移动端个人信息显示 -->
+      <UserCard :isMobile="true" />
+    </div>
+    <Content v-if="showContent" />
+  </div>
+</template>
+
+<style>
+.blog-home .VPContent {
+  padding-top: 0 !important;
+}
+
+.shadow-0 {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>
+

package/src/components/UpdateHeatmap.vue

@@ -0,0 +1,128 @@
+<template>
+  <div
+    class="flex w-full md:rounded-2xl px-5 py-5 flex-col justify-center gap-3 dark:shadow-none shadow-lg border-2 border-[var(--blog-border-c)] bg-[var(--vp-c-blog-bg)]/95 backdrop-blur-md">
+    <div class="flex items-center justify-between text-xs uppercase tracking-wider opacity-70">
+      <span class="text-[12px] opacity-90 normal-case tracking-normal">{{ titleLabel }}</span>
+      <a v-if="archiveLink" :href="archiveLink"
+        class="px-2.5 py-0.5 rounded-full border border-[var(--blog-border-c)]/70 bg-[var(--vp-c-bg)]/40 hover:bg-[var(--vp-c-bg)]/60 transition normal-case text-[11px]">
+        {{ archiveLabel }}
+      </a>
+    </div>
+    <div class="grid gap-2">
+      <div class="flex justify-center">
+        <div class="grid grid-flow-col grid-rows-7 auto-cols-[10px] gap-1">
+          <div
+            v-for="day in days"
+            :key="day.key"
+            class="w-[10px] h-[10px] rounded-[3px] transition"
+            :style="levelStyle(day.count, day.inRange)"
+            :title="`${day.key} · ${day.count}`"
+          />
+        </div>
+      </div>
+      <div class="flex items-center justify-between text-[11px] opacity-70">
+        <span>{{ recentLabel }}</span>
+        <div class="flex items-center gap-1">
+          <span>Less</span>
+          <span class="w-[10px] h-[10px] rounded-[3px]" :style="legendStyle(0)"></span>
+          <span class="w-[10px] h-[10px] rounded-[3px]" :style="legendStyle(1)"></span>
+          <span class="w-[10px] h-[10px] rounded-[3px]" :style="legendStyle(2)"></span>
+          <span class="w-[10px] h-[10px] rounded-[3px]" :style="legendStyle(3)"></span>
+          <span class="w-[10px] h-[10px] rounded-[3px]" :style="legendStyle(4)"></span>
+          <span>More</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useData } from 'vitepress';
+import { parseDateValue } from '@velonor/engine';
+import { data as posts } from '../posts.data.js';
+
+const props = defineProps({
+  archiveLink: {
+    type: String,
+    default: '',
+  },
+  archiveLabel: {
+    type: String,
+    default: '',
+  },
+  titleLabel: {
+    type: String,
+    default: 'Activity',
+  },
+});
+
+const { lang } = useData();
+
+const today = new Date();
+today.setHours(0, 0, 0, 0);
+
+const endDate = new Date(today);
+const startDate = new Date(today);
+startDate.setDate(today.getDate() - 59);
+
+const totalDays = 60;
+
+const recentLabel = computed(() => {
+  const isZh = (lang.value || '').startsWith('zh');
+  return isZh ? `近 ${totalDays} 天` : `Last ${totalDays} days`;
+});
+
+const formatKey = (date) => {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
+const counts = computed(() => {
+  const map = new Map();
+  posts.forEach((post) => {
+    const time = parseDateValue(post.frontmatter.date);
+    if (!time) return;
+    const date = new Date(time);
+    date.setHours(0, 0, 0, 0);
+    const key = formatKey(date);
+    map.set(key, (map.get(key) || 0) + 1);
+  });
+  return map;
+});
+
+const days = computed(() => {
+  const list = [];
+  for (let i = 0; i < totalDays; i += 1) {
+    const date = new Date(startDate);
+    date.setDate(startDate.getDate() + i);
+    const key = formatKey(date);
+    const count = counts.value.get(key) || 0;
+    const inRange = date >= startDate && date <= endDate;
+    list.push({ key, date, count, inRange });
+  }
+  return list;
+});
+
+const levelColor = (level) => {
+  const stops = [10, 28, 50, 75, 92];
+  const ratio = stops[Math.min(level, stops.length - 1)];
+  return `color-mix(in srgb, var(--vp-c-brand-1) ${ratio}%, transparent)`;
+};
+
+const levelStyle = (count, inRange) => {
+  if (!inRange) return { backgroundColor: levelColor(0) };
+  if (count <= 0) return { backgroundColor: levelColor(0) };
+  if (count === 1) return { backgroundColor: levelColor(1) };
+  if (count === 2) return { backgroundColor: levelColor(2) };
+  if (count === 3) return { backgroundColor: levelColor(3) };
+  return { backgroundColor: levelColor(4) };
+};
+
+const legendStyle = (level) => ({
+  backgroundColor: levelColor(level),
+});
+</script>
+

package/src/components/UserCard.vue

@@ -0,0 +1,61 @@
+<template>
+    <!-- 电脑端 -->
+    <div class="hidden md:flex w-full md:rounded-2xl p-6 flex-col justify-center items-center gap-2 dark:shadow-none shadow-lg border-2 border-[var(--blog-border-c)] bg-[var(--vp-c-blog-bg)]/95 backdrop-blur-md"
+        v-if="!props.isMobile && !userConfig?.hidden">
+        <!-- Avatar -->
+        <img :src="userConfig?.avatar" v-if="userConfig?.avatar" alt="avatar"
+            class="object-cover object-center w-24 h-24 rounded-full ring-2 ring-[var(--blog-border-c)]" />
+        <div class="mt-3" v-else></div>
+        <!-- Name -->
+        <div class="text-lg font-semibold text-center mt-2 tracking-tight">
+            {{ userConfig?.name }}
+        </div>
+        <!-- Description -->
+        <div class="text-center text-xs opacity-75 leading-relaxed">{{ userConfig?.describe }}</div>
+        <!-- Stats -->
+        <div class="flex justify-center items-center gap-12 w-full border-t-2 mt-3 border-[var(--blog-border-c)]/70">
+            <div class="flex flex-col justify-center items-center gap-1">
+                <div class="text-[10px] uppercase tracking-wider opacity-70">{{ postsText }}</div>
+                <div class="text-xl font-semibold">{{ posts.length }}</div>
+            </div>
+            <div class="flex flex-col justify-center items-center gap-1">
+                <div class="text-[10px] uppercase tracking-wider opacity-70">{{ tagsText }}</div>
+                <div class="text-xl font-semibold">{{ uniqueTagCount }}</div>
+            </div>
+        </div>
+    </div>
+    <!-- 移动端个人信息显示 -->
+    <div class="flex md:hidden justify-center items-center w-full mt-8 flex-col gap-3" v-else-if="!userConfig?.hidden">
+        <img :src="userConfig?.avatar" v-if="userConfig?.avatar" alt="avatar"
+            class="object-cover object-center w-32 rounded-full" />
+        <!-- 昵称 -->
+        <div class="text-2xl font-bold text-center">{{ userConfig?.name }}</div>
+        <!-- 签名 -->
+        <div class="text-center text-sm">{{ userConfig?.describe }}</div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+// TODO 待优化
+// @ts-ignore
+import { data as posts } from '../posts.data.js';
+
+import { useData } from 'vitepress';
+import { computed } from 'vue';
+import { getLocalizedString } from '../utils/constants';
+import { useTags } from '../composables/useTags';
+
+const { theme, lang } = useData<Open17Config>();
+
+const userConfig = theme.value.blog ? theme.value.blog.user : null;
+
+const { uniqueTagCount } = useTags();
+
+const postsText = computed(() => getLocalizedString('posts', lang.value));
+const tagsText = computed(() => getLocalizedString('tags', lang.value));
+
+const props = defineProps<{
+    isMobile: Boolean
+}>();
+</script>

package/src/components/WidgetCard.vue

@@ -0,0 +1,26 @@
+<template>
+    <div v-for="widget in widgets"
+        class="flex w-full min-w-0 md:rounded-2xl flex-col py-5 justify-center gap-4 dark:shadow-none shadow-lg border-2 border-[var(--blog-border-c)] bg-[var(--vp-c-blog-bg)]/95 backdrop-blur-md overflow-hidden">
+        <div class="flex w-full justify-between items-center px-5">
+            <div class="text-base font-bold tracking-tight" v-if="widget.name">
+                {{ widget.name }}
+            </div>
+            <a v-if="widget.link" :href="widget.link" class="opacity-70 hover:opacity-100 transition">
+                <IconLink />
+            </a>
+        </div>
+        <div v-html="widget.html"
+            class="w-full min-w-0 max-w-full relative px-5 pb-2 text-sm leading-relaxed overflow-hidden break-words"></div>
+    </div>
+</template>
+
+
+<script lang="ts" setup>
+import IconLink from './icon/IconLink.vue';
+import { useData } from 'vitepress';
+const { theme, frontmatter } = useData<Open17Config>();
+const widgets = [
+    ...(theme.value.blog?.widgets || []),
+    ...(frontmatter.value.widgets || []),
+];
+</script>

package/src/components/icon/IconLink.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-5 h-5"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+    />
+  </svg>
+</template>