From d9d5ab70cc70d7b06e211a8ae8e7708fd1408f99 Mon Sep 17 00:00:00 2001
From: zhihao <18915542763@163.com>
Date: Thu, 30 Apr 2026 22:43:59 +0800
Subject: [PATCH] =?UTF-8?q?czh-20260430-=E4=BF=AE=E5=A4=8D=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E7=AE=A1=E7=90=86=E7=9B=B8=E5=85=B3bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tasklist/components/CreateListModal.vue   |    4 +-
 src/views/tasklist/components/TaskContent.vue |  640 +++++----
 .../tasklist/components/TaskDetailDrawer.vue  |   88 +-
 .../tasklist/components/TaskFlatView.vue      | 1146 +++++++++++++++++
 src/views/tasklist/components/TaskSidebar.vue |  122 +-
 src/views/tasklist/index.vue                  |  442 ++++---
 src/views/tasklist/types.ts                   |   10 +-
 src/views/tasklist/utils/taskUtils.ts         |   29 +
 8 files changed, 1925 insertions(+), 556 deletions(-)
 create mode 100644 src/views/tasklist/components/TaskFlatView.vue
 create mode 100644 src/views/tasklist/utils/taskUtils.ts

diff --git a/src/views/tasklist/components/CreateListModal.vue b/src/views/tasklist/components/CreateListModal.vue
index d6f8bde..9a9c9a3 100644
--- a/src/views/tasklist/components/CreateListModal.vue
+++ b/src/views/tasklist/components/CreateListModal.vue
@@ -30,12 +30,12 @@
     try {
       setModalProps({ confirmLoading: true });
       const values = await validate();
-      await addTaskList({
+      const listId = await addTaskList({
         tasklistName: values.tasklistName || values.name,
         pid: pendingGroupId || undefined,
       });
       closeModal();
-      emit('success');
+      emit('success', listId);
     } finally {
       setModalProps({ confirmLoading: false });
     }
diff --git a/src/views/tasklist/components/TaskContent.vue b/src/views/tasklist/components/TaskContent.vue
index 6509911..9dcef26 100644
--- a/src/views/tasklist/components/TaskContent.vue
+++ b/src/views/tasklist/components/TaskContent.vue
@@ -8,9 +8,9 @@
         <div class="content-header-left">
           <div v-if="headerRenaming" class="content-header-rename-row">
             <a-input
+              ref="headerRenameInputRef"
               v-model:value="headerRenameValue"
               size="small"
-              autofocus
               style="width: 200px"
               @press-enter="confirmHeaderRename"
               @blur="confirmHeaderRename"
@@ -53,39 +53,7 @@
       </template>
     </div>
 
-    <div v-if="showListGroupView" class="content-tabs">
-      <div
-        v-for="tab in LIST_TAB_ITEMS"
-        :key="tab.key"
-        class="content-tab"
-        :class="{ active: listGroupTab === tab.key }"
-        @click="emit('update:list-group-tab', tab.key)"
-      >
-        {{ tab.label }}
-      </div>
-    </div>
-
     <div v-if="!showListGroupView" class="content-toolbar">
-      <div v-if="canEdit" class="feishu-btn-group">
-        <a-button size="small" class="feishu-btn-main" @click="handleCreateTask()">
-          <Icon icon="ant-design:plus-outlined" class="mr-1" />
-          新建任务
-        </a-button>
-        <a-dropdown>
-          <a-button size="small" class="feishu-btn-arrow">
-            <Icon icon="ant-design:down-outlined" class="feishu-arrow-icon" />
-          </a-button>
-          <template #overlay>
-            <a-menu @click="onCreateMenuClick">
-              <a-menu-item key="group">
-                <Icon icon="ant-design:folder-add-outlined" class="mr-1" />
-                新建分组
-              </a-menu-item>
-            </a-menu>
-          </template>
-        </a-dropdown>
-      </div>
-
       <a-dropdown>
         <template #overlay>
           <a-menu @click="onStatusFilterChange">
@@ -282,12 +250,14 @@
           </div>
           <div v-for="list in allTaskLists" :key="list.id" class="list-group-row" @click="emit('list-select', list.id)">
             <div class="list-group-col list-group-col-name">
-              <Icon icon="tasklist-list-file|svg" class="list-icon" size="16" />
+              <Icon icon="ant-design:file-text-outlined" class="list-icon" size="16" />
               <span class="list-name-text">{{ list.name }}</span>
-              <span class="pin-btn-wrap" @click.stop="toggleFavorite(list.id)">
-                <Icon v-if="!isFavorited(list.id)" icon="tasklist-star|svg" class="pin-svg pin-svg-outlined" />
-                <Icon v-else icon="tasklist-star-filled|svg" class="pin-svg pin-svg-filled" />
-              </span>
+              <a-tooltip :title="isFavorited(list.id) ? '取消收藏' : '收藏'">
+                <span class="pin-btn-wrap" @click.stop="toggleFavorite(list.id)">
+                  <Icon v-if="!isFavorited(list.id)" icon="tasklist-star|svg" class="pin-svg pin-svg-outlined" />
+                  <Icon v-else icon="tasklist-star-filled|svg" class="pin-svg pin-svg-filled" />
+                </span>
+              </a-tooltip>
             </div>
             <div class="list-group-col list-group-col-owner">
               <template v-if="getFirstAssignee(list)">
@@ -344,7 +314,7 @@
 
         <template v-if="currentList">
           <draggable
-            :model-value="computedGroups"
+            :list="localGroups"
             item-key="id"
             group="taskGroups"
             handle=".group-drag-handle"
@@ -360,85 +330,73 @@
                   :style="{ minWidth: totalFieldsWidth + 'px' }"
                   @click="toggleGroupCollapse(group.id)"
                 >
-                  <span v-if="canEdit && groupDimension === 'custom'" class="group-drag-handle">
+                  <span v-if="canEdit && groupDimension === 'custom'" class="group-drag-handle table-col-drag-handle">
                     <Icon icon="tasklist-drag-handle|svg" />
                   </span>
-                  <Icon :icon="group.collapsed ? 'ant-design:caret-right-outlined' : 'ant-design:caret-down-outlined'" class="group-arrow" />
-                  <template v-if="groupDimension === 'assignee' || groupDimension === 'createBy'">
-                    <template v-if="group.name && group.name !== '未分配' && group.name !== '未知'">
-                      <AvatarDisplay :names="group.name" :size="24" :show-name="true" />
+                  <span v-else class="table-col-drag-handle"></span>
+                  <span class="table-col table-col-title">
+                    <div class="task-indent" style="margin-left: 0">
+                      <span class="expand-arrow">
+                        <Icon :icon="group.collapsed ? 'ant-design:caret-right-outlined' : 'ant-design:caret-down-outlined'" />
+                      </span>
+                    </div>
+                    <template v-if="groupDimension === 'assignee' || groupDimension === 'createBy'">
+                      <template v-if="group.name && group.name !== '未分配' && group.name !== '未知'">
+                        <AvatarDisplay :names="group.name" :size="24" :show-name="true" />
+                      </template>
+                      <span v-else class="group-name">{{ group.name }}</span>
+                    </template>
+                    <template v-else-if="groupDimension === 'priority'">
+                      <span
+                        v-if="group.name && group.name !== '无优先级'"
+                        class="priority-tag"
+                        :style="{ backgroundColor: getPriorityBg(group.name), color: '#1f2329' }"
+                      >
+                        {{ getPriorityLabel(group.name) }}
+                      </span>
+                      <span v-else class="group-name">{{ group.name }}</span>
+                    </template>
+                    <template v-else-if="renamingGroupId === group.id">
+                      <a-input
+                        ref="renamingGroupInputRef"
+                        v-model:value="renamingGroupName"
+                        size="small"
+                        style="width: 160px"
+                        @press-enter="confirmRenameGroup"
+                        @blur="confirmRenameGroup"
+                        @click.stop
+                      />
                     </template>
                     <span v-else class="group-name">{{ group.name }}</span>
-                  </template>
-                  <template v-else-if="groupDimension === 'priority'">
-                    <span
-                      v-if="group.name && group.name !== '无优先级'"
-                      class="priority-tag"
-                      :style="{ backgroundColor: getPriorityBg(group.name), color: '#1f2329' }"
-                    >
-                      {{ getPriorityLabel(group.name) }}
-                    </span>
-                    <span v-else class="group-name">{{ group.name }}</span>
-                  </template>
-                  <template v-else-if="renamingGroupId === group.id">
-                    <a-input
-                      v-model:value="renamingGroupName"
-                      size="small"
-                      style="width: 160px"
-                      autofocus
-                      @press-enter="confirmRenameGroup"
-                      @blur="confirmRenameGroup"
-                      @click.stop
-                    />
-                  </template>
-                  <span v-else class="group-name">{{ group.name }}</span>
-                  <span class="group-count">({{ countTopLevelTasks(group.tasks) }})</span>
-                  <span class="group-actions" @click.stop>
-                    <span
-                      v-if="canEdit && groupDimension === 'custom'"
-                      class="group-action-btn group-action-add"
-                      title="新建任务"
-                      @click.stop="showNewTaskInput = group.id"
-                    >
-                      <Icon icon="ant-design:plus-outlined" />
-                    </span>
-                    <a-dropdown v-if="canEdit && groupDimension === 'custom'">
-                      <span class="group-action-btn group-action-more" title="更多操作" @click.stop>
-                        <Icon icon="ant-design:more-outlined" />
+                    <span class="group-count">({{ countTopLevelTasks(group.tasks) }})</span>
+                    <span class="group-actions" @click.stop>
+                      <span
+                        v-if="canEdit && groupDimension === 'custom'"
+                        class="group-action-btn group-action-add"
+                        title="新建任务"
+                        @click.stop="showNewTaskInput = group.id"
+                      >
+                        <Icon icon="ant-design:plus-outlined" />
                       </span>
-                      <template #overlay>
-                        <a-menu @click="({ key }) => onGroupMenuClick(key, group.id, group.name)">
-                          <a-menu-item key="rename">重命名</a-menu-item>
-                          <a-menu-item v-if="group.id !== '__default__'" key="delete" danger>删除</a-menu-item>
-                        </a-menu>
-                      </template>
-                    </a-dropdown>
+                      <a-dropdown v-if="canEdit && groupDimension === 'custom'">
+                        <span class="group-action-btn group-action-more" title="更多操作" @click.stop>
+                          <Icon icon="ant-design:ellipsis-outlined" />
+                        </span>
+                        <template #overlay>
+                          <a-menu @click="({ key }) => onGroupMenuClick(key, group.id, group.name)">
+                            <a-menu-item key="rename">重命名</a-menu-item>
+                            <a-tooltip v-if="group.id === '__default__'" title="系统内置分组不可删除" placement="right">
+                              <a-menu-item key="delete" disabled style="color: #ccc; cursor: not-allowed">删除</a-menu-item>
+                            </a-tooltip>
+                            <a-menu-item v-else key="delete" danger>删除</a-menu-item>
+                          </a-menu>
+                        </template>
+                      </a-dropdown>
+                    </span>
                   </span>
                 </div>
 
-                <template v-if="!group.collapsed">
-                  <div
-                    v-if="showNewTaskInput === group.id && canEdit"
-                    class="task-row new-task-input-row"
-                    :style="{ minWidth: totalFieldsWidth + 'px' }"
-                  >
-                    <div class="table-col table-col-drag-handle"></div>
-                    <div class="table-col table-col-title">
-                      <div class="task-indent">
-                        <span class="expand-arrow-placeholder"></span>
-                        <div class="task-checkbox"></div>
-                      </div>
-                      <a-input
-                        v-model:value="newTaskTitle"
-                        size="small"
-                        placeholder="输入任务标题，按回车确认..."
-                        autofocus
-                        @press-enter="submitNewTask(group.id)"
-                        @blur="submitNewTask(group.id)"
-                      />
-                    </div>
-                  </div>
-
+                <div v-show="!group.collapsed">
                   <draggable
                     :model-value="flattenGroupTasks(group.tasks)"
                     :item-key="(ft: any) => ft.task.id"
@@ -453,7 +411,7 @@
                   >
                     <template #item="{ element: ft }">
                       <div class="task-row" :data-task-id="ft.task.id" :style="{ minWidth: totalFieldsWidth + 'px' }" v-show="!isChildHidden(ft)">
-                        <div class="table-col table-col-drag-handle" v-if="canEdit">
+                        <div class="table-col table-col-drag-handle" v-if="_canEditTask(ft.task)">
                           <span class="drag-handle">
                             <Icon icon="tasklist-drag-handle|svg" />
                           </span>
@@ -468,8 +426,8 @@
                             <button
                               class="task-checkbox"
                               :class="{ checked: ft.task.completed }"
-                              :disabled="isReadOnly"
-                              @click.stop="!isReadOnly && emit('toggle-task', ft.task.id)"
+                              :disabled="!_canEditTask(ft.task)"
+                              @click.stop="_canEditTask(ft.task) && emit('toggle-task', ft.task.id)"
                             >
                               <Icon v-if="ft.task.completed" icon="ant-design:check-outlined" />
                             </button>
@@ -483,7 +441,7 @@
                         <template v-for="field in visibleFieldConfigs" :key="field.key">
                           <div class="table-col task-field" :style="{ width: fieldWidthMap[field.key] || '100px' }">
                             <template v-if="field.key === 'subTaskProgress'">
-                              <div class="cell-inner">
+                              <div class="cell-inner readonly-cell">
                                 <div class="progress-cell" v-if="ft.task.childCount > 0">
                                   <div class="progress-bar">
                                     <div
@@ -500,7 +458,7 @@
                             </template>
                             <template v-else-if="field.key === 'priority'">
                               <a-dropdown
-                                v-if="canEdit"
+                                v-if="_canEditTask(ft.task)"
                                 :trigger="['click']"
                                 :get-popup-container="getPopupContainer"
                                 :overlay-style="{ minWidth: '100px' }"
@@ -537,7 +495,7 @@
                               </div>
                             </template>
                             <template v-else-if="field.key === 'assigneeName'">
-                              <div v-if="canEdit" class="cell-inner editable-cell" @click.stop="openUserSelectModal('assignee', ft.task.id)">
+                              <div v-if="_canEditTask(ft.task)" class="cell-inner editable-cell" @click.stop="openUserSelectModal('assignee', ft.task.id)">
                                 <template v-if="ft.task.assigneeName">
                                   <a-tooltip :title="ft.task.assigneeName" placement="top"
                                     ><AvatarDisplay :names="ft.task.assigneeName" :size="24" :completed="ft.task.completed"
@@ -561,8 +519,8 @@
                             <template v-else-if="field.key === 'startTime' || field.key === 'endTime'">
                               <div
                                 class="cell-inner date-cell-wrapper"
-                                :class="{ 'editable-cell': canEdit }"
-                                @click.stop="canEdit && !datePickerVisible && startEditCell(ft.task.id, field.key)"
+                                :class="{ 'editable-cell': _canEditTask(ft.task) }"
+                                @click.stop="_canEditTask(ft.task) && !datePickerVisible && startEditCell(ft.task.id, field.key)"
                               >
                                 <a-date-picker
                                   v-if="editingCell?.taskId === ft.task.id && editingCell?.field === field.key"
@@ -603,7 +561,11 @@
                               </div>
                             </template>
                             <template v-else-if="field.key === 'followersName'">
-                              <div v-if="canEdit" class="cell-inner editable-cell" @click.stop="openUserSelectModal('followers', ft.task.id)">
+                              <div
+                                v-if="_canEditTask(ft.task)"
+                                class="cell-inner editable-cell"
+                                @click.stop="openUserSelectModal('followers', ft.task.id)"
+                              >
                                 <template v-if="ft.task.followersName">
                                   <a-tooltip :title="ft.task.followersName" placement="top"
                                     ><AvatarDisplay :names="ft.task.followersName" :size="24" :completed="ft.task.completed"
@@ -625,7 +587,11 @@
                               </div>
                             </template>
                             <template v-else-if="field.key === 'participantName'">
-                              <div v-if="canEdit" class="cell-inner editable-cell" @click.stop="openUserSelectModal('participant', ft.task.id)">
+                              <div
+                                v-if="_canEditTask(ft.task)"
+                                class="cell-inner editable-cell"
+                                @click.stop="openUserSelectModal('participant', ft.task.id)"
+                              >
                                 <template v-if="ft.task.participantName">
                                   <a-tooltip :title="ft.task.participantName" placement="top"
                                     ><AvatarDisplay :names="ft.task.participantName" :size="24" :completed="ft.task.completed"
@@ -647,7 +613,7 @@
                               </div>
                             </template>
                             <template v-else-if="field.key === 'completeTime'">
-                              <div class="cell-inner">
+                              <div class="cell-inner readonly-cell">
                                 <template v-if="ft.task.completeTime">
                                   <span class="field-value" :class="{ 'task-field-completed': ft.task.completed }">
                                     {{ ft.task.completeTime.substring(0, 10) }}
@@ -657,28 +623,83 @@
                               </div>
                             </template>
                             <template v-else-if="field.key === 'remark'">
-                              <div class="cell-inner">
-                                <span
-                                  v-if="ft.task.remark"
-                                  class="field-value"
-                                  :class="{ 'task-field-completed': ft.task.completed }"
-                                  :title="ft.task.remark"
-                                >
-                                  {{ ft.task.remark.length > 20 ? ft.task.remark.substring(0, 20) + '...' : ft.task.remark }}
-                                </span>
-                                <span v-else class="field-placeholder">-</span>
+                              <div
+                                class="cell-inner"
+                                :class="{ 'editable-cell': canEdit }"
+                                @click.stop="canEdit && startEditTextCell(ft.task.id, field.key)"
+                              >
+                                <a-input
+                                  v-if="editingCell?.taskId === ft.task.id && editingCell?.field === field.key"
+                                  v-model:value="editingValue"
+                                  size="small"
+                                  :maxlength="200"
+                                  class="inline-text-editor"
+                                  :ref="
+                                    (el: any) => {
+                                      if (el) textEditInputRef = el;
+                                    }
+                                  "
+                                  @press-enter="confirmEditTextCell"
+                                  @blur="confirmEditTextCell"
+                                  @click.stop
+                                />
+                                <template v-else>
+                                  <span
+                                    v-if="ft.task.remark"
+                                    class="field-value"
+                                    :class="{ 'task-field-completed': ft.task.completed }"
+                                    :title="ft.task.remark"
+                                  >
+                                    {{ ft.task.remark.length > 20 ? ft.task.remark.substring(0, 20) + '...' : ft.task.remark }}
+                                  </span>
+                                  <span v-else class="field-icon-placeholder" :class="{ 'task-field-completed': ft.task.completed }">
+                                    <Icon icon="ant-design:edit-outlined" />
+                                  </span>
+                                </template>
                               </div>
                             </template>
                             <template v-else-if="field.key === 'assignName' || field.key === 'createBy'">
-                              <div class="cell-inner">
+                              <div class="cell-inner readonly-cell">
                                 <template v-if="getFieldValue(ft.task, field.key)">
                                   <a-tooltip :title="getFieldValue(ft.task, field.key)" placement="top"
                                     ><AvatarDisplay :names="getFieldValue(ft.task, field.key)" :size="24" :completed="ft.task.completed"
                                   /></a-tooltip>
                                 </template>
+                                <span v-else class="field-placeholder">-</span>
+                              </div>
+                            </template>
+                            <template v-else-if="field.key === 'taskDesc'">
+                              <div
+                                class="cell-inner"
+                                :class="{ 'editable-cell': canEdit }"
+                                @click.stop="canEdit && startEditTextCell(ft.task.id, field.key)"
+                              >
+                                <a-input
+                                  v-if="editingCell?.taskId === ft.task.id && editingCell?.field === field.key"
+                                  v-model:value="editingValue"
+                                  size="small"
+                                  :maxlength="200"
+                                  class="inline-text-editor"
+                                  :ref="
+                                    (el: any) => {
+                                      if (el) textEditInputRef = el;
+                                    }
+                                  "
+                                  @press-enter="confirmEditTextCell"
+                                  @blur="confirmEditTextCell"
+                                  @click.stop
+                                />
                                 <template v-else>
-                                  <span class="field-icon-placeholder" :class="{ 'task-field-completed': ft.task.completed }">
-                                    <Icon icon="tasklist-add-user|svg" />
+                                  <span
+                                    v-if="ft.task.taskDesc"
+                                    class="field-value"
+                                    :class="{ 'task-field-completed': ft.task.completed }"
+                                    :title="ft.task.taskDesc"
+                                  >
+                                    {{ ft.task.taskDesc.length > 20 ? ft.task.taskDesc.substring(0, 20) + '...' : ft.task.taskDesc }}
+                                  </span>
+                                  <span v-else class="field-icon-placeholder" :class="{ 'task-field-completed': ft.task.completed }">
+                                    <Icon icon="ant-design:edit-outlined" />
                                   </span>
                                 </template>
                               </div>
@@ -694,6 +715,29 @@
                     </template>
                   </draggable>
 
+                  <div
+                    v-if="showNewTaskInput === group.id && canEdit"
+                    class="task-row new-task-input-row"
+                    :style="{ minWidth: totalFieldsWidth + 'px' }"
+                  >
+                    <div class="table-col table-col-drag-handle"></div>
+                    <div class="table-col table-col-title">
+                      <div class="task-indent">
+                        <span class="expand-arrow-placeholder"></span>
+                        <div class="task-checkbox"></div>
+                      </div>
+                      <a-input
+                        ref="newTaskInputRef"
+                        v-model:value="newTaskTitle"
+                        size="small"
+                        placeholder="输入任务标题，按回车确认..."
+                        autofocus
+                        @press-enter="submitNewTask(group.id)"
+                        @blur="submitNewTask(group.id)"
+                      />
+                    </div>
+                  </div>
+
                   <div
                     v-if="showNewTaskInput !== group.id && canEdit"
                     class="task-row new-task-btn"
@@ -709,7 +753,7 @@
                       <span class="new-task-text">新建任务</span>
                     </div>
                   </div>
-                </template>
+                </div>
               </div>
             </template>
           </draggable>
@@ -717,6 +761,7 @@
           <div v-if="showNewGroupInput && canEdit" class="new-group-row">
             <Icon icon="ant-design:plus-outlined" class="new-task-plus" />
             <a-input
+              ref="newGroupInputRef"
               v-model:value="newGroupName"
               size="small"
               placeholder="输入分组名称，按回车确认..."
@@ -751,7 +796,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed, nextTick } from 'vue';
+  import { ref, computed, watch, nextTick } from 'vue';
   import dayjs from 'dayjs';
   import Icon from '/@/components/Icon/index';
   import AvatarDisplay from './AvatarDisplay.vue';
@@ -760,6 +805,7 @@
   import { useUserStore } from '/@/store/modules/user';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { FIELD_CONFIG, GROUP_OPTIONS, SORT_OPTIONS, MAX_TASK_DEPTH, FILTER_FIELD_CONFIGS, FILTER_OPERATOR_LABELS } from '../types';
+  import { PRIORITY_OPTIONS, getPriorityBg, getPriorityLabel, isOverdue } from '../utils/taskUtils';
   import type {
     TaskList,
     TaskGroup,
@@ -785,12 +831,11 @@
     sortDirection: SortDirection;
     visibleFields: FieldKey[];
     showListGroupView?: boolean;
-    listGroupTab?: string;
     favoriteIdMap?: Map<string, string>;
   }>();
 
   const emit = defineEmits<{
-    'create-task': [groupId: string, taskName: string, sortOrder?: number];
+    'create-task': [groupId: string, taskName: string];
     'toggle-task': [taskId: string];
     'task-click': [taskId: string];
     'add-group': [listId: string, groupName: string];
@@ -803,7 +848,6 @@
     'update:visibleFields': [value: FieldKey[]];
     'update:list-group-tab': [value: string];
     'list-select': [listId: string];
-    'create-group': [name: string];
     'open-collaborator': [];
     'add-to-favorites': [taskListId: string];
     'remove-from-favorites': [favoriteId: string];
@@ -818,18 +862,20 @@
   const userStore = useUserStore();
   const { createConfirm } = useMessage();
 
-  const LIST_TAB_ITEMS = [
-    { key: 'all', label: '全部' },
-    { key: 'own', label: '我所有的' },
-    { key: 'collab', label: '我协作的' },
-  ];
-
   const showNewTaskInput = ref<string | null>(null);
   const newTaskTitle = ref('');
   const showNewGroupInput = ref(false);
   const newGroupName = ref('');
   const renamingGroupId = ref<string | null>(null);
   const renamingGroupName = ref('');
+  const renamingGroupInputRef = ref<HTMLInputElement | null>(null);
+
+  watch(renamingGroupId, async (val) => {
+    if (val) {
+      await nextTick();
+      renamingGroupInputRef.value?.focus();
+    }
+  });
   const submittingGroup = ref(false);
   const submittingRename = ref(false);
   const filterVisible = ref(false);
@@ -838,6 +884,24 @@
   const expandedTaskIds = ref<Set<string>>(new Set());
   const draggingTaskId = ref('');
   const dragBlockedOnce = ref(false);
+  const newTaskInputRef = ref<HTMLInputElement | null>(null);
+  const newGroupInputRef = ref<HTMLInputElement | null>(null);
+
+  watch(showNewTaskInput, async (val) => {
+    if (val) {
+      await nextTick();
+      newTaskInputRef.value?.focus();
+    }
+  });
+
+  watch(showNewGroupInput, async (val) => {
+    if (val) {
+      await nextTick();
+      newGroupInputRef.value?.focus();
+    }
+  });
+
+  const localGroups = ref<TaskGroup[]>([]);
 
   function showDragBlockedMessage() {
     import('ant-design-vue').then(({ message }) => {
@@ -845,29 +909,11 @@
     });
   }
 
-  const priorityOptions = ref<{ label: string; value: string }[]>([
-    { label: '高', value: 'high' },
-    { label: '中', value: 'medium' },
-    { label: '低', value: 'low' },
-  ]);
-
-  const priorityColorMap: Record<string, string> = {
-    high: '#ffccc7',
-    medium: '#ffe58f',
-    low: '#91d5ff',
-  };
-
-  function getPriorityBg(value: string) {
-    return priorityColorMap[value] || '#f5f5f5';
-  }
-
-  function getPriorityLabel(value: string): string {
-    const opt = priorityOptions.value.find((o) => o.value === value);
-    return opt?.label || value;
-  }
+  const priorityOptions = PRIORITY_OPTIONS;
 
   const editingCell = ref<{ taskId: string; field: string } | null>(null);
   const editingValue = ref<any>('');
+  const textEditInputRef = ref<any>(null);
   const datePickerVisible = ref(false);
   const pickerEpoch = ref(0);
   const editingDateDayjs = computed(() => {
@@ -1084,6 +1130,14 @@
 
   const headerRenaming = ref(false);
   const headerRenameValue = ref('');
+  const headerRenameInputRef = ref<HTMLInputElement | null>(null);
+
+  watch(headerRenaming, async (val) => {
+    if (val) {
+      await nextTick();
+      headerRenameInputRef.value?.focus();
+    }
+  });
 
   function onHeaderMenuClick({ key }: { key: string }) {
     if (key === 'rename') {
@@ -1113,15 +1167,6 @@
     headerRenaming.value = false;
   }
 
-  function isOverdue(task: TaskItem): boolean {
-    if (!task.endTime || task.completed) return false;
-    const end = new Date(task.endTime);
-    const now = new Date();
-    now.setHours(0, 0, 0, 0);
-    end.setHours(0, 0, 0, 0);
-    return now > end;
-  }
-
   function _canEditTask(task: TaskItem): boolean {
     if (canEdit.value) return true;
     if (isReadOnly.value && task.assigneeId) {
@@ -1210,6 +1255,24 @@
     datePickerVisible.value = false;
   }
 
+  function startEditTextCell(taskId: string, field: string) {
+    cancelEdit();
+    const task = findTaskById(taskId);
+    editingValue.value = (task as any)?.[field] || '';
+    editingCell.value = { taskId, field };
+    nextTick(() => {
+      textEditInputRef.value?.focus();
+    });
+  }
+
+  function confirmEditTextCell() {
+    if (!editingCell.value) return;
+    const { taskId, field } = editingCell.value;
+    const value = editingValue.value?.trim() ?? '';
+    emit('update-task-field', taskId, field, value);
+    cancelEdit();
+  }
+
   function onPriorityChange(taskId: string, value: any) {
     if (value !== undefined && value !== null) {
       emit('update-task-field', taskId, 'priority', value);
@@ -1472,10 +1535,12 @@
     const { oldIndex, newIndex } = evt;
     if (oldIndex === newIndex) return;
 
-    const movedElement = evt.item;
-    const groupId = movedElement?.dataset?.groupId;
+    const groupId = localGroups.value[newIndex]?.id;
     if (!groupId) return;
 
+    // 拖拽结束后收起分组，防止展开跳动
+    collapsedGroups.value.add(groupId);
+
     emit('move-task-group', groupId, newIndex + 1);
   }
 
@@ -1501,11 +1566,7 @@
         tasks: allTasks.filter((t) => t.groupId === g.id).sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0)),
         collapsed: collapsedGroups.value.has(g.id),
       }));
-      groups.sort((a, b) => {
-        if (a.id === '__default__') return -1;
-        if (b.id === '__default__') return 1;
-        return (a.sortOrder ?? 0) - (b.sortOrder ?? 0);
-      });
+      groups.sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
       return groups;
     }
 
@@ -1526,6 +1587,14 @@
     return computeDynamicGroups(allTasks);
   });
 
