20260814173126

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

@@ -1,5 +1,5 @@
 <script setup>
-import Button from './components/ui/Button.vue'
+import Button from './components/ui/button/button.vue'
 import ColorThemePicker from './components/ui/ColorThemePicker.vue'
 import ThemeToggle from './components/ui/ThemeToggle.vue'
 </script>
@@ -25,14 +25,83 @@ import ThemeToggle from './components/ui/ThemeToggle.vue'
       </div>
 
       <div class="button-row">
-        <Button>主要操作</Button>
-        <Button variant="secondary">次要操作</Button>
-        <Button variant="outline">描边按钮</Button>
-        <Button variant="ghost">低强调</Button>
-        <Button variant="destructive">危险操作</Button>
+        <Button type="default">主要操作</Button>
+        <Button type="secondary">次要操作</Button>
+        <Button type="outline">描边按钮</Button>
+        <Button type="ghost">低强调</Button>
+        <Button type="destructive">危险操作</Button>
+        <Button type="link">链接按钮</Button>
       </div>
     </section>
   </main>
 </template>
 
-<style scoped></style>
+<style scoped>
+.app-shell {
+  width: min(100% - 2rem, 72rem);
+  min-height: 100vh;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 2rem 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.theme-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.eyebrow {
+  margin: 0 0 0.375rem;
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.showcase-section {
+  padding: 3rem 0;
+}
+
+.section-heading {
+  max-width: 36rem;
+}
+
+.section-heading > p:last-child {
+  margin: 0.75rem 0 0;
+  color: var(--muted-foreground);
+}
+
+.button-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+@media (max-width: 640px) {
+  .app-header {
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 1.25rem 0;
+  }
+
+  .theme-controls {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .showcase-section {
+    padding: 2rem 0;
+  }
+}
+</style>