fix

package.json

@@ -20,11 +20,11 @@
     "@vue-flow/minimap": "^1.5.4",
     "@vue-flow/node-resizer": "^1.5.1",
     "@vue-flow/node-toolbar": "^1.1.1",
-    "@vueuse/core": "^14.3.0",
-    "@vueuse/router": "^14.3.0",
-    "@wangeditor-next/editor": "^6.0.2",
-    "@wangeditor-next/editor-for-vue": "^5.1.14",
-    "axios": "^1.18.1",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/router": "^14.4.0",
+    "@wangeditor-next/editor": "^6.2.0",
+    "@wangeditor-next/editor-for-vue": "^6.2.0",
+    "axios": "^1.19.0",
     "canvas-confetti": "^1.9.4",
     "chart.js": "^4.5.1",
     "chartjs-chart-wordcloud": "^4.4.5",
@@ -33,33 +33,33 @@
     "date-fns": "^4.4.0",
     "fflate": "^0.8.3",
     "highlight.js": "^11.11.1",
-    "md-editor-v3": "^6.5.4",
-    "mermaid": "^11.16.0",
+    "md-editor-v3": "^6.5.6",
+    "mermaid": "^11.16.1",
     "mermaid-legacy": "npm:mermaid@^9.4.3",
     "naive-ui": "^2.44.1",
-    "nanoid": "^6.0.0",
+    "nanoid": "^6.0.1",
     "normalize.css": "^8.0.1",
     "pinia": "^4.0.2",
     "skulpt": "^1.2.0",
-    "vue": "^3.5.40",
+    "vue": "^3.5.41",
     "vue-chartjs": "^5.3.4",
     "vue-codemirror": "^6.1.1",
     "vue-router": "^5.2.0",
     "y-codemirror.next": "^0.3.5",
     "y-webrtc": "^10.3.0",
-    "yjs": "^13.6.31"
+    "yjs": "^13.6.32"
   },
   "devDependencies": {
     "@iconify/vue": "^5.0.1",
     "@types/canvas-confetti": "^1.9.0",
-    "@types/node": "^26.1.1",
-    "@vitejs/plugin-legacy": "^8.2.2",
+    "@types/node": "^26.1.2",
+    "@vitejs/plugin-legacy": "^8.2.3",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vue/tsconfig": "^0.9.1",
     "prettier": "^3.9.6",
     "typescript": "^7.0.2",
-    "unplugin-auto-import": "^21.0.0",
+    "unplugin-auto-import": "^21.1.0",
     "unplugin-vue-components": "^32.1.0",
-    "vite": "^8.1.5"
+    "vite": "^8.2.1"
   }
 }

src/admin/api.ts

@@ -287,12 +287,6 @@ export function createAnnouncement(announcement: AnnouncementEdit) {
   return http.post("admin/announcement", announcement)
 }
 
-export function getReactionStats(offset = 0, limit = 10, problem: string) {
-  return http.get("admin/reaction", {
-    params: { offset, limit, problem },
-  })
-}
-
 export async function getTutorialList() {
   const res = await http.get<Tutorial[]>("admin/tutorial")
   return res.data

src/admin/problem/list.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { NFlex, NSwitch, NTag } from "naive-ui"
+import { NFlex, NSwitch, NTag, NTooltip } from "naive-ui"
 import { Icon } from "@iconify/vue"
 import Pagination from "shared/components/Pagination.vue"
 import { usePagination } from "shared/composables/pagination"
 import { getTagColor, parseTime } from "utils/functions"
 import type { AdminProblemFiltered } from "utils/types"
-import { DIFFICULTY } from "utils/constants"
+import { DIFFICULTY, REACTIONS } from "utils/constants"
 import { getProblemList, toggleProblemVisible } from "../api"
 import Actions from "./components/Actions.vue"
 import Modal from "./components/Modal.vue"
@@ -135,6 +135,21 @@ const baseColumns: DataTableColumn<AdminProblemFiltered>[] = [
           : null,
       ]),
   },
+  {
+    title: "反馈",
+    key: "top_reaction",
+    width: 60,
+    render: (row) => {
+      const top = row.top_reaction
+      if (!top) return null
+      const reaction = REACTIONS.find((it) => it.key === top.type)
+      if (!reaction) return null
+      return h(NTooltip, null, {
+        trigger: () => h(Icon, { width: 18, icon: reaction.icon }),
+        default: () => `${reaction.label} ${top.count} 人`,
+      })
+    },
+  },
   { title: "出题人", key: "username", width: 120 },
   {
     title: "创建时间",
@@ -167,9 +182,10 @@ const baseColumns: DataTableColumn<AdminProblemFiltered>[] = [
   },
 ]
 
+// 比赛题目接口不返回 top_reaction，这一列只在普通题目列表里显示
 const columns = computed<DataTableColumn<AdminProblemFiltered>[]>(() =>
   isContestProblemList.value
-    ? baseColumns
+    ? baseColumns.filter((it) => !("key" in it) || it.key !== "top_reaction")
     : [{ type: "selection" }, ...baseColumns],
 )
 

src/admin/reaction/list.vue