+  watch(
+    computedGroups,
+    (newGroups) => {
+      localGroups.value = [...newGroups];
+    },
+    { immediate: true }
+  );
+
   function flattenGroupTasks(tasks?: TaskItem[]): FlatTaskItem[] {
     const sourceTasks = tasks || [];
     const result: FlatTaskItem[] = [];
@@ -1665,20 +1734,12 @@
     }
   }
 
-  function handleCreateTask(groupId?: string) {
-    const targetGroupId = groupId || props.currentList?.groups[0]?.id;
-    if (targetGroupId) {
-      showNewTaskInput.value = targetGroupId;
-      newTaskTitle.value = '';
-    }
-  }
-
   function submitNewTask(groupId: string) {
     const title = newTaskTitle.value.trim();
     newTaskTitle.value = '';
     showNewTaskInput.value = null;
     if (title) {
-      emit('create-task', groupId, title, 1);
+      emit('create-task', groupId, title);
     }
   }
 
@@ -1696,13 +1757,6 @@
     }, 300);
   }
 
-  function onCreateMenuClick({ key }: { key: string }) {
-    if (key === 'group') {
-      showNewGroupInput.value = true;
-      newGroupName.value = '';
-    }
-  }
-
   function onGroupMenuClick(key: string, groupId: string, groupName: string) {
     if (key === 'rename') {
       renamingGroupId.value = groupId;
@@ -1856,75 +1910,6 @@
     flex-wrap: wrap;
   }
 
-  .feishu-btn-group {
-    display: inline-flex;
-    align-items: center;
-
-    .feishu-btn-main {
-      border-radius: 6px 0 0 6px;
-      border-right: none;
-      padding: 0 7px;
-      height: 24px;
-      font-size: 14px;
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      background: #fff;
-      border: 1px solid #d9d9d9;
-      color: rgba(0, 0, 0, 0.88);
-      cursor: pointer;
-      transition: all 0.2s;
-      line-height: 1;
-
-      &:hover {
-        color: #4096ff;
-        border-color: #4096ff;
-      }
-
-      &:active {
-        color: #0958d9;
-        border-color: #0958d9;
-      }
-
-      :deep(.app-iconify) {
-        font-size: 14px !important;
-      }
-    }
-
-    .feishu-btn-arrow {
-      border-radius: 0 6px 6px 0;
-      padding: 0 4px;
-      height: 24px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      background: #fff;
-      border: 1px solid #d9d9d9;
-      color: rgba(0, 0, 0, 0.88);
-      cursor: pointer;
-      transition: all 0.2s;
-      line-height: 1;
-
-      &:hover {
-        color: #4096ff;
-        border-color: #4096ff;
-      }
-
-      &:active {
-        color: #0958d9;
-        border-color: #0958d9;
-      }
-
-      :deep(.app-iconify) {
-        font-size: 10px !important;
-      }
-    }
-
-    .feishu-arrow-icon {
-      font-size: 10px;
-    }
-  }
-
   .filter-badge {
     display: inline-block;
     margin-left: 4px;
@@ -2076,7 +2061,7 @@
   }
 
   .content-table-header {
-    padding: 0 24px;
+    padding: 0 8px;
     height: 40px;
     background: #fafafa;
     border-bottom: 1px solid #e5e6eb;
@@ -2123,11 +2108,8 @@
 
   .drag-handle {
     cursor: grab;
-    color: #c0c4cc;
-    opacity: 0;
-    transition:
-      opacity 0.15s,
-      color 0.15s;
+    color: transparent;
+    transition: color 0.15s;
     font-size: 14px;
     display: flex;
     align-items: center;
@@ -2139,7 +2121,7 @@
   }
 
   .task-row:hover .drag-handle {
-    opacity: 1;
+    color: #c0c4cc;
   }
 
   .drag-handle:hover {
@@ -2162,7 +2144,6 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    overflow: hidden;
     cursor: pointer;
   }
 
@@ -2174,46 +2155,64 @@
   .task-group-header {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 8px 24px;
+    padding: 6px 8px;
     cursor: pointer;
-    border-bottom: 1px solid #fafafa;
+    border-bottom: 1px solid #f0f0f0;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 600;
+    color: #1f2329;
     &:hover {
-      background: #fafafa;
-    }
-    .group-arrow {
-      font-size: 12px;
-      color: #999;
-      width: 16px;
-      text-align: center;
+      background: #f5f6f7;
     }
     .group-drag-handle {
       cursor: grab;
-      font-size: 12px;
-      color: #c0c4cc;
+      font-size: 14px;
+      color: transparent;
+      transition: color 0.15s;
       display: flex;
       align-items: center;
-      &:hover {
-        color: #8c8c8c;
-      }
+      justify-content: center;
+      width: 24px;
+      min-width: 24px;
+      flex-shrink: 0;
       &:active {
         cursor: grabbing;
       }
     }
+    &:hover .group-drag-handle {
+      color: #c0c4cc;
+    }
+    .group-drag-handle:hover {
+      color: #8c8c8c;
+    }
+    .table-col-title {
+      font-weight: 600;
+      color: #1f2329;
+      .expand-arrow {
+        color: #8f959e;
+      }
+    }
     .group-name {
-      color: #333;
+      color: #1f2329;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex-shrink: 1;
+      min-width: 0;
     }
     .group-count {
-      color: #999;
+      color: #8f959e;
       font-weight: 400;
+      font-size: 13px;
+      flex-shrink: 0;
+      margin-left: 4px;
     }
     .group-actions {
-      margin-left: auto;
       display: flex;
       align-items: center;
-      gap: 4px;
+      gap: 2px;
+      flex-shrink: 0;
       opacity: 0;
       transition: opacity 0.15s;
     }
@@ -2228,7 +2227,7 @@
       justify-content: center;
       border-radius: 4px;
       cursor: pointer;
-      color: #8c8c8c;
+      color: #8f959e;
       font-size: 14px;
       transition: all 0.15s;
       &:hover {
@@ -2242,7 +2241,7 @@
     display: flex;
     align-items: stretch;
     height: 46px;
-    padding: 0 24px;
+    padding: 0 8px;
     border-bottom: 1px solid #f0f0f0;
     font-size: 14px;
     box-sizing: border-box;
@@ -2406,6 +2405,13 @@
         min-width: 80px;
       }
     }
+
+    .inline-text-editor {
+      width: 100%;
+      :deep(.ant-input) {
+        font-size: 13px;
+      }
+    }
   }
 
   .dropdown-cell {
@@ -2427,6 +2433,12 @@
     }
   }
 
