文本文件添加预览编辑等

package-lock.json

@@ -14,6 +14,7 @@
 				"@wangeditor/editor-for-vue": "^5.1.12",
 				"axios": "^1.6.3",
 				"clipboard": "^2.0.11",
+				"codemirror": "^6.0.1",
 				"countup.js": "^2.8.0",
 				"cropperjs": "^2.0.0",
 				"d3": "^7.9.0",
@@ -37,6 +38,7 @@
 				"pinia": "^2.1.7",
 				"vditor": "^3.11.0",
 				"vue": "^3.4.5",
+				"vue-codemirror": "^6.1.1",
 				"vue-cropper": "1.1.1",
 				"vue-cropperjs": "^5.0.0",
 				"vue-echarts": "^6.6.9",
@@ -250,6 +252,79 @@
 			"resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-11.0.3.tgz",
 			"integrity": "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ=="
 		},
+		"node_modules/@codemirror/autocomplete": {
+			"version": "6.18.6",
+			"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz",
+			"integrity": "sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.17.0",
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/commands": {
+			"version": "6.8.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.8.1.tgz",
+			"integrity": "sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.4.0",
+				"@codemirror/view": "^6.27.0",
+				"@lezer/common": "^1.1.0"
+			}
+		},
+		"node_modules/@codemirror/language": {
+			"version": "6.11.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.0.tgz",
+			"integrity": "sha512-A7+f++LodNNc1wGgoRDTt78cOwWm9KVezApgjOMp1W4hM0898nsqBXwF+sbePE7ZRcjN7Sa1Z5m2oN27XkmEjQ==",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.23.0",
+				"@lezer/common": "^1.1.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0",
+				"style-mod": "^4.0.0"
+			}
+		},
+		"node_modules/@codemirror/lint": {
+			"version": "6.8.5",
+			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.5.tgz",
+			"integrity": "sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.35.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"node_modules/@codemirror/search": {
+			"version": "6.5.11",
+			"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.11.tgz",
+			"integrity": "sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"node_modules/@codemirror/state": {
+			"version": "6.5.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
+			"integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
+			"dependencies": {
+				"@marijn/find-cluster-break": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/view": {
+			"version": "6.36.8",
+			"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.36.8.tgz",
+			"integrity": "sha512-yoRo4f+FdnD01fFt4XpfpMCcCAo9QvZOtbrXExn4SqzH32YC6LgzqxfLZw/r6Ge65xyY03mK/UfUqrVw1gFiFg==",
+			"dependencies": {
+				"@codemirror/state": "^6.5.0",
+				"style-mod": "^4.1.0",
+				"w3c-keyname": "^2.2.4"
+			}
+		},
 		"node_modules/@cropper/element": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/@cropper/element/-/element-2.0.0.tgz",
@@ -556,6 +631,32 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@lezer/common": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz",
+			"integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA=="
+		},
+		"node_modules/@lezer/highlight": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+			"integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
+			"dependencies": {
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"node_modules/@lezer/lr": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+			"integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+			"dependencies": {
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"node_modules/@marijn/find-cluster-break": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+			"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
+		},
 		"node_modules/@mermaid-js/parser": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-0.4.0.tgz",
@@ -1598,6 +1699,20 @@
 				"tiny-emitter": "^2.0.0"
 			}
 		},
+		"node_modules/codemirror": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
+			"integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/commands": "^6.0.0",
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/lint": "^6.0.0",
+				"@codemirror/search": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0"
+			}
+		},
 		"node_modules/codepage": {
 			"version": "1.15.0",
 			"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
@@ -1684,6 +1799,11 @@
 				"node": ">=0.8"
 			}
 		},
+		"node_modules/crelt": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+			"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+		},
 		"node_modules/cropperjs": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-2.0.0.tgz",
@@ -4943,6 +5063,11 @@
 				"url": "https://github.com/sponsors/antfu"
 			}
 		},
+		"node_modules/style-mod": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+			"integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
+		},
 		"node_modules/stylis": {
 			"version": "4.3.6",
 			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
@@ -5373,6 +5498,21 @@
 				}
 			}
 		},
