feat: add ApprovalCenterView with animated rolling values

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

src/components/shared/RollingValue.vue

@@ -0,0 +1,141 @@
+<template>
+  <span ref="root" class="rv" :aria-label="value">
+    <template v-for="(char, i) in chars" :key="`${i}-${charKinds[i]}`">
+      <span
+        v-if="isDigit(char)"
+        class="rv-col"
+        :style="{ '--y': `-${targetOffset(char)}em`, '--wait': `${i * 28 + 120}ms` }"
+        aria-hidden="true"
+      >
+        <span class="rv-strip" :class="{ go: on }">
+          <span v-for="d in len" :key="d" class="rv-d">{{ (d - 1) % 10 }}</span>
+        </span>
+      </span>
+      <span v-else class="rv-static" :class="{ currency: char === '¥', unit: /[a-zA-Z%]/.test(char) }" aria-hidden="true">{{ char }}</span>
+    </template>
+  </span>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = defineProps({
+  value: { type: String, required: true },
+  preRoll: { type: Number, default: 2 }
+})
+
+const PRE = props.preRoll * 10
+const chars = computed(() => props.value.split(''))
+const charKinds = computed(() => chars.value.map((char) => isDigit(char) ? 'digit' : 'static'))
+const len = (props.preRoll + 1) * 10
+
+function isDigit(c) { return /\d/.test(c) }
+function targetOffset(c) { return PRE + Number(c) }
+
+const on = ref(false)
+const root = ref(null)
+let observer = null
+
+function roll() {
+  if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+    on.value = true
+    return
+  }
+
+  on.value = false
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        on.value = true
+      })
+    })
+  })
+}
+
+onMounted(() => {
+  if (!('IntersectionObserver' in window)) {
+    roll()
+    return
+  }
+
+  observer = new IntersectionObserver((entries) => {
+    if (entries.some((entry) => entry.isIntersecting)) {
+      roll()
+      observer?.disconnect()
+    }
+  }, { threshold: 0.2 })
+
+  if (root.value) observer.observe(root.value)
+})
+
+onBeforeUnmount(() => observer?.disconnect())
+watch(() => props.value, roll)
+</script>
+
+<style scoped>
+.rv {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.rv-col {
+  display: inline-block;
+  position: relative;
+  width: .64em;
+  height: 1em;
+  line-height: 1;
+  overflow: hidden;
+  vertical-align: 0;
+}
+
+.rv-strip {
+  display: block;
+  transform: translate3d(0, 0, 0);
+  will-change: transform;
+}
+
+.rv-strip.go {
+  animation: digitRoll 2.35s cubic-bezier(.45, 0, .18, 1) var(--wait, 0ms) both;
+}
+
+.rv-d {
+  height: 1em;
+  display: block;
+  text-align: center;
+  line-height: 1;
+}
+
+.rv-static {
+  display: inline-flex;
+  align-items: center;
+  height: 1em;
+  line-height: 1;
+}
+
+.rv-static.currency {
+  margin-right: .02em;
+}
+
+.rv-static.unit {
+  margin-left: .04em;
+}
+
+@keyframes digitRoll {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(0, var(--y, 0), 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rv-strip {
+    animation: none;
+    transform: translateY(var(--y, 0));
+  }
+}
+</style>

src/composables/useAnimationProgress.js

@@ -0,0 +1,37 @@
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+export function useAnimationProgress(deps = [], duration = 1100) {
+  const progress = ref(0)
+  let frameId = 0
+
+  const easeOutCubic = (value) => 1 - Math.pow(1 - value, 3)
+
+  function start() {
+    cancelAnimationFrame(frameId)
+
+    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+      progress.value = 1
+      return
+    }
+
+    const startedAt = performance.now()
+    progress.value = 0
+
+    function tick(now) {
+      const elapsed = Math.min((now - startedAt) / duration, 1)
+      progress.value = easeOutCubic(elapsed)
+      if (elapsed < 1) frameId = requestAnimationFrame(tick)
+    }
+
+    frameId = requestAnimationFrame(tick)
+  }
+
+  onMounted(start)
+  onBeforeUnmount(() => cancelAnimationFrame(frameId))
+
+  if (deps.length) {
+    watch(deps, start)
+  }
+
+  return progress
+}

src/views/ApprovalCenterView.vue

@@ -0,0 +1,618 @@
+<template>
+  <section class="approval-page">
+    <div class="approval-kpis">
+      <article v-for="item in kpis" :key="item.label" class="approval-kpi panel" :style="{ '--accent': item.accent }">
+        <span class="kpi-icon"><i :class="item.icon"></i></span>
+        <div>
+          <p>{{ item.label }}</p>
+          <strong>{{ item.value }} <small>{{ item.unit }}</small></strong>
+          <span :class="item.tone">{{ item.meta }} <i v-if="item.trendIcon" :class="item.trendIcon"></i></span>
+        </div>
+      </article>
+    </div>
+
+    <article class="approval-list panel">
+      <header class="list-head">
+        <h2>待审批列表</h2>
+      </header>
+
+      <nav class="status-tabs" aria-label="审批状态">
+        <button
+          v-for="tab in tabs"
+          :key="tab"
+          type="button"
+          :class="{ active: activeTab === tab }"
+          @click="activeTab = tab"
+        >
+          {{ tab }}
+        </button>
+      </nav>
+
+      <div class="list-toolbar">
+        <div class="filter-set">
+          <button v-for="filter in filters" :key="filter" type="button" class="filter-btn">
+            <span>{{ filter }}</span>
+            <i class="mdi mdi-chevron-down"></i>
+          </button>
+        </div>
+
+        <div class="toolbar-actions">
+          <button class="sort-btn" type="button">
+            <i class="mdi mdi-sort"></i>
+            <span>按提交时间</span>
+            <i class="mdi mdi-chevron-down"></i>
+          </button>
+          <button class="export-btn" type="button">
+            <i class="mdi mdi-download"></i>
+            <span>导出</span>
+          </button>
+          <button class="return-btn" type="button">
+            <i class="mdi mdi-undo"></i>
+            <span>批量退回</span>
+          </button>
+          <button class="approve-btn" type="button">
+            <i class="mdi mdi-check-circle"></i>
+            <span>批量通过</span>
+          </button>
+        </div>
+      </div>
+
+      <p class="hint"><i class="mdi mdi-information-outline"></i> 点击单据行查看审批详情</p>
+
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>单号</th>
+              <th>申请人</th>
+              <th>申请部门</th>
+              <th>报销类型</th>
+              <th>金额</th>
+              <th>提交时间 <i class="mdi mdi-sort"></i></th>
+              <th>风险等级</th>
+              <th>SLA剩余</th>
+              <th>当前节点</th>
+              <th>状态</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in visibleRows" :key="row.id" :class="{ spotlight: row.spotlight }">
+              <td><strong class="doc-id">{{ row.id }}</strong></td>
+              <td>
+                <span class="person">
+                  <span class="avatar">{{ row.avatar }}</span>
+                  {{ row.applicant }}
+                </span>
+              </td>
+              <td>{{ row.department }}</td>
+              <td>{{ row.type }}</td>
+              <td>{{ row.amount }}</td>
+              <td>{{ row.time }}</td>
+              <td><span class="risk-tag" :class="row.riskTone">{{ row.risk }}</span></td>
+              <td><strong class="sla" :class="row.slaTone">{{ row.sla }}</strong></td>
+              <td>{{ row.node }}</td>
+              <td><span class="status-tag" :class="row.statusTone">{{ row.status }}</span></td>
+              <td>
+                <button class="more-btn" type="button" aria-label="更多操作">
+                  <i class="mdi mdi-dots-horizontal"></i>
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <footer class="list-foot">
+        <span class="page-summary">共 126 条，当前第 1 页</span>
+        <div class="pager" aria-label="分页">
+          <button class="page-nav" type="button" aria-label="上一页"><i class="mdi mdi-chevron-left"></i></button>
+          <button class="page-number active" type="button" aria-current="page">1</button>
+          <button class="page-number" type="button">2</button>
+          <button class="page-number" type="button">3</button>
+          <button class="page-number" type="button">4</button>
+          <button class="page-number" type="button">5</button>
+          <span>...</span>
+          <button class="page-number" type="button">13</button>
+          <button class="page-nav" type="button" aria-label="下一页"><i class="mdi mdi-chevron-right"></i></button>
+        </div>
+        <button class="page-size" type="button">10 条/页 <i class="mdi mdi-chevron-down"></i></button>
+      </footer>
+    </article>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const activeTab = ref('全部待审')
+const tabs = ['全部待审', '高风险', '即将超时', '已处理']
+const filters = ['法人主体', '费用类型', '风险等级', '金额区间', '所属部门']
+
+const kpis = [
+  { label: '待审批单据', value: 12, unit: '单', meta: '较昨日 +3', tone: 'up bad', trendIcon: 'mdi mdi-arrow-up', icon: 'mdi mdi-clipboard-text-outline', accent: '#059669' },
+  { label: '高风险单据', value: 4, unit: '单', meta: '较昨日 +1', tone: 'up bad', trendIcon: 'mdi mdi-arrow-up', icon: 'mdi mdi-alert', accent: '#ef4444' },
+  { label: '即将超时', value: 3, unit: '单', meta: '30 分钟内', tone: 'neutral', icon: 'mdi mdi-clock-outline', accent: '#f59e0b' },
+  { label: '今日已处理', value: 28, unit: '单', meta: '通过率 86%', tone: 'good', icon: 'mdi mdi-check', accent: '#10b981' }
+]
+
+const rows = [
+  { id: 'RE240712001', applicant: '李文静', avatar: '李', department: '市场部', type: '差旅报销', amount: '￥3,680', time: '07-12 09:20', risk: '中风险', riskTone: 'medium', sla: '4.2h', slaTone: 'safe', node: '财务审批', status: '待审批', statusTone: 'pending' },
+  { id: 'RE240712002', applicant: '王志强', avatar: '王', department: '销售部', type: '招待费', amount: '￥1,280', time: '07-12 08:15', risk: '低风险', riskTone: 'low', sla: '8.5h', slaTone: 'safe', node: '部门负责人', status: '待审批', statusTone: 'pending' },
+  { id: 'RE240711098', applicant: '刘思雨', avatar: '刘', department: '市场部', type: '差旅报销', amount: '￥6,920', time: '07-11 18:46', risk: '高风险', riskTone: 'high', sla: '0.8h', slaTone: 'danger', node: '财务审批', status: '即将超时', statusTone: 'urgent', spotlight: true },
+  { id: 'RE240711087', applicant: '陈晓琳', avatar: '陈', department: '行政部', type: '办公采购', amount: '￥860', time: '07-11 17:32', risk: '低风险', riskTone: 'low', sla: '6.1h', slaTone: 'safe', node: '预算校验', status: '待审批', statusTone: 'pending' },
+  { id: 'RE240711076', applicant: '赵明', avatar: '赵', department: '研发中心', type: '其他费用', amount: '￥4,250', time: '07-11 15:10', risk: '中风险', riskTone: 'medium', sla: '2.4h', slaTone: 'warning', node: '部门负责人', status: '待审批', statusTone: 'pending' },
+  { id: 'RE240711065', applicant: '孙楠', avatar: '孙', department: '财务部', type: '招待费', amount: '￥560', time: '07-11 13:42', risk: '低风险', riskTone: 'low', sla: '5.7h', slaTone: 'safe', node: '财务审批', status: '待审批', statusTone: 'pending' },
+  { id: 'RE240711054', applicant: '周晓彤', avatar: '周', department: '市场部', type: '办公采购', amount: '￥2,150', time: '07-11 11:28', risk: '中风险', riskTone: 'medium', sla: '1.9h', slaTone: 'warning', node: '预算校验', status: '即将超时', statusTone: 'urgent' },
+  { id: 'RE240711043', applicant: '吴磊', avatar: '吴', department: '销售部', type: '其他费用', amount: '￥980', time: '07-11 09:05', risk: '低风险', riskTone: 'low', sla: '7.3h', slaTone: 'safe', node: '部门负责人', status: '待审批', statusTone: 'pending' }
+]
+
+const visibleRows = computed(() => {
+  if (activeTab.value === '全部待审') return rows
+  if (activeTab.value === '高风险') return rows.filter((row) => row.risk === '高风险')
+  if (activeTab.value === '即将超时') return rows.filter((row) => row.status === '即将超时')
+  return rows.slice(0, 3).map((row) => ({ ...row, status: '已处理', statusTone: 'done' }))
+})
+</script>
+
+<style scoped>
+.approval-page {
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 14px;
+  overflow: hidden;
+  animation: fadeUp 220ms var(--ease) both;
+}
+
+.approval-kpis {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.approval-kpi {
+  min-height: 96px;
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr);
+  align-items: center;
+  gap: 14px;
+  padding: 16px 20px;
+}
+
+.kpi-icon {
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent) 14%, white);
+  color: var(--accent);
+  font-size: 22px;
+}
+
+.approval-kpi p {
+  color: #334155;
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.approval-kpi strong {
+  display: block;
+  margin-top: 5px;
+  color: #0f172a;
+  font-size: 26px;
+  font-weight: 850;
+  line-height: 1;
+}
+
+.approval-kpi small {
+  color: #0f172a;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.approval-kpi span:not(.kpi-icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 7px;
+  color: #64748b;
+  font-size: 14px;
+}
+
+.approval-kpi .bad i {
+  color: #ef4444;
+}
+
+.approval-kpi .good {
+  color: #059669 !important;
+}
+
+.approval-list {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
+  padding: 16px 18px;
+  overflow: hidden;
+}
+
+.list-head h2 {
+  color: #0f172a;
+  font-size: 19px;
+  font-weight: 850;
+}
+
+.status-tabs {
+  display: flex;
+  gap: 28px;
+  margin-top: 14px;
+  border-bottom: 1px solid #dbe4ee;
+}
+
+.status-tabs button {
+  position: relative;
+  min-height: 36px;
+  border: 0;
+  background: transparent;
+  color: #64748b;
+  font-size: 14px;
+  font-weight: 750;
+}
+
+.status-tabs button.active {
+  color: #059669;
+}
+
+.status-tabs button.active::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 3px;
+  border-radius: 999px 999px 0 0;
+  background: #10b981;
+}
+
+.list-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 14px;
+}
+
+.filter-set,
+.toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.filter-btn,
+.sort-btn,
+.export-btn,
+.return-btn,
+.approve-btn,
+.page-size {
+  min-height: 38px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  padding: 0 14px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+.filter-btn,
+.sort-btn,
+.export-btn,
+.return-btn,
+.page-size {
+  border: 1px solid #d7e0ea;
+  background: #fff;
+  color: #334155;
+}
+
+.filter-btn {
+  min-width: 104px;
+  justify-content: space-between;
+}
+
+.sort-btn {
+  min-width: 138px;
+}
+
+.approve-btn {
+  border: 0;
+  background: #059669;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(5, 150, 105, .18);
+}
+
+.approve-btn:hover {
+  background: #047857;
+}
+
+.filter-btn:hover,
+.sort-btn:hover,
+.export-btn:hover,
+.return-btn:hover,
+.page-size:hover {
+  border-color: rgba(16, 185, 129, .32);
+  color: #0f9f78;
+}
+
+.hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  margin-top: 10px;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.table-wrap {
+  min-height: 0;
+  margin-top: 10px;
+  overflow-x: auto;
+  overflow-y: auto;
+  border: 1px solid #edf2f7;
+  border-radius: 10px;
+}
+
+table {
+  width: 100%;
+  min-width: 1180px;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: 15px 12px;
+  border-bottom: 1px solid #edf2f7;
+  color: #24324a;
+  font-size: 14px;
+  line-height: 1.35;
+  text-align: left;
+  vertical-align: middle;
+}
+
+th {
+  background: #f7fafc;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+tbody tr {
+  cursor: pointer;
+}
+
+tbody tr:hover,
+tbody tr.spotlight {
+  background: linear-gradient(90deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .03));
+}
+
+tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.doc-id {
+  color: #1d4ed8;
+  font-weight: 800;
+}
+
+.person {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.avatar {
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: #dbeafe;
+  color: #1d4ed8;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.risk-tag,
+.status-tag {
+  min-height: 24px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 9px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 750;
+  white-space: nowrap;
+}
+
+.risk-tag.low {
+  background: #dcfce7;
+  color: #059669;
+}
+
+.risk-tag.medium {
+  background: #ffedd5;
+  color: #f97316;
+}
+
+.risk-tag.high {
+  background: #fee2e2;
+  color: #ef4444;
+}
+
+.sla {
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.sla.safe {
+  color: #059669;
+}
+
+.sla.warning {
+  color: #f97316;
+}
+
+.sla.danger {
+  color: #ef4444;
+}
+
+.status-tag.pending {
+  background: #eff6ff;
+  color: #2563eb;
+}
+
+.status-tag.urgent {
+  background: #fff7ed;
+  color: #f97316;
+}
+
+.status-tag.done {
+  background: #ecfdf5;
+  color: #059669;
+}
+
+.more-btn {
+  width: auto;
+  height: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: #2563eb;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.more-btn:hover {
+  color: #059669;
+}
+
+.list-foot {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 16px;
+  margin-top: 12px;
+}
+
+.page-summary {
+  color: #64748b;
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.pager {
+  display: inline-flex;
+  justify-content: center;
+  gap: 6px;
+  padding: 4px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: #f8fafc;
+}
+
+.pager button {
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: #334155;
+  font-size: 14px;
+  font-weight: 800;
+  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
+}
+
+.pager button:hover:not(.active) {
+  background: #fff;
+  color: #059669;
+  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
+}
+
+.pager button.active {
+  background: #059669;
+  color: #fff;
+  box-shadow: 0 8px 16px rgba(5, 150, 105, .20);
+}
+
+.pager span {
+  color: #64748b;
+  font-weight: 800;
+}
+
+.page-size {
+  justify-self: end;
+  min-width: 112px;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
+}
+
+@media (max-width: 1320px) {
+  .approval-kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .list-toolbar,
+  .list-foot {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 760px) {
+  .approval-kpis {
+    grid-template-columns: 1fr;
+  }
+
+  .approval-list,
+  .approval-kpi {
+    padding: 16px;
+  }
+
+  .status-tabs {
+    gap: 18px;
+    overflow-x: auto;
+  }
+
+  .filter-set,
+  .toolbar-actions {
+    width: 100%;
+  }
+
+  .filter-btn,
+  .sort-btn,
+  .export-btn,
+  .return-btn,
+  .approve-btn,
+  .page-size {
+    width: 100%;
+  }
+
+  .list-foot {
+    justify-items: stretch;
+  }
+
+  .pager,
+  .page-size {
+    justify-self: stretch;
+  }
+}
+</style>