refactor(代码生成器): 优化模板文件格式和类型检查逻辑

style: 统一代码格式并移除多余空行
fix(前端): 修复富文本编辑器在详情页的显示问题
feat(前端): 为代码编辑器添加主题切换功能
docs: 更新README中的命令说明

frontend/src/components/WangEditor/index.vue

@@ -1,30 +1,18 @@
-<!--
- * 基于 wangEditor-next 的富文本编辑器组件二次封装
- * 版权所有 © 2021-present 有来开源组织
- *
- * 开源协议：https://opensource.org/licenses/MIT
- * 项目地址：https://gitee.com/youlaiorg/vue3-element-admin
- *
- * 在使用时，请保留此注释，感谢您对开源的支持！
- *
- * 修改：此版本返回纯文本格式，使用 editor.getText() 获取内容
--->
-
 <template>
   <div style="z-index: 999; border: 1px solid var(--el-border-color)">
     <!-- 工具栏 -->
     <Toolbar
       :editor="editorRef"
-      mode="simple"
+      mode="mode"
       :default-config="toolbarConfig"
       style="border-bottom: 1px solid var(--el-border-color)"
     />
     <!-- 编辑器 -->
     <Editor
       v-model="modelValue"
-      :style="{ height: height, overflowY: 'hidden' }"
+      :style="{ minHeight: height, overflowY: 'hidden' }"
       :default-config="editorConfig"
-      mode="simple"
+      mode="mode"
       @on-created="handleCreated"
       @on-change="handleChange"
     />
@@ -39,7 +27,7 @@ import { IToolbarConfig, IEditorConfig } from "@wangeditor-next/editor";
 // 上传图片回调函数类型
 type InsertFnType = (_url: string, _alt: string, _href: string) => void;
 
-// 模拟文件上传API，根据实际项目结构调整
+// 模拟文件上传API，根据实际项目进行调整
 interface UploadResult {
   url: string;
   name: string;
@@ -56,10 +44,22 @@ const FileAPI = {
   },
 };
 
-defineProps({
+const props = defineProps({
   height: {
     type: String,
-    default: "300px",
+    default: "200px",
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  autoFocus: {
+    type: Boolean,
+    default: true,
+  },
+  scroll: {
+    type: Boolean,
+    default: true,
   },
 });
 // 双向绑定
@@ -74,9 +74,12 @@ const editorRef = shallowRef();
 // 工具栏配置
 const toolbarConfig = ref<Partial<IToolbarConfig>>({});
 
-// 编辑器配置
+// 编辑器配置 - 根据 props 动态生成配置
 const editorConfig = ref<Partial<IEditorConfig>>({
   placeholder: "请输入内容...",
+  readOnly: props.readonly,
+  autoFocus: props.autoFocus,
+  scroll: props.scroll,
   MENU_CONF: {
     uploadImage: {
       customUpload(file: File, insertFn: InsertFnType) {

frontend/src/views/module_generator/backcode/index.vue

@@ -856,7 +856,8 @@ defineOptions({
 
 import "codemirror/mode/javascript/javascript.js";
 import "codemirror/mode/sql/sql.js";
-import { ref, reactive, computed, onActivated, onMounted } from "vue";
+import "codemirror/theme/dracula.css"
+import { ref, reactive, computed, onActivated, onMounted, watch } from "vue";
 import { useClipboard } from "@vueuse/core";
 import { useRoute } from "vue-router";
 import Codemirror from "codemirror-editor-vue3";
@@ -883,6 +884,8 @@ import MenuAPI, { MenuTable } from "@/api/module_system/menu";
 import DictAPI, { DictTable } from "@/api/module_system/dict";
 import { formatTree } from "@/utils/common";
 import { MenuTypeEnum } from "@/enums";
+import { useSettingsStore } from "@/store";
+import { ThemeMode } from "@/enums/settings/theme.enum";
 
 // 表格列配置接口
 interface TableColumn {
@@ -995,6 +998,27 @@ const tableColumns = ref<TableColumn[]>([
   { prop: "operation", label: "操作", show: true },
 ]);
 
+
+const settingsStore = useSettingsStore();
+
+// 主题计算属性
+const codeTheme = computed(() =>
+  settingsStore.theme === ThemeMode.DARK ? "dracula" : "default"
+);
+
+// 监听主题变化并更新CodeMirror实例
+watch(codeTheme, (newTheme) => {
+  // 更新SQL编辑器主题
+  if (sqlRef.value && sqlRef.value.cminstance) {
+    sqlRef.value.cminstance.setOption("theme", newTheme);
+  }
+  
+  // 更新代码预览编辑器主题
+  if (cmRef.value && cmRef.value.cminstance) {
+    cmRef.value.cminstance.setOption("theme", newTheme);
+  }
+});
+
 // CodeMirror配置
 const cmOptions: EditorConfiguration = {
   mode: "text/javascript",
@@ -1002,7 +1026,10 @@ const cmOptions: EditorConfiguration = {
   smartIndent: true,
   indentUnit: 2,
   tabSize: 2,
-  readOnly: true,
+  readOnly: false,
+  theme: codeTheme.value,
+  lineWrapping: true,
+  autofocus: false,
 };
 
 const sqlOptions: EditorConfiguration = {
@@ -1012,8 +1039,9 @@ const sqlOptions: EditorConfiguration = {
   indentUnit: 2,
   tabSize: 2,
   readOnly: false,
-  theme: "default",
+  theme: codeTheme.value,
   lineWrapping: true,
+  autofocus: false,
 };
 
 // 工具函数

frontend/src/views/module_system/notice/index.vue

@@ -349,7 +349,7 @@
     >
       <!-- 详情 -->
       <template v-if="dialogVisible.type === 'detail'">
-        <el-descriptions :column="4" border>
+        <el-descriptions :column="4" border label-width="120px">
           <el-descriptions-item label="标题" :span="2">
             {{ detailFormData.notice_title }}
           </el-descriptions-item>
@@ -368,12 +368,12 @@
               {{ detailFormData.status ? "启用" : "停用" }}
             </el-tag>
           </el-descriptions-item>
-          <el-descriptions-item label="内容" :span="2">
-            {{ detailFormData.notice_content }}
-          </el-descriptions-item>
           <el-descriptions-item label="描述" :span="2">
             {{ detailFormData.description }}
           </el-descriptions-item>
+          <el-descriptions-item label="内容" :span="4">
+            <WangEditor v-model="detailFormData.notice_content" :readonly="true" />
+          </el-descriptions-item>
           <el-descriptions-item label="创建人" :span="2">
             {{ detailFormData.creator?.name }}
           </el-descriptions-item>