From 3988eaf9107c00a45a3a5c3b06eced6a56e58d2c Mon Sep 17 00:00:00 2001
From: hongawen <83944980@qq.com>
Date: Mon, 25 May 2026 14:30:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor(workbench):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=BE=85=E5=8A=9E=E9=9D=A2=E6=9D=BF=E5=8A=9F=E8=83=BD=E6=8F=90?=
 =?UTF-8?q?=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 替换原有时间桶过滤为分类标签页和截止时间筛选器
- 添加优先级排序功能，支持任务类别内按优先级排序
- 重构待办数据结构，新增创建时间和优先级字段
- 移除高优先级标记，统一使用优先级枚举值
- 添加个人事项创建对话框和相关操作功能
- 更新模拟数据以匹配新的数据结构和功能需求
- 优化列表排序逻辑，按创建时间升序排列，无截止时间排最后
- 为各类别待办项添加逾期状态标识和计数统计
- 实现分页加载，每页显示5条待办记录
- 更新样式类名以匹配新的逾期判断逻辑

refactor(project): 优化项目执行模块提升性能和可维护性

- 移除执行项点击切换功能相关的事件和方法
- 删除不再使用的select-execution事件发射器
- 移除执行标签的悬停效果和鼠标指针样式
- 重构任务表格视图，将日期格式化函数名称标准化
- 在跨执行模式下也显示进度列，统一界面布局
- 更新最近更新列宽度并调整日期格式显示
- 将默认页面大小从10增加到20以提高加载效率

feat(list): 统一日期格式化功能简化代码维护

- 将日期时间格式化函数重命名为更准确的date格式化
- 在产品列表和项目列表中统一使用新的日期格式化函数
- 移除秒数显示，仅保留年月日格式提高可读性

refactor(todo): 重构待办事项数据模型和过滤逻辑

- 重新定义待办事项分类类型，移除mention添加personal
- 新增主标签、截止时间筛选器和优先级类型定义
- 添加创建时间字段用于排序和显示
- 实现基于分类、截止时间和优先级的过滤函数
- 创建优先级权重映射用于排序算法
- 更新待办项构建函数以支持新的排序逻辑
- 修改逾期判断逻辑以适应新的数据结构
- 移除原有的高优先级字段，统一使用优先级枚举
- 添加优先级排序功能支持升序降序切换
- 重构排序算法，优先按创建时间，其次按截止时间排序

refactor(task): 清理任务模块中已废弃的功能

- 移除通过ID选择执行项的相关函数和事件处理器
- 删除任务卡片和表格中的执行项点击切换功能
- 更新任务工作区组件以移除废弃的事件监听
- 调整任务表格视图中进度条的样式和状态显示

refactor(components): 项目列表中添加进度条可视化组件

- 引入Element Plus进度条组件用于项目进度展示
- 在项目列表中添加进度列并实现进度条渲染
- 配置进度条样式包括内嵌文字、成功状态和边框圆角
- 调整进度列宽度以适应进度条显示需求

refactor(widgets): 整理工作台模块配置和清理冗余组件

- 从工作台模块注册中移除已废弃的myTicket组件
- 更新模块注释说明，明确myTicket已废弃的原因
- 删除不再使用的workbench-my-ticket.vue组件文件
- 更新模块总数注释从16个调整为15个
---
 src/views/product/list/index.vue              |   6 +-
 src/views/project/list/index.vue              |  25 +-
 src/views/project/project/execution/index.vue |  26 --
 .../execution/modules/task-board-view.vue     |   9 +-
 .../execution/modules/task-table-view.vue     |  25 +-
 .../execution/modules/task-workspace.vue      |   9 +-
 .../composables/use-workbench-modules.ts      |  15 +-
 src/views/workbench/homepage.ts               |  75 ++-
 src/views/workbench/index.vue                 |   6 +-
 src/views/workbench/mock.ts                   | 132 ++++--
 .../workbench/modules/workbench-my-ticket.vue | 147 ------
 .../modules/workbench-todo-panel.vue          | 432 +++++++++++++++---
 12 files changed, 566 insertions(+), 341 deletions(-)
 delete mode 100644 src/views/workbench/modules/workbench-my-ticket.vue

diff --git a/src/views/product/list/index.vue b/src/views/product/list/index.vue
index e12b33b..d93ab2a 100644
--- a/src/views/product/list/index.vue
+++ b/src/views/product/list/index.vue
@@ -62,12 +62,12 @@ function sortManagerOptions(list: Api.SystemManage.UserSimple[]) {
   return list.slice().sort((left, right) => left.nickname.localeCompare(right.nickname, 'zh-CN'));
 }
 
-function formatDateTime(value?: string | null) {
+function formatDate(value?: string | null) {
   if (!value) {
     return '--';
   }
 
-  return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
+  return dayjs(value).format('YYYY-MM-DD');
 }
 
 const statusNavMetas: StatusNavMeta[] = [
@@ -210,7 +210,7 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
       label: '最近更新',
       width: 170,
       align: 'center',
-      formatter: row => formatDateTime(row.updateTime)
+      formatter: row => formatDate(row.updateTime)
     }
   ],
   immediate: false
diff --git a/src/views/project/list/index.vue b/src/views/project/list/index.vue
index b418bb2..a7000da 100644
--- a/src/views/project/list/index.vue
+++ b/src/views/project/list/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { computed, onMounted, reactive, ref } from 'vue';
-import { ElButton, ElTag } from 'element-plus';
+import { ElButton, ElProgress, ElTag } from 'element-plus';
 import dayjs from 'dayjs';
 import { RDMS_OBJECT_DIRECTION_DICT_CODE, RDMS_PROJECT_TYPE_DICT_CODE } from '@/constants/dict';
 import { OBJECT_CONTEXT_QUERY_KEY } from '@/constants/object-context';
@@ -55,12 +55,12 @@ function sortManagerOptions(list: Api.SystemManage.UserSimple[]) {
   return list.slice().sort((left, right) => left.nickname.localeCompare(right.nickname, 'zh-CN'));
 }
 
-function formatDateTime(value?: string | null) {
+function formatDate(value?: string | null) {
   if (!value) {
     return '--';
   }
 
-  return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
+  return dayjs(value).format('YYYY-MM-DD');
 }
 
 const searchParams = reactive(getInitSearchParams());
@@ -170,9 +170,20 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
     {
       prop: 'progressRate',
       label: '进度',
-      width: 100,
-      align: 'center',
-      formatter: () => '--'
+      width: 160,
+      formatter: row => {
+        const percentage = row.progressRate ?? 0;
+        return (
+          <div style="padding: 0 8px;">
+            <ElProgress
+              percentage={percentage}
+              status={percentage >= 100 ? 'success' : undefined}
+              stroke-width={18}
+              text-inside
+            />
+          </div>
+        );
+      }
     },
     {
       prop: 'statusCode',
@@ -188,7 +199,7 @@ const { columns, columnChecks, data, loading, getDataByPage, mobilePagination }
       label: '最近更新',
       width: 170,
       align: 'center',
-      formatter: row => formatDateTime(row.updateTime)
+      formatter: row => formatDate(row.updateTime)
     }
   ],
   immediate: false
