From 508267bb59fd6eaf9c5f3d44dfb23633c4344cb0 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 5 Aug 2026 13:30:51 -0600
Subject: [PATCH] =?UTF-8?q?fix(=E6=88=90=E5=B0=B1):=20=E5=9C=86=E7=8E=AF?=
 =?UTF-8?q?=E7=99=BE=E5=88=86=E6=AF=94=E5=9C=A8=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E6=92=91=E5=87=BA=20+=20=E5=8D=A1=E7=89=87=E8=BE=B9=E6=A1=86?=
 =?UTF-8?q?=E5=8A=A0=E7=B2=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 圆环改用默认插槽渲染百分比，字号跟断点走（naive 自带指示器字号固定，76px 圆环放不下）
- 卡片边框 1px → 2px
- 置灰从整张卡挪到内容上，未获得的卡片不再把稀有度边框一起洗成灰

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/oj/achievement/components/AchievementCard.vue | 11 ++++++++---
 src/oj/achievement/index.vue                      |  7 ++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/oj/achievement/components/AchievementCard.vue b/src/oj/achievement/components/AchievementCard.vue
index 05b846a..35d9100 100644
--- a/src/oj/achievement/components/AchievementCard.vue
+++ b/src/oj/achievement/components/AchievementCard.vue
@@ -55,10 +55,15 @@ const unlockDate = computed(() => {
 <template>
   <n-card
     size="small"
-    :class="{ locked: !achievement.unlocked, rare: isRare }"
-    :style="{ borderColor: RARITY_COLOR[achievement.rarity] }"
+    :class="{ rare: isRare }"
+    :style="{
+      borderColor: RARITY_COLOR[achievement.rarity],
+      // 1px 的描边在卡片背景上几乎看不出稀有度，加粗一档
+      borderWidth: '2px',
+    }"
   >
-    <n-thing>
+    <!-- 置灰只作用在内容上：套在整张卡上会把稀有度边框也一并洗成灰色 -->
+    <n-thing :class="{ locked: !achievement.unlocked }">
       <template #avatar>
         <AchievementIcon :icon="achievement.icon" :size="32" />
       </template>
diff --git a/src/oj/achievement/index.vue b/src/oj/achievement/index.vue
index 9b8edfe..c9c65e3 100644
--- a/src/oj/achievement/index.vue
+++ b/src/oj/achievement/index.vue
@@ -88,7 +88,12 @@ watch(name, load)
             :percentage="summary.percent"
             :stroke-width="8"
             :style="{ width: isDesktop ? '110px' : '76px' }"
-          />
+          >
+            <!-- 自带指示器字号是固定的，76px 的圆环里会撑出来 -->
+            <n-text strong :style="{ fontSize: isDesktop ? '22px' : '15px' }">
+              {{ summary.percent }}%
+            </n-text>
+          </n-progress>
           <n-text depth="3" class="nowrap">
             已获得 {{ summary.unlocked }} / {{ summary.total }}
           </n-text>