feat(project): init

components/tree-select/index.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { useState } from "react"
+import {
+  Box,
+  Combobox,
+  Input,
+  ScrollArea,
+  Text,
+  TreeNodeData,
+  useCombobox,
+} from "@mantine/core"
+
+const TreeSelect = ({ treeData }: { treeData: TreeNodeData[] }) => {
+  const combobox = useCombobox()
+  const [value, setValue] = useState("")
+
+  const renderTreeNodes = (nodes: TreeNodeData[]) =>
+    nodes.map((node) => (
+      <Box key={node.value}>
+        {/* 这里的点击事件需要自己处理，例如展开子节点，更新输入框值 */}
+        <Box
+          onClick={() => {
+            setValue(node.label as string)
+            // combobox.closeDropdown()
+          }}
+          style={{
+            padding: "8px",
+            cursor: "pointer",
+            "&:hover": { backgroundColor: "#f0f0f0" },
+          }}>
+          <Text>{node.label}</Text>
+        </Box>
+        {node.children && <Box ml="md">{renderTreeNodes(node.children)}</Box>}
+      </Box>
+    ))
+
+  return (
+    <Combobox
+      store={combobox}
+      onOptionSubmit={(val) => setValue(val)}
+      withinPortal={false}>
+      <Combobox.Target>
+        <Input
+          component="button"
+          pointer
+          rightSection={<Combobox.Chevron />}
+          onClick={() => combobox.openDropdown()}
+          style={{ width: 250 }}>
+          {value || "请选择..."}
+        </Input>
+      </Combobox.Target>
+      <Combobox.Dropdown>
+        <Combobox.Options>
+          <ScrollArea.Autosize mah={200} type="always">
+            {renderTreeNodes(treeData)}
+          </ScrollArea.Autosize>
+        </Combobox.Options>
+      </Combobox.Dropdown>
+    </Combobox>
+  )
+}
+
+export default TreeSelect