@mdesignable/react 1.0.0-beta.64

package/lib/widgets/NodePathWidget/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodePathWidget = void 0;
+var react_1 = __importDefault(require("react"));
+var antd_1 = require("antd");
+var hooks_1 = require("../../hooks");
+var IconWidget_1 = require("../IconWidget");
+var NodeTitleWidget_1 = require("../NodeTitleWidget");
+var reactive_react_1 = require("@formily/reactive-react");
+require("./styles.less");
+exports.NodePathWidget = (0, reactive_react_1.observer)(function (props) {
+    var _a;
+    var selected = (0, hooks_1.useSelectedNode)(props.workspaceId);
+    var selection = (0, hooks_1.useSelection)(props.workspaceId);
+    var hover = (0, hooks_1.useHover)(props.workspaceId);
+    var prefix = (0, hooks_1.usePrefix)('node-path');
+    if (!selected)
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    var maxItems = (_a = props.maxItems) !== null && _a !== void 0 ? _a : 3;
+    var nodes = selected
+        .getParents()
+        .slice(0, maxItems - 1)
+        .reverse()
+        .concat(selected);
+    return (react_1.default.createElement(antd_1.Breadcrumb, { className: prefix }, nodes.map(function (node, key) {
+        return (react_1.default.createElement(antd_1.Breadcrumb.Item, { key: key },
+            key === 0 && (react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Position", style: { marginRight: 3 } })),
+            react_1.default.createElement("a", { href: "", onMouseEnter: function () {
+                    hover.setHover(node);
+                }, onClick: function (e) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    selection.select(node);
+                } },
+                react_1.default.createElement(NodeTitleWidget_1.NodeTitleWidget, { node: node }))));
+    })));
+});

package/lib/widgets/NodePathWidget/styles.less

@@ -0,0 +1,16 @@
+.dn-node-path {
+  padding: 4px 10px !important;
+  border-bottom: 1px solid var(--dn-panel-border-color);
+
+  .dn-icon {
+    font-size: 11px;
+  }
+
+  .ant-breadcrumb-separator {
+    margin: 0 4px !important;
+  }
+
+  a {
+    font-size: 12px;
+  }
+}

package/lib/widgets/NodeTitleWidget/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+export interface INodeTitleWidgetProps {
+    node: TreeNode;
+}
+export declare const NodeTitleWidget: React.FC<INodeTitleWidgetProps>;

package/lib/widgets/NodeTitleWidget/index.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeTitleWidget = void 0;
+var react_1 = __importStar(require("react"));
+var reactive_react_1 = require("@formily/reactive-react");
+exports.NodeTitleWidget = (0, reactive_react_1.observer)(function (props) {
+    var takeNode = function () {
+        var node = props.node;
+        if (node.componentName === '$$ResourceNode$$') {
+            return node.children[0];
+        }
+        return node;
+    };
+    var node = takeNode();
+    return react_1.default.createElement(react_1.Fragment, null, node.getMessage('title') || node.componentName);
+});

package/lib/widgets/OutlineWidget/Insertion.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface IInsertionProps {
+    workspaceId?: string;
+}
+export declare const Insertion: React.FC<IInsertionProps>;

