优化问题列表组件，调整表格布局，添加检查错误装饰函数，更新样式以居中对齐

ui/src/components/study/ProblemList.vue

@@ -82,14 +82,34 @@
         </v-dialog>
       </v-toolbar>
     </template>
-    <template v-slot:item.actions="{ item }">
+    <template v-slot:item="{ item }">
+      <tr>
+        <td>{{ item.id }}</td>
+        <td>{{ item.problem }}</td>
+        <td>{{ item.answer }}</td>
+        <td>{{ decorateCheckingError(item.check_error) }}</td>
+        <td class="text-center">
           <v-icon class="me-2" size="small" @click="editItem(item)">
             mdi-pencil
           </v-icon>
           <v-icon size="small" @click="deleteItem(item)">
             mdi-delete
           </v-icon>
+        </td>
+      </tr>
     </template>
+    <!-- <template v-slot:item.actions="{ item }">
+      <tr>
+        <td class="text-center">
+          <v-icon class="me-2" size="small" @click="editItem(item)">
+            mdi-pencil
+          </v-icon>
+          <v-icon size="small" @click="deleteItem(item)">
+            mdi-delete
+          </v-icon>
+        </td>
+      </tr>
+    </template> -->
   </v-data-table>
   <v-dialog v-model="dialogShow" width="auto">
     <v-card max-width="400" prepend-icon="mdi-update" :text="dialogText" :title="dialogTitle">
@@ -175,6 +195,13 @@ const checkingErrorTitle = ref('');
 const checkingErrorIcon = ref('');
 const checkingError = ref('');
 
+const decorateCheckingError = (checkError: number) => {
+  if (checkError == 0) {
+    return '精确匹配';
+  }
+  return checkError;
+}
+
 watch(preciseMode, () => {
   if (preciseMode.value) {
     checkingError.value = '精确匹配';
@@ -403,3 +430,8 @@ const save = async (event: SubmitEvent) => {
 };
 
 </script>
+<style lang="scss" scoped>
+td {
+  text-align: center;
+}
+</style>