feat: 题目新增/编辑对话框描述左右分栏实时渲染，标题和按钮居中

src/view/admin/ProblemManageView.vue

@@ -515,14 +515,23 @@ onMounted(() => {
     </el-card>
 
     <!-- 新增/编辑题目 -->
-    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="900px" draggable>
+    <el-dialog v-model="dialogVisible" width="960px" draggable>
+      <template #header>
+        <div class="dialog-header">{{ dialogTitle }}</div>
+      </template>
       <el-form ref="formRef" :model="problemForm" :rules="formRules" label-width="90px">
         <el-form-item label="标题" prop="title">
           <el-input v-model="problemForm.title" placeholder="请输入题目标题" />
         </el-form-item>
         <el-form-item label="描述" prop="description">
-          <div class="markdown-editor-wrapper">
-            <MdEditor :value="problemForm.description || ''" :plugins="mdPlugins" @change="(v: string) => (problemForm.description = v)" />
+          <div class="markdown-split">
+            <div class="markdown-editor-wrapper">
+              <MdEditor :value="problemForm.description || ''" :plugins="mdPlugins" @change="(v: string) => (problemForm.description = v)" />
+            </div>
+            <div class="markdown-preview markdown-body">
+              <div v-if="!problemForm.description" class="preview-empty">暂无内容，输入后实时预览</div>
+              <MdViewer v-else :value="problemForm.description || ''" :plugins="mdPlugins" />
+            </div>
           </div>
         </el-form-item>
         <el-form-item label="时间限制" prop="timeLimitMs">
@@ -548,8 +557,10 @@ onMounted(() => {
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleSave">确定</el-button>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSave">确定</el-button>
+        </div>
       </template>
     </el-dialog>
 
@@ -682,6 +693,42 @@ onMounted(() => {
   margin-top: 16px;
 }
 
+.dialog-header {
+  text-align: center;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+.markdown-split {
+  display: flex;
+  gap: 12px;
+  width: 100%;
+}
+
+.markdown-split .markdown-editor-wrapper,
+.markdown-split .markdown-preview {
+  flex: 1;
+  min-width: 0;
+}
+
+.markdown-preview {
+  height: 300px;
+  overflow: auto;
+  border: 1px solid var(--el-border-color);
+  border-radius: 4px;
+  padding: 12px;
+  background: var(--el-bg-color);
+}
+
+.preview-empty {
+  color: var(--el-text-color-placeholder);
+  font-size: 13px;
+}
+
 .markdown-editor-wrapper :deep(.bytemd) {
   height: 300px;
 }