wl-design-mobile 0.8.2 → 0.8.4

package/flow/comps/flow-node-card.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="node-detail-card">
+    <div class="audit-result-badge" :class="'badge-' + getAuditResultClass(nodeInfo.auditResult)" v-if="showResultBadge && !isApplyNode">
+      <van-icon :name="getAuditIcon(nodeInfo.auditResult)" size="12"></van-icon>
+      <span>{{ getAuditResultText(nodeInfo.auditResult) }}</span>
+    </div>
+    <div class="detail-grid">
+      <div class="detail-item">
+        <span class="detail-label">{{ isApplyNode ? '发起时间：' : '审批时间：' }}</span>
+        <span class="detail-value">{{ (isApplyNode ? nodeInfo.createTime : nodeInfo.auditTime) || '-' }}</span>
+      </div>
+      <div class="detail-item">
+        <span class="detail-label">{{ isApplyNode ? '发起人：' : '审批人：' }}</span>
+        <span class="detail-value">{{ (isApplyNode ? nodeInfo.createUserName : nodeInfo.auditUserName) || '-' }}</span>
+      </div>
+    </div>
+    <div class="detail-grid" style="margin-top: 8px" v-if="!isApplyNode && (nodeInfo.startTime || nodeInfo.endTime)">
+      <div class="detail-item">
+        <span class="detail-label">开始时间：</span>
+        <span class="detail-value">{{ nodeInfo.startTime || '-' }}</span>
+      </div>
+      <div class="detail-item">
+        <span class="detail-label">结束时间：</span>
+        <span class="detail-value">{{ nodeInfo.endTime || '-' }}</span>
+      </div>
+    </div>
+    <div class="detail-item comment-item" v-if="isApplyNode ? nodeInfo.applyDescription : nodeInfo.auditComment">
+      <span class="detail-label">{{ isApplyNode ? '申请描述：' : '审批意见：' }}</span>
+      <span class="detail-value">{{ isApplyNode ? nodeInfo.applyDescription : nodeInfo.auditComment }}</span>
+    </div>
+
+    <!-- 附件列表插槽 -->
+    <slot name="attachments"></slot>
+  </div>
+</template>
+
+<script>
+import { getAuditResultClass, getAuditResultText, getAuditIcon } from './flow-util.js'
+
+export default {
+  name: 'FlowNodeCard',
+  props: {
+    nodeInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    showResultBadge: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 是否为发起节点
+     * @default false
+     */
+    isApplyNode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    getAuditResultClass,
+    getAuditResultText,
+    getAuditIcon
+  }
+}
+</script>
+
+<style scoped>
+.node-detail-card {
+  border-radius: 4px;
+  padding: 12px;
+  border: 1px solid #e8e8e8;
+  position: relative;
+  overflow: hidden;
+}
+
+.audit-result-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 0 0 0 4px;
+  font-size: 12px;
+  font-weight: 500;
+  z-index: 1;
+}
+
+.audit-result-badge.badge-pass {
+  background: #07c160;
+  color: #fff;
+}
+
+.audit-result-badge.badge-reject {
+  background: #ee0a24;
+  color: #fff;
+}
+
+.audit-result-badge.badge-transfer {
+  background: #ff976a;
+  color: #fff;
+}
+
+.audit-result-badge.badge-return {
+  background: #8c8c8c;
+  color: #fff;
+}
+
+.audit-result-badge.badge-default {
+  background: #d9d9d9;
+  color: #fff;
+}
+
+.detail-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  font-size: 13px;
+  width: calc(50% - 4px);
+}
+
+@media (max-width: 510px) {
+  .detail-item {
+    width: 100% !important;
+  }
+}
+
+.comment-item {
+  width: 100%;
+  margin-top: 8px;
+}
+
+.detail-label {
+  color: #8c8c8c;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  color: #262626;
+  flex: 1;
+  word-break: break-all;
+}
+</style>

