lxy/DevFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增: 父子任务支持(数据→后端→前端全链路,会话前基线收尾)

Browse Source 
- df-nodes task_advance_node(父聚合推进)+ task.rs 命令(create parent_id 支持/delete 级联软删子任务)+ task_graph 工具

- 前端 Tasks 树形列表(折叠箭头/子进度徽章/缩进)+ 新建弹窗父任务下拉 + TaskDetail 父面包屑/子任务面板

- 设计文档: 父子任务支持设计-2026-08-04
This commit is contained in:
lxy
2026-08-05 22:15:01 +08:00
parent 71fdaac1b4
commit 28de5d6143
13 changed files with 1097 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Tasks.vue
+330 -111
View File
@@ -10,7 +10,7 @@
:placeholder="$t('tasks.searchPlaceholder')"
@keyup.esc="searchKeyword = ''"
/>
<button class="btn btn-primary" @click="openCreateModal">{{ $t('tasks.create') }}</button>
<button class="btn btn-primary" @click="openCreateModal()">{{ $t('tasks.create') }}</button>
</div>
</header>
@@ -50,7 +50,7 @@
<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>
<button class="btn btn-primary btn-sm" @click="openCreateModal()">{{ $t('tasks.create') }}</button>
</div>
<template v-else>
<section
@@ -63,71 +63,181 @@
<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.tasks.length }}</span>
<span class="group-count">{{ group.rows.length }}</span>
</div>
<div v-show="!collapsedGroups.has(group.projectName)" class="task-list">
<div
class="task-item"
v-for="task in group.tasks"
:key="task.id"
@click="router.push(`/tasks/${task.id}`)"
>
<div class="task-main">
<div class="task-title-row">
<span class="task-title">{{ task.title }}</span>
<span class="priority-badge" :class="priorityClass(task.priority)">{{ priorityLabel(task.priority) }}</span>
<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) -->
<span 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>
<!-- 迷你进度条(渐变填充,宽度=完成子任务百分比) -->
<div class="mini-progress" :title="$t('tasks.tree.progress')">
<div class="mini-progress-fill" :style="{ width: parentPct(row) + '%' }"></div>
</div>
</div>
</div>
<div class="task-meta">
<span class="branch-tag" v-if="task.branch_name">
<span class="branch-icon">⑂</span>{{ task.branch_name }}
</span>
<span class="task-date">{{ formatRelative(task.updated_at) }}</span>
<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 quickStatuses" :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>
<div class="task-actions">
<span class="status-tag" :class="taskStatusClass(task.status)">{{ $t(statusLabel(task.status)) }}</span>
<button class="task-quick-btn" :title="$t('tasks.quickActions')" @click.stop="toggleQuickMenu(task.id)">⚙️</button>
<div v-if="quickMenuId === 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 quickStatuses" :key="s.key" class="quick-menu-item" @click="quickAdvance(task.id, s.key)">
<span>{{ s.icon }}</span>{{ s.label }}
</button>
<!-- 子任务行(父展开时 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="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(task.id, p.value)">
<span :class="p.cls">●</span>{{ p.label }}
</button>
<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 quickStatuses" :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 class="quick-menu-divider"></div>
<button class="quick-menu-item quick-menu-danger" @click="quickDelete(task)">{{ $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 quickStatuses" :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>
<!-- 分页器 -->
<Paginator
v-model:page="page"
v-model:pageSize="pageSize"
:total="totalTasks"
/>
<!-- 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>
<select v-model="newTaskProjectId">
<!-- 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" />
@@ -178,7 +288,6 @@ import { formatRelative } from '@/utils/time'
import { taskStatusLabel as statusLabel, taskStatusClass, priorityLabel, priorityClass } from '../constants/project'
import { taskApi } from '@/api'
import type { TaskRecord, TaskQuery, ProjectId } from '@/api/types'
import Paginator from '../components/Paginator.vue'
import ConfirmDialog from '@/components/ConfirmDialog.vue'
import { useConfirm } from '@/composables/useConfirm'
import { usePersistedRef } from '@/composables/usePersistedRef'
@@ -196,14 +305,28 @@ const sortBy = usePersistedRef('tasks.sortBy', 'updated_at')
const searchKeyword = usePersistedRef('tasks.searchKeyword', '')
const loading = ref(false)
// 分页(默认开启 20 条/页)
const page = usePersistedRef('tasks.page', 1)
const pageSize = usePersistedRef('tasks.pageSize', 20)
const totalTasks = ref(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) {
@@ -237,9 +360,13 @@ async function quickPriority(id: string, priority: number) {
await store.loadTasks(buildTaskQuery())
} catch (e) { console.error('快捷改优先级失败:', e) }
}
async function quickDelete(task: TaskRecord) {
async function quickDelete(task: TaskRecord, childCount = 0) {
quickMenuId.value = null
if (!await confirmDialog(t('tasks.confirmDelete', { title: task.title }))) return
// 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 {
await store.deleteTask(task.id)
} catch (e) { console.error('删除失败:', e) }
@@ -267,12 +394,8 @@ let _searchTimer: ReturnType<typeof setTimeout> | null = null
watch(searchKeyword, () => {
if (_searchTimer) clearTimeout(_searchTimer)
_searchTimer = setTimeout(() => {
page.value = 1
loading.value = true
Promise.all([
store.loadTasks(buildTaskQuery()),
taskApi.count(buildTaskQuery()).then(n => totalTasks.value = n),
]).finally(() => { loading.value = false })
store.loadTasks(buildTaskQuery()).finally(() => { loading.value = false })
}, 300)
})
@@ -283,14 +406,25 @@ 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)
interface TaskGroup {
projectName: string
icon: string
tasks: TaskRecord[]
// 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 }[]>(() => [
@@ -314,33 +448,70 @@ const projectIcons: Record<string, string> = {
'flux': '⚡',
}
const filteredGroups = computed(() => {
// 后端已分页(limit/offset),store.tasks 是当前页数据,直接分组无需再 slice
const sorted = [...store.tasks]
sorted.sort((a: any, b: any) => {
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[sortBy.value] ?? ''
const bv = b[sortBy.value] ?? ''
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
})
// 按项目分组
const groupMap = new Map<string, TaskRecord[]>()
for (const task of sorted) {
if (!groupMap.has(task.project_id)) {
groupMap.set(task.project_id, [])
/** 父任务迷你进度条百分比(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 groupMap = new Map<string, TaskRow[]>()
for (const row of taskRows.value) {
if (!groupMap.has(row.task.project_id)) {
groupMap.set(row.task.project_id, [])
}
groupMap.get(task.project_id)!.push(task)
groupMap.get(row.task.project_id)!.push(row)
}
const result: TaskGroup[] = []
for (const [projectId, groupTasks] of groupMap) {
for (const [projectId, rows] of groupMap) {
const name = getProjectName(projectId)
result.push({
projectName: name,
icon: projectIcons[name] || '📂',
tasks: groupTasks,
rows,
})
}
return result
@@ -354,16 +525,23 @@ function buildTaskQuery(): TaskQuery | undefined {
if (!projAll) query.project_id = activeProject.value
if (!statusAll) query.status = activeStatus.value
if (kw) query.keyword = kw
// 后端真分页:传 limit/offset,配合 count_by_query 获取 total
if (pageSize.value > 0) {
query.limit = pageSize.value
query.offset = (page.value - 1) * pageSize.value
}
// F-260805 D5:一次拉当前筛选全量(limit 放大 500 钳制上限,offset 恒 0),
// 树形需要完整父子关系,分页会割裂父/子;全量已在前端,父进度也前端计算
query.limit = 500
query.offset = 0
return query
}
function openCreateModal() {
newTaskProjectId.value = store.projects.length > 0 ? store.projects[0].id : ''
// 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 = ''
@@ -384,6 +562,8 @@ async function confirmCreate() {
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
@@ -395,40 +575,19 @@ async function confirmCreate() {
// 筛选切换重载
watch(activeProject, () => {
store.setActiveTaskProject(activeProject.value)
page.value = 1
loading.value = true
Promise.all([
store.loadTasks(buildTaskQuery()),
taskApi.count(buildTaskQuery()).then(n => totalTasks.value = n),
]).finally(() => { loading.value = false })
store.loadTasks(buildTaskQuery()).finally(() => { loading.value = false })
})
watch(activeStatus, () => {
store.setActiveTaskStatus(activeStatus.value)
page.value = 1
loading.value = true
Promise.all([
store.loadTasks(buildTaskQuery()),
taskApi.count(buildTaskQuery()).then(n => totalTasks.value = n),
]).finally(() => { loading.value = false })
store.loadTasks(buildTaskQuery()).finally(() => { loading.value = false })
})
watch(sortBy, () => {
page.value = 1
loading.value = true
Promise.all([
store.loadTasks(buildTaskQuery()),
taskApi.count(buildTaskQuery()).then(n => totalTasks.value = n),
]).finally(() => { loading.value = false })
})
// 分页翻页/改每页条数:重新查询后端
watch([page, pageSize], () => {
loading.value = true
Promise.all([
store.loadTasks(buildTaskQuery()),
taskApi.count(buildTaskQuery()).then(n => totalTasks.value = n),
]).finally(() => { loading.value = false })
store.loadTasks(buildTaskQuery()).finally(() => { loading.value = false })
})
// Ctrl+N 新建 / Ctrl+F 搜索(桌面快捷键)
@@ -449,10 +608,10 @@ onMounted(async () => {
try {
await Promise.all([
store.loadProjects(),
store.loadTasks(),
// F-260805 D5:一次拉当前筛选全量(limit 500),树形需要完整父子关系
store.loadTasks(buildTaskQuery()),
// F-260619-01:加载灵感供新建任务模态关联下拉选择(幂等,已加载则 no-op)
store.loadIdeas(),
taskApi.count().then(n => totalTasks.value = n),
])
} finally {
loading.value = false
@@ -546,7 +705,7 @@ onUnmounted(() => {
border-bottom: 0.5px solid var(--df-border);
transition: background 0.1s;
}
.group-header:hover { background: rgba(108, 99, 255, 0.04); }
.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; }
@@ -574,7 +733,7 @@ onUnmounted(() => {
cursor: pointer;
}
.task-item:last-child { border-bottom: none; }
.task-item:hover { background: rgba(108, 99, 255, 0.04); }
.task-item:hover { background: var(--df-accent-bg); }
.task-main { flex: 1; min-width: 0; }
@@ -649,6 +808,66 @@ onUnmounted(() => {
.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);