feat: 功能优化

frontend/app/web-gold/src/components/GradientButton.vue

@@ -0,0 +1,203 @@
+<template>
+  <button
+    :class="['gradient-button', { 'gradient-button--disabled': disabled, 'gradient-button--loading': loading }]"
+    :disabled="disabled || loading"
+    @click="handleClick"
+  >
+    <span v-if="loading" class="gradient-button__loading">
+      <a-spin size="small" />
+      <span v-if="loadingText" class="gradient-button__loading-text">{{ loadingText }}</span>
+    </span>
+    <span v-else class="gradient-button__content">
+      <slot name="icon">
+        <span v-if="icon" class="gradient-button__icon">
+          <GmIcon :name="icon" :size="iconSize" />
+        </span>
+      </slot>
+      <span class="gradient-button__text">
+        <slot>{{ text }}</slot>
+      </span>
+    </span>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import GmIcon from '@/components/icons/Icon.vue'
+
+const props = defineProps({
+  // 按钮文本
+  text: {
+    type: String,
+    default: ''
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 是否加载中
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  // 加载中的文本
+  loadingText: {
+    type: String,
+    default: ''
+  },
+  // 图标名称
+  icon: {
+    type: String,
+    default: ''
+  },
+  // 图标大小
+  iconSize: {
+    type: Number,
+    default: 16
+  },
+  // 按钮大小
+  size: {
+    type: String,
+    default: 'large', // large, middle, small
+    validator: (value) => ['large', 'middle', 'small'].includes(value)
+  },
+  // 是否块级按钮
+  block: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['click'])
+
+const handleClick = (event) => {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}
+
+const buttonClass = computed(() => {
+  return [
+    `gradient-button--${props.size}`,
+    {
+      'gradient-button--block': props.block
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.gradient-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: 1px solid rgba(24, 144, 255, 0.3);
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #ffffff;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
+  box-shadow: 0 0 0 0 rgba(24, 144, 255, 0);
+  user-select: none;
+}
+
+.gradient-button:hover {
+  background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
+  border-color: rgba(24, 144, 255, 0.5);
+  box-shadow: 0 0 6px rgba(24, 144, 255, 0.25);
+}
+
+.gradient-button:active {
+  background: linear-gradient(135deg, #096DD9 0%, #1890FF 100%);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.gradient-button__content,
+.gradient-button__loading {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.gradient-button__icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.gradient-button__text {
+  line-height: 1;
+}
+
+.gradient-button__loading-text {
+  margin-left: 4px;
+}
+
+/* 尺寸变体 */
+.gradient-button--large {
+  padding: 10px 20px;
+  font-size: 15px;
+  min-height: 36px;
+}
+
+.gradient-button--middle {
+  padding: 8px 16px;
+  font-size: 14px;
+  min-height: 32px;
+}
+
+.gradient-button--small {
+  padding: 4px 12px;
+  font-size: 13px;
+  min-height: 24px;
+}
+
+/* 块级按钮 */
+.gradient-button--block {
+  width: 100%;
+  display: flex;
+}
+
+/* 禁用状态 */
+.gradient-button--disabled,
+.gradient-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  background: linear-gradient(135deg, #096DD9 0%, #1890FF 100%);
+  border-color: rgba(24, 144, 255, 0.2);
+  box-shadow: none;
+}
+
+.gradient-button--disabled:hover,
+.gradient-button:disabled:hover {
+  background: linear-gradient(135deg, #096DD9 0%, #1890FF 100%);
+  border-color: rgba(24, 144, 255, 0.2);
+  box-shadow: none;
+}
+
+/* 加载状态 */
+.gradient-button--loading {
+  cursor: wait;
+}
+
+.gradient-button--loading:hover {
+  transform: none;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .gradient-button--large {
+    padding: 8px 16px;
+    font-size: 14px;
+    min-height: 32px;
+  }
+}
+</style>