feat(projects): 工作台接口切换为真实数据

2026-06-12 19:49:17 +08:00
parent 0652a24c5e
commit 6896a86130
9 changed files with 1062 additions and 839 deletions
--- a/src/views/workbench/modules/workbench-todo-panel.vue
+++ b/src/views/workbench/modules/workbench-todo-panel.vue
@@ -1,16 +1,32 @@
 <script setup lang="ts">
-import { computed, markRaw, onMounted, ref, watch } from 'vue';
+import { type Component, computed, markRaw, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import type { RouteKey } from '@elegant-router/types';
+import { OBJECT_CONTEXT_QUERY_KEY } from '@/constants/object-context';
+import { RDMS_REQ_PRIORITY_DICT_CODE } from '@/constants/dict';
 import {
  fetchApproveOvertimeApplication,
+  fetchChangePersonalItemStatus,
+  fetchChangeProjectTaskStatus,
  fetchGetMonthlyReportApprovalPage,
+  fetchGetMyTaskPage,
  fetchGetOvertimeApplicationApprovalPage,
+  fetchGetPersonalItemDetail,
+  fetchGetPersonalItemPage,
  fetchGetProjectReportApprovalPage,
+  fetchGetProjectTask,
  fetchGetWeeklyReportApprovalPage,
  fetchRejectOvertimeApplication
 } from '@/service/api';
+import { useAuthStore } from '@/store/modules/auth';
 import { useRouterPush } from '@/hooks/common/router';
+import { useDict } from '@/hooks/business/dict';
+import type { WorklogChangedPayload } from '@/views/project/project/execution/shared';
+import TaskStatusActionDialog from '@/views/project/project/execution/modules/status-action-dialog.vue';
+import TaskWorklogDialog from '@/views/project/project/execution/modules/task-worklog-dialog.vue';
+import PersonalItemDetailDialog from '@/views/personal-center/my-item/modules/personal-item-detail-dialog.vue';
 import PersonalItemOperateDialog from '@/views/personal-center/my-item/modules/personal-item-operate-dialog.vue';
+import PersonalItemStatusActionDialog from '@/views/personal-center/my-item/modules/personal-item-status-action-dialog.vue';
 import OvertimeApplicationActionDialog from '@/views/personal-center/overtime-application/modules/overtime-application-action-dialog.vue';
 import OvertimeApplicationDetailDialog from '@/views/personal-center/overtime-application/modules/overtime-application-detail-dialog.vue';
 import WorkReportPrototypePageDialog from '@/views/personal-center/work-report/shared/components/prototype-page-dialog.vue';
@@ -30,10 +46,14 @@ import {
  isWorkbenchTodoOverdue,
  sortWorkbenchTodoItemsByPriority
 } from '../homepage';
-import { workbenchTodoMock } from '../mock';
 import { useWorkbenchRefresh } from '../composables/use-workbench-refresh';
 import WorkbenchModuleCard from './workbench-module-card.vue';
+import IconMdiCheckCircleOutline from '~icons/mdi/check-circle-outline';
+import IconMdiClipboardEditOutline from '~icons/mdi/clipboard-edit-outline';
+import IconMdiCloseCircleOutline from '~icons/mdi/close-circle-outline';
 import IconMdiEyeOutline from '~icons/mdi/eye-outline';
+import IconMdiPauseCircleOutline from '~icons/mdi/pause-circle-outline';
+import IconMdiPlayCircleOutline from '~icons/mdi/play-circle-outline';

 type SortKey = 'created' | 'priority' | 'deadline';
 type OvertimeApprovalActionType = 'approve' | 'reject';
@@ -51,9 +71,20 @@ defineEmits<{
  (e: 'hide'): void;
 }>();

+const router = useRouter();
 const { routerPushByKey } = useRouterPush();

-const { loading, refresh } = useWorkbenchRefresh();
+const authStore = useAuthStore();
+const currentUserId = computed(() => authStore.userInfo.userId || '');
+
+const { loading, refresh } = useWorkbenchRefresh(async () => {
+  await Promise.all([
+    loadMyTaskItems(),
+    loadPersonalTodoItems(),
+    loadOvertimeApprovalItems(),
+    loadWorkReportApprovalItems()
+  ]);
+});

 const PAGE_SIZE = 5;

@@ -95,20 +126,44 @@ const approvalBizTabs: Array<{ key: ApprovalBizType; label: string }> = [
  { key: 'overtime_application', label: '加班申请' }
 ];

-const allItems = computed(() => buildWorkbenchTodoItems(workbenchTodoMock));
+const myTaskItems = ref<WorkbenchTodoItem[]>([]);
+// 保留任务原始行，供操作图标按 availableActions 渲染并取 projectId / executionId 调状态变更接口
+const myTaskRows = ref<Api.Project.MyTaskItem[]>([]);
+const personalTodoItems = ref<WorkbenchTodoItem[]>([]);
+// 保留个人事项原始行，供操作图标（详情/填报/完成）按 availableActions 渲染并回传给弹层
+const personalItemRows = ref<Api.PersonalItem.PersonalItem[]>([]);
 const overtimeApprovalItems = ref<WorkbenchTodoItem[]>([]);
 const overtimeApprovalRows = ref<Api.OvertimeApplication.OvertimeApplication[]>([]);
 const workReportApprovalItems = ref<WorkbenchTodoItem[]>([]);
 const weeklyApprovalRows = ref<Api.WorkReport.Weekly.WeeklyReport[]>([]);
 const monthlyApprovalRows = ref<Api.WorkReport.Monthly.MonthlyReport[]>([]);
 const projectApprovalRows = ref<Api.WorkReport.Project.ProjectReport[]>([]);
-const mergedItems = computed(() => {
-  const mockItems = allItems.value.filter(item => item.category !== 'approval');
+// 工单 tab 等工单业务上线，当前为空态
+const mergedItems = computed(() => [
+  ...myTaskItems.value,
+  ...personalTodoItems.value,
+  ...overtimeApprovalItems.value,
+  ...workReportApprovalItems.value
+]);

-  return [...mockItems, ...overtimeApprovalItems.value, ...workReportApprovalItems.value];
-});
-
-const addDialogVisible = ref(false);
+// 个人事项操作弹层：详情用 view 模式、新增用 add 模式，共用同一实例
+const personalOperateVisible = ref(false);
+const personalOperateType = ref<'add' | 'view'>('add');
+const personalOperateRow = ref<Api.PersonalItem.PersonalItem | null>(null);
+// 个人事项填报：复用详情弹层的 worklog tab
+const personalDetailVisible = ref(false);
+const personalDetailRow = ref<Api.PersonalItem.PersonalItem | null>(null);
+// 个人事项完成：复用状态动作弹层收集原因 + 二次确认
+const personalStatusVisible = ref(false);
+const personalStatusRow = ref<Api.PersonalItem.PersonalItem | null>(null);
+const personalStatusAction = ref<Api.PersonalItem.PersonalItemLifecycleAction | null>(null);
+// 任务生命周期动作：复用任务工作区的状态动作弹层收集原因
+const taskStatusVisible = ref(false);
+const taskStatusRow = ref<Api.Project.MyTaskItem | null>(null);
+const taskStatusAction = ref<Api.Project.LifecycleAction<Api.Project.ProjectTaskActionCode> | null>(null);
+// 任务填报工时：复用任务工作区的工时弹层；弹层需要完整任务详情，点击时按需拉取
+const taskWorklogVisible = ref(false);
+const taskWorklogTask = ref<Api.Project.ProjectTask | null>(null);
 const overtimeDetailVisible = ref(false);
 const overtimeActionVisible = ref(false);
 const overtimeActionSubmitting = ref(false);
@@ -122,13 +177,228 @@ const OVERTIME_APPROVAL_ACTION_ICONS = {
  detail: markRaw(IconMdiEyeOutline)
 };

-function handleOpenAdd() {
-  addDialogVisible.value = true;
+const PERSONAL_ACTION_ICONS = {
+  detail: markRaw(IconMdiEyeOutline),
+  worklog: markRaw(IconMdiClipboardEditOutline),
+  complete: markRaw(IconMdiCheckCircleOutline)
+};
+
+// auto_start 是系统自动动作，接口不返回；无图标的未知动作不渲染按钮
+const TASK_ACTION_ICONS: Partial<Record<Api.Project.ProjectTaskActionCode, Component>> = {
+  pause: markRaw(IconMdiPauseCircleOutline),
+  resume: markRaw(IconMdiPlayCircleOutline),
+  complete: markRaw(IconMdiCheckCircleOutline),
+  cancel: markRaw(IconMdiCloseCircleOutline)
+};
+
+function getTaskActionButtonType(code: Api.Project.ProjectTaskActionCode) {
+  if (code === 'complete') return 'success' as const;
+  if (code === 'cancel') return 'danger' as const;
+  return 'primary' as const;
 }

-function handleAddSubmitted() {
+function getTodoProgress(item: WorkbenchTodoItem) {
+  if (typeof item.progressRate !== 'number' || !Number.isFinite(item.progressRate)) {
+    return 0;
+  }
+
+  return Math.min(100, Math.max(0, Math.round(item.progressRate)));
+}
+
+function shouldShowTodoProgress(item: WorkbenchTodoItem) {
+  return (item.category === 'task' || item.category === 'personal') && typeof item.progressRate === 'number';
+}
+
+function handleOpenAdd() {
+  personalOperateType.value = 'add';
+  personalOperateRow.value = null;
+  personalOperateVisible.value = true;
+}
+
+async function handleAddSubmitted() {
  activeTab.value = 'personal';
  activeDeadlineFilter.value = null;
+  await loadPersonalTodoItems();
+}
+
+function findPersonalItemRow(item: WorkbenchTodoItem) {
+  return personalItemRows.value.find(row => `personal-${row.id}` === item.id) || null;
+}
+
+function getPersonalCompleteAction(row: Api.PersonalItem.PersonalItem) {
+  return row.availableActions?.find(action => action.actionCode === 'complete') || null;
+}
+
+// 仅当个人事项当前可完成（availableActions 含 complete）时才渲染完成图标
+function canCompletePersonalItem(item: WorkbenchTodoItem) {
+  const row = findPersonalItemRow(item);
+  return Boolean(row && getPersonalCompleteAction(row));
+}
+
+// 详情：复用个人事项操作弹层的 view 只读模式
+function openPersonalDetail(item: WorkbenchTodoItem) {
+  const row = findPersonalItemRow(item);
+  if (!row) return;
+
+  personalOperateType.value = 'view';
+  personalOperateRow.value = row;
+  personalOperateVisible.value = true;
+}
+
+// 填报：拉最新详情后打开详情弹层的 worklog tab
+async function openPersonalWorklog(item: WorkbenchTodoItem) {
+  const row = findPersonalItemRow(item);
+  if (!row) return;
+
+  const { error, data } = await fetchGetPersonalItemDetail(row.id);
+  personalDetailRow.value = error || !data ? row : data;
+  personalDetailVisible.value = true;
+}
+
+// 完成：走状态动作弹层（二次确认 + 按 needReason 收集原因）
+function openPersonalComplete(item: WorkbenchTodoItem) {
+  const row = findPersonalItemRow(item);
+  if (!row) return;
+
+  const completeAction = getPersonalCompleteAction(row);
+  if (!completeAction) return;
+
+  personalStatusRow.value = row;
+  personalStatusAction.value = completeAction;
+  personalStatusVisible.value = true;
+}
+
+async function handlePersonalStatusSubmit(reason: string | null) {
+  if (!personalStatusRow.value || !personalStatusAction.value) return;
+
+  const { error } = await fetchChangePersonalItemStatus(personalStatusRow.value.id, {
+    actionCode: personalStatusAction.value.actionCode,
+    reason
+  });
+
+  if (error) return;
+
+  personalStatusVisible.value = false;
+  window.$message?.success(`${personalStatusAction.value.actionName}成功`);
+  await loadPersonalTodoItems();
+}
+
+async function handlePersonalWorklogChanged() {
+  await loadPersonalTodoItems();
+}
+
+function findMyTaskRow(item: WorkbenchTodoItem) {
+  return myTaskRows.value.find(row => `task-${row.id}` === item.id) || null;
+}
+
+// 状态变更接口挂在执行路径下，未挂执行的任务不渲染动作按钮
+function getTaskActions(item: WorkbenchTodoItem) {
+  const row = findMyTaskRow(item);
+  if (!row?.executionId) return [];
+  return row.availableActions.filter(action => Boolean(TASK_ACTION_ICONS[action.actionCode]));
+}
+
+// 填报工时同样依赖执行路径（工时接口挂在 project/execution/task 下）
+function canReportTaskWorklog(item: WorkbenchTodoItem) {
+  return Boolean(findMyTaskRow(item)?.executionId);
+}
+
+// 填报：工时弹层需要完整任务详情（负责人/状态/日期），按需拉一次详情再打开
+async function openTaskWorklog(item: WorkbenchTodoItem) {
+  const row = findMyTaskRow(item);
+  if (!row?.executionId) return;
+
+  const { error, data } = await fetchGetProjectTask(row.projectId, row.executionId, row.id);
+  if (error || !data) return;
+
+  taskWorklogTask.value = data;
+  taskWorklogVisible.value = true;
+}
+
+// 填报会联动任务进度/状态（如 auto_start），变更后刷新任务列表
+async function handleTaskWorklogChanged(payload: WorklogChangedPayload) {
+  await loadMyTaskItems();
+
+  // 与任务工作区联动一致：进度填到 100 且我是任务负责人时提示完成（仅单任务，不做级联）
+  if (payload.mode === 'delete' || payload.progressRate !== 100) return;
+
+  const task = taskWorklogTask.value;
+  if (!task || task.id !== payload.taskId || task.ownerId !== currentUserId.value) return;
+
+  // 以刷新后的行为准：后端按进度/负责人口径返回了 complete 才提示
+  const row = myTaskRows.value.find(item => item.id === payload.taskId);
+  const completeAction = row?.availableActions.find(action => action.actionCode === 'complete');
+  if (!row || !completeAction) return;
+
+  taskStatusRow.value = row;
+  taskStatusAction.value = completeAction;
+
+  try {
+    await window.$messageBox?.confirm('任务进度已达 100%，是否完成当前任务？', '完成确认', {
+      confirmButtonText: '完成任务',
+      cancelButtonText: '仅保留工时',
+      type: 'info'
+    });
+  } catch {
+    return;
+  }
+
+  await submitTaskStatusChange(null);
+}
+
+const taskStatusActionTitle = computed(() =>
+  taskStatusAction.value ? `任务状态变更：${taskStatusAction.value.actionName}` : '任务状态变更'
+);
+
+async function handleTaskAction(
+  item: WorkbenchTodoItem,
+  action: Api.Project.LifecycleAction<Api.Project.ProjectTaskActionCode>
+) {
+  const row = findMyTaskRow(item);
+  if (!row?.executionId) return;
+
+  taskStatusRow.value = row;
+  taskStatusAction.value = action;
+
+  // 完成动作：二次确认后直接提交（与任务工作区同口径；有未完成子任务时后端会拒绝，按业务错误提示）
+  if (action.actionCode === 'complete') {
+    try {
+      await window.$messageBox?.confirm(`确定要完成任务“${row.taskTitle}”吗？`, '完成确认', {
+        confirmButtonText: '完成任务',
+        cancelButtonText: '取消',
+        type: 'warning'
+      });
+    } catch {
+      return;
+    }
+    await submitTaskStatusChange(null);
+    return;
+  }
+
+  // 其他非必填原因的动作（暂停/恢复）直接提交，不弹原因弹层
+  if (!action.needReason) {
+    await submitTaskStatusChange(null);
+    return;
+  }
+
+  taskStatusVisible.value = true;
+}
+
+async function submitTaskStatusChange(reason: string | null) {
+  const row = taskStatusRow.value;
+  const action = taskStatusAction.value;
+  if (!row?.executionId || !action) return;
+
+  const { error } = await fetchChangeProjectTaskStatus(row.projectId, row.executionId, {
+    taskId: row.id,
+    data: { actionCode: action.actionCode, reason }
+  });
+
+  if (error) return;
+
+  taskStatusVisible.value = false;
+  window.$message?.success(`${action.actionName}成功`);
+  await loadMyTaskItems();
 }

 const tabCounts = computed(() => {
@@ -253,6 +523,15 @@ function handleClickItem(item: WorkbenchTodoItem) {
    return;
  }

+  // 任务条目：带项目对象上下文跳进该项目的任务导航（执行池页）
+  if (item.category === 'task' && item.projectId) {
+    router.push({
+      path: '/project/project/execution',
+      query: { [OBJECT_CONTEXT_QUERY_KEY]: item.projectId }
+    });
+    return;
+  }
+
  if (!item.routeKey) return;
  routerPushByKey(item.routeKey as RouteKey);
 }
@@ -336,6 +615,71 @@ async function handleWorkReportSubmitted() {
  await loadWorkReportApprovalItems();
 }

+// 优先级角标用字典 label 原样回显（rdms_req_priority：P0~P3），不翻译成高/中/低
+const { getLabel: getPriorityLabel } = useDict(RDMS_REQ_PRIORITY_DICT_CODE);
+
+// 任务优先级字典 value（"0" P0 ~ "3" P3，数字越小越高）映射待办优先级（仅用于排序与高亮权重）
+function mapTaskTodoPriority(priority: string) {
+  if (priority === '0') return 'high' as const;
+  if (priority === '1') return 'mid' as const;
+  return 'low' as const;
+}
+
+// 我的任务：跨项目单接口聚合（负责/协办并集、只返回非终态，过滤排序、进度与可执行动作均由后端完成）
+async function loadMyTaskItems() {
+  const { error, data } = await fetchGetMyTaskPage({ pageNo: 1, pageSize: -1 });
+
+  if (error || !data) {
+    myTaskRows.value = [];
+    myTaskItems.value = [];
+    return;
+  }
+
+  myTaskRows.value = data.list;
+  myTaskItems.value = buildWorkbenchTodoItems(
+    data.list.map(task => ({
+      id: `task-${task.id}`,
+      category: 'task' as const,
+      title: task.taskTitle,
+      createdTime: task.createTime,
+      deadline: task.plannedEndDate,
+      source: task.projectName,
+      progressRate: task.progressRate,
+      priority: mapTaskTodoPriority(task.priority),
+      priorityLabel: getPriorityLabel(task.priority) || task.priority,
+      projectId: task.projectId
+    }))
+  );
+}
+
+// 待办口径：未到终态的个人事项（pending / active / paused），terminal 态（completed / cancelled）不进待办
+const PERSONAL_TODO_STATUSES: Api.PersonalItem.PersonalItemStatusCode[] = ['pending', 'active', 'paused'];
+
+async function loadPersonalTodoItems() {
+  const { error, data } = await fetchGetPersonalItemPage({ pageNo: 1, pageSize: 100 });
+
+  if (error || !data) {
+    personalItemRows.value = [];
+    personalTodoItems.value = [];
+    return;
+  }
+
+  const rows = data.list.filter(item => PERSONAL_TODO_STATUSES.includes(item.statusCode));
+  personalItemRows.value = rows;
+  personalTodoItems.value = buildWorkbenchTodoItems(
+    rows.map(item => ({
+      id: `personal-${item.id}`,
+      category: 'personal',
+      title: item.taskTitle,
+      createdTime: item.createTime,
+      deadline: item.plannedEndDate,
+      source: '个人事项',
+      progressRate: item.progressRate,
+      routeKey: 'personal-center_my-item'
+    }))
+  );
+}
+
 async function loadOvertimeApprovalItems() {
  const { error, data } = await fetchGetOvertimeApplicationApprovalPage({
    pageNo: 1,
@@ -443,7 +787,12 @@ function getDeadlineToneClass(item: WorkbenchTodoItem) {
 }

 onMounted(async () => {
-  await Promise.all([loadOvertimeApprovalItems(), loadWorkReportApprovalItems()]);
+  await Promise.all([
+    loadMyTaskItems(),
+    loadPersonalTodoItems(),
+    loadOvertimeApprovalItems(),
+    loadWorkReportApprovalItems()
+  ]);
 });
 </script>

@@ -534,25 +883,51 @@ onMounted(async () => {

    <div class="workbench-todo__content">
      <div v-if="pagedItems.length" class="workbench-todo__list">
-        <article
-          v-for="item in pagedItems"
-          :key="item.id"
-          class="workbench-todo__item"
-          :class="{ 'workbench-todo__item--clickable': Boolean(item.routeKey || item.approvalBizType) }"
-          @click="handleClickItem(item)"
-        >
+        <article v-for="item in pagedItems" :key="item.id" class="workbench-todo__item">
          <div class="workbench-todo__leading">
            <span class="workbench-todo__category" :class="`workbench-todo__category--${item.categoryTone}`">
              {{ item.categoryLabel }}
            </span>
-            <span v-if="item.priority === 'high'" class="workbench-todo__priority">高</span>
+            <span
+              v-if="item.priorityLabel"
+              class="workbench-todo__priority"
+              :class="{ 'workbench-todo__priority--high': item.priority === 'high' }"
+            >
+              {{ item.priorityLabel }}
+            </span>
          </div>

          <div class="workbench-todo__body">
-            <h4 class="workbench-todo__item-title">{{ item.title }}</h4>
+            <h4 class="workbench-todo__item-title">
+              <span
+                class="workbench-todo__item-title-text"
+                :class="{
+                  'workbench-todo__item-title-text--clickable': Boolean(
+                    item.routeKey || item.approvalBizType || item.projectId
+                  )
+                }"
+                @click="handleClickItem(item)"
+              >
+                {{ item.title }}
+              </span>
+            </h4>
            <div class="workbench-todo__meta">
              <span class="workbench-todo__source">{{ item.source }}</span>
            </div>
+            <div
+              v-if="shouldShowTodoProgress(item)"
+              class="workbench-todo__progress"
+              :aria-label="`进度 ${getTodoProgress(item)}%`"
+            >
+              <span class="workbench-todo__progress-label">进度：</span>
+              <ElProgress
+                class="workbench-todo__progress-bar"
+                :percentage="getTodoProgress(item)"
+                :stroke-width="6"
+                :show-text="false"
+              />
+              <span class="workbench-todo__progress-text">{{ getTodoProgress(item) }}%</span>
+            </div>
          </div>

          <div class="workbench-todo__trailing">
@@ -574,6 +949,44 @@ onMounted(async () => {
                </ElButton>
              </ElTooltip>
            </div>
+            <div
+              v-else-if="item.category === 'task' && canReportTaskWorklog(item)"
+              class="workbench-todo__actions"
+              @click.stop
+            >
+              <ElTooltip content="填报工时">
+                <ElButton link type="primary" class="workbench-todo__action-btn" @click="openTaskWorklog(item)">
+                  <component :is="PERSONAL_ACTION_ICONS.worklog" class="text-15px" />
+                </ElButton>
+              </ElTooltip>
+              <ElTooltip v-for="action in getTaskActions(item)" :key="action.actionCode" :content="action.actionName">
+                <ElButton
+                  link
+                  :type="getTaskActionButtonType(action.actionCode)"
+                  class="workbench-todo__action-btn"
+                  @click="handleTaskAction(item, action)"
+                >
+                  <component :is="TASK_ACTION_ICONS[action.actionCode]" class="text-15px" />
+                </ElButton>
+              </ElTooltip>
+            </div>
+            <div v-else-if="item.category === 'personal'" class="workbench-todo__actions" @click.stop>
+              <ElTooltip content="详情">
+                <ElButton link type="primary" class="workbench-todo__action-btn" @click="openPersonalDetail(item)">
+                  <component :is="PERSONAL_ACTION_ICONS.detail" class="text-15px" />
+                </ElButton>
+              </ElTooltip>
+              <ElTooltip content="填报工时">
+                <ElButton link type="primary" class="workbench-todo__action-btn" @click="openPersonalWorklog(item)">
+                  <component :is="PERSONAL_ACTION_ICONS.worklog" class="text-15px" />
+                </ElButton>
+              </ElTooltip>
+              <ElTooltip v-if="canCompletePersonalItem(item)" content="完成">
+                <ElButton link type="success" class="workbench-todo__action-btn" @click="openPersonalComplete(item)">
+                  <component :is="PERSONAL_ACTION_ICONS.complete" class="text-15px" />
+                </ElButton>
+              </ElTooltip>
+            </div>
            <span class="workbench-todo__deadline" :class="getDeadlineToneClass(item)">
              {{ item.deadlineLabel }}
            </span>
@@ -597,13 +1010,43 @@ onMounted(async () => {

    <!-- append-to-body：脱离 grid item 的 transform 容器，弹窗才能正常全屏居中 -->
    <PersonalItemOperateDialog
-      v-model:visible="addDialogVisible"
-      operate-type="add"
-      :row-data="null"
+      v-model:visible="personalOperateVisible"
+      :operate-type="personalOperateType"
+      :row-data="personalOperateRow"
      append-to-body
      @submitted="handleAddSubmitted"
    />

+    <PersonalItemDetailDialog
+      v-model:visible="personalDetailVisible"
+      :row-data="personalDetailRow"
+      default-tab="worklog"
+      append-to-body
+      @changed="handlePersonalWorklogChanged"
+    />
+
+    <PersonalItemStatusActionDialog
+      v-model:visible="personalStatusVisible"
+      :action="personalStatusAction"
+      append-to-body
+      @submit="handlePersonalStatusSubmit"
+    />
+
+    <TaskStatusActionDialog
+      v-model:visible="taskStatusVisible"
+      :title="taskStatusActionTitle"
+      :action="taskStatusAction"
+      append-to-body
+      @submit="submitTaskStatusChange"
+    />
+
+    <TaskWorklogDialog
+      v-model:visible="taskWorklogVisible"
+      :task="taskWorklogTask"
+      append-to-body
+      @changed="handleTaskWorklogChanged"
+    />
+
    <OvertimeApplicationDetailDialog
      v-model:visible="overtimeDetailVisible"
      :row-data="currentOvertimeApplication"
@@ -826,7 +1269,7 @@ onMounted(async () => {

 .workbench-todo__item {
  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
@@ -838,19 +1281,12 @@ onMounted(async () => {
    background-color 160ms ease;
 }

-.workbench-todo__item--clickable {
-  cursor: pointer;
-}
-
-.workbench-todo__item--clickable:hover {
-  border-color: rgb(14 116 144 / 60%);
-  background-color: rgb(240 253 250 / 84%);
-}
-
 .workbench-todo__leading {
  display: flex;
  align-items: center;
  gap: 8px;
+  width: 72px;
+  min-width: 0;
 }

 .workbench-todo__category {
@@ -891,20 +1327,26 @@ onMounted(async () => {
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  width: 20px;
+  min-width: 20px;
  height: 20px;
+  padding: 0 4px;
  border-radius: 6px;
-  background-color: rgb(254 226 226 / 96%);
-  color: rgb(220 38 38 / 96%);
+  background-color: rgb(241 245 249 / 96%);
+  color: rgb(71 85 105 / 96%);
  font-size: 11px;
  font-weight: 800;
 }

+.workbench-todo__priority--high {
+  background-color: rgb(254 226 226 / 96%);
+  color: rgb(220 38 38 / 96%);
+}
+
 .workbench-todo__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
-  gap: 4px;
+  gap: 5px;
 }

 .workbench-todo__item-title {
@@ -918,10 +1360,21 @@ onMounted(async () => {
  text-overflow: ellipsis;
 }

+.workbench-todo__item-title-text--clickable {
+  cursor: pointer;
+  transition: color 160ms ease;
+}
+
+.workbench-todo__item-title-text--clickable:hover {
+  color: rgb(14 116 144 / 96%);
+  text-decoration: underline;
+}
+
 .workbench-todo__meta {
  display: flex;
  align-items: center;
  gap: 8px;
+  flex-wrap: wrap;
 }

 .workbench-todo__source {
@@ -933,6 +1386,41 @@ onMounted(async () => {
  text-overflow: ellipsis;
 }

+.workbench-todo__progress {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: min(100%, 260px);
+  margin-top: 1px;
+}
+
+.workbench-todo__progress-label {
+  flex: 0 0 auto;
+  color: rgb(100 116 139 / 92%);
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.workbench-todo__progress-bar {
+  flex: 1 1 auto;
+  min-width: 96px;
+}
+
+.workbench-todo__progress-text {
+  flex: 0 0 34px;
+  color: rgb(71 85 105 / 94%);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.workbench-todo__progress :deep(.el-progress-bar__outer) {
+  background-color: rgb(226 232 240 / 96%);
+}
+
 .workbench-todo__trailing {
  display: flex;
  align-items: center;
@@ -992,7 +1480,7 @@ onMounted(async () => {

@media (width <= 600px) {
  .workbench-todo__item {
-    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-columns: 72px minmax(0, 1fr);
  }

  .workbench-todo__trailing {