Vue ——深入Vue 3源码级别：企业级业务系统响应式优化与状态管理完全指南

Vue 3业务系统技术重难点解析：复杂表单、状态管理与交互动效实战

在现代前端开发中，Vue 3作为主流的前端框架被广泛应用于各类业务系统的开发中。本文将深入剖析基于Vue 3、Vite、Ant Design Vue和Pinia的业务系统开发过程中的关键技术难点，并提供相应的解决方案和示例代码。

技术难点

在业务系统中，表单管理模块需要处理复杂的表单逻辑，包括动态字段、条件验证和嵌套数据结构。Vue 3的Composition API虽然提供了更灵活的逻辑组织方式，但如何合理地组织复杂表单的逻辑仍然是一个挑战。

实现效果

通过Composition API和响应式系统的合理运用，实现了复杂表单的模块化管理，提高了代码的可维护性和复用性。

示例演示

vue

<template> <div class="complex-form-demo"> <a-card title="业务表单示例" :bordered="false"> <a-form layout="vertical" :model="formState" ref="formRef"> <!-- 基本信息 --> <a-row :gutter="24"> <a-col :span="12"> <a-form-item label="标题" name="title" :rules="[{ required: true, message: '请输入标题' }]"> <a-input v-model:value="formState.title" placeholder="请输入标题" /> </a-form-item> </a-col> <a-col :span="12"> <a-form-item label="类型" name="type" :rules="[{ required: true, message: '请选择类型' }]"> <a-select v-model:value="formState.type" placeholder="请选择类型"> <a-select-option value="typeA">类型A</a-select-option> <a-select-option value="typeB">类型B</a-select-option> <a-select-option value="typeC">类型C</a-select-option> </a-select> </a-form-item> </a-col> </a-row> <a-row :gutter="24"> <a-col :span="12"> <a-form-item label="日期时间" name="datetime" :rules="[{ required: true, message: '请选择日期时间' }]"> <a-date-picker v-model:value="formState.datetime" show-time format="YYYY-MM-DD HH:mm" placeholder="请选择日期时间" style="width: 100%" /> </a-form-item> </a-col> <a-col :span="12"> <a-form-item label="时长" name="duration"> <a-input-number v-model:value="formState.duration" :min="10" :max="300" :step="10" addon-after="分钟" /> </a-form-item> </a-col> </a-row> <!-- 动态成员列表 --> <a-form-item label="成员列表"> <a-button type="primary" @click="addMember" size="small"> <template #icon> <PlusOutlined /> </template> 添加成员 </a-button> <a-table :data-source="formState.members" :columns="memberColumns" :pagination="false" style="margin-top: 16px" row-key="id" > <template #bodyCell="{ column, record, index }"> <template v-if="column.dataIndex === 'name'"> <a-input v-model:value="record.name" placeholder="请输入姓名" /> </template> <template v-else-if="column.dataIndex === 'role'"> <a-select v-model:value="record.role" placeholder="请选择角色"> <a-select-option value="admin">管理员</a-select-option> <a-select-option value="member">成员</a-select-option> <a-select-option value="guest">访客</a-select-option> </a-select> </template> <template v-else-if="column.dataIndex === 'action'"> <a-button type="link" @click="removeMember(index)">删除</a-button> </template> </template> </a-table> </a-form-item> <!-- 动态事项列表 --> <a-form-item label="事项列表"> <a-button type="primary" @click="addItem" size="small"> <template #icon> <PlusOutlined /> </template> 添加事项 </a-button> <a-table :data-source="formState.items" :columns="itemColumns" :pagination="false" style="margin-top: 16px" row-key="id" > <template #bodyCell="{ column, record, index }"> <template v-if="column.dataIndex === 'title'"> <a-input v-model:value="record.title" placeholder="请输入事项标题" /> </template> <template v-else-if="column.dataIndex === 'responsible'"> <a-input v-model:value="record.responsible" placeholder="请输入负责人" /> </template> <template v-else-if="column.dataIndex === 'duration'"> <a-input-number v-model:value="record.duration" :min="5" :max="120" addon-after="分钟" /> </template> <template v-else-if="column.dataIndex === 'action'"> <a-button type="link" @click="removeItem(index)">删除</a-button> </template> </template> </a-table> </a-form-item> <!-- 操作按钮 --> <div class="form-actions"> <a-button @click="resetForm">重置</a-button> <a-button type="primary" @click="submitForm" :loading="submitting">提交</a-button> </div> </a-form> </a-card> </div> </template> <script setup> import { ref, reactive, onMounted } from 'vue'; import { message } from 'ant-design-vue'; import { PlusOutlined } from '@ant-design/icons-vue'; import { v4 as uuidv4 } from 'uuid'; // 表单引用 const formRef = ref(); // 表单状态 const formState = reactive({ title: '', type: undefined, datetime: null, duration: 60, members: [], items: [] }); // 成员表格列 const memberColumns = [ { title: '姓名', dataIndex: 'name', width: '40%' }, { title: '角色', dataIndex: 'role', width: '40%' }, { title: '操作', dataIndex: 'action', width: '20%' } ]; // 事项表格列 const itemColumns = [ { title: '事项', dataIndex: 'title', width: '40%' }, { title: '负责人', dataIndex: 'responsible', width: '25%' }, { title: '时长', dataIndex: 'duration', width: '20%' }, { title: '操作', dataIndex: 'action', width: '15%' } ]; // 提交状态 const submitting = ref(false); // 添加成员 const addMember = () => { formState.members.push({ id: uuidv4(), name: '', role: undefined }); }; // 删除成员 const removeMember = (index) => { formState.members.splice(index, 1); }; // 添加事项 const addItem = () => { formState.items.push({ id: uuidv4(), title: '', responsible: '', duration: 15 }); }; // 删除事项 const removeItem = (index) => { formState.items.splice(index, 1); }; // 重置表单 const resetForm = () => { formRef.value.resetFields(); formState.members = []; formState.items = []; }; // 提交表单 const submitForm = async () => { try { submitting.value = true; // 表单验证 await formRef.value.validateFields(); // 验证成员列表 if (formState.members.length === 0) { message.warning('请至少添加一名成员'); return; } // 验证事项列表 if (formState.items.length === 0) { message.warning('请至少添加一个事项'); return; } // 模拟提交 console.log('提交表单数据:', formState); message.success('表单提交成功'); } catch (error) { console.error('表单验证失败:', error); message.error('请检查表单填写是否正确'); } finally { submitting.value = false; } }; // 初始化表单 onMounted(() => { // 添加默认成员 addMember(); // 添加默认事项 addItem(); }); </script> <style scoped> .form-actions { text-align: center; margin-top: 24px; } .form-actions .ant-btn { margin: 0 8px; } </style>