package/flow/comps/flow-node-header.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="node-header">
+    <div class="avatar-wrapper">
+      <div class="node-avatar" :class="{ 'avatar-no-image': !nodeInfo.auditUserAvatar }">
+        <img v-if="nodeInfo.auditUserAvatar" :src="nodeInfo.auditUserAvatar" alt="" />
+        <span v-else>{{ nodeInfo.auditUserName ? nodeInfo.auditUserName.charAt(0) : (nodeIndex + 1) }}</span>
+      </div>
+      <div class="status-badge" :class="'badge-' + getStatusClass(nodeInfo.status)">
+        <van-icon :name="getStatusIcon(nodeInfo.status)" :size="badgeIconSize"></van-icon>
+      </div>
+    </div>
+    <div class="node-info">
+      <div class="node-title-row">
+        <span class="task-name">{{ nodeInfo.taskName }}</span>
+        <slot name="extra"></slot>
+      </div>
+      <div class="node-user-row" v-if="nodeInfo.auditUserName">
+        <span class="user-name">{{ nodeInfo.auditUserName }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getStatusIcon, getStatusClass } from './flow-util.js'
+
+export default {
+  name: 'FlowNodeHeader',
+  props: {
+    nodeInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    nodeIndex: {
+      type: Number,
+      default: 0
+    },
+    avatarSize: {
+      type: Number,
+      default: 40
+    },
+    badgeIconSize: {
+      type: String,
+      default: '10'
+    }
+  },
+  methods: {
+    getStatusIcon,
+    getStatusClass
+  }
+}
+</script>
+
+<style scoped>
+.node-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.avatar-wrapper {
+  position: relative;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.node-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #1989fa;
+  color: #fff;
+  font-size: 16px;
+  overflow: hidden;
+}
+
+.node-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.node-avatar.avatar-no-image {
+  background: #1989fa;
+  color: #fff;
+}
+
+.status-badge {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #fff;
+  background: #f0f0f0;
+  color: #999;
+}
+
+.status-badge.badge-success {
+  background: #07c160;
+  color: #fff;
+}
+
+.status-badge.badge-process {
+  background: #1989fa;
+  color: #fff;
+  animation: pulse 2s infinite;
+}
+
+.status-badge.badge-error {
+  background: #ee0a24;
+  color: #fff;
+}
+
+.status-badge.badge-warning {
+  background: #ff976a;
+  color: #fff;
+}
+
+.status-badge.badge-wait {
+  background: #f0f0f0;
+  color: #999;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(25, 137, 250, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 8px rgba(25, 137, 250, 0);
+  }
+}
+
+.node-info {
+  flex: 1;
+  padding-top: 2px;
+  min-width: 0;
+}
+
+.node-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.task-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: #262626;
+}
+
+.node-user-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+}
+
+.user-name {
+  font-size: 12px;
+  color: #262626;
+}
+</style>

package/flow/comps/flow-util.js

