fix(题目列表): 「全部类型」里 0 道的类型还能点,点了只得到一个空列表——0 道的置灰不能点
已经选中的那一项除外:选了「画流程图」再切到没有这类题的知识点,它仍显示为选中,好让人看出列表为什么空。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
9cc7f0f60c
commit
99d3d99128
1 file changed
+19
-1
@@ -245,8 +245,18 @@ watch([showTypeMenu, () => showMobileFilters.value, countFilters], () => {
|
|||||||
if (showTypeMenu.value || showMobileFilters.value) refreshTypeCounts()
|
if (showTypeMenu.value || showMobileFilters.value) refreshTypeCounts()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 当前条件下一道都没有的类型置灰:点了只会得到一个空列表。
|
||||||
|
* 已经选中的那一项除外 —— 选了「画流程图」再切到一个没有这类题的知识点,它变成 0 道,
|
||||||
|
* 置灰的话看着像没选中,人也不知道列表为什么空了
|
||||||
|
*/
|
||||||
|
function typeEmpty(kind: ProblemTypeFilter) {
|
||||||
|
return typeCounts.value[kind] === 0 && query.type !== kind
|
||||||
|
}
|
||||||
|
|
||||||
const mobileTypeOptions = computed(() =>
|
const mobileTypeOptions = computed(() =>
|
||||||
TYPES.map((kind) => ({
|
TYPES.map((kind) => ({
|
||||||
|
disabled: typeEmpty(kind),
|
||||||
label:
|
label:
|
||||||
typeCounts.value[kind] === undefined
|
typeCounts.value[kind] === undefined
|
||||||
? PROBLEM_TYPE_LABEL[kind]
|
? PROBLEM_TYPE_LABEL[kind]
|
||||||
@@ -413,6 +423,8 @@ const gridColumns = computed(() =>
|
|||||||
v-for="kind in TYPES"
|
v-for="kind in TYPES"
|
||||||
:key="kind"
|
:key="kind"
|
||||||
:class="{ on: query.type === kind }"
|
:class="{ on: query.type === kind }"
|
||||||
|
:disabled="typeEmpty(kind)"
|
||||||
|
:title="typeEmpty(kind) ? '这里没有这类题' : undefined"
|
||||||
@click="pickType(kind)"
|
@click="pickType(kind)"
|
||||||
>
|
>
|
||||||
<span class="check"><Icon v-if="query.type === kind" icon="ph:check-bold" /></span>
|
<span class="check"><Icon v-if="query.type === kind" icon="ph:check-bold" /></span>
|
||||||
@@ -867,10 +879,16 @@ const gridColumns = computed(() =>
|
|||||||
color: var(--menu-text);
|
color: var(--menu-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
.type-menu button:hover {
|
.type-menu button:hover:not(:disabled) {
|
||||||
background: var(--menu-hover);
|
background: var(--menu-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 没有这类题:整项淡下去(标签自己的颜色也一起),不能点 */
|
||||||
|
.type-menu button:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.45;
|
||||||
|
}
|
||||||
|
|
||||||
.type-menu button.on {
|
.type-menu button.on {
|
||||||
background: var(--menu-on);
|
background: var(--menu-on);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user