<template>
  <!-- 根容器：100%填充父容器（home-content），确保自适应 -->
  <div class="empty-page-container">
    <!-- 空白页核心内容区：垂直居中 -->
    <div class="empty-content">
      <!-- 空状态图标 -->
      <div class="empty-icon">
        <FileTextOutlined />
      </div>
      
      <!-- 标题与描述 -->
      <h2 class="empty-title">这是一个空白页面</h2>
      <p class="empty-desc">
        你可以在这里扩展功能，比如添加数据展示、表单提交、图表分析等内容<br>
        页面已适配父容器尺寸，支持高度/宽度自适应
      </p>
      
      <!-- 操作按钮：提供基础交互入口 -->
      <div class="empty-actions">
        <a-button type="primary" @click="handleCreate">
          <PlusOutlined class="mr-2" /> 创建内容
        </a-button>
        <a-button @click="handleGuide" style="margin-left: 12px;">
          <QuestionCircleOutlined class="mr-2" /> 查看使用指南
        </a-button>
      </div>
      
      <!-- 辅助提示：展示页面基础信息 -->
      <div class="empty-meta">
        <span class="meta-item">页面路径：@/views/EmptyTemplatePage.vue</span>
        <span class="meta-item">适配场景：列表页、详情页、表单页等初始模板</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 引入必要组件（与原项目组件库一致）
import { Button } from 'ant-design-vue';
import { FileTextOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';

// 页面基础状态（可根据需求扩展）
const pageName = ref('空白模板页面');

// 按钮交互事件（示例：可根据业务逻辑修改）
const handleCreate = () => {
  console.log(`[${pageName.value}] 触发「创建内容」操作`);
  // 实际场景可扩展：打开创建弹窗、跳转表单页面等
  alert('可在此处实现「创建内容」的业务逻辑');
};

const handleGuide = () => {
  console.log(`[${pageName.value}] 查看使用指南`);
  // 实际场景可扩展：打开帮助文档、显示引导弹窗等
  alert('使用指南：\n1. 此页面已适配父容器自适应尺寸\n2. 可在 empty-content 内添加业务组件\n3. 样式可参考原项目规范调整');
};
</script>

<style scoped>
/* 根容器：100%填充父容器，确保自适应 */
.empty-page-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 空白页内容区：居中展示，控制宽高比例 */
.empty-content {
  width: 100%;
  max-width: 600px;
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 空状态图标：突出显示，统一风格 */
.empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #e8f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
}

.empty-icon :deep(svg) {
  width: 40px;
  height: 40px;
}

/* 标题样式：与原项目标题层级一致 */
.empty-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

/* 描述文本：浅色、易读 */
.empty-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* 操作按钮区：间距控制 */
.empty-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* 辅助信息：弱化显示，底部对齐 */
.empty-meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
  color: #999;
}

/* 响应式：小屏幕适配 */
@media (max-width: 768px) {
  .empty-content {
    padding: 32px 16px;
    gap: 16px;
  }
  
  .empty-icon {
    width: 64px;
    height: 64px;
  }
  
  .empty-icon :deep(svg) {
    width: 32px;
    height: 32px;
  }
  
  .empty-title {
    font-size: 16px;
  }
  
  .empty-meta {
    flex-direction: column;
    gap: 8px;
  }
}
</style>