@@ -0,0 +1,156 @@
+/**
+ * 流程组件公共工具方法（Vant 移动端版）
+ */
+
+/**
+ * 获取状态图标
+ * @param {string} status - 节点状态
+ * @returns {string} Vant 图标名称
+ */
+export function getStatusIcon(status) {
+  const iconMap = {
+    completed: 'passed',
+    processing: 'clock-o',
+    rejected: 'cross',
+    transferred: 'replay',
+    pending: 'circle'
+  }
+  return iconMap[status] || iconMap.pending
+}
+
+/**
+ * 获取状态样式类名
+ * @param {string} status - 节点状态
+ * @returns {string} 样式类名
+ */
+export function getStatusClass(status) {
+  const classMap = {
+    completed: 'success',
+    processing: 'process',
+    rejected: 'error',
+    transferred: 'warning',
+    pending: 'wait'
+  }
+  return classMap[status] || classMap.pending
+}
+
+/**
+ * 获取状态文本
+ * @param {string} status - 节点状态
+ * @returns {string} 状态文本
+ */
+export function getStatusText(status) {
+  const textMap = {
+    completed: '已完成',
+    processing: '审批中',
+    rejected: '已驳回',
+    transferred: '已转办',
+    pending: '待审批'
+  }
+  return textMap[status] || '待审批'
+}
+
+/**
+ * 获取审批结果样式类名
+ * @param {string} auditResult - 审批结果
+ * @returns {string} 样式类名
+ */
+export function getAuditResultClass(auditResult) {
+  const classMap = {
+    '30': 'pass',
+    '40': 'reject',
+    '50': 'transfer',
+    '60': 'return'
+  }
+  return classMap[auditResult] || 'default'
+}
+
+/**
+ * 获取审批结果文本
+ * @param {string} auditResult - 审批结果
+ * @returns {string} 结果文本
+ */
+export function getAuditResultText(auditResult) {
+  const textMap = {
+    '30': '同意',
+    '40': '驳回',
+    '50': '转办',
+    '60': '退回'
+  }
+  return textMap[auditResult] || '审批'
+}
+
+/**
+ * 获取审批结果图标
+ * @param {string} auditResult - 审批结果
+ * @returns {string} Vant 图标名称
+ */
+export function getAuditIcon(auditResult) {
+  const iconMap = {
+    '30': 'passed',
+    '40': 'cross',
+    '50': 'replay',
+    '60': 'undo'
+  }
+  return iconMap[auditResult] || 'circle'
+}
+
+/**
+ * 获取文件图标
+ * @param {string} fileName - 文件名
+ * @returns {string} Vant 图标名称
+ */
+export function getFileIcon(fileName) {
+  if (!fileName) return 'description'
+  const ext = fileName.substring(fileName.lastIndexOf('.')).toLowerCase()
+  const iconMap = {
+    '.pdf': 'description',
+    '.doc': 'description',
+    '.docx': 'description',
+    '.xls': 'description',
+    '.xlsx': 'description',
+    '.ppt': 'description',
+    '.pptx': 'description',
+    '.jpg': 'photo',
+    '.jpeg': 'photo',
+    '.png': 'photo',
+    '.gif': 'photo',
+    '.bmp': 'photo',
+    '.webp': 'photo',
+    '.zip': 'folder',
+    '.rar': 'folder',
+    '.7z': 'folder',
+    '.tar': 'folder',
+    '.gz': 'folder',
+    '.txt': 'description',
+    '.mp4': 'video',
+    '.avi': 'video',
+    '.mov': 'video',
+    '.mp3': 'music',
+    '.wav': 'music'
+  }
+  return iconMap[ext] || 'description'
+}
+
+/**
+ * 格式化文件大小
+ * @param {number} size - 文件大小（字节）
+ * @returns {string} 格式化后的大小
+ */
+export function formatFileSize(size) {
+  if (!size) return '-'
+  if (size < 1024) return size + ' B'
+  if (size < 1024 * 1024) return (size / 1024).toFixed(2) + ' KB'
+  return (size / (1024 * 1024)).toFixed(2) + ' MB'
+}
+
+export default {
+  getStatusIcon,
+  getStatusClass,
+  getStatusText,
+  getAuditResultClass,
+  getAuditResultText,
+  getAuditIcon,
+  getFileIcon,
+  formatFileSize
+}

