add(MyButton): 新增按钮组件

frontend/web/src/components/MyButton.vue

@@ -0,0 +1,130 @@
+<template>
+  <div id="btn">
+    <button 
+      class="submit-btn" 
+      :disabled="props.disabled" 
+      v-bind="attrs" 
+      :class="[
+        `variant-${props.variant}`, // 动态绑定样式类
+        { 'is-loading': props.loading } // 加载状态类
+      ]"
+    >
+      <slot></slot>
+    </button>
+  </div>
+</template>
+
+<script>
+// 使用 Options API 块设置配置选项
+export default {
+  // 阻止父组件透传的属性（如 @click, style, data-*）默认应用到根元素 <div> 上
+  inheritAttrs: false 
+}
+</script>
+
+<script setup>
+import { defineProps, useAttrs, onMounted } from 'vue';
+import feather from 'feather-icons'
+
+const props = defineProps({
+    // 按钮样式变体：primary, secondary, danger, text
+    'variant': {
+        type: String,
+        default: 'primary', 
+        validator: (value) => ['primary', 'secondary', 'danger', 'text'].includes(value)
+    },
+    // 明确接收 disabled 属性，以便在脚本中控制和类型检查
+    'disabled': {
+        type: Boolean,
+        default: false
+    },
+    // 加载状态 (可以与 disabled 结合使用)
+    'loading': {
+        type: Boolean,
+        default: false
+    }
+})
+
+// 获取所有未被 props 声明接收的属性 (透传属性)
+const attrs = useAttrs()
+</script>
+
+<style scoped>
+/* ======================================= */
+/* 基础样式和布局 */
+/* ======================================= */
+.submit-btn {
+  margin-top: 10px;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  font-size: 15px;
+  cursor: pointer;
+  
+  /* 布局：使用 Flex 确保图标和文本对齐 */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px; /* 文本和图标之间的间距 */
+  
+  transition: all 0.2s, transform 0.1s; 
+}
+
+
+
+/* 交互状态 */
+.submit-btn:active {
+  transform: scale(0.98);
+}
+.submit-btn:disabled,
+.submit-btn.is-loading {
+  opacity: 0.6;
+  cursor: not-allowed !important;
+  pointer-events: none; /* 禁用点击事件 */
+}
+
+
+/* ======================================= */
+/* 样式变体 (Variants) */
+/* ======================================= */
+
+/* --- 1. Primary (主色调) --- */
+.variant-primary {
+  background: #4f46e5; /* Indigo 品牌蓝 */
+  color: white;
+}
+.variant-primary:hover {
+  background: #4338ca;
+}
+
+/* --- 2. Secondary (次要/灰色调) --- */
+.variant-secondary {
+  background: #e2e8f0; /* Slate 浅灰 */
+  color: #1e293b;
+}
+.variant-secondary:hover {
+  background: #cbd5e1;
+}
+
+/* --- 3. Danger (危险/红色调) --- */
+.variant-danger {
+  background: #ef4444; /* Red 红色 */
+  color: white;
+}
+.variant-danger:hover {
+  background: #dc2626;
+}
+
+/* --- 4. Text (文本按钮/无背景) --- */
+.variant-text {
+  background: transparent;
+  color: #4f46e5;
+  padding: 10px 12px; /* 减小 padding 以适应文本按钮 */
+}
+.variant-text:hover {
+  text-decoration: underline;
+  background: transparent;
+  color: #4338ca;
+}
+</style>

frontend/web/src/views/Test.vue

@@ -2,19 +2,24 @@
 
 <div id="Test">
 <MyInput icon-name="user"></MyInput>
-
+<MyButton >登录...</MyButton>
 </div>
 
 </template>
 
 <script setup>
-import MyInput from '@/components/MyInput.vue';
+import MyInput from '@/components/IconInput.vue';
+import MyButton from '@/components/MyButton.vue';
 
 
 </script>
 
 
 <style scoped>
-
+#Test {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+}
 
 </style>