wssf-kage-ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import './style.less';
+export interface TabItem {
+    /** 唯一标识 */
+    key: string;
+    /** 标签页标题 */
+    label: React.ReactNode;
+    /** 标签页内容 */
+    children?: React.ReactNode;
+    /** 图标 */
+    icon?: React.ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否可关闭（editable-card 模式下生效） */
+    closable?: boolean;
+    /** 强制渲染（即使未激活也渲染） */
+    forceRender?: boolean;
+}
+export type TabsType = 'line' | 'card' | 'editable-card';
+export type TabsPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface TabsProps {
+    /** 标签项 */
+    items: TabItem[];
+    /** 当前激活的标签 key */
+    activeKey?: string;
+    /** 默认激活的标签 key */
+    defaultActiveKey?: string;
+    /** 标签类型 */
+    type?: TabsType;
+    /** 标签位置 */
+    tabPosition?: TabsPosition;
+    /** 尺寸 */
+    size?: 'large' | 'middle' | 'small';
+    /** 是否居中 */
+    centered?: boolean;
+    /** 切换回调 */
+    onChange?: (activeKey: string) => void;
+    /** 新增标签回调（editable-card 模式下生效） */
+    onEdit?: (targetKey: string | React.MouseEvent, action: 'add' | 'remove') => void;
+    /** 右侧额外内容 */
+    tabBarExtraContent?: React.ReactNode | {
+        left?: React.ReactNode;
+        right?: React.ReactNode;
+    };
+    /** 销毁隐藏的标签页 */
+    destroyInactiveTabPane?: boolean;
+    /** 是否动画 */
+    animated?: boolean | {
+        inkBar?: boolean;
+        tabPane?: boolean;
+    };
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/dist/esm/Tabs/index.js

@@ -0,0 +1,193 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import "./style.less";
+
+// ============ Tab Item Type ============
+
+// ============ Tabs Props ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// ============ Tabs Component ============
+export var Tabs = function Tabs(_ref) {
+  var _items$;
+  var items = _ref.items,
+    controlledActiveKey = _ref.activeKey,
+    defaultActiveKey = _ref.defaultActiveKey,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'line' : _ref$type,
+    _ref$tabPosition = _ref.tabPosition,
+    tabPosition = _ref$tabPosition === void 0 ? 'top' : _ref$tabPosition,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    _ref$centered = _ref.centered,
+    centered = _ref$centered === void 0 ? false : _ref$centered,
+    onChange = _ref.onChange,
+    onEdit = _ref.onEdit,
+    tabBarExtraContent = _ref.tabBarExtraContent,
+    _ref$destroyInactiveT = _ref.destroyInactiveTabPane,
+    destroyInactiveTabPane = _ref$destroyInactiveT === void 0 ? false : _ref$destroyInactiveT,
+    _ref$animated = _ref.animated,
+    animated = _ref$animated === void 0 ? true : _ref$animated,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  var _useState = useState(defaultActiveKey || ((_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.key) || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalActiveKey = _useState2[0],
+    setInternalActiveKey = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inkStyle = _useState4[0],
+    setInkStyle = _useState4[1];
+  var tabsRef = useRef(null);
+  var tabListRef = useRef(null);
+  var activeKey = controlledActiveKey !== null && controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey;
+
+  // 更新 ink bar 位置
+  var updateInkBar = useCallback(function () {
+    if (!tabListRef.current) return;
+    var activeTab = tabListRef.current.querySelector(".kage-tabs-tab-active");
+    if (activeTab) {
+      var isVertical = tabPosition === 'left' || tabPosition === 'right';
+      if (isVertical) {
+        setInkStyle({
+          top: activeTab.offsetTop,
+          height: activeTab.offsetHeight
+        });
+      } else {
+        setInkStyle({
+          left: activeTab.offsetLeft,
+          width: activeTab.offsetWidth
+        });
+      }
+    }
+  }, [tabPosition]);
+  useEffect(function () {
+    updateInkBar();
+  }, [activeKey, items, updateInkBar]);
+  useEffect(function () {
+    window.addEventListener('resize', updateInkBar);
+    return function () {
+      return window.removeEventListener('resize', updateInkBar);
+    };
+  }, [updateInkBar]);
+
+  // 切换标签
+  var handleTabClick = useCallback(function (key, disabled) {
+    if (disabled) return;
+    if (controlledActiveKey === undefined) {
+      setInternalActiveKey(key);
+    }
+    onChange === null || onChange === void 0 || onChange(key);
+  }, [controlledActiveKey, onChange]);
+
+  // 删除标签
+  var handleRemove = useCallback(function (e, key) {
+    e.stopPropagation();
+    onEdit === null || onEdit === void 0 || onEdit(key, 'remove');
+  }, [onEdit]);
+
+  // 新增标签
+  var handleAdd = useCallback(function (e) {
+    onEdit === null || onEdit === void 0 || onEdit(e, 'add');
+  }, [onEdit]);
+
+  // 渲染额外内容
+  var renderExtraContent = function renderExtraContent() {
+    if (!tabBarExtraContent) return null;
+    if (_typeof(tabBarExtraContent) === 'object' && tabBarExtraContent !== null && ('left' in tabBarExtraContent || 'right' in tabBarExtraContent)) {
+      var extraContent = tabBarExtraContent;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [extraContent.left && /*#__PURE__*/_jsx("div", {
+          className: "kage-tabs-extra-left",
+          children: extraContent.left
+        }), extraContent.right && /*#__PURE__*/_jsx("div", {
+          className: "kage-tabs-extra-right",
+          children: extraContent.right
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx("div", {
+      className: "kage-tabs-extra-right",
+      children: tabBarExtraContent
+    });
+  };
+  var classNames = ['kage-tabs', "kage-tabs-".concat(type), "kage-tabs-".concat(tabPosition), "kage-tabs-".concat(size), centered && 'kage-tabs-centered', className].filter(Boolean).join(' ');
+  var showInkBar = type === 'line' && (animated === true || _typeof(animated) === 'object' && animated.inkBar !== false);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: tabsRef,
+    className: classNames,
+    style: style,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "kage-tabs-nav",
+      children: [tabBarExtraContent && _typeof(tabBarExtraContent) === 'object' && 'left' in tabBarExtraContent && /*#__PURE__*/_jsx("div", {
+        className: "kage-tabs-extra-left",
+        children: tabBarExtraContent.left
+      }), /*#__PURE__*/_jsx("div", {
+        className: "kage-tabs-nav-wrap",
+        children: /*#__PURE__*/_jsxs("div", {
+          ref: tabListRef,
+          className: "kage-tabs-nav-list",
+          children: [items.map(function (item) {
+            var isActive = item.key === activeKey;
+            var tabClassNames = ['kage-tabs-tab', isActive && 'kage-tabs-tab-active', item.disabled && 'kage-tabs-tab-disabled'].filter(Boolean).join(' ');
+            return /*#__PURE__*/_jsxs("div", {
+              className: tabClassNames,
+              onClick: function onClick() {
+                return handleTabClick(item.key, item.disabled);
+              },
+              children: [item.icon && /*#__PURE__*/_jsx("span", {
+                className: "kage-tabs-tab-icon",
+                children: item.icon
+              }), /*#__PURE__*/_jsx("span", {
+                className: "kage-tabs-tab-label",
+                children: item.label
+              }), type === 'editable-card' && item.closable !== false && /*#__PURE__*/_jsx("span", {
+                className: "kage-tabs-tab-remove",
+                onClick: function onClick(e) {
+                  return handleRemove(e, item.key);
+                },
+                children: "\xD7"
+              })]
+            }, item.key);
+          }), showInkBar && /*#__PURE__*/_jsx("div", {
+            className: "kage-tabs-ink-bar",
+            style: inkStyle
+          })]
+        })
+      }), type === 'editable-card' && /*#__PURE__*/_jsx("button", {
+        className: "kage-tabs-nav-add",
+        onClick: handleAdd,
+        children: "+"
+      }), tabBarExtraContent && !(_typeof(tabBarExtraContent) === 'object' && 'left' in tabBarExtraContent && 'right' in tabBarExtraContent) && !(_typeof(tabBarExtraContent) === 'object' && ('left' in tabBarExtraContent || 'right' in tabBarExtraContent)) && /*#__PURE__*/_jsx("div", {
+        className: "kage-tabs-extra-right",
+        children: tabBarExtraContent
+      }), tabBarExtraContent && _typeof(tabBarExtraContent) === 'object' && 'right' in tabBarExtraContent && /*#__PURE__*/_jsx("div", {
+        className: "kage-tabs-extra-right",
+        children: tabBarExtraContent.right
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "kage-tabs-content",
+      children: items.map(function (item) {
+        var isActive = item.key === activeKey;
+        var shouldRender = isActive || item.forceRender || !destroyInactiveTabPane;
+        if (!shouldRender) return null;
+        return /*#__PURE__*/_jsx("div", {
+          className: "kage-tabs-tabpane ".concat(isActive ? 'kage-tabs-tabpane-active' : ''),
+          style: {
+            display: isActive ? 'block' : 'none'
+          },
+          children: item.children
+        }, item.key);
+      })
+    })]
+  });
+};
+export default Tabs;

package/dist/esm/Tabs/style.less

@@ -0,0 +1,423 @@
+// Tabs 标签页组件样式
+
+@prefix: kage-tabs;
+
+// 颜色变量
+@tabs-text-color: rgba(0, 0, 0, 0.88);
+@tabs-text-color-secondary: rgba(0, 0, 0, 0.65);
+@tabs-text-color-disabled: rgba(0, 0, 0, 0.25);
+@tabs-active-color: #6366f1;
+@tabs-hover-color: #6366f1;
+@tabs-border-color: #f0f0f0;
+@tabs-card-bg: #fafafa;
+@tabs-card-active-bg: #fff;
+@primary-color: #6366f1;
+
+// ============ 基础样式 ============
+.@{prefix} {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  color: @tabs-text-color;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 导航栏 ============
+.@{prefix}-nav {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.@{prefix}-nav-wrap {
+  flex: 1;
+  overflow: hidden;
+}
+
+.@{prefix}-nav-list {
+  display: flex;
+  position: relative;
+}
+
+// ============ 标签项 ============
+.@{prefix}-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  white-space: nowrap;
+
+  &:hover:not(.@{prefix}-tab-disabled) {
+    color: @tabs-hover-color;
+  }
+
+  &-active {
+    color: @tabs-active-color;
+    font-weight: 500;
+  }
+
+  &-disabled {
+    color: @tabs-text-color-disabled;
+    cursor: not-allowed;
+  }
+
+  &-icon {
+    font-size: 16px;
+  }
+
+  &-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-left: 4px;
+    font-size: 12px;
+    color: @tabs-text-color-secondary;
+    border-radius: 2px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      color: @tabs-text-color;
+      background: rgba(0, 0, 0, 0.06);
+    }
+  }
+}
+
+// ============ Ink Bar ============
+.@{prefix}-ink-bar {
+  position: absolute;
+  background: @primary-color;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  pointer-events: none;
+}
+
+// ============ 新增按钮 ============
+.@{prefix}-nav-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin-left: 8px;
+  font-size: 16px;
+  color: @tabs-text-color-secondary;
+  background: transparent;
+  border: 1px dashed @tabs-border-color;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: @tabs-active-color;
+    border-color: @tabs-active-color;
+  }
+}
+
+// ============ 额外内容 ============
+.@{prefix}-extra-left,
+.@{prefix}-extra-right {
+  display: flex;
+  align-items: center;
+}
+
+.@{prefix}-extra-left {
+  margin-right: 16px;
+}
+
+.@{prefix}-extra-right {
+  margin-left: 16px;
+}
+
+// ============ 内容区域 ============
+.@{prefix}-content {
+  flex: 1;
+}
+
+.@{prefix}-tabpane {
+  outline: none;
+
+  &-active {
+    animation: fadeIn 0.3s ease;
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+// ============ Line 类型（顶部） ============
+.@{prefix}-line.@{prefix}-top {
+  .@{prefix}-nav {
+    border-bottom: 1px solid @tabs-border-color;
+  }
+
+  .@{prefix}-ink-bar {
+    bottom: 0;
+    height: 2px;
+  }
+
+  .@{prefix}-content {
+    padding-top: 16px;
+  }
+}
+
+// ============ Line 类型（底部） ============
+.@{prefix}-line.@{prefix}-bottom {
+  flex-direction: column-reverse;
+
+  .@{prefix}-nav {
+    border-top: 1px solid @tabs-border-color;
+  }
+
+  .@{prefix}-ink-bar {
+    top: 0;
+    height: 2px;
+  }
+
+  .@{prefix}-content {
+    padding-bottom: 16px;
+  }
+}
+
+// ============ Line 类型（左侧） ============
+.@{prefix}-line.@{prefix}-left {
+  flex-direction: row;
+
+  .@{prefix}-nav {
+    flex-direction: column;
+    border-right: 1px solid @tabs-border-color;
+  }
+
+  .@{prefix}-nav-list {
+    flex-direction: column;
+  }
+
+  .@{prefix}-ink-bar {
+    right: 0;
+    width: 2px;
+  }
+
+  .@{prefix}-tab {
+    justify-content: flex-end;
+    padding: 8px 24px 8px 16px;
+  }
+
+  .@{prefix}-content {
+    padding-left: 16px;
+  }
+}
+
+// ============ Line 类型（右侧） ============
+.@{prefix}-line.@{prefix}-right {
+  flex-direction: row-reverse;
+
+  .@{prefix}-nav {
+    flex-direction: column;
+    border-left: 1px solid @tabs-border-color;
+  }
+
+  .@{prefix}-nav-list {
+    flex-direction: column;
+  }
+
+  .@{prefix}-ink-bar {
+    left: 0;
+    width: 2px;
+  }
+
+  .@{prefix}-tab {
+    padding: 8px 16px 8px 24px;
+  }
+
+  .@{prefix}-content {
+    padding-right: 16px;
+  }
+}
+
+// ============ Card 类型 ============
+.@{prefix}-card {
+  .@{prefix}-nav {
+    border-bottom: 1px solid @tabs-border-color;
+  }
+
+  .@{prefix}-tab {
+    margin: 0 2px 0 0;
+    padding: 8px 16px;
+    background: @tabs-card-bg;
+    border: 1px solid @tabs-border-color;
+    border-bottom: none;
+    border-radius: 6px 6px 0 0;
+    transition: all 0.3s ease;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &-active {
+      background: @tabs-card-active-bg;
+      border-bottom-color: @tabs-card-active-bg;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: @tabs-card-active-bg;
+      }
+    }
+  }
+
+  .@{prefix}-ink-bar {
+    display: none;
+  }
+
+  .@{prefix}-content {
+    padding-top: 16px;
+  }
+}
+
+// ============ Editable Card 类型 ============
+.@{prefix}-editable-card {
+  .@{prefix}-nav {
+    border-bottom: 1px solid @tabs-border-color;
+  }
+
+  .@{prefix}-tab {
+    margin: 0 2px 0 0;
+    padding: 8px 12px;
+    background: @tabs-card-bg;
+    border: 1px solid @tabs-border-color;
+    border-bottom: none;
+    border-radius: 6px 6px 0 0;
+    transition: all 0.3s ease;
+
+    &-active {
+      background: @tabs-card-active-bg;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: @tabs-card-active-bg;
+      }
+    }
+  }
+
+  .@{prefix}-ink-bar {
+    display: none;
+  }
+
+  .@{prefix}-content {
+    padding-top: 16px;
+  }
+}
+
+// ============ 尺寸 ============
+.@{prefix}-large {
+  .@{prefix}-tab {
+    padding: 16px 20px;
+    font-size: 16px;
+  }
+}
+
+.@{prefix}-small {
+  .@{prefix}-tab {
+    padding: 8px 12px;
+    font-size: 12px;
+  }
+}
+
+// ============ 居中 ============
+.@{prefix}-centered {
+  .@{prefix}-nav-list {
+    justify-content: center;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix} {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .@{prefix}-tab {
+    &:hover:not(.@{prefix}-tab-disabled) {
+      color: #818cf8;
+    }
+
+    &-active {
+      color: #818cf8;
+    }
+
+    &-disabled {
+      color: rgba(255, 255, 255, 0.25);
+    }
+
+    &-remove {
+      color: rgba(255, 255, 255, 0.45);
+
+      &:hover {
+        color: rgba(255, 255, 255, 0.85);
+        background: rgba(255, 255, 255, 0.08);
+      }
+    }
+  }
+
+  .@{prefix}-ink-bar {
+    background: #818cf8;
+  }
+
+  .@{prefix}-nav-add {
+    color: rgba(255, 255, 255, 0.45);
+    border-color: rgba(255, 255, 255, 0.2);
+
+    &:hover {
+      color: #818cf8;
+      border-color: #818cf8;
+    }
+  }
+
+  .@{prefix}-line {
+    .@{prefix}-nav {
+      border-color: rgba(255, 255, 255, 0.12);
+    }
+  }
+
+  .@{prefix}-card,
+  .@{prefix}-editable-card {
+    .@{prefix}-nav {
+      border-color: rgba(255, 255, 255, 0.12);
+    }
+
+    .@{prefix}-tab {
+      background: rgba(255, 255, 255, 0.04);
+      border-color: rgba(255, 255, 255, 0.12);
+
+      &-active {
+        background: #1f1f1f;
+
+        &::after {
+          background: #1f1f1f;
+        }
+      }
+    }
+  }
+}
+