fix:前端项目,修正首页不能全屏显示的问题

ui/yangyi-open-api-platform-ui/src/components/HelloWorld.vue

@@ -1,43 +1,762 @@
-<script setup>
-import { ref } from 'vue'
+<template>
+  <div class="home-page">
+    <!-- 导航栏 -->
+    <el-header class="navbar">
+      <div class="nav-container">
+        <div class="nav-left">
+          <div class="logo">
+            <el-icon class="logo-icon"><Platform /></el-icon>
+            <span class="logo-text">API开放平台</span>
+          </div>
+          <el-menu
+              mode="horizontal"
+              :default-active="activeNav"
+              class="nav-menu"
+              @select="handleNavSelect"
+          >
+            <el-menu-item index="home">首页</el-menu-item>
+            <el-menu-item index="docs">文档中心</el-menu-item>
+            <el-menu-item index="pricing">价格方案</el-menu-item>
+            <el-menu-item index="support">技术支持</el-menu-item>
+          </el-menu>
+        </div>
+        <div class="nav-right">
+          <el-button type="primary" @click="handleLogin">立即登录</el-button>
+          <el-button @click="handleRegister">免费注册</el-button>
+        </div>
+      </div>
+    </el-header>
 
-defineProps({
-  msg: String,
+    <!-- 主内容区域 -->
+    <main class="main-content">
+      <!-- 英雄区域 -->
+      <section class="hero-section">
+        <div class="hero-container">
+          <div class="hero-content">
+            <h1 class="hero-title">
+              强大的API接口服务
+              <br>
+              <span class="highlight">赋能您的业务创新</span>
+            </h1>
+            <p class="hero-description">
+              提供稳定、安全、高效的API接口服务，支持多种数据格式和认证方式，
+              助力开发者快速构建应用程序
+            </p>
+            <div class="hero-actions">
+              <el-button type="primary" size="large" @click="handleGetStarted">
+                立即开始
+                <el-icon><ArrowRight /></el-icon>
+              </el-button>
+              <el-button size="large" @click="handleViewDocs">
+                查看文档
+              </el-button>
+            </div>
+            <div class="hero-stats">
+              <div class="stat-item">
+                <div class="stat-number">500+</div>
+                <div class="stat-label">可用接口</div>
+              </div>
+              <div class="stat-item">
+                <div class="stat-number">99.9%</div>
+                <div class="stat-label">服务可用性</div>
+              </div>
+              <div class="stat-item">
+                <div class="stat-number">10,000+</div>
+                <div class="stat-label">开发者用户</div>
+              </div>
+            </div>
+          </div>
+          <div class="hero-visual">
+            <div class="api-visual">
+              <div class="code-window">
+                <div class="window-header">
+                  <div class="window-dots">
+                    <span class="dot red"></span>
+                    <span class="dot yellow"></span>
+                    <span class="dot green"></span>
+                  </div>
+                  <span class="window-title">api_example.js</span>
+                </div>
+                <div class="code-content">
+                  <pre><code>// 调用用户信息接口
+fetch('/api/v1/users/123', {
+  method: 'GET',
+  headers: {
+    'Authorization': 'Bearer your-api-key',
+    'Content-Type': 'application/json'
+  }
 })
+.then(response => response.json())
+.then(data => console.log(data));</code></pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
 
-const count = ref(0)
-</script>
+      <!-- 特性介绍 -->
+      <section class="features-section">
+        <div class="container">
+          <div class="section-header">
+            <h2>为什么选择我们的API平台</h2>
+            <p>我们提供全方位的API服务解决方案</p>
+          </div>
+          <div class="features-grid">
+            <el-card class="feature-card" shadow="hover">
+              <div class="feature-icon">
+                <el-icon><Lock /></el-icon>
+              </div>
+              <h3>安全可靠</h3>
+              <p>多重安全认证机制，数据加密传输，保障您的数据安全</p>
+            </el-card>
+            <el-card class="feature-card" shadow="hover">
+              <div class="feature-icon">
+                <el-icon><TrendCharts /></el-icon>
+              </div>
+              <h3>高性能</h3>
+              <p>分布式架构，负载均衡，确保API接口的高性能和稳定性</p>
+            </el-card>
+            <el-card class="feature-card" shadow="hover">
+              <div class="feature-icon">
+                <el-icon><Document /></el-icon>
+              </div>
+              <h3>完善文档</h3>
+              <p>详细的API文档和示例代码，帮助您快速上手集成</p>
+            </el-card>
+            <el-card class="feature-card" shadow="hover">
+              <div class="feature-icon">
+                <el-icon><Headset /></el-icon>
+              </div>
+              <h3>专业支持</h3>
+              <p>7x24小时技术支持，专业团队为您解决技术问题</p>
+            </el-card>
+          </div>
+        </div>
+      </section>
 
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
+      <!-- API分类 -->
+      <section class="categories-section">
+        <div class="container">
+          <div class="section-header">
+            <h2>丰富的API接口</h2>
+            <p>覆盖多个领域的API服务</p>
+          </div>
+          <div class="categories-grid">
+            <div class="category-item">
+              <div class="category-icon user">
+                <el-icon><User /></el-icon>
+              </div>
+              <h4>用户管理</h4>
+              <p>用户注册、登录、信息管理等接口</p>
+            </div>
+            <div class="category-item">
+              <div class="category-icon data">
+                <el-icon><DataAnalysis /></el-icon>
+              </div>
+              <h4>数据分析</h4>
+              <p>数据统计、分析、可视化接口</p>
+            </div>
+            <div class="category-item">
+              <div class="category-icon payment">
+                <el-icon><Money /></el-icon>
+              </div>
+              <h4>支付服务</h4>
+              <p>多种支付方式接入接口</p>
+            </div>
+            <div class="category-item">
+              <div class="category-icon message">
+                <el-icon><ChatDotRound /></el-icon>
+              </div>
+              <h4>消息推送</h4>
+              <p>短信、邮件、推送通知接口</p>
+            </div>
+            <div class="category-item">
+              <div class="category-icon storage">
+                <el-icon><Folder /></el-icon>
+              </div>
+              <h4>文件存储</h4>
+              <p>文件上传、下载、管理接口</p>
+            </div>
+            <div class="category-item">
+              <div class="category-icon ai">
+                <el-icon><Cpu /></el-icon>
+              </div>
+              <h4>人工智能</h4>
+              <p>AI模型调用、图像识别接口</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- CTA区域 -->
+      <section class="cta-section">
+        <div class="container">
+          <div class="cta-content">
+            <h2>立即开始使用我们的API服务</h2>
+            <p>注册即可获得免费额度，快速集成到您的应用中</p>
+            <div class="cta-actions">
+              <el-button type="primary" size="large" @click="handleRegister">
+                免费注册
+              </el-button>
+              <el-button size="large" @click="handleContact">
+                联系销售
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
 
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+    <!-- 页脚 -->
+    <el-footer class="footer">
+      <div class="container">
+        <div class="footer-content">
+          <div class="footer-section">
+            <div class="footer-logo">
+              <el-icon><Platform /></el-icon>
+              <span>API开放平台</span>
+            </div>
+            <p class="footer-description">
+              专业的API接口服务平台，为开发者提供稳定可靠的接口服务
+            </p>
+          </div>
+          <div class="footer-section">
+            <h4>产品</h4>
+            <ul>
+              <li><a href="#">接口市场</a></li>
+              <li><a href="#">价格方案</a></li>
+              <li><a href="#">文档中心</a></li>
+              <li><a href="#">状态监控</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h4>支持</h4>
+            <ul>
+              <li><a href="#">技术支持</a></li>
+              <li><a href="#">常见问题</a></li>
+              <li><a href="#">开发者社区</a></li>
+              <li><a href="#">服务条款</a></li>
+            </ul>
+          </div>
+          <div class="footer-section">
+            <h4>联系我们</h4>
+            <ul>
+              <li><a href="#">商务合作</a></li>
+              <li><a href="#">意见反馈</a></li>
+              <li><a href="#">加入我们</a></li>
+            </ul>
+          </div>
+        </div>
+        <div class="footer-bottom">
+          <p>&copy; 2024 API开放平台. 保留所有权利.</p>
+        </div>
+      </div>
+    </el-footer>
+  </div>
 </template>
 
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  Platform,
+  ArrowRight,
+  Lock,
+  TrendCharts,
+  Document,
+  Headset,
+  User,
+  DataAnalysis,
+  Money,
+  ChatDotRound,
+  Folder,
+  Cpu
+} from '@element-plus/icons-vue'
+
+const router = useRouter()
+const activeNav = ref('home')
+
+// 导航菜单选择
+const handleNavSelect = (index) => {
+  activeNav.value = index
+  // 这里可以添加页面内滚动或路由跳转逻辑
+}
+
+// 登录按钮点击
+const handleLogin = () => {
+  router.push('/login')
+}
+
+// 注册按钮点击
+const handleRegister = () => {
+  // 可以跳转到注册页面或打开注册模态框
+  console.log('打开注册')
+}
+
+// 立即开始
+const handleGetStarted = () => {
+  handleRegister()
+}
+
+// 查看文档
+const handleViewDocs = () => {
+  // 跳转到文档页面
+  console.log('查看文档')
+}
+
+// 联系销售
+const handleContact = () => {
+  // 打开联系表单
+  console.log('联系销售')
+}
+</script>
+
 <style scoped>
-.read-the-docs {
-  color: #888;
+/* 修复全屏显示问题 */
+.home-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.navbar {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 0;
+  height: 64px;
+  flex-shrink: 0; /* 防止导航栏被压缩 */
+}
+
+.nav-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  height: 100%;
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+  gap: 40px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 20px;
+  font-weight: 700;
+  color: #303133;
+}
+
+.logo-icon {
+  font-size: 24px;
+  color: #409EFF;
+}
+
+.nav-menu {
+  border-bottom: none;
+  background: transparent;
+}
+
+.nav-right {
+  display: flex;
+  gap: 12px;
+}
+
+.main-content {
+  flex: 1; /* 使主内容区域占据剩余空间 */
+  width: 100%;
+}
+
+/* 英雄区域 */
+.hero-section {
+  padding: 100px 0 80px;
+  color: white;
+  width: 100%;
+}
+
+.hero-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 60px;
+  align-items: center;
+  width: 100%;
+}
+
+.hero-title {
+  font-size: 3.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 24px;
+}
+
+.highlight {
+  background: linear-gradient(45deg, #ffd700, #ff6b6b);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-description {
+  font-size: 1.25rem;
+  line-height: 1.6;
+  margin-bottom: 32px;
+  opacity: 0.9;
+}
+
+.hero-actions {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 48px;
+}
+
+.hero-stats {
+  display: flex;
+  gap: 40px;
+}
+
+.stat-item {
+  text-align: center;
+}
+
+.stat-number {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 0.9rem;
+  opacity: 0.8;
+}
+
+/* API可视化 */
+.api-visual {
+  display: flex;
+  justify-content: center;
+}
+
+.code-window {
+  background: #1e1e1e;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+  max-width: 500px;
+  width: 100%;
+}
+
+.window-header {
+  background: #2d2d2d;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.window-dots {
+  display: flex;
+  gap: 6px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.dot.red { background: #ff5f56; }
+.dot.yellow { background: #ffbd2e; }
+.dot.green { background: #27ca3f; }
+
+.window-title {
+  color: #ccc;
+  font-size: 0.9rem;
+}
+
+.code-content {
+  padding: 24px;
+}
+
+.code-content pre {
+  margin: 0;
+  color: #d4d4d4;
+  font-family: 'Monaco', 'Consolas', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+/* 特性区域 */
+.features-section {
+  padding: 80px 0;
+  background: white;
+  width: 100%;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  width: 100%;
+}
+
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-header h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #303133;
+  margin-bottom: 16px;
+}
+
+.section-header p {
+  font-size: 1.1rem;
+  color: #606266;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+}
+
+.feature-card {
+  text-align: center;
+  padding: 32px 24px;
+  border: none;
+  transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-8px);
+}
+
+.feature-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 24px;
+  background: linear-gradient(135deg, #409EFF, #67C23A);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.feature-icon .el-icon {
+  font-size: 32px;
+  color: white;
+}
+
+.feature-card h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: #303133;
+}
+
+.feature-card p {
+  color: #606266;
+  line-height: 1.6;
+}
+
+/* 分类区域 */
+.categories-section {
+  padding: 80px 0;
+  background: #f5f7fa;
+  width: 100%;
+}
+
+.categories-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 32px;
+}
+
+.category-item {
+  text-align: center;
+  padding: 32px 24px;
+  background: white;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+}
+
+.category-item:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
+.category-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  color: white;
+}
+
+.category-icon.user { background: #409EFF; }
+.category-icon.data { background: #67C23A; }
+.category-icon.payment { background: #E6A23C; }
+.category-icon.message { background: #F56C6C; }
+.category-icon.storage { background: #909399; }
+.category-icon.ai { background: #8E44AD; }
+
+.category-item h4 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: #303133;
+}
+
+.category-item p {
+  color: #606266;
+  line-height: 1.5;
+}
+
+/* CTA区域 */
+.cta-section {
+  padding: 80px 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+  width: 100%;
+}
+
+.cta-content h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 16px;
+}
+
+.cta-content p {
+  font-size: 1.2rem;
+  margin-bottom: 32px;
+  opacity: 0.9;
+}
+
+.cta-actions {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+}
+
+/* 页脚 */
+.footer {
+  background: #2c3e50;
+  color: white;
+  padding: 60px 0 20px;
+  flex-shrink: 0; /* 防止页脚被压缩 */
+  width: 100%;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 40px;
+  margin-bottom: 40px;
+}
+
+.footer-logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+.footer-description {
+  color: #bdc3c7;
+  line-height: 1.6;
+}
+
+.footer-section h4 {
+  margin-bottom: 20px;
+  color: white;
+}
+
+.footer-section ul {
+  list-style: none;
+  padding: 0;
+}
+
+.footer-section li {
+  margin-bottom: 12px;
+}
+
+.footer-section a {
+  color: #bdc3c7;
+  text-decoration: none;
+  transition: color 0.3s;
+}
+
+.footer-section a:hover {
+  color: white;
+}
+
+.footer-bottom {
+  text-align: center;
+  padding-top: 20px;
+  border-top: 1px solid #34495e;
+  color: #bdc3c7;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .hero-container {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 40px;
+  }
+
+  .hero-title {
+    font-size: 2.5rem;
+  }
+
+  .nav-menu {
+    display: none;
+  }
+
+  .hero-stats {
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .footer-content {
+    grid-template-columns: 1fr;
+    text-align: center;
+    gap: 30px;
+  }
+
+  .cta-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .features-grid,
+  .categories-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 确保所有元素宽度为100% */
+.home-page > * {
+  width: 100%;
 }
 </style>

ui/yangyi-open-api-platform-ui/src/style.css

@@ -1,79 +1,79 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+/*:root {*/
+/*  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;*/
+/*  line-height: 1.5;*/
+/*  font-weight: 400;*/
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+/*  color-scheme: light dark;*/
+/*  color: rgba(255, 255, 255, 0.87);*/
+/*  background-color: #242424;*/
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+/*  font-synthesis: none;*/
+/*  text-rendering: optimizeLegibility;*/
+/*  -webkit-font-smoothing: antialiased;*/
+/*  -moz-osx-font-smoothing: grayscale;*/
+/*}*/
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
+/*a {*/
+/*  font-weight: 500;*/
+/*  color: #646cff;*/
+/*  text-decoration: inherit;*/
+/*}*/
+/*a:hover {*/
+/*  color: #535bf2;*/
+/*}*/
 
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
+/*body {*/
+/*  margin: 0;*/
+/*  display: flex;*/
+/*  place-items: center;*/
+/*  min-width: 320px;*/
+/*  min-height: 100vh;*/
+/*}*/
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
+/*h1 {*/
+/*  font-size: 3.2em;*/
+/*  line-height: 1.1;*/
+/*}*/
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
+/*button {*/
+/*  border-radius: 8px;*/
+/*  border: 1px solid transparent;*/
+/*  padding: 0.6em 1.2em;*/
+/*  font-size: 1em;*/
+/*  font-weight: 500;*/
+/*  font-family: inherit;*/
+/*  background-color: #1a1a1a;*/
+/*  cursor: pointer;*/
+/*  transition: border-color 0.25s;*/
+/*}*/
+/*button:hover {*/
+/*  border-color: #646cff;*/
+/*}*/
+/*button:focus,*/
+/*button:focus-visible {*/
+/*  outline: 4px auto -webkit-focus-ring-color;*/
+/*}*/
 
-.card {
-  padding: 2em;
-}
+/*.card {*/
+/*  padding: 2em;*/
+/*}*/
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
+/*#app {*/
+/*  max-width: 1280px;*/
+/*  margin: 0 auto;*/
+/*  padding: 2rem;*/
+/*  text-align: center;*/
+/*}*/
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+/*@media (prefers-color-scheme: light) {*/
+/*  :root {*/
+/*    color: #213547;*/
+/*    background-color: #ffffff;*/
+/*  }*/
+/*  a:hover {*/
+/*    color: #747bff;*/
+/*  }*/
+/*  button {*/
+/*    background-color: #f9f9f9;*/
+/*  }*/
+/*}*/