暂无打开的工作区
@@ -47,14 +49,6 @@ function openFolder() {
display: none; // Chrome/Safari/Opera
}
- .tree-container {
- padding: 8px 4px;
- min-width: max-content; // 确保容器宽度适应内容
- width: 100%;
- // 为横向滚动添加一些额外的内边距
- // padding-right: 20px;
- }
-
.empty-state {
display: flex;
flex-direction: column;
diff --git a/src/renderer/components/ui/tree/Tree.vue b/src/renderer/components/ui/tree/Tree.vue
index 3372620..5fab05c 100644
--- a/src/renderer/components/ui/tree/Tree.vue
+++ b/src/renderer/components/ui/tree/Tree.vue
@@ -1,209 +1,74 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ node.name }}
-
-
-
-
-
-
-
-
-
diff --git a/src/renderer/components/ui/tree/TreeNode.vue b/src/renderer/components/ui/tree/TreeNode.vue
new file mode 100644
index 0000000..76ffeb7
--- /dev/null
+++ b/src/renderer/components/ui/tree/TreeNode.vue
@@ -0,0 +1,192 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ node.name }}
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/components/ui/tree/context.ts b/src/renderer/components/ui/tree/context.ts
new file mode 100644
index 0000000..d9a851b
--- /dev/null
+++ b/src/renderer/components/ui/tree/context.ts
@@ -0,0 +1,15 @@
+import type { ComputedRef, Reactive } from 'vue'
+import type { TreeNode } from './types'
+import type { TransitionEffect } from '@/utils/heightTransition'
+import { createContext } from '@renderer/shared/createContext'
+
+export interface TreeContext {
+ expandedNodes: Reactive
>
+ currentNode: ComputedRef
+ transitionHooks: TransitionEffect
+ toggleNodeExpanded: (path: string) => void
+ clearExpandedNodes: () => void
+ handleNodeClick: (node: TreeNode) => void
+}
+
+export const [useTreeContext, providerTreeContext] = createContext('Tree')
diff --git a/src/renderer/components/ui/tree/index.ts b/src/renderer/components/ui/tree/index.ts
index 2cbf69b..921e2eb 100644
--- a/src/renderer/components/ui/tree/index.ts
+++ b/src/renderer/components/ui/tree/index.ts
@@ -1 +1,3 @@
export { default as Tree } from './Tree.vue'
+
+export * from './types'
diff --git a/src/renderer/components/ui/tree/types.ts b/src/renderer/components/ui/tree/types.ts
index 33c4d37..7e443fd 100644
--- a/src/renderer/components/ui/tree/types.ts
+++ b/src/renderer/components/ui/tree/types.ts
@@ -1,3 +1,5 @@
+import type { HTMLAttributes } from 'vue'
+
// 树节点接口
export interface TreeNode {
name: string
@@ -7,9 +9,14 @@ export interface TreeNode {
}
// 树节点组件属性接口
-export interface TreeProps {
+export interface TreeNodeProps {
node: TreeNode
- level?: number
+}
+
+export interface TreeProps {
+ nodes: TreeNode[] | null
+ currentNode: string | null
+ class?: HTMLAttributes['class']
}
export interface TreeEmits {
diff --git a/src/renderer/components/ui/tree/useTree.ts b/src/renderer/components/ui/tree/useTree.ts
deleted file mode 100644
index 0b4706f..0000000
--- a/src/renderer/components/ui/tree/useTree.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import type { Tab } from '@/types/tab'
-import { computed, reactive, ref } from 'vue'
-import useTab from '@/hooks/useTab'
-import { transitionEffects } from '@/utils/heightTransition'
-
-// 树节点接口
-export interface FileTreeNode {
- name: string
- path: string
- isDirectory: boolean
- children?: FileTreeNode[]
-}
-
-// 树节点组件属性接口
-export interface FileTreeProps {
- node: FileTreeNode
- level?: number
- currentTab: Tab | null
-}
-
-// 全局的树节点展开状态管理
-const expandedNodes = reactive>(new Set())
-
-// 切换节点展开状态
-function toggleNodeExpanded(nodePath: string) {
- if (expandedNodes.has(nodePath)) {
- expandedNodes.delete(nodePath)
- } else {
- expandedNodes.add(nodePath)
- }
-}
-
-// 检查节点是否展开
-function isNodeExpanded(nodePath: string): boolean {
- return expandedNodes.has(nodePath)
-}
-
-// 设置节点展开状态
-function setNodeExpanded(nodePath: string, expanded: boolean) {
- if (expanded) {
- expandedNodes.add(nodePath)
- } else {
- expandedNodes.delete(nodePath)
- }
-}
-
-// 清空所有展开状态
-function clearExpandedNodes() {
- expandedNodes.clear()
-}
-
-// 树节点逻辑管理
-export function useTreeNode(props: FileTreeProps) {
- const { openFile } = useTab()
-
- // 子节点容器引用
- const childrenContainer = ref()
-
- // 使用全局状态管理展开状态
- const isExpanded = computed(() => isNodeExpanded(props.node.path))
-
- // 是否被选中
- const isSelected = computed(() => {
- return props.currentTab && props.currentTab.filePath === props.node.path
- })
-
- // 切换展开状态
- function toggleExpanded() {
- if (props.node.isDirectory && props.node.children) {
- toggleNodeExpanded(props.node.path)
- }
- }
-
- // 使用预定义的过渡效果
- const transitionHooks = transitionEffects.blurScale
-
- // 点击节点
- async function handleNodeClick() {
- if (props.node.isDirectory) {
- toggleExpanded()
- } else {
- // 处理文件点击，打开文件
- await openFile(props.node.path)
- }
- }
-
- return {
- childrenContainer,
- isExpanded,
- isSelected,
- toggleExpanded,
- transitionHooks,
- handleNodeClick,
- }
-}
-
-// 基础状态管理
-export function useTreeState() {
- return {
- expandedNodes,
- toggleNodeExpanded,
- isNodeExpanded,
- setNodeExpanded,
- clearExpandedNodes,
- }
-}
diff --git a/src/utils/heightTransition.ts b/src/utils/heightTransition.ts
index b886c92..3925bae 100644
--- a/src/utils/heightTransition.ts
+++ b/src/utils/heightTransition.ts
@@ -129,3 +129,5 @@ export const transitionEffects = {
translateY: 0,
}),
}
+
+export type TransitionEffect = ReturnType