修改H1-H6和表格,strong字体

app/components/content/ProseH1.vue

@@ -1,7 +1,8 @@
 <template>
   <h1
     :id
-    class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
+    :class="['scroll-m-20 font-extrabold tracking-tight', themeSizeClass]"
+    :style="themeTextShadowStyle"
   >
     <NuxtLink
       v-if="generate"
@@ -18,4 +19,26 @@ const { id } = defineProps<{ id?: string }>()
 
 const { headings } = useRuntimeConfig().public.mdc
 const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h1)))
+
+// 读取主题，按主题做轻量风格差异：
+// - classic: 无阴影，正常字号
+// - elegant: 有文字阴影，正常字号
+// - minimal: 无阴影，较小字号
+const { selectedTheme } = useTheme()
+
+// 这个计算属性 themeSizeClass 用于根据当前主题（selectedTheme）动态设置 h1 标题的字号样式：
+// - 如果主题是 minimal，则使用较小字号 'text-2xl lg:text-3xl'
+// - 否则（classic 或 elegant），使用较大字号 'text-3xl lg:text-4xl'
+const themeSizeClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'text-2xl lg:text-3xl border-b border-gray-200 dark:border-gray-700'
+    : 'text-3xl lg:text-4xl'
+})
+
+const themeTextShadowStyle = computed(() => {
+  if (selectedTheme.value === 'elegant') {
+    return { textShadow: '0 2px 8px rgba(0,0,0,0.15)' }
+  }
+  return { textShadow: 'none' }
+})
 </script>

app/components/content/ProseH2.vue

@@ -1,11 +1,13 @@
 <template>
   <h2
     :id
-    class="scroll-m-20 border-b border-gray-200 dark:border-gray-700 pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10 mb-2"
+    :class="['scroll-m-20 inline-block text-white font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10 mb-2', themeSizeClass, themePaddingClass]"
+    :style="h2Style"
   >
     <NuxtLink
       v-if="id && generate"
       :to="`#${id}`"
+      class="no-underline"
     >
       <slot />
     </NuxtLink>
@@ -16,6 +18,37 @@
 <script setup lang="ts">
 const { id } = defineProps<{ id?: string }>()
 
+// 读取主题，用主题主色 + 圆角变量渲染带底色的 H2
+const { selectedTheme, selectedThemeColor, customColor, themeColors } = useTheme()
+
+// 这个计算属性 themeSizeClass 用于根据当前主题（selectedTheme）动态设置 h1 标题的字号样式：
+// - 如果主题是 minimal，则使用较小字号 'text-2xl lg:text-3xl'
+// - 否则（classic 或 elegant），使用较大字号 'text-3xl lg:text-4xl'
+const themeSizeClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'text-xl lg:text-1xl '
+    : 'text-1xl lg:text-2xl'
+})
+
+// 经典：更贴合文字（小内边距）；优雅/简洁：略大（更舒展）
+const themePaddingClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'px-1 py-0.5'
+    : 'px-5 py-2'
+})
+
 const { headings } = useRuntimeConfig().public.mdc
 const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
+
+// 背景颜色取主题主色；若为自定义颜色，则取 customColor
+const primaryHex = computed(() => {
+  if (selectedThemeColor.value === 'custom') return customColor.value
+  const found = themeColors.find(c => c.value === selectedThemeColor.value)
+  return found?.color || '#3B82F6' // fallback 经典蓝
+})
+
+const h2Style = computed(() => ({
+  backgroundColor: primaryHex.value,
+  borderRadius: 'var(--ui-card-radius)',
+}))
 </script>

app/components/content/ProseH3.vue

@@ -1,8 +1,16 @@
 <template>
   <h3
     :id
-    class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8 mb-3"
+    :class="['scroll-m-20 font-semibold tracking-tight [&:not(:first-child)]:mt-8 mb-3 flex items-center gap-2', themeSizeClass, themeDecorClass]"
+    :style="h3Style"
   >
+    <span
+      v-if="showLeadingLine"
+      aria-hidden="true"
+      class="inline-block"
+      :class="themeLineClass"
+      :style="lineStyle"
+    />
     <NuxtLink
       v-if="id && generate"
       :to="`#${id}`"
@@ -18,4 +26,65 @@ const { id } = defineProps<{ id?: string }>()
 
 const { headings } = useRuntimeConfig().public.mdc
 const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h3)))