diff --git a/src/views/project/project/execution/index.vue b/src/views/project/project/execution/index.vue
index a8ded3f..c0268cc 100644
--- a/src/views/project/project/execution/index.vue
+++ b/src/views/project/project/execution/index.vue
@@ -87,7 +87,6 @@ const executionStatusBoard = ref<Api.Project.StatusBoard | null>(null);
  * 项目下"全部执行简明列表"。一次性拉取(pageSize=-1),用于:
  * 1. task-search 的「所属执行」下拉(executionOptionsForFilter)
  * 2. 左侧 chip 选择某状态时,前端 filter 出"该状态下的执行 ids"传给右侧任务列表
- * 3. 任务行 pill 点击切换执行时的兜底查找(handleSelectExecutionById)
  */
 const allProjectExecutions = ref<Api.Project.ProjectExecution[]>([]);
 
@@ -305,30 +304,6 @@ function handleSelectExecution(row: Api.Project.ProjectExecution) {
   switchToMine();
 }
 
-async function handleSelectExecutionById(executionId: string) {
-  // 左栏当前分页 → 项目全部执行简明列表 → 接口详情,三层兜底
-  const inListMatch = data.value.find(item => item.id === executionId);
-  if (inListMatch) {
-    selectedExecution.value = inListMatch;
-    switchToMine();
-    return;
-  }
-  const allListMatch = allProjectExecutions.value.find(item => item.id === executionId);
-  if (allListMatch) {
-    selectedExecution.value = allListMatch;
-    switchToMine();
-    return;
-  }
-  if (!projectId.value) return;
-  const { error, data: detail } = await fetchGetProjectExecution(projectId.value, executionId);
-  if (error || !detail) {
-    window.$message?.info('该执行不在当前项目执行池中');
-    return;
-  }
-  selectedExecution.value = detail;
-  switchToMine();
-}
-
 function handleSelectPerspective(type: 'my' | 'all') {
   // 只切身份维度,保留范围(具体执行 / 状态 chip)
   if (type === 'my') switchToMine();
@@ -590,7 +565,6 @@ watch(
         :all-count="allTasksCount"
         :show-all="showAllPerspective"
         @execution-changed="handleExecutionChangedByTask"
-        @select-execution="handleSelectExecutionById"
         @select-perspective="handleSelectPerspective"
       />
     </div>
diff --git a/src/views/project/project/execution/modules/task-board-view.vue b/src/views/project/project/execution/modules/task-board-view.vue
index 41a5ebc..ab304c2 100644
--- a/src/views/project/project/execution/modules/task-board-view.vue
+++ b/src/views/project/project/execution/modules/task-board-view.vue
@@ -38,7 +38,6 @@ interface Emits {
   (e: 'edit', row: Api.Project.ProjectTask): void;
   (e: 'report', row: Api.Project.ProjectTask): void;
   (e: 'delete', row: Api.Project.ProjectTask): void;
-  (e: 'select-execution', executionId: string): void;
   (
     e: 'status-action',
     row: Api.Project.ProjectTask,
@@ -339,8 +338,7 @@ onBeforeUnmount(() => {
                     type="info"
                     effect="plain"
                     class="task-board-card-item__exec-tag"
-                    :title="task.executionName || '切换到该执行'"
-                    @click.stop="emit('select-execution', task.executionId)"
+                    :title="task.executionName || ''"
                   >
                     {{ task.executionName || '未命名执行' }}
                   </ElTag>
@@ -545,14 +543,9 @@ onBeforeUnmount(() => {
 }
 
 .task-board-card-item__exec-tag {
-  cursor: pointer;
   max-width: 100%;
 }
 
-.task-board-card-item__exec-tag:hover {
-  opacity: 0.85;
-}
-
 .task-board-card-item__top {
   display: flex;
   align-items: flex-start;
diff --git a/src/views/project/project/execution/modules/task-table-view.vue b/src/views/project/project/execution/modules/task-table-view.vue
index 35c1f54..8574493 100644
--- a/src/views/project/project/execution/modules/task-table-view.vue
+++ b/src/views/project/project/execution/modules/task-table-view.vue
@@ -4,7 +4,7 @@ import type { PaginationProps } from 'element-plus';
 import { RDMS_REQ_PRIORITY_DICT_CODE } from '@/constants/dict';
 import { useAuthStore } from '@/store/modules/auth';
 import DictTag from '@/components/custom/dict-tag.vue';
-import { formatDateRange, formatDateTime, getTaskStatusName, getTaskStatusTagType } from '../shared';
+import { formatDate, formatDateRange, getTaskStatusName, getTaskStatusTagType } from '../shared';
 import { useTaskActions } from '../composables/use-task-actions';
 
 defineOptions({ name: 'ProjectExecutionTaskTableView' });
@@ -15,6 +15,7 @@ interface Props {
   pagination: Partial<PaginationProps & Record<string, any>>;
   /**
    * 跨执行模式：显示「所属执行 pill」、「角色」列；隐藏「父任务」、「实际周期」、「最近更新」列。
+   * 「进度」列在两种模式下都显示。
    * 由父组件根据视角类型传入：跨执行视角(my/all) = true；单执行视角 = false。
    */
   crossExecutionMode?: boolean;
@@ -25,7 +26,6 @@ interface Emits {
   (e: 'edit', row: Api.Project.ProjectTask): void;
   (e: 'report', row: Api.Project.ProjectTask): void;
   (e: 'delete', row: Api.Project.ProjectTask): void;
-  (e: 'select-execution', executionId: string): void;
   (
     e: 'status-action',
     row: Api.Project.ProjectTask,
@@ -113,8 +113,7 @@ function handleSizeChange(pageSize: number) {
               type="info"
               effect="plain"
               class="task-table-exec-tag"
-              :title="row.executionName || '切换到该执行'"
-              @click.stop="emit('select-execution', row.executionId)"
+              :title="row.executionName || ''"
             >
               {{ row.executionName || '未命名执行' }}
             </ElTag>
@@ -145,10 +144,15 @@ function handleSizeChange(pageSize: number) {
         <ElTableColumn v-if="!crossExecutionMode" label="父任务" min-width="140" show-overflow-tooltip>
           <template #default="{ row }">{{ getParentTaskLabel(row.parentTaskId) }}</template>
         </ElTableColumn>
-        <ElTableColumn v-if="!crossExecutionMode" label="进度" width="160">
+        <ElTableColumn label="进度" width="160">
           <template #default="{ row }">
             <div class="task-table-progress">
-              <ElProgress :percentage="row.progressRate" :stroke-width="18" text-inside />
+              <ElProgress
+                :percentage="row.progressRate"
+                :status="row.progressRate >= 100 ? 'success' : undefined"
+                :stroke-width="18"
+                text-inside
+              />
             </div>
           </template>
         </ElTableColumn>
@@ -161,8 +165,8 @@ function handleSizeChange(pageSize: number) {
         <ElTableColumn v-if="!crossExecutionMode" label="实际周期" min-width="190" show-overflow-tooltip>
           <template #default="{ row }">{{ formatDateRange(row.actualStartDate, row.actualEndDate) }}</template>
         </ElTableColumn>
-        <ElTableColumn v-if="!crossExecutionMode" label="最近更新" width="170">
-          <template #default="{ row }">{{ formatDateTime(row.updateTime) }}</template>
+        <ElTableColumn v-if="!crossExecutionMode" label="最近更新" width="130">
+          <template #default="{ row }">{{ formatDate(row.updateTime) }}</template>
         </ElTableColumn>
         <ElTableColumn label="操作" width="210" fixed="right" align="center" class-name="task-operate-column">
           <template #default="{ row }">
@@ -206,14 +210,9 @@ function handleSizeChange(pageSize: number) {
 }
 
 .task-table-exec-tag {
-  cursor: pointer;
   max-width: 100%;
 }
 
-.task-table-exec-tag:hover {
-  opacity: 0.85;
-}
-
 .task-table-role-mute {
   color: rgb(148 163 184);
   font-size: 12px;
diff --git a/src/views/project/project/execution/modules/task-workspace.vue b/src/views/project/project/execution/modules/task-workspace.vue
index cc4edae..c1a0ae3 100644
--- a/src/views/project/project/execution/modules/task-workspace.vue
+++ b/src/views/project/project/execution/modules/task-workspace.vue
@@ -77,7 +77,6 @@ interface Props {
 
 interface Emits {
   (e: 'executionChanged'): void;
-  (e: 'selectExecution', executionId: string): void;
   (e: 'selectPerspective', type: 'my' | 'all'): void;
 }
 
@@ -165,7 +164,7 @@ const quickFilterChips = computed<QuickFilterChip[]>(() => [
 // 「我参与的」视角下展示 chip,数字跟着 scope(全部/状态/锚定执行)变
 const showQuickFilters = computed(() => props.viewContext.type === 'my');
 
-const PAGE_SIZE_DEFAULT = 10;
+const PAGE_SIZE_DEFAULT = 20;
 const pageNo = ref(1);
 const pageSize = ref(PAGE_SIZE_DEFAULT);
 
@@ -418,10 +417,6 @@ async function refreshTableData(resetToFirstPage = false) {
   await (resetToFirstPage ? getDataByPage(1) : getData());
 }
 
-function handleSelectExecutionFromRow(targetExecutionId: string) {
-  emit('selectExecution', targetExecutionId);
-}
-
 async function handleCreate() {
   if (!props.execution) {
     window.$message?.warning('请先选择执行项');
@@ -882,7 +877,6 @@ defineExpose({
       @report="handleReport"
       @status-action="handleStatusAction"
       @delete="openDeleteTaskDialog"
-      @select-execution="handleSelectExecutionFromRow"
     />
 
     <TaskBoardView
@@ -897,7 +891,6 @@ defineExpose({
       @report="handleReport"
       @status-action="handleStatusAction"
       @delete="openDeleteTaskDialog"
-      @select-execution="handleSelectExecutionFromRow"
     />
 
     <TaskOperateDialog
diff --git a/src/views/workbench/composables/use-workbench-modules.ts b/src/views/workbench/composables/use-workbench-modules.ts
index bc92826..088170b 100644
--- a/src/views/workbench/composables/use-workbench-modules.ts
+++ b/src/views/workbench/composables/use-workbench-modules.ts
@@ -12,8 +12,7 @@ export type WorkbenchModuleKey =
   // 重构（key 沿用，组件内容重写）
   | 'myTask' //              A2 · 我的今日（原"我的任务"）
   | 'teamTodo' //            C11 · 团队任务看板（原"团队待办汇总"）
-  // 新增 16 个（蓝图 2026-05-22）
-  | 'myTicket' //            A3 · 我负责的工单（工单待开发，先 mock）
+  // 新增 15 个（蓝图 2026-05-22，原 A3 myTicket 已废弃：与"我的待办 → 工单"重复且工单业务未上线）
   | 'mentions' //            A4 · @我的提及
   | 'approval' //            A5 · 待审批（管理者）
   | 'worklogReminder' //     A6 · 工时填报提醒（动作型）
@@ -130,17 +129,7 @@ const registry: WorkbenchModuleMeta[] = [
     defaultOrder: 30
   },
 
-  // === 新增 16 个：默认全部 hidden，进 widget 库待用户挑（避免一上来挤爆工作台） ===
-  {
-    key: 'myTicket',
-    component: placeholder,
-    displayName: '我负责的工单',
-    icon: 'mdi:ticket-confirmation-outline',
-    category: 'personal',
-    defaultVisible: false,
-    defaultColumn: 'left',
-    defaultOrder: 20
-  },
+  // === 新增 15 个：默认全部 hidden，进 widget 库待用户挑（避免一上来挤爆工作台） ===
   {
     key: 'mentions',
     component: placeholder,
diff --git a/src/views/workbench/homepage.ts b/src/views/workbench/homepage.ts
index c0ee244..67429b8 100644
--- a/src/views/workbench/homepage.ts
+++ b/src/views/workbench/homepage.ts
@@ -2,9 +2,13 @@ import dayjs from 'dayjs';
 
 export type WorkbenchTrend = 'up' | 'down' | 'flat';
 
-export type WorkbenchTodoCategory = 'review' | 'task' | 'ticket' | 'mention';
+export type WorkbenchTodoCategory = 'task' | 'ticket' | 'personal' | 'review';
 
-export type WorkbenchTodoTimeBucket = 'all' | 'today' | 'week' | 'overdue';
+export type WorkbenchTodoMainTab = 'all' | WorkbenchTodoCategory;
+
+export type WorkbenchTodoDeadlineFilter = 'overdue' | 'today' | 'week' | null;
+
+export type WorkbenchTodoPriority = 'high' | 'mid' | 'low';
 
 export type WorkbenchProjectStatus = 'active' | 'preview' | 'paused';
 
@@ -72,14 +76,16 @@ export interface WorkbenchTodoItemSource {
   id: string;
   category: WorkbenchTodoCategory;
   title: string;
+  /** 创建时间，ISO 字符串。列表默认按这个升序 */
+  createdTime: string;
   /** 截止时间，ISO 字符串 */
   deadline: string | null;
   /** 来源（提交人/项目名/工单号） */
   source: string;
+  /** 优先级，用于前端排序与高亮 */
+  priority?: WorkbenchTodoPriority;
   /** 是否逾期 */
   overdue?: boolean;
-  /** 是否高优先级 */
-  highPriority?: boolean;
   /** 跳转路由 key（可选，未配则不跳转） */
   routeKey?: string;
 }
@@ -140,10 +146,16 @@ const todoCategoryMeta: Record<
   WorkbenchTodoCategory,
   { label: string; tone: WorkbenchTodoItem['categoryTone']; icon: string }
 > = {
-  review: { label: '需求评审', tone: 'sky', icon: 'mdi:file-search-outline' },
   task: { label: '任务', tone: 'emerald', icon: 'mdi:checkbox-marked-circle-outline' },
   ticket: { label: '工单', tone: 'amber', icon: 'mdi:ticket-confirmation-outline' },
-  mention: { label: '@ 提及', tone: 'violet', icon: 'mdi:at' }
+  personal: { label: '个人事项', tone: 'violet', icon: 'mdi:notebook-edit-outline' },
+  review: { label: '待评审', tone: 'sky', icon: 'mdi:file-search-outline' }
+};
+
+const todoPriorityWeight: Record<WorkbenchTodoPriority, number> = {
+  high: 0,
+  mid: 1,
+  low: 2
 };
 
 const activityToneMap: Record<WorkbenchActivityItemSource['targetKind'], WorkbenchActivityItem['tone']> = {
@@ -282,9 +294,12 @@ export function buildWorkbenchKpiCards(source: WorkbenchKpiSource): WorkbenchKpi
 export function buildWorkbenchTodoItems(source: readonly WorkbenchTodoItemSource[]): WorkbenchTodoItem[] {
   return [...source]
     .sort((left, right) => {
-      const leftValue = left.deadline ? dayjs(left.deadline).valueOf() : Number.POSITIVE_INFINITY;
-      const rightValue = right.deadline ? dayjs(right.deadline).valueOf() : Number.POSITIVE_INFINITY;
-      return leftValue - rightValue;
+      const leftCreated = dayjs(left.createdTime).valueOf();
+      const rightCreated = dayjs(right.createdTime).valueOf();
+      if (leftCreated !== rightCreated) return leftCreated - rightCreated;
+      const leftDeadline = left.deadline ? dayjs(left.deadline).valueOf() : Number.POSITIVE_INFINITY;
+      const rightDeadline = right.deadline ? dayjs(right.deadline).valueOf() : Number.POSITIVE_INFINITY;
+      return leftDeadline - rightDeadline;
     })
     .map(item => {
       const meta = todoCategoryMeta[item.category];
@@ -298,12 +313,42 @@ export function buildWorkbenchTodoItems(source: readonly WorkbenchTodoItemSource
     });
 }
 
-export function filterWorkbenchTodoItems(items: readonly WorkbenchTodoItem[], bucket: WorkbenchTodoTimeBucket) {
-  if (bucket === 'all') return [...items];
-  if (bucket === 'overdue') return items.filter(item => item.remainingDays !== null && item.remainingDays < 0);
-  if (bucket === 'today') return items.filter(item => item.remainingDays === 0);
-  // bucket === 'week'
-  return items.filter(item => item.remainingDays !== null && item.remainingDays >= 0 && item.remainingDays <= 7);
+export function filterWorkbenchTodoItemsByCategory(items: readonly WorkbenchTodoItem[], tab: WorkbenchTodoMainTab) {
+  if (tab === 'all') return [...items];
+  return items.filter(item => item.category === tab);
+}
+
+export function filterWorkbenchTodoItemsByDeadline(
+  items: readonly WorkbenchTodoItem[],
+  filter: WorkbenchTodoDeadlineFilter
+) {
+  if (!filter) return [...items];
+  if (filter === 'overdue') return items.filter(item => isOverdue(item));
+  if (filter === 'today') return items.filter(item => item.remainingDays === 0);
+  // filter === 'week'：含今日，含逾期一起暴露给用户处理
+  return items.filter(item => item.remainingDays !== null && item.remainingDays <= 7);
+}
+
+export function isWorkbenchTodoOverdue(item: WorkbenchTodoItem) {
+  return isOverdue(item);
+}
+
+function isOverdue(item: WorkbenchTodoItem) {
+  if (item.overdue) return true;
+  return item.remainingDays !== null && item.remainingDays < 0;
+}
+
+export function sortWorkbenchTodoItemsByPriority(
+  items: readonly WorkbenchTodoItem[],
+  direction: 'asc' | 'desc' = 'desc'
+) {
+  const factor = direction === 'desc' ? 1 : -1;
+  return [...items].sort((left, right) => {
+    const leftWeight = todoPriorityWeight[left.priority ?? 'low'];
+    const rightWeight = todoPriorityWeight[right.priority ?? 'low'];
+    if (leftWeight !== rightWeight) return (leftWeight - rightWeight) * factor;
+    return dayjs(left.createdTime).valueOf() - dayjs(right.createdTime).valueOf();
+  });
 }
 
 export function buildWorkbenchActivityItems(source: readonly WorkbenchActivityItemSource[]): WorkbenchActivityItem[] {
diff --git a/src/views/workbench/index.vue b/src/views/workbench/index.vue
index e296062..fa1e89c 100644
--- a/src/views/workbench/index.vue
+++ b/src/views/workbench/index.vue
@@ -23,8 +23,7 @@ import WorkbenchShortcut from './modules/workbench-shortcut.vue';
 import WorkbenchProjectHealth from './modules/workbench-project-health.vue';
 import WorkbenchTeamTodo from './modules/workbench-team-todo.vue';
 import WorkbenchFavorite from './modules/workbench-favorite.vue';
-// 新增 16 个（蓝图 2026-05-22）
-import WorkbenchMyTicket from './modules/workbench-my-ticket.vue';
+// 新增 15 个（蓝图 2026-05-22，原 A3 myTicket 已废弃）
 import WorkbenchMentions from './modules/workbench-mentions.vue';
 import WorkbenchApproval from './modules/workbench-approval.vue';
 import WorkbenchWorklogReminder from './modules/workbench-worklog-reminder.vue';
@@ -53,8 +52,7 @@ registerModuleComponent('shortcut', WorkbenchShortcut);
 registerModuleComponent('projectHealth', WorkbenchProjectHealth);
 registerModuleComponent('teamTodo', WorkbenchTeamTodo);
 registerModuleComponent('favorite', WorkbenchFavorite);
-// 新增 16 个
-registerModuleComponent('myTicket', WorkbenchMyTicket);
+// 新增 15 个
 registerModuleComponent('mentions', WorkbenchMentions);
 registerModuleComponent('approval', WorkbenchApproval);
 registerModuleComponent('worklogReminder', WorkbenchWorklogReminder);
diff --git a/src/views/workbench/mock.ts b/src/views/workbench/mock.ts
index baab013..dce3372 100644
--- a/src/views/workbench/mock.ts
+++ b/src/views/workbench/mock.ts
@@ -35,70 +35,124 @@ export const workbenchKpiMock = {
 export const workbenchTodoMock = [
   {
     id: 'todo-1',
-    category: 'review',
-    title: '订单导出 V2 需求评审',
-    deadline: iso(now.add(2, 'day').hour(18).minute(0)),
-    source: '张三 · 收银台 V3',
-    highPriority: true,
-    routeKey: 'product_list'
-  },
-  {
-    id: 'todo-2',
     category: 'task',
-    title: '支付回调接口联调',
-    deadline: iso(now.add(1, 'day').hour(17).minute(30)),
+    title: '支付回调接口联调遗留问题处理',
+    createdTime: iso(now.subtract(7, 'day').hour(9).minute(20)),
+    deadline: iso(now.subtract(1, 'day').hour(17).minute(30)),
     source: '收银台 V3 · 后端联调',
+    priority: 'high',
+    overdue: true,
     routeKey: 'project_list'
   },
   {
-    id: 'todo-3',
+    id: 'todo-2',
     category: 'ticket',
-    title: '工单 #1024 等待我处理',
-    deadline: iso(now.hour(20).minute(0)),
-    source: '王五 · 客户反馈',
+    title: '工单 #1018 用户登录异常',
+    createdTime: iso(now.subtract(6, 'day').hour(11).minute(0)),
+    deadline: iso(now.subtract(2, 'day').hour(10).minute(0)),
+    source: '客户支持 · 紧急',
+    priority: 'mid',
+    overdue: true,
     routeKey: 'ticket'
   },
   {
-    id: 'todo-4',
-    category: 'mention',
-    title: '需求「会员等级」中 @ 了你',
-    deadline: null,
-    source: '李四 · 会员中心',
+    id: 'todo-3',
+    category: 'review',
+    title: '订单导出 V2 需求评审',
+    createdTime: iso(now.subtract(5, 'day').hour(14).minute(40)),
+    deadline: iso(now.add(3, 'day').hour(18).minute(0)),
+    source: '需求 · 收银台 V3',
+    priority: 'high',
     routeKey: 'product_list'
   },
+  {
+    id: 'todo-4',
+    category: 'personal',
+    title: '提交昨日工时与本周计划',
+    createdTime: iso(now.subtract(4, 'day').hour(8).minute(30)),
+    deadline: iso(now.hour(18).minute(0)),
+    source: '个人事项 · 工时',
+    priority: 'mid',
+    routeKey: 'personal-center_my-item'
+  },
   {
     id: 'todo-5',
     category: 'task',
-    title: '订单中心结算文档评审',
-    deadline: iso(now.add(4, 'day').hour(15).minute(0)),
-    source: '订单中心 · 文档',
+    title: '会员等级提示文案最终校对',
+    createdTime: iso(now.subtract(3, 'day').hour(10).minute(10)),
+    deadline: iso(now.hour(20).minute(0)),
+    source: '会员中心 · 文案',
+    priority: 'high',
     routeKey: 'project_list'
   },
   {
     id: 'todo-6',
-    category: 'review',
-    title: 'API 返回结构调整评审',
-    deadline: iso(now.subtract(1, 'day').hour(18).minute(0)),
-    source: '赵六 · 收银台 V3',
-    overdue: true,
-    highPriority: true,
-    routeKey: 'product_list'
+    category: 'ticket',
+    title: '工单 #1024 客户反馈待处理',
+    createdTime: iso(now.subtract(3, 'day').hour(15).minute(0)),
+    deadline: iso(now.add(2, 'day').hour(17).minute(0)),
+    source: '王五 · 客户反馈',
+    priority: 'mid',
+    routeKey: 'ticket'
   },
   {
     id: 'todo-7',
-    category: 'task',
-    title: '会员等级提示文案校对',
-    deadline: iso(now.add(3, 'day').hour(11).minute(0)),
-    source: '会员中心 · 文案',
-    routeKey: 'project_list'
+    category: 'personal',
+    title: '复盘上周交付遗留并归档',
+    createdTime: iso(now.subtract(2, 'day').hour(9).minute(0)),
+    deadline: iso(now.add(4, 'day').hour(18).minute(0)),
+    source: '个人事项 · 复盘',
+    priority: 'low',
+    routeKey: 'personal-center_my-item'
   },
   {
     id: 'todo-8',
+    category: 'task',
+    title: '订单中心结算文档评审',
+    createdTime: iso(now.subtract(2, 'day').hour(13).minute(20)),
+    deadline: iso(now.add(5, 'day').hour(15).minute(0)),
+    source: '订单中心 · 文档',
+    priority: 'mid',
+    routeKey: 'project_list'
+  },
+  {
+    id: 'todo-9',
+    category: 'review',
+    title: 'API 返回结构调整评审',
+    createdTime: iso(now.subtract(1, 'day').hour(17).minute(0)),
+    deadline: iso(now.add(12, 'day').hour(18).minute(0)),
+    source: '需求 · 收银台 V3',
+    priority: 'mid',
+    routeKey: 'product_list'
+  },
+  {
+    id: 'todo-10',
+    category: 'personal',
+    title: '安排下周外出培训行程',
+    createdTime: iso(now.subtract(1, 'day').hour(19).minute(40)),
+    deadline: iso(now.add(10, 'day').hour(12).minute(0)),
+    source: '个人事项 · 行程',
+    priority: 'low',
+    routeKey: 'personal-center_my-item'
+  },
+  {
+    id: 'todo-11',
+    category: 'task',
+    title: '会员中心首页骨架屏改造',
+    createdTime: iso(now.subtract(20, 'hour')),
+    deadline: iso(now.add(12, 'day').hour(18).minute(0)),
+    source: '会员中心 · 前端',
+    priority: 'low',
+    routeKey: 'project_list'
+  },
+  {
+    id: 'todo-12',
     category: 'ticket',
-    title: '工单 #1018 用户登录异常',
-    deadline: iso(now.add(1, 'day').hour(10).minute(0)),
-    source: '客户支持 · 紧急',
-    highPriority: true,
+    title: '工单 #1031 提示信息文案优化',
+    createdTime: iso(now.subtract(8, 'hour')),
+    deadline: iso(now.add(14, 'day').hour(17).minute(0)),
+    source: '客户支持 · 普通',
+    priority: 'low',
     routeKey: 'ticket'
   }
 ] satisfies WorkbenchTodoItemSource[];
diff --git a/src/views/workbench/modules/workbench-my-ticket.vue b/src/views/workbench/modules/workbench-my-ticket.vue
deleted file mode 100644
index a8910d6..0000000
--- a/src/views/workbench/modules/workbench-my-ticket.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<script setup lang="ts">
-import WorkbenchModuleCard from './workbench-module-card.vue';
-
-defineOptions({ name: 'WorkbenchMyTicket' });
-
-interface Props {
-  editing?: boolean;
-  collapsed?: boolean;
-}
-withDefaults(defineProps<Props>(), { editing: false, collapsed: false });
-defineEmits<{ (e: 'hide'): void; (e: 'toggle-collapse'): void }>();
-
-type Tone = 'rose' | 'amber' | 'slate';
-
-interface TicketRow {
-  id: string;
-  title: string;
-  product: string;
-  priorityLabel: string;
-  priorityTone: Tone;
-  slaLabel: string;
-  slaTone: Tone;
-}
-
-const rows: TicketRow[] = [
-  {
-    id: 't1',
-    title: '商户后台登录异常',
-    product: '商户后台',
-    priorityLabel: '高',
-    priorityTone: 'rose',
-    slaLabel: '超时 2h',
-    slaTone: 'rose'
-  },
-  {
-    id: 't2',
-    title: '报表导出失败',
-    product: '数据中心',
-    priorityLabel: '中',
-    priorityTone: 'amber',
-    slaLabel: '剩 4h',
-    slaTone: 'amber'
-  },
-  {
-    id: 't3',
-    title: '移动端推送延迟',
-    product: '用户中心',
-    priorityLabel: '低',
-    priorityTone: 'slate',
-    slaLabel: '剩 2 天',
-    slaTone: 'slate'
-  }
-];
-</script>
-
-<template>
-  <WorkbenchModuleCard
-    title="我负责的工单"
-    icon="mdi:ticket-confirmation-outline"
-    :badge-count="rows.length"
-    :editing="editing"
-    :collapsed="collapsed"
-    @hide="$emit('hide')"
-    @toggle-collapse="$emit('toggle-collapse')"
-  >
-    <ElAlert type="warning" :closable="false" class="pending-hint">
-      工单业务暂未上线，当前为 mock 数据；正式接口落地后接通。
-    </ElAlert>
-    <ul class="ticket-list">
-      <li v-for="row in rows" :key="row.id" class="ticket-item">
-        <span class="ticket-priority" :class="`tone-${row.priorityTone}`">{{ row.priorityLabel }}</span>
-        <div class="ticket-body">
-          <div class="ticket-title">{{ row.title }}</div>
-          <div class="ticket-meta">{{ row.product }}</div>
-        </div>
-        <span class="ticket-sla" :class="`tone-${row.slaTone}`">{{ row.slaLabel }}</span>
-      </li>
-    </ul>
-  </WorkbenchModuleCard>
-</template>
-
-<style scoped>
-.pending-hint {
-  margin-bottom: 10px;
-}
-.ticket-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.ticket-item {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  background: var(--el-fill-color-blank);
-}
-.ticket-priority {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 26px;
-  height: 22px;
-  padding: 0 6px;
-  border-radius: 6px;
-  font-size: 11px;
-  font-weight: 700;
-}
-.ticket-body {
-  min-width: 0;
-}
-.ticket-title {
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.ticket-meta {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  margin-top: 2px;
-}
-.ticket-sla {
-  font-size: 12px;
-  font-weight: 600;
-  padding: 2px 8px;
-  border-radius: 999px;
-}
-.tone-rose {
-  background-color: rgb(255 228 230 / 96%);
-  color: rgb(190 18 60 / 96%);
-}
-.tone-amber {
-  background-color: rgb(254 243 199 / 96%);
-  color: rgb(180 83 9 / 96%);
-}
-.tone-slate {
-  background-color: rgb(241 245 249 / 96%);
-  color: rgb(71 85 105 / 94%);
-}
-</style>
diff --git a/src/views/workbench/modules/workbench-todo-panel.vue b/src/views/workbench/modules/workbench-todo-panel.vue
index a512b22..641af6e 100644
--- a/src/views/workbench/modules/workbench-todo-panel.vue
+++ b/src/views/workbench/modules/workbench-todo-panel.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type { RouteKey } from '@elegant-router/types';
 import { useRouterPush } from '@/hooks/common/router';
+import PersonalItemOperateDialog from '@/views/personal-center/my-item/modules/personal-item-operate-dialog.vue';
 import {
+  type WorkbenchTodoDeadlineFilter,
   type WorkbenchTodoItem,
-  type WorkbenchTodoTimeBucket,
+  type WorkbenchTodoMainTab,
   buildWorkbenchTodoItems,
-  filterWorkbenchTodoItems
+  filterWorkbenchTodoItemsByCategory,
+  filterWorkbenchTodoItemsByDeadline,
+  isWorkbenchTodoOverdue,
+  sortWorkbenchTodoItemsByPriority
 } from '../homepage';
 import { workbenchTodoMock } from '../mock';
 import WorkbenchModuleCard from './workbench-module-card.vue';
 
+type SortKey = 'created' | 'priority' | 'deadline';
+
 defineOptions({ name: 'WorkbenchTodoPanel' });
 
 interface Props {
@@ -27,25 +34,129 @@ defineEmits<{
 
 const { routerPushByKey } = useRouterPush();
 
-const activeBucket = ref<WorkbenchTodoTimeBucket>('all');
+const PAGE_SIZE = 5;
 
-const buckets: Array<{ key: WorkbenchTodoTimeBucket; label: string }> = [
+const activeTab = ref<WorkbenchTodoMainTab>('all');
+const activeDeadlineFilter = ref<WorkbenchTodoDeadlineFilter>(null);
+const activeSort = ref<SortKey>('deadline');
+const currentPage = ref(1);
+
+const sortOptions = computed<Array<{ key: SortKey; label: string }>>(() => {
+  const base: Array<{ key: SortKey; label: string }> = [
+    { key: 'deadline', label: '截止时间' },
+    { key: 'created', label: '创建时间' }
+  ];
+  if (activeTab.value === 'task') {
+    base.push({ key: 'priority', label: '优先级' });
+  }
+  return base;
+});
+
+const mainTabs: Array<{ key: WorkbenchTodoMainTab; label: string }> = [
   { key: 'all', label: '全部' },
-  { key: 'today', label: '今日' },
-  { key: 'week', label: '本周' },
-  { key: 'overdue', label: '逾期' }
+  { key: 'task', label: '任务' },
+  { key: 'ticket', label: '工单' },
+  { key: 'personal', label: '个人事项' },
+  { key: 'review', label: '待评审' }
 ];
 
-const items = computed(() => buildWorkbenchTodoItems(workbenchTodoMock));
+const deadlineFilters: Array<{ key: Exclude<WorkbenchTodoDeadlineFilter, null>; label: string }> = [
+  { key: 'overdue', label: '已逾期' },
+  { key: 'today', label: '今日到期' },
+  { key: 'week', label: '本周到期' }
+];
 
-const bucketCounts = computed(() => ({
-  all: items.value.length,
-  today: filterWorkbenchTodoItems(items.value, 'today').length,
-  week: filterWorkbenchTodoItems(items.value, 'week').length,
-  overdue: filterWorkbenchTodoItems(items.value, 'overdue').length
-}));
+const allItems = computed(() => buildWorkbenchTodoItems(workbenchTodoMock));
 
-const filteredItems = computed(() => filterWorkbenchTodoItems(items.value, activeBucket.value));
+const addDialogVisible = ref(false);
+
+function handleOpenAdd() {
+  addDialogVisible.value = true;
+}
+
+function handleAddSubmitted() {
+  activeTab.value = 'personal';
+  activeDeadlineFilter.value = null;
+}
+
+const tabCounts = computed(() => {
+  const counts: Record<WorkbenchTodoMainTab, number> = {
+    all: allItems.value.length,
+    task: 0,
+    ticket: 0,
+    personal: 0,
+    review: 0
+  };
+  allItems.value.forEach(item => {
+    counts[item.category] += 1;
+  });
+  return counts;
+});
+
+const tabOverdueCount = computed(() => {
+  const map: Record<WorkbenchTodoMainTab, number> = {
+    all: 0,
+    task: 0,
+    ticket: 0,
+    personal: 0,
+    review: 0
+  };
+  allItems.value.forEach(item => {
+    if (!isWorkbenchTodoOverdue(item)) return;
+    map.all += 1;
+    map[item.category] += 1;
+  });
+  return map;
+});
+
+const itemsInTab = computed(() => filterWorkbenchTodoItemsByCategory(allItems.value, activeTab.value));
+
+const filteredItems = computed(() => filterWorkbenchTodoItemsByDeadline(itemsInTab.value, activeDeadlineFilter.value));
+
+const sortedItems = computed(() => {
+  const base = filteredItems.value;
+  if (activeSort.value === 'priority') {
+    return sortWorkbenchTodoItemsByPriority(base, 'desc');
+  }
+  if (activeSort.value === 'deadline') {
+    return [...base].sort((left, right) => {
+      const leftValue = left.remainingDays === null ? Number.POSITIVE_INFINITY : left.remainingDays;
+      const rightValue = right.remainingDays === null ? Number.POSITIVE_INFINITY : right.remainingDays;
+      return leftValue - rightValue;
+    });
+  }
+  return base;
+});
+
+const currentSortLabel = computed(
+  () => sortOptions.value.find(option => option.key === activeSort.value)?.label ?? '排序'
+);
+
+const pagedItems = computed(() => {
+  const start = (currentPage.value - 1) * PAGE_SIZE;
+  return sortedItems.value.slice(start, start + PAGE_SIZE);
+});
+
+watch([activeTab, activeDeadlineFilter, activeSort], () => {
+  currentPage.value = 1;
+});
+
+function handleSelectTab(key: WorkbenchTodoMainTab) {
+  if (activeTab.value === key) return;
+  activeTab.value = key;
+  activeDeadlineFilter.value = null;
+  if (key !== 'task' && activeSort.value === 'priority') {
+    activeSort.value = 'deadline';
+  }
+}
+
+function handleSelectDeadlineFilter(key: Exclude<WorkbenchTodoDeadlineFilter, null>) {
+  activeDeadlineFilter.value = activeDeadlineFilter.value === key ? null : key;
+}
+
+function handleSelectSort(key: SortKey) {
+  activeSort.value = key;
+}
 
 function handleClickItem(item: WorkbenchTodoItem) {
   if (!item.routeKey) return;
@@ -53,9 +164,7 @@ function handleClickItem(item: WorkbenchTodoItem) {
 }
 
 function getDeadlineToneClass(item: WorkbenchTodoItem) {
-  if (item.overdue || (item.remainingDays !== null && item.remainingDays < 0)) {
-    return 'workbench-todo__deadline--rose';
-  }
+  if (isWorkbenchTodoOverdue(item)) return 'workbench-todo__deadline--rose';
   if (item.remainingDays === 0) return 'workbench-todo__deadline--amber';
   return 'workbench-todo__deadline--slate';
 }
@@ -71,61 +180,165 @@ function getDeadlineToneClass(item: WorkbenchTodoItem) {
     @toggle-collapse="$emit('toggle-collapse')"
   >
     <div class="workbench-todo__tabs">
-      <button
-        v-for="bucket in buckets"
-        :key="bucket.key"
-        type="button"
-        class="workbench-todo__tab"
-        :class="{ 'workbench-todo__tab--active': activeBucket === bucket.key }"
-        @click="activeBucket = bucket.key"
-      >
-        <span>{{ bucket.label }}</span>
-        <span class="workbench-todo__tab-count">{{ bucketCounts[bucket.key] }}</span>
+      <div class="workbench-todo__tabs-group">
+        <ElTooltip
+          v-for="tab in mainTabs"
+          :key="tab.key"
+          :content="`已逾期 ${tabOverdueCount[tab.key]} 项，建议尽快处理`"
+          :disabled="tabOverdueCount[tab.key] === 0"
+          placement="top"
+          effect="dark"
+        >
+          <button
+            type="button"
+            class="workbench-todo__tab"
+            :class="{ 'workbench-todo__tab--active': activeTab === tab.key }"
+            @click="handleSelectTab(tab.key)"
+          >
+            <span>{{ tab.label }}</span>
+            <span class="workbench-todo__tab-count">{{ tabCounts[tab.key] }}</span>
+            <span v-if="tabOverdueCount[tab.key] > 0" class="workbench-todo__tab-dot" />
+          </button>
+        </ElTooltip>
+      </div>
+
+      <button type="button" class="workbench-todo__add" @click="handleOpenAdd">
+        <SvgIcon icon="mdi:plus" class="workbench-todo__add-icon" />
+        <span>个人事项</span>
       </button>
     </div>
 
-    <div v-if="filteredItems.length" class="workbench-todo__list">
-      <article
-        v-for="item in filteredItems"
-        :key="item.id"
-        class="workbench-todo__item"
-        :class="{ 'workbench-todo__item--clickable': Boolean(item.routeKey) }"
-        @click="handleClickItem(item)"
-      >
-        <div class="workbench-todo__leading">
-          <span class="workbench-todo__category" :class="`workbench-todo__category--${item.categoryTone}`">
-            {{ item.categoryLabel }}
-          </span>
-          <span v-if="item.highPriority" class="workbench-todo__priority">高</span>
-        </div>
+    <div class="workbench-todo__filters">
+      <div class="workbench-todo__filters-left">
+        <button
+          v-for="filter in deadlineFilters"
+          :key="filter.key"
+          type="button"
+          class="workbench-todo__filter"
+          :class="{ 'workbench-todo__filter--active': activeDeadlineFilter === filter.key }"
+          @click="handleSelectDeadlineFilter(filter.key)"
+        >
+          {{ filter.label }}
+        </button>
+      </div>
 
-        <div class="workbench-todo__body">
-          <h4 class="workbench-todo__item-title">{{ item.title }}</h4>
-          <div class="workbench-todo__meta">
-            <span class="workbench-todo__source">{{ item.source }}</span>
-          </div>
-        </div>
-
-        <div class="workbench-todo__trailing">
-          <span class="workbench-todo__deadline" :class="getDeadlineToneClass(item)">
-            {{ item.deadlineLabel }}
-          </span>
-        </div>
-      </article>
+      <ElDropdown trigger="click" placement="bottom-end" @command="handleSelectSort">
+        <span class="workbench-todo__sort">
+          排序：{{ currentSortLabel }}
+          <SvgIcon icon="mdi:chevron-down" class="workbench-todo__sort-icon" />
+        </span>
+        <template #dropdown>
+          <ElDropdownMenu>
+            <ElDropdownItem
+              v-for="option in sortOptions"
+              :key="option.key"
+              :command="option.key"
+              :class="{ 'is-active': activeSort === option.key }"
+            >
+              {{ option.label }}
+            </ElDropdownItem>
+          </ElDropdownMenu>
+        </template>
+      </ElDropdown>
     </div>
-    <ElEmpty v-else description="当前筛选下暂无待办" :image-size="72" />
+
+    <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) }"
+          @click="handleClickItem(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>
+          </div>
+
+          <div class="workbench-todo__body">
+            <h4 class="workbench-todo__item-title">{{ item.title }}</h4>
+            <div class="workbench-todo__meta">
+              <span class="workbench-todo__source">{{ item.source }}</span>
+            </div>
+          </div>
+
+          <div class="workbench-todo__trailing">
+            <span class="workbench-todo__deadline" :class="getDeadlineToneClass(item)">
+              {{ item.deadlineLabel }}
+            </span>
+          </div>
+        </article>
+      </div>
+      <ElEmpty v-else description="当前筛选下暂无待办" :image-size="72" />
+    </div>
+
+    <div class="workbench-todo__pager">
+      <ElPagination
+        v-if="filteredItems.length > PAGE_SIZE"
+        v-model:current-page="currentPage"
+        :page-size="PAGE_SIZE"
+        :total="filteredItems.length"
+        background
+        small
+        layout="prev, pager, next"
+      />
+    </div>
+
+    <PersonalItemOperateDialog
+      v-model:visible="addDialogVisible"
+      operate-type="add"
+      :row-data="null"
+      @submitted="handleAddSubmitted"
+    />
   </WorkbenchModuleCard>
 </template>
 
 <style scoped>
 .workbench-todo__tabs {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.workbench-todo__tabs-group {
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
-  margin-bottom: 14px;
+}
+
+.workbench-todo__add {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 12px;
+  border: 1px solid rgb(14 116 144 / 60%);
+  border-radius: 999px;
+  background-color: rgb(240 253 250 / 80%);
+  color: rgb(14 116 144 / 96%);
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 160ms ease;
+}
+
+.workbench-todo__add:hover {
+  background-color: rgb(14 116 144 / 96%);
+  border-color: rgb(14 116 144 / 96%);
+  color: white;
+}
+
+.workbench-todo__add-icon {
+  font-size: 14px;
 }
 
 .workbench-todo__tab {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -168,6 +381,101 @@ function getDeadlineToneClass(item: WorkbenchTodoItem) {
   color: white;
 }
 
+.workbench-todo__tab-dot {
+  position: absolute;
+  top: 4px;
+  right: 6px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background-color: rgb(225 29 72 / 96%);
+  box-shadow: 0 0 0 2px rgb(255 255 255 / 96%);
+}
+
+.workbench-todo__tab--active .workbench-todo__tab-dot {
+  box-shadow: 0 0 0 2px rgb(14 116 144 / 96%);
+}
+
+.workbench-todo__filters {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.workbench-todo__filters-left {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.workbench-todo__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  color: rgb(100 116 139 / 92%);
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 160ms ease;
+}
+
+.workbench-todo__sort:hover {
+  background-color: rgb(241 245 249 / 96%);
+  color: rgb(14 116 144 / 96%);
+}
+
+.workbench-todo__sort-icon {
+  font-size: 14px;
+}
+
+:deep(.el-dropdown-menu__item.is-active) {
+  color: var(--el-color-primary);
+  font-weight: 600;
+}
+
+.workbench-todo__filter {
+  padding: 3px 10px;
+  border: 1px dashed rgb(203 213 225 / 92%);
+  border-radius: 999px;
+  background-color: transparent;
+  color: rgb(100 116 139 / 92%);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 160ms ease;
+}
+
+.workbench-todo__filter:hover {
+  border-style: solid;
+  border-color: rgb(14 116 144 / 60%);
+  color: rgb(14 116 144 / 96%);
+}
+
+.workbench-todo__filter--active {
+  border-style: solid;
+  border-color: rgb(190 18 60 / 80%);
+  background-color: rgb(255 228 230 / 96%);
+  color: rgb(190 18 60 / 96%);
+}
+
+.workbench-todo__filter--active:hover {
+  border-color: rgb(190 18 60 / 92%);
+  color: rgb(190 18 60 / 96%);
+}
+
+.workbench-todo__content {
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+}
+
+.workbench-todo__content :deep(.el-empty) {
+  margin: auto;
+}
+
 .workbench-todo__list {
   display: flex;
   flex-direction: column;
@@ -313,6 +621,14 @@ function getDeadlineToneClass(item: WorkbenchTodoItem) {
   color: rgb(190 18 60 / 96%);
 }
 
+.workbench-todo__pager {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  min-height: 32px;
+  margin-top: 12px;
+}
+
 @media (width <= 600px) {
   .workbench-todo__item {
     grid-template-columns: auto minmax(0, 1fr);