@rainbow-oh/yee-c 0.2.0 → 0.4.0

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

@@ -43,6 +43,7 @@ toc: 'content'
 | columns           | `ColumnProps[]`                                                             | 表格列的配置信息                     | -      |
 | children          | `Array<React.ReactElement<ColumnProps>> \| React.ReactElement<ColumnProps>` | 子元素                               | -      |
 | locale            | `Record<string, string>`                                                    | 提示信息                             | -      |
+| noData            | `React.ReactNode`                                                           | 无数据时展示的内容                   | -      |
 | dataSource        | `Array<Record<string, any>>`                                                | 数据                                 | -      |
 | footer            | `React.ReactNode \| (() => React.ReactNode)`                                | 表格底部                             | -      |
 | loading           | `boolean`                                                                   | 加载状态                             | -      |

package/src/Table/interface.ts

@@ -267,7 +267,7 @@ export interface ColumnProps {
    * Custom render cell content
    */
   render?: (
-    record: HeadCellProps | Record<string, unknown>,
+    record: Record<string, unknown>,
     rowIndex: number,
   ) => React.ReactNode;
 }
@@ -492,6 +492,10 @@ export interface TableProps
    * Locale text, including sort and empty data hints
    */
   locale?: Record<string, string>;
+  /**
+   * Content displayed when no data is available
+   * */
+  noData?: React.ReactNode;
   /**
    * Data
    */

package/src/Table/theader/cell.tsx

@@ -29,7 +29,6 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
     onHeaderCell,
     onSort,
     onInternalFilter,
-    render,
     ...rest
   } = props;
 
@@ -117,14 +116,8 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
         className={`${prefixCls}-thead-cell`}
         style={{ justifyContent: align }}
       >
-        {render ? (
-          render(props, 0)
-        ) : (
-          <>
-            {renderTitle()}
-            {renderFilter()}
-          </>
-        )}
+        {renderTitle()}
+        {renderFilter()}
       </div>
     );
   };

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/demo/variant.tsx

@@ -0,0 +1,47 @@
+import { Space, Tag } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+export default () => {
+  return (
+    <Space direction="vertical">
+      <Space block>
+        <Tag variant="filled">Filled</Tag>
+        <Tag variant="solid">Solid</Tag>
+        <Tag variant="outlined">Outlined</Tag>
+      </Space>
+      <Space block>
+        <Tag variant="filled" status="success">
+          Success
+        </Tag>
+        <Tag variant="solid" status="success">
+          Success
+        </Tag>
+        <Tag variant="outlined" status="success">
+          Success
+        </Tag>
+      </Space>
+      <Space block>
+        <Tag variant="filled" status="warning">
+          Warning
+        </Tag>
+        <Tag variant="solid" status="warning">
+          Warning
+        </Tag>
+        <Tag variant="outlined" status="warning">
+          Warning
+        </Tag>
+      </Space>
+      <Space block>
+        <Tag variant="filled" status="error">
+          Error
+        </Tag>
+        <Tag variant="solid" status="error">
+          Error
+        </Tag>
+        <Tag variant="outlined" status="error">
+          Error
+        </Tag>
+      </Space>
+    </Space>
+  );
+};

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

@@ -16,6 +16,7 @@ Tag for categorizing or markup.
 
 <code src="./demo/basic.tsx" title="Basic" description="Basic usage of Tag"></code>
 <code src="./demo/type.tsx" title="Type" description="Different types of Tag"></code>
+<code src="./demo/variant.tsx" title="Variant" description="Three tag styles: filled, solid, outlined"></code>
 <code src="./demo/closable.tsx" title="Closable" description="Closable Tag"></code>
 <code src="./demo/size.tsx" title="Size" description="Different sizes of Tag"></code>
 <code src="./demo/checkable.tsx" title="Checkable" description="Checkable Tag"></code>
@@ -37,6 +38,7 @@ Tag for categorizing or markup.
 | closable | `boolean \| React.ReactNode` | Whether closable or custom close icon | - |
 | status | `TagType` | Built-in status | - |
 | dashed | `boolean` | Whether dashed border | - |
+| variant | `'filled' \| 'solid' \| 'outlined'` | Tag style variant | `filled` |
 | size | `'small' \| 'default' \| 'large'` | Size | `default` |
 | icon | `React.ReactNode` | Icon | - |
 | checkable | `boolean` | Whether checkable | - |

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

@@ -16,6 +16,7 @@ toc: 'content'
 
 <code src="./demo/basic.tsx" title="基础用法" description="Tag的基础用法"></code>
 <code src="./demo/type.tsx" title="类型" description="不同类型的标签"></code>
+<code src="./demo/variant.tsx" title="变体" description="三种风格的标签：filled、solid、outlined"></code>
 <code src="./demo/closable.tsx" title="可关闭" description="可关闭的标签"></code>
 <code src="./demo/size.tsx" title="尺寸" description="不同尺寸的标签"></code>
 <code src="./demo/checkable.tsx" title="可选择" description="可选择的标签"></code>
@@ -37,6 +38,7 @@ toc: 'content'
 | closable | `boolean \| React.ReactNode` | 是否可关闭，也可自定义关闭图标 | - |
 | status | `TagType` | 内置状态 | - |
 | dashed | `boolean` | 是否为虚线 | - |
+| variant | `'filled' \| 'solid' \| 'outlined'` | 标签风格变体 | `filled` |
 | size | `'small' \| 'default' \| 'large'` | 尺寸 | `default` |
 | icon | `React.ReactNode` | 设置图标 | - |
 | checkable | `boolean` | 是否可选中 | - |

