From 05ce9cbb9e7a3e751bd9bc20b4237aac95160db9 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 5 Aug 2026 11:40:55 -0600
Subject: [PATCH] =?UTF-8?q?revert(achievement):=20=E6=8A=AC=E5=A4=B4?=
 =?UTF-8?q?=E5=9B=9E=E5=88=B0=E7=8E=AF=E5=BD=A2=E8=BF=9B=E5=BA=A6=E7=89=88?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=9D=E7=95=99=E7=99=BD=E9=87=91=E4=BC=98=E5=85=88?=
 =?UTF-8?q?=E7=9A=84=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PSN 那版奖杯陈列观感不佳，回退到环形 + 四色进度条。稀有度顺序
沿用 PSN 的做法：白金、黄金、白银、青铜，稀有的排前面。

顺带保留卡片网格的 min() 修复，避免 320 宽机型横向滚动。

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

diff --git a/src/oj/achievement/index.vue b/src/oj/achievement/index.vue
index 1b7d79d..06f5183 100644
--- a/src/oj/achievement/index.vue
+++ b/src/oj/achievement/index.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { Icon } from "@iconify/vue"
 import { getAchievements, getAchievementSummary } from "oj/achievement/api"
 import { getUserBadges } from "oj/api"
-import { useBreakpoints } from "shared/composables/breakpoints"
 import { useRarityColor } from "shared/composables/rarity"
 import type {
   Achievement,
@@ -25,19 +23,13 @@ interface UserBadge {
 const route = useRoute()
 const name = computed(() => (route.query.name as string) || undefined)
 
-// 断点走全站那套（tailwind md = 768px），不另开一套
-const { isMobile } = useBreakpoints()
+// 标签和进度条同色，整行读作一个单位
+const rarityColor = useRarityColor()
 
 const achievements = ref<Achievement[]>([])
 const summary = ref<AchievementSummary | null>(null)
-const badges = ref<UserBadge[]>([])
-const tab = ref("all")
-const loading = ref(true)
 
-// 奖杯和数字同色，一列读作一个单位
-const rarityColor = useRarityColor()
-
-// 白金在最左，青铜在最右——奖杯陈列按稀有度倒序，接口给的顺序反过来
+// 白金排最前，青铜垫底：稀有的先亮相，接口给的顺序是反的
 const RARITY_RANK: Record<AchievementRarity, number> = {
   platinum: 0,
   gold: 1,
@@ -45,23 +37,14 @@ const RARITY_RANK: Record<AchievementRarity, number> = {
   bronze: 3,
 }
 
-const trophies = computed(() =>
+const rarities = computed(() =>
   [...(summary.value?.rarity ?? [])].sort(
     (a, b) => RARITY_RANK[a.rarity] - RARITY_RANK[b.rarity],
   ),
 )
-
-// 进度条按稀有度分段，每段宽度是该档已获得占总数的比例，
-// 拼起来正好是总完成度：条形的长度和构成都是真的
-function segmentWidth(unlocked: number) {
-  const total = summary.value?.total ?? 0
-  return total ? `${(unlocked / total) * 100}%` : "0%"
-}
-
-const remaining = computed(() => {
-  if (!summary.value) return 0
-  return summary.value.total - summary.value.unlocked
-})
+const badges = ref<UserBadge[]>([])
+const tab = ref("all")
+const loading = ref(true)
 
 const filtered = computed(() => {
   if (tab.value === "unlocked")
@@ -93,58 +76,47 @@ watch(name, load)
 </script>
 
 <template>
-  <div class="hall" :class="{ mobile: isMobile }">
+  <div class="hall">
     <n-spin :show="loading">
       <n-card v-if="summary" class="overview">
         <div class="overview-row">
-          <div class="level">
-            <div class="plate">
-              <span class="plate-num">{{ summary.percent }}</span>
-              <span class="plate-unit">%</span>
-            </div>
-            <div class="plate-label">完成度</div>
-          </div>
-
-          <div class="trophies">
-            <div
-              v-for="r in trophies"
-              :key="r.rarity"
-              class="trophy"
-              :class="{ none: !r.unlocked }"
+          <div class="percent">
+            <n-progress
+              type="circle"
+              :percentage="summary.percent"
+              :stroke-width="8"
             >
-              <Icon
-                icon="mdi:trophy"
-                :width="30"
-                :height="30"
-                :style="{ color: rarityColor[r.rarity] }"
-              />
-              <div class="trophy-count">
-                <b :style="{ color: rarityColor[r.rarity] }">{{
-                  r.unlocked
-                }}</b>
-                <span>/ {{ r.total }}</span>
+              <div class="ring-text">
+                <div class="ring-percent">{{ summary.percent }}%</div>
               </div>
-              <div class="trophy-label">{{ r.label }}</div>
+            </n-progress>
+            <div class="sub">
+              已获得 {{ summary.unlocked }} / {{ summary.total }}
             </div>
           </div>
-        </div>
 
-        <div class="track">
-          <span
-            v-for="r in trophies"
-            :key="r.rarity"
-            class="seg"
-            :style="{
-              width: segmentWidth(r.unlocked),
-              background: rarityColor[r.rarity],
-            }"
-          />
-        </div>
-
-        <div class="foot">
-          <span>已获得 {{ summary.unlocked }} / {{ summary.total }}</span>
-          <span v-if="remaining">还差 {{ remaining }} 个全收集</span>
-          <span v-else class="done">全部获得</span>
+          <div class="rarity">
+            <div v-for="r in rarities" :key="r.rarity" class="rarity-item">
+              <span
+                class="rarity-label"
+                :style="{ color: rarityColor[r.rarity] }"
+              >
+                {{ r.label }}
+              </span>
+              <span class="rarity-bar">
+                <span
+                  class="rarity-fill"
+                  :style="{
+                    width: r.total ? (r.unlocked / r.total) * 100 + '%' : '0%',
+                    background: rarityColor[r.rarity],
+                  }"
+                />
+              </span>
+              <span class="rarity-count">
+                <b>{{ r.unlocked }}</b> / {{ r.total }}
+              </span>
+            </div>
+          </div>
         </div>
       </n-card>
 
@@ -185,156 +157,71 @@ watch(name, load)
 .overview-row {
   display: flex;
   align-items: center;
-  gap: 28px;
+  gap: 32px;
   flex-wrap: wrap;
 }
-
-/* 等级铭牌：六边形靠 clip-path，老 Chrome 也支持 */
-.level {
+.percent {
   flex: none;
+  width: 110px;
   text-align: center;
 }
-.plate {
-  width: 84px;
-  height: 92px;
-  display: flex;
-  align-items: baseline;
-  justify-content: center;
-  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
-  background: linear-gradient(
-    180deg,
-    rgba(128, 128, 128, 0.24),
-    rgba(128, 128, 128, 0.1)
-  );
+.percent :deep(.n-progress) {
+  width: 110px;
 }
-.plate-num {
-  font-size: 26px;
-  font-weight: 700;
-  line-height: 92px;
-  font-variant-numeric: tabular-nums;
-}
-.plate-unit {
-  font-size: 13px;
-  opacity: 0.6;
-  margin-left: 1px;
-}
-.plate-label {
-  margin-top: 6px;
-  font-size: 11px;
-  letter-spacing: 3px;
-  opacity: 0.55;
-  padding-left: 3px; /* 抵消字距在末字后面留的空 */
-}
-
-/* 奖杯陈列 */
-.trophies {
-  flex: 1;
-  min-width: 260px;
-  display: flex;
-  justify-content: space-around;
-  gap: 8px;
-}
-.trophy {
-  text-align: center;
-  min-width: 56px;
-}
-.trophy.none {
-  opacity: 0.35;
-  filter: grayscale(1);
-}
-.trophy-count {
-  margin-top: 4px;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.1;
-}
-.trophy-count b {
+.ring-percent {
   font-size: 22px;
   font-weight: 700;
+  line-height: 1;
 }
-.trophy-count span {
+.sub {
+  margin-top: 8px;
   font-size: 12px;
-  opacity: 0.5;
-  margin-left: 3px;
+  opacity: 0.65;
+  white-space: nowrap;
 }
-.trophy-label {
-  margin-top: 2px;
-  font-size: 11px;
-  letter-spacing: 2px;
-  opacity: 0.55;
-  padding-left: 2px;
+.rarity {
+  flex: 1;
+  min-width: 240px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 10px 28px;
 }
-
-/* 总进度条：四段拼起来正好是总完成度 */
-.track {
+.rarity-item {
   display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.rarity-label {
+  flex: none;
+  width: 30px;
+  font-size: 13px;
+  font-weight: 600;
+}
+.rarity-bar {
+  flex: 1;
   height: 6px;
-  margin-top: 20px;
+  min-width: 40px;
   border-radius: 3px;
   overflow: hidden;
   background: rgba(128, 128, 128, 0.2); /* 灰底在明暗两套主题下都成立 */
 }
-.seg {
+.rarity-fill {
+  display: block;
   height: 100%;
-  transition: width 0.5s ease;
+  border-radius: 3px;
+  transition: width 0.4s ease;
 }
-.foot {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 8px;
+.rarity-count {
+  flex: none;
   font-size: 12px;
-  opacity: 0.6;
+  opacity: 0.7;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
 }
-.done {
+.rarity-count b {
+  font-size: 13px;
   opacity: 0.9;
 }
-
-/* 移动端改成竖排：铭牌居中一行，四个奖杯等分下面一行 */
-.mobile .overview-row {
-  flex-direction: column;
-  align-items: center;
-  gap: 14px;
-}
-.mobile .plate {
-  width: 72px;
-  height: 80px;
-}
-.mobile .plate-num {
-  font-size: 22px;
-  line-height: 80px;
-}
-.mobile .trophies {
-  width: 100%;
-  min-width: 0;
-  gap: 4px;
-}
-.mobile .trophy {
-  flex: 1 1 0;
-  min-width: 0;
-}
-.mobile .trophy svg {
-  width: 26px;
-  height: 26px;
-}
-.mobile .trophy-count b {
-  font-size: 19px;
-}
-.mobile .trophy-label {
-  letter-spacing: 1px;
-  padding-left: 1px;
-}
-.mobile .track {
-  margin-top: 16px;
-}
-.mobile .foot {
-  font-size: 11px;
-}
-
-/* 这个留给系统偏好，和断点无关 */
-@media (prefers-reduced-motion: reduce) {
-  .seg {
-    transition: none;
-  }
-}
 .tabs {
   margin: 16px 0;
 }