first commit

2026-06-03 10:09:03 +08:00
commit 81f5039458
6266 changed files with 188236 additions and 0 deletions
@@ -0,0 +1,170 @@
+<template>
+  <div class="onepage-container">
+    <div v-if="loading" class="loading">
+      <el-icon class="is-loading"><Loading /></el-icon>
+      <span>加载中...</span>
+    </div>
+    <div v-else-if="error" class="error">
+      <el-icon><WarningFilled /></el-icon>
+      <p>{{ error }}</p>
+      <el-button @click="loadOnePage">重试</el-button>
+    </div>
+    <div v-else-if="onePage" class="content">
+      <h1 class="title">{{ onePage.title }}</h1>
+      <div class="page-content" v-html="onePage.content"></div>
+    </div>
+    <div v-else class="not-found">
+      <el-icon><DocumentDelete /></el-icon>
+      <p>单页内容不存在</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { Loading, WarningFilled, DocumentDelete } from '@element-plus/icons-vue';
+import { getOnePageByPath } from '@/api/onepage';
+
+interface OnePage {
+  id: number;
+  title: string;
+  content: string;
+  path: string;
+  sort: number;
+  status: 0 | 1;
+}
+
+const route = useRoute();
+const loading = ref(false);
+const error = ref('');
+const onePage = ref<OnePage | null>(null);
+
+// 根据路由路径获取单页内容
+const loadOnePage = async () => {
+  const path = route.path;
+  if (!path) {
+    error.value = '路由路径不存在';
+    return;
+  }
+
+  loading.value = true;
+  error.value = '';
+  
+  try {
+    const result = await getOnePageByPath(path);
+    if (result.code === 200 && result.data) {
+      onePage.value = result.data;
+    } else {
+      error.value = result.msg || '单页内容不存在';
+      onePage.value = null;
+    }
+  } catch (err: any) {
+    error.value = err.message || '加载单页内容失败';
+    onePage.value = null;
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  loadOnePage();
+});
+</script>
+
+<style lang="less" scoped>
+.onepage-container {
+  min-height: 100vh;
+  padding: 40px 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.loading,
+.error,
+.not-found {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  gap: 16px;
+  color: var(--el-text-color-secondary);
+}
+
+.loading {
+  .el-icon {
+    font-size: 32px;
+  }
+}
+
+.error,
+.not-found {
+  .el-icon {
+    font-size: 48px;
+    color: var(--el-color-warning);
+  }
+  
+  p {
+    margin: 0;
+    font-size: 16px;
+  }
+}
+
+.content {
+  .title {
+    font-size: 32px;
+    font-weight: 600;
+    margin-bottom: 24px;
+    color: var(--el-text-color-primary);
+  }
+
+  .page-content {
+    line-height: 1.8;
+    color: var(--el-text-color-primary);
+    font-size: 16px;
+    
+    :deep(p) {
+      margin: 1em 0;
+    }
+    
+    :deep(h1),
+    :deep(h2),
+    :deep(h3),
+    :deep(h4),
+    :deep(h5),
+    :deep(h6) {
+      margin-top: 1.5em;
+      margin-bottom: 0.5em;
+      font-weight: 600;
+    }
+    
+    :deep(img) {
+      max-width: 100%;
+      height: auto;
+      border-radius: 4px;
+    }
+    
+    :deep(code) {
+      background-color: var(--el-fill-color-light);
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-family: 'Courier New', monospace;
+    }
+    
+    :deep(pre) {
+      background-color: var(--el-fill-color-light);
+      padding: 16px;
+      border-radius: 4px;
+      overflow-x: auto;
+      
+      code {
+        background-color: transparent;
+        padding: 0;
+      }
+    }
+  }
+}
+</style>
+