✨ 更新部分CSS 添加TS7.0依赖 有待配置

components/PageLogo.vue

@@ -3,7 +3,6 @@
 
 <template>
 <div>
-
 </div>
 </template>
 

components/PersonalCard.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { PostMetaData } from '~/types/PostMetaData';
+
+const props = withDefaults(defineProps<{
+  postsMetaData?: PostMetaData[];
+}>(), {
+  postsMetaData: () => [],
+});
+const emits = defineEmits<{
+  (event: 'filterRuleChange', rule: string): void;
+}>();
+const articleCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'article').length || 0);
+const announcementCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'announcement').length || 0);
+const ramblingCount = computed(() => props.postsMetaData?.filter((post) => !post.draft && post.type === 'rambling').length || 0);
+const countGroup = [
+  { name: '文章', count: articleCount, type: 'article' },
+  { name: '絮语', count: ramblingCount, type: 'rambling' },
+  { name: '公告', count: announcementCount, type: 'announcement' },
+];
+const categories = computed(() => {
+  const categoryMap = new Map<string, number>();
+  props.postsMetaData?.forEach((post) => {
+    if (post.category) {
+      categoryMap.set(post.category, (categoryMap.get(post.category) || 0) + 1);
+    }
+  });
+  return categoryMap;
+});
+let showType = '';
+
+function ruleChange(name: string) {
+  if (showType === name || name === '') {
+    showType = '';
+  } else {
+    showType = name;
+  }
+  emits('filterRuleChange', showType);
+}
+</script>
+
+<template>
+  <div class="transition-colors duration-500">
+    <div>
+      <div v-if="showType === ''" class="flex">
+        <div
+            v-for="data of countGroup"
+            :key="data.name"
+            class="flex items-center flex-col flex-1 text-xl cursor-pointer hover:text-sky-300 dark:hover:text-[#cccaff] transition-colors duration-300"
+            @click="ruleChange(data.type)"
+        >
+          <div>{{ data.name }}</div>
+          <div>{{ data.count }}</div>
+        </div>
+      </div>
+      <div v-else class="flex items-center hover:text-sky-300 dark:hover:text-[#cccaff] transition-colors duration-300" @click="ruleChange('')">
+        <div class="flex-1 text-2xl flex items-center justify-center">
+          <div>{{ countGroup.filter((x) => x.type === showType)[0].name }}</div>
+        </div>
+        <div class="flex-1 text-2xl flex items-center justify-center">
+          <div class="pr-8">{{ countGroup.filter((x) => x.type === showType)[0].count }}</div>
+        </div>
+<!--        <Icon-->
+<!--            name="mingcute:back-line" class="flex-1 text-5xl cursor-pointer dark:hover:text-[#cccaff] hover:text-sky-300 transition-colors duration-300"-->
+<!--            @click="ruleChange('')"/>-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

components/ReadonlyMdEditor.vue

@@ -17,14 +17,13 @@ const { colorMode } = storeToRefs(useColorModeStore());
 </script>
 
 <template>
-  <div class="p-5 pt-0 bg-old-neutral-200 dark:bg-old-neutral-800">
-    <MdPreview :editor-id="editorId" :theme="colorMode" :model-value="eraseHeaderMarkdown" class="transition-all duration-500"/>
+  <div class="pt-0 bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500">
+    <MdPreview :editor-id="editorId" :theme="colorMode" :model-value="eraseHeaderMarkdown" class="transition-all duration-500 max-w-full"/>
   </div>
-
 </template>
 
 <style scoped>
-:global(.md-editor) {
+:deep(.md-editor) {
   --md-bk-color: #e5e5e5;
   --md-theme-heading-1-color: #fff;
   transition-property: all;
@@ -32,6 +31,24 @@ const { colorMode } = storeToRefs(useColorModeStore());
   --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
 }
+:deep(.md-editor-preview blockquote) {
+  transition-property: all;
+  transition-duration: 500ms;
+  --tw-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+}
+
+:deep(.md-editor-preview .md-editor-code .md-editor-code-head) {
+  z-index: 5;
+}
+
+:deep(ul) {
+  list-style-type: disc;
+}
+
+:deep(ol) {
+  list-style-type: decimal;
+}
 
 :global(.dark .md-editor) {
   --md-bk-color: #262626;
@@ -40,4 +57,5 @@ const { colorMode } = storeToRefs(useColorModeStore());
 :global(.dark .md-editor-preview) {
   --md-color: var(--ui-text);
 }
+
 </style>