package/flow/comps/icons/approved.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="59.622" height="59.616" viewBox="0 0 59.622 59.616">
+  <g id="通过" transform="translate(-291.798 -153.753)">
+    <g id="组_977" data-name="组 977" transform="translate(291.798 153.753)">
+      <path id="路径_604" data-name="路径 604" d="M29.853,59.769a29.8,29.8,0,1,1,25.88-15.078,29.806,29.806,0,0,1-25.88,15.078Zm-.1-58.37a28.621,28.621,0,1,0,7.1.9,28.576,28.576,0,0,0-7.1-.9Z" transform="translate(0 -0.153)" fill="#00b42a"/>
+      <path id="路径_605" data-name="路径 605" d="M64.173,92.121a27.692,27.692,0,1,1,14.1-3.877A27.693,27.693,0,0,1,64.173,92.121Zm-.092-54.593a26.979,26.979,0,1,0,6.683.846,26.88,26.88,0,0,0-6.683-.846Z" transform="translate(-34.325 -34.602)" fill="#00b42a"/>
+      <path id="路径_606" data-name="路径 606" d="M221.473,224.75l-1.213-.309A17.511,17.511,0,0,1,241.564,211.8l-.309,1.213A16.26,16.26,0,0,0,221.473,224.75Zm15.772,21.539a17.482,17.482,0,0,1-4.336-.538l.309-1.213A16.285,16.285,0,0,0,253,232.792l1.213.309a17.548,17.548,0,0,1-16.969,13.187Z" transform="translate(-207.434 -198.955)" fill="#00b42a"/>
+      <path id="路径_607" data-name="路径 607" d="M124.715,88.9l-.809-.2a15.539,15.539,0,0,1,18.87-11.207l-.2.809a14.7,14.7,0,0,0-17.857,10.6Zm14.238,19.15a15.484,15.484,0,0,1-3.832-.484l.2-.809a14.7,14.7,0,0,0,17.849-10.59l.809.2a15.547,15.547,0,0,1-15.03,11.678ZM125.982,69.952l.88.78a.417.417,0,0,0,.463.042l1-.6a.417.417,0,0,1,.563.5l-.463,1.076a.417.417,0,0,0,.1.442l.88.771a.417.417,0,0,1-.3.688l-1.163-.108a.417.417,0,0,0-.417.238l-.463,1.076a.417.417,0,0,1-.746-.071l-.242-1.134a.417.417,0,0,0-.35-.3l-1.163-.113a.417.417,0,0,1-.167-.734l1-.6a.417.417,0,0,0,.183-.417l-.259-1.142a.417.417,0,0,1,.65-.392ZM116.347,80.2l1.155.188a.417.417,0,0,0,.417-.208l.534-1.042a.417.417,0,0,1,.742.121l.163,1.155a.417.417,0,0,0,.325.329l1.155.188a.417.417,0,0,1,.117.742l-1.042.529a.417.417,0,0,0-.213.417l.179,1.155a.417.417,0,0,1-.671.338l-.834-.834a.417.417,0,0,0-.459-.075l-1.042.53a.417.417,0,0,1-.53-.534l.534-1.042a.417.417,0,0,0-.071-.459l-.834-.834a.417.417,0,0,1,.375-.663Zm22.606-13.413-.417,1.1a.417.417,0,0,1-.384.263l-1.172-.029a.417.417,0,0,0-.25.709l.93.713a.417.417,0,0,1,.133.446l-.392,1.1a.417.417,0,0,0,.617.471l.963-.663a.417.417,0,0,1,.463,0l.93.713a.417.417,0,0,0,.617-.417l-.334-1.122a.417.417,0,0,1,.154-.417l.963-.663a.417.417,0,0,0-.213-.767H140.4a.417.417,0,0,1-.367-.284l-.334-1.122a.417.417,0,0,0-.742-.038Zm13.6,47.926-.258-1.142a.417.417,0,0,1,.183-.417l1-.6a.417.417,0,0,0-.167-.734l-1.163-.108a.417.417,0,0,1-.35-.3l-.258-1.142a.417.417,0,0,0-.746-.071l-.463,1.076a.417.417,0,0,1-.417.238l-1.163-.108a.417.417,0,0,0-.3.688l.917.75a.417.417,0,0,1,.1.45l-.463,1.076a.417.417,0,0,0,.563.5l1-.6a.417.417,0,0,1,.463.042l.88.771a.417.417,0,0,0,.63-.367Zm-13.6,3.548.392-1.1a.417.417,0,0,1,.384-.263l1.172.029a.417.417,0,0,0,.25-.709l-.946-.709a.417.417,0,0,1-.133-.446l.392-1.1a.417.417,0,0,0-.6-.454l-.963.663a.417.417,0,0,1-.463,0l-.93-.713a.417.417,0,0,0-.617.417l.334,1.122a.417.417,0,0,1-.154.417l-.963.663a.417.417,0,0,0,.213.717l1.172.029a.417.417,0,0,1,.367.284l.334,1.122a.417.417,0,0,0,.759.042Zm22.585-13.413-1.155-.188a.417.417,0,0,0-.417.208l-.534,1.042a.417.417,0,0,1-.742-.121l-.179-1.155a.417.417,0,0,0-.325-.329l-1.155-.188a.417.417,0,0,1-.117-.742l1.042-.53a.417.417,0,0,0,.213-.417l-.179-1.155a.417.417,0,0,1,.671-.338l.834.834a.417.417,0,0,0,.459.075l1.042-.529a.417.417,0,0,1,.53.534l-.534,1.042a.417.417,0,0,0,.071.459l.834.834a.417.417,0,0,1-.359.663Z" transform="translate(-109.142 -62.71)" fill="#00b42a"/>
+    </g>
+    <text id="审批通过" transform="matrix(0.848, -0.53, 0.53, 0.848, 304.807, 199.83)" fill="#00b42a" font-size="12" font-family="PingFang SC Medium, PingFang SC" letter-spacing="-0.04em"><tspan x="0" y="0">审批通过</tspan></text>
+  </g>
+</svg>

