u

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

@@ -1,34 +1,34 @@
 <script>
 export default {
   directives: {
-    flash: {
+    shine: {
       beforeMount(el) {
-        el.style.position = 'relative'
+        el.style.position = el.style.position || 'relative'
         el.style.overflow = 'hidden'
 
-        el.addEventListener('click', () => {
+        const trigger = () => {
-          if (el.disabled) return
+          if (el.disabled)
+            return
 
-          const ripple = document.createElement('span')
+          // 清理上一次效果
+          if (el.__shineTimer) {
+            clearTimeout(el.__shineTimer)
+            el.classList.remove('btn-shine')
+          }
 
-          ripple.style.position = 'absolute'
+          void el.offsetWidth
-          ripple.style.top = 0
+          el.classList.add('btn-shine')
-          ripple.style.left = 0
-          ripple.style.height = '100%'
-          ripple.style.width = '0%'
-          ripple.style.background = 'rgba(255,255,255,0.2)'
-          ripple.style.pointerEvents = 'none'
-          ripple.style.transition = 'width 0.4s ease, opacity 0.4s ease'
 
-          el.appendChild(ripple)
+          el.__shineTimer = setTimeout(() => {
+            el.classList.remove('btn-shine')
+            el.__shineTimer = null
+          }, 300)
+        }
 
-          // 从左向右扩展
+        el.addEventListener('click', trigger)
-          setTimeout(() => {
+        el.addEventListener('keydown', (e) => {
-            ripple.style.width = '100%'
+          if (e.key === 'Enter' || e.key === ' ')
-            ripple.style.opacity = '0'
+            trigger()
-          }, 10)
-
-          setTimeout(() => ripple.remove(), 450)
         })
       },
     },
@@ -37,69 +37,83 @@ export default {
 </script>
 
 <template>
-  <div class="button-demo">
+  <div class="btn-demo">
-    <h3>后台管理按钮 - 蓝色主色 + 左侧线性水波纹</h3>
+    <button v-shine class="btn btn-primary">
-
+      主按钮
-    <div class="btn-row">
+    </button>
-      <button v-flash class="btn btn-primary">主按钮</button>
+    <button v-shine class="btn btn-secondary">
-      <button v-flash class="btn btn-secondary">次按钮</button>
+      次按钮
-      <button v-flash class="btn btn-danger">危险按钮</button>
+    </button>
-      <button v-flash class="btn btn-link">链接按钮</button>
+    <button v-shine class="btn btn-danger">
-      <button class="btn btn-primary" disabled>禁用按钮</button>
+      危险按钮
-    </div>
+    </button>
+    <button v-shine class="btn btn-link">
+      链接按钮
+    </button>
   </div>
 </template>
 
 <style scoped>
-.button-demo {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  padding: 24px;
-  background: #f5f6f8;
-}
-
-.btn-row {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-/* 通用按钮 */
 .btn {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 36px;
   padding: 0 20px;
   font-size: 14px;
-  border-radius: 4px;
+  border-radius: 2px;
   border: none;
   cursor: pointer;
-  outline: none;
   user-select: none;
-  position: relative;
   overflow: hidden;
-  transition: background 0.2s ease, box-shadow 0.2s ease;
+  background: #1d4ed8;
-  letter-spacing: 0.5px;
+  color: #fff;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+  transition: background 0.15s ease;
 }
-
 .btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-
+.btn:focus {
-.btn:focus-visible {
+  outline: none;
-  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.2);
 }
 
-/* 按压效果 - 阴影收缩 */
+/* 光亮动画遮罩 */
-.btn:active:not(:disabled) {
+@keyframes shineAnimation {
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
+  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;
@@ -108,7 +122,6 @@ export default {
   background: #2563eb;
 }
 
-/* 次按钮 - 灰色 */
 .btn-secondary {
   background: #f3f4f6;
   color: #374151;
@@ -120,7 +133,6 @@ export default {
   color: #1d4ed8;
 }
 
-/* 危险按钮 - 红色 */
 .btn-danger {
   background: #dc2626;
   color: #fff;
@@ -129,7 +141,6 @@ export default {
   background: #b91c1c;
 }
 
-/* 链接按钮 */
 .btn-link {
   background: transparent;
   color: #1d4ed8;
@@ -137,6 +148,5 @@ export default {
 }
 .btn-link:hover:not(:disabled) {
   text-decoration: underline;
-  background: rgba(29, 78, 216, 0.08);
 }
 </style>