From 42de79ee60905e75c8429ceac85dabe11689ba51 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 5 Aug 2026 13:56:13 -0600
Subject: [PATCH] =?UTF-8?q?revert(achievement):=20=E5=8E=BB=E6=8E=89?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E6=9D=A1=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

保留奖章的题单来源，只回退 0 → 真值那套触发动画的处理和拉长的过渡时长，
圆环和进度条回到直接显示终值。
---
 src/oj/achievement/index.vue | 49 +++---------------------------------
 1 file changed, 3 insertions(+), 46 deletions(-)

diff --git a/src/oj/achievement/index.vue b/src/oj/achievement/index.vue
index 2451931..c90a68d 100644
--- a/src/oj/achievement/index.vue
+++ b/src/oj/achievement/index.vue
@@ -48,17 +48,6 @@ const rarities = computed(() =>
     (a, b) => RARITY_RANK[a.rarity] - RARITY_RANK[b.rarity],
   ),
 )
-
-// 数据是异步来的，卡片挂上去时百分比就是终值，CSS 过渡不会触发。
-// 先按 0 渲染一帧，下一帧再填真值，圆环和进度条才有"长出来"的动画
-const grown = ref(false)
-const percent = computed(() =>
-  grown.value ? (summary.value?.percent ?? 0) : 0,
-)
-function rarityPercent(r: { unlocked: number; total: number }) {
-  if (!grown.value || !r.total) return 0
-  return (r.unlocked / r.total) * 100
-}
 const badges = ref<UserBadge[]>([])
 const { isDesktop } = useBreakpoints()
 const tab = ref("all")
@@ -74,7 +63,6 @@ const filtered = computed(() => {
 
 async function load() {
   loading.value = true
-  grown.value = false
   try {
     const [list, sum, badgeRes] = await Promise.all([
       getAchievements(name.value),
@@ -88,9 +76,6 @@ async function load() {
   } finally {
     loading.value = false
   }
-  // 等卡片以 0 渲染完这一帧，再切到真值
-  await nextTick()
-  requestAnimationFrame(() => requestAnimationFrame(() => (grown.value = true)))
 }
 
 onMounted(load)
@@ -104,17 +89,10 @@ watch(name, load)
         <n-flex vertical align="center" :size="6">
           <n-progress
             type="circle"
-            :percentage="percent"
+            :percentage="summary.percent"
             :stroke-width="8"
-            class="grow"
           >
-            <n-text strong>
-              <n-number-animation
-                :from="0"
-                :to="summary.percent"
-                :duration="900"
-              />%
-            </n-text>
+            <n-text strong>{{ summary.percent }}%</n-text>
           </n-progress>
           <n-text depth="3" class="nowrap">
             已获得 {{ summary.unlocked }} / {{ summary.total }}
@@ -134,9 +112,8 @@ watch(name, load)
             </n-text>
             <n-progress
               style="flex: 1"
-              class="grow"
               type="line"
-              :percentage="rarityPercent(r)"
+              :percentage="r.total ? (r.unlocked / r.total) * 100 : 0"
               :height="6"
               :border-radius="3"
               :fill-border-radius="3"
@@ -242,24 +219,4 @@ watch(name, load)
 .source a:hover {
   color: var(--n-text-color);
 }
-
-/* naive 自带过渡，但圆环 stroke-dasharray 只有 .3s、线条 max-width 只有 .2s，
-   配合 0 → 真值那一下太快看不出来，这里拉长 */
-.grow :deep(.n-progress-graph-circle-fill) {
-  transition:
-    opacity 0.3s var(--n-bezier),
-    stroke 0.3s var(--n-bezier),
-    stroke-dasharray 0.9s cubic-bezier(0.25, 1, 0.5, 1);
-}
-.grow :deep(.n-progress-graph-line-fill) {
-  transition:
-    background-color 0.3s var(--n-bezier),
-    max-width 0.9s cubic-bezier(0.25, 1, 0.5, 1);
-}
-@media (prefers-reduced-motion: reduce) {
-  .grow :deep(.n-progress-graph-circle-fill),
-  .grow :deep(.n-progress-graph-line-fill) {
-    transition: none;
-  }
-}
 </style>