解决方案

1. 模块化表单逻辑：将复杂的表单拆分为多个可复用的逻辑模块，每个模块负责特定的功能
2. 响应式数据管理：利用Vue 3的reactive和ref API管理表单状态，确保数据的响应性
3. 表单验证策略：结合Ant Design Vue的表单验证和自定义验证逻辑，实现全面的表单校验

javascript

// 表单逻辑组合函数 import { ref, reactive, watch } from 'vue'; import { message } from 'ant-design-vue'; // 创建表单管理器 export function useFormManager(initialState) { const formState = reactive(initialState); const formErrors = ref({}); const isDirty = ref(false); const isSubmitting = ref(false); // 监听表单变化 watch(formState, () => { isDirty.value = true; }, { deep: true }); // 重置表单 const resetForm = (newState = initialState) => { Object.assign(formState, newState); formErrors.value = {}; isDirty.value = false; }; // 验证表单字段 const validateField = (fieldName, validator) => { const value = formState[fieldName]; const result = validator(value, formState); if (result.isValid) { delete formErrors.value[fieldName]; } else { formErrors.value[fieldName] = result.message; } return result.isValid; }; // 验证整个表单 const validateForm = (validators) => { let isValid = true; formErrors.value = {}; for (const [fieldName, validator] of Object.entries(validators)) { const result = validator(formState[fieldName], formState); if (!result.isValid) { formErrors.value[fieldName] = result.message; isValid = false; } } return isValid; }; // 提交表单 const submitForm = async (submitHandler, validators) => { if (validators && !validateForm(validators)) { message.error('请检查表单填写是否正确'); return false; } try { isSubmitting.value = true; await submitHandler(formState); isDirty.value = false; return true; } catch (error) { message.error(error.message || '提交失败'); return false; } finally { isSubmitting.value = false; } }; return { formState, formErrors, isDirty, isSubmitting, resetForm, validateField, validateForm, submitForm }; } // 动态列表管理器 export function useDynamicList(initialItems = []) { const items = ref([...initialItems]); const addItem = (item) => { items.value.push(item); }; const removeItem = (index) => { items.value.splice(index, 1); }; const updateItem = (index, newItem) => { items.value.splice(index, 1, newItem); }; const moveItem = (fromIndex, toIndex) => { const item = items.value[fromIndex]; items.value.splice(fromIndex, 1); items.value.splice(toIndex, 0, item); }; const clearItems = () => { items.value = []; }; return { items, addItem, removeItem, updateItem, moveItem, clearItems }; }

