vue2-client 1.16.67 → 1.16.69

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

@@ -1,919 +1,919 @@
-<template>
-  <div class="patient-info-descriptions" :class="wrapperClassObject">
-    <div class="descriptions-container">
-      <!-- 详情/收起按钮 -->
-      <div v-if="hasMoreItems" class="detail-button-wrapper">
-        <a-button
-          :type="(config && config.detailsConfig && config.detailsConfig.buttonType) || 'link'"
-          @click="toggleDetails"
-        >
-          <a-icon :type="showAllItems ? 'up' : 'down'" />
-          {{ showAllItems ? '收起' : ((config && config.detailsConfig && config.detailsConfig.buttonText) || '详情') }}
-        </a-button>
-      </div>
-
-      <!-- 当有 layout 配置时使用 a-descriptions -->
-      <template v-if="config && config.layout && !wrapperClassObject['xhdesc-medical-history']">
-        <a-descriptions
-          :column="config.layout"
-          :size="(config && config.style && config.style.size)"
-          :bordered="(config && config.style && config.style.bordered)"
-          layout="horizontal">
-          <template v-if="data">
-            <!-- 显示前N个标签 -->
-            <a-descriptions-item
-              v-for="(item) in visibleItemsFiltered"
-              :key="item.field"
-              :colon="item.colon !== false"
-              :class="{ 'with-divider': item.isLine }">
-              <template #label>
-                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
-                  <a-avatar
-                    v-if="item.showAvatar"
-                    :size="item.avatar.size"
-                    :icon="item.avatar.icon"
-                    :style="{ background: item.avatar.background }"
-                  />
-                  <span class="label-text">{{ item.label }}</span>
-                </div>
-              </template>
-              <a-tooltip
-                v-if="isContentOverflow(data[item.field])"
-                :title="data[item.field]"
-                placement="topLeft"
-                :overlay-style="{ maxWidth: '400px' }"
-              >
-                <div
-                  class="content-wrapper ellipsis"
-                  :data-full-text="data[item.field]"
-                >
-                  {{ data[item.field] }}
-                </div>
-              </a-tooltip>
-              <div
-                v-else
-                class="content-wrapper"
-                :data-full-text="data[item.field]"
-              >
-                {{ data[item.field] }}
-              </div>
-            </a-descriptions-item>
-
-            <!-- 展开后显示剩余标签 -->
-            <template v-if="showAllItems">
-              <a-descriptions-item
-                v-for="item in hiddenItemsFiltered"
-                :key="item.field"
-                :colon="item.colon !== false">
-                <template #label>
-                  <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
-                    <a-avatar
-                      v-if="item.showAvatar"
-                      :size="item.avatar.size"
-                      :icon="item.avatar.icon"
-                      :style="{ background: item.avatar.background }"
-                    />
-                    <span class="label-text">{{ item.label }}</span>
-                  </div>
-                </template>
-                <div
-                  class="content-wrapper"
-                  :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
-                  :data-full-text="data[item.field]"
-                >
-                  {{ data[item.field] }}
-                </div>
-              </a-descriptions-item>
-            </template>
-          </template>
-        </a-descriptions>
-      </template>
-
-      <!-- 医疗病史模式：使用自定义HTML结构实现文本环绕 -->
-      <template v-else-if="config && config.layout && wrapperClassObject['xhdesc-medical-history']">
-        <div class="medical-history-descriptions">
-          <template v-if="data">
-            <!-- 显示前N个标签 -->
-            <div
-              v-for="(item) in visibleItemsFiltered"
-              :key="item.field"
-              :class="['medical-history-item', { 'with-divider': item.isLine }]"
-            >
-              <div class="medical-history-content">
-                <a-tooltip
-                  v-if="isContentOverflow(data[item.field])"
-                  :title="data[item.field]"
-                  placement="topLeft"
-                  :overlay-style="{ maxWidth: '400px' }"
-                >
-                  <div class="medical-history-text ellipsis">
-                    <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
-                  </div>
-                </a-tooltip>
-                <div
-                  v-else
-                  class="medical-history-text"
-                >
-                  <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
-                </div>
-              </div>
-            </div>
-
-            <!-- 展开后显示剩余标签 -->
-            <template v-if="showAllItems">
-              <div
-                v-for="item in hiddenItemsFiltered"
-                :key="item.field"
-                class="medical-history-item"
-              >
-                <div class="medical-history-content">
-                  <a-tooltip
-                    v-if="isContentOverflow(data[item.field])"
-                    :title="data[item.field]"
-                    placement="topLeft"
-                    :overlay-style="{ maxWidth: '400px' }"
-                  >
-                    <div class="medical-history-text ellipsis">
-                      <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
-                    </div>
-                  </a-tooltip>
-                  <div
-                    v-else
-                    class="medical-history-text"
-                  >
-                    <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
-                  </div>
-                </div>
-              </div>
-            </template>
-          </template>
-        </div>
-      </template>
-
-      <!-- 当没有 layout 配置时使用自适应布局 -->
-      <template v-else>
-        <div class="flex-descriptions">
-          <template v-if="data">
-            <!-- 显示可见的标签 -->
-            <div
-              v-for="(item) in visibleItemsFiltered"
-              :key="item.field"
-              :class="['description-item', { 'with-divider': item.isLine }]"
-            >
-              <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
-                <a-avatar
-                  v-if="item.showAvatar"
-                  :size="item.avatar.size"
-                  :icon="item.avatar.icon"
-                  :style="{ background: item.avatar.background }"
-                />
-                <span class="label-text">{{ item.label }}：</span>
-              </div>
-              <a-tooltip
-                v-if="isContentOverflow(data[item.field])"
-                :title="data[item.field]"
-                placement="topLeft"
-                :overlay-style="{ maxWidth: '400px' }"
-              >
-                <div
-                  class="content-wrapper ellipsis"
-                  :data-full-text="data[item.field]"
-                >
-                  {{ data[item.field] }}
-                </div>
-              </a-tooltip>
-              <div
-                v-else
-                class="content-wrapper"
-                :data-full-text="data[item.field]"
-              >
-                {{ data[item.field] }}
-              </div>
-            </div>
-
-            <!-- 展开后显示的内容 -->
-            <template v-if="showAllItems">
-              <div
-                v-for="item in hiddenItemsFiltered"
-                :key="item.field"
-                class="description-item"
-              >
-                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
-                  <a-avatar
-                    v-if="item.showAvatar"
-                    :size="item.avatar.size"
-                    :icon="item.avatar.icon"
-                    :style="{ background: item.avatar.background }"
-                  />
-                  <span class="label-text">{{ item.label }}：</span>
-                </div>
-                <div
-                  class="content-wrapper"
-                  :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
-                  :data-full-text="data[item.field]"
-                >
-                  {{ data[item.field] }}
-                </div>
-              </div>
-            </template>
-          </template>
-        </div>
-      </template>
-
-      <!-- 可选：底部区域（分割线 + 三列内容） -->
-      <div v-if="config && config.footer && Array.isArray(config.footer.items) && data" class="xhdesc-footer">
-        <div class="xhdesc-divider" />
-        <!-- 医疗病史模式下的footer结构 -->
-        <div v-if="wrapperClassObject['xhdesc-medical-history']" class="medical-history-footer">
-          <div
-            v-for="(item, idx) in config.footer.items"
-            :key="item.field || idx"
-            class="medical-history-item">
-            <div class="medical-history-content">
-              <a-tooltip
-                v-if="isContentOverflow(data[item.field])"
-                :title="data[item.field]"
-                placement="topLeft"
-                :overlay-style="{ maxWidth: '400px' }"
-              >
-                <div class="medical-history-text ellipsis">
-                  <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
-                </div>
-              </a-tooltip>
-              <div
-                v-else
-                class="medical-history-text"
-              >
-                <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
-              </div>
-            </div>
-          </div>
-          <!-- 右侧信息：换到下一行并靠右对齐（如 医生 / 医嘱日期） -->
-          <div
-            v-if="Array.isArray(config.footer.rightItems) && config.footer.rightItems.length"
-            class="footer-right">
-            <div
-              v-for="(item, ridx) in config.footer.rightItems"
-              :key="item.field || ridx"
-              class="footer-right-item">
-              <div class="label-wrapper"><span class="label-text">{{ item.label }}：</span></div>
-              <div
-                class="content-wrapper"
-                :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
-                :data-full-text="data[item.field]"
-              >{{ data[item.field] }}
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 非医疗病史模式下的footer结构 -->
-        <div v-else class="footer-grid">
-          <div
-            v-for="(item, idx) in config.footer.items"
-            :key="item.field || idx"
-            class="description-item">
-            <div class="label-wrapper"><span class="label-text">{{ item.label }}：</span></div>
-            <div
-              class="content-wrapper"
-              :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
-              :data-full-text="data[item.field]"
-            >{{ data[item.field] }}
-            </div>
-          </div>
-        </div>
-        <!-- 右侧信息：换到下一行并靠右对齐（如 医生 / 医嘱日期） -->
-        <div
-          v-if="!wrapperClassObject['xhdesc-medical-history'] && Array.isArray(config.footer.rightItems) && config.footer.rightItems.length"
-          class="footer-right">
-          <div
-            v-for="(item, ridx) in config.footer.rightItems"
-            :key="item.field || ridx"
-            class="footer-right-item">
-            <div class="label-wrapper"><span class="label-text">{{ item.label }}：</span></div>
-            <div
-              class="content-wrapper"
-              :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
-              :data-full-text="data[item.field]"
-            >{{ data[item.field] }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XHDescriptions',
-  data () {
-    return {
-      // 隐藏配置 当数据结果 = -1^ 该数据字段会被delete
-      hiddenConfig: '-1^',
-      data: null,
-      config: null,
-      showAllItems: false // 控制是否显示所有标签
-    }
-  },
-  props: {
-    queryParamsName: {
-      type: String,
-      default: ''
-    },
-    parameter: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  computed: {
-    // 动态样式开关（与 HForm 思路一致）：布尔开关 + size 派生类
-    wrapperClassObject () {
-      const attrs = this.$attrs || {}
-      const classes = {}
-
-      const booleanStyleKeys = [
-        'description',
-        'no-padding',
-        'medical-history',
-        'margin-top-12'
-      ]
-      booleanStyleKeys.forEach(key => {
-        const val = attrs[key]
-        const truthy = val === true || val === '' || val === 'true'
-        if (truthy) classes[`xhdesc-${key}`] = true
-      })
-      const size = attrs.size
-      if (size && typeof size === 'string') classes[`xhdesc-size-${size}`] = true
-      return classes
-    },
-    // 获取详情按钮应该显示在第几个标签后
-    detailsAfterIndex () {
-      return (this.config && this.config.detailsConfig && this.config.detailsConfig.showAfterIndex) || 999
-    },
-    // 判断是否有更多标签需要显示
-    hasMoreItems () {
-      if (!(this.config && this.config.detailsConfig)) return false
-      if (!this.data || !(this.config && this.config.items) || !Array.isArray(this.config.items)) return false
-      const hiddenStartIndex = this.detailsAfterIndex || 0
-      if (hiddenStartIndex >= this.config.items.length) return false
-      for (let i = hiddenStartIndex; i < this.config.items.length; i++) {
-        const item = this.config.items[i]
-        if (item && item.field && this.data[item.field] !== null && this.data[item.field] !== undefined) {
-          return true
-        }
-      }
-      return false
-    },
-    // 获取应该显示的标签
-    visibleItems () {
-      if (!(this.config && this.config.items)) return []
-      if (!(this.config && this.config.detailsConfig)) return this.config.items
-      if (this.showAllItems) return this.config.items.slice(0, this.detailsAfterIndex)
-      return this.config.items.slice(0, this.detailsAfterIndex)
-    },
-    // 获取隐藏的标签（保持原有逻辑）
-    hiddenItems () {
-      if (!(this.config && this.config.items)) return []
-      if (!(this.config && this.config.detailsConfig)) return []
-      return this.config.items.slice(this.detailsAfterIndex)
-    },
-    // 过滤后可直接渲染的可见项
-    visibleItemsFiltered () {
-      const list = this.visibleItems || []
-      if (!this.data) return []
-      const res = list.filter(item => this.data[item.field] !== null && this.data[item.field] !== undefined)
-      if (!this.showAllItems) return res
-      const hiddenFields = new Set((this.hiddenItems || []).map(i => i.field))
-      return res.filter(item => !hiddenFields.has(item.field))
-    },
-    // 过滤后可直接渲染的隐藏项（仅展开时使用）
-    hiddenItemsFiltered () {
-      const list = this.hiddenItems || []
-      if (!this.data) return []
-      return list.filter(item => this.data[item.field] !== null && this.data[item.field] !== undefined)
-    }
-  },
-  created () {
-    this.getData(this.queryParamsName, {})
-  },
-  methods: {
-    async getData (data, parameterData) {
-      this.data = null
-      this.showAllItems = false
-      getConfigByName(data, 'af-his', res => {
-        this.config = res
-        const hiddenConfig = (this.config && this.config.hiddenConfig) || (0 === 1)
-        const parameter = { ...res.parameter, ...this.parameter, ...parameterData }
-        runLogic(res.logicName, parameter, 'af-his').then(result => {
-          if (hiddenConfig) {
-            for (const key in result) {
-              if (Object.prototype.hasOwnProperty.call(result, key) && result[key] === this.hiddenConfig) {
-                delete result[key]
-              }
-            }
-          }
-          this.data = result
-        })
-      })
-    },
-    toggleDetails () {
-      this.showAllItems = !this.showAllItems
-    },
-    // 判断内容是否超过三行
-    isContentOverflow (content) {
-      if (!content || typeof content !== 'string') return false
-      return content.length > 150
-    }
-  },
-  watch: {
-    queryParamsName: {
-      handler (newValue) {
-        console.log(newValue)
-        this.getData(newValue, {})
-      },
-      deep: true
-    },
-    parameter: {
-      handler (newValue, oldValue) {
-        console.log('监听事件触发:', { old: oldValue, new: newValue })
-        // 当 parameter 变化时重新获取数据
-        this.getData(this.queryParamsName, {})
-      },
-      deep: true // 深度监听对象内部变化
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.patient-info-descriptions {
-  background: #fff;
-  padding: 12px;
-  border-radius: 4px;
-  width: 100%;
-}
-
-.descriptions-container {
-  position: relative;
-  width: 100%;
-  padding-right: 80px; /* 为按钮预留空间 */
-}
-
-/* 自适应布局样式 */
-.flex-descriptions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px 24px;
-  width: 100%;
-}
-
-.description-item {
-  display: inline-flex;
-  align-items: center;
-  padding: 4px 8px;
-  border-radius: 4px;
-  transition: background-color 0.3s;
-  white-space: nowrap;
-  flex: 0 1 auto;
-}
-
-.description-item:hover {
-  background-color: rgba(0, 0, 0, 0.02);
-}
-
-/* 共用样式 */
-.label-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
-  white-space: nowrap;
-}
-
-.label-text {
-  white-space: nowrap;
-  color: #313131; // 统一深灰
-  text-decoration: none !important; // 移除下划线
-}
-
-.content-wrapper {
-  display: inline-flex;
-  align-items: center;
-  margin-left: 4px;
-  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
-  color: rgba(0, 0, 0, 0.85);
-  text-decoration: none !important; // 移除可能的下划线
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* 强制移除任何链接样式（如接口返回含 <a>） */
-::v-deep a {
-  color: #313131 !important;
-  text-decoration: none !important;
-}
-
-.detail-button-wrapper {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 10;
-  padding: 4px 8px;
-  white-space: nowrap;
-  background-color: #fff;
-}
-
-/* 底部区域：分割线 + 三列内容 */
-.xhdesc-footer {
-  margin-top: 12px;
-}
-
-.xhdesc-divider {
-  width: calc(100% + 24px); /* 扩展到左右内边距之外 */
-  height: 0;
-  border-bottom: 1px solid #E5E9F0;
-  margin: 10px -12px 14px; /* 抵消左右 12px 内边距 */
-  overflow: hidden;
-}
-/* medical-history 模式：左 padding 11px，右 12px（由外层设置），做精确抵消 */
-.patient-info-descriptions.xhdesc-medical-history .xhdesc-divider {
-  width: calc(100% + 23px);
-  margin-left: -11px;
-  margin-right: -12px;
-}
-
-.footer-grid {
-  display: grid;
-  grid-template-columns: 1fr; // 单列
-  gap: 8px 24px; // 与上方描述项间距保持一致
-  align-items: start; // 左上对齐
-}
-
-/* footer 区域的每项直接沿用通用 .description-item/.label-wrapper/.content-wrapper 样式 */
-
-.footer-right {
-  margin-top: 8px;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 16px;
-}
-
-.footer-right-item {
-  display: inline-flex;
-  align-items: center;
-}
-
-/* Ant Design 描述列表样式覆盖 */
-::v-deep(.ant-descriptions-row) {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-}
-
-::v-deep(.ant-descriptions-item) {
-  padding: 0 !important;
-  display: flex !important;
-  align-items: flex-start !important;
-  flex-direction: row !important;
-  margin-right: 24px;
-  width: fit-content !important;
-  margin-bottom: 16px;
-}
-
-::v-deep(.ant-descriptions-item-container) {
-  display: flex !important;
-  flex-direction: row !important;
-  align-items: flex-start !important;
-  position: relative;
-  gap: 0 !important;
-  width: 100% !important;
-}
-
-::v-deep(.ant-descriptions-item-label) {
-  color: rgba(0, 0, 0, 0.65);
-  padding: 0 !important;
-  margin: 0 !important;
-  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
-  display: inline-flex !important;
-  align-items: center !important;
-  white-space: nowrap !important;
-  min-width: v-bind('(config && config.style && config.style.labelWidth) || "80px"');
-  justify-content: flex-start;
-  padding-right: 2px !important;
-}
-
-::v-deep(.ant-descriptions-item-content) {
-  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
-  display: inline-flex !important;
-  align-items: center !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  margin-left: 0px !important;
-}
-
-::v-deep(.ant-descriptions-item-colon) {
-  position: static !important;
-  display: inline-flex !important;
-  align-items: center !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  margin-right: 2px !important;
-}
-
-::v-deep(.ant-descriptions-item-container:hover) {
-  background-color: rgba(0, 0, 0, 0.02);
-  border-radius: 4px;
-}
-
-::v-deep(.ant-btn-link) {
-  padding: 0;
-  height: auto;
-  line-height: 1;
-}
-
-::v-deep(.ant-btn-link:hover) {
-  color: #1890ff;
-  background: transparent;
-}
-
-/* 响应式调整 */
-@media screen and (max-width: 768px) {
-  .content-wrapper {
-    max-width: 200px;
-  }
-}
-
-@media screen and (max-width: 576px) {
-  .content-wrapper {
-    max-width: 150px;
-  }
-  .flex-descriptions {
-    gap: 4px 12px;
-  }
-}
-
-/* 添加虚线样式 */
-.with-divider {
-  position: relative;
-  margin-bottom: 16px !important;
-}
-
-.with-divider::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: -8px;
-  width: 100%;
-  height: 0;
-  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
-}
-
-/* 对于 Ant Design 描述列表的特殊处理 */
-::v-deep(.ant-descriptions-item.with-divider) {
-  position: relative;
-  margin-bottom: 16px !important;
-}
-
-::v-deep(.ant-descriptions-item.with-divider::after) {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: -8px;
-  width: 100%;
-  height: 0;
-  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
-}
-
-/* 加边框 */
-.xhdesc-description {
-  padding: 4px 4px 4px 4px;
-
-  /* 作用域内 *patient-info-descriptions */
-  &.patient-info-descriptions,
-  .patient-info-descriptions {
-    border: 1px solid #E5E9F0;
-    border-radius: 6px;
-    padding: 6.5px 12px;
-
-    /* *ant-btn-link */
-    ::v-deep .ant-btn-link {
-      border: none;
-    }
-
-    /* *ant-descriptions-item-content */
-    ::v-deep .ant-descriptions-item-content {
-      font-weight: bold;
-    }
-  }
-}
-// 去除住院收费页面两个描述列表之间的间距
-.xhdesc-margin-top-12 {
-  margin-top: -12px;
-}
-.xhdesc-no-padding {
-  padding: 0px;
-  &.patient-info-descriptions,
-  .patient-info-descriptions {
-    /* *ant-descriptions-item-content */
-    ::v-deep .descriptions-container {
-      padding: 0px;
-    }
-    ::v-deep .content-wrapper {
-      margin: 0px;
-    }
-  }
-}
-/* 医疗病史模式：自定义HTML结构样式 */
-.medical-history-descriptions {
-  width: 100%;
-}
-
-.medical-history-item {
-  margin: 0;
-  width: 100%;
-}
-
-.medical-history-item.with-divider {
-  position: relative;
-  padding-bottom: 4px; /* 分割线与上方间距 4px */
-  margin-bottom: 4px;  /* 分割线与下方间距 4px */
-}
-
-.medical-history-item.with-divider::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  bottom: 0; /* 贴合容器底部 */
-  width: 100%;
-  height: 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-}
-
-.medical-history-content {
-  font-family: "Source Han Sans";
-  font-size: 18px;
-  line-height: 24px;
-  letter-spacing: 0em;
-  text-align: left;
-  word-break: break-word;
-  white-space: normal;
-  text-indent: 0;
-  padding-left: 0;
-  margin-left: 0;
-  /* 使用float实现真正的文本环绕 */
-  overflow: hidden;
-  /* 确保容器能够正确清除浮动 */
-  position: relative;
-}
-
-.medical-history-label {
-  font-family: "Source Han Sans";
-  font-size: 16px;
-  font-weight: 700;
-  color: #313131;
-  white-space: nowrap;
-  float: left;
-  margin-right: 0px;
-  /* 确保标签不会影响文本流 */
-  position: relative;
-  z-index: 1;
-}
-
-.medical-history-text {
-  font-family: "Source Han Sans";
-  font-size: 16px;
-  font-weight: 400;
-  color: #313131;
-  display: block;
-  overflow: hidden;
-  text-indent: 0;
-  padding-left: 0;
-  margin-left: 0;
-  word-break: break-word;
-  white-space: normal;
-  text-align: left;
-  line-height: 24px;
-  /* 确保文本能够正确环绕浮动元素 */
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.medical-history-text.ellipsis {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
-  overflow: hidden;
-  cursor: pointer;
-  position: relative;
-  word-break: break-word;
-  white-space: normal;
-  line-height: 24px;
-  text-indent: 0;
-  padding-left: 0;
-  margin-left: 0;
-  text-align: left;
-  -webkit-box-pack: start;
-  -webkit-box-align: start;
-}
-
-/* 使用-webkit-line-clamp时不需要手动添加省略号 */
-.medical-history-text.ellipsis::after {
-  display: none;
-}
-
-/* 针对多行文本的特殊处理：确保换行文本与首行对齐 */
-.medical-history-text.ellipsis::first-line {
-  text-indent: 0;
-}
-
-/* 为不支持-webkit-line-clamp的浏览器提供后备方案 */
-@supports not (-webkit-line-clamp: 3) {
-  .medical-history-text.ellipsis {
-    display: block;
-    max-height: 72px; /* 3行 * 24px行高 */
-    overflow: hidden;
-    position: relative;
-  }
-
-  .medical-history-text.ellipsis::after {
-    content: '...';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    background: #fff;
-    padding-left: 4px;
-    display: block;
-  }
-}
-
-/* 医疗病史样式开关：通过 wrapperClassObject 添加类 xhdesc-medical-history */
-.patient-info-descriptions.xhdesc-medical-history {
-  padding: 9px 12px 10px 11px !important;
-  /* 移除右侧空白（本模式不需要详情按钮预留空间） */
-  .descriptions-container {
-    padding-right: 0;
-    padding-left: 0px;
-  }
-  /* 医疗病史模式下：footer 区域使用与上方相同的医疗病史样式 */
-  .medical-history-footer {
-    width: 100%;
-  }
-  .medical-history-footer .footer-right {
-    margin-top: 8px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-start;
-    gap: 16px;
-    width: 100%;
-  }
-  /* 右侧（医生/医嘱日期）标签与值的字体要求 */
-  .medical-history-footer .footer-right .label-wrapper .label-text {
-    font-family: "Source Han Sans";
-    font-size: 16px;
-    font-weight: 700;
-    color: #313131;
-    line-height: 22px;
-  }
-  .medical-history-footer .footer-right .content-wrapper {
-    font-family: "Source Han Sans";
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 22px;
-    color: #313131;
-  }
-
-  .medical-history-footer .footer-right .medical-history-item {
-    display: inline-block;
-    text-align: right;
-  }
-
-  .medical-history-footer .footer-right .medical-history-content {
-    text-align: right;
-  }
-
-  .medical-history-footer .footer-right .medical-history-label {
-    float: none;
-    display: inline;
-    margin-right: 0px;
-  }
-
-  .medical-history-footer .footer-right .medical-history-text {
-    display: inline;
-    text-align: right;
-  }
-
-  .medical-history-footer .footer-right .medical-history-text.ellipsis {
-    display: inline;
-    text-align: right;
-  }
-}
-</style>
+<template>
+  <div class="patient-info-descriptions" :class="wrapperClassObject">
+    <div class="descriptions-container">
+      <!-- 详情/收起按钮 -->
+      <div v-if="hasMoreItems" class="detail-button-wrapper">
+        <a-button
+          :type="(config && config.detailsConfig && config.detailsConfig.buttonType) || 'link'"
+          @click="toggleDetails"
+        >
+          <a-icon :type="showAllItems ? 'up' : 'down'" />
+          {{ showAllItems ? '收起' : ((config && config.detailsConfig && config.detailsConfig.buttonText) || '详情') }}
+        </a-button>
+      </div>
+
+      <!-- 当有 layout 配置时使用 a-descriptions -->
+      <template v-if="config && config.layout && !wrapperClassObject['xhdesc-medical-history']">
+        <a-descriptions
+          :column="config.layout"
+          :size="(config && config.style && config.style.size)"
+          :bordered="(config && config.style && config.style.bordered)"
+          layout="horizontal">
+          <template v-if="data">
+            <!-- 显示前N个标签 -->
+            <a-descriptions-item
+              v-for="(item) in visibleItemsFiltered"
+              :key="item.field"
+              :colon="item.colon !== false"
+              :class="{ 'with-divider': item.isLine }">
+              <template #label>
+                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
+                  <a-avatar
+                    v-if="item.showAvatar"
+                    :size="item.avatar.size"
+                    :icon="item.avatar.icon"
+                    :style="{ background: item.avatar.background }"
+                  />
+                  <span class="label-text">{{ item.label }}</span>
+                </div>
+              </template>
+              <a-tooltip
+                v-if="isContentOverflow(data[item.field])"
+                :title="data[item.field]"
+                placement="topLeft"
+                :overlay-style="{ maxWidth: '400px' }"
+              >
+                <div
+                  class="content-wrapper ellipsis"
+                  :data-full-text="data[item.field]"
+                >
+                  {{ data[item.field] }}
+                </div>
+              </a-tooltip>
+              <div
+                v-else
+                class="content-wrapper"
+                :data-full-text="data[item.field]"
+              >
+                {{ data[item.field] }}
+              </div>
+            </a-descriptions-item>
+
+            <!-- 展开后显示剩余标签 -->
+            <template v-if="showAllItems">
+              <a-descriptions-item
+                v-for="item in hiddenItemsFiltered"
+                :key="item.field"
+                :colon="item.colon !== false">
+                <template #label>
+                  <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
+                    <a-avatar
+                      v-if="item.showAvatar"
+                      :size="item.avatar.size"
+                      :icon="item.avatar.icon"
+                      :style="{ background: item.avatar.background }"
+                    />
+                    <span class="label-text">{{ item.label }}</span>
+                  </div>
+                </template>
+                <div
+                  class="content-wrapper"
+                  :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
+                  :data-full-text="data[item.field]"
+                >
+                  {{ data[item.field] }}
+                </div>
+              </a-descriptions-item>
+            </template>
+          </template>
+        </a-descriptions>
+      </template>
+
+      <!-- 医疗病史模式：使用自定义HTML结构实现文本环绕 -->
+      <template v-else-if="config && config.layout && wrapperClassObject['xhdesc-medical-history']">
+        <div class="medical-history-descriptions">
+          <template v-if="data">
+            <!-- 显示前N个标签 -->
+            <div
+              v-for="(item) in visibleItemsFiltered"
+              :key="item.field"
+              :class="['medical-history-item', { 'with-divider': item.isLine }]"
+            >
+              <div class="medical-history-content">
+                <a-tooltip
+                  v-if="isContentOverflow(data[item.field])"
+                  :title="data[item.field]"
+                  placement="topLeft"
+                  :overlay-style="{ maxWidth: '400px' }"
+                >
+                  <div class="medical-history-text ellipsis">
+                    <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
+                  </div>
+                </a-tooltip>
+                <div
+                  v-else
+                  class="medical-history-text"
+                >
+                  <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 展开后显示剩余标签 -->
+            <template v-if="showAllItems">
+              <div
+                v-for="item in hiddenItemsFiltered"
+                :key="item.field"
+                class="medical-history-item"
+              >
+                <div class="medical-history-content">
+                  <a-tooltip
+                    v-if="isContentOverflow(data[item.field])"
+                    :title="data[item.field]"
+                    placement="topLeft"
+                    :overlay-style="{ maxWidth: '400px' }"
+                  >
+                    <div class="medical-history-text ellipsis">
+                      <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
+                    </div>
+                  </a-tooltip>
+                  <div
+                    v-else
+                    class="medical-history-text"
+                  >
+                    <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </template>
+        </div>
+      </template>
+
+      <!-- 当没有 layout 配置时使用自适应布局 -->
+      <template v-else>
+        <div class="flex-descriptions">
+          <template v-if="data">
+            <!-- 显示可见的标签 -->
+            <div
+              v-for="(item) in visibleItemsFiltered"
+              :key="item.field"
+              :class="['description-item', { 'with-divider': item.isLine }]"
+            >
+              <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
+                <a-avatar
+                  v-if="item.showAvatar"
+                  :size="item.avatar.size"
+                  :icon="item.avatar.icon"
+                  :style="{ background: item.avatar.background }"
+                />
+                <span class="label-text">{{ item.label }}：</span>
+              </div>
+              <a-tooltip
+                v-if="isContentOverflow(data[item.field])"
+                :title="data[item.field]"
+                placement="topLeft"
+                :overlay-style="{ maxWidth: '400px' }"
+              >
+                <div
+                  class="content-wrapper ellipsis"
+                  :data-full-text="data[item.field]"
+                >
+                  {{ data[item.field] }}
+                </div>
+              </a-tooltip>
+              <div
+                v-else
+                class="content-wrapper"
+                :data-full-text="data[item.field]"
+              >
+                {{ data[item.field] }}
+              </div>
+            </div>
+
+            <!-- 展开后显示的内容 -->
+            <template v-if="showAllItems">
+              <div
+                v-for="item in hiddenItemsFiltered"
+                :key="item.field"
+                class="description-item"
+              >
+                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
+                  <a-avatar
+                    v-if="item.showAvatar"
+                    :size="item.avatar.size"
+                    :icon="item.avatar.icon"
+                    :style="{ background: item.avatar.background }"
+                  />
+                  <span class="label-text">{{ item.label }}：</span>
+                </div>
+                <div
+                  class="content-wrapper"
+                  :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
+                  :data-full-text="data[item.field]"
+                >
+                  {{ data[item.field] }}
+                </div>
+              </div>
+            </template>
+          </template>
+        </div>
+      </template>
+
+      <!-- 可选：底部区域（分割线 + 三列内容） -->
+      <div v-if="config && config.footer && Array.isArray(config.footer.items) && data" class="xhdesc-footer">
+        <div class="xhdesc-divider" />
+        <!-- 医疗病史模式下的footer结构 -->
+        <div v-if="wrapperClassObject['xhdesc-medical-history']" class="medical-history-footer">
+          <div
+            v-for="(item, idx) in config.footer.items"
+            :key="item.field || idx"
+            class="medical-history-item">
+            <div class="medical-history-content">
+              <a-tooltip
+                v-if="isContentOverflow(data[item.field])"
+                :title="data[item.field]"
+                placement="topLeft"
+                :overlay-style="{ maxWidth: '400px' }"
+              >
+                <div class="medical-history-text ellipsis">
+                  <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
+                </div>
+              </a-tooltip>
+              <div
+                v-else
+                class="medical-history-text"
+              >
+                <span class="medical-history-label">{{ item.label }}：</span>{{ data[item.field] }}
+              </div>
+            </div>
+          </div>
+          <!-- 右侧信息：换到下一行并靠右对齐（如 医生 / 医嘱日期） -->
+          <div
+            v-if="Array.isArray(config.footer.rightItems) && config.footer.rightItems.length"
+            class="footer-right">
+            <div
+              v-for="(item, ridx) in config.footer.rightItems"
+              :key="item.field || ridx"
+              class="footer-right-item">
+              <div class="label-wrapper"><span class="label-text">{{ item.label }}：</span></div>
+              <div
+                class="content-wrapper"
+                :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
+                :data-full-text="data[item.field]"
+              >{{ data[item.field] }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 非医疗病史模式下的footer结构 -->
+        <div v-else class="footer-grid">
+          <div
+            v-for="(item, idx) in config.footer.items"
+            :key="item.field || idx"
+            class="description-item">
+            <div class="label-wrapper"><span class="label-text">{{ item.label }}：</span></div>
+            <div
+              class="content-wrapper"
+              :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
+              :data-full-text="data[item.field]"
+            >{{ data[item.field] }}
+            </div>
+          </div>
+        </div>
+        <!-- 右侧信息：换到下一行并靠右对齐（如 医生 / 医嘱日期） -->
+        <div
+          v-if="!wrapperClassObject['xhdesc-medical-history'] && Array.isArray(config.footer.rightItems) && config.footer.rightItems.length"
+          class="footer-right">
+          <div
+            v-for="(item, ridx) in config.footer.rightItems"
+            :key="item.field || ridx"
+            class="footer-right-item">
+            <div class="label-wrapper"><span class="label-text">{{ item.label }}：</span></div>
+            <div
+              class="content-wrapper"
+              :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
+              :data-full-text="data[item.field]"
+            >{{ data[item.field] }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XHDescriptions',
+  data () {
+    return {
+      // 隐藏配置 当数据结果 = -1^ 该数据字段会被delete
+      hiddenConfig: '-1^',
+      data: null,
+      config: null,
+      showAllItems: false // 控制是否显示所有标签
+    }
+  },
+  props: {
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    parameter: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  computed: {
+    // 动态样式开关（与 HForm 思路一致）：布尔开关 + size 派生类
+    wrapperClassObject () {
+      const attrs = this.$attrs || {}
+      const classes = {}
+
+      const booleanStyleKeys = [
+        'description',
+        'no-padding',
+        'medical-history',
+        'margin-top-12'
+      ]
+      booleanStyleKeys.forEach(key => {
+        const val = attrs[key]
+        const truthy = val === true || val === '' || val === 'true'
+        if (truthy) classes[`xhdesc-${key}`] = true
+      })
+      const size = attrs.size
+      if (size && typeof size === 'string') classes[`xhdesc-size-${size}`] = true
+      return classes
+    },
+    // 获取详情按钮应该显示在第几个标签后
+    detailsAfterIndex () {
+      return (this.config && this.config.detailsConfig && this.config.detailsConfig.showAfterIndex) || 999
+    },
+    // 判断是否有更多标签需要显示
+    hasMoreItems () {
+      if (!(this.config && this.config.detailsConfig)) return false
+      if (!this.data || !(this.config && this.config.items) || !Array.isArray(this.config.items)) return false
+      const hiddenStartIndex = this.detailsAfterIndex || 0
+      if (hiddenStartIndex >= this.config.items.length) return false
+      for (let i = hiddenStartIndex; i < this.config.items.length; i++) {
+        const item = this.config.items[i]
+        if (item && item.field && this.data[item.field] !== null && this.data[item.field] !== undefined) {
+          return true
+        }
+      }
+      return false
+    },
+    // 获取应该显示的标签
+    visibleItems () {
+      if (!(this.config && this.config.items)) return []
+      if (!(this.config && this.config.detailsConfig)) return this.config.items
+      if (this.showAllItems) return this.config.items.slice(0, this.detailsAfterIndex)
+      return this.config.items.slice(0, this.detailsAfterIndex)
+    },
+    // 获取隐藏的标签（保持原有逻辑）
+    hiddenItems () {
+      if (!(this.config && this.config.items)) return []
+      if (!(this.config && this.config.detailsConfig)) return []
+      return this.config.items.slice(this.detailsAfterIndex)
+    },
+    // 过滤后可直接渲染的可见项
+    visibleItemsFiltered () {
+      const list = this.visibleItems || []
+      if (!this.data) return []
+      const res = list.filter(item => this.data[item.field] !== null && this.data[item.field] !== undefined)
+      if (!this.showAllItems) return res
+      const hiddenFields = new Set((this.hiddenItems || []).map(i => i.field))
+      return res.filter(item => !hiddenFields.has(item.field))
+    },
+    // 过滤后可直接渲染的隐藏项（仅展开时使用）
+    hiddenItemsFiltered () {
+      const list = this.hiddenItems || []
+      if (!this.data) return []
+      return list.filter(item => this.data[item.field] !== null && this.data[item.field] !== undefined)
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName, {})
+  },
+  methods: {
+    async getData (data, parameterData) {
+      this.data = null
+      this.showAllItems = false
+      getConfigByName(data, 'af-his', res => {
+        this.config = res
+        const hiddenConfig = (this.config && this.config.hiddenConfig) || (0 === 1)
+        const parameter = { ...res.parameter, ...this.parameter, ...parameterData }
+        runLogic(res.logicName, parameter, 'af-his').then(result => {
+          if (hiddenConfig) {
+            for (const key in result) {
+              if (Object.prototype.hasOwnProperty.call(result, key) && result[key] === this.hiddenConfig) {
+                delete result[key]
+              }
+            }
+          }
+          this.data = result
+        })
+      })
+    },
+    toggleDetails () {
+      this.showAllItems = !this.showAllItems
+    },
+    // 判断内容是否超过三行
+    isContentOverflow (content) {
+      if (!content || typeof content !== 'string') return false
+      return content.length > 150
+    }
+  },
+  watch: {
+    queryParamsName: {
+      handler (newValue) {
+        console.log(newValue)
+        this.getData(newValue, {})
+      },
+      deep: true
+    },
+    parameter: {
+      handler (newValue, oldValue) {
+        console.log('监听事件触发:', { old: oldValue, new: newValue })
+        // 当 parameter 变化时重新获取数据
+        this.getData(this.queryParamsName, {})
+      },
+      deep: true // 深度监听对象内部变化
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.patient-info-descriptions {
+  background: #fff;
+  padding: 12px;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.descriptions-container {
+  position: relative;
+  width: 100%;
+  padding-right: 80px; /* 为按钮预留空间 */
+}
+
+/* 自适应布局样式 */
+.flex-descriptions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+  width: 100%;
+}
+
+.description-item {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+  white-space: nowrap;
+  flex: 0 1 auto;
+}
+
+.description-item:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* 共用样式 */
+.label-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
+  white-space: nowrap;
+}
+
+.label-text {
+  white-space: nowrap;
+  color: #313131; // 统一深灰
+  text-decoration: none !important; // 移除下划线
+}
+
+.content-wrapper {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 4px;
+  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
+  color: rgba(0, 0, 0, 0.85);
+  text-decoration: none !important; // 移除可能的下划线
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 强制移除任何链接样式（如接口返回含 <a>） */
+::v-deep a {
+  color: #313131 !important;
+  text-decoration: none !important;
+}
+
+.detail-button-wrapper {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  padding: 4px 8px;
+  white-space: nowrap;
+  background-color: #fff;
+}
+
+/* 底部区域：分割线 + 三列内容 */
+.xhdesc-footer {
+  margin-top: 12px;
+}
+
+.xhdesc-divider {
+  width: calc(100% + 24px); /* 扩展到左右内边距之外 */
+  height: 0;
+  border-bottom: 1px solid #E5E9F0;
+  margin: 10px -12px 14px; /* 抵消左右 12px 内边距 */
+  overflow: hidden;
+}
+/* medical-history 模式：左 padding 11px，右 12px（由外层设置），做精确抵消 */
+.patient-info-descriptions.xhdesc-medical-history .xhdesc-divider {
+  width: calc(100% + 23px);
+  margin-left: -11px;
+  margin-right: -12px;
+}
+
+.footer-grid {
+  display: grid;
+  grid-template-columns: 1fr; // 单列
+  gap: 8px 24px; // 与上方描述项间距保持一致
+  align-items: start; // 左上对齐
+}
+
+/* footer 区域的每项直接沿用通用 .description-item/.label-wrapper/.content-wrapper 样式 */
+
+.footer-right {
+  margin-top: 8px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 16px;
+}
+
+.footer-right-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Ant Design 描述列表样式覆盖 */
+::v-deep(.ant-descriptions-row) {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+::v-deep(.ant-descriptions-item) {
+  padding: 0 !important;
+  display: flex !important;
+  align-items: flex-start !important;
+  flex-direction: row !important;
+  margin-right: 24px;
+  width: fit-content !important;
+  margin-bottom: 16px;
+}
+
+::v-deep(.ant-descriptions-item-container) {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: flex-start !important;
+  position: relative;
+  gap: 0 !important;
+  width: 100% !important;
+}
+
+::v-deep(.ant-descriptions-item-label) {
+  color: rgba(0, 0, 0, 0.65);
+  padding: 0 !important;
+  margin: 0 !important;
+  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
+  display: inline-flex !important;
+  align-items: center !important;
+  white-space: nowrap !important;
+  min-width: v-bind('(config && config.style && config.style.labelWidth) || "80px"');
+  justify-content: flex-start;
+  padding-right: 2px !important;
+}
+
+::v-deep(.ant-descriptions-item-content) {
+  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"');
+  display: inline-flex !important;
+  align-items: center !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  margin-left: 0px !important;
+}
+
+::v-deep(.ant-descriptions-item-colon) {
+  position: static !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  margin-right: 2px !important;
+}
+
+::v-deep(.ant-descriptions-item-container:hover) {
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+}
+
+::v-deep(.ant-btn-link) {
+  padding: 0;
+  height: auto;
+  line-height: 1;
+}
+
+::v-deep(.ant-btn-link:hover) {
+  color: #1890ff;
+  background: transparent;
+}
+
+/* 响应式调整 */
+@media screen and (max-width: 768px) {
+  .content-wrapper {
+    max-width: 200px;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .content-wrapper {
+    max-width: 150px;
+  }
+  .flex-descriptions {
+    gap: 4px 12px;
+  }
+}
+
+/* 添加虚线样式 */
+.with-divider {
+  position: relative;
+  margin-bottom: 16px !important;
+}
+
+.with-divider::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  width: 100%;
+  height: 0;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
+}
+
+/* 对于 Ant Design 描述列表的特殊处理 */
+::v-deep(.ant-descriptions-item.with-divider) {
+  position: relative;
+  margin-bottom: 16px !important;
+}
+
+::v-deep(.ant-descriptions-item.with-divider::after) {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  width: 100%;
+  height: 0;
+  border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
+}
+
+/* 加边框 */
+.xhdesc-description {
+  padding: 4px 4px 4px 4px;
+
+  /* 作用域内 *patient-info-descriptions */
+  &.patient-info-descriptions,
+  .patient-info-descriptions {
+    border: 1px solid #E5E9F0;
+    border-radius: 6px;
+    padding: 6.5px 12px;
+
+    /* *ant-btn-link */
+    ::v-deep .ant-btn-link {
+      border: none;
+    }
+
+    /* *ant-descriptions-item-content */
+    ::v-deep .ant-descriptions-item-content {
+      font-weight: bold;
+    }
+  }
+}
+// 去除住院收费页面两个描述列表之间的间距
+.xhdesc-margin-top-12 {
+  margin-top: -12px;
+}
+.xhdesc-no-padding {
+  padding: 0px;
+  &.patient-info-descriptions,
+  .patient-info-descriptions {
+    /* *ant-descriptions-item-content */
+    ::v-deep .descriptions-container {
+      padding: 0px;
+    }
+    ::v-deep .content-wrapper {
+      margin: 0px;
+    }
+  }
+}
+/* 医疗病史模式：自定义HTML结构样式 */
+.medical-history-descriptions {
+  width: 100%;
+}
+
+.medical-history-item {
+  margin: 0;
+  width: 100%;
+}
+
+.medical-history-item.with-divider {
+  position: relative;
+  padding-bottom: 4px; /* 分割线与上方间距 4px */
+  margin-bottom: 4px;  /* 分割线与下方间距 4px */
+}
+
+.medical-history-item.with-divider::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0; /* 贴合容器底部 */
+  width: 100%;
+  height: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.medical-history-content {
+  font-family: "Source Han Sans";
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0em;
+  text-align: left;
+  word-break: break-word;
+  white-space: normal;
+  text-indent: 0;
+  padding-left: 0;
+  margin-left: 0;
+  /* 使用float实现真正的文本环绕 */
+  overflow: hidden;
+  /* 确保容器能够正确清除浮动 */
+  position: relative;
+}
+
+.medical-history-label {
+  font-family: "Source Han Sans";
+  font-size: 16px;
+  font-weight: 700;
+  color: #313131;
+  white-space: nowrap;
+  float: left;
+  margin-right: 0px;
+  /* 确保标签不会影响文本流 */
+  position: relative;
+  z-index: 1;
+}
+
+.medical-history-text {
+  font-family: "Source Han Sans";
+  font-size: 16px;
+  font-weight: 400;
+  color: #313131;
+  display: block;
+  overflow: hidden;
+  text-indent: 0;
+  padding-left: 0;
+  margin-left: 0;
+  word-break: break-word;
+  white-space: normal;
+  text-align: left;
+  line-height: 24px;
+  /* 确保文本能够正确环绕浮动元素 */
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.medical-history-text.ellipsis {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  word-break: break-word;
+  white-space: normal;
+  line-height: 24px;
+  text-indent: 0;
+  padding-left: 0;
+  margin-left: 0;
+  text-align: left;
+  -webkit-box-pack: start;
+  -webkit-box-align: start;
+}
+
+/* 使用-webkit-line-clamp时不需要手动添加省略号 */
+.medical-history-text.ellipsis::after {
+  display: none;
+}
+
+/* 针对多行文本的特殊处理：确保换行文本与首行对齐 */
+.medical-history-text.ellipsis::first-line {
+  text-indent: 0;
+}
+
+/* 为不支持-webkit-line-clamp的浏览器提供后备方案 */
+@supports not (-webkit-line-clamp: 3) {
+  .medical-history-text.ellipsis {
+    display: block;
+    max-height: 72px; /* 3行 * 24px行高 */
+    overflow: hidden;
+    position: relative;
+  }
+
+  .medical-history-text.ellipsis::after {
+    content: '...';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    padding-left: 4px;
+    display: block;
+  }
+}
+
+/* 医疗病史样式开关：通过 wrapperClassObject 添加类 xhdesc-medical-history */
+.patient-info-descriptions.xhdesc-medical-history {
+  padding: 9px 12px 10px 11px !important;
+  /* 移除右侧空白（本模式不需要详情按钮预留空间） */
+  .descriptions-container {
+    padding-right: 0;
+    padding-left: 0px;
+  }
+  /* 医疗病史模式下：footer 区域使用与上方相同的医疗病史样式 */
+  .medical-history-footer {
+    width: 100%;
+  }
+  .medical-history-footer .footer-right {
+    margin-top: 8px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: 16px;
+    width: 100%;
+  }
+  /* 右侧（医生/医嘱日期）标签与值的字体要求 */
+  .medical-history-footer .footer-right .label-wrapper .label-text {
+    font-family: "Source Han Sans";
+    font-size: 16px;
+    font-weight: 700;
+    color: #313131;
+    line-height: 22px;
+  }
+  .medical-history-footer .footer-right .content-wrapper {
+    font-family: "Source Han Sans";
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 22px;
+    color: #313131;
+  }
+
+  .medical-history-footer .footer-right .medical-history-item {
+    display: inline-block;
+    text-align: right;
+  }
+
+  .medical-history-footer .footer-right .medical-history-content {
+    text-align: right;
+  }
+
+  .medical-history-footer .footer-right .medical-history-label {
+    float: none;
+    display: inline;
+    margin-right: 0px;
+  }
+
+  .medical-history-footer .footer-right .medical-history-text {
+    display: inline;
+    text-align: right;
+  }
+
+  .medical-history-footer .footer-right .medical-history-text.ellipsis {
+    display: inline;
+    text-align: right;
+  }
+}
+</style>