20260816220132

code/fms/fms-vue/src/components/ui/demo/button.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { Plus, Search, Trash2 } from '@lucide/vue'
+import Button from '../button/button.vue'
+</script>
+
+<template>
+  <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>
+
+    <p class="demo-label">基础用法</p>
+    <div class="demo-panel">
+      <Button type="default">主要操作</Button>
+      <Button type="secondary">次要操作</Button>
+      <Button type="outline">描边按钮</Button>
+      <Button type="ghost">低强调</Button>
+      <Button type="danger">危险操作</Button>
+      <Button type="link">链接按钮</Button>
+    </div>
+
+    <p class="demo-label">禁用态</p>
+    <div class="demo-panel">
+      <Button disabled>默认禁用</Button>
+      <Button type="secondary" disabled>次要禁用</Button>
+      <Button type="outline" disabled>描边禁用</Button>
+      <Button type="danger" disabled>危险禁用</Button>
+    </div>
+
+    <p class="demo-label">加载态</p>
+    <div class="demo-panel">
+      <Button loading>提交中</Button>
+      <Button type="secondary" loading>保存中</Button>
+      <Button type="outline" loading>加载中</Button>
+    </div>
+
+    <p class="demo-label">通栏</p>
+    <div class="demo-panel">
+      <Button block>通栏按钮</Button>
+    </div>
+
+    <p class="demo-label">图标按钮</p>
+    <div class="demo-panel">
+      <Button><Plus /> 新建</Button>
+      <Button type="secondary"><Search /> 搜索</Button>
+      <Button type="outline">删除 <Trash2 /></Button>
+      <Button type="danger" aria-label="删除"><Trash2 /></Button>
+      <Button type="ghost" aria-label="新建"><Plus /></Button>
+    </div>
+  </section>
+</template>