二、基于Pinia的状态管理与跨组件通信

技术难点

在业务系统中，各模块间存在复杂的数据交互和状态共享需求，如用户权限、业务数据状态、审批流程等。如何在Vue 3和Pinia框架下实现高效的状态管理和跨组件通信，是一个关键的技术挑战。

实现效果

通过Pinia状态管理和Vue 3的provide/inject机制，实现了组件间高效的数据共享和状态同步，降低了组件耦合度，提高了系统的可维护性。

示例演示

vue

<template> <div class="state-management-demo"> <a-layout> <a-layout-header class="header"> <div class="logo">业务管理系统</div> <div class="user-info"> <span>欢迎，{{ userStore.userInfo?.name }}</span> <a-button type="link" @click="logout">退出</a-button> </div> </a-layout-header> <a-layout> <a-layout-sider width="250" class="sider"> <a-menu v-model:selectedKeys="selectedKeys" mode="inline" @select="handleMenuSelect" > <a-menu-item key="dashboard"> <DashboardOutlined /> <span>仪表板</span> </a-menu-item> <a-menu-item key="business"> <AppstoreOutlined /> <span>业务管理</span> </a-menu-item> <a-menu-item key="approvals"> <FileDoneOutlined /> <span>审批管理</span> </a-menu-item> <a-menu-item key="members"> <TeamOutlined /> <span>成员管理</span> </a-menu-item> </a-menu> </a-layout-sider> <a-layout-content class="content"> <!-- 路由视图 --> <div class="demo-content"> <a-card title="当前模块内容" :bordered="false"> <p>选中的菜单项：{{ selectedKeys[0] }}</p> <p>用户角色：{{ userStore.userRole }}</p> <p>是否有管理权限：{{ userStore.hasPermission('business:manage') ? '是' : '否' }}</p> </a-card> </div> </a-layout-content> </a-layout> </a-layout> </div> </template> <script setup> import { ref, onMounted } from 'vue'; import { DashboardOutlined, AppstoreOutlined, FileDoneOutlined, TeamOutlined } from '@ant-design/icons-vue'; import { useUserStore } from '@/store/userStore'; import { useBusinessStore } from '@/store/businessStore'; // 状态管理 const userStore = useUserStore(); const businessStore = useBusinessStore(); // 选中的菜单项 const selectedKeys = ref(['dashboard']); // 处理菜单选择 const handleMenuSelect = ({ key }) => { selectedKeys.value = [key]; // 根据菜单项加载不同数据 if (key === 'business') { businessStore.loadDataList(); } }; // 退出登录 const logout = () => { userStore.logout(); message.success('已退出登录'); }; // 初始化 onMounted(async () => { await userStore.getUserInfo(); await businessStore.loadDataList(); }); </script> <style scoped> .state-management-demo { height: 100vh; } .header { display: flex; justify-content: space-between; align-items: center; padding: 0 24px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .logo { font-size: 18px; font-weight: bold; color: #1890ff; } .user-info { display: flex; align-items: center; gap: 16px; } .sider { background: #fff; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); } .content { padding: 24px; background: #f0f2f5; overflow: auto; } .demo-content { background: #fff; border-radius: 8px; padding: 16px; } </style>

javascript

