xuyue/ojnext
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

batch update
Some checks failed
Deploy / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
yuetsh
2025-10-08 00:46:49 +08:00
parent b8c622dde1
commit b14316b919
48 changed files with 1236 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
rsbuild.config.ts
View File

@@ -14,7 +14,7 @@ export default defineConfig(({ envMode }) => {
target: rawPublicVars["PUBLIC_OJ_URL"],
changeOrigin: true,
}
const wsProxyConfig = {
target: rawPublicVars["PUBLIC_WS_URL"],
ws: true,

1
src/App.vue
View File

@@ -2,7 +2,6 @@
import { darkTheme, dateZhCN, zhCN } from "naive-ui"
import "normalize.css"
import "./index.css"
const isDark = useDark()
// 延迟加载 highlight.js，避免阻塞首屏

4
src/admin/contest/helper.vue
View File

@@ -4,7 +4,7 @@ import { parseTime } from "utils/functions"
import { getACMHelperList, getContest, updateACMHelperChecked } from "../api"
import { getSubmission, getSubmissions } from "oj/api"
import SubmissionDetail from "oj/submission/detail.vue"
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
interface Props {
contestID: string
@@ -28,6 +28,8 @@ interface HelperItem {
const props = defineProps<Props>()
const message = useMessage()
const { isDesktop } = useBreakpoints()
const submissions = ref<HelperItem[]>([])
const contestStartTime = ref<Date | null>(null)
const query = reactive({

24
src/main.ts
View File

@@ -8,19 +8,29 @@ import storage from "utils/storage"
import App from "./App.vue"
import { admins, ojs } from "./routes"
import { toggleLogin } from "./shared/composables/modal"
import { useUserStore } from "./shared/store/user"
const router = createRouter({
history: createWebHistory(),
routes: [ojs, admins],
})
const pinia = createPinia()
// 创建 app 并安装插件
const app = createApp(App)
app.use(pinia)
app.use(router)
// 现在可以安全地使用 Store
import { useAuthModalStore } from "./shared/store/authModal"
import { useUserStore } from "./shared/store/user"
const authStore = useAuthModalStore()
router.beforeEach(async (to, from, next) => {
// 检查是否需要认证
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (!storage.get(STORAGE_KEY.AUTHED)) {
toggleLogin(true)
authStore.openLoginModal()
next("/")
return
}
@@ -34,7 +44,7 @@ router.beforeEach(async (to, from, next) => {
)
) {
if (!storage.get(STORAGE_KEY.AUTHED)) {
toggleLogin(true)
authStore.openLoginModal()
next("/")
return
}
@@ -66,10 +76,6 @@ router.beforeEach(async (to, from, next) => {
next()
})
const pinia = createPinia()
const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount("#app")
if (!!import.meta.env.PUBLIC_ICONIFY_URL) {

4
src/oj/ai/analysis.vue
View File

@@ -50,7 +50,7 @@
</n-spin>
</template>
<script setup lang="ts">
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
import { formatISO, sub, type Duration } from "date-fns"
import TagsRadarChart from "./components/TagsRadarChart.vue"
import DifficultyGradeChart from "./components/DifficultyGradeChart.vue"
@@ -68,6 +68,8 @@ import { DURATION_OPTIONS } from "utils/constants"
const aiStore = useAIStore()
const { isDesktop } = useBreakpoints()
const options = [...DURATION_OPTIONS]
const subOptions = computed<Duration>(() => {

4
src/oj/ai/components/SolvedTable.vue
View File

@@ -13,11 +13,13 @@ import { NButton } from "naive-ui"
import TagTitle from "./TagTitle.vue"
import { SolvedProblem } from "utils/types"
import { useAIStore } from "oj/store/ai"
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
const router = useRouter()
const aiStore = useAIStore()
const { isDesktop } = useBreakpoints()
const solvedProblems = computed(() => aiStore.detailsData.solved)
const columns: DataTableColumn<SolvedProblem>[] = [

5
src/oj/announcement/list.vue
View File

@@ -2,7 +2,7 @@
import { NTag } from "naive-ui"
import { getAnnouncement, getAnnouncementList } from "oj/api"
import Pagination from "shared/components/Pagination.vue"
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
import { parseTime } from "utils/functions"
import { renderTableTitle } from "utils/renders"
import { Announcement } from "utils/types"
@@ -12,6 +12,9 @@ const total = ref(0)
const content = ref("")
const title = ref("")
const [show, toggleShow] = useToggle(false)
const { isDesktop } = useBreakpoints()
const query = reactive({
limit: 10,
page: 1,

11
src/oj/composables/code.ts
View File

@@ -1,11 +0,0 @@
import { STORAGE_KEY } from "utils/constants"
import storage from "utils/storage"
import { Code } from "utils/types"
export const code = reactive<Code>({
value: "",
language: storage.get(STORAGE_KEY.LANGUAGE) || "Python3",
})
export const input = ref("")
export const output = ref("")

3
src/oj/composables/problem.ts
View File

@@ -1,3 +0,0 @@
import { Problem } from "utils/types"
export const problem = ref<Problem | null>(null)

22
src/oj/composables/syncStatus.ts
View File

@@ -1,4 +1,9 @@
// 同步状态管理 composable
import { ref, provide, inject } from "vue"
/**
* 同步状态管理 composable
* 使用 provide/inject 模式在组件树中共享状态
*/
export interface SyncStatusState {
otherUser?: { name: string; isSuperAdmin: boolean }
@@ -8,7 +13,10 @@ export interface SyncStatusState {
// 提供/注入的 key
export const SYNC_STATUS_KEY = Symbol("syncStatus")
// 创建同步状态
/**
* 创建同步状态实例
* 每次调用创建新的状态实例
*/
export function createSyncStatus() {
const otherUser = ref<{ name: string; isSuperAdmin: boolean }>()
const hadConnection = ref(false)
@@ -33,14 +41,20 @@ export function createSyncStatus() {
}
}
// 提供同步状态
/**
* 提供同步状态到子组件
* 在父组件中调用
*/
export function provideSyncStatus() {
const syncStatus = createSyncStatus()
provide(SYNC_STATUS_KEY, syncStatus)
return syncStatus
}
// 注入同步状态
/**
* 注入同步状态
* 在子组件中调用，获取父组件提供的状态
*/
export function injectSyncStatus() {
const syncStatus =
inject<ReturnType<typeof createSyncStatus>>(SYNC_STATUS_KEY)

4
src/oj/contest/components/ContestMenu.vue
View File

@@ -1,12 +1,14 @@
<script setup lang="ts">
import { useContestStore } from "oj/store/contest"
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
import { ContestStatus } from "utils/constants"
const route = useRoute()
const router = useRouter()
const contestStore = useContestStore()
const { isDesktop } = useBreakpoints()
const contestMenuVisible = computed(() => {
if (contestStore.isContestAdmin) return true
if (!contestStore.isPrivate) {

4
src/oj/contest/detail.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { Icon } from "@iconify/vue"
import { CONTEST_STATUS, ContestStatus } from "utils/constants"
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
import { useContestStore } from "../store/contest"
import ContestInfo from "./components/ContestInfo.vue"
import ContestMenu from "./components/ContestMenu.vue"
@@ -12,6 +12,8 @@ const props = defineProps<{
const contestStore = useContestStore()
const message = useMessage()
const { isDesktop } = useBreakpoints()
const password = ref("")
async function check() {

5
src/oj/contest/list.vue
View File

@@ -6,7 +6,7 @@ import { duration, parseTime } from "utils/functions"
import { Contest } from "utils/types"
import ContestTitle from "shared/components/ContestTitle.vue"
import Pagination from "shared/components/Pagination.vue"
import { toggleLogin } from "shared/composables/modal"
import { useAuthModalStore } from "shared/store/authModal"
import { usePagination } from "shared/composables/pagination"
import { useUserStore } from "shared/store/user"
import { CONTEST_STATUS, ContestType } from "utils/constants"
@@ -14,6 +14,7 @@ import { renderTableTitle } from "utils/renders"
const router = useRouter()
const userStore = useUserStore()
const authStore = useAuthModalStore()
interface ContestQuery {
keyword: string
@@ -120,7 +121,7 @@ function rowProps(row: Contest) {
style: "cursor: pointer",
onClick() {
if (!userStore.isAuthed && row.contest_type === ContestType.private) {
toggleLogin(true)
authStore.openLoginModal()
} else {
router.push("/contest/" + row.id)
}

6
src/oj/learn/index.vue
View File

@@ -105,16 +105,18 @@ import { MdPreview } from "md-editor-v3"
import "md-editor-v3/lib/preview.css"
import { Tutorial } from "utils/types"
import { getTutorial, getTutorials } from "../api"
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
const isDark = useDark()
const CodeEditor = defineAsyncComponent(
() => import("shared/components/CodeEditor.vue"),
)
const isDark = useDark()
const route = useRoute()
const router = useRouter()
const { isDesktop } = useBreakpoints()
const step = computed(() => {
if (!route.params.step || !route.params.step.length) return 1
else {

32
src/oj/problem/components/ContestEditor.vue
View File

@@ -1,19 +1,26 @@
<script lang="ts" setup>
import { code } from "oj/composables/code"
import { problem } from "oj/composables/problem"
import { storeToRefs } from "pinia"
import { useCodeStore } from "oj/store/code"
import { useProblemStore } from "oj/store/problem"
import { SOURCES } from "utils/constants"
import CodeEditor from "shared/components/CodeEditor.vue"
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
import storage from "utils/storage"
import { LANGUAGE } from "utils/types"
import Form from "./Form.vue"
const route = useRoute()
const codeStore = useCodeStore()
const problemStore = useProblemStore()
const { problem } = storeToRefs(problemStore)
const { isDesktop } = useBreakpoints()
const contestID = route.params.contestID || null
const storageKey = computed(
() =>
`problem_${problem.value!._id}_contest_${contestID}_lang_${code.language}`,
`problem_${problem.value!._id}_contest_${contestID}_lang_${codeStore.code.language}`,
)
const editorHeight = computed(() =>
@@ -22,10 +29,11 @@ const editorHeight = computed(() =>
onMounted(() => {
const savedCode = storage.get(storageKey.value)
code.value =
codeStore.setCode(
savedCode ||
problem.value!.template[code.language] ||
SOURCES[code.language]
problem.value!.template[codeStore.code.language] ||
SOURCES[codeStore.code.language],
)
})
const changeCode = (v: string) => {
@@ -34,10 +42,12 @@ const changeCode = (v: string) => {
const changeLanguage = (v: LANGUAGE) => {
const savedCode = storage.get(storageKey.value)
code.value =
codeStore.setCode(
savedCode && storageKey.value.split("_").pop() === v
? savedCode
: problem.value!.template[code.language] || SOURCES[code.language]
: problem.value!.template[codeStore.code.language] ||
SOURCES[codeStore.code.language],
)
}
</script>
@@ -45,8 +55,8 @@ const changeLanguage = (v: LANGUAGE) => {
<n-flex vertical>
<Form :storage-key="storageKey" @change-language="changeLanguage" />
<CodeEditor
v-model:value="code.value"
:language="code.language"
v-model:value="codeStore.code.value"
:language="codeStore.code.language"
:height="editorHeight"
@update:model-value="changeCode"
/>

43
src/oj/problem/components/EditorForTest.vue
View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import { code, input, output } from "oj/composables/code"
import { problem } from "oj/composables/problem"
import { storeToRefs } from "pinia"
import { useCodeStore } from "oj/store/code"
import { useProblemStore } from "oj/store/problem"
import { SOURCES } from "utils/constants"
import CodeEditor from "shared/components/CodeEditor.vue"
import storage from "utils/storage"
@@ -13,17 +14,24 @@ const message = useMessage()
const route = useRoute()
const contestID = !!route.params.contestID ? route.params.contestID : null
const codeStore = useCodeStore()
const problemStore = useProblemStore()
const { input, output } = storeToRefs(codeStore)
const { problem } = storeToRefs(problemStore)
const storageKey = computed(
() =>
`problem_${problem.value!._id}_contest_${contestID}_lang_${code.language}`,
`problem_${problem.value!._id}_contest_${contestID}_lang_${codeStore.code.language}`,
)
onMounted(() => {
if (storage.get(storageKey.value)) {
code.value = storage.get(storageKey.value)
codeStore.setCode(storage.get(storageKey.value))
} else {
code.value =
problem.value!.template[code.language] || SOURCES[code.language]
codeStore.setCode(
problem.value!.template[codeStore.code.language] ||
SOURCES[codeStore.code.language],
)
}
})
@@ -36,26 +44,31 @@ function changeLanguage(v: string) {
storage.get(storageKey.value) &&
storageKey.value.split("_").pop() === v
) {
code.value = storage.get(storageKey.value)
codeStore.setCode(storage.get(storageKey.value))
} else {
code.value =
problem.value!.template[code.language] || SOURCES[code.language]
codeStore.setCode(
problem.value!.template[codeStore.code.language] ||
SOURCES[codeStore.code.language],
)
}
}
const copy = async () => {
const success = await copyToClipboard(code.value)
const success = await copyToClipboard(codeStore.code.value)
message[success ? "success" : "error"](`代码复制${success ? "成功" : "失败"}`)
}
const reset = () => {
code.value = problem.value!.template[code.language] || SOURCES[code.language]
codeStore.setCode(
problem.value!.template[codeStore.code.language] ||
SOURCES[codeStore.code.language],
)
storage.remove(storageKey.value)
message.success("代码重置成功")
}
const runCode = async () => {
const res = await createTestSubmission(code, input.value)
const res = await createTestSubmission(codeStore.code, input.value)
output.value = res.output
}
@@ -81,7 +94,7 @@ const languageOptions: DropdownOption[] = problem.value!.languages.map(
<n-flex vertical>
<n-flex align="center">
<n-select
v-model:value="code.language"
v-model:value="codeStore.code.language"
style="width: 120px"
:options="languageOptions"
@update:value="changeLanguage"
@@ -93,9 +106,9 @@ const languageOptions: DropdownOption[] = problem.value!.languages.map(
</n-button>
</n-flex>
<CodeEditor
v-model:value="code.value"
v-model:value="codeStore.code.value"
@update:model-value="changeCode"
:language="code.language"
:language="codeStore.code.language"
/>
</n-flex>
</template>

22
src/oj/problem/components/Form.vue
View File

@@ -1,11 +1,12 @@
<script setup lang="ts">
import { storeToRefs } from "pinia"
import { copyToClipboard } from "utils/functions"
import { code } from "oj/composables/code"
import { problem } from "oj/composables/problem"
import { useCodeStore } from "oj/store/code"
import { useProblemStore } from "oj/store/problem"
import { injectSyncStatus } from "oj/composables/syncStatus"
import { SYNC_MESSAGES } from "shared/composables/sync"
import { LANGUAGE_SHOW_VALUE, SOURCES, STORAGE_KEY } from "utils/constants"
import { isDesktop, isMobile } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
import { useUserStore } from "shared/store/user"
import storage from "utils/storage"
import { LANGUAGE } from "utils/types"
@@ -34,6 +35,12 @@ const message = useMessage()
const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const codeStore = useCodeStore()
const problemStore = useProblemStore()
const { code } = storeToRefs(codeStore)
const { problem } = storeToRefs(problemStore)
const { isMobile, isDesktop } = useBreakpoints()
const syncEnabled = ref(false) // 用户点击按钮后的意图状态（想要开启/关闭）
const statisticPanel = ref(false)
@@ -66,12 +73,15 @@ const languageOptions: DropdownOption[] = problem.value!.languages.map(
)
const copy = async () => {
const success = await copyToClipboard(code.value)
const success = await copyToClipboard(codeStore.code.value)
message[success ? "success" : "error"](`代码复制${success ? "成功" : "失败"}`)
}
const reset = () => {
code.value = problem.value!.template[code.language] || SOURCES[code.language]
codeStore.setCode(
problem.value!.template[codeStore.code.language] ||
SOURCES[codeStore.code.language],
)
storage.remove(props.storageKey)
message.success("代码重置成功")
}
@@ -121,7 +131,7 @@ defineExpose({
<template>
<n-flex align="center">
<n-select
v-model:value="code.language"
v-model:value="codeStore.code.language"
style="width: 120px"
:size="buttonSize"
:options="languageOptions"

5
src/oj/problem/components/ProblemComment.vue
View File

@@ -107,7 +107,8 @@
</template>
<script lang="ts" setup>
import { Icon } from "@iconify/vue"
import { problem } from "oj/composables/problem"
import { storeToRefs } from "pinia"
import { useProblemStore } from "oj/store/problem"
import { DIFFICULTY } from "utils/constants"
import { createComment, getComment, getCommentStatistics } from "oj/api"
import { useUserStore } from "shared/store/user"
@@ -121,6 +122,8 @@ const props = withDefaults(defineProps<Props>(), {
})
const userStore = useUserStore()
const problemStore = useProblemStore()
const { problem } = storeToRefs(problemStore)
const message = useMessage()

11
src/oj/problem/components/ProblemContent.vue
View File

@@ -1,8 +1,9 @@
<script setup lang="ts">
import { Icon } from "@iconify/vue"
import { useThemeVars } from "naive-ui"
import { code } from "oj/composables/code"
import { problem } from "oj/composables/problem"
import { storeToRefs } from "pinia"
import { useCodeStore } from "oj/store/code"
import { useProblemStore } from "oj/store/problem"
import { createTestSubmission } from "utils/judge"
import { Problem, ProblemStatus } from "utils/types"
import Copy from "shared/components/Copy.vue"
@@ -17,6 +18,10 @@ type Sample = Problem["samples"][number] & {
const theme = useThemeVars()
const style = computed(() => "color: " + theme.value.primaryColor)
const codeStore = useCodeStore()
const problemStore = useProblemStore()
const { problem } = storeToRefs(problemStore)
// 判断用户是否尝试过但未通过
// my_status === 0: 已通过
// my_status !== 0 && my_status !== null: 尝试过但未通过
@@ -46,7 +51,7 @@ async function test(sample: Sample, index: number) {
}
return sample
})
const res = await createTestSubmission(code, sample.input)
const res = await createTestSubmission(codeStore.code, sample.input)
samples.value = samples.value.map((sample) => {
if (sample.id === index) {
const status =

32
src/oj/problem/components/ProblemEditor.vue
View File

@@ -1,10 +1,11 @@
<script lang="ts" setup>
import { code } from "oj/composables/code"
import { problem } from "oj/composables/problem"
import { storeToRefs } from "pinia"
import { useCodeStore } from "oj/store/code"
import { useProblemStore } from "oj/store/problem"
import { provideSyncStatus } from "oj/composables/syncStatus"
import { SOURCES } from "utils/constants"
import SyncCodeEditor from "shared/components/SyncCodeEditor.vue"
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
import storage from "utils/storage"
import { LANGUAGE } from "utils/types"
import Form from "./Form.vue"
@@ -12,6 +13,12 @@ import Form from "./Form.vue"
const route = useRoute()
const formRef = useTemplateRef<InstanceType<typeof Form>>("formRef")
const codeStore = useCodeStore()
const problemStore = useProblemStore()
const { problem } = storeToRefs(problemStore)
const { isDesktop } = useBreakpoints()
const sync = ref(false)
// 提供同步状态给子组件使用
const syncStatus = provideSyncStatus()
@@ -19,7 +26,7 @@ const syncStatus = provideSyncStatus()
const contestID = route.params.contestID || null
const storageKey = computed(
() =>
`problem_${problem.value!._id}_contest_${contestID}_lang_${code.language}`,
`problem_${problem.value!._id}_contest_${contestID}_lang_${codeStore.code.language}`,
)
const editorHeight = computed(() =>
@@ -28,10 +35,11 @@ const editorHeight = computed(() =>
onMounted(() => {
const savedCode = storage.get(storageKey.value)
code.value =
codeStore.setCode(
savedCode ||
problem.value!.template[code.language] ||
SOURCES[code.language]
problem.value!.template[codeStore.code.language] ||
SOURCES[codeStore.code.language],
)
})
const changeCode = (v: string) => {
@@ -40,10 +48,12 @@ const changeCode = (v: string) => {
const changeLanguage = (v: LANGUAGE) => {
const savedCode = storage.get(storageKey.value)
code.value =
codeStore.setCode(
savedCode && storageKey.value.split("_").pop() === v
? savedCode
: problem.value!.template[code.language] || SOURCES[code.language]
: problem.value!.template[codeStore.code.language] ||
SOURCES[codeStore.code.language],
)
}
const toggleSync = (value: boolean) => {
@@ -76,10 +86,10 @@ const handleSyncStatusChange = (status: {
@toggle-sync="toggleSync"
/>
<SyncCodeEditor
v-model:value="code.value"
v-model:value="codeStore.code.value"
:sync="sync"
:problem="problem!._id"
:language="code.language"
:language="codeStore.code.language"
:height="editorHeight"
@update:model-value="changeCode"
@sync-closed="handleSyncClosed"

32
src/oj/problem/components/ProblemInfo.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { Icon } from "@iconify/vue"
import { problem } from "oj/composables/problem"
import { storeToRefs } from "pinia"
import { useProblemStore } from "oj/store/problem"
import { DIFFICULTY, JUDGE_STATUS } from "utils/constants"
import { getACRateNumber, getTagColor, parseTime } from "utils/functions"
import { Pie } from "vue-chartjs"
@@ -13,11 +14,16 @@ import {
Colors,
} from "chart.js"
import { getProblemBeatRate } from "oj/api"
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
// 仅注册饼图所需的 Chart.js 组件
ChartJS.register(ArcElement, Title, Tooltip, Legend, Colors)
const problemStore = useProblemStore()
const { problem } = storeToRefs(problemStore)
const { isDesktop } = useBreakpoints()
const beatRate = ref("0")
const data = computed(() => {
@@ -119,18 +125,16 @@ onMounted(getBeatRate)
<n-grid :cols="isDesktop ? 4 : 2" :x-gap="10" :y-gap="10" class="cards">
<n-gi v-for="item in numbers" :key="item.content">
<n-card hoverable>
<n-flex align="center">
<n-flex vertical align="center">
<Icon v-if="isDesktop" :icon="item.icon" width="40" />
<div>
<n-h2 class="number">
<n-number-animation
:to="item.title"
:precision="item.int ? 0 : 2"
/>
<span v-if="item.suffix">{{ item.suffix }}</span>
</n-h2>
<n-h4 class="number-label">{{ item.content }}</n-h4>
</div>
<n-h2 class="number">
<n-number-animation
:to="item.title"
:precision="item.int ? 0 : 2"
/>
<span v-if="item.suffix">{{ item.suffix }}</span>
</n-h2>
<n-h4 class="number-label">{{ item.content }}</n-h4>
</n-flex>
</n-card>
</n-gi>
@@ -145,7 +149,7 @@ onMounted(getBeatRate)
}
.number {
margin-bottom: 0;
margin: 0;
font-weight: bold;
}

55
src/oj/problem/components/ProblemSubmission.vue
View File

@@ -8,10 +8,25 @@ import { LANGUAGE_SHOW_VALUE } from "utils/constants"
import { parseTime } from "utils/functions"
import { renderTableTitle } from "utils/renders"
import { Submission } from "utils/types"
import SubmissionDetail from "oj/submission/detail.vue"
import { useBreakpoints } from "shared/composables/breakpoints"
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const { isDesktop } = useBreakpoints()
// 弹框状态管理
const [codePanelVisible, toggleCodePanel] = useToggle(false)
const submissionID = ref("")
const problemID = ref("")
// 显示代码弹框
function showCodePanel(id: string, problem: string) {
submissionID.value = id
problemID.value = problem
toggleCodePanel(true)
}
const columns: DataTableColumn<Submission>[] = [
{
@@ -25,22 +40,17 @@ const columns: DataTableColumn<Submission>[] = [
key: "id",
minWidth: 160,
render: (row) => {
if (row.show_link) {
return h(
NButton,
{
text: true,
type: "info",
onClick: () => {
const data = router.resolve("/submission/" + row.id)
window.open(data.href, "_blank")
},
return h(
NButton,
{
text: true,
type: "info",
onClick: () => {
showCodePanel(row.id, <string>route.params.problemID ?? "")
},
() => row.id.slice(0, 12),
)
} else {
return row.id.slice(0, 12)
}
},
() => row.id.slice(0, 12),
)
},
},
{
@@ -258,6 +268,21 @@ watch(query, listSubmissions)
v-model:page="query.page"
/>
</template>
<!-- 代码详情弹框 -->
<n-modal
v-model:show="codePanelVisible"
preset="card"
:style="{ maxWidth: isDesktop && '70vw', maxHeight: '80vh' }"
:content-style="{ overflow: 'auto' }"
title="代码详情"
>
<SubmissionDetail
:problemID="problemID"
:submissionID="submissionID"
hideList
/>
</n-modal>
</template>
<style scoped>

199
src/oj/problem/components/SubmissionResult.vue
View File

@@ -1,100 +1,99 @@
<script setup lang="ts">
import { JUDGE_STATUS, SubmissionStatus } from "utils/constants"
import { submissionMemoryFormat, submissionTimeFormat } from "utils/functions"
import type { Submission } from "utils/types"
import SubmissionResultTag from "shared/components/SubmissionResultTag.vue"
const props = defineProps<{
submission?: Submission
}>()
// 错误信息格式化
const msg = computed(() => {
if (!props.submission) return ""
let msg = ""
const result = props.submission.result
// 编译错误或运行时错误时给出提示
if (
result === SubmissionStatus.compile_error ||
result === SubmissionStatus.runtime_error
) {
msg += "请仔细检查，看看代码的格式是不是写错了！\n\n"
}
if (props.submission.statistic_info?.err_info) {
msg += props.submission.statistic_info.err_info
}
return msg
})
// 测试用例表格数据（只在部分通过时显示）
const infoTable = computed(() => {
if (!props.submission?.info?.data?.length) return []
const result = props.submission.result
// AC、编译错误、运行时错误不显示测试用例表格
if (
result === SubmissionStatus.accepted ||
result === SubmissionStatus.compile_error ||
result === SubmissionStatus.runtime_error
) {
return []
}
const data = props.submission.info.data
// 只有存在失败的测试用例时才显示
return data.some((item) => item.result === 0) ? data : []
})
// 测试用例表格列配置
const columns: DataTableColumn<Submission["info"]["data"][number]>[] = [
{ title: "测试用例", key: "test_case" },
{
title: "测试状态",
key: "result",
render: (row) => h(SubmissionResultTag, { result: row.result }),
},
{
title: "占用内存",
key: "memory",
render: (row) => submissionMemoryFormat(row.memory),
},
{
title: "执行耗时",
key: "real_time",
render: (row) => submissionTimeFormat(row.real_time),
},
{ title: "信号", key: "signal" },
]
</script>
<template>
<div v-if="submission">
<n-alert
:type="JUDGE_STATUS[submission.result]['type']"
:title="JUDGE_STATUS[submission.result]['name']"
class="mb-3"
/>
<n-flex vertical v-if="msg || infoTable.length">
<n-card v-if="msg" embedded class="msg">{{ msg }}</n-card>
<n-data-table
v-if="infoTable.length"
striped
:data="infoTable"
:columns="columns"
/>
</n-flex>
</div>
</template>
<style scoped>
.msg {
white-space: pre;
word-break: break-all;
line-height: 1.5;
}
</style>
<script setup lang="ts">
import { JUDGE_STATUS, SubmissionStatus } from "utils/constants"
import { submissionMemoryFormat, submissionTimeFormat } from "utils/functions"
import type { Submission } from "utils/types"
import SubmissionResultTag from "shared/components/SubmissionResultTag.vue"
const props = defineProps<{
submission?: Submission
}>()
// 错误信息格式化
const msg = computed(() => {
if (!props.submission) return ""
let msg = ""
const result = props.submission.result
// 编译错误或运行时错误时给出提示
if (
result === SubmissionStatus.compile_error ||
result === SubmissionStatus.runtime_error
) {
msg += "请仔细检查，看看代码的格式是不是写错了！\n\n"
}
if (props.submission.statistic_info?.err_info) {
msg += props.submission.statistic_info.err_info
}
return msg
})
// 测试用例表格数据（只在部分通过时显示）
const infoTable = computed(() => {
if (!props.submission?.info?.data?.length) return []
const result = props.submission.result
// AC、编译错误、运行时错误不显示测试用例表格
if (
result === SubmissionStatus.accepted ||
result === SubmissionStatus.compile_error ||
result === SubmissionStatus.runtime_error
) {
return []
}
const data = props.submission.info.data
// 只有存在失败的测试用例时才显示
return data.some((item) => item.result === 0) ? data : []
})
// 测试用例表格列配置
const columns: DataTableColumn<Submission["info"]["data"][number]>[] = [
{ title: "测试用例", key: "test_case" },
{
title: "测试状态",
key: "result",
render: (row) => h(SubmissionResultTag, { result: row.result }),
},
{
title: "占用内存",
key: "memory",
render: (row) => submissionMemoryFormat(row.memory),
},
{
title: "执行耗时",
key: "real_time",
render: (row) => submissionTimeFormat(row.real_time),
},
{ title: "信号", key: "signal" },
]
</script>
<template>
<div v-if="submission">
<n-alert
:type="JUDGE_STATUS[submission.result]['type']"
:title="JUDGE_STATUS[submission.result]['name']"
class="mb-3"
/>
<n-flex vertical v-if="msg || infoTable.length">
<n-card v-if="msg" embedded class="msg">{{ msg }}</n-card>
<n-data-table
v-if="infoTable.length"
striped
:data="infoTable"
:columns="columns"
/>
</n-flex>
</div>
</template>
<style scoped>
.msg {
white-space: pre;
word-break: break-all;
line-height: 1.5;
}
</style>

18
src/oj/problem/components/Submit.vue
View File

@@ -1,14 +1,15 @@
<script setup lang="ts">
import { Icon } from "@iconify/vue"
import { storeToRefs } from "pinia"
import { getComment, submitCode } from "oj/api"
import { code } from "oj/composables/code"
import { problem } from "oj/composables/problem"
import { useCodeStore } from "oj/store/code"
import { useProblemStore } from "oj/store/problem"
import { useFireworks } from "oj/problem/composables/useFireworks"
import { useSubmissionMonitor } from "oj/problem/composables/useSubmissionMonitor"
import { SubmissionStatus } from "utils/constants"
import type { SubmitCodePayload } from "utils/types"
import SubmissionResult from "./SubmissionResult.vue"
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
import { useUserStore } from "shared/store/user"
// ==================== 异步组件 ====================
@@ -18,10 +19,15 @@ const ProblemComment = defineAsyncComponent(
// ==================== 基础状态 ====================
const userStore = useUserStore()
const codeStore = useCodeStore()
const problemStore = useProblemStore()
const { problem } = storeToRefs(problemStore)
const route = useRoute()
const contestID = <string>route.params.contestID ?? ""
const [commentPanel] = useToggle()
const { isDesktop } = useBreakpoints()
// ==================== 烟花效果 ====================
const { celebrate } = useFireworks()
@@ -58,7 +64,7 @@ const { start: showCommentPanelDelayed } = useTimeoutFn(
const submitDisabled = computed(() => {
return (
!userStore.isAuthed ||
code.value.trim() === "" ||
codeStore.code.value.trim() === "" ||
isProcessing.value ||
isCooldown.value
)
@@ -87,8 +93,8 @@ async function submit() {
// 1. 构建提交数据
const data: SubmitCodePayload = {
problem_id: problem.value!.id,
language: code.language,
code: code.value,
language: codeStore.code.language,
code: codeStore.code.value,
}
if (contestID) {
data.contest_id = parseInt(contestID)

439
src/oj/problem/composables/useFireworks.ts
View File

@@ -1,211 +1,228 @@
import confetti from "canvas-confetti"
/**
* 随机烟花效果 Composable
* 提供7种不同风格的烟花庆祝效果
*/
export function useFireworks() {
/**
* 触发随机烟花效果
*/
function celebrate() {
const fireworkTypes = [
// 效果1: 经典烟花秀
() => {
const duration = 3000
const animationEnd = Date.now() + duration
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 }
const interval: any = setInterval(() => {
const timeLeft = animationEnd - Date.now()
if (timeLeft <= 0) return clearInterval(interval)
const particleCount = 50 * (timeLeft / duration)
confetti({
...defaults,
particleCount,
origin: { x: Math.random() * 0.3 + 0.1, y: Math.random() - 0.2 },
colors: ["#ff6b6b", "#ffd93d", "#6bcf7f", "#4ecdc4", "#a29bfe"],
})
confetti({
...defaults,
particleCount,
origin: { x: Math.random() * 0.3 + 0.7, y: Math.random() - 0.2 },
colors: ["#ff6b6b", "#ffd93d", "#6bcf7f", "#4ecdc4", "#a29bfe"],
})
}, 250)
},
// 效果2: 星星雨
() => {
const count = 10
const defaults = {
origin: { y: 0.7 },
shapes: ["star"],
colors: ["#FFD700", "#FFA500", "#FFFF00", "#FF69B4", "#00CED1"],
}
function fire(particleRatio: number, opts: any) {
confetti({ ...defaults, ...opts, particleCount: Math.floor(200 * particleRatio) })
}
fire(0.25, { spread: 26, startVelocity: 55 })
fire(0.2, { spread: 60 })
fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 })
fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 })
fire(0.1, { spread: 120, startVelocity: 45 })
},
// 效果3: 爆炸波浪
() => {
function randomInRange(min: number, max: number) {
return Math.random() * (max - min) + min
}
for (let i = 0; i < 5; i++) {
setTimeout(() => {
confetti({
angle: randomInRange(55, 125),
spread: randomInRange(50, 70),
particleCount: randomInRange(50, 100),
origin: { y: 0.6 },
colors: ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42"],
})
}, i * 200)
}
},
// 效果4: 彩虹喷泉
() => {
const end = Date.now() + 2000
const colors = ["#bb0000", "#ffffff"]
const frame = () => {
confetti({
particleCount: 2,
angle: 60,
spread: 55,
origin: { x: 0 },
colors: colors,
})
confetti({
particleCount: 2,
angle: 120,
spread: 55,
origin: { x: 1 },
colors: colors,
})
if (Date.now() < end) {
requestAnimationFrame(frame)
}
}
frame()
},
// 效果5: 烟花雨
() => {
const duration = 2500
const animationEnd = Date.now() + duration
const interval: any = setInterval(() => {
const timeLeft = animationEnd - Date.now()
if (timeLeft <= 0) return clearInterval(interval)
const particleCount = 50
confetti({
particleCount,
startVelocity: 30,
spread: 360,
ticks: 60,
origin: {
x: Math.random(),
y: Math.random() - 0.2,
},
colors: ["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff", "#00ffff"],
})
}, 200)
},
// 效果6: 炮竹齐鸣
() => {
const count = 200
const defaults = {
origin: { y: 0.7 },
}
function fire(particleRatio: number, opts: any) {
confetti({
...defaults,
...opts,
particleCount: Math.floor(count * particleRatio),
})
}
fire(0.25, {
spread: 26,
startVelocity: 55,
})
fire(0.2, {
spread: 60,
})
fire(0.35, {
spread: 100,
decay: 0.91,
scalar: 0.8,
})
fire(0.1, {
spread: 120,
startVelocity: 25,
decay: 0.92,
scalar: 1.2,
})
fire(0.1, {
spread: 120,
startVelocity: 45,
})
},
// 效果7: 螺旋上升
() => {
const defaults = {
spread: 360,
ticks: 100,
gravity: 0,
decay: 0.94,
startVelocity: 30,
}
function shoot() {
confetti({
...defaults,
particleCount: 50,
scalar: 1.2,
shapes: ["circle", "square"],
colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"],
})
}
setTimeout(shoot, 0)
setTimeout(shoot, 100)
setTimeout(shoot, 200)
setTimeout(shoot, 300)
setTimeout(shoot, 400)
},
]
// 随机选择一种效果
const randomEffect = fireworkTypes[Math.floor(Math.random() * fireworkTypes.length)]
randomEffect()
}
return {
celebrate,
}
}
import confetti from "canvas-confetti"
/**
* 随机烟花效果 Composable
* 提供7种不同风格的烟花庆祝效果
*/
export function useFireworks() {
/**
* 触发随机烟花效果
*/
function celebrate() {
const fireworkTypes = [
// 效果1: 经典烟花秀
() => {
const duration = 3000
const animationEnd = Date.now() + duration
const defaults = {
startVelocity: 30,
spread: 360,
ticks: 60,
zIndex: 0,
}
const interval: any = setInterval(() => {
const timeLeft = animationEnd - Date.now()
if (timeLeft <= 0) return clearInterval(interval)
const particleCount = 50 * (timeLeft / duration)
confetti({
...defaults,
particleCount,
origin: { x: Math.random() * 0.3 + 0.1, y: Math.random() - 0.2 },
colors: ["#ff6b6b", "#ffd93d", "#6bcf7f", "#4ecdc4", "#a29bfe"],
})
confetti({
...defaults,
particleCount,
origin: { x: Math.random() * 0.3 + 0.7, y: Math.random() - 0.2 },
colors: ["#ff6b6b", "#ffd93d", "#6bcf7f", "#4ecdc4", "#a29bfe"],
})
}, 250)
},
// 效果2: 星星雨
() => {
const count = 10
const defaults = {
origin: { y: 0.7 },
shapes: ["star"],
colors: ["#FFD700", "#FFA500", "#FFFF00", "#FF69B4", "#00CED1"],
}
function fire(particleRatio: number, opts: any) {
confetti({
...defaults,
...opts,
particleCount: Math.floor(200 * particleRatio),
})
}
fire(0.25, { spread: 26, startVelocity: 55 })
fire(0.2, { spread: 60 })
fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 })
fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 })
fire(0.1, { spread: 120, startVelocity: 45 })
},
// 效果3: 爆炸波浪
() => {
function randomInRange(min: number, max: number) {
return Math.random() * (max - min) + min
}
for (let i = 0; i < 5; i++) {
setTimeout(() => {
confetti({
angle: randomInRange(55, 125),
spread: randomInRange(50, 70),
particleCount: randomInRange(50, 100),
origin: { y: 0.6 },
colors: ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42"],
})
}, i * 200)
}
},
// 效果4: 彩虹喷泉
() => {
const end = Date.now() + 2000
const colors = ["#bb0000", "#ffffff"]
const frame = () => {
confetti({
particleCount: 2,
angle: 60,
spread: 55,
origin: { x: 0 },
colors: colors,
})
confetti({
particleCount: 2,
angle: 120,
spread: 55,
origin: { x: 1 },
colors: colors,
})
if (Date.now() < end) {
requestAnimationFrame(frame)
}
}
frame()
},
// 效果5: 烟花雨
() => {
const duration = 2500
const animationEnd = Date.now() + duration
const interval: any = setInterval(() => {
const timeLeft = animationEnd - Date.now()
if (timeLeft <= 0) return clearInterval(interval)
const particleCount = 50
confetti({
particleCount,
startVelocity: 30,
spread: 360,
ticks: 60,
origin: {
x: Math.random(),
y: Math.random() - 0.2,
},
colors: [
"#ff0000",
"#00ff00",
"#0000ff",
"#ffff00",
"#ff00ff",
"#00ffff",
],
})
}, 200)
},
// 效果6: 炮竹齐鸣
() => {
const count = 200
const defaults = {
origin: { y: 0.7 },
}
function fire(particleRatio: number, opts: any) {
confetti({
...defaults,
...opts,
particleCount: Math.floor(count * particleRatio),
})
}
fire(0.25, {
spread: 26,
startVelocity: 55,
})
fire(0.2, {
spread: 60,
})
fire(0.35, {
spread: 100,
decay: 0.91,
scalar: 0.8,
})
fire(0.1, {
spread: 120,
startVelocity: 25,
decay: 0.92,
scalar: 1.2,
})
fire(0.1, {
spread: 120,
startVelocity: 45,
})
},
// 效果7: 螺旋上升
() => {
const defaults = {
spread: 360,
ticks: 100,
gravity: 0,
decay: 0.94,
startVelocity: 30,
}
function shoot() {
confetti({
...defaults,
particleCount: 50,
scalar: 1.2,
shapes: ["circle", "square"],
colors: ["#a864fd", "#29cdff", "#78ff44", "#ff718d", "#fdff6a"],
})
}
setTimeout(shoot, 0)
setTimeout(shoot, 100)
setTimeout(shoot, 200)
setTimeout(shoot, 300)
setTimeout(shoot, 400)
},
]
// 随机选择一种效果
const randomEffect =
fireworkTypes[Math.floor(Math.random() * fireworkTypes.length)]
randomEffect()
}
return {
celebrate,
}
}

344
src/oj/problem/composables/useSubmissionMonitor.ts
View File

@@ -1,172 +1,172 @@
import { ref } from "vue"
import { getSubmission } from "oj/api"
import { SubmissionStatus } from "utils/constants"
import type { Submission } from "utils/types"
import {
useSubmissionWebSocket,
type SubmissionUpdate,
} from "shared/composables/websocket"
/**
* 判题监控 Composable
* 负责通过 WebSocket + 轮询双保险机制监控判题结果
*/
export function useSubmissionMonitor() {
// ==================== 状态 ====================
const submissionId = ref("")
const submission = ref<Submission>()
// ==================== 轮询机制 ====================
const { pause: pausePolling, resume: resumePolling } = useIntervalFn(
async () => {
if (!submissionId.value) return
try {
const res = await getSubmission(submissionId.value)
submission.value = res.data
const result = res.data.result
// 判题完成，停止轮询
if (
result !== SubmissionStatus.judging &&
result !== SubmissionStatus.pending
) {
pausePolling()
}
} catch (error) {
console.error("[SubmissionMonitor] 轮询失败:", error)
pausePolling()
}
},
2000,
{ immediate: false }
)
// ==================== WebSocket 处理 ====================
const handleSubmissionUpdate = (data: SubmissionUpdate) => {
console.log("[SubmissionMonitor] 收到WebSocket更新:", data)
if (data.submission_id !== submissionId.value) {
console.log("[SubmissionMonitor] 提交ID不匹配，忽略")
return
}
if (!submission.value) {
submission.value = {} as Submission
}
submission.value.result = data.result as Submission["result"]
// 判题完成或出错，获取完整详情
if (data.status === "finished" || data.status === "error") {
console.log(
`[SubmissionMonitor] 判题${data.status === "finished" ? "完成" : "出错"}`
)
// 停止轮询（WebSocket已成功）
pausePolling()
getSubmission(submissionId.value).then((res) => {
submission.value = res.data
// 15分钟无新提交则断开WebSocket（节省资源）
scheduleDisconnect(15 * 60 * 1000)
})
}
}
// 初始化 WebSocket
const {
connect,
subscribe,
scheduleDisconnect,
cancelScheduledDisconnect,
status: wsStatus,
} = useSubmissionWebSocket(handleSubmissionUpdate)
// ==================== 轮询保底启动 ====================
const { start: startPollingFallback } = useTimeoutFn(
() => {
if (
submission.value &&
(submission.value.result === SubmissionStatus.judging ||
submission.value.result === SubmissionStatus.pending ||
submission.value.result === 9) // 9 = submitting
) {
console.log("[SubmissionMonitor] WebSocket未及时响应，启动轮询保底")
resumePolling()
}
},
5000,
{ immediate: false }
)
// ==================== 启动监控 ====================
const startMonitoring = (id: string) => {
submissionId.value = id
submission.value = { result: 9 } as Submission // 9 = submitting
// 取消之前的断开计划
cancelScheduledDisconnect()
// 如果WebSocket未连接，先连接
if (wsStatus.value !== "connected") {
console.log("[SubmissionMonitor] 启动WebSocket连接...")
connect()
}
// 等待WebSocket连接并订阅
const unwatch = watch(
wsStatus,
(status) => {
if (status === "connected") {
console.log("[SubmissionMonitor] WebSocket已连接，订阅提交:", id)
subscribe(id)
unwatch() // 订阅成功后停止监听
}
},
{ immediate: true }
)
// 5秒后启动轮询保底（防止WebSocket失败）
startPollingFallback()
}
// ==================== 计算属性 ====================
const judging = computed(
() => submission.value?.result === SubmissionStatus.judging
)
const pending = computed(
() => submission.value?.result === SubmissionStatus.pending
)
const submitting = computed(
() => submission.value?.result === SubmissionStatus.submitting
)
const isProcessing = computed(() => {
return judging.value || pending.value || submitting.value
})
// ==================== 清理 ====================
onUnmounted(() => {
pausePolling()
})
return {
// 状态
submissionId,
submission,
// 计算属性
judging,
pending,
submitting,
isProcessing,
// 方法
startMonitoring,
pausePolling,
}
}
import { ref, computed, watch, onUnmounted } from "vue"
import { useIntervalFn, useTimeoutFn } from "@vueuse/core"
import { getSubmission } from "oj/api"
import { SubmissionStatus } from "utils/constants"
import type { Submission } from "utils/types"
import {
useSubmissionWebSocket,
type SubmissionUpdate,
} from "shared/composables/websocket"
/**
* 判题监控 Composable
* 负责通过 WebSocket + 轮询双保险机制监控判题结果
*/
export function useSubmissionMonitor() {
// ==================== 状态 ====================
const submissionId = ref("")
const submission = ref<Submission>()
// ==================== 轮询机制 ====================
const { pause: pausePolling, resume: resumePolling } = useIntervalFn(
async () => {
if (!submissionId.value) return
try {
const res = await getSubmission(submissionId.value)
submission.value = res.data
const result = res.data.result
// 判题完成，停止轮询
if (
result !== SubmissionStatus.judging &&
result !== SubmissionStatus.pending
) {
pausePolling()
}
} catch (error) {
console.error("[SubmissionMonitor] 轮询失败:", error)
pausePolling()
}
},
2000,
{ immediate: false },
)
// ==================== WebSocket 处理 ====================
const handleSubmissionUpdate = (data: SubmissionUpdate) => {
console.log("[SubmissionMonitor] 收到WebSocket更新:", data)
if (data.submission_id !== submissionId.value) {
console.log("[SubmissionMonitor] 提交ID不匹配，忽略")
return
}
if (!submission.value) {
submission.value = {} as Submission
}
submission.value.result = data.result as Submission["result"]
// 判题完成或出错，获取完整详情
if (data.status === "finished" || data.status === "error") {
console.log(
`[SubmissionMonitor] 判题${data.status === "finished" ? "完成" : "出错"}`,
)
// 停止轮询（WebSocket已成功）
pausePolling()
getSubmission(submissionId.value).then((res) => {
submission.value = res.data
// 15分钟无新提交则断开WebSocket（节省资源）
scheduleDisconnect(15 * 60 * 1000)
})
}
}
// 初始化 WebSocket
const {
connect,
subscribe,
scheduleDisconnect,
cancelScheduledDisconnect,
status: wsStatus,
} = useSubmissionWebSocket(handleSubmissionUpdate)
// ==================== 轮询保底启动 ====================
const { start: startPollingFallback } = useTimeoutFn(
() => {
if (
submission.value &&
(submission.value.result === SubmissionStatus.judging ||
submission.value.result === SubmissionStatus.pending ||
submission.value.result === 9) // 9 = submitting
) {
console.log("[SubmissionMonitor] WebSocket未及时响应，启动轮询保底")
resumePolling()
}
},
5000,
{ immediate: false },
)
// ==================== 启动监控 ====================
const startMonitoring = (id: string) => {
submissionId.value = id
submission.value = { result: 9 } as Submission // 9 = submitting
// 取消之前的断开计划
cancelScheduledDisconnect()
// 如果WebSocket未连接，先连接
if (wsStatus.value !== "connected") {
console.log("[SubmissionMonitor] 启动WebSocket连接...")
connect()
}
// 等待WebSocket连接并订阅
const unwatch = watch(
wsStatus,
(status) => {
if (status === "connected") {
console.log("[SubmissionMonitor] WebSocket已连接，订阅提交:", id)
subscribe(id)
unwatch() // 订阅成功后停止监听
}
},
{ immediate: true },
)
// 5秒后启动轮询保底（防止WebSocket失败）
startPollingFallback()
}
// ==================== 计算属性 ====================
const judging = computed(
() => submission.value?.result === SubmissionStatus.judging,
)
const pending = computed(
() => submission.value?.result === SubmissionStatus.pending,
)
const submitting = computed(
() => submission.value?.result === SubmissionStatus.submitting,
)
const isProcessing = computed(() => {
return judging.value || pending.value || submitting.value
})
// ==================== 清理 ====================
onUnmounted(() => {
pausePolling()
})
return {
// 状态
submissionId,
submission,
// 计算属性
judging,
pending,
submitting,
isProcessing,
// 方法
startMonitoring,
pausePolling,
}
}

33
src/oj/problem/detail.vue
View File

@@ -1,13 +1,9 @@
<script setup lang="ts">
import { getProblem } from "oj/api"
import { ScreenMode } from "utils/constants"
import { isDesktop, isMobile } from "shared/composables/breakpoints"
import {
bothAndProblem,
resetScreenMode,
screenMode,
} from "shared/composables/switchScreen"
import { problem } from "../composables/problem"
import { useBreakpoints } from "shared/composables/breakpoints"
import { storeToRefs } from "pinia"
import { useProblemStore } from "oj/store/problem"
import { useScreenModeStore } from "shared/store/screenMode"
const ProblemEditor = defineAsyncComponent(
() => import("./components/ProblemEditor.vue"),
@@ -44,6 +40,13 @@ const errMsg = ref("无数据")
const route = useRoute()
const router = useRouter()
const problemStore = useProblemStore()
const screenModeStore = useScreenModeStore()
const { problem } = storeToRefs(problemStore)
const { shouldShowProblem } = storeToRefs(screenModeStore)
const { isMobile, isDesktop } = useBreakpoints()
const tabOptions = computed(() => {
const options: string[] = ["content"]
if (isMobile.value) {
@@ -81,7 +84,7 @@ watch(currentTab, (tab) => {
})
async function init() {
resetScreenMode()
screenModeStore.resetScreenMode()
try {
const res = await getProblem(props.problemID, props.contestID)
problem.value = res.data
@@ -96,11 +99,11 @@ onMounted(init)
onBeforeUnmount(() => {
problem.value = null
errMsg.value = "无数据"
resetScreenMode()
screenModeStore.resetScreenMode()
})
watch(isMobile, (value) => {
if (value) resetScreenMode()
if (value) screenModeStore.resetScreenMode()
})
</script>
@@ -108,9 +111,9 @@ watch(isMobile, (value) => {
<n-grid
v-if="problem"
x-gap="16"
:cols="screenMode === ScreenMode.both ? 2 : 1"
:cols="screenModeStore.isBothMode ? 2 : 1"
>
<n-gi :span="isDesktop ? 1 : 2" v-if="bothAndProblem">
<n-gi :span="isDesktop ? 1 : 2" v-if="shouldShowProblem">
<n-scrollbar v-if="isDesktop" style="max-height: calc(100vh - 92px)">
<n-tabs v-model:value="currentTab" type="segment">
<n-tab-pane name="content" tab="题目描述">
@@ -146,11 +149,11 @@ watch(isMobile, (value) => {
</n-tab-pane>
</n-tabs>
</n-gi>
<n-gi v-if="isDesktop && screenMode === ScreenMode.both">
<n-gi v-if="isDesktop && screenModeStore.isBothMode">
<ProblemEditor v-if="shouldUseProblemEditor" />
<ContestEditor v-else />
</n-gi>
<n-gi v-if="isDesktop && screenMode === ScreenMode.code">
<n-gi v-if="isDesktop && screenModeStore.isCodeOnlyMode">
<EditorForTest />
</n-gi>
</n-grid>

5
src/oj/problem/list.vue
View File

@@ -8,7 +8,7 @@ import { ProblemFiltered } from "utils/types"
import { getProblemTagList } from "shared/api"
import Hitokoto from "shared/components/Hitokoto.vue"
import Pagination from "shared/components/Pagination.vue"
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
import { usePagination } from "shared/composables/pagination"
import { useUserStore } from "shared/store/user"
import { renderTableTitle } from "utils/renders"
@@ -38,6 +38,9 @@ const difficultyOptions = [
const router = useRouter()
const userStore = useUserStore()
const { isDesktop } = useBreakpoints()
const problems = ref<ProblemFiltered[]>([])
const total = ref(0)
const tags = ref<Tag[]>([])

94
src/oj/store/code.ts Normal file
View File

@@ -0,0 +1,94 @@
import { defineStore } from "pinia"
import { STORAGE_KEY } from "utils/constants"
import storage from "utils/storage"
import { Code, LANGUAGE } from "utils/types"
/**
* 代码编辑器状态管理 Store
* 管理全局的代码、输入、输出状态
*/
export const useCodeStore = defineStore("code", () => {
// ==================== 状态 ====================
const code = reactive<Code>({
value: "",
language: storage.get(STORAGE_KEY.LANGUAGE) || "Python3",
})
const input = ref("")
const output = ref("")
// ==================== 计算属性 ====================
const isEmpty = computed(() => code.value.trim() === "")
// ==================== 操作 ====================
/**
* 设置代码内容
*/
function setCode(value: string) {
code.value = value
}
/**
* 设置编程语言
*/
function setLanguage(language: LANGUAGE) {
code.language = language
storage.set(STORAGE_KEY.LANGUAGE, language)
}
/**
* 设置输入
*/
function setInput(value: string) {
input.value = value
}
/**
* 设置输出
*/
function setOutput(value: string) {
output.value = value
}
/**
* 重置所有状态
*/
function reset() {
code.value = ""
input.value = ""
output.value = ""
}
/**
* 清空输出
*/
function clearOutput() {
output.value = ""
}
// 监听语言变化，保存到本地存储
watch(
() => code.language,
(newLanguage) => {
storage.set(STORAGE_KEY.LANGUAGE, newLanguage)
},
)
return {
// 状态
code,
input,
output,
// 计算属性
isEmpty,
// 操作
setCode,
setLanguage,
setInput,
setOutput,
reset,
clearOutput,
}
})

66
src/oj/store/problem.ts Normal file
View File

@@ -0,0 +1,66 @@
import { defineStore } from "pinia"
import { Problem } from "utils/types"
/**
* 题目状态管理 Store
* 管理当前题目的信息
*/
export const useProblemStore = defineStore("problem", () => {
// ==================== 状态 ====================
const problem = ref<Problem | null>(null)
// ==================== 计算属性 ====================
const hasProblem = computed(() => problem.value !== null)
const problemId = computed(() => problem.value?._id ?? null)
const problemTitle = computed(() => problem.value?.title ?? "")
const difficulty = computed(() => problem.value?.difficulty ?? "")
const languages = computed(() => problem.value?.languages ?? [])
const isACed = computed(() => problem.value?.my_status === 0)
// ==================== 操作 ====================
/**
* 设置当前题目
*/
function setProblem(newProblem: Problem | null) {
problem.value = newProblem
}
/**
* 清空当前题目
*/
function clearProblem() {
problem.value = null
}
/**
* 更新题目的部分字段
*/
function updateProblem(updates: Partial<Problem>) {
if (problem.value) {
problem.value = { ...problem.value, ...updates }
}
}
return {
// 状态
problem,
// 计算属性
hasProblem,
problemId,
problemTitle,
difficulty,
languages,
isACed,
// 操作
setProblem,
clearProblem,
updateProblem,
}
})

8
src/oj/submission/detail.vue
View File

@@ -14,7 +14,7 @@ import {
} from "utils/functions"
import { Submission } from "utils/types"
import SubmissionResultTag from "shared/components/SubmissionResultTag.vue"
import { isDesktop, isMobile } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
const props = defineProps<{
submissionID: string
@@ -26,6 +26,8 @@ const props = defineProps<{
const router = useRouter()
const message = useMessage()
const { isMobile, isDesktop } = useBreakpoints()
const submission = ref<Submission>()
async function init() {
@@ -69,7 +71,7 @@ function copyToCat() {
async function copyToProblem() {
const success = await copyToClipboard(submission.value!.code)
if (success) {
message.success("代码复制成功")
message.success("代码复制成功，需要手动粘贴到题目")
} else {
message.error("代码复制失败")
}
@@ -115,7 +117,7 @@ onMounted(init)
</n-alert>
<n-flex :vertical="isDesktop" justify="center">
<n-button secondary @click="copyToCat">复制到自测猫</n-button>
<n-button secondary @click="copyToProblem">回到题目</n-button>
<n-button secondary @click="copyToProblem">复制回到题目</n-button>
</n-flex>
</n-flex>
<n-card embedded>

4
src/oj/submission/list.vue
View File

@@ -6,7 +6,7 @@ import { parseTime } from "utils/functions"
import { LANGUAGE, SubmissionListItem } from "utils/types"
import Pagination from "shared/components/Pagination.vue"
import SubmissionResultTag from "shared/components/SubmissionResultTag.vue"
import { isDesktop, isMobile } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
import { usePagination } from "shared/composables/pagination"
import { useUserStore } from "shared/store/user"
import { LANGUAGE_SHOW_VALUE } from "utils/constants"
@@ -30,6 +30,8 @@ const router = useRouter()
const userStore = useUserStore()
const message = useMessage()
const { isMobile, isDesktop } = useBreakpoints()
const submissions = ref<SubmissionListItem[]>([])
const total = ref(0)
const todayCount = ref(0)

4
src/oj/user/index.vue
View File

@@ -2,7 +2,7 @@
import { Icon } from "@iconify/vue"
import { NH2, NH3 } from "naive-ui"
import { getProfile } from "shared/api"
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
import { durationToDays, parseTime } from "utils/functions"
import { Profile } from "utils/types"
import { getMetrics } from "../api"
@@ -18,6 +18,8 @@ const learnDuration = ref("")
const [loading, toggle] = useToggle()
const [show, toggleShow] = useToggle(false)
const { isDesktop } = useBreakpoints()
async function init() {
toggle(true)
try {

1
src/shared/components/CodeEditor.vue
View File

@@ -7,7 +7,6 @@ import type { Extension } from "@codemirror/state"
import { LANGUAGE } from "utils/types"
import { oneDark } from "../themes/oneDark"
import { smoothy } from "../themes/smoothy"
interface Props {
language?: LANGUAGE
fontSize?: number

29
src/shared/components/Header.vue
View File

@@ -1,20 +1,27 @@
<script setup lang="ts">
import { Icon } from "@iconify/vue"
import { RouterLink } from "vue-router"
import { isDesktop, isMobile } from "shared/composables/breakpoints"
import { toggleLogin, toggleSignup } from "shared/composables/modal"
import { screenMode, switchScreenMode } from "shared/composables/switchScreen"
import { useBreakpoints } from "shared/composables/breakpoints"
import { useAuthModalStore } from "shared/store/authModal"
import { useScreenModeStore } from "shared/store/screenMode"
import { logout } from "../api"
import { useConfigStore } from "../store/config"
import { useUserStore } from "../store/user"
const isDark = useDark()
const toggleDark = useToggle(isDark)
const userStore = useUserStore()
const configStore = useConfigStore()
const authStore = useAuthModalStore()
const screenModeStore = useScreenModeStore()
const route = useRoute()
const router = useRouter()
const { isMobile, isDesktop } = useBreakpoints()
const isDark = useDark()
// 从 store 中获取屏幕模式状态
const { screenMode } = storeToRefs(screenModeStore)
const names = [
"man-with-chinese-cap-1",
"cat-face",
@@ -213,7 +220,7 @@ function goHome() {
isDesktop &&
(route.name === 'problem' || route.name === 'contest problem')
"
@click="() => switchScreenMode()"
@click="() => screenModeStore.switchScreenMode()"
>
{{ screenMode }}
</n-button>
@@ -227,19 +234,23 @@ function goHome() {
</n-button>
</n-dropdown>
<n-flex align="center" v-else>
<n-button secondary type="primary" @click="toggleLogin(true)">
<n-button
secondary
type="primary"
@click="authStore.openLoginModal()"
>
登录
</n-button>
<n-button
tertiary
v-if="configStore.config?.allow_register"
@click="toggleSignup(true)"
@click="authStore.openSignupModal()"
>
注册
</n-button>
</n-flex>
</div>
<n-button :bordered="false" circle @click="toggleDark()">
<n-button :bordered="false" circle @click="isDark = !isDark">
<template #icon>
<Icon v-if="isDark" icon="twemoji:sun-behind-small-cloud"></Icon>
<Icon v-else icon="twemoji:cloud-with-lightning-and-rain"></Icon>

47
src/shared/components/Login.vue
View File

@@ -1,19 +1,21 @@
<script setup lang="ts">
import { login } from "../api"
import { loginModal, toggleLogin, toggleSignup } from "../composables/modal"
import { storeToRefs } from "pinia"
import { useAuthModalStore } from "../store/authModal"
import { useConfigStore } from "../store/config"
import { useUserStore } from "../store/user"
const userStore = useUserStore()
const configStore = useConfigStore()
const authStore = useAuthModalStore()
const {
loginModalOpen,
loginForm: form,
loginLoading: isLoading,
loginError: msg,
} = storeToRefs(authStore)
const loginRef = ref()
const [isLoading, toggleLoading] = useToggle()
const msg = ref("")
const form = reactive({
class: "",
username: "",
password: "",
})
const classList = computed<SelectOption[]>(() => {
const defaults = [{ label: "没有我所在的班级", value: "" }]
const configs =
@@ -35,29 +37,29 @@ async function submit() {
loginRef.value!.validate(async (errors: FormRules | undefined) => {
if (!errors) {
try {
msg.value = ""
toggleLoading(true)
authStore.clearLoginError()
authStore.setLoginLoading(true)
const merged = {
username: form.username,
password: form.password,
username: form.value.username,
password: form.value.password,
}
if (form.class) {
merged.username = form.class + form.username
if (form.value.class) {
merged.username = form.value.class + form.value.username
}
await login(merged)
} catch (err: any) {
if (err.data === "Your account has been disabled") {
msg.value = "此账号已被封禁"
authStore.setLoginError("此账号已被封禁")
} else if (err.data === "Invalid username or password") {
msg.value = "用户名或密码不正确"
authStore.setLoginError("用户名或密码不正确")
} else {
msg.value = "无法登录"
authStore.setLoginError("无法登录")
}
} finally {
toggleLoading(false)
authStore.setLoginLoading(false)
}
if (!msg.value) {
toggleLogin(false)
authStore.closeLoginModal()
userStore.getMyProfile()
}
}
@@ -65,19 +67,18 @@ async function submit() {
}
function goSignup() {
toggleLogin(false)
toggleSignup(true)
authStore.switchToSignup()
}
onMounted(() => {
msg.value = ""
authStore.clearLoginError()
})
</script>
<template>
<n-modal
:mask-closable="false"
v-model:show="loginModal"
v-model:show="loginModalOpen"
preset="card"
title="登录"
style="width: 400px"

1
src/shared/components/MarkdownEditor.vue
View File

@@ -10,7 +10,6 @@
import { MdEditor } from "md-editor-v3"
import "md-editor-v3/lib/style.css"
import { uploadImage } from "../../admin/api"
const isDark = useDark()
const modelValue = defineModel<string>("value")

4
src/shared/components/Pagination.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { isDesktop } from "shared/composables/breakpoints"
import { useBreakpoints } from "shared/composables/breakpoints"
interface Props {
total: number
@@ -16,6 +16,8 @@ const emit = defineEmits(["update:limit", "update:page"])
const route = useRoute()
const { isDesktop } = useBreakpoints()
const limit = ref(props.limit)
const page = ref(props.page)
const sizes = computed(() => {

64
src/shared/components/Signup.vue
View File

@@ -1,19 +1,18 @@
<script setup lang="ts">
import { getCaptcha, signup } from "../api"
import { signupModal, toggleLogin, toggleSignup } from "../composables/modal"
import { useUserStore } from "../store/user"
import { storeToRefs } from "pinia"
import { useAuthModalStore } from "../store/authModal"
const userStore = useUserStore()
const authStore = useAuthModalStore()
const {
signupModalOpen,
signupForm: form,
signupLoading: isLoading,
signupError: msg,
captchaSrc,
} = storeToRefs(authStore)
const signupRef = ref()
const captchaSrc = ref("")
const form = reactive({
username: "",
email: "",
password: "",
passwordAgain: "",
captcha: "",
})
const rules: FormRules = {
username: [{ required: true, message: "用户名必填", trigger: "blur" }],
@@ -26,7 +25,8 @@ const rules: FormRules = {
{ required: true, message: "密码必填", trigger: "blur" },
{ min: 6, max: 20, message: "长度在 6 到 20 位之间", trigger: "input" },
{
validator: (_: FormItemRule, value: string) => value === form.password,
validator: (_: FormItemRule, value: string) =>
value === form.value.password,
message: "两次密码输入不一致",
trigger: "blur",
},
@@ -36,43 +36,39 @@ const rules: FormRules = {
],
}
const [isLoading, toggleLoading] = useToggle()
const msg = ref("")
function goLogin() {
toggleLogin(true)
toggleSignup(false)
authStore.switchToLogin()
}
function submit() {
signupRef.value!.validate(async (errors: FormRules | undefined) => {
if (!errors) {
try {
msg.value = ""
toggleLoading(true)
authStore.clearSignupError()
authStore.setSignupLoading(true)
await signup({
username: form.username,
email: form.email,
password: form.password,
captcha: form.captcha,
username: form.value.username,
email: form.value.email,
password: form.value.password,
captcha: form.value.captcha,
})
} catch (err: any) {
if (err.data === "Invalid captcha") {
msg.value = "验证码不正确"
authStore.setSignupError("验证码不正确")
} else if (err.data === "Username already exists") {
msg.value = "用户名已存在"
authStore.setSignupError("用户名已存在")
} else if (err.data === "Email already exists") {
msg.value = "邮箱已存在"
authStore.setSignupError("邮箱已存在")
} else {
msg.value = "无法注册"
authStore.setSignupError("无法注册")
}
getCaptchaSrc()
form.captcha = ""
form.value.captcha = ""
} finally {
toggleLoading(false)
authStore.setSignupLoading(false)
}
if (!msg.value) {
toggleSignup(false)
authStore.closeSignupModal()
}
}
})
@@ -80,10 +76,10 @@ function submit() {
async function getCaptchaSrc() {
const res = await getCaptcha()
captchaSrc.value = res.data
authStore.setCaptchaSrc(res.data)
}
watch(signupModal, (v) => {
watch(signupModalOpen, (v) => {
if (v) getCaptchaSrc()
})
</script>
@@ -91,7 +87,7 @@ watch(signupModal, (v) => {
<template>
<n-modal
:mask-closable="false"
v-model:show="signupModal"
v-model:show="signupModalOpen"
preset="card"
title="注册"
style="width: 400px"

5
src/shared/components/SyncCodeEditor.vue
View File

@@ -8,7 +8,8 @@ import { LANGUAGE } from "utils/types"
import { oneDark } from "../themes/oneDark"
import { smoothy } from "../themes/smoothy"
import { useCodeSync, SYNC_ERROR_CODES } from "../composables/sync"
import { isDesktop } from "../composables/breakpoints"
import { useBreakpoints } from "../composables/breakpoints"
const isDark = useDark()
interface EditorReadyPayload {
view: EditorView
@@ -44,7 +45,7 @@ const emit = defineEmits<{
]
}>()
const isDark = useDark()
const { isDesktop } = useBreakpoints()
const styleTheme = EditorView.baseTheme({
"& .cm-scroller": { "font-family": "Monaco" },

22
src/shared/composables/breakpoints.ts
View File

@@ -1,6 +1,20 @@
import { breakpointsTailwind } from "@vueuse/core"
import {
breakpointsTailwind,
useBreakpoints as useVueUseBreakpoints,
} from "@vueuse/core"
const breakpoints = useBreakpoints(breakpointsTailwind)
/**
* 响应式断点检测 composable
* 每次调用创建新的断点检测实例
*/
export function useBreakpoints() {
const breakpoints = useVueUseBreakpoints(breakpointsTailwind)
export const isMobile = breakpoints.smallerOrEqual("md")
export const isDesktop = breakpoints.greater("md")
const isMobile = breakpoints.smallerOrEqual("md")
const isDesktop = breakpoints.greater("md")
return {
isMobile,
isDesktop,
}
}

2
src/shared/composables/modal.ts
View File

@@ -1,2 +0,0 @@
export const [loginModal, toggleLogin] = useToggle()
export const [signupModal, toggleSignup] = useToggle()

4
src/shared/composables/pagination.ts
View File

@@ -1,3 +1,5 @@
import { reactive, watch } from "vue"
import { useRoute, useRouter } from "vue-router"
import { filterEmptyValue } from "utils/functions"
export interface PaginationQuery {
@@ -17,6 +19,7 @@ export interface UsePaginationOptions {
/**
* 分页相关的 composable，处理分页状态和 URL 同步
* 每次调用创建新的分页状态实例
* @param initialQuery 初始查询参数对象
* @param options 配置选项
*/
@@ -139,6 +142,7 @@ export function usePagination<T extends Record<string, any>>(
/**
* 简化版本的分页 composable，只处理基本的分页逻辑
* 每次调用创建新的分页状态实例
* @param defaultLimit 默认每页条数
* @param defaultPage 默认页码
*/

18
src/shared/composables/switchScreen.ts
View File

@@ -1,18 +0,0 @@
import { ScreenMode } from "utils/constants"
export const { state: screenMode, next: switchScreenMode } = useCycleList(
Object.values(ScreenMode),
{
initialValue: ScreenMode.both,
},
)
export function resetScreenMode() {
screenMode.value = ScreenMode.both
}
export const bothAndProblem = computed(
() =>
screenMode.value === ScreenMode.both ||
screenMode.value === ScreenMode.problem,
)

6
src/shared/composables/sync.ts
View File

@@ -1,3 +1,4 @@
import { useMessage } from "naive-ui"
import { useUserStore } from "../store/user"
import type { EditorView } from "@codemirror/view"
import { Compartment } from "@codemirror/state"
@@ -81,10 +82,15 @@ export interface SyncStatus {
otherUser?: UserInfo
}
/**
* 代码同步 composable
* 每次调用创建新的同步实例
*/
export function useCodeSync() {
const userStore = useUserStore()
const message = useMessage()
// 每次调用创建新的实例变量
let ydoc: Doc | null = null
let provider: WebrtcProvider | null = null
let ytext: Text | null = null

19
src/shared/composables/websocket.ts
View File

@@ -324,37 +324,26 @@ class SubmissionWebSocket extends BaseWebSocket<SubmissionUpdate> {
}
}
// 全局单例
let wsInstance: SubmissionWebSocket | null = null
/**
* 获取 WebSocket 实例
*/
export function getWebSocketInstance(): SubmissionWebSocket {
if (!wsInstance) {
wsInstance = new SubmissionWebSocket()
}
return wsInstance
}
/**
* 用于组件中使用 WebSocket 的 Composable
* 每次调用创建新的 WebSocket 实例
*/
export function useSubmissionWebSocket(
handler?: MessageHandler<SubmissionUpdate>,
) {
const ws = getWebSocketInstance()
const ws = new SubmissionWebSocket()
// 如果提供了处理器，添加到实例中
if (handler) {
ws.addHandler(handler)
}
// 组件卸载时移除处理器
// 组件卸载时清理资源
onUnmounted(() => {
if (handler) {
ws.removeHandler(handler)
}
ws.disconnect()
})
return {

170
src/shared/store/authModal.ts Normal file
View File

@@ -0,0 +1,170 @@
import { defineStore } from "pinia"
/**
* 认证状态管理 Store
* 统一管理登录、注册相关的模态框状态和表单状态
*/
export const useAuthModalStore = defineStore("authModal", () => {
// ==================== 模态框状态 ====================
const loginModalOpen = ref(false)
const signupModalOpen = ref(false)
// ==================== 登录表单状态 ====================
const loginForm = reactive({
class: "",
username: "",
password: "",
})
const loginLoading = ref(false)
const loginError = ref("")
// ==================== 注册表单状态 ====================
const signupForm = reactive({
username: "",
email: "",
password: "",
passwordAgain: "",
captcha: "",
})
const signupLoading = ref(false)
const signupError = ref("")
// ==================== 验证码 ====================
const captchaSrc = ref("")
// ==================== 模态框操作 ====================
/**
* 打开登录模态框
*/
function openLoginModal() {
loginModalOpen.value = true
}
/**
* 关闭登录模态框
*/
function closeLoginModal() {
loginModalOpen.value = false
}
/**
* 打开注册模态框
*/
function openSignupModal() {
signupModalOpen.value = true
}
/**
* 关闭注册模态框
*/
function closeSignupModal() {
signupModalOpen.value = false
}
/**
* 从登录切换到注册
*/
function switchToSignup() {
closeLoginModal()
openSignupModal()
}
/**
* 从注册切换到登录
*/
function switchToLogin() {
closeSignupModal()
openLoginModal()
}
// ==================== 登录表单操作 ====================
/**
* 设置登录加载状态
*/
function setLoginLoading(loading: boolean) {
loginLoading.value = loading
}
/**
* 设置登录错误信息
*/
function setLoginError(error: string) {
loginError.value = error
}
/**
* 清空登录错误
*/
function clearLoginError() {
loginError.value = ""
}
// ==================== 注册表单操作 ====================
/**
* 设置注册加载状态
*/
function setSignupLoading(loading: boolean) {
signupLoading.value = loading
}
/**
* 设置注册错误信息
*/
function setSignupError(error: string) {
signupError.value = error
}
/**
* 清空注册错误
*/
function clearSignupError() {
signupError.value = ""
}
/**
* 设置验证码图片地址
*/
function setCaptchaSrc(src: string) {
captchaSrc.value = src
}
return {
// 模态框状态
loginModalOpen,
signupModalOpen,
// 登录表单状态
loginForm,
loginLoading,
loginError,
// 注册表单状态
signupForm,
signupLoading,
signupError,
// 验证码
captchaSrc,
// 模态框操作
openLoginModal,
closeLoginModal,
openSignupModal,
closeSignupModal,
switchToSignup,
switchToLogin,
// 登录表单操作
setLoginLoading,
setLoginError,
clearLoginError,
// 注册表单操作
setSignupLoading,
setSignupError,
clearSignupError,
setCaptchaSrc,
}
})

34
src/shared/store/screenMode.ts Normal file
View File

@@ -0,0 +1,34 @@
import { defineStore } from "pinia"
import { ScreenMode } from "utils/constants"
export const useScreenModeStore = defineStore("screenMode", () => {
const { state: screenMode, next: switchScreenMode } = useCycleList(
Object.values(ScreenMode),
{
initialValue: ScreenMode.both,
},
)
// 计算属性
const isBothMode = computed(() => screenMode.value === ScreenMode.both)
const isCodeOnlyMode = computed(() => screenMode.value === ScreenMode.code)
const shouldShowProblem = computed(
() =>
screenMode.value === ScreenMode.both ||
screenMode.value === ScreenMode.problem,
)
function resetScreenMode() {
screenMode.value = ScreenMode.both
}
return {
screenMode,
isBothMode,
isCodeOnlyMode,
shouldShowProblem,
switchScreenMode,
resetScreenMode,
}
})