feat: 人多时建议稍后答题

contest/js/static_src/src/index_and_info.js

@@ -9,6 +9,11 @@ import { get_data } from './util'
 /** @type {"not taking" | "taking contest" | "deadline passed" | ""} */
 const status = get_data('status')
 
+/** @type {number} */
+const traffic = get_data('traffic')
+/** 人多时建议等待的秒数 */
+const TIME_TO_WAIT_IF_JAMMED = 30 // s
+
 if (status === 'deadline passed') {
  Swal.fire({
  title: '上次作答已超时',
@@ -28,17 +33,40 @@ if (status !== 'taking contest') {
  // 后续请求异步，必须先阻止
  event.preventDefault()
 
- const result = await Swal.fire({
- title: '确定前往答题？',
- text: '答题次数有限，发卷后计时无法暂停。',
- icon: 'question',
- confirmButtonText: anchor.textContent,
- showCancelButton: true,
- cancelButtonText: '取消',
- showCloseButton: true,
- })
- if (result.isConfirmed) {
- window.location.assign(anchor.href)
+ // 如果系统仍有能力，正常答题；不然建议稍后参与
+ // 为避免进一步向后端施压，这部分逻辑在前端实现，并尽可能拖延时间
+ if (traffic < 0.90) {
+ const result = await Swal.fire({
+ title: '确定前往答题？',
+ text: '答题次数有限，发卷后计时无法暂停。',
+ icon: 'question',
+ confirmButtonText: anchor.textContent,
+ showCancelButton: true,
+ cancelButtonText: '取消',
+ showCloseButton: true,
+ })
+ if (result.isConfirmed) {
+ window.location.assign(anchor.href)
+ }
+ } else {
+ let interval
+ await Swal.fire({
+ title: '非常抱歉',
+ html: `<p>当前答题人数已达容量 ${(traffic * 100).toFixed()}%，现在答题成绩可能异常。</p><p>建议您等<strong></strong>秒再重新参与。</p>`,
+ icon: 'warning',
+ timer: TIME_TO_WAIT_IF_JAMMED * 1000, // ms
+ timerProgressBar: true,
+ didOpen: () => {
+ Swal.showLoading()
+ const tick = Swal.getPopup().querySelector('strong')
+ interval = setInterval(() => {
+ tick.textContent = `${(Swal.getTimerLeft() / 1000).toFixed()}`
+ }, 500)
+ },
+ willClose: () => clearInterval(interval),
+ })
+
+ window.location.reload()
  }
  })
  }

contest/quiz/templates/index.html

@@ -4,6 +4,7 @@
 {% block scripts %}
  <script type='module' src="{% static 'js/dist/index_and_info.js' %}"></script>
  {{ status | json_script:"data:status" }}
+ {{ traffic | json_script:"data:traffic" }}
 {% endblock scripts %}
 {% block heading %}
 {% endblock heading %}

contest/quiz/views.py

@@ -110,6 +110,12 @@ def manage_status(
  return ""
 
 
+def calc_traffic() -> float:
+ """估计当前在线人数占系统能力的比例"""
+ # TODO: 此处是经验公式，应该按实际情况更新
+ return DraftResponse.objects.count() / 400
+
+
 class IndexView(TemplateView):
  """首页"""
 
@@ -126,6 +132,7 @@ def get_context_data(self, **kwargs) -> dict[str, Any]:
 
  context["status"] = manage_status(self.request.user)
  context["constants"] = constants
+ context["traffic"] = calc_traffic()
 
  return context
 

contest/theme/static_src/src/styles.css

@@ -13,3 +13,14 @@
 .time-progress-severe {
  animation: blinking 1s infinite
 }
+
+/* sweetalert2 */
+div:where(.swal2-container) .swal2-icon-warning {
+ div:where(.swal2-timer-progress-bar) {
+ background: #ff9030;
+ }
+
+ div:where(.swal2-loader) {
+ border-color: #f8bb86 rgba(0, 0, 0, 0) #f8bb86 rgba(0, 0, 0, 0);
+ }
+}