Skip to content

Commit 0510b5a

Browse files
jihe520jihe520
committed
add
1 parent 8aaf98c commit 0510b5a

File tree

5 files changed

+66
-94
lines changed

5 files changed

+66
-94
lines changed

‎frontend/src/components/CoderEditor.vue‎

Lines changed: 16 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<script setup lang="ts">
22
import { ref } from 'vue'
3-
import {
4-
SidebarInset,
5-
SidebarProvider,
6-
} from '@/components/ui/sidebar'
3+
import { SidebarProvider, Sidebar } from '@/components/ui/sidebar'
74
import { ScrollArea } from '@/components/ui/scroll-area'
85
import Files from '@/components/Files.vue'
96
import NotebookArea from '@/components/NotebookArea.vue'
@@ -15,34 +12,26 @@ import {
1512
1613
</script>
1714
<template>
18-
<SidebarProvider>
19-
<SidebarInset class="flex-1 flex flex-col min-h-0 min-w-0 h-full">
20-
<div class="flex-1 min-h-0 min-w-0 overflow-auto h-full">
21-
<ResizablePanelGroup direction="horizontal" class="h-full w-full">
22-
<ResizablePanel :default-size="25" :min-size="15" class="h-full w-full flex flex-1">
23-
<ScrollArea class="h-full w-full flex flex-1">
24-
<Files class="h-full w-full fixed" />
25-
</ScrollArea>
15+
<ResizablePanelGroup direction="horizontal" class="h-full w-full">
16+
<ResizablePanel :default-size="25" :min-size="15" class="h-full">
17+
<SidebarProvider>
18+
<Sidebar collapsible="none" class="h-full w-full overflow-hidden">
19+
<Files />
20+
</Sidebar>
21+
</SidebarProvider>
22+
</ResizablePanel>
2623

27-
</ResizablePanel>
28-
29-
<ResizableHandle with-handle />
30-
<ResizablePanel :default-size="75" :min-size="30" class="h-full w-full flex flex-1">
31-
<ScrollArea class="h-full w-full flex flex-1">
32-
<NotebookArea class="h-full min-w-0 pb-4" />
33-
</ScrollArea>
34-
</ResizablePanel>
35-
</ResizablePanelGroup>
24+
<ResizableHandle with-handle />
25+
<ResizablePanel :default-size="75" :min-size="30" class="h-full">
26+
<NotebookArea class="h-full min-w-0 pb-4" />
27+
</ResizablePanel>
28+
</ResizablePanelGroup>
3629

37-
</div>
38-
</SidebarInset>
39-
</SidebarProvider>
4030
</template>
4131

4232
<style scoped>
43-
4433
::-webkit-scrollbar {
45-
display: none; /* 或者 width: 0; height: 0; */
34+
display: none;
35+
/* 或者 width: 0; height: 0; */
4636
}
47-
4837
</style>

‎frontend/src/components/Files.vue‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { computed, ref, onMounted } from 'vue'
33
import Tree from '@/components/Tree.vue'
44
import { File } from 'lucide-vue-next'
55
import { useTaskStore } from '@/stores/task'
6-
6+
import { Sidebar, SidebarContent, SidebarGroup, SidebarFooter, SidebarProvider } from '@/components/ui/sidebar'
77
const taskStore = useTaskStore()
88
const isLoading = ref(true)
99
// 从消息中提取最新的文件列表
@@ -13,7 +13,7 @@ const files = taskStore.files as string[]
1313
const fileTree = computed(() => {
1414
// 无论files是否为空，只要计算属性被触发，就认为数据已加载完成
1515
isLoading.value = false
16-
16+
1717
// 直接返回文件列表，不做转换，因为Tree组件期望接收string或数组
1818
return files
1919
})
@@ -38,20 +38,23 @@ const handleFileDownload = (file: string) => {
3838
</script>
3939

4040
<template>
41-
<div class="h-full flex flex-col">
42-
<div class="px-3 py-2 font-medium text-sm border-b">Files</div>
43-
<div class="flex-1 overflow-auto">
44-
<div v-if="isLoading" class="px-3 py-2 text-sm text-gray-500">
45-
加载中...
46-
</div>
47-
<div v-else-if="fileTree.length === 0" class="px-3 py-2 text-sm text-gray-500">
48-
暂无文件
49-
</div>
50-
<div v-else class="p-2">
51-
<Tree v-for="(item, index) in fileTree" :key="index" :item="item"
52-
@click="handleFileClick(item)"
53-
@download="handleFileDownload(item)" />
41+
<SidebarContent class="h-full">
42+
<SidebarGroup />
43+
<div class="h-full flex flex-col overflow-hidden">
44+
<div class="px-3 py-2 font-medium text-sm border-b">Files</div>
45+
<div class="flex-1 overflow-auto">
46+
<div v-if="isLoading" class="px-3 py-2 text-sm text-gray-500">
47+
加载中...
48+
</div>
49+
<div v-else-if="fileTree.length === 0" class="px-3 py-2 text-sm text-gray-500">
50+
暂无文件
51+
</div>
52+
<div v-else class="p-2">
53+
<Tree v-for="(item, index) in fileTree" :key="index" :item="item" @click="handleFileClick(item)"
54+
@download="handleFileDownload(item)" />
55+
</div>
5456
</div>
5557
</div>
56-
</div>
58+
<SidebarGroup />
59+
</SidebarContent>
5760
</template>

‎frontend/src/components/ui/sidebar/Sidebar.vue‎

Lines changed: 28 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -18,66 +18,47 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
1818
</script>
1919

2020
<template>
21-
<div
22-
v-if="collapsible === 'none'"
21+
<div v-if="collapsible === 'none'"
2322
:class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)"
24-
v-bind="$attrs"
25-
>
23+
v-bind="$attrs">
2624
<slot />
2725
</div>
2826

2927
<Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
30-
<SheetContent
31-
data-sidebar="sidebar"
32-
data-mobile="true"
33-
:side="side"
34-
class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
35-
:style="{
28+
<SheetContent data-sidebar="sidebar" data-mobile="true" :side="side"
29+
class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden" :style="{
3630
'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
37-
}"
38-
>
31+
}">
3932
<div class="flex h-full w-full flex-col">
4033
<slot />
4134
</div>
4235
</SheetContent>
4336
</Sheet>
4437

