vue2-client 1.18.68 → 1.18.69

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

@@ -1,1348 +1,1412 @@
-<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"
-        >
-          {{ showAllItems ? '收起' : ((config && config.detailsConfig && config.detailsConfig.buttonText) || '详情') }}
-          <a-icon :type="showAllItems ? 'up' : 'down'" />
-        </a-button>
-      </div>
-
-      <!-- 当 layout 为数字时使用 a-descriptions -->
-      <template v-if="config && config.layout && typeof config.layout === 'number' && !wrapperClassObject['xhdesc-medical-history']">
-        <a-descriptions
-          :colon="getGlobalColon()"
-          :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="getItemColon(item)"
-              :class="{ 'with-divider': item.isLine }">
-              <template #label>
-                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
-                  <div v-if="item.showAvatar" class="gender-icon">
-                    <img :src="maleIcon" alt="male" class="gender-img" />
-                  </div>
-                  <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]"
-                >
-                  <template v-if="wrapperClassObject['xhdesc-report-mode']">
-                    <div class="report-value">
-                      {{ data[item.field] }}
-                    </div>
-                    <div class="report-unit">
-                      {{ item.unit }}
-                    </div>
-                  </template>
-                  <template v-else>
-                    {{ data[item.field] }}
-                  </template>
-                </div>
-              </a-tooltip>
-              <div
-                v-else
-                class="content-wrapper"
-                :data-full-text="data[item.field]"
-              >
-                <template v-if="wrapperClassObject['xhdesc-report-mode']">
-                  <div class="report-value">
-                    {{ data[item.field] }}
-                  </div>
-                  <div class="report-unit">
-                    {{ item.unit }}
-                  </div>
-                </template>
-                <template v-else>
-                  {{ data[item.field] }}
-                </template>
-              </div>
-            </a-descriptions-item>
-
-            <!-- 展开后显示剩余标签 -->
-            <template v-if="showAllItems">
-              <a-descriptions-item
-                v-for="item in hiddenItemsFiltered"
-                :key="item.field"
-                :colon="getItemColon(item)"
-                :class="{ 'with-divider': item.isLine }">
-                <template #label>
-                  <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
-                    <div v-if="item.showAvatar" class="gender-icon">
-                      <img :src="maleIcon" alt="male" class="gender-img" />
-                    </div>
-                    <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]"
-                >
-                  <template v-if="wrapperClassObject['xhdesc-report-mode']">
-                    <div class="report-value">
-                      {{ data[item.field] }}
-                    </div>
-                    <div class="report-unit">
-                      {{ item.unit }}
-                    </div>
-                  </template>
-                  <template v-else>
-                    {{ data[item.field] }}
-                  </template>
-                </div>
-              </a-descriptions-item>
-            </template>
-          </template>
-        </a-descriptions>
-      </template>
-
-      <!-- 当 layout 为数组时使用自定义 Grid 布局 -->
-      <template v-else-if="config && config.layout && Array.isArray(config.layout) && !wrapperClassObject['xhdesc-medical-history']">
-        <div class="grid-descriptions">
-          <template v-if="data">
-            <!-- 按行分组显示项目 -->
-            <div
-              v-for="(rowItems, rowIndex) in gridRows"
-              :key="rowIndex"
-              class="grid-row"
-              :style="{ gridTemplateColumns: getGridTemplateColumns(config.layout[rowIndex]) }"
-            >
-              <div
-                v-for="(item, itemIndex) in rowItems"
-                :key="item.field || `item-${itemIndex}`"
-                :class="[
-                  'grid-item',
-                  wrapperClassObject['xhdesc-grid-formatted'] && 'grid-formatted',
-                  { 'with-divider': item.isLine, 'placeholder-item': (!item.field || item.field === '') }
-                ]"
-              >
-                <!-- 占位符项目：只显示空的容器 -->
-                <div v-if="!item.field || item.field === ''" class="grid-item-content placeholder-content"></div>
-
-                <!-- 普通项目 -->
-                <div v-else class="grid-item-content">
-                  <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
-                    <div v-if="item.showAvatar" class="gender-icon">
-                      <img :src="maleIcon" alt="male" class="gender-img" />
-                    </div>
-                    <span class="label-text">{{ item.label }}</span>
-                    <span v-if="getItemColon(item)" class="colon">:</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]"
-                    >
-                      <template v-if="wrapperClassObject['xhdesc-report-mode']">
-                        <div class="report-value">
-                          {{ data[item.field] }}
-                        </div>
-                        <div class="report-unit">
-                          {{ item.unit }}
-                        </div>
-                      </template>
-                      <template v-else>
-                        {{ data[item.field] }}
-                      </template>
-                    </div>
-                  </a-tooltip>
-                  <div
-                    v-else
-                    class="content-wrapper"
-                    :data-full-text="data[item.field]"
-                  >
-                    <template v-if="wrapperClassObject['xhdesc-report-mode']">
-                      <div class="report-value">
-                        {{ data[item.field] }}
-                      </div>
-                      <div class="report-unit">
-                        {{ item.unit }}
-                      </div>
-                    </template>
-                    <template v-else>
-                      {{ data[item.field] }}
-                    </template>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </template>
-        </div>
-      </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 }]">
-                <div v-if="item.showAvatar" class="gender-icon">
-                  <img :src="maleIcon" alt="male" class="gender-img" />
-                </div>
-                <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]"
-                >
-                  <template v-if="wrapperClassObject['xhdesc-report-mode']">
-                    <div class="report-value">
-                      {{ data[item.field] }}
-                    </div>
-                    <div class="report-unit">
-                      {{ item.unit }}
-                    </div>
-                  </template>
-                  <template v-else>
-                    {{ data[item.field] }}
-                  </template>
-                </div>
-              </a-tooltip>
-              <div
-                v-else
-                class="content-wrapper"
-                :data-full-text="data[item.field]"
-              >
-                <template v-if="wrapperClassObject['xhdesc-report-mode']">
-                  <div class="report-value">
-                    {{ data[item.field] }}
-                  </div>
-                  <div class="report-unit">
-                    {{ item.unit }}
-                  </div>
-                </template>
-                <template v-else>
-                  {{ data[item.field] }}
-                </template>
-              </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 }]">
-                  <div v-if="item.showAvatar" class="gender-icon">
-                    <img :src="maleIcon" alt="male" class="gender-img" />
-                  </div>
-                  <span class="label-text">{{ item.label }}</span>
-                </div>
-                <div
-                  class="content-wrapper"
-                  :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
-                  :data-full-text="data[item.field]"
-                >
-                  <template v-if="wrapperClassObject['xhdesc-report-mode']">
-                    <div class="report-value">
-                      {{ data[item.field] }}
-                    </div>
-                    <div class="report-unit">
-                      {{ item.unit }}
-                    </div>
-                  </template>
-                  <template v-else>
-                    {{ data[item.field] }}
-                  </template>
-                </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 {
-      hiddenConfig: '-1^',
-      data: null,
-      config: null,
-      showAllItems: false,
-      maleIcon: require('@vue2-client/assets/svg/male.svg')
-    }
-  },
-  props: {
-    queryParamsName: {
-      type: String,
-      default: ''
-    },
-    parameter: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  computed: {
-    wrapperClassObject () {
-      const attrs = this.$attrs || {}
-      const classes = {}
-
-      const booleanStyleKeys = [
-        'description',
-        'no-padding',
-        'medical-history',
-        'patient-style',
-        'margin-top-12',
-        'padding-left15',
-        'line-height30',
-        'report-mode',
-        'border1',
-        'grid-formatted'
-      ]
-      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
-      if (this.showAllItems && this.config && this.config.detailsConfig) classes['xhdesc-open'] = 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 => {
-        // 空字段（占位符）始终显示
-        if (!item.field || item.field === '') return true
-        // 其他字段只有在有数据时才显示
-        return 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)
-    },
-    // Grid布局的行分组数据
-    gridRows () {
-      if (!Array.isArray(this.config?.layout) || !this.visibleItemsFiltered) return []
-
-      const items = [...this.visibleItemsFiltered]
-      const rows = []
-      let currentIndex = 0
-
-      for (let i = 0; i < this.config.layout.length; i++) {
-        const columnsInRow = this.config.layout[i]
-        const rowItems = items.slice(currentIndex, currentIndex + columnsInRow)
-        rows.push(rowItems) // 总是创建行，即使没有项目
-        currentIndex += columnsInRow
-        if (currentIndex >= items.length) break
-      }
-
-      return rows
-    }
-  },
-  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
-    },
-    // 获取全局 colon 配置
-    getGlobalColon () {
-      if (this.config && this.config.style && this.config.style.colon !== undefined) {
-        return this.config.style.colon
-      }
-      return true // 默认显示冒号
-    },
-    // 获取单个 item 的 colon 配置
-    getItemColon (item) {
-      // 优先级：item配置 > 全局配置 > 默认true
-      if (item && item.colon !== undefined) {
-        return item.colon
-      }
-      return this.getGlobalColon()
-    },
-    // 生成CSS Grid模板列样式
-    getGridTemplateColumns (columns) {
-      if (typeof columns !== 'number' || columns <= 0) return 'repeat(auto-fit, minmax(200px, 1fr))'
-      return `repeat(${columns}, 1fr)`
-    }
-  },
-  watch: {
-    queryParamsName: {
-      handler (newValue) {
-        console.log(newValue)
-        this.getData(newValue, {})
-      },
-      deep: true
-    },
-    parameter: {
-      handler (newValue, oldValue) {
-        console.log('监听事件触发:', { old: oldValue, new: newValue })
-        this.getData(this.queryParamsName, {})
-      },
-      deep: true
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.patient-info-descriptions {
-  background: #fff;
-  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%;
-}
-
-/* Grid布局样式 */
-.grid-descriptions {
-  width: 100%;
-}
-
-.grid-row {
-  display: grid;
-  gap: 16px 24px;
-  width: 100%;
-  margin-bottom: 16px;
-}
-
-.grid-row:last-child {
-  margin-bottom: 0;
-}
-
-.grid-item {
-  display: flex;
-  align-items: flex-start;
-  padding: 8px;
-  border-radius: 4px;
-  transition: background-color 0.3s;
-  min-width: 0; /* 允许内容收缩 */
-  min-height: 40px; /* 确保行高一致 */
-}
-
-.grid-item:hover {
-  background-color: rgba(0, 0, 0, 0.02);
-}
-
-/* 占位符项目样式 */
-.placeholder-item {
-  background-color: transparent !important;
-}
-
-.placeholder-item:hover {
-  background-color: transparent !important;
-}
-
-/* Grid布局格式化样式：对齐 + 字体 */
-.grid-item.grid-formatted .grid-item-content {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  width: 100%;
-  height: 100%;
-}
-
-.grid-item.grid-formatted .label-wrapper {
-  flex: 0 0 auto;
-  min-width: 80px;
-  max-width: 120px;
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.grid-item.grid-formatted .label-text {
-  flex: 1;
-  text-align: justify;    /* 两端对齐 */
-  padding-right: 12px;   /* 为冒号留空间 */
-  text-justify: inter-word; /* 优化两端对齐 */
-  word-break: break-all;    /* 允许在任意字符间断行 */
-  letter-spacing: 0.5em;   /* 适中的字符间距 */
-}
-
-.grid-item.grid-formatted .colon {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.grid-item.grid-formatted .content-wrapper {
-  flex: 1;
-  text-align: left;
-  min-width: 0; /* 允许收缩 */
-}
-
-.grid-item.grid-formatted .label-wrapper .label-text {
-  font-family: "Source Han Sans";
-  font-size: 16px;
-  font-weight: normal;
-  line-height: 23px;
-  letter-spacing: 0em;
-  color: #313131;
-}
-
-.grid-item.grid-formatted .content-wrapper {
-  font-family: "Source Han Sans";
-  font-size: 16px;
-  font-weight: bold;
-  line-height: 23px;
-  letter-spacing: 0em;
-  color: #313131;
-}
-
-/* Grid布局冒号样式 */
-.grid-item .colon {
-  margin: 0 2px;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 14px;
-}
-
-.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;
-}
-
-/* 强制移除任何链接样式 */
-::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;
-  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-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 {
-    border: 1px solid #E5E9F0;
-    border-radius: 6px;
-    padding: 6.5px 12px;
-
-    ::v-deep .ant-btn-link {
-      border: none;
-    }
-
-    ::v-deep .ant-descriptions-item-content {
-      font-weight: bold;
-    }
-  }
-}
-/* 病患信息样式开关：patient-style */
-.xhdesc-patient-style {
-  min-height: 41px;
-  border-radius: 6px;
-  opacity: 1;
-  background: #FFFFFF;
-  box-sizing: border-box;
-  border: 0px solid #E5E9F0;
-  padding-bottom: 0px !important;
-  width: 100%;
-  overflow: hidden;
-
-  &.patient-info-descriptions,
-  .patient-info-descriptions {
-    border: 0px solid #E5E9F0;
-    border-radius: 6px;
-    background: #FFFFFF;
-    min-height: 41px;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 8px 12px;
-
-    ::v-deep .label-wrapper .label-text {
-      font-family: "Source Han Sans";
-      font-size: 16px !important;
-      font-weight: 400 !important;
-      line-height: 23px !important;
-      letter-spacing: 0em;
-      font-feature-settings: "kern" on;
-      color: #5D5C5C;
-      white-space: nowrap;
-    }
-
-    ::v-deep .label-wrapper.with-avatar {
-      gap: 9px;
-    }
-
-    .gender-icon {
-      margin-top: 2px;
-    }
-    .gender-img {
-      width: 20px;
-      height: 20px;
-      opacity: 1;
-      display: inline-block;
-    }
-
-    ::v-deep .detail-button-wrapper .ant-btn .anticon {
-      margin-left: 4px;
-      color: #94979E;
-      opacity: 1;
-    }
-
-    ::v-deep .detail-button-wrapper .ant-btn,
-    ::v-deep .detail-button-wrapper .ant-btn span {
-      font-family: "Source Han Sans";
-      font-size: 16px;
-      color: #5D5C5C;
-      white-space: nowrap;
-    }
-
-    ::v-deep .ant-descriptions-item-content,
-    ::v-deep .content-wrapper,
-    .medical-history-text {
-      font-family: "Source Han Sans";
-      font-size: 16px !important;
-      font-weight: 700;
-      line-height: 23px !important;
-      letter-spacing: 0em;
-      font-feature-settings: "kern" on;
-      color: #5D5C5C;
-      word-break: break-word;
-    }
-
-    ::v-deep .ant-descriptions-item {
-      padding-bottom: 4px;
-      display: flex;
-      align-items: center;
-      min-height: 32px;
-    }
-
-    @media (max-width: 768px) {
-      padding: 6px 8px;
-
-      ::v-deep .ant-descriptions-item {
-        flex-basis: 50%; /* 在小屏幕上每行显示两项 */
-      }
-
-      ::v-deep .label-wrapper .label-text,
-      ::v-deep .ant-descriptions-item-content {
-        font-size: 14px !important;
-      }
-    }
-  }
-}
-
-/* 展开态：patient-style 自适应高度 */
-.xhdesc-patient-style.xhdesc-open,
-.xhdesc-open .patient-info-descriptions.xhdesc-patient-style,
-.xhdesc-open .xhdesc-patient-style .patient-info-descriptions {
-  height: auto;
-}
-.xhdesc-patient-style.xhdesc-open .patient-info-descriptions,
-.xhdesc-open .patient-info-descriptions.xhdesc-patient-style,
-.xhdesc-open .xhdesc-patient-style .patient-info-descriptions {
-  align-items: flex-start;
-}
-// 去除住院收费页面两个描述列表之间的间距
-.xhdesc-margin-top-12 {
-  margin-top: -12px;
-}
-.xhdesc-no-padding {
-  padding: 0px;
-  &.patient-info-descriptions,
-  .patient-info-descriptions {
-    ::v-deep .descriptions-container {
-      padding: 0px;
-    }
-    ::v-deep .content-wrapper {
-      margin: 0px;
-    }
-  }
-}
-// 库存管理左侧边距
-.xhdesc-padding-left15{
-  padding-left: 15px;
-}
-// 库存管理左侧字体样式
-.xhdesc-line-height30{
-  &.patient-info-descriptions,
-  .patient-info-descriptions{
-    ::v-deep .ant-descriptions-item{
-      margin-bottom: 0px
-    }
-    ::v-deep .content-wrapper{
-      line-height: 30px;
-    }
-    ::v-deep .ant-descriptions-item-label{
-      line-height: 30px;
-    }
-    ::v-deep .content-wrapper{
-      color: #0057FE;
-      font-weight: 700
-    }
-  }
-}
-/* 医疗病史模式：自定义HTML结构样式 */
-.medical-history-descriptions {
-  width: 100%;
-}
-
-.medical-history-item {
-  margin: 0;
-  width: 100%;
-}
-
-.medical-history-item.with-divider {
-  position: relative;
-  padding-bottom: 4px;
-  margin-bottom: 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;
-  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;
-}
-
-.medical-history-text.ellipsis::after {
-  display: none;
-}
-
-.medical-history-text.ellipsis::first-line {
-  text-indent: 0;
-}
-
-@supports not (-webkit-line-clamp: 3) {
-  .medical-history-text.ellipsis {
-    display: block;
-    max-height: 72px;
-    overflow: hidden;
-    position: relative;
-  }
-
-  .medical-history-text.ellipsis::after {
-    content: '...';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    background: #fff;
-    padding-left: 4px;
-    display: block;
-  }
-}
-
-/* 医疗病史样式开关 */
-.patient-info-descriptions.xhdesc-medical-history {
-  padding: 9px 12px 10px 11px !important;
-  .descriptions-container {
-    padding-right: 0;
-    padding-left: 0px;
-  }
-  .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;
-  }
-}
-
-/* 加边框 */
-.xhdesc-border1 {
-  &.patient-info-descriptions,
-  .patient-info-descriptions {
-    border: 1px solid #E5E9F0;
-    border-radius: 6px;
-  }
-}
-
-.xhdesc-report-mode {
-  &.patient-info-descriptions,
-  .patient-info-descriptions {
-    ::v-deep .flex-descriptions{
-      gap: 2px;
-      .description-item {
-        min-width: 175px;
-        border-radius: 0px;
-        display: inline-block;
-        padding: 10px;
-        border: 1px solid #E5E9F0;
-        .content-wrapper {
-          margin-left: 0px;
-          width: 100%;
-          margin-top: 14px;
-          display: flex; justify-content: space-between;
-        }
-      }
-    }
-    ::v-deep .report-value {
-      font-weight: bold;
-      color: #0057FE;
-    }
-    ::v-deep .report-unit {
-      font-weight: bold;
-      text-align: end;
-    }
-  }
-}
-</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"
+        >
+          {{ showAllItems ? '收起' : ((config && config.detailsConfig && config.detailsConfig.buttonText) || '详情') }}
+          <a-icon :type="showAllItems ? 'up' : 'down'" />
+        </a-button>
+      </div>
+
+      <!-- 当layout是对象格式且为5列时，使用自定义grid布局 -->
+      <template v-if="config && config.layout && typeof config.layout === 'object' && !Array.isArray(config.layout) && Object.values(config.layout).every(val => val === 5) && !wrapperClassObject['xhdesc-medical-history']">
+        <div class="grid-descriptions">
+          <template v-if="data">
+            <div
+              v-for="(row, rowIndex) in gridRows"
+              :key="'row-' + rowIndex"
+              class="grid-row"
+              :style="{ gridTemplateColumns: getGridTemplateColumns(getGridColumns()) }"
+            >
+              <div
+                v-for="(item, itemIndex) in row"
+                :key="'item-' + rowIndex + '-' + itemIndex"
+                class="grid-item"
+              >
+                <!-- 占位符项目 -->
+                <template v-if="!item.field || item.field === ''">
+                  <div class="placeholder-content"></div>
+                </template>
+                <!-- 正常项目 -->
+                <template v-else-if="data[item.field] !== null && data[item.field] !== undefined">
+                  <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
+                    <div v-if="item.showAvatar" class="gender-icon">
+                      <img :src="maleIcon" alt="male" class="gender-img" />
+                    </div>
+                    <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></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]"
+                    >
+                      <template v-if="wrapperClassObject['xhdesc-report-mode']">
+                        <div class="report-value">
+                          {{ data[item.field] }}
+                        </div>
+                        <div class="report-unit">
+                          {{ item.unit }}
+                        </div>
+                      </template>
+                      <template v-else>
+                        {{ data[item.field] }}
+                      </template>
+                    </div>
+                  </a-tooltip>
+                  <div
+                    v-else
+                    class="content-wrapper"
+                    :data-full-text="data[item.field]"
+                  >
+                    <template v-if="wrapperClassObject['xhdesc-report-mode']">
+                      <div class="report-value">
+                        {{ data[item.field] }}
+                      </div>
+                      <div class="report-unit">
+                        {{ item.unit }}
+                      </div>
+                    </template>
+                    <template v-else>
+                      {{ data[item.field] }}
+                    </template>
+                  </div>
+                </template>
+              </div>
+            </div>
+          </template>
+        </div>
+      </template>
+
+      <!-- 当有 layout 配置时使用 a-descriptions -->
+      <template v-else-if="config && config.layout && !wrapperClassObject['xhdesc-medical-history']">
+        <a-descriptions
+          :colon="getGlobalColon()"
+          :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="getItemColon(item)"
+              :class="{ 'with-divider': item.isLine }">
+              <template #label>
+                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
+                  <div v-if="item.showAvatar" class="gender-icon">
+                    <img :src="maleIcon" alt="male" class="gender-img" />
+                  </div>
+                  <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></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]"
+                >
+                  <template v-if="wrapperClassObject['xhdesc-report-mode']">
+                    <div class="report-value">
+                      {{ data[item.field] }}
+                    </div>
+                    <div class="report-unit">
+                      {{ item.unit }}
+                    </div>
+                  </template>
+                  <template v-else>
+                    {{ data[item.field] }}
+                  </template>
+                </div>
+              </a-tooltip>
+              <div
+                v-else
+                class="content-wrapper"
+                :data-full-text="data[item.field]"
+              >
+                <template v-if="wrapperClassObject['xhdesc-report-mode']">
+                  <div class="report-value">
+                    {{ data[item.field] }}
+                  </div>
+                  <div class="report-unit">
+                    {{ item.unit }}
+                  </div>
+                </template>
+                <template v-else>
+                  {{ data[item.field] }}
+                </template>
+              </div>
+            </a-descriptions-item>
+
+            <!-- 占位符项目 -->
+            <div
+              v-for="(item, index) in visibleItems"
+              v-if="!item.field || item.field === ''"
+              :key="'placeholder-' + index"
+              class="placeholder-item"
+            ></div>
+          </template>
+
+          <!-- 展开后显示剩余标签 -->
+          <template v-if="showAllItems">
+            <a-descriptions-item
+              v-for="item in hiddenItemsFiltered"
+              :key="item.field"
+              :colon="getItemColon(item)"
+              :class="{ 'with-divider': item.isLine }">
+              <template #label>
+                <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
+                  <div v-if="item.showAvatar" class="gender-icon">
+                    <img :src="maleIcon" alt="male" class="gender-img" />
+                  </div>
+                  <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]"
+              >
+                <template v-if="wrapperClassObject['xhdesc-report-mode']">
+                  <div class="report-value">
+                    {{ data[item.field] }}
+                  </div>
+                  <div class="report-unit">
+                    {{ item.unit }}
+                  </div>
+                </template>
+                <template v-else>
+                  {{ data[item.field] }}
+                </template>
+              </div>
+            </a-descriptions-item>
+
+            <!-- 展开部分的占位符项目 -->
+            <div
+              v-for="(item, index) in hiddenItems"
+              v-if="!item.field || item.field === ''"
+              :key="'hidden-placeholder-' + index"
+              class="placeholder-item"
+            ></div>
+          </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 }]">
+                <div v-if="item.showAvatar" class="gender-icon">
+                  <img :src="maleIcon" alt="male" class="gender-img" />
+                </div>
+                <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></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]"
+                >
+                  <template v-if="wrapperClassObject['xhdesc-report-mode']">
+                    <div class="report-value">
+                      {{ data[item.field] }}
+                    </div>
+                    <div class="report-unit">
+                      {{ item.unit }}
+                    </div>
+                  </template>
+                  <template v-else>
+                    {{ data[item.field] }}
+                  </template>
+                </div>
+              </a-tooltip>
+              <div
+                v-else
+                class="content-wrapper"
+                :data-full-text="data[item.field]"
+              >
+                <template v-if="wrapperClassObject['xhdesc-report-mode']">
+                  <div class="report-value">
+                    {{ data[item.field] }}
+                  </div>
+                  <div class="report-unit">
+                    {{ item.unit }}
+                  </div>
+                </template>
+                <template v-else>
+                  {{ data[item.field] }}
+                </template>
+              </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 }]">
+                  <div v-if="item.showAvatar" class="gender-icon">
+                    <img :src="maleIcon" alt="male" class="gender-img" />
+                  </div>
+                  <span class="label-text">{{ item.label }}<span v-if="getItemColon(item)" class="colon">:</span></span>
+                </div>
+                <div
+                  class="content-wrapper"
+                  :class="{ 'ellipsis': isContentOverflow(data[item.field]) }"
+                  :data-full-text="data[item.field]"
+                >
+                  <template v-if="wrapperClassObject['xhdesc-report-mode']">
+                    <div class="report-value">
+                      {{ data[item.field] }}
+                    </div>
+                    <div class="report-unit">
+                      {{ item.unit }}
+                    </div>
+                  </template>
+                  <template v-else>
+                    {{ data[item.field] }}
+                  </template>
+                </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 v-if="getItemColon(item)" class="colon">:</span></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 v-if="getItemColon(item)" class="colon">:</span></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 v-if="getItemColon(item)" class="colon">:</span></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 {
+      hiddenConfig: '-1^',
+      data: null,
+      config: null,
+      showAllItems: false,
+      maleIcon: require('@vue2-client/assets/svg/male.svg')
+    }
+  },
+  props: {
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    parameter: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  computed: {
+    wrapperClassObject () {
+      const attrs = this.$attrs || {}
+      const classes = {}
+
+      const booleanStyleKeys = [
+        'description',
+        'no-padding',
+        'medical-history',
+        'patient-style',
+        'margin-top-12',
+        'padding-left15',
+        'line-height30',
+        'report-mode',
+        'border1',
+        'grid-formatted'
+      ]
+      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
+      if (this.showAllItems && this.config && this.config.detailsConfig) classes['xhdesc-open'] = 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 => {
+        // 跳过空字段（占位符）
+        if (!item.field || item.field === '') return false
+        // 其他字段只有在有数据时才显示
+        return 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 []
+      // 过滤掉占位符项目，占位符在模板中单独处理
+      const res = list.filter(item => {
+        // 跳过空字段（占位符）
+        if (!item.field || item.field === '') return false
+        // 其他字段只有在有数据时才显示
+        return this.data[item.field] !== null && this.data[item.field] !== undefined
+      })
+      return res
+    },
+    // Grid布局的行分组数据
+    gridRows () {
+      if (!this.config?.items || !Array.isArray(this.config.items)) return []
+
+      const config = this.config || {}
+      const layout = config.layout
+
+      // 处理对象格式的layout配置（如 {"xl":5,"md":5,...}）
+      if (layout && typeof layout === 'object' && !Array.isArray(layout)) {
+        // 检查是否所有断点都是相同的列数
+        const columnCounts = Object.values(layout)
+        const isUniform = columnCounts.every(count => count === columnCounts[0])
+        if (isUniform && columnCounts[0] > 0) {
+          const itemsPerRow = columnCounts[0]
+          // 根据项目数量创建相应行数，每行按配置列数显示
+          const rows = []
+          const items = this.config.items
+
+          for (let i = 0; i < items.length; i += itemsPerRow) {
+            const rowItems = items.slice(i, i + itemsPerRow)
+            rows.push(rowItems)
+          }
+
+          return rows
+        }
+      }
+
+      // 回退到原来的数组格式处理
+      if (!Array.isArray(layout) || !this.visibleItemsFiltered) return []
+
+      const items = [...this.visibleItemsFiltered]
+      const rows = []
+      let currentIndex = 0
+
+      for (let i = 0; i < layout.length; i++) {
+        const columnsInRow = layout[i]
+        const rowItems = items.slice(currentIndex, currentIndex + columnsInRow)
+        rows.push(rowItems)
+        currentIndex += columnsInRow
+        if (currentIndex >= items.length) break
+      }
+
+      return rows
+    }
+  },
+  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
+    },
+    // 获取全局 colon 配置
+    getGlobalColon () {
+      if (this.config && this.config.style && this.config.style.colon !== undefined) {
+        return this.config.style.colon
+      }
+      return true // 默认显示冒号
+    },
+    // 获取单个 item 的 colon 配置
+    getItemColon (item) {
+      // 优先级：item配置 > 全局配置 > 默认true
+      if (item && item.colon !== undefined) {
+        return item.colon
+      }
+      return this.getGlobalColon()
+    },
+    // 获取当前grid布局的列数
+    getGridColumns () {
+      const layout = this.config?.layout
+      if (layout && typeof layout === 'object' && !Array.isArray(layout)) {
+        const columnCounts = Object.values(layout)
+        if (columnCounts.length > 0 && columnCounts.every(count => count === columnCounts[0])) {
+          return columnCounts[0]
+        }
+      }
+      return 5 // 默认5列
+    },
+    // 生成CSS Grid模板列样式
+    getGridTemplateColumns (columns) {
+      if (typeof columns !== 'number' || columns <= 0) return 'repeat(auto-fit, minmax(200px, 1fr))'
+      return `repeat(${columns}, 1fr)`
+    },
+    // 判断项目是否应该显示（有数据）
+    shouldShowItem (item) {
+      if (!item.field || item.field === '') return false
+      return this.data[item.field] !== null && this.data[item.field] !== undefined
+    }
+  },
+  watch: {
+    queryParamsName: {
+      handler (newValue) {
+        console.log(newValue)
+        this.getData(newValue, {})
+      },
+      deep: true
+    },
+    parameter: {
+      handler (newValue, oldValue) {
+        console.log('监听事件触发:', { old: oldValue, new: newValue })
+        this.getData(this.queryParamsName, {})
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.patient-info-descriptions {
+  background: #fff;
+  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%;
+}
+
+/* Grid布局样式 */
+.grid-descriptions {
+  width: 100%;
+}
+
+.grid-row {
+  display: grid;
+  gap: 16px 24px;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.grid-row:last-child {
+  margin-bottom: 0;
+}
+
+.grid-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+  min-width: 0; /* 允许内容收缩 */
+  min-height: 40px; /* 确保行高一致 */
+}
+
+.grid-item:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+/* 占位符项目样式 */
+.placeholder-item {
+  background-color: transparent !important;
+}
+
+.placeholder-item:hover {
+  background-color: transparent !important;
+}
+
+.placeholder-item {
+  /* 占位符项目保持布局空间 */
+  min-height: 32px;
+  width: fit-content;
+  margin-right: 24px;
+  margin-bottom: 16px;
+}
+
+.placeholder-content {
+  /* 占位符内容为空，不显示任何内容 */
+  min-height: 20px; /* 较小的高度，避免视觉突兀 */
+  visibility: hidden; /* 完全隐藏内容 */
+}
+
+/* Grid布局冒号样式 */
+.colon {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+}
+
+.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;
+}
+
+/* 强制移除任何链接样式 */
+::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;
+  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-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: stretch !important; /* 拉伸对齐，确保子项高度一致 */
+  flex-direction: row !important;
+  margin-right: 24px;
+  width: fit-content !important;
+  margin-bottom: 16px;
+  height: 32px !important; /* 固定高度 */
+}
+
+::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) !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"') !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  white-space: nowrap !important;
+  min-width: v-bind('(config && config.style && config.style.labelWidth) || "80px"') !important;
+  min-height: 32px !important;
+  height: 32px !important;
+  line-height: 32px !important;
+  padding-right: 2px !important;
+}
+
+::v-deep(.ant-descriptions-item-content) {
+  font-size: v-bind('(config && config.style && config.style.fontSize) || "14px"') !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  height: 100% !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-descriptions-item.placeholder-item .ant-descriptions-item-colon) {
+  display: none !important;
+}
+
+
+
+::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 {
+    border: 1px solid #E5E9F0;
+    border-radius: 6px;
+    padding: 6.5px 12px;
+
+    ::v-deep .ant-btn-link {
+      border: none;
+    }
+
+    ::v-deep .ant-descriptions-item-content {
+      font-weight: bold;
+    }
+  }
+}
+/* 病患信息样式开关：patient-style */
+.xhdesc-patient-style {
+  min-height: 41px;
+  border-radius: 6px;
+  opacity: 1;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  border: 0px solid #E5E9F0;
+  padding-bottom: 0px !important;
+  width: 100%;
+  overflow: hidden;
+
+  &.patient-info-descriptions,
+  .patient-info-descriptions {
+    border: 0px solid #E5E9F0;
+    border-radius: 6px;
+    background: #FFFFFF;
+    min-height: 41px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 8px 12px;
+
+    ::v-deep .label-wrapper .label-text {
+      font-family: "Source Han Sans";
+      font-size: 16px !important;
+      font-weight: 400 !important;
+      line-height: 23px !important;
+      letter-spacing: 0em;
+      font-feature-settings: "kern" on;
+      color: #5D5C5C;
+      white-space: nowrap;
+    }
+
+    ::v-deep .label-wrapper.with-avatar {
+      gap: 9px;
+    }
+
+    .gender-icon {
+      margin-top: 2px;
+    }
+    .gender-img {
+      width: 20px;
+      height: 20px;
+      opacity: 1;
+      display: inline-block;
+    }
+
+    ::v-deep .detail-button-wrapper .ant-btn .anticon {
+      margin-left: 4px;
+      color: #94979E;
+      opacity: 1;
+    }
+
+    ::v-deep .detail-button-wrapper .ant-btn,
+    ::v-deep .detail-button-wrapper .ant-btn span {
+      font-family: "Source Han Sans";
+      font-size: 16px;
+      color: #5D5C5C;
+      white-space: nowrap;
+    }
+
+    ::v-deep .ant-descriptions-item-content,
+    ::v-deep .content-wrapper,
+    .medical-history-text {
+      font-family: "Source Han Sans";
+      font-size: 16px !important;
+      font-weight: 700;
+      line-height: 23px !important;
+      letter-spacing: 0em;
+      font-feature-settings: "kern" on;
+      color: #5D5C5C;
+      word-break: break-word;
+    }
+
+    ::v-deep .ant-descriptions-item {
+      padding-bottom: 4px;
+      display: flex;
+      align-items: center;
+      min-height: 32px;
+    }
+
+    @media (max-width: 768px) {
+      padding: 6px 8px;
+
+      ::v-deep .ant-descriptions-item {
+        flex-basis: 50%; /* 在小屏幕上每行显示两项 */
+      }
+
+      ::v-deep .label-wrapper .label-text,
+      ::v-deep .ant-descriptions-item-content {
+        font-size: 14px !important;
+      }
+    }
+  }
+}
+
+/* 展开态：patient-style 自适应高度 */
+.xhdesc-patient-style.xhdesc-open,
+.xhdesc-open .patient-info-descriptions.xhdesc-patient-style,
+.xhdesc-open .xhdesc-patient-style .patient-info-descriptions {
+  height: auto;
+}
+.xhdesc-patient-style.xhdesc-open .patient-info-descriptions,
+.xhdesc-open .patient-info-descriptions.xhdesc-patient-style,
+.xhdesc-open .xhdesc-patient-style .patient-info-descriptions {
+  align-items: flex-start;
+}
+// 去除住院收费页面两个描述列表之间的间距
+.xhdesc-margin-top-12 {
+  margin-top: -12px;
+}
+.xhdesc-no-padding {
+  padding: 0px;
+  &.patient-info-descriptions,
+  .patient-info-descriptions {
+    ::v-deep .descriptions-container {
+      padding: 0px;
+    }
+    ::v-deep .content-wrapper {
+      margin: 0px;
+    }
+  }
+}
+// 库存管理左侧边距
+.xhdesc-padding-left15{
+  padding-left: 15px;
+}
+// 库存管理左侧字体样式
+.xhdesc-line-height30{
+  &.patient-info-descriptions,
+  .patient-info-descriptions{
+    ::v-deep .ant-descriptions-item{
+      margin-bottom: 0px
+    }
+    ::v-deep .content-wrapper{
+      line-height: 30px;
+    }
+    ::v-deep .ant-descriptions-item-label{
+      line-height: 30px;
+    }
+    ::v-deep .content-wrapper{
+      color: #0057FE;
+      font-weight: 700
+    }
+  }
+}
+/* 医疗病史模式：自定义HTML结构样式 */
+.medical-history-descriptions {
+  width: 100%;
+}
+
+.medical-history-item {
+  margin: 0;
+  width: 100%;
+}
+
+.medical-history-item.with-divider {
+  position: relative;
+  padding-bottom: 4px;
+  margin-bottom: 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;
+  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;
+}
+
+.medical-history-text.ellipsis::after {
+  display: none;
+}
+
+.medical-history-text.ellipsis::first-line {
+  text-indent: 0;
+}
+
+@supports not (-webkit-line-clamp: 3) {
+  .medical-history-text.ellipsis {
+    display: block;
+    max-height: 72px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .medical-history-text.ellipsis::after {
+    content: '...';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    padding-left: 4px;
+    display: block;
+  }
+}
+
+/* 医疗病史样式开关 */
+.patient-info-descriptions.xhdesc-medical-history {
+  padding: 9px 12px 10px 11px !important;
+  .descriptions-container {
+    padding-right: 0;
+    padding-left: 0px;
+  }
+  .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;
+  }
+}
+
+/* 加边框 */
+.xhdesc-border1 {
+  &.patient-info-descriptions,
+  .patient-info-descriptions {
+    border: 1px solid #E5E9F0;
+    border-radius: 6px;
+  }
+}
+
+.xhdesc-grid-formatted {
+  &.patient-info-descriptions,
+  .patient-info-descriptions {
+    ::v-deep .label-wrapper .label-text {
+      height: 23px;
+      opacity: 1;
+      font-family: "Source Han Sans";
+      font-size: 16px;
+      font-weight: normal;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #313131;
+    }
+
+    ::v-deep .content-wrapper,
+    ::v-deep .ant-descriptions-item-content {
+      height: 23px;
+      opacity: 1;
+      font-family: "Source Han Sans";
+      font-size: 16px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0em;
+      color: #313131;
+    }
+  }
+}
+
+.xhdesc-report-mode {
+  &.patient-info-descriptions,
+  .patient-info-descriptions {
+    ::v-deep .flex-descriptions{
+      gap: 2px;
+      .description-item {
+        min-width: 175px;
+        border-radius: 0px;
+        display: inline-block;
+        padding: 10px;
+        border: 1px solid #E5E9F0;
+        .content-wrapper {
+          margin-left: 0px;
+          width: 100%;
+          margin-top: 14px;
+          display: flex; justify-content: space-between;
+        }
+      }
+    }
+    ::v-deep .report-value {
+      font-weight: bold;
+      color: #0057FE;
+    }
+    ::v-deep .report-unit {
+      font-weight: bold;
+      text-align: end;
+    }
+  }
+}
+</style>