smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: style

Browse Source
This commit is contained in:
xingyu4j
2025-06-17 20:22:24 +08:00
parent 7276d0a909
commit a4f4c0d6f6
162 changed files with 689 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web-antd/src/views/bpm/processInstance/create/index.vue
View File

@@ -243,7 +243,7 @@ onMounted(() => {
<div class="flex items-end">
<InputSearch
v-model:value="searchName"
class="!w-50% mb-15px"
class="!w-50% mb-4"
placeholder="请输入流程名称检索"
allow-clear
@input="handleQuery"
@@ -311,7 +311,7 @@ onMounted(() => {
</Tabs.TabPane>
</Tabs>
</div>
<div v-else class="!py-200px text-center">
<div v-else class="!py-48 text-center">
<Space direction="vertical" size="large">
<span class="text-gray-500">没有找到搜索结果</span>
</Space>

18
apps/web-antd/src/views/bpm/processInstance/detail/index.vue
View File

@@ -253,14 +253,14 @@ onMounted(async () => {
}"
>
<template #title>
<span class="text-[#878c93]">编号：{{ id || '-' }}</span>
<span class="text-gray-500">编号：{{ id || '-' }}</span>
</template>
<div class="flex h-[100%] flex-col">
<div class="flex h-full flex-col">
<!-- 流程基本信息 -->
<div class="flex flex-col gap-2">
<div class="mb-10px h-40px flex items-center gap-5">
<div class="mb-5px text-[26px] font-bold">
<div class="mb-2.5 flex h-10 items-center gap-5">
<div class="mb-1 text-2xl font-bold">
{{ processInstance?.name }}
</div>
<DictTag
@@ -270,9 +270,9 @@ onMounted(async () => {
/>
</div>
<div class="mb-10px text-13px h-35px flex items-center gap-5">
<div class="mb-2.5 flex h-12 items-center gap-5 text-sm">
<div
class="flex items-center gap-2 rounded-3xl bg-gray-100 px-[10px] py-[4px] dark:bg-gray-600"
class="flex items-center gap-2 rounded-3xl bg-gray-100 px-2.5 py-1 dark:bg-gray-600"
>
<Avatar
:size="28"
@@ -285,11 +285,11 @@ onMounted(async () => {
>
{{ processInstance?.startUser?.nickname.substring(0, 1) }}
</Avatar>
<span class="text-12px">{{
<span class="text-sm">{{
processInstance?.startUser?.nickname
}}</span>
</div>
<div class="text-[#878c93]">
<div class="text-gray-500">
{{ formatDateTime(processInstance?.startTime) }} 提交
</div>
</div>
@@ -297,7 +297,7 @@ onMounted(async () => {
<component
v-if="processInstance?.status"
:is="auditIconsMap[processInstance?.status]"
class="absolute right-[20px] top-[10px] size-[150px]"
class="absolute right-5 top-2.5 size-36"
/>
</div>

57
apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
View File

@@ -700,15 +700,12 @@ defineExpose({ loadTodoTask });
"
>
<Button ghost type="primary" @click="openPopover('approve')">
<IconifyIcon icon="icon-park-outline:check" />
<IconifyIcon icon="lucide:check" />
{{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.APPROVE) }}
</Button>
<template #content>
<!-- 办理表单 -->
<div
class="flex flex-1 flex-col px-[20px] pt-[20px]"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -717,10 +714,7 @@ defineExpose({ loadTodoTask });
:rules="approveReasonRule"
label-width="100px"
>
<Card
v-if="runningTask?.formId > 0"
class="!-mt-[10px] mb-[15px]"
>
<Card v-if="runningTask?.formId > 0" class="!-mt-2.5 mb-3.5">
<template #title>
<span class="el-icon-picture-outline">
填写表单【{{ runningTask?.formName }}】
@@ -739,7 +733,7 @@ defineExpose({ loadTodoTask });
name="nextAssignees"
v-if="nextAssigneesActivityNode.length > 0"
>
<div class="-mb-[35px] -mt-[15px] ml-[10px]">
<div class="-mb-8 -mt-3.5 ml-2.5">
<ProcessInstanceTimeline
:activity-nodes="nextAssigneesActivityNode"
:show-status-icon="false"
@@ -759,7 +753,7 @@ defineExpose({ loadTodoTask });
<div class="mt-2">
<Image
style="float: left; width: 326px; height: 150px"
class="float-left h-40 w-80"
v-if="approveReasonForm.signPicUrl"
:src="approveReasonForm.signPicUrl"
/>
@@ -815,10 +809,7 @@ defineExpose({ loadTodoTask });
</Button>
<template #content>
<!-- 审批表单 -->
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -874,10 +865,7 @@ defineExpose({ loadTodoTask });
{{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.COPY) }}
</Button>
<template #content>
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -949,10 +937,7 @@ defineExpose({ loadTodoTask });
{{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.TRANSFER) }}
</Button>
<template #content>
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -1025,10 +1010,7 @@ defineExpose({ loadTodoTask });
{{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.DELEGATE) }}
</Button>
<template #content>
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -1101,10 +1083,7 @@ defineExpose({ loadTodoTask });
{{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.ADD_SIGN) }}
</Button>
<template #content>
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -1184,10 +1163,7 @@ defineExpose({ loadTodoTask });
<IconifyIcon :size="14" icon="icon-park-outline:minus" /> 减签
</Button>
<template #content>
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -1258,10 +1234,7 @@ defineExpose({ loadTodoTask });
{{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.RETURN) }}
</Button>
<template #content>
<div
class="pt-20px px-20px flex flex-1 flex-col"
v-loading="formLoading"
>
<div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
<Form
layout="vertical"
class="mb-auto"
@@ -1334,7 +1307,7 @@ defineExpose({ loadTodoTask });
</Button>
<template #content>
<div
class="pt-20px px-20px flex w-[400px] flex-1 flex-col"
class="flex w-96 flex-1 flex-col px-5 pt-5"
v-loading="formLoading"
>
<Form
@@ -1347,7 +1320,7 @@ defineExpose({ loadTodoTask });
>
<FormItem label="取消理由" name="cancelReason">
<Alert
class="text-12px mb-2"
class="mb-2 text-xs"
type="warning"
size="small"
show-icon
@@ -1389,7 +1362,7 @@ defineExpose({ loadTodoTask });
processDefinition?.formType === 10
"
>
<IconifyIcon :size="14" icon="icon-park-outline:refresh" /> 再次提交
<IconifyIcon :size="14" icon="lucide:refresh-cw" /> 再次提交
</Button>
</Space>
</div>

8
apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
View File

@@ -41,13 +41,13 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="h-[40%] w-[60%]">
<Modal class="h-2/5 w-3/5">
<div class="mb-2 flex justify-end">
<Space>
<Tooltip title="撤销上一步操作">
<Button @click="signature?.undo()">
<template #icon>
<IconifyIcon icon="lucide:undo" class="mb-[4px] size-[16px]" />
<IconifyIcon icon="lucide:undo" class="mb-1 size-4" />
</template>
撤销
</Button>
@@ -56,7 +56,7 @@ const [Modal, modalApi] = useVbenModal({
<Tooltip title="清空画布">
<Button @click="signature?.clear()">
<template #icon>
<IconifyIcon icon="lucide:trash" class="mb-[4px] size-[16px]" />
<IconifyIcon icon="lucide:trash" class="mb-1 size-4" />
</template>
<span>清除</span>
</Button>
@@ -65,7 +65,7 @@ const [Modal, modalApi] = useVbenModal({
</div>
<Vue3Signature
class="mx-auto border-[1px] border-solid border-gray-300"
class="mx-auto border border-solid border-gray-300"
ref="signature"
w="874px"
h="324px"

2
apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
View File

@@ -201,7 +201,7 @@ defineExpose({
class="ml-1"
>
<IconifyIcon icon="lucide:file-text" />
<span class="!ml-[2px] text-[12px]">查看表单</span>
<span class="!ml-0.5 text-xs">查看表单</span>
</Button>
</div>
</template>

63
apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
View File

@@ -217,7 +217,7 @@ function handleUserSelectCancel() {
<template>
<div>
<Timeline class="pt-20px">
<Timeline class="pt-5">
<!-- 遍历每个审批节点 -->
<Timeline.Item
v-for="(activity, index) in activityNodes"
@@ -227,17 +227,17 @@ function handleUserSelectCancel() {
<template #dot>
<div class="relative">
<div
class="position-absolute left--10px top--6px flex h-[32px] w-[32px] items-center justify-center rounded-full border border-solid border-[#dedede] bg-[#3f73f7] p-[6px]"
class="position-absolute left--2.5 top--1.5 flex h-8 w-8 items-center justify-center rounded-full border border-solid border-gray-200 bg-blue-500 p-1.5"
>
<IconifyIcon
:icon="getApprovalNodeTypeIcon(activity.nodeType)"
class="size-[24px] text-white"
class="size-6 text-white"
/>
</div>
<div
v-if="showStatusIcon"
class="absolute right-[-10px] top-[18px] flex size-[20px] items-center rounded-full border-[2px] border-solid border-white p-[2px]"
class="absolute right--2.5 top-4 flex size-5 items-center rounded-full border-2 border-solid border-white p-0.5"
:style="{
backgroundColor: getApprovalNodeColor(activity.status),
}"
@@ -261,7 +261,7 @@ function handleUserSelectCancel() {
<!-- 信息：时间 -->
<div
v-if="activity.status !== BpmTaskStatusEnum.NOT_START"
class="ml-auto mt-1 text-[13px] text-[#a5a5a5]"
class="ml-auto mt-1 text-sm text-gray-500"
>
{{ getApprovalNodeTime(activity) }}
</div>
@@ -294,10 +294,7 @@ function handleUserSelectCancel() {
"
>
<template #icon>
<IconifyIcon
icon="mdi:account-plus-outline"
class="size-[18px]"
/>
<IconifyIcon icon="lucide:user-plus" class="size-4" />
</template>
</Button>
</Tooltip>
@@ -305,19 +302,19 @@ function handleUserSelectCancel() {
<div
v-for="(user, userIndex) in customApproveUsers[activity.id]"
:key="user.id || userIndex"
class="relative flex h-[36px] items-center gap-2 rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
class="relative flex h-9 items-center gap-2 rounded-3xl bg-gray-100 pr-2 dark:bg-gray-600"
>
<Avatar
class="!m-[5px]"
class="!m-1"
:size="28"
v-if="user.avatar"
:src="user.avatar"
/>
<Avatar class="!m-[5px]" :size="28" v-else>
<Avatar class="!m-1" :size="28" v-else>
<span>{{ user.nickname.substring(0, 1) }}</span>
</Avatar>
<span class="text-[13px]">{{ user.nickname }}</span>
<span class="text-sm">{{ user.nickname }}</span>
</div>
</div>
@@ -326,7 +323,7 @@ function handleUserSelectCancel() {
<div
v-for="(task, idx) in activity.tasks"
:key="idx"
class="flex flex-col gap-2 pr-[8px]"
class="flex flex-col gap-2 pr-2"
>
<div
class="relative flex flex-wrap gap-2"
@@ -334,7 +331,7 @@ function handleUserSelectCancel() {
>
<!-- 信息：头像昵称 -->
<div
class="h-35px relative flex items-center rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
class="relative flex h-8 items-center rounded-3xl bg-gray-100 pr-2 dark:bg-gray-600"
>
<template
v-if="
@@ -342,12 +339,12 @@ function handleUserSelectCancel() {
"
>
<Avatar
class="!m-[5px]"
class="!m-1"
:size="28"
v-if="task.assigneeUser?.avatar"
:src="task.assigneeUser?.avatar"
/>
<Avatar class="!m-[5px]" :size="28" v-else>
<Avatar class="!m-1" :size="28" v-else>
{{ task.assigneeUser?.nickname.substring(0, 1) }}
</Avatar>
{{ task.assigneeUser?.nickname }}
@@ -358,12 +355,12 @@ function handleUserSelectCancel() {
"
>
<Avatar
class="!m-[5px]"
class="!m-1"
:size="28"
v-if="task.ownerUser?.avatar"
:src="task.ownerUser?.avatar"
/>
<Avatar class="!m-[5px]" :size="28" v-else>
<Avatar class="!m-1" :size="28" v-else>
{{ task.ownerUser?.nickname.substring(0, 1) }}
</Avatar>
{{ task.ownerUser?.nickname }}
@@ -374,16 +371,14 @@ function handleUserSelectCancel() {
v-if="
showStatusIcon && onlyStatusIconShow.includes(task.status)
"
class="absolute left-[24px] top-[20px] flex items-center rounded-full border-2 border-solid border-white p-[2px]"
class="absolute left-6 top-5 flex items-center rounded-full border-2 border-solid border-white p-1"
:style="{
backgroundColor: statusIconMap[task.status]?.color,
}"
>
<IconifyIcon
:icon="
statusIconMap[task.status]?.icon || 'mdi:clock-outline'
"
class="size-[10px] text-white"
:icon="statusIconMap[task.status]?.icon || 'lucide:clock'"
class="size-2 text-white"
:class="[statusIconMap[task.status]?.animation]"
/>
</div>
@@ -394,7 +389,7 @@ function handleUserSelectCancel() {
<teleport defer :to="`#activity-task-${activity.id}-${index}`">
<div
v-if="shouldShowApprovalReason(task, activity.nodeType)"
class="mt-1 w-full rounded-md bg-[#f8f8fa] p-2 text-[13px] text-[#a5a5a5]"
class="mt-1 w-full rounded-md bg-gray-100 p-2 text-sm text-gray-500"
>
审批意见：{{ task.reason }}
</div>
@@ -403,11 +398,11 @@ function handleUserSelectCancel() {
task.signPicUrl &&
activity.nodeType === BpmNodeTypeEnum.USER_TASK_NODE
"
class="mt-1 w-full rounded-md bg-[#f8f8fa] p-2 text-[13px] text-[#a5a5a5]"
class="mt-1 w-full rounded-md bg-gray-100 p-2 text-sm text-gray-500"
>
签名：
<Image
class="ml-[5px] h-[40px] w-[90px]"
class="ml-1 h-10 w-24"
:src="task.signPicUrl"
:preview="{ src: task.signPicUrl }"
/>
@@ -419,30 +414,30 @@ function handleUserSelectCancel() {
<div
v-for="(user, userIndex) in activity.candidateUsers"
:key="userIndex"
class="relative flex h-[35px] items-center rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
class="relative flex h-8 items-center rounded-3xl bg-gray-100 pr-2 dark:bg-gray-600"
>
<Avatar
class="!m-[5px]"
class="!m-1"
:size="28"
v-if="user.avatar"
:src="user.avatar"
/>
<Avatar class="!m-[5px]" :size="28" v-else>
<Avatar class="!m-1" :size="28" v-else>
{{ user.nickname.substring(0, 1) }}
</Avatar>
<span class="text-[13px]">
<span class="text-sm">
{{ user.nickname }}
</span>
<!-- 候选任务状态图标 -->
<div
v-if="showStatusIcon"
class="absolute left-[24px] top-[20px] flex items-center rounded-full border-2 border-solid border-white p-[1px]"
class="absolute left-6 top-5 flex items-center rounded-full border-2 border-solid border-white p-1"
:style="{ backgroundColor: statusIconMap['-1']?.color }"
>
<IconifyIcon
class="text-[11px] text-white"
:icon="statusIconMap['-1']?.icon || 'mdi:clock-outline'"
class="text-xs text-white"
:icon="statusIconMap['-1']?.icon || 'lucide:clock'"
/>
</div>
</div>