vue2-client 1.15.79 → 1.15.82

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

@@ -3,21 +3,51 @@
     <a-button-group>
       <a-button
         v-for="(button) in renderConfig"
+        :style="buttonStyle"
         :key="button.key"
         :ref="'buttonGroup-' + button.key"
         :type="button.type || 'default'"
         :disabled="button.disabled"
-        :icon="button.icon"
+        :class="{
+          'selected-button': enableSelect && selectedButtonKey === button.key,
+          'icon-only-button': buttonsMode === 'icon'
+        }"
         @click="handleButtonClick(button)"
       >
-        {{ button.label }}
+        <!-- 水印图标（watermarkMode为true时显示） -->
+        <div class="watermark-icon" v-if="watermarkMode && button.icon">
+          <a-icon :type="button.icon" />
+        </div>
+
+        <!-- 普通模式 -->
+        <template v-if="buttonsMode === 'default'">
+          <a-icon  v-if="!watermarkMode && button.icon" :type="button.icon"  />
+          {{ button.label }}
+        </template>
+
+        <!-- 图标模式（只显示图标） -->
+        <template v-if="buttonsMode === 'icon' && button.icon">
+          <a-icon :type="button.icon" />
+          <span class="sr-only">{{ button.label }}</span>
+        </template>
+
+        <!-- 卡片模式 -->
+        <template v-if="buttonsMode === 'card'">
+          <div class="card-content">
+            <div class="card-label">{{ button.label }}</div>
+            <div class="card-value">
+              <span class="number">{{ button.value || 0 }}</span>
+              <span class="unit">{{ button.unit || '' }}</span>
+            </div>
+          </div>
+        </template>
       </a-button>
     </a-button-group>
   </div>
 </template>
 
 <script>
