组件修改

urbanLifelineWeb/packages/shared/src/components/base/button/Button.vue

@@ -1,13 +1,52 @@
 <template>
-    <button :type="type" :style="style"></button>
+    <button 
+        :class="[
+            'btn',
+            `btn--${variant}`,
+            `btn--${size}`,
+            {
+                'btn--disabled': disabled,
+                'btn--loading': loading
+            }
+        ]"
+        :type="type" 
+        :disabled="disabled || loading"
+        :style="customStyle"
+        @click="handleClick"
+    >
+        <span v-if="loading" class="btn__spinner"></span>
+        <span class="btn__content">
+            <slot></slot>
+        </span>
+    </button>
 </template>
 <script setup lang="ts">
 interface Props{
-    type: 'button' | 'submit' | 'reset',
-    style: string
+    type?: 'button' | 'submit' | 'reset'
+    variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'gradient-blue' | 'gradient-purple' | 'gradient-pink' | 'gradient-orange' | 'gradient-green' | 'gradient-blue-special'
+    size?: 'small' | 'medium' | 'large'
+    disabled?: boolean
+    loading?: boolean
+    customStyle?: string
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+    type: 'button',
+    variant: 'primary',
+    size: 'medium',
+    disabled: false,
+    loading: false
+})
+
+const emit = defineEmits<{
+    click: [event: MouseEvent]
+}>()
+
+const handleClick = (event: MouseEvent) => {
+    if (!props.disabled && !props.loading) {
+        emit('click', event)
+    }
+}
 
 </script>
 

urbanLifelineWeb/packages/shared/src/components/base/button/ButtonExample.vue

