@rainbow-oh/yee-c 0.1.0 → 0.3.0

package/src/Tabs/tab-header/index.tsx

@@ -49,7 +49,15 @@ export interface TabHeaderProps {
 
 const TabHeader: React.FC<TabHeaderProps> = (props) => {
   const { items, activeKey } = useContext(TabsCtx);
-  const { prefixCls, type, position = 'top', headerExtra, onEdit } = props;
+  const {
+    prefixCls,
+    type,
+    position = 'top',
+    headerExtra,
+    classNames,
+    styles,
+    onEdit,
+  } = props;
 
   const direction =
     position === 'top' || position === 'bottom' ? 'horizontal' : 'vertical';
@@ -135,6 +143,7 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
   const cls = clsx(
     `${prefixCls}-nav-wrapper`,
     `${prefixCls}-nav-wrapper-${position}`,
+    classNames?.header,
   );
 
   const contextValue = {
@@ -147,12 +156,20 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
   } as TabHeaderCtxType;
 
   return (
-    <div className={cls}>
+    <div className={cls} style={styles?.header}>
       {renderPrefixExtra()}
 
       <TabHeaderCtx.Provider value={contextValue}>
-        <div className={`${prefixCls}-nav-wrap`} ref={navContainer}>
-          <div className={`${prefixCls}-nav-list`} ref={navList}>
+        <div
+          className={clsx(`${prefixCls}-nav-wrap`, classNames?.track)}
+          style={styles?.track}
+          ref={navContainer}
+        >
+          <div
+            className={clsx(`${prefixCls}-nav-list`, classNames?.list)}
+            style={styles?.list}
+            ref={navList}
+          >
             {items?.map((item: TabItemType, index: number) => (
               <TabHeaderTitle
                 {...item}
@@ -164,7 +181,11 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
 
             {!type && (
               <div
-                className={`${prefixCls}-active-bar`}
+                className={clsx(
+                  `${prefixCls}-active-bar`,
+                  classNames?.activeBar,
+                )}
+                style={styles?.activeBar}
                 ref={activebar}
                 aria-hidden="true"
               />

package/src/Tag/demo/size.tsx

@@ -4,13 +4,13 @@ import React from 'react';
 export default () => {
   return (
     <Space direction="vertical">
-      <Space>
+      <Space block>
         <Tag size="small">Small</Tag>
         <Tag size="default">Default</Tag>
         <Tag size="large">Large</Tag>
       </Space>
 
-      <Space>
+      <Space block>
         <Tag size="small" status="success">
           Small Success
         </Tag>

package/src/Tag/style/index.less

@@ -5,6 +5,7 @@
   align-items: center;
   box-sizing: content-box;
   max-width: 100%;
+  white-space: nowrap;
   height: var(--yee-tag-height);
   padding: var(--yee-tag-padding);
   color: var(--yee-tag-color);

package/src/Tooltip/index.en-US.md

@@ -28,6 +28,7 @@ A simple text popup tip.
 | --- | --- | --- | --- |
 | title | `React.ReactNode \| (() => React.ReactNode)` | Tooltip content | - |
 | mouseEnterDelay | `number` | Mouse enter delay time (seconds) | `0.1` |
+| color | `string` | Custom tooltip background color (applies to both the bubble and the arrow) | - |
 
 Other properties are inherited from [Trigger](/components/trigger), including:
 

package/src/Tooltip/index.zh-CN.md

@@ -28,6 +28,7 @@ toc: 'content'
 | --- | --- | --- | --- |
 | title | `React.ReactNode \| (() => React.ReactNode)` | 提示文字 | - |
 | mouseEnterDelay | `number` | 鼠标移入后延时多少秒才显示 Tooltip | `0.1` |
+| color | `string` | 自定义提示背景色（同时作用于气泡和箭头） | - |
 
 其他属性继承自 [Trigger](/components/trigger)，包括：
 

package/src/Tooltip/interface.ts

@@ -10,4 +10,8 @@ export interface TooltipProps extends Omit<TriggerProps, 'popup'> {
    * @default 0.1
    */
   mouseEnterDelay?: number;
+  /***
+   * Tooltip custom background color
+   * */
+  color?: string;
 }

package/src/Tooltip/style/index.less

@@ -8,19 +8,19 @@
 
   &-arrow {
     &::after {
-      position: absolute;
-      bottom: 0;
-      z-index: 0;
-      width: var(--yee-tooltip-arrow-width);
-      height: var(--yee-tooltip-arrow-height);
-      margin: auto;
+      // position: absolute;
+      // bottom: 0;
+      // z-index: 0;
+      // width: var(--yee-tooltip-arrow-width);
+      // height: var(--yee-tooltip-arrow-height);
+      // margin: auto;
       background-color: var(--yee-tooltip-bg-color);
       border-radius: var(--yee-tooltip-arrow-border-radius);
       box-shadow: var(--yee-box-shadow-popover-arrow);
       transform: translateY(var(--yee-tooltip-arrow-translate-y))
         rotate(var(--yee-tooltip-arrow-rotate));
-      content: '';
-      inset-inline: 0;
+      // content: '';
+      // inset-inline: 0;
     }
   }
 }

package/src/Tooltip/tooltip.tsx

@@ -17,9 +17,17 @@ const Tooltip = (baseprops: TooltipProps) => {
     placement = 'top',
     trigger = ['hover', 'focus'],
     mouseEnterDelay = 0.1,
+    color,
+    popupStyle,
+    hideOnClick = false,
     ...rest
   } = props;
 
+  const mergedPopupStyle = {
+    ...(color ? { ['--yee-tooltip-bg-color']: color } : null),
+    ...popupStyle,
+  } as React.CSSProperties;
+
   const popup = (
     <span className={`${prefixCls}-content`} role="tooltip">
       {typeof title === 'function' ? title() : title}
@@ -34,7 +42,8 @@ const Tooltip = (baseprops: TooltipProps) => {
       popup={popup}
       arrow={arrow}
       placement={placement}
-      hideOnClick={false}
+      hideOnClick={hideOnClick}
+      popupStyle={mergedPopupStyle}
       mouseEnterDelay={mouseEnterDelay}
     >
       {children}

package/src/Tour/demo/basic.tsx

@@ -0,0 +1,52 @@
+import { Button, Space, Tour } from '@rainbow-oh/yee-c';
+import React, { useRef, useState } from 'react';
+
+export default () => {
+  const [open, setOpen] = useState(false);
+  const startRef = useRef<HTMLDivElement>(null);
+  const midRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <Space direction="vertical">
+      <Space>
+        <div ref={startRef} style={{ display: 'inline-block' }}>
+          <Button type="primary" onClick={() => setOpen(true)}>
+            开始引导
+          </Button>
+        </div>
+        <div ref={midRef} style={{ display: 'inline-block' }}>
+          <Button>导出</Button>
+        </div>
+        <div ref={endRef} style={{ display: 'inline-block' }}>
+          <Button>设置</Button>
+        </div>
+      </Space>
+
+      <Tour
+        open={open}
+        onClose={() => setOpen(false)}
+        onFinish={() => setOpen(false)}
+        steps={[
+          {
+            target: () => startRef.current,
+            title: '欢迎使用',
+            description: '点击此处开始你的操作流程。',
+          },
+          {
+            target: () => midRef.current,
+            title: '导出数据',
+            description: '在这里可以将数据导出为文件。',
+            placement: 'bottom',
+          },
+          {
+            target: () => endRef.current,
+            title: '系统设置',
+            description: '配置系统参数。点击「完成」结束引导。',
+            placement: 'left',
+          },
+        ]}
+      />
+    </Space>
+  );
+};

package/src/Tour/demo/indicators.tsx

@@ -0,0 +1,63 @@
+import { Button, Space, Tour } from '@rainbow-oh/yee-c';
+import React, { useRef, useState } from 'react';
+
+export default () => {
+  const [open, setOpen] = useState(false);
+  const aRef = useRef<HTMLDivElement>(null);
+  const bRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <Space direction="vertical">
+      <Space>
+        <div ref={aRef} style={{ display: 'inline-block' }}>
+          <Button>导入</Button>
+        </div>
+        <div ref={bRef} style={{ display: 'inline-block' }}>
+          <Button>筛选</Button>
+        </div>
+        <Button type="primary" onClick={() => setOpen(true)}>
+          开始
+        </Button>
+      </Space>
+
+      <Tour
+        open={open}
+        onClose={() => setOpen(false)}
+        onFinish={() => setOpen(false)}
+        indicatorsRender={(current, total) => (
+          <>
+            {Array.from({ length: total }).map((_, i) => (
+              <span
+                key={i}
+                style={{
+                  display: 'inline-block',
+                  width: 8,
+                  height: 8,
+                  marginInlineEnd: 4,
+                  borderRadius: '50%',
+                  background:
+                    i === current
+                      ? 'var(--yee-primary-color)'
+                      : 'var(--yee-border-color)',
+                  transition: 'background 0.2s',
+                }}
+              />
+            ))}
+          </>
+        )}
+        steps={[
+          {
+            target: () => aRef.current,
+            title: '导入',
+            description: '点击此处导入数据文件。',
+          },
+          {
+            target: () => bRef.current,
+            title: '筛选',
+            description: '在这里筛选你需要的数据。',
+          },
+        ]}
+      />
+    </Space>
+  );
+};

package/src/Tour/demo/placement.tsx

@@ -0,0 +1,55 @@
+import { Button, Space, Tour } from '@rainbow-oh/yee-c';
+import React, { useRef, useState } from 'react';
+
+const placements = ['top', 'right', 'bottom', 'left'] as const;
+type P = (typeof placements)[number];
+
+export default () => {
+  const [open, setOpen] = useState(false);
+  const [p, setP] = useState<P>('top');
+  const targetRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <Space direction="vertical">
+      <Space>
+        {placements.map((pl) => (
+          <Button
+            key={pl}
+            type={p === pl ? 'primary' : 'default'}
+            onClick={() => {
+              setP(pl);
+              setOpen(true);
+            }}
+          >
+            {pl}
+          </Button>
+        ))}
+      </Space>
+
+      <div
+        ref={targetRef}
+        style={{
+          display: 'inline-block',
+          padding: '16px 24px',
+          border: '1px dashed var(--yee-border-color)',
+          borderRadius: 6,
+        }}
+      >
+        目标元素
+      </div>
+
+      <Tour
+        open={open}
+        placement={p}
+        onClose={() => setOpen(false)}
+        steps={[
+          {
+            target: () => targetRef.current,
+            title: `placement: ${p}`,
+            description: '气泡卡片相对目标元素的位置；靠近视口边缘时会自动翻转。',
+          },
+        ]}
+      />
+    </Space>
+  );
+};

package/src/Tour/demo/scroll.tsx

@@ -0,0 +1,49 @@
+import { Button, Space, Tour } from '@rainbow-oh/yee-c';
+import React, { useRef, useState } from 'react';
+
+export default () => {
+  const [open, setOpen] = useState(false);
+  const farRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        开始引导（自动滚动定位）
+      </Button>
+
+      <div
+        style={{
+          height: 600,
+          padding: 24,
+          background: 'var(--yee-color-bg-layout)',
+          borderRadius: 8,
+          color: '#999',
+        }}
+      >
+        ↓ 目标在下方，切换步骤时引导会自动滚动定位
+      </div>
+
+      <div ref={farRef} style={{ display: 'inline-block' }}>
+        <Button>远处的目标</Button>
+      </div>
+
+      <Tour
+        open={open}
+        onClose={() => setOpen(false)}
+        onFinish={() => setOpen(false)}
+        steps={[
+          {
+            target: () => farRef.current,
+            title: '滚动定位',
+            description: '切换到这一步时，目标会自动滚动到视口内。',
+          },
+          {
+            target: '#tour-nonexistent-target',
+            title: '目标不存在',
+            description: '找不到目标元素时，卡片居中显示（无高亮）。',
+          },
+        ]}
+      />
+    </Space>
+  );
+};

package/src/Tour/index.en-US.md

@@ -0,0 +1,61 @@
+---
+category: Components
+title: Tour
+subtitle: Tour
+group:
+  title: Feedback
+  order: 29
+toc: 'content'
+---
+
+# Tour
+
+Step-by-step guided tour: full-screen mask + highlighted target element + attached explanation card, with multi-step navigation, progress indicators, and automatic scroll-into-view. Commonly used for feature walkthroughs and new-user onboarding.
+
+## Code Demo
+
+<code src="./demo/basic.tsx" title="Basic" description="Multi-step tour, controlled open, with previous/next/finish/skip"></code>
+<code src="./demo/placement.tsx" title="Placement" description="Card placement relative to the target; auto-flips near viewport edges"></code>
+<code src="./demo/indicators.tsx" title="Custom Indicators" description="Customize step indicators via indicatorsRender"></code>
+<code src="./demo/scroll.tsx" title="Scroll & Fallback" description="Auto scroll-into-view on step change; centered card when target is missing"></code>
+
+## API
+
+### TourProps
+
+| Property | Type | Description | Default |
+| --- | --- | --- | --- |
+| open | `boolean` | Whether the tour is visible (controlled) | - |
+| steps | `TourStep[]` | Tour steps | - |
+| current | `number` | Controlled current step index | - |
+| defaultCurrent | `number` | Default current step index | `0` |
+| onClose | `() => void` | Callback when closed / skipped | - |
+| onFinish | `() => void` | Callback when all steps are finished | - |
+| onChange | `(current: number) => void` | Callback when current step changes | - |
+| placement | `Placement` | Default card placement | `'bottom'` |
+| arrow | `boolean` | Whether to show the card arrow | - |
+| mask | `boolean` | Whether to show the mask (highlight cutout + click lock) | `true` |
+| closable | `boolean` | Whether the top-right close button is shown | `true` |
+| closeIcon | `React.ReactNode` | Custom close icon | - |
+| maskClosable | `boolean` | Whether clicking the mask closes the tour | `false` |
+| indicatorsRender | `(current: number, total: number) => React.ReactNode` | Custom step indicators | default `current+1 / total` |
+| scrollIntoViewOptions | `boolean \| ScrollIntoViewOptions` | Options for target.scrollIntoView on each step | `true` |
+| className / style | | Custom root class/style | - |
+| classNames / styles | `Partial<Record<'highlight' \| 'content' \| 'header' \| 'body' \| 'footer', …>>` | Semantic structure class/style | - |
+
+> `Placement` = `'top' \| 'right' \| 'bottom' \| 'left' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'`, same as `Trigger`.
+
+### TourStep
+
+| Property | Type | Description | Default |
+| --- | --- | --- | --- |
+| target | `(() => HTMLElement \| null) \| string \| HTMLElement` | Highlight target (finder function / CSS selector / element) | - |
+| title | `React.ReactNode` | Card title | - |
+| description | `React.ReactNode` | Card description | - |
+| placement | `Placement` | Card placement for this step, overrides TourProps.placement | - |
+| arrow | `boolean` | Whether to show the arrow for this step | - |
+| className | `string` | Custom card class name for this step | - |
+
+### Built-in text
+
+Button labels (previous/next/finish/skip) come from `locale.tour` (`previous`/`next`/`finish`/`skip`) and follow the `ConfigProvider` locale; override via the language pack or `ConfigProvider.value.tour`.

package/src/Tour/index.ts

@@ -0,0 +1,10 @@
+import InternalTour from './tour';
+
+export type {
+  TourProps,
+  TourStep,
+  TourTarget,
+  TourSemanticDOM,
+} from './interface';
+
+export default InternalTour;

package/src/Tour/index.zh-CN.md

@@ -0,0 +1,61 @@
+---
+category: Components
+title: Tour
+subtitle: 新手引导
+group:
+  title: 反馈
+  order: 29
+toc: 'content'
+---
+
+# Tour 新手引导
+
+步骤式新手引导：全屏遮罩 + 高亮目标元素 + 贴附说明卡片，支持多步推进、进度指示、自动滚动定位。常用于产品功能向导、新用户 onboarding。
+
+## 代码演示
+
+<code src="./demo/basic.tsx" title="基础用法" description="多步引导，受控 open，支持上一步/下一步/完成/跳过"></code>
+<code src="./demo/placement.tsx" title="气泡位置" description="卡片相对目标的 placement，靠近视口边缘时自动翻转"></code>
+<code src="./demo/indicators.tsx" title="自定义进度指示" description="通过 indicatorsRender 自定义步骤进度点"></code>
+<code src="./demo/scroll.tsx" title="滚动定位与容错" description="切换步骤时自动滚动到目标；目标不存在时卡片居中"></code>
+
+## API
+
+### TourProps
+
+| 属性名 | 类型 | 描述 | 默认值 |
+| --- | --- | --- | --- |
+| open | `boolean` | 是否显示引导（受控） | - |
+| steps | `TourStep[]` | 引导步骤 | - |
+| current | `number` | 受控当前步骤索引 | - |
+| defaultCurrent | `number` | 默认当前步骤索引 | `0` |
+| onClose | `() => void` | 关闭/跳过时的回调 | - |
+| onFinish | `() => void` | 完成全部步骤时的回调 | - |
+| onChange | `(current: number) => void` | 步骤变化时的回调 | - |
+| placement | `Placement` | 卡片默认位置 | `'bottom'` |
+| arrow | `boolean` | 是否显示卡片箭头 | - |
+| mask | `boolean` | 是否显示遮罩（含高亮挖洞与点击锁定） | `true` |
+| closable | `boolean` | 是否显示右上关闭按钮 | `true` |
+| closeIcon | `React.ReactNode` | 自定义关闭图标 | - |
+| maskClosable | `boolean` | 点击遮罩是否关闭 | `false` |
+| indicatorsRender | `(current: number, total: number) => React.ReactNode` | 自定义进度指示 | 默认 `current+1 / total` |
+| scrollIntoViewOptions | `boolean \| ScrollIntoViewOptions` | 切换步骤时目标 scrollIntoView 的参数 | `true` |
+| className / style | | 自定义根类名/样式 | - |
+| classNames / styles | `Partial<Record<'highlight' \| 'content' \| 'header' \| 'body' \| 'footer', …>>` | 语义化结构类名/样式 | - |
+
+> `Placement` = `'top' \| 'right' \| 'bottom' \| 'left' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom'`，与 `Trigger` 一致。
+
+### TourStep
+
+| 属性名 | 类型 | 描述 | 默认值 |
+| --- | --- | --- | --- |
+| target | `(() => HTMLElement \| null) \| string \| HTMLElement` | 高亮目标（查找函数 / CSS 选择器 / 元素） | - |
+| title | `React.ReactNode` | 卡片标题 | - |
+| description | `React.ReactNode` | 卡片描述 | - |
+| placement | `Placement` | 该步卡片位置，覆盖 TourProps.placement | - |
+| arrow | `boolean` | 该步是否显示箭头 | - |
+| className | `string` | 该步卡片自定义类名 | - |
+
+### 内置文案
+
+按钮（上一步/下一步/完成/跳过）与进度文案取自 `locale.tour`（`previous`/`next`/`finish`/`skip`），随 `ConfigProvider` 的 locale 切换；可通过语言包或 `ConfigProvider.value.tour` 覆盖。

package/src/Tour/interface.ts

@@ -0,0 +1,126 @@
+import type { Placement } from '../Trigger/interface';
+import type { DataAttributeProps } from '../utils/types';
+
+export type TourTarget = (() => HTMLElement | null) | string | HTMLElement;
+
+export type TourSemanticDOM =
+  | 'highlight'
+  | 'content'
+  | 'header'
+  | 'body'
+  | 'footer';
+
+export interface TourStep {
+  /**
+   * The element to highlight, supports a finder function, a CSS selector string, or an HTMLElement
+   */
+  target: TourTarget;
+  /**
+   * Card title
+   */
+  title?: React.ReactNode;
+  /**
+   * Card description
+   */
+  description?: React.ReactNode;
+  /**
+   * Card placement relative to the highlighted target
+   * @default 'bottom'
+   */
+  placement?: Placement;
+  /**
+   * Whether to show the card arrow
+   */
+  arrow?: boolean;
+  /**
+   * Custom step class name
+   */
+  className?: string;
+}
+
+export interface TourProps extends DataAttributeProps {
+  /**
+   * Custom prefix class name
+   */
+  prefixCls?: string;
+  /**
+   * Custom root class name
+   */
+  className?: string;
+  /**
+   * Custom root style
+   */
+  style?: React.CSSProperties;
+  /**
+   * Semantic structure class names
+   */
+  classNames?: Partial<Record<TourSemanticDOM, string>>;
+  /**
+   * Semantic structure styles
+   */
+  styles?: Partial<Record<TourSemanticDOM, React.CSSProperties>>;
+  /**
+   * Whether the tour is visible (controlled)
+   */
+  open: boolean;
+  /**
+   * Tour steps
+   */
+  steps: TourStep[];
+  /**
+   * Controlled current step index
+   */
+  current?: number;
+  /**
+   * Default current step index
+   */
+  defaultCurrent?: number;
+  /**
+   * Callback when the tour is closed / skipped
+   */
+  onClose?: () => void;
+  /**
+   * Callback when all steps are finished
+   */
+  onFinish?: () => void;
+  /**
+   * Callback when current step changes
+   */
+  onChange?: (current: number) => void;
+  /**
+   * Default card placement relative to the highlighted target
+   * @default 'bottom'
+   */
+  placement?: Placement;
+  /**
+   * Whether to show the card arrow by default
+   */
+  arrow?: boolean;
+  /**
+   * Whether to show the mask layer (highlight cutout + click lock)
+   * @default true
+   */
+  mask?: boolean;
+  /**
+   * Whether the close button is shown at the top-right of the card
+   * @default true
+   */
+  closable?: boolean;
+  /**
+   * Custom close icon
+   */
+  closeIcon?: React.ReactNode;
+  /**
+   * Whether clicking the mask closes the tour
+   * @default false
+   */
+  maskClosable?: boolean;
+  /**
+   * Custom step indicators renderer, receives (current, total)
+   */
+  indicatorsRender?: (current: number, total: number) => React.ReactNode;
+  /**
+   * Options passed to target.scrollIntoView on each step
+   */
+  scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
+}