1007 lines
39 KiB
Vue
1007 lines
39 KiB
Vue
<template>
|
||
<div class="tasks">
|
||
<!-- 顶部工具栏:标题 + 搜索 + 新建 -->
|
||
<header class="page-header">
|
||
<h1>{{ $t('tasks.title') }}</h1>
|
||
<div class="header-actions">
|
||
<input
|
||
v-model="searchKeyword"
|
||
class="search-input"
|
||
:placeholder="$t('tasks.searchPlaceholder')"
|
||
@keyup.esc="searchKeyword = ''"
|
||
/>
|
||
<button class="btn btn-primary" @click="openCreateModal()">{{ $t('tasks.create') }}</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 错误条:消费 store.error(对齐 Knowledge/Projects error-banner,不整表替换列表) -->
|
||
<div v-if="store.error" class="error-banner" style="margin-bottom: var(--df-gap-page)">
|
||
<span class="error-text">{{ store.error }}</span>
|
||
<button class="error-dismiss" @click="store.clearError()">✕</button>
|
||
</div>
|
||
|
||
<!-- 筛选栏(紧凑下拉) -->
|
||
<div class="filter-bar">
|
||
<div class="filter-group">
|
||
<span class="filter-label">{{ $t('tasks.filter.project') }}</span>
|
||
<select v-model="activeProject" class="filter-select">
|
||
<option value="all">{{ $t('tasks.filter.all') }}</option>
|
||
<option v-for="p in store.projects" :key="p.id" :value="p.id">{{ p.name }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="filter-group">
|
||
<span class="filter-label">{{ $t('tasks.filter.status') }}</span>
|
||
<div class="filter-chip-group">
|
||
<button
|
||
v-for="s in statusFilters"
|
||
:key="s.key"
|
||
class="filter-chip"
|
||
:class="{ 'is-active': activeStatuses.length === 0 || activeStatuses.includes(s.key) }"
|
||
@click="toggleStatus(s.key)"
|
||
>
|
||
{{ s.icon }} {{ s.label }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="filter-group">
|
||
<span class="filter-label">{{ $t('tasks.sort.label') }}</span>
|
||
<select v-model="sortBy" class="filter-select">
|
||
<option value="updated_at">{{ $t('tasks.sort.updated') }}</option>
|
||
<option value="created_at">{{ $t('tasks.sort.created') }}</option>
|
||
<option value="priority">{{ $t('tasks.sort.priority') }}</option>
|
||
<option value="status">{{ $t('tasks.sort.status') }}</option>
|
||
</select>
|
||
</div>
|
||
<span class="filter-count">{{ $t('common.pagination.total', { n: store.tasks.length }) }}</span>
|
||
</div>
|
||
|
||
<!-- 任务分组列表 -->
|
||
<div class="task-groups">
|
||
<div v-if="loading" class="empty-state">{{ $t('common.loading') }}</div>
|
||
<div v-else-if="filteredGroups.length === 0" class="empty-state">
|
||
<div class="empty-icon">📋</div>
|
||
<div>{{ $t('tasks.group.empty') }}</div>
|
||
<button class="btn btn-primary btn-sm" @click="openCreateModal()">{{ $t('tasks.create') }}</button>
|
||
</div>
|
||
<template v-else>
|
||
<section
|
||
v-for="group in filteredGroups"
|
||
:key="group.projectName"
|
||
class="task-group"
|
||
:class="{ collapsed: collapsedGroups.has(group.projectName) }"
|
||
>
|
||
<div class="group-header" @click="toggleGroup(group.projectName)">
|
||
<span class="group-chevron">{{ collapsedGroups.has(group.projectName) ? '▸' : '▾' }}</span>
|
||
<span class="group-icon">{{ group.icon }}</span>
|
||
<h2 class="group-name">{{ group.projectName }}</h2>
|
||
<span class="group-count">{{ group.rows.length }}</span>
|
||
</div>
|
||
<div v-show="!collapsedGroups.has(group.projectName)" class="task-list">
|
||
<template v-for="row in group.rows" :key="row.task.id">
|
||
<!-- 父任务行(有子任务):折叠箭头 + 📑 图标 + 子进度徽章 n/m + 迷你进度条 + 快捷菜单(含添加子任务)。
|
||
点击行跳详情;折叠箭头 @click.stop 只切换展开不跳转。 -->
|
||
<div
|
||
v-if="row.isParent"
|
||
class="task-item task-item-parent"
|
||
:class="{ 'is-expanded': expandedParents.has(row.task.id) }"
|
||
@click="router.push(`/tasks/${row.task.id}`)"
|
||
>
|
||
<div class="task-main">
|
||
<div class="task-title-row">
|
||
<button
|
||
class="fold-btn"
|
||
:class="{ 'is-open': expandedParents.has(row.task.id) }"
|
||
@click.stop="toggleParent(row.task.id)"
|
||
>{{ expandedParents.has(row.task.id) ? '▾' : '▸' }}</button>
|
||
<span class="task-parent-icon">📑</span>
|
||
<span class="task-title">{{ row.task.title }}</span>
|
||
<span class="priority-badge" :class="priorityClass(row.task.priority)">{{ priorityLabel(row.task.priority) }}</span>
|
||
<!-- 子进度徽章(done+cancelled / total);WK-11:搜索态隐藏(树形进度失真) -->
|
||
<span v-if="!isSearching" class="sub-progress-badge" :title="$t('tasks.tree.progress')">{{ row.progress!.done }}/{{ row.progress!.total }}</span>
|
||
</div>
|
||
<div class="task-meta">
|
||
<span class="branch-tag" v-if="row.task.branch_name">
|
||
<span class="branch-icon">⑂</span>{{ row.task.branch_name }}
|
||
</span>
|
||
<span class="task-date">{{ formatRelative(row.task.updated_at) }}</span>
|
||
<!-- 迷你进度条(渐变填充,宽度=完成子任务百分比);WK-11:搜索态隐藏 -->
|
||
<div v-if="!isSearching" class="mini-progress" :title="$t('tasks.tree.progress')">
|
||
<div class="mini-progress-fill" :style="{ width: parentPct(row) + '%' }"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="task-actions">
|
||
<span class="status-tag" :class="taskStatusClass(row.task.status)">{{ $t(statusLabel(row.task.status)) }}</span>
|
||
<button class="task-quick-btn" :title="$t('tasks.quickActions')" @click.stop="toggleQuickMenu(row.task.id)">⚙️</button>
|
||
<div v-if="quickMenuId === row.task.id" class="quick-menu" @click.stop>
|
||
<div class="quick-menu-section">
|
||
<div class="quick-menu-label">{{ $t('tasks.quickStatus') }}</div>
|
||
<button v-for="s in quickStatusesFor(row.task)" :key="s.key" class="quick-menu-item" @click="quickAdvance(row.task.id, s.key)">
|
||
<span>{{ s.icon }}</span>{{ s.label }}
|
||
</button>
|
||
</div>
|
||
<div class="quick-menu-divider"></div>
|
||
<div class="quick-menu-section">
|
||
<div class="quick-menu-label">{{ $t('tasks.quickPriority') }}</div>
|
||
<button v-for="p in quickPriorities" :key="p.value" class="quick-menu-item" @click="quickPriority(row.task.id, p.value)">
|
||
<span :class="p.cls">●</span>{{ p.label }}
|
||
</button>
|
||
</div>
|
||
<div class="quick-menu-divider"></div>
|
||
<!-- F-260805:父任务快捷菜单「添加子任务」(预填父任务打开新建弹窗) -->
|
||
<button class="quick-menu-item" @click="openCreateModal(row.task)">
|
||
<span>＋</span>{{ $t('tasks.addSubtask') }}
|
||
</button>
|
||
<div class="quick-menu-divider"></div>
|
||
<button class="quick-menu-item quick-menu-danger" @click="quickDelete(row.task, row.children.length)">{{ $t('tasks.quickDelete') }}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 子任务行(父展开时 v-show 渲染):缩进 + 左侧竖线引导线 + 行首圆点连接符。
|
||
常规快捷操作与顶层一致;点击跳 /tasks/{child.id}。 -->
|
||
<div
|
||
v-for="child in row.children"
|
||
v-show="expandedParents.has(row.task.id)"
|
||
:key="child.id"
|
||
class="task-item task-item-child"
|
||
@click="router.push(`/tasks/${child.id}`)"
|
||
>
|
||
<div class="task-main">
|
||
<div class="task-title-row">
|
||
<span class="child-dot">•</span>
|
||
<span class="task-title">{{ child.title }}</span>
|
||
<span class="priority-badge" :class="priorityClass(child.priority)">{{ priorityLabel(child.priority) }}</span>
|
||
</div>
|
||
<div class="task-meta">
|
||
<span class="branch-tag" v-if="child.branch_name">
|
||
<span class="branch-icon">⑂</span>{{ child.branch_name }}
|
||
</span>
|
||
<span class="task-date">{{ formatRelative(child.updated_at) }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="task-actions">
|
||
<span class="status-tag" :class="taskStatusClass(child.status)">{{ $t(statusLabel(child.status)) }}</span>
|
||
<button class="task-quick-btn" :title="$t('tasks.quickActions')" @click.stop="toggleQuickMenu(child.id)">⚙️</button>
|
||
<div v-if="quickMenuId === child.id" class="quick-menu" @click.stop>
|
||
<div class="quick-menu-section">
|
||
<div class="quick-menu-label">{{ $t('tasks.quickStatus') }}</div>
|
||
<button v-for="s in quickStatusesFor(child)" :key="s.key" class="quick-menu-item" @click="quickAdvance(child.id, s.key)">
|
||
<span>{{ s.icon }}</span>{{ s.label }}
|
||
</button>
|
||
</div>
|
||
<div class="quick-menu-divider"></div>
|
||
<div class="quick-menu-section">
|
||
<div class="quick-menu-label">{{ $t('tasks.quickPriority') }}</div>
|
||
<button v-for="p in quickPriorities" :key="p.value" class="quick-menu-item" @click="quickPriority(child.id, p.value)">
|
||
<span :class="p.cls">●</span>{{ p.label }}
|
||
</button>
|
||
</div>
|
||
<div class="quick-menu-divider"></div>
|
||
<button class="quick-menu-item quick-menu-danger" @click="quickDelete(child)">{{ $t('tasks.quickDelete') }}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 顶层任务无子(普通行) -->
|
||
<div
|
||
v-if="!row.isParent"
|
||
class="task-item"
|
||
@click="router.push(`/tasks/${row.task.id}`)"
|
||
>
|
||
<div class="task-main">
|
||
<div class="task-title-row">
|
||
<span class="task-title">{{ row.task.title }}</span>
|
||
<span class="priority-badge" :class="priorityClass(row.task.priority)">{{ priorityLabel(row.task.priority) }}</span>
|
||
</div>
|
||
<div class="task-meta">
|
||
<span class="branch-tag" v-if="row.task.branch_name">
|
||
<span class="branch-icon">⑂</span>{{ row.task.branch_name }}
|
||
</span>
|
||
<span class="task-date">{{ formatRelative(row.task.updated_at) }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="task-actions">
|
||
<span class="status-tag" :class="taskStatusClass(row.task.status)">{{ $t(statusLabel(row.task.status)) }}</span>
|
||
<button class="task-quick-btn" :title="$t('tasks.quickActions')" @click.stop="toggleQuickMenu(row.task.id)">⚙️</button>
|
||
<div v-if="quickMenuId === row.task.id" class="quick-menu" @click.stop>
|
||
<div class="quick-menu-section">
|
||
<div class="quick-menu-label">{{ $t('tasks.quickStatus') }}</div>
|
||
<button v-for="s in quickStatusesFor(row.task)" :key="s.key" class="quick-menu-item" @click="quickAdvance(row.task.id, s.key)">
|
||
<span>{{ s.icon }}</span>{{ s.label }}
|
||
</button>
|
||
</div>
|
||
<div class="quick-menu-divider"></div>
|
||
<div class="quick-menu-section">
|
||
<div class="quick-menu-label">{{ $t('tasks.quickPriority') }}</div>
|
||
<button v-for="p in quickPriorities" :key="p.value" class="quick-menu-item" @click="quickPriority(row.task.id, p.value)">
|
||
<span :class="p.cls">●</span>{{ p.label }}
|
||
</button>
|
||
</div>
|
||
<div class="quick-menu-divider"></div>
|
||
<button class="quick-menu-item quick-menu-danger" @click="quickDelete(row.task)">{{ $t('tasks.quickDelete') }}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- F-260805 D5:列表页改一次性加载 + 前端组装树,移除真分页 Paginator(分页会割裂父/子) -->
|
||
<!-- 新建任务模态框(统一样式,去内联 style) -->
|
||
<div class="modal-overlay" v-if="showCreateModal" @click.self="showCreateModal = false">
|
||
<div class="modal-box">
|
||
<h3>{{ $t('tasks.modal.title') }}</h3>
|
||
<div class="modal-field">
|
||
<label>{{ $t('tasks.modal.project') }}</label>
|
||
<!-- F-260805:选择父任务后 project 锁定为该父所属项目(disabled),需先选回「无」再切项目 -->
|
||
<select v-model="newTaskProjectId" :disabled="!!newTaskParentId" @change="newTaskParentId = ''">
|
||
<option v-for="p in store.projects" :key="p.id" :value="p.id">{{ p.name }}</option>
|
||
</select>
|
||
</div>
|
||
<!-- F-260805:父任务下拉(选项=当前选中项目的顶层任务 + 首项「无」;提交透传 parent_id,空=顶层任务) -->
|
||
<div class="modal-field">
|
||
<label>{{ $t('tasks.modal.parentTask') }}</label>
|
||
<select v-model="newTaskParentId">
|
||
<option value="">{{ $t('tasks.modal.parentPlaceholder') }}</option>
|
||
<option v-for="p in parentTaskOptions" :key="p.id" :value="p.id">{{ p.title }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="modal-field">
|
||
<label>{{ $t('tasks.modal.titleField') }}</label>
|
||
<input v-model="newTaskTitle" :placeholder="$t('tasks.modal.titlePlaceholder')" @keyup.enter="confirmCreate" />
|
||
</div>
|
||
<div class="modal-field">
|
||
<label>{{ $t('tasks.modal.desc') }}</label>
|
||
<input v-model="newTaskDesc" :placeholder="$t('tasks.modal.descPlaceholder')" />
|
||
</div>
|
||
<div class="modal-field">
|
||
<label>{{ $t('tasks.modal.branch') }}</label>
|
||
<input v-model="newTaskBranch" :placeholder="$t('tasks.modal.branchPlaceholder')" />
|
||
</div>
|
||
<div class="modal-field">
|
||
<label>{{ $t('tasks.modal.priority') }}</label>
|
||
<select v-model="newTaskPriority">
|
||
<option :value="0">{{ $t('tasks.modal.priorityCritical') }}</option>
|
||
<option :value="1">{{ $t('tasks.modal.priorityHigh') }}</option>
|
||
<option :value="2">{{ $t('tasks.modal.priorityMedium') }}</option>
|
||
<option :value="3">{{ $t('tasks.modal.priorityLow') }}</option>
|
||
</select>
|
||
</div>
|
||
<!-- F-260619-01:关联灵感(1对1 单向,可选)。空串=不关联,与后端/AI 工具层一致。 -->
|
||
<div class="modal-field">
|
||
<label>{{ $t('tasks.modal.idea') }}</label>
|
||
<select v-model="newTaskIdeaId">
|
||
<option value="">{{ $t('tasks.modal.ideaPlaceholder') }}</option>
|
||
<option v-for="idea in store.ideas" :key="idea.id" :value="idea.id">{{ idea.title }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="btn btn-ghost" @click="showCreateModal = false">{{ $t('common.cancel') }}</button>
|
||
<button class="btn btn-primary" @click="confirmCreate" :disabled="submitting || !newTaskTitle.trim()">{{ $t('common.confirm') }}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快捷操作失败 toast(WK-13,对齐 Projects.vue 操作反馈) -->
|
||
<div v-if="toast.visible" class="toast" :class="'toast-' + toast.type">{{ toast.msg }}</div>
|
||
|
||
<!-- 确认弹层(删除任务,替代原生 window.confirm) -->
|
||
<ConfirmDialog :visible="confirmState.visible" :msg="confirmState.msg" @result="answerConfirm" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, onUnmounted, watch, reactive } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useProjectStore } from '@/stores/project'
|
||
import { formatRelative } from '@/utils/time'
|
||
import { taskStatusLabel as statusLabel, taskStatusClass, priorityLabel, priorityClass, TASK_STATUS_TRANSITIONS } from '../constants/project'
|
||
import { taskApi } from '@/api'
|
||
import type { TaskRecord, TaskQuery, ProjectId } from '@/api/types'
|
||
import ConfirmDialog from '@/components/ConfirmDialog.vue'
|
||
import { useConfirm } from '@/composables/useConfirm'
|
||
import { usePersistedRef } from '@/composables/usePersistedRef'
|
||
import { useToast } from '@/composables/useToast'
|
||
|
||
const router = useRouter()
|
||
const store = useProjectStore()
|
||
const { t } = useI18n()
|
||
const { confirmState, confirmDialog, answerConfirm } = useConfirm()
|
||
// WK-13:快捷操作失败 toast 反馈(对齐 Projects.vue useToast 模式)
|
||
const { toast, showToast } = useToast()
|
||
|
||
// 列表筛选/分页状态持久化到 localStorage(key 前缀 'tasks.'),
|
||
// 刷新页面后保留用户上次选择。collapsedGroups 单独走 df-tasks-collapsed(沿用既有实现)。
|
||
const activeProject = usePersistedRef('tasks.activeProject', 'all')
|
||
const activeStatuses = usePersistedRef<string[]>('tasks.activeStatuses', [])
|
||
|
||
// 状态多选切换
|
||
function toggleStatus(key: string) {
|
||
const idx = activeStatuses.value.indexOf(key)
|
||
if (idx >= 0) {
|
||
activeStatuses.value.splice(idx, 1)
|
||
} else {
|
||
activeStatuses.value.push(key)
|
||
}
|
||
}
|
||
const sortBy = usePersistedRef('tasks.sortBy', 'updated_at')
|
||
const searchKeyword = usePersistedRef('tasks.searchKeyword', '')
|
||
const loading = ref(false)
|
||
// WK-11:搜索态(keyword 过滤可能截断父子关系,子进度徽章/迷你条语义失真 → 隐藏)
|
||
const isSearching = computed(() => searchKeyword.value.trim().length > 0)
|
||
|
||
// F-260805 D5:列表页一次性加载 + 前端组装树,移除真分页(page/pageSize/totalTasks 已删)。
|
||
// 分组折叠状态(localStorage 记忆)
|
||
const collapsedGroups = reactive(new Set<string>())
|
||
|
||
// F-260805:父任务展开/折叠状态(localStorage 记忆,沿用 collapsedGroups 模式)
|
||
const expandedParents = reactive(new Set<string>())
|
||
function toggleParent(id: string) {
|
||
if (expandedParents.has(id)) {
|
||
expandedParents.delete(id)
|
||
} else {
|
||
expandedParents.add(id)
|
||
}
|
||
localStorage.setItem('df-tasks-expanded', JSON.stringify([...expandedParents]))
|
||
}
|
||
// 恢复父任务展开记忆(脏数据静默忽略)
|
||
try {
|
||
const saved = localStorage.getItem('df-tasks-expanded')
|
||
if (saved) {
|
||
for (const id of JSON.parse(saved)) expandedParents.add(id)
|
||
}
|
||
} catch { /* 忽略脏数据 */ }
|
||
|
||
// 快捷菜单
|
||
const quickMenuId = ref<string | null>(null)
|
||
function toggleQuickMenu(id: string) {
|
||
quickMenuId.value = quickMenuId.value === id ? null : id
|
||
}
|
||
const quickStatuses = computed(() => [
|
||
{ key: 'todo', icon: '📝', label: t('tasks.statusFilter.todo') },
|
||
{ key: 'in_progress', icon: '🔨', label: t('tasks.statusFilter.in_progress') },
|
||
{ key: 'in_review', icon: '👀', label: t('tasks.statusFilter.in_review') },
|
||
{ key: 'testing', icon: '🧪', label: t('tasks.statusFilter.testing') },
|
||
{ key: 'done', icon: '✅', label: t('tasks.statusFilter.done') },
|
||
{ key: 'blocked', icon: '🚫', label: t('tasks.statusFilter.blocked') },
|
||
{ key: 'cancelled', icon: '🗑️', label: t('tasks.statusFilter.cancelled') },
|
||
])
|
||
/** WK-8:快捷状态目标 = 状态机合法流转目标(TASK_STATUS_TRANSITIONS 过滤,对齐 TaskDetail ADVANCE_MAP) */
|
||
function quickStatusesFor(task: TaskRecord): { key: string; icon: string; label: string }[] {
|
||
const valid = new Set(TASK_STATUS_TRANSITIONS[task.status] ?? [])
|
||
return quickStatuses.value.filter(s => valid.has(s.key))
|
||
}
|
||
const quickPriorities = computed(() => [
|
||
{ value: 0, label: t('tasks.modal.priorityCritical'), cls: 'priority-critical' },
|
||
{ value: 1, label: t('tasks.modal.priorityHigh'), cls: 'priority-high' },
|
||
{ value: 2, label: t('tasks.modal.priorityMedium'), cls: 'priority-medium' },
|
||
{ value: 3, label: t('tasks.modal.priorityLow'), cls: 'priority-low' },
|
||
])
|
||
async function quickAdvance(id: string, target: string) {
|
||
quickMenuId.value = null
|
||
try {
|
||
await taskApi.advance(id, target)
|
||
await store.loadTasks(buildTaskQuery())
|
||
} catch (e: any) {
|
||
// WK-13:快捷操作失败 toast 反馈(原 console.error 静默,用户无感知)
|
||
showToast(e?.toString() ?? t('common.unknownError'), 'error')
|
||
}
|
||
}
|
||
async function quickPriority(id: string, priority: number) {
|
||
quickMenuId.value = null
|
||
try {
|
||
// WK-13:改用 taskApi 直调(不走 store.updateTask,避免失败置 store.error 触发整表错误态)
|
||
await taskApi.update(id, 'priority', String(priority))
|
||
await store.loadTasks(buildTaskQuery())
|
||
} catch (e: any) {
|
||
showToast(e?.toString() ?? t('common.unknownError'), 'error')
|
||
}
|
||
}
|
||
async function quickDelete(task: TaskRecord, childCount = 0) {
|
||
quickMenuId.value = null
|
||
// F-260805:父任务带子任务时确认文案含子任务数(后端级联软删)
|
||
const msg = childCount > 0
|
||
? t('tasks.confirmDeleteWithChildren', { title: task.title, n: childCount })
|
||
: t('tasks.confirmDelete', { title: task.title })
|
||
if (!await confirmDialog(msg)) return
|
||
try {
|
||
// WK-13:deleteTask 返成功布尔,失败 toast(store.error 同时走 error-banner)
|
||
const ok = await store.deleteTask(task.id)
|
||
if (!ok) showToast(t('tasks.err.deleteFailed'), 'error')
|
||
} catch (e) { console.error('删除失败:', e) }
|
||
}
|
||
// 点击外部关闭快捷菜单
|
||
function closeQuickMenu() { quickMenuId.value = null }
|
||
function toggleGroup(name: string) {
|
||
if (collapsedGroups.has(name)) {
|
||
collapsedGroups.delete(name)
|
||
} else {
|
||
collapsedGroups.add(name)
|
||
}
|
||
localStorage.setItem('df-tasks-collapsed', JSON.stringify([...collapsedGroups]))
|
||
}
|
||
// 恢复折叠记忆
|
||
try {
|
||
const saved = localStorage.getItem('df-tasks-collapsed')
|
||
if (saved) {
|
||
for (const name of JSON.parse(saved)) collapsedGroups.add(name)
|
||
}
|
||
} catch { /* 忽略脏数据 */ }
|
||
|
||
// 搜索防抖
|
||
let _searchTimer: ReturnType<typeof setTimeout> | null = null
|
||
watch(searchKeyword, () => {
|
||
// WK-10:登记当前关键字到 barrel(数据变更联动刷新复用同一筛选,不冲掉搜索结果)
|
||
store.setActiveTaskKeyword(searchKeyword.value.trim() || undefined)
|
||
if (_searchTimer) clearTimeout(_searchTimer)
|
||
_searchTimer = setTimeout(() => {
|
||
loading.value = true
|
||
store.loadTasks(buildTaskQuery()).finally(() => { loading.value = false })
|
||
}, 300)
|
||
})
|
||
|
||
// ── 新建任务模态框 ──
|
||
const showCreateModal = ref(false)
|
||
const newTaskProjectId = ref('')
|
||
const newTaskTitle = ref('')
|
||
const newTaskDesc = ref('')
|
||
const newTaskBranch = ref('')
|
||
const newTaskPriority = ref(2)
|
||
// F-260805:父任务下拉选中值(空串=无/顶层任务)
|
||
const newTaskParentId = ref('')
|
||
// F-260619-01:关联灵感(空串=不关联,与后端 idea_id 空串处理一致)
|
||
const newTaskIdeaId = ref('')
|
||
const submitting = ref(false)
|
||
|
||
// F-260805:父任务选项 = 当前选中项目的顶层任务(无 parent_id;仅顶层可作父,1 级嵌套)
|
||
const parentTaskOptions = computed(() =>
|
||
store.tasks.filter(t => !t.parent_id && t.project_id === newTaskProjectId.value),
|
||
)
|
||
|
||
// F-260805:树形行结构(父任务 + 直接子任务 + 子进度)。1 级嵌套,无递归。
|
||
interface TaskRow {
|
||
task: TaskRecord
|
||
/** 父任务的直接子任务(仅父有;叶子为空数组) */
|
||
children: TaskRecord[]
|
||
/** 父任务子进度(done+cancelled / total;叶子为 undefined) */
|
||
progress?: { done: number; total: number }
|
||
isParent: boolean
|
||
}
|
||
|
||
const statusFilters = computed<{ key: string; label: string; icon: string }[]>(() => [
|
||
{ key: 'all', label: t('tasks.statusFilter.all'), icon: '📋' },
|
||
{ key: 'todo', label: t('tasks.statusFilter.todo'), icon: '📝' },
|
||
{ key: 'in_progress', label: t('tasks.statusFilter.in_progress'), icon: '🔨' },
|
||
{ key: 'in_review', label: t('tasks.statusFilter.in_review'), icon: '👀' },
|
||
{ key: 'testing', label: t('tasks.statusFilter.testing'), icon: '🧪' },
|
||
{ key: 'done', label: t('tasks.statusFilter.done'), icon: '✅' },
|
||
{ key: 'blocked', label: t('tasks.statusFilter.blocked'), icon: '🚫' },
|
||
{ key: 'cancelled', label: t('tasks.statusFilter.cancelled'), icon: '🗑️' },
|
||
])
|
||
|
||
function getProjectName(projectId: string): string {
|
||
return store.projects.find(p => p.id === projectId)?.name ?? t('tasks.group.unknownProject')
|
||
}
|
||
|
||
const projectIcons: Record<string, string> = {
|
||
'u-ask': '🤖',
|
||
'u-img': '🖼️',
|
||
'flux': '⚡',
|
||
}
|
||
|
||
interface TaskGroup {
|
||
projectName: string
|
||
icon: string
|
||
/** 组内顶层任务行(子任务内嵌在行.children) */
|
||
rows: TaskRow[]
|
||
}
|
||
|
||
// F-260805:树组装 — 顶层 = 无 parent_id 的任务,每个顶层挂 children;父进度前端计算(D6,全量已在前端)。
|
||
const taskRows = computed<TaskRow[]>(() => {
|
||
// 子任务按 parent_id 分组(1 级嵌套)
|
||
const childMap = new Map<string, TaskRecord[]>()
|
||
for (const t of store.tasks) {
|
||
if (!t.parent_id) continue
|
||
const arr = childMap.get(t.parent_id) ?? []
|
||
arr.push(t)
|
||
childMap.set(t.parent_id, arr)
|
||
}
|
||
// 排序沿用现有 sortBy 逻辑(顶层 + 子级同一比较器)
|
||
const cmp = (a: TaskRecord, b: TaskRecord): number => {
|
||
if (sortBy.value === 'priority') return (a.priority ?? 2) - (b.priority ?? 2)
|
||
if (sortBy.value === 'status') return String(a.status).localeCompare(String(b.status))
|
||
const av = (a as any)[sortBy.value] ?? ''
|
||
const bv = (b as any)[sortBy.value] ?? ''
|
||
return String(bv).localeCompare(String(av))
|
||
}
|
||
const tops = store.tasks.filter(t => !t.parent_id).sort(cmp)
|
||
const rows: TaskRow[] = []
|
||
for (const t of tops) {
|
||
const children = (childMap.get(t.id) ?? []).sort(cmp)
|
||
const isParent = children.length > 0
|
||
const done = children.filter(c => c.status === 'done' || c.status === 'cancelled').length
|
||
rows.push({
|
||
task: t,
|
||
children,
|
||
isParent,
|
||
progress: isParent ? { done, total: children.length } : undefined,
|
||
})
|
||
}
|
||
return rows
|
||
})
|
||
|
||
/** 父任务迷你进度条百分比(done/total) */
|
||
function parentPct(row: TaskRow): number {
|
||
if (!row.progress || row.progress.total === 0) return 0
|
||
return Math.round((row.progress.done / row.progress.total) * 100)
|
||
}
|
||
|
||
const filteredGroups = computed(() => {
|
||
// F-260805 D5:store.tasks 是一次性拉取的筛选全量,前端已组装树(taskRows),直接按项目分组
|
||
// 状态多选:未选(全)或选中状态匹配
|
||
const statusFilter = (row: TaskRow) =>
|
||
activeStatuses.value.length === 0 || activeStatuses.value.includes(row.task.status)
|
||
const groupMap = new Map<string, TaskRow[]>()
|
||
for (const row of taskRows.value) {
|
||
if (!statusFilter(row)) continue
|
||
if (!groupMap.has(row.task.project_id)) {
|
||
groupMap.set(row.task.project_id, [])
|
||
}
|
||
groupMap.get(row.task.project_id)!.push(row)
|
||
}
|
||
|
||
const result: TaskGroup[] = []
|
||
for (const [projectId, rows] of groupMap) {
|
||
const name = getProjectName(projectId)
|
||
result.push({
|
||
projectName: name,
|
||
icon: projectIcons[name] || '📂',
|
||
rows,
|
||
})
|
||
}
|
||
return result
|
||
})
|
||
|
||
function buildTaskQuery(): TaskQuery | undefined {
|
||
const projAll = activeProject.value === 'all'
|
||
const kw = searchKeyword.value.trim()
|
||
const query: TaskQuery = { order_by: sortBy.value }
|
||
if (!projAll) query.project_id = activeProject.value
|
||
// 状态多选走前端过滤(后端 status 单值,不给后端传使全量拉取,前端 filteredGroups 过滤)
|
||
if (kw) query.keyword = kw
|
||
// F-260805 D5:一次拉当前筛选全量(limit 放大 500 钳制上限,offset 恒 0),
|
||
// 树形需要完整父子关系,分页会割裂父/子;全量已在前端,父进度也前端计算
|
||
query.limit = 500
|
||
query.offset = 0
|
||
return query
|
||
}
|
||
|
||
// F-260805:打开新建弹窗。可选 parent(父任务快捷菜单「添加子任务」):
|
||
// 有父 → project_id 锁定为该父所属项目、parent_id 预填;无父(顶部「新建任务」)→ 默认父=无(顶层任务)。
|
||
function openCreateModal(parent?: TaskRecord) {
|
||
if (parent) {
|
||
newTaskParentId.value = parent.id
|
||
newTaskProjectId.value = parent.project_id
|
||
} else {
|
||
newTaskParentId.value = ''
|
||
newTaskProjectId.value = store.projects.length > 0 ? store.projects[0].id : ''
|
||
}
|
||
newTaskTitle.value = ''
|
||
newTaskDesc.value = ''
|
||
newTaskBranch.value = ''
|
||
newTaskPriority.value = 2
|
||
newTaskIdeaId.value = ''
|
||
showCreateModal.value = true
|
||
}
|
||
|
||
async function confirmCreate() {
|
||
if (!newTaskTitle.value.trim() || !newTaskProjectId.value) return
|
||
submitting.value = true
|
||
try {
|
||
const r = await store.createTask({
|
||
project_id: newTaskProjectId.value as ProjectId,
|
||
title: newTaskTitle.value.trim(),
|
||
description: newTaskDesc.value.trim(),
|
||
branch_name: newTaskBranch.value.trim() || undefined,
|
||
priority: newTaskPriority.value,
|
||
// F-260619-01:空串=不关联(对齐后端 idea_id 空串语义)
|
||
idea_id: newTaskIdeaId.value.trim() || undefined,
|
||
// F-260805:父任务透传(空串=顶层任务,后端视为 None)
|
||
parent_id: newTaskParentId.value || undefined,
|
||
})
|
||
if (!r) return
|
||
showCreateModal.value = false
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
|
||
// 筛选切换重载
|
||
watch(activeProject, () => {
|
||
store.setActiveTaskProject(activeProject.value)
|
||
loading.value = true
|
||
store.loadTasks(buildTaskQuery()).finally(() => { loading.value = false })
|
||
})
|
||
|
||
watch(activeStatuses, () => {
|
||
store.setActiveTaskStatus(activeStatuses.value.length === 0 ? 'all' : activeStatuses.value.join(','))
|
||
loading.value = true
|
||
store.loadTasks(buildTaskQuery()).finally(() => { loading.value = false })
|
||
})
|
||
|
||
watch(sortBy, () => {
|
||
loading.value = true
|
||
store.loadTasks(buildTaskQuery()).finally(() => { loading.value = false })
|
||
})
|
||
|
||
// Ctrl+N 新建 / Ctrl+F 搜索(桌面快捷键)
|
||
function onKeydown(e: KeyboardEvent) {
|
||
if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
|
||
e.preventDefault()
|
||
openCreateModal()
|
||
} else if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
|
||
e.preventDefault()
|
||
document.querySelector<HTMLInputElement>('.search-input')?.focus()
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
store.setActiveTaskProject(activeProject.value)
|
||
store.setActiveTaskStatus(activeStatuses.value.length === 0 ? 'all' : activeStatuses.value.join(','))
|
||
store.setActiveTaskKeyword(searchKeyword.value.trim() || undefined)
|
||
loading.value = true
|
||
try {
|
||
await Promise.all([
|
||
store.loadProjects(),
|
||
// F-260805 D5:一次拉当前筛选全量(limit 500),树形需要完整父子关系
|
||
store.loadTasks(buildTaskQuery()),
|
||
// F-260619-01:加载灵感供新建任务模态关联下拉选择(幂等,已加载则 no-op)
|
||
store.loadIdeas(),
|
||
])
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
window.addEventListener('keydown', onKeydown)
|
||
document.addEventListener('click', closeQuickMenu)
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('keydown', onKeydown)
|
||
document.removeEventListener('click', closeQuickMenu)
|
||
if (_searchTimer) clearTimeout(_searchTimer)
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tasks { padding: 16px 20px 20px; }
|
||
|
||
/* page-header / page-header h1 / header-actions 已提取到全局 global.css */
|
||
|
||
/* 搜索框 */
|
||
.search-input {
|
||
width: 220px;
|
||
max-width: 100%;
|
||
flex: 1 1 220px;
|
||
padding: 6px 12px;
|
||
border: 0.5px solid var(--df-border);
|
||
border-radius: var(--df-radius-sm);
|
||
background: var(--df-bg-card);
|
||
color: var(--df-text);
|
||
font-size: 13px;
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.search-input:focus { border-color: var(--df-accent); }
|
||
.search-input::placeholder { color: var(--df-text-dim); }
|
||
|
||
/* btn / btn-primary / btn-ghost / btn-sm 已提取到全局 global.css */
|
||
|
||
/* 筛选栏(紧凑) */
|
||
/* filter-bar 已提取到全局 global.css，下方仅保留 Tasks 特有筛选类 */
|
||
.filter-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.filter-label {
|
||
font-size: 12px;
|
||
color: var(--df-text-dim);
|
||
white-space: nowrap;
|
||
}
|
||
.filter-select {
|
||
padding: 4px 10px;
|
||
border: 0.5px solid var(--df-border);
|
||
border-radius: var(--df-radius-sm);
|
||
background: var(--df-bg);
|
||
color: var(--df-text);
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.filter-select:hover { border-color: var(--df-accent); }
|
||
.filter-chip-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 4px;
|
||
}
|
||
.filter-chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
padding: 2px 8px;
|
||
border: 0.5px solid var(--df-border);
|
||
border-radius: 10px;
|
||
background: transparent;
|
||
color: var(--df-text-dim);
|
||
font-size: 11px;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
white-space: nowrap;
|
||
}
|
||
.filter-chip:hover {
|
||
background: var(--df-bg-card);
|
||
color: var(--df-text);
|
||
border-color: var(--df-accent);
|
||
}
|
||
.filter-chip.is-active {
|
||
background: var(--df-accent-soft);
|
||
color: var(--df-accent);
|
||
border-color: var(--df-accent);
|
||
}
|
||
.filter-count {
|
||
margin-left: auto;
|
||
font-size: 12px;
|
||
color: var(--df-text-dim);
|
||
}
|
||
|
||
/* 任务分组 */
|
||
.task-groups {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--df-gap-grid);
|
||
}
|
||
|
||
.task-group {
|
||
background: var(--df-bg-card);
|
||
border: 0.5px solid var(--df-border);
|
||
border-radius: var(--df-radius-lg);
|
||
/* WK-9:原 overflow:hidden 会把快捷菜单(.quick-menu 绝对定位向下溢出)裁切。
|
||
改为组自身不裁切,圆角裁剪下放给 header(顶角)与末行(底角,见下),菜单可正常浮出。 */
|
||
}
|
||
|
||
.group-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 14px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
border-bottom: 0.5px solid var(--df-border);
|
||
transition: background 0.1s;
|
||
/* WK-9:承接原 .task-group overflow:hidden 的顶角圆角裁剪(自身 overflow,组不再裁切快捷菜单) */
|
||
border-radius: var(--df-radius-lg) var(--df-radius-lg) 0 0;
|
||
overflow: hidden;
|
||
}
|
||
.group-header:hover { background: var(--df-accent-bg); }
|
||
.task-group.collapsed .group-header { border-bottom: none; }
|
||
.group-chevron { font-size: 10px; color: var(--df-text-dim); width: 12px; text-align: center; }
|
||
.group-icon { font-size: 16px; }
|
||
.group-name { font-size: 14px; font-weight: 500; color: var(--df-text); flex: 1; }
|
||
.group-count {
|
||
font-size: 11px;
|
||
color: var(--df-text-dim);
|
||
background: rgba(255,255,255,0.06);
|
||
padding: 1px 8px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* 任务条目(紧凑) */
|
||
.task-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.task-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 14px;
|
||
border-bottom: 0.5px solid rgba(255,255,255,0.03);
|
||
transition: background 0.1s;
|
||
cursor: pointer;
|
||
}
|
||
.task-item:last-child { border-bottom: none; }
|
||
/* WK-9:末行承接组底角圆角裁剪(替代原 .task-group overflow:hidden) */
|
||
.task-item:last-child { border-radius: 0 0 var(--df-radius-lg) var(--df-radius-lg); }
|
||
.task-item:hover { background: var(--df-accent-bg); }
|
||
|
||
.task-main { flex: 1; min-width: 0; }
|
||
|
||
.task-title-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.task-title {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--df-text);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.priority-badge {
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
padding: 1px 6px;
|
||
border-radius: var(--df-radius-xs);
|
||
flex-shrink: 0;
|
||
}
|
||
.priority-critical { background: rgba(255,107,107,0.2); color: var(--df-danger); }
|
||
.priority-high { background: rgba(255,152,0,0.2); color: #ff9800; }
|
||
.priority-medium { background: rgba(100,181,246,0.2); color: var(--df-info); }
|
||
.priority-low { background: rgba(90,99,128,0.2); color: var(--df-text-dim); }
|
||
|
||
.task-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-top: 2px;
|
||
}
|
||
.branch-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
font-size: 11px;
|
||
color: var(--df-text-dim);
|
||
}
|
||
.task-date {
|
||
font-size: 11px;
|
||
color: var(--df-text-dim);
|
||
}
|
||
|
||
/* status-tag 尺寸/圆角 + status-* 7 态色已提取到全局 components.css(WK-6 对齐三视图),此处不再重复定义 */
|
||
|
||
/* 快捷操作 */
|
||
.task-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
position: relative;
|
||
}
|
||
.task-quick-btn {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
padding: 2px 4px;
|
||
opacity: 0;
|
||
transition: opacity 0.15s;
|
||
}
|
||
.task-item:hover .task-quick-btn { opacity: 0.6; }
|
||
.task-quick-btn:hover { opacity: 1; }
|
||
|
||
/* ===== F-260805 父子任务树形 ===== */
|
||
/* 折叠箭头(仅父任务行,点击只切展开不跳详情) */
|
||
.fold-btn {
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 10px;
|
||
color: var(--df-text-dim);
|
||
width: 12px;
|
||
padding: 0;
|
||
flex-shrink: 0;
|
||
transition: color 0.15s;
|
||
}
|
||
.fold-btn:hover { color: var(--df-accent); }
|
||
/* 父任务图标(与子任务区分) */
|
||
.task-parent-icon {
|
||
font-size: 13px;
|
||
flex-shrink: 0;
|
||
}
|
||
/* 子进度徽章 n/m(父任务行) */
|
||
.sub-progress-badge {
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
color: var(--df-text-dim);
|
||
background: rgba(255,255,255,0.06);
|
||
padding: 1px 6px;
|
||
border-radius: 8px;
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
}
|
||
/* 迷你进度条(细条渐变填充,宽度=完成子任务百分比) */
|
||
.mini-progress {
|
||
width: 72px;
|
||
height: 4px;
|
||
background: var(--df-border);
|
||
border-radius: var(--df-radius-xs);
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
.mini-progress-fill {
|
||
height: 100%;
|
||
border-radius: var(--df-radius-xs);
|
||
background: linear-gradient(90deg, var(--df-accent), var(--df-success));
|
||
transition: width 0.3s;
|
||
}
|
||
/* 子任务行:缩进 + 左侧竖线引导线(延续父任务) */
|
||
.task-item-child {
|
||
padding-left: 32px;
|
||
border-left: 0.5px solid var(--df-border);
|
||
margin-left: 20px;
|
||
}
|
||
/* 行首圆点连接符(子任务) */
|
||
.child-dot {
|
||
font-size: 10px;
|
||
color: var(--df-accent);
|
||
flex-shrink: 0;
|
||
width: 8px;
|
||
text-align: center;
|
||
}
|
||
|
||
.quick-menu {
|
||
position: absolute;
|
||
top: calc(100% + 4px);
|
||
right: 0;
|
||
min-width: 160px;
|
||
background: var(--df-bg-card);
|
||
border: 0.5px solid var(--df-border);
|
||
border-radius: var(--df-radius-sm);
|
||
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
|
||
z-index: 20;
|
||
padding: 6px 0;
|
||
}
|
||
.quick-menu-section { padding: 4px 0; }
|
||
.quick-menu-label {
|
||
font-size: 10px;
|
||
color: var(--df-text-dim);
|
||
padding: 2px 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
.quick-menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
width: 100%;
|
||
padding: 5px 12px;
|
||
background: none;
|
||
border: none;
|
||
color: var(--df-text);
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
}
|
||
.quick-menu-item:hover { background: rgba(255,255,255,0.06); }
|
||
.quick-menu-divider {
|
||
height: 0.5px;
|
||
background: var(--df-border);
|
||
margin: 4px 0;
|
||
}
|
||
.quick-menu-danger { color: var(--df-danger); }
|
||
|
||
/* ===== 快捷操作失败 toast(WK-13,对齐 Projects.vue 操作反馈) ===== */
|
||
.toast {
|
||
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
|
||
padding: 10px 18px; border-radius: var(--df-radius-sm);
|
||
font-size: 13px; z-index: 200; max-width: 80vw;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||
}
|
||
.toast-info { background: var(--df-accent); color: #fff; }
|
||
.toast-error { background: var(--df-danger); color: #fff; }
|
||
.toast-success { background: var(--df-success); color: #fff; }
|
||
|
||
/* 空态 */
|
||
/* empty-state 已提取到全局 global.css */
|
||
.empty-icon { font-size: 32px; opacity: 0.4; }
|
||
|
||
/* 模态框 overlay/box/modal-field/modal-actions 已提取到 global.css 全局 */
|
||
</style>
|