wssf-kage-ui 0.1.1 → 0.1.3

package/dist/esm/Tree/style.less

@@ -0,0 +1,313 @@
+// Tree 树形控件样式
+
+@prefix: kage-tree;
+
+// 颜色变量
+@tree-bg: #fff;
+@tree-color: rgba(0, 0, 0, 0.85);
+@tree-border-color: #d9d9d9;
+@tree-selected-bg: #e6f7ff;
+@tree-selected-color: rgba(0, 0, 0, 0.85);
+@tree-hover-bg: #f5f5f5;
+@tree-disabled-color: rgba(0, 0, 0, 0.25);
+
+// ============ 主容器 ============
+.@{prefix} {
+  padding: 4px 0;
+  font-size: 14px;
+  line-height: 1.5715;
+  color: @tree-color;
+  background: @tree-bg;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 树节点 ============
+.@{prefix}-treenode {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  outline: none;
+
+  &-disabled {
+    .@{prefix}-node-content {
+      color: @tree-disabled-color;
+      cursor: not-allowed;
+
+      .@{prefix}-title {
+        color: @tree-disabled-color;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-block-node {
+    .@{prefix}-node-content {
+      width: 100%;
+    }
+  }
+}
+
+// ============ 节点内容 ============
+.@{prefix}-node-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 4px;
+  margin: 0;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+
+  &:hover {
+    background-color: @tree-hover-bg;
+  }
+}
+
+// ============ 选中状态 ============
+.@{prefix}-treenode-selected {
+  > .@{prefix}-node-content {
+    background-color: @tree-selected-bg;
+    color: @tree-selected-color;
+
+    .@{prefix}-title {
+      color: @tree-selected-color;
+    }
+
+    &:hover {
+      background-color: @tree-selected-bg;
+    }
+  }
+}
+
+// ============ 展开/收起图标 ============
+.@{prefix}-switcher {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+  line-height: 1;
+  text-align: center;
+  vertical-align: top;
+  cursor: pointer;
+  transition: transform 0.2s, color 0.2s;
+  flex-shrink: 0;
+
+  &:hover {
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  &-open {
+    transform: rotate(90deg);
+  }
+
+  &-close {
+    transform: rotate(0deg);
+  }
+
+  &-noop {
+    cursor: default;
+    opacity: 0;
+  }
+}
+
+// ============ 复选框 ============
+.@{prefix}-checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  color: #fff;
+  font-size: 12px;
+  line-height: 1;
+  text-align: center;
+  vertical-align: middle;
+  background-color: #fff;
+  border: 1px solid @tree-border-color;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+
+  &:hover {
+    border-color: #1890ff;
+  }
+
+  &-checked {
+    color: #fff;
+    background-color: #1890ff;
+    border-color: #1890ff;
+  }
+
+  &-disabled {
+    color: rgba(0, 0, 0, 0.25);
+    background-color: #f5f5f5;
+    border-color: @tree-border-color;
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: @tree-border-color;
+    }
+  }
+}
+
+// ============ 图标 ============
+.@{prefix}-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 8px;
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+// ============ 标题 ============
+.@{prefix}-title {
+  flex: 1;
+  display: inline-block;
+  padding: 0 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: top;
+  color: inherit;
+}
+
+// ============ 子树 ============
+.@{prefix}-child-tree {
+  overflow: hidden;
+}
+
+// ============ 显示连接线 ============
+.@{prefix}-show-line {
+  .@{prefix}-treenode {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 12px;
+      width: 1px;
+      height: 100%;
+      background-color: @tree-border-color;
+      content: '';
+    }
+
+    &::after {
+      position: absolute;
+      top: 12px;
+      left: 12px;
+      width: 10px;
+      height: 1px;
+      background-color: @tree-border-color;
+      content: '';
+    }
+
+    &:last-child::before {
+      height: 12px;
+    }
+  }
+
+  .@{prefix}-switcher {
+    position: relative;
+    z-index: 1;
+    background-color: @tree-bg;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'],
+html.dark,
+body.dark,
+.dark {
+  .@{prefix} {
+    background-color: #1f1f1f;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .@{prefix}-node-content {
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .@{prefix}-treenode-selected {
+    > .@{prefix}-node-content {
+      background-color: rgba(24, 144, 255, 0.2);
+      color: rgba(255, 255, 255, 0.85);
+
+      .@{prefix}-title {
+        color: rgba(255, 255, 255, 0.85);
+      }
+
+      &:hover {
+        background-color: rgba(24, 144, 255, 0.2);
+      }
+    }
+  }
+
+  .@{prefix}-treenode-disabled {
+    .@{prefix}-node-content {
+      color: rgba(255, 255, 255, 0.25);
+
+      .@{prefix}-title {
+        color: rgba(255, 255, 255, 0.25);
+      }
+    }
+  }
+
+  .@{prefix}-switcher {
+    color: rgba(255, 255, 255, 0.45);
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .@{prefix}-checkbox {
+    background-color: #1f1f1f;
+    border-color: rgba(255, 255, 255, 0.3);
+
+    &:hover {
+      border-color: #1890ff;
+    }
+
+    &-checked {
+      background-color: #1890ff;
+      border-color: #1890ff;
+    }
+
+    &-disabled {
+      background-color: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.15);
+      color: rgba(255, 255, 255, 0.25);
+    }
+  }
+
+  .@{prefix}-title {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .@{prefix}-show-line {
+    .@{prefix}-treenode {
+      &::before,
+      &::after {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+
+    .@{prefix}-switcher {
+      background-color: #1f1f1f;
+    }
+  }
+}

package/dist/esm/TreeSelect/index.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import './style.less';
+export interface TreeNode {
+    key: string;
+    title: string;
+    value: string;
+    children?: TreeNode[];
+    disabled?: boolean;
+    selectable?: boolean;
+    isLeaf?: boolean;
+    [key: string]: any;
+}
+export interface TreeSelectProps {
+    /** 树形数据 */
+    treeData: TreeNode[];
+    /** 当前选中的值 */
+    value?: string | string[];
+    /** 默认选中的值 */
+    defaultValue?: string | string[];
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否多选 */
+    multiple?: boolean;
+    /** 是否显示复选框 */
+    treeCheckable?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 允许清除 */
+    allowClear?: boolean;
+    /** 是否显示搜索框 */
+    showSearch?: boolean;
+    /** 尺寸 */
+    size?: 'large' | 'middle' | 'small';
+    /** 状态 */
+    status?: 'error' | 'warning';
+    /** 默认展开所有 */
+    defaultExpandAll?: boolean;
+    /** 默认展开的节点 */
+    defaultExpandedKeys?: string[];
+    /** 自定义搜索函数 */
+    filterTreeNode?: (inputValue: string, node: TreeNode) => boolean;
+    /** 选中回调 */
+    onChange?: (value: string | string[], label: string | string[], node: TreeNode | TreeNode[]) => void;
+    /** 面板打开/关闭回调 */
+    onDropdownVisibleChange?: (visible: boolean) => void;
+    /** 搜索回调 */
+    onSearch?: (value: string) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const TreeSelect: React.FC<TreeSelectProps>;
+export default TreeSelect;