package/flow/comps/icons/canceled.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="59.622" height="59.616" viewBox="0 0 59.622 59.616">
+  <g id="撤销" transform="translate(-291.798 -153.753)">
+    <g id="组_977" data-name="组 977" transform="translate(291.798 153.753)">
+      <path id="路径_604" data-name="路径 604" d="M29.853,59.769a29.8,29.8,0,1,1,25.88-15.078,29.806,29.806,0,0,1-25.88,15.078Zm-.1-58.37a28.621,28.621,0,1,0,7.1.9,28.576,28.576,0,0,0-7.1-.9Z" transform="translate(0 -0.153)" fill="#f5834f"/>
+      <path id="路径_605" data-name="路径 605" d="M64.173,92.121a27.692,27.692,0,1,1,14.1-3.877A27.693,27.693,0,0,1,64.173,92.121Zm-.092-54.593a26.979,26.979,0,1,0,6.683.846,26.88,26.88,0,0,0-6.683-.846Z" transform="translate(-34.325 -34.602)" fill="#f5834f"/>
+      <path id="路径_606" data-name="路径 606" d="M221.473,224.75l-1.213-.309A17.511,17.511,0,0,1,241.564,211.8l-.309,1.213A16.26,16.26,0,0,0,221.473,224.75Zm15.772,21.539a17.482,17.482,0,0,1-4.336-.538l.309-1.213A16.285,16.285,0,0,0,253,232.792l1.213.309a17.548,17.548,0,0,1-16.969,13.187Z" transform="translate(-207.434 -198.955)" fill="#f5834f"/>
+      <path id="路径_607" data-name="路径 607" d="M124.715,88.9l-.809-.2a15.539,15.539,0,0,1,18.87-11.207l-.2.809a14.7,14.7,0,0,0-17.857,10.6Zm14.238,19.15a15.484,15.484,0,0,1-3.832-.484l.2-.809a14.7,14.7,0,0,0,17.849-10.59l.809.2a15.547,15.547,0,0,1-15.03,11.678ZM125.982,69.952l.88.78a.417.417,0,0,0,.463.042l1-.6a.417.417,0,0,1,.563.5l-.463,1.076a.417.417,0,0,0,.1.442l.88.771a.417.417,0,0,1-.3.688l-1.163-.108a.417.417,0,0,0-.417.238l-.463,1.076a.417.417,0,0,1-.746-.071l-.242-1.134a.417.417,0,0,0-.35-.3l-1.163-.113a.417.417,0,0,1-.167-.734l1-.6a.417.417,0,0,0,.183-.417l-.259-1.142a.417.417,0,0,1,.65-.392ZM116.347,80.2l1.155.188a.417.417,0,0,0,.417-.208l.534-1.042a.417.417,0,0,1,.742.121l.163,1.155a.417.417,0,0,0,.325.329l1.155.188a.417.417,0,0,1,.117.742l-1.042.529a.417.417,0,0,0-.213.417l.179,1.155a.417.417,0,0,1-.671.338l-.834-.834a.417.417,0,0,0-.459-.075l-1.042.53a.417.417,0,0,1-.53-.534l.534-1.042a.417.417,0,0,0-.071-.459l-.834-.834a.417.417,0,0,1,.375-.663Zm22.606-13.413-.417,1.1a.417.417,0,0,1-.384.263l-1.172-.029a.417.417,0,0,0-.25.709l.93.713a.417.417,0,0,1,.133.446l-.392,1.1a.417.417,0,0,0,.617.471l.963-.663a.417.417,0,0,1,.463,0l.93.713a.417.417,0,0,0,.617-.417l-.334-1.122a.417.417,0,0,1,.154-.417l.963-.663a.417.417,0,0,0-.213-.767H140.4a.417.417,0,0,1-.367-.284l-.334-1.122a.417.417,0,0,0-.742-.038Zm13.6,47.926-.258-1.142a.417.417,0,0,1,.183-.417l1-.6a.417.417,0,0,0-.167-.734l-1.163-.108a.417.417,0,0,1-.35-.3l-.258-1.142a.417.417,0,0,0-.746-.071l-.463,1.076a.417.417,0,0,1-.417.238l-1.163-.108a.417.417,0,0,0-.3.688l.917.75a.417.417,0,0,1,.1.45l-.463,1.076a.417.417,0,0,0,.563.5l1-.6a.417.417,0,0,1,.463.042l.88.771a.417.417,0,0,0,.63-.367Zm-13.6,3.548.392-1.1a.417.417,0,0,1,.384-.263l1.172.029a.417.417,0,0,0,.25-.709l-.946-.709a.417.417,0,0,1-.133-.446l.392-1.1a.417.417,0,0,0-.6-.454l-.963.663a.417.417,0,0,1-.463,0l-.93-.713a.417.417,0,0,0-.617.417l.334,1.122a.417.417,0,0,1-.154.417l-.963.663a.417.417,0,0,0,.213.717l1.172.029a.417.417,0,0,1,.367.284l.334,1.122a.417.417,0,0,0,.759.042Zm22.585-13.413-1.155-.188a.417.417,0,0,0-.417.208l-.534,1.042a.417.417,0,0,1-.742-.121l-.179-1.155a.417.417,0,0,0-.325-.329l-1.155-.188a.417.417,0,0,1-.117-.742l1.042-.53a.417.417,0,0,0,.213-.417l-.179-1.155a.417.417,0,0,1,.671-.338l.834.834a.417.417,0,0,0,.459.075l1.042-.529a.417.417,0,0,1,.53.534l-.534,1.042a.417.417,0,0,0,.071.459l.834.834a.417.417,0,0,1-.359.663Z" transform="translate(-109.142 -62.71)" fill="#f5834f"/>
+    </g>
+    <text id="审批撤销" transform="matrix(0.848, -0.53, 0.53, 0.848, 304.807, 199.83)" fill="#f5834f" font-size="12" font-family="PingFang SC Medium, PingFang SC" letter-spacing="-0.04em"><tspan x="0" y="0">审批撤销</tspan></text>
+  </g>
+</svg>

