update script page

c79ada80 · aaronchen2k2k · c4f5eb5d · c79ada80 · c79ada80 · c79ada80
7 changed file
--- a/ui/.env.development
+++ b/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
\ No newline at end of file
+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
--- a/ui/src/assets/css/custom.less
+++ b/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
--- a/ui/src/assets/css/variables.less
+++ b/ui/src/assets/css/variables.less
 // 主窗口背景色
-@mainBgColor: #f0f3f4;
+@mainBgColor: #fff;
 // 左边宽度
 @leftSideBarWidth: 200px;
 // 头部高度

--- a/ui/src/layouts/IndexLayout/index.vue
+++ b/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 {

--- a/ui/src/views/interpreter/component/edit.vue
+++ b/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>

--- a/ui/src/views/script/component/tree.vue
+++ b/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>


--- a/ui/src/views/script/index.vue
+++ b/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;