Browse Source

fix: 修复代码配置tag太长溢出的问题

pull/189/head
cp3hnu 10 months ago
parent
commit
f4833d69de
2 changed files with 19 additions and 3 deletions
  1. +13
    -2
      react-ui/src/components/CodeConfigItem/index.tsx
  2. +6
    -1
      react-ui/src/pages/CodeConfig/components/CodeConfigItem/index.tsx

+ 13
- 2
react-ui/src/components/CodeConfigItem/index.tsx View File

@@ -2,6 +2,7 @@ import { AvailableRange } from '@/enums';
import { type CodeConfigData } from '@/pages/CodeConfig/List';
import { Flex, Typography } from 'antd';
import classNames from 'classnames';
import { useState } from 'react';
import styles from './index.less';

type CodeConfigItemProps = {
@@ -10,6 +11,7 @@ type CodeConfigItemProps = {
};

function CodeConfigItem({ item, onClick }: CodeConfigItemProps) {
const [isEllipsis, setIsEllipsis] = useState(false);
return (
<div className={styles['code-config-item']} onClick={() => onClick?.(item)}>
<Flex justify="space-between" align="center" style={{ marginBottom: '15px' }}>
@@ -32,11 +34,20 @@ function CodeConfigItem({ item, onClick }: CodeConfigItemProps) {
</Flex>
<Typography.Paragraph
className={styles['code-config-item__url']}
ellipsis={{ rows: 2, tooltip: item.git_url }}
ellipsis={{
rows: 2,
tooltip: isEllipsis ? item.git_url : false, // 仅当省略时显示 tooltip
onEllipsis: (ellipsis) => setIsEllipsis(ellipsis),
}}
>
{item.git_url}
</Typography.Paragraph>
<div className={styles['code-config-item__branch']}>{item.git_branch}</div>
<Typography.Paragraph
className={styles['code-config-item__branch']}
ellipsis={{ tooltip: item.git_branch }}
>
{item.git_branch}
</Typography.Paragraph>
</div>
);
}


+ 6
- 1
react-ui/src/pages/CodeConfig/components/CodeConfigItem/index.tsx View File

@@ -70,7 +70,12 @@ function CodeConfigItem({ item, onClick, onEdit, onRemove }: CodeConfigItemProps
>
{item.git_url}
</Typography.Paragraph>
<div className={styles['code-config-item__branch']}>{item.git_branch}</div>
<Typography.Paragraph
className={styles['code-config-item__branch']}
ellipsis={{ tooltip: item.git_branch }}
>
{item.git_branch}
</Typography.Paragraph>
</div>
<Flex justify="space-between">
<div className={styles['code-config-item__user']}>


Loading…
Cancel
Save