chore: 优化样式

apps/web-antd/src/views/workflow/components/approval-card.vue

@@ -4,10 +4,12 @@ import type { TaskInfo } from '#/api/workflow/task/model';
 import { VbenAvatar } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
 
-import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+import { Descriptions, DescriptionsItem, Tooltip } from 'ant-design-vue';
 
 import { renderDict } from '#/utils/render';
 
+import { getDiffTimeString } from './helper';
+
 interface Props extends TaskInfo {
   active: boolean;
 }
@@ -42,10 +44,10 @@ function handleClick() {
           :is="renderDict(info.flowStatus, DictEnum.WF_BUSINESS_STATUS)"
         />
       </template>
-      <DescriptionsItem label="当前任务名称">
+      <DescriptionsItem label="当前任务">
         <div class="font-bold">{{ info.nodeName }}</div>
       </DescriptionsItem>
-      <DescriptionsItem label="开始时间">
+      <DescriptionsItem label="提交时间">
         {{ info.createTime }}
       </DescriptionsItem>
       <!-- <DescriptionsItem label="更新时间">
@@ -63,7 +65,14 @@ function handleClick() {
           {{ info.createByName }}
         </span>
       </div>
-      <div class="text-nowrap opacity-50">{{ info.updateTime }}更新</div>
+      <div class="text-nowrap opacity-50">
+        <Tooltip placement="top" :title="`更新时间: ${info.updateTime}`">
+          <div class="flex items-center gap-1">
+            <span class="icon-[mdi--clock-outline] size-[16px]"></span>
+            {{ getDiffTimeString(info.updateTime) }}前更新
+          </div>
+        </Tooltip>
+      </div>
     </div>
   </div>
 </template>

apps/web-antd/src/views/workflow/components/approval-panel.vue

@@ -396,7 +396,7 @@ async function handleCopy(text: string) {
           <div class="flex items-center opacity-50">
             <span>XXXX有限公司</span>
             <Divider type="vertical" />
-            <span>提交于: {{ task.createTime }}</span>
+            <span>提交时间: {{ task.createTime }}</span>
           </div>
         </div>
       </div>

apps/web-antd/src/views/workflow/components/helper.tsx

@@ -1,6 +1,9 @@
 import { defineComponent, h, ref } from 'vue';
 
 import { Modal } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
 
 import ApprovalContent from './approval-content.vue';
 
@@ -36,3 +39,22 @@ export function approveWithReasonModal(props: ApproveWithReasonModalProps) {
     onOk: () => onOk(content.value),
   });
 }
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+/**
+ * 计算相差的时间
+ * @param dateTime 时间字符串
+ * @returns 相差的时间
+ */
+export function getDiffTimeString(dateTime: string) {
+  // 计算相差秒数
+  const diffSeconds = dayjs().diff(dayjs(dateTime), 'second');
+  /**
+   * 转为时间显示(x月 x天)
+   * https://dayjs.fenxianglu.cn/category/duration.html#%E4%BA%BA%E6%80%A7%E5%8C%96
+   *
+   */
+  const diffText = dayjs.duration(diffSeconds, 'seconds').humanize();
+  return diffText;
+}