improvement: 页面体验样式问题优化 TencentBlueKing#85 (TencentBlueKing#97)

* improvement: 流程模版编辑流程名称、任务节点个数相对于页面水平居中 TencentBlueKing#85 * improvement: 全部变量列表去掉冗余代码、替换删除icon TencentBlueKing#85 * improvement:模版编辑右侧设置面板去掉动画效果 * improvement:全局弹窗按钮高度、下拉框高度统一 * improvement：模版编辑左侧工具栏开始、结束节点样式重构 TencentBlueKing#85 * improvement: 模版导入弹窗表格样式代码优化 * improvement: 流程模版列表、任务列表、审计列表、职能化列表、轻应用列表最左侧一列左边距调整 TencentBlueKing#85 * bugfix: 模版导入弹窗操作按钮文案调整 TencentBlueKing#85 * bugfix: 审计中心分页位置错位修复 * bugfix: ip选择器tab名称翻译问题修复,职能化认预览弹窗高度样式问题修 * improvement: 列表分页样式统一调整 * improvement: tagTextarea根据编辑态和非编辑态区分最小高度
pagezz-canway · Apr 16, 2019 · c54b63d · c54b63d
1 parent e3c89a6
commit c54b63d
Show file tree

Hide file tree

Showing 16 changed files with 524 additions and 582 deletions.
diff --git a/pipeline/blueflow/src/components/common/PipelineCanvas/ConfigBar.vue b/pipeline/blueflow/src/components/common/PipelineCanvas/ConfigBar.vue
@@ -174,10 +174,9 @@ export default {
         }
     }
     .config-name-wrapper {
-        display: inline-block;
-        margin: 15px auto 0;
+        margin: 0 auto;
+        padding-top: 15px;
         width: 430px;
-        height: 30px;
         .name-show-mode {
             display: inline-block;
         }

diff --git a/pipeline/blueflow/src/components/common/PipelineCanvas/MenuBar.vue b/pipeline/blueflow/src/components/common/PipelineCanvas/MenuBar.vue
@@ -27,10 +27,11 @@
                     :data-type="item.type"
                     v-bktooltips.right="item.name"
                     @click.stop="onSelectNode(item.type)">
-                    <span
-                        v-if="item.type === 'startpoint' || item.type === 'endpoint'">
+                    <div
+                        v-if="item.type === 'startpoint' || item.type === 'endpoint'"
+                        class="node-circle">
                         {{i18n[item.type]}}
-                    </span>
+                    </div>
                 </li>
             </ul>
         </div>
@@ -290,22 +291,24 @@ export default {
         }
     }
 }
