|
1 | 1 | <script setup lang="ts"> |
2 | 2 | import { useData } from 'vitepress' |
| 3 | +import NavBar from './components/NavBar.vue' |
| 4 | +import Footer from './components/Footer.vue' |
3 | 5 |
|
4 | | -// https://vitepress.dev/reference/runtime-api#usedata |
5 | | -const { site, frontmatter } = useData() |
| 6 | +const { frontmatter, page } = useData() |
| 7 | +
|
| 8 | +// 格式化时间戳 |
| 9 | +const formatDate = (timestamp: number): string => { |
| 10 | + if (!timestamp) return '' |
| 11 | + const date = new Date(timestamp) |
| 12 | + return date.toLocaleDateString('zh-CN', { |
| 13 | + year: 'numeric', |
| 14 | + month: 'short', |
| 15 | + day: 'numeric' |
| 16 | + }) |
| 17 | +} |
6 | 18 | </script> |
7 | 19 |
|
8 | 20 | <template> |
9 | | - <div v-if="frontmatter.home"> |
10 | | - <h1>{{ site.title }}</h1> |
11 | | - <p>{{ site.description }}</p> |
12 | | - <ul> |
13 | | - <li><a href="/markdown-examples.html">Markdown Examples</a></li> |
14 | | - <li><a href="/api-examples.html">API Examples</a></li> |
15 | | - </ul> |
16 | | - </div> |
17 | | - <div v-else> |
18 | | - <a href="/">Home</a> |
19 | | - <Content /> |
| 21 | + <div class="layout"> |
| 22 | + <!-- 导航栏 --> |
| 23 | + <NavBar /> |
| 24 | + |
| 25 | + <!-- 主要内容区 --> |
| 26 | + <main class="main-content"> |
| 27 | + <!-- 首页布局 --> |
| 28 | + <div v-if="frontmatter.home" class="home"> |
| 29 | + <Content /> |
| 30 | + </div> |
| 31 | + |
| 32 | + <!-- 文档页面布局 --> |
| 33 | + <div v-else class="page"> |
| 34 | + <Content /> |
| 35 | + <div v-if="page.lastUpdated" class="last-updated"> |
| 36 | + 最后更新于: {{ formatDate(page.lastUpdated) }} |
| 37 | + </div> |
| 38 | + </div> |
| 39 | + </main> |
| 40 | + |
| 41 | + <!-- 页脚 --> |
| 42 | + <Footer /> |
20 | 43 | </div> |
21 | 44 | </template> |
| 45 | + |
| 46 | +<style scoped> |
| 47 | +.layout { |
| 48 | + min-height: 100vh; |
| 49 | + display: flex; |
| 50 | + flex-direction: column; |
| 51 | +} |
| 52 | +
|
| 53 | +.main-content { |
| 54 | + flex: 1; |
| 55 | + padding: 2rem; |
| 56 | + max-width: 1200px; |
| 57 | + margin: 0 auto; |
| 58 | + width: 100%; |
| 59 | +} |
| 60 | +
|
| 61 | +/* 首页样式 - 居中布局 */ |
| 62 | +.home { |
| 63 | + text-align: center; |
| 64 | +} |
| 65 | +
|
| 66 | +.home :deep(h1) { |
| 67 | + font-size: 3rem; |
| 68 | + font-weight: 700; |
| 69 | + margin-bottom: 1rem; |
| 70 | + background: linear-gradient(120deg, #3b82f6, #10b981); |
| 71 | + -webkit-background-clip: text; |
| 72 | + -webkit-text-fill-color: transparent; |
| 73 | +} |
| 74 | +
|
| 75 | +.home :deep(p) { |
| 76 | + font-size: 1.25rem; |
| 77 | + color: #666; |
| 78 | + margin-bottom: 2rem; |
| 79 | +} |
| 80 | +
|
| 81 | +/* 文档页面样式 - 左对齐 */ |
| 82 | +.page { |
| 83 | + text-align: left; |
| 84 | +} |
| 85 | +
|
| 86 | +.page :deep(h1) { |
| 87 | + font-size: 2rem; |
| 88 | + margin-bottom: 1rem; |
| 89 | + border-bottom: 1px solid #e5e7eb; |
| 90 | + padding-bottom: 0.5rem; |
| 91 | +} |
| 92 | +
|
| 93 | +.page :deep(h2) { |
| 94 | + font-size: 1.5rem; |
| 95 | + margin-top: 2rem; |
| 96 | + margin-bottom: 1rem; |
| 97 | +} |
| 98 | +
|
| 99 | +.page :deep(p) { |
| 100 | + line-height: 1.8; |
| 101 | + margin-bottom: 1rem; |
| 102 | +} |
| 103 | +
|
| 104 | +.page :deep(pre) { |
| 105 | + background: #1e1e1e; |
| 106 | + color: #d4d4d4; |
| 107 | + padding: 1rem; |
| 108 | + border-radius: 0.5rem; |
| 109 | + overflow-x: auto; |
| 110 | +} |
| 111 | +
|
| 112 | +.page :deep(code) { |
| 113 | + font-family: 'JetBrains Mono', monospace; |
| 114 | + background: #f3f4f6; |
| 115 | + padding: 0.2em 0.4em; |
| 116 | + border-radius: 0.25rem; |
| 117 | + font-size: 0.875em; |
| 118 | +} |
| 119 | +
|
| 120 | +.page :deep(pre code) { |
| 121 | + background: transparent; |
| 122 | + padding: 0; |
| 123 | +} |
| 124 | +
|
| 125 | +/* 最后更新时间 */ |
| 126 | +.last-updated { |
| 127 | + margin-top: 3rem; |
| 128 | + padding-top: 1rem; |
| 129 | + border-top: 1px solid #e5e7eb; |
| 130 | + color: #6b7280; |
| 131 | + font-size: 0.875rem; |
| 132 | +} |
| 133 | +</style> |
0 commit comments