wangwei
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: b8cd291ff7
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'b8cd291ff7'
${ noResults }
aiforge/web_src/js/components/IdeProject.vue

1413 lines
43 kB
Raw Blame History 

  1. <template>

  2.   <div style="overflow: hidden">

  3.     <div v-if="params.type === 'ide'">

  4.       <div class="ide-header">

  5.         <span>

  6.           <svg class="icon ide-header-svg" aria-hidden="true">

  7.             <use xlink:href="#icon-wenjianbeifen"></use>

  8.           </svg>

  9.           {{ `${params.owner}/${params.project}` }}

  10.         </span>

  11.         <i class="el-icon-switch-button" @click="handleBack" />

  12.       </div>

  13.       <div style="display: flex">

  14.         <div class="menu-left">

  15.           <el-menu :default-active="activeKey" class="menu-left-drag-item-drag" background-color="#F5F5F5" text-color="#7A7A7B" active-text-color="#000" @select="handleselect">

  16.             <el-menu-item index="1" style="line-height: 20px;height: 90px;padding: 20px 22px 46px 23px;" :class="{ activeBack: isActiveStatus }">

  17. <!--              <img class="menu-left-drag-img" :src="isActiveStatus ? code1 : code2" alt="" />-->

  18.               <svg class="icon menu-left-drag-svg" aria-hidden="true">

  19.                 <use xlink:href="#icon-daima1"></use>

  20.               </svg>

  21.               <div slot="title">代码</div>

  22.             </el-menu-item>

  23.             <el-menu-item index="2" style="line-height: 20px;height: 90px;background-color: #F5F5F5;padding: 20px 22px 46px 23px;" :class="{ activeBack: activeKey === '2' }">

  24. <!--              <img class="menu-left-drag-img" :src="isActiveStatus ? submitLog2 : submitLog1" alt="" />-->

  25.               <svg class="icon menu-left-drag-svg" aria-hidden="true">

  26.                 <use xlink:href="#icon-tijiao"></use>

  27.               </svg>

  28.               <div slot="title">提交</div>

  29.             </el-menu-item>

  30.           </el-menu>

  31.         </div>

  32.         <div ref="box" class="box">

  33.           <div class="inlineBlock leftPaneBase" :style="{ width: leftPanelWidth }">

  34.             <div class="leftPaneBase-submit">

  35. <!--              <img class="mr5" :src="isActiveStatus ? warehouse : submit" alt="" />-->

  36.               {{ isActiveStatus ? "代码仓库" : "提交" }}

  37.             </div>

  38.             <VueTree v-show="isActiveStatus" :tree-list-data="treeData" :file-info-params="fileInfoParams"

  39.               @handleChangFile="handleChangFile" @deleteNode="handleNode" @handleAddNode="handleAddNode"

  40.               @handleDeleteAddNode="handleDeleteAddNode" @handleDeleteOldNode="handleDeleteOldNode" />

  41.             <div v-show="!isActiveStatus && inCludeSub" class="leftPaneBase-wrap">

  42.               <div class="leftPaneBase-wrap-change">

  43.                 <span style="font-weight: 400;">更改</span>

  44.                 <el-tooltip class="item" effect="dark" content="放弃所有更改" placement="bottom-end">

  45. <!--                  <img class="leftPaneBase-wrap-change-img" :src="abandon" alt="" @click="handleResetAll()" />-->

  46.                   <svg class="icon leftPaneBase-wrap-change-img leftPaneBase-wrap-change-svg " aria-hidden="true" @click="handleResetAll()" >

  47.                     <use xlink:href="#icon-zhongzhi3"></use>

  48.                   </svg>

  49.                 </el-tooltip>

  50.               </div>

  51.             </div>

  52.             <div class="leftPaneBase-wrap" v-show="!isActiveStatus && inCludeSub">

  53.               <div class="leftPaneBase-wrap-fileName">

  54.                 <div v-show="!submitAarry.length" class="no-commit">

  55.                   当前没有可提交的文件

  56.                 </div>

  57.                 <div v-show="(!!submitAarry.length && item.type === 'blob')" v-for="item in submitAarry" :key="item.sha"

  58.                   class="leftPaneBase-wrap-fileName-item">

  59.                   <span @click="handleDiff(item)">{{ item.name }}</span>

  60.                   <el-tooltip class="item" effect="dark" content="放弃更改" placement="bottom-end">

  61. <!--                    <img :src="abandon" alt="" @click="handleload(item)" />-->

  62.                     <svg class="icon leftPaneBase-wrap-fileName-item-img leftPaneBase-wrap-change-svg" @click="handleload(item)" aria-hidden="true">

  63.                       <use xlink:href="#icon-zhongzhi3"></use>

  64.                     </svg>

  65.                   </el-tooltip>

  66.                 </div>

  67.               </div>

  68.             </div>

  69.             <div style="width: 100%;padding: 0 20px;" >

  70.               <div style="border-bottom: 1px solid #b1bacd;"></div>

  71.             </div>

  72.             <div v-show="!isActiveStatus && inCludeSub" class="leftPaneBase-wrap">

  73.               <div class="leftPaneBase-wrap-info">提交信息</div>

  74.               <el-input :disabled="!submitAarry.length" v-model="textContent" class="leftPaneBase-wrap-input"

  75.                 type="textarea" :rows="10" placeholder="请输入提交信息" />

  76.               <div style="width: 100%; padding: 0 20px;">

  77.                 <el-button :disabled="!submitAarry.length" v-loading="subLoading" type="primary"

  78.                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"

  79.                            class="leftPaneBase-wrap-infoSubmit" @click="handleSubmit">

  80.                   提交

  81.                 </el-button>

  82.               </div>

  83.             </div>

  84.           </div>

  85.           <!-- <img :src="drag" alt="" title="收缩侧边栏" class="resize" /> -->

  86.           <div class="resize" title="收缩侧边栏"></div>

  87.           <div class="inlineBlock mid">

  88.             <div class="mid-header">

  89.               <span>{{ isDiff ? "" : fileInfoParams.path }}</span>

  90.               <div>

  91.                 <span v-if="fileInfo.fileType === 'ipynb' && !hideNbView " style="cursor:pointer;margin-right:20px" @click="handleEdit">

  92.                   修改

  93.                   <i class="el-icon-edit" />

  94.                 </span>

  95.                 <span v-if="fileInfo.fileType === 'ipynb' && hideNbView " style="cursor:pointer;margin-right:20px" @click="handleEdit">

  96.                   预览

  97.                   <i class="el-icon-view" />

  98.                 </span>

  99.                 <span style="cursor:pointer" @click="handleSetting">设置<i class="el-icon-s-tools" /></span>

  100.               </div>

  101.             </div>

  102.             <!-- <codemirror /> -->

  103.             <div v-show="!fileInfoParams.filePath" class="empty-tip">

  104.               <img width="200" :src="empty" />

  105.               请在左侧文件树中选择一个文件，编辑后即可提交你的修改

  106.             </div>

  107.             <div v-if="containerReload">

  108.               <div class="showImg" v-if="fileInfo.fileType === 'image'" >

  109.                 <img :src="fileInfo.download_url" />

  110.               </div>

  111.               <div class="showImg" v-else-if="fileInfo.fileType === 'office'" >

  112.                 <el-button type="primary" @click="downloadUrl(fileInfo.download_url)"><a style="color:white" :href="fileType && fileType.download_url">下载</a></el-button>

  113.               </div>

  114.               <div class="showPdf" v-else-if="fileInfo.fileType === 'pdf'" >

  115.                 <embed :src="fileInfo.download_url" />

  116.               </div>

  117.               <div class="showImg" v-else-if="fileInfo.download_url && fileInfo.fileType !== 'txt' && fileInfo.fileType !== 'ipynb'">

  118.                 <el-button type="primary" @click="downloadUrl(fileInfo.download_url)"><a style="color:white" :href="fileType && fileType.download_url">下载</a></el-button>

  119.               </div>

  120.               <div :class="(fileInfo.fileType === 'txt' || fileInfo.fileType === 'ipynb') ? '' : 'hides'">

  121.                 <iframe v-if="(fileInfo.fileType === 'ipynb' && !hideNbView && !isDiff)" src="/html/js/nbview/index.html" id="nbview" @load="loadFrame()"></iframe>

  122.                 <monaco ref="monaco" v-loading="monacoLoading" element-loading-text="拼命加载中"

  123.                   element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)"

  124.                   :opts="opts" :is-diff="isDiff" :monaca-value="monacaValue" @handleSave="handleSave" />

  125.               </div>

  126.             </div>

  127. 

  128.           </div>

  129.         </div>

  130.         <el-drawer style="height: calc(100vh - 94px); margin-top: 94px" class="drawer-wrap"

  131.           :visible.sync="drawerVisible" direction="rtl" destroy-on-close size="270" :show-close="false"

  132.           :with-header="false" :modal="false">

  133.           <div class="drawer-section">

  134.             <div class="drawer-section-style" style="padding-bottom:10px;">

  135.               <div class="code-fast">代码格式</div>

  136.               <div class="drawer-section-stydrawer-sectionle-wrap">

  137.                 <span class="drawer-wrap-span">显示模式</span>

  138.                 <el-select v-model="opts.theme" size="mini" placeholder="请选择" @change="handleChangeModelOptions">

  139.                   <el-option v-for="item in modeOptions" :key="item.value" :label="item.label" :value="item.value" />

  140.                 </el-select>

  141.               </div>

  142.               <div class="drawer-section-style-wrap">

  143.                 <span  class="drawer-wrap-span">字体大小</span>

  144.                 <el-select v-model="opts.fontSize" size="mini" placeholder="请选择" @change="handleChangeFontSizeOptions">

  145.                   <el-option v-for="item in fontSizeOptions" :key="item.value" :label="item.label" :value="item.value" />

  146.                 </el-select>

  147.               </div>

  148.               <!-- <div class="drawer-section-style-wrap">

  149.                 <span>Tab转换</span>

  150.                 <el-switch v-model="switchValue" active-color="#2185D0" inactive-color="#858585" />

  151.               </div> -->

  152.             </div>

  153.             <div class="drawer-fast">

  154.               <div class="code-fast">快捷键</div>

  155.               <div class="drawer-fast-flex">

  156.                 <span  class="drawer-wrap-span">保存代码</span><span class="drawer-wrap-span2">Ctrl + S</span>

  157.               </div>

  158.               <div class="drawer-fast-flex">

  159.                 <span  class="drawer-wrap-span">唤出快捷键列表</span><span class="drawer-wrap-span2">F1/Alt + F1</span>

  160.               </div>

  161.               <div class="drawer-fast-flex">

  162.                 <span  class="drawer-wrap-span">左右缩进</span><span class="drawer-wrap-span2">Ctrl + ]/[</span>

  163.               </div>

  164.             </div>

  165.           </div>

  166.         </el-drawer>

  167.       </div>

  168.     </div>

  169.     <div v-else v-loading="loading" class="vscode-loading-wrap" element-loading-text="拼命加载中"

  170.       element-loading-spinner="el-icon-loading">

  171.       <div class="vscode-header">

  172.         <span>{{ `${params.owner}/${params.project}` }}</span>

  173.         <div class="vscode-header-right">

  174.           <div class="color inlineBlock mr40">

  175.             <i class="el-icon-time" />

  176.             <span class="vscode-header-right-text">{{ count }}</span>

  177.           </div>

  178.           <dvi class="inlineBlock mr40 cspointe">

  179.             <i class="el-icon-s-cooperation" />

  180.             <span class="vscode-header-right-text" @click="handleReset">重置环境</span>

  181.           </dvi>

  182.           <i class="el-icon-switch-button cspointe" @click="handleBack" />

  183.         </div>

  184.       </div>

  185.       <div>

  186.         <iframe v-if="headerParams.url" class="iframe-wrap" :src="headerParams.url" />

  187.       </div>

  188.     </div>

  189.   </div>

  190. </template>

  191. <script>

  192. // import VueTreeList from './VueTreeList.vue';

  193. const API = "http://121.40.129.71:48991";

  194. import VueTree from "./vueTree.vue";

  195. import {

  196.   matterTree,

  197.   RecurveQuery,

  198.   RecurveQueryDelete,

  199.   RecurveAddNode,

  200.   RecurveUpdateValue,

  201.   uniqueArray,

  202. } from "../utils.js";

  203. import monaco from "./monacoeditor.vue";

  204. import code1 from "../../../public/images/code1.png";

  205. import empty from "../../../public/img/empty.png";

  206. import code2 from "../../../public/images/code2.png";

  207. import submitLog2 from "../../../public/images/submitLog2.png";

  208. import submitLog1 from "../../../public/images/submitLog1.png";

  209. import abandon from "../../../public/images/abandon.png";

  210. import warehouse from "../../../public/images/warehouse.png";

  211. import submit from "../../../public/images/submit.png";

  212. import drag from "../../../public/images/drag.png";

  213. import {

  214.   init,

  215.   add,

  216.   readAll,

  217.   readByMainKey,

  218.   deleteDB,

  219.   update,

  220.   remove,

  221. } from "./db.js";

  222. 

  223. export default {

  224.   name: "IdeProject",

  225.   components: {

  226.     // codemirror,

  227.     monaco,

  228.     // VueTreeList,

  229.     VueTree,

  230.   },

  231.   data() {

  232.     return {

  233.       activeKey: "1",

  234.       drawerVisible: false,

  235.       fileInfo: {},

  236.       // 图片

  237.       code1,

  238.       code2,

  239.       empty,

  240.       submitLog1,

  241.       submitLog2,

  242.       abandon,

  243.       warehouse,

  244.       submit,

  245.       drag,

  246.       // 图片

  247. 

  248.       leftPanelWidth: "300px",

  249.       modeOptions: [

  250.         { label: "light", value: "vs" },

  251.         { label: "dark", value: "vs-dark" },

  252.       ],

  253.       fontSizeOptions: [

  254.         { label: "14px", value: 14 },

  255.         { label: "16px", value: 16 },

  256.         { label: "18px", value: 18 },

  257.         { label: "20px", value: 20 },

  258.         { label: "22px", value: 22 },

  259.       ],

  260.       textContent: "", // 文本域输入框的值

  261.       monacaValue: "", // monaca编辑器的值

  262.       fileInfoParams: {}, //  所点击的文件以及参数

  263.       monacoLoading: false,

  264.       sets: {

  265.         language: {

  266.           apex: "apex",

  267.           azcli: "azcli",

  268.           bat: "bat",

  269.           c: "c",

  270.           clojure: "clojure",

  271.           coffeescript: "coffeescript",

  272.           cpp: "cpp",

  273.           csharp: "csharp",

  274.           csp: "csp",

  275.           css: "css",

  276.           dockerfile: "dockerfile",

  277.           fsharp: "fsharp",

  278.           go: "go",

  279.           graphql: "graphql",

  280.           handlebars: "handlebars",

  281.           html: "html",

  282.           ini: "ini",

  283.           java: "java",

  284.           javascript: "javascript",

  285.           json: "json",

  286.           kotlin: "kotlin",

  287.           less: "less",

  288.           lua: "lua",

  289.           markdown: "markdown",

  290.           msdax: "msdax",

  291.           mysql: "mysql",

  292.           "objective-c": "objective-c",

  293.           pascal: "pascal",

  294.           perl: "perl",

  295.           pgsql: "pgsql",

  296.           php: "php",

  297.           plaintext: "plaintext",

  298.           postiats: "postiats",

  299.           powerquery: "powerquery",

  300.           powershell: "powershell",

  301.           pug: "pug",

  302.           python: "python",

  303.           r: "r",

  304.           razor: "razor",

  305.           redis: "redis",

  306.           redshift: "redshift",

  307.           ruby: "ruby",

  308.           rust: "rust",

  309.           sb: "sb",

  310.           scheme: "scheme",

  311.           scss: "scss",

  312.           shell: "shell",

  313.           sol: "sol",

  314.           sql: "sql",

  315.           st: "st",

  316.           swift: "swift",

  317.           tcl: "tcl",

  318.           typescript: "typescript",

  319.           vb: "vb",

  320.           xml: "xml",

  321.           yaml: "yaml",

  322.         },

  323.         theme: {

  324.           vs: "vs",

  325.           "vs-dark": "vs-dark",

  326.           "hc-black": "hc-black",

  327.         },

  328.         colorDecorators: true,

  329.         comments: {

  330.           ignoreEmptyLines: true, // 插入行注释时忽略空行。默认为真。

  331.           insertSpace: true, // 在行注释标记之后和块注释标记内插入一个空格。默认为真。

  332.         },

  333.       },

  334.       opts: {

  335.         value: "",

  336.         diffData: {},

  337.         readOnly: false, // 是否可编辑

  338.         language: "", // 语言类型

  339.         theme: "vs", // 编辑器主题

  340.         selectOnLineNumbers: true,

  341.         roundedSelection: false,

  342.         // readOnly: this.readOnly, // 只读

  343.         cursorStyle: "line", // 光标样式

  344.         automaticLayout: false, // 自动布局

  345.         glyphMargin: true, // 字形边缘

  346.         useTabStops: false,

  347.         fontSize: 14, // 字体大小

  348.         autoIndent: false, // 自动布局

  349.       },

  350.       hideNbView:false,

  351.       isDiff: false,

  352.       inlineDiff: false,

  353.       containerReload: true,

  354.       switchValue: false,

  355.       loading: true,

  356.       treeData: [], // 子组件的数据

  357.       pathname: "", // 编辑文件的文件名

  358.       submitAarry: [], // 提交时候数组数据

  359.       subLoading: false,

  360.       treeRootData: [], // 文件树的节点

  361.       /** 以下为vscode的初始变量 */

  362.       params: this.$route.query, // 从项目列表进来 type === ide | vscode 前者是编辑 后者是嵌套

  363.       headerParams: {

  364.         remainingTime: 0,

  365.         url: "",

  366.       }, // 包含src的url + 倒计时的remainingTime

  367.       count: "00:00:00",

  368.       timer: null,

  369.       // eslint-disable-next-line semi

  370.     };

  371.   },

  372.   computed: {

  373.     isActiveStatus() {

  374.       // 计算当前的activeKey为提交 还是 代码界面

  375.       return this.activeKey === "1";

  376.     },

  377.     inCludeSub() {

  378.       // 计算提交界面的数据是否有数据

  379.       return true;

  380.     },

  381.   },

  382.   mounted() {

  383.     if (this.params.type === "vscode") {

  384.       this.getVscodeData();

  385.     } else {

  386.       this.getCodeTree();

  387.     }

  388.     init({

  389.       // 数据库名称

  390.       dbName: this.params.project,

  391.       // 数据表 数组 如果要创建多个表，则写多个即可

  392.       tableList: [

  393.         {

  394.           // 表名

  395.           tableName: "git",

  396.           // 主键

  397.           keyPath: "name",

  398.           // 对应表的其他属性

  399.           // attr:{

  400.           //    autoIncrement:true, //是否自增

  401.           // },

  402.           indexName: "index", // 索引 不建议使用 因为使用索引 当前表必须有数据否则直接报错

  403.           // unique:false // 对应索引是否唯一

  404.         },

  405.       ],

  406.     });

  407.     this.dragControllerDiv();

  408.   },

  409.   provide() {

  410.     return {

  411.       reload: this.reload,

  412.     };

  413.   },

  414.   methods: {

  415.     handleDiff(data) {

  416.       this.fileInfoParams = data;

  417.       this.fileInfo = data;

  418.       console.log("handleDiff:", this.fileInfoParams);

  419.       this.$refs.monaco.setDiff(data.oldcontent, data.newContent);

  420.     },

  421.     downloadUrl(string){

  422.       window.location.href = string;

  423.     },

  424.     // 更新提交界面的数据状态

  425.     treeNodeModify(data) {

  426.       const getData = async () => {

  427.         const data = await readAll("git");

  428.         console.log("data:", data);

  429.         if (data && Array.isArray(data)) {

  430.           this.submitAarry = data

  431.             .filter(

  432.               (name) =>

  433.                 name.name !== "treeData" && name.name !== "undefined" && name.d

  434.             )

  435.             .map((item) => item.d);

  436.           console.log("this.submitAarry:", this.submitAarry);

  437.         }

  438.       };

  439.       getData();

  440.       // const newSubArray = [];

  441.       // function findModifyObj(data) {

  442.       //   data.forEach((item) => {

  443.       //     if (item.isLeaf && item.operation) {

  444.       //       newSubArray.push(item);

  445.       //     } else {

  446.       //       findModifyObj(item.children);

  447.       //     }

  448.       //   });

  449.       // }

  450.       // findModifyObj(data);

  451.     },

  452.     // 新增文件

  453.     handleAddNode(treeD, filePath) {

  454.       this.treeRootData = RecurveAddNode(this.treeRootData, treeD, filePath);

  455.       this.updateData(treeD);

  456. 

  457.       setTimeout(async () => {

  458.         await add({

  459.           tableName: "git",

  460.           data: { name: "treeData", data: [...this.treeRootData] },

  461.         });

  462.         this.treeNodeModify(this.treeRootData);

  463.       })

  464.     },

  465. 

  466.     updateData(d) {

  467.       // const k = await readByMainKey({ tableName: "git", key: "treeData" });

  468.       // const d = { ...k, ...data };

  469.       // this.treeData = matterTree(d.tree);

  470.       // this.treeRootData = JSON.parse(JSON.stringify(this.treeData));

  471.       console.log("updateData:", d);

  472.       add({

  473.         tableName: "git",

  474.         data: { name: encodeURI(d.filePath), d },

  475.       });

  476.     },

  477. 

  478.     loadFrame(){

  479.       document.getElementById("nbview").contentWindow.postMessage(this.fileInfo, '*');

  480.     },

  481.     // 删除新增的文件

  482.     handleDeleteAddNode(valueNode) {

  483.       this.treeRootData = RecurveQueryDelete(

  484.         this.treeRootData,

  485.         valueNode.filePath

  486.       );

  487.       this.treeNodeModify(this.treeRootData);

  488.     },

  489.     // 删除已有的文件

  490.     handleDeleteOldNode(valueNode) {

  491.       this.treeRootData = RecurveQuery(this.treeRootData, valueNode.filePath);

  492.       this.treeNodeModify(this.treeRootData);

  493.     },

  494.     clearAllData() {

  495.       const clear = async () => {

  496.         const data = await readAll("git");

  497.         if (data && Array.isArray(data)) {

  498.           this.fileInfoParams.filePath = null

  499.           this.submitAarry = data.map((item) => {

  500.             // if (item.d) {

  501.             remove({

  502.               tableName: "git",

  503.               key: encodeURI(item.name),

  504.             });

  505.             // }

  506.           });

  507.           console.log("this.submitAarry:", this.submitAarry);

  508.         }

  509.         setTimeout(() => {

  510.           this.treeNodeModify();

  511.         }, 200);

  512.       };

  513.       clear();

  514.     },

  515.     // 放弃所有更改

  516.     handleResetAll() {

  517.       this.$confirm(`确定要放弃所有文件的更改吗?`, "提示", {

  518.         confirmButtonText: "确定",

  519.         cancelButtonText: "取消",

  520.         type: "warning",

  521.       })

  522.         .then(async () => {

  523.           // this.handleFileInfo(params);

  524.           console.log("this2222222:", this.clearAllData, this)

  525.           this.clearAllData();

  526.           this.isDiff = false;

  527.           this.$refs.monaco.setCloseDiff(false);

  528.         })

  529.         .catch(() => {

  530.           console.log("取消成功");

  531.         });

  532.     },

  533.     handleEdit(){

  534.       const value = this.$refs.monaco.getVal();

  535.       this.fileInfo.newContent = value;

  536.       this.hideNbView = !this.hideNbView

  537.     },

  538.     // 放弃单个的更改---逻辑未处理

  539.     handleload(value) {

  540.       console.log("value", value);

  541.       this.$confirm(`确定要放弃 ${value.path} 中的更改吗?`, "提示", {

  542.         confirmButtonText: "确定",

  543.         cancelButtonText: "取消",

  544.         type: "warning",

  545.       })

  546.         .then(() => {

  547.           // this.handleFileInfo(params);

  548.           // if (value.sha) {

  549.             remove({

  550.               tableName: "git",

  551.               key: encodeURI(value.path),

  552.             });

  553.             this.treeNodeModify();

  554.           // }

  555.         })

  556.         .catch(() => {

  557.           console.log("取消成功");

  558.         });

  559.     },

  560. 

  561.     // 提交事件。 接口地址：https://www.apifox.cn/apidoc/shared-906bc1af-5c25-4b9d-b0e0-4d1176ffe4a9/api-30499442。operation为update/add/delete三种

  562.     async handleSubmit() {

  563.       if (!this.textContent.trim())

  564.         return this.$message.warning("提交信息不能为空!");

  565.       try {

  566.         this.subLoading = true;

  567.         await this.$axios

  568.           .post(

  569.             `/api/v1/repos/${this.params.owner}/${this.params.project}/contents/commit`,

  570.             {

  571.               files: this.submitAarry?.filter(item => item.type === "blob")?.map((item) => {

  572.                 // item.content = Buffer.from(item.newContent).toString("base64");

  573.                 // item.operation = "update";

  574.                 console.log("tem.newContent:",item.newContent,item)

  575.                 return {

  576.                   filePath: item.path,

  577.                   content: Buffer.from(item.newContent).toString("base64"),

  578.                   operation: item.sha ? "update" : "add",

  579.                 };

  580.               }),

  581.               msg: this.textContent,

  582.             }

  583.           )

  584.           .then(({ status }) => {

  585.             if (status === "200" || status === 200) {

  586.               this.subLoading = false;

  587.               this.submitAarry = []; // 提交的列表

  588.               this.$message.success("提交成功!");

  589.               this.textContent = "";

  590. 

  591.               this.clearAllData();

  592.               this.getCodeTree();

  593.             }

  594.           });

  595.       } catch (error) {

  596.         this.subLoading = false;

  597.         console.log("error", error);

  598.       }

  599.     },

  600. 

  601.     // 演示

  602.     async handleReset() {

  603.       this.$confirm(`确定要重置环境吗?`, "提示", {

  604.         confirmButtonText: "确定",

  605.         cancelButtonText: "取消",

  606.         type: "warning",

  607.       })

  608.         .then(async () => {

  609.           this.loading = true

  610.           this.headerParams = {}

  611.           await this.$axios

  612.             .post(`${API}/vscode/delete`, {

  613.               projectId: this.params.project,

  614.               userId: this.params.owner,

  615.             })

  616.             .then(({ status, data: { data } }) => {

  617.               if (status === "200" || status === 200) {

  618.                 this.getVscodeData();

  619.               } else {

  620.                 this.$message({

  621.                   message: '重置环境失败',

  622.                   type: 'warning'

  623.                 });

  624.               }

  625.             });

  626.         })

  627.         .catch(() => {

  628.           console.log("取消成功");

  629.         });

  630. 

  631.     },

  632. 

  633.     // 重置环境

  634.     async handleReset() {

  635.       this.$confirm(`确定要重置环境吗?`, "提示", {

  636.         confirmButtonText: "确定",

  637.         cancelButtonText: "取消",

  638.         type: "warning",

  639.       })

  640.         .then(async () => {

  641.           this.loading = true

  642.           this.headerParams = {}

  643.           await this.$axios

  644.             .post(`${API}/vscode/delete`, {

  645.               projectId: this.params.project,

  646.               userId: this.params.owner,

  647.             })

  648.             .then(({ status, data: { data } }) => {

  649.               if (status === "200" || status === 200) {

  650.                 this.getVscodeData();

  651.               } else {

  652.                 this.$message({

  653.                   message: '重置环境失败',

  654.                   type: 'warning'

  655.                 });

  656.               }

  657.             });

  658.         })

  659.         .catch(() => {

  660.           console.log("取消成功");

  661.         });

  662. 

  663.     },

  664.     // 返回按钮

  665.     handleBack() {

  666.       // this.$router.go(-1);

  667.       this.$confirm(`确定要退出编辑吗?`, "提示", {

  668.         confirmButtonText: "确定",

  669.         cancelButtonText: "取消",

  670.         type: "warning",

  671.       })

  672.         .then(async () => {

  673.           window.location.href = `/${this.params.owner}/${this.params.project}`

  674.         })

  675.         .catch(() => {

  676.           console.log("取消成功");

  677.         });

  678.     },

  679.     // 获取vscode界面的接口

  680.     async getVscodeData() {

  681.       try {

  682.         await this.$axios

  683.           .post(`http://121.40.129.71:48991/vscode/getVscode`, {

  684.             projectId: this.params.project,

  685.             userId: this.params.owner,

  686.             containers:

  687.               "W3siaW1hZ2UiOiJ2c2NvZGUtd3c6djEuMCIsImNwdUxpbWl0IjoyLjAsImNwdVJlcXVlc3QiOjAuMywibWVtb3J5TGltaXQiOiIyMDQ4TSIsIm1lbW9yeVJlcXVlc3QiOiIxMDI0TSIsInJlc291cmNlTGltaXQiOiIxMDAwMEsiLCJzdGFydFRpbWUiOjIwMCwidHlwZSI6Im1haW4ifV0K",

  688.             tpiGitURL:

  689.               this.params.git,

  690.           })

  691.           .then(({ status, data: { data } }) => {

  692.             if (status === "200" || status === 200) {

  693.               this.loading = false;

  694.               this.headerParams = data[0];

  695.               this.Time();

  696.             }

  697.           });

  698.       } catch (error) {

  699.         console.log("获取vscode配置失败", error);

  700.       }

  701.     },

  702.     handleNode(arr = []) {

  703.       this.submitAarry = this.submitAarry.concat(arr);

  704.     },

  705. 

  706.     // 获取组件树的接口

  707.     async getCodeTree() {

  708.       try {

  709.         await this.$axios

  710.           .get(

  711.             `/api/v1/repos/${this.params.owner}/${this.params.project}/git/codes/head`,

  712.             {

  713.               headers: {

  714.                 Authorization: "token 3551a6fb122b0278133963474fcf18bfeef8baba",

  715.               },

  716.             }

  717.           )

  718.           .then(async ({ status, data }) => {

  719.             if (status === "200" || status === 200) {

  720.               const k = await readByMainKey({

  721.                 tableName: "git",

  722.                 key: "treeData",

  723.               });

  724.               const d = uniqueArray(k.data || [], data.tree);

  725.               this.treeData = matterTree(d);

  726.               this.treeRootData = JSON.parse(JSON.stringify(this.treeData));

  727.               add({

  728.                 tableName: "git",

  729.                 data: { name: "treeData", data: d },

  730.               });

  731.               this.treeNodeModify();

  732.             }

  733.           });

  734.       } catch (error) {

  735.         console.log("获取vscode配置失败", error);

  736.       }

  737.     },

  738. 

  739.     // 点击组件树触发的父组件方法。目前思路。

  740.     // ①如果是新增的文件，点击文件设置monaco编辑器内容为空

  741.     // ②如果是已经存在的文件，点击文件调取接口 this.handleFileInfo

  742.     //

  743.     handleChangFile(params, treeData) {

  744.       this.hideNbView = true;

  745.       const getContent = async () => {

  746.         const k = await readByMainKey({

  747.           tableName: "git",

  748.           key: encodeURI(params.filePath),

  749.         });

  750.         console.log("handleChangFile", treeData, params, k.d);

  751.         if (k.d) {

  752.           this.fileInfo = k.d;

  753.           this.monacaValue = k.d.newContent;

  754.           this.$refs.monaco.setLanguage(k.d.language)

  755.         } else if (params.sha) {

  756.           this.handleFileInfo(params);

  757.         } else {

  758.           this.monacaValue = "";

  759.         }

  760.       };

  761.       this.fileInfoParams = params;

  762.       getContent();

  763. 

  764.       // const editorGetValue = Buffer.from(

  765.       //   `${this.$refs.monaco.getVal()}`

  766.       // ).toString("base64"); // 当前编辑器的值

  767.       // console.log("handleChangFile:",params,treeData)

  768.       // const BufferUtf = this.monacaValue; // 当前文件的值

  769.       // if (params.operation === "add") {

  770.       //   // 是新增并且还没有编辑

  771.       //   this.monacaValue = params.oldContent ? params.oldContent : "";

  772.       //   this.fileInfoParams = params;

  773.       //   this.pathname = params.name;

  774.       // } else if (params.sha && !params.oldContent) {

  775.       //   console.log("treeData", treeData);

  776.       //   this.handleFileInfo(params);

  777.       // } else if (editorGetValue && BufferUtf && editorGetValue !== BufferUtf) {

  778.       //   // 当前编辑器的内容是否原有内容一致

  779.       //   this.$confirm(

  780.       //     `当前${this.fileInfoParams.name}文件未保存, 是否继续?`,

  781.       //     "提示",

  782.       //     {

  783.       //       confirmButtonText: "确定",

  784.       //       cancelButtonText: "取消",

  785.       //       type: "warning",

  786.       //     }

  787.       //   )

  788.       //     .then(() => {

  789.       //       this.handleFileInfo(params);

  790.       //     })

  791.       //     .catch(() => {

  792.       //       console.log("取消成功");

  793.       //     });

  794.       // }

  795.     },

  796. 

  797.     // 获取文件的内容

  798.     async handleFileInfo(params) {

  799.       try {

  800.         this.monacoLoading = true;

  801.         await this.$axios

  802.           .get(

  803.             `/api/v1/repos/${this.params.owner}/${this.params.project}/contents/${params.path}`

  804.           )

  805.           .then(({ status, data }) => {

  806.             if (status === "200" || status === 200) {

  807.               console.log("data:", data, data.language)

  808.               this.fileInfo = {...data};

  809.               this.monacoLoading = false;

  810.               params.oldcontent = data.content;

  811.               this.fileInfoParams = params;

  812.               this.pathname = data.name;

  813.               this.opts.language = data.language

  814.               this.$refs.monaco.setLanguage(data.language)

  815.               this.monacaValue = data.content;

  816.             }

  817.           });

  818.       } catch (error) {

  819.         this.monacoLoading = false;

  820.         console.log("获取文件信息失败", error);

  821.       }

  822.     },

  823.     // 提交/代码界面按钮切换事件

  824.     handleselect(value) {

  825.       this.hideNbView = true;

  826.       this.fileInfoParams = {};

  827.       this.diffData = {};

  828.       this.isDiff = value == 1 ? false : true;

  829.       this.$refs.monaco.setCloseDiff(true);

  830.       this.activeKey = value;

  831.     },

  832.     // 中间图标的拖拽

  833.     dragControllerDiv() {

  834.       const resize = document.getElementsByClassName("resize");

  835.       const left = document.getElementsByClassName("leftPaneBase");

  836.       const mid = document.getElementsByClassName("mid");

  837.       const box = document.getElementsByClassName("box");

  838. 

  839.       for (let i = 0; i < resize.length; i++) {

  840.         // 鼠标按下事件

  841.         resize[i].onmousedown = (e) => {

  842.           //颜色改变提醒

  843.           // resize[i].style.background = '#818181';

  844.           var startX = e.clientX ;

  845.           resize[i].left = resize[i].offsetLeft ;

  846.           // 鼠标拖动事件

  847.           document.onmousemove = function (e) {

  848.             var endX = e.clientX;

  849.             var moveLen = resize[i].left + (endX - startX) - 60; // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度

  850.             var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

  851. 

  852.             if (moveLen < 132) moveLen = 132; // 左边区域的最小宽度为32px

  853.             // if (moveLen > maxT - 250) moveLen = maxT - 250; //右边区域最小宽度为150px

  854. 

  855.             // resize[i].style.left = moveLen; // 设置左侧区域的宽度

  856. 

  857.             for (let j = 0; j < left.length; j++) {

  858.               left[j].style.width = moveLen + "px";

  859.               mid[j].style.width = box[i].clientWidth - moveLen - 1 + "px";

  860.             }

  861.           };

  862. 

  863.           // 鼠标松开事件

  864.           document.onmouseup =  (evt) => {

  865.             this.$refs.monaco.init(this.opts)

  866. 

  867.             //颜色恢复

  868.             resize[i].style.background = "#d6d6d6";

  869.             document.onmousemove = null;

  870.             document.onmouseup = null;

  871.             resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉

  872.           };

  873.           resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获

  874.           return false;

  875.         };

  876.       }

  877.     },

  878. 

  879.     // 更改语言

  880.     changeLanguage(val) {

  881.       this.opts.language = val;

  882.     },

  883.     // 更换主题

  884.     changeTheme(val) {

  885.       this.opts.theme = val;

  886.     },

  887.     // 手动获取值

  888.     getValue() {

  889.       console.log(`输出代码:${this.$refs.monaco.getVal()}`);

  890.     },

  891.     // 保存按钮的回调事件

  892.     handleSave(val) {

  893.       // this.monacaValue = Buffer.from(val).toString("base64");

  894.       const readvalue = async () => {

  895.         const k = await readByMainKey({

  896.           tableName: "git",

  897.           key: encodeURI(this.fileInfoParams.filePath),

  898.         });

  899.         if (k.d) {

  900.           if (!k.d.language)

  901.             k.d.language = this.opts.language;

  902.           k.d.fileType = this.fileInfo.fileType;

  903.           if (val === k.d.oldContent) {

  904.             remove({

  905.               tableName: "git",

  906.               key: encodeURI(this.fileInfoParams.filePath),

  907.             });

  908.           } else {

  909.             k.d.newContent = val;

  910.             add({

  911.               tableName: "git",

  912.               data: { name: encodeURI(this.fileInfoParams.filePath), d: k.d },

  913.             });

  914.           }

  915.         } else {

  916.           this.fileInfoParams.newContent = val;

  917.           this.fileInfoParams.language = this.fileInfo.language;

  918.           this.fileInfoParams.fileType = this.fileInfo.fileType;

  919.           add({

  920.             tableName: "git",

  921.             data: {

  922.               name: encodeURI(this.fileInfoParams.filePath),

  923.               d: this.fileInfoParams,

  924.             },

  925.           });

  926.         }

  927.         this.treeNodeModify();

  928.       };

  929.       readvalue();

  930.       // const base64Content = Buffer.from(val).toString("base64");

  931.       // if (this.fileInfoParams.operation === "add") {

  932.       //   // 说明这条是新增的

  933.       //   this.treeRootData = RecurveUpdateValue(

  934.       //     this.treeRootData,

  935.       //     this.fileInfoParams,

  936.       //     base64Content

  937.       //   );

  938.       //   this.treeNodeModify(this.treeRootData);

  939.       // }

  940.     },

  941.     async reload() {

  942.       this.containerReload = false;

  943.       await this.$nextTick();

  944.       this.containerReload = true;

  945.     },

  946. 

  947.     handleSetting() {

  948.       this.drawerVisible = true;

  949.     },

  950. 

  951.     handleChangeModelOptions(value) {

  952.       this.opts.theme = value;

  953.       this.$refs.monaco.setTheme(value)

  954.     },

  955.     handleChangeFontSizeOptions(value) {

  956.       this.opts.fontSize = value;

  957.       this.$refs.monaco.updateOptions(this.opts)

  958.     },

  959. 

  960.     // 倒计时

  961.     countDown() {

  962.       let h = parseInt((this.headerParams.remainingTime / (60 * 60)) % 24);

  963.       h = h < 10 ? `0${h}` : h;

  964.       let m = parseInt((this.headerParams.remainingTime / 60) % 60);

  965.       m = m < 10 ? `0${m}` : m;

  966.       let s = parseInt(this.headerParams.remainingTime % 60);

  967.       s = s < 10 ? `0${s}` : s;

  968.       this.count = `${h}:${m}:${s}`;

  969.     },

  970.     // 定时器没过1秒参数减1

  971.     Time() {

  972.       this.timer = setInterval(() => {

  973.         this.headerParams.remainingTime -= 1;

  974.         if (this.headerParams.remainingTime === 0) clearInterval(this.timer);

  975.         this.countDown();

  976.       }, 1000);

  977.     },

  978.   },

  979. };

  980. </script>

  981. <style lang="less" scoped>

  982. .hides {

  983.   // visibility: hidden;

  984.   position: relative;

  985.   z-index: -1;

  986. }

  987. .showImg{

  988.   width: 100%;

  989.   height: 100%;

  990.   display: flex;

  991.   justify-content: center;

  992.   align-items: center;

  993.   background: #f1f1f1;

  994. }

  995. .showOffice,.showPdf{

  996.   width: 100%;

  997.   height: 100%;

  998. }

  999. .showOffice iframe,.showPdf embed{

  1000.   width: 100%;

  1001.   height: 100%;

  1002.   border: none;

  1003.   background: white;

  1004. }

  1005. .showImg img{

  1006.   max-height: 100%;

  1007.   max-width:100%;

  1008. }

  1009. .ide-header {

  1010.   background: #363840;

  1011.   width: 100%;

  1012.   height: 60px;

  1013.   //border: 1px solid #363840;

  1014.   display: flex;

  1015.   padding-left: 32px;

  1016.   justify-content: space-between;

  1017.   align-items: center;

  1018. 

  1019. 

  1020.   span {

  1021.     display: flex;

  1022.     align-items: center;

  1023.     font-size: 14px;

  1024.     font-family: PingFangSC-Medium, PingFang SC;

  1025.     font-weight: 500;

  1026.     color: #ffffff;

  1027.     line-height: 60px;

  1028.     .ide-header-svg{

  1029.       margin-right: 8px;

  1030.       width: 13px;

  1031.       height: 19px;

  1032.     }

  1033.   }

  1034. }

  1035. .el-icon-switch-button {

  1036.   line-height: 60px;

  1037.   margin-right: 20px;

  1038.   cursor: pointer;

  1039.   color: #FFFFFF;

  1040.   font-size: 14px;

  1041. }

  1042. 

  1043. .inlineBlock {

  1044.   display: inline-block;

  1045.   float: left;

  1046. }

  1047. 

  1048. .menu-left {

  1049.   display: inline-block;

  1050.   width: 75px;

  1051.   background-color: #F5F5F5;

  1052.   height: calc(100vh - 60px);

  1053.   //.menu-left-drag-img {

  1054.   //  width: 24px;

  1055.   //  height: 24px;

  1056.   //}

  1057. 

  1058.   .menu-left-drag {

  1059.     li {

  1060.       height: 70px;

  1061.     }

  1062.     &-svg{

  1063.       height: 24px;

  1064.       width: 30px;

  1065.       color: #7A7A7B;

  1066.       margin-bottom: 8px;

  1067.     }

  1068.   }

  1069.   .el-menu {

  1070.     border-right: none;

  1071. 

  1072.     .el-menu-item {

  1073.       padding: 10px 20px;

  1074.       height: none;

  1075.     }

  1076.   }

  1077. }

  1078. .activeBack {

  1079.   background: #ffffff !important;

  1080.   padding: 19px 21px 45px 22px !important;

  1081.   border: 1px solid #D4D4D5;

  1082.   .menu-left-drag-svg{

  1083.     color: #000000;

  1084.   }

  1085. }

  1086. 

  1087. .leftPaneBase {

  1088.   //background: #e6f1f6;

  1089.   //border: 1px solid #dededf;

  1090.   height: calc(100vh - 40px);

  1091. 

  1092.   &-submit {

  1093.     background: #F5F5F6;

  1094.     border: 1px solid #D4D4D5;

  1095.     height: 52px;

  1096.     padding: 0 36px;

  1097.     font-size: 14px;

  1098.     font-family: PingFangSC-Medium, PingFang SC;

  1099.     font-weight: 500;

  1100.     color: #000000;

  1101.     line-height: 52px;

  1102.   }

  1103. 

  1104.   &-wrap {

  1105. 

  1106.     &-change {

  1107.       padding: 0 20px;

  1108.       height: 54px;

  1109.       line-height: 54px;

  1110.       display: flex;

  1111.       justify-content: space-between;

  1112.       &-svg{

  1113.         width: 16px;

  1114.         height: 16px;

  1115.       }

  1116.       &-img {

  1117.         cursor: pointer;

  1118.         margin-top: 20px;

  1119.       }

  1120.     }

  1121. 

  1122.     &-fileName {

  1123.       height: calc(100vh - 508px);

  1124.       overflow-y: auto;

  1125. 

  1126.       &-item {

  1127.         padding: 0 20px;

  1128.         height: 34px;

  1129.         font-size: 14px;

  1130.         font-family: PingFangSC-Regular, PingFang SC;

  1131.         font-weight: 400;

  1132.         color: #000000;

  1133.         line-height: 34px;

  1134.         overflow: hidden;

  1135.         text-overflow: ellipsis;

  1136.         white-space: nowrap;

  1137.         display: flex;

  1138.         align-items: center;

  1139.         justify-content: space-between;

  1140. 

  1141.         span {

  1142.           cursor: pointer;

  1143.         }

  1144. 

  1145.         &-img {

  1146.           cursor: pointer;

  1147.           opacity: 0;

  1148.         }

  1149.       }

  1150. 

  1151.       &-item:hover {

  1152.         background: #F6F9FC;

  1153.         span {

  1154.           color: #409EFF;

  1155.         }

  1156.         .leftPaneBase-wrap-fileName-item-img {

  1157.           opacity: 1;

  1158.           color: #2285d0;

  1159.         }

  1160.       }

  1161.     }

  1162. 

  1163.     &-info {

  1164.       padding: 0 20px;

  1165.       font-size: 14px;

  1166.       font-family: PingFangSC-Regular, PingFang SC;

  1167.       font-weight: 400;

  1168.       color: #000000;

  1169.       margin: 30px 0 10px;

  1170.     }

  1171. 

  1172.     &-input {

  1173.       padding: 0 20px;

  1174.       margin-bottom: 10px;

  1175. 

  1176.       .el-textarea__inner {

  1177.         background: #dae9f3;

  1178.         max-height: 200p "max-content";

  1179.         max-height: 200px;

  1180.       }

  1181.     }

  1182. 

  1183.     &-infoSubmit {

  1184.       width: 100%;

  1185.       background: #363742;

  1186.       border: 0px;

  1187.     }

  1188.   }

  1189. }

  1190. 

  1191. .resize {

  1192.   //position: absolute;

  1193.   //top: 145px;

  1194.   //display: inline-block;

  1195.   //width: 2px;

  1196.   //height: calc(100% - 145px);

  1197.   //border-radius: 5px;

  1198.   //margin-top: -51px;

  1199.   //cursor: pointer;

  1200.   background: #dce3e8;

  1201.   //background-position: center;

  1202.   /* z-index: 99999; */

  1203.   //font-size: 14px;

  1204.   //color: white;

  1205.   //margin-left: -1px;

  1206.   //float: left;

  1207.   //cursor: col-resize;

  1208.   //z-index: 999;

  1209. 

  1210.   position: absolute;

  1211.   top: 160px;

  1212.   display: inline-block;

  1213.   width: 2px;

  1214.   height: calc(100vh - 100px);

  1215.   border-radius: 5px;

  1216.   margin-top: -51px;

  1217.   margin-left: -1px;

  1218.   cursor: col-resize;

  1219.   z-index: 999;

  1220. }

  1221. 

  1222. .mid {

  1223.   float: left;

  1224.   width: calc(100% - 300px);

  1225.   /*右侧初始化宽度*/

  1226.   height: calc(100vh - 42px);

  1227.   background: #fff;

  1228.   position: relative;

  1229. }

  1230. 

  1231. .box {

  1232.   width: 100%;

  1233.   overflow: hidden;

  1234. }

  1235. 

  1236. .empty-tip {

  1237.   text-align: center;

  1238.   width: 100%;

  1239.   height: 100%;

  1240.   display: flex;

  1241.   align-items: center;

  1242.   justify-content: center;

  1243.   flex-direction: column;

  1244.   color: #999;

  1245. }

  1246. 

  1247. .mid-header {

  1248.   height: 54px;

  1249.   background: #f0f0f0;

  1250.   border: 1px solid #dadadb;

  1251.   line-height: 54px;

  1252.   display: flex;

  1253.   width: 100%;

  1254.   justify-content: space-between;

  1255.   padding: 0 20px;

  1256.   font-size: 14px;

  1257.   font-family: PingFangSC-Regular, PingFang SC;

  1258.   font-weight: 400;

  1259.   color: #000000;

  1260. 

  1261.   span:nth-child(2) {

  1262.     .el-icon-s-tools {

  1263.       margin-left: 5px;

  1264.       cursor: pointer;

  1265.     }

  1266.   }

  1267. }

  1268. 

  1269. .drawer-wrap {

  1270.   font-size: 14px;

  1271.   font-family: PingFangSC-Regular, PingFang SC;

  1272.   .el-drawer {

  1273.     background-color: #e6f1f6 !important;

  1274.   }

  1275.   .drawer-wrap-span{

  1276.     height: 20px;

  1277.     font-weight: 400;

  1278.     color: #7A7A7B;

  1279.     line-height: 20px;

  1280.   }

  1281.   .drawer-wrap-span2{

  1282.     height: 20px;

  1283.     font-weight: 400;

  1284.     color: #000000;

  1285.     line-height: 20px;

  1286.   }

  1287. }

  1288. 

  1289. .code-fast {

  1290.   font-weight: 500;

  1291.   margin-bottom: 30px;

  1292.   height: 20px;

  1293.   font-size: 14px;

  1294.   font-family: PingFangSC-Medium, PingFang SC;

  1295.   font-weight: 500;

  1296.   color: #000000;

  1297.   line-height: 20px;

  1298. }

  1299. 

  1300. .drawer-section {

  1301.   height: 100%;

  1302.   //background: #e6f1f6;

  1303.   background: #f0f0f0;

  1304.   padding: 25px 26px 0;

  1305.   .el-select {

  1306.     width: 140px;

  1307.     font-weight: 400;

  1308.     color: #000000;

  1309.   }

  1310.   &-stydrawer-sectionle-wrap{

  1311.     display: flex;

  1312.     align-items: center;

  1313.     justify-content: space-between;

  1314.     margin-bottom: 20px;

  1315.   }

  1316.   &-style {

  1317.     border-bottom: 1px solid #b1bacd;

  1318.     padding-bottom: 30px;

  1319.     margin-bottom: 30px;

  1320. 

  1321.     &-wrap {

  1322.       display: flex;

  1323.       justify-content: space-between;

  1324.       align-items: center;

  1325.       margin-bottom: 20px;

  1326.     }

  1327.   }

  1328. 

  1329.   .drawer-fast {

  1330.     &-flex {

  1331.       display: flex;

  1332.       justify-content: space-between;

  1333.       margin-bottom: 20px;

  1334.       font-weight: 400;

  1335.       color: #333333;

  1336.       line-height: 14px;

  1337.     }

  1338.   }

  1339. }

  1340. 

  1341. .vscode-header {

  1342.   display: flex;

  1343.   justify-content: space-between;

  1344.   line-height: 40px;

  1345.   font-size: 14px;

  1346.   font-family: PingFangSC-Medium, PingFang SC;

  1347.   font-weight: 500;

  1348.   color: #ffffff;

  1349.   height: 40px;

  1350.   padding: 0 20px;

  1351.   background: #051019;

  1352. }

  1353. 

  1354. .color {

  1355.   color: #f8cd47;

  1356. }

  1357. 

  1358. .mr5 {

  1359.   margin-right: 5px;

  1360. }

  1361. 

  1362. .mr40 {

  1363.   margin-right: 40px;

  1364. }

  1365. 

  1366. .cspointe {

  1367.   cursor: pointer;

  1368. }

  1369. 

  1370. .iframe-wrap {

  1371.   width: 100%;

  1372.   height: calc(100vh - 40px);

  1373.   border: none;

  1374. }

  1375. 

  1376. .vscode-loading-wrap {

  1377.   width: 100%;

  1378.   height: 100vh;

  1379. }

  1380. 

  1381. .no-commit {

  1382.   color: #999;

  1383.   text-align: center;

  1384.   padding-top: 20px;

  1385. }

  1386. 

  1387. </style>

  1388. <style scoped>

  1389. /deep/.el-drawer{

  1390.   box-shadow: none;

  1391. }

  1392. :focus{

  1393.   outline: none;

  1394. }

  1395. .icon {

  1396.   width: 1em;

  1397.   height: 1em;

  1398.   vertical-align: -0.15em;

  1399.   fill: currentColor;

  1400.   overflow: hidden;

  1401. }

  1402. #nbview{

  1403.   position: absolute;

  1404.   width: 100%;

  1405.   height: calc(100% - 54px);

  1406.   left:0;

  1407.   top:54px;

  1408.   z-index: 1;

  1409.   background: #FFF;

  1410.   border:none;

  1411. }

  1412. </style>