update script page

ui/.env.development

@@ -9,5 +9,5 @@ VUE_APP_MOCK = true
 
 #api接口域名
 VUE_APP_APIHOST_MOCK = /api
-# VUE_APP_APIHOST = http://127.0.0.1:8085/api/v1
-VUE_APP_APIHOST = http://192.168.0.112:8085/api/v1
+VUE_APP_APIHOST = http://127.0.0.1:8085/api/v1
+# VUE_APP_APIHOST = http://192.168.0.112:8085/api/v1
\ No newline at end of file

ui/src/assets/css/custom.less

@@ -106,11 +106,13 @@ body {
 }
 
 /* 滚动条 */
+@outWidth: 4px;
+@innerWidth: 3px;
 ::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
+    width: @outWidth;
+    height: @outWidth;
     background: transparent;
-    border-radius: 5px;
+    border-radius: @outWidth;
 }
 
 /* 滚动条两端按钮 */
@@ -121,29 +123,29 @@ body {
 
 /* 外层轨道 */
 ::-webkit-scrollbar-track {
-    border-radius: 5px;
+    border-radius: @outWidth;
 }
 
 /* 内层轨道，它会覆盖外层轨道的样式 */
 ::-webkit-scrollbar-track-piece {
-    width: 4px;
+    width: @innerWidth;
     margin: 0 -2px 0;
 }
 
 /* 滑块 */
 ::-webkit-scrollbar-thumb {
-    background-color: #ccc;
+    background-color: #ECF0F1;
     min-height: 60px;
     min-width: 60px;
-    border-radius: 5px;
+    border-radius: @outWidth;
 }
 
 /* 纵向滑块悬浮 */
 ::-webkit-scrollbar-thumb:vertical:hover {
-    background-color: #333;
+    background-color: #BDC3C7;
 }
 
 /* 横向滑块悬浮 */
 ::-webkit-scrollbar-thumb:horizontal:hover {
-    background-color: #333;
+    background-color: #BDC3C7;
 }
\ No newline at end of file

ui/src/assets/css/variables.less

 // 主窗口背景色
-@mainBgColor: #f0f3f4;
+@mainBgColor: #fff;
 // 左边宽度
 @leftSideBarWidth: 200px;
 // 头部高度

ui/src/layouts/IndexLayout/index.vue

 <template>
     <div id="indexlayout">
-        <div
-          id="indexlayout-right"
-          :class="{'fiexd-header': headFixed}"
-        >
+        <div id="indexlayout-right">
             <Top
               :collapsed="collapsed"
               :topNavEnable="topNavEnable"
@@ -41,7 +38,6 @@ interface IndexLayoutSetupData {
   toggleCollapsed: () => void;
   topNavEnable: ComputedRef<boolean>;
   belongTopMenu: ComputedRef<string>;
-  headFixed: ComputedRef<boolean>;  
   selectedKeys: ComputedRef<string[]>;
   leftOpenKeys: Ref<string[]>;
   breadCrumbs: ComputedRef<BreadcrumbType[]>;
@@ -85,9 +81,6 @@ export default defineComponent({
       // 右侧顶部导航是否开启
       const topNavEnable = computed<boolean>(()=> store.state.global.topNavEnable);
 
-      // 右侧顶部是否固定
-      const headFixed = computed<boolean>(()=> store.state.global.headFixed);
-
       // 左侧选择菜单key
       const selectedKeys = computed<string[]>(()=>{
         const selectedKey = getSelectLeftMenuPath(routeItem.value);
@@ -124,7 +117,6 @@ export default defineComponent({
         toggleCollapsed,
         topNavEnable,
         belongTopMenu,
-        headFixed, 
         selectedKeys,
         leftOpenKeys,
         breadCrumbs,
@@ -147,13 +139,13 @@ export default defineComponent({
   flex: 1;
   overflow: hidden;
   background-color: @mainBgColor;
-  &.fiexd-header {
-    display: flex;
-    flex-direction: column;
-    .indexlayout-right-main {
-      flex: 1;
-      overflow: auto;
-    }
+
+  display: flex;
+  flex-direction: column;
+  .indexlayout-right-main {
+    flex: 1;
+    overflow: auto;
+    background-color: @mainBgColor;
   }
 }
 .indexlayout-main-conent {

ui/src/views/interpreter/component/edit.vue

@@ -22,7 +22,7 @@
 
     <a-form-item :wrapper-col="{ span: wrapperCol.span, offset: labelCol.span }">
       <a-select v-if="interpreterInfos.length > 0" v-model:value="selectedInterpreter" @change="selectInterpreter">
-        <a-select-option value="">{{interpreterInfos.length}}项可选择</a-select-option>
+        <a-select-option value="">找到 {{interpreterInfos.length}} 项可选</a-select-option>
         <a-select-option v-for="item in interpreterInfos" :key="item.path" :value="item.path">
           {{ item.info }}
         </a-select-option>

ui/src/views/script/component/tree.vue

@@ -34,16 +34,19 @@
         </a-button>
       </div>
     </div>
+
     <div class="tree-panel">
       <a-tree
           v-if="!treeDataEmpty"
-          ref="tree"
           :tree-data="treeData"
+          v-model:expandedKeys="expandedKeys"
+          v-model:checkedKeys="checkedKeys"
+
           :replace-fields="replaceFields"
           show-icon
+          checkable
           @expand="expandNode"
           @select="selectNode"
-          v-model:expandedKeys="expandedKeys"
       >
         <template #icon="slotProps">
           <DatabaseOutlined v-if="slotProps.type==='workspace'" />
@@ -56,7 +59,13 @@
 
       <a-empty v-if="treeDataEmpty" :image="simpleImage"/>
     </div>
+
+    <div class="actions">
+      <a-button @click="checkoutCases">导出禅道用例</a-button>
+      <a-button :disabled="checkedKeys.length === 0" @click="checkinCases">更新禅道用例</a-button>
+      <a-button :disabled="checkedKeys.length === 0" @click="execSelected">{{ t('exec') }}</a-button>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -165,7 +174,6 @@ export default defineComponent({
     }
 
     const expandedKeys = ref<string[]>([]);
-
     const getOpenKeys = (treeNode, isAll) => {
       if (!treeNode) return
       expandedKeys.value.push(treeNode.path)
@@ -175,15 +183,14 @@ export default defineComponent({
         })
       }
     }
-
-    expandedKeys.value = []
     getOpenKeys(treeData.value[0], false)
 
+    const checkedKeys = ref<string[]>([])
+
     const replaceFields = {
       key: 'path',
     };
 
-    let selectedNode = {} as any
     let isExpand = ref(false);
 
     let tree = ref(null)
@@ -192,6 +199,16 @@ export default defineComponent({
       console.log('onMounted', tree)
     })
 
+    const execSelected = () => {
+      console.log('execSelected')
+    }
+    const checkoutCases = () => {
+      console.log('checkoutCases')
+    }
+    const checkinCases = () => {
+      console.log('checkinCases')
+    }
+
     const selectNode = (selectedKeys, e) => {
       console.log('selectNode', e.selectedNodes)
 
@@ -234,10 +251,14 @@ export default defineComponent({
       replaceFields,
       expandNode,
       selectNode,
+      execSelected,
+      checkoutCases,
+      checkinCases,
       isExpand,
       expandAll,
       tree,
       expandedKeys,
+      checkedKeys,
       simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
     }
   }
@@ -248,43 +269,55 @@ export default defineComponent({
 <style lang="less" scoped>
 
 .tree-main {
-      width: 380px;
-
-      height: 100%;
-      padding: 3px 0 0 3px;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+
+  .toolbar {
+    display: flex;
+    padding: 4px 3px;
+    height: 40px;
+    //border-bottom: 1px solid #D0D7DE;
+
+    .left {
+      flex: 1;
+      .ant-select-tree-switcher {
+        display: none;
+      }
+    }
 
-      .toolbar {
-        display: flex;
-        padding: 0 3px;
-        border-bottom: 1px solid #D0D7DE;
+    .right {
+      width: 40px;
+      text-align: right;
+    }
 
-        .left {
-          flex: 1;
-          .ant-select-tree-switcher {
-            display: none;
-          }
-        }
+    .ant-btn-link {
+      padding: 0px 3px;
+      color: #1890ff;
+    }
+  }
 
-        .right {
-          width: 40px;
-          text-align: right;
-        }
+  .tree-panel {
+    flex: 1;
+    overflow: auto;
 
-        .ant-btn-link {
-          padding: 0px 3px;
-          color: #1890ff;
-        }
-      }
+    .ant-tree {
+      font-size: 16px;
+    }
+  }
 
-      .tree-panel {
-        height: calc(100% - 35px);
-        overflow: auto;
+  .actions {
+    padding: 4px;
+    height: 40px;
+    text-align: center;
 
-        .ant-tree {
-          font-size: 16px;
-        }
-      }
+    .ant-btn {
+      margin: 0 5px;
     }
+  }
+}
 
 </style>
 

ui/src/views/script/index.vue

@@ -10,9 +10,9 @@
       <div id="right">
         <div class="toolbar">
           <template v-if="scriptCode !== ''">
-            <a-button @click="execSingle" type="primary" size="small">{{ t('exec') }}</a-button>
+            <a-button @click="execSingle" type="primary">{{ t('exec') }}</a-button>
 
-            <a-button @click="extract" type="primary" size="small">{{ t('extract_step') }}</a-button>
+            <a-button @click="extract">{{ t('extract_step') }}</a-button>
           </template>
         </div>
 
@@ -239,39 +239,7 @@ export default defineComponent({
       width: 380px;
 
       height: 100%;
-      padding: 3px 0 0 3px;
-
-      .toolbar {
-        display: flex;
-        padding: 0 3px;
-        border-bottom: 1px solid #D0D7DE;
-
-        .left {
-          flex: 1;
-          .ant-select-tree-switcher {
-            display: none;
-          }
-        }
-
-        .right {
-          width: 40px;
-          text-align: right;
-        }
-
-        .ant-btn-link {
-          padding: 0px 3px;
-          color: #1890ff;
-        }
-      }
-
-      .tree-panel {
-        height: calc(100% - 35px);
-        overflow: auto;
-
-        .ant-tree {
-          font-size: 16px;
-        }
-      }
+      padding: 0;
     }
 
     #splitter-h {
@@ -290,8 +258,8 @@ export default defineComponent({
       height: 100%;
 
       .toolbar {
-        padding: 5px 10px;
-        height: 36px;
+        padding: 4px 10px;
+        height: 40px;
         text-align: right;
 
         .ant-btn {
@@ -300,7 +268,7 @@ export default defineComponent({
       }
 
       #right-content {
-        height: calc(100% - 46px);
+        height: calc(100% - 50px);
 
         display: flex;
         flex-direction: column;
@@ -310,7 +278,6 @@ export default defineComponent({
 
           padding: 0 6px 0 8px;
           overflow: auto;
-          background-color: #fff;
         }
 
         #splitter-v {
@@ -326,7 +293,6 @@ export default defineComponent({
 
         #logs-panel {
           height: 160px;
-          background-color: #fff;
 
           .ws-status {
             padding-left: 8px;