u

code/base-project/base-vue/src/App.vue

@@ -1,152 +1,8 @@
-<script>
-export default {
-  directives: {
-    shine: {
-      beforeMount(el) {
-        el.style.position = el.style.position || 'relative'
-        el.style.overflow = 'hidden'
-
-        const trigger = () => {
-          if (el.disabled)
-            return
-
-          // 清理上一次效果
-          if (el.__shineTimer) {
-            clearTimeout(el.__shineTimer)
-            el.classList.remove('btn-shine')
-          }
-
-          void el.offsetWidth
-          el.classList.add('btn-shine')
-
-          el.__shineTimer = setTimeout(() => {
-            el.classList.remove('btn-shine')
-            el.__shineTimer = null
-          }, 300)
-        }
-
-        el.addEventListener('click', trigger)
-        el.addEventListener('keydown', (e) => {
-          if (e.key === 'Enter' || e.key === ' ')
-            trigger()
-        })
-      },
-    },
-  },
-}
+<script setup lang="ts">
 </script>
 
 <template>
-  <div class="btn-demo">
-    <button v-shine class="btn btn-primary">
-      主按钮
-    </button>
-    <button v-shine class="btn btn-secondary">
-      次按钮
-    </button>
-    <button v-shine class="btn btn-danger">
-      危险按钮
-    </button>
-    <button v-shine class="btn btn-link">
-      链接按钮
-    </button>
-  </div>
+  <AButton type="primary">
+    primary按钮
+  </AButton>
 </template>
-
-<style scoped>
-.btn {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 36px;
-  padding: 0 20px;
-  font-size: 14px;
-  border-radius: 2px;
-  border: none;
-  cursor: pointer;
-  user-select: none;
-  overflow: hidden;
-  background: #1d4ed8;
-  color: #fff;
-  transition: background 0.15s ease;
-}
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.btn:focus {
-  outline: none;
-}
-
-/* 光亮动画遮罩 */
-@keyframes shineAnimation {
-  0% {
-    transform: translateX(-100%) skewX(-20deg);
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    transform: translateX(100%) skewX(-20deg);
-    opacity: 0;
-  }
-}
-
-.btn-shine::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 50%;
-  height: 100%;
-  background: linear-gradient(
-    120deg,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.5) 50%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  transform: translateX(-100%) skewX(-20deg);
-  animation: shineAnimation 0.3s ease;
-  pointer-events: none;
-  z-index: 2;
-}
-
-/* 按钮类型 */
-.btn-primary {
-  background: #1d4ed8;
-  color: #fff;
-}
-.btn-primary:hover:not(:disabled) {
-  background: #2563eb;
-}
-
-.btn-secondary {
-  background: #f3f4f6;
-  color: #374151;
-  border: 1px solid #d1d5db;
-}
-.btn-secondary:hover:not(:disabled) {
-  background: #e5e7eb;
-  border-color: #1d4ed8;
-  color: #1d4ed8;
-}
-
-.btn-danger {
-  background: #dc2626;
-  color: #fff;
-}
-.btn-danger:hover:not(:disabled) {
-  background: #b91c1c;
-}
-
-.btn-link {
-  background: transparent;
-  color: #1d4ed8;
-  padding: 0 16px;
-}
-.btn-link:hover:not(:disabled) {
-  text-decoration: underline;
-}
-</style>