vue2-client 1.18.67 → 1.18.69

package/src/base-client/components/his/XRadio/XRadio.vue

@@ -42,16 +42,21 @@
               height: item.indicatorHeight || '16px'
             }"
           ></div>
+          <div
+            v-if="isTabStyle"
+            class="x-radio-tab-icon"
+            :class="{ 'x-radio-tab-icon-active': innerValue === item.value }"
+          ></div>
           <a-radio
             :value="item.value"
             class="x-radio-item"
-            :class="{ 'x-radio-item-no-dot': config.highlightBorder }"
+            :class="{ 'x-radio-item-no-dot': config.highlightBorder || isTabStyle }"
           >
             {{ item.label }}
           </a-radio>
         </div>
         <div
-          v-if="config.showIndicator && item.bottomLine !== false && !config.showBorder && !config.highlightBorder"
+          v-if="config.showIndicator && item.bottomLine !== false && !config.showBorder && !config.highlightBorder && !isTabStyle"
           class="x-radio-indicator-bottom"
           :style="{
             width: item.indicatorWidth || '100%',
@@ -59,6 +64,10 @@
             height: config.indicatorHeight + 'px'
           }"
         ></div>
+        <div
+          v-if="isTabStyle && innerValue === item.value"
+          class="x-radio-tab-underline"
+        ></div>
       </div>
     </a-radio-group>
   </div>
@@ -101,6 +110,12 @@
         this.innerValue = val
       }
     },
+    computed: {
+      isTabStyle () {
+        const val = this.$attrs && this.$attrs['tab-style']
+        return val === true || val === '' || val === 'true'
+      }
+    },
     emits: ['change', 'init'],
     methods: {
       async getData (data) {
@@ -158,7 +173,7 @@
         const attrs = this.$attrs || {}
         const classes = {}
         const booleanStyleKeys = [
-          'item-0padding', 'compact', 'out-radio', 'distributed'
+          'item-0padding', 'compact', 'out-radio', 'distributed', 'tab-style'
         ]
         booleanStyleKeys.forEach(key => {
           const val = attrs[key]
@@ -550,4 +565,69 @@
     /* 改为内容自适应宽度，父容器使用 space-between 保证等距 */
     }
   }
+
+  /* 标签页样式：带圆形图标和下划线 */
+  .x-radio-tab-style {
+    &.x-radio-container,
+    .x-radio-container {
+      :deep(.x-radio-group) {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 0;
+        flex-wrap: nowrap;
+      }
+      :deep(.x-radio-item-container) {
+        flex: none;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        padding: 0;
+        margin-right: 0;
+      }
+      :deep(.x-radio-item-wrapper) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        position: relative;
+      }
+      :deep(.x-radio-item) {
+        margin-bottom: 0;
+        display: none;
+        padding-left: 0;
+        display: flex;
+        align-items: center;
+        font-family: "Source Han Sans" !important;
+        font-size: 16px !important;
+        font-weight: bold !important;
+        color: #5D5C5C;
+        line-height: normal;
+        padding: 0;
+        margin: 0;
+      }
+      :deep(.x-radio-tab-icon) {
+        width: 12px;
+        height: 12px;
+        background-color: #0057FE;
+        border-radius: 50%;
+        margin-right: 8px;
+        flex-shrink: 0;
+        display: block;
+      }
+      :deep(.x-radio-tab-underline) {
+        position: absolute;
+        bottom: -8px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-color: #0057FE;
+        border-radius: 2px;
+      }
+      :deep(.x-radio-item-container:not(:last-child)) {
+        margin-right: 12px;
+      }
+    }
+  }
   </style>