library-picturebook-activity/lesingle-aicreate-client/src/components/PageHeader.vue

<template>
  <div class="page-header">
    <div class="header-row">
      <div v-if="showBack" class="back-btn" @click="handleBack">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M15 18l-6-6 6-6"/></svg>
      </div>
      <div class="header-text">
        <div class="header-title">{{ title }}</div>
        <div v-if="subtitle" class="header-sub">{{ subtitle }}</div>
      </div>
    </div>
    <StepBar v-if="step != null" :current="step" :total="totalSteps" />
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import bridge from '@/utils/bridge'
import StepBar from './StepBar.vue'

const router = useRouter()

defineProps({
  title: String,
  subtitle: String,
  showBack: { type: Boolean, default: true },
  step: { type: Number, default: null },
  totalSteps: { type: Number, default: 6 }
})

function handleBack() {
  // iframe 模式下从作品列表进入时，返回通知父页面切回作品列表
  const from = new URLSearchParams(window.location.search).get('from')
    || sessionStorage.getItem('le_from')
  if (bridge.isEmbedded && from === 'works') {
    bridge.send('NAVIGATE_BACK')
    return
  }
  router.back()
}
</script>

<style lang="scss" scoped>
.page-header {
  padding: 16px 20px 8px;
  background: transparent;
}
.header-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.back-btn {
  padding: 4px;
  cursor: pointer;
  color: var(--text);
}
.header-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}
.header-sub {
  font-size: 13px;
  color: var(--text-sub);
  margin-top: 2px;
}
</style>