+  .readonly-cell {
+    &:hover {
+      border-color: transparent;
+    }
+  }
+
   .date-picker-footer {
     display: flex;
     justify-content: flex-end;
@@ -2584,7 +2596,7 @@
   .new-group-row {
     display: flex;
     align-items: center;
-    padding: 12px 24px;
+    padding: 12px 8px;
     font-size: 14px;
     &.new-group-btn {
       cursor: pointer;
@@ -2595,40 +2607,6 @@
     }
   }
 
-  .content-tabs {
-    display: flex;
-    gap: 0;
-    border-bottom: 1px solid #f0f0f0;
-    padding: 0 24px;
-  }
-
-  .content-tab {
-    padding: 8px 16px;
-    font-size: 14px;
-    color: #8c8c8c;
-    cursor: pointer;
-    position: relative;
-    transition: color 0.2s;
-    &:hover {
-      color: #333;
-    }
-    &.active {
-      color: #1677ff;
-      font-weight: 500;
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: -1px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 24px;
-        height: 2px;
-        background: #1677ff;
-        border-radius: 1px;
-      }
-    }
-  }
-
   .list-group-view {
     flex: 1;
     overflow: auto;
diff --git a/src/views/tasklist/components/TaskDetailDrawer.vue b/src/views/tasklist/components/TaskDetailDrawer.vue
index 15f7975..060f609 100644
--- a/src/views/tasklist/components/TaskDetailDrawer.vue
+++ b/src/views/tasklist/components/TaskDetailDrawer.vue
@@ -11,7 +11,7 @@
   >
     <template v-if="taskData">
       <div class="detail-toolbar">
-        <a-button size="small" :type="taskData.completed ? 'primary' : 'default'" @click="toggleComplete">
+        <a-button size="small" :type="taskData.completed ? 'primary' : 'default'" :disabled="isFullReadOnly" @click="toggleComplete">
           <Icon icon="ant-design:check-outlined" class="mr-1" />
           {{ taskData.completed ? '已完成' : '完成任务' }}
         </a-button>
@@ -22,7 +22,7 @@
               <Icon :icon="isFollowed ? 'ant-design:eye-filled' : 'ant-design:eye-outlined'" />
             </a-button>
           </a-tooltip>
-          <a-tooltip title="删除">
+          <a-tooltip v-if="!isReadOnly" title="删除">
             <a-button type="text" size="small" @click="handleDelete">
               <Icon icon="ant-design:delete-outlined" />
             </a-button>
@@ -63,7 +63,7 @@
           @blur="onTitleBlur"
           @press-enter="editingTitle = false"
         />
-        <div v-else class="detail-title-text" @click="editingTitle = true">
+        <div v-else class="detail-title-text" :class="{ 'readonly-text': isFullReadOnly }" @click="!isFullReadOnly && (editingTitle = true)">
           {{ taskData.taskName }}
         </div>
       </div>
@@ -76,12 +76,13 @@
           <div class="detail-row-content">
             <div class="detail-field-row">
               <span class="detail-field-label">负责人</span>
-              <div v-if="taskData.assigneeName" class="assignee-info" @click="openDrawerUserSelect('assignee')">
+              <div v-if="taskData.assigneeName" class="assignee-info" :class="{ 'readonly-field': isReadOnly }" @click="!isReadOnly && openDrawerUserSelect('assignee')">
                 <a-tooltip :title="taskData.assigneeName" placement="top">
                   <AvatarDisplay :names="taskData.assigneeName" :size="28" :show-name="true" />
                 </a-tooltip>
               </div>
-              <a-button v-else type="text" class="add-field-btn" @click="openDrawerUserSelect('assignee')">添加</a-button>
+              <a-button v-else-if="!isReadOnly" type="text" class="add-field-btn" @click="openDrawerUserSelect('assignee')">添加</a-button>
+              <span v-else class="detail-field-value">-</span>
             </div>
           </div>
         </div>
@@ -93,12 +94,13 @@
           <div class="detail-row-content">
             <div class="detail-field-row">
               <span class="detail-field-label">参与人</span>
-              <div v-if="taskData.participantName" class="assignee-info" @click="openDrawerUserSelect('participant')">
+              <div v-if="taskData.participantName" class="assignee-info" :class="{ 'readonly-field': isFullReadOnly }" @click="!isFullReadOnly && openDrawerUserSelect('participant')">
                 <a-tooltip :title="taskData.participantName" placement="top">
                   <AvatarDisplay :names="taskData.participantName" :size="28" :show-name="true" />
                 </a-tooltip>
               </div>
-              <a-button v-else type="text" class="add-field-btn" @click="openDrawerUserSelect('participant')">添加</a-button>
+              <a-button v-else-if="!isFullReadOnly" type="text" class="add-field-btn" @click="openDrawerUserSelect('participant')">添加</a-button>
+              <span v-else class="detail-field-value">-</span>
             </div>
           </div>
         </div>
@@ -111,7 +113,7 @@
             <div class="detail-field-row">
               <span class="detail-field-label">开始时间</span>
               <a-date-picker
-                v-if="drawerDateEditMode === 'start'"
+                v-if="drawerDateEditMode === 'start' && !isFullReadOnly"
                 :value="startTimeDayjs ? dayjs(startTimeDayjs) : null"
                 :open="drawerDatePickerVisible"
                 placeholder="选择开始时间"
@@ -127,7 +129,7 @@
                   </div>
                 </template>
               </a-date-picker>
-              <span v-else class="detail-field-value detail-field-clickable" @click="openDrawerDatePicker('start')">{{
+              <span v-else class="detail-field-value detail-field-clickable" :class="{ 'readonly-field': isFullReadOnly }" @click="!isFullReadOnly && openDrawerDatePicker('start')">{{
                 startTimeDisplay || '未设置'
               }}</span>
             </div>
@@ -142,7 +144,7 @@
             <div class="detail-field-row">
               <span class="detail-field-label">截止时间</span>
               <a-date-picker
-                v-if="drawerDateEditMode === 'end'"
+                v-if="drawerDateEditMode === 'end' && !isFullReadOnly"
                 :value="endTimeDayjs ? dayjs(endTimeDayjs) : null"
                 :open="drawerDatePickerVisible"
                 placeholder="选择截止时间"
@@ -162,8 +164,8 @@
               <span
                 v-else
                 class="detail-field-value detail-field-clickable"
-                :class="{ 'overdue-text': isEndTimeOverdue }"
-                @click="openDrawerDatePicker('end')"
+                :class="{ 'overdue-text': isEndTimeOverdue, 'readonly-field': isFullReadOnly }"
+                @click="!isFullReadOnly && openDrawerDatePicker('end')"
                 >{{ endTimeDisplay || '未设置' }}</span
               >
             </div>
@@ -189,8 +191,8 @@
             <Icon icon="tasklist-desc|svg" />
           </span>
           <div class="detail-row-content">
-            <a-textarea v-if="showDescEditor" v-model:value="taskData.taskDesc" :rows="3" placeholder="添加描述..." autofocus @blur="onDescBlur" />
-            <span v-else class="desc-trigger" @click="showDescEditor = true">
+            <a-textarea v-if="showDescEditor && !isFullReadOnly" v-model:value="taskData.taskDesc" :rows="3" placeholder="添加描述..." autofocus @blur="onDescBlur" />
+            <span v-else class="desc-trigger" :class="{ 'readonly-field': isFullReadOnly }" @click="!isFullReadOnly && (showDescEditor = true)">
               {{ taskData.taskDesc || '添加描述' }}
             </span>
           </div>
@@ -202,14 +204,14 @@
           </span>
           <div class="detail-row-content">
             <a-textarea
-              v-if="showRemarkEditor"
+              v-if="showRemarkEditor && !isFullReadOnly"
               v-model:value="taskData.remark"
               :rows="3"
               placeholder="添加其他事项说明..."
               autofocus
               @blur="onRemarkBlur"
             />
-            <span v-else class="desc-trigger" @click="showRemarkEditor = true">
+            <span v-else class="desc-trigger" :class="{ 'readonly-field': isFullReadOnly }" @click="!isFullReadOnly && (showRemarkEditor = true)">
               {{ taskData.remark || '添加其他事项说明' }}
             </span>
           </div>
@@ -242,7 +244,7 @@
 
           <template v-if="subtaskExpanded">
             <draggable
-              :model-value="subTasks"
+              :list="localSubTasks"
               :item-key="(child: any) => child.id"
               handle=".feishu-subtask-drag"
               :animation="200"
@@ -252,14 +254,14 @@
             >
               <template #item="{ element: child }">
                 <div class="feishu-subtask-row" :data-task-id="child.id">
-                  <span class="feishu-subtask-drag">
+                  <span v-if="!isFullReadOnly" class="feishu-subtask-drag">
                     <Icon icon="tasklist-subtask-drag|svg" />
                   </span>
-                  <button class="feishu-subtask-check" :class="{ checked: child.completed }" @click="emit('toggle-sub-task', child.id)">
+                  <button class="feishu-subtask-check" :class="{ checked: child.completed }" :disabled="isFullReadOnly" @click="emit('toggle-sub-task', child.id)">
                     <Icon v-if="child.completed" icon="ant-design:check-outlined" />
                   </button>
                   <span class="feishu-subtask-name" :class="{ done: child.completed }">{{ child.taskName }}</span>
-                  <div class="feishu-subtask-actions">
+                  <div v-if="!isFullReadOnly" class="feishu-subtask-actions">
                     <a-tooltip title="设置日期">
                       <span class="feishu-subtask-action-btn" @click.stop="openSubTaskDateEditor(child.id)">
                         <Icon icon="ant-design:calendar-outlined" />
@@ -276,7 +278,10 @@
                       </span>
                     </a-tooltip>
                   </div>
-                  <div v-if="child.assigneeName" class="feishu-subtask-avatar" @click.stop="openSubTaskUserSelect(child)">
+                  <div v-if="child.assigneeName && !isFullReadOnly" class="feishu-subtask-avatar" @click.stop="openSubTaskUserSelect(child)">
+                     <a-tooltip :title="child.assigneeName" placement="top"><AvatarDisplay :names="child.assigneeName" :size="20" /></a-tooltip>
+                   </div>
+                   <div v-else-if="child.assigneeName && isFullReadOnly" class="feishu-subtask-avatar">
                     <a-tooltip :title="child.assigneeName" placement="top"><AvatarDisplay :names="child.assigneeName" :size="20" /></a-tooltip>
                   </div>
                 </div>
@@ -293,7 +298,7 @@
               />
             </div>
 
-            <div v-if="showNewSubTaskInput" class="feishu-subtask-row feishu-subtask-input-row">
+            <div v-if="showNewSubTaskInput && !isFullReadOnly" class="feishu-subtask-row feishu-subtask-input-row">
               <span class="feishu-subtask-drag-placeholder"></span>
               <span class="feishu-subtask-check feishu-subtask-check-empty"></span>
               <a-input
@@ -306,7 +311,7 @@
                 @blur="showNewSubTaskInput = false"
               />
             </div>
-            <div v-else v-if="canAddSubTask" class="feishu-subtask-add" @click="showNewSubTaskInput = true">
+            <div v-else-if="canAddSubTask && !isFullReadOnly" class="feishu-subtask-add" @click="showNewSubTaskInput = true">
               <Icon icon="ant-design:plus-outlined" class="feishu-subtask-add-icon" />
               <span>添加子任务</span>
             </div>
@@ -322,7 +327,7 @@
           <AvatarDisplay :names="taskData.followersName" :size="24" :show-name="false" />
         </a-tooltip>
         <span v-else class="follower-empty">将通知 0 人</span>
-        <a-button type="text" size="small" @click="openDrawerUserSelect('followers')">
+        <a-button v-if="!isFullReadOnly" type="text" size="small" @click="openDrawerUserSelect('followers')">
           <Icon icon="ant-design:plus-outlined" />
         </a-button>
       </div>
@@ -348,7 +353,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed, nextTick } from 'vue';
+  import { ref, computed, watch, nextTick } from 'vue';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import Icon from '/@/components/Icon/index';
   import AvatarDisplay from './AvatarDisplay.vue';
@@ -386,6 +391,13 @@
 
   const allTasks = ref<TaskItem[]>([]);
   const taskData = ref<TaskItem | null>(null);
+  const isReadOnly = ref(false);
+  const isAssigneeEdit = computed(() => {
+    if (!isReadOnly.value || !taskData.value) return false;
+    const assigneeIds = (taskData.value.assigneeId || '').split(',').filter(Boolean);
+    return assigneeIds.includes(CURRENT_USER.value);
+  });
+  const isFullReadOnly = computed(() => isReadOnly.value && !isAssigneeEdit.value);
   const showNewSubTaskInput = ref(false);
   const newSubTaskName = ref('');
   const startTimeDayjs = ref<string | null>(null);
@@ -451,6 +463,12 @@
     return allTasks.value.filter((t) => t.pid === taskData.value!.id).sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
   });
 