+
+// 主题风格：
+// - classic：左侧竖线（主色），无额外背景
+// - elegant：底部虚线
+// - minimal：卡片式浅色主色背景 + 左侧竖线
+const { selectedTheme, selectedThemeColor, customColor, themeColors } = useTheme()
+
+const themeSizeClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'text-xl lg:text-1xl'
+    : 'text-1xl lg:text-2xl'
+})
+
+const isClassic = computed(() => selectedTheme.value === 'classic')
+const isElegant = computed(() => selectedTheme.value === 'elegant')
+const isMinimal = computed(() => selectedTheme.value === 'minimal')
+
+const showLeadingLine = computed(() => isClassic.value || isMinimal.value || isElegant.value)
+
+const primaryHex = computed(() => {
+  if (selectedThemeColor.value === 'custom') return customColor.value
+  const found = themeColors.find(c => c.value === selectedThemeColor.value)
+  return found?.color || '#3B82F6'
+})
+
+const themeDecorClass = computed(() => {
+  if (isElegant.value) return 'border-b border-dashed pb-1 border-primary dark:border-primary'
+  if (isMinimal.value) return 'px-3 py-2'
+  return ''
+})
+
+const themeLineClass = computed(() => {
+  return isClassic.value ? 'w-1 h-[0.9em]' : 'w-1 h-[1em]'
+})
+
+const lineStyle = computed(() => ({
+  backgroundColor: primaryHex.value,
+  borderRadius: '4px'
+}))
+
+function hexToRgba(hex: string, alpha: number): string {
+  const normalized = String(hex).replace('#', '')
+  const bigint = parseInt(normalized.length === 3
+    ? normalized.split('').map(ch => ch + ch).join('')
+    : normalized, 16)
+  const r = (bigint >> 16) & 255
+  const g = (bigint >> 8) & 255
+  const b = bigint & 255
+  return `rgba(${r}, ${g}, ${b}, ${Math.min(Math.max(alpha, 0), 1)})`
+}
+
+const h3Style = computed(() => {
+  if (isMinimal.value) {
+    return {
+      backgroundColor: hexToRgba(primaryHex.value, 0.08),
+      border: `1px solid ${hexToRgba(primaryHex.value, 0.2)}`,
+      borderRadius: 'var(--ui-card-radius)'
+    }
+  }
+  return {}
+})
 </script>

app/components/content/ProseH4.vue

@@ -1,7 +1,7 @@
 <template>
   <h4
     :id
-    class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6 mb-2"
+    :class="['scroll-m-20 font-semibold text-primary tracking-tight [&:not(:first-child)]:mt-6 mb-2', themeSizeClass]"
   >
     <NuxtLink
       v-if="id && generate"
@@ -18,4 +18,12 @@ const { id } = defineProps<{ id?: string }>()
 
 const { headings } = useRuntimeConfig().public.mdc
 const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h4)))
+
+const { selectedTheme } = useTheme()
+const themeSizeClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'text-xl lg:text-1xl'
+    : 'text-1xl lg:text-2xl'
+})
+
 </script>

app/components/content/ProseH5.vue

@@ -1,7 +1,7 @@
 <template>
   <h5
     :id
-    class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+    :class="['scroll-m-20 font-bold text-primary tracking-tight [&:not(:first-child)]:mt-6',themeSizeClass]"
   >
     <NuxtLink
       v-if="id && generate"
@@ -18,4 +18,12 @@ const { id } = defineProps<{ id?: string }>()
 
 const { headings } = useRuntimeConfig().public.mdc
 const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)))
+
+const { selectedTheme } = useTheme()
+const themeSizeClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'text-lg lg:text-xl'
+    : 'text-xl lg:text-1xl'
+})
+
 </script>

app/components/content/ProseH6.vue

@@ -1,7 +1,7 @@
 <template>
-  <h6
+  <h5
     :id
-    class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+    :class="['scroll-m-20 font-normal text-primary tracking-tight [&:not(:first-child)]:mt-6',themeSizeClass]"
   >
     <NuxtLink
       v-if="id && generate"
@@ -10,12 +10,20 @@
       <slot />
     </NuxtLink>
     <slot v-else />
-  </h6>
+  </h5>
 </template>
 
 <script setup lang="ts">
 const { id } = defineProps<{ id?: string }>()
 
 const { headings } = useRuntimeConfig().public.mdc
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h6)))
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)))
+
+const { selectedTheme } = useTheme()
+const themeSizeClass = computed(() => {
+  return selectedTheme.value === 'classic'
+    ? 'text-lg lg:text-xl'
+    : 'text-xl lg:text-1xl'
+})
+
 </script>

app/components/content/ProseStrong.vue

@@ -0,0 +1,5 @@
+<template>
+    <strong class="text-primary">
+        <slot />
+    </strong>
+</template>

app/components/content/ProseTable.vue

@@ -0,0 +1,15 @@
+<template>
+    <table>
+      <slot />
+    </table>
+  </template>
+
+<!-- <style scoped>
+/* 强化表头背景，仅此组件内生效 */
+table :deep(thead th) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.dark table :deep(thead th) {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+</style> -->

app/components/content/ProseTh.vue

@@ -0,0 +1,5 @@
+<template>
+    <th class=" bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 py-2">
+        <slot />
+    </th>
+</template>

app/components/content/ProseThead.vue

@@ -0,0 +1,5 @@
+<template>
+    <thead>
+      <slot />
+    </thead>
+  </template>