package/src/Tag/interface.ts

@@ -59,6 +59,11 @@ export interface TagProps extends DataAttributeProps {
    * Whether checkable
    */
   checkable?: boolean;
+  /**
+   * tag variant
+   * @default filled
+   * */
+  variant?: 'filled' | 'solid' | 'outlined';
   /**
    * Set checked state
    */

package/src/Tag/style/index.less

@@ -5,47 +5,131 @@
   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);
   font-size: var(--yee-tag-font-size);
   line-height: var(--yee-tag-line-height);
-  background-color: var(--yee-tag-item-bg-color);
   background-clip: padding-box;
   border: var(--yee-tag-border-width) solid var(--yee-tag-border-color);
   border-radius: var(--yee-tag-border-radius);
 
-  &-info {
-    color: var(--yee-tag-info-color);
-    background-color: var(--yee-tag-info-bg-color);
-    border-color: var(--yee-tag-info-border-color);
-  }
+  // ============ 变体 variant ============
+  // filled：浅色底 + 彩色字（默认）
+  &-filled {
+    color: var(--yee-tag-color);
+    background-color: var(--yee-tag-item-bg-color);
+    border-color: var(--yee-tag-border-color);
 
-  &-success {
-    color: var(--yee-tag-success-color);
-    background-color: var(--yee-tag-success-bg-color);
-    border-color: var(--yee-tag-success-border-color);
-  }
+    &@{pls}-info {
+      color: var(--yee-tag-info-color);
+      background-color: var(--yee-tag-info-bg-color);
+      border-color: var(--yee-tag-info-border-color);
+    }
+
+    &@{pls}-success {
+      color: var(--yee-tag-success-color);
+      background-color: var(--yee-tag-success-bg-color);
+      border-color: var(--yee-tag-success-border-color);
+    }
+
+    &@{pls}-warning {
+      color: var(--yee-tag-warning-color);
+      background-color: var(--yee-tag-warning-bg-color);
+      border-color: var(--yee-tag-warning-border-color);
+    }
 
-  &-warning {
-    color: var(--yee-tag-warning-color);
-    background-color: var(--yee-tag-warning-bg-color);
-    border-color: var(--yee-tag-warning-border-color);
+    &@{pls}-error {
+      color: var(--yee-tag-error-color);
+      background-color: var(--yee-tag-error-bg-color);
+      border-color: var(--yee-tag-error-border-color);
+    }
+
+    &@{pls}-disabled {
+      color: var(--yee-tag-disabled-color);
+      background-color: var(--yee-tag-disabled-bg-color);
+      border-color: var(--yee-tag-disabled-border-color);
+      cursor: not-allowed;
+    }
   }
 
-  &-error {
-    color: var(--yee-tag-error-color);
-    background-color: var(--yee-tag-error-bg-color);
-    border-color: var(--yee-tag-error-border-color);
+  // solid：纯色底 + 白字
+  &-solid {
+    color: var(--yee-tag-solid-color, #fff);
+    background-color: var(--yee-tag-color);
+    border-color: transparent;
+
+    &@{pls}-info {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-info-color);
+      border-color: transparent;
+    }
+
+    &@{pls}-success {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-success-color);
+      border-color: transparent;
+    }
+
+    &@{pls}-warning {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-warning-color);
+      border-color: transparent;
+    }
+
+    &@{pls}-error {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-error-color);
+      border-color: transparent;
+    }
+
+    &@{pls}-disabled {
+      color: var(--yee-tag-solid-color, #fff);
+      background-color: var(--yee-tag-disabled-color);
+      border-color: transparent;
+      cursor: not-allowed;
+    }
   }
 
-  &-disabled {
-    color: var(--yee-tag-disabled-color);
-    background-color: var(--yee-tag-disabled-bg-color);
-    border-color: var(--yee-tag-disabled-border-color);
-    cursor: not-allowed;
+  // outlined：透明底 + 彩色字 + 彩色描边
+  &-outlined {
+    color: var(--yee-tag-color);
+    background-color: transparent;
+    border-color: var(--yee-tag-border-color);
+
+    &@{pls}-info {
+      color: var(--yee-tag-info-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-info-color);
+    }
+
+    &@{pls}-success {
+      color: var(--yee-tag-success-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-success-color);
+    }
+
+    &@{pls}-warning {
+      color: var(--yee-tag-warning-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-warning-color);
+    }
+
+    &@{pls}-error {
+      color: var(--yee-tag-error-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-error-color);
+    }
+
+    &@{pls}-disabled {
+      color: var(--yee-tag-disabled-color);
+      background-color: transparent;
+      border-color: var(--yee-tag-disabled-color);
+      cursor: not-allowed;
+    }
   }
 
+  // ============ 其他修饰 ============
   &-dashed {
     background-color: var(--yee-tag-item-dashed-bg-color);
     border-style: dashed;

package/src/Tag/tag.tsx

@@ -24,6 +24,7 @@ const Tag = forwardRef(
       icon,
       classNames,
       styles,
+      variant = 'filled',
       onClose,
       onChange,
       ...rest
@@ -37,6 +38,7 @@ const Tag = forwardRef(
 
     const cls = clsx(
       prefixCls,
+      [`${prefixCls}-${variant}`],
       {
         [`${prefixCls}-${status}`]: status,
         [`${prefixCls}-dashed`]: dashed,

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;