+  const localSubTasks = ref<TaskItem[]>([]);
+
+  watch(subTasks, (val) => {
+    localSubTasks.value = [...val];
+  }, { immediate: true });
+
   const subtaskProgress = computed(() => {
     const total = subTasks.value.length;
     if (total === 0) return { text: '', percent: 0 };
@@ -489,6 +507,7 @@
   const [registerDrawer, { closeDrawer }] = useDrawerInner(async (data) => {
     taskData.value = data?.task ? { ...data.task } : null;
     allTasks.value = data?.allTasks ? [...data.allTasks] : [];
+    isReadOnly.value = data?.readOnly === true;
     showNewSubTaskInput.value = false;
     newSubTaskName.value = '';
     editingTitle.value = false;
@@ -839,6 +858,12 @@
       background: #f5f6f7;
       border-radius: 4px;
     }
+    &.readonly-text {
+      cursor: default;
+      &:hover {
+        background: transparent;
+      }
+    }
   }
 
   .detail-title-input {
@@ -1014,6 +1039,19 @@
     &:hover {
       color: #3370ff;
     }
+    &.readonly-field {
+      cursor: default;
+      &:hover {
+        color: #8c8c8c;
+      }
+    }
+  }
+
+  .readonly-field {
+    cursor: default !important;
+    &:hover {
+      color: inherit !important;
+    }
   }
 
   .task-checkbox {
diff --git a/src/views/tasklist/components/TaskFlatView.vue b/src/views/tasklist/components/TaskFlatView.vue
new file mode 100644
index 0000000..b9f05f0
--- /dev/null
+++ b/src/views/tasklist/components/TaskFlatView.vue
@@ -0,0 +1,1146 @@
+<template>
+  <div class="task-flat-view">
+    <div class="flat-view-header">
+      <h2 class="flat-view-title">{{ title }}</h2>
+      <span class="task-count">({{ flattenedTasks.length }})</span>
+    </div>
+
+    <div class="flat-view-toolbar">
+      <a-dropdown>
+        <template #overlay>
+          <a-menu @click="onStatusFilterChange">
+            <a-menu-item key="all" :class="{ 'ant-dropdown-menu-item-selected': statusFilter === 'all' }">全部任务</a-menu-item>
+            <a-menu-item key="completed" :class="{ 'ant-dropdown-menu-item-selected': statusFilter === 'completed' }">已完成</a-menu-item>
+            <a-menu-item key="uncompleted" :class="{ 'ant-dropdown-menu-item-selected': statusFilter === 'uncompleted' }">未完成</a-menu-item>
+          </a-menu>
+        </template>
+        <a-button size="small">
+          <Icon icon="ant-design:check-circle-outlined" class="mr-1" />
+          {{ statusFilterLabel }}
+          <Icon icon="ant-design:down-outlined" class="ml-1" />
+        </a-button>
+      </a-dropdown>
+
+      <a-dropdown>
+        <template #overlay>
+          <a-menu @click="onSortChange">
+            <a-menu-item v-for="opt in flatSortOptions" :key="opt.value" :class="{ 'ant-dropdown-menu-item-selected': sortField === opt.value }">
+              <div class="sort-menu-item">
+                <span>{{ opt.label }}</span>
+                <span class="sort-arrows-row">
+                  <span
+                    class="sort-arrow-btn"
+                    :class="{ active: sortField === opt.value && sortDirection === 'asc' }"
+                    @click.stop="onSortDirectionChange(opt.value, 'asc')"
+                  >
+                    <Icon icon="ant-design:arrow-up-outlined" />
+                  </span>
+                  <span
+                    class="sort-arrow-btn"
+                    :class="{ active: sortField === opt.value && sortDirection === 'desc' }"
+                    @click.stop="onSortDirectionChange(opt.value, 'desc')"
+                  >
+                    <Icon icon="ant-design:arrow-down-outlined" />
+                  </span>
+                </span>
+              </div>
+            </a-menu-item>
+          </a-menu>
+        </template>
+        <a-button size="small">
+          <Icon icon="ant-design:sort-ascending-outlined" class="mr-1" />
+          排序: {{ currentSortLabel }}
+          <Icon icon="ant-design:down-outlined" class="ml-1" />
+        </a-button>
+      </a-dropdown>
+
+      <a-popover v-model:open="fieldConfigVisible" placement="bottomRight" trigger="click">
+        <template #content>
+          <div class="field-config-panel">
+            <div class="field-config-title">字段配置</div>
+            <div v-for="field in FIELD_CONFIG" :key="field.key" class="field-config-item" @click="toggleField(field.key)">
+              <span>{{ field.label }}</span>
+              <Icon
+                :icon="visibleFields.includes(field.key) ? 'ant-design:eye-outlined' : 'ant-design:eye-invisible-outlined'"
+                :class="visibleFields.includes(field.key) ? 'field-visible' : 'field-hidden'"
+              />
+            </div>
+          </div>
+        </template>
+        <a-button size="small">
+          <Icon icon="ant-design:setting-outlined" class="mr-1" />
+          字段配置
+        </a-button>
+      </a-popover>
+    </div>
+
+    <div class="flat-view-body">
+      <div class="flat-view-table-header" :style="{ minWidth: totalFieldsWidth + 'px' }">
+        <div class="table-col table-col-drag-handle"></div>
+        <div class="table-col table-col-title">
+          <Icon icon="tasklist-title|svg" class="header-icon" />
+          <span class="header-label">任务标题</span>
+        </div>
+        <template v-for="field in visibleFieldConfigs" :key="field.key">
+          <div class="table-col header-col" :style="{ width: fieldWidthMap[field.key] || '100px' }">
+            <Icon v-if="field.key === 'priority'" icon="tasklist-priority|svg" class="header-icon" />
+            <Icon
+              v-else-if="
+                field.key === 'assigneeName' ||
+                field.key === 'assignName' ||
+                field.key === 'participantName' ||
+                field.key === 'followersName' ||
+                field.key === 'createBy'
+              "
+              icon="tasklist-user|svg"
+              class="header-icon"
+            />
+            <Icon v-else-if="field.key === 'startTime' || field.key === 'endTime'" icon="tasklist-time|svg" class="header-icon" />
+            <Icon v-else :icon="fieldIconMap[field.key]" class="header-icon" />
+            <span class="header-label">{{ field.label }}</span>
+          </div>
+        </template>
+      </div>
+
+      <div v-for="ft in flattenedTasks" :key="ft.task.id" class="task-row" :style="{ minWidth: totalFieldsWidth + 'px' }">
+        <div class="table-col table-col-drag-handle"></div>
+        <div class="table-col table-col-title" @click.stop="emit('task-click', ft.task.id)">
+          <div class="task-indent" :style="{ marginLeft: Math.min(ft.level, 4) * 20 + 'px' }">
+            <span v-if="ft.task.childCount > 0" class="expand-arrow" @click.stop="toggleTaskExpand(ft.task.id)">
+              <Icon :icon="expandedTaskIds.has(ft.task.id) ? 'ant-design:caret-down-outlined' : 'ant-design:caret-right-outlined'" />
+            </span>
+            <span v-else class="expand-arrow-placeholder"></span>
+            <button
+              class="task-checkbox"
+              :class="{ checked: ft.task.completed }"
+              :disabled="!canEditTask(ft.task)"
+              @click.stop="canEditTask(ft.task) && emit('toggle-task', ft.task.id)"
+            >
+              <Icon v-if="ft.task.completed" icon="ant-design:check-outlined" />
+            </button>
+          </div>
+          <span class="task-title" :class="{ completed: ft.task.completed }">{{ ft.task.taskName }}</span>
+          <span v-if="ft.task.childCount > 0" class="task-child-count">
+            <Icon icon="tasklist-subtask|svg" class="child-count-icon" />
+            {{ ft.task.completedChildCount }}/{{ ft.task.childCount }}
+          </span>
+        </div>
+
+        <template v-for="field in visibleFieldConfigs" :key="field.key">
+          <div class="table-col task-field" :style="{ width: fieldWidthMap[field.key] || '100px' }">
+            <template v-if="field.key === 'priority'">
+              <a-dropdown
+                v-if="canEditTask(ft.task)"
+                :trigger="['click']"
+                :get-popup-container="getPopupContainer"
+                :overlay-style="{ minWidth: '100px' }"
+              >
+                <div class="cell-inner editable-cell dropdown-cell">
+                  <span
+                    v-if="ft.task.priority"
+                    class="priority-tag"
+                    :class="{ 'task-field-completed': ft.task.completed }"
+                    :style="{ backgroundColor: getPriorityBg(ft.task.priority), color: '#1f2329' }"
+                    >{{ getPriorityLabel(ft.task.priority) }}</span
+                  >
+                  <span v-else class="field-placeholder">-</span>
+                </div>
+                <template #overlay>
+                  <a-menu @click="({ key }) => onPriorityChange(ft.task.id, key)">
+                    <a-menu-item v-for="opt in PRIORITY_OPTIONS" :key="opt.value" class="priority-menu-item">
+                      <span class="priority-tag" :style="{ backgroundColor: getPriorityBg(opt.value), color: '#1f2329' }">
+                        {{ opt.label }}
+                      </span>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+              <div v-else class="cell-inner">
+                <span
+                  v-if="ft.task.priority"
+                  class="priority-tag"
+                  :class="{ 'task-field-completed': ft.task.completed }"
+                  :style="{ backgroundColor: getPriorityBg(ft.task.priority), color: '#1f2329' }"
+                  >{{ getPriorityLabel(ft.task.priority) }}</span
+                >
+                <span v-else class="field-placeholder">-</span>
+              </div>
+            </template>
+
+            <template v-else-if="field.key === 'assigneeName'">
+              <div v-if="canEditTask(ft.task)" class="cell-inner editable-cell" @click.stop="openUserSelectModal('assignee', ft.task.id)">
+                <template v-if="ft.task.assigneeName">
+                  <AvatarDisplay :names="ft.task.assigneeName" :size="24" :completed="ft.task.completed" />
+                </template>
+                <template v-else>
+                  <span class="field-icon-placeholder" :class="{ 'task-field-completed': ft.task.completed }">
+                    <Icon icon="tasklist-add-user|svg" />
+                  </span>
+                </template>
+              </div>
+              <div v-else class="cell-inner">
+                <template v-if="ft.task.assigneeName">
+                  <AvatarDisplay :names="ft.task.assigneeName" :size="24" :completed="ft.task.completed" />
+                </template>
+                <span v-else class="field-placeholder">-</span>
+              </div>
+            </template>
+
+            <template v-else-if="field.key === 'participantName'">
+              <div v-if="canEditTask(ft.task)" class="cell-inner editable-cell" @click.stop="openUserSelectModal('participant', ft.task.id)">
+                <template v-if="ft.task.participantName">
+                  <AvatarDisplay :names="ft.task.participantName" :size="24" :completed="ft.task.completed" />
+                </template>
+                <template v-else>
+                  <span class="field-icon-placeholder" :class="{ 'task-field-completed': ft.task.completed }">
+                    <Icon icon="tasklist-add-user|svg" />
+                  </span>
+                </template>
+              </div>
+              <div v-else class="cell-inner">
+                <template v-if="ft.task.participantName">
+                  <AvatarDisplay :names="ft.task.participantName" :size="24" :completed="ft.task.completed" />
+                </template>
+                <span v-else class="field-placeholder">-</span>
+              </div>
+            </template>
+
+            <template v-else-if="field.key === 'followersName'">
+              <div v-if="canEditTask(ft.task)" class="cell-inner editable-cell" @click.stop="openUserSelectModal('followers', ft.task.id)">
+                <template v-if="ft.task.followersName">
+                  <AvatarDisplay :names="ft.task.followersName" :size="24" :completed="ft.task.completed" />
+                </template>
+                <template v-else>
+                  <span class="field-icon-placeholder" :class="{ 'task-field-completed': ft.task.completed }">
+                    <Icon icon="tasklist-add-user|svg" />
+                  </span>
+                </template>
+              </div>
+              <div v-else class="cell-inner">
+                <template v-if="ft.task.followersName">
+                  <AvatarDisplay :names="ft.task.followersName" :size="24" :completed="ft.task.completed" />
+                </template>
+                <span v-else class="field-placeholder">-</span>
+              </div>
+            </template>
+
+            <template v-else-if="field.key === 'startTime' || field.key === 'endTime'">
+              <div
+                class="cell-inner date-cell-wrapper"
+                :class="{ 'editable-cell': canEditTask(ft.task) }"
+                @click.stop="canEditTask(ft.task) && !datePickerVisible && startEditCell(ft.task.id, field.key)"
+              >
+                <a-date-picker
+                  v-if="editingCell?.taskId === ft.task.id && editingCell?.field === field.key"
+                  :value="getEditingDate(field.key)"
+                  :open="datePickerVisible"
+                  placeholder="选择日期"
+                  format="YYYY-MM-DD"
+                  :allow-clear="true"
+                  :disabled-date="field.key === 'endTime' ? getDisabledEndDate(ft.task.id) : undefined"
+                  class="inline-date-picker"
+                  @change="(date: any) => onDateCellChange(ft.task.id, date, field.key)"
+                  @open-change="onCellPickerOpenChange"
+                >
+                  <template #renderExtraFooter>
+                    <div style="text-align: right">
+                      <a-button type="link" size="small" danger @click.stop="clearDateCell(ft.task.id, field.key)">清除</a-button>
+                    </div>
+                  </template>
+                </a-date-picker>
+                <template v-else>
+                  <template v-if="(field.key === 'startTime' && ft.task.startTime) || (field.key === 'endTime' && ft.task.endTime)">
+                    <span
+                      class="field-value"
+                      :class="{
+                        'task-field-completed': ft.task.completed,
+                        'overdue-date': field.key === 'endTime' && isOverdue(ft.task),
+                      }"
+                    >
+                      {{ field.key === 'startTime' ? ft.task.startTime : ft.task.endTime }}
+                    </span>
+                  </template>
+                  <template v-else>
+                    <span class="field-icon-placeholder" :class="{ 'task-field-completed': ft.task.completed }">
+                      <Icon icon="tasklist-calendar|svg" />
+                    </span>
+                  </template>
+                </template>
+              </div>
+            </template>
+
+            <template v-else-if="field.key === 'completeTime'">
+              <div class="cell-inner readonly-cell">
+                <span v-if="ft.task.completeTime" class="field-value" :class="{ 'task-field-completed': ft.task.completed }">
+                  {{ ft.task.completeTime.substring(0, 10) }}
+                </span>
+                <span v-else class="field-placeholder">-</span>
+              </div>
+            </template>
+
+            <template v-else-if="field.key === 'subTaskProgress'">
+              <div class="cell-inner readonly-cell">
+                <div v-if="ft.task.childCount > 0" class="progress-cell">
+                  <div class="progress-bar">
+                    <div
+                      class="progress-bar-fill"
+                      :style="{
+                        width: (ft.task.completedChildCount / ft.task.childCount) * 100 + '%',
+                        background: ft.task.completedChildCount > 0 ? '#52c41a' : '#1677ff',
+                      }"
+                    ></div>
+                  </div>
+                </div>
+                <span v-else :class="{ 'task-field-completed': ft.task.completed }">-</span>
+              </div>
+            </template>
+
+            <template v-else-if="field.key === 'remark'">
+              <div class="cell-inner">
+                <span v-if="ft.task.remark" class="field-value" :class="{ 'task-field-completed': ft.task.completed }" :title="ft.task.remark">
+                  {{ ft.task.remark.length > 20 ? ft.task.remark.substring(0, 20) + '...' : ft.task.remark }}
+                </span>
+                <span v-else class="field-placeholder">-</span>
+              </div>
+            </template>
+
+            <template v-else-if="field.key === 'assignName' || field.key === 'createBy'">
+              <div class="cell-inner readonly-cell">
+                <template v-if="getFieldValue(ft.task, field.key)">
+                  <AvatarDisplay :names="getFieldValue(ft.task, field.key)" :size="24" :completed="ft.task.completed" />
+                </template>
+                <span v-else class="field-placeholder">-</span>
+              </div>
+            </template>
+
+            <template v-else-if="field.key === 'taskDesc' || field.key === 'listName'">
+              <div class="cell-inner readonly-cell">
+                <span v-if="getFieldValue(ft.task, field.key)" class="field-value">{{ getFieldValue(ft.task, field.key) }}</span>
+                <span v-else class="field-placeholder">-</span>
+              </div>
+            </template>
+
+            <template v-else>
+              <div class="cell-inner">
+                <span :class="{ 'task-field-completed': ft.task.completed }">{{ getFieldValue(ft.task, field.key) }}</span>
+              </div>
+            </template>
+          </div>
+        </template>
+      </div>
+
+      <div v-if="flattenedTasks.length === 0" class="empty-state">
+        <Icon icon="ant-design:inbox-outlined" class="empty-icon" />
+        <p>暂无任务</p>
+      </div>
+    </div>
+
+    <UserSelectModal
+      ref="userSelectModalRef"
+      :title="userSelectModalType === 'assignee' ? '选择负责人' : userSelectModalType === 'participant' ? '选择参与人' : '选择关注人'"
+      :user-ids="userSelectModalCurrentIds"
+      :user-names="userSelectModalCurrentNames"
+      :multiple="true"
+      @confirm="onUserSelectConfirm"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, nextTick } from 'vue';
+  import dayjs from 'dayjs';
+  import Icon from '/@/components/Icon/index';
+  import AvatarDisplay from './AvatarDisplay.vue';
+  import UserSelectModal from './UserSelectModal.vue';
+  import { FIELD_CONFIG, SORT_OPTIONS, MAX_TASK_DEPTH } from '../types';
+  import { PRIORITY_OPTIONS, getPriorityBg, getPriorityLabel, isOverdue } from '../utils/taskUtils';
+  import type { TaskItem, StatusFilter, SortField, SortDirection, FieldKey, FlatTaskItem } from '../types';
+
+  const props = defineProps<{
+    title: string;
+    tasks: TaskItem[];
+    statusFilter: StatusFilter;
+    sortField: SortField;
+    sortDirection: SortDirection;
+    visibleFields: FieldKey[];
+    editable?: boolean;
+    taskEditMap?: Map<string, boolean>;
+  }>();
+
+  const emit = defineEmits<{
+    'toggle-task': [taskId: string];
+    'task-click': [taskId: string];
+    'update-task-field': [taskId: string, field: string, value: any];
+    'update-task-fields': [taskId: string, fields: Record<string, any>];
+    'update:statusFilter': [value: StatusFilter];
+    'update:sortField': [value: SortField];
+    'update:sortDirection': [value: SortDirection];
+    'update:visibleFields': [value: FieldKey[]];
+    'load-subtasks': [taskId: string, mainId: string];
+  }>();
+
+  const fieldConfigVisible = ref(false);
+  const expandedTaskIds = ref<Set<string>>(new Set());
+  const loadedChildrenIds = ref<Set<string>>(new Set());
+
+  const visibleFieldConfigs = computed(() => {
+    return FIELD_CONFIG.filter((f) => props.visibleFields.includes(f.key));
+  });
+
+  const flatSortOptions = computed(() => {
+    return SORT_OPTIONS.filter((o) => o.value !== 'sortOrder');
+  });
+
+  const fieldWidthMap: Record<string, string> = {
+    listName: '140px',
+    taskDesc: '140px',
+    priority: '120px',
+    assigneeName: '120px',
+    assignName: '120px',
+    participantName: '120px',
+    followersName: '120px',
+    createBy: '120px',
+    startTime: '180px',
+    endTime: '180px',
+    completeTime: '140px',
+    createTime: '160px',
+    updateTime: '160px',
+    remark: '160px',
+    subTaskProgress: '110px',
+  };
+
+  const fieldIconMap: Record<string, string> = {
+    taskDesc: 'ant-design:align-left-outlined',
+    priority: 'ant-design:flag-outlined',
+    assigneeName: 'inline-user',
+    assignName: 'inline-user',
+    participantName: 'inline-user',
+    followersName: 'inline-user',
+    createBy: 'inline-user',
+    startTime: 'ant-design:calendar-outlined',
+    endTime: 'ant-design:clock-circle-outlined',
+    completeTime: 'ant-design:check-circle-outlined',
+    createTime: 'ant-design:plus-circle-outlined',
+    updateTime: 'ant-design:sync-outlined',
+    remark: 'ant-design:file-text-outlined',
+    subTaskProgress: 'ant-design:pie-chart-outlined',
+    listName: 'ant-design:file-text-outlined',
+  };
+
+  const totalFieldsWidth = computed(() => {
+    let w = 400 + 40;
+    for (const f of visibleFieldConfigs.value) {
+      w += parseInt(fieldWidthMap[f.key] || '100', 10);
+    }
+    return w + 48;
+  });
+
+  const statusFilterLabel = computed(() => {
+    const map: Record<StatusFilter, string> = { all: '全部任务', completed: '已完成', uncompleted: '未完成' };
+    return map[props.statusFilter];
+  });
+
+  const currentSortLabel = computed(() => {
+    const opt = flatSortOptions.value.find((o) => o.value === props.sortField);
+    if (opt) return opt.label;
+    const allOpt = SORT_OPTIONS.find((o) => o.value === props.sortField);
+    return allOpt ? allOpt.label : '';
+  });
+
+  const allTaskMap = computed(() => {
+    const map = new Map<string, TaskItem>();
+    for (const t of props.tasks) {
+      map.set(t.id, t);
+    }
+    return map;
+  });
+
+  const flatSortedTasks = computed(() => {
+    let result = [...props.tasks];
+
+    if (props.statusFilter === 'completed') {
+      result = result.filter((t) => t.completed);
+    } else if (props.statusFilter === 'uncompleted') {
+      result = result.filter((t) => !t.completed);
+    }
+
+    const dir = props.sortDirection === 'asc' ? 1 : -1;
+    result.sort((a, b) => {
+      const va = (a as any)[props.sortField] || '';
+      const vb = (b as any)[props.sortField] || '';
+      if (va < vb) return -1 * dir;
+      if (va > vb) return 1 * dir;
+      return 0;
+    });
+
+    return result;
+  });
+
+  const flattenedTasks = computed(() => {
+    const result: FlatTaskItem[] = [];
+    const visited = new Set<string>();
+
+    for (const task of flatSortedTasks.value) {
+      if (visited.has(task.id)) continue;
+      if (!task.pid || task.pid === task.groupId || !allTaskMap.value.has(task.pid)) {
+        collectFlatTasks(task, 0, result, visited);
+      }
+    }
+
+    return result;
+  });
+
+  function collectFlatTasks(task: TaskItem, level: number, result: FlatTaskItem[], visited: Set<string>) {
+    if (visited.has(task.id)) return;
+    if (level >= MAX_TASK_DEPTH) return;
+    visited.add(task.id);
+    result.push({ task, level });
+    if (task.childCount > 0 && expandedTaskIds.value.has(task.id)) {
+      const childTasks = props.tasks.filter((t) => t.pid === task.id);
+      const sorted = [...childTasks].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
+      for (const child of sorted) {
+        collectFlatTasks(child, level + 1, result, visited);
+      }
+    }
+  }
+
+  function toggleTaskExpand(taskId: string) {
+    const newSet = new Set(expandedTaskIds.value);
+    if (newSet.has(taskId)) {
+      newSet.delete(taskId);
+      expandedTaskIds.value = newSet;
+    } else {
+      newSet.add(taskId);
+      expandedTaskIds.value = newSet;
+      const task = props.tasks.find((t) => t.id === taskId);
+      if (task && task.childCount > 0 && !loadedChildrenIds.value.has(taskId) && task.mainId) {
+        loadedChildrenIds.value = new Set([...loadedChildrenIds.value, taskId]);
+        emit('load-subtasks', taskId, task.mainId);
+      }
+    }
+  }
+
+  function canEditTask(task: TaskItem): boolean {
+    if (!props.editable && !props.taskEditMap) return false;
+    if (props.editable) return true;
+    if (props.taskEditMap) return props.taskEditMap.has(task.id);
+    return false;
+  }
+
+  function getFieldValue(task: TaskItem, key: FieldKey): string {
+    return (task as any)[key] || '';
+  }
+
+  function getPopupContainer() {
+    return document.body;
+  }
+
+  function onStatusFilterChange({ key }: { key: string }) {
+    emit('update:statusFilter', key as StatusFilter);
+  }
+
+  function onSortChange({ key }: { key: string }) {
+    if (props.sortField === key) {
+      emit('update:sortDirection', props.sortDirection === 'asc' ? 'desc' : 'asc');
+    } else {
+      emit('update:sortField', key as SortField);
+      emit('update:sortDirection', 'desc');
+    }
+  }
+
+  function onSortDirectionChange(field: string, dir: string) {
+    emit('update:sortField', field as SortField);
+    emit('update:sortDirection', dir as SortDirection);
+  }
+
+  function toggleField(fieldKey: FieldKey) {
+    const fields = [...props.visibleFields];
+    const idx = fields.indexOf(fieldKey);
+    if (idx >= 0) {
+      fields.splice(idx, 1);
+    } else {
+      fields.push(fieldKey);
+    }
+    emit('update:visibleFields', fields);
+  }
+
+  function onPriorityChange(taskId: string, value: any) {
+    if (value !== undefined && value !== null) {
+      emit('update-task-field', taskId, 'priority', value);
+    }
+  }
+
+  const editingCell = ref<{ taskId: string; field: string } | null>(null);
+  const datePickerVisible = ref(false);
+
+  function startEditCell(taskId: string, field: string) {
+    editingCell.value = { taskId, field };
+    datePickerVisible.value = true;
+  }
+
+  function cancelEdit() {
+    editingCell.value = null;
+    datePickerVisible.value = false;
+  }
+
+  function getEditingDate(fieldKey: string) {
+    const taskId = editingCell.value?.taskId;
+    if (!taskId) return null;
+    const task = props.tasks.find((t) => t.id === taskId);
+    if (!task) return null;
+    const val = fieldKey === 'startTime' ? task.startTime : task.endTime;
+    return val ? dayjs(val.substring(0, 10)) : null;
+  }
+
+  function getTaskField(taskId: string, field: string): string {
+    const task = props.tasks.find((t) => t.id === taskId);
+    if (!task) return '';
+    return (task as any)[field] || '';
+  }
+
+  function getDisabledEndDate(taskId: string) {
+    return (current: any) => {
+      if (!current) return false;
+      const start = getTaskField(taskId, 'startTime');
+      if (!start) return false;
+      return dayjs(current).isBefore(dayjs(start), 'day');
+    };
+  }
+
+  function onDateCellChange(taskId: string, date: any, fieldKey: string) {
+    const task = props.tasks.find((t) => t.id === taskId);
+    const value = date ? dayjs(date).format('YYYY-MM-DD') + ' 00:00:00' : '';
+    const updates: Record<string, string> = {};
+    if (fieldKey === 'startTime') {
+      updates.startTime = value;
+      updates.endTime = normalizeDate(task?.endTime);
+    } else if (fieldKey === 'endTime') {
+      updates.startTime = normalizeDate(task?.startTime);
+      updates.endTime = value;
+    }
+    emit('update-task-fields', taskId, updates);
+    cancelEdit();
+  }
+
+  function clearDateCell(taskId: string, fieldKey: string) {
+    const task = props.tasks.find((t) => t.id === taskId);
+    const updates: Record<string, string> = {};
+    if (fieldKey === 'startTime') {
+      updates.startTime = '';
+      updates.endTime = normalizeDate(task?.endTime);
+    } else if (fieldKey === 'endTime') {
+      updates.startTime = normalizeDate(task?.startTime);
+      updates.endTime = '';
+    }
+    emit('update-task-fields', taskId, updates);
+    cancelEdit();
+  }
+
+  function onCellPickerOpenChange(open: boolean) {
+    if (!open) {
+      setTimeout(() => {
+        if (editingCell.value) {
+          cancelEdit();
+        }
+      }, 100);
+    }
+  }
+
+  function normalizeDate(val: string | null | undefined): string {
+    if (!val) return '';
+    if (val.length >= 19) return val.substring(0, 19);
+    return val.substring(0, 10) + ' 00:00:00';
+  }
+
+  const userSelectModalRef = ref();
+  const userSelectModalType = ref<'assignee' | 'followers' | 'participant'>('assignee');
+  const userSelectModalTaskId = ref('');
+  const userSelectModalCurrentIds = ref('');
+  const userSelectModalCurrentNames = ref('');
+
+  function openUserSelectModal(type: 'assignee' | 'followers' | 'participant', taskId: string) {
+    userSelectModalType.value = type;
+    userSelectModalTaskId.value = taskId;
+
+    const task = props.tasks.find((t) => t.id === taskId);
+    if (type === 'assignee') {
+      userSelectModalCurrentIds.value = task?.assigneeId || '';
+      userSelectModalCurrentNames.value = task?.assigneeName || '';
+    } else if (type === 'participant') {
+      userSelectModalCurrentIds.value = task?.participantId || '';
+      userSelectModalCurrentNames.value = task?.participantName || '';
+    } else {
+      userSelectModalCurrentIds.value = task?.followersId || '';
+      userSelectModalCurrentNames.value = task?.followersName || '';
+    }
+
+    nextTick(() => {
+      userSelectModalRef.value?.open();
+    });
+  }
+
+  function onUserSelectConfirm(userIds: string, userNames: string) {
+    const type = userSelectModalType.value;
+    const taskId = userSelectModalTaskId.value;
+    if (taskId) {
+      if (type === 'assignee') {
+        emit('update-task-fields', taskId, { assigneeId: userIds, assigneeName: userNames });
+      } else if (type === 'participant') {
+        emit('update-task-fields', taskId, { participantId: userIds, participantName: userNames });
+      } else {
+        emit('update-task-fields', taskId, { followersId: userIds, followersName: userNames });
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .task-flat-view {
+    flex: 1;
+    height: 100%;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .flat-view-header {
+    padding: 16px 24px;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  .flat-view-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1f1f1f;
+  }
+
+  .task-count {
+    font-size: 14px;
+    color: #8f959e;
+  }
+
+  .flat-view-toolbar {
+    padding: 8px 24px;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+  }
+
+  .flat-view-body {
+    flex: 1;
+    overflow: auto;
+  }
+
+  .flat-view-table-header {
+    padding: 0 8px;
+    height: 40px;
+    background: #fafafa;
+    border-bottom: 1px solid #e5e6eb;
+    display: flex;
+    align-items: stretch;
+    font-size: 14px;
+    color: #1f2329;
+    font-weight: 500;
+    flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+
+    .header-col {
+      padding: 0 12px;
+      gap: 4px;
+      box-sizing: border-box;
+    }
+
+    .header-icon {
+      color: #8f959e;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    .header-label {
+      white-space: nowrap;
+      overflow: visible;
+    }
+  }
+
+  .table-col {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  .table-col-drag-handle {
+    width: 24px;
+    min-width: 24px;
+    justify-content: center;
+  }
+
+  .table-col-title {
+    width: 400px;
+    min-width: 400px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .task-indent {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+
+  .expand-arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    font-size: 11px;
+    color: #999;
+    cursor: pointer;
+    border-radius: 2px;
+    flex-shrink: 0;
+
+    &:hover {
+      color: #1677ff;
+      background: #e6f4ff;
+    }
+  }
+
+  .expand-arrow-placeholder {
+    width: 16px;
+    height: 16px;
+  }
+
+  .task-row {
+    display: flex;
+    align-items: stretch;
+    height: 46px;
+    padding: 0 8px;
+    border-bottom: 1px solid #f0f0f0;
+    font-size: 14px;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    &:hover {
+      background: #f5f6f7;
+    }
+  }
+
+  .task-checkbox {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 2px solid #d9d9d9;
+    background: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    padding: 0;
+    flex-shrink: 0;
+
+    &:hover {
+      border-color: #52c41a;
+    }
+
+    &.checked {
+      background: #52c41a;
+      border-color: #52c41a;
+      color: #fff;
+      font-size: 11px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+
+      &:hover {
+        border-color: #d9d9d9;
+      }
+    }
+  }
+
+  .task-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #1f2329;
+    flex-shrink: 1;
+    min-width: 0;
+    padding: 2px 6px;
+    border-radius: 4px;
+    transition: background 0.15s;
+
+    &.completed {
+      text-decoration: line-through;
+      color: #c0c4cc;
+    }
+  }
+
+  .task-row:hover .task-title {
+    background: #fff;
+  }
+
+  .task-child-count {
+    font-size: 11px;
+    color: #8c8c8c;
+    margin-left: 6px;
+    white-space: nowrap;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .child-count-icon {
+    font-size: 12px;
+    color: #8f959e;
+  }
+
+  .task-field {
+    color: #646a73;
+    overflow: visible;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .task-field-completed {
+    color: #c0c4cc;
+  }
+
+  .overdue-date {
+    color: #f5222d !important;
+    font-weight: 500;
+  }
+
+  .cell-inner {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0 12px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    transition: border-color 0.15s;
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: #d0d3d6;
+    }
+  }
+
+  .date-cell-wrapper {
+    position: relative;
+  }
+
+  .inline-date-picker {
+    width: 100% !important;
+
+    :deep(.ant-picker) {
+      width: 100%;
+    }
+  }
+
+  .editable-cell {
+    cursor: pointer;
+  }
+
+  .dropdown-cell {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      right: 6px;
+      top: 50%;
+      transform: translateY(-50%);
+      border: 4px solid transparent;
+      border-top-color: #999;
+      opacity: 0;
+      transition: opacity 0.15s;
+      pointer-events: none;
+    }
+
+    &:hover::after {
+      opacity: 1;
+    }
+  }
+
+  .readonly-cell {
+    &:hover {
+      border-color: transparent;
+    }
+  }
+
+  .field-value {
+    color: #646a73;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .field-placeholder {
+    color: #c0c4cc;
+    font-size: 14px;
+  }
+
+  .field-icon-placeholder {
+    color: #8f959e;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    transition: color 0.15s;
+
+    &:hover {
+      color: #3370ff;
+    }
+  }
+
+  .priority-tag {
+    display: inline-block;
+    padding: 1px 8px;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: nowrap;
+    font-weight: 500;
+
+    &.task-field-completed {
+      opacity: 0.5;
+    }
+  }
+
+  .priority-menu-item {
+    display: flex;
+    align-items: center;
+    min-height: 32px;
+  }
+
+  .progress-cell {
+    display: flex;
+    align-items: center;
+  }
+
+  .progress-bar {
+    width: 60px;
+    height: 6px;
+    background: #f0f0f0;
+    border-radius: 3px;
+    overflow: hidden;
+  }
+
+  .progress-bar-fill {
+    height: 100%;
+    border-radius: 3px;
+    transition: width 0.3s ease;
+  }
+
+  .sort-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 160px;
+  }
+
+  .sort-arrows-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .sort-arrow-btn {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+    color: #bfbfbf;
+    font-size: 14px;
+    transition:
+      color 0.15s,
+      background 0.15s;
+
+    &.active {
+      color: #1677ff;
+      background: #e6f4ff;
+    }
+
+    &:hover {
+      color: #1677ff;
+    }
+  }
+
+  .field-config-panel {
+    .field-config-title {
+      font-weight: 600;
+      margin-bottom: 8px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    .field-config-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 6px 4px;
+      cursor: pointer;
+      border-radius: 4px;
+
+      &:hover {
+        background: #f5f5f5;
+      }
+    }
+
+    .field-visible {
+      color: #1677ff;
+    }
+
+    .field-hidden {
+      color: #d9d9d9;
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 24px;
+    color: #bbb;
+
+    .empty-icon {
+      font-size: 48px;
+      margin-bottom: 12px;
+    }
+
+    p {
+      margin: 0;
+      font-size: 14px;
+    }
+  }
+
+  .mr-1 {
+    margin-right: 4px;
+  }
+
+  .ml-1 {
+    margin-left: 4px;
+  }
+</style>
diff --git a/src/views/tasklist/components/TaskSidebar.vue b/src/views/tasklist/components/TaskSidebar.vue
index fc847af..48ab97e 100644
--- a/src/views/tasklist/components/TaskSidebar.vue
+++ b/src/views/tasklist/components/TaskSidebar.vue
@@ -47,22 +47,24 @@
       <div class="sidebar-favorites-header">
         <Icon icon="tasklist-task-list|svg" class="sidebar-favorites-icon" />
         <span class="sidebar-favorites-name">收藏清单</span>
-        <Icon icon="ant-design:plus-outlined" class="sidebar-group-add" @click.stop="startNewList('')" />
+        <a-dropdown :trigger="['click']">
+          <Icon icon="ant-design:plus-outlined" class="sidebar-group-add" @click.stop />
+          <template #overlay>
+            <a-menu @click="onAddMenuClick">
+              <a-menu-item key="new-list">
+                <Icon icon="ant-design:file-add-outlined" class="mr-1" />
+                新建清单
+              </a-menu-item>
+              <a-menu-item key="new-group">
+                <Icon icon="ant-design:folder-add-outlined" class="mr-1" />
+                新建分组
+              </a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
       </div>
       <div class="sidebar-favorites-items">
-        <div v-if="showNewListInput && newListGroupId === ''" class="sidebar-new-item-row">
-          <Icon icon="ant-design:file-text-outlined" class="sidebar-item-icon" style="opacity: 0.4" />
-          <a-input
-            v-model:value="newListName"
-            size="small"
-            placeholder="输入清单名称..."
-            autofocus
-            style="flex: 1"
-            @press-enter="submitNewList"
-            @blur="showNewListInput = false"
-          />
-        </div>
-        <draggable :model-value="ungroupedTaskLists" group="tasklists" item-key="id" handle=".list-drag-handle" :animation="200" @end="onDragEnd">
+        <draggable :list="localUngroupedTaskLists" group="tasklists" item-key="id" handle=".list-drag-handle" :animation="200" @end="onDragEnd">
           <template #item="{ element: taskList }">
             <div
               v-if="renamingId !== taskList.id"
@@ -97,13 +99,25 @@
             <div v-else class="sidebar-item sidebar-item-renaming">
               <span class="list-drag-handle-placeholder"></span>
               <Icon icon="ant-design:file-text-outlined" class="sidebar-item-icon" style="opacity: 0.4" />
-              <a-input v-model:value="renameValue" size="small" style="flex: 1" @press-enter="confirmInlineRename" @blur="confirmInlineRename" />
+              <a-input ref="renameInputRef" v-model:value="renameValue" size="small" style="flex: 1" @press-enter="confirmInlineRename" @blur="confirmInlineRename" />
             </div>
           </template>
         </draggable>
+        <div v-if="showNewListInput && newListGroupId === ''" class="sidebar-new-item-row">
+          <Icon icon="ant-design:file-text-outlined" class="sidebar-item-icon" style="opacity: 0.4" />
+          <a-input
+            v-model:value="newListName"
+            size="small"
+            placeholder="输入清单名称..."
+            autofocus
+            style="flex: 1"
+            @press-enter="submitNewList"
+            @blur="showNewListInput = false"
+          />
+        </div>
       </div>
 
-      <draggable :model-value="userGroups" group="tasklistgroups" item-key="id" :animation="200" drag-class="group-drag-ghost" @start="onGroupDragStart" @end="onGroupDragEnd">
+      <draggable :list="localUserGroups" group="tasklistgroups" item-key="id" :animation="200" drag-class="group-drag-ghost" @start="onGroupDragStart" @end="onGroupDragEnd">
         <template #item="{ element: group }">
           <div :data-group-id="group.id" :class="{ 'group-being-dragged': draggingGroupId === group.id }">
             <div
@@ -134,7 +148,7 @@
         </div>
         <div v-if="group.delFlag !== 1 && renamingId === group.id" class="sidebar-group-header sidebar-group-renaming" @click.stop>
           <Icon icon="tasklist-arrow-down|svg" class="group-collapse-arrow" :class="{ collapsed: collapsedGroups[group.id] || draggingGroupId === group.id }" />
-          <a-input v-model:value="renameValue" size="small" style="flex: 1" @press-enter="confirmInlineRename" @blur="confirmInlineRename" />
+          <a-input ref="renameInputRef" v-model:value="renameValue" size="small" style="flex: 1" @press-enter="confirmInlineRename" @blur="confirmInlineRename" />
         </div>
         <template v-if="group.delFlag !== 1 && !collapsedGroups[group.id]">
           <div class="sidebar-group-items" :data-group-id="group.id">
@@ -151,7 +165,7 @@
               />
             </div>
             <draggable
-              :model-value="getGroupTaskLists(group)"
+              :list="getLocalGroupTaskLists(group)"
               group="tasklists"
               item-key="id"
               handle=".list-drag-handle"
@@ -192,12 +206,12 @@
                 <div v-else class="sidebar-item sidebar-item-renaming">
                   <span class="list-drag-handle-placeholder"></span>
                   <Icon icon="ant-design:file-text-outlined" class="sidebar-item-icon" style="opacity: 0.4" />
-                  <a-input v-model:value="renameValue" size="small" style="flex: 1" @press-enter="confirmInlineRename" @blur="confirmInlineRename" />
+                  <a-input ref="renameInputRef" v-model:value="renameValue" size="small" style="flex: 1" @press-enter="confirmInlineRename" @blur="confirmInlineRename" />
                 </div>
               </template>
             </draggable>
             <div
-              v-if="group.taskLists.filter((l) => l.delFlag !== 1).length === 0 && !(showNewListInput && newListGroupId === group.id)"
+              v-if="getLocalGroupTaskLists(group).length === 0 && !(showNewListInput && newListGroupId === group.id)"
               class="sidebar-empty-hint"
             >
               可拖拽清单加入该分组
@@ -229,7 +243,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed } from 'vue';
+  import { ref, computed, watch, nextTick } from 'vue';
   import Icon from '/@/components/Icon/index';
   import draggable from 'vuedraggable';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -253,6 +267,7 @@
     'create-group': [name: string];
     'rename-list': [listId: string, newName: string];
     'delete-list': [listId: string];
+    'remove-favorite': [listId: string];
     'rename-group': [groupId: string, newName: string];
     'delete-group': [groupId: string];
     'quick-access-tab-click': [tabKey: string];
@@ -277,14 +292,46 @@
     return [];
   });
 
-  function getGroupTaskLists(group: TaskListGroup) {
-    return [...group.taskLists].filter((l) => l.delFlag !== 1).sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
-  }
-
   const userGroups = computed(() => {
     return props.taskListGroups.filter((g) => g.id !== '__ungrouped__' && g.delFlag !== 1).sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
   });
 
+  // 本地可变副本，供 draggable :list 模式直接修改，实现乐观更新
+  const localUngroupedTaskLists = ref<any[]>([]);
+  const localUserGroups = ref<any[]>([]);
+  const localGroupTaskListsMap = ref<Record<string, any[]>>({});
+
+  watch(ungroupedTaskLists, (val) => {
+    localUngroupedTaskLists.value = [...val];
+  }, { immediate: true });
+
+  watch(userGroups, (val) => {
+    localUserGroups.value = val.map((g) => ({
+      ...g,
+      taskLists: [...(g.taskLists || [])],
+    }));
+    // 同步分组内清单到 map
+    const newMap: Record<string, any[]> = {};
+    for (const g of val) {
+      newMap[g.id] = [...(g.taskLists || [])].filter((l) => l.delFlag !== 1).sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
+    }
+    localGroupTaskListsMap.value = newMap;
+  }, { immediate: true });
+
+  function getGroupTaskLists(group: any) {
+    return [...group.taskLists].filter((l) => l.delFlag !== 1).sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
+  }
+
+  function getLocalGroupTaskLists(group: any) {
+    if (localGroupTaskListsMap.value[group.id]) {
+      return localGroupTaskListsMap.value[group.id];
+    }
+    // 兜底：如果没有本地缓存，从原始数据计算
+    const list = getGroupTaskLists(group);
+    localGroupTaskListsMap.value[group.id] = list;
+    return list;
+  }
+
   const hoveredListId = ref('');
   const collapsedGroups = ref<Record<string, boolean>>({});
   const showNewGroupInput = ref(false);
@@ -295,6 +342,14 @@
   const renamingId = ref('');
   const renamingType = ref<'list' | 'group'>('list');
   const renameValue = ref('');
+  const renameInputRef = ref<HTMLInputElement | null>(null);
+
+  watch(renamingId, async (val) => {
+    if (val) {
+      await nextTick();
+      renameInputRef.value?.focus();
+    }
+  });
 
   const draggingGroupId = ref('');
   const dragStartX = ref(0);
@@ -363,6 +418,8 @@
     const itemEl = evt.item;
     const groupId = itemEl?.dataset?.groupId || itemEl?.closest('[data-group-id]')?.dataset?.groupId;
     if (!groupId) return;
+    // 拖拽结束后保持分组折叠状态，防止展开跳动
+    collapsedGroups.value[groupId] = true;
     const newIndex = evt.newIndex ?? 0;
     emit('move-group', groupId, newIndex + 1);
   }
@@ -372,6 +429,15 @@
     return perm === '1' || perm === '2';
   }
 
