fixed the visibility of dialog

src/App.vue

@@ -23,8 +23,7 @@
         </div>
       </el-main>
     </el-container>
-    <proof-step-dialog v-model:visible="isDialogVisible" @submit-answer="handleSubmitAnswer"
-      @next-answer="handleNextAnswer" />
+    <proof-step-dialog v-model:visible="isDialogVisible" @submit-answer="handleSubmitAnswer" @next-answer="handleNextAnswer" />
   </el-container>
 </template>
 
@@ -51,9 +50,9 @@ export default {
   },
   methods: {
     submitStatement() {
-      // 处理提交逻辑，渲染 proof tree
+      // Handle submission logic and render proof tree
 
-      // 接受parse的报错信息
+      // Catch parsing error messages
       try {
         const targetAst = parse(this.givenStatement);
         this.latexStatement = ast.astsToLateX(targetAst);
@@ -63,15 +62,15 @@ export default {
         this.errorMsg = 'Parsing error: ' + error.message;
         // Handle the error here, such as displaying an error message to the user
       }
-    },
-    renderProofTree() {
-      // 使用该函数生成HTML
+        },
+        renderProofTree() {
+      // Use this function to generate HTML
       const proofTreeHTML = generateProofTreeHTML(this.proofTree);
 
-      // 将生成的HTML插入到页面中
+      // Insert the generated HTML into the page
       document.getElementById('proof-tree').innerHTML = proofTreeHTML;
 
-      // 直接调用KaTeX渲染
+      // Call KaTeX directly to render
       renderMathInElement(document.getElementById('proof-tree'), {
         delimiters: [
           { left: "\\(", right: "\\)", display: false },
@@ -79,10 +78,12 @@ export default {
         ]
       });
 
+      // Replace the rendered turnstile character
       const mrelElements = document.querySelectorAll('.katex .mrel');
       mrelElements.forEach(element => {
         if (element.textContent === '⊢') {
           element.classList.add('turnstile');
+          element.addEventListener('click', this.openProofStepDialog);
         }
       });
 
@@ -140,6 +141,8 @@ export default {
 
 .turnstile {
   transition: background-color 0.3s;
+  cursor: pointer;
+    /* 添加手型鼠标指针 */
 }
 
 .turnstile:hover {

src/components/ProofStepDialog.vue

 <template>
-  <el-dialog title="Proof Step" :visible="localVisible" @update:visible="handleVisibleChange">
+  <el-dialog title="Proof Step" v-model="localVisible" @update:visible="handleVisibleChange">
     <el-form>
       <el-form-item label="Rule">
         <el-select v-model="selectedRule">