<!-- =============================================================================
// 企微IT智能服务台 — H5用户端"即将上线"占位组件
// =============================================================================
// 说明：通用占位组件，用于尚未实现的功能模块
//   接收 title prop，显示灰色图标 + "{title} · 即将上线"
//   用于"相似问题与做法"和"知识库搜索"两个模块
// ============================================================================= -->

<template>
  <div class="coming-soon">
    <!-- 灰色占位图标 -->
    <div class="coming-soon__icon">
      <van-icon name="clock-o" size="48" color="var(--text-placeholder)" />
    </div>
    <!-- 模块名称 + 即将上线提示 -->
    <p class="coming-soon__text">{{ title }} · 即将上线</p>
    <p class="coming-soon__subtext">功能开发中，敬请期待</p>
  </div>
</template>

<script setup lang="ts">
/**
 * ComingSoon 占位组件
 * @prop title - 模块名称（如"相似问题与做法"、"知识库搜索"）
 */

defineProps<{
  /** 模块名称，显示在"即将上线"前 */
  title: string
}>()
</script>

<style scoped>
/* 占位容器：居中布局 */
.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 16px;
  min-height: 200px;
}

/* 灰色图标 */
.coming-soon__icon {
  margin-bottom: 16px;
}

/* 主提示文字：模块名 + 即将上线 */
.coming-soon__text {
  font-size: 15px;
  color: var(--text-tertiary);
  text-align: center;
}

/* 副提示文字 */
.coming-soon__subtext {
  font-size: 12px;
  color: var(--text-placeholder);
  margin-top: 8px;
  text-align: center;
}
</style>
