<template>
  <el-alert v-if="fromSetup" class="setup-guide" type="warning" show-icon :closable="false">
    <template #title>
      <div class="setup-guide-row">
        <div>
          <div class="setup-guide-title">{{ title }}</div>
          <div v-if="desc" class="setup-guide-desc">{{ desc }}</div>
        </div>
        <el-button size="small" type="primary" plain @click="back">返回初始配置</el-button>
      </div>
    </template>
  </el-alert>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

defineProps<{
  title: string
  desc?: string
}>()

const route = useRoute()
const router = useRouter()
const fromSetup = computed(() => route.query.setup === '1')

function back() {
  router.push('/admin/setup')
}
</script>

<style scoped>
.setup-guide { margin-bottom: 10px; flex-shrink: 0; }
.setup-guide-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.setup-guide-title { font-weight: 600; }
.setup-guide-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.55; font-weight: 400; opacity: 0.9; }
</style>
