From 56d06eb4564e44fd712a8887bc226f8e0fa0a110 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 5 Aug 2026 11:19:57 -0600
Subject: [PATCH] =?UTF-8?q?style(achievement):=20=E6=88=90=E5=B0=B1?=
 =?UTF-8?q?=E9=A1=B5=E6=8A=AC=E5=A4=B4=E6=94=B9=E4=B8=BA=E7=8E=AF=E5=BD=A2?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=20+=20=E5=9B=9B=E8=89=B2=E7=A8=80=E6=9C=89?=
 =?UTF-8?q?=E5=BA=A6=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

左侧环形显示总完成度，右侧四行稀有度各配一条对应颜色的进度条，
配色复用 AchievementCard 的 RARITY_COLOR。窄屏自动塌成一列。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/oj/achievement/index.vue | 105 +++++++++++++++++++++++++++++------
 1 file changed, 87 insertions(+), 18 deletions(-)

diff --git a/src/oj/achievement/index.vue b/src/oj/achievement/index.vue
index 6e4b1be..8d7a1ce 100644
--- a/src/oj/achievement/index.vue
+++ b/src/oj/achievement/index.vue
@@ -18,6 +18,14 @@ interface UserBadge {
 const route = useRoute()
 const name = computed(() => (route.query.name as string) || undefined)
 
+// 和 AchievementCard 的边框配色保持一致
+const RARITY_COLOR: Record<string, string> = {
+  bronze: "#b87333",
+  silver: "#9fa6b2",
+  gold: "#e0a300",
+  platinum: "#7dd3fc",
+}
+
 const achievements = ref<Achievement[]>([])
 const summary = ref<AchievementSummary | null>(null)
 const badges = ref<UserBadge[]>([])
@@ -59,19 +67,44 @@ watch(name, load)
       <n-card v-if="summary" class="overview">
         <div class="overview-row">
           <div class="percent">
-            <div class="big">{{ summary.percent }}%</div>
+            <n-progress
+              type="circle"
+              :percentage="summary.percent"
+              :stroke-width="8"
+            >
+              <div class="ring-text">
+                <div class="ring-percent">{{ summary.percent }}%</div>
+              </div>
+            </n-progress>
             <div class="sub">
-              {{ summary.unlocked }} / {{ summary.total }} 已获得
+              已获得 {{ summary.unlocked }} / {{ summary.total }}
             </div>
           </div>
+
           <div class="rarity">
             <div
               v-for="r in summary.rarity"
               :key="r.rarity"
               class="rarity-item"
             >
-              <div class="rarity-label">{{ r.label }}</div>
-              <div class="rarity-count">{{ r.unlocked }} / {{ r.total }}</div>
+              <span
+                class="rarity-label"
+                :style="{ color: RARITY_COLOR[r.rarity] }"
+              >
+                {{ r.label }}
+              </span>
+              <span class="rarity-bar">
+                <span
+                  class="rarity-fill"
+                  :style="{
+                    width: r.total ? (r.unlocked / r.total) * 100 + '%' : '0%',
+                    background: RARITY_COLOR[r.rarity],
+                  }"
+                />
+              </span>
+              <span class="rarity-count">
+                <b>{{ r.unlocked }}</b> / {{ r.total }}
+              </span>
             </div>
           </div>
         </div>
@@ -114,34 +147,70 @@ watch(name, load)
 .overview-row {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 24px;
+  gap: 32px;
   flex-wrap: wrap;
 }
-.big {
-  font-size: 40px;
+.percent {
+  flex: none;
+  width: 110px;
+  text-align: center;
+}
+.percent :deep(.n-progress) {
+  width: 110px;
+}
+.ring-percent {
+  font-size: 22px;
   font-weight: 700;
   line-height: 1;
 }
 .sub {
-  margin-top: 6px;
-  font-size: 13px;
-  opacity: 0.7;
+  margin-top: 8px;
+  font-size: 12px;
+  opacity: 0.65;
+  white-space: nowrap;
 }
 .rarity {
-  display: flex;
-  gap: 20px;
+  flex: 1;
+  min-width: 240px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 10px 28px;
 }
 .rarity-item {
-  text-align: center;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 .rarity-label {
-  font-size: 12px;
-  opacity: 0.7;
+  flex: none;
+  width: 30px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.rarity-bar {
+  flex: 1;
+  height: 6px;
+  min-width: 40px;
+  border-radius: 3px;
+  overflow: hidden;
+  background: rgba(128, 128, 128, 0.2); /* 灰底在明暗两套主题下都成立 */
+}
+.rarity-fill {
+  display: block;
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.4s ease;
 }
 .rarity-count {
-  font-weight: 600;
-  margin-top: 2px;
+  flex: none;
+  font-size: 12px;
+  opacity: 0.7;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.rarity-count b {
+  font-size: 13px;
+  opacity: 0.9;
 }
 .tabs {
   margin: 16px 0;