20260813222656

code/fms/fms-vue/src/App.vue

@@ -1,16 +1,38 @@
-<script setup lang="ts">
-import { defineAsyncComponent } from "vue";
-import { Toaster } from "@/components/ui/sonner";
-import ConfirmDialog from "@/components/ConfirmDialog.vue";
-
-const FpsMonitor = import.meta.env.DEV
-  ? defineAsyncComponent(() => import("@/components/FpsMonitor.vue"))
-  : null;
+<script setup>
+import Button from './components/ui/Button.vue'
+import ColorThemePicker from './components/ui/ColorThemePicker.vue'
+import ThemeToggle from './components/ui/ThemeToggle.vue'
 </script>
 
 <template>
-  <router-view />
-  <Toaster position="top-center" />
-  <ConfirmDialog />
-  <FpsMonitor v-if="FpsMonitor" />
+  <main class="app-shell">
+    <header class="app-header">
+      <div>
+        <p class="eyebrow">FMS UI</p>
+        <h1>基础组件</h1>
+      </div>
+      <div class="theme-controls">
+        <ColorThemePicker />
+        <ThemeToggle />
+      </div>
+    </header>
+
+    <section class="showcase-section" aria-labelledby="button-title">
+      <div class="section-heading">
+        <p class="eyebrow">Components</p>
+        <h2 id="button-title">Button</h2>
+        <p>保持克制的交互组件，优先保证可读性和响应速度。</p>
+      </div>
+
+      <div class="button-row">
+        <Button>主要操作</Button>
+        <Button variant="secondary">次要操作</Button>
+        <Button variant="outline">描边按钮</Button>
+        <Button variant="ghost">低强调</Button>
+        <Button variant="destructive">危险操作</Button>
+      </div>
+    </section>
+  </main>
 </template>
+
+<style scoped></style>