vue2-client 1.13.5 → 1.13.6

package/package.json

@@ -1,107 +1,107 @@
-{
-  "name": "vue2-client",
-  "version": "1.13.5",
-  "private": false,
-  "scripts": {
-    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
-    "serve:gaslink": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode gaslink",
-    "serve:revenue": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode revenue",
-    "serve:liuli": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode liuli",
-    "serve:scada": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode scada",
-    "serve:iot": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode iot",
-    "serve:his": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode his",
-    "mac-serve": "vue-cli-service serve --no-eslint --mode his",
-    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
-    "build:preview": "vue-cli-service build --mode preview",
-    "lint:nofix": "vue-cli-service lint --no-fix",
-    "test": "jest"
-  },
-  "dependencies": {
-    "@afwenming123/vue-easy-tree": "^1.0.1",
-    "@afwenming123/vue-plugin-hiprint": "^0.0.70",
-    "@amap/amap-jsapi-loader": "^1.0.1",
-    "@antv/data-set": "^0.11.8",
-    "@antv/g2plot": "^2.4.31",
-    "@hufe921/canvas-editor": "^0.9.49",
-    "@microsoft/fetch-event-source": "^2.0.1",
-    "@vue/babel-preset-jsx": "^1.4.0",
-    "animate.css": "^4.1.1",
-    "ant-design-vue": "^1.7.8",
-    "axios": "^0.27.2",
-    "clipboard": "^2.0.11",
-    "core-js": "^3.33.0",
-    "crypto-js": "^4.1.1",
-    "date-fns": "^2.29.3",
-    "default-passive-events": "^2.0.0",
-    "dotenv": "^16.3.1",
-    "echarts": "^5.5.0",
-    "enquire.js": "^2.1.6",
-    "file-saver": "^2.0.5",
-    "highlight.js": "^11.7.0",
-    "html2canvas": "^1.4.1",
-    "js-base64": "^3.7.5",
-    "js-cookie": "^2.2.1",
-    "jsencrypt": "^3.3.2",
-    "jspdf": "^2.5.1",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.debounce": "^4",
-    "lodash.get": "^4.4.2",
-    "marked": "^4",
-    "mockjs": "^1.1.0",
-    "nprogress": "^0.2.0",
-    "qs": "^6.11.2",
-    "regenerator-runtime": "^0.14.0",
-    "videojs-contrib-hls": "^5.15.0",
-    "viser-vue": "^2.4.8",
-    "vue": "^2.7.14",
-    "vue-codemirror": "4.0.6",
-    "vue-draggable-resizable": "^2",
-    "vue-i18n": "^8.28.2",
-    "vue-json-viewer": "^2.2.22",
-    "vue-router": "^3.6.5",
-    "vue-video-player": "^5.0.2",
-    "vue-virtual-scroller": "^1.1.2",
-    "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2",
-    "xlsx": "0.18.5"
-  },
-  "devDependencies": {
-    "@ant-design/colors": "^7.0.0",
-    "@babel/core": "^7.22.20",
-    "@babel/eslint-parser": "^7.22.15",
-    "@babel/preset-env": "^7.22.20",
-    "@vue/cli-plugin-babel": "^5.0.8",
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-service": "^5.0.8",
-    "@vue/eslint-config-standard": "^8.0.1",
-    "@vue/test-utils": "^1.3.6",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "compression-webpack-plugin": "^10.0.0",
-    "css-minimizer-webpack-plugin": "^5.0.1",
-    "deepmerge": "^4.3.1",
-    "eslint": "^8.51.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "fast-deep-equal": "^3.1.3",
-    "ignore-loader": "^0.1.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-transform-stub": "^2.0.0",
-    "less-loader": "^6.2.0",
-    "script-loader": "^0.7.2",
-    "style-resources-loader": "^1.5.0",
-    "vue-cli-plugin-style-resources-loader": "^0.1.5",
-    "vue-jest": "^4.0.1",
-    "vue-template-compiler": "^2.7.14",
-    "webpack": "^5.88.2",
-    "webpack-theme-color-replacer": "^1.4.7",
-    "whatwg-fetch": "^3.6.19"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
-}
+{
+  "name": "vue2-client",
+  "version": "1.13.6",
+  "private": false,
+  "scripts": {
+    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
+    "serve:gaslink": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode gaslink",
+    "serve:revenue": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode revenue",
+    "serve:liuli": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode liuli",
+    "serve:scada": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode scada",
+    "serve:iot": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode iot",
+    "serve:his": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode his",
+    "mac-serve": "vue-cli-service serve --no-eslint --mode his",
+    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "build:preview": "vue-cli-service build --mode preview",
+    "lint:nofix": "vue-cli-service lint --no-fix",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@afwenming123/vue-easy-tree": "^1.0.1",
+    "@afwenming123/vue-plugin-hiprint": "^0.0.70",
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@antv/data-set": "^0.11.8",
+    "@antv/g2plot": "^2.4.31",
+    "@hufe921/canvas-editor": "^0.9.49",
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "@vue/babel-preset-jsx": "^1.4.0",
+    "animate.css": "^4.1.1",
+    "ant-design-vue": "^1.7.8",
+    "axios": "^0.27.2",
+    "clipboard": "^2.0.11",
+    "core-js": "^3.33.0",
+    "crypto-js": "^4.1.1",
+    "date-fns": "^2.29.3",
+    "default-passive-events": "^2.0.0",
+    "dotenv": "^16.3.1",
+    "echarts": "^5.5.0",
+    "enquire.js": "^2.1.6",
+    "file-saver": "^2.0.5",
+    "highlight.js": "^11.7.0",
+    "html2canvas": "^1.4.1",
+    "js-base64": "^3.7.5",
+    "js-cookie": "^2.2.1",
+    "jsencrypt": "^3.3.2",
+    "jspdf": "^2.5.1",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.debounce": "^4",
+    "lodash.get": "^4.4.2",
+    "marked": "^4",
+    "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
+    "qs": "^6.11.2",
+    "regenerator-runtime": "^0.14.0",
+    "videojs-contrib-hls": "^5.15.0",
+    "viser-vue": "^2.4.8",
+    "vue": "^2.7.14",
+    "vue-codemirror": "4.0.6",
+    "vue-draggable-resizable": "^2",
+    "vue-i18n": "^8.28.2",
+    "vue-json-viewer": "^2.2.22",
+    "vue-router": "^3.6.5",
+    "vue-video-player": "^5.0.2",
+    "vue-virtual-scroller": "^1.1.2",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2",
+    "xlsx": "0.18.5"
+  },
+  "devDependencies": {
+    "@ant-design/colors": "^7.0.0",
+    "@babel/core": "^7.22.20",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/preset-env": "^7.22.20",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/test-utils": "^1.3.6",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "compression-webpack-plugin": "^10.0.0",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "deepmerge": "^4.3.1",
+    "eslint": "^8.51.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "fast-deep-equal": "^3.1.3",
+    "ignore-loader": "^0.1.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-stub": "^2.0.0",
+    "less-loader": "^6.2.0",
+    "script-loader": "^0.7.2",
+    "style-resources-loader": "^1.5.0",
+    "vue-cli-plugin-style-resources-loader": "^0.1.5",
+    "vue-jest": "^4.0.1",
+    "vue-template-compiler": "^2.7.14",
+    "webpack": "^5.88.2",
+    "webpack-theme-color-replacer": "^1.4.7",
+    "whatwg-fetch": "^3.6.19"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

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

@@ -12,19 +12,74 @@
         </a-button>
       </div>
 
-      <a-descriptions
-        :column="config?.layout"
-        :size="config?.style?.size"
-        :bordered="config?.style?.bordered"
-        layout="horizontal">
-        <template v-if="data">
-          <!-- 显示前N个标签 -->
-          <a-descriptions-item
-            v-for="(item) in visibleItems"
-            :key="item.field"
-            :colon="item.colon !== false"
-            v-if="data[item.field] !== null && data[item.field] !== undefined && (!showAllItems || showAllItems && !hiddenItems.some(i => i.field === item.field))">
-            <template #label>
+      <!-- 当有 layout 配置时使用 a-descriptions -->
+      <template v-if="config?.layout">
+        <a-descriptions
+          :column="config.layout"
+          :size="config?.style?.size"
+          :bordered="config?.style?.bordered"
+          layout="horizontal">
+          <template v-if="data">
+            <!-- 显示前N个标签 -->
+            <a-descriptions-item
+              v-for="(item) in visibleItems"
+              :key="item.field"
+              :colon="item.colon !== false"
+              v-if="data[item.field] !== null && data[item.field] !== undefined && (!showAllItems || showAllItems && !hiddenItems.some(i => i.field === item.field))">
+              <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">
+                {{ data[item.field] }}
+              </div>
+            </a-descriptions-item>
+
+            <!-- 展开后显示剩余标签 -->
+            <template v-if="showAllItems">
+              <a-descriptions-item
+                v-for="item in hiddenItems"
+                :key="item.field"
+                :colon="item.colon !== false"
+                v-if="data[item.field] !== null && data[item.field] !== undefined">
+                <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">
+                  {{ data[item.field] }}
+                </div>
+              </a-descriptions-item>
+            </template>
+          </template>
+        </a-descriptions>
+      </template>
+
+      <!-- 当没有 layout 配置时使用自适应布局 -->
+      <template v-else>
+        <div class="flex-descriptions">
+          <template v-if="data">
+            <!-- 显示可见的标签 -->
+            <div
+              v-for="(item) in visibleItems"
+              :key="item.field"
+              class="description-item"
+              v-if="data[item.field] !== null && data[item.field] !== undefined"
+            >
               <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
                 <a-avatar
                   v-if="item.showAvatar"
@@ -32,22 +87,21 @@
                   :icon="item.avatar.icon"
                   :style="{ background: item.avatar.background }"
                 />
-                <span class="label-text">{{ item.label }}</span>
+                <span class="label-text">{{ item.label }}：</span>
+              </div>
+              <div class="content-wrapper">
+                {{ data[item.field] }}
               </div>
-            </template>
-            <div class="content-wrapper">
-              {{ data[item.field] }}
             </div>
-          </a-descriptions-item>
 
-          <!-- 展开后显示剩余标签 -->
-          <template v-if="showAllItems">
-            <a-descriptions-item
-              v-for="item in hiddenItems"
-              :key="item.field"
-              :colon="item.colon !== false"
-              v-if="data[item.field] !== null && data[item.field] !== undefined">
-              <template #label>
+            <!-- 展开后显示的内容 -->
+            <template v-if="showAllItems">
+              <div
+                v-for="item in hiddenItems"
+                :key="item.field"
+                class="description-item"
+                v-if="data[item.field] !== null && data[item.field] !== undefined"
+              >
                 <div :class="['label-wrapper', { 'with-avatar': item.showAvatar }]">
                   <a-avatar
                     v-if="item.showAvatar"
@@ -55,19 +109,20 @@
                     :icon="item.avatar.icon"
                     :style="{ background: item.avatar.background }"
                   />
-                  <span class="label-text">{{ item.label }}</span>
+                  <span class="label-text">{{ item.label }}：</span>
+                </div>
+                <div class="content-wrapper">
+                  {{ data[item.field] }}
                 </div>
-              </template>
-              <div class="content-wrapper">
-                {{ data[item.field] }}
               </div>
-            </a-descriptions-item>
+            </template>
           </template>
-        </template>
-      </a-descriptions>
+        </div>
+      </template>
     </div>
   </div>
 </template>
+
 <script>
 import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
 
@@ -95,20 +150,14 @@ export default {
   computed: {
     // 获取详情按钮应该显示在第几个标签后
     detailsAfterIndex () {
-      // 只有明确配置了detailsConfig且设置了showAfterIndex时才使用配置值
-      // 否则返回一个很大的值，使所有字段都显示
       return this.config?.detailsConfig?.showAfterIndex || 999
     },
     // 判断是否有更多标签需要显示
     hasMoreItems () {
-      // 只有明确配置了detailsConfig时才显示详情按钮
       if (!this.config?.detailsConfig) return false
-      // 如果没有数据或没有配置项，不显示详情按钮
       if (!this.data || !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) {
@@ -120,31 +169,15 @@ export default {
     // 获取应该显示的标签
     visibleItems () {
       if (!this.config?.items) return []
-
-      if (!this.config?.detailsConfig) {
-        // 如果没有配置detailsConfig，直接显示所有项
-        return this.config.items
-      }
-
-      if (this.showAllItems) {
-        // 如果已经展开，也返回前N项，后面的项目会通过hiddenItems显示
-        return this.config.items.slice(0, this.detailsAfterIndex)
-      }
-
-      // 否则显示前N项
+      if (!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?.items) return []
-      if (!this.config?.detailsConfig) return [] // 如果没有配置detailsConfig，没有隐藏的项
+      if (!this.config?.detailsConfig) return []
       return this.config.items.slice(this.detailsAfterIndex)
-    },
-    // 获取有效的visible项目数量（排除null值）
-    validVisibleItemsCount () {
-      if (!this.config?.items || !this.data) return 0
-      const items = this.visibleItems
-      return items.filter(item => this.data[item.field] !== null && this.data[item.field] !== undefined).length
     }
   },
   created () {
@@ -153,7 +186,7 @@ export default {
   methods: {
     async getData (data) {
       this.data = null
-      this.showAllItems = false // 重置展开状态
+      this.showAllItems = false
       getConfigByName(data, 'af-his', res => {
         this.config = res
         console.log(this.config)
@@ -163,7 +196,6 @@ export default {
         })
       })
     },
-    // 切换详情显示状态
     toggleDetails () {
       this.showAllItems = !this.showAllItems
     }
@@ -185,30 +217,45 @@ export default {
   background: #fff;
   padding: 12px;
   border-radius: 4px;
+  width: 100%;
 }
 
 .descriptions-container {
-  position: relative; /* 为绝对定位的按钮提供参考点 */
+  position: relative;
+  width: 100%;
+  padding-right: 80px; /* 为按钮预留空间 */
 }
 
-.detail-button-wrapper {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 10;
+/* 自适应布局样式 */
+.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;
-  background-color: rgba(255, 255, 255, 0.9);
+  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?.style?.fontSize');
   white-space: nowrap;
-  line-height: 24px;
-  position: relative;
-  padding: 0;
-  margin: 0;
 }
 
 .label-wrapper.with-avatar {
@@ -216,15 +263,32 @@ export default {
 }
 
 .label-text {
+  white-space: nowrap;
+}
+
+.content-wrapper {
   display: inline-flex;
   align-items: center;
+  margin-left: 4px;
+  font-size: v-bind('config?.style?.fontSize');
+  color: rgba(0, 0, 0, 0.85);
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.content-wrapper {
-  line-height: 24px;
+.detail-button-wrapper {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+  padding: 4px 8px;
   white-space: nowrap;
+  background-color: #fff;
 }
 
+/* Ant Design 描述列表样式覆盖 */
 :deep(.ant-descriptions-row) {
   display: flex;
   flex-direction: row;
@@ -276,23 +340,11 @@ export default {
   padding: 0 !important;
 }
 
-/* 移除 Ant Design 的默认样式 */
-:deep(.ant-descriptions-item-container),
-:deep(.ant-descriptions-item-label),
-:deep(.ant-descriptions-item-content),
-:deep(.ant-descriptions-item-colon) {
-  box-sizing: border-box !important;
-  border-spacing: 0 !important;
-  border-collapse: collapse !important;
-}
-
-/* 添加悬停效果 */
 :deep(.ant-descriptions-item-container:hover) {
   background-color: rgba(0, 0, 0, 0.02);
   border-radius: 4px;
 }
 
-/* 添加详情按钮样式 */
 :deep(.ant-btn-link) {
   padding: 0;
   height: auto;
@@ -303,4 +355,20 @@ export default {
   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;
+  }
+}
 </style>

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

@@ -4,21 +4,21 @@
 
 `XHDescriptions` 是一个基于 Ant Design Vue 的描述列表组件封装，专用于显示患者基本信息。该组件具有以下特点：
 
-- 支持响应式布局，在不同屏幕尺寸下自动调整列数
+- 支持两种布局模式：响应式列数布局和自适应流式布局
 - 支持折叠/展开功能，控制信息的显示量
 - 支持自定义样式和头像
-- 自动隐藏值为 null、undefined的字段
+- 自动隐藏值为 null、undefined 的字段
 - 右上角悬浮"详情/收起"按钮，布局更整洁
 
 ## 配置说明
 
 组件通过 JSON 配置文件进行配置，主要包含以下部分：
 
-### 1. 布局配置 (layout)
+### 1. 布局配置 (layout，可选)
 
 ```json
 "layout": {
-    "xl": 4, 
+    "xl": 4,
     "md": 3,
     "sm": 2,
     "lg": 4,
@@ -27,24 +27,21 @@
 }
 ```
 
-- 用于设置在不同屏幕尺寸下的列数
+- 可选配置，用于设置固定列数布局模式
+- 当配置了 layout 时，使用 Ant Design 的 Descriptions 组件布局
 - 键名对应不同的屏幕尺寸（xs, sm, md, lg, xl, xxl）
 - 值为每行显示的列数
-- 建议根据字段宽度合理设置，避免一行过多字段导致布局问题
+- 如果不配置 layout，则使用自适应流式布局
 
 ### 2. 样式配置 (style)
 
 ```json
 "style": {
-    "size": "small",
-    "fontSize": "14px",
-    "bordered": false
+    "fontSize": "14px"
 }
 ```
 
-- `size`: 设置尺寸，可选值为 "default", "middle", "small"
 - `fontSize`: 控制文字大小
-- `bordered`: 是否显示边框
 
 ### 3. 字段配置 (items)
 
@@ -52,19 +49,13 @@
 "items": [
     {
         "field": "patientName",
-        "style": {
-            "minHeight": "24px",
-            "width": "120px",
-            "minWidth": "100px",
-            "height": "24px"
-        },
         "label": "患者",
+        "showAvatar": true,
         "avatar": {
             "size": 20,
             "background": "#5D5C5C",
             "icon": "user"
-        },
-        "showAvatar": true
+        }
     }
 ]
 ```
@@ -73,7 +64,6 @@
 
 - `field`: 字段名，用于从数据源获取值
 - `label`: 显示的标签名
-- `style`: 控制字段的样式（宽度、高度等）
 - `showAvatar`: 是否显示头像
 - `avatar`: 头像配置（仅当 showAvatar 为 true 时有效）
   - `size`: 头像大小
@@ -86,17 +76,18 @@
 "detailsConfig": {
     "buttonText": "详细",
     "buttonType": "link",
-    "showAfterIndex": 5
+    "showAfterIndex": 6
 }
 ```
 
 - `buttonText`: 详情按钮显示的文本
 - `buttonType`: 按钮类型，可选值为 "default", "primary", "dashed", "link" 等
 - `showAfterIndex`: 控制在显示多少个字段后显示详情按钮
-- **重要说明**：
-  - 只有明确配置了 `detailsConfig` 对象时，才会启用折叠功能
-  - 如果没有配置 `detailsConfig`，将直接显示所有字段，不会出现详情按钮
-  - 如果配置了 `detailsConfig` 但字段总数少于或等于 `showAfterIndex`，则不会显示详情按钮
+
+**重要说明**：
+- 只有明确配置了 `detailsConfig` 对象时，才会启用折叠功能
+- 如果没有配置 `detailsConfig`，将直接显示所有字段，不会出现详情按钮
+- 如果配置了 `detailsConfig` 但字段总数少于或等于 `showAfterIndex`，则不会显示详情按钮
 
 ### 5. 其他配置
 
@@ -132,56 +123,32 @@ export default {
 
 ```vue
 <template>
-  <XHDescriptions 
-    queryParamsName="patientBasicInfoConfig" 
-    :parameter="{ patientId: '123456' }" 
+  <XHDescriptions
+    queryParamsName="patientBasicInfoConfig"
+    :parameter="{ patientId: '123456' }"
   />
 </template>
 ```
 
 ## 特殊说明
 
-1. **响应式布局**：
-   - 组件会根据屏幕尺寸自动调整列数
-   - 可在 `layout` 配置中自定义不同尺寸下的列数
-   - 建议根据字段数量和宽度合理设置列数，例如字段较多时可减少列数
+1. **布局模式**：
+   - 配置了 `layout` 时：使用固定列数布局，每行显示指定数量的列
+   - 未配置 `layout` 时：使用自适应流式布局，根据内容自动换行
+   - 两种模式下详情按钮都固定在右上角
 
 2. **折叠/展开功能**：
    - 折叠功能只在明确配置了 `detailsConfig` 对象时启用
-   - 没有配置 `detailsConfig` 时，会直接显示所有字段，不会出现详情按钮
+   - 没有配置 `detailsConfig` 时，会直接显示所有字段
    - 详情按钮会悬浮在组件右上角，点击可展开/收起全部字段
-   - 按钮显示"详情"或"收起"，会根据当前状态自动切换
 
 3. **空值处理**：
-   - 当字段值为 `null`、`undefined` 或空字符串 `""` 时，该字段不会显示
+   - 当字段值为 `null`、`undefined` 时，该字段不会显示
    - 折叠功能会忽略空值的字段，只有有值的隐藏字段才会触发显示详情按钮
-   - 这个特性可以用于根据数据动态控制字段的显示，无需修改配置
-
-4. **字段重复问题处理**：
-   - 组件已经优化处理了展开时的字段重复显示问题
-   - 采用智能过滤机制，确保同一字段不会在多个位置显示
-
-## 配置优化建议
-
-1. **字段数量**：
-   - 建议将最重要、最常用的信息放在前 `showAfterIndex` 个位置
-   - 避免配置过多字段，通常不建议超过 20 个字段
-   - 如有大量相关字段，考虑拆分为多个不同的描述组件
-
-2. **布局优化**：
-   - 根据字段的宽度调整 `layout` 配置
-   - 较宽的字段（如地址、证件号等）可能需要更多的列宽
-   - 建议在大屏幕下（xl, xxl）不要超过 4-5 列
-
-3. **样式设置**：
-   - 为了统一视觉效果，建议所有相似的描述组件使用统一的样式设置
-   - 字段宽度设置合理的 `minWidth`，确保在各种屏幕下显示正常
 
 ## 配置示例
 
-### 启用折叠功能示例
-
-以下配置将启用折叠功能，只显示前6个字段，其余字段需点击"详细"按钮查看：
+### 固定列数布局示例
 
 ```json
 {
@@ -189,14 +156,12 @@ export default {
         "xl": 4,
         "md": 3,
         "sm": 2,
-        "lg": 3,
+        "lg": 4,
         "xs": 1,
         "xxl": 5
     },
     "style": {
-        "size": "small",
-        "fontSize": "14px",
-        "bordered": false
+        "fontSize": "14px"
     },
     "items": [
         {
@@ -216,67 +181,37 @@ export default {
         {
             "field": "diagnosisNo",
             "label": "诊号"
-        },
-        {
-            "field": "gender",
-            "label": "性别"
-        },
-        {
-            "field": "age",
-            "label": "年龄"
-        },
-        {
-            "field": "diagnosis",
-            "label": "诊断"
-        },
-        {
-            "field": "phone_no",
-            "label": "电话号码"
-        },
-        {
-            "field": "identification_no",
-            "label": "身份证号"
-        },
-        {
-            "field": "allergies",
-            "label": "过敏史"
         }
         // ... 更多字段
     ],
     "detailsConfig": {
         "buttonText": "详细",
         "buttonType": "link",
-        "showAfterIndex": 6  // 设置为6表示只显示前6个字段，其余字段点击"详细"后显示
+        "showAfterIndex": 6
     },
     "logicName": "patientBasicInfoLogic",
     "serverName": "af-his"
 }
 ```
 
-### 禁用折叠功能示例
-
-如果不希望使用折叠功能，希望一次性显示所有字段，只需要移除 `detailsConfig` 对象：
+### 自适应流式布局示例
 
 ```json
 {
-    "layout": {
-        "xl": 4,
-        "md": 3,
-        "sm": 2,
-        "lg": 3,
-        "xs": 1,
-        "xxl": 5
-    },
     "style": {
-        "size": "small",
-        "fontSize": "14px",
-        "bordered": false
+        "fontSize": "14px"
     },
     "items": [
-        // 字段配置...
+        {
+            "field": "patientName",
+            "label": "患者"
+        },
+        {
+            "field": "patientType",
+            "label": "类别"
+        }
     ],
     "logicName": "patientBasicInfoLogic",
     "serverName": "af-his"
-    // 没有 detailsConfig，将直接显示所有字段
 }
-``` 
+```

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

@@ -14,9 +14,9 @@
               >
                 <a-select-option v-for="item of resListCp" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
               </a-select>
-              <template v-if="this.modeType !== 'readonly' && this.resId !== -1">
-                <a-button icon="plus" @click="addRes"/>
-              </template>
+<!--              <template v-if="this.modeType !== 'readonly' && this.resId !== -1">-->
+<!--                <a-button icon="plus" @click="addRes"/>-->
+<!--              </template>-->
             </template>
             <a-radio-group
               v-show="showModeChoose"

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

@@ -6,6 +6,7 @@
       style="width: 150px"
       :allowClear="true"
       :showSearch="true"
+      :filter-option="filterOption"
       @change="handleChange"
     >
       <a-select-option v-for="(item, index) in data" :key="index" :value="item.value">
@@ -53,6 +54,9 @@ export default {
       this.selectedValue = value === '' ? undefined : value
       this.$emit('change', this.selectedValue)
     },
+    filterOption (input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    }
   },
   watch: {
     selectedValue (val) {