<template>
  <div class="welcome-page">
    <!-- 核心能力 -->
    <div class="feature-section">
      <h3 class="section-title">
        <i class="fas fa-cogs"></i>
        核心能力
      </h3>
      <div class="feature-list">
        <div class="feature-item">
          <h4>
            <i class="fas fa-desktop"></i>
            多CAD软件统一管理
          </h4>
          <p>支持Creo、Revit、PDMS、AutoCAD、SolidWorks、CATIA等主流CAD软件，可根据需要扩展更多软件支持</p>
        </div>

        <div class="feature-item">
          <h4>
            <i class="fas fa-search"></i>
            智能模型分析
          </h4>
          <p>提供层级结构分析、几何复杂度评估、薄壳分析等专业分析功能，帮助优化设计方案</p>
        </div>

        <div class="feature-item">
          <h4>
            <i class="fas fa-download"></i>
            灵活导出支持
          </h4>
          <p>支持STEP、IGES、STL、IFC等多种工业标准格式，满足不同应用场景的数据交换需求</p>
        </div>

        <div class="feature-item">
          <h4>
            <i class="fas fa-heartbeat"></i>
            实时状态监控
          </h4>
          <p>实时监控各CAD软件连接状态，确保系统稳定运行，提供详细的操作日志和性能指标</p>
        </div>
      </div>
    </div>

    <!-- 技术特色 -->
    <div class="tech-section">
      <h3 class="section-title">
        <i class="fas fa-rocket"></i>
        技术特色
      </h3>
      <div class="tech-description">
        <p>
          基于Vue 3和现代Web技术构建，采用模块化架构设计，支持响应式界面和实时数据交互。平台遵循工业级安全标准，确保设计数据的安全性和可靠性。通过标准化API和微服务架构，实现高度的可扩展性和灵活的定制能力。
        </p>
      </div>
    </div>

    <!-- 使用引导 -->
    <div class="guide-section">
      <div class="guide-text">
        <i class="fas fa-hand-point-left"></i>
        请使用左侧导航菜单开始您的工作
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WelcomePage'
}
</script>

<style scoped>
.welcome-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  height: 100%;
  overflow-y: auto;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 20px 0;
  border-bottom: 2px solid var(--color-primary-rgb);
  padding-bottom: 8px;
}

.section-title i {
  color: var(--color-primary);
  font-size: 20px;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.feature-item {
  background: var(--color-white-rgb-05);
  border: 1px solid var(--color-white-rgb-1);
  border-radius: 8px;
  padding: 20px;
  transition: var(--transition-all);
}

.feature-item:hover {
  background: var(--color-white-rgb-1);
  border-color: var(--color-white-rgb-2);
  transform: translateY(-2px);
}

.feature-item h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
}

.feature-item h4 i {
  color: var(--color-primary);
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.feature-item p {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.tech-description p {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0;
  padding: 0 10px;
  text-align: justify;
}

.guide-section {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--color-white-rgb-1);
}

.guide-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--color-text-tertiary);
  background: var(--color-white-rgb-05);
  padding: 12px 20px;
  border-radius: 6px;
  border: 1px solid var(--color-white-rgb-1);
}

.guide-text i {
  color: var(--color-primary);
  font-size: 18px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .welcome-page {
    padding: 15px;
    gap: 24px;
  }

  .feature-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .section-title {
    font-size: 16px;
  }

  .feature-item {
    padding: 16px;
  }
}
</style>