+		"node_modules/vue-codemirror": {
+			"version": "6.1.1",
+			"resolved": "https://registry.npmjs.org/vue-codemirror/-/vue-codemirror-6.1.1.tgz",
+			"integrity": "sha512-rTAYo44owd282yVxKtJtnOi7ERAcXTeviwoPXjIc6K/IQYUsoDkzPvw/JDFtSP6T7Cz/2g3EHaEyeyaQCKoDMg==",
+			"dependencies": {
+				"@codemirror/commands": "6.x",
+				"@codemirror/language": "6.x",
+				"@codemirror/state": "6.x",
+				"@codemirror/view": "6.x"
+			},
+			"peerDependencies": {
+				"codemirror": "6.x",
+				"vue": "3.x"
+			}
+		},
 		"node_modules/vue-cropper": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-1.1.1.tgz",
@@ -5480,6 +5620,11 @@
 				"typescript": "*"
 			}
 		},
+		"node_modules/w3c-keyname": {
+			"version": "2.2.8",
+			"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+			"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+		},
 		"node_modules/web-worker": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.5.0.tgz",

package.json

@@ -14,6 +14,7 @@
 		"@wangeditor/editor-for-vue": "^5.1.12",
 		"axios": "^1.6.3",
 		"clipboard": "^2.0.11",
+		"codemirror": "^6.0.1",
 		"countup.js": "^2.8.0",
 		"cropperjs": "^2.0.0",
 		"d3": "^7.9.0",
@@ -37,6 +38,7 @@
 		"pinia": "^2.1.7",
 		"vditor": "^3.11.0",
 		"vue": "^3.4.5",
+		"vue-codemirror": "^6.1.1",
 		"vue-cropper": "1.1.1",
 		"vue-cropperjs": "^5.0.0",
 		"vue-echarts": "^6.6.9",

src/api/file.ts

@@ -47,3 +47,27 @@ export const DelUserFileService = (Data) => {
         }
     })
 }
+
+export const FindFileContentService = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    return request.post('/file/find_file_content', params,{
+        headers: {
+            'token': Data.token, //token
+        }
+    })
+}
+
+export const UpdateFileContentService = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    return request.post('/file/update_file_content', params,{
+        headers: {
+            'token': Data.token, //token
+        }
+    })
+}

src/components/table-custom.vue

@@ -59,9 +59,13 @@
                                 <el-button type="danger" size="small" :icon="Link" @click="handlePush(row)" v-if="item.operate.push.link">
                                     {{item.operate.push.label}}
                                 </el-button>
-                                <el-button type="danger" size="small" :icon="Link" @click="genOperate(row)" v-if="item.operate.gen.show">
+                                <el-button type="danger" size="small" :icon="Link" @click="genOperate(row,item.operate)" v-if="item.operate.gen.show">
                                     {{item.operate.gen.label}}
                                 </el-button>
+                                <el-button type="danger" size="small" :icon="Link" @click="genOperateV2(row,item.operate.genv2)" v-if="item.operate.genv2?.show">
+                                    {{item.operate.genv2.label}}
+                                </el-button>
+                                
                             </template>
                             <span v-else-if="item.formatter">
                                 {{ item.formatter(row[item.prop]) }}
