wssf-kage-ui 0.1.0 → 0.1.2

package/dist/esm/TreeSelect/style.less

@@ -0,0 +1,471 @@
+// TreeSelect 树选择器样式
+
+@prefix: kage-treeselect;
+
+// 颜色变量
+@treeselect-bg: #fff;
+@treeselect-border: #d9d9d9;
+@treeselect-hover-border: #6366f1;
+@treeselect-focus-border: #6366f1;
+@treeselect-focus-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+@treeselect-disabled-bg: #f5f5f5;
+@treeselect-disabled-color: rgba(0, 0, 0, 0.25);
+@treeselect-placeholder-color: rgba(0, 0, 0, 0.35);
+@treeselect-dropdown-bg: #fff;
+@treeselect-dropdown-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+@treeselect-hover-bg: rgba(0, 0, 0, 0.04);
+@treeselect-selected-bg: #e0e7ff;
+@treeselect-selected-color: #4f46e5;
+
+// ============ 容器 ============
+.@{prefix} {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 选择框 ============
+.@{prefix}-selector {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 12px;
+  background: @treeselect-bg;
+  border: 1px solid @treeselect-border;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: @treeselect-hover-border;
+  }
+}
+
+.@{prefix}-open .@{prefix}-selector {
+  border-color: @treeselect-focus-border;
+  box-shadow: @treeselect-focus-shadow;
+}
+
+.@{prefix}-selection {
+  flex: 1;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.@{prefix}-placeholder {
+  color: @treeselect-placeholder-color;
+}
+
+.@{prefix}-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.35);
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  line-height: 1;
+  flex-shrink: 0;
+
+  &:hover {
+    color: rgba(0, 0, 0, 0.65);
+    background: rgba(0, 0, 0, 0.12);
+  }
+}
+
+.@{prefix}-arrow {
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+  color: rgba(0, 0, 0, 0.35);
+  pointer-events: none;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.@{prefix}-arrow-open {
+  transform: rotate(180deg);
+}
+
+// ============ 尺寸变体 ============
+.@{prefix}-large .@{prefix}-selector {
+  padding: 10px 14px;
+  font-size: 16px;
+}
+
+.@{prefix}-small .@{prefix}-selector {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+// ============ 状态变体 ============
+.@{prefix}-status-error .@{prefix}-selector {
+  border-color: #ff4d4f;
+
+  &:hover {
+    border-color: #ff7875;
+  }
+}
+
+.@{prefix}-status-warning .@{prefix}-selector {
+  border-color: #faad14;
+
+  &:hover {
+    border-color: #ffc53d;
+  }
+}
+
+.@{prefix}-disabled {
+  .@{prefix}-selector {
+    background: @treeselect-disabled-bg;
+    border-color: @treeselect-border;
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: @treeselect-border;
+    }
+  }
+
+  .@{prefix}-selection {
+    color: @treeselect-disabled-color;
+  }
+
+  .@{prefix}-arrow {
+    color: @treeselect-disabled-color;
+  }
+}
+
+// ============ 下拉面板 ============
+.@{prefix}-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 1050;
+  width: 100%;
+  max-height: 300px;
+  background: @treeselect-dropdown-bg;
+  border-radius: 8px;
+  box-shadow: @treeselect-dropdown-shadow;
+  overflow: hidden;
+  animation: treeSelectSlideDown 0.2s ease;
+}
+
+@keyframes treeSelectSlideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// ============ 搜索框 ============
+.@{prefix}-search {
+  padding: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.@{prefix}-search-input {
+  width: 100%;
+  padding: 4px 8px;
+  font-size: 14px;
+  border: 1px solid @treeselect-border;
+  border-radius: 4px;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &:focus {
+    border-color: @treeselect-focus-border;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+  }
+}
+
+// ============ 树形结构 ============
+.@{prefix}-tree {
+  max-height: 250px;
+  overflow-y: auto;
+  padding: 4px 0;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+
+.@{prefix}-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  color: rgba(0, 0, 0, 0.35);
+  font-size: 13px;
+}
+
+// ============ 树节点 ============
+.@{prefix}-node {
+  &:last-child {
+    .@{prefix}-node-children {
+      border-left: none;
+    }
+  }
+}
+
+.@{prefix}-node-content {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  user-select: none;
+
+  &:hover {
+    background: @treeselect-hover-bg;
+  }
+}
+
+.@{prefix}-node-selected {
+  background: @treeselect-selected-bg;
+  color: @treeselect-selected-color;
+
+  &:hover {
+    background: @treeselect-selected-bg;
+  }
+}
+
+.@{prefix}-node-disabled {
+  color: @treeselect-disabled-color;
+  cursor: not-allowed;
+
+  &:hover {
+    background: transparent;
+  }
+}
+
+.@{prefix}-node-children {
+  position: relative;
+}
+
+// ============ 展开/收起图标 ============
+.@{prefix}-switcher {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.45);
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    color: rgba(0, 0, 0, 0.65);
+  }
+}
+
+.@{prefix}-switcher-open {
+  transform: rotate(90deg);
+}
+
+.@{prefix}-switcher-noop {
+  display: inline-block;
+  width: 20px;
+  margin-right: 4px;
+  flex-shrink: 0;
+}
+
+// ============ Checkbox ============
+.@{prefix}-checkbox {
+  width: 16px;
+  height: 16px;
+  margin: 0 8px 0 0;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+// ============ 节点标题 ============
+.@{prefix}-node-title {
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix}-selector {
+    background: #1f1f1f;
+    border-color: #434343;
+    color: rgba(255, 255, 255, 0.88);
+
+    &:hover {
+      border-color: #6366f1;
+    }
+  }
+
+  .@{prefix}-open .@{prefix}-selector {
+    border-color: #6366f1;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+  }
+
+  .@{prefix}-selection {
+    color: rgba(255, 255, 255, 0.88);
+  }
+
+  .@{prefix}-placeholder {
+    color: rgba(255, 255, 255, 0.35);
+  }
+
+  .@{prefix}-clear {
+    color: rgba(255, 255, 255, 0.35);
+    background: rgba(255, 255, 255, 0.08);
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.65);
+      background: rgba(255, 255, 255, 0.15);
+    }
+  }
+
+  .@{prefix}-arrow {
+    color: rgba(255, 255, 255, 0.35);
+  }
+
+  .@{prefix}-disabled {
+    .@{prefix}-selector {
+      background: rgba(255, 255, 255, 0.04);
+      border-color: #434343;
+    }
+
+    .@{prefix}-selection,
+    .@{prefix}-arrow {
+      color: rgba(255, 255, 255, 0.25);
+    }
+  }
+
+  .@{prefix}-dropdown {
+    background: #1f1f1f;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+  }
+
+  .@{prefix}-search {
+    border-bottom-color: #434343;
+  }
+
+  .@{prefix}-search-input {
+    background: #141414;
+    border-color: #434343;
+    color: rgba(255, 255, 255, 0.88);
+
+    &:focus {
+      border-color: #6366f1;
+      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+    }
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.35);
+    }
+  }
+
+  .@{prefix}-tree {
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.2);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
+    }
+  }
+
+  .@{prefix}-empty {
+    color: rgba(255, 255, 255, 0.35);
+  }
+
+  .@{prefix}-node-content {
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .@{prefix}-node-selected {
+    background: rgba(99, 102, 241, 0.3);
+    color: #a5b4fc;
+
+    &:hover {
+      background: rgba(99, 102, 241, 0.3);
+    }
+  }
+
+  .@{prefix}-node-disabled {
+    color: rgba(255, 255, 255, 0.25);
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  .@{prefix}-node-title {
+    color: rgba(255, 255, 255, 0.88);
+  }
+
+  .@{prefix}-node-disabled .@{prefix}-node-title {
+    color: rgba(255, 255, 255, 0.25);
+  }
+
+  .@{prefix}-switcher {
+    color: rgba(255, 255, 255, 0.45);
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.65);
+    }
+  }
+
+  .@{prefix}-status-error .@{prefix}-selector {
+    border-color: #a61d24;
+
+    &:hover {
+      border-color: #cf1322;
+    }
+  }
+
+  .@{prefix}-status-warning .@{prefix}-selector {
+    border-color: #ad6800;
+
+    &:hover {
+      border-color: #d48806;
+    }
+  }
+}
+

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import './style.less';
+export interface TitleProps {
+    /** 标题级别 h1-h5 */
+    level?: 1 | 2 | 3 | 4 | 5;
+    /** 是否可复制 */
+    copyable?: boolean;
+    /** 是否添加删除线 */
+    delete?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否添加标记样式（高亮） */
+    mark?: boolean;
+    /** 是否添加下划线 */
+    underline?: boolean;
+    /** 文本类型 */
+    type?: 'secondary' | 'success' | 'warning' | 'danger';
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Title: React.FC<TitleProps>;
+export interface TextProps {
+    /** 文本类型 */
+    type?: 'secondary' | 'success' | 'warning' | 'danger';
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否添加标记样式（高亮） */
+    mark?: boolean;
+    /** 是否添加代码样式 */
+    code?: boolean;
+    /** 是否使用键盘样式 */
+    keyboard?: boolean;
+    /** 是否添加下划线 */
+    underline?: boolean;
+    /** 是否添加删除线 */
+    delete?: boolean;
+    /** 是否加粗 */
+    strong?: boolean;
+    /** 是否斜体 */
+    italic?: boolean;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Text: React.FC<TextProps>;
+export interface ParagraphProps {
+    /** 文本类型 */
+    type?: 'secondary' | 'success' | 'warning' | 'danger';
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否添加删除线 */
+    delete?: boolean;
+    /** 是否添加下划线 */
+    underline?: boolean;
+    /** 是否加粗 */
+    strong?: boolean;
+    /** 是否斜体 */
+    italic?: boolean;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Paragraph: React.FC<ParagraphProps>;
+export interface LinkProps {
+    /** 链接地址 */
+    href?: string;
+    /** 打开方式 */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** 文本类型 */
+    type?: 'secondary' | 'success' | 'warning' | 'danger';
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否添加下划线 */
+    underline?: boolean;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 点击事件 */
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+}
+export declare const Link: React.FC<LinkProps>;
+interface TypographyType {
+    Title: typeof Title;
+    Text: typeof Text;
+    Paragraph: typeof Paragraph;
+    Link: typeof Link;
+}
+declare const Typography: TypographyType;
+export default Typography;

package/dist/esm/Typography/index.js

@@ -0,0 +1,161 @@
+import React from 'react';
+import "./style.less";
+
+// ============ Title 标题组件 ============
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Title = function Title(_ref) {
+  var _ref$level = _ref.level,
+    level = _ref$level === void 0 ? 1 : _ref$level,
+    del = _ref.delete,
+    disabled = _ref.disabled,
+    mark = _ref.mark,
+    underline = _ref.underline,
+    type = _ref.type,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  var Tag = "h".concat(level);
+  var classNames = ['kage-typography', 'kage-typography-title', "kage-typography-title-".concat(level), type && "kage-typography-".concat(type), disabled && 'kage-typography-disabled', className].filter(Boolean).join(' ');
+  var content = children;
+  if (del) content = /*#__PURE__*/_jsx("del", {
+    children: content
+  });
+  if (underline) content = /*#__PURE__*/_jsx("u", {
+    children: content
+  });
+  if (mark) content = /*#__PURE__*/_jsx("mark", {
+    children: content
+  });
+  return /*#__PURE__*/_jsx(Tag, {
+    className: classNames,
+    style: style,
+    children: content
+  });
+};
+
+// ============ Text 文本组件 ============
+
+export var Text = function Text(_ref2) {
+  var type = _ref2.type,
+    disabled = _ref2.disabled,
+    mark = _ref2.mark,
+    code = _ref2.code,
+    keyboard = _ref2.keyboard,
+    underline = _ref2.underline,
+    del = _ref2.delete,
+    strong = _ref2.strong,
+    italic = _ref2.italic,
+    children = _ref2.children,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className,
+    style = _ref2.style;
+  var classNames = ['kage-typography', 'kage-typography-text', type && "kage-typography-".concat(type), disabled && 'kage-typography-disabled', className].filter(Boolean).join(' ');
+  var content = children;
+  if (strong) content = /*#__PURE__*/_jsx("strong", {
+    children: content
+  });
+  if (italic) content = /*#__PURE__*/_jsx("em", {
+    children: content
+  });
+  if (del) content = /*#__PURE__*/_jsx("del", {
+    children: content
+  });
+  if (underline) content = /*#__PURE__*/_jsx("u", {
+    children: content
+  });
+  if (code) content = /*#__PURE__*/_jsx("code", {
+    className: "kage-typography-code",
+    children: content
+  });
+  if (keyboard) content = /*#__PURE__*/_jsx("kbd", {
+    className: "kage-typography-keyboard",
+    children: content
+  });
+  if (mark) content = /*#__PURE__*/_jsx("mark", {
+    className: "kage-typography-mark",
+    children: content
+  });
+  return /*#__PURE__*/_jsx("span", {
+    className: classNames,
+    style: style,
+    children: content
+  });
+};
+
+// ============ Paragraph 段落组件 ============
+
+export var Paragraph = function Paragraph(_ref3) {
+  var type = _ref3.type,
+    disabled = _ref3.disabled,
+    del = _ref3.delete,
+    underline = _ref3.underline,
+    strong = _ref3.strong,
+    italic = _ref3.italic,
+    children = _ref3.children,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? '' : _ref3$className,
+    style = _ref3.style;
+  var classNames = ['kage-typography', 'kage-typography-paragraph', type && "kage-typography-".concat(type), disabled && 'kage-typography-disabled', className].filter(Boolean).join(' ');
+  var content = children;
+  if (strong) content = /*#__PURE__*/_jsx("strong", {
+    children: content
+  });
+  if (italic) content = /*#__PURE__*/_jsx("em", {
+    children: content
+  });
+  if (del) content = /*#__PURE__*/_jsx("del", {
+    children: content
+  });
+  if (underline) content = /*#__PURE__*/_jsx("u", {
+    children: content
+  });
+  return /*#__PURE__*/_jsx("p", {
+    className: classNames,
+    style: style,
+    children: content
+  });
+};
+
+// ============ Link 链接组件 ============
+
+export var Link = function Link(_ref4) {
+  var href = _ref4.href,
+    target = _ref4.target,
+    type = _ref4.type,
+    disabled = _ref4.disabled,
+    _ref4$underline = _ref4.underline,
+    underline = _ref4$underline === void 0 ? true : _ref4$underline,
+    children = _ref4.children,
+    _ref4$className = _ref4.className,
+    className = _ref4$className === void 0 ? '' : _ref4$className,
+    style = _ref4.style,
+    onClick = _ref4.onClick;
+  var classNames = ['kage-typography', 'kage-typography-link', type && "kage-typography-".concat(type), disabled && 'kage-typography-disabled', !underline && 'kage-typography-link-no-underline', className].filter(Boolean).join(' ');
+  var handleClick = function handleClick(e) {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    onClick === null || onClick === void 0 || onClick(e);
+  };
+  return /*#__PURE__*/_jsx("a", {
+    href: disabled ? undefined : href,
+    target: target,
+    rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+    className: classNames,
+    style: style,
+    onClick: handleClick,
+    children: children
+  });
+};
+
+// ============ Typography 命名空间导出 ============
+
+var Typography = {
+  Title: Title,
+  Text: Text,
+  Paragraph: Paragraph,
+  Link: Link
+};
+export default Typography;