refactor(CodeEditor): simplify editor extensions and improve formatting

- Removed redundant Codemirror theme styles from the CodeEditor component, retaining only essential line wrapping functionality.
- Enhanced formatting in the live-stream view by consolidating attributes in various components for better readability and consistency.
- Improved overall code organization and maintainability in the CodeEditor and live-stream components.

src/components/CodeEditor.vue

@@ -117,44 +117,9 @@ watch(
   }
 )
 
-// Editor extensions
+// Editor extensions - using Codemirror default styles
 const extensions = computed(() => {
-  const exts: any[] = [
-    EditorView.lineWrapping,
-    EditorView.theme({
-      '&': {
-        fontSize: '13px',
-        border: '1px solid #dcdfe6',
-        borderRadius: '0 0 4px 4px',
-        borderTop: 'none'
-      },
-      '.cm-content': {
-        fontFamily: "'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace",
-        padding: '8px 0'
-      },
-      '.cm-gutters': {
-        backgroundColor: '#f5f7fa',
-        color: '#909399',
-        border: 'none',
-        borderRight: '1px solid #e4e7ed'
-      },
-      '.cm-activeLineGutter': {
-        backgroundColor: '#e8eaed'
-      },
-      '.cm-activeLine': {
-        backgroundColor: '#f5f7fa'
-      },
-      '&.cm-focused': {
-        outline: 'none'
-      },
-      '&.cm-focused .cm-selectionBackground, ::selection': {
-        backgroundColor: '#d7d4f0 !important'
-      },
-      '.cm-placeholder': {
-        color: '#909399'
-      }
-    })
-  ]
+  const exts: any[] = [EditorView.lineWrapping]
 
   // Add language-specific syntax highlighting
   if (props.language === 'json') {
@@ -323,8 +288,4 @@ defineExpose({
 :deep(.cm-scroller) {
   overflow: auto;
 }
-
-:deep(.cm-line) {
-  padding-left: 8px;
-}
 </style>

src/views/live-stream/index.vue

@@ -157,12 +157,14 @@
               <span style="margin-left: 8px; color: #909399">秒</span>
             </el-form-item> -->
             <el-form-item label="命令模板:" prop="commandTemplate">
-              <CodeEditor
-                v-model="form.commandTemplate"
-                language="bash"
-                height="200px"
-                placeholder="#!/bin/bash&#10;# FFmpeg 命令模板，可使用 {RTSP_URL} 等变量"
-              />
+              <div class="code-editor-wrapper">
+                <CodeEditor
+                  v-model="form.commandTemplate"
+                  language="bash"
+                  height="200px"
+                  placeholder="#!/bin/bash&#10;# FFmpeg 命令模板，可使用 {RTSP_URL} 等变量"
+                />
+              </div>
             </el-form-item>
             <!-- <el-form-item label="备注:" prop="remark">
               <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="备注信息" maxlength="500"
@@ -1094,6 +1096,9 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
+.code-editor-wrapper {
+}
+
 .search-form {
   flex-shrink: 0;
   margin-bottom: 16px;