@@ -155,6 +159,10 @@ const props = defineProps({
         type: Function,
         default: () => { }
     },
+    genOperateV2: {
+        type: Function,
+        default: () => { }
+    },
 })
 
 let {

src/views/system/gen-chat.vue

@@ -342,8 +342,6 @@ import mermaidPlugin from "@agoose77/markdown-it-mermaid";
 import "katex/dist/katex.min.css";
 import Vditor from 'vditor';
 import 'vditor/dist/index.css';
-import { json } from "d3";
-import { pa } from "element-plus/es/locale";
 
 
 interface Message {

src/views/system/manage-file.vue

@@ -3,7 +3,7 @@
         <TableSearch :query="query" :options="searchOpt" :search="handleSearch" :refresh="getData" />
         <div class="container">
             <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
-                :delFunc="handleDelete" :changePage="changePage" :currentPage="page.index" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData">
+                :delFunc="handleDelete" :changePage="changePage" :currentPage="page.index" :editFunc="handleEdit" :genOperate="handleGenOperate" :refresh="getData" :genOperateV2="handleGenOperateV2">
                 <template #toolbarBtn>
                     <el-button type="warning" :icon="CirclePlusFilled" @click="visible_add = true">上传文件</el-button>
                 </template>
@@ -21,6 +21,17 @@
         <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
             <TableDetail :data="viewData"></TableDetail>
         </el-dialog>
+        <div>
+            <transition name="fade">
+                <div 
+                    v-if="code_edit"
+                    class="mask"
+                    @click.self="code_edit = false"
+                ></div>
+                </transition>
+                <slideCodeEdit v-model:content="code_edit_content" :fileID="edit_file_id"  :show="code_edit"  :fileName="edit_file_name" @close="closeFileEdit" @update="updateFileContent($event)"/>
+        </div>
+        
     </div>
 
     <el-dialog
@@ -41,14 +52,14 @@ import { CirclePlusFilled } from '@element-plus/icons-vue';
 import { Session } from '@/types/session';
 import {FindUserFileService} from "@/api/file";
 import {UpdateUserFileService} from "@/api/file";
-import {DelUserFileService} from "@/api/file";
+import {DelUserFileService, FindFileContentService} from "@/api/file";
 import { File,fileUrl,fileUrl2 } from '@/types/file';
 import TableCustom from '@/components/table-custom.vue';
 import TableDetail from '@/components/table-detail.vue';
 import TableSearch from '@/components/table-search.vue';
 import UploadFile from '@/components/upload-file.vue';
 import { FormOption, FormOptionList } from '@/types/form-option';
-import { pa } from 'element-plus/es/locale';
+import slideCodeEdit from './slide-code-edit.vue';
 
 
 const page = reactive({
@@ -60,6 +71,10 @@ const tableData = ref<File[]>([]);
 const allData = ref<File[]>([]);
 const downloadFileVisible = ref(false);
 const downloadFileUrl = ref('');
+const code_edit = ref(false);
+const code_edit_content = ref('');
+const edit_file_name = ref('');
+const edit_file_id = ref(0);
 
 // 查询相关
 const query = reactive({
@@ -106,8 +121,7 @@ let columns = ref([
     { prop: "UploadType", label: "上传类型",width: 100},
     { prop: 'CreatedAt', label: '创建时间',type: 'date',width: 220 },
     { prop: 'UpdatedAt', label: '更新时间',type: 'date',width: 220 },
-    { prop: 'operator', label: '操作' , operate: { view: false, edit: true, delete: true,push: {link: false,label:"继续该会话"} ,gen: {show: true,label:"下载文件"}},
+    { prop: 'operator', label: '操作' , operate: { view: false, edit: true, delete: true,push: {link: false,label:"继续该会话"} ,gen: {show: true,label:"下载文件"}, genv2:{type:"file_edit", label:"编辑文件内容", show:true}},align: 'center', fixed: 'right' },
-         align: 'center', fixed: 'right' },
 ])
 
 const getData = async () => {
@@ -252,6 +266,34 @@ const handleGenOperate = async (row: File) => {
     downloadFile(row);
     
 }
+
+const editFileType= {'txt':true,'json':true,'md':true,'py':true,'java':true,'cpp':true,'go':true,'js':true,'html':true,'css':true}
+
+const handleGenOperateV2 = async (row: File, content: any) => {
+    if (content.type == 'download'){
+        console.log("gen row:", row);
+        //弹出提示框
+        downloadFile(row);
+    }else if (content.type == 'file_edit'){
+        //文件类型是否支持
+        let fileName = row.UserFileName;
+        //按.分割
+        let fileType = fileName.split(".")[1];
+        console.log("fileType:", fileType);
+        if(editFileType[fileType] == undefined){
+            ElMessage.error("不支持的文件类型："+fileType+"，该文件类型不支持在线编辑，请下载后编辑");
+            return;
+        }
+        //获取文本内容
+        await FindFileContent(row);
+        code_edit.value = true;
+
+    }else{
+        ElMessage.error("操作类型错误");
+    }
+}
+
+
 const downloadFile = async (row: File) => {
     const fileUrl_ = fileUrl2+row.file_store_name +"?token=" + localStorage.getItem('token');
     //对话框，加入<a>标签
@@ -291,6 +333,56 @@ const handleDelete = async (row: File) => {
         console.log(e);
     }
 }
+
+const FindFileContent = async (row: File) => {
+    let req={
+        token: localStorage.getItem('token'),
+        user_file_id: row.ID,
+    };
+    edit_file_name.value = row.UserFileName;
+    edit_file_id.value = row.ID;
+    try{
+        let result = await FindFileContentService(req);
+        if(result["code"] === 0){
+            //console.log("file content:", result["data"][0]);
+            code_edit_content.value = result["data"][0]["FileContent"];
+            console.log("code_edit_content:", code_edit_content.value);
+        }else{
+            ElMessage.error("删除失败");
+        }
+    }catch(e){
+        console.log(e);
+    }
+}
+
+const closeFileEdit = () => {
+    code_edit.value = false;
+    code_edit_content.value = '';
+} 
+
+const updateFileContent = async (value) => {
+    console.log("file content:", value);
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/views/system/manage-model.vue

@@ -38,7 +38,6 @@ import TableCustom from '@/components/table-custom.vue';
 import TableDetail from '@/components/table-detail.vue';
 import TableSearch from '@/components/table-search.vue';
 import { FormOption, FormOptionList } from '@/types/form-option';
-import { pa } from 'element-plus/es/locale';
 
 
 // 查询相关

src/views/system/slide-code-edit.vue

@@ -0,0 +1,152 @@
+<template>
+  <transition name="slide">
+    <div v-if="show" class="side-panel">
+      <button @click="handleClose" class="close-btn"></button>
+      <el-button type="primary" @click="UpdateFileCOntent">保存修改</el-button>
+      <div class="content">
+        <h2>{{ fileName }}</h2>
+        <textarea
+          ref="textareaRef"
+          v-model="localContent"
+          cols="40"
+          rows="10"
+          spellcheck="false"
+        ></textarea>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from "vue";
+import { UpdateFileContentService } from "@/api/file";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  content: {
+    type: String,
+    default: "",
+  },
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  fileName: {
+    type: String,
+    default: "编辑代码",
+  },
+  fileID: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits<{
+  (e: "close"): void;
+}>();
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+const localContent = ref(props.content);
+
+// 当props.content变化时同步到本地
+watch(
+  () => props.content,
+  (newVal) => {
+    localContent.value = newVal;
+  }
+);
+
+// 当面板显示时自动聚焦到textarea
+watch(
+  () => props.show,
+  async (newVal) => {
+    if (newVal) {
+      await nextTick();
+      textareaRef.value?.focus();
+    }
+  }
+);
+
+const handleClose = () => {
+  emit("close");
+};
+
+const UpdateFileCOntent = async () => {
+  let req = {
+    token: localStorage.getItem("token"),
+    file_id: props.fileID,
+    file_content: localContent.value,
+  };
+  try {
+    let result = await UpdateFileContentService(req);
+    if (result["code"] === 0) {
+      ElMessage.success("修改成功");
+    } else {
+      ElMessage.error("修改失败");
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+</script>
+
+<style scoped lang="css">
+.side-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 50%;
+  height: 100%;
+  background: white;
+  z-index: 1001;
+  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 24px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s;
+  z-index: 1;
+}
+
+.close-btn:hover {
+  color: #666;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+}
+
+textarea {
+  flex: 1;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  resize: none;
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  tab-size: 2;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.3s ease;
+}
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateX(100%);
+}
+</style>

yarn.lock

@@ -87,6 +87,72 @@
   resolved "https://registry.npmjs.org/@chevrotain/utils/-/utils-11.0.3.tgz"
   integrity sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==
 
+"@codemirror/autocomplete@^6.0.0":
+  version "6.18.6"
+  resolved "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz"
+  integrity sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.17.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/commands@^6.0.0", "@codemirror/commands@6.x":
+  version "6.8.1"
+  resolved "https://registry.npmjs.org/@codemirror/commands/-/commands-6.8.1.tgz"
+  integrity sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.4.0"
+    "@codemirror/view" "^6.27.0"
+    "@lezer/common" "^1.1.0"
+
+"@codemirror/language@^6.0.0", "@codemirror/language@6.x":
+  version "6.11.0"
+  resolved "https://registry.npmjs.org/@codemirror/language/-/language-6.11.0.tgz"
+  integrity sha512-A7+f++LodNNc1wGgoRDTt78cOwWm9KVezApgjOMp1W4hM0898nsqBXwF+sbePE7ZRcjN7Sa1Z5m2oN27XkmEjQ==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.23.0"
+    "@lezer/common" "^1.1.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+    style-mod "^4.0.0"
+
+"@codemirror/lint@^6.0.0":
+  version "6.8.5"
+  resolved "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.5.tgz"
+  integrity sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.35.0"
+    crelt "^1.0.5"
+
+"@codemirror/search@^6.0.0":
+  version "6.5.11"
+  resolved "https://registry.npmjs.org/@codemirror/search/-/search-6.5.11.tgz"
+  integrity sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
+
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.4.0", "@codemirror/state@^6.5.0", "@codemirror/state@6.x":
+  version "6.5.2"
+  resolved "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz"
+  integrity sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==
+  dependencies:
+    "@marijn/find-cluster-break" "^1.0.0"
+
+"@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.23.0", "@codemirror/view@^6.27.0", "@codemirror/view@^6.35.0", "@codemirror/view@6.x":
+  version "6.36.8"
+  resolved "https://registry.npmjs.org/@codemirror/view/-/view-6.36.8.tgz"
+  integrity sha512-yoRo4f+FdnD01fFt4XpfpMCcCAo9QvZOtbrXExn4SqzH32YC6LgzqxfLZw/r6Ge65xyY03mK/UfUqrVw1gFiFg==
+  dependencies:
+    "@codemirror/state" "^6.5.0"
+    style-mod "^4.1.0"
+    w3c-keyname "^2.2.4"
+
 "@cropper/element-canvas@^2.0.0":
   version "2.0.0"
   resolved "https://registry.npmjs.org/@cropper/element-canvas/-/element-canvas-2.0.0.tgz"
@@ -287,6 +353,30 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@lezer/common@^1.0.0", "@lezer/common@^1.1.0":
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz"
+  integrity sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==
+
+"@lezer/highlight@^1.0.0":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz"
+  integrity sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@lezer/lr@^1.0.0":
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz"
+  integrity sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@marijn/find-cluster-break@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz"
+  integrity sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==
+
 "@mermaid-js/parser@^0.4.0":
   version "0.4.0"
   resolved "https://registry.npmjs.org/@mermaid-js/parser/-/parser-0.4.0.tgz"
@@ -1049,6 +1139,19 @@ clipboard@^2.0.11:
     select "^1.1.2"
     tiny-emitter "^2.0.0"
 
+codemirror@^6.0.1, codemirror@6.x:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz"
+  integrity sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/commands" "^6.0.0"
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/search" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
 codepage@~1.15.0:
   version "1.15.0"
   resolved "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz"
@@ -1145,6 +1248,11 @@ crc-32@~1.2.0, crc-32@~1.2.1:
   resolved "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz"
   integrity sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==
 
+crelt@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz"
+  integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
+
 cropperjs@^1.5.6:
   version "1.6.2"
   resolved "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.2.tgz"
@@ -3122,6 +3230,11 @@ strip-literal@^1.0.0:
   dependencies:
     acorn "^8.10.0"
 
+style-mod@^4.0.0, style-mod@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz"
+  integrity sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==
+
 stylis@^4.1.2, stylis@^4.1.3, stylis@^4.3.6:
   version "4.3.6"
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz"
@@ -3348,6 +3461,16 @@ vscode-uri@~3.0.8:
   resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz"
   integrity sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==
 
+vue-codemirror@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.npmjs.org/vue-codemirror/-/vue-codemirror-6.1.1.tgz"
+  integrity sha512-rTAYo44owd282yVxKtJtnOi7ERAcXTeviwoPXjIc6K/IQYUsoDkzPvw/JDFtSP6T7Cz/2g3EHaEyeyaQCKoDMg==
+  dependencies:
+    "@codemirror/commands" "6.x"
+    "@codemirror/language" "6.x"
+    "@codemirror/state" "6.x"
+    "@codemirror/view" "6.x"
+
 vue-cropper@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/vue-cropper/-/vue-cropper-1.1.1.tgz"
@@ -3404,7 +3527,7 @@ vue-tsc@^0.38.4:
   dependencies:
     "@volar/vue-typescript" "0.38.9"
 
-vue@*, "vue@^2.6.12 || ^3.1.1", "vue@^2.6.14 || ^3.3.0", "vue@^3.0.0-0 || ^2.6.0", vue@^3.0.5, vue@^3.2.0, vue@^3.2.25, vue@^3.2.47, vue@^3.3.4, vue@^3.4.5, vue@>=3.0.0, "vue@2 || 3", vue@3.4.21:
+vue@*, "vue@^2.6.12 || ^3.1.1", "vue@^2.6.14 || ^3.3.0", "vue@^3.0.0-0 || ^2.6.0", vue@^3.0.5, vue@^3.2.0, vue@^3.2.25, vue@^3.2.47, vue@^3.3.4, vue@^3.4.5, vue@>=3.0.0, "vue@2 || 3", vue@3.4.21, vue@3.x:
   version "3.4.21"
   resolved "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz"
   integrity sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==
@@ -3415,6 +3538,11 @@ vue@*, "vue@^2.6.12 || ^3.1.1", "vue@^2.6.14 || ^3.3.0", "vue@^3.0.0-0 || ^2.6.0
     "@vue/server-renderer" "3.4.21"
     "@vue/shared" "3.4.21"
 
+w3c-keyname@^2.2.4:
+  version "2.2.8"
+  resolved "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz"
+  integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
+
 web-worker@^1.2.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/web-worker/-/web-worker-1.5.0.tgz"