rebuild(stage-1): establish isolated application skeleton

next/frontend/src/app/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <RouterView />
+</template>

next/frontend/src/app/router.ts

@@ -0,0 +1,8 @@
+import { createRouter, createWebHistory } from "vue-router";
+
+import BootstrapView from "./views/BootstrapView.vue";
+
+export default createRouter({
+  history: createWebHistory(),
+  routes: [{ path: "/", name: "bootstrap", component: BootstrapView }],
+});

next/frontend/src/app/views/BootstrapView.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+import { api } from "../../shared/api/client";
+
+type Health = {
+  status: string;
+  environment: string;
+};
+
+const health = ref<Health | null>(null);
+const failure = ref("");
+
+onMounted(async () => {
+  try {
+    health.value = await api.get<Health>("/health");
+  } catch (error) {
+    failure.value = error instanceof Error ? error.message : "服务连接失败";
+  }
+});
+</script>
+
+<template>
+  <main class="bootstrap-view">
+    <section class="bootstrap-panel" aria-live="polite">
+      <h1>小白复盘</h1>
+      <p v-if="health">新系统基础服务已连接（{{ health.environment }}）</p>
+      <p v-else-if="failure" class="failure">{{ failure }}</p>
+      <p v-else>正在连接基础服务</p>
+    </section>
+  </main>
+</template>
+
+<style scoped>
+.bootstrap-view {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: var(--space-16);
+}
+
+.bootstrap-panel {
+  width: min(100%, 420px);
+  padding: var(--space-22);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+
+h1 {
+  margin: 0 0 var(--space-8);
+  font-size: var(--font-page-title);
+}
+
+p {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.failure {
+  color: var(--warning);
+}
+</style>