From 6ca7a8275c4ed13f391505c7b780ab0b44d81972 Mon Sep 17 00:00:00 2001
From: nanxun <nanxun@nxsir.cn>
Date: Sun, 14 Dec 2025 14:12:47 +0800
Subject: [PATCH] =?UTF-8?q?add(MyButton):=20=E6=96=B0=E5=A2=9E=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/vue3组件文档.md                          | 150 ++++++++++++++++++
 .../components/{MyInput.vue => IconInput.vue} |   0
 frontend/web/src/components/MyButton.vue      | 130 +++++++++++++++
 frontend/web/src/views/Test.vue               |  11 +-
 4 files changed, 288 insertions(+), 3 deletions(-)
 create mode 100644 docs/vue3组件文档.md
 rename frontend/web/src/components/{MyInput.vue => IconInput.vue} (100%)
 create mode 100644 frontend/web/src/components/MyButton.vue

diff --git a/docs/vue3组件文档.md b/docs/vue3组件文档.md
new file mode 100644
index 0000000..a3631dd
--- /dev/null
+++ b/docs/vue3组件文档.md
@@ -0,0 +1,150 @@
+# 📚 MyButton
+
+## 🏷️ 1. 组件概览
+
+### 基础信息
+
+| **属性**     | **值**                                                     |
+| ------------ | ---------------------------------------------------------- |
+| **组件名称** | `MyButton`                                                 |
+| **文件路径** | `@/components/MyButton.vue`                                |
+| **用途**     | 封装项目中的所有交互按钮，提供统一的样式、交互状态和动画。 |
+| **版本**     | v1.0.0                                                     |
+| **核心依赖** | `feather-icons` (需要父组件或全局初始化)                   |
+
+### 引入方式
+
+JavaScript
+
+```
+import MyButton from '@/components/MyButton.vue';
+```
+
+## 💡 2. 使用示例
+
+### 基础用法（Primary Variant）
+
+HTML
+
+```
+<MyButton>保存配置</MyButton>
+
+<MyButton variant="primary">
+  <i data-feather="send"></i>
+  发送邮件
+</MyButton>
+```
+
+### 状态和事件绑定
+
+HTML
+
+```
+<MyButton variant="secondary" :disabled="isSaving">
+  取消
+</MyButton>
+
+<MyButton variant="danger" :loading="isDeleting" @click="handleDelete">
+  删除数据
+</MyButton>
+```
+
+## ⚙️ 3. Props 属性说明 (API)
+
+| **名称 (Prop Name)** | **类型 (Type)** | **可选值/说明**                                              | **默认值 (Default)** | **描述**                                                 |
+| -------------------- | --------------- | ------------------------------------------------------------ | -------------------- | -------------------------------------------------------- |
+| `variant`            | `String`        | `primary` (主色调), `secondary` (次要/灰色), `danger` (危险/红色), `text` (纯文本链接样式) | `'primary'`          | 定义按钮的外观和主题颜色。                               |
+| `disabled`           | `Boolean`       | —                                                            | `false`              | 明确禁用按钮，移除点击交互和视觉提示。                   |
+| `loading`            | `Boolean`       | —                                                            | `false`              | 设置为 `true` 时，按钮显示加载状态，并自动应用禁用样式。 |
+
+## 🧩 4. 插槽说明 (Slots)
+
+| **名称 (Slot Name)** | **用途**                                   | **插槽 Prop** | **示例用法**                      |
+| -------------------- | ------------------------------------------ | ------------- | --------------------------------- |
+| **默认** (`default`) | 用于插入按钮的**文本内容**或其他核心元素。 | 无            | `<MyButton> 按钮文本 </MyButton>` |
+
+## ⚡ 5. 事件说明 (Events)
+
+| **名称 (Event Name)** | **参数 (Payload)**    | **描述**                                                     |
+| --------------------- | --------------------- | ------------------------------------------------------------ |
+| `@click`              | `(event: MouseEvent)` | 按钮被点击时触发。由于使用了 `v-bind="attrs"`，此事件是透传自内部 `<button>`。 |
+
+# 📚 IconInput
+
+## 🏷️ 1. 组件概览
+
+### 基础信息
+
+| **属性**     | **值**                                                       |
+| ------------ | ------------------------------------------------------------ |
+| **组件名称** | `IconInput`                                                  |
+| **文件路径** | `@/components/IconInput.vue`                                 |
+| **用途**     | 封装带图标的输入框，支持 `v-model` 双向绑定，并提供聚焦时图标颜色变化等高级交互。 |
+| **版本**     | v1.0.0                                                       |
+| **核心依赖** | `feather-icons` (需要在项目中安装)                           |
+| **特性**     | 支持 `v-model`，自动集成 Feather Icons。                     |
+
+### 引入方式
+
+JavaScript
+
+```
+import IconInput from '@/components/IconInput.vue';
+```
+
+## 💡 2. 使用示例
+
+### 基础用法（双向绑定）
+
+HTML
+
+```
+<template>
+  <div>
+    <IconInput 
+      v-model="username" 
+      lab="用户名" 
+      icon-name="user" 
+      placeholder="请输入用户名" 
+      type="text"
+    />
+    
+    <IconInput 
+      v-model="password" 
+      lab="密码" 
+      icon-name="lock" 
+      placeholder="请输入密码" 
+      type="password"
+    />
+    
+    <p>当前用户名: {{ username }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import CustomInput from './CustomInput.vue';
+
+const username = ref('');
+const password = ref('');
+</script>
+```
+
+## ⚙️ 3. Props 属性说明 (API)
+
+| **名称 (Prop Name)** | **类型 (Type)** | **可选值/说明**                                              | **默认值 (Default)** | **描述**                                     |
+| -------------------- | --------------- | ------------------------------------------------------------ | -------------------- | -------------------------------------------- |
+| `v-model` 绑定       | 见 `modelValue` | —                                                            | —                    | **使用标准 `v-model` 语法实现双向绑定。**    |
+| `modelValue`         | `String`        | —                                                            | `''`                 | (内部 Prop) `v-model` 绑定传入的值。         |
+| `lab`                | `String`        | —                                                            | `'输入框'`           | 输入框上方的标签（Label）文本。              |
+| `placeholder`        | `String`        | —                                                            | `''`                 | 输入框的占位符文本。                         |
+| `type`               | `String`        | `text`, `password`, `email` 等原生类型                       | `'text'`             | 设置输入框的 `type` 属性。                   |
+| `iconName`           | `String`        | 任何有效的 [Feather Icon] 名称（例如 `'mail'`, `'user'`, `'lock'`）。 | **无**               | **必填项**，用于指定显示在输入框左侧的图标。 |
+
+## ⚡ 4. 事件说明 (Events)
+
+| **名称 (Event Name)** | **参数 (Payload)**   | **描述**                                                     |
+| --------------------- | -------------------- | ------------------------------------------------------------ |
+| `@update:modelValue`  | `(newValue: string)` | **(核心事件)** 当输入框的值变化时，触发此事件来更新父组件通过 `v-model` 绑定的数据。 |
+
+## 
\ No newline at end of file
diff --git a/frontend/web/src/components/MyInput.vue b/frontend/web/src/components/IconInput.vue
similarity index 100%
rename from frontend/web/src/components/MyInput.vue
rename to frontend/web/src/components/IconInput.vue
diff --git a/frontend/web/src/components/MyButton.vue b/frontend/web/src/components/MyButton.vue
new file mode 100644
index 0000000..85e39ec
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/web/src/views/Test.vue b/frontend/web/src/views/Test.vue
index 6745c7f..dc5029a 100644
--- a/frontend/web/src/views/Test.vue
+++ b/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>
\ No newline at end of file