feat: 落地UI动效——表单错误抖动/数字滚动/卡片悬浮

- 新增styles/transitions.css: 错误shake/按钮状态/弹窗过渡/骨架屏淡入(带prefers-reduced-motion)
- 新增CountUp.vue: KPI数字滚动组件(easeOutCubic+千分位+闪烁提示)
- Dashboard: CEO/IT视图摘要卡片接入CountUp
- main.ts引入全局动效

frontend/src/components/CountUp.vue

@@ -0,0 +1,77 @@
+<template>
+  <span class="cma-count-up" :class="{ 'is-flashing': flashing }" ref="elRef">
+    {{ displayValue }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** 目标数值 */
+  value: number
+  /** 小数位 */
+  decimals?: number
+  /** 是否加千分位 */
+  thousand?: boolean
+  /** 动画时长 ms */
+  duration?: number
+  /** 前缀 */
+  prefix?: string
+  /** 后缀 */
+  suffix?: string
+}>(), {
+  decimals: 0,
+  thousand: false,
+  duration: 800,
+  prefix: '',
+  suffix: '',
+})
+
+const displayValue = ref(props.prefix + format(props.value) + props.suffix)
+const elRef = ref<HTMLElement | null>(null)
+const flashing = ref(false)
+let rafId: number | null = null
+let lastVal = props.value
+
+function format(n: number): string {
+  const fixed = n.toFixed(props.decimals)
+  if (!props.thousand) return fixed
+  const [int, dec] = fixed.split('.')
+  const withComma = int.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return dec ? `${withComma}.${dec}` : withComma
+}
+
+function animate(from: number, to: number) {
+  if (rafId) cancelAnimationFrame(rafId)
+  if (from === to) {
+    displayValue.value = props.prefix + format(to) + props.suffix
+    return
+  }
+  const start = performance.now()
+  const diff = to - from
+  const tick = (now: number) => {
+    const t = Math.min((now - start) / props.duration, 1)
+    // easeOutCubic
+    const eased = 1 - Math.pow(1 - t, 3)
+    const val = from + diff * eased
+    displayValue.value = props.prefix + format(val) + props.suffix
+    if (t < 1) {
+      rafId = requestAnimationFrame(tick)
+    } else {
+      // 结束闪烁提示
+      flashing.value = true
+      setTimeout(() => { flashing.value = false }, 600)
+    }
+  }
+  rafId = requestAnimationFrame(tick)
+}
+
+watch(() => props.value, (nv, ov) => {
+  animate(ov ?? 0, nv)
+  lastVal = nv
+})
+
+onMounted(() => { lastVal = props.value })
+onBeforeUnmount(() => { if (rafId) cancelAnimationFrame(rafId) })
+</script>

frontend/src/main.ts

@@ -6,6 +6,7 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import './style.css'
+import './styles/transitions.css'
 
 const app = createApp(App)
 

frontend/src/styles/transitions.css

@@ -0,0 +1,103 @@
+/* ============================================
+   CMA 全局动效 — 借鉴 Transitions.dev / BeUI 模式
+   纯CSS实现，Vue3 + Element Plus 覆盖层
+   ============================================ */
+
+/* ── 1. 表单校验失败抖动 ── */
+@keyframes cma-shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-6px); }
+  40% { transform: translateX(6px); }
+  60% { transform: translateX(-4px); }
+  80% { transform: translateX(4px); }
+}
+.el-form-item.is-error .el-input__wrapper,
+.el-form-item.is-error .el-select__wrapper,
+.el-form-item.is-error .el-textarea__inner {
+  animation: cma-shake 0.4s ease-in-out;
+}
+
+/* ── 2. 按钮状态机：成功/错误反馈 ── */
+@keyframes cma-btn-success {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+.el-button.is-success-pop {
+  background: #67c23a !important;
+  border-color: #67c23a !important;
+  animation: cma-btn-success 0.3s ease;
+}
+.el-button.is-error-pop {
+  background: #f56c6c !important;
+  border-color: #f56c6c !important;
+  animation: cma-btn-success 0.3s ease;
+}
+
+/* ── 3. 数字滚动时高亮 ── */
+@keyframes cma-count-flash {
+  0% { color: #409eff; }
+  100% { color: inherit; }
+}
+.cma-count-up {
+  font-variant-numeric: tabular-nums;
+  transition: color 0.3s;
+}
+.cma-count-up.is-flashing {
+  animation: cma-count-flash 0.6s ease;
+}
+
+/* ── 4. 弹窗/抽屉开合过渡（缩放+淡入，从触发点展开） ── */
+.cma-dialog-fade-enter-active {
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.cma-dialog-fade-leave-active {
+  transition: all 0.15s ease;
+}
+.cma-dialog-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.95) translateY(-8px);
+}
+.cma-dialog-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+/* ── 5. 骨架屏 → 内容交叉淡入 ── */
+.cma-skeleton-fade-enter-active {
+  transition: opacity 0.35s ease;
+}
+.cma-skeleton-fade-enter-from {
+  opacity: 0;
+}
+
+/* ── 6. 列表行进入动画 ── */
+@keyframes cma-row-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.cma-row-enter {
+  animation: cma-row-in 0.3s ease both;
+}
+
+/* ── 7. 卡片悬浮提升 ── */
+.cma-card-hover {
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
+}
+.cma-card-hover:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+}
+
+/* ── 8. 无障碍：用户偏好减少动效时关闭 ── */
+@media (prefers-reduced-motion: reduce) {
+  .el-form-item.is-error .el-input__wrapper,
+  .el-form-item.is-error .el-select__wrapper,
+  .el-form-item.is-error .el-textarea__inner,
+  .cma-count-up.is-flashing,
+  .cma-row-enter,
+  .cma-card-hover {
+    animation: none !important;
+    transition: none !important;
+  }
+}

