<template>
  <!-- 模板部分：只能有一个根元素，用div包裹 -->
  <div class="sys-home-container">
    <el-card title="系统首页" shadow="hover">
      <div class="home-content">
        <h2>欢迎使用后台管理系统</h2>
        <p>当前访问路径：/syshome</p>
        <p>这是 Layout 子路由的正常渲染内容，不会展示代码</p>
        <el-button type="primary" @click="testBtn">测试按钮</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
// 脚本部分：使用setup语法糖，无语法错误
import { ElMessage } from 'element-plus'

// 测试方法
const testBtn = () => {
  ElMessage.success('按钮点击成功！')
}
</script>

<style scoped>
/* 样式部分：scoped确保样式隔离 */
.sys-home-container {
  padding: 10px;
  height: 100%;
}

.home-content {
  margin-top: 20px;
  font-size: 16px;
  color: #333;
}

.home-content h2 {
  color: #409eff;
  margin-bottom: 15px;
}
</style>