+  function onAddMenuClick({ key }: { key: string }) {
+    if (key === 'new-list') {
+      startNewList('');
+    } else if (key === 'new-group') {
+      showNewGroupInput.value = true;
+      newGroupName.value = '';
+    }
+  }
+
   function startNewList(groupId: string) {
     showNewListInput.value = true;
     newListGroupId.value = groupId;
@@ -397,12 +463,12 @@
     } else if (key === 'remove') {
       createConfirm({
         iconType: 'warning',
-        title: '确认删除',
-        content: '删除任务清单后，其下所有任务也将被删除，确定要删除吗？',
+        title: '确认移除',
+        content: '确定从收藏清单中移除吗？',
         okText: '确认',
         cancelText: '取消',
         onOk: () => {
-          emit('delete-list', listId);
+          emit('remove-favorite', listId);
         },
       });
     }
diff --git a/src/views/tasklist/index.vue b/src/views/tasklist/index.vue
index ccdf926..26c82ca 100644
--- a/src/views/tasklist/index.vue
+++ b/src/views/tasklist/index.vue
@@ -18,8 +18,10 @@
       @quick-access-tab-click="onQuickAccessTabClick"
       @move-list="onMoveList"
       @move-group="onMoveGroup"
+      @remove-favorite="onRemoveFavorite"
     />
     <TaskContent