@@ -1,96 +0,0 @@
-<template>
-  <n-flex justify="space-between" class="titleWrapper">
-    <h2 class="title">题目反馈统计</h2>
-    <div>
-      <n-input
-        v-model:value="query.problem"
-        clearable
-        placeholder="输入题目序号"
-      />
-    </div>
-  </n-flex>
-  <n-data-table striped :columns="columns" :data="rows" />
-  <Pagination
-    :total="total"
-    v-model:limit="query.limit"
-    v-model:page="query.page"
-  />
-</template>
-
-<script lang="ts" setup>
-import { Icon } from "@iconify/vue"
-import { NButton, NFlex } from "naive-ui"
-import Pagination from "shared/components/Pagination.vue"
-import { REACTIONS } from "utils/constants"
-import { parseTime } from "utils/functions"
-import type { ReactionStatsRow } from "utils/types"
-import { getReactionStats } from "../api"
-
-const rows = ref<ReactionStatsRow[]>([])
-const total = ref(0)
-const query = reactive({
-  limit: 10,
-  page: 1,
-  problem: "",
-})
-
-const columns: DataTableColumn<ReactionStatsRow>[] = [
-  {
-    title: "题目",
-    key: "pid",
-    width: 100,
-    fixed: "left",
-    render: (row) =>
-      h(
-        NButton,
-        {
-          text: true,
-          type: "info",
-          onClick: () => window.open("/problem/" + row.pid, "_blank"),
-        },
-        () => row.pid,
-      ),
-  },
-  { title: "标题", key: "title", minWidth: 180 },
-  { title: "表态人数", key: "users", width: 120 },
-  ...REACTIONS.map((item) => ({
-    title: () =>
-      h(NFlex, { align: "center", size: 4, wrap: false }, () => [
-        h(Icon, { icon: item.icon, width: 18 }),
-        item.label,
-      ]),
-    key: item.key,
-    width: 120,
-  })),
-  {
-    title: "时间",
-    key: "last_time",
-    width: 180,
-    render: (row) => parseTime(row.last_time, "YYYY-MM-DD HH:mm:ss"),
-  },
-]
-
-async function listStats() {
-  const offset = (query.page - 1) * query.limit
-  const res = await getReactionStats(offset, query.limit, query.problem)
-  rows.value = res.data.results
-  total.value = res.data.total
-}
-
-onMounted(listStats)
-watch(() => [query.page, query.limit], listStats)
-watchDebounced(() => query.problem, listStats, {
-  debounce: 500,
-  maxWait: 1000,
-})
-</script>
-
-<style scoped>
-.titleWrapper {
-  margin-bottom: 16px;
-}
-
-.title {
-  margin: 0;
-}
-</style>

src/admin/transforms.ts

@@ -14,5 +14,7 @@ export function toProblemListItem(result: AdminProblem) {
     has_ast_rules: result.has_ast_rules,
     allow_flowchart: result.allow_flowchart,
     show_flowchart: result.show_flowchart,
+    // 比赛题目列表接口不返回这个字段
+    top_reaction: result.top_reaction ?? null,
   }
 }

src/oj/api.ts