package/flow/comps/icons/rejected.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="59.622" height="59.616" viewBox="0 0 59.622 59.616">
+  <g id="拒绝" transform="translate(-291.798 -153.753)">
+    <g id="组_977" data-name="组 977" transform="translate(291.798 153.753)">
+      <path id="路径_604" data-name="路径 604" d="M29.853,59.769a29.8,29.8,0,1,1,25.88-15.078,29.806,29.806,0,0,1-25.88,15.078Zm-.1-58.37a28.621,28.621,0,1,0,7.1.9,28.576,28.576,0,0,0-7.1-.9Z" transform="translate(0 -0.153)" fill="#f53f3f"/>
+      <path id="路径_605" data-name="路径 605" d="M64.173,92.121a27.692,27.692,0,1,1,14.1-3.877A27.693,27.693,0,0,1,64.173,92.121Zm-.092-54.593a26.979,26.979,0,1,0,6.683.846,26.88,26.88,0,0,0-6.683-.846Z" transform="translate(-34.325 -34.602)" fill="#f53f3f"/>
+      <path id="路径_606" data-name="路径 606" d="M221.473,224.75l-1.213-.309A17.511,17.511,0,0,1,241.564,211.8l-.309,1.213A16.26,16.26,0,0,0,221.473,224.75Zm15.772,21.539a17.482,17.482,0,0,1-4.336-.538l.309-1.213A16.285,16.285,0,0,0,253,232.792l1.213.309a17.548,17.548,0,0,1-16.969,13.187Z" transform="translate(-207.434 -198.955)" fill="#f53f3f"/>
+      <path id="路径_607" data-name="路径 607" d="M124.715,88.9l-.809-.2a15.539,15.539,0,0,1,18.87-11.207l-.2.809a14.7,14.7,0,0,0-17.857,10.6Zm14.238,19.15a15.484,15.484,0,0,1-3.832-.484l.2-.809a14.7,14.7,0,0,0,17.849-10.59l.809.2a15.547,15.547,0,0,1-15.03,11.678ZM125.982,69.952l.88.78a.417.417,0,0,0,.463.042l1-.6a.417.417,0,0,1,.563.5l-.463,1.076a.417.417,0,0,0,.1.442l.88.771a.417.417,0,0,1-.3.688l-1.163-.108a.417.417,0,0,0-.417.238l-.463,1.076a.417.417,0,0,1-.746-.071l-.242-1.134a.417.417,0,0,0-.35-.3l-1.163-.113a.417.417,0,0,1-.167-.734l1-.6a.417.417,0,0,0,.183-.417l-.259-1.142a.417.417,0,0,1,.65-.392ZM116.347,80.2l1.155.188a.417.417,0,0,0,.417-.208l.534-1.042a.417.417,0,0,1,.742.121l.163,1.155a.417.417,0,0,0,.325.329l1.155.188a.417.417,0,0,1,.117.742l-1.042.529a.417.417,0,0,0-.213.417l.179,1.155a.417.417,0,0,1-.671.338l-.834-.834a.417.417,0,0,0-.459-.075l-1.042.53a.417.417,0,0,1-.53-.534l.534-1.042a.417.417,0,0,0-.071-.459l-.834-.834a.417.417,0,0,1,.375-.663Zm22.606-13.413-.417,1.1a.417.417,0,0,1-.384.263l-1.172-.029a.417.417,0,0,0-.25.709l.93.713a.417.417,0,0,1,.133.446l-.392,1.1a.417.417,0,0,0,.617.471l.963-.663a.417.417,0,0,1,.463,0l.93.713a.417.417,0,0,0,.617-.417l-.334-1.122a.417.417,0,0,1,.154-.417l.963-.663a.417.417,0,0,0-.213-.767H140.4a.417.417,0,0,1-.367-.284l-.334-1.122a.417.417,0,0,0-.742-.038Zm13.6,47.926-.258-1.142a.417.417,0,0,1,.183-.417l1-.6a.417.417,0,0,0-.167-.734l-1.163-.108a.417.417,0,0,1-.35-.3l-.258-1.142a.417.417,0,0,0-.746-.071l-.463,1.076a.417.417,0,0,1-.417.238l-1.163-.108a.417.417,0,0,0-.3.688l.917.75a.417.417,0,0,1,.1.45l-.463,1.076a.417.417,0,0,0,.563.5l1-.6a.417.417,0,0,1,.463.042l.88.771a.417.417,0,0,0,.63-.367Zm-13.6,3.548.392-1.1a.417.417,0,0,1,.384-.263l1.172.029a.417.417,0,0,0,.25-.709l-.946-.709a.417.417,0,0,1-.133-.446l.392-1.1a.417.417,0,0,0-.6-.454l-.963.663a.417.417,0,0,1-.463,0l-.93-.713a.417.417,0,0,0-.617.417l.334,1.122a.417.417,0,0,1-.154.417l-.963.663a.417.417,0,0,0,.213.717l1.172.029a.417.417,0,0,1,.367.284l.334,1.122a.417.417,0,0,0,.759.042Zm22.585-13.413-1.155-.188a.417.417,0,0,0-.417.208l-.534,1.042a.417.417,0,0,1-.742-.121l-.179-1.155a.417.417,0,0,0-.325-.329l-1.155-.188a.417.417,0,0,1-.117-.742l1.042-.53a.417.417,0,0,0,.213-.417l-.179-1.155a.417.417,0,0,1,.671-.338l.834.834a.417.417,0,0,0,.459.075l1.042-.529a.417.417,0,0,1,.53.534l-.534,1.042a.417.417,0,0,0,.071.459l.834.834a.417.417,0,0,1-.359.663Z" transform="translate(-109.142 -62.71)" fill="#f53f3f"/>
+    </g>
+    <text id="审批拒绝" transform="matrix(0.848, -0.53, 0.53, 0.848, 304.807, 199.83)" fill="#f53f3f" font-size="12" font-family="PingFang SC Medium, PingFang SC" letter-spacing="-0.04em"><tspan x="0" y="0">审批拒绝</tspan></text>
+  </g>
+</svg>

