vue2-client 1.12.89 → 1.12.90

package/package.json

@@ -1,109 +1,109 @@
-{
-  "name": "vue2-client",
-  "version": "1.12.89",
-  "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",
-    "dayjs": "^1.11.13",
-    "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",
-    "@jest/globals": "^29.7.0",
-    "@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.12.90",
+  "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",
+    "dayjs": "^1.11.13",
+    "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",
+    "@jest/globals": "^29.7.0",
+    "@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/common/XTimeline/XTimeline.vue

@@ -78,16 +78,23 @@ export default {
     }
   },
   computed: {
-    // 计算需要显示的日期范围
+    // 计算需要显示的日期范围，固定显示周一到周日
     displayDates () {
       const dates = []
-      const range = this.config?.range || 7 // 显示天数，默认7天
-      const halfRange = Math.floor(range / 2)
-      let currentDate = dayjs(this.baseDate).subtract(halfRange, 'day')
-      for (let i = 0; i < range; i++) {
-        dates.push(currentDate.format('YYYY-MM-DD'))
-        currentDate = currentDate.add(1, 'day')
-      }
+      // 计算当前日期所在周的周一
+      const currentDay = dayjs(this.baseDate)
+      const dayOfWeek = currentDay.day() || 7 // 获取星期几，将周日的0转换为7
+      const mondayOfWeek = currentDay.subtract(dayOfWeek - 1, 'day') // 减去相应的天数得到周一
+
+      // 从周一开始，生成一周的日期
+      dates.push(mondayOfWeek.format('YYYY-MM-DD')) // 周一
+      dates.push(dayjs(mondayOfWeek).add(1, 'day').format('YYYY-MM-DD')) // 周二
+      dates.push(dayjs(mondayOfWeek).add(2, 'day').format('YYYY-MM-DD')) // 周三
+      dates.push(dayjs(mondayOfWeek).add(3, 'day').format('YYYY-MM-DD')) // 周四
+      dates.push(dayjs(mondayOfWeek).add(4, 'day').format('YYYY-MM-DD')) // 周五
+      dates.push(dayjs(mondayOfWeek).add(5, 'day').format('YYYY-MM-DD')) // 周六
+      dates.push(dayjs(mondayOfWeek).add(6, 'day').format('YYYY-MM-DD')) // 周日
+
       return dates
     }
   },
@@ -207,8 +214,15 @@ export default {
       if (this.config?.minDate && newDate.isBefore(this.config.minDate)) {
         return
       }
+      // 更新基准日期
       this.baseDate = newDate.format('YYYY-MM-DD')
+      // 同时选中新的日期
+      this.currentDate = this.baseDate
+      this.$emit('update:modelValue', this.currentDate)
+      // 触发前一天事件
       this.$emit('prev-day', this.baseDate)
+      // 触发变更事件
+      this.$emit('change', this.currentDate)
     },
 
     // 后一天
@@ -217,13 +231,26 @@ export default {
       if (this.config?.maxDate && newDate.isAfter(this.config.maxDate)) {
         return
       }
+      // 更新基准日期
       this.baseDate = newDate.format('YYYY-MM-DD')
+      // 同时选中新的日期
+      this.currentDate = this.baseDate
+      this.$emit('update:modelValue', this.currentDate)
+      // 触发后一天事件
       this.$emit('next-day', this.baseDate)
+      // 触发变更事件
+      this.$emit('change', this.currentDate)
     },
