feat: add submit deadline

Author: HuanCheng65

src/utils/deadline.ts

@@ -0,0 +1,29 @@
+// Deadline utilities for submission cutoff
+// Deadline: 2025-09-03 13:00 Beijing Time (UTC+8) => 2025-09-03T05:00:00Z
+
+export const DEADLINE_UTC_ISO = '2025-09-03T05:00:00Z';
+export const DEADLINE_LABEL = '2025年9月3日 北京时间 13:00';
+export const DEADLINE_TS = Date.parse(DEADLINE_UTC_ISO);
+
+export const getRemainingMs = (now: number = Date.now()): number => {
+  const diff = DEADLINE_TS - now;
+  return diff > 0 ? diff : 0;
+};
+
+export const isPastDeadline = (now: number = Date.now()): boolean => {
+  return now >= DEADLINE_TS;
+};
+
+export const formatCountdown = (ms: number): string => {
+  if (ms <= 0) return '已截止';
+  const totalSeconds = Math.floor(ms / 1000);
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor((totalSeconds % 86400) / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  const two = (n: number) => (n < 10 ? `0${n}` : String(n));
+  const hms = `${two(hours)}:${two(minutes)}:${two(seconds)}`;
+  return days > 0 ? `${days}天 ${hms}` : hms;
+};
+

src/views/Home.vue

@@ -20,6 +20,14 @@
         <router-link to="/submit" class="menu-button">
           <div class="pixel-icon code-icon"></div>
           <span>提交算法</span>
+          <span
+            v-if="!isPastDeadline"
+            class="menu-countdown-badge"
+            :class="{ soon: isSoon && !isUrgent, urgent: isUrgent }"
+          >
+            剩余 {{ countdownText }}
+          </span>
+          <span v-else class="menu-countdown-badge ended">已截止</span>
         </router-link>
 
         <router-link to="/tournament" class="menu-button tournament-button">
@@ -42,12 +50,36 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, onMounted, onUnmounted } from 'vue';
 import { useAuth } from '../stores/auth';
+import { getRemainingMs, isPastDeadline as pastDeadlineFn, formatCountdown } from '../utils/deadline';
 
 const { state } = useAuth();
 
 const nickname = computed(() => state.user?.nickname || '玩家');
+
+// 截止倒计时（首页展示）
+const nowMs = ref<number>(Date.now());
+const isPastDeadline = computed(() => pastDeadlineFn(nowMs.value));
+const remainingMs = computed(() => getRemainingMs(nowMs.value));
+const countdownText = computed(() => formatCountdown(remainingMs.value));
+const isUrgent = computed(() => remainingMs.value > 0 && remainingMs.value <= 60 * 60 * 1000); // < 1h
+const isSoon = computed(() => remainingMs.value > 0 && remainingMs.value <= 24 * 60 * 60 * 1000); // < 24h
+let deadlineTimer: number | null = null;
+
+onMounted(() => {
+  if (deadlineTimer) clearInterval(deadlineTimer);
+  deadlineTimer = setInterval(() => {
+    nowMs.value = Date.now();
+  }, 1000) as unknown as number;
+});
+
+onUnmounted(() => {
+  if (deadlineTimer) {
+    clearInterval(deadlineTimer);
+    deadlineTimer = null;
+  }
+});
 </script>
 
 <style scoped>
@@ -125,6 +157,39 @@ const nickname = computed(() => state.user?.nickname || '玩家');
   font-family: 'Press Start 2P', monospace;
 }
 
