vue2-client 1.16.63 → 1.16.64

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>

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

@@ -1,106 +1,106 @@
-<template>
-  <div>
-    <a-row :gutter="[16, 16]">
-      <a-col
-        v-for="(item, index) in items"
-        :key="index"
-        :span="8"
-        style="display: flex; align-items: center;"
-      >
-        <a-checkbox
-          v-model="item.checked"
-          @change="updateSelection(item)"
-        >
-          {{ item.label }}  <!-- 显示 label -->
-        </a-checkbox>
-      </a-col>
-    </a-row>
-    <div style="margin-top: 20px;">
-      <a-button type="primary" @click="logSelection">打印选中结果</a-button>
-    </div>
-    <div v-if="selectedItems.length">
-      <h3>选中的项目：</h3>
-      <ul>
-        <li v-for="(item, index) in selectedItems" :key="index">
-          {{ item.label }} <!-- 显示选中的 label -->
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'CheckboxGrid',
-  data () {
-    return {
-      serviceName: undefined,
-      // 每个选项包含 label 和 value
-      items: [
-        { label: '选项 1', value: 'Value 1', checked: false },
-        { label: '选项 2', value: 'Value 2', checked: false },
-        { label: '选项 3', value: 'Value 3', checked: false },
-        { label: '选项 4', value: 'Value 4', checked: false },
-        { label: '选项 5', value: 'Value 5', checked: false },
-        { label: '选项 6', value: 'Value 6', checked: false },
-        { label: '选项 7', value: 'Value 7', checked: false },
-        { label: '选项 8', value: 'Value 8', checked: false },
-        { label: '选项 9', value: 'Value 9', checked: false },
-      ],
-      // 存储选中的项的 value
-      selectedItems: [],
-    }
-  },
-  methods: {
-    init (params) {
-      const {
-        serviceName,
-        // 可选内容
-        options
-      } = params
-      this.serviceName = serviceName
-      // 给options的每一项添加checked：false
-      this.items = options.map(option => ({
-        ...option,
-        checked: false
-      }))
-    },
-    // 更新选中的项
-    updateSelection (item) {
-      if (item.checked) {
-        // 如果勾选，存储 item (包括 label 和 value)
-        this.selectedItems.push(item)
-      } else {
-        // 如果取消勾选，移除 item
-        const index = this.selectedItems.findIndex(i => i.value === item.value)
-        if (index > -1) {
-          this.selectedItems.splice(index, 1)
-        }
-      }
-    },
-    // 打印选中项的 label
-    logSelection () {
-      // 打印选中项的 label
-      console.log(this.selectedItems.map(item => item.value))
-    },
-  },
-}
-</script>
-
-<style scoped>
-.two-column-checklist {
-  display: flex;
-  justify-content: space-between; /* 自动调整两列间距 */
-}
-
-.column {
-  display: flex;
-  flex-direction: column;
-  gap: 5px; /* 控制每一项的间距 */
-  width: 48%; /* 使两列宽度适中，留出间距 */
-}
-
-.item {
-  margin-bottom: 0; /* 避免额外的间距 */
-}
-</style>
+<template>
+  <div>
+    <a-row :gutter="[16, 16]">
+      <a-col
+        v-for="(item, index) in items"
+        :key="index"
+        :span="8"
+        style="display: flex; align-items: center;"
+      >
+        <a-checkbox
+          v-model="item.checked"
+          @change="updateSelection(item)"
+        >
+          {{ item.label }}  <!-- 显示 label -->
+        </a-checkbox>
+      </a-col>
+    </a-row>
+    <div style="margin-top: 20px;">
+      <a-button type="primary" @click="logSelection">打印选中结果</a-button>
+    </div>
+    <div v-if="selectedItems.length">
+      <h3>选中的项目：</h3>
+      <ul>
+        <li v-for="(item, index) in selectedItems" :key="index">
+          {{ item.label }} <!-- 显示选中的 label -->
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CheckboxGrid',
+  data () {
+    return {
+      serviceName: undefined,
+      // 每个选项包含 label 和 value
+      items: [
+        { label: '选项 1', value: 'Value 1', checked: false },
+        { label: '选项 2', value: 'Value 2', checked: false },
+        { label: '选项 3', value: 'Value 3', checked: false },
+        { label: '选项 4', value: 'Value 4', checked: false },
+        { label: '选项 5', value: 'Value 5', checked: false },
+        { label: '选项 6', value: 'Value 6', checked: false },
+        { label: '选项 7', value: 'Value 7', checked: false },
+        { label: '选项 8', value: 'Value 8', checked: false },
+        { label: '选项 9', value: 'Value 9', checked: false },
+      ],
+      // 存储选中的项的 value
+      selectedItems: [],
+    }
+  },
+  methods: {
+    init (params) {
+      const {
+        serviceName,
+        // 可选内容
+        options
+      } = params
+      this.serviceName = serviceName
+      // 给options的每一项添加checked：false
+      this.items = options.map(option => ({
+        ...option,
+        checked: false
+      }))
+    },
+    // 更新选中的项
+    updateSelection (item) {
+      if (item.checked) {
+        // 如果勾选，存储 item (包括 label 和 value)
+        this.selectedItems.push(item)
+      } else {
+        // 如果取消勾选，移除 item
+        const index = this.selectedItems.findIndex(i => i.value === item.value)
+        if (index > -1) {
+          this.selectedItems.splice(index, 1)
+        }
+      }
+    },
+    // 打印选中项的 label
+    logSelection () {
+      // 打印选中项的 label
+      console.log(this.selectedItems.map(item => item.value))
+    },
+  },
+}
+</script>
+
+<style scoped>
+.two-column-checklist {
+  display: flex;
+  justify-content: space-between; /* 自动调整两列间距 */
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 5px; /* 控制每一项的间距 */
+  width: 48%; /* 使两列宽度适中，留出间距 */
+}
+
+.item {
+  margin-bottom: 0; /* 避免额外的间距 */
+}
+</style>

