改了一堆

docs/.vitepress/theme/index.js

@@ -1,5 +1,8 @@
 import DefaultTheme from 'vitepress/dist/client/theme-default'
-import PrincessUI from "@princess-ui/components"
+
+import PrincessUI from "princess-ui"
+import "princess-ui/theme-chalk/index.css"
+
 export default {
   ...DefaultTheme,
 

docs/demo-example.vue

@@ -12,18 +12,40 @@
       <span>{{ count }}</span>
     </p>
     <button @click="onClick">count++</button>
+    <ps-tree :list="list"></ps-tree>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 // import VTypical from 'vue-typical'
-
+import { convertTreeData } from "princess-ui/lib/tree"
 
 const count = ref(0)
 function onClick() {
   count.value++
 }
+
+const list = ref(convertTreeData([
+    {
+        key: 1,
+        title: "1",
+        children: [
+            {
+                key: 5,
+                title: "5"
+            },
+        ]
+    },
+    {
+        key: 2,
+        title: "2"
+    },
+    {
+        key: 3,
+        title: "3"
+    },
+]))
 </script>
 
 <style>

packages/build/buildComponent.ts

@@ -3,11 +3,13 @@ import vue from "@vitejs/plugin-vue"
 import path from "path"
 import dts from "vite-plugin-dts"
 import { replaceCodePlugin } from "vite-plugin-replace";
+import fs from "fs-extra";
 // import libInjectCss from "./libInjectCss"
 import _ from "lodash"
 import { getOutput, getPath, getPkgs } from "@princess-ui/share";
 
 export default function (prefix: string, component: string, name: string, opts?: {}) {
+    const isExistVue = fs.pathExistsSync(`components/${component}/index.vue`)
     return build({
         logLevel: "error",
         plugins: [
@@ -17,7 +19,8 @@ export default function (prefix: string, component: string, name: string, opts?:
                 tsConfigFilePath: getPath("tsconfig.json"),
                 outputDir: getOutput(`lib/${component}`),
                 cleanVueFileName: true,
-                include: [`components/${component}/index.vue`],
+                // include: [isExistVue?`components/${component}/index.vue`:`components/${component}/${component}.vue`, `components/${component}/index.ts`],
+                include: [`components/${component}`],
                 staticImport: true,
             }),
             replaceCodePlugin({

packages/build/util.ts

@@ -14,7 +14,7 @@ export async function getComponents() {
 }
 
 export async function generateComponents(components?: string[]) {
-    const componetnsStr: string[] = [`// 该文件为自动生成，请勿修改！！！`]
+    // const componetnsStr: string[] = [`// 该文件为自动生成，请勿修改！！！`]
     const newComp: string[] = []
     const typeArray: string[] = []
     let typeStr = `declare module 'vue' {
@@ -28,12 +28,12 @@ export { }`
     }
     components.forEach(name => {
         const n = "Ps" + _.upperFirst(_.kebabCase(name))
-        componetnsStr.push(`import ${n} from "./${name}"`)
+        // componetnsStr.push(`import ${n} from "./${name}"`)
         newComp.push(n)
         typeArray.push(n + `: typeof import('princess-ui')['${n}']`)
     })
-    componetnsStr.push(`export { \n  ${newComp.join(",\n  ")} \n}`)
+    // componetnsStr.push(`export { \n  ${newComp.join(",\n  ")} \n}`)
     typeStr = typeStr.replace("__placeholder__", typeArray.join(',\n        '))
     await fs.writeFile(getOutput("components.d.ts"), typeStr)
-    await fs.writeFile(getPkgs("components/components.ts"), componetnsStr.join("\n"))
+    // await fs.writeFile(getPkgs("components/components.ts"), componetnsStr.join("\n"))
 }

packages/components/button/index.vue → packages/components/button/button.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>ffffffffffff</div>
+    <div>ffffffffffff-{{ test }}</div>
 </template>
 
 <script lang="ts">
@@ -10,16 +10,13 @@ export default defineComponent({
 
 <script lang="ts" setup>
 import { defineComponent, onBeforeUnmount, ref } from "vue"
-// const props = withDefaults(
+const props = defineProps<{
-//     defineProps<{
+    test: string
+}>()
+console.log(props);
 
-//     }>(),
+const emits = defineEmits<{
-//     {
 
-//     },
+}>()
-// )
-// const emits = defineEmits<{
-
-// }>()
 
 </script>

packages/components/button/index.ts

@@ -1,4 +1,9 @@
-import PsButton from "./index.vue"
+import { App } from "vue"
+import PsButton from "./button.vue"
+
+PsButton.install = function(app: App) {
+    app.component(PsButton.name || "ps-button", PsButton)
+}
 
 export {
     PsButton

packages/components/captcha/index.ts

@@ -1,4 +1,9 @@
-import PsCaptcha from "./index.vue"
+import { App } from "vue"
+import PsCaptcha from "./captcha.vue"
+
+PsCaptcha.install = function(app: App) {
+    app.component(PsCaptcha.name || "ps-captcha", PsCaptcha)
+}
 
 export {
     PsCaptcha

packages/components/components.ts

@@ -1,7 +1,3 @@
-// 该文件为自动生成，请勿修改！！！
+export * from "./button"
-import PsButton from "./button"
+export * from "./captcha"
-import PsCaptcha from "./captcha"
+export * from "./tree"
-export { 
-  PsButton,
-  PsCaptcha 
-}

packages/components/tree/index.ts

@@ -0,0 +1,14 @@
+import { App } from "vue"
+import PsTree from "./tree.vue"
+
+export * from "./util"
+export * from "./type"
+
+PsTree.install = function(app: App) {
+    app.component(PsTree.name || "ps-tree", PsTree)
+}
+
+export {
+    PsTree,
+}
+export default PsTree

packages/components/tree/node.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="ps-tree-node component" :class="[{ draging: status === ENiuTreeStatus.DragIng }]">
+        <div class="ps-tree-node-wrapper" ref="nodeEL" :draggable="draggable" :onDragstart="onDragstart"
+            :onDragend="onDragend" :onDrop="onDrop" :onDragover="onDragover" :onDragleave="onDragleave"
+            @click.stop="emit('click', data)">
+            <slot :data="data" :deep="level" :dataSourceKey="dataSourceKey" :status="status">
+                <div :style="{
+                    marginLeft: level * 10 + 'px',
+                    'position': 'relative',
+                    zIndex: 10
+                }">
+                    {{ data.title }} - {{ level * 10 + 'px' }}
+                </div>
+                <NiuTreeDrag v-bind="props" :status="status" :style="{
+                    marginLeft: level * 10 + 'px',
+                }"></NiuTreeDrag>
+            </slot>
+        </div>
+        <div class="ps-tree-sub-node" v-if="(opts.justOpen || data.isExpand) && data.children && data.children.length">
+            <template v-for="(item, index) in data.children" :key="item.key">
+                <node @onDragstart="(e: INiuTreeKey) => emit('onDragstart', e)"
+                    @onDragend="(e: INiuTreeKey) => emit('onDragend', e)"
+                    @onDrop="(e: INiuTreeKey, s?: ENiuTreeStatus) => emit('onDrop', e, s)"
+                    @onDragover="(e: INiuTreeKey) => emit('onDragover', e)"
+                    @onDragleave="(e: INiuTreeKey) => emit('onDragleave', e)"
+                    @click="(e: INiuTreeData) => emit('click', e)" :data-source-key="dataSourceKey" :data="item"
+                    :list="list" :level="level + 1">
+                    <template
+                        #default="{ data, deep, dataSourceKey, status }: { data: INiuTreeData, deep: number, dataSourceKey: INiuTreeKey, status: ENiuTreeStatus }">
+                        <slot :data="data" :deep="deep" :dataSourceKey="dataSourceKey" :status="status">
+                            <div :style="{
+                                marginLeft: deep * 10 + 'px',
+                                'position': 'relative',
+                                zIndex: 10
+                            }">
+                                {{ data.title }} - {{ deep * 10 + 'px' }}
+                            </div>
+                            <NiuTreeDrag v-bind="props" :status="status" :style="{
+                                marginLeft: deep * 10 + 'px',
+                            }"></NiuTreeDrag>
+                        </slot>
+                    </template>
+                </node>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { isChildOf } from './util'
+import NiuTreeDrag from './tree-drag.vue';
+import { ENiuTreeStatus, INiuTreeData, INiuTreeKey } from './type';
+const props = withDefaults(
+    defineProps<{
+        data: INiuTreeData
+        list: INiuTreeData[]
+        dataSourceKey?: INiuTreeKey
+        level?: number
+    }>(),
+    {
+        level: 0,
+    }
+)
+const opts = inject("tree:opts", {
+    justOpen: false
+})
+const emit = defineEmits<{
+    (e: 'click', data: INiuTreeData): void
+    (e: 'onDragstart', key: INiuTreeKey): void
+    (e: 'onDragend', key: INiuTreeKey): void
+    (e: 'onDrop', key: INiuTreeKey, status?: ENiuTreeStatus): void
+    (e: 'onDragover', key: INiuTreeKey): void
+    (e: 'onDragleave', key: INiuTreeKey): void
+}>()
+
+const draggable = ref(true)
+const status = ref<ENiuTreeStatus>()
+const nodeEL = ref<HTMLDivElement>()
+provide("draggable", draggable)
+function onDragstart(event: DragEvent) {
+    // 开始拖拽
+    if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'move'
+        event.dataTransfer.effectAllowed = 'move'
+        if (nodeEL.value) {
+            let clone = nodeEL.value.cloneNode(true) as HTMLDivElement
+            clone.id = 'dragging_node'
+            clone.style.display = 'inline-block'
+            clone.style.position = 'absolute'
+            clone.style.zIndex = '100000'
+            clone.style.width = '100px'
+            clone.style.top = '-100000px'
+            document.body.append(clone)
+            event.dataTransfer.setDragImage(clone, -4, -4)
+        }
+        emit('onDragstart', props.data.key)
+        status.value = ENiuTreeStatus.DragIng
+    }
+}
+function onDragend() {
+    // 结束拖拽
+    let clone = document.getElementById('dragging_node')
+    clone?.remove()
+    status.value = undefined
+    emit('onDragend', props.data.key)
+}
+function onDrop(e: DragEvent) {
+    e.preventDefault()
+    emit('onDrop', props.data.key, status.value)
+    status.value = undefined
+}
+
+function onDragover(event: DragEvent) {
+    event.preventDefault()
+    if (!props.dataSourceKey) return
+    if (props.dataSourceKey === props.data.key) return
+    if (
+        props.dataSourceKey &&
+        isChildOf(props.data.key, props.dataSourceKey, props.list)
+    )
+        return
+    const y = event.offsetY
+    const h = (event.currentTarget as HTMLDivElement).offsetHeight
+    if (y < h / 3) {
+        status.value = ENiuTreeStatus.DragUp
+    } else if (y <= (h * 2) / 3 && y >= h / 3 && props.data.children) {
+        status.value = ENiuTreeStatus.DragIn
+    } else if (y > (h * 2) / 3) {
+        status.value = ENiuTreeStatus.DragDown
+    } else {
+        status.value = undefined
+    }
+    emit('onDragover', props.data.key)
+}
+function onDragleave() {
+    if (!props.dataSourceKey) return
+    if (props.dataSourceKey === props.data.key) return
+    if (
+        props.dataSourceKey &&
+        isChildOf(props.data.key, props.dataSourceKey, props.list)
+    )
+        return
+
+    // 拖拽离开元素上
+    status.value = undefined
+    emit('onDragleave', props.data.key)
+}
+</script>
+<script lang="ts">
+import { defineComponent, inject, ref, provide } from 'vue'
+export default defineComponent({
+    name: 'ps-tree-node',
+})
+</script>

packages/components/tree/tree-drag.vue

@@ -0,0 +1,34 @@
+<template>
+    <div :class="[
+        {
+            'ps-tree-drag-up':
+                dataSourceKey != data.key &&
+                dataSourceKey != undefined &&
+                !isChildOf(data.key, dataSourceKey, list) &&
+                status === ENiuTreeStatus.DragUp,
+            'ps-tree-drag-in':
+                dataSourceKey != data.key &&
+                dataSourceKey &&
+                !isChildOf(data.key, dataSourceKey, list) &&
+                status === ENiuTreeStatus.DragIn,
+            'ps-tree-drag-down':
+                dataSourceKey != data.key &&
+                dataSourceKey &&
+                !isChildOf(data.key, dataSourceKey, list) &&
+                status === ENiuTreeStatus.DragDown,
+        },
+    ]"></div>
+</template>
+<script lang="ts" setup>
+import { isChildOf } from "./util";
+import { ENiuTreeStatus, INiuTreeData, INiuTreeKey } from "./type";
+const props = withDefaults(
+    defineProps<{
+        data: INiuTreeData
+        list: INiuTreeData[]
+        dataSourceKey?: INiuTreeKey
+        status?: ENiuTreeStatus
+    }>(),
+    {},
+)
+</script>

packages/components/tree/tree.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="ps-tree component">
+        <template v-for="(item, index) in list" :key="item.key">
+            <node @onDragstart="onDragstart" @onDragEnd="onDragEnd" @onDrop="onDrop" :data-source-key="dataSourceKey"
+                :data="item" :list="list" :level="level" @click="(item) => clickNode(item)">
+                <template
+                    #default="{ data, deep, dataSourceKey, status }: { data: INiuTreeData, deep: number, dataSourceKey: INiuTreeKey, status: ENiuTreeStatus }">
+                    <slot :data="data" :deep="deep" :dataSourceKey="dataSourceKey" :status="status"></slot>
+                </template>
+            </node>
+        </template>
+    </div>
+</template>
+<script lang="ts" setup>
+import { INiuTreeData, INiuTreeKey, ENiuTreeStatus } from './type'
+import {
+    findByKey,
+    forEachTree,
+    insertAfterByKey,
+    insertBeforeByKey,
+    isChildOf,
+    removeByKey,
+} from './util'
+
+const props = withDefaults(
+    defineProps<{
+        list: INiuTreeData[]
+        justOpen?: boolean
+        autoExpand?: boolean
+        justOpenOne?: boolean
+        level?: number
+    }>(),
+    {
+        justOpenOne: false,
+        justOpen: false,
+        autoExpand: false,
+        level: 0,
+    }
+)
+
+provide("tree:opts", props)
+
+function clickNode(item: INiuTreeData) {
+    if (props.justOpenOne) {
+        forEachTree(props.list, (node: INiuTreeData) => {
+            node.isExpand = false
+        })
+    }
+    if (item.isFolder) {
+        item.isExpand = !item.isExpand
+        emit("change")
+    }
+
+}
+
+const emit = defineEmits<{
+    (e: 'change'): void
+}>()
+
+const dataSourceKey = ref()
+function onDragstart(key: INiuTreeKey) {
+    dataSourceKey.value = key
+}
+function onDragEnd(key: INiuTreeKey) {
+    dataSourceKey.value = undefined
+}
+function onDrop(key: INiuTreeKey, status?: ENiuTreeStatus) {
+    if (!dataSourceKey.value) return
+    if (!key) return
+    let data = findByKey(dataSourceKey.value, props.list)
+    let targetData = findByKey(key, props.list)
+    switch (status) {
+        case ENiuTreeStatus.DragIn:
+            if (
+                data &&
+                targetData &&
+                dataSourceKey.value != key &&
+                !isChildOf(key, dataSourceKey.value, props.list) &&
+                targetData.children
+            ) {
+                removeByKey(dataSourceKey.value, props.list)
+                targetData.children.push(data)
+                if (props.autoExpand) {
+                    targetData.isExpand = true
+                }
+                emit("change")
+            }
+            break
+        case ENiuTreeStatus.DragDown:
+            // 按索引往列表添加节点
+            if (
+                data &&
+                targetData &&
+                dataSourceKey.value != key &&
+                !isChildOf(key, dataSourceKey.value, props.list)
+            ) {
+                removeByKey(dataSourceKey.value, props.list)
+                insertAfterByKey(key, data, props.list)
+                emit("change")
+            }
+            break
+        case ENiuTreeStatus.DragUp:
+            // 按索引往列表添加节点
+            if (
+                data &&
+                targetData &&
+                dataSourceKey.value != key &&
+                !isChildOf(key, dataSourceKey.value, props.list)
+            ) {
+                removeByKey(dataSourceKey.value, props.list)
+                insertBeforeByKey(key, data, props.list)
+                emit("change")
+            }
+            break
+    }
+    dataSourceKey.value = undefined
+}
+</script>
+<script lang="ts">
+import { defineComponent, provide, ref } from "vue"
+import node from './node.vue'
+
+export default defineComponent({
+    name: 'ps-tree',
+})
+</script>
+

packages/components/tree/type.ts

@@ -0,0 +1,32 @@
+export interface INiuTreeProps {
+    key: INiuTreeKey // 唯一键值
+    title: string // 标题
+    isExpand?: boolean // 标题
+    isEdit?: boolean
+    isDel?: boolean // 是否被删除了
+    isNew?: boolean,
+    data?: any // 节点数据
+    children?: INiuTreeProps[] // 子节点
+}
+
+export type INiuTreeKey = string | number
+
+export interface INiuTreeData<T = any> {
+    key: INiuTreeKey
+    title: string
+    isFolder: boolean
+    isExpand: boolean
+    isFile: boolean
+    isNew?: boolean,
+    isDel?: boolean,
+    data?: T
+    isEdit: boolean
+    children?: INiuTreeData[]
+}
+
+export enum ENiuTreeStatus {
+    DragUp = 'drag-up',
+    DragIn = 'drag-in',
+    DragDown = 'drag-down',
+    DragIng = 'drag-ing',
+}

packages/components/tree/util.ts

@@ -0,0 +1,155 @@
+import { INiuTreeData, INiuTreeKey, INiuTreeProps } from "./type"
+
+export function convertTreeData(items: INiuTreeProps[]) {
+    return convertData<INiuTreeProps, INiuTreeData>(items)
+}
+export function convert(item: INiuTreeProps) {
+    return convertData<INiuTreeProps, INiuTreeData>([item])[0]
+}
+
+export function convertData<
+    T extends { children?: T[] },
+    S extends { children?: S[] }
+>(data: T[] | S[]): S[] {
+    const transformData = data.map((item: any) => {
+        const children = item.children && convertData(item.children)
+        const result = {
+            ...item,
+            isEdit: item?.isEdit?item.isEdit:false,
+            isNew: item?.isNew?item.isNew:false,
+            isFolder: !!children,
+            isExpand: item?.isExpand?item.isExpand:false, // 默认全部收缩
+            isFile: !children,
+            children,
+        } as S
+        return result
+    })
+    return transformData
+}
+export function flatTreeData(treeData: INiuTreeData[]): INiuTreeData[] {
+    let res: INiuTreeData[] = []
+    treeData.forEach((data) => {
+        res.push(data)
+        if (data.children) {
+            res = res.concat(flatTreeData(data.children))
+        }
+    })
+    return res
+}
+export function isChildOf(
+    a_key: INiuTreeKey,
+    b_key: INiuTreeKey,
+    treeData: INiuTreeData[]
+) {
+    if (a_key === b_key) return false
+
+    let target_node = findByKey(b_key, treeData)
+    if (!target_node || !Array.isArray(target_node.children)) return false
+
+    return (
+        flatTreeData(target_node.children).findIndex((i) => i.key === a_key) >
+        -1
+    )
+}
+
+export function forEachTree(tree: INiuTreeData[], cb: (node: INiuTreeData)=>void) {
+    tree.forEach(v=>{
+        cb && cb(v)
+        if(v.children && v.children.length){
+            forEachTree(v.children, cb)
+        }
+    })
+}
+
+export function findByKey(
+    key: INiuTreeKey,
+    treeData: INiuTreeData[]
+): INiuTreeData | undefined {
+    for (let i = 0; i < treeData.length; i++) {
+        const data = treeData[i]
+        if (data.key === key) {
+            return data
+        }
+        if (data.children && data.children.length) {
+            let result = findByKey(key, data.children)
+            if (result) {
+                return result
+            }
+        }
+    }
+}
+export function findByKeyParent(
+    key: INiuTreeKey,
+    treeData: INiuTreeData[]
+): INiuTreeData | undefined {
+    for (let i = 0; i < treeData.length; i++) {
+        const data = treeData[i]
+        if (data.children?.map(v=>v.key).includes(key)) {
+            return data
+        }
+        if (data.children && data.children.length) {
+            let result = findByKeyParent(key, data.children)
+            if (result) {
+                return result
+            }
+        }
+    }
+}
+export function insertBeforeByKey(
+    key: INiuTreeKey,
+    node: INiuTreeData,
+    treeData: INiuTreeData[]
+) {
+    if (!treeData || !treeData.length) {
+        return
+    }
+    for (let i = 0; i < treeData.length; i++) {
+        let data = treeData[i]
+        console.log(key)
+
+        if (data.key === key) {
+            console.log(node)
+            treeData.splice(i, 0, node)
+            break
+        }
+        if (data && data.children) {
+            insertBeforeByKey(key, node, data.children)
+        }
+    }
+}
+export function insertAfterByKey(
+    key: INiuTreeKey,
+    node: INiuTreeData,
+    treeData: INiuTreeData[]
+) {
+    if (!treeData || !treeData.length) {
+        return
+    }
+    for (let i = 0; i < treeData.length; i++) {
+        let data = treeData[i]
+        if (data.key === key) {
+            treeData.splice(i + 1, 0, node)
+            break
+        }
+        if (data && data.children) {
+            insertAfterByKey(key, node, data.children)
+        }
+    }
+}
+// https://blog.csdn.net/baidu_36095053/article/details/121649810
+export function removeByKey(key: INiuTreeKey, treeData: INiuTreeData[], cb?:(node: INiuTreeData)=>void) {
+    if (!treeData || !treeData.length) {
+        return
+    }
+    for (let i = 0; i < treeData.length; i++) {
+        let data = treeData[i]
+        if (data.key === key) {
+            cb && cb(data)
+            treeData.splice(i, 1)
+            break
+        }
+        if (data && data.children) {
+            removeByKey(key, data.children)
+        }
+    }
+}

packages/playground/src/App.vue

@@ -1,28 +1,17 @@
 <script setup lang="ts">
-function send(start: () => void, done: (isDone: boolean) => void) {
+import DevCaptcha from "./dev/captcha.vue"
-    start()
+import DevTree from "./dev/tree.vue"
-    setTimeout(() => {
+// import a, * as b from "@princess-ui/components"
-        done(true)
+// import c, * as d from "princess-ui"
-    }, 2500);
+// console.log(a);
-}
+// console.log(b);
+// console.log(c);
+// console.log(d);
 </script>
 
 <template>
-    <Panel name="验证码">
+    <DevCaptcha></DevCaptcha>
-        <div class="bg-white px-10px py-5px rounded-8px flex">
+    <DevTree></DevTree>
-            <input type="text" class="outline-0 flex-1" placeholder="请输入验证码">
-            <ps-captcha @send="send" :duration="5">sada</ps-captcha>
-        </div>
-    </Panel>
-    <Panel name="带边框的验证码" desc="带了个小边框">
-        <div class="bg-white px-10px py-5px rounded-8px flex">
-            <input type="text" class="outline-0 flex-1" placeholder="请输入验证码">
-            <ps-captcha @send="send" border :duration="5">sada</ps-captcha>
-        </div>
-    </Panel>
-    <Panel name="按钮">
-        <ps-button></ps-button>
-    </Panel>
 </template>
 
 <style>
@@ -39,11 +28,10 @@ body {
     align-items: center;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    text-align: center;
     height: 100vh;
 }
 
-.card{
+.card {
     margin-bottom: 25px;
 }
 </style>

packages/playground/src/dev/captcha.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+function send(start: () => void, done: (isDone: boolean) => void) {
+    start()
+    setTimeout(() => {
+        done(true)
+    }, 2500);
+}
+
+</script>
+
+<template>
+    <Panel name="验证码">
+        <div class="bg-white px-10px py-5px rounded-8px flex">
+            <input type="text" class="outline-0 flex-1" placeholder="请输入验证码">
+            <ps-captcha @send="send" :duration="5">sada</ps-captcha>
+        </div>
+    </Panel>
+    <Panel name="带边框的验证码" desc="带了个小边框">
+        <div class="bg-white px-10px py-5px rounded-8px flex">
+            <input type="text" class="outline-0 flex-1" placeholder="请输入验证码">
+            <ps-captcha @send="send" border :duration="5">sada</ps-captcha>
+        </div>
+    </Panel>
+    <Panel name="按钮">
+        <ps-button></ps-button>
+    </Panel>
+</template>

packages/playground/src/dev/tree.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from "vue"
+import PsTree, { convertTreeData } from "@princess-ui/components/tree"
+
+const list = ref(convertTreeData([
+    {
+        key: 1,
+        title: "1",
+        children: [
+            {
+                key: 5,
+                title: "5"
+            },
+        ]
+    },
+    {
+        key: 2,
+        title: "2"
+    },
+    {
+        key: 3,
+        title: "3"
+    },
+]))
+</script>
+
+<template>
+    <Panel name="Tree">
+        <ps-tree :list="list"></ps-tree>
+    </Panel>
+</template>

packages/theme-chalk/src/base.scss

@@ -1,3 +0,0 @@
-*{
-    color: gainsboro;
-}

packages/theme-chalk/src/button.scss

@@ -1,5 +1 @@
-@use "common/var.scss";
+@import 'common/var.scss';
-
-div{
-    color: darkkhaki;
-}

packages/theme-chalk/src/captcha.scss

@@ -1,4 +1,4 @@
-@use 'common/var.scss';
+@import 'common/var.scss';
 
 .ps-send {
     user-select: none;

packages/theme-chalk/src/common/var.scss

@@ -1 +1 @@
-
+$primary-color: red;//#32b0f877

packages/theme-chalk/src/index.scss

@@ -1,2 +1,3 @@
 @import "./button.scss";
 @import "./captcha.scss";
+@import "./tree.scss";

packages/theme-chalk/src/tree.scss

@@ -0,0 +1,72 @@
+@import 'common/var.scss';
+
+.ps-tree-node.component {
+    position: relative;
+
+    &.draging {
+        opacity: 0.6;
+    }
+
+    .ps-tree-node-wrapper {
+        position: relative;
+    }
+}
+
+.ps-tree-drag-up {
+    background-color: $primary-color !important;
+    position: absolute;
+    top: -1px;
+    left: 5px;
+    right: 8px;
+    height: 2px;
+    pointer-events: none;
+    z-index: 9;
+
+    &::before {
+        content: '';
+        width: 6px;
+        height: 6px;
+        background-color: $primary-color;
+        border-radius: 50%;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        margin-top: -3px;
+        margin-left: -3px;
+    }
+}
+
+.ps-tree-drag-down {
+    background-color: $primary-color !important;
+    position: absolute;
+    bottom: -1px;
+    left: 5px;
+    right: 8px;
+    height: 2px;
+    pointer-events: none;
+    z-index: 9;
+
+    &::before {
+        content: '';
+        width: 6px;
+        height: 6px;
+        background-color: $primary-color;
+        border-radius: 50%;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        margin-top: -3px;
+        margin-left: -3px;
+    }
+}
+
+.ps-tree-drag-in {
+    background-color: $primary-color !important;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    z-index: 9;
+}