feat(ContentWithQuestion): add ContentWithQuestion

.dumirc.ts

@@ -161,6 +161,10 @@ export default defineConfig({
           title: '其他',
           children: [
             { title: 'Action 操作项', link: '/biz-components/action' },
+            {
+              title: 'ContentWithQuestion 问号旁提示',
+              link: '/biz-components/content-with-question',
+            },
             {
               title: 'ContentWithIcon 文字旁提示',
               link: '/biz-components/content-with-icon',

packages/ui/src/ContentWithQuestion/__test__/index.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ContentWithQuestion from '..';
+
+describe('ContentWithQuestion', () => {
+  it('渲染正常', async () => {
+    const { getByTestId } = render(<ContentWithQuestion content="hello" />);
+    expect(getByTestId('content').textContent).toEqual('hello');
+    // expect(getByTestId('icon')).not.toBeNull();
+  });
+});

packages/ui/src/ContentWithQuestion/demo/basic.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ContentWithQuestion } from '@oceanbase/ui';
+import './index.less';
+
+export default () => {
+  return (
+    <>
+      <div>
+        <ContentWithQuestion
+          content="付费服务占比"
+          tooltip={{
+            title:
+              '登记的服务人天中有服务包归属的百分比，计算公式为 (有服务包归属的服务人天总和)/(已投入人天)',
+            overlayStyle: { maxWidth: '330px' },
+          }}
+        />
+      </div>
+      <div>
+        <ContentWithQuestion
+          className="customer-className"
+          content="自定义 className"
+          tooltip={{
+            title: '自定义字体蓝色 className',
+          }}
+        />
+      </div>
+    </>
+  );
+};

packages/ui/src/ContentWithQuestion/demo/index.less

@@ -0,0 +1,3 @@
+.customer-className {
+  color: #597ef7;
+}

packages/ui/src/ContentWithQuestion/demo/prefix.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ContentWithQuestion } from '@oceanbase/ui';
+
+export default () => {
+  return (
+    <ContentWithQuestion
+      content="付费服务占比"
+      tooltip={{
+        title:
+          '登记的服务人天中有服务包归属的百分比，计算公式为 (有服务包归属的服务人天总和)/(已投入人天)',
+        overlayStyle: { maxWidth: '330px' },
+      }}
+      prefixIcon
+      suffixIcon={null}
+    />
+  );
+};

packages/ui/src/ContentWithQuestion/index.less

@@ -0,0 +1,19 @@
+@prefix: ob-content-with-question;
+
+.@{prefix}-item {
+  display: inline-flex;
+  align-items: center;
+  .@{prefix}-prefix {
+    margin-right: 8px;
+  }
+  .@{prefix}-suffix {
+    margin-left: 8px;
+  }
+  .@{prefix}-help {
+    cursor: help;
+  }
+  .@{prefix}-color {
+    color: red;
+
+  }
+}

packages/ui/src/ContentWithQuestion/index.md

@@ -0,0 +1,24 @@
+---
+title: ContentWithQuestion 文字旁提示
+nav:
+  title: 业务组件
+  path: /biz-components
+---
+
+## 代码演示
+
+<code src="./demo/basic.tsx" title="基本" description="组件默认情况图标在文字后，如不需要自定义图标，则不需要传 suffixIcon
+"></code>
+
+<code src="./demo/prefix.tsx" title="图标在文字前" description="图标若在文字前，需把 suffixIcon 置为 null，prefixIcon 使用默认图标的话传 true"></code>
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| :-- | :-- | :-- | :-- | :-- |
+| content | 文字内容 | String | - | - |
+| tooltip | Tooltip 配置 | TooltipProps | - | - |
+| prefixIcon | 文字前图标配置 | IconProps | null | - |
+| suffixIcon | 文字后图标配置 | IconProps | { type: 'question-circle', spin: false, pointable: true, style: { marginRight: 4 } } | - |
+| className | 组件 className | String | - | - |
+| style | 组件 style | React.CSSProperties | - | - |

packages/ui/src/ContentWithQuestion/index.tsx

@@ -0,0 +1,72 @@
+import { QuestionCircleOutlined } from '@oceanbase/icons';
+import { Space, Tooltip } from '@oceanbase/design';
+import classNames from 'classnames';
+import React, { isValidElement } from 'react';
+import { getPrefix } from '../_util';
+import './index.less';
+
+type IconPosition = 'prefix' | 'suffix';
+
+export interface ContentWithQuestionProps {
+  content?: React.ReactNode;
+  tooltip?: any;
+  prefixIcon?: React.ReactNode | boolean;
+  suffixIcon?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: (e: React.SyntheticEvent) => void;
+}
+
+const prefix = getPrefix('content-with-question');
+
+const ContentWithQuestion: React.FC<ContentWithQuestionProps> = ({
+  content,
+  tooltip,
+  prefixIcon = null,
+  suffixIcon = <QuestionCircleOutlined className={`${prefix}-help`} />,
+  className,
+  children,
+  ...restProps
+}: any) => {
+  // FIXME: antd 已经废弃 icon type 的用法，该组件也需要做相应处理，后面将会是传入 Icon 的形式而非 type
+  const getIcon = (iconConfig: React.ReactNode) => {
+    return iconConfig ? (
+      <Tooltip {...tooltip}>
+        {isValidElement(iconConfig) ? (
+          iconConfig
+        ) : (
+          <QuestionCircleOutlined className={`${prefix}-help`} />
+        )}
+      </Tooltip>
+    ) : null;
+  };
+
+  return (
+    <span
+      className={classNames({
+        [`${prefix}-item`]: true,
+        [className]: !!className,
+      })}
+      {...restProps}
+    >
+      <Space>
+        {getIcon(
+          prefixIcon === true ? (
+            <QuestionCircleOutlined
+              className={`${prefix}-help`}
+              style={{
+                marginRight: 4,
+              }}
+            />
+          ) : (
+            prefixIcon
+          )
+        )}
+        <span data-testid="content">{content ?? children}</span>
+        {getIcon(suffixIcon)}
+      </Space>
+    </span>
+  );
+};
+
+export default ContentWithQuestion;

packages/ui/src/index.ts

@@ -17,6 +17,7 @@ export { default as BasicLayout } from './BasicLayout';
 export { default as BatchOperationBar } from './BatchOperationBar';
 export { default as Boundary } from './Boundary';
 export * from './constant';
+export { default as ContentWithQuestion } from './ContentWithQuestion';
 export { default as ContentWithIcon } from './ContentWithIcon';
 export { default as Dialog } from './Dialog';
 export { default as DocDialog } from './DocDialog';