<template>
  <div class="system-settings-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-section">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统入口</el-breadcrumb-item>
        <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 页面标题 -->
    <div class="page-title">
      <h1>系统设置</h1>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-area">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover" class="feature-card">
            <template #header>
              <span>用户管理</span>
            </template>
            <div class="card-content">
              <el-icon class="feature-icon"><User /></el-icon>
              <p>管理系统用户和权限</p>
              <el-button type="primary" @click="navigateToFeature('user-management')">
                用户管理
              </el-button>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card shadow="hover" class="feature-card">
            <template #header>
              <span>系统配置</span>
            </template>
            <div class="card-content">
              <el-icon class="feature-icon"><Tools /></el-icon>
              <p>系统参数和配置管理</p>
              <el-button type="primary" @click="navigateToFeature('system-config')">
                系统配置
              </el-button>
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card shadow="hover" class="feature-card">
            <template #header>
              <span>安全设置</span>
            </template>
            <div class="card-content">
              <el-icon class="feature-icon"><Lock /></el-icon>
              <p>系统安全策略和设置</p>
              <el-button type="primary" @click="navigateToFeature('security-settings')">
                安全设置
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts" name="systemSettings">
import { ElMessage } from 'element-plus'
import { User, Tools, Lock } from '@element-plus/icons-vue'

const navigateToFeature = (feature: string) => {
  ElMessage.info(`导航到${feature}功能（待开发）`)
  // router.push(`/system-settings/${feature}`)
}
</script>

<style scoped lang="scss">
.system-settings-container {
  background: #f5f5f5;
  min-height: 100vh;
}

.breadcrumb-section {
  padding: 15px 20px 10px;
  background: white;
}

.page-title {
  padding: 0 20px 20px;
  background: white;
  border-bottom: 1px solid #e0e0e0;

  h1 {
    margin: 0;
    color: #303133;
    font-size: 28px;
    font-weight: 500;
  }
}

.content-area {
  padding: 30px 20px;

  .feature-card {
    height: 250px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4px);
    }

    .card-content {
      text-align: center;
      padding: 20px 0;

      .feature-icon {
        font-size: 48px;
        color: #F56C6C;
        margin-bottom: 15px;
      }

      p {
        color: #606266;
        margin-bottom: 20px;
        line-height: 1.6;
      }
    }
  }
}

@media (max-width: 768px) {
  .content-area {
    padding: 20px 15px;
  }
}
</style>
