#121 optimize collapse code

src/locale/en.json

@@ -114,6 +114,9 @@
     "createNotebook": "Add a New Notebook",
     "showCode": "Show Code",
     "hideCode": "Hide Code",
+    "showAllCell": "Show all cells",
+    "hideAllCell": "Fold all cells",
+    "shortcut": "Shortcut",
     "addAbove": "Add Above",
     "addBelow": "Add Below",
     "createTitle": "Create Notebook",

src/locale/zh.json

@@ -113,6 +113,9 @@
     "createNotebook": "新建一个笔记本",
     "showCode": "展示代码",
     "hideCode": "隐藏代码",
+    "showAllCell": "显示全部 cell",
+    "hideAllCell": "收起全部 cell",
+    "shortcut": "快捷键",
     "addAbove": "在上方新增",
     "addBelow": "在下方新增",
     "createTitle": "创建笔记本",

src/page/Workspace/Notebook/CellBox/index.vue

@@ -1,6 +1,6 @@
 
 <template>
-  <div class="cell-box" @mouseenter="showAddCode=true" @mouseleave="showAddCode=false" >
+  <div class="cell-box" @dblclick="dbClickCollapseCell" @mouseenter="showAddCode=true" @mouseleave="showAddCode=false" >
     <div :ref="'cellBtn' + cellId" class="cell-box-add-left" :style="{'display': showAddCode && !isDemo ? 'block' : 'none'}">
       <div><icon-btn icon="el-ksd-icon-grab_dots_16" class="move-cell" :disabled="isRunningAll" /></div>
       <div class="mt-5"><icon-btn icon="el-ksd-icon-add_22" :handler="handleAddBelow" /></div>
@@ -62,11 +62,11 @@
         />
       </template>
     </div>
-    <div class="cell-box-container" v-else>
+    <div class="cell-box-container" :class="{'active': isActive}" v-else>
       <div class="cell-btns hide-mode" :ref="'cellHover' + cellId">
         <ActionButton :actions="actions" />
       </div>
-      <CollapseCode :value="content" @toggleShowCode="toggleShowCode" />
+      <CollapseCode :type="editType" :value="content" :status="status" @toggleShowCode="toggleShowCode" />
     </div>
   </div>
 </template>
@@ -82,7 +82,7 @@ import { mapMutations, mapActions, mapGetters, mapState } from 'vuex'
 import { JOB_STATUS, MarkdownTag } from '@/config'
 
 export default {
-  props: ['cellInfo', 'selectCell', 'disableDelete', 'isRunningAll', 'currentNotebook', 'mode', 'cellId', 'newCellList'],
+  props: ['cellInfo', 'selectCell', 'disableDelete', 'isRunningAll', 'currentNotebook', 'mode', 'cellId', 'newCellList', 'showAllCell'],
   data () {
     return {
       message: '',
@@ -165,6 +165,9 @@ export default {
       },
       immediate: true,
       deep: true
+    },
+    showAllCell (newVal) {
+      this.showCode = newVal
     }
   },
   methods: {
@@ -316,8 +319,15 @@ export default {
         this.getStatus(id)
       }, 1000);
     },
