vue2-client 1.18.45 → 1.18.46

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

@@ -1,28 +1,30 @@
 <template>
   <!-- 列表卡片模式 listMode: card -->
-  <div
-    class="x-list-wrapper"
-    :class="wrapperClassObject"
-    v-if="listMode"
-    ref="listRef"
-    @scroll="handleInfiniteOnLoad">
-    <a-list
-      :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }"
-      :data-source="localData">
+  <div class="x-list-wrapper" :class="wrapperClassObject" v-if="listMode" ref="listRef" @scroll="handleInfiniteOnLoad">
+    <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 }" :data-source="localData">
       <a-list-item slot="renderItem" slot-scope="item, index">
-        <div class="card-a-col" :class="{ 'selected-active': enableSelectRow && currentSelectedIndex === index }" :style="getCardStyle(currentTitleValue(index))" @click="handleCardClick(index)">
+        <div
+          class="card-a-col"
+          :class="{ 'selected-active': enableSelectRow && currentSelectedIndex === index }"
+          :style="getCardStyle(currentTitleValue(index))"
+          @click="handleCardClick(index)"
+        >
           <a-row class="card-row">
-            <a-col class="id-a-col" :span="4" v-for="(detail,idx) in item.filter(d => d.label == label)" :key="idx">
+            <a-col class="id-a-col" :span="4" v-for="(detail, idx) in item.filter(d => d.label == label)" :key="idx">
               {{ detail.value }}
               <div class="gender-icon" v-if="getHasPatient(item) && getGender(item)">
-                <img :src="getGender(item) === '男' ? maleIcon : femaleIcon" :alt="getGender(item)" class="gender-img" />
+                <img
+                  :src="getGender(item) === '男' ? maleIcon : femaleIcon"
+                  :alt="getGender(item)"
+                  class="gender-img"
+                />
               </div>
             </a-col>
             <a-col :span="20" class="id-a-col-2">
-              <template v-for="(detail,idx) in item">
+              <template v-for="(detail, idx) in item">
                 <div :key="`title_${idx}`" class="title-row" v-if="detail.type == 'title'">
                   <a-tooltip :title="detail.value" placement="topLeft">
-                    <span class="describe-list-a-col" :class="{name: detail.bold}">{{ detail.value }}</span>
+                    <span class="describe-list-a-col" :class="{ name: detail.bold }">{{ detail.value }}</span>
                   </a-tooltip>
                   <div class="title-actions" v-if="getTitleOptions && getTitleOptions.length">
                     <span class="title-select-label">{{ getDisplayTitleLabel(index) }}</span>
@@ -30,36 +32,54 @@
                       <a class="arrow-btn" @click.prevent>
                         <a-icon type="down" />
                       </a>
-                      <a-menu slot="overlay" :selectedKeys="[String(currentTitleValue(index))]" @click="info => handleTitleMenuClick(info, index)">
-                        <a-menu-item v-for="opt in getTitleOptions" :key="String(opt && opt.value !== undefined ? opt.value : opt)">
+                      <a-menu
+                        slot="overlay"
+                        :selectedKeys="[String(currentTitleValue(index))]"
+                        @click="info => handleTitleMenuClick(info, index)"
+                      >
+                        <a-menu-item
+                          v-for="opt in getTitleOptions"
+                          :key="String(opt && opt.value !== undefined ? opt.value : opt)"
+                        >
                           {{ opt && opt.label !== undefined ? opt.label : opt }}
                         </a-menu-item>
                       </a-menu>
                     </a-dropdown>
                   </div>
                 </div>
-                <span :key="idx" class="component-a-col" v-else-if="getHasPatient(item) && detail.type == 'component' && detail.label != label">
+                <span
+                  :key="idx"
+                  class="component-a-col"
+                  v-else-if="getHasPatient(item) && detail.type == 'component' && detail.label != label"
+                >
                   <a-tooltip :title="detail.label" placement="topLeft">
                     <span class="label-text">{{ `${detail.label}：` }}</span>
                   </a-tooltip>
                   <component
                     :is="detail.slotType"
                     :key="idx"