@@ -0,0 +1,165 @@
+<template>
+    <div class="button-test">
+        <h2>按钮组件测试</h2>
+        
+        <!-- 基础按钮 -->
+        <section class="test-section">
+            <h3>基础按钮</h3>
+            <div class="button-group">
+                <Button variant="primary">Primary</Button>
+                <Button variant="secondary">Secondary</Button>
+                <Button variant="danger">Danger</Button>
+                <Button variant="success">Success</Button>
+                <Button variant="warning">Warning</Button>
+            </div>
+        </section>
+
+        <!-- 渐变按钮 -->
+        <section class="test-section">
+            <h3>渐变按钮</h3>
+            <div class="button-group">
+                <Button variant="gradient-blue">Gradient Blue</Button>
+                <Button variant="gradient-purple">Gradient Purple</Button>
+                <Button variant="gradient-pink">Gradient Pink</Button>
+                <Button variant="gradient-orange">Gradient Orange</Button>
+                <Button variant="gradient-green">Gradient Green</Button>
+                <Button variant="gradient-blue-special">Special Blue</Button>
+            </div>
+        </section>
+
+        <!-- 尺寸测试 -->
+        <section class="test-section">
+            <h3>按钮尺寸（渐变示例）</h3>
+            <div class="button-group">
+                <Button variant="gradient-blue" size="small">Small</Button>
+                <Button variant="gradient-pink" size="medium">Medium</Button>
+                <Button variant="gradient-green" size="large">Large</Button>
+            </div>
+        </section>
+
+        <!-- 状态测试 -->
+        <section class="test-section">
+            <h3>按钮状态</h3>
+            <div class="button-group">
+                <Button variant="gradient-blue" :loading="isLoading" @click="toggleLoading">
+                    {{ isLoading ? '加载中...' : '点击加载' }}
+                </Button>
+                <Button variant="gradient-purple" disabled>禁用按钮</Button>
+                <Button variant="gradient-pink" :loading="true">持续加载</Button>
+            </div>
+        </section>
+
+        <!-- 混合展示 -->
+        <section class="test-section">
+            <h3>混合展示</h3>
+            <div class="mixed-demo">
+                <div class="card">
+                    <h4>渐变卡片演示</h4>
+                    <p>这是一个使用渐变按钮的卡片示例</p>
+                    <div class="card-actions">
+                        <Button variant="gradient-blue" size="small">详情</Button>
+                        <Button variant="gradient-green" size="small">确认</Button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import Button from './Button.vue'
+
+// 响应式数据
+const isLoading = ref(false)
+
+// 方法
+const toggleLoading = () => {
+    isLoading.value = true
+    setTimeout(() => {
+        isLoading.value = false
+    }, 2000)
+}
+</script>
+
+<style lang="scss" scoped>
+.button-test {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+    h2 {
+        text-align: center;
+        color: #333;
+        margin-bottom: 30px;
+        font-size: 28px;
+    }
+
+    .test-section {
+        margin-bottom: 40px;
+        padding: 20px;
+        border: 1px solid #e1e5e9;
+        border-radius: 8px;
+        background: white;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+        h3 {
+            margin: 0 0 20px 0;
+            color: #495057;
+            font-size: 20px;
+            border-bottom: 2px solid #f8f9fa;
+            padding-bottom: 10px;
+        }
+
+        .button-group {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+    }
+
+    .mixed-demo {
+        .card {
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            padding: 24px;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            max-width: 400px;
+
+            h4 {
+                margin: 0 0 12px 0;
+                color: #374151;
+                font-size: 18px;
+            }
+
+            p {
+                margin: 0 0 20px 0;
+                color: #6b7280;
+                line-height: 1.6;
+            }
+
+            .card-actions {
+                display: flex;
+                gap: 8px;
+                justify-content: flex-end;
+            }
+        }
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .button-test {
+        padding: 16px;
+
+        .test-section {
+            padding: 16px;
+
+            .button-group {
+                gap: 8px;
+            }
+        }
+    }
+}
+</style>

urbanLifelineWeb/packages/shared/src/components/base/button/button.scss

@@ -0,0 +1,189 @@
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    text-decoration: none;
+    white-space: nowrap;
+    
+    &:focus {
+        outline: 2px solid rgba(59, 130, 246, 0.5);
+        outline-offset: 2px;
+    }
+
+    // 尺寸
+    &--small {
+        padding: 6px 12px;
+        font-size: 12px;
+        line-height: 1.4;
+    }
+
+    &--medium {
+        padding: 8px 16px;
+        font-size: 14px;
+        line-height: 1.5;
+    }
+
+    &--large {
+        padding: 12px 20px;
+        font-size: 16px;
+        line-height: 1.5;
+    }
+
+    // 变体
+    &--primary {
+        background-color: #3b82f6;
+        color: white;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background-color: #2563eb;
+        }
+    }
+
+    &--secondary {
+        background-color: #f1f5f9;
+        color: #475569;
+        border: 1px solid #e2e8f0;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background-color: #e2e8f0;
+        }
+    }
+
+    &--danger {
+        background-color: #ef4444;
+        color: white;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background-color: #dc2626;
+        }
+    }
+
+    &--success {
+        background-color: #10b981;
+        color: white;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background-color: #059669;
+        }
+    }
+
+    &--warning {
+        background-color: #f59e0b;
+        color: white;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background-color: #d97706;
+        }
+    }
+
+    // 渐变变体
+    &--gradient-blue {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+    }
+
+    &--gradient-purple {
+        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+        color: #374151;
+        border: none;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background: linear-gradient(135deg, #96e6e2 0%, #fcc4d1 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(168, 237, 234, 0.4);
+        }
+    }
+
+    &--gradient-pink {
+        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+        color: white;
+        border: none;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background: linear-gradient(135deg, #ff888c 0%, #feb7dd 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(255, 154, 158, 0.4);
+        }
+    }
+
+    &--gradient-orange {
+        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+        color: #374151;
+        border: none;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background: linear-gradient(135deg, #ffe4c0 0%, #fba88d 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(252, 182, 159, 0.4);
+        }
+    }
+
+    &--gradient-green {
+        background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
+        color: #374151;
+        border: none;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background: linear-gradient(135deg, #96dfbf 0%, #d0e6af 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(168, 230, 207, 0.4);
+        }
+    }
+
+    &--gradient-blue-special {
+        background: linear-gradient(281.59deg, #162C8E 8.51%, #1D72D3 66.15%, #AEF1FF 100.83%);
+        color: white;
+        border: none;
+        
+        &:hover:not(.btn--disabled):not(.btn--loading) {
+            background: linear-gradient(281.59deg, #142558 8.51%, #1a64b8 66.15%, #9ce8f5 100.83%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(29, 114, 211, 0.4);
+        }
+    }
+
+    // 状态
+    &--disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    &--loading {
+        cursor: wait;
+    }
+
+    // 加载动画
+    &__spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid transparent;
+        border-top: 2px solid currentColor;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+
+    &__content {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}