+    dbClickCollapseCell () {
+      if (!this.showCode) {
+        this.toggleShowCode()
+      }
+    },
     toggleShowCode () {
       this.showCode = !this.showCode
+      console.log(this.showCode, 'sow')
+      this.$emit('changeShowAllCell')
     },
     handleAddAbove () {
       this.$emit('handleAddCell', { type: 'above'})

src/page/Workspace/Notebook/CellList/index.vue

@@ -19,6 +19,16 @@
         <div class="btn" v-if="!isDemo">
           <icon-btn icon="el-ksd-icon-add_22" :disabled="isRunningAll" :text="$t('notebook.addCell')" :handler="() => handleAddCell({ type: 'below' }, selectCell)" />
         </div>
+        <el-dropdown class="btn divider" @command="handleChanged" v-if="!isDemo">
+          <span class="drop-text hasEvent">
+            {{ editType }}<i class="el-ksd-icon-arrow_down_22 font-22"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="Byzer-lang">Byzer-lang</el-dropdown-item>
+            <el-dropdown-item command="Python">Python</el-dropdown-item>
+            <el-dropdown-item command="Markdown">Markdown</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
         <div class="btn" v-if="!isDemo">
           <icon-btn v-if="selectCellStatus !== 'RUNNING' || isRunningAll" icon="el-ksd-icon-play_outline_22" :disabled="isRunningAll" :text="$t('run')" :handler="() => hanldeExcuteSelectCell('run')" />
           <icon-btn v-else icon="el-ksd-icon-stop_with_border_22" :disabled="isRunningAll" :text="$t('notebook.stop')" :handler="() => hanldeExcuteSelectCell('stop')" />
@@ -28,26 +38,20 @@
         </div>
         <div class="btn" v-if="!isDemo">
           <icon-btn v-if="isRunningAll" icon="el-ksd-icon-stop_with_border_22" :text="$t('notebook.cancelAll')" :handler="() => hanldeExcuteAll('stop')" />
-          <icon-btn v-else icon="el-icon-video-play" :disabled="selectCellStatus === 'RUNNING'" :text="$t('notebook.runAll')" :handler="() => hanldeExcuteAll('run')" />
+          <icon-btn v-else icon="el-ksd-icon-play_all_outline_22" :disabled="selectCellStatus === 'RUNNING'" :text="$t('notebook.runAll')" :handler="() => hanldeExcuteAll('run')" />
         </div>
         <div class="btn" v-if="!isDemo">
           <icon-btn icon="el-ksd-icon-delete_22" :disabled="newCellList.length === 1 || isRunningAll" :text="$t('delete')" :handler="() => hanldeExcuteSelectCell('delete')" />
         </div>
-        <div class="btn" v-if="!isDemo">
+        <div class="btn divider" v-if="!isDemo">
           <icon-btn icon="el-ksd-icon-clear_22" :disabled="isRunningAll" :text="$t('notebook.clearAllResult')" :handler="clearAllResult" />
         </div>
-        <el-dropdown class="btn" @command="handleChanged" v-if="!isDemo">
-          <span class="drop-text hasEvent">
-            {{ editType }}<i class="el-ksd-icon-arrow_down_22 font-22"></i>
-          </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="Byzer-lang">Byzer-lang</el-dropdown-item>
-            <el-dropdown-item command="Python">Python</el-dropdown-item>
-            <el-dropdown-item command="Markdown">Markdown</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
         <div class="btn" v-if="!isDemo">
-          <span class="hasEvent" @click="handleShowShortcutHelp">{{ $t('notebook.showShortcutHelp') }}</span>
+          <icon-btn v-if="showAllCell" icon="el-ksd-icon-arrow_up_2_22" :text="$t('notebook.hideAllCell')" :handler="handleToggleCellShow" />
+          <icon-btn v-else icon="el-ksd-icon-arrow_down_2_22" :text="$t('notebook.showAllCell')" :handler="handleToggleCellShow" />
+        </div>
+        <div class="btn" v-if="!isDemo">
+          <icon-btn icon="el-ksd-icon-keyboard" :text="$t('notebook.shortcut')" :handler="handleShowShortcutHelp" />
         </div>
         <SetDemo
           :userInfo="userInfo"
@@ -56,7 +60,7 @@
           @runAll="handleRunAll"
           @operateDemoSuccess="handleOperateDemoSuccess"
         />
-        <div class="btn" v-if="is_scheduler_enabled && !isDemo">
+        <div class="btn right-bar" v-if="is_scheduler_enabled && !isDemo">
           <div v-if="added" class="added-to-schedule-wrap">
             <span class="add-to-schedule add-btn" @click="viewDAG">
               <i class="el-ksd-icon-confirm_22"></i>
@@ -72,14 +76,6 @@
                 </span>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item :command="'handleUpdate'">{{ $t('schedules.updateScheduleTask') }}</el-dropdown-item>
-                    <!-- <div class="update-btn-dropdown-wrap">
-                      <svg-icon
-                        class="menu-icon font-14"
-                        :icon-class="'schedule_update'"
-                      ></svg-icon>
-                      <div class="update-btn-dropdown-text">{{ $t('schedules.updateScheduleTask') }}</div>
-                    </div>
-                  </el-dropdown-item> -->
                 </el-dropdown-menu>
               </el-dropdown>
             </el-tooltip>
@@ -156,6 +152,8 @@
                 :mode="isDemo ? 'command' : mode"
                 @gotoNextCell="gotoNextCell"
                 @changeMode="changeMode"
+                :showAllCell="showAllCell"
+                @changeShowAllCell="changeShowAllCell"
               />
             </li>
           </draggable>
@@ -216,7 +214,8 @@ export default {
       findKey: '',
       replaceKey: '',
       results: [], // 查找的结果
-      setDemoParams: null
+      setDemoParams: null,
+      showAllCell: true
     }
   },
   props: ['removeTabId', 'currentNotebook', 'activeNotebookId'],
@@ -315,7 +314,7 @@ export default {
             const mdEditorInstance = this.$refs['cell' + id][0].$refs[
               'cellEditor' + id
             ]
-            mdEditorInstance.mdMode = 'preview'
+            mdEditorInstance && (mdEditorInstance.mdMode = 'preview')
           }
           if (this.mode === 'edit') {
             this.handleCodeFocus(id)
@@ -409,6 +408,22 @@ export default {
       }
       this.hanldeExcuteSelectCell('run')
     },