-                    :ref="`dynamicComponent_${ idx.slotType || idx}_${idx}`"
+                    :ref="`dynamicComponent_${idx.slotType || idx}_${idx}`"
                     :serviceName="serviceName"
                     v-on="forwardAllEvents"
                     :queryParamsName="detail.value"
                     :countVisible="false"
                   />
                 </span>
-                <span :key="idx" class="component-a-col" v-else-if="getHasPatient(item) && detail.type == 'date'">
+                <span :key="`${idx}-date`" class="component-a-col" v-else-if="getHasPatient(item) && detail.type == 'date'">
                   <a-tooltip :title="detail.label" placement="topLeft">
                     <span class="label-text">{{ `${detail.label}：` }}</span>
                   </a-tooltip>
                   <a-date-picker @change="onChange" />
                 </span>
-                <a-tooltip :key="idx" :title="`${detail.label}：${detail.value}`" placement="topLeft" v-else-if="getHasPatient(item) && detail.label != label">
-                  <span class="describe-list-a-col" :class="{name: detail.bold}">{{ `${detail.label}：${detail.value}` }}</span>
+                <a-tooltip
+                  :key="`${idx}-tooltip`"
+                  :title="`${detail.label}：${detail.value}`"
+                  placement="topLeft"
+                  v-else-if="getHasPatient(item) && detail.label != label"
+                >
+                  <span class="describe-list-a-col" :class="{ name: detail.bold }">
+                    {{ `${detail.label}：${detail.value}` }}
+                  </span>
                 </a-tooltip>
               </template>
               <a-button
@@ -68,7 +88,8 @@
                 :key="i"
                 icon="search"
                 class="button-a-col"
-                @click.stop="click(item, index)">
+                @click.stop="click(item, index)"
+              >
                 {{ btn }}
               </a-button>
             </a-col>
@@ -79,9 +100,7 @@
         <a-spin />
       </div>
       <div v-if="allLoaded">
-        <div class="demo-infinite-list-bottom">
-          已经显示全部数据
-        </div>
+        <div class="demo-infinite-list-bottom">已经显示全部数据</div>
       </div>
     </a-list>
   </div>
@@ -96,16 +115,17 @@
         @click="handleClick(index)"
         @mouseenter="enableHoverOptions && handleMouseEnter(index)"
         @mouseleave="handleMouseLeave"
-        :class="{ 'hover-active': enableHoverOptions && hoveredIndex === index, 'selected-active': enableSelectRow && currentSelectedIndex === index }">
-        <i
-          v-if="icon"
-          class="icon-menu"
-          :style="getIconStyle(item)">
-        </i>
+        :class="{
+          'hover-active': enableHoverOptions && hoveredIndex === index,
+          'selected-active': enableSelectRow && currentSelectedIndex === index
+        }"
+      >
+        <i v-if="icon" class="icon-menu" :style="getIconStyle(item)"></i>
         <span
           class="item-text"
           :class="{ 'text-truncated': enableHoverOptions && hoveredIndex === index }"
-          :style="getTextStyle(index)">
+          :style="getTextStyle(index)"
+        >
           {{ item.number }} {{ item.name }}
         </span>
 
@@ -115,7 +135,8 @@
             :key="idx"
             type="link"
             :class="['confirm-btn', buttonMode ? 'hover-btn' : '']"
-            @click.stop="click(index, idx)">
+            @click.stop="click(index, idx)"
+          >
             <span :class="{ 'hover-active': enableHoverOptions && hoveredIndex === index }">{{ name }}</span>
           </a-button>
         </div>
@@ -125,13 +146,15 @@
           v-show="enableHoverOptions && hoveredIndex === index"
           class="hover-options"
           @mouseenter="handleOptionsEnter"
-          @mouseleave="handleOptionsLeave">
+          @mouseleave="handleOptionsLeave"
+        >
           <div class="hover-options-content">
             <div
               v-for="(Item, idx) in select_options"
               :key="idx"
               class="option-item"
-              @click="handleOptionClick(index, Item)">
+              @click="handleOptionClick(index, Item)"
+            >
               {{ Item }}
             </div>
           </div>
@@ -142,7 +165,6 @@
 </template>
 
 <script>
-
 import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
 
 export default {
@@ -164,7 +186,9 @@ export default {
     },
     fixedQueryForm: {
       type: Object,
-      default: { condition: '1=1' }
+      default: () => {
+        return { condition: '1=1' }
+      }
     },
     enableHoverOptions: {
       type: Boolean,
@@ -197,9 +221,9 @@ export default {
     titleSelectValue: {
       type: [String, Number],
       default: undefined
-    },
+    }
   },
-  data () {
+  data() {
     return {
       data: [], // 数据源
       localData: [], // 本地数据源
@@ -234,19 +258,17 @@ export default {
   },
   inject: ['getComponentByName'],
 
-  created () {
+  created() {
     this.getData(this.queryParamsName, this.fixedQueryForm)
   },
-  mounted () {},
+  mounted() {},
   computed: {
     // 参考 HForm 的 wrapperClassObject 规则，支持通过组件属性动态控制样式
-    wrapperClassObject () {
+    wrapperClassObject() {
       const a = this.$attrs || {}
       const classes = {}
       // 多个布尔型样式开关（存在且为真则生效）
-      const booleanStyleKeys = [
-        'enableNewListStyle'
-      ]
+      const booleanStyleKeys = ['enableNewListStyle']
       booleanStyleKeys.forEach(key => {
         const val = a[key]
         const truthy = val === true || val === '' || val === 'true'
@@ -255,12 +277,12 @@ export default {
       return classes
     },
     // 标题下拉：优先使用外部 props，否则使用内部配置
-    getTitleOptions () {
+    getTitleOptions() {
       if (Array.isArray(this.titleSelectOptions) && this.titleSelectOptions.length) return this.titleSelectOptions
       return this.internalTitleOptions
     },
-    currentTitleValue () {
-      return (index) => {
+    currentTitleValue() {
+      return index => {
         if (this.titleSelectValue !== undefined) return this.titleSelectValue
         const local = this.titleValueByIndex[index]
         if (local !== undefined) return local
@@ -271,20 +293,25 @@ export default {
           if (title && title.titleRightValue !== undefined) return title.titleRightValue
         }
         // 最终回退：使用 options 的第一个
-        const def = this.internalTitleOptions && this.internalTitleOptions.length ? (this.internalTitleOptions[0].value !== undefined ? this.internalTitleOptions[0].value : this.internalTitleOptions[0]) : undefined
+        const def =
+          this.internalTitleOptions && this.internalTitleOptions.length
+            ? this.internalTitleOptions[0].value !== undefined
+              ? this.internalTitleOptions[0].value
+              : this.internalTitleOptions[0]
+            : undefined
         return def
       }
     },
     // 选择控制：受控优先
-    currentSelectedIndex () {
+    currentSelectedIndex() {
       return typeof this.selectedIndex === 'number' ? this.selectedIndex : this.localSelectedIndex
     },
-    enableSelectRow () {
+    enableSelectRow() {
       const a = this.$attrs || {}
       const val = a.enableSelection
       return val === true || val === '' || val === 'true'
     },
-    forwardAllEvents () {
+    forwardAllEvents() {
       return {
         // 监听所有事件并转发给父组件
         '*': (eventName, ...payload) => {
@@ -294,10 +321,10 @@ export default {
     }
   },
   methods: {
-    onChange (date, dateString) {
+    onChange(date, dateString) {
       this.$emit('dateChange', date, dateString)
     },
-    handleInfiniteOnLoad (event) {
+    handleInfiniteOnLoad(event) {
       if (this.busy || this.allLoaded) return // 防止重复加载
       if (this.scrollTimer) clearTimeout(this.scrollTimer)
       this.scrollTimer = setTimeout(() => {
@@ -311,31 +338,34 @@ export default {
           this.loading = true
           this.nowPage = this.nowPage + this.pageSize
           this.fixedQueryForm.condition = `Limit ${this.nowPage}, ${this.pageSize}`
-          runLogic(this.logicName, this.fixedQueryForm, 'af-his').then(async (res) => {
-            this.localData = [...this.localData, ...res]
-            if (res.length < this.pageSize) {
-              this.allLoaded = true
-            }
-          }).catch(e => {
-            this.$message.error(e.message)
-          }).finally(() => {
-            this.loading = false
-            this.busy = false
-          })
+          runLogic(this.logicName, this.fixedQueryForm, 'af-his')
+            .then(async res => {
+              this.localData = [...this.localData, ...res]
+              if (res.length < this.pageSize) {
+                this.allLoaded = true
+              }
+            })
+            .catch(e => {
+              this.$message.error(e.message)
+            })
+            .finally(() => {
+              this.loading = false
+              this.busy = false
+            })
         }
       }, 100)
     },
-    async getData (config, param) {
+    async getData(config, param) {
       const that = this
-      getConfigByName(config, 'af-his', async (res) => {
-        that.listMode = await res.listMode == 'card'
+      getConfigByName(config, 'af-his', async res => {
+        that.listMode = (await res.listMode) == 'card'
         that.logicName = await res.data
         that.button = await res.button // 按钮
         that.icon = await res.icon //  图标
         that.label = await res.label // 标签
-        that.buttonNames = await res.buttonNames || []// 按钮文本
-        that.buttonMode = await res.buttonMode || false// 按钮模式
-        that.cardButtonsVisible = await res.cardButtonsVisible || false// 卡片按钮
+        that.buttonNames = (await res.buttonNames) || [] // 按钮文本
+        that.buttonMode = (await res.buttonMode) || false // 按钮模式
+        that.cardButtonsVisible = (await res.cardButtonsVisible) || false // 卡片按钮
         // 标题下拉：从配置拿 options: [{label,value,color}]
         if (Array.isArray(res.titleOptions)) {
           this.internalTitleOptions = res.titleOptions
@@ -344,14 +374,18 @@ export default {
             this.titleValueByIndex = {}
           }
         }
-        this.enableHoverOptions = await res.enableHoverOptions || false// 悬浮选项框
+        this.enableHoverOptions = (await res.enableHoverOptions) || false // 悬浮选项框
         if (this.enableHoverOptions) {
           this.select_options = await res.select_options
         }
-        if (that.listMode) { param.condition = `Limit ${that.nowPage}, ${that.pageSize}` }
+        if (that.listMode) {
+          param.condition = `Limit ${that.nowPage}, ${that.pageSize}`
+        }
         runLogic(res.data, param, 'af-his').then(result => {
           that.data = result
-          if (that.nowPage === 0) { this.localData = result }
+          if (that.nowPage === 0) {
+            this.localData = result
+          }
           // 初始化每张卡片的 title 选中值：优先读取模板 titleRightValue，否则使用配置默认或第一项
           if (Array.isArray(this.localData)) {
             this.localData.forEach((row, idx) => {
@@ -364,9 +398,12 @@ export default {
                 }
               }
               // fallback：配置默认或第一项
-              const def = (this.internalTitleOptions && this.internalTitleOptions.length)
-                ? (this.internalTitleOptions[0].value !== undefined ? this.internalTitleOptions[0].value : this.internalTitleOptions[0])
-                : undefined
+              const def =
+                this.internalTitleOptions && this.internalTitleOptions.length
+                  ? this.internalTitleOptions[0].value !== undefined
+                    ? this.internalTitleOptions[0].value
+                    : this.internalTitleOptions[0]
+                  : undefined
               if (def !== undefined) this.$set(this.titleValueByIndex, idx, def)
             })
           }
@@ -374,7 +411,7 @@ export default {
       })
     },
     // 提取性别：从数组数据中查找 label 含“性别”的项
-    getGender (item) {
+    getGender(item) {
       if (!Array.isArray(item)) return null
       const g = item.find(d => d && typeof d.label === 'string' && d.label.indexOf('性别') > -1)
       const val = g && (g.value || g.text)
@@ -384,14 +421,14 @@ export default {
       return null
     },
     // 读取标题项上的 hasPatient 布尔值
-    getHasPatient (item) {
+    getHasPatient(item) {
       if (!Array.isArray(item)) return true
       const title = item.find(d => d && d.type === 'title')
       if (!title || typeof title.hasPatient === 'undefined') return true
       return !!title.hasPatient
     },
     // 标题右侧下拉选择
-    handleTitleSelectChange (val, index) {
+    handleTitleSelectChange(val, index) {
       // 重复值拦截：若值未变化则直接返回
       const prev = this.normalizeValue(this.currentTitleValue(index))
       const next = this.normalizeValue(val)
@@ -408,31 +445,37 @@ export default {
       }, 200)
     },
     // 读取标题项中额外需要传递的参数（可选），例如 { inpatientNo: row.t_id }
-    getTitleExtraParams (index) {
+    getTitleExtraParams(index) {
       const row = Array.isArray(this.localData) ? this.localData[index] : null
       if (!Array.isArray(row)) return {}
       const title = row.find(d => d && d.type === 'title') || {}
       if (title && title.extraParams && typeof title.extraParams === 'object') return title.extraParams
       return {}
     },
-    handleTitleMenuClick ({ key }, index) {
+    handleTitleMenuClick({ key }, index) {
       const v = isNaN(Number(key)) ? key : Number(key)
       this.handleTitleSelectChange(v, index)
     },
     // 根据当前选择项的 color 设置卡片背景色
-    normalizeValue (v) { return String(v) },
-    getCardStyle (val) {
+    normalizeValue(v) {
+      return String(v)
+    },
+    getCardStyle(val) {
       const target = this.normalizeValue(val)
-      const opt = (this.getTitleOptions || []).find(o => this.normalizeValue(o && (o.value !== undefined ? o.value : o)) === target)
+      const opt = (this.getTitleOptions || []).find(
+        o => this.normalizeValue(o && (o.value !== undefined ? o.value : o)) === target
+      )
       const color = opt && (opt.color || (opt.style && opt.style.background))
       return color ? { backgroundColor: color } : {}
     },
-    getTitleLabel (val) {
+    getTitleLabel(val) {
       const target = this.normalizeValue(val)
-      const opt = (this.getTitleOptions || []).find(o => this.normalizeValue(o && (o.value !== undefined ? o.value : o)) === target)
+      const opt = (this.getTitleOptions || []).find(
+        o => this.normalizeValue(o && (o.value !== undefined ? o.value : o)) === target
+      )
       return opt && (opt.label !== undefined ? opt.label : opt)
     },
-    getDisplayTitleLabel (index) {
+    getDisplayTitleLabel(index) {
       // 优先展示“当前选中值”的 label，未选中再回退到模板提供的 titleRightLabel
       const current = this.getTitleLabel(this.currentTitleValue(index))
       if (current) return current
@@ -442,17 +485,17 @@ export default {
       return title && title.titleRightLabel ? title.titleRightLabel : ''
     },
     // 点击列表项
-    handleClick (index) {
+    handleClick(index) {
       if (this.enableSelectRow && this.selectOnClick) this.setSelectedIndex(index)
       this.$emit('listClick', this.data[index])
     },
     // 卡片模式点击卡片
-    handleCardClick (index) {
+    handleCardClick(index) {
       if (this.enableSelectRow && this.selectOnClick) this.setSelectedIndex(index)
       this.$emit('listClick', this.localData[index])
     },
     // 外部可调用：设置选中索引
-    setSelectedIndex (index) {
+    setSelectedIndex(index) {
       const next = typeof index === 'number' ? index : -1
       if (typeof this.selectedIndex === 'number') {
         // 受控：仅派发事件
@@ -464,15 +507,17 @@ export default {
       }
     },
     // 外部可调用：清空选中
-    clearSelected () { this.setSelectedIndex(-1) },
-    refreshList (param) {
+    clearSelected() {
+      this.setSelectedIndex(-1)
+    },
+    refreshList(param) {
       this.getData(this.queryParamsName, param)
     },
-    click (index, buttonIndex) {
+    click(index, buttonIndex) {
       this.$emit('click', { data: this.data[index], name: this.buttonNames[buttonIndex] })
     },
     // 根据对象字段匹配选中（默认按 id 字段）
-    setSelectedById (id, field = 'id') {
+    setSelectedById(id, field = 'id') {
       const list = this.listMode ? this.localData : this.data
       if (!Array.isArray(list)) return
       const index = list.findIndex(item => {
@@ -485,38 +530,38 @@ export default {
       if (index >= 0) this.setSelectedIndex(index)
     },
     // 根据 label/value（卡片数组数据场景）匹配选中
-    setSelectedByLabelValue (label, value) {
+    setSelectedByLabelValue(label, value) {
       const list = this.listMode ? this.localData : this.data
       if (!Array.isArray(list)) return
-      const index = list.findIndex(item => Array.isArray(item) && item.some(d => d && d.label === label && d.value === value))
+      const index = list.findIndex(
+        item => Array.isArray(item) && item.some(d => d && d.label === label && d.value === value)
+      )
       if (index >= 0) this.setSelectedIndex(index)
     },
     // 通用：传入谓词函数决定选中项
-    setSelectedBy (predicate) {
+    setSelectedBy(predicate) {
       if (typeof predicate !== 'function') return
       const list = this.listMode ? this.localData : this.data
       if (!Array.isArray(list)) return
       const index = list.findIndex(predicate)
       if (index >= 0) this.setSelectedIndex(index)
     },
-    getIconStyle (item) {
-      return item.picture
-        ? { backgroundImage: `url(${item.picture})` }
-        : {}
+    getIconStyle(item) {
+      return item.picture ? { backgroundImage: `url(${item.picture})` } : {}
     },
-    filterData (par) {
+    filterData(par) {
       runLogic(this.queryParamsName, par, 'af-his').then(res => {
         this.data = res.data
       })
     },
     // 鼠标进入列表项
-    handleMouseEnter (index) {
+    handleMouseEnter(index) {
       this.clearAllTimers()
       this.hoveredIndex = index
       this.isOptionsHovered = true
     },
     // 鼠标离开列表项
-    handleMouseLeave () {
+    handleMouseLeave() {
       this.clearAllTimers()
       this.leaveTimer = setTimeout(() => {
         this.isOptionsHovered = false
@@ -524,12 +569,12 @@ export default {
       }, 100)
     },
     // 鼠标进入悬浮选项框
-    handleOptionsEnter () {
+    handleOptionsEnter() {
       this.clearAllTimers()
       this.isOptionsHovered = true
     },
     // 鼠标离开悬浮选项框
-    handleOptionsLeave () {
+    handleOptionsLeave() {
       this.clearAllTimers()
       this.leaveTimer = setTimeout(() => {
         this.isOptionsHovered = false
@@ -537,7 +582,7 @@ export default {
       }, 100)
     },
     // 清除所有定时器
-    clearAllTimers () {
+    clearAllTimers() {
       if (this.hoverTimer) {
         clearTimeout(this.hoverTimer)
         this.hoverTimer = null
@@ -548,17 +593,17 @@ export default {
       }
     },
     // 选项框点击
-    handleOptionClick (index, action) {
+    handleOptionClick(index, action) {
       this.$emit('optionClick', { data: this.data[index], action })
     },
     // 获取文本样式（简化版本，主要依赖CSS类控制）
-    getTextStyle (index) {
+    getTextStyle(index) {
       return {}
-    },
+    }
   },
   watch: {
     // 同步受控值变化
-    selectedIndex (val) {
+    selectedIndex(val) {
       if (typeof val === 'number') {
         // 允许受控值影响内部显示
         this.localSelectedIndex = val
@@ -566,12 +611,12 @@ export default {
     },
     fixedQueryForm: {
       deep: true,
-      handler (val) {
+      handler(val) {
         this.refreshList(val)
       }
-    },
+    }
   },
-  beforeDestroy () {
+  beforeDestroy() {
     const ref = this.$refs.listRef
     if (ref && ref.removeEventListener) {
       ref.removeEventListener('scroll', this.handleInfiniteOnLoad)
@@ -595,13 +640,13 @@ export default {
 .list-item {
   height: 35px;
   border-radius: 6px;
-  background-color: #F4F4F4;
+  background-color: #f4f4f4;
   padding: 8px 15px;
   font-size: 16px;
   display: flex;
   align-items: center;
   width: 100%;
-  border: 1px solid #D9D9D9;
+  border: 1px solid #d9d9d9;
   box-sizing: border-box;
   margin-bottom: 8px !important;
   position: relative;
@@ -664,24 +709,30 @@ export default {
 }
 
 /* 选中态样式（通过 selectRow 开启） */
-.selected-active { color: white; }
+.selected-active {
+  color: white;
+}
 .list-item.selected-active {
-  background-color: #0057FE !important;
+  background-color: #0057fe !important;
   color: white;
   border: none !important;
 }
 .list-item.selected-active .confirm-btn,
 .list-item.selected-active .confirm-btn span,
 .list-item.selected-active .ant-btn,
-.list-item.selected-active .ant-btn > span { color: #ffffff !important; }
+.list-item.selected-active .ant-btn > span {
+  color: #ffffff !important;
+}
 .card-a-col.selected-active {
-  background-color: #0057FE !important;
+  background-color: #0057fe !important;
   color: white;
   border: none !important;
 }
 .card-a-col.selected-active .button-a-col,
 .card-a-col.selected-active .button-a-col .ant-btn,
-.card-a-col.selected-active .button-a-col .ant-btn > span { color: #ffffff !important; }
+.card-a-col.selected-active .button-a-col .ant-btn > span {
+  color: #ffffff !important;
+}
 
 .hover-options {
   position: absolute;
@@ -732,18 +783,18 @@ export default {
   text-align: center;
 }
 
-.demo-infinite-container{
+.demo-infinite-container {
   overflow-x: hidden;
   overflow-y: auto;
   height: 85vh;
 }
-.card-row{
+.card-row {
   height: 100%;
   width: 100%;
   border-radius: 6px;
   padding: 6px;
 }
-.id-a-col{
+.id-a-col {
   font-size: 22px;
   font-weight: 700;
   display: flex;
@@ -752,7 +803,7 @@ export default {
   justify-content: center;
   gap: 4px;
 }
-.id-a-col-2{
+.id-a-col-2 {
   padding: 8px;
   height: 100%;
   overflow: hidden;
@@ -760,7 +811,7 @@ export default {
   flex-direction: column;
   justify-content: space-between;
 }
-.describe-list-a-col{
+.describe-list-a-col {
   display: block;
   font-family: Source Han Sans;
   font-size: 16px;
@@ -771,62 +822,90 @@ export default {
   white-space: nowrap;
   max-width: 100%;
 }
-.name{
+.name {
   font-family: Source Han Sans;
   font-size: 22px;
   font-weight: bold;
   line-height: normal;
 }
-.component-a-col{
+.component-a-col {
   display: flex;
   align-items: center;
   overflow: hidden;
 }
-.label-text{
+.label-text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 120px;
   display: inline-block;
 }
-.gender-icon{
+.gender-icon {
   margin-top: 2px;
 }
-.gender-icon .male{ color: #2f54eb; font-size: 14px; }
-.gender-icon .female{ color: #eb2f96; font-size: 14px; }
-.gender-img{ width: 100%; height: 100%; opacity: 1; display: inline-block; }
-.title-row{
+.gender-icon .male {
+  color: #2f54eb;
+  font-size: 14px;
+}
+.gender-icon .female {
+  color: #eb2f96;
+  font-size: 14px;
+}
+.gender-img {
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  display: inline-block;
+}
+.title-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
 }
 /* 标题文本占满剩余空间，确保箭头贴右 */
-.title-row .describe-list-a-col{ flex: 1; }
-.title-actions{ display: inline-flex; align-items: center; gap: 6px; }
-.title-select-label{
+.title-row .describe-list-a-col {
+  flex: 1;
+}
+.title-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.title-select-label {
   font-family: Source Han Sans;
   font-size: 16px;
   font-weight: normal;
   line-height: normal;
   color: #595959;
 }
-.title-select{ min-width: 96px; }
-.arrow-btn{ display: inline-flex; align-items: center; color: #8C8C8C; }
-.arrow-btn .anticon{ font-size: 18px; }
+.title-select {
+  min-width: 96px;
+}
+.arrow-btn {
+  display: inline-flex;
+  align-items: center;
+  color: #8c8c8c;
+}
+.arrow-btn .anticon {
+  font-size: 18px;
+}
 /* 放大下拉箭头的 svg 尺寸以符合 UI（scoped 深度选择） */
-::v-deep .arrow-btn .anticon svg{ width: 2em; height: 2em; }
-.button-a-col{
+::v-deep .arrow-btn .anticon svg {
+  width: 2em;
+  height: 2em;
+}
+.button-a-col {
   position: absolute;
   top: 245px;
   left: 225px;
 }
-.card-a-col{
+.card-a-col {
   background-color: rgba(247, 249, 252);
   height: 297px;
   width: auto;
   border-radius: 6px;
-  border: 1px solid #E5E9F0;
+  border: 1px solid #e5e9f0;
   overflow: hidden;
   position: relative;
   box-sizing: border-box;
@@ -848,7 +927,7 @@ export default {
     height: 35px;
     border-radius: 6px;
     opacity: 1;
-    background: #F4F4F4;
+    background: #f4f4f4;
     padding: 8px 12px;
     margin-bottom: 8px !important;
     display: flex;
@@ -871,7 +950,7 @@ export default {
     font-weight: normal;
     line-height: normal;
     letter-spacing: 0em;
-    font-feature-settings: "kern" on;
+    font-feature-settings: 'kern' on;
     color: #313131;
     flex: 1; /* 占据剩余空间 */
     margin-right: 1px; /* 与按钮组保持8px间距 */
@@ -902,7 +981,7 @@ export default {
     font-weight: normal;
     line-height: normal;
     letter-spacing: 0em;
-    font-feature-settings: "kern" on;
+    font-feature-settings: 'kern' on;
     /* 移除固定颜色，继承默认颜色 */
     padding: 0; /* 清除内边距 */
     margin-left: 0; /* 移除左边距，使用 gap 控制间距 */
@@ -915,7 +994,7 @@ export default {
       font-weight: normal;
       line-height: normal;
       letter-spacing: 0em;
-      font-feature-settings: "kern" on;
+      font-feature-settings: 'kern' on;
       /* 移除固定颜色，继承默认颜色 */
     }
   }