vue2-client 1.19.2 → 1.19.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.19.2",
+  "version": "1.19.3",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

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

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

package/src/base-client/components/common/HIS/HForm/HForm.vue

@@ -110,14 +110,13 @@ defineExpose({
     :deep(.ant-row-flex) {
       .x-form-col-wrapper {
         .ant-form-item {
-          display: flex;
+          display: flex !important;
           width: 100%;
           height: 100%;
           margin-bottom: 0px;
           justify-content: space-between;
 
           .ant-form-item-label {
-            width: 100%;
             display: flex;
             align-items: center;
             height: 100%;

package/src/base-client/components/common/XAddNativeForm/demo.vue

@@ -11,7 +11,7 @@ export default {
     }
   },
   mounted() {
-    getConfigByNameAsync('测试Form', 'af-safecheck').then(res => {
+    getConfigByNameAsync('CardSellGasForm', 'af-revenue').then(res => {
       this.$refs.xAddFrom.init(
         Object.assign(res, {
           modifyModelData: {

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

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

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

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

package/src/base-client/components/common/XReportGrid/XReportTrGroup.vue

@@ -64,7 +64,8 @@
                 'x-import-excel-button',
                 'x-chart',
                 'h-chart',
-                'x-simple-table'
+                'x-simple-table',
+                'x-workflow-progress'
               ].includes(cell.slotType)">
               <component
                 :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
@@ -143,7 +144,8 @@
                 'x-import-excel-button',
                 'x-chart',
                 'h-chart',
-                'x-simple-table'
+                'x-simple-table',
+                'x-workflow-progress'
               ].includes(cell.slotType)">
               <component
                 :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
@@ -219,7 +221,8 @@ export default {
     XImportExcelButton: () => import('@vue2-client/base-client/components/his/XImportExcelButton/XImportExcelButton.vue'),
     XChart: () => import('@vue2-client/base-client/components/his/XChart/XChart.vue'),
     HChart: () => import('@vue2-client/base-client/components/his/HChart/HChart.vue'),
-    XSimpleTable: () => import('@vue2-client/base-client/components/his/XSimpleTable/XSimpleTable.vue')
+    XSimpleTable: () => import('@vue2-client/base-client/components/his/XSimpleTable/XSimpleTable.vue'),
+    XWorkflowProgress: () => import('@vue2-client/base-client/components/his/XWorkflowProgress/XWorkflowProgress.vue')
   },
   props: {
     // 每一行的配置

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

@@ -12,6 +12,7 @@
       :key="index"
       :fill="path.fill || 'currentColor'"
       :d="path.d"
+      :transform="path.transform"
     />
   </svg>
 </template>
@@ -35,6 +36,33 @@ const iconConfigs = {
       d: 'M0.72589612,0C0.32499826,0,0,0.34822667,0,0.77777773L0,13.222221C0,13.651789,0.32499826,14,0.72589612,14L12.340235,14C12.741146,14,13.066131,13.651789,13.066131,13.222221L13.066131,0.77777773C13.066131,0.34822667,12.741146,0,12.340235,0L0.72589612,0ZM2.9035845,4.6666665L2.9035845,3.1111109L10.162547,3.1111109L10.162547,4.6666665L2.9035845,4.6666665ZM2.9035845,7.7777777L2.9035845,6.2222219L10.162547,6.2222219L10.162547,7.7777777L2.9035845,7.7777777ZM10.162547,10.888889L2.9035845,10.888889L2.9035845,9.333333L10.162547,9.333333L10.162547,10.888889Z',
       fill: 'currentColor'
     }]
+  },
+  'executed': {
+    viewBox: '0 0 24 24',
+    paths: [
+      {
+        d: 'M12,2C6.4758101,2,2,6.4758101,2,12C2,17.5242,6.4758101,22,12,22C17.5242,22,22,17.5242,22,12C22,6.4758101,17.5242,2,12,2C12,2,12,2,12,2ZM12,20.064501C7.5443501,20.064501,3.93548,16.4556,3.93548,12C3.93548,7.5443501,7.5443501,3.93548,12,3.93548C16.4556,3.93548,20.064501,7.5443501,20.064501,12C20.064501,16.4556,16.4556,20.064501,12,20.064501C12,20.064501,12,20.064501,12,20.064501Z',
+        fill: 'currentColor'
+      },
+      {
+        d: 'M17.739441,8.59375C18.091259,8.2243509,18.086147,7.63233471,17.727966000000002,7.26953125C17.369604000000002,6.906727791,16.794123,6.911850929,16.442322,7.28125C16.442322,7.28125,17.739441,8.59375,17.739441,8.59375C17.739441,8.59375,17.739441,8.59375,17.739441,8.59375ZM9.5908961,16.057060200000002C9.5908961,16.057060200000002,8.9423146,16.7139664,8.9423146,16.7139664C9.1132417,16.8934593,9.3469505,16.994560200000002,9.5908961,16.994560200000002C9.8348408,16.994560200000002,10.0685496,16.8934593,10.2394772,16.7139664C10.2394772,16.7139664,9.5908961,16.057060200000002,9.5908961,16.057060200000002C9.5908961,16.057060200000002,9.5908961,16.057060200000002,9.5908961,16.057060200000002ZM6.5576743,11.4328156C6.2058653,11.0634031,5.63029587,11.0582848,5.27209082,11.4210968C4.913885564,11.7838917,4.908685297,12.3798094,5.26049414,12.7492218C5.26049414,12.7492218,6.5576743,11.4328156,6.5576743,11.4328156C6.5576743,11.4328156,6.5576743,11.4328156,6.5576743,11.4328156ZM16.442322,7.28125C16.442322,7.28125,8.9423146,15.4001532,8.9423146,15.4001532C8.9423146,15.4001532,10.2394772,16.7139664,10.2394772,16.7139664C10.2394772,16.7139664,17.739441,8.59375,17.739441,8.59375C17.739441,8.59375,16.442322,7.28125,16.442322,7.28125C16.442322,7.28125,16.442322,7.28125,16.442322,7.28125ZM10.2394772,15.4001532C10.2394772,15.4001532,6.5576743,11.4328156,6.5576743,11.4328156C6.5576743,11.4328156,5.26049414,12.7492218,5.26049414,12.7492218C5.26049414,12.7492218,8.9423146,16.7139664,8.9423146,16.7139664C8.9423146,16.7139664,10.2394772,15.4001532,10.2394772,15.4001532C10.2394772,15.4001532,10.2394772,15.4001532,10.2394772,15.4001532Z',
+        fill: 'currentColor'
+      }
+    ]
+  },
+  'not-executed': {
+    viewBox: '0 0 24 24',
+    paths: [
+      {
+        d: 'M12,2C6.4758101,2,2,6.4758101,2,12C2,17.5242,6.4758101,22,12,22C17.5242,22,22,17.5242,22,12C22,6.4758101,17.5242,2,12,2C12,2,12,2,12,2ZM12,20.064501C7.5443501,20.064501,3.93548,16.4556,3.93548,12C3.93548,7.5443501,7.5443501,3.93548,12,3.93548C16.4556,3.93548,20.064501,7.5443501,20.064501,12C20.064501,16.4556,16.4556,20.064501,12,20.064501C12,20.064501,12,20.064501,12,20.064501Z',
+        fill: 'currentColor'
+      },
+      {
+        d: 'M14.999481933624267,13.09568884321289C15.351299933624267,12.72628974321289,15.365474933624268,12.122554783212891,15.007293933624268,11.759751353212891C14.648931933624267,11.396947893212891,14.046595133624267,11.421602279212891,13.694794133624267,11.791001353212891C13.694794133624267,11.791001353212891,14.999481933624267,13.09568884321289,14.999481933624267,13.09568884321289C14.999481933624267,13.09568884321289,14.999481933624267,13.09568884321289,14.999481933624267,13.09568884321289ZM8.777585033624268,16.71524434321289C8.777585033624268,16.71524434321289,8.777464833624268,18.02806854321289,8.777464833624268,18.02806854321289C8.948391933624269,18.20756194321289,9.181957233624267,18.30541274321289,9.425902333624268,18.30541274321289C9.669847533624267,18.30541274321289,9.903412833624268,18.19584324321289,10.074339833624268,18.016349743212892C10.074339833624268,18.016349743212892,8.777585033624268,16.71524434321289,8.777585033624268,16.71524434321289C8.777585033624268,16.71524434321289,8.777585033624268,16.71524434321289,8.777585033624268,16.71524434321289ZM6.074460133624267,12.71133804321289C5.722651133624268,12.34192562321289,5.127977733624268,12.344619753212891,4.769772653624267,12.70743174321289C4.411567389624268,13.07022694321289,4.410151362624267,13.66223814321289,4.761960153624267,14.03165054321289C4.761960153624267,14.03165054321289,6.074460133624267,12.71133804321289,6.074460133624267,12.71133804321289C6.074460133624267,12.71133804321289,6.074460133624267,12.71133804321289,6.074460133624267,12.71133804321289ZM13.694794133624267,11.791001353212891C13.694794133624267,11.791001353212891,8.176022533624268,17.30118174321289,8.176022533624268,17.30118174321289C8.176022533624268,17.30118174321289,10.074339833624268,18.016349743212892,10.074339833624268,18.016349743212892C10.074339833624268,18.016349743212892,14.999481933624267,13.09568884321289,14.999481933624267,13.09568884321289C14.999481933624267,13.09568884321289,13.694794133624267,11.791001353212891,13.694794133624267,11.791001353212891C13.694794133624267,11.791001353212891,13.694794133624267,11.791001353212891,13.694794133624267,11.791001353212891ZM10.074339833624268,16.703849743212892C10.074339833624268,16.703849743212892,6.074460133624267,12.71133804321289,6.074460133624267,12.71133804321289C6.074460133624267,12.71133804321289,4.761960153624267,14.03165054321289,4.761960153624267,14.03165054321289C4.761960153624267,14.03165054321289,8.777464833624268,18.02806854321289,8.777464833624268,18.02806854321289C8.777464833624268,18.02806854321289,10.074339833624268,16.703849743212892,10.074339833624268,16.703849743212892C10.074339833624268,16.703849743212892,10.074339833624268,16.703849743212892,10.074339833624268,16.703849743212892Z',
+        fill: 'currentColor',
+        transform: 'matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-6.8141087089094015,6.550087043158868)'
+      }
+    ]
   }
 }
 

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

@@ -0,0 +1,536 @@
+<template>
+  <div class="x-workflow-progress">
+    <div class="workflow-steps-wrapper">
+      <div :class="['workflow-steps', { center: isCentered }]" ref="workflowSteps">
+        <div
+          v-for="(step, index) in displaySteps"
+          :key="index"
+          class="workflow-step"
+          :class="{ 'is-completed': step.status === 'executed', 'is-pending': step.status === 'not-executed' }"
+        >
+          <!-- 直接显示图标（去掉外层圆圈），标签在图标后面 -->
+          <div class="step-circle">
+            <x-icon
+              :name="getIconName(step)"
+              class="step-icon"
+              :style="{ fontSize: '20px' }"
+            />
+          </div>
+
+          <!-- 步骤名称（在图标后面） -->
+          <div class="step-label">{{ step.label }}</div>
+
+          <!-- 连接线 -->
+          <div
+            v-if="index < displaySteps.length - 1"
+            class="step-connector"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getConfigByName } from '@vue2-client/services/api/common'
+import XIcon from '@vue2-client/base-client/components/his/XIcon'
+
+export default {
+  name: 'XWorkflowProgress',
+  components: {
+    XIcon
+  },
+  props: {
+    // 配置对象，用于通过 runLogic 获取步骤数据
+    queryParamsName: {
+      type: Object,
+      default: null
+    },
+    // 服务名称，默认为 af-his
+    serviceName: {
+      type: String,
+      default: 'af-his'
+    },
+    // 步骤数据（直接传入，优先级高于 queryParamsName）
+    steps: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    // (图标名称已固定为 executed / not-executed，移除可配置 props)
+  },
+  data() {
+    return {
+      internalSteps: [],
+      // 拖拽滚动状态
+      isDown: false,
+      startX: 0,
+      startScrollLeft: 0,
+      // 是否显示为居中（当内容不溢出）
+      isCentered: false,
+      // 当前步骤索引（从0开始）
+      currentStepIndex: -1
+    }
+  },
+  computed: {
+    displaySteps() {
+      // 如果直接传入了 steps，优先使用
+      if (this.steps && this.steps.length > 0) {
+        return this.steps
+      }
+      // 否则使用从配置获取的数据
+      return this.internalSteps
+    }
+  },
+  created() {
+    // 如果没有直接传入 steps，且配置了 queryParamsName，则通过配置获取数据
+    if ((!this.steps || this.steps.length === 0) && this.queryParamsName) {
+      this.getData(this.queryParamsName)
+    } else if (this.steps && this.steps.length > 0) {
+      // 如果直接传入了 steps，直接使用
+      this.internalSteps = this.steps
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const el = this.$refs.workflowSteps
+      if (el) {
+        this.addDragListeners(el)
+        this.checkOverflow()
+      }
+      window.addEventListener('resize', this.checkOverflow)
+    })
+  },
+  beforeDestroy() {
+    const el = this.$refs.workflowSteps
+    if (el) this.removeDragListeners(el)
+    window.removeEventListener('resize', this.checkOverflow)
+  },
+  methods: {
+    getData(config) {
+      // 如果config是字符串，直接使用；如果是对象，提取配置名称
+      const configName = typeof config === 'string' ? config : config?.configName || config?.name
+      if (!configName) {
+        console.warn('配置名称不能为空')
+        this.internalSteps = []
+        return
+      }
+
+      getConfigByName(configName, this.serviceName, (res) => {
+        // 处理返回的数据格式
+        // 支持 res.data.value, res.data, 或直接返回数组
+        const rawData = res?.data || res
+        let data = null
+
+        if (rawData && Array.isArray(rawData)) {
+          // 直接是数组格式
+          data = rawData
+        } else if (rawData && rawData.value && Array.isArray(rawData.value)) {
+          // {value: [...]} 格式
+          data = rawData.value
+        }
+
+        if (data && Array.isArray(data)) {
+          // 返回字段固定，直接使用 label/value/status
+          this.internalSteps = data.map(item => ({
+            label: item.label,
+            value: item.value,
+            status: item.status
+          }))
+          // 初始化当前步骤索引
+          this.updateCurrentStepIndex()
+        } else {
+          this.internalSteps = []
+        }
+      })
+    },
+    // 仅根据新状态判断：执行 -> executed，否则 -> not-executed
+    getIconName(step) {
+      return step && step.status === 'executed' ? 'executed' : 'not-executed'
+    },
+    /**
+     * 添加拖拽滚动监听
+     */
+    addDragListeners(el) {
+      // 鼠标
+      el.addEventListener('mousedown', this.onDragStart)
+      el.addEventListener('mousemove', this.onDragMove)
+      el.addEventListener('mouseup', this.onDragEnd)
+      el.addEventListener('mouseleave', this.onDragEnd)
+      // 触摸
+      el.addEventListener('touchstart', this.onDragStart, { passive: false })
+      el.addEventListener('touchmove', this.onDragMove, { passive: false })
+      el.addEventListener('touchend', this.onDragEnd)
+    },
+    removeDragListeners(el) {
+      el.removeEventListener('mousedown', this.onDragStart)
+      el.removeEventListener('mousemove', this.onDragMove)
+      el.removeEventListener('mouseup', this.onDragEnd)
+      el.removeEventListener('mouseleave', this.onDragEnd)
+      el.removeEventListener('touchstart', this.onDragStart)
+      el.removeEventListener('touchmove', this.onDragMove)
+      el.removeEventListener('touchend', this.onDragEnd)
+    },
+    /**
+     * 检查是否溢出；未溢出时将内容居中
+     */
+    checkOverflow() {
+      const el = this.$refs.workflowSteps
+      if (!el) {
+        this.isCentered = false
+        return
+      }
+      // 如果实际宽度 <= 可见宽度，则居中显示
+      this.isCentered = el.scrollWidth <= el.clientWidth + 4
+    },
+    onDragStart(e) {
+      const el = this.$refs.workflowSteps
+      if (!el) return
+      this.isDown = true
+      el.classList.add('dragging')
+      const pageX = e.touches ? e.touches[0].pageX : e.pageX
+      this.startX = pageX - el.getBoundingClientRect().left
+      this.startScrollLeft = el.scrollLeft
+    },
+    onDragMove(e) {
+      if (!this.isDown) return
+      const el = this.$refs.workflowSteps
+      if (!el) return
+      e.preventDefault()
+      const pageX = e.touches ? e.touches[0].pageX : e.pageX
+      const x = pageX - el.getBoundingClientRect().left
+      const walk = x - this.startX
+      el.scrollLeft = this.startScrollLeft - walk
+    },
+    onDragEnd() {
+      const el = this.$refs.workflowSteps
+      if (el) el.classList.remove('dragging')
+      this.isDown = false
+    },
+    // scrollPrev/Next & old overflow logic removed (use drag + isCentered)
+    /**
+     * 更新当前步骤索引（根据已完成步骤数量）
+     */
+    updateCurrentStepIndex() {
+      const steps = this.displaySteps
+      // 以 executed 作为已完成判断
+      const executedCount = steps.filter(step => step.status === 'executed').length
+      this.currentStepIndex = executedCount > 0 ? executedCount - 1 : -1
+    },
+    /**
+     * 按 value 设置指定步骤的状态（只按 value 匹配）
+     * @param {String|Number} stepValue - 步骤的 value 字段
+     * @param {String} status - 状态：'executed' 或 'not-executed'
+     */
+    setStepStatus(stepValue, status) {
+      const steps = this.displaySteps
+      if (!steps || steps.length === 0) {
+        console.warn('步骤数据为空，无法设置状态')
+        return
+      }
+
+      const asString = `${stepValue}`
+      const targetIndex = steps.findIndex(step => `${step.value}` === asString)
+      if (targetIndex < 0) {
+        console.warn(`未找到对应 value 的步骤: ${stepValue}`)
+        return
+      }
+
+      // 仅允许 executed / not-executed
+      if (!['executed', 'not-executed'].includes(status)) {
+        console.warn(`状态值无效: ${status}，应为 'executed' 或 'not-executed'`)
+        return
+      }
+
+      // 更新步骤状态
+      const step = steps[targetIndex]
+      this.$set(step, 'status', status)
+
+      // 更新当前步骤索引
+      this.updateCurrentStepIndex()
+
+      // 触发状态变更事件
+      this.$emit('statusChange', {
+        index: targetIndex,
+        value: step.value,
+        label: step.label,
+        status: status,
+        steps: [...steps]
+      })
+    },
+    /**
+     * 设置当前步骤（自动将之前的步骤设为已完成，当前及之后的设为待处理）
+     * @param {Number|String} stepIndexOrLabel - 步骤索引（从0开始）或步骤标签
+     */
+    /**
+     * 以 value 设置当前步骤：指定 value 及之前设为 executed，之后设为 not-executed
+     * @param {String|Number} stepValue
+     */
+    setCurrentStep(stepValue) {
+      const steps = this.displaySteps
+      if (!steps || steps.length === 0) {
+        console.warn('步骤数据为空，无法设置当前步骤')
+        return
+      }
+
+      const asString = `${stepValue}`
+      const targetIndex = steps.findIndex(step => `${step.value}` === asString)
+      if (targetIndex < 0) {
+        console.warn(`未找到对应 value 的步骤: ${stepValue}`)
+        return
+      }
+
+      // 更新所有步骤状态
+      steps.forEach((step, index) => {
+        if (index <= targetIndex) {
+          // 当前及之前设为 executed
+          this.$set(step, 'status', 'executed')
+        } else {
+          // 之后的设为 not-executed
+          this.$set(step, 'status', 'not-executed')
+        }
+      })
+
+      // 更新当前步骤索引
+      this.currentStepIndex = targetIndex
+
+      // 触发状态变更事件（已执行）
+      this.$emit('statusChange', {
+        index: targetIndex,
+        label: steps[targetIndex].label,
+        status: 'executed',
+        steps: [...steps]
+      })
+    },
+    /**
+     * 完成下一步（将下一个待处理步骤设为已完成）
+     */
+    completeNextStep() {
+      const steps = this.displaySteps
+      if (!steps || steps.length === 0) {
+        console.warn('步骤数据为空，无法完成下一步')
+        return
+      }
+
+      const nextIndex = steps.findIndex(step => step.status !== 'executed')
+      if (nextIndex === -1) {
+        console.warn('没有待执行的步骤')
+        return
+      }
+
+      this.setCurrentStep(nextIndex)
+    },
+    /**
+     * 重置所有步骤为待处理状态
+     */
+    resetAllSteps() {
+      const steps = this.displaySteps
+      if (!steps || steps.length === 0) {
+        return
+      }
+
+      steps.forEach(step => {
+        this.$set(step, 'status', 'not-executed')
+      })
+
+      this.currentStepIndex = -1
+
+      // 触发状态变更事件（全部未执行）
+      this.$emit('statusChange', {
+        index: -1,
+        label: '',
+        status: 'not-executed',
+        steps: [...steps]
+      })
+    },
+    /**
+     * 获取当前步骤信息
+     * @returns {Object} 当前步骤信息
+     */
+    getCurrentStep() {
+      const steps = this.displaySteps
+      if (this.currentStepIndex >= 0 && this.currentStepIndex < steps.length) {
+        return {
+          index: this.currentStepIndex,
+          label: steps[this.currentStepIndex].label,
+          status: steps[this.currentStepIndex].status
+        }
+      }
+      return null
+    },
+    /**
+     * 获取所有步骤数据
+     * @returns {Array} 步骤数组
+     */
+    getSteps() {
+      return [...this.displaySteps]
+    }
+  },
+  watch: {
+    queryParamsName: {
+      handler(newVal) {
+        if (newVal) {
+          this.getData(newVal)
+        }
+      },
+      deep: true
+    },
+    steps: {
+      handler(newVal) {
+        if (newVal && newVal.length > 0) {
+          this.internalSteps = newVal
+          // 更新当前步骤索引
+          this.updateCurrentStepIndex()
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    displaySteps: {
+      handler() {
+        // 当显示步骤变化时，更新当前步骤索引
+        this.updateCurrentStepIndex()
+        this.$nextTick(() => {
+          if (typeof this.checkOverflow === 'function') this.checkOverflow()
+        })
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.x-workflow-progress {
+  width: 100%;
+  padding: 0px 0;
+
+  .workflow-steps-wrapper {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .workflow-steps {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    position: relative;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    white-space: nowrap;
+    flex-wrap: nowrap;
+    scrollbar-width: none;
+    cursor: grab;
+  }
+  .workflow-steps::-webkit-scrollbar { display: none; }
+  .workflow-steps.center {
+    justify-content: center;
+  }
+  .workflow-steps.dragging { cursor: grabbing; user-select: none; }
+
+  .workflow-step {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    flex: 0 0 auto;
+    min-width: 0;
+
+    /* 只保留图标（去掉外层圆圈样式） */
+    .step-circle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      z-index: 2;
+      padding: 0;
+      background: transparent;
+      border: none;
+      transition: all 0.2s;
+
+      .step-icon {
+        font-size: 18px;
+        transition: color 0.2s;
+        /* 默认灰色，具体颜色由状态覆盖 */
+        color: #D8D8D8;
+      }
+    }
+
+    /* 完成状态：图标蓝色 */
+    &.is-completed {
+      .step-circle {
+        .step-icon {
+          color: #0057FE;
+        }
+      }
+    }
+
+    /* 待处理状态：图标灰色（继承默认） */
+    &.is-pending {
+      .step-circle {
+        .step-icon {
+          color: #D8D8D8;
+        }
+      }
+    }
+
+    .step-label {
+      margin-left: 8px;
+      font-size: 16px;
+      color: #333;
+      text-align: left;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 160px;
+    }
+
+    /* 连接线：短线，位于徽章右侧，状态完成时变蓝 */
+    .step-connector {
+      top: 50%;
+      margin-left: 10px;
+      margin-right: 10px;
+      width: 30px;
+      height: 1px;
+      background: #d9d9d9;
+      transform: translateY(-50%);
+      transition: background 0.3s;
+
+      &.is-completed {
+        background: #0057FE;
+      }
+    }
+
+    // 最后一个步骤不需要连接线
+    &:last-child {
+      margin-right: 0;
+      .step-connector {
+        display: none;
+      }
+    }
+  }
+  /* （移除导航按钮，支持直接拖动滑动） */
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .x-workflow-progress {
+    .workflow-step {
+      .step-label {
+        font-size: 12px;
+      }
+
+      .step-circle {
+        padding: 0 2px;
+
+        .step-icon {
+          font-size: 18px;
+        }
+      }
+    }
+  }
+}
+</style>
+

package/src/pages/WorkflowDetail/WorkFlowDemo.vue

@@ -6,7 +6,7 @@ export default {
   components: { WorkflowDetail },
   mounted () {
     this.$refs.workFlow.init({
-      workflowId: 5958
+      workflowId: 4640
     })
   },
   methods: {

package/src/router/async/router.map.js

@@ -61,8 +61,8 @@ routerResource.example = {
   // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
   // component: () => import('@vue2-client/pages/addressSelect/addressDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XDescriptions/demo.vue'),
-  component: () => import('@vue2-client/base-client/components/common/XAddNativeForm/demo.vue')
-  // component: () => import('@vue2-client/base-client/components/common/XFormGroup/demo.vue')
+  // component: () => import('@vue2-client/base-client/components/common/XAddNativeForm/demo.vue')
+  component: () => import('@vue2-client/base-client/components/common/XFormGroup/demo.vue')
   // component: () => import('@vue2-client/base-client/components/common/XReport/XReportDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XReportGrid/XReportDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/HIS/demo.vue'),