vue2-client 1.16.48 → 1.16.51

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

@@ -6,6 +6,7 @@
           :key="'card' + itemIndex"
           class="data-card"
           :class="{ 'card-clicked': card.isClicked }"
+          :headStyle="{ backgroundColor: '#f9f9f9' }"
         >
           <div
             v-if="config && card[config.ribbon]"
@@ -56,7 +57,7 @@
                       <div class="progress-done" :style="'width:' + card[item.key] * 100 + '%;backgroundColor: ' + determineRatioColor(card[item.key] * 100)"></div>
                     </div>
                   </div>
-                  <div class="progress-num">{{ card[item.key] * 100 }}%</div>
+                  <a-progress :percent="card[item.key]" :stroke-color="{ '0%': '#108ee9', '100%': '#87d068' }" strokeWidth="10" :style="{ width: '95%' }" />
                 </template>
                 <template v-else-if="item.type === 'custom' && tableColumns">
                   <!-- 根据 tableColumns 显示自定义内容 -->
@@ -75,7 +76,7 @@
                   </span>
                 </template>
                 <template v-else>
-                  <span class="body-item-value">{{ card[item.key] }}</span>
+                  <span class="body-item-value" style="float: right;">{{ card[item.key] }}</span>
                 </template>
               </div>
               <a-divider
@@ -87,23 +88,19 @@
           </div>
           <!-- 下方按钮 -->
           <template #actions>
-            <a-row align="middle" class="custom-actions" v-if="config && config.footer && config.footer.length > 0">
+            <div class="custom-actions" v-if="config && config.footer && config.footer.length > 0">
               <template v-for="(item, footerIndex) in config.footer">
-                <a-col :key="'footer_' + footerIndex" class="footer-item" :span="11" @click="clickFooter(card, item.emit, itemIndex)">
-                  <span>
-                    <a-icon :type="item.icon" class="footer-icon" />
-                    <span>{{ item.label }}</span>
-                  </span>
-                </a-col>
-                <a-col
+                <div :key="'footer_' + footerIndex" class="footer-item" @click="clickFooter(card, item.emit, itemIndex)">
+                  <a-icon :type="item.icon" class="footer-icon" />
+                  <span>{{ item.label }}</span>
+                </div>
+                <a-divider
                   v-if="footerIndex !== config.footer.length - 1"
-                  :span="1"
                   :key="'footer_' + footerIndex + 'after'"
-                  class="footer-item-split">
-                  |
-                </a-col>
+                  type="vertical"
+                  class="footer-item-split" />
               </template>
-            </a-row>
+            </div>
           </template>
         </a-card>
       </template>
