以下是一個使用 Vue 3 + Element Plus 實現的 Wiki 風格前端頁面示例，包含現代設計、響應式布局和常用功能：
<template><div class="wiki-container"><!-- 頭部導航 --><el-header class="wiki-header"><div class="header-content"><div class="logo-area"><el-icon :size="30" color="#409EFF"><Document /></el-icon><h1 class="title">TechWiki</h1></div><el-inputv-model="searchQuery"placeholder="搜索文檔..."class="search-input"@keyup.enter="performSearch"><template #prefix><el-icon><Search /></el-icon></template></el-input><div class="user-area"><el-avatar :size="36" src="https://avatars.githubusercontent.com/u/12345678" /></div></div></el-header><!-- 主體布局 --><el-container class="main-container"><!-- 側邊欄目錄 --><el-aside width="260px" class="wiki-sidebar"><el-scrollbar><el-menudefault-active="1"class="wiki-menu"@select="handleMenuSelect"><el-sub-menu index="1"><template #title><el-icon><Folder /></el-icon><span>開發文檔</span></template><el-menu-item index="1-1">快速開始</el-menu-item><el-menu-item index="1-2">API 參考</el-menu-item><el-menu-item index="1-3">部署指南</el-menu-item></el-sub-menu><el-sub-menu index="2"><template #title><el-icon><DataAnalysis /></el-icon><span>數據分析</span></template><el-menu-item index="2-1">數據規范</el-menu-item><el-menu-item index="2-2">可視化指南</el-menu-item></el-sub-menu></el-menu></el-scrollbar></el-aside><!-- 主要內容區域 --><el-main class="wiki-content"><el-page-header :icon="null" class="content-header"><template #content><div class="page-title">{{ currentDoc.title }}<el-tag type="warning" v-if="currentDoc.status === 'draft'">草稿</el-tag></div></template></el-page-header><div class="markdown-content" v-html="compiledMarkdown"></div></el-main></el-container></div>
</template><script setup>
import { ref, reactive, computed } from 'vue'
import { marked } from 'marked'
import DOMPurify from 'dompurify'
import hljs from 'highlight.js'// Markdown 配置
marked.setOptions({highlight: function(code, lang) {return hljs.highlightAuto(code).value}
})// 數據
const searchQuery = ref('')
const currentDoc = reactive({title: '歡迎使用 TechWiki',content: `
# 歡迎來到 TechWiki## 快速開始
\`\`\`javascript
// 示例代碼
const demo = () => {console.log('Hello TechWiki!')
}
\`\`\`## 功能特性
- 📚 完善的文檔管理
- 🔍 強大的搜索功能
- 📝 Markdown 支持
- 🎨 代碼高亮顯示`,status: 'published'
})// Markdown 編譯
const compiledMarkdown = computed(() => {return DOMPurify.sanitize(marked.parse(currentDoc.value.content))
})// 搜索功能
const performSearch = () => {console.log('執行搜索:', searchQuery.value)// 這里可以添加搜索邏輯
}// 菜單選擇
const handleMenuSelect = (index) => {console.log('選擇菜單:', index)// 這里可以加載對應文檔內容
}
</script><style scoped lang="scss">
.wiki-container {height: 100vh;display: flex;flex-direction: column;.wiki-header {background: #2c3e50;color: white;border-bottom: 1px solid rgba(255,255,255,0.1);.header-content {display: flex;align-items: center;height: 100%;max-width: 1400px;margin: 0 auto;padding: 0 20px;.logo-area {display: flex;align-items: center;gap: 12px;.title {margin: 0;font-size: 1.5rem;font-weight: 500;}}.search-input {flex: 1;margin: 0 40px;max-width: 500px;}.user-area {margin-left: auto;}}}.main-container {flex: 1;max-width: 1400px;margin: 0 auto;width: 100%;.wiki-sidebar {background: #f8f9fa;border-right: 1px solid #e9ecef;.wiki-menu {border-right: none;padding: 10px 0;}}.wiki-content {padding: 30px 40px;background: white;.content-header {margin-bottom: 30px;.page-title {font-size: 1.8rem;font-weight: 600;display: flex;align-items: center;gap: 12px;}}.markdown-content {line-height: 1.6;font-size: 16px;:deep(h1) {font-size: 2em;margin: 1.2em 0 0.6em;border-bottom: 1px solid #eee;}:deep(pre) {background: #f8f9fa;padding: 15px;border-radius: 6px;margin: 1em 0;}:deep(code) {font-family: 'Fira Code', monospace;}}}}
}
</style>
主要特性說明：
1.布局結構：
使用 Element Plus 的容器組件實現經典的三欄布局
響應式設計，自動適應不同屏幕尺寸
固定頭部 + 滾動內容區域
2.功能模塊：
頂部搜索欄（支持回車搜索）
側邊欄多級目錄導航
Markdown 內容渲染
代碼語法高亮
用戶頭像展示
3.樣式設計：
現代深色系頭部導航
淺色側邊欄與內容區域對比
舒適的閱讀排版
代碼塊美化樣式
柔和的陰影和邊框分隔
4.技術棧：
Vue 3 Composition API
Element Plus 組件庫
Markdown 解析（marked + DOMPurify）
代碼高亮（highlight.js）
需要安裝的依賴：
npm install element-plus @element-plus/icons-vue marked dompurify highlight.js
使用建議：
1.在 main.js 中引入 Element Plus：
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'highlight.js/styles/github.css'createApp(App).use(ElementPlus).mount('#app')
2.添加字體優化（在 index.html 頭部）：
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
3.擴展功能建議：
添加目錄錨點導航
實現文檔版本歷史
增加評論功能
添加暗黑模式切換
集成實時協作編輯
這個示例實現了一個現代化的 Wiki 頁面基礎框架，你可以根據實際需求調整顏色方案、添加更多交互功能或集成后端 API。