-
     // 前一周
     goToPrevWeek () {
-      const newDate = dayjs(this.baseDate).subtract(7, 'day')
+      // 计算当前日期所在周的周一
+      const currentDay = dayjs(this.baseDate)
+      const dayOfWeek = currentDay.day() || 7 // 获取星期几，将周日的0转换为7
+      const mondayOfWeek = currentDay.subtract(dayOfWeek - 1, 'day') // 减去相应的天数得到周一
+
+      // 前一周的周一
+      const newDate = mondayOfWeek.subtract(7, 'day')
+
       if (this.config?.minDate && newDate.isBefore(this.config.minDate)) {
         return
       }
@@ -233,7 +260,12 @@ export default {
 
     // 后一周
     goToNextWeek () {
-      const newDate = dayjs(this.baseDate).add(7, 'day')
+      // 计算当前日期所在周的周一
+      const currentDay = dayjs(this.baseDate)
+      const dayOfWeek = currentDay.day() || 7 // 获取星期几，将周日的0转换为7
+      const mondayOfWeek = currentDay.subtract(dayOfWeek - 1, 'day') // 减去相应的天数得到周一
+      // 后一周的周一
+      const newDate = mondayOfWeek.add(7, 'day')
       if (this.config?.maxDate && newDate.isAfter(this.config.maxDate)) {
         return
       }
@@ -278,8 +310,15 @@ export default {
   transition: all 0.3s;
 }
 
-.date-item:hover:not(.ant-btn-disabled) {
-  background: #fafafa;
+/* 非选中日期的悬浮效果 */
+.date-item:hover:not(.ant-btn-disabled):not(.ant-btn-primary) {
+  background: #e6f7ff;
+  color: #1890ff;
+}
+
+/* 选中日期不需要悬浮效果 */
+.date-item.ant-btn-primary:hover {
+  background: #1890ff;
 }
 
 .date-item.ant-btn-primary {
@@ -292,6 +331,12 @@ export default {
   color: #fff;
 }
 
+/* 非选中日期悬浮时的字体颜色 */
+.date-item:hover:not(.ant-btn-disabled):not(.ant-btn-primary) .weekday,
+.date-item:hover:not(.ant-btn-disabled):not(.ant-btn-primary) .date {
+  color: #1890ff;
+}
+
 .date-item.date-weekend:not(.ant-btn-disabled):not(.ant-btn-primary) {
   color: #ff4d4f;
 }

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

@@ -0,0 +1,191 @@
+# XTimeline
+
+基于配置的时间轴组件，支持日期选择和日期范围导航，可通过配置动态调整显示方式和行为。
+
+## 何时使用
+
+当需要在界面中展示一个按日期排列的时间轴，并允许用户在日期之间进行选择和导航时使用。适用于日程安排、预约系统、历史记录查看等场景。
+
+## 引用方式
+
+```javascript
+import XTimeline from '@vue2-client/base-client/components/common/XTimeline/XTimeline'
+
+export default {
+  components: {
+    XTimeline
+  }
+}
+```
+
+## 代码演示
+
+```html
+<x-timeline
+  v-model="selectedDate"
+  :queryParamsName="timelineConfigName"
+  @change="handleDateChange"
+  @init="handleInit">
+</x-timeline>
+```
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|------|
+| modelValue (v-model) | 当前选中的日期值 | String | '' |
+| queryParamsName | 查询配置名称 | String | '' |
+
+### 事件
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| update:modelValue | 选中日期变化时触发，用于v-model绑定 | function(date: string) |
+| change | 用户选择日期时触发 | function(date: string) |
+| prev-week | 点击"前一周"按钮时触发 | function(date: string) |
+| next-week | 点击"后一周"按钮时触发 | function(date: string) |
+| prev-day | 点击"前一天"按钮时触发 | function(date: string) |
+| next-day | 点击"后一天"按钮时触发 | function(date: string) |
+| init | 组件初始化完成时触发 | function(date: string) |
+
+## 配置说明
+
+组件通过 `queryParamsName` 从后端获取配置，配置格式如下：
+
+### 基本配置
+
+```json
+{
+  "range": 7,
+  "defaultValue": "",
+  "dateFormat": "MM/DD",
+  "weekFormat": "周dd",
+  "prevWeekText": "前一周",
+  "nextWeekText": "后一周",
+  "prevDayText": "前一天",
+  "nextDayText": "后一天",
+  "minDate": "2024-01-01",
+  "maxDate": "2099-12-31",
+  "highlightWeekend": true,
+  "logicName": "",
+  "parameter": {}
+}
+```
+
+### 指定默认日期的配置
+
+```json
+{
+  "range": 7,
+  "defaultValue": "2024-05-15",
+  "dateFormat": "MM/DD",
+  "weekFormat": "周dd",
+  "prevWeekText": "前一周",
+  "nextWeekText": "后一周",
+  "prevDayText": "前一天",
+  "nextDayText": "后一天",
+  "minDate": "2024-01-01",
+  "maxDate": "2024-12-31",
+  "highlightWeekend": true
+}
+```
+
+### 自定义日期格式的配置
+
+```json
+{
+  "range": 7,
+  "defaultValue": "",
+  "dateFormat": "M月D日",
+  "weekFormat": "ddd",
+  "prevWeekText": "上周",
+  "nextWeekText": "下周",
+  "prevDayText": "前一天",
+  "nextDayText": "后一天",
+  "minDate": "2024-01-01",
+  "maxDate": "2024-12-31",
+  "highlightWeekend": true
+}
+```
+
+## 注意事项
+
+1. 时间轴固定显示周一到周日的七天日期，不可更改
+2. 日期选择范围可通过 `minDate` 和 `maxDate` 进行限制
+3. 如果配置中有 `defaultValue`，组件将默认选中该日期
+4. 组件使用 dayjs 处理日期，支持其格式化语法
+5. 周末日期可通过 `highlightWeekend` 配置是否高亮显示
+6. 导航按钮文本可通过配置自定义
+7. 点击"前一天"和"后一天"按钮会同时更新显示范围和选中的日期
+8. 点击"前一周"和"后一周"按钮只会更新显示范围，不会改变选中的日期
+9. 禁用的日期无法点击选择
+
+## 常见问题解答（FAQ）
+
+### 1. 如何设置默认选中的日期？
+
+可以通过配置中的 `defaultValue` 字段设置：
+```json
+{
+  "defaultValue": "2024-05-15"
+}
+```
+
+或者通过 v-model 绑定：
+```html
+<x-timeline v-model="selectedDate"></x-timeline>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      selectedDate: "2024-05-15"
+    }
+  }
+}
+```
+
+### 2. 如何限制可选日期范围？
+
+通过配置中的 `minDate` 和 `maxDate` 字段设置：
+```json
+{
+  "minDate": "2024-01-01",
+  "maxDate": "2024-12-31"
+}
+```
+
+### 3. 如何禁用特定日期？
+
+可以通过配置中的 `logicName` 指定后端逻辑，返回包含 `disabledDates` 数组的结果：
+```json
+{
+  "logicName": "getDisabledDates",
+  "parameter": {
+    "userId": "123"
+  }
+}
+```
+
+后端逻辑返回的结果格式为：
+```json
+{
+  "disabledDates": ["2024-05-01", "2024-05-03", "2024-05-05"]
+}
+```
+
+### 4. 如何自定义日期和星期的显示格式？
+
+通过配置中的 `dateFormat` 和 `weekFormat` 字段设置：
+```json
+{
+  "dateFormat": "YYYY年MM月DD日",
+  "weekFormat": "ddd"
+}
+```
+
+### 5. 点击导航按钮有什么区别？
+
+- 点击"前一天"/"后一天"按钮：会更新显示范围并同时选中新的日期
+- 点击"前一周"/"后一周"按钮：只更新显示范围，不会改变选中的日期

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

@@ -1,9 +1,20 @@
 <template>
-  <div>
-    <a-radio-group v-model="innerValue" @change="onChange">
-      <a-radio v-for="item in data" :key="item.value" :value="item.value">
-        {{ item.label }}
-      </a-radio>
+  <div class="x-radio-container">
+    <a-radio-group v-model="innerValue" @change="onChange" class="x-radio-group">
+      <div v-for="item in data" :key="item.value" class="x-radio-item-container">
+        <a-radio :value="item.value" class="x-radio-item">
+          {{ item.label }}
+        </a-radio>
+        <div
+          v-if="config.showIndicator && item.bottomLine !== false"
+          class="x-radio-indicator"
+          :style="{
+            width: item.indicatorWidth || '100%',
+            backgroundColor: item.indicatorColor || config.indicatorActiveColor,
+            height: config.indicatorHeight + 'px'
+          }"
+        ></div>
+      </div>
     </a-radio-group>
   </div>
 </template>
@@ -24,7 +35,8 @@ export default {
   data () {
     return {
       data: [],
-      innerValue: null
+      innerValue: null,
+      config: null
     }
   },
   created () {
@@ -42,15 +54,27 @@ export default {
         // 1. 先加载选项
         if (res.radio && Array.isArray(res.radio)) {
           this.data = res.radio
-          // 2. 初始化默认值（优先级： 配置defaultValue > 第一个选项）
+          // 2. 加载指示器配置
+          if (res.indicator !== undefined) {
+            // 如果indicator是布尔值，则只控制显示/隐藏
+            if (typeof res.indicator === 'boolean') {
+              this.config.showIndicator = res.indicator
+            } else if (typeof res.indicator === 'object') {
+              this.config = {
+                ...this.config,
+                ...res.indicator
+              }
+            }
+          }
+          // 3. 初始化默认值（优先级： 配置defaultValue > 第一个选项）
           if (res.defaultValue !== undefined && res.defaultValue !== null) {
-            // 否则使用配置中的defaultValue
+            // 使用配置中的defaultValue
             this.innerValue = res.defaultValue
           } else if (this.data.length > 0) {
             // 如果没有默认值但有选项，使用第一个选项
             this.innerValue = this.data[0].value
           }
-          // 3. 触发初始化事件
+          // 4. 触发初始化事件
           this.$emit('init', this.innerValue)
         } else {
           this.$message.error('配置错误，radio字段不是数组')
@@ -64,3 +88,35 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.x-radio-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.x-radio-group {
+  display: flex;
+  justify-content: space-around;
+}
+
+.x-radio-item-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 0 8px;
+  box-sizing: border-box;
+}
+
+.x-radio-item {
+  margin-bottom: 8px;
+}
+
+.x-radio-indicator {
+  height: 3px;
+  transition: all 0.3s;
+  max-width: 100%;
+}
+</style>

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

@@ -74,33 +74,161 @@ export default {
 ## 配置示例
 ----
 
+### 基本配置
+
 ```json
 {
   "radio": [
     {
-      "label": "A",
-      "value": 1
+      "label": "全部",
+      "value": "all",
+      "bottomLine": true,
+      "indicatorColor": "#1890ff",
+      "indicatorWidth": "50%"
     },
     {
-      "label": "B",
-      "value": 2
+      "label": "已过期",
+      "value": "expired",
+      "bottomLine": true,
+      "indicatorColor": "#ff4d4f",
+      "indicatorWidth": "70%"
     },
     {
-      "label": "C",
-      "value": 3
+      "label": "30天内",
+      "value": "30days",
+      "bottomLine": true,
+      "indicatorColor": "#52c41a",
+      "indicatorWidth": "60%"
     },
     {
-      "label": "D",
-      "value": 4
+      "label": "90天内",
+      "value": "90days",
+      "bottomLine": false
+    },
+    {
+      "label": "180天内",
+      "value": "180days",
+      "bottomLine": true,
+      "indicatorColor": "#722ed1",
+      "indicatorWidth": "30px"
+    },
+    {
+      "label": "360天内",
+      "value": "360days",
+      "bottomLine": true,
+      "indicatorColor": "#eb2f96",
+      "indicatorWidth": "40%"
     }
   ],
-  "defaultValue": 2
+  "defaultValue": "all",
+  "indicator": {
+    "showIndicator": true,
+    "indicatorHeight": 4,
+    "indicatorBgColor": "#f5f5f5",
+    "indicatorActiveColor": "#1890ff"
+  }
 }
 ```
 
+### 不同线条宽度效果示例
+
+以下是几种常见的线条宽度配置效果：
+
+1. **完整宽度**：`"indicatorWidth": "100%"`（默认值）
+   - 线条完全填充选项宽度
+   - 适合强调整个选项区域
+
+2. **居中宽度**：`"indicatorWidth": "50%"`
+   - 线条占选项宽度的一半，自动居中
+   - 提供清晰的视觉提示，同时保持简洁
+
+3. **固定宽度**：`"indicatorWidth": "30px"`
+   - 线条使用固定像素宽度，不随选项宽度变化
+   - 适合保持所有线条视觉上的一致性
+
+4. **较小宽度**：`"indicatorWidth": "20%"`
+   - 线条宽度较小，提供微妙的视觉提示
+   - 适合不希望线条过于引人注目的场景
+
 注意事项
 ----
 
 1. 如果配置中有 `defaultValue`，组件将默认选中该值对应的选项
 2. 如果没有 `defaultValue` 但有选项，将默认选中第一个选项
 3. 如果外部通过 `value` 属性传入值，优先使用外部值
+4. 每个选项可以通过 `bottomLine` 属性控制是否显示底部线条
+5. 可以通过 `indicatorColor` 设置线条颜色，线条颜色始终显示，不受选中状态影响
+6. 通过 `indicatorWidth` 可以自定义线条宽度
+7. 线条宽度仅在其所属选项范围内显示，不会侵入其他选项区域
+8. 线条宽度如果设置为百分比值（如"50%"），则是相对于选项宽度计算的
+9. 线条默认宽度为"100%"，即完全填充选项宽度
+10. 要完全隐藏线条区域，可以在全局配置中设置 `"indicator": false`
+11. 要隐藏单个选项的线条，可以为该选项设置 `"bottomLine": false`
+12. 全局配置中的 `indicatorHeight` 控制所有线条的高度，单位为像素
+13. 推荐为每个选项设置不同颜色，以增强视觉辨识度
+14. 线条宽度建议不要设置过小，以免影响用户视觉体验
+
+## 常见问题解答（FAQ）
+
+### 1. 如何控制线条的显示和隐藏？
+
+**全局控制**：
+```json
+{
+  "indicator": false
+}
+```
+
+**单个选项控制**：
+```json
+{
+  "radio": [
+    { "label": "选项A", "value": 1, "bottomLine": true },
+    { "label": "选项B", "value": 2, "bottomLine": false }
+  ]
+}
+```
+
+### 2. 线条颜色如何设置？
+
+每个选项可以单独设置线条颜色：
+```json
+{
+  "radio": [
+    { "label": "选项A", "value": 1, "indicatorColor": "#1890ff" },
+    { "label": "选项B", "value": 2, "indicatorColor": "#52c41a" }
+  ]
+}
+```
+
+也可以设置全局默认颜色：
+```json
+{
+  "indicator": {
+    "indicatorActiveColor": "#1890ff"
+  }
+}
+```
+
+### 3. 如何调整线条宽度？
+
+线条宽度可以使用百分比或像素值：
+```json
+{
+  "radio": [
+    { "label": "选项A", "value": 1, "indicatorWidth": "50%" },
+    { "label": "选项B", "value": 2, "indicatorWidth": "30px" }
+  ]
+}
+```
+
+### 4. 如何调整线条高度？
+
+线条高度在全局配置中统一设置：
+```json
+{
+  "indicator": {
+    "indicatorHeight": 5
+  }
+}
+```