<!-- SPEC: PJ2026-010405 云端控制台. -->
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { fetchText } from "@/api";
import AsyncBoundary from "@/components/common/AsyncBoundary.vue";
import HelpWorkspace from "@/components/help/HelpWorkspace.vue";
import PageCommandBar from "@/components/layout/PageCommandBar.vue";
import StatusStrip from "@/components/layout/StatusStrip.vue";

const help = ref("");
const loading = ref(true);
const error = ref<string | null>(null);
const asyncState = computed(() => loading.value ? "initial-loading" : error.value ? "error" : help.value ? "ready" : "empty");
const statusItems = computed(() => [{ id: "source", label: "Source", value: "/help.md" }, { id: "render", label: "Render", value: "sanitized Markdown" }, { id: "state", label: "State", value: asyncState.value, tone: error.value ? "error" as const : loading.value ? "info" as const : "ok" as const }]);
onMounted(loadHelp);
async function loadHelp(): Promise<void> { loading.value = true; const response = await fetchText("/help.md", { timeoutMs: 8000 }); help.value = response.ok ? response.data ?? "" : ""; error.value = response.ok ? null : response.error ?? "帮助内容加载失败"; loading.value = false; }
</script>

<template>
  <section class="route-stack help-page">
    <PageCommandBar eyebrow="System" title="帮助" description="同源加载仓库维护的帮助文档，以可阅读的 Markdown 呈现。" />
    <StatusStrip :items="statusItems" label="帮助内容状态" />
    <AsyncBoundary :state="asyncState" :has-content="Boolean(help)" label="读取帮助内容" empty-title="帮助内容为空" empty-description="同源 help.md 未返回正文。" error-title="帮助内容不可用" :error="error || '请求未完成'" @retry="loadHelp">
      <HelpWorkspace v-if="help" :content="help" />
    </AsyncBoundary>
  </section>
</template>