@@ -4,6 +4,7 @@ import type {
   Exercise,
   Problem,
   ReactionKey,
+  ReactionState,
   Submission,
   SubmissionListPayload,
   SubmitCodePayload,
@@ -225,11 +226,16 @@ export function getMessageList(offset = 0, limit = 10) {
 }
 
 export function getReaction(problemID: number) {
-  return http.get("reaction", { params: { problem_id: problemID } })
+  return http.get<ReactionState>("reaction", {
+    params: { problem_id: problemID },
+  })
 }
 
-export function setReaction(problemID: number, types: ReactionKey[]) {
-  return http.post("reaction", { problem_id: problemID, types })
+export function setReaction(problemID: number, type: ReactionKey) {
+  return http.post<ReactionState>("reaction", {
+    problem_id: problemID,
+    type,
+  })
 }
 
 // TODO: 这个API有问题

src/oj/problem/components/ProblemReaction.vue

@@ -1,156 +1,698 @@
-<template>
-  <n-alert v-if="!userStore.isAuthed" type="error" title="请先登录" />
-  <div v-else>
-    <div class="reactions">
-      <n-tooltip v-for="item in REACTIONS" :key="item.key" trigger="hover">
-        <template #trigger>
-          <button
-            class="reaction-button"
-            :class="{ active: selected.includes(item.key) }"
-            :disabled="isDisabled(item.key)"
-            @click="toggle(item.key)"
-          >
-            <Icon :icon="item.icon" :width="28" />
-            <span v-if="counts" class="count">×{{ counts[item.key] }}</span>
-          </button>
-        </template>
-        {{ tooltipOf(item.key, item.label) }}
-      </n-tooltip>
-    </div>
-    <n-flex v-if="solved && !locked" align="center" class="footer">
-      <n-button
-        type="primary"
-        size="small"
-        :disabled="!selected.length"
-        :loading="submitting"
-        @click="submit"
-      >
-        提交评价
-      </n-button>
-      <span class="hint">最多选 {{ MAX_REACTIONS }} 个，提交后不能修改</span>
-    </n-flex>
-  </div>
-</template>
-
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
+import { useThemeVars } from "naive-ui"
 import { storeToRefs } from "pinia"
+import type { CSSProperties } from "vue"
 import { getReaction, setReaction } from "oj/api"
 import { useProblemStore } from "oj/store/problem"
 import { useUserStore } from "shared/store/user"
-import { MAX_REACTIONS, REACTIONS } from "utils/constants"
+import { REACTIONS } from "utils/constants"
 import type { ReactionCounts, ReactionKey } from "utils/types"
 
+const emit = defineEmits<{ submitted: [] }>()
+
 const userStore = useUserStore()
 const problemStore = useProblemStore()
 const { problem } = storeToRefs(problemStore)
 const message = useMessage()
+const theme = useThemeVars()
 
-// selected 是本地待提交的选择，提交成功后就是 mine，之后不可再改
-const selected = ref<ReactionKey[]>([])
+const mine = ref<ReactionKey | null>(null)
 const counts = ref<ReactionCounts | null>(null)
-const submitting = ref(false)
+const loading = ref(false)
+// 正在提交的 key，用来锁住整组并只在当前选项显示进度。
+const submitting = ref<ReactionKey | null>(null)
+const activeIndex = ref<number | null>(null)
+const keyboardActive = ref(false)
+const wheelRef = ref<HTMLElement | null>(null)
+let loadSequence = 0
 
-const solved = computed(() => problem.value?.my_status === 0)
-// 评价一次定终身：后端已存在记录就锁死，只剩查看
-const locked = ref(false)
+const wheelGeometry = {
+  startAngle: -90,
+  contentRadius: 35,
+  pushRadius: 4,
+  outerRadius: 50,
+  arcPointCount: 9,
+  hitInnerRadius: 0.18,
+  hitOuterRadius: 0.49,
+} as const
 
-function isDisabled(key: ReactionKey) {
-  if (!solved.value || locked.value || submitting.value) return true
-  if (selected.value.includes(key)) return false
-  return selected.value.length >= MAX_REACTIONS
-}
+const sliceAngle = 360 / REACTIONS.length
 
-function tooltipOf(key: ReactionKey, label: string) {
-  if (!solved.value) return "完成本题后可以评价"
-  if (locked.value) return `${label}（已评价，不能修改）`
-  if (isDisabled(key)) return `最多选 ${MAX_REACTIONS} 个，先取消一个`
-  return label
-}
-
-function toggle(key: ReactionKey) {
-  selected.value = selected.value.includes(key)
-    ? selected.value.filter((k) => k !== key)
-    : [...selected.value, key]
-}
-
-async function submit() {
-  if (!problem.value || !selected.value.length) return
-  submitting.value = true
-  try {
-    const res = await setReaction(problem.value.id, selected.value)
-    selected.value = res.data.mine
-    counts.value = res.data.counts
-    locked.value = true
-  } catch {
-    message.error("提交失败，请重试")
-  } finally {
-    submitting.value = false
+function pointOnCircle(angle: number, radius: number) {
+  const radians = (angle * Math.PI) / 180
+  return {
+    x: 50 + Math.cos(radians) * radius,
+    y: 50 + Math.sin(radians) * radius,
   }
 }
 
-async function load() {
-  if (!problem.value) return
-  const res = await getReaction(problem.value.id)
-  selected.value = res.data.mine
-  counts.value = res.data.counts
-  locked.value = res.data.mine.length > 0
+function getWheelItemStyle(index: number): CSSProperties {
+  const centerAngle = wheelGeometry.startAngle + index * sliceAngle
+  const startAngle = centerAngle - sliceAngle / 2
+  const endAngle = centerAngle + sliceAngle / 2
+  const dividerAngle = index * sliceAngle - sliceAngle / 2
+  const position = pointOnCircle(centerAngle, wheelGeometry.contentRadius)
+  const push = pointOnCircle(centerAngle, wheelGeometry.pushRadius)
+  const arcPoints = Array.from(
+    { length: wheelGeometry.arcPointCount },
+    (_, pointIndex) => {
+      const progress = pointIndex / (wheelGeometry.arcPointCount - 1)
+      const angle = startAngle + (endAngle - startAngle) * progress
+      const point = pointOnCircle(angle, wheelGeometry.outerRadius)
+      return `${point.x.toFixed(3)}% ${point.y.toFixed(3)}%`
+    },
+  )
+
+  return {
+    "--segment-path": `polygon(50% 50%, ${arcPoints.join(", ")})`,
+    "--content-x": `${position.x}%`,
+    "--content-y": `${position.y}%`,
+    "--push-x": `${push.x - 50}px`,
+    "--push-y": `${push.y - 50}px`,
+    "--divider-angle": `${dividerAngle}deg`,
+  }
 }
 
-onMounted(() => {
-  if (userStore.isAuthed) load()
+const wheelItems = REACTIONS.map((item, index) => ({
+  ...item,
+  index,
+  style: getWheelItemStyle(index),
+}))
+
+const solved = computed(() => problem.value?.my_status === 0)
+const locked = computed(() => mine.value !== null)
+const canInteract = computed(
+  () =>
+    userStore.isAuthed &&
+    !!problem.value &&
+    solved.value &&
+    !locked.value &&
+    !loading.value &&
+    !submitting.value,
+)
+
+const wheelCenter = computed(() => {
+  if (loading.value) {
+    return {
+      icon: "ph:spinner-gap-bold",
+      eyebrow: "正在读取",
+      label: "题目点评",
+      spinning: true,
+    }
+  }
+
+  if (submitting.value) {
+    const item = REACTIONS.find((reaction) => reaction.key === submitting.value)
+    return {
+      icon: "svg-spinners:180-ring-with-bg",
+      eyebrow: "正在记录",
+      label: item?.label ?? "提交点评",
+      spinning: false,
+    }
+  }
+
+  if (mine.value) {
+    const item = REACTIONS.find((reaction) => reaction.key === mine.value)
+    return {
+      icon: "ph:check-bold",
+      eyebrow: "你的选择",
+      label: item?.label ?? "已提交",
+      spinning: false,
+    }
+  }
+
+  if (!userStore.isAuthed) {
+    return {
+      icon: "ph:user-circle-dashed",
+      eyebrow: "登录后开放",
+      label: "登录后点评",
+      spinning: false,
+    }
+  }
+
+  if (activeIndex.value !== null) {
+    const item = wheelItems[activeIndex.value]
+    const count = counts.value?.[item.key]
+    return {
+      icon: item.icon,
+      eyebrow: count === undefined ? "选择这项" : `${count} 人选择`,
+      label: item.label,
+      spinning: false,
+    }
+  }
+
+  if (!solved.value) {
+    return {
+      icon: "ph:lock-simple-bold",
+      eyebrow: "完成后开放",
+      label: "通关后点评",
+      spinning: false,
+    }
+  }
+
+  return {
+    icon: "ph:cursor-click-bold",
+    eyebrow: "移动到扇区",
+    label: "选择点评",
+    spinning: false,
+  }
 })
+
+const reactionStyle = computed(() => ({
+  "--reaction-accent": theme.value.primaryColor,
+  "--reaction-card": theme.value.cardColor,
+  "--reaction-border": theme.value.borderColor,
+  "--reaction-text": theme.value.textColor1,
+  "--reaction-text-faint": theme.value.textColor3,
+}))
+
+function optionAriaLabel(key: ReactionKey, label: string) {
+  const count = counts.value?.[key]
+  const countText = count === undefined ? "" : `，${count} 人选择`
+  const selectedText = mine.value === key ? "，你的选择" : ""
+  return `${label}${countText}${selectedText}`
+}
+
+function getPointerIndex(event: PointerEvent | MouseEvent) {
+  const wheel = wheelRef.value
+  if (!wheel) return null
+
+  const bounds = wheel.getBoundingClientRect()
+  const x = event.clientX - (bounds.left + bounds.width / 2)
+  const y = event.clientY - (bounds.top + bounds.height / 2)
+  const distance = Math.hypot(x, y)
+
+  if (
+    distance < bounds.width * wheelGeometry.hitInnerRadius ||
+    distance > bounds.width * wheelGeometry.hitOuterRadius
+  ) {
+    return null
+  }
+
+  const angle = (Math.atan2(y, x) * 180) / Math.PI
+  const rawIndex = Math.round((angle - wheelGeometry.startAngle) / sliceAngle)
+  return (
+    ((rawIndex % wheelItems.length) + wheelItems.length) % wheelItems.length
+  )
+}
+
+function preview(index: number, fromKeyboard = false) {
+  if (!canInteract.value) return
+  keyboardActive.value = fromKeyboard
+  activeIndex.value = index
+}
+
+function clearPreview() {
+  if (locked.value) return
+  activeIndex.value = null
+  keyboardActive.value = false
+}
+
+function onWheelPointerMove(event: PointerEvent) {
+  if (!canInteract.value) return
+  keyboardActive.value = false
+  activeIndex.value = getPointerIndex(event)
+}
+
+function onWheelClick(event: MouseEvent) {
+  if (!canInteract.value) return
+  const target = event.target
+  if (target instanceof Element && target.closest(".reaction-option")) return
+
+  const index = getPointerIndex(event)
+  if (index !== null) pick(wheelItems[index].key)
+}
+
+async function pick(key: ReactionKey) {
+  if (
+    !problem.value ||
+    !solved.value ||
+    locked.value ||
+    loading.value ||
+    submitting.value
+  )
+    return
+
+  activeIndex.value = null
+  keyboardActive.value = false
+  submitting.value = key
+  try {
+    const res = await setReaction(problem.value.id, key)
+    mine.value = res.data.mine
+    counts.value = res.data.counts
+    emit("submitted")
+  } catch {
+    message.error("提交失败，请重试")
+  } finally {
+    submitting.value = null
+  }
+}
+
+async function load(problemId: number) {
+  const sequence = ++loadSequence
+  loading.value = true
+  try {
+    const res = await getReaction(problemId)
+    if (sequence !== loadSequence) return
+    mine.value = res.data.mine
+    counts.value = res.data.counts
+  } catch {
+    if (sequence === loadSequence) message.error("暂时无法读取题目点评")
+  } finally {
+    if (sequence === loadSequence) loading.value = false
+  }
+}
+
+watch(
+  [() => userStore.isAuthed, () => problem.value?.id],
+  ([isAuthed, problemId]) => {
+    mine.value = null
+    counts.value = null
+    submitting.value = null
+    activeIndex.value = null
+    keyboardActive.value = false
+
+    if (!isAuthed || problemId === undefined) {
+      loadSequence += 1
+      loading.value = false
+      return
+    }
+    load(problemId)
+  },
+  { immediate: true },
+)
 </script>
 
+<template>
+  <section class="reaction-panel" :style="reactionStyle" aria-label="题目点评">
+    <div class="wheel-stage">
+      <div
+        ref="wheelRef"
+        class="reaction-wheel"
+        :class="{
+          'has-selection': locked,
+          'is-disabled': !canInteract,
+          'is-keyboard-active': keyboardActive,
+        }"
+        role="group"
+        aria-label="选择一项题目点评，点击后立即提交"
+        :aria-busy="loading || !!submitting"
+        @pointermove="onWheelPointerMove"
+        @pointerleave="clearPreview"
+        @click="onWheelClick"
+      >
+        <span
+          v-for="item in wheelItems"
+          :key="`${item.key}-face`"
+          class="segment-face"
+          :class="{
+            'is-active': activeIndex === item.index,
+            'is-selected': mine === item.key,
+            'is-submitting': submitting === item.key,
+          }"
+          :style="item.style"
+          aria-hidden="true"
+        />
+
+        <span
+          v-for="item in wheelItems"
+          :key="`${item.key}-divider`"
+          class="segment-divider"
+          :style="item.style"
+          aria-hidden="true"
+        />
+
+        <button
+          v-for="item in wheelItems"
+          :key="item.key"
+          type="button"
+          class="reaction-option"
+          :class="{
+            'is-active': activeIndex === item.index,
+            'is-selected': mine === item.key,
+            'is-submitting': submitting === item.key,
+            'is-muted': locked && mine !== item.key,
+            'is-unavailable': !userStore.isAuthed || !solved || loading,
+          }"
+          :style="item.style"
+          :disabled="!canInteract"
+          :aria-pressed="mine === item.key"
+          :aria-label="optionAriaLabel(item.key, item.label)"
+          @focus="preview(item.index, true)"
+          @blur="clearPreview"
+          @click.stop="pick(item.key)"
+        >
+          <span class="option-content">
+            <span class="option-icon" aria-hidden="true">
+              <Icon
+                :icon="
+                  submitting === item.key
+                    ? 'svg-spinners:180-ring-with-bg'
+                    : item.icon
+                "
+              />
+            </span>
+            <span class="option-label">{{ item.label }}</span>
+            <span v-if="counts" class="option-count">
+              {{ counts[item.key] }} 人
+            </span>
+          </span>
+        </button>
+
+        <div class="wheel-core" aria-hidden="true">
+          <div class="core-content">
+            <Icon
+              class="core-icon"
+              :class="{ 'is-spinning': wheelCenter.spinning }"
+              :icon="wheelCenter.icon"
+            />
+            <span class="core-eyebrow">{{ wheelCenter.eyebrow }}</span>
+            <strong class="core-label">{{ wheelCenter.label }}</strong>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
 <style scoped>
-/* 七个按钮一行约需 700px，窄面板放不下就换行，不做横向滚动免得按钮被藏起来 */
-.reactions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+.reaction-panel {
+  width: min(100%, 720px);
+  box-sizing: border-box;
+  container-type: inline-size;
+  margin: 0 auto;
+  padding: clamp(12px, 3vw, 24px);
+  color: var(--reaction-text);
 }
-.reaction-button {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 48px;
-  padding: 0 14px;
-  border: 1px solid rgba(128, 128, 128, 0.3);
-  border-radius: 8px;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
+
+.wheel-stage {
+  display: grid;
+  place-items: center;
+  padding: 4px 0;
+}
+
+.reaction-wheel {
+  position: relative;
+  width: min(100%, 400px);
+  box-sizing: border-box;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border: 1px solid var(--reaction-border);
+  border-radius: 50%;
+  background: var(--reaction-card);
+  isolation: isolate;
+}
+
+.segment-face {
+  position: absolute;
+  inset: 1px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--reaction-text) 4%, var(--reaction-card));
+  clip-path: var(--segment-path);
+  transform: translate(0, 0) scale(1);
+  transform-origin: center;
+  pointer-events: none;
   transition:
-    border-color 0.2s,
-    background-color 0.2s;
+    transform 140ms cubic-bezier(0, 0, 0.2, 1),
+    background-color 140ms ease-out;
 }
-.reaction-button:hover:not(:disabled) {
-  border-color: rgba(128, 128, 128, 0.6);
-  background: rgba(128, 128, 128, 0.1);
+
+.segment-face:is(.is-active, .is-submitting) {
+  z-index: 2;
+  background: color-mix(
+    in srgb,
+    var(--reaction-accent) 10%,
+    var(--reaction-card)
+  );
+  transform: translate(calc(var(--push-x) * 0.7), calc(var(--push-y) * 0.7))
+    scale(1.045);
 }
-.reaction-button.active {
-  border-color: #18a058;
-  background: rgba(24, 160, 88, 0.12);
+
+.segment-face.is-selected {
+  z-index: 3;
+  background: color-mix(
+    in srgb,
+    var(--reaction-accent) 18%,
+    var(--reaction-card)
+  );
+  transform: translate(var(--push-x), var(--push-y)) scale(1.075);
 }
-.reaction-button:disabled {
-  opacity: 0.5;
+
+.segment-divider {
+  position: absolute;
+  z-index: 8;
+  top: 1px;
+  left: calc(50% - 1px);
+  width: 2px;
+  height: calc(50% - 1px);
+  background: var(--reaction-border);
+  transform: rotate(var(--divider-angle));
+  transform-origin: 50% 100%;
+  pointer-events: none;
+}
+
+.reaction-option {
+  position: absolute;
+  z-index: 9;
+  top: var(--content-y);
+  left: var(--content-x);
+  display: flex;
+  width: clamp(66px, 20%, 80px);
+  min-height: clamp(52px, 16%, 64px);
+  align-items: stretch;
+  justify-content: stretch;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--reaction-text);
+  font: inherit;
+  transform: translate(-50%, -50%);
+  touch-action: manipulation;
+  cursor: pointer;
+}
+
+.reaction-option:disabled {
   cursor: not-allowed;
 }
-/* 锁定后选中的那几个仍要看得清，不然自己评过什么都糊成一片 */
-.reaction-button.active:disabled {
+
+.reaction-option.is-unavailable {
+  opacity: 0.58;
+}
+
+.reaction-option.is-muted {
+  opacity: 0.48;
+}
+
+.reaction-option:is(.is-selected, .is-submitting) {
   opacity: 1;
 }
-.footer {
-  margin-top: 12px;
+
+.reaction-option:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--reaction-accent) 55%, transparent);
+  outline-offset: 2px;
 }
-.hint {
+
+.option-content {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 2px;
+  border-radius: 6px;
+  transform: translate(0, 0) scale(1);
+  transition: transform 140ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.reaction-option:active:not(:disabled) .option-content {
+  transform: scale(0.96);
+}
+
+.reaction-option:is(.is-active, .is-submitting) .option-content {
+  transform: translate(calc(var(--push-x) * 0.8), calc(var(--push-y) * 0.8))
+    scale(1.18);
+}
+
+.reaction-option:is(.is-active, .is-submitting):active:not(:disabled)
+  .option-content {
+  transform: translate(calc(var(--push-x) * 0.8), calc(var(--push-y) * 0.8))
+    scale(1.1);
+}
+
+.reaction-option.is-selected .option-content {
+  transform: translate(var(--push-x), var(--push-y)) scale(1.24);
+}
+
+.option-icon {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.option-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.option-label {
   font-size: 13px;
-  opacity: 0.6;
+  font-weight: 600;
+  line-height: 1.25;
+  white-space: nowrap;
 }
-.count {
-  font-size: 15px;
-  opacity: 0.7;
+
+.option-count {
+  color: var(--reaction-text-faint);
+  font-size: 12px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+
+.reaction-option.is-selected .option-count {
+  color: var(--reaction-text);
+}
+
+.wheel-core {
+  position: absolute;
+  z-index: 12;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  width: 31%;
+  aspect-ratio: 1;
+  place-items: center;
+  padding: 12px;
+  border: 1px solid var(--reaction-border);
+  border-radius: 50%;
+  background: var(--reaction-card);
+  color: var(--reaction-text);
+  text-align: center;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.core-content {
+  display: grid;
+  justify-items: center;
+  gap: 3px;
+}
+
+.core-icon {
+  width: clamp(20px, 5cqi, 26px);
+  height: clamp(20px, 5cqi, 26px);
+  font-size: clamp(20px, 5cqi, 26px);
+  color: var(--reaction-text-faint);
+}
+
+.core-eyebrow {
+  color: var(--reaction-text-faint);
+  font-size: clamp(9px, 2.3cqi, 11px);
+  font-weight: 400;
+}
+
+.core-label {
+  font-size: clamp(12px, 3cqi, 15px);
+  font-weight: 600;
+  line-height: 1.2;
+  text-wrap: balance;
+}
+
+.reaction-wheel.is-keyboard-active :is(.segment-face, .option-content) {
+  transition-duration: 0.01ms;
+}
+
+.is-spinning {
+  animation: reaction-spin 850ms linear infinite;
+}
+
+@container (max-width: 440px) {
+  .wheel-stage {
+    padding-top: 0;
+  }
+
+  .reaction-option {
+    width: clamp(58px, 20%, 70px);
+    min-height: clamp(48px, 16%, 56px);
+  }
+
+  .segment-face:is(.is-active, .is-submitting) {
+    transform: translate(calc(var(--push-x) * 0.5), calc(var(--push-y) * 0.5))
+      scale(1.03);
+  }
+
+  .segment-face.is-selected {
+    transform: translate(calc(var(--push-x) * 0.75), calc(var(--push-y) * 0.75))
+      scale(1.05);
+  }
+
+  .option-content {
+    gap: 2px;
+  }
+
+  .reaction-option:is(.is-active, .is-submitting) .option-content {
+    transform: translate(calc(var(--push-x) * 0.55), calc(var(--push-y) * 0.55))
+      scale(1.12);
+  }
+
+  .reaction-option:is(.is-active, .is-submitting):active:not(:disabled)
+    .option-content {
+    transform: translate(calc(var(--push-x) * 0.55), calc(var(--push-y) * 0.55))
+      scale(1.06);
+  }
+
+  .reaction-option.is-selected .option-content {
+    transform: translate(calc(var(--push-x) * 0.75), calc(var(--push-y) * 0.75))
+      scale(1.17);
+  }
+
+  .option-icon {
+    width: 24px;
+    height: 24px;
+    font-size: 21px;
+  }
+
+  .option-icon svg {
+    width: 21px;
+    height: 21px;
+  }
+
+  .option-label {
+    font-size: 11px;
+  }
+
+  .option-count {
+    font-size: 11px;
+  }
+
+  .wheel-core {
+    padding: 10px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .segment-face,
+  .option-content,
+  .option-icon,
+  .option-label,
+  .option-count {
+    transition-duration: 0.01ms;
+  }
+
+  .is-spinning {
+    animation-duration: 1.8s;
+  }
+}
+
+@keyframes reaction-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>

src/oj/problem/components/SubmitCode.vue

@@ -40,6 +40,10 @@ const router = useRouter()
 const [commentPanel] = useToggle()
 const message = useMessage()
 
+function closeCommentPanel() {
+  commentPanel.value = false
+}
+
 const { isDesktop } = useBreakpoints()
 
 // ==================== 烟花效果 ====================
@@ -73,7 +77,7 @@ const { start: startCooldown, isPending: isCooldown } = useTimeout(5000, {
 const { start: showCommentPanelDelayed } = useTimeoutFn(
   async () => {
     const res = await getReaction(problem.value!.id)
-    if (res.data.mine.length === 0) {
+    if (res.data.mine === null) {
       commentPanel.value = true
     }
   },
@@ -261,9 +265,11 @@ watch(
     preset="card"
     title="恭喜你成功提交，说说你对这道题的感受吧"
     :mask-closable="false"
+    :closable="false"
+    :close-on-esc="false"
     :style="{ maxWidth: isDesktop && '50vw', maxHeight: '80vh' }"
     v-model:show="commentPanel"
   >
-    <ProblemReaction />
+    <ProblemReaction @submitted="closeCommentPanel" />
   </n-modal>
 </template>

src/oj/problem/composables/useFireworks.ts

@@ -138,6 +138,7 @@ export function useFireworks() {
 
           confetti({
             particleCount: 12,
+            angle: 270,
             spread: 100,
             startVelocity: 12,
             gravity: 0.6,
@@ -145,7 +146,7 @@ export function useFireworks() {
             ticks: 200,
             scalar: 1.2,
             shapes: ["star"],
-            origin: { x: Math.random(), y: -0.1 },
+            origin: { x: Math.random(), y: 0 },
             colors: ["#FFD700", "#FFA500", "#FFFF00", "#FF69B4", "#00CED1"],
           })
         }, 150)
@@ -285,29 +286,32 @@ export function useFireworks() {
 
       // 效果7: 螺旋上升
       () => {
-        const defaults = {
-          spread: 360,
-          ticks: 100,
-          gravity: 0,
-          decay: 0.94,
-          startVelocity: 30,
-        }
+        const steps = 16
+        const colors = ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"]
 
-        function shoot() {
-          confetti({
-            ...defaults,
-            particleCount: 50,
-            scalar: 1.2,
-            shapes: ["circle", "square"],
-            colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"],
-          })
-        }
+        for (let step = 0; step < steps; step++) {
+          runLater(() => {
+            const progress = step / (steps - 1)
+            const phase = step * (Math.PI / 4)
 
-        runLater(shoot, 0)
-        runLater(shoot, 100)
-        runLater(shoot, 200)
-        runLater(shoot, 300)
-        runLater(shoot, 400)
+            confetti({
+              particleCount: 7,
+              angle: 90 + Math.cos(phase) * 18,
+              spread: 25,
+              startVelocity: 16,
+              gravity: 0.25,
+              decay: 0.94,
+              ticks: 100,
+              scalar: 0.9,
+              shapes: ["circle", "square"],
+              origin: {
+                x: 0.5 + Math.sin(phase) * 0.14,
+                y: 0.85 - progress * 0.55,
+              },
+              colors,
+            })
+          }, step * 65)
+        }
       },
 
       // 效果8: 表情包烟花
@@ -315,6 +319,7 @@ export function useFireworks() {
         loadEmojiShapes().then((emojiShapes) => {
           confetti({
             shapes: emojiShapes,
+            flat: true,
             scalar: 6,
             particleCount: 18,
             spread: 360,
@@ -349,16 +354,28 @@ export function useFireworks() {
 
       // 效果10: 礼花瀑布
       () => {
-        confetti({
-          particleCount: 150,
-          spread: 180,
-          startVelocity: 0,
-          gravity: 1.2,
-          decay: 0.95,
-          ticks: 300,
-          origin: { x: 0.5, y: 0 },
-          colors: ["#f6d365", "#fda085", "#fbc2eb", "#a6c1ee", "#84fab0"],
-        })
+        const animationEnd = Date.now() + 1800
+        const colors = ["#f6d365", "#fda085", "#fbc2eb", "#a6c1ee", "#84fab0"]
+
+        const interval = setInterval(() => {
+          if (Date.now() >= animationEnd) return stopTimer(interval)
+
+          for (let column = 0; column < 6; column++) {
+            confetti({
+              particleCount: 2,
+              angle: 270,
+              spread: 30,
+              startVelocity: 5,
+              gravity: 1,
+              decay: 0.96,
+              ticks: 240,
+              scalar: 1.1,
+              origin: { x: (column + Math.random()) / 6, y: 0 },
+              colors,
+            })
+          }
+        }, 120)
+        timers.add(interval)
       },
     ]
 

src/routes.ts

@@ -257,12 +257,6 @@ export const admins: RouteRecordRaw = {
       props: true,
       meta: { requiresSuperAdmin: true },
     },
-    {
-      path: "reaction/list",
-      name: "admin reaction list",
-      component: () => import("admin/reaction/list.vue"),
-      meta: { requiresSuperAdmin: true },
-    },
     {
       path: "message/list",
       name: "admin message list",

src/shared/layout/admin.vue

@@ -114,15 +114,6 @@ const options = computed<MenuOption[]>(() => {
           h(RouterLink, { to: "/admin/user/list" }, { default: () => "用户" }),
         key: "admin user list",
       },
-      {
-        label: () =>
-          h(
-            RouterLink,
-            { to: "/admin/reaction/list" },
-            { default: () => "反馈" },
-          ),
-        key: "admin reaction list",
-      },
       {
         label: () =>
           h(

src/utils/constants.ts

@@ -368,5 +368,3 @@ export const REACTIONS: {
   { key: "interesting", label: "有意思", icon: "fluent-emoji:star-struck" },
   { key: "want_explain", label: "想听讲解", icon: "fluent-emoji:books" },
 ]
-
-export const MAX_REACTIONS = 3

src/utils/types.ts

@@ -177,7 +177,11 @@ export interface Problem {
   sql_display?: SQLDisplay | null
 }
 
-export type AdminProblem = Problem & AlterProblem
+export type AdminProblem = Problem &
+  AlterProblem & {
+    // 后台题目列表接口附带的最高票评价，比赛题目列表不返回
+    top_reaction?: { type: ReactionKey; count: number } | null
+  }
 
 interface AlterProblem {
   test_case_id: string
@@ -226,6 +230,8 @@ export interface AdminProblemFiltered {
   has_ast_rules: boolean
   allow_flowchart: boolean
   show_flowchart: boolean
+  // 比赛题目列表接口不返回这个字段
+  top_reaction?: { type: ReactionKey; count: number } | null
 }
 
 // 题单相关类型
@@ -606,17 +612,10 @@ export type ReactionKey =
 export type ReactionCounts = Record<ReactionKey, number>
 
 export interface ReactionState {
-  mine: ReactionKey[]
+  mine: ReactionKey | null
   counts: ReactionCounts | null
 }
 
-export interface ReactionStatsRow extends ReactionCounts {
-  pid: string
-  title: string
-  users: number
-  last_time: string
-}
-
 export interface Tutorial {
   id: number
   title: string

vite.config.ts

@@ -6,6 +6,69 @@ import AutoImport from "unplugin-auto-import/vite"
 import Components from "unplugin-vue-components/vite"
 import { NaiveUiResolver } from "unplugin-vue-components/resolvers"
 
+// 显式保留 Chrome 90 所需的运行时兼容项，避免 plugin-legacy 对每个产物执行 Babel 扫描。
+// 升级前端依赖后需要重新审计此列表。
+const polyfills = [
+  "es.aggregate-error.cause",
+  "es.array-buffer.detached",
+  "es.array-buffer.transfer-to-fixed-length",
+  "es.array-buffer.transfer",
+  "es.array.at",
+  "es.array.find-last-index",
+  "es.array.push",
+  "es.array.to-reversed",
+  "es.array.to-sorted",
+  "es.array.to-spliced",
+  "es.array.with",
+  "es.error.cause",
+  "es.iterator.constructor",
+  "es.iterator.drop",
+  "es.iterator.every",
+  "es.iterator.filter",
+  "es.iterator.find",
+  "es.iterator.flat-map",
+  "es.iterator.for-each",
+  "es.iterator.map",
+  "es.iterator.reduce",
+  "es.iterator.some",
+  "es.iterator.to-array",
+  "es.json.parse",
+  "es.json.stringify",
+  "es.map.get-or-insert-computed",
+  "es.map.get-or-insert",
+  "es.object.has-own",
+  "es.regexp.flags",
+  "es.set.difference.v2",
+  "es.set.intersection.v2",
+  "es.set.is-disjoint-from.v2",
+  "es.set.is-subset-of.v2",
+  "es.set.is-superset-of.v2",
+  "es.set.symmetric-difference.v2",
+  "es.set.union.v2",
+  "es.string.at-alternative",
+  "es.typed-array.at",
+  "es.typed-array.find-last-index",
+  "es.typed-array.find-last",
+  "es.typed-array.set",
+  "es.typed-array.to-reversed",
+  "es.typed-array.to-sorted",
+  "es.typed-array.with",
+  "es.uint8-array.set-from-base64",
+  "es.uint8-array.set-from-hex",
+  "es.uint8-array.to-base64",
+  "es.uint8-array.to-hex",
+  "es.weak-map.get-or-insert-computed",
+  "es.weak-map.get-or-insert",
+  "esnext.array.group",
+  "web.dom-exception.stack",
+  "web.immediate",
+  "web.structured-clone",
+  "web.url-search-params.delete",
+  "web.url-search-params.has",
+  "web.url-search-params.size",
+  "web.url.can-parse",
+]
+
 // index.html 里按需注入 MaxKB 脚本（原 Rsbuild EJS 模板的等价实现）
 function injectMaxkb(maxkbUrl: string | undefined): Plugin {
   return {
@@ -48,7 +111,7 @@ export default defineConfig(({ mode }) => {
       legacy({
         renderLegacyChunks: false,
         modernTargets: "chrome>=90",
-        modernPolyfills: true,
+        modernPolyfills: polyfills,
       }),
       AutoImport({
         imports: [