refactor(front): 重构前端组件并优化代码

- 移除了多个无用的组件和文件 - 更新了部分组件的实现方式 - 优化了代码结构和样式 - 修复了CuteSimpleTable、CuteDragTable组件，在无数据时，数据表格不刷新问题
2025-07-17 20:39:09 +08:00
parent 4fa3c27b3b
commit ebbfac2774
29 changed files with 757 additions and 698 deletions
@@ -0,0 +1,87 @@
+<!--Yaml编辑器 基于-->
+<!--<a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirror</a>，-->
+<!--主题预览地址 <a href="https://codemirror.net/demo/theme.html#idea" target="_blank">Theme</a>-->
+<!--</p>-->
+<template>
+  <textarea ref="textarea" />
+</template>
+
+<script>
+import CodeMirror from 'codemirror'
+import 'codemirror/lib/codemirror.css'
+// 替换主题这里需修改名称
+// 主题预览地址 https://blog.csdn.net/qq_41694291/article/details/106429772
+import 'codemirror/theme/darcula.css'
+import 'codemirror/mode/yaml/yaml'
+export default {
+  name: 'CuteYamlEditor',
+  props: {
+    content: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    height: {
+      type: String,
+      required: false,
+      default: '500px'
+    },
+    readOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      editor: false
+    }
+  },
+  watch: {
+    content(newVal, oldVal) {
+      const editorValue = this.editor.getValue()
+      if (newVal !== editorValue) {
+        this.editor.setValue(newVal)
+      }
+    },
+    height(newVal, oldVal) {
+      this.editor.setSize('auto', newVal)
+    }
+  },
+  mounted() {
+    this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
+      mode: 'text/x-yaml',
+      autoRefresh: true,
+      lineNumbers: true,
+      lint: true,
+      lineWrapping: true,
+      tabSize: 2,
+      cursorHeight: 1,
+      // 替换主题这里需修改名称
+      theme: 'darcula'
+    })
+    this.editor.setSize('auto', this.height)
+    if (this.content) {
+      this.editor.setValue(this.content)
+    }
+    this.editor.setOption('readOnly', this.readOnly)
+    this.editor.on('change', cm => {
+      this.$emit('change', cm.getValue())
+    })
+  },
+  methods: {
+    getValue() {
+      if (this.editor == null) {
+        return ''
+      }
+      return this.editor.getValue()
+    },
+    setValue(val) {
+      if (this.editor == null) {
+        return
+      }
+      this.editor.setValue(val)
+    }
+  }
+}
+</script>