draft: pre-refactor ipc

src/hooks/useTreeState.ts

@@ -61,6 +61,7 @@ export function useTreeNode(props: TreeNodeProps) {
 
   // 是否被选中
   const isSelected = computed(() => {
+    console.log('isSelected')
     return props.currentTab && props.currentTab.filePath === props.node.path
   })
 

src/hooks/useWorkSpace.ts

@@ -1,4 +1,4 @@
-import autolog from 'autolog.js'
+import toast from 'autotoast.js'
 import { ref, watch } from 'vue'
 import useTab from './useTab'
 
@@ -46,8 +46,8 @@ async function getWorkSpace() {
     isLoadWorkSpace = true
     // 更新工作区信息
     workSpace.value = result
-  } catch (error) {
-    autolog.log('获取目录文件失败:', 'error')
+  } catch {
+    toast.show('获取目录文件失败:', 'error')
   } finally {
     isLoading.value = false
   }
@@ -75,8 +75,8 @@ async function setWorkSpace() {
         isLoadWorkSpace = true
       }
     }
-  } catch (error) {
-    autolog.log('获取目录文件失败:', 'error')
+  } catch {
+    toast.show('获取目录文件失败:', 'error')
   }
 }
 

src/renderer/App.vue

@@ -7,6 +7,7 @@ import Outline from './components/Outline.vue'
 import SaveConfirmDialog from './components/SaveConfirmDialog.vue'
 import StatusBar from './components/StatusBar.vue'
 import TitleBar from './components/TitleBar.vue'
+import { MilkupProvider } from './context'
 
 // 使用整合的context hook
 const {
@@ -36,7 +37,9 @@ const {
     </Transition>
     <div class="editorBox">
       <MilkdownProvider v-if="!isShowSource">
-        <MilkdownEditor v-model="markdown" />
+        <MilkupProvider>
+          <MilkdownEditor v-model="markdown" />
+        </MilkupProvider>
       </MilkdownProvider>
       <MarkdownSourceEditor v-else-if="isShowSource" v-model="markdown" />
     </div>

src/renderer/components/WorkSpace.vue

@@ -1,28 +1,30 @@
 <script lang="ts" setup>
+import type { TreeNode } from '@ui/tree'
+import { Tree } from '@ui/tree'
 import useTab from '@/hooks/useTab'
 import useWorkSpace from '@/hooks/useWorkSpace'
-import TreeNode from './TreeNode.vue'
 
 const { workSpace, setWorkSpace } = useWorkSpace()
-const { currentTab } = useTab()
+const { currentTab, openFile } = useTab()
 
 // 打开文件夹选择对话框
 function openFolder() {
   setWorkSpace()
 }
+
+function handleNodeClick({ path }: TreeNode) {
+  openFile(path)
+}
 </script>
 
 <template>
   <div class="WorkSpace">
-    <div v-if="workSpace" class="tree-container">
-      <TreeNode
-        v-for="node in workSpace"
-        :key="node.path"
-        :current-tab="currentTab"
-        :node="node"
-        :level="0"
-      />
-    </div>
+    <Tree
+      v-if="workSpace"
+      :nodes="workSpace"
+      :current-node="currentTab ? currentTab.filePath : null"
+      @node-click="handleNodeClick"
+    />
     <div v-else class="empty-state">
       <p>暂无打开的工作区</p>
 
@@ -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;