feat: form 组件样式调整

lib/saas/config/form.config.ts

@@ -14,11 +14,12 @@ export const formConfig = {
     flex: {
       // layout: 'horizontal',
       class: 'ns-flex-form ns-flex-form-horizontal',
-      wrapperCol: { span: 16 },
-      span: 7,
+      wrapperCol: { span: 24 },
+      labelCol: { span: 0 },
+      span: 6,
       sm: null, //≥576px <=768
       lg: null, //>= 768
-      gutter: [0, 0],
+      gutter: [20, 0],
       justify: 'space-between',
     },
     flexv2: {

lib/saas/theme/global.less

@@ -163,6 +163,24 @@ a {
   color: @primary-color;
 }
 
+
+// 自定义的title样式
+.ns-title-extra-box {
+  position: relative;
+  padding-left: 9px;
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 13px;
+    width: 3px;
+    border-radius: 1px;
+    background-color: @primary-color;
+  }
+}
+
 //状态颜色
 .commonStatus {
   &::before {

lib/saas/theme/variable.less

@@ -61,5 +61,6 @@
 // main-content
 @ns-content-bg: #f1f2f6;
 @ns-box-shadow: 0px 5px 16px #e4e6e8;
+@ns-content-box-shadow: 0px 0px 16px #e4e6e8;
 @ns-gap: 20px;
 @ns-border-radius: 12px;

lib/saas/view/service/list-table.vue

@@ -15,8 +15,6 @@
   import { tableProps } from '/nerv-lib/component/table/props';
   import { PropTypes } from '/nerv-lib/util/type';
   import { cloneDeep, get, isArray } from 'lodash-es';
-  tableProps.expand = PropTypes.bool.def(false);
-
   export default defineComponent({
     name: 'NsViewListTable',
     props: {
@@ -104,46 +102,62 @@
 <style lang="less" scoped>
   //关闭 sticky 模式 底部滚动条
   @gap: 16px;
-  @border-gap: @gap solid #e5ebf0;
-  :deep(.ns-table-container) {
-    // border-top: @border-gap;
-    .ns-table-search {
-      border-radius: @ns-border-radius;
-    }
-  }
+  @border-gap: @gap solid @ns-content-bg;
 
-  :deep(.ns-table) {
-    .ns-part-tree {
-      border-right: @border-gap;
-      height: calc(100vh - 158px);
-    }
-    .ns-table-main {
-      padding: 0px @gap;
-      border-top: @border-gap;
-      // margin: 16px;
-      // background-color: #fff;
-    }
-    .ns-table-search {
-      padding: @gap @gap 0;
-      // margin: 16px;
-      background: #fff;
-      // border-width: 16px 0 16px 0px;
-      // border-color: #e5ebf0;
-      // border-style: solid;
-      // border-top: 16px solid #e5ebf0;
-    }
-    .ns-table-header {
-      // position: sticky;
-      z-index: 3;
-      top: 0;
-      left: 0;
-      background-color: @white;
-    }
-    .ant-table-sticky-scroll {
-      display: none !important;
-    }
-    .ns-basic-table {
-      padding-top: @gap;
+  // 以防样式串
+  .ns-list-table:not(.ant-drawer-body > *):not(.ant-form > *) {
+    height: 100%;
+    background-color: @ns-content-bg;
+    :deep(.ns-table) {
+      height: inherit;
+      .ns-table-container,
+      .ns-part-tree,
+      .ant-spin-container {
+        height: inherit;
+      }
+
+      .ns-part-tree,
+      .ns-table-search,
+      .ns-table-main {
+        background-color: @white;
+        border-radius: @ns-border-radius;
+        box-shadow: @ns-content-box-shadow;
+      }
+
+      .ns-table-container {
+        gap: @ns-gap;
+      }
+      .ns-part-tree {
+      }
+      .ns-part-table {
+        border-radius: @ns-border-radius;
+      }
+      .ns-table-main {
+        padding: 0px @gap;
+        margin-top: @ns-gap;
+        background-color: @white;
+        box-shadow: @ns-content-box-shadow;
+
+        // border-top: @border-gap;
+        // margin: 16px;
+        // background-color: #fff;
+      }
+      .ns-table-search {
+        padding: @gap @gap 0;
+      }
+      .ns-table-header {
+        // position: sticky;
+        z-index: 3;
+        top: 0;
+        left: 0;
+        background-color: @white;
+      }
+      .ant-table-sticky-scroll {
+        display: none !important;
+      }
+      .ns-basic-table {
+        padding-top: @gap;
+      }
     }
   }
 

lib/saas/view/system/application.vue

@@ -339,8 +339,8 @@
       height: 100%;
       background-color: @white;
       border-radius: @ns-border-radius;
-      overflow-y: auto;
-      overflow-x: hidden;
+      // overflow-y: auto;
+      // overflow-x: hidden;
       // margin: 0 16px 16px 16px;
     }
     .ns-content-main {