package/flow/comps/icons/underway.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="59.622" height="59.616" viewBox="0 0 59.622 59.616">
+  <g id="进行" transform="translate(-291.798 -153.753)">
+    <g id="组_977" data-name="组 977" transform="translate(291.798 153.753)">
+      <path id="路径_604" data-name="路径 604" d="M29.853,59.769a29.8,29.8,0,1,1,25.88-15.078,29.806,29.806,0,0,1-25.88,15.078Zm-.1-58.37a28.621,28.621,0,1,0,7.1.9,28.576,28.576,0,0,0-7.1-.9Z" transform="translate(0 -0.153)" fill="#519ef7"/>
+      <path id="路径_605" data-name="路径 605" d="M64.173,92.121a27.692,27.692,0,1,1,14.1-3.877A27.693,27.693,0,0,1,64.173,92.121Zm-.092-54.593a26.979,26.979,0,1,0,6.683.846,26.88,26.88,0,0,0-6.683-.846Z" transform="translate(-34.325 -34.602)" fill="#519ef7"/>
+      <path id="路径_606" data-name="路径 606" d="M221.473,224.75l-1.213-.309A17.511,17.511,0,0,1,241.564,211.8l-.309,1.213A16.26,16.26,0,0,0,221.473,224.75Zm15.772,21.539a17.482,17.482,0,0,1-4.336-.538l.309-1.213A16.285,16.285,0,0,0,253,232.792l1.213.309a17.548,17.548,0,0,1-16.969,13.187Z" transform="translate(-207.434 -198.955)" fill="#519ef7"/>
+      <path id="路径_607" data-name="路径 607" d="M124.715,88.9l-.809-.2a15.539,15.539,0,0,1,18.87-11.207l-.2.809a14.7,14.7,0,0,0-17.857,10.6Zm14.238,19.15a15.484,15.484,0,0,1-3.832-.484l.2-.809a14.7,14.7,0,0,0,17.849-10.59l.809.2a15.547,15.547,0,0,1-15.03,11.678ZM125.982,69.952l.88.78a.417.417,0,0,0,.463.042l1-.6a.417.417,0,0,1,.563.5l-.463,1.076a.417.417,0,0,0,.1.442l.88.771a.417.417,0,0,1-.3.688l-1.163-.108a.417.417,0,0,0-.417.238l-.463,1.076a.417.417,0,0,1-.746-.071l-.242-1.134a.417.417,0,0,0-.35-.3l-1.163-.113a.417.417,0,0,1-.167-.734l1-.6a.417.417,0,0,0,.183-.417l-.259-1.142a.417.417,0,0,1,.65-.392ZM116.347,80.2l1.155.188a.417.417,0,0,0,.417-.208l.534-1.042a.417.417,0,0,1,.742.121l.163,1.155a.417.417,0,0,0,.325.329l1.155.188a.417.417,0,0,1,.117.742l-1.042.529a.417.417,0,0,0-.213.417l.179,1.155a.417.417,0,0,1-.671.338l-.834-.834a.417.417,0,0,0-.459-.075l-1.042.53a.417.417,0,0,1-.53-.534l.534-1.042a.417.417,0,0,0-.071-.459l-.834-.834a.417.417,0,0,1,.375-.663Zm22.606-13.413-.417,1.1a.417.417,0,0,1-.384.263l-1.172-.029a.417.417,0,0,0-.25.709l.93.713a.417.417,0,0,1,.133.446l-.392,1.1a.417.417,0,0,0,.617.471l.963-.663a.417.417,0,0,1,.463,0l.93.713a.417.417,0,0,0,.617-.417l-.334-1.122a.417.417,0,0,1,.154-.417l.963-.663a.417.417,0,0,0-.213-.767H140.4a.417.417,0,0,1-.367-.284l-.334-1.122a.417.417,0,0,0-.742-.038Zm13.6,47.926-.258-1.142a.417.417,0,0,1,.183-.417l1-.6a.417.417,0,0,0-.167-.734l-1.163-.108a.417.417,0,0,1-.35-.3l-.258-1.142a.417.417,0,0,0-.746-.071l-.463,1.076a.417.417,0,0,1-.417.238l-1.163-.108a.417.417,0,0,0-.3.688l.917.75a.417.417,0,0,1,.1.45l-.463,1.076a.417.417,0,0,0,.563.5l1-.6a.417.417,0,0,1,.463.042l.88.771a.417.417,0,0,0,.63-.367Zm-13.6,3.548.392-1.1a.417.417,0,0,1,.384-.263l1.172.029a.417.417,0,0,0,.25-.709l-.946-.709a.417.417,0,0,1-.133-.446l.392-1.1a.417.417,0,0,0-.6-.454l-.963.663a.417.417,0,0,1-.463,0l-.93-.713a.417.417,0,0,0-.617.417l.334,1.122a.417.417,0,0,1-.154.417l-.963.663a.417.417,0,0,0,.213.717l1.172.029a.417.417,0,0,1,.367.284l.334,1.122a.417.417,0,0,0,.759.042Zm22.585-13.413-1.155-.188a.417.417,0,0,0-.417.208l-.534,1.042a.417.417,0,0,1-.742-.121l-.179-1.155a.417.417,0,0,0-.325-.329l-1.155-.188a.417.417,0,0,1-.117-.742l1.042-.53a.417.417,0,0,0,.213-.417l-.179-1.155a.417.417,0,0,1,.671-.338l.834.834a.417.417,0,0,0,.459.075l1.042-.529a.417.417,0,0,1,.53.534l-.534,1.042a.417.417,0,0,0,.071.459l.834.834a.417.417,0,0,1-.359.663Z" transform="translate(-109.142 -62.71)" fill="#519ef7"/>
+    </g>
+    <text id="审批进行" transform="matrix(0.848, -0.53, 0.53, 0.848, 304.807, 199.83)" fill="#519ef7" font-size="12" font-family="PingFang SC Medium, PingFang SC" letter-spacing="-0.04em"><tspan x="0" y="0">审批进行</tspan></text>
+  </g>
+</svg>