Просмотр исходного кода

✨ 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
t0ng7u 8 месяцев назад
Родитель
Сommit
b842baf21f

+ 1 - 1
web/src/pages/Setting/Dashboard/SettingsAnnouncements.js

@@ -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',

+ 24 - 16
web/src/pages/Setting/Dashboard/SettingsFAQ.js

@@ -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>
       )
     },
     {