vue2-client 1.22.2 → 1.22.4

package/src/base-client/components/common/FormGroupEdit/index.md

@@ -1,43 +1,43 @@
-# FormGroupEdit 表单参数组配置编辑
-
-提供表单参数组配置编辑的快捷组件
-
-
-
-## 何时使用
-
-允许通过表单参数组编辑参数
-
-
-
-引用方式：
-
-```javascript
-import FormGroupEdit from '@vue2-client/base-client/components/FormGroupEdit'
-
-export default {
-    components: {
-      FormGroupEdit
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<form-group-edit
-  @getColumnJson="getColumnJson"
-  :visible.sync="createQueryVisible"
-  @saveQueryParams="saveQueryParams"
-/>
-```
-
-## API
-
-| 参数               | 说明         | 类型      | 默认值   |
-|------------------|------------|---------|-------|
-| visible          | 是否显示       | Boolean | false |
-| @getColumnJson   | 获取表单配置方法   | event   | -     |
-| @saveQueryParams | 存储查询配置信息事件 | event   | -     |
+# FormGroupEdit 表单参数组配置编辑
+
+提供表单参数组配置编辑的快捷组件
+
+
+
+## 何时使用
+
+允许通过表单参数组编辑参数
+
+
+
+引用方式：
+
+```javascript
+import FormGroupEdit from '@vue2-client/base-client/components/FormGroupEdit'
+
+export default {
+    components: {
+      FormGroupEdit
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<form-group-edit
+  @getColumnJson="getColumnJson"
+  :visible.sync="createQueryVisible"
+  @saveQueryParams="saveQueryParams"
+/>
+```
+
+## API
+
+| 参数               | 说明         | 类型      | 默认值   |
+|------------------|------------|---------|-------|
+| visible          | 是否显示       | Boolean | false |
+| @getColumnJson   | 获取表单配置方法   | event   | -     |
+| @saveQueryParams | 存储查询配置信息事件 | event   | -     |

package/src/base-client/components/common/HIS/HButtons/HButtons.vue

@@ -40,7 +40,8 @@ const wrapperClassObject = computed(() => {
     'no-boder-style',
     'form-inline',
     'one-button-style', // 一个按钮样式，占满整个宽度
-    'useStyle10' // 左侧蓝色圆点指示器样式
+    'useStyle10', // 左侧蓝色圆点指示器样式
+    'custom-icon-style' // 自定义图标边框样式
   ]
   for (const key of booleanStyleKeys) {
     const val = a[key]
@@ -690,5 +691,58 @@ defineExpose({
       }
     }
   }
+
+  // 自定义图标边框样式
+  &.h-buttons-custom-icon-style {
+    :deep(.x-buttons) {
+      .ant-btn-group {
+        width: 100%;
+        justify-content: space-between;
+        display: flex;
+        flex-wrap: nowrap;
+
+        .ant-btn {
+          width: 100%;
+          margin-right: 0px !important;
+          min-width: 100% !important;
+          height: 32px;
+          border-radius: 6px;
+          opacity: 1;
+          background: #FFFFFF;
+          box-sizing: border-box;
+          border: 1px solid #9499A0;
+          font-family: "Source Han Sans";
+          font-size: 16px;
+          font-weight: normal;
+          line-height: normal;
+          letter-spacing: 0em;
+          color: #313131;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+
+          .anticon {
+            width: 18px;
+            height: 18px;
+            opacity: 1;
+            background: #0057FE;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            flex-shrink: 0;
+            color: #FFFFFF;
+
+            svg {
+              width: 12px;
+              height: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>

package/src/base-client/components/common/HIS/HTab/HTab.vue

@@ -23,8 +23,17 @@ const wrapperClassObject = computed(() => {
   const classes = {}
 
 // 通用布尔样式开关（以存在/空字符串/'true' 为真）
+// hasTopMargin: 标签增加顶部外边距，同时调整 ant-card-body 内边距
+// useStyle7: 细下划线指示器样式，透明背景，支持配合 useCycle 显示圆点
+// useCycle: 与 useStyle7 配合使用，在标签左侧显示蓝色圆点指示器
+// useStyle8: 等宽卡片式标签，带边框和圆角，激活项高亮并隐藏底部边框
+// out-tab: 去除标签栏所有外边距与内边距，实现紧凑贴边效果
+// no-underline: 隐藏底部边框与 ink-bar 下划线指示器
+// useStyle9: 圆角卡片标签，带边框，激活项填充品牌色，禁用切换动画
+// useStyle10: 无下划线 + 左侧蓝色圆点，透明背景，激活项高亮品牌色
+// useStyle11: 去除边框，选中显示蓝色下划线，字体 #313131 / #0057FE，标签宽度平均分配
 const booleanStyleKeys = [
-  'hasTopMargin', 'useStyle7', 'useCycle', 'useStyle8', 'out-tab', 'no-underline', 'useStyle9', 'useStyle10'
+  'hasTopMargin', 'useStyle7', 'useCycle', 'useStyle8', 'out-tab', 'no-underline', 'useStyle9', 'useStyle10', 'useStyle11'
 ]
   for (const key of booleanStyleKeys) {
     const val = a[key]
@@ -666,5 +675,83 @@ defineExpose({
       }
     }
   }
+
+  // 样式11：去除边框、选中显示蓝色下划线，标签宽度平均分配
+  &.h-tab-useStyle11 {
+    :deep(.ant-tabs-tab-next),
+    :deep(.ant-tabs-tab-prev-icon-target),
+    :deep(.ant-tabs-tab-next-icon) { display: none; }
+
+    :deep(.ant-tabs-bar) {
+      border-bottom: none !important;
+      height: 32px !important;
+      line-height: 32px !important;
+    }
+
+    :deep(.ant-tabs-ink-bar) {
+      display: block !important;
+      background-color: #0057FE !important;
+      bottom: 0px !important;
+      height: 2px !important;
+      margin-left: 0 !important;
+    }
+
+    :deep(.ant-tabs-nav-wrap) {
+      margin-top: 0;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+      width: 100% !important;
+    }
+
+    :deep(.ant-tabs-nav-container) {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+      width: 100% !important;
+    }
+
+    :deep(.ant-tabs-nav-container-scrolling) {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+
+    :deep(.ant-tabs-nav) {
+      width: 100% !important;
+
+      .ant-tabs-nav-list {
+        width: 100% !important;
+        display: grid !important;
+        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+      }
+
+      .ant-tabs-tab {
+        width: 50%;
+        height: 32px;
+        box-sizing: border-box !important;
+        opacity: 1;
+        font-family: "Source Han Sans";
+        font-size: 16px;
+        font-weight: bold;
+        line-height: normal;
+        text-align: center;
+        letter-spacing: 0em;
+        color: #313131;
+        background-color: transparent;
+        border: none;
+        border-radius: 0;
+        padding: 0 12px 6px;
+        margin-right: 0 !important;
+        display: inline-flex !important;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+      }
+
+      .ant-tabs-tab-active {
+        color: #0057FE;
+        background-color: transparent;
+        border: none;
+      }
+    }
+  }
 }
 </style>