-.common-icon-node-startpoint,
-.common-icon-node-endpoint{
-    display: flex;
+.node-circle{
+    margin: 0 auto;
     width: 32px;
     height: 32px;
-    margin: 12px;
+    line-height: 32px;
     font-size: 12px;
-    margin-bottom: 23px;
     border-radius: 50%;
     background-color: #ffffff;
     border: 1px solid #546a9e;
-    justify-content: center;
-    align-items: center;
 }
-.node-endpoint {
-    margin-top: 20px;
+.startpoint-unavailable,
+.endpoint-unavailable {
+    opacity: 0.3;
+    pointer-events: none;
+}
+.common-icon-node-tasknode,
+.common-icon-node-subflow {
+    font-size: 24px;
 }
 .node-list {
     position: absolute;
@@ -434,24 +437,4 @@ export default {
         
     }
 }
-.startpoint-unavailable, .endpoint-unavailable {
-    display: flex;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    border-radius: 50%;
-    background-color: #ffffff;
-    border: 1px solid #546a9e;
-    justify-content: center;
-    align-items: center;
-    opacity: 0.3;
-    pointer-events: none;
-}
-.endpoint-unavailable {
-    margin-bottom: 12px;
-}
-.common-icon-node-tasknode,
-.common-icon-node-subflow {
-    font-size: 24px;
-}
 </style>
diff --git a/pipeline/blueflow/src/components/common/PipelineCanvas/index.vue b/pipeline/blueflow/src/components/common/PipelineCanvas/index.vue
@@ -673,7 +673,8 @@ export default {
     .atom-node {
         position: absolute;
         top: 86px;
-        left: 42%;
+        left: 50%;
+        transform: translateX(-50%);
         z-index: 4;
         .atom-number {
             color: #a9b2bd;

diff --git a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/index.vue b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/index.vue
@@ -65,8 +65,8 @@ import MultipleIpSelector from './MultipleIpSelector.vue'
 import SelectCondition from './SelectCondition.vue'
 
 const i18n = {
-    staticIP: gettext('静态IP'),
-    dynamicIP: gettext('动态IP'),
+    staticIp: gettext('静态IP'),
+    dynamicIp: gettext('动态IP'),
     filter: gettext('筛选条件'),
     exclude: gettext('排除条件')
 }

diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagTextarea.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagTextarea.vue
@@ -15,9 +15,8 @@
             type="textarea"
             v-model="textareaValue"
             :class="{'rf-view-textarea-value': !formMode, 'rf-view-textarea': !editable}"
-            :autosize="true"
             :disabled="!editable || !formMode"
-            :rows="3"
+            :autosize="formMode ? {minRows: 2} : true"
             resize="none"
             :placeholder="placeholder">
         </el-input>
@@ -81,7 +80,7 @@ export default {
         @include scrollbar;
     }
 }
-.rf-view-textarea {
+.rf-view-textarea-value {
     /deep/ .el-textarea__inner {
         padding-left: 0px;
     }

diff --git a/pipeline/blueflow/src/pages/appmaker/AppTaskHome/index.vue b/pipeline/blueflow/src/pages/appmaker/AppTaskHome/index.vue
@@ -325,6 +325,7 @@ export default {
             background: #fafafa;
         }
         .appmaker-id {
+            padding-left: 20px;
             width: 80px;
         }
         .appmaker-name {

diff --git a/pipeline/blueflow/src/pages/audit/index.vue b/pipeline/blueflow/src/pages/audit/index.vue
@@ -598,6 +598,7 @@ export default {
             background: #fafafa;
         }
         .audit-id {
+            padding-left: 20px;
             width: 80px;
         }
         .audit-name {
@@ -695,13 +696,19 @@ export default {
     }
 }
 .panagation {
-    margin-top: 20px;
+    padding: 10px 20px;
     text-align: right;
+    border: 1px solid #dde4eb;
+    border-top: none;
+    background: #fafbfd;
     .page-info {
         float: left;
-        margin-top: 10px;
+        line-height: 36px;
         font-size: 14px;
     }
+    .bk-page {
+        display: inline-block;
+    }
 }
 </style>
 
diff --git a/pipeline/blueflow/src/pages/functor/index.vue b/pipeline/blueflow/src/pages/functor/index.vue
@@ -703,6 +703,7 @@ label.required:after {
             background: $whiteNodeBg;
         }
         .functor-id {
+            padding-left: 20px;
             width: 80px;
         }
         .functor-name {

diff --git a/pipeline/blueflow/src/pages/periodic/PeriodicList/index.vue b/pipeline/blueflow/src/pages/periodic/PeriodicList/index.vue
@@ -498,6 +498,7 @@ export default {
             background: $whiteNodeBg;
         }
         .periodic-id {
+            padding-left: 20px;
             width: 80px;
         }
         .periodic-name {

diff --git a/pipeline/blueflow/src/pages/task/NodePreview.vue b/pipeline/blueflow/src/pages/task/NodePreview.vue
@@ -101,7 +101,7 @@ export default {
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
 .node-preview-wrapper {
-    height: 100%;
+    height: 460px;
 }
 .canvas-wrapper {
     height: calc(100% - 50px);

diff --git a/pipeline/blueflow/src/pages/task/TaskList/index.vue b/pipeline/blueflow/src/pages/task/TaskList/index.vue
@@ -710,6 +710,7 @@ export default {
             background: $whiteNodeBg;
         }
         .task-id {
+            padding-left: 20px;
             width: 80px;
         }
         .task-name {