From 8e73979bd1e525e0f20b026438e0d2a406e555d6 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Wed, 20 Sep 2023 17:43:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=85=8D=E7=BD=AE=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=EF=BC=8C=E5=8F=82=E6=95=B0=E6=AF=94=E8=BE=83=E5=B7=AE?=
 =?UTF-8?q?=E5=BC=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                 |   9 +-
 src/components/CodemirrorEdite/index.vue     |  61 ++++++++++
 src/components/CodemirrorEditeDiff/index.vue | 118 +++++++++++++++++++
 3 files changed, 186 insertions(+), 2 deletions(-)
 create mode 100644 src/components/CodemirrorEdite/index.vue
 create mode 100644 src/components/CodemirrorEditeDiff/index.vue

diff --git a/package.json b/package.json
index f8517fb0..12ee3958 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,11 @@
   "dependencies": {
     "@ant-design-vue/pro-layout": "^3.2.4",
     "@ant-design/icons-vue": "^6.1.0",
+    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/merge": "^6.1.2",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "ant-design-vue": "^3.2.20",
+    "codemirror": "^6.0.1",
     "dayjs": "^1.11.8",
     "echarts": "^5.4.2",
     "file-saver": "^2.0.5",
@@ -23,8 +27,9 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.1.4",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4",
-    "vue-i18n": "^9.3.0"
+    "vue-codemirror": "^6.1.1",
+    "vue-i18n": "^9.3.0",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@types/file-saver": "^2.0.5",
diff --git a/src/components/CodemirrorEdite/index.vue b/src/components/CodemirrorEdite/index.vue
new file mode 100644
index 00000000..37258b9d
--- /dev/null
+++ b/src/components/CodemirrorEdite/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <codemirror
+    :model-value="modelValue"
+    :placeholder="props.placeholder"
+    :style="props.editorStyle"
+    :disabled="props.disabled"
+    :autofocus="false"
+    :indent-with-tab="true"
+    :tab-size="props.tabSize"
+    :extensions="[javascript(), oneDark]"
+    @ready="fnReady"
+    @change="fnChange"
+  />
+</template>
+<script lang="ts" setup>
+import { Codemirror } from 'vue-codemirror';
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { ref } from 'vue';
+
+const emit = defineEmits(['update:value']);
+const props = defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: 'input context here...',
+  },
+  /**是否禁止输入 */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  editorStyle: {
+    type: Object,
+    default: () => ({ height: '400px !important' }),
+  },
+  /**缩进2空格 */
+  tabSize: {
+    type: Number,
+    default: 2,
+  },
+});
+
+// 绑定值
+const modelValue = ref<string>('');
+
+/**变更时更新绑定值 */
+function fnChange(value: string, viewUpdate: any) {
+  emit('update:value', value);
+}
+
+/**组件渲染后 */
+function fnReady(payload: any) {
+  modelValue.value = props.value;
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/components/CodemirrorEditeDiff/index.vue b/src/components/CodemirrorEditeDiff/index.vue
new file mode 100644
index 00000000..d86eeb65
--- /dev/null
+++ b/src/components/CodemirrorEditeDiff/index.vue
@@ -0,0 +1,118 @@
+<template>
+  <a-modal
+    :title="props.title"
+    width="80%"
+    :visible="props.visible"
+    :body-style="{ padding: '0 24px' }"
+    :destroy-on-close="true"
+    @cancel="fnCronModal(false)"
+    @ok="fnCronModal(true)"
+  >
+    <!-- style="height: 600px; color: #abb2bf; background-color: #282c34" -->
+    <div ref="mergeViewContainer" class="mergeViewContainer"></div>
+  </a-modal>
+</template>
+<script lang="ts" setup>
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { MergeView } from '@codemirror/merge';
+import { EditorView, basicSetup } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+
+import { watch, ref } from 'vue';
+import { nextTick } from 'vue';
+
+const emit = defineEmits(['cancel', 'ok', 'update:visible']);
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '内容比较',
+  },
+  newArea: {
+    type: String,
+    default: '当前内容',
+  },
+  oldArea: {
+    type: String,
+    default: '原始内容',
+  },
+  height: {
+    type: String,
+    default: '400px !important',
+  },
+  /**是否禁止输入 */
+  disabled: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const mergeViewContainer = ref();
+
+/**监听是否显示，初始cron属性 */
+watch(
+  () => props.visible,
+  val => {
+    if (val) {
+      // 开启时等待dom完成
+
+      nextTick(() => {
+        console.log(mergeViewContainer.value.style);
+        // 设置高度
+        mergeViewContainer.value.style.height = props.height;
+        // 实例到dom
+        new MergeView({
+          a: {
+            doc: props.newArea,
+            extensions: [
+              javascript(),
+              oneDark,
+              basicSetup,
+              EditorView.editable.of(!props.disabled),
+              EditorState.readOnly.of(props.disabled),
+            ],
+          },
+          b: {
+            doc: props.oldArea,
+            extensions: [
+              javascript(),
+              oneDark,
+              basicSetup,
+              EditorView.editable.of(false),
+              EditorState.readOnly.of(true),
+            ],
+          },
+          parent: mergeViewContainer.value,
+        });
+      });
+    }
+  }
+);
+
+/**
+ * 窗口事件
+ * @param val modal触发事件
+ */
+function fnCronModal(val: boolean) {
+  emit('update:visible', false);
+  if (val) {
+    emit('ok', true);
+  } else {
+    emit('cancel');
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.mergeViewContainer {
+  height: 400px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  color: #abb2bf;
+  background-color: #282c34;
+}
+</style>