// store/userStore.js import { defineStore } from 'pinia'; import { message } from 'ant-design-vue'; export const useUserStore = defineStore('user', { state: () => ({ userInfo: null, token: localStorage.getItem('token') || null, permissions: [] }), getters: { isLoggedIn: (state) => !!state.token, userName: (state) => state.userInfo?.name || '', userRole: (state) => state.userInfo?.role || '' }, actions: { // 用户登录 async login(credentials) { try { // 模拟登录API调用 const response = await mockLoginApi(credentials); const { token, userInfo } = response.data; this.token = token; localStorage.setItem('token', token); this.userInfo = userInfo; await this.loadPermissions(); message.success('登录成功'); return true; } catch (error) { message.error(error.message || '登录失败'); return false; } }, // 获取用户信息 async getUserInfo() { if (!this.token) return; try { // 模拟获取用户信息API const response = await mockGetUserInfoApi(); this.userInfo = response.data; await this.loadPermissions(); } catch (error) { console.error('获取用户信息失败:', error); this.logout(); } }, // 加载用户权限 async loadPermissions() { if (!this.userInfo) return; // 模拟权限数据 const rolePermissions = { admin: ['*', 'business:*', 'approval:*'], manager: ['business:*', 'approval:view'], user: ['business:view', 'approval:view'] }; this.permissions = rolePermissions[this.userInfo.role] || []; }, // 用户退出 logout() { this.userInfo = null; this.token = null; this.permissions = []; localStorage.removeItem('token'); }, // 检查权限 hasPermission(permission) { if (!this.permissions.length) return false; if (this.permissions.includes('*')) return true; if (this.permissions.includes(permission)) return true; return this.permissions.some(p => { if (p.endsWith(':*')) { const prefix = p.slice(0, -2); return permission.startsWith(prefix); } return false; }); } } }); // 模拟API const mockLoginApi = (credentials) => { return new Promise((resolve) => { setTimeout(() => { resolve({ data: { token: 'mock-token-' + Date.now(), userInfo: { id: 1, name: '张三', role: credentials.username === 'admin' ? 'admin' : 'user' } } }); }, 500); }); }; const mockGetUserInfoApi = () => { return new Promise((resolve) => { setTimeout(() => { resolve({ data: { id: 1, name: '张三', role: 'admin' } }); }, 300); }); };

javascript

// store/businessStore.js import { defineStore } from 'pinia'; import { message } from 'ant-design-vue'; export const useBusinessStore = defineStore('business', { state: () => ({ dataList: [], currentItem: null, loading: false, filter: { status: 'all', keyword: '' } }), getters: { // 获取进行中的数据 activeItems: (state) => { return state.dataList.filter(item => item.status === 'active'); }, // 过滤后的数据 filteredDataList: (state) => { let result = state.dataList; if (state.filter.status !== 'all') { result = result.filter(item => item.status === state.filter.status); } if (state.filter.keyword) { const keyword = state.filter.keyword.toLowerCase(); result = result.filter(item => item.title.toLowerCase().includes(keyword) ); } return result; } }, actions: { // 加载数据列表 async loadDataList() { this.loading = true; try { const response = await mockGetDataListApi(); this.dataList = response.data; } catch (error) { message.error(error.message || '加载数据列表失败'); } finally { this.loading = false; } }, // 创建数据项 async createItem(data) { try { const response = await mockCreateItemApi(data); this.dataList.push(response.data); message.success('创建成功'); return response.data; } catch (error) { message.error(error.message || '创建失败'); throw error; } }, // 更新数据项 async updateItem(id, data) { try { const response = await mockUpdateItemApi(id, data); const index = this.dataList.findIndex(item => item.id === id); if (index !== -1) { this.dataList.splice(index, 1, response.data); } message.success('更新成功'); return response.data; } catch (error) { message.error(error.message || '更新失败'); throw error; } }, // 删除数据项 async deleteItem(id) { try { await mockDeleteItemApi(id); const index = this.dataList.findIndex(item => item.id === id); if (index !== -1) { this.dataList.splice(index, 1); } message.success('删除成功'); } catch (error) { message.error(error.message || '删除失败'); throw error; } }, // 设置当前项 setCurrentItem(item) { this.currentItem = item; }, // 更新过滤条件 updateFilter(newFilter) { this.filter = { ...this.filter, ...newFilter }; } } }); // 模拟API const mockGetDataListApi = () => { return new Promise((resolve) => { setTimeout(() => { resolve({ data: [ { id: 1, title: '示例数据1', status: 'active', createTime: '2024-01-01' }, { id: 2, title: '示例数据2', status: 'pending', createTime: '2024-01-02' }, { id: 3, title: '示例数据3', status: 'active', createTime: '2024-01-03' } ] }); }, 300); }); }; const mockCreateItemApi = (data) => { return new Promise((resolve) => { setTimeout(() => { resolve({ data: { id: Date.now(), ...data, status: 'active', createTime: new Date().toISOString() } }); }, 500); }); }; const mockUpdateItemApi = (id, data) => { return new Promise((resolve) => { setTimeout(() => { resolve({ data: { id, ...data, updateTime: new Date().toISOString() } }); }, 500); }); }; const mockDeleteItemApi = (id) => { return new Promise((resolve) => { setTimeout(() => resolve({ success: true }), 300); }); };