+/* 提交截止倒计时徽标 */
+.menu-countdown-badge {
+  margin-left: auto;
+  padding: 4px 6px;
+  border: 2px solid var(--accent-color);
+  color: var(--accent-color);
+  background: rgba(74, 222, 128, 0.12);
+  font-size: 12px;
+  line-height: 1;
+  border-radius: 4px;
+  font-family: 'Press Start 2P', monospace;
+}
+.menu-countdown-badge.soon {
+  border-color: #ffc107;
+  color: #ffc107;
+  background: rgba(255, 193, 7, 0.12);
+}
+.menu-countdown-badge.urgent {
+  border-color: var(--error-color);
+  color: var(--error-color);
+  background: rgba(239, 68, 68, 0.12);
+  animation: subtlePulse 1.4s ease-in-out infinite;
+}
+.menu-countdown-badge.ended {
+  border-color: var(--error-color);
+  color: var(--error-color);
+  background: rgba(239, 68, 68, 0.12);
+}
+@keyframes subtlePulse {
+  0%, 100% { transform: translateY(0); filter: brightness(1); }
+  50% { transform: translateY(-1px); filter: brightness(1.1); }
+}
+
 .menu-button:hover {
   border-color: var(--accent-color);
   transform: translateY(-2px);

src/views/SubmitCode.vue

@@ -6,6 +6,19 @@
         <div class="pixel-snake"></div>
       </div>
 
+      <!-- 截止时间与倒计时提示 -->
+      <div class="deadline-banner pixel-border" :class="{ passed: isPastDeadline }">
+        <template v-if="!isPastDeadline">
+          <span class="deadline-text">提交截止倒计时：</span>
+          <span class="deadline-timer">{{ countdownText }}</span>
+          <span class="deadline-note">（截止时间：{{ DEADLINE_LABEL }}）</span>
+        </template>
+        <template v-else>
+          <span class="deadline-text">提交已截止</span>
+          <span class="deadline-note">（截止时间：{{ DEADLINE_LABEL }}）</span>
+        </template>
+      </div>
+
       <div class="submit-content">
         <div v-if="!isCompilingUI && !hasResult" class="upload-section">
           <label for="codeFile" class="file-label pixel-border"
@@ -37,15 +50,16 @@
 
           <div class="submit-actions">
             <button @click="handleSubmit" class="pixel-button"
-              :disabled="isUploading || !selectedFile || rateLimitCountdown > 0">
-              {{ isUploading ? '上传中...' : rateLimitCountdown > 0 ? `等待${rateLimitCountdown}秒` : '提交代码' }}
+              :disabled="isUploading || !selectedFile || rateLimitCountdown > 0 || isPastDeadline">
+              {{ isPastDeadline ? '已截止' : (isUploading ? '上传中...' : rateLimitCountdown > 0 ? `等待${rateLimitCountdown}秒` : '提交代码') }}
             </button>
           </div>
 
           <!-- 显示所有上传阶段的错误（文件类型、大小、429等） -->
           <div v-if="error" :class="['error-message', { 'rate-limit-error': rateLimitCountdown > 0 }]">
             {{ rateLimitCountdown > 0 ? `请求频率过高，请${rateLimitCountdown}秒后重试` : error }}
           </div>
+          <div v-if="isPastDeadline" class="deadline-hint">已超过截止时间，禁止提交。</div>
         </div>
 
         <!-- 编译/结果区域：在上传完成后或 SUBMITTED 后进入显示（统一使用状态条样式） -->
@@ -102,11 +116,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onUnmounted, computed, nextTick } from 'vue';
+import { ref, onUnmounted, onMounted, computed, nextTick } from 'vue';
 import { sandboxService } from '../services/sandboxService';
 import { useAuth } from '../stores/auth';
 import { SSE } from 'sse.js';
 import { RateLimitError } from '../types/RateLimitError';
+import { DEADLINE_TS, DEADLINE_LABEL, getRemainingMs, isPastDeadline as pastDeadlineFn, formatCountdown } from '../utils/deadline';
 
 const { state } = useAuth();
 
@@ -125,6 +140,12 @@ const jobId = ref<string | null>(null);
 const rateLimitCountdown = ref<number>(0);
 const rateLimitTimer = ref<number | null>(null);
 
+// 截止时间与倒计时
+const nowMs = ref<number>(Date.now());
+const isPastDeadline = computed(() => pastDeadlineFn(nowMs.value));
+const countdownText = computed(() => formatCountdown(getRemainingMs(nowMs.value)));
+let deadlineTimer: number | null = null;
+
 const statusBarClass = computed(() => {
   if (hasResult.value && compilationStatus.value) {
     return `status-${compilationStatus.value}`;
@@ -361,6 +382,11 @@ const handleSubmit = async () => {
     return;
   }
 
+  if (isPastDeadline.value) {
+    error.value = '已超过截止时间，无法提交';
+    return;
+  }
+
   // 重置状态
   closeSSEConnection();
   isUploading.value = true;
@@ -429,9 +455,21 @@ const formatDate = (timestamp: number): string => {
 };
 
 // 组件卸载时清理SSE连接和定时器
+onMounted(() => {
+  // 倒计时更新
+  if (deadlineTimer) clearInterval(deadlineTimer);
+  deadlineTimer = setInterval(() => {
+    nowMs.value = Date.now();
+  }, 1000) as unknown as number;
+});
+
 onUnmounted(() => {
   closeSSEConnection();
   clearRateLimitTimer();
+  if (deadlineTimer) {
+    clearInterval(deadlineTimer);
+    deadlineTimer = null;
+  }
 });
 </script>
 
@@ -451,6 +489,37 @@ onUnmounted(() => {
   overflow-y: auto;
 }
 
+/* 截止时间提示条 */
+.deadline-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  margin-bottom: 16px;
+  background: var(--input-bg);
+  border: 2px solid var(--border-color);
+}
+.deadline-banner.passed {
+  border-color: var(--error-color);
+  background: rgba(239, 68, 68, 0.08);
+}
+.deadline-text {
+  font-weight: 600;
+  color: var(--text-color);
+}
+.deadline-timer {
+  font-family: monospace;
+  color: var(--accent-color);
+}
+.deadline-note {
+  color: var(--border-color);
+  font-size: 12px;
+}
+.deadline-hint {
+  text-align: center;
+  color: var(--error-color);
+}
+
 /* 自定义滚动条样式 */
 .submit-card::-webkit-scrollbar {
   width: 12px;