用vue3写一个好看的wiki前端页面

以下是一个使用 Vue 3 + Element Plus 实现的 Wiki 风格前端页面示例，包含现代设计、响应式布局和常用功能：

html 复制代码

<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-input
          v-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-menu
            default-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）

需要安装的依赖：

bash 复制代码

npm install element-plus @element-plus/icons-vue marked dompurify highlight.js

使用建议：

1.在 main.js 中引入 Element Plus：

javascript 复制代码

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 头部）：

html 复制代码

<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">

3.扩展功能建议：

添加目录锚点导航

实现文档版本历史

增加评论功能

添加暗黑模式切换

集成实时协作编辑

这个示例实现了一个现代化的 Wiki 页面基础框架，你可以根据实际需求调整颜色方案、添加更多交互功能或集成后端 API。