feat: 修改暗黑模式审批详情样式

src/views/approve/components/approvedContent.vue

@@ -30,7 +30,7 @@
 							<FlowStatusTag :status="0" />
 						</div>
 						<div class="initiator-info">
-							<FlowNodeAvatar id="1" />
+							<FlowNodeAvatar :name="currentTaskRow.createBy" />
 							<div class="begin-time">{{ currentTaskRow.createTime }} 提交</div>
 						</div>
 					</div>
@@ -191,6 +191,7 @@ import LoseSignDialog from './loseSignDialog'
 import RollbackDialog from './rollbackDialog'
 import viewForm from '@/utils/form'
 import { storeToRefs } from 'pinia'
+import {ElMessage, ElMessageBox} from "element-plus";
 
 defineProps({
 	/**
@@ -351,12 +352,6 @@ const getTaskDetail = () => {
 		})
 }
 
-/** 认领任务 **/
-const claimTaskEv = async () => {
-	const res = await processClaimTaskApi(currentTaskRow.value.taskId)
-	console.log(res, 'res====')
-}
-
 /**
  * 详情页面操作按钮回调
  */
@@ -372,6 +367,28 @@ const closeDetailEv = () => {
 	taskProcessInfo.setCurrentTaskRow({})
 }
 
+/** 认领任务 **/
+const claimTaskEv = async () => {
+	ElMessageBox.confirm('确定认领当前审批流程？', '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+		buttonSize: 'default'
+	})
+		.then(async () => {
+			const { data } = await processClaimTaskApi(currentTaskRow.value.taskId)
+			ElMessage({
+				message: data ? '执行成功' : '执行失败',
+				type: data ? 'success' : 'error'
+			})
+			if (!data) return
+			closeDetailEv()
+		})
+		.catch(() => {
+			console.log('取消')
+		})
+}
+
 /**
  * 监听同级子组件的instanceId的值变化 这里可能也有实例Id
  * 1、监听instanceId的值变化，如果值有变化，则重新获取审批详情
@@ -392,7 +409,7 @@ watch(
 .flow-detail-content {
 	height: 100%;
 	overflow: hidden;
-	background: #fff;
+	background: var(--el-bg-color);
 	border-radius: 6px;
 	flex: auto;
 	.flow-detail-container {
@@ -415,13 +432,13 @@ watch(
 	.flow-header-box {
 		font-weight: 400;
 		font-size: 13px;
-		border-bottom: 1px solid #e5e6ec;
+		border-bottom: 1px solid var(--el-border-color);
 		padding: 0 20px;
 		height: 39px;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		color: #86909c;
+		color: var(--el-color-info);
 		.action-area {
 			display: flex;
 			gap: 4px;
@@ -458,7 +475,7 @@ watch(
 				font-size: 24px;
 				.title {
 					font-family: PingFangSC-Semibold, PingFang SC;
-					color: #1d2129;
+					color: var(--el-text-color-primary);
 				}
 			}
 			.initiator-info {
@@ -468,7 +485,7 @@ watch(
 				.begin-time {
 					margin-left: 16px;
 					font-weight: 350;
-					color: #86909c;
+					color: var(--el-text-color-placeholder);
 					font-size: 13px;
 					-webkit-user-select: none;
 					user-select: none;
@@ -476,7 +493,7 @@ watch(
 			}
 		}
 		.area-divider {
-			border-bottom: 1px solid rgba(229, 230, 235, 1);
+			border-bottom: 1px solid var(--el-border-color);
 			margin: 20px 0;
 			//position: relative;
 		}
@@ -494,7 +511,7 @@ watch(
 		justify-content: flex-end;
 		height: 52px;
 		//border-top: 1px solid var(--color-neutral-3);
-		border-top: 1px solid #e5e6ec;
+		border-top: 1px solid var(--el-border-color-light);
 		padding: 0 20px;
 	}
 }
@@ -504,7 +521,7 @@ watch(
 	margin-top: 4px;
 	padding: 8px;
 	border-radius: 4px;
-	background-color: #f8f8fa;
+	background-color: var(--el-bg-color-page);
 }
 
 .timeline-box {