+      v-if="!isFlatView"
       :current-list="currentList"
       :task-list-groups="showListGroupView ? quickAccessGroups : taskListGroups"
       :status-filter="statusFilter"
@@ -28,12 +30,10 @@
       :sort-direction="sortDirection"
       :visible-fields="visibleFields"
       :show-list-group-view="showListGroupView"
-      :list-group-tab="listGroupTab"
       :favorite-id-map="favoriteIdMap"
       @create-task="onCreateTask"
       @toggle-task="onToggleTask"
       @task-click="onTaskClick"
-      @create-group="onCreateGroupFromContent"
       @add-group="onAddGroup"
       @update-task-field="onUpdateTaskField"
       @update-task-fields="onUpdateTaskFields"
@@ -42,7 +42,6 @@
       @update:sort-field="(v) => (sortField = v)"
       @update:sort-direction="(v) => (sortDirection = v)"
       @update:visible-fields="(v) => (visibleFields = v)"
-      @update:list-group-tab="onQuickAccessTabClick"
       @list-select="onListSelect"
       @open-collaborator="onOpenCollaborator"
       @add-to-favorites="onAddToFavorites"
@@ -54,6 +53,26 @@
       @rename-group="onRenameTaskGroup"
       @delete-group="onDeleteTaskGroup"
     />
