Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

2026-09-10 19:21:56 +08:00
commit 51ce3a28f7
654 changed files with 49082 additions and 0 deletions
@@ -0,0 +1,86 @@
+<template>
+  <button
+    :class="classes"
+    :disabled="disabled || loading"
+    @click="onClick"
+  >
+    <span v-if="loading" class="spinner" aria-hidden="true"></span>
+    <svg
+      v-if="icon && !loading"
+      class="btn-icon"
+      width="16" height="16"
+      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+    >
+      <path :d="icon" />
+    </svg>
+    <span class="btn-label"><slot>{{ text }}</slot></span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'AaButton',
+  props: {
+    type: { type: String, default: 'default', validator: v => ['primary', 'default', 'text', 'link', 'danger'].includes(v) },
+    size: { type: String, default: 'default', validator: v => ['large', 'default', 'small'].includes(v) },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    icon: { type: String, default: '' },   // svg path d，例如 "M12 5v14M5 12h14"
+    text: { type: String, default: '' }
+  },
+  computed: {
+    classes() {
+      const sizeMap = { large: 'btn-lg', default: 'btn-md', small: 'btn-sm' };
+      return [
+        'btn',
+        `btn-${this.type}`,
+        sizeMap[this.size],
+        { 'btn-disabled': this.disabled && !this.loading, 'is-loading': this.loading }
+      ];
+    }
+  },
+  methods: {
+    onClick(e) {
+      if (this.disabled || this.loading) return;
+      this.$emit('click', e);
+    }
+  }
+};
+</script>
+
+<!-- 样式对齐 components.css 与 button.json 契约 -->
+<style>
+.btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: 4px; border: 1px solid transparent; cursor: pointer;
+  white-space: nowrap; font-size: 14px; line-height: 22px;
+  border-radius: 4px; min-width: 64px; padding: 0 12px;
+  box-sizing: border-box; transition: background .15s, border-color .15s;
+  font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
+}
+.btn:focus-visible { outline: 2px solid rgba(47,84,235,0.2); outline-offset: 2px; }
+.btn-primary { background: #2F54EB; color: #fff; }
+.btn-primary:hover { background: #1D39C4; }
+.btn-primary:active { background: #10239E; }
+.btn-default { background: #fff; border-color: #E8ECF1; color: #262626; }
+.btn-default:hover { border-color: #2F54EB; }
+.btn-text { background: transparent; color: #2F54EB; }
+.btn-text:hover { background: #F0F5FF; }
+.btn-link { background: transparent; border: none; color: #2F54EB; min-width: auto; padding: 0; }
+.btn-link:hover { background: #F0F5FF; }
+.btn-danger { background: #F5222D; color: #fff; }
+.btn-danger:hover { filter: brightness(.92); }
+.btn-lg { height: 40px; }
+.btn-md { height: 32px; }
+.btn-sm { height: 24px; }
+.btn-disabled, .btn:disabled { background: #F5F5F5; border-color: transparent; color: #BFBFBF; cursor: not-allowed; }
+.btn-disabled:hover, .btn:disabled:hover { background: #F5F5F5; filter: none; }
+.btn .btn-icon { flex-shrink: 0; }
+.btn.is-loading { cursor: progress; position: relative; }
+.btn.is-loading .btn-label { opacity: .65; }
+.btn .spinner {
+  width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;
+  border-radius: 50%; animation: aa-btn-spin .6s linear infinite;
+}
+@keyframes aa-btn-spin { to { transform: rotate(360deg); } }
+</style>