feat: add task workdir option
This commit is contained in:
@@ -6,7 +6,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
|
|||||||
import { api, type FileNode } from '@/api'
|
import { api, type FileNode } from '@/api'
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
modelValue: string
|
modelValue?: string
|
||||||
placeholder?: string
|
placeholder?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
@@ -19,17 +19,33 @@ const loading = ref(false)
|
|||||||
const fileTree = ref<FileNode[]>([])
|
const fileTree = ref<FileNode[]>([])
|
||||||
const expandedDirs = ref<Set<string>>(new Set())
|
const expandedDirs = ref<Set<string>>(new Set())
|
||||||
|
|
||||||
// 只保留目录节点
|
interface FlatDir {
|
||||||
function filterDirs(nodes: FileNode[]): FileNode[] {
|
path: string
|
||||||
return nodes
|
name: string
|
||||||
.filter(n => n.isDir)
|
depth: number
|
||||||
.map(n => ({
|
hasChildren: boolean
|
||||||
...n,
|
|
||||||
children: n.children ? filterDirs(n.children) : undefined
|
|
||||||
}))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const dirTree = computed(() => filterDirs(fileTree.value))
|
// 将树形结构扁平化,只保留目录
|
||||||
|
function flattenDirs(nodes: FileNode[], depth = 0): FlatDir[] {
|
||||||
|
const result: FlatDir[] = []
|
||||||
|
for (const node of nodes) {
|
||||||
|
if (!node.isDir) continue
|
||||||
|
const children = node.children?.filter(c => c.isDir) || []
|
||||||
|
result.push({
|
||||||
|
path: node.path,
|
||||||
|
name: node.name,
|
||||||
|
depth,
|
||||||
|
hasChildren: children.length > 0
|
||||||
|
})
|
||||||
|
if (expandedDirs.value.has(node.path) && node.children) {
|
||||||
|
result.push(...flattenDirs(node.children, depth + 1))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
const flatDirs = computed(() => flattenDirs(fileTree.value))
|
||||||
|
|
||||||
async function loadTree() {
|
async function loadTree() {
|
||||||
if (fileTree.value.length > 0) return
|
if (fileTree.value.length > 0) return
|
||||||
@@ -43,7 +59,8 @@ async function loadTree() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleDir(path: string) {
|
function toggleDir(path: string, e: Event) {
|
||||||
|
e.stopPropagation()
|
||||||
if (expandedDirs.value.has(path)) {
|
if (expandedDirs.value.has(path)) {
|
||||||
expandedDirs.value.delete(path)
|
expandedDirs.value.delete(path)
|
||||||
} else {
|
} else {
|
||||||
@@ -94,84 +111,37 @@ const displayValue = computed(() => {
|
|||||||
<span>scripts (默认)</span>
|
<span>scripts (默认)</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 目录树 -->
|
<!-- 扁平化的目录列表 -->
|
||||||
<DirTreeNode
|
<div
|
||||||
v-for="node in dirTree"
|
v-for="dir in flatDirs"
|
||||||
:key="node.path"
|
:key="dir.path"
|
||||||
:node="node"
|
:class="[
|
||||||
:expanded-dirs="expandedDirs"
|
'flex items-center gap-1 py-1 px-2 rounded cursor-pointer text-sm',
|
||||||
:selected-path="modelValue"
|
modelValue === dir.path ? 'bg-primary/10 text-primary' : 'hover:bg-muted'
|
||||||
@toggle="toggleDir"
|
]"
|
||||||
@select="selectDir"
|
:style="{ paddingLeft: (dir.depth * 12 + 8) + 'px' }"
|
||||||
/>
|
@click="selectDir(dir.path)"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="dir.hasChildren"
|
||||||
|
class="shrink-0 cursor-pointer"
|
||||||
|
@click="toggleDir(dir.path, $event)"
|
||||||
|
>
|
||||||
|
<ChevronDown v-if="expandedDirs.has(dir.path)" class="h-3 w-3" />
|
||||||
|
<ChevronRight v-else class="h-3 w-3" />
|
||||||
|
</span>
|
||||||
|
<span v-else class="w-3 shrink-0" />
|
||||||
|
<Folder class="h-4 w-4 text-yellow-500 shrink-0" />
|
||||||
|
<span class="truncate">{{ dir.name }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-if="loading" class="text-xs text-muted-foreground text-center py-4">
|
<div v-if="loading" class="text-xs text-muted-foreground text-center py-4">
|
||||||
加载中...
|
加载中...
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="dirTree.length === 0" class="text-xs text-muted-foreground text-center py-2">
|
<div v-else-if="flatDirs.length === 0" class="text-xs text-muted-foreground text-center py-2">
|
||||||
暂无子目录
|
暂无子目录
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</PopoverContent>
|
</PopoverContent>
|
||||||
</Popover>
|
</Popover>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, h } from 'vue'
|
|
||||||
|
|
||||||
// 内联递归组件
|
|
||||||
const DirTreeNode = defineComponent({
|
|
||||||
name: 'DirTreeNode',
|
|
||||||
props: {
|
|
||||||
node: { type: Object as () => FileNode, required: true },
|
|
||||||
expandedDirs: { type: Object as () => Set<string>, required: true },
|
|
||||||
selectedPath: { type: String, default: '' },
|
|
||||||
depth: { type: Number, default: 0 }
|
|
||||||
},
|
|
||||||
emits: ['toggle', 'select'],
|
|
||||||
setup(props, { emit }) {
|
|
||||||
const isExpanded = computed(() => props.expandedDirs.has(props.node.path))
|
|
||||||
const isSelected = computed(() => props.selectedPath === props.node.path)
|
|
||||||
|
|
||||||
return () => h('div', [
|
|
||||||
h('div', {
|
|
||||||
class: [
|
|
||||||
'flex items-center gap-1 py-1 px-2 rounded cursor-pointer text-sm',
|
|
||||||
isSelected.value ? 'bg-primary/10 text-primary' : 'hover:bg-muted'
|
|
||||||
],
|
|
||||||
style: { paddingLeft: (props.depth * 12 + 8) + 'px' },
|
|
||||||
onClick: () => emit('select', props.node.path)
|
|
||||||
}, [
|
|
||||||
h('span', {
|
|
||||||
class: 'shrink-0 cursor-pointer',
|
|
||||||
onClick: (e: Event) => {
|
|
||||||
e.stopPropagation()
|
|
||||||
emit('toggle', props.node.path)
|
|
||||||
}
|
|
||||||
}, [
|
|
||||||
isExpanded.value
|
|
||||||
? h(ChevronDown, { class: 'h-3 w-3' })
|
|
||||||
: h(ChevronRight, { class: 'h-3 w-3' })
|
|
||||||
]),
|
|
||||||
h(Folder, { class: 'h-4 w-4 text-yellow-500 shrink-0' }),
|
|
||||||
h('span', { class: 'truncate' }, props.node.name)
|
|
||||||
]),
|
|
||||||
isExpanded.value && props.node.children?.length
|
|
||||||
? props.node.children.map(child =>
|
|
||||||
h(DirTreeNode, {
|
|
||||||
key: child.path,
|
|
||||||
node: child,
|
|
||||||
expandedDirs: props.expandedDirs,
|
|
||||||
selectedPath: props.selectedPath,
|
|
||||||
depth: props.depth + 1,
|
|
||||||
onToggle: (path: string) => emit('toggle', path),
|
|
||||||
onSelect: (path: string) => emit('select', path)
|
|
||||||
})
|
|
||||||
)
|
|
||||||
: null
|
|
||||||
])
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export { DirTreeNode }
|
|
||||||
</script>
|
|
||||||
|
|||||||
@@ -295,7 +295,7 @@ onMounted(() => {
|
|||||||
<div class="grid grid-cols-4 items-center gap-4">
|
<div class="grid grid-cols-4 items-center gap-4">
|
||||||
<Label class="text-right">工作目录</Label>
|
<Label class="text-right">工作目录</Label>
|
||||||
<div class="col-span-3">
|
<div class="col-span-3">
|
||||||
<DirTreeSelect v-model="editingTask.work_dir" />
|
<DirTreeSelect :model-value="editingTask.work_dir || ''" @update:model-value="v => editingTask.work_dir = v" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-4 items-center gap-4">
|
<div class="grid grid-cols-4 items-center gap-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user