feat(project): init

app/component/base/select/page.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import TreeSelect from "@/components/tree-select"
+import { getCityTree } from "@/components/tree-select/api"
+import { TreeNode } from "@/components/tree-select/api/type"
+import { VirtualTreeSelect } from "@/components/tree-select/tree"
+import {
+  Breadcrumbs,
+  Flex,
+  Paper,
+  Stack,
+  TreeNodeData,
+  UnstyledButton,
+} from "@mantine/core"
+import { useCallback, useEffect, useState } from "react"
+
+export const convertTreeNodeToTreeNodeData = (
+  list: TreeNode[],
+  level: number = 1
+): TreeNodeData[] =>
+  list.map((g) => ({
+    label: g.label,
+    value: g.value,
+    nodeProps: { level: level },
+    children:
+      g.children && g.children.length
+        ? convertTreeNodeToTreeNodeData(g.children, level + 1)
+        : [],
+  }))
+
+export default function ComponentBaseSelectPage() {
+  const items = [{ title: "选择组件" }].map((item) => (
+    <UnstyledButton key={item.title}>{item.title}</UnstyledButton>
+  ))
+
+  const [value, setValue] = useState<string>("")
+
+  const [treeData, setTreeData] = useState<TreeNodeData[]>([])
+  const asyncGetCityTree = useCallback(async () => {
+    const res = await getCityTree()
+    setTreeData(convertTreeNodeToTreeNodeData(res))
+  }, [])
+
+  useEffect(() => {
+    queueMicrotask(() => asyncGetCityTree())
+  }, [asyncGetCityTree])
+
+  return (
+    <>
+      <Stack w="100%" h="calc(100vh - 56px)" p="md">
+        <Breadcrumbs>{items}</Breadcrumbs>
+        <Paper shadow="xs" p={"md"} flex={1} display="flex">
+          <Flex h={"fit-content"} gap={"lg"}>
+            <TreeSelect treeData={treeData} />
+
+            <VirtualTreeSelect
+              data={treeData}
+              value={value}
+              onChange={setValue}
+              setCurrCityCode={() => {}}
+              w={"200px"}
+            />
+          </Flex>
+          <Flex>{value}</Flex>
+        </Paper>
+      </Stack>
+    </>
+  )
+}