-import { getConfigByName } from '@vue2-client/services/api/common'
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
 
 export default {
   name: 'XButtons',
@@ -38,6 +68,18 @@ export default {
     return {
       // 配置内容
       renderConfig: undefined,
+      // 按钮格式
+      buttonsMode: 'default',
+      // 按钮事件禁用开启状态
+      eventDisabled: false,
+      // 按钮样式
+      buttonStyle: '',
+      // 选中效果
+      enableSelect: false,
+      // 选中key
+      selectedButtonKey: undefined,
+      // 按钮图标样式
+      watermarkMode: false
     }
   },
   methods: {
@@ -47,10 +89,25 @@ export default {
     initData (parameter) {
       // 按钮组需要主动调用初始化方法
       getConfigByName(parameter, this.serviceName, (res) => {
-        this.init({
-          ...res,
-          serviceName: this.serviceName,
-        })
+        this.buttonsMode = ['default', 'card', 'icon'].includes(res.buttonsMode) ? res.buttonsMode : 'default'
+        this.enableSelect = res.enableSelect ?? false
+        this.buttonStyle = res.style ?? ''
+        this.eventDisabled = res.eventDisabled ?? false
+        this.watermarkMode = res.watermarkMode ?? false
+        if (res.logicName) {
+          runLogic(res.logicName, {}, this.serviceName).then((result) => {
+            res.value = result
+            this.init({
+              ...res,
+              serviceName: this.serviceName,
+            })
+          })
+        } else {
+          this.init({
+            ...res,
+            serviceName: this.serviceName,
+          })
+        }
       }, this.env === 'dev')
     },
     init (params) {
@@ -60,12 +117,18 @@ export default {
       } = params
       this.renderConfig = value
     },
+    getKey () {
+      return this.selectedButtonKey
+    },
     handleButtonClick (item) {
-      if (item.clickEventName && this.$listeners[item.clickEventName]) {
-        // 交由父级处理
-        this.$emit(item.clickEventName, item)
-      } else {
-        this.defaultAction(item.clickEventName, item)
+      this.selectedButtonKey = this.selectedButtonKey === item.key ? null : item.key
+      if (!this.eventDisabled) {
+        if (item.clickEventName && this.$listeners[item.clickEventName]) {
+          // 交由父级处理
+          this.$emit(item.clickEventName, item)
+        } else {
+          this.defaultAction(item.clickEventName, item)
+        }
       }
     },
     defaultAction (clickEventName, item, callback) {
@@ -90,4 +153,132 @@ export default {
 .ant-btn-group {
   flex-wrap: wrap;
 }
+/* 选中按钮的样式 */
+.selected-button {
+  background-color: #1890ff !important;  /* 蓝色背景 */
+  color: white !important;              /* 白色文字 */
+  border-color: #1890ff !important;     /* 蓝色边框 */
+}
+/* 卡片模式样式 */
+.card-button {
+  width: 120px;
+  height: 80px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+}
+
+.card-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-label {
+  font-size: 24px;
+  text-align: left;
+  align-self: flex-start;
+  margin-top: 20px;
+  font-weight: normal;
+  font-family: Source Han Sans;
+}
+
+.card-value {
+  text-align: right;
+  align-self: flex-end;
+  margin-top: auto;
+  font-family: Source Han Sans;
+
+}
+
+.card-value .number {
+  font-size: 32px;
+  font-weight: bold;
+  line-height: 39px;
+  color: #1890ff;
+}
+
+.card-value .unit {
+  font-size: 20px;
+  font-weight: normal;
+  line-height: 39px;
+}
+/* 水印图标样式 */
+.watermark-icon {
+  position: absolute;
+  font-size: 164px;
+  opacity: 0.15;
+  z-index: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none; /* 防止水印图标拦截点击事件 */
+}
+/* 当有水印图标时，自动应用背景色 */
+.ant-btn:has(.watermark-icon) {
+  background-color: #f0f0f0 !important; /* 浅灰色背景 */
+  border-color: #d9d9d9 !important; /* 边框色 */
+}
+
+/* 普通模式下的图标位置调整 */
+.ant-btn > .anticon + span {
+  margin-left: 8px;
+}
+
+/* 水印模式下的文字层级 */
+.button-label {
+  position: relative;
+  z-index: 1;
+}
+
+/* 纯图标模式核心样式 */
+.icon-only-button {
+  /* 移除所有边框和背景 */
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+
+  /* 控制按钮大小与图标一致 */
+  width: auto !important;
+  height: auto !important;
+  padding: 4px !important; /* 缩小内边距 */
+  min-width: unset !important; /* 移除默认最小宽度 */
+
+  /* 确保图标居中 */
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* 图标大小控制 */
+.icon-only-button .anticon {
+  font-size: 24px !important; /* 图标大小 */
+  color: #888888 !important; /* 默认图标颜色 */
+}
+
+/* 悬停和激活状态优化 */
+.icon-only-button:hover {
+  background-color: #e6f7ff !important; /* 轻微hover背景 */
+  color: #1890ff !important; /* hover时图标颜色 */
+}
+
+.icon-only-button.selected-button {
+  background-color: #e6f7ff !important;
+  color: #1890ff !important;
+}
+
+/* 屏幕阅读器专用样式（视觉隐藏，语义保留） */
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  border: 0 !important;
+}
 </style>

package/src/base-client/components/common/XButtons/index.js

@@ -1,3 +1,3 @@
-import XButtons from './XButtons.vue'
-
-export default XButtons
+import XButtons from './XButtons.vue'
+
+export default XButtons

package/src/base-client/components/common/XButtons/index.md

@@ -1,61 +1,61 @@
-# XButtons
-
-通用按钮组控件
-
-
-## 何时使用
-
-当需要一个通用按钮组时
-
-
-引用方式：
-
-```javascript
-import XButtons from '@vue2-client/base-client/components/XButtons/XButtons'
-
-export default {
-    components: {
-      XButtons
-    }
-}
-```
-
-
-
-## 代码演示
-
-```html
-<template>
-  <div>
-    <x-buttons ref="xButtons"></x-buttons>
-  </div>
-</template>
-
-<script>
-  import XButtons from './XButtons.vue'
-  import { getConfigByName } from '@vue2-client/services/api/common'
-
-  export default {
-    name: 'XButtonDemo',
-    components: {
-      XButtons
-    },
-    data () {
-      return {}
-    },
-    mounted () {
-      getConfigByName('testButtonGroup', 'af-his', res => {
-        this.$refs.xButtons.init({
-          renderConfig: res
-        })
-      }, true)
-    },
-    methods: {},
-  }
-</script>
-```
-
-## API
-
-| 参数        | 说明                       | 类型      | 默认值  |
-|-----------|--------------------------|---------|------|
+# XButtons
+
+通用按钮组控件
+
+
+## 何时使用
+
+当需要一个通用按钮组时
+
+
+引用方式：
+
+```javascript
+import XButtons from '@vue2-client/base-client/components/XButtons/XButtons'
+
+export default {
+    components: {
+      XButtons
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<template>
+  <div>
+    <x-buttons ref="xButtons"></x-buttons>
+  </div>
+</template>
+
+<script>
+  import XButtons from './XButtons.vue'
+  import { getConfigByName } from '@vue2-client/services/api/common'
+
+  export default {
+    name: 'XButtonDemo',
+    components: {
+      XButtons
+    },
+    data () {
+      return {}
+    },
+    mounted () {
+      getConfigByName('testButtonGroup', 'af-his', res => {
+        this.$refs.xButtons.init({
+          renderConfig: res
+        })
+      }, true)
+    },
+    methods: {},
+  }
+</script>
+```
+
+## API
+
+| 参数        | 说明                       | 类型      | 默认值  |
+|-----------|--------------------------|---------|------|

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

@@ -1,64 +1,64 @@
-<template>
-  <div>
-    <a-card :body-style="{ margin: 0, padding: 0 }" :bordered="false">
-      <a-skeleton v-show="loadState === 'loading'" active style="padding: 16px"/>
-      <a-empty v-show="loadState === 'empty'">
-        <a-button type="dashed" @click="retry">
-          重新加载
-        </a-button>
-      </a-empty>
-      <a-card
-        v-show="loadState === 'error'"
-        :body-style="{ margin: '0 auto' }"
-        :bordered="false"
-        :hoverable="true"
-        class="retryCard"
-        @click="retry" >
-        <a-icon :style="{ fontSize: '28px' }" type="global"/>
-        <p class="noSelect" style="margin-top: 20px">网络好像开小差了，点击重新加载...</p>
-      </a-card>
-      <div v-show="loadState === 'success'">
-        <slot></slot>
-      </div>
-    </a-card>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'XCard',
-  props: {
-    loadState: {
-      type: String,
-      default: 'success'
-    },
-    retry: {
-      type: Function,
-      default: () => {
-        console.error('未实现重新加载')
-      }
-    }
-  },
-  data () {
-    return {
-
-    }
-  }
-}
-</script>
-
-<style scoped>
-.retryCard {
-  text-align: center;
-}
-.noSelect {
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Chrome/Safari/Opera */
-  -khtml-user-select: none; /* Konqueror */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently
-  not supported by any browser */
-}
-</style>
+<template>
+  <div>
+    <a-card :body-style="{ margin: 0, padding: 0 }" :bordered="false">
+      <a-skeleton v-show="loadState === 'loading'" active style="padding: 16px"/>
+      <a-empty v-show="loadState === 'empty'">
+        <a-button type="dashed" @click="retry">
+          重新加载
+        </a-button>
+      </a-empty>
+      <a-card
+        v-show="loadState === 'error'"
+        :body-style="{ margin: '0 auto' }"
+        :bordered="false"
+        :hoverable="true"
+        class="retryCard"
+        @click="retry" >
+        <a-icon :style="{ fontSize: '28px' }" type="global"/>
+        <p class="noSelect" style="margin-top: 20px">网络好像开小差了，点击重新加载...</p>
+      </a-card>
+      <div v-show="loadState === 'success'">
+        <slot></slot>
+      </div>
+    </a-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'XCard',
+  props: {
+    loadState: {
+      type: String,
+      default: 'success'
+    },
+    retry: {
+      type: Function,
+      default: () => {
+        console.error('未实现重新加载')
+      }
+    }
+  },
+  data () {
+    return {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+.retryCard {
+  text-align: center;
+}
+.noSelect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Chrome/Safari/Opera */
+  -khtml-user-select: none; /* Konqueror */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+  not supported by any browser */
+}
+</style>