package/lib/widgets/OutlineWidget/Insertion.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Insertion = void 0;
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../hooks");
+var core_1 = require("@mdesignable/core");
+var reactive_react_1 = require("@formily/reactive-react");
+exports.Insertion = (0, reactive_react_1.observer)(function (_a) {
+    var workspaceId = _a.workspaceId;
+    var moveHelper = (0, hooks_1.useMoveHelper)(workspaceId);
+    var prefix = (0, hooks_1.usePrefix)('outline-tree-insertion');
+    var createInsertionStyle = function () {
+        var closestDirection = moveHelper.outlineClosestDirection;
+        var closestRect = moveHelper.outlineClosestOffsetRect;
+        var baseStyle = {
+            position: 'absolute',
+            transform: 'perspective(1px) translate3d(0,0,0)',
+            top: 0,
+            left: 0,
+        };
+        if (!closestRect)
+            return baseStyle;
+        if (closestDirection === core_1.ClosestPosition.After ||
+            closestDirection === core_1.ClosestPosition.InnerAfter ||
+            closestDirection === core_1.ClosestPosition.Under ||
+            closestDirection === core_1.ClosestPosition.ForbidAfter ||
+            closestDirection === core_1.ClosestPosition.ForbidInnerAfter ||
+            closestDirection === core_1.ClosestPosition.ForbidUnder) {
+            baseStyle.width = closestRect.width;
+            baseStyle.height = 2;
+            baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y + closestRect.height - 2, "px,0)");
+        }
+        else if (closestDirection === core_1.ClosestPosition.Before ||
+            closestDirection === core_1.ClosestPosition.InnerBefore ||
+            closestDirection === core_1.ClosestPosition.Upper ||
+            closestDirection === core_1.ClosestPosition.ForbidBefore ||
+            closestDirection === core_1.ClosestPosition.ForbidInnerBefore ||
+            closestDirection === core_1.ClosestPosition.ForbidUpper) {
+            baseStyle.width = closestRect.width;
+            baseStyle.height = 2;
+            baseStyle.transform = "perspective(1px) translate3d(".concat(closestRect.x, "px,").concat(closestRect.y, "px,0)");
+        }
+        if (closestDirection.includes('FORBID')) {
+            baseStyle.backgroundColor = 'red';
+        }
+        else {
+            baseStyle.backgroundColor = '';
+        }
+        return baseStyle;
+    };
+    if (!(moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.closestNode))
+        return null;
+    return react_1.default.createElement("div", { className: prefix, style: createInsertionStyle() });
+});
+exports.Insertion.displayName = 'Insertion';

package/lib/widgets/OutlineWidget/OutlineNode.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+import './styles.less';
+export interface IOutlineTreeNodeProps {
+    node: TreeNode;
+    style?: React.CSSProperties;
+    className?: string;
+    workspaceId?: string;
+}
+export declare const OutlineTreeNode: React.FC<IOutlineTreeNodeProps>;

package/lib/widgets/OutlineWidget/OutlineNode.js

