<template>
  <el-card :shadow="shadow" class="page-container">
    <template v-if="title || $slots.header" #header>
      <div class="page-container-header">
        <div class="page-container-title-wrap" v-if="title">
          <div class="title-indicator"></div>
          <span class="page-container-title">{{ title }}</span>
        </div>
        <slot name="header" />
      </div>
    </template>
    <slot />
  </el-card>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    /** 页面标题，显示在 card header 中 */
    title?: string;
    /** card shadow 模式，默认与 el-card 保持一致 */
    shadow?: "always" | "hover" | "never";
  }>(),
  {
    title: undefined,
    shadow: undefined,
  },
);
</script>

<style scoped>
.page-container {
  border: none;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.page-container-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-container-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-indicator {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
  flex-shrink: 0;
}

.page-container-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--el-text-color-primary);
  letter-spacing: 0.5px;
}
</style>