+    handleToggleCellShow () {
+      this.showAllCell = !this.showAllCell
+    },
+    changeShowAllCell () {
+      // 判断是否所有的 cell 都是 收起/展开
+      const list = this.newCellList.map(v => this.$refs[`cell${v.id}`][0].showCode)
+      const allShowCode = list.every(v => v)
+      const allHideCode = list.every(v => !v)
+      if (allShowCode) { // 所有 cell 都是展开状态
+        this.showAllCell = !allShowCode
+      }
+      if (allHideCode) { // 所有 cell 都是收起状态
+        this.showAllCell = !allHideCode
+      }
+
+    },
     handleShowShortcutHelp () {
       const isShow = this.$refs.shortcutPrompt.isShow
       // 切换为command模式 打开快捷键帮助面板
@@ -525,21 +540,21 @@ export default {
         // 运行和折叠按钮
         const runBtnNode = this.$refs['cell' + item.id][0].$refs['cellHover' + item.id]
         // 点击的位置不在包裹editor的li中
-        if (!containerNode.contains(event.target)) {
+        if (containerNode && !containerNode.contains(event.target)) {
           if (item.editType === 'Markdown') {
             // markdown变为预览模式
-            node.mdMode = 'preview'
+            node && (node.mdMode = 'preview')
           }
         } else {
           // 点击区域在单个运行和折叠代码内
           if (runBtnNode.contains(event.target)) {
-            node.mdMode = 'preview'
+            node && (node.mdMode = 'preview')
           } else {
             // 点击的位置在包裹editor的li中切不在拖拽和添加按钮中
             if (!btnNode.contains(event.target)) {
               // 模式变为编辑模式
               this.changeMode('edit')
-              if (item.editType === 'Markdown') {
+              if (item.editType === 'Markdown' && node) {
                 // markdown变为编辑模式并聚焦
                 node.mdMode = 'edit'
                 node.handleFocus()
@@ -1177,10 +1192,29 @@ export default {
       padding: 13px 0;
       padding-left: 30px;
       display: flex;
+      position: relative;
       .btn {
         height: 22px;
-        margin-right: 15px;
+        padding-right: 15px;
         line-height: 22px;
+        &.divider {
+          padding-right: 27px;
+          position: relative;
+          &::after {
+            content: '';
+            position: absolute;
+            right: 12px;
+            top: 0px;
+            width: 1px;
+            height: 22px;
+            background-color: #E6EBF4;
+          }
+        }
+        &.right-bar {
+          padding-right: 0px;
+          position: absolute;
+          right: 20px;
+        }
         .drop-text {
           color: $--color-black;
           i {

src/page/Workspace/Notebook/CollapseCode/Editor.vue

@@ -0,0 +1,97 @@
+
+<template>
+  <div class="collapse-editor">
+    <div ref="editorLine"
+      class="editor-line"
+      v-for="(line, index) in valueArr"
+      :key="index"
+    >
+    <div class="editor-line-gutter">{{index + 1}}</div>
+    <div class="editor-line-content" v-html="hljs.highlight(line, { language: curLang }).value"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Vue, Component, Watch } from 'vue-property-decorator'
+const hljs = require('highlight.js')    
+hljs.registerLanguage('sql', require('./byzer_highlight'))
+hljs.registerLanguage('python', require('highlight.js/lib/languages/python'))
+hljs.registerLanguage('markdown', require('highlight.js/lib/languages/markdown'))
+require('highlight.js/styles/vs.css') 
+@Component({
+  props: ['content', 'lang']
+})
+export default class CollapseCodeEditor extends Vue {
+  valueArr = []
+  value = ''
+  langObj = {
+    'Byzer-lang': 'sql',
+    'Markdown': 'markdown',
+    'Python': 'python'
+  }
+  hljs = hljs
+  @Watch('content')
+  onContentChange (newVal) {
+    if (newVal) {
+      this.valueArr = newVal.split('\n')
+    }
+  }
+  get curLang () {
+    return this.langObj[this.lang]
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../../assets/css/variable.scss';
+.collapse-editor {
+  background-color: #fff;
+  font: 14px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+  height: 48px;
+  overflow: hidden;
+  .editor-line {
+    display: flex;
+    &-gutter {
+      width: 60px;
+      color: #CED7E4;
+      padding-left: 13px;
+      padding-right: 19px;
+      text-align: right;
+      line-height: 24px;
+    }
+    &-content {
+      width: 0;
+      flex: 1;
+      line-height: 24px;
+      color: #2c3e50;
+      font-size: 14px;
+    }
+  }
+
+
+}
+</style>
+<style lang="scss">
+@import '../../../../assets/css/variable.scss';
+  // 颜色设置
+  .hljs-comment, .hljs-constant.hljs-numeric {
+    color: $cellCommentColor;
+  }
+  .hljs-identifier {
+    color: $cellTextColor;
+  }
+  .hljs-keyword, .hljs-storage, .hljs-type {
+    color:$cellKeywordColor;
+  }
+  .hljs-keyword.hljs-operator {
+    color: $cellTextColor;
+  }
+  .hljs-string {
+    color: $cellStringColor;
+  }
+  .hljs-section {
+    color: #1890ff;
+    font-weight: bold;
+  }
+</style>