xuyueandClaude Opus 5.5
2957db9ea9
Deploy / deploy (push) Canceled after 0s
- 题目页编辑器：手机上折行时把行首空格合并掉了，代码看着全部顶格（代码本身没丢） - 相似题推荐：长标题把难度挤出屏幕，现在出省略号 - 登录、注册、看板「讲错误」：本该铺满整屏，被全站弹框「左右各留 16px」卡窄； 高度跟着浏览器工具栏变，底下的入口不再被压住 - 排名页底部三张小卡：「这学期 · 本年级」被截断，现在放不下就折两行，名次对齐 - 我的主页：「成就 · 一共 38 个」不再把「个」单独挤到第二行 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
107 lines
2.7 KiB
Vue
107 lines
2.7 KiB
Vue
<script lang="ts">
|
|
import type { ProblemRow } from "utils/types"
|
|
|
|
/**
|
|
* 同一道题两处（题面末尾、结果页签）都挂着时只拉一次。放在模块级：写在 setup 里就成了
|
|
* 每个实例各一份
|
|
*/
|
|
const cache = new Map<string, Promise<ProblemRow[]>>()
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { storeToRefs } from "pinia"
|
|
import { useThemeVars } from "naive-ui"
|
|
import { getSimilarProblems } from "oj/api"
|
|
import { useProblemStore } from "oj/store/problem"
|
|
|
|
/**
|
|
* 相似题推荐。题面末尾（做对了、或者错了 3 次以上）和结果页签（不在课堂里的题做对之后）
|
|
* 两处用：原来只在题面最底下，学生交完不会再滚回去看。什么时候出现由调用方的 v-if 决定。
|
|
*/
|
|
const props = defineProps<{ title: string }>()
|
|
|
|
const theme = useThemeVars()
|
|
|
|
const { problem } = storeToRefs(useProblemStore())
|
|
const list = ref<ProblemRow[]>([])
|
|
|
|
watch(
|
|
() => problem.value?._id,
|
|
async (id) => {
|
|
list.value = []
|
|
if (!id) return
|
|
if (!cache.has(id))
|
|
cache.set(
|
|
id,
|
|
getSimilarProblems(id).catch(() => []),
|
|
)
|
|
const rows = await cache.get(id)!
|
|
if (problem.value?._id === id) list.value = rows
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
// getSimilarProblems 已经过 toProblemRow，难度是中文，不是 Low/Mid/High
|
|
function difficultyType(difficulty: string) {
|
|
if (difficulty === "简单") return "success"
|
|
if (difficulty === "困难") return "error"
|
|
return "warning"
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section v-if="list.length" class="similar">
|
|
<h3 class="title">{{ props.title }}</h3>
|
|
<n-list bordered>
|
|
<n-list-item v-for="sp in list" :key="sp._id">
|
|
<n-flex align="center" justify="space-between" :wrap="false">
|
|
<router-link :to="{ name: 'problem', params: { problemID: sp._id } }" class="link">
|
|
<n-tag size="small" :bordered="false">{{ sp._id }}</n-tag>
|
|
<span class="name">{{ sp.title }}</span>
|
|
</router-link>
|
|
<n-tag v-if="sp.difficulty" size="small" :type="difficultyType(sp.difficulty)">
|
|
{{ sp.difficulty }}
|
|
</n-tag>
|
|
</n-flex>
|
|
</n-list-item>
|
|
</n-list>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.similar {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
/* 列表项的内容区默认按内容撑宽，长标题会把难度挤出屏幕，省略号也不出来 */
|
|
.similar :deep(.n-list-item__main) {
|
|
min-width: 0;
|
|
}
|
|
|
|
.link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.link:hover .name {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.name {
|
|
color: v-bind("theme.primaryColor");
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|