package/src/base-client/components/common/XCheckList/XCheckListDemo.vue

@@ -1,41 +1,41 @@
-<template>
-  <div>
-    <x-check-list ref="xCheckList"></x-check-list>
-  </div>
-</template>
-
-<script>
-  import XCheckList from './XCheckList.vue'
-
-  export default {
-    name: 'XCheckListDemo',
-    components: {
-        XCheckList
-    },
-    data () {
-      return {}
-    },
-    mounted () {
-        // 模拟接口返回的配置数据
-        const mockResponse = {
-            leftItems: [
-            { value: 'left1', label: '左项1' },
-            { value: 'left2', label: '左项2' },
-            { value: 'left3', label: '左项3' }
-            ],
-            rightItems: [
-            { value: 'right1', label: '右项1' },
-            { value: 'right2', label: '右项2' },
-            { value: 'right3', label: '右项3' }
-            ]
-        }
-
-        // 模拟接口回调
-        this.$refs.xCheckList.init({
-            leftItems: mockResponse.leftItems,
-            rightItems: mockResponse.rightItems
-        })
-    },
-    methods: {}
-  }
-</script>
+<template>
+  <div>
+    <x-check-list ref="xCheckList"></x-check-list>
+  </div>
+</template>
+
+<script>
+  import XCheckList from './XCheckList.vue'
+
+  export default {
+    name: 'XCheckListDemo',
+    components: {
+        XCheckList
+    },
+    data () {
+      return {}
+    },
+    mounted () {
+        // 模拟接口返回的配置数据
+        const mockResponse = {
+            leftItems: [
+            { value: 'left1', label: '左项1' },
+            { value: 'left2', label: '左项2' },
+            { value: 'left3', label: '左项3' }
+            ],
+            rightItems: [
+            { value: 'right1', label: '右项1' },
+            { value: 'right2', label: '右项2' },
+            { value: 'right3', label: '右项3' }
+            ]
+        }
+
+        // 模拟接口回调
+        this.$refs.xCheckList.init({
+            leftItems: mockResponse.leftItems,
+            rightItems: mockResponse.rightItems
+        })
+    },
+    methods: {}
+  }
+</script>

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

@@ -330,14 +330,14 @@ export default {
             })
             this.$forceUpdate()
           }
-          // 默认展开当前页的所有面板
-          this.activeKey = (this.config.showData || []).map((_, i) => i.toString())
-          // 初始化关闭所有折叠面板
+          // 根据配置决定是否展开面板
           const shouldCollapseAll = this.config.collapseAllByDefault || false
           if (shouldCollapseAll) {
-            setTimeout(() => {
-              this.activeKey = [] // 关闭所有面板
-            }, 0.00001)
+            // 如果配置为默认关闭，直接设置为空数组，避免展开动画
+            this.activeKey = []
+          } else {
+            // 默认展开当前页的所有面板
+            this.activeKey = (this.config.showData || []).map((_, i) => i.toString())
           }
         })
       })
