xuyueandClaude Opus 5.5
a5d5c39411
- 题目页：安卓按返回键收键盘时编辑器不失焦，符号键一直贴底、「运行例子 / 提交」不回来。 改成看键盘真弹着没有（可视视口变矮），不只看焦点 - 比赛排名：结束后的领奖台三块共 646px，手机上第一名被切掉、第三名看不见；改成平分一行 - iPhone：点 14/15px 的输入框和代码编辑器，Safari 会整页放大且不缩回；只给 iOS 加 maximum-scale=1 - 登录：手机上选完班不再自动聚焦搜索框（键盘弹出来盖住半张名单） - 题单：窄屏上题目拆成两张没标题的卡片，像分了两组；放不下两栏时合成一张 - 「中等」在题目页是蓝色、在题目列表是橙色，统一成橙色 - 零碎：自学四列表格在 360 宽上收窄格子；统计「错得最多的题」表头不再挤成竖排； 「第 N 名」「14 道」不再把最后一个字甩到下一行 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
79 lines
2.4 KiB
Vue
79 lines
2.4 KiB
Vue
<script setup lang="ts">
|
||
import { useThemeVars } from "naive-ui"
|
||
import { storeToRefs } from "pinia"
|
||
import { useCodeStore } from "oj/store/code"
|
||
import { useProblemStore } from "oj/store/problem"
|
||
import { useSubmissionStore } from "oj/store/submission"
|
||
import SubmitCode from "./SubmitCode.vue"
|
||
import { typing } from "../utils/symbolKeys"
|
||
|
||
const SubmitFlowchart = defineAsyncComponent(() => import("./SubmitFlowchart.vue"))
|
||
|
||
/**
|
||
* 手机上屏幕底部固定的「运行例子 / 提交」（设计文档 5.6）。原来这两个按钮在「代码」页签
|
||
* 顶上，和语言、更多挤成两行；看着题面想交一次，还得先切回代码页签。
|
||
* 提交状态、代码都在 store 里，编辑器没挂着也能交。
|
||
*/
|
||
const theme = useThemeVars()
|
||
const codeStore = useCodeStore()
|
||
const submissionStore = useSubmissionStore()
|
||
const { samplesRunning } = submissionStore.trial
|
||
const { problem } = storeToRefs(useProblemStore())
|
||
|
||
// 和工具栏同一个条件：SQL 不走判题机、流程图没得跑，没有例子的题不给
|
||
const canRunSamples = computed(
|
||
() =>
|
||
!!problem.value?.samples.length &&
|
||
codeStore.code.language !== "Flowchart" &&
|
||
codeStore.code.language !== "SQL",
|
||
)
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 写代码时（键盘弹着）让位给符号键：两条都贴底会叠在一起，安卓上还会被键盘顶上来。
|
||
按返回键收了键盘、编辑器还有焦点时要回来，所以看 typing 不看焦点 -->
|
||
<div v-show="!typing" class="mobile-actions">
|
||
<n-button
|
||
v-if="canRunSamples"
|
||
size="large"
|
||
type="primary"
|
||
ghost
|
||
class="action"
|
||
:loading="samplesRunning"
|
||
:disabled="!codeStore.code.value.trim()"
|
||
@click="submissionStore.runSamples()"
|
||
>
|
||
运行例子
|
||
</n-button>
|
||
<div class="action">
|
||
<SubmitFlowchart v-if="codeStore.code.language === 'Flowchart'" size="large" block />
|
||
<SubmitCode v-else size="large" block />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.mobile-actions {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 10;
|
||
display: flex;
|
||
gap: 10px;
|
||
padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
|
||
background-color: v-bind("theme.bodyColor");
|
||
border-top: 1px solid rgba(128, 128, 128, 0.2);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.action {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.mobile-actions :deep(.n-button) {
|
||
height: 44px;
|
||
}
|
||
</style>
|