vue2-client 1.16.85 → 1.16.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.16.85",
+  "version": "1.16.87",
   "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

@@ -21,7 +21,7 @@ const wrapperClassObject = computed(() => {
 
   // 通用布尔样式开关（以存在/空字符串/'true' 为真）
   const booleanStyleKeys = [
-    'max-width200', 'width173', 'button_refresh'
+    'max-width200', 'width173', 'button_refresh', 'border', 'no-style', 'fill-container'
   ]
   for (const key of booleanStyleKeys) {
     const val = a[key]
@@ -377,5 +377,36 @@ defineExpose({
       width: 173px !important;
     }
   }
+  // 按钮无边框+无图标+无阴影
+  &.h-button-no-style{
+    :deep(.ant-btn) {
+        border: 0px;
+        .anticon{
+          display: none;
+        }
+    }
+    :deep(.ant-btn-primary){
+      text-shadow: none;
+      box-shadow: none;
+    }
+  }
+  // 按钮组边距
+  &.h-button-border{
+    border: 1px solid #E5E9F0;
+    border-radius: 6px;
+  }
+  // 按钮撑开整个容器
+  &.h-buttons-fill-container{
+    :deep(.x-buttons) {
+        width: 100%;
+        .ant-btn-group{
+          width: 100%;
+          .ant-btn{
+            width: 100%;
+            margin-right: 0px;
+          }
+        }
+    }
+  }
 }
 </style>

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

@@ -5,6 +5,18 @@ import { ref, computed, useAttrs } from 'vue'
 const xAddNativeFormRef = ref()
 
 const attrs = useAttrs()
+const props = defineProps({
+  // 是否启用 horizontal 模式的自定义配置
+  enableHorizontalCustom: {
+    type: Boolean,
+    default: false
+  }
+})
+ // 启动时间选择框弹出到body
+const enablePopupToBody = computed(() => {
+  const a = attrs
+  return a.enablePopupToBody === 'true' || a.enablePopupToBody === true
+})
 const wrapperClassObject = computed(() => {
   const a = attrs
   const classes = {}
@@ -47,6 +59,8 @@ defineExpose({
     <x-add-native-form
       ref="xAddNativeFormRef"
       v-bind="$attrs"
+      :enable-popup-to-body="enablePopupToBody"
+      :enable-horizontal-custom="props.enableHorizontalCustom"
       v-on="$listeners"
     >
       <template v-for="(_, name) in $slots" #[name]="slotData">

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

@@ -164,6 +164,10 @@ const isCustomPagination = computed(() => {
   const paginationAttr = (a && a.paginationStyle) || ''
   return props.tableStyle === 'custom-pagination' || paginationAttr === 'custom-pagination'
 })
+// 是否隐藏顶部功能区
+const isHiddenFunctionalArea = computed(() => {
+  return attrs.hiddenFunctionalArea === 'true' || attrs.hiddenFunctionalArea === true
+})
 </script>
 
 <template>
@@ -178,6 +182,7 @@ const isCustomPagination = computed(() => {
       ref="xFormTableRef"
       v-bind="$attrs"
       :customPagination="isCustomPagination"
+      :hiddenFunctionalArea="isHiddenFunctionalArea"
       @expand="onExpandLog"
       v-on="$listeners"
     >

package/src/base-client/components/common/XAddNativeForm/XAddNativeForm.vue

@@ -51,6 +51,7 @@
               :rules="rules[`${item.formItem.name}${item.formItem.model}`]"
               :get-data-params="getDataParams"
               :env="env"
+              :enablePopupToBody="enablePopupToBody"
               @x-form-item-emit-func="emitFunc"
               @rowChoose="rowChoose"
               :setForm="setForm"
@@ -94,6 +95,7 @@
               :style="layout === 'inline' ? { marginTop:'5px' } : undefined"
               :form="form"
               :images="images"
+              :enablePopupToBody="enablePopupToBody"
               :service-name="serviceName"
               mode="新增/修改"
               :layout="layout"
@@ -147,6 +149,7 @@
             :disabled="itemDisabled(formItem)"
             :readonly="readonly(formItem)"
             :files="files"
+            :enablePopupToBody="enablePopupToBody"
             v-bind="formItemLayoutGen"
             :style="layout ==='inline'?{marginTop:'5px'}:undefined"
             :form="form[groupItem.model]"
@@ -223,6 +226,11 @@ export default {
     enableHorizontalCustom: {
       type: Boolean,
       default: false
+    },
+    // 是否启用时间弹出到最外层
+    enablePopupToBody: {
+      type: Boolean,
+      default: false
     }
   },
   data () {

package/src/base-client/components/common/XDatePicker/index.vue

@@ -40,6 +40,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    // 是否启用时间弹出到最外层
+    enablePopupToBody: {
+      type: Boolean,
+      default: false
+    },
   },
   model: {
     prop: 'value',
@@ -183,6 +188,9 @@ export default {
         moment(value[1]).format(this.formatType),
       ]
     },
+    getBodyContainer (triggerNode) {
+      return document.body
+    }
   },
 }
 </script>
@@ -195,7 +203,8 @@ export default {
         (attr?.queryType !== 'BETWEEN' || mode !== '查询')) ||
         (['rangePicker'].includes(attr.type) && mode !== '查询')
     "
-    :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
+    :getCalendarContainer="enablePopupToBody? undefined :(triggerNode) => triggerNode.parentNode"
+    :getPopupContainer="enablePopupToBody? getBodyContainer : undefined"
     v-model="localValue"
     :disabled="disabled || readOnly"
     style="width: 100%"
@@ -211,7 +220,8 @@ export default {
       attr.type === 'monthPicker' ||
         (attr.type === 'monthRangePicker' && mode !== '查询')
     "
-    :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
+    :getCalendarContainer="enablePopupToBody? undefined :(triggerNode) => triggerNode.parentNode"
+    :getPopupContainer="enablePopupToBody? getBodyContainer : undefined"
     v-model="localValue"
     :disabled="disabled || readOnly"
     :show-time="true"
@@ -225,7 +235,8 @@ export default {
       attr.type === 'yearPicker' ||
         (attr.type === 'yearRangePicker' && mode !== '查询')
     "
-    :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
+    :getCalendarContainer="enablePopupToBody? undefined :(triggerNode) => triggerNode.parentNode"
+    :getPopupContainer="enablePopupToBody? getBodyContainer : undefined"
     v-model="localValue"
     :disabled="disabled || readOnly"
     format="YYYY"
@@ -250,7 +261,8 @@ export default {
         (attr.type === 'rangePicker' && mode === '查询') ||
         ['yearRangePicker', 'monthRangePicker'].includes(attr.type)
     "
-    :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
+    :getCalendarContainer="enablePopupToBody? undefined :(triggerNode) => triggerNode.parentNode"
+    :getPopupContainer="enablePopupToBody? getBodyContainer : undefined"
     v-model="localValue"
     :disabled="disabled"
     :placeholder="placeholder"

package/src/base-client/components/common/XForm/XFormItem.vue

@@ -381,6 +381,7 @@
       <XFormDatePicker
         :attr="attr"
         :mode="mode"
+        :enablePopupToBody="enablePopupToBody"
         :disabled="disabled"
         :readOnly="readOnly"
         :showLabel="showLabel"
@@ -815,6 +816,11 @@ export default {
           return []
         }
     },
+    // 是否启用时间弹出到最外层
+    enablePopupToBody: {
+      type: Boolean,
+      default: false
+    },
     serviceName: {
       type: String,
       default:

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

@@ -67,6 +67,7 @@
             :pageMaxSize="realQueryConfig.queryPagesSize"
             :externalSelectedRowKeys="externalSelectedRowKeys"
             :customPagination="customPagination"
+            :hiddenFunctionalArea="hiddenFunctionalArea"
             @add="add"
             @move="move"
             @edit="edit"
@@ -409,6 +410,11 @@ export default {
     customPagination: {
       type: Boolean,
       default: false
+    },
+    // 是否隐藏顶部功能区域
+    hiddenFunctionalArea: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {

package/src/base-client/components/common/XReport/XReportHospitalizationDemo.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="xreport-hosp-demo">
+    <a-space style="margin-bottom: 12px;">
+      <a-button type="primary" @click="doInit">手动初始化</a-button>
+    </a-space>
+    <XReport
+      ref="reportRef"
+      :edit-mode="true"
+      :show-save-button="true"
+      :show-img-in-cell="false"
+      :use-oss-for-img="false"
+      server-name="af-his"
+      @updateImg="onUpdateImg"/>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import XReport from '@vue2-client/base-client/components/common/XReport'
+
+const reportRef = ref(null)
+
+const payload = {
+  arr: [
+    { BQ: '病房区', RY: 0, CY: 0, CW: 0, SW: 0, SS: 0, ZC: 0, ZR: 0, ZY: 0 },
+    { BQ: '感染科', RY: 0, CY: 0, CW: 0, SW: 0, SS: 0, ZC: 0, ZR: 0, ZY: 0 },
+    { BQ: '骨科病区', RY: 0, CY: 0, CW: 0, SW: 0, SS: 0, ZC: 0, ZR: 0, ZY: 0 },
+    { BQ: '呼吸科病区', RY: 0, CY: 0, CW: 0, SW: 0, SS: 0, ZC: 0, ZR: 0, ZY: 0 },
+    { BQ: '急症科病区', RY: 0, CY: 0, CW: 0, SW: 0, SS: 0, ZC: 0, ZR: 0, ZY: 0 },
+    { BQ: '内科二病区', RY: 0, CY: 0, CW: 0, SW: 0, SS: 0, ZC: 0, ZR: 0, ZY: 0 }
+  ]
+}
+
+const doInit = async () => {
+  if (!reportRef.value || !reportRef.value.init) return
+  await reportRef.value.init({
+    configName: 'hospitalizationStatsReport',
+    configData: payload
+  })
+}
+
+const onUpdateImg = data => {
+  console.warn('updateImg:', data)
+}
+</script>

package/src/base-client/components/common/XTable/XTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-show="tableColumns.length > 0">
-    <a-row :gutter="48">
+    <a-row :class="{'hiddenFunctionalArea':hiddenFunctionalArea}" :gutter="hiddenFunctionalArea ? 0 :48">
       <a-col v-show="showLeftOperaBtn">
         <span :style="{ float: 'left', marginBottom: '8px' }">
           <a-space>
@@ -529,6 +529,11 @@ export default {
     customPagination: {
       type: Boolean,
       default: false
+    },
+    // 是否隐藏顶部功能区
+    hiddenFunctionalArea: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -1607,4 +1612,7 @@ export default {
     margin: 0;
   }
 }
+.hiddenFunctionalArea{
+  display: none;
+}
 </style>

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

@@ -74,7 +74,7 @@ export default {
       const attrs = this.$attrs || {}
       const classes = {}
       const booleanStyleKeys = [
-        'compact', 'out-checkbox'
+        'compact', 'out-checkbox', 'justify-content-start'
       ]
       booleanStyleKeys.forEach(key => {
         const val = attrs[key]
@@ -178,4 +178,17 @@ export default {
     }
   }
 }
+// 从左到右右排列
+.x-checkbox-justify-content-start{
+  &.x-checkbox-container,
+  .x-checkbox-container {
+    :deep(.x-checkbox-group){
+      display: flex;
+      justify-content: start;
+    }
+    :deep(.x-checkbox-item-container){
+      flex-direction: row
+    }
+  }
+}
 </style>

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

@@ -1,73 +1,73 @@
-<template>
-  <svg
-    class="x-icon anticon"
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    :viewBox="viewBox"
-    :style="iconStyle"
-  >
-    <path
-      v-for="(path, index) in iconPaths"
-      :key="index"
-      :fill="path.fill || 'currentColor'"
-      :d="path.d"
-    />
-  </svg>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  // 图标名称
-  name: {
-    type: String,
-    required: true
-  }
-})
-
-// 简化的图标配置（先确保基本功能正常）
-const iconConfigs = {
-  icon001: {
-    viewBox: '0 0 13.066129684448242 14',
-    paths: [{
-      d: 'M0.72589612,0C0.32499826,0,0,0.34822667,0,0.77777773L0,13.222221C0,13.651789,0.32499826,14,0.72589612,14L12.340235,14C12.741146,14,13.066131,13.651789,13.066131,13.222221L13.066131,0.77777773C13.066131,0.34822667,12.741146,0,12.340235,0L0.72589612,0ZM2.9035845,4.6666665L2.9035845,3.1111109L10.162547,3.1111109L10.162547,4.6666665L2.9035845,4.6666665ZM2.9035845,7.7777777L2.9035845,6.2222219L10.162547,6.2222219L10.162547,7.7777777L2.9035845,7.7777777ZM10.162547,10.888889L2.9035845,10.888889L2.9035845,9.333333L10.162547,9.333333L10.162547,10.888889Z',
-      fill: 'currentColor'
-    }]
-  }
-}
-
-// 计算图标配置
-const iconConfig = computed(() => {
-  return iconConfigs[props.name] || {
-    viewBox: '0 0 24 24',
-    paths: []
-  }
-})
-
-// 计算 viewBox
-const viewBox = computed(() => {
-  return iconConfig.value.viewBox
-})
-
-// 计算图标路径
-const iconPaths = computed(() => {
-  return iconConfig.value.paths
-})
-
-// 计算样式
-const iconStyle = computed(() => ({
-  ...props.style
-}))
-</script>
-
-<style scoped>
-.x-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  line-height: 1;
-}
-</style>
+<template>
+  <svg
+    class="x-icon anticon"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    :viewBox="viewBox"
+    :style="iconStyle"
+  >
+    <path
+      v-for="(path, index) in iconPaths"
+      :key="index"
+      :fill="path.fill || 'currentColor'"
+      :d="path.d"
+    />
+  </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  // 图标名称
+  name: {
+    type: String,
+    required: true
+  }
+})
+
+// 简化的图标配置（先确保基本功能正常）
+const iconConfigs = {
+  icon001: {
+    viewBox: '0 0 13.066129684448242 14',
+    paths: [{
+      d: 'M0.72589612,0C0.32499826,0,0,0.34822667,0,0.77777773L0,13.222221C0,13.651789,0.32499826,14,0.72589612,14L12.340235,14C12.741146,14,13.066131,13.651789,13.066131,13.222221L13.066131,0.77777773C13.066131,0.34822667,12.741146,0,12.340235,0L0.72589612,0ZM2.9035845,4.6666665L2.9035845,3.1111109L10.162547,3.1111109L10.162547,4.6666665L2.9035845,4.6666665ZM2.9035845,7.7777777L2.9035845,6.2222219L10.162547,6.2222219L10.162547,7.7777777L2.9035845,7.7777777ZM10.162547,10.888889L2.9035845,10.888889L2.9035845,9.333333L10.162547,9.333333L10.162547,10.888889Z',
+      fill: 'currentColor'
+    }]
+  }
+}
+
+// 计算图标配置
+const iconConfig = computed(() => {
+  return iconConfigs[props.name] || {
+    viewBox: '0 0 24 24',
+    paths: []
+  }
+})
+
+// 计算 viewBox
+const viewBox = computed(() => {
+  return iconConfig.value.viewBox
+})
+
+// 计算图标路径
+const iconPaths = computed(() => {
+  return iconConfig.value.paths
+})
+
+// 计算样式
+const iconStyle = computed(() => ({
+  ...props.style
+}))
+</script>
+
+<style scoped>
+.x-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  line-height: 1;
+}
+</style>

package/src/base-client/components/his/XIcon/index.js

@@ -1,3 +1,3 @@
-import XIcon from './XIcon.vue'
-
-export default XIcon
+import XIcon from './XIcon.vue'
+
+export default XIcon

package/src/base-client/components/his/XIcon/index.md

@@ -1,177 +1,177 @@
-# XIcon 自定义图标组件
-
-## 概述
-
-XIcon 是一个统一管理自定义图标的组件，提供了丰富的内置图标，支持自定义样式，并且可以与 XTitle 组件无缝集成。
-
-## 特性
-
-- 🎨 丰富的内置图标库
-- 🎯 支持自定义样式
-- 🔧 易于扩展新图标
-- 📱 响应式设计
-- 🎪 与 XTitle 组件完美集成
-
-# XIcon 自定义图标组件
-
-## 概述
-
-XIcon 是一个专门管理自定义图标的组件，**动态加载** `src/assets/svg/his/` 目录下的 SVG 文件，支持自定义样式，并且可以与 XTitle 组件无缝集成。
-
-## 特性
-
-- 🎨 **动态加载 SVG 文件**，无需硬编码图标内容
-- 🎯 支持自定义样式
-- 🔧 **自动发现新图标**，添加 SVG 文件即可使用
-- 📱 响应式设计
-- 🎪 与 XTitle 组件完美集成
-- ⚡ 纯 SVG 渲染，性能优异
-- 💾 SVG 内容缓存，避免重复加载
-
-## 内置图标
-
-组件会自动加载 `src/assets/svg/his/` 目录下的所有 SVG 文件，使用文件名（去掉 `.svg` 扩展名）作为图标名称。
-
-### 当前可用的图标
-- `icon001` - HIS 系统图标（来自 `icon001.svg`）
-
-### 添加新图标
-只需在 `src/assets/svg/his/` 目录下添加新的 SVG 文件，组件会自动发现并可以使用：
-
-```bash
-# 添加新图标文件
-src/assets/svg/his/
-├── icon001.svg    # 已存在
-├── icon002.svg    # 新添加的图标
-├── user.svg       # 新添加的图标
-└── setting.svg    # 新添加的图标
-```
-
-使用方式：
-```vue
-<XIcon name="icon002" />
-<XIcon name="user" />
-<XIcon name="setting" />
-```
-
-## 基础用法
-
-```vue
-<template>
-  <!-- 使用动态加载的图标 -->
-  <XIcon name="icon001" />
-
-  <!-- 自定义样式 -->
-  <XIcon
-    name="icon001"
-    :style="{ color: '#52c41a', fontSize: '20px' }"
-  />
-
-  <!-- 自定义类名 -->
-  <XIcon
-    name="icon001"
-    className="custom-icon"
-  />
-</template>
-
-<script setup>
-import XIcon from '@/base-client/components/his/XIcon/XIcon.vue'
-</script>
-```
-
-## 在 XTitle 中使用
-
-```vue
-<template>
-  <!-- 使用 Ant Design 内置图标 -->
-  <XTitle icon="user" title="用户管理" />
-  <XTitle icon="setting" title="系统设置" />
-
-  <!-- 使用动态加载的自定义图标 -->
-  <XTitle customIcon="icon001" title="HIS 系统" />
-
-  <!-- 配置图标颜色 -->
-  <XTitle customIcon="icon001" title="HIS 系统" iconColor="red" />
-
-  <!-- 配置图标大小 -->
-  <XTitle customIcon="icon001" title="HIS 系统" iconSize="24px" />
-
-  <!-- 组合使用 -->
-  <XTitle customIcon="icon001" title="HIS 系统" iconColor="blue" iconSize="20px" dot />
-
-  <!-- 使用自定义 SVG 组件 -->
-  <XTitle :iconComponent="CustomIcon" title="自定义图标" />
-</template>
-
-<script setup>
-import XTitle from '@/base-client/components/his/XTitle/XTitle.vue'
-import CustomIcon from './CustomIcon.vue'
-</script>
-```
-
-## XTitle 属性说明
-
-### 默认样式
-XTitle 组件默认包含以下样式：
-- 只有右侧有 8px 间距
-- 图标垂直居中对齐
-- 图标默认样式（16px 字体大小）
-
-### 图标样式属性
-| 属性 | 类型 | 默认值 | 说明 |
-|------|------|--------|------|
-| `iconColor` | String | - | 图标颜色，支持 CSS 颜色值 |
-| `iconSize` | String | - | 图标大小，支持 CSS 尺寸值 |
-| `iconStyle` | Object | - | 自定义样式对象，会合并到图标样式中 |
-
-### 其他样式属性
-- `dot` - 显示圆点
-- `nodot` - 隐藏圆点
-- `center` - 居中对齐
-- `littlefont` - 小字体
-
-## Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|--------|
-| name | 图标名称 | String | - |
-| style | 自定义样式 | Object | {} |
-| className | 自定义类名 | String | '' |
-
-## 扩展新图标
-
-现在添加新图标非常简单，**无需修改代码**：
-
-1. **添加 SVG 文件**：在 `src/assets/svg/his/` 目录下添加新的 SVG 文件
-2. **使用图标**：直接使用文件名（去掉 `.svg` 扩展名）作为图标名称
-
-```bash
-# 示例：添加新图标
-src/assets/svg/his/
-├── icon001.svg    # 已存在
-├── icon002.svg    # 新添加
-├── user.svg       # 新添加
-└── setting.svg    # 新添加
-```
-
-```vue
-<!-- 直接使用，无需任何配置 -->
-<XIcon name="icon002" />
-<XIcon name="user" />
-<XIcon name="setting" />
-```
-
-### SVG 文件要求
-- 文件格式：`.svg`
-- 文件位置：`src/assets/svg/his/` 目录
-- 文件内容：标准的 SVG 格式，包含 `<path>` 元素
-- 命名：使用有意义的文件名，去掉 `.svg` 扩展名后就是图标名称
-
-## 注意事项
-
-1. **动态加载**：图标会在首次使用时动态加载，后续使用会从缓存中读取
-2. **SVG 格式**：确保在不同分辨率下都能清晰显示
-3. **颜色继承**：所有图标都使用 `currentColor` 作为填充色，会自动继承父元素的文字颜色
-4. **文件命名**：使用有意义的文件名，避免特殊字符和空格
-5. **SVG 结构**：确保 SVG 文件包含有效的 `<path>` 元素
-6. **缓存机制**：SVG 内容会被缓存，避免重复加载
+# XIcon 自定义图标组件
+
+## 概述
+
+XIcon 是一个统一管理自定义图标的组件，提供了丰富的内置图标，支持自定义样式，并且可以与 XTitle 组件无缝集成。
+
+## 特性
+
+- 🎨 丰富的内置图标库
+- 🎯 支持自定义样式
+- 🔧 易于扩展新图标
+- 📱 响应式设计
+- 🎪 与 XTitle 组件完美集成
+
+# XIcon 自定义图标组件
+
+## 概述
+
+XIcon 是一个专门管理自定义图标的组件，**动态加载** `src/assets/svg/his/` 目录下的 SVG 文件，支持自定义样式，并且可以与 XTitle 组件无缝集成。
+
+## 特性
+
+- 🎨 **动态加载 SVG 文件**，无需硬编码图标内容
+- 🎯 支持自定义样式
+- 🔧 **自动发现新图标**，添加 SVG 文件即可使用
+- 📱 响应式设计
+- 🎪 与 XTitle 组件完美集成
+- ⚡ 纯 SVG 渲染，性能优异
+- 💾 SVG 内容缓存，避免重复加载
+
+## 内置图标
+
+组件会自动加载 `src/assets/svg/his/` 目录下的所有 SVG 文件，使用文件名（去掉 `.svg` 扩展名）作为图标名称。
+
+### 当前可用的图标
+- `icon001` - HIS 系统图标（来自 `icon001.svg`）
+
+### 添加新图标
+只需在 `src/assets/svg/his/` 目录下添加新的 SVG 文件，组件会自动发现并可以使用：
+
+```bash
+# 添加新图标文件
+src/assets/svg/his/
+├── icon001.svg    # 已存在
+├── icon002.svg    # 新添加的图标
+├── user.svg       # 新添加的图标
+└── setting.svg    # 新添加的图标
+```
+
+使用方式：
+```vue
+<XIcon name="icon002" />
+<XIcon name="user" />
+<XIcon name="setting" />
+```
+
+## 基础用法
+
+```vue
+<template>
+  <!-- 使用动态加载的图标 -->
+  <XIcon name="icon001" />
+
+  <!-- 自定义样式 -->
+  <XIcon
+    name="icon001"
+    :style="{ color: '#52c41a', fontSize: '20px' }"
+  />
+
+  <!-- 自定义类名 -->
+  <XIcon
+    name="icon001"
+    className="custom-icon"
+  />
+</template>
+
+<script setup>
+import XIcon from '@/base-client/components/his/XIcon/XIcon.vue'
+</script>
+```
+
+## 在 XTitle 中使用
+
+```vue
+<template>
+  <!-- 使用 Ant Design 内置图标 -->
+  <XTitle icon="user" title="用户管理" />
+  <XTitle icon="setting" title="系统设置" />
+
+  <!-- 使用动态加载的自定义图标 -->
+  <XTitle customIcon="icon001" title="HIS 系统" />
+
+  <!-- 配置图标颜色 -->
+  <XTitle customIcon="icon001" title="HIS 系统" iconColor="red" />
+
+  <!-- 配置图标大小 -->
+  <XTitle customIcon="icon001" title="HIS 系统" iconSize="24px" />
+
+  <!-- 组合使用 -->
+  <XTitle customIcon="icon001" title="HIS 系统" iconColor="blue" iconSize="20px" dot />
+
+  <!-- 使用自定义 SVG 组件 -->
+  <XTitle :iconComponent="CustomIcon" title="自定义图标" />
+</template>
+
+<script setup>
+import XTitle from '@/base-client/components/his/XTitle/XTitle.vue'
+import CustomIcon from './CustomIcon.vue'
+</script>
+```
+
+## XTitle 属性说明
+
+### 默认样式
+XTitle 组件默认包含以下样式：
+- 只有右侧有 8px 间距
+- 图标垂直居中对齐
+- 图标默认样式（16px 字体大小）
+
+### 图标样式属性
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `iconColor` | String | - | 图标颜色，支持 CSS 颜色值 |
+| `iconSize` | String | - | 图标大小，支持 CSS 尺寸值 |
+| `iconStyle` | Object | - | 自定义样式对象，会合并到图标样式中 |
+
+### 其他样式属性
+- `dot` - 显示圆点
+- `nodot` - 隐藏圆点
+- `center` - 居中对齐
+- `littlefont` - 小字体
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| name | 图标名称 | String | - |
+| style | 自定义样式 | Object | {} |
+| className | 自定义类名 | String | '' |
+
+## 扩展新图标
+
+现在添加新图标非常简单，**无需修改代码**：
+
+1. **添加 SVG 文件**：在 `src/assets/svg/his/` 目录下添加新的 SVG 文件
+2. **使用图标**：直接使用文件名（去掉 `.svg` 扩展名）作为图标名称
+
+```bash
+# 示例：添加新图标
+src/assets/svg/his/
+├── icon001.svg    # 已存在
+├── icon002.svg    # 新添加
+├── user.svg       # 新添加
+└── setting.svg    # 新添加
+```
+
+```vue
+<!-- 直接使用，无需任何配置 -->
+<XIcon name="icon002" />
+<XIcon name="user" />
+<XIcon name="setting" />
+```
+
+### SVG 文件要求
+- 文件格式：`.svg`
+- 文件位置：`src/assets/svg/his/` 目录
+- 文件内容：标准的 SVG 格式，包含 `<path>` 元素
+- 命名：使用有意义的文件名，去掉 `.svg` 扩展名后就是图标名称
+
+## 注意事项
+
+1. **动态加载**：图标会在首次使用时动态加载，后续使用会从缓存中读取
+2. **SVG 格式**：确保在不同分辨率下都能清晰显示
+3. **颜色继承**：所有图标都使用 `currentColor` 作为填充色，会自动继承父元素的文字颜色
+4. **文件命名**：使用有意义的文件名，避免特殊字符和空格
+5. **SVG 结构**：确保 SVG 文件包含有效的 `<path>` 元素
+6. **缓存机制**：SVG 内容会被缓存，避免重复加载

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="import-button">
+  <div class="import-button" :class="wrapperClassObject">
     <a-button
       type="type"
       ref="importExcelButton"
@@ -37,6 +37,23 @@ export default {
   components: {
     XFrontImportExcel
   },
+  computed: {
+    // 参考 HForm 的 wrapperClassObject 规则，支持通过组件属性动态控制样式
+    wrapperClassObject () {
+      const a = this.$attrs || {}
+      const classes = {}
+      // 多个布尔型样式开关（存在且为真则生效）
+      const booleanStyleKeys = [
+        'fill-container'
+      ]
+      booleanStyleKeys.forEach(key => {
+        const val = a[key]
+        const truthy = val === true || val === '' || val === 'true'
+        if (truthy) classes[`x-import-button-${key}`] = true
+      })
+      return classes
+    }
+  },
   data () {
     return {
       // 图标样式
@@ -99,5 +116,32 @@ export default {
   },
 }
 </script>
-<style scoped>
+<style scoped lang="less">
+.import-button {
+  // 基础样式
+  :deep(.ant-btn) {
+      border-radius: 6px;
+      background-color: #FFFFFF;
+      //border: 1px solid #9499A0;
+      //color: #313131;
+      font-weight: normal;
+      letter-spacing: 0em;
+      width: 110px;
+      font-size: 16px;
+      font-family: "Source Han Sans";
+      line-height: normal;
+      margin-right: 25px;
+      height: 32px;
+      border: 1px solid #CDCDCD;
+      color: #5D5C5C;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+  }
+}
+.x-import-button-fill-container {
+  :deep(.ant-btn) {
+    width: 100%;
+    margin-right: 0px
+  }
+}
 </style>