+    <TaskFlatView
+      v-else
+      :title="flatViewTitle"
+      :tasks="flatTasks"
+      :status-filter="statusFilter"
+      :sort-field="sortField"
+      :sort-direction="sortDirection"
+      :visible-fields="visibleFields"
+      :editable="flatViewEditable"
+      :task-edit-map="flatTaskEditMap"
+      @toggle-task="onToggleTask"
+      @task-click="onTaskClick"
+      @update-task-field="onUpdateTaskField"
+      @update-task-fields="onUpdateTaskFields"
+      @update:status-filter="(v) => (statusFilter = v)"
+      @update:sort-field="(v) => (sortField = v)"
+      @update:sort-direction="(v) => (sortDirection = v)"
+      @update:visible-fields="(v) => (visibleFields = v)"
+      @load-subtasks="onLoadSubtasks"
+    />
     <CreateTaskModal @register="registerTaskModal" @success="onTaskCreated" />
     <CreateListModal @register="registerListModal" @success="onListCreated" />
     <TaskDetailDrawer
@@ -76,11 +95,13 @@
 </template>
 
 <script lang="ts" name="tasklist-index-page" setup>
-  import { ref, reactive, computed, onMounted } from 'vue';
+  import { ref, computed, onMounted } from 'vue';
   import { useModal } from '/@/components/Modal';
   import { useDrawer } from '/@/components/Drawer';
+  import { useUserStore } from '/@/store/modules/user';
   import TaskSidebar from './components/TaskSidebar.vue';
   import TaskContent from './components/TaskContent.vue';
+  import TaskFlatView from './components/TaskFlatView.vue';
   import CreateTaskModal from './components/CreateTaskModal.vue';
   import CreateListModal from './components/CreateListModal.vue';
   import TaskDetailDrawer from './components/TaskDetailDrawer.vue';
@@ -93,7 +114,6 @@
     removeFavoriteGroup,
     deleteTaskListApi,
     renameTaskList,
-    saveOrUpdate,
     renameGroup,
     getMyOwnLists,
     getMyCollabLists,
@@ -138,7 +158,6 @@
   const sortField = ref<SortField>('sortOrder');
   const sortDirection = ref<SortDirection>('asc');
   const showListGroupView = ref(false);
-  const listGroupTab = ref('all');
   const visibleFields = ref<FieldKey[]>([...DEFAULT_VISIBLE_FIELDS]);
   const currentDrawerTaskId = ref<string>('');
 
@@ -147,23 +166,35 @@
   const [registerDetailDrawer, { openDrawer: openDetailDrawer }] = useDrawer();
 
   const collaboratorModalRef = ref<InstanceType<typeof CollaboratorModal> | null>(null);
+  const defaultGroupRealIdMap = ref<Record<string, string>>({});
 
-  const favoriteIdMap = reactive(new Map<string, string>());
-  const permissionMap = reactive(new Map<string, string>());
+  const userStore = useUserStore();
+
+  const flatTasks = ref<TaskItem[]>([]);
+  const flatViewTitle = ref('');
+  const flatViewEditable = ref(false);
+  const flatTaskEditMap = ref<Map<string, boolean>>(new Map());
+
+  const isFlatView = computed(() => currentView.value === 'my-tasks' || currentView.value === 'followed');
+
+  const favoriteIdMap = ref(new Map<string, string>());
+  const permissionMap = ref(new Map<string, string>());
 
   async function loadFavorites() {
     try {
       const data: any[] = await getMyFavorites();
-      favoriteIdMap.clear();
-      permissionMap.clear();
+      const newFavMap = new Map<string, string>();
+      const newPermMap = new Map<string, string>();
       for (const fav of data) {
         if (fav.type === '1' && fav.mainId) {
-          favoriteIdMap.set(fav.mainId, fav.id);
+          newFavMap.set(fav.mainId, fav.id);
           if (fav.permission) {
-            permissionMap.set(fav.mainId, fav.permission);
+            newPermMap.set(fav.mainId, fav.permission);
           }
         }
       }
+      favoriteIdMap.value = newFavMap;
+      permissionMap.value = newPermMap;
       taskListGroups.value = buildTree(data);
     } catch (e) {
       console.error('[TaskList] 加载收藏列表失败', e);
@@ -232,6 +263,7 @@
 
   onMounted(() => {
     loadFavorites();
+    onViewSelect('my-tasks');
   });
 
   function findListInGroups(groups: TaskListGroup[], listId: string): TaskList | null {
@@ -299,6 +331,17 @@
       pid: tr.pid || '',
       hasChild: tr.hasChild || '0',
       sortOrder: tr.sortOrder ?? 0,
+      isDefault: tr.isDefault,
+    };
+  }
+
+  function buildFlatTaskItem(tr: any): TaskItem {
+    const base = buildTaskItem(tr);
+    return {
+      ...base,
+      listName: tr.listName || '',
+      mainId: tr.mainId || '',
+      myPermission: tr.myPermission || '',
     };
   }
 
@@ -322,10 +365,13 @@
           taskListId: listId,
           collapsed: false,
           tasks: [],
+          isDefault: gr.isDefault,
+          sortOrder: gr.sortOrder ?? 0,
         };
         groupMap.set(gr.id, tg);
-        if (gr.taskName === '默认分组') {
+        if (gr.isDefault === 1) {
           defaultGroup = tg;
+          defaultGroupRealIdMap.value[listId] = gr.id;
         }
       }
 
@@ -336,6 +382,7 @@
           taskListId: listId,
           collapsed: false,
           tasks: [],
+          sortOrder: 0,
         };
       }
 
@@ -365,21 +412,8 @@
         targetGroup.tasks.push(taskItem);
       }
 
-      const resultGroups: TaskGroup[] = [];
-      if (defaultGroup) {
-        resultGroups.push(defaultGroup);
-      }
-      for (const [_gid, tg] of groupMap) {
-        if (tg !== defaultGroup) {
-          resultGroups.push(tg);
-        }
-      }
-
-      resultGroups.sort((a, b) => {
-        if (a.id === '__default__') return -1;
-        if (b.id === '__default__') return 1;
-        return (a.sortOrder ?? 0) - (b.sortOrder ?? 0);
-      });
+      const resultGroups = Array.from(groupMap.values());
+      resultGroups.sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
 
       list.groups = resultGroups;
     } catch (e) {
@@ -391,97 +425,47 @@
     currentView.value = view;
     showListGroupView.value = false;
     currentListId.value = '';
+    flatTasks.value = [];
+    groupDimension.value = 'none';
+    sortField.value = 'createTime';
+    sortDirection.value = 'asc';
 
     if (view === 'my-tasks') {
       try {
+        flatViewTitle.value = '我负责的任务';
+        flatViewEditable.value = true;
+        flatTaskEditMap.value = new Map();
         const data: any[] = await myResponsibleTasks();
-        quickAccessGroups.value = buildGroupsFromTasks(data, '我负责的任务');
-        showListGroupView.value = true;
+        flatTasks.value = (data || []).map(buildFlatTaskItem);
       } catch (e) {
         console.error('[TaskList] 加载我负责的任务失败', e);
       }
     } else if (view === 'followed') {
       try {
+        flatViewTitle.value = '我关注的任务';
+        flatViewEditable.value = false;
         const data: any[] = await myFollowedTasks();
-        quickAccessGroups.value = buildGroupsFromTasks(data, '我关注的任务');
-        showListGroupView.value = true;
+        const items = (data || []).map(buildFlatTaskItem);
+        const editMap = new Map<string, boolean>();
+        const userId = userStore.getUserInfo?.id || '';
+        for (const item of items) {
+          const isAssignee = item.assigneeId?.includes(userId);
+          const hasListPerm = item.myPermission === '1' || item.myPermission === '2';
+          editMap.set(item.id, !!isAssignee || hasListPerm);
+        }
+        flatTaskEditMap.value = editMap;
+        flatTasks.value = items;
       } catch (e) {
         console.error('[TaskList] 加载我关注的任务失败', e);
       }
     }
   }
 
-  function buildGroupsFromTasks(tasks: any[], virtualGroupName: string): TaskListGroup[] {
-    const taskItems: TaskItem[] = (tasks || []).map((tr: any) => ({
-      id: tr.id,
-      taskName: tr.taskName || '',
-      taskDesc: tr.taskDesc || '',
-      completed: tr.taskStatus === 1,
-      priority: tr.priority || '',
-      assigneeId: tr.assigneeId || '',
-      assigneeName: tr.assigneeName || '',
-      assignId: tr.assignId || '',
-      assignName: tr.assignName || '',
-      participantId: tr.participantId || '',
-      participantName: tr.participantName || '',
-      followersId: tr.followersId || '',
-      followersName: tr.followersName || '',
-      createBy: tr.createBy || '',
-      startTime: tr.startTime ? tr.startTime.split(' ')[0] : '',
-      endTime: tr.endTime ? tr.endTime.split(' ')[0] : '',
-      completeTime: tr.completeTime ? tr.completeTime.split(' ')[0] : '',
-      createTime: tr.createTime ? tr.createTime.split(' ')[0] : '',
-      updateTime: tr.updateTime ? tr.updateTime.split(' ')[0] : '',
-      type: tr.type || '',
-      subTaskCount: tr.subTaskCount || 0,
-      completedSubTaskCount: tr.completedSubTaskCount || 0,
-      remark: tr.remark || '',
-      groupId: '',
-      groupName: '',
-      childCount: tr.subTaskCount || 0,
-      completedChildCount: tr.completedSubTaskCount || 0,
-      pid: tr.pid || '',
-      hasChild: tr.hasChild || '0',
-      sortOrder: tr.sortOrder ?? 0,
-    }));
-
-    const taskList: TaskList = {
-      id: '__virtual_view__',
-      name: virtualGroupName,
-      pid: '',
-      hasChild: '0',
-      type: 1,
-      sortOrder: 0,
-      delFlag: 0,
-      groups: [
-        {
-          id: '__default__',
-          name: virtualGroupName,
-          taskListId: '__virtual_view__',
-          collapsed: false,
-          tasks: taskItems,
-        },
-      ],
-    };
-
-    return [
-      {
-        id: '__virtual_view_group__',
-        name: virtualGroupName,
-        pid: '0',
-        hasChild: '0',
-        type: 0,
-        sortOrder: 0,
-        delFlag: 0,
-        taskLists: [taskList],
-      },
-    ];
-  }
-
   function onListSelect(listId: string) {
     currentView.value = '';
     currentListId.value = listId;
     showListGroupView.value = false;
+    groupDimension.value = 'custom';
     loadPermissionForList(listId);
     loadTasks(listId);
   }
@@ -496,9 +480,9 @@
     }
   }
 
