<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { computed, inject } from "vue";
import { useAppDialogBridge } from "@/composables/useAppDialogBridge";
import DialogHost from "@/components/DialogHost.vue";
import type { DialogInstance } from "@/dialogs/types";
const { t } = useI18n();
const { activeDialog, queueText, handleDialogFinished } = useAppDialogBridge();
const injectedHeader = inject<string | null>("headerTextOverride", null);
const headerText = computed(() => {
const value = (injectedHeader || "").trim();
return value.length > 0 ? value : t("app.headerToolName");
});
const topic = computed(() => {
const dialog = activeDialog.value as DialogInstance | null;
const payload = dialog?.payload as { topic?: unknown } | undefined;
const raw = payload?.topic;
if (typeof raw !== "string") return null;
const trimmed = raw.trim();
return trimmed.length > 0 ? trimmed : null;
});
const displayHeader = computed(() => {
const base = headerText.value;
const topicValue = topic.value;
return topicValue ? `${base} • ${topicValue}` : base;
});
</script>
<template>
<main class="container">
<!-- 顶部栏 / 标题 -->
<header v-if="activeDialog" class="top-bar">
<div class="tool-name">
<img src="@/assets/icon.svg" alt="icon" class="tool-icon" />
<span class="separator">•</span>
<span>{{ displayHeader }}</span>
</div>
<div class="queue-status">
<span class="status-dot" />
{{ queueText }}
</div>
</header>
<h1 v-else class="title">
<img src="@/assets/icon.svg" alt="icon" class="title-icon" />
{{ t("app.title") }}
</h1>
<!-- 动态对话框区域 -->
<DialogHost
v-if="activeDialog"
:dialog="activeDialog"
@finished="handleDialogFinished"
/>
<!-- 空闲状态 -->
<section v-else class="idle">
<p>{{ t("app.idle.noRequest") }}</p>
<p class="hint">
{{ t("app.idle.hint") }}
</p>
</section>
</main>
</template>
<style>
/* App.vue 样式已迁移到 src/styles/base.css */
/* 保留此空白 style 标签以避免潜在的构建问题 */
</style>
