feat(settings-faq): improve FAQ table readability with tooltip & text truncation

* Added `Tooltip` component and ellipsis style for “question” & “answer” columns
* Keeps table compact while showing full content on hover
* Updated success messages punctuation for consistency
This commit is contained in:
t0ng7u
2025-06-21 22:03:14 +08:00
parent 58c9c7d5dd
commit b842baf21f
2 changed files with 25 additions and 17 deletions

View File

@@ -130,7 +130,7 @@ const SettingsAnnouncements = ({ options, refresh }) => {
dataIndex: 'extra',
key: 'extra',
render: (text) => (
<Tooltip content={text || '-'} position='topLeft' showArrow>
<Tooltip content={text || '-'} showArrow>
<div style={{
maxWidth: '200px',
overflow: 'hidden',

View File

@@ -8,7 +8,8 @@ import {
Empty,
Divider,
Modal,
Switch
Switch,
Tooltip
} from '@douyinfe/semi-ui';
import {
IllustrationNoResult,
@@ -54,13 +55,17 @@ const SettingsFAQ = ({ options, refresh }) => {
dataIndex: 'question',
key: 'question',
render: (text) => (
<div style={{
maxWidth: '300px',
wordBreak: 'break-word',
fontWeight: 'bold'
}}>
{text}
</div>
<Tooltip content={text} showArrow>
<div style={{
maxWidth: '300px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
fontWeight: 'bold'
}}>
{text}
</div>
</Tooltip>
)
},
{
@@ -68,14 +73,17 @@ const SettingsFAQ = ({ options, refresh }) => {
dataIndex: 'answer',
key: 'answer',
render: (text) => (
<div style={{
maxWidth: '400px',
wordBreak: 'break-word',
whiteSpace: 'pre-wrap',
color: 'var(--semi-color-text-1)'
}}>
{text}
</div>
<Tooltip content={text} showArrow>
<div style={{
maxWidth: '400px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
color: 'var(--semi-color-text-1)'
}}>
{text}
</div>
</Tooltip>
)
},
{