修改样式

app/app.config.ts

@@ -77,5 +77,74 @@ export default defineAppConfig({
     name: 'estel_docs',
     branch: 'main',
     rootDir: ''
+  },
+  uiPro: {
+    prose: {
+      code: {
+        base: 'px-1.5 py-0.5 text-sm font-mono font-medium rounded-md inline-block',
+        variants: {
+          color: {
+            new: 'border border-muted text-base font-medium bg-muted bg-gray-100 dark:bg-gray-800 text-[#DD1144]'
+          }
+        },
+        defaultVariants: {
+          color: 'new'
+        }
+      },
+      pre: {
+        slots: {
+          root: 'relative my-5 group',
+          header: 'flex items-center gap-1.5 border border-muted bg-default border-b-0 relative rounded-t-md px-4 py-3',
+          filename: 'text-default text-sm/6',
+          icon: 'size-5 shrink-0',
+          copy: 'absolute top-[11px] right-[11px] transition',
+          base: 'group font-mono text-sm/6 border border-muted bg-gray-100 dark:bg-gray-800 rounded-md px-4 py-3 whitespace-pre-wrap break-words overflow-x-auto focus:outline-none'
+        }
+      },
+      codeIcon: {
+        terminal: 'i-lucide-terminal',
+        code:'vscode-icons:file-type-codekit',
+      },
+      codeCollapse: {
+        slots: {
+          root: 'relative [&_pre]:h-[350px]',
+          footer: 'h-14 absolute inset-x-px bottom-px rounded-b-md flex items-center justify-center',
+          trigger: 'group',
+          triggerIcon: 'group-data-[state=open]:rotate-180',
+        },
+        variants: {
+          open: {
+            true: {
+              root: '[&_pre]:h-auto [&_pre]:min-h-[200px] [&_pre]:max-h-[80vh] [&_pre]:pb-12'
+            },
+            false: {
+              root: '[&_pre]:overflow-hidden',
+              footer: 'bg-gradient-to-t from-muted'
+            }
+          }
+        }
+      },
+      table: {
+        slots: {
+          root: 'relative my-5 overflow-x-auto mx-auto',
+          base: 'w-auto table-auto border-separate border-spacing-0 rounded-md'
+        }
+      },
+      thead: {
+        base: 'bg-muted'
+      },
+      tbody: {
+        base: ''
+      },
+      tr: {
+        base: '[&:first-child>th:first-child]:rounded-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-md'
+      },
+      th: {
+        base: 'py-3 px-4 font-semibold text-base text-left border-e border-b first:border-s border-t border-muted bg-gray-200 dark:bg-gray-800'
+      },
+      td: {
+        base: 'py-3 px-4 text-sm text-left align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5'
+      }
+    }
   }
 })

app/components/content/ProseH1.vue

@@ -31,7 +31,7 @@ const { selectedTheme } = useTheme()
 // - 否则（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-2xl lg:text-3xl underline decoration-3 decoration-primary dark:decoration-gray-700 underline-offset-8 mb-3'
     : 'text-3xl lg:text-4xl'
 })
 

app/components/content/ProseTable.vue

@@ -1,15 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-<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

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

app/pages/blog/[...slug].vue

@@ -114,7 +114,7 @@ const links = computed(() => {
       }"
     >
       <span
-        v-if="page"
+        v-if="page.date"
         class="text-sm text-pretty text-muted mt-4"
       > {{ page.date }} </span>
       <template #links>