@@ -0,0 +1,169 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OutlineTreeNode = void 0;
+var react_1 = __importStar(require("react"));
+var core_1 = require("@mdesignable/core");
+var shared_1 = require("@mdesignable/shared");
+var reactive_1 = require("@formily/reactive");
+var reactive_react_1 = require("@formily/reactive-react");
+var hooks_1 = require("../../hooks");
+var IconWidget_1 = require("../IconWidget");
+var NodeTitleWidget_1 = require("../NodeTitleWidget");
+var context_1 = require("./context");
+var classnames_1 = __importDefault(require("classnames"));
+require("./styles.less");
+exports.OutlineTreeNode = (0, reactive_react_1.observer)(function (_a) {
+    var _b, _c;
+    var node = _a.node, className = _a.className, style = _a.style, workspaceId = _a.workspaceId;
+    var prefix = (0, hooks_1.usePrefix)('outline-tree-node');
+    var engine = (0, hooks_1.useDesigner)();
+    var ref = (0, react_1.useRef)();
+    var ctx = (0, react_1.useContext)(context_1.NodeContext);
+    var request = (0, react_1.useRef)(null);
+    var cursor = (0, hooks_1.useCursor)();
+    var selection = (0, hooks_1.useSelection)(workspaceId);
+    var moveHelper = (0, hooks_1.useMoveHelper)(workspaceId);
+    (0, react_1.useEffect)(function () {
+        return engine.subscribeTo(core_1.DragMoveEvent, function () {
+            var _a;
+            var closestNodeId = (_a = moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.closestNode) === null || _a === void 0 ? void 0 : _a.id;
+            var closestDirection = moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.outlineClosestDirection;
+            var id = node.id;
+            if (!ref.current)
+                return;
+            if (closestNodeId === id &&
+                closestDirection === core_1.ClosestPosition.Inner) {
+                if (!ref.current.classList.contains('droppable')) {
+                    ref.current.classList.add('droppable');
+                }
+                if (!ref.current.classList.contains('expanded')) {
+                    if (request.current) {
+                        clearTimeout(request.current);
+                        request.current = null;
+                    }
+                    request.current = setTimeout(function () {
+                        ref.current.classList.add('expanded');
+                    }, 600);
+                }
+            }
+            else {
+                if (request.current) {
+                    clearTimeout(request.current);
+                    request.current = null;
+                }
+                if (ref.current.classList.contains('droppable')) {
+                    ref.current.classList.remove('droppable');
+                }
+            }
+        });
+    }, [node, moveHelper, cursor]);
+    (0, react_1.useEffect)(function () {
+        return (0, reactive_1.autorun)(function () {
+            var _a;
+            var selectedIds = (selection === null || selection === void 0 ? void 0 : selection.selected) || [];
+            var id = node.id;
+            if (!ref.current)
+                return;
+            if (selectedIds.includes(id)) {
+                if (!ref.current.classList.contains('selected')) {
+                    ref.current.classList.add('selected');
+                }
+            }
+            else {
+                if (ref.current.classList.contains('selected')) {
+                    ref.current.classList.remove('selected');
+                }
+            }
+            if (cursor.status === core_1.CursorStatus.Dragging &&
+                ((_a = moveHelper === null || moveHelper === void 0 ? void 0 : moveHelper.dragNodes) === null || _a === void 0 ? void 0 : _a.length)) {
+                if (ref.current.classList.contains('selected')) {
+                    ref.current.classList.remove('selected');
+                }
+            }
+        });
+    }, [node, selection, moveHelper]);
+    if (!node)
+        return null;
+    var renderIcon = function (node) {
+        var _a;
+        var icon = node.designerProps.icon;
+        if (icon) {
+            return react_1.default.createElement(IconWidget_1.IconWidget, { infer: icon, size: 12 });
+        }
+        if (node === (node === null || node === void 0 ? void 0 : node.root)) {
+            return react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Page", size: 12 });
+        }
+        else if ((_a = node.designerProps) === null || _a === void 0 ? void 0 : _a.droppable) {
+            return react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Container", size: 12 });
+        }
+        return react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Component", size: 12 });
+    };
+    var renderTitle = function (node) {
+        if ((0, shared_1.isFn)(ctx.renderTitle))
+            return ctx.renderTitle(node);
+        return (react_1.default.createElement("span", null,
+            react_1.default.createElement(NodeTitleWidget_1.NodeTitleWidget, { node: node })));
+    };
+    var renderActions = function (node) {
+        if ((0, shared_1.isFn)(ctx.renderActions))
+            return ctx.renderActions(node);
+    };
+    return (react_1.default.createElement("div", { style: style, ref: ref, className: (0, classnames_1.default)(prefix, className, 'expanded'), "data-designer-outline-node-id": node.id },
+        react_1.default.createElement("div", { className: prefix + '-header' },
+            react_1.default.createElement("div", { className: prefix + '-header-head', style: {
+                    left: -node.depth * 16,
+                    width: node.depth * 16,
+                } }),
+            react_1.default.createElement("div", { className: prefix + '-header-content' },
+                react_1.default.createElement("div", { className: prefix + '-header-base' },
+                    (((_b = node === null || node === void 0 ? void 0 : node.children) === null || _b === void 0 ? void 0 : _b.length) > 0 || node === node.root) && (react_1.default.createElement("div", { className: prefix + '-expand', onClick: function (e) {
+                            var _a, _b, _c, _d;
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if ((_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('expanded')) {
+                                (_c = ref.current) === null || _c === void 0 ? void 0 : _c.classList.remove('expanded');
+                            }
+                            else {
+                                (_d = ref.current) === null || _d === void 0 ? void 0 : _d.classList.add('expanded');
+                            }
+                        } },
+                        react_1.default.createElement(IconWidget_1.IconWidget, { infer: "Expand", size: 10 }))),
+                    react_1.default.createElement("div", { className: prefix + '-icon' }, renderIcon(node)),
+                    react_1.default.createElement("div", { className: prefix + '-title' }, renderTitle(node))),
+                react_1.default.createElement("div", { className: prefix + '-header-actions', "data-click-stop-propagation": true },
+                    renderActions(node),
+                    node !== node.root && (react_1.default.createElement(IconWidget_1.IconWidget, { className: (0, classnames_1.default)(prefix + '-hidden-icon', {
+                            hidden: node.hidden,
+                        }), infer: node.hidden ? 'EyeClose' : 'Eye', size: 14, onClick: function () {
+                            node.hidden = !node.hidden;
+                        } }))))),
+        react_1.default.createElement("div", { className: prefix + '-children' }, (_c = node.children) === null || _c === void 0 ? void 0 : _c.map(function (child) {
+            return (react_1.default.createElement(exports.OutlineTreeNode, { node: child, key: child.id, workspaceId: workspaceId }));
+        }))));
+});

package/lib/widgets/OutlineWidget/context.d.ts

@@ -0,0 +1,8 @@
+import { TreeNode } from '@mdesignable/core';
+import React from 'react';
+interface INodeContext {
+    renderTitle?: (node: TreeNode) => React.ReactNode;
+    renderActions?: (node: TreeNode) => React.ReactNode;
+}
+export declare const NodeContext: React.Context<INodeContext>;
+export {};

package/lib/widgets/OutlineWidget/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeContext = void 0;
+var react_1 = require("react");
+exports.NodeContext = (0, react_1.createContext)(null);

package/lib/widgets/OutlineWidget/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TreeNode } from '@mdesignable/core';
+export interface IOutlineTreeWidgetProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onClose?: () => void;
+    renderTitle?: (node: TreeNode) => React.ReactNode;
+    renderActions?: (node: TreeNode) => React.ReactNode;
+}
+export declare const OutlineTreeWidget: React.FC<IOutlineTreeWidgetProps>;