45-
<div
46-
v-else class="group peer hidden md:block"
47-
:data-state="state"
48-
:data-collapsible="state === 'collapsed' ? collapsible : ''"
49-
:data-variant="variant"
50-
:data-side="side"
51-
>
38+
<div v-else class="group peer hidden md:block" :data-state="state"
39+
:data-collapsible="state === 'collapsed' ? collapsible : ''" :data-variant="variant" :data-side="side">
5240
<!-- This is what handles the sidebar gap on desktop -->
53-
<div
54-
:class="cn(
55-
'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
56-
'group-data-[collapsible=offcanvas]:w-0',
57-
'group-data-[side=right]:rotate-180',
58-
variant === 'floating' || variant === 'inset'
59-
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
60-
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
61-
)"
62-
/>
63-
<div
64-
:class="cn(
65-
'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
66-
side === 'left'
67-
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
68-
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
69-
// Adjust the padding for floating and inset variants.
70-
variant === 'floating' || variant === 'inset'
71-
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
72-
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
73-
props.class,
74-
)"
75-
v-bind="$attrs"
76-
>
77-
<div
78-
data-sidebar="sidebar"
79-
class="flex h-full w-full flex-col text-sidebar-foreground bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
80-
>
41+
<div :class="cn(
42+
'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
43+
'group-data-[collapsible=offcanvas]:w-0',
44+
'group-data-[side=right]:rotate-180',
45+
variant === 'floating' || variant === 'inset'
46+
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
47+
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
48+
)" />
49+
<div :class="cn(
50+
'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
51+
side === 'left'
52+
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
53+
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
54+
// Adjust the padding for floating and inset variants.
55+
variant === 'floating' || variant === 'inset'
56+
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
57+
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
58+
props.class,
59+
)" v-bind="$attrs">
60+
<div data-sidebar="sidebar"
61+
class="flex h-full w-full flex-col text-sidebar-foreground bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow">
8162
<slot />
8263
</div>
8364
</div>

‎frontend/src/pages/task/index.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,7 @@ onBeforeUnmount(() => {
4040
<div class="fixed inset-0">
4141
<ResizablePanelGroup direction="horizontal" class="h-full rounded-lg border">
4242
<ResizablePanel :default-size="30" class="h-full">
43-
<ScrollArea class="h-full">
44-
<ChatArea :messages="taskStore.chatMessages" />
45-
</ScrollArea>
43+
<ChatArea :messages="taskStore.chatMessages" />
4644
</ResizablePanel>
4745
<ResizableHandle />
4846
<ResizablePanel :default-size="70" class="h-full min-w-0">
@@ -61,7 +59,7 @@ onBeforeUnmount(() => {
6159
</div>
6260

6361
<TabsContent value="coder" class="h-full p-1 flex-1 overflow-auto">
64-
<Card class="h-full m-1">
62+
<Card class="h-full m-2">
6563
<CardContent class="h-full p-1">
6664
<CoderEditor />
6765
</CardContent>

‎frontend/src/stores/task.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import messageData from '@/test/20250430-163507-03282e09.json'
77
export const useTaskStore = defineStore('task', () => {
88
// 初始化时直接加载测试数据，确保页面首次渲染时有数据
99
const messages = ref<Message[]>(messageData as Message[])
10+
// const messages = ref<Message[]>([])
1011
let ws: TaskWebSocket | null = null
1112

1213
// 连接 WebSocket

0 commit comments

Comments
 (0)