diff --git a/web_src/js/components/IdeProject.vue b/web_src/js/components/IdeProject.vue
index e69de29bb..ad71e77d1 100644
--- a/web_src/js/components/IdeProject.vue
+++ b/web_src/js/components/IdeProject.vue
@@ -0,0 +1,1412 @@
+<template>
+  <div style="overflow: hidden">
+    <div v-if="params.type === 'ide'">
+      <div class="ide-header">
+        <span>
+          <svg class="icon ide-header-svg" aria-hidden="true">
+            <use xlink:href="#icon-wenjianbeifen"></use>
+          </svg>
+          {{ `${params.owner}/${params.project}` }}
+        </span>
+        <i class="el-icon-switch-button" @click="handleBack" />
+      </div>
+      <div style="display: flex">
+        <div class="menu-left">
+          <el-menu :default-active="activeKey" class="menu-left-drag-item-drag" background-color="#F5F5F5" text-color="#7A7A7B" active-text-color="#000" @select="handleselect">
+            <el-menu-item index="1" style="line-height: 20px;height: 90px;padding: 20px 22px 46px 23px;" :class="{ activeBack: isActiveStatus }">
+<!--              <img class="menu-left-drag-img" :src="isActiveStatus ? code1 : code2" alt="" />-->
+              <svg class="icon menu-left-drag-svg" aria-hidden="true">
+                <use xlink:href="#icon-daima1"></use>
+              </svg>
+              <div slot="title">代码</div>
+            </el-menu-item>
+            <el-menu-item index="2" style="line-height: 20px;height: 90px;background-color: #F5F5F5;padding: 20px 22px 46px 23px;" :class="{ activeBack: activeKey === '2' }">
+<!--              <img class="menu-left-drag-img" :src="isActiveStatus ? submitLog2 : submitLog1" alt="" />-->
+              <svg class="icon menu-left-drag-svg" aria-hidden="true">
+                <use xlink:href="#icon-tijiao"></use>
+              </svg>
+              <div slot="title">提交</div>
+            </el-menu-item>
+          </el-menu>
+        </div>
+        <div ref="box" class="box">
+          <div class="inlineBlock leftPaneBase" :style="{ width: leftPanelWidth }">
+            <div class="leftPaneBase-submit">
+<!--              <img class="mr5" :src="isActiveStatus ? warehouse : submit" alt="" />-->
+              {{ isActiveStatus ? "代码仓库" : "提交" }}
+            </div>
+            <VueTree v-show="isActiveStatus" :tree-list-data="treeData" :file-info-params="fileInfoParams"
+              @handleChangFile="handleChangFile" @deleteNode="handleNode" @handleAddNode="handleAddNode"
+              @handleDeleteAddNode="handleDeleteAddNode" @handleDeleteOldNode="handleDeleteOldNode" />
+            <div v-show="!isActiveStatus && inCludeSub" class="leftPaneBase-wrap">
+              <div class="leftPaneBase-wrap-change">
+                <span style="font-weight: 400;">更改</span>
+                <el-tooltip class="item" effect="dark" content="放弃所有更改" placement="bottom-end">
+<!--                  <img class="leftPaneBase-wrap-change-img" :src="abandon" alt="" @click="handleResetAll()" />-->
+                  <svg class="icon leftPaneBase-wrap-change-img leftPaneBase-wrap-change-svg " aria-hidden="true" @click="handleResetAll()" >
+                    <use xlink:href="#icon-zhongzhi3"></use>
+                  </svg>
+                </el-tooltip>
+              </div>
+            </div>
+            <div class="leftPaneBase-wrap" v-show="!isActiveStatus && inCludeSub">
+              <div class="leftPaneBase-wrap-fileName">
+                <div v-show="!submitAarry.length" class="no-commit">
+                  当前没有可提交的文件
+                </div>
+                <div v-show="!!submitAarry.length" v-for="item in submitAarry" :key="item.sha"
+                  class="leftPaneBase-wrap-fileName-item">
+                  <span @click="handleDiff(item)">{{ item.name }}</span>
+                  <el-tooltip class="item" effect="dark" content="放弃更改" placement="bottom-end">
+<!--                    <img :src="abandon" alt="" @click="handleload(item)" />-->
+                    <svg class="icon leftPaneBase-wrap-fileName-item-img leftPaneBase-wrap-change-svg" @click="handleload(item)" aria-hidden="true">
+                      <use xlink:href="#icon-zhongzhi3"></use>
+                    </svg>
+                  </el-tooltip>
+                </div>
+              </div>
+            </div>
+            <div style="width: 100%;padding: 0 20px;" >
+              <div style="border-bottom: 1px solid #b1bacd;"></div>
+            </div>
+            <div v-show="!isActiveStatus && inCludeSub" class="leftPaneBase-wrap">
+              <div class="leftPaneBase-wrap-info">提交信息</div>
+              <el-input :disabled="!submitAarry.length" v-model="textContent" class="leftPaneBase-wrap-input"
+                type="textarea" :rows="10" placeholder="请输入提交信息" />
+              <div style="width: 100%; padding: 0 20px;">
+                <el-button :disabled="!submitAarry.length" v-loading="subLoading" type="primary"
+                           element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
+                           class="leftPaneBase-wrap-infoSubmit" @click="handleSubmit">
+                  提交
+                </el-button>
+              </div>
+            </div>
+          </div>
+          <!-- <img :src="drag" alt="" title="收缩侧边栏" class="resize" /> -->
+          <div class="resize" title="收缩侧边栏"></div>
+          <div class="inlineBlock mid">
+            <div class="mid-header">
+              <span>{{ isDiff ? "" : fileInfoParams.path }}</span>
+              <div>
+                <span v-if="fileInfo.fileType === 'ipynb' && !hideNbView " style="cursor:pointer;margin-right:20px" @click="handleEdit">
+                  修改
+                  <i class="el-icon-edit" />
+                </span>
+                <span v-if="fileInfo.fileType === 'ipynb' && hideNbView " style="cursor:pointer;margin-right:20px" @click="handleEdit">
+                  预览
+                  <i class="el-icon-view" />
+                </span>
+                <span style="cursor:pointer" @click="handleSetting">设置<i class="el-icon-s-tools" /></span>
+              </div>
+            </div>
+            <!-- <codemirror /> -->
+            <div v-show="!fileInfoParams.filePath" class="empty-tip">
+              <img width="200" :src="empty" />
+              请在左侧文件树中选择一个文件，编辑后即可提交你的修改
+            </div>
+            <div v-if="containerReload">
+              <div class="showImg" v-if="fileInfo.fileType === 'image'" >
+                <img :src="fileInfo.download_url" />
+              </div>
+              <div class="showImg" v-else-if="fileInfo.fileType === 'office'" >
+                <el-button type="primary" @click="downloadUrl(fileInfo.download_url)"><a style="color:white" :href="fileType && fileType.download_url">下载</a></el-button>
+              </div>
+              <div class="showPdf" v-else-if="fileInfo.fileType === 'pdf'" >
+                <embed :src="fileInfo.download_url" />
+              </div>
+              <div class="showImg" v-else-if="fileInfo.download_url && fileInfo.fileType !== 'txt' && fileInfo.fileType !== 'ipynb'">
+                <el-button type="primary" @click="downloadUrl(fileInfo.download_url)"><a style="color:white" :href="fileType && fileType.download_url">下载</a></el-button>
+              </div>
+              <div :class="(fileInfo.fileType === 'txt' || fileInfo.fileType === 'ipynb') ? '' : 'hides'">
+                <iframe v-if="(fileInfo.fileType === 'ipynb' && !hideNbView && !isDiff)" src="/js/nbview/index.html" id="nbview" @load="loadFrame()"></iframe>
+                <monaco ref="monaco" v-loading="monacoLoading" element-loading-text="拼命加载中"
+                  element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)"
+                  :opts="opts" :is-diff="isDiff" :monaca-value="monacaValue" @handleSave="handleSave" />
+              </div>
+            </div>
+
+          </div>
+        </div>
+        <el-drawer style="height: calc(100vh - 94px); margin-top: 94px" class="drawer-wrap"
+          :visible.sync="drawerVisible" direction="rtl" destroy-on-close size="270" :show-close="false"
+          :with-header="false" :modal="false">
+          <div class="drawer-section">
+            <div class="drawer-section-style" style="padding-bottom:10px;">
+              <div class="code-fast">代码格式</div>
+              <div class="drawer-section-stydrawer-sectionle-wrap">
+                <span class="drawer-wrap-span">显示模式</span>
+                <el-select v-model="opts.theme" size="mini" placeholder="请选择" @change="handleChangeModelOptions">
+                  <el-option v-for="item in modeOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </div>
+              <div class="drawer-section-style-wrap">
+                <span  class="drawer-wrap-span">字体大小</span>
+                <el-select v-model="opts.fontSize" size="mini" placeholder="请选择" @change="handleChangeFontSizeOptions">
+                  <el-option v-for="item in fontSizeOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </div>
+              <!-- <div class="drawer-section-style-wrap">
+                <span>Tab转换</span>
+                <el-switch v-model="switchValue" active-color="#2185D0" inactive-color="#858585" />
+              </div> -->
+            </div>
+            <div class="drawer-fast">
+              <div class="code-fast">快捷键</div>
+              <div class="drawer-fast-flex">
+                <span  class="drawer-wrap-span">保存代码</span><span class="drawer-wrap-span2">Ctrl + S</span>
+              </div>
+              <div class="drawer-fast-flex">
+                <span  class="drawer-wrap-span">唤出快捷键列表</span><span class="drawer-wrap-span2">F1/Alt + F1</span>
+              </div>
+              <div class="drawer-fast-flex">
+                <span  class="drawer-wrap-span">左右缩进</span><span class="drawer-wrap-span2">Ctrl + ]/[</span>
+              </div>
+            </div>
+          </div>
+        </el-drawer>
+      </div>
+    </div>
+    <div v-else v-loading="loading" class="vscode-loading-wrap" element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading">
+      <div class="vscode-header">
+        <span>{{ `${params.owner}/${params.project}` }}</span>
+        <div class="vscode-header-right">
+          <div class="color inlineBlock mr40">
+            <i class="el-icon-time" />
+            <span class="vscode-header-right-text">{{ count }}</span>
+          </div>
+          <dvi class="inlineBlock mr40 cspointe">
+            <i class="el-icon-s-cooperation" />
+            <span class="vscode-header-right-text" @click="handleReset">重置环境</span>
+          </dvi>
+          <i class="el-icon-switch-button cspointe" @click="handleBack" />
+        </div>
+      </div>
+      <div>
+        <iframe v-if="headerParams.url" class="iframe-wrap" :src="headerParams.url" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+// import VueTreeList from './VueTreeList.vue';
+const API = "http://121.40.129.71:48991";
+import VueTree from "./vueTree.vue";
+import {
+  matterTree,
+  RecurveQuery,
+  RecurveQueryDelete,
+  RecurveAddNode,
+  RecurveUpdateValue,
+  uniqueArray,
+} from "../utils.js";
+import monaco from "./monacoeditor.vue";
+import code1 from "../../../public/images/code1.png";
+import empty from "../../../public/img/empty.png";
+import code2 from "../../../public/images/code2.png";
+import submitLog2 from "../../../public/images/submitLog2.png";
+import submitLog1 from "../../../public/images/submitLog1.png";
+import abandon from "../../../public/images/abandon.png";
+import warehouse from "../../../public/images/warehouse.png";
+import submit from "../../../public/images/submit.png";
+import drag from "../../../public/images/drag.png";
+import {
+  init,
+  add,
+  readAll,
+  readByMainKey,
+  deleteDB,
+  update,
+  remove,
+} from "./db.js";
+
+export default {
+  name: "IdeProject",
+  components: {
+    // codemirror,
+    monaco,
+    // VueTreeList,
+    VueTree,
+  },
+  data() {
+    return {
+      activeKey: "1",
+      drawerVisible: false,
+      fileInfo: {},
+      // 图片
+      code1,
+      code2,
+      empty,
+      submitLog1,
+      submitLog2,
+      abandon,
+      warehouse,
+      submit,
+      drag,
+      // 图片
+
+      leftPanelWidth: "300px",
+      modeOptions: [
+        { label: "light", value: "vs" },
+        { label: "dark", value: "vs-dark" },
+      ],
+      fontSizeOptions: [
+        { label: "14px", value: 14 },
+        { label: "16px", value: 16 },
+        { label: "18px", value: 18 },
+        { label: "20px", value: 20 },
+        { label: "22px", value: 22 },
+      ],
+      textContent: "", // 文本域输入框的值
+      monacaValue: "", // monaca编辑器的值
+      fileInfoParams: {}, //  所点击的文件以及参数
+      monacoLoading: false,
+      sets: {
+        language: {
+          apex: "apex",
+          azcli: "azcli",
+          bat: "bat",
+          c: "c",
+          clojure: "clojure",
+          coffeescript: "coffeescript",
+          cpp: "cpp",
+          csharp: "csharp",
+          csp: "csp",
+          css: "css",
+          dockerfile: "dockerfile",
+          fsharp: "fsharp",
+          go: "go",
+          graphql: "graphql",
+          handlebars: "handlebars",
+          html: "html",
+          ini: "ini",
+          java: "java",
+          javascript: "javascript",
+          json: "json",
+          kotlin: "kotlin",
+          less: "less",
+          lua: "lua",
+          markdown: "markdown",
+          msdax: "msdax",
+          mysql: "mysql",
+          "objective-c": "objective-c",
+          pascal: "pascal",
+          perl: "perl",
+          pgsql: "pgsql",
+          php: "php",
+          plaintext: "plaintext",
+          postiats: "postiats",
+          powerquery: "powerquery",
+          powershell: "powershell",
+          pug: "pug",
+          python: "python",
+          r: "r",
+          razor: "razor",
+          redis: "redis",
+          redshift: "redshift",
+          ruby: "ruby",
+          rust: "rust",
+          sb: "sb",
+          scheme: "scheme",
+          scss: "scss",
+          shell: "shell",
+          sol: "sol",
+          sql: "sql",
+          st: "st",
+          swift: "swift",
+          tcl: "tcl",
+          typescript: "typescript",
+          vb: "vb",
+          xml: "xml",
+          yaml: "yaml",
+        },
+        theme: {
+          vs: "vs",
+          "vs-dark": "vs-dark",
+          "hc-black": "hc-black",
+        },
+        colorDecorators: true,
+        comments: {
+          ignoreEmptyLines: true, // 插入行注释时忽略空行。默认为真。
+          insertSpace: true, // 在行注释标记之后和块注释标记内插入一个空格。默认为真。
+        },
+      },
+      opts: {
+        value: "",
+        diffData: {},
+        readOnly: false, // 是否可编辑
+        language: "", // 语言类型
+        theme: "vs", // 编辑器主题
+        selectOnLineNumbers: true,
+        roundedSelection: false,
+        // readOnly: this.readOnly, // 只读
+        cursorStyle: "line", // 光标样式
+        automaticLayout: false, // 自动布局
+        glyphMargin: true, // 字形边缘
+        useTabStops: false,
+        fontSize: 14, // 字体大小
+        autoIndent: false, // 自动布局
+      },
+      hideNbView:false,
+      isDiff: false,
+      inlineDiff: false,
+      containerReload: true,
+      switchValue: false,
+      loading: true,
+      treeData: [], // 子组件的数据
+      pathname: "", // 编辑文件的文件名
+      submitAarry: [], // 提交时候数组数据
+      subLoading: false,
+      treeRootData: [], // 文件树的节点
+      /** 以下为vscode的初始变量 */
+      params: this.$route.query, // 从项目列表进来 type === ide | vscode 前者是编辑 后者是嵌套
+      headerParams: {
+        remainingTime: 0,
+        url: "",
+      }, // 包含src的url + 倒计时的remainingTime
+      count: "00:00:00",
+      timer: null,
+      // eslint-disable-next-line semi
+    };
+  },
+  computed: {
+    isActiveStatus() {
+      // 计算当前的activeKey为提交 还是 代码界面
+      return this.activeKey === "1";
+    },
+    inCludeSub() {
+      // 计算提交界面的数据是否有数据
+      return true;
+    },
+  },
+  mounted() {
+    if (this.params.type === "vscode") {
+      this.getVscodeData();
+    } else {
+      this.getCodeTree();
+    }
+    init({
+      // 数据库名称
+      dbName: this.params.project,
+      // 数据表 数组 如果要创建多个表，则写多个即可
+      tableList: [
+        {
+          // 表名
+          tableName: "git",
+          // 主键
+          keyPath: "name",
+          // 对应表的其他属性
+          // attr:{
+          //    autoIncrement:true, //是否自增
+          // },
+          indexName: "index", // 索引 不建议使用 因为使用索引 当前表必须有数据否则直接报错
+          // unique:false // 对应索引是否唯一
+        },
+      ],
+    });
+    this.dragControllerDiv();
+  },
+  provide() {
+    return {
+      reload: this.reload,
+    };
+  },
+  methods: {
+    handleDiff(data) {
+      this.fileInfoParams = data;
+      this.fileInfo = data;
+      console.log("handleDiff:", this.fileInfoParams);
+      this.$refs.monaco.setDiff(data.oldcontent, data.newContent);
+    },
+    downloadUrl(string){
+      window.location.href = string;
+    },
+    // 更新提交界面的数据状态
+    treeNodeModify(data) {
+      const getData = async () => {
+        const data = await readAll("git");
+        console.log("data:", data);
+        if (data && Array.isArray(data)) {
+          this.submitAarry = data
+            .filter(
+              (name) =>
+                name.name !== "treeData" && name.name !== "undefined" && name.d
+            )
+            .map((item) => item.d);
+          console.log("this.submitAarry:", this.submitAarry);
+        }
+      };
+      getData();
+      // const newSubArray = [];
+      // function findModifyObj(data) {
+      //   data.forEach((item) => {
+      //     if (item.isLeaf && item.operation) {
+      //       newSubArray.push(item);
+      //     } else {
+      //       findModifyObj(item.children);
+      //     }
+      //   });
+      // }
+      // findModifyObj(data);
+    },
+    // 新增文件
+    handleAddNode(treeD, filePath) {
+      this.treeRootData = RecurveAddNode(this.treeRootData, treeD, filePath);
+      this.updateData(treeD);
+
+      setTimeout(async () => {
+        await add({
+          tableName: "git",
+          data: { name: "treeData", data: [...this.treeRootData] },
+        });
+        this.treeNodeModify(this.treeRootData);
+      })
+    },
+
+    updateData(d) {
+      // const k = await readByMainKey({ tableName: "git", key: "treeData" });
+      // const d = { ...k, ...data };
+      // this.treeData = matterTree(d.tree);
+      // this.treeRootData = JSON.parse(JSON.stringify(this.treeData));
+      console.log("updateData:", d);
+      add({
+        tableName: "git",
+        data: { name: encodeURI(d.filePath), d },
+      });
+    },
+
+    loadFrame(){
+      document.getElementById("nbview").contentWindow.postMessage(this.fileInfo, '*');
+    },
+    // 删除新增的文件
+    handleDeleteAddNode(valueNode) {
+      this.treeRootData = RecurveQueryDelete(
+        this.treeRootData,
+        valueNode.filePath
+      );
+      this.treeNodeModify(this.treeRootData);
+    },
+    // 删除已有的文件
+    handleDeleteOldNode(valueNode) {
+      this.treeRootData = RecurveQuery(this.treeRootData, valueNode.filePath);
+      this.treeNodeModify(this.treeRootData);
+    },
+    clearAllData() {
+      const clear = async () => {
+        const data = await readAll("git");
+        if (data && Array.isArray(data)) {
+          this.fileInfoParams.filePath = null
+          this.submitAarry = data.map((item) => {
+            // if (item.d) {
+            remove({
+              tableName: "git",
+              key: encodeURI(item.name),
+            });
+            // }
+          });
+          console.log("this.submitAarry:", this.submitAarry);
+        }
+        setTimeout(() => {
+          this.treeNodeModify();
+        }, 200);
+      };
+      clear();
+    },
+    // 放弃所有更改
+    handleResetAll() {
+      this.$confirm(`确定要放弃所有文件的更改吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          // this.handleFileInfo(params);
+          console.log("this2222222:", this.clearAllData, this)
+          this.clearAllData();
+          this.isDiff = false;
+          this.$refs.monaco.setCloseDiff(false);
+        })
+        .catch(() => {
+          console.log("取消成功");
+        });
+    },
+    handleEdit(){
+      const value = this.$refs.monaco.getVal();
+      this.fileInfo.newContent = value;
+      this.hideNbView = !this.hideNbView
+    },
+    // 放弃单个的更改---逻辑未处理
+    handleload(value) {
+      console.log("value", value);
+      this.$confirm(`确定要放弃 ${value.path} 中的更改吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          // this.handleFileInfo(params);
+          // if (value.sha) {
+            remove({
+              tableName: "git",
+              key: encodeURI(value.path),
+            });
+            this.treeNodeModify();
+          // }
+        })
+        .catch(() => {
+          console.log("取消成功");
+        });
+    },
+
+    // 提交事件。 接口地址：https://www.apifox.cn/apidoc/shared-906bc1af-5c25-4b9d-b0e0-4d1176ffe4a9/api-30499442。operation为update/add/delete三种
+    async handleSubmit() {
+      if (!this.textContent.trim())
+        return this.$message.warning("提交信息不能为空!");
+      try {
+        this.subLoading = true;
+        await this.$axios
+          .post(
+            `/api/v1/repos/${this.params.owner}/${this.params.project}/contents/commit`,
+            {
+              files: this.submitAarry?.filter(item => item.type === "blob")?.map((item) => {
+                // item.content = Buffer.from(item.newContent).toString("base64");
+                // item.operation = "update";
+                console.log("tem.newContent:",item.newContent,item)
+                return {
+                  filePath: item.path,
+                  content: Buffer.from(item.newContent).toString("base64"),
+                  operation: item.sha ? "update" : "add",
+                };
+              }),
+              msg: this.textContent,
+            }
+          )
+          .then(({ status }) => {
+            if (status === "200" || status === 200) {
+              this.subLoading = false;
+              this.submitAarry = []; // 提交的列表
+              this.$message.success("提交成功!");
+              this.textContent = "";
+
+              this.clearAllData();
+              this.getCodeTree();
+            }
+          });
+      } catch (error) {
+        this.subLoading = false;
+        console.log("error", error);
+      }
+    },
+
+    // 演示
+    async handleReset() {
+      this.$confirm(`确定要重置环境吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          this.loading = true
+          this.headerParams = {}
+          await this.$axios
+            .post(`${API}/vscode/delete`, {
+              projectId: this.params.project,
+              userId: this.params.owner,
+            })
+            .then(({ status, data: { data } }) => {
+              if (status === "200" || status === 200) {
+                this.getVscodeData();
+              } else {
+                this.$message({
+                  message: '重置环境失败',
+                  type: 'warning'
+                });
+              }
+            });
+        })
+        .catch(() => {
+          console.log("取消成功");
+        });
+
+    },
+
+    // 重置环境
+    async handleReset() {
+      this.$confirm(`确定要重置环境吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          this.loading = true
+          this.headerParams = {}
+          await this.$axios
+            .post(`${API}/vscode/delete`, {
+              projectId: this.params.project,
+              userId: this.params.owner,
+            })
+            .then(({ status, data: { data } }) => {
+              if (status === "200" || status === 200) {
+                this.getVscodeData();
+              } else {
+                this.$message({
+                  message: '重置环境失败',
+                  type: 'warning'
+                });
+              }
+            });
+        })
+        .catch(() => {
+          console.log("取消成功");
+        });
+
+    },
+    // 返回按钮
+    handleBack() {
+      // this.$router.go(-1);
+      this.$confirm(`确定要退出编辑吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(async () => {
+          window.location.href = `/${this.params.owner}/${this.params.project}`
+        })
+        .catch(() => {
+          console.log("取消成功");
+        });
+    },
+    // 获取vscode界面的接口
+    async getVscodeData() {
+      try {
+        await this.$axios
+          .post(`http://121.40.129.71:48991/vscode/getVscode`, {
+            projectId: this.params.project,
+            userId: this.params.owner,
+            containers:
+              "W3siaW1hZ2UiOiJ2c2NvZGUtd3c6djEuMCIsImNwdUxpbWl0IjoyLjAsImNwdVJlcXVlc3QiOjAuMywibWVtb3J5TGltaXQiOiIyMDQ4TSIsIm1lbW9yeVJlcXVlc3QiOiIxMDI0TSIsInJlc291cmNlTGltaXQiOiIxMDAwMEsiLCJzdGFydFRpbWUiOjIwMCwidHlwZSI6Im1haW4ifV0K",
+            tpiGitURL:
+              this.params.git,
+          })
+          .then(({ status, data: { data } }) => {
+            if (status === "200" || status === 200) {
+              this.loading = false;
+              this.headerParams = data[0];
+              this.Time();
+            }
+          });
+      } catch (error) {
+        console.log("获取vscode配置失败", error);
+      }
+    },
+    handleNode(arr = []) {
+      this.submitAarry = this.submitAarry.concat(arr);
+    },
+
+    // 获取组件树的接口
+    async getCodeTree() {
+      try {
+        await this.$axios
+          .get(
+            `/api/v1/repos/${this.params.owner}/${this.params.project}/git/codes/head`,
+            {
+              headers: {
+                Authorization: "token 3551a6fb122b0278133963474fcf18bfeef8baba",
+              },
+            }
+          )
+          .then(async ({ status, data }) => {
+            if (status === "200" || status === 200) {
+              const k = await readByMainKey({
+                tableName: "git",
+                key: "treeData",
+              });
+              const d = uniqueArray(k.data || [], data.tree);
+              this.treeData = matterTree(d);
+              this.treeRootData = JSON.parse(JSON.stringify(this.treeData));
+              add({
+                tableName: "git",
+                data: { name: "treeData", data: d },
+              });
+              this.treeNodeModify();
+            }
+          });
+      } catch (error) {
+        console.log("获取vscode配置失败", error);
+      }
+    },
+
+    // 点击组件树触发的父组件方法。目前思路。
+    // ①如果是新增的文件，点击文件设置monaco编辑器内容为空
+    // ②如果是已经存在的文件，点击文件调取接口 this.handleFileInfo
+    //
+    handleChangFile(params, treeData) {
+      this.hideNbView = true;
+      const getContent = async () => {
+        const k = await readByMainKey({
+          tableName: "git",
+          key: encodeURI(params.filePath),
+        });
+        console.log("handleChangFile", treeData, params, k.d);
+        if (k.d) {
+          this.fileInfo = k.d;
+          this.monacaValue = k.d.newContent;
+          this.$refs.monaco.setLanguage(k.d.language)
+        } else if (params.sha) {
+          this.handleFileInfo(params);
+        } else {
+          this.monacaValue = "";
+        }
+      };
+      this.fileInfoParams = params;
+      getContent();
+
+      // const editorGetValue = Buffer.from(
+      //   `${this.$refs.monaco.getVal()}`
+      // ).toString("base64"); // 当前编辑器的值
+      // console.log("handleChangFile:",params,treeData)
+      // const BufferUtf = this.monacaValue; // 当前文件的值
+      // if (params.operation === "add") {
+      //   // 是新增并且还没有编辑
+      //   this.monacaValue = params.oldContent ? params.oldContent : "";
+      //   this.fileInfoParams = params;
+      //   this.pathname = params.name;
+      // } else if (params.sha && !params.oldContent) {
+      //   console.log("treeData", treeData);
+      //   this.handleFileInfo(params);
+      // } else if (editorGetValue && BufferUtf && editorGetValue !== BufferUtf) {
+      //   // 当前编辑器的内容是否原有内容一致
+      //   this.$confirm(
+      //     `当前${this.fileInfoParams.name}文件未保存, 是否继续?`,
+      //     "提示",
+      //     {
+      //       confirmButtonText: "确定",
+      //       cancelButtonText: "取消",
+      //       type: "warning",
+      //     }
+      //   )
+      //     .then(() => {
+      //       this.handleFileInfo(params);
+      //     })
+      //     .catch(() => {
+      //       console.log("取消成功");
+      //     });
+      // }
+    },
+
+    // 获取文件的内容
+    async handleFileInfo(params) {
+      try {
+        this.monacoLoading = true;
+        await this.$axios
+          .get(
+            `/api/v1/repos/${this.params.owner}/${this.params.project}/contents/${params.path}`
+          )
+          .then(({ status, data }) => {
+            if (status === "200" || status === 200) {
+              console.log("data:", data, data.language)
+              this.fileInfo = {...data};
+              this.monacoLoading = false;
+              params.oldcontent = data.content;
+              this.fileInfoParams = params;
+              this.pathname = data.name;
+              this.opts.language = data.language
+              this.$refs.monaco.setLanguage(data.language)
+              this.monacaValue = data.content;
+            }
+          });
+      } catch (error) {
+        this.monacoLoading = false;
+        console.log("获取文件信息失败", error);
+      }
+    },
+    // 提交/代码界面按钮切换事件
+    handleselect(value) {
+      this.hideNbView = true;
+      this.fileInfoParams = {};
+      this.diffData = {};
+      this.isDiff = value == 1 ? false : true;
+      this.$refs.monaco.setCloseDiff(true);
+      this.activeKey = value;
+    },
+    // 中间图标的拖拽
+    dragControllerDiv() {
+      const resize = document.getElementsByClassName("resize");
+      const left = document.getElementsByClassName("leftPaneBase");
+      const mid = document.getElementsByClassName("mid");
+      const box = document.getElementsByClassName("box");
+
+      for (let i = 0; i < resize.length; i++) {
+        // 鼠标按下事件
+        resize[i].onmousedown = (e) => {
+          //颜色改变提醒
+          // resize[i].style.background = '#818181';
+          var startX = e.clientX ;
+          resize[i].left = resize[i].offsetLeft ;
+          // 鼠标拖动事件
+          document.onmousemove = function (e) {
+            var endX = e.clientX;
+            var moveLen = resize[i].left + (endX - startX) - 60; // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
+            var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
+
+            if (moveLen < 132) moveLen = 132; // 左边区域的最小宽度为32px
+            // if (moveLen > maxT - 250) moveLen = maxT - 250; //右边区域最小宽度为150px
+
+            // resize[i].style.left = moveLen; // 设置左侧区域的宽度
+
+            for (let j = 0; j < left.length; j++) {
+              left[j].style.width = moveLen + "px";
+              mid[j].style.width = box[i].clientWidth - moveLen - 1 + "px";
+            }
+          };
+
+          // 鼠标松开事件
+          document.onmouseup =  (evt) => {
+            this.$refs.monaco.init(this.opts)
+
+            //颜色恢复
+            resize[i].style.background = "#d6d6d6";
+            document.onmousemove = null;
+            document.onmouseup = null;
+            resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
+          };
+          resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
+          return false;
+        };
+      }
+    },
+
+    // 更改语言
+    changeLanguage(val) {
+      this.opts.language = val;
+    },
+    // 更换主题
+    changeTheme(val) {
+      this.opts.theme = val;
+    },
+    // 手动获取值
+    getValue() {
+      console.log(`输出代码:${this.$refs.monaco.getVal()}`);
+    },
+    // 保存按钮的回调事件
+    handleSave(val) {
+      // this.monacaValue = Buffer.from(val).toString("base64");
+      const readvalue = async () => {
+        const k = await readByMainKey({
+          tableName: "git",
+          key: encodeURI(this.fileInfoParams.filePath),
+        });
+        if (k.d) {
+          if (!k.d.language)
+            k.d.language = this.opts.language;
+          k.d.fileType = this.fileInfo.fileType;
+          if (val === k.d.oldContent) {
+            remove({
+              tableName: "git",
+              key: encodeURI(this.fileInfoParams.filePath),
+            });
+          } else {
+            k.d.newContent = val;
+            add({
+              tableName: "git",
+              data: { name: encodeURI(this.fileInfoParams.filePath), d: k.d },
+            });
+          }
+        } else {
+          this.fileInfoParams.newContent = val;
+          this.fileInfoParams.language = this.fileInfo.language;
+          this.fileInfoParams.fileType = this.fileInfo.fileType;
+          add({
+            tableName: "git",
+            data: {
+              name: encodeURI(this.fileInfoParams.filePath),
+              d: this.fileInfoParams,
+            },
+          });
+        }
+        this.treeNodeModify();
+      };
+      readvalue();
+      // const base64Content = Buffer.from(val).toString("base64");
+      // if (this.fileInfoParams.operation === "add") {
+      //   // 说明这条是新增的
+      //   this.treeRootData = RecurveUpdateValue(
+      //     this.treeRootData,
+      //     this.fileInfoParams,
+      //     base64Content
+      //   );
+      //   this.treeNodeModify(this.treeRootData);
+      // }
+    },
+    async reload() {
+      this.containerReload = false;
+      await this.$nextTick();
+      this.containerReload = true;
+    },
+
+    handleSetting() {
+      this.drawerVisible = true;
+    },
+
+    handleChangeModelOptions(value) {
+      this.opts.theme = value;
+      this.$refs.monaco.setTheme(value)
+    },
+    handleChangeFontSizeOptions(value) {
+      this.opts.fontSize = value;
+      this.$refs.monaco.updateOptions(this.opts)
+    },
+
+    // 倒计时
+    countDown() {
+      let h = parseInt((this.headerParams.remainingTime / (60 * 60)) % 24);
+      h = h < 10 ? `0${h}` : h;
+      let m = parseInt((this.headerParams.remainingTime / 60) % 60);
+      m = m < 10 ? `0${m}` : m;
+      let s = parseInt(this.headerParams.remainingTime % 60);
+      s = s < 10 ? `0${s}` : s;
+      this.count = `${h}:${m}:${s}`;
+    },
+    // 定时器没过1秒参数减1
+    Time() {
+      this.timer = setInterval(() => {
+        this.headerParams.remainingTime -= 1;
+        if (this.headerParams.remainingTime === 0) clearInterval(this.timer);
+        this.countDown();
+      }, 1000);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.hides {
+  // visibility: hidden;
+  position: relative;
+  z-index: -1;
+}
+.showImg{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f1f1f1;
+}
+.showOffice,.showPdf{
+  width: 100%;
+  height: 100%;
+}
+.showOffice iframe,.showPdf embed{
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: white;
+}
+.showImg img{
+  max-height: 100%;
+  max-width:100%;
+}
+.ide-header {
+  background: #363840;
+  width: 100%;
+  height: 60px;
+  //border: 1px solid #363840;
+  display: flex;
+  padding-left: 32px;
+  justify-content: space-between;
+  align-items: center;
+
+
+  span {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 60px;
+    .ide-header-svg{
+      margin-right: 8px;
+      width: 13px;
+      height: 19px;
+    }
+  }
+}
+.el-icon-switch-button {
+  line-height: 60px;
+  margin-right: 20px;
+  cursor: pointer;
+  color: #FFFFFF;
+  font-size: 14px;
+}
+
+.inlineBlock {
+  display: inline-block;
+  float: left;
+}
+
+.menu-left {
+  display: inline-block;
+  width: 75px;
+  background-color: #F5F5F5;
+  height: calc(100vh - 60px);
+  //.menu-left-drag-img {
+  //  width: 24px;
+  //  height: 24px;
+  //}
+
+  .menu-left-drag {
+    li {
+      height: 70px;
+    }
+    &-svg{
+      height: 24px;
+      width: 30px;
+      color: #7A7A7B;
+      margin-bottom: 8px;
+    }
+  }
+  .el-menu {
+    border-right: none;
+
+    .el-menu-item {
+      padding: 10px 20px;
+      height: none;
+    }
+  }
+}
+.activeBack {
+  background: #ffffff !important;
+  padding: 19px 21px 45px 22px !important;
+  border: 1px solid #D4D4D5;
+  .menu-left-drag-svg{
+    color: #000000;
+  }
+}
+
+.leftPaneBase {
+  //background: #e6f1f6;
+  //border: 1px solid #dededf;
+  height: calc(100vh - 40px);
+
+  &-submit {
+    background: #F5F5F6;
+    border: 1px solid #D4D4D5;
+    height: 52px;
+    padding: 0 36px;
+    font-size: 14px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #000000;
+    line-height: 52px;
+  }
+
+  &-wrap {
+
+    &-change {
+      padding: 0 20px;
+      height: 54px;
+      line-height: 54px;
+      display: flex;
+      justify-content: space-between;
+      &-svg{
+        width: 16px;
+        height: 16px;
+      }
+      &-img {
+        cursor: pointer;
+        margin-top: 20px;
+      }
+    }
+
+    &-fileName {
+      height: calc(100vh - 508px);
+      overflow-y: auto;
+
+      &-item {
+        padding: 0 20px;
+        height: 34px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        line-height: 34px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        span {
+          cursor: pointer;
+        }
+
+        &-img {
+          cursor: pointer;
+          opacity: 0;
+        }
+      }
+
+      &-item:hover {
+        background: #F6F9FC;
+        span {
+          color: #409EFF;
+        }
+        .leftPaneBase-wrap-fileName-item-img {
+          opacity: 1;
+          color: #2285d0;
+        }
+      }
+    }
+
+    &-info {
+      padding: 0 20px;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #000000;
+      margin: 30px 0 10px;
+    }
+
+    &-input {
+      padding: 0 20px;
+      margin-bottom: 10px;
+
+      .el-textarea__inner {
+        background: #dae9f3;
+        max-height: 200p "max-content";
+        max-height: 200px;
+      }
+    }
+
+    &-infoSubmit {
+      width: 100%;
+      background: #363742;
+      border: 0px;
+    }
+  }
+}
+
+.resize {
+  //position: absolute;
+  //top: 145px;
+  //display: inline-block;
+  //width: 2px;
+  //height: calc(100% - 145px);
+  //border-radius: 5px;
+  //margin-top: -51px;
+  //cursor: pointer;
+  background: #dce3e8;
+  //background-position: center;
+  /* z-index: 99999; */
+  //font-size: 14px;
+  //color: white;
+  //margin-left: -1px;
+  //float: left;
+  //cursor: col-resize;
+  //z-index: 999;
+
+  position: absolute;
+  top: 160px;
+  display: inline-block;
+  width: 2px;
+  height: calc(100vh - 100px);
+  border-radius: 5px;
+  margin-top: -51px;
+  margin-left: -1px;
+  cursor: col-resize;
+  z-index: 999;
+}
+
+.mid {
+  float: left;
+  width: calc(100% - 300px);
+  /*右侧初始化宽度*/
+  height: calc(100vh - 42px);
+  background: #fff;
+  position: relative;
+}
+
+.box {
+  width: 100%;
+  overflow: hidden;
+}
+
+.empty-tip {
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  color: #999;
+}
+
+.mid-header {
+  height: 54px;
+  background: #f0f0f0;
+  border: 1px solid #dadadb;
+  line-height: 54px;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 20px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+
+  span:nth-child(2) {
+    .el-icon-s-tools {
+      margin-left: 5px;
+      cursor: pointer;
+    }
+  }
+}
+
+.drawer-wrap {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  .el-drawer {
+    background-color: #e6f1f6 !important;
+  }
+  .drawer-wrap-span{
+    height: 20px;
+    font-weight: 400;
+    color: #7A7A7B;
+    line-height: 20px;
+  }
+  .drawer-wrap-span2{
+    height: 20px;
+    font-weight: 400;
+    color: #000000;
+    line-height: 20px;
+  }
+}
+
+.code-fast {
+  font-weight: 500;
+  margin-bottom: 30px;
+  height: 20px;
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #000000;
+  line-height: 20px;
+}
+
+.drawer-section {
+  height: 100%;
+  //background: #e6f1f6;
+  background: #f0f0f0;
+  padding: 25px 26px 0;
+  .el-select {
+    width: 140px;
+    font-weight: 400;
+    color: #000000;
+  }
+  &-stydrawer-sectionle-wrap{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+  &-style {
+    border-bottom: 1px solid #b1bacd;
+    padding-bottom: 30px;
+    margin-bottom: 30px;
+
+    &-wrap {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+  }
+
+  .drawer-fast {
+    &-flex {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 14px;
+    }
+  }
+}
+
+.vscode-header {
+  display: flex;
+  justify-content: space-between;
+  line-height: 40px;
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  height: 40px;
+  padding: 0 20px;
+  background: #051019;
+}
+
+.color {
+  color: #f8cd47;
+}
+
+.mr5 {
+  margin-right: 5px;
+}
+
+.mr40 {
+  margin-right: 40px;
+}
+
+.cspointe {
+  cursor: pointer;
+}
+
+.iframe-wrap {
+  width: 100%;
+  height: calc(100vh - 40px);
+  border: none;
+}
+
+.vscode-loading-wrap {
+  width: 100%;
+  height: 100vh;
+}
+
+.no-commit {
+  color: #999;
+  text-align: center;
+  padding-top: 20px;
+}
+
+</style>
+<style scoped>
+/deep/.el-drawer{
+  box-shadow: none;
+}
+:focus{
+  outline: none;
+}
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+#nbview{
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 54px);
+  left:0;
+  top:54px;
+  z-index: 1;
+  background: #FFF;
+  border:none;
+}
+</style>
diff --git a/web_src/js/components/VueTreeList.vue b/web_src/js/components/VueTreeList.vue
index e69de29bb..8bb4c1464 100644
--- a/web_src/js/components/VueTreeList.vue
+++ b/web_src/js/components/VueTreeList.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="treeNode">
+    <span @click="addNode">添加节点</span>
+    <vue-tree-list
+      :model="data"
+      default-tree-node-name="new file"
+      default-leaf-node-name="new folder"
+      :default-expanded="false"
+      @click="onClick"
+      @change-name="onChangeName"
+      @delete-node="onDel"
+      @add-node="onAddNode"
+    />
+  </div>
+</template>
+
+<script>
+import {VueTreeList, Tree, TreeNode} from 'vue-tree-list';
+
+export default {
+  components: {
+    VueTreeList
+  },
+  props: {
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+    fileInfoParams: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      newTree: {},
+      fileParams: {}, // 文件相关的信息
+      data: new Tree([
+        {
+          name: 'Node 1',
+          id: 1,
+          pid: 0,
+          children: [
+            {
+              name: 'Node 1-2',
+              id: 2,
+              isLeaf: true,
+              pid: 0
+            }
+          ]
+        },
+        {
+          name: 'Node 2',
+          id: 3,
+          pid: 0,
+        },
+        {
+          name: 'Node 3',
+          id: 4,
+          pid: 0
+        }
+      ])
+    };
+  },
+  watch: {
+    treeData(val) {
+      this.data = new Tree(val);
+    },
+    fileInfoParams(val) {
+      this.fileParams = val;
+    }
+  },
+  mounted() {
+    console.log('treeData', this.data);
+  },
+  methods: {
+    onDel(node) {
+      const paramsInfo = [];
+      if (!node.children?.length > 0) { // 文件还是文件夹
+        paramsInfo[0] = {...node};
+      } else { // 文件夹
+        node.children.filter((item) => item.sha).map((items) => { // 过滤是新增的元素进行删除
+          paramsInfo.push({
+            filePath: items.path,
+            content: '',
+            name: items.name,
+            operation: 'delete'
+          });
+        });
+      }
+      this.$emit('deleteNode', paramsInfo);
+      node.remove();
+    },
+
+    onChangeName(params) {
+      console.log(params);
+    },
+
+    onAddNode(params) {
+      console.log(params, '节点还是树');
+    },
+
+    // 点击每个文件/夹事件
+    onClick(params) {
+      if (!params.isLeaf) return;
+      if (this.fileParams?.sha === params.sha) return;
+      this.$emit('handleChangFile', params);
+    },
+
+    addNode() {
+      console.log('我是子节点');
+      const node = new TreeNode({name: 'new node', isLeaf: false});
+
+      if (!this.data.children) this.data.children = [];
+      this.data.addChildren(node);
+    },
+  }
+};
+</script>
+
+<style lang="less" rel="stylesheet/less">
+  .vtl {
+    .vtl-drag-disabled {
+      background-color: #d0cfcf;
+      &:hover {
+        background-color: #d0cfcf;
+      }
+    }
+    .vtl-disabled {
+      background-color: #d0cfcf;
+    }
+  }
+</style>
+
+<style lang="less" rel="stylesheet/less" scoped>
+  .icon {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .muted {
+    color: gray;
+    font-size: 80%;
+  }
+</style>
+
+<style scoped>
+.treeNode{
+  padding:20px 20px 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/web_src/js/components/monacoeditor.vue b/web_src/js/components/monacoeditor.vue
index e69de29bb..afa86afb9 100644
--- a/web_src/js/components/monacoeditor.vue
+++ b/web_src/js/components/monacoeditor.vue
@@ -0,0 +1,214 @@
+
+<template>
+  <div ref="container" class="monaco-editor" style="height: calc(100vh - 42px)" />
+</template>
+
+<script>
+// import * as monaco from "monaco-editor";
+
+import "monaco-editor/min/vs/loader.js";
+import "monaco-editor/min/vs/editor/editor.main.nls.js";
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+// import "monaco-editor/esm/vs/basic-languages/mysql/mysql.contribution";
+// import "monaco-editor/esm/vs/editor/contrib/suggest/suggestController.js";
+// import "monaco-editor/esm/vs/editor/contrib/bracketMatching/bracketMatching.js";
+// import "monaco-editor/esm/vs/editor/contrib/hover/hover.js";
+import { isBase64 } from "../utils.js";
+export default {
+  name: "AcMonaco",
+  inject: ["reload"],
+  props: {
+    opts: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    height: {
+      type: Number,
+      default: 300,
+    },
+
+    monacaValue: {
+      type: String,
+      default: "false",
+    },
+    onChange: {
+      type: Function,
+      default: new Function
+    }
+  },
+  data() {
+    return {
+      isDiff: false,
+      // 主要配置
+      defaultOpts: {
+        lineNumbersMinChars: 0,
+        lineDecorationsWidth: 0,
+        glyphMargin: false,
+        value: "", // 编辑器的值
+        wordWrap: "on",
+        theme: "vs-dark", // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
+        roundedSelection: false, // 右侧不显示编辑器预览框
+        autoIndent: true, // 自动缩进
+        quickSuggestions: true, // 快速搜索
+
+        enableSplitViewResizing: false,
+        scrollBeyondLastLine: false,
+        quickSuggestions: false, //智能提示
+        renderLineHighlight: false, //选中行外部边框
+        lineHeight: 22
+
+      },
+
+      // 编辑器对象
+      monacoEditor: {},
+      oldValue: "123123/n\n",
+      newValue: "123121311111111",
+    };
+  },
+  watch: {
+    opts: {
+
+    },
+    monacaValue: {
+      handler(value) {
+        if(this.isDiff) return ;
+        const editor = this.monacoEditor
+        const output = isBase64(value)
+          ? Buffer.from(value, "base64").toString("utf8")
+          : value;
+        const positions = this.monacoEditor.getPosition()
+        this.monacoEditor.setValue(output);
+        this.monacoEditor.setPosition({
+          lineNumber: positions.lineNumber,
+          column: positions.column
+        })
+      },
+      deep: true
+    },
+    // monacaValue(value) {
+    //   alert(value)
+    //   console.log(isBase64);
+    //   const output = isBase64(value)
+    //     ? Buffer.from(value, "base64").toString("utf8")
+    //     : value;
+    //   this.monacoEditor.setValue(output);
+    // },
+  },
+  beforeDestroy() {
+    document.removeEventListener("keyup", this.onSaveHandler);
+  },
+  mounted() {
+    document.addEventListener("keyup", this.onSaveHandler, false);
+
+    this.init();
+  },
+  methods: {
+    init() {
+
+      // 初始化container的内容，销毁之前生成的编辑器
+      this.$refs.container.innerHTML = "";
+      // 生成编辑器配置
+      const editorOptions = Object.assign(this.defaultOpts, this.opts);
+      if (!this.isDiff) {
+        // 初始化编辑器实例
+        this.monacoEditor = monaco.editor.create(
+          this.$refs.container,
+          editorOptions
+        );
+        this.monacoEditor.onDidChangeModelContent(
+          event => {
+            this.$emit("onChange", this.monacoEditor.getValue())
+          },
+        );
+
+        // 编辑器内容发生改变时触发
+      } else {
+        editorOptions.readOnly = true;
+        editorOptions.language = "javascript";
+        // editorOptions.inlineHints = true;
+        // 初始化编辑器实例
+        this.monacoDiffInstance = monaco.editor.createDiffEditor(
+          this.$refs.container,
+          editorOptions
+        );
+        this.monacoDiffInstance.setModel({
+          original: monaco.editor.createModel(
+            this.oldValue,
+            editorOptions.language
+          ),
+          modified: monaco.editor.createModel(
+            this.newValue,
+            editorOptions.language
+          ),
+        });
+      }
+
+      if (this.monacaValue) {
+        const output = isBase64(this.monacaValue)
+          ? Buffer.from(value, "base64").toString("utf8")
+          : this.monacaValue;
+        this.monacoEditor.setValue(output);
+      }
+    },
+    upDateDiff(val) {
+      this.monacoDiffInstance.updateOptions({
+        renderSideBySide: !val,
+      });
+    },
+    onSaveHandler(e) {
+      if(this.isDiff) return;
+      if (
+        (window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) &&
+        e.keyCode === 83
+      ) {
+        e.preventDefault();
+        this.$emit("handleSave", this.monacoEditor.getValue());
+      }
+      this.$emit("handleSave", this.monacoEditor.getValue());
+    },
+    // 供父组件调用手动获取值
+    getVal() {
+      return this.monacoEditor.getValue();
+    },
+    setLanguage(lang) {
+      setTimeout(() => {
+        if (monaco.editor.setModelLanguage) {
+          monaco.editor.setModelLanguage(this.monacoEditor.getModel(), lang)
+        }
+      }), 300;
+      // alert(JSON.stringify(this.monacoEditor.getModel()))
+    },
+    updateOptions(opts) {
+      const editorOptions = Object.assign(this.defaultOpts, opts);
+      this.monacoEditor.updateOptions(editorOptions);
+    },
+    setTheme(theme) {
+      monaco.editor.setTheme(theme);
+    },
+    setDiff(oldContent, newContent) {
+      this.oldValue = isBase64(oldContent) ? Buffer.from(oldContent, "base64").toString("utf8") : oldContent;
+      this.newValue = newContent;
+      this.isDiff = true;
+      this.init();
+    },
+    setCloseDiff() {
+      if (this.isDiff) {
+        this.isDiff = false;
+        this.init();
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.margin-view-overlays {
+  background: #f5f5f5;
+}
+
+/* .view-lines {
+  padding-left: 10px;
+} */
+</style>
diff --git a/web_src/js/components/vueTree.vue b/web_src/js/components/vueTree.vue
index e69de29bb..e593fff90 100644
--- a/web_src/js/components/vueTree.vue
+++ b/web_src/js/components/vueTree.vue
@@ -0,0 +1,256 @@
+<template>
+  <div class="myTrees">
+    <el-tree
+      ref="tree"
+      :data="treeData"
+      node-key="filePath"
+      empty-text="暂无数据"
+      highlight-current
+      @node-click="handleLeftclick"
+    >
+      <div slot-scope="{ node , data }" class="custom-tree-node">
+        <span>
+          <i :class="getIcon(node.data)" />
+          {{ node.label }}
+        </span>
+        <span>
+          <el-dropdown trigger="click" class="el-dropdown"
+           v-show="!isLeaf && data.type == 'tree'"
+          >
+            <span class="el-dropdown-link">
+              <svg class="icon el-dropdown-svg" aria-hidden="true">
+                <use xlink:href="#icon-a-bianzu31"></use>
+              </svg>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                @click.native="addChildNode('leaf')"
+                >新建文件</el-dropdown-item
+              >
+              <el-dropdown-item
+                @click.native="addChildNode('')"
+                >新建文件夹</el-dropdown-item
+              >
+              <!-- <el-dropdown-item @click.native="deleteNode">删除</el-dropdown-item> -->
+            </el-dropdown-menu>
+          </el-dropdown>
+        </span>
+      </div>
+    </el-tree>
+  </div>
+</template>
+<!-- file-icon ide-icon word-icon dark-blue -->
+<link rel="stylesheet" href="/web_src/js/components/treeIcon.css" />
+<script>
+import {icons} from "./icons";
+console.log("icons:",icons)
+export default {
+  name: "List",
+  props: {
+    treeListData: {
+      type: Array,
+      default: () => [],
+    },
+    fileInfoParams: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      fileParams: {},
+      treeData: [],
+      isShow: false,
+      currentData: "",
+      currentNode: "",
+      menuVisible: false,
+      firstLevel: false,
+      lastLevel: false,
+      filterText: "",
+      isLeaf: false,
+    };
+  },
+  watch: {
+    treeListData(val) {
+      this.treeData = val;
+    },
+    fileInfoParams(val) {
+      this.fileParams = val;
+    },
+  },
+
+  methods: {
+    // 鼠标左击事件
+    handleLeftclick(data, node) {
+      this.currentData = data;
+      this.currentNode = node;
+      this.firstLevel = false;
+      this.isLeaf = data.isLeaf;
+      this.lastLevel = false;
+      if (data.type === 'tree') return;
+      // if (data.sha) {
+      this.$emit("handleChangFile", data, this.treeData);
+      // }
+    },
+    getIcon(data){
+      console.log("data:",data.name.split("."))
+      let icon = '';
+      if(data.type === 'tree'){
+        return 'fa fa-folder ide-icon ide-icon-folder'
+      }
+      try {
+        let suffix = data.name.split(".").pop();
+        if(data.name.indexOf(".") > -1){
+          suffix = "." + suffix
+        }
+        icons.forEach(element => {
+            if(element[2].test(suffix)){
+              icon = element[0] + ' ' + element[1].join(' ');
+              throw('')
+            }
+        })
+      } catch (error) {
+
+      }
+      return "file-icon ide-icon " + icon;
+    },
+
+    // 增加子级节点事件
+    addChildNode(shape) {
+      const id = Math.ceil(Math.random() * 100);
+      this.$prompt("请输入名称", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+      })
+        .then(({ value }) => {
+          if (value.trim().indexOf("") === -1)
+            return this.$message.warning("名称不能包含空格！");
+          const treeD = {
+            id,
+            label: value,
+            operation: "add",
+            isEdit: true,
+            type: shape === "leaf" ? "blob" : "tree",
+            filePath: `${this.currentData.filePath}/${value}`,
+            isLeaf: shape === "leaf",
+            name: value,
+            fileType:"txt",
+            children: [],
+          };
+          if(shape === "leaf"){
+            treeD.content = "";
+            treeD.oldContent = "";
+            treeD.newContent = "";
+            treeD.fileType = 'txt'
+          }
+          treeD.path = treeD.filePath;
+          this.$refs.tree.append(treeD, this.currentData.filePath);
+          this.$emit("handleAddNode", treeD, this.currentData.filePath); // 触发父组件更改提交界面的数据变化
+        })
+        .catch(() => {});
+    },
+    // 删除节点
+    deleteNode() {
+      this.$confirm(`确定删除当前文件,是否继续?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          if (this.currentData.isLeaf) {
+            // isLeaf为true 代表文件类型
+            if (this.currentData.operation === "add") {
+              // 新增的节点删去
+              this.$emit("handleDeleteAddNode", this.currentData);
+            } else if (this.currentData.sha) {
+              // 原本存在的数据 触发父组件更新已存在数据的状态
+              this.$emit("handleDeleteOldNode", this.currentData);
+            }
+          }
+          this.$refs.tree.remove(this.currentNode);
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+@import "./treeIcon.css";
+.myTrees {
+  /*background: transparent;*/
+  height: 100%;
+  overflow: auto;
+  background: #FFFFFF;
+}
+.el-tree {
+  /* padding: 20px; */
+  /*background: transparent;*/
+  background: #FFFFFF;
+  color: black;
+}
+.el-tree .is-current{
+  background: #f5f7fa;
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 8px;
+  font-size: 14px;
+  height: 34px;
+  line-height: 34px;
+  .el-dropdown-svg{
+    height: 16px;
+    width: 16px;
+    color: #979797;
+  }
+  .el-dropdown-svg:hover{
+    color: #007aff;
+  }
+}
+/deep/ .el-tree-node__content{
+  height: 34px;
+  line-height: 34px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+}
+/deep/ .el-tree-node.is-current > .el-tree-node__content{
+  background: #F5F7FA;
+  color: #2285D0 !important;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #2285D0;
+}
+.el-dropdown-menu{
+  padding: 0px !important;
+}
+.el-popper[x-placement^=bottom] .popper__arrow {
+  display: none !important;
+}
+.el-dropdown-menu__item{
+  color: #333333 !important;
+  height: 34px !important;
+}
+li.el-dropdown-menu__item:hover {
+  background: #f2f2f2 !important;
+}
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+<style>
+  .myTrees .el-tree-node__expand-icon{
+    visibility: hidden;
+  }
+  .monaco-editor .line-numbers{
+    color: #999;
+  }
+</style>