package/lib/widgets/OutlineWidget/index.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OutlineTreeWidget = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var hooks_1 = require("../../hooks");
+var reactive_react_1 = require("@formily/reactive-react");
+var OutlineNode_1 = require("./OutlineNode");
+var Insertion_1 = require("./Insertion");
+var context_1 = require("./context");
+var shared_1 = require("@mdesignable/shared");
+exports.OutlineTreeWidget = (0, reactive_react_1.observer)(function (_a) {
+    var onClose = _a.onClose, style = _a.style, renderActions = _a.renderActions, renderTitle = _a.renderTitle, className = _a.className, props = __rest(_a, ["onClose", "style", "renderActions", "renderTitle", "className"]);
+    var ref = (0, react_1.useRef)();
+    var prefix = (0, hooks_1.usePrefix)('outline-tree');
+    var workbench = (0, hooks_1.useWorkbench)();
+    var current = (workbench === null || workbench === void 0 ? void 0 : workbench.activeWorkspace) || (workbench === null || workbench === void 0 ? void 0 : workbench.currentWorkspace);
+    var workspaceId = current === null || current === void 0 ? void 0 : current.id;
+    var tree = (0, hooks_1.useTree)(workspaceId);
+    var outline = (0, hooks_1.useOutline)(workspaceId);
+    var outlineRef = (0, react_1.useRef)();
+    (0, react_1.useLayoutEffect)(function () {
+        if (!workspaceId)
+            return;
+        if (outlineRef.current && outlineRef.current !== outline) {
+            outlineRef.current.onUnmount();
+        }
+        if (ref.current && outline) {
+            outline.onMount(ref.current, shared_1.globalThisPolyfill);
+        }
+        outlineRef.current = outline;
+        return function () {
+            outline.onUnmount();
+        };
+    }, [workspaceId, outline]);
+    if (!outline || !workspaceId)
+        return null;
+    return (react_1.default.createElement(context_1.NodeContext.Provider, { value: { renderActions: renderActions, renderTitle: renderTitle } },
+        react_1.default.createElement("div", __assign({}, props, { className: (0, classnames_1.default)(prefix + '-container', className), style: style }),
+            react_1.default.createElement("div", { className: prefix + '-content', ref: ref },
+                react_1.default.createElement(OutlineNode_1.OutlineTreeNode, { node: tree, workspaceId: workspaceId }),
+                react_1.default.createElement("div", { className: prefix + '-aux', style: {
+                        pointerEvents: 'none',
+                    } },
+                    react_1.default.createElement(Insertion_1.Insertion, { workspaceId: workspaceId }))))));
+});