解决方案

1. 模块化状态管理：将相关状态划分为不同的store模块，提高代码组织性和可维护性
2. 响应式状态更新：利用Pinia的响应式特性，确保状态变化能及时反映到组件中
3. 状态持久化：通过插件或手动实现状态的持久化存储，提升用户体验

javascript

// Pinia插件：状态持久化 export const persistencePlugin = (context) => { const { store, options } = context; if (options.persist) { const storageKey = `pinia_${store.$id}`; // 从存储中恢复状态 const storedState = localStorage.getItem(storageKey); if (storedState) { try { store.$patch(JSON.parse(storedState)); } catch (error) { console.error(`恢复状态失败 (${store.$id}):`, error); } } // 监听状态变化并持久化 store.$subscribe((mutation, state) => { try { localStorage.setItem(storageKey, JSON.stringify(state)); } catch (error) { console.error(`状态持久化失败 (${store.$id}):`, error); } }); } }; // 跨组件通信机制 export class CommunicationHub { constructor() { this.channels = new Map(); } subscribe(channel, callback) { if (!this.channels.has(channel)) { this.channels.set(channel, new Set()); } this.channels.get(channel).add(callback); return () => { const callbacks = this.channels.get(channel); if (callbacks) callbacks.delete(callback); }; } publish(channel, data) { const callbacks = this.channels.get(channel); if (callbacks) { callbacks.forEach(callback => { try { callback(data); } catch (error) { console.error(`频道 ${channel} 消息处理失败:`, error); } }); } } }

三、基于Ant Design Vue的复杂交互组件实现

技术难点

在业务系统中，为了提升用户体验，常常需要实现复杂的交互动效，如流程可视化、日程安排、数据图表展示等。如何在Vue 3和Ant Design Vue框架下实现流畅的复杂交互动效，是一个值得关注的技术难点。

实现效果

通过Ant Design Vue组件库和Vue 3的动画API，实现了流畅自然的交互动效，显著提升了用户界面的视觉效果和用户体验。

示例演示

vue

