vue2-client 1.16.22 → 1.16.24

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

@@ -1,293 +1,293 @@
-<script setup lang="ts">
-import XTab from '@vue2-client/base-client/components/common/XTab/XTab.vue'
-import { ref } from 'vue'
-
-defineProps({
-  // HTab特有的属性
-  hasTopMargin: {
-    type: Boolean,
-    default: true
-  },
-  // 是否启用 style7 样式（细下划线、自适应）
-  useStyle7: {
-    type: Boolean,
-    default: false
-  },
-  // 是否叠加圆点样式（仅在 useStyle7 为 true 时生效）
-  useCycle: {
-    type: Boolean,
-    default: false
-  },
-  useStyle8: {
-    type: Boolean,
-    default: false
-  }
-})
-
-// 创建对XTab组件的引用
-const xTabRef = ref()
-
-// 暴露方法给父组件使用
-defineExpose({
-  // 为了兼容性，保留getXTabInstance方法
-  getXTabInstance: () => xTabRef.value,
-})
-</script>
-
-<template>
-  <div
-    class="h-tab-wrapper"
-    :class="{ 'h-tab-has-top-margin': hasTopMargin,
-              'h-tab-style7': useStyle7,
-              'h-tab-cycle': useStyle7 && useCycle,
-              'h-tab-style8': useStyle8}">
-    <x-tab
-      ref="xTabRef"
-      v-bind="$attrs"
-      v-on="$listeners"
-    >
-      <template v-for="(_, name) in $slots" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </x-tab>
-  </div>
-</template>
-
-<style scoped lang="less">
-.h-tab-wrapper {
-  // 基础样式
-  :deep(.ant-tabs-tab-next) {
-    display: none;
-  }
-
-  :deep(.ant-tabs-nav) {
-    .ant-tabs-tab-next-icon {
-      display: none;
-    }
-
-    .ant-tabs-tab {
-      background-color: transparent;
-      border-radius: 6px 6px 0 0;
-      color: #5D5C5C;
-      font-weight: bold;
-      width: 134px;
-      font-size: 18px;
-      line-height: 10px;
-      font-family: "Source Han Sans";
-      transition: all 0.3s;
-      height: 32px;
-      text-align: center;
-    }
-
-    .ant-tabs-tab-active {
-      background-color: #0057FE;
-      color: #ffffff;
-      width: 134px;
-      line-height: 10px;
-      height: 32px;
-      text-align: center;
-    }
-  }
-
-  :deep(.ant-tabs-bar) {
-    border-bottom: 2px solid #0057FE;
-  }
-
-  :deep(.ant-tabs-tab-arrow-show) {
-    display: none;
-  }
-
-  :deep(.ant-tabs-ink-bar) {
-    background-color: transparent;
-    bottom: -1px;
-    display: none;
-    height: 0;
-  }
-
-  :deep(.ant-tabs-tab-prev-icon-target) {
-    display: none;
-  }
-
-  // 带顶部边距的样式
-  &.h-tab-has-top-margin {
-    :deep(.ant-tabs-nav) {
-      margin-top: 6px;
-    }
-
-    :deep(.ant-tabs-bar) {
-      margin: 0 6px;
-    }
-
-    :deep(.ant-card-body) {
-      padding: 6px 0;
-
-      .ant-card-body {
-        padding: 6px;
-      }
-    }
-  }
-
-  // 通用样式7：细下划线、透明背景、可配置宽度
-  &.h-tab-style7 {
-    :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: 2px solid transparent; }
-
-    :deep(.ant-tabs-ink-bar) {
-      display: block;
-      background-color: #0057FE;
-      bottom: 8px;
-      height: 2px;
-      /* 宽度交给 antd 自身计算，避免固定值影响自适应 */
-      margin-left: 0;
-    }
-
-    :deep(.ant-tabs-nav) {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      .ant-tabs-tab {
-        background-color: transparent;
-        border-radius: 0;
-        color: #333333;
-        font-weight: 500;
-        /* 自适应宽度，允许通过变量覆盖最小宽度 */
-        min-width: var(--tab-min-width, 96px);
-        width: auto;
-        padding: 0 12px;
-        font-size: 16px;
-        line-height: 10px;
-        font-family: "Source Han Sans";
-        transition: all 0.3s;
-        height: 40px;
-        text-align: center;
-        margin-right: 0 !important;
-      }
-      .ant-tabs-tab-active {
-        background-color: transparent;
-        color: #0057FE;
-        font-weight: 600;
-        width: auto;
-        line-height: 10px;
-        height: 40px;
-        text-align: center;
-      }
-    }
-
-    // 可选：标签左侧圆点
-    &.h-tab-cycle {
-      :deep(.ant-tabs-tab) {
-        position: relative;
-        padding-left: 18px !important;
-        margin-right: 20px !important;
-        display: inline-flex !important; // 使用inline-flex保持水平布局
-        align-items: center !important; // 确保内容垂直居中
-        line-height: normal !important; // 重置line-height避免冲突
-        vertical-align: top !important; // 确保垂直对齐
-      }
-      :deep(.ant-tabs-tab::before) {
-        content: "" !important;
-        position: absolute !important;
-        left: 0 !important;
-        top: 50% !important;
-        transform: translateY(-50%) !important;
-        width: 8px !important;
-        height: 8px !important;
-        background: #0057FE !important;
-        border-radius: 50% !important;
-        display: block !important;
-        z-index: 1 !important; // 确保圆点在最上层
-      }
-      :deep(.ant-tabs-nav) {
-        display: flex !important;
-        flex-direction: row !important; // 明确指定水平方向
-        flex-wrap: nowrap !important;
-        align-items: center !important; // 确保导航栏垂直居中
-      }
-    }
-  }
-  // 用户词条使用样式
-  &.h-tab-style8 {
-    :deep(.ant-tabs-tab-next),
-    :deep(.ant-tabs-tab-prev-icon-target),
-    :deep(.ant-tabs-tab-next-icon) { display: none; }
-
-    // Make the main Ant Design tabs container a flex column to arrange tab bar and content vertically
-    :deep(.ant-tabs) {
-      display: flex !important;
-      flex-direction: column !important; // 确保选项卡栏在顶部，内容区域在下方
-      height: auto !important; // 高度自适应
-    }
-
-    :deep(.ant-tabs-bar) {
-      border-bottom: 1px solid #d9d9d9; // 底部边框
-      border-right: none; // 移除右侧边框
-      margin-right: 0 !important; // 移除重叠修复
-      flex-shrink: 1 !important; // 允许收缩
-      height: auto !important; // 高度自适应
-      // Important: if the tabPosition is 'top', the default margin-bottom of ant-tabs-bar is 16px, need to remove it to make border connect well
-      margin-bottom: 0px !important;
-    }
-
-    // Ensure tab content takes remaining space
-    :deep(.ant-tabs-content) {
-      flex: none !important; // 移除 flex: 1，允许内容区域自然流淌
-    }
-
-    // Apply flex properties directly to the div containing tabs within ant-tabs-nav
-    :deep(.ant-tabs-nav) {
-      .ant-tabs-nav-container,
-      .ant-tabs-nav-wrap,
-      .ant-tabs-nav-scroll,
-      & > div:first-child { // Target the direct div child of ant-tabs-nav
-        display: flex !important;
-        flex-direction: row !important;
-        flex-wrap: nowrap !important; // 确保不换行
-        width: 100% !important; // 占据全部宽度
-        height: auto !important;
-      }
-
-      // These properties are applied to ant-tabs-nav itself, not its direct div child.
-      // Since the flex properties are moved to the inner div, ant-tabs-nav can be left as default or adjusted if needed.
-      // For now, removing the redundant flex properties from ant-tabs-nav.
-      height: auto !important; // 高度自适应内容
-      width: 100% !important; // 确保容器占据全部宽度
-
-      .ant-tabs-tab {
-        flex: 1 !important; // 宽度等分布局
-        margin-right: 0 !important;
-        margin-bottom: 0 !important; // 移除底部间距
-        border-top: 1px solid #d9d9d9;
-        border-left: 1px solid #d9d9d9;
-        border-bottom: 1px solid #d9d9d9; // 所有选项卡都有底部边框
-        border-right: none; // 默认没有右边框
-        &:last-child {
-          border-right: 1px solid #d9d9d9; // 最后一个选项卡有右边框
-        }
-        border-radius: 0;
-        background-color: #f5f5f5;
-        color: #333333;
-        font-weight: 500;
-        font-size: 16px;
-        height: 40px; // 固定高度
-        width: auto !important; // 移除固定宽度，以便等分
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0;
-      }
-      .ant-tabs-tab-active {
-        border-bottom: 1px solid transparent; // 激活时隐藏底部边框，与 ant-tabs-bar 的边框衔接
-        background-color: #ffffff;
-        color: #0057FE;
-        font-weight: 600;
-      }
-    }
-    :deep(.ant-tabs-ink-bar) {
-      display: none; // 隐藏下划线
-    }
-  }
-}
-</style>
+<script setup lang="ts">
+import XTab from '@vue2-client/base-client/components/common/XTab/XTab.vue'
+import { ref } from 'vue'
+
+defineProps({
+  // HTab特有的属性
+  hasTopMargin: {
+    type: Boolean,
+    default: true
+  },
+  // 是否启用 style7 样式（细下划线、自适应）
+  useStyle7: {
+    type: Boolean,
+    default: false
+  },
+  // 是否叠加圆点样式（仅在 useStyle7 为 true 时生效）
+  useCycle: {
+    type: Boolean,
+    default: false
+  },
+  useStyle8: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// 创建对XTab组件的引用
+const xTabRef = ref()
+
+// 暴露方法给父组件使用
+defineExpose({
+  // 为了兼容性，保留getXTabInstance方法
+  getXTabInstance: () => xTabRef.value,
+})
+</script>
+
+<template>
+  <div
+    class="h-tab-wrapper"
+    :class="{ 'h-tab-has-top-margin': hasTopMargin,
+              'h-tab-style7': useStyle7,
+              'h-tab-cycle': useStyle7 && useCycle,
+              'h-tab-style8': useStyle8}">
+    <x-tab
+      ref="xTabRef"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </x-tab>
+  </div>
+</template>
+
+<style scoped lang="less">
+.h-tab-wrapper {
+  // 基础样式
+  :deep(.ant-tabs-tab-next) {
+    display: none;
+  }
+
+  :deep(.ant-tabs-nav) {
+    .ant-tabs-tab-next-icon {
+      display: none;
+    }
+
+    .ant-tabs-tab {
+      background-color: transparent;
+      border-radius: 6px 6px 0 0;
+      color: #5D5C5C;
+      font-weight: bold;
+      width: 134px;
+      font-size: 18px;
+      line-height: 10px;
+      font-family: "Source Han Sans";
+      transition: all 0.3s;
+      height: 32px;
+      text-align: center;
+    }
+
+    .ant-tabs-tab-active {
+      background-color: #0057FE;
+      color: #ffffff;
+      width: 134px;
+      line-height: 10px;
+      height: 32px;
+      text-align: center;
+    }
+  }
+
+  :deep(.ant-tabs-bar) {
+    border-bottom: 2px solid #0057FE;
+  }
+
+  :deep(.ant-tabs-tab-arrow-show) {
+    display: none;
+  }
+
+  :deep(.ant-tabs-ink-bar) {
+    background-color: transparent;
+    bottom: -1px;
+    display: none;
+    height: 0;
+  }
+
+  :deep(.ant-tabs-tab-prev-icon-target) {
+    display: none;
+  }
+
+  // 带顶部边距的样式
+  &.h-tab-has-top-margin {
+    :deep(.ant-tabs-nav) {
+      margin-top: 6px;
+    }
+
+    :deep(.ant-tabs-bar) {
+      margin: 0 6px;
+    }
+
+    :deep(.ant-card-body) {
+      padding: 6px 0;
+
+      .ant-card-body {
+        padding: 6px;
+      }
+    }
+  }
+
+  // 通用样式7：细下划线、透明背景、可配置宽度
+  &.h-tab-style7 {
+    :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: 2px solid transparent; }
+
+    :deep(.ant-tabs-ink-bar) {
+      display: block;
+      background-color: #0057FE;
+      bottom: 8px;
+      height: 2px;
+      /* 宽度交给 antd 自身计算，避免固定值影响自适应 */
+      margin-left: 0;
+    }
+
+    :deep(.ant-tabs-nav) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      .ant-tabs-tab {
+        background-color: transparent;
+        border-radius: 0;
+        color: #333333;
+        font-weight: 500;
+        /* 自适应宽度，允许通过变量覆盖最小宽度 */
+        min-width: var(--tab-min-width, 96px);
+        width: auto;
+        padding: 0 12px;
+        font-size: 16px;
+        line-height: 10px;
+        font-family: "Source Han Sans";
+        transition: all 0.3s;
+        height: 40px;
+        text-align: center;
+        margin-right: 0 !important;
+      }
+      .ant-tabs-tab-active {
+        background-color: transparent;
+        color: #0057FE;
+        font-weight: 600;
+        width: auto;
+        line-height: 10px;
+        height: 40px;
+        text-align: center;
+      }
+    }
+
+    // 可选：标签左侧圆点
+    &.h-tab-cycle {
+      :deep(.ant-tabs-tab) {
+        position: relative;
+        padding-left: 18px !important;
+        margin-right: 20px !important;
+        display: inline-flex !important; // 使用inline-flex保持水平布局
+        align-items: center !important; // 确保内容垂直居中
+        line-height: normal !important; // 重置line-height避免冲突
+        vertical-align: top !important; // 确保垂直对齐
+      }
+      :deep(.ant-tabs-tab::before) {
+        content: "" !important;
+        position: absolute !important;
+        left: 0 !important;
+        top: 50% !important;
+        transform: translateY(-50%) !important;
+        width: 8px !important;
+        height: 8px !important;
+        background: #0057FE !important;
+        border-radius: 50% !important;
+        display: block !important;
+        z-index: 1 !important; // 确保圆点在最上层
+      }
+      :deep(.ant-tabs-nav) {
+        display: flex !important;
+        flex-direction: row !important; // 明确指定水平方向
+        flex-wrap: nowrap !important;
+        align-items: center !important; // 确保导航栏垂直居中
+      }
+    }
+  }
+  // 用户词条使用样式
+  &.h-tab-style8 {
+    :deep(.ant-tabs-tab-next),
+    :deep(.ant-tabs-tab-prev-icon-target),
+    :deep(.ant-tabs-tab-next-icon) { display: none; }
+
+    // Make the main Ant Design tabs container a flex column to arrange tab bar and content vertically
+    :deep(.ant-tabs) {
+      display: flex !important;
+      flex-direction: column !important; // 确保选项卡栏在顶部，内容区域在下方
+      height: auto !important; // 高度自适应
+    }
+
+    :deep(.ant-tabs-bar) {
+      border-bottom: 1px solid #d9d9d9; // 底部边框
+      border-right: none; // 移除右侧边框
+      margin-right: 0 !important; // 移除重叠修复
+      flex-shrink: 1 !important; // 允许收缩
+      height: auto !important; // 高度自适应
+      // Important: if the tabPosition is 'top', the default margin-bottom of ant-tabs-bar is 16px, need to remove it to make border connect well
+      margin-bottom: 0px !important;
+    }
+
+    // Ensure tab content takes remaining space
+    :deep(.ant-tabs-content) {
+      flex: none !important; // 移除 flex: 1，允许内容区域自然流淌
+    }
+
+    // Apply flex properties directly to the div containing tabs within ant-tabs-nav
+    :deep(.ant-tabs-nav) {
+      .ant-tabs-nav-container,
+      .ant-tabs-nav-wrap,
+      .ant-tabs-nav-scroll,
+      & > div:first-child { // Target the direct div child of ant-tabs-nav
+        display: flex !important;
+        flex-direction: row !important;
+        flex-wrap: nowrap !important; // 确保不换行
+        width: 100% !important; // 占据全部宽度
+        height: auto !important;
+      }
+
+      // These properties are applied to ant-tabs-nav itself, not its direct div child.
+      // Since the flex properties are moved to the inner div, ant-tabs-nav can be left as default or adjusted if needed.
+      // For now, removing the redundant flex properties from ant-tabs-nav.
+      height: auto !important; // 高度自适应内容
+      width: 100% !important; // 确保容器占据全部宽度
+
+      .ant-tabs-tab {
+        flex: 1 !important; // 宽度等分布局
+        margin-right: 0 !important;
+        margin-bottom: 0 !important; // 移除底部间距
+        border-top: 1px solid #d9d9d9;
+        border-left: 1px solid #d9d9d9;
+        border-bottom: 1px solid #d9d9d9; // 所有选项卡都有底部边框
+        border-right: none; // 默认没有右边框
+        &:last-child {
+          border-right: 1px solid #d9d9d9; // 最后一个选项卡有右边框
+        }
+        border-radius: 0;
+        background-color: #f5f5f5;
+        color: #333333;
+        font-weight: 500;
+        font-size: 16px;
+        height: 40px; // 固定高度
+        width: auto !important; // 移除固定宽度，以便等分
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+      }
+      .ant-tabs-tab-active {
+        border-bottom: 1px solid transparent; // 激活时隐藏底部边框，与 ant-tabs-bar 的边框衔接
+        background-color: #ffffff;
+        color: #0057FE;
+        font-weight: 600;
+      }
+    }
+    :deep(.ant-tabs-ink-bar) {
+      display: none; // 隐藏下划线
+    }
+  }
+}
+</style>