-  async function onAddToFavorites(taskListId: string) {
+  async function onAddToFavorites(taskListId: string, pid?: string) {
     try {
-      await addToFavorites({ taskListId });
+      await addToFavorites({ taskListId, pid: pid || undefined });
       await loadFavorites();
     } catch (e) {
       console.error('[TaskList] 添加收藏失败', e);
@@ -514,6 +498,23 @@
     }
   }
 
+  async function onRemoveFavorite(listId: string) {
+    try {
+      const favId = favoriteIdMap.value.get(listId);
+      if (favId) {
+        await removeFavorite({ favoriteId: favId });
+        const isCurrent = currentListId.value === listId;
+        await loadFavorites();
+        if (isCurrent) {
+          const firstAvailable = findFirstAvailableList();
+          currentListId.value = firstAvailable?.id || '';
+        }
+      }
+    } catch (e) {
+      console.error('[TaskList] 从收藏移除失败', e);
+    }
+  }
+
   async function onQuickAccessTabClick(tabKey: string) {
     const quickAccessViewMap: Record<string, ViewType> = {
       all: 'all-tasks',
@@ -523,7 +524,8 @@
     currentView.value = quickAccessViewMap[tabKey] || currentView.value;
     showListGroupView.value = true;
     currentListId.value = '';
-    listGroupTab.value = tabKey;
+    groupDimension.value = 'custom';
+    flatTasks.value = [];
 
     try {
       if (tabKey === 'all') {
@@ -568,19 +570,15 @@
     }));
   }
 
-  async function onCreateTask(groupId: string, taskName: string, sortOrder?: number) {
+  async function onCreateTask(groupId: string, taskName: string) {
     if (taskName && taskName.trim()) {
       try {
-        console.log('[TaskList] onCreateTask:', { groupId, taskName, mainId: currentListId.value, sortOrder });
         const params: any = {
           mainId: currentListId.value,
           taskName: taskName.trim(),
           type: '1',
           pid: groupId && groupId !== '__default__' ? groupId : '',
         };
-        if (sortOrder !== undefined) {
-          params.sortOrder = sortOrder;
-        }
         await addTask(params);
         if (currentListId.value) {
           await loadTasks(currentListId.value);
@@ -596,18 +594,24 @@
   async function onCreateList(name: string, groupId: string) {
     if (!name || !name.trim()) return;
     try {
-      await addTaskList({
+      const listId = await addTaskList({
         tasklistName: name.trim(),
         pid: groupId || undefined,
         sortOrder: 1,
       });
+      if (listId) {
+        await addToFavorites({ taskListId: listId, pid: groupId || undefined });
+      }
       await loadFavorites();
     } catch (e) {
       console.error('[TaskList] 创建清单失败', e);
     }
   }
 
-  function onListCreated() {
+  function onListCreated(listId?: string) {
+    if (listId) {
+      addToFavorites({ taskListId: listId });
+    }
     loadFavorites();
   }
 
@@ -627,17 +631,17 @@
     }
   }
 
-  async function onCreateGroupFromContent(_name: string) {
-    const groupName = '新建分组';
+  async function onAddGroup(listId: string, groupName: string) {
+    if (!groupName.trim() || !listId) return;
     try {
-      if (!currentListId.value) return;
       await addTask({
-        mainId: currentListId.value,
-        taskName: groupName,
+        mainId: listId,
+        taskName: groupName.trim(),
         type: '0',
-        sortOrder: 1,
       });
-      await loadTasks(currentListId.value);
+      if (currentListId.value) {
+        await loadTasks(currentListId.value);
+      }
     } catch (e) {
       console.error('[TaskList] 创建任务分组失败', e);
     }
@@ -668,48 +672,83 @@
 
   async function onMoveList(favoriteId: string, targetGroupId: string, sortOrder: number) {
     try {
-      await moveTaskList({ favoriteId, targetGroupId: targetGroupId || undefined, sortOrder });
-      await loadFavorites();
+      await moveTaskList({ favoriteId, targetGroupId: targetGroupId || '', sortOrder });
     } catch (e) {
       console.error('[TaskList] 移动清单失败', e);
+    } finally {
+      await loadFavorites();
     }
   }
 
   async function onMoveGroup(groupId: string, sortOrder: number) {
     try {
       await moveGroup({ groupId, sortOrder });
-      await loadFavorites();
     } catch (e) {
       console.error('[TaskList] 移动分组失败', e);
+    } finally {
+      await loadFavorites();
     }
   }
 
   async function onMoveTask(taskId: string, targetPid: string, targetSortOrder: number) {
     try {
       await moveTask({ taskId, targetPid, targetSortOrder });
+    } catch (e) {
+      console.error('[TaskList] 移动任务失败', e);
+    } finally {
       if (currentListId.value) {
         await loadTasks(currentListId.value);
       }
-    } catch (e) {
-      console.error('[TaskList] 移动任务失败', e);
     }
   }
 
   async function onMoveTaskGroup(taskGroupId: string, targetSortOrder: number) {
     try {
       await moveTaskGroup({ taskGroupId, targetSortOrder });
+    } catch (e) {
+      console.error('[TaskList] 移动任务分组失败', e);
+    } finally {
+      if (currentListId.value) {
+        await loadTasks(currentListId.value);
+      }
+    }
+  }
+
+  async function onDeleteTaskGroup(groupId: string) {
+    if (groupId === '__default__') return;
+    try {
+      await deleteTaskApi({ id: groupId }, () => {});
       if (currentListId.value) {
         await loadTasks(currentListId.value);
       }
     } catch (e) {
-      console.error('[TaskList] 移动任务分组失败', e);
+      console.error('[TaskList] 删除任务分组失败', e);
+    }
+  }
+
+  async function onRenameTaskGroup(groupId: string, newName: string) {
+    if (!newName.trim()) return;
+    const realGroupId = groupId === '__default__' ? defaultGroupRealIdMap.value[currentListId.value] : groupId;
+    if (!realGroupId) return;
+    try {
+      await editTask({ id: realGroupId, taskName: newName.trim() });
+      if (currentListId.value) {
+        await loadTasks(currentListId.value);
+      }
+    } catch (e) {
+      console.error('[TaskList] 重命名任务分组失败', e);
     }
   }
 
   async function onToggleTask(taskId: string) {
     try {
       await toggleTaskStatus({ id: taskId });
-      if (currentListId.value) {
+      if (isFlatView.value) {
+        const idx = flatTasks.value.findIndex((t) => t.id === taskId);
+        if (idx >= 0) {
+          flatTasks.value[idx] = { ...flatTasks.value[idx], completed: !flatTasks.value[idx].completed };
+        }
+      } else if (currentListId.value) {
         await loadTasks(currentListId.value);
       }
     } catch (e) {
@@ -717,12 +756,75 @@
     }
   }
 
+  function getAllTasks(): TaskItem[] {
+    if (isFlatView.value) return flatTasks.value;
+    const allTasks: TaskItem[] = [];
+    for (const group of taskListGroups.value) {
+      for (const list of group.taskLists) {
+        for (const taskGroup of list.groups) {
+          allTasks.push(...taskGroup.tasks);
+        }
+      }
+    }
+    return allTasks;
+  }
+
   function onTaskClick(taskId: string) {
     currentDrawerTaskId.value = taskId;
     const allTasks = getAllTasks();
     const task = allTasks.find((t) => t.id === taskId);
     if (task) {
-      openDetailDrawer(true, { task, allTasks });
+      const readOnly = isFlatView.value ? !canEditFlatTask(task) : currentList.value?.myPermission === '3';
+      openDetailDrawer(true, { task, allTasks, readOnly });
+    }
+  }
+
+  function canEditFlatTask(task: TaskItem): boolean {
+    if (flatViewEditable.value) return true;
+    return flatTaskEditMap.value.has(task.id);
+  }
+
+  async function refreshFlatViewTasks() {
+    if (currentView.value === 'my-tasks') {
+      const data: any[] = await myResponsibleTasks();
+      flatTasks.value = (data || []).map(buildFlatTaskItem);
+    } else if (currentView.value === 'followed') {
+      const data: any[] = await myFollowedTasks();
+      const items = (data || []).map(buildFlatTaskItem);
+      const editMap = new Map<string, boolean>();
+      const userId = userStore.getUserInfo?.id || '';
+      for (const item of items) {
+        const isAssignee = item.assigneeId?.includes(userId);
+        const hasListPerm = item.myPermission === '1' || item.myPermission === '2';
+        editMap.set(item.id, !!isAssignee || hasListPerm);
+      }
+      flatTaskEditMap.value = editMap;
+      flatTasks.value = items;
+    }
+  }
+
+  async function onLoadSubtasks(taskId: string, mainId: string) {
+    try {
+      const res: any = await listAllByMainId({ mainId });
+      const records: any[] = Array.isArray(res) ? res : Array.isArray(res?.result) ? res.result : [];
+      const taskRecords = records.filter((r: any) => r.type === '1' && r.pid === taskId);
+      if (taskRecords.length === 0) return;
+      const newChildren = taskRecords.map((tr: any) => buildFlatTaskItem(tr));
+      flatTasks.value = [...flatTasks.value, ...newChildren];
+      if (currentView.value === 'followed') {
+        const editMap = new Map(flatTaskEditMap.value);
+        const userId = userStore.getUserInfo?.id || '';
+        for (const child of newChildren) {
+          const isAssignee = child.assigneeId?.includes(userId);
+          const hasListPerm = child.myPermission === '1' || child.myPermission === '2';
+          if (isAssignee || hasListPerm) {
+            editMap.set(child.id, true);
+          }
+        }
+        flatTaskEditMap.value = editMap;
+      }
+    } catch (e) {
+      console.error('[TaskList] 加载子任务失败', e);
     }
   }
 
@@ -731,14 +833,20 @@
     const allTasks = getAllTasks();
     const task = allTasks.find((t) => t.id === currentDrawerTaskId.value);
     if (task) {
-      openDetailDrawer(true, { task, allTasks });
+      const readOnly = isFlatView.value ? !canEditFlatTask(task) : currentList.value?.myPermission === '3';
+      openDetailDrawer(true, { task, allTasks, readOnly });
     }
   }
 
   async function onUpdateTaskField(taskId: string, field: string, value: any) {
     try {
       await editTask({ id: taskId, [field]: value });
-      if (currentListId.value) {
+      if (isFlatView.value) {
+        const idx = flatTasks.value.findIndex((t) => t.id === taskId);
+        if (idx >= 0) {
+          flatTasks.value[idx] = { ...flatTasks.value[idx], [field]: value };
+        }
+      } else if (currentListId.value) {
         await loadTasks(currentListId.value);
       }
     } catch (e) {
@@ -749,7 +857,12 @@
   async function onUpdateTaskFields(taskId: string, fields: Record<string, any>) {
     try {
       await editTask({ id: taskId, ...fields });
-      if (currentListId.value) {
+      if (isFlatView.value) {
+        const idx = flatTasks.value.findIndex((t) => t.id === taskId);
+        if (idx >= 0) {
+          flatTasks.value[idx] = { ...flatTasks.value[idx], ...fields };
+        }
+      } else if (currentListId.value) {
         await loadTasks(currentListId.value);
       }
     } catch (e) {
@@ -775,7 +888,12 @@
         type: updatedTask.type,
         remark: updatedTask.remark,
       });
-      if (currentListId.value) {
+      if (isFlatView.value) {
+        const idx = flatTasks.value.findIndex((t) => t.id === updatedTask.id);
+        if (idx >= 0) {
+          flatTasks.value[idx] = { ...flatTasks.value[idx], ...updatedTask };
+        }
+      } else if (currentListId.value) {
         await loadTasks(currentListId.value);
       }
     } catch (e) {
@@ -785,13 +903,11 @@
 
   async function onCreateSubTask(parentTaskId: string, taskName: string) {
     try {
-      await addTask({
-        mainId: currentListId.value,
-        taskName,
-        type: '1',
-        pid: parentTaskId,
-      });
-      if (currentListId.value) {
+      const mainId = isFlatView.value ? flatTasks.value.find((t) => t.id === parentTaskId)?.mainId || '' : currentListId.value;
+      await addTask({ mainId, taskName, type: '1', pid: parentTaskId });
+      if (isFlatView.value) {
+        await refreshFlatViewTasks();
+      } else if (currentListId.value) {
         await loadTasks(currentListId.value);
         refreshDrawer();
       }
@@ -803,7 +919,9 @@
   async function onToggleSubTask(taskId: string) {
     try {
       await toggleTaskStatus({ id: taskId });
-      if (currentListId.value) {
+      if (isFlatView.value) {
+        await refreshFlatViewTasks();
+      } else if (currentListId.value) {
         await loadTasks(currentListId.value);
         refreshDrawer();
       }
@@ -824,7 +942,9 @@
   async function onDeleteTask(taskId: string) {
     try {
       await deleteTaskApi({ id: taskId }, () => {});
-      if (currentListId.value) {
+      if (isFlatView.value) {
+        flatTasks.value = flatTasks.value.filter((t) => t.id !== taskId);
+      } else if (currentListId.value) {
         await loadTasks(currentListId.value);
       }
     } catch (e) {
@@ -835,7 +955,9 @@
   async function onDeleteSubTaskRecord(taskId: string) {
     try {
       await deleteTaskApi({ id: taskId }, () => {});
-      if (currentListId.value) {
+      if (isFlatView.value) {
+        await refreshFlatViewTasks();
+      } else if (currentListId.value) {
         await loadTasks(currentListId.value);
         refreshDrawer();
       }
@@ -847,7 +969,9 @@
   async function onUpdateSubTaskField(taskId: string, field: string, value: any) {
     try {
       await editTask({ id: taskId, [field]: value || '' });
-      if (currentListId.value) {
+      if (isFlatView.value) {
+        await refreshFlatViewTasks();
+      } else if (currentListId.value) {
         await loadTasks(currentListId.value);
         refreshDrawer();
       }
@@ -859,7 +983,9 @@
   async function onUpdateSubTaskFields(taskId: string, fields: Record<string, any>) {
     try {
       await editTask({ id: taskId, ...fields });
-      if (currentListId.value) {
+      if (isFlatView.value) {
+        await refreshFlatViewTasks();
+      } else if (currentListId.value) {
         await loadTasks(currentListId.value);
         refreshDrawer();
       }
@@ -871,7 +997,9 @@
   async function onFollowTask(taskId: string) {
     try {
       await followTaskApi({ id: taskId });
-      if (currentListId.value) {
+      if (isFlatView.value) {
+        refreshFlatViewTasks();
+      } else if (currentListId.value) {
         await loadTasks(currentListId.value);
       }
     } catch (e) {
@@ -882,7 +1010,9 @@
   async function onUnfollowTask(taskId: string) {
     try {
       await unfollowTaskApi({ id: taskId });
-      if (currentListId.value) {
+      if (isFlatView.value) {
+        refreshFlatViewTasks();
+      } else if (currentListId.value) {
         await loadTasks(currentListId.value);
       }
     } catch (e) {
@@ -890,20 +1020,6 @@
     }
   }
 
-  async function onAddGroup(listId: string, groupName: string) {
-    try {
-      await addTask({
-        mainId: listId,
-        taskName: groupName,
-        type: '0',
-        sortOrder: 1,
-      });
-      await loadTasks(listId);
-    } catch (e) {
-      console.error('[TaskList] 创建任务分组失败', e);
-    }
-  }
-
   async function onRenameList(listId: string, newName: string) {
     const list = findListById(listId);
     if (list) {
@@ -919,7 +1035,7 @@
   async function onDeleteList(listId: string) {
     try {
       if (showListGroupView.value) {
-        const favId = favoriteIdMap.get(listId);
+        const favId = favoriteIdMap.value.get(listId);
         if (favId) {
           await removeFavorite({ favoriteId: favId });
         }
@@ -936,18 +1052,6 @@
     }
   }
 
-  function getAllTasks(): TaskItem[] {
-    const allTasks: TaskItem[] = [];
-    for (const group of taskListGroups.value) {
-      for (const list of group.taskLists) {
-        for (const taskGroup of list.groups) {
-          allTasks.push(...taskGroup.tasks);
-        }
-      }
-    }
-    return allTasks;
-  }
-
   function findListById(listId: string): TaskList | null {
     for (const group of taskListGroups.value) {
       for (const list of group.taskLists) {
diff --git a/src/views/tasklist/types.ts b/src/views/tasklist/types.ts
index a1d8215..b824baa 100644
--- a/src/views/tasklist/types.ts
+++ b/src/views/tasklist/types.ts
@@ -66,6 +66,10 @@ export interface TaskItem {
   pid: string;
   hasChild: string;
   sortOrder: number;
+  isDefault?: number;
+  listName: string;
+  mainId: string;
+  myPermission?: string;
 }
 
 export interface TaskGroup {
@@ -74,6 +78,8 @@ export interface TaskGroup {
   taskListId: string;
   collapsed: boolean;
   tasks: TaskItem[];
+  isDefault?: number;
+  sortOrder?: number;
 }
 
 export interface TaskList {
@@ -112,6 +118,7 @@ export type SortField = 'sortOrder' | 'startTime' | 'endTime' | 'createTime' | '
 export type SortDirection = 'asc' | 'desc';
 
 export type FieldKey =
+  | 'listName'
   | 'taskDesc'
   | 'assigneeName'
   | 'participantName'
@@ -147,7 +154,8 @@ export const FIELD_CONFIG: FieldConfig[] = [
   { key: 'completeTime', label: '完成时间', defaultVisible: true },
   { key: 'updateTime', label: '更新时间', defaultVisible: false },
   { key: 'priority', label: '优先级', defaultVisible: true },
-  { key: 'remark', label: '其他事项说明', defaultVisible: true },
+  { key: 'remark', label: '其他事项说明', defaultVisible: false },
+  { key: 'listName', label: '来源', defaultVisible: true },
 ];
 
 export const DEFAULT_VISIBLE_FIELDS: FieldKey[] = FIELD_CONFIG.filter((f) => f.defaultVisible).map((f) => f.key);
diff --git a/src/views/tasklist/utils/taskUtils.ts b/src/views/tasklist/utils/taskUtils.ts
new file mode 100644
index 0000000..f55d0f9
--- /dev/null
+++ b/src/views/tasklist/utils/taskUtils.ts
@@ -0,0 +1,29 @@
+export const PRIORITY_OPTIONS = [
+  { label: '高', value: 'high' },
+  { label: '中', value: 'medium' },
+  { label: '低', value: 'low' },
+];
+
+const PRIORITY_COLOR_MAP: Record<string, string> = {
+  high: '#ffccc7',
+  medium: '#ffe58f',
+  low: '#91d5ff',
+};
+
+export function getPriorityBg(value: string): string {
+  return PRIORITY_COLOR_MAP[value] || '#f5f5f5';
+}
+
+export function getPriorityLabel(value: string): string {
+  const opt = PRIORITY_OPTIONS.find((o) => o.value === value);
+  return opt?.label || value;
+}
+
+export function isOverdue(task: { endTime?: string; completed?: boolean }): boolean {
+  if (!task.endTime || task.completed) return false;
+  const end = new Date(task.endTime);
+  const now = new Date();
+  now.setHours(0, 0, 0, 0);
+  end.setHours(0, 0, 0, 0);
+  return now > end;
+}