<template> <div class="complex-interaction-demo"> <a-card title="流程可视化示例" :bordered="false"> <div class="flow-chart"> <!-- 开始节点 --> <div class="flow-node start-node" :class="{ active: currentStep >= 0 }"> <div class="node-content"> <PlayCircleOutlined class="node-icon" /> <div class="node-label">开始</div> </div> </div> <div class="flow-line" :class="{ active: currentStep >= 0 }"></div> <!-- 步骤1节点 --> <div class="flow-node step-node" :class="{ active: currentStep >= 1, completed: currentStep > 1 }"> <div class="node-content"> <UserOutlined class="node-icon" /> <div class="node-label">步骤一</div> <div class="node-status" v-if="currentStep > 1"> <CheckCircleOutlined /> 已完成 </div> <div class="node-status pending" v-else-if="currentStep === 1"> <LoadingOutlined /> 进行中... </div> </div> </div> <div class="flow-line" :class="{ active: currentStep >= 1 }"></div> <!-- 步骤2节点 --> <div class="flow-node step-node" :class="{ active: currentStep >= 2, completed: currentStep > 2 }"> <div class="node-content"> <FileTextOutlined class="node-icon" /> <div class="node-label">步骤二</div> <div class="node-status" v-if="currentStep > 2"> <CheckCircleOutlined /> 已完成 </div> <div class="node-status pending" v-else-if="currentStep === 2"> <LoadingOutlined /> 待处理... </div> </div> </div> <div class="flow-line" :class="{ active: currentStep >= 2 }"></div> <!-- 步骤3节点 --> <div class="flow-node step-node" :class="{ active: currentStep >= 3, completed: currentStep > 3 }"> <div class="node-content"> <DollarCircleOutlined class="node-icon" /> <div class="node-label">步骤三</div> <div class="node-status" v-if="currentStep > 3"> <CheckCircleOutlined /> 已完成 </div> <div class="node-status pending" v-else-if="currentStep === 3"> <LoadingOutlined /> 待处理... </div> </div> </div> <div class="flow-line" :class="{ active: currentStep >= 3 }"></div> <!-- 结束节点 --> <div class="flow-node end-node" :class="{ active: currentStep >= 4, completed: currentStep >= 4 }"> <div class="node-content"> <FlagOutlined class="node-icon" /> <div class="node-label">结束</div> <div class="node-status" v-if="currentStep >= 4"> <CheckCircleOutlined /> 已完成 </div> </div> </div> </div> <div class="step-info" v-if="currentStep >= 0 && currentStep < 4"> <a-card :title="getCurrentStepInfo().title" size="small"> <p>{{ getCurrentStepInfo().description }}</p> <div class="step-actions" v-if="currentStep > 0 && currentStep < 4"> <a-button v-if="currentStep < 3" type="primary" @click="approveStep" :loading="isProcessing"> 通过 </a-button> <a-button v-if="currentStep < 3" @click="rejectStep" :disabled="isProcessing"> 驳回 </a-button> </div> </a-card> </div> <div class="completion-message" v-if="currentStep === 4"> <a-result status="success" title="流程已完成" sub-title="所有步骤均已顺利完成。"> <template #extra> <a-button key="console" type="primary" @click="resetFlow">重新开始</a-button> </template> </a-result> </div> <div class="flow-controls"> <a-button v-if="currentStep === -1" type="primary" @click="startFlow" size="large"> 开始流程 </a-button> <a-button v-else @click="resetFlow">重置流程</a-button> </div> </a-card> </div> </template> <script setup> import { ref, reactive } from 'vue'; import { PlayCircleOutlined, UserOutlined, FileTextOutlined, DollarCircleOutlined, FlagOutlined, CheckCircleOutlined, LoadingOutlined } from '@ant-design/icons-vue'; // 当前步骤 const currentStep = ref(-1); // -1: 未开始, 0: 开始, 1-3: 各步骤, 4: 结束 const isProcessing = ref(false); // 步骤信息 const stepInfo = reactive({ 1: { title: '步骤一', description: '正在执行第一步操作，请确认相关信息。' }, 2: { title: '步骤二', description: '正在执行第二步操作，请审核相关内容。' }, 3: { title: '步骤三', description: '正在执行第三步操作，请确认最终结果。' } }); // 开始流程 const startFlow = () => { if (isProcessing.value) return; isProcessing.value = true; currentStep.value = 0; setTimeout(() => { currentStep.value = 1; isProcessing.value = false; }, 1000); }; // 通过当前步骤 const approveStep = () => { if (isProcessing.value || currentStep.value < 1 || currentStep.value >= 4) return; isProcessing.value = true; setTimeout(() => { currentStep.value++; isProcessing.value = false; }, 1500); }; // 驳回当前步骤 const rejectStep = () => { if (isProcessing.value || currentStep.value < 1 || currentStep.value >= 4) return; alert('流程被驳回，已终止。'); resetFlow(); }; // 重置流程 const resetFlow = () => { currentStep.value = -1; isProcessing.value = false; }; // 获取当前步骤信息 const getCurrentStepInfo = () => { return stepInfo[currentStep.value] || { title: '', description: '' }; }; </script> <style scoped> .flow-chart { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; } .flow-node { width: 180px; height: 120px; background: #f0f2f5; border-radius: 12px; margin: 10px 0; display: flex; align-items: center; justify-content: center; transition: all 0.5s ease; border: 2px solid #d9d9d9; opacity: 0.6; transform: scale(0.95); } .flow-node.active { opacity: 1; transform: scale(1); background: #e6f7ff; border-color: #1890ff; box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2); } .flow-node.completed { opacity: 1; background: #f6ffed; border-color: #52c41a; } .flow-node.start-node, .flow-node.end-node { background: #f6ffed; border-color: #52c41a; } .node-content { text-align: center; } .node-icon { font-size: 24px; margin-bottom: 10px; color: #1890ff; } .flow-node.completed .node-icon { color: #52c41a; } .flow-node.start-node .node-icon, .flow-node.end-node .node-icon { color: #52c41a; } .node-label { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: #333; } .node-status { font-size: 14px; color: #52c41a; font-weight: 500; } .node-status.pending { color: #faad14; } .flow-line { width: 4px; height: 40px; background: #d9d9d9; margin: 5px 0; transition: all 0.5s ease; } .flow-line.active { background: #1890ff; box-shadow: 0 0 8px rgba(24, 144, 255, 0.4); } .step-info { margin-bottom: 30px; } .step-actions { margin-top: 20px; display: flex; gap: