import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import i18n from "./i18n";
import "./styles/global.css";
import "./styles/ai-md.css";
import "./styles/components.css";
import "./components/settings/settings.css"; // UX 重构阶段1:设置统一组件库全局

const app = createApp(App);

// 全局错误兜底:捕获 Vue runtime 未处理错误(组件渲染/生命周期/事件回调抛错),
// 仅记录不中断,防止整页白屏。组件级降级 UI 由 ErrorBoundary.vue 负责。
app.config.errorHandler = (err, instance, info) => {
  const tag = instance?.$options?.name || instance?.$options?.__name || "unknown";
  console.error(`[Vue error] <${tag}> ${info}:`, err);
};

app.use(router).use(i18n);

// 等路由就绪再 mount:分离窗口(approval-popup / ai-detached / fe-detached)的 hash 路由须先解析完,
// App.vue 的 isDetached(route.path === '/approval-popup' ...)才命中真值。否则初始帧 route.path='/'
// → isDetached=false → AppLayout 把完整主布局(侧栏+主区+AI 面板)渲染进分离小窗
// (approval-popup 380×480 尤为明显,看起来像「小小的完整 DevFlow 界面」)。
router.isReady().then(() => app.mount("#app"));