@@ -429,11 +429,10 @@ export default {
 :deep(.ant-collapse-header) {
   display: flex;
   position: relative;
-  border-bottom: v-bind('config.showLine ? "1px solid #000000" : "none"');
+  // border-bottom: v-bind('config.showLine ? "1px solid #000000" : "none"');
   align-items: center !important;
   background-color: #ffffff;
   padding: 12px 16px !important; /* 确保头部有足够的内边距 */
-  min-height: 50px; /* 设置头部最小高度 */
 }
 
 :deep(.ant-collapse-header-text) {
@@ -466,7 +465,9 @@ export default {
   height: 12px;
   border-radius: 6px;
   background: #3362DA;
-  margin: 6px;
+  margin-top: 15px;
+  margin-left: 11px;
+  margin-bottom: 12px;
   flex-shrink: 0;
 }
 
@@ -620,9 +621,14 @@ export default {
 
 /* 当前页码样式 */
 :deep(.ant-pagination .ant-pagination-item-active) {
-  background: #FFFFFF;
+  background: #0057FE !important;
   border: 1px solid #1890ff;
-  color: #1890ff;
+  color: #FFFFFF !important;
+}
+
+/* 确保选中页码文字颜色生效 */
+:deep(.ant-pagination .ant-pagination-item-active a) {
+  color: #FFFFFF !important;
 }
 
 /* 禁用状态样式 */
@@ -642,14 +648,15 @@ export default {
   &.xcollapse-style1 {
     height: auto; /* 允许根据内容自适应高度，避免滚动被限制 */
     min-height: 600px;
-    .blue-circle-icon { margin: 0 !important; }
     .header-text {
       font-family: "Source Han Sans";
       font-size: 16px;
       font-weight: 700;
-      line-height: normal;
+      line-height: 23px;
       letter-spacing: 0em;
       color: #313131;
+      margin-top: 8px;
+      margin-bottom: 8px;
       margin-right: 0 !important;
     }
 
@@ -657,9 +664,11 @@ export default {
       font-family: "Source Han Sans";
       font-size: 16px;
       font-weight: 700;
-      line-height: normal;
+      line-height: 23px;
       text-align: right;
       color: #313131;
+      margin-top: 9px;
+      margin-bottom: 7px;
       margin-left: 28.14px;
       letter-spacing: 0em
     }
@@ -668,8 +677,10 @@ export default {
       font-family: "Source Han Sans";
       font-size: 16px;
       font-weight: 400;
-      line-height: normal;
+      line-height: 23px;
       text-align: right;
+      margin-top: 9px;
+      margin-bottom: 7px;
       color: #313131;
       letter-spacing: 0em;
     }
@@ -684,7 +695,7 @@ export default {
       width: 564px;
       min-height: auto;
       height: auto;
-      margin: 3px 10px 26px 12px;  // 面板之间留白
+      margin-bottom:10px;
       background: #FFFFFF;         // 独立白底
       box-sizing: border-box;
       border: 1px solid #E5E9F0;   // 每个面板自身边框
@@ -693,15 +704,18 @@ export default {
     :deep(.ant-collapse > .ant-collapse-item:first-child) { margin-top: 0; }
     :deep(.ant-collapse > .ant-collapse-item:last-child) { margin-bottom: 0; }
 
-    :deep(.ant-collapse-content > .ant-collapse-content-box) { background: #FFFFFF; }
+    :deep(.ant-collapse-content > .ant-collapse-content-box) {
+      background: #FFFFFF;
+      padding: 0px !important; /* 自定义边距：上9px 右12px 下10px 左11px */
+    }
 
     // 表头：恢复合适的上下内边距，去掉顶部额外空白
     :deep(.ant-collapse-header) {
       background: #FFFFFF;
-      padding: 0px 0px;
-      align-items: center;
-      height: 39px;
+      padding: 0px 0px !important;
+      height: 41px !important;
       border-bottom: none !important; // 移除标题处下边线，避免与外边框连为一体
+      border: 1px solid #E5E9F0;   // 每个面板自身边框
     }
   }
 }