package/lib/widgets/OutlineWidget/styles.less

@@ -0,0 +1,195 @@
+@import '../../variables.less';
+
+.@{prefix-cls}-outline-tree {
+  &-container {
+    position: relative;
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background-color: var(--dn-outline-tree-bg-color);
+  }
+
+  &-header {
+    display: flex;
+    padding: 8px;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--dn-outline-tree-header-border-color);
+    color: var(--dn-outline-tree-color);
+  }
+
+  &-title {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  &-close {
+    display: flex;
+    align-items: center;
+    transform: scale(1.6);
+    cursor: pointer;
+  }
+
+  &-content {
+    position: relative;
+    flex-grow: 1;
+    height: 100%;
+    width: 100%;
+    padding-bottom: 20px;
+    overflow: overlay;
+  }
+
+  &-aux {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &-insertion {
+    background-color: var(--dn-outline-tree-insertion-bg-color);
+  }
+
+  &-node {
+    position: relative;
+    user-select: none;
+    width: fit-content;
+    min-width: 100%;
+
+    &.expanded {
+      & > .@{prefix-cls}-outline-tree-node-header {
+        .@{prefix-cls}-outline-tree-node-expand {
+          transform: rotate(0);
+        }
+      }
+
+      & > .@{prefix-cls}-outline-tree-node-children {
+        display: block;
+      }
+    }
+
+    &.selected {
+      & > .@{prefix-cls}-outline-tree-node-header {
+        background-color: var(--dn-panel-active-bg-color);
+
+        .@{prefix-cls}-outline-tree-node-header-head {
+          background-color: var(--dn-panel-active-bg-color);
+        }
+      }
+    }
+
+    &.droppable {
+      & > .@{prefix-cls}-outline-tree-node-header {
+        .@{prefix-cls}-outline-tree-node-header-content {
+          .@{prefix-cls}-outline-tree-node-header-base {
+            & > .@{prefix-cls}-outline-tree-node-icon {
+              transform: scale(1.2);
+            }
+          }
+        }
+      }
+    }
+
+    &-hidden-icon:not(.hidden) {
+      display: none;
+    }
+
+    &-header {
+      display: flex;
+      min-height: 32px;
+      width: fit-content;
+      min-width: 100%;
+      align-items: center;
+      color: var(--dn-outline-tree-node-header-color);
+      position: relative;
+      padding-left: 8px;
+
+      &:hover {
+        .@{prefix-cls}-outline-tree-node-header-content {
+          color: var(--dn-outline-tree-node-hover-color);
+        }
+
+        .@{prefix-cls}-outline-tree-node-hidden-icon {
+          display: block;
+        }
+      }
+    }
+
+    &-header-head {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    &-header-content {
+      display: flex;
+      align-items: center;
+      transition: all 0.15s ease-in;
+      transform-origin: left;
+      width: fit-content;
+      min-width: 100%;
+      height: 100%;
+      justify-content: space-between;
+      font-size: 12px;
+    }
+
+    &-header-base {
+      display: flex;
+      align-items: center;
+    }
+
+    &-header-actions {
+      display: flex;
+      align-items: center;
+      margin-right: 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-expand {
+      display: flex;
+      align-items: center;
+      transition: all 0.15s ease-out;
+      transform: rotate(-90deg);
+      margin-right: 3px;
+      width: 12px;
+    }
+
+    &-icon {
+      margin-right: 5px;
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      text-rendering: optimizeLegibility;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    &-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-right: 100px;
+    }
+
+    &-actions {
+      font-size: 12px;
+      flex-grow: 2;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &-children {
+      padding-left: 16px;
+      display: none;
+      width: fit-content;
+      min-width: 100%;
+    }
+  }
+}