frontend/src/views/Dashboard.vue

@@ -44,10 +44,10 @@
     <template v-if="userRole === 'ceo'">
       <!-- 摘要卡片行 -->
       <div class="summary-row">
-        <div class="stat-card blue" @click="$router.push('/kpis')" style="cursor:pointer;"><div class="stat-val">{{ summary.kpi_total }}</div><div class="stat-label">KPI总数</div><div class="stat-sub click-hint">点击查看详情</div></div>
-        <div class="stat-card red" @click="$router.push('/alerts')" style="cursor:pointer;"><div class="stat-val">{{ redAlerts }}</div><div class="stat-label">紧急异常</div><div class="stat-sub">待处理 {{ alerts.length }} 条</div></div>
-        <div class="stat-card green" @click="$router.push('/kpis')" style="cursor:pointer;"><div class="stat-val">{{ greenKpis }}</div><div class="stat-label">正常</div></div>
-        <div class="stat-card yellow" @click="$router.push('/alerts')" style="cursor:pointer;"><div class="stat-val">{{ yellowKpis }}</div><div class="stat-label">预警中</div></div>
+        <div class="stat-card blue" @click="$router.push('/kpis')" style="cursor:pointer;"><div class="stat-val"><CountUp :value="summary.kpi_total" /></div><div class="stat-label">KPI总数</div><div class="stat-sub click-hint">点击查看详情</div></div>
+        <div class="stat-card red" @click="$router.push('/alerts')" style="cursor:pointer;"><div class="stat-val"><CountUp :value="redAlerts" /></div><div class="stat-label">紧急异常</div><div class="stat-sub">待处理 {{ alerts.length }} 条</div></div>
+        <div class="stat-card green" @click="$router.push('/kpis')" style="cursor:pointer;"><div class="stat-val"><CountUp :value="greenKpis" /></div><div class="stat-label">正常</div></div>
+        <div class="stat-card yellow" @click="$router.push('/alerts')" style="cursor:pointer;"><div class="stat-val"><CountUp :value="yellowKpis" /></div><div class="stat-label">预警中</div></div>
         <div class="stat-card" :class="syncCardClass" @click="$router.push('/data')" style="cursor:pointer;">
           <div class="stat-val" style="font-size:14px;line-height:1.4;">{{ syncStatusText }}</div>
           <div class="stat-label">数据同步</div>
@@ -188,7 +188,7 @@
     <!-- ====== IT视图 ====== -->
     <template v-if="userRole === 'it'">
       <div class="summary-row">
-        <div class="stat-card blue"><div class="stat-val">{{ summary.kpi_total }}</div><div class="stat-label">活跃KPI</div></div>
+        <div class="stat-card blue"><div class="stat-val"><CountUp :value="summary.kpi_total" /></div><div class="stat-label">活跃KPI</div></div>
         <div class="stat-card green"><div class="stat-val">{{ enabledChannels }}</div><div class="stat-label">通知渠道</div></div>
         <div class="stat-card gray"><div class="stat-val">{{ erpStatus }}</div><div class="stat-label">ERP同步</div></div>
       </div>
@@ -243,6 +243,7 @@ import { ElMessage } from 'element-plus'
 import { Loading, ArrowRight } from '@element-plus/icons-vue'
 import { dashboardApi, alertApi } from '../api/index'
 import axios from 'axios'
+import CountUp from '../components/CountUp.vue'
 import GrowthQuality from '../components/GrowthQuality.vue'
 
 const router = useRouter()