<template>
  <div class="about-container">
    <div class="about-header glass">
      <img src="/logo.png" alt="Logo" class="about-logo" />
      <h1 class="about-title">Hertz Admin</h1>
      <p class="about-subtitle">现代化全栈权限管理系统解决方案</p>
    </div>

    <div class="about-content">
      <el-row :gutter="24">
        <el-col :span="14">
          <el-card class="info-card glass" header="项目简介">
            <p class="intro-text">
              Hertz Admin 是一个基于 <strong>Spring Boot 3</strong> 和 <strong>Vue 3</strong> 构建的前后端分离权限管理系统。
              它集成了最新的技术栈，提供了一套完整的 RBAC（基于角色的访问控制）解决方案，支持动态菜单、系统监控、AI 对话等功能。
              旨在帮助开发者快速搭建企业级后台管理系统。
            </p>
          </el-card>

          <el-card class="info-card glass mt-4" header="核心技术栈">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="后端框架">Spring Boot 3.4</el-descriptions-item>
              <el-descriptions-item label="ORM 框架">MyBatis-Plus 3.5</el-descriptions-item>
              <el-descriptions-item label="安全框架">Spring Security + JWT</el-descriptions-item>
              <el-descriptions-item label="AI 集成">Spring AI (Ollama)</el-descriptions-item>
              <el-descriptions-item label="前端框架">Vue 3 (Composition API)</el-descriptions-item>
              <el-descriptions-item label="UI 组件库">Element Plus</el-descriptions-item>
              <el-descriptions-item label="构建工具">Maven & Vite</el-descriptions-item>
              <el-descriptions-item label="数据库">MySQL 8.0 + Redis</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>

        <el-col :span="10">
          <el-card class="info-card glass" header="主要功能">
            <el-timeline>
              <el-timeline-item type="primary" :hollow="true" timestamp="用户权限">
                RBAC 模型，支持用户、角色、菜单（按钮级）权限控制
              </el-timeline-item>
              <el-timeline-item type="success" :hollow="true" timestamp="动态路由">
                基于后端权限动态生成前端路由菜单
              </el-timeline-item>
              <el-timeline-item type="warning" :hollow="true" timestamp="AI 助手">
                集成 LLM 大模型，提供智能对话与辅助功能
              </el-timeline-item>
              <el-timeline-item type="info" :hollow="true" timestamp="系统监控">
                实时监控服务器 CPU、内存、JVM 及磁盘状态
              </el-timeline-item>
              <el-timeline-item type="danger" :hollow="true" timestamp="安全机制">
                JWT 认证、验证码、全局异常处理、操作日志
              </el-timeline-item>
            </el-timeline>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
.about-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-header {
  text-align: center;
  padding: 48px 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(240,249,255,0.9) 100%);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.about-logo {
  width: 80px;
  height: auto;
  margin-bottom: 16px;
}

.about-title {
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 12px;
  background: linear-gradient(135deg, var(--ios-primary) 0%, #2a5298 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-subtitle {
  font-size: 18px;
  color: #666;
  margin: 0;
}

.intro-text {
  line-height: 1.8;
  color: #555;
  font-size: 15px;
}

.mt-4 {
  margin-top: 16px;
}

:deep(.el-timeline-item__content) {
  color: #555;
}

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}
</style>
