fix

src/oj/problem/components/Form.vue

@@ -48,7 +48,7 @@ const router = useRouter()
 const userStore = useUserStore()
 const codeStore = useCodeStore()
 const problemStore = useProblemStore()
-const { problem } = storeToRefs(problemStore)
+const { problem, languages } = storeToRefs(problemStore)
 
 const { isMobile, isDesktop } = useBreakpoints()
 
@@ -72,15 +72,7 @@ const menu = computed<DropdownOption[]>(() => [
   { label: "重置代码", key: "reset" },
 ])
 
-const flowchartAndLanguages = computed(
+const languageOptions: DropdownOption[] = languages.value.map(
-  () =>
-    [
-      ...(problem.value!.allow_flowchart ? ["Flowchart"] : []),
-      ...problem.value!.languages,
-    ] as LANGUAGE[],
-)
-
-const languageOptions: DropdownOption[] = flowchartAndLanguages.value.map(
   (it) => ({
     label: () =>
       h(NFlex, { align: "center" }, () => [
@@ -150,7 +142,7 @@ defineExpose({
 })
 
 onMounted(() => {
-  if (!problem.value!.languages.includes(codeStore.code.language)) {
+  if (!languages.value.includes(codeStore.code.language)) {
     codeStore.code.language = "Python3"
   }
 })

src/oj/problem/components/ProblemEditor.vue

@@ -10,6 +10,10 @@ import storage from "utils/storage"
 import { LANGUAGE } from "utils/types"
 import Form from "./Form.vue"
 
+const FlowchartEditor = defineAsyncComponent(
+  () => import("shared/components/FlowchartEditor/index.vue"),
+)
+
 const route = useRoute()
 const formRef = useTemplateRef<InstanceType<typeof Form>>("formRef")
 
@@ -85,7 +89,9 @@ const handleSyncStatusChange = (status: {
       @change-language="changeLanguage"
       @toggle-sync="toggleSync"
     />
+    <FlowchartEditor v-if="codeStore.code.language === 'Flowchart'" />
     <SyncCodeEditor
+      v-else
       v-model:value="codeStore.code.value"
       :sync="sync"
       :problem="problem!._id"

src/oj/store/problem.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia"
-import { Problem } from "utils/types"
+import { LANGUAGE, Problem } from "utils/types"
 
 /**
  * 题目状态管理 Store
@@ -10,17 +10,12 @@ export const useProblemStore = defineStore("problem", () => {
   const problem = ref<Problem | null>(null)
 
   // ==================== 计算属性 ====================
-  const hasProblem = computed(() => problem.value !== null)
+  const languages = computed<LANGUAGE[]>(() => {
-
+    if (problem.value?.allow_flowchart) {
-  const problemId = computed(() => problem.value?._id ?? null)
+      return ["Flowchart", ...problem.value?.languages]
-
+    }
-  const problemTitle = computed(() => problem.value?.title ?? "")
+    return problem.value?.languages ?? []
-
+  })
-  const difficulty = computed(() => problem.value?.difficulty ?? "")
-
-  const languages = computed(() => problem.value?.languages ?? [])
-
-  const isACed = computed(() => problem.value?.my_status === 0)
 
   // ==================== 操作 ====================
   /**
@@ -51,12 +46,7 @@ export const useProblemStore = defineStore("problem", () => {
     problem,
 
     // 计算属性
-    hasProblem,
-    problemId,
-    problemTitle,
-    difficulty,
     languages,
-    isACed,
 
     // 操作
     setProblem,

src/shared/components/FlowchartEditor/index.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div class="container">可拖拽的流程图编辑器</div>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: calc(100vh - 133px);
+  
+}
+</style>