refactor(ui): beautify ai interpret panel styling (#714)

## What type of PR is this? /kind refactor ## What this PR does / why we need it: This PR updates the styling of the `interpret_panel` component to enhance its visual design and user experience. The changes include: - Beautify ai interpret panel styling - Improve re-scan and collapse button UI interactions - Beautify font style in summary and issue card These improvements make the component more engaging and aesthetically pleasing. Old: ![image](https://github.com/user-attachments/assets/d57cd6bd-bfd2-4e7c-bd2c-1a9572cc6d10) ![image](https://github.com/user-attachments/assets/5d63055d-9052-4c81-a34e-f1c5b2623205) ![image](https://github.com/user-attachments/assets/539a3c82-9aae-4e2d-9296-ba1c8712cf48) Now: ![image](https://github.com/user-attachments/assets/6337b171-8f2f-4b06-a0b2-9581ef3e37a1) ![image](https://github.com/user-attachments/assets/d76a208e-4b45-4e47-b2ec-77927e60380f) ![image](https://github.com/user-attachments/assets/858c2d84-9557-46c7-95f5-441512dd73de) ## Which issue(s) this PR fixes: Fixes #
KusionStack · Jan 13, 2025 · 3ad4583 · 3ad4583
1 parent 28ee157
commit 3ad4583
Show file tree

Hide file tree

Showing 8 changed files with 397 additions and 115 deletions.
diff --git a/ui/src/components/yaml/styles.module.less b/ui/src/components/yaml/styles.module.less
@@ -220,9 +220,11 @@
       justify-content: space-between;
       align-items: center;
       padding: 12px;
-      background: linear-gradient(135deg,
-          rgba(147, 112, 219, 0.15) 0%,
-          rgba(43, 29, 60, 0.95) 100%);
+      background: linear-gradient(
+        135deg,
+        rgba(147, 112, 219, 0.15) 0%,
+        rgba(43, 29, 60, 0.95) 100%
+      );
       border-bottom: 1px solid rgba(147, 112, 219, 0.2);
       border-radius: 12px 12px 0 0;
       color: #e6e6fa;
@@ -364,8 +366,6 @@
         box-sizing: border-box;
         word-wrap: break-word;
 
-
-
         .yaml_content_diagnosisLoading {
           height: 100%;
           display: flex;
@@ -608,10 +608,12 @@
             hr {
               border: none;
               height: 1px;
-              background: linear-gradient(to right,
-                  rgba(147, 112, 219, 0.1),
-                  rgba(147, 112, 219, 0.4),
-                  rgba(147, 112, 219, 0.1));
+              background: linear-gradient(
+                to right,
+                rgba(147, 112, 219, 0.1),
+                rgba(147, 112, 219, 0.4),
+                rgba(147, 112, 219, 0.1)
+              );
               margin: 24px 0;
             }
           }
@@ -710,7 +712,6 @@
 }
 
 @keyframes sparkle {
-
   0%,
   100% {
     filter: drop-shadow(0 0 4px rgba(147, 112, 219, 0.4));

diff --git a/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less b/ui/src/pages/insightDetail/components/eventAggregator/styles.module.less
@@ -247,18 +247,26 @@
       flex-direction: column;
       backdrop-filter: blur(8px);
       z-index: 10;
-      background-image: radial-gradient(ellipse 489px 674px at 6px 0px,
+      background-image: radial-gradient(
+          ellipse 489px 674px at 6px 0px,
           #fcf8ff 0%,
-          #ebd7ff 100%),
-        radial-gradient(ellipse 587px 672px at 433px 513px,
+          #ebd7ff 100%
+        ),
+        radial-gradient(
+          ellipse 587px 672px at 433px 513px,
           #dae4ffa1 0%,
-          #e1d2e704 100%),
-        radial-gradient(ellipse 346px 396px at 15px 506px,
+          #e1d2e704 100%
+        ),
+        radial-gradient(
+          ellipse 346px 396px at 15px 506px,
           #dae4ffa3 0%,
-          #e1d2e704 100%),
-        radial-gradient(ellipse 583px 668px at 436px 8px,
+          #e1d2e704 100%
+        ),
+        radial-gradient(
+          ellipse 583px 668px at 436px 8px,
           #f8f5ff 0%,
-          #f3e7f904 100%);
+          #f3e7f904 100%
+        );
       animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
       .events_content_diagnosisHeader {
@@ -482,7 +490,6 @@
             }
           }
 
-
           .events_content_diagnosisLoading {
             display: flex;
             flex-direction: column;
@@ -642,10 +649,12 @@
               hr {
                 border: none;
                 height: 1px;
-                background: linear-gradient(to right,
-                    rgba(147, 112, 219, 0.1),
-                    rgba(147, 112, 219, 0.4),
-                    rgba(147, 112, 219, 0.1));
+                background: linear-gradient(
+                  to right,
+                  rgba(147, 112, 219, 0.1),
+                  rgba(147, 112, 219, 0.4),
+                  rgba(147, 112, 219, 0.1)
+                );
                 margin: 24px 0;
               }
             }
@@ -738,10 +747,12 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(120deg,
-        transparent,
-        rgba(255, 255, 255, 0.6),
-        transparent);
+    background: linear-gradient(
+      120deg,
+      transparent,
+      rgba(255, 255, 255, 0.6),
+      transparent
+    );
     transform: translateX(-100%);
   }
 
@@ -767,15 +778,15 @@
     .ant-table {
       background: transparent;
 
-      .ant-table-thead>tr>th {
+      .ant-table-thead > tr > th {
         background: #fafafa;
         font-weight: 500;
         border-bottom: 1px solid #f0f0f0;
         padding: 12px 16px;
       }
 
       .ant-table-tbody {
-        >tr {
+        > tr {
           transition: all 0.2s ease;
 
           &:hover {
@@ -784,7 +795,7 @@
             z-index: 1;
           }
 
-          >td {
+          > td {
             transition: background-color 0.2s ease;
           }
         }
@@ -831,11 +842,13 @@
       .ant-skeleton-paragraph {
         margin-bottom: 0;
 
-        >li {
-          background: linear-gradient(90deg,
-              #f5f5f5 25%,
-              #e8e8e8 37%,
-              #f5f5f5 63%);
+        > li {
+          background: linear-gradient(
+            90deg,
+            #f5f5f5 25%,
+            #e8e8e8 37%,
+            #f5f5f5 63%
+          );
           background-size: 400% 100%;
           animation: ant-skeleton-loading 1.4s ease infinite;
         }

diff --git a/ui/src/pages/insightDetail/components/exceptionList/index.tsx b/ui/src/pages/insightDetail/components/exceptionList/index.tsx
@@ -7,6 +7,7 @@ import {
   DownOutlined,
   PoweroffOutlined,
   CloseOutlined,
+  RedoOutlined,
 } from '@ant-design/icons'
 import Loading from '@/components/loading'
 import { SEVERITY_MAP } from '@/utils/constants'
@@ -79,8 +80,6 @@ const ExceptionList = ({
   function handleClick() {
     setIsShowList(!isShowList)
   }
-  const iconStyle = { marginLeft: 5, color: '#646566' }
-
   const debouncedInterpret = useCallback(
     debounce(async () => {
       try {
@@ -364,20 +363,28 @@ const ExceptionList = ({
                 />
               </Tooltip>
             )}
-            <Button onClick={rescan}>{t('ExceptionList.Rescan')}</Button>
-            <div className={styles.header_right_action} onClick={handleClick}>
-              {isShowList ? (
-                <span>
-                  {t('ExceptionList.Collapse')}
-                  <UpOutlined style={iconStyle} />
-                </span>
-              ) : (
-                <span>
-                  {t('ExceptionList.Expand')}
-                  <DownOutlined style={iconStyle} />
-                </span>
-              )}
-            </div>
+            <Tooltip title={t('ExceptionList.Rescan')}>
+              <Button
+                className={styles.header_right_action}
+                icon={<RedoOutlined />}
+                onClick={rescan}
+                type="text"
+              />
+            </Tooltip>
+            <Tooltip
+              title={
+                isShowList
+                  ? t('ExceptionList.Collapse')
+                  : t('ExceptionList.Expand')
+              }
+            >
+              <Button
+                className={styles.header_right_action}
+                icon={isShowList ? <UpOutlined /> : <DownOutlined />}
+                onClick={handleClick}
+                type="text"
+              />
+            </Tooltip>
           </div>
         </div>
         {isShowList && (