@@ -428,16 +425,25 @@ export default {
   overflow-x: hidden;
   max-height: 85vh;
   .data-card {
-    width: 100%;
-    max-width: 300px;
+    flex: 0 0 20%;
+    max-width: 20%;
+    box-sizing: border-box;
     border: 2px solid rgb(244,244,244);
     border-radius: 5px;
-    margin: 2px;
+    margin: 0;
     overflow: hidden;
 
     ::v-deep .ant-card-body {
       padding: 15px !important; // 使用 !important 确保样式覆盖
     }
+    ::v-deep .ant-card-head {
+      padding: 0 8px !important; // 收紧左右内边距，贴近边框
+    }
+    ::v-deep .ant-card-head-title {
+      padding: 10px 0 !important; // 仅上下留白
+      margin: 0 !important;
+    }
+    ::v-deep .ant-card-head-wrapper { padding: 0 !important; }
 
     .header {
       width: 100%;
@@ -526,6 +532,7 @@ export default {
     display: flex;
     align-items: center;
     gap: 12px;
+    padding-left: 0; // 取消额外左缩进，进一步贴边
 
     &:hover {
       cursor: pointer;
@@ -568,6 +575,9 @@ export default {
           margin-left: 6px;
           color: #808080;
         }
+        .title-name {
+          font-weight: bold;
+        }
         .title-title3 {
           color: #808080;
         }
@@ -599,6 +609,10 @@ export default {
   }
 
   .custom-actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
       .footer-icon {
         margin-right: 5px;
       }
@@ -610,12 +624,24 @@ export default {
       .footer-item {
         color: rgba(117, 117, 117, 0.8);
         font-size: 1em;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1 1 0;
+        min-width: 0;
       }
 
       .footer-item:hover {
         color: rgb( 24,144,255 );
         cursor: pointer;
       }
+      :deep(.ant-divider-vertical) {
+        height: 24px;
+        border-left: 1px solid rgba(220, 220, 220, 0.59);
+        top: 0;
+        margin: 0 8px;
+      }
   }
 }
 

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

@@ -1,147 +1,147 @@
-<template>
-  <div class="x-input-wrapper" :class="wrapperClassObject">
-    <div class="input-container">
-      <span v-if="config?.label" class="input-label">{{ config.label }}</span>
-      <div class="input-wrapper">
-        <a-input
-          v-model="innerValue"
-          v-bind="$attrs"
-          :placeholder="config?.placeholder"
-          :size="config?.size"
-          :maxLength="config?.maxLength"
-          :disabled="config?.disabled"
-          :allowClear="config?.allowClear"
-          @change="handleInput"
-          @pressEnter="handleSearch"
-        >
-          <template v-if="config?.prefix" #prefix>
-            <a-icon :type="config.prefix" @click="handleSearch" class="clickable-icon" />
-          </template>
-          <template v-if="config?.suffix" #suffix>
-            <a-icon :type="config.suffix" @click="handleSearch" class="clickable-icon" />
-          </template>
-        </a-input>
-      </div>
-      <span v-if="config?.tail" class="input-tail">{{ config.tail }}</span>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XInput',
-  inheritAttrs: false,
-  props: {
-    value: {
-      type: [String, Number],
-      default: ''
-    },
-    queryParamsName: {
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-      innerValue: this.value || '',
-      config: null
-    }
-  },
-  computed: {
-    // 动态样式开关：布尔开关 + size 派生类
-    wrapperClassObject () {
-      const attrs = this.$attrs || {}
-      const classes = {}
-      const booleanStyleKeys = [
-
-      ]
-      booleanStyleKeys.forEach(key => {
-        const val = attrs[key]
-        const truthy = val === true || val === '' || val === 'true'
-        if (truthy) classes[`xinput-${key}`] = true
-      })
-      const size = attrs.size
-      if (size && typeof size === 'string') classes[`xinput-size-${size}`] = true
-      return classes
-    }
-  },
-  created () {
-    this.getData(this.queryParamsName)
-  },
-  emits: ['search'],
-  methods: {
-    runLogic,
-    async getData (data) {
-      getConfigByName(data, 'af-his', res => {
-        this.config = res
-        if (res.defaultValue !== undefined) {
-          this.innerValue = res.defaultValue
-        }
-      })
-    },
-    handleInput (e) {
-      const value = e.target.value
-      this.innerValue = value
-      this.$emit('search', value)
-    },
-    handleSearch () {
-      // 统一的搜索事件：将当前输入值发送给父组件
-      this.$emit('search', this.innerValue)
-    }
-  },
-  watch: {
-    value: {
-      handler (newValue) {
-        this.innerValue = newValue
-      },
-      immediate: true
-    },
-    queryParamsName: {
-      handler (newValue) {
-        this.getData(newValue)
-      },
-      deep: true
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-.x-input-wrapper {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-
-.input-container {
-  display: flex;
-  align-items: center;
-}
-
-.input-label {
-  white-space: nowrap;
-  color: rgba(0, 0, 0, 0.85);
-  padding-right: 8px; /* 标签右侧固定间距 */
-}
-
-.input-label {
-  white-space: nowrap;
-  color: rgba(0, 0, 0, 0.85);
-  padding-left: 4px; /* 标签左侧固定间距 */
-}
-
-.input-wrapper {
-  flex: 1; /* 输入框占据剩余空间 */
-}
-
-:deep(.clickable-icon) {
-  cursor: pointer;
-}
-
-:deep(.clickable-icon:hover) {
-  color: #1890ff;
-}
-
-</style>
+<template>
+  <div class="x-input-wrapper" :class="wrapperClassObject">
+    <div class="input-container">
+      <span v-if="config?.label" class="input-label">{{ config.label }}</span>
+      <div class="input-wrapper">
+        <a-input
+          v-model="innerValue"
+          v-bind="$attrs"
+          :placeholder="config?.placeholder"
+          :size="config?.size"
+          :maxLength="config?.maxLength"
+          :disabled="config?.disabled"
+          :allowClear="config?.allowClear"
+          @change="handleInput"
+          @pressEnter="handleSearch"
+        >
+          <template v-if="config?.prefix" #prefix>
+            <a-icon :type="config.prefix" @click="handleSearch" class="clickable-icon" />
+          </template>
+          <template v-if="config?.suffix" #suffix>
+            <a-icon :type="config.suffix" @click="handleSearch" class="clickable-icon" />
+          </template>
+        </a-input>
+      </div>
+      <span v-if="config?.tail" class="input-tail">{{ config.tail }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XInput',
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    queryParamsName: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      innerValue: this.value || '',
+      config: null
+    }
+  },
+  computed: {
+    // 动态样式开关：布尔开关 + size 派生类
+    wrapperClassObject () {
+      const attrs = this.$attrs || {}
+      const classes = {}
+      const booleanStyleKeys = [
+
+      ]
+      booleanStyleKeys.forEach(key => {
+        const val = attrs[key]
+        const truthy = val === true || val === '' || val === 'true'
+        if (truthy) classes[`xinput-${key}`] = true
+      })
+      const size = attrs.size
+      if (size && typeof size === 'string') classes[`xinput-size-${size}`] = true
+      return classes
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName)
+  },
+  emits: ['search'],
+  methods: {
+    runLogic,
+    async getData (data) {
+      getConfigByName(data, 'af-his', res => {
+        this.config = res
+        if (res.defaultValue !== undefined) {
+          this.innerValue = res.defaultValue
+        }
+      })
+    },
+    handleInput (e) {
+      const value = e.target.value
+      this.innerValue = value
+      this.$emit('search', value)
+    },
+    handleSearch () {
+      // 统一的搜索事件：将当前输入值发送给父组件
+      this.$emit('search', this.innerValue)
+    }
+  },
+  watch: {
+    value: {
+      handler (newValue) {
+        this.innerValue = newValue
+      },
+      immediate: true
+    },
+    queryParamsName: {
+      handler (newValue) {
+        this.getData(newValue)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.x-input-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.input-container {
+  display: flex;
+  align-items: center;
+}
+
+.input-label {
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.85);
+  padding-right: 8px; /* 标签右侧固定间距 */
+}
+
+.input-label {
+  white-space: nowrap;
+  color: rgba(0, 0, 0, 0.85);
+  padding-left: 4px; /* 标签左侧固定间距 */
+}
+
+.input-wrapper {
+  flex: 1; /* 输入框占据剩余空间 */
+}
+
+:deep(.clickable-icon) {
+  cursor: pointer;
+}
+
+:deep(.clickable-icon:hover) {
+  color: #1890ff;
+}
+
+</style>