vue2-client 1.20.79 → 1.20.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.20.79",
+  "version": "1.20.81",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

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

@@ -1,8 +1,8 @@
-<script setup lang="ts">
+<script setup >
 import XButtons from '@vue2-client/base-client/components/common/XButtons/XButtons.vue'
-import { ref, computed, useAttrs } from 'vue'
+import { ref, computed, useAttrs, nextTick, onMounted } from 'vue'
 
-defineProps({
+const props = defineProps({
   // HButtons特有的属性
   buttonStyle: {
     type: String,
@@ -10,11 +10,22 @@ defineProps({
   }
 })
 
+const emit = defineEmits(['update:activeIndex', 'activeChange', 'configEnd'])
+
 // 内部 XButtons 实例引用
 const xButtonsRef = ref()
 
+// useStyle10模式下激活按钮的索引（从0开始）
+const activeIndex = ref(0)
+
 // 兼容多种样式配置
 const attrs = useAttrs()
+
+// 判断是否使用 useStyle10 模式
+const isUseStyle10 = computed(() => {
+  return props.buttonStyle === 'useStyle10' || attrs.useStyle10 === true || attrs.useStyle10 === '' || attrs.useStyle10 === 'true'
+})
+
 const wrapperClassObject = computed(() => {
   const a = attrs
   const classes = {}
@@ -28,7 +39,8 @@ const wrapperClassObject = computed(() => {
     'fill-container',
     'no-boder-style',
     'form-inline',
-    'one-button-style' // 一个按钮样式，占满整个宽度
+    'one-button-style', // 一个按钮样式，占满整个宽度
+    'useStyle10' // 左侧蓝色圆点指示器样式
   ]
   for (const key of booleanStyleKeys) {
     const val = a[key]
@@ -38,11 +50,128 @@ const wrapperClassObject = computed(() => {
   return classes
 })
 
+// 获取内部按钮元素列表
+const getButtonElements = () => {
+  const xEl = xButtonsRef.value?.$el
+  if (!xEl) return []
+  return Array.from(xEl.querySelectorAll('.ant-btn'))
+}
+
+// 设置按钮激活状态
+const setActiveState = (btn, isActive) => {
+  if (!btn) return
+  if (isActive) {
+    btn.classList.add('h-btn-active')
+    // 使用内联样式确保颜色生效
+    btn.style.color = '#0057FE'
+  } else {
+    btn.classList.remove('h-btn-active')
+    // 清除内联样式
+    btn.style.color = ''
+  }
+}
+
+// 清除所有按钮的激活样式
+const clearAllActiveStyles = () => {
+  const buttons = getButtonElements()
+  buttons.forEach(btn => {
+    setActiveState(btn, false)
+  })
+}
+
+// 设置指定索引按钮为激活状态
+const setActiveButton = (index) => {
+  const buttons = getButtonElements()
+  clearAllActiveStyles()
+
+  if (buttons[index]) {
+    setActiveState(buttons[index], true)
+  }
+}
+
+// 事件委托：处理按钮点击
+const handleButtonClick = (event) => {
+  if (!isUseStyle10.value) return
+
+  // 查找被点击的按钮元素
+  const target = event.target.closest('.ant-btn')
+  if (!target) return
+
+  const buttons = getButtonElements()
+  const index = buttons.indexOf(target)
+
+  if (index === -1) return
+
+
+  // 更新激活索引
+  activeIndex.value = index
+  emit('update:activeIndex', index)
+  emit('activeChange', index)
+
+  // 更新按钮样式
+  clearAllActiveStyles()
+  setActiveState(buttons[index], true)
+}
+
+// 初始化 useStyle10 样式（带重试机制）
+const initUseStyle10 = (retryCount = 0) => {
+
+  if (!isUseStyle10.value) {
+    return
+  }
+
+  const buttons = getButtonElements()
+
+
+  // 如果没有找到按钮，重试最多10次
+  if (buttons.length === 0 && retryCount < 10) {
+    setTimeout(() => {
+      initUseStyle10(retryCount + 1)
+    }, 100)
+    return
+  }
+
+  if (buttons.length === 0) {
+
+    return
+  }
+
+  // 设置第一个按钮为激活状态
+  clearAllActiveStyles()
+  setActiveState(buttons[0], true)
+}
+
+// 监听 XButtons 配置结束，初始化激活状态
+const handleConfigEnd = async () => {
+  await nextTick()
+  initUseStyle10()
+  emit('configEnd')
+}
+
+// 在挂载时也尝试初始化（作为备用方案）
+onMounted(() => {
+  setTimeout(() => {
+    initUseStyle10()
+  }, 300)
+})
+
 // 暴露方法：获取内部 XButtons 实例
 defineExpose({
   getXButtonsInstance: function () { return xButtonsRef.value },
   /** 等待配置结束的异步方法，委托给内部 XButtons */
-  waitConfigEnd: () => xButtonsRef.value?.waitConfigEnd?.() ?? Promise.resolve()
+  waitConfigEnd: () => xButtonsRef.value?.waitConfigEnd?.() ?? Promise.resolve(),
+  /** 获取当前激活按钮索引 */
+  getActiveIndex: () => activeIndex.value,
+  /** 设置激活按钮索引 */
+  setActiveIndex: (index) => {
+    activeIndex.value = index
+    setActiveButton(index)
+  },
+  /** 获取当前激活按钮元素 */
+  getActiveButton: () => {
+    const buttons = getButtonElements()
+    return buttons[activeIndex.value]
+  }
 })
 </script>
 
@@ -53,12 +182,13 @@ defineExpose({
       `h-buttons-${buttonStyle}`,
       wrapperClassObject
     ]"
+    @click="handleButtonClick"
   >
     <x-buttons
       ref="xButtonsRef"
       v-bind="$attrs"
-      @configEnd="$emit('configEnd')"
       v-on="$listeners"
+      @configEnd="handleConfigEnd"
     >
       <template v-for="(_, name) in $slots" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
@@ -491,5 +621,74 @@ defineExpose({
       }
     }
   }
+  // useStyle10样式 - 左侧蓝色圆点指示器样式，与HTab useStyle10效果一致
+  &.h-buttons-useStyle10 {
+    :deep(.ant-btn-group) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-left: 0 !important;
+      padding: 0 !important;
+
+      .ant-btn {
+        position: relative;
+        background-color: transparent !important;
+        border: none !important;
+        border-radius: 0 !important;
+        color: #313131;
+        font-family: "Source Han Sans";
+        font-size: 16px;
+        font-weight: bold;
+        line-height: normal;
+        letter-spacing: 0em;
+        font-feature-settings: "kern" on;
+        font-variation-settings: "opsz" auto;
+        width: auto;
+        height: 40px;
+        padding: 0 12px 6px 18px;
+        text-align: center;
+        margin-right: 0 !important;
+        box-shadow: none !important;
+        display: inline-flex;
+        align-items: center;
+        vertical-align: top;
+        outline: none !important;
+        background: transparent !important;
+        background-image: none !important;
+        border-color: transparent !important;
+        border-width: 0 !important;
+
+        &::before {
+          content: "" !important;
+          position: absolute !important;
+          left: 5px !important;
+          top: 50% !important;
+          transform: translateY(-50%) !important;
+          width: 8px !important;
+          height: 8px !important;
+          background-color: #1890ff !important;
+          background-image: none !important;
+          border-radius: 50% !important;
+          display: block !important;
+          z-index: 10 !important;
+          pointer-events: none !important;
+          opacity: 1 !important;
+          mix-blend-mode: normal !important;
+          box-shadow: none !important;
+          filter: none !important;
+          -webkit-filter: none !important;
+        }
+
+        .anticon {
+          display: none !important;
+        }
+      }
+
+      // 激活状态：通过 h-btn-active 类控制
+      .ant-btn.h-btn-active {
+        color: #0057FE !important;
+      }
+    }
+  }
 }
 </style>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
 import { ref, computed, useAttrs } from 'vue'
 

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup >
 import XFormGroup from '@vue2-client/base-client/components/common/XFormGroup/XFormGroup.vue'
 import { ref, onMounted, getCurrentInstance, watch } from 'vue'
 import { getConfigByNameAsync } from '@vue2-client/services/api/common'

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

@@ -1,6 +1,6 @@
 <script setup>
 import XTab from '@vue2-client/base-client/components/common/XTab/XTab.vue'
-import { ref, computed, useAttrs, useSlots, watch, onMounted } from 'vue'
+import { ref, computed, useAttrs, useSlots, onMounted } from 'vue'
 import { getConfigByName } from '@vue2-client/services/api/common'
 
 const props = defineProps({
@@ -22,10 +22,10 @@ const wrapperClassObject = computed(() => {
   const a = attrs
   const classes = {}
 
-  // 通用布尔样式开关（以存在/空字符串/'true' 为真）
-  const booleanStyleKeys = [
-    'hasTopMargin', 'useStyle7', 'useCycle', 'useStyle8', 'out-tab', 'no-underline', 'useStyle9'
-  ]
+// 通用布尔样式开关（以存在/空字符串/'true' 为真）
+const booleanStyleKeys = [
+  'hasTopMargin', 'useStyle7', 'useCycle', 'useStyle8', 'out-tab', 'no-underline', 'useStyle9', 'useStyle10'
+]
   for (const key of booleanStyleKeys) {
     const val = a[key]
     const truthy = val === true || val === '' || val === 'true'
@@ -78,8 +78,9 @@ const loadExtraConfig = (configName) => {
   }, env.value === 'dev')
 }
 
-onMounted(() => loadExtraConfig(props.tabBarExtraConfig))
-watch(() => props.tabBarExtraConfig, loadExtraConfig)
+onMounted(() => {
+  loadExtraConfig(props.tabBarExtraConfig)
+})
 
 // 暴露方法给父组件使用
 defineExpose({
@@ -126,6 +127,7 @@ defineExpose({
 
 <style scoped lang="less">
 .h-tab-wrapper {
+  width: 100%;
   overflow: visible !important;
 
   // 基础样式
@@ -578,5 +580,85 @@ defineExpose({
       display: none;
     }
   }
+  // 样式10：无下划线、左侧绿色圆点、字体样式切换
+  &.h-tab-useStyle10 {
+    :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;
+    }
+
+    :deep(.ant-tabs-ink-bar) {
+      display: none !important;
+    }
+
+    :deep(.ant-tabs-nav-wrap) {
+      margin-top: 0;
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+
+    :deep(.ant-tabs-nav-container) {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+
+    :deep(.ant-tabs-nav) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      .ant-tabs-tab {
+        position: relative;
+        background-color: transparent;
+        border-radius: 0;
+        color: #313131;
+        font-family: "Source Han Sans";
+        font-size: 16px;
+        font-weight: bold;
+        line-height: normal;
+        letter-spacing: 0em;
+        font-feature-settings: "kern" on;
+        font-variation-settings: "opsz" auto;
+        width: auto;
+        padding: 0 12px 6px;
+        padding-left: 18px !important;
+        transition: all 0.3s;
+        height: 40px;
+        text-align: center;
+        margin-right: 0px !important;
+        display: inline-flex !important;
+        align-items: center;
+        vertical-align: top;
+      }
+      .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;
+      }
+      .ant-tabs-tab-active {
+        background-color: transparent;
+        color: #0057FE;
+        font-weight: bold;
+        width: auto;
+        padding: 0 12px 6px;
+        padding-left: 18px !important;
+        height: 40px;
+        text-align: center;
+      }
+      .ant-tabs-tab-active::before {
+        background: #0057FE !important;
+      }
+    }
+  }
 }
 </style>

package/src/base-client/components/common/XFormTable/demo.vue

@@ -30,7 +30,7 @@ export default {
   data() {
     return {
       // 查询配置文件名
-      queryParamsName: 'MachineHandCRUD_Simple',
+      queryParamsName: 'UserFilesListCRUD',
       // 查询配置左侧tree
       xTreeConfigName: 'addressType',
       // 新增表单固定值

package/src/base-client/components/common/XReportGrid/XReportTrGroup.vue

@@ -68,7 +68,8 @@
                 'x-workflow-progress',
                 'h-ai',
                 'x-markdown',
-                'x-markdown-section'
+                'x-markdown-section',
+                'x-transfer'
               ].includes(cell.slotType)">
               <component
                 :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
@@ -152,7 +153,8 @@
                 'x-workflow-progress',
                 'h-ai',
                 'x-markdown',
-                'x-markdown-section'
+                'x-markdown-section',
+                'x-transfer'
               ].includes(cell.slotType)">
               <component
                 :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
@@ -235,7 +237,8 @@ export default {
     XWorkflowProgress: () => import('@vue2-client/base-client/components/his/XWorkflowProgress/XWorkflowProgress.vue'),
     HAi: () => import('@vue2-client/base-client/components/his/HAi/HAi.vue'),
     XMarkdown: () => import('@vue2-client/base-client/components/common/XMarkdownViewer/XMarkdownViewer.vue'),
-    XMarkdownSection: () => import('@vue2-client/base-client/components/common/XMarkdownSectionExtractor/XMarkdownSectionExtractor.vue')
+    XMarkdownSection: () => import('@vue2-client/base-client/components/common/XMarkdownSectionExtractor/XMarkdownSectionExtractor.vue'),
+    XTransfer: () => import('@vue2-client/base-client/components/his/XTransfer/